:root {
    --f7-theme-color: #29aee6;
    --f7-theme-color-rgb: 41, 174, 230;
    --f7-theme-color-shade: #1898ce;
    --f7-theme-color-tint: #4ebcea;

    --f7-button-text-transform: none;
    --f7-button-large-text-transform: none;
    --f7-button-small-text-transform: none;

    --f7-card-expandable-tablet-width: 100%;

    --f7-list-item-min-height: 40px;

    --f7-navbar-inner-padding-left: 0;
    --f7-navbar-inner-padding-right: 0;

    --f7-panel-width: 100%;

    --f7-popup-tablet-width: 550px;
    --f7-popup-box-shadow: none;
    --f7-popup-tablet-border-radius: 16px;

    --f7-toolbar-height: 43px;

    --bg-color-ipot-blue: #171F45;
    --bg-color-ipot-red: #C16161;

    --text-color-ez: #999DCE;

    --color-CA-D: #2196f3;
    --color-CA-B: #2196f3;
    --color-CA-S: #2196f3;
    --color-CA-R: #b669e9;
    --color-CA-T: #ff9800;
    --color-CA-M: #ff9800;
    --color-CA-W: #b669e9;

    --color-PE-PE: #4caf50;
    --color-IPO-IPO: #e91e63;
    --color-RUPS-RUPS: #88612b;
}

.actions-button {
    color: #FFFFDD;
}

.actions-grid .actions-button {
    width: 25% !important;
}

.actions-grid .actions-button .actions-button-media .container-bs {
    height: 40px;
    width: 40px;

    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;

    border-radius: 8px;
    color: white;
}

.actions-grid .actions-button .actions-button-media .container-bs[data-type="B"] {
    border: 2px solid #4FA77D;
    background: rgba(79, 167, 125, 0.40);
}

.actions-grid .actions-button .actions-button-media .container-bs[data-type="S"] {
    border: 2px solid #D75751;
    background: rgba(215, 87, 81, 0.40);
}

.actions-grid .actions-button .actions-button-media .container-icon {
    height: 40px;
    width: 40px;

    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;

    border-radius: 8px;
    background: #2B395B;

    color: white;
}

.actions-group:after {
    height: 0px !important;
}

.actions-button:after {
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
}

.actions-button.actions-button-bold {
    font-weight: 700;
}

.input-error-message,
.input-info,
.item-input-error-message,
.item-input-info {
    white-space: unset !important;
}

.bg-color-card {
    --f7-theme-color-bg-color: #06092A;
}

.bg-color-blue {
    --f7-theme-color-bg-color: #28385e;
}

.bg-color-blue-blur {
    --f7-theme-color-bg-color: rgba(88, 104, 185, 0.2);
}

.bg-color-green {
    --f7-theme-color-bg-color: #34868c;
}

.bg-color-green-blur {
    --f7-theme-color-bg-color: #142232;
}

.bg-color-red {
    --f7-theme-color-bg-color: #de726b;
}

.bg-color-red-blur {
    --f7-theme-color-bg-color: #28142d;
}

.bg-color-yellow {
    --f7-theme-color-bg-color: #b99b62;
}

.bg-color-yellow-blur {
    --f7-theme-color-bg-color: rgba(203, 185, 89, 0.13);
}

.border-color-blue {
    --f7-theme-color-border-color: #28385e;
}

.border-color-green {
    --f7-theme-color-border-color: #34868c;
}

.border-color-red {
    --f7-theme-color-border-color: #de726b;
}

.calendar-day-selected .calendar-day-number {
    background-color: #28385E;
}

.calendar-months {
    background-color: #06092A;
}

.calendar-week-day {
    color: #B5B6C0;
}

.card-backdrop {
    transform: translate3d(0, 0, 0);
    animation: none;
}

.card-backdrop::after {
    backdrop-filter: blur(15px);
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    opacity: 0;
    width: 100%;
    height: 100%;
}

.card-backdrop-in {
    opacity: 1;
    transition: 0.2s all linear;
}

.color-active {
    --f7-theme-color: #29aee6;
    --f7-theme-color-rgb: 41, 174, 230;
    --f7-theme-color-shade: #1898ce;
    --f7-theme-color-tint: #4ebcea;
}

