/* Index */
body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;  } 
.selectlang { margin-left: auto; margin-right: auto; cursor: pointer;}
/*li{cursor: default;}*/
ul.selectlang { list-style: none; margin: 10px 0 0 10px; padding: 0; display: inline-block; cursor: pointer;}
ul.selectlang li { display: inline; padding: 10px 20px; background: #eee; font-weight: bold; box-shadow: 2px 0 2px #aaa; align-items: center; cursor: default;}
ul.selectlang li.active { color: white; background: #000; }
.hide { display: none; }
.bodycontainer { margin: 20px; border: 3px solid black; padding: 0 10px; min-height: 80vh;}
.ckdetails { display: block; }
.logo{ margin-left: auto;margin-right: auto;display: block; }
.h1title{ text-align: center;font-size: 40px; }
.desc1{text-align: center;}
.detailtb{margin-top: 1rem; margin-bottom: 1rem;}
.arrow{flex:0 0 auto;width:15%; align-self: center;}
.tb{flex:0 0 auto;width:40%; word-wrap: break-word; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.5);border-radius: .5rem;}
.tb h3{font-size: 24px; font-style: italic;}
.card-title{margin-bottom:.5rem; font-weight: bold; margin-top: .75rem; text-align: center;}
.card-text{color: black;}
#para1, #para2{text-align: center;} 
.arrow img{width: 75%;  display: block; margin-left: auto;margin-right: auto;}
.buttons {list-style: none;}
.buttons li{display: block;  margin-left: -40px; border-radius: .5rem;cursor:pointer; }
/*.buttons li a{color: #fff;display: block; width: 100px; height: 20px; text-decoration: none;background-color: #0a95ff; padding: 10px;border-radius: .5rem; }*/
.buttons li a{color: #fff;display: block; width: 150px; height: 20px; text-decoration: none;background-color: #0a95ff; padding: 10px;border-radius: .5rem; }
.left{float: left;}
.right{float: right;}
.buttons li a:hover{background-color: #0f0fff;}
.nameinput input{width: 60%; padding: 12px; vertical-align: middle;}

.progressbar {width: 100%; height: 20px; background-color: #ddd; border-radius: 10px; text-align: center;margin-top: 10px;}
.fill {width: 0; height: 100%; background-color: #4CAF50; transition: width 0.5s ease-in-out; border-radius: 10px;font-size: 15px;}

.regform{margin: 10px; width: 50%;margin-left: auto;margin-right: auto;}
.regform label{width: 25%; font-size: 18px;}
.regform input, .regform select{width: 60%;font-size: 18px; }
.regform p, .loginform p{display: flex;}
/* .register{display: block;} */
.info{background: green; color: white; padding: 10px; text-align: center;}
.errormsg{background: red;color: white;padding: 10px; text-align: center;}
.btnsub{width: 120px; background-color: #0a95ff; padding: 10px 5px 10px 5px; text-align: center;font-size: 20px; border-radius: .4rem;color: #000;} 

.loginform{margin-left: auto;margin-right: auto;width: 40%;}
.loginform label{width: 30%; margin-left: 5%; font-size: 18px;word-wrap: break-word;}
.loginform input{width: 60%;font-size: 18px;}
.loginform button{margin-left: auto; margin-right: auto;}

.careertest{width: 96%;margin-left: auto;margin-right: auto;}
.section{padding-bottom: 5px;}
.sectitle{text-align: center;background-color: #aaa;padding: 5px; border-radius: 10px;}
.question{display: flex; padding: 5px; margin: 3px;background-color: #eee; border-radius: 10px; font-size: 16px;}
.ques{width: 80%; float: left;}
.selectopt{width: 20%;float: right;font-size: 16px;border-radius: 10px;text-align: center;}
.selectopt2{width: 100%;float: right;font-size: 16px;border-radius: 10px;text-align: center;}


/* Test 2 Page*/
.column{width: 30%;}
.cat{width: 5%;}
.job{width: 15%;}
.selectopttb{width: 12%;}
/* New */
.occupations, .occupations th{border: 1px solid white;} 

/* Results Page */
.desctitle{text-align: center;}
#stname, #date{float: right;}
#studname, #testeddate{float: left;}
.showresults{width: 70%;margin-left: auto;margin-right: auto;}
.studentdetails th{padding-left: 10px;padding-right: 10px;}
.resulttable th{width: 15%;}
.resulttable{border: 0;}
.cgnotes{width: 90%; text-align: center; margin-left: 5%;}
.cgnote{font-size: 16px;}

/* For Mobile */
@media only screen and (max-width: 625px) {
  .h1title{font-size: 24px;}
  .h2title{font-size: 28px;}
  .logo{width: 96%;}
  .tb{word-break: break-all; word-spacing: 6px; }
  .bodycontainer{margin: 20px 5px 10px 5px;}  
  .regform, .loginform{width: 100%;}  
  .regform input, .regform select{width: 75%;}
  .ques{width: 70%;}
  .selectopt{width: 28%;}
  .question, .selectopt{font-size: 14px;}
  .showresults{width: 96%;margin-left: auto;margin-right: auto;}
}

@media screen and (max-width:900px) { 
  /* Test 2 Page */
  /* th{display: inline-block;} */
  .column{width: 100%;}
  .cat{width: 15%; display: inline-block;}
  .job{width: 40%; display: inline-block;}
  .selectopttb{width: 40%; display: inline-block;}
  /* .column th{padding: 10px;} */
  /* .selectopttb{padding: 5px;} */
}
@media screen and (max-width:420px) {
    ul.selectlang li { display: inline-block;}
    td,th{display: block;}
    .tb{width: 100%;}
    .buttons {margin:5px;}
    .left{float: none;}
    .right{float: none;}
    .buttons li{width: 100%;}
    .arrow{-moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg); margin-bottom: 10px; margin-top: 10px; margin: 10px auto 10px auto;}
    .bodycontainer{margin: 20px 5px 10px 5px;}
    /*.buttons li a{width: 80px;display: block; margin-left: auto;margin-right: auto;}*/
    .buttons li a{width: 150px;display: block; margin-left: auto;margin-right: auto;}
    .buttons li {margin-left: -20px;margin-right: auto;}
    .regform label, .loginform label{display: block; font-size: 14px;}
    .regform input, .regform select{font-size: 14px; float: right;}
    .info, .errormsg{font-size: 14px;}
    /* Test 2 Page */
    .cat{width: 8%;}
    
    .resulttable th{display: inline-block; width: 14%;}
    .resulttable {width: 90%;}

    #stname, #date,#studname, #testeddate{float: none;}
    .showresults{width: 96%;}
    .studentdetails th{padding-left: 2px;padding-right: 2px; display: inline-block;}
  }
  

/* Register Form */

/* .regform { */
    /* position: relative; */
   /* margin: 20px; border: 2px solid black; padding: 0 10px;
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: #fff;

    padding: 25px;
    border-radius: .5rem;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  }
  .theader {
    font-size: 2rem;
    color: #333;
    font-weight: bold;
    text-align: center;
  }
  .regform th{width: 25%; margin: 10px;}
  .inputbox label {
    color: #333;
    float: left;
  }
  .inputbox input, .inputbox select{
    width: 95%;
  }
  .btnsub{width: 80%; background-color: #0a95ff; padding: 10px 5px 10px 5px; text-align: center;font-size: 20px; border-radius: .4rem;color: #000;} */
  /*
  .form :where(.input-box input, .select-box) {
    position: relative;
    height: 50px;
    width: 95%;
    outline: none;
    font-size: 1rem;
    color: #707070;
    margin-top: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 15px;
  }
  .input-box input:focus {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  }
  .form .column {
    display: flex;
    column-gap: 15px;
  }
  .column .input-box{
    width: 40%;
  }
  .bdate{
    margin-left: 10%;
  }  
  .form .gender-box {
    margin-top: 20px;
  }
  .gender-box h3 {
    color: #333;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 8px;
  }
  .form :where(.gender-option, .gender) {
    display: flex;
    align-items: center;
    column-gap: 50px;
    flex-wrap: wrap;
  }
  .form .gender {
    column-gap: 5px;
  }
  .gender input {
    accent-color: rgb(130, 106, 251);
  }
  .form :where(.gender input, .gender label) {
    cursor: pointer;
  }
  .gender label {
    color: #707070;
  }
  .address :where(input, .select-box) {
    margin-top: 15px;
  }
  .select-box select {
    height: 100%;
    width: 95%;
    outline: none;
    border: none;
    color: #707070;
    font-size: 1rem;
  }
  .form button {
    height: 55px;
    width: 100%;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    margin-top: 30px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgb(130, 106, 251);
  }
  .form button:hover {
    background: rgb(88, 56, 250);
  }
  */
  /*Responsive*/
  /*
  @media screen and (max-width: 500px) {
    .form .column {
      flex-wrap: wrap;
    }
    .form :where(.gender-option, .gender) {
      row-gap: 15px;
    }
  }*/