/* 
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/


body{
    font-family: 'Noto Sans', sans-serif;
    margin: 0px;
    background:#ffffff;
    min-height: 100%;
    min-width: 100%;
    /*overflow-x:auto !important; JR comment out 7/23/23*/
}

button{
    cursor:pointer;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}

button:focus{
    
}

input, select, textarea, button, li, ul, a{
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}



select {

}

select:focus{ 
    outline: none;
    box-shadow: 0 0 5px #505050;
}


select.purchaseDropdown{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 30px;
    border: 1px solid #cccccc;
    background-color: #2989d8;
    color: white;
    text-align: center;
    cursor: pointer;
    text-align-last: center;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}

input{
    text-align: center;
}

input:focus{ 
 
    outline: none;
    -webkit-box-shadow: 0 0 10px #505050;
    box-shadow: 0 0 5px #505050;
}

textarea{

}

textarea:focus{ 
    outline: none;
    -webkit-box-shadow: 0 0 10px #505050;
    box-shadow: 0 0 5px #505050;
}

li{

}


.checkbox{

}

.checkbox:focus{
    outline: 0;
}

@font-face {
    font-family: planer;
    src: url(/fonts/Planer_Medium-5e0248cd0b08abf3f683d2896180ca28.ttf);   
}

.content{
    padding-top: 70px;
    background: #efefef;
}

#positivePhysicsNavbar{
    padding: 0 1.5vw;
    width: 100%;
    top: 0;
    min-height: 66px;
    background: #2989d8;
}

.navbar {
    background: #2989d8;
}

.navbar li {
    border-radius: .5rem;
}

#subHeader{
    background:#dee2e6;
    min-height:24px;
}

.nav-item{
    cursor: pointer;
}

.navbar-nav .nav-link{
    /*color:white !important;*/
    color:white;
    font-size: 18px;
}

.navbar-dark .navbar-nav .nav-link {
    color: white;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: white;
}

.navbar-nav .nav-link:hover{
    background: #0A70C4;
}

.navbar-nav .nav-link.defaultLink:focus, .navbar-nav .nav-link.defaultLink:hover{
    text-decoration: none;
    background-color: transparent !important;
    cursor: initial;
}

.dropdown-item:hover{
    background: #2989d8 !important;
    color:white !important;
}

.dropdown-menu{
    margin-top:0;
}

.cursor-pointer {
	cursor: pointer;
}
            
.plusSign{
    display:inline-block;
    border:0px solid black;
    vertical-align: 25px;
    color:#18FC54;
    font-size: 42px;
    margin-top: -18px;
    margin-right: -15px;
    font-family: planer;
}

.logoText{
    display:inline-block;
    vertical-align:9px;
    color:white;
    font-family: planer;
    font-size:40px;
}

.logoTextPremium{
	font-family: 'Open Sans', sans-serif;
	line-height: normal;
    font-size: 9px;
    display: inline-block;
    vertical-align: top;
    margin-top: 12px;
    margin-left: -12px;  /*was 2*/
    margin-right: 0px;  /*was 10*/
    color:gold;
}

.sectionText{
    color: #515151;
}

.page-content{
    max-width:1500px;
    padding-right: 2rem;
    padding-left: 2rem;
}

.card-header{
    color:#6b6b6b;
}

.card-header h5{
    font-weight: 600;
    color: #212529;
    font-size: 1.15rem;
}

.card-body-header{
    color:#6b6b6b;
}

.dashboardContainer{
    padding: 1rem;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);  /*was 0.5 border*/
    border-radius: .25rem;
}

.manageMessageButton{
    color: #fff;
    background-color: #f1b53d;
    border: 1px solid #f1b53d;
    padding: 5px 19px 7px 19px;
}

.manageMessageButton:hover{
    color:#fff;
    background-color:#D8A02F;
    border-color:#D8A02F;
}



.manageMessageDropdown a{
    color:#6b6b6b;
}

.requestIcon{
    font-size: 30px;
    color:#6b6b6b;
}

.messageIcon{
    font-size: 30px;
    color:#6b6b6b;
}

.requestName{
    font-size:15px;
    color:#6b6b6b;
}

.messageTime{
    font-size:14px;
    color:#9A9A9A;
}

.messageUserIconStudent{
    border: 2px solid #2989d8;
    border-radius: 35px;
    display: inline-block;
    padding: 3px 6px;
    margin-right: 20px;
}

.messageUserIconStudent svg{
    font-size:26px;
    color:#2989d8;
}

.messageUserIconTeacher{
    border: 2px solid #ff5d48;
    border-radius: 35px;
    display: inline-block;
    padding: 3px 6px;
    margin-left: 20px;
}

.messageUserIconTeacher svg{
    font-size:26px;
    color:#ff5d48;
}

.redModalButton{    
    border: 1px solid #FF2E2E; 
    font-size:14px; 
    background: #FF2E2E;
    color:white;
    height:32px;
    margin:5px;
    min-width:120px;
    border-radius: .3rem;
    
}

.redModalButton:hover{
    background: #c21d1d !important ;
    border: 1px solid #c21d1d;
}

.greenModalButton{    
    border: 1px solid #18FC54; 
    font-size:14px; 
    background: #18FC54;
    color: black;
    height:32px;
    margin:5px;
    min-width:120px;
    border-radius: .3rem;
    
}

.greenModalButton:hover{
    background: #02BA32 !important ;
    border: 1px solid #02BA32;
}

.blueModalButton{
    border: 1px solid #2989d8; 
    font-size:14px; 
    background: #2989d8;
    color:white;
    height:32px;
    margin:5px;
    min-width:120px;
    border-radius: .3rem;
}

.blueModalButton:hover{
    background: #0B7CD8 !important ;
    border: 1px solid #0B7CD8;
}

.grayModalButton{
    border: 1px solid #D9D9D9; 
    font-size:14px; 
    background: #ffffff;
    color:#333;
    height:32px;
    margin:5px;
    min-width:90px;
    border-radius: .3rem;
}

.grayModalButton:hover{
    background: #C2C2C2 !important ;
    border: 1px solid #C2C2C2;
}

.modal-content{
    border:none;
}

.modal-header{
    background: #E8ECEC;
}

.modal-header .close{
    color:#515151;
}

.modal-title{
    color:#515151;
    font-weight:bold;
}

.tableContainer{
    max-height: 400px;
    overflow-y: auto;
}

.positiveTable thead th{
    background: #2989d8;
    color: white;
}

.positiveTable th{
    font-size: 14px;
    font-weight:normal;
    border: 1px solid #212529;  /*was 0.5 border*/
    border-bottom-width: 1px !important;
    border-bottom: 1px solid #212529 !important;
}
.positiveTable td{
    font-size: 14px;
    vertical-align: middle;
    border: 1px solid #212529;  /*was 0.5 border*/
}

.borderlessTable th, .borderlessTable td {
	border: none !important;
}

.grayTableRow {
	background-color: #f2f2f2;
}

.grayTableRow th {
	vertical-align: middle !important;
	font-weight: normal;
	
}


.tableRowBorder tr {
	border-left: 1px solid #dee2e6;
	border-right: 1px solid #dee2e6;
}

.tableRowBorder > tbody > tr:last-child{
	border-bottom: 1px solid #dee2e6;
}

.formattedTable th, .formattedTable td {
	vertical-align: middle;
	font-size: 14px;
	padding: .4rem .5rem;
}

div[name=datepicker] td {
	vertical-align: inherit;
	font-size: .9em;
	padding: 1px;
}

svg[name=editUserButton]{
	font-size: 20px;
	color: #089D30;
	cursor: pointer;
}

svg[name=resetPasswordButton]{
	font-size: 20px;
	color: #16375E;
	cursor: pointer;
}

svg[name=removeUserButton]{
	font-size: 20px;
	color: #ff2e2e;
	cursor: pointer;
}

.totalProblemCountCell{
    background:#A1C8FF;
}

.dropdownTD{
    padding: .3rem .75rem .3rem .75rem !important;
}

.orangeButton{
    border: 1px solid #FFA82D;
    background: #FFA82D;
    color: white;
    /*margin: 5px;*/
    min-width: 120px;
    padding: 5px 10px 5px 10px;
    border-radius: .3rem;
}

.orangeButton:hover{
    background: #F7940A;
}

.orangeButton:focus{
    background: #F7940A;
}
            
.blueButton{
    border: 1px solid #2989d8;
    background: #2989d8;
    color: white;
    /*margin: 5px;*/
    min-width: 120px;
    padding: 5px 10px 5px 10px;
    border-radius: .3rem;
}

.blueButton:hover{
    background: #0B7CD8;
}
.blueButton:focus{
    background: #0B7CD8;
}

.whiteButton{
    border: 1px solid #2989d8;
    background: white;
    color: #2989d8;
    /*margin: 5px;*/
    min-width: 120px;
    padding: 5px 10px 5px 10px;
    border-radius: .3rem;
}

.whiteButton:hover{
    /*background: #2989d8;*/
    /*color: white;*/
    background: #f2f5ff;
}

.whiteButton:focus{
    /*background: #2989d8;*/
    /*color: white;*/
    background: #f2f5ff;
}

.roundedGreen{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
    font-size:16px; 
    color:black; 
    font-size:16px;
    width:100%; 
    border: 0px solid black; 
    background: #18FC54;
    min-height:40px;
}
.roundedGreen:hover{
    background: #02BA32;
}

.roundedGreen:focus{
    background: #02BA32;
}

.navyButton{
    border: 1px solid #16375E;
    background: #16375E;
    color: white;
    /*margin: 5px;*/
    min-width: 120px;
    padding: 5px 10px 5px 10px;
    border-radius: .3rem;
}

.navyButton:hover{
    background: #0C213A;
}

.navyButton:focus{
    background: #0C213A;
}


.cyanButton{
    border: 1px solid #6CA3E6;
    background: #6CA3E6;
    color: white;
    /*margin: 5px;*/
    min-width: 120px;
    padding: 5px 10px 5px 10px;
    border-radius: .3rem;
}

.cyanButton:hover{
    background:#5C8FCE;
}

.cyanButton:focus{
    background:#5C8FCE;
}

.redButton{
    border: 1px solid #FF2E2E;
    background: #FF2E2E;
    color: white;
    /*margin: 5px;*/
    min-width: 120px;
    padding: 5px 10px 5px 10px;
    border-radius: .3rem;
}

.redButton:hover{
    background: #c21d1d;
}
.redButton:focus{
    background: #c21d1d;
}

.greenTDButton{
    border: 1px solid #18FC54;
    background: #18FC54;
    color: black;
    min-width: 120px;
    width: 100%;
    padding: 5px 10px 5px 10px;
}

.greenTDButton:hover{
    border: 1px solid #02BA32;
    background:#02BA32;
}

.greenTDButton:focus{
    border: 1px solid #02BA32;
    background:#02BA32;
}

.greenButton{
    border: 1px solid #18FC54;
    background: #18FC54;
    color: black;
    /*margin: 5px;*/
    min-width: 120px;
    padding: 5px 10px 5px 10px;
    border-radius: .3rem;
}

.greenButton:hover{
    border: 1px solid #02BA32;
    background:#02BA32;
}

.greenButton:focus{
    border: 1px solid #02BA32;
    background:#02BA32;
}

.lightBlueButton{
	/*
    background:#C5D9F1;
    border: 0;
    width:100%;
    height:100%;
    padding: 0.75rem;
    cursor:pointer;*/
    
    border: 1px solid #C5D9F1;
    background: #C5D9F1;
    color: black;
    /*margin: 5px;*/
    min-width: 120px;
    padding: 5px 10px 5px 10px;
    border-radius: .3rem;
}