.color-blue {
    --f7-theme-color: #2b395b;
    --f7-theme-color-rgb: 43, 57, 91;
    --f7-theme-color-shade: #1e283f;
    --f7-theme-color-tint: #384a77;
}

.color-blue-order-sum {
    --f7-theme-color: #6682C4;
    --f7-theme-color-rgb: 102, 130, 196;
    --f7-theme-color-shade: #496ab9;
    --f7-theme-color-tint: #839acf;
}

.color-green {
    --f7-theme-color: #398185;
    --f7-theme-color-rgb: 57, 129, 133;
    --f7-theme-color-shade: #2d6568;
    --f7-theme-color-tint: #459da2;
}

.color-red {
    --f7-theme-color: #df635a;
    --f7-theme-color-rgb: 223, 99, 90;
    --f7-theme-color-shade: #d84338;
    --f7-theme-color-tint: #e6837c;
}

.color-yellow {
    --f7-theme-color: #b99b62;
    --f7-theme-color-rgb: 185, 155, 98;
    --f7-theme-color-shade: #a8884b;
    --f7-theme-color-tint: #c6ad7e;
}

.color-ipot-1 {
    --f7-theme-color: #1A304A;
    --f7-theme-color-rgb: 26, 48, 74;
    --f7-theme-color-shade: #0f1c2c;
    --f7-theme-color-tint: #254468;
}

.dialog {
    z-index: 135000;
}

.disabled {
    cursor: not-allowed !important;
}

.ios {
    --f7-page-bg-color: #ffffff;
}

.ios .message-received .message-name {
    margin-left: 0 !important;
}

.ios .message-received .message-bubble {
    padding-left: 0 !important;
    -webkit-mask-box-image: unset !important;
}

.list .item-link .item-inner:before {
    /* transform: rotate(90deg); */
}

.menu-dropdown-content {
    z-index: 20;
}

.sortable-cell-active {
    font-weight: bold !important;
    color: white !important;
}

table.data-table .sticky-thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

table.data-table .sticky-tfoot {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.text-color-blue {
    --f7-theme-color-text-color: #28385e;
}

.text-color-blue-order-sum {
    --f7-theme-color-text-color: #6682C4;
}

.text-color-gray {
    --f7-theme-color-text-color: #8e8e93;
}

.text-color-green {
    --f7-theme-color-text-color: #34868c;
}

.text-color-green-blur {
    --f7-theme-color-text-color: #507470;
}

.text-color-orange {
    --f7-theme-color-text-color: #E49436;
}

.text-color-red {
    --f7-theme-color-text-color: #de726b;
}

.text-color-red-blur {
    --f7-theme-color-text-color: #965552;
}

.text-color-yellow {
    --f7-theme-color-text-color: #b99b62;
}

.toolbar-bottom-level-2~* {
    --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height) * 2;
}

