﻿.searchTextBox,.searchTextBox:focus{box-shadow:none!important;outline:0!important}
::-webkit-scrollbar{width:3px!important; height:3px!important;}
::-webkit-scrollbar-track{background-color:#eee!important}
::-webkit-scrollbar-thumb{background-color:#4ab0e4!important}
::-webkit-scrollbar-thumb:hover{background-color:#dca91b!important}
.classDetails,.classWrapper .enter,.classWrapper:hover{background-color:#fbc93d}
.grpHeader{text-align:right;font-size:14px;color:#000!important;margin:20px 5px;padding:5px;border-radius:5px;background: url("Image/Design/bgwhite.png");opacity:0; color: #AAAAAA; font-weight:bold}
.grpClass{position:relative;opacity:0}
.classPoint{text-align:center}
.classPoint div{border:none;background-color:#ccc;width:10px;height:10px;border-radius:5px;margin:20px 5px 10px;display:inline-block}
.classItems{margin:0;width:calc(25% - 20px);display:inline-block}
.classDetails,.coverImage{position:absolute;left:0;width:100%}
.classItems .classWrapper{border:1px solid #fbc93d;margin:0 10px;border-radius:10px;padding:10px 0;position:relative;background-size:cover}
.classWrapper .imageBody{min-height:150px}
.classWrapper img{height:150px;margin:auto;border-radius:10px}
.coverImage{top:-5px;height:165px;background-size:cover;z-index:1;opacity:.1;filter:blur(2px)}
.classWrapper div{margin-top:1vh!important}
.details,.teacherTitle{font-size:13px;color:#696969;text-align:right;padding-right:5px;padding-left:5px;min-height:20px}
.classDetails{display:none;top:-10px;height:calc(100% + 5px);z-index:2;color:#696969;overflow-y:auto;padding:10px;text-align:justify;border-radius:10px;overflow:hidden}
.LeftArrow:hover i,.RightArrow:hover i,.classTime{color:#dca91b}
.classDetails span{color:#000;font-size:14px}
.classTime{background:#fff;padding:1px 3px;border-radius:3px;margin:0 5px}
.details div{font-size:12px;color:#696969}
.classWrapper .enter{padding:5px;color:#173d7b;font-size:16px;text-shadow:0 1px 0 rgba(58,99,124,.8);text-wrap:nowrap;overflow:hidden}
.classWrapper,.classWrapper .enter:hover{cursor:pointer;transition:.5s}
.owl-next,.owl-prev{display:inline-block;margin:1vh 2vw;color:#173d7b;transition:.5s}
.ListStyle .coverImage,.searchBox{display:none}
.owl-next:hover,.owl-prev:hover{transform:scale(1.2);color:#fbc93d}
.owl-nav{margin:2vh 0}
.menuIcon a{background:azure;display:block;border:1px solid #4ab0e4;border-radius:5px;padding:10px}
.menuIcon img{margin-bottom:10px}
.menuIcon span{font-size:14px;color:#173d7b}
.menuIcon div{padding:5px!important}
.searchStyle{text-align:right;padding-top:20px;padding-bottom:10px}
.changeStyle span,.searchStyle span{border:1px solid #dca91b;background-color:transparent;border-radius:5px;padding:12px 6px 6px 6px;margin-right:5px;margin-left:5px;font-size:10px;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s}
.changeStyle span:hover,.searchStyle span:hover{background-color:#dca91b;cursor:pointer}
.changeStyle span:hover i,.searchStyle span:hover i{color:#fff}
.changeStyle .active,.searchStyle .active{background-color:#dca91b;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s}
.ListStyle{width:calc(100% - 20px)!important}
.ListStyle .classWrapper{padding:6px 0;height:48px;border-radius:0px !important;margin:5px 10px!important;background-color: rgba(251, 201, 61, 0.25); border-radius:5px !important}
.MoocClass.ListStyle .classWrapper {background-color: rgba(37, 160, 219, 0.25)}
.ListStyle .classWrapper:hover{background-color: rgba(251, 201, 61, 1)}
.ListStyle .classWrapper .imageBody{min-height:32px;float:right!important;margin-right:4px;margin-left:4px}
.ListStyle .classWrapper img{height:32px!important;width:32px!important;margin-top:-9px; margin-right: 5px; margin-left: 5px}
.ListStyle .classWrapper .enter{width:30%;float:right;margin-right:10px;margin-left:10px;text-align:right;background-color:transparent!important;margin-top:0!important;color:#173d7b!important}
.ListStyle .details,.ListStyle .teacherTitle{float:right;width:20%;margin:8px 0 0!important}
.ListStyle .classDetails{padding:5px!important;border-radius:0!important}
.ListStyle .classWrapper .floatLeft {float: left !important}
.ListStyle .classWrapper .textAlignLeft {text-align: left !important}
.searchBox{width:calc(100% - 10px);border-radius:5px;position:relative;border:1px solid #fbc93d;margin-left:5px;margin-right:5px;padding:4px 0;margin-top:-2px}
.searchTextBox{width:100%!important;border:none!important;text-align:center!important;font-size:12px!important}
.searchTextBox:focus{border:none!important}
.searchButton{position:absolute;left:10px;text-decoration:none}
.searchCheckBox{position:absolute;right:10px;padding:0!important;margin:5px 0 0!important;border:none!important}
.searchCheckBox label{position:absolute; width:126px}
.LeftArrow,.RightArrow{font-size:16px;font-style:normal;width:32px;border-radius:16px;position:absolute;top:45%}
.searchCheckBox:hover{background-color:unset!important;cursor:pointer!important}
.RightArrow{right:0}
.LeftArrow{left:0}
.LeftArrow:hover,.RightArrow:hover{cursor:pointer}
.LeftArrow i,.RightArrow i{color:#ccc}
.td1{padding:0;height:50px}
.progressBar{background-color:#dca91b;margin:auto;height:5px;border-radius:10px}
.MoocClass .classWrapper{border-color:#25a0db}
.MoocClass .classWrapper .classDetails,.MoocClass .classWrapper:hover{background-color:#25a0db}
.MoocClass .classWrapper:hover .enter, .MoocClass .classWrapper:hover .details {color: #FFFFFF !important}
.MoocClass .classWrapper .classTime{color:#25a0db}
.MoocClass .classWrapper .enter{background-color:#25a0db;color:#fff}
.classPointActive{background-color:#dca91b!important}
.grpClassM .classPointActive,.grpClassM .progressBar{background-color:#25a0db!important}
.newsBox,.newsBoxContentDetails{padding:10px}
.newsBox{position:fixed;width:100vw;height:100vh;left:0;top:0;z-index:999;display:none;background-color:rgba(0,0,0,.9)}
.newsBoxContent{width:99vw;position:absolute;left:0.5vw;height:80vh;top:10vh;border-radius:5px;}
.newsBoxContentMessage,.newsBoxContentNews{height:39vh;overflow:hidden}
.newsBoxContentNews{margin-bottom:2vh}
.newsBoxContentDetails p{padding:10px;font-size:14px}
.reportBox{position:fixed;width:100vw;height:100vh;left:0;top:0;z-index:999;display:none;background-color:rgba(0,0,0,.9)}
.reportBoxContent{width:99vw;position:absolute;left:0.5vw;height:80vh;top:10vh;border-radius:5px;}
.reportBoxContentMessage {height: 39vh;overflow: hidden;width: 100%;text-align: center;border: 1px solid #b9d5e1;background-color: white;}
.reportBox .reportBoxContent .reportBoxContentMessage div table tbody tr td a {text-decoration: none;color: black;}
.ChangeLanguage{float:left;margin-left:.5%;}
.studentMenu{background-color:#4ab0e4;margin:0 2.5px;height:60px;width:110px;border-radius:5px;text-align:center;padding-top: 4px}
.studentMenu:hover {cursor:pointer}
.studentMenu a, .studentMenu p{color:#fff;font-weight:700;font-size:12px}
.studentMenu img{margin:5px 0 8px;filter:brightness(100)}
.studentMenu i{margin:5px 0 5px}
.studentMenuActive {position:relative; margin-top:-10px; top:10px;height:70px; border-radius:5px 5px 0px 0px; background-color:#FFFFFF;}
.studentMenuActive a, .studentMenuActive p{color:#25a0db}
.studentMenuActive img{filter:unset}
.LanguagePanel {display:none; margin: 20px 0}
.LanguagePanel a {text-decoration: none !important; display: block; border-radius:5px; border:1px solid; margin:5px !important; padding:5px}

@media only screen and (min-width:1920px){
    .classItems{width:calc(20% - 20px)}

}
@media only screen and (max-width:1024px){
    .classItems{width:calc(50% - 20px)}
    #ctl00_MainContent_aHelp,#list,#square,.searchCheckBox{display:none}
    .td1{width:110px!important}
    .searchTextBox{text-align:right!important}
    .searchBox{height:36px;margin-top:2px}
    .ListStyle .classDetails {display:none !important}
    .ListStyle .details, .ListStyle .teacherTitle {display:none !important}
    .ListStyle .classWrapper .enter {width:calc(100% - 85px) !important;}
}
@media only screen and (max-width:768px){
    .classItems{width:calc(100% - 20px)}
    #ctl00_MainContent_aHelp,#list,#square,.searchCheckBox{display:none}
    .td1{width:110px!important}
    .searchTextBox{text-align:right!important}
    .tdWidth1{width:100%}
    .tdWidth2{width:0}
    .searchBox{height:36px;margin-top:2px}    
    .tabNav {width: 100%}
    .tabNav tr td {display:inline-block; margin:4px 1%; width:47%}
    .studentMenu {width:100%; height:unset !important; padding:10px}
    .studentMenu img, .studentMenu i {display:none}
    .studentMenu p{margin:0}
    .studentMenu br {display:none}
    #ProfileDiv {width:98% !important; left: 1% !important; right:1% !important; border-radius: 10px !important; top:3px !important; position:unset !important}
    .LanguagePanel {position: unset}
    .studentMenuActive {position:unset; margin-top:unset; top:unset;height:60px; border-radius:5px }
    .studentMenu a, .studentMenu p { display:block }
    .ListStyle .classDetails {display:none !important}
    .ListStyle .details, .ListStyle .teacherTitle {display:none !important}
    .ListStyle .classWrapper .enter {width:calc(100% - 85px) !important;}
}