/* Copyright © 2018 Innovatie Ltd. All rights reserved. */
:root {
    --paiyroll-spectrum-0: hsla(227, 62%, 68%, 0.52);
    --paiyroll-spectrum-1: hsla(280, 75%, 72%, 0.52);
    --paiyroll-spectrum-2: hsla(275, 16%, 48%, 0.52);
    --paiyroll-spectrum-3: hsla(227, 87%, 52%, 0.52);
    --paiyroll-spectrum-4: hsla(175, 79%, 55%, 0.52);
    --paiyroll-spectrum-5: hsla(102, 92%, 47%, 0.52);
    --paiyroll-spectrum-6: hsla(61, 86%, 51%, 0.52);
    --paiyroll-spectrum-7: hsla(22, 89%, 48%, 0.52);
    --paiyroll-spectrum-8: hsla(353, 97%, 46%, 0.52);
    --paiyroll-spectrum-9: hsla(108, 14%, 21%, 0.52);
    --color1: hsl(201, 45%, 42%);
    --color2: hsl(201, 45%, 62%);
    --color3: hsl(204, 40%, 26%);
    --color4: hsl(60, 2%, 82%);
    --color5: hsl(208, 76%, 13%);
    --color-error: red;
    --help-text: var(--color3);
    --header-text: hsl(100, 100%, 100%);
    --header-sort: var(--color4);
    --header-background: var(--color3);
    --header2-background: var(--color2);
    --body-background: hsla(201, 62%, 60%, 0.0);
    --thead-background: var(--header-background);
    --tr-highlight: hsla(80, 3%, 95%, 1);
    --td-highlight: var(--color2);
    --table-hover: hsla(84, 3%, 72%, 0.5);
    --html-background: white;
    --spinner-size: 72px;
    --bs4-info: #17a2b8;
}

body {
    background-color: var(--html-background);
}

#spinner-div {
    position: fixed;
    top: calc(50vh - var(--spinner-size) / 2);
    left: calc(50vw - var(--spinner-size) / 2);
    height: var(--spinner-size);
    width: var(--spinner-size);
    z-index: 100;
}

.spinner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: translateZ(0);
    animation: spinner-frames 2s infinite 1s linear;
    opacity: 50%;
    visibility: hidden;
}

@keyframes spinner-frames {
    0% {
        transform: rotate(0deg);
        visibility: visible;
    }
    100% {
        transform: rotate(360deg);
    }
}