.lightBlueButton:hover{
	border: 1px solid #A2C7F5;
   background:#A2C7F5;
}

.lightBlueButton:focus{
	border: 1px solid #A2C7F5;
   background:#A2C7F5;
}

.mediumBlueButton{
    background:#6CA3E6;
    border: 0;
    width:100%;
    height:100%;
    padding: 0.75rem;
    cursor:pointer;
}

.mediumBlueButton:hover{
    background:#5C8FCE;
}

.mediumBlueButton:focus{
    background:#4176B7;
}

.lightGrayTDButton{
    background:#D9D9D9;
    border: 1px solid #D9D9D9;
    width:100%;
    min-width: 120px;
    padding: 5px 10px 5px 10px;
}

.lightGrayTDButton:hover{
    border: 1px solid #C2C2C2;
    background:#C2C2C2;
}

.lightGrayTDButton:focus{
    border: 1px solid #C2C2C2;
   background:#C2C2C2;
}

.lightGrayButton{
    background:#D9D9D9;
    border: 0;
    width:100%;
    height:100%;
    padding: 0.75rem;
    cursor:pointer;
}

.lightGrayButton:hover{
   background:#C2C2C2;
}

.lightGrayButton:focus{
   background:#C2C2C2;
}

.blackButton{
    border: 1px solid #000000;
    background: #000000;
    color: white;
    min-width: 120px;
    padding: 5px 10px 5px 10px;
    border-radius: .3rem;
}

.blackButton:hover{
    border: 1px solid #999999;
    background:#999999;
}

.blackButton:focus{
    border: 1px solid #999999;
    background:#999999;
}

button[name=lockButton]{
    height: 100%;
    width: 100%;
    padding-top: .65rem;
    padding-bottom: .65rem;
}

button[name=lockButton]:focus{
    /*outline: none;*/
}

.skillTD, td[name=scoreTD], div[name=scoreTD]{
    cursor: pointer;
/*    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;*/
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}

.blueDropdown{
    background: #2989d8 !important;
    border: 1px solid #2989d8;
    border-radius: 3px;
    color:white !important;
    cursor: pointer;
    text-align-last: center;
    min-height:28px;
}

.dashboardContainer .blueDropdown{
	min-height: 50px;
	font-size:18px;
	text-align: left;
}

.grayDisabledDropdown{
    background: #dee2e6 !important;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    color: #212529;
    text-align-last: center;
}

.blueDropdown:focus{
    color:white !important;
}

.blueOutlineDropdown{
    border: 1px solid #2989d8 !important;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    text-align-last: center;
}

.blueOutlineDropdown{
}

.alertIcon{
    color: white;
    font-size: 30px;
    margin-top: 5px;
    cursor:pointer;
}

.alertIcon.active{
    color: red;
    font-size: 30px;
    margin-top: 5px;
}

.problemElement{
    display: inline-block;
    background: #2989d8;
    color:white;padding: .35rem;
    border-radius: .25rem;
    margin: .25rem;
	min-width: 100px;
}

span[name=problemElementRemove]{
    cursor: pointer;
    padding-left: 15px;
    font-weight: bold;
    float: right;
}


.traditionalLink{
    border: 1px solid black;
    color: black;
    border-radius: 100px;
    padding: .25rem;
    width: 34px;
    display: inline-block;
    cursor: pointer;
}

.traditionalLink svg{
    margin-left: 3px;
}

.positiveLink{
    float: right;
    border: 1px solid #2989d8;
    color: #2989d8;
    border-radius: 100px;
    padding: .10rem;
    width: 30px;
    display: inline-block;
    cursor: pointer;
    margin-top: -5px;
    margin-bottom: -5px;
    margin-right: 10px;
}

.positiveLink svg{
    margin-left: 7px;
}

.dashboardSkillNote {
    background: yellow;
    font-size: 12px;
    border: 1px solid #9A9797;
    padding: 0px 10px;
    margin-left:10px;
}
.dashboardSkillNote:hover {
    background: #F5E400;
}

.dashboardSkillNoteIcon {
    color: black;
    cursor: pointer;
    font-size: 18px;
    margin-left:10px;
}
.dashboardSkillNoteIcon:hover {
    color: #242424;
}

.dashboardSkillVideo {
    background: #2989d8;
    color:white;
    font-size: 12px;
    border: 1px solid #2989d8;
    padding: 0px 10px;
    margin-left:10px;
}
.dashboardSkillVideo:hover {
    background: #0A70C4;
}

.dashboardSkillVideoIcon {
    color: #2989d8;
    cursor: pointer;
    font-size: 18px;
    margin-left:10px;
}
.dashboardSkillVideoIcon:hover {
    color: #0A70C4;
}

