.border {
border-color:#cfcfcf !important;
}
.red {
color:#e31c3d;
}
/* 
To manage the background of the user bar
html[data-topbar-color=light] {
  --ct-topbar-user-bg: #fafafd !important;
}
*/
.mobileSignIn{
  display: none;
}
@media only screen and (max-width: 800px){ 
.mobileSignIn {
display: block;
}
}
@media only screen and (max-width: 720px) {
.mobile-hide{ display: none !important; }
}
/********************************************************************/
/*** CUSTOMER CSS  ***/
.card-header-color {
background-color: #fff;
color: #ddd;
}
h1 {
color: #192b55;
}
h2 {
color: #192b55;
}
#menuBarProfileName {
color: #fff;
}
#home-icon {
color: #fff !important;
}
.h1-customer {
color: #192b55;
}
.h2-customer {
color: #192b55;
}
a:not(.nav-link, .side-nav-link, .page-link, .dropdown-toggle, button>a, .introjs-skipbutton:focus, .introjs-skipbutton:hover, .introjs-prevbutton:focus, .introjs-prevbutton:hover, .introjs-nextbutton:focus, .introjs-nextbutton:hover, #supportButton, #home-icon) {
color: #105284 !important;
}
.btn-customer {
--ct-btn-color: #fff;
--ct-btn-bg: #192b55;
--ct-btn-border-color:#192b55;
--ct-btn-hover-color: #fff;
--ct-btn-hover-bg: #192b55;
--ct-btn-hover-border-color: #192b55;
--ct-btn-focus-shadow-rgb: 109, 131, 234;
--ct-btn-active-color: #fff;
--ct-btn-active-bg: #192b55;
--ct-btn-active-border-color: #192b55;
--ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--ct-btn-disabled-color: #fff;
--ct-btn-disabled-bg: #192b55;
--ct-btn-disabled-border-color: #192b55;
}
.font-customer {
color: #192b55;
}
.swal2-confirm {
background-color: #192b55 !important ;
}
.btn-outline-customer {
--ct-btn-color: #192b55;
--ct-btn-border-color: #192b55;
--ct-btn-hover-color: #fff;
--ct-btn-hover-bg: #192b55;
--ct-btn-hover-border-color: #192b55;
--ct-btn-focus-shadow-rgb: 83, 109, 230;
--ct-btn-active-color: #fff;
--ct-btn-active-bg: #192b55;
--ct-btn-active-border-color: #192b55;
--ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--ct-btn-disabled-color: #192b55;
--ct-btn-disabled-bg: transparent;
--ct-btn-disabled-border-color: #192b55;
--ct-gradient: none;
}
.table-customer {
--ct-table-color: #313a46;
--ct-table-bg: #dde2fa;
--ct-table-border-color: #d0d5ed;
--ct-table-striped-bg: #d4daf1;
--ct-table-striped-color: #313a46;
--ct-table-active-bg: #313a46;
--ct-table-active-color: #fff;
--ct-table-hover-bg: #313a46;
--ct-table-hover-color: #fff;
color: var(--ct-table-color);
border-color: var(--ct-table-border-color);
}
.nav-tabs.nav-bordered-customer li a.active {
border-bottom: 2px solid #192b55;
}
.nav-tabs.nav-bordered-customer li a.active {
border-bottom: 2px solid #192b55;
}
.section-container {
background-color: rgba(255, 255, 255);
font-size: 15px;
padding: 25px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 15px;
}
.center {
display: block;
text-align: center;
margin: 10px auto;
}
#profileImage {
width: 25px;
height: 25px;
border-radius: 50%;
 background: #192b55;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 25px;