.theme-dark,
.md.theme-dark,
.ios.theme-dark {
    --f7-actions-bg-color: #171A31;
    --f7-actions-border-radius: 11px 11px 0 0;
    --f7-actions-button-font-size: 18px;
    --f7-actions-button-text-align: center;
    --f7-actions-label-text-color: rgba(255, 255, 255, 0.5);
    --f7-actions-label-justify-content: center;

    --f7-bars-bg-color: #03061d;
    --f7-bars-bg-color-rgb: #03061d;

    --f7-calendar-disabled-text-color: #d4d4d450;

    --f7-card-bg-color: #06092A;
    --f7-card-border-radius: 8px;
    --f7-card-expandable-bg-color: transparent;
    --f7-card-expandable-box-shadow: 0;
    --f7-card-header-border-color: var(--bg-color-ipot-blue);

    --f7-checkbox-border-width: 1px;
    --f7-checkbox-inactive-color: #8E8E8E;
    --f7-checkbox-size: 14px;

    --f7-dialog-bg-color: #ffffff;
    --f7-dialog-button-font-size: 16px;
    --f7-dialog-button-text-color: #192049;
    --f7-dialog-button-text-transform: none;
    --f7-dialog-button-letter-spacing: 0px;
    --f7-dialog-button-height: 48px;
    --f7-dialog-text-color: rgba(25, 32, 73, 0.8);
    --f7-dialog-title-font-size: 19px;
    --f7-dialog-title-font-weight: 700;
    --f7-dialog-title-line-height: 26px;
    --f7-dialog-width: 400px;

    --f7-list-bg-color: 'transparent';
    --f7-list-item-divider-bg-color: 'transparent';
    --f7-list-item-divider-font-size: 16px;
    --f7-list-item-title-font-size: 14px;

    --f7-menu-bg-color: #2b395b;
    --f7-menu-item-border-radius: 4px;
    --f7-menu-item-height: 30px;

    --f7-page-bg-color: #03061d;
    --f7-panel-width: 375px;

    --f7-popover-bg-color: #03061d;

    --f7-progressbar-height: 6px;
    --f7-progressbar-border-radius: 30px;

    --f7-searchbar-bg-color: 'transparent';
    --f7-searchbar-input-bg-color: '#03061d';

    --f7-sheet-bg-color: var(--f7-bars-bg-color);
    --f7-sheet-height: auto;

    --f7-tabbar-link-text-transform: initial;

    --f7-toolbar-bg-color: var(--f7-bars-bg-color);
    --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);

    --f7-tabbar-link-font-weight: 400;
    --f7-tabbar-link-active-color: white;
    --f7-tabbar-link-inactive-color: white;

    --f7-table-head-cell-height: 24px;
    --f7-table-body-cell-height: 24px;
    --f7-table-cell-padding-horizontal: 20px;
    --f7-table-edge-cell-padding-horizontal: 20px;
    --f7-table-label-cell-padding-horizontal: 20px;

    --f7-text-color: #b5b6c0;

    --skeleton-color: #20243c;
}

.margin-horizontal-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.margin-half-half {
    margin: calc(var(--f7-typography-margin) / 4);
}

.margin-left-half-half {
    margin-left: calc(var(--f7-typography-margin) / 4);
}

.margin-top-half-half {
    margin-top: calc(var(--f7-typography-margin) / 4);
}

.margin-right-half-half {
    margin-right: calc(var(--f7-typography-margin) / 4);
}

.margin-bottom-half-half {
    margin-bottom: calc(var(--f7-typography-margin) / 4);
}

.margin-horizontal-half-half {
    margin-left: calc(var(--f7-typography-margin) / 4);
    margin-right: calc(var(--f7-typography-margin) / 4);
}

.margin-vertical-half-half {
    margin-top: calc(var(--f7-typography-margin) / 4);
    margin-bottom: calc(var(--f7-typography-margin) / 4);
}

.padding-half-half {
    padding: calc(var(--f7-typography-padding) / 4);
}

.padding-left-half-half {
    padding-left: calc(var(--f7-typography-padding) / 4);
}

.padding-top-half-half {
    padding-top: calc(var(--f7-typography-padding) / 4);
}

.padding-right-half-half {
    padding-right: calc(var(--f7-typography-padding) / 4);
}

.padding-bottom-half-half {
    padding-bottom: calc(var(--f7-typography-padding) / 4);
}

.padding-horizontal-half-half {
    padding-left: calc(var(--f7-typography-padding) / 4);
    padding-right: calc(var(--f7-typography-padding) / 4);
}

.padding-vertical-half-half {
    padding-top: calc(var(--f7-typography-padding) / 4);
    padding-bottom: calc(var(--f7-typography-padding) / 4);
}

.margin-md {
    margin: 0;
}

.margin-top-sm,
.margin-top-md,
.margin-top-lg,
.margin-top-xl,
.margin-top-xxl,
.margin-top-xxxl {
    margin-top: 0;
}

.message {
    max-width: 100%;
}

.message.message-received {
    padding-right: 20%;
}

.message.message-sent {
    padding-left: 20%;
}

.message:not(.message-last) .message-avatar {
    opacity: 1 !important;
}

.message:not(.message-first) .message-avatar {
    opacity: 0 !important;
}

.message+.message:not(.message-first) {
    margin-top: 4px !important;
}

.message-avatar {
    height: 26px !important;
    width: 26px !important;
}

.message.message-showname .message-name {
    display: unset !important;
}

.message:not(.message-first) .message-name {
    display: none;
}

.message:not(.message-last) .message-avatar {
    opacity: 0;
}

