/*:::::::::::::::::::::: general ::::::::::::::::::::::*/
/* div {
    border: red solid 1px;
} */

body {
    padding-top: 70px;
    padding-bottom: 20px;
    scroll-padding-top: 70px;

    /* font-family: 'Raleway', sans-serif; */
}

*,
::after,
::before {
    box-sizing: border-box
}

.sticky-header {
    position: sticky !important;
    background-color: #ffffff !important;
    top: 68px;
    /* z-index: 1000; */
}

.modal-body .sticky-header {
    position: sticky !important;
    background-color: #ffffff !important;
    top: 0px;
    /* z-index: 1000; */
}

tbody {
    z-index: -1;
}

.container-width {
    width: 100%;
    height: auto;
}

.container-width-50 {
    max-width: 50%;
    height: auto;
}

.image-container-height {
    height: 100% !important;
    width: auto !important;
}

.height-container {
    max-height: 30vh;
    overflow: auto;
}

.max-height-20 {
    max-height: 20vh;
    overflow: auto;
}

.max-height-30 {
    max-height: 30vh;
    overflow: auto;
}

table thead,
table tfoot {
    position: sticky !important;
}

table thead {
    inset-block-start: 0;
    /* "top" */
    background-color: #ffffff;
    /* outline: 1px solid #000000; */
}

td.center,
th.center {
    align-items: center !important;
    text-align: center !important;
}

td.right,
th.right {
    align-items: end;
    text-align: end;
}

td.middle,
th.middle {
    vertical-align: middle;
}

td.nowrap,
th.nowrap {
    white-space: nowrap;
}

td.xero {
    color: #13B5EA;
}

tbody>tr {
    cursor: pointer;
}

tr.overdue,
td.overdue {
    background-color: rgba(255, 0, 0, 0.1);
}

.status-good {
    color: green !important;
}

.status-bad {
    color: red !important;
}

.status-pending {
    color: orange !important;
}

.status-invalid {
    color: #dddddd !important;
}

span.status-good {
    background-color: green !important;
    color: #ffffff !important;
}

span.status-bad {
    background-color: red !important;
    color: #ffffff !important;
}

span.status-pending {
    background-color: orange !important;
    color: #000000 !important;
}

span.status-invalid {
    background-color: #dddddd !important;
    color: #000000 !important;
}

span.status-info {
    background-color: #0070C0 !important;
    color: #ffffff !important;
}

.icon {
    color: #000000;
}

.icon:hover {
    color: #999;
}

