.nav-pills .nav-link {
    border: solid 1px transparent;
    margin: 1px;
    transition: all 0.5s ease;
}

    .nav-pills .nav-link:not(.active) {
        color: var(--petronas-dark-blue);
    }

    .nav-pills .nav-link.active {
        background-color: var(--petronas-dark-blue);
    }

    .nav-pills .nav-link:hover {
        border: solid 1px var(--petronas-light-blue);
    }

* {
    --primary: var(--petronas-emerald);
    --petronas-white: #FFFFFF;
    --petronas-very-dark-grey: #404040;
    --petronas-dark-grey: #7F7F7F;
    --petronas-mid-grey: #D9D9D9;
    --petronas-light-grey: #A6A6A6;
    --petronas-pale-grey: #F7F7F7;
    --petronas-very-pale-grey: #595959;
    /* Main customer palette */
    --petronas-emerald: #00B1A9;
    --petronas-purple: #763F98;
    --petronas-blue: #20419A;
    --petronas-yellow: #FDB924;
    --petronas-lime: #BFD730;
    /* Derived shades */
    --petronas-emerald-900: #002322;
    --petronas-emerald-800: #004744;
    --petronas-emerald-700: #006a65;
    --petronas-emerald-600: #008e87;
    --petronas-emerald-500: var(--petronas-emerald);
    --petronas-emerald-400: #33c1ba;
    --petronas-emerald-300: #66d0cb;
    --petronas-emerald-200: #99e0dd;
    --petronas-emerald-100: #ccefee;
    --petronas-purple-80: #9565AE;
    --petronas-purple-60: #B58BC6;
    --petronas-blue-900: #536BAF;
    --petronas-blue-800: #0D1A3E;
    --petronas-blue-700: #13275C;
    --petronas-blue-600: #1A347B;
    --petronas-blue-500: var(--petronas-blue);
    --petronas-blue-400: #4D67AE;
    --petronas-blue-300: #798DC2;
    --petronas-blue-200: #A6B3D7;
    --petronas-blue-100: #D2D9EB;
    --petronas-grayscale-900: #0c0b0b;
    --petronas-grayscale-800: #181715;
    --petronas-grayscale-700: #252220;
    --petronas-grayscale-600: #312e2a;
    --petronas-grayscale-500: #3D3935;
    --petronas-grayscale-400: #64615d;
    --petronas-grayscale-300: #8b8886;
    --petronas-grayscale-200: #b1b0ae;
    --petronas-grayscale-100: #d8d7d7;
    --petronas-yellow-80: #FECB55;
    --petronas-yellow-60: #FDDC88;
    --petronas-lime-80: #CDDF5C;
    --petronas-lime-60: #DCEB8B;
    /* Semantic aliases */
    --petronas-dark-blue: var(--petronas-blue);
    --petronas-mid-blue: var(--petronas-emerald);
    --petronas-light-blue: var(--petronas-emerald-900);
    --petronas-dark-green: var(--petronas-emerald);
    --petronas-light-green: var(--petronas-lime);
    --petronas-red: #DD1D21;
    --petronas-orange: var(--petronas-yellow);
    --petronas-brown: #743410;
    --petronas-sand: #FFF1C7;
    --petronas-lilac: var(--petronas-purple-80);
}

#sidebar ul.sidebar-menu li a,
#sidebar ul.sidebar-menu button,
#sidebar #menu-toggle:hover {
    color: inherit;
    border-left: 3px solid rgba(255,255,255,0);
}

    #sidebar ul.sidebar-menu li a:hover,
    #sidebar ul.sidebar-menu li a.active:hover,
    #sidebar ul.sidebar-menu button:hover,
    #sidebar #menu-toggle:hover {
        background: var(--petronas-emerald-400);
        color: var(--petronas-grayscale-500);
        border-left: 3px solid var(--petronas-white);
    }

    #sidebar ul.sidebar-menu li a.active {
        color: var(--petronas-white);
        background: var(--petronas-emerald);
        border-left: 3px solid var(--petronas-white);
    }

/** Buttons */
.disabled, [disabled] {
    color: var(--petronas-light-grey) !important;
}

