@font-face {
    font-family: Akrobat-Bold;
    src: url('../fonts/Akrobat/WEB/Akrobat-Bold.woff2') format('woff2');
}

@font-face {
    font-family: Akrobat-Regular;
    src: url('../fonts/Akrobat/WEB/Akrobat-Regular.woff2') format('woff2');
}

html,
body {
    font: 13px/1.2 Akrobat-Regular, Akrobat-Bold, Verdana, Sans-Serif;
    scroll-behavior: smooth;
    font-feature-settings: "salt";
}

/*Typography*/
p {
    padding-bottom: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5em;
    font-family: Akrobat-Bold;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 2.25em;
    letter-spacing: 1px;
}

h3 {
    font-size: 2em;
}

h4 {
    font-size: 1.75em;
}

h5 {
    font-size: 1.5em;
}

h6 {
    font-size: 1.25em;
    text-align: left;
}

/*Layout*/
.page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.page-header ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.page-header li {
    display: flex;
    margin-right: 1em;
    align-items: center;
}

.page-header .icon-text {
    display: none;
}

.page-header a {
    position: relative;
    text-decoration: none;
    outline: none;
    color: black;
}

.page-header li:first-child {
    margin-right: auto;
}

.page-header .logo-bg {
    background-image: url("/images/myToploBG.png");
    background-position: center;
    background-repeat: no-repeat;
    height: 4em;
    width: 11em;
    background-size: 105%;
}

.page-header .logo-en {
    background-image: url("/images/myToploEN.png");
    background-position: center;
    background-repeat: no-repeat;
    height: 4em;
    width: 11em;
    background-size: 105%;
}

.page-header .phone,
.page-header .profile,
.page-header .notificaions,
.page-header .settings {
    display: flex;
    align-items: center;
}

.page-header .phone-icon,
.page-header .profile-icon,
.page-header .notificaions-icon {
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
}

.page-header .phone-icon,
.page-header .profile-icon {
    margin-right: 0.5em;
}

.page-header .phone-icon {
    background: url(/images/svg/phone.svg) no-repeat;
    background-size: 1em 1em;
    background-position: center;
    background-color: #F6F6F6;
}

.page-header .profile-icon {
    background: url(/images/svg/user.svg) no-repeat;
    background-size: 1em 1em;
    background-position: center;
    background-color: #F6F6F6;
}

.page-header .notificaions-icon {
    background: url(/images/svg/mail.svg) no-repeat;
    background-size: 1.2em 1.2em;
    background-position: center;
    background-color: #F6F6F6;
}


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

.icon-text {
    font-size: 1.2em;
    font-weight: 500;
}

.notificaions {
    position: relative;
    background-color: transparent;
    border: none;
    padding: 0;
}

.icon-text-notifications {
    position: absolute;
    color: white;
    background-color: #DB2227;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    font-size: 0.8em;
    text-align: center;
    top: 0;
    left: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-header .logout {
    background-image: url("/images/svg/power-button.svg");
    background-position: center;
    background-repeat: no-repeat;
    height: 4em;
    width: 2em;
    background-size: 2em 2em;
}

.page-content {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.fade:not(.show) {
    display: none;
}

.form-wrapper {
    padding: 2em;
}

/*Nav*/
.nav-with-social {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    z-index: 2;
}

.main-nav {
    display: flex;
    flex-direction: column;
}

.nav-icon,
.social-icon {
    width: 4em;
}

.nav-icon {
    height: 5em;
    transition: background-color 0.4s ease-in;
}

.social-icon {
    height: 2.5em;
}

.invoice-icon {
    background: url(/images/svg/invoice-black.svg) no-repeat;
    background-size: 2.2em;
    background-position: center;
}

    .invoice-icon:hover,
    .invoice-icon.active {
        background-image: url(/Images/svg/invoice-white.svg);
        background-color: rgba(0, 0, 0, 0.7);
    }

.map-icon {
    background: url(/images/svg/map-pointer-black.svg) no-repeat;
    background-size: 2.2em;
    background-position: center;
}

    .map-icon:hover,
    .map-icon.active {
        background-image: url(/images/svg/map-pointer-white.svg);
        background-color: rgba(0, 0, 0, 0.7);
    }


.consumption-icon {
    background: url(/images/svg/consumption-icon.svg) no-repeat;
    background-size: 2.2em;
    background-position: center;
}

    .consumption-icon:hover,
    .consumption-icon.active {
        background-image: url(/images/svg/consumption-icon-hover.svg);
        background-color: rgba(0, 0, 0, 0.7);
    }



.monitoring-icon {
    background: url(/images/svg/monitoring-icon.svg) no-repeat;
    background-size: 2.2em;
    background-position: center;
}

    .monitoring-icon:hover,
    .monitoring-icon.active {
        background-image: url(/images/svg/monitoring-icon-hover.svg);
        background-color: rgba(0, 0, 0, 0.7);
    }



.servicesp-icon {
    background: url(/images/svg/tablet-icon.svg) no-repeat;
    background-size: 2.2em;
    background-position: center;
}

    .servicesp-icon:hover,
    .servicesp-icon.active {
        background-image: url(/images/svg/tablet-icon-hover.svg);
        background-color: rgba(0, 0, 0, 0.7);
    }

        .servicesp-icon:hover .servicesp-icon #Outline,
        .servicesp-icon.active .servicesp-icon #Outline {
            fill: white;
        }

.facebook-icon {
    background: url(/images/svg/facebook.svg) no-repeat;
    background-size: 1.2em;
    background-position: center;
}

.youtube-icon {
    background: url(/images/svg/youtube.svg) no-repeat;
    background-size: 1.2em;
    background-position: center;
}

    .facebook-icon:hover,
    .youtube-icon:hover {
        transform: scale(1.2);
    }

.copyright {
    display: flex;
    align-items: center;
    font-size: 0.8em;
    writing-mode: vertical-rl;
    margin: 10em auto 1em auto;
    transform: scale(-1);
    text-orientation: sideways;
}

    .copyright::before {
        display: inline-flex;
        content: "";
        transform: translateY(-1.5em) rotate(90deg);
    }

.cr-symbol {
    margin-bottom: 1em;
}

.text-red {
    color: #DB2227;
}

.text-green {
    color: #2fb60d;
}

.main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex-grow: 1;
    text-align: center;
    background-color: #F6F6F6;
}

.body-content {
    margin: 3em 1em;
}

.page-footer {
    background: rgb(219,34,39);
    position: relative;
    background: linear-gradient(90deg, rgba(219,34,39,1) 0%, rgba(215,46,87,1) 98%);
}

    .page-footer ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 1em 1em 2em 1em;
        flex-direction: column;
    }

    .page-footer li {
        display: flex;
        align-items: center;
    }

    .page-footer a {
        padding: 0.3em 1em;
        font-size: 1.1em;
        outline: none;
        text-decoration: none;
        color: #fff;
    }

        .page-footer a:hover,
        .page-footer a:focus {
            color: lightgray;
        }

    .page-footer::before {
        content: '';
        position: absolute;
        background: url('../Images/svg/new-page-banner-toplo.svg') no-repeat;
        display: block;
        width: 100%;
        height: 100%;
        background-size: 40em;
        bottom: 0;
        left: 0;
        mix-blend-mode: color-dodge;
    }

.change-lng {
    margin-left: auto;
}

.page-footer .change-lng {
    position: absolute;
    right: 0;
    top: 40%;
}

.culture-container {
    margin-right: 2em;
}

.change-lng-button {
    padding: 0;
    border: none;
    background-color: transparent;
    font-size: 1.4em;
}

.page-header .change-lng-button {
    color: #000;
}

    .page-header .change-lng-button:hover {
        color: #DB2227;
    }

.page-footer .change-lng-button {
    color: #fff;
}

    .page-footer .change-lng-button:hover {
        color: lightgray;
    }

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

.custom-hr {
    height: 1px;
    margin: 1em 0;
    border-bottom: 2px dotted #9E9E9E;
}
/*Banner*/
.myportal-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3em;
    min-height: 10em;
    color: white;
    background: rgb(219,34,39);
    background: linear-gradient(90deg, rgba(219,34,39,1) 0%, rgba(215,46,87,1) 98%);
    position: relative;
    overflow: hidden;
}

    .myportal-banner a {
        color: white;
        text-decoration: none;
    }

        .myportal-banner a:hover {
            text-decoration: underline;
        }


