/* Color code - #243B53, #E8F4FC, #F9FAFB, #FFFFFF */

/* DnD Colors
 
Primary: #243B53
Secondary: #E8F4FC
Background: #F9FAFB
Card: #FFFFFF
Hover: #1F2F3D / #D9EAF7
Section alternate background #F0F4F8
 
*/ 

:root{
    --new-first-color:#243B53;
    --new-second-color:#F9FAFB;
    --new-thired-color:#E8F4FC;
    --new-hover-color:#E8F4FC;
    /* --new-hover-color:#D9EAF7; */
    --new-white-color:#FFFFFF;

    --prev-border-color:#d1dce8;
    --prev-background-color:#fff;

    --accent: #0d9aaa;
    /* F9FAFB */
}

*{
    font-family: 'Roboto', sans-serif;
}
body{
    font-family: 'Roboto', sans-serif;
}


.p{
    /* Primary, Primary Hover, Primary Light, Background, Surface (Cards), Border */
    color: #243B53,#1F2F3F,#2568a8,#f9faf5,#FFFFFF,#E5E7EB;
    /* Heading (darker tone of primary), Body Text, Muted Text, Accent / Secondary, Secondary,Accent   */
    color: #102A43,#274159,#c7dcf0,#E8F4FC,#2BB0ED;
    /* Primary, Primary Hover, Background, Surface (Cards), Border */
    color: #486581,#627D98,#121417,#1E293B,#2D3748;
    /*  Heading, Body Text, Muted Text, Accent / Secondary, Secondary Surface  */
    color: #F1F5F9,#CBD5E1,#94A3B8,#2BB0ED,#243B53;
}


.dark_btn{
    all:unset;
    cursor: pointer;
    background-color: var(--new-first-color);
    color:var(--new-hover-color);
    /* padding: .5rem 3.8rem; */
    padding: .7rem 2.4rem;

    border-radius: 6px;
}

.light_btn{
    all:unset;
    cursor: pointer;
    color: var(--new-first-color);
    border:1px solid var(--new-first-color);
    padding: .7rem 2.4rem;
    /* padding: .3rem 3.8rem; */

    border-radius: 6px;
}

.new-shadow-outline{
    box-shadow: inset rgba(0, 0, 0, 0.06) 1px 1px 10px 5px;
    padding: 1.5rem;
    border-radius: 5px;
    background-color: var(--new-hover-color);
}

.label-v1{
    background-color: var(--new-hover-color) !important;
}

.input-all-container{
    border: 1px solid var(--new-first-color);
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    padding: .6rem;
    border-radius: 5px;
    background-color: var(--new-hover-color);
    /* border:  */
}
.input-container{
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    padding: .6rem;
    border-radius: 5px;
    position: relative;
    
}

/* .input-container input[type=checkbox]{
    appearance: none;
    border: 1.5px solid var(--new-first-color);
    border-radius: .2rem;
    width: 1rem;
    height: 1rem;
    margin-right: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.input-container input[type=checkbox]:checked {
    background-color: var(--new-first-color);
    position: relative;

    border: 1.5px solid var(--new-first-color) !important;
}

.input-container input[type=checkbox]:checked::after {
    content: "✔";
    color: var(--white-color);
    font-size: 0.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} */

.new_btn{
    all:unset;
    background-color: var(--new-first-color) !important;
    border:1px solid var(--new-first-color);
    cursor: pointer;
    color:var(--new-hover-color) !important;
    padding: .6rem 2rem;
    border-radius: 0.6rem;
    transition: all 0.3s ease-in-out;
    /* transition: all 0.3s transparent; */
}
.new_btn:hover{
    /* background-color:#1B2A3A; */
    color: var(--new-first-color) !important;
    border:1px solid var(--new-first-color);
    background-color: var(--new-thired-color) !important;
}



.new-btn-secondary,
.new-btn-secondary:disabled,
.new-btn-secondary:active,
.new-btn-secondary:focus {
    border-color:var(--new-first-color) !important;
    background: var(--new-thired-color) !important;
    color: var(--new-first-color) !important;
    padding: .6rem 2rem;
    border-radius: 0.6rem;
    transition: all 0.3s ease-in-out;
}

.new-btn-secondary:hover {
    border-color: var(--new-first-color) !important;
    background: var(--new-first-color) !important;
    color: var(--new-thired-color) !important;
}
/* .new_btn:active{
    transform:scale(0.97);
} */
/* .new_btn:focus{
    outline:2px solid #4DA3FF;
    outline-offset:2px;
} */
.login-bg,.nav-bg{
    background: var(--new-first-color) !important;
    outline: none !important;

}

