body{
	background: #CFCFCF !important; color: #00123C;
}
*{
  padding: 0px;
  margin: 0px;
  font-family: "Poppins", sans-serif;
  
}

h1{
   font-size: clamp(1.9rem, 2.5vw, 2.5rem) !important;
}
p{
   font-size: clamp(16px, 2.5vw, 19px) !important;
}
.mt-10{
  margin-top:4rem !important;
}
.login-container{
	max-width: 100%;
	margin: 0 auto;
	display: block;
}
.container{
  max-width:85%;
  margin: 0 auto;
  display: block;
}
.w-85{
  max-width:85%;
  margin: 0 auto;
  display: block;
}
.img-responsive{
	max-width: 100%;
}
.filter-btn{
color:#fff
}

/*Login*/

.login-wrapper {
  display: flex;
  justify-content: center;  
  align-items: center;  
  height: 100vh;       
}

.login-box {
  width:100%;
	margin: 0 auto;
	display: block;
  padding: 25px;
  background: #fff;
  border-radius:25px;
}
.login-box h1{ 
  font-weight: 300;
}
.login-box strong{
  font-weight: bold;
}
.login-box p{
  margin-bottom:10%;
}
.logo img {
  margin-bottom:25px;
}
 
.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #1f2937;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #A3A3A3;
  border-radius: 8px;
  font-size: clamp(16px, 2.5vw, 18px);
}

.form-group input:focus {
  outline: none;
  border-color: #f97316;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.remember {
  font-size: clamp(16px, 2.5vw, 18px);
  color: #6b7280;
}

.forgot {
   font-size: clamp(16px, 2.5vw, 18px);
  color: #2563eb;
  text-decoration: none;
}
.forgot a{
  text-decoration: none;
}

.forgot:hover {
  text-decoration: underline;
}

.btn-login {
  background: #f97316;
  color: #ffffff;
  border: none;  
  border-radius: 8px;
   font-size: clamp(18px, 2.5vw, 19px);
  font-weight:600;
  cursor: pointer;
  padding-right:clamp(20px, 2.5vw, 25px);
  padding-left:clamp(20px, 2.5vw, 25px);
  padding-top:clamp(15px, 2.5vw, 15px);
  padding-bottom:clamp(15px, 2.5vw, 15px);
 transition: all 0.3s ease;
     letter-spacing: 1px;
}

.btn-login:hover {
  background:#00123c;transform: translateY(-4px); 
  
}
 

.input-wrapper {
  position: relative;
}
.fr-top{

  float: right;
}

/*.navbar.fixed-top + .page-body-wrapper {
    padding-top: 45px;
}*/
/* Floating label */
.floating-label {
  position: absolute;
  top: -13px;
  left: 16px;
  background: #ffffff;
  padding: 0 10px;
  /*font-size: clamp(16px, 2.5vw, 18px);*/
  font-weight:500;
  color:#00123C;
}

/* Input container */
.input-box {
display: flex;
    align-items: center;
    border: 1px solid #A3A3A3;
    border-radius: 8px;
    padding: 15px 14px;
    background: #ffffff;
}

/* Icon */
.icon {
  margin-right: 10px;
  font-size: 16px;
  color: #9ca3af;
}

/* Input field */
.input-box input {
  border: none;
  outline: none;
  width: 100%;
  font-size: clamp(16px, 2.5vw, 19px);
  color: #111827;
}

.input-box input::placeholder,
.form-group input::placeholder{
  color: #9ca3af;
}

/* Focus state */
.input-box:focus-within {
  border-color: #f97316;
}

.login-left{
	  display: flex;
  justify-content: center;  
  align-items: center; 
  height:auto; 
}
.input-wrapper .toggle-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #777;
  font-size: 18px;
}

.input-wrapper .toggle-icon:hover {
  color: #000;
}
.custom-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: clamp(16px, 2.5vw, 19px);
  user-select: none;
  gap:15px;
}

