/*     css list with numeber circle background -------------- */

.main {
    max-width:900px;
    font: 10pt sans-serif, Helvetica, Arial
    ;line-height:16px
    ;margin:25pt;		     
}


th {
    text-align: left;
}

.contr {
    background: #f0f0f0;
    padding: 10px;
    border: 1px solid #000;
}

.links {
    float: left;
    max-width: 340px;
    background: #f1f1f1;
    height: 750px;
    overflow: scroll;
    border: 1px solid #000;
    padding: 10px;
}

.editcard {
  border: 1px solid #000;
  max-width: 500px;
  background-color: #f1f1f1;
  margin: 0;
  float: left;

}
.preview{
    float:right;
}
.editinnercard {
    margin: 15px;
}

input {
    border-radius: 0;
    border: 0.1pt #A9A9A9 solid;
}

 ul.cardselection {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 300px;
  background-color: #f1f1f1;
}

 li.cardselection  {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
 }

li:nth-child(even).cardselection {background: #BBB}
li:nth-child(odd).cardselection {background: #DDD}

/* Change the link color on hover */
span:hover.cc {
  background-color: #555;
  color: white;
  padding: 8px 16px;
}

input.rankInput{
    width: 35px;
}

div.historyLV div.listView ul{
    height:600px;
}

div.listView{

    margin-top: 80px;
    margin-bottom: 2%;
    margin-left: 10%;
    margin-right: 10%;

}
div.listView input{
    width: 100%;
}

div.listView .listView_li input{
    width: 2%;
    margin-right: 5px;
}

div.listView .listView_li button{
    width: 95%;
  
}

div.listView button:focus {
    background-color: #72e7ff;
}

.answer_tr {
    padding-top: 200px;
}

.info {
    padding-left: 10%;
}
.righttd .info {
    padding-left: 0;
}
div.info input {
    width: 60%;
    margin-bottom: 15px;
}

.swapable_info {
    width: 70%;
}

.info .swapable_info .unitTestDetails .unitTestsList{
    padding: 0;
    
}

div.info textarea {
    width: 60%;
    margin-bottom: 15px;
    height: 150px;
}

div.info button {
    margin-top:10px;
    margin-bottom: 10px;
}

div.info select {
    position: absolute;
    right:10%;
}

div.info_NewCourse  p, h2, .input_NewCourse{
    width: 60%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.warnings {
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    color: white; 
    border: none;
    background-color: #ec407a;
    position: fixed;
    bottom: 0;
    margin: 0;
    width: 100%;
}

.warnings_no_warning {
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px;
    background-color: #73e8ff;
    position: fixed;
    bottom: 0;
    margin: 0;
    width: 100%;
}

.unitTest_btn {
    background-color: #28b5f4;
    padding: 3px 9px 3px 9px;
    border: none;
}

.unitTestsList .unitTestTop {
    width: 15%;
    margin-right: 3%;
    
}

.unitTestsList .delete_btn {
    margin-right: 70%;
    padding: 3px 9px 3px 9px;
    margin-bottom: 30px;
    font-size: 11pt;
}

table.clozeText {
    width: 60%;
}
td.clozeText_input {
    width: 85%;
}

td.clozeText_input input{
    width: 95%;
    margin-bottom: 0;
}

td.clozeText_cloze {
    width: 10%;
}
.cloze_btn{
    background-color: #29b6f6;
    border: none;
    padding: 4 12 4 12;
}

.cloze_btn:hover{
    background-color: #73e8ff;
}

.clozeText_cloze p{
    width: 55px;
    border-style: solid;
    border-width: 0.5px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 4px;
}

.lefttd div.listView ul {
    height: 750px;
    width: 70%;
    overflow: scroll;
    margin:0;
    padding: 0;
}

.lefttd div.listView {
    position: absolute;
    top: 120px;
    width: 30%;
    left: 0;
    margin-left: 5%;
}



div.listView ul {
    height: 500px;
    width: 70%;
    overflow: scroll;
    margin:0;
    padding: 0;
}

li {
    list-style-type: none;

}

li:hover {
    background-color: #FFFFFF
}
button.listButton:hover {
    background-color: #FFFFFF;
}
button.listButton {
    text-align: left;
    padding: 5px;
    padding-left: 25px;
    text-decoration: none;
    border: solid;
    border-width: 0.5px;
    border-color: #A4A4A4;
    border-block-end-width: 0.5pt;    
    background:  #FFFFFF;
    width: 100%;
}

button.listButtonUnsaved:hover {
    color: #0085c1;
}
button.listButtonUnsaved {
    width: 90%;
    background-color: #FFFFFF;
    text-align: left;
    padding: 5px;
    padding-left: 25px;
    text-decoration: none;
    border-color: #A4A4A4;
    border: solid;
    border-width: 0.5px;
    border-block-end-width: 0.5pt;    
}

table.answersTable {
    margin-left: 5%;
    width: 95%;
    margin-bottom: 30px;
}

div.answer_div{
    margin-top: 200px;
}
.answer_div button.blue_btn{
    position: static;
    left: 10%;
    margin-left: 81.5%;
    margin-bottom: 25px;
}

table.answersTable td {
    padding-top: 15px;
    padding-bottom: 15px;
    border-block-start: 1px solid #d9d9d9;
}

input.answerInput {
    width: 90%
}

td.answer_td{
    width:70%
}
@media only screen and (max-width: 600px) {
    button.blue_btn {
        position: static;
        margin-left: 15%;
    }
    div.info button.blue_btn {
        margin-left: 6%;
    }
    div.listView {
        margin-top: 15%;
        margin-bottom: 10%;
    }
    div.info {
        padding: 0;
    }
    
}




button.delete_btn {
    border: none;
    background-color: #ff77a9;
    color: white;
    padding-left: 15pt;
    padding-right: 15pt;
    padding-top: 5pt;
    padding-bottom: 5pt;
}

button.delete_btn:hover {
    background-color: #ec407a;
}
@media only screen and (max-width: 600px) {
    button.blue_btn {
        position: static;
        margin-left: 15%;
    }
    div.info button.blue_btn {
        margin-left: 6%;
    }
    div.listView {
        margin-top: 15%;
        margin-bottom: 10%;
    }
    div.info {
        padding: 0;
    }
    
}
.lefttd {
    width: 40%;
}

button.blue_btn {
    background-color: #29b6f6;
    padding-left: 15pt;
    padding-right: 15pt;
    padding-top: 5pt;
    padding-bottom: 5pt;
    position: absolute;
    right:10%;
    width: 215px;
    border: 0px;
}

button.blue_btn:hover {
    background-color: #73e8ff;
}

button.acceptBlue_btn {
    background-color: #73e8ff;
    padding-left: 15pt;
    padding-right: 15pt;
    padding-top: 5pt;
    padding-bottom: 5pt;
    margin-right: 5px;
    font-size: 11pt;
    border: 0px;
}
button.acceptBlue_btn:hover {
    background-color: #29b6f6;
}

button.blue_btn2 {
    background-color: #29b6f6;

    width: 35px;
    font-size: 16pt;
    color: white;
    border: 0px;
}

button.blue_btn2:hover {
    background-color: #73e8ff;
}

button.blue_btn3 {
    background-color: #29b6f6;
    margin-right: 10px;
    font-size: 12pt;
    padding: 5px 8px 5px 8px;
    border: 0px;
}

button.blue_btn3:hover {
    background-color: #73e8ff;
}
div.info button.blue_btn3 {
    margin-top: 0;
}
button.darkblue_btn {
    background-color: #73e8ff;
    padding-left: 10pt;
    padding-right: 10pt;
    padding-top: 4pt;
    padding-bottom: 4pt;
    margin-right: 5px;
    font-size: 10pt;
    width: 100px;
    border: 0px;
}
button.darkblue_btn:hover {
    background-color: #29b6f6;
}

#toggleParVar:checked ~ .parVarSection {
    display:block;
}

.parVarSection {
    display:none;
    border-left: 10px #0086c3 solid;
    padding-left: 1.5%;
    width: 98%;
}

#toggleParImg:checked ~ .parImgSection {
    display:block;
}

.parImgSection {
    display:none;
    border-left: 10px #0086c3 solid;
    padding-left: 1.5%;
    width: 98%;
}
.unitTestDetails {
//    display:none;
    border-left: 10px #0086c3 solid;
    padding-left: 1.5%;
    width: 98%;
}
#toggle:checked ~ .unitTestDetails {
    display:block;
}
.visually-hidden {
    position: absolute;
    left: -100vw;
}
.toggle_label {
    margin-right: 30%;
    margin-bottom: 30px;
    padding: 4px 10px 4px 10px;
    background-color: #29b6f6;
}
.toggle_label:hover {
    background-color: #73e8ff;
}
.contain {
    background-color: #F5F5F6;
}
.form-label {
    font-size: 16pt;
    width: 100%
        
}

