*{margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box; -ms-box-sizing: border-box;}
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
:root{ 
    --blue:#063ca7;
    --dark-blue:#2c3e6f;
    --green:#278f75;
    --gray:#7c88aa; 
    --light-gray:#dae7fb;
    --dark-gray:#222222;
    --white:#fff;
  } 

@
-webkit-keyframes fadein {
    from {bottom: 0;
    opacity: 0;
}

to {
    bottom: 30px;
    opacity: 1;
}

}
@
keyframes fadein {
    from {bottom: 0;
    opacity: 0;
}

to {
    bottom: 30px;
    opacity: 1;
}

}
@
-webkit-keyframes fadeout {
    from {bottom: 30px;
    opacity: 1;
}

to {
    bottom: 0;
    opacity: 0;
}

}
@
keyframes fadeout {
    from {bottom: 30px;
    opacity: 1;
}

to {
    bottom: 0;
    opacity: 0;
}

}

button:focus{ box-shadow: none!important; }
 ul{ padding: 0; margin: 0; list-style: none;}
 a, a:hover{text-decoration: none;}
.btn:hover{color: var(--white);}
 p{color:var(--gray);}
 img{max-width: 100%;}
html, body{height: 100%;}
#studentinstruction video{border:2px solid var(--light-gray);}

body{ font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; color:var(--gray);
background-image: -moz-linear-gradient( 0deg, rgb(231,239,252) 0%, rgb(232,240,252) 47%, rgb(223,233,249) 100%);
  background-image: -webkit-linear-gradient( 0deg, rgb(231,239,252) 0%, rgb(232,240,252) 47%, rgb(223,233,249) 100%);
  background-image: -ms-linear-gradient( 0deg, rgb(231,239,252) 0%, rgb(232,240,252) 47%, rgb(223,233,249) 100%); }
.fullsec{width: 100%;}
.loglink .btnlogin, .sidelink ul li a, .boxs, .headerbg{transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;}
.container{ width:1200px; max-width: 100%; margin: 0 auto; padding: 0 15px;}
iframe, video{width: 100%;}
.headings2{ margin-top:0; color:var(--blue); font-weight:bold; font-size:28px; }
.headings3{ margin-top:0; color:var(--blue); font-weight:bold; font-size:22px; }

