@import url('https://fonts.googleapis.com/css2?family=Rufina&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova&family=Pathway+Extreme:wght@100&family=Playfair+Display&family=Roboto+Slab:wght@700&display=swap');





.rollcall-container p{
    background-color: white;
    padding:10px 10px 10px 10px;
}
.submit-loading{
    display: none;
}
.Submit-roll-call-container p{
    padding:10px 10px 10px 10px;
    font-size:12px;
    color:green;
    display: none;
}
.select-term-con,.Submit-roll-call-container{
display: inline-block;
width:100%;
background-color: white;
margin-top:2px;
}
.Submit-roll-call-container{
text-align: center;
}
.Submit-roll-call-container button{
padding:10px 10px 10px 10px;
background-color: black;
color:white;
border-color: black;
cursor: pointer;

}
.select-term-input,.select-term-label{
float: left;
padding:10px;
}
.select-term-input select{
padding:10px 10px 10px 10px;
outline: none;
}
.rollcall-container{
margin-top:20px;
width:70%;
margin-left:20%;
}
.rollcall-container table{
width:100%;
text-align:  center;
font-size: 14px;
background-color: white;
}
.rollcall-container table th{
background-color: black;
color:white;

}
.rollcall-container table td,.rollcall-container table th{
border:solid;
padding:4px 4px 4px 4px;
}
@media screen and (min-width:150px) and (max-width:400px){
.rollcall-container{
margin-top:50px;
width:95%;
margin-left:5%;

}
.responsive-menu svg{
margin-left:-15px;
}
}


@media screen and (min-width:400px) and (max-width:900px){
.rollcall-container{
margin-top:50px;
width:95%;
margin-left:5%;

}
.responsive-menu svg{
margin-left:-15px;
}
}

@media screen and (min-width:900px) and (max-width:1200px){
.rollcall-container{
margin-top:50px;
width:75%;
margin-left:22%;

}

}
body{
    padding:0px;
    margin:0px;
font-family: Arial;
font-family: 'Ibarra Real Nova', serif;
font-family: 'Pathway Extreme', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Roboto Slab', serif;

}
.transcript-container{
    display: none;
}
.tab-menu-container a{
    color:white;
    font-size:19px;
}
.tab-menu-container a:last-child{
    color: purple;
}
.tab-menu-container{
    position:fixed;
    display:inline-block;
    width:100%;
    top:0px;
    background-color: purple;
    z-index: 1000;
    border-bottom: solid;
    border-width: 1px;
    border-color:white;
}
.tab-menu-container .menu-item{
    float:left;
    padding-left:20px;
}
.sub-container-menu{
    float:right;
    width:auto;
    position: relative;
    top:1px;
    margin-right:0%;
    width:40%;
   
}
.sub-container-menu  .menu-item{
    position: relative;
    top:9px;
    font-size: 16px;
}
.sub-container-menu  .menu-item:hover{
    color:black
}
.sub-container-logo img{
    width:25px;    
    height:auto;
}
.sub-container-logo span{
    position: relative;
    top:-3px;
    font-size:16px;
    color:white;
}
.create-account{
    float: right;
    padding:10px 6px 10px 6px;
    margin-left:20px;
    background-color: white;
    border-width:3px;
    text-align: center;
    position: relative;
    top:-1px;
    margin-right:10px;
    border-radius: 5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    right:15%;
    box-shadow: 2px 1px 5px 1px rgb(82, 36, 73);
    -webkit-box-shadow: 2px 1px 5px 1px rgb(82, 36, 73);
    -ms-box-shadow: 2px 1px 5px 1px rgb(82, 36, 73);
    -o-box-shadow: 2px 1px 5px 1px rgb(82, 36, 73);
}
.create-account:hover{
    background-color: green;
    color:white;
    
}
.language-form-input{
float:left;
width:70%;

}
.language-form-btn{
    float:left;
    width:30%;
    position:relative;
    top:2px;
}
.sub-container-logo-con-lang select{
padding:3px 3px 3px 3px;
width:100%;
font-size:18px;
font-family: Arial;
outline: none;
}
.sub-container-logo-con-lang form{
    display: inline-block;
    width: 100%;
}
.sub-container-logo-con-lang button{
    padding:4px 3px 3px 3px;
    font-size:14px;
    background-color: white;
    border:none;
}
.translate-input,.translate-button{
    float: left;
    padding-top:4px;
}
.translate-button{
    width:40px;
   
}
.translate-button input{
    height: 30px;
    background-color: white;
    border-color: white;
}
.menu-item-lang{
    display:inline-block;
    width:30%;
    padding:2px 2px 2px;
}
.sub-container-logo-con-lang{
    display:inline-block;
    width:auto; 
    dffloat:left;  
    margin-left:10%;
    position:relative;
 
    border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.sub-container-logo
{

    position: relative;
    float:left;
    top:5px;
}
.home-container{
    position:relative;
    width:100%;
    height:500px;
    margin-top:20px;
    background-image:url('cover2.jpg');
    background-size:fill;
    background-repeat: no-repeat;
    background-position:center;
    padding-bottom:50px;
    overflow: hidden;
}
.auth-body{
    background-image:url('/static/img/boxed-bg.jpg');
    background-attachment: fixed;
    margin:0px;
    padding:0px;
    background-color:gray;
    height:100%;
    width:100%;
}

.hd-logo-search{
    width:400px;
    margin-left:15px;
}
.hd-logo-search svg{
    width:15px;
    height:15px;
}
.hd-logo-search form  .inputinitial{
    color:rgba(0,0,0,0.5);
    outline:none;
    padding:5px 10px 5px 10px;
    width:100%;
    border-top:none;
    border-right:none;
    border-left:none;
    border-bottom:solid;
    border-width:1px;
}

.header-container{
    margin-top:0px;
    top:0px;
    display:inline-block;
    width:100%;
    background-color:purple;
    padding-top:5px;
    position:fixed;
    z-index:500;
    box-shadow:0px 1px 10px 0 rgba(0,0,0,0.7);
}
.hd-logo{
    overflow:hidden;
    display:inline-block;
    \float:left;
    width:40%;
    margin-left:10%;
    border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    background-color:white;
    margin-bottom:5px;
}
.hd-logo-img{
    float:left;
}
.sub-menu-container svg{
    width:20px;
    height:20px;
    fill:white;
}
.hd-logo-img img{
    width:30px;
    height:30px;
}
.hd-logo-search{
    float:left;
}
.menu-btn-container a {
    text-decoration:none;
    color:white;
    font-size:14px;
}
.menu-btn-lable{
    padding-top:5px;
    padding-left:5px;
}
.sub-menu-container{
    float: left;
    display:inline-block;
    width:20%;
}
.menu-btn-svg{
    float:left
}
.menu-btn-lable{
    float:left;
}
.menu-btn-container{
    padding:2px 2px 2px 2px;
    margin-top:2px;
    margin-bottom:5px;
    display:inline-block;
    float:right;
    width:30%;
}


.sub-home-container{
    display:inline-block;
}
.field-con{
    display:inline-block;
    width:100%;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.4);
    -webkit-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.4);
    -ms-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.4);;
    -o-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.4);
    background-color: white;
    border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
}

.side-div-container{
    margin-left:15%;
    margin-top:40px;
    display:inline-block;
    width:80%;
    height:auto;
}
.show-activities-con{
    float:left;
    width:80%;
    margin-top:10px;
}
.activities-container{
    width:100%;
    background-color:white;
    margin-top:15px;
    padding:10px 10px 10px 10px;
    margin-bottom:100px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
}
.recent-activities-lable{
    font-size:14px;
    color:rgba(0,0,0,0.7);
}
.activities-sub-con{
    box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.1);
    -ms-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.1);
    -o-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.1);
    width:95%;
    padding:10px 10px 10px 10px;
    margin-top:5px;
    margin-left:1.5%;
}
.creator-dp-con{
    display:inline-block;
    width:100%;
}
.created-date{
    font-size:10px;
    color:rgba(0,0,0,0.4);
}
.creator-name{
    float:left;
    font-size:12px;
    padding-top:5px;
    padding-left:5px;
}
.created-content{
width:80%;
border-top:solid;
border-width:1px;
margin-left:20px;
border-color:rgba(225,225,225,0.5);
padding-top:15px;
}
.creator-dp{
    width:auto;
    height:auto;
    float:left;
}
.responsive-menu svg{
    width:30px;
    height:30px;
  
}
.creator-dp img{
    width:30px;
    height:30px;
}
.chart-container{
    background-color:white;
    width:100%;
    padding:10px 10px 10px 10px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
}
.other-activities-con{
    float:left;
    width:25%;
    position:fixed;
    height:100%;
    right:0px;
    top:0px;
    padding-top:60px;
}
.lable-div a{
    font-size:16px;
    text-decoration:none;
    color:purple;
}
 .lable-div p{
    font-size:11px;
    color:rgba(0,0,0,0.8);
}
.skoll-number-count{
    font-size:30px;
    font-weight:400;
}
.display-teacher-count,.display-student-count{
    width:60%;
    background-color:white;
    height:250px;
    margin-left:100px;
    text-align:center;
    padding-top:15px;
    border-radius:10px;
    -webkit-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    box-shadow:1px 1px 10px 1px rgba(0,0,0,0.5);
    -webkit-box-shadow:1px 1px 10px 1px rgba(0,0,0,0.5);
    -ms-box-shadow:1px 1px 10px 1px rgba(0,0,0,0.5);
    -o-box-shadow:1px 1px 10px 1px rgba(0,0,0,0.5);
    margin-top:20px;
}
.display-teacher-count svg,.display-student-count svg{
    width:100px;
    height:100px;
}
.field-icon{
    float:left;
    width:auto;
    background-color: white;
    padding-right:5px;
    padding-left:5px;
    padding-top:2px;
}
.field-input input{
    padding:10px 10px 10px 10px;
    width:100%;
    border:none;
    outline: none;
}
.field-icon img{
    width:30px;
    height:auto;
}
.field-input{
    float:left;
    width:80%;
    border-left: solid;
    border-width:1px;
    border-color:rgba(0,0,0,0.4);
}
.sub-home-container{
    display:inline-block;
    width:100%;
    margin-top:100px;
    left:0px;
}

.home-login{
    width:20%;
    background-color: rgba(225,225,225,0.5);
    padding-top:50px;
    padding-bottom:50px;
    padding-left:20px;
    padding-right:20px;
   float:right;
   margin-right:40px;
   height:250px;
   border-radius:4px;
   -webkit-border-radius:4px;
   -o-border-radius:4px;
   -ms-border-radius:4px;
   border:solid;
   border-width: 1px;
   border-color:rgba(100, 6, 85, 0.5);
}
.login-button{
    position:relative;
    top:30px;
}
.login-button button{
    padding:10px 10px 10px 10px;
    width:200px;
    margin-left:20%;
    background-color: white;
    border-color:purple;
    border:none;
    cursor: pointer;
    font-size: 18px;
    color:purple;
    font-weight: 600;
    text-align: center;
}
.login-as-other{
    margin-top:35px;
    text-align: center;

}
.login-as-other a{
    font-size:18px;
    color:black;
    font-weight: bold;
}
.login-as-other span{
    font-size:12px;
    font-weight:lighter;
}
.mobile-menu{
    display:none;
    float:right;
    margin-right:10px;
    position: relative;
    top:8px;
}
.mobile-menu svg{
    fill:white;
}
.register-con{
    width:100%;
    height:auto;
    padding-top:100px;
}
.register-con-form{
    box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.7);
    -webkit-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.7);
    -ms-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.7);
    -o-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.7);
    border-radius:5px;
    -webkit-border-radius:5px;
    -o-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.7);
    -ms-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.7);
    padding-left:8%;
    padding-top:20px;
    padding-bottom: 20px;
}
.register-con .register-con-sub{
    display:inline-block;
    width:80%;
    margin-left:15%;
}
.register-con-form input{
    color:rgba(0,0,0,0.8);
    width:95%;
    padding-left:10px;
    padding-top:10px;
    padding-bottom:10px;
    outline:none;
    border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border:solid;
    border-width:1px;
    border-color:rgba(128, 3, 128,0.5);
}
.register-con-icon{
    float:left;
    width:50%;
}
.register-con-icon img{
    width:100%;
    height:auto;
}
.register-con-form{
    float:left;
    width:40%;
}
.register-con-form button{
    padding:10px 10px 10px 10px;
    width:40%;
    margin-top:20px;
    margin-left:25%;
    background-color:green;
    color:white;
    font-size:18px;
    cursor: pointer;
}
.reg-areacode{
    float:left;
    width:auto;
    width:20%;
}
.reg-number{
    float:left;
    width:80%;
}
.reg-sub-field-con{
    display:inline-block;
    width:80%;
    margin-left:8%;
    }
.reg-areacode select{
    border:solid;
    border-width:1px;
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    border-color:rgba(128, 3, 128,0.5);
}
.select-input select{
    padding-top:10px;
    padding-bottom: 10px;
    border:solid;
    border-width:1px;
    border-color:rgba(128, 3, 128,0.5);
}
.reg-input{
    width:80%;
    display:inline-block;
}
.reg-lable{
    margin-top:10px;
    font-size:18px;
}
.register-article{
    width:90%;
}
.base-nav-bar{


position:fixed;
padding-top:10px;
padding-right:10px;
top:45px;
z-index:100;
margin-top:-10px;
width:200px;
height:100%;
background-color:white;
overflow:none;
padding-left:10px;

}
.sub-menu-nav-scroll{
    width: 100%;
    max-height: 500px;
    overflow-y: auto;
    padding:5px 0px 10px 5px;
    box-shadow: 1px 1px 4px 1px rgba(56, 52, 52,0.4);
    -webkit-box-shadow: 1px 1px 4px 1px rgba(56, 52, 52,0.4);
    -ms-box-shadow: 1px 1px 4px 1px rgba(56, 52, 52,0.4);
    -o-box-shadow: 1px 1px 4px 1px rgba(56, 52, 52,0.4);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  margin-left:-2px;
 


}
.nav-menu-container{
    background-color:gray;
    border-color:white;
    display:inline-block;
    width:100%;
    padding-top:8px;
    padding-bottom:5px;
    color:white;
}
.nav-menu-icon svg{
    width:20px;
    height:20px;
    fill:white;
    position:relative;
}

.nav-menu-icon{
  
    border-width:1px;
    padding:5px 5px 0px 5px;
    float:left;
    width:auto;
    margin-top:-8px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
}
.nav-lable{
    float:left;
    font-size:14px;
    width:130px;
    text-align:left;
    padding-left:5px;
}
.menu-nav-bar{
    z-index: 500;
}
.close-nav-menu{
    margin-top:-22px;
    margin-left:90%;
    z-index:1000;
    position:absolute;
    display:none;
}
.close-nav-menu svg{
    width:20px;
    height:20px;
    fill:black;
    cursor:pointer
}
.setup-skoll-account-pop-up{
    background-color:rgba(0,0,0,0.7);
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    z-index:2000;
}
.subpop-up-container{
    width:40%;
    height:400px;
    background-color:white;
    margin-left:30%;
    margin-top:150px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
}
.subpop-up-container form{
    margin-left:12%;
}