.dashboardDueDate{
    background: #6CA3E6;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}

.dashboardDueDate:hover{
    background: #5C8FCE;
}

.dashboardSetDate{
    background: #ffffff;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}

.dashboardSetDate:hover{
    background: #F2F2F2;
}

.dashboardComponent{
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
    margin-bottom: 1.5rem!important;
    color:black;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#f2f2f2));
    background-image: linear-gradient(#F7F7F7, #F2f2f2);
    background-repeat: no-repeat;
}

.dashboardLevelHeader{
    line-height: 18px;
    font-size: 12px;
    padding: 6px !important;
}

.infoComponent{
    background: #2989d8;
}

.infoComponent2{
	background: white;
	color: #4f4f4f;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.cardIcon{
    color: #2989d8;
}

.cardError{
    margin-top: 10px;
    color: red;
    font-weight: bold;
}

.nohover{
    pointer-events: none;
}

.grayFooter{
    background:#dee2e6; /*#dee2e6d4;*/
}

button[name=footerButton]:focus, button[name=lessonFooterButton]:focus{ 
    outline: none;
    box-shadow: 0 0 5px #505050;
}

.grayFooter button[name=footerButton], .grayFooter button[name=lessonFooterButton], .greenFooter button[name=footerButton]{
    background: #2989d8;
    color: white;
    border: none;
    min-width:200px;
    max-width:100%;
}

.grayFooter button[name=footerButton]:hover, .grayFooter button[name=lessonFooterButton]:hover, .greenFooter button[name=lessonFooterButton]:hover{
    background:#2989d8;
}

.grayFooter button[name=footerButton]:focus, .grayFooter button[name=lessonFooterButton]:focus, .greenFooter button[name=lessonFooterButton]:focus{
    background:#2989d8;
}

.greenFooter{
    background:#18FC54;
}


.purpleFooter{
    background:#845BFF;
    color:white;
}

.purpleFooter button[name=footerButton]{
    background:#845BFF;
    color: white;
    border: none;
}

.purpleFooter button[name=footerButton]:hover{
    background:#6244BC;
}

.purpleFooter button[name=footerButton]:focus{
    background:#6244BC;
}



select.mergedDropdown{
    border:none;
    background:#2989d8;
    font-size: 1.15rem;
    color: white;
    cursor: pointer;
    width:auto;
    display:inline-block;
}

select.mergedDropdown:focus{
    border:none;
    background:#2989d8;
    font-size: 1.15rem;
    color: white;
    cursor: pointer;
    width:auto;
    display:inline-block;
}

.dropdownSubtext{
    color: #212529;
}

select.mergedTDDropdown{
    border:none;
    background:transparent;
    padding: .5rem;
    color: black;
    cursor: pointer;
    width: auto;
    min-width: 50px;
    text-align-last: center;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    -o-transition: all 0s;
    transition: all 0s;
    /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

select.mergedTDDropdown::-ms-expand {
    display: none;
}

select.mergedTDDropdown:hover {
    outline: 2px solid #A6C8FF;
}

select.mergedTDDropdown:focus {
    outline: 2px solid #A6C8FF;
    background: #A6C8FF;
}

select.mergedDashDropdown{
    border:none;
    background:transparent;
    padding: .75rem;
    color: black;
    cursor: pointer;
    width:100%;
    min-width:50px;
    text-align-last: center;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    -o-transition: all 0s;
    transition: all 0s;
    /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

select.mergedDashDropdown::-ms-expand {
    display: none;
}

select.mergedDashDropdown:hover {
    outline: 2px solid #A6C8FF;
}

select.mergedDashDropdown:focus {
    outline: 2px solid #A6C8FF;
}

td[name=skillSetting]{
     -webkit-transition: all .35s;
    -moz-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}

td[name=skillSetting].blueShade:hover {
    background: #DDEBFF !important;
}

td[name=skillSetting].blackShade:hover {
    background: #E5E5E5 !important;
}

td[name=skillSetting].purpleShade:hover {
    background: #F5E6FF !important;
}

td[name=skillSetting].redShade:hover {
    background: #FFD8D8 !important;
}

.mergedDatepicker{
    width: 100px;
    display: inline-block;
    background:transparent;
    border:none;
    cursor:pointer;
    color: #2989d8;
    padding: .375rem .375rem;
}

.nav-tabs .nav-link{
    color: #6b6b6b;
}

.nav-tabs .nav-link.active{
    color: #2989d8;
    font-weight:bold;
}

.nav-item .nav-link:hover{
    border-color: #D6D9DC #D6D9DC #fff;
}

button[name=scoreSelection]{
    padding: 2rem 1rem 2rem 1rem;
    font-size: 22px;
    border: none;;
}

button[name=scoreTypeSelection] {
    padding: 1rem .5rem 1rem .5rem;
    border: none;
}

.activeScoreSelection{
    background: #2989d8;
    color:white;
}

.activeScoreSelection:hover{
    background: #0A70C4;
}

.inactiveScoreSelection{
    background: #d9d9d9;
    color:black;
}

.inactiveScoreSelection:hover{
    background: #C2C2C2;
}

.creditedScore{
    background: #845BFF !important;
    color:white;
}

.creditedScore:hover{
    background: #6244BC !important;
}

.tabContainer{
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
    padding: 1.25rem 1.25rem;
    color: inherit;
    background-color: rgba(0,0,0,.03);
}

.tab-content{
    border: 1px solid #dee2e6;
    border-top: none;
    background: white;
    border-bottom-left-radius: calc(.25rem - 1px);
    border-bottom-right-radius: calc(.25rem - 1px);
}

.tab-pane.container{
    padding-top:15px;
    padding-bottom:15px;
}

.moreInfoLink{
    color: #2989d8;
    font-size: .65rem;
    cursor: pointer;
}

.moreInfoLink:hover{
    text-decoration: underline;
}

.hoveredScoreTD{
    background: #d1d1d1;
    cursor: pointer;
}

.positive-col {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.problemLayoutDiv{
	/*height:300px;*/
	overflow-y: scroll;
    width:100%;
    background-color: rgba(0,0,0,.03);
    border: 2px solid rgba(0,0,0,.125);
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}

.problemSelectionDiv{
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

.warningMessage{
    color: #FF2E2E;
}

.headerScores{
    font-size:14px !important;
}

div[name=workScore]{
    display: none;
}

ul[name=searchResultsList]{
    margin-left: 15px;
    color: #2989d8;
    background-color: #f9f9f9;
    z-index: 1000;
    top: auto;
    width: 90% !important;
}

ul[name=searchResultsList] li{
     border-bottom: 1px solid #D0D0D0;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    -o-transition: all 0s;
    transition: all 0s;
}

ul[name=searchResultsList] li:hover{
    background-color: #2989d8;
    color: white;
}
    

@media (min-width: 768px){
    .positive-col-md {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px){
    .positive-col-lg {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 1200px){
    .positive-col-xl {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.positive-col-xl, .positive-col-lg, .positive-col-md, .positive-col-sm, .positive-col{
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.noPaddingTD{
    padding:0 .75rem 0 .75rem;
    vertical-align:middle;
}


#tooltipContainer{
    z-index: 11;
    position: absolute;
    padding: .75rem;
    border-radius: 10px;
    border: 2px solid #2989d8;
    background: white;
    color: #2989d8;
    width: 200px;
    font-size:14px;
}

.vectorTable td{
    border: 1px solid #6b6b6b;
    padding: 5px 15px;
    text-align: center;
}

.sectionTable td{
    padding: 5px;
    vertical-align: middle;
}

select[name=editSkillDropdown], select[name=schoolSectionDropdown]{
    text-align-last:center;
}

/*select[name="schoolSectionDropdown"] option[value="1"] {
  background: #2989d8;
}

select[name=" schoolSectionDropdown"] option[value="2"] {
  background: #2989d8
}

select[name="schoolSectionDropdown"] option[value="3"] {
  background: #2989d8
}

select[name="schoolSectionDropdown"] option[value="0"] {
  background: #d9d9d9;
}*/

/*****/



/*input[name='answer'].defaultAnswer:focus{
    background-color: #FFFF94 !important;
}*/



/*input[name='answer'].creditedAnswer:focus{
    background-color: #B49BFF;
}*/


/*select[name='answer'].creditedAnswer:focus{
    background-color: #B49BFF;
}*/

/*input[name='answer'].creditedAnswer, select[name='answer'].creditedAnswer{
    background-color: rgba(132, 91, 255, .7);
}*/
/*
.creditedScore:hover{
    background: #6244BC !important;
}*/

img[name='image']{
    width:100%;
}

.problemImage{
    max-width:650px;
}

/*#problemHTML, #problemHTMLCreator, #problemHTMLEditor{
    max-width: 1400px;
    min-height: 210px;
}*/

#problemHTML select, #problemHTMLCreator select, #problemHTMLEditor select{
    color: black;
    -webkit-text-fill-color: black;
    opacity: 1;
}

#problemHTML input, #problemHTMLCreator input, #problemHTMLEditor input{
    color: black;
    -webkit-text-fill-color: black;
    opacity: 1;
}

#barProblemContainer a {
    color: black;
}

.subHeader{
	color: darkslategray
}

.barProblem{    
    cursor: pointer;
    border-left: 1px solid #B1B1B1;
    border-bottom: 1px solid #B1B1B1;
    text-align: center;
    display: inline-block;
    height: 100%;
    max-height: 24px;
    width: 36px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 3px;
    font-size: 12px;
    vertical-align: top;                
}


.barProblem.selected{
    background: #2989d8 !important;
    color:white !important;
}

.barLesson{    
    cursor: pointer;
    border-left: 1px solid #B1B1B1;
    border-bottom: 1px solid #B1B1B1;
    text-align: center;
    display: inline-block;
    height: 100%;
    max-height: 24px;
    width: 118.4px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 3px;
    font-size: 12px;
    vertical-align: top;               
}


.barLesson.selected{
    background: #2989d8 !important;
    color:white !important;
}

#footerBarSubContainer button:focus{ 
    outline: none;
    box-shadow: 0 0 5px #505050;
}

.grayButton{
    background: #dee2e6;
    border: 1px solid #d1d1d1;
}

.grayButton:hover{
    background: #d1d1d1;
}

.yellowButton{
    border: 1px solid rgb(222, 226, 230);;
    background: #FFFF94;
    color: #212529;
    min-width: 120px;
    padding: 5px 10px 5px 10px;
    border-radius: .3rem;
}

.yellowButton:hover{
    background: #F5F552;
}



.ui-tooltip{
    background: #2989d8;
    color:white;
    outline: none;
    box-shadow: none;
    border: 1px solid #2989d8;
    border-radius:10px;
    min-width:100px;
    text-align: center;
}

.answerDiv{
    position: absolute;
}

#problemDiv {
    text-align: left;
}

.textSpacing{
    padding-bottom:20px;
}

.removedProblem{
    background:#845BFF !important;
    color: white !important;
}

.stackedInputsTd {
    padding: 3px;
    padding-bottom: 3px;
    text-align: center;
}

#diagramDiv {
    text-align: center;
    width: 600px;
    /*height: 450px;*/
    height: auto;
    position: relative;
}
.chartTitleTd {
    border: 1px solid black;  /*was 0.5 border*/
    padding: 5px;
}

.chartBodyTd {
    border: 1px solid black; /*was 0.5 border*/
    width: 100px;
    height: 20px;
    padding: 0px;
    margin: 0px;
}

.chartInput {
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
    border: 0px !important;
    padding: 0px !important;
    width: 100% !important;
    height: 100% !important;
    margin:0px !important;
}

.chartContainer{
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
    border: 1px solid rgba(0,0,0,.125);
    padding: 10px;
}

.graySkillButton{
    color: black;
    background: #D9D9D9;
    border: #D9D9D9;
    padding: 7px 10px;
}

.graySkillButton:hover{
   background:#C2C2C2;
}

.graySkillButton:focus{
   background:#C2C2C2;
}

.blueSkillButton{
    color: white;
    background: #2989d8;
    border: #2989d8;
    padding: 7px 10px;
}

.blueSkillButton:hover{
   background:#0B7CD8;
}

.blueSkillButton:focus{
   background:#0B7CD8;
}
           
.workButton{
    color: white;
    background: #2989d8;
    border: #2989d8;
    padding: 7px 10px;
}

.workButton:hover{
    background: #0B7CD8;
}
.workButton:focus{
    background: #0B7CD8;
}

.extraPracticeHeaderBar{
   background: #16375E !important;
}

.extraPracticeHeaderBar a:hover{
    background: #0C213A !important;
}

.extraPracticeHeaderBar a:focus{
    background: #0C213A !important;
}

.extraPracticeButton{
    color: white;
    background: #16375E;
    border: #16375E;
    padding: 7px 10px;
}

.extraPracticeButton:hover{
    background: #0C213A;
}

.extraPracticeButton:focus{
    background: #0C213A;
}

.inquiryHeaderBar{
   background: #5E6B78 !important;
}

.inquiryHeaderBar a:hover{
    background: #47515B !important;
}

.inquiryHeaderBar a:focus{
    background: #47515B !important;
}

.inquiryButton{
    color: white;
    background: #5E6B78;
}

.inquiryButton:hover{
    background: #47515B;
}

.inquiryButton:focus{
    background: #47515B;
}

.assessmentHeaderBar{
   background: #000000 !important;
}

.assessmentHeaderBar a:hover{
    background: #242424 !important;
}

.assessmentHeaderBar a:focus{
    background: #242424 !important;
}

.correctionHeaderBar{
   background: #00AF50 !important;
}

.correctionHeaderBar a:hover{
    background: #017C38 !important;
}

.correctionHeaderBar a:focus{
    background: #017C38 !important;
}

div[name="scoreDiv"]{
    min-width: 80px;
    white-space:nowrap;
    
    /*text-align: center;*/
}

.printProblemContainer {
    border: 1px solid #d9d9d9;
    margin-bottom: 20px;
    padding: 10px;
    page-break-inside: avoid !important;
}

.printProblemHeader{
    font-weight:bold;
    margin-bottom:30px;
    padding-left: 15px;
    padding-top: 5px;
}

/*.skillNameContainer{
    width: 260px;
}

.videoNoteContainer{
    width: 55px;
}

.totalCountContainer{
    width:45px;
}*/

/*.maxCountContainer{
    width:30px;
}*/

.problemEditContainer{
    /*width:100px;*/
    background:white;
    cursor: pointer;
    font-size:14px;
    padding: .75rem;
}

.dualScoreContainer{
    /*width:110px;*/
    /*background:white;*/
    background:transparent;
    cursor: pointer;
    font-size:14px;
    padding: .75rem;
}

.singleScoreContainer{
    /*width:220.5px;*/
    /*background:white;*/
    background:transparent;
    cursor: pointer;
    font-size:14px;
    padding: .75rem;
}

.ui-datepicker{
    z-index: 10 !important;
}

.ui-datepicker .ui-datepicker-header{
    color: white;
    background: #2989d8;
}

.ui-timepicker-standard {
    z-index: 1051 !important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #2989d8 !important;
    background: #2989d8 !important;
    font-weight: normal;
    color: #ffffff !important;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #95CFFF;
    background: #ABDAFF;
    color: #464646;
}
/*****/

/***slider css*/
.switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2989d8;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: green;
}

input:focus + .slider {
  box-shadow: 0 0 1px #d8d8d8;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.dynamicVariableContainer{
    /*border: 1px solid #2989d8;*/
    /*padding: 3px 10px;*/
    /*border-radius: 5px;*/
    /*background: #80C1F7;*/
    /*display: inline-flex;*/
    /*display: inline;*/
    color: #2989d8;
    font-weight: bold;
    cursor: pointer;
    /*vertical-align: top;*/
}

#unitsDefault{
    border: 1px solid black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    min-width: 60px;
    width: auto;
    height: 30px;
    font-size: 16px;
    text-align: left;
    text-align-last: left;
    margin-top: 0;
    padding: 0px 1px;
    background-color: #FFFF94;
}

input[data-type="variable_option"], input[data-type="numerical_option"], input[data-type="numerical"]{
    border: 1px solid black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    min-width: 62px;
    width: 62px;
    height: 32px;
    font-size: 16px;
    text-align: center;
    text-align-last: center;
    margin-top: 0;
    padding: 0px 1px 0 1px ;
    background-color: #FFFF94;
}

select[data-type="answer"], select[data-type="unit"], #unitDefault{
    border: 1px solid black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    min-width: 90px;
    width: auto;
    height: 32px;
    font-size: 16px;
    text-align: left;
    text-align-last: left;
    margin-top: 0;
    padding: 0px 1px 0 1px;
    background-color: #FFFF94;
}

#sectionDropdownContainer .btn-group .dropdown-menu li label{
    width: 100%;
    /* text-align: left; */
    /* justify-content: left; */
    display: -webkit-box;
}

#massEditSkillSettingModal input[type=checkbox]{
    width: 18px;
    height: 18px;
}

.environmentText {
    font-size: 10pt;
    display: inline-block;
    vertical-align: top;
    margin-top: 14px;
    margin-left: 2px;
    color:gold;
    -webkit-transform: scale(1.3,1);
    -moz-transform: scale(1.3,1);
    -ms-transform: scale(1.3,1);
    -o-transform: scale(1.3,1);
    transform: scale(1.3,1);
}

input[name=amountInput]{
    border-radius: 5px;
    width: 60px;
    height: 30px;
    font-size: 16px;
    text-align: center;
    margin-top: 0;
    border: 1px solid #999999;
}

.selectedPaginationElement{
	color: white;
	background: #2989d8;
}

/*new homepage code*/
	.carousel .carousel-control-prev-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232989d8' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel .carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232989d8' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}


.carousel-indicators li {
	background-color: #2989d8;
}

.teacherResponse{

}

.teacherResponseName {
	 color:#2989d8;
	 float:right;
}

.awardImages {
	width: 220px;
}

.list-group-item {
	border: none;
}

.bannerBackground{
	/* background:#4372c4; */
	display: inline-block;
	/*padding-left: 2rem;*/
}

.bannerBackground span{
	color:black;
	font-size: 1.65rem;
	/*font-weight: bold;*/
}