/* Hide default checkbox */
.custom-checkbox input {
  display: none;
}

/* Custom box */
.checkmark {
  width: 25px;
  height: 25px;
  border: 1px solid #A3A3A3;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s ease;
  background: #fff;
}

/* Check icon */
.checkmark::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 2px;
    width: 7px;
    height: 15px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s ease;
}

/* Checked state */
.custom-checkbox input:checked + .checkmark {
  background-color: #f97316;
  border-color:#f97316;
}

.custom-checkbox input:checked + .checkmark::after {
  transform: rotate(45deg) scale(1);
}

/* Hover effect */
.custom-checkbox:hover .checkmark {
  border-color: #4f46e5;
}
.login-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/*Forgot Password*/
.back-login {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  text-decoration: none;
  color: #8E8E8E;
}
.back-login img{
  margin-right: 10px;
}
.error{
  color: red;
}


/*Common Form*/
.common-form{
  max-width: 85%;
    margin: 0 auto;
  display: block;
}
.banner {
    position: relative;
    color: #ffffff;
    background-color: #fafafa;
    background-size: cover;
    background-position: top center;
    padding:6% 0;
    margin-bottom: 0px;
}
.banner h1 {
    font-weight: bold;
    color: #fff;
    font-size: clamp(1.9rem, 2.5vw, 3rem);
}
main{
  background: #fff;
  padding:5% 0%;
}
 
.questionnaire-card {
  margin: auto;
    border-radius: 18px;
  padding:5%;
   background: linear-gradient(to bottom, #F6F6F6, #ffffff);
   border: #ddd solid 1px;
}
.common-form .small{
  color: #7B7B7B !important;
  padding: 10px 0px;
}

.title {
  text-align: center;
   font-size: clamp(1.6rem, 2vw, 1.9rem);
  font-weight:bold;
  letter-spacing: 1px;
  color: #00123C;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.title .small{
   font-size: clamp(16px, 2.5vw, 16px);
   color: #00123C !important;
}
.common-form h3 {
  text-align: center;
   font-size: clamp(18px, 2.5vw, 20px);
  font-weight:600;
  color: #00123C;
  margin-bottom: 20px;
}
.common-form h4{
   font-size: clamp(18px, 2.5vw, 22px);
  font-weight:500;
  color: #00123C;
  margin-bottom: 20px;
}
.common-form h4 span {
    color: #f97316;
    margin-left: 3px;
    font-size: clamp(14px, 2.5vw, 19px);
}
.common-form hr{
        border-top:#c4c3c3 1px solid !important;
        margin: 10px 0px 20px;
}
/* Divider */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.divider span {
  width: 60px;
  height: 2px;
  background: #ff7a18;
}

.divider i {
  width: 10px;
  height: 10px;
  background: #ff7a18;
  border-radius: 50%;
  margin: 0 10px;
}

/* List */
.question-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.question-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 22px;
  font-size: 17px;
  color: #1f2a44;
  line-height: 1.6;
}

/* Checkbox styling */
.question-list input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  cursor: pointer;
}

.question-list label {
  cursor: pointer;
}

.question-list a {
  color: #ff7a18;
  text-decoration: none;
  font-weight: 600;
  display: contents;
}

.question-list a:hover {
  text-decoration: underline;
}

.common-form .form-group {
  position: relative;
  /*max-width:95%;*/
}

/* Input field */
.common-form .form-group input,
.common-form .form-group select,
.common-form .form-group textarea {
  width: 100%;
  padding:27px 30px 20px;
  font-size: clamp(16px, 2.5vw, 19px);
  border-radius:10px;
  border: none;
  outline: none;
  background: #ffffff;
  border: #CECCCC solid 1px;
color:#585858
}