.subpop-up-container form select{
    padding:10px 10px 10px 10px;
    margin-left:10px;
    outline:none;
    border-top:none;
    border-left:none;
    border-right:none;
}
.subpop-up-container form button{
    padding:10px 10px 10px 10px;
    width:100px;
    margin-left:30%;
    margin-top:20px;
    font-size:18px;
    background-color:purple;
    color:white;
}
.subpop-up-container input{
    padding:10px 5px 10px 5px;
    width:80%;
    margin:5px;
    outline:none;
}
.setup-skoll-account-pop-up p{
    padding:10px 10px 10px 10px;
    color:rgba(0,0,0,0.7);
}
.setup-skoll-account-pop-up {
    -webkit-animation-name: setup-skoll-account-pop-up;
    animation-name: setup-skoll-account-pop-up;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes setup-skoll-account-pop-up {
    0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
    }
    50% {
    opacity: 1;
    }
    }
    @keyframes setup-skoll-account-pop-up {
    0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
    }
    50% {
    opacity: 1;
    }
    } 
    .submitform-loader{
        display:none;
    }
    .submitform-loader img{
        width:15px;
        height:15px;
        border-radius:50%;
        -webkit-border-radius:50%;
        -ms-border-radius:50%;
        -o-border-radius:50%;
    }
    .subpop-up-container .school-profile img
    {
        width:30px;
        height:30px;
    }
    .backtoschool{

        background-size:contain;
        background-repeat: no-repeat;
        background-attachment:initial;
        border:solid;
        border-color:purple;
        border-width:1px;
    }
    .backtoschool p{
        margin-bottom:60px;
    }
    .backtoschool input{
  border:none;
        text-align: center;
        outline:none;
        background-color: rgba(225,225,225,0.8);

    }
    .backtoschool p{
        color:black;
        text-align: center;
    }
    .backtoschool button{
        background-color:white;
    }
    .date-lable {
        color:black;
        font-weight:500;
        font-size:20px;
     
    }
    .add-skoll-name-pop-up{
        display:none;
    }
    .open-add-teacher-icon:hover{
        cursor:pointer;
    }
    .close-add-classroom{
        float:right;
        font-size:25px;
        margin-right:20px;
        margin-top:30px;
        color:red;
        cursor:pointer;
    }
    .create-message{
        font-size:12px;
        color:green;
        text-align:center;
    }
    .add-user-container{
        display:inline-block;
        width:70%;
        margin-left:20%;
        margin-top:30px;
        background-color:white;
        padding:5px 10px 40px;
        box-shadow:1px 1px 10px 1px black;
        -webkit-box-shadow:1px 1px 10px 1px black;
        -ms-box-shadow:1px 1px 10px 1px black;
        -o-box-shadow:1px 1px 10px 1px black;
        border-radius:10px;
        -webkit-border-radius:10px;
        -ms-border-radius:10px;
        -o-border-radius:10px;
        margin-bottom:30px;
    }
    .div-button button{
        margin-top:15px;
        margin-left:20%;
        width:50%;
        background:purple;
        color:white;
    }
    .div-button button{
        padding:10px 10px 10px 10px;
    }
    .add-user-container .textclass{
        padding:10px 10px 10px;
        width:80%;
    }
    .animation-display-container{
        float:right;
        width:40%;
        background-color:white;
        padding-top:5px;
        padding-right:35px;
        text-align:center;
        
    }
    .animation-display-container p{
        font-size:32px;
        color:purple;
    }
    .all-teachers-view{
        border:solid;
        background-color:purple;
        padding:8px 8px 8px 8px;
        width:150px;
        color:white;
        margin-left:32%;
        margin-bottom:15px;
        border-radius:5px;
        -webkit-border-radius:5px;
        -ms-border-radius:5px;
        cursor:pointer;
    }
    .animation-display-container article{
      font-size:25px;
      color:purple;
    }
    .add-user-form-container{
        float:left;
        width:40%;
        background-color:white;
        padding:15px 15px 15px 15px;
        margin-left:5%;
        padding-top:30px;
    }
    .add-user-form-container .number{
        padding-top:10px;
        padding-bottom:10px;
        width:55%;
        float:left
    }
    .form-field .dob{
        width:100px;
        padding:5px 5px 5px 5px;
        text-align:center;
        outline: none;
        color:rgba(0,0,0,0.7);
    }
    .add-user-form-container  .form-field-input{
        margin-top:5px;
    }
    .add-user-form-container .form-field{
        margin-top:5px;
    }
    .add-user-form-container .form-field{
        display:inline-block;
        width:100%;
    }
    .add-user-form-container input{
        outline:none;
        font-size:14px;
        color:rgba(0,0,0,0.7);
    }
    .add-user-form-container .arecode{
     padding-top:10px;
     padding-bottom:11px;
     width:20%;
     float:left;
     margin-left:5%;
    }
    .add-user-form-container .numberclass::-webkit-outer-spin-button,    .add-user-form-container .numberclass::-webkit-inner-spin-button{
        -webkit-appearance:none;
    }

    .add-user-form-container .numberclass{
        padding-top:10px;
        padding-bottom:10px;
        width:80%;
        padding-left:10px;
    }

    .add-user-form-container .countries-count{
        padding:10px 10px 10px 10px;
    }
    .animation-display-container img{
        width:100%;
        height:auto;
        border-radius:100%;
        -webkit-border-radius:100%;
        -ms-border-radius:100%;
        -o-border-radius:100%;
    }
    .add-subject{
        cursor:pointer
    }

    .subject-field{
        margin-top:100px;
    }
    .subject-field input{
        width:90%;
        border-top:none;
        border-left:none;
        border-right:none;
        border-bottom:solid;
        border-width:1px;
        border-color:purple;
        padding:5px 5px 5px 5px;
    }
    .create-mgs{
        
        position:absolute;
        top:250px;
        font-size:12px;
        color:green;
    }
    .animation-display-container a{
        text-decoration: none;
    }
    .subject-form .div-button{
        margin-top:50px;
        margin-left:10%;
  
    }
    
    .doubts-coe{
        padding:5px 10px 5px 10px;
        border:solid;
        border-width:1px;
        border-radius:100%;
        cursor:pointer;
    }
    .custom-coefi-value{
        display:none;
    }
    .subject-coefficient select{
        outline:none;
        padding:10px 10px 10px 10px;
        border-top:none;
        border-left:none;
        border-right:none;
        border-color:purple;
        margin-bottom:5px;
    }
    .custom-coefi-value input{
        padding:5px 5px 5px 5px;
        border-top:none;
        border-left:none;
        border-right:none;
        text-align: center;
        border-bottom:solid;
        border-color:purple;
        border-width:1px;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button{
        display:none;
    }
    .custom-coefi{
        border:solid;
        padding:5px 5px 5px 5px;
        margin-bottom:10px;
        width:100px;
        text-align:center;
        margin-left:5%;
        border-width:1px;
        border-radius:10px;
        -webkit-border-radius:10px;
        -ms-border-radius:10px;
        -o-border-radius:10px;
        background-color:green;
        color:white;
        cursor:pointer;
        font-size:12px
    }
    .subject-coefficient{
        margin-top:10px;
    }
    .close-coef{
        margin-left:80%;
        border:solid;
        padding:5px 5px 5px 5px;
        cursor:pointer;
        border-width:1px;
        color:red;
    }
    .coef-info{
        z-index:100;
        display:none;
        font-size:12px;
        color:rgba(0,0,0,0.8);
        margin-top:-8px;
        position:absolute;
        width:10%;
        height:auto;
        margin-left:10%;
        background-color:white;
        padding:10px 10px 10px 10px;
        box-shadow: 1px 1px 3px 1px black;
        border-radius:5px;
        -webkit-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
    }
    .display-all-subjects-container p{
        padding-top:100px;
        text-align:center;
        font-size:12px;
        color:rgba(0,0,0,0.5);
    }
    .display-all-subjects-container{
        display:inline-block;
        width:100%;
        height:400px;
        overflow-y: auto;
        overflow-x:none;
        padding:15px 0px 15px 25px;
    }
    .display-field-sub-con{
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        display:inline-block;
        width:95%;
        margin-bottom:5px;
        box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.4);
        -webkit-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.4);
        -ms-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.4);
        -o-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.4);
        padding:5px 5px 5px 5px;
        
       
    }
    .display-field-sub-con .subject-name{
        float:left;
        width:auto;
        font-size:12px;
    }
    .other-info-subject-con{
        display:inline-block;
        width:100%;
        height:auto;
        font-size:10px;
        color:rgba(0,0,0,0.6);
        
    }
    .other-info-subject-con .subject-other-info{
        float:left;
        width:auto;
        margin:5px;
    }
    .subject-options-con{
        display: inline-block;
        width: 100%;
    }
    .delet-button-con{
        padding-top:10px;
        position:absolute;
        width:20%;
        border:solid;
        margin-left:0%;
        margin-top:60px;
        background-color:white;
        border-radius:5px;
        -moz-border-radius:5px;
        -o-border-radius:5px;
        -ms-border-radius:5px;
        border-color:white;
        box-shadow: 1px 1px 4px 1px black;
        display: inline-block;
        position: fixed;
        top:0px;
    }
    .delet-button-con .subject-options{
        float: left;

    }
    .delet-button-con  .subject-options span{
        font-size: 12px;
    }
    .delet-button-con button{
        width:100%;
        background-color: transparent;
        border:solid;
        border-width:1px;
        color:purple;
        border-color:purple;
        border-radius:5px;
        border-radius:5px;
        -moz-border-radius:5px;
        -o-border-radius:5px;
        -ms-border-radius:5px;
        cursor: pointer;
    }
    .delet-button-con{
        display:none;
    }
    .mgs-erro{
        margin-top:15px;
        font-size:10px;
        color:green;
    }
    .submit-form-processing {
        display:none;
    }
    .submit-form-processing img{
        width:50px;
        height:50px;
    }
    .display-teachers-students-container h1,.display-teachers-students-container h3{
        text-align:center;
    }
    
    .teacher-table-container{
        overflow-x: auto;
    }
    
    .teacher-table-container table{
        width:100%;
        border:solid;
        border-color:rgba(0,0,0,0.2);
        border-width:1px;
        padding:10px 10px 10px 10px;
        border-radius:3px;
        
    }
    .teacher-table-container table  th{
        font-size:14px;
    }
    .teacher-table-container table tr{
        font-size:12px;
        
    }
    .teacher-table-container table tr td{
        border:solid;
        border-color:rgba(0,0,0,0.2);
        border-width:1px;
        padding:10px 10px 10px 10px;
    }
    .print-menu{
        float:right;
        top:0px;
        font-size:13px;
        text-align:center;
        padding:5px 5px 5px 5px;
        box-shadow: 1px 1px 4px 1px black;
        -webkit-box-shadow: 1px 1px 4px 1px black;
        -ms-box-shadow: 1px 1px 4px 1px black;
        -o-box-shadow: 1px 1px 4px 1px black;
        border-radius:5px;
        -webkit-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        margin-right:5px;
    }
    .teacher-table-container{
        clear:right;
    }
    .print-menu img{
        width:30px;
        height:30px;
    }
    .add-user-container h2{
        text-transform: capitalize;
    }
    .add-user-container h2,.add-user-container h3{
        text-align:center;
    }
    .skoll_info_container{
        display:inline-block;
        height:auto;
        width:95%;
        margin-left:5%;
    }
    .skoll_info_container .skoll_logo img{
        width:100%;
        height:auto;
    }
    .skoll_info_container .skoll_logo{
        float:left;
        width:10%;
    }
    .skoll_info_container .skoll_info{
        float:left;
        width:80%;
        padding:5px 5px 5px 5px;
    }
    .update_skoll_dp {
        text-align:center;
    }
    .update_skoll_dp a{
        font-size:12px;
        text-align:center;
        text-decoration: none;
    }
    .print-option  img{
        width:25px;
        height:25px;
    }
    .print-option{
        float:right;
        margin-top:30px;
        margin-right:5px;
        border:solid;
        padding:10px 10px 10px 10px;
        border-width:1px;
        border-radius:10px;
        -webkit-border-radius:10px;
        -ms-border-radius:10px;
        -moz-border-radius:10px;
        color:purple;
    }
    .print-option a{
        font-size:12px;
        color:purple;
        text-decoration: none;
    }
    .remove-t-s{
        position:absolute;
        margin-top:180px;
        top:0px;
        right:10px;
        width:200px;
        display:none;
    }
    .remove-t-s button{
        background-color: green;
        color:white;
    }
    .guardian-info-container{
        border:solid;
        border-color:black;
        text-align:center;
        padding-bottom:50px;
        margin-top:25px;
        border-radius:10px;
        -webkit-border-radius:10px;
        -ms-border-radius:10px;
        -o-border-radius:10px;
        border-color:purple;
        border-width:1px;
        
    }
    .guardian-info-container .form-field-label{
        text-align: left;
        padding-left:8%;
    }
    .student-add-btn{
        margin-left:25px;
    }
 
    .menu-btn-container-list-container img{
        width:15px;
        height:15px;
    }
    .menu-btn-container-list-container{
        float:right;
        display:block;
        width:100%;
        border-top:solid;
        margin-top:10px;
        border-width:1px;
        border-color:purple;
    }
    .filter-list-container {
        background-color:purple;
        color:white;
        font-size:12px;
        width:100px;
        float: right;
        border:solid;
        border-width:1px;
        border-radius:5px;
        -webkit-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        margin-right:8px;
        text-align: center;
        padding:7px 5px 6px 5px;
        margin:5px;
        cursor: pointer;
    }
    .print-btn-list .print-article{
        position:relative;
        top:-2px;
    }

    .print-btn-list a{
        text-decoration: none;
        color:black;
    }
    .print-btn-list{
        margin:5px;
        border-radius:5px;
        -webkit-border-radius:5px;
        width:50px;
        font-size:12px;
        float:right;
        border:solid;
        border-width:1px;
        padding:5px 5px 5px 5px;
        text-align:center;
    }
    .filter-lis-sub-container{
        max-height:100px;
        position:absolute;
        margin-top:8px;
        overflow-y: auto;
        overflow-x: hidden;
        border:solid;
        border-width:1px;
        margin-left:2px;
        padding:2px 2px 5px 2px;
        width:92px;
        box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.4);
        -webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.4);
        -ms-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.4);
        -o-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.4);
        z-index:10;
        background-color:white;
        display:none;
    }
    .filter-lis-sub-container .select-class{
        margin:3px;
    }
    .add-school-term{
        padding-top:50px;
        padding-bottom:100px;
    }
    .school-term-add input{
        padding:10px 10px 10px 10px;
        width:80%;
        border-top:none;
        border-left:none;
        border-right:none;
        border-bottom:solid;
        border-width:1px;
        border-color:purple;
        margin-top:100px;
        margin-left:5%;
    }
    .school-term-add select{
        font-size:14px;
        color:rgba(0,0,0,0.7);
        outline:none;
        padding:5px 5px 5px 5px;
        border-top:none;
        border-left:none;
        border-right:none;
        border-bottom-color:purple;
        width:70%;
        margin-left:10%;
        margin-top:5px;
    }
    .settings-body-container{
        width:60%;
        height:auto;
        margin-left:20%;
        background-color:white;
        padding-top:40px;
        padding-bottom:40px;
        text-align:center;
        margin-top:100px;
        border-radius:5px;
        -webkit-border-radius:5px;
        -ms-border-radius:5px;
        -moz-border-radius:5px;
    }
    .settings-menus{
        width:80%;
        height:auto;
        display:inline-block;
        margin-left:10%;

    }
    .setting-menu:hover{
        background-color:green;
    }
    .setting-menu{
        margin:5px;
        float:left;
        width:40%;
        text-align:center;
        border-radius:5px;
        -webkit-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.8);
        -webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.8);
        -ms-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.8);
        -o-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.8);
        padding:10px 10px 10px 10px;
    }
    .setting-menu-icon{
        width:100%;
    }
    .setting-menu img{
        width:30%;
        height:auto
    }
