@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
/*
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}
*/
.invalid {
    outline: 1px solid red;
}

.validation-message {
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #d9534f;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

h1 {
    color: midnightblue;
}

h2 {
    color: midnightblue;
}

th {
    color: midnightblue;
}

.search-box-btn-clear {
    margin-left: -2.1rem;
    z-index: 100;
}

.dropdown-menu-align-left {
    top: auto !important;
    left: auto !important;
    right: 0 !important;
}

/* General CSS */
.form-control.no-outline:focus,
.btn.no-outline:focus {
    box-shadow: none;
}

.pholder-on-focus::placeholder {
    visibility: hidden;
}

.pholder-on-focus:focus::placeholder {
    visibility: visible;
}

.btn-outline-lighter {
    color: #aaacaf;
    background-color: #fff;
    border-color: #ced4da;
}

    .btn-outline-lighter:not(:disabled):not(.disabled):active,
    .btn-outline-lighter:not(:disabled):not(.disabled):hover {
        color: #fff;
        background-color: #ced4da;
        border-color: #ced4da;
    }

/* Compact input */

.compact-input {
    position: relative;
}

    .compact-input .form-label {
        display: none;
        position: absolute;
        top: -7px;
        left: 8px;
        padding: 0 5px;
        z-index: 3;
        background: white;
        font-size: 0.65rem;
        line-height: 0.65rem;
    }

    .compact-input input.is-invalid ~ .form-label {
        color: #d9534f;
    }

    .compact-input select.form-control {
        padding-left: 0.5rem;
    }

    .compact-input input.has-text ~ .form-label,
    .compact-input input:focus ~ .form-label,
    .compact-input input:active ~ .form-label,
    .compact-input textarea.has-text ~ .form-label,
    .compact-input textarea:focus ~ .form-label,
    .compact-input textarea:active ~ .form-label,
    .compact-input select.has-text ~ .form-label,
    .compact-input select:focus ~ .form-label,
    .compact-input select:active ~ .form-label {
        display: inline;
        animation: fadeInFromNone 0.2s ease-out;
    }

    .compact-input input:focus::placeholder,
    .compact-input textarea:focus::placeholder {
        visibility: hidden;
    }

    .compact-input input:disabled, .compact-input select:disabled ~ .select2 .select2-selection {
        background-color: transparent;
    }

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: inline;
        opacity: 0;
    }

    100% {
        display: inline;
        opacity: 1;
    }
}

/* Data table */

.data-table.table {
    position: relative;
}

/* Data table: border configuration */

.data-table tbody td:first-child, .data-table thead th:first-child {
    border-left: 1px solid #dee6ed;
}

.data-table tbody td:last-child, .data-table thead th:last-child {
    border-right: 1px solid #dee6ed;
}

.data-table thead th,
.data-table tbody td,
.data-table tfoot td {
    border-top: 1px solid #dee6ed;
}

.data-table tbody tr:last-child td {
    border-bottom: 1px solid #dee6ed;
}

.data-table .data-table--parent + .data-table--child td {
    border-top: none;
}

/* End: Data table: border configuration */

.data-table--parent td {
    padding: 0.15rem 0.25rem;
}

.data-table--child td {
    padding: 0.5rem 0.25rem;
}

.data-table tfoot td {
    padding: 0.15rem 0.25rem;
}

.data-table--child {
    background: #faf9f8;
}

/* Data table base styling */

.data-table--parent td:first-child::before,
.data-table--parent + .data-table--child > td:first-child::before {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 20%, #0000001c 100%);
    content: "";
    display: none;
}

.data-table--parent + .data-table--child > td:first-child::before {
    margin-top: -10px;
    display: block;
}

.data-table tr.template {
    display: none;
}

.data-table .table-col-1 {
    width: 8.33333%;
}

.data-table .table-col-2 {
    width: 16.66667%;
}

.data-table .table-col-3 {
    width: 25%;
}

.data-table .table-col-4 {
    width: 33.33333%;
}

.data-table .table-col-5 {
    width: 41.66667%;
}

.data-table .table-col-6 {
    width: 50%;
}

.data-table .table-col-7 {
    width: 58.33333%;
}

.data-table .table-col-8 {
    width: 66.66667%;
}

.data-table .table-col-9 {
    width: 75%;
}

.data-table .table-col-10 {
    width: 83.33333%;
}

.data-table .table-col-11 {
    width: 91.66667%;
}

.data-table .table-col-12 {
    width: 100%;
}

.data-table .table-col-actions {
    /* This value must be adjusted, if "action" column content changes in future */
    min-width: 33px; /* Additional 1px was needed for chromium based browser (some table width calculation weirdness) */
}

/* Data table : focus settings */

