@import url('https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Satisfy&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    background: rgb(245, 245, 245);
}

.container{
    width: 70%;
    margin: auto;
    
}

.container-wide{
    width: 90%;
    margin: auto;
}




a {
    text-decoration: none;
}

nav.main-nav-container{
    position: relative;
    display: flex;
    padding: 1rem;
    justify-content: space-between;
    margin-top: 8rem;
    border: 1px solid rgb(11, 28, 72, 0.3);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    background: #D3DEF2;
}

footer{
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid rgb(11, 28, 72, 0.3);
    border-top: 0;
    background: #D3DEF2;
}

.slogan{
    flex: 1;
    color: #524e4e;
}

.information{
    flex: 1;
}
.contact-us{
    flex: 1;
}

nav img{
    flex: 4; 
}

.logo-second{
    position: relative;
}

.logo-second img{
    position: absolute;
    width: 350px;
    bottom: 75px;
    right: 0;
}

nav ul.main-nav{
    flex: 4;
    position: absolute;
    align-self: flex-end;
    align-items: flex-end;
    list-style-type: none;
    right: 0;
    margin: 0;
    padding: 0;
    padding-bottom: 1rem;
    overflow: hidden;
}
 
nav ul.main-nav li {
    float: left;
}

 

nav ul.main-nav li a {
    font-size: 1.2em;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: all .2s ease-in-out;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

nav ul.main-nav li a:hover {
    color: rgb(30, 91, 133); 
}


 
a , a:visited {
 color: #4472C4;
 transition: all .2s ease-in-out;
}

a:hover{
    color: rgb(30, 91, 133); 
}



#main-body{
    display: flex;
    padding-right: 2rem;
    padding-left: 2rem;
    border: 1px solid #cccccc;
    background: #fff;
    border-bottom: 0;
}

#main-body-question{
    display: flex;
    border: 1px solid #cccccc;
    background: #fff;
    border-bottom: 0;
}

#privacy-body{
    padding: 2rem;
    border: 1px solid #cccccc;
    background: #fff;
    border-bottom: 0;
}

#privacy-body h2{
    margin: 2rem 0 1rem 0;
}

#privacy-body h3{
    margin: 1rem 0 1rem 0;
}

#privacy-body p{
    line-height: 22px;
    padding: 1rem 0 1rem 0;
}

#about-body{
    text-align: center;
    padding: 2rem;
    border: 1px solid #cccccc;
    background: #fff;
}

#about-body h2{
    font-size: 42px;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

#about-body p {
    font-size: 18px;
    line-height: 28px;
    margin: 0 auto;
    width: 80%;
}

.showcase-top{
    padding: 1rem;
    margin: 0;
    margin-top: 3rem;
    margin-bottom: 5rem;
    padding-left: 0 !important;
}

.showcase-top h2{
    font-family: 'Satisfy', serif;
    font-size: 3.8em;
    text-decoration: underline;
    -ms-transform: rotate(-5deg); /* IE 9 */
    transform: rotate(-5deg);
}

.showcase-item-container{
    margin-top: 4rem;
    display: flex;
    justify-content: space-between;
}

 
.showcase-item .card{
    border: 1px solid #ccc;
    padding: 2px;
    margin-bottom: 1rem;
}

.showcase-item h3.showcase-title{
    border-bottom: 4px solid #000;
    padding-bottom: 0.3rem;
    text-align: center;
}

.main-content-left{
    flex: 4;
    padding-right: 1rem;
    border-right: 1px solid rgb(204, 204, 204, 0.6);

}

.main-content-rigth{
    flex: 2;
    margin-left: 1rem;
    margin-top: 2rem;
}

.main-content-rigth h2{
    text-align: center;
}

.clear-fix{
    clear: both;
}

.div-spacer{
    margin-top: 3rem;
}

.main-title{
    font-size: 32px;
    font-family: 'Bitter', serif;
}

.sub-title{
    margin-top: 0.2em;
    font-family: 'Satisfy', cursive;
    font-size: 22px;
}

.logo-title-container{
    display: flex;
}

.logo-title-container img{
     width: 550px;  
}

#section-banner{
    width: 100%;
}

#section-banner img{
   width: 100%;
}

.activity-content h2{
    font-family: 'Bitter', serif;
}

.section-activity-left{
    display: flex;
    margin-top: 1rem;
    width: 100%;
    padding: 1rem;
    color: #000;
    transition: all 2s ease-in-out;
}