margin: 20px 0;
}
.navbar-custom-customer {
background: #192b55;
}
.navbar-custom-customer .topbar-menu .nav-link {
color: #fff !important;
text-transform: none;
}
.navbar-custom-customer .topbar-menu .nav-link:hover {
color: #fff;
text-transform: none;
}
.navbar-custom-customer .button-toggle-menu {
color: #fff;
}
.menuLabel {
color: #fff;
text-transform: none;
}
/********************************************************************/
/*** Lookup Button ***/
.lookup-button__open:link, .lookup-button__open:visited {
text-transform: uppercase;
text-decoration: none;
padding: 6px 25px;
display: inline-block;
border-radius: 100px;
transition: all .2s;
position: relative;
font-size: 12px;
margin-left:10px;
color: #fff;
text-shadow: none;
}
.lookup-button__open:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,.2);
color: #fff;
background-image: linear-gradient(to right bottom, #829EE8 , #0078a5);
}
.lookup-button__open:active {
transform: translateY(-1px);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
color: #fff;
}
.lookup-button__open--default {
background-color: #0078a5;
color: #FFF;
}
/********************************************************************/
/*** FANCY INPUTS FOR NOMINATION (STYLED) ***/
@-webkit-keyframes checkmarkAnimation { 100% { stroke-dashoffset: 0;}}
@keyframes checkmarkAnimation { 100% { stroke-dashoffset: 0;}}
.input-wrapper {
margin: 0px 5px;
position: relative;
}
.fancy-check-label,
.fancy-radio-label {
display: inline-block;
line-height: 24px;
padding-left: 36px;
position: relative;
-webkit-user-select: no-select;
-moz-user-select: no-select;
-ms-user-select: no-select;
user-select: no-select;
}
.fancy-check-label .checkmark-path { opacity: 0;}
.modern-browser .fancy-check-label {transition: color 0.3s;}
.fancy-check:checked + .fancy-check-label {color: darkorange;}
.fancy-check:checked + .fancy-check-label .fancy-checkbox {border-color: darkorange;}
.modern-browser .fancy-check:checked + .fancy-check-label .checkmark-path {
-webkit-animation: checkmarkAnimation 0.5s 0s forwards;
animation: checkmarkAnimation 0.5s 0s forwards;
}
.fancy-check:checked + .fancy-check-label .checkmark-path {
opacity: 1;
stroke-dasharray: 0;
stroke-dashoffset: 0;
}
.fancy-label--text {
position: relative;
font-weight:normal;
}
.fancy-radio:checked + .fancy-radio-label {color: darkorange;}
.fancy-radio:checked + .fancy-radio-label .fancy-label--text::before {
transition: transform 0.15s;
transform: scaleX(1);
}
.fancy-radio:checked + .fancy-radio-label .fancy-radiobutton {
border-color: darkorange;
transition: border-color 0.5s;
}
.fancy-radio:checked + .fancy-radio-label .radiobutton-dot {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
transition: opacity 0.15s, transform 0.15s;
}
.fancy-checkbox,
.fancy-radiobutton {
border: solid 2px #888;
display: block;
height: 20px;
position: absolute;
left: 0;
top: 0;
width: 20px;
}
.modern-browser .fancy-checkbox,
.modern-browser .fancy-radiobutton {
transition: border-color 0.3s;
}
.fancy-checkbox {border-radius: 3px;}
.fancy-radiobutton {border-radius: 50%;}
.radiobutton-dot {
background-color: currentColor;
border-radius: 50%;
height: 12px;
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
width: 12px;
}
.checkmark {
height: 20px;
opacity: 1;
width: 100%;
}
.checkmark .checkmark-path {
stroke: darkorange;
stroke-width: 2px;
transform-origin: 50% 50%;
stroke-miterlimit: 10;
opacity: 1;
stroke-dasharray: 48;
stroke-dashoffset: 48;
}
/*All Custom CSS Variable Changes*/
:root {
    --sdpa-blue: #27509a;        /* Primary SDPA icon/text color */
    --sdpa-blue-light: #e9eff9;  /* Soft background highlight */
    --sdpa-blue-border: #c7d4ee; /* Soft border tone */
    --sdpa-deep: #003647;        /* Dark heading tone */
  }
body {color:#000000;font-size:15.5px;}



 
#bannerHolder { --ct-gutter-x:0px !important;}
 


 
.nav-user {
    border-width: 0px;
    border-style: none;
    background-color: #192b55;
}
 
#profileImage {
background-color:#fff
}

 .footer { background-color:#192b55;color:#ffffff} 

  .text-sdpa-blue { color: var(--sdpa-blue) !important; }

  .why-card {
    background-color: var(--sdpa-blue-light);
    border: 1px solid var(--sdpa-blue-border);
    border-radius: .5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  .badge-sdpa {
    background-color: var(--sdpa-blue);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

 .text-sdpa-blue {
    color: #27509a !important;
  }

 .text-sdpa-blue { color: #27509a !important; }
  .sdpa-box {
    background-color: #e9eff9;
    border: 1px solid #c7d4ee;
    border-radius: .5rem;
    padding: 1.25rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  .sdpa-box p {
    font-size: 1rem !important;       /* increased readability */
    color: #003647 !important;
  }
  .how-step-pill {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background-color: #e9eff9;
    color: #27509a;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .how-card {
    border-top: 3px solid #27509a;
  }
  .note-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e9eff9;
    color: #27509a;
    flex-shrink: 0;
  }

.enroll-flow {
    background-color: #e9eff9;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #003647;
  }

  .enroll-flow-step {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
  }

  .enroll-flow-step i {
    color: #27509a;
  }

  .enroll-card {
    border-top: 3px solid #27509a;
  }

  .enroll-step-pill {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background-color: #e9eff9;
    color: #27509a;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

 .resources-section h2 {
    color: #003647;
  }
  .resource-card {
    border-radius: .5rem;
    border-left: 4px solid #27509a;
  }
  .resource-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background-color: #e9eff9;
    color: #27509a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

.keydates-box {
    background-color: #e9eff9;
    border: 1px solid #c7d4ee;
    border-radius: .5rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  .keydates-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #003647;
    margin-bottom: 1rem;
  }
  .keydate-row {
    padding: .4rem 0;
    border-bottom: 1px solid #d8e1f2;
  }
  .keydate-row:last-child {
    border-bottom: none;
  }
  .keydate-label {
    color: #003647;
    font-weight: 500;
  }
  .keydate-value {
    color: #27509a;
    font-weight: 700;
 
  }
  .keydate-icon {
    color: #27509a;
    margin-right: .4rem;
    font-size: 1.1rem;
  }