@import url("./reboot.css");

/************************* login */

.login {

  width: 100%;

  height: 100vh;

  position: relative;

  background: url("../../assets/images/Dashboard\ Login3.png");

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  z-index: 1;

}

.login-wrap{

  padding: 30px;

}

.login-wrap .logo{

  width: 400px;

  margin: auto;

}

@media (max-width:737px) {

  .login-wrap .logo{

    width: 200px;

  }

}

.login-wrap .sub-title {

  font-size: var(--fs-3);

  font-weight: var(--fw-600);

}

.form-warp {

  margin-top: 35px;

}

.input-wrap {

  border: 1px solid #000;

}

.login-btn {

  background-color: var(--navy-blue);

  color: #fff;

  font-size: var(--fs-1);

  font-weight: var(--fw-500);

  width: 100%;

  padding: 10px;

  margin-top: 35px;

  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

  transition: .2s;

}

.login-btn:hover{

  transform: scale(1.1);

  background-color: green;

}

.circle-shape {

  background-color: #184c99;

  clip-path: circle(31.8% at 1% 100%);

  height: 100%;

  left: 0;

  position: absolute;

  bottom: 0;

  width: 100%;

  z-index: -3;

}

.circle-shape1 {

  background-color: #2a65be;

  clip-path: circle(25.8% at 1% 100%);

  height: 100%;

  left: 0;

  position: absolute;

  bottom: 0;

  width: 100%;

  z-index: -2;

}

.circle-shape2 {

  background-color: #4476c0;

  clip-path: circle(18.8% at 1% 100%);

  height: 100%;

  left: 0;

  position: absolute;

  bottom: 0;

  width: 100%;

  z-index: -1;

}



/**************************** home page */

.wrapper {

  background-color: var(--blue);

  position: relative;

  height: 75vh;

}

.navbar {

  padding-top: 20px;

}

.navbar h2 {

  color: var(--white);

  font-weight: var(--fw-500);

}

.nav-link {

  color: var(--white);

  font-weight: var(--fw-500);

}

.s-name{

  color: #fff;

}

.blue-btn {

  background-color: var(--light-blue);

}

.panel-btn {

  width: 150px;

  color: #fff;

  font-size: var(--fs);

  font-weight: 500;

  padding: 12px 24px;

  border-radius: 5px;

  letter-spacing: 0.8px;

  white-space: nowrap;

  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}

.panel-btn img {

  width: 20px;

}

/* banner section */

.banner {

  margin-top: 60px;

  padding-bottom: 80px;

}

.banner-title {

  color: var(--white);

  font-size: var(--fs-9);

}

.banner-title::before {

  content: "";

  width: 250px;

  height: 1px;

  background-color: var(--white);

  position: absolute;

  top: 50%;

  left: 0%;

}

.banner-title::after {

  content: "";

  width: 250px;

  height: 1px;

  background-color: var(--white);

  position: absolute;

  top: 50%;

  right: 0%;

}

.benner-sub-text {

  color: var(--white);

  font-size: var(--fs-3);

  opacity: 0.8;

  letter-spacing: 0.8px;

}

.wave {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

}

/* main section */

.main-wrapper {

  margin: 60px 0px;

}

.main-wrapper h2 {

  font-size: var(--fs-6);

  font-weight: var(--fw-700);

}

.card-wrapper {

  margin-top: 60px;

}

.card {

  --bs-card-border-width: 0px;

  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  padding: 47px 0px;

  margin-right: 30px;

}

.card img {

  width: 150px;

  margin: auto;

}

.card-title {

  font-size: var(--fs-5);

  font-weight: var(--fw-700);

}

.btn-outline {

  border: 1px solid var(--red);

  color: var(--red);

}



.btn-red {

  background-color: var(--red);

}



@media (max-width: 767px) {

  .main-wrapper {

    padding: 0px 15px;

  }

  .banner-title {

    font-size: var(--fs-6);

  }

  .benner-sub-text {

    font-size: var(--fs-1);

  }

}

@media (max-width: 992px) {

  .wrapper {

    height: 65vh;

  }

  .navbar {

    padding-top: 40px;

  }

  .banner-title::before {

    display: none;

  }

  .banner-title::after {

    display: none;

  }

  .card {

    margin: 15px auto;

  }

}



/****************************************/

/* test-about */

.p-box{

  padding-bottom: 50px;

}

