/**
 * @license
 *
 * Font Family: Switzer
 * Designed by: Jérémie Hornus
 * URL: https://www.fontshare.com/fonts/switzer
 * © 2022 Indian Type Foundry
 *
 * Font Styles:
 * Switzer Variable(Variable font)
 * Switzer Variable Italic(Variable font)
 * Switzer Thin
 * Switzer Thin Italic
 * Switzer Extralight
 * Switzer Extralight Italic
 * Switzer Light
 * Switzer Light Italic
 * Switzer Regular
 * Switzer Italic
 * Switzer Medium
 * Switzer Medium Italic
 * Switzer Semibold
 * Switzer Semibold Italic
 * Switzer Bold
 * Switzer Bold Italic
 * Switzer Extrabold         
 * Switzer Extrabold Italic
 * Switzer Black
 * Switzer Black Italic
 *
*/


/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 400.0;
*
* available axes:

* 'wght' (range from 100.0 to 900.0)

*/

@font-face {
    font-family: 'Switzer-Variable';
    src: url('../fonts/Switzer-Variable.woff2?v=1684484256') format('woff2'),
         url('../fonts/Switzer-Variable.woff?v=1684484256') format('woff'),
         url('../fonts/Switzer-Variable.ttf?v=1684484256') format('truetype');
         font-weight: 100 900;
         font-display: swap;
         font-style: normal;
  }
  
  
  /**
  * This is a variable font
  * You can controll variable axes as shown below:
  * font-variation-settings: 'wght' 400.0;
  *
  * available axes:
  
  * 'wght' (range from 100.0 to 900.0)
  
  */
  
  
  
  
  @font-face {
    font-family: 'Switzer-Thin';
    src: url('../fonts/Switzer-Thin.woff2?v=1684484256') format('woff2'),
         url('../fonts/Switzer-Thin.woff?v=1684484256') format('woff'),
         url('../fonts/Switzer-Thin.ttf?v=1684484256') format('truetype');
         font-weight: 100;
         font-display: swap;
         font-style: normal;
  }
  
  @font-face {
    font-family: 'Switzer-Extralight';
    src: url('../fonts/Switzer-Extralight.woff2?v=1684484256') format('woff2'),
         url('../fonts/Switzer-Extralight.woff?v=1684484256') format('woff'),
         url('../fonts/Switzer-Extralight.ttf?v=1684484256') format('truetype');
         font-weight: 200;
         font-display: swap;
         font-style: normal;
  }
  
  @font-face {
    font-family: 'Switzer-Light';
    src: url('../fonts/Switzer-Light.woff2?v=1684484256') format('woff2'),
         url('../fonts/Switzer-Light.woff?v=1684484256') format('woff'),
         url('../fonts/Switzer-Light.ttf?v=1684484256') format('truetype');
         font-weight: 300;
         font-display: swap;
         font-style: normal;
  }
  
  @font-face {
    font-family: 'Switzer-Regular';
    src: url('../fonts/Switzer-Regular.woff2?v=1684484255') format('woff2'),
         url('../fonts/Switzer-Regular.woff?v=1684484256') format('woff'),
         url('../fonts/Switzer-Regular.ttf?v=1684484256') format('truetype');
         font-weight: 400;
         font-display: swap;
         font-style: normal;
  }
  
  @font-face {
    font-family: 'Switzer-Medium';
    src: url('../fonts/Switzer-Medium.woff2?v=1684484256') format('woff2'),
         url('../fonts/Switzer-Medium.woff?v=1684484255') format('woff'),
         url('../fonts/Switzer-Medium.ttf?v=1684484256') format('truetype');
         font-weight: 500;
         font-display: swap;
         font-style: normal;
  }
  
  @font-face {
    font-family: 'Switzer-Semibold';
    src: url('../fonts/Switzer-Semibold.woff2?v=1684484256') format('woff2'),
         url('../fonts/Switzer-Semibold.woff?v=1684484255') format('woff'),
         url('../fonts/Switzer-Semibold.ttf?v=1684484256') format('truetype');
         font-weight: 600;
         font-display: swap;
         font-style: normal;
  }
  
  @font-face {
    font-family: 'Switzer-Bold';
    src: url('../fonts/Switzer-Bold.woff2?v=1684484256') format('woff2'),
         url('../fonts/Switzer-Bold.woff?v=1684484256') format('woff'),
         url('../fonts/Switzer-Bold.ttf?v=1684484256') format('truetype');
         font-weight: 700;
         font-display: swap;
         font-style: normal;
  }
  
  @font-face {
    font-family: 'Switzer-Extrabold';
    src: url('../fonts/Switzer-Extrabold.woff2?v=1684484256') format('woff2'),
         url('../fonts/Switzer-Extrabold.woff?v=1684484255') format('woff'),
         url('../fonts/Switzer-Extrabold.ttf?v=1684484256') format('truetype');
         font-weight: 800;
         font-display: swap;
         font-style: normal;
  }
  
  @font-face {
    font-family: 'Switzer-Black';
    src: url('../fonts/Switzer-Black.woff2?v=1684484256') format('woff2'),
         url('../fonts/Switzer-Black.woff?v=1684484256') format('woff'),
         url('../fonts/Switzer-Black.ttf?v=1684484256') format('truetype');
         font-weight: 900;
         font-display: swap;
         font-style: normal;
  }
  
 
