* {
    /* -webkit-box-sizing: border-box; */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}  
  
.main_ui{
  background-color: #337ab7;
}

.main_ui_dark{
  background-color: #2f70a9;
  display: inline-block;
}

.top_menu_icon{
  transition-timing-function: linear;
  transition: 0.4s; 
  outline-width: 0;
  display: inline-block;
  cursor: pointer;
  margin-right: -4px;
}

.top_menu_icon:hover{
  background-color: #de823b;
}

.top_menu_icon_focus_bg:focus{
  background-color: #de823b;
}

.language_icon_container:focus .top_menu_icon_focus_bg{
  background-color: #de823b;
}

.language_icon_container{
  transition-timing-function: linear;
  transition: 0.4s; 
  outline-width: 0;
  overflow: hidden;
  vertical-align: bottom;
  max-height: 50px;
  max-width: 50px;
  display: inline-block;
  white-space: nowrap;
}

.language_icon_container:focus{
  max-width: 100px;
}

.side_menu_mobile{
  width: 100vw !important;
}


.side_menu_mobile .side_menu_item{
  width: 100vw;
}

.side_menu_item{
  transition-timing-function: linear;
  transition: 0.4s; 
  cursor: pointer;
  display: table-cell;
  vertical-align: middle;
  height: 40px;
  padding-left: 18px;
  color: white;
  font-size: 16px;
}

.side_menu_link{
  display: inherit;
}

.side_menu_link:hover{
  text-decoration: none;
}

.side_menu_icon_dark{
  background-color: #2f70a9;
  color: #dfe8f0;
}

.side_menu_icon_light{
  color: white;
  background-color: #2b6597;
  border-left: #de823b 4px solid;
  padding-left: 14px;
}

.side_menu_item:hover{
  padding-left: 22px;
  background-color: #de823b;
}

.side_menu_item img {
  position: relative;
  top: -2px;
}

.side_menu_group{
  transition-timing-function: linear;
  transition: 0.4s;
  outline-width: 0;
  overflow: hidden;
  max-height: 40px;
}

.side_menu_group:focus{
  max-height: 2000px;
}

.side_menu_category{
  font-size: 20px;
}

.side_menu_category:focus{
  padding-left: 20px;  
}

.side_menu_group:focus .side_menu_category .fa{
  transform: rotate(-90deg);
}

.side_menu_group:focus .side_menu_category{
  background-color: #de823b;
}

.notification_counter{
  background-color: #de823b;
  margin-left: 28px;
  margin-top: 28px;
  width: 20px;
  height: 18px;
  position: absolute;
  border-radius: 8px;
  color: white;
  text-align: center;
}

.main_div{
  max-height: calc(100vh - 50px);
  min-height: calc(100vh - 50px);
  overflow: auto;
  padding: 30px;
}

.text_header_1{
  font-family: "Cabin","Roboto", "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
  font-size: 5vmin;
  text-align: center; 
  color: #1e5788;
}

.text_header_2{
  font-size: 4vmin;
}

.text_header_3{
  font-size: 2.5vmin;
}

input[type=checkbox]:not(.old),
input[type=radio   ]:not(.old){
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
}

input[type=checkbox]:not(.old),
input[type=radio   ]:not(.old) + label{
  display      : inline-block;
  margin-left  : -2em;
  line-height  : 1.5em;
}

input[type=checkbox]:not(.old) + label,
input[type=radio   ]:not(.old) + label > span{
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 0.25em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
}

input[type=checkbox]:not(.old):checked + label,
input[type=radio   ]:not(.old):checked + label > span{
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}

input[type=checkbox]:not(.old):checked + label:before{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : rgb(153,204,102);
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
}

input[type=radio]:not(.old):checked + label > span > span{
  display          : block;
  width            : 0.5em;
  height           : 0.5em;
  margin           : 0.125em;
  border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.125em;
  background       : rgb(153,204,102);
  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}

