html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

main-row.row-selected {
    background-color: #e2e5f9 !important
}

tr.row-selected {
    background-color: #f0edff !important;
}


#scales-list tr{
    user-select : none !important;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #F0F2F5
}

.table-select-inner {
    min-height: 0px !important;
    font-size: 0.875rem !important;
    border-radius: 0.375rem !important;
    border: 1px solid #d5d5d5 !important;
    padding: 0px !important;
}

.hide-element {
    display:none !important;
}

.shift-tab{
    cursor:pointer;
}

.shift-tab .shift-tab-text {
    font-weight: 300;
    color: #6b6d71;

}


.shift-tab.selected .shift-tab-text {
    font-weight: 500 !important;
    color: #036489 !important;
}

.shift-tab .tab-indicator{
    opacity:0;
}

.shift-tab.selected .tab-indicator{
    opacity: 1 !important;
}

.shift-tab:hover .tab-indicator{
    opacity:0.3
}

.shift-tab-text{
    font-size:14px;
}

.shift-tab.disabled{
    opacity:0.3 !important;
    cursor: not-allowed !important;

}

.shiftpick-tab-container{
    border-bottom:1px solid lightgray;
}

.scalelist-totalcost-indicator {
    background-image: linear-gradient(180deg, #00A1DE 0%, #1A206D 100%) !important;
    width: 25px;
    height: 25px;
    border-radius: 15px;
    box-shadow: 0px 2px 4px lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
}

#requestupdatehistorymodal.modal {
    --bs-modal-width: 900px !important;
}
#requestupdatehistorymodal table td{
    border-bottom-width: 0px !important;
}
.table-edit-button {
    transition: transform 0.1s ease-in;
}
.table-edit-button:hover{
    transform: rotate(5deg) scale(1.1);
}

.timeline-point-indicator {
    background-color: #00A1DE;
    position:relative;
    width: 25px;
    position: absolute;
    height: 25px;
    top:20px;
    right: -12.5px;
    border-radius: 20px;
    box-shadow: 0px 2px 6px 0px #9f9c9c;
}

.dataTables_processing {
    background-color: white !important;
    z-index : 10
}

.timeline-point-state-indicator {
    width: 23px;
    height: 23px;
    cursor: pointer;
    border-radius: 20px;
    background-color: white;
    outline: 1px solid #acb1b3;
    box-shadow: 0px 2px 6px 0px #9f9c9c;
    transition: all 0.1s ease-in;
    z-index: 1;
}



.shift-time-indicator {
    bottom: -8px;
    width: 35px;
    height: 16px;
    box-shadow: 0px 1px 4px 0px #9b9b9b;
    border-radius: 8px;
    z-index: 1;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #00A1DE;
    background-color: #fbfbfb;
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.1s ease-in;
}


.shift-time-indicator.shownHover {
    z-index: 1 !important;
    opacity: 0.6 !important;
}

.shift-time-indicator.shownSelected {
    z-index: 2 !important;
    opacity: 1 !important;
}

.timeline-point-state-indicator.selected .shift-time-indicator{
    opacity:1 !important;
    z-index:2 !important;
}

.timeline-point-state-indicator:hover .shift-time-indicator {
    opacity: 1 !important;
    z-index: 1 !important;
}


.local-config-add{
    width:30px;
    height:30px;
    border-radius:15px;
}

.local-config-number-input {
    border: 1px solid lightgray !important;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 0px #f1f1f1;
    width:50px;
    text-align: center;
}

.local-config-time-input {
    border: 1px solid lightgray !important;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 0px #f1f1f1;
    width: 110px;
    text-align: center;
}


.time-action-input {
    width: 40px;
    height: 30px;
    border: 1px solid lightgray !important;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 0px #f1f1f1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .time-action-input:hover {
        background-color: #f5f5f5 !important;
    }

.flatpickr-time input {
    cursor: default !important;
}


