html {
    --shape-s: .5rem;
    --shape-m: .75rem;
    --shape-l: 1.0rem;
    --shape-xl: 1.5rem;
    --shape-xxl: 1.75rem;
    --shape-xxxl: 2.5rem;
    --shape-xxxl-inner: 2rem;
    --shape-fab: 2.0rem;
    --shape-circle: 50%;
}

.shape-s {border-radius: var(--shape-s);}
.shape-m {border-radius: var(--shape-m);}
.shape-l {border-radius: var(--shape-l);}
.shape-xl {border-radius: var(--shape-xl);}
.shape-xxl {border-radius: var(--shape-xxl);}
.shape-xxxl {border-radius: var(--shape-xxxl);}

.h-100 {height: 100% !important;}

.w-auto {width: auto;}
.w-100 {width: 100% !important;}
.w-95 {width: 95%;}
.w-90 {width: 90%;}
.w-85 {width: 85%;}
.w-60 {width: 60%;}
.w-50 {width: 50%;}
.w-40 {width: 40%;}
.w-20 {width: 20%;}
.w-10 {width: 10%;}
.w-5 {width: 5%;}

/* region paddings and margins */
.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.mbc-4 {margin-bottom: 4px;}
.mbc-8 {margin-bottom: 8px;}
.mbc-12 {margin-bottom: 12px;}
.mbc-16 {margin-bottom: 16px;}
.mbc-20 {margin-bottom: 20px;}
@media (max-width: 768px) {
    .mbc-mobile-0 {margin-bottom: unset !important;}
    .mbc-mobile-4 {margin-bottom: 4px !important;}
    .mbc-mobile-8 {margin-bottom: 8px !important;}
    .mbc-mobile-12 {margin-bottom: 12px !important;}
    .mbc-mobile-16 {margin-bottom: 16px !important;}
    .mbc-mobile-20 {margin-bottom: 20px !important;}
}
@media (min-width: 769px) {
    .mbc-non-mobile-0 {margin-bottom: unset !important;}
    .mbc-non-mobile-4 {margin-bottom: 4px !important;}
    .mbc-non-mobile-8 {margin-bottom: 8px !important;}
    .mbc-non-mobile-12 {margin-bottom: 12px !important;}
    .mbc-non-mobile-16 {margin-bottom: 16px !important;}
    .mbc-non-mobile-20 {margin-bottom: 20px !important;}
}

.mtc-4 {margin-top: 4px;}
.mtc-8 {margin-top: 8px;}
.mtc-12 {margin-top: 12px;}
.mtc-16 {margin-top: 16px;}
.mtc-20 {margin-top: 20px;}
@media (max-width: 768px) {
    .mtc-mobile-0 {margin-top: unset !important;}
    .mtc-mobile-4 {margin-top: 4px !important;}
    .mtc-mobile-8 {margin-top: 8px !important;}
    .mtc-mobile-12 {margin-top: 12px !important;}
    .mtc-mobile-16 {margin-top: 16px !important;}
    .mtc-mobile-20 {margin-top: 20px !important;}
}
@media (min-width: 769px) {
    .mtc-non-mobile-0 {margin-top: unset !important;}
    .mtc-non-mobile-4 {margin-top: 4px !important;}
    .mtc-non-mobile-8 {margin-top: 8px !important;}
    .mtc-non-mobile-12 {margin-top: 12px !important;}
    .mtc-non-mobile-16 {margin-top: 16px !important;}
    .mtc-non-mobile-20 {margin-top: 20px !important;}
}

.mrc-4 {margin-right: 4px;}
.mrc-8 {margin-right: 8px;}
.mrc-12 {margin-right: 12px;}
.mrc-16 {margin-right: 16px;}
.mrc-20 {margin-right: 20px}
@media (max-width: 768px) {
    .mrc-mobile-0 {margin-right: unset !important;}
    .mrc-mobile-4 {margin-right: 4px !important;}
    .mrc-mobile-8 {margin-right: 8px !important;}
    .mrc-mobile-12 {margin-right: 12px !important;}
    .mrc-mobile-16 {margin-right: 16px !important;}
    .mrc-mobile-20 {margin-right: 20px !important;}
}
@media (min-width: 769px) {
    .mrc-non-mobile-0 {margin-right: unset !important;}
    .mrc-non-mobile-4 {margin-right: 4px !important;}
    .mrc-non-mobile-8 {margin-right: 8px !important;}
    .mrc-non-mobile-12 {margin-right: 12px !important;}
    .mrc-non-mobile-16 {margin-right: 16px !important;}
    .mrc-non-mobile-20 {margin-right: 20px !important;}
}