.buttonContainer {
	display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.homepageBanner { 
	font-size:14px;
	background-color: #B2E9FF;
}

.alertBanner { 
	font-size: 14px; 
	background: #b9fecb /*#ffff94*/; 
}


/*new css*/
.tableNotes {
    border-collapse: collapse;
}
  
.tableNotes, .tdNotes {
    border: 1px solid black;  /*was 0.5 border*/
    padding: 10px 5px 10px 5px;
    vertical-align: top;
}

.tdSymbol{
    width: 60px;
    padding-right:15px;
    text-align: right;
}

.tdQuantity{
    text-align: left;
}

.tdUnits{
    min-width: 160px;
    text-align: left;
}

.tdMeaning{
    min-width: 300px;
    text-align: left;
}


.NCsymbol{
    width: 20px;
    padding-left: 20px;
}

.NCequation{
    white-space: nowrap;
    width: 100px
}

.thNotes{
    text-align: center;
    font-weight: normal;
}

.lessonH1{
    font-size: 1.5rem;
    margin-bottom: 0;
    text-transform: capitalize;
}

.lessonH2{
    font-size: 1.25rem;
    color:#2989d8;
}

.highlight{ 
    background-color: none;/*#ffff005c;*/
}

.eqnDiv{
    display: inline-block;
    min-width:200px;
    min-height: 160px;
    margin:0;
    padding: 2px;
    outline: 1px solid black;
    border-collapse: collapse;
    vertical-align: bottom;
    margin: 2px 0 2px 0;
}

.eqnName{
    width: 100%;
    text-align: center;
    font-weight: 200px;
    padding: 8px 0 3px 0;
}

.oEqn{
    color: blue;
}

.mEqn{
    color: green;
}

.fine{
    font-size:10px;
    width:100%;
    text-align: center;
}

.sampleProb{
    width: 1000px;
    max-width:100%;
    outline: 1px solid black;
    padding: 5px 10px 15px 5px;
}

.given{
    font-size: 10px;
}


.conTable{
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
    height: 220px;
}

.conTdL{
    width:60px;
}

.conTdR{
    width:100px;
}




/* .voc{
    background-color: lightskyblue;
    text-decoration: none;
    color:black;
}

.voc:hover{
    background-color: rgb(41, 137, 216);;
}
*/




/* NAVIGATION BUTTON?!?! */
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 6px;
    font-size: 36px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 260px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {
    background-color: #ddd;}

.show {
    display: block;}


.sampleForces{
    width: 300px;
    outline: 0;
    padding: 0;
}

.tdFS{
    text-align: center;
}

.tdFN{
    text-align: left;
}

.tdFN2{
    text-align: left;
	width:25%
}

.tdFName{
    width: 15%;
    text-align: center;
}

.labVideoDiv{
    padding-left:40px;
    font-size: 12px;
}

.labVideo{
    max-width:90%;
}

.altMat{
    font-size:10px;
    padding-left:0px;
}

/*new css*/
input[name='answer'], input[name='answerreadonly']{
    border: 1px solid black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 62px;
    height: 30px;
    font-size: 16px;
    text-align: center;
    margin: 1px 1px 1px 1px;
    padding: 0px 1px 0 5px;
    background: #ffff94;
    color:black;
    -webkit-text-fill-color: black; /*remove 12/21/22*/
}

select[name='answer'], select[name='answerreadonly']{
    border: 1px solid black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    min-width: 60px;
    width: auto;
    height: 30px;
    font-size: 16px;
    text-align: left;
    text-align-last: center;
    margin: 1px 3px 1px 1px;
    padding: 0px 10px;
    background-color: #FFFF94;
    color:black;
     opacity: 1;
}

.defaultAnswer{
    background-color: #FFFF94;
    color: black;
    -webkit-text-fill-color: black;
}

.correctAnswer {
	 background-color: #18FC54 !important;
     color: #004900 !important;
    -webkit-text-fill-color: #004900 !important;
    /*jack 230519*/
    background-image: linear-gradient(135deg, #0054166b 0px, #0054166b 7px, transparent 7px) !important;
    background-position: center center;
    background-size: 100% 100%;
}

.correctAnswerMulti {
	background-color: #d8fee2 !important;
	color: darkgreen !important;
	-webkit-text-fill-color: darkgreen !important;
	    /*jack 230519*/
    background-image: linear-gradient(135deg, #0054166b 0px, #0054166b 7px, transparent 7px) !important;
    background-position: center center;
    background-size: 100% 100%;
}

.incorrectAnswerDisabled{
	background-color: lightgray !important;
	/*color: #c00000 !important;
	-webkit-text-fill-color:#c00000 !important;*/
	/*jack 230519*/
	background-image: linear-gradient(45deg, transparent 45%, #c00000
	 46%, #c00000 54%, transparent 55%), linear-gradient(-45deg, transparent 45%, #c00000 46%, #c00000 54%, transparent 55%) !important;
    background-position: 2px 2px !important;
    background-size: 7px 6px !important;
    background-repeat: no-repeat !important;

}

.incorrectAnswer{
	background-color: #FFFF94 !important;
	/*color: #c00000 !important;
	-webkit-text-fill-color:#c00000 !important;*/
		/*jack 230519*/
	background-image: linear-gradient(45deg, transparent 45%, #c00000
	 46%, #c00000 54%, transparent 55%), linear-gradient(-45deg, transparent 45%, #c00000 46%, #c00000 54%, transparent 55%) !important;
    background-position: 2px 2px !important;
    background-size: 7px 6px !important;
    background-repeat: no-repeat !important; 
}

.noteVideoButton { 
    border: 1px solid #dee2e6;
    background: #FFFF94;
    color: #212529;
    width: auto;
    min-width: 70px;
    min-height: 40px;
    padding: 5px 10px 5px 10px;
    border-radius: .3rem;
}
 
.noteVideoButton:hover {
    background: #F5F552;
}
.noteVideoButton:focus {
    background: #F5F552;
}

.assessmentButton {
    border: 1px solid #2989d8;
    background: #2989d8;
    color: white;
    height: 40px;
    min-width: 120px;
    max-width: 75%;
    padding: 5px 10px 5px 10px;
    border-radius: 0.3rem;
    font-size: 16px;
}

.assessmentButton:hover{
    background: #0B7CD8;
}
.assessmentButton:focus{
    background: #0B7CD8;
}

.questionButton {
    border: 1px solid #2989d8;
    background: #2989d8;
    color: white;
    min-height: 40px;
    width:160px;
    padding: 5px 5px;
    border-radius: .3rem;
}

.questionButton:hover {
    background: #0B7CD8;
}
.questionButton:focus {
    background: #0B7CD8;
}

.unlockedStatus {
	font-size: 14px; 
	color: #212529;
}

.unlockedStatusButton {
    border: #dee2e6;
    color: #212529;
    background: rgba(24, 252, 84, 0.3);
	min-height: 50px;
	width:100%;
	min-width: 75px;
    padding: 1px 5px;
    border-radius: .3rem;
}

.unlockedStatusButton:hover {
    background: rgba(24, 252, 84, 0.5);
}

.unlockedStatusButton:focus {
    background: rgba(24, 252, 84, 0.5);
}

.pastDueStatus {
	font-size: 14px;
	color: #c32148;
}

.lockedStatus {
	font-size: 14px; 
	color: #c32148;
}

.lockedStatusButton {
    border: #dee2e6;
    color: #212529;
    background: rgba(255, 0, 0, .3);
	min-height: 50px;
	width:100%;
	min-width: 75px;
    padding: 1px 5px;
    border-radius: .3rem;
}

.lockedStatusButton:hover {
    background: rgba(255, 0, 0, .5);
}

.lockedStatusButton:focus {
    background: rgba(255, 0, 0, .5);
}

.bonusStatusButton {
    border: #dee2e6;
    color: #212529;
    background: rgba(154, 109, 187, .3);
	min-height: 50px;
	width:100%;
	min-width: 75px;
    padding: 1px 5px;
    border-radius: .3rem;
}

.bonusStatusButton:hover {
    background: rgba(154, 109, 187, .5);
}

.bonusStatusButton:focus {
    background: rgba(154, 109, 187, .5);
}

.removedStatusButton {
    border: #dee2e6;
    color: #212529;
    background: rgba(154, 109, 187, .3);
	min-height: 50px;
	min-width: 75px;
	width:100%;
    padding: 1px 5px;
    border-radius: .3rem;
}

.removedStatusButton:hover {
    background: rgba(154, 109, 187, .5);
}

.removedStatusButton:focus {
    background: rgba(154, 109, 187, .5);
}

.sectionSkillEditButton {
    border: 1px solid #2989d8;
    background: #2989d8;
    color: white;
    min-width: 120px;
    width: 100%;
    padding: 5px 10px 5px 10px;
    border-radius: .3rem;
    text-align: left;
}

.sectionSkillEditButton:hover {
    background: #0B7CD8;
}

.sectionSkillEditButton:focus {
    background: #0B7CD8;
}

.problemCountDropdown {
	border: 1px solid rgba(222, 226, 230, 1);
	border-radius: .3rem;
	background: #fffee5;
	min-height: 50px;
	min-width: 75px;
	width:100%;
	cursor: pointer;
	text-align: center;
	text-align-last: center;
}

.problemCountDropdown:hover,  .problemCountDropdown:focus{
    background: #fffdd1;
}

td[name=dynamicSectionCell] {
	padding: 0.3rem 0.4rem;
}

.twoLineHeaderText {
	/*font-size: 12px !important;*/
	padding: 0.5rem 0.4rem !important;
	line-height: 18px !important;
}

.twoLineCellText {
    font-size: 13px !important;
    /*padding: 0.25rem 1rem !important;*/
    line-height: 16px !important;
}

/*
.createAccountButton {
    border: 1.5px solid white;
    background: #2989d8;
    color: white;
    padding: 5px 5px;
    min-width: 180px;
    border-radius: .3rem;
}

.createAccountButton:hover {
    background: #0B7CD8;
}
.createAccountButton:focus {
    background: #0B7CD8;
}

.loginButton {
    border: 1.5px solid rgb(0, 128, 0); 
    background: #18FC54;
    color: rgb(0, 128, 0) !important;
    padding: 5px 5px;
    min-width: 180px;
    border-radius: .3rem;
}
*/
.loginButton:hover {
    background: #28E059 !important;
    border: 1.5px solid rgb(0, 128, 0) !important;
}

.loginButton:focus {
    background: #28E059 !important;
    border: 1.5px solid rgb(0, 128, 0) !important;
}

.independentAccountButton {
	border:1px solid  #dee2e6;
    color: #212529;
    background: #B9FECB;
    padding: 5px 5px;
    min-width: 180px;
    border-radius: .3rem;
}

.independentAccountButton:hover {
    background: #89F7A6;
}

.independentAccountButton:focus {
    background: #89F7A6;
}

.lmsButton {
	border:1px solid  #2989d8;
    color: #212529;
    background: #ffffff;
    padding: 5px 5px;
    min-width: 180px;
    border-radius: .3rem;
    /*margin: 5px;*/
}

.lmsButton:hover {
    background: #F4F4F4;
}

.lmsButton:focus {
    background: #F4F4F4;
}

.blueContentButton {
    border: 1px solid #2989d8;
    background: #2989d8;
    color: white;
    min-width: 120px;
    width: 100%;
    padding: 6px 10px;
    border-radius: .3rem;
}

.blueContentButton:hover {
    background: #0B7CD8;
}

.blueContentButton:focus {
    background: #0B7CD8;
}

.table-borderless td,
.table-borderless th {
    border: 0;
}

.tooltip-inner {
	background-color: #FFC000;
	color: #212529;
}

.tooltip.show {
  opacity: 1;
}

.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #FFC000;
}
.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: #FFC000;
}
.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: #FFC000;
}
.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #FFC000;
}

.scoreCellClass{
	width: 50px;
	margin: auto;
}

.dashboardFooterButtons {
	padding: .5rem 1rem;
}

.disabledButton{
    background: #dee2e6 !important;
    border: 1px solid #d1d1d1 !important;
    cursor: initial !important;
    color: black !important;
}

.greenTableCellButton{
    /*border: 1px solid #dee2e6;*/
    border: none;
    background: rgba(24, 252, 84, 0.3);
    color: black;
    min-width: 120px;
    width: 100%;
    padding: 5px 10px 5px 10px;
}

.greenTableCellButton:hover{
    background: rgba(24, 252, 84, 0.5);
}

.greenTableCellButton:focus{
    background: rgba(24, 252, 84, 0.5);
}

.lightGrayTableCellButton {
	border: none;
     background: rgba(194, 194, 194, 0.3);
    color: black;
    min-width: 120px;
    width: 100%;
    padding: 5px 10px 5px 10px;
}

.lightGrayTableCellButton:hover{
    background: rgba(194, 194, 194, 0.5);

}

.lightGrayTableCellButton:focus{
    background: rgba(194, 194, 194, 0.5);
}

.activeSkillButton {
    border: #dee2e6;
    color: #212529;
    background: rgba(24, 252, 84, 0.3);
	min-height: 40px;
	width: 105px;
    padding: 5px 5px;
    border-radius: .3rem;
}

.activeSkillButton:hover {
    background: rgba(24, 252, 84, 0.5);
}

.activeSkillButton:focus {
    background: rgba(24, 252, 84, 0.5);
}

.inactiveSkillButton {
    border: #dee2e6;
    color: #212529;
    background: rgba(255, 0, 0, .3);
	min-height: 40px;
	width: 105px;
    padding: 5px 5px;
    border-radius: .3rem;
}

.inactiveSkillButton:hover {
    background: rgba(255, 0, 0, .5);
}

.inactiveSkillButton:focus {
    background: rgba(255, 0, 0, .5);
}

#sectionDropdownContainer .btn-group {
	width: 100%;
	background: #2989d8 !important;
    border: 1px solid #2989d8;
    border-radius: 3px;
    color:white !important;
    cursor: pointer;
    text-align-last: center;
}

#sectionDropdownContainer .btn-group .dropdown-toggle {
	color: white;
}