.header_top {
    position: absolute;
    top: 100px;
    margin-left: 5%;
}

.tree_div {
    border-left: 10px #0086c3 solid;
}


.tree-view label {
    background-color: #29b6f6;
    padding: 2px 8px 2px 8px; 
    border: none;
}

.tree-view label:hover{
    background-color: #73e8ff;
    padding: 2px 8px 2px 8px; 
    border: none;
}

.tree-view .tree-view-bullet-collapsed label {
    background-color: #F5F5F6;
    color: #0086c3;
    padding: 1px 6px 1px 6px; 
    border: none;
}

.tree-view .tree-view-bullet-expanded label {
    background-color: #F5F5F6;
    color: #0086c3;
    padding: 1px 6px 1px 6px; 
    border: none;
}

.description {
    padding-left: 10%;
    padding-right: 10%;
}

.metadata_label_p{
    margin-bottom: 1px;
    font-weight: bold;
    margin-right: 5px;
}
.metadata_p {
    margin-bottom: 0;
}
.info_p {
    font-size: 11pt;
    color: #0086c3; 
}
.tiny_label{
    font-size: 8pt;
    width: 15%;
    margin-right: 3%;
    margin-bottom: 1px;
}
.cardTab_div {
    position: absolute;
    top: 50px;
}
.cardTab_btn {
    background-color: #72e7ff;
    padding: 3px 12px 3px 12px;
    border: none;
    border-left: 2px solid #28b5f4;
}
.cardTab_btn:hover {
    background-color: #28b5f4;
}
.activeCardTab_btn {
    background-color: #F5F5F6;
    padding: 3px 12px 3px 12px;
    border: none;
    border-left: 2px solid #28b5f4; 
}

.loading {
    z-index: 300;
    position: absolute;
    left: 49%;
    top: 49%;
}

.mainTable {
    width: 100%;
}