:root { --scfhs-green: #31b889; --scfhs-org-green: #00C08B; --scfhs-blue: #224e72; --scfhs-org-blue: #00416B; --scfhs-black: #404646; --scfhs-light-black: #4E4E4E; --scfhs-grey: #6d7c7c; --scfhs-med-grey: #9cabab; --scfhs-light-grey: #f2f6f8; --scfhs-white: #fdfeff; --scfhs-background: #dbdddf; --scfhs-red:#c71f3e; --scfhs-purple:#7c6992; --scfhs-yellow:#f99c25; --scfhs-yellow-bg:rgba(249, 156, 37, 0.07); --scfhs-teal:#009ba6; --scfhs-teal-dark: #00838d; --scfhs-light-blue:#00b1e0; --scfhs-grad: linear-gradient(75deg, #0C6297 -30%, #39B78A 100%); --scfhs-grad-original: linear-gradient(to right, var(--scfhs-blue) 0%, var(--scfhs-teal)  100%); --scfhs-card-shadow: 0px 0px 12.462px 0px rgba(156, 168, 168, 0.14); --scfhs-card-radius: 6px; }

html, body { height: 100%; font-family: "SCFHS TxT"; color: var(--scfhs-black); background-color: var(--scfhs-white); font-family: "SCFHS TxT"; }

* { font-family: "SCFHS TxT"; color: var(--scfhs-black); }

.bg-light-grey { background-color: var(--scfhs-light-grey); }

.container-fluid, .row { height: 100%; }

[dir="rtl"] .modal-header .btn-close { margin: unset; }

[dir="rtl"] .text-end { text-align: left !important; }

a { color: var(--scfhs-teal); text-decoration: none; }

a:hover { color: var(--scfhs-teal-dark); }

.content-wrapper { padding: 24px; }

@media screen and (min-width: 776px) { .content-wrapper { padding: 50px 65px; } }

@media screen and (min-width: 1300px) { .content-wrapper { padding: 50px 124px; } }

.content-wrapper .inner-wrapper { max-width: 600px; }

/* Standard syntax */
::selection { background: #009ba67a; /* 'copy' color - change as needed */ color: #000; /* Text color within the selection - change as needed */ }

/* Mozilla Firefox */
::-moz-selection { background: #009ba67a; /* 'copy' color - change as needed */ color: #000; /* Text color within the selection - change as needed */ }

.flex-expand { flex: 1 1 0; }

.z1 { z-index: 1; }

.text-blue { color: var(--scfhs-blue); }

.text-teal { color: var(--scfhs-teal); }

.text-black { color: var(--scfhs-black); }

.text-grey { color: var(--scfhs-grey); }

.text-med-grey { color: var(--scfhs-med-grey); }

.bg-none { background: none !important; }

@font-face { font-family: "SCFHS TxT"; src: url("../fonts/schs-font/D-500.eot"); src: url("../fonts/schs-font/D-500.eot?#iefix") format("embedded-opentype"), url("../fonts/schs-font/D-500.svg#D-500") format("svg"), url("../fonts/schs-font/D-500.ttf") format("truetype"), url("../fonts/schs-font/D-500.woff") format("woff"), url("../fonts/schs-font/D-500.woff2") format("woff2"); font-weight: 500; font-style: normal; }

@font-face { font-family: "SCFHS TxT"; src: url("../fonts/schs-font/D-700.eot"); src: url("../fonts/schs-font/D-700.eot?#iefix") format("embedded-opentype"), url("../fonts/schs-font/D-700.svg#D-700") format("svg"), url("../fonts/schs-font/D-700.ttf") format("truetype"), url("../fonts/schs-font/D-700.woff") format("woff"), url("../fonts/schs-font/D-700.woff2") format("woff2"); font-weight: 700; font-style: normal; }

@font-face { font-family: "SCFHS TxT"; src: url("../fonts/schs-font/D-800.eot"); src: url("../fonts/schs-font/D-800.eot?#iefix") format("embedded-opentype"), url("../fonts/schs-font/D-800.svg#D-800") format("svg"), url("../fonts/schs-font/D-800.ttf") format("truetype"), url("../fonts/schs-font/D-800.woff") format("woff"), url("../fonts/schs-font/D-800.woff2") format("woff2"); font-weight: 800; font-style: normal; }

@font-face { font-family: "SCFHS TxT"; src: url("../fonts/schs-font/D-900.eot"); src: url("../fonts/schs-font/D-900.eot?#iefix") format("embedded-opentype"), url("../fonts/schs-font/D-900.svg#D-900") format("svg"), url("../fonts/schs-font/D-900.ttf") format("truetype"), url("../fonts/schs-font/D-900.woff") format("woff"), url("../fonts/schs-font/D-900.woff2") format("woff2"); font-weight: 900; font-style: normal; }

@font-face { font-family: "SCFHS TxT"; src: url("../fonts/schs-font/D-200.eot"); src: url("../fonts/schs-font/D-200.eot?#iefix") format("embedded-opentype"), url("../fonts/schs-font/D-200.svg#D-200") format("svg"), url("../fonts/schs-font/D-200.ttf") format("truetype"), url("../fonts/schs-font/D-200.woff") format("woff"), url("../fonts/schs-font/D-200.woff2") format("woff2"); font-weight: 200; font-style: normal; }

@font-face { font-family: "SCFHS TxT"; src: url("../fonts/schs-font/D-300.eot"); src: url("../fonts/schs-font/D-300.eot?#iefix") format("embedded-opentype"), url("../fonts/schs-font/D-300.svg#D-300") format("svg"), url("../fonts/schs-font/D-300.ttf") format("truetype"), url("../fonts/schs-font/D-300.woff") format("woff"), url("../fonts/schs-font/D-300.woff2") format("woff2"); font-weight: 300; font-style: normal; }

@font-face { font-family: "SCFHS TxT"; src: url("../fonts/schs-font/D-400.eot"); src: url("../fonts/schs-font/D-400.eot?#iefix") format("embedded-opentype"), url("../fonts/schs-font/D-400.svg#D-400") format("svg"), url("../fonts/schs-font/D-400.ttf") format("truetype"), url("../fonts/schs-font/D-400.woff") format("woff"), url("../fonts/schs-font/D-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }

@font-face { font-family: "SCFHS TxT"; src: url("../fonts/schs-font/D-500.eot"); src: url("../fonts/schs-font/D-500.eot?#iefix") format("embedded-opentype"), url("../fonts/schs-font/D-500.svg#D-500") format("svg"), url("../fonts/schs-font/D-500.ttf") format("truetype"), url("../fonts/schs-font/D-500.woff") format("woff"), url("../fonts/schs-font/D-500.woff2") format("woff2"); font-weight: 500; font-style: normal; }

@font-face { font-family: "SCFHS TxT"; src: url("../fonts/schs-font/D-700.eot"); src: url("../fonts/schs-font/D-700.eot?#iefix") format("embedded-opentype"), url("../fonts/schs-font/D-700.svg#D-700") format("svg"), url("../fonts/schs-font/D-700.ttf") format("truetype"), url("../fonts/schs-font/D-700.woff") format("woff"), url("../fonts/schs-font/D-700.woff2") format("woff2"); font-weight: 700; font-style: normal; }

@font-face { font-family: "SCFHS TxT"; src: url("../fonts/schs-font/D-800.eot"); src: url("../fonts/schs-font/D-800.eot?#iefix") format("embedded-opentype"), url("../fonts/schs-font/D-800.svg#D-800") format("svg"), url("../fonts/schs-font/D-800.ttf") format("truetype"), url("../fonts/schs-font/D-800.woff") format("woff"), url("../fonts/schs-font/D-800.woff2") format("woff2"); font-weight: 800; font-style: normal; }

@font-face { font-family: "SCFHS TxT"; src: url("../fonts/schs-font/D-900.eot"); src: url("../fonts/schs-font/D-900.eot?#iefix") format("embedded-opentype"), url("../fonts/schs-font/D-900.svg#D-900") format("svg"), url("../fonts/schs-font/D-900.ttf") format("truetype"), url("../fonts/schs-font/D-900.woff") format("woff"), url("../fonts/schs-font/D-900.woff2") format("woff2"); font-weight: 900; font-style: normal; }

@font-face { font-family: "SCFHS TxT"; src: url("../fonts/schs-font/D-200.eot"); src: url("../fonts/schs-font/D-200.eot?#iefix") format("embedded-opentype"), url("../fonts/schs-font/D-200.svg#D-200") format("svg"), url("../fonts/schs-font/D-200.ttf") format("truetype"), url("../fonts/schs-font/D-200.woff") format("woff"), url("../fonts/schs-font/D-200.woff2") format("woff2"); font-weight: 200; font-style: normal; }

@font-face { font-family: "SCFHS TxT"; src: url("../fonts/schs-font/D-300.eot"); src: url("../fonts/schs-font/D-300.eot?#iefix") format("embedded-opentype"), url("../fonts/schs-font/D-300.svg#D-300") format("svg"), url("../fonts/schs-font/D-300.ttf") format("truetype"), url("../fonts/schs-font/D-300.woff") format("woff"), url("../fonts/schs-font/D-300.woff2") format("woff2"); font-weight: 300; font-style: normal; }

@font-face { font-family: "SCFHS TxT"; src: url("../fonts/schs-font/D-400.eot"); src: url("../fonts/schs-font/D-400.eot?#iefix") format("embedded-opentype"), url("../fonts/schs-font/D-400.svg#D-400") format("svg"), url("../fonts/schs-font/D-400.ttf") format("truetype"), url("../fonts/schs-font/D-400.woff") format("woff"), url("../fonts/schs-font/D-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }

.scfhs-card { background: var(--scfhs-white, #FDFEFF); padding: 36px 16px 16px; box-shadow: var(--scfhs-card-shadow); border-inline-start: 4px solid var(--scfhs-teal); border-radius: var(--scfhs-card-radius); }

@media screen and (min-width: 776px) { .scfhs-card { padding: 36px 24px 24px; } }

.scfhs-card .scfhs-card-body { margin-top: 24px; }

.scfhs-card .scfhs-card-body.nafath-secret-number-wrapper { padding: 32px 16px 24px; background-color: var(--scfhs-light-grey); border-radius: var(--scfhs-card-radius); }

@media screen and (min-width: 776px) { .scfhs-card .scfhs-card-body.nafath-secret-number-wrapper { padding: 32px; } }

.scfhs-card .scfhs-card-body.nafath-secret-number-wrapper .nafath-secret-number { background-color: #fff; color: var(--scfhs-teal); margin: 0 auto; display: block; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 50%; filter: drop-shadow(0px 0px 12.462px rgba(156, 168, 168, 0.14)); margin-bottom: 16px; font-weight: 500; animation: pulse 2s infinite; }

.programs-wrapper .scfhs-card { transition: box-shadow 0.4s; min-height: 100%; }

.programs-wrapper .scfhs-card:hover { background-color: #fff; box-shadow: 4px 4px 15px 0px rgba(156, 168, 168, 0.34); transition: box-shadow 0.4s; }

.programs-wrapper .scfhs-card .program-logo { display: flex; justify-content: center; align-items: center; min-height: 100px; }

.programs-wrapper .scfhs-card .program-logo img { object-fit: contain; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0px rgba(0, 157, 168, 0.7); }
  50% { box-shadow: 0 0 0 12px rgba(0, 64, 107, 0); }
  100% { box-shadow: 0 0 0 0px rgba(0, 157, 168, 0); } }

@keyframes pulseGlow { 0% { box-shadow: 0 0 12px 0 rgba(0, 157, 168, 0.7), 0 0 0 0px rgba(0, 157, 168, 0.7);
    opacity: 1; }
  50% { box-shadow: 0 0 16px 4px rgba(0, 157, 168, 0.4), 0 0 0 0px rgba(0, 157, 168, 0.7);
    opacity: 0.8; }
  100% { box-shadow: 0 0 12px 0 rgba(0, 157, 168, 0.7), 0 0 0 0px rgba(0, 157, 168, 0.7);
    opacity: 1; } }

/* Custom Styles for Tabs */
ul.nav-tabs { padding-inline-start: 0; }

.nav-tabs .nav-item { display: flex; }

.nav-tabs .nav-link { min-width: 132px; color: #404646; font-size: 20px; font-weight: 750; border: none; background-color: transparent; opacity: 0.40; display: flex; align-items: center; }

.nav-tabs .nav-link[aria-selected="true"] { color: #224E72; font-size: 40px; border-bottom: 3px solid #009ba6; /* Line below active tab */ opacity: 1; }

/* Optional: Styles to remove the default focus outline */
.nav-tabs .nav-link:focus { box-shadow: none; }

.wizard-header { display: flex; gap: 24px; color: var(--scfhs-black); box-shadow: 0px 0px 12.46159px rgba(156, 168, 168, 0.14); border-radius: 6px; padding: 15px 20px; }

[dir="rtl"] .wizard-header { border-right: 4px solid var(--scfhs-teal); }

[dir="ltr"] .wizard-header { border-left: 4px solid var(--scfhs-teal); }

.wizard-header .progress-steps { position: relative; width: 58px; height: 58px; }

.wizard-header .progress-steps .step-count-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; color: var(--scfhs-black); }

.wizard-header .progress-steps .step-count-wrapper #current-step { color: var(--scfhs-teal); font-weight: bold; }

.wizard-header .step-title-wrapper #form-title { color: var(--scfhs-teal); font-size: 18px; font-weight: 500; }

.wizard-header .step-title-wrapper #form-title-next { color: var(--scfhs-med-grey); font-size: 14px; font-weight: 300; }

.alert { --bs-alert-padding-x: 12px; --bs-alert-padding-y: 10px; border: none; border-inline-start: 4px solid transparent; }

.alert-warning { --bs-alert-color: var(--scfhs-black); --bs-alert-bg: var(--scfhs-yellow-bg); border-inline-start-color: var(--scfhs-yellow); }

.alert-warning .alert-content { display: flex; align-items: center; gap: 12px; }

.btn { padding: 12px 32px; border: none; }

.btn.medium { font-size: 20px; font-weight: 500; }

.btn:disabled, .btn.disabled, fieldset:disabled .btn { background-color: var(--scfhs-grey) !important; }

.btn-primary { background-color: var(--scfhs-teal) !important; }

.btn-primary:hover { background-color: var(--scfhs-teal-dark) !important; }

.btn-secondary { background-color: transparent !important; border: 1px solid var(--scfhs-teal) !important; color: var(--scfhs-teal) !important; }

.btn-secondary:hover { background-color: var(--scfhs-light-grey) !important; }

input, select, .input-wrapper, .form-control, .form-select { background-color: #F2F6F8; border: none; border-bottom: 1px solid transparent; transition: border-color 0.3s; min-height: 58px; }

input:focus, select:focus, .input-wrapper:focus, .form-control:focus, .form-select:focus { outline: none; border-bottom: 1px solid var(--scfhs-teal); background-color: #F2F6F8; box-shadow: none; }

input[type="radio"], input [type="checkbox"], select[type="radio"], select [type="checkbox"], .input-wrapper[type="radio"], .input-wrapper [type="checkbox"], .form-control[type="radio"], .form-control [type="checkbox"], .form-select[type="radio"], .form-select [type="checkbox"] { min-height: unset; }

input:focus + label, select:focus + label, .input-wrapper:focus + label, .form-control:focus + label, .form-select:focus + label { color: var(--scfhs-teal); }

label { color: var(--scfhs-black); transition: color 0.3s; }

[dir="rtl"] .form-floating label { transform-origin: 100% 0; }

[dir="rtl"] input { text-align: right; }

.form-floating label { color: var(--scfhs-black); transition: color 0.3s; }

.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label { opacity: 1; transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); color: var(--scfhs-teal); }

.form-floating > .form-control:disabled { color: var(--scfhs-grey); }

.form-floating > .form-control:disabled ~ label { color: var(--scfhs-med-grey); }

.input-group-text { border-left: 1px solid #ced4da; }

.input-group-text i.fa-calendar { color: var(--scfhs-teal); }

.input-group-title span { color: var(--scfhs-grey); font-weight: 300; }

input[required] { position: relative; }

input[required]::after { content: '*'; position: absolute; margin-left: 5px; top: 50%; transform: translateY(-50%); color: var(--scfhs-red); font-size: 1em; }

.password-icon { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; color: #777; }

[dir="ltr"] .password-icon { right: 10px; }

[dir="rtl"] .password-icon { left: 10px; }

input[type="date"]::-webkit-calendar-picker-indicator { display: none; }

input[type="date"]::-moz-calendar { display: none; }

input[type="date"]::-ms-clear, input[type="date"]::-ms-reveal { display: none; }

input[type="date"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.form-check-input:checked { background-color: var(--scfhs-teal); border-color: var(--scfhs-teal); }

.otp-inputs { display: flex; justify-content: space-between; gap: 0.8rem; direction: ltr; }

.otp-inputs input { text-align: center; }

.select2-container { width: 100% !important; }

.select2-container .select2-selection { background-color: #F2F6F8; border: none; border-bottom: 1px solid transparent; transition: border-color 0.3s; min-height: 58px; padding-top: 24px; padding-inline-start: 6px; }

.select2-container .select2-selection:focus { outline: none; border-bottom: 1px solid var(--scfhs-teal); background-color: #F2F6F8; box-shadow: none; }

.select2-container .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: none; border-radius: 4px; padding: 2px 10px; margin: 2px; }

.select2-container .select2-selection--multiple .select2-selection__choice:hover { background-color: #d4d4d4; }

.select2-container .select2-selection--single .select2-selection__rendered { line-height: 1.6; padding-right: 10px; }

[dir="rtl"] .select2-container .select2-selection--single .select2-selection__rendered { text-align: right; }

.select2-container .select2-selection--single .select2-selection__arrow { top: 50%; translate: 0 -50%; }

[dir="rtl"] .select2-container .select2-selection--single .select2-selection__arrow { right: unset; left: 1px; }

.select2-container .select2-dropdown { border: 1px solid #fff; border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }

[dir="rtl"] .select2-container .select2-dropdown * { text-align: right; }

.select2-container .select2-dropdown .select2-search__field { min-height: 40px; border-radius: 4px; border-color: var(--scfhs-teal); }

.select2-container .select2-dropdown .select2-results__option { padding: 8px 16px; }

.select2-container .select2-dropdown .select2-results__option[aria-selected=true] { background-color: var(--scfhs-teal); color: #fff; }

.select2-container .select2-dropdown .select2-results__option:hover, .select2-container .select2-dropdown .select2-results__option--highlighted { background-color: var(--scfhs-teal); color: #fff; }

.mobile-number-wrapper .select2 { width: 110px !important; border-inline-end: 1px solid #fff; z-index: 1; }

.mobile-number-wrapper .select2 .select2-selection { padding-top: 14px !important; }

.right-side { background-color: #f8f9fa; background-image: url(../imgs/sidebar-curves.svg), var(--scfhs-grad); background-size: 150%, cover; background-position: top 100px right 0, center; background-repeat: no-repeat; }