.myportal-banner-title {
    text-transform: uppercase;
    text-align: start;
    letter-spacing: 1px;
    font-family: Akrobat-Regular;
    font-size: 2em;
}

.myportal-breadcrumb {
    font-size: 0.9em;
}

    .myportal-breadcrumb ul {
        list-style: none;
        display: flex;
        padding: 0;
        align-items: center;
    }

.myportal-breadcrumb-item.active {
    color: #E6E6E6;
}

.myportal-breadcrumb-item + .myportal-breadcrumb-item::before {
    display: inline-block;
    padding-right: .2rem;
    padding-left: .2rem;
    color: #fff;
    content: ">";
}

.myportal-back-button {
    display: flex;
    align-items: center;
}

    .myportal-back-button::after {
        content: '';
        display: block;
        background: url(/Images/svg/back-white.svg) no-repeat;
        width: 1.8em;
        height: 1.8em;
        background-size: 1.7em 1.7em;
        background-position: center;
        margin-left: 0.5em;
        transition: all 0.6s ease-in;
    }

/*Home*/

.homepage-banner {
    position: relative;
    display: flex;
    overflow: hidden;
    min-height: 16.25em;
    align-items: center;
}

    .homepage-banner img {
        position: absolute;
        z-index: 2;
        left: 0;
        width: 100%;
        height: 16.25em;
        object-fit: cover;
    }

.homepage-banner-content {
    display: flex;
    padding: 4em;
    z-index: 3;
    flex: auto;
}

.homepage-banner-link {
    display: flex;
    text-decoration: none;
    align-items: center;
    flex: auto;
}

.homepage-banner-item {
    flex: 0 0 16em;
}

.homepage-banner-text {
    text-decoration: none;
    color: white;
    cursor: pointer;
    flex-grow: 2;
}


.homepage-banner-button {
    margin-left: auto;
}
/*Tabs*/
.myportal-tabs {
    flex-direction: column;
}

.myportal-tab {
    font-size: 1.1em;
    border: 1px solid #E6E6E6;
    padding: 1em;
    font-weight: bold;
    color: #9E9E9E;
    transition: 0.5s;
}

    .myportal-tab:hover,
    .myportal-tab:focus {
        color: #131313;
        text-decoration: underline;
    }

    .myportal-tab.active {
        background-color: #fff;
        border-color: #fff;
        color: #131313;
    }


/*installation-info*/
.invoices-body {
    font-size: 1em;
}

.installation-info {
    display: flex;
    padding: 1em;
    margin-top: 0.5em;
}

    .installation-info > div {
        margin-right: 2em;
        color: #818181;
    }

        .installation-info > div > span {
            font-weight: bold;
            color: #131313;
        }


.installation-filter {
    width: 100%;
}

.invoice-period-filter {
    width: 100%;
}

.invoice-status-filter {
    width: 100%;
}

.invoice-filters .form-input {
    margin: 0px;
}

.invoice-filter {
    display: flex;
    gap: 0.5em;
    margin-bottom: 1em;
}

    .invoice-filter label {
        margin: 1em;
    }

    .invoice-filter select {
        width: 100%;
    }

.invoice-filters label {
    color: #818181;
}

.borrder-bottom-dotted {
    border-bottom: 2px dotted #9E9E9E;
}

.table-head,
.table-row {
    display: flex;
    margin-bottom: 1.5em;
    align-items: center;
}

.table-head {
    background-color: #E6E6E6;
    color: #131313;
}

.table-row {
    background-color: #fff;
    border: 2px solid #E6E6E6;
}

.head-item {
    padding: 0.5em 1em;
    font-family: Akrobat-Bold;
}

.row-item {
    padding: 1.3em 1em;
    font-feature-settings: normal;
}

.row-item-with-invoice-icon {
    position: relative;
}

    .row-item-with-invoice-icon div {
        position: relative;
        z-index: 2;
    }

    .row-item-with-invoice-icon .document-type {
        font-size: 1.1em;
        font-weight: bold;
    }

    .row-item-with-invoice-icon .document-number {
        font-size: 0.8em;
    }


.half-circle-border {
    position: absolute;
    display: flex;
    height: 4em;
    width: 4em;
    top: 50%;
    left: 0;
    border: 2px solid #E6E6E6;
    border-radius: 50%;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    background-color: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}

.row-item-with-invoice-icon::after {
    position: absolute;
    display: block;
    background: url(/images/svg/invoice-black.svg) no-repeat;
    background-position: center;
    background-size: 2em 2em;
    content: '';
    height: 4em;
    width: 4em;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
}

.border-red {
    border-color: #DB2227;
}

.row-item-x2 {
    font-size: 1.1em;
}

.row-mobile .details-icon,
.row-item .details-icon {
    display: inline-flex;
    border: 2px solid #000;
    border-radius: 50%;
    width: 2em;
    height: 2em;
    background: url(/images/svg/details.svg) no-repeat;
    background-size: 1.8em 1.8em;
    background-position: center;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

    .row-mobile .details-icon:hover,
    .row-mobile .details-icon:focus,
    .row-item .details-icon:hover,
    .row-item .details-icon:focus {
        -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
        filter: invert(100%);
        border-color: #fff;
    }

.row-mobile .preview-icon,
.row-item .preview-icon {
    display: inline-flex;
    border: 2px solid #000;
    border-radius: 50%;
    width: 2em;
    height: 2em;
    background: url(/images/svg/preview.svg) no-repeat;
    background-size: 1.8em 1.8em;
    background-position: center;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}

    .row-mobile .preview-icon:hover,
    .row-mobile .preview-icon:focus,
    .row-item .preview:hover,
    .row-item .preview:focus {
        -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
        filter: invert(100%);
        border-color: #fff;
    }

.row-mobile .pay,
.row-item .pay {
    color: #000;
    border: 2px solid black;
    border-radius: 1em;
    padding: .3em .8em .2em .8em;
    font-size: 0.9em;
    text-decoration: none;
    background-color: transparent;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
}

    .row-mobile .pay:hover,
    .row-mobile .pay:focus,
    .row-item .pay:hover,
    .row-item .pay:focus {
        color: #fff;
        background-color: #000;
    }

.payments-history {
    display: flex;
    justify-content: flex-end;
}

    .payments-history a {
        color: #000;
        padding: 1em;
        text-decoration: underline;
    }

.early-payment {
    display: flex;
}

.early-payment-message-padding {
    padding-top: 1.5em;
}

.filter-installation {
    text-align: start;
    padding: 1em;
}

.filter-icon {
    display: flex;
    align-items: center;
}

    .filter-icon::after {
        display: block;
        content: '';
        background: url(/images/svg/filter.svg) no-repeat;
        width: 1.2em;
        height: 1em;
        background-size: 1.2em 1em;
        background-position: center;
        margin-left: 0.5em;
    }

.unpaid-invoice.table-head .head-item:first-child,
.unpaid-invoice.table-row .row-item:first-child {
    width: 16%;
    padding-left: 2em;
    text-align: left;
}

.unpaid-invoice.table-head .head-item:nth-child(2),
.unpaid-invoice.table-row .row-item:nth-child(2) {
    width: 10%;
}

.unpaid-invoice.table-head .head-item:nth-child(3),
.unpaid-invoice.table-row .row-item:nth-child(3) {
    width: 10%;
}

.unpaid-invoice.table-head .head-item:nth-child(4),
.unpaid-invoice.table-row .row-item:nth-child(4) {
    width: 10%;
}

.unpaid-invoice.table-head .head-item:nth-child(5),
.unpaid-invoice.table-row .row-item:nth-child(5) {
    width: 10%;
}

.unpaid-invoice.table-head .head-item:nth-child(6),
.unpaid-invoice.table-row .row-item:nth-child(6) {
    width: 10%;
}


.unpaid-invoice.table-head .head-item:nth-child(7),
.unpaid-invoice.table-row .row-item:nth-child(7) {
    width: 14%;
}

.unpaid-invoice.table-head .head-item:nth-child(8),
.unpaid-invoice.table-row .row-item:nth-child(8) {
    width: 10%;
}

.unpaid-invoice.table-head .head-item:nth-child(9),
.unpaid-invoice.table-row .row-item:nth-child(9) {
    width: 10%;
}


.homepage-grid .row-item,
.homepage-grid .head-item {
    width: 11% !important;
}


/* Custom Select */
.myportal-select-hidden {
    visibility: hidden;
    height: 3em;
}

.myportal-select {
    position: relative;
    border: 1px solid #E6E6E6;
    display: flex;
    min-width: 10em;
    max-width: 20em;
    margin: 1.5em 0;
    height: 3em;
    line-height: 3;
    background: #F6F6F6;
    overflow: hidden;
    border-radius: .3em;
}

    .myportal-select select {
        outline: 0;
        box-shadow: none;
        border: 0 !important;
        background: #F6F6F6;
        flex: 1;
        padding: 0 1em;
        color: #131313;
        cursor: pointer;
        text-transform: uppercase;
    }

/* Remove IE arrow */
select::-ms-expand {
    display: none;
}

/* Arrow */
.myportal-select::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 1em;
    background: #F6F6F6;
    cursor: pointer;
    pointer-events: none;
    -webkit-transition: .25s all ease;
    -o-transition: .25s all ease;
    transition: .25s all ease;
}
/* Transition */
.myportal-select:hover::after {
    color: #DB2227;
}