body *:not(.fa,.fas) {font-family: 'Switzer-Regular';  font-weight: 400;}
body {
    background: url('../images/OS_bluebg_Icon_V04-02_2.png') !important;
    background-size: 20% !important;
    background-position: top center !important;
}
.created-paper-list{
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    padding: 25px;
    background: #c5e3e3;
    border-radius: 15px;
    margin: 25px auto;
    color: #000000;
}

.created-paper-list table#demo_table{color:#000000;border-collapse: collapse;
    width: 100%;}
.created-paper-list table#demo_table thead{background:#1f87c8;color:#ffffff;}

.created-paper-list table#demo_table td, .created-paper-list table#demo_table th {
    border-color: #ffffff;
    padding: 8px;
  }
.created-paper-list table#demo_table tr:hover {background-color: #1f87c8;color: #ffffff;}
.created-paper-list table#demo_table tr:hover .btn-info{background-color: #ffffff;color:#1f87c8;}

.created-paper-list table#demo_table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background:#1f87c8;
    color:#ffffff;
  }
  .created-paper-list table#demo_table th {
    border-bottom: none;
  }
  .page-item.active .page-link{background-color: #1f87c8; border-color: #1f87c8; color:#ffffff !important;}
  .page-link {color:#1f87c8 !important;}
  .btn-info{background-color: #1f87c8; border-color: #1f87c8;}
  #fetch_topics{background-color: #ee3539; border-color: #ee3539;}
  #get_Chapter{background-color: #ee3539; border-color: #ee3539;}
  #fetch_quiz_question{background-color: #ee3539; border-color: #ee3539;}
  .text-blue{color:#1f87c8 !important;}
  .text-bold{font-family: 'Switzer-Bold' !important;  font-weight: 700 !important;}
  .bg-light-blue{background: #c5e3e3 !important; border-color: #c5e3e3 !important; color:#000000 !important;}

  input[type=checkbox] {
    position: relative;
      border: 2px solid #000;
      border-radius: 2px;
      background: none;
      cursor: pointer;
      line-height: 0;
      margin: 0 .6em 0 0;
      outline: 0;
      padding: 0 !important;
      vertical-align: text-top;
      height: 20px;
      width: 20px;
      -webkit-appearance: none;
    opacity: .5;
  }
  
  input[type=checkbox]:hover {
    opacity: 1;
  }
  
  input[type=checkbox]:checked {
    background-color: #000;
    opacity: 1;
  }
  
  input[type=checkbox]:checked:before {
    content: '';
    position: absolute;
    right: 50%;
    top: 50%;
    width: 4px;
    height: 10px;
    border: solid #c5e3e3;
    border-width: 0 2px 2px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
    
  }
.bg-green{background:#077145; color:#ffffff;}
.logo.login-page img{max-width: 200px;}
.text-red{color: #ee3539;}
legend.text-blue{font-size: 18px;}
.bg-red{background:#ee3539; color:#ffffff;}
button:disabled{background: #b2a88f !important; border: #b2a88f !important; color: #ffffff !important; opacity: 1 !important; cursor: not-allowed !important;}
@keyframes shake {
  0% {
    margin-left: 0rem;
  }
  25% {
    margin-left: 0.5rem;
  }
  75% {
    margin-left: -0.5rem;
  }
  100% {
    margin-left: 0rem;
  }
}

input:invalid {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.6rem #ff000033;
}
.quantity-result.sticky{position: sticky; top: 0px; z-index: 99;}
.bg-blue, .bg-blue:hover{background-color: #1f87c8; border-color: #1f87c8; color: #ffffff;}
/* .modal_btn{margin-right: 699px;} */
#myModal_exit .modal-dialog-centered {position: absolute; left:0; right: 0; top:0; bottom:0; display: flex; justify-content:center; align-items:center; margin:0; transform:none; max-width:100%}
    #myModal_exit.modal.fade .modal-dialog {transform:none;}
    #myModal_exit .modal-content {max-width: 550px; background: rgb(252, 185, 0); border-radius: 30px;}
    #myModal_exit .modal-header {background: none;border-bottom:none;}
    #myModal_exit .modal-header .close, #myModal_exit .modal-header button.close {width:35px; height:35px; border-radius: 100%; display: flex; justify-content:center; align-items:center; background: #ee3539 !important; color: #fff !important; opacity: 1; right:20px; top:20px; position: absolute;}
    #myModal_exit .modal-title {color: #1f87c8; font-size: 26px;}
    #myModal_exit .form-group label {font-weight: 500; color: rgb(0, 0, 0); font-size: 16px;}
    #myModal_exit .form-check {position: relative; padding-left: 0;}
    #myModal_exit .form-check input {position: absolute; left:0; right: 0; top:0; bottom:0; width:100%; height: 100%; opacity:0}
    #myModal_exit .form-check input + label {position: relative; font-weight: 500; color: rgb(0, 0, 0); font-size: 16px; padding-left: 25px;}
    #myModal_exit .form-check input + label::before {content: ''; box-sizing: border-box; border: 1px solid rgb(0, 0, 0); border-radius: 50%; min-width: 18px; min-height: 18px; margin-right: 5px; cursor: pointer; position: absolute; left:0; top:4px;display: block; z-index: 1;}
    #myModal_exit .form-check input:checked + label::before {background: #000;}
    #myModal_exit .form-check input:checked + label::after {content: ''; display: block; width: 6px; height: 10px; margin-top: 2px; margin-left: 5.4px; border-width: 0px 2px 2px 0px; border-style: solid; border-color: white; border-image: initial; transform: rotate(45deg); position: absolute; left:0; top:4px; z-index: 2;}
    #myModal_exit .form-group .form-control {border: 1px solid #000;}
    #myModal_exit .btn.btn-primary {background-color: #1f87c8; color: rgb(255, 255, 255); border-radius: 10px; border-color: #1f87c8; font-weight: 600; font-size: 25px; text-align: center; text-transform: none; text-decoration: none; transition: opacity 0.3s ease 0s; width: 100%; padding: 10px 15px;}
    #myModal_exit .btn.btn-primary:hover {background: #ee3539;}
    #myModal_exit .modal-body {max-height: max-content;}


    #myModal_changepassword .modal-dialog-centered {position: absolute; left:0; right: 0; top:0; bottom:0; display: flex; justify-content:center; align-items:center; margin:0; transform:none; max-width:100%}
    #myModal_changepassword.modal.fade .modal-dialog {transform:none;}
    #myModal_changepassword .modal-content {max-width: 550px; background: rgb(252, 185, 0); border-radius: 30px;}
    #myModal_changepassword .modal-header {background: none;border-bottom:none;}
    #myModal_changepassword .modal-header .close, #myModal_changepassword .modal-header button.close {width:35px; height:35px; border-radius: 100%; display: flex; justify-content:center; align-items:center; background: #ee3539 !important; color: #fff !important; opacity: 1; right:20px; top:20px; position: absolute;}
    #myModal_changepassword .modal-title {color: #1f87c8; font-size: 26px;}
    #myModal_changepassword .form-group label {font-weight: 500; color: rgb(0, 0, 0); font-size: 16px;}
    #myModal_changepassword .form-check {position: relative; padding-left: 0;}
    #myModal_changepassword .form-check input {position: absolute; left:0; right: 0; top:0; bottom:0; width:100%; height: 100%; opacity:0}
    #myModal_changepassword .form-check input + label {position: relative; font-weight: 500; color: rgb(0, 0, 0); font-size: 16px; padding-left: 25px;}
    #myModal_changepassword .form-check input + label::before {content: ''; box-sizing: border-box; border: 1px solid rgb(0, 0, 0); border-radius: 50%; min-width: 18px; min-height: 18px; margin-right: 5px; cursor: pointer; position: absolute; left:0; top:4px;display: block; z-index: 1;}
    #myModal_changepassword .form-check input:checked + label::before {background: #000;}
    #myModal_changepassword .form-check input:checked + label::after {content: ''; display: block; width: 6px; height: 10px; margin-top: 2px; margin-left: 5.4px; border-width: 0px 2px 2px 0px; border-style: solid; border-color: white; border-image: initial; transform: rotate(45deg); position: absolute; left:0; top:4px; z-index: 2;}
    #myModal_changepassword .form-group .form-control {border: 1px solid #000;}
    #myModal_changepassword .btn.btn-primary {background-color: #1f87c8; color: rgb(255, 255, 255); border-radius: 10px; border-color: #1f87c8; font-weight: 600; font-size: 25px; text-align: center; text-transform: none; text-decoration: none; transition: opacity 0.3s ease 0s; width: 100%; padding: 10px 15px;}
    #myModal_changepassword .btn.btn-primary:hover {background: #ee3539;}
    #myModal_changepassword .modal-body {max-height: max-content;}

    .ajax-get-question.sticky { position: sticky; top: 0px; z-index: 99; }
    .btn.btn-secondary.btn-lg.btn-block.bg-blue:hover{color: #fff; background-color: #5a6268; border-color: #545b62;}
    .createSections:hover{color: #fff; background-color: #c82333; border-color: #bd2130;}
    #sectionRulesForm{counter-reset: section_counter;}
    #sectionRulesForm .section{counter-increment: section_counter;}
    #sectionRulesForm .section span.section_counter:before{content: counter(section_counter);}
    #sectionRulesForm .section span.section_counter.alpha:before{content: counter(section_counter, upper-alpha);}

    .steps {
      display: flex;
      list-style: none;
      padding: 0;
    }

    .step {
      position: relative;
      display: flex;
      align-items: center;
    }

    .step:not(:last-child)::after {
      content: '';
      height: 2px;
      width: 347px; /* Adjust the width of the line */
      background-color: #1f87c8; /* Color of the line */
      margin: 0 10px; /* Adjust the spacing between steps */
    }

    .step button {
      width: 80px; /* Adjust the width of the button */
      height: 80px; /* Adjust the height of the button */
      border-radius: 50%;
      border: 2px solid #1f87c8; /* Border color of the button */
      background-color: #fff; /* Background color of the button */
      color: #1f87c8; /* Text color of the button */
      font-size: 14px;
      margin: 0;
      cursor: pointer;
    }

    .step.active button {
      background-color: #ee3539; /* Background color of the active button */
      color: #fff; /* Text color of the active button */
    }
    
    .form-check-label.custom_arrow{position: relative;}
    .form-check-label.custom_arrow > input{position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0;}
    .form-check-label.custom_arrow > input + span{display: block; padding-left: 30px; position: relative;}
    .form-check-label.custom_arrow > input + span i{position: absolute; left: 0; top: 0;}
    .form-check-label.custom_arrow > input:checked + span i{transform: rotate(90deg);}

    /* .editable-field {
      position: relative;
  }
  
  .form-control.section_counter_shown[disabled] {
      background-color: #fff;
      border: none;
      padding: 0;
  }
  
  .editable-field .edit-icon {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      cursor: pointer;
      color: blue; 
  } */

  /* .editable-field {
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    color: inherit;
}

.editable-field:disabled {
    color: inherit;
    cursor: default;
}

.editable-field:focus {
    border: 1px solid blue; 
} */

.editable-field-wrapper {
  position: relative;
}

.editable-field {
  border: none;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  color: inherit;
  padding-right: 30px; /* Add space for the edit icon */
}

.edit-icon {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999; /* Adjust color as needed */
}

.editable-field:focus {
  border: 1px solid blue; /* Example border color when focused */
}

form:not(#exit_popup_form, #changepassword_popup_form) {
  background-color: #f9f9f9; /* Light gray background */
  padding: 20px; /* Adding some padding for spacing */
  border-radius: 8px; /* Rounded corners */
}
  
b, strong{font-weight: bolder !important;}  

    @media only screen and (max-width: 767px) {
        #myModal_exit .modal-content {max-width: 100%;}  
        #myModal_exit .modal-title {font-size: 20px;}
        #myModal_exit .form-check input + label, .form-group label {font-size: 13px;}

        #myModal_changepassword .modal-content {max-width: 100%;}  
        #myModal_changepassword .modal-title {font-size: 20px;}
        #myModal_changepassword .form-check input + label, .form-group label {font-size: 13px;}

        .modal_btn .share_btn{ max-width: 100%; }
        .board-class-subject { min-height: calc(100vh - 490px) !important;  }
        
    }
    @media only screen and (max-width: 812px) and (orientation: landscape) {
        #myModal_exit .modal-body {max-height: calc(100vh - 70px);}
        #myModal_changepassword .modal-body {max-height: calc(100vh - 70px);}
    }

    /* Media Queries for Responsiveness */

@media (max-width: 768px) {
  .board-class-subject {
      padding: 10px;
  }
  .board-class-subject select {
      margin-bottom: 5px;
  }
  .created-paper-list {
      padding: 10px;
  }
  .created-paper-list h4 {
      font-size: 18px;
  }
}

@media (max-width: 576px) {
  .modal_btn button {
      font-size: 14px;
  }
  .dropdown img {
      width: 20px;
      max-width: 100%;
  }
  .footer {
      padding: 5px 0;
  }
  .QA__Card.questions_options .card-header{padding-top:35px;}
}

@media (max-width: 400px) {
  .modal_btn button {
      font-size: 12px;
  }
  .board-class-subject select {
      font-size: 14px;
  }
  .created-paper-list h4 {
      font-size: 16px;
  }
}

header .dropdown-menu li a{color:#1f87c8;}

#chapter_topic_question .paper-options {margin-top: 130px;}

@media (max-width: 768px) {
  #chapter_topic_question .paper-options {margin-top: 25px;}
}

/* Add more media queries as needed for specific breakpoints */