.test-about {

  background-color: var(--white);

  padding: 30px;

  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  position: relative;

  z-index: 1;

  margin-top: 5%;

}

.test-about img {

  margin: auto;

}

.test-about-title {

  font-size: var(--fs-6);

  font-weight: var(--fw-700);

  letter-spacing: 1px;

  color: var(--red);

  border: 1px solid var(--red);

  width: 50%;

  margin: auto;

  padding: 10px 8px;

}

.test-about-text {

  font-size: var(--fs-2);

  letter-spacing: 0.7px;

  line-height: 30px;

}

.test-about-info .line {

  width: 200px;

  height: 4px;

  background-color: var(--red);

  margin: auto;

  margin-bottom: 20px;

}

.test-btn {

  width: 250px;

  padding: 18px 30px;

  font-size: var(--fs-3);

  font-weight: var(--fw-700);

}

.about-video{

  width: 500px;

  height: 240px;

}

@media (max-width: 767px) {

  .test-about {

    padding: 15px 8px;

  }

  .test-about img {

    width: 200px;

  }

  .about-video{

    width: 300px;

    height: 240px;

  }

}

@media (max-width: 992px) {

  .test-about-wrapper {

    padding-bottom: 50px;

  }

  .test-about-title {

    width: 100%;

  }

  .p-box{

    padding-bottom: 0px;

  }

}

/***************************************/

/* report */

.header{

  background-color: var(--blue);

  padding: 15px 0px;

}

.circle{

  clip-path: circle(45.7% at 93% 0);

  width: 100%;

  height: 100%;

  right: 0;

  position: absolute;

  top: 0;

  background-color: var(--blue);

  z-index: -1;

  

}

.reports-main h2{

  font-size: var(--fs-8);

}

.reports-main h3{

  font-size: var(--fs-7);

  font-weight: var(--fw-700);

}

.test-box{

  background-color: var(--soft-black);

  border-radius: 20px;

  padding: 20px 35px;

}

.test-box span{

  color: var(--white);

  font-size: var(--fs-5);

  font-weight: var(--fw-400);

}

.test-box .num{

  font-size: var(--fs-8);

  font-weight: var(--fw-700);

}

.line{

  width: 80px;

  height: 4px;

  background-color: var(--red);

  margin: auto;

  margin-bottom: 20px;

  margin-top: -15px;

}



@media (max-width: 767px) {

  .main-wrapper{

    position: relative;

    z-index: 1;

  }

}

@media (max-width: 992px) {

  .test-box{

    padding: 15px;

    margin-top: 20px;

    margin-bottom: 20px;

  }

  .test-box span{

    color: var(--white);

    font-size: var(--fs-4);

  

  }

  .test-box .num{

    font-size: var(--fs-6);

  }

  .reports-main h2{

    font-size: var(--fs-7);

  }

  .reports-main h3{

    font-size: var(--fs-6);

    margin-top: 30px;

  }

  .nav-link{

    padding: 10px;

  }

  .main-wrapper .card{

    margin-right: 15px;

  }

  

}

/***************************************/

/* student-panel */

.sidebar-toggle{

  margin-left: 120px;

}

.sidebar-toggle.active{

    margin-left: 40px;

}

.panel-header {

  background-color: var(--purple);

  padding: 15px 25px;

  position: fixed;

  top: 0;

  width: 100%;

  z-index: 1;

}

.panel-title.active{

    display: none;

}

.user {

  width: 32px;

  border-radius: 50%;

  object-fit: cover;

}

.panel-nav {

  background-color: var(--soft-black);

  height: calc(100vh - 62px);

  position: fixed;

  width: inherit;

  top: 62px;

  transition: .2s;

}

.nav.close {

    width: 85px;

}

.nav.close .nav-right .link-name{

    opacity: 0;

}

.nav.close .user-name{

    font-size: var(--fs);

    padding: 5px;

    

}

 /* .content-wrapper.active{

    width: calc(100% - 85px);

}  */

.user-name {

  color: rgba(255, 255, 255, 0.6);

  opacity: 0.7;

  padding: 15px 25px;

  border-bottom: 1px solid;

  text-transform: uppercase;

}



.nav-right ul li:hover,

.log-out-btn:hover {

  background-color: var(--dark-black);

  border-left: 3px solid var(--purple);

}

.nav-right ul li a {

  color: var(--white);

  font-size: var(--fs-2);

  padding: 18px 25px;

}