.section-activity-left:hover{
    border: 1px solid rgba(204, 204, 204, 0.8);
}
 

.section-activity-left img{
    padding-right: 20px;
    width: 66px;
    height: 131px;
}

.section-activity-left h2{
    padding-bottom: 1rem;
    color: #0563C1;
    text-decoration: underline;
    line-height: 1rem;
}

.section-activity-left p{
    line-height: 1.5rem;
}


.section-activity-rigth{
    display: flex;
    margin-top: 1rem;
    width: 100%;
    padding: 1rem;
    color: #000;
    transition: all 2s ease-in-out;
}

.section-activity-rigth:hover{
    border: 1px solid rgba(204, 204, 204, 0.8);
}
 

.section-activity-rigth img{
    flex: 1;
    padding-left: 20px;
    width: 66px;
    height: 131px;
}

.section-activity-rigth h2{
   
    padding-bottom: 1rem;
    color: #0563C1;
    text-decoration: underline;
}

.search-container{
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.search-container .search-input input[type=text] {
    width: 100%;
    padding: 6px;
    margin-top: 8px;
    font-size: 17px; 
    border: 1px solid #ccc;
}

.search-input{
    display: flex;
}

.search-container button{
 
    padding: 6px 10px;
    margin-top: 8px;
    margin-right: 16px;
    background: #77B800;
    font-size: 17px;
    border: none;
    cursor: pointer;
}

.search-container label{
    font-size: 22px;
}

 
.section-activity-rigth p{
    line-height: 1.5rem;
}

.information ul{
    margin-top: 1rem;
    list-style: none;
    line-height: 1.6rem;
    margin-bottom: 1rem;
}

.information ul li a{
    text-decoration: none;
}

.contact-us{
    margin-right: 2rem;
}

.contact-us ul {
    margin-top: 1rem;
    list-style: none;
    line-height: 1.6rem;
    margin-bottom: 1rem;
}

 

.float-rigth{
    float: right;
}

.beta-view{
    width: 100%;
    margin-top: 1rem;
    background: #FFEE80;
    padding: 0.7rem 2rem 2rem 1rem;
    border-left: 15px solid #DDCC60;
}

.beta-view h2{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.beta-content {
    width: 80%;
    padding-left: 1rem;
    font-size: 19px;
    line-height: 25px;
}

.adobe-reader {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.adobe-reader  h2{
    text-align: left !important;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.adobe-content {
    margin-top: 1rem;
}

.adobe-reader img{
    width: 150px;
    margin-top: 1rem;
}



.login-form{
    background: rgba(68, 114, 196, 0.2);
    border: 1px solid #cccccc;
    padding: 2rem 1rem 2rem 1rem;
}

.login-form a{
    text-decoration: none;
}

.table-container-login{
    padding: 1rem;
}

.table-container-login h2{
    font-size: 1.3em;
}

.display-table{
    padding: 1rem;
}

.display-table th, .display-table td{
    padding: 0.2rem 0.3rem;
    font-size: 1.5em;
}

 .login-form table{
    border-collapse: collapse;
    width: 100%;
    
  }
  
  .login-form  td, .login-form  th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  .login-form  tr:nth-child(even){background-color: #fff;}
  .login-form  tr:nth-child(odd){background-color: #fff;}
  
  .login-form  tr:hover {background-color: #fff8f8;}
  
  .login-form  th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    color: #524e4e;
    font-weight: lighter;
  }

 

.form-group label , .form-group input{
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    
}

.form-group label{
    font-size: 1em;
    font-weight: bold;
}

.form-group input{
    text-align: center;
    width: 100%;
    height: 45px;
    padding: 12px 5px 12px 5px;
    font-size: 20px;
   
}

.form-group input:active, .form-group input:focus{
   
    border: 1px solid rgb(17, 55, 150);
}

button {
    border: none;
}

button.btn, a.btn {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
} 

.btn-primary{
  
    color: #fff;
    background-color: #3498DB;
    border-color: #3498DB;
  
}

.btn-danger{
  
    color: #fff;
    background-color: #be1f0d !important;
    border-color: #be1f0d !important;
    transition: all .2s ease-in-out;
}

.btn-danger:hover{
    opacity: 0.8;
}

.btn-primary:hover{
 
    background-color: rgb(37, 136, 202);
    border-color: rgb(42, 135, 197);
  
}

.btn-secondary {
    color: #fff;
    background-color: #0977c0;
    border-color: #0977c0;
    border-radius: 0 !important; 
    padding: 7px 30px 7px 30px !important;
}

.btn-secondary:hover {
 
    background-color: #0764a1;
     
}


.btn-block{
    width: 100% !important;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.btn-big{
    height: 60px;
    font-size: 1.4em !important;
    letter-spacing: 3px !important;
}

.btn-small {
    padding: 0.3em 0.7em !important;
    font-size: 0.8em !important;
}

.activity-main-content{
    padding: 1rem 0 1rem 0;
    width: 100%;
}

.activity-main-content h2{
    font-size: 2em;
}

.table-container{
    width: 100%;
    margin-top: 1rem;
}

.questions_container{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.table-condense{
    flex: 0 1 calc(18% - 0px); /* <-- adjusting for margin */
    margin-top: 1rem;
    margin-left: 1rem;

}

.table-center{
    width: 50%;
    margin: 0 auto;
    margin-top: 1rem;
}

.table-center-80 {
    width: 80%;
    margin: 0 auto;
    margin-top: 1rem;
}

 

.table {
    border-collapse: collapse;
    width: 100%;
  }
  
  .table td, .table th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  .table tr:nth-child(even){background-color: #fff;}
  .table tr:nth-child(odd){background-color: #fff;}
  
  .table tr:hover {background-color: #fff8f8;}
  
  .table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #3498DB;
    color: white;
  }

.bordered {
    border: 2px solid #000000 !important;
    padding: 0;
    font-size: 19px;
}

.bordered-3 {
    border: 3px solid #000000 !important;
    padding: 0;
    font-size: 19px;
}

.answer_bordered {
    background: #fff5b3;
}

.multi_input, .division_input {
    height: 35px;
    font-size: 20px;
}

  /* utilities */
  .w-100 {
      width: 100% !important;
  }

  .w-50 {
    width: 50% !important;
  }

  .mt-1 {
      margin-top: 1rem;
  }

  .mt-2 {
      margin-top: 2rem;
  }

  .mt-5 {
      margin-top: 5rem;
  }

  .mb-1 {
      margin-bottom: 1rem !important;
  }

  .text-center{
      text-align: center !important;
  }

  .text-right{
      text-align: right !important;
  }

  .text-white{
      color: #f2f2f2 !important;
  }

  .text-yellow{
    color: yellow !important;
  }

  .sub-text{
      color: #4472C4;
      line-height: 22px;
  }
  .p-1 {
      padding: 1rem !important;
  }

  .light-blue{
      background-color: #89ccf8 !important;
      color: #000 !important;
  }

  .bg-blue {
      background-color: #0977c0 !important;
  }

  .bg-yellow{
      background-color: yellow !important;
      color: #000 !important;
  }

  .bg-red{
      background-color: red !important;
       
  }

  .bg-flesh{
      background-color: #FCE4D6;
  }


  .bold-2{
      font-weight: bold;
      font-size: 22px;
  }

  .fs-22{
    font-size: 22px;
  }

  .div-block {
     display: flex;
     flex-wrap: wrap;
  }

  .line {
        width: 100%;
        height: 2px;
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        margin-bottom: 0.8rem;
    }

  .btn-group-menu{
      margin-bottom: 1rem;
  }

  .btn-center{
      justify-content: center !important;
  }

  .small {
      font-size: 52px !important;
  }

.alert {
    padding: 1rem 0 1rem 0;
    text-align: center;
    width: 100%;
    margin-bottom: 1rem;
    font-size: 13px !important;
}

.alert-danger{
    background: #be1f0d;
    color: #fff;
}

.alert-warning{
    display: block !important;
    background: #e27d1e;
    color: #fff;
}

.alert-success{
    display: block !important;
    background: #5b970d;
    color: #fff;
}

.clear-fix{
    clear: both !important;
}

#hideMe{

    width: 100%;
    transition: all .3s ease-out;
    animation-name: fade;
    animation-delay: 2s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 1;
    align-self: center;
}

@keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        overflow: hidden;
        display: none;
        visibility: hidden;
        position: absolute;
    }
  }
  

  .form-control {
      margin-top: 1rem;
      width: 50%;
      height: 45px;
      font-size: 28px;
      padding: 5px;
  }

  /* Questions */
  .question-container{
      margin-top: 2rem;
      padding: 1rem;
  }

  .question_item{
      padding: 1rem;
      border: 1px solid rgb(204, 204, 204, 0.6);
  }

.hide{
    display: none !important;
}

#message{
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}



.btn-container{
    margin: 0 auto;
    margin-top: 1rem;
    padding: 1rem;
    width: 50%;
    
}

/* SEarch */

/* search form */
.example{
    padding: 1rem;
    display: flex;
    flex-direction: row;
    width: 30%;
}

.example input[type=text] {
    outline: none;
    padding: 10px;
    font-size: 17px;
    border: 1px solid rgba(33, 37, 41, 0.2);
    background: #fff;
    flex: 4;
    height: 42px;
  }
  
  .example button {
    flex: 1;
    outline: none;
    border: none;
    padding: 10px;
    background: #3498DB;
    color: white;
    font-size: 17px;
    cursor: pointer;
    height: 42px;
  }
  
  .example button:hover {
    opacity: 0.9;
  }
  
  .example::after {
    content: "";
    clear: both;
    display: table;
  }

.text-red{
    color: #C00000 !important;
}

.text-black {
    color: #000 !important;
}

.text-green{
    color: #008000 !important;
}

input[type="number"] {
    text-align: center;
  }

.disabled{
    pointer-events: none;
    opacity: 0.4;
}


.banner_container{
    display: grid;
    grid-template-columns: 80% 20%;
}

.banner_container img{
    width: 100%;
}

.right-content-banner{
    display: grid;
    padding-top: 1rem;
}

.right-content-banner div{
    padding-left: 1rem;
    margin-top: 0.7rem;
}

.right-content-banner div span{
    width: 100%;
}

.underline{
    display: table-cell; border-bottom: 1px solid black;
}

.pd-2{
    padding-bottom: 1rem;
}

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
     background-color: rgba(0,0,0, 0.3); 
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    transition: all 2s ease-in;
  }

#overlay h1{
    text-align: center;
    font-size: 22em;
    color: rgb(247, 247, 247);
    text-shadow: 2px 2px #524e4e;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin: 0 auto;
    margin-top: 10%;
    z-index: 3;
}

#loading {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
     background-color: rgba(0,0,0, 0.6); 
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    transition: all 2s ease-in;
  }

#loading img{
    width: 350px;
    margin: 50% 40%;
    margin-top: 10%;
    z-index: 3;
}


.correct{
    background: #008000 !important;
    color: #fff;
    font-weight: bold;
}

.next{
    background: #d6b709 !important;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
}

.lit{
    border: 3px solid #008000 !important; 
}

.wrong{
    background: #C00000 !important;
    color: #fff;
    font-weight: bold;
}
 

.flash-sub-container {
    width: 100%;
    height: auto;
    padding: 1rem;
    display: flex;
    border:  1px solid rgba(82, 78, 78, 0.3);
}

#status{
    padding: 1rem;
}

.student-answers {
    flex: 1;
}
 
.flash-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(211,222,242);
    background: linear-gradient(0deg, rgba(211,222,242,1) 0%, rgba(57,183,227,1) 100%, rgba(220,242,242,0.7960317916228992) 100%);
    padding: 0.5rem 0 0 0.5rem;
    border-bottom: 3px solid #4472C4;
}

