/* -------------------------------------------------------------------------- */
/* TOP LEVEL STYLING */
body {
    font-family: "Quicksand", sans-serif!important;
    background-color: #101827;
}

.banner-row {
    background-color: #1a253f;
    height: 80px;
}

.banner-logo {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjcuMy4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJNQ0lfTE9HTyIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MDAwIDIyNjIiIHN0eWxlPSJjb2xvcjogcmdiKDk1LCA5NSwgOTUpOyBmaWxsOiByZ2IoOTUsIDk1LCA5NSk7IiB4bWw6c3BhY2U9InByZXNlcnZlIiBmaWxsPSIjNUY1RjVGIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIiBmaWxsPSIjNUY1RjVGIj4KCS5zdDB7ZmlsbDojRkY2NjAwO30KPC9zdHlsZT4KPGcgZmlsbD0iIzVGNUY1RiI+Cgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjA3My41LDY5LjNjMzksMzYuOSw1OC41LDgyLjcsNTguNSwxMzcuNXYxODI5LjVjMCw1NC44LTE3LjksMTAwLjYtNTMuNywxMzcuNSAgIGMtMzUuOCwzNi45LTgzLjIsNTUuMy0xNDIuMiw1NS4zYy01OSwwLTEwNi45LTE3LjktMTQzLjgtNTMuN2MtMzYuOS0zNS44LTU1LjMtODIuMi01NS4zLTEzOVY3NjIuOWwtNTIxLjQsNzk2LjMgICBjLTIxLjEsMjUuMy00NS4zLDQ1LjgtNzIuNyw2MS42Yy0yNy40LDE1LjgtNTUuOCwyMi43LTg1LjMsMjAuNWMtMjcuNCwyLjEtNTQuOC00LjctODIuMi0yMC41Yy0yNy40LTE1LjgtNTEuNi0zNi4zLTcyLjctNjEuNiAgIEwzODEuNCw3MzQuNHYxMzAxLjhjMCw1Ni45LTE2LjksMTAzLjItNTAuNiwxMzljLTMzLjcsMzUuOC03OCw1My43LTEzMi43LDUzLjdjLTUyLjcsMC05NS45LTE4LjQtMTI5LjYtNTUuMyAgIGMtMzMuNy0zNi44LTUwLjYtODIuNy01MC42LTEzNy41VjIwNi44YzAtNTIuNiwxOS41LTk4LDU4LjUtMTM1LjlDMTE1LjQsMzMsMTYyLjMsMTQsMjE3LjEsMTRjMzEuNiwwLDYzLjIsNy45LDk0LjgsMjMuNyAgIGMzMS42LDE1LjgsNTUuOCwzNi4zLDcyLjcsNjEuNmw2ODguOCwxMDU4LjVMMTc4MS4yLDk5LjNjMTYuOC0yNS4zLDM5LjUtNDUuOCw2Ny45LTYxLjZTMTkwNi41LDE0LDE5MzYsMTQgICBDMTk4OC42LDE0LDIwMzQuNCwzMi41LDIwNzMuNSw2OS4zeiIgZmlsbD0iIzVGNUY1RiIvPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNTIuMSwyODUuOGMwLDQ0LjItMTUuOCw4Ny40LTQ3LjQsMTI5LjZjLTMzLjcsNDQuMi03Ni45LDY2LjQtMTI5LjYsNjYuNGMtMzUuOCwwLTcxLjYtOS41LTEwNy40LTI4LjQgICBjLTEwMy4yLTQ4LjQtMjE0LjktNzIuNy0zMzQuOS03Mi43Yy0xNDcuNSwwLTI3NiwzMS4xLTM4NS41LDkzLjJjLTEwOS42LDYyLjItMTkzLjgsMTQ5LjYtMjUyLjgsMjYyLjMgICBjLTU5LDExMi43LTg4LjUsMjQxLjctODguNSwzODcuMWMwLDI0OC42LDY2LjgsNDM3LjEsMjAwLjYsNTY1LjZjMTMzLjgsMTI4LjUsMzA5LjEsMTkyLjcsNTI2LjEsMTkyLjcgICBjMTI4LjUsMCwyNDAuMS0yNC4yLDMzNC45LTcyLjdjMzcuOS0xNi44LDcxLjYtMjUuMywxMDEuMS0yNS4zYzU0LjgsMCwxMDEuMSwyMy4yLDEzOSw2OS41YzMxLjYsNDAsNDcuNCw4My4yLDQ3LjQsMTI5LjUgICBjMCwzMy43LTguNCw2NC4zLTI1LjMsOTEuNmMtMTYuOSwyNy40LTQxLjEsNDguNS03Mi43LDYzLjJjLTE2NC4zLDgyLjItMzM5LjIsMTIzLjItNTI0LjUsMTIzLjJjLTIwNi41LDAtMzk2LjEtNDMuNy01NjguOC0xMzEuMSAgIGMtMTcyLjgtODcuNC0zMTAuNy0yMTYuNC00MTMuOS0zODcuMWMtMTAzLjItMTcwLjYtMTU0LjgtMzc3LjEtMTU0LjgtNjE5LjNjMC0yMTQuOSw0OS00MDcuNiwxNDYuOS01NzguMiAgIGM5OC0xNzAuNiwyMzMuMy0zMDMuOCw0MDYtMzk5LjdDMzIyMC45LDQ5LjMsMzQxNS44LDEuNCwzNjMyLjgsMS40YzE4Ny41LDAsMzYxLjMsNDEuMSw1MjEuNCwxMjMuMiAgIEM0MjE5LjQsMTU4LjMsNDI1Mi4xLDIxMiw0MjUyLjEsMjg1Ljh6IiBmaWxsPSIjNUY1RjVGIi8+Cgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDkyMiwyMTczLjdjLTQwLDM2LjktODYuNCw1NS4zLTEzOSw1NS4zYy01Ni45LDAtMTAzLjgtMTguNC0xNDAuNi01NS4zYy0zNi45LTM2LjgtNTUuMy04Mi43LTU1LjMtMTM3LjUgICBWMjA5LjljMC01NC44LDE5LTEwMC42LDU2LjktMTM3LjVjMzcuOS0zNi44LDg2LjQtNTUuMywxNDUuNC01NS4zYzUyLjYsMCw5OCwxOC41LDEzNS45LDU1LjNjMzcuOSwzNi45LDU2LjksODIuNyw1Ni45LDEzNy41ICAgdjE4MjYuNEM0OTgyLDIwOTEuMSw0OTYyLDIxMzYuOSw0OTIyLDIxNzMuN3oiIGZpbGw9IiM1RjVGNUYiLz4KPC9nPgo8L3N2Zz4=");
    background-repeat: no-repeat;
    background-position: center center;
    background-origin: content-box;
    float: left;
    width: 125px;
    height: 36px;
    margin-top: 6px;
}