.nav-right .link-name{

    opacity: 1;

}

.log-out-btn {

  padding: 18px 25px;

  color: var(--white);

  width: 100%;

}

.content-wrapper {

  background-color: var(--light-white);

  padding: 15px;

  margin-top: 62px;

  height: auto;

}

.content {

  background-color: var(--white);

  width: 100%;

  min-height: 350px;

  padding: 25px;

  border-radius: 5px;

}

.content-inner {

  border: 1px solid #ddd;

  border-radius: 5px;

  width: 100%;

  /* height: 300px; */

  height: auto;

  margin: auto;

  padding: 25px;

}

.conent-text {

  background-color: var(--light-white2);

  width: 100%;

  height: 100%;

  border-radius: 5px;

}

.content-title {

  font-size: var(--fs-7);

  color: var(--grey);

  line-height: 70px;

}

.content-subtitle {

  font-size: var(--fs-3);

  color: var(--grey);

}

.defined-tests-title {

  font-size: var(--fs-6);

  color: var(--grey);

  font-weight: var(--fw-400);

}

.defined-tests {

  border: 1px solid #ddd;

  padding: 15px 0px;

}

.defined-tests span {

  color: var(--grey);

}

.navy-btn {

  background-color: var(--navy-blue);

}

.panel-btn:hover {

  color: #fff;

}

.btn-outline:hover {

  color: var(--red);

}

/* student reports panel */

.test-card{

    box-shadow: none;

    border: 1px solid #ddd;

    border-radius: 5px;

}

.test-card .card-title{

    font-size: var(--fs-9);

}

.test-card .card-subtitle{

    color: var(--grey);

    font-weight: var(--fw-700);

}

.btn-purple{

    background-color: var(--purple);

}

.btn-green{

    background-color: green;

}

/**********************************/

/* guide-panel */

.test-name{

    text-transform: uppercase;

    font-size: var(--fs-1);

    font-weight: var(--fw-500);

    color: var(--grey);

}

.table>:not(caption)>*>*{

    padding: 1.5rem;

}



/***********************************/

/* guide-report */

.backHome{

    padding: 25px;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}

.report-info span{

    font-size: var(--fs-2);

    color: var(--grey);

    font-weight: var(--fw-500);

    opacity: 0.8;

}

.form-select {

    padding: 0.95rem 1.25rem 0.95rem 1.75rem;

    font-size: var(--fs-1);

    color: var(--grey);

    font-weight: var(--fw-500);

}

.reports{

    border: 1px solid #ddd;

}

.report-content{

    border: 1px solid #ddd;

    border-radius: 5px;

}

.student-name{

    text-transform: uppercase;

}

.backHome a{

    color: var(--purple);

}

.backHome span{

    font-weight: var(--fw-600);

}

/**********************************/

/* guide-tests */

.btn-tests{

    padding: 8px 10px;

    text-transform: uppercase;

    background-color: var(--purple);

    color: var(--white);

    width: 100px;

    border-radius: 5px;

    margin-top: 40px;

}

.search-wrap input{

    border: 1px solid #ddd;

    width: 200px;

    padding: 5px 10px;

    border-radius: 5px;

}

.search-wrap button{

    width: 35px;

    height: 35px;

    background-color: var(--grey);

    border-radius: 5px;

    margin-left: 10px;

}

.test-status,

.back-arrow{

    background-color: var(--red);

    padding: 8px;

    width: 35px;

    border-radius: 5px;

}

.test-status img,

.refresh img,

.search img,

.back-arrow img{

    margin: auto;

}

.refresh,

.search{

    border-radius: 5px;

    padding: 8px;

    width: 45px;

    background-color: green;

}

.search{

    background-color: var(--blue);

}

.check{

    background-color: green;

}

/********************************/

/* teacher panel */

.back-arrow {

    background-color: orange;

}

/******************************************/

/* test-1 */

.test-body{

  background-color: var(--light-white);

}

.test-wrapper{

  width: 100%;

  min-height: 100vh;

}

.test-wrapper .card{

  background-color: var(--light-white2);

  min-width: 600px;

  width: 800px;

  max-width: 1000px;

  min-height:400px ;

  padding: 0px;

}





.test-wrapper .card-body{

  background-color: var(--white);

  border-top: 1px solid #ddd;

  border-bottom: 1px solid #ddd;

  /* padding:25px 15px 60px 15px; */

  gap: 15px;

}