.flash-footer-container{
    background: rgb(211,222,242);
    background: linear-gradient(0deg, rgba(211,222,242,1) 0%, rgba(57,183,227,1) 100%, rgba(220,242,242,0.7960317916228992) 100%);
    padding: 1rem;
    border-top: 3px solid #4472C4;
    margin-bottom: 2rem;
    color: #524e4e;
}

 
.settings-container label{
    padding-right: 20px;
}

.settings-container select{
    padding: 5px;
}

.student-answers {
    flex: 1;
    padding-right: 1rem;
}

.student-answers table{
    border-collapse: collapse;
    width: 100%;
}

.student-answers table, .student-answers th , .student-answers td{
    border: 1px solid rgba(0,0,0, 0.3);
    padding: 0.6rem;
}

.student-answers table th {
    background: #3498DB;
    color: #fff;
   
}

.student-questions {
    position: relative;
    flex: 2;
    height: auto;
    border: 1px solid rgba(0,0,0, 0.3);
   
}

.question-container {
    display: inline-block;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


.answer-container {
    width: 100%;
    background: #ddd;
    position: absolute;
    bottom: 0;
    display: flex;
    padding: 1rem;
    border-top: 3px solid #4472C4;
    
}

 
.btn-group{
    display: flex;
    align-items: center;
}

.btn-group .btn{
    margin-right: 1rem;
    transition: transform 2s;
}

.btn:active{
    transform: scale(0.9);
}

.input-area label{
    font-size: 32px;
}

.input-area input {
    margin-right: 10px;
    width: 300px;
    height: 50px;
    padding: 1rem;
    font-size: 26px;
    border: 1px solid rgba(0,0,0, 0.3);
}

.c_answers{
    padding-top: 0.7rem;
    border-top: 2px solid rgba(204, 204, 204, 0.8);
}

.f_number{
    font-size: 7em;
}
 

.img-container-abacus .abacus_img{
    display: block;
    max-width: 230px;
    max-height: 250px;
    width: auto;
    height: auto;
}

.img-container-banner img{
    width: 420px;
}

.constant-tbody td{
    padding: 0.8rem 1rem 0.8rem 1rem;
}

.constant-td{
    border: 1px solid #000 !important;
}

.insert_base {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

.insert_answer {
    width: 100%;
    height: 100%;
    border: none;
    background: #FCE4D6;
    
}

/* autogenerator */

.auto-navbar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 93%;
    margin: 0 auto;
    margin-top: 1rem;
    padding: 0.5rem 0 0 0.5rem;
}

.auto-container-main{
    border-radius: 20px;
    padding-bottom: 0.8rem;
    background: rgba(52, 152, 219, 0.3);
    margin-bottom: 1rem;
}

.auto-container{
    display: flex;
    height: 100%;
   
    padding: 0 3rem 1rem 3rem;
}

#activity_banner{
    flex: 2;
    padding-left: 20%;
}

