/*==================================================
  COLOR VARIABLES
==================================================*/
:root {
    --color-theme-4: #082674;
    /*Darker Blue*/
    --color-theme-1: #0851a7;
    /*Dark Blue FD*/
    --color-theme-3: #039cde;
    /*Light Blue FD*/
    --color-theme-6: #5293ff;
    /*Lighter Blue*/

    --color-theme-5: #fa6129;
    /*Dark Orange*/
    --color-theme-2: #ff8200;
    /*Light Orange FD*/

    --color-theme-7: #b1b1b1;
    /*Light grey FD*/

    --color-user-seated: #082674;
    --color-user-notseated: #082674;
    --color-user-overload: #fa6129;
    --color-checkbox-assigned: #28a745;
    --color-checkbox-notassigned: #dc3545;
    /*--color-user-seated: #009d4d;
    --color-user-notseated: #272928;
    --color-user-overload: #ce1a1a;
    --color-checkbox-assigned: #28a745;
    --color-checkbox-notassigned: #dc3545;*/
}




/*==================================================
  BUTTONS - SOLID + HOVER EFFECT
==================================================*/
.btn-theme-1 {
    background: var(--color-theme-1);
    color: #fff;
    border: 1px solid var(--color-theme-1);
}

.btn-theme-2 {
    background: var(--color-theme-2);
    color: #fff;
    border: 1px solid var(--color-theme-2);
}

.btn-theme-3 {
    background: var(--color-theme-3);
    color: #fff;
    border: 1px solid var(--color-theme-3);
}

    .btn-theme-3:hover {
        filter: brightness(90%);
        color: #fff;
    }

.btn-theme-4 {
    background: var(--color-theme-4);
    color: #fff;
    border: 1px solid var(--color-theme-4);
}

.btn-theme-5 {
    background: var(--color-theme-5);
    color: #fff;
    border: 1px solid var(--color-theme-5);
}

.btn-theme-6 {
    background: var(--color-theme-6);
    color: #fff;
    border: 1px solid var(--color-theme-6);
}

.btn-theme-7 {
    background: var(--color-theme-7);
    color: #fff;
    border: 1px solid var(--color-theme-7);
}

.btn-theme-1:hover {
    background-color: color-mix(in srgb, black 15%, var(--color-theme-1));
    color: #fff;
}

.btn-theme-2:hover {
    background-color: color-mix(in srgb, black 15%, var(--color-theme-2));
    color: #fff;
}

.btn-theme-3:hover {
    background-color: color-mix(in srgb, black 15%, var(--color-theme-3));
    color: #fff;
}

.btn-theme-4:hover {
    background-color: color-mix(in srgb, black 15%, var(--color-theme-4));
    color: #fff;
}

.btn-theme-5:hover {
    background-color: color-mix(in srgb, black 15%, var(--color-theme-5));
    color: #fff;
}

.btn-theme-6:hover {
    background-color: color-mix(in srgb, black 15%, var(--color-theme-6));
    color: #fff;
}

.btn-theme-7:hover {
    background-color: color-mix(in srgb, black 15%, var(--color-theme-7));
    color: #fff;
}
/*==================================================
  BUTTONS - OUTLINE
==================================================*/
.btn-outline-theme-1 {
    background: transparent;
    color: var(--color-theme-1);
    border: 1px solid var(--color-theme-1);
}

.btn-outline-theme-2 {
    background: transparent;
    color: var(--color-theme-2);
    border: 1px solid var(--color-theme-2);
}

.btn-outline-theme-3 {
    background: transparent;
    color: var(--color-theme-3);
    border: 1px solid var(--color-theme-3);
}

.btn-outline-theme-4 {
    background: transparent;
    color: var(--color-theme-4);
    border: 1px solid var(--color-theme-4);
}

.btn-outline-theme-5 {
    background: transparent;
    color: var(--color-theme-5);
    border: 1px solid var(--color-theme-5);
}

.btn-outline-theme-6 {
    background: transparent;
    color: var(--color-theme-6);
    border: 1px solid var(--color-theme-6);

}
.btn-outline-theme-7 {
    background: transparent;
    color: var(--color-theme-7);
    border: 1px solid var(--color-theme-7)
}

/*==================================================
  BUTTONS OUTLINE - HOVER EFFECT
==================================================*/
.btn-outline-theme-1:hover {
    background: var(--color-theme-1);
    color: #fff;
}

.btn-outline-theme-2:hover {
    background: var(--color-theme-2);
    color: #fff;
}

.btn-outline-theme-3:hover {
    background: var(--color-theme-3);
    color: #fff;
}

.btn-outline-theme-4:hover {
    background: var(--color-theme-4);
    color: #fff;
}

.btn-outline-theme-5:hover {
    background: var(--color-theme-5);
    color: #fff;
}

.btn-outline-theme-6:hover {
    background: var(--color-theme-6);
    color: #fff;
}

.btn-outline-theme-7:hover {
    background: var(--color-theme-7);
    color: #fff;
}
/*==================================================
  TEXT COLORS
==================================================*/
.text-theme-1 {
    color: var(--color-theme-1) !important;
}

.text-theme-2 {
    color: var(--color-theme-2) !important;
}

.text-theme-3 {
    color: var(--color-theme-3) !important;
}

.text-theme-4 {
    color: var(--color-theme-4) !important;
}

.text-theme-5 {
    color: var(--color-theme-5) !important;
}

.text-theme-6 {
    color: var(--color-theme-6) !important;
}

.text-theme-7 {
    color: var(--color-theme-7) !important;
}
/*==================================================
  BACKGROUND COLORS
==================================================*/
.bg-theme-1 {
    background-color: var(--color-theme-1) !important;
}

.bg-theme-2 {
    background-color: var(--color-theme-2) !important;
}

.bg-theme-3 {
    background-color: var(--color-theme-3) !important;
}

.bg-theme-4 {
    background-color: var(--color-theme-4) !important;
}

.bg-theme-5 {
    background-color: var(--color-theme-5) !important;
}

.bg-theme-6 {
    background-color: var(--color-theme-6) !important;
}

.bg-theme-7 {
    background-color: var(--color-theme-7) !important;
}
/*==================================================
  BORDER COLORS
==================================================*/
.border-theme-1 {
    border-color: var(--color-theme-1) !important;
}

.border-theme-2 {
    border-color: var(--color-theme-2) !important;
}

.border-theme-3 {
    border-color: var(--color-theme-3) !important;
}

.border-theme-4 {
    border-color: var(--color-theme-4) !important;
}

.border-theme-5 {
    border-color: var(--color-theme-5) !important;
}

.border-theme-6 {
    border-color: var(--color-theme-6) !important;
}

.border-theme-7 {
    border-color: var(--color-theme-7) !important;
}

/*==================================================
  HOVER TEXT COLORS
==================================================*/
.hover-theme-1:hover {
    color: var(--color-theme-1) !important;
}

.hover-theme-2:hover {
    color: var(--color-theme-2) !important;
}

.hover-theme-3:hover {
    color: var(--color-theme-3) !important;
}

.hover-theme-4:hover {
    color: var(--color-theme-4) !important;
}

.hover-theme-5:hover {
    color: var(--color-theme-5) !important;
}

.hover-theme-6:hover {
    color: var(--color-theme-6) !important;
}

.hover-theme-7:hover {
    color: var(--color-theme-7) !important;
}

/*==================================================
  USER ICON COLOR
==================================================*/
.text-user-seated {
    color: var(--color-user-seated) !important;
}

.text-user-notseated {
    color: var(--color-user-notseated) !important;
}

.text-user-overload {
    color: var(--color-user-overload) !important;
}