.schoolaccount-container{
    padding-top:50px;
    width:80%;
    height:auto;
    margin-left:15%;
    display:inline-block;

}
.update-school-profile,.change-password{
    width:40%;
    height:350px;
    float:left;
    background-color:white;
    padding:10px 10px 10px 10px;
    margin:2px; 
    border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    box-shadow:2px 2px 2px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow:2px 2px 2px 2px rgba(0,0,0,0.2);
    -ms-box-shadow:2px 2px 2px 2px rgba(0,0,0,0.2);
    -o-box-shadow:2px 2px 2px 2px rgba(0,0,0,0.2);
    text-align:center;   
}
.first-partition-school-set{
    display:inline-block;
    width:100%;
}
.horizontal-divider{
    background-color:white;
    position:relative;
    margin-top:20px;
    margin-bottom:20px;
    clear:left;
    width:82%;
    height:5px;
}
.update-school-profile{
    text-align:center;
}
.school-logo-display-con{
    width:auto;
    height:auto;
}
.school-logo-display-con img{
    width:100px;
    height:100px;
}
.horizontal-divider,.update-school-info{
    margin-left:10px;
    box-shadow:2px 2px 2px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow:2px 2px 2px 2px rgba(0,0,0,0.2);
    -ms-box-shadow:2px 2px 2px 2px rgba(0,0,0,0.2);
    -o-box-shadow:2px 2px 2px 2px rgba(0,0,0,0.2);
    border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
}
.update-school-info{
    clear:left;
    background-color:white;
    width:80%;
    margin-left:10px;
    padding:15px 15px 15px 15px;
    margin-bottom: 50px;
    text-align:center;
}
.update-school-info .field-info{
    margin:10px;
}
.update-school-info textarea{
    padding:15px 15px 15px 15px;
    width:80%;
    outline:none
}
.update-school-info .field-lable{
    text-align:left;
    font-size:14px;
}
.update-school-info .field-info input{
    outline:none;
    width:80%;
    padding:15px 15px 15px 15px ;
}
#schoollogo button{
    padding:10px 10px 10px 10px;
    margin-top:40px;
    width:100px;
    background-color:green;
    color:white;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.change-password input{
    border-radius:2px;
    -webkit-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    outline:none;
    padding:10px 10px 10px 10px;
    margin:5px;
    width:100%;
    border:none;
    box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.4);
}
.change-password-btn{
    margin-top: 25px;   
}
.change-password-btn button{
    padding:10px 10px 10px 10px;
    background-color:green;
    color:white;
    cursor:pointer;
}
.update-school-info button{
    padding:10px 10px 10px 10px;
    background-color: purple;
    margin-top:30px;
    color:white;
}
.register-con-form{
    position:relative;
    left:-300px;
    transition: left 2s;
}
.home-login-div{
    position:fixed;
    right:-500px;
    transition: right 1s;
}
.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes slideInLeft {
    0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    visibility: visible;
    }
    100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
    }
    @keyframes slideInLeft {
    0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    visibility: visible;
    }
    100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
    }
    .code-generator-p{
        font-size:16px;
        font-weight:lighter;
    } 
    .life-span-select{
        margin-top:10px;
        text-align:center;
    }
    .life-span-select select{
        padding:5px 5px 5px 5px;
        outline:none;
        border-top:none;
        border-left:none;
        border-right:none;
    }
    .codes-sub-scroll{
        max-height:350px;
        overflow-y: auto;
        overflow-x:none;
        
    }
    .passcodes-container{
        padding:15px 5px 5px 5px;
        width:100%;
        height:auto;
        max-height:360px;
        box-shadow: 1px 1px 4px 4px rgba(0, 0, 0,0.4) inset;
        -webkit-box-shadow: 1px 1px 4px 4px rgba(0, 0, 0,0.4) inset;
        -ms-box-shadow: 1px 1px 4px 4px rgba(0, 0, 0,0.4) inset;
        -o-box-shadow: 1px 1px 4px 4px rgba(0, 0, 0,0.4) inset;
        border-radius:5px;
        -ms-border-radius:5px;
        -webkit-border-radius:5px;
        -o-border-radius:5px;

    }
    .codes-sub-container{
        border-top:solid;
        border-width:1px;
        border-color:rgba(0,0,0,0.8);
        padding: 15px 5px 15px 5px;
    }
    .social-media-share-container{
        width:100%;
        display:inline-block;
        border-top:solid;
        margin-top:5px;
        border-top-width: 1px;
        border-bottom:solid;
        border-bottom-width:1px;
        border-color:rgba(0,0,0,0.2);
    }
    .social-media-share-container a{
        color:rgba(0,0,0,0.7);
    }
    .social-share{
        float:left;
        padding:2px 2px 2px 2px;

    }
    .control-panel-container{
        width:70%;
        margin-left:20%;
        margin-top:50px;
    }
    .forms-container{
    display:inline-block;
    width:100%;
    background:rgba(0, 0, 0, 0.4);
    text-align: center;
    padding-top:100px;
    padding-bottom:100px;
    padding-left:40px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-bottom:solid;
    border-bottom-color:purple;
    border-bottom-width: 10px;

    }
    .forms-subcontainer{
        display:inline-block; 
        width:80%;
        border-radius:5px;
        -webkit-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
    }
    .remove-and-add-teacher-admin{
        float:left;
        background-color:white;
        width:35%;
        margin:10px;
        padding:10px 10px 10px 10px;
        height:300px;
        border-radius:5px;
        -webkit-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;

    }
    .set-mark-filling-accademic-year{
        float:left;
        background-color:white;
        width:50%;
        margin:10px;
        padding:10px 10px 10px 10px;
        height:auto;
        border-radius:5px;
        -webkit-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
    }
    .forms-container h2{
        font-size:18px;
    }
    .remove-and-add-teacher-admin form{
        padding-top:60px;
    }
    .remove-and-add-teacher-admin form select{
        outline: none;
        padding:5px 5px 5px 5px;
        width:60%;
        border-top:none;
        border-left:none;
        border-right:none;
        border-bottom:solid;
        border-width:1px;
        border-color:purple;
        font-size:18px;
    }
    .submit-button{
        margin-top:50px;
    }
    .submit-button button{
        padding:10px 10px 10px 10px;
        background-color:purple;
        color:white;
        font-size:14px;
        border-color:purple;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
    }
    .set-mark-filling-accademic-year form{
        margin-top:20px;
        text-align:left
    }
    .set-mark-filling-accademic-year form input, .set-mark-filling-accademic-year form select{
        width:80%;
        margin-left:10%;
        padding:5px 5px 5px 5px;
        outline:none;
        margin-top:2px;
        border-top:none;
        border-left:none;
        border-right:none;
        border-bottom:solid;
        border-width:1px;
        color:purple;
        text-align: center;
    }
    .button-add{
        margin:25px;
        text-align: center;
    }
    .select-term{
        margin-top:5px;
    }
    .button-add button{
        padding:10px 10px 10px 10px;
        width:50%;
        background-color:purple;
        border-color:purple;
        color:white;
        font-size:14px;
        border-radius:5px;
        -webkit-border-radius:5px;
        -o-border-radius:5px;
        -ms-border-radius:5px;
    }
    .view-menu-container{
        display:inline-block;
        width:100%;
    }
    .view-menu-container .view-menu{
        float:left;
        margin:2px;
        border:solid;
        padding:5px 5px 5px 5px;
        border-radius:5px;
        -webkit-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        border-color:green;
        background-color:white;
        border-width:1px;
        box-shadow:1px 1px 8px 1px black;
    }
    .view-menu-container .view-menu:hover{
        border-color:purple;
        transform: scale(1.03);
    }
    .view-menu-container a{
        color:black;
        
    }
    .remove-and-add-teacher-admin p{
        text-align:left;
        padding-left:10px;
        padding-top:10px;
        font-size:16px;
    }
    .available-admins-con{
        width:100%;
        overflow-x:none;
        overflow-y:auto;
        height:auto;
        max-height:210px;

    }
    .set-mark-filling-accademic-year p{
        text-align:center;
        padding-top:40px;
        color:rgba(0,0,0,0.7);
        font-size:20px;
    }
    .admins-con{
        display:inline-block;
        width:90%;
        padding:5px 5px 5px 5px;
        height:auto;
        color:rgba(0,0,0,0.7);
        box-shadow: 1px 3px 5px 1px  rgba(0,0,0,0.5);
        -webkit-box-shadow: 1px 1px 2px 1px  rgba(0,0,0,0.2);
        -ms-box-shadow: 1px 1px 2px 1px  rgba(0,0,0,0.2);
        -o-box-shadow: 1px 1px 2px 1px  rgba(0,0,0,0.2);
        border-radius:5px;
        -webkit-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        margin:2px;
    }
    .admins-con .admin-name{
        float:left;
    }
    .admins-con .remov-admin a{
        text-decoration: none;
    }
    .admins-con .remov-admin{
        float:right;
    }
    .forms-subcontainer h2{
        border-bottom:solid;
        padding-bottom:15px;
        border-width:1px;
    }
    .forms-subcontainer h2 span{
        color:rgba(0,0,0,0.7);
        font-size:16px;
    }
    .available-admins-con .nex-field{
        width:100%;
        margin-top:5px;
        border-top:solid;
        border-width:1px;
        padding-top:5px;
        text-align: left;
        font-size:12px;
        clear:left;
    }
    .admin-name{
        padding-top:5px;
        padding-bottom:5px;
    }
    .admin-name span{
        font-size:13px;
    }
    .remov-admin a{
        font-size:12px;
    }
    .dashboard-normal-users{
        display:inline-block;
        width:60%;
        background-color:rgba(100, 6, 85, 0.5);
        margin-left:20%;
        margin-top:40px;
        min-height:400px;
        max-height: auto;
        border-radius:5px;
        -ms-border-radius:5px;
        -webkit-border-radius:5px;
        -o-border-radius:5px;
        padding:30px 20px 100px 30px;

    }
    .Classroom-teacher-teaching,.user-info-div-container{
        float:left;
        width:45%;
        min-height:300px;
        max-height:400px;
        overflow:hidden ;
        background-color:white;
        margin:auto 10px;
        border-radius:5px;
        -ms-border-radius:5px;
        -webkit-border-radius:5px;
        -o-border-radius:5px;
        padding-bottom:100px;
    }
    .Classroom-teacher-teaching .sub-classroom-container{
        width:100%;
        max-height: 400px;
        overflow-y: auto;
        padding-bottom:100px;
        
        
    }
    .Classroom-teacher-teaching p,.user-info-div-container p{
        text-align:center;
        font-size:14px;
        color:rgba(0,0,0,0.8);
    }
    .Classroom-teacher-teaching table{
        overflow-x: auto;
        border-collapse: collapse;
        border-spacing: 0;
        width:100%;
        height:auto;
        border:1px solid  #f2f2f2;
    }

    .Classroom-teacher-teaching  tr:nth-child(even){background-color:rgba(134, 130, 130,0.1)}
    .Classroom-teacher-teaching th,  .Classroom-teacher-teaching td {
    text-align: left;
    padding: 8px;
    font-size: 14px;
  }
  .marks-container select, .marks-container input{
  border-top:none;
  border-left:none;
  border-right:none;
  width:80%;
  margin-left:10%;
  border-bottom:solid;
  border-width:1px;
  padding:5px 5px 5px 5px;
  border-color:rgba(100, 6, 85, 0.5);
  color: peru;
  outline: none;

  }
  .marks-lable{
      margin-bottom:4px;
      margin-top:10px;
      margin-left:10px;
      color:rgba(0,0,0,0.7);

  }
  .btn-marks{
      width:100%;
      text-align: center;
      padding-top:40px;
  }
  .btn-marks button{
      padding:10px 10px 10px 10px;
      background-color: purple;
      color:white;
      border-color: purple;
      width:50%;
      border-radius:4px;
      -ms-border-radius:4px;
      -webkit-border-radius:4px;
      -o-border-radius:4px;
      cursor: pointer;
  }
  .control-menu{
      display:inline-block;
      width:65%;
      padding:5px 5px 5px 5px;
      margin-left:10%;
      border-bottom: solid;
      border-width:1px;
      border-color: black;
      box-shadow: 0px 1px 4px 0px black;
      -webkit-box-shadow: 0px 1px 4px 0px black;
      -ms-box-shadow: 0px 1px 4px 0px black;
      -o-box-shadow: 0px 1px 4px 0px black;
      border-radius:5px;
      -webkit-border-radius:5px;
      -ms-border-radius:5px;
      -o-border-radius:5px;
      background-color: white;
  }
  .control-menu .menu-div{
      float:left;
      padding:2px 5px 2px 5px;
      border-right:solid;
      border-width:1px;
  }
  .control-menu a{
    color: black;
    font-size:14px;
  }
  .absent-field{
      display:inline-block;
      width: 70%;
      margin-top:10px;
      padding-left:10px;
  }
  .absent-field  .studentlable{
   float:left;
   font-size:14px;
   color:rgba(0,0,0,0.6);
  }
  .absent-field .student-input{
      width:50px;
      height:50px;
  }
  .btn-marks button{
      margin-bottom:40px;
  }
  .absent-field .student-input{
    float:left;  
  }
  .classroom-container{
      margin-top:40px;
      width:80%;
      min-height:500px;
      max-height:auto;  
      margin-left:17.5%;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius:10px;
      -ms-border-radius:10px;
      -moz-border-radius:10px;
      -o-border-radius:10px;
      padding:10px 10px 10px 10px;
      box-shadow:1px 1px 10px 1px rgba(0, 0, 0, 0.2);
      -webkit-box-shadow:1px 1px 10px 1px rgba(0, 0, 0, 0.2);
      -ms-box-shadow:1px 1px 10px 1px rgba(0, 0, 0, 0.2);
      -o-box-shadow:1px 1px 10px 1px rgba(0, 0, 0, 0.2);
  }
  .classroom-container  .table-container table{
      width:100%;
      border:collapse;
      overflow-x: auto;
  }
  .classroom-container .table-container table th{
      border:solid;
      border-width:1px;
      padding:10px 10px 10px 10px;
      background-color:purple;
      border-color: white;
      color:white;
  }
  .classroom-container table button{
      padding:5px 5px 5px 5px;
      width:100px;
      border:none;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      cursor: pointer;
  }

  .classroom-container table tr:nth-child(even){
 background-color: rgba(136, 134, 134, 0.7);
 color:white;
  }
  .classroom-container table tr a{
    color:black;
    font-weight: bold;
}
  .classroom-container table td{
    padding:5px 5px 5px 5px;
    text-align:center;
  }
  .classroom-menu-container .clroom{
    text-decoration: none;
      float:left;
      margin-left:5px;
      border:solid;
      border-color: white;
      padding:5px 5px 5px 5px;
      border-width:1px;
      border-radius:2px;
      -webkit-border-radius:2px;
      -ms-border-radius:2px;
      margin-bottom: 5px;
      background-color: white;
  }
  .classroom-menu-container{
      display:inline-block;
     
      width:100%;
      padding-bottom:10px;
      border-width:1px;  
    }
    .sub-class-menu-container{
        display:inline-block;
        width:80%;
        float:left;
        padding-top:2px;
        
    }
    .sub-class-menu-container a{
        text-decoration: none;
        color:black;
        font-size: 18px;
        font-weight: bold;
    }

    .classroom-container  .generate-report{
        top:27px;
      
    }
    .classroom-info-conatiner{
        display:inline-block;
        width:90%;
        padding-top:40px;
        margin-left:5%;
    }
    .classroom-info-conatiner .classroom-info{
        padding-top:100px;
        text-align: center;
        width:30%;
        float: left;
        background-color: white;
        padding-bottom: 80px;
    }
    .classroom-info-conatiner .accademic-year{
        padding-top:10px;
        font-size:12px;
        color: rgba(0, 0, 0,0.4);
    }
    .classroom-info .cls-name{
     font-size:40px;
    }
    .classroom-student-teacher-count {
        text-align:center;
        width:30%;
        float: left;
        border: solid;
        border-width:1px;
        padding:20px 5px 20px 5px;
        margin-top:50px;
        border-radius:10px;
        -webkit-border-radius:10px;
        -ms-border-radius:10px;
        -o-border-radius:10px;
        margin-left:10px;
        background-color: white;
        border-color: white;
    }
    
    .classroom-student-teacher-count .type-icon svg{
      width:100px;
      height:100px;
    }
    .classroom-student-teacher-count .type-count{
        font-size:50px;
    }
    .classroom-info-conatiner-students table{
        width:100%;
        padding:10px 10px 10px 10px;
    }
    .edit-user-information{
        background-color: white;
        width:70%;
        min-height:400px;
        margin-left:15%;
        margin-top:50px;
        padding:10px 10px 10px 10px;
        text-align: center;
    }
    .edit-user-information form input {
        width:80%;
        padding:8px 8px 8px 8px;
        border:solid;
        border-width:1px;
        border-color:purple;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        outline: none;
    }
    .user-info-field-container {
       padding:25px 5px 5px 5px;
    }
    .button-div {
        margin-top:20px;
        margin-bottom:20px;
    }
    .button-div button{
        padding:10px 5px 10px 5px;
        width:30%;
        font-size:16px;
        background-color: green;
        color:white;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
    }
    .user-info-field-lable{
        text-align: left;
        padding:5px 5px 5px;
    }
    .user-info-field-input{
        margin-left:5%;
    }
    .generate-report{
        float:right;
        border:2px 2px 2px 2px;
        border:solid;
        padding:2px 5px 2px 5px;
        margin-right:10px;
        position:relative;
        top:-30px;
        border-width:2px;
        border-color:black;
        border-radius:5px;
        -webkit-border-radius:5px;
        -ms-border-radius:5px;
        background-color: green;
        color:white;
        font-size:14px;
        border:none;
    }
    .teacher-table-container{
        width:100%;
        
    }
    .teacher-table-container table{
        width:100%;
        border-color:rgba(0,0,0,0.2);
        border-width:1px;
        padding:10px 10px 10px 10px;
        border-radius:3px;

        
    }
    .teacher-table-container table  th{
        font-size:14px;
        padding:5px 2px 2px 5px;
    }
    .teacher-table-container table tr{
        font-size:14px;
        width:100%;
        
    }
    .teacher-table-container table tr td{
        border:solid;
        border-color:rgba(0,0,0,0.1);
        border-width:1px;
        padding:5px 2px 2px 5px;
        width:auto;
    }
    .teacher-table-container  .small-cell{
        width:60px; 
        text-align:center;   
    }
    .skoll-logo{
        text-align:center;
        width:200px;
    }
    .skoll_info{
        width:auto;
    text-align:center;
    }
    .skoll_info span{
    padding:5px 5px 5px 5px;
    }
    .skoll-logo img{
    width:150px;
    height:150px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
    border:solid;
    border-width:1px;
    border-color:purple;
    }
    .skoll-name{
    font-size:35px;
    font-weight:bold;
    }
    .skoll-accyear{
    font-size:14px;
    }.skoll-moto{
    font-size:18px;
    font-weight:0;
    }
    .main_heading{
    width:100%;
    border-top:solid;
    padding:10px 0px 0px 0px;
    }
    .list-container{
        width:70%;
        margin-left:22%;
        background-color: white;
        margin-top:80px;
        padding-top:50px;
        padding-bottom:50px;
        min-height:400px;
    }
    .classlist-heading{
            text-align:center;
            width:30%;
            background-color: purple;
            margin-left:25%;
            color:white;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
        }
        .classlist-table table{
            border:solid;
            border-width:1px;
            font-size:13px;
            margin-left:3%;
    
        }
        .classlist-table th{
            border-left:solid;
            border-width:1px;
        }
        .classlist-table td,.classlist-table th{
            padding:5px 5px 5px 5px;
        }
        .classlist-table th:nth-child(1){
            border:none;
        }
        .classlist-table td{
            border:solid;
            border-width:1px;
        }
        .no-logo-avalaible {
            text-align: center;
        }
        .no-logo-avalaible a{
            color:black;
            font-size: 18px;
        }
 .display-classroom-container{
     width:80%;
     min-height: 400px;
     background-color: white;
     margin-left:18%;
     margin-top:40px;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
 }
 .term-menus-container {
     display: inline-block;
     width:80%;
     margin-left:10%;
     border-radius:10px;
     -webkit-border-radius:10px;
     -ms-border-radius:10px;
     -o-border-radius:10px;
     padding:3px 3px 3px  3px;
     box-shadow: 2px 2px 4px 2px rgba(10, 10, 10,0.2);
     -webkit-box-shadow: 2px 2px 4px 2px rgba(10, 10, 10,0.2);
     -ms-box-shadow: 2px 2px 4px 2px rgba(10, 10, 10,0.2);
     -o-box-shadow: 2px 2px 4px 2px rgba(10, 10, 10,0.2);
     background-color: white;
 }
 .term-menus-container .term-menu{
     float:left;
     padding:5px 5px 5px 5px;
     border-right: solid;
     border-width:1px;
 }
 .display-classroom-container p{
     padding-top:50px;
     text-align: center;
     font-size: 18px;
     line-height: 1.5;
     padding-top:100px;
 }
 .classroom-info p{
     color:rgba(0,0,0,0.8);
     font-size:16px;
     font-family: Georgia, 'Times New Roman', Times, serif;
 }
 .launch-generate-report{

     margin-top:10px;
     padding-top:10px;
   
 }
 .launch-generate-report span{
    
     background-color: white;
     margin-left:10px;
     font-size: 14px;
     box-shadow: 1px 1px 4px 1px black;
     -webkit-box-shadow: 1px 1px 4px 1px black;
     -ms-box-shadow: 1px 1px 4px 1px black;
     -o-box-shadow: 1px 1px 4px 1px black;
     padding:5px 5px 5px 5px;
     cursor: pointer;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
 }
 .launch-generate-report span:hover{
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4);
 }
 .popup-report-pop-up-container{
     display: none;
     top:0px;
     left:14.5%;
     position: fixed;
     z-index: 100;
     width:86%;
     height:100%;
     background-color: rgba(0,0,0,0.6);
     border-left:solid;
     border-color: purple;
     border-width:5px;
 }
 .option-select-container{
     display: inline-block;
     width:60%;
     background-color: white;
     margin-left:15%;
     margin-top:100px;
     border-radius:5px;
     -webkit-border-radius:5px;
     -ms-border-radius:5px;
     -o-border-radius:5px;
     padding-top:55px;
     padding-bottom: 60px;
 }
 .warning-annual-report,.confirm-frame,.warning-message-report,.option-two-frame-terms,.option-select-container  .pop-info,.option-one-frame-sequences{
     display: inline-block;
     width:80%;
     height:300px;
     border:solid;
     padding-bottom:15px;
     padding-left:15px;
     margin-left:60px;
     border-width:1px;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
     border-color:purple;
 }
 .confirm-frame{
     text-align: center;
 }
 .confirm-frame button{
     padding:10px 10px 10px 10px;
     width:40%;
     margin-top:150px;
     font-size:18px;
     color:white;
     background-color: purple;
     border-color: purple;
     border-radius: 5px; 
     -webkit-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;  
     cursor: pointer; 

 }
 .warning-message-report p,.pop-info p,.option-one-frame-sequences p,.option-two-frame-terms p{
     padding-top:50px;
     font-size:18px;
     color:rgba(0, 0, 0,0.6);
 }

 .confirm-frame,.warning-message-report,.option-select-container .option-one-frame-sequences,.option-two-frame-terms{
     display: none;
 }
 .pop-info select,.option-one-frame-sequences select,.option-two-frame-terms select{
     outline: none;
     border:none;
     padding:10px 10px 10px 10px;
     width:80%;
     margin-top:50px;
     margin-left:10%;
     box-shadow: 1px 1px 4px 1px rgba(224, 46, 195, 0.4);
     -webkit-box-shadow: 1px 1px 4px 1px rgba(224, 46, 195, 0.4);
     -ms-box-shadow: 1px 1px 4px 1px rgba(224, 46, 195, 0.4);
     -o-box-shadow: 1px 1px 4px 1px rgba(224, 46, 195, 0.4);
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
     font-size: 14px;
     color:rgba(0, 0, 0,0.6);
 }
