body, html { height: 100%; width: 100%; user-select: none; -webkit-user-select: none;  -moz-user-select: none; }
body { font-size: 22px; font-family: "Open Sans", sans-serif; margin: 0px; padding: 0px; background: #00050a; color: rgba(255,255,255,0.9); position: relative; }

form { margin: 0px; }
input[type="file"] { overflow: hidden; width: 300px; }
#loader { background: url("../images/ajax-loader.gif"); background-size: 100%; display: none; width: 50px; height: 50px; position: fixed; z-index: 9999; left: 50%; top: 50%; 
    margin-top: -25px; margin-left: -25px; }
.display-none, .job-row-screen.hide-job { display: none !important; }
.display-flex { display: flex; }
.bold { font-weight: bold; }

#site-wrapper { padding-top: 30px; overflow: hidden; }
.top-row { position: fixed; display: flex; top: 0; height: 30px; width: 100%; z-index: 5; font-size: 0.8em; border-bottom: 1px solid rgba(195,241,238,0.9); 
    background: #00050a; }
.top-cell, .top-cell1 { flex: 1; position: relative; display: flex; align-items: flex-end;  }
.top-cell1 { flex: 2 !important; padding-right: 5px; }
.top-cell > span { position: absolute; right: 1.65vw; }

#time-line { position: fixed; left: calc(100% / 18); z-index: 5; height: 100%; width: 2px; background: red; border: 1px solid yellow; transition: 0.5s linear all; }
#time-line-display { position: absolute; top: -24px; left: -33px; line-height: 22px; font-size: 1.2em; color: red; transition: 0.5s linear all;
    text-shadow: -1px 0 yellow, 0 1px yellow, 1px 0 yellow, 0 -1px yellow; }

#menu-button { position: fixed; top: 0; z-index: 7; cursor: pointer; padding-left: 17px; transition: all 0.3s ease-in; font-size: 1.2em; line-height: 30px; }
#date-wrapper:hover, .button-menu:hover { 
        text-shadow: 5px 0px 2px rgba(202,33,190,1), -4px 0px 5px rgba(48,252,255,1), 5px 0px 10px rgba(49,122,255,1); }
#menu-options { left: -500px; top: 0; padding: 40px 20px 10px 20px; z-index: 6; position: fixed; display: flex; flex-direction: column; transition: 0.3s ease all; 
    background: rgba(0,0,0,0.8); border-right: 1px solid rgba(195,241,238,0.9); border-bottom: 1px solid rgba(195,241,238,0.9); border-bottom-right-radius: 5px; }
#menu-options:hover, #menu-button:hover + #menu-options { left: 0; }
.button-menu { position: relative; transition: 0.3s all ease; cursor: pointer; padding: 5px 5px 5px 35px; margin-bottom: 10px; }
.button-menu:before { content: ""; font-weight: 900; font-family: "Font Awesome 5 Free"; position: absolute; top: 49%; left: 0; transform: translateY(-50%); }
#add-job-button:before { content: "\f0fe"; font-weight: 500; }
#job-import:before { content: "\f574"; }
#calendar-button:before { content: "\f073"; font-weight: 500; }
#tech-leave:before { content: "\f271"; font-weight: 500; }
#add-tech-button:before { content: "\f007"; }
#logout-button:before { content: "\f2f5"; }

#date-wrapper { position: absolute; width: 250%; text-align: center; left: -125%; font-size: 1.3em; top: 0; transition: all 0.3s ease-in; z-index: 1; line-height: 28px;
    background: #00050a; }
#date-wrapper:hover div { opacity: 0.5; }
#date-next:hover, #date-previous:hover { opacity: 1 !important; }
#date-current { cursor: pointer; }
#date-next, #date-previous { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); font-size: 0.9em; opacity: 0; text-shadow: none; 
    transition: all 0.3s ease-in; padding: 3px; }
#date-next { right: 0; }
#date-previous { left: 0; }