#settings-section{
    width: 93%;
    margin: 0 auto;
    border: 2px solid rgba(0,0,0, 0.3);
    margin-bottom: 1rem;
    background: #fff;
 
}

#score-section{
    flex: 1;
    background: #fff;
}

#flas-number-section{
    flex: 3;
    background: #fff;
}

#score-section table{
    border-collapse: collapse;
    width: 100%;
}

#score-section .td-answer{
    background-color: #FCE4D6;
}

#score-section .td-check{
    background-color: red;
}
 
#score-section  table, #score-section  th , #score-section  td{
    border: 1px solid rgba(0,0,0, 0.3);
    padding: 0.6rem;
}

#flas-number-section{
   position: relative;
   border: 2px solid rgba(0,0,0, 0.3);
   margin-left: 1rem;
}

.question_number_container{
    position: absolute;
    left: 1rem;
    top: 1rem;
    font-size: 32px;
}

.number-holder{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8em;
}

#settings-section .header{
    width: 100%;
    background: red;
    text-align: center;
    text-transform: uppercase;
    padding: 0.8rem 0 0.8rem 0;
    font-size: 22px;
    font-weight: bold;
}

.options-container{
    display: flex;
    justify-content: space-between;
    padding: 1.5rem;
}

 

.option-item label{
    display: block;
    width: 80px;
    font-weight: bold;
    margin-bottom: 0.6rem;
}
.option-item select{
    display: block;
    width: 80px;
    font-size: 22px;
}

 .popup{
    animation-delay: 1s;
    animation: popup 0.7s;
    animation-timing-function: ease-in-out;
    -webkit-transition: transform .2s;;
    -moz-transition: transform .2s;;
    -o-transition: transform .2s;;
    transition: transform .2s;;
  }