.progress-bar {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/*:::::::::::::::::::::: menu ::::::::::::::::::::::*/
nav {
    background-color: #000000;
}

.dt-container nav {
    background-color: inherit !important;
}

.dropdown-menu {
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
}

/*:::::::::::::::::::::: table ::::::::::::::::::::::*/
thead {
    font-weight: bold;
}

tbody>tr:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/*:::::::::::::::::::::: tiles ::::::::::::::::::::::*/
.tile-container {
    background-color: rgba(0, 0, 0, 0.075);
    /* height: 100%;
    width: 100%; */
}

/* 
.tile-value {
    font-size: 4em;
} */

.tile-header {
    font-size: 1.5em;
}

/*:::::::::::::::::::::: login ::::::::::::::::::::::*/
.login-background {
    background-image: url("/media/matrix.jpg");
    background-size: cover;
    padding-top: 0;
}

#logo-image {
    content: url(https://scopicinsights.co.za/media/logo.png);
}

/*:::::::::::::::::::::: theme ::::::::::::::::::::::*/
.line-info:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.document-info {
    font-size: 0.8em;
    padding: 5px 10px;
    border-radius: 10px;
    color: #ffffff;
    background-color: #0070C0;
}

.document-info:hover {
    cursor: not-allowed;
}

.document-note {
    padding: 5px;
    background-color: lightgrey;
    border-radius: 5px;
}

input.search:focus {
    border: #ffffff 1px solid !important;
}

.toast {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.border-light {
    border: 2px grey solid !important;
    border-radius: 20px;
}

.select-filter {
    width: 100% !important;
}

.chosen-styling {
    border: 1px solid #aaa;
    line-height: 13px !important;
}

input,
select,
textarea {
    background-color: transparent !important;
    border: solid black 2px !important;
    border-radius: 20px !important;
}

input:read-only,
textarea:read-only,
select:disabled {
    border-color: lightgrey !important;
}

.input-group-border {
    display: block;
    border: solid rgba(0, 0, 0, 0.1) 2px !important;
    border-radius: 30px !important;
}

button:disabled {
    background-color: grey !important;
    border-color: grey !important;
}

.clear-input,
.clear-input:focus-visible,
.clear-input:focus {
    border: none !important;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
    color: inherit !important;
}

input[data-autocompleted] {
    background-color: transparent !important;
}

.input-black {
    color: black !important;
}

input:checked[type=checkbox],
input:checked[type=radio] {
    accent-color: #000000;
}

::-webkit-file-upload-button {
    background: #ffffff !important;
    border: none;
}

a[disabled],
a[disabled]:hover {
    pointer-events: none !important;
    opacity: 50%;
}

a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: inherit;
}

i {
    /* color: #000000; */
    color: inherit !important;
}

.fa-stack i:first-child {
    color: #000000 !important;
}

.fa-stack i:last-child {
    color: #ffffff !important;
}

.fa-stack i:first-child:hover,
.fa-stack i:last-child:hover {
    cursor: pointer;
}

.action:hover {
    cursor: pointer;
}

.status-icon {
    font-size: 0.6em;
    padding: 5px 10px;
    border-radius: 10px;
    display: inline-block;
}

.status-icon-large {
    font-size: 1.1em;
    padding: 0px 10px;
    border-radius: 50em;
    display: inline-block;
}

/* ::placeholder {
    color: inherit !important;
} */

button:disabled:hover {
    cursor: not-allowed;
}

.button-black {
    border-radius: 10rem !important;
    border: #000000 solid 2px;
    padding: 15px 25px !important;
    background-color: #000000;
    color: #ffffff !important;
    text-decoration: none;
}

.button-black:hover {
    background-color: #ffffff;
    color: #000000 !important;
    cursor: pointer;
}

.button-grey {
    border-radius: 10rem !important;
    border: #aaaaaa solid 2px;
    padding: 15px 25px !important;
    background-color: #aaaaaa;
    color: #000000 !important;
    text-decoration: none;
}

.button-grey:hover {
    background-color: #2a2a2a;
    color: #ffffff !important;
    cursor: pointer;
}

.button-small-black {
    border-radius: 10rem !important;
    padding: 5px 10px !important;
    background-color: #000000 !important;
    text-decoration: none !important;
    border: #000000 solid 1px;
    margin: 5px 5px !important;
    color: #ffffff !important;
}

.button-small-black:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    cursor: pointer;
}

.button-small-white {
    border-radius: 10rem !important;
    padding: 5px 10px !important;
    color: #000000 !important;
    text-decoration: none !important;
    border: none;
    margin: 5px 5px !important;
    background-color: #ffffff !important;
}

.button-small-white:hover {
    color: #ffffff !important;
    background-color: #000000 !important;
    cursor: pointer;
}

.info {
    font-size: 0.8em;
    padding: 5px 10px;
    border-radius: 10px;
    color: #ffffff;
    background-color: #0070C0;
}

.invalid-info {
    font-size: 0.8em;
    padding: 5px 10px;
    border-radius: 10px;
    color: #000000 !important;
    background-color: #dddddd !important;
}

.invalid-info:hover {
    background-color: #ffffff !important;
}

a:hover .highlight-show {
    display: inline-block !important;
}

.document-line input {
    width: 100%;
    border: none !important;
    border-radius: none !important;
}

.document-line input:focus {
    border: none !important;
}

.line-icon.active {
    color: #000000;
}

.line-icon {
    color: #999;
}

td.right input {
    text-align: right !important;
}

td.center input {
    text-align: center !important;
}

td:has(input:invalid),
td:has(select:invalid) {
    background-color: rgba(255, 0, 0, 0.2) !important;
}

.evaluation-good {
    background: green !important;
    border-radius: 10px;
    color: #ffffff !important;
    padding: 2px 10px;
}

.evaluation-warning {
    background: orange !important;
    border-radius: 10px;
    color: #000000 !important;
    padding: 2px 10px;
}

