:root {
        --ks-brand-blue: #0b5ed7;
        --ks-brand-blue-hover: #1d4ed8;
        --ks-brand-blue-active: #1e40af;
        --ks-brand-blue-soft: rgba(11, 94, 215, .18);
    }

    .btn-primary,
    .btn-primary.disabled,
    .btn-primary:disabled,
    .primary-btn,
    .default-btn,
    .auth-btn,
    .login-btn,
    .register-btn,
    .submit-btn {
        background: var(--ks-brand-blue) !important;
        background-color: var(--ks-brand-blue) !important;
        border-color: var(--ks-brand-blue) !important;
        color: #fff !important;
        box-shadow: 0 3px 8px rgba(11, 94, 215, .22);
    }

    .btn-primary:not(:disabled):not(.disabled):hover,
    .btn-primary:not(:disabled):not(.disabled):focus,
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .primary-btn:hover,
    .primary-btn:focus,
    .default-btn:hover,
    .default-btn:focus,
    .auth-btn:hover,
    .auth-btn:focus,
    .login-btn:hover,
    .login-btn:focus,
    .register-btn:hover,
    .register-btn:focus,
    .submit-btn:hover,
    .submit-btn:focus {
        background: var(--ks-brand-blue-hover) !important;
        background-color: var(--ks-brand-blue-hover) !important;
        border-color: var(--ks-brand-blue-hover) !important;
        color: #fff !important;
        box-shadow: 0 5px 12px rgba(11, 94, 215, .28);
    }

    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active {
        background-color: var(--ks-brand-blue-active) !important;
        border-color: var(--ks-brand-blue-active) !important;
    }

    .btn-primary:focus,
    .btn-outline-primary:focus,
    .primary-btn:focus,
    .default-btn:focus,
    .auth-btn:focus,
    .login-btn:focus,
    .register-btn:focus,
    .submit-btn:focus {
        box-shadow: 0 0 0 .2rem var(--ks-brand-blue-soft) !important;
    }

    .btn-outline-primary {
        border-color: var(--ks-brand-blue) !important;
        color: var(--ks-brand-blue) !important;
    }

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active {
        background-color: var(--ks-brand-blue) !important;
        border-color: var(--ks-brand-blue) !important;
        color: #fff !important;
    }

    .ks-legacy-btn-primary,
    .ks-pro-primary,
    .ks-vsc-submit,
    .ks-karir-calc-btn {
        background: var(--ks-brand-blue) !important;
        background-color: var(--ks-brand-blue) !important;
        border-color: var(--ks-brand-blue) !important;
        color: #fff !important;
        box-shadow: 0 12px 28px rgba(11, 94, 215, .24) !important;
    }

    .ks-legacy-btn-primary:hover,
    .ks-pro-primary:hover,
    .ks-vsc-submit:hover,
    .ks-vsc-submit:focus,
    .ks-karir-calc-btn:hover,
    .ks-karir-calc-btn:focus {
        background: var(--ks-brand-blue-hover) !important;
        background-color: var(--ks-brand-blue-hover) !important;
        border-color: var(--ks-brand-blue-hover) !important;
        color: #fff !important;
    }

    #scrollToTopBtn,
    .ks-legacy-scroll-top,
    .ks-asn-scroll-top,
    .ks-sekolah-scroll-top,
    .ks-latex-scroll-top,
    .ks-vsc-scroll-top,
    .ks-karir-scroll-top,
    .ks-policy-top,
    .ks-faq-top,
    .ks-tos-top {
        width: 50px !important;
        height: 50px !important;
        right: 30px !important;
        bottom: 30px !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--ks-brand-blue) !important;
        background-color: var(--ks-brand-blue) !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1) !important;
        z-index: 9999 !important;
    }

    #scrollToTopBtn:hover,
    .ks-legacy-scroll-top:hover,
    .ks-asn-scroll-top:hover,
    .ks-sekolah-scroll-top:hover,
    .ks-latex-scroll-top:hover,
    .ks-vsc-scroll-top:hover,
    .ks-karir-scroll-top:hover,
    .ks-policy-top:hover,
    .ks-faq-top:hover,
    .ks-tos-top:hover {
        background: var(--ks-brand-blue-hover) !important;
        background-color: var(--ks-brand-blue-hover) !important;
        color: #fff !important;
        transform: translateY(-4px) !important;
    }

    #scrollToTopBtn svg,
    .ks-legacy-scroll-top svg,
    .ks-asn-scroll-top svg,
    .ks-sekolah-scroll-top svg,
    .ks-latex-scroll-top svg,
    .ks-vsc-scroll-top svg,
    .ks-karir-scroll-top svg,
    .ks-policy-top svg,
    .ks-faq-top svg,
    .ks-tos-top svg {
        width: 24px !important;
        height: 24px !important;
        color: currentColor !important;
        stroke: currentColor !important;
    }

    .btn-danger,
    .btn-danger:hover,
    .btn-danger:focus,
    .btn-warning,
    .btn-warning:hover,
    .btn-warning:focus {
        box-shadow: none;
    }