@import url('awesome/css/font-awesome.css');
@import url('roboto/css/font-roboto.css');
@import url('flag-icons/css/flag-icons.css');

html, body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main {
    margin: 0px !important;
    padding: 0px !important;
}

.content {
    margin: 0px !important;
    padding: 0px !important;
}

.container-fluid {
    margin: 0px !important;
    padding: 0px !important;
    max-width: 100% !important;
    overflow-x: hidden;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    display: none;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    animation: fadeInUp 2.5s;
}

    #blazor-error-ui.show {
        display: flex !important;
    }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .main > div {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

img.flag {
    width: 18px;
}

div.card-dashboard {
    width: 150px !important;
    min-width: 150px !important;
}

.dashboard-hover:hover {
    color: var(--bs-danger);
}

div.card-wide {
    width: 250px !important;
    min-width: 250px !important;
    margin: auto !important;
    margin-bottom: 5px !important;
}

.nav-link-changes {
    color: var(--bs-danger) !important;
}

.wide-hover:hover {
    color: var(--bs-danger);
}

.spinner {
    z-index: 99999;
    position: absolute;
    border: 32px solid var(--bs-primary);
    border-top: 32px solid rgba(255,0,0,0);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin 900ms linear infinite;
    top: 30%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.topbreadcrumb {
    position: absolute !important;
    top: 56px !important;
    bottom: 0px !important;
    left: 10px !important;
    width: 100% !important;
    height: 18px !important;
}

.toptitle {
    position: absolute !important;
    top: 100px !important;
    bottom: 0px !important;
    left: 10px !important;
    width: 100% !important;
}

.topbuttons {
    position: absolute !important;
    top: 140px !important;
    bottom: 0px !important;
    left: 10px !important;
    width: 100% !important;
}

.topeditor {
    position: absolute !important;
    top: 174px !important;
    bottom: 0px !important;
    left: 10px !important;
    width: 100% !important;
}

.topheader {
    position: absolute !important;
    top: 197px !important;
    bottom: 0px !important;
    left: 10px !important;
    width: 100% !important;
    height: 30px !important;
}

.topheader1calculator {
    position: absolute !important;
    top: 165px !important;
    bottom: 0px !important;
    left: 10px !important;
    width: 100% !important;
    height: 30px !important;
}

.topheader2calculator {
    position: absolute !important;
    top: 200px !important;
    bottom: 0px !important;
    left: 10px !important;
    width: 100% !important;
    height: 30px !important;
}

.topheader3calculator {
    position: absolute !important;
    top: 228px !important;
    bottom: 0px !important;
    left: 10px !important;
    width: 100% !important;
    height: 60px !important;
}

.topbody {
    position: absolute !important;
    top: 232px !important;
    bottom: 0px !important;
    left: 10px !important;
    width: 100% !important;
    padding: 0px !important;
}

.topbodycalculator {
    position: absolute !important;
    top: 297px !important;
    bottom: 0px !important;
    left: 10px !important;
    width: 100% !important;
    padding: 0px !important;
}

.topbodyannualaccount {
    position: absolute !important;
    top: 178px !important;
    bottom: 0px !important;
    left: 10px !important;
    width: 100% !important;
    padding: 0px !important;
}

.scrolly {
    overflow-y: scroll !important;
    scrollbar-width: thin;
}

.marginScrollY {
    width: calc(100% - 10px);
    max-width: calc(100% - 10px);
}

input:focus {
    background-color: var(--bs-warning) !important;
}

.inputFocus {
    background-color: var(--bs-warning) !important;
}

select:focus {
    background-color: var(--bs-light) !important;
}

.navfooter {
    padding-bottom: 60px !important;
}

.loading-progress-text {
    text-align: center;
    font-weight: bold;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }


.defaultlabel {
    background-color: var(--bs-info) !important;
}

.minusicon {
    background-image: url(/svgs/minusicon.svg);
    background-position: 5px 5px;
    background-repeat: no-repeat;
    border-color: var(--bs-danger) !important;
}

    .minusicon:focus {
        background-image: url(/svgs/minusicon.svg);
        background-position: 5px 5px;
        background-repeat: no-repeat;
        border-color: var(--bs-danger) !important;
    }


.minusiconsmall {
    background-image: url(/svgs/minusicon.svg);
    background-position: 4px 4px;
    background-size: 14px 14px;
    background-repeat: no-repeat;
    border-color: var(--bs-danger) !important;
}

    .minusiconsmall:focus {
        background-image: url(/svgs/minusicon.svg);
        background-position: 4px 4px;
        background-size: 14px 14px;
        background-repeat: no-repeat;
        border-color: var(--bs-danger) !important;
    }

.percenticon {
    background-image: url(/svgs/percenticon.svg);
    background-position: 5px 5px;
    background-repeat: no-repeat;
    border-color: var(--bs-danger) !important;
}

    .percenticon:focus {
        background-image: url(/svgs/percenticon.svg);
        background-position: 5px 5px;
        background-repeat: no-repeat;
        border-color: var(--bs-danger) !important;
    }


.percenticonsmall {
    background-image: url(/svgs/percenticon.svg);
    background-position: 4px 4px;
    background-size: 14px 14px;
    background-repeat: no-repeat;
    border-color: var(--bs-danger) !important;
}

    .percenticonsmall:focus {
        background-image: url(/svgs/percenticon.svg);
        background-position: 4px 4px;
        background-size: 14px 14px;
        background-repeat: no-repeat;
        border-color: var(--bs-danger) !important;
    }

.pointer {
    cursor: pointer !important;
}

.contextmenu {
    cursor: help !important;
}

.contextmenuhover {
    background-color: var(--bs-light);
}

    .contextmenuhover:hover {
        background-color: var(--bs-info);
        cursor: pointer;
    }

#hourglass {
    opacity: 1;
}

    #hourglass i {
        opacity: 0;
        animation: hourglass 1.2s ease-in infinite, hourglass-spin 1.2s ease-out infinite;
    }

    #hourglass > i:nth-child(1) {
        animation-delay: 0s, 0s;
    }

    #hourglass > i:nth-child(2) {
        animation-delay: 0.3s, 0s;
    }

    #hourglass > i:nth-child(3) {
        animation-delay: 0.6s, 0s;
    }

    #hourglass > i:nth-child(4) {
        animation-delay: 0.9s, 0s;
    }

    #hourglass > i:nth-child(4) {
        animation: hourglass-end 1.2s ease-in infinite, hourglass-spin 1.2s ease-out infinite;
    }

    #hourglass > i:nth-child(5) {
        opacity: 1;
        animation: hourglass-spin 1.2s ease-out infinite;
    }

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

    24% {
        opacity: 0.9;
    }

    26% {
        opacity: 0;
    }
}