#row-wrapper { position: relative; }
.name-cell-wrapper { flex: 2 !important; padding: 4px; display: flex; border-right: 1px solid rgba(195,241,238,0.9); }
.name-cell { position: relative; border: 2px solid #fff; display: flex; justify-content: space-between; flex-direction: column; font-size: 0.8em; border-radius: 5px; 
    width: 100%; height: 50px; transition: all 0.3s ease-in; }
.name-cell > span { margin-left: 5px; }
#edit-tech-button { opacity: 0; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor: pointer; transition: all 0.3s ease-in; }
.name-cell:hover #edit-tech-button { opacity: 1; }
#edit-tech-button:hover { text-shadow: 5px 0px 2px rgba(202,33,190,0.9), -4px 0px 5px rgba(48,252,255,0.9), 5px 0px 10px rgba(49,122,255,1); }

.cell { flex: 1; position: relative; border-left: 1px solid rgba(195,241,238,0.2); box-sizing: border-box; border-bottom: 1px solid rgba(195,241,238,0.5); }
.row > section:nth-child(2n) { border-left: 1px solid rgba(195,241,238,0.5); }
.row > section:last-child { border-right: 1px solid rgba(195,241,238,0.5); }
.break { background: rgba(195,241,238,0.15); }
#row-wrapper .overtime { background: none; border-left-color: rgba(0,0,0,0); }
#row-wrapper .end-cell { border-left-color: rgba(195,241,238,0.5); }
#row-wrapper .tech-leave { background: none; border-left-color: rgba(0,0,0,0); }
.hover-cell-yes { background-color: rgba(144,238,144,0.4) !important; }
.hover-cell-no { background: rgb(255,102,102,0.4) !important; }
/* .brand-divide {  } */

.job-row { position: absolute; display: flex; width: calc(100% + 1px); height: 100%; cursor: grab; }
.job-row.move-job { position: fixed; height: 50px; width: unset; cursor: grabbing !important; }
.job-row.hide-job > section, .job-row.hide-job:after, .job-row.hide-job:before { opacity: 0; transition: 0.5s ease all; }
.job-row > section:first-of-type { min-width: calc(100% - 3.5px); border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-left: 2px solid #fff; margin-left: 3px;
    display: flex; align-items: center; z-index: 3; }
