/* Minification failed. Returning unminified contents.
(20,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(43,29): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(133,29): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(279,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-circle'
(314,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(339,29): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(348,29): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(390,33): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg'
(450,33): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-circle'
(553,33): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-circle'
(567,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-2'
(569,35): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-2'
(573,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(574,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-3'
(575,24): run-time error CSS1039: Token not allowed after unary operator: '-purple-300'
(581,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(585,25): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-2'
(589,25): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(590,36): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-2'
(594,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(598,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-2'
(599,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-600'
(600,32): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-1'
(606,25): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-2'
(610,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-stroke-red-1'
(611,26): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-2'
(617,25): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-2'
(626,29): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(630,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-3'
(631,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(635,26): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-5'
(639,25): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(643,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(644,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-gradient-yellow'
(650,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(651,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-gradient-green'
(656,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-3'
(657,24): run-time error CSS1039: Token not allowed after unary operator: '-purple-stroke-purple-2'
(661,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-2'
(674,24): run-time error CSS1039: Token not allowed after unary operator: '-purple-stroke-purple-1'
(675,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-2'
(679,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-2'
(684,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(688,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-2'
(689,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(693,24): run-time error CSS1039: Token not allowed after unary operator: '-purple-stroke-purple-4'
(694,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-white'
(698,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-4'
(702,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-3'
(706,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(707,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-3'
(708,24): run-time error CSS1039: Token not allowed after unary operator: '-purple-300'
(712,24): run-time error CSS1039: Token not allowed after unary operator: '-purple-stroke-red-1'
(717,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(718,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-2'
(726,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(727,32): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-3'
(728,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-300'
(732,21): run-time error CSS1039: Token not allowed after unary operator: '-darkblue-text-secondary'
(736,21): run-time error CSS1039: Token not allowed after unary operator: '-darkblue-icon-1000'
(740,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-2'
(745,25): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-1'
(751,36): run-time error CSS1039: Token not allowed after unary operator: '-purple-stroke-purple-4'
(756,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(757,26): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-4'
(761,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-2'
(766,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(770,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-3'
(771,32): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-gradient-yellow'
(775,25): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-3'
(776,36): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-gradient-yellow-hover'
(781,25): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-1'
(786,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-2'
(790,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-1'
(791,24): run-time error CSS1039: Token not allowed after unary operator: '-purple-300'
(795,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(799,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-3'
(800,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-gradient-yellow'
(804,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-3'
(805,28): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-gradient-yellow'
(809,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-3'
(810,32): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-gradient-yellow-hover'
(814,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-purple-3'
(815,32): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-gradient-yellow-1'
(819,17): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-white'
(820,22): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-3'
(821,24): run-time error CSS1039: Token not allowed after unary operator: '-purple-stroke-yellow-1'
(825,26): run-time error CSS1039: Token not allowed after unary operator: '-purple-bg-purple-1'
(829,26): run-time error CSS1039: Token not allowed after unary operator: '-yellow-900'
(830,21): run-time error CSS1039: Token not allowed after unary operator: '-purple-text-yellow-1'
 */
.sga-input-icon-group > input:-webkit-autofill,
.sga-input-icon-group > input:-webkit-autofill:focus,
.sga-input-icon-group > input:-webkit-autofill:hover,
.sga-input-icon-group > select:-webkit-autofill,
.sga-input-icon-group > select:-webkit-autofill:focus,
.sga-input-icon-group > select:-webkit-autofill:hover {
    font-size: 1rem; /* Needed to be duplicate in Firefox as firefox doesn't allow combination of input with -webkit */
    line-height: 1.2;
    outline: none;
    border: none;
    -webkit-box-shadow: 0 0 0 0 #000 inset;
    transition: background-color 5000s ease-in-out 0s;
}

