@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
:root{
  --black : #000;
  --white : #fff;
  --navy : #180054;
  --gray : #6c757d;
  --blue : #0d6efd;
  --red : #ff0000;
}
/* scrollbar */
::-webkit-scrollbar {
  width: 4px !important;
}
::-webkit-scrollbar-thumb {
  background: var(--gray) !important;
  border-radius: 10px !important;
}
::-webkit-scrollbar-track {
  position: absolute !important;
  right: -3rem !important;
  top: -50rem !important;
  background: transparent !important;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gray) !important;
}
::-webkit-scrollbar-corner {
  background: transparent !important;
}
*{padding: 0;margin:0;box-sizing: border-box;}
body{background-color: var(--white);color:var(--black);font-family: 'Open Sans', sans-serif;}
img{max-width: 100%;}
button,a,button:hover,a:hover,button:focus,a:focus{cursor:pointer;text-decoration: none;color:inherit;outline: none;box-shadow: none;}
input:focus, select:focus, textarea:focus,input:focus, select:focus, textarea:focus-visible{outline: none;box-shadow: none;}
.formErrors{
  font-size: 12px;
  margin-bottom: 10px;
  font-weight: 500;
  color: red;
}
/* logo */
.logo-box{
  position: relative;
  text-align: center;
  padding-top: 50px;
}
.top_fix{
  display: inline-flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  max-height: 40px;
  padding-left: 20px;
  border-bottom-right-radius: 25px;
  box-shadow: 0 1px 25px rgb(0 0 0 / 30%);
  background: rgb(250, 134, 32);
}
.top_fix .logo img {
  border-bottom-left-radius: 10%;
  border-bottom-right-radius: 10%;
  max-width: 100px;
  box-shadow: 0 0 10px rgb(0 0 0 / 40%);
}
.top_fix .top_bar {
  color: #fff;
  font-weight: 500;
  margin: 1px 20px;
  font-size: 24px;
}
.heading{
  font-size: 30px;
  color: var(--navy);
  text-align: center;
}
.flex-box{
  display: flex;
  justify-content: space-evenly;
  padding: 10px 20px;
  flex-wrap: wrap;
}
.columns{
  padding: 0 20px;
}
.footer-column{
  font-size: 14px;
  font-weight: 700;
  width: 50%;
  text-align: center;
}
.content{
  padding: 30px 10%;
  min-height: calc(100vh - 285px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}
.form-box{
  max-width: 500px;
  width: 100%;
  margin: auto;
}
.label,.inputs{
  display: block;
  width: 100%;
}
.label{
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}
.inputs{
  padding: 8px;
  margin-bottom: 10px;
  font-size: 16px;
}
.gray-btn,.blue-btn,.gray-btn:hover,.blue-btn:hover,.gray-btn:focus,.blue-btn:focus{
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
}
.gray-btn{
  background-color: var(--gray);
}
.blue-btn{
  background-color: var(--blue);
}
.logout-box{
  width: 300px;
  border: solid 1px lightgray;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  text-align: center;
  padding: 20px;
  margin-bottom: 50px;
}
.relative{
  position: relative;
}
.edit{
  position: absolute;
  top: 0;
  right: 65px;
  height: 25px;
  cursor: pointer;
  border: solid 2px black;
  background: #fff;
  padding: 3px;
}
.profile{
  max-width: 50%;
  display: block;
  margin: 0 auto 20px;
  border: solid black 2px;
}
.title{
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: 600;
}
.designation{
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 15px;
}
.number{
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
}
.dashboard{
  width: 100%;
}
/* tabs */
.tabset{
  text-align: center;
}
.tabset > input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.tabset .tab-panel {
  display: none;
}
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6),
.tabset > input:nth-child(13):checked ~ .tab-panels > .tab-panel:nth-child(7),
.tabset > input:nth-child(15):checked ~ .tab-panels > .tab-panel:nth-child(8){
  display: block;
}

.tabset > label {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: var(--navy);
  margin-right: 20px;
  cursor: pointer;
  padding: 10px;
  background-color: rgb(233, 233, 233);
}
.tabset > label:hover,.tabset > input:checked + label {
  background-color: var(--navy);
  color: var(--white);
}
.tab-panel {
  padding: 20px 0 0;
  max-width: 900px;
  margin: auto;
}
.table{
  width: 100%;
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid var(--red);
  border-collapse: collapse;
}
th, td{
  padding: 6px;
  font-size: 16px;
}
td{
  background-color:#f2f2f2;
}
.icon{
  height: 30px;
}
@media (max-width:767px){
  .top_fix .logo img {
    max-width: 70px;
  }
  .top_fix .top_bar {
    margin: 5px 15px;
    font-size: 20px;
  }
  .logo-box {
    padding-top: 80px;
  }
  .heading{
    font-size: 24px;
  }
  .flex-box{
    padding: 5px;
  }
  .footer-column{
    font-size: 13px;
    width: 100%;
  }
  .columns{
    width: 100%;
    margin-bottom: 15px;
  }
}
.captcha{
  display: flex;
}
.captcha-img{
  height:40px;
}

.modal{
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content{
  background-color: #fff;
  padding: 30px;
  border-radius: 5px;
  min-width: 50%;
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 0 20px #999;
}
.cropper{
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.feedback-response{
  margin-top: 20px;
  border: solid 1px var(--gray);
  padding: 10px;
  border-radius: 4px;
  text-align: left;
}
.query-title{
  color: var(--black);
  margin-bottom: 5px;
}
.query-response{
  color:green;
  margin-bottom: 0;
}
.highlight-gray{
  background-color: #e9e9e9;
  padding: 0 6px;
}
.highlight-green{
  background-color: rgb(231, 255, 231);
  padding: 0 6px;
}