.menu-buttons-type{
    margin-top:20px;
    display:inline-block;
    width:60%;
    border-top:solid;
    border-width:1px;
    padding-top:15px;
    margin-left:20%;
    border-color:purple;
}
.menu-buttons-type .back-btn,.menu-buttons-type .next-btn{
    padding:5px 5px 5px 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
     cursor: pointer;
}
.menu-buttons-type .back-btn:hover,.menu-buttons-type .next-btn:hover{
    color:rgba(0, 0, 0, 0.5);
    border:none;
}
.menu-buttons-type .back-btn{
    float:left;
}
.menu-buttons-type .next-btn{
    float:right;
}
.close-the-process{
    position:absolute;
    width:100px;
    right:255px;
    margin-top:-30px;
    font-size:20px;
    color:red;
}
.close-the-process:hover{
    color:rgba(255, 0, 0,0.6);
    cursor: pointer;
}
.display-statistic-report{
    padding:20px 20px 20px 20px;
    margin-bottom:50px;
}
.display-statistic-report table{
    font-size:14px;
    width:100%;
    padding:20px 20px 20px 20px;
    border-bottom: solid;
    border-color:rgba(131, 3, 131,0.5);
    border-width:20px;
}
.display-statistic-report table .lable{
    padding:10px 10px 10px 10px;
    border-right:solid;
    border-width:1px;
    border-color:rgba(0,0,0,0.1);
}
.display-statistic-report table  span{
    font-weight: bolder;
}
.display-statistic-report .title{
    text-align: center;
    border-bottom: dotted;
    padding-top:20px;
    padding-bottom:20px;
    border-width: 1px;
  
}
.display-statistic-report table tr:nth-child(even){
    background-color:rgba(167, 157, 157,0.3);
}
.display-classroom-container{
    background-color:white;
}
.term-menu-container p{
    padding:0px 0px 0px 10px;
    color:rgba(0, 0, 0, 0.8);
    text-align: left;
    font-size:12px;
}
.main-menu-container{
    background-color: rgba(151, 21, 119,0.5);
    padding:10px 5px 10px 5px;
}
.term-report-cards-container p{
    font-size:16px;
    color: rgba(0, 0, 0,0.6);
    padding-top:40px;
}
.sequence-select-container {
    display: inline-block;
    padding-left:10px;
    background-color: white;
    padding:3px 3px 3px 3px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.lable-div,.option-select{
 float:left;
 font-size:14px;
 padding:5px 5px 5px 5px;
}
.option-select select{
    outline: none;
    margin-left:5px;
    border:none;
    text-align: center;
}
.report-menu-contro-nav-container {
display:inline-block;
margin-left:2px;
width:98%;
margin-top:15px;
padding-top:10px;
font-size:14px;



}
.report-menu-contro-nav-container .block-nav{
    
    float:left;
    width:60%;
    height: 20px;
    padding:11px 5px 5px 5px;
    border-bottom: solid;
    border-width:1px;
    border-color:purple;
   
}
.report-menu-contro-nav-container .reportcard{
    cursor: pointer;
    border-top-left-radius: 10px;  
    -webkit-border-top-left-radius: 10px;
    -ms-border-top-left-radius: 10px;
    -o-border-top-left-radius: 10px;
    border-left:solid;
    box-shadow: 1px 2px 4px 1px rgba(0, 0, 0,0.1) inset;
    -webkit-box-shadow: 1px 2px 4px 1px rgba(0, 0, 0,0.1) inset;
    -ms-box-shadow:1px 2px 4px 1px rgba(0, 0, 0,0.1) inset;
    -o-box-shadow: 1px 2px 4px 1px rgba(0, 0, 0,0.1) inset;
    border-color:purple;
    color:green;
}
.report-menu-contro-nav-container .statistic,.report-menu-contro-nav-container .marksheet{
    cursor: pointer;
  
    border-right:solid;
    border-bottom:solid;
    border-left:solid;
    border-color:purple;
}
.negative-box-shadow{

    box-shadow: 1px 2px 4px 1px rgba(0, 0, 0,0.1) inset;
    -webkit-box-shadow: 1px 2px 4px 1px rgba(0, 0, 0,0.1) inset;
    -ms-box-shadow: 1px 2px 4px 1px rgba(0, 0, 0,0.1) inset;
    -o-box-shadow: 1px 2px 4px 1px rgba(0, 0, 0,0.1) inset;
    border-bottom:none;
}
.report-menu-contro-nav-container .report-menu-contro
{
    cursor: pointer;
    border-top: solid;
    text-align: center;
    border-width:1px;
    width:10%;
    float:left;
    padding:10px 5px 5px 5px;
    height: 20px;
    border-color:purple;
}
/*container for report card and statistic report*/
.content-for-statistic,.content-for-marksheet{
    display:none;
}
.report-card-info{
    margin-top:10px;
    width:100%;
    margin-left:0%;
    border-top:dotted;
    padding-top:20px;
    border-width:1px;
  
}
.report-card-info table{
    width:100%;
}

.report-card-info table .contern-left{
    text-align:right;
}
.report-heading{
    text-align: center;
    font-weight: bold;
    font-size:14px;
}
.report-card-info {
    font-size: 13px;
}
.div-hold-report-content{
    padding-top:5px;
    padding-bottom:5px;
  
}
.div-hold-report-content{
    font-size:13px;
}
.div-hold-report-content th,.div-hold-report-content td{
    border:solid;
    border-width:1px;
    text-align: center;
}
.report-main-container {
   
    width:80%;
    margin-left:10%;
    padding-top:10px;
    padding-bottom:10px;
    border-width: 1px;
    border:solid;
    border-width:1px;
    
}
.report-card-display-container{
    margin-top:20px;
}
.header-table{
    width:100%;
}
.confirm-frame .loadingimg img{
    width:50px;
    height: 50px;
}
.confirm-frame .loadingimg{
    display: none;
    text-align: center;
}
.loadingimg{
    position:absolute;
    margin-top:20px;
    margin-right:0px;
}
.confirm-frame{
  
}
.loadingimg .loading-text{
    top:-20px;
    font-size:12px;
    color:rgba(0, 0, 0, 0.5);
    position:relative;

}
.report-other-button-container {
    display:inline-block;
    width:auto;
    margin-right:5%;
    margin-top:5px;
    position:relative;
    background-color: white;
    float: right;
   
    

    
}
.sub-containers {
    display: inline-block;
    width:auto;
    border:solid;
    padding:2px auto;
    border-width:1px;
    border-radius:2px;
    -webkit-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-color:black;

    
}
.svg-btn,.text-btn{
    float:left;
    padding:4px 4px 1px 4px;
    font-size: 12px;
}
.text-btn{
    padding-top:6px;
}
.svg-btn svg{
    width:20px;
    height:20px;
}
.user-img img{
    width:30px;
    height:30px;
    cursor: pointer;
}
.user-account{
 position: fixed;
 right: 0px;
 margin-right:50px;

}
.user-account .menu-content{
   padding-top:10px;
}
.user-menus .menu-content{
border-bottom: solid;
border-width:1px;
border-color:rgba(0, 0, 0, 0.5);
}
.user-menus .menu-content:hover{
    border-color:purple;
}
.School-name-info{
    background-color: black;
    color:white;
    padding:10px;
    text-align: center;
}
.user-menus {
    width:150px;
    margin-top:10px;
    position: absolute;
    display: none;
    background-color: white;
    padding:10px 10px 10px 10px;
    margin-left:-100px;
   
    border-radius:3px;
    -webkit-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    box-shadow:1px 1px 4px 1px rgba(12, 11, 11,0.2);
    -webkit-box-shadow:1px 1px 4px 1px rgba(12, 11, 11,0.2);
    -ms-box-shadow:1px 1px 4px 1px rgba(12, 11, 11,0.2);
    -o-box-shadow:1px 1px 4px 1px rgba(12, 11, 11,0.2);


}
.user-menus a{
    color:black;
    font-size:14px;
    text-decoration: none;
}
.edit-marks-popup{
    position: fixed;
    top:0px;
    width:100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    left: 0px;
    display: none;
    
   
}
.cancel-edit-marks{
font-size:18px;
width:100px;
height:100px;
float:right;
color:red;
padding:10px 10px 10px 10px;
cursor: pointer;
}
.edit-marks-container .edit-marks-sub-poup{
    background-color: white;
    width:40%;
    height: auto;
    margin-left:35%;
    margin-top:200px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    padding-bottom:20px;
}

.edit-marks-container  .edit-popup-event{
    cursor: pointer;
    border:solid;
    padding:5px 5px 5px 5px;
    background-color: green;
    color:white;
    border-width: 1px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
}
.edit-marks-container .mark-brief-info{
    padding-top:20px;
    text-align: center;
}
.edit-marks-container .mark-brief-info p{
    font-size: 20px;
}
.field-edit-mark,.update-button-field{

    text-align: center;
    margin-top:10px;
}
.field-edit-mark input{
    outline: none;
    text-align: center;
    padding:5px 5px 5px 5px;
    border-top:none;
    border-left:none;
    border-right:none;
}
.edit-marks-popup button{
    padding:10px 10px 10px 10px;
    background-color: green;
    border-color:white;
    color:white;
    font-size:16px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    cursor: pointer;
}

/* date input */
.date-input-container{
    display:inline-block;
    width:80%;
    height:auto;
    padding-left:15%;
}
.date-input-container .date-select{
    float:left;
    width:100px;

}
.base-nav-bar a{
    text-decoration: none;
    color:black;
}
.Account-btn{

    padding:10px 10px 10px 10px;
    border:solid;
    margin-bottom:10px;
    text-align: center;
    font-size: 18px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-color:purple;
    color:purple;
    border-width: 3px;
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4);
}
.Account-btn:hover{
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.0);
    
}
.error-img-container img{
    width:100%;
    padding-top:100px;
}
.searchadvances{
    position:Fixed
}
     .searchadvances .search-key{
        outline: none;
        width:50%;
        margin-top:40px;
        padding:10px 10px 10px 10px;
        border-radius:5px;
        -webkit-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        border:none;
     }
