@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --icon-red: #ff4c4c;
    --if-red: #d72027;
    --if-darker-red: #ac171c;
    --if-text-light: #fff;
    --icon-green: #3CB371;
    --icon-gray: #606c76;
    --if-blue: #386EA8;
    --if-darker-blue: #11437a;
    --form-desc-max-width: 350px;
    --default-label-font-size: 1.25rem;
    --default-label-font-weight: 500;
    --description-label-font-size: 1.5rem;
    --description-label-font-weight: 600;
    --default-font-family: Noto sans-serif;
    --default-font-dark: #212529;
    --default-gray-light: #DDDDDD;
    --default-background-light: #F8F8F8;
    --default-text-dark: #000;
    --default-box-shadow: 0px 0px 6px rgba(0,0,0,0.35);
    --default-font-medium: #B7B7B7;
    --success-green: #28a745;
}

.card-header, .card-footer {
    background-color: white !important;
}

.card-header {
    border-radius: 8px 8px 0 0 !important;
}

.card-footer {
    border-radius: 0 0 8px 8px !important;
}

.btn-outline-reverse-light {
    color: var(--icon-gray) !important;
    border-color: var(--icon-gray) !important;
}

.modal-footer-button {
    min-width: 115px !important;
}

.rotate-90 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

#app {
    height: 100% !important;
}

.cweb-card {
    border-radius: 8px;
    box-shadow: 0px 0px 6px rgba(0,0,0,0.15);
}

.login-footer__link--blue .fa-cloud-download-alt {
    color: var(--if-blue);
}

.form-group__label {
    font-weight: var(--default-label-font-weight);
    font-size: var(--default-label-font-size);
}

.description__label {
    font-weight: var(--description-label-label-font-weight);
    font-size: var(--description-label-font-size);
}

.btn-reverse-light {
    background-color: white !important;
}

    .btn-reverse-light:hover {
        background-color: #e2e6ea !important;
        border-color: var(--default-font-dark) !important;
    }

.field-validation-error > span {
    display: block;
    color: red;
    font-size: smaller;
    text-align: start;
    margin-top: 5px;
}

* {
    margin: 0;
    padding: 0;
    color: var(--default-font-dark);
    font-family: 'Noto Sans', sans-serif;
}

a:not(.btn):not(.nav-item):hover {
    color: var(--if-blue);
}

a {
    color: var(--if-blue);
}

.login-footer__link--blue {
    color: var(--if-blue);
}

.if-button {
    display: block;
    margin: auto;
    border: none;
    width: 100%;
    color: var(--if-text-light);
    background-color: var(--if-red);
}

    .if-button:hover {
        background-color: var(--if-darker-red) !important;
        color: var(--if-text-light) !important;
    }

.if-blue-button {
    display: block;
    margin: auto;
    border: none;
    width: 100%;
    color: var(--if-text-light);
    background-color: var(--if-blue);
}

    .if-blue-button:hover {
        background-color: var(--if-darker-blue) !important;
        color: var(--if-text-light) !important;
    }

.if-button__link--style {
    border: var(--default-gray-light) solid 1px;
    color: var(--default-font-dark);
}

.if-nav__link--style {
    width: 50%;
    text-decoration: none;
    color: var(--if-text-light) !important;
    background-color: var(--if-red) !important;
}

#app-header {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    background-color: var(--if-text-light);
}

    #app-header * {
        background-color: var(--if-text-light);
    }

.form__description--format {
    max-width: var(--form-desc-max-width);
    margin: 0 auto;
    text-align: center;
}

.card-body .form__description--format {
    font-size: 1.1rem;
}

.nav {
    flex-direction: column;
}

html, body {
    background-color: var(--default-background-light);
    font-size: 0.9rem;
    height: 100vh;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.login-header__box {
    text-align: center;
    display: block;
}

.login-footer__box {
    display: block;
    text-align: center;
}

#account > .form-group {
    text-align: center;
}

#account a, #account button {
    width: 100%;
}

app {
    width: 100%;
    position: absolute;
    top: 0px;
}

.login-header__box > img {
    margin: 0 auto;
    filter: blur(0.4px);
    width: 180px;
    height: auto;
}

.form__group--inline {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: space-between;
    align-content: center;
}

    .form__group--inline .form-group {
        display: block;
        width: 100%;
    }

.form-group > input[type=checkbox] {
    display: inline;
    width: auto;
}

    .form-group > input[type=checkbox]:focus {
        border: none !important;
        box-shadow: none !important;
    }

.form-group > label {
    display: block;
    font-size: small;
}

.form-group > input {
    font-size: small;
}

#account {
    max-width: 50ch;
    margin: 0 auto;
}

.form-group > input[type='checkbox'] + span {
    display: inline;
    position: relative;
    bottom: 12px;
    left: 5px;
}

.login-footer__link--blue > .oi {
    position: relative;
    top: 2px;
    color: var(--if-blue);
}

