body, html { height: 100%; width: 100%; user-select: none; -webkit-user-select: none;  -moz-user-select: none; }
body { position: relative; font-size: 22px; font-family: "Open Sans", sans-serif; margin: 0px; padding: 0px; }
form { margin: 0px; }
*:focus { outline: none; }
input { box-sizing: border-box; }
#loader { position: fixed; left: 50%; top: 50%; background-size: 100%;  width: 50px; height: 50px; z-index: 9999; display: none;
    margin-top: -25px; margin-left: -25px; }
#loader i { display: inline-block; width: 10px; height: 10px; border-radius: 10px; position: absolute; border: 2px solid #fff; box-sizing: border-box; animation: loading 1s linear infinite; }
@keyframes loading { 0% {transform: scale(1);} 20% {transform: scale(2);} 50% {transform: scale(0.5);} 100% {transform: scale(1);}}

.fa-abs:before, .fa-abs:after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); font-weight: 900; font-family: "Font Awesome 5 Free"; }
.fa-rel:before, .fa-rel:after { content: ""; position: relative; font-weight: 900; font-family: "Font Awesome 5 Free"; }
.display-none { display: none !important; }

.flex, .row { display: flex; }
/* .flex-center, .menu-box { display: flex; align-items: center; justify-content: center; }
.flex-column, .menu-box { display: flex; flex-direction: column; } */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-column { display: flex; flex-direction: column; }
.justify-between { display: flex; justify-content: space-between; }
.bold { font-weight: bold; }
.pointer { cursor: pointer; }

#site-wrapper { padding-top: 30px; overflow: hidden; }
.top-row { position: fixed; top: 0; height: 30px; display: flex; width: 100%; z-index: 5; font-size: 0.8em; border-bottom: 1px solid; }
.top-cell, .top-cell1 { position: relative; display: flex; align-items: flex-end; min-width: var(--cell-width); }
.top-cell1 { min-width: var(--cell-width-2); }
.top-cell > span { position: absolute; right: 55%; }

.job-moving #date-wrapper {  display: none; }
.job-moving #job-list-wrap { left: calc(100% - 25px); }
.job-moving #job-list .job-row:not(.move-job) { display: none; }
.job-moving #job-list-search-wrap { display: none; }

#time-line { position: fixed; left: calc(100vw / 20); z-index: 6; height: 100%; width: 2px; background: red; border: 1px solid yellow; transition: 0.5s linear all; top: 30px; }
#time-line-display { position: absolute; padding: 1px 5px; transition: 0.5s linear all; color: red; text-shadow: -1px 0 yellow, 0 1px yellow, 1px 0 yellow, 0 -1px yellow; border: 2px solid red; 
    border-radius: 10px; box-sizing: border-box; outline: 1px solid yellow; box-shadow: inset 0px 0px 0px 1px yellow; transform: translate(-50%,-95%); pointer-events: none; }

#menu-button { position: fixed; top: 0; padding-left: 5px; transition: all 0.3s ease-in; line-height: 30px; z-index: 7; font-weight: bold; cursor: pointer; }
#menu-options { position: fixed; top: 0; right: 100%; padding: 40px 10px 10px; z-index: 6; transition: 0.3s ease all; border-right: 1px solid; border-bottom: 1px solid; border-bottom-right-radius: 5px; font-size: 0.8em; 
    display: flex; flex-direction: column; gap: 10px; }
#menu-options:hover, #menu-button:hover + #menu-options, #menu-options:focus-within { transform: translateX(100%); }
.button-menu { position: relative; padding: 10px 20px 10px 40px; transition: 0.3s all ease; cursor: pointer; border-radius: 5px; font-weight: bold; }
.button-menu:before { left: 15px; }
#add-job-button:before { content: "\f0fe"; font-weight: 500; }
#job-import:before { content: "\f574"; }
#calendar-button:before { content: "\f073"; font-weight: 500; }
.calendar-event-add:before { content: "\f271"; font-weight: 500; }
#add-tech-button:before { content: "\f007"; }
#logout-button:before { content: "\f2f5"; }
#menu-search-wrap { position: relative; } 
#menu-search-wrap:before { content: "\f002"; left: 15px; }
#search-jobs { padding: 10px 20px 10px 40px; font-size: 1em; width: 200px; }