.searchadvances{
    text-align:center;
    margin-top:0px;
    position:fixed;
    background-color:rgba(0, 0, 0, 0.5);
    padding:10px 10px 10px 10px;
    width:100%;
    box-shadow:2px 2px 2px 2px rgba(0, 0, 0, 0.5);
    top:0px;
    left:0px;
    height:100%;
    z-index:1000;
    display:none;
}
.advance-search{
    text-align:left;
    width:40%;
    margin-left:2%;
    background-color:white;
    margin-top:10px;
    padding:8px 8px 8px 8px;
    display:inline-block;
    border-radius: 5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    height: 100px;
    
    
}
.search-btn{
    clear:left;
    margin-left:58%;
}
.search-btn button{
    position: relative;
    font-size: 16px;
    border: solid;
    border-color:black;
    border-width:1px;
    padding:5px 5px 5px 5px;
    width:200px;
    top:-20px;
    background-color: purple;
    color:white;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-color: purple;
    cursor: pointer;

}
.advance-search .title-function{
    font-size:20px;
    text-align:center;
}
.advance-search .searchtype{
    border-bottom:solid;
    border-bottom-color:purple;
    border-bottom-width:1px;
    border-bottom-color:purple;
    padding:10px 10px 10px 10px;
    width:100px;
    float:left;
    margin-left:20px;
}
.Close-search{
    color:red;
    position: relative;
    top:20px;
    font-size:40px;
    position: absolute;
    border:solid;
    border-color: white;
    width:50px;
    right:0px;
    margin-right:10%;
    border-radius: 50%;
    cursor: pointer;
   
}
.school-term-container{
    display:inline-block;
    border-left:solid;
    border-width:1px;
    padding-left:20px;
    padding-bottom: 30px;
    border-color:purple;
}
.school-term-container .terms-heading{
    padding-bottom:10px;
}
.school-term-container .term-sub-con{
    font-size:14px;
}
.school-term-container .term-sub-con{
    width:100%;
    display: inline-block;
    border-bottom: solid;
    padding-bottom:10px;
    padding-top:10px;
    border-width:1px;
    border-color:purple;
}
.school-term-container .term-sequences{
    display: inline-block;
    width:100%;

}
.school-term-container .term-seq{
    font-size:13px;
    padding-bottom:10px;
    border-bottom: dotted;
    border-width:1px;
}
.school-term-container .seq-div{
    padding-top:10px;
    font-size:12px;
    float: left;
    width:40%;
}
.school-term-container .term-main-sub{
    display: inline-block;
    width:100%;
}
.school-term-container .term-info{
    float: left;
    cursor: pointer;
}
.school-term-container .term-del{
    float: right;
    cursor: pointer;
    border: solid;
    padding:5px 5px 5px 5px;
    border-width:1px;
}
.delete-permission-container{
    position: fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    
}
.delete-permission-sub-con{
    background-color: white;
    width:50%;
    height: 200px;
    margin-left:25%;
    padding-top:20px;
    margin-top:100px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;

}
.btn-container{
    display: inline-block;
    width:55%;
    margin-top:50px;
}
.delete-permission-sub-con .cancel-del-term,.delete-permission-sub-con .delete-term{
width:150px;
border:solid;
float: left;
margin:5px;
padding:5px 5px 5px 5px;
border-color: black;
color:black
}
.delete-permission-sub-con p{
font-size:14px;
color:black
}
.classroom-menu-button a{
text-decoration: none;
}
.normalise-data{
    border:solid;
    width:110px;
    text-align:center;
    padding:4px 4px 4px 4px;
    box-shadow:-1px 5px 2px  rgba(0,0,0,0.2);
    -webkit-box-shadow:-1px 5px 2px  rgba(0,0,0,0.2);
    -ms-box-shadow:-1px 5px 2px  rgba(0,0,0,0.2);
    -o-box-shadow:-1px 5px 2px  rgba(0,0,0,0.2);
    border-radius:4px;
    -webkit-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    border-width:1px;
    border-color:purple;
    color:purple;
    font-size:14px;

}
.display-board-container{
    position: fixed;
    width:400px;
    height: 400px;
    background-color: black;
    right:0px;
    margin-top:50px;
    margin-right:20px;
    box-shadow:2px 2px 2px 2px inset white;
    display: none;
}
.board-infomation p{
    color:white;
    text-align: center;
    font-size:14px;
}
.board-infomation{
    max-height: 400px;
    overflow: hidden;
}
.board-info{
    max-height: 300px;
    overflow-y: auto;
}
.board-info-heading{
    text-align: center;
    font-size: 14px;
}
.classroom-board-button-con{
    bottom:0px;
    position: absolute;
    display: inline-block;
    padding:8px 5px 5px 10px;

}
.confirm-remove{
    float: left;
    background-color: white;
    color:black;
    font-size: 12px;
    padding:5px 5px 5px;
}
.info-con{
    color:white;
    padding-left:10px;
    font-size:12px;
}
.header-h{
    color:white;
}
.select-subjects-container{
    margin-top:40px;
    border-top:solid;
    border-width:2px;
    border-color:purple;
    width:70%;
    margin-left:25%;
    padding-top:5px;
    display: inline-block;
    
}
.classrooms-display-container,.subjects-display-container{
    text-align: center;
    display: inline-block;
    padding:10px 10px 10px 10px;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    padding-top:10px;
    top:0px;
    width:20%;
    height: 100%;
    left:0px;
    z-index: 1000;
    border-right:solid;
    border-color: purple;
    border-right-width:3px;
    display: none;
}
.classrooms-display-container .class-rooms,.subjects-display-container .class-subject{
    float: left;
    margin-left:5px;
    margin-top: 3px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.4);
    padding:5px 5px 5px 5px;
    border-radius:3px;
    -webkit-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    color:purple;
    background-color: white;
}
.classrooms-display-container a,.subject-sub-container a{
    font-size: 12px;
    color:purple;
}
.select-subjects-subject-container{
    background-color:white;
    min-height: 400px;
    max-height:500px;
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;

}
.select-subject{
    padding-top:15px;
    font-size:14px;
    padding-bottom:10px;
    padding-left:15px;

}
.subject-container{
    max-height: 450px;
    overflow-y: auto;
}
.subject-sub-container{
    display: inline-block;
    width:100%;
    border-bottom: solid;
    padding-top:3px;
    padding-bottom:3px;
    border-bottom-width:1px;

}
.subject-sub-container:first-child{
    border-top:solid;
    border-width:1px;
}
.subject-container a{
    text-decoration: none;
    border:none
}
.subject-text{
    float:left;
    margin-left:10px;
    font-size:13px;
}
.classrooms-display-container h4,.subjects-display-container h4{
    color:white;
}
.subclassroom-container,.subject-sub-container{
    max-height: 300px;
    overflow-y:auto;
    padding-top:10px;
    padding-bottom:10px;
    width:90%;

  }
  .menu-container-general{
    display: inline-block;
    width:100%;
  }

  .submenu-con-general{
    float:left;
    font-size:13px;
    background-color: black;
    color:white;
    padding:5px 5px 5px 5px;
    cursor:pointer;
    border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    -webkit-border-radius: 2px;
    margin-left:5px;
    margin-top:5px;
  }
  .close-rooms,.close-subjects{
    float: right;
    color:red;
    cursor: pointer;
  }
  .classrooms-display-container .class-rooms,.subjects-display-container .class-subject{
    width: 70%;

}
.marks-entering-heading{
    font-size: 13px;
    padding-top:10px;
    padding-bottom:10px;
}
.marks-entering-container{
    background-color: white;
    padding:10px 10px 10px 10px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
}
.marks-entering-container input{
    border:none;
    outline:none;
    text-align: center;
    border-bottom:solid;
    border-bottom-width:1px;
    border-bottom-color:green;
}
.marks-entering-container table,.marks-entering-container table td,.marks-entering-container table th{
    border:solid;
    border-width:1px;
    font-size: 13px;
}
.submit-button-marks button{
    padding:2px 2px 2px 3px;
    background-color: green;
    border:none;
    cursor: pointer;
    color:white;
    display: none;
    margin-top:5px;
}
.resetmarsk-container{
    width:40%;
    text-align: center;
    position:fixed;
    z-index: 500;
    background-color: white;
    padding:10px 10px 10px 10px;
    box-shadow:1px 1px 5px 1px black;
    -webkit-box-shadow:1px 1px 5px 1px black;
    -ms-box-shadow:1px 1px 5px 1px black;
    -o-box-shadow:1px 1px 5px 1px black;
    margin-left:10%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    display: none;

}
.resetmarsk-container p{
    font-size:13px;
}
.menu-con-for-marks-reset{
    display: inline-block;
}
.menu-sub{
    float: left;
    margin:10px;
    border:solid;
    padding:5px 5px 5px 5px;
    color:black;
    border-width:2px;
    font-size:14px;
    cursor: pointer;

}
.menu-sub:hover{
    background-color: purple;
    color:white;
}
.classroom-update{
    margin:10px;
    
}
.classroom-update select{
    padding:5px 5px 5px 5px;
    width:95%;
    outline: none;
}
.classroom-update{
    display: none;
}
.change-student-pic{
    margin-left:30%;
    margin-top:100px;
    width:40%;
}
.school-logo-display-con img{
    width:200px;
    height: 200px;
}
.change-student-pic .update-school-profile{
    width:100%;
    height: auto;
}
.navigate-container-info-menu{
    display: inline-block;
    width:80%;
    background-color: gray;
    border-top:solid;
    
    border-left:solid;
    border-color: gray;
    border-radius: 5px;
    
}
.navigate-container-info-menu .menu-detail{
 
    float:left;
 padding:3px;
 font-size:14px;
 cursor: pointer;
 display: inline-block;
 background-color: gray;


}
.navigate-container-info-menu .icon-con{
    float:left;
}
.navigate-container-info-menu .icon-text{
    padding-top:4px;
    padding-left:5px;
    padding-right:5px;
    
}
.navigate-container-info-menu .-report,.navigate-container-info-menu .-dp{
    color:white;
    border:solid;
    border-width: 1px;
}
.navigate-container-info-menu .icon-con img{
    width:20px;
    height: 20px;
    
}
.navigate-container-info-menu .-detail{
    background-color: white;
    color: black;
    border:solid;
    border-width: 1px;
    border-color: white;
}
.sub-id-container{
    display: inline-block;
}
.student-report-container,.student-dp-container,.student-id-card-container{
min-height:400px;
width:100%;
display: none;
max-height: auto;

}
.student-dp-container{
    margin-top:20px;
}
.student-dp-container .update-school-profile{
    height: auto;
    margin-left:25%;
}
.no-reports{
    text-align:center;
    padding-top:25px;
}
.student-id-card-container{
  
    width:80%;
    margin-top:40px;
    margin-left:15%;
}
.id-front-view,.id-back-view{
width:325px;
height:204px;
border:solid;
border-width:2px;
border-radius:3px;
float: left;
margin-left:10px;
}
.student-id-card-container article{
    text-align: left;
    font-size:10px;
}
.student-id-card-container table{
    width:100%;
}
.student-card-img img{
 width:90px;
 height:100px;
}
.student-card-img{
    text-align:center;
}
.title-card{
    font-size:8px; 
    color:green;
    padding:2px 2px 2px 2px;
}
.info-card{
    font-size:12px;
    
}
.seq-menu-conatiner-sub-con{
    display:inline-block;
    position: relative;
    top:40px;
    color:black;
    background-color:rgba(164, 68, 143,0.6);
    margin-left:20%;
    width:63.5%;
    border-radius:10px;
    -webkit-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    
   
}
.seq-menu-conatiner-sub-con .seq-menu{
    float:left;
    padding:5px;
    border:solid;
    margin-left:2px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    border-width:2px;
    border-color:white;
    font-size:12px;
    background-color: rgb(116, 10, 116);
    color:white;
    
}
.seq-menu-conatiner-sub-con .seq-menu:hover{
    background-color: rgba(164, 68, 143,0.6);
}
.adminstrative-panel-container{
    width:70%;
    margin-top:40px;
    margin-left:20%;
    position: relative;
}
.adminstrative-panel-container .admin-panel-one{
display: inline-block;
width:100%;
background-color: white;
padding:10px 10px 10px 10px;
}
.adminstrative-panel-container .admin-panel-one .admin-panel-options
{
    width:100%;
    display: inline-block;
    border-top:solid;
    border-bottom:solid;
    padding-top:2px;
    padding-bottom:2px;
    border-width:1px;
}
.adminstrative-panel-container .admin-panel-lable{
    float:left;
}
.adminstrative-panel-container button{
    padding:5px 5px 5px 5px;
    margin-left:15%;
    margin-top:20px;
    background-color: purple;
    color:white;
    border:none;
    box-shadow: 2px 2px 4px 2px rgba(0,0, 0,0.3);
    -ms-box-shadow:2px 2px 4px 2px rgba(0,0, 0,0.3);
    -webkit-box-shadow:2px 2px 4px 2px rgba(0,0, 0,0.3);
    -o-box-shadow:2px 2px 4px 2px rgba(0,0, 0,0.3);
    border-radius:2px;
    -webkit-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    -ms-border-radius:2px;

}
.id-container-mun{
    margin-bottom:10px;
}
.id-container-mun a{
    text-decoration: none;
    display: inline-block;
}
.print-id-m{
    float: left;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
    padding:5px 5px 5px 5px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    font-size:13px;
}
.print-id-m:hover{
    color:white;
    background-color: purple;
}
.search-result-container{
    width:70%;
    margin-left:20%;
    background-color: white;
    min-height: 300px;
    margin-top:20px;
    padding:10px;
    margin-bottom:30px;
}
.search-nothing-to-display{
    text-align: center;
    padding-top:100px;
}
.search-results{
    display:inline-block;
    width:100%;
    border-bottom: solid;
    padding-top:5px;
    padding-bottom:5px;
    border-width: 1px;
    border-color:black;
    box-shadow: 1px 1px 1px 1px rgba(18, 18, 18,0.3);
    -webkit-box-shadow: 1px 1px 1px 1px rgba(18, 18, 18,0.3);
    -ms-box-shadow: 1px 1px 1px 1px rgba(18, 18, 18,0.3);
    -o-box-shadow: 1px 1px 1px 1px rgba(18, 18, 18,0.3);
}
.search-results:hover{
    background-color: purple;
    color:white;

}
.home-contain {
    width:70%;
    position: absolute;
}
.home-contain article{
    text-align: center;
}
.home-contain  h1{
    font-size:70px;
    padding:10px 10px 10px 10px;
    color:white;
    text-shadow: 1px 1px 1px  black;
    -webkit-shadow: 1px 1px 1px  black;
    -moz-shadow: 1px 3px 1px  black;
    -o-shadow:1px 3px 1px  black;
    color:white;
    
    font-family: 'Roboto Slab', serif;
}
.home-contain h3{
 font-size:30px;
    color:white;
    text-shadow: 1px 1px 1px  black;
    -webkit-shadow: 1px 1px 1px  black;
    -moz-shadow: 1px 1px 1px  black;
    -o-shadow: 1px 1px 1px  black;
    color:white;
    font-family: 'Roboto Slab', serif;


}
.sub-home-container {
    background-color: rgba(225,225,225,0.2);
}

.info-container{
    width:95%;
    height:400px;
    display:inline-block;
    padding:100px 40px 10px 10px;
}

.info-container  .info-img {
    width:55%;
    float: left;

}
.info-container  .info-img img{
    width:100%;
}
.info-content{
    float: right;
    width:40%;
    font-family: 'Rufina', serif;
}
.info-content h2{
    font-size: 55px;
    text-align: center;
}
.info-content h2 .span-m{
    font-size:10px;
    transition: font-size 2s;
}
.changefont{
    font-size: 72px;
}
.info-content p{
    color:green;
}
.close-window{
    float: right;
    padding:4px 4px 4px 4px;
    cursor: pointer;
    color:red;
}
.select-academic-year-subjects p{
font-size: 15px;
text-align: left;
}
.select-academic-year-subjects a{
    text-decoration: none;
    color:white;
    font-size: 15px;

}
.select-academic-year-subjects .school-year:hover{
    background-color:purple;
}
.select-academic-year-subjects .school-year{
    padding:4px 4px 4px 4px ;
    background-color: gray;
    border-bottom: solid;
    border-color: white;
    border-width: 1px;
}
.select-academic-year-subjects{
    position:relative;
    background-color: white;
    z-index: 2000;
    width:100%;
    border:solid;
    border-width: 2px;
    padding:3px 3px 3px 3px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-color: purple;
  
    margin-top:50px;
    box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow: 1px 1px 4px 1px rgba(180, 81, 81, 0.3);
    -ms-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.3);
    -o-box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.3);

}
.area-container{
    width: auto;
    max-height: 300px;
    overflow-y: auto;
}
.area-container .no-found{
    padding:20px 20px 20px 20px;
    margin-bottom: 20px;
}