.headerbg{background: var(--light-gray); width: 100%;}
.home .headerbg{background: rgba(218,231,251,1);
background: -moz-linear-gradient(top, rgba(218,231,251,1) 0%, rgba(226,236,252,1) 21%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(218,231,251,1)), color-stop(21%, rgba(226,236,252,1)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(218,231,251,1) 0%, rgba(226,236,252,1) 21%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(218,231,251,1) 0%, rgba(226,236,252,1) 21%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(218,231,251,1) 0%, rgba(226,236,252,1) 21%, rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(218,231,251,1) 0%, rgba(226,236,252,1) 21%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dae7fb', endColorstr='#ffffff', GradientType=0 ); position: absolute; left: 0; top: 0; z-index: 9;}

@keyframes menu_fixed {
    0% {
        margin-top: -106px;
    }
     25% {
        margin-top: -90px;
    }
    50% {
        margin-top: -80px;
    }
    75% {
        margin-top: -40px;
    }
    100% {
        margin-top: 0;
    }
}
.heighthead.fixed{height: 100px;}
.headerbg.fixed{position: fixed; top: 0; left: 0; width: 100%; background: var(--light-gray); z-index: 99;  animation-name: menu_fixed;  animation-duration: 0.5s;
    animation-timing-function: ease-out; -webkit-box-shadow: 0px 13px 30px -12px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 5px 12px -12px rgba(0, 0, 0, 0.75);   box-shadow:0px 5px 12px -12px rgb(0 0 0 / 75%);}
.fixed .logo img {max-height: 70px;}
.fixed .logo{font-size:18px;}
.fixed .logo span{font-size: 20px;}
.headright a span{font-size:16px;}
.headright a span small{font-size:11px;}


.headsec{display: flex; align-items: center; justify-content:space-between;}
.logo{display: flex; align-items: center; font-size:22px;font-weight:bold; line-height: 1.2; color:#0707c7; padding:4px 0;}
.logo img{max-height:98px; display:block;}
.logo div{padding-left: 10px;}
.logo span{font-family: 'Times New Roman', sans-serif;font-size:26px;  text-transform:uppercase; display:block; }
.headright{ display:flex; align-items:center; }
.headright a{display: flex; align-items: center; margin-left: 30px;}
.headright a span { font-size:20px; font-weight: bold; color:var(--dark-blue);  line-height: 1.1;  padding-left: 6px;}
.headright a span small { color: var(--gray);  display: block;  font-size: 13px; font-weight: 600;}

.headright ul{list-style: none; display: flex; align-items: center;}
.headright ul li{}
.imgpro{width:40px; height: 40px; border-radius: 50%; overflow:hidden; background:var(--white); margin-left:10px; }
.imgpro img{width:100%; height: 100%; object-fit:cover;}

.banner{position: relative;}
.banner > img{width: 100%; display: block;}
.banner .container{position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); z-index:3}
.banner h1{font-size: 40px; font-weight: normal; color: var(--dark-blue); position: absolute; width: 100%; text-align: center;}
.banner h1 span{display: block; font-weight:bold; color: var(--blue);}
.links{width:210px; position: relative; z-index: 2;}
.links ul li{margin-bottom: 5px;}
.links ul li a{display: block; font-size: 16px; font-weight: bold; color: var(--dark-blue); padding: 10px; border-radius: 5px; display: flex; align-items: center;}
.links ul li a svg{ width:28px; height: 28px;}
.links ul li a span{padding-left: 6px;}

.instructiontext { position: absolute; left: 50%;bottom: 0;background: var(--white); padding: 10px 15px; border-radius: 5px 5px 0 0; width: 260px; text-align: center;  font-weight: 600;
    margin-left: -130px; color: var(--dark-blue); cursor: pointer;}

.loginbox, .textbox, .boxs, .linking, .links ul li a, .formcont, .showbox{background-image: -moz-linear-gradient( 18deg, rgb(255,255,255) 47%, rgb(236,243,253) 100%);
background-image: -webkit-linear-gradient( 18deg, rgb(255,255,255) 47%, rgb(236,243,253) 100%);
background-image: -ms-linear-gradient( 18deg, rgb(255,255,255) 47%, rgb(236,243,253) 100%); }

.linklist{width: 100%;}
.linklist ul{ list-style:none; display:flex; }
.linklist ul li{width: 25%; padding: 10px;}
.boxs { border-radius: 10px; border:1px solid var(--white);  height: 100%;}
.linklist ul li:last-child .boxs a{align-items: flex-start;}
.boxs a { display: flex; flex-direction: column; align-items: center; padding:30px 20px; }
.boxs a span{ font-size: 18px;  font-weight: bold; color: var(--blue); padding-top: 15px;}
.boxs img{max-height: 60px;}
.boxs h4{ font-size:18px; color:var(--blue); font-weight:bold; text-align:left; margin:3px 0; }
.boxs h4 small{font-size: 15px;}

.bluebtn{background: var(--blue); color: var(--white);}
.dark-bluebtn{background: var(--dark-blue); color: var(--white);}
.darkgraybtn{background: var(--dark-gray); color: var(--white);}

.linksec{ width:100%;  }
.linksec > ul{list-style: none;  display:flex;}
.linksec > ul > li{padding: 10px; width: 33.33%}
.linking{padding: 25px; height: 100%; border-radius: 5px;}
.linking h3{margin-top: 0; color: var(--dark-blue); font-size: 22px;font-weight: 600;}
.linking ul li a {position: relative; padding: 5px 20px; display: block; font-weight: 600; color: var(--dark-gray);}
.linking ul li a small{ display:block;color: var(--gray); }
.linking ul li a:before{ content:""; position:absolute; left:0; top:10px; width:16px; height:14px; background:url(../images/arrow.png) center center no-repeat; }

.formsec h3{font-size: 22px; color: var(--dark-blue); font-weight: bold;}
.formlists > ul{list-style: none;  display:flex; margin: 0 -10px;}
.formlists > ul > li{padding: 10px; width:22%;}
.formlists .form-control, .admitcard .form-control { height: 46px;  border: none;  background: var(--light-gray);  box-shadow: none;}
.formlists > ul > li .btn{margin-top: 25px; width: 100%; height: 44px;}
.formlists > ul > li:last-child{width: 14%;}

.admitcard .modal-header { margin-bottom: 15px;}
.admitcard label{color: var(--dark-blue);}
.admitcard .form-control{font-size: 14px;}
.admitcard .bluebtn{height: 40px; line-height: 26px;}
/*select.input-sm { height: 38px;  line-height: 30px;  border-radius: 4px;}*/


.lists{margin-bottom: 15px;}
.lists ul{display: flex; flex-wrap: wrap; margin: 0 -5px;}
.lists ul li{width: 33.33%; padding: 5px; display: flex;}
.lists ul li span{min-width: 110px; color: var(--dark-blue);}









@media (min-width:1250px){ 
.container{width:1230px;}
}



.sections{padding:60px 0;}
.contentsec{ padding:20px; border-radius: 10px; border: 2px solid var(--white); display: flex; justify-content: space-between;
  background-image: -moz-linear-gradient( 18deg, rgb(223,233,249) 0%, rgb(255,255,255) 47%, rgb(223,233,249) 100%);
  background-image: -webkit-linear-gradient( 18deg, rgb(223,233,249) 0%, rgb(255,255,255) 47%, rgb(223,233,249) 100%);
  background-image: -ms-linear-gradient( 18deg, rgb(223,233,249) 0%, rgb(255,255,255) 47%, rgb(223,233,249) 100%);
}

.textbox{width: 66%;  padding:20px; border-radius: 10px; border: 2px solid var(--white); font-weight: 600; }




.textbox h4{color:var(--dark-blue); font-size: 20px; font-weight: 600;}
.textbox span{display: block;}
.videobtn{ float: right;  margin-top: -9px; background: var(--blue);  color: var(--white);}
.scrollbar{ width:100%; padding-right: 15px; max-height:400px;overflow: auto; /*overflow-y: scroll; */}
.scrollbar-primary::-webkit-scrollbar {width: 6px; background-color: #F5F5F5;border-radius: 10px;}
.scrollbar-primary::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);  background-color: #F5F5F5; border-radius: 10px;}
.scrollbar-primary::-webkit-scrollbar-thumb {border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);-moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color:var(--dark-blue);}

.modal-title {color: var(--blue); font-weight: 600; font-size: 22px;}
.loginbox{padding:25px; border-radius: 10px; width: 32%;
  
}
.loginbox h2{font-size:26px; font-weight: 600; color: var(--dark-blue); text-align: center; margin-top: 0}

.inputsec input {padding: 10px 15px 10px 40px; height: 46px; border: none; background: var(--light-gray);box-shadow:none;}
.inputsec > div{position: relative; margin-bottom: 10px;}
.inputsec > div:before{ content:""; width: 20px; height: 20px; background-size: 20px; position: absolute; left: 10px; top: 11px; z-index: 2;}

.inputsec .usericon:before{background: url(../images/usericon.svg) no-repeat;}
.inputsec .passwordicon:before{background: url(../images/passwordicon.svg) no-repeat; }

.btnlink{display: flex; align-items: center; justify-content: space-between;}
.loginbtn{width: 120px; height: 46px; background: var(--blue); color: var(--white);}
.creationpro{ margin: 15px 0; display: block; text-align: center; font-size: 13px; font-weight:bold; color: var(--blue); border-radius:5px; padding: 10px; border:1px solid var(--blue); background: var(--white);}
.newuser{ margin: 15px 0; display:flex; align-items: center; justify-content: center;}
.newuser span{padding-right: 10px;}
.newuser a {font-weight: bold; color: var(--white); padding: 3px 8px; background: var(--dark-blue); border-radius: 4px;
}
.fileUpload{margin-bottom:10px;}
.fileUpload input[type=file]{width:100%;}

.formcont{padding:20px; border-radius: 10px; border: 1px solid var(--white);}
.footerbg{background: var(--blue); color: var(--white); padding:60px 0;}
.footersec{display: flex; align-items: center; justify-content: space-between;}
.flogo{font-size:22px;font-weight:bold; line-height: 1.2;color: var(--white);}
.flogo span{font-family: 'Times New Roman', sans-serif;font-size:26px;  text-transform:uppercase; display:block; }
.footersec a{color: var(--white); padding: 5px;}

 
 .logoutbtn{display: flex; align-items: center;}
 .logoutbtn svg{width: 24px;}

.signimgs{ text-align:center; margin:15px auto;max-width:800px;box-shadow:0 0 3px var(--gray);}
.signimgs ul{display:flex;justify-content:center;}
.signimgs ul li{padding:10px;width:45%;}

label{color: var(--dark-blue);}
.formbox{}
.formbox ul{list-style: none; display: flex; margin:0 -10px; }
.formbox ul li{padding: 10px; width: 22%;}
.formbox ul li:last-child{width: 14%;}
.formbox ul li button{width: 100%;height: 46px; margin-top: 25px;}
.formbox ul li input, .formbox ul li select{background: var(--light-gray); border-radius:5px; border:none; height: 46px; box-shadow: none;}
 

.contents{background: var(--white); border-radius:8px; margin-bottom: 5px; padding: 10px;}
.contents table{margin: 0;}
.contents table tr td, .contents table tr th{line-height: 1.2;vertical-align:middle;}
.contents table th{color:var(--dark-blue);}
.contents h3 { margin-top: 0; color: var(--dark-blue); font-weight: 600; font-size: 20px;}
.contents h4 { margin:0 0 5px; color: var(--dark-blue); font-weight: 600; font-size: 16px;}

.uploadbtn{  overflow: hidden; position: relative; text-align: center; line-height: 34px; cursor: pointer;}
.upimg{width:100%; height: 34px;border-radius:5px; background:var(--light-gray); color:var(--dark-blue); font-weight: 600; display: block;}
.uploadbtn input{width:100%; height: 34px; position: absolute; left:0; top: 0; opacity: 0; z-index: 2; cursor: pointer;}

.imgwidth img{max-height: 120px;}
.photosec { display: flex;  align-items: center;  background: var(--light-gray); padding: 2px;  border-radius: 5px;}
.photobox{width: 150px; margin-right: 15px; position: relative; border-radius: 5px; padding: 3px; background:var(--white); text-align: center;}
.checkimg{position: absolute;  top: 50%;  left: 50%;  font-size: 40px;  color: red;  transform: translate(-50%, -80%);color: red;}

.showbox{width: 100%;  padding:20px; border-radius: 10px; border: 2px solid var(--white); font-weight: 600; }

@media (max-width:1600px){ 
.logo{font-size: 20px;}
.logo img {max-height: 86px;}
.logo span{font-size: 22px;}
.banner h1{font-size: 36px;}
.footerbg{ padding:40px 0;}
.flogo{font-size: 18px;}
.flogo span{font-size: 20px;}
}

@media (max-width:1440px){
 .links ul li a {font-size: 14px;  padding: 8px;}
}

@media (max-width:1199px){
body{font-size: 13px;}
.logo{font-size: 18px;}
.logo img {max-height: 74px; display: block;}
.logo span{font-size:22px;}
.headright a span{font-size: 16px;}
.headright a span small{font-size: 11px;}

.contentsec{padding: 10px;}
.loginbox{padding: 15px;}

.banner .container{width: 94%;}
.banner{height:350px; }
.banner > img { width: 100%; height: 100%; max-width: inherit;  object-fit: cover;  object-position: right;}
.linking{padding: 15px;}
.links{width: 190px;}
.linksec > ul > li{padding: 0;}
.banner h1 { font-size: 30px;}
.linking h3{font-size: 18px;}
.linking ul li a:before{width: 12px; height: 10px; background-size: contain;}
.linking ul li a {padding: 5px 15px;}
.sections { padding: 30px 0;}
}

@media (max-width:991px){
.home .headright a span, .innerhead .headright a span{display: none;}
.home .headright a, .innerhead .headright a{width:32px; height:32px; background: var(--blue); line-height:30px; text-align:center;  border-radius: 50%;  margin-left: 10px;  display: inline-block;}
.home .headright a img, .innerhead .headright a img{width: 20px; filter:brightness(100);}
.textbox h4{font-size: 18px;}
.boxs a{padding: 30px 10px; text-align: center;}
.boxs a span{line-height: 1.1; font-size: 16px;}
.boxs h4 small {font-size: 13px;}
.lists ul li{width: 50%}
}


 .navicon{display: none;}
@media (max-width:767px){
body{font-size: 13px;}
.fixed .logo, .logo{font-size: 14px;}
.fixed .logo div, .logo div {padding-left: 5px;}
.fixed .logo span, .logo span {font-size: 16px;}
.fixed .logo img, .logo img {max-height: 50px;}
.footerbg {padding: 20px 0;}
.flogo u{display: block;}
.footersec{display: block; text-align: center;}
.footersec > div{margin-bottom: 15px;}
.linksec > ul{display: block;}
.linksec > ul > li{width: 100%; margin-bottom: 5px;}
.banner{height: auto;}
.banner .container {position: static; transform: inherit; width: 100%;}
.banner h1 {font-size: 24px; position: static;}
.links {width: 100%;} 
.instructiontext {position: static;  background: none;  width: 100%;  margin-left: 0;   color: var(--blue);   text-decoration: underline;}

.contentsec{flex-wrap: wrap;}
.textbox, .loginbox{width: 100%;}
.loginbox{margin-top: 10px;}
.videobtn { float: left; margin: 0 0 10px; font-size: 12px;}
.linklist ul{flex-wrap: wrap; margin: 0;}
.linklist ul li{padding: 0;}

.linklist ul li{width:50%;}
.boxs img {max-height:45px;}
.boxs h4{font-size: 16px;}
.sections > .container > br{display: none;}
.headright a span {font-size: 13px;}
.imgpro {width: 36px; height: 36px; margin-left: 2px;}
.modal-header h4{margin: 0}
#instruction .btn{margin-bottom: 5px;}
.formlists > ul{flex-wrap: wrap; margin: 0;}
.formlists > ul li{width: 50%; padding: 5px;}
.formlists > ul > li:last-child { width: 100%;}
.formlists > ul > li .btn{margin-top: 0}
.headings2 {font-size: 24px;}
.contents h4 {margin: 15px 0 5px;  font-size: 15px;}

.lists ul li{width: 100%}
}


@media (max-width:479px){
.headright a span{display: none;}
.banner > img{height: 170px;}
.formlists > ul li {width: 100%; padding: 5px 0;}
.formsec h3 {font-size: 20px;}

.admitcard .showbox { padding: 5px;  border: none; background: none;}

.contents .table td, .contents .table>tbody>tr>td, .contents .table>tbody>tr>th, .contents .table>tfoot>tr>td, .contents .table>tfoot>tr>th, .contents .table>thead>tr>td, .contents .table>thead>tr>th {
    padding: 5px !important;
}

}