:root {
    --blue: rgba(6, 74, 92, 1);
    --gray: rgba(0, 0, 0, 0.7);
    --black: rgba(0, 0, 0, 1);

    --green: rgba(22, 193, 62, 1);
    --maroon: rgba(144, 12, 23, 1);
    --red: rgba(225, 61, 75, 1);
    /*--blue: rgba(7, 148, 178, 1);*/

    --dark-blue: rgba(16,47,77,1);
    --yellow: rgba(253, 182, 39, 1);
    --white: rgba(255, 255, 255, 1);
    --orange: rgba(226, 83, 0, 1);
    --lavender: rgba(127, 101, 247, 1);
    --green-opac-5: rgba(22, 193, 62, 0.5);
    --maroon-opac-5: rgba(144, 12, 23, 0.5);
    --red-opac-5: rgba(225, 61, 75, 0.5);
    --blue-opac-5: rgba(7, 148, 178, 0.5);
    --dark-blue-opac-5: rgba(16,47,77,0.5);
    --gray-opac-5: rgba(0, 0, 0, 0.5);
    --yellow-opac-5: rgba(253, 182, 39, 0.5);
    --white-opac-5: rgba(255, 255, 255, 0.5);
    --orange-opac-5: rgba(226, 83, 0, 0.5);
    --lavender-opac-5: rgba(127, 101, 247, 0.5);
    --green-opac-2: rgba(22, 193, 62, 0.05);
    --maroon-opac-2: rgba(144, 12, 23, 0.05);
    --red-opac-2: rgba(225, 61, 75, 0.05);
    --blue-opac-2: rgba(7, 148, 178, 0.05);
    --dark-blue-opac-2: rgba(16,47,77,0.05);
    --gray-opac-2: rgba(0, 0, 0, 0.2);
    --yellow-opac-2: rgba(253, 182, 39, 0.15);
    --white-opac-2: rgba(255, 255, 255, 0.05);
    --orange-opac-2: rgba(226, 83, 0, 0.1);
    --lavender-opac-2: rgba(127, 101, 247, 0.05);
    --gray-opac-1: rgba(0, 0, 0, 0.1);
}

/* BUTTONS */
.btn-mini {
    font-size: 11px !important;
    padding: 1px 8px 0px 8px !important;
}

.reset {
    background-color: var(--gray) !important;
    color: var(--white) !important;
}

    .reset:hover {
        background-color: var(--gray-opac-2) !important;
        color: var(--white) !important;
    }

.save {
    background-color: var(--blue) !important;
    color: var(--white) !important;
}

    .save:hover {
        background-color: var(--blue-opac-2) !important;
        color: var(--black) !important;
    }

.link {
    background-color: transparent !important;
    color: var(--blue) !important;
}

    .link:hover {
        background-color: transparent !important;
        color: var(--black) !important;
    }

.ant-btn:focus,
button:focus {
    background-color: #eeeeee !important;
    color: var(--blue) !important;
}

.add {
    background-color: var(--green) !important;
    color: var(--white) !important;
}

    .add:hover {
        background-color: var(--green-opac-2) !important;
        color: var(--black) !important;
    }

.cancel {
    background-color: var(--maroon) !important;
    color: var(--white) !important;
}

    .cancel:hover {
        background-color: var(--maroon-opac-2) !important;
        color: var(--black) !important;
    }

/* Colors & Backgrounds Starts */

.green,
.approve {
    color: var(--green);
}

.maroon,
.reject {
    color: var(--maroon);
}

.red {
    color: var(--red);
}

.blue,
.pending {
    color: var(--blue) !important;
}

.gray,
.apply {
    color: var(--gray);
}

.black {
    color: var(--black);
}

.yellow {
    color: var(--yellow);
}

.white {
    color: var(--white);
}

.orange {
    color: var(--orange);
}

.bgw {
    background-color: var(--white);
}

.bgb {
    background-color: var(--black);
}

.bgblue {
    background-color: rgba(6, 74, 92, 1);
}

.bgblue-shade {
    background-color: rgba(6, 74, 92, .45);
}

.bgblue-light-shade {
    background-color: rgba(6, 74, 92, .2);
}

.bggold {
    background-color: rgba(224, 152, 0, 1);
}

.bggold-shade {
    background-color: rgba(224, 152, 0, .45);
}

.bggold-light-shade {
    background-color: rgba(224, 152, 0, .2);
}

.bgblue-l {
    background-color: rgba(27,113,136,.15);
}

.bggray {
    background-color: rgba(0,0,0,.05);
}

.bggold-l {
    background-color: rgba(224,152,0,.15);
}

.bgbluedark {
    background-color: var(--blue);
}

.bggraygradient-r-l {
    background-color: #ededed; /* For browsers that do not support gradients */
    background-image: linear-gradient(to right, #cac8c8, var(--white));
}

.bgdarklultragray {
    background-color: var(--gray);
}

.bgdarkgray {
    background-color: var(--gray-opac-5);
}

.bggray {
    background-color: var(--gray-opac-1);
}

    .bggray > legend {
        color: var(--black) !important;
    }

.bgyellow {
    font-weight: 600;
    background-color: var(--yellow);
    border-color: var(--white);
    color: var(--white);
}

.bgyellow-shade {
    background-color: var(--yellow-opac-5);
}

.bgyellow-light-shade {
    background-color: var(--yellow-opac-2);
}


.bgorange {
    background-color: var(--orange);
}

.bgorange-shade {
    background-color: var(--orange-opac-2) !important;
}

    .bgorange-shade > legend {
        color: var(--orange) !important;
    }

.blue,
.ant-modal-title {
    color: #064a5c;
}

.black,
.ant-input-number-input {
    color: #000;
}

.gray {
    color: #4c4c4c;
}

.white,
.white > .ant-form-item > .ant-form-item-label > label {
    color: #fff;
}

.gold {
    color: #e09800;
}


.transparent {
    background-color: var(--white) !important;
}

    .transparent > legend {
        color: var(--blue) !important;
    }

.bgmaroon {
    background: var(--maroon) !important;
}

.bgmaroon-shade {
    background-color: var(--maroon-opac-5) !important;
}

.bgmaroon-lighter-shade {
    background-color: var(--maroon-opac-2) !important;
}

.bggreen-shade {
    background: var(--green-opac-5) !important;
}

.bg-approve {
    background-color: var(--green-opac-2) !important;
}

.bg-reject {
    background-color: var(--maroon) !important;
}

.week-off {
    background-color: #ddddaf !important;
}

.public-holiday {
    background-color: #e9bad1 !important;
}