@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
  outline: none !important;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 1px;
}
html{
  overflow-x: hidden;
}
body{
  background:  linear-gradient( 179.2deg, #ffffff 0%, #f6f6f6 29.7%, #e9eaec 63.4%, rgb(255 255 255 / 97%) 100.1% ),url(../img/main-bg.jpg) no-repeat;
}
p{
   font-size: 16px;
    line-height: 22px;
    color: #2c3f5b;
    text-align: justify;
    font-weight: 500;
}
.card-title{
  color: #052f4d;
}
.form-group{
  position: relative;
}
.form-control{
  border-radius: 5px !important;
  position: relative;
  box-shadow: 1px 2px 3px rgba(0,0,0,0.1);
}
label{
  
    font-size: 16px;
    color: #121212;
    font-weight: 500;
}
.card-title{
  text-transform: capitalize;
}


.q-num{
 
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
.bootstrap-select.form-control{
  border: 1px solid transparent;
}
.bootstrap-select>.dropdown-toggle.bs-placeholder, 
.bootstrap-select>.dropdown-toggle.bs-placeholder:active, 
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus, 
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover{
  border-radius: 5px;
}
.dropdown-menu .dropdown-item{
  font-size: 16px !important;
  color: #121212 !important;
  font-weight: 500 !important;
}
/*error REquerd message*/
label.error {
  top: 0;
  right: 0%;
  position: absolute;
}

@media(max-width: 680px){
  #step-5 .on-card{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 280px;
    margin-top: 20px;
  }
}
.btn-main{
  
  border-radius: 5px;
  border: 1px solid rgb(38 152 226 / 22%)!important;
  background-image: radial-gradient( circle farthest-corner at 10% 20%, rgb(38 152 255) 0%, rgb(74 137 161 / 97%) 90% );
  color: #fff !important;
  padding: 5px 25px !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .23);
  overflow: hidden;
}
.btn-main .btn-cont::after{
  content: " ";
    position: absolute;
    top: -38%;
    left: -60%;
    background-image: linear-gradient( 171.8deg,  rgba(5,111,146,1) 13.5%, rgba(6,57,84,1) 78.6% );
    width: 400%;
    height: 400%;
    z-index: -1;
    transform: translateX(-120%);
    transition:all .5s ease-in-out;
}
.btn-main:hover .btn-cont::after,.btn-main:focus .btn-cont::after{
  transform: translateX(100%) !important;
}
.btn-main .btn-cont{
  z-index: 0;
  position: relative;
}
.wizerd-bg{
  background-image: linear-gradient( 93.1deg, rgb(215 224 244) 19.1%, rgb(240 240 240) 53.9%, rgb(255 255 255) 92% ) !important;
}
.main-border-radius{
  border-radius: 0px 10px 0px 0px !important;
}