.sga-input-icon-group {
    position: relative;
    width: 100%;
    height: 3.2rem;
    border: 1px solid;
    border-radius: var(--border-radius-lg);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

    .sga-input-icon-group > input,
    .sga-input-icon-group > select {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        font-size: 1rem;
        line-height: 1.2;
        outline: none;
        outline-width: 0;
        border: none;
        border-radius: var(--border-radius-lg);
        padding: 0 10px;
        display: block;
    }

        .sga-input-icon-group > input[data-useflex],
        .sga-input-icon-group > select[data-useflex] {
            position: relative;
            left: 0;
            margin-left: 4.4rem;
            flex-grow: 1;
            -ms-flex-positive: 1;
        }

        .sga-input-icon-group > select:invalid {
            box-shadow: none;
        }

        .sga-input-icon-group > select option {
            padding: 1rem 0;
        }

        .sga-input-icon-group > input + span,
        .sga-input-icon-group > select + span {
            margin: auto 1rem auto 0;
            line-height: 1.2;
            display: block;
        }

    .sga-input-icon-group > span {
        margin: auto 0 auto 0.4rem;
        font-size: 1rem;
        line-height: 1.2;
        cursor: default;
        display: block;
    }

        .sga-input-icon-group > span + input,
        .sga-input-icon-group > span + select {
            position: relative;
            left: 0;
            margin-left: 0.35rem;
            flex-grow: 1;
            -ms-flex-positive: 1;
        }

    .sga-input-icon-group.error {
        border: 1px solid;
    }

        .sga-input-icon-group.error > input::-moz-placeholder {
            opacity: 1;
        }

        .sga-input-icon-group.error > input::-webkit-input-placeholder {
            opacity: 1;
        }

button[data-btype="ok"] {
    text-transform: none !important;
}

#dlgComplaint .modal-content .sga-input-icon-group > textarea {
    left: 0.4rem;
    width: 100%;
}

#dlgComplaint .nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

#dlgComplaint .nav-fill .nav-item {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: center;
}

#dlgComplaint .sga-underline {
    min-height: 44px;
    grid-gap: 10px;
}

    #dlgComplaint .sga-underline.nav-pills > li {
        border: 1px solid;
        border-radius: var(--border-radius-lg);
        padding: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        font-weight: 600;
        justify-content: center;
    }

        #dlgComplaint .sga-underline.nav-pills > li.active > a,
        #dlgComplaint .sga-underline.nav-pills > li.active > a:hover {
            text-decoration: none;
            background-color: transparent !important;
        }

        #dlgComplaint .sga-underline.nav-pills > li > a {
            font-size: 16px;
            border-radius: 0px;
        }

#sgaDlg .btn-success {
    opacity: 0.65;
}

[data-name="complaintcontainer"] textarea {
    padding: 1rem 0rem;
    resize: none;
}

[data-name="complaintcontainer"] [data-name="btnremove"] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 4px;
    font-size: 1.2rem;
    display: none;
}

[data-name="complaintcontainer"] [data-name="filename"] {
    padding: 6px 0;
    font-size: 1.2rem;
    font-weight: 600;
}