/*Login&Register Card*/
.card {
    max-width: 85%;
    margin: 0 auto;
    margin-top: 4em;
}

    .card::before {
        display: block;
        content: '';
        padding-top: 0.3em;
        background: rgb(219,34,39);
        background: linear-gradient(90deg, rgba(219,34,39,1) 0%, rgba(215,46,87,1) 98%);
    }

.card-body {
    padding: 1em 3em;
    margin: 2em auto;
    min-width: 40%;
    border-left: 2px solid #E6E6E6;
    border-right: 2px solid #E6E6E6;
}

    .card-body h1 {
        text-transform: uppercase;
    }

.login-btn-container {
    margin-top: 2em;
}

.card-register {
    max-width: 37em;
}

.modal-body > ol {
    padding: 1em;
}

ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
    text-align: left;
}

    ol .custom-ol-li {
        display: table;
        counter-increment: item;
        margin-bottom: 0.6em;
        text-align: left;
    }

.custom-ol-li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em;
}

.custom-ol-li .custom-ol-li {
    margin: 0;
}

    .custom-ol-li .custom-ol-li:before {
        content: counters(item, ".") " ";
    }

.modal-content.card::before {
    padding: 0;
}

/*Switch*/
.custom-control-switch {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 0.5em;
}

.client-type-switch {
    opacity: 0;
    visibility: hidden;
}

.label-switch {
    cursor: pointer;
    font-weight: bold;
}

.switch-slider {
    position: relative;
    width: 3.5em;
    height: 1.8em;
    margin: 0.7em;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #DB2227;
    transition: .4s;
    border-radius: 1em;
}

    .slider::before {
        position: absolute;
        content: '';
        height: 1.4em;
        width: 1.4em;
        left: 0.3em;
        bottom: 0.2em;
        background-color: #fff;
        transition: 0.4s;
        border-radius: 50%;
    }

.switch-slider input:checked + .slider {
    background-color: #DB2227;
}

    .switch-slider input:checked + .slider::before {
        transform: translateX(1.5em);
    }

.icon-info {
    cursor: pointer;
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background: url(/images/svg/information.svg) no-repeat;
    background-size: 1em 1em;
    background-position: center;
    margin-left: 0.4em;
}

.icon-lock {
    cursor: pointer;
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background: url(/images/svg/locked.svg) no-repeat;
    background-size: 1em 1em;
    background-position: center;
    margin: 0 0.4em 0.1em 0;
    vertical-align: middle;
}

.popover {
    font-family: Akrobat-Regular, Arial, sans-serif;
}

.navItemPopover {
    height: 5.71em;
    display: flex;
    justify-content: center;
    align-items: center;
    left: -0.7em !important;
    background-color: #f6f6f6;
    border: 0px;
    border-radius: 0px;
}

/*Inputs*/
.form-input {
    margin-bottom: 1em;
}

    .form-input select,
    .form-input textarea,
    .form-input input {
        order: 2;
        padding: 0.6em 1em;
        background-color: #F6F6F6;
        width: 100%;
        border: 2px solid #E4E4E4;
        border-radius: 0.3em;
        z-index: 2;
    }

        .form-input select:focus-within,
        .form-input select:focus-visible,
        .form-input textarea:focus-visible,
        .form-input input:focus-visible {
            outline-color: #8c8c8c;
        }

        .form-input select.invalid + label,
        .form-input textarea.invalid + label,
        .form-input input.invalid + label {
            color: #DB2227;
        }

        .form-input select.invalid,
        .form-input textarea.invalid,
        .form-input input.invalid,
        .form-input input.invalid:focus-visible {
            outline-color: #DB2227;
            border-color: #DB2227;
        }

    .form-input label {
        z-index: 1;
        order: 1;
        text-align: start;
        font-weight: bold;
        text-transform: uppercase;
        display: flex;
    }


    .form-input select:focus.valid + label,
    .form-input textarea:focus.valid + label,
    .form-input input:focus.valid + label {
        color: #8c8c8c;
    }

    .form-input .input-inline {
        position: relative;
    }

        .form-input .input-inline label {
            position: absolute;
            top: 0.8em;
            left: 1em;
        }

        .form-input .input-inline input:-webkit-autofill + label, .form-input .input-inline input.modified + label {
            visibility: hidden;
        }

        .form-input .input-inline input:focus + label {
            visibility: visible;
            top: 100%;
            font-size: 70%;
            margin-top: -1.4em;
            transition: 0.3s;
            z-index: 3;
        }


    .form-input .required-input::before {
        content: ' *';
        display: inline;
        color: #DB2227;
        font-weight: 600;
    }

    .form-input .input-label-top {
        display: flex;
        flex-direction: column;
    }

    .validation-message,
    .form-input .validation-message {
        color: #DB2227;
        padding: 0.2em;
        font-size: 1em;
        text-align: start;
    }

input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}


/*Chekbox*/
.checkboxes {
    border-top: 2px dotted #E6E6E6;
    padding: 1em 0;
}

.myportal-checkbox {
    margin-bottom: 1em;
}

    .myportal-checkbox .checkbox-with-label {
        display: flex;
        text-align: left;
    }

.myportal-input-checkbox {
    position: absolute;
    visibility: hidden;
}

.notification-option {
    align-items: center;
    display: flex;
}

.checkbox-label {
    cursor: pointer;
}

    .checkbox-label .checkbox-svg {
        display: inline-block;
        transform: translate3d(0, 0, 0);
    }

    .checkbox-label .checkbox-svg {
        position: relative;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        transform: scale(1);
        vertical-align: text-top;
        border: 2px solid #131313;
        transition: all 0.2s ease;
        margin-right: 0.7em;
    }

        .checkbox-label .checkbox-svg svg {
            position: absolute;
            top: 3px;
            left: 2px;
            fill: none;
            stroke: #FFFFFF;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 16px;
            stroke-dashoffset: 16px;
            transition: all 0.4s ease-in-out;
            transition-delay: 0.1s;
            transform: translate3d(0, 0, 0);
        }

    .checkbox-label:hover .checkbox-svg {
        border-color: #D72E57;
    }

.myportal-input-checkbox:checked + .checkbox-label span:first-child {
    background: #DB2227;
    border-color: #D72E57;
    animation: wave 0.6s ease;
}

    .myportal-input-checkbox:checked + .checkbox-label span:first-child svg {
        stroke-dashoffset: 0;
    }


/*Buttons*/
.btn-toplo-primary,
.btn-toplo-secondary,
.btn-toplo-tertiary {
    outline: none;
    cursor: pointer;
    padding: 0.4em 3em;
    border-radius: 3em;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.6s ease-in-out;
    border: 2px solid transparent;
    margin-bottom: 1em;
    margin-top: 1em;
}

.btn-toplo-primary {
    background-color: #DB2227;
    border-color: #DB2227;
}

    .btn-toplo-primary:hover,
    .btn-toplo-primary:focus {
        outline: none;
        color: #DB2227;
        background-color: #fff;
    }

.btn-toplo-secondary {
    background-color: #323232;
    border-color: #323232;
}

    .btn-toplo-secondary:hover,
    .btn-toplo-secondary:focus {
        outline: none;
        color: #323232;
        background-color: #fff;
    }

.btn-toplo-tertiary {
    background-color: #E6E6E6;
    border-color: #E6E6E6;
    color: #131313;
}

    .btn-toplo-tertiary:hover,
    .btn-toplo-tertiary:focus {
        outline: none;
        color: #323232;
        background-color: #fff;
    }

.btn-download-excel {
    background-color: #db2227;
    border-color: #db2227;
}
/*Messages*/
.messages-title {
    display: flex;
}

    .messages-title > div {
        color: #f8f9fa;
        padding-top: 7em;
        padding-left: 8em;
    }