@keyframes hourglass-end {
    0% {
        opacity: 0;
    }

    70% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hourglass-spin {
    75% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

.captchaImage {
    height: 32px;
    width: 256px;
}


.f00icon {
    background-image: url(/svgs/f0icon.svg), url(/svgs/f0icon.svg);
    background-position: right 5px top 5px, right 28px top 5px;
    background-repeat: no-repeat, no-repeat;
}

    .f00icon:focus {
        background-image: url(/svgs/f0icon.svg), url(/svgs/f0icon.svg);
        background-position: right 5px top 5px, right 28px top 5px;
        background-repeat: no-repeat, no-repeat;
    }

.f00iconsmall {
    background-image: url(/svgs/f0icon.svg), url(/svgs/f0icon.svg);
    background-position: right 4px top 4px;
    background-size: 14px 14px;
    background-repeat: no-repeat;
}

    .f00iconsmall:focus {
        background-image: url(/svgs/f0icon.svg), url(/svgs/f0icon.svg);
        background-position: right 4px top 4px;
        background-size: 14px 14px;
        background-repeat: no-repeat;
    }

.f01icon {
    background-image: url(/svgs/f1icon.svg), url(/svgs/f0icon.svg);
    background-position: right 5px top 5px, right 28px top 5px;
    background-repeat: no-repeat, no-repeat;
}

    .f01icon:focus {
        background-image: url(/svgs/f1icon.svg), url(/svgs/f0icon.svg);
        background-position: right 5px top 5px, right 28px top 5px;
        background-repeat: no-repeat, no-repeat;
    }


.f01iconsmall {
    background-image: url(/svgs/f1icon.svg), url(/svgs/f0icon.svg);
    background-position: right 4px top 4px;
    background-size: 14px 14px;
    background-repeat: no-repeat;
}

    .f01iconsmall:focus {
        background-image: url(/svgs/f1icon.svg), url(/svgs/f0icon.svg);
        background-position: right 4px top 4px;
        background-size: 14px 14px;
        background-repeat: no-repeat;
    }

.f02icon {
    background-image: url(/svgs/f2icon.svg), url(/svgs/f0icon.svg);
    background-position: right 5px top 5px, right 28px top 5px;
    background-repeat: no-repeat, no-repeat;
}

    .f02icon:focus {
        background-image: url(/svgs/f2icon.svg), url(/svgs/f0icon.svg);
        background-position: right 5px top 5px, right 28px top 5px;
        background-repeat: no-repeat, no-repeat;
    }


.f02iconsmall {
    background-image: url(/svgs/f2icon.svg), url(/svgs/f0icon.svg);
    background-position: right 4px top 4px;
    background-size: 14px 14px;
    background-repeat: no-repeat;
}

    .f02iconsmall:focus {
        background-image: url(/svgs/f2icon.svg), url(/svgs/f0icon.svg);
        background-position: right 4px top 4px;
        background-size: 14px 14px;
        background-repeat: no-repeat;
    }

.f03icon {
    background-image: url(/svgs/f3icon.svg), url(/svgs/f0icon.svg);
    background-position: right 5px top 5px, right 28px top 5px;
    background-repeat: no-repeat, no-repeat;
}

    .f03icon:focus {
        background-image: url(/svgs/f3icon.svg), url(/svgs/f0icon.svg);
        background-position: right 5px top 5px, right 28px top 5px;
        background-repeat: no-repeat, no-repeat;
    }


.f03iconsmall {
    background-image: url(/svgs/f3icon.svg), url(/svgs/f0icon.svg);
    background-position: right 4px top 4px;
    background-size: 14px 14px;
    background-repeat: no-repeat;
}

    .f03iconsmall:focus {
        background-image: url(/svgs/f3icon.svg), url(/svgs/f0icon.svg);
        background-position: right 4px top 4px;
        background-size: 14px 14px;
        background-repeat: no-repeat;
    }

.f04icon {
    background-image: url(/svgs/f4icon.svg), url(/svgs/f0icon.svg);
    background-position: right 5px top 5px, right 28px top 5px;
    background-repeat: no-repeat, no-repeat;
}

    .f04icon:focus {
        background-image: url(/svgs/f4icon.svg), url(/svgs/f0icon.svg);
        background-position: right 5px top 5px, right 28px top 5px;
        background-repeat: no-repeat, no-repeat;
    }


.f04iconsmall {
    background-image: url(/svgs/f4icon.svg), url(/svgs/f0icon.svg);
    background-position: right 4px top 4px;
    background-size: 14px 14px;
    background-repeat: no-repeat;
}

    .f04iconsmall:focus {
        background-image: url(/svgs/f4icon.svg), url(/svgs/f0icon.svg);
        background-position: right 4px top 4px;
        background-size: 14px 14px;
        background-repeat: no-repeat;
    }

.f05icon {
    background-image: url(/svgs/f5icon.svg), url(/svgs/f0icon.svg);
    background-position: right 5px top 5px, right 28px top 5px;
    background-repeat: no-repeat, no-repeat;
}

    .f05icon:focus {
        background-image: url(/svgs/f5icon.svg), url(/svgs/f0icon.svg);
        background-position: right 5px top 5px, right 28px top 5px;
        background-repeat: no-repeat, no-repeat;
    }


.f05iconsmall {
    background-image: url(/svgs/f5icon.svg), url(/svgs/f0icon.svg);
    background-position: right 4px top 4px;
    background-size: 14px 14px;
    background-repeat: no-repeat;
}

    .f05iconsmall:focus {
        background-image: url(/svgs/f5icon.svg), url(/svgs/f0icon.svg);
        background-position: right 4px top 4px;
        background-size: 14px 14px;
        background-repeat: no-repeat;
    }