[data-name="complaintcontainer"] [data-name="filepicker"] {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

[data-name="complaintcontainer"] [data-name="trackcomplaintdescription"] {
    word-break: break-all;
}

[data-name="complaintcontainer"] .container-attachment {
    padding: 12px 0;
    border: 1px solid;
    text-align: center;
    border-radius: 4px;
    position: relative;
}

    [data-name="complaintcontainer"] .container-attachment > .attachment {
        cursor: pointer;
        margin: 0 auto;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        [data-name="complaintcontainer"] .container-attachment > .attachment > i {
            font-size: 2.2rem;
        }

[data-name="complaintcontainer"] .def-msg {
    font-size: 0.85rem;
}

[data-name="complaintcontainer"] .nav-pills .nav-link.active {
    color: unset;
    background-color: unset;
}

[data-name="complaintcontainer"] .row {
    margin-top: 1rem;
}

[data-name="complaintcontainer"] .sga-input-icon-group:has(textarea) {
    height: 10.5rem;
}

[data-name="complaintcontainer"] .subtitle {
    font-size: 1rem;
    margin: auto;
    text-align: right;
    padding-right: 48px;
}

[data-name="complaintcontainer"] .tab-content {
    margin-top: 1.2rem;
}

[data-name="complaintcontainer"] .title {
    margin-top: 1rem;
    font-size: 1.3rem;
}

[data-name="registercontainer"] .row {
    margin-top: 1rem;
}

[data-name="registercontainer"] .subtitle {
    font-size: 1rem;
    margin: auto;
    text-align: right;
    padding-right: 65px;
}

[data-name="registercontainer"] .title {
    font-size: 1.3rem;
}

    [data-name="registercontainer"] .title:not(:first-child),
    .container-bank,
    .container-cw,
    .container-dw,
    .container-pc {
        margin-top: 2rem;
    }

.checkmark {
    position: absolute;
    top: 0;
    right: 5%;
    height: 30px;
    width: 30px;
    border: 5px solid;
    border-radius: var(--border-radius-circle);
}

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

.container-cbo {
    display: block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .container-cbo input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

        .container-cbo input:checked ~ .checkmark:after {
            display: block;
        }

    .container-cbo .checkmark:after {
        left: 6px;
        top: 2px;
        width: 9px;
        height: 14px;
        border: solid var(--purple-text-white);
        border-width: 0 4px 4px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

.def-msg {
    font-size: 0.85rem;
}

.input-captcha {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

    .input-captcha > img {
        width: 20rem;
        height: 3.2rem;
        object-fit: none;
        object-position: 50% 50%;
        border-radius: var(--border-radius-lg);
    }

    .input-captcha > input {
        width: 100%;
        height: 3.2rem;
        margin-left: 1rem;
        font-size: 1rem;
        padding: 0 1rem;
        border-radius: var(--border-radius-lg);
        border: 1px solid;
        flex-grow: 1;
        -ms-flex-positive: 1;
    }

        .input-captcha > input:focus {
            outline: none;
        }

    .input-captcha + .errmsg {
        width: 100%;
        text-align: center;
    }

    .input-captcha.error > input {
        border: 1px solid;
    }

#sgaDlg > div > .modal-content > .modal-footer > button:focus {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    [data-name="logincontainer"] button {
        margin-top: 1rem;
    }
}

#dlgLogin .modal-content,
#dlgRegister .modal-content {
    padding: 16px 20px;
    border-radius: 30px;
    height: fit-content;
}

    #dlgLogin .modal-content .modal-body {
        padding-bottom: 0;
    }

        #dlgLogin .modal-content .modal-body .login-form input {
            padding: 14px 16px;
            border-radius: var(--border-radius-lg);
        }

        #dlgLogin .modal-content .modal-body .login-form label {
            margin-bottom: 4px;
        }

        #dlgLogin .modal-content .modal-body .login-form .mb-3 {
            position: relative;
        }

            #dlgLogin .modal-content .modal-body .login-form .mb-3 i {
                position: absolute;
                z-index: 2;
                right: 20px;
                top: 45px;
            }

        #dlgLogin .modal-content .modal-body .logoimage {
            text-align: center;
        }

        #dlgLogin .modal-content .modal-body .register-content {
            text-align: center;
            display: grid;
            justify-items: center;
        }

            #dlgLogin .modal-content .modal-body .register-content button {
                border: none;
                outline: none;
                padding: 0;
                border-bottom: 1px solid;
                font-size: 16px;
            }

    #dlgLogin .modal-content .modal-footer,
    #dlgRegister .modal-content .modal-footer {
        border-top: none;
        padding-bottom: 0;
    }

    #dlgLogin .modal-content .modal-header,
    #dlgRegister .modal-content .modal-header {
        border-bottom: none;
        align-items: center;
        position: relative;
        padding-bottom: 0;
        flex-flow: column;
    }

        #dlgLogin .modal-content .modal-header button,
        #dlgRegister .modal-content .modal-header button {
            margin: unset;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 2rem;
            font-weight: 500;
            padding: 5px;
            border-radius: var(--border-radius-circle);
            width: 40px;
            height: 40px;
            opacity: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #dlgLogin .modal-content .modal-header .modal-title,
        #dlgRegister .modal-content .modal-header .modal-title {
            font-weight: 600;
        }

#dlgRegister {
    z-index: 1101;
}

    #dlgRegister .modal-body {
        padding: 0;
    }

        #dlgRegister .modal-body .fa.toggle-password-desktop {
            position: absolute;
            top: 33%;
            right: 5%;
        }

        #dlgRegister .modal-body .row:nth-child(3) [data-name="confirmpassword"] {
            padding-right: 28px;
        }

        #dlgRegister .modal-body .row .sga-input-icon-group .form-control {
            border: none;
            box-shadow: none;
        }

    #dlgRegister .modal-content .modal-footer button {
        padding: 10px;
        width: 100%;
        font-size: 18px;
        text-transform: uppercase;
        font-weight: 600;
    }

        #dlgRegister .modal-content .modal-footer button.switch-login {
            padding: 0;
            border: none;
            text-transform: unset;
            margin: 0;
            font-weight: 500;
            outline: none;
        }

    #dlgRegister .modal-footer .btn .timeout {
        font-size: 12px;
        margin-left: 3px;
    }

#sgaDlg > div > .modal-content > .modal-footer > button:focus {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

[data-name="logincontainer"] {
    margin-top: 0;
}

    [data-name="logincontainer"] .btn {
        width: 100%;
        font-size: 20px;
        text-transform: uppercase;
        font-weight: 600;
        border-radius: 0;
    }

    [data-name="logincontainer"] .captcha-container img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