.import-btn img{
    width:20px;
    height:20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  display: none;
}
.import-btn span{
    position: relative;
    top:-4px;
    font-size: 14px;
}
.processing-subject-forms .import-btn{
 padding:10px 10px 10px 10px;
 margin-left:25%;
 margin-top:50px;
 background-color: green;
 border-color: green;
 color: white;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -ms-border-radius: 5px;
 -o-border-radius: 5px;
}
.warning-pop-up{
    position: fixed;
    width:100%;
    height: 100%;
    z-index: 3000;
    top:0px;
    background-color: rgba(0, 0, 0, 0.4);
    left:0px;
    display: none;
}
.warning-message{
    margin-left:25%;
    line-height: 1;
    width:40%;
    background-color: white;
    top:0px;
    margin-top:80px;
    box-shadow: 1px 1px 1px 1px black;
    padding:10px 10px 10px 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.warning-message p{
    text-align: center;
}
.warning-message button{
    padding:4px 4px 4px 4px;
}
.warning-message .left{
    background-color: green;
    border-color:green;
    color:white;
    padding:5px;
   width:50px;
    margin-left:30%;
    border-radius: 3px;
    cursor: pointer;
}
.warning-message .right{
    background-color: red;
    border-color:red;
    color:white;
    padding:5px;
    margin-left:20px;
    border-radius: 3px;
    cursor: pointer;
    
}
.import-students{
    font-size: 15px;
    border:solid;
    border-color: purple;
    width:13%;
    text-align: center;
    padding:10px 10px 10px 10px;
    position: absolute;
    margin-top:10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    background-color: purple;
    color: white;
    margin-left:3%;
}
.classroom-info a{
    text-decoration: none;
}
.warning-annual-report{
    display: none;
}
.display-when-error-occured{
    display: none;
 position:fixed;
 background-color: rgba(0,0,0,0.5);
 top:0px;
 left:0px;
 width:100%;
 height: 100%;
 z-index: 1000;
}
.div-info{
    border-radius: 10px;
    background-color: white;
    width:50%;
    margin-left:30%;
    margin-top:100px;
}
.div-info .p-info{
    padding:10px 10px 10px;
    text-align: center;
}
.div-info{
    text-align: center;
}
.edit-term-container{
    width:80%;
    height: 300px;
    margin-left:18%;
    
    margin-top:20px;
    display: inline-block;
}
.edit-term-name,.delete-sequences{
    background-color: white;
    width:40%;
    min-height: 200px;
    max-height: auto;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    float: left;
    margin-left: 10px;
    padding-top:40px;
    padding-left:30px;
   
}
.sequences-display{
    background-color: gray;
    border:solid;
    border-color: white;
    padding:10px;
    color:white;
    font-size: 14px;
}
.edit-term-name input{
    padding:10px 10px 10px 10px;
    text-align: center;
    margin-top:10px;
    box-shadow: 1px 1px 1px 1px black;
    -webkit-box-shadow: 1px 1px 1px 1px black;
    -ms-box-shadow: 1px 1px 1px 1px black;
    -o-box-shadow: 1px 1px 1px 1px black;
    outline: none;

}
.edit-term-name button{
    height: 40px;
    background-color: purple;
    color:white;
}
@media screen and (max-width:900px){
    .import-students{
       margin-top:40px;
        position: relative;
        width:80%;
        margin-left:5%;
} 
}
.display-roll-calls{
    display:inline-block;
    width:70%;
    margin-left:20%;
    margin-top:5px;
    background-color: white;

    min-height:200px;
    
}
.display-roll-calls ol{
    list-style: none;
}
.display-roll-calls .enroll-note{

}
.subject-roll-call-con{
    display: inline-block;
    width: 100%;
}
.display-roll-calls li {

    width:30%;
    float: left;
    background-color: white;
    margin:4px;
    padding:10px 3px 10px 3px;
    
}
.display-roll-calls li:nth-child(even){
   
    display: block;
    background-color: rgb(23, 98, 148);
    color:white;
}

.first-sectment,.second-sectment{
    display: inline-block;
    width:100%;
}
.first-sectment .rollcal-classroom{
 text-align: center;

 padding:3px 3px 3px 3px;
 background-color: rgba(0,0,0,0.7);
 color:white;

}
.display-roll-calls li .attendance-note{
 float: left;
 width:auto;
 padding:2px 2px 2px 2px;
 text-align: center;
 
 font-size:12px;
 
}
.time-sectment{
    float: right;
    font-size: 12px;
    border-top:solid;
    border-width: 1px;
    padding-top:2px;
    border-color:rgba(0,0,0,0.2);
} 
.display-roll-calls p{
    font-size: 14px;
  
    padding:5px 5px 5px 5px;

    margin-bottom: -14px;
    color:rgba(0,0,0,0.8)
}
.display-roll-calls,.period-roll-call-con{
    margin-bottom:20px;
}
.roll-calls-menu{
    background-color: transparent;
    display: inline-block;
    width:100%;
 
    
}

.roll-calls-menu .roll-call-subject,.roll-calls-menu .roll-call-period{
    float: left;
    padding:10px 5px 10px 5px;
    border-top:solid;
   
    border-left:solid;
    border-color:gray;
    width:30%;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    color:purple;
    border-bottom-width: 1px;
 
    
}
.roll-calls-menu .roll-call-period{
    box-shadow: 1px 1px   1px inset rgba(0,0,0,0.6);
}

.roll-call-con-sub{
    float:left;
    width:30%;
    height: 0px;
    background-color: gray;
    padding:21px;
}
.subject-roll-call-con{
    display: none;
}
.display-roll-calls a{
    text-decoration: none;
}
.View-rollcall{
box-shadow: 1px 1px 1px 1px black;
-webkit-box-shadow: 1px 1px 1px 1px black;
-ms-box-shadow: 1px 1px 1px 1px black;
-o-box-shadow: 1px 1px 1px 1px black;
width:100px;
text-align: center;
padding:2px 2px 2px 2px;
background-color: white;
border-radius: 2px ;
-webkit-border-radius: 2px ;
-ms-border-radius: 2px ;
-o-border-radius: 2px ;
}
.search-by-date{

width:300px;

float: right;
}
.search-by-date input{
outline: none;
text-align: center;
}
.search-by-date .search-date-con{
display:inline-block;
margin-top:15px;
margin-right:15px;


}
.searchinput,.searchbtn{
float: left;

}
.searchbtn  button{
background-color: purple;
color:white;
}
.roll-call-subject ,.roll-call-period{
    font-size: 12px;
}
.searchloader{
    display: none;
}
.attendance-btn-loader{
    display: none;
}

.rocall-deatil{
    width:70%;
    margin-left:20%;
    background-color: white;
    margin-top:10px;
}
.rocall-deatil table{
    width:100%;
    font-size: 18px;
    font-family:'Times New Roman', Times, serif    }
.rocall-deatil table td,.rocall-deatil table th {
    border:solid;
    border-width:1px;
    padding-left:4px;
    padding:2px 2px 2px 2px;
}
.rocall-deatil table tr:nth-child(even){
    background-color: gray;
    color:white;
}
.rocall-deatil table th {
    background-color: gray;
    
}
.studentattendance button{
color:white;
background-color: purple;
}
@media screen and (min-width:150px) and (max-width:400px){
    .rocall-deatil{
        width:100%;
        margin-left:0%;
        background-color: white;
        margin-top:10px;
    }
    .classroom-menu-container .clroom{
        text-decoration: none;
          float:left;
          margin-left:5px;
          border:solid;
          border-color: white;
          padding:2px 2px 2px 2px;
     
          font-size: 12px;
      }
    .sub-menu-nav-scroll{
        max-height:75%;
    
    }
    .report-other-button-container{
        width:auto;
        float: right;
        margin-right:5px;
    }
    .edit-term-container{
        width:100%;
        height: 300px;
        margin-left:8%;
        
        margin-top:40px;
        display: inline-block;
    }
    .edit-term-name,.delete-sequences{
        background-color: white;
        width:80%;
        margin-top: 10px;
        padding-top:40px;
        padding-left:30px;
       
    }

   
    .div-info{
        border-radius: 10px;
        background-color: white;
        width:80%;
        margin-left:10%;
        margin-top:100px;
    }
    .classroom-info-conatiner{
        padding-top: 0px;
    }
    .info-container{
        width:95%;
        height:400px;
        display:inline-block;
        padding:100px 0px 0px 0px;
    }
    .span-resp{
        font-size: 30px;
    }
    .info-container  .info-img {
        width:100%;
        clear: right;
    
    }
    .info-container  .info-img img{
        width:100%;
    }
    .info-content{
        clear: right;
        width:90%;
        
        overflow: hidden;
        margin-left:2%;
    }
    .info-content h2{
        font-size: 55px;
        text-align: center;
    }



   
    .seq-menu-conatiner-sub-con{
        width:90%;
        margin-left:10%;
        margin-top:25px;
        padding-top:10px;
        padding-bottom:10px;
        margin-bottom:2px;
    }
    .navigate-container-info-menu{
        margin-top:30px;
        width:80%;
        margin-left:10%;
        
    }
    .navigate-container-info-menu .icon-text{
        padding-left:2px;
        padding-right:2px;
        
    }
    .navigate-container-info-menu .menu-detail{
        font-size: 12px;
    }
    .change-student-pic{
        margin-left:10%;
        margin-top:100px;
        width:80%;
    }
    .delet-button-con{
        width:50%;
        margin-left:15%;
    }
    .resetmarsk-container{
        width:80%;
        text-align: center;
        position:fixed;
        margin-left:-1%;
    
    }
    .subclassroom-container,.subject-sub-container{
        margin-left:10%;
    }
    .submit-button-marks button{

        margin-left:5%;
    }
    .alter-widths{
        width:100%;
    }
    .form-container table{
        width:100%;
    }
    .form-container{
        margin-left:-15px;
    }

    .marks-entering-container input{
        width:50px;
    }
    .submenu-con-general{
        margin-left:5px;
        margin-bottom:5px;
    }

    .classrooms-display-container,.subjects-display-container{

        width:100%;
    }
    .close-rooms,.close-subjects{
        margin-right:10%;
      }
    .search-btn button{
        width:100px;
    }
    .search-btn {
        position: absolute;
        margin-top:120px;
        left:120px;
    }
    .select-subjects-container{
        width:90%;
        margin-left:8%;
        padding-bottom: 30px;
    }
    .display-board-container{
        margin-top:40px;
        top:0px;
        left:0px;
        width:300px;
        height:300px;
    }
    .board-info{
        max-height: 200px;
        overflow-y: auto;
    }
    .animation-display-container{
        margin-top:15px;
    }
    .delete-permission-sub-con{
        background-color: white;
        width:90%;
        height: 300px;
        margin-left:5%;
    
    }
   
    .Close-search{
        top:20px;
        font-size:15px;
        border:solid;
        border-color: white;
        width:50px;
        right:0px;
        margin-right:10%;
        border-radius:none;
        border:none;

       
    }
    .search-btn{
        clear:left;
        margin-left:18%;
        top:20px;
    }
    .searchadvances .search-key{
        width:70%;
        margin-left:-15px;
    }
    .search-btn button{
        top:10px;
    }
    .advance-search{
        text-align:left;
        width:80%;
        margin-left:-5%;
        
    }
    .Account-btn{
        width:55%;
        margin-left:20%;
    }
    /* date input */
   .date-input-container select{
    outline: none;
    border:none;
   }
.date-input-container{
    display:inline-block;
    width: 90%;
    height:auto;
    padding-left:0%;
    text-align: center;
    border-bottom:solid;
    border-width:1px;
    border-color:purple;
}
.date-input-container .date-select{
    float:left;
    width:30%;

}
    .user-account{
        position: fixed;
        right: none;
        margin-left:50%;
        left:0px;   
        width:30px;
       
       }
    .report-menu-contro-nav-container .report-menu-contro
    {
        width:25%;
    }
    .report-menu-contro-nav-container {
        width:90%;
        font-size:12px;
        margin-left:10px;
        
        }
        .report-menu-contro-nav-container .block-nav{
            width:10%;
        }


    .display-statistic-report table .lable, .display-statistic-report table{
        font-size:12px;
    }
    .display-statistic-report table{
        overflow-x:auto;
        padding:0px;
    }
    .display-classroom-container{
        margin-left:0px;
        width:100%;
        overflow: hidden;
    }
    .term-menus-container{
        box-shadow: none;
    }
    .control-menu{
        width:100%;
        margin-top:10px;
    }
    .control-menu .menu-div{
        margin-top:4px;
    
    }

    .term-menus-container{
        margin-top:10px;
    }
    .close-the-process{
        position:absolute;
        width:100px;
        right:-40px;
        margin-top:-30px;
        font-size:20px;
        color:red;
    }
    .confirm-frame,.warning-message-report,.option-two-frame-terms,.option-select-container  .pop-info,.option-one-frame-sequences{

        width:80%;
        height:300px;
        margin-left:20px;
    }
    .option-select-container{
        width:95%;
        margin-left:2%;
        margin-top:100px;
        padding-bottom: 60px;
    }
    .classroom-container  .generate-report{
        top:55px;
      
    }
    .classroom-info-conatiner .classroom-info{
        padding-top:50px;
        text-align: center;
        width:100%;
        float: left;
   
    }
    .classroom-info-conatiner .accademic-year{
        padding-top:1px;
        font-size:12px;
        color: rgba(0, 0, 0,0.4);
    }
    .classroom-info .cls-name{
     font-size:40px;
    }
    .classroom-student-teacher-count {
        text-align:center;
        width:80%;
        float: left;
        border: solid;
        border-width:1px;
        padding:20px 5px 20px 5px;
        margin-top:5px;
        margin-left:0px;
        margin-left:8%;
    }
    
    .classroom-student-teacher-count .type-icon svg{
      width:100px;
      height:100px;
    }

    .sub-class-menu-container{
        display:inline-block;
        width:100%;
        font-size: 12px;
    }
  
    
    .classroom-container{
        margin-top:100px;
        width:80%;
        min-height:400px;
        max-height:auto;  
        margin-left:12%;
        overflow-x: auto;
    }
    
    .dashboard-normal-users{
        display:inline-block;
        width:90%;
        margin-left:10%;
        margin-top:50px;
        padding:0px 0px 50px 0px;

    }
    .Classroom-teacher-teaching,.user-info-div-container{
        float:left;
        width:90%;
        background-color:white;
        margin:auto 0px;
        margin-top:10px;
        margin-left:15px;
    }

    
    
    .forms-container{
        padding-left:0px;
    }
    .control-panel-container{
        width:100%;
        margin-left:0%;
        margin-top:50px;
    }
    .remove-and-add-teacher-admin,.set-mark-filling-accademic-year{

        width:100%;
        margin:5px;

    }
    .schoolaccount-container{
        padding-top:60px;
        margin-left:10%;
        width:90%;
    }
    .update-school-info{
        width:90%;
        margin-left:-10px;
    }
    .update-school-profile,.change-password{
        width:90%;
    }
    .settings-body-container{
        width:90%;
        margin-top:0px;
        padding-top:50px;
        font-size:14px;
    }
    .skoll_info_container{
        width:100%;
        margin-left:0%;
        margin-top:45px;
    }
    .skoll_info_container .skoll_logo img{
        width:80%;
        height:auto;
    }
    .skoll_info_container .skoll_logo{
        float:left;
        width:20%;
    }
    .skoll_info_container .skoll_info{
        float:left;
        width:80%;
        padding:0px;
    }

    .display-all-subjects-container{
        display:inline-block;
        width:100%;
        height:auto;
        overflow-y: auto;
        overflow-x:none;
        padding:15px 5px 15px 5px;
    }
    .coef-info{
        width:60%;
    }
    .add-user-container{
        display:inline-block;
        width:90%;
        margin-left:2%;
        margin-top:30px;
        background-color:white;
        padding:5px 10px 40px;
        margin-bottom:30px;
    }
    .add-user-form-container{
        float:left;
        width:80%;
        background-color:white;
        padding:15px 15px 15px 15px;
        margin-left:5%;
        padding-top:30px;
    }
    .animation-display-container{
        float:right;
        width:80%;
        background-color:white;
        padding-top:5px;
        padding-right:35px;
        text-align:center;
        
    }
    .all-teachers-view{
        margin-left:17%;
    }
    .subpop-up-container form button{
        padding:10px 10px 10px 10px;
        width:100px;
        margin-left:25%;
    }

    .subpop-up-container{
        width:90%;
        margin-left:5%;
        margin-top:50px;
    }
    
    .display-teacher-count, .display-student-count{
        width:90%;
        margin-left:-10px;
        float:left;
        margin-left:10px;
        height:150px;
        z-index:0;
    }
    .display-teacher-count svg, .display-student-count svg{
        width:25px;
        height:25px;
    }
    .other-activities-con{
        z-index:0;
        float:none;
        width:100%;
        position:relative;
        height:auto;
        right:0px;
        top:0px;
        padding-top:0px;
    }
    .show-activities-con{
       width:95%;
   }
   .chart-container{
    display:none;
   }
    .close-nav-menu{
        display:inherit;
    }
.base-nav-bar{
    width:0px;
    overflow:hidden;
    padding-left:0px;
    padding-right:0px;
    transition:width 1s;
}
.responsive-menu{
    padding-top:50px;
    position:absolute;
    margin-left:10px;
}
    .hd-logo-search{
        width:40%;
        margin-left:15px;
    }
    .hd-logo-search form .inputinitial{
        color:rgba(0,0,0,0.5);
        outline:none;
        padding:5px 1px 5px 1px;
        width:40%;
        border-top:none;
        border-right:none;
        border-left:none;
        border-bottom:solid;
        border-width:1px;
    }
 
    .header-container{
        display:inline-block;
        width:100%;
        background-color:purple;
        padding-top:5px;
    }
    .hd-logo{
        float:left;
        width:45%;
        margin-left:0%;
    }
    .sub-menu-container{
        width:20%;
        margin:2px;
    }
    .menu-btn-lable{
        display:none;
    }
    .menu-btn-container{
        margin-bottom:5px;
        float:right;
        width:35%;
    }
    
    .register-con-icon{
        display:none;
    }
    .register-con-form{
        width:100%;
    }
    .register-con .register-con-sub{
        margin-left:5%;
    }
    .reg-input{
        width:90%;
    }
    .register-con-form button{
        margin-left:20%;
        width:50%;
    }
    header{
        background-size:contain;
    }
    .home-login{
        width:80%;
        margin-right:4%;
    }
    .home-contain{
      display:none;
  } 
  .menu-item-lang{
      width:100%;
      margin:0px;
      padding:0px;
  }
  .sub-container-logo-con-lang{
      width:auto;
      margin:3px;
      float:right;
      position: absolute;
      margin-top: 40px;
      right:20px
  }
  .sub-container-logo-con-lang button{
      border:solid;
      border-width: 1px;
      color:purple;
  }
  .sub-container-logo-con-lang select{
      border:none;
  }
  .sub-container-menu{
      position:fixed;
      top:38px;
      width:0%;
      transition: width 1s;
      background-color: white;
      border-bottom: solid;
      border-width: 1px;
      border-color: purple;
      overflow: hidden;
      box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
      -webkit-box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
      -ms-box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
      -o-box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
      height: 100%;
  }
  .sub-container-menu a{
      color:purple;
      font-size:16px;
  }
  .tab-menu-container .menu-item{
      width:100%;
      border-top:solid;
      border-color:purple;
      border-width:1px;
      padding:3px;
      margin-top:0px;
      top:0px;
  }
  .create-account{
   
  
      position:relative;
      width:40%;
      border-radius:0px;
      border:none;
      border-top:solid;
      border-width:1px;
      margin-top:5px;
      right:0px;
      clear:right;
      width: 100%;
      
  }
  .mobile-menu{
      display:initial
  }
  .mobile-menu svg{
      width:30px;
      height:30px;
  }
  .teacher-table-container{
    width:100%;
    
}
.teacher-table-container table{
    width:100%;
    border-color:rgba(0,0,0,0.2);
    border-width:1px;
    padding:10px 10px 10px 10px;
    border-radius:3px;
   
    
}
.teacher-table-container table  th{
    font-size:14px;
    padding:5px 2px 2px 5px;
}
.teacher-table-container table tr{
    font-size:14px;
    width:100%;
    
}
.teacher-table-container table tr td{
    border:solid;
    border-color:rgba(0,0,0,0.1);
    border-width:1px;
    padding:5px 2px 2px 5px;
    width:auto;
}
.teacher-table-container  .small-cell{
    width:60px; 
    text-align:center;   
}
.skoll-logo{
    text-align:center;
    width:200px;
}
.skoll_info{
    width:auto;
text-align:center;
}
.skoll_info span{
padding:5px 5px 5px 5px;
}
.skoll-logo img{
width:150px;
height:150px;
border-radius:50%;
-webkit-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border:solid;
border-width:1px;
border-color:purple;
}
.skoll-name{
font-size:20px;
font-weight:bold;
}
.skoll-accyear{
font-size:14px;
}.skoll-moto{
font-size:18px;
font-weight:0;
}
.main_heading{
width:100%;
border-top:solid;
padding:10px 0px 0px 0px;
}
.list-container{
    width:70%;
    margin-left:15%;
    background-color: white;
    margin-top:80px;
    padding-top:50px;
    padding-bottom:50px;
    min-height:400px;
}


}

@media screen and (min-width:400px) and (max-width:600px){

    .rocall-deatil{
        width:100%;
        margin-left:0%;
        background-color: white;
        margin-top:10px;
    }
    .sub-menu-nav-scroll{
        max-height:75%;
    
    }
    .report-other-button-container{
        width:auto;
        float: right;
        margin-right:5px;
    }
    
    .edit-term-container{
        width:100%;
        height: 300px;
        margin-left:8%;
        
        margin-top:40px;
        display: inline-block;
    }
    .edit-term-name,.delete-sequences{
        background-color: white;
        width:80%;
        margin-top: 10px;
        padding-top:40px;
        padding-left:30px;
       
    }
    .div-info{
        border-radius: 10px;
        background-color: white;
        width:80%;
        margin-left:10%;
        margin-top:100px;
    }
    .info-container{
        width:95%;
        height:400px;
        display:inline-block;
        padding:100px 0px 0px 0px;
    }
    
    .info-container  .info-img {
        width:100%;
        clear: right;
    
    }
    .info-container  .info-img img{
        width:100%;
    }
    .info-content{
        clear: right;
        width:90%;
        
        overflow: hidden;
        margin-left:2%;
    }
    .info-content h2{
        font-size: 55px;
        text-align: center;
    }
    .seq-menu-conatiner-sub-con{
        width:90%;
        margin-left:10%;
        margin-top:25px;
        padding-top:10px;
        padding-bottom:10px;
    }
    .navigate-container-info-menu{
        margin-top:30px;
        width:80%;
        margin-left:10%;
        
    }
    .navigate-container-info-menu .icon-text{
        padding-left:2px;
        padding-right:2px;
        
    }
    .navigate-container-info-menu .menu-detail{
        font-size: 12px;
    } 
    .change-student-pic{
        margin-left:10%;
        margin-top:100px;
        width:80%;
    }
    .delet-button-con{
        width:40%;
        margin-left:5%;
    }
    .resetmarsk-container{
        width:80%;
        text-align: center;
        position:fixed;
        margin-left:-1%;
    
    }
    .subclassroom-container,.subject-sub-container{
        margin-left:10%;
    }
    .submit-button-marks button{
        margin-left:5%;
        margin-top:5px;
    }

    .alter-widths{
        width:100%;
    }
    .form-container table{
        width:100%;
    }
        .marks-entering-container input{
            width:50px;
        }
        .marks-entering-container{
         margin-left:-25px;
        }
    .marks-entering-container input{
        width:50px;
    }
    .classrooms-display-container,.subjects-display-container{

        width:100%;
    }
    .close-rooms,.close-subjects{
        margin-right:10%;
      }
    .display-board-container{
        margin-top:40px;
        top:0px;
        right:0px;
        width:300px;
        height:300px;
    }
    .board-info{
        max-height: 200px;
        overflow-y: auto;
    }
    .animation-display-container{
        margin-top:20px;
    }
    .delete-permission-sub-con{
        background-color: white;
        width:70%;
        height: 300px;
        margin-left:15%;
    
    }
    .btn-container{
        margin-left:10%;
    }
    .Close-search{
        top:20px;
        font-size:15px;
        border:solid;
        border-color: white;
        width:50px;
        right:0px;
        margin-right:10%;
        border-radius:none;
        border:none;

       
    }
    .search-btn{
        clear:left;
        margin-left:25%;
        top:20px;
    }
    .searchadvances .search-key{
        width:70%;
        margin-left:-15px;
    }
    .search-btn button{
        top:10px;
    }
    .advance-search{
        text-align:left;
        width:80%;
        margin-left:-5%;
        
    }
    .Account-btn{
        width:50%;
        margin-left:20%;
    }
      /* date input */
   .date-input-container select{
    outline: none;
    border:none;
   }
.date-input-container{
    display:inline-block;
    width: 90%;
    height:auto;
    padding-left:0%;
    text-align: center;
    border-bottom:solid;
    border-width:1px;
    border-color:purple;
}
.date-input-container .date-select{
    float:left;
    width:30%;

}

    .user-account{
        position: fixed;
        right: none;
        margin-left:50%;
        left:0px;
        width:30px;
       
       }
    .report-menu-contro-nav-container .report-menu-contro
    {
        width:25%;
    }
    .report-menu-contro-nav-container {
        width:95%;
        font-size:12px;
        margin-left:10px;
        
        }
        .report-menu-contro-nav-container .block-nav{
            width:10%;
        }
    .term-menus-container{
        box-shadow: none;
    }
    .display-statistic-report table .lable, .display-statistic-report table{
        font-size:12px;
    }
    .display-statistic-report table{
        overflow-x:auto;
        padding:0px;
    }
    .display-classroom-container{
        padding-top:40px;
        margin-left:0px;
        width:100%;
        overflow: hidden;
    }
    .control-menu{
        width:95%;
        margin-left:0px;
        margin-top:15px;
    }
    .term-menus-container{
        margin-top:10px;
    } 
    .close-the-process{
        position:absolute;
        width:100px;
        right:-40px;
        margin-top:-30px;
        font-size:20px;
        color:red;
    }
    .confirm-frame,.warning-message-report,.option-two-frame-terms,.option-select-container  .pop-info,.option-one-frame-sequences{

        width:80%;
        height:300px;
        margin-left:40px;
    }
    .option-select-container{
        width:95%;
        margin-left:2%;
        margin-top:100px;
        padding-bottom: 60px;
    }
   
    .classroom-container  .generate-report{
        top:55px;  
    }
    .classroom-info-conatiner .classroom-info{
        padding-top:50px;
        text-align: center;
        width:100%;
        float: left;
    }
    .classroom-info-conatiner .accademic-year{
        padding-top:1px;
        font-size:12px;
        color: rgba(0, 0, 0,0.4);
    }
    .classroom-info .cls-name{
     font-size:40px;
    }
    .classroom-student-teacher-count {
        text-align:center;
        width:80%;
        float: left;
        border: solid;
        border-width:1px;
        padding:20px 5px 20px 5px;
        margin-top:5px;
        margin-left:0px;
        margin-left:6%;
    }
    .sub-class-menu-container{
        display:inline-block;
        width:100%;
        font-size: 12px;
    }
   
    
    .classroom-container{
        margin-top:100px;
        width:80%;
        min-height:400px;
        max-height:auto;  
        margin-left:12%;
        overflow-x: auto;
    }
   
    .dashboard-normal-users{
        display:inline-block;
        width:90%;
        margin-left:10%;
        margin-top:50px;
        padding:0px 0px 50px 0px;

    }
    .Classroom-teacher-teaching,.user-info-div-container{
        float:left;
        width:90%;
        background-color:white;
        margin:auto 0px;
        margin-top:10px;
        margin-left:15px;
    }
    

    .forms-container{
        padding-left:0px;
    }
    .control-panel-container{
        width:100%;
        margin-left:0%;
        margin-top:50px;
    }
    .remove-and-add-teacher-admin,.set-mark-filling-accademic-year{

        width:100%;
        margin:5px;

    }
    .schoolaccount-container{
        padding-top:60px;
        margin-left:10%;
        width:90%;
    }
    .forms-container{
        padding-left:0px;
    }
    .control-panel-container{
        width:100%;
        margin-left:0%;
        margin-top:50px;
    }
    .remove-and-add-teacher-admin,.set-mark-filling-accademic-year{

        width:100%;
        margin:5px;

    }
    .schoolaccount-container{
        padding-top:60px;
        margin-left:10%;
        width:90%;
    } 
    .schoolaccount-container{
        padding-top:60px;
        margin-left:10%;
        width:90%;
    }
    .update-school-info{
        width:90%;
        margin-left:-10px;
    }
    .update-school-profile,.change-password{
        width:90%;
    }
    .settings-body-container{
        font-size:12px;
        width:100%;
        margin-top:0px;
        padding-top:50px;
        margin-left:0px;
    }
    .skoll_info_container{
        width:100%;
        margin-left:0%;
        margin-top:45px;
    }
    .skoll_info_container .skoll_logo img{
        width:80%;
        height:auto;
    }
    .skoll_info_container .skoll_logo{
        float:left;
        width:20%;
    }
    .skoll_info_container .skoll_info{
        float:left;
        width:80%;
        padding:0px;
    }
  
    .display-all-subjects-container{
        display:inline-block;
        width:100%;
        height:auto;
        overflow-y: auto;
        overflow-x:none;
        padding:15px 5px 15px 5px;
        margin:-20px;
    }
    .coef-info{
        width:50%;
    }
    .add-user-container{
        display:inline-block;
        width:80%;
        margin-left:8%;
        margin-top:30px;
        background-color:white;
        padding:5px 10px 40px;
        margin-bottom:30px;
    }
    .add-user-form-container{
        float:left;
        width:80%;
        background-color:white;
        padding:15px 15px 15px 15px;
        margin-left:10%;
        padding-top:30px;
    }
    .animation-display-container{
        float:right;
        width:80%;
        background-color:white;
        padding-top:5px;
        padding-right:10%;
        text-align:center;
        
    }
    .all-teachers-view{
        margin-left:25%;
    }
   
    .subpop-up-container form button{
        padding:10px 10px 10px 10px;
        width:100px;
        margin-left:25%;
    }

    .subpop-up-container{
        width:90%;
        margin-left:5%;
        margin-top:50px;
    }
    .display-teacher-count, .display-student-count{
        width:90%;
        margin-left:-10px;
        float:left;
        margin-left:10px;
        height:150px;
        z-index:0;
    }
    .display-teacher-count svg, .display-student-count svg{
        width:25px;
        height:25px;
    }
    .other-activities-con{
        z-index:0;
        float:none;
        width:100%;
        position:relative;
        height:auto;
        right:0px;
        top:0px;
        padding-top:0px;
    }
    .show-activities-con{
       width:95%;
   }
  
    .close-nav-menu{
        display:inherit;
    }
.base-nav-bar{
    width:0px;
    overflow:hidden;
    padding-left:0px;
    padding-right:0px;
    transition:width 1s;
}
.responsive-menu{
    padding-top:50px;
    position:absolute;
    margin-left:10px;
}
    .hd-logo-search{
        width:150px;
        margin-left:15px;
    }
    .hd-logo-search form .inputinitial{
        color:rgba(0,0,0,0.5);
        outline:none;
        padding:5px 1px 5px 1px;
        width:50%;
        border-top:none;
        border-right:none;
        border-left:none;
        border-bottom:solid;
        border-width:1px;
    }
  
    .header-container{
        display:inline-block;
        width:100%;
        background-color:purple;
        padding-top:5px;
    }
    .hd-logo{
        float:left;
        width:200px;
        margin-left:0%;
    }
    .sub-menu-container{
        width:20%;
        margin:2px;
    }
    .menu-btn-lable{
        display:none;
    }
    .menu-btn-container{
        margin-bottom:5px;
        float:right;
        width:35%;
    }
    .register-con-icon{
        display:none;
    }
    .register-con-form{
        width:100%;
    }
    .register-con .register-con-sub{
        margin-left:5%;
    }
    .reg-input{
        width:90%;
    }
    .register-con-form button{
        margin-left:20%;
        width:50%;
    }
    
    header{
        background-size:contain;
    }
    .home-login{
        width:80%;
        margin-right:4%;
    }
    .home-contain{
      display:none;
  } 
  .menu-item-lang{
      width:100%;
      margin:0px;
      padding:0px;
  }
  .sub-container-logo-con-lang{
      width:auto;
      margin:3px;
      float:right;
      position: absolute;
      margin-top: 40px;
      right:40px;
  }
  .sub-container-logo-con-lang button{
      border:solid;
      border-width: 1px;
      color:purple;
  }
  .sub-container-logo-con-lang select{
      border:none;
  }
  .sub-container-menu{
    position:fixed;
    top:38px;
    width:0%;
    transition: width 1s;
    background-color: white;
    border-bottom: solid;
    border-width: 1px;
    border-color: purple;
    overflow: hidden;
    box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
    -webkit-box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
    -ms-box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
    -o-box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
    height: 100%;
}
.sub-container-menu a{
    color:purple;
    font-size:16px;
}
.tab-menu-container .menu-item{
    width:100%;
    border-top:solid;
    border-color:purple;
    border-width:1px;
    padding:3px;
    margin-top:0px;
    top:0px;
}
.create-account{
 

    position:relative;
    width:40%;
    border-radius:0px;
    border:none;
    border-top:solid;
    border-width:1px;
    margin-top:5px;
    right:0px;
    clear:right;
    width: 100%;
    
}.mobile-menu{
      display:initial
  }
  .mobile-menu svg{
      width:30px;
      height:30px;
  }

}
@media screen and (min-width:600px) and (max-width:900px){
    .sub-menu-nav-scroll{
        max-height:75%;
    
    }
    .report-other-button-container{
        width:auto;
        float: right;
        margin-right:5px;
    }
    
    .edit-term-container{
        width:100%;
        height: 300px;
        margin-left:8%;
        
        margin-top:40px;
        display: inline-block;
    }
    .edit-term-name,.delete-sequences{
        background-color: white;
        width:80%;
        margin-top: 10px;
        padding-top:40px;
        padding-left:30px;
       
    }
    .info-container{
        width:95%;
        height:400px;
        display:inline-block;
        padding:100px 0px 0px 0px;
    }
    
    .info-container  .info-img {
        width:100%;
        clear: right;
    
    }
    .info-container  .info-img img{
        width:100%;
    }
    .info-content{
        clear: right;
        width:90%;
        
        overflow: hidden;
        margin-left:2%;
    }
    .info-content h2{
        font-size: 55px;
        text-align: center;
    }
    
    .seq-menu-conatiner-sub-con{
        width:90%;
        margin-left:10%;
        margin-top:25px;
        padding-top:10px;
        padding-bottom:10px;
    }
    .navigate-container-info-menu{
        margin-top:30px;
        width:80%;
        
        
    }
    .navigate-container-info-menu .icon-text{
        padding-left:2px;
        padding-right:2px;
        
    }
  
    .delet-button-con{
        width:40%;
        margin-left:5%;
    }
    .resetmarsk-container{
        width:50%;
        text-align: center;
        position:fixed;
        margin-left:-1%;
    
    }

    .marks-entering-container input{
        width:150px;
    }
    .classrooms-display-container,.subjects-display-container{

        width:20%;
    }
    .classrooms-display-container .class-rooms{
        width: 70%;
        margin-left:10%;
    }
    .subclassroom-container{
        width:100%;
    }
    .close-rooms,.close-subjects{
        margin-right:10%;
      }
    .display-board-container{
        margin-top:40px;
        top:0px;
        right:0px;
        width:300px;
        height:300px;
    }
    .board-info{
        max-height: 200px;
        overflow-y: auto;
    }
    .animation-display-container{
        margin-top:20px;
    }
    .delete-permission-sub-con{
        background-color: white;
        width:70%;
        height: 300px;
        margin-left:15%;
    
    }
    .btn-container{
       width:80%;
       margin-left:22%;
    }
    .Close-search{
        top:20px;
        font-size:20px;
        border:solid;
        border-color: white;
        width:50px;
        right:0px;
        margin-right:15%;
        border-radius:none;
        border:none;

       
    }
    .search-btn{
        clear:left;
        margin-left:35%;
        top:20px;
    }
    .searchadvances .search-key{
        width:70%;
        margin-left:-15px;
    }
    .search-btn button{
        top:10px;
    }
    .advance-search{
        text-align:left;
        width:80%;
        margin-left:-5%;
        
    }
    .Account-btn{
        width:50%;
        margin-left:20%;
    }
    .report-menu-contro-nav-container .report-menu-contro
    {
        width:25%;
    }
    .report-menu-contro-nav-container {
        width:95%;
        font-size:12px;
        margin-left:10px;
        
        }
        .report-menu-contro-nav-container .block-nav{
            width:10%;
        }

    .term-menus-container{
        box-shadow: none;
    }
    .display-statistic-report table .lable, .display-statistic-report table{
        font-size:12px;
    }
    .display-statistic-report table{
        overflow-x:auto;
        padding:0px;
    }
    .display-classroom-container{
        padding-top:40px;
        margin-left:0px;
        width:100%;
        overflow: hidden;
    }
   
    .control-menu{
        width:95%;
        margin-left:0px;
        margin-top:15px;
    }
    .term-menus-container{
        margin-top:10px;
    }
    .close-the-process{
        position:absolute;
        width:100px;
        right:-40px;
        margin-top:-30px;
        font-size:20px;
        color:red;
    }
    .confirm-frame,.warning-message-report,.option-two-frame-terms,.option-select-container  .pop-info,.option-one-frame-sequences{

        width:80%;
        height:300px;
        margin-left:40px;
    }
    
    .option-select-container{
        width:95%;
        margin-left:2%;
        margin-top:100px;
        padding-bottom: 60px;
    }
  
    .classroom-student-teacher-count .type-count{
        font-size:24px;
        padding-top:10px;
        color:rgba(0,0,0,0.7);
    }
    .sub-class-menu-container{
        display:inline-block;
        width:100%;
        font-size: 16px;
    }
 
    .classroom-container{
        margin-top:100px;
        width:80%;
        min-height:400px;
        max-height:auto;  
        margin-left:12%;
        overflow-x: auto;
    }
   
    .dashboard-normal-users{
        display:inline-block;
        width:90%;
        margin-left:10%;
        margin-top:50px;
        padding:0px 0px 50px 0px;

    }
    .Classroom-teacher-teaching,.user-info-div-container{
        float:left;
        width:90%;
        background-color:white;
        margin:auto 0px;
        margin-top:10px;
        margin-left:15px;
    }
    .forms-container{
        padding-left:0px;
    }
    .control-panel-container{
        width:100%;
        margin-left:0%;
        margin-top:50px;
    }
    .remove-and-add-teacher-admin,.set-mark-filling-accademic-year{

        width:100%;
        margin:5px;

    }
    .schoolaccount-container{
        padding-top:60px;
        margin-left:10%;
        width:90%;
    }
    .settings-body-container{
        font-size:12px;
        width:100%;
        margin-top:0px;
        padding-top:50px;
        margin-left:0px;
    }
    .display-all-subjects-container{
        display:inline-block;
        width:100%;
        height:auto;
        overflow-y: auto;
        overflow-x:none;
        padding:15px 5px 15px 5px;
        margin:-20px;
    }
    .coef-info{
        width:50%;
    }
    .add-user-container{
        display:inline-block;
        width:80%;
        margin-left:8%;
        margin-top:30px;
        background-color:white;
        padding:5px 10px 40px;
        margin-bottom:30px;
    }
    .add-user-form-container{
        float:left;
        width:80%;
        background-color:white;
        padding:15px 15px 15px 15px;
        margin-left:10%;
        padding-top:30px;
    }
    .animation-display-container{
        float:right;
        width:80%;
        background-color:white;
        padding-top:5px;
        padding-right:10%;
        text-align:center;
        
    }
    .all-teachers-view{
        margin-left:30%;
    }
    .subpop-up-container form button{
        padding:10px 10px 10px 10px;
        width:100px;
        margin-left:35%;
    }

    .subpop-up-container{
        width:90%;
        margin-left:5%;
        margin-top:50px;
    }
    .display-teacher-count, .display-student-count{
        width:40%;
        margin-left:5%;
        float:left;
        height:150px;
        z-index:0;
    }
    .display-teacher-count svg, .display-student-count svg{
        width:25px;
        height:25px;
    }
    .other-activities-con{
        z-index:0;
        float:none;
        width:100%;
        position:relative;
        height:auto;
        right:0px;
        top:0px;
        padding-top:0px;
    }
    .show-activities-con{
       width:95%;
   }

    .close-nav-menu{
        display:inherit;
    }
.base-nav-bar{
    width:0px;
    overflow:hidden;
    padding-left:0px;
    padding-right:0px;
    transition:width 1s;
}
.responsive-menu{
    padding-top:50px;
    position:absolute;
    margin-left:10px;
}
    .hd-logo-search{
        width:200px;
        margin-left:15px;
    }
    .hd-logo-search form .inputinitial{
        color:rgba(0,0,0,0.5);
        outline:none;
        padding:5px 1px 5px 1px;
        width:100%;
        border-top:none;
        border-right:none;
        border-left:none;
        border-bottom:solid;
        border-width:1px;
    }
  
    .header-container{
        display:inline-block;
        width:100%;
        background-color:purple;
        padding-top:5px;
    }
    .hd-logo{
        float:left;
        width:300px;
        margin-left:0%;
    }
    .sub-menu-container{
        width:20%;
        margin:2px;
    }
    .menu-btn-lable{
        display:none;
    }
    .menu-btn-container{
        margin-bottom:5px;
        float:right;
        width:35%;
    }
    .register-con-icon{
        display:none;
    }
    .register-con-form{
        width:100%;
    }
    .register-con .register-con-sub{
        margin-left:5%;
    }
    .reg-input{
        width:90%;
    }
    .register-con-form button{
        margin-left:20%;
        width:50%;
    }
    header{
        background-size:contain;
    }
    .home-login{
        width:80%;
        margin-right:4%;
    }
    .home-contain{
      display:none;
  } 
  .menu-item-lang{
      width:100%;
      margin:0px;
      padding:0px;
  }
  .sub-container-logo-con-lang{
      width:auto;
      margin:3px;
      float:right;
      position: absolute;
      margin-top: 40px;
      right:40px;

  }
  .sub-container-logo-con-lang button{
      border:solid;
      border-width: 1px;
      color:purple;
  }
  .sub-container-logo-con-lang select{
      border:none;
  }
  .sub-container-menu{
    position:fixed;
    top:38px;
    width:0%;
    transition: width 1s;
    background-color: white;
    border-bottom: solid;
    border-width: 1px;
    border-color: purple;
    overflow: hidden;
    box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
    -webkit-box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
    -ms-box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
    -o-box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
    height: 100%;
}
.sub-container-menu a{
    color:purple;
    font-size:16px;
}
.tab-menu-container .menu-item{
    width:100%;
    border-top:solid;
    border-color:purple;
    border-width:1px;
    padding:3px;
    margin-top:0px;
    top:0px;
}
.create-account{
 

    position:relative;
    width:40%;
    border-radius:0px;
    border:none;
    border-top:solid;
    border-width:1px;
    margin-top:5px;
    right:0px;
    clear:right;
    width: 100%;
    
}.mobile-menu{
      display:initial
  }
  .mobile-menu svg{
      width:30px;
      height:30px;
  }

}
@media screen and (min-width:900px) and (max-width:1200px){
    .sub-menu-nav-scroll{
        max-height:75%;
    
    }
    .report-other-button-container{
        width:auto;
        float: right;
        margin-right:5px;
    }
    .classroom-container{
        width:70%;
        margin-left:25%;
    }
    .info-container{
        width:95%;
        height:400px;
        display:inline-block;
        padding:100px 0px 0px 0px;
    }
    
    .info-container  .info-img {
        width:100%;
        clear: right;
    
    }
    .info-container  .info-img img{
        width:100%;
    }
    .info-content{
        clear: right;
        width:90%;
        
        overflow: hidden;
        margin-left:2%;
    }
    .info-content h2{
        font-size: 55px;
        text-align: center;
    }
    
    .seq-menu-conatiner-sub-con{
   
        margin-top:25px;
        margin-left:25%;
 
    }
    .navigate-container-info-menu{
        margin-top:30px;
        width:80%;
        
        
    }
    .navigate-container-info-menu .icon-text{
        padding-left:2px;
        padding-right:2px;
        
    }
    .delet-button-con{
        width:40%;
        margin-left:5%;
    }
    .marks-entering-container input{
        width:100%;
    }
    .classrooms-display-container{

        width:20%;
    }
    .classrooms-display-container .class-rooms{
        width: 70%;
        margin-left:10%;
    }
    .subclassroom-container{
        width:100%;
    }
    .display-board-container{
        margin-top:40px;
        top:0px;
        right:0px;
        width:300px;
        height:300px;
    }
    .board-info{
        max-height: 200px;
        overflow-y: auto;
    }
    .view-menu-container{
        margin-left:20%;
        width:70%;
    }
    .animation-display-container{
        margin-top:20px;
    }
       .delete-permission-sub-con{
        background-color: white;
        width:70%;
        height: 300px;
        margin-left:15%;
    
    }
    .btn-container{
       width:80%;
       margin-left:22%;
    }
    .Close-search{
        top:20px;
        font-size:25px;
        border:solid;
        border-color: white;
        width:50px;
        right:0px;
        margin-right:10%;
        border-radius:none;
        border:none;

       
    }
    .searchadvances .search-key{
        width:70%;
        margin-left:-15px;
    }
  
    .advance-search{
        text-align:left;
        width:80%;
        margin-left:-5%;
        
    }
  
    .report-menu-contro-nav-container .report-menu-contro
    {
        width:25%;
    }
    .report-menu-contro-nav-container {
        width:95%;
        font-size:12px;
        margin-left:10px;
        
        }
        .report-menu-contro-nav-container .block-nav{
            width:10%;
        }
    .term-menus-container{
        box-shadow: none;
    }
    .display-statistic-report table .lable, .display-statistic-report table{
        font-size:12px;
    }
    .display-statistic-report table{
        overflow-x:auto;
        padding:0px;
    }
    .display-classroom-container{
        padding-left:30px;
        margin-left:21%;
        width:75%;
        overflow: hidden;
    }
  
    .control-menu{
        width:95%;
        margin-left:0px;
    }
    .side-div-container{
        width:70%;
        margin-left:30%;
        padding-top:20px;
    }
    .confirm-frame,.warning-message-report,.option-two-frame-terms,.option-select-container  .pop-info,.option-one-frame-sequences{

        width:80%;
        height:300px;
        margin-left:40px;
    }
    .term-menus-container{
        margin-top:10px;
    }
    .close-the-process{
        right:20%;
    }
 
  
   
    
    .classroom-student-teacher-count .type-count{
        font-size:24px;
        padding-top:10px;
        color:rgba(0,0,0,0.7);
    }
    .sub-class-menu-container{
        display:inline-block;
        width:70%;
        font-size: 16px;
    }
  
    .dashboard-normal-users{
        display:inline-block;
        width:70%;
        margin-left:25%;

    }

    .coef-info{
        width:40%;
        
    }
    .add-user-container{
        display:inline-block;
        width:70%;
        margin-left:25%;
        margin-top:30px;
        background-color:white;
        padding:10px 10px 40px 10px;
        margin-bottom:30px;
    }
    .add-user-form-container{
        float:left;
        width:80%;
        background-color:white;
        padding:15px 15px 15px 15px;
        margin-left:10%;
        padding-top:30px;
    }
    .animation-display-container{
        float:right;
        width:80%;
        background-color:white;
        padding-top:5px;
        padding-right:10%;
        text-align:center;
        
    }
    .all-teachers-view{
        margin-left:35%;
    }
    .subpop-up-container form button{
        padding:10px 10px 10px 10px;
        width:100px;
        margin-left:30%;
    }

    .subpop-up-container{
        width:40%;
        margin-left:35%;
        margin-top:50px;
    }
    .display-teacher-count, .display-student-count{
        width:40%;
        margin-left:5%;
        float:left;
        height:150px;
        z-index:0;
    }
    .display-teacher-count svg, .display-student-count svg{
        width:25px;
        height:25px;
    }
    .other-activities-con{
        z-index:0;
        float:none;
        width:100%;
        position:relative;
        height:auto;
        right:0px;
        top:0px;
        padding-top:0px;
    }
    .show-activities-con{
       width:95%;
   }

    .close-nav-menu{
        display:none;
    }
.base-nav-bar{
    width:200px;
    overflow:hidden;

    transition:width 1s;
}
.responsive-menu{
    padding-top:50px;
    position:absolute;
    margin-left:10px;
}
    
    .hd-logo-search{
        width:200px;
        margin-left:15px;
    }
    .hd-logo-search form .inputinitial{
        color:rgba(0,0,0,0.5);
        outline:none;
        padding:5px 1px 5px 1px;
        width:100%;
        border-top:none;
        border-right:none;
        border-left:none;
        border-bottom:solid;
        border-width:1px;
    }
  
    .header-container{
        display:inline-block;
        width:100%;
        background-color:purple;
        padding-top:5px;
    }
    .hd-logo{
        float:left;
        width:300px;
        margin-left:0%;
    }
    .sub-menu-container{
        width:20%;
        margin:2px;
    }
  
    .menu-btn-container{
        margin-bottom:5px;
        float:right;
        width:55%;
    }
   
    header{
        background-size:contain;
    }
    .home-login{
        width:80%;
        margin-right:4%;
    }
    .home-contain{
      display:none;
  } 
  .menu-item-lang{
      width:100%;
      margin:0px;
      padding:0px;
  }
  .sub-container-logo-con-lang{
      width:auto;
      margin:3px;
      float:right;
      position: absolute;
      margin-top: 40px;
      right:40px;
  }
  .sub-container-logo-con-lang button{
      border:solid;
      border-width: 1px;
      color:purple;
  }
  .sub-container-logo-con-lang select{
      border:none;
  }
  .sub-container-menu{
    position:fixed;
    top:38px;
    width:0%;
    transition: width 1s;
    background-color: white;
    border-bottom: solid;
    border-width: 1px;
    border-color: purple;
    overflow: hidden;
    box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
    -webkit-box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
    -ms-box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
    -o-box-shadow:0px 0px 2px 0px rgba(0,0,0,0.7);
    height: 100%;
}
.sub-container-menu a{
    color:purple;
    font-size:16px;
}
.tab-menu-container .menu-item{
    width:100%;
    border-top:solid;
    border-color:purple;
    border-width:1px;
    padding:3px;
    margin-top:0px;
    top:0px;
}
.create-account{
 

    position:relative;
    width:40%;
    border-radius:0px;
    border:none;
    border-top:solid;
    border-width:1px;
    margin-top:5px;
    right:0px;
    clear:right;
    width: 100%;
   
    
}
  .mobile-menu{
      display:initial
  }
  .mobile-menu svg{
      width:30px;
      height:30px;
  }

}
@media screen and (min-width:1200px) and (max-width:1500px){
    

    .display-board-container{
        margin-top:100px;
        top:0px;
        right:0px;
        width:300px;
        height:300px;
    }
    .board-info{
        max-height: 250px;
        overflow-y: auto;
    }
 
  
  
   
   
    .schoolaccount-container{
        padding-top:60px;
        margin-left:25%;
        width:80%;
    }
    .all-teachers-view{
        margin-left:25%;
    }
    .subpop-up-container form button{
        padding:10px 10px 10px 10px;
        width:100px;
        margin-left:30%;
    }

    .subpop-up-container{
        width:40%;
        margin-left:35%;
        margin-top:50px;
    }
    .show-activities-con{
      width:70%;
      margin-left:8%;
  }
    .hd-logo-search{
        width:200px;
        margin-left:15px;
    }
    .hd-logo-search form .inputinitial{
        color:rgba(0,0,0,0.5);
        outline:none;
        padding:5px 1px 5px 1px;
        width:100%;
        border-top:none;
        border-right:none;
        border-left:none;
        border-bottom:solid;
        border-width:1px;
    }
   
    .header-container{
        display:inline-block;
        width:100%;
        background-color:purple;
        padding-top:5px;
    }
    .hd-logo{
        float:left;
        width:300px;

    }
    .sub-menu-container{
        width:15%;
        margin:2px;
    }
  
    .menu-btn-container{
        margin-bottom:5px;
        float:right;
        width:50%;
    }
   
    .sub-container-menu{
        width:60%;
    }
    .home-contain{
        margin-left:10px;
    }
}