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

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

    /* min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */

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

body.no-flex {
    display: block;
}

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

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

.grecaptcha-badge {
    display: none !important;
}

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 {
    align-items: center;
    text-align: center;
}

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

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

.icon {
    color: #000000;
}

.icon:hover {
    color: #999;
}

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

.highlight-hover {
    color: transparent !important;
}

tr:hover .highlight-hover {
    color: #000000 !important;
}

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

tr.header {
    background-color: rgba(0, 0, 0, 0.1);
}

/*:::::::::::::::::::::: 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 ::::::::::::::::::::::*/
.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,
select:disabled {
    border-color: lightgrey !important;
}

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

.clear-input {
    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;
}

.form-switch>input.form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000000'/%3e%3c/svg%3e");
}

.form-switch>input.form-check-input:checked {
    background-color: blue !important;
    border-color: blue !important;
}

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

input.table-input,
textarea.table-input {
    border: none !important;
    width: 100%;
    padding: 5px 3px;
}

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

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

a {
    text-decoration: none !important;
    color: inherit;
}

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

i.action:hover {
    cursor: pointer;
}

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

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

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

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

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

.accordion-button:not(.collapsed) {
    color: inherit !important;
    background-color: inherit !important;
    box-shadow: none !important;
}

@media (prefers-color-scheme: dark) {
    .modal-content {
        box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.05), 0 6px 20px 0 rgba(255, 255, 255, 0.05);
    }

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

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

    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,
    .grecaptcha-badge {
        background-color: #121212 !important;
        color: #ffffff !important;
    }

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

    .form-switch>input.form-check-input {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    }

    /* .form-switch>input.form-check-input:checked {
        background-color: green !important;
        border-color: green !important;
    } */

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

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

    option,
    optgroup {
        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);
    }

    tr.header {
        background-color: rgba(255, 255, 255, 0.1);
    }

    tr:hover .highlight-hover {
        color: #ffffff !important;
    }

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

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

    a[class^="button-"] {
        display: inline-block;
    }

    .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: #215F9A !important;
    }

    .btn-close {
        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    }

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

    ::-webkit-scrollbar {
        background-color: #121212 !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;
    }
} */