@keyframes popup {
    from {
         transform: scale(1); 
        -ms-transform: scale(1);  /* IE 9 */
        -moz-transform: scale(1);  /* Firefox */
        -webkit-transform: scale(1); /* Safari and Chrome */
        -o-transform: scale(1);  /* Opera */
    }
    to {
        transform: scale(1.2);
        -ms-transform: scale(1.2);  /* IE 9 */
        -moz-transform: scale(1.2);  /* Firefox */
        -webkit-transform: scale(1.2); /* Safari and Chrome */
        -o-transform: scale(1.2);  /* Opera */
     }
  }


.activity-menu{
    padding: 1rem;
    margin-bottom: 1rem;
}
 
.activity-menu a{
    padding: 0.8rem 1rem 0.8rem 1rem;
    background: #0764a1;
    color: #fff;
}

.activity-menu a:hover{
    opacity: 0.8;
}

/* Register */

.register-form-container{

    padding: 1rem;


}

.register-form-container .form-group label{
    letter-spacing: 2px;
     
}

.register-form-container .form-group input{
    outline: none;
    border: 1px #ddd solid;
    text-align: left !important;
    transition: all .2s ease-in-out;
}

.register-form-container .form-group input:focus, .register-form-container .form-group select:focus{
   border: 2px solid #0764a1;
}

 

