/* FONTS */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* Base */

:root {
    /* New styles for trouw */

    --color-text: #000000;
    --color-description: #656565;
    --color-primary: #4BA8F9;
    --color-primary-2: #005293;
    --color-secondary: #CCEE6B;
    --color-secondary-2: #b7bf10;
    --color-red: #C21313;

    --font-primary: 'Poppins', Arial, Helvetica, sans-serif;

    /* ** */

    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-black-2: #262626;
    --color-gray: #656565;
    --color-gray-2: #A9A9A9;
    --color-gray-3: #2B2F3B;
    --color-gray-4: #3B3B3B;
    --color-gray-5: #19181D;
    --color-gray-6: #A7A7A9;
    --color-gray-7: #AAAAAA;
    --color-gray-8: #0f131c;
    --color-gray-9: #C8C8C8;
    --color-gray-10: #707070;
    --color-gray-11: #C7C1C1;
    --color-blue: #084B71;
    --color-blue-2: #2681B5;
    --color-blue-3: #1694DC;
    --color-blue-4: #1199DF;
    --color-blue-5: #063E5E;
    --color-blue-6: #5AC2DC;
    --color-blue-7: #0C429F;
    --color-blue-8: #0C6DA4;
    --color-blue-9: #60B3E2;
    --color-red-2: #AE3636;
    --color-red-3: #E56969;
    --color-purple: #8A0D98;
    --color-green: #3FA820;
    --color-neutral: #D8BE3D;
    --color-bad: #E47A7A;
    --color-good: #89C976;
    --main-gradient: transparent linear-gradient(180deg, var(--color-blue) 0%, var(--color-purple) 100%) 0% 0% no-repeat padding-box;
    --main-gradient-2: transparent linear-gradient(0deg, var(--color-blue) 0%, var(--color-purple) 100%) 0% 0% no-repeat padding-box;
    --main-gradient-3: transparent linear-gradient(270deg, var(--color-blue) 0%, var(--color-purple) 100%) 0% 0% no-repeat padding-box;
    --main-gradient-4: transparent linear-gradient(270deg, var(--color-purple) 0%, var(--color-blue) 100%) 0% 0% no-repeat padding-box;

    --navbar-height: 60px;
    --navbar-color: #FFFFFF;
    --color-navbar-button: #003D6E;
    --color-navbar-button-dropdown: #003D6E;

    --sidebar-width: 244px;
    --sidebar-accent-height: 98px;
    --sidebar-color-1: #003D6E;
    --sidebar-color-2: #002F54;
    --sidebar-color-active: #005293;
    --color-sidebar-separator-text: #bebebe;
    --color-sidebar-item-text: #000000;
    --color-sidebar-scrollbar: #b8be36;

    --sidebar-icon-size-x: 31px;
    --sidebar-icon-size-y: 31px;

    --login-bgcolor: #F0F0F0;
    --login-inner-bgcolor: #FFFFFF;
}

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

/* PLACEHOLDERS */
::placeholder {
    color: #CCCCCC;
    opacity: 1;
  }
  
/* Firefox */
::-moz-placeholder {
    color: #CCCCCC;
    opacity: 1;
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
    color: #CCCCCC;
    opacity: 1;
}

/* Microsoft Edge */
::-ms-input-placeholder {
    color: #CCCCCC;
    opacity: 1;
}

/* Safari (WebKit) */
::webkit-input-placeholder {
    color: #CCCCCC;
    opacity: 1;
}
/* ** */

body {
    background: #EDF1F8;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--color-black);
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    padding-top: 0;
    margin: 0;
    overflow-x: hidden;
}

body.navbar-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus {
    color: inherit;
}

.regular-link {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
}

b,
strong {
    font-weight: 600;
}