input[type=radio]:not(.old):checked:disabled + label > span > span{
    border: 0.0625em solid rgb(142, 142, 142);
    background: #c6c6c6;
    background-image: linear-gradient(rgb(221, 221, 221),#c1c1c1);
}
  
input[type=radio   ]:not(.old):disabled + label,
input[type=checkbox]:not(.old):disabled + label:before{
    color: #bbbbbb;
    text-shadow: none;
}

input[type=radio   ]:not(.old):disabled{
  cursor: default !important;
}


input[type=text]:not(.old), input[type=number]:not(.old), input[type=password]:not(.old) {
    width: 300px;
    height: 30px;
  border-radius: 6px 6px 6px 6px;
    border: none;
  color: #555555;
  font-size: 1em;
  line-height: 1.4em;
  transition: 0.4s;
    -moz-box-shadow: 0 0 1px #9a9a9a;
    -webkit-box-shadow: 0 0 1px #9a9a9a;
    box-shadow: 0 0 1px #9a9a9a;
}

input[type=text]:not(.old):focus, input[type=password]:not(.old):focus {
    outline-width: 0;
    -moz-box-shadow: 0 0 8px #de823b;
    -webkit-box-shadow: 0 0 8px #de823b;
    box-shadow: 0 0 8px #de823b;
}


textarea:not(.old) {
  resize: none;
    width: 30vw;
    height: 16vh;
  border-radius: 6px 6px 6px 6px;
    border: none;
  color: #555555;
  font-size: 1em;
  line-height: 1.4em;
  transition: 0.4s;
    -moz-box-shadow: 0 0 1px #9a9a9a;
    -webkit-box-shadow: 0 0 1px #9a9a9a;
    box-shadow: 0 0 1px #9a9a9a;
}

textarea:not(.old):focus {
    outline-width: 0;
    -moz-box-shadow: 0 0 8px #de823b;
    -webkit-box-shadow: 0 0 8px #de823b;
    box-shadow: 0 0 8px #de823b;
}

select:not(.old) {
    width: 30vw;
    height: 3vh;
  border-radius: 6px 6px 6px 6px;
    border: none;
  color: #555555;
  font-size: 1em;
  line-height: 1.4em;
  transition: 0.6s;
    -moz-box-shadow: 0 0 1px #9a9a9a;
    -webkit-box-shadow: 0 0 1px #9a9a9a;
    box-shadow: 0 0 1px #9a9a9a;
}

select:not(.old):focus {
    outline-width: 0;
    -moz-box-shadow: 0 0 8px #de823b;
    -webkit-box-shadow: 0 0 8px #de823b;
    box-shadow: 0 0 8px #de823b;
}

.ui-datepicker-year{
  height: initial !important;;
}


.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

input[type=file]:not(.old){
  width: 20px;
  height: 20px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  
}


input[type=file]:not(.old) + label{
  font-weight: normal;
    outline-width: 0;
    color: #fff;
    background-color: #337ab7;
  background: linear-gradient(to top, #337ab7 0%,#458ac3 80%);
    display: inline-block;
    padding: 0.5vmin 1vmin;
    margin-bottom: 0;
    font-size: 15px;
    text-align: center;
    white-space: nowrap;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 1vmin;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 1px #8f8f8f;
}

.button, input[type=submit]:not(.old), button:not(.old){
    outline-width: 0;
    color: #fff;
    background-color: #337ab7;
   background: linear-gradient(to top, #337ab7 0%,#458ac3 80%);
    display: inline-block;
    padding: 0.5vmin 1vmin;
    font-size: 15px;
    text-align: center;
    white-space: nowrap;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 1vmin;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 1px #8f8f8f;
}

.button:hover, .button:active, input[type=submit]:not(.old):hover, button:not(.old):hover, .button:not(.old):active{
  background-color: #458ac3;
    background: linear-gradient(to bottom, #fdb747 0%,#ffa91e 80%);  
  box-shadow: none;
  color: #fff;
  text-decoration: none;
}

.schedule_headers{
    background: #337ab7;
    color: white;
    border-left: white 1px solid;
    border-bottom: white 2px solid;
}

.schedule_subject_inactive {
    background-color: #dadada;
    border: 1px solid #bbbbbb !important;
}

.login_box{
    text-align: center;
    width: 36vmin;
    margin: auto;
    background: #fdfdff;
    padding: 3vmin;
    border: 1px #e4e4e4 solid;
    border-radius: 1vmin;
}

.main_div.mobile_view{
  width: 100vw !important;
}

.mobile_view .login_box{
  width: 80vmin;
  padding-top: 3vmin;
}

.mobile_view .login_icon_box{
  width: 60vmin;
    height: 50vmin;  
}

.login_box_spacer{
  height: 10vh
}

.mobile_view .login_box_spacer{
  height: 00vh
}

.mobile_view .login_icon_box img{
  width: 35vmin !important
}

.mobile_view .login_box input{
  width: 70vmin !important;
  height: 6vh !important;
  font-size: 3.5vmin !important;
  border-radius: 2vmin !important;
}

.login_icon_box{
  background: linear-gradient(to top, #337ab7 0%,#458ac3 80%);
    width: 20vmin;
    height: 20vmin;
    vertical-align: middle;
    border-radius: 100vmin;
    text-align: center;
    margin: auto;
    padding-top: 3.5vmin;
}

.box_info{
  padding: 2vw;
  border-radius: 10px;
  width: 100%;
  margin-top: 20px;
  display: inline-block;
  box-shadow: #a0a0a0 0.1vh 0.1vh 0.9vh;
  font-size: 17px;
  color: #000000de;
  padding-top: 35px;
  position: relative;
}

.box_info_header{
  color: #3379b7e8;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: -1vw;
  left: 1vw;
  background: white;
  background-color: white;
  border: #3379b7 solid 1px;
  border-radius: 0.3vw;
  overflow: hidden;
  height: 32px;
  margin: 0;
  padding: 0;
  padding-right: 0.5vw;
  vertical-align: top;
}

.box_info_header img{
  height: 100%;
  background: #3379b7;
  padding: 0.4vw;
}

.info_box_dismiss{
  color: white;
  cursor: pointer;
  margin: auto;
  margin-top: 2vh;
  border-radius: 0.5vw;
  padding: 0.4vw;
}

.box_info.hover:hover{
  box-shadow: #3378b7 0.1vh 0.1vh 1.9vh;  
}

.box_info:hover .info_box_dismiss{
    background: #3379b7;    
}

.box_info.hover_pointer:hover{
    cursor: pointer;    
}

/* 
  Classroom 
*/

.classroom_menu_buttons{
  border:1px solid #000;
  background:#fff;
    display: block;
    margin-left: auto;
    margin-right: auto;
  vertical-align:middle; 
  text-align:center;
  align: center;
  position: fixed;
  z-index: 1;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

.classroom_menu_buttons:hover {
  border:8px solid #027ee3;
  
}

.classroom_chat{
  background-color: #3c5e7c;
  font-family: 'Tahoma', sans-serif;
  font-size: 16px;
  color:#fff;
  margin: 0;
  border: none;
}

.classroom_chat_input{
  border: none;
    outline: none !important;
  resize:none !important;
  padding-left:15px;
  display:inline-block;
  vertical-align:middle;
  overflow:hidden;
}

.classroom_chat_input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #fff;
}

.classroom_chat_input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #fff;
}

.classroom_chat_input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #fff;
}

.classroom_chat_input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}

.classroom_chat_button {
  cursor: pointer;
  padding-right:10px;
  color: #fff;
  font-weight:normal;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border-radius:8px;
  padding:5px 16px;
  text-decoration:none;
  background:-moz-linear-gradient( center top, #0266b8 5%, #0550a1 100% );
  background:-ms-linear-gradient( top, #0266b8 5%, #0550a1 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0266b8', endColorstr='#0550a1');
  background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #0266b8), color-stop(100%, #0550a1) );
  background-color:#0266b8;
  
}

.classroom_chat_button:hover {
  color: #fff;
  background:-moz-linear-gradient( center top, #0550a1 5%, #0266b8 100% );
  background:-ms-linear-gradient( top, #0550a1 5%, #0266b8 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0550a1', endColorstr='#0266b8');
  background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #0550a1), color-stop(100%, #0266b8) );
  background-color:#0550a1;
  
}

.classroom_chat_button:active {
  position:relative;
  top:1px;
}
.classroom_chat_button:link {
  color: #fff;
}

.classroom_chat_button:visited {
  color: #fff;
}

.classroom_chat_messages{
  overflow-y: auto;  
}

.classroom_chat_messages::-webkit-scrollbar {
  width: 4px;
  height: 2px;
}

.classroom_chat_messages::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}

.classroom_chat_messages::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 50px;
}

.classroom_chat_messages::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

.classroom_chat_messages::-webkit-scrollbar-thumb:active {
  background: #000000;
}

.classroom_chat_messages::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 50px;
}

.classroom_chat_messages::-webkit-scrollbar-track:hover {
  background: #666666;
}

.classroom_chat_messages::-webkit-scrollbar-track:active {
  background: #333333;
}

.classroom_chat_messages::-webkit-scrollbar-corner {
  background: transparent;
}

.classroom_chat_message{
  position: relative;
  min-height: 4vh;
  color: #000;
  padding: 10px;
  margin: 8px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  font-size: 1.5vh;
}

.classroom_chat_message_peer 
{
  margin-left: 20px;
  margin-right: 25px;
  background: #86BB71;
}

.classroom_chat_message_peer:after 
{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 6px 7px 6px 0;
  border-color: transparent #86BB71;
  display: block;
  width: 0;
  z-index: 1;
  left: -6px;
  top: 13px;
}

.classroom_chat_message_you
{
  margin-left: 45px;
  background: #EEF3F7;
}

.classroom_chat_message_you:after 
{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 6px 0px 6px 7;
  border-color: transparent #EEF3F7;
  display: block;
  width: 0;
  z-index: 1;
  right: -6px;
  top: 13px;
}

.classroom_page_selecter {
  border:1px solid #000;
  background:#fff;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  background: #fff; 
  width: 300px; 
  height; 70px; 
  position: fixed; 
  bottom: 20px; 
  font-size: 1.5vw;
  text-align: center;
}

.classroom_tabs{
  position: fixed;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 8px;
  padding: 13px;
}

.classroom_tab_selecters{
  border:1px solid #000;
  background: rgba(255, 255, 255, .8);
}

.classroom_tab_selecters:hover {
  border:5px solid #027ee3;
  padding: 8px;
}

.classroom_tab_selecters_selected{
  border:5px solid #ffa31a;
  padding: 8px;
}

.classroom_tab_selecters_peer_selected{
  border:5px solid #8bb6f9;
  padding: 8px;
}

.management_icon{
    display: inline-block;
    border-radius: 10vmin;
    width: 2vh;
    height: 2vh;
    text-align: center;
    cursor: pointer;
    display: inline;
}

.management_icon.mobile_view div{
    width: 3.5vmin !important;
    height: 3.5vmin !important;  
}

.management_icon div{
    vertical-align: middle;
    transition: 0.3s;
    position: relative;
    height: 2vh;
    width: 2vh;
    display: inline-block;
    background-repeat: no-repeat !important;
    margin: 1px;
}

.management_icon:hover div{
    transform: scale(1.1);
}

.management_icon:hover .delete_icon{
    transform: scale(1.2);
  background: url('/static/icons/delete_hover.svg') !important;
}

.management_icon:hover .edit_icon{
  transition: 1s;
    transform: scale(1.2) rotate(90deg) ;
}

.management_icon:hover .undo_icon{
  transition: 0.3s;
    transform: rotate(-120deg) ;
}

div.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

div.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

div.tab button:hover {
  background-color: #ddd;
}

div.tab button.active {
  background-color: #ccc;
}

div.tab button.inactive {
  background-color: #f1f1f1;
}

.tab > :first-child {
  background-color: #ccc;
}

.tabcontent {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
   -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  display: none;
}

.tabs_container > :first-child {
  display: block; !important;
}

.tabcontent .active{
  display: block; !important;
}

@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.module_id_tag {
    vertical-align: middle;
    color: white;
    font-size: 0.5em;
    background: #3379b7;
    padding: 0.2em;
    border-radius: 0.7em;
    min-width: 3em;
    display: inline-block;
    text-align: center;
}

.book_progress_img{
    width: 6vw;
    border-radius: 2vw;
    margin-left: 0.5vw;
    box-shadow: #a0a0a0 0.1vh 0.1vh 0.9vh;
}

.box_info:hover .book_progress_img{
    box-shadow: #3378b7 0.1vh 0.1vh 1vh;
}

.message_success, .message_warning, .message_info, .message_error{
  margin-right: 1vmin;
  margin-left: 1vmin;
  padding: 10px;
  border-radius: 5px;
  margin: 20px 0px 20px 0px;
  display: block;  
}

.message_success{
  background-color: #dff0d8;
}

.message_error {background-color: #ffc4bf;}
.message_success {background-color: #dff0d8;}
.message_info {background-color: #bae0ff;}
.message_warning {background-color: #ffdfb0;}

.alerts.error {background-color: #f44336;}
.alerts.success {background-color: #4CAF50;}
.alerts.info {background-color: #2196F3;}
.alerts.warning {background-color: #ff9800;}

.module_icon_img{
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

.module_item_container{
    background: white;
    border-radius: 10vw;
    margin: 0.2vw;
    border: white 3px solid;
    box-shadow: #a7a7a7 0 0 0.1vw;
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden;
    outline: none;
    min-width: 5.8vw;
    height: 2.4vw;
    padding: 0.2vw;
    font-size: 1.2vw;
  }

.module_id_text{
    vertical-align: middle;
    color: #5d5d5d;
    margin-left: 0.3vw;
}

.module_edito_text{
  margin: auto;
}

.module_editor_title{
  font-size: 2vmin; 
  margin-top: 4vmin; 
  text-align: center;
}

.module_editor_header{
    font-size: 2.6vmin;
    color: #252525;
    padding-top: 2vw;
}

.module_editor_error{
    color: #d05454;
    background: #ffebeb;
    border-radius: 0.2vmin;
    border: #f3a4a3 1px solid;
    padding: 0.4vmin;
    display: inline-block;
  }

.latex_markup{
  color: #c998d2 !important;
}

.latex_markup_inner{
  color: #9C27B0 !important;
}

.script_markup{
  background: rgba(255, 193, 7, 0.4);
  /*color: #8bccc6 !important;*/
}

/*
.script_markup_inner{
  color: #009688 !important;
}
*/


.constant_markup{
  color: #8bccc6 !important;
}

.constant_markup_inner{
  color: #009688 !important;
}