:root {
    --bpa-pt-main-green: #33227d !important;
    --bpa-pt-main-green-darker: #1c1345 !important;
    --bpa-pt-navy-blue: #2C33AE;
    --bpa-pt-fuchsia-purple: #D436C4;
    --bpa-pt-royal-blue: #2167F1;
    --bpa-pt-blue: #1F63E7;
    --bpa-pt-brown: #834E1E;
    --bpa-pt-secondary-orange: #F5AE41;
    --bpa-pt-secondary-orange-darker: #ECA335;
    --bpa-sc-success: #33227d !important;
    --bpa-sc-success-darker: #1c1345 !important;
    --bpa-sc-warning: #F4B125;
    --bpa-sc-danger: #EE2445;
    --bpa-sc-danger-darker: #CB1936;
    --bpa-dt-black-400: #202C45;
    --bpa-dt-black-400-darker: #121B2C;
    --bpa-dt-black-300: #535D71;
    --bpa-dt-black-200: #727E95;
    --bpa-dt-black-100: #B8C1D3;
    --bpa-gt-gray-400: #CFD6E5;
    --bpa-gt-gray-300: #DCE4F5;
    --bpa-gt-gray-200: #E9EDF5;
    --bpa-gt-gray-100: #F4F7FB;
    --bpa-gt-gray-50: #FAFCFF;
    --bpa-cl-white: #ffffff;
    --bpa-pt-main-green-alpha-12: rgba(28,19,69,0.12) !important;
    --bpa-pt-main-green-alpha-08: rgba(28,19,69,,0.08) !important;
    --bpa-pt-secondary-orange-alpha-08: rgba(245,174,65,0.08);
    --bpa-pt-secondary-orange-alpha-12: rgba(245,174,65,0.12);
    --bpa-pt-royal-blue-alpha-08: rgba(33,103,241,0.08);
    --bpa-pt-fuchsia-purple-alpha-08: rgba(212,54,196,0.08);
    --bpa-dt-black-400-alpha-08: rgba(32,44,69,0.08);
    --bpa-dt-black-200-alpha-12: rgba(114,126,149,0.12);
    --bpa-sc-danger-alpha-08: rgba(238, 36, 69, 0.08);
    --bpa-pt-blue-alpha-08: rgba(31, 99, 231, 0.08);
    --bpa-pt-brown-alpha-08: rgba(131, 78, 30, 0.08);
    --bpa-primary-font: 'Poppins',sans-serif;
    --bpa-secondary-font: 'Inter',sans-serif;
    --bpa-radius-12px: 12px;
    --bpa-radius-16px: 16px;
    --bpa-radius-8px: 8px;
    --bpa-radius-6px: 6px;
    --bpa-radius-4px: 4px;
    --bpa-radius-2px: 2px;
    --bpa-radius-circle: 50%
}

.vuecal__cell--current, .vuecal__cell--today, .vuecal__cell--selected {
    background-color: rgba(191, 178, 255, 0.12) !important;
    z-index: 1;
}

img.dashicon {
    padding: 15px;
    max-width: 180px;
}
.bpa-ssn-logo--lg {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.bpa-fieldset {
    margin-bottom: 20px;
}
input.bpa-readonly {
    font-size: 20px;
    color: #000;
    border: 0px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    padding: 0px !important;
}
label.bpa-checkbox {
    display: inline-block;
    margin: 5px 8px;
}

#bpa-page-loading-loader .bpa-back-loader{
    background: none;
}
#bpa-page-loading-loader.bpa-back-loader-container {
  background: rgba(15, 23, 42, 0) !important; /* softer backdrop */
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
#bpa-page-loading-loader .bpa-back-loader {
content: "";
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 3px solid #e5e7eb;
  border-top-color: #33227d;              /* brand color */
  -webkit-animation: bpa-spin 0.8s linear infinite;
  animation: bpa-spin 0.8s linear infinite;
  -webkit-box-shadow: 0 0 0 2px rgba(79,70,229,.12) inset;
  box-shadow: 0 0 0 2px rgba(79,70,229,.12) inset;
}

@-webkit-keyframes bpa-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@keyframes bpa-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

textarea.bpa-textarea {
    width: 400px;
}
input.bpa-text {
    width: 400px;
}

/* Fix ARMember password show/hide toggle button position */
.arm-df__fc-icon.--arm-suffix-icon.arm_visible_password,
.arm-df__fc-icon.--arm-suffix-icon.arm_visible_password_material {
    background: transparent !important;
    outline: none !important;
    height: 100% !important;
    top: 0 !important;
    right: 0 !important;
    width: 50px !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: absolute !important;
    border: none !important;
}

/* Ensure no style changes on active/focus */
.arm-df__fc-icon.--arm-suffix-icon.arm_visible_password:active,
.arm-df__fc-icon.--arm-suffix-icon.arm_visible_password:focus,
.arm-df__fc-icon.--arm-suffix-icon.arm_visible_password_material:active,
.arm-df__fc-icon.--arm-suffix-icon.arm_visible_password_material:focus {
    background: transparent !important;
    outline: none !important;
    height: 100% !important;
    top: 0 !important;
    right: 0 !important;
    width: 50px !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: absolute !important;
    border: none !important;
    color: inherit !important;
}

/* Fix password show/hide toggle button position */
.bpa-front-form-control .el-input__suffix,
.bpa-front-form-control .el-input__icon {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: none !important;
}

.bpa-front-form-control .el-input__suffix:active,
.bpa-front-form-control .el-input__suffix:focus,
.bpa-front-form-control .el-input__icon:active,
.bpa-front-form-control .el-input__icon:focus {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.bpa-front-form-control .el-input--suffix .el-input__inner {
    padding-right: 42px !important;
}

/* Ensure the password toggle icon stays in place */
.el-input__suffix-inner {
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center !important;
}

.el-input__suffix .el-input__icon {
    cursor: pointer !important;
    line-height: 1 !important;
    width: 20px !important;
    height: 20px !important;
}

/* Override button active/focus styles for password toggle icon */
.el-input__suffix .el-input__icon:active,
.el-input__suffix .el-input__icon:focus,
.el-input__suffix button:active,
.el-input__suffix button:focus,
.el-input__suffix i:active,
.el-input__suffix i:focus {
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    outline: none !important;
    position: relative !important;
    transform: none !important;
}

/* More specific overrides to prevent global button styles from affecting password toggle */
.bpa-front-form-control .el-input__suffix button:active,
.bpa-front-form-control .el-input__suffix button:focus,
.el-input--suffix .el-input__suffix button:active,
.el-input--suffix .el-input__suffix button:focus,
.el-input .el-input__suffix button:active,
.el-input .el-input__suffix button:focus {
    background-color: transparent !important;
    color: #606266 !important;
    border: none !important;
    outline: none !important;
    position: static !important;
    box-shadow: none !important;
}

/* Specifically target the password toggle button */
.bpa-front-form-control .el-input__suffix .el-icon-view,
.bpa-front-form-control .el-input__suffix .el-icon-view:active,
.bpa-front-form-control .el-input__suffix .el-icon-view:focus {
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    outline: none !important;
    position: static !important;
}

/* Ensure no position changes on the suffix container */
.bpa-front-form-control .el-input__suffix:active,
.bpa-front-form-control .el-input__suffix:focus {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
}