/* 
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 {
    padding-right: 16px !important;
}

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;
}

.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: 40px;
    margin-top: -18px;
    margin-right: -15px;
    /*font-family: xxxxxx;*/
}

.logoText{
    display:inline-block;
    vertical-align:11px;
    color:white;
    /*font-family: xxxxxx;*/
    font-size: 40px;
    letter-spacing: -0.5px;
}

.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;
    margin-bottom: 0;
}

.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*/
}

#schoolTable th, #schoolTable td {
    font-size: 10px;
    padding: .4rem;
}

.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;
}

.print-options-box {
    display: inline-block;
    background-color: #FFFF94;
    border: 1px solid #000;
    border-radius: 5px;
    padding: 2px 6px;
    margin: 2px 0;
    font-size: 1em;
    line-height: 1.4;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.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: "#FF2E2E";
    font-size: 30px;
    margin-top: 5px;
}

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



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: "#FF2E2E";
    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:#fffff0;
    padding: .5rem;
    color: black;
    cursor: pointer;
    width: auto;
    min-width: 50px;
    text-align-last: center;
    font-size: inherit;
    -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;
}

.smallerText{
    font-size:75%; /* 75% of the enclosing problem text */
}
/* Don't compound when nested: a .smallerText inside a .smallerText stays at 75% of the base, not 75% of 75%. */
.smallerText .smallerText{
    font-size:100%;
}

.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;
    line-height: 20px;
}

/* Make buttons fill their table cells vertically — height:1px is the standard
   CSS trick that gives the td a resolved height so height:100% works on children */
.positiveTable td.p-0 {
    height: 1px;
}
.positiveTable td.p-0 > button {
    height: 100%;
}

.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: 5px;
}

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

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

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

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

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

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

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

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

.pastDueStatusButton:hover {
    background: rgba(255, 165, 0, 0.45);
}

.pastDueStatusButton:focus {
    background: rgba(255, 165, 0, 0.45);
}

/* In-table lock/unlock buttons on the student scores page (compact table layout) */
button[name="skillSettingShowModalButton"] {
    border-radius: 0;
    min-height: 45px;
}

.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: #fff;
	color: #212529;
	border: 1px solid #adb5bd;
	box-shadow: 0 2px 5px rgba(0,0,0,0.12);
}

.tooltip.show {
  opacity: 1;
}

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

.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;
	border-radius: 5px;
    min-width:73px;
    height: 30px;
    min-height:30px;
    margin:1px;
    }
  
table.clearTable select {
	border:1px solid black;
	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: 175px;
}

#createTotalContainer input.answithunits{
    min-width: 120px;
}

input[name='answer'].answithunits, input[name='answerreadonly'].answithunits {
    width: 100px;
}

/* Warning icon shown next to <answithunits> inputs when the unit is not recognised by mathjs.
   Only visible inside the creator preview; hidden everywhere a student can see.

   Scoped to #problemCreatorPreview, NOT #createTotalContainer: that id is reused verbatim by
   the student skill page, the guest skill page and the notes viewer (they all render into
   "#problemHTML #createTotalContainer"), so scoping to it showed students a warning about
   mathjs unit support that is meaningless to them and that only the author can act on.
   #problemCreatorPreview exists only on the creator page and is the same anchor that
   .ppsvg-missing uses for this exact purpose. */
.answithunits-unknown-warning {
    display: none;
    cursor: help;
    color: #c8850d;
    font-size: 15px;
    vertical-align: middle;
    margin-left: 3px;
}
#problemCreatorPreview .answithunits-unknown-warning {
    display: inline;
}

.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;
}

/* min-height and vertical padding are ignored on a plain inline box, so every tag is
   inline-block: one mechanism sets pill height everywhere, and line-height is left to do
   only leading. Alignment stays on the default baseline so a pill's text sits on the same
   line as the prose beside it; the paragraph line-height already reserves the room. */
v, ans, mc, supermc, ppfrq, ppmedia, ppsvg, lab, ppplot, pplatex, bar, dyndropdown, dyninput, simbtn, simbutton, symbolicanswer, answithunits, aionly {
    display: inline-block;
    padding: 1px 7px 1px 7px;
    border-radius: 3px;
    border:1px solid lightgray;
    margin: 0 1px;
    min-height:22px;
    line-height: 1.45;
    white-space: nowrap;
}