.form-check-input{
    border: 1.5px solid var(--new-first-color);
    padding: 0 !important;
    /* width: .8rem;
    height: .85rem; */
    border-radius: .2rem !important;
    margin-right: 0.7rem !important;
}

.form-check-input:checked {
    background-color: var(--new-first-color) !important;
    border: 1.5px solid var(--new-first-color) !important;

    /* border-color: var(--text-color); */
}
.no-paper{
    background-color: var(--new-second-color) !important;
    background-image: none;
}
.logo_div{
    text-align: center;
    background-color: var(--new-first-color);
}
.login-div-box{
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
border-radius: 10px;
}
.login-center-box{
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    width: 100%;
}
.basic_title {
    text-align: center;
    font-family: Oswald;
    font-size: 40px;
    font-weight: bolder;
    color: var(--new-first-color);
}

.custom-card{
    width: 100%;
    padding: 1rem;
    /* border: 1px solid red; */
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.custom-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); transform: translateY(-3px); }

.custom-card-heading{
    font-size: 1.1rem;
    font-weight: 600;
    /* color: #1f2933; */
    margin-bottom: .5rem;
}

.custom-card-content{
    font-size: 0.95rem;
    /* color: #52606d; */
    /* line-height: 1.6; */
}

.new-form-container {
    background-color: var(--white-color) !important;
    /* color: var(--bg-inverse-color) !important;  */
    /* border-radius: .25rem; */
    border: 1px solid var(--new-second-color);
    padding:2rem;
    border-radius: 7px;
    /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; */
    /* box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; */
    /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; */
    /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; */
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

/* For Step Navigation Form */



/* ── STEP NAV ── */
.dd-step-nav{
    background: var(--new-second-color);
    border-bottom:1px solid #d1dce8;
    padding: 1.5rem;
    /* padding-top: 0; */
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:0;
}
.dd-step-pill{
    padding:0.38rem 1.2rem;
    border-radius: 8px;
    /* border:1.5px solid #d1dce8; */
    background: var(--new-second-color);
    color: var(--new-first-color) !important;
    font-size:1rem;
    /* font-weight:500; */
    white-space:nowrap;
    /* cursor:pointer; */
    transition:all 0.2s;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.dd-step-pill.active{
    background: var(--new-first-color);
    /* border-color:    ; */
    color:var(--new-white-color) !important;
}
/* .dd-step-pill.completed{ 
    background: var(--new-first-color);
    color:var(--new-white-color) !important;
} */

.new-field-box{
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    padding:1rem;   
}
.dd-step-chevron{ 
    color:#c8d6e5;
    font-size:1.1rem;
    margin:0 4px;
}

/* ── CONTENT AREA ── */
.dd-content-area{
    /* padding:1rem 0; */
    min-height:320px;
}
.dd-panel{display:none;}
.dd-panel.active{display:block;animation:fadeIn 0.3s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.dd-panel-title{
    color: var(--new-first-color);
    font-size:1.35rem;
    font-weight:700;
    margin-bottom:0.35rem;
}
.dd-panel-subtitle{
    color:#6b7c93;
    font-size:0.88rem;
    margin-bottom:1.5rem;
    line-height:1.55;
}

/* ── SLOT (replace with your content) ── */
.dd-slot{
    border-radius:10px;
    background: var(--new-second-color);
    min-height:200px;
}
.dd-slot .slot-label{
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#aab8c8;
}

/* ── FOOTER ── */
.dd-footer{
    background: var(--new-white-color);
    /* border-top:1px solid #d1dce8; */
    padding:1rem 1.5rem;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.dd-progress-header{ 
    display:flex;
    justify-content:space-between;
    margin-bottom:0.45rem;
}
.dd-progress-label{
    color: var(--new-first-color);
    font-size:0.79rem;
}
.dd-progress-count{
    color:var(--new-first-color);
    font-size:0.79rem;
    font-weight:600;
}
.dd-progress-track{
    background:var(--new-thired-color);
    height:5px;
    border-radius:999px;
    overflow:hidden;
    margin-bottom:1rem;
}
.dd-progress-fill{
    background:var(--new-first-color);
    height:100%;
    border-radius:999px;
    transition:width 0.4s ease;
}
.dd-nav-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.dd-btn{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0.58rem 1.6rem;
    border-radius:8px;
    font-size:0.87rem;
    font-weight:600;
    cursor:pointer;
    border:none;
    transition:background 0.2s,opacity 0.2s;
    line-height:1;
}
.dd-btn-prev{
    background:var(--prev-background-color);
    color:var(--new-first-color);
    border:1.5px solid var(--prev-border-color);
}
.dd-btn-prev:hover:not([disabled]){
    background:#f0f4f8;
}
.dd-btn-prev[disabled]{
    opacity:0.35;cursor:not-allowed;
}
.dd-btn-next{
    background:#1a2e44;
    color:#fff;
}
.dd-btn-next:hover{background:#2d4a6b;}
.dd-btn svg{width:15px;height:15px;flex-shrink:0;}

.play-btn {
    width: 44px;
    height: 44px;
    background: var(--new-hover-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--new-first-color);
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    position: absolute;
    bottom: 14px;
    right: 14px;
    border: none;
}
.play-btn:hover { background: var(--new-second-color); transform: scale(1.1); }

.watch-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--new-first-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.watch-link:hover { 
    color: var(--accent); 
    /* text-decoration:underline; */
}

.login-eye
{
  cursor: pointer;
  margin-left:  95%;
  position: absolute;
  top: 0%;
  margin-top: 0.05rem;  
  color: var(--new-first-color);
  position: absolute;
  top: 50%;
  right: 10px; /* Adjust the value to position the icon */
  transform: translateY(-50%);
  cursor: pointer;
}

.np_alert {
  display: none;
  position: fixed;
  z-index: 5001;
  padding-top: 15%;
  padding-left: 10%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.322);


}

.np_alert .modal-content {
  background-color: var(--new-white-color);
  margin-left: auto !important;
  padding: 10px;
  border: 1px solid var(--border-box-color);
  width: 60% !important;
  height: 50%;
  scrollbar-color: rgb(144, 126, 126);
  overflow-y: auto;
  padding-left: 2%;
}

.np_alert .modalclose {
  color: var(--black-color);
  margin-left: 94%;
  font-size: 28px;
  font-weight: bold;
}

.np_alert .modalclose:hover,
.np_alert .modalclose:focus {
  color: var(--new-first-color);
  opacity: 0.9;
  text-decoration: none;
  cursor: pointer;
}
.confirm_1 {
  width: 100px;
  padding: 5px;
  background-color: var(--new-first-color);
  border: 2px solid var(--white-color);
  border-radius: 5px;
  color: var(--white-color);
}


.single-digit-input {
  width: 40px; 
  height: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid var(--new-first-color);
  border-radius: 5px;
  margin-top: 2%;
}
.single-digit-input:focus {
  outline: none;
  border: 2px solid var(--new-first-color);
}

.security-enable-label
{
  padding: 5% 10% 5% 10%;
  border-radius: 5px;
  background-color: var(--white-color);
  box-shadow: 0px 0px 2px 3px var(--new-hover-color);
  border: 1px solid var(--new-first-color);
  font-weight: 600;
  margin-top: 15%;
}
#security-enable-on:checked ~ #security-enable-label-on,
#security-enable-off:checked ~ #security-enable-label-off
{
  background-color: var(--border-color);
  color:var(--white-color);
}
.security-enable-label:hover
{
  background-color: var(--new-first-color);
  color:var(--white-color);
}

.security-containor1 .first-part
{
  color: rgb(86, 86, 86);
  font-size: 14px;
  margin-top: 1%;
}
.security-containor1 .third-part
{
  color: gray;
  font-size: 8px;
}
.security-containor1 .fourth-part
{
  color: var(--new-first-color);
  cursor: pointer;
  font-size: 14px;
  padding-top: 1%;
}
.security-containor1 .fifth-part .security-enable-label {
  margin: 2%;
  padding: 1% 2% 1% 2%;
}



.simple-side-heading{
    font-weight: 600;
    color: var(--new-first-color);
}

/* custom-scroll start */

.custom-scroll {
    overflow-y: scroll; 
    scrollbar-width: thin;
    scrollbar-color: transparent transparent; 
  }
   
  .custom-scroll::-webkit-scrollbar {
    width: 6px;
  }
   
  .custom-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
   
  .custom-scroll::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: background 0.3s ease;
  }
   
  .custom-scroll:hover {
    scrollbar-color: rgba(100,100,100,0.6) transparent;
  }
   
  .custom-scroll:hover::-webkit-scrollbar-thumb {
    background: rgba(100,100,100,0.6);
  }

  /* custom-scroll end */

/* Hide scrollbar - Chrome, Edge, Safari */
.hidden-scroll::-webkit-scrollbar {
    display: none;
  }
   
  /* Hide scrollbar - Firefox */
  .hidden-scroll {
    scrollbar-width: none;
  }
   
  /* Hide scrollbar - IE/old Edge */
  .hidden-scroll {
    -ms-overflow-style: none;
  }

.text-clr{
    color: var(--new-second-color) ;
}

.popup-scroll{
    max-height: 30rem;
    overflow-y: auto;
}
.confirmation_section2 {
  width: 550px;
  margin: auto;
  background-color: var(--new-first-color) !important;
  padding: 5px 50px 5px 50px;
  border-radius: 0px 0px 0px 0px;
  border-top: none;
}