/* 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;
}

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;
}
.badge-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);
}
a {
    color: var(--color1);
}
h1 {
    font-size: 1.6rem !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;
}
label {
    font-size: small !important;
    font-style: normal;
    margin-bottom: 1px;
}
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;
}
.nav-tabs .nav-link.active {
    color: var(--color2);
    background: white;
}
.nav-tabs {
    border-bottom-color: var(--color2);
}
.dropdown-menu a {
    color: rgba(0, 0, 0, .5);
    font-size: 0.9rem;
}
.nav hr {
  border-top: 1px solid #4b545c;
}
/* 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(--white);
    color: var(--color1);
    line-height: 1;
}
.ht_clone_top.handsontable {
    z-index: 99;
}
.handsontable th {
    color: var(--header-text);
    background-color: var(--header2-background);
    text-align: left;
}
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;
}
@media screen and (max-width: 1500px) {
    .doc-list-item {
        width: 50%;
    }
}
@media screen and (min-width: 1501px) {
    .doc-list-item {
        width: 33%;
    }
}

.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;
}

/* 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: "\f56f";
    padding-right: 0.75rem;
}
.ui-droppable[accept^=".csv"]:before {
    font: var(--fa-font-solid);
    color: var(--success);
    font-size: large;
    content: "\f56f";
    padding-right: 0.75rem;
}
.ui-droppable[accept^=".txt"]:before {
    font: var(--fa-font-solid);
    font-size: large;
    content: "\f56f";
    padding-right: 0.75rem;
}
.ui-droppable:before {
    font: var(--fa-font-solid);
    font-size: large;
    content: "\f56f";
    padding-right: 0.75rem;
}
.ui-droppable:after {
    padding-left: 10%;
    content: "Drag and drop here";
    opacity: 0.33;
}
.dropdown-menu {
    max-height: 95vh;
    overflow-y: auto;
}
.dropdown-base {
    padding-top: 0;
    padding-bottom: 0;
}
.dropdown-base {
    padding-top: 0;
    padding-bottom: 0;
}