#date-wrapper { position: absolute; width: 250%; left: -125%; font-size: 1.3em; transition: all 0.3s ease-in; z-index: 1; line-height: 30px; border-radius: 5px; display: inline-flex; justify-content: space-between; }
#date-wrapper:hover { background: #fff; color: #00050A; }
#date-next:hover, #date-previous:hover { font-size: 0.8em; }
#date-next, #date-previous { position: relative; cursor: pointer; font-size: 0.6em; text-shadow: none; transition: all 0.1s ease-in; padding: 10px; color: #00050A; }
#date-previous:after { content: "\f053"; }
#date-next:after { content: "\f054"; left: 0; }

.tech-cell-wrap { padding: 5px; box-sizing: border-box; white-space: nowrap; overflow: hidden; min-width: var(--cell-width-2); }
.tech-cell { position: relative; width: 100%; height: 50px; border: 2px solid; font-size: 0.8em; border-radius: 5px; transition: all 0.3s ease-in; box-sizing: border-box; padding-left: 5px;
    display: flex; justify-content: space-between; flex-direction: column; }
.tech-cell .edit-tech-button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor: pointer; transition: all 0.3s ease-in; opacity: 0; }
.tech-cell:hover .edit-tech-button { opacity: 1; }
.cell-wrap { display: flex; border-left: 1px solid; border-bottom: 1px solid; }
.cell { position: relative; border-left: 1px solid; box-sizing: border-box; display: flex; align-items: center; padding: 3px; min-width: var(--cell-width); }
.cell-wrap > .cell:last-child { border-right: 1px solid; }
.cell-wrap > .cell.overtime { border-left-color: transparent !important; background: none !important; }
.cell-wrap > .cell.tech-leave { border-left-color: transparent !important; background: none !important; }

.job-row { position: absolute; display: flex; align-items: center; justify-content: space-between; min-height: 50px; border: 2px solid; border-radius: 5px; box-sizing: border-box; 
    transition: background, border 0.2s ease-in; font-size: 0.8em; z-index: 2; overflow: hidden; }
.day-current .job-row { cursor: grab; }
.job-row:before { content: attr(wash); position: absolute; right: 5px; top: 50%; transform: translateY(-50%); color: orange; font-weight: bold; z-index: 4; font-size: 0.7em; line-height: 1em; }
.job-row:hover:before { content: attr(wash-time); }
.job-row:after { content: attr(due-display); position: absolute; left: 0; transform: translateX(-2px); font-size: 0.85em; font-weight: bold; z-index: 4; transition: all 0.3s ease-in; writing-mode: vertical-lr; text-indent: -1px; }
.job-row.move-job { position: fixed !important; cursor: grabbing !important; }

.job-row.job-done:after { content: attr(job-done); color: rgba(144,238,144,1); }
.job-row.overdue:after { animation: 2s overdue infinite alternate; }
@keyframes overdue {100% { color: yellow; } 0% { color: red; }}
.job-row.hide-job, .job-row.hide-job:after { opacity: 0; transition: 0.5s ease all; }
/* .job-row:not(.move-job):hover { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 10px; } */
/* .job-row-duration { height: 100%; width: 10px; } */
.job-row:hover:after { opacity: 0; visibility: hidden; }
.job-row:hover .edit-job-button { visibility: visible; opacity: 1; }
.job-row .edit-job-button { visibility: hidden; opacity: 0; z-index: 4; cursor: pointer; transition: all 0.3s ease-in; padding: 3px; padding-left: 0; }

.job-row .data-display { position: absolute; left: 0; white-space: nowrap; }
.job-row .data-display:first-of-type { top: 0; }
.job-row .data-display:last-of-type { bottom: 0; }
.job-row .data-display:before { content: attr(data-1); display: inline-block; width: calc((var(--cell-width) * 2) - 5px); text-transform: uppercase; text-indent: 17px; }
.job-row .data-display:after { content: attr(data-2); display: inline-block; }
/* .job-row span { white-space: nowrap; overflow: hidden; display: inline-flex; } */
/* .job-row .data-display > span:first-child { text-indent: 17px; text-transform: uppercase; }
.job-row .data-display > span:last-child { padding-left: 3px; } */