.register-form-container .form-group select{
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    outline: none;
    border: 1px #ddd solid;
    width: 100%;
    height: 50px;
    font-size: 22px;
    transition: all .2s ease-in-out;
}

.message-text{
    font-size: 13px;
    letter-spacing: 2px;
}

.register-form-container .form-group input::-webkit-input-placeholder { /* Edge */
    color: #a3a3a3;
    font-size: 15px;
  }
  
.register-form-container .form-group input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #a3a3a3;
    font-size: 15px;
  }
  
.register-form-container .form-group input::placeholder {
    color: #a3a3a3;
    font-size: 15px;
  }

  /* Thank you */
 .thankyou-container{
     margin-top: 2rem;
     padding: 1rem;
 }

 .thankyou-container h2{
     font-size: 3.6em;
     font-family: 'Satisfy', serif;
     text-decoration: underline;
     text-align: center !important;
 }

 .thankyou-container p{
    font-size: 1.2em;
    margin-top: 1rem;
    color: #524e4e;
}

/* Profile */
.profile-main-container{
    width: 100%;
    display: flex;
    flex-direction: row;
}

.side-container{
    flex: 1;
    position: relative;
    height: auto;
    min-height: 100vh;
    min-width: 384px;
    background: #0468a1;
}

.version-container{
    position: absolute;
    bottom: 0;
    text-align: center;
    padding: 1rem;
    width: 100%;
}

.version-container a{
    color: #fff;
    text-align: center !important;
    width: 100%;
    font-size: 12px;
}

.side-container ul{
    width: 100%;
    text-align: center;
    list-style: none;
    margin-top: 2rem;
}

.side-container ul li{
    border-top: 1px solid #fff;
}

.side-container ul li.active{
    background: #000;
}


.side-container ul li:last-child{
    border-bottom: 1px solid #fff;
}

.side-container ul li:hover{
    background: #000;
    cursor: pointer;
}
 
.side-container ul li a{
    display:inline-block;
    padding: 1rem;
    color: #fff;
    letter-spacing: 3px;
    text-transform: uppercase;
    width: 100%;
}


.main-content{
    flex: 4;
    height: auto;
    background: #fff;
    
}

.main-content .profile-nav{
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    background: #0677BA;
    border-bottom: 1px solid #3498DB;
    box-shadow: 0 2px 2px -2px gray;
}

.side-container .banner-profile{
    width: 100%;
}

.side-container .banner-profile img{
    width: 100%;
    height: auto;
}

.profile-nav {
    flex: 4;
    display: flex;
    width: 100%;
}

.profile-nav .profile-menu {
   padding: 1rem 0 1rem 1rem;
}

.profile-nav .profile-menu a{
    color: #fff;
    padding: 0 1rem 0 1rem;
}

.students-main-container{
    padding: 1rem;
    width: 90%;
    margin: 0 auto;
}

.pagination-link {
	text-align: center;
	margin-top: 4rem;
	margin-bottom: 4rem;
}

.pagination-link strong {
	padding: 8px 16px;
	border: 1px solid rgb(238, 238, 238, 0.3);
	background-color: #0077b5;
	color: white;
}

a.pagination-link {
	padding: 8px 16px;
	border: 1px solid rgb(238, 238, 238, 0.3);
	text-decoration: none;
	color: #524e4e;
}

a.pagination-link:hover {
	background-color: #0077b5;
	color: white;
}

/* Teachers form */

.students-main-container .form-group input{
    text-align: left !important;
    border: 1px solid #ccc;
}

.students-main-container .form-group input:focus, .students-main-container .form-group select:focus{
    text-align: left !important;
    border: 2px solid rgb(68, 114, 196, 0.5);
}

