.bg-hr {
    background-color: #1F2847 !important;
}

.btn-view {
    background-color: #52C1E4;
    color: white;
    border-color: #2D96C6;
}

.btn-view:hover {
    color: whitesmoke;
    background-color: #2D96C6;
    border-color: #2D96C6;
}

.btn-edit {
    background-color: #52A5A0;
    color: white;
    border-color: #37DCBC;
}

.btn-edit:hover {
    color: #1F2847;
    background-color: #37DCBC;
    border-color: #37DCBC;
}

.btn-delete {
    background-color: #F2380F;
    color: white;
    border-color: #C92906;
}

.btn-delete:hover {
    color: wheat;
    background-color: #C92906;
    border-color: #D93C32;
}

.btn-add {
    background-color: #1F2847;
    color: white;
}

.btn-add:hover {
    color: whitesmoke;
    background-color: #2b3762;
    border-color: #99dad8;
}

.btn-closed {
    background-color: #1F2847;
    color: white;
}

.btn-closed:hover {
    color: whitesmoke;
    background-color: #BC3838;
    border-color: #99dad8;
}

.btn-unclickable {
    pointer-events: none;
}

.status-present, .status-online, .status-mission {
    background-color: var(--bs-success) !important;
    color: var(--bs-white) !important;
    opacity: var(--bs-btn-disabled-opacity);
}

.status-permission {
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
    opacity: var(--bs-btn-disabled-opacity);
}

.status-absent {
    background-color: var(--bs-danger) !important;
    color: var(--bs-white) !important;
    opacity: var(--bs-btn-disabled-opacity);
}

.status-late {
    background-color: var(--bs-warning) !important;
    color: var(--bs-white) !important;
    opacity: var(--bs-btn-disabled-opacity);
}

.status-abnormal {
    background-color: #F3E5CF !important;
    color: #DAB108 !important;
}


/*Leave Request Status*/

.btn-unclick {
    pointer-events: none;
}

.status-approved {
    background-color: #C7EAD1;
    color: #2ECC71;
}

.status-rejected {
    background-color: #EAC7C7;
    color: #E74C3C;
}

.status-pending {
    background-color: #F3E5CF;
    color: #DAB108;
}

.bi-xa::before {
    content: "\f62a";
}

.bg-default {
    background-color: #E8E8E8;
}

.bg-idt {
    background-color: #f88d2a !important;
}

.bg-idg {
    background-color: #38ade3 !important;
}

.bg-idri {
    background-color: #ff3f34 !important;
}

.text-head {
    color: #1F2847;
}

.text-head6 {
    color: #1F2847;
    font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
    font-stretch: expanded;
}

.text-column {
    color: #1F2847;
    font-size: larger;
}

.content {
    padding: 2rem;
    background: #F5F5F5;
    border-radius: 0.4rem;
    /* Thanks Stripe */
    box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);
}

.float-left {
    float: left
}

.float-right {
    float: right
}

.required-form {
    color: red
}

.font-size-20 {
    font-size: 20px;
}

a {
    text-decoration: none;
}

th a {
    color: black;
}


.btn-approval-status {
    color: whitesmoke;
    background-color: #2b3762;
    border-color: #99dad8;
}

/*TEST BUTTON*/
/*CSS for button approved*/
.button-approved {
    display: inline-block;
    background-color: #159634;
    border-radius: 10px;
    border: 4px double #cccccc;
    color: #eeeeee;
    text-align: center;
    font-size: 28px;
    padding: 10px;
    width: 250px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

.button-approved:hover {
    background-color: #31c454;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.button-rejected {
    display: inline-block;
    background-color: #ad0808;
    border-radius: 12px;
    border: 4px double #cccccc;
    color: #eeeeee;
    text-align: center;
    font-size: 28px;
    padding: 10px;
    width: 250px;
    transition: all 0.5s;

    margin: 5px;
}

.button-rejected:hover {
    background-color: #d30202;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

/*Test Button Second Choice*/
.button-approved2 {
    display: inline-block;
    background-color: #2b3762;
    border-radius: 10px;
    border: 4px double #cccccc;
    color: #eeeeee;
    text-align: center;
    font-size: 24px;
    padding: 9px;
    width: 220px;
    transition: all 0.4s;
    cursor: pointer;
    margin: 5px;
}

.button-approved2:hover {
    background-color: #e2e4ea;
    color: #041e3f;
    text-align: center;
    font-size: 25.5px;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}


.button-rejected2 {
    display: inline-block;
    background-color: #e2e4ea;
    border-radius: 10px;
    border: 4px double #2b3762;
    color: #2b3762;
    text-align: center;
    font-size: 24px;
    padding: 9px;
    width: 220px;
    transition: all 0.4s;
    cursor: pointer;
    margin: 5px;
}

.button-rejected2:hover {
    background-color: #2b3762;
    border: 4px double #cccccc;

    color: #eeeeee;
    text-align: center;
    font-size: 25.5px;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.max-vh-75 {
    max-height: 75vh !important;
}

/* Default list display as tableview */
.tbl_no {
    width: 80px;
}

.tbl_actions {
    width: 200px;
}

.form-group.required .form-label::after {
    content: " *";
    color: red;
}