#job-list-wrap { position: fixed; top: 30px; left: 100%; height: calc(100vh - 30px); z-index: 7; transition: 0.3s ease all; display: flex; flex-direction: column; gap: 10px; }
#job-list-wrap.open { left: calc(100% - 325px); }
#job-list { position: relative; width: 325px; height: 100%; overflow-y: auto; overflow-x: hidden; padding: 5px; box-sizing: border-box; border: 1px solid; border-radius: 10px; 
    display: flex; flex-direction: column; gap: 4px; transition: 0.3s ease all; }
#job-list .job-row { z-index: 10; position: relative; }
#job-list .job-row.hide-job { display: none !important; }
#job-list-search-wrap { z-index: 6; border-radius: 10px; position: relative; display: none; margin-bottom: 10px; }
#job-list-search-wrap:after { content: "\f002"; left: 15px; font-size: 0.8em; }
#job-list-search-wrap input { padding: 6px; font-size: 0.7em; height: 40px; border-radius: 10px; width: 325px; padding-left: 45px; text-transform: uppercase; }
#job-list-button { position: absolute; top: 50%; left: 0; transform: translate(-100%,-50%); height: 40px; width: 25px; cursor: pointer; border-top-left-radius: 5px; border-bottom-left-radius: 5px; 
    border: 1px solid; border-right: none; z-index: 6; overflow: hidden; transition: 0.3s all ease; font-size: 0.7em; font-weight: bold; }
#job-list-button:before { content: "\f0c9"; left: 50%; transform: translate(-50%, -50%); }
#job-list-wrap.open #job-list-button:before { content: "\f00d"; }
#job-list-wrap.open #job-list { height: calc(100% - 60px); }
#job-list-wrap.open #job-list-search-wrap { display: block; }