.shiftpick-inputs-container .input-group.input-group-dynamic .form-control[disabled], .input-group.input-group-static .form-control[disabled] {
    background-image: linear-gradient(0deg, #1A206D 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, rgba(209, 209, 209, 0) 0) !important;
}

.timeline-point-state-indicator.selected {
    background-color: #1A206D;
    outline: 0px solid gray !important
}

.timeline-point-state-indicator.selected .shift-icon {
      color: white !important;
}

.timeline-point-state-indicator:hover {
    background-color: #1A206D;
    outline: 0px solid gray !important
}

.timeline-point-state-indicator:hover .shift-icon {
    color: white !important;
}

.request-approval-container {
    display: flex;
    gap: 10px;
    position: absolute;
    right: 0px;
    top: 0px;
}

.flex-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.approval-container {
    box-shadow: 0 3px 3px 0 rgba(26, 32, 109, 0.15), 0 3px 1px -2px rgba(26, 32, 109, 0.2), 0 1px 5px 0 rgba(26, 32, 109, 0.15);
    border-radius: 5px;
    background-image: linear-gradient(180deg, #00A1DE 0%, #1A206D 100%) !important;
    height: 23px;
    width: 23px;
    z-index: 1;
    position: relative;
    transition: all 0.2s ease-in;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
}

.approval-container:hover {
    transform: scale(1.1);
}

.express-indicator-container {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 23px;
    width: 23px;
    border-radius: 20px;
    background-image: linear-gradient(180deg, #00A1DE 0%, #1A206D 100%) !important;
    font-size: 14px;
    z-index: 1;
    color: white;
    transition: all 0.2s ease-in;
}
.express-container:hover .express-indicator-container {
    transform: scale(1.1);
}

.express-container {
    display:flex;
    left: -5px;
    bottom: -5px;
    position: absolute;
}

.express-container:hover .express-time-indicator-container {
    width: 140px !important;
}

.express-time-text {
    margin-bottom: 0px;
    font-size: 13px;
    text-align: center
}
.express-time-indicator-container {
    background-color: white;
    box-shadow: 0px 2px 6px lightgray;
    overflow:hidden;
    border-radius: 3px;
    height: 20px;
    margin-left: -8px;
    width: 0px;
    transition: all 0.2s ease-in;
}
.approval-text {
    position: absolute;
    font-size: 9px;
    top: 2px;
    left: 2px;
    color: white;
    font-weight: 500;
    margin-bottom: 0px;
    line-height: 1;
}

.vscomp-value {
    color: #7b809a !important;
}

#user-establishment-container .vscomp-arrow{
    right:7px !important;
    transition: 0.2s all ease-in;
}

#user-establishment-container .vscomp-arrow::after {
    transform: rotate(0deg) !important;
    content: "\f107" !important;
    font: normal normal normal 14px / 1 FontAwesome !important;
    position: absolute !important;
    color: #7b809a !important;
    pointer-events: none !important;
    transition: 0.3s ease !important;
    border: 0px !important;
}

.approval-check {
    margin-top: 3px;
    font-size: 10px;
    height: 70%;
    width: 70%;
    color: white;
}

.isPendent {
    opacity: 0.4 !important;
    pointer-events : none !important;
}

.appointments-cards {
    opacity: 1;
    pointer-events: auto;
    display: flex !important;
    flex-direction: row !important;
    height: 70px !important;
    cursor: pointer !important;
    background-color: rgba(247, 247, 247, 0.63) !important
}

.btn-outline-light {
    --bs-btn-color: #767676 !important;
    --bs-btn-border-color: #767676 !important;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #767676 !important;
    --bs-btn-hover-border-color: #767676 !important;
    --bs-btn-focus-shadow-rgb: 240, 242, 245;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #767676 !important;
    --bs-btn-active-border-color: #767676 !important;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #767676 !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #767676 !important;
    --bs-gradient: none;
}


.list-approval-container{
    display:flex;
    gap:10px;
    height:35px;
}

.approval-separator {
    height: 100%;
    width: 1px;
    background-color: #d9d9d9;
}