/* Long-content tags that are standalone rather than part of a sentence. */
ppmedia, ppplot, bar, aionly, supermc, ppfrq {
    display: block;
    white-space: normal;
}

/* Long-content tags that belong mid-sentence, so they stay in the line but wrap inside a
   single box rather than the box itself splitting across lines. */
ans, mc, lab, pplatex, symbolicanswer, answithunits {
    white-space: normal;
    max-width: 100%;
}

/* A nested tag can never be as short as its parent's own text line — it adds a border and
   padding the plain text does not have. Shrinking it closes most of that gap and reads as
   belonging inside. */
:is(v, ans, mc, supermc, ppfrq, ppmedia, ppsvg, lab, ppplot, pplatex, bar, dyndropdown, dyninput, simbtn, simbutton, symbolicanswer, answithunits, aionly)
:is(v, ans, mc, supermc, ppfrq, ppmedia, ppsvg, lab, ppplot, pplatex, bar, dyndropdown, dyninput, simbtn, simbutton, symbolicanswer, answithunits, aionly) {
    font-size: 0.9em;
    min-height: 0;
}

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


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

ans { background-color: #ffff94;}
symbolicanswer { background-color: #eeee84;}
answithunits { background-color: #fff0b3;}
mc { background-color:  #ffe59e;}
ppfrq { background-color:  #2ad0ff;}
supermc { background-color:  #eed58e;}
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;}

/* Nothing is meant to live inside a ppsvg tag, so its label is generated rather than typed:
   CSS content cannot be saved into the markup or leak into the rendered problem. */
ppsvg { background-color: #d5c3a1;}
ppsvg::after { content: "SVG"; }

.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;
}

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

.dyninput{
    height: 30px;
    /* width: 60px; */
    border: 1px solid #2989d8 !important;
    border-radius: 5px;
    text-align: center;
    min-width: 73px !important;
}

/* Hide number input spinners for dyninput */
.dyninput::-webkit-outer-spin-button,
.dyninput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.dyninput[type=number] {
    -moz-appearance: textfield;
}

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;
}

ppsvg {
	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;
	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;
    aspect-ratio: 16/9;
    max-width: 800px;
    margin: auto;
}
.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, .jodit-wysiwyg h1{
	font-size:1.8rem;
	color: #2989d8;
}

#createTotalContainer h2, #markUpContainer h2, .labTab h2, #problemHTML h2, .jodit-wysiwyg 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
}

.symbolicanswer-wrapper {
	display: inline-flex;
	flex-direction: column;
}

.symbolicanswer-wrapper input.symbolicanswer {
	width: 100%;
	position: relative;
	z-index: 1;
}

.symbolicanswer-livepreview {
	min-height: 50px;
	margin: -10px 1px 1px 1px;
	border: 1px solid black;
	padding: 12px 2px 4px 2px;
	background-color: #dddddd;
	border-radius: 5px;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
    font-size:15px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.symbolicanswer-livepreview .katex .mathnormal,
.symbolicanswer-livepreview .katex .op-symbol{
	color:#000
}

.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;
}

input.dyninput:not([name="answer"]){
	border: 1px solid #2989d8;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    min-width: 80px;
    width: 80px;
    height: 30px;
    font-size: 16px;
    text-align: center;
    margin: 1px 3px 1px 1px;
    padding: 0px 1px 0px 5px;
    opacity: 1;
    background-color: white;
    color: #2989d8;
    -webkit-text-fill-color: #2989d8;
}


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

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

.submitScoreGoogleButton {
	font-size: 14px !important;
	color: white !important;
	background: #28a745 !important;
	border: 1px solid #28a745 !important;
	border-radius: .3rem;
}

.submitScoreGoogleButton:hover {
	background: #218838 !important;
	border-color: #218838 !important;
	color: white !important;
}

.lmsBannerButton {
	font-size: 12px;
	border: 1px solid #2989d8;
	border-radius: .3rem;
	padding: 2px 12px;
	cursor: pointer;
	background: #2989d8;
	color: white;
}

.lmsBannerButton:hover {
	background: #0B7CD8;
	border-color: #0B7CD8;
}

.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),
div.createTotalContainerClass:has(.dyninput) table div.refreshable.image-container, div.createTotalContainerClass:has(.dyninput) 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
	 }

/* ppsvg: dashed border in creator preview only; always drawn at its authored size */
#problemCreatorPreview .ppsvg-container {
    border: 1px dashed lightgray;
}