.job-row > section:last-of-type  { min-width: calc(100% - 3.5px); border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right: 2px solid #fff; }   
.job-cell { position: relative; height: 50px; min-width: 100%; z-index: 2; font-size: 0.8em; box-sizing: border-box; top: 50%; transform: translateY(-50%);
    border-top: 2px solid #fff; border-bottom: 2px solid #fff; transition: background 0.2s ease-in; }
.job-row > section:nth-child(3) { z-index: 3; }
.job-done .job-cell { border-color: rgba(144,238,144,1) !important; background: rgba(144,238,144,0.15); box-shadow: none !important; }
.job-row:after { content: attr(due-display); position: absolute; left: -11px; font-size: 0.7em; font-weight: bold; top: 50%; width: 50px; text-align: center;
    transform: translateY(-50%) rotate(90deg); z-index: 4; transition: all 0.3s ease-in; }
.job-done.job-row:after { content: attr(job-done); }
.overdue:after { color: yellow; }
.overdue span { color: rgba(255,255,0,1); }
.job-row.washed:before { content: "w"; position: absolute; left: 125%; top: 50%; transform: translateY(-50%); color: orange; font-weight: bold; font-size: 0.75em; 
    z-index: 4; width: 100%; text-align: center; }
.job-row.washed:hover:before { content: attr(washed); left: 100%; font-size: 0.7em; }
.job-row.washed:hover .rego-span, .job-row.washed:hover .number-span { font-size: 0.9em; }
.rego-span { left: 17px; top: 1px; width: 165%; position: absolute; text-transform: uppercase; overflow: hidden; transition: all 0.3s ease-in; }
.number-span { left: 17px; bottom: 1px; width: 165%; position: absolute; white-space: nowrap; overflow: hidden; transition: all 0.3s ease-in; }
.added-job { font-size: 0.4em; }
.name-span, .description-span { left: 2px; position: absolute; height: 20px; width: 5.1vw; overflow: hidden; cursor: help; }
.description-span, .description-span-half { top: 1px; }
.name-span, .name-span-half { bottom: 1px; }
.name-span-half, .description-span-half { left: 2px; position: absolute; height: 20px; width: 90%; overflow: hidden; cursor: help; }
.edit-job-button { visibility: hidden; opacity: 0; z-index: 4; cursor: pointer; transition: all 0.3s ease-in; padding: 3px; }
.edit-job-button:hover, .close-button:hover { text-shadow: 5px 0px 2px rgba(202,33,190,0.9), -4px 0px 5px rgba(48,252,255,0.9), 5px 0px 10px rgba(49,122,255,1); }
.job-row:hover .edit-job-button { visibility: visible; opacity: 1; }
.job-row:hover:after { opacity: 0; visibility: hidden; }

#jobs-screen { border-radius: 10px; overflow-y: auto; overflow-x: hidden; padding: 10px; display: flex; position: fixed; left: calc(100% - 325px); bottom: 60px; width: 300px; 
    height: 87%; flex-direction: column; z-index: 7; transition: 0.3s ease all; border: 2px solid rgba(195,241,238,0.9); background: #00050a; 
    box-shadow: inset 0px 0px 5px 2px rgba(195,241,238,0.3); }
#jobs-screen.jobs-screen-hidden, #job-search-wrap.jobs-screen-hidden { left: 100%; }
.job-row-screen { position: relative; height: 50px; z-index: 10; margin-bottom: 4px; }
.job-row-screen .job-cell, .move-job .job-cell { min-width: 2.7vw !important; }
#job-search-wrap { position: fixed; bottom: 10px; left: calc(100% - 325px); z-index: 6; transition: 0.3s ease all; background: #00050a; }
#job-search-wrap > i { position: absolute; top: 50%; transform: translate3d(0, -50%, 0); left: 16px; font-size: 0.8em; }
#job-search-wrap input { padding: 6px; font-size: 0.7em; height: 40px; border-radius: 10px; width: 323px; padding-left: 45px; text-transform: uppercase; 
    background: rgba(195,241,238,0.1); }

.screen-button { position: fixed; z-index: 6; border: 1px solid #fff; overflow: hidden; cursor: pointer; transition: 0.3s all ease; font-size: 0.7em; }
.screen-button:before { content: ""; font-weight: 900; font-family: "Font Awesome 5 Free"; position: absolute; top: 50%; transform: translateY(-50%); }
#jobs-screen-button { top: 50%; right: 0; transform: translateY(-50%); height: 40px; width: 22px; border-top-left-radius: 20px; border-bottom-left-radius: 20px;
    background-color: #00050a; border-color: rgba(255,165,0,1); border-right: none; box-shadow: inset 0px 0px 5px 2px rgba(255,165,0,0.3); }
#jobs-screen-button:before { content: "\f0c9"; left: 5px; }
#jobs-screen-button.close { background: #00050a; border-color: rgba(255,102,102,1); right: 325px; box-shadow: inset 0px 0px 5px 2px rgba(255,102,102,0.3); }
#jobs-screen-button.close:before { content: "\f00d"; }
#search-wrap { bottom: -2px; left: 50%; height: 25px; width: 40px; border-top-left-radius: 20px; border-top-right-radius: 20px; transform: translateX(-50%); 
    background: #00050a; border-color: rgba(195,241,238,1); border-bottom: none; box-shadow: inset 0px 0px 5px 2px rgba(195,241,238,0.3); }
#search-wrap input { text-transform: uppercase; border: none; box-shadow: none; height: 100%; position: absolute; padding-left: 40px; transition: 0.3s ease all; font-size: 0.9em;
    width: 100%; }
#search-wrap:before { content: "\f002"; left: 13px; }
#search-wrap:hover { width: 200px; height: 40px; font-size: 0.8em; }