.data-table tr:not(:hover) input:not(:focus),
.data-table tr:not(:hover) textarea:not(:focus),
.data-table tr:not(:hover) select:not(:focus) {
    border-color: transparent;
    background: transparent;
}

    .data-table tr:not(:hover) input:not(:focus) ~ .input-group-append > .btn,
    .data-table tr:not(:hover) input:not(:focus) ~ .btn {
        border-color: transparent;
        color: transparent;
    }

.data-table tr input ~ .input-group-append > .btn {
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out, color .15s ease-in-out;
}

.data-table tr:not(:hover) .other-actions {
    visibility: hidden;
}

.data-table .other-actions-block > [data-toggle="dropdown"]:hover {
    background: #e9ecef;
}

.data-table tr:not(:hover) select:not(:focus) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.data-table input,
.data-table textarea {
    display: block;
    padding: 5px 7.5px;
}

.data-table select {
    display: block;
    padding: 5px 2.5px;
}

.data-table tr:not(:hover) select:not(:focus) {
    padding-left: 6.5px;
}

@-moz-document url-prefix() {
    /* Firefox is the only browser that doesn't add unneeded padding */
    .data-table tr:not(:hover) select:not(:focus) {
        padding-left: 2.5px;
    }
}

.data-table tbody td > span, .data-table tbody td > a {
    display: block;
    padding-top: 5px;
}

.data-table .form-control:disabled {
    background: transparent;
    border: none;
}

.data-table--child span:not(.badge),
.data-table--child h4,
.data-table--child strong,
.data-table--child div,
.data-table--child input,
.data-table--child textarea,
.data-table--child select {
    color: #aaa;
}

/* Table link styling */

table.with-link-animation tbody tr a {
    text-decoration: none;
}

table.with-link-animation tbody tr:hover a {
    text-decoration: underline;
}

/* Autocomplete tooltip */
.autocomplete-popover.popover {
    max-width: none;
    min-width: 360px;
    color: initial;
    background-color: white;
    border-radius: 0;
    box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
}

.autocomplete-popover .autocomplete-result > div {
    max-height: 200px;
    overflow: auto;
}

.autocomplete-popover table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #191970;
    background-color: #fff;
    border: none;
}

.autocomplete-popover table th,
.autocomplete-popover table td {
    padding: 3.75px 7.5px;
}

.autocomplete-popover table:not(:hover) tBody tr.selected,
.autocomplete-popover table tBody tr:hover {
    background-color: #e0e0e0;
    cursor: pointer;
    text-decoration: underline;
}

/* Custom autocomplete item */
.custom-autocomplete input[data-selected-value] {
    padding-right: 35px;
    margin-right: 4px;
}

.custom-autocomplete button[data-action="clear"] {
    display: none;
}

.custom-autocomplete input[data-selected-value] ~ button[data-action="clear"] {
    margin-left: -40px;
    z-index: 3;
    display: block;
}

/* Full screeen loader */
.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader-container {
    position: relative;
}

.loader svg {
    width: 100px;
    height: 100px;
}

    .loader svg #logo-line {
        animation: 1s ease-out 0s infinite normal blink;
    }

    .loader svg #logo-bar-1 {
        animation: 1s ease-out .15s infinite normal blink;
    }

    .loader svg #logo-bar-2 {
        animation: 1s ease-out .3s infinite normal blink;
    }

    .loader svg #logo-bar-3 {
        animation: 1s ease-out .45s infinite normal blink;
    }

.loader .text {
    text-align: center;
    font-size: 1rem;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    20% {
        opacity: .1;
    }

    50% {
        opacity: 1;
    }
}


/* Duration picker styles */
.data-table .pickerStyles,
.pickerStyles {
    text-align: right;
    padding-right: 20px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    cursor: text;
    border: 1px solid #ced4da;
}

    .data-table .pickerStyles:focus,
    .pickerStyles:focus {
        color: #495057;
        background-color: #fff;
        border-color: #b2ccf7;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgb(63 128 234 / 25%);
    }

    .data-table .pickerStyles.no-outline:focus,
    .pickerStyles.no-outline:focus {
        box-shadow: none;
    }

.svg-wider-stroke svg text {
    stroke-width: 85 !important;
}

.text-align-end {
    text-align: end;
}

.text-align-start {
    text-align: start;
}

.table tbody td em {
    font-size: 0.65rem;
}

.table20h {
    overflow: auto;
    height: 20rem;
}

.table20h thead th {
        position: sticky;
        top: 0;
        z-index: 1;
}
.nav-item a {
    color: #495057;
}

.scroll-container {
    flex-grow: 1;
    position: relative;
}

.scroll-content {
    height: 100%;
    position: absolute;
}