@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
  --color-primary: #947538;
  --color-blue: #1971C2;
  --color-secondary: #ADB5BD;
  --color-secondary-bg: #E9ECEF;
  --color-secondary-bc: #DEE2E6;
  --color-black: #0A0A0A;
  --color-black2: #2B2B2B;
  --color-border: #E8E8E8;
  --color-white: #FFFFFF;
  --color-primary-badge: #193CB8;
  --color-success: #00A63E;
  --color-info: #51A2FF;
  --color-warning: #FAB005;
  --color-danger: #9F0712;
  --color-primary-bg: #DBEAFE;
  --color-success-bg: #DCFCE7;
  --color-info-bg: #EFF8FF;
  --color-warning-bg: #FFFBED;
  --color-danger-bg: #FFE2E2;
  --color-default-hover: #F8F9FA;
  --color-nav-active-bc: #968C8A;
  --color-body-bg: #F4F0E7;
  --color-body-color: #8F8F8F;
  --body-font: "Poppins", sans-serif; 
  --radius: 1.5rem;
}



body {
  background-color: var(--color-body-bg);
  color: var(--color-body-color);
  font-family: var(--body-font);
}
a { text-decoration: none;color: var(--color-black);transition: all 0.3s ease; }
a:hover { color: var(--color-primary); }
a.active { color: var(--color-primary); }
.text-primary { color: var(--color-primary) !important; }
.text-dark { color: var(--color-black) !important; }
.text-dark2 { color: var(--color-black2) !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-18 { font-size: 18px !important; }
.text-muted { color: #868E96 !important; }
.text-success { color: var(--color-success) !important; }
.dropdown-menu { box-shadow: none;font-size: 12px; }
.btn-outline-primary { border-color: var(--color-primary);color: var(--color-primary);background-color: var(--color-white); }
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active { border-color: var(--color-primary);color: var(--color-white);background-color: var(--color-primary); }
.btn-outline-primary svg path,
.btn-outline-primary svg path,
.btn-outline-primary svg path { stroke: var(--color-primary); }
.btn-outline-primary:not(.hover_stroke):hover svg path,
.btn-outline-primary:not(.hover_stroke):focus svg path,
.btn-outline-primary:not(.hover_stroke):active svg path { fill: var(--color-white); }
.btn-outline-primary.hover_stroke:hover svg path,
.btn-outline-primary.hover_stroke:focus svg path,
.btn-outline-primary.hover_stroke:active svg path { stroke: var(--color-white); }
.btn-secondary { border-color: var(--color-secondary);color: var(--color-white);background-color: var(--color-secondary); }
.btn-secondary[disabled] { border-color: var(--color-secondary-bg);color: var(--color-secondary);background-color: var(--color-secondary-bg); }
.btn-success { border-color: var(--color-success);color: var(--color-white);background-color: var(--color-success); }
 
.btn-light { background-color: #919EAB29; }
.btn-primary { font-size: 1rem;font-weight: 400;background-color: var(--color-primary);padding: .5rem 1rem;border-color: var(--color-primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--color-black);border-color: var(--color-black); } 
.btn-primary.blue { background-color: #3B5CAC; border-color: #3B5CAC; }
.btn-primary.blue:hover { background-color: var(--color-blue);border-color: var(--color-blue); } 
.btn-danger { background-color: var(--color-danger);border-color: var(--color-danger); }
.form-switch .form-check-input:checked { background-color: var(--color-success);border-color: var(--color-success); }
.filter__btn .btn__base { font-size: 13px;font-weight: 400;color: var(--color-black); border: 1px solid var(--color-border);background-color: var(--color-default-hover); }
 
.alert {border-radius: .5rem;border: 1px solid #51A2FF;border-left-width: 4px; }
.alert .icon { width: 1.25rem;height: 1.25rem; }
.alert.bg-warning { background-color: var(--color-warning-bg) !important; }
.alert.bg-info { background-color: var(--color-info-bg) !important;border-color: #51A2FF; }
.alert.bg-info .info { color: #193CB8; }
.badge { font-weight: 400;padding: .5rem .875rem;border-radius: 2rem; }
.badge.bg-danger { border: 1px solid #FFC9C9;background-color: var(--color-danger-bg) !important;color: var(--color-danger); }
.badge.bg-primary { border: 1px solid #BEDBFF;background-color: var(--color-primary-bg) !important;color: var(--color-primary-badge); }
.badge.bg-success { border: 1px solid #B9F8CF;background-color: var(--color-success-bg) !important;color: var(--color-success); }

/* ======== App Navbar Styles ========== */
.app__navbar {
  box-shadow: 0px 1px 2px -1px #0000001A;
  box-shadow: 0px 1px 3px 0px #0000001A;
}
.card {
  box-shadow: 0px 1px 2px -1px #0000001A;
  box-shadow: 0px 1px 3px 0px #0000001A;
  border-color: #F3F4F6;border-radius: var(--radius);
}

@media (max-width: 767px) {
  .app__header .title { max-width: 7rem; }
}
.app__footer a {
  color: var(--color-white);
}
.app__footer a:hover {
  text-decoration: underline;opacity: .75;
}


/* ========== SPA ESSENTIAL FORM PAGE STYLE ========= */
.stepper__box { gap: .25rem 2rem; }
.stepper__box .stepper__box__item:not(:last-child)::after { content: ''; width: 1.5rem;height: 1.5rem;background: var(--divider-icon) no-repeat center center / cover;display: block;position: absolute;right: -2rem;top: 50%;transform: translateY(-50%); }
.stepper__box .stepper__box__item { min-width: 8rem; }
.stepper__box .stepper__box__item .icon { width: 2.5rem;height: 2.5rem;background-color: #FFFAEF;color: #947538; }
.stepper__box .stepper__box__item.active .icon { background-color: var(--color-primary);color: var(--color-white); }
.stepper__box .stepper__box__item.completed .icon { background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjY2NzMgNUw3LjUwMDY1IDE0LjE2NjdMMy4zMzM5OCAxMCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==") no-repeat center center / 1.25rem;background-color: var(--color-success);color: var(--color-success); }
.stepper__box .stepper__box__item.completed .icon .num { opacity: 0; } 
.stepper__box .stepper__box__item.active .title { color: var(--color-primary); }

.form-label { color: var(--color-black2);font-size: 1rem; }
.form-control, .form-select { color: var(--color-black);height: 42px;border-color: #D1D5DC;padding: .5rem 1rem; }
.form-control.bg-gray, .form-select.bg-gray { background-color: #F9FAFB; }
textarea.form-control {  height: auto; }
.form-check-input { width: 1.25rem;height: 1.25rem;border-color: var(--color-black); }
.form-check-input:checked { background-color: var(--color-primary); }
.form-check .form-check-label { margin-bottom: 0;position: relative;top: .12rem;padding-left: .2rem; }
.form-control:focus, .form-select:focus { border-color: var(--color-primary);box-shadow: none; }
hr.divider { margin: 0% !important; }
@media (max-width:767px) {
  .responsive__file__input__btn {
    position: absolute !important;top: -6.5rem;right: 1rem;padding: .125rem 1rem .25rem 1rem;
    font-size: .875rem;
  }
  .responsive__file__input__btn.btn__pass_number {
    top: -12rem;
  }
}
.file__info__box { background-color: #F9FAFB; }
.final__info__box { background-color: #F7FFEF;border: 1px solid #00A63E; }
.file__info__box .icon { width: 1.25rem;height: 1.25rem; }


/* ======= PROFILE PAGE STYLES ======= */
.nav-tabs .nav-link { color: var(--color-body-color); }
.nav-tabs .nav-link.active { color: var(--color-primary);position: relative; }
.nav-tabs .nav-link.active::after { content: '';width: 100%;height: 2px;background-color: var(--color-primary);position: absolute;bottom: -1px;left: 0%; }
.profile__page__wrapper .avater__box { width: 6rem;height: 6rem;background-color: #F4F0E7; }
.profile__page__wrapper .avater__box .avater__box__image { width: 6rem;height: 6rem;  }
.profile__page__wrapper .avater__box .avater__box__upload { width: 2rem;height: 2rem;background-color: var(--color-primary);right: 0;bottom: 0; }
@media(max-width:575px) {
  .nav-tabs .nav-link { max-width: 8rem;padding-left: .5rem;padding-right: .5rem; }
  .mobile__full__width__btns .btn { width: 100%; }
}
.btn-copy { width: 2rem;height: 2rem; }
.btn-copy:hover { background-color: var(--color-default-hover); }


/* ======= MANAGE DOCS PAGE STYLES ======= */
.nav-pills .nav-link { color: var(--color-primary);border: 1px solid var(--color-primary);background-color: var(--color-white); }
.nav-pills .nav-link.active { color: var(--color-white);background-color: var(--color-primary); }
.btn_w_upload  { max-width: 13.5rem; }
@media(max-width:767px) {
  .full__w__max__md  {width: 100%; }
  .nav-pills .nav-link, .btn-save { font-size: .875rem;line-height: 1.25; }
  .btn-save svg { width: 1.125rem;height: 1.125rem; }
}


/* ======= MANAGE DOCS PAGE STYLES ======= */
.app-auth-layout { background-size: cover;background-repeat: no-repeat;background-size: cover;min-height: calc(100vh - 3.35rem); }
.app-auth-layout .form__wrapper { background-color: rgba(255, 255, 255, 0.9);max-width: 766px; }
.app-auth-layout .form__wrapper .form-control { font-size: .875rem; }
.app-auth-layout .form__wrapper .form-control::placeholder { color: #9E9E9E; }


.otp-input {
  width: 65px;
  height: 65px;
  font-size: 24px !important;
  border: 1px solid var(--color-primary);
  border-radius: .5rem;
}
@media(max-width:767px) {
  .otp-input {
    width: 50px;
    height: 50px;
    font-size: 18px !important;
  }  
}

.otp-input::placeholder {
  color: var(--gray03);
  font-size: 0.875rem;
  font-weight: 400;
  padding-top: 1rem;
}

.otp-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.4);
}