.students-main-container .form-group input::-webkit-input-placeholder { /* Edge */
    color: #a3a3a3;
    font-size: 15px;
  }
  
.students-main-container .form-group input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #a3a3a3;
    font-size: 15px;
  }
  
.students-main-container .form-group input::placeholder {
    color: #a3a3a3;
    font-size: 15px;
  }

.students-main-container  .form-group select{
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    outline: none;
    border: 1px #ddd solid;
    width: 100%;
    height: 50px;
    font-size: 22px;
    transition: all .2s ease-in-out;
}

/* dashboard */
#main-dashboard-content {
    padding: 2rem;
}


#main-dashboard-content h2{
    font-family: 'Satisfy', serif;
    font-size: 3.8em;
    text-decoration: underline;
    text-align: center !important;
}

#main-dashboard-content h3{
    font-size: 1.8em;
    margin-bottom: 1rem;
    margin-top: 1rem;
    text-align: center;
}

/* Techer schedule */
#main-schedule-content {
    padding: 2rem;
}
 
.available, .availables{
    background-color: #5b970d;
    color: #fff;
    cursor: pointer;
}

.available:hover, .availables:hover{
    opacity: 0.8;
}

.taken {
    background-color: #524e4e;
}

.notavailable, .notavailables{
    background-color: #be1f0d;
    color: #fff;
}

.unavailable{
    background-color: #e27d1e;
    color: #fff;
}

.swal2-icon{
    font-size: 25px !important;
}

.swal2-modal {
    border-radius: 0px !important;
    width: 35em !important;
}



.select-teacher-container h2{
    font-family: 'Satisfy', serif;
    font-size: 3.2em;
    text-decoration: underline;
    text-align: center !important;
}

.teachers-main-container{
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#main-teacher-select-container{

    padding: 2rem;
}

#main-teacher-select-container h2{
    font-family: 'Satisfy', serif;
    font-size: 3.2em;
    text-decoration: underline;
    text-align: center !important;
}


.select-teacher-container .teacher-item{
        position: relative;
        width: 25.5%;
        height: auto;
        border: 1px solid rgba(204, 204, 204, 0.8);
        padding: 1rem;
        margin: 2px;
}

#main-profile-content .teacher-item{
    position: relative;
    width: 25.5%;
    height: auto;
    border: 1px solid rgba(204, 204, 204, 0.8);
    padding: 1rem;
    margin: 2px;
}

.info-overlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 119, 181, 0.8);
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.info-overlay:hover{
    opacity: 1;
}

.info-schedule{
    padding: 1rem;
}

.info-overlay p{
    color: #fff;
}

.select-teacher-container .teacher-item .teacher-image-container img{
    width: 100%;
}

.teacher-item .teacher-image-container img{
    width: 100%;
}

.teacher-info-contaier {
    margin-top: 1rem;
}

.teacher-info-contaier h3{
    text-align: center;
    font-size: 1.8em;
}

.sub-info-container{
    margin-top: 1rem;
}

.teacher-info-contaier p{
    text-align: center;
    font-size: 1.1em;
    color: #524e4e;
}

.info-menu-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 40%;
}

.info-menu-container button{
   outline: none;
   color: #fff;
   padding: 1rem 2rem 1rem 2rem;
   background-color: #0764a1;
   border: 1px solid #3498DB;
   margin: 2px;
}

.info-menu-container button:hover{
    cursor: pointer;
    background-color: #05446e;
     
 }

.swal-schedule{
    width: 75em !important;
}

.swal-schedule .table{
    font-size: 14px !important;
}

.student-schedule-container {
    width: 80%;
    margin: 0 auto;
}

/* Immediate Feedback System - Timing Only (No Visual Changes) */

.simple-teacher-display{
    width: 100%;
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
}

.simple-teacher-display .teacher-item-container {
    display: inline-block;
    margin: 1rem;
    flex: 0 1 calc(30% - 8px);
    border: 1px solid rgba(204, 204, 204, 0.6);
    padding: 2rem;
}

h2.main-title-style{
    font-family: 'Satisfy', serif !important;
    font-size: 3.8em !important;
    text-decoration: underline !important;
}


.simple-teacher-display .teacher-image-container img{
    width: 100%;
}

#student_info_month p {
    font-size: 1.2em;
}

.total_count{
    background-color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 50%;
    color: #0077b5;
    font-weight: 600;
    font-size: 0.8em;
}