#sectionDropdownContainer .btn-group .dropdown-menu {
	width: 100%;
	padding-top: 5px;
	padding-bottom: 10px;
}

.studentScoreSkillHeaderCell {
	vertical-align: middle !important;
	min-width: 100px; 
	width: 100px;
	white-space: normal;
}

.studentScoreMainHeaderCell {
	vertical-align: middle !important;
	min-width: 200px; 
	width: 200px;
	white-space: normal;
}

.studentScoreDueDateCellButton {
	border: 0;
	/*font-size: 16px;*/
}

.studentScoreLockCellButton {
	border: 0;
	font-size: 16px;
}

.subFooterButton{
    border: 0px solid white;
    background: none;
    color: #008cff;
    margin:0;
    padding:0;
}

.subFooterButton:hover{
    color: rgb(31, 107, 169);
    text-decoration: underline;
    border: 0px solid white;
}
.subFooterButton:focus{
    color: rgb(31, 107, 169);
    text-decoration: underline;
    border: 0px solid white;
}



#finalizeButton{
	background:none !important;
	color:#008cff !important;
}

#finalizeButton:hover{
	background:#9cd2fe !important;
}

#finalizeButton:focus{
	background:#9cd2fe !important;
}


#cannotBeDeterminedButton, #finalizeButton{
	background:none !important;
	color:#008cff !important;
	width:200px;
	max-width:100%;
	padding-left:1px;
	padding-right: 1px;
	border:0px !important;
}

#cannotBeDeterminedButton:hover{
	background:#9cd2fe !important;
		border:0px !important;
}

#cannotBeDeterminedButton:focus{
	background:#9cd2fe !important;
		border:0px !important;
}

#hintButton{
	background:darkgreen  !important;
	color: #18FC54 !important;
	width:200px;
	max-width:100%;
	padding-left:1px;
	padding-right: 1px;
	border:0px !important;
}


#hintButton:hover{
	background:#00883e !important;
		border:0px !important;
}

#hintButton:focus{
	background:#00883e !important;
		border:0px !important;
}

/* #aiButton{
	background:#00b050  !important;
	color:white !important;
	width:150px;
	max-width:100%;
	padding-left:1px;
	padding-right: 1px;
	border:0px !important;
}


#aiButton:hover{
	background:#00883e !important;
		border:0px !important;
}

#aiButton:focus{
	background:#00883e !important;
		border:0px !important;
} */




option:disabled {
    color: #C3C1C1 !important;
}

#notesVideoDiv {
    text-align: center;
    width: 800px;
    /*height: 450px;*/
    height: auto;
    position: relative;
}    
    
#notesTitle{
    padding-bottom: 10px;
}


.notesContainer{
	font-size: 0.95rem;
	scroll-behavior: smooth;
	max-width:900px;
	margin:auto;
}

.eqnLabelTd{
	padding-right:8px;
}


.defTable td, .eqnTable td{
	border: 0.25px solid gray;
	padding:3px 8px 3px 8px;
	height: 35px;
	font-size:0.9rem;
}

.defTable p, .eqnTable p{
	margin:6px 0 6px 0;
}


#notesContainer li{
	padding: 0;	
}


.eqnTableHeader{
	background-color: #dee2e6 /*#2989d838;*/ ;
	color:black;
	min-height:40px;
}

.defTableHeader{
	background-color: #dee2e6 /*:#00511d2b;*/ ;
	color:black;
	min-height:40px;
}

.defTable, .eqnTable{
	width:100%;
	max-width:800px;
	border-collapse: collapse;
	margin-bottom: 10px;
	margin-top: 10px;
	line-height:1.2;
}

.fmp{
	min-width:15px;
	display:inline-block;
	text-align:center;
}

.eqnTableName{
	width:33.33%;
}

.eqnTableManipulation{
	width:33.33%;
	white-space:nowrap;
}

.eqnTableEqn{
	width:33.33%;
	white-space:nowrap;
}

.defTableTerm{
	width:25%;
}

.defTableDef{
	width:55%;
}

.defTableSymbol{
	width:10%;
	text-align:center;
	white-space:nowrap;
}

.defTableUnit{
	width:10%;
	text-align:center;
    white-space:nowrap;
}

.eqnNote{
	font-size:0.65rem;
}


.refUnitLink{
	font-size:12px;
}

a {
	/*color:#2989d8;*/
}
 
.eqnRadic{
	font-size:1.21rem;
}

.ref-header{
	font-size:.8rem;
	display:inline-block;
}

.eqnPillContainer{
	border:0px solid #dee2e6;
}

.eqnPillContainer .nav-link{
	height:20px;
	width:100%;
	min-height: 45px;
    height: auto;
	border-radius:5px;
	text-align: center;
	margin:4px 2px 4px 2px;
	background-color: #008cff12;
    padding: 5px 2px 5px 2px;
}

.eqnPillContainer .nav-link:hover, .eqnPillContainer .nav-link:focus{
	background-color: #8bbfe9;
}

.eqnPillContainer .nav-link.active, .eqnPillContainer .show>.nav-link {
	background-color: #2989d8;
}


.eqnPillContainer a{
	height:40px;
}

.eqnPillContainer li{
	padding-left:2px;
	padding-right:2px;
	/*line-height: 200px;*/
}

.eqnPillContainer h1{
	font-size:1.5rem;
}

.eqnPillContainer h2{
	color: inherit !important;
    font-size: .8rem !important;
}

.ref-tab-content{
	border: 0px;
}

.notesUpperButtonsDiv{
	display:inline;
	white-space: nowrap;
	vertical-align: text-bottom;
}


.notesButtonActive {
	font-size: 12px;
    background: #2989d8;
    color: white;
    margin: 5px 2px 5px 2px;
    min-width: 60px;
    padding: 2px 10px 2px 10px;
    border-radius: 0.3rem;
    border: 1px solid #2989d8;
}

.notesButtonInactive {
	font-size:12px;
    background: #008cff12; 
    color: #2989d8;
    margin: 5px 2px 5px 2px;
    min-width: 60px;
    padding: 2px 10px 2px 10px;
    border-radius: 0.3rem;
    border: 1px solid #008cff12;
}

.lessonBigIdeas ul li{
	margin-bottom: 5px;
}

.lessonBigIdeas{
	margin-top: 7px;
}

.lessonSubPoint{
	font-size:0.8rem;
}


.lessonImageChild{
	width:100%;
	height:350px;
	outline:1px solid gray;
	text-align:center;
}

.youtubeVideo{
	width:100%;
	height:350px;
	border:0px
}

.refDiagramClass{
	max-width:100%;
	display: none;
	max-height:350px;
}

.notesButtonsDiv{
	width:100%;
	text-align:center;
}

#eqnSectionHeader{
	scroll-margin-top: 110px;
}

.skillTable td{
	border-width: thin !important;
}

.mathPill{
	background-color: rgba(24, 252, 84, 0.3);
}

#proceedFooterContainer{
	position: fixed;
    bottom: 0;
    margin-bottom:0px !important
}

#footerContainer{
	/*position: fixed;
    bottom: 35px;*/
    margin-bottom:0px !important;
    z-index: 1000;
}
 
#footerInfo{
	padding:5px 5px 5px 5px;
	font-size:12px;
    background-color:#f4f4f4;
    padding-top:8px;
    color: black; /*#353535;*/
    margin-top: 0px !important;
}

#combinedFooter{
	position: fixed;
    bottom: 0px;
    width:100%;
    z-index: 1000;
}

/* JR 230512*/
.skillHTMLj{
	overflow-x: auto;
}

.skillHTMLj #problemHTML{
	padding-bottom:150px;  /*jr 230519*/
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 16px;
	overflow-x: inherit;
}

#oneDiv{
	margin-top:50px;
}

.teacherOnly{
	color:green;
}

.teacherOnly:hover, .teacherOnly:focus{
	color:#9c4600;
}

.smallGreenButton {
	font-size:12px;
    border: #dee2e6;
    color: #212529;
    background: rgba(24, 252, 84, 0.3);
	min-height: 45px;
    border-radius: .3rem;
    padding:1px !important;
}

.smallGreenButton:hover {
    background: rgba(24, 252, 84, 0.5);
}

.smallGreenButton:focus {
    background: rgba(24, 252, 84, 0.5);
}

.smallBlueButton {
	font-size:12px;
    border: #dee2e6;
    color: #212529;
    background: #99d1ff;
	min-height: 25px;
    border-radius: .3rem;
}

.smallBlueButton:hover {
    background: #8bbfe9;
}

.smallBlueButton:focus {
    background: #8bbfe9;
}

.smallWhiteButton{
	font-size: 12px;
    border: 1px solid lightgray;
    background: white;
    color: black;
    min-height: 38px;
    border-radius: .3rem;
}

.smallWhiteButton:hover{
    /*background: #2989d8;*/
    /*color: white;*/
    background: #f2f5ff;
}

.smallWhiteButton:focus{
    /*background: #2989d8;*/
    /*color: white;*/
    background: #f2f5ff;
}

.settingsHeader{
	background-color:#efefef;
	color:black;
	text-align: left;
}

