*{
    color: black; 
}
:root {
--grey: #1e90ff; --white: #ffffff; 
}
.footer{
display: none;
}

.test_mode #test_mode_bar {
    display: none;
}

.submit_resp_div {
   display: flex;
   align-items: center;
   justify-content: center;
}

.test_mode{
    margin: 0;
}

.question{
    width: 100% !important;
      margin: 0 auto !important;
      padding: 0 !important;
  
}
.header2, .question_text {
font-size: 17px; 
}
.clickable .options {
font-size: 15px;
}
.indent {
margin-left: 0px;
}
 .page_error, .server_verification_error {
      z-index: 1; 
}
.question_text img {
   width: 58%;    display: block;    margin: 3% auto 0; 
}
   .submit_resp_btn img, .back_btn img {
     transition: all .5s ease;    cursor: pointer;    /* margin: 7% 0; */ 
}

.back_btn img{
   transform: rotate(180deg);
}

 body{
   overflow-y: hidden;  
}
 div#mic_response {
   font-size: 24px;    color: grey; 
}
 .submit_resp_btn, .back_btn{
   width: 90%;    margin: 25% 0 0; 
}
 .submit_resp_btn:hover  img, .back_btn:hover  img {
   scale: 1.2; 
}
 .prog_inner {
   width: 10%;    background: #455886;    height: 8px;    border-radius: 50px; 
}
 div#keyboard {
    width: 90%;    cursor: pointer; 
}
 .bottom-right {
   width: 8%;    position: fixed;    right: 8%;    bottom: 16%;    display: flex;    justify-content: center;    align-items: center; 
}
 .terminatelink .bottom-right {
  display: none;  
}
  /* .inner_table tr {
    border-bottom: 1px solid grey; 
} */
 div#textarea_con {
   width: 60%; 
}

#error_box {
  
    display: none;
}
 div#prog_bar {
   width: 85%;    background: #eff1f5;    height: 8px;    position: fixed;    /* left: 6%; */    top: 7.6%;    border-radius: 50px; 
}

.select .clickable, .response_row {
    background: #eff1f5 !important;
    width: 100%;
    border-radius: 5px;
    margin: 1% 0;
    padding: 1% 0% 1% 2% !important;
}

.select .clickable.highlight{
    background: #d3d2d2 !important;
}

div.clickable.response_row.sel {
   background: #64749a !important;
}

.sel label {
  
   color: white !important;
}


   .start_resp_btn {
   font-size: 18px;    border: 1px solid #3d5181;    color: #3d5181;    background: #3d518115;    opacity: 1;    padding: 1%;    width: 16%;    border-radius: 6px;    cursor: pointer;    transition: all .5s ease;    margin: 7% auto;    display: flex;    justify-content: center;    align-items: center; 
}
 #logo img {
   width: 12%; 
}
   .question_text {
   font-size: 25px; 
}
.header2, .question_body{
   width: 60%;    margin: 2% auto 0;    font-size: 18px !important; 
}
  .dis{
   display: none; 
}

.input_cell.error_var_highlight_center {
   background-color: #aabef0 !important;
   border-radius: 0px !important;
}

.grid .input_cell.error_var_highlight_center.highlight {
   background-color: #d3d2d2 !important;
}
 #Login_div .sub_txt {
   font-size: 18px;    color: grey;    text-shadow: 1px 1px black; 
}

 #loader{
   background: white;    position: fixed;    width: 100%;    height: 100%;    z-index: 3;    display: none;    top: 0;    left: 0;    justify-content: center;    align-items: center;    opacity: .7; 
}
 #loader img{
       width: 30%;        border-radius: 260px;     
}
 .server_verification_error .question_errors {
    padding: 1%;     z-index: 1;     position: absolute;     border: 2px solid #89a0d8;     background: #6e7fa6;     border-radius: 7px;     color: white; 
}

.question_error_box {

    position: absolute;
    top: 0%;
    left: 21%;

}

.page:has(.terminatelink) .bottom-right{
   display: none;
 }

.radiobox{
 background: url(../circle.png) no-repeat center/cover;
}

.checkbox{
      background: url(../not_sel.png) no-repeat center/cover;
}