.date-picker-container {
    display: flex;
    padding-bottom: 1em;
}

    .date-picker-container > div {
        max-width: 12em;
        margin-right: 1em;
    }

.custom-form-control {
    display: flex;
    cursor: pointer;
    border: 2px solid #E6E6E6;
    border-radius: 1em;
    padding: 0.5em 1em;
    background-color: #fff;
}

.tab-content-card {
    background: white;
    position: relative;
}

    .tab-content-card .tab-pane {
        margin-top: 1em;
        margin-bottom: 1em;
    }

.chart.tab-content-card {
    min-height: 640px;
}

.chart-no-data {
    margin-top: 240px;
}

.client-info {
    padding: 2em 1em;
}

.date-range-picker > span {
    font-weight: bold;
}

.date-range-picker::after {
    display: block;
    content: '';
    background: url('/Images/svg/calendar.svg') no-repeat;
    width: 1.2em;
    height: 1.2em;
    background-size: 1.2em 1.2em;
    margin-left: 0.5em;
}

.message-table {
    padding: 0 2em 1em 2em;
    background-color: #fff;
    font-weight: bold;
}

.message-table-row {
    border-bottom: 2px solid #E6E6E6;
    padding: 2em;
}

.message-table-row-item {
    display: flex;
    align-items: center;
}