/* Floating label */
.common-form .form-group label {
  position: absolute;
  top: -15px;
  left:25px;
  background: #ffffff;
  padding: 0 8px;
  font-size: clamp(15px, 2.5vw, 19px);
  color:#00123C;
  font-weight: normal;
    line-height: 28px !important;
}
 .extra-space-non {
padding-top:50px !important;
} 
.form-control{
 font-size: clamp(15px, 2.5vw, 19px);
}
.nav-profile-text p {
    color: #fff !important;
    margin-bottom: 0px;
}
.common-form textarea {
    vertical-align: top; 
    text-align: left;  
    padding: 5px;  
    box-sizing: border-box;  
}

/* Required star */
.common-form .form-group label span {
  color: #f97316;
  margin-left: 3px;
  font-size: clamp(14px, 2.5vw, 19px);
}

 

/* Floating container */
/*.floating-group {
  max-width: 600px;
}*/

.radio-box {
  /*position: relative;*/
  background: #ffffff;
  border-radius: 14px;
    padding: 27px 30px 20px;
    font-size: clamp(16px, 2.5vw, 19px);
     border: #CECCCC solid 1px;
}

/* Floating label */
.floating-label {
  position: absolute;
    top: -15px;
    left:15px;

    background: #ffffff;
    padding: 0 8px;
font-size: clamp(16px, 2.5vw, 19px);
    color:#00123C;
    font-weight: normal;
}

.custom-input-height {
  height: 50px;        /* Change height as you need */
  padding: 10px 15px;
  font-size: 16px;
  box-sizing: border-box;
}

.floating-label span {
  color: #f97316;
}

/* Radio options */
.radio-options {
  display: flex;
  gap: 40px;
      /*margin-top:20px;*/
}
.ext-mt{
  margin-top: 20px;
}
.floating-group p{
  font-size: clamp(17px, 2.5vw, 17px) !important;
color:#585858
}

/* Hide default radio */
.radio-item input {
  display: none;
}

/* Radio label */
.radio-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  cursor: pointer;
  color:#585858;
}

/* Custom radio */
.custom-radio {
  width: 24px;
  height: 24px;
  border: 2px solid #9ca3af;
  border-radius: 50%;
  position: relative;
}

/* Checked state */
.radio-item input:checked + .custom-radio {
  border-color: #f97316;
}

.radio-item input:checked + .custom-radio::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #f97316;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.note{
  background: #F6F6F6;
  padding: 20px;
  border-radius: 14px;
}
.note p{
  text-align: center;
  font-size: clamp(16px, 2.5vw, 16px);
}
.note span {
    color: #f97316;
    margin-left: 3px;
    font-size: clamp(14px, 2.5vw, 19px);
}

.button-group {
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: center;
  gap: 20px;
}

/* Base button */
.btn-common {
  border: none;
  border-radius:8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.25s ease;
  padding:15px 30px ;
}

/* Submit */
.btn-primary {
  background: #f97316;
  color: #ffffff;
}

.btn-primary:hover {
  background: #ea580c;
}

/* Draft */
.btn-secondary {
  background: #f0f0f0;
  color: #111827 !important;
}

.btn-secondary:hover {
  background:#0B123C;
  color: #fff !important;
}


/*16-01-2026*/
.sidebar .nav .nav-item.active .sub-menu a,
.sidebar .nav .nav-item.active .sub-menu .nav-link:before{
  color: #fff !important;
}
.profile{
  margin-top:3%;
} 

.profile h3{
      font-size: clamp(1.2rem, 2.5vw, 1.3rem) !important;
    font-weight: 600 !important;
    color: #0a1a44 !important;
    margin-bottom: 10px !important;
}
.profile p{
      font-size: clamp(18px, 1.5vw, 20px) !important;
    color: #0a1a44 !important;
}
 

.upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding:20px 12px;
  border: 1.5px dashed #cfd4dc;
  border-radius: 8px;

  color: #6c757d;
 
      font-size: clamp(18px, 1.5vw, 18px) !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upload-label:hover {
  background-color: #f8f9fa;
  border-color: #0d6efd;
  color: #0d6efd;
}