td, th, tr{
	border-width:1px !important;   /*was 0.5 border*/
}

#referenceContainer, #noteContainer{
	margin-bottom:100px;
}

.questionRadic{
	font-size:16pt;
}

.fractionRadic{
	font-size:12pt;
}

.footerSpacer{
	padding: 0 10px;
	color: #dee2e6d4;
}

/*.epButton{
	background-color: #16375E;
}*/

html{
	overflow-y: scroll !important;
}

.shuffleIcon {
	color: #2989d8;
    margin-left: 5px;
    font-size: 14px;
}

#skillTable .formControl{
	max-width:150px;
}

#homepageList{
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

#homepageList li {
  padding-left: 1em;
  text-indent: -1em;
  margin-bottom:10px;
}

#homepageList li:before {
  content: "+";
  padding-right: 5px;
  color: #2989d8;
}


#topHomeImage {
    -webkit-filter: brightness(100%);
}

#topHomeImage:hover {
    -webkit-filter: brightness(95%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.hTeacher{
	color:#1c73bb;
	margin-bottom:30px;
}

.hQuote{
	margin-bottom:3px;
}

#homepageContainer h2{
	color:#1c73bb;
	font-size:28px;
}

.userImage{
	width:100%;
	max-height:600px;
}

.customEditorDirections td{  
	border: 1px solid lightgray;
	border-collapse: collapse;
	padding: 7px;
}	

.customEditorDirectionsHeader{
background-color:#efefef;
max-width:30%;
}

.creatorVar{
	background-color:#dcefff;
}

.creatorInput{
	background-color:rgb(255, 255, 148);
}

.creatorSelect{
	background-color:#ffe394;
}

.guestSkillSEOHeader {
    font-size: 18px;
    padding-left: 23px;
    padding-right: 23px;
    padding-top: 5px;
    margin-bottom: -10px;
}

/*periodic table styles*/
  	.emptyCell {
        height:30px;
        width:30px;
  		border: solid black;
  		font-size: 14px;
    }
    .fullCell {
        height:25px;
        width:25px;
  		border: 1px solid #00B050 !important;
  		background:#18FC54;
  		font-size: 14px;
    }
    .labelMain {
  		font-size: 12px;
  		padding: 0px !important;

    }

    .label {
  		font-size: 8px;
  		min-width:23px;
  		line-height:1.4em;
  		vertical-align: bottom;
  		padding-bottom:3px;
    }
    .labelPeriod {
  		font-size: 8px;
  		padding-right:7px;
  		line-height:1.4em;
    }

    
 .varied{
  	color:#2989D8;
}

.note-editable{
	min-height:200px;
}  

#studentScoreTableContainer {
	max-height: 500px;
	overflow: scroll;
}
  
 #studentScoreTableContainer table th {
	position: sticky;
  	top: 0;
    z-index: 3;
}

#studentScoreTableContainer [name=averageRow] {
	/*position: sticky;
  	top: 0;
    z-index: 3;
    */
}

#studentScoreTableContainer  #skillTable th:nth-child(1) {
	left: 0;
    position: sticky;
    /* Displayed on top of other rows when scrolling */
    z-index: 4;
}

#studentScoreTableContainer  #skillTable th:nth-child(2) {
	left: 200px;
    position: sticky;
    /* Displayed on top of other rows when scrolling */
    z-index: 4;
}

#studentScoreTableContainer #skillTable td:nth-child(1) {
	left: 0;
    position: sticky;
    /* Displayed on top of other rows when scrolling */
    z-index: 2;
}

#studentScoreTableContainer  #skillTable td:nth-child(2) {
	left: 200px;
    position: sticky;
    /* Displayed on top of other rows when scrolling */
    z-index: 2;
}

/*assessment table*/
#studentScoreTableContainer  #assessmentTable th:nth-child(1) {
	left: 0;
    position: sticky;
    /* Displayed on top of other rows when scrolling */
    z-index: 4;
}

#studentScoreTableContainer  #assessmentTable th:nth-child(2) {
	left: 100px;
    position: sticky;
    /* Displayed on top of other rows when scrolling */
    z-index: 4;
}

#studentScoreTableContainer  #assessmentTable th:nth-child(3) {
	left: 300px;
    position: sticky;
    /* Displayed on top of other rows when scrolling */
    z-index: 4;
}

#studentScoreTableContainer #assessmentTable td:nth-child(1) {
	left: 0;
    position: sticky;
    /* Displayed on top of other rows when scrolling */
    z-index: 2;
}

#studentScoreTableContainer  #assessmentTable td:nth-child(2) {
	left: 100px;
    position: sticky;
    /* Displayed on top of other rows when scrolling */
    z-index: 2;
}

#studentScoreTableContainer  #assessmentTable td:nth-child(3) {
	left: 300px;
    position: sticky;
    /* Displayed on top of other rows when scrolling */
    z-index: 2;
}

#markUpContainer .sn-checkbox-open-in-new-window{
	display:none;
}

#markUpContainer .sn-checkbox-use-protocol{
	display:none;
}

/*#markUpContainer .note-editable i, #createTotalContainer i{
	font-style:normal;
	color:#2989d8;
	background-color:none;
}*/


#createTotalContainer img{
    display: block;
    max-width: 580px;
    max-height: 450px;
    /*width:100%;*/
}

#createDiagramContainer img{
	margin:auto !important;
    /*width:100%;*/
}


#createTotalContainer iframe{
    display: block;
    max-width:800px;
    width: 100%;
    max-height: 400px !important;
	border: 1px solid lightgray;
}

#createDiagramContainer iframe{
	margin:auto !important;
}

.createTotalContainerClass{
	margin-bottom: 16px;
}


.createTotalContainerClass p, #createExampleProblem p, #markUpContainer p, .labTab p, #problemHTML p{
	margin:0;
}

.createTotalContainerClass ol, .createTotalContainerClass dl, .createTotalContainerClass ul{
	margin:5px 0;
}


#markUpContainer ol, #markUpContainer dl, #markUpContainer ul{
	margin:5px 0;
}

span[name=randSpan]{
	color:#2989d8;
}

.pp-tag-v {
    color: #2989d8;
}

.customProblemTeacherNotification {
  	background-color: rgb(255, 128, 128);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #acacac;
}

.createTotalContainerClass td, #markUpContainer td{
	border: 1px solid #acacac;
	padding: 4px 8px;
	min-width: 80px;
	/*max-width: 220px;*/
	vertical-align: middle;
	height: 40px;
	text-align:center;
}

.createTotalContainerClass table, #markUpContainer table{
	border: 1px solid #acacac;
	margin-bottom:1px;
	/*text-align:left;*/
	width:fit-content;
}

/*.createTotalContainerClass td input, #markUpContainer td input{
	margin:-4px -8px;
	min-width:-webkit-fill-available;
	min-height:-webkit-fill-available;
	border: none !important;
	border-radius: 0px;
}

.createTotalContainerClass td select, #markUpContainer td select{
	margin:-4px -8px;
	min-width:-webkit-fill-available;
	min-height:-webkit-fill-available;
	border: none !important;
	border-radius: 0px;
}*/

.createProblemContainerClass{
	display:inline-table;
	text-align: left;
	padding: 0 12px !important;
}


.createTotalContainerClass tbody > tr:first-child,  #markUpContainer tbody > tr:first-child{
  background-color:#f2f2f2;
 }
 
 
#customProblemImage{
	width:unset !important;
	max-width:100%;
	max-height:650px;
}

#createTotalContainer{
	text-align:center;
	/*background-color: rgb(255, 255, 128);*/  
}


#createDiagramContainer{
	text-align:center;
	padding: 0 16px;
	/* min-width:fit-content; 052123*/
	/*background-color: lightcyan;*/
}

#createProblemContainer{
	text-align:left;
	padding: 0 16px;
}

.disabledText {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

.noBreak{
	white-space:nowrap; 
}


table.cTable, table.fractionTable  /*for conversion tables in the new editor if class is allowed*/
{
	border: 3px solid white !important;
}

table.cTable td  /*for conversion tables in the new editor if class is allowed*/
{
	white-space:nowrap;
	text-align:right;
	min-width:50px;
	width:fit-content;
	background-color:white;
}

table.cTable select {
	border:1px solid black !important;
	border-radius:5px;
	min-width: 60px;
    width: auto;
    min-height:30px;
    height: 30px;
    margin: 2px 0 2px 0;
}

table.cTable input {   
	border: 1px solid black !important;
	border-radius: 5px;
    min-width:73px;
    height: 30px;
    min-height:30px;
    margin: 2px 0 2px 0;
    }
    
 
table.clearTable input 
{   
	border: 1px solid black !important;
	border-radius: 5px;
    min-width:73px;
    height: 30px;
    min-height:30px;
    margin:1px;
    }
  
table.clearTable select {
	border:1px solid black !important;
	border-radius:5px;
	min-width: 60px;
    width: auto;
    min-height:30px;
    height: 30px;
    margin:2px 0px; 
}  

table.clearTable.text-center td{
	text-align: center !important;
} 

 #restartProblemButton{
	padding-right:5px;
	padding-left: 5px;
	border-radius:2px;
	background: #dee2e6;
    border: 1px solid #d1d1d1;
    color: black;
}

#createTotalContainer input{
	min-width: 73px;
}

#createTotalContainer input.symbolicanswer{
    min-width: 200px;
}

.narrowInput input, input.narrowInput{
	width:40px !important;
	min-width:40px !important;
}

.wideInput input, input.wideInput{
	width:110px !important; 
}

.createTotalContainerClass .clearTable td, .createTotalContainerClass .clearTable tr{
	border: none;
	min-width:10px;
	background: white;
	height:35px;
	padding:0 3px;
	text-align:left;
}

#markUpContainer .clearTable td, #markUpContainer .clearTable tr{
	border: 1px solid lightgray;
	min-width:25px;
	background:white;
	padding:4px 8px;
}


.clearTd{
	border:none !important;
	background:white;
}

.createTotalContainerClass table, #markUpContainer table{
	border:none;
}

#markUpContainer td{
	width:fit-content;
}

v, ans, mc, supermc, ppfrq, ppmedia, lab, ppplot, pplatex, bar, dyndropdown, simbtn, simbutton, symbolicanswer, aionly {
    padding: 2px 7px 2px 7px;
    border-radius: 3px;
    border:1px solid lightgray;
    margin: 1px;
    min-height:29px;
    line-height: 1.8rem;
    white-space: nowrap;
}

span:has(.katex-display){
	display: inline-block;
}


v { background-color: #c6e5ff;
	padding: 2px 4px 2px 4px;}

