html,body {  color:#000; margin:0px; padding:0px; font-size:10pt;  font-family: Arial, Helvetica, sans-serif, "Arial Narrow"; scroll-behavior: smooth;   min-height:100vh;}
.body {width:100%; overflow:hidden}
.pad0 { padding:0 }

.pad20 { padding:20px}.pad40 { padding:40px}.pad60 { padding:60px}.pad80 { padding:80px}
.padv20{ padding-top:20px; padding-bottom:20px }

.padv40{ padding-top:40px; padding-bottom:40px }
.padv60{ padding-top:60px; padding-bottom:60px }
.padv80{ padding-top:80px; padding-bottom:80px }

.cst{font-weight: normal;  background-color:#fff; font-size: 15px; color: #000; margin: 8px -10px 8px -10px!important; padding: 15px 15px 15px 15px!important; overflow: hidden; cursor:pointer;}
.cst:hover {background-color: orange; }
address{font-style:normal}
 
.uc { text-transform:uppercase}
.mt1{margin-top:.2em} .mt2{margin-top:.4em} .mt3{margin-top:.8em} .mt4{margin-top:1.6em}
.mb1{margin-bottom:.2em} .mb2{margin-bottom:.4em} .mb3{margin-bottom:.8em} .mb4{margin-bottom:1.6em}
.ml0{ margin-left:0}


h1,h2,h3,h4,h5 {color:#000; font-weight:normal; font-family:  Arial, Helvetica, sans-serif, "Arial Narrow"; margin-top:0; margin-bottom:.3em; font-weight:bold;   position:relative; line-height:normal}
a{color:#000; text-decoration:underline;}
a:hover{text-decoration:underline; cursor:pointer;} 
p,ul,li,ol,dl,dt,dd{padding:0; margin:0; line-height:1.4em}
j {text-align:justify}

.para { margin-bottom:1em}
.ban img{ width:100%; display:block}

.h1{ font-size:1.8em} 
.h2{ font-size:1.6em}
 

body { background-image:url('images/background.jpg'); background-position: right center; background-attachment:fixed; background-size: cover; background-repeat:no-repeat; }



.but { display:inline-block; position:relative; line-height: 2em; padding:0  1em; font-size:1.3em; min-width:10em; background-color:transparent; border:0px #fff solid; text-align: center; cursor: pointer  }
.but:before,.but:after  { content:''; display:block; position:absolute;  top:0; left:0;  bottom:0; right:1em; background-image:url('images/button.png'); background-position:left center; background-size:auto 100%; background-repeat:no-repeat;}
.but:after { left:auto; right:0; width:1em; background-position:right center}
.but span{ position:relative; z-index:2; color:#fff; font-weight:bold;   display:inline-block; top:-0.05em    }

.appbut{ background-color:#213778; border-radius:6px; text-align:center; font-weight:bold; font-size:12pt; color:#fff; line-height:40px; width:100%; border-width:0px;cursor: pointer; }

.mainbanimg{ display:none}
.mainbanimg[src]{ display:block}
.sec-start-home .mainbanimg{ display:none!important}

.boxbottom{ xposition:absolute; bottom:0px; left:0px; right:0px; padding:0px; margin-top:2.6em; margin-left:auto;}


.but:hover { filter: hue-rotate(222deg);}


.app { position:relative; xpadding-bottom: 150px; box-sizing:border-box;}

.content { font-size:12pt; width:100%; xposition:relative; text-align:center ;  padding:20px; padding-top:40px; box-sizing:border-box; overflow:hidden;  }
.appcontent { height:100vh; box-sizing:border-box; background-attachment:fixed;}


.form { text-align:left; float:right; font-size:.8em }

.form label { display:block; margin:.8em .5em .3em .5em ; font-weight:bold; }
.app .form label {  margin: 1em .5em .4em .5em ;}
.form input[type=text],.form .file-btn,.form select { width:100%; font-size:1.2em; line-height:1.5em;  border:2px rgba(0,0,0,.5) solid; padding:0px .5em; box-sizing:border-box }
.form input[type=password],.form .file-btn,.form select { width:100%; font-size:1.2em; line-height:1.5em;  border:2px rgba(0,0,0,.5) solid; padding:0px .5em; box-sizing:border-box }
.app .form input[type=text],.app .form .file-btn,.app .form select { line-height:2em; font-size:1.4em; }
.app .form input[type=password],.app .form .file-btn,.app .form select { line-height:2em; font-size:1.4em; }
.form .file-btn { color:#fff; background-color:rgba(0,0,0,.5); line-height:2em; padding:0 1em}
.form em{ display:block;  color:red;  text-align:right }
.form select { height:1.5em;   height:calc(1.5em + 4px); }
.form .inp { text-align:left}

.more li {margin: 8px -10px 8px -10px; padding: 0; list-style: none; line-height: 50px; margin-bottom:8px;  position: relative; background-color:#fff;  color: #000; }
.more li:hover{background-color: orange;     }
.more li a {display: block; overflow: hidden; }
.more li i {height: 30px; margin: 10px; border-radius: 50%; width: 30px;  line-height: 30px; text-align: center; }
.more li a h4 {position: absolute; font-style: normal; left: 50px; bottom: 5px; white-space: nowrap; overflow: hidden;  top:15px; color:#333; font-weight:normal}
.more li a em {position: absolute; font-style: normal; font-size: 10px;   left: 50px; bottom: -8px; overflow: hidden; color:#666; white-space: nowrap; }

.about h2 { color:#000; font-weight:normal; font-family:  Arial, Helvetica, sans-serif, "Arial Narrow"; text-align:center; margin-top:1em; margin-bottom:.8em; font-weight:bold;  /* position:relative;*/ line-height:normal}

.locate a iframe {border: 0; position: absolute; width: 100% !important; height: 100% ! important;} 

.cst1{font-weight: normal;  background-color:#fff; font-size: 15px; color: #000; margin: 8px 10px 8px 10px!important; padding: 5px 15px 5px 15px!important; overflow: hidden; cursor:pointer;}
.cst1:hover{background-color: orange;} 
.call1 li i {display: inline-block; font-size: 13px; color: #515151; line-height: 40px; position: absolute; z-index: 22;  }
.call {padding: 0 10px 10px; margin: 0;  }
.call a, .call a:hover, .call a:active, .call a:focus {display: block; text-decoration: none;background-color: orange; }
.call h4 {font-weight: normal; font-size: 16px; border-bottom: 1px #eee solid; color: #333; font-size: 16px; white-space: nowrap; overflow: hidden; }
.call h4 i {display: inline-block; margin: 5px 10px 5px 0px; width: 40px; height: 40px; border-radius: 50%; background: #ccc; text-align: center; }
.call h4 i.fa:before {display: block; font-size: 20px; color: #fff; line-height: 40px; }
.call h5 {display: none; }
.call ul, .call h4 {list-style: none; margin: 0; padding: 0; line-height: 50px; font-size: 14px; }
.call li {list-style: none; margin: 0 0 8px 0; padding: 0; }
.call li ul li {padding: 0; position: relative; border-bottom: 1px #eee solid; }
.call li ul li a {line-height: 18px; padding-bottom: 11px; padding-top: 11px; xwhite-space: nowrap; color: #333; background: #fff; box-sizing: border-box; }
.call li ul li a:first-child {padding-left: 55px; }
.call li ul li>a~a{ position: relative ;  height:50px; width:50px; top:-50px;  z-index:10; xline-height:50; padding-bottom:0; padding-top:0; color:#515151 ; float:left ; }
.call li ul li>a~a:before{ display:block; line-height:50px; text-align:  center; font-size:24px ;  }
.call li ul li>a~a~a{right:0px}
body > ul li > a:hover, body > ul li > div > a:hover {background-color: rgba(34,150,218,.1); }
.call li ul li a i {display: block; font-size: 10px; line-height: 10px; color: #999; font-style: normal; }
.call:not(.call1) li ul {  opacity:0; max-height:0px;  margin-bottom:0px; overflow:hidden; transition:all .4s ease 0s; }
.call li.on ul {opacity: 1; max-height: none; margin-bottom: 50px; margin-top: -20px; } 

.home {padding: 0 10px 10px; margin: 0;  }
.home a, .home a:hover, .home a:active, .home a:focus{display: block; text-decoration: none;background-color: orange; }
.home2 h2 { color:#000; font-weight:normal; font-family:  Arial, Helvetica, sans-serif, "Arial Narrow"; text-align:center; margin-top:1em; margin-bottom:20px; font-weight:bold; line-height:normal}
.home h4 {font-weight: normal; font-size: 16px; border-bottom: 1px #eee solid; color: #333; font-size: 16px; white-space: nowrap; overflow: hidden; }
.home h4 i {display: inline-block; margin: 5px 10px 5px 0px; width: 40px; height: 40px; border-radius: 50%; background: #ccc; text-align: center; }
.home h4 i.fa:before {display: block; font-size: 20px; color: #fff; line-height: 40px; }
.home h5 {display: none; }
.home ul, .home h4 {list-style: none; margin: 0; padding: 0; line-height: 50px; font-size: 14px; }
.home li {list-style: none; margin: 0 0 8px 0; padding: 0; }
.home li ul li {padding: 0; position: relative; border-bottom: 1px #eee solid; }
.home li ul li a {line-height: 18px; padding-bottom: 11px; padding-top: 11px; xwhite-space: nowrap; color: #333; background: #fff; box-sizing: border-box; }
.home li ul li a:first-child {padding-left: 10px; }
.home li ul li>a~a{ position: relative ;  height:50px; width:50px; top:-50px;  z-index:10; xline-height:50; padding-bottom:0; padding-top:0; color:#ccc ; float:right ; }
.home li ul li>a~a:before{ display:block; line-height:50px; text-align:  center; font-size:24px ;  }
.home li ul li>a~a~a{right:0px}
body > ul li > a:hover, body > ul li > div > a:hover {background-color: rgba(34,150,218,.1); }
.home li ul li a i {display: block; font-size: 10px; line-height: 10px; color: #999; font-style: normal; }
.home :not(.home1) li ul {  opacity:0; max-height:0px;  margin-bottom:0px; overflow:hidden; transition:all .4s ease 0s; }
.home li.on ul {opacity: 1; max-height: none; margin-bottom: 20px; margin-top: 10px; margin-left:-20px; margin-right:-20px;}


.date {text-align: left; margin-top: 20px; }
.student {padding:0; margin: 0; margin-top:40px; position:relative; }
.student h4 {font-weight: normal;  background-color:#fff; font-size: 15px; color: #000; margin: 8px -10px 8px -10px; padding: 15px 15px 15px 15px; overflow: hidden; }
.student ul h4 {position: relative; list-style: none; margin: 0; margin-bottom: 8px; line-height: 50px; font-size: 14px; }
.student li i {display: inline-block; font-size: 40px; color: #ccc; line-height: 40px; position: absolute; z-index: 22; padding-left: 4px; padding-top: -15px; }
.student li stu {font-weight: normal;  background-color:#fff; font-size: 15px; color: #000; margin: 8px -10px 8px -10px; padding: 15px 15px 15px 15px; overflow: hidden; }

.student ul li {display: block;  margin-bottom:8px; padding:0;}
.student li::marker { content: '';  }
.student stu:hover{background-color: orange;} 
.notification-count:empty{display:none }
.notification-count { 
  position: absolute;
  top: 5px; left:50%; transform: translateX(-50%); margin-left:20px; height:18px; width:18px; line-height:18px; text-align:center;
  
  
 
  background-color: red;
  color: white;
  border-radius: 50%; 
  font-size: .8em;
}

@keyframes fall {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.falling-animation {
  animation: fall 1s ease-in-out;
}


.logout{text-align:left; padding:20px 20px 20px 20px; color:red;} 
 

.sb-nav-fixed .sb-topnav{z-index: 1039;}
.sb-nav-fixed .sb-topnav {  position: fixed; top: 0; right: 0;left: 0;}
.sb-topnav .navbar-brand { width: 225px;margin: 0;}
 

.nav-link { display: block; padding: 0.5rem 1rem; padding-right: 1rem; padding-left: 1rem; color: #0d6efd; text-decoration: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;}
.dropdown-toggle { white-space: nowrap;}
[role=button] { cursor: pointer;}
.bg-dark { --bs-bg-opacity: 1;}
  
.nav-top{position: fixed;top: 0;left: 0;right: 0;xwidth: 100%; z-index:99999}
.nav-bottom{position: fixed;bottom: 0;left: 0;right: 0;width: 100%; z-index:99999}


.nav-top{ padding:10px 20px;background-color:#213778;   }
.nav-top > div {  line-height:10px;  color:#fff;   }
.nav-top .dropdown{ float:right ; display:inline-block;width:50px; }
.nav-top .title { font-size:1.4em; display:block; float:left; padding-left: 100px;}
.nav-top .dropdown-menu{display:none ; position:absolute; background-color: #fff; right:0; line-height:30px;  }
.nav-top .menu-btn { background-color:#213778; color:#fff; border:0 transparent none; font-size:3em;  display:block; width:50px; padding:0}
.nav-top .menu-btn:hover + .dropdown-menu,
.nav-top .menu-btn + .dropdown-menu:hover { display:block }

.nav-top .dropdown-menu div { display:block; color:#000;  padding:15px 15px; background-color:#eee; line-height:normal }

.nav-top .dropdown-menu a { display:block; color:#000; text-decoration: none; padding:3px 15px; }
.nav-top .dropdown-menu a:hover { background-color:orange ; color:#fff ; }

nav,.shadow{ -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);}
.nav{ display:block ; position: fixed ; width:100%; width:100vw; height:50px; bottom:0; z-index:9999; background:#fff; }
nav ul{   margin:0; padding:0; overflow:hidden; background: #ffff;}
nav li{ display:block; list-style:none; margin:0; padding:0; width:16.65%; width:20vw; float:left;text-align: center;}
nav li a{color:#000; text-decoration: none ; display:block; height:50px;position:relative }
nav li a span{ font-size:10px;  display:block; z-index:3;}
nav li a i{ display:block; height:34px; position:relative; z-index:3 }
nav li a i.fa{font-size:22px!important; line-height:34px; position:relative; top:4px; color:#000 }

nav li a:before{ content:''; display:block; position:absolute; z-index:0; background-color:rgba(34,150,218,.7); transition: all .0s ease .0s   ;height:0px; width:0px;   border-radius:50%;left:50%; top:50%; transform:translate(-50%,-50%) ; -webkit-transform:translate(-50%,-50%)}
nav li a:active:before,nav li a:focus:before{ height:100px; width:100px;  background-color:rgba(34,150,218,0);  transition: all .5s ease .1s ;  text-decoration: none  }
 
.promo-box{ padding:20px 20px 60px 20px ;  xborder:2px #fff solid;margin:0 auto 0 auto; max-width:450px; background-color:rgba(0,0,0,.2) }

section { display:none}

 
@media (min-width:1024px){ 
body{background-size:cover; background-position: center top;}

.content { max-width: 50vw ; margin-left:40vw; padding-top:7.5vw;  padding-bottom:7.5vw; font-size:1.3vw; }
.form { width:80% }
.form .inp {  width:100%;}

.mob {display:none}
.para { font-size:12pt;}


}

@media (max-width:1024px){ 
 
 
}

@media (max-width:768px){
 

}

@media (max-width:640px){
 


}

@media (max-width:480px){
 .but.but-big span{ font-size:12pt}
}

.upload-btn-wrapper{position:relative;overflow:hidden;display:inline-block;}
.file-btn{ }
.upload-btn-wrapper input[type=file]{font-size:100px;position:absolute;left:0;top:0;opacity:0;}


.ckcontainer{display:block;position:relative;padding-left:35px;margin-bottom:12px;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.ckcontainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0;}
.checkmark{position:absolute;top:0;left:0;height:25px;width:25px;background-color:#eee;}
.ckcontainer:hover input ~ .checkmark {  background-color: #ccc; }
.ckcontainer input:checked ~ .checkmark {  background-color: #2196F3; } 
.checkmark:after{content:"";position:absolute;display:none;} 
.ckcontainer input:checked ~ .checkmark:after {  display: block;}
.ckcontainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid white;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}