.container-top .btn-login-register {
    display: flex;
    align-content: center;
    grid-gap: 5px;
}

    .container-top .btn-login-register button {
        padding: 7px 18px;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        gap: 5px;
        border: none;
        text-wrap: nowrap;
    }

        .container-top .btn-login-register button:last-child {
            border: 1px solid;
        }

        .container-top .btn-login-register button div {
            border-radius: var(--border-radius-circle);
            width: 25px;
        }

.pagepopup-main {
    z-index: 9999 !important;
}

body .sga-input-icon-group > input:-webkit-autofill,
body .sga-input-icon-group > input:-webkit-autofill:focus,
body .sga-input-icon-group > input:-webkit-autofill:hover,
body .sga-input-icon-group > select:-webkit-autofill,
body .sga-input-icon-group > select:-webkit-autofill:focus,
body .sga-input-icon-group > select:-webkit-autofill:hover {
    color: var(--purple-text-purple-2);
    background-color: transparent !important;
    -webkit-text-fill-color: var(--purple-text-purple-2);
}

body .sga-input-icon-group {
    color: var(--purple-text-white);
    background-color: var(--purple-bg-purple-3);
    border-color: var(--purple-300);
}

    body .sga-input-icon-group > input,
    body .sga-input-icon-group > select {
        background-color: transparent;
        color: var(--purple-text-white);
    }

        body .sga-input-icon-group > select:invalid {
            color: var(--purple-text-purple-2);
        }

        body .sga-input-icon-group > select option {
            color: var(--purple-text-white);
            background-color: var(--purple-bg-purple-2);
        }

    body .sga-input-icon-group > span {
        color: var(--purple-text-white);
    }

    body .sga-input-icon-group.disabled {
        color: var(--purple-text-purple-2);
        border-color: var(--purple-600);
        background-color: var(--purple-bg-purple-1);
    }

        body .sga-input-icon-group.disabled > input,
        body .sga-input-icon-group.disabled > select,
        body .sga-input-icon-group > select option:disabled {
            color: var(--purple-text-purple-2);
        }

    body .sga-input-icon-group.error {
        border-color: var(--purple-stroke-red-1) !important;
        background: var(--purple-bg-purple-2);
    }

        body .sga-input-icon-group.error > input,
        body .sga-input-icon-group.error > select,
        body .sga-input-icon-group.error > span {
            color: var(--purple-text-purple-2);
        }

            body .sga-input-icon-group.error > input::placeholder,
            body .sga-input-icon-group.error > input::-moz-placeholder,
            body .sga-input-icon-group.error > input:-ms-input-placeholder,
            body .sga-input-icon-group.error > input::-ms-input-placeholder,
            body .sga-input-icon-group.error > input::-webkit-input-placeholder,
            body .sga-input-icon-group.error > select:invalid {
                color: var(--gray);
            }

#dlgComplaint .modal-content {
    background: var(--purple-bg-purple-3);
    color: var(--purple-text-white);
}

    #dlgComplaint .modal-content .sga-input-icon-group {
        background: var(--purple-bg-purple-5);
    }

        #dlgComplaint .modal-content .sga-input-icon-group > textarea {
            color: var(--purple-text-white);
        }

#dlgComplaint .modal-footer .btn-cancel {
    color: var(--purple-text-white);
    background-image: var(--purple-bg-gradient-yellow);
}

#dlgComplaint .modal-footer .btn-primary,
#sgaDlg .btn-success {
    border-color: transparent;
    color: var(--purple-text-white);
    background: var(--purple-bg-gradient-green);
    box-shadow: none;
}

#dlgComplaint .sga-underline.nav-pills > li {
    background-color: var(--purple-bg-purple-3);
    border-color: var(--purple-stroke-purple-2);
}

    #dlgComplaint .sga-underline.nav-pills > li > a {
        color: var(--purple-text-purple-2);
    }

    #dlgComplaint .sga-underline.nav-pills > li.active {
        background-color: rgba(104, 186, 33, 0.12);
        border-color: rgb(104, 186, 33);
    }

        #dlgComplaint .sga-underline.nav-pills > li.active > a {
            color: rgb(104, 186, 33);
        }

[data-name="complaintcontainer"] .container-attachment {
    border-color: var(--purple-stroke-purple-1);
    background: var(--purple-bg-purple-2);
}

    [data-name="complaintcontainer"] .container-attachment [data-name="desc"] {
        color: var(--purple-text-purple-2);
    }

    [data-name="complaintcontainer"] .container-attachment [data-name="filename"],
    [data-name="complaintcontainer"] .container-attachment .fa-upload {
        color: var(--purple-text-white);
    }