.mlc-4 {margin-left: 4px;}
.mlc-8 {margin-left: 8px;}
.mlc-12 {margin-left: 12px;}
.mlc-16 {margin-left: 16px;}
.mlc-20 {margin-left: 20px;}
@media (max-width: 768px) {
    .mlc-mobile-0 {margin-left: unset !important;}
    .mlc-mobile-4 {margin-left: 4px !important;}
    .mlc-mobile-8 {margin-left: 8px !important;}
    .mlc-mobile-12 {margin-left: 12px !important;}
    .mlc-mobile-16 {margin-left: 16px !important;}
    .mlc-mobile-20 {margin-left: 20px !important;}
}
@media (min-width: 769px) {
    .mlc-non-mobile-0 {margin-left: unset !important;}
    .mlc-non-mobile-4 {margin-left: 4px !important;}
    .mlc-non-mobile-8 {margin-left: 8px !important;}
    .mlc-non-mobile-12 {margin-left: 12px !important;}
    .mlc-non-mobile-16 {margin-left: 16px !important;}
    .mlc-non-mobile-20 {margin-left: 20px !important;}
}

.mc-4 {margin: 4px;}
.mc-8 {margin: 8px;}
.mc-12 {margin: 12px;}
.mc-16 {margin: 16px;}
.mc-20 {margin: 20px;}
@media (max-width: 768px) {
    .mc-mobile-0 {margin: unset !important;}
    .mc-mobile-4 {margin: 4px;}
    .mc-mobile-8 {margin: 8px;}
    .mc-mobile-12 {margin: 12px;}
    .mc-mobile-16 {margin: 16px;}
    .mc-mobile-20 {margin: 20px;}
}
@media (min-width: 769px) {
    .mc-non-mobile-0 {margin: unset !important;}
    .mc-non-mobile-4 {margin: 4px;}
    .mc-non-mobile-8 {margin: 8px;}
    .mc-non-mobile-12 {margin: 12px;}
    .mc-non-mobile-16 {margin: 16px;}
    .mc-non-mobile-20 {margin: 20px;}
}

html {
    --inset-top: env(safe-area-inset-top);
    --inset-bottom: env(safe-area-inset-bottom);
    --inset-left: env(safe-area-inset-left);
    --inset-right: env(safe-area-inset-right);

    --inset-top-or-20: max(env(safe-area-inset-top), 20px);
    --inset-bottom-or-20: max(env(safe-area-inset-bottom), 20px);
    --inset-left-or-20: max(env(safe-area-inset-left), 20px);
    --inset-right-or-20: max(env(safe-area-inset-right), 20px);

    --inset-top-or-40: max(env(safe-area-inset-top), 40px);
    --inset-bottom-or-40: max(env(safe-area-inset-bottom), 40px);
    --inset-left-or-40: max(env(safe-area-inset-left), 40px);
    --inset-right-or-40: max(env(safe-area-inset-right), 40px);
}

.mtc-20-or-inset {margin-top: var(--inset-top-or-20);}
.mbc-20-or-inset {margin-bottom: var(--inset-bottom-or-20);}
.mrc-20-or-inset {margin-right: var(--inset-right-or-20);}
.mlc-20-or-inset {margin-left: var(--inset-left-or-20);}

.mtc-inset {margin-top: var(--inset-top);}
.mbc-inset {margin-bottom: var(--inset-bottom);}
.mrc-inset {margin-right: var(--inset-right);}
.mlc-inset {margin-left: var(--inset-left);}

.ptc-inset {padding-top: var(--inset-top);}
.pbc-inset {padding-bottom: var(--inset-bottom);}
.prc-inset {padding-right: var(--inset-right);}
.plc-inset {padding-left: var(--inset-left);}

.pbc-4 {padding-bottom: 4px;}
.pbc-8 {padding-bottom: 8px;}
.pbc-12 {padding-bottom: 12px;}
.pbc-16 {padding-bottom: 16px;}
.pbc-20 {padding-bottom: 20px;}

.ptc-4 {padding-top: 4px;}
.ptc-8 {padding-top: 8px;}
.ptc-12 {padding-top: 12px;}
.ptc-16 {padding-top: 16px;}
.ptc-20 {padding-top: 20px;}

.prc-4 {padding-right: 4px;}
.prc-8 {padding-right: 8px;}
.prc-12 {padding-right: 12px;}
.prc-16 {padding-right: 16px;}
.prc-20 {padding-right: 20px}

.plc-4 {padding-left: 4px;}
.plc-8 {padding-left: 8px;}
.plc-12 {padding-left: 12px;}
.plc-16 {padding-left: 16px;}
.plc-20 {padding-left: 20px;}

.pc-4 {padding: 4px;}
.pc-8 {padding: 8px;}
.pc-12 {padding: 12px;}
.pc-16 {padding: 16px;}
.pc-20 {padding: 20px;}
.pc-20-modal {padding: 20px 20px var(--inset-bottom-or-20) 20px;}

.pvc-4 {padding-top: 4px;padding-bottom: 4px;}
.pvc-8 {padding-top: 8px;padding-bottom: 8px;}
.pvc-12 {padding-top: 12px;padding-bottom: 12px;}
.pvc-16 {padding-top: 16px;padding-bottom: 16px;}
.pvc-20 {padding-top: 20px;padding-bottom: 20px;}

.phc-4 {padding-right: 4px;padding-left: 4px;}
.phc-8 {padding-right: 8px;padding-left: 8px;}
.phc-12 {padding-right: 12px;padding-left: 12px;}
.phc-16 {padding-right: 16px;padding-left: 16px;}
.phc-20 {padding-right: 20px;padding-left: 20px;}

/* endregion */