@import url('html.css');

body {
    background-color: transparent;
    font: 300 14px/1.2rem Helvetica, Arial, sans-serif, var(--bs-body-font-family);
    color: #202020;
    margin-top: 35px;
}

.close {
    margin-top: -5px;
}

.hide {
    display: none !important;
}

.no-wrap {
    white-space: nowrap
}


/* ------------------------------------
   Logo
   ------------------------------------ */
.vl-logo {
    width: 50px;
    margin-left: -10px;
}


/* ------------------------------------
   Bootstrap overrides
   ------------------------------------ */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.table-danger {
    color: #777;
}

.table-pink {
    --bs-table-color: #332c50; /* Dark text color for contrast */
    --bs-table-bg: #dcbff6; /* Base color for normal state */
    --bs-table-border-color: #c6a8e6; /* Slightly darker border color */
    --bs-table-striped-bg: #ece4f8; /* Lighter shade for striped rows */
    --bs-table-striped-color: #332c50; /* Dark text color for striped rows */
    --bs-table-active-bg: #c1a2e1; /* Darker shade for active state */
    --bs-table-active-color: #332c50; /* Dark text color for active state */
    --bs-table-hover-bg: #d6c4f2; /* Slightly lighter shade for hover state */
    --bs-table-hover-color: #332c50; /* Dark text color for hover state */
    color: var(--bs-table-color);
    background-color: var(--bs-table-bg);
    border-color: var(--bs-table-border-color);
}

table.table-pink {
    color: var(--bs-table-color);
    background-color: var(--bs-table-bg);
    border-color: var(--bs-table-border-color);
}

table.table-pink thead th {
    color: var(--bs-table-color);
    background-color: var(--bs-table-bg);
    border-color: var(--bs-table-border-color);
}

table.table-pink tbody tr:hover {
    background-color: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color);
}

table.table-pink tbody tr.active {
    background-color: var(--bs-table-active-bg);
    color: var(--bs-table-active-color);
}

table.table-pink tbody tr:nth-of-type(odd) {
    background-color: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}


.btn-close {
    width: 0;
    height: 0;
}

/* ---- Navlinks for jobs ---- */

.bg-vlb {
    background-color: #bb0000;
}

.btn-navlinks {
    padding: 0.1rem 0.3rem 0.2rem;
    font-size: 0.8rem;
}

a.btn-nav-links {
    padding: 0.45em 0.65em 0.35em;
    font-size: 0.9em;
    line-height: 1;
    border-radius: 0.25rem;
    text-decoration: none;
}

/* Custom VL button */
.btn-vlb {
    color: #fff;
    background-color: #bb0000;
    cursor: pointer;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bb0000), color-stop(50%, #880000), to(#7b0000));
    background-image: linear-gradient(#bb0000, #880000 50%, #7b0000);
    background-repeat: no-repeat;
    -webkit-filter: none;
    filter: none;
    border: 1px solid #7b0000;
}

.btn-vlb:hover {
    color: #fff;
    background-color: #950000;
    border-color: #880000;
}

.btn-vlb:focus, .btn-vlb.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(197, 38, 38, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(197, 38, 38, 0.5);
}

.btn-vlb.disabled, .btn-vlb:disabled {
    color: #fff;
    background-color: #bb0000;
    border-color: #bb0000;
}

.btn-vlb:not(:disabled):not(.disabled):active, .btn-vlb:not(:disabled):not(.disabled).active,
.show > .btn-vlb.dropdown-toggle {
    color: #fff;
    background-color: #880000;
    border-color: #7b0000;
}

.btn-vlb:not(:disabled):not(.disabled):active:focus, .btn-vlb:not(:disabled):not(.disabled).active:focus,
.show > .btn-vlb.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(197, 38, 38, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(197, 38, 38, 0.5);
}

.btn-vlb:not(.disabled):hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a50000), color-stop(50%, #7d0000), to(#690000));
    background-image: linear-gradient(#a50000, #7d0000 50%, #690000);
    background-repeat: no-repeat;
    -webkit-filter: none;
    filter: none;
    border: 1px solid #7b0000;
}

/* content */
.section-title {
    border-bottom: gray 1px solid;
}

.months-label {
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.column-title, .months-label {
    border-bottom: gray 1px solid;
}

#guidelines {
    font-size: 1.2rem;
    line-height: 1.5rem;
    padding-bottom: 2rem;
}

#guidelines li {
    padding-top: 1rem;
}