p {
    margin: 0;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

h2,
.h2 {
    font-size: 25px;
    font-weight: 400;
    line-height: 30px;
}

img {
    max-width: 100%;
    height: auto;
}

ul, ol {
    margin: 0;
    padding: 0;
    padding-left: 1em;
}

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

.mt-50 {
    margin-top: 50px;
}

.ms-auto {
    margin-left: auto !important;
}

.me-auto {
    margin-right: auto !important;
}

[hidden] {
    display: none !important;
}

@media (min-width: 1200px) {
    .hide-desktop {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    .hide-mobile {
        display: none !important;
    }
}

.w-100 {
    width: 100%;
}

.w-auto {
    width: auto;
}

.d-flex {
    display: -webkit-flex;
    display: flex;
}

.flex-column {
    -webkit-flex-direction: column;
    flex-direction: column;
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.align-items-center {
    -webkit-align-items: center;
    align-items: center;
}

.justify-content-center {
    -webkit-justify-content: center;
    justify-content: center;
}

.justify-content-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.justify-content-space-between {
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.flex-grow-1 {
    -webkit-flex-grow: 1 !important;
    flex-grow: 1 !important;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-lowercase {
    text-transform: lowercase;
}

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

.text-underline {
    text-decoration: underline;
}

.bg-color-red {
    background-color: var(--color-bad-notification) !important;
}

.bg-color-green {
    background-color: var(--color-good-notification) !important;
}

.color-neutral {
    color: var(--color-neutral);
}

.color-bad {
    color: var(--color-bad);
}

.color-good {
    color: var(--color-good);
}

.color-blue-3 {
    color: var(--color-blue-3);
}

.color-blue-6 {
    color: var(--color-blue-6);
}

.color-blue-9 {
    color: var(--color-blue-9);
}

.color-gray-7 {
    color: var(--color-gray-7);
}

.color-gray-11 {
    color: var(--color-gray-11);
}

.collapse {
    display: none;
}

.collapse.in {
    display: block;
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-property: height, visibility;
    transition-property: height, visibility;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

/* Anims */

@keyframes float-loader-rocket {
    0% {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    50% {
        -webkit-transform: translate(-50%, -60%);
        transform: translate(-50%, -60%);
    }
    100% {
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

@keyframes float-astronaut {
    0% {
        -webkit-transform: scale(1.75330769) translate(5%, 6%);
        transform: scale(1.75330769) translate(5%, 6%);
    }
    50% {
        -webkit-transform: scale(1.75330769) translate(5%, -1%);
        transform: scale(1.75330769) translate(5%, -1%);
    }
    100% {
        -webkit-transform: scale(1.75330769) translate(5%, 6%);
        transform: scale(1.75330769) translate(5%, 6%);
    }
}

/* Grid */

/* Row */
.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -20px;
}

.row > * {
    flex: 0 0 auto;
    padding: 0 20px;
}

.row-margin-top {
    margin-top: 30px;
}

/* Cols */
.col-1 {
    min-width: 8.3333333333%;
    max-width: 8.3333333333%;
    width: 8.3333333333%;
}

.col-2 {
    min-width: 16.66666667%;
    max-width: 16.66666667%;
    width: 16.66666667%;
}

.col-3 {
    min-width: 25%;
    max-width: 25%;
    width: 25%;
}

.col-4 {
    min-width: 33.33333333%;
    max-width: 33.33333333%;
    width: 33.33333333%;
}

.col-5 {
    min-width: 41.66666667%;
    max-width: 41.66666667%;
    width: 41.66666667%;
}

.col-6 {
    min-width: 50%;
    max-width: 50%;
    width: 50%;
}

.col-7 {
    min-width: 58.33333333%;
    max-width: 58.33333333%;
    width: 58.33333333%;
}

.col-8 {
    min-width: 66.66666667%;
    max-width: 66.66666667%;
    width: 66.66666667%;
}

.col-9 {
    min-width: 75%;
    max-width: 75%;
    width: 75%;
}

.col-10 {
    min-width: 83.33333333%;
    max-width: 83.33333333%;
    width: 83.33333333%;
}

.col-11 {
    min-width: 91.66666667%;
    max-width: 91.66666667%;
    width: 91.66666667%;
}

.col-12 {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}

/* Responsive */
/* SM */
@media (min-width: 576px) {
    .col-sm-1 {
        min-width: 8.3333333333%;
        max-width: 8.3333333333%;
        width: 8.3333333333%;
    }
    .col-sm-2 {
        min-width: 16.66666667%;
        max-width: 16.66666667%;
        width: 16.66666667%;
    }
    .col-sm-3 {
        min-width: 25%;
        max-width: 25%;
        width: 25%;
    }
    .col-sm-4 {
        min-width: 33.33333333%;
        max-width: 33.33333333%;
        width: 33.33333333%;
    }
    .col-sm-5 {
        min-width: 41.66666667%;
        max-width: 41.66666667%;
        width: 41.66666667%;
    }
    .col-sm-6 {
        min-width: 50%;
        max-width: 50%;
        width: 50%;
    }
    .col-sm-7 {
        min-width: 58.33333333%;
        max-width: 58.33333333%;
        width: 58.33333333%;
    }
    .col-sm-8 {
        min-width: 66.66666667%;
        max-width: 66.66666667%;
        width: 66.66666667%;
    }
    .col-sm-9 {
        min-width: 75%;
        max-width: 75%;
        width: 75%;
    }
    .col-sm-10 {
        min-width: 83.33333333%;
        max-width: 83.33333333%;
        width: 83.33333333%;
    }
    .col-sm-11 {
        min-width: 91.66666667%;
        max-width: 91.66666667%;
        width: 91.66666667%;
    }
    .col-sm-12 {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .col-sm-a {
        min-width: auto;
        max-width: auto;
        width: auto;
    }
    .justify-content-sm-end {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }
    .w-sm-100 {
        width: 100%;
    }
    .w-sm-auto {
        width: auto;
    }
}


/* MD */

@media (min-width: 768px) {
    .col-md-1 {
        min-width: 8.3333333333%;
        max-width: 8.3333333333%;
        width: 8.3333333333%;
    }
    .col-md-2 {
        min-width: 16.66666667%;
        max-width: 16.66666667%;
        width: 16.66666667%;
    }
    .col-md-3 {
        min-width: 25%;
        max-width: 25%;
        width: 25%;
    }
    .col-md-4 {
        min-width: 33.33333333%;
        max-width: 33.33333333%;
        width: 33.33333333%;
    }
    .col-md-5 {
        min-width: 41.66666667%;
        max-width: 41.66666667%;
        width: 41.66666667%;
    }
    .col-md-6 {
        min-width: 50%;
        max-width: 50%;
        width: 50%;
    }
    .col-md-7 {
        min-width: 58.33333333%;
        max-width: 58.33333333%;
        width: 58.33333333%;
    }
    .col-md-8 {
        min-width: 66.66666667%;
        max-width: 66.66666667%;
        width: 66.66666667%;
    }
    .col-md-9 {
        min-width: 75%;
        max-width: 75%;
        width: 75%;
    }
    .col-md-10 {
        min-width: 83.33333333%;
        max-width: 83.33333333%;
        width: 83.33333333%;
    }
    .col-md-11 {
        min-width: 91.66666667%;
        max-width: 91.66666667%;
        width: 91.66666667%;
    }
    .col-md-12 {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .col-md-a {
        min-width: auto;
        max-width: auto;
        width: auto;
    }
    .justify-content-md-end {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }
    .w-md-100 {
        width: 100%;
    }
    .w-md-auto {
        width: auto;
    }
}


/* LG */

@media (min-width: 992px) {
    .col-lg-1 {
        min-width: 8.3333333333%;
        max-width: 8.3333333333%;
        width: 8.3333333333%;
    }
    .col-lg-2 {
        min-width: 16.66666667%;
        max-width: 16.66666667%;
        width: 16.66666667%;
    }
    .col-lg-3 {
        min-width: 25%;
        max-width: 25%;
        width: 25%;
    }
    .col-lg-4 {
        min-width: 33.33333333%;
        max-width: 33.33333333%;
        width: 33.33333333%;
    }
    .col-lg-5 {
        min-width: 41.66666667%;
        max-width: 41.66666667%;
        width: 41.66666667%;
    }
    .col-lg-6 {
        min-width: 50%;
        max-width: 50%;
        width: 50%;
    }
    .col-lg-7 {
        min-width: 58.33333333%;
        max-width: 58.33333333%;
        width: 58.33333333%;
    }
    .col-lg-8 {
        min-width: 66.66666667%;
        max-width: 66.66666667%;
        width: 66.66666667%;
    }
    .col-lg-9 {
        min-width: 75%;
        max-width: 75%;
        width: 75%;
    }
    .col-lg-10 {
        min-width: 83.33333333%;
        max-width: 83.33333333%;
        width: 83.33333333%;
    }
    .col-lg-11 {
        min-width: 91.66666667%;
        max-width: 91.66666667%;
        width: 91.66666667%;
    }
    .col-lg-12 {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .col-lg-a {
        min-width: auto;
        max-width: auto;
        width: auto;
    }
    .justify-content-lg-end {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }
    .w-lg-100 {
        width: 100%;
    }
    .w-lg-auto {
        width: auto;
    }
}

/* XL */

@media (min-width: 1200px) {
    .col-xl-1 {
        min-width: 8.3333333333%;
        max-width: 8.3333333333%;
        width: 8.3333333333%;
    }
    .col-xl-2 {
        min-width: 16.66666667%;
        max-width: 16.66666667%;
        width: 16.66666667%;
    }
    .col-xl-3 {
        min-width: 25%;
        max-width: 25%;
        width: 25%;
    }
    .col-xl-4 {
        min-width: 33.33333333%;
        max-width: 33.33333333%;
        width: 33.33333333%;
    }
    .col-xl-5 {
        min-width: 41.66666667%;
        max-width: 41.66666667%;
        width: 41.66666667%;
    }
    .col-xl-6 {
        min-width: 50%;
        max-width: 50%;
        width: 50%;
    }
    .col-xl-7 {
        min-width: 58.33333333%;
        max-width: 58.33333333%;
        width: 58.33333333%;
    }
    .col-xl-8 {
        min-width: 66.66666667%;
        max-width: 66.66666667%;
        width: 66.66666667%;
    }
    .col-xl-9 {
        min-width: 75%;
        max-width: 75%;
        width: 75%;
    }
    .col-xl-10 {
        min-width: 83.33333333%;
        max-width: 83.33333333%;
        width: 83.33333333%;
    }
    .col-xl-11 {
        min-width: 91.66666667%;
        max-width: 91.66666667%;
        width: 91.66666667%;
    }
    .col-xl-12 {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .col-xl-a {
        min-width: auto;
        max-width: auto;
        width: auto;
    }
    .justify-content-xl-end {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }
    .w-xl-100 {
        width: 100%;
    }
    .w-xl-auto {
        width: auto;
    }
}


/* XXL */

@media (min-width: 1600px) {
    .col-xxl-1 {
        min-width: 8.3333333333%;
        max-width: 8.3333333333%;
        width: 8.3333333333%;
    }
    .col-xxl-2 {
        min-width: 16.66666667%;
        max-width: 16.66666667%;
        width: 16.66666667%;
    }
    .col-xxl-3 {
        min-width: 25%;
        max-width: 25%;
        width: 25%;
    }
    .col-xxl-4 {
        min-width: 33.33333333%;
        max-width: 33.33333333%;
        width: 33.33333333%;
    }
    .col-xxl-5 {
        min-width: 41.66666667%;
        max-width: 41.66666667%;
        width: 41.66666667%;
    }
    .col-xxl-6 {
        min-width: 50%;
        max-width: 50%;
        width: 50%;
    }
    .col-xxl-7 {
        min-width: 58.33333333%;
        max-width: 58.33333333%;
        width: 58.33333333%;
    }
    .col-xxl-8 {
        min-width: 66.66666667%;
        max-width: 66.66666667%;
        width: 66.66666667%;
    }
    .col-xxl-9 {
        min-width: 75%;
        max-width: 75%;
        width: 75%;
    }
    .col-xxl-10 {
        min-width: 83.33333333%;
        max-width: 83.33333333%;
        width: 83.33333333%;
    }
    .col-xxl-11 {
        min-width: 91.66666667%;
        max-width: 91.66666667%;
        width: 91.66666667%;
    }
    .col-xxl-12 {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .col-xxl-a {
        min-width: auto;
        max-width: auto;
        width: auto;
    }
    .justify-content-xxl-end {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }
    .w-xxl-100 {
        width: 100%;
    }
    .w-xxl-auto {
        width: auto;
    }
}

/* Grid end */

/* Navbar */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: calc(var(--sidebar-width) + 29px);
    z-index: 1001;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    header {
        padding-left: calc(var(--sidebar-width) + calc(29px * 0.7114583));
    }
}

.navbar-wrapper {
    background-color: #EDF1F8;
}

.navbar-row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
}

.navbar-logo {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}

.hoverable-logo > a {
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.hoverable-logo > a:hover,
.hoverable-logo > a:focus-visible {
    opacity: 0.8;
}

.navbar-logo h1 {
    line-height: 0;
}

.navbar-logo img {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    max-height: 60px;
    min-height: 60px;
}

.navbar-content {
    position: relative;
    flex-grow: 1;
}

.navbar-wallet-badges {
    flex-grow: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 5px 42px 0 29px;
}

.navbar-content-row {
    padding: 8px 0;
}

/* Breadcrumbs */

.breadcrubs-item {
    color: var(--color-breadcrumbs-item);
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.breadcrubs-item:hover,
.breadcrubs-item:focus-visible {
    color: var(--color-breadcrumbs-item-hover);
}

/* Breadcrumbs */

.navbar-items {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    margin-left: -16px;
    margin-right: -16px;
}

.navbar-items__col {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
}

.navbar-items__col.notifications-dropdown {
    min-width: 37.85714285%;
    max-width: 37.85714285%;
    width: 37.85714285%;
}

.navbar-items__col.info-cards {
    flex-grow: 1;
}

.navbar-toggler-nobs {
    display: none;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    cursor: pointer;
}

.navbar-toggler-nobs>.toggler-bar {
    position: relative;
    top: 0;
    left: 0;
    width: 37px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 3px;
    transform: rotateZ(0), translate(0, 0);
    transition: transform 0.3s ease, top 0.3s ease;
}

.navbar-toggler-nobs>.toggler-bar+.toggler-bar {
    margin-top: 5px;
}

.navbar-toggler-nobs.toggled>.toggler-bar:nth-child(1) {
    top: 9px;
    transform: rotateZ(-45deg);
}

.navbar-toggler-nobs.toggled>.toggler-bar:nth-child(2) {
    transform: scale(0);
}

.navbar-toggler-nobs.toggled>.toggler-bar:nth-child(3) {
    transform: rotateZ(45deg);
    top: -9px;
}

.navbar-item-dropdown-toggle {
    position: relative;
    max-width: 100%;
}

.navbar-item-dropdown-toggle-cart {
    position: static !important;
}

.navbar-item-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 100%;
    width: max-content;
    list-style-type: none;
    border-top: 2px solid var(--color-gray-10);
    padding: 0;
    margin: 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Navbar cart */

.navbar-item-dropdown-cart {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    height: auto;
    color: var(--color-secondary);
}

.navbar-item-dropdown-cart-wrap {
    background-color: var(--color-navbar-button-dropdown);
    padding: 13px 0 20px 20px;
}

.navbar-cart-heading {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

.navbar-cart-products-wrap {
    max-height: 50vh;
    margin-right: 5px;
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.navbar-cart-products {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    max-height: 50vh;
    list-style-type: none;
    padding: 0;
    padding-right: 15px;
    margin: 0;
    margin-top: 14px;
}

.navbar-cart-item + .navbar-cart-item {
    margin-top: 10px;
}

.navbar-cart-item-row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
}

.navbar-cart-item-thumb {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: 54px;
    max-width: 54px;
    width: 54px;
    min-height: 54px;
    max-height: 54px;
    height: 54px;
    background-color: var(--color-secondary);
    overflow: hidden;
}

.navbar-cart-item-thumb > img {
    display: block;
    max-width: 100%;
    height: auto;
}

.navbar-cart-item-content {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-grow: 1;
}

.navbar-cart-item-content-col {
    flex: 0 0 auto;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    padding-left: 5px;
}

.navbar-cart-item-content-col-row {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.navbar-cart-item-content-subcol + .navbar-cart-item-content-subcol {
    padding-left: 15px;
}

.navbar-cart-item-content-subcol.main + .navbar-cart-item-content-subcol {
    padding-left: 5px;
}

.navbar-cart-item-button-wrap + .navbar-cart-item-button-wrap {
    margin-top: 4px;
}

.navbar-cart-item-name {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
}

.navbar-cart-item-specs {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

.navbar-cart-products-summary {
    padding-right: 20px;
    margin-top: 15px;
}

.navbar-cart-summary-row {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.navbar-cart-summary-col {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.product-summary-title,
.product-summary-specs {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-align: right;
}

.navbar-cart-products-summary .btn.directional {
    font-weight: 400;
    text-transform: none;
    padding: 10px 23px;
}

.navbar-cart-item-button {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: 15px;
    max-width: 15px;
    width: 15px;
    min-height: 15px;
    max-height: 15px;
    height: 15px;
    background-color: #FFFFFF;
    color: #003d6e;
    font-size: 15px;
    font-weight: 500;
    line-height: 0;
    border: 1px solid #FFFFFF;
    -webkit-transition: background-color 0.3s ease, color 0.3s ease;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar-cart-item-button.round {
    border-radius: 50%;
}

.navbar-cart-item-button:hover,
.navbar-cart-item-button:focus-visible {
    color: #FFFFFF;
    background-color: #003d6e;
}

/* ** */


.navbar-item-dropdown-toggle:hover .navbar-item-dropdown,
.navbar-item-dropdown-toggle:focus-visible .navbar-item-dropdown,
.navbar-item-dropdown.active {
    opacity: 1;
    pointer-events: all;
}

.navbar-item-dropdown-item {
    position: relative;
}

.navbar-item-dropdown-item > a {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    background-color: var(--color-navbar-button-dropdown);
    padding: 0 15px !important;
}

.navbar-item-dropdown-item > a:hover,
.navbar-item-dropdown-item > a:focus-visible {
    background-color: var(--color-secondary-2);
}

.navbar-item-dropdown-item .button-icon-text {
    margin-left: 10px;
    margin-right: 10px;
}

.navbar-item-dropdown-toggle-button .button-icon-text {
    margin-left: 6.36px;
    margin-right: 10.47px;
}

.navbar-item-dropdown-item > a > span {
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
}

@media (max-width: 1199px) {
    .navbar-wrapper {
        padding: 0;
    }
    .navbar-logo {
        padding: 0;
    }
    .navbar-content-row {
        padding: 8px 16px;
    }
    .navbar-items {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .navbar-toggler-nobs {
        display: -webkit-flex;
        display: flex;
    }
    .navbar-item-dropdown-toggle-cart {
        max-width: 50%;
        margin-left: 0 !important;
    }
    .navbar-wallet-badges {
        order: 1;
        display: block;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        padding: 20px;
        padding-right: 77px;
    }
    .navbar-wallet-badges-left > *,
    .navbar-wallet-badges-right > *  {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        margin-bottom: 0 !important;
    }
    .navbar-wallet-badges-left > *,
    .navbar-wallet-badges-right > * {
        margin-top: 5px;
    }
    .navbar-item-dropdown-cart {
        position: fixed;
        top: var(--navbar-height);
        z-index: 1002;
    }
    .navbar-items__col.info-cards,
    .navbar-items__col.navbar-select {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        margin-bottom: 16px;
    }
}

/* Content */

.main-content {
    display: -webkit-flex;
    display: flex;
    min-height: 100vh;
    padding-top: var(--navbar-height);
}

.sidebar-wrap {
    position: fixed;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    width: var(--sidebar-width);
    min-height: 100vh;
    height: 100vh;
    background-color: #EDF1F8;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 24px;
    z-index: 1002;
}

.sidebar-accent-bottom {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    min-height: var(--sidebar-accent-height);
    max-height: var(--sidebar-accent-height);
    height: var(--sidebar-accent-height);
    /* margin-top: 100%; */
}

.content-wrap {
    position: relative;
    flex-grow: 1;
    min-width: 100vw;
    max-width: 100vw;
    width: 100vw;
    padding: 19px 29px;
    padding-left: calc(var(--sidebar-width) + 29px);
}

.sidebar-section-wrap {
    height: 100%;
    margin-top: 22px;
    padding: 18px 16px 48px;
    overflow-y: auto;
    scrollbar-width: thin;
    /* scrollbar-color: var(--color-sidebar-scrollbar); */
}

.sidebar-section {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin-bottom: 32px;
}

@media (max-width: 1199px) {
    header {
        padding-left: 0;
    }
    .sidebar-wrap {
        left: 0;
        min-height: calc(100vh - var(--navbar-height));
        height: calc(100vh - var(--navbar-height));
        box-shadow: 0px 0px 15px #00000059;
        margin-top: var(--navbar-height);
        -webkit-transform: translateX(calc(var(--sidebar-width) * -1));
        transform: translateX(calc(var(--sidebar-width) * -1));
        -webkit-transition: transform 0.3s ease;
        transition: transform 0.3s ease;
        z-index: 10021;
    }
    .navbar-open .sidebar-wrap {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    .content-wrap {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
    .content-wrap::before {
        content: none;
    }
    .content-social-item {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .content-social-item + .content-social-item {
        margin-top: 33px;
    }
}

@media (max-width: 767px) {
    .sidebar-wrap {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

/* Styling forms */

fieldset {
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
}

button {
    cursor: pointer;
}

input,
textarea {
    background-color: transparent;
}

input:focus-visible,
input:active,
textarea:focus-visible,
textarea:active {
    outline: none;
    border: 1px solid var(--color-blue-4);
}

*[disabled],
.introjs-disabled,
.select2-container--disabled {
    filter: grayscale();
    opacity: 0.3;
    pointer-events: none;
}

button {
    background-color: transparent;
    border: none;
    outline: none;
    border-radius: 0;
    outline: 0;
    padding: 0;
}

/* New error boxes */
.input-error-box-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    display: -webkit-flex;
    display: flex;
    -webkit-aling-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background-color: var(--color-input-error-box);
    color: var(--color-input-error-text);
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

.error .input-error-box-wrap {
    opacity: 1;
    pointer-events: all;
}

.error-box-popup {
    position: absolute;
    top: -13px;
    left: 50%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: max-content;
    max-width: 100%;
    width: max-content;
    background-color: var(--color-input-error-box);
    padding: 4px 10px;
    opacity: 0;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: var(--tooltip-z-index);
}

.error-box-popup::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px 7.5px 0 7.5px;
    border-color: var(--color-input-error-box) transparent transparent transparent;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    pointer-events: none;
}

.error-box-popup > * {
    color: var(--color-input-error-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: center;
}

.input-error-box-wrap:hover .error-box-popup,
.input-error-box-wrap:focus-visible .error-box-popup,
.input-error-box-wrap.active .error-box-popup,
.input-error-box-wrap.focus .error-box-popup {
    opacity: 1;
    pointer-events: all;
}

.error-box-popup.active,
.error-box-popup.focus {
    opacity: 1;
    pointer-events: all;
}
/* ** */

/* Login */

.login-section {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    min-height: 100vh;
    /* background-image: url('public/images/bg_stars.svg'); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    z-index: 1;
}

.login-container {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 1184px;
    min-height: 520px;
    max-height: 520px;
    height: 520px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.login-logo {
    position: absolute;
    top: -37px;
    left: 50%;
    padding: 0 20px;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
}

.login-logo h1 {
    line-height: 0;
}

.login-logo img {
    width: 180px;
}

.login-form-wrap {
    position: absolute;
    width: 100%;
    /* height: 100%; */
    background-color: var(--login-inner-bgcolor);
    box-shadow: 0px 0px 50px #00000026;
    isolation: isolate;
    z-index: 1;
}

.login-form-row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 100%;
    margin-right: 16px;
}

.login-form-spacing > * + * {
    margin-top: 15px;
}

.modal-form-spacing > * + * {
    margin-top: 20px;
}

.login-form-submit-margin {
    margin-top: 35px;
}

.login-form-col {
    flex: 0 0 auto;
}

.login-form-col:nth-child(1) {
    min-width: 48.79931389%;
    max-width: 48.79931389%;
    width: 48.79931389%;
}

.login-form-col:nth-child(2) {
    --padding: 32px;
    --margin: 16px;
    min-width: calc(51.20068610% - var(--margin));
    max-width: calc(51.20068610% - var(--margin));
    width: calc(51.20068610% - var(--margin));
    max-height: calc(575px - (var(--margin) * 2));
    padding-left: var(--padding);
    padding-right: var(--padding);
    margin: var(--margin) 0;
    margin-left: var(--margin);
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    margin-bottom: 72px;
}

.login-form-col-content {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
}

.login-form-img-wrap {
    width: 100%;
    height: 100%;
    background-image: url('/images/login-image.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.login-form {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
}

.login-form fieldset {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.login-form-info {
    color: #005293;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    text-align: center;
    margin-top: 10px;
}

.login-return {
    color: #AAAAAA;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    text-align: center;
    margin-top: 15px;
}

.login-return > a {
    color: #005293;
    font-weight: 600;
}

.login-form fieldset > * {
    width: 100%;
}

.login-form .form-item {
    max-width: 440px;
    width: 100%;
}

.login-form .form-item + .form-item {
    margin-top: 15px;
}

.login-form .form-item.larger-margin {
    margin-top: 35px;
}

.auth-logo-wrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    margin-bottom: 72px;
}

.auth-logo-wrapper > img {
    display: block;
    min-height: 64px;
    max-height: 64px;
    height: 64px;
    margin-left: auto;
    margin-right: calc(var(--padding) * -1);
}

.auth-btn-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin-bottom: 16px;
}

.auth-btn {
    position: relative;
    display: inline-flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    color: var(--color-black);
    background-color: #FFF;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    border: 1px solid #C7C6C6;
    padding: 13px 92px;
    z-index: 1;
}

.auth-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 32px;
    min-width: var(--icon-size-x);
    max-width: var(--icon-size-x);
    width: var(--icon-size-x);
    min-height: var(--icon-size-y);
    max-height: var(--icon-size-y);
    height: var(--icon-size-y);
    background-image: var(--bg-url);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.auth-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15), 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15), 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.auth-btn:hover::after,
.auth-btn:focus-visible::after {
    opacity: 1;
}

.auth-btn + .auth-btn {
    margin-top: 16px;
}

.auth-text-anchor-wrap {
    color: var(--color-black);
    font-size: 16px;
    font-weight: 300;
    line-height: normal;
}

.auth-text-anchor-wrap > * {
    text-align: center;
}

.auth-text-anchor-wrap a {
    font-weight: 500;
}
/* ** */

.form-item.double {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: none;
    width: 100%;
}

.form-item.double > .form-item-group {
    min-width: 50%;
    max-width: 50%;
    width: 50%;
}

.form-item.double > .form-item-group.register {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}

.form-item.double > .form-item-group:nth-child(1) {
    padding-right: 20px;
}

.form-item.double > .form-item-group:nth-child(2) {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    padding-left: 20px;
}

.login-form .form-item-group {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.form-item.double .login-checkbox-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
}

.login-form .circle-checkbox-desc {
    margin-left: 15px;
}

.login-form .button {
    display: inline-flex;
    max-width: 245px;
    width: 100%;
    -webkit-justify-content: center;
    justify-content: center;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .login-container {
        max-width: calc(1186px * 0.7114583);
        min-height: calc(575px * 0.7114583);
        max-height: calc(575px * 0.7114583);
        height: calc(575px * 0.7114583);
    }
    .login-logo {
        top: calc(-37px * 0.7114583);
        padding: calc(0 20px * 0.7114583);
    }
    .login-logo img {
        width: calc(180px * 0.7114583);
    }
    .login-form-row {
        margin-right: calc(16px * 0.7114583);
    }
    .login-form-spacing > * + * {
        margin-top: calc(15px * 0.7114583);
    }
    .modal-form-spacing > * + * {
        margin-top: calc(20px * 0.7114583);
    }
    .login-form-submit-margin {
        margin-top: calc(35px * 0.7114583);
    }
    .login-form-col:nth-child(2) {
        --padding: calc(32px * 0.7114583);
        --margin: calc(16px * 0.7114583);
        max-height: calc(calc(575px - (var(--margin) * 2)) * 0.7114583);
        margin-bottom: calc(72px * 0.7114583);
    }
    .login-form-info {
        font-size: calc(16px * 0.7114583);
        line-height: calc(25px * 0.7114583);
        margin-top: calc(10px * 0.7114583);
    }
    .login-return {
        font-size: calc(16px * 0.7114583);
        line-height: calc(25px * 0.7114583);
        margin-top: calc(15px * 0.7114583);
    }
    .login-form .form-item {
        max-width: calc(440px * 0.7114583);
    }
    .login-form .form-item + .form-item {
        margin-top: calc(15px * 0.7114583);
    }
    .login-form .form-item.larger-margin {
        margin-top: calc(35px * 0.7114583);
    }
    .form-item.double > .form-item-group:nth-child(1) {
        padding-right: calc(20px * 0.7114583);
    }
    .form-item.double > .form-item-group:nth-child(2) {
        padding-left: calc(20px * 0.7114583);
    }
    .login-form .circle-checkbox-desc {
        margin-left: calc(15px * 0.7114583);
    }
    .login-form .button {
        max-width: calc(245px * 0.7114583);
    }
    .auth-logo-wrapper {
        margin-bottom: calc(72px * 0.7114583);
    }
    .auth-logo-wrapper > img {
        min-height: calc(64px * 0.7114583);
        max-height: calc(64px * 0.7114583);
        height: calc(64px * 0.7114583);
    }
    .auth-btn-wrap {
        margin-bottom: calc(16px * 0.7114583);
    }
    .auth-btn {
        font-size: calc(20px * 0.7114583);
        padding: calc(13px * 0.7114583) calc(92px * 0.7114583);
    }
    .auth-btn::before {
        left: calc(32px * 0.7114583);
        min-width: calc(var(--icon-size-x) * 0.7114583);
        max-width: calc(var(--icon-size-x) * 0.7114583);
        width: calc(var(--icon-size-x) * 0.7114583);
        min-height: calc(var(--icon-size-y) * 0.7114583);
        max-height: calc(var(--icon-size-y) * 0.7114583);
        height: calc(var(--icon-size-y) * 0.7114583);
    }
    .auth-btn + .auth-btn {
        margin-top: calc(16px * 0.7114583);
    }
    .auth-text-anchor-wrap {
        font-size: calc(16px * 0.7114583);
    }
}

@media (max-width: 1199px) {
    .login-container {
        max-width: 100%;
    }
    .login-form-row {
        margin-left: 16px;
    }
    .login-form-col:nth-child(1),
    .login-form-col:nth-child(2) {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        padding: 0;
        margin-left: 0;
    }
    .login-form-col:nth-child(1) {
        display: none;
    }
    .login-form .form-item {
        max-width: 100%;
    }
    .auth-logo-wrapper > img {
        margin-right: 0;
    }
    .auth-btn {
        font-size: 16px;
        padding: 13px 38px;
    }
    .auth-btn::before {
        left: calc(32px * 0.41304347);
        min-width: calc(var(--icon-size-x) * 0.41304347);
        max-width: calc(var(--icon-size-x) * 0.41304347);
        width: calc(var(--icon-size-x) * 0.41304347);
        min-height: calc(var(--icon-size-y) * 0.41304347);
        max-height: calc(var(--icon-size-y) * 0.41304347);
        height: calc(var(--icon-size-y) * 0.41304347);
    }
}

@media (max-width: 991px) {
    /* .login-section {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    } */
    .form-item.double > .form-item-group {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .form-item.double > .form-item-group:nth-child(1) {
        padding-right: 0;
    }
    .form-item.double > .form-item-group:nth-child(2) {
        -webkit-justify-content: center;
        justify-content: center;
        padding-left: 0;
        margin-top: 35px;
    }
    .login-form .button {
        max-width: 100%;
    }
}

/* ** */

/* Pass remind */

.pass-remind-form-row {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 100%;
}

.pass-remind-form {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    max-width: 520px;
    width: 100%;
    height: 100%;
    padding: 0 20px;
}

.pass-remind-form fieldset {
    width: 100%;
}

.star-form-heading {
    color: var(--color-gray-7);
    font-size: 37px;
    font-weight: 700;
    line-height: 45px;
    text-align: center;
    margin-bottom: 14px;
}

.star-form-heading-subtext {
    color: var(--color-gray-7);
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    text-align: center;
}

.pass-remind-form .form-item {
    padding: 0 20px;
}

.pass-remind-form .form-item.larger-margin {
    margin-top: 50px;
}

.pass-remind-form .form-item.smaller-margin {
    margin-top: 15px;
}

.star-form .form-item-group {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.star-form-submit {
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    padding: 15px 96px;
}

/* ** */

/* Order steps */

.order-step-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: var(--color-gray-5);
    /* background-image: url('public/images/bg_stars.svg'); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 0 200px 0;
    z-index: 1;
}

.order-step-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    /*background-image: url('public/images/order_step_bg.svg');*/
    /* background-position: center; */
    background-attachment: fixed;
    background-position: left;
    background-repeat: no-repeat;
    /* background-size: cover; */
    background-size: contain;
    -webkit-filter: blur(120px);
    filter: blur(120px);
    z-index: -1;
}

.order-step-container {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
}

.order-step-container.full {
    max-width: 100%;
}

.order-step-layout {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.order-step-logo img {
    width: 246px;
}

.order-step-content {
    width: 100%;
    margin-top: 67px;
}

.order-step-heading {
    text-align: center;
}

.order-step-heading-2 {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    text-align: center;
    padding: 0 12.5px;
    margin-bottom: 50px;
}

.order-step-form-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 40px;
}

.order-step-form {
    margin-top: 52px;
}

.order-step-form.payment {
    margin-top: 137px;
}

.order-step-form fieldset {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.order-step-form .form-item {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: 100%;
}

.order-step-form.column-type .form-item-group {
    max-width: 527px;
    width: 527px;
}

.order-step-form.column-type .form-item-column-type-input-wrap {
    position: relative;
}

.tactical-input-wrap {
    position: relative;
}

.order-step-form.column-type .tactical-input-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 33px;
    min-width: var(--icon-size-x);
    min-height: var(--icon-size-y);
    width: var(--icon-size-x);
    height: var(--icon-size-y);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.order-step-form.column-type .form-item-column-type-input-wrap > label {
    position: absolute;
    top: 50%;
    right: 100%;
    max-width: 230px;
    padding: 0 25px;
    margin-bottom: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.order-step-form .form-item + .form-item {
    margin-top: 80px;
}

.order-step-form label {
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}

.order-step-form.column-type label {
    text-align: right;
}

.order-step-form .form-item-group {
    position: relative;
    max-width: 480px;
    width: 480px;
}

.order-step-form .form-item-group.range {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 100%;
    width: 100%;
    margin-left: -13px;
    margin-right: -13px;
}

.order-step-form .form-item-group.range > * {
    display: -webkit-flex;
    display: flex;
    padding: 0 13px;
}

.order-step-form .form-item-group.range .range-slider {
    min-width: 57.93478260%;
    width: 57.93478260%;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.order-step-form .form-item-group.range .range-output {
    min-width: 130px;
    max-width: 130px;
    width: 130px;
}

.order-step-form .form-item-group.range .range-output > p {
    color: var(--color-white);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
}

.order-step-form .range-price-addition {
    position: absolute;
    right: 0;
    min-width: 120px;
    max-width: 120px;
    width: 120px;
}

.order-step-form .range-price-addition > p {
    background-color: var(--color-blue-3);
    min-width: 120px;
    max-width: 120px;
    width: 120px;
    height: max-content;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    border-radius: 0 60px 60px 0;
    padding: 3px 10px;
}

.order-step-form .form-item-group.range .range-steps {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-grow: 1;
    width: 100%;
    /* margin-left: -20px;
    margin-right: -20px; */
    padding: 0;
    padding-top: 30px;
}

.order-step-form .form-item-group.range .range-steps-col {
    flex: 0 0 auto;
    /* min-width: 33.33333333%;
    max-width: 33.33333333%;
    width: 33.33333333%;
    padding: 0 20px; */
}

.order-step-form .form-item-group.range .range-steps-item {
    position: relative;
    cursor: pointer;
}

.order-step-form .form-item-group.range .range-steps-item::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 16px 10px;
    border-color: transparent transparent var(--color-white) transparent;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.order-step-form .form-item-group.range .range-steps-item > p {
    color: var(--color-white);
    /* font-size: 20px; */
    font-size: 14px;
    font-weight: 200;
    line-height: 24px;
    text-align: center;
}

.order-step-form input,
.order-step-form .form-error-box {
    width: 100%;
}

.order-step-form .form-item-group.range input {
    width: 100%;
}

.order-step-modules {
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 80px;
}

.order-step-modules-wrap {
    /* max-width: 858px; */
    max-width: 710.42px;
    width: 100%;
    margin: 0 auto;
}

.order-step-module-list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}

.order-step-module-item {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    z-index: 1;
}

.order-step-module-item:hover .order-step-module-desc-wrap,
.order-step-module-item:focus-visible .order-step-module-desc-wrap {
    visibility: visible;
    opacity: 1;
}

.order-step-module-item + .order-step-module-item {
    margin-top: 15px;
}

.order-step-module-item > * {
    flex: 0 0 auto;
}

.order-step-module-icon-wrap {
    /* min-width: 8.97435897%;
    max-width: 8.97435897%;
    width: 8.97435897%; */
    min-width: 10.83865882%;
    max-width: 10.83865882%;
    width: 10.83865882%;
    background: var(--main-gradient-3);
    /* border: 1px solid var(--color-gray-6); */
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
}

.order-step-module-content-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    min-width: 89.16134117%;
    max-width: 89.16134117%;
    width: 89.16134117%;
    z-index: 2;
}

.order-step-module-content-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}

.order-step-module-name-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    min-width: 75%;
    max-width: 75%;
    width: 75%;
    border: 1px solid var(--color-gray-6);
    border-left: none;
    overflow: hidden;
}

.order-step-module-negative-border-radius {
    position: absolute;
    top: 50%;
    left: 10px;
    height: calc(100% * 1.50980392);
    background-color: transparent;
    border: 1px solid var(--color-gray-6);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-100%, -50%);
    aspect-ratio: 1 / 1;
}

.order-step-module-price-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: 25%;
    max-width: 25%;
    width: 25%;
    border: 1px solid var(--color-gray-6);
    border-left: none;
    border-radius: 0 26px 26px 0;
}

.order-step-module-icon {
    position: relative;
    padding-bottom: 100%;
}

.order-step-module-icon::before {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    min-width: var(--icon-size-x);
    min-height: var(--icon-size-y);
    width: var(--icon-size-x);
    height: var(--icon-size-y);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.order-step-module-name {
    width: 100%;
    padding: 13.5px 40px;
}

.order-step-module-price {
    width: 100%;
    text-align: center;
    padding: 13.5px 40px;
}

.order-step-module-remove-wrap {
    position: absolute;
    left: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    min-width: max-content;
    max-width: max-content;
    width: max-content;
    padding: 20px 16px;
}

.order-step-module-remove-wrap::before,
.order-step-module-remove-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 27px;
    width: 2px;
    height: 27px;
    background-color: var(--color-white);
    -webkit-transition: top 0.3s ease, left 0.3s ease, height 0.3s ease;
    transition: top 0.3s ease, left 0.3s ease, height 0.3s ease;
}

.order-step-module-remove-wrap::before {
    -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
    transform: translate(-50%, -50%) rotateZ(45deg);
}

.order-step-module-remove-wrap::after {
    -webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
    transform: translate(-50%, -50%) rotateZ(-45deg);
}

.order-step-module-remove-wrap.remove-initiated::before {
    top: 55%;
    left: 33px;
    height: 9px;
}

.order-step-module-remove-wrap.remove-initiated::after {
    left: 24px;
    height: 17px;
}

.order-step-module-remove {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    text-transform: uppercase;
    margin-left: 29px;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.remove-initiated .order-step-module-remove {
    opacity: 1;
}

.order-step-modules-total {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 28px;
}

.order-step-modules-total > p {
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
}

.order-step-modules-total > p + p {
    margin-left: 26px;
}

.order-step-next-step-button {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    margin-top: 64px;
}

.payment .order-step-next-step-button {
    margin-top: 173px;
}

.order-step-form .button {
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    padding: 15px 64px;
}

.order-step-module-desc-wrap {
    position: absolute;
    top: -8px;
    right: 0;
    max-width: 522px;
    background: transparent linear-gradient(257deg, #19181D 0%, #311948 57%, #19181D 100%) 0% 0% no-repeat padding-box;
    border-radius: 16px;
    padding: 18px 24px;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.order-step-module-desc-wrap > * {
    font-size: 15px;
    font-weight: 200;
    line-height: 19px;
}

.order-step-fixed-price {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: fixed;
    top: 36.11111111%;
    right: 0;
    min-width: 400px;
    max-width: 400px;
    width: 400px;
    min-height: 140px;
    max-height: 140px;
    height: 140px;
    background-color: var(--color-blue-3);
    border-radius: 64px 0 0 64px;
    overflow: hidden;
    z-index: 999;
}

.order-step-fixed-price-content {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 20px 20px 20px 40px;
}

.order-step-fixed-price-content > * {
    flex: 0 0 auto;
    width: 100%;
}

.fixed-price-heading {
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    text-transform: uppercase;
}

.fixed-price-price {
    font-size: 36px;
    font-weight: 600;
    line-height: 44px;
}

.fixed-price-previous-price {
    color: var(--color-gray-9);
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    text-decoration: line-through;
}

.fixed-price-discount {
    font-size: 15px;
    font-weight: 600;
    line-height: 19px;
}

.order-step-settlement {
    margin-top: 130px;
}

.order-step-discount {
    padding: 0 12.5px;
    margin-top: 115px;
}

.order-step-discount > * {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}

.order-step-discount .form-item {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.order-step-discount .form-item-group {
    max-width: 100%;
    width: 100%;
}

.order-step-discount input {
    max-width: 480px;
    margin-right: 35px;
}

.order-step-discount .form-item-column-type-input-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.order-step-discount .form-error-box {
    text-align: center;
}

@media (max-width: 1199px) {
    .order-step-section {
        padding-bottom: 100px;
    }
    .order-step-layout {
        padding: 0 20px;
    }
    .order-step-heading {
        font-size: 18px;
        line-height: 22px;
    }
    .order-step-form .form-item + .form-item {
        margin-top: 45px;
    }
    .order-step-form .form-item-group.range .range-slider {
        min-width: 100%;
        width: 100%;
    }
    .order-step-form .form-item-group.range .range-output {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        -webkit-justify-content: center;
        justify-content: center;
        margin-top: 15px;
    }
    .order-step-form.column-type .form-item-column-type-input-wrap > label {
        position: static;
        max-width: 100%;
        text-align: center;
        margin-bottom: 25px;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    .order-step-form.column-type .form-item-column-type-input-wrap > label.circle-checkbox {
        padding: 0;
    }
    .order-step-form.column-type .form-item-group {
        max-width: 100%;
        width: 100%;
    }
    .order-step-fixed-price {
        top: initial;
        bottom: 0;
        left: 0;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        border-radius: 0;
        padding: 10px 20px;
    }
    .order-step-fixed-price-content {
        padding: 0;
    }
    .order-step-fixed-price-content > * {
        font-size: 24px;
        line-height: 30px;
        text-align: center;
    }
    .order-step-form .range-price-addition {
        position: static;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        -webkit-justify-content: center;
        justify-content: center;
    }
    .order-step-form .range-price-addition > p {
        border-radius: 60px;
        margin-top: 30px;
    }
    .order-step-discount input {
        margin-right: 0;
    }
    .order-step-discount .form-item-column-type-input-wrap {
        flex-direction: column;
    }
    .order-step-discount button {
        margin-top: 30px;
    }
}

@media (max-width: 991px) {
    /* .order-step-wrapper::before {
        content: none;
    } */
    .order-step-module-item {
        -webkit-justify-content: center;
        justify-content: center;
    }
    .order-step-module-item + .order-step-module-item {
        margin-top: 30px;
    }
    .order-step-module-content-wrap {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        padding: 0;
    }
    .order-step-module-icon-wrap {
        max-width: 100px;
        width: 100%;
        /* border: none;
        border-radius: 0;
        padding: 30px; */
        aspect-ratio: 1 / 1;
        margin-bottom: 20px;
    }
    .order-step-module-icon {
        border-radius: 50%;
        overflow: hidden;
    }
    .order-step-module-content-inner {
        border: 1px solid var(--color-gray-6);
        border-radius: 26px 26px 0 0;
    }
    .order-step-module-name-wrap {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        border: none;
    }
    .order-step-module-negative-border-radius {
        display: none;
    }
    .order-step-module-name {
        text-align: center;
        padding: 13.5px 40px !important;
    }
    .order-step-module-price-wrap {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        border: none;
        border-top: 1px solid var(--color-gray-6);
        border-radius: 0;
    }
    .order-step-module-remove-wrap {
        position: relative;
        top: initial;
        left: initial;
        -webkit-justify-content: center;
        justify-content: center;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        border: 1px solid var(--color-gray-6);
        border-top: none;
        border-radius: 0 0 26px 26px;
    }
    .order-step-modules-total {
        margin-right: 0;
    }
}

@media (max-width: 767px)
{
    .order-step-form .form-item-group {
        width: 100%;
    }
}

/* ** */

/* Thankyou content */

.thankyou-content {
    width: 100%;
    margin-top: 200px;
}

.thankyou-content-wrap {
    /* max-width: 750px; */
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
}

.thankyou-content-wrap > * {
    text-align: center;
}

.thankyou-heading {
    font-size: 54px;
    font-weight: 500;
    line-height: 52px;
    margin-bottom: 175px;
}

.thankyou-heading > .smaller {
    font-size: 42px;
}

.thankyou-content-wrap > p {
    font-size: 26px;
    line-height: 32px;
}

.thankyou-content-wrap > p + p {
    margin-top: 49px;
}

.thankyou-content-wrap > p > .bigger {
    font-size: 32px;
    line-height: 39px
}

.thankyou-button-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    margin-top: 60px;
}

.thankyou-button-wrap .button {
    display: inline-flex;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    padding: 15px 88px;
}

@media (max-width: 1399px) {
    .thankyou-heading {
        font-size: calc(54px * 0.73529411);
        line-height: calc(52px * 0.73529411);
        margin-bottom: calc(175px * 0.73529411);
    }
    .thankyou-heading > .smaller {
        font-size: calc(42px * 0.73529411);
    }
    .thankyou-content-wrap > p {
        font-size: calc(26px * 0.73529411);
        line-height: calc(32px * 0.73529411);
    }
    .thankyou-content-wrap > p > .bigger {
        font-size: calc(32px * 0.73529411);
        line-height: calc(39px * 0.73529411);
    }
}

@media (max-width: 991px) {
    .thankyou-button-wrap .button {
        width: 100%;
        padding: 15px 20px;
    }
}

/* ** */

/* Rangeslider */

.rangeslider__fill,
.rangeslider__fill__bg {
    height: 9px;
    background: transparent;
    border-radius: 7px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.rangeslider__fill__bg {
    background: transparent linear-gradient(90deg, #E5E5E5 0%, #FFFFFF 64%, #9BB6F6 100%) 0% 0% no-repeat padding-box;
}

.rangeslider__handle {
    top: 50%;
    left: 0;
    width: 25px;
    height: 25px;
    background-color: transparent;
    /*background-image: url('public/images/icons/range-slider-handle.svg');*/
    border: none !important;
    border-radius: 0;
}

/* ** */

/* Slider-type checkbox */

.switch-checkbox-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.switch-checkbox {
    display: inline-block;
    position: relative;
    width: 64px !important;
    height: 32px !important;
    margin: 0 !important;
}

.switch-checkbox input {
    display: none;
}

.switch-checkbox .slider {
    position: absolute;
    inset: 0;
    background-color: var(--color-purple);
    border: 1px solid var(--color-white);
    transition: 0.3s ease;
    cursor: pointer;
}

.switch-checkbox .slider:before {
    content: "";
    position: absolute;
    background-color: var(--color-blue-3);
    top: 50%;
    left: 0;
    height: 30px;
    width: 52px;
    -webkit-transform: translate(10px, -50%);
    transform: translate(10px, -50%);
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

/* .switch-checkbox input:checked + .slider {
    background-color: #66bb6a;
} */

.switch-checkbox input:checked + .slider:before {
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.switch-checkbox .slider.round {
    border-radius: 34px;
}

.switch-checkbox .slider.round:before {
    border-radius: 34px;
}

.switch-checkbox .slider::after {
    content: "";
    position: absolute;
    background-color: var(--color-white);
    top: 50%;
    left: 100%;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    -webkit-transform: translate(-20px, -50%);
    transform: translate(-20px, -50%);
    -webkit-transition: left 0.3s ease, transform 0.3s ease;
    transition: left 0.3s ease, transform 0.3s ease;
}

.switch-checkbox input:checked + .slider::after {
    left: 0;
    -webkit-transform: translate(10px, -50%);
    transform: translate(10px, -50%);
}

.switch-checkbox-left > p,
.switch-checkbox-right > p {
    color: var(--color-white);
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
}

.switch-checkbox-left {
    padding-right: 12px;
}

.switch-checkbox-right {
    padding-left: 12px;
}


/* Circle checkbox */

.circle-checkbox {
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    width: auto !important;
    cursor: pointer;
}

.circle-checkbox input {
    display: none;
}

.circle-checkbox-visuals {
    position: relative;
    width: 36px;
    height: 36px;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    overflow: hidden;
}

.circle-checkbox-visuals::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    background-image: url('/public/images/icons/circle_checkbox_checkmark.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.circle-checkbox:hover .circle-checkbox-visuals::after,
.circle-checkboxs:focus-visible .circle-checkbox-visuals::after {
    opacity: 0.25;
}

.circle-checkbox input:checked + .circle-checkbox-visuals::after {
    opacity: 1;
}

.circle-checkbox-desc {
    color: var(--color-gray-7);
    font-size: 16px;
    font-weight: 200;
    line-height: 19px;
    cursor: pointer;
    user-select: none;
}

/* Block-style radio buttons */
.form-block-radios-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}

.form-block-radios-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 1104px;
    width: 100%;
    margin-left: -12.5px;
    margin-right: -12.5px;
}

.form-block-radio {
    min-width: 50%;
    max-width: 50%;
    width: 50%;
    padding-left: 12.5px;
    padding-right: 12.5px;
}

.form-block-radios-container .form-error-box {
    padding-left: 12.5px;
    padding-right: 12.5px;
}

.form-block-radio-item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    height: 100%;
    margin-bottom: 0;
    cursor: pointer;
}

.form-block-radio-item > input {
    display: none;
    position: absolute;
    height: 100%;
}

.form-block-radio-item > input:checked + .form-block-radio-item-visuals {
    border-color: var(--color-blue-4);
}

.form-block-radio-item-visuals {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-white);
    border-radius: 26px;
    z-index: 1;
}

.form-block-radio-item-visuals::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #000000;
    border-radius: 26px;
    opacity: 0.6;
    z-index: -1;
}

.form-block-radio-item-visuals .visuals-header {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 89px 30px;
}

.form-block-radio-item-visuals .heading {
    width: 100%;
    font-size: 38px;
    font-weight: 400;
    line-height: 47px;
    text-align: center;
    text-transform: uppercase;
}

.form-block-radio-item-visuals .visuals-corner {
    position: absolute;
    bottom: 0;
    right: 5%;
    max-width: 100%;
    background-color: var(--color-blue-3);
    border-radius: 24px;
    padding: 6px 46px;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
}

.form-block-radio-item-visuals .corner-heading {
    width: 100%;
    font-size: 17px;
    font-weight: 300;
    line-height: 20px;
    text-align: right;
    text-transform: uppercase;
}

.form-block-radio-item-visuals .corner-heading .dicount {
    font-weight: 500;
}

.form-block-radio-item-visuals .visuals-footer {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    padding: 10px 50px;
}

.form-block-radio-item-visuals .visuals-footer-row {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.form-block-radio-item-visuals .visuals-footer-item {
    padding-left: 15px;
    padding-right: 15px;
}

.form-block-radio-item-visuals .visuals-footer-item > p {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

.form-block-radio-item-visuals .visuals-footer-item > img {
    min-height: 31px;
    max-height: 31px;
    max-width: 77px;
}

/* Smaller version */
.form-block-radios-wrap.smaller {
    max-width: 728px;
    margin-left: -8.5px;
    margin-right: -8.5px;
}

.smaller .form-block-radio {
    padding-left: 8.5px;
    padding-right: 8.5px;
}

.smaller .form-block-radio-item-visuals .visuals-header {
    padding: 18px 30px;
}

.smaller .form-block-radio-item-visuals .heading {
    font-size: 25px;
    font-weight: 400;
    line-height: 30px;
}

@media (max-width: 1199px) {
    .form-block-radio {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .form-block-radio + .form-block-radio {
        margin-top: 40px;
    }
    .form-block-radio-item-visuals .visuals-header {
        padding: 60px 30px;
    }
    .form-block-radio-item-visuals .heading {
        font-size: 24px;
        line-height: 30px;
    }
    .form-block-radio-item-visuals .visuals-footer {
        padding: 10px 30px;
    }
    .form-block-radio-item-visuals .corner-heading {
        font-size: 16px;
        line-height: 19px;
    }
}

/* ** */

/* File upload */

.button-file-upload {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.button-file-upload .file-upload-btn {
    position: relative;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    background: var(--color-blue) 0% 0% no-repeat padding-box;
    color: var(--color-white);
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    text-transform: uppercase;
    text-align: center;
    border-radius: 26px;
    padding: 15px 34px;
    z-index: 1;
    cursor: pointer;
}

.button-file-upload .file-upload-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent linear-gradient(270deg, var(--color-blue) 0%, var(--color-purple) 100%) 0% 0% no-repeat padding-box;
    border-radius: 26px;
    z-index: -1;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.button-file-upload .file-upload-btn:hover::after {
    opacity: 1;
}

.form-error-box
{
    display: none;
}

/* ** */

/* Notifications */

.notifications-wrapper {
    position: fixed;
    inset: 0;
    padding: 30px;
    z-index: 10050;
    pointer-events: none;
}

.notification-items {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.notification-item {
    width: max-content;
    background-color: var(--color-gray);
    padding: 20px 40px;
}

.notification-item + .notification-item {
    margin-top: 10px;
}

.notification-item > p {
    color: var(--color-notification-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
    text-align: center;
}

.notification-item.notification-good {
    background-color: var(--color-good-notification);
}

.notification-item.notification-bad {
    background-color: var(--color-bad-notification);
}

@media (max-width: 991px) {
    .notification-item {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        padding: 20px 15px;
    }
    .notification-item > p {
        text-align: center;
    }
}

/* ** */

/* Loader */

.loader-fs-visible {
    overflow: hidden !important;
}

.loader-fullscreen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100vw;
    max-width: 100vw;
    width: 100vw;
    min-height: 100vh;
    max-height: 100vh;
    height: 100vh;
    background-color: var(--color-gray-5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 20010;
}

.loader-fs-visible .loader-fullscreen {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}

/* Product details custom css */

@media (min-width: 1460px) {
    #product_info_modal .modal-title {
        font-size: 46px;
        font-weight: 600;
        line-height: 69px;
    }
}

.product-details-info {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

.product-details-info p + p {
    margin-top: 34px;
}

.product-details-quantity {
    color: var(--color-product-quantity);
    font-size: 20px;
    font-weight: 400;
    line-height: 22px;
}

.product-details-quantity-num {
    padding: 6px 18px;
}

.product-details-quantity-num,
.product-details-quantity-num > * {
    font-size: 27px;
    font-weight: 600;
    line-height: 40px;
}

@media (max-width: 1199px) {
    .product-details-info {
        margin-bottom: 20px;
    }
}
/* ** */

/* Slick */

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: "";
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir="rtl"] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* ** */

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    :root {
        --navbar-height: calc(60px * 0.7114583);
        --sidebar-width: calc(244px * 0.7114583);
        --sidebar-accent-height: calc(98px * 0.7114583);
        --sidebar-icon-size-x: calc(31px * 0.7114583);
        --sidebar-icon-size-y: calc(31px * 0.7114583);
    }
    body {
        font-size: calc(16px * 0.7114583);
        line-height: calc(28px * 0.7114583);
    }
    .sidebar-wrap {
        padding-top: calc(24px * 0.7114583);
    }
    .content-wrap {
        padding: calc(19px * 0.7114583) calc(29px * 0.7114583);
        padding-left: calc(var(--sidebar-width) + calc(29px * 0.7114583));
    }
    .sidebar-section-wrap {
        padding: calc(18px * 0.7114583) calc(16px * 0.7114583) calc(48px * 0.7114583);
        margin-top: calc(22px * 0.7114583);
    }
    .sidebar-section {
        margin-bottom: calc(32px * 0.7114583);
    }
    .navbar-items {
        margin-left: calc(-16px * 0.7114583);
        margin-right: calc(-16px * 0.7114583);
    }
    .navbar-items__col {
        padding-left: calc(16px * 0.7114583);
        padding-right: calc(16px * 0.7114583);
    }
    .navbar-logo img {
        max-height: calc(60px * 0.7114583);
    }
    .navbar-wallet-badges {
        padding: calc(5px * 0.7114583) calc(42px * 0.7114583) 0 calc(29px * 0.7114583);
    }
    .navbar-content-row {
        min-height: calc(60px * 0.7114583);
    }
    .navbar-toggler-nobs {
        left: calc(20px * 0.7114583);
    }
    .navbar-toggler-nobs>.toggler-bar {
        width: calc(37px * 0.7114583);
        height: calc(4px * 0.7114583);
    }
    .navbar-toggler-nobs>.toggler-bar+.toggler-bar {
        margin-top: calc(5px * 0.7114583);
    }
    .navbar-toggler-nobs.toggled>.toggler-bar:nth-child(1) {
        top: calc(9px * 0.7114583);
    }
    .navbar-toggler-nobs.toggled>.toggler-bar:nth-child(3) {
        top: calc(-9px * 0.7114583);
    }
    .navbar-item-dropdown-cart-wrap {
        padding: calc(13px * 0.7114583) 0 calc(20px * 0.7114583) calc(20px * 0.7114583);
    }
    .navbar-cart-heading {
        font-size: calc(14px * 0.7114583);
        line-height: calc(21px * 0.7114583);
    }
    .navbar-cart-products-wrap {
        margin-right: calc(5px * 0.7114583);
    }
    .navbar-cart-products {
        padding-right: calc(15px * 0.7114583);
        margin-top: calc(14px * 0.7114583);
    }
    .navbar-cart-item + .navbar-cart-item {
        margin-top: calc(10px * 0.7114583);
    }
    .navbar-cart-item-thumb {
        min-width: calc(54px * 0.7114583);
        max-width: calc(54px * 0.7114583);
        width: calc(54px * 0.7114583);
        min-height: calc(54px * 0.7114583);
        max-height: calc(54px * 0.7114583);
        height: calc(54px * 0.7114583);
    }
    .navbar-cart-item-content-col {
        font-size: calc(16px * 0.7114583);
        line-height: calc(21px * 0.7114583);
        padding-left: calc(5px * 0.7114583);
    }
    .navbar-cart-item-content-subcol + .navbar-cart-item-content-subcol {
        padding-left: calc(15px * 0.7114583);
    }
    .navbar-cart-item-content-subcol.main + .navbar-cart-item-content-subcol {
        padding-left: calc(5px * 0.7114583);
    }
    .navbar-cart-item-button-wrap + .navbar-cart-item-button-wrap {
        margin-top: calc(4px * 0.7114583);
    }
    .navbar-cart-item-name {
        font-size: calc(14px * 0.7114583);
        line-height: calc(21px * 0.7114583);
    }
    .navbar-cart-item-specs {
        font-size: calc(14px * 0.7114583);
        line-height: calc(21px * 0.7114583);
    }
    .navbar-cart-products-summary {
        padding-right: calc(20px * 0.7114583);
        margin-top: calc(15px * 0.7114583);
    }
    .product-summary-title,
    .product-summary-specs {
        font-size: calc(14px * 0.7114583);
        line-height: calc(21px * 0.7114583);
    }
    .navbar-cart-products-summary .btn.directional {
        padding: calc(10px * 0.7114583) calc(23px * 0.7114583);
    }
    .navbar-cart-item-button {
        min-width: calc(15px * 0.7114583);
        max-width: calc(15px * 0.7114583);
        width: calc(15px * 0.7114583);
        min-height: calc(15px * 0.7114583);
        max-height: calc(15px * 0.7114583);
        height: calc(15px * 0.7114583);
        font-size: calc(15px * 0.7114583);
    }
    .navbar-item-dropdown-item > a {
        padding: 0 calc(15px * 0.7114583) !important;
    }
    .navbar-item-dropdown-item .button-icon-text {
        margin-left: calc(10px * 0.7114583);
        margin-right: calc(10px * 0.7114583);
    }
    .input-error-box-wrap {
        width: calc(18px * 0.7114583);
        height: calc(18px * 0.7114583);
        font-size: calc(16px * 0.7114583);
    }
    .error-box-popup {
        top: calc(-13px * 0.7114583);
        padding: calc(4px * 0.7114583) calc(10px * 0.7114583);
    }
    .error-box-popup::before {
        border-width: calc(13px * 0.7114583) calc(7.5px * 0.7114583) 0 calc(7.5px * 0.7114583);
    }
    .error-box-popup > * {
        font-size: calc(14px * 0.7114583);
        line-height: calc(21px * 0.7114583);
    }
    .product-details-info {
        font-size: calc(16px * 0.7114583);
        line-height: calc(22px * 0.7114583);
    }
    .product-details-info p + p {
        margin-top: calc(34px * 0.7114583);
    }
    .product-details-quantity {
        font-size: calc(20px * 0.7114583);
        line-height: calc(22px * 0.7114583);
    }
    .product-details-quantity-num {
        padding: calc(6px * 0.7114583) calc(18px * 0.7114583);
    }
    .product-details-quantity-num,
    .product-details-quantity-num > * {
        font-size: calc(27px * 0.7114583);
        line-height: calc(40px * 0.7114583);
    }
    #product_info_modal .modal-title {
        font-size: calc(46px * 0.7114583);
        line-height: calc(69px * 0.7114583);
    }
    .notifications-wrapper {
        padding: calc(30px * 0.7114583);
    }
    .notification-item {
        padding: calc(20px * 0.7114583) calc(40px * 0.7114583);
    }
    .notification-item + .notification-item {
        margin-top: calc(10px * 0.7114583);
    }
    .notification-item > p {
        font-size: calc(16px * 0.7114583);
        line-height: calc(25px * 0.7114583);
    }
}

/* CART PAGE CUSTOM STYLES */
#cart_table .content-table-col {
    max-width: 100%;
}

.cart-page-change-qty {
    min-width: 250px;
    max-width: 250px;
    width: 250px;
}

.cart-page-change-qty .input-subwrap-number-arrows input {
    min-width: 68px;
    max-width: 68px;
    width: 68px;
    font-size: 16px;
}

.btn.btn-cart-padding {
    padding: 9.5px 23px;
}


/* BASE */
    /* HEADINGS */
    .standard-heading {
        font-size: 37px;
        font-weight: 700;
        line-height: 56px;
        text-align: center;
        margin-bottom: 72px;
    }

    /* For mac screens */
    @media (max-width: 1460px) and (min-width: 1200px) {
        .standard-heading {
            font-size: calc(37px * 0.7114583);
            line-height: calc(56px * 0.7114583);
            margin-bottom: calc(72px * 0.7114583);
        }
    }
    /* ** */

    /* BUTTONS */
    .btn-new {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-appearance: none;
        background-color: var(--color-primary);
        border: none;
        outline: none;
        color: var(--color-white);
        font-size: 20px;
        font-weight: 400;
        line-height: 1.5;
        border-radius: 4px;
        padding: 9px 32px;
        cursor: pointer;
    }

    .btn-new.clear {
        background-color: transparent;
        color: var(--color-gray);
        font-size: 16px;
    }

    .btn-new.clear-black {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        background-color: transparent;
        color: #262626;
        font-size: 16px;
        text-align: left;
    }

    .btn-new.small {
        font-size: 16px;
        text-align: center;
        padding: 5px 20px;
    }

    .btn-new[disabled] {
        -webkit-filter: grayscale();
        filter: grayscale();
    }

    .btn-new > .icon {
        display: block;
        min-width: var(--icon-size-x);
        max-width: var(--icon-size-x);
        width: var(--icon-size-x);
        min-height: var(--icon-size-y);
        max-height: var(--icon-size-y);
        height: var(--icon-size-y);
    }

    .btn-new > .icon.right {
        margin-left: 24px;
    }

    .btn-new > .icon.left {
        margin-right: 24px;
    }

    .btn-row-new {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: -16px;
        margin-right: -16px;
    }

    .btn-row-new > * {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* For mac screens */
    @media (max-width: 1460px) and (min-width: 1200px) {
        .btn-new {
            font-size: calc(20px * 0.7114583);
            padding: calc(9px 32px * 0.7114583);
        }
        .btn-new.clear,
        .btn-new.clear-black {
            font-size: calc(16px * 0.7114583);
        }
        .btn-new.small {
            font-size: calc(16px * 0.7114583);
            padding: calc(5px * 0.7114583) calc(20px * 0.7114583);
        }
        .btn-new > .icon {
            min-width: calc(var(--icon-size-x) * 0.7114583);
            max-width: calc(var(--icon-size-x) * 0.7114583);
            width: calc(var(--icon-size-x) * 0.7114583);
            min-height: calc(var(--icon-size-y) * 0.7114583);
            max-height: calc(var(--icon-size-y) * 0.7114583);
            height: calc(var(--icon-size-y) * 0.7114583);
        }
        .btn-new > .icon.right {
            margin-left: calc(24px * 0.7114583);
        }
        .btn-new > .icon.left {
            margin-right: calc(24px * 0.7114583);
        }
        .btn-row-new {
            margin-left: calc(-16px * 0.7114583);
            margin-right: calc(-16px * 0.7114583);
        }
        .btn-row-new > * {
            padding-left: calc(16px * 0.7114583);
            padding-right: calc(16px * 0.7114583);
        }
    }

    @media (max-width: 1199px) {
        .btn-row-new {
            -webkit-flex-direction: column;
            flex-direction: column;
        }
        .btn-row-new-wrap > * {
            min-width: 100%;
            max-width: 100%;
            width: 100%;
        }
        .btn-row-new-wrap + .btn-row-new-wrap {
            margin-top: 16px;
        }
    }
    /* ** */

    /* REPEATER NEW STYLES */
    .repeater-wrapper-styles {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .repeater-wrapper-styles > * + * {
        margin-top: 8px;
    }

    /* For mac screens */
    @media (max-width: 1460px) and (min-width: 1200px) {
        .repeater-wrapper-styles > * + * {
            margin-top: calc(8px * 0.7114583);
        }
    }
    /* ** */

    /* INPUT CARD */
    .input-card {
        --padding-inline: 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        hyphens: auto;
        border: 1px solid #A9A9A9;
        border-radius: 4px;
        padding: 7px var(--padding-inline);
        -webkit-transition: background-color 0.3s ease, color 0.3s ease;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .input-card.icon-left {
        position: relative;
        padding-left: calc(calc(var(--padding-inline) + 16px) + var(--icon-size-x));
    }

    .input-card.icon-right {
        position: relative;
        padding-right: calc(calc(var(--padding-inline) + 16px) + var(--icon-size-x));
    }

    .input-card.icon-left::after,
    .input-card.icon-right::after {
        content: '';
        position: absolute;
        top: 50%;
        min-width: var(--icon-size-x);
        max-width: var(--icon-size-x);
        width: var(--icon-size-x);
        min-height: var(--icon-size-y);
        max-height: var(--icon-size-y);
        height: var(--icon-size-y);
        background-image: var(--bg-url);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .input-card.icon-left::after {
        left: var(--padding-inline);
    }

    .input-card.icon-right:after {
        right: var(--padding-inline);
    }

    /* For mac screens */
    @media (max-width: 1460px) and (min-width: 1200px) {
        .input-card {
            --padding-inline: calc(24px * 0.7114583);
            font-size: calc(16px* 0.7114583);
            padding: calc(7px * 0.7114583) var(--padding-inline);
        }
        .input-card.icon-left {
            padding-left: calc(calc(var(--padding-inline) + 16px) + calc(var(--icon-size-x) * 0.7114583));
        }
        .input-card.icon-right {
            padding-right: calc(calc(var(--padding-inline) + 16px) + calc(var(--icon-size-x) * 0.7114583));
        }
        .input-card.icon-left::after,
        .input-card.icon-right::after {
            min-width: calc(var(--icon-size-x) * 0.7114583);
            max-width: calc(var(--icon-size-x) * 0.7114583);
            width: calc(var(--icon-size-x) * 0.7114583);
            min-height: calc(var(--icon-size-y) * 0.7114583);
            max-height: calc(var(--icon-size-y) * 0.7114583);
            height: calc(var(--icon-size-y) * 0.7114583);
        }
    }

        /* ITEMS USING INPUT CARD */
        .gray-btn-styles {
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: flex-start;
            justify-content: flex-start;
            background-color: #F5F5F5;
            color: #656565;
        }

        .gray-black-btn-styles {
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: center;
            justify-content: center;
            background-color: #F5F5F5;
            color: #000000;
            text-align: center;
        }

        .regular-form-btn-styles {
            position: relative;
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: flex-start;
            justify-content: flex-start;
            color: #000000;
            border-color: transparent;
            -webkit-box-shadow: 0px 0px 15px 0px rgba(75, 168, 249, 0.25);
            box-shadow: 0px 0px 15px 0px rgba(75, 168, 249, 0.25);
            z-index: 1;
        }

        .regular-form-btn-styles::before {
            content: '';
            position: absolute;
            inset: 0;
            -webkit-box-shadow: 0px 0px 15px 0px rgba(75, 168, 249, 0.25);
            box-shadow: 0px 0px 15px 0px rgba(75, 168, 249, 0.25);
            opacity: 0;
            -webkit-transition: opacity 0.3s ease;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        .regular-form-btn-styles:hover::before,
        .regular-form-btn-styles:focus-visible::before {
            opacity: 1;
        }

        .regular-form-btn-styles.active {
            border-color: #BFE946;
            -webkit-box-shadow: 0px 0px 15px 0px rgba(191, 233, 70, 0.25);
            box-shadow: 0px 0px 15px 0px rgba(191, 233, 70, 0.25);
            pointer-events: none;
        }

        .regular-form-btn-styles.active::after {
            content: '';
            position: absolute;
            top: 50%;
            left: initial;
            right: var(--padding-inline);
            min-width: 16px;
            max-width: 16px;
            width: 16px;
            min-height: 16px;
            max-height: 16px;
            height: 16px;
            background-color: #BFE946;
            background-image: none;
            -webkit-mask-image: url(../../images/icons/icon-checkmark-round.svg);
            -webkit-mask-position: center;
            -webkit-mask-size: cover;
            -webkit-mask-repeat: no-repeat;
            mask-image: url(../../images/icons/icon-checkmark-round.svg);
            mask-position: center;
            mask-size: cover;
            mask-repeat: no-repeat;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .regular-form-btn-styles > img {
            display: block;
            min-height: 24px;
            max-height: 24px;
            height: 24px;
        }

        .regular-form-btn-clear-styles {
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: flex-start;
            justify-content: flex-start;
            color: #4BA8F9;
            border-color: transparent;
        }

        .regular-form-btn-clear-styles.input-card.icon-left {
            padding-left: calc(16px + var(--icon-size-x));
        }
    
        .regular-form-btn-clear-styles.input-card.icon-right {
            padding-right: calc(16px + var(--icon-size-x));
        }

        .regular-form-btn-clear-styles.input-card.icon-left::after {
            left: 0;
        }
    
        .regular-form-btn-clear-styles.input-card.icon-right:after {
            right: 0;
        }

        .centered-color-btn-styles {
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: center;
            justify-content: center;
            background-color: var(--color-white);
            color: #000000;
            text-align: center;
        }

        .centered-color-btn-styles.blue {
            color: #4BA8F9;
            border-color: currentColor;
        }

        .centered-color-btn-styles.blue:hover,
        .centered-color-btn-styles.blue:focus {
            background-color: #4BA8F9;
            color: var(--color-white);
        }

        /* For mac screens */
        @media (max-width: 1460px) and (min-width: 1200px) {
            .regular-form-btn-styles > img {
                min-height: calc(24px * 0.7114583);
                max-height: calc(24px * 0.7114583);
                height: calc(24px * 0.7114583);
            }
            .regular-form-btn-clear-styles.input-card.icon-left {
                padding-left: calc(calc(16px + var(--icon-size-x)) * 0.7114583);
            }
            .regular-form-btn-clear-styles.input-card.icon-right {
                padding-right: calc(calc(16px + var(--icon-size-x)) * 0.7114583);
            }
            .regular-form-btn-styles.active::after {
                min-width: calc(16px * 0.7114583);
                max-width: calc(16px * 0.7114583);
                width: calc(16px * 0.7114583);
                min-height: calc(16px * 0.7114583);
                max-height: calc(16px * 0.7114583);
                height: calc(16px * 0.7114583);
            }
        }
        /* ** */
    /* ** */

    /* PROGRESS DOTS */
    .modal-header-step-dots.progress-dots-wrapper {
        position: absolute;
        top: 100%;
        left: 50%;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .progress-dots-wrapper {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
    }

    .progress-dots {
        list-style-type: none;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        background-color: #FFFFFF;
        padding: 0;
        margin: 0;
    }

    .progress-dot {
        display: -webkit-flex;
        display: flex;
        margin-left: 16px;
        margin-right: 16px;
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .progress-dot > span {
        --color-dot-1: #75DDFB;
        --color-dot-2: #61C5FB;
        --color-dot-3: #50AEF9;
        --color-dot-4: #46A2F9;
        --color-dot-5: #3F9EF7;
        --color-dot-6: #36A7F2;
        --color-dot-7: #26B9E8;
        --color-dot-8: #10D3DA;
        position: relative;
        min-width: 16px;
        max-width: 16px;
        width: 16px;
        aspect-ratio: 1 / 1;
        background-color: transparent;
        border: 1px solid var(--color-dot-1);
        border-radius: 50%;
        overflow: hidden;
    }

    .progress-dot > span::after {
        content: '';
        position: absolute;
        inset: 0;
        background-color: var(--color-dot-1);
        opacity: 0;
        -webkit-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease;
    }

        /* Range of colors */
        .progress-dot:nth-of-type(2) > span {
            border-color: var(--color-dot-2);
        }
        .progress-dot:nth-of-type(2) > span::after {
            background-color: var(--color-dot-2);
        }
        .progress-dot:nth-of-type(3) > span {
            border-color: var(--color-dot-3);
        }
        .progress-dot:nth-of-type(3) > span::after {
            background-color: var(--color-dot-3);
        }
        .progress-dot:nth-of-type(4) > span {
            border-color: var(--color-dot-4);
        }
        .progress-dot:nth-of-type(4) > span::after {
            background-color: var(--color-dot-4);
        }
        .progress-dot:nth-of-type(5) > span {
            border-color: var(--color-dot-5);
        }
        .progress-dot:nth-of-type(5) > span::after {
            background-color: var(--color-dot-5);
        }
        .progress-dot:nth-of-type(6) > span {
            border-color: var(--color-dot-6);
        }
        .progress-dot:nth-of-type(6) > span::after {
            background-color: var(--color-dot-6);
        }
        .progress-dot:nth-of-type(7) > span {
            border-color: var(--color-dot-7);
        }
        .progress-dot:nth-of-type(7) > span::after {
            background-color: var(--color-dot-7);
        }
        .progress-dot:nth-of-type(8) > span {
            border-color: var(--color-dot-8);
        }
        .progress-dot:nth-of-type(8) > span::after {
            background-color: var(--color-dot-8);
        }
        /* ** */

        /* Range of activity */
        .form-section[data-step="1"] .progress-dot:nth-of-type(1) > span::after,
        .form-section[data-step="2"] .progress-dot:nth-of-type(1) > span::after,
        .form-section[data-step="2"] .progress-dot:nth-of-type(2) > span::after,
        .form-section[data-step="3"] .progress-dot:nth-of-type(1) > span::after,
        .form-section[data-step="3"] .progress-dot:nth-of-type(2) > span::after,
        .form-section[data-step="3"] .progress-dot:nth-of-type(3) > span::after,
        .form-section[data-step="4"] .progress-dot:nth-of-type(1) > span::after,
        .form-section[data-step="4"] .progress-dot:nth-of-type(2) > span::after,
        .form-section[data-step="4"] .progress-dot:nth-of-type(3) > span::after,
        .form-section[data-step="4"] .progress-dot:nth-of-type(4) > span::after,
        .form-section[data-step="5"] .progress-dot:nth-of-type(1) > span::after,
        .form-section[data-step="5"] .progress-dot:nth-of-type(2) > span::after,
        .form-section[data-step="5"] .progress-dot:nth-of-type(3) > span::after,
        .form-section[data-step="5"] .progress-dot:nth-of-type(4) > span::after,
        .form-section[data-step="5"] .progress-dot:nth-of-type(5) > span::after,
        .form-section[data-step="6"] .progress-dot:nth-of-type(1) > span::after,
        .form-section[data-step="6"] .progress-dot:nth-of-type(2) > span::after,
        .form-section[data-step="6"] .progress-dot:nth-of-type(3) > span::after,
        .form-section[data-step="6"] .progress-dot:nth-of-type(4) > span::after,
        .form-section[data-step="6"] .progress-dot:nth-of-type(5) > span::after,
        .form-section[data-step="6"] .progress-dot:nth-of-type(6) > span::after,
        .form-section[data-step="7"] .progress-dot:nth-of-type(1) > span::after,
        .form-section[data-step="7"] .progress-dot:nth-of-type(2) > span::after,
        .form-section[data-step="7"] .progress-dot:nth-of-type(3) > span::after,
        .form-section[data-step="7"] .progress-dot:nth-of-type(4) > span::after,
        .form-section[data-step="7"] .progress-dot:nth-of-type(5) > span::after,
        .form-section[data-step="7"] .progress-dot:nth-of-type(6) > span::after,
        .form-section[data-step="7"] .progress-dot:nth-of-type(7) > span::after,
        .form-section[data-step="8"] .progress-dot:nth-of-type(1) > span::after,
        .form-section[data-step="8"] .progress-dot:nth-of-type(2) > span::after,
        .form-section[data-step="8"] .progress-dot:nth-of-type(3) > span::after,
        .form-section[data-step="8"] .progress-dot:nth-of-type(4) > span::after,
        .form-section[data-step="8"] .progress-dot:nth-of-type(5) > span::after,
        .form-section[data-step="8"] .progress-dot:nth-of-type(6) > span::after,
        .form-section[data-step="8"] .progress-dot:nth-of-type(7) > span::after,
        .form-section[data-step="8"] .progress-dot:nth-of-type(8) > span::after {
            opacity: 1;
        }
        /* ** */

    /* For mac screens */
    @media (max-width: 1460px) and (min-width: 1200px) {
        .progress-dot {
            margin-left: calc(16px * 0.7114583);
            margin-right: calc(16px * 0.7114583);
            margin-top: calc(16px * 0.7114583);
            margin-bottom: calc(16px * 0.7114583);
        }
        .progress-dot > span {
            min-width: calc(16px * 0.7114583);
            max-width: calc(16px * 0.7114583);
            width: calc(16px * 0.7114583);
        }
    }

    @media (max-width: 1199px) {
        .progress-dot {
            margin-left: 8px;
            margin-right: 8px;
            margin-top: 8px;
            margin-bottom: 8px;
        }
        .progress-dot > span {
            min-width: 8px;
            max-width: 8px;
            width: 8px;
        }
    }
    /* ** */

/* FOOTER */
.footer-default {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 0 16px;
}

.footer-items {
    list-style-type: none;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    margin-left: -25px;
    margin-right: -25px;
}

.footer-item {
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 18px;
}

.footer-item > a {
    color: var(--color-black-2);
    font-size: 14px;
    font-weight: 300;
    line-height: 21px;
}

.footer-item > a:hover,
.footer-item > a:focus-visible {
    text-decoration: underline;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .footer-default {
        padding: 0 calc(16px * 0.7114583);
    }
    .footer-items {
        margin-left: calc(-25px * 0.7114583);
        margin-right: calc(-25px * 0.7114583);
    }
    .footer-item {
        padding-left: calc(25px * 0.7114583);
        padding-right: calc(25px * 0.7114583);
        margin-bottom: calc(18px * 0.7114583);
    }
    .footer-item > a {
        font-size: calc(14px * 0.7114583);
        line-height: calc(21px * 0.7114583);
    }
}
/* ** */

/* MODAL CONTENT TOGGLEABLE */
.modal-content-toggelable .form-section:not(.active) {
    display: none;
}
/* ** */

/* FINAL TOOLTIPS */
#overlays-wrapper {
    position: absolute;
    z-index: 11000;
}

.tooltip-new-anchor {
    position: relative;
    display: inline-block;
    min-width: var(--size-x);
    max-width: var(--size-x);
    width: var(--size-x);
    min-height: var(--size-y);
    max-height: var(--size-y);
    height: var(--size-y);
    background-image: var(--bg-url);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 8px;
}

.tippy-box {
    max-width: none !important;
    width: max-content;
}

.tippy-box[data-theme~="big"] {
    width: min(600px, 90vw);
}

.tippy-box[data-theme~="medium"] {
    width: min(350px, 50vw);
}

.tippy-content {
    background-color: #FFFFFF;
    color: #656565;
    font-size: 12px;
    font-weight: 300;
    line-height: normal;
    border: 1px solid #4BA8F9;
    border-radius: 4px;
    padding: 4px 8px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}

.tippy-box[data-theme~="green-border"] .tippy-content {
    border-color: #CCEE6B
}

.tippy-box[data-theme~="green"] .tippy-content {
    background-color: #CCEE6B;
    color: #262626;
    border-color: #CCEE6B;
}

.tippy-box[data-theme~="red"] .tippy-content {
    background-color: red;
    color: #262626;
    border-color: red;
}

.tippy-box[data-theme~="error"] .tippy-content {
    color: #262626;
    border-color: #C21313;
}

.tippy-content > strong {
    font-weight: 500;
}

.tippy-content > .underline,
.tippy-content > a {
    text-decoration: underline;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    /* .tooltip-new-anchor {
        min-width: calc(var(--size-x) * 0.7114583);
        max-width: calc(var(--size-x) * 0.7114583);
        width: calc(var(--size-x) * 0.7114583);
        min-height: calc(var(--size-y) * 0.7114583);
        max-height: calc(var(--size-y) * 0.7114583);
        height: calc(var(--size-y) * 0.7114583);
        margin-left: calc(8px * 0.7114583);
    } */
    .tippy-box[data-theme~="big"] {
        width: min(calc(600px * 0.7114583), 100vw);
    }
    .tippy-box[data-theme~="medium"] {
        width: min(calc(350px * 0.7114583), 50vw);
    }
    .tippy-content {
        max-width: calc(600px * 0.7114583);
        font-size: calc(12px * 0.7114583);
        padding: calc(4px * 0.7114583) calc(8px * 0.7114583);
    }
}
/* ** */

/* MODAL TEXTS NEW */
.modal-text-section-new + .modal-text-section-new {
    margin-top: 40px;
}

.modal-text-section-new.centered > * {
    text-align: center;
}

.modal-text-new-main {
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 24px;
}

.modal-text-new-side {
    color: #656565;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 16px;
}

.input-wrap-new + .modal-text-new-side {
    margin-top: 16px;
}

.modal-text-new-side > a {
    color: #409CF8;
}

.modal-text-new-side > a:hover,
.modal-text-new-side > a:focus-visible {
    text-decoration: underline;
}

.modal-text-section-buttons-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.modal-text-new-anchors-wrap {
    list-style-type: none;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    margin-left: -8px;
    margin-right: -8px;
}

.modal-text-new-anchors-wrap > * {
    padding-left: 8px;
    padding-right: 8px;
}

.modal-text-new-anchor > a {
    color: #409CF8;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.modal-text-new-anchor > a:hover,
.modal-text-new-anchor > a:focus-visible {
    text-decoration: underline;
}

.modal-text-section-buttons-wrap > * + * {
    margin-top: 16px;
}

.modal-text-section-buttons-wrap + .modal-text-new-main {
    margin-top: 24px;
}

.modal-text-section-buttons-double-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -4px;
    margin-right: -4px;
}

.modal-text-section-buttons-double-wrap + .modal-text-section-buttons-double-wrap {
    margin-top: 16px;
}

.modal-text-section-buttons-double-wrap > * {
    padding-left: 4px;
    padding-right: 4px;
}

.modal-text-section-buttons-double-col {
    display: -webkit-flex;
    display: flex;
    min-width: 50%;
    max-width: 50%;
    width: 50%;
}

.modal-text-section-buttons-double-col > * {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}

.modal-text-section-buttons-heading {
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

.modal-logo-para-wrap {
    display: -webkit-flex;
    display: flex;
    margin-bottom: 16px;
}

.modal-logo-para-wrap > img {
    display: block;
    min-height: 24px;
    max-height: 24px;
    height: 24px;
    pointer-events: none;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .modal-text-section-new + .modal-text-section-new {
        margin-top: calc(40px * 0.7114583);
    }
    .modal-text-new-main {
        font-size: calc(16px * 0.7114583);
        margin-bottom: calc(24px * 0.7114583);
    }
    .modal-text-new-side {
        font-size: calc(14px * 0.7114583);
        margin-bottom: calc(16px * 0.7114583);
    }
    .modal-text-section-buttons-wrap > * + * {
        margin-top: calc(16px * 0.7114583);
    }
    .modal-text-section-buttons-double-wrap {
        margin-left: calc(-4px * 0.7114583);
        margin-right: calc(-4px * 0.7114583);
    }
    .modal-text-section-buttons-double-wrap + .modal-text-section-buttons-double-wrap {
        margin-top: calc(16px * 0.7114583);
    }
    .modal-text-section-buttons-double-wrap > * {
        padding-left: calc(4px * 0.7114583);
        padding-right: calc(4px * 0.7114583);
    }
    .modal-text-section-buttons-heading {
        font-size: calc(16px * 0.7114583);
    }
    .modal-text-section-buttons-wrap + .modal-text-new-main {
        margin-top: calc(24px * 0.7114583);
    }
    .modal-logo-para-wrap {
        margin-bottom: calc(16px * 0.7114583);
    }
    .modal-logo-para-wrap > img {
        min-height: calc(24px * 0.7114583);
        max-height: calc(24px * 0.7114583);
        height: calc(24px * 0.7114583);
    }
    .input-wrap-new + .modal-text-new-side {
        margin-top: calc(16px * 0.7114583);
    }
}

@media (max-width: 1199px) {
    .modal-text-section-buttons-double-col {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .modal-text-section-buttons-double-col + .modal-text-section-buttons-double-col {
        margin-top: 8px;
    }
}
/* ** */

/* NEW INPUTS COMPONENT */

.input-wrap-input-new {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}
/* ***/

/* NEW LOADER COMPONENT */
.loader-marketadd-wrap:not(.active) {
    display: none;
}

.loader-marketadd {
    --loader-size: 100px;
    min-width: var(--loader-size);
    max-width: var(--loader-size);
    width: var(--loader-size);
    aspect-ratio: 1 / 1;
    background-image: var(--bg-url);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: loader-rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes loader-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/* ** */

/* MODAL DOMAIN CHECK */
.modal-domain-check-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 16px;
    margin-left: -16px;
    margin-right: -16px;
}

.modal-domain-check-wrap > * {
    padding-left: 16px;
    padding-right: 16px;
}

.modal-domain-check-info-wrap {
    flex-grow: 1;
}

.modal-domain-check-info-wrap-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    /* -webkit-justify-content: flex-end;
    justify-content: flex-end; */
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -16px;
    margin-right: -16px;
}

.modal-domain-check-info-wrap-inner > * {
    padding-left: 16px;
    padding-right: 16px;
}

.modal-domain-check-status {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.modal-domain-check-status .status {
    --status-ball-size: 24px;
    position: relative;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    padding-left: calc(var(--status-ball-size) + calc(var(--status-ball-size) * 0.66666666));
}

.modal-domain-check-status .status.green {
    color: #16B239;
}

.modal-domain-check-status .status.red {
    color: #C21313;
}

.modal-domain-check-status .status.yellow {
    color: #FFFF00;
}

.modal-domain-check-status .status::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    min-width: 24px;
    max-width: 24px;
    width: 24px;
    aspect-ratio: 1 / 1;
    background-color: currentColor;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.modal-domain-check-price,
.modal-domain-check-price-annual {
    color: #000000;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

.modal-domain-check-price > strong,
.modal-domain-check-price-annual > strong {
    font-size: 16px;
    font-weight: 600;
}

.modal-domain-input-prewrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-left: -8px;
    margin-right: -8px;
}

.modal-domain-input-prewrap > * {
    padding-left: 8px;
    padding-right: 8px;
}

.modal-domain-input-prewrap > .input-wrap-new {
    flex-grow: 1;
}

.modal-domain-name-wrap * {
    color: #262626;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-align: end;
    hyphens: auto; 
}

.modal-domain-address-wrap {
    margin-top: 16px;
}

.modal-domain-address-wrap {
    color: #656565;
    font-size: 14px;
    font-weight: 400;
    line-height: normal; 
}

.modal-domain-address-wrap strong {
    font-weight: 700;
}

    /* LOADER */
    .modal-domain-check-info-loader {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }

    .modal-domain-check-info-loader .loader-marketadd {
        --loader-size: 24px;
    }
    /* ** */

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .modal-domain-check-wrap {
        margin-top: calc(16px * 0.7114583);
        margin-left: calc(-16px * 0.7114583);
        margin-right: calc(-16px * 0.7114583);
    }
    .modal-domain-check-wrap > * {
        padding-left: calc(16px * 0.7114583);
        padding-right: calc(16px * 0.7114583);
    }
    .modal-domain-check-info-wrap-inner {
        margin-left: calc(-16px * 0.7114583);
        margin-right: calc(-16px * 0.7114583);
    }
    .modal-domain-check-info-wrap-inner > * {
        padding-left: calc(16px * 0.7114583);
        padding-right: calc(16px * 0.7114583);
    }
    .modal-domain-check-status .status {
        --status-ball-size: calc(24px * 0.7114583);
        font-size: calc(14px * 0.7114583);
    }
    .modal-domain-check-status .status::before {
        min-width: calc(24px * 0.7114583);
        max-width: calc(24px * 0.7114583);
        width: calc(24px * 0.7114583);
    }
    .modal-domain-check-price,
    .modal-domain-check-price-annual {
        font-size: calc(14px * 0.7114583);
    }
    .modal-domain-check-price > strong,
    .modal-domain-check-price-annual > strong {
        font-size: calc(16px * 0.7114583);
    }
    .modal-domain-input-prewrap {
        margin-left: calc(-8px * 0.7114583);
        margin-right: calc(-8px * 0.7114583);
    }
    .modal-domain-input-prewrap > * {
        padding-left: calc(8px * 0.7114583);
        padding-right: calc(8px * 0.7114583);
    }
    .modal-domain-name-wrap * {
        font-size: calc(16px * 0.7114583);
    }
    .modal-domain-address-wrap {
        margin-top: calc(16px * 0.7114583);
    }
    .modal-domain-address-wrap * {
        font-size: calc(14px * 0.7114583);
    }
}

@media (max-width: 1199px) {
    .modal-domain-check-btn-wrap,
    .modal-domain-check-btn-wrap > *,
    .modal-domain-check-info-wrap {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .modal-domain-check-btn-wrap {
        order: 2;
    }
    .modal-domain-check-info-wrap {
        order: 1;
        margin-bottom: 16px;
    }
    .modal-domain-input-prewrap {
        -webkit-align-items: initial;
        align-items: initial;
        -webkit-flex-direction: column;
        flex-direction: column;
    } 
}

@media (max-width: 575px) {
    .modal-domain-check-info-wrap-inner {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .modal-domain-check-info-wrap-inner > * + * {
        margin-top: 16px;
    }
}
/* ** */

/* SHIPMENT METHODS */
.shipment-methods-wrap {
    --item-spacing: 16px;
    list-style-type: none;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    margin-left: calc(var(--item-spacing) * -1);
    margin-right: calc(var(--item-spacing) * -1);
}

.shipment-methods-wrap > * {
    padding-left: var(--item-spacing);
    padding-right: var(--item-spacing);
    margin-bottom: calc(var(--item-spacing) * 2);
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .shipment-methods-wrap {
        --item-spacing: calc(16px * 0.7114583);
    }
}

/* BLOCK NEW RADIO COMPONENT */
.hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    visibility: hidden;
    z-index: -1;
    pointer-events: none;
}

.block-radio-new-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.block-radio-new-wrap > * + *,
.block-radio-new-text-wrap > * + * {
    margin-top: 8px;
}

.block-radio-new-label {
    --item-size: 120px;
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-width: var(--item-size);
    max-width: var(--item-size);
    width: var(--item-size);
}

.block-radio-new-label-inner {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #F5F5F5;
    border: 1px solid #A9A9A9;
    border-radius: 4px;
    padding: 12px;
    -webkit-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
    cursor: pointer;
    z-index: 1;
}

.block-radio-new-label-inner::before,
.block-radio-new-label-inner-checkmark {
    content: '';
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    z-index: -1;
    pointer-events: none;
}

.block-radio-new-label-inner::before {
    inset: 0;
    box-shadow: 0px 0px 15px 0px rgba(191, 233, 70, 0.25);
}

.block-radio-new-label-inner-checkmark {
    position: absolute;
    top: 0;
    right: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: 32px;
    max-width: 32px;
    width: 32px;
    aspect-ratio: 1 / 1;
    background-color: #BFE946;
    border-radius: 4px;
    z-index: 1;
}

.block-radio-new-label-inner-checkmark > img {
    display: block;
    min-width: 16px;
    max-width: 16px;
    width: 16px;
    aspect-ratio: 1 / 1;
    object-position: center;
    object-fit: cover;
}

.block-radio-new-thumb {
    display: block;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 344 / 178;
}

.block-radio-new-input:checked + .block-radio-new-label-inner {
    border-color: #BFE946;
}

.block-radio-new-input:checked + .block-radio-new-label-inner::before,
.block-radio-new-input:checked + .block-radio-new-label-inner .block-radio-new-label-inner-checkmark {
    opacity: 1;
}

.block-radio-new-text-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.block-radio-new-text-main {
    color: #262626;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    text-align: center;
}

.block-radio-new-text-side {
    color: #BAC0C8;
    font-size: 14px;
    font-weight: 400;
    line-height: normal; 
    text-align: center;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .block-radio-new-label-inner {
        padding: calc(12px * 0.7114583);
    }
    .block-radio-new-label-inner-checkmark {
        min-width: calc(32px * 0.7114583);
        max-width: calc(32px * 0.7114583);
        width: calc(32px * 0.7114583);
    }
    .block-radio-new-label-inner-checkmark > img {
        min-width: calc(16px * 0.7114583);
        max-width: calc(16px * 0.7114583);
        width: calc(16px * 0.7114583);
    }
    .block-radio-new-wrap > * + *,
    .block-radio-new-text-wrap > * + * {
        margin-top: calc(8px * 0.7114583);
    }
    .block-radio-new-text-main {
        font-size: calc(16px * 0.7114583);
    }
    .block-radio-new-text-side {
        font-size: calc(14px * 0.7114583);
    }
}

/* ** */

/* CHOOSE THEME */
.theme-choose-section {
    max-width: 752px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.choose-theme-wrap {
    list-style-type: none;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    margin-left: -16px;
    margin-right: -16px;
}

.choose-theme-wrap > * {
    padding-left: 16px;
    padding-right: 16px;
}

.choose-theme-item {
    min-width: 50%;
    max-width: 50%;
    width: 50%;
}

.choose-theme-item + .choose-theme-item + .choose-theme-item {
    margin-top: 32px;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .choose-theme-wrap {
        margin-left: calc(-16px * 0.7114583);
        margin-right: calc(-16px * 0.7114583);
    }
    .choose-theme-wrap > * {
        padding-left: calc(16px * 0.7114583);
        padding-right: calc(16px * 0.7114583);
    }
    .choose-theme-item + .choose-theme-item + .choose-theme-item {
        margin-top: calc(32px * 0.7114583);
    }
}

@media (max-width: 767px) {
    .choose-theme-item {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .choose-theme-item + .choose-theme-item,
    .choose-theme-item + .choose-theme-item + .choose-theme-item {
        margin-top: 32px;
    }
}
/* ** */

/* BLOCK NEW RADIO HOVERABLE COMPONENT */
.block-radio-new-hoverable-wrap {
    position: relative;
}

.block-radio-new-hoverable-visuals {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    background-color: #F5F5F5;
    border: 1px solid #A9A9A9;
    border-radius: 4px;
    padding: 8px;
    -webkit-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
    cursor: pointer;
    z-index: 1;
}

.block-radio-new-hoverable-visuals::before,
.block-radio-new-hoverable-visuals-inner-checkmark {
    content: '';
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    z-index: -1;
    pointer-events: none;
}

.block-radio-new-hoverable-input:checked + .block-radio-new-hoverable-visuals {
    border: 1px solid #BFE946;
}

.block-radio-new-hoverable-input:checked + .block-radio-new-hoverable-visuals::before,
.block-radio-new-hoverable-input:checked + .block-radio-new-hoverable-visuals .block-radio-new-hoverable-visuals-inner-checkmark {
    opacity: 1;
}

.block-radio-new-hoverable-visuals::before {
    inset: 0;
    box-shadow: 0px 0px 15px 0px rgba(191, 233, 70, 0.25);
}

.block-radio-new-hoverable-visuals-inner-checkmark {
    position: absolute;
    top: 0;
    right: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: 32px;
    max-width: 32px;
    width: 32px;
    aspect-ratio: 1 / 1;
    background-color: #BFE946;
    border-radius: 4px;
    z-index: 1;
}

.block-radio-new-hoverable-visuals-inner-checkmark > img {
    display: block;
    min-width: 16px;
    max-width: 16px;
    width: 16px;
    aspect-ratio: 1 / 1;
    object-position: center;
    object-fit: cover;
}

.block-radio-new-hoverable-thumb {
    display: block;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    height: auto;
    margin-bottom: 16px;
}

.block-radio-new-hoverable-title {
    color: #262626;
    font-size: 16px;
    font-weight: 500;
    line-height: normal; 
}

.block-radio-new-hoverable-actions {
    position: absolute;
    inset: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background-color: rgba(245, 245, 245, 0.90);
    border-radius: 4px;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    opacity: 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.block-radio-new-hoverable-wrap:hover .block-radio-new-hoverable-actions,
.block-radio-new-hoverable-wrap.mobile-hover .block-radio-new-hoverable-actions {
    opacity: 1;
    pointer-events: all;
}

.block-radio-new-hoverable-actions > * {
    position: relative;
    min-width: 48px;
    max-width: 48px;
    width: 48px;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    padding: 4px;
    margin: 8px;
    cursor: pointer;
    -webkit-transition: background-color 0.3s ease, border-color 0.3s ease;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.block-radio-new-hoverable-actions > *::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: var(--icon-size-x);
    max-width: var(--icon-size-x);
    width: var(--icon-size-x);
    min-height: var(--icon-size-y);
    max-height: var(--icon-size-y);
    height: var(--icon-size-y);
    -webkit-mask-image: var(--bg-url);
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--bg-url);
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

.block-radio-new-hoverable-actions > *:nth-child(1) {
    background-color: #FFFFFF;
    border: 1px solid #4BA8F9;
}

.block-radio-new-hoverable-actions > *:nth-child(1)::before {
    background-color: #4BA8F9;
}

.block-radio-new-hoverable-actions > *:nth-child(2) {
    background-color: #FFFFFF;
    border: 1px solid #BFE946;
}

.block-radio-new-hoverable-actions > *:nth-child(2)::before {
    background-color: #BFE946;
}

.block-radio-new-hoverable-actions > *:nth-child(1):hover,
.block-radio-new-hoverable-actions > *:nth-child(1):focus-visible {
    background-color: #4BA8F9;
    border-color: #4BA8F9;
}

.block-radio-new-hoverable-input:checked + .block-radio-new-hoverable-visuals + .block-radio-new-hoverable-actions > *:nth-child(2),
.block-radio-new-hoverable-actions > *:nth-child(2):hover,
.block-radio-new-hoverable-actions > *:nth-child(2):focus-visible {
    background-color: #BFE946;
    border-color: #BFE946;
}

.block-radio-new-hoverable-input:checked + .block-radio-new-hoverable-visuals + .block-radio-new-hoverable-actions > *:nth-child(2)::before,
.block-radio-new-hoverable-actions > *:nth-child(1):hover::before,
.block-radio-new-hoverable-actions > *:nth-child(1):focus-visible::before,
.block-radio-new-hoverable-actions > *:nth-child(2):hover::before,
.block-radio-new-hoverable-actions > *:nth-child(2):focus-visible::before {
    background-color: #FFFFFF;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .choose-theme-wrap {
        margin-left: calc(-16px * 0.7114583);
        margin-right: calc(-16px * 0.7114583);
    }
    .block-radio-new-hoverable-visuals {
        padding: calc(8px * 0.7114583);
    }
    .block-radio-new-hoverable-visuals-inner-checkmark {
        min-width: calc(32px * 0.7114583);
        max-width: calc(32px * 0.7114583);
        width: calc(32px * 0.7114583);
    }
    .block-radio-new-hoverable-visuals-inner-checkmark > img {
        min-width: calc(16px * 0.7114583);
        max-width: calc(16px * 0.7114583);
        width: calc(16px * 0.7114583);
    }
    .block-radio-new-hoverable-thumb {
        margin-bottom: calc(16px * 0.7114583);
    }
    .block-radio-new-hoverable-title {
        font-size: calc(16px * 0.7114583);
    }
    .block-radio-new-hoverable-actions > * {
        min-width: calc(48px * 0.7114583);
        max-width: calc(48px * 0.7114583);
        width: calc(48px * 0.7114583);
        padding: calc(4px * 0.7114583);
        margin: calc(8px * 0.7114583);
    }
    .block-radio-new-hoverable-actions > *::before {
        min-width: calc(var(--icon-size-x) * 0.7114583);
        max-width: calc(var(--icon-size-x) * 0.7114583);
        width: calc(var(--icon-size-x) * 0.7114583);
        min-height: calc(var(--icon-size-y) * 0.7114583);
        max-height: calc(var(--icon-size-y) * 0.7114583);
        height: calc(var(--icon-size-y) * 0.7114583);
    }
}
/* ** */

/* LIGHTBOX */
.lightbox {
    z-index: 10022;
}
.lightboxOverlay {
    z-index: 10021;
}
/* LIGHTBOX END */

/* LOGO LIST COMPONENT */
.logo-list-wrap {
    list-style-type: none;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.logo-list-item,
.logo-list-item > a {
    display: -webkit-flex;
    display: flex;
}

.logo-list-item > a {
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.logo-list-item > a > img {
    display: block;
    min-height: 48px;
    max-height: 48px;
    height: 48px;
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 16px;
}

.logo-list-item > a:hover,
.logo-list-item > a:focus-visible {
    opacity: 0.66;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .logo-list-item > a > img {
        min-height: calc(48px * 0.7114583);
        max-height: calc(48px * 0.7114583);
        height: calc(48px * 0.7114583);
        margin-left: calc(16px * 0.7114583);
        margin-right: calc(16px * 0.7114583);
        margin-bottom: calc(16px * 0.7114583);
    }
}
/* ** */

/* MODAL DOMAIN SECTION */

.modal-loader-section-new {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

    /* LOADER */
    .modal-loader-section-loader {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        margin-bottom: 40px;
    }

    .modal-loader-section-loader .loader-marketadd {
        --loader-size: 56px;
    }
    /* ** */

    .modal-loader-section-text-regular,
    .modal-loader-section-text-heading {
        color: #000000;
        text-align: center;
        line-height: normal;
    }

    .modal-loader-section-text-regular {
        font-size: 20px;
        font-weight: 300;
    }

    .modal-loader-section-text-heading {
        font-size: 37px;
        font-weight: 700;
        margin-bottom: 40px;
    }

    .modal-loader-section-text-side {
        color: #656565;
        font-size: 14px;
        font-weight: 400;
        line-height: normal; 
        text-align: center;
    }

    .modal-loader-section-text-side + .modal-loader-section-text-side {
        margin-top: 16px;
    }

    .modal-loader-section-text-side > a {
        color: #409CF8;
    }

    .modal-loader-section-text-side > a:hover,
    .modal-loader-section-text-side > a:focus-visible {
        text-decoration: underline;
    }

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .modal-loader-section-loader {
        margin-bottom: calc(40px * 0.7114583);
    }
    .modal-loader-section-loader .loader-marketadd {
        --loader-size: calc(56px * 0.7114583);
    }
    .modal-loader-section-text-regular {
        font-size: calc(20px * 0.7114583);
    }
    .modal-loader-section-text-heading {
        font-size: calc(37px * 0.7114583);
        margin-bottom: calc(40px * 0.7114583);
    }
    .modal-loader-section-text-side {
        font-size: calc(14px * 0.7114583);
    }
    .modal-loader-section-text-side + .modal-loader-section-text-side {
        margin-top: calc(16px * 0.7114583);
    }
}

@media (max-width: 1199px) {
    .modal-loader-section-text-heading {
        font-size: 28px;
    }
}
/* ** */

/* NOTIFICATION CARD COMPONENT */
.notification-cards {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    font-size: 16px;
    font-weight: 300;
    line-height: normal;
    margin-bottom: 24px;
}

.notification-cards.error {
    color: #C21313;
}

.notification-cards > li {
    font-size: inherit;
    font-style: normal;
    font-weight: inherit;
    line-height: inherit;
    border-radius: 4px;
    padding: 8px 16px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.10);
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .notification-cards {
        font-size: calc(16px * 0.7114583);
        margin-bottom: calc(24px * 0.7114583);
    }
    .notification-cards > li {
        padding: calc(8px 16px * 0.7114583);
    }
}
/* ** */

/* LAYOUT CARD COMPONENT */
.modal-body > .layout-card {
    margin: 5px;
}

.layout-card {
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 16px 32px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    /* overflow: hidden; */
}

.layout-card.fullheight {
    min-height: 100%;
}

.layout-card + .layout-card,
.layout-card + .layout-cards__row,
.layout-cards__row + * {
    margin-top: 16px;
}

.layout-cards__row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}

.layout-cards__row.end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.layout-cards__row > * {
    flex: 0 0 auto;
    padding-left: 8px;
    padding-right: 8px;
}

.layout-cards__col {
    min-width: 50%;
    max-width: 50%;
    width: 50%;
}

.layout-cards__col.bigger {
    min-width: 55%;
    max-width: 55%;
    width: 55%;
}

.layout-cards__col.smaller {
    min-width: 45%;
    max-width: 45%;
    width: 45%;
}

.layout-cards__col.bigger-2 {
    min-width: 69.64504283%;
    max-width: 69.64504283%;
    width: 69.64504283%;
}

.layout-cards__col.smaller-2 {
    min-width: 30.35495716%;
    max-width: 30.35495716%;
    width: 30.35495716%;
}

.layout-cards__col.single-input {
    /* min-width: 18.11505507%;
    max-width: 18.11505507%;
    width: 18.11505507%; */
    min-width: 402px;
    max-width: 402px;
    width: 402px;
}

.layout-cards__col.col-33 {
    min-width: 33.33333333%;
    max-width: 33.33333333%;
    width: 33.33333333%;
}

.layout-cards__col.col-full {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .modal-body > .layout-card {
        margin: calc(5px * 0.7114583);
    }
    .layout-card {
        padding: calc(16px * 0.7114583) calc(32px * 0.7114583);
    }
    .layout-card + .loayout-card,
    .layout-card + .layout-cards__row,
    .layout-cards__row + * {
        margin-top: calc(16px * 0.7114583);
    }
    .layout-cards__row {
        margin-left: calc(-8px * 0.7114583);
        margin-right: calc(-8px * 0.7114583);
    }
    .layout-cards__row > * {
        padding-left: calc(8px * 0.7114583);
        padding-right: calc(8px * 0.7114583);
    }
    .layout-cards__col.single-input {
        min-width: calc(402px * 0.7114583);
        max-width: calc(402px * 0.7114583);
        width: calc(402px * 0.7114583);
    }
}

@media (max-width: 1199px) {
    .layout-card {
        padding: 16px;
    }
    .layout-cards__col,
    .layout-cards__col.bigger,
    .layout-cards__col.smaller,
    .layout-cards__col.bigger-2,
    .layout-cards__col.smaller-2,
    .layout-cards__col.single-input,
    .layout-cards__col.col-33 {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .layout-cards__col + .layout-cards__col {
        margin-top: 16px;
    }
}
/* ** */

/* BUTTONS COMPONENT */
.btn-new {
    --padding-block: 4px;
    --padding-inline: 24px;
    position: relative;
    display: inline-flex;
    -webkit-justify-content: center;
    justify-content: center;
    border: none;
    outline: none;
    -webkit-appearance: none;
    background-color: transparent;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5; 
    text-align: center;
    border: 1px solid transparent; 
    border-radius: 4px;
    padding: var(--padding-block) var(--padding-inline);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.10);
    -webkit-transition: background-color 0.3s ease, color 0.3s ease;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-new.no-shadow,
.btn-new-icon-only.no-shadow  {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-new.icon-left {
    padding-left: calc(calc(var(--padding-inline) * 2) + var(--icon-size-x));
}

.btn-new.icon-right {
    padding-right: calc(calc(var(--padding-inline) * 2) + var(--icon-size-x));
}

.btn-new.icon-left::after,
.btn-new.icon-right::after {
    content: '';
    position: absolute;
    top: 50%;
    min-width: var(--icon-size-x);
    max-width: var(--icon-size-x);
    width: var(--icon-size-x);
    min-height: var(--icon-size-y);
    max-height: var(--icon-size-y);
    height: var(--icon-size-y);
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--icon-url);
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.btn-new.clear-black.icon-left::after,
.btn-new.clear-black.icon-right::after {
    background-color: currentColor;
    -webkit-mask-image: none;
    -webkit-mask-position: none;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: none;
    mask-image: none;
    mask-position: none;
    mask-size: cover;
    mask-repeat: none;
    background-color: transparent;
    background-image: var(--icon-url);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.btn-new.icon-left::after {
    left: var(--padding-inline);
}

.btn-new.icon-right:after {
    right: var(--padding-inline);
}

    /* BTN COLORS */
        /* PRIMARY */
        .btn-new.primary {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
        }

        .btn-new.primary:hover,
        .btn-new.primary:focus-visible {
            background-color: var(--color-white);
            color: var(--color-primary);
        }

        .btn-new.primary.clear {
            background-color: transparent;
            color: var(--color-primary);
            border-color: var(--color-primary);
        }

        .btn-new.primary.clear:hover,
        .btn-new.primary.clear:focus-visible {
            background-color: var(--color-primary);
            color: var(--color-white);
        }

        .btn-new.primary.clear-black {
            background-color: transparent;
            border-color: var(--color-primary);
        }

        .btn-new.primary.clear-black:hover,
        .btn-new.primary.clear-black:focus-visible {
            background-color: var(--color-primary);
            color: var(--color-white);
        }
    
        /* SECONDARY */
        .btn-new.secondary {
            background-color: var(--color-secondary);
            color: var(--color-black-2);
            border-color: var(--color-secondary);
        }

        .btn-new.secondary:hover,
        .btn-new.secondary:focus-visible {
            background-color: var(--color-white);
            color: var(--color-secondary);
        }

        .btn-new.secondary.clear {
            background-color: transparent;
            color: var(--color-secondary);
            border-color: var(--color-secondary);
        }

        .btn-new.secondary.clear:hover,
        .btn-new.secondary.clear:focus-visible {
            background-color: var(--color-secondary);
            color: var(--color-black-2);
        }

        /* RED */
        .btn-new.red {
            background-color: var(--color-red);
            border-color: var(--color-red);
        }

        .btn-new.red:hover,
        .btn-new.red:focus-visible {
            background-color: var(--color-white);
            color: var(--color-red);
        }

        .btn-new.red.clear {
            background-color: transparent;
            color: var(--color-red);
            border-color: var(--color-red);
        }

        .btn-new.red.clear:hover,
        .btn-new.red.clear:focus-visible {
            background-color: var(--color-red);
            color: var(--color-white);
        }
    /* ** */

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .btn-new {
        --padding-block: calc(4px * 0.7114583);
        --padding-inline: calc(24px * 0.7114583);
        font-size: calc(16px * 0.7114583);
    }
    .btn-new.icon-left {
        padding-left: calc(calc(var(--padding-inline) * 2) + calc(var(--icon-size-x) * 0.7114583));
    }
    .btn-new.icon-right {
        padding-right: calc(calc(var(--padding-inline) * 2) + calc(var(--icon-size-x) * 0.7114583));
    }
    .btn-new.icon-left::after,
    .btn-new.icon-right::after {
        min-width: calc(var(--icon-size-x) * 0.7114583);
        max-width: calc(var(--icon-size-x) * 0.7114583);
        width: calc(var(--icon-size-x) * 0.7114583);
        min-height: calc(var(--icon-size-y) * 0.7114583);
        max-height: calc(var(--icon-size-y) * 0.7114583);
        height: calc(var(--icon-size-y) * 0.7114583);
    }
}

.btn-new-text-type {
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    background-color: transparent;
    color: #4BA8F9;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

.btn-new-text-type:hover,
.btn-new-text-type:focus-visible {
    color: #4BA8F9;
    text-decoration: underline;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .btn-new-text-type {
        font-size: calc(16px * 0.7114583);
    }
}

.btn-new-icon-only {
    --button-size: 35px;
    -webkit-appearance: none;
    border: none;
    outline: none;
    background-color: #FFFFFF;
    position: relative;
    display: inline-flex;
    min-width: var(--button-size);
    max-width: var(--button-size);
    width: var(--button-size);
    min-height: var(--button-size);
    max-height: var(--button-size);
    height: var(--button-size);
    border-radius: 4px;
    border: 1px solid currentColor;
    padding: 0;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.10);
    -webkit-transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

.btn-new-icon-only::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: var(--icon-size-x);
    max-width: var(--icon-size-x);
    width: var(--icon-size-x);
    min-height: var(--icon-size-y);
    max-height: var(--icon-size-y);
    height: var(--icon-size-y);
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--icon-url);
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

    /* BTN COLORS */
    .btn-new-icon-only.primary {
        color: var(--color-primary);
    }

    .btn-new-icon-only.primary:hover {
        color: #FFFFFF;
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .btn-new-icon-only.red {
        color: #C21313;
    }

    .btn-new-icon-only.red:hover {
        color: #FFFFFF;
        background-color: #C21313;
        border-color: #C21313;
    }

    .btn-new-icon-only.red.reversed {
        color: #FFFFFF;
        background-color: #C21313;
        border-color: #C21313;
    }

    .btn-new-icon-only.red.reversed:hover {
        color: #C21313;
        background-color: #FFFFFF;
    }
    /* ** */

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .btn-new-icon-only {
        --button-size: calc(35px * 0.7114583);
    }
    .btn-new-icon-only::after {
        min-width: calc(var(--icon-size-x) * 0.7114583);
        max-width: calc(var(--icon-size-x) * 0.7114583);
        width: calc(var(--icon-size-x) * 0.7114583);
        min-height: calc(var(--icon-size-y) * 0.7114583);
        max-height: calc(var(--icon-size-y) * 0.7114583);
        height: calc(var(--icon-size-y) * 0.7114583);
    }
}
/* ** */

/* INPUT COMPONENT */
.input-new__wrap,
.input-new__inner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.input-new__inner {
    --spacing-x: 16px;
    position: relative;
}

.input-new__inner.icon-left input,
.input-new__inner.icon-left textarea {
    padding-left: calc(var(--icon-size-x) + calc(var(--spacing-x) * 2));
}

.input-new__inner.icon-right input,
.input-new__inner.icon-right textarea {
    padding-right: calc(var(--icon-size-x) + calc(var(--spacing-x) * 2));
}

.input-new__inner.icon-left::before,
.input-new__inner.icon-right::before {
    content: '';
    position: absolute;
    top: 50%;
    min-width: var(--icon-size-x);
    max-width: var(--icon-size-x);
    width: var(--icon-size-x);
    min-height: var(--icon-size-y);
    max-height: var(--icon-size-y);
    height: var(--icon-size-y);
    background-image: var(--icon-url);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
}

.input-new__inner.icon-left::before {
    left: 16px;
}

.input-new__inner.icon-right::before {
    right: 16px;
}

.input-card-new,
.tox-tinymce {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    background-color: #FFFFFF;
    color: #262626;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    border: 1px solid #BAC0C8;
    border-radius: 4px;
    padding: 4px var(--spacing-x);
    -webkit-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
    resize: none;
}

textarea.input-card-new {
    min-height: 128px;
    max-height: 128px;
    height: 128px;
}

.input-card-new:focus-visible,
.input-card-new:active {
    border-color: #4BA8F9;
}

.input-new-label__wrap {
    margin-bottom: 16px;
}

.input-new-label {
    color: #5E6E82;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

    /* ERROR HANDLING */
    .input-new__inner::after {
        content: '';
        position: absolute;
        top: 6px;
        right: 6px;
        min-width: 4px;
        max-width: 4px;
        width: 4px;
        aspect-ratio: 1 / 1;
        background-color: #C21313;
        pointer-events: none;
        border-radius: 50%;
        opacity: 0;
        -webkit-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease;
        z-index: 1;
    }

    .input-new__inner.error::after {
        opacity: 1;
    }

    .input-new__inner.error .input-card-new {
        border-color: #C21313;
    }

    /* For mac screens */
    @media (max-width: 1460px) and (min-width: 1200px) {
        .input-new__inner {
            --spacing-x: calc(16px * 0.7114583);
        }
        .input-new__inner::after {
            top: calc(6px * 0.7114583);
            right: calc(6px * 0.7114583);
            min-width: calc(4px * 0.7114583);
            max-width: calc(4px * 0.7114583);
            width: calc(4px * 0.7114583);
        }
    }
    /* ** */

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .input-card-new,
    .tox-tinymce {
        font-size: calc(16px * 0.7114583);
        padding: calc(4px * 0.7114583) var(--spacing-x);
    }
    textarea.input-card-new {
        min-height: calc(128px * 0.7114583);
        max-height: calc(128px * 0.7114583);
        height: calc(128px * 0.7114583);
    }
    .input-new-label__wrap {
        margin-bottom: calc(16px * 0.7114583);
    }
    .input-new-label {
        font-size: calc(14px * 0.7114583);
    }
}
/* ** */

/* CHECKBOX COMPONENT */
.checkbox-component-new__card {
    padding-top: 7px;
    padding-bottom: 7px;
    margin-bottom: 16px;
}

.checkbox-component-new__wrap {
    --checkbox-size: 16px;
    --checkbox-height: 16px;
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    cursor: pointer;
}

.checkbox-component-new__wrap.labeled {
    padding-left: calc(var(--checkbox-size) + 16px);
}

.checkbox-component-new__wrap.labeled .checkbox-component-new__wrap-inner {
    position: absolute;
    top: var(--checkbox-height);
    left: 0;
    -webkit-transform: translateY(calc(var(--checkbox-height) * -1));
    transform: translateY(calc(var(--checkbox-height) * -1));
}

.checkbox-component-new__wrap-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.checkbox-component-new__wrap input {
    display: none;
}

.checkbox-component-new__visuals {
    position: relative;
    display: block;
    min-width: var(--checkbox-size);
    max-width: var(--checkbox-size);
    width: var(--checkbox-size);
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    border: 1px solid #5E6E82;
    -webkit-transition: background-color 0.3s ease, border-color 0.3s ease;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.checkbox-component-new__wrap.minus .checkbox-component-new__visuals::after {
    background-image: url(../../images/icons/icon-checkbox-minus.svg);
}

.checkbox-component-new__visuals::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: var(--checkbox-size);
    max-width: var(--checkbox-size);
    width: var(--checkbox-size);
    aspect-ratio: 1 / 1;
    background-image: url(../../images/icons/icon-checkbox-checkmark.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.checkbox-component-new__wrap input:checked + .checkbox-component-new__visuals {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox-component-new__wrap input:checked + .checkbox-component-new__visuals::after {
    opacity: 1;
}

.checkbox-component-new__label {
    color: #5E6E82;
    font-size: 16px;
    font-weight: 400;
    line-height: var(--checkbox-height);
    user-select: none;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .checkbox-component-new__card {
        padding-top: calc(7px * 0.7114583);
        padding-bottom: calc(7px * 0.7114583);
        margin-bottom: calc(16px * 0.7114583);
    }
    .checkbox-component-new__wrap {
        --checkbox-size: calc(16px * 0.7114583);
        --checkbox-height: calc(16px * 0.7114583);
    }
    .checkbox-component-new__wrap.labeled {
        padding-left: calc(calc(var(--checkbox-size) * 0.7114583) + calc(16px * 0.7114583));
    }
    .checkbox-component-new__label {
        font-size: calc(16px * 0.7114583);
    }
}
/* ** */

/* RADIO COMPONENT */
.radio-component-new__card {
    padding-top: 7px;
    padding-bottom: 7px;
    margin-bottom: 16px;
}

.radio-component-new__wrap {
    --radio-size: 16px;
    --radio-height: 16px;
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    cursor: pointer;
}

.radio-component-new__wrap.labeled {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    padding-left: calc(var(--radio-size) + 16px);
}

.radio-component-new__wrap.labeled .radio-component-new__wrap-inner {
    position: absolute;
    top: var(--radio-height);
    left: 0;
    -webkit-transform: translateY(calc(var(--radio-height) * -1));
    transform: translateY(calc(var(--radio-height) * -1));
}

.radio-component-new__wrap-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.radio-component-new__wrap input {
    display: none;
}

.radio-component-new__visuals {
    position: relative;
    display: block;
    min-width: var(--radio-size);
    max-width: var(--radio-size);
    width: var(--radio-size);
    aspect-ratio: 1 / 1;
    background-color: var(--color-white);
    color: #5E6E82;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.radio-component-new__visuals::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: inherit;
    background-color: currentColor;
    border-radius: 50%;
    border: calc(calc(var(--radio-size) - 2px) * 0.1875) solid var(--color-white);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.radio-component-new__wrap input:checked + .radio-component-new__visuals::after {
    opacity: 1;
}

.radio-component-new__label {
    color: #5E6E82;
    font-size: 16px;
    font-weight: 400;
    line-height: var(--radio-height);
    user-select: none;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .radio-component-new__card {
        padding-top: calc(7px * 0.7114583);
        padding-bottom: calc(7px * 0.7114583);
        margin-bottom: calc(16px * 0.7114583);
    }
    .radio-component-new__wrap {
        --radio-size: calc(16px * 0.7114583);
        --radio-height: calc(16px * 0.7114583);
    }
    .radio-component-new__wrap.labeled {
        padding-left: calc(calc(var(--radio-size) * 0.7114583) + calc(16px * 0.7114583));
    }
    .radio-component-new__label {
        font-size: calc(16px * 0.7114583);
    }
}
/* ** */

/* BREADCRUMBS COMPONENT */
.breadcrumbs-component {
    --line-height: 35px;
    --color: var(--color-primary);
}

.breadcrumbs-component.iconic {
    position: relative;
    min-height: var(--line-height);
    padding-left: calc(var(--icon-size-x) + 16px);
}

.breadcrumbs-component.iconic::before {
    content: '';
    position: absolute;
    top: var(--line-height);
    left: 0;
    min-width: var(--icon-size-x);
    max-width: var(--icon-size-x);
    width: var(--icon-size-x);
    min-height: var(--icon-size-y);
    max-height: var(--icon-size-y);
    height: var(--icon-size-y);
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--color);
    mask-image: var(--icon-url);
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-transform: translateY(calc(var(--line-height) * -1));
    transform: translateY(calc(var(--line-height) * -1));
}

.breadcrumbs-component .breadcrumb {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    color: var(--color);
    font-size: 16px;
    font-weight: 400;
    line-height: var(--line-height);
}

.breadcrumbs-component .breadcrumb-item {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.breadcrumbs-component .breadcrumb-item:not(.active) {
    --separator-size-x: 9px;
    position: relative;
    padding-right: calc(var(--separator-size-x) + 4px);
    margin-right: 4px;
}

.breadcrumbs-component .breadcrumb-item:not(.active)::after {
    content: '>';
    position: absolute;
    top: 50%;
    right: 0;
    min-width: var(--separator-size-x);
    max-width: var(--separator-size-x);
    width: var(--separator-size-x);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.breadcrumbs-component .breadcrumb-item.active {
    color: inherit;
    font-size: 19px;
    font-weight: 500;
    line-height: inherit;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .breadcrumbs-component {
        --line-height: calc(35px * 0.7114583);
    }
    .breadcrumbs-component.iconic {
        padding-left: calc(calc(var(--icon-size-x) * 0.7114583) + calc(16px * 0.7114583));
    }
    .breadcrumbs-component.iconic::before {
        min-width: calc(var(--icon-size-x) * 0.7114583);
        max-width: calc(var(--icon-size-x) * 0.7114583);
        width: calc(var(--icon-size-x) * 0.7114583);
        min-height: calc(var(--icon-size-y) * 0.7114583);
        max-height: calc(var(--icon-size-y) * 0.7114583);
        height: calc(var(--icon-size-y) * 0.7114583);
    }
    .breadcrumbs-component .breadcrumb {
        font-size: calc(16px * 0.7114583);
    }
    .breadcrumbs-component .breadcrumb-item.active {
        font-size: calc(19px * 0.7114583);
    }
}
/* ** */

/* STANDARD HEADING COMPONENT */
.standard-heading-new-component {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    color: #5E6E82;
    font-size: 19px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 16px;
}

.standard-heading-new-component > .tooltip-new-anchor {
    padding-left: 16px;
    margin-left: auto;
}

.standard-desc-new-component {
    color: #5E6E82;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 16px;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .standard-heading-new-component {
        font-size: calc(19px * 0.7114583);
        margin-bottom: calc(16px * 0.7114583);
    }
}
/* ** */

/* TABS COMPONENT */
.tabs-component__tab-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    align-items: flex-end;
    -webkit-align-items: flex-end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    border-bottom: 1px solid #BAC0C8;
    margin-bottom: 16px;
}

.tabs-component__tab-list.start {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.tabs-component__tab-item > button {
    --padding-inline: 16px;
    position: relative;
    -webkit-appearance: none;
    border: none;
    outline: none;
    border-radius: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background-color: #EDF1F8; 
    color: #262626;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    border-radius: 10px 10px 0px 0px;
    padding: 4px var(--padding-inline);
    margin-left: 1px;
    margin-top: 1px;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
    z-index: 1;
}

.tabs-component__tab-item > button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px 10px 0px 0px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.tabs-component__tab-item > button.active,
.tabs-component__tab-item > button:hover,
.tabs-component__tab-item > button:focus-visible {
    background-color: #FFFFFF;
}

.tabs-component__tab-item > button.active::before,
.tabs-component__tab-item > button:hover::before,
.tabs-component__tab-item > button:focus-visible::before {
    opacity: 1;
}

.tabs-component__tab-item.icon-left > button {
    padding-left: calc(var(--padding-inline) + 16px + var(--icon-size-x));
}

.tabs-component__tab-item.icon-right > button {
    padding-right: calc(var(--padding-inline) + 16px + var(--icon-size-x));
}

.tabs-component__tab-item.icon-left > button::after,
.tabs-component__tab-item.icon-right > button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--padding-inline);
    min-width: var(--icon-size-x);
    max-width: var(--icon-size-x);
    width: var(--icon-size-x);
    min-height: var(--icon-size-y);
    max-height: var(--icon-size-y);
    height: var(--icon-size-y);
    background-image: var(--icon-url);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

[data-tabs-tab]:not(.active) {
    display: none;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .standard-heading-new-component {
        font-size: calc(19px * 0.7114583);
        margin-bottom: calc(16px * 0.7114583);
    }
    .tabs-component__tab-list {
        margin-bottom: calc(16px * 0.7114583);
    }
    .tabs-component__tab-item > button {
        --padding-inline: calc(16px * 0.7114583);
        font-size: calc(16px * 0.7114583);
        padding: calc(4px * 0.7114583) var(--padding-inline);
    }
    .tabs-component__tab-item.icon-left > button {
        padding-left: calc(var(--padding-inline) + calc(16px * 0.7114583) + calc(var(--icon-size-x) * 0.7114583));
    }
    .tabs-component__tab-item.icon-right > button {
        padding-right: calc(var(--padding-inline) + calc(16px * 0.7114583) + calc(var(--icon-size-x) * 0.7114583));
    }
    .tabs-component__tab-item.icon-left > button::after,
    .tabs-component__tab-item.icon-right > button::after {
        min-width: calc(var(--icon-size-x) * 0.7114583);
        max-width: calc(var(--icon-size-x) * 0.7114583);
        width: calc(var(--icon-size-x) * 0.7114583);
        min-height: calc(var(--icon-size-y) * 0.7114583);
        max-height: calc(var(--icon-size-y) * 0.7114583);
        height: calc(var(--icon-size-y) * 0.7114583);
    }
}
/* ** */

/* FORM LAYOUT COMPONENT */
.form-layout-component__wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.form-layout-component__wrap > * + * {
    margin-top: 16px;
}

.form-layout-component__row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}

.form-layout-component__row.nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.form-layout-component__row > * {
    flex: 0 0 auto;
    padding-left: 8px;
    padding-right: 8px;
}

.form-layout-component__col {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}

.form-layout-component__col > * {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}

.form-layout-component__col.col-50 {
    min-width: 50%;
    max-width: 50%;
    width: 50%;
}

.form-layout-component__col.col-code {
    min-width: 23.37317397%;
    max-width: 23.37317397%;
    width: 23.37317397%;
}

.form-layout-component__col.col-code-fill {
    /* min-width: 76.62682602%;
    max-width: 76.62682602%;
    width: 76.62682602%; */
    min-width: initial;
    max-width: initial;
    width: initial;
    flex-grow: 1;
}

.form-layout-component__actions {
    --component-spacing: var(--spacing, 8px);
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.form-layout-component__actions.end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.form-layout-component__actions > * {
    margin-right: var(--component-spacing);
    margin-top: calc(var(--component-spacing) / 2);
    margin-bottom: calc(var(--component-spacing) / 2);
}

.form-layout-component__actions.end > * {
    margin-right: 0;
    margin-left: var(--component-spacing);
}

.form-layout-component__plain-text {
    color: #5E6E82;
    font-size: 14px;
    font-weight: 400;
    line-height: normal; 
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .form-layout-component__wrap > * + * {
        margin-top: calc(16px * 0.7114583);
    }
    .form-layout-component__row {
        margin-left: calc(-8px * 0.7114583);
        margin-right: calc(-8px * 0.7114583);
    }
    .form-layout-component__row > * {
        padding-left: calc(8px * 0.7114583);
        padding-right: calc(8px * 0.7114583);
    }
    .form-layout-component__actions > * {
        margin-right: calc(var(--component-spacing) * 0.7114583);
        margin-top: calc(calc(var(--component-spacing) / 2) * 0.7114583);
        margin-bottom: calc(calc(var(--component-spacing) / 2) * 0.7114583);
    }
    .form-layout-component__actions.end > * {
        margin-left: calc(var(--component-spacing) * 0.7114583);
    }
    .form-layout-component__plain-text {
        color: #5E6E82;
        font-size: calc(14px * 0.7114583);
        font-weight: 400;
        line-height: normal; 
    }
}

@media (max-width: 1199px) {
    .form-layout-component__col.col-50,
    .form-layout-component__col.col-code,
    .form-layout-component__col.col-code-fill,
    .form-layout-component__actions > * {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .form-layout-component__row.nowrap.wrap-mobile {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .form-layout-component__row:not(.nowrap:not(.wrap-mobile)) > .form-layout-component__col + .form-layout-component__col {
        margin-top: 16px;
    }
}
/* ** */

/* NEW INPUT SWITCH COMPONENT */
.input-switch-new-component__wrap {
    --size-x: 24px;
    --size-y: 14px;
    position: relative;
    display: inline-block;
    min-width: var(--size-x);
    max-width: var(--size-x);
    width: var(--size-x);
    min-height: var(--size-y);
    max-height: var(--size-y);
    height: var(--size-y);
}

.input-switch-new-component__input {
    width: 0;
    height: 0;
    opacity: 0;
}

.input-switch-new-component__slider {
    position: absolute;
    inset: 0;
    background-color: #C21313;
    border-radius: 100vh;
    -webkit-transition: .4s;
    transition: .4s;
    cursor: pointer;
}

.input-switch-new-component__slider:before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--size-x) * 0.125);
    min-width: calc(var(--size-y) * 0.57142857);
    max-width: calc(var(--size-y) * 0.57142857);
    width: calc(var(--size-y) * 0.57142857);
    aspect-ratio: 1 / 1;
    background-color: #FFFFFF;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: .4s;
    transition: .4s;
}

.input-switch-new-component__input:checked + .input-switch-new-component__slider {
    background-color: #4BA8F9;
}

.input-switch-new-component__input:checked + .input-switch-new-component__slider:before {
    -webkit-transform: translate(calc(var(--size-x) * 0.43333333), -50%);
    transform: translate(calc(var(--size-x) * 0.43333333), -50%);
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .input-switch-new-component__wrap {
        --size-x: calc(24px * 0.7114583);
        --size-y: calc(14px * 0.7114583);
    }
}
/* ** */

/* SINGLE IMAGE FILE UPLOADER */
.input-single-image-upload-component__wrap {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -16px;
    margin-right: -16px;
}

.input-single-image-upload-component__item {
    cursor: grab;
}

.input-single-image-upload-component__wrap > * {
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 16px;
}

.input-single-image-upload-component {
    position: relative;
    --size-x: 120px;
    display: -webkit-flex;
    display: flex;
    min-width: var(--size-x);
    max-width: var(--size-x);
    width: var(--size-x);
    aspect-ratio: 1 / 1;
    border: 1px solid #BAC0C8;
    border-radius: 4px;
    -webkit-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
}

.input-single-image-upload-component.error {
    border-color: #C21313;
}

.input-single-image-upload-component__image__controls-wrap,
.input-single-image-upload-component__image__input-wrap,
.input-single-image-upload-component__image__wrap {
    position: absolute;
    inset: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background-color: rgba(245, 245, 245, 0.90);
    border-radius: 4px;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.input-single-image-upload-component__image__input-wrap {
    background-color: #F5F5F5;
}

.input-single-image-upload-component__image__controls-wrap > *,
.input-single-image-upload-component__image__input-wrap > * {
    margin: 8px;
}

.input-single-image-upload-component__image__input-wrap input {
    display: none;
}

.input-single-image-upload-component__image__controls-wrap,
.input-single-image-upload-component.active .input-single-image-upload-component__image__input-wrap {
    opacity: 0;
    pointer-events: none;
}

.input-single-image-upload-component.active:hover .input-single-image-upload-component__image__controls-wrap,
.input-single-image-upload-component.active.mobile-hover .input-single-image-upload-component__image__controls-wrap {
    opacity: 1;
    pointer-events: all;
}

.input-single-image-upload-component__image__wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justfy-content: center;
    justify-content: center;
    background-color: #FFFFFF;
    overflow: hidden;
}

.input-single-image-upload-component__image__wrap > img {
    display: block;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .input-single-image-upload-component__wrap {
        margin-left: calc(-16px * 0.7114583);
        margin-right: calc(-16px * 0.7114583);
    }
    .input-single-image-upload-component__wrap > * {
        padding-left: calc(16px * 0.7114583);
        padding-right: calc(16px * 0.7114583);
        margin-bottom: calc(16px * 0.7114583);
    }
    .input-single-image-upload-component {
        --size-x: calc(120px * 0.7114583);
    }
    .input-single-image-upload-component__image__controls-wrap > *,
    .input-single-image-upload-component__image__input-wrap > * {
        margin: calc(8px * 0.7114583);
    }
}

@media (max-width: 1199px) {
    .input-single-image-upload-component__wrap {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    .input-single-image-upload-component__item {
        min-width: 50%;
        max-width: 50px;
        width: 50%;
    }
    .input-single-image-upload-component {
        --size-x: 100px;
    }
}
/* ** */

/* Highlighted inputs component */
.highlighted-inputs-component__card {
    background-color: #FFFFFF;
    border-radius: 4px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    padding: 8px;
}

.highlighted-inputs-component__card.no-shadow {
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
}

.highlighted-inputs-component__row,
.highlighted-inputs-component__col__inner-row {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-left: -8px;
    margin-right: -8px;
}

.highlighted-inputs-component__row > *,
.highlighted-inputs-component__col__inner-row > * {
    padding-left: 8px;
    padding-right: 8px;
}

.highlighted-inputs-component__row + .highlighted-inputs-component__row {
    margin-top: 16px;
}

.highlighted-inputs-component__col {
    flex-grow: 1;
}

.highlighted-inputs-component__col__inner-col {
    min-width: 50%;
    max-width: 50%;
    width: 50%;
}

.highlighted-inputs-component__col__inner-col > * {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}

.highlighted-inputs-component__col-actions {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .highlighted-inputs-component__card {
        padding: calc(8px * 0.7114583);
    }
    .highlighted-inputs-component__row,
    .highlighted-inputs-component__col__inner-row {
        margin-left: calc(-8px * 0.7114583);
        margin-right: calc(-8px * 0.7114583);
    }
    .highlighted-inputs-component__row > *,
    .highlighted-inputs-component__col__inner-row > * {
        padding-left: calc(8px * 0.7114583);
        padding-right: calc(8px * 0.7114583);
    }
    .highlighted-inputs-component__row + .highlighted-inputs-component__row {
        margin-top: calc(16px * 0.7114583);
    }
}

@media (max-width: 1199px) {
    .highlighted-inputs-component__row.full-mobile,
    .highlighted-inputs-component__col__inner-row {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .highlighted-inputs-component__top-col,
    .highlighted-inputs-component__col__inner-col {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        margin: 0;
        margin-bottom: 16px;
    }
    .highlighted-inputs-component__col__inner-col {
        margin-bottom: 0;
    }
    .highlighted-inputs-component__col__inner-col + .highlighted-inputs-component__col__inner-col {
        margin-top: 16px;
    }
    .highlighted-inputs-component__row.full-mobile .highlighted-inputs-component__col,
    .highlighted-inputs-component__row.full-mobile .highlighted-inputs-component__col > *,
    .highlighted-inputs-component__row.full-mobile .highlighted-inputs-component__col-actions,
    .highlighted-inputs-component__row.full-mobile .highlighted-inputs-component__col-actions > * {
        flex-grow: initial;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .highlighted-inputs-component__row.full-mobile > * + *,
    .highlighted-inputs-component__row.full-mobile > * + * {
        margin-top: 16px;
    }
}

/* NAVBAR USER COMPONENT */
.navbar-user__wrap {
    --size-x: 275px;
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-width: var(--size-x);
    max-width: var(--size-x);
    width: var(--size-x);
}

.navbar-user__inner {
    --base-padding: 8px;
    --items-spacing: 16px;
    --icon-size-x: 16px;
    --icon-size-y: 16px;
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    background-color: transparent;
    color: #656565;
    border: none;
    border-radius: 0;
    padding: var(--base-padding);
    padding-right: calc(var(--icon-size-x) + calc(var(--items-spacing) + var(--base-padding)));
}

.navbar-user__inner::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--base-padding);
    min-width: var(--icon-size-x);
    max-width: var(--icon-size-x);
    width: var(--icon-size-x);
    min-height: var(--icon-size-y);
    max-height: var(--icon-size-y);
    height: var(--icon-size-y);
    background-color: currentColor;
    -webkit-mask-image: url(../../images/user-dropdown/icon-dropdown-arrow.svg);
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-image: url(../../images/user-dropdown/icon-dropdown-arrow.svg);
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
}

.navbar-user__inner:not(.collapsed)::after {
    -webkit-transform: translateY(-50%) rotateZ(180deg);
    transform: translateY(-50%) rotateZ(180deg);
}

.navbar-user__avatar {
    display: -webkit-flex;
    display: flex;
    margin-right: var(--items-spacing);
}

.navbar-user__avatar > img {
    display: block;
    --avatar-size: 48px;
    min-width: var(--avatar-size);
    max-width: var(--avatar-size);
    width: var(--avatar-size);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

.navbar-user__right {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    text-align: left;
    overflow: hidden;
}

.navbar-user__username,
.navbar-user__role,
.navbar-dropdown__email {
    color: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.navbar-user__username {
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 3px;
}

.navbar-user__role {
    font-size: 14px;
    font-weight: 300;
    line-height: normal; 
}

.navbar-dropdown__wrap {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    z-index: 1;
}

.navbar-dropdown__content__wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    background-color: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #BAC0C8;
    padding: 16px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
}

.navbar-dropdown__email {
    color: #656565;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
    border-bottom: 1px solid #BAC0C8;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.navbar-dropdown__content {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.navbar-dropdown__item {
    --line-height: 21px;
    color: #656565;
    font-size: 14px;
    font-weight: 300;
    line-height: var(--line-height); 
}

.navbar-dropdown__item + .navbar-dropdown__item  {
    margin-top: 16px;
}

.navbar-dropdown__item > a {
    display: block;
    --icon-size-x: 16px;
    --icon-size-y: 16px;
    position: relative;
    padding-left: calc(var(--icon-size-x) + 16px);
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.navbar-dropdown__item > a:hover,
.navbar-dropdown__item > a:focus-visible {
    color: var(--color-primary);
}

.navbar-dropdown__item > a::before {
    content: '';
    position: absolute;
    top: calc(var(--line-height) / 2);
    left: 0;
    min-width: var(--icon-size-x);
    max-width: var(--icon-size-x);
    width: var(--icon-size-x);
    min-height: var(--icon-size-y);
    max-height: var(--icon-size-y);
    height: var(--icon-size-y);
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--icon-url);
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .navbar-user__wrap {
        --size-x: calc(245px * 0.7114583);
    }
    .navbar-user__inner {
        --base-padding: calc(8px * 0.7114583);
        --items-spacing: calc(16px * 0.7114583);
        --icon-size-x: calc(16px * 0.7114583);
        --icon-size-y: calc(16px * 0.7114583);
    }
    .navbar-user__avatar > img {
        --avatar-size: calc(48px * 0.7114583);
    }
    .navbar-user__username {
        font-size: calc(16px * 0.7114583);
        margin-bottom: calc(3px * 0.7114583);
    }
    .navbar-user__role {
        font-size: calc(14px * 0.7114583);
    }
    .navbar-dropdown__wrap {
        top: calc(100% + calc(8px * 0.7114583));
    }
    .navbar-dropdown__content__wrap {
        padding: calc(16px * 0.7114583);
    }
    .navbar-dropdown__email {
        font-size: calc(14px * 0.7114583);
        padding-bottom: calc(16px * 0.7114583);
        margin-bottom: calc(16px * 0.7114583);
    }
    .navbar-dropdown__item {
        --line-height: calc(21px * 0.7114583);
        font-size: calc(14px * 0.7114583);
    }
    .navbar-dropdown__item + .navbar-dropdown__item  {
        margin-top: calc(16px * 0.7114583);
    }
    .navbar-dropdown__item > a {
        --icon-size-x: calc(16px * 0.7114583);
        --icon-size-y: calc(16px * 0.7114583);
        padding-left: calc(var(--icon-size-x) + calc(16px * 0.7114583));
    }
}

@media (max-width: 1199px) {
    .navbar-user__wrap {
        --size-x: 100%;
    }
    .navbar-user__inner {
        --base-padding: 0;
    }
}
/* ** */

/* COLLAPSIBLE LIST COMPONENT */
.collapsible-list-component__inner {
    --items-spacing: 8px;
    --expand-icon-size-x: 7px;
    --expand-icon-size-y: 7px;
    --level-icon-size-x: 5px;
    --level-icon-size-y: 5px;
    --level-icon-url: url(../../images/icons/icon-item-level-arrow.svg);
    --top-level-icon-size-x: 16px;
    --top-level-icon-size-y: 16px;
    --font-size: 14px;
    --line-height: 21px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.collapsible-list-component__item {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.collapsible-list-component__inner.top-level > .collapsible-list-component__item {
    border-bottom: 1px solid #BAC0C8;
}

.collapsible-list-component__item-inner {
    display: block;
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    outline: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    color: #262626;
    font-size: var(--font-size);
    font-weight: 400;
    line-height: var(--line-height);
    text-align: left;
    hyphens: auto;
    padding-top: var(--items-spacing);
    padding-bottom: var(--items-spacing);
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.collapsible-list-component__item-inner.active,
.collapsible-list-component__item-inner:hover,
.collapsible-list-component__item-inner:focus-visible {
    color: var(--color-primary);
}

.collapsible-list-component__item-inner.icon {
    padding-left: calc(var(--top-level-icon-size-x) + var(--items-spacing));
}

.collapsible-list-component__item-inner.icon::before {
    content: '';
    position: absolute;
    top: calc(calc(var(--line-height) * 0.5) + var(--items-spacing));
    left: 0;
    min-width: var(--top-level-icon-size-x);
    max-width: var(--top-level-icon-size-x);
    width: var(--top-level-icon-size-x);
    min-height: var(--top-level-icon-size-y);
    max-height: var(--top-level-icon-size-y);
    height: var(--top-level-icon-size-y);
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--icon-url);
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
    color: inherit;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.collapsible-list-component__wrap:not(.triangle-type) .collapsible-list-component__item-inner.toggle {
    position: relative;
    padding-right: calc(var(--expand-icon-size-x) + var(--items-spacing));
}

.collapsible-list-component__item-expand-icon {
    position: absolute;
    top: 50%;
    right: 0;
    min-width: var(--expand-icon-size-x);
    max-width: var(--expand-icon-size-x);
    width: var(--expand-icon-size-x);
    min-height: var(--expand-icon-size-y);
    max-height: var(--expand-icon-size-y);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); 
}

.collapsible-list-component__wrap.triangle-type .collapsible-list-component__item-expand-icon {
    left: 0;
    right: initial;
}

.collapsible-list-component__item-expand-icon::before,
.collapsible-list-component__item-expand-icon::after {
    content: '';
    position: absolute;
    background-color: currentColor;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.collapsible-list-component__wrap:not(.triangle-type) .collapsible-list-component__item-expand-icon::before {
    width: 100%;
    height: 1px;
}

.collapsible-list-component__wrap:not(.triangle-type) .collapsible-list-component__item-expand-icon::after {
    width: 1px;
    height: 100%;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

    /* TRIANGLE TYPE */
    .collapsible-list-component__wrap.triangle-type .collapsible-list-component__inner {
        --expand-icon-size-x: 16px;
        --expand-icon-size-y: 16px;
        --expand-triangle-icon-url: url(../../images/icons/icon-collapsible-list-triangle.svg);
        --expand-triangle-icon-url-expanded: url(../../images/icons/icon-collapsible-list-triangle-filled.svg);
    }

    .collapsible-list-component__item-checkbox-wrap {
        position: absolute;
        top: calc(calc(var(--line-height) * 0.5) + var(--items-spacing));
        left: calc(var(--expand-icon-size-x) + var(--items-spacing));
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .collapsible-list-component__item-checkbox-wrap + .collapsible-list-component__item-inner {
        padding-left: calc(var(--expand-icon-size-x) + var(--items-spacing));
    }

    .collapsible-list-component__item-inner-wrap > * + * {
        margin-left: var(--items-spacing);
    }

    .collapsible-list-component__wrap.triangle-type .collapsible-list-component__item-expand-icon {
        top: calc(calc(var(--line-height) * 0.5) + var(--items-spacing));
    }

    .collapsible-list-component__wrap.triangle-type .collapsible-list-component__item-expand-icon::before,
    .collapsible-list-component__wrap.triangle-type .collapsible-list-component__item-expand-icon::after {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        min-height: 100%;
        max-height: 100%;
        height: 100%;
        -webkit-mask-position: center;
        -webkit-mask-size: cover;
        -webkit-mask-repeat: no-repeat;
        mask-position: center;
        mask-size: cover;
        mask-repeat: no-repeat;
        -webkit-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease;
    }

    .collapsible-list-component__wrap.triangle-type .collapsible-list-component__item-expand-icon::before {
        -webkit-mask-image: var(--expand-triangle-icon-url);
        mask-image: var(--expand-triangle-icon-url);
    }

    .collapsible-list-component__wrap.triangle-type .collapsible-list-component__item-expand-icon::after {
        -webkit-mask-image: var(--expand-triangle-icon-url-expanded);
        mask-image: var(--expand-triangle-icon-url-expanded);
    }

    .collapsible-list-component__wrap.triangle-type .collapsible-list-component__item-inner.toggle:not(.collapsed) .collapsible-list-component__item-expand-icon::before,
    .collapsible-list-component__wrap.triangle-type .collapsible-list-component__item-inner.toggle.collapsed .collapsible-list-component__item-expand-icon::after {
        opacity: 0;
    }

    .collapsible-list-component__wrap.triangle-type .collapsible-list-component__item {
        position: relative;
        padding-left: calc(var(--expand-icon-size-x) + var(--items-spacing));
    }
    /* TRIANGLE TYPE END */

.collapsible-list-component__wrap:not(.triangle-type) .collapsible-list-component__item-inner.toggle:not(.collapsed) .collapsible-list-component__item-expand-icon::after {
    opacity: 0;
}

.collapsible-list-component__dropdown .collapsible-list-component__item {
    position: relative;
    padding-left: calc(var(--level-icon-size-x) + var(--items-spacing));
}

.collapsible-list-component__wrap:not(.triangle-type) .collapsible-list-component__dropdown .collapsible-list-component__item::before {
    content: '';
    position: absolute;
    top: calc(calc(var(--line-height) * 0.5) + var(--items-spacing));
    left: 0;
    min-width: var(--level-icon-size-x);
    max-width: var(--level-icon-size-x);
    width: var(--level-icon-size-x);
    min-height: var(--level-icon-size-y);
    max-height: var(--level-icon-size-y);
    height: var(--level-icon-size-y);
    background-image: var(--level-icon-url);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .collapsible-list-component__inner {
        --items-spacing: calc(8px * 0.7114583);
        --expand-icon-size-x: calc(7px * 0.7114583);
        --expand-icon-size-y: calc(7px * 0.7114583);
        --level-icon-size-x: calc(5px * 0.7114583);
        --level-icon-size-y: calc(5px * 0.7114583);
        --top-level-icon-size-x: calc(16px * 0.7114583);
        --top-level-icon-size-y: calc(16px * 0.7114583);
        --font-size: calc(14px * 0.7114583);
        --line-height: calc(21px * 0.7114583);
    }
    .collapsible-list-component__wrap.triangle-type .collapsible-list-component__inner {
        --expand-icon-size-x: calc(16px * 0.7114583);
        --expand-icon-size-y: calc(16px * 0.7114583);
    }
}
/* ** */

/* NOTIFICATIONS DROPDOWN COMPONENT */
.notifications-dropdown-component {
    --base-spacing: 8px;
    --top-spacing-y: 12px;
    --inline-items-spacing: 16px;
    --font-size-heading: 16px;
    --line-height-heading: 31px;
    --font-size-general: 12px;
    --button-size: 31px;
    --status-ball-size: 16px;
    --status-ball-spacing: 10px;
    --list-max-height: 500px;
    position: relative;
    color: #262626;
}

.notifications-dropdown-component__card {
    background-color: #FFFFFF;
    border-radius: 4px;
    padding: var(--base-spacing);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
}

.notifications-dropdown-component__wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.notifications-dropdown-component__top {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    padding: var(--top-spacing-y) calc(var(--button-size) + var(--inline-items-spacing));
    border-bottom: 1px solid #BAC0C8;
}

.notifications-dropdown-component-heading {
    position: relative;
    color: inherit;
    font-size: var(--font-size-heading);
    font-weight: 400;
    line-height: var(--line-height-heading); 
    text-align: center;
    padding-left: calc(var(--line-height-heading) + var(--inline-items-spacing));
}

.notifications-dropdown-component-heading::before {
    content: '';
    position: absolute;
    top: calc(var(--line-height-heading) * 0.5);
    left: 0;
    min-width: var(--line-height-heading);
    max-width: var(--line-height-heading);
    width: var(--line-height-heading);
    aspect-ratio: 1/ 1;
    background-color: currentColor;
    -webkit-mask-image: url(../../images/icons/icon-notifications.svg);
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-image: url(../../images/icons/icon-notifications.svg);
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.notifications-dropdown-component__no-content-text {
    color: #262626;
    font-size: var(--font-size-general);
    font-weight: 400;
    line-height: normal;
    text-align: center;
    padding: var(--base-spacing);
    border-bottom: 1px solid #BAC0C8;
}

.notifications-dropdown-component__content {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    max-height: var(--list-max-height);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.notifications-dropdown-component__item + .notifications-dropdown-component__item {
    border-top: 1px solid #BAC0C8;
}

.notifications-dropdown-component__item-inner {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    background-color: #FFFFFF;;
    padding: var(--base-spacing);
    padding-left: calc(var(--base-spacing) + calc(var(--status-ball-size) + var(--status-ball-spacing)));
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

.notifications-dropdown-component__item-inner:hover,
.notifications-dropdown-component__item-inner:focus-visible {
    background-color: #F9FBFF;
}

.notifications-dropdown-component__item-inner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--base-spacing);
    min-width: var(--status-ball-size);
    max-width: var(--status-ball-size);
    width: var(--status-ball-size);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.notifications-dropdown-component__item-inner.status-blue::before {
    background-color: #4BA8F9;
}

.notifications-dropdown-component__item-inner.status-red::before {
    background-color: #C21313;
}

.notifications-dropdown-component__item-content {
    display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
  	overflow: hidden;
    color: #262626;
    font-size: var(--font-size-general);
    font-weight: 300;
    line-height: normal; 
}

.notifications-dropdown-component__item-inner__row {
    display: -webkit-flex;
    display: flex;
    margin-left: calc(var(--inline-items-spacing) * -1);
    margin-right: calc(var(--inline-items-spacing) * -1);
}

.notifications-dropdown-component__item-inner__row > * {
    padding-left: var(--inline-items-spacing);
    padding-right: var(--inline-items-spacing);
}

.notifications-dropdown-component__item-inner__col.date {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-left: auto;
}

.notifications-dropdown-component__item-date {
    color: #262626;
    font-size: var(--font-size-general);
    font-weight: 600;
    line-height: normal;
    text-align: right;
}

.notifications-dropdown-component__bot {
    padding: var(--base-spacing);
    margin-top: var(--base-spacing);
}

.notifications-dropdown-component__actions {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .notifications-dropdown-component {
        --base-spacing: calc(8px * 0.7114583);
        --top-spacing-y: calc(12px * 0.7114583);
        --inline-items-spacing: calc(16px * 0.7114583);
        --font-size-heading: calc(16px * 0.7114583);
        --line-height-heading: calc(31px * 0.7114583);
        --font-size-general: calc(12px * 0.7114583);
        --button-size: calc(31px * 0.7114583);
        --status-ball-size: calc(16px * 0.7114583);
        --status-ball-spacing: calc(10px * 0.7114583);
        --list-max-height: calc(500px * 0.7114583);
    }  
}
/* ** */

/* Navbar actions component */
.navbar-actions-component {
    display: -webkit-flex;
    display: flex;
    padding-top: 8px;
    padding-bottom: 8px;
}

.navbar-actions-component__select {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
}

.navbar-actions-component__select .select2-container {
    border-color: #262626;
}

.navbar-actions-component__wrap {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    margin-left: -4px;
    margin-right: -4px;
}

.navbar-actions-component__wrap > * {
    padding-left: 4px;
    padding-right: 4px;
}

.navbar-actions-component__item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.navbar-actions-component__item-inner {
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    outline: none;
    border-radius: 0;
    --item-size: 48px;
    --icon-size: 36px;
    --badge-size: 18px;
    --badge-font-size: 12px;
    --badge-line-height: 15px;
    --badge-letter-spacing: -1px; 
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: var(--item-size);
    max-width: var(--item-size);
    width: var(--item-size);
    aspect-ratio: 1 / 1;
    color: inherit;
    padding: 8.5px;
}

.navbar-actions-component__item-inner__icon {
    position: relative;
    min-width: var(--icon-size);
    max-width: var(--icon-size);
    width: var(--icon-size);
    aspect-ratio: 1 / 1;
    color: inherit;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.navbar-actions-component__item-inner__icon:hover,
.navbar-actions-component__item-inner__icon:focus-visible,
.navbar-actions-component__item-inner[aria-expanded="true"] .navbar-actions-component__item-inner__icon {
    color: var(--color-primary);
}

.navbar-actions-component__item-inner__icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--icon-url);
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
}

.navbar-actions-component__item-inner__icon__badge {
    position: absolute;
    top: 0;
    right: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: var(--badge-size);
    max-width: var(--badge-size);
    width: var(--badge-size);
    aspect-ratio: 1 / 1;
    background-color: var(--color-red);
    border-radius: 50%;
}

.navbar-actions-component__item-inner__icon__badge-text {
    color: #FFFFFF;
    font-size: var(--badge-font-size);
    font-weight: 500;
    line-height: var(--badge-line-height);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
    letter-spacing: var(--badge-letter-spacing);
    text-align: center;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .navbar-actions-component {
        padding-top: calc(8px * 0.7114583);
        padding-bottom: calc(8px * 0.7114583);
    }
    .navbar-actions-component__select {
        margin-right: calc(8px * 0.7114583);
        padding: calc(8.5px * 0.7114583);
    }
    .navbar-actions-component__wrap {
        margin-left: calc(-4px * 0.7114583);
        margin-right: calc(-4px * 0.7114583);
    }
    .navbar-actions-component__wrap > * {
        padding-left: calc(4px * 0.7114583);
        padding-right: calc(4px * 0.7114583);
    }
    .navbar-actions-component__item-inner {
        --item-size: calc(48px * 0.7114583);
        --icon-size: calc(36px * 0.7114583);
        --badge-size: calc(18px * 0.7114583);
        --badge-font-size: calc(12px * 0.7114583);
        --badge-line-height: calc(15px * 0.7114583);
        --badge-letter-spacing: calc(-1px * 0.7114583); 
        padding: calc(8.5px * 0.7114583);
    }
}

@media (max-width: 1199px) {
    .navbar-actions-component__select {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        margin-right: 0;
    }
}
/* ** */

/* LANGUAGE DROPDOWN COMPONENT */
.language-dropdown-component {
    --items-spacing: 8px;
    --icon-size: 16px;
    --font-size: 12px;
    --line-height: 18px;
    --max-height: 300px;
    --min-width: 150px;
    min-width: 150px;
    max-height: var(--max-height);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.language-dropdown-component__content {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: var(--items-spacing);
}

.language-dropdown-component__item + .language-dropdown-component__item {
    margin-top: var(--items-spacing);
}

.language-dropdown-component__item > a {
    position: relative;
    display: block;
    color: #262626;
    font-size: var(--font-size);
    font-weight: 400;
    line-height: var(--line-height); 
    padding-left: calc(var(--icon-size) + var(--items-spacing));
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.language-dropdown-component__item > a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    min-width: var(--icon-size);
    max-width: var(--icon-size);
    width: var(--icon-size);
    aspect-ratio: 1 / 1;
    background-image: var(--icon-url);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.language-dropdown-component__item.active > a,
.language-dropdown-component__item > a:hover,
.language-dropdown-component__item > a:focus-visible {
    color: var(--color-primary);
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .language-dropdown-component {
        --items-spacing: calc(8px * 0.7114583);
        --icon-size: calc(16px * 0.7114583);
        --font-size: calc(12px * 0.7114583);
        --line-height: calc(18px * 0.7114583);
        --max-height: calc(300px * 0.7114583);
        --min-width: calc(150px * 0.7114583);
        min-width: calc(150px * 0.7114583);
    }
}

/* Info cards component */
.navbar-items__info-cards__wrap {
    max-width: 528px;
}

.info-cards-component__wrap {
    --spacing-x: 16px;
    --spacing-y: 8px;
    --button-size: 16px;
    --font-size: 16px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.info-cards-component__item {
    position: relative;
    background-color: #FFFFFF;
    border-radius: 4px;
    padding: var(--spacing-y) var(--spacing-x);
    padding-right: calc(var(--button-size) + calc(var(--spacing-x) * 2));
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.10);
}

.info-cards-component__item + .info-cards-component__item {
    margin-top: var(--spacing-x);
}

.info-cards-component__item.color-red {
    color: var(--color-red);
}

.info-cards-component__item-inner {
    color: inherit;
    font-size: var(--font-size);
    font-weight: 300;
    line-height: 1.5;
}

.info-cards-component__item-btn {
    display: block;
    position: absolute;
    top: 50%;
    right: var(--spacing-x);
    min-width: var(--button-size);
    max-width: var(--button-size);
    width: var(--button-size);
    aspect-ratio: 1 / 1;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--icon-url);
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
    color: inherit;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .info-cards-component__wrap {
        --spacing-x: calc(16px * 0.7114583);
        --spacing-y: calc(8px * 0.7114583);
        --button-size: calc(16px * 0.7114583);
        --font-size: calc(16px * 0.7114583);
    }
    .navbar-items__info-cards__wrap {
        max-width: calc(528px * 0.7114583);
    }
}
/* ** */

/* FLEXIBLE FORM FIELDS COMPONENT */
.form-flexible-fields-component__row {
    --spacing-x: 8px;
    --spacing-y: 16px;
    display: -webkit-flex;
    display: flex;
    margin-left: calc(var(--spacing-x) * -1);
    margin-right: calc(var(--spacing-x) * -1);
}

.form-flexible-fields-component__row + .form-flexible-fields-component__row {
    margin-top: var(--spacing-y);
}

.form-flexible-fields-component__row > * {
    padding-left: var(--spacing-x);
    padding-right: var(--spacing-x);
}

.form-flexible-fields-component__col:not(.main):not(.actions):not(.col-50) {
    flex-grow: 1;
}

.form-flexible-fields-component__col:not(.actions) > *:not(.form-flexible-fields-component__row) {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
}

.form-flexible-fields-component__col.main {
    min-width: 20.39011703%;
    max-width: 20.39011703%;
    width: 20.39011703%;
}

.form-flexible-fields-component__col.actions {
    display: -webkit-flex;
    display: flex;
}

.form-flexible-fields-component__col-inner {
    min-width: 25%;
    max-width: 25%;
    width: 25%;
}

.form-flexible-fields-component__col.col-50 {
    min-width: 50%;
    max-width: 50%;
    width: 50%;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .form-flexible-fields-component__row {
        --spacing-x: calc(8px * 0.7114583);
        --spacing-y: calc(16px * 0.7114583);
    }
}

@media (max-width: 1199px) {
    .form-flexible-fields-component__row {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .form-flexible-fields-component__row.section + .form-flexible-fields-component__row.section {
        border-top: 1px solid #BAC0C8;
        padding-top: calc(var(--spacing-y) * 0.5);
        margin-top: calc(var(--spacing-y) * 0.5);
    }
    .form-flexible-fields-component__col.main,
    .form-flexible-fields-component__col.col-50 {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        margin-bottom: var(--spacing-y);
    }
    .form-flexible-fields-component__col-inner {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .form-flexible-fields-component__col.actions {
        margin-left: auto;
    }
    .form-flexible-fields-component__col.actions.nested,
    .form-flexible-fields-component__col-inner + .form-flexible-fields-component__col-inner {
        margin-top: var(--spacing-y);
    }
}
/* ** */

/* DEMO counter component */
.demo-counter-component {
    --font-size: 32px;
    --line-height: 48px;
    --spacing-y: 16px;
    --demo-box-padding-x: 100px;
    --demo-box-padding-y: 36px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin-bottom: var(--spacing-y);
}

.demo-counter-component__wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: var(--demo-box-padding-y) var(--demo-box-padding-x);
    background-color: var(--color-primary);
    border-radius: 4px;
}

.demo-counter-component__text {
    color: #FFFFFF;
    font-size: var(--font-size);
    font-weight: 700;
    line-height: var(--line-height); 
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .demo-counter-component {
        --font-size: calc(32px * 0.7114583);
        --line-height: calc(48px * 0.7114583);
        --spacing-y: calc(16px * 0.7114583);
        --demo-box-padding-x: calc(100px * 0.7114583);
        --demo-box-padding-y: calc(36px * 0.7114583);
    }
}
/* ** */

/* Inputs new chaotic layout component */
.inputs-new-chaotic-component {
    --spacing-x: 32px;
    --spacing-y: 32px;
    --item-padding-box: 5.5px;
}

.inputs-new-chaotic-component__wrap {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: calc(var(--spacing-x) * -0.5);
    margin-right: calc(var(--spacing-x) * -0.5);
}

.inputs-new-chaotic-component__wrap > * {
    padding-left: calc(var(--spacing-x) * 0.5);
    padding-right: calc(var(--spacing-x) * 0.5);
    margin-bottom: var(--spacing-y);
}

.inputs-new-chaotic-component__item-inner {
    padding-top: var(--item-padding-box);
    padding-bottom: var(--item-padding-box);
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .inputs-new-chaotic-component {
        --spacing-x: calc(32px * 0.7114583);
        --spacing-y: calc(32px * 0.7114583);
        --item-padding-box: calc(5.5px * 0.7114583);
    }
}
/* ** */

/* Input dependent content */
.section-separated-content {
    border-top: 1px solid #BAC0C8;
    padding-top: 16px;
}

[data-content-input-dependent-content]:not(.active) {
    display: none;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .section-separated-content {
        padding-top: calc(16px * 0.7114583);
    }
}
/* ** */

/* UNIVERSAL ROW COMPONENT */
.universal-row-component {
    --component-spacing: var(--spacing, 8px);
}

.universal-row-component__wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: calc(var(--component-spacing) * -1);
    margin-right: calc(var(--component-spacing) * -1);
}

.universal-row-component__wrap.nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.universal-row-component.center .universal-row-component__wrap {
    -webkit-justify-content: center;
    justify-content: center;
}

.universal-row-component.end .universal-row-component__wrap {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.universal-row-component__wrap > * {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding-left: var(--component-spacing);
    padding-right: var(--component-spacing);
    margin: var(--component-spacing) 0;
}

.universal-row-component__wrap > *.col-fill {
    flex-grow: 1;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .universal-row-component {
        --component-spacing: calc(var(--spacing, 8px) * 0.7114583);
    }
}

@media (max-width: 1199px) {
    .universal-row-component:not(.no-full) .universal-row-component__wrap > *:not(.col-fill):not(.col-auto) {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
}
/* ** */

/* UNIVERSAL FILE UPLOAD COMPONENT */
.input-new-file-upload-component {
    --items-spacing: 16px;
    --list-font-size: 14px;
    --list-item-padding-x: 16px;
    --list-item-padding-y: 4px;
    --list-remove-size-x: 16px;
    --list-remove-size-y: 16px;
}

.input-new-file-upload-component__input-wrap > * {
    display: -webkit-flex;
    display: flex;
}

.input-new-file-upload-component__file-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.input-new-file-upload-component__file-list > * {
    margin-top: var(--items-spacing);
}

.input-new-file-upload-component__item-inner {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    color: #262626;
    font-size: var(--list-font-size);
    font-weight: 400;
    line-height: 1.5;
    padding: var(--list-item-padding-y) var(--list-item-padding-x);
    padding-right: calc(calc(var(--list-item-padding-x) + var(--items-spacing)) + var(--list-remove-size-x));
    border-radius: 4px;
    border: 1px solid var(--color-primary);
}

.input-new-file-upload-component__item-remove {
    position: absolute;
    top: 50%;
    right: var(--list-item-padding-x);
    min-width: var(--list-remove-size-x);
    max-width: var(--list-remove-size-x);
    width: var(--list-remove-size-x);
    min-height: var(--list-remove-size-y);
    max-height: var(--list-remove-size-y);
    height: var(--list-remove-size-y);
    background-color: #262626;
    -webkit-mask-image: url(../../images/icons/icon-close-circle.svg);
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-image: url(../../images/icons/icon-close-circle.svg);
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

.input-new-file-upload-component__item-remove:hover,
.input-new-file-upload-component__item-remove:focus-visible {
    background-color: var(--color-red);
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .input-new-file-upload-component {
        --items-spacing: calc(16px * 0.7114583);
        --list-font-size: calc(14px * 0.7114583);
        --list-item-padding-x: calc(16px * 0.7114583);
        --list-item-padding-y: calc(4px * 0.7114583);
        --list-remove-size-x: calc(16px * 0.7114583);
        --list-remove-size-y: calc(16px * 0.7114583);
    }
}
/* ** */

/* TOPBAR COMPONENT FOR FORM */
.topbar-for-form-component {
    --max-wrap-width: 544px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.topbar-for-form-component__wrap {
    max-width: var(--max-wrap-width);
    width: 100%;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .topbar-for-form-component {
        --max-wrap-width: calc(544px * 0.7114583);
    }
}

@media (max-width: 1199px) {
    .topbar-for-form-component__wrap {
        max-width: 100%;
    }
}
/* ** */

/* Invoice data component */
.indented-text-component {
    --font-size: 14px;
    --data-spacing-x: 16px;
    --data-spacing-y: 8px;
}

.indented-text-component__wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.indented-text-component__heading {
    color: #5E6E82;
    font-size: var(--font-size);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 4px;
}

.indented-text-component__content {
    padding: var(--data-spacing-y) var(--data-spacing-x);
}

.indented-text-component__content > * {
    color: #656565;
    font-size: var(--font-size);
    font-weight: 300;
    line-height: 1.5;
}

.indented-text-component__content > *.spaced {
    margin-top: var(--data-spacing-y);
}

.indented-text-component__content a {
    color: var(--color-primary);
}

.indented-text-component__content a:hover,
.indented-text-component__content a:focus-visible {
    text-decoration: underline;
}

.indented-text-component__content > img {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .indented-text-component {
        --font-size: calc(14px * 0.7114583);
        --data-spacing-x: calc(16px * 0.7114583);
        --data-spacing-y: calc(8px * 0.7114583);
    }
}
/* Invoice data component end */

/* Sum component */
.sum-component {
    --spacing-y: 16px;
    --font-size: 19px;
    border-top: 1px solid #EDF2F9;
    padding-top: var(--spacing-y);
    margin-top: var(--spacing-y);
}

.sum-component__wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.sum-component__text {
    font-size: var(--font-size);
    font-weight: 500;
    line-height: 1.5;
}
/* Sum component end */

/* UNIVERSAL STAR RATING COMPONENT */
.universal-star-rating-component {
    --star-size: 16px;
    --icon-full: url(../../images/icons/icon-star.svg);
    --icon-empty: url(../../images/icons/icon-star-empty.svg);
    --color: var(--color-primary);
}

.universal-star-rating-component__wrap {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.universal-star-rating-component__star {
    display: -webkit-flex;
    display: flex;
}

.universal-star-rating-component__star > .icon {
    position: relative;
    display: block;
    min-width: var(--star-size);
    max-width: var(--star-size);
    width: var(--star-size);
    min-height: var(--star-size);
    max-height: var(--star-size);
    height: var(--star-size);
    color: var(--color);
}

.universal-star-rating-component__star > .icon::before,
.universal-star-rating-component__star > .icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
    color: inherit;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.universal-star-rating-component__star > .icon::before {
    -webkit-mask-image: var(--icon-empty);
    mask-image: var(--icon-empty);
}

.universal-star-rating-component__star > .icon::after {
    -webkit-mask-image: var(--icon-full);
    mask-image: var(--icon-full);
}

.universal-star-rating-component__star:not(.active) > .icon::after,
.universal-star-rating-component__sta.active > .icon::before {
    opacity: 0;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .universal-star-rating-component {
        --star-size: calc(16px * 0.7114583);
    }
}
/* UNIVERSAL STAR RATING COMPONENT END */

/* UNIVERSAL MESSAGES COMPONENT */
.universal-messages-component {
    --max-component-width: 460px;
    --general-spacing: 16px;
    --actions-spacing: 8px;
    --textarea-height: 72px;
    --messages-spacing: 16px;
    --messages-move: 40px;
    --messages-inner-padding: 8px;
    --messages-card-color: var(--color-primary);
    --messages-text-color: #FFFFFF;
    --message-text-color-user: #262626;
    --message-box-height: 360px;
    --message-font-size: 12px;
    --message-line-height: normal;
    --message-flag-size: 16px;
    --message-language-content-padding: 10px;
    --message-language-content-margin: 8px;
    max-width: var(--max-component-width);
    margin-left: auto;
    margin-right: auto;
}

.universal-messages-component__wrap > * + * {
    margin-top: var(--general-spacing);
}

.universal-messages-component__wrap,
.universal-messages-component__messages,
.universal-messages-component__single-message__inner,
.universal-messages-component__single-message__content,
.universal-messages-component__single-message__content__wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.universal-messages-component__messages {
    min-height: var(--message-box-height);
    max-height: var(--message-box-height);
    height: var(--message-box-height);
    padding-right: var(--general-spacing);
    overflow-x: hidden;
    overflow-y: auto;
}

.universal-messages-component__single-message + .universal-messages-component__single-message {
    margin-top: var(--messages-spacing);
}

.universal-messages-component__single-message:not(.user) {
    color: var(--messages-text-color);
    padding-right: var(--messages-move);
}

.universal-messages-component__single-message.user {
    color: var(--messages-text-color-user);
    padding-left: var(--messages-move);
}

.universal-messages-component__single-message__card {
    border-radius: 10px;
    border: 1px solid var(--messages-card-color);
    padding: var(--messages-inner-padding);
}

.universal-messages-component__single-message:not(.user) .universal-messages-component__single-message__card {
    background-color: var(--messages-card-color);
}

.universal-messages-component__single-message__top {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.universal-messages-component__single-message__top-text {
    color: inherit;
    font-size: var(--message-font-size);
    font-weight: 600;
    line-height: var(--message-line-height);
    text-align: right;
}

.universal-messages-component__single-message__content + .universal-messages-component__single-message__content {
    border-top: 1px solid var(--messages-text-color);
    padding-top: var(--message-language-content-padding);
    margin-top: var(--message-language-content-margin);
}

.universal-messages-component__single-message__content-top,
.universal-messages-component__single-message__content-flag {
    display: -webkit-flex;
    display: flex;
}

.universal-messages-component__single-message__content-flag > img {
    display: block;
    min-width: var(--message-flag-size);
    max-width: var(--message-flag-size);
    width: var(--message-flag-size);
    min-height: var(--message-flag-size);
    max-height: var(--message-flag-size);
    height: var(--message-flag-size);
    object-position: center;
    object-fit: cover;
}

.universal-messages-component__single-message__content-text {
    color: inherit;
    font-size: var(--message-font-size);
    font-weight: 300;
    line-height: var(--message-line-height);
}

.universal-messages-component__single-message.user .universal-messages-component__single-message__content-text {
    text-align: right;
}

.universal-messages-component__actions {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-left: calc(var(--actions-spacing) * -1);
    margin-right: calc(var(--actions-spacing) * -1);
}

.universal-messages-component__actions > * {
    padding-left: var(--actions-spacing);
    padding-right: var(--actions-spacing);
}

.universal-messages-component__actions__input-col {
    flex-grow: 1;
}

.universal-messages-component__actions__button-col {
    display: -webkit-flex;
    display: flex;
}

.universal-messages-component__actions textarea {
    min-height: var(--textarea-height);
    max-height: var(--textarea-height);
    height: var(--textarea-height);
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .universal-messages-component {
        --max-component-width: calc(460px * 0.7114583);
        --general-spacing: calc(16px * 0.7114583);
        --actions-spacing: calc(8px * 0.7114583);
        --textarea-height: calc(72px * 0.7114583);
        --messages-spacing: calc(16px * 0.7114583);
        --messages-move: calc(40px * 0.7114583);
        --messages-inner-padding: calc(8px * 0.7114583);
        --message-box-height: calc(360px * 0.7114583);
        --message-font-size: calc(12px * 0.7114583);
        --message-flag-size: calc(16px * 0.7114583);
        --message-language-content-padding: calc(10px * 0.7114583);
        --message-language-content-margin: calc(8px * 0.7114583);
    }
}

@media (max-width: 1199px) {
    .universal-messages-component {
        --messages-move: 20px;
    }
}
/* UNIVERSAL MESSAGES COMPONENT END */

/* NEW FILTERS COMPONENT */
.new-filters-component {
    --height-in-modal: 180px;
    --padding-in-modal: 10px;
}

.new-filters-component.in-modal {
    min-height: var(--height-in-modal);
    max-height: var(--height-in-modal);
    height: var(--height-in-modal);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding-right: var(--padding-in-modal);
}

.new-filters-component__wrap {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -4px;
    margin-right: -4px;
}

.new-filters-component__wrap.start {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.new-filters-component__wrap > * {
    flex: 0 0 auto;
    max-width: 100%;
    padding-left: 4px;
    padding-right: 4px;
}

.new-filters-component__item-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    background-color: var(--color-white);
    color: #656565;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    word-break: break-all;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    padding: 4px 16px;
    padding-right: 8px;
    margin-bottom: 8px;
    user-select: none;
}

.new-filters-component__item-inner.no-flex {
    display: inline-block;
}

.new-filters-component__item-inner > button {
    --icon-size-x: 16px;
    --icon-size-y: 16px;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    min-width: var(--icon-size-x);
    max-width: var(--icon-size-x);
    width: var(--icon-size-x);
    min-height: var(--icon-size-y);
    max-height: var(--icon-size-y);
    height: var(--icon-size-y);
    background-color: #BAC0C8;
    -webkit-mask-image: url(../../images/icons/icon-close-circle.svg);
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-image: url(../../images/icons/icon-close-circle.svg);
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
    margin-left: 16px;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

.new-filters-component__item-inner > button:hover,
.new-filters-component__item-inner > button:focus-visible {
    background-color: var(--color-red);
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .new-filters-component {
        --height-in-modal: calc(360px * 0.7114583);
        --padding-in-modal: calc(10px * 0.7114583);
    }
    .new-filters-component__wrap {
        margin-left: calc(-4px * 0.7114583);
        margin-right: calc(-4px * 0.7114583);
    }
    .new-filters-component__wrap > * {
        padding-left: calc(4px * 0.7114583);
        padding-right: calc(4px * 0.7114583);
    }
    .new-filters-component__item-inner {
        font-size: calc(14px * 0.7114583);
        padding: calc(4px * 0.7114583) calc(16px * 0.7114583);
        padding-right: calc(8px * 0.7114583);
        margin-bottom: calc(8px * 0.7114583);
    }
    .new-filters-component__item-inner > button {
        --icon-size-x: calc(16px * 0.7114583);
        --icon-size-y: calc(16px * 0.7114583);
        margin-left: calc(16px * 0.7114583);
    }
}
/* NEW FILTERS COMPONENT END */

/* CHART COMPONENT */
.chart-component {
    --spacing-y: 16px;
    --big-number-font-size: 28px;
    --big-number-letter-spacing: -1.05px;
    --plain-text-color: var(--color-primary);
    --plain-text-font-size: 14px;
    --chart-separator-color: #EDF2F9;
}

.chart-component__wrap,
.chart-component__actual-charts {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.chart-component__wrap > * + * {
    margin-top: var(--spacing-y);
}

.chart-component__big-number {
    font-size: var(--big-number-font-size);
    font-weight: 500;
    line-height: normal;
    letter-spacing: var(--big-number-letter-spacing); 
}

.chart-component__actual-chart-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding-top: var(--spacing-y);
    border-top: 2px solid var(--chart-separator-color);
}

.chart-component__plain-text {
    color: var(--plain-text-color);
    font-size: var(--plain-text-font-size);
    font-weight: 400;
    line-height: normal; 
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .chart-component {
        --spacing-y: calc(16px * 0.7114583);
        --big-number-font-size: calc(28px * 0.7114583);
        --big-number-letter-spacing: calc(-1.05px * 0.7114583);
        --plain-text-font-size: calc(14px * 0.7114583);
    }
}
/* CHART COMPONENT END */

/* TUTORIAL COMPONENT */
.introjs-tooltipReferenceLayer,
.introjs-tooltipReferenceLayer * {
    font-family: inherit;
}

.tutorial-component {
    --max-width: 688px;
    --text-color: #FFFFFF;
    --default-font-size: 24px;
    --heading-font-size: 32px;
    --section-spacing: 16px;
    --section-spacing-inner: 8px;
}

.tutorial-component.introjs-tooltip {
    min-width: min(90vw, var(--max-width));
    max-width: min(90vw, var(--max-width));
    width: min(90vw, var(--max-width));
    color: var(--text-color);
    background-color: rgba(57, 57, 57, 0.60);
}

.tutorial-component .introjs-skipbutton {
    color: var(--text-color);
}

.tutorial-component .introjs-tooltiptext {
    color: var(--text-color);
    font-size: var(--default-font-size);
    font-weight: 500;
    line-height: normal; 
}

.tutorial-component .introjs-bullets ul li a.active,
.tutorial-component .introjs-bullets ul li a:hover,
.tutorial-component .introjs-bullets ul li a:focus-visible {
    background-color: var(--text-color);
}

.tutorial-component__section {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.tutorial-component__section + .tutorial-component__section {
    margin-top: var(--section-spacing);
}

.tutorial-component__section > * + * {
    margin-top: var(--section-spacing-inner);
}

.tutorial-component__heading {
    color: var(--text-color);
    font-size: var(--heading-font-size);
    font-weight: 600;
    line-height: normal;
}

.tutorial-component .introjs-tooltipbuttons {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.tutorial-component .introjs-button {
    color: #FFFFFF !important;
}

.tutorial-component .introjs-prevbutton,
.tutorial-component .introjs-nextbutton {
    float: none;
}

.introjs-nextbutton {
    margin-left: auto;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .tutorial-component {
        --max-width: calc(688px * 0.7114583);
        --default-font-size: calc(24px * 0.7114583);
        --heading-font-size: calc(32px * 0.7114583);
        --section-spacing: calc(16px * 0.7114583);
        --section-spacing-inner: calc(8px * 0.7114583);
    }
}
/* TUTORIAL COMPONENT END */

/* COLORS COMPONENT */
.colors-component,
.color-picker-component {
    --spacing: 0.5px;
    --color-size: 16px;
}

.colors-component__wrap {
    display: -webkit-flex;
    display: flex;
    margin-left: calc(var(--spacing) * -1);
    margin-right: calc(var(--spacing) * -1);
}

.colors-component__wrap > * {
    padding-left: var(--spacing);
    padding-right: var(--spacing);
}

.colors-component__color-inner {
    min-width: var(--color-size);
    max-width: var(--color-size);
    width: var(--color-size);
    min-height: var(--color-size);
    max-height: var(--color-size);
    height: var(--color-size);
    background-color: var(--color);
    border-radius: 2px;
}

    /* COLOR PICKER INJECTIONS */
    .color-picker-component {
        --input-height: 33px;
        --padding-inline: 16px;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        min-height: var(--input-height);
        max-height: var(--input-height);
        height: var(--input-height);
        background: var(--color-white);
        outline: none;
    }

    .color-picker-component:hover,
    .color-picker-component:focus-visible,
    .color-picker-component:focus {
        background: var(--color-white);
        outline: none;
        border-color: var(--color-primary);
    }

    .colors-component.alwan__preset-button::before {
        top: 50%;
        left: var(--padding-inline);
        min-width: var(--color-size);
        max-width: var(--color-size);
        width: var(--color-size);
        min-height: var(--color-size);
        max-height: var(--color-size);
        height: var(--color-size);
        border-radius: 2px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    /* COLOR PICKER INJECTIONS END */

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .colors-component {
        --spacing: calc(0.5px * 0.7114583);
        --color-size: calc(16px * 0.7114583);
    }
    .color-picker-component {
        --input-height: 23.7px;
        --padding-inline: calc(16px * 0.7114583);
    }
}
/* COLORS COMPONENT END */

/* BLOCK LAYOUT COMPONENT */
.block-layout-component {
    --component-container-padding: 22px;
    --items-spacing-x: 8px;
    --items-spacing-y: 16px;
    --items-padding-inner-x: 32px;
    --items-padding-inner-y: 16px;
    --items-spacing-inner-section: 16px;
    --item-spacing-top: 8px;
    --item-content-inner-spacing: 4px;
    --font-size-heading: 28px;
    --font-size-regular: 16px;
    --item-actions-size: 30px;
    --item-actions-color: #BAC0C8;
    --item-actions-color-hover: var(--color-primary);
    --item-actions-icon-color: var(--color-white);
}

.block-layout-component__container {
    padding: 0 var(--component-container-padding);
}

.block-layout-component__wrap {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: calc(var(--items-spacing-x) * -1);
    margin-right: calc(var(--items-spacing-x) * -1);
}

.block-layout-component__wrap > * {
    padding-left: var(--items-spacing-x);
    padding-right: var(--items-spacing-x);
}

.block-layout-component__item.col-33 {
    min-width: 33.33333333%;
    max-width: 33.33333333%;
    width: 33.33333333%;
}

.block-layout-component__item.col-33 + .block-layout-component__item.col-33 + .block-layout-component__item.col-33 + .block-layout-component__item.col-33 {
    margin-top: var(--items-spacing-y);
}

.block-layout-component__item-inner {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: 10px;
    padding: var(--items-padding-inner-y) var(--items-padding-inner-x);
    z-index: 1;
}

.block-layout-component__item-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
    border-radius: 10px;
    z-index: -1;
}

.block-layout-component__item-inner > * + * {
    border-top: 2px solid #EDF2F9;
    padding-top: var(--items-spacing-inner-section);
    margin-top: var(--items-spacing-inner-section);
}

.block-layout-component__item-inner__section {
    display: webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.block-layout-component__item-top {
    display: -webkit-flex;
    display: flex;
    margin-left: calc(var(--item-spacing-top) * -1);
    margin-right: calc(var(--item-spacing-top) * -1);
}

.block-layout-component__item-top > * {
    padding: 0 var(--item-spacing-top);
}

.block-layout-component__item-top_col.content {
    flex-grow: 1;
    hyphens: auto;
}

.block-layout-component__item-top_col.actions {
    min-width: calc(var(--item-actions-size) + calc(var(--item-spacing-top) * 2));
    max-width: calc(var(--item-actions-size) + calc(var(--item-spacing-top) * 2));
    width: calc(var(--item-actions-size) + calc(var(--item-spacing-top) * 2));
}

.block-layout-component__item-top__content {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.block-layout-component__item-top__content > * + * {
    margin-top: var(--item-content-inner-spacing);
}

.block-layout-component__item-top__content.icon {
    position: relative;
    padding-left: calc(var(--icon-size-x) + calc(var(--item-spacing-top) * 2));
}

.block-layout-component__item-top__content.icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    min-width: var(--icon-size-x);
    max-width: var(--icon-size-x);
    width: var(--icon-size-x);
    min-height: var(--icon-size-y);
    max-height: var(--icon-size-y);
    height: var(--icon-size-y);
    background-image: var(--icon-url);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.block-layout-component__item-top__text-heading {
    font-size: var(--font-size-heading);
    font-weight: 600;
    line-height: normal;
}

.block-layout-component__item-top__text-regular {
    color: #656565; 
    font-size: var(--font-size-regular);
    font-weight: 400;
    line-height: normal;
}

.block-layout-component__item-top__actions {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.block-layout-component__item-top__actions > * + * {
    margin-top: var(--item-spacing-top);
}

.block-layout-component__item-top__actions-item > button {
    position: relative;
    min-width: var(--item-actions-size);
    max-width: var(--item-actions-size);
    width: var(--item-actions-size);
    min-height: var(--item-actions-size);
    max-height: var(--item-actions-size);
    height: var(--item-actions-size);
    background-color: var(--item-actions-color);
    border-radius: 50%;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

.block-layout-component__item-top__actions-item > button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: var(--icon-size-x);
    max-width: var(--icon-size-x);
    width: var(--icon-size-x);
    min-height: var(--icon-size-y);
    max-height: var(--icon-size-y);
    height: var(--icon-size-y);
    background-color: var(--item-actions-icon-color);
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--icon-url);
    mask-position: center;
    mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.block-layout-component__item-top__actions-item > button:hover,
.block-layout-component__item-top__actions-item > button:focus-visible {
    background-color: var(--item-actions-color-hover);
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .block-layout-component {
        --component-container-padding: calc(22px * 0.7114583);
        --items-spacing-x: calc(8px * 0.7114583);
        --items-spacing-y: calc(16px * 0.7114583);
        --items-padding-inner-x: calc(32px * 0.7114583);
        --items-padding-inner-y: calc(16px * 0.7114583);
        --items-spacing-inner-section: calc(16px * 0.7114583);
        --item-spacing-top: calc(8px * 0.7114583);
        --item-content-inner-spacing: calc(4px * 0.7114583);
        --font-size-heading: calc(28px * 0.7114583);
        --font-size-regular: calc(16px * 0.7114583);
        --item-actions-size: calc(30px * 0.7114583);
    }
}

@media (max-width: 1199px) {
    .block-layout-component__item.col-33 {
        min-width: 50%;
        max-width: 50%;
        width: 100%;
    }
    .block-layout-component__item.col-33 + .block-layout-component__item.col-33 + .block-layout-component__item.col-33,
    .block-layout-component__item.col-33 + .block-layout-component__item.col-33 + .block-layout-component__item.col-33 + .block-layout-component__item.col-33 {
        margin-top: var(--items-spacing-y);
    }
}

@media (max-width: 991px) {
    .block-layout-component {
        --component-container-padding: 0;
        --items-padding-inner-x: 16px;
        --items-padding-inner-y: 16px;
        --font-size-heading: 24px;
    }
    .block-layout-component__item.col-33 {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .block-layout-component__item.col-33 + .block-layout-component__item.col-33,
    .block-layout-component__item.col-33 + .block-layout-component__item.col-33 + .block-layout-component__item.col-33,
    .block-layout-component__item.col-33 + .block-layout-component__item.col-33 + .block-layout-component__item.col-33 + .block-layout-component__item.col-33 {
        margin-top: var(--items-spacing-y);
    }
    .block-layout-component__item-top {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .block-layout-component__item-top > * + * {
        margin-top: var(--item-spacing-top);
    }
    .block-layout-component__item-top_col.content,
    .block-layout-component__item-top_col.action {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        flex-grow: initial;
    }
    .block-layout-component__item-top__actions {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        -webkit-flex-direction: row;
        flex-direction: row;
    }
    .block-layout-component__item-top__actions > * + * {
        margin-top: 0;
        margin-left: var(--item-spacing-top);
    }
}
/* BLOCK LAYOUT COMPONENT END */

/* EDITABLE DATA COMPONENT */
.editable-data-component {
    --list-item-spacing: 8px;
    --item-inner-spacing: 8px;
    --font-size: 14px;
}

.editable-data-component__wrap {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.editable-data-component__wrap > * + * {
    margin-top: var(--list-item-spacing);
}

.editable-data-component__item-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: calc(var(--item-inner-spacing) * -1);
    margin-right: calc(var(--item-inner-spacing) * -1);
}

.editable-data-component__item-inner > * {
    padding-left: var(--item-inner-spacing);
    padding-right: var(--item-inner-spacing);
}

.editable-data-component__item-inner__col {
    min-width: 50%;
    max-width: 50%;
    width: 50%;
}

.editable-data-component__item-label,
.editable-data-component__item-data {
    color: #656565;
    font-size: var(--font-size);
    font-weight: 300;
    line-height: normal;
}

.editable-data-component__item-label {
    display: block;
    text-align: right;
}

.editable-data-component__item-data {
    font-weight: 400;
}

/* For mac screens */
@media (max-width: 1460px) and (min-width: 1200px) {
    .editable-data-component {
        --list-item-spacing: calc(8px * 0.7114583);
        --item-inner-spacing: calc(8px * 0.7114583);
        --font-size: calc(14px * 0.7114583);
    }
}

@media (max-width: 1199px) {
    .editable-data-component__item-inner__col {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    .editable-data-component__item-label {
        text-align: left;
    }
}
/* EDITABLE DATA COMPONENT END */

/* TEST FEATURES */
[data-modal-inner-content-option]:not(.active),
[data-toggle-elem-after-time]:not(.active),
[data-presentation-repeater-element]:not(.active),
[data-file-upload-universal-component-list-item]:not(.active),
[data-presentation-adder-template-ele] {
    display: none;
}
/* ** */

[data-scripted-link] {
    cursor: pointer;
}