/* Generated by https://blog.koalite.com/bbg/ */
.btn-submit {
    color: var(--petronas-white);
    background-color: var(--petronas-emerald-500);
    border-color: var(--petronas-emerald-500);
}

    .btn-submit:hover,
    .btn-submit:focus,
    .btn-submit:active,
    .btn-submit.active,
    .open .dropdown-toggle.btn-submit {
        color: var(--petronas-very-dark-grey);
        background-color: var(--petronas-emerald-200);
        border-color: var(--petronas-emerald-200);
    }

    .btn-submit:active,
    .btn-submit.active,
    .open .dropdown-toggle.btn-submit {
        background-image: none;
    }

    .btn-submit.disabled,
    .btn-submit[disabled],
    fieldset[disabled] .btn-submit,
    .btn-submit.disabled:hover,
    .btn-submit[disabled]:hover,
    fieldset[disabled] .btn-submit:hover,
    .btn-submit.disabled:focus,
    .btn-submit[disabled]:focus,
    fieldset[disabled] .btn-submit:focus,
    .btn-submit.disabled:active,
    .btn-submit[disabled]:active,
    fieldset[disabled] .btn-submit:active,
    .btn-submit.disabled.active,
    .btn-submit[disabled].active,
    fieldset[disabled] .btn-submit.active {
        color: white;
        background-color: var(--petronas-emerald);
        border-color: var(--petronas-emerald-500);
    }

    .btn-submit .badge {
        color: var(--petronas-yellow);
        background-color: var(--petronas-very-dark-grey);
    }


.btn-primary {
    color: white;
    background-color: var(--petronas-dark-blue);
    border-color: var(--petronas-dark-blue-80);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        color: white;
        background-color: var(--petronas-dark-blue-60);
        border-color: var(--petronas-dark-blue-80);
    }

    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        background-image: none;
    }

    .btn-primary.disabled,
    .btn-primary[disabled],
    fieldset[disabled] .btn-primary,
    .btn-primary.disabled:hover,
    .btn-primary[disabled]:hover,
    fieldset[disabled] .btn-primary:hover,
    .btn-primary.disabled:focus,
    .btn-primary[disabled]:focus,
    fieldset[disabled] .btn-primary:focus,
    .btn-primary.disabled:active,
    .btn-primary[disabled]:active,
    fieldset[disabled] .btn-primary:active,
    .btn-primary.disabled.active,
    .btn-primary[disabled].active,
    fieldset[disabled] .btn-primary.active {
        background-color: var(--petronas-dark-blue);
        border-color: var(--petronas-dark-blue-80);
    }

    .btn-primary .badge {
        color: var(--petronas-dark-blue);
        background-color: white;
    }


.btn-outline-primary {
    color: var(--petronas-very-dark-grey);
    background-color: transparent;
    border-color: var(--petronas-dark-blue);
}

.btn, .nav-link, a {
    transition: all ease-in-out 0.3s;
}


.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.open .dropdown-toggle.btn-outline-primary {
    color: white;
    background-color: var(--petronas-dark-blue);
    border-color: var(--petronas-dark-blue);
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.open .dropdown-toggle.btn-outline-primary {
    background-image: none;
}

.btn-outline-primary.disabled,
.btn-outline-primary[disabled],
fieldset[disabled] .btn-outline-primary,
.btn-outline-primary.disabled:hover,
.btn-outline-primary[disabled]:hover,
fieldset[disabled] .btn-outline-primary:hover,
.btn-outline-primary.disabled:focus,
.btn-outline-primary[disabled]:focus,
fieldset[disabled] .btn-outline-primary:focus,
.btn-outline-primary.disabled:active,
.btn-outline-primary[disabled]:active,
fieldset[disabled] .btn-outline-primary:active,
.btn-outline-primary.disabled.active,
.btn-outline-primary[disabled].active,
fieldset[disabled] .btn-outline-primary.active {
    background-color: transparent;
    border-color: var(--petronas-dark-blue);
}

.btn-outline-primary .badge {
    color: transparent;
    background-color: var(--petronas-very-dark-grey);
}

.btn-outline-info {
    color: var(--petronas-dark-blue);
    background-color: transparent;
    border-color: var(--petronas-light-blue);
}

    .btn-outline-info:hover,
    .btn-outline-info:focus,
    .btn-outline-info:active,
    .btn-outline-info.active,
    .open .dropdown-toggle.btn-outline-info {
        color: #ffffff;
        background-color: var(--petronas-light-blue);
        border-color: var(--petronas-light-blue);
    }

    .btn-outline-info:active,
    .btn-outline-info.active,
    .open .dropdown-toggle.btn-outline-info {
        background-image: none;
    }

    .btn-outline-info.disabled,
    .btn-outline-info[disabled],
    fieldset[disabled] .btn-outline-info,
    .btn-outline-info.disabled:hover,
    .btn-outline-info[disabled]:hover,
    fieldset[disabled] .btn-outline-info:hover,
    .btn-outline-info.disabled:focus,
    .btn-outline-info[disabled]:focus,
    fieldset[disabled] .btn-outline-info:focus,
    .btn-outline-info.disabled:active,
    .btn-outline-info[disabled]:active,
    fieldset[disabled] .btn-outline-info:active,
    .btn-outline-info.disabled.active,
    .btn-outline-info[disabled].active,
    fieldset[disabled] .btn-outline-info.active {
        background-color: transparent;
        border-color: var(--petronas-light-blue);
    }

    .btn-outline-info .badge {
        color: transparent;
        background-color: #ffffff;
    }