.md .dialog-buttons {
    height: unset;
    padding: 3px 40px 30px;
}

.md .dialog-button {
    width: 150px;
    height: 48px;

    line-height: 48px;

    background: #E2E4F1;
    border-radius: 34px;
}

.md .dialog-button+.dialog-button {
    margin-left: 20px;
}

.md .dialog-button.dialog-button-bold {
    background: #1C5FAD;
    color: white;
}

.md .tabbar-scrollable .link,
.md .tabbar-scrollable .tab-link {
    padding: 0 18px;
}

.md .contacts-list .list-group-title {
    background-color: var(--f7-page-bg-color);
}

.popup.theme-dark,
.theme-dark .popup {
    background: var(--f7-page-bg-color);
}

.ipot-app .popover-angle.no-angle {
    display: none;
}

.ipot-app .popover-angle.on-top {
    left: 0;
    top: -26px;
}

.ipot-app .popover-angle.on-top:after {
    left: 0;
    top: 19px;
}

.ipot-app .popover-angle {
    width: 26px;
    height: 26px;
    position: absolute;
    left: -26px;
    top: 0;
    z-index: 100;
    /* overflow: hidden; */
}

.ipot-app .popover-angle:after {
    content: '';
    background: var(--f7-popover-bg-color);
    width: 26px;
    height: 26px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 3px;
    transform: rotate(45deg);
}