.progress-line{

  width: 200px;

  height: 15px;

  border-radius: 15px;

  background-color: #ddd;

  position: relative;

}

.progress-line::after{

  content: "";

  width: 50%;

  height: 15px;

  background-color: var(--blue);

  border-radius: 15px;

  position: absolute;

  left: 0;

}

.percent,.page-num{

  font-size: var(--fs-2);

  margin: 10px 0px;

  color: var(--grey);

  font-weight: var(--fw-500);

}

.page-num{

  margin: 0;

}

.question{

  font-size: var(--fs-4);

  color: var(--soft-black);

  margin-bottom: 20px;

}

.qestion-answer {

  background-color: var(--light-white2);

  padding: 10px 15px;

  border-radius: 5px;

  cursor: pointer;

  transition: .2s;

  font-size: var(--fs-2);

  color: var(--grey);

}

.qestion-answer:hover,

.test-2 .qestion-answer:hover,

.test-7 .qestion-answer:hover{

  background-color: var(--blue);

  color: var(--white);

} 

.test-wrapper .card img{

  width: 18px;

}

.back-question{

  width: 38px;

  height: 38px;

  display: inline-block;

  background-color: var(--soft-black);

  border-radius: 50%;

}

.voice{

  transition: .2s;

}

.voice:hover{

  transform: scale(1.1);

}



/*******************************/

/* test-2 */

.test-2 .qestion-answer,

.test-7 .qestion-answer{

  background-color: transparent;

  border: 1px solid #ddd;

  width: 100%;

  height: auto;

  border-radius: 5px;

}

.test-2 .qestion-answer .ans-img,

.test-7 .qestion-answer .ans-img{

  width: 150px;

  height: auto;

}

/***************************************/

/* test-3 */

.poem-text,.question-text{

  font-size: var(--fs-2);

  font-weight: var(--fw-400);

  line-height: 30px;

}

@media (max-width:767px) {

  .test-wrapper .card{

    min-width: 300px;

    width: 360px;

    max-width: 400px;

    margin: 12px;

  }

  .test-2 .qestion-answer{

    width: 100%;

    

  }

  .test-wrapper .card-body{

    padding: 25px 15px 15px 15px;



  }

}

@media (max-width:1200px){

  .test-12 .qestion-answer .ans-img{

    width: 103px;

  }

}

@media (min-width:768px) {

  .test-wrapper .card{

    min-width: 600px;

    width: 760px;

    max-width: 1000px;

    min-height:400px ;

  }

}

@media (min-width:1200px) {

  .test-wrapper .card{

    min-width: 800px;

    width: 1100px;

    max-width: 1300px;

    min-height:400px ;

  }

}





/**********************************************/

/*test-5*/

.test-wrapper .card .card-body .question-img img{

  width:100%;

  margin-right: 40px;

}

#quizContainer.fullscreen {

  width: 100%;

  height: 100vh;

  background-color: var(--light-white);

}

#quizContainer.fullscreen .card{

  width: 100%;

  height: 100%;

  max-width: none;

  margin: 0;

  margin-right: 0;

}

#quizContainer.fullscreen .card .card-body .question-img img{

   width: 100%;

   height: auto;

   max-width: none;

}

#quizContainer.fullscreen  .qestion-answer .ans-img,

#quizContainer.fullscreen .qestion-answer .ans-img{

  width: 200px;

}

.full-min{

  display: none;

}

#quizContainer.fullscreen .card .full-min{

  display: block;

}

#quizContainer.fullscreen .card .full-max{

  display: none;

}

/******************************/

/* test-9 */

.test-wrapper.test-9 .card-body{

  padding: 5px;

}

.test-wrapper .card .question-img-two{

  width: 80%;

  height: 200px;

}

.quiz-warn{

  display: flex;

  align-items: center;

  justify-content: center;

}

.quiz-record {

  display: none;

  align-items: center;

  justify-content: center;

}

#border {

  width: 100px;

  height: 20px;

  border: 1px solid black;

}

#progress {

  height: 100%;

  width: 0;

  background: green;

}

/*****************************/

/* test-13 */

/* .record-button{

  width: 80px;

  height: 80px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

  border: 6px solid #ddd;

  border-radius: 50%;

  padding: 5px;

  position: relative;

} */

.record-button {

  width: 80px;

  height: 80px;

  background: var(--light-white);

  border-radius: 50%;

  position: relative;

  overflow: hidden;

}