ans { background-color: #ffff94;}
symbolicanswer { background-color: #eeee84;}
mc { background-color:  #ffe59e;}
ppfrq { background-color:  #2ad0ff;; display: block; white-space: normal;}
supermc { background-color:  #eed58e; display: block; white-space: normal;}
lab { background-color: #9dce65;}
ppplot { background-color: #eadeff;}
pplatex { background-color: #dee2e6;}
bar { background-color: #daceff;}
simbtn {background-color: #2989d8; color:white}
simbutton {background-color: #2989d8; color:white}
aionly { background-color: #aabe9f;}

.ppFrq {
    display: inline-flex;
    flex-direction: column;
    margin: 9px 0px 14px 0px;
    width: 100%;
}

.ppFrq p {
    margin-bottom: 8px;
}

.ppFrq textarea {
    background: #ffff94;
    border: 1px solid grey;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 5px;
    margin-top:15px;
    width: 100%;
    max-width: 660px;
}

.ppFrqGrading {
    background: #dddddd;
    padding: 6px;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    max-width: 660px;
}

.ppFrqFeedback {
    color: grey;
}

.simbtn, .simcontrols button {
    border: 1px solid #2989d8;
    color: white;
    height: 30px;
    padding: 1px 1px;
    border-radius: 0.3rem;
    margin:1px 2px;
    width: 55px;
    text-align: center;
    background: #2989d8;
}

.simcontrols button:disabled {
    background: #dee2e6;
    cursor: default;
    border: 1px solid #dee2e6;
    color: gray;
}

dyndropdown, .dyndropdown {
	background-color: #2989d8;
	color:white !important;
	-webkit-text-fill-color: white !important;
}

mc sub::before, supermc sub::before, ppplot sub::before{
	font-size:10px;
  	content: "ERROR: Please paste unicode subscript instead of x₂ button";
  	background-color: rgb(255, 128, 128);
  	padding: 2px;
  	border-radius:2px
}

mc sup::before, supermc sup::before, ppplot sup::before{
  	font-size:10px;
  	content: "ERROR: Please paste unicode supercript instead of x² button";
  	background-color: rgb(255, 128, 128);
  	padding: 2px;
  	border-radius:2px
}

dyndropdown sub::before{
	font-size:10px;
  	content: "ERROR: Please paste unicode subscript instead of x₂ button";
  	background-color: rgb(255, 128, 128);
  	padding: 2px;
  	border-radius:2px
}

dyndropdown sup::before{
  	font-size:10px;
  	content: "ERROR: Please paste unicode supercript instead of x² button";
  	background-color: rgb(255, 128, 128);
  	padding: 2px;
  	border-radius:2px
}

ans var::before{
  	font-size:10px;
  	content: "ERROR: Variable tag is not needed inside answer tag";
  	background-color: rgb(255, 128, 128);
  	padding: 2px;
  	border-radius:2px
}

ppplot v::before{
  	font-size:10px;
  	content: "ERROR: Variable tag is not needed inside plot tag";
  	background-color: rgb(255, 128, 128);
  	padding: 2px;
  	border-radius:2px
}

ppmedia{ 
	background-color: #d0ff9a;
	display: inline-block;
}

#customMathEditor {
    background-color: #f5f5f6;
    border: 1px solid #dadada;
    border-radius: 3px;
    padding: 3px 7px;
    min-height: 2em;
}

#hintEditor {
    background-color: #f5f5f6;
    border: 1px solid #dadada;
    border-radius: 3px;
    padding: 3px 7px;
    min-height: 1em;
}

hr.right-hand-start {
    margin-bottom: 2rem;
}

/*hr.right-hand-start::after {
    content: "Column Break";
    color: #6b6b6b;
    font-size:10px;
    display:none;
}*/

table.fractionTable td  /*for conversion tables in the new editor if class is allowed*/
{
	white-space:nowrap;
	text-align:right;
	min-width:50px;
	width:fit-content;
	background-color:white;
	border-left:none !important;
	border-right:none !important;
}


table.cTable select, table.fractionTable select{
	border:1px solid black !important;
	border-radius:5px;
	min-width: 60px;
    width: auto;
    min-height:30px;
    height: 30px;
    margin: 2px 0 2px 0;
}

table.cTable input, table.fractionTable input{   
	border: 1px solid black !important;
	border-radius: 5px;
    width: 73px;
    min-width:73px;
    height: 30px;
    min-height:30px;
    margin: 2px 0 2px 0;
    }
    
 
table.clearTable input
{   
	border: 1px solid black !important;
	border-radius: 5px;
    width: 73px;
    min-width:73px;
    height: 30px;
    min-height:30px;
    margin:1px;
    }
  
table.clearTable select {
	border:1px solid black !important;
	border-radius:5px;
	min-width: 60px;
    width: auto;
    min-height:30px;
    height: 30px;
    margin:2px 0px; 
}  

.createTotalContainerClass .clearTable td, .createTotalContainerClass .clearTable tr{
	border: none;
	min-width:10px;
	background: white;
	height:35px;
	padding:0 3px;
}

#markUpContainer .clearTable td, #markUpContainer .clearTable tr{
	border: 1px solid lightgray;
	min-width:25px;
	background:white;
	padding:4px 8px;
}

.sectionSelector {
	display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #C5D9F1;
    background: #C5D9F1;
    color: black;
    margin-right: 10px;
}

.sectionSelector:hover, .sectionSelector:focus{
	border: 1px solid #A2C7F5;
   background:#A2C7F5;
}

.sectionSelector.inactive{
	border: 1px solid white !important;
    background: white !important;
}

.sectionSelector.inactive:hover, .sectionSelector.inactive:focus{
	border: 1px solid #efefef !important;
    background: #efefef !important;
}

.clearTd{
	border:none !important;
	background:white;
}

.createTotalContainerClass table, #markUpContainer table{
	border:none;
}

#markUpContainer td{
	width:fit-content;
}

.whiteLabel{
    color: white !important;
}
 
.whiteLabel span[name=randSpan]{
	color:white !important
}

.blackLabel span[name=randSpan]{
	color:black !important
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: unset !important;
} 

.image-container {
    position: relative;
    display: inline-block; /* Make the width of box same as image */
    /*overflow: clip;*/
    /* text-align: center; */
}

/*only apply clipping to  images cutting off*/
.image-container:has(.overlay-new){
	overflow:clip;
}

/* This is the old overlay style which you input inline in the html */
.label-overlay {
    position: absolute;
    /* This anchors the center of the div to the x,y specified instead of the top-left of the div to the x,y specified */
    /* transform: translate(-50%, -50%);*/
}

.label-overlay-center {
    transform: translate(-50%, -50%);
}

/* This is the new overlay style which you input into the custom_math */
.overlay-new {
    position: absolute;
    /* This is fully handled in javascript now so we don't do it here */
    /* transform: translate(-50%, -50%); */
}


/*hide options for other ul types*/
.jodit-toolbar-button_ul .jodit-toolbar-button__trigger{
	display:none;
}


/**/
.jodit-toolbar-button_h3, .jodit-toolbar-button_h4, .jodit-toolbar-button_blockquote, .jodit-ui-group__pre{
	display:none !important;
}

.jodit-ui-block__className{
	display:none !important;
}

/*.jodit-ui-form__target, this would remove the option to */
.jodit-ui-form__nofollow{
    display: none !important;
}


/*table adjustment hides*/
.jodit-ui-group__brush, .jodit-toolbar-button_valign{
	display:none !important;
}

/* Pulled this out because it was causing errors. */
/* .jodit-resizer, .jodit-table-resizer{
	display:none;
} */

.section-name-setting{
	min-width:140px
}

.jodit-workplace{
	height:350px !important;
}

.jodit-ui-group__file{
	display:none
}

.problemLabel {
	position: relative;
	height: -webkit-fill-available;
}

.problemLabel::before {
   position: absolute;
	/* font-family: 'Font Awesome 5 Free'; */
	 top: 0.5px;
	 left: 4px;
	 /* font-weight: bold; */
	 font-size: 11px;
	content: attr(data-before-content);
}

.correctLabel {
	color:  #000000;
}

.incorrectLabel {
	color:  #CC0000;
}

#createDiagramContainer p:has(.image-container){
	display: inline-block;
	width: 100%;
}

.finePrint{
	font-size:0.85rem;
	margin-top:8px !important;
	margin-bottom:8px !important;
	line-height:1.25;
}

#problemArea{
	height:fit-content;
}

.underlinedTd{
	border-bottom: 1px solid black !important;
}

#createTotalContainer h1, #markUpContainer h1,  .labTab h1, #problemHTML h1{
	font-size:1.8rem;
	color: #2989d8;
}

#createTotalContainer h2, #markUpContainer h2, .labTab h2, #problemHTML h2{
	font-size:1.4rem;
	color: #009000;
}

.xlargePrint{
	font-size:3rem
}

.largePrint{
	font-size:2rem
}

#createDiagramContainer table{
	margin:auto;
}

.search-icon:before {
     position: absolute;
    top: 2px;
    content: "\1F50D";
    margin-left: 5px;
    font-size: 20px;
 }

.creatorTopButton{
	min-width: 70px !important;
    font-size: 12px !important;
    padding: 1px 5px !important;
    white-space: nowrap;
}


a.creatorTopButton:hover{
	color:white;
	text-decoration: none;
}

.plotly .svg-container{
	margin:auto !important;
}
 

.smImage .xsImage{
	display:inline-block;
}

.smImage img:not(.overlay-new), .imageTable img:not(.overlay-new){
	width:245px;
	margin:0px !important;
}

.xsImage img:not(.overlay-new){
	width:180px;
	margin:0px !important;
}

.xlImage img:not(.overlay-new){
	min-width:1200px;
	max-height: 100% !important;
}

.xlSim img:not(.overlay-new){
	min-width: 580px !important;
	width:100%;
	max-width: 100% !important;
	max-height: 100% !important;
}

@media screen and (max-width: 580px) {
  #createTotalContainer img, .image-container
  {
   max-width: 100%;
   font-size: 2.9vw;  /*was 2.9vw*/
  }
  .image-container input, .image-container select{
	width:auto;
	height:auto;
	padding: .2vw;
	font-size:2.9vw;
	}
}

.chartBodyTd input, .chartBodyTd select{
    width: 100% !important;
    height: 100%;
    border: 0px;
    border-radius: 0px; 
    margin: 0px;
}

#diagramWrapper{
	overflow-x: visible;
}

#referenceContainer, #noteContainer{padding-bottom:150px}

/* idea to remove top and bottom banners for visualy impaired*/
@media screen and (max-height: 500px) {
	#headerContainer{position: absolute !important}
	#combinedFooter{position: absolute !important; bottom:auto !important}
	#proceedFooterContainer{position: absolute !important; bottom:auto !important}
	#problemHTML{padding-bottom: 16px !important}
	#referenceContainer{padding-bottom:16px !important}
	#noteContainer{padding-bottom:16px !important}
}




.imageTable td{
	border:none;
	background-color:white;
	min-width: 10px;
	padding:15px 3px 0 0;
	vertical-align:top;
}

.imageTable td:has(img) {
	/*padding: 0 30px 30px 0; old CSS*/
	padding:15px;
	}

/* JR student scores sticky attempt 052523*/

#skillTableWrapper{
	height: auto;
	max-height: 72vh;
	margin-bottom: 100px;
	width: 100%;
	max-width: fit-content;
	background-color: #d7d7d7;
	border:1px solid #494949;
	resize:both;
	overflow-x: auto;
}

#skillTableWrapper thead{
  position: sticky;
  top: 0;
  z-index: 3;
}

#skillTableWrapper td, #skillTableWrapper th, #skillTableWrapper button{
	border: 0px solid black !important;
	background-image: linear-gradient(0deg, #494949 0px, #494949 1px, transparent 1px), linear-gradient(-90deg, #494949 0px, #494949 1px, transparent 1px) !important; 
    /*background-position: 2px 2px !important;*/
    /*background-size: 100% 6px !important;*/
    background-repeat: no-repeat !important;
}

#skillTableWrapper tr[name=averageRow] td{
	border-bottom: 2px solid #494949 !important;
	background-image: linear-gradient(-90deg, #494949 0px, #494949 1px, transparent 1px) !important; 
}

#skillTableWrapper tr[name=averageRow] td button{
	height: 46px;
}

.ssUser{
	position:sticky;
	left:0;
	padding-left:40px !important;
	text-align:left; 
}

.katex .mathnormal, .katex .op-symbol{
	color:#2989d8
} 