.ppsvg-container {
    display: inline-block;
    /* Never squeezed by a flex parent — a diagram is only accurate at its authored scale. */
    flex: 0 0 auto;
}

.ppsvg-container svg {
    max-width: none;
}

/* Added by the ppsvg handler only when the diagram declares no font of its own, so labels
   match the surrounding problem text. Because the diagram is drawn at its authored scale,
   an inherited size lands at the same visual size as the prose around it. */
.ppsvg-container svg.ppsvg-inherit-font-family {
    font-family: inherit;
}

.ppsvg-container svg.ppsvg-inherit-font-size {
    font-size: inherit;
}

/* A ppsvg tag with no SVG behind it is an authoring mistake, so say so loudly in the
   creator preview — but stay silent everywhere else rather than showing a student
   bracketed error text they can do nothing about. */
.ppsvg-missing {
    display: none;
}

#problemCreatorPreview .ppsvg-missing {
    display: inline;
    color: red;
}
	 
.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: 167px !important;
    min-width: 167px !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;
    margin: auto;
}

.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;
}

/* Re-enter fullscreen overlay — shown after a fullscreen violation */
#reenterFullscreenOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#reenterFullscreenOverlay button {
    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;
}

/* Drawing Overlay */
#pageContent {
    position: relative;
}

#drawingCanvas {
    position: absolute;
    pointer-events: none;
    z-index: 500;
    opacity: 0.6;
}

body.drawModeActive #drawingCanvas {
    pointer-events: all;
    cursor: crosshair;
}

body.drawModeActive.arrowToolActive #drawingCanvas {
    cursor: crosshair;
}

#drawLink {
    font-weight: normal;
}

/* Drawing modal popup */
#drawingModal {
    position: fixed;
    bottom: 87px;
    left: 220px;
    width: fit-content;
    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: 10002;
}

#drawingModalHeader {
    background-color: #1a237e;
    color: #ffffff;
    padding: 8px 14px;
    text-align: center;
    cursor: grab;
    position: relative;
    user-select: none;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
}

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

#drawingModalBody {
    display: flex;
    flex-direction: column;
    padding: 8px 10px 6px;
}

#drawToolRow {
    display: flex;
    flex-direction: row;
    gap: 4px;
    white-space: nowrap;
}

#drawColorRow {
    display: flex;
    flex-direction: row;
    gap: 7px;
    margin-top: 8px;
    padding: 0 3px;
    align-items: center;
    justify-content: center;
}

.drawColorBtn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.15);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

#drawColorRed    { background: #CC0000; }
#drawColorOrange { background: #E07000; }
#drawColorYellow { background: #C8A000; }
#drawColorGreen  { background: #007700; }
#drawColorBlue   { background: #00387e; }
#drawColorGray   { background: #222222; }

.drawColorBtn.active {
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.55);
}

#drawColorRow.colorsDisabled .drawColorBtn {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

#drawingModalFootnote {
    font-size: 10px;
    color: #888;
    padding: 0 10px 8px;
    text-align: center;
    white-space: normal;
    line-height: 1.4;
    overflow-wrap: break-word;
    max-width: 320px;
    align-self: center;
}

/* Icon tool buttons (pen, arrow, eraser, trash, mouse) */
.drawIconBtn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 15px;
    color: #444;
    padding: 0;
}

.drawIconBtn.active {
    background: #e0e0e0;
    border-color: #555;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

#drawClearBtn:focus,
#drawClearBtn:active {
    outline: none;
    box-shadow: none;
    background: #f5f5f5;
    border-color: #ccc;
}

.drawToolBtn {
    font-size: 12px;
    padding: 5px 9px;
    border: 1px solid #aaa;
    border-radius: 4px;
    background: #f5f5f5;
    cursor: pointer;
}

.drawToolBtn.active {
    background: #ddd;
    font-weight: bold;
    border-color: #555;
}

/* 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;
    user-select: none;
}

#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{
	margin-left:25px
}

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

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

.monospace{
	font-family: monospace;
}