.padding-horizontal-sm {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.popover-info {
    --f7-popover-bg-color: white;
    --f7-popover-border-radius: 16px;
}

.popup-behind {
    transform: translate3d(0, 0, 0) !important;
}

.tooltip-init {
    cursor: pointer;
}

.row.gap-8 {
    --f7-grid-gap: 8px;
    --f7-grid-row-gap: 8px;
}

.row.gap-16 {
    --f7-grid-gap: 16px;
    --f7-grid-row-gap: 16px;
}

.row.gap-32 {
    --f7-grid-gap: 32px;
    --f7-grid-row-gap: 32px;
}

@media (min-height: 800px) {
    .smart-select-popover .popover-inner {
        max-height: unset;
    }
}

@media (min-width: 568px) {
    .align-self-center-sm {
        align-self: center !important;
    }

    .align-self-flex-end-sm {
        align-self: flex-end !important;
    }

    .align-self-flex-start-sm {
        align-self: flex-start !important;
    }

    .display-block-sm {
        display: block !important;
    }

    .display-flex-sm {
        display: flex !important;
    }

    .display-none-sm {
        display: none !important;
    }

    .margin-top-sm {
        margin-top: var(--f7-typography-margin) !important;
    }

    .margin-top-half-sm {
        margin-top: calc(var(--f7-typography-margin)/ 2) !important
    }

    .margin-left-sm {
        margin-left: var(--f7-typography-margin) !important;
    }

    .margin-left-half-sm {
        margin-left: calc(var(--f7-typography-margin)/ 2) !important
    }

    .margin-horizontal-sm {
        margin-left: var(--f7-typography-margin) !important;
        margin-right: var(--f7-typography-margin) !important;
    }

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

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

    .no-margin-left-sm {
        margin-left: 0px !important;
    }

    .no-margin-horizontal-sm {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .padding-horizontal-sm {
        padding-left: var(--f7-typography-padding) !important;
        padding-right: var(--f7-typography-padding) !important;
    }

    .justify-content-flex-start-sm {
        justify-content: flex-start !important;
    }

    .text-align-start-sm {
        text-align: start !important;
    }

    .w-90-sm {
        width: 90% !important;
    }
}

@media (min-width: 768px) {
    .align-self-center-md {
        align-self: center !important;
    }

    .align-self-flex-end-md {
        align-self: flex-end !important;
    }

    .display-block-md {
        display: block !important;
    }

    .display-flex-md {
        display: flex !important;
    }

    .display-none-md {
        display: none !important;
    }

    .margin-md {
        margin: var(--f7-typography-margin) !important;
    }

    .margin-top-md {
        margin-top: var(--f7-typography-margin) !important;
    }

    .margin-top-half-md {
        margin-top: calc(var(--f7-typography-margin)/ 2) !important
    }

    .margin-left-md {
        margin-left: var(--f7-typography-margin) !important;
    }

    .margin-left-half-md {
        margin-left: calc(var(--f7-typography-margin)/ 2) !important
    }

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

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

    .no-margin-horizontal-md {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .justify-content-flex-start-md {
        justify-content: flex-start !important;
    }

    .position-sticky-top-md {
        position: sticky !important;
        top: 0;
        z-index: 4;
        background: var(--f7-page-bg-color);
    }
}

@media (min-width: 1024px) {
    .align-self-center-lg {
        align-self: center !important;
    }

    .align-self-flex-end-lg {
        align-self: flex-end !important;
    }

    .display-block-lg {
        display: block !important;
    }

    .display-flex-lg {
        display: flex !important;
    }

    .display-none-lg {
        display: none !important;
    }

    .justify-content-flex-end-lg {
        justify-content: flex-end !important;
    }

    .margin-top-lg {
        margin-top: var(--f7-typography-margin) !important;
    }

    .margin-top-half-lg {
        margin-top: calc(var(--f7-typography-margin)/ 2) !important
    }

    .margin-left-lg {
        margin-left: var(--f7-typography-margin) !important;
    }

    .margin-left-half-lg {
        margin-left: calc(var(--f7-typography-margin)/ 2) !important
    }

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

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

    .no-margin-horizontal-lg {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .position-sticky-top-lg {
        position: sticky !important;
        top: 0;
        z-index: 4;
        background: var(--f7-page-bg-color);
    }

    .no-flex-direction-column-reverse-lg {
        flex-direction: column !important;
    }
}

@media (min-width: 1200px) {
    .align-self-center-xl {
        align-self: center !important;
    }

    .align-self-flex-end-xl {
        align-self: flex-end !important;
    }

    .display-block-xl {
        display: block !important;
    }

    .display-flex-xl {
        display: flex !important;
    }

    .display-none-xl {
        display: none !important;
    }

    .margin-top-xl {
        margin-top: var(--f7-typography-margin) !important;
    }

    .margin-top-half-xl {
        margin-top: calc(var(--f7-typography-margin)/ 2) !important
    }

    .margin-left-xl {
        margin-left: calc(var(--f7-typography-margin)/ 2) !important
    }

    .margin-left-half-xl {
        margin-left: calc(var(--f7-typography-margin)/ 2) !important
    }

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

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

@media (min-width: 1500px) {
    .align-self-center-xxl {
        align-self: center !important;
    }

    .align-self-flex-end-xxl {
        align-self: flex-end !important;
    }

    .display-block-xxl {
        display: block !important;
    }

    .display-flex-xxl {
        display: flex !important;
    }

    .display-none-xxl {
        display: none !important;
    }

    .margin-top-xxl {
        margin-top: var(--f7-typography-margin) !important;
    }

    .margin-top-half-xxl {
        margin-top: calc(var(--f7-typography-margin)/ 2) !important
    }

    .margin-left-xxl {
        margin-left: calc(var(--f7-typography-margin)/ 2) !important
    }

    .margin-left-half-xxl {
        margin-left: calc(var(--f7-typography-margin)/ 2) !important
    }

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

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

    .row .xxlarge-5 {
        --f7-cols-per-row: 20;
    }

    .row .xxlarge-10 {
        --f7-cols-per-row: 10;
    }

    .row .xxlarge-15 {
        --f7-cols-per-row: 6.66666667;
    }

    .row .xxlarge-20 {
        --f7-cols-per-row: 5;
    }

    .row .xxlarge-25 {
        --f7-cols-per-row: 4;
    }

    .row .xxlarge-30 {
        --f7-cols-per-row: 3.33333333;
    }

    .row .xxlarge-33 {
        --f7-cols-per-row: 3;
    }

    .row .xxlarge-35 {
        --f7-cols-per-row: 2.85714286;
    }

    .row .xxlarge-40 {
        --f7-cols-per-row: 2.5;
    }

    .row .xxlarge-45 {
        --f7-cols-per-row: 2.22222222;
    }

    .row .xxlarge-50 {
        --f7-cols-per-row: 2;
    }

    .row .xxlarge-55 {
        --f7-cols-per-row: 1.81818182;
    }

    .row .xxlarge-60 {
        --f7-cols-per-row: 1.66666667;
    }

    .row .xxlarge-65 {
        --f7-cols-per-row: 1.53846154;
    }

    .row .xxlarge-66 {
        --f7-cols-per-row: 1.5;
    }

    .row .xxlarge-70 {
        --f7-cols-per-row: 1.42857143;
    }

    .row .xxlarge-75 {
        --f7-cols-per-row: 1.33333333;
    }

    .row .xxlarge-80 {
        --f7-cols-per-row: 1.25;
    }

    .row .xxlarge-85 {
        --f7-cols-per-row: 1.17647059;
    }

    .row .xxlarge-90 {
        --f7-cols-per-row: 1.11111111;
    }

    .row .xxlarge-95 {
        --f7-cols-per-row: 1.05263158;
    }

    .row .xxlarge-100 {
        --f7-cols-per-row: 1;
    }

    .row .xxlarge-auto:nth-last-of-type(1),
    .row .xxlarge-auto:nth-last-of-type(1)~.xxlarge-auto {
        --f7-cols-per-row: 1;
    }

    .row .xxlarge-auto:nth-last-of-type(2),
    .row .xxlarge-auto:nth-last-of-type(2)~.xxlarge-auto {
        --f7-cols-per-row: 2;
    }

    .row .xxlarge-auto:nth-last-of-type(3),
    .row .xxlarge-auto:nth-last-of-type(3)~.xxlarge-auto {
        --f7-cols-per-row: 3;
    }

    .row .xxlarge-auto:nth-last-of-type(4),
    .row .xxlarge-auto:nth-last-of-type(4)~.xxlarge-auto {
        --f7-cols-per-row: 4;
    }

    .row .xxlarge-auto:nth-last-of-type(5),
    .row .xxlarge-auto:nth-last-of-type(5)~.xxlarge-auto {
        --f7-cols-per-row: 5;
    }

    .row .xxlarge-auto:nth-last-of-type(6),
    .row .xxlarge-auto:nth-last-of-type(6)~.xxlarge-auto {
        --f7-cols-per-row: 6;
    }

    .row .xxlarge-auto:nth-last-of-type(7),
    .row .xxlarge-auto:nth-last-of-type(7)~.xxlarge-auto {
        --f7-cols-per-row: 7;
    }

    .row .xxlarge-auto:nth-last-of-type(8),
    .row .xxlarge-auto:nth-last-of-type(8)~.xxlarge-auto {
        --f7-cols-per-row: 8;
    }

    .row .xxlarge-auto:nth-last-of-type(9),
    .row .xxlarge-auto:nth-last-of-type(9)~.xxlarge-auto {
        --f7-cols-per-row: 9;
    }

    .row .xxlarge-auto:nth-last-of-type(10),
    .row .xxlarge-auto:nth-last-of-type(10)~.xxlarge-auto {
        --f7-cols-per-row: 10;
    }

    .row .xxlarge-auto:nth-last-of-type(11),
    .row .xxlarge-auto:nth-last-of-type(11)~.xxlarge-auto {
        --f7-cols-per-row: 11;
    }

    .row .xxlarge-auto:nth-last-of-type(12),
    .row .xxlarge-auto:nth-last-of-type(12)~.xxlarge-auto {
        --f7-cols-per-row: 12;
    }

    .row .xxlarge-auto:nth-last-of-type(13),
    .row .xxlarge-auto:nth-last-of-type(13)~.xxlarge-auto {
        --f7-cols-per-row: 13;
    }

    .row .xxlarge-auto:nth-last-of-type(14),
    .row .xxlarge-auto:nth-last-of-type(14)~.xxlarge-auto {
        --f7-cols-per-row: 14;
    }

    .row .xxlarge-auto:nth-last-of-type(15),
    .row .xxlarge-auto:nth-last-of-type(15)~.xxlarge-auto {
        --f7-cols-per-row: 15;
    }

    .row .xxlarge-auto:nth-last-of-type(16),
    .row .xxlarge-auto:nth-last-of-type(16)~.xxlarge-auto {
        --f7-cols-per-row: 16;
    }

    .row .xxlarge-auto:nth-last-of-type(17),
    .row .xxlarge-auto:nth-last-of-type(17)~.xxlarge-auto {
        --f7-cols-per-row: 17;
    }

    .row .xxlarge-auto:nth-last-of-type(18),
    .row .xxlarge-auto:nth-last-of-type(18)~.xxlarge-auto {
        --f7-cols-per-row: 18;
    }

    .row .xxlarge-auto:nth-last-of-type(19),
    .row .xxlarge-auto:nth-last-of-type(19)~.xxlarge-auto {
        --f7-cols-per-row: 19;
    }

    .row .xxlarge-auto:nth-last-of-type(20),
    .row .xxlarge-auto:nth-last-of-type(20)~.xxlarge-auto {
        --f7-cols-per-row: 20;
    }

    .row .xxlarge-auto:nth-last-of-type(21),
    .row .xxlarge-auto:nth-last-of-type(21)~.xxlarge-auto {
        --f7-cols-per-row: 21;
    }

    .row .xxlarge-auto:nth-last-of-type(22),
    .row .xxlarge-auto:nth-last-of-type(22)~.xxlarge-auto {
        --f7-cols-per-row: 22;
    }
}

@media (min-width: 1920px) {
    .align-self-center-xxxl {
        align-self: center !important;
    }

    .align-self-flex-end-xxxl {
        align-self: flex-end !important;
    }

    .display-block-xxxl {
        display: block !important;
    }

    .display-flex-xxxl {
        display: flex !important;
    }

    .display-none-xxxl {
        display: none !important;
    }

    .margin-top-xxxl {
        margin-top: var(--f7-typography-margin) !important;
    }

    .margin-top-half-xxxl {
        margin-top: calc(var(--f7-typography-margin)/ 2) !important
    }

    .margin-left-xxxl {
        margin-left: calc(var(--f7-typography-margin)/ 2) !important
    }

    .margin-left-half-xxxl {
        margin-left: calc(var(--f7-typography-margin)/ 2) !important
    }

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

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

    .d-xxxl-block {
        display: block !important;
    }

    .row .xxxlarge-5 {
        --f7-cols-per-row: 20;
    }

    .row .xxxlarge-10 {
        --f7-cols-per-row: 10;
    }

    .row .xxxlarge-15 {
        --f7-cols-per-row: 6.66666667;
    }

    .row .xxxlarge-20 {
        --f7-cols-per-row: 5;
    }

    .row .xxxlarge-25 {
        --f7-cols-per-row: 4;
    }

    .row .xxxlarge-30 {
        --f7-cols-per-row: 3.33333333;
    }

    .row .xxxlarge-33 {
        --f7-cols-per-row: 3;
    }

    .row .xxxlarge-35 {
        --f7-cols-per-row: 2.85714286;
    }

    .row .xxxlarge-40 {
        --f7-cols-per-row: 2.5;
    }

    .row .xxxlarge-45 {
        --f7-cols-per-row: 2.22222222;
    }

    .row .xxxlarge-50 {
        --f7-cols-per-row: 2;
    }

    .row .xxxlarge-55 {
        --f7-cols-per-row: 1.81818182;
    }

    .row .xxxlarge-60 {
        --f7-cols-per-row: 1.66666667;
    }

    .row .xxxlarge-65 {
        --f7-cols-per-row: 1.53846154;
    }

    .row .xxxlarge-66 {
        --f7-cols-per-row: 1.5;
    }

    .row .xxxlarge-70 {
        --f7-cols-per-row: 1.42857143;
    }

    .row .xxxlarge-75 {
        --f7-cols-per-row: 1.33333333;
    }

    .row .xxxlarge-80 {
        --f7-cols-per-row: 1.25;
    }

    .row .xxxlarge-85 {
        --f7-cols-per-row: 1.17647059;
    }

    .row .xxxlarge-90 {
        --f7-cols-per-row: 1.11111111;
    }

    .row .xxxlarge-95 {
        --f7-cols-per-row: 1.05263158;
    }

    .row .xxxlarge-100 {
        --f7-cols-per-row: 1;
    }

    .row .xxxlarge-auto:nth-last-of-type(1),
    .row .xxxlarge-auto:nth-last-of-type(1)~.xxxlarge-auto {
        --f7-cols-per-row: 1;
    }

    .row .xxxlarge-auto:nth-last-of-type(2),
    .row .xxxlarge-auto:nth-last-of-type(2)~.xxxlarge-auto {
        --f7-cols-per-row: 2;
    }

    .row .xxxlarge-auto:nth-last-of-type(3),
    .row .xxxlarge-auto:nth-last-of-type(3)~.xxxlarge-auto {
        --f7-cols-per-row: 3;
    }

    .row .xxxlarge-auto:nth-last-of-type(4),
    .row .xxxlarge-auto:nth-last-of-type(4)~.xxxlarge-auto {
        --f7-cols-per-row: 4;
    }

    .row .xxxlarge-auto:nth-last-of-type(5),
    .row .xxxlarge-auto:nth-last-of-type(5)~.xxxlarge-auto {
        --f7-cols-per-row: 5;
    }

    .row .xxxlarge-auto:nth-last-of-type(6),
    .row .xxxlarge-auto:nth-last-of-type(6)~.xxxlarge-auto {
        --f7-cols-per-row: 6;
    }

    .row .xxxlarge-auto:nth-last-of-type(7),
    .row .xxxlarge-auto:nth-last-of-type(7)~.xxxlarge-auto {
        --f7-cols-per-row: 7;
    }

    .row .xxxlarge-auto:nth-last-of-type(8),
    .row .xxxlarge-auto:nth-last-of-type(8)~.xxxlarge-auto {
        --f7-cols-per-row: 8;
    }

    .row .xxxlarge-auto:nth-last-of-type(9),
    .row .xxxlarge-auto:nth-last-of-type(9)~.xxxlarge-auto {
        --f7-cols-per-row: 9;
    }

    .row .xxxlarge-auto:nth-last-of-type(10),
    .row .xxxlarge-auto:nth-last-of-type(10)~.xxxlarge-auto {
        --f7-cols-per-row: 10;
    }

    .row .xxxlarge-auto:nth-last-of-type(11),
    .row .xxxlarge-auto:nth-last-of-type(11)~.xxxlarge-auto {
        --f7-cols-per-row: 11;
    }

    .row .xxxlarge-auto:nth-last-of-type(12),
    .row .xxxlarge-auto:nth-last-of-type(12)~.xxxlarge-auto {
        --f7-cols-per-row: 12;
    }

    .row .xxxlarge-auto:nth-last-of-type(13),
    .row .xxxlarge-auto:nth-last-of-type(13)~.xxxlarge-auto {
        --f7-cols-per-row: 13;
    }

    .row .xxxlarge-auto:nth-last-of-type(14),
    .row .xxxlarge-auto:nth-last-of-type(14)~.xxxlarge-auto {
        --f7-cols-per-row: 14;
    }

    .row .xxxlarge-auto:nth-last-of-type(15),
    .row .xxxlarge-auto:nth-last-of-type(15)~.xxxlarge-auto {
        --f7-cols-per-row: 15;
    }

    .row .xxxlarge-auto:nth-last-of-type(16),
    .row .xxxlarge-auto:nth-last-of-type(16)~.xxxlarge-auto {
        --f7-cols-per-row: 16;
    }

    .row .xxxlarge-auto:nth-last-of-type(17),
    .row .xxxlarge-auto:nth-last-of-type(17)~.xxxlarge-auto {
        --f7-cols-per-row: 17;
    }

    .row .xxxlarge-auto:nth-last-of-type(18),
    .row .xxxlarge-auto:nth-last-of-type(18)~.xxxlarge-auto {
        --f7-cols-per-row: 18;
    }

    .row .xxxlarge-auto:nth-last-of-type(19),
    .row .xxxlarge-auto:nth-last-of-type(19)~.xxxlarge-auto {
        --f7-cols-per-row: 19;
    }

    .row .xxxlarge-auto:nth-last-of-type(20),
    .row .xxxlarge-auto:nth-last-of-type(20)~.xxxlarge-auto {
        --f7-cols-per-row: 20;
    }

    .row .xxxlarge-auto:nth-last-of-type(21),
    .row .xxxlarge-auto:nth-last-of-type(21)~.xxxlarge-auto {
        --f7-cols-per-row: 21;
    }

    .row .xxxlarge-auto:nth-last-of-type(22),
    .row .xxxlarge-auto:nth-last-of-type(22)~.xxxlarge-auto {
        --f7-cols-per-row: 22;
    }
}