optgroup {
    background-color: var(--purple-bg-purple-2);
    color: var(--purple-text-white);
}

.checkmark {
    border-color: var(--purple-stroke-purple-4);
    background: var(--purple-bg-white);
}

.container-cbo:hover input ~ .checkmark {
    background-color: var(--purple-bg-purple-4);
}

.container-cbo input:checked ~ .checkmark {
    background: var(--purple-bg-purple-3);
}

.input-captcha > input {
    color: var(--purple-text-white);
    background-color: var(--purple-bg-purple-3);
    border-color: var(--purple-300);
}

.input-captcha.error > input {
    border-color: var(--purple-stroke-red-1);
}

#dlgLogin .modal-content,
#dlgRegister .modal-content {
    color: var(--purple-text-white);
    background-color: var(--purple-bg-purple-2);
    background-repeat: no-repeat;
    background-size: cover;
}

    #dlgLogin .modal-content .modal-body .login-form input,
    #dlgRegister .modal-body .row .sga-input-icon-group,
    #dlgRegister .modal-body .row .sga-input-icon-group input {
        color: var(--purple-text-white);
        background-color: var(--purple-bg-purple-3);
        border-color: var(--purple-300);
    }

    #dlgLogin .modal-content .modal-body .login-form label {
        color: var(--darkblue-text-secondary);
    }

    #dlgLogin .modal-content .modal-body .login-form .mb-3 i {
        color: var(--darkblue-icon-1000);
    }

    #dlgLogin .modal-content .modal-body .register-content {
        color: var(--purple-text-purple-2);
    }

        #dlgLogin .modal-content .modal-body .register-content button,
        #dlgRegister .modal-content .modal-body .login-content button {
            color: var(--purple-text-purple-1);
            background: transparent;
            border-color: transparent;
        }

            #dlgLogin .modal-content .modal-body .register-content button:hover {
                border-color: var(--purple-stroke-purple-4);
            }

    #dlgLogin .modal-content .modal-header button,
    #dlgRegister .modal-content .modal-header button {
        color: var(--purple-text-white);
        background: var(--purple-bg-purple-4);
    }

    #dlgLogin .modal-content .modal-header h6 {
        color: var(--purple-text-purple-2);
    }

    #dlgLogin .modal-content .modal-header .modal-title,
    #dlgRegister .modal-content .modal-header .modal-title {
        color: var(--purple-text-white);
    }

    #dlgRegister .modal-content .modal-footer button {
        color: var(--purple-text-purple-3);
        background-image: var(--purple-bg-gradient-yellow);
    }

        #dlgRegister .modal-content .modal-footer button:hover {
            color: var(--purple-text-purple-3);
            background-image: var(--purple-bg-gradient-yellow-hover);
        }

        #dlgRegister .modal-content .modal-footer button.switch-login,
        #dlgRegister .modal-content .modal-footer button.switch-login:hover {
            color: var(--purple-text-purple-1);
            background: none;
        }

    #dlgRegister .modal-content .modal-footer > div {
        color: var(--purple-text-purple-2);
    }

#sgaDlg .bg-danger {
    background-color: var(--purple-bg-purple-1) !important;
    border-color: var(--purple-300);
}

    #sgaDlg .bg-danger .modal-title {
        color: var(--purple-text-white);
    }

[data-name="logincontainer"] .btn {
    color: var(--purple-text-purple-3);
    background: var(--purple-bg-gradient-yellow);
}

.container-top .btn-login-register button:first-child {
    color: var(--purple-text-purple-3);
    background-image: var(--purple-bg-gradient-yellow);
}

    .container-top .btn-login-register button:first-child:hover {
        color: var(--purple-text-purple-3);
        background-image: var(--purple-bg-gradient-yellow-hover);
    }

    .container-top .btn-login-register button:first-child div {
        color: var(--purple-text-purple-3);
        background-image: var(--purple-bg-gradient-yellow-1);
    }

.container-top .btn-login-register button:last-child {
    color: var(--purple-text-white);
    background: var(--purple-bg-purple-3);
    border-color: var(--purple-stroke-yellow-1);
}

    .container-top .btn-login-register button:last-child:hover {
        background: var(--purple-bg-purple-1);
    }

    .container-top .btn-login-register button:last-child div {
        background: var(--yellow-900);
        color: var(--purple-text-yellow-1);
    }