.message-table-row-item {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.message-body-row-title {
    display: flex;
    text-align: start;
    align-items: center;
    min-width: 60%;
}

.message-body-row-description {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 40%;
}

.message-body-row-item {
    text-align: start;
}

    .message-body-row-item a {
        color: #000;
        font-size: 1.2em;
        text-decoration: underline;
    }

.message-row-item {
    margin-bottom: 1em;
}

    .message-row-item:not(:first-child) {
        margin-left: 0.2em;
    }

    .message-row-item:nth-child(3) {
        margin-left: auto;
    }

    .message-row-item.accident-icon {
        display: inline-flex;
        width: 2em;
        height: 2em;
        background: url(/images/svg/accident.svg) no-repeat;
        background-size: 1.4em 1.4em;
        background-position: center;
        margin-bottom: 2em;
    }

    .message-row-item.warning-icon {
        display: inline-flex;
        width: 2em;
        height: 2em;
        background: url(/images/svg/warning.svg) no-repeat;
        background-size: 1.4em 1.4em;
        background-position: center;
        margin-bottom: 2em;
    }

    .message-row-item.money-icon {
        display: inline-flex;
        width: 2em;
        height: 2em;
        background: url(/images/svg/money.svg) no-repeat;
        background-size: 1.4em 1.4em;
        background-position: center;
        margin-bottom: 2em;
    }

    .message-row-item.exclamation-mark-icon {
        display: inline-flex;
        width: 2em;
        height: 2em;
        background: url(/images/svg/exclamation-mark.svg) no-repeat;
        background-size: 1.8em 1.8em;
        background-position: center;
        margin-bottom: 2em;
    }

    .message-row-item.tablet-icon {
        display: inline-flex;
        width: 2em;
        height: 2em;
        background: url(/images/svg/tablet.svg) no-repeat;
        background-size: 1.4em 1.4em;
        background-position: center;
        margin-bottom: 2em;
    }

.calendar-icon {
    display: inline-flex;
    width: 2em;
    height: 2em;
    background: url(/images/svg/calendar.svg) no-repeat;
    background-size: 1.5em 1.5em;
    background-position: center;
}

.exclamation-mark-icon {
    display: inline-flex;
    width: 4em;
    height: 4em;
    background: url(/images/svg/attention.svg) no-repeat;
    background-size: 2.5em 2.5em;
    background-position: center;
    padding-right: 2em;
}

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


.message-status {
    background-color: yellow;
}

/*Loader*/
.preloader {
    position: relative;
    margin-top: 35vh;
}

.loader-logo {
    background: url(/Images/LogoToplo-no-background.png) no-repeat;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: 4.5em;
}

.loader {
    width: 8em;
    height: 8em;
    margin: 0 auto;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #D72E57;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

    .loader:before {
        content: "";
        position: absolute;
        top: 0.3em;
        left: 0.3em;
        right: 0.3em;
        bottom: 0.3em;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #DA2127;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
    }

    .loader:after {
        content: "";
        position: absolute;
        top: 1em;
        left: 1em;
        right: 1em;
        bottom: 1em;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #DB2227;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }


/* Profile instalations */
.profile-installations {
    padding: 2em 1em;
}

.profile-installation,
.profile-installation-actions,
.profile-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.profile-installation-actions-container {
    display: flex;
    flex-direction: column;
}

.profile-installation,
.profile-installation-actions {
    margin-bottom: 0.6em;
}

    .profile-installation > div {
        margin-right: 1em;
        color: #818181;
        width: 100%;
        text-align: start;
    }

        .profile-installation > div > span {
            font-weight: bold;
            color: #131313;
        }

.profile-actions,
.profile-installation-actions {
    gap: 1em;
    font-weight: bold;
}

.profile-installation-actions {
    justify-content: flex-end;
}

.profile-actions {
    margin-top: 2em;
}

.add-icon,
.map-icon2,
.edit-icon,
.confirm-icon,
.ellipses-icon,
.notificaion-icon,
.remove-icon,
.preview-btn-icon,
.print-icon,
.create-icon {
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .add-icon:hover,
    .map-icon2:hover,
    .edit-icon:hover,
    .confirm-icon:hover,
    .preview-btn-icon:hover,
    .print-icon:hover,
    .notificaion-icon:hover,
    .remove-icon:hover,
    .create-icon:hover {
        text-decoration: underline;
    }

    .preview-btn-icon::after {
        content: '';
        display: block;
        width: 1.5em;
        height: 1.5em;
        background: url(/images/svg/preview-icon.svg) no-repeat;
        background-size: 1.4em 1.5em;
        background-position: center;
        cursor: pointer;
        margin-left: 0.5em;
    }

    .create-icon::after {
        content: '';
        display: block;
        width: 1.5em;
        height: 1.5em;
        background: url(/images/svg/create-icon.svg) no-repeat;
        background-size: 1.4em 1.5em;
        background-position: center;
        cursor: pointer;
        margin-left: 0.5em;
    }

    .edit-icon::after {
        content: '';
        display: block;
        width: 1.5em;
        height: 1.5em;
        background: url(/images/svg/edit-button.svg) no-repeat;
        background-size: 1.4em 1.5em;
        background-position: center;
        cursor: pointer;
        margin-left: 0.5em;
    }

    .confirm-icon::after {
        content: '';
        display: block;
        width: 1.5em;
        height: 1.5em;
        background: url(/images/svg/confirm-button.svg) no-repeat;
        background-size: 1.4em 1.5em;
        background-position: center;
        cursor: pointer;
        margin-left: 0.5em;
    }

    .ellipses-icon::after {
        content: '';
        display: block;
        width: 1.5em;
        height: 1.5em;
        background: url(/images/svg/ellipsis.svg) no-repeat;
        background-size: 1.4em 1.5em;
        background-position: center;
        cursor: pointer;
        margin-left: 0.5em;
    }

    .notificaion-icon:after {
        content: '';
        display: block;
        width: 1.5em;
        height: 1.5em;
        background: url(/images/svg/notification-icon.png) no-repeat;
        background-size: 1.4em 1.5em;
        background-position: center;
        cursor: pointer;
        margin-left: 0.5em;
    }

    .remove-icon::after {
        content: '';
        display: block;
        width: 1.5em;
        height: 1.5em;
        background: url(/images/svg/remove-button.svg) no-repeat;
        background-size: 1.4em 1.5em;
        background-position: center;
        cursor: pointer;
        margin-left: 0.5em;
    }

    .print-icon::after {
        content: '';
        display: block;
        width: 1.5em;
        height: 1.5em;
        background: url(/images/svg/print-icon.svg) no-repeat;
        background-size: 1.4em 1.5em;
        background-position: center;
        cursor: pointer;
        margin-left: 0.5em;
    }

    .add-icon::before {
        content: '';
        display: inline-block;
        width: 3.0em;
        height: 3.0em;
        background: url(/images/svg/add-button.svg) no-repeat;
        background-size: 3em 3em;
        background-position: center;
        cursor: pointer;
        margin-right: 0.5em;
    }

    .map-icon2::before {
        content: '';
        display: block;
        width: 1.5em;
        height: 1.5em;
        background: url(/images/svg/map-pointer-black.svg) no-repeat;
        background-size: 1.4em 1.5em;
        background-position: center;
        cursor: pointer;
        margin-right: 0.5em;
    }

.map-icon2 {
    margin-bottom: 1em;
}

.border-thicker {
    border: 2px solid rgba(0,0,0,.2);
    border-radius: .3rem;
}

/*Accidents*/
.accidents {
    background-color: #F6F6F6;
}

    .accidents ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

.accident-list {
    background-color: #fff;
    margin-bottom: 1em;
    padding: 1em 1em 1em 2em;
}

.accident-title {
    display: flex;
    border-bottom: 1px solid #E6E6E6;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: start;
}


.date-with-icon {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1em;
    align-items: center;
}

.accident-date {
    position: relative;
    color: white;
    font-size: 0.9em;
    padding: 0.4em 0.6em;
    border-radius: .3em;
    margin-left: 1em;
    z-index: 2;
}

    .accident-date::after {
        content: '';
        width: 0;
        height: 0;
        display: block;
        position: absolute;
        z-index: 2;
        border: 0;
        border-top: 0.3em solid transparent;
        border-bottom: 0.3em solid transparent;
        margin-top: -0.3em;
        top: 50%;
        left: -0.3em;
    }

.red-background.accident-date::after {
    border-right: 0.3em solid #DB2227;
}

.orange-background.accident-date::after {
    border-right: 0.3em solid #EB6F00;
}

.red-background {
    background-color: #DA2127;
}

.orange-background {
    background-color: #EB6F00;
}

.accident-addresses {
    text-align: start;
    padding-top: 1em;
    word-break: break-word;
}

.accident-legend {
    display: flex;
    column-gap: 1em;
    background-color: #F6F6F6;
    padding-top: 1em;
    flex-direction: column;
    text-align: start;
}

    .accident-legend div {
        display: flex;
        align-items: center;
        gap: 0.25em;
    }

    .accident-legend .accident-legend-labels {
        gap: 1em;
    }

    .accident-legend div div::before,
    .accident-legend div div::before {
        content: '';
        display: block;
        height: 0.5em;
        width: 0.5em;
        background-color: #DA2127;
        border-radius: 50%;
        margin-right: 0.3em;
    }

    .accident-legend div div:last-child::before {
        background-color: #EB6F00;
    }


.accident-and-repairs-homepage {
    position: relative;
    margin-top: 1.5em;
}

.accidents-and-repairs-list-homepage {
    position: absolute;
    display: none;
    flex-direction: column;
    background: #fff;
    max-height: 460px;
    width: 20.5em;
    z-index: 500;
    left: 1.5em;
    top: 4.5em;
    border-radius: 0.4em;
}

.search-container {
    position: relative;
    padding: 1em 2em;
}

    .search-container input {
        z-index: 999;
        border-radius: 1em;
        height: 2em;
        border: 1px solid #9E9E9E;
        outline: none;
        padding: 1em 2.2em 1em 1em;
        width: 100%
    }

.search-icon {
    position: absolute;
    right: 3em;
    top: 1.3em;
    z-index: 1000;
    cursor: pointer;
}

    .search-icon img {
        width: 1.4em;
        height: 1.4em;
    }

.accident-list-homepage {
    max-height: 400px;
    width: 20em;
    overflow-y: auto;
    padding-right: 0.5em;
    padding-left: 0.5em;
    margin-bottom: 1.5em;
}

    .accident-list-homepage .accident-list {
        font-size: 0.9em;
        margin-bottom: 0;
        padding: 1em;
    }

        .accident-list-homepage .accident-list .accident-title {
            flex-direction: column;
            align-items: flex-start;
            cursor: pointer;
            text-align: start;
        }

            .accident-list-homepage .accident-list .accident-title h2 {
                text-align: start;
            }

        .accident-list-homepage .accident-list .date-with-icon {
            margin-left: 0;
            margin-bottom: 1em;
        }

    .accident-list-homepage::-webkit-scrollbar {
        width: 4px;
    }

    .accident-list-homepage::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }

    .accident-list-homepage::-webkit-scrollbar-thumb {
        background-color: #DB2227;
        outline: 1px solid #fff;
    }

.is-desktop {
    display: none;
}

.is-mobile {
    display: block;
}

.invoices-body-mobile {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1em;
}

    .invoices-body-mobile .invoice-card {
        flex: 0 1 100%;
    }

.is-mobile.unpaid-invoice {
    margin-top: 1.5em;
}

.row-mobile {
    padding: 0.2em;
    text-align: left;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .row-mobile strong {
        margin-right: 0.5em;
        color: #818181;
    }

    .row-mobile.actions {
        justify-content: center;
        margin-top: 1em;
    }

        .row-mobile.actions .details-icon {
            margin-right: 0.5em;
        }

        .row-mobile.actions .preview-icon {
            margin-right: 0.5em;
        }

    .row-mobile .is-overdue {
        margin-left: 0.5em;
    }

.invoice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 2px solid #E6E6E6;
    border-radius: .25rem;
    margin-bottom: 1em;
    padding: 1em;
}

    .invoice-card.border-red {
        border-color: #DB2227;
    }

.filter-icon {
    cursor: pointer;
}

.mr-10 {
    margin-right: 10px;
}


.errors-container-alert {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky !important;
    top: 0;
    z-index: 100;
}

    .errors-container-alert p {
        padding: 5px;
        margin: 10px;
        text-align: center;
    }

.disabled-btn {
    pointer-events: none !important;
}

.close-btn,
.close {
    background-color: transparent;
    border-color: #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 1.4em;
    border-style: solid;
    padding: 0 7px;
    font-weight: bold;
}

.modal-header {
    background: rgb(219,34,39);
    background: linear-gradient(90deg, rgba(219,34,39,1) 0%, rgba(215,46,87,1) 98%);
    color: white;
}

.red-text {
    color: #DB2227;
}

.blue-text {
    color: #0d6efd !important;
    cursor: pointer;
}

.blazored-toast-container {
    z-index: 9999 !important;
}

    .blazored-toast-container.position-bottomright {
        right: 1.5em;
    }

.blazored-toast {
    width: 65vw;
}

.not-found-container {
    margin-top: 5em;
}

.logo-circle-toplo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
}

.logo-circle-toplo {
    width: 4.3rem;
    height: 4.3rem;
    background: url(/images/LogoToplo-no-background.png) no-repeat;
    background-size: 4.3rem 4.3rem;
}

.error-toplo-container {
    margin: 3em auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
}

.error-svg-toplo {
    width: 4.3rem;
    height: 4.3rem;
    background: url(/images/svg/sad.svg) no-repeat;
    background-size: 4.3rem 4.3rem;
}

.nf-text {
    margin-bottom: 2em;
}

.hyperlink-nf-page {
    font-weight: 800;
    color: #DB2227;
    text-decoration: none;
    font-size: 24px;
}

.text-error-404 {
    color: #DB2227;
    font-feature-settings: normal;
    font-size: 4.5rem;
    font-weight: bold;
}

.text-nf-page {
    font-size: 26px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    text-shadow: 1px 0 #888888;
    letter-spacing: 1px;
    font-weight: bold;
}

.myportal-banner::before {
    content: '';
    position: absolute;
    background: url('../Images/svg/page-banner-toplo.svg') no-repeat;
    display: block;
    width: 51em;
    height: 10em;
    background-size: 100% 100%;
    bottom: 0;
    right: 8em;
    mix-blend-mode: color-dodge;
}

.myportal-title-with-breadcrumb,
.page-footer ul,
.myportal-back-button {
    z-index: 1;
    position: relative;
}

.map-leafleat {
    height: 65vh;
    width: 100%;
}

.accident-map-homepage .map-leafleat {
    height: 480px;
}

.show-modal {
    display: block;
}

.hide-modal {
    display: none;
}

.download-invoice-modal .modal-body {
    font-size: 1.5em;
    padding: 1em;
}

    .download-invoice-modal .modal-body .sk-fading-circle {
        margin: 1.5em auto;
    }

.card-register .sk-fading-circle {
    margin: 1.5em auto;
    width: 40px;
    height: 40px;
}

.report-signal .sk-fading-circle {
    margin: 1em auto;
    width: 3em;
    height: 3em;
}

.sk-fading-circle {
    margin: 6em auto;
    width: 40px;
    height: 40px;
    position: relative;
}

    .sk-fading-circle .sk-circle {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

        .sk-fading-circle .sk-circle:before {
            content: '';
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background-color: #333;
            border-radius: 100%;
            -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
        }

    .sk-fading-circle .sk-circle2 {
        -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    .sk-fading-circle .sk-circle3 {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .sk-fading-circle .sk-circle4 {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .sk-fading-circle .sk-circle5 {
        -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        transform: rotate(120deg);
    }

    .sk-fading-circle .sk-circle6 {
        -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
        transform: rotate(150deg);
    }

    .sk-fading-circle .sk-circle7 {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .sk-fading-circle .sk-circle8 {
        -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
        transform: rotate(210deg);
    }

    .sk-fading-circle .sk-circle9 {
        -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
        transform: rotate(240deg);
    }

    .sk-fading-circle .sk-circle10 {
        -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .sk-fading-circle .sk-circle11 {
        -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
        transform: rotate(300deg);
    }

    .sk-fading-circle .sk-circle12 {
        -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
        transform: rotate(330deg);
    }

    .sk-fading-circle .sk-circle2:before {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .sk-fading-circle .sk-circle3:before {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
    }

    .sk-fading-circle .sk-circle4:before {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .sk-fading-circle .sk-circle5:before {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

    .sk-fading-circle .sk-circle6:before {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
    }

    .sk-fading-circle .sk-circle7:before {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
    }

    .sk-fading-circle .sk-circle8:before {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
    }

    .sk-fading-circle .sk-circle9:before {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
    }

    .sk-fading-circle .sk-circle10:before {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
    }

    .sk-fading-circle .sk-circle11:before {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
    }

    .sk-fading-circle .sk-circle12:before {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
    }

/*Margins*/
.no-margin-bottom {
    margin-bottom: 0em !important;
}

.no-margin-top {
    margin-top: 0em !important;
}

.no-margin {
    margin: 0em !important;
}

.profile-button {
    min-width: 16em;
}

.t-center {
    text-align: center;
}

.myportal-checkbox .checkbox-with-label-center {
    display: flex;
    text-align: center;
}

.required {
    color: #DB2227;
    font-weight: 600;
}

.clear-icon {
    display: flex;
    align-items: flex-end;
    cursor: pointer;
}

    .clear-icon::after {
        content: '';
        display: block;
        width: 2em;
        height: 2em;
        background: url(/images/svg/remove-button.svg) no-repeat;
        background-size: 2em 2em;
        background-position: center;
        cursor: pointer;
        margin-top: 0.2em;
    }

    .clear-icon .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: transparent;
        color: black;
        text-align: center;
        padding: 5px 0;
        margin-left: 1em;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        transition: all 0.3s ease-in-out;
        opacity: 0;
        z-index: 1;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .clear-icon:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

/*Disclaimer: Don't try this at home!!
This is a hack, a bad practice used because leaflet framework throws error when using 'setPosition('topRight');'  */
.leaflet-left {
    left: unset;
    right: 10px !important;
}

.invoice-filters {
    margin-top: 1em;
    margin-bottom: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.invoice-filter select {
    width: 100%;
    order: 2;
    padding: 0.6em 1em;
    background-color: #F6F6F6;
    border: 2px solid #E4E4E4;
    border-radius: 0.3em;
    z-index: 2;
}

.invoice-hidden-filters {
    display: none;
}

.btn-period-filter {
    outline: none;
    border-radius: 3em;
    color: black;
    background: #E6E6E6;
    font-weight: bold;
    border: 2px solid transparent;
    width: 33.3%;
    padding: 0.3em;
    transition: all 0.3s linear;
}

.btn-status-filter {
    width: 48% !important;
}

.selected-period-btn {
    color: #E6E6E6;
    background: black;
}

.report-filters {
    margin-top: 1em;
    margin-bottom: 1em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.report-filter select {
    width: 100%;
    order: 2;
    padding: 0.6em 1em;
    background-color: #F6F6F6;
    border: 2px solid #E4E4E4;
    border-radius: 0.3em;
    z-index: 2;
}

.widget-select {
    color: #101010;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #E6E6E6;
    border-radius: 3em;
    padding: .5em 1.2em .5em 2em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

    .widget-select:hover {
        color: #101010;
    }

.arrow-down-black {
    background: url(/Images/svg/arrow-down-black.svg) no-repeat;
    width: 1em;
    height: 1em;
    background-size: 1em;
    background-position: center;
    transition: all 0.3s linear;
}

    .arrow-down-black.select-list-opened {
        transform: rotate(180deg);
    }


.select-item {
    color: black;
    text-decoration: none;
    font-size: inherit;
    margin: 0.2em;
    transition: all 0.3s linear;
}

    .select-item:hover {
        cursor: pointer;
        background-color: #c4c0c0;
        color: #101010;
    }

.select-list-items {
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: #E6E6E6;
    right: 0;
    left: 0;
    box-shadow: 2px 2px 10px #00000027;
    border-radius: 0.75em;
    padding: 1em;
    top: 2.5em;
    transition: all 0.3s linear;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
}

.select-item.active {
    color: #da2127;
}

.select-container-widget {
    position: relative;
    margin-bottom: 1em;
    width: 100%;
    transition: all 0.3s linear;
}

.select-list-opened {
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999;
}

.close-select-btn {
    text-align: right;
    margin: 0.5em;
}

/*TODOC:*/
.schedule-container .schedule-legend-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
    margin-bottom: 2em;
    row-gap: 0.5em;
    column-gap: 1em;
}

.schedule-container .schedule-legend-wrapper {
    display: flex;
    align-items: end;
}

.schedule-container .schedule-legend {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0.2em;
    font-size: 1.5em;
}

.schedule-container .comfort-bg {
    background-color: #e96223;
}

.schedule-container .reduced-comfort-bg {
    background-color: #e6a235;
}

.schedule-container .day-graph {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1em;
}

.day-graph .day-of-the-week {
    width: 8em;
}

.day-graph .periods {
    display: flex;
    overflow: hidden;
    border-radius: 5px;
    width: 100%;
}

.periods .period {
    font-size: 0.8em;
    position: relative;
    display: flex;
    cursor: pointer;
    color: #fff;
    justify-content: space-between;
    padding: 0.2em 0.4em;
}

.period.reduced-comfort-bg .period-time {
    visibility: hidden;
}


/*Animations*/
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes wave {
    50% {
        transform: scale(0.8);
    }
}

@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}

@keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}

.k-wizard {
    overflow: hidden;
}

    .k-wizard .k-wizard-step {
        padding: 10px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
    }

    .k-wizard .k-wizard-page {
        margin-top: 32px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: start;
        flex-shrink: 0;
    }

.k-wizard-horizontal {
    flex-direction: column;
}

    .k-wizard-horizontal .k-wizard-content, .k-wizard-horizontal .k-wizard-steps {
        flex: 1 1 auto;
    }

.wizard-navigation-buttons {
    display: flex;
    justify-content: flex-end;
}

    .wizard-navigation-buttons .step-indicator {
        cursor: pointer;
    }

.wizard-actions-buttons {
    gap: 0.5em;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.steps-wrapper {
    position: relative;
    margin-bottom: 1em;
}

    .steps-wrapper .steps {
        display: flex;
        list-style: none outside;
        padding: 0;
        margin: 0;
    }

.steps .step-item {
    z-index: 2;
    display: flex;
    align-items: center;
    flex-direction: column
}

.step-indicator {
    border-radius: 50%;
    margin: 3px;
    width: 28px;
    height: 28px;
    border-width: 1px;
    border-style: solid;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: visible;
    box-sizing: content-box;
    background-color: white;
    border-color: lightgray;
    transition: all .6s ease;
}

    .step-indicator.selected {
        background-color: #DA2127;
        color: white;
        border-color: #DA2127;
    }

.step-title {
    margin-top: 0.5em;
}

.steps-progress {
    position: absolute;
    top: 17px;
    height: 2px;
    background-color: lightgray;
}

    .steps-progress .progress-bar {
        background-color: #DA2127;
    }


.modal-body.pay-modal {
    display: flex;
    font-size: 0.8em;
    gap: 1em;
    justify-content: center;
}

.pay-modal .btn-toplo-secondary {
    padding: 0.5em 2em;
}

.selected-row {
    background-color: #e8abb177;
}


.btn-toplo-secondary[disabled] {
    pointer-events: none;
    background-color: #fff;
    color: #323232;
}

.document-link {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 0.5em;
}

.service-detail {
    display: flex;
    flex-direction: row;
}

.service-detail-row {
    display: flex;
    flex-direction: row;
    padding-bottom: 5px;
    padding-top: 5px;
}

.service-detail-label {
    text-align: left;
}

.service-detail-text {
    font-weight: bold;
    text-align: left;
}

.service-detail-link {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    text-align: left;
}

.e-service-list {
    background-color: #fff;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding: 1em 1em 1em 2em;
}

.service-title {
    font-size: 1em;
    font-weight: bold;
    text-align: right;
    text-transform: uppercase;
}

/*Service & Services Catalog*/

.electronic-services-filters {
    display: flex;
    flex-wrap: wrap;
}

.services-search-input {
    margin-left: auto;
}

.electronic-services {
    background-color: #fff;
}

    .services-catalog ul,
    .electronic-services ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

.services-catalog {
    background: #fff;
}

    .services-catalog ul {
        padding: 0 1em;
    }

.services-catalog-item {
    padding: 1em;
}

    .services-catalog-item:not(:last-child) {
        border-bottom: 2px dotted #9E9E9E;
    }

.services-catalog-title {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
}

    .services-catalog-title .create-icon {
        padding-left: 1em;
        margin-left: auto;
    }

.services-catalog-description {
    text-align: start;
    margin: 0.5em 0;
}

.services-catalog-price {
    text-align: end;
    font-size: 1.2em;
    font-weight: bold;
}

.electronic-service-list-item {
    display: grid;
    text-align: start;
    padding: 1em 1.5em;
    gap: 0.5em;
    grid-template-columns: 1fr;
}

    .electronic-service-list-item:not(:last-child) {
        border-bottom: 2px dotted #9E9E9E;
    }

.electronic-service-info {
    margin-right: 1.5em;
}

    .electronic-service-info div {
        margin-bottom: 0.2em;
    }

.electronic-service-actions {
    display: flex;
    gap: 1em;
    align-items: end;
    flex-direction: row;
    justify-content: end;
}

.ForCorrection-background {
    background: #EB6F00;
    border: 2px solid #EB6F00;
}

.Completed-background {
    background: #21da78;
    border: 2px solid #21da78;
}

.Canceled-background {
    background: #da2127;
    border: 2px solid #da2127;
}

.Accepted-background {
    background: #2184da;
    border: 2px solid #2184da;
}

.Draft-background {
    background: #87b9d0;
    border: 2px solid #87b9d0;
}

.service-list-info-date {
    background: rgb(219,34,39);
    border: 2px solid rgb(219,34,39);
}

.service-list-info-number {
    background: rgb(224, 207, 7);
    border: 2px solid rgb(224, 207, 7);
}

.service-price {
    margin-top: 0.5em;
    font-size: 1.2em;
    text-align: end;
}

.service-btn {
    background: rgb(219,34,39);
    border: 2px solid rgb(219,34,39);
    border-radius: 6px;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
    color: #fff;
    padding: 2px 10px;
    font-size: 1.5em;
    margin-bottom: 0.5em;
    font-weight: bolder;
    transition: all 0.3s ease-in-out;
    margin-left: auto;
}

    .service-btn:hover {
        color: rgb(219,34,39);
        border: 2px solid rgb(219,34,39);
        border-radius: 6px;
        box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
        background: #fff;
    }

.magnifaying-glass {
    display: block;
    background: url(/Images/svg/magnifying-glass-white.svg) no-repeat;
    background-size: 0.6em 0.6em;
    height: 1em;
    width: 0.6em;
    background-position: center;
}

.service-btn:hover .magnifaying-glass {
    display: block;
    background: url(/Images/svg/magnifying-glass-red.svg) no-repeat;
    background-size: 0.6em 0.6em;
    height: 1em;
    width: 0.6em;
    background-position: center;
}

.delete-icon {
    display: block;
    background: url(/Images/svg/delete-icon-white.svg) no-repeat;
    background-size: 0.6em 0.6em;
    height: 1em;
    width: 0.6em;
    background-position: center;
}

.service-btn:hover .delete-icon {
    display: block;
    background: url(/Images/svg/delete-icon-red.svg) no-repeat;
    background-size: 0.6em 0.6em;
    height: 1em;
    width: 0.6em;
    background-position: center;
}

.btn-service-primary.new-feedback,
.btn-service-primary.new-service {
    display: flex;
    padding: 0.3em 1.5em;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
    margin-right: 1em;
    min-width: 8.125em;
    justify-content: center;
    align-items: center;
}

.btn-service-primary.new-chart {
    padding: 0.3em 1.5em;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
}

.download-chart-data {
    margin-left: auto;
}

.e-service-list-link {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    text-align: right;
}

.e-service-list-details {
    padding-top: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: start;
}

.electronic-service-card {
    max-width: 85%;
    margin: 0 auto;
    margin-top: 1em;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}

.electronic-service-card-header {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 2px solid #db2227;
}

    .electronic-service-card-header:first-child {
        border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
    }

.electronic-service-card-body {
    padding: 1em 3em;
    margin: 2em auto;
    min-width: 100%;
    background-color: #f6f6f6;
}

.electronic-service-types-filters {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.btn-service-primary,
.btn-service-attach {
    outline: none;
    cursor: pointer;
    padding: 0.4em 3em;
    border-radius: 3em;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.6s ease-in-out;
    border: 2px solid transparent;
    margin-bottom: 1em;
}

.btn-service-primary {
    background-color: #DB2227;
    border-color: #DB2227;
}

    .btn-service-primary:hover,
    .btn-service-primary:focus {
        outline: none;
        color: #DB2227;
        background-color: #fff;
    }

.btn-service-attach {
    background-color: #323232;
    border-color: #323232;
}

    .btn-service-attach:hover,
    .btn-service-attach:focus {
        outline: none;
        color: #323232;
        background-color: #fff;
    }

.form-input.filter-input {
    position: relative;
}

    .form-input.filter-input input {
        padding: 0.4em 0.5em 0.4em 3em;
        border-radius: 3em;
    }

.filter-input-search-icon {
    position: absolute;
    left: 1.1em;
    top: 0.4em;
}

    .filter-input-search-icon img {
        width: 1.2em;
        height: 1.3em;
    }

.e-service-pay-btn {
    display: flex;
    padding: 0;
}

    .e-service-pay-btn input {
        font-weight: bold;
        background-color: transparent;
        outline: none;
        border-color: transparent;
    }

    .e-service-pay-btn:hover {
        text-decoration: underline;
    }

    .e-service-pay-btn::after {
        content: url(../Images/svg/credit-card.svg);
        width: 1.4em;
        height: 1.5em;
    }


.credit-card-icon {
    fill: #DA2127;
}

.label-border {
    text-align: start;
    border: 2px solid #E4E4E4;
    border-radius: 0.3em;
    padding: 1em;
    background-color: #F6F6F6;
}

.select-list-items {
    overflow-y: scroll;
    max-height: 15em;
}

.station-schedule-buttons {
    margin-top: 1em;
    margin-bottom: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.profile-card {
    background-color: #FFFFFF;
}

    .profile-card .profile-title {
        font-size: 2em;
    }

.profile-card-content {
    padding: 2em 1em;
}

.profile-card::before {
    display: block;
    content: '';
    padding-top: 0.3em;
    background: rgb(219,34,39);
    background: linear-gradient(90deg, rgba(219,34,39,1) 0%, rgba(215,46,87,1) 98%);
}

.profile-card-content p {
    padding-bottom: 0;
    margin-bottom: 1.5em;
}

.profile-card-content .accordion {
    margin-bottom: 2em;
}

.profile-card-content .accordion-body {
    text-align: start;
}

    .profile-card-content .accordion-body p {
        padding-bottom: 0;
        margin-bottom: 0;
    }

.profile-card .accordion-item {
    border: 1px solid rgb(0 0 0 / 27%);
}

.profile-card .accordion-button {
    background-color: #E6E6E6;
    color: #323232;
}

    .profile-card .accordion-button:focus {
        box-shadow: 0 0 0 0.25rem rgba(138 140 142 / 15%)
    }

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-tooltip]:before {
    /* needed - do not touch */
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0;
    /* customizable */
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 8px;
    box-shadow: 2px 2px 1px silver;
}

[data-tooltip]:hover:before {
    /* needed - do not touch */
    opacity: 1;
    /* customizable */
    background: #F6F6F6;
    margin-top: -50px;
    margin-left: 20px;
}

[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

.electronic-service-preview-actions {
    display: flex;
    flex-wrap: wrap;
    padding-left: 6em;
}

.stations-container {
    display: flex;
    flex-wrap: wrap;
    padding: 1em;
    gap: 1em;
}

.station-tile {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 3px 3px 10px #00000027;
    gap: .5em;
    cursor: pointer;
}

    .station-tile:hover {
        box-shadow: 4px 4px 12px #00000027;
    }

.station-tile-title,
.station-tile-footer {
    font-size: 1.1em;
    background-color: #E6E6E6;
    font-weight: bold;
    padding: .6em;
}

.station-tile-body {
    display: flex;
    flex-direction: column;
    gap: .5em;
    padding: 0 .8em;
}

.station-tile-row {
    display: grid;
    grid-template-columns: 2em 10em 5.5em;
    gap: .5em;
    align-items: center;
}

.station-monitoring-icon {
    width: 1.8em;
    height: 1.8em;
}

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

.parameter-value {
    text-align: end;
    font-weight: bold;
}

.nav-link img {
    width: 15%;
    height: 75px;
}

.map {
    position: relative;
    text-align: start
}

.energy-consumption-btn-div {
    float: right;
    top: 2.5em;
    left: 0.2em;
}

.padding-1em {
    padding: 1em;
}

.modal-title .schedule-title {
    padding: 0 0.5em;
}

.schedule-interval {
    display: flex;
    align-items: center;
    gap: 1em;
}

.btn-service-primary.disabled {
    opacity: 0.6;
}

    .btn-service-primary.disabled:focus,
    .btn-service-primary.disabled:hover {
        outline: 0;
        background-color: #db2227;
        color: #fff;
    }

.mnemoscheme-container {
    display: flex;
    flex-direction: row;
    max-height: 100%;
    max-width: 100%;
}

.legend {
    margin: 0 1em 1em 0;
    max-height: 100%;
}

.chart-container {
    border-radius: 4px 4px 0 0;
    background-color: white;
    margin: auto;
    display: flex;
    outline: 0;
    position: relative;
    justify-content: start;
}

.chart-canvas-container {
    height: 99%;
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    min-height: 410px;
}

.consumption-filter select {
    width: 100%;
}

.min-height-40em {
    min-height: 40em;
}

.leaflet-popup-content-wrapper {
    word-break: break-word;
}

.grecaptcha-badge {
    visibility: hidden;
}

.captcha-info,
.captcha-info-register {
    font-size: 0.8em;
    color: #C6C6C6;
}

.captcha-info-register {
    width: 90%;
    margin: 0 auto;
}

.dot {
    height: 0.5em;
    width: 0.5em;
    background-color: #DB2227;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 5px;
}

.installation-map {
    display: flex;
    gap: 0.5em;
    flex-direction: column;
}

.installation-map-buttons {
    display: flex;
    gap: 0.25em;
}

.installation-map-text {
    color: #DB2227;
}

.rz-chart-div {
    align-items: center;
}

    .rz-chart-div .rz-legend {
        position: relative !important;
    }

    .rz-chart-div .rz-chart {
        height: 400px;
    }

.rz-category-axis .rz-tick-text {
    font-size: .5em;
}

.privacy-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: end;
    margin-bottom: .5em;
}

    .privacy-links .privacy-link {
        display: flex;
    }

        .privacy-links .privacy-link a {
            text-decoration: none;
            margin-bottom: .5em;
        }

            .privacy-links .privacy-link a:hover {
                text-decoration: underline;
            }

.monitoring.tab-content-card {
    min-height: 550px;
}

.chart-period-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 1.5em;
}

/*Media-queries*/
@media(min-width:550px) {
    .myportal-banner-title {
        font-size: 2.5em;
    }

    .page-header li {
        margin-right: 2em;
    }

    .page-header .icon-text {
        display: block;
    }

    .station-schedule-buttons {
        flex-direction: row;
    }

    .message-table-row-item {
        flex-direction: row;
    }

    .rz-category-axis .rz-tick-text {
        font-size: .8em;
    }
}


@media(min-width:600px) {
    .invoices-body-mobile .invoice-card {
        flex: 0 1 48%;
    }

    .schedule-container .schedule-legend-container {
        flex-direction: row;
    }

    .page-footer::before {
        content: '';
        position: absolute;
        background: url('../Images/svg/page-banner-toplo.svg') no-repeat;
        display: block;
        width: 100%;
        height: 100%;
        background-size: 50em;
        bottom: 0;
        left: 0;
        mix-blend-mode: color-dodge;
    }

    .page-footer ul {
        flex-direction: row;
        min-height: 8em;
    }
}

@media(min-width:768px) {

    .schedule-container .day-graph {
        flex-direction: row;
    }

    .periods .period {
        font-size: 1.2em;
    }

    .electronic-service-list-item {
        grid-template-columns: minmax(11em, 1fr) minmax(11em, 4fr) minmax(13.5em, 1fr) minmax(6em, 1fr);
    }

    .electronic-service-actions {
        flex-direction: row;
        justify-content: start;
        gap: 0.2em;
        padding-bottom: 0.5em;
        padding-left: 5em;
    }

    .electronic-service-info div {
        margin-bottom: 0;
    }

        .electronic-service-info div:first-child {
            margin-bottom: 0.7em;
        }

    .feedback-description {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rz-category-axis .rz-tick-text {
        font-size: 1em;
    }
}

@media(min-width:800px) {

    .body-content {
        margin-left: 4.5em;
        margin-right: 4.5em;
    }

    .myportal-banner {
        padding: 0 4.5em;
    }

    .myportal-tabs {
        border-bottom: 3px solid #fff;
        flex-direction: row;
    }

    .btn-toplo-primary,
    .btn-toplo-secondary,
    .btn-toplo-tertiary {
        padding: 0.9em 4em;
        border-radius: 4.5em;
    }

    .uploaded-img-btn-container {
        display: flex;
        flex-direction: row;
        align-items: start;
    }

    .uploaded-file-container {
        display: flex;
        flex-direction: row;
        align-items: start;
    }

    .profile-installations,
    .client-info {
        padding: 2em;
    }

        .profile-installations li {
            position: relative;
        }

    .profile-installation-actions-container {
        position: absolute;
        top: 0;
        right: 0;
    }

    .accidents-and-repairs-list-homepage {
        display: flex;
    }


    .page-footer .change-lng-button {
        margin-right: 2em
    }

    .is-mobile {
        display: none;
    }

    .is-desktop {
        display: block;
    }

    .blazored-toast {
        width: 30em;
    }

    .installation-filter {
        width: 25%;
    }

    .invoice-period-filter {
        width: 35%;
    }

    .invoice-status-filter {
        width: 35%;
    }

    .invoice-filters {
        flex-direction: row;
    }

    .close-select-btn {
        display: none;
    }

    .profile-installation > div {
        width: 32%;
    }

    .profile-card-content {
        padding: 2em 5em;
    }

    .installation-map {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .accident-legend {
        flex-direction: row;
    }
}

@media(min-width:1160px) {

    html,
    body {
        font-size: 14px;
    }

    .myportal-tabs {
        border-bottom: 3px solid #fff;
        flex-direction: row;
    }

    .unpaid-invoice.table-head .head-item:first-child,
    .unpaid-invoice.table-row .row-item:first-child {
        width: 13%;
    }

    .consumption-filter {
        display: flex;
        gap: 0.5em;
    }

    .select-container-widget {
        width: 14em;
    }

        .select-container-widget.width-2x {
            width: 20em;
        }

        .select-container-widget.width-4x {
            width: 48em;
        }

    .chart.tab-content-card {
        min-height: 530px;
    }

    .chart-no-data {
        margin-top: 200px;
    }

    .chart-period-container {
        flex-direction: row;
        gap: 1em;
    }
}

@media (min-width:1221px) {

    html,
    body {
        font-size: 15px;
    }
}


@media (min-width:1400px) {

    html,
    body {
        font-size: 16px;
    }

    .select-container-widget.width-2x {
        width: 26em;
    }

    .select-container-widget.width-4x {
        width: 60em;
    }
}

@media (min-width:1600px) {

    .select-container-widget.width-2x {
        width: 38em;
    }

    .select-container-widget.width-4x {
        width: 86em;
    }
}

@media (pointer: coarse) {
    .navItemPopover {
        display: none;
    }
}

/*Print query*/
@media print {
    header, footer, nav, .myportal-banner, .electronic-service-preview-actions {
        display: none !important;
    }

    .col-md {
        flex: 1 0 0%
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }
}