.text-danger {
    font-weight: 500;
    color: #FFFFFF !important;
    background-color: var(--color-error);
}
.text-warning {
    font-weight: 500;
    color: #000000 !important;
    background-color: #ffc107;
}
.bg-primary {
    background-color: var(--color2);
}
.btn-primary {
    color: #fff;
    background-color: var(--color2);
    border-color: var(--color2);
}
.btn-primary:hover {
    color: #fff;
    background-color: var(--color5);
}
.dt-column-title {
    color: var(--color1);
}
.tbody, td, tfoot, th, thead, tr  {
    border-bottom-color: white;
}
a {
    color: var(--color1);
    text-decoration: none;
}
h1 {
    font-size: 1.5rem !important;
    line-height: 1.2;
    color: var(--color1);
}
h2 {
    font-size: 1.3rem;
    line-height: 1;
    color: var(--color1);
}
h3 {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color1);
}
h4 {
    font-size: 1.2rem;
    color: var(--color1);
}
/* Text sizing */
body{
    color: var(--color5);
    background: var(--body-background);
    font-size: 0.9rem;
}
.form-control {
    font-size: 0.9rem;
}
.col-form-label {
    padding-bottom: 1px;
}
label {
    font-size: small !important;
    font-style: normal;
    margin-bottom: 1px;
    margin-right: 2px;
    font-weight: 700;
}
select[multiple], select.resizeable {
    resize: vertical;
    min-height: 2rem;
    max-height: 20rem;
}
#header{
    background: var(--header-background);
    padding-left: 10px;
}
#header a{
    text-decoration: none;
    color: var(--header-text);
}
.help{color: var(--help-text)}
/* Navbar */
nav > a {
    text-decoration: none;
    color: var(--header-text);
}
nav .nav-item:hover {
    color: var(--color2);
}
.nav-tabs .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: var(--thead-background);
    height: 2rem;
    padding-top: 2px;
    border-bottom: white;
    color: var(--color1);
}
.nav-tabs .nav-link.active {
    color: var(--color2);
    background: white;
}
.nav-tabs {
    border-bottom-color: var(--color2);
}
.dropdown-menu a, .table.dataTable.table>tbody>tr.selected a {
    color: rgba(0, 0, 0, .5);
    font-size: 0.9rem;
}
.nav hr {
  border-top: 1px solid #4b545c;
}
/* Larger Checkboxes */
input[type=checkbox], input[type=radio]
{
    transform: scale(1.25);
}
/* Handsontable */
.hot-parent {
    padding-left: 0;
    padding-right: 0;
}
.hot-container {
    width: 100%;
}
div.dataTables_scrollBody > table.dataTable {
    border-bottom: solid 1px var(--color4);
}
th {
    background-color: var(--bs-white);
    color: var(--color1);
    line-height: 1;
}
.ht_clone_top.handsontable {
    z-index: 99;
}
.handsontable th {
    color: var(--color1);
    background-color: white;
    text-align: left;
}
/* Pay Item Editor */
#id_ee_items td {
    text-align: left;
}
#id_ee_items td:last-child {
    text-align: right !important;
}
td {
    padding-bottom: 0.3rem !important;
    padding-top: 0.3rem !important;
}
.handsontable td {
    text-wrap: nowrap !important;
}
.handsontable tr td.htInvalid {
    background-color: white !important;
}
.handsontable tr:nth-child(odd), tr:nth-child(odd), .handsontable td, td {
    background: var(--body-background);
}
.handsontable span.colHeader.columnSorting:hover {
    text-decoration: none;
    color: var(--header-sort);
}
.handsontable span.colHeader.columnSorting::before {
    content: "↑↓";
    opacity: 0.3;
    margin-top: -10px;
}
.handsontable span.colHeader.columnSorting.ascending::before {
    /* There is a literal   here, which can be clicked. */
    content: "↑ ";
    opacity: 1;
    background-image: none;
}
.handsontable span.colHeader.columnSorting.descending::before {
    /* There is a literal   here, which can be clicked. */
    content: " ↓";
    opacity: 1;
    background-image: none;
}
.table-hover > tbody > tr:hover {
    background: var(--table-hover);
}
pre.json-text {
    overflow-x: auto;
    white-space: pre-wrap;
    margin: 0;
    padding: 0.3rem;
    display: inline;
    font-size: 0.7rem;
}
.nav-icon {
    float: left;
    height: 28px;
    width: 28px;
}
.nav-admin > a {
    text-indent: 5px;
    color: var(--color1);
}
legend {
    color: white;
    background-color: var(--color2);
    padding-left: 0.5rem;
    font-size: 1.3rem;
}
.dataTables_wrapper .paiyroll-dt-controls {
    text-align: center;
    padding: 0;
}
.dataTables_wrapper .paiyroll-dt-controls .form-control {
    width: fit-content;
    /* Similar to form-control-sm */
    height: calc(1.5em + .5rem + 2px);
    padding: .25rem 1.5rem .5rem 0.25rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}
.dt-head-center {
    text-align: center;
}
.paiyroll-flow-actions > small {
    display: list-item;
    text-align: left;
}
span.caption-text {
    font-size: 1.7rem;
    line-height: 1.5;
    color: var(--color1);
}
/* Pop-up dialog. */
.ui-dialog {
    z-index: 1000 !important;
    background-color: var(--tr-highlight);
}
.ui-dialog-title {
    color: var(--color5);
}
.ui-widget-content span {
    float: left;
}

details > summary {
    list-style-type: none;
}
.alert-info {
    background-color: var(--color2);
}
.bg-primary {
    background-color: var(--color2) !important;
}
/* SVG diagrams. */
svg .outlines {
    stroke: black;
    stroke-width: 1.5;
}
svg .fills {
    fill: white;
}
svg .captions {
    font-size: 12px;
    font-family: monospace;
}
/* Document lists. */
.doc-list-item {
    display: inline-block;
    vertical-align: text-top;
    width: 23em;
}

.doc_i_frame {
    margin-left: 1rem;
    border: 0;
    pointer-events: none;
    transform: scale(0.95);
}

/* Using Font Awesome 6 icons from CSS. https://fontawesome.com/docs/web/setup/upgrade/pseudo-elements */
.icon::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

i.fa-solid, i.fas, i.fa-regular {
    margin-right: 0.15rem;
}