.rocks-secondary-background {
    background-color: #1a253f;
}

.no-border-dark {
    border-color: #1a253f;
    background-color: #1a253f;
}

.card-body.hovered {
    background-color: #5c636a;
    border-radius: 6px;
}

.rocks-form-input {
    font-size: 24px;
    color: white;
    background-color: #374151;
    border: 1px solid #374151;
}
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* TEAMS STATUS ICONS */

/* Wrapper for image and SVG */
.image-wrapper {
    position: relative;
    display: inline-block;
    float: left;
    margin-top: 6px;
}

/* Style for the image */
.image-wrapper img {
    display: block;
}

/* Style for the SVG overlay */
.image-wrapper .svg-overlay {
    position: absolute;
    /*    top: 10px; /* Adjust to your preferred position */
    /*    left: 10px; /* Adjust to your preferred position */
    bottom: 0;
    right: 4px;
    width: 20px; /* Size of the SVG */
    height: 20px; /* Size of the SVG */
}
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* BUTTON STYLES */

.blue-button {
    color: white;
    background-color: #0070c0;
    border: none;
    font-size: 24px!important;
    width: 100%;
}

.buttonText {
    font-family: Quicksand, 'Font Awesome 6 Free';
}

.red-button {
    color: white;
    background-color: #C41E3A;
    border: none;
    font-size: 24px;
    width: 100%;
}
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* DASHBOARD FILTER ICONS */

.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px; /* Adjust size as needed */
    height: 58px;
    border-radius: 50%; /* Makes it a circle */
    background-color: #60aeff; /* Circle background color */
    color: #fff; /* Icon color */
}

.icon-stroke {
    color: white; /* Icon color */
    text-shadow:
        -1px -1px 0 black,
        1px -1px 0 black,
        -1px 1px 0 black,
        1px 1px 0 black; /* Create an outline */
}
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* MAIN DATATABLE STYLES */

div.dt-processing {
    width: 500px;
    margin-left: -250px;
}

table.dataTable th.dt-nowrap {
    color: white;
    background-color: #0070c0;
}

#employees_table_wrapper > div.row.mt-2.justify-content-between.dt-layout-table > div > div > div.dt-scroll-head {
    border-radius: 6px 6px 0 0;
}