.checkboxselected {
   background: url(../check_sel.png) no-repeat center/cover;
}

 .radioboxselected {
   background: url(../check.png) no-repeat center/cover;
}

.checkbox, .checkboxselected, .radiobox, .radioboxselected {
   width: 25px;
   height: 25px;
  
}

svg.checkbox_svg, svg.radio_svg{
   display: none;
}

select {
   background: #f1f1f1 !important;
}

  .start_resp_btn:hover{
   box-shadow: 0px 0px 0px 2px lightblue inset;    scale: 105%; 
}
 .go_next {
   font-size: 14px;    opacity: 0;    transition: all 0.5s ease;  
}
 .start_resp_btn:active{
   box-shadow: 0px 0px 0px 2px lightblue;    scale: 105%; 
}
 #next_button {
   width: 20% !important; 
}
  textarea {
    font-size: 22px !important;     border-top: 0 !important;     border-bottom: 2px solid black !important;     border-right: 0 !important;     width: 65% !important;     height: 40px;     padding: 0 0 1% 1% !important;     min-height: 17px !important;     border-bottom: 2px solid black !important;     /* max-height: 150px; */     /* overflow-x: hidden; */     background: transparent;     /* overflow-y: auto; */     margin: 3% 0 0; 
}

.page::-webkit-scrollbar {
   width: 7px;
   border-radius: 70px;
   height: auto;
}
   /* Track */ .page::-webkit-scrollbar-track {
   background: #f1f1f1;  
   border-radius: 70px;

}
   /* Handle */ .page::-webkit-scrollbar-thumb {
   background: #7b92c9;  
}
   /* Handle on hover */ .page::-webkit-scrollbar-thumb:hover {
   background: #455886;  
}
   body::before {
   content: "";    position: absolute;    width: 100%;    height: 100%;    background: rgb(61, 81, 129);    background-repeat: no-repeat;    background-size: cover;    filter: blur(4px);  
}
 .page_header{
   display: none; 
}
.page {
    height: 85vh;
    z-index: 1;
    margin: 2% 0;
    /* height: 310px; */
    background: white;
    padding: 2%;
    width: 90%;
    border-radius: 15px;
    border: 3px solid rgb(100 116 154);
    position: fixed;
    top: 3%;
    left: 5%;
    overflow-y: scroll;
    display: block !important;
}
 .page_footer{
   display: none; 
}
 .instruction {
    font-size: 17px;     margin: 1% 0;  
}
    .submit_div {
  display: none;    z-index: 1; 
}
  .rank_drag_container_label {
    background-color: #3d5181;     border-radius: 5px;     color: white; 
}
   @media only screen and (max-width: 768px)  {
    *{
       font-size: 14px !important;    
}
    div#send {
       width: 45px;    
}
    textarea#user_resp{
       width: 100%;        padding: 2% 0 0 2%;        height: 30px;        
}
    .footer{
       display: none;    
}
    #send::before {
              width: 7%;        height: 4%;               margin: 1.5% 0 0 1.7%;    
}
    .question {
       padding: 0px 0px !important;        width: 95% !important;     
}
div#prog_bar {
   width: 86%;
   margin: 0% 0px 0% 0%;
   top: 4.5%;
}

    .header2, .question_text {
    margin: 15% auto 0; 
}
 .question_body, .header2{
    width: 90%; 
}
 #logo {
       margin: 4% 0 0%;     position: absolute;     right: unset; 
}
 .bottom-right {
    width: 100%;     position: static;  
}
 .question_error_box {
      left: 20%;     z-index: 6;     top: 3%; 
}
 textarea {
    width: 95% !important; 
}
 .header2, .question_body {
     font-size: 19px !important; 
}
 .instruction{
    font-size: 12px !important; 
}

#page {
   padding: 0px 10px;
   width: 98% !important;
   left: 1%;
   /* overflow-x: hidden; */

}

.ins {
   display: block;
   margin: 0 0 5% 0;
}

.inner_table td {
   padding: 2px;
}

.checkbox, .checkboxselected, .radiobox, .radioboxselected {
   width: 17px;
   height: 17px;
}

.col_label_cell .options, .row_label_cell .options {
   font-size: 10px !important;
}
 
}


 div.page, div#previous_button, div#next_button{
visibility: visible !important;
}