.nav-active{
  background-color: rgb(13, 28, 68);
  color:white;  
}
.nav-active .v-list-item__title{
  color:white;
}
.nav-active .v-btn__content{
  color:white;
}
.nav-active .v-icon{
  color:#0088AA;
}
.nav-inactive .v-icon{
  color:#AAAA00;
}

.v-application{
  font-family: 'Chakra Petch', sans-serif;
}
.v-app-bar {
  font-family: 'Gugi', sans-serif;
}
.credit{
  font-size:0.7em;
  font-family:"Chakra Petch";
  color:#0088AA;
}

.credit a{
  color:#0088AA;
}
.v-navigation-drawer {
  font-family:"Chakra Petch"; 
}
.v-application .v-alert.green{
  color: #FFFFFF!important;
  background-color: #3caa60!important;
}
.v-alert{
    padding:12px;
}
.v-card__title{
  padding:8px;
  font-size:1em;
}
.i32{
  font-size:32px;
}
.i24{
  font-size:24px;
}

#examdiv{
  font-family:"Chakra Petch";  
  font-size:18px;
  color:#335;  
}
#examdiv .v-card__text{
  font-size:18px;
}
#examdiv .qtxt{
  color:#000;  
}
#examdiv li {
  line-height : 2;
  font-family:"Chakra Petch";  
  font-size:18px;
}
.textbox{
  border:1px solid #aaa;
  padding-left:6px;
}
#examdiv .textbox{
  border:1px solid #aaa;
  padding-left:6px;
}
#examdiv .textbox:hover{
  border:1px solid #58f;
  background-color:#ddffdd;
}

.code {
  border:1px solid #aaa;
  padding:10px;
  background: #ffd;
  color:#000055;
  margin:10px;
  font-family:"Consolas","Source Code Pro";  
  font-size:18px;
  line-height : 1.5;
}
pre.code .textbox{
  background: #fff;
  padding-left:2px;
}
svg {
  font-family:"Source Code Pro";
  font-size:14px;  
}
@media screen and (min-width: 900px) {
  .ds {
    display:none;
  }
}
@media screen and (max-width: 900px) {
  .credit{
    font-size:0.5em;
  }
  .v-alert{
    padding:6px;
  }
  .i32{
    font-size:24px;
  }
  .i24{
    font-size:20px;
  }
  .hs {
    display:none;
  }
  .v-btn:not(.v-btn--round).v-size--default{
    min-width:32px;
  }
}

input.textbox{
  border:1px solid #aaa;
  padding-left:6px;
}

.link a {
  color:rgb(10, 80, 160);
  text-decoration: none;
}
.title {
  color:rgb(100, 10, 10);
}

.v-btn {
  text-transform:none;
}


.code_editor {
  border:1px solid #aaa;
  padding:2px;
  background: #eee;
  color:#000055;
  font-family:"Consolas";  
  font-size:16px;
  line-height :1.5;
}


a.active .v-btn__content {
  color:#0000FF;  
}

.checkbox {
  width:16px; height:16px;
  padding: 2;
}

.code_editor pre{
  border:1px solid #ddd;
  padding: 4px;
  background-color:#eee;
}
.code_editor div.box{
  padding-left:1px;

}

.CodeMirror{
  height: auto;
  min-height: 100px;
}
.linenum {
  color:#777;
  display:inline-block;
  width:26px;
  text-align:right;
}


#chatwindow {
  z-index: 99;
  position: fixed;
  width:450px;
  bottom: 5px;
  right : 10px;
  background-color: #0D47A1;
  color: white;
  opacity: 0.8; 
}
#chatwindow input{
  background-color: #1976D2;
  color: white;
}
#chatwindow.down {
  width:40px;
}

#chatwindow:hover{
  opacity: 0.95;
}
@media screen and (max-width: 900px) {
  #chatwindow {
    bottom: 55px;
    right : 5px;
  } 
}

pre.console{
  background-color: #666666;
  color: white;
  padding: 6px;
}

.v-text-field input{
  line-height: 28px;
}

#div_task img{
  width:90%;
}

/* math {
  font-size:1.5em;
}
mjx-msup{
  font-size:80%;
} */

mjx-msub mjx-script{
  font-size:60%;
}

.v-card {
  overflow-wrap: normal; 
}

.table th, .table td {
  padding: 4px;
}

.styled-readonly{
  background-color: #dddddd;
  font-weight: bolder;
}

ol {
  counter-reset: item;
}
ol li {
  display: block;
  position: relative;
}
ol li:before {
  content: counters(item, ".");
  counter-increment: item;
  position: absolute;
  margin-right: 100%;
  right: 10px; /* space between number and text */
}

.v-app-bar-title__content, .v-app-bar-title__placeholder {
  text-overflow: inherit; 
}

.v-input .v-label {
  height: 26px;
  line-height: 26px;
  letter-spacing: normal;
}

table.center td{
  text-align: center;
}