/* File droppable, using Font Awesome icon. */
.ui-droppable {
    width: 80%;
    padding: 1rem;
    border-color: var(--color1);
    border-width: 1px;
    border-style: dashed;
    border-radius: 5px;
 }
.ui-droppable[name="FilesForm-workers_csv"], .ui-droppable[name="FilesForm-fps_xml"]{
    width: 80%;
    padding: 1rem;
    border-color: var(--color1);
    border-width: 2px;
    border-style: dashed;
    border-radius: 5px;
 }
.ui-droppable[accept^=".xml"]:before {
    font: var(--fa-font-solid);
    color: var(--primary);
    font-size: large;
    content: "\e654";
    padding-right: 0.75rem;
}
.ui-droppable[accept^=".csv"]:before {
    font: var(--fa-font-solid);
    color: var(--bs-success);
    font-size: large;
    content: "\f1c3";
    padding-right: 0.75rem;
}
.ui-droppable[accept^=".txt"]:before {
    font: var(--fa-font-solid);
    font-size: large;
    content: "\f15c";
    padding-right: 0.75rem;
}
.ui-droppable:before {
    font: var(--fa-font-solid);
    font-size: large;
    content: "\f15b";
    padding-right: 0.75rem;
}
.ui-droppable:after {
    padding-left: 10%;
    content: "Drag and drop here";
    opacity: 0.33;
}

/* Allow Pay run drop-down to be visible for a single row. */
.dt-scroll-body {
    overflow: visible !important;
}
.dropdown-menu {
    max-height: 95vh;
    overflow-y: auto;
}
.dropdown-base {
    padding-top: 0;
    padding-bottom: 0;
}
.dropdown-base {
    padding-top: 0;
    padding-bottom: 0;
}
.fa-pencil {
    color: var(--bs-success);
}
.fa-trash {
    color: var(--bs-danger);
}
.fa-folder-arrow-down {
    color: var(--bs-success);
}
.fa-circle-plus {
    color: var(--bs-success);
}
.fa-circle-plus {
    color: var(--bs-success);
}
.fa-circle-minus {
    color: var(--bs-danger);
}
.fa-landmark {
    color: var(--bs-danger);
}
.fa-coins {
    color: var(--bs-success);
}
.fa-map {
    color: var(--bs4-info);
}
.fa-user-clock {
    color: var(--bs-success);
}
.fa-calendar-circle-user {
    color: var(--bs-warning);
}
.fa-building-columns {
    color: var(--bs-success);
}
.fa-calendar-users {
    color: var(--bs-warning);
}
.fa-calculator {
    color: var(--primary);
}
.fa-circle-x {
    color: var(--bs-danger);
}
.fa-brush {
    color: var(--primary);
}
.fa-calendar-week {
    color: var(--primary);
}
.fa-wrench {
    color: black;
}
.fa-sliders {
    color: var(--bs4-info);
}
.ee_works_id_badge {
    color: white;
    background-color: var(--bs4-info);
}
#id_productlabel_index {
    color: var(--bs-emphasis-color-rgb);
    text-decoration: none;
}
.btn-group-xs > .btn, .btn-xs {
  padding: .25rem .4rem;
  font-size: .8rem;
  line-height: .5;
  border-radius: .2rem;
}
.text-info {
    color: var(--color2) !important;
}
.form-select-sm {
    border-color: rgb(222, 226, 230);
}
.navbar-text a:hover {
   color: white;
}
.navbar-text a:hover {
    color: white;
}
/* Bootstrap 5. */
.form-group {
    /* Future -> "form-group -> "paiyroll-form-group mb-3. */
    margin-bottom: 1rem;
}
.form-row {
     /* Future: form-row -> row */
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}
.form-inline .form-control {
    /* Future: form-inline -> paiyroll-form-inline d-flex flex-row align-items-center flex-wrap */
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
#id_ee_filter-0_employee, #id_ee_filter-3-0_employee, #id_FilesForm-0_employee {
    background-color: var(--color2);
    color: white;
}
/* Submission viewer highlighted text */
table.table.dataTable>tbody>tr.selected>* {
    box-shadow: inset 0 0 0 9999px var(--color4) !important;
    box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected));
    color: rgb(255, 255, 255);
    color: rgb(var(--dt-row-selected-text));
}
.handsontable .htAutocompleteArrow {
    color: darkgrey;
}