/*BEGIN .login*/
.login{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 4000;
  padding: 100px 0;
  background: linear-gradient( 179.2deg, rgb(255 255 255 / 94%) 0%, #d8e8f4 29.7%, #f2f6ff 63.4%, rgb(255 255 255) 100.1% ),url(../img/login-bg.jpg) no-repeat;
  transition: .5s ease-in-out all;
  overflow-y: auto;
  overflow-x: hidden;
  background-size: cover;

}
.login .card{
  padding: 20px 0;
  border: none !important;
  border-radius: 0px 10px 0px 0px;
  position: relative;
}
.login .card-title{
   
    border-radius: 0px 10px 0px 0px;
    padding: 5px 0px;
    color: #1b4c68;
    text-align: center;
    margin-bottom: 22px !important;
    text-transform: capitalize;
}

.hat-img{
  position: absolute;
    width: 120px;
    height: 120px;
    bottom: 78%;
    left: 0;
    transform: translateX(-31%) rotate(-45deg);
    background: transparent;
    filter: drop-shadow(2px -1px 4px #aaa);
}

.transform-login{
  transform: translateX(-100%);
}
.custom-control-label{
  left: 25px;
}
@media(max-width:480px){
  .chk-h6{
   font-size: 15px;
  }
}

/*End .login*/
/*BEGIN .sign-up*/
.sign-up{
  position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3000;
    overflow: auto;
    background-image: linear-gradient( 179.2deg, #ffffff 0%, #f2f6ff 29.7%, #d2ddf4 63.4%, rgb(255 255 255 / 100%) 100.1% ) 
  }
.sign-up .card {
  border: 0 !important;
  border-radius: 0px 10px 0px 0px !important;
  margin-top: 50px;
  border-left: 1px solid #2997f8 !important;
  padding-top: 9px;

}

.sign-up  .card-head span{
  padding: 8px;
  background-image: radial-gradient( circle farthest-corner at 10% 20%, rgb(38 152 255) 0%, rgb(74 137 161 / 97%) 90% );
  color: #fff;
  border-radius: 0px 10px 0px 0px;
}
 .panal-main{
  border: 1px solid rgb(181 194 238 / 66%);
  padding: 25px 8px 8px 8px;
  position: relative;
  margin-top: 25px;
  border-radius: 0px 10px 0px 0px;
  box-shadow: 1px 2px 5px rgba(17,17,17,0.17);
  background-color: #fff;
}
 .panal-main .card-title{
  position: absolute;
    top: -21px;
    border: 1px solid rgb(166 204 239 / 38%);
    box-shadow: inset -1px 1px 8px rgba(17,17,17,0.1);
    padding: 8px;
    background: #fff !important;
    color: #1b4c68;
    border-radius: 0px 10px 0px 0px;
    z-index: 1;
}


.sign-up .sign-up-form{
  padding: 20px 0;
}

.sign-up .img{
  filter: drop-shadow(2px 4px 6px #999) ;
  padding-top: 90px ;
}
@media(max-width:1024px){
  .sign-up .img{
    display: none;
  }
  
}
/*BEGIN .sign-up*/
/*BEGIN .navbar*/
.navbar .navbar-brand{
  position: relative;
}
.navbar .onl-Exam{
  transform: translateX(15px);
}
.navbar .user{
  padding: 8px;
    background: rgb(22 129 205);
    color: #fff;
    border-radius: 5px;
    display: none;
    transition: all .3s ease-in-out;
}
.navbar .user .icon{
  background: #1681cd;
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 2px solid rgb(44 95 188 / 84%);
    box-shadow: 1px 2px 3px rgb(255 255 255 / 60%);
    line-height: 23px;
    font-size: 12px;
    text-align: center;
    margin-right: 4px;
    border-radius: 50%;
    color: #fff;
}
}
/*End .navbar*/

/*BEGIN .spinner*/

/*End spinner*/
/*start main-cont*/
.main-cont{
  margin: 30px 0;
}
/*start main-cont*/
/*BEGIN .online-ex*/
.online-ex{
 width: 98%;
 border-radius: 0px 10px 10px 0px;
 
}
.online-ex .step-steps{
  display: block !important;
  padding: 20px 0;
  border-radius: 0px  !important;
}

.online-ex .step-steps li{
 display: block !important;
}
.online-ex .on-card{
  border-radius:0px 10px 0px 0px;
  padding: 5px;
  background-color: #fff;
}
.online-ex .on-card .card-body{
  color: #fefbfe;
}

.online-ex .step-app > .step-steps > li > a{
  border-radius: 10px 0px 0px 0px;
  margin: 10px 0px 11px 10px;
  background-color: #e5e9f9;
  color: #121212;
  font-size: 18px;
  border: 1.2px solid rgb(240 240 240 / 30%) !important;
  border-right: none !important;
  padding: 0px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 1px 2px 10px rgba(0,0,0,0.2);
}

.online-ex .step-app > .step-steps > li.active a,.online-ex .step-app > .step-steps > li > a:hover{
  background-color: #1681cd;
    color: #fff;
}
.online-ex .step-app > .step-steps > li a .num{
    width: 30px;
    height:  33px;
    display: inline-block;
    margin-right: 5px;
    padding: 0;
    color: black;
    text-align: center;
    line-height: 33px;
    border-radius: 0px 0px 10px 0px;
    background-color: #fefefe !important;
    font-size: 14px;
    font-weight: 500;
   
}


.online-ex .step-app > .step-steps > li.active a .num,
.online-ex .step-app > .step-steps > li > a:hover .num{
  background-color: #e5e9f9 !important;
  color: #121212 !important;
}

.online-ex .step-app > .step-steps > li.error a{
  background-color: red !important;
  color: #fff !important;
}
.online-ex .step-app > .step-steps > li.error a .num{
  background-color: #cc0b0b !important;
  color: #fff !important;
}
.online-ex .step-app > .step-steps > li.done a{
  background-color: #bec8f0 !important;
  border: 1px solid rgb(255 255 255 / 24%) !important;
  color: #111 !important;
}
.online-ex .step-app > .step-steps > li.done a .num{
  background-color: #9caceb  !important;
 
}
.online-ex .step-app > .step-content{
 padding: 30px 10px; 
 border-radius: 0px 10px 0px 0px;
}
@media(max-width:680px){
    .online-ex .step-app > .step-steps > li > a{
      font-size: 15px;
      padding: 4px 0px;
     
  }
  .online-ex  .st-exam{
    font-size: 21px;
  }
  .online-ex .st-ex-container,.online-ex .mark-ques-con{
    width: 100%;
  }
  
  .online-ex .step-app > .step-content{
    border-radius: 0px!important;
  }
}
.online-ex .st-ex-container{
 min-width: 70%;
 border-radius: 10px;
 color: #fff;
 padding: 10px 0;
}
.online-ex .mark-ques-con{
  width: 50%;
  margin: 5px auto;
}
#list-qus{
 display: none;
}
.online-ex #step-2{
 padding-bottom: 49px;
}
.online-ex #step-3,.online-ex #step-5{
  padding-bottom: 55px;
 }
.main-cont  footer{
  border-radius: 0px 0px 10px 0px;
    background-color: #1681cd;
    text-align: right;
    padding: 5px;
}
.main-cont  footer .copyright a{
  color: #fff;
}
@media(max-width:480px){
  .main-cont footer{
    text-align: center;
  }
}



/*End .online-ex*/