.evaluation-bad {
    background: red !important;
    border-radius: 10px;
    color: #ffffff !important;
    padding: 2px 10px;
}

@media (prefers-color-scheme: dark) {
    .fa-stack i:first-child {
        color: #ffffff !important;
    }

    .fa-stack i:last-child {
        color: #000000 !important;
    }

    .custom-tooltip {
        --bs-tooltip-bg: #ffffff;
        --bs-tooltip-color: #000000;
    }

    .dropdown-menu {
        background-color: #000000 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.05), 0 6px 20px 0 rgba(255, 255, 255, 0.05);
    }

    a.dropdown-item {
        color: #ffffff !important;
    }

    a.dropdown-item:hover {
        color: #000000 !important;
    }

    .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
        color: grey !important;
    }

    .login-background {
        background-image: url("/media/matrix-dark.jpg?v=1.1") !important;
        background-size: cover;
        padding-top: 0;
    }

    body,
    .modal-content,
    .modal-body {
        background-color: #121212 !important;
        color: #ffffff !important;
    }

    .modal-content {
        box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.05), 0 6px 20px 0 rgba(255, 255, 255, 0.05);
    }

    .input-black {
        color: #ffffff !important;
    }

    input,
    textarea,
    select {
        background-color: transparent !important;
        border: solid #ffffff 2px !important;
        border-radius: 20px !important;
        color: #ffffff !important;
        color-scheme: dark !important;
    }

    .clear-input,
    .clear-input:focus-visible,
    .clear-input:focus {
        border: none !important;
    }

    .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    select.form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
    }

    .was-validated select.form-select:invalid,
    .was-validated select.form-select:invalid,
    .was-validated .form-control:invalid {
        border-color: darkred !important;
    }

    option {
        background-color: #121212 !important;
        color: #ffffff !important;
    }

    table thead,
    table thead tr {
        inset-block-start: 0;
        background-color: #121212 !important;
        color: #ffffff !important;
    }

    table {
        color: #ffffff !important;
    }

    tbody>tr:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }

    #logo-image {
        content: url(https://scopicinsights.co.za/media/logo-light.png);
    }

    .sticky-header {
        background-color: #121212 !important;
    }

    .line-info:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .button-black {
        border-radius: 10rem !important;
        border: #ffffff solid 2px;
        padding: 15px 25px !important;
        background-color: #ffffff;
        color: #000000 !important;
        text-decoration: none;
    }

    .button-black:hover {
        background-color: #000000;
        color: #ffffff !important;
        cursor: pointer;
    }

    .button-grey {
        border-radius: 10rem !important;
        border: #aaaaaa solid 2px;
        padding: 15px 25px !important;
        background-color: #aaaaaa;
        color: #ffffff !important;
        text-decoration: none;
    }

    .button-grey:hover {
        background-color: #2a2a2a;
        color: #000000 !important;
        cursor: pointer;
    }

    .button-small-black {
        border-radius: 10rem !important;
        padding: 5px 10px !important;
        background-color: #ffffff !important;
        text-decoration: none !important;
        border: #ffffff solid 1px;
        margin: 5px 5px !important;
        color: #000000 !important;
    }

    .button-small-black:hover {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

    .button-small-white {
        border-radius: 10rem !important;
        padding: 5px 10px !important;
        color: #ffffff !important;
        text-decoration: none !important;
        border: none;
        margin: 5px 5px !important;
        background-color: #000000 !important;
    }

    .button-small-white:hover {
        color: #000000 !important;
        background-color: #ffffff !important;
    }

    i,
    .icon {
        color: #ffffff;
    }

    input:checked[type=checkbox],
    input:checked[type=radio] {
        accent-color: #ffffff;
    }

    .toast {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    .document-note {
        color: #000000;
    }

    .progress-bar {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    .progress {
        background-color: grey;
    }

    ::-webkit-scrollbar-thumb {
        background: #ffffff !important;
    }
}

/*:::::::::::::::::::::: scroll ::::::::::::::::::::::*/
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: inherit;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #000000;
}

::-webkit-scrollbar-thumb:hover {
    background: #999;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* small screen */
@media screen and (max-width: 991px) {
    .search {
        width: 100%;
    }
}

/* big screen */
/* @media screen and (min-width: 992px) {
    input.search {
        width: 250px;
    }
} */