.upload-label i {
  font-size: clamp(18px, 1.5vw, 18px) !important;
}
.change-password .toggle-icon {
  right:25px; 
}
/*.change-password .input-box input {
    padding: clamp(9px, 2vw, 10px);
}*/
.btn-cancel {
  background: #fff;
  color:#f97316;
  border: #f97316 solid 1px;  
  border-radius: 8px;
   font-size: clamp(18px, 2.5vw, 19px);
  font-weight:600;
  cursor: pointer;
  padding-right:clamp(20px, 2.5vw, 25px);
  padding-left:clamp(20px, 2.5vw, 25px);
  padding-top:clamp(15px, 2.5vw, 15px);
  padding-bottom:clamp(15px, 2.5vw, 15px);
 transition: all 0.3s ease;
     letter-spacing: 1px;
}
.btn-cancel:hover {
 border: #00123c solid 1px;
  transform: translateY(-4px);
   background: #fff;
   color: #00123c;
}

.change-password p{
  color: #595959;
  font-size: clamp(18px, 1.5vw, 18px) !important;
}
.sidebar .nav .nav-item.active > .nav-link .menu-title{
  font-family: "Poppins", sans-serif !important;
}
.nav-profile-image img{
  margin-right: 10px;
}
#traffic-chart-legend ul li{
  color: #00123C;
  font-size: 16px;
}
.rounded-legend.legend-vertical ul li {
    margin-top: 0.5rem;
}
.card-counts .card{
  min-height: 160px;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background-color: #3f6476 !important;
    color: #fff;
}
.table a{
      color: #0a1a44;
      text-decoration: none;
}
.table .btn{
  border-color: #f97316 ;
}
.table .btn:hover{
  background:#00123C;
  color: #fff;
   border-color: #00123C ;
}
.contact-information h6{
  font-size: clamp(18px, 1.5vw, 18px);
    line-height: 27px;
}
.fr{
  float: right;
}
.dashboard-calendar{
  position: relative;
}
.dashboard-calendar .calendar{
    position: absolute;
    right: 15px;
    top: 13px;
}
 .datepicker.datepicker-dropdown{
    padding: 0 25px;
    width:25% !important; 
    max-width:25% !important;
    min-width:15% !important;
    right: 35px !important;
    float: right !important;
    left: auto !important ;
    box-shadow: -6px 0 12px rgba(0, 0, 0, 0.08);
}
.dashboard-calendar .form-control::placeholder{
 letter-spacing:0.5px;
 font-size:16px;
 }
 .dashboard-calendar .form-control{
  border-radius: 6px;
 }

/* Input field */
 .rubric-table table{
        border: 1px solid #e0e0e0 !important;
}
 .rubric-table th{
    font-weight:bold !important;
   font-size: clamp(16px, 2.5vw, 18px) !important;
}
 .rubric-table td{
   font-size: clamp(16px, 2.5vw, 18px) !important;
}
 .rubric-table td {
  word-wrap: break-word;
  white-space: normal;
  line-height: 25px;
}

.upload-popup .modal-dialog{      
        max-width: 50%;
}
.upload-popup .modal-content{
  background: #fff !important;
  border-radius:15px;
  padding: 35px;
}
.upload-popup .modal-title {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    font-weight: 600;
    color: #0a1a44;
    margin: 0;
}
.upload-popup .modal-header{
  border-bottom: none;
}
.upload-popup .form-control{
  font-size: 18px;
}
.back_btn {
    background:#c5c5c5;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.back_btn:hover {
    background:#9b9898;
}


@supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee)) {
  #content {
    border-block-start: initial !important;
            margin-top: 7%;
  }
  /*.logo {
    max-inline-size:150px !important;
}*/
.header_wapper{
  height: 100px !important;
}
}


 @media screen and (max-width:1440px){
   p {
    font-size: clamp(16px, 2.5vw, 16px) !important;
}
.input-box{
            padding-top: clamp(10px, 2vw, 10px);
        padding-bottom: clamp(10px, 2vw, 10px);
}
 .dashboard-calendar .form-control{
  border-radius: 6px;
 }
#traffic-chart-legend ul li {
    font-size: 15px;
}
#traffic-chart-legend ul li span {
    width: 10px;
    height: 10px;
  }
  .datepicker.datepicker-dropdown {
    width: 20% !important;
}
.upload-label{
   padding:12px 12px !important; 
   font-size: clamp(16px, 2vw, 17px) !important;
}
.custom-checkbox,
.common-form .form-group label,
.common-form .form-group input, .common-form .form-group select, .common-form .form-group textarea,
.floating-label{
font-size: clamp(16px, 2.5vw, 17px);
color:#585858
}
.extra-p {
        padding-top: 0px;
    }
 }
@media screen and (max-width:1366px){
.extra-p {
        padding-top: 0px !important;
    }
}

@media screen and (max-width:1280px){
    .datepicker.datepicker-dropdown {
        width: 30% !important;
    }
.filter-input {
    padding: 0 12px;
}
.floating-group p{
  font-size: clamp(16px, 2.5vw, 16px) !important;
}
.floating-label{
font-size: clamp(16px, 2.5vw, 16px);
}
.common-form .form-group label{
font-size:clamp(16px, 2.5vw, 16px) !important;
}
.extra-p{
padding-top:20px
}
 
.container {
    max-width: 95%;
}
.common-form .form-group label {
  font-size: clamp(15px, 2.5vw, 17px);
}
.form-control{
padding: 0.54rem 1.375rem;
}
.filter-btn {
        height: 45px !important;
width: 100px;
    }
    .dashboard-calendar .form-control {
        border-radius: 6px;
        font-size: 17px;
    }
 .card-icon-mt h2 {
        font-size: 1.4rem !important;
}
}

 @media screen and (min-width:981px){
.common-form .form-group label,
.floating-label{
  position:absolute; 
}
.floating-group{
    position: relative;
}
.floating-group .floating-label{
  position:absolute; 
}

}
 @media screen and (max-width:980px){
  .navbar-toggler-icon:after,
  .navbar-toggler-icon:before{
    left: auto !important;
  }
  .navigation_main{
    padding: 70px 35px;
  }
@supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee)) {
  #content {
    border-block-start: initial !important;
            margin-top:17%;
  }
 
}
}

 @media screen and (max-width:767px){
    .datepicker.datepicker-dropdown {
    width: 87% !important;
    max-width: 87% !important;
}
.floating-group p {
    font-size: clamp(17px, 2.5vw, 16px) !important;
}
 .form-group select {
        padding: 32px 30px 18px !important;
    }
    .btn-common{
          font-size: 16px;
          padding: 15px 15px;
    }
.common-form .form-group label,
.floating-label{
  position:static;
         margin-bottom: 10px;
}
.mt-4 {
    margin-top: .3rem !important;
}
    .common-form .form-group label,
.floating-label {
        font-size: clamp(17px, 2.5vw, 16px) !important;
color:#000;
    }
.form-group label{
    margin-bottom: 0px;
}
.mb-4 {
    margin-bottom:1rem !important;
}
.radio-options {
    display: block;
}
.radio-item{
width:100% !important;
margin-bottom:10px
}
.ext-mt {
    margin-top:0px;
}
.common-form .form-group label span{
font-size:17px
}
.common-form h3 {
    font-size: clamp(20px, 2.5vw, 20px);
}
.radio-box{
margin-bottom:15px
}
.input-wrapper .toggle-icon{
    top: 65%;
}
}

/* Microsoft Edge / Internet Explorer */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}