.menu-wrap { position: fixed; top: 0; width: 100%; height: 100%; z-index: 8; background: rgba(0,0,0,0.3); }
#ajax-message { position: fixed; right: 0; bottom: 0; z-index: 100; border-top: 2px solid; border-left: 2px solid; border-top-left-radius: 10px; padding: 20px; }
input[type="file"] { overflow: hidden; width: 300px; }
.menu-box { position: relative; border-radius: 5px; z-index: 7; border: 1px solid; overflow: hidden; }
.header { text-transform: uppercase; padding: 5px 20px; position: relative; font-weight: bold; }
.form-wrap { width: 300px; padding: 15px 20px; max-height: 80vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.text-wrap { display: flex; flex-direction: column; }
.text-wrap-title { font-size: 0.6em; padding-bottom: 3px; }
.button-wrap { padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.button-wrap > .text-button { width: 100%; }
.close-button { position: absolute; top: 50%; right: 15px; padding: 5px; cursor: pointer; font-size: 0.9em; transform: translateY(-50%); transition: 0.2s ease-in; }
.text-button { cursor: pointer; border-radius: 5px; border: 1px solid; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; 
    padding: 0 15px; transition: 0.2s all ease-in; height: 30px; font-size: 0.6em; position: relative; }
.small-button { cursor: pointer; border-radius: 5px; border: 1px solid; width: 20px; background: none; transition: all 0.2s ease-in; font-size: 0.7em; text-align: center; padding: 10px; }

.checkbox-label { position: relative; width: 12px; height: 12px; border: 1px solid; border-radius: 3px; cursor: pointer; margin-bottom: 5px; transition: 0.2s all ease-in; }
.checkbox:checked + .checkbox-label:after { content: '\f00c'; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); 
    font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.45em; }
.checkbox-label .text-wrap-title { padding-left: 20px; position: absolute; top: 0; }

.range-slider { height: 3px; border: none !important; margin: 10px; }
.range-slider .ui-slider-handle { cursor: pointer; height: 12px; width: 12px; top: -7px; margin-left: -7px; border: 2px solid; border-radius: 30px; transition: 0.2s background ease-in; }
.range-slider .ui-slider-range { height: 4px; top: -0.5px; }
.slide-display { display: flex; justify-content: space-between; padding: 0 5px; }
.slide-display-value { font-size: 0.8em; }

.text-input, .select-box { display: inline-block; width: 100%; font-size: 0.7em; padding: 6px; background: none; border: 1px solid; border-radius: 5px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.select-box { position: relative; padding: 4px 5px; cursor: pointer; appearance: none; }
.select-box-wrap { position: relative; font-size: 0.7em; }
.select-box-wrap:after { content: "\f078"; left: 90%; transition: 0.2s all ease-in; }
.select2-container .select2-selection--single { height: 34px; }
.select2-container--default .select2-selection--single {  border-radius: 5px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; }
.select2-selection__arrow b { display: none; }
.select2-dropdown { border: 1px solid; border-radius: 5px; font-size: 0.75em; padding: 5px; }
.select2-results li { border-radius: 5px; margin-bottom: 5px; }
.select2-results li:last-child { margin-bottom: 0; }
.select2-container--default .select2-results__option[aria-selected="true"] { border: 1px solid; border-radius: 5px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: none; }
/* select2-selection__placeholder */

.checkbox ~ .work-range, .checkbox ~ .slide-display { display: none; }
.checkbox:checked ~ .work-range, .checkbox:checked ~ .slide-display { display: flex; }
.leave-checkbox-label { border: 1px solid; cursor: pointer; border-radius: 3px; display: flex; margin: 10px 0; }
.leave-checkbox-label div { font-size: 0.8em; padding: 5px; width: 50%; text-align: center; }
.checkbox:checked ~ .leave-checkbox-label div:first-child { background: none; }

#datepicker { position: absolute; top: 0; right: 50%; width: 0; height: 30px; z-index: 4; padding: 0; border: none; }
#ui-datepicker-div { border: 1px solid; border-radius: 5px; font-size: 0.8em; width: 300px; box-sizing: border-box; }
#ui-datepicker-div .ui-widget-header { border: none !important; background: none !important; }
.ui-datepicker th { padding: 0; }
#ui-datepicker-div .ui-state-default { background: none; border: 1px solid; border-radius: 3px; }
#ui-datepicker-div .ui-datepicker-today > .ui-state-default { font-weight: bold; }

#calendar-menu { height: 100vh; padding: 10px; box-sizing: border-box; }
#calendar-wrapper { display: flex; flex-direction: column; font-size: 0.8em; border: 1px solid; box-sizing: border-box; height: calc(100% - 40px); }
#calendar-wrapper > div:first-child { border-top: none; }
.calendar-row > section:last-child { border-right: none; }
.calendar-row { display: flex; flex: 1; border-top: 1px solid; }
.calendar-cell { display: flex; flex-direction: column; border-right: 1px solid; width: 10vw; box-sizing: border-box; }
.day-header { line-height: 25px; padding: 5px; }
.day-counter { text-align: center; border-radius: 100%; width: 25px; height: 25px; font-size: 0.9em; display: inline-block; }
.day-name { float: right; }
.sub-month .day-counter, .sub-month .month-name { opacity: 0.4; }
.leave-cell { height: 20px; position: relative; box-sizing: border-box; padding: 0 0 2px 2px; }
.leave { height: 18px; cursor: pointer; font-size: 0.7em; line-height: 18px; padding-left: 5px; position: relative; z-index: 1; box-sizing: border-box; border-left: 5px solid; }
.calendar-change { display: inline-flex; align-items: center; height: 30px; font-size: 0.9em; margin-bottom: 10px; border-radius: 5px; }
.calendar-change > div:first-of-type:after { content: "\f053"; }
.calendar-change > div:last-of-type:after { content: "\f054"; }
.change-month { padding: 10px; font-size: 0.7em; cursor: pointer; width: 10px; transition: 0.1s all ease-in; position: relative; }
.change-month:hover { font-size: 0.9em; }
#calendar-menu .calendar-event-add { margin-left: 15px; padding-left: 35px; }
#calendar-menu .calendar-event-add:before { left: 15px; }

/* { background: #1f6feb; } */
.menu-box, .select2-dropdown, #menu-button:hover + #menu-options, #job-list-wrap.open #job-list, #job-list-button, #job-list-search-wrap, #ui-datepicker-div { box-shadow: 0 8px 24px #00050A; } 

.bg-colour, body, .menu-box, 
    .select2-container .select2-selection, 
    .select2-dropdown, 
    .range-slider .ui-slider-handle,
    #ui-datepicker-div { background: #00050A; }

.cell { border-color: rgba(255,255,255,0.2); }

.cell-wrap, .checkbox-label, .text-input,
    .select2-container .select2-selection,
    .cell-wrap > .cell:nth-child(2n+1),
    .cell-wrap > .cell:last-child,
    .cell-wrap > .cell.end-cell { border-color: rgba(255,255,255,0.5); }

.top-row, #menu-options, #job-list, .menu-box, .small-button, .select-box, #calendar-wrapper, .calendar-row, .calendar-cell, .text-input:focus, .leave-checkbox-label, #job-list-button,
    .checkbox-label:hover,
    .range-slider .ui-slider-handle, 
    #ui-datepicker-div,
    #ui-datepicker-div .ui-state-default,   
    .checkbox:checked + .checkbox-label,  
    .select2-dropdown, 
    .select2-container--open .select2-selection,
    .select2-container--default .select2-results__option[aria-selected="true"],
    .text-button
    { border-color: rgba(255,255,255,0.9); } 


.range-slider .ui-slider-range { background: rgba(255,255,255,0.7); color: #00050A; }

.range-slider, #ui-datepicker-div .ui-state-default:hover, .checkbox-label:hover { background: rgba(255,255,255,0.4); }

.cell-wrap > .cell.break, .text-input:focus, .select2-container--focus .select2-selection,
    .select2-container--default .select2-results__option--highlighted[aria-selected]     
    { background: rgba(255,255,255,0.15); }



body, .button-menu, .text-button, 
    .checkbox:checked ~ .leave-checkbox-label div:first-child,
    .select2-container--default .select2-results__option--highlighted[aria-selected],
    #ui-datepicker-div .ui-widget-header,
    #ui-datepicker-div .ui-state-default:hover
    { color: rgba(255,255,255,0.9); }

.menu-box, .small-button, .text-input, .checkbox-label .text-wrap-title,
    .select2-dropdown,
    .select2-container--default .select2-selection--single .select2-selection__rendered
     { color: rgba(255,255,255,0.7); }
    
#ui-datepicker-div .ui-state-default { color: rgba(255,255,255,0.5); }

.checkbox:checked + .checkbox-label:hover { color: rgba(255,255,255,0.9); background: #00050A; }


.header, .current-day .day-counter, .calendar-change, .small-button:hover, #job-list-button:hover, #job-list-wrap.open #job-list-button, 
    .checkbox:checked + .checkbox-label, 
    .leave-checkbox-label div:first-child, 
    .range-slider .ui-slider-handle:hover,
    .range-slider .ui-state-focus,
    .checkbox:checked ~ .leave-checkbox-label div:last-child,     
    .select2-container--default .select2-results__option[aria-selected="true"],
    #ui-datepicker-div .ui-state-active,
    .text-button:hover,
    #ui-datepicker-div .ui-datepicker-today > .ui-state-default
    { background: rgba(255,255,255,0.9); color: #00050A; }


#ui-datepicker-div .ui-datepicker-today > .ui-state-active { color: #00050A; }
#job-list-wrap.open #job-list-button:hover { color: #da3633; }
.close-button:hover { color: #da3633; }
.delete-button { border-color: #da3633; }
.delete-button:hover { background: #da3633; color: #00050A; }
#ajax-message.error { border-color: #da3633; background: rgba(218,54,51,0.2) }
.button-menu:hover, .button-menu:focus { background: rgba(255,255,255,0.9); color: #00050A; }
.submit-button, .small-button.job-done { border-color: #39d353; background: none; }
.submit-button:hover, .submit-button:focus, .small-button.job-done:hover, .small-button.job-done:focus { background: #39d353; color: #00050A; }
.small-button.washed { border-color: rgba(255,165,0,1); }
.small-button.washed:hover { background: rgba(255,165,0,1); color: #00050A; }
.leave-hover { background: rgb(255,165,0,1) !important; }
#ajax-message.warning { border-color: rgba(255,165,0,1); background: rgb(255,165,0,0.2); }
.cell-wrap > .cell.hover-cell-yes,
#job-list.hover-cell-yes { background: rgba(144,238,144,0.4) !important; }
.cell-wrap > .cell.hover-cell-no { background: rgb(255,102,102,0.4) !important; }
.job-row.job-done, #ajax-message.success { border-color: rgba(144,238,144,1) !important; background: rgba(144,238,144,0.2); }

.edit-job-button:hover i, .edit-tech-button:hover i { animation: 2s spin linear infinite; }
@keyframes spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}