.stemDisplay, .chemistryDisplay, .physicsDisplay, .localDisplay {
	display: none;
}

.goog-te-gadget-simple{
	/**/ background: transparent !important; /**/
	/**/ border: 0px solid blue; /**/
	font-size:18px !important;
	border-radius: 5px;
	padding: 6px 6px 6px 6px !important;
	border: 0px !important;
}

.goog-te-gadget{
	/*text-align: center !important;*/
	font-family: inherit !important;
}

#google_translate_element{
	padding: 0px 0 0px 0;
	}


#google_translate_element img{
	display:none;
}

#google_translate_element a span{ 
	display: none;
}

#google_translate_element a:hover{
	text-decoration: none !important;
}

.goog-te-gadget-simple{
	width: 100%
}

/* center Nuclear symbol table */
#createTotalContainer table .clearTable, .nuclearSymbolTable{
	margin:auto;
}

.toleranceRoundingInput{ 
	width: 70px;
	border-radius:5px;
	border: 1px solid #dadada;
}

/*center the label for the image*/
.centerLabel .image-container div{
	transform: translate(-50%, 0) !important; 
	width:max-content;
}

/* Copy button on student scores page */
.pp-copy-btn{
	color:gold;
} 

/* The actual popup */
.popuptext {
    position: absolute;
    display: none;
    background-color: #1565a7;
    color: gold;
    z-index: 9999;
    border-radius: 5px;
    padding: 2px 4px;
    margin-left: 4px;
    margin-top: -2px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.noShowAxis .xaxislayer-above, .noShowAxis .yaxislayer-above, .noShowAxis .gridlayer{
	display:none
} 


#schoolTable td{ 
	white-space:pre-wrap; 
	max-width:100px !important;
}

#bulkStudentTable td, #bulkStudentTable th{
	text-align: center;
	padding: 6px;
}

#skillTableHeader th, #assessmentTableHeader th{
	text-align:center;
	vertical-align: bottom !important;
	padding: 6px !important;
}

li .katex-display{
	margin: .25rem 0
}

.dyndropdown{
	border: 1px solid #2989d8;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    min-width: 60px;
    width: auto;
    height: 30px;
    font-size: 16px;
    text-align: left;
    text-align-last: center;
    margin: 1px 3px 1px 1px;
    padding: 0px 10px;
    opacity: 1;
} 


.inlineObject{
	height:1px;
	margin: 0 2px 0 2px;
	display:block;
}

#createDiagramContainer .inlineObject{
	display:inline-flex;
}

.submitScoreGoogleButton {
	font-size:16px !important;
	color:gold /*#2989d8*/ !important; 
}

.submitScoreDashboardButton{
	text-align: center;
    padding: 10px;
}

td[name="earliestTimestampCell"], td[name="latestTimestampCell"] {
  padding:0;
  font-size: 12px;
  min-width:110px;
}

.labTab{
	outline:1px solid lightgray;
	padding:20px !important;
	border-radius:8px;
	margin-top:15px;
}

.teacherDirections{font-size:0.9rem; padding-bottom: 250px}
.teacherDirections li{margin:6px 0 6px 10px}
.teacherDirections ul, .teacherDirections ol{margin-top:15px}
.teacherDirections ul ul, .teacherDirections ol ul{margin-top:0px !important}
.teacherDirections iframe{width:800px; height:400px; max-width:100%; max-height:50%}
.teacherDirections h2{color:green; font-size:1.4rem}
.teacherDirections h1{font-size: 1.8rem; color: #2989d8;}
.teacherDirections div{scroll-margin-top: 135px; margin-top:35px}
.teacherDirections button a{color:white}
.teacherDirections button {margin:5px}


/*prevents weird flashing/resizing for inquiry images in tables */
div.createTotalContainerClass:has(.dyndropdown) table div.refreshable.image-container, div.createTotalContainerClass:has(.dyndropdown) div.refreshable.image-container:has(.label-overlay){
	width: 580px;
	height: 450px;
}

/*
#problemCreatorPreview #createDiagramContainer, #problemCreatorPreview:has(#createDiagramContainer) #createProblemContainer{
	min-width:500px;
}*/ 

/*.sampleProblemButton{
    background: darkgreen;
    border: 1px solid darkgreen;
    padding-left: 10px;
    padding-right: 10px;
}*/


/*screen reader only*/
.sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }
    
 #problemCreatorPreview:has(.overlay-new) img:not(.overlay-new) {
	 border: 1px dashed lightgray
	 }
	 
.jodit-workplace{
	height: auto !important;
	max-height: 400px;
}

.superMc li {
    color: #2989d8;
}

.superMc select {
    margin-left: 30px;
}


.createProblemContainerClass:has(.simcontrols):has(.first_ppmedia){
	border:1px solid lightgray;
	border-radius: 5px;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	height:fit-content;
	/* max-width: fit-content; */
}

/*.createProblemContainerClass img:not(.overlay-new){
	margin: 0 -15px;
}*/

.headerCourses{
	color: #dee2e6;
	font-size: 10px;
	margin: -3px 0px 5px 5px;
	display:none;
}

.headerLine{
	color:#18FC54;
}

/*centers tables in same section as an image*/
.createProblemContainerClass:has(img) table{
	margin:auto
	}
	
#lateWorkWarningMessage{
	background-color: #FFFF94;
	margin: 0 -15px;
	padding: 3px;
	font-size: 0.75rem;
	border-top: 1px solid #e0e06c;
}

.unlockedDate{
	color:green;
}

.pastDueDate{
    color:#c32148;
}

.dashboardContainer #modeDropdown{
	min-height:50px
}

.modal{
	overflow-y: scroll;
}

#markUpContainer [data-ref="var"] button:not(:hover){
	background-color:#dcefff;
}


#markUpContainer [data-ref="ans"] button:not(:hover){
	background-color:rgb(255, 255, 148);
}

#markUpContainer [data-ref="mc"] button:not(:hover){
	background-color:#ffe394;
}

/*dashboarad width update*/
[name="dynamicSectionCell"]{
	max-width: 163px !important;
    min-width: 163px !important;
    white-space: normal;
    overflow: hidden;
}

.skiptranslate select{
	color: white;
	background: transparent;
	border-radius: .25rem;
	border:0px;
	width:160px;
	font-size:17px;
	text-align: left;
	font-family: 'Noto Sans', sans-serif;
	height:43px;
	margin:0px !important;
	padding: 0 5px;
	cursor: pointer;
}

[name=loginHeaderContainer] .skiptranslate select{
        width: 160px !important;
 }

@media (max-width: 992px){
	.skiptranslate select{
        width: 100%;
    }
    .skiptranslate{
        padding-right: .5rem;
    }
}

.skiptranslate, .VIpgJd-ZVi9od-l4eHX-hSRGPd{
	font-family: 'Noto Sans', sans-serif;
	color:lightgray !important;
	font-size: 0px !important;
}

.goog-te-gadget, .goog-te-combo{
	margin:0px;
}

.skiptranslate select:hover, .skiptranslate select:focus{
	background: #0A70C4;
}
/* Chat Overlay */
.chat-overlay {
    position: fixed;
    bottom: 87px;
    right: 50px;
    width: 450px;
    max-width: 80%;
    max-height: 400px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
    min-height: 42px;
    /* Ensure it appears on top */
}

/* Header */
.chat-header {
    background-color: darkgreen; /* #0078d7; */
    color: #ffffff;
    padding: 10px;
    text-align: center;
    cursor: grab;
}

/* Chat Content */
.chat-content {
    padding: 10px;
    flex-grow: 1;
    overflow-y: auto;
    background-color: #f9f9f9;
    /* Font size 9 */
    font-size: 0.9rem;
    min-height: 90px;
}

/* Chat Input */
.chat-input {
    padding: 10px;
    background-color: #f1f1f1;
}

#chatInputExpandable {
    background-color: white;
    border: 1px solid #dadada;
    border-radius: 6px;
    padding: 3px 7px;
    min-height: 1em;
    max-height: 7em;
    overflow-y: scroll;
}

.llm-message {
    float: left;
    clear: both; /* Ensures each message starts on a new line */
    background-color: #f1f1f1; /* Light grey background for LLM messages */
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    max-width: 80%; /* Limit the width of the message */
}

.llm-message p:last-child {
    margin-bottom: 0; /* Remove margin from the last paragraph */
}

.user-message {
    float: right;
    clear: both; /* Ensures each message starts on a new line */
    background-color: #d1e7dd; /* Light green background for user messages */
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    max-width: 80%; /* Limit the width of the message */
}

.message-container {
    overflow: hidden; /* Clear floats */
    margin-bottom: 10px; /* Space between messages */
    position: relative;
}

.message-container .ai-thumbs-updown{
    position: absolute;
    bottom: 5px;
    color: #c3c3c3;
    display: inline-block;
}

/* .message-container .ai-thumbs-updown .fa-thumbs-down{
    margin-left: 5px;
    margin-top: 3px;
}

.message-container .ai-thumbs-updown .fa-thumbs-up{
    margin-bottom: 3px;
} */

.message-container .ai-thumbs-updown svg{
    margin-left: 2px;
}

.ai-thumbs-updown .voted-for {
    color: #1568ac;
}

.chat-close-button {
    font-size: 24px;
    color: white;
    cursor: pointer;
    margin-left: auto;
    float: right;
}

ppplan {
    display: block;
    font-size: 70%;
    color: green;
    display: none;
}

/*keep plots on right side without cutting off, but not perfect*/
.js-plotly-plot{
	max-width:580px;
}

.aionly {
    display: none;
}

[contenteditable="plaintext-only"].disabled {
    pointer-events: none;
    opacity: 0.5;
}

.narrowTd{
	min-width: 40px !important;
}

#startAssessmentOverlay {
    position: fixed;
    top: 67px;
    left: 0;
    width: 100%;
    height: calc(100% - 67px);
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    background: white;
}

/* Center the button vertically and horizontally */
#startAssessmentOverlay button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2989d8;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

/* zindex -1 background that is full width and full height */
#whitebackground{
    background-color:white;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
}

/* Alert Box Styling */
.custom-alert-confirm {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 5000;
    text-align: center;
}

.custom-alert-confirm button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

/* Alert Box overlay */
#custom-alert-confirm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 4999;
}

.disabledIncorrectAnswer {
    /*background-color: lightgray !important;*/
    /* border-color: red !important;*/
    -webkit-text-fill-color: gray !important;
}

/* Popup Calculator */
#popupCalcContainer {
    position: fixed;
    bottom: 87px;
    left: 50px;
    width: 400px;
    max-width: 80%;
    max-height: 440px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 440px;
    z-index: 10001;
}

#popupCalcHeader {
    background-color: darkgreen;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    cursor: grab;
    position: relative;
}

#popupCalcClose {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #ffffff;
}

#popupCalcHistory {
    height: 200px;
    overflow-y: auto;
    padding: 10px;
    font-family: monospace;
    font-size: 14px;
    background-color: #f9f9f9;
    flex-grow: 1;
}

#popupCalcInputContainer {
    padding: 10px;
    border-top: 1px solid #ddd;
    background-color: #f1f1f1;
}

#popupCalcInput {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: monospace;
}

.popupCalcItem {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dotted #ddd;
}

.popupCalcExpression {
    color: #333;
}

.popupCalcResult {
    color: #2989d8;
    font-weight: bold;
}

.settingsDescription{
	min-height:120px
}

li .katex {
    text-align: left !important;
    padding: 7px;
} 

.katex-display {
    margin: .15em 0 !important;
}

.monospace{
	font-family: monospace;
}