.text-yellow {
    color: yellow !important;
}

.stats-interpreters {
    height: 375px;
}

.stats-clients, .stats-languages {
    height: 225px;
}

.chart-container {
    position: relative;
    height: 260px;
}

.chart-current-container {
    height: 580px;
}

.stats {
    line-height: 1.6rem;
}

.stats-months {
    width: 150px;
}

.pointer {
    cursor: pointer;
}

section {
    margin-bottom: 15px;
}

span.clearicon {
    position: relative;
    display: inline-flex;
    align-items: center;
}

span.clearicon span {
    position: absolute;
    display: block;
    right: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    color: #fff;
    background-color: #ccc;
    font: 13px monospace;
    text-align: center;
    line-height: 1em;
    cursor: pointer;
}

span.clearicon input {
    padding-right: 30px;
    box-sizing: border-box;
}

.tooltip-wrap {
    position: relative;
}

.tooltip-wrap .tooltip-primary,
.tooltip-wrap .tooltip-info,
.tooltip-wrap .tooltip-danger,
.tooltip-wrap .tooltip-warning,
.tooltip-wrap .tooltip-secondary,
.tooltip-wrap .tooltip-success {
    display: none;
    position: absolute;
    top: 0px;
    /*left: 5%;*/
    /*right: 5%;*/
    padding: 5px 8px;
    border-radius: 5px;
}

.tooltip-wrap:hover .tooltip-primary,
.tooltip-wrap:hover .tooltip-info,
.tooltip-wrap:hover .tooltip-danger,
.tooltip-wrap:hover .tooltip-warning,
.tooltip-wrap:hover .tooltip-seocndary,
.tooltip-wrap:hover .tooltip-success {
    display: block;
    white-space: nowrap;
}

.tooltip-wrap .tooltip-primary {
    background-color: var(--bs-danger-text-emphasis);
    color: #fff;
}

.tooltip-wrap .tooltip-info {
    background-color: var(--bs-info);
    color: #fff;
}

.tooltip-wrap .tooltip-danger {
    background-color: var(--bs-danger);
    color: yellow;
}

.tooltip-wrap .tooltip-warning {
    background-color: var(--bs-warning);
    color: black;
}

.tooltip-wrap .tooltip-success {
    background-color: var(--bs-success);
    color: yellow;
}

.tooltip-wrap .tooltip-secondary {
    background-color: var(--bs-secondary);
    color: #fff;
}

.cursor-pointer {
    cursor: pointer;
}

a.cursor-pointer {
    text-decoration: none;
}

.nav-tabs .nav-item .nav-link.active {
    color: var(--bs-primary) !important;
    font-weight: bold;
}

.unavailable {
    margin: 0;
}

@media (max-width: 1100px) {
    .unavailable {
        display: none;
    }
}

.schedule-modal-header {
    background-color: #6d2311;
}

.vl-tooltip {
    --bs-tooltip-bg: var(--bs-danger-text-emphasis);
    --bs-tooltip-color: var(--bs-white);
}

.font-pending {
    font-size: 1.5rem;
    font-weight: 400;
}

#nextDayCounterContainer {
    position: absolute;
    right: 0;
    /*transform: translateX(-50%);*/
    margin-top: -5px;
}

.deleted-cell {
    text-decoration: line-through;
    color: #999 !important;
}

.form-card-default {
    width: 40em;
}

/*--------------------- */
/* Alerts               */
/*--------------------- */

/* Enables scrolling in the job list container only */
#unassigned-jobs {
    overflow-y: auto;
}

/* Keeps the count badge visually aligned and non-scrolling */
#unassigned-job-count {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 140px;
}

.unassigned-banner, .absences-banner {
    overflow-y: auto;
    display: none;
}

.unassigned-banner {
    width: 500px;
}

.absences-banner {
    width: 350px;
}

.unassigned-visible, .absences-visible {
    display: block;
}

.unassigned-visible {
    height: 55px;
}

.unassagned-badge {
    font-size: 14px !important;
}

.pending-badge {
    font-size: 1rem !important;
}

.absences-visible {
    height: 75px;
}

.alert-hidden {
    display: none;
    height: 0;
}