.main {
    margin-top: 3vh;
    width: 100%;
    height: 100%;
    background-color: var(--default-background-light);
}

.content {
    margin: 3vh 3vw;
    margin-top: 3vh;
}

.card.card-white-bg *:not(button):not(a) {
    background-color: var(--if-text-light) !important;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-app-options {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/*.nav-user-options {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

    .nav-user-options .dropdown-menu {
        top: 65%;
        left: 52%;
    }

    .nav-user-options .dropdown-divider {
        margin: 0 10px;
    }*/

.nav-item a {
    font-size: 0.95rem;
    text-decoration: var(--if-blue);
    color: var(--default-text-dark);
}

    .nav-item a:focus {
        color: var(--if-blue) !important;
    }

.login-footer__table {
    display: inline-block;
    width: 95%;
}

.a-form-heading {
    font-size: 1.35rem;
    font-weight: bold;
}

.a-form {
    max-width: 50ch;
}

@media (min-width: 768px) {
    #login-form, #registration-form, #password-reset-form {
        margin: auto;
    }

    .nav {
        flex-direction: row;
    }

    .nav-app-options {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .nav-user-options {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin-left: auto;
    }

    .navbar .navbar-toggler {
        display: none;
    }

    #app-header {
        width: 100%;
        align-items: baseline;
        flex-direction: row;
        box-shadow: var(--default-box-shadow);
    }

    .collapse:not(.show) {
        display: inline
    }

    .login-header__box > img {
        width: 160px;
    }

    .login-footer__table {
        width: auto;
    }

    .content {
        margin: auto;
        margin-top: 3vh;
    }

    .main-content {
        margin: inherit;
        max-width: 700px;
    }
}

/* spinner */

.sk-wave {
    margin: 40px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

    .sk-wave .sk-rect {
        background-color: var(--if-red);
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
        animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
    }

    .sk-wave .sk-rect1 {
        -webkit-animation-delay: -1.2s;
        animation-delay: -1.2s;
    }

    .sk-wave .sk-rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .sk-wave .sk-rect3 {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
    }

    .sk-wave .sk-rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .sk-wave .sk-rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

@-webkit-keyframes sk-waveStretchDelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }

    20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@keyframes sk-waveStretchDelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }

    20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

.more-button {
    border-color: var(--default-gray-light) !important;
    height: 25px;
    width: 25px;
    padding: .25rem .25rem;
    border-top-right-radius: .2rem !important;
    border-bottom-right-radius: .2rem !important;
    padding: 0 !important;
}

.more-button-icon {
    display: flex !important;
    padding-left: 3px !important;
}

.bi {
    color: var(--default-font-medium) !important;
}

.card-header-badge {
    background-color: var(--default-gray-light) !important;
    color: var(--default-font-dark);
}

.more-button-wrapper {
    padding-left: .5rem;
}

.toast {
    display: none;
    padding: 1.5rem;
    color: #fff;
    z-index: 1;
    position: absolute;
    width: 25rem;
    top: 2rem;
    border-radius: 1rem;
    left: 50%;
}

.toast-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1rem;
    font-size: 2.5rem;
}

.toast-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-left: 1rem;
}

    .toast-body p {
        margin-bottom: 0;
    }

.toast-visible {
    display: flex;
    flex-direction: row;
    animation: fadein 1.5s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

span.deactivated-user-name {
    text-decoration: line-through !important;
}

.product-type-icon {
    height: 1em;
}

.validation-summary-errors {
    max-width: 290px;
}

    .validation-summary-errors ul {
        list-style-type: none;
    }

        .validation-summary-errors ul li {
            color: var(--if-red);
        }

#Input_Password.is-valid, #Input_Email.is-valid {
    border-color: inherit !important;
    background-image: inherit !important;
    box-shadow: inherit !important;
}

.grid-card tbody tr {
    cursor: pointer;
}

.grid-card .table-bordered td {
    border-right: 0 !important;
    border-left: 0 !important;
}

.grid-card .table-bordered {
    border: 0 !important;
}

.grid-card .card-header {
    border-bottom: 1px solid var(--default-gray-light) !important;
}

.grid-card thead th {
    border: 0 !important;
}

.grid-card .dxbs-gridview > .card {
    border: none !important;
    border-radius: 0 0 8px 8px !important;
}

.grid-card tr > td:first-child,
.grid-card tr > th:first-child,
.grid-card .dxbs-pager {
    padding-left: 1.25rem !important;
}

.grid-card tr > td:last-child,
.grid-card tr > th:last-child,
.grid-card .dxbs-pager {
    padding-right: 1.25rem !important;
}

.grid-card td,
.grid-card thead > tr:first-child > th,
.grid-card .dxbs-pager {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
}

    .grid-card thead > tr:first-child > th,
    .grid-card thead > tr:first-child > th > div {
        background-color: var(--default-background-light) !important;
    }

.grid-card .card-body {
    padding: 0;
}