#employees_table > tbody > tr > td,
#employees_table_wrapper > div.row.mt-2.justify-content-between.dt-layout-table > div > div > div.dt-scroll-head > div > table > thead > tr > th {
    padding: 14px;
}

#employees_table > tbody > tr:nth-child(even) {
    color: white;
    background-color: #374151;
}

#employees_table > tbody > tr:nth-child(odd) {
    color: white;
    background-color: #1f2937;
}

#employees_table > tbody > tr:hover {
    color: #374151;
    background-color: #cccccc;
    font-weight: bold;
}

#employees_table > tbody > tr.selected {
    color: white;
    background-color: #0033ff;
}

/* MAIN FILTER BUTTONS */

#table_div > div > div:nth-child(1) > div:nth-child(2) > div > div:hover, 
#table_div > div > div:nth-child(1) > div:nth-child(3) > div > div:hover, 
#table_div > div > div:nth-child(1) > div:nth-child(4) > div > div:hover, 
#table_div > div > div:nth-child(1) > div:nth-child(5) > div > div:hover, 
#table_div > div > div:nth-child(1) > div:nth-child(6) > div > div:hover {
    background-color: #5c636a;
    border-radius: 6px;
}


.dt-info {
    color: white;
}

#employees_table_wrapper > div:nth-child(1) > div > div > label {
    color: white;
    font-size: 24px;
}

#dt-search-0 {
    font-size: 24px;
    min-width: 330px;
}

#employees_table_wrapper > div:nth-child(1) {
    margin-bottom: 18px;
}

/* -------------------------------------------------------------------------- */
/* BOOTSRAP MODAL STYLES */
.modal-content {
    background-color: #101827;
    color: white;
    border: 1px solid #666666;
}

.modal-header {
    border-bottom-color: #666666;
}

.modal-footer {
    border-top-color: #666666;
    display: block;
}

div.modal-footer > div > div > button {
    font-size: 24px;
}

.tag-employee {
    background-color: #0070c0;
    border-radius: 6px;
    font-size: 24px;
    font-weight: bold;
    padding: 8px;
    padding-left: 12px;
    margin: 4px;
    margin-bottom: 4px;
}

.tag-employee-disabled {
    background-color: #374151;
    color: #222222;
    font-style: italic;
    border-radius: 6px;
    font-size: 24px;
    font-weight: bold;
    padding: 8px;
    padding-left: 12px;
    margin: 4px;
    margin-bottom: 4px;
}

/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* CHOSEN DROP DOWN SELECT PLUGIN */
#chosen-button-container i {

    font-style: normal!important;
}

#chosen-button-container > div {
    width: 100%;

}

#chosen-button-container > div > button {
    font-size: 24px;
    background-color: #0070c0;
    color: white;
    border: none;
}

#chosen-button-container, .chosen-container {
    margin-top: 8px;
}

.chosen-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 24px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.chosen-choices {
    font-size: 1rem;
    border-radius: 6px!important;
    padding: 4px!important;
    background-color: #374151!important;
}

.chosen-container-multi .chosen-choices {
    background-image: none;
    font-size: 22px;
    border: none;

}

li.search-choice {
    padding-top: 8px!important;
    padding-bottom: 8px!important;
    padding-left: 12px!important;
    padding-right: 22px!important;
}

#selectedTags_chosen > ul > li > input {
    height: 40px;
    background-color: #374151!important;
    border: none;
    padding-left: 12px;
}

#chosen-button-container > div > button:nth-child(1) {
    border-radius: 6px;
}

#chosen-button-container > div:nth-child(2), 
#chosen-button-container > div:nth-child(3) {
    display: none;
}

/* -------------------------------------------------------------------------- */

#employees_table_wrapper > div:nth-child(1) > div.d-md-flex.justify-content-between.align-items-center.dt-layout-start.col-md-auto.me-auto {
    align-items: end!important;
    color: #f1f1f1;
}


/* -------------------------------------------------------------------------- */

.sms-employee {
    background-color: #0070c0;
    border-radius: 6px;
    font-size: 24px;
    font-weight: bold;
    padding: 8px;
    padding-left: 12px;
    margin: 4px;
    margin-bottom: 4px;
}

.sms-employee-disabled {
    background-color: #374151;
    color: #222222;
    font-style: italic;
    border-radius: 6px;
    font-size: 24px;
    font-weight: bold;
    padding: 8px;
    padding-left: 12px;
    margin: 4px;
    margin-bottom: 4px;
}