#menu-wrap { display: flex; position: fixed; width: 100%; height: 100%; align-items: center; justify-content: center; z-index: 8; top: 0; background: rgba(0,0,0,0.3); }
.menu-box { display: flex; position: relative; border-radius: 5px; align-items: center; justify-content: center; flex-direction: column; z-index: 7; 
    border: 2px solid rgba(195,241,238,0.9); box-shadow: inset 0px 0px 5px 2px rgba(195,241,238,0.3); background: #00050a; }
.header { text-transform: uppercase; padding-bottom: 5px;
    text-shadow: 5px 0px 2px rgba(202,33,190,0.9), -4px 0px 5px rgba(48,252,255,0.9), 5px 0px 10px rgba(49,122,255,1); }
.form-wrap { width: 300px; padding: 20px 40px; max-height: 80vh; overflow-y: auto; }
.text-wrap { display: flex; flex-direction: column; padding: 5px 0; }
.text-wrap-title { font-size: 0.6em; padding-bottom: 3px; }
.button-wrap { display: flex; justify-content: space-between; padding: 10px 0; align-items: center; }
.close-button { position: absolute; top: 10px; right: 15px; cursor: pointer; padding: 5px; font-size: 0.9em; transition: 0.2s ease-in; }
.delete-button { color: rgba(255,102,102,1); cursor: pointer; padding: 5px; transition: 0.3s all ease-in; }
.delete-button:hover { text-shadow: 0px 0px 10px rgba(255,102,102,0.8), 0px 0px 15px rgba(255,102,102,0.8); }
.submit-button { background: rgba(195,241,238,0.9); color: #00050a; border-radius: 5px; border: none; font-weight: bold; cursor: pointer; padding: 0 15px; 
    transition: 0.2s all ease-in; height: 30px; }
.submit-button:hover { box-shadow: 0px 0px 15px 2px rgba(195,241,238,0.4); }
.small-button{ width: 20px; border: 1px solid rgba(195,241,238,0.9); border-radius: 5px; cursor: pointer; background: none; transition: all 0.2s ease-in; 
    color: rgba(255,255,255,0.9); font-size: 0.7em; text-align: center; padding: 10px; }
.small-button:hover { box-shadow: inset 0px 0px 4px 2px rgba(195,241,238,0.6); }
#job-wash.washed { background: rgba(255,165,0,0.1); border-color: rgba(255,165,0,1); }
#job-done.job-done { background: rgba(144,238,144,0.1); border-color: rgba(144,238,144,1); }

.checkbox-label { border: 1px solid rgba(195,241,238,0.4); width: 12px; height: 12px; border-radius: 3px; position: relative; cursor: pointer; margin-bottom: 5px; }
.checkbox:hover + .checkbox-label { box-shadow: inset 0px 0px 5px 2px rgba(195,241,238,0.3); }
.checkbox:checked:hover + .checkbox-label { box-shadow: 0px 0px 5px 2px rgba(195,241,238,0.5); }
.checkbox:checked + .checkbox-label { border: 1px solid rgba(195,241,238,0.9); background: rgba(195,241,238,0.9); }
.checkbox:checked + .checkbox-label:after { content: '\f00c'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.45em; position: absolute; 
    top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #000; }
.checkbox-label .text-wrap-title { position: absolute; left: 20px; }

.range-slider { height: 3px; border: none !important; background: rgba(195,241,238,0.4); margin: 10px; }
.range-slider .ui-slider-handle { cursor: pointer; height: 12px; width: 12px; top: -7px; margin-left: -7px; 
    border: 2px solid rgba(195,241,238,0.9); border-radius: 30px; background: #000; transition: 0.2s box-shadow ease-in; }
.range-slider .ui-slider-handle:hover { box-shadow: 0px 0px 3px 3px rgba(195,241,238,0.6); }
.range-slider .ui-slider-range { background: rgba(195,241,238,0.9) !important; }
.slide-display { display: flex; justify-content: space-between; padding: 0 5px; }
.slide-display-value { font-size: 0.8em; }

input[type="text"], .select-box { width: 100%; font-size: 0.7em; padding: 6px; background: none; border: 1px solid rgba(195,241,238,0.9); border-radius: 3px; 
    color: rgba(255,255,255,0.9); }
input[type="text"]:focus { box-shadow: inset 0px 0px 2px 2px rgba(195,241,238,0.4); background: rgba(195,241,238,0.1); }

.select-box { appearance: none; position: relative; padding: 4px 5px; cursor: pointer; }
.select-box-wrap { position: relative; font-size: 0.8em; }
.select-box-wrap:after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); 
    transition: 0.2s all ease-in; }
.select-box-wrap:hover:after { text-shadow: 5px 0px 2px rgba(202,33,190,0.9), -4px 0px 5px rgba(48,252,255,0.9), 5px 0px 10px rgba(49,122,255,1); }
.select2-container .select2-selection--single { height: 34px; }
.select2-container--default .select2-selection--single { background: #00050a; border: 1px solid rgba(195,241,238,0.9); border-radius: 3px; 
    box-shadow: inset 0px 0px 2px 1px rgba(195,241,238,0.4); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; color: rgba(255,255,255,0.9); }
.select2-selection__arrow b { display: none; }
.select2-dropdown { background: #00050a; border: 1px solid rgba(195,241,238,0.9); border-radius: 3px; 
    box-shadow: inset 0px 0px 2px 1px rgba(195,241,238,0.4); color: rgba(255,255,255,0.5); }
.select2-container--default .select2-results__option[aria-selected="true"] { background: rgba(195,241,238,0.1); color: rgba(255,255,255,0.9);
    border: 1px solid rgba(195,241,238,0.9); box-shadow: inset 0px 0px 2px 2px rgba(195,241,238,0.4); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: none; color: rgba(255,255,255,0.9); }

.checkbox ~ .work-range, .checkbox ~ .slide-display { display: none; }
.checkbox:checked ~ .work-range, .checkbox:checked ~ .slide-display { display: flex; }

.leave-checkbox-label { border: 1px solid rgba(195,241,238,0.9); 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; }
.leave-checkbox-label div:first-child { background: rgba(195,241,238,0.9); color: #000; }
.checkbox:checked ~ .leave-checkbox-label div:last-child { background: rgba(195,241,238,0.9); color: #000; }
.checkbox:checked ~ .leave-checkbox-label div:first-child { background: none; color: #fff; }

#datepicker { position: absolute; top: 0; right: 0; width: 0; height: 30px; z-index: 4; font-size: 0.3em; visibility: hidden; }
#ui-datepicker-div { z-index: 7 !important; left: 50% !important; transform: translateX(-49%); border: 1px solid rgba(195,241,238,0.9); border-radius: 5px;
    background: #00050a; border-top-left-radius: unset; border-top-right-radius: unset; }
.ui-widget-header { color: rgba(255,255,255,0.9) !important; border: none !important; background: none !important; }
#ui-datepicker-div .ui-state-default { background: none; color: rgba(255,255,255,0.9); border: 1px solid rgba(195,241,238,0.9); border-radius: 3px; }
#ui-datepicker-div .ui-state-highlight { background: rgba(195,241,238,0.9); color: #000; }

#calendar-menu { height: 97%; width: 80%; }
#calendar-month { font-size: 2em; margin-bottom: 10px; }
#calendar-wrapper { display: flex; width: 90%; height: 95%; flex-direction: column; }
#calendar-row-top { display: flex; width: 100%; height: 30px; }
.calendar-cell-top { display: flex; width: calc(100%/5); justify-content: center; }
.calendar-row { display: flex; width: 100%; height: 20%; font-size: 0.8em; border-top: 1px solid rgba(195,241,238,0.9); }
.calendar-cell { display: flex; width: calc(100%/5); border-right: 1px solid rgba(195,241,238,0.9); flex-direction: column; height: 100%; overflow-y: auto; }
.calendar-row section:nth-child(2) { border-left: 1px solid rgba(195,241,238,0.9); }
#calendar-wrapper > div:last-child { border-bottom: 1px solid rgba(195,241,238,0.9); }
.calendar-row section:first-child, .calendar-row section:last-child { display: none; }
#month-next:hover, #month-previous:hover { color: rgba(144,238,144,1); color: rgba(195,241,238,0.8); }
#month-previous { color: rgba(195,241,238,0.3); position: fixed; top: 45%; left: 10%; font-size: 4em; cursor: pointer; }
#month-next { color: rgba(195,241,238,0.3); position: fixed; top: 45%; right: 10%; font-size: 4em; cursor: pointer; }
.day-counter { padding: 0 10px; border-bottom: 1px solid rgba(195,241,238,0.9); line-height: 20px; }
.current-day .day-counter { background: rgba(195,241,238,0.9); color: #000; }
.leave { width: 100%; display: flex; justify-content: center; cursor: pointer; font-size: 0.7em; border-bottom: 1px solid #fff; }
.leave-divide { width: 30%; display: flex; justify-content: center; }
.leave-hover { background: rgb(255,165,0,1) !important; }
.day-indicator { display: flex; align-items: center; opacity: 0.5; cursor: help; }

.brand-1, .brand-4 { border-color: rgba(192,192,192,1) !important; background: rgba(192,192,192,0.25); }
.name-cell.brand-1, .name-cell.brand-4 { box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,0.2); }
.job-cell.brand-1, .job-cell.brand-4 { box-shadow: inset 0 7px 7px -7px rgba(192,192,192,0.3), inset 0 -7px 7px -7px rgba(192,192,192,0.3); }
.job-cell.brand-1:first-of-type, .job-cell.brand-4:first-of-type { 
    box-shadow: inset 0 7px 7px -7px rgba(192,192,192,0.3), inset 7px 0 7px -7px rgba(192,192,192,0.3), inset 0 -7px 7px -7px rgba(192,192,192,0.3); }
.job-cell.brand-1:last-of-type, .job-cell.brand-4:last-of-type { 
    box-shadow: inset 0 7px 7px -7px rgba(192,192,192,0.3), inset -7px 0 7px -7px rgba(192,192,192,0.3), inset 0 -7px 7px -7px rgba(192,192,192,0.3); }
.job-row:hover .brand-1, .job-row:hover .brand-4 { background: rgba(192,192,192,0.4); }
.name-cell:hover.brand-1, .name-cell:hover.brand-4 { background: rgba(192,192,192,0.4); }

.brand-2, .brand-6 { border-color: rgba(51,153,255,1) !important; background: rgba(51,153,255,0.25); }
.name-cell.brand-2, .name-cell.brand-6 { box-shadow: inset 0px 0px 5px 2px rgba(51,153,255,0.4); }
.job-cell.brand-2, .job-cell.brand-6 { box-shadow: inset 0 7px 7px -7px rgba(51,153,255,0.4), inset 0 -7px 7px -7px rgba(51,153,255,0.4); }
.job-cell.brand-2:first-of-type, .job-cell.brand-6:first-of-type { 
    box-shadow: inset 0 7px 7px -7px rgba(51,153,255,0.4), inset 7px 0 7px -7px rgba(51,153,255,0.4), inset 0 -7px 7px -7px rgba(51,153,255,0.4); }
.job-cell.brand-2:last-of-type, .job-cell.brand-6:last-of-type { 
    box-shadow: inset 0 7px 7px -7px rgba(51,153,255,0.4), inset -7px 0 7px -7px rgba(51,153,255,0.4), inset 0 -7px 7px -7px rgba(51,153,255,0.4); }
.job-row:hover .brand-2, .job-row:hover .brand-6 { background: rgba(51,153,255,0.4); }
.name-cell:hover.brand-2, .name-cell:hover.brand-6 { background: rgba(51,153,255,0.4); }

.brand-3, .brand-5 { border-color: rgba(255,102,102,1) !important; background: rgba(255,102,102,0.2); }
.name-cell.brand-3, .name-cell.brand-5 { box-shadow: inset 0px 0px 5px 2px rgba(255,102,102,0.2); }
.job-cell.brand-3, .job-cell.brand-5 { box-shadow: inset 0 7px 7px -7px rgba(255,102,102,0.2), inset 0 -7px 7px -7px rgba(255,102,102,0.2); }
.job-cell.brand-3:first-of-type, .job-cell.brand-5:first-of-type { 
    box-shadow: inset 0 7px 7px -7px rgba(255,102,102,0.2), inset 7px 0 7px -7px rgba(255,102,102,0.2), inset 0 -7px 7px -7px rgba(255,102,102,0.2); }
.job-cell.brand-3:last-of-type, .job-cell.brand-5:last-of-type { 
    box-shadow: inset 0 7px 7px -7px rgba(255,102,102,0.2), inset -7px 0 7px -7px rgba(255,102,102,0.2), inset 0 -7px 7px -7px rgba(255,102,102,0.2); }
.job-row:hover .brand-3, .job-row:hover .brand-5 { background: rgba(255,102,102,0.3); }
.name-cell:hover.brand-3, .name-cell:hover.brand-5 { background: rgba(255,102,102,0.3); }
    
/* LOGIN STUFF */
#login-box { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: relative; overflow: hidden; background: #00050a;
    flex-direction: column; }
@font-face { font-family: Fixedsys; src: url("../text/fsex300.ttf") format("opentype"); }
#login-wrapper { font-family: 'Fixedsys'; display: flex; position: absolute; z-index: 1; width: 300px; border: 2px solid #33ff00; flex-direction: column;
    box-shadow: 0px 0px 5px #33ff00, inset 0px 0px 5px #33ff00; color: #33ff00; background: rgba(0,5,10,0.8); padding: 5px; box-sizing: border-box; 
    filter: blur(0.7px); top: 12%; right: 10%; border-radius: 1px; animation: 1s blur-in ease-in 1; }
@keyframes blur-in { 0% {filter: blur(10px); opacity: 0;} 100% { filter: blur(0.6px); opacity: 1;}}
.login-heading { background: #33ff00; padding: 0 5px; color: #00050a; margin-bottom: 10px; }
#login-wrapper input { background: none; border: none; border-bottom: 2px solid #33ff00; border-radius: 0; padding: 0; color: #33ff00; width: 180px; margin-bottom: 10px; 
    font-family: 'Fixedsys'; font-size: 1em; }
#login-wrapper span { padding-left: 5px; }
#login-wrapper input:focus { box-shadow: none; font-weight: normal; outline: none; }
#login-wrapper input:-webkit-autofill, #login-wrapper input:-webkit-autofill:hover, #login-wrapper input:-webkit-autofill:focus, input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #00050a inset !important;  background-color: #00050a !important; color: #33ff00 !important; 
    -webkit-text-fill-color: #33ff00 !important; }
#login-wrapper input:-webkit-autofill::first-line { font-family: 'Fixedsys'; font-size: 22px; }
#login-wrapper input[type="submit"] { background: #33ff00; color: #00050a; width: auto; padding: 0 3px; cursor: pointer; margin: 0; font-size: 22px; }
#login-wrapper input[type="submit"]:hover { box-shadow: 0px 0px 5px rgba(0,0,0,0.5); }
@font-face { font-family: Outrun; src: url("../text/Outrun future Bold Italic.otf") format("opentype"); }
.title-wrapper { position: absolute; font-family: Outrun; font-size: 50px; transform: rotate(-8deg); } 
/* animation: 1s title-load ease-in 1; */
.title-text { background: -webkit-linear-gradient(rgba(255,227,5,1) 30%, rgba(250,114,237,1) 65%); z-index: 2; width: 500px; display: block;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; padding: 10px; }
.title-shadow { position: absolute; text-shadow: 1px 3px #CA21BE, 3px 7px 10px #CA21BE; left: 0; top: 0; padding: 10px; }
@keyframes title-load { 
    0% { opacity: 0; transform: translateY(100%) translateX(0%) rotate(-8deg) scale(1);}
    50% { opacity: 0.3; } 
    100% { opacity: 1; transform: translateY(0) translateX(0) rotate(-8deg) scale(1);} }
.login-border { width: 100%; height: 100%; position: absolute; background: radial-gradient(circle, rgba(255,255,255,0) 80%, rgba(0,5,10,1) 100%); }
.sunset-glow { position: absolute; width: 50%; box-shadow: 0px 0px 300vh 30vh rgba(202,33,190,0.2); bottom: 50%; }
.mountains { position: absolute; bottom: 50%; height: 20%; }

#login-grid { width: 100%; height: 100%; perspective: 300px; position: relative; overflow: hidden; }
#login-grid-wrapper { position: absolute; transform-style: preserve-3d; transform: rotateX(60deg); width: 100%; top: 50%; transform-origin: top; }
.login-grid-row { height: 20px; width: 100%; display: flex; border-top: 1px solid #30FCFF; }
.login-grid-cell { flex: 1; border-right: 1px solid #30FCFF; box-shadow: inset 0px 0px 4px rgba(93,181,217,0.8); }
#login-grid-cut { top: 0; position: absolute; min-height: 50%; width: 100%; background: #00050a; border-bottom: 1px solid #30FCFF; }
#login-grid-wrapper { animation: 0.5s moveGrid linear infinite; }
@keyframes moveGrid {100% {transform: rotateX(60deg) translateY(0px)} 0% {transform: rotateX(60deg) translateY(-20px)}  }

.sun-container { position: absolute; overflow: hidden; border-radius: 50%; padding: 1px; background-color: #00050a; bottom: 50%; }
.sun { width: 20vw; height: 20vw; border-radius: 50%;
    background: radial-gradient(transparent 65%, #ff0488 100%), linear-gradient(#FDFE1C 0%, #ffcb55 20%, #ff0488 100%);  }
.band { position: absolute; bottom: -20%; width: 100%; height: 10%; background: #00050a; animation: wave 10s linear infinite; }
@keyframes wave { 0% { transform: scaleY(1); } 100% { transform: scaleY(0); bottom: 60%; }}
.mirror { transform: scale(1,-1) rotateX(60deg) translateY(50%); top: 50%; bottom: unset; perspective: 300px; filter: blur(5px); opacity: 0.5; }
#space { height: 50%; opacity: 0.3; box-shadow: 0px 5px 10px 5px #30FCFF; }
#space, .stars { overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }  
.stars { background-repeat: repeat; background-size: 200px 200px; background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.9), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.9), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,0.9), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, rgba(255,255,255,0.9), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.9), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), rgba(0,0,0,0)); }

.background { color: #00050a; }

.MATT-Purple {color: #330867; color: rgb(51,8,103); }
.MATT-Teal { color: #30CFD0; color: rgb(48,207,208); }

.TRON-Blue { color: #C3F1EE; color: rgb(195,241,238); }
.TRON-Orange { color: #F0BE09; color: rgb(240,190,9); }

.OUTDRIVE-Blue { color: #30FCFF; color: rgb(48,252,255); }
.OUTDRIVE-Pink { color: #FA72ED; color: rgb(250,114,237); }
.OUTRUN-Purple { color: #CA21BE; color: rgb(202,33,190); }
.OUTDRIVE-Yellow { color: #FFE305; color: rgb(255,227,5); }

.top-box { box-shadow: inset 0 7px 7px -7px rgba(0,0,0,0.4); }
.left-box { box-shadow: inset 7px 0 7px -7px rgba(0,0,0,0.4); }
.right-box { box-shadow: inset -7px 0 7px -7px rgba(0,0,0,0.4); }
.bottom-box { box-shadow: inset 0 -7px 7px -7px rgba(0,0,0,0.4); }