/*!************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./Content/Styles/pazar_new.css ***!
  \************************************************************************************************************/
/* #region ======================================= Variables ========================================== */
/* #region --------------------------------- Colors ------------------------------------ */

/* #region Primitives */
:root {
    --color-neutral-000: rgb(255,255,255);
    --color-neutral-100: rgb(249,249,251);
    --color-neutral-200: rgb(240,241,244);
    --color-neutral-300: rgb(211,214,222);
    --color-neutral-400: rgb(182,186,201);
    --color-neutral-500: rgb(152,159,179);
    --color-neutral-600: rgb(123,131,157);
    --color-neutral-700: rgb(97,106,132);
    --color-neutral-800: rgb(76,82,103);
    --color-neutral-900: rgb(43,47,49);
    --color-brand-100: rgb(248,251,250);
    --color-brand-200: rgb(228,241,234);
    --color-brand-300: rgb(195,223,208);
    --color-brand-400: rgb(161,206,182);
    --color-brand-500: rgb(128,188,155);
    --color-brand-600: rgb(93,170,128);
    --color-brand-700: rgb(74,140,104);
    --color-brand-800: rgb(56,107,79);
    --color-brand-900: rgb(39,74,54);
    --color-green-100: rgb(247,253,248);
    --color-green-200: rgb(234,250,238);
    --color-green-300: rgb(193,240,204);
    --color-green-400: rgb(152,230,170);
    --color-green-500: rgb(111,220,136);
    --color-green-600: rgb(70,211,102);
    --color-green-700: rgb(44,185,76);
    --color-green-800: rgb(34,144,59);
    --color-green-900: rgb(25,103,42);
    --color-yellow-100: rgb(255,253,245);
    --color-yellow-200: rgb(255,250,229);
    --color-yellow-300: rgb(255,240,178);
    --color-yellow-400: rgb(255,229,127);
    --color-yellow-500: rgb(255,219,76);
    --color-yellow-600: rgb(255,209,25);
    --color-yellow-700: rgb(229,184,0);
    --color-yellow-800: rgb(178,143,0);
    --color-yellow-900: rgb(127,102,0);
    --color-red-100: rgb(253,246,246);
    --color-red-200: rgb(251,234,234);
    --color-red-300: rgb(242,191,191);
    --color-red-400: rgb(233,149,149);
    --color-red-500: rgb(225,107,107);
    --color-red-600: rgb(216,63,63);
    --color-red-700: rgb(191,39,39);
    --color-red-800: rgb(148,30,30);
    --color-red-900: rgb(106,21,21);
    --color-light-000: rgba(255,255,255,0);
    --color-light-100: rgba(255,255,255,0.03);
    --color-light-200: rgba(255,255,255,0.05);
    --color-light-300: rgba(255,255,255,0.1);
    --color-light-400: rgba(255,255,255,0.2);
    --color-light-500: rgba(255,255,255,0.3);
    --color-light-600: rgba(255,255,255,0.4);
    --color-light-700: rgba(255,255,255,0.6);
    --color-light-800: rgba(255,255,255,0.8);
    --color-light-900: rgba(255,255,255,1);
    --color-shade-000: rgba(30, 40, 73, 0);
    --color-shade-100: rgba(30, 40, 73, 0.03);
    --color-shade-200: rgba(30, 40, 73, 0.05);
    --color-shade-300: rgba(30, 40, 73, 0.1);
    --color-shade-400: rgba(30, 40, 73, 0.2);
    --color-shade-500: rgba(30, 40, 73, 0.3);
    --color-shade-600: rgba(30, 40, 73, 0.4);
    --color-shade-700: rgba(30, 40, 73, 0.6);
    --color-shade-800: rgba(30, 40, 73, 0.8);
    --color-shade-900: rgba(30, 40, 73, 1);
    --color-pure-white: rgba(255,255,255,1);
    --color-pure-black: rgba(0,0,0,1);
}
/* #endregion Primitives */
/* #region Texts */
:root {
    --color-text-basic: var(--color-neutral-900);
    --color-text-muted: var(--color-neutral-600);
    --color-text-ghost: var(--color-neutral-400);
    --color-text-alt: var(--color-light-900);
    --color-text-alt-muted: var(--color-light-700);
    --color-text-primary: var(--color-brand-600);
    --color-text-success: var(--color-green-800);
    --color-text-warning: var(--color-yellow-800);
    --color-text-danger: var(--color-red-700);
}
/* #endregion Texts */
/* #region Borders */
:root {
    --color-border-muted: var(--color-neutral-200);
    --color-border-basic: var(--color-neutral-300);
    --color-border-dark: var(--color-neutral-500);
    --color-border-primary: var(--color-brand-600);
    --color-border-danger: var(--color-red-600);
}
/* #endregion Borders */
/* #region Surfaces */
:root {
    --color-bg-main: var(--color-pure-white);
    --color-bg-alt: var(--color-pure-white);
    --color-bg-primary: var(--color-brand-600);
    --color-bg-primary-light: var(--color-brand-200);
    --color-bg-primary-dark: var(--color-brand-700);
    --color-bg-danger: var(--color-red-600);
    --color-bg-danger-light: var(--color-red-200);
    --color-bg-danger-dark: var(--color-red-700);
    --color-bg-warning: var(--color-yellow-600);
    --color-bg-warning-light: var(--color-yellow-200);
    --color-bg-warning-dark: var(--color-yellow-700);
    --color-bg-success: var(--color-green-600);
    --color-bg-success-light: var(--color-green-200);
    --color-bg-success-dark: var(--color-green-700);
    --color-bg-panel: var(--color-neutral-100);
    --color-bg-panel-selected: var(--color-neutral-200);
    --color-bg-panel-transparent: var(--color-shade-100);
    --color-bg-inputs-transparent: var(--color-shade-200);
    --color-bg-inputs-solid: var(--color-neutral-100);
    --color-bg-inputs-selected-solid: var(--color-neutral-200);
}
/* #endregion Surfaces */
/* #region Avatars */
:root {
    --color-avatar-rgb-00: 243,209,53;
    --color-avatar-rgb-01: 249,169,41;
    --color-avatar-rgb-02: 245,110,5;
    --color-avatar-rgb-03: 225,67,53;
    --color-avatar-rgb-04: 245,44,88;
    --color-avatar-rgb-05: 249,43,132;
    --color-avatar-rgb-06: 202,50,174;
    --color-avatar-rgb-07: 131,31,182;
    --color-avatar-rgb-08: 112,46,243;
    --color-avatar-rgb-09: 48,13,200;
    --color-avatar-rgb-10: 43,46,254;
    --color-avatar-rgb-11: 8,111,221;
    --color-avatar-rgb-12: 36,151,243;
    --color-avatar-rgb-13: 4,189,213;
    --color-avatar-rgb-14: 3,137,164;
    --color-avatar-rgb-15: 7,146,127;
    --color-avatar-rgb-16: 3,164,84;
    --color-avatar-rgb-17: 32,190,32;
    --color-avatar-rgb-18: 114,186,16;
    --color-avatar-rgb-19: 177,170,13;
    --color-avatar-00: rgba(var(--color-avatar-rgb-00), 1);
    --color-avatar-01: rgba(var(--color-avatar-rgb-01), 1);
    --color-avatar-02: rgba(var(--color-avatar-rgb-02), 1);
    --color-avatar-03: rgba(var(--color-avatar-rgb-03), 1);
    --color-avatar-04: rgba(var(--color-avatar-rgb-04), 1);
    --color-avatar-05: rgba(var(--color-avatar-rgb-05), 1);
    --color-avatar-06: rgba(var(--color-avatar-rgb-06), 1);
    --color-avatar-07: rgba(var(--color-avatar-rgb-07), 1);
    --color-avatar-08: rgba(var(--color-avatar-rgb-08), 1);
    --color-avatar-09: rgba(var(--color-avatar-rgb-09), 1);
    --color-avatar-10: rgba(var(--color-avatar-rgb-10), 1);
    --color-avatar-11: rgba(var(--color-avatar-rgb-11), 1);
    --color-avatar-12: rgba(var(--color-avatar-rgb-12), 1);
    --color-avatar-13: rgba(var(--color-avatar-rgb-13), 1);
    --color-avatar-14: rgba(var(--color-avatar-rgb-14), 1);
    --color-avatar-15: rgba(var(--color-avatar-rgb-15), 1);
    --color-avatar-16: rgba(var(--color-avatar-rgb-16), 1);
    --color-avatar-17: rgba(var(--color-avatar-rgb-17), 1);
    --color-avatar-18: rgba(var(--color-avatar-rgb-18), 1);
    --color-avatar-19: rgba(var(--color-avatar-rgb-19), 1);
}
/* #endregion Avatars */
/* #region Cars */
:root {
    --color-car-black: #000000;
    --color-car-gray: #9E9E9E;
    --color-car-silver: #E2E2E2;
    --color-car-white: #FFFFFF;
    --color-car-beige: #D4B993;
    --color-car-brown: #9C6A0F;
    --color-car-burgundy: #AF2239;
    --color-car-red: #D90E0E;
    --color-car-orange: #FF5E07;
    --color-car-gold: #FFAE00;
    --color-car-yellow: #FFE100;
    --color-car-green: #1FAA24;
    --color-car-blue: #3F5CEA;
    --color-car-purple: #992BE2;
    --color-car-pink: #FF81D5;
}
/* #endregion Cars */
/* #endregion -----------------------------/ Colors ------------------------------------ */
/* #region ---------------------------------- Gaps ------------------------------------- */
:root {
    --gap-0: 0px;
    --gap-1: 1px;
    --gap-2: 2px;
    --gap-4: 4px;
    --gap-8: 8px;
    --gap-12: 12px;
    --gap-16: 16px;
    --gap-24: 24px;
    --gap-32: 32px;
    --gap-40: 40px;
    --gap-48: 48px;
    --gap-64: 64px;
    --gap-80: 80px;
    --gap-100: 100px;
    --gap-128: 128px;
}
/* #endregion ------------------------------/ Gaps ------------------------------------- */
/* #region ------------------------------- Radiuses ------------------------------------ */
:root {
    --radius-0: 0px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-32: 32px;
    --radius-circle: 50%;
}
/* #endregion ---------------------------/ Radiuses ------------------------------------ */

/* #endregion ===================================/ Variables ========================================== */

/* #region ======================================== FONTS ============================================= */

/* #region Manrope */
@font-face {
    font-family: 'Manrope';
    src: url('../../Content/Fonts/Manrope-Bold.eot');
    src: url('../../Content/Fonts/Manrope-Bold.eot?#iefix') format('embedded-opentype'), url('../../Content/Fonts/Manrope-Bold.woff2') format('woff2'), url('../../Content/Fonts/Manrope-Bold.woff') format('woff'), url('../../Content/Fonts/Manrope-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../../Content/Fonts/Manrope-ExtraBold.eot');
    src: url('../../Content/Fonts/Manrope-ExtraBold.eot?#iefix') format('embedded-opentype'), url('../../Content/Fonts/Manrope-ExtraBold.woff2') format('woff2'), url('../../Content/Fonts/Manrope-ExtraBold.woff') format('woff'), url('../../Content/Fonts/Manrope-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../../Content/Fonts/Manrope-ExtraLight.eot');
    src: url('../../Content/Fonts/Manrope-ExtraLight.eot?#iefix') format('embedded-opentype'), url('../../Content/Fonts/Manrope-ExtraLight.woff2') format('woff2'), url('../../Content/Fonts/Manrope-ExtraLight.woff') format('woff'), url('../../Content/Fonts/Manrope-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../../Content/Fonts/Manrope-Light.eot');
    src: url('../../Content/Fonts/Manrope-Light.eot?#iefix') format('embedded-opentype'), url('../../Content/Fonts/Manrope-Light.woff2') format('woff2'), url('../../Content/Fonts/Manrope-Light.woff') format('woff'), url('../../Content/Fonts/Manrope-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../../Content/Fonts/Manrope-Medium.eot');
    src: url('../../Content/Fonts/Manrope-Medium.eot?#iefix') format('embedded-opentype'), url('../../Content/Fonts/Manrope-Medium.woff2') format('woff2'), url('../../Content/Fonts/Manrope-Medium.woff') format('woff'), url('../../Content/Fonts/Manrope-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../../Content/Fonts/Manrope-Regular.eot');
    src: url('../../Content/Fonts/Manrope-Regular.eot?#iefix') format('embedded-opentype'), url('../../Content/Fonts/Manrope-Regular.woff2') format('woff2'), url('../../Content/Fonts/Manrope-Regular.woff') format('woff'), url('../../Content/Fonts/Manrope-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'Manrope';
    src: url('../../Content/Fonts/Manrope-SemiBold.eot');
    src: url('../../Content/Fonts/Manrope-SemiBold.eot?#iefix') format('embedded-opentype'), url('../../Content/Fonts/Manrope-SemiBold.woff2') format('woff2'), url('../../Content/Fonts/Manrope-SemiBold.woff') format('woff'), url('../../Content/Fonts/Manrope-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/* #endregion Manrope */
/* #endregion ==================================== /FONTS ============================================= */
/* #region ======================================= GLOBALS ============================================ */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
abbr, address, cite,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-family: 'Manrope', Arial;
    -webkit-font-smoothing: subpixel-antialiased !important;
}

html {
    min-height: 100%;
    height: 100%;
}

html, body {
    color: var(--color-text-basic);
    font-size: 14px;
    height: 100%;
}

.fullwidth {
    width: 100%;
}

.website-wrapper {
    min-height: 100%;
    padding-bottom: 431px;
}

    .website-wrapper.account-deletion {
        padding-bottom: 150px;
    }

input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

* {
    box-sizing: border-box;
}

.nowrap {
    white-space: nowrap;
}



@media (max-width: 991px) {
    .website-wrapper {
        padding-bottom: 441px;
    }
}

@media (max-width: 767px) {
    .website-wrapper {
        padding-bottom: 0px;
    }
}

select, #search-text {
    font-weight: 400 !important;
    padding: 0px;
    margin: 0px;
    height: 100%;
    border: 1px solid #cdcdcd;
    box-shadow: none;
    background-color: transparent;
    padding-left: 20px;
    padding-right: 10px;
    box-sizing: border-box;
    display: block;
    font-family: 'Manrope', 'Arial' !important;
}

    select option {
        font-weight: 400 !important;
        font-family: 'Manrope', 'Arial' !important;
    }

.leaflet-pane {
    z-index: 1 !important;
}

.font-size-0 {
    font-size: 0px;
}

.loadingIndicator {
    position: fixed !important;
    height: 100% !important;
    top: 0% !important;
    left: 0% !important;
}

    .loadingIndicator .Indicator-before {
        height: 100% !important;
        top: 0% !important;
        left: 0% !important;
        width: 100% !important;
    }

    .loadingIndicator .la-spin {
        position: fixed !important;
        margin-top: 0px !important;
        top: 50% !important;
    }

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

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


*:focus {
    outline: none;
}

.hidden, .hide {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0px;
    padding: 0px;
    clip: rect(0 0 0 0);
    overflow: hidden;
}



.position-relative {
    position: relative;
}

a {
    color: var(--color-text-primary);
    font-weight: 500;
    text-transform: none;
    text-decoration: underline;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

    a:hover {
        opacity: 0.6;
        color: var(--color-text-primary);
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

    a:active {
        opacity: 1;
        color: var(--color-text-primary);
        -webkit-transition: opacity 0.1s ease;
        transition: opacity 0.1s ease;
    }

    a[disabled] {
        opacity: 0.6;
        pointer-events: none;
    }

.display-inline-block {
    display: inline-block;
}

sup {
    top: -0.5em;
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

.inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

.radius-circle {
    border-radius: 50% !important;
}
/* #region ------------------------------------------ Flags -------------------------------------------- */
.flag {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    content: '';
}

    .flag.macedonia {
        background-image: url('../../Content/Images/Countries/flag_macedonia.png');
    }

    .flag.albania {
        background-image: url('../../Content/Images/Countries/flag_albania.png');
    }

    .flag.kosovo {
        background-image: url('../../Content/Images/Countries/flag_kosovo.png');
    }

    .flag.serbia {
        background-image: url('../../Content/Images/Countries/flag_serbia.png');
    }

    .flag.montenegro {
        background-image: url('../../Content/Images/Countries/flag_montenegro.png');
    }

    .flag.afghanistan {
        background-image: url('../../Content/Images/Countries/flag_afghanistan.png');
    }

/* #endregion --------------------------------------/ Flags -------------------------------------------- */
/* #region ------------------------------------- Code Highlighter -------------------------------------- */
.code-highlight {
    color: #000000;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
    line-height: 1.5;
}

/* #region HTML, SVG */
/*  < , > , </ , />  */
.code-html .html-bracket {
    color: #0000ff !important;
    font-weight: normal;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/* Tags */
.code-html .html-tag {
    color: #0000ff !important;
    font-weight: normal;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/*  class, id, type, data-format */
.code-html .html-attr {
    color: #1f377f !important;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/* "values" */
.code-html .html-value {
    color: #a31515 !important;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/* Comments */
.code-html .html-comment,
.code-html .html-comment * {
    color: #008000 !important;
    font-style: normal !important;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}
/* Numbers */
.code-js .js-number {
    color: #74531f !important;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace !important;
}

/* Operators */
.code-js .js-operator {
    color: #af00db !important;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace !important;
}
/* #endregion HTML, SVG */


/* #region JS */
/* const, let, if, return, true */
.code-js .js-keyword {
    color: #0000ff !important;
    font-weight: normal;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/* Methods and Objects */
.code-js .js-method {
    color: #1f377f !important;
    font-weight: normal;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/* "Strings" */
.code-js .js-string {
    color: #a31515 !important;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/* /\D/g  */
.code-js .js-regex {
    color: #0531b4 !important;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}
/* Comments */
.code-js .js-comment {
    color: #008000 !important;
    font-style: normal !important;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/*  => */
.code-js .js-arrow {
    color: #0000ff !important;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/* Tags <script> */
.code-js .js-script-tag {
    color: #0000ff !important;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/* #endregion JS */


/* #region CSS */
/* Class, ID, selectors, @keyframes */
.code-css .css-selector {
    color: #a31515 !important;
    font-weight: normal;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/* { } */
.code-css .css-brace {
    color: #000000 !important;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/* Propert Names */
.code-css .css-property {
    color: #0000ff !important;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/* Values */
.code-css .css-value {
    color: #1f377f !important;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/* !important */
.code-css .css-important {
    color: #0444a4 !important;
    font-weight: bold !important;
    padding-left: 4px;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}

/* Comments */
.code-css .css-comment,
.code-css .css-comment * {
    color: #008000 !important;
    font-style: normal !important;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
}
/* #endregion CSS */

/* #endregion ---------------------------------/ Code Highlighter -------------------------------------- */
/* #region -------------------------------------- Scrollbar Mini --------------------------------------- */
.scrollbar-mini-vertical {
    position: relative;
    overflow: hidden;
    /* height: 300px; set your height or max-height */
    padding: 0;
    touch-action: none;
    box-sizing: border-box;
}

    .scrollbar-mini-vertical .scrollbar-content {
        will-change: transform;
        box-sizing: border-box;
    }


    .scrollbar-mini-vertical .scrollbar-track {
        position: absolute;
        top: 0;
        width: 4px;
        height: 100%;
        border-radius: 4px;
        background: transparent;
        pointer-events: none;
    }

    .scrollbar-mini-vertical .scrollbar-thumb {
        position: absolute;
        width: 100%;
        border-radius: 4px;
        background: transparent;
        pointer-events: auto;
        cursor: pointer;
        min-height: 20px;
        transition: background 0.2s;
        touch-action: none;
        display: none;
    }


    .scrollbar-mini-vertical:hover .scrollbar-thumb {
        background: var(--color-shade-300);
    }

    .scrollbar-mini-vertical .scrollbar-thumb:hover,
    .scrollbar-mini-vertical .scrollbar-thumb:active {
        background: var(--color-shade-500);
    }


    .scrollbar-mini-vertical.always-visible .scrollbar-thumb {
        background: var(--color-shade-300);
    }

        .scrollbar-mini-vertical.always-visible .scrollbar-thumb:hover,
        .scrollbar-mini-vertical.always-visible .scrollbar-thumb:active {
            background: var(--color-shade-500);
        }


/* #endregion ----------------------------------/ Scrollbar Mini --------------------------------------- */
/* #region ---------------------------------- Horizontal Scroller -------------------------------------- */

.horizontal-scrolling {
    overflow: hidden;
    cursor: grab;
    user-select: none;
    position: relative;
    white-space: nowrap;
}

    .horizontal-scrolling:active {
        cursor: grabbing;
    }

/* #endregion ------------------------------/ Horizontal Scroller -------------------------------------- */
/* #region ------------------------------------- Element Animations ------------------------------------------ */
.element-animation.zoom,
.element-animation.zoom-1,
.element-animation.zoom-2,
.element-animation.zoom-3,
.element-animation.zoom-4,
.element-animation.zoom-5,
.element-animation.zoom-6,
.element-animation.zoom-7,
.element-animation.zoom-8,
.element-animation.zoom-9,
.element-animation.zoom-10 {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

    .element-animation.zoom.element-show,
    .element-animation.zoom-1.element-show {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

    .element-animation.zoom-2.element-show {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.1s;
    }

    .element-animation.zoom-3.element-show {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.2s;
    }

    .element-animation.zoom-4.element-show {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.3s;
    }

    .element-animation.zoom-5.element-show {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.4s;
    }

    .element-animation.zoom-6.element-show {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.5s;
    }

    .element-animation.zoom-7.element-show {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.6s;
    }

    .element-animation.zoom-8.element-show {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.7s;
    }

    .element-animation.zoom-9.element-show {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.8s;
    }

    .element-animation.zoom-10.element-show {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out 0.9s;
    }


.element-animation.move-up,
.element-animation.move-up-1,
.element-animation.move-up-2,
.element-animation.move-up-3,
.element-animation.move-up-4,
.element-animation.move-up-5,
.element-animation.move-up-6,
.element-animation.move-up-7,
.element-animation.move-up-8,
.element-animation.move-up-9,
.element-animation.move-up-10 {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.5s ease-in-out 0.1s, transform 0.5s ease-in-out 0.1s;
}

    .element-animation.move-up.element-show,
    .element-animation.move-up-1.element-show {
        opacity: 1;
        transform: translateY(0px);
        transition: opacity 0.5s ease-in-out 0.1s, transform 0.5s ease-in-out 0.1s;
    }

    .element-animation.move-up-2.element-show {
        opacity: 1;
        transform: translateY(0px);
        transition: opacity 0.5s ease-in-out 0.2s, transform 0.5s ease-in-out 0.2s;
    }

    .element-animation.move-up-3.element-show {
        opacity: 1;
        transform: translateY(0px);
        transition: opacity 0.5s ease-in-out 0.3s, transform 0.5s ease-in-out 0.3s;
    }

    .element-animation.move-up-4.element-show {
        opacity: 1;
        transform: translateY(0px);
        transition: opacity 0.5s ease-in-out 0.4s, transform 0.5s ease-in-out 0.4s;
    }

    .element-animation.move-up-5.element-show {
        opacity: 1;
        transform: translateY(0px);
        transition: opacity 0.5s ease-in-out 0.5s, transform 0.5s ease-in-out 0.5s;
    }

    .element-animation.move-up-6.element-show {
        opacity: 1;
        transform: translateY(0px);
        transition: opacity 0.5s ease-in-out 0.6s, transform 0.5s ease-in-out 0.6s;
    }

    .element-animation.move-up-7.element-show {
        opacity: 1;
        transform: translateY(0px);
        transition: opacity 0.5s ease-in-out 0.7s, transform 0.5s ease-in-out 0.7s;
    }

    .element-animation.move-up-8.element-show {
        opacity: 1;
        transform: translateY(0px);
        transition: opacity 0.5s ease-in-out 0.8s, transform 0.5s ease-in-out 0.8s;
    }

    .element-animation.move-up-9.element-show {
        opacity: 1;
        transform: translateY(0px);
        transition: opacity 0.5s ease-in-out 0.9s, transform 0.5s ease-in-out 0.9s;
    }

    .element-animation.move-up-10.element-show {
        opacity: 1;
        transform: translateY(0px);
        transition: opacity 0.5s ease-in-out 1s, transform 0.5s ease-in-out 1s;
    }

/* #endregion --------------------------------- /Element Animations ------------------------------------------ */
/* #region ---------------------------------------- Logos Update --------------------------------------------- */
.site-Macedonia .bottom-header a.site-logo,
.site-Macedonia .new-footer .site-logo,
.site-Macedonia .under-construction-page .site-logo,
.site-Macedonia .page-checkout header .site-logo {
    background-image: url("../../Content/Images/Macedonia/Macedonia.svg");
}

.site-Afghanistan .bottom-header a.site-logo,
.site-Afghanistan .new-footer .site-logo,
.site-Afghanistan .under-construction-page .site-logo,
.site-Afghanistan .page-checkout header .site-logo {
    background-image: url("../../Content/Images/Afghanistan/Afghanistan.svg");
}

.site-Albania .bottom-header a.site-logo,
.site-Albania .new-footer .site-logo,
.site-Albania .under-construction-page .site-logo,
.site-Albania .page-checkout header .site-logo {
    background-image: url("../../Content/Images/Albania/Albania.svg");
}

.bottom-header a.site-logo,
.new-footer .site-logo {
    background-image: url("../../Content/Images/Bulgaria/Pazar3-bg.svg");
}

.site-Kosovo .bottom-header a.site-logo,
.site-Kosovo .new-footer .site-logo,
.site-Kosovo .under-construction-page .site-logo,
.site-Kosovo .page-checkout header .site-logo {
    background-image: url("../../Content/Images/Kosovo/Kosovo.svg");
}

.site-Montenegro .bottom-header a.site-logo,
.site-Montenegro .new-footer .site-logo,
.site-Montenegro .under-construction-page .site-logo,
.site-Montenegro .page-checkout header .site-logo {
    background-image: url("../../Content/Images/Montenegro/Montenegro.svg");
}

.site-Serbia .bottom-header a.site-logo,
.site-Serbia .new-footer .site-logo,
.site-Serbia .under-construction-page .site-logo,
.site-Serbia .page-checkout header .site-logo {
    background-image: url("../../Content/Images/Serbia/Serbia.svg");
}
/* #endregion ------------------------------------ /Logos Update --------------------------------------------- */
/* #region ---------------------------------------- Logos --------------------------------------------- */
.logo-pazar3-mk {
    background-image: url("../../Content/Images/Macedonia/Macedonia.svg") !important;
}

.logo-leelam-af {
    background-image: url("../../Content/Images/Afghanistan/Afghanistan.svg") !important;
}

.logo-merrjep-al {
    background-image: url("../../Content/Images/Albania/Albania.svg") !important;
}

.logo-pazar3-bg {
    background-image: url("../../Content/Images/Bulgaria/Pazar3-bg.svg") !important;
}

.logo-merrjep-com {
    background-image: url("../../Content/Images/Kosovo/Kosovo.svg") !important;
}

.logo-mojtrg-me {
    background-image: url("../../Content/Images/Montenegro/Montenegro.svg") !important;
}

.logo-mojtrg-rs {
    background-image: url("../../Content/Images/Serbia/Serbia.svg") !important;
}
/* #endregion ------------------------------------ /Logos --------------------------------------------- */
/* #region --------------------------------------- Cursors -------------------------------------------- */
.cursor-pointer {
    cursor: pointer;
}
/* #endregion ----------------------------------- /Cursors -------------------------------------------- */
/* #region ---------------------------------------- Links --------------------------------------------- */
.link-inline {
    display: inline-block;
    color: var(--color-text-primary) !important;
    font-size: inherit;
    font-weight: bold;
    text-decoration: underline;
    opacity: 1;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
    border: 0px none transparent;
    padding: 0px;
    background-color: transparent;
}

    .link-inline:hover {
        opacity: 0.6;
        transition: opacity 0.2s ease-in-out;
    }

.link-block {
    display: block;
    color: var(--color-text-primary) !important;
    font-size: inherit;
    font-weight: bold;
    text-decoration: underline;
    opacity: 1;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
    border: 0px none transparent;
    padding: 0px;
    background-color: transparent;
}


    .link-block:hover {
        opacity: 0.6;
        transition: opacity 0.2s ease-in-out;
    }
/* #endregion --------------------------------------- /Links --------------------------------------------- */
/* #region --------------------------------------- Ul-List -------------------------------------------- */
.pazar-list {
    display: block;
    list-style: none;
    padding: 0px;
    position: relative;
}

    .pazar-list > li {
        display: block;
        margin-top: 8px;
        margin-bottom: 10px;
        padding: 0px;
        line-height: 1.3em;
        float: none;
        clear: both;
        box-sizing: border-box;
        text-align: left;
        position: relative;
        padding-left: 16px;
    }

        .pazar-list > li:first-child {
            margin-top: 10px;
        }


        .pazar-list > li:last-child {
            margin-bottom: 10px;
        }

        .pazar-list > li:before {
            display: block;
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: var(--color-bg-primary);
            position: absolute;
            top: 0.45em;
            left: 0px;
        }

*[dir='rtl'] .pazar-list > li {
    text-align: right;
    padding-left: 0px;
    padding-right: 16px;
}

    *[dir='rtl'] .pazar-list > li:before {
        left: auto;
        right: 0px;
    }
/* #endregion ----------------------------------- /Ul-List -------------------------------------------- */
/* #region ----------------------------------- Counter Button ----------------------------------------- */
.counter-btn {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 0px none transparent;
    outline: none;
    border-radius: var(--radius-4);
    background-color: #EBEBEB;
    cursor: pointer;
    opacity: 1;
    transition: 0.2s ease ease;
}

    .counter-btn:hover {
        opacity: 0.6;
        transition: 0.2s ease ease;
    }

    .counter-btn:active {
        background-color: #E5E5E5;
    }

    .counter-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
/* #endregion ------------------------------- /Counter Button ----------------------------------------- */
/* #region --------------------------------------- Buttons -------------------------------------------- */
button:focus {
    outline: none;
    box-shadow: none;
}

.new-btn, a.new-btn {
    font-family: "Manrope", Arial;
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    border: 0px none transparent;
    border-radius: var(--radius-8);
    color: var(--color-text-basic) !important;
    background: #ebebeb;
    background-color: #EBEBEB;
    font-size: 14px;
    line-height: 14px;
    padding: 14px 18px 12px 18px;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: none !important;
    text-align: center;
}

    .new-btn:hover, a.new-btn:hover {
        text-decoration: none;
        opacity: 0.7;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

    .new-btn.focus, .new-btn:focus, .new-btn:active,
    a.new-btn.focus, a.new-btn:focus, a.new-btn:active {
        background-color: #E8E8E8;
        text-decoration: none;
        outline: none !important;
        box-shadow: none;
    }

    .new-btn.btn-block,
    a.new-btn.btn-block {
        display: block;
        width: 100%;
    }


    .new-btn[disabled] {
        opacity: 0.6;
        pointer-events: none;
        cursor: no-drop;
    }


    /* #region Colors */
    .new-btn.btn-default,
    a.new-btn.btn-default {
        background-color: var(--color-bg-inputs-transparent) !important;
    }

        .new-btn.btn-default:active,
        a.new-btn.btn-default:active {
            background-color: var(--color-bg-inputs-selected-solid) !important;
        }

    .new-btn.btn-primary, .new-btn.btn-primary:active,
    a.new-btn.btn-primary, a.new-btn.btn-primary:active {
        color: #FFFFFF !important;
        background: var(--color-bg-primary) !important;
        border: 0px none transparent;
    }

    .new-btn.btn-danger, .new-btn.btn-danger:active,
    a.new-btn.btn-danger, a.new-btn.btn-danger:active {
        color: #ffffff !important;
        background-color: var(--color-bg-danger) !important;
    }

    .new-btn.btn-link,
    a.new-btn.btn-link {
        color: var(--color-text-primary) !important;
        text-transform: none;
        text-decoration: underline;
        background-color: transparent !important;
        min-width: 0px;
        padding: 14px 5px 14px 5px;
    }

        .new-btn.btn-link:active, .new-btn.btn-link:focus,
        a.new-btn.btn-link:active, a.new-btn.btn-link:focus {
            background-color: transparent !important;
        }

        .new-btn.btn-link:active, .new-btn:active,
        a.new-btn.btn-link:active, a.new-btn:active {
            box-shadow: none !important;
            opacity: 1;
            -webkit-transition: opacity 0.1s ease;
            transition: opacity 0.1s ease;
        }

    .new-btn.btn-facebook,
    a.new-btn.btn-facebook {
        background-color: #1977F3 !important;
        color: #FFFFFF !important;
    }

    .new-btn.btn-google,
    a.new-btn.btn-google {
        background-color: #FFFFFF !important;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 4px !important;
    }

*[dir='rtl'] .new-btn.btn-google *[class*='ci-'],
*[dir='rtl'] .new-btn.btn-facebook *[class*='ci-'] {
    transform: none;
}
/* #endregion Colors */
/* #region Sizes */
.new-btn.btn-xs {
    font-weight: 600;
    font-size: 14px;
    padding: 10px 10px 8px 10px;
}

    .new-btn.btn-xs.btn-link {
        font-weight: 600;
        font-size: 14px;
        padding: 10px 5px 8px 5px;
    }

.new-btn.btn-sm {
    font-weight: 600;
    font-size: 14px;
    padding: 14px 18px 12px 18px;
}

    .new-btn.btn-sm.btn-link {
        font-weight: 600;
        font-size: 14px;
        padding: 14px 5px 12px 5px;
    }

.new-btn.btn-md {
    border-radius: var(--radius-8);
    font-weight: 700;
    font-size: 14px;
    padding: 20px 24px 18px 24px;
}

    .new-btn.btn-md.btn-link {
        border-radius: var(--radius-4);
        font-weight: 700;
        font-size: 14px;
        padding: 20px 5px 18px 5px;
    }

.new-btn.btn-lg {
    border-radius: var(--radius-8);
    font-weight: 700;
    font-size: 14px;
    padding: 23px 30px 21px 30px;
}

    .new-btn.btn-lg.btn-link {
        border-radius: var(--radius-4);
        font-weight: 700;
        font-size: 14px;
        padding: 23px 5px 21px 5px;
    }

.new-btn.btn-xl {
    font-weight: 700;
    font-size: 18px;
    padding: 32px 32px 30px 32px;
    border-radius: var(--radius-8);
    line-height: 18px;
}

    .new-btn.btn-xl.btn-link {
        font-weight: 700;
        font-size: 18px;
        padding: 32px 32px 30px 32px;
        border-radius: var(--radius-4);
        line-height: 18px;
    }
/* #endregion Sizes */
/* #region Icons */
.new-btn.btn-icon-left, .new-btn.btn-icon-right {
    padding-left: 40px;
    padding-right: 40px;
    position: relative;
}

    .new-btn.btn-icon-left.btn-link {
        padding-left: 33px;
        padding-right: 5px;
        position: relative;
    }

*[dir='rtl'] .new-btn.btn-icon-left.btn-link {
    padding-left: 5px;
    padding-right: 33px;
}

.new-btn.btn-icon-right.btn-link {
    padding-left: 5px;
    padding-right: 33px;
    position: relative;
}

*[dir='rtl'] .new-btn.btn-icon-right.btn-link {
    padding-left: 33px;
    padding-right: 5px;
}

.new-btn.btn-icon-left *[class*='ci-'], .new-btn.btn-icon-right *[class*='ci-'] {
    position: absolute;
}

.new-btn.btn-icon-left *[class*='ci-'] {
    font-size: 21px;
    top: calc(50% - 11px);
    left: 6px;
    right: auto;
}

.new-btn.btn-icon-right *[class*='ci-'] {
    font-size: 21px;
    top: calc(50% - 11px);
    left: auto;
    right: 6px;
}

*[dir='rtl'] .new-btn.btn-icon-left *[class*='ci-'] {
    font-size: 21px;
    top: calc(50% - 11px);
    left: auto;
    right: 6px;
}

*[dir='rtl'] .new-btn.btn-icon-right *[class*='ci-'] {
    font-size: 21px;
    top: calc(50% - 11px);
    left: 6px;
    right: auto;
}

*[dir='rtl'] .new-btn *[class*='ci-'] {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
/* xs */
.new-btn.btn-xs.btn-icon-left, .new-btn.btn-xs.btn-icon-right {
    padding-left: 25px;
    padding-right: 25px;
    position: relative;
}

    .new-btn.btn-xs.btn-icon-left.btn-link {
        padding-left: 25px;
        padding-right: 5px;
        position: relative;
    }

*[dir='rtl'] .new-btn.btn-xs.btn-icon-left.btn-link {
    padding-left: 5px;
    padding-right: 25px;
    position: relative;
}

.new-btn.btn-xs.btn-icon-right.btn-link {
    padding-left: 5px;
    padding-right: 25px;
    position: relative;
}

*[dir='rtl'] .new-btn.btn-xs.btn-icon-right.btn-link {
    padding-left: 25px;
    padding-right: 5px;
    position: relative;
}

.new-btn.btn-xs.btn-icon-left *[class*='ci-'] {
    font-size: 16px;
    top: calc(50% - 8px);
    left: 5px;
    right: auto;
}

.new-btn.btn-xs.btn-icon-right *[class*='ci-'] {
    font-size: 16px;
    top: calc(50% - 8px);
    right: 5px;
    left: auto;
}

*[dir='rtl'] .new-btn.btn-xs.btn-icon-left *[class*='ci-'] {
    font-size: 16px;
    top: calc(50% - 8px);
    left: auto;
    right: 5px;
}

*[dir='rtl'] .new-btn.btn-xs.btn-icon-right *[class*='ci-'] {
    font-size: 16px;
    top: calc(50% - 8px);
    right: auto;
    left: 5px;
}

.new-btn.btn-xs.btn-icon-left.btn-link *[class*='ci-'],
.new-btn.btn-xs.btn-icon-right.btn-link *[class*='ci-'],
*[dir='rtl'] .new-btn.btn-xs.btn-icon-left.btn-link *[class*='ci-'],
*[dir='rtl'] .new-btn.btn-xs.btn-icon-right.btn-link *[class*='ci-'] {
    top: calc(50% - 7px);
}
/* sm */
.new-btn.btn-sm.btn-icon-left, .new-btn.btn-sm.btn-icon-right {
    padding-left: 35px;
    padding-right: 35px;
    position: relative;
}

    .new-btn.btn-sm.btn-icon-left.btn-link {
        padding-left: 32px;
        padding-right: 5px;
        position: relative;
    }

*[dir='rtl'] .new-btn.btn-sm.btn-icon-left.btn-link {
    padding-left: 5px;
    padding-right: 32px;
    position: relative;
}

.new-btn.btn-sm.btn-icon-right.btn-link {
    padding-left: 5px;
    padding-right: 32px;
    position: relative;
}

*[dir='rtl'] .new-btn.btn-sm.btn-icon-right.btn-link {
    padding-left: 5px;
    padding-right: 32px;
    position: relative;
}

.new-btn.btn-sm.btn-icon-left *[class*='ci-'] {
    font-size: 21px;
    top: calc(50% - 10px);
    left: 6px;
    right: auto;
}

.new-btn.btn-sm.btn-icon-right *[class*='ci-'] {
    font-size: 21px;
    top: calc(50% - 10px);
    left: auto;
    right: 6px;
}

*[dir='rtl'] .new-btn.btn-sm.btn-icon-left *[class*='ci-'] {
    font-size: 21px;
    top: calc(50% - 10px);
    left: auto;
    right: 6px;
}

*[dir='rtl'] .new-btn.btn-sm.btn-icon-right *[class*='ci-'] {
    font-size: 21px;
    top: calc(50% - 10px);
    left: 6px;
    right: auto;
}

.new-btn.btn-sm.btn-icon-left.btn-link *[class*='ci-'],
.new-btn.btn-sm.btn-icon-right.btn-link *[class*='ci-'],
*[dir='rtl'] .new-btn.btn-sm.btn-icon-left.btn-link *[class*='ci-'],
*[dir='rtl'] .new-btn.btn-sm.btn-icon-right.btn-link *[class*='ci-'] {
    top: calc(50% - 10px);
}

/* md */
.new-btn.btn-md.btn-icon-left, .new-btn.btn-md.btn-icon-right {
    padding-left: 40px;
    padding-right: 40px;
    position: relative;
}

    .new-btn.btn-md.btn-icon-left.btn-link {
        padding-left: 36px;
        padding-right: 5px;
        position: relative;
    }

*[dir='rtl'] .new-btn.btn-md.btn-icon-left.btn-link {
    padding-left: 5px;
    padding-right: 36px;
    position: relative;
}

.new-btn.btn-md.btn-icon-right.btn-link {
    padding-left: 5px;
    padding-right: 36px;
    position: relative;
}

*[dir='rtl'] .new-btn.btn-md.btn-icon-right.btn-link {
    padding-left: 36px;
    padding-right: 5px;
    position: relative;
}

.new-btn.btn-md.btn-icon-left *[class*='ci-'] {
    font-size: 25px;
    top: calc(50% - 13px);
    left: 7px;
    right: auto;
}

.new-btn.btn-md.btn-icon-right *[class*='ci-'] {
    font-size: 25px;
    top: calc(50% - 13px);
    left: auto;
    right: 7px;
}

*[dir='rtl'] .new-btn.btn-md.btn-icon-left *[class*='ci-'] {
    font-size: 25px;
    top: calc(50% - 13px);
    left: auto;
    right: 7px;
}

*[dir='rtl'].new-btn.btn-md.btn-icon-right *[class*='ci-'] {
    font-size: 25px;
    top: calc(50% - 13px);
    left: 7px;
    right: auto;
}

.new-btn.btn-md.btn-icon-left.btn-link *[class*='ci-'],
.new-btn.btn-md.btn-icon-right.btn-link *[class*='ci-'],
*[dir='rtl'] .new-btn.btn-md.btn-icon-left.btn-link *[class*='ci-'],
*[dir='rtl'] .new-btn.btn-md.btn-icon-right.btn-link *[class*='ci-'] {
    top: calc(50% - 12px);
}
/* lg */
.new-btn.btn-lg.btn-icon-left, .new-btn.btn-lg.btn-icon-right {
    padding-left: 55px;
    padding-right: 55px;
    position: relative;
}

    .new-btn.btn-lg.btn-icon-left.btn-link {
        padding-left: 42px;
        padding-right: 5px;
        position: relative;
    }

*[dir='rtl'] .new-btn.btn-lg.btn-icon-left.btn-link {
    padding-left: 5px;
    padding-right: 42px;
    position: relative;
}

.new-btn.btn-lg.btn-icon-right.btn-link {
    padding-left: 5px;
    padding-right: 42px;
    position: relative;
}

*[dir='rtl'] .new-btn.btn-lg.btn-icon-right.btn-link {
    padding-left: 42px;
    padding-right: 5px;
    position: relative;
}

.new-btn.btn-lg.btn-icon-left *[class*='ci-'] {
    font-size: 28px;
    top: calc(50% - 14px);
    inset-inline-start: var(--gap-12);
    inset-inline-end: auto;
}

.new-btn.btn-lg.btn-icon-right *[class*='ci-'] {
    font-size: 28px;
    top: calc(50% - 14px);
    inset-inline-start: auto;
    inset-inline-end: var(--gap-12);
}


.new-btn.btn-lg.btn-icon-left.btn-link *[class*='ci-'],
.new-btn.btn-lg.btn-icon-right.btn-link *[class*='ci-'],
*[dir='rtl'] .new-btn.btn-lg.btn-icon-left.btn-link *[class*='ci-'],
*[dir='rtl'] .new-btn.btn-lg.btn-icon-right.btn-link *[class*='ci-'] {
    top: calc(50% - 13px);
}
/* xl */
.new-btn.btn-xl.btn-icon-left, .new-btn.btn-xl.btn-icon-right {
    padding-left: 68px;
    padding-right: 68px;
    position: relative;
}

.new-btn.btn-xl.btn-icon-left {
    padding-left: 53px;
    padding-right: 18px;
    position: relative;
}

*[dir='rtl'] .new-btn.btn-xl.btn-icon-left {
    padding-left: 18px;
    padding-right: 53px;
    position: relative;
}

.new-btn.btn-xl.btn-icon-right {
    padding-left: 5px;
    padding-right: 53px;
    position: relative;
}

*[dir='rtl'] .new-btn.btn-xl.btn-icon-right {
    padding-left: 53px;
    padding-right: 5px;
    position: relative;
}

.new-btn.btn-xl.btn-icon-left *[class*='ci-'] {
    font-size: 38px;
    top: calc(50% - 19px);
    left: 8px;
    right: auto;
}

.new-btn.btn-xl.btn-icon-right *[class*='ci-'] {
    font-size: 38px;
    top: calc(50% - 19px);
    left: auto;
    right: 8px;
}

*[dir='rtl'] .new-btn.btn-xl.btn-icon-left *[class*='ci-'] {
    font-size: 38px;
    top: calc(50% - 19px);
    left: auto;
    right: 8px;
}

*[dir='rtl'] .new-btn.btn-xl.btn-icon-right *[class*='ci-'] {
    font-size: 38px;
    top: calc(50% - 19px);
    left: 8px;
    right: auto;
}

.new-btn.btn-xl.btn-icon-left.btn-link *[class*='ci-'],
.new-btn.btn-xl.btn-icon-right.btn-link *[class*='ci-'],
*[dir='rtl'] .new-btn.btn-xl.btn-icon-left.btn-link *[class*='ci-'],
*[dir='rtl'] .new-btn.btn-xl.btn-icon-right.btn-link *[class*='ci-'] {
    top: calc(50% - 17px);
}
/* #endregion Icons */

/* #region Slider Buttons */
.slider-btn {
    display: inline-flex;
    width: 50px;
    height: 50px;
    border: 0px none transparent;
    outline: none;
    border-radius: var(--radius-circle);
    justify-content: center;
    align-items: center;
    font-size: 24px;
    background-color: var(--color-bg-main);
    box-shadow: var(--color-shade-300) 0px 5px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .slider-btn:hover {
        background-color: var(--color-bg-panel);
        transition: background-color 0.2s ease;
    }

    .slider-btn > * {
        display: inline-block;
        width: 1em;
        height: 1em;
        vertical-align: middle;
        font-size: 1em;
        opacity: 1;
        position: relative;
    }

        .slider-btn > *:before {
            top: 0px;
            left: 0px;
            content: '';
            display: inline-block;
            width: 1em;
            height: 1em;
            vertical-align: middle;
            background-image: url("../../Content/Images/ci-pazar-bold-basic.svg");
            background-repeat: no-repeat;
            background-size: 120em 1em;
            font-size: 1em;
            opacity: 1;
            position: absolute;
        }

    .slider-btn.previous > *:before {
        background-position: -8em 0em;
    }

    .slider-btn.next > *:before {
        background-position: -9em 0em;
    }

*[dir='rtl'] .slider-btn.previous > *:before {
    background-position: -9em 0em;
}

*[dir='rtl'] .slider-btn.next > *:before {
    background-position: -8em 0em;
}

@media (max-width: 575px) {
    .slider-btn {
        width: 40px;
        height: 40px;
    }
}

/* #endregion Slider Buttons */
/* #endregion ------------------------------------ Buttons -------------------------------------------- */
/* #region ------------------------------------- Checkboxes ------------------------------------------- */
.checkbox.checkbox-alternate input[type='checkbox'], .checkbox-inline.checkbox-alternate input[type='checkbox'] {
    display: none;
}

.checkbox.checkbox-alternate, .checkbox-inline.checkbox-alternate {
    margin-top: 0px;
    margin-bottom: 0px;
    user-select: none;
    min-height: 0px;
}

.checkbox-inline.checkbox-alternate {
    display: inline-block;
}

    .checkbox.checkbox-alternate label, .checkbox-inline.checkbox-alternate label {
        padding-left: 0px;
        font-weight: 400;
        margin-bottom: 0px;
        min-height: 0px;
        font-size: 14px;
        cursor: pointer;
    }

.checkbox-inline.checkbox-alternate {
    padding-left: 0px;
}

    .checkbox-inline.checkbox-alternate + .checkbox-inline.checkbox-alternate {
        padding-left: 20px;
        margin-left: 0px;
    }

*[dir="rtl"] .checkbox-inline.checkbox-alternate + .checkbox-inline.checkbox-alternate {
    padding-left: 0px;
    margin-left: 0px;
    padding-right: 20px;
    margin-right: 0px;
}

.checkbox.checkbox-alternate i, .checkbox-inline.checkbox-alternate i {
    display: inline-block;
    line-height: 16px;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-4);
    background-color: transparent;
    border: 2px solid #C5C5C5;
    margin-right: 6px;
    position: relative;
}

*[dir="rtl"] .checkbox.checkbox-alternate i, *[dir="rtl"] .checkbox-inline.checkbox-alternate i {
    margin-right: 0px;
    margin-left: 6px;
}

.checkbox.checkbox-alternate i:before, .checkbox-inline.checkbox-alternate i:before {
    top: 0px;
    left: 0px;
    content: '';
    display: none;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-image: url("../../Content/Images/ci-pazar-small-alt.svg");
    background-repeat: no-repeat;
    background-size: 50em 1em;
    background-position: -8em 0em;
    font-size: 12px;
    opacity: 1;
    position: absolute;
}

.checkbox.checkbox-alternate i + *, .checkbox-inline.checkbox-alternate i + * {
    vertical-align: middle;
    line-height: 16px;
}


.checkbox.checkbox-alternate.checkbox-lg i, .checkbox-inline.checkbox-alternate.checkbox-lg i {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-4);
}

    .checkbox.checkbox-alternate.checkbox-lg i:before, .checkbox-inline.checkbox-alternate.checkbox-lg i:before {
        top: 3px;
        left: 3px;
        font-size: 14px;
    }

.checkbox.checkbox-alternate input[type='checkbox']:checked ~ i:before, .checkbox-inline.checkbox-alternate input[type='checkbox']:checked ~ i:before {
    display: inline-block;
}

.checkbox.checkbox-alternate input[type='checkbox']:checked ~ i, .checkbox-inline.checkbox-alternate input[type='checkbox']:checked ~ i {
    background-color: var(--color-bg-primary);
    border: 2px solid transparent;
}

.checkbox.checkbox-alternate input[type='checkbox']:checked:disabled ~ i:before, .checkbox-inline.checkbox-alternate input[type='checkbox']:checked:disabled ~ i:before {
    display: inline-block;
    cursor: not-allowed;
}

.checkbox.checkbox-alternate input[type='checkbox']:checked:disabled ~ i, .checkbox-inline.checkbox-alternate input[type='checkbox']:checked:disabled ~ i {
    opacity: 0.4;
    cursor: not-allowed;
}

.checkbox.checkbox-alternate input[type='checkbox']:disabled ~ i:before, .checkbox-inline.checkbox-alternate input[type='checkbox']:disabled ~ i:before {
    display: none;
    cursor: not-allowed;
}

.checkbox.checkbox-alternate input[type='checkbox']:disabled ~ i, .checkbox-inline.checkbox-alternate input[type='checkbox']:disabled ~ i {
    opacity: 0.4;
    cursor: not-allowed;
}

    .checkbox.checkbox-alternate input[type='checkbox']:disabled ~ i + *, .checkbox-inline.checkbox-alternate input[type='checkbox']:disabled ~ i + * {
        cursor: not-allowed;
    }

.checkbox.checkbox-alternate.checkbox-ellipsis {
    position: relative;
}

    .checkbox.checkbox-alternate.checkbox-ellipsis i {
        position: absolute;
        z-index: 1;
        left: 0px;
    }

    .checkbox.checkbox-alternate.checkbox-ellipsis span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 22px;
        padding-top: 1px;
    }

    .checkbox.checkbox-alternate.checkbox-ellipsis.checkbox-lg span {
        padding-left: 30px;
        padding-top: 5px;
    }


*[dir='rtl'] .checkbox.checkbox-alternate.checkbox-ellipsis span {
    padding-left: 0px;
    padding-right: 22px;
}

*[dir='rtl'] .checkbox.checkbox-alternate.checkbox-ellipsis.checkbox-lg span {
    padding-left: 0px;
    padding-right: 30px;
}

*[dir='rtl'] .checkbox.checkbox-alternate.checkbox-ellipsis i {
    left: auto;
    right: 0px;
}

.checkbox.checkbox-alternate.checkbox-lg.checkbox-block label {
    position: relative
}

.checkbox.checkbox-alternate.checkbox-lg.checkbox-block i {
    position: absolute;
    top: 0px;
    left: 0px;
}

*[dir='rtl'] .checkbox.checkbox-alternate.checkbox-lg.checkbox-block i {
    right: 0px;
    left: auto;
}

.checkbox.checkbox-alternate.checkbox-lg.checkbox-block label > span {
    margin-inline-start: 40px;
    display: inline-block;
    line-height: 1.4em;
    margin-top: -5px;
}



.checkbox.checkbox-alternate.flex-checkbox label {
    display: flex;
}

.checkbox.checkbox-alternate.flex-checkbox i {
    width: 18px;
    height: 18px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

    .checkbox.checkbox-alternate.flex-checkbox i:before {
        position: static;
    }

    .checkbox.checkbox-alternate.flex-checkbox i + * {
        display: inline-block;
        padding-block-start: var(--gap-1);
        line-height: 120%;
    }

.checkbox.checkbox-alternate.flex-checkbox .validation {
    display: none;
}

.checkbox.checkbox-alternate.flex-checkbox.has-error .validation {
    display: block;
    color: var(--color-text-danger);
    font-size: 12px;
    font-weight: 500;
    line-height: 130%;
    margin-block-start: var(--gap-2);
    margin-inline-start: var(--gap-24);
}

.checkbox.checkbox-alternate.flex-checkbox.has-error i {
    border: 2px solid var(--color-border-danger);
}

.checkbox.checkbox-alternate.flex-checkbox.has-error label {
    color: var(--color-text-basic);
}

/* #region Rounded checkbox */
.checkbox-rounded {
    display: inline-block;
    flex-shrink: 0;
}

    .checkbox-rounded input[type='checkbox'] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .checkbox-rounded i {
        display: flex;
        width: 28px;
        height: 28px;
        border-radius: var(--radius-circle);
        border: 2px solid var(--color-border-basic);
        background: var(--color-bg-main);
        position: relative;
        cursor: pointer;
    }

    .checkbox-rounded input[type='checkbox']:checked ~ i {
        background: var(--color-bg-primary);
        border: 0px none transparent;
    }

        .checkbox-rounded input[type='checkbox']:checked ~ i:before {
            left: 50%;
            inset-block-start: 50%;
            transform: translate(-50%, -50%);
            content: '';
            width: 1em;
            height: 1em;
            background-image: url(../../Content/Images/ci-pazar-small-alt.svg);
            background-repeat: no-repeat;
            background-size: 50em 1em;
            background-position: -8em 0em;
            font-size: 14px;
            opacity: 1;
            position: absolute;
            z-index: 1;
        }

*[dir='rtl'] .checkbox-rounded input[type='checkbox']:checked ~ i:before {
    left: auto;
    right: -2% !important;
    inset-block-start: 50%;
    transform: translate(-50%, -50%);
}


.checkbox-rounded input[type='checkbox']:disabled ~ i {
    opacity: 0.6;
    cursor: not-allowed;
}

/* #endregion Rounded checkbox */
/* #endregion ---------------------------------- Checkboxes ------------------------------------------- */
/* #region ------------------------------------ Radio button ------------------------------------------ */
.radio-inline, .checkbox-inline {
    cursor: default;
}

    .radio.radio-alternate input[type='radio'], .radio-inline.radio-alternate input[type='radio'] {
        display: none;
    }

    .radio.radio-alternate, .radio-inline.radio-alternate {
        margin-top: 0px;
        margin-bottom: 0px;
        user-select: none;
        min-height: 0px;
    }

        .radio.radio-alternate label, .radio-inline.radio-alternate label {
            padding-left: 0px;
            font-weight: 400;
            margin-bottom: 0px;
            min-height: 0px;
            cursor: pointer;
        }

    .radio-inline.radio-alternate {
        padding-left: 0px;
    }

        .radio-inline.radio-alternate + .radio-inline.radio-alternate {
            padding-left: 20px;
            margin-left: 0px;
        }

        .radio.radio-alternate i, .radio-inline.radio-alternate i {
            display: inline-block;
            line-height: 16px;
            vertical-align: middle;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: transparent;
            border: 2px solid #C5C5C5;
            margin-right: 6px;
            position: relative;
        }

        .radio.radio-alternate.radio-lg i, .radio-inline.radio-alternate.radio-lg i {
            width: 24px;
            height: 24px;
            border: 2px solid #C5C5C5;
        }

        .radio.radio-alternate i:before, .radio-inline.radio-alternate i:before {
            top: 3px;
            left: 3px;
            content: '';
            display: none;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: var(--color-bg-primary);
            position: absolute;
        }

        .radio.radio-alternate.radio-lg i:before, .radio-inline.radio-alternate.radio-lg i:before {
            top: 4px;
            left: 4px;
            width: 8px;
            height: 8px;
        }

        .radio.radio-alternate i + *, .radio-inline.radio-alternate i + * {
            vertical-align: middle;
            line-height: 17px;
        }

        .radio.radio-alternate input[type='radio']:checked ~ i:before, .radio-inline.radio-alternate input[type='radio']:checked ~ i:before {
            display: block;
        }

        .radio.radio-alternate input[type='radio']:checked ~ i, .radio-inline.radio-alternate input[type='radio']:checked ~ i {
            border: 4px solid var(--color-border-primary);
        }

        .radio.radio-alternate input[type='radio']:checked:disabled ~ i:before, .radio-inline.radio-alternate input[type='radio']:checked:disabled ~ i:before {
            display: inline-block;
            cursor: not-allowed;
        }

        .radio.radio-alternate input[type='radio']:checked:disabled ~ i, .radio-inline.radio-alternate input[type='radio']:checked:disabled ~ i {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .radio.radio-alternate input[type='radio']:disabled ~ i:before, .radio-inline.radio-alternate input[type='radio']:disabled ~ i:before {
            display: none;
            cursor: not-allowed;
        }

        .radio.radio-alternate input[type='radio']:disabled ~ i, .radio-inline.radio-alternate input[type='radio']:disabled ~ i {
            opacity: 0.4;
            cursor: not-allowed;
        }

            .radio.radio-alternate input[type='radio']:disabled ~ i + *, .radio-inline.radio-alternate input[type='radio']:disabled ~ i + * {
                cursor: not-allowed;
            }

*[dir='rtl'] .radio.radio-alternate i, *[dir='rtl'] .radio-inline.radio-alternate i {
    margin-right: 0px;
    margin-left: 6px;
}

*[dir='rtl'] .radio-inline.radio-alternate + .radio-inline.radio-alternate {
    padding-left: 0px;
    padding-right: 20px;
    margin-left: 0px;
}
/* #endregion --------------------------------- Radio button ------------------------------------------ */
/* #region -------------------------------------- Switches -------------------------------------------- */
.switch label, .switch-inline label {
    font-weight: 400;
    font-size: 14px;
    user-select: none;
    cursor: pointer;
    clear: both;
    margin-bottom: 0px;
}

.switch-inline {
    display: inline-block;
    vertical-align: middle;
}

    .switch-inline + .switch-inline {
        margin-left: 30px;
    }

    .switch label:after, .switch-inline label:after {
        content: '';
        display: table;
        clear: both;
    }

    .switch.switch-block label, .switch-inline.switch-block label {
        display: block;
        width: 100%;
        cursor: pointer;
    }

    .switch.switch-block i, .switch-inline.switch-block i {
        float: right;
    }

*[dir='rtl'] .switch.switch-block i, *[dir='rtl'] .switch-inline.switch-block i {
    float: left;
}

.switch.switch-block span, .switch-inline.switch-block span {
    float: left;
    padding-left: 0px;
    padding-top: 1px;
}

*[dir='rtl'] .switch.switch-block span, *[dir='rtl'] .switch-inline.switch-block span {
    float: right;
}

.switch input[type='checkbox'], .switch-inline input[type='checkbox'],
.switch input[type='radio'], .switch-inline input[type='radio'] {
    display: none;
}

.switch i, .switch-inline i {
    display: inline-block;
    height: 24px;
    width: 40px;
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #C5C5C5;
    vertical-align: middle;
    border-radius: var(--radius-16);
    overflow: hidden;
    position: relative;
}

.switch input[type='checkbox']:checked ~ i, .switch-inline input[type='checkbox']:checked ~ i,
.switch input[type='radio']:checked ~ i, .switch-inline input[type='radio']:checked ~ i {
    border: 0px none transparent;
}

.switch i:before, .switch-inline i:before {
    display: block;
    content: '';
    height: 24px;
    width: 100px;
    padding-top: 4px;
    text-align: center;
    word-spacing: 40px;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    top: 0px;
    left: -47px;
    background-color: rgba(2, 136, 209, 0);
    -webkit-transition: background-color 0.2s ease, left 0.2s ease;
    transition: background-color 0.2s ease, left 0.2s ease;
}

.switch i:after, .switch-inline i:after {
    display: block;
    content: '';
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background-color: #C5C5C5;
    position: absolute;
    left: 2px;
    top: 2px;
    -webkit-transition: left 0.1s ease;
    transition: left 0.1s ease;
}

*[dir='rtl'] .switch i:after, *[dir='rtl'] .switch-inline i:after {
    left: 18px;
}

.switch input[type='checkbox']:checked ~ i:before, .switch-inline input[type='checkbox']:checked ~ i:before,
.switch input[type='radio']:checked ~ i:before, .switch-inline input[type='radio']:checked ~ i:before {
    display: block;
    content: '';
    height: 24px;
    width: 100px;
    padding-top: 4px;
    text-align: center;
    word-spacing: 40px;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    top: 0px;
    left: -4px;
    background-color: var(--color-bg-primary);
    -webkit-transition: background-color 0.1s ease, left 0.1s ease;
    transition: background-color 0.1s ease, left 0.1s ease;
}

.switch input[type='checkbox']:checked ~ i:after, .switch-inline input[type='checkbox']:checked ~ i:after,
.switch input[type='radio']:checked ~ i:after, .switch-inline input[type='radio']:checked ~ i:after {
    display: block;
    content: '';
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: #ffffff;
    position: absolute;
    left: 19px;
    top: 3px;
    -webkit-transition: left 0.1s ease;
    transition: left 0.1s ease;
}

*[dir='rtl'] .switch input[type='checkbox']:checked ~ i:after, *[dir='rtl'] .switch-inline input[type='checkbox']:checked ~ i:after,
*[dir='rtl'] .switch input[type='radio']:checked ~ i:after, *[dir='rtl'] .switch-inline input[type='radio']:checked ~ i:after {
    left: 3px;
}

.switch input[type='checkbox']:disabled ~ i:before, .switch-inline input[type='checkbox']:disabled ~ i:before,
.switch input[type='radio']:disabled ~ i:before, .switch-inline input[type='radio']:disabled ~ i:before,
.switch input[type='checkbox']:disabled:checked ~ i:before, .switch-inline input[type='checkbox']:disabled:checked ~ i:before,
.switch input[type='radio']:disabled:checked ~ i:before, .switch-inline input[type='radio']:disabled:checked ~ i:before {
    opacity: 0.4;
}

.switch input[type='checkbox']:disabled ~ *, .switch-inline input[type='checkbox']:disabled ~ *,
.switch input[type='radio']:disabled ~ *, .switch-inline input[type='radio']:disabled ~ * {
    opacity: 0.4;
    cursor: not-allowed;
}

.switch i + *, .switch-inline i + * {
    vertical-align: middle;
    line-height: 24px;
    padding-left: 10px;
}

*[dir='rtl'] .switch i + *, *[dir='rtl'] .switch-inline i + * {
    padding-left: 0px;
    padding-right: 10px;
}

*[dir='rtl'] .switch-inline + .switch-inline {
    margin-left: 0px;
    margin-right: 30px;
}
/* #endregion ----------------------------------- Switches -------------------------------------------- */
/* #region ----------------------------------- Range Sliders ------------------------------------------ */
/*
input[type='range'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0.4em 0;
    background-color: transparent;
}

    input[type='range']:focus {
        outline: none;
    }

    input[type='range']::-webkit-slider-runnable-track {
        background-color: #C4C4C4;
        height: 1px;
        margin: 0.4em 0;
        border-radius: var(--radius-4);
    }

    input[type='range']::-moz-range-track {
        background-color: #C4C4C4;
        height: 1px;
        border-radius: var(--radius-4);
    }

    input[type="range"]::-moz-range-progress {
        background-color: var(--color-bg-primary);
        height: 1px;
    }


    input[type='range']::-moz-focus-outer {
        border: 0;
    }

    input[type='range']::-ms-track {
        background-color: #C4C4C4;
        height: 1px;
        margin: 0.1em 0;
        border-radius: var(--radius-4);
    }

    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--color-bg-primary);
        text-align: center;
        width: 14px;
        height: 14px;
        border: 0px none transparent;
        border-radius: 50%;
        cursor: pointer;
        box-sizing: border-box;
        margin-top: -7px;
    }

    input[type='range']::-moz-range-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--color-bg-primary);
        text-align: center;
        width: 14px;
        height: 14px;
        border: 0px none transparent;
        border-radius: 50%;
        cursor: pointer;
        box-sizing: border-box;
    }

    input[type='range']::-ms-thumb {
        margin: 0;
    }

    input[type='range']::-ms-fill-lower {
        background: #eb613f !important;
    }

    input[type='range']::-ms-fill-upper {
        background: #eb613f !important;
    }
*/
/* #region Iute Slider */
.slider-block {
    width: 100%;
}

.slider-track {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: var(--radius-8);
    background: var(--color-bg-inputs-transparent);
}

.slider-fill {
    position: absolute;
    top: 0;
    /* ГЛАВНОЕ ИСПРАВЛЕНИЕ: inset-inline-start автоматически 
       становится left: 0 в LTR и right: 0 в RTL */
    inset-inline-start: 0;
    height: 100%;
    border-radius: var(--radius-8);
    background: var(--color-bg-primary);
    pointer-events: none;
    /* Формула остается прежней, так как +12px теперь "прижимается" к правильному краю */
    width: calc((100% - 24px) * var(--value-percent, 50) / 100 + 12px);
}

.range-slider {
    position: absolute;
    top: 0;
    /* Тоже меняем на логическое свойство */
    inset-inline-start: 0;
    width: 100%;
    height: 8px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    z-index: 1;
}

    .range-slider::-webkit-slider-runnable-track {
        width: 100%;
        height: 8px;
        background: transparent;
        border: none;
    }
    /* -- Button -- */
    .range-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        height: 24px;
        width: 24px;
        border-radius: var(--radius-circle);
        background: var(--color-bg-primary);
        border: none;
        cursor: pointer;
        margin-block-start: -8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    /* Firefox */
    .range-slider::-moz-range-track {
        width: 100%;
        height: 8px;
        background: transparent;
        border: none;
    }

    .range-slider::-moz-range-thumb {
        height: 24px;
        width: 24px;
        border-radius: var(--radius-circle);
        background: var(--color-bg-primary);
        border: none;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-block-start: var(--gap-12);
    font-size: 14px;
    color: var(--color-text-basic);
    font-weight: 500;
}

    /* ИСПРАВЛЕНИЕ ЦИФР: заставляем числа читаться слева направо,
   но при этом flex-контейнер продолжит правильно менять их местами (min справа, max слева) */
    .slider-labels span {
        direction: ltr;
        unicode-bidi: isolate;
        display: inline-block;
    }
/* #endregion Iute Slider */
/* #endregion ------------------------------- /Range Sliders ------------------------------------------ */
/* #region ----------------------------- JS Plugin Range Sliders -------------------------------------- */
.asRange {
    background-color: #EBEBEB;
    width: 100%;
}

    .asRange .asRange-selected {
        background-color: rgba(93, 170, 128, 0.5);
    }

    .asRange .asRange-pointer {
        cursor: pointer;
    }

        .asRange .asRange-pointer:before {
            background: var(--color-bg-primary);
        }

        .asRange .asRange-pointer .asRange-tip {
            background-color: var(--color-bg-primary);
            border: var(--color-border-primary);
            font-family: 'Manrope', Arial;
            font-weight: 500;
        }

            .asRange .asRange-pointer .asRange-tip:before {
                background-color: var(--color-bg-primary);
            }
/* #endregion ------------------------- /JS Plugin Range Sliders -------------------------------------- */
/* #region ------------------------------------- Textboxes -------------------------------------------- */
.textbox {
    display: block;
    width: 100%;
}

.textbox-inline {
    display: inline-block;
    width: auto;
}

.textbox, .textbox-inline {
    height: 40px;
    vertical-align: middle;
    position: relative;
    text-align: left;
}

body .container .form-horizontal .textbox input[type='text'] {
    width: 100% !important;
}

.textbox input[type='text'], .textbox-inline input[type='text'],
.textbox input[type='email'], .textbox-inline input[type='email'],
.textbox input[type='password'], .textbox-inline input[type='password'],
.textbox input[type='tel'], .textbox-inline input[type='tel'] {
    display: inline-block;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: var(--color-text-basic);
    padding-left: 10px !important;
    padding-right: 10px !important;
    border: 0px none transparent;
    border-radius: var(--radius-4);
    background-color: #F2F2F2;
    box-shadow: none;
    font-weight: 400;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.textbox.textbox-inversed input[type='text'], .textbox-inline.textbox-inversed input[type='text'],
.textbox.textbox-inversed input[type='email'], .textbox-inline.textbox-inversed input[type='email'],
.textbox.textbox-inversed input[type='password'], .textbox-inline.textbox-inversed input[type='password'],
.textbox.textbox-inversed input[type='tel'], .textbox-inline.textbox-inversed input[type='tel'] {
    color: var(--color-text-basic);
    background-color: #FFFFFF;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.textbox input[type='text']::-webkit-input-placeholder, .textbox-inline input[type='text']::-webkit-input-placeholder,
.textbox input[type='email']::-webkit-input-placeholder, .textbox-inline input[type='email']::-webkit-input-placeholder,
.textbox input[type='password']::-webkit-input-placeholder, .textbox-inline input[type='password']::-webkit-input-placeholder,
.textbox input[type='tel']::-webkit-input-placeholder, .textbox-inline input[type='tel']::-webkit-input-placeholder {
    color: var(--color-text-muted);
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.textbox input[type='text']::-moz-placeholder, .textbox-inline input[type='text']::-moz-placeholder,
.textbox input[type='email']::-moz-placeholder, .textbox-inline input[type='email']::-moz-placeholder,
.textbox input[type='password']::-moz-placeholder, .textbox-inline input[type='password']::-moz-placeholder,
.textbox input[type='tel']::-moz-placeholder, .textbox-inline input[type='tel']::-moz-placeholder {
    color: var(--color-text-muted);
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.textbox input[type='text']:-moz-placeholder, .textbox-inline input[type='text']:-moz-placeholder,
.textbox input[type='email']:-moz-placeholder, .textbox-inline input[type='email']:-moz-placeholder,
.textbox input[type='password']:-moz-placeholder, .textbox-inline input[type='password']:-moz-placeholder,
.textbox input[type='tel']:-moz-placeholder, .textbox-inline input[type='tel']:-moz-placeholder {
    color: var(--color-text-muted);
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.textbox input[type='text']:-ms-input-placeholder, .textbox-inline input[type='text']:-ms-input-placeholder,
.textbox input[type='email']:-ms-input-placeholder, .textbox-inline input[type='email']:-ms-input-placeholder,
.textbox input[type='password']:-ms-input-placeholder, .textbox-inline input[type='password']:-ms-input-placeholder,
.textbox input[type='tel']:-ms-input-placeholder, .textbox-inline input[type='tel']:-ms-input-placeholder {
    color: var(--color-text-muted);
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}


.textbox:hover input[type='text'], .textbox-inline:hover input[type='text'],
.textbox:hover input[type='email'], .textbox-inline:hover input[type='email'],
.textbox:hover input[type='password'], .textbox-inline:hover input[type='password'],
.textbox:hover input[type='tel'], .textbox-inline:hover input[type='tel'] {
    background-color: #F5F5F5;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.textbox.textbox-inversed:hover input[type='text'], .textbox-inline.textbox-inversed:hover input[type='text'],
.textbox.textbox-inversed:hover input[type='email'], .textbox-inline.textbox-inversed:hover input[type='email'],
.textbox.textbox-inversed:hover input[type='password'], .textbox-inline.textbox-inversed:hover input[type='password'],
.textbox.textbox-inversed:hover input[type='tel'], .textbox-inline.textbox-inversed:hover input[type='tel'] {
    background-color: #FDFDFD;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.textbox input[type='text']:focus, .textbox-inline input[type='text']:focus,
.textbox input[type='email']:focus, .textbox-inline input[type='email']:focus,
.textbox input[type='password']:focus, .textbox-inline input[type='password']:focus,
.textbox input[type='tel']:focus, .textbox-inline input[type='tel']:focus {
    outline: none;
    box-shadow: none;
    background-color: #F2F2F2;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.textbox.textbox-inversed input[type='text']:focus, .textbox-inline.textbox-inversed input[type='text']:focus,
.textbox.textbox-inversed input[type='email']:focus, .textbox-inline.textbox-inversed input[type='email']:focus,
.textbox.textbox-inversed input[type='password']:focus, .textbox-inline.textbox-inversed input[type='password']:focus,
.textbox.textbox-inversed input[type='tel']:focus, .textbox-inline.textbox-inversed input[type='tel']:focus {
    outline: none;
    box-shadow: none;
    background-color: #FFFFFF;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.textbox input[type='text']:disabled, .textbox-inline input[type='text']:disabled,
.textbox input[type='email']:disabled, .textbox-inline input[type='email']:disabled,
.textbox input[type='password']:disabled, .textbox-inline input[type='password']:disabled,
.textbox input[type='tel']:disabled, .textbox-inline input[type='tel']:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .textbox input[type='text']:disabled::-webkit-input-placeholder, .textbox-inline input[type='text']:disabled::-webkit-input-placeholder,
    .textbox input[type='email']:disabled::-webkit-input-placeholder, .textbox-inline input[type='email']:disabled::-webkit-input-placeholder,
    .textbox input[type='password']:disabled::-webkit-input-placeholder, .textbox-inline input[type='password']:disabled::-webkit-input-placeholder,
    .textbox input[type='tel']:disabled::-webkit-input-placeholder, .textbox-inline input[type='tel']:disabled::-webkit-input-placeholder {
        color: var(--color-text-muted);
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .textbox input[type='text']:disabled::-moz-placeholder, .textbox-inline input[type='text']:disabled::-moz-placeholder,
    .textbox input[type='email']:disabled::-moz-placeholder, .textbox-inline input[type='email']:disabled::-moz-placeholder,
    .textbox input[type='password']:disabled::-moz-placeholder, .textbox-inline input[type='password']:disabled::-moz-placeholder,
    .textbox input[type='tel']:disabled::-moz-placeholder, .textbox-inline input[type='tel']:disabled::-moz-placeholder {
        color: var(--color-text-muted);
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .textbox input[type='text']:disabled:-moz-placeholder, .textbox-inline input[type='text']:disabled:-moz-placeholder,
    .textbox input[type='email']:disabled:-moz-placeholder, .textbox-inline input[type='email']:disabled:-moz-placeholder,
    .textbox input[type='password']:disabled:-moz-placeholder, .textbox-inline input[type='password']:disabled:-moz-placeholder,
    .textbox input[type='tel']:disabled:-moz-placeholder, .textbox-inline input[type='tel']:disabled:-moz-placeholder {
        color: var(--color-text-muted);
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .textbox input[type='text']:disabled:-ms-input-placeholder, .textbox-inline input[type='text']:disabled:-ms-input-placeholder,
    .textbox input[type='email']:disabled:-ms-input-placeholder, .textbox-inline input[type='email']:disabled:-ms-input-placeholder,
    .textbox input[type='password']:disabled:-ms-input-placeholder, .textbox-inline input[type='password']:disabled:-ms-input-placeholder,
    .textbox input[type='tel']:disabled:-ms-input-placeholder, .textbox-inline input[type='tel']:disabled:-ms-input-placeholder {
        color: var(--color-text-muted);
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: rgba(235, 238, 240, 1);
    }
}

.textbox input[type='text']:-webkit-autofill, .textbox-inline input[type='text']:-webkit-autofill,
.textbox input[type='email']:-webkit-autofill, .textbox-inline input[type='email']:-webkit-autofill,
.textbox input[type='password']:-webkit-autofill, .textbox-inline input[type='password']:-webkit-autofill,
.textbox input[type='tel']:-webkit-autofill, .textbox-inline input[type='tel']:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}
/* #region Textbox with Label */
.textbox.textbox-labeled, .textbox-inline.textbox-labeled {
    height: 58px;
}

    .textbox.textbox-labeled input[type='text'], .textbox-inline.textbox-labeled input[type='text'],
    .textbox.textbox-labeled input[type='email'], .textbox-inline.textbox-labeled input[type='email'],
    .textbox.textbox-labeled input[type='password'], .textbox-inline.textbox-labeled input[type='password'],
    .textbox.textbox-labeled input[type='tel'], .textbox-inline.textbox-labeled input[type='tel'] {
        padding-top: 22px;
        font-size: 18px;
        width: 100%;
    }


.textbox.textbox-labeled-sm input[type='text'], .textbox-inline.textbox-labeled-sm input[type='text'],
.textbox.textbox-labeled-sm input[type='email'], .textbox-inline.textbox-labeled-sm input[type='email'],
.textbox.textbox-labeled-sm input[type='password'], .textbox-inline.textbox-labeled-sm input[type='password'],
.textbox.textbox-labeled-sm input[type='tel'], .textbox-inline.textbox-labeled-sm input[type='tel'] {
    padding-top: 15px;
    font-size: 16px;
}

.textbox.textbox-labeled label, .textbox-inline.textbox-labeled label {
    color: var(--color-text-muted);
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 14px;
    margin-bottom: 0px;
    font-weight: 400;
    text-transform: none;
    white-space: nowrap;
    display: block;
    max-width: calc(100% - 22px);
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 15px;
}


.textbox.textbox-labeled-sm label, .textbox-inline.textbox-labeled-sm label {
    color: var(--color-text-muted);
    position: absolute;
    top: 3px;
    left: 10px;
    font-size: 12px;
    margin-bottom: 0px;
    font-weight: 400;
    text-transform: none;
    white-space: nowrap;
    display: block;
    max-width: calc(100% - 22px);
    overflow: hidden;
    text-overflow: ellipsis;
}


*[dir='rtl'] .textbox.textbox-labeled label, *[dir='rtl'] .textbox-inline.textbox-labeled label {
    left: auto;
    right: 10px;
}


*[dir='rtl'] .textbox.textbox-labeled-sm label, *[dir='rtl'] .textbox-inline.textbox-labeled-sm label {
    left: auto;
    right: 10px;
}

.textbox.textbox-labeled-sm *[class*='ci-'].addon-l ~ label, .textbox-inline.textbox-labeled-sm *[class*='ci-'].addon-l ~ label,
.textbox.textbox-labeled *[class*='ci-'].addon-l ~ label, .textbox-inline.textbox-labeled *[class*='ci-'].addon-l ~ label,
.textbox.textbox-labeled-sm[class*='has-'] .validation-icon-l ~ label, .textbox-inline.textbox-labeled-sm[class*='has-'] .validation-icon-l ~ label,
.textbox.textbox-labeled[class*='has-'] .validation-icon-l ~ label, .textbox-inline.textbox-labeled[class*='has-'] .validation-icon-l ~ label {
    left: 40px;
    max-width: calc(100% - 48px);
}

*[dir='rtl'] .textbox.textbox-labeled-sm *[class*='ci-'].addon-l ~ label, *[dir='rtl'] .textbox-inline.textbox-labeled-sm *[class*='ci-'].addon-l ~ label,
*[dir='rtl'] .textbox.textbox-labeled *[class*='ci-'].addon-l ~ label, *[dir='rtl'] .textbox-inline.textbox-labeled *[class*='ci-'].addon-l ~ label,
*[dir='rtl'] .textbox.textbox-labeled-sm[class*='has-'] .validation-icon-l ~ label, *[dir='rtl'] .textbox-inline.textbox-labeled-sm[class*='has-'] .validation-icon-l ~ label,
*[dir='rtl'] .textbox.textbox-labeled[class*='has-'] .validation-icon-l ~ label, *[dir='rtl'] .textbox-inline.textbox-labeled[class*='has-'] .validation-icon-l ~ label {
    left: auto;
    right: 40px;
    max-width: calc(100% - 48px);
}

.textbox.textbox-labeled-sm *[class*='ci-'].addon-r ~ label, .textbox-inline.textbox-labeled-sm *[class*='ci-'].addon-r ~ label,
.textbox.textbox-labeled *[class*='ci-'].addon-r ~ label, .textbox-inline.textbox-labeled *[class*='ci-'].addon-r ~ label,
.textbox.textbox-labeled-sm[class*='has-'] .validation-icon-r ~ label, .textbox-inline.textbox-labeled-sm[class*='has-'] .validation-icon-r ~ label,
.textbox.textbox-labeled[class*='has-'] .validation-icon-r ~ label, .textbox-inline.textbox-labeled[class*='has-'] .validation-icon-r ~ label {
    max-width: calc(100% - 48px);
}

.textbox.textbox-labeled-sm *[class*='ci-'].addon-l + *[class*='ci-'].addon-r ~ label, .textbox.textbox-labeled-sm *[class*='ci-'].addon-r + *[class*='ci-'].addon-l ~ label,
.textbox-inline.textbox-labeled-sm *[class*='ci-'].addon-l + *[class*='ci-'].addon-r ~ label, .textbox-inline.textbox-labeled-sm *[class*='ci-'].addon-r + *[class*='ci-'].addon-l ~ label,
.textbox.textbox-labeled *[class*='ci-'].addon-l + *[class*='ci-'].addon-r ~ label, .textbox.textbox-labeled *[class*='ci-'].addon-r + *[class*='ci-'].addon-l ~ label,
.textbox-inline.textbox-labeled *[class*='ci-'].addon-l + *[class*='ci-'].addon-r ~ label, .textbox-inline.textbox-labeled *[class*='ci-'].addon-r + *[class*='ci-'].addon-l ~ label,
.textbox.textbox-labeled-sm[class*='has-'] *[class*='ci-'].addon-l + .validation-icon-r ~ label, .textbox.textbox-labeled-sm[class*='has-'] .validation-icon-r + *[class*='ci-'].addon-l ~ label,
.textbox-inline.textbox-labeled-sm[class*='has-'] *[class*='ci-'].addon-l + .validation-icon-r ~ label, .textbox-inline.textbox-labeled-sm[class*='has-'] .validation-icon-r + *[class*='ci-'].addon-l ~ label,
.textbox.textbox-labeled-sm[class*='has-'] *[class*='ci-'].addon-r + .validation-icon-l ~ label, .textbox.textbox-labeled-sm[class*='has-'] .validation-icon-l + *[class*='ci-'].addon-r ~ label,
.textbox-inline.textbox-labeled-sm[class*='has-'] *[class*='ci-'].addon-r + .validation-icon-l ~ label, .textbox-inline.textbox-labeled-sm[class*='has-'] .validation-icon-l + *[class*='ci-'].addon-r ~ label,
.textbox.textbox-labeled[class*='has-'] *[class*='ci-'].addon-l + .validation-icon-r ~ label, .textbox.textbox-labeled[class*='has-'] .validation-icon-r + *[class*='ci-'].addon-l ~ label,
.textbox-inline.textbox-labeled[class*='has-'] *[class*='ci-'].addon-l + .validation-icon-r ~ label, .textbox-inline.textbox-labeled[class*='has-'] .validation-icon-r + *[class*='ci-'].addon-l ~ label,
.textbox.textbox-labeled[class*='has-'] *[class*='ci-'].addon-r + .validation-icon-l ~ label, .textbox.textbox-labeled[class*='has-'] .validation-icon-l + *[class*='ci-'].addon-r ~ label,
.textbox-inline.textbox-labeled[class*='has-'] *[class*='ci-'].addon-r + .validation-icon-l ~ label, .textbox-inline.textbox-labeled[class*='has-'] .validation-icon-l + *[class*='ci-'].addon-r ~ label {
    max-width: calc(100% - 78px);
}



/* #endregion Textbox with Label */
/* #region Textbox addons */
.textbox *[class*='ci-'].addon-l, .textbox-inline *[class*='ci-'].addon-l {
    left: 7px;
    right: auto;
}

*[dir='rtl'] .textbox *[class*='ci-'].addon-l, *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-l {
    left: auto;
    right: 7px;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.textbox *[class*='ci-'].addon-r, .textbox-inline *[class*='ci-'].addon-r {
    right: 7px;
    left: auto;
}

*[dir='rtl'] .textbox *[class*='ci-'].addon-r, *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-r {
    right: auto;
    left: 7px;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.textbox *[class*='ci-'].addon-l, .textbox-inline *[class*='ci-'].addon-l,
.textbox *[class*='ci-'].addon-r, .textbox-inline *[class*='ci-'].addon-r {
    position: absolute;
    top: calc(50% - 0.5em);
    font-size: 26px;
    z-index: 1;
}

    .textbox *[class*='ci-'].addon-l ~ input[type='text'], .textbox-inline *[class*='ci-'].addon-l ~ input[type='text'],
    .textbox *[class*='ci-'].addon-l ~ input[type='email'], .textbox-inline *[class*='ci-'].addon-l ~ input[type='email'],
    .textbox *[class*='ci-'].addon-l ~ input[type='password'], .textbox-inline *[class*='ci-'].addon-l ~ input[type='password'],
    .textbox *[class*='ci-'].addon-l ~ input[type='tel'], .textbox-inline *[class*='ci-'].addon-l ~ input[type='tel'] {
        padding-left: 40px !important;
    }


*[dir='rtl'] .textbox *[class*='ci-'].addon-l ~ input[type='text'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-l ~ input[type='text'],
*[dir='rtl'] .textbox *[class*='ci-'].addon-l ~ input[type='email'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-l ~ input[type='email'],
*[dir='rtl'] .textbox *[class*='ci-'].addon-l ~ input[type='password'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-l ~ input[type='password'],
*[dir='rtl'] .textbox *[class*='ci-'].addon-l ~ input[type='tel'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-l ~ input[type='tel'] {
    padding-right: 40px !important;
    padding-left: 10px !important;
}

.textbox *[class*='ci-'].addon-r ~ input[type='text'], .textbox-inline *[class*='ci-'].addon-r ~ input[type='text'],
.textbox *[class*='ci-'].addon-r ~ input[type='email'], .textbox-inline *[class*='ci-'].addon-r ~ input[type='email'],
.textbox *[class*='ci-'].addon-r ~ input[type='password'], .textbox-inline *[class*='ci-'].addon-r ~ input[type='password'],
.textbox *[class*='ci-'].addon-r ~ input[type='tel'], .textbox-inline *[class*='ci-'].addon-r ~ input[type='tel'] {
    padding-right: 40px !important;
}

*[dir='rtl'] .textbox *[class*='ci-'].addon-r ~ input[type='text'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-r ~ input[type='text'],
*[dir='rtl'] .textbox *[class*='ci-'].addon-r ~ input[type='email'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-r ~ input[type='email'],
*[dir='rtl'] .textbox *[class*='ci-'].addon-r ~ input[type='password'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-r ~ input[type='password'],
*[dir='rtl'] .textbox *[class*='ci-'].addon-r ~ input[type='tel'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-r ~ input[type='tel'] {
    padding-left: 40px !important;
    padding-right: 10px !important;
}

*[dir='rtl'] .textbox *[class*='ci-'].addon-r + *[class*='ci-'].addon-l ~ input[type='text'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-r + *[class*='ci-'].addon-l ~ input[type='text'],
*[dir='rtl'] .textbox *[class*='ci-'].addon-r + *[class*='ci-'].addon-l ~ input[type='email'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-r + *[class*='ci-'].addon-l ~ input[type='email'],
*[dir='rtl'] .textbox *[class*='ci-'].addon-r + *[class*='ci-'].addon-l ~ input[type='password'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-r + *[class*='ci-'].addon-l ~ input[type='password'],
*[dir='rtl'] .textbox *[class*='ci-'].addon-r + *[class*='ci-'].addon-l ~ input[type='tel'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-r + *[class*='ci-'].addon-l ~ input[type='tel'],
*[dir='rtl'] .textbox *[class*='ci-'].addon-l + *[class*='ci-'].addon-r ~ input[type='text'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-l + *[class*='ci-'].addon-r ~ input[type='text'],
*[dir='rtl'] .textbox *[class*='ci-'].addon-l + *[class*='ci-'].addon-r ~ input[type='email'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-l + *[class*='ci-'].addon-r ~ input[type='email'],
*[dir='rtl'] .textbox *[class*='ci-'].addon-l + *[class*='ci-'].addon-r ~ input[type='password'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-l + *[class*='ci-'].addon-r ~ input[type='password'],
*[dir='rtl'] .textbox *[class*='ci-'].addon-l + *[class*='ci-'].addon-r ~ input[type='tel'], *[dir='rtl'] .textbox-inline *[class*='ci-'].addon-l + *[class*='ci-'].addon-r ~ input[type='tel'] {
    padding-right: 40px !important;
    padding-left: 40px !important;
}


.textbox button[class*='ci-'].addon-l, .textbox-inline button[class*='ci-'].addon-l,
.textbox a[class*='ci-'].addon-l, .textbox-inline a[class*='ci-'].addon-l {
    left: 0px;
    right: auto;
}

*[dir='rtl'] .textbox button[class*='ci-'].addon-l, *[dir='rtl'] .textbox-inline button[class*='ci-'].addon-l,
*[dir='rtl'] .textbox a[class*='ci-'].addon-l, *[dir='rtl'] .textbox-inline a[class*='ci-'].addon-l {
    left: auto;
    right: 0px;
}

.textbox button[class*='ci-'].addon-r, .textbox-inline button[class*='ci-'].addon-r,
.textbox a[class*='ci-'].addon-r, .textbox-inline a[class*='ci-'].addon-r {
    left: auto;
    right: 0px;
}

*[dir='rtl'] .textbox button[class*='ci-'].addon-r, *[dir='rtl'] .textbox-inline button[class*='ci-'].addon-r,
*[dir='rtl'] .textbox a[class*='ci-'].addon-r, *[dir='rtl'] .textbox-inline a[class*='ci-'].addon-r {
    left: 0px;
    right: auto;
}

.textbox button[class*='ci-'].addon-l, .textbox-inline button[class*='ci-'].addon-l,
.textbox button[class*='ci-'].addon-r, .textbox-inline button[class*='ci-'].addon-r,
.textbox a[class*='ci-'].addon-l, .textbox-inline a[class*='ci-'].addon-l,
.textbox a[class*='ci-'].addon-r, .textbox-inline a[class*='ci-'].addon-r {
    top: 0px;
    position: absolute;
    padding: 0px !important;
    font-size: 40px;
    border: 0px none transparent;
    background-color: transparent;
    height: 100%;
}

    .textbox button[class*='ci-'].addon-l:before, .textbox-inline button[class*='ci-'].addon-l:before,
    .textbox button[class*='ci-'].addon-r:before, .textbox-inline button[class*='ci-'].addon-r:before,
    .textbox a[class*='ci-'].addon-l:before, .textbox-inline a[class*='ci-'].addon-l:before,
    .textbox a[class*='ci-'].addon-r:before, .textbox-inline a[class*='ci-'].addon-r:before {
        left: 50%;
        margin-left: -13px;
        top: 50%;
        margin-top: -13px;
        font-size: 26px;
    }

    .textbox button[class*='ci-'].addon-l ~ input[type='text'], .textbox-inline button[class*='ci-'].addon-l ~ input[type='text'],
    .textbox button[class*='ci-'].addon-l ~ input[type='email'], .textbox-inline button[class*='ci-'].addon-l ~ input[type='email'],
    .textbox button[class*='ci-'].addon-l ~ input[type='password'], .textbox-inline button[class*='ci-'].addon-l ~ input[type='password'],
    .textbox button[class*='ci-'].addon-l ~ input[type='tel'], .textbox-inline button[class*='ci-'].addon-l ~ input[type='tel'],
    .textbox a[class*='ci-'].addon-l ~ input[type='text'], .textbox-inline a[class*='ci-'].addon-l ~ input[type='text'],
    .textbox a[class*='ci-'].addon-l ~ input[type='email'], .textbox-inline a[class*='ci-'].addon-l ~ input[type='email'],
    .textbox a[class*='ci-'].addon-l ~ input[type='password'], .textbox-inline a[class*='ci-'].addon-l ~ input[type='password'],
    .textbox a[class*='ci-'].addon-l ~ input[type='tel'], .textbox-inline a[class*='ci-'].addon-l ~ input[type='tel'] {
        padding-left: 40px !important;
    }

    .textbox button[class*='ci-'].addon-r ~ input[type='text'], .textbox-inline button[class*='ci-'].addon-r ~ input[type='text'],
    .textbox button[class*='ci-'].addon-r ~ input[type='email'], .textbox-inline button[class*='ci-'].addon-r ~ input[type='email'],
    .textbox button[class*='ci-'].addon-r ~ input[type='password'], .textbox-inline button[class*='ci-'].addon-r ~ input[type='password'],
    .textbox button[class*='ci-'].addon-r ~ input[type='tel'], .textbox-inline button[class*='ci-'].addon-r ~ input[type='tel'],
    .textbox a[class*='ci-'].addon-r ~ input[type='text'], .textbox-inline a[class*='ci-'].addon-r ~ input[type='text'],
    .textbox a[class*='ci-'].addon-r ~ input[type='email'], .textbox-inline a[class*='ci-'].addon-r ~ input[type='email'],
    .textbox a[class*='ci-'].addon-r ~ input[type='password'], .textbox-inline a[class*='ci-'].addon-r ~ input[type='password'],
    .textbox a[class*='ci-'].addon-r ~ input[type='tel'], .textbox-inline a[class*='ci-'].addon-r ~ input[type='tel'] {
        padding-right: 40px !important;
    }


.textbox button.addon-l, .textbox-inline button.addon-l {
    left: 0px;
    right: auto;
}

.textbox button.addon-r, .textbox-inline button.addon-r {
    left: auto;
    right: 0px;
}

.textbox button.addon-l, .textbox-inline button.addon-l,
.textbox button.addon-r, .textbox-inline button.addon-r {
    position: absolute;
    top: 0px;
    height: 100%;
}

/* #endregion Textbox addons */
/* #region Textbox validation */
.textbox.has-error input[type='text'], .textbox-inline.has-error input[type='text'],
.textbox.has-error input[type='email'], .textbox-inline.has-error input[type='email'],
.textbox.has-error input[type='password'], .textbox-inline.has-error input[type='password'],
.textbox.has-error input[type='tel'], .textbox-inline.has-error input[type='tel'] {
    background-color: #FBCFCF;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}


    .textbox.has-error input[type='text']::-webkit-input-placeholder, .textbox-inline.has-error input[type='text']::-webkit-input-placeholder,
    .textbox.has-error input[type='email']::-webkit-input-placeholder, .textbox-inline.has-error input[type='email']::-webkit-input-placeholder,
    .textbox.has-error input[type='password']::-webkit-input-placeholder, .textbox-inline.has-error input[type='password']::-webkit-input-placeholder,
    .textbox.has-error input[type='tel']::-webkit-input-placeholder, .textbox-inline.has-error input[type='tel']::-webkit-input-placeholder {
        color: var(--color-text-danger) !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .textbox.has-error input[type='text']::-moz-placeholder, .textbox-inline.has-error input[type='text']::-moz-placeholder,
    .textbox.has-error input[type='email']::-moz-placeholder, .textbox-inline.has-error input[type='email']::-moz-placeholder,
    .textbox.has-error input[type='password']::-moz-placeholder, .textbox-inline.has-error input[type='password']::-moz-placeholder,
    .textbox.has-error input[type='tel']::-moz-placeholder, .textbox-inline.has-error input[type='tel']::-moz-placeholder {
        color: var(--color-text-danger) !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .textbox.has-error input[type='text']:-moz-placeholder, .textbox-inline.has-error input[type='text']:-moz-placeholder,
    .textbox.has-error input[type='email']:-moz-placeholder, .textbox-inline.has-error input[type='email']:-moz-placeholder,
    .textbox.has-error input[type='password']:-moz-placeholder, .textbox-inline.has-error input[type='password']:-moz-placeholder,
    .textbox.has-error input[type='tel']:-moz-placeholder, .textbox-inline.has-error input[type='tel']:-moz-placeholder {
        color: var(--color-text-danger) !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .textbox.has-error input[type='text']:-ms-input-placeholder, .textbox-inline.has-error input[type='text']:-ms-input-placeholder,
    .textbox.has-error input[type='email']:-ms-input-placeholder, .textbox-inline.has-error input[type='email']:-ms-input-placeholder,
    .textbox.has-error input[type='password']:-ms-input-placeholder, .textbox-inline.has-error input[type='password']:-ms-input-placeholder,
    .textbox.has-error input[type='tel']:-ms-input-placeholder, .textbox-inline.has-error input[type='tel']:-ms-input-placeholder {
        color: var(--color-text-danger) !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

.textbox.has-error:hover input[type='text'], .textbox-inline.has-error:hover input[type='text'],
.textbox.has-error:hover input[type='email'], .textbox-inline.has-error:hover input[type='email'],
.textbox.has-error:hover input[type='password'], .textbox-inline.has-error:hover input[type='password'],
.textbox.has-error:hover input[type='tel'], .textbox-inline.has-error:hover input[type='tel'] {
    background-color: #F9DBDB;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.textbox.has-error input[type='text']:focus, .textbox-inline.has-error input[type='text']:focus,
.textbox.has-error input[type='email']:focus, .textbox-inline.has-error input[type='email']:focus,
.textbox.has-error input[type='password']:focus, .textbox-inline.has-error input[type='password']:focus,
.textbox.has-error input[type='tel']:focus, .textbox-inline.has-error input[type='tel']:focus {
    background-color: #FBCFCF;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}


.textbox.has-warning input[type='text'], .textbox-inline.has-warning input[type='text'],
.textbox.has-warning input[type='email'], .textbox-inline.has-warning input[type='email'],
.textbox.has-warning input[type='password'], .textbox-inline.has-warning input[type='password'],
.textbox.has-warning input[type='tel'], .textbox-inline.has-warning input[type='tel'] {
    background-color: #FFF9C5;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .textbox.has-warning input[type='text']::-webkit-input-placeholder, .textbox-inline.has-warning input[type='text']::-webkit-input-placeholder,
    .textbox.has-warning input[type='email']::-webkit-input-placeholder, .textbox-inline.has-warning input[type='email']::-webkit-input-placeholder,
    .textbox.has-warning input[type='password']::-webkit-input-placeholder, .textbox-inline.has-warning input[type='password']::-webkit-input-placeholder,
    .textbox.has-warning input[type='tel']::-webkit-input-placeholder, .textbox-inline.has-warning input[type='tel']::-webkit-input-placeholder {
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .textbox.has-warning input[type='text']::-moz-placeholder, .textbox-inline.has-warning input[type='text']::-moz-placeholder,
    .textbox.has-warning input[type='email']::-moz-placeholder, .textbox-inline.has-warning input[type='email']::-moz-placeholder,
    .textbox.has-warning input[type='password']::-moz-placeholder, .textbox-inline.has-warning input[type='password']::-moz-placeholder,
    .textbox.has-warning input[type='tel']::-moz-placeholder, .textbox-inline.has-warning input[type='tel']::-moz-placeholder {
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .textbox.has-warning input[type='text']:-moz-placeholder, .textbox-inline.has-warning input[type='text']:-moz-placeholder,
    .textbox.has-warning input[type='email']:-moz-placeholder, .textbox-inline.has-warning input[type='email']:-moz-placeholder,
    .textbox.has-warning input[type='password']:-moz-placeholder, .textbox-inline.has-warning input[type='password']:-moz-placeholder,
    .textbox.has-warning input[type='tel']:-moz-placeholder, .textbox-inline.has-warning input[type='tel']:-moz-placeholder {
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .textbox.has-warning input[type='text']:-ms-input-placeholder, .textbox-inline.has-warning input[type='text']:-ms-input-placeholder,
    .textbox.has-warning input[type='email']:-ms-input-placeholder, .textbox-inline.has-warning input[type='email']:-ms-input-placeholder,
    .textbox.has-warning input[type='password']:-ms-input-placeholder, .textbox-inline.has-warning input[type='password']:-ms-input-placeholder,
    .textbox.has-warning input[type='tel']:-ms-input-placeholder, .textbox-inline.has-warning input[type='tel']:-ms-input-placeholder {
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

.textbox.has-warning:hover input[type='text'], .textbox-inline.has-warning:hover input[type='text'],
.textbox.has-warning:hover input[type='email'], .textbox-inline.has-warning:hover input[type='email'],
.textbox.has-warning:hover input[type='password'], .textbox-inline.has-warning:hover input[type='password'],
.textbox.has-warning:hover input[type='tel'], .textbox-inline.has-warning:hover input[type='tel'] {
    background-color: #FFFBD6;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.textbox.has-warning input[type='text']:focus, .textbox-inline.has-warning input[type='text']:focus,
.textbox.has-warning input[type='email']:focus, .textbox-inline.has-warning input[type='email']:focus,
.textbox.has-warning input[type='password']:focus, .textbox-inline.has-warning input[type='password']:focus,
.textbox.has-warning input[type='tel']:focus, .textbox-inline.has-warning input[type='tel']:focus {
    background-color: #FFF9C5;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}


.textbox.has-success input[type='text'], .textbox-inline.has-success input[type='text'],
.textbox.has-success input[type='email'], .textbox-inline.has-success input[type='email'],
.textbox.has-success input[type='password'], .textbox-inline.has-success input[type='password'],
.textbox.has-success input[type='tel'], .textbox-inline.has-success input[type='tel'] {
    background-color: #E6F4ED;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .textbox.has-success input[type='text']::-webkit-input-placeholder, .textbox-inline.has-success input[type='text']::-webkit-input-placeholder,
    .textbox.has-success input[type='email']::-webkit-input-placeholder, .textbox-inline.has-success input[type='email']::-webkit-input-placeholder,
    .textbox.has-success input[type='password']::-webkit-input-placeholder, .textbox-inline.has-success input[type='password']::-webkit-input-placeholder,
    .textbox.has-success input[type='tel']::-webkit-input-placeholder, .textbox-inline.has-success input[type='tel']::-webkit-input-placeholder {
        color: var(--color-text-primary);
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .textbox.has-success input[type='text']::-moz-placeholder, .textbox-inline.has-success input[type='text']::-moz-placeholder,
    .textbox.has-success input[type='email']::-moz-placeholder, .textbox-inline.has-success input[type='email']::-moz-placeholder,
    .textbox.has-success input[type='password']::-moz-placeholder, .textbox-inline.has-success input[type='password']::-moz-placeholder,
    .textbox.has-success input[type='tel']::-moz-placeholder, .textbox-inline.has-success input[type='tel']::-moz-placeholder {
        color: var(--color-text-primary);
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .textbox.has-success input[type='text']:-moz-placeholder, .textbox-inline.has-success input[type='text']:-moz-placeholder,
    .textbox.has-success input[type='email']:-moz-placeholder, .textbox-inline.has-success input[type='email']:-moz-placeholder,
    .textbox.has-success input[type='password']:-moz-placeholder, .textbox-inline.has-success input[type='password']:-moz-placeholder,
    .textbox.has-success input[type='tel']:-moz-placeholder, .textbox-inline.has-success input[type='tel']:-moz-placeholder {
        color: var(--color-text-primary);
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .textbox.has-success input[type='text']:-ms-input-placeholder, .textbox-inline.has-success input[type='text']:-ms-input-placeholder,
    .textbox.has-success input[type='email']:-ms-input-placeholder, .textbox-inline.has-success input[type='email']:-ms-input-placeholder,
    .textbox.has-success input[type='password']:-ms-input-placeholder, .textbox-inline.has-success input[type='password']:-ms-input-placeholder,
    .textbox.has-success input[type='tel']:-ms-input-placeholder, .textbox-inline.has-success input[type='tel']:-ms-input-placeholder {
        color: var(--color-text-primary);
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

.textbox.has-success:hover input[type='text'], .textbox-inline.has-success:hover input[type='text'],
.textbox.has-success:hover input[type='email'], .textbox-inline.has-success:hover input[type='email'],
.textbox.has-success:hover input[type='password'], .textbox-inline.has-success:hover input[type='password'],
.textbox.has-success:hover input[type='tel'], .textbox-inline.has-success:hover input[type='tel'] {
    background-color: #EBF6F1;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.textbox.has-success input[type='text']:focus, .textbox-inline.has-success input[type='text']:focus,
.textbox.has-success input[type='email']:focus, .textbox-inline.has-success input[type='email']:focus,
.textbox.has-success input[type='password']:focus, .textbox-inline.has-success input[type='password']:focus,
.textbox.has-success input[type='tel']:focus, .textbox-inline.has-success input[type='tel']:focus {
    background-color: #E6F4ED;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.textbox .validation-icon-l, .textbox .validation-icon-r, .textbox-inline .validation-icon-l, .textbox-inline .validation-icon-r {
    display: none;
    top: 50%;
    margin-top: -0.5em;
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: 150em 1em;
    background-position: -20em 0em;
    font-size: 2em;
    opacity: 1;
    position: absolute;
}

.textbox .validation-icon-l, .textbox-inline .validation-icon-l {
    left: 5px;
    right: auto;
}

*[dir='rtl'] .textbox .validation-icon-l, *[dir='rtl'] .textbox-inline .validation-icon-l {
    left: auto;
    right: 5px;
}

.textbox .validation-icon-r, .textbox-inline .validation-icon-r {
    left: auto;
    right: 5px;
}

*[dir='rtl'] .textbox .validation-icon-r, *[dir='rtl'] .textbox-inline .validation-icon-r {
    left: 5px;
    right: auto;
}

.textbox.has-error .validation-icon-l, .textbox.has-error .validation-icon-r,
.textbox.has-warning .validation-icon-l, .textbox.has-warning .validation-icon-r,
.textbox.has-success .validation-icon-l, .textbox.has-success .validation-icon-r,
.textbox-inline.has-error .validation-icon-l, .textbox-inline.has-error .validation-icon-r,
.textbox-inline.has-warning .validation-icon-l, .textbox-inline.has-warning .validation-icon-r,
.textbox-inline.has-success .validation-icon-l, .textbox-inline.has-success .validation-icon-r {
    display: inline-block;
}

.textbox.has-error .validation-icon-l, .textbox.has-error .validation-icon-r,
.textbox-inline.has-error .validation-icon-l, .textbox-inline.has-error .validation-icon-r {
    background-image: url("../../Content/Images/ci-pazar-danger.svg");
    background-position: -12em 0em;
}

.textbox.has-warning .validation-icon-l, .textbox.has-warning .validation-icon-r,
.textbox-inline.has-warning .validation-icon-l, .textbox-inline.has-warning .validation-icon-r {
    background-image: url("../../Content/Images/ci-pazar-warning.svg");
    background-position: -16em 0em;
}

.textbox.has-success .validation-icon-l, .textbox.has-success .validation-icon-r,
.textbox-inline.has-success .validation-icon-l, .textbox-inline.has-success .validation-icon-r {
    background-image: url("../../Content/Images/ci-pazar-primary.svg");
    background-position: -11em 0em;
}

.textbox[class*='has-'] .validation-icon-l ~ input[type='text'], .textbox-inline[class*='has-'] .validation-icon-l ~ input[type='text'],
.textbox[class*='has-'] .validation-icon-l ~ input[type='email'], .textbox-inline[class*='has-'] .validation-icon-l ~ input[type='email'],
.textbox[class*='has-'] .validation-icon-l ~ input[type='password'], .textbox-inline[class*='has-'] .validation-icon-l ~ input[type='password'],
.textbox[class*='has-'] .validation-icon-l ~ input[type='tel'], .textbox-inline[class*='has-'] .validation-icon-l ~ input[type='tel'] {
    padding-left: 38px !important;
    padding-right: 10px !important;
}

*[dir='rtl'] .textbox[class*='has-'] .validation-icon-l ~ input[type='text'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-l ~ input[type='text'],
*[dir='rtl'] .textbox[class*='has-'] .validation-icon-l ~ input[type='email'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-l ~ input[type='email'],
*[dir='rtl'] .textbox[class*='has-'] .validation-icon-l ~ input[type='password'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-l ~ input[type='password'],
*[dir='rtl'] .textbox[class*='has-'] .validation-icon-l ~ input[type='tel'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-l ~ input[type='tel'] {
    padding-left: 10px !important;
    padding-right: 38px !important;
}

.textbox[class*='has-'] .validation-icon-r ~ input[type='text'], .textbox-inline[class*='has-'] .validation-icon-r ~ input[type='text'],
.textbox[class*='has-'] .validation-icon-r ~ input[type='email'], .textbox-inline[class*='has-'] .validation-icon-r ~ input[type='email'],
.textbox[class*='has-'] .validation-icon-r ~ input[type='password'], .textbox-inline[class*='has-'] .validation-icon-r ~ input[type='password'],
.textbox[class*='has-'] .validation-icon-r ~ input[type='tel'], .textbox-inline[class*='has-'] .validation-icon-r ~ input[type='tel'] {
    padding-left: 10px !important;
    padding-right: 38px !important;
}

*[dir='rtl'] .textbox[class*='has-'] .validation-icon-r ~ input[type='text'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-r ~ input[type='text'],
*[dir='rtl'] .textbox[class*='has-'] .validation-icon-r ~ input[type='email'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-r ~ input[type='email'],
*[dir='rtl'] .textbox[class*='has-'] .validation-icon-r ~ input[type='password'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-r ~ input[type='password'],
*[dir='rtl'] .textbox[class*='has-'] .validation-icon-r ~ input[type='tel'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-r ~ input[type='tel'] {
    padding-left: 38px !important;
    padding-right: 10px !important;
}


*[dir='rtl'] .textbox[class*='has-'] .addon-l + .validation-icon-r ~ input[type='text'], *[dir='rtl'] .textbox-inline[class*='has-'] .addon-l + .validation-icon-r ~ input[type='text'],
*[dir='rtl'] .textbox[class*='has-'] .addon-l + .validation-icon-r ~ input[type='email'], *[dir='rtl'] .textbox-inline[class*='has-'] .addon-l + .validation-icon-r ~ input[type='email'],
*[dir='rtl'] .textbox[class*='has-'] .addon-l + .validation-icon-r ~ input[type='password'], *[dir='rtl'] .textbox-inline[class*='has-'] .addon-l + .validation-icon-r ~ input[type='password'],
*[dir='rtl'] .textbox[class*='has-'] .addon-l + .validation-icon-r ~ input[type='tel'], *[dir='rtl'] .textbox-inline[class*='has-'] .addon-l + .validation-icon-r ~ input[type='tel'],
*[dir='rtl'] .textbox[class*='has-'] .validation-icon-r + .addon-l ~ input[type='text'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-r + .addon-l ~ input[type='text'],
*[dir='rtl'] .textbox[class*='has-'] .validation-icon-r + .addon-l ~ input[type='email'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-r + .addon-l ~ input[type='email'],
*[dir='rtl'] .textbox[class*='has-'] .validation-icon-r + .addon-l ~ input[type='password'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-r + .addon-l ~ input[type='password'],
*[dir='rtl'] .textbox[class*='has-'] .validation-icon-r + .addon-l ~ input[type='tel'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-r + .addon-l ~ input[type='tel'] {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

*[dir='rtl'] .textbox[class*='has-'] .addon-r + .validation-icon-l ~ input[type='text'], *[dir='rtl'] .textbox-inline[class*='has-'] .addon-r + .validation-icon-l ~ input[type='text'],
*[dir='rtl'] .textbox[class*='has-'] .addon-r + .validation-icon-l ~ input[type='email'], *[dir='rtl'] .textbox-inline[class*='has-'] .addon-r + .validation-icon-l ~ input[type='email'],
*[dir='rtl'] .textbox[class*='has-'] .addon-r + .validation-icon-l ~ input[type='password'], *[dir='rtl'] .textbox-inline[class*='has-'] .addon-r + .validation-icon-l ~ input[type='password'],
*[dir='rtl'] .textbox[class*='has-'] .addon-r + .validation-icon-l ~ input[type='tel'], *[dir='rtl'] .textbox-inline[class*='has-'] .addon-r + .validation-icon-l ~ input[type='tel'],
*[dir='rtl'] .textbox[class*='has-'] .validation-icon-l + .addon-r ~ input[type='text'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-l + .addon-r ~ input[type='text'],
*[dir='rtl'] .textbox[class*='has-'] .validation-icon-l + .addon-r ~ input[type='email'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-l + .addon-r ~ input[type='email'],
*[dir='rtl'] .textbox[class*='has-'] .validation-icon-l + .addon-r ~ input[type='password'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-l + .addon-r ~ input[type='password'],
*[dir='rtl'] .textbox[class*='has-'] .validation-icon-l + .addon-r ~ input[type='tel'], *[dir='rtl'] .textbox-inline[class*='has-'] .validation-icon-l + .addon-r ~ input[type='tel'] {
    padding-left: 40px !important;
    padding-right: 40px !important;
}


.textbox .help-block, .textbox-inline .help-block {
    display: none;
    position: absolute;
    border-radius: var(--radius-4);
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    padding: 2px 5px 2px 5px;
    margin: 0px;
    line-height: 14px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 29px;
    z-index: 2;
}


*[dir='rtl'] .textbox .help-block, *[dir='rtl'] .textbox-inline .help-block {
    text-align: right;
}

.textbox[class*='has-'] .help-block, .textbox-inline[class*='has-'] .help-block {
    display: block;
}

.textbox .help-block:before, .textbox-inline .help-block:before {
    content: '';
    width: 0px;
    height: 0px;
    position: absolute;
    top: -11px;
    margin-left: 8px;
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.textbox.has-error .help-block, .textbox-inline.has-error .help-block {
    background-color: var(--color-bg-danger);
}

    .textbox.has-error .help-block:before, .textbox-inline.has-error .help-block:before {
        border-bottom: 6px solid var(--color-border-danger);
    }

.textbox.has-warning .help-block, .textbox-inline.has-warning .help-block {
    background-color: var(--color-bg-warning);
    color: var(--color-text-basic) !important;
}

    .textbox.has-warning .help-block:before, .textbox-inline.has-warning .help-block:before {
        border-bottom: 6px solid var(--color-bg-warning);
    }

.textbox.has-success .help-block, .textbox-inline.has-success .help-block {
    background-color: var(--color-bg-primary);
}

    .textbox.has-success .help-block:before, .textbox-inline.has-success .help-block:before {
        border-bottom: 6px solid var(--color-border-primary);
    }

.textbox.textbox-labeled-sm.has-success label, .textbox-inline.textbox-labeled-sm.has-success label,
.textbox.textbox-labeled.has-success label, .textbox-inline.textbox-labeled.has-success label {
    color: var(--color-text-primary);
}

.textbox.textbox-labeled-sm.has-error label, .textbox-inline.textbox-labeled-sm.has-error label,
.textbox.textbox-labeled.has-error label, .textbox-inline.textbox-labeled.has-error label {
    color: var(--color-text-danger);
}

.textbox-code {
    float: left;
    display: block;
    font-size: 36px;
    height: 58px;
    color: var(--color-text-basic);
    padding-left: 10px !important;
    padding-right: 10px !important;
    border: 0px none transparent;
    border-radius: var(--radius-4);
    background-color: #F2F2F2;
    font-weight: 400;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
    max-width: 60px;
    text-align: center;
}

    .textbox-code + .textbox-code {
        margin-left: 5px;
    }

    .textbox-code.has-success {
        background-color: #E6F4ED;
    }

    .textbox-code.has-warning {
        background-color: #FFF9C5;
    }

    .textbox-code.has-error {
        background-color: #FBCFCF;
    }
/* #endregion Textbox validation */

/* #region Textbox passwords */
.textbox.hide-password .addon-r:before, .textbox-inline.hide-password .addon-r:before {
    background-position: -69em 0em;
}

.textbox.show-password .addon-r:before, .textbox-inline.show-password .addon-r:before {
    background-position: -70em 0em;
}
/* #endregion Textbox passwords */
/* #endregion ---------------------------------- Textboxes -------------------------------------------- */
/* #region ---------------------------------- Validation Code ----------------------------------------- */
.validation-code {
    display: flex;
    flex-direction: column;
    gap: var(--gap-8);
}

    .validation-code .controls {
        display: flex;
        gap: var(--gap-4);
        justify-content: space-between;
        flex-direction: row;
        direction: ltr;
    }

    .validation-code input:focus {
        box-shadow: none;
        outline: none;
    }

    .validation-code .textbox {
        text-align: center;
    }

    .validation-code input[type='text'] {
        height: 70px !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        width: 100%;
        margin: 0px !important;
        flex: 1;
        min-width: 0px;
        background-color: var(--color-bg-panel-transparent);
        border-radius: var(--radius-8);
        border: 0px none transparent;
        outline: none;
        color: var(--color-text-basic);
        box-shadow: none;
    }

        .validation-code input[type='text']:focus {
            box-shadow: none;
            outline: none;
            background-color: var(--color-bg-inputs-transparent);
        }

    .validation-code .validation {
        font-weight: 500;
        font-size: 14px;
        text-align: start;
        line-height: 130%;
        display: none;
    }

    .validation-code.has-error .validation {
        display: block;
        color: var(--color-text-danger);
    }

/* #endregion ------------------------------/ Validation Code ----------------------------------------- */
/* #region ------------------------------------- Textareas -------------------------------------------- */
.new-textarea {
    display: block;
    width: 100%;
}

    textarea.textbox, .textbox textarea,
    textarea.new-textarea, .new-textarea textarea {
        display: block;
        width: 100%;
        min-height: 100px;
        max-width: 100%;
        min-width: 100%;
        font-size: 14px;
        color: var(--color-text-basic);
        padding: 10px;
        border: 0px none transparent;
        border-radius: var(--radius-4);
        background-color: rgba(242,242,242,1);
        font-weight: 400;
        -webkit-transition: background-color 0.2s ease, color 0.2s ease;
        transition: background-color 0.2s ease, color 0.2s ease;
    }


        textarea.textbox.textarea-inversed, .textbox.textarea-inversed textarea,
        textarea.new-textarea.textarea-inversed, .new-textarea.textarea-inversed textarea {
            background-color: rgba(255,255,255,1);
            -webkit-transition: background-color 0.2s ease, color 0.2s ease;
            transition: background-color 0.2s ease, color 0.2s ease;
        }


        textarea.textbox:-webkit-autofill, .textbox textarea:-webkit-autofill,
        textarea.new-textarea:-webkit-autofill, .new-textarea textarea:-webkit-autofill {
            -webkit-animation-name: autofill;
            -webkit-animation-fill-mode: both;
        }

        textarea.textbox::-webkit-input-placeholder, .textbox textarea::-webkit-input-placeholder,
        textarea.new-textarea::-webkit-input-placeholder, .new-textarea textarea::-webkit-input-placeholder {
            color: var(--color-text-muted);
            -webkit-transition: color 0.2s ease;
            transition: color 0.2s ease;
        }

        textarea.textbox::-moz-placeholder, .textbox textarea::-moz-placeholder,
        textarea.new-textarea::-moz-placeholder, .new-textarea textarea::-moz-placeholder {
            color: var(--color-text-muted);
            -webkit-transition: color 0.2s ease;
            transition: color 0.2s ease;
        }

        textarea.textbox:-moz-placeholder, .textbox textarea:-moz-placeholder,
        textarea.new-textarea:-moz-placeholder, .new-textarea textarea:-moz-placeholder {
            color: var(--color-text-muted);
            -webkit-transition: color 0.2s ease;
            transition: color 0.2s ease;
        }

        textarea.textbox:-ms-input-placeholder, .textbox textarea:-ms-input-placeholder,
        textarea.new-textarea:-ms-input-placeholder, .new-textarea textarea:-ms-input-placeholder {
            color: var(--color-text-muted);
            -webkit-transition: color 0.2s ease;
            transition: color 0.2s ease;
        }

        textarea.textbox:disabled, .textbox textarea:disabled,
        textarea.new-textarea:disabled, .new-textarea textarea:disabled {
            color: #a7aeb8;
            opacity: 0.6;
            cursor: not-allowed;
            -webkit-transition: background-color 0.2s ease, color 0.2s ease;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

            textarea.textbox:disabled::-webkit-input-placeholder, .textbox textarea:disabled::-webkit-input-placeholder,
            textarea.new-textarea:disabled::-webkit-input-placeholder, .new-textarea textarea:disabled::-webkit-input-placeholder {
                color: var(--color-text-muted);
                -webkit-transition: color 0.2s ease;
                transition: color 0.2s ease;
            }

            textarea.textbox:disabled::-moz-placeholder, .textbox textarea:disabled::-moz-placeholder,
            textarea.new-textarea:disabled::-moz-placeholder, .new-textarea textarea:disabled::-moz-placeholder {
                color: var(--color-text-muted);
                -webkit-transition: color 0.2s ease;
                transition: color 0.2s ease;
            }

            textarea.textbox:disabled:-moz-placeholder, .textbox textarea:disabled:-moz-placeholder,
            textarea.new-textarea:disabled::-moz-placeholder, .new-textarea textarea:disabled:-moz-placeholder {
                color: var(--color-text-muted);
                -webkit-transition: color 0.2s ease;
                transition: color 0.2s ease;
            }

            textarea.textbox:disabled:-ms-input-placeholder, .textbox textarea:disabled:-ms-input-placeholder,
            textarea.new-textarea:disabled:-ms-input-placeholder, .new-textarea textarea:disabled:-ms-input-placeholder {
                color: var(--color-text-muted);
                -webkit-transition: color 0.2s ease;
                transition: color 0.2s ease;
            }

    /* #region Textareas labeled */
    .new-textarea.textarea-labeled {
        position: relative;
    }

        .new-textarea.textarea-labeled label {
            color: var(--color-text-muted);
            position: absolute;
            top: 0px;
            left: 10px;
            font-size: 14px;
            margin-bottom: 0px;
            font-weight: 400;
            text-align: left;
            text-transform: none;
            white-space: nowrap;
            display: block;
            max-width: calc(100% - 27px);
            width: calc(100% - 27px);
            overflow: hidden;
            text-overflow: ellipsis;
            padding-top: 8px;
            padding-bottom: 9px;
            background: linear-gradient(180deg, rgba(242,242,242,1) 75%, rgba(242,242,242,0) 100%);
            -webkit-transition: background 0.2s ease;
            transition: background 0.2s ease;
        }

        .new-textarea.textarea-labeled.textarea-inversed label {
            background: linear-gradient(180deg, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%);
            -webkit-transition: background 0.2s ease;
            transition: background 0.2s ease;
        }

*[dir="rtl"] .new-textarea.textarea-labeled label {
    left: auto;
    right: 10px;
    text-align: right;
}


.new-textarea.textarea-labeled textarea {
    padding-top: 32px;
    font-size: 14px;
}

.new-textarea.textarea-labeled.has-error label {
    color: var(--color-text-danger);
    background: linear-gradient(180deg, rgba(251,207,207,1) 75%, rgba(251,207,207,0) 100%);
    -webkit-transition: background 0.2s ease;
    transition: background 0.2s ease;
}

.new-textarea.textarea-labeled.has-warning label {
    background: linear-gradient(180deg, rgba(255,249,197,1) 75%, rgba(255,249,197,0) 100%);
    -webkit-transition: background 0.2s ease;
    transition: background 0.2s ease;
}

.new-textarea.textarea-labeled.has-success label {
    color: var(--color-text-primary);
    background: linear-gradient(180deg, rgba(230,244,237,1) 75%, rgba(230,244,237,0) 100%);
    -webkit-transition: background 0.2s ease;
    transition: background 0.2s ease;
}
/* #endregion Textareas labeled */
/* #region Textareas Validation */
.new-textarea.has-error textarea, textarea.new-textarea.has-error {
    color: var(--color-text-basic) !important;
    background-color: #FBCFCF;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .new-textarea.has-error textarea::-webkit-input-placeholder, textarea.new-textarea.has-error::-webkit-input-placeholder {
        color: var(--color-text-danger) !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .new-textarea.has-error textarea::-moz-placeholder, textarea.new-textarea.has-error::-moz-placeholder {
        color: var(--color-text-danger) !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .new-textarea.has-error textarea:-moz-placeholder, textarea.new-textarea.has-error:-moz-placeholder {
        color: var(--color-text-danger) !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .new-textarea.has-error textarea:-ms-input-placeholder, textarea.new-textarea.has-error:-ms-input-placeholder {
        color: var(--color-text-danger) !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

.new-textarea.has-warning textarea, textarea.new-textarea.has-warning {
    color: var(--color-text-basic) !important;
    background-color: #FFF9C5;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .new-textarea.has-warning textarea::-webkit-input-placeholder, textarea.new-textarea.has-warning::-webkit-input-placeholder {
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .new-textarea.has-warning textarea::-moz-placeholder, textarea.new-textarea.has-warning::-moz-placeholder {
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .new-textarea.has-warning textarea:-moz-placeholder, textarea.new-textarea.has-warning:-moz-placeholder {
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .new-textarea.has-warning textarea:-ms-input-placeholder, textarea.new-textarea.has-warning:-ms-input-placeholder {
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

.new-textarea.has-success textarea, textarea.new-textarea.has-success {
    color: var(--color-text-basic) !important;
    background-color: #E6F4ED;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .new-textarea.has-success textarea::-webkit-input-placeholder, textarea.new-textarea.has-success::-webkit-input-placeholder {
        color: var(--color-text-primary) !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .new-textarea.has-success textarea::-moz-placeholder, textarea.new-textarea.has-success::-moz-placeholder {
        color: var(--color-text-primary) !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .new-textarea.has-success textarea:-moz-placeholder, textarea.new-textarea.has-success:-moz-placeholder {
        color: var(--color-text-primary) !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    .new-textarea.has-success textarea:-ms-input-placeholder, textarea.new-textarea.has-success:-ms-input-placeholder {
        color: var(--color-text-primary) !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }


.new-textarea .help-block {
    display: none;
    position: absolute;
    border-radius: var(--radius-4);
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    padding: 2px 5px 2px 5px;
    margin: 0px;
    line-height: 14px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 29px;
    z-index: 2;
}

*[dir='rtl'] .new-textarea .help-block {
    text-align: right;
}

.new-textarea[class*='has-'] .help-block {
    display: block;
}

.new-textarea .help-block:before {
    content: '';
    width: 0px;
    height: 0px;
    position: absolute;
    top: -11px;
    margin-left: 8px;
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.new-textarea.has-error .help-block {
    background-color: var(--color-bg-danger);
}

    .new-textarea.has-error .help-block:before {
        border-bottom: 6px solid var(--color-border-danger);
    }

.new-textarea.has-warning .help-block {
    background-color: var(--color-bg-warning);
    color: var(--color-text-basic) !important;
}

    .new-textarea.has-warning .help-block:before {
        border-bottom: 6px solid var(--color-bg-warning);
    }

.new-textarea.has-success .help-block {
    background-color: var(--color-bg-primary);
}

    .new-textarea.has-success .help-block:before {
        border-bottom: 6px solid var(--color-border-primary);
    }
/* #endregion Textareas Validation */


/* #endregion --------------------------------- /Textareas -------------------------------------------- */
/* #region ------------------------------------- Dropdowns -------------------------------------------- */
.select {
    position: relative;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    padding: 0px;
    vertical-align: middle;
}

    .select.select-block {
        display: block;
    }

    .select .select-content {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .select.select-block .select-button {
        display: block;
        width: 100%;
    }

        .select.select-block .select-button:focus,
        .select.select-block .select-button:active {
            outline: none;
            box-shadow: none;
        }

    .select .select-button {
        background-color: transparent;
        border: 0px none transparent;
        min-width: 0px;
        text-align: left;
        padding: 13px 35px 13px 10px;
        background-color: #F2F2F2;
        color: var(--color-text-basic);
        border-radius: var(--radius-4);
        -webkit-transition: background-color 0.2s ease;
        transition: background-color 0.2s ease;
    }

*[dir='rtl'] .select .select-button {
    padding: 13px 10px 13px 35px;
    text-align: right;
}

.select .select-button *[class*='ci-'] {
    position: absolute;
    top: calc(50% - 8px);
    left: auto;
    right: 10px;
}

*[dir='rtl'] .select .select-button *[class*='ci-'] {
    left: 10px;
    right: auto;
}

.select.select-iconed .select-button {
    padding: 13px 35px 13px 40px;
}

    .select.select-iconed .select-button *[class*='ci-'].select-icon {
        position: absolute;
        top: calc(50% - 13px);
        left: 7px;
        right: auto;
        font-size: 26px;
    }

*[dir='rtl'] .select.select-iconed .select-button {
    padding: 13px 40px 13px 35px;
}

    *[dir='rtl'] .select.select-iconed .select-button *[class*='ci-'].select-icon {
        position: absolute;
        top: calc(50% - 13px);
        left: auto;
        right: 7px;
        font-size: 26px;
    }



.select:hover .select-button {
    background-color: #F5F5F5;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select:active .select-button,
.select:focus .select-button {
    background-color: #F2F2F2;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select.select-inversed .select-button {
    background-color: #FFFFFF;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select.select-inversed:hover .select-button {
    background-color: #FDFDFD;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select .select-button[disabled='disabled'] {
    opacity: 0.6;
    cursor: not-allowed;
}

.select.select-inversed .select-button[disabled='disabled'] {
    background-color: #E7E7E7 !important;
    opacity: 1;
}

    .select.select-inversed .select-button[disabled='disabled'] .select-content {
        color: var(--color-text-muted) !important;
    }

*[dir='rtl'] .select.ignore-rtl-content .select-content {
    direction: ltr;
}

/* #region Labeled dropdown */
.select.select-labeled .select-button {
    padding: 11px 35px 8px 10px;
}

*[dir='rtl'] .select.select-labeled .select-button {
    padding: 11px 10px 8px 35px;
}

.select.select-iconed.select-labeled .select-button {
    padding: 11px 35px 9px 40px;
}

*[dir='rtl'] .select.select-iconed.select-labeled .select-button {
    padding: 11px 40px 9px 35px;
}

.select.select-labeled .select-label {
    display: block;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 6px;
}

.select.select-labeled .select-content {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-basic);
    line-height: 19px;
}

.select.select-labeled-sm .select-button {
    padding: 4px 35px 4px 10px;
}

*[dir='rtl'] .select.select-labeled-sm .select-button {
    padding: 4px 10px 4px 35px;
}

.select.select-iconed.select-labeled-sm .select-button {
    padding: 4px 35px 4px 40px;
}

*[dir='rtl'] .select.select-iconed.select-labeled-sm .select-button {
    padding: 4px 40px 4px 35px;
}

.select.select-labeled-sm .select-label {
    display: block;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 2px;
}

.select.select-labeled-sm .select-content {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-basic);
    line-height: 16px;
}


/* #endregion Labeled dropdown */

/* #region Dropdown menu */
.select .options-list {
    display: none;
    /*position: absolute;*/
    position: fixed;
    background-color: #FFFFFF;
    box-shadow: rgba(0,0,0,0.2) 0px 7px 35px;
    list-style: none;
    margin: 0px;
    padding: 0px;
    min-width: 100%;
    border-radius: var(--radius-4);
    max-height: 205px;
    overflow-y: auto;
    z-index: 11;
    scrollbar-width: thin;
}

    .select .options-list.show {
        display: inline-block;
    }

    .select .options-list li {
        display: block;
    }

        .select .options-list li .group-item {
            background-color: #F5F5F5;
            text-transform: uppercase;
            padding-top: 20px;
            padding-bottom: 20px;
            letter-spacing: 0.2em;
            color: var(--color-text-muted) !important;
        }

    .select .options-list .divider {
        width: 100%;
        background-color: #F2F2F2;
        height: 1px;
    }

    .select .options-list li a {
        text-align: left;
        display: block;
        color: var(--color-text-basic) !important;
        text-decoration: none;
        font-size: 14px;
        padding: 10px 8px 10px 8px;
    }

*[dir='rtl'] .select .options-list li a {
    text-align: right;
}

.select .options-list li a:hover,
.select .options-list li.focus a {
    background-color: #F9F9F9;
}

.select .options-list li.selected a {
    background-color: #E6F4ED;
}

.select .options-list li.error a,
.select .options-list li.danger a {
    background-color: #FBCFCF;
}

.select .options-list li.warning a {
    background-color: #FFF9C5;
}

.select .options-list label {
    display: block;
    width: 100%;
    text-align: left;
    padding: 5px 10px;
    background-color: #F2F2F2;
    margin: 0px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.select .options-list.options-list-extended {
    padding: 10px;
}

    .select .options-list.options-list-extended a {
        border-radius: var(--radius-4);
        padding-top: 8px 0px 8px 0px;
        font-size: 18px;
        line-height: 18px;
    }

    .select .options-list.options-list-extended label {
        border-radius: var(--radius-4);
    }

    .select .options-list.options-list-extended li.selected a {
        color: var(--color-text-primary) !important;
        position: relative;
    }

        .select .options-list.options-list-extended li.selected a .checker {
            top: calc(50% - 8px);
            left: auto;
            right: 7px;
            content: '';
            display: inline-block;
            width: 1em;
            height: 1em;
            vertical-align: middle;
            background-image: url("../../Content/Images/ci-pazar-small-primary.svg");
            background-repeat: no-repeat;
            background-size: 18em 1em;
            background-position: -8em 0em;
            font-size: 14px;
            opacity: 1;
            position: absolute;
        }

*[dir='rtl'] .select .options-list.options-list-extended li.selected a .checker {
    left: 7px;
    right: auto;
}

.select .options-list.options-list-extended li.selected a {
    padding-right: 30px;
    padding-left: 10px;
}

*[dir='rtl'] .select .options-list.options-list-extended li.selected a {
    padding-left: 30px;
    padding-right: 10px;
}

.select.select-iconed .options-list li > a {
    position: relative;
}


.select.select-iconed .options-list .options-icon + .options-content {
    padding-left: 30px;
    display: inline-block;
}

*[dir='rtl'] .select.select-iconed .options-list .options-icon + .options-content {
    padding-left: 0px;
    padding-right: 30px;
}

.select.select-iconed .options-list .options-icon {
    position: absolute;
    font-size: 28px;
    top: calc(50% - 14px);
    left: 3px;
}

*[dir='rtl'] .select.select-iconed .options-list .options-icon {
    left: auto;
    right: 3px;
}

*[dir='rtl'] .select.ignore-rtl-content .options-list li > a {
    direction: ltr;
}

/* #endregion Dropdown menu */
/* #region Validation */
.select.has-error .select-button {
    background-color: #FBCFCF;
    color: var(--color-text-danger);
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select.has-error:hover .select-button {
    background-color: #F9DBDB;
    color: var(--color-text-danger);
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select.has-error:active .select-button,
.select.has-error:focus .select-button {
    background-color: #FBCFCF;
    color: var(--color-text-danger);
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select.has-warning .select-button {
    background-color: #FFF9C5;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select.has-warning:hover .select-button {
    background-color: #FFFBD6;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select.has-warning:focus .select-button {
    background-color: #FFF9C5;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select.has-success .select-button {
    color: var(--color-text-primary);
    background-color: #E6F4ED;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select.has-success:hover .select-button {
    background-color: #EBF6F1;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select.has-success:focus .select-button {
    background-color: #E6F4ED;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select.select-labeled.has-error .select-label,
.select.select-labeled-sm.has-error .select-label,
.select-autocomplete.select-labeled-sm.has-error .select-label {
    color: var(--color-text-danger);
}

.select.select-labeled.has-success .select-label,
.select.select-labeled-sm.has-success .select-label {
    color: var(--color-text-primary);
}

.select.select-up-always .options-list.show {
    bottom: 43px;
    top: auto;
}

.select.select-labeled.select-up-always.select-labeled .options-list.show {
    bottom: 62px;
    top: auto;
}

.select .help-block,
.select-autocomplete .help-block {
    display: none;
    position: absolute;
    border-radius: var(--radius-4);
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    padding: 2px 5px 2px 5px;
    margin: 0px;
    line-height: 14px;
    box-shadow: rgb(0, 0, 0, 0.3) 0px 4px 29px;
    z-index: 2;
}

*[dir='rtl'] .select .help-block,
*[dir='rtl'] .select-autocomplete .help-block {
    text-align: right;
}

.select .help-block:before,
.select-autocomplete .help-block:before {
    content: '';
    width: 0px;
    height: 0px;
    position: absolute;
    top: -11px;
    margin-left: 8px;
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.select.has-error .help-block,
.select.has-warning .help-block,
.select.has-success .help-block,
.select-autocomplete.has-error .help-block,
.select-autocomplete.has-warning .help-block,
.select-autocomplete.has-success .help-block {
    display: block;
}

.select.has-error .help-block,
.select-autocomplete.has-error .help-block {
    background-color: var(--color-bg-danger);
}

    .select.has-error .help-block:before,
    .select-autocomplete.has-error .help-block:before {
        border-bottom: 6px solid var(--color-border-danger);
    }

.select.has-warning .help-block,
.select-autocomplete.has-warning .help-block {
    background-color: var(--color-bg-warning);
    color: var(--color-text-basic) !important;
}

    .select.has-warning .help-block:before,
    .select-autocomplete.has-warning .help-block:before {
        border-bottom: 6px solid var(--color-bg-warning);
    }

.select.has-success .help-block,
.select-autocomplete.has-success .help-block {
    background-color: var(--color-bg-primary);
}

    .select.has-success .help-block:before,
    .select-autocomplete.has-success .help-block:before {
        border-bottom: 6px solid var(--color-border-primary);
    }


/* #endregion Validation */

/* #endregion ---------------------------------- Dropdowns -------------------------------------------- */
/* #region ---------------------------------- Mobile Dropdown ----------------------------------------- */
.mobile-dropdown {
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    z-index: 99999;
    inset-block-start: 0px;
    inset-inline-start: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--color-shade-600);
    transition: opacity 0.3s ease;
}

    .mobile-dropdown.active {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-dropdown .dropdown-panel {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        background-color: var(--color-bg-main);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        max-width: 900px;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.15, 1, 0.3, 1);
    }

    .mobile-dropdown.active .dropdown-panel {
        transform: translateY(0);
    }

    .mobile-dropdown .header {
        display: flex;
        width: 100%;
        height: 40px;
        align-items: center;
        justify-content: center;
        cursor: grab;
        touch-action: none;
    }

        .mobile-dropdown .header .handle {
            display: flex;
            width: 40px;
            height: 5px;
            border-radius: var(--radius-16);
            background-color: var(--color-border-basic);
        }

    .mobile-dropdown .content {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: calc(90vh - 40px);
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom); /* Учет "чёлки" снизу на iPhone */
    }

    .mobile-dropdown .item {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 60px;
        border: none;
        outline: none;
        text-decoration: none;
        color: var(--color-text-basic);
        font-weight: 600;
        text-transform: uppercase;
        background-color: var(--color-bg-main);
        font-size: 16px;
        flex-shrink: 0;
        cursor: pointer;
        transition: background 0.2s ease;
    }

        .mobile-dropdown .item:active {
            background-color: var(--color-bg-panel);
        }

        .mobile-dropdown .item:hover {
            opacity: 0.6;
            cursor: pointer;
        }

        .mobile-dropdown .item:active,
        .mobile-dropdown .item:focus,
        .mobile-dropdown .item:visited {
            opacity: 1;
        }

        .mobile-dropdown .item .icon {
            position: absolute;
            inset-block-start: 18px;
            inset-inline-start: 16px;
            font-size: 24px;
        }

*[dir='rtl'] .mobile-dropdown .item .icon {
    transform: rotateY(180deg);
}

.mobile-dropdown .divider {
    display: block;
    width: 100%;
    height: 1px;
    margin-block: 16px;
    background-color: var(--color-border-muted);
}

.mobile-dropdown .seller-details {
    display: flex;
    gap: 16px;
    align-items: center;
    align-self: stretch;
    padding-inline: 16px;
}

    .mobile-dropdown .seller-details .text-description {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 4px;
        flex: 1 0 0;
    }

        .mobile-dropdown .seller-details .text-description .name {
            font-size: 20px;
            font-weight: 600;
            line-height: 100%;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .mobile-dropdown .seller-details .text-description .status {
            display: none;
        }

            .mobile-dropdown .seller-details .text-description .status.online {
                display: inline-flex;
                background-color: var(--color-bg-success);
                color: var(--color-text-alt);
                font-weight: 400;
                border-radius: var(--radius-32);
                padding-inline: 12px;
                padding-block: 4px;
                margin-block-start: 4px;
            }

    .mobile-dropdown .seller-details .store-avatar {
        display: flex;
        width: 64px;
        height: 64px;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-16);
        font-size: 24px;
        background-color: var(--color-shade-100);
        position: relative;
        overflow: hidden;
    }

        .mobile-dropdown .seller-details .store-avatar .overlay {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 2;
            inset-inline-start: 0px;
            inset-block-start: 0px;
            background-color: var(--color-shade-100);
        }

        .mobile-dropdown .seller-details .store-avatar .store-logo {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 2;
            inset-inline-start: 0px;
            inset-block-start: 0px;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
        }

/* #endregion ------------------------------/ Mobile Dropdown ----------------------------------------- */
/* #region -------------------------------------- Popups ---------------------------------------------- */
.custom-popup {
    display: inline-block;
}

    .custom-popup.custom-popup-block {
        display: block;
    }

        .custom-popup.custom-popup-block .custom-popup-btn {
            display: block;
            width: 100%;
        }

    .custom-popup > .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .custom-popup .custom-popup-overlay {
        display: none;
        position: absolute;
        top: auto;
        left: 0px;
        z-index: 9999;
    }

*[dir='rtl'] .custom-popup .custom-popup-overlay {
    right: 0px;
    left: auto;
}

.custom-popup .custom-popup-overlay.custom-popup-right {
    right: 0px;
    left: auto;
}

*[dir='rtl'] .custom-popup .custom-popup-overlay.custom-popup-right {
    right: auto;
    left: 0px;
}

.custom-popup.active .custom-popup-overlay {
    display: block;
}

.custom-popup .custom-popup-overlay .inner {
    position: relative;
    display: block;
}

.custom-popup .custom-popup-panel {
    display: block;
    background-color: #FFFFFF;
    border-radius: var(--radius-4);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 20px;
    margin-top: 5px;
    list-style: none;
    min-width: 200px;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 5px;
}

*[dir='rtl'] .custom-popup .custom-popup-panel {
    text-align: right;
}

.custom-popup .custom-popup-panel li {
    display: block;
}

    .custom-popup .custom-popup-panel li.divider {
        width: 100%;
        height: 1px;
        background-color: #F2F2F2;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .custom-popup .custom-popup-panel li a {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        display: block;
        font-size: 14px;
        font-weight: 400;
        text-decoration: none;
        color: var(--color-text-basic);
        position: relative;
    }

        .custom-popup .custom-popup-panel li a .ci-check {
            display: none;
        }

    .custom-popup .custom-popup-panel li.active a .ci-check {
        display: block;
        position: absolute;
        z-index: 1;
        top: calc(50% - 6px);
        right: 10px;
        font-size: 12px;
    }

*[dir='rtl'] .custom-popup .custom-popup-panel li.active a .ci-check {
    left: 10px;
    right: auto;
}

.custom-popup .custom-popup-panel li.active a {
    background-color: #E6F4ED;
}

@media (max-width: 550px) {
    .custom-popup .custom-popup-overlay {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(7px);
        background-color: rgba(0, 0, 0, 0.3);
    }

    *[dir='rtl'] .custom-popup .custom-popup-overlay {
        position: fixed;
        top: 0px !important;
        left: auto !important;
        right: 0px !important;
        width: 100% !important;
        height: 100% !important;
    }

    .custom-popup .custom-popup-panel {
        width: 90%;
        left: 5%;
        top: calc(50vh - 90px);
    }

    *[dir='rtl'] .custom-popup .custom-popup-panel {
        left: auto !important;
        right: 5% !important;
    }
}

/* #endregion ---------------------------------- /Popups ---------------------------------------------- */
/* #region ------------------------------- Textbox Autocomplete --------------------------------------- */
.textbox-autocomplete .autocomplete-menu {
    display: none;
    /*position: absolute; */
    position: fixed;
    /* 
    top: 53px;
    left: 0px;
    */
    background-color: #FFFFFF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 35px;
    list-style: none;
    margin: 0px;
    padding: 0px;
    min-width: 100%;
    border-radius: var(--radius-4);
    max-height: 205px;
    overflow-y: auto;
    z-index: 11;
    scrollbar-width: thin;
}

    .textbox-autocomplete .autocomplete-menu.show {
        display: inline-block;
    }

    .textbox-autocomplete .autocomplete-menu li {
        display: block;
    }

        .textbox-autocomplete .autocomplete-menu li a {
            text-align: left;
            display: block;
            color: var(--color-text-basic) !important;
            text-decoration: none;
            font-size: 14px;
            padding: 10px 8px 10px 8px;
        }

*[dir='rtl'] .textbox-autocomplete .autocomplete-menu li a {
    text-align: right;
}


.textbox-autocomplete .autocomplete-menu li a:hover,
.textbox-autocomplete .autocomplete-menu li.focus a {
    background-color: #F9F9F9;
}

.textbox-autocomplete.textbox-labeled .autocomplete-menu {
    display: none;
    scrollbar-width: thin;
}

    .textbox-autocomplete.textbox-labeled .autocomplete-menu.show {
        display: inline-block;
        z-index: 9990;
    }

/* #endregion --------------------------- /Textbox Autocomplete --------------------------------------- */
/* #region ------------------------------ Dropdown Autocomplete --------------------------------------- */
.select-autocomplete {
    position: relative;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    padding: 0px;
    vertical-align: middle;
}

    .select-autocomplete.select-block {
        display: block;
    }

        .select-autocomplete.select-block input {
            width: 100%;
        }

    .select-autocomplete .select-control {
        position: relative;
        background-color: transparent;
        border: 0px none transparent;
        min-width: 0px;
        text-align: left;
        padding: 0px 0px 0px 0px;
        background-color: #F2F2F2;
        color: var(--color-text-basic);
        border-radius: var(--radius-4);
        -webkit-transition: background-color 0.2s ease;
        transition: background-color 0.2s ease;
    }

*[dir='rtl'] .select-autocomplete .select-control {
    text-align: right;
}

.select-autocomplete .select-control:hover {
    background-color: #F5F5F5;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select-autocomplete.select-inversed .select-control {
    background-color: #FFFFFF;
}

.select-autocomplete.select-inversed:hover .select-control {
    background-color: #FDFDFD;
}

.select-autocomplete .select-button {
    position: absolute;
    top: 0px;
    left: auto;
    right: 0px;
    height: 100%;
    display: block;
}

*[dir='rtl'] .select-autocomplete .select-button {
    left: 0px;
    right: auto;
}

.select-autocomplete input {
    padding: 12px 34px 11px 10px;
    border: 0px none transparent;
    background: transparent;
    width: 100%;
}

*[dir='rtl'] .select-autocomplete input {
    padding: 12px 10px 11px 34px;
}

.select-autocomplete.select-iconed input {
    padding: 12px 34px 11px 40px;
}

*[dir='rtl'] .select-autocomplete.select-iconed input {
    padding: 12px 40px 11px 34px;
}

.select-autocomplete .select-button {
    background-color: transparent;
    border: 0px none transparent;
    width: 34px;
}

.select-autocomplete.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

    .select-autocomplete.disabled .select-button,
    .select-autocomplete.disabled input[type='text'] {
        pointer-events: none;
    }

.select-autocomplete input::-webkit-input-placeholder {
    color: var(--color-text-muted);
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.select-autocomplete input::-moz-placeholder {
    color: var(--color-text-muted);
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.select-autocomplete input:-moz-placeholder {
    color: var(--color-text-muted);
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.select-autocomplete input:-ms-input-placeholder {
    color: var(--color-text-muted);
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.select-autocomplete.select-iconed .select-control *[class*='ci-'].select-icon {
    position: absolute;
    top: calc(50% - 13px);
    left: 7px;
    right: auto;
    font-size: 26px;
}

*[dir='rtl'] .select-autocomplete.select-iconed .select-control *[class*='ci-'].select-icon {
    left: auto;
    right: 7px;
}

.select-autocomplete.has-error .select-control {
    background-color: #FBCFCF;
    color: var(--color-text-danger);
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select-autocomplete.has-error:hover .select-control {
    background-color: #F9DBDB;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select-autocomplete.has-warning .select-control {
    color: var(--color-text-basic);
    background-color: #FFF9C5;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select-autocomplete.has-warning:hover .select-control {
    background-color: #FFFBD6;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select-autocomplete.has-success .select-control {
    color: var(--color-text-primary);
    background-color: #E6F4ED;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select-autocomplete.has-success:hover .select-control {
    background-color: #EBF6F1;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select-autocomplete.select-labeled .select-label {
    display: block;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 0px;
    padding-top: 11px;
    padding-left: 10px;
    padding-right: 35px;
    line-height: 14px;
}

*[dir='rtl'] .select-autocomplete.select-labeled .select-label {
    padding-left: 35px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-top: 11px;
}

.select-autocomplete.select-labeled.has-error .select-label {
    color: var(--color-text-danger);
}

.select-autocomplete.select-labeled.has-success .select-label {
    color: var(--color-text-primary);
}

.select-autocomplete.select-labeled input {
    padding-top: 6px;
    padding-bottom: 8px;
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-basic);
    line-height: 19px;
}

*[dir='rtl'] .select-autocomplete.select-labeled input {
    padding-top: 6px;
    padding-bottom: 8px;
}

.select-autocomplete.select-labeled-sm .select-label {
    display: block;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 4px;
    padding-left: 10px;
    padding-bottom: 0px;
    padding-right: 34px;
}


*[dir='rtl'] .select-autocomplete.select-labeled-sm .select-label {
    padding-left: 34px;
    padding-right: 10px;
    padding-top: 4px;
    padding-left: 10px;
}


.select-autocomplete.select-labeled-sm input {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-basic);
    line-height: 16px;
    padding-top: 0px;
    padding-bottom: 3px;
}

*[dir='rtl'] .select-autocomplete.select-labeled-sm input {
    padding-top: 0px;
    padding-bottom: 3px;
}

.select-autocomplete.select-labeled.select-iconed .select-label,
.select-autocomplete.select-labeled-sm.select-iconed .select-label {
    padding-left: 40px;
}

*[dir='rtl'] .select-autocomplete.select-labeled.select-iconed .select-label,
*[dir='rtl'] .select-autocomplete.select-labeled-sm.select-iconed .select-label {
    padding-right: 40px;
    padding-left: 34px;
}

.select-autocomplete.select-labeled.select-iconed.has-success .select-label,
.select-autocomplete.select-labeled-sm.select-iconed.has-success .select-label {
    color: var(--color-text-primary);
}

.select-autocomplete.select-labeled.select-iconed.has-error .select-label,
.select-autocomplete.select-labeled-sm.select-iconed.has-error .select-label {
    color: var(--color-text-danger);
}

/* #region Dropdown menu */
.select-autocomplete .options-list {
    display: none;
    /* position: absolute; */
    position: fixed;
    /* 
    top: 53px;
    left: 0px;
    */
    background-color: #FFFFFF;
    box-shadow: rgba(0,0,0,0.2) 0px 7px 35px;
    list-style: none;
    margin: 0px;
    padding: 0px;
    min-width: 100%;
    border-radius: var(--radius-4);
    max-height: 205px;
    overflow-y: auto;
    z-index: 11;
    scrollbar-width: thin;
}



    .select-autocomplete .options-list.show {
        display: inline-block;
    }


    .select-autocomplete .options-list li {
        display: block;
    }

    .select-autocomplete .options-list .divider {
        width: 100%;
        background-color: #F2F2F2;
        height: 1px;
    }

    .select-autocomplete .options-list li a {
        text-align: left;
        display: block;
        color: var(--color-text-basic) !important;
        text-decoration: none;
        font-size: 14px;
        padding: 10px 8px 10px 8px;
    }

*[dir='rtl'] .select-autocomplete .options-list li a {
    text-align: right;
}

.select-autocomplete .options-list li a:hover,
.select-autocomplete .options-list li.focus a {
    background-color: #F9F9F9;
}

.select-autocomplete .options-list li.selected a {
    background-color: #E6F4ED;
}

.select-autocomplete .options-list li.error a,
.select-autocomplete .options-list li.danger a {
    background-color: #FBCFCF;
}

.select-autocomplete .options-list li.warning a {
    background-color: #FFF9C5;
}

.select-autocomplete.select-iconed .options-list li > a {
    position: relative;
}


.select-autocomplete.select-iconed .options-list .options-icon + .options-content {
    padding-left: 30px;
    display: inline-block;
}

*[dir='rtl'] .select-autocomplete.select-iconed .options-list .options-icon + .options-content {
    padding-left: 0px;
    padding-right: 30px;
}

.select-autocomplete.select-iconed .options-list .options-icon {
    position: absolute;
    font-size: 28px;
    top: calc(50% - 14px);
    left: 3px;
}

*[dir='rtl'] .select-autocomplete.select-iconed .options-list .options-icon {
    right: 3px;
    left: auto;
}

.select-autocomplete.select-labeled .options-list.show {
    z-index: 9990;
}


/* #endregion Dropdown menu */
/* #endregion -------------------------- /Dropdown Autocomplete --------------------------------------- */
/* #region -------------------------------- Floating Textbox ------------------------------------------ */
.floating-textbox {
    display: flex;
    flex-direction: column;
    font-family: 'Manrope';
    font-weight: 500;
    gap: var(--gap-8);
    width: 100%;
    text-align: start;
}


input[data-format="currency"],
input[data-format="decimal"],
input[data-format="integer"],
input[data-format="phone"],
input[data-format="card"],
input[data-format="card-date"] {
    direction: ltr;
    unicode-bidi: isolate;
}

*[dir='rtl'] input[data-format="currency"],
*[dir='rtl'] input[data-format="decimal"],
*[dir='rtl'] input[data-format="integer"],
*[dir='rtl'] input[data-format="phone"],
*[dir='rtl'] input[data-format="card"],
*[dir='rtl'] input[data-format="card-date"] {
    text-align: right;
}

.floating-textbox .control {
    display: flex;
    align-items: center;
    gap: var(--gap-8);
    border-radius: var(--radius-8);
    padding-inline: var(--gap-16);
    height: 50px;
    background-color: var(--color-bg-panel-transparent);
    position: relative;
    transition: background-color 0.2s ease;
    font-size: 16px;
    color: var(--color-text-muted);
    font-weight: 400;
    white-space: nowrap;
}

    .floating-textbox .control i {
        color: var(--color-text-danger);
        font-style: normal;
        margin-inline-start: var(--gap-4);
    }

        .floating-textbox .control i[class^="ci-pazar"] {
            margin-inline-start: var(--gap-0);
        }

    .floating-textbox .control:focus-within,
    .floating-textbox .control:hover {
        background-color: var(--color-bg-inputs-transparent);
        transition: background-color 0.2s ease;
    }

.floating-textbox .text-content {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.floating-textbox .floating-input {
    width: 100%;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-family: 'Manrope' !important;
    font-size: 16px !important;
    color: var(--color-text-basic) !important;
    padding: 20px 0 4px 0 !important;
    box-sizing: border-box !important;
    font-weight: 400 !important;
    line-height: 130% !important;
    margin: 0px;
}

    .floating-textbox .floating-input::placeholder {
        color: var(--color-text-muted);
        opacity: 1; /* important to Firefox */
    }

    .floating-textbox .floating-input::-moz-placeholder {
        color: var(--color-text-muted);
        opacity: 1; /* important to Firefox */
    }

    .floating-textbox .floating-input:-ms-input-placeholder {
        color: var(--color-text-muted);
    }

    .floating-textbox .floating-input::-ms-input-placeholder {
        color: var(--color-text-muted);
    }

.floating-textbox .floating-label {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--color-text-muted);
    font-weight: 400;
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.2s ease, top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 130%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    width: 100%;
}

*[dir='rtl'] .floating-textbox .floating-label {
    transform-origin: right top;
    transition: transform 0.2s ease, top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

.floating-textbox .floating-label > * {
    font-size: inherit;
}

.floating-textbox .floating-label i {
    color: var(--color-text-danger);
    margin-inline-start: var(--gap-4);
    font-style: normal;
}

.floating-textbox .floating-input:focus ~ .floating-label,
.floating-textbox .floating-input:not(:placeholder-shown) ~ .floating-label {
    inset-block-start: 6px;
    transform: translateY(0) scale(0.75);
    font-weight: 400;
    color: var(--color-text-muted);
}


.floating-textbox .floating-input:not(:placeholder-shown):not(:focus) ~ .floating-label {
    color: var(--color-text-muted);
}

.floating-textbox .validation {
    display: none;
    color: var(--color-text-danger);
    font-size: 12px;
    padding-inline: var(--gap-16);
    line-height: 140%;
}

.floating-textbox .annotation {
    display: flex;
    align-items: start;
    gap: var(--gap-4);
    color: var(--color-text-muted);
    font-size: 12px;
    padding-inline: var(--gap-16);
    line-height: 140%;
}

    .floating-textbox .annotation span {
        padding-block-start: var(--gap-1);
    }

.floating-textbox.has-error .control {
    background-color: var(--color-red-100);
}

.floating-textbox.has-error .floating-input ~ .floating-label,
.floating-textbox.has-error .floating-input:focus ~ .floating-label,
.floating-textbox.has-error .floating-input:not(:placeholder-shown) ~ .floating-label {
    color: var(--color-text-danger);
}

.floating-textbox.has-error .validation {
    display: block;
}

.floating-textbox.has-error .annotation {
    display: none;
}

.floating-textbox .ci-pazar-bold {
    font-size: 24px;
    flex-shrink: 0;
}

.floating-textbox .annotation .ci-pazar-bold {
    font-size: 18px;
}


.floating-textbox.lg .control {
    height: 60px;
    border-radius: var(--radius-8);
    font-size: 18px !important;
    font-weight: 400;
    line-height: 100%;
}


.floating-textbox.lg .floating-input {
    font-size: 18px !important;
    line-height: 100%;
    padding: 26px 0 8px 0;
}

.floating-textbox.lg .floating-label {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 110%;
}

.floating-textbox.lg .floating-input:focus ~ .floating-label,
.floating-textbox.lg .floating-input:not(:placeholder-shown) ~ .floating-label {
    inset-block-start: 10px;
    transform: translateY(0) scale(0.65);
}




/* #region Autofill fixes */
.floating-textbox .floating-input:-webkit-autofill ~ .floating-label,
.floating-textbox .floating-input:-moz-autofill ~ .floating-label,
.floating-textbox .floating-input:autofill ~ .floating-label {
    inset-block-start: 6px;
    transform: translateY(0) scale(0.75);
    font-weight: 400;
    color: var(--color-text-muted);
}

.floating-textbox.lg .floating-input:-webkit-autofill ~ .floating-label,
.floating-textbox.lg .floating-input:-moz-autofill ~ .floating-label,
.floating-textbox.lg .floating-input:autofill ~ .floating-label {
    inset-block-start: 10px;
    transform: translateY(0) scale(0.65);
}

/* ----- (Chrome, Edge, Safari) ----- */
.floating-input:-webkit-autofill,
.floating-input:-webkit-autofill:hover,
.floating-input:-webkit-autofill:focus,
.floating-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: transparent !important;
    background-color: transparent !important;
    background-clip: padding-box;
    transition: background-color 5000s ease-in-out 0s;
}

.floating-textbox.has-value .floating-input:-webkit-autofill,
.floating-textbox.has-value .floating-input:-webkit-autofill:hover,
.floating-textbox.has-value .floating-input:-webkit-autofill:focus,
.floating-textbox.has-value .floating-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: var(--color-text-basic) !important;
    background-color: transparent !important;
    background-clip: padding-box;
    transition: background-color 5000s ease-in-out 0s;
}


/* ----- Firefox ----- */
.floating-input:-moz-autofill {
    background-color: transparent !important;
    color: var(--color-text-basic) !important;
}

/* ----- Standard ----- */
.floating-input:autofill {
    background-color: transparent !important;
    color: transparent !important;
}

.floating-textbox.has-value .floating-input:autofill {
    background-color: transparent !important;
    color: var(--color-text-basic) !important;
}

.floating-textbox .control:focus-within .floating-input:-webkit-autofill,
.floating-textbox .control:hover .floating-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
}

.floating-textbox .control:focus-within .floating-input:-webkit-autofill {
    color: var(--color-text-basic);
    -webkit-text-fill-color: var(--color-text-basic) !important;
}

.floating-textbox .control:focus-within .floating-input:-moz-autofill,
.floating-textbox .control:hover .floating-input:-moz-autofill {
    background-color: transparent !important;
}

.floating-textbox .control:focus-within .floating-input:autofill,
.floating-textbox .control:hover .floating-input:autofill {
    background-color: transparent !important;
}

/* ----- has-error ----- */
.floating-textbox.has-error .floating-input:-webkit-autofill,
.floating-textbox.has-error .floating-input:-webkit-autofill:hover,
.floating-textbox.has-error .floating-input:-webkit-autofill:focus,
.floating-textbox.has-error .floating-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
}

.floating-textbox.has-error .floating-input:-moz-autofill {
    background-color: transparent !important;
}

.floating-textbox.has-error .floating-input:autofill {
    background-color: transparent !important;
}

/* #region .has-value (for JS)  */

.floating-textbox.has-value .floating-input ~ .floating-label {
    inset-block-start: 6px;
    transform: translateY(0) scale(0.75);
    font-weight: 400;
    color: var(--color-text-muted);
}

.floating-textbox.lg.has-value .floating-input ~ .floating-label {
    inset-block-start: 10px;
    transform: translateY(0) scale(0.65);
}

.floating-textbox.has-error.has-value .floating-input ~ .floating-label {
    color: var(--color-text-danger);
}

/* #endregion .has-value (for JS) */

/* #endregion */


/* #region Eraser */
.floating-input::-ms-clear,
.floating-input::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

.floating-input::-webkit-search-decoration,
.floating-input::-webkit-search-cancel-button,
.floating-input::-webkit-search-results-button,
.floating-input::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
}


.floating-textbox .eraser {
    border: 0px none transparent;
    outline: none;
    font-size: 12px;
    height: 100%;
    padding-inline-end: 0px;
    padding-inline-start: var(--gap-16);
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    display: none;
    transition: opacity 0.15s ease-in-out;
}


.floating-textbox .control:has(.floating-input:not(:placeholder-shown)) .eraser {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.floating-textbox .eraser + * {
    margin-inline-start: var(--gap-4);
    line-height: 100%;
}

/* #endregion Eraser */
/* #region No Label */
.floating-textbox.no-label .floating-label,
.floating-textbox.sm .floating-label {
    display: none !important;
}

.floating-textbox.no-label .floating-input,
.floating-textbox.sm .floating-input {
    padding: 0 !important;
}


.floating-textbox.sm .control {
    height: 40px;
    padding-inline: var(--gap-12);
    border-radius: var(--radius-4);
}

.floating-textbox.sm .floating-input {
    font-size: 16px !important;
    line-height: 20px;
}

.floating-textbox.sm .eraser .ci-pazar-small {
    font-size: 12px;
}

.floating-textbox.sm .annotation,
.floating-textbox.sm .validation {
    padding-inline: var(--gap-12);
}

.floating-textbox.sm .control > label {
    font-weight: 400;
}

.floating-textbox.sm.no-label .control > label {
    display: none;
}
/* #endregion No Label */
/* #region Bordered */
.floating-textbox.bordered .control {
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border-basic);
    transition: border 0.2s ease;
}

    .floating-textbox.bordered .control:hover,
    .floating-textbox.bordered .control:focus-within {
        background-color: var(--color-bg-main);
        border: 1px solid var(--color-border-dark);
        transition: border 0.2s ease;
    }

.floating-textbox.bordered.has-error .control,
.floating-textbox.bordered.has-error .control:hover,
.floating-textbox.bordered.has-error .control:focus-within {
    border: 1px solid var(--color-border-danger);
}

.floating-textbox.bordered.has-error .floating-label {
    color: var(--color-text-muted);
}


/* #endregion Bordered */
/* #region Password */
.floating-textbox .view-password {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: 0px;
    background: transparent;
    border: 0px none transparent;
    outline: none;
    box-shadow: none;
}

    .floating-textbox .view-password:focus {
        outline: none;
        box-shadow: none;
    }

/* #endregion Password */

/* #endregion -----------------------------/ Floating Textbox ----------------------------------------- */
/* #region -------------------------------- Floating Textarea ----------------------------------------- */

.floating-textarea {
    display: flex;
    flex-direction: column;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    gap: var(--gap-8);
    width: 100%;
    text-align: start;
}

    /* ---------- Control ---------- */
    .floating-textarea .control {
        display: flex;
        flex-direction: column;
        gap: var(--gap-8);
        border-radius: var(--radius-8);
        padding-inline: 0px;
        padding-block: var(--gap-8);
        min-height: 50px; /* default */
        background-color: var(--color-bg-panel-transparent);
        position: relative;
        transition: background-color 0.2s ease;
        font-size: 16px;
        color: var(--color-text-muted);
        font-weight: 400;
    }

        .floating-textarea .control:focus-within,
        .floating-textarea .control:hover {
            background-color: var(--color-bg-inputs-transparent);
            transition: background-color 0.2s ease;
        }

    .floating-textarea .text-content {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .floating-textarea .textarea-scroll-wrapper {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
        padding-inline: var(--gap-16);
    }

    .floating-textarea .floating-input {
        width: 100%;
        height: 100%;
        border: none;
        background-color: transparent !important;
        outline: none;
        font-family: inherit;
        font-weight: inherit;
        font-size: 16px;
        color: var(--color-text-basic);
        padding: 0px !important;
        margin-block-start: 6px;
        box-sizing: border-box;
        font-weight: 400;
        resize: none;
        overflow: hidden;
        transition: margin-block-start 0.2s ease;
        border-radius: 0px !important;
    }

        .floating-textarea .floating-input:focus,
        .floating-textarea .floating-input:not(:placeholder-shown) {
            margin-block-start: 20px;
        }

        .floating-textarea .floating-input::placeholder {
            color: var(--color-text-muted);
            opacity: 1;
        }

        .floating-textarea .floating-input::-moz-placeholder {
            color: var(--color-text-muted);
            opacity: 1;
        }

        .floating-textarea .floating-input:-ms-input-placeholder {
            color: var(--color-text-muted);
        }

        .floating-textarea .floating-input::-ms-input-placeholder {
            color: var(--color-text-muted);
        }

    .floating-textarea .textarea-scroll-wrapper .floating-label {
        position: absolute;
        inset-inline-start: var(--gap-16);
        inset-block-start: 6px;
        transform: translateY(0);
        font-size: 16px;
        color: var(--color-text-muted);
        font-weight: 400;
        pointer-events: none;
        transform-origin: left top;
        transition: transform 0.2s ease, top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90%;
        z-index: 2;
    }

*[dir='rtl'] .floating-textarea .textarea-scroll-wrapper .floating-label {
    transform-origin: right top;
}

.floating-textarea .textarea-scroll-wrapper .floating-label span {
    font-size: inherit;
    line-height: 130%;
}

.floating-textarea .floating-label i {
    color: var(--color-text-danger);
    margin-inline-start: var(--gap-4);
    font-style: normal;
}

.floating-textarea .textarea-scroll-wrapper .floating-input:focus ~ .floating-label,
.floating-textarea .textarea-scroll-wrapper .floating-input:not(:placeholder-shown) ~ .floating-label {
    inset-block-start: 6px;
    transform: translateY(-8px) scale(0.75);
    font-weight: 400;
    color: var(--color-text-muted);
}

.floating-textarea .textarea-scroll-wrapper .floating-input:not(:placeholder-shown):not(:focus) ~ .floating-label {
    color: var(--color-text-muted);
}

.floating-textarea .textarea-footer {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 32px;
    padding-inline: var(--gap-16);
    font-size: 12px;
    color: var(--color-text-muted);
    gap: var(--gap-8);
}

.floating-textarea .char-counter {
    font-weight: 400;
    font-size: 12px;
    color: var(--color-text-muted);
    direction: ltr;
}

.floating-textarea .resize-handle {
    cursor: nwse-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    user-select: none;
    transition: color 0.2s;
    font-size: 14px;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

    .floating-textarea .resize-handle:hover,
    .floating-textarea .resize-handle:active {
        opacity: 1;
        transition: opacity 0.2s ease;
    }

    .floating-textarea .resize-handle .ci-pazar-small {
        transform: rotateZ(45deg);
        display: inline-block;
        margin-inline-end: -8px;
    }

*[dir='rtl'] .floating-textarea .resize-handle {
    margin-left: 0;
    margin-right: auto;
}

    *[dir='rtl'] .floating-textarea .resize-handle .ci-pazar-small {
        transform: rotateZ(135deg);
    }

.floating-textarea.no-counter .char-counter {
    display: none;
}

.floating-textarea.no-resize .resize-handle {
    display: none;
    margin: 0;
}

.floating-textarea.no-counter.no-resize .textarea-footer {
    display: none;
}

.floating-textarea .validation {
    display: none;
    color: var(--color-text-danger);
    font-size: 12px;
    padding-inline: var(--gap-16);
    line-height: 140%;
}

.floating-textarea .annotation {
    display: flex;
    align-items: start;
    gap: var(--gap-4);
    color: var(--color-text-muted);
    font-size: 12px;
    padding-inline: var(--gap-16);
    line-height: 140%;
}

    .floating-textarea .annotation span {
        padding-block-start: var(--gap-1);
    }

    .floating-textarea .annotation i {
        font-size: 18px;
        flex-shrink: 0;
    }

.floating-textarea.has-error .control {
    background-color: var(--color-red-100);
}

.floating-textarea.has-error .textarea-scroll-wrapper .floating-input ~ .floating-label,
.floating-textarea.has-error .textarea-scroll-wrapper .floating-input:focus ~ .floating-label,
.floating-textarea.has-error .textarea-scroll-wrapper .floating-input:not(:placeholder-shown) ~ .floating-label {
    color: var(--color-text-danger);
}

.floating-textarea.has-error .validation {
    display: block;
}

.floating-textarea.has-error .annotation {
    display: none;
}
/* #region Custom Scrollbar */
.floating-textarea .textarea-scroll-wrapper .scrollbar-track {
    position: absolute;
    top: 0;
    right: 2px;
    width: 4px;
    height: 100%;
    border-radius: 4px;
    background: transparent;
    pointer-events: none;
}

.floating-textarea .textarea-scroll-wrapper .scrollbar-thumb {
    position: absolute;
    width: 100%;
    border-radius: 4px;
    background: transparent;
    pointer-events: auto;
    cursor: pointer;
    min-height: 20px;
    transition: background 0.2s;
    touch-action: none;
    display: none;
}

.floating-textarea .textarea-scroll-wrapper:hover .scrollbar-thumb {
    background: var(--color-shade-300);
}

.floating-textarea .textarea-scroll-wrapper .scrollbar-thumb:hover,
.floating-textarea .textarea-scroll-wrapper .scrollbar-thumb:active {
    background: var(--color-shade-500);
}

.floating-textarea .textarea-scroll-wrapper.always-visible .scrollbar-thumb {
    background: var(--color-shade-300);
}

    .floating-textarea .textarea-scroll-wrapper.always-visible .scrollbar-thumb:hover,
    .floating-textarea .textarea-scroll-wrapper.always-visible .scrollbar-thumb:active {
        background: var(--color-shade-500);
    }

*[dir='rtl'] .floating-textarea .textarea-scroll-wrapper .scrollbar-track {
    right: auto;
    left: 2px;
}
/* #endregion Custom Scrollbar */

/* #region Sizes */
/* LG */
.floating-textarea.lg .control {
    min-height: 60px;
    border-radius: var(--radius-8);
    font-size: 18px;
    font-weight: 400;
    line-height: 100%;
}

.floating-textarea.lg .floating-input {
    font-size: 18px;
    line-height: 130%;
    margin-block-start: 10px;
}

    .floating-textarea.lg .floating-input:focus,
    .floating-textarea.lg .floating-input:not(:placeholder-shown) {
        margin-block-start: 24px;
    }

.floating-textarea.lg .textarea-scroll-wrapper .floating-label {
    font-size: 18px;
    font-weight: 400 !important;
    line-height: 130%;
    inset-block-start: 10px;
}

.floating-textarea.lg .textarea-scroll-wrapper .floating-input:focus ~ .floating-label,
.floating-textarea.lg .textarea-scroll-wrapper .floating-input:not(:placeholder-shown) ~ .floating-label {
    inset-block-start: 6px;
    transform: translateY(-6px) scale(0.65);
}


/* SM */
.floating-textarea.sm .control {
    min-height: 40px;
    padding-block: var(--gap-4);
    border-radius: var(--radius-4);
}

.floating-textarea.sm .floating-input {
    font-size: 16px;
    line-height: 24px;
    margin-block-start: var(--gap-4);
}

.floating-textarea.sm .textarea-scroll-wrapper {
    padding-inline: var(--gap-12);
}

.floating-textarea.sm .floating-input:focus,
.floating-textarea.sm .floating-input:not(:placeholder-shown) {
    margin-block-start: var(--gap-4);
}

.floating-textarea.sm .textarea-scroll-wrapper .floating-label {
    display: none !important;
}

.floating-textarea.sm .textarea-footer {
    height: 24px;
    font-size: 12px;
    padding-inline: var(--gap-12);
}

.floating-textarea.sm .resize-handle {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.floating-textarea.sm .validation,
.floating-textarea.sm .annotation {
    padding-inline: var(--gap-12);
}

/* No label */
.floating-textarea.no-label .floating-label {
    display: none !important;
}

.floating-textarea.no-label .floating-input {
    margin-block-start: 6px
}

.floating-textarea.sm.no-label .floating-input {
    margin-block-start: 4px
}

.floating-textarea.lg.no-label .floating-input {
    margin-block-start: 10px
}

.floating-textarea.no-label .floating-input:focus,
.floating-textarea.no-label .floating-input:not(:placeholder-shown) {
    margin-block-start: 6px;
}

.floating-textarea.sm.no-label .floating-input:focus,
.floating-textarea.sm.no-label .floating-input:not(:placeholder-shown) {
    margin-block-start: 4px;
}

.floating-textarea.lg.no-label .floating-input:focus,
.floating-textarea.lg.no-label .floating-input:not(:placeholder-shown) {
    margin-block-start: 10px;
}

/* #endregion Sizes */

/* #endregion --------------------------- / Floating Textarea ----------------------------------------- */
/* #region ------------------------------------ Select ------------------------------------------------ */
/* #region ------------------------ Selects ------------------------- */
.select-new .caret {
    border: 0px none transparent;
    width: auto;
    height: auto;
    display: inherit;
    margin: 0px;
    font-size: 14px;
    flex-shrink: 0;
}

.select-new .default-attachment {
    display: flex;
}

.select-new .attachment {
    display: none;
}

    .select-new .default-attachment [class^="ci-pazar"],
    .select-new .attachment [class^="ci-pazar"] {
        font-size: 24px;
        flex-shrink: 0;
    }

.select-new.selected .default-attachment {
    display: none;
}

.select-new.selected.multiselected .default-attachment {
    display: flex;
}

.select-new.selected .attachment {
    display: flex;
}

.select-new.selected.multiselected .attachment {
    display: none;
}

.select-new .eraser {
    border: 0px none transparent;
    outline: none;
    font-size: 12px;
    height: 100%;
    padding-inline-end: var(--gap-8);
    padding-inline-start: var(--gap-16);
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    display: none;
    transition: opacity 0.15s ease-in-out;
}

.select-new.selected .eraser {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.select-new .validation {
    display: none;
    color: var(--color-text-danger);
    font-size: 12px;
    padding-inline: var(--gap-16);
    line-height: 140%;
}

.select-new .annotation {
    display: flex;
    align-items: start;
    gap: var(--gap-4);
    color: var(--color-text-muted);
    font-size: 12px;
    padding-inline: var(--gap-16);
    line-height: 140%;
}

    .select-new .annotation span {
        padding-block-start: var(--gap-1);
    }

.select-new.has-error .validation {
    display: block;
}

.select-new.has-error .annotation {
    display: none;
}

.select-new .annotation .ci-pazar-bold {
    font-size: 18px;
    flex-shrink: 0;
}

.select-new .multi-data {
    display: none;
}

.select-new.selected.multiselected .multi-data {
    display: inline-block;
    margin-inline-end: var(--gap-4);
}

/* #region Swatch */
.select-new .swatch {
    width: 24px;
    height: 24px;
    display: flex;
    border-radius: var(--radius-circle);
    border: 1px solid var(--color-border-basic);
}
/* #endregion Swatch */

/* #region Floating Selects */
.select-new.floating-select {
    display: flex;
    flex-direction: column;
    font-family: 'Manrope';
    font-weight: 500;
    gap: var(--gap-8);
    width: 100%;
    text-align: start;
}

    .select-new.floating-select .control {
        display: flex;
        align-items: center;
        gap: var(--gap-8);
        border-radius: var(--radius-8);
        padding-inline: var(--gap-16);
        height: 50px;
        background-color: var(--color-bg-panel-transparent);
        position: relative;
        font-size: 16px;
        color: var(--color-text-muted);
        font-weight: 400;
        white-space: nowrap;
        transition: background-color 0.2s ease;
    }

    .select-new.floating-select .text-content {
        width: 100%;
        position: relative;
        height: 100%;
        overflow: hidden;
    }

    .select-new.floating-select .control:focus-within,
    .select-new.floating-select .control:hover,
    .select-new.floating-select.active .control {
        background-color: var(--color-bg-inputs-transparent);
        transition: background-color 0.2s ease;
    }

    .select-new.floating-select .text-content .selection {
        opacity: 0;
        transition: opacity 0.2s ease;
        font-size: 16px;
        font-weight: 400;
        height: 100%;
        vertical-align: middle;
        color: var(--color-text-basic);
        display: flex;
        align-items: center;
        padding-block-start: 17px;
    }

    .select-new.floating-select.selected .text-content .selection {
        opacity: 1;
        transition: opacity 0.2s ease;
    }

    .select-new.floating-select .text-content .floating-label {
        position: absolute;
        inset-inline-start: 0px;
        inset-block-start: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        font-weight: 400;
        font-family: 'Manrope';
        color: var(--color-text-muted);
        line-height: 130%;
        z-index: 1;
        transform-origin: left top;
        pointer-events: none;
        transition: transform 0.2s ease, top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .select-new.floating-select .text-content .floating-label span {
            font-size: inherit;
        }


    .select-new.floating-select.selected .text-content .floating-label {
        inset-block-start: 7px;
        transform: translateY(0) scale(0.75);
        transition: transform 0.2s ease, top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
    }

*[dir='rtl'] .select-new.floating-select .text-content .floating-label {
    transform-origin: right top;
    transition: transform 0.2s ease, top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

.select-new.floating-select .floating-label i {
    color: var(--color-text-danger);
    margin-inline-start: var(--gap-4);
    font-style: normal;
}

.select-new.floating-select.selected.has-error .floating-label,
.select-new.floating-select.has-error .floating-label {
    color: var(--color-text-danger);
}

.select-new.floating-select .floating-label .filled {
    display: none;
}

.select-new.floating-select .floating-label .empty {
    display: inherit;
}

.select-new.floating-select.selected .floating-label .filled {
    display: inherit;
}

.select-new.floating-select.selected .floating-label .empty {
    display: none;
}

.select-new.floating-select.has-error .control {
    background-color: var(--color-red-100);
}

.select-new.floating-select.no-label .text-content .selection {
    padding-block-start: 0px;
}

.select-new.floating-select.selected.no-label .text-content .floating-label {
    inset-inline-start: 0px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    transition: none;
    opacity: 0;
}

.select-new.floating-select .selection-data {
    font-size: inherit;
}

.select-new.floating-select.bordered .control {
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border-basic);
    transition: border 0.2s ease;
}

.select-new.floating-select.bordered:hover .control,
.select-new.floating-select.bordered.active .control {
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border-dark);
    transition: border 0.2s ease;
}

/* Size: lg */
.select-new.floating-select.lg .control {
    gap: var(--gap-8);
    height: 60px;
    font-size: 18px;
}

.select-new.floating-select.lg .text-content .selection {
    font-size: 18px;
    padding-block-start: 20px;
}

.select-new.floating-select.lg .text-content .floating-label {
    font-size: 18px;
}

.select-new.floating-select.selected.lg .text-content .floating-label {
    inset-block-start: 8px;
    transform: translateY(0) scale(0.65);
    transition: transform 0.2s ease, top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

.select-new.floating-select.lg.no-label .text-content .selection {
    padding-block-start: 0px;
}

.select-new.floating-select.selected.lg.no-label .text-content .floating-label {
    inset-inline-start: 0px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    transition: none;
    opacity: 0;
}


/* Size: sm */
.select-new.floating-select.sm .control {
    gap: var(--gap-8);
    border-radius: var(--radius-4);
    padding-inline: var(--gap-12);
    height: 40px;
    font-size: 16px;
}

.select-new.floating-select.sm .text-content .selection {
    font-size: 16px;
    padding-block-start: 0px;
    display: inline-flex;
}

.select-new.floating-select.sm.selected .text-content .selection {
    font-size: 16px;
    padding-block-start: 0px;
    display: inline-flex;
}

.select-new.floating-select.sm .text-content .floating-label,
.select-new.floating-select.sm.no-label .text-content .floating-label {
    font-size: 16px;
    inset-block-start: calc(50% - 1px);
    transition: none;
}

.select-new.floating-select.selected.sm .text-content .floating-label {
    opacity: 1;
    transition: none;
    position: static !important;
    font-size: 16px;
    display: inline-flex;
    width: auto;
    transform: none;
    padding-inline-end: var(--gap-4);
    height: 100%;
    align-items: center;
}

.select-new.floating-select.selected.sm .text-content {
    align-items: center;
    display: flex;
}


.select-new.floating-select.selected.sm.no-label .text-content .floating-label {
    opacity: 0;
    transition: none;
    display: none;
}


/* #endregion Floating Selects */
/* #endregion --------------------/ Selects ------------------------- */
/* #region --------------------- Dropup Menus ----------------------- */
.dropup .options {
    padding: var(--gap-8);
}

.dropup .option-item {
    cursor: pointer;
    border-radius: var(--radius-8);
    display: flex;
    width: 100%;
    align-items: center;
    padding-inline: var(--gap-8);
    min-height: 40px;
    gap: var(--gap-8);
    transition: background-color 0.2s ease;
    font-weight: 500;
    color: var(--color-text-basic);
    font-size: 16px;
    position: relative;
}

    .dropup .option-item.parent {
        min-height: 50px;
    }



    .dropup .option-item:hover,
    .dropup .option-item.active:hover {
        background-color: var(--color-bg-inputs-transparent);
        transition: background-color 0.2s ease;
    }


@media (hover: hover) {
    .dropup .option-item:hover {
        background-color: var(--color-bg-inputs-transparent);
        transition: background-color 0.2s ease;
    }
}

.dropup-mobile .option-item:hover {
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.dropup .option-item.active {
    background-color: var(--color-bg-panel);
    transition: background-color 0.2s ease;
}


.dropup .option-item .attachment {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

    .dropup .option-item .attachment [class^="ci-pazar"] {
        font-size: 24px;
    }

.dropup .option-item .text-content {
    width: 100%;
}

.dropup .option-item.parent .text-content {
    font-weight: 700;
}

.dropup .option-item .additional-info {
    flex-shrink: 0;
    color: var(--color-text-muted);
}


/* #region Shimmered items */
.dropup .shimmered-option-item {
    width: 100%;
    height: 40px;
    padding-block: var(--gap-8);
}

    .dropup .shimmered-option-item .shimm-item {
        height: 100%;
    }
/* #endregion Shimmered items */
/* #region Checker */
.dropup .option-item .checker {
    display: flex;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-4);
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border: 2px solid var(--color-border-basic);
    flex-shrink: 0;
}

    .dropup .option-item .checker > * {
        display: none;
    }

.dropup .option-item.active .checker {
    background-color: var(--color-bg-primary);
    border: 0px none transparent;
}

    .dropup .option-item.active .checker > * {
        display: block;
    }

/* #endregion Checker */
/* #region Swatch */
.dropup .option-item .swatch {
    width: 24px;
    height: 24px;
    display: flex;
    border-radius: var(--radius-circle);
    border: 1px solid var(--color-border-basic);
}
/* #endregion Swatch */
/* Mobile */
.dropup-mobile .option-item {
    min-height: 50px;
}

    .dropup-mobile .option-item.parent {
        min-height: 60px;
    }

        .dropup-mobile .option-item.parent .text-content {
            font-size: 18px;
        }


/* #region --------- Dropup Menu Skins -------- */
/* #region Simple Dropup */
.dropup-mobile.simple-dropup .option-item {
    height: 50px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
}

.dropup-mobile.simple-dropup .dropup-content {
    margin-block-end: var(--gap-12);
}

.dropup-mobile.simple-dropup .option-item .checker {
    position: absolute;
    z-index: 1;
    inset-inline-start: var(--gap-8);
    inset-block-start: calc(50% - var(--gap-12));
}
/* #endregion Simple Dropup */
/* #region Multiselect filter */
.dropup.multiselect-filter .dropup-footer {
    border-top: 1px solid var(--color-border-muted);
    gap: var(--gap-8);
    display: none;
    padding: var(--gap-8);
}

    .dropup.multiselect-filter .dropup-footer .new-btn,
    .dropup.multiselect-filter .dropup-footer .new-btn.btn-primary {
        height: 50px;
        font-size: 16px;
        font-weight: 700;
    }

.dropup.dropup-mobile.multiselect-filter .dropup-footer {
    display: flex;
}
/* #endregion Multiselect filter */
/* #endregion ------ Dropup Menu Skins -------- */
/* #endregion -----------------/ Dropup Menus ----------------------- */
/* #endregion --------------------------------/ Select ------------------------------------------------ */
/* #region --------------------------------- Text labels ---------------------------------------------- */
.text-label {
    display: inline-block;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    padding: 6px 10px 5px 10px;
    border-radius: var(--radius-4);
    color: var(--color-text-muted);
    background-color: rgba(0, 0, 0, 0.1);
}

    .text-label.success {
        color: var(--color-text-primary);
        background-color: rgba(93, 170, 98, 0.1);
    }

    .text-label.warning {
        color: var(--color-text-muted);
        background-color: rgba(255, 229, 0, 0.3);
    }

    .text-label.danger {
        color: var(--color-text-danger);
        background-color: rgba(229, 11, 11, 0.2);
    }


/* #endregion ------------------------------ Text labels ---------------------------------------------- */
/* #region --------------------------------- Text badges ---------------------------------------------- */
.text-badge {
    display: inline;
    font-size: 12px;
    line-height: 30px;
    font-weight: 400;
    border-radius: 50px;
    background-color: #EBEBEB;
    color: var(--color-text-basic) !important;
    padding-block: 6px;
    padding-inline: 10px;
    margin-inline: 2px;
    text-decoration: none !important;
    border: 0px none transparent;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

button.text-badge {
    cursor: pointer;
}

    button.text-badge:hover, a.text-badge:hover {
        opacity: 0.6;
        transition: opacity 0.2s ease-in-out;
    }

.text-badge.no-wrap {
    white-space: nowrap;
    display: inline-block;
    line-height: 14px;
    margin-block-end: 4px;
}

.text-badge.ellipsis {
    white-space: nowrap;
    display: inline-block;
    line-height: 14px;
    margin-block-end: 4px;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: -moz-available;
    max-width: -webkit-fill-available;
}

.text-badge.success {
    background-color: #D5F5DC;
}

/* #endregion ----------------------------- /Text badges ---------------------------------------------- */
/* #region ------------------------------------ Collapsers -------------------------------------------- */
.collapser .collapser-content {
    height: auto;
    opacity: 1;
    transition: opacity 0.1s ease;
}

.collapser.collapsed .collapser-content {
    height: 0px;
    opacity: 0;
    transition: opacity 0.1s ease;
}
/* #endregion -------------------------------- /Collapsers -------------------------------------------- */
/* #region ------------------------------------ Truncator --------------------------------------------- */

.truncator {
    display: block;
    width: 100%;
}

.truncator-content {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
    transition: max-height 0.25s ease;
    position: relative;
}

/* Градиент показываем ТОЛЬКО когда контент реально обрезан */
.truncator.shadowed.is-truncated .truncator-content::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: var(--truncator-shadow-height, 100px);
    background: linear-gradient( var(--truncator-shadow-from, rgba(255, 255, 255, 0)), var(--truncator-shadow-to, rgba(255, 255, 255, 1)) );
    bottom: 0;
    left: 0;
    pointer-events: none; /* чтобы градиент не перехватывал клики/выделение */
}

/* При раскрытии градиент исчезает */
.truncator.shadowed.is-truncated .truncator-content.is-open::before {
    content: '';
    display: none;
}

.truncator-content.is-open {
    display: block;
    -webkit-line-clamp: unset;
    max-height: none;
    overflow: visible;
}

.truncator-toggle {
    display: inline-block;
    margin-block-start: var(--gap-4);
    padding: var(--gap-4) 0px;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s ease;
}

    .truncator-toggle .ci-pazar-small {
        margin-inline-start: var(--gap-4);
    }

    .truncator-toggle:hover {
        opacity: 0.6;
        transition: opacity 0.2s ease;
    }

    .truncator-toggle:focus-visible {
        outline: 2px solid var(--color-brand-800);
    }

    .truncator-toggle.is-hidden {
        display: none;
    }



.truncator-content ~ .truncator-toggle .truncator-show-more {
    display: inline-flex;
}

.truncator-show-less {
    display: none;
}

.truncator-content.is-open ~ .truncator-toggle .truncator-show-more {
    display: none;
}

.truncator-content.is-open ~ .truncator-toggle .truncator-show-less {
    display: inline-flex;
}

.truncator .truncator-show-more,
.truncator .truncator-show-less {
    align-items: center;
}


/* #endregion --------------------------------/ Truncator --------------------------------------------- */
/* #region -------------------------------- Content Cutters ------------------------------------------- */
.content-cutter {
    position: relative;
    overflow: visible;
    height: auto;
    padding-block-end: 70px;
}

    .content-cutter.collapsed {
        overflow: hidden;
        height: 250px;
    }

    .content-cutter .content-cutter-btn .collapsed {
        display: none;
    }

    .content-cutter.collapsed .content-cutter-btn .collapsed {
        display: block;
    }

    .content-cutter .content-cutter-btn .expanded {
        display: block;
    }

    .content-cutter .content-cutter-btn i {
        transform: rotateZ(180deg);
    }

    .content-cutter.collapsed .content-cutter-btn i {
        transform: rotateZ(0deg);
    }

    .content-cutter.collapsed .content-cutter-btn .expanded {
        display: none;
    }

    .content-cutter .content-cutter-panel {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 100%;
        background: #FFFFFF;
        background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 100%);
        padding-block-start: 30px;
    }

    .content-cutter .content-cutter-btn {
        border: 0px none transparent;
        background-color: transparent;
        color: var(--color-text-primary);
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        display: flex;
        gap: 8px;
        padding-block: 16px;
        padding-inline: 0px;
        align-items: center;
        line-height: 100%;
    }

        .content-cutter .content-cutter-btn i {
            font-size: 10px;
            margin-block-end: 2px;
        }

@media(max-width: 767px) {
    .content-cutter .content-cutter-panel {
        padding-inline: 16px;
    }
}



/* #endregion ---------------------------- /Content Cutters ------------------------------------------- */
/* #region ----------------------------------- Progressbar -------------------------------------------- */
.progressbar {
    display: block;
    width: 100%;
    background-color: rgba(93, 170, 128, 0.2);
    overflow: hidden;
    box-shadow: none;
    border-radius: var(--radius-4);
    font-size: 0px;
    text-align: left;
    height: 10px;
}

*[dir='rtl'] .progressbar {
    text-align: right;
}

.progressbar .progress {
    display: block;
    font-size: 14px;
    box-shadow: none;
    background-color: var(--color-bg-primary);
    margin: 0px;
    height: 100%;
    border-radius: var(--radius-4);
    transition: width 0.2s ease-in-out;
    background-image: none;
    box-shadow: none;
    border: 0px none transparent;
}

.progressbar.progressbar-mini {
    height: 3px;
}

.progressbar.progressbar-inline {
    display: inline-block;
    vertical-align: middle;
    min-width: 100px;
    width: auto;
}

/* #endregion ------------------------------- /Progressbar -------------------------------------------- */
/* #region -------------------------------- Circle Progressbar ---------------------------------------- */
.circle-progress {
    position: relative;
    width: 100px;
    height: 100px;
    display: inline-block;
}

    .circle-progress .progress-field {
        position: absolute;
        z-index: 1;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 5px solid #DDDDDD;
    }

    .circle-progress svg {
        position: absolute;
        z-index: 2;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }

    .circle-progress circle {
        stroke-dashoffset: 302;
        transform-origin: center;
        transform: rotate(-90deg);
        transition: stroke-dashoffset 2s ease-in-out;
        fill: transparent;
        stroke-linecap: round;
        stroke-width: 5;
    }

    .circle-progress.success circle {
        stroke: var(--color-border-primary);
    }

    .circle-progress.warning circle {
        stroke: #F6AD3F;
    }

    .circle-progress.danger circle {
        stroke: var(--color-text-danger);
    }

    .circle-progress .content {
        position: absolute;
        left: 0px;
        top: calc(50% - 16px);
        width: 100%;
        display: block;
        text-align: center;
        z-index: 1;
    }

        .circle-progress .content span {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 24px;
            color: var(--color-text-basic);
            font-weight: 500;
            line-height: 26px;
        }

        .circle-progress .content small {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 9px;
            color: var(--color-text-muted);
            font-weight: 500;
            text-transform: uppercase;
        }

/* #endregion ---------------------------- /Circle Progressbar ---------------------------------------- */
/* #region --------------------------- Circle Progressbar (No scripts) -------------------------------- */

@property --current-anim {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.ad-status-progress {
    width: 120px;
}

.radial-progress {
    --progress: calc((var(--current-anim) / var(--max)) * 100%);
    --stroke-width: calc(100% * 0.065);
    --is-warning: clamp(0, 4 - var(--current), 1);
    --is-danger: clamp(0, 2 - var(--current), 1);
    --color-step-1: color-mix(in srgb, var(--color-bg-warning-dark) calc(var(--is-warning) * 100%), var(--color-bg-primary));
    --bar-color: color-mix(in srgb, var(--color-bg-danger) calc(var(--is-danger) * 100%), var(--color-step-1));
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background: conic-gradient(var(--bar-color) var(--progress), var(--color-border-basic) 0);
    container-type: inline-size;
    animation: fillProgress 0.8s ease forwards;
}

.inner-circle {
    width: calc(100% - (var(--stroke-width) * 2));
    height: calc(100% - (var(--stroke-width) * 2));
    border-radius: 50%;
    background-color: #ffffff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
}

.days-count {
    font-size: 26cqw;
    font-weight: bold;
    color: var(--color-text-basic);
    line-height: 1;
}

.days-label {
    font-size: 8.5cqw;
    color: var(--color-text-muted);
    font-weight: bold;
    margin-top: 4cqw;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
}

@keyframes fillProgress {
    from {
        --current-anim: 0;
    }

    to {
        --current-anim: var(--current);
    }
}
/* #endregion ------------------------ Circle Progressbar (No scripts) -------------------------------- */
/* #region --------------------------------- Custom Scrollbars ---------------------------------------- */
.mCSB_inside > .mCSB_container {
    margin-right: 0px;
}


.mCSB_scrollTools {
    width: 10px;
}

.mCustomScrollBox { /* contains plugin's markup */
    direction: inherit;
}

*[dir="rtl"] .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, *[dir="rtl"] .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical {
    left: 0px;
    right: auto;
}
/* #endregion ------------------------------ Custom Scrollbars ---------------------------------------- */
/* #region -------------------------------------- Overlay --------------------------------------------- */
.pazar-overlay {
    background-color: rgba(33, 37, 41, 0.9);
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
}

    .pazar-overlay.show {
        display: block;
    }

    .pazar-overlay .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

.modal.fade.in {
    opacity: 1 !important;
}
/* #endregion ----------------------------------- Overlay --------------------------------------------- */
/* #region ------------------------------------- Dividers --------------------------------------------- */
.divider-labeled-horizontal {
    display: block;
    width: 100%;
    border-top: 1px solid #DDDDDD;
    text-align: center;
    position: relative;
}

    .divider-labeled-horizontal > * {
        position: absolute;
        top: -9px;
        left: 0px;
        display: block;
        text-align: center;
        width: 100%;
    }

        .divider-labeled-horizontal > * > * {
            background-color: #FFFFFF;
            text-transform: uppercase;
            text-align: center;
            display: inline-block;
            font-size: 14px;
            font-weight: 400;
            color: var(--color-text-muted);
            padding: 0px 10px 0px 10px;
        }

.divider-horizontal {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #DDDDDD;
}

.divider-labeled {
    display: flex;
    width: 100%;
    align-items: center;
    color: var(--color-text-muted);
    gap: var(--gap-12);
    white-space: nowrap;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.2em;
}

    .divider-labeled:empty {
        gap: var(--gap-0);
    }

    .divider-labeled.divider-small {
        font-size: 10px;
    }

    .divider-labeled:before {
        content: '';
        width: 100%;
        background-color: var(--color-border-muted);
        height: 1px;
        margin-inline-end: 0.2em;
    }

    .divider-labeled:empty:before {
        margin-inline-end: 0;
    }

    .divider-labeled:after {
        content: '';
        width: 100%;
        background-color: var(--color-border-muted);
        height: 1px;
    }
/* #endregion ---------------------------------- Dividers --------------------------------------------- */
/* #region ------------------------------------- Tooltips --------------------------------------------- */
.tooltip-block {
    opacity: 0;
    color: #FFFFFF;
    border-radius: var(--radius-4);
    padding: 15px 15px 15px 15px;
    font-size: 14px;
    text-align: left;
    background-color: rgba(33,37,41,0.8);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 25px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: absolute;
    z-index: 1;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    display: none;
}

    .tooltip-block.show {
        display: block;
        opacity: 1;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

*[dir='rtl'] .tooltip-block {
    text-align: right;
}

.tooltip .tooltip-inner {
    padding: 8px 10px 8px 10px;
    background-color: rgba(33,37,41,0.8);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 25px;
    font-size: 14px;
}

.tooltip .arrow:before {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: rgba(33,37,41,0.8) !important;
}

.tooltip.bs-tooltip-top .arrow:before {
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: rgba(33,37,41,0.8) !important;
}

.tooltip.bs-tooltip-right .arrow:before {
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-right-color: rgba(33,37,41,0.8) !important;
}

.tooltip.bs-tooltip-left .arrow:before {
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: rgba(33,37,41,0.8) !important;
}

.tooltip > * {
    color: var(--color-text-alt) !important;
}
/* #endregion ---------------------------------- Tooltips --------------------------------------------- */
/* #region -------------------------------------- Panels -----------------------------------------------*/
.panel {
    display: block;
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #F2F2F2;
}

    .panel.inversed {
        background-color: #FFFFFF;
    }

/* #endregion ----------------------------------- Panels ---------------------------------------------- */
/* #region ------------------------------------ Pagination -------------------------------------------- */
.pagination.new-pagination {
    display: inline-block;
    position: relative;
    list-style: none;
    font-size: 0px;
    line-height: 58px;
}

    .pagination.new-pagination.pagination-sm {
        line-height: 40px;
    }

    .pagination.new-pagination > li {
        display: inline-block;
        font-size: 14px;
        vertical-align: middle;
        margin-left: 2px;
        margin-right: 2px;
    }

    .pagination.new-pagination.pagination-sm > li {
        margin-left: 1px;
        margin-right: 1px;
    }

    .pagination.new-pagination > li > a {
        background-color: #EBEBEB;
        padding: 20px;
        border-radius: var(--radius-4);
        text-transform: uppercase;
        text-decoration: none;
        color: var(--color-text-basic);
        font-weight: 700;
        border: 0px none transparent;
        float: none !important;
        margin: 0px !important;
    }

    .pagination.new-pagination.pagination-sm > li > a {
        padding: 13px 16px 13px 16px;
        border-radius: var(--radius-4);
    }

    .pagination.new-pagination > li.divider > * {
        border: 0px none transparent;
        font-size: 14px;
        font-weight: 700;
        padding-left: 10px;
        padding-right: 10px;
    }

        .pagination.new-pagination > li.divider > *:hover {
            background-color: transparent;
        }

    .pagination.new-pagination > li.disabled a {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .pagination.new-pagination > li.active a {
        background-color: var(--color-bg-primary);
        color: #ffffff;
    }

*[dir='rtl'] .pagination.new-pagination .next,
*[dir='rtl'] .pagination.new-pagination .previous {
    transform: rotateZ(180deg);
}

.records-count {
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 991px) {
    .pagination.new-pagination .page-number, .pagination.new-pagination > li.divider, .pagination.new-pagination > li.first, .pagination.new-pagination > li.last {
        display: none;
    }
}

@media (max-width: 450px) {
    .pagination.new-pagination {
        line-height: 36px;
    }

        .pagination.new-pagination > li > a {
            padding: 10px;
        }
}



/* #region ----------- Old pagination ----------------- */

.pagination ul {
    font-size: 0px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

    .pagination ul > li {
        font-size: 14px;
        display: inline-block !important;
    }

*[dir='rtl'] .pagination ul > li a {
    border-left-width: 1px;
    border-right-width: 0px;
}

*[dir='rtl'] .pagination ul > li:first-child > a,
*[dir='rtl'] .pagination ul > li:first-child > span {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-right-width: 1px;
}

*[dir='rtl'] .pagination ul > li:last-child > a,
*[dir='rtl'] .pagination ul > li:last-child > span {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-left-width: 1px;
    border-right-width: 0px;
}
/* #endregion ------- /Old pagination ----------------- */

/* #endregion -------------------------------- /Pagination -------------------------------------------- */
/* #region ----------------------------------- Paging Control ----------------------------------------- */
.paging-control {
    display: inline-flex;
    align-items: center;
}

    .paging-control .disabled {
        pointer-events: none;
    }

    .paging-control.hidden {
        display: none;
    }

    .paging-control a {
        border: 0px none transparent;
        background-color: transparent;
        outline: none;
        border-radius: 1000px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        color: var(--color-text-basic);
        text-decoration: none;
    }

        .paging-control a:hover {
            background-color: #F2F2F2;
            transition: background-color 0.3s ease;
        }

        .paging-control a:active {
            background-color: #E7E7E7;
            transition: background-color 0.3s ease;
        }

        .paging-control a.active {
            background-color: #E6F4ED;
            transition: background-color 0.3s ease;
        }

        .paging-control a.disabled {
            cursor: not-allowed;
            opacity: 0.4;
        }

            .paging-control a.disabled:hover {
                background-color: transparent;
            }

    .paging-control .divider {
        padding-inline: 10px;
    }

    .paging-control .prev,
    .paging-control .next {
        font-size: 14px;
        display: flex;
        width: 50px;
        height: 50px;
        justify-content: center;
        align-items: center;
    }

*[dir='rtl'] .paging-control .prev > *,
*[dir='rtl'] .paging-control .next > * {
    transform: rotateY(180deg);
}

.paging-control .page-number {
    display: flex;
    min-width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
}

    .paging-control .page-number:empty {
        display: none !important;
        width: 0px;
    }

@media (max-width: 767px) {
    .paging-control .page-number {
        min-width: 40px;
        height: 40px;
        font-weight: 700;
        /*        display: none;*/
    }

    /*        .paging-control .page-number:nth-child(1),
        .paging-control .page-number:nth-child(2),
        .paging-control .page-number:nth-child(3),
        .paging-control .page-number:nth-child(4),
        .paging-control .page-number:nth-child(5),
        .paging-control .page-number:nth-child(6),
        .paging-control .page-number:nth-child(7),
        .paging-control .page-number:nth-child(8),
        .paging-control .page-number:nth-child(9),
        .paging-control .page-number:nth-child(10),
        .paging-control .page-number:nth-child(11) {
            display: flex;
        }*/

    /*        .paging-control .divider {
            display: none;
        }*/

    .paging-control .prev,
    .paging-control .next {
        font-size: 10px;
        width: 40px;
        height: 40px;
    }
}

/*@media (max-width: 510px) {
    .paging-control .page-number:nth-child(1),
    .paging-control .page-number:nth-child(2),
    .paging-control .page-number:nth-child(3),
    .paging-control .page-number:nth-child(4),
    .paging-control .page-number:nth-child(5),
    .paging-control .page-number:nth-child(6),
    .paging-control .page-number:nth-child(7),
    .paging-control .page-number:nth-child(8),
    .paging-control .page-number:nth-child(9),
    .paging-control .page-number:nth-child(10) {
        display: flex;
    }

    .paging-control .divider,
    .paging-control .page-number:nth-child(11),
    .paging-control .page-number:nth-child(12) {
        display: none !important;
    }
}*/

@media (max-width: 470px) {
    .paging-control .page-number {
        min-width: 40px;
        height: 40px;
        font-weight: 700;
        /*        display: none;*/
    }

    /*        .paging-control .page-number:nth-child(1),
        .paging-control .page-number:nth-child(2),
        .paging-control .page-number:nth-child(3),
        .paging-control .page-number:nth-child(4),
        .paging-control .page-number:nth-child(5),
        .paging-control .page-number:nth-child(6),
        .paging-control .page-number:nth-child(7),
        .paging-control .page-number:nth-child(8),
        .paging-control .page-number:nth-child(9) {
            display: flex;
        }

        .paging-control .divider,
        .paging-control .page-number:nth-child(10),
        .paging-control .page-number:nth-child(11),
        .paging-control .page-number:nth-child(12) {
            display: none !important;
        }*/
}


@media (max-width: 430px) {
    .paging-control .page-number {
        min-width: 40px;
        height: 40px;
        font-weight: 700;
        /*        display: none;*/
    }

    /*        .paging-control .page-number:nth-child(1),
        .paging-control .page-number:nth-child(2),
        .paging-control .page-number:nth-child(3),
        .paging-control .page-number:nth-child(4),
        .paging-control .page-number:nth-child(5),
        .paging-control .page-number:nth-child(6),
        .paging-control .page-number:nth-child(7),
        .paging-control .page-number:nth-child(8) {
            display: flex;
        }

        .paging-control .divider,
        .paging-control .page-number:nth-child(9),
        .paging-control .page-number:nth-child(10),
        .paging-control .page-number:nth-child(11),
        .paging-control .page-number:nth-child(12) {
            display: none !important;
        }*/
}

@media (max-width: 390px) {
    .paging-control .page-number {
        min-width: 40px;
        height: 40px;
        font-weight: 700;
        /*        display: none;*/
    }

    /*        .paging-control .page-number:nth-child(1),
        .paging-control .page-number:nth-child(2),
        .paging-control .page-number:nth-child(3),
        .paging-control .page-number:nth-child(4),
        .paging-control .page-number:nth-child(5),
        .paging-control .page-number:nth-child(6),
        .paging-control .page-number:nth-child(7) {
            display: flex;
        }

        .paging-control .divider,
        .paging-control .page-number:nth-child(8),
        .paging-control .page-number:nth-child(9),
        .paging-control .page-number:nth-child(10),
        .paging-control .page-number:nth-child(11),
        .paging-control .page-number:nth-child(12) {
            display: none !important;
        }*/
}
/* #endregion ------------------------------- /Paging Control ----------------------------------------- */
/* #region -------------------------------------- Tables ---------------------------------------------- */
.new-table.table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}

    .new-table.table thead tr td {
        border-bottom: 1px solid #DDDDDD;
        background-color: #F9F9F9;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        color: var(--color-text-muted) !important;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .new-table.table tbody tr td {
        border-bottom: 1px solid #DDDDDD;
        padding-top: 20px;
        padding-bottom: 20px;
        vertical-align: middle;
    }

    .new-table.table tbody tr:hover {
        background-color: rgba(230, 244, 237, 0.3);
    }

    .new-table.table .caption {
        display: none;
    }

    .new-table.table thead tr td {
        color: var(--color-text-basic);
    }

@media (max-width: 991px) {

    .new-table.table thead {
        display: none;
    }

    .new-table.table,
    .new-table.table tbody,
    .new-table.table tr,
    .new-table.table td {
        display: block;
        width: 100% !important;
    }

        .new-table.table > tbody > tr {
            background-color: #F9F9F9;
            border-radius: var(--radius-4);
            margin-bottom: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            position: relative;
        }

            .new-table.table > tbody > tr > td {
                border: 0px none transparent;
                font-size: 0px;
                padding: 0px;
            }

        .new-table.table .caption,
        .new-table.table .description {
            display: inline-block;
            width: 50%;
            font-size: 14px;
        }

        .new-table.table .caption {
            text-align: right;
            padding-right: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
            color: var(--color-text-muted);
        }

        .new-table.table .description {
            text-align: left;
            font-weight: 700;
            padding-left: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
        }
}
/* #endregion ---------------------------------- /Tables ---------------------------------------------- */
/* #region ---------------------------------- User Avatars -------------------------------------------- */
.user-avatar {
    display: inline-block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: #FFFFFF;
    position: relative;
    background-color: var(--color-avatar-04);
}

    .user-avatar i {
        position: absolute;
        text-transform: uppercase;
        display: inline-block;
        width: 100%;
        text-align: center;
        font-size: 36px;
        font-style: normal;
        line-height: 0px;
        top: 50%;
        left: 0px;
        z-index: 1;
    }

    .user-avatar > *:nth-child(2) {
        position: absolute;
        top: -1px;
        left: -1px;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        background-color: transparent;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50%;
        z-index: 2;
        box-shadow: inset 0px 0px 0px 1px var(--color-text-alt);
        border: 1px solid var(--color-border-basic);
    }
    /* #region Sizes */
    .user-avatar.user-avatar-xs {
        width: 24px;
        height: 24px;
    }

        .user-avatar.user-avatar-xs i {
            font-size: 12px;
        }

    .user-avatar.user-avatar-sm {
        width: 32px;
        height: 32px;
    }

        .user-avatar.user-avatar-sm i {
            font-size: 18px;
        }

    .user-avatar.user-avatar-md {
        width: 48px;
        height: 48px;
    }

        .user-avatar.user-avatar-md i {
            font-size: 28px;
        }

    .user-avatar.user-avatar-lg {
        width: 64px;
        height: 64px;
    }

        .user-avatar.user-avatar-lg i {
            font-size: 36px;
        }

    .user-avatar.user-avatar-xl {
        width: 85px;
        height: 85px;
    }

        .user-avatar.user-avatar-xl i {
            font-size: 48px;
        }

    .user-avatar.user-avatar-xxl {
        width: 120px;
        height: 120px;
    }

        .user-avatar.user-avatar-xxl i {
            font-size: 72px;
        }

    .user-avatar.user-avatar-xxxl {
        width: 200px;
        height: 200px;
    }

        .user-avatar.user-avatar-xxxl i {
            font-size: 110px;
        }
/* #endregion Sizes */
/* #region Colors */
.user-color-0 {
    background-color: var(--color-avatar-00);
}

.user-color-1 {
    background-color: var(--color-avatar-01);
}

.user-color-2 {
    background-color: var(--color-avatar-02);
}

.user-color-3 {
    background-color: var(--color-avatar-03);
}

.user-color-4 {
    background-color: var(--color-avatar-04);
}

.user-color-5 {
    background-color: var(--color-avatar-05);
}

.user-color-6 {
    background-color: var(--color-avatar-06);
}

.user-color-7 {
    background-color: var(--color-avatar-07);
}

.user-color-8 {
    background-color: var(--color-avatar-08);
}

.user-color-9 {
    background-color: var(--color-avatar-09);
}

.user-color-10 {
    background-color: var(--color-avatar-10);
}

.user-color-11 {
    background-color: var(--color-avatar-11);
}

.user-color-12 {
    background-color: var(--color-avatar-12);
}

.user-color-13 {
    background-color: var(--color-avatar-13);
}

.user-color-14 {
    background-color: var(--color-avatar-14);
}

.user-color-15 {
    background-color: var(--color-avatar-15);
}

.user-color-16 {
    background-color: var(--color-avatar-16);
}

.user-color-17 {
    background-color: var(--color-avatar-17);
}

.user-color-18 {
    background-color: var(--color-avatar-18);
}

.user-color-19 {
    background-color: var(--color-avatar-19);
}
/* #endregion Colors */
/* #region Animations -- 1 -- */
.user-avatar.user-color-0.user-avatar-xs.online, .online .user-avatar.user-color-0.user-avatar-xs {
    -webkit-animation: avatar-online-0-xs 1.2s ease-out infinite;
    animation: avatar-online-0-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-0.user-avatar-sm.online, .online .user-avatar.user-color-0.user-avatar-sm {
    -webkit-animation: avatar-online-0-sm 1.2s ease-out infinite;
    animation: avatar-online-0-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-0.user-avatar-md.online, .online .user-avatar.user-color-0.user-avatar-md {
    -webkit-animation: avatar-online-0-md 1.2s ease-out infinite;
    animation: avatar-online-0-md 1.2s ease-out infinite;
}

.user-avatar.online, .online .user-avatar,
.user-avatar.user-color-0.online, .online .user-avatar.user-color-0,
.user-avatar.user-color-0.user-avatar-lg.online, .online .user-avatar.user-color-0.user-avatar-lg {
    -webkit-animation: avatar-online-0-lg 1.2s ease-out infinite;
    animation: avatar-online-0-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-0.user-avatar-xl.online, .online .user-avatar.user-color-0.user-avatar-xl {
        -webkit-animation: avatar-online-0-xl 1.2s ease-out infinite;
        animation: avatar-online-0-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-0.user-avatar-xxl.online, .online .user-avatar.user-color-0.user-avatar-xxl {
        -webkit-animation: avatar-online-0-xxl 1.2s ease-out infinite;
        animation: avatar-online-0-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-0.user-avatar-xxxl.online, .online .user-avatar.user-color-0.user-avatar-xxxl {
        -webkit-animation: avatar-online-0-xxxl 1.2s ease-out infinite;
        animation: avatar-online-0-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-0-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-0-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-0-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-0-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 0) 0 0 0 20px;
    }
}


@keyframes avatar-online-0-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 0) 0 0 0 24px;
    }
}


@keyframes avatar-online-0-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 0) 0 0 0 30px;
    }
}


@keyframes avatar-online-0-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-00), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 1 -- */
/* #region Animations -- 2 -- */
.user-avatar.user-color-1.user-avatar-xs.online, .online .user-avatar.user-color-1.user-avatar-xs {
    -webkit-animation: avatar-online-1-xs 1.2s ease-out infinite;
    animation: avatar-online-1-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-1.user-avatar-sm.online, .online .user-avatar.user-color-1.user-avatar-sm {
    -webkit-animation: avatar-online-1-sm 1.2s ease-out infinite;
    animation: avatar-online-1-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-1.user-avatar-md.online, .online .user-avatar.user-color-1.user-avatar-md {
    -webkit-animation: avatar-online-1-md 1.2s ease-out infinite;
    animation: avatar-online-1-md 1.2s ease-out infinite;
}

.user-avatar.user-color-1.online, .online .user-avatar.user-color-1,
.user-avatar.user-color-1.user-avatar-lg.online, .online .user-avatar.user-color-1.user-avatar-lg {
    -webkit-animation: avatar-online-1-lg 1.2s ease-out infinite;
    animation: avatar-online-1-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-1.user-avatar-xl.online, .online .user-avatar.user-color-1.user-avatar-xl {
        -webkit-animation: avatar-online-1-xl 1.2s ease-out infinite;
        animation: avatar-online-1-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-1.user-avatar-xxl.online, .online .user-avatar.user-color-1.user-avatar-xxl {
        -webkit-animation: avatar-online-1-xxl 1.2s ease-out infinite;
        animation: avatar-online-1-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-1.user-avatar-xxxl.online, .online .user-avatar.user-color-1.user-avatar-xxxl {
        -webkit-animation: avatar-online-1-xxxl 1.2s ease-out infinite;
        animation: avatar-online-1-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-1-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 0) 0 0 0 8px;
    }
}


@keyframes avatar-online-1-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-1-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 0) 0 0 0 16px;
    }
}


@keyframes avatar-online-1-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 0) 0 0 0 20px;
    }
}


@keyframes avatar-online-1-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 0) 0 0 0 24px;
    }
}


@keyframes avatar-online-1-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 0) 0 0 0 30px;
    }
}


@keyframes avatar-online-1-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-01), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 2 -- */
/* #region Animations -- 3 -- */
.user-avatar.user-color-2.user-avatar-xs.online, .online .user-avatar.user-color-2.user-avatar-xs {
    -webkit-animation: avatar-online-2-xs 1.2s ease-out infinite;
    animation: avatar-online-2-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-2.user-avatar-sm.online, .online .user-avatar.user-color-2.user-avatar-sm {
    -webkit-animation: avatar-online-2-sm 1.2s ease-out infinite;
    animation: avatar-online-2-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-2.user-avatar-md.online, .online .user-avatar.user-color-2.user-avatar-md {
    -webkit-animation: avatar-online-2-md 1.2s ease-out infinite;
    animation: avatar-online-2-md 1.2s ease-out infinite;
}

.user-avatar.user-color-2.online, .online .user-avatar.user-color-2,
.user-avatar.user-color-2.user-avatar-lg.online, .online .user-avatar.user-color-2.user-avatar-lg {
    -webkit-animation: avatar-online-2-lg 1.2s ease-out infinite;
    animation: avatar-online-2-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-2.user-avatar-xl.online, .online .user-avatar.user-color-2.user-avatar-xl {
        -webkit-animation: avatar-online-2-xl 1.2s ease-out infinite;
        animation: avatar-online-2-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-2.user-avatar-xxl.online, .online .user-avatar.user-color-2.user-avatar-xxl {
        -webkit-animation: avatar-online-2-xxl 1.2s ease-out infinite;
        animation: avatar-online-2-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-2.user-avatar-xxxl.online, .online .user-avatar.user-color-2.user-avatar-xxxl {
        -webkit-animation: avatar-online-2-xxxl 1.2s ease-out infinite;
        animation: avatar-online-2-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-2-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 0) 0 0 0 8px;
    }
}


@keyframes avatar-online-2-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-2-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 0) 0 0 0 16px;
    }
}


@keyframes avatar-online-2-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-2-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 0) 0 0 0 24px;
    }
}


@keyframes avatar-online-2-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 0) 0 0 0 30px;
    }
}


@keyframes avatar-online-2-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-02), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 3 -- */
/* #region Animations -- 4 -- */
.user-avatar.user-color-3.user-avatar-xs.online, .online .user-avatar.user-color-3.user-avatar-xs {
    -webkit-animation: avatar-online-3-xs 1.2s ease-out infinite;
    animation: avatar-online-3-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-3.user-avatar-sm.online, .online .user-avatar.user-color-3.user-avatar-sm {
    -webkit-animation: avatar-online-3-sm 1.2s ease-out infinite;
    animation: avatar-online-3-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-3.user-avatar-md.online, .online .user-avatar.user-color-3.user-avatar-md {
    -webkit-animation: avatar-online-3-md 1.2s ease-out infinite;
    animation: avatar-online-3-md 1.2s ease-out infinite;
}

.user-avatar.user-color-3.online, .online .user-avatar.user-color-3,
.user-avatar.user-color-3.user-avatar-lg.online, .online .user-avatar.user-color-3.user-avatar-lg {
    -webkit-animation: avatar-online-3-lg 1.2s ease-out infinite;
    animation: avatar-online-3-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-3.user-avatar-xl.online, .online .user-avatar.user-color-3.user-avatar-xl {
        -webkit-animation: avatar-online-3-xl 1.2s ease-out infinite;
        animation: avatar-online-3-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-3.user-avatar-xxl.online, .online .user-avatar.user-color-3.user-avatar-xxl {
        -webkit-animation: avatar-online-3-xxl 1.2s ease-out infinite;
        animation: avatar-online-3-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-3.user-avatar-xxxl.online, .online .user-avatar.user-color-3.user-avatar-xxxl {
        -webkit-animation: avatar-online-3-xxxl 1.2s ease-out infinite;
        animation: avatar-online-3-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-3-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 0) 0 0 0 8px;
    }
}


@keyframes avatar-online-3-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-3-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 0) 0 0 0 16px;
    }
}


@keyframes avatar-online-3-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 0) 0 0 0 20px;
    }
}


@keyframes avatar-online-3-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 0) 0 0 0 24px;
    }
}


@keyframes avatar-online-3-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 0) 0 0 0 30px;
    }
}


@keyframes avatar-online-3-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-03), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 4 -- */
/* #region Animations -- 5 -- */
.user-avatar.user-color-4.user-avatar-xs.online, .online .user-avatar.user-color-4.user-avatar-xs {
    -webkit-animation: avatar-online-4-xs 1.2s ease-out infinite;
    animation: avatar-online-4-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-4.user-avatar-sm.online, .online .user-avatar.user-color-4.user-avatar-sm {
    -webkit-animation: avatar-online-4-sm 1.2s ease-out infinite;
    animation: avatar-online-4-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-4.user-avatar-md.online, .online .user-avatar.user-color-4.user-avatar-md {
    -webkit-animation: avatar-online-4-md 1.2s ease-out infinite;
    animation: avatar-online-4-md 1.2s ease-out infinite;
}

.user-avatar.user-color-4.online, .online .user-avatar.user-color-4,
.user-avatar.user-color-4.user-avatar-lg.online, .online .user-avatar.user-color-4.user-avatar-lg {
    -webkit-animation: avatar-online-4-lg 1.2s ease-out infinite;
    animation: avatar-online-4-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-4.user-avatar-xl.online, .online .user-avatar.user-color-4.user-avatar-xl {
        -webkit-animation: avatar-online-4-xl 1.2s ease-out infinite;
        animation: avatar-online-4-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-4.user-avatar-xxl.online, .online .user-avatar.user-color-4.user-avatar-xxl {
        -webkit-animation: avatar-online-4-xxl 1.2s ease-out infinite;
        animation: avatar-online-4-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-4.user-avatar-xxxl.online, .online .user-avatar.user-color-4.user-avatar-xxxl {
        -webkit-animation: avatar-online-4-xxxl 1.2s ease-out infinite;
        animation: avatar-online-4-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-4-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 0) 0 0 0 8px;
    }
}


@keyframes avatar-online-4-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-4-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 0) 0 0 0 16px;
    }
}


@keyframes avatar-online-4-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 0) 0 0 0 20px;
    }
}


@keyframes avatar-online-4-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 0) 0 0 0 24px;
    }
}


@keyframes avatar-online-4-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-4-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-04), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 5 -- */
/* #region Animations -- 6 -- */
.user-avatar.user-color-5.user-avatar-xs.online, .online .user-avatar.user-color-5.user-avatar-xs {
    -webkit-animation: avatar-online-5-xs 1.2s ease-out infinite;
    animation: avatar-online-5-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-5.user-avatar-sm.online, .online .user-avatar.user-color-5.user-avatar-sm {
    -webkit-animation: avatar-online-5-sm 1.2s ease-out infinite;
    animation: avatar-online-5-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-5.user-avatar-md.online, .online .user-avatar.user-color-5.user-avatar-md {
    -webkit-animation: avatar-online-5-md 1.2s ease-out infinite;
    animation: avatar-online-5-md 1.2s ease-out infinite;
}

.user-avatar.user-color-5.online, .online .user-avatar.user-color-5,
.user-avatar.user-color-5.user-avatar-lg.online, .online .user-avatar.user-color-5.user-avatar-lg {
    -webkit-animation: avatar-online-5-lg 1.2s ease-out infinite;
    animation: avatar-online-5-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-5.user-avatar-xl.online, .online .user-avatar.user-color-5.user-avatar-xl {
        -webkit-animation: avatar-online-5-xl 1.2s ease-out infinite;
        animation: avatar-online-5-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-5.user-avatar-xxl.online, .online .user-avatar.user-color-5.user-avatar-xxl {
        -webkit-animation: avatar-online-5-xxl 1.2s ease-out infinite;
        animation: avatar-online-5-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-5.user-avatar-xxxl.online, .online .user-avatar.user-color-5.user-avatar-xxxl {
        -webkit-animation: avatar-online-5-xxxl 1.2s ease-out infinite;
        animation: avatar-online-5-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-5-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 0) 0 0 0 8px;
    }
}


@keyframes avatar-online-5-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-5-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 0) 0 0 0 16px;
    }
}


@keyframes avatar-online-5-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-5-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-5-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-5-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-05), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 6 -- */
/* #region Animations -- 7 -- */
.user-avatar.user-color-6.user-avatar-xs.online, .online .user-avatar.user-color-6.user-avatar-xs {
    -webkit-animation: avatar-online-6-xs 1.2s ease-out infinite;
    animation: avatar-online-6-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-6.user-avatar-sm.online, .online .user-avatar.user-color-6.user-avatar-sm {
    -webkit-animation: avatar-online-6-sm 1.2s ease-out infinite;
    animation: avatar-online-6-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-6.user-avatar-md.online, .online .user-avatar.user-color-6.user-avatar-md {
    -webkit-animation: avatar-online-6-md 1.2s ease-out infinite;
    animation: avatar-online-6-md 1.2s ease-out infinite;
}

.user-avatar.user-color-6.online, .online .user-avatar.user-color-6,
.user-avatar.user-color-6.user-avatar-lg.online, .online .user-avatar.user-color-6.user-avatar-lg {
    -webkit-animation: avatar-online-6-lg 1.2s ease-out infinite;
    animation: avatar-online-6-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-6.user-avatar-xl.online, .online .user-avatar.user-color-6.user-avatar-xl {
        -webkit-animation: avatar-online-6-xl 1.2s ease-out infinite;
        animation: avatar-online-6-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-6.user-avatar-xxl.online, .online .user-avatar.user-color-6.user-avatar-xxl {
        -webkit-animation: avatar-online-6-xxl 1.2s ease-out infinite;
        animation: avatar-online-6-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-6.user-avatar-xxxl.online, .online .user-avatar.user-color-6.user-avatar-xxxl {
        -webkit-animation: avatar-online-6-xxxl 1.2s ease-out infinite;
        animation: avatar-online-6-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-6-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 0) 0 0 0 8px;
    }
}


@keyframes avatar-online-6-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-6-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 0) 0 0 0 16px;
    }
}


@keyframes avatar-online-6-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 0) 0 0 0 20px;
    }
}


@keyframes avatar-online-6-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-6-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 0) 0 0 0 30px;
    }
}


@keyframes avatar-online-6-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-06), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 7 -- */
/* #region Animations -- 8 -- */
.user-avatar.user-color-7.user-avatar-xs.online, .online .user-avatar.user-color-7.user-avatar-xs {
    -webkit-animation: avatar-online-7-xs 1.2s ease-out infinite;
    animation: avatar-online-7-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-7.user-avatar-sm.online, .online .user-avatar.user-color-7.user-avatar-sm {
    -webkit-animation: avatar-online-7-sm 1.2s ease-out infinite;
    animation: avatar-online-7-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-7.user-avatar-md.online, .online .user-avatar.user-color-7.user-avatar-md {
    -webkit-animation: avatar-online-7-md 1.2s ease-out infinite;
    animation: avatar-online-7-md 1.2s ease-out infinite;
}

.user-avatar.user-color-7.online, .online .user-avatar.user-color-7,
.user-avatar.user-color-7.user-avatar-lg.online, .online .user-avatar.user-color-7.user-avatar-lg {
    -webkit-animation: avatar-online-7-lg 1.2s ease-out infinite;
    animation: avatar-online-7-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-7.user-avatar-xl.online, .online .user-avatar.user-color-7.user-avatar-xl {
        -webkit-animation: avatar-online-7-xl 1.2s ease-out infinite;
        animation: avatar-online-7-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-7.user-avatar-xxl.online, .online .user-avatar.user-color-7.user-avatar-xxl {
        -webkit-animation: avatar-online-7-xxl 1.2s ease-out infinite;
        animation: avatar-online-7-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-7.user-avatar-xxxl.online, .online .user-avatar.user-color-7.user-avatar-xxxl {
        -webkit-animation: avatar-online-7-xxxl 1.2s ease-out infinite;
        animation: avatar-online-7-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-7-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 0) 0 0 0 8px;
    }
}


@keyframes avatar-online-7-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-7-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 0) 0 0 0 16px;
    }
}


@keyframes avatar-online-7-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 0) 0 0 0 20px;
    }
}


@keyframes avatar-online-7-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-7-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 0) 0 0 0 30px;
    }
}


@keyframes avatar-online-7-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-07), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 8 -- */
/* #region Animations -- 9 -- */
.user-avatar.user-color-8.user-avatar-xs.online, .online .user-avatar.user-color-8.user-avatar-xs {
    -webkit-animation: avatar-online-8-xs 1.2s ease-out infinite;
    animation: avatar-online-8-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-8.user-avatar-sm.online, .online .user-avatar.user-color-8.user-avatar-sm {
    -webkit-animation: avatar-online-8-sm 1.2s ease-out infinite;
    animation: avatar-online-8-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-8.user-avatar-md.online, .online .user-avatar.user-color-8.user-avatar-md {
    -webkit-animation: avatar-online-8-md 1.2s ease-out infinite;
    animation: avatar-online-8-md 1.2s ease-out infinite;
}

.user-avatar.user-color-8.online, .online .user-avatar.user-color-8,
.user-avatar.user-color-8.user-avatar-lg.online, .online .user-avatar.user-color-8.user-avatar-lg {
    -webkit-animation: avatar-online-8-lg 1.2s ease-out infinite;
    animation: avatar-online-8-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-8.user-avatar-xl.online, .online .user-avatar.user-color-8.user-avatar-xl {
        -webkit-animation: avatar-online-8-xl 1.2s ease-out infinite;
        animation: avatar-online-8-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-8.user-avatar-xxl.online, .online .user-avatar.user-color-8.user-avatar-xxl {
        -webkit-animation: avatar-online-8-xxl 1.2s ease-out infinite;
        animation: avatar-online-8-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-8.user-avatar-xxxl.online, .online .user-avatar.user-color-8.user-avatar-xxxl {
        -webkit-animation: avatar-online-8-xxxl 1.2s ease-out infinite;
        animation: avatar-online-8-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-8-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-8-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-8-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-8-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 0) 0 0 0 20px;
    }
}


@keyframes avatar-online-8-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-8-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-8-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-08), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 9 -- */
/* #region Animations -- 10 -- */
.user-avatar.user-color-9.user-avatar-xs.online, .online .user-avatar.user-color-9.user-avatar-xs {
    -webkit-animation: avatar-online-9-xs 1.2s ease-out infinite;
    animation: avatar-online-9-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-9.user-avatar-sm.online, .online .user-avatar.user-color-9.user-avatar-sm {
    -webkit-animation: avatar-online-9-sm 1.2s ease-out infinite;
    animation: avatar-online-9-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-9.user-avatar-md.online, .online .user-avatar.user-color-9.user-avatar-md {
    -webkit-animation: avatar-online-9-md 1.2s ease-out infinite;
    animation: avatar-online-9-md 1.2s ease-out infinite;
}

.user-avatar.user-color-9.online, .online .user-avatar.user-color-9,
.user-avatar.user-color-9.user-avatar-lg.online, .online .user-avatar.user-color-9.user-avatar-lg {
    -webkit-animation: avatar-online-9-lg 1.2s ease-out infinite;
    animation: avatar-online-9-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-9.user-avatar-xl.online, .online .user-avatar.user-color-9.user-avatar-xl {
        -webkit-animation: avatar-online-9-xl 1.2s ease-out infinite;
        animation: avatar-online-9-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-9.user-avatar-xxl.online, .online .user-avatar.user-color-9.user-avatar-xxl {
        -webkit-animation: avatar-online-9-xxl 1.2s ease-out infinite;
        animation: avatar-online-9-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-9.user-avatar-xxxl.online, .online .user-avatar.user-color-9.user-avatar-xxxl {
        -webkit-animation: avatar-online-9-xxxl 1.2s ease-out infinite;
        animation: avatar-online-9-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-9-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-9-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-9-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 0) 0 0 0 16px;
    }
}


@keyframes avatar-online-9-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 0) 0 0 0 20px;
    }
}


@keyframes avatar-online-9-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 0) 0 0 0 24px;
    }
}


@keyframes avatar-online-9-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 0) 0 0 0 30px;
    }
}


@keyframes avatar-online-9-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-09), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 10 -- */
/* #region Animations -- 11 -- */
.user-avatar.user-color-10.user-avatar-xs.online, .online .user-avatar.user-color-10.user-avatar-xs {
    -webkit-animation: avatar-online-10-xs 1.2s ease-out infinite;
    animation: avatar-online-10-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-10.user-avatar-sm.online, .online .user-avatar.user-color-10.user-avatar-sm {
    -webkit-animation: avatar-online-10-sm 1.2s ease-out infinite;
    animation: avatar-online-10-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-10.user-avatar-md.online, .online .user-avatar.user-color-10.user-avatar-md {
    -webkit-animation: avatar-online-10-md 1.2s ease-out infinite;
    animation: avatar-online-10-md 1.2s ease-out infinite;
}

.user-avatar.user-color-10.online, .online .user-avatar.user-color-10,
.user-avatar.user-color-10.user-avatar-lg.online, .online .user-avatar.user-color-10.user-avatar-lg {
    -webkit-animation: avatar-online-10-lg 1.2s ease-out infinite;
    animation: avatar-online-10-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-10.user-avatar-xl.online, .online .user-avatar.user-color-10.user-avatar-xl {
        -webkit-animation: avatar-online-10-xl 1.2s ease-out infinite;
        animation: avatar-online-10-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-10.user-avatar-xxl.online, .online .user-avatar.user-color-10.user-avatar-xxl {
        -webkit-animation: avatar-online-10-xxl 1.2s ease-out infinite;
        animation: avatar-online-10-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-10.user-avatar-xxxl.online, .online .user-avatar.user-color-10.user-avatar-xxxl {
        -webkit-animation: avatar-online-10-xxxl 1.2s ease-out infinite;
        animation: avatar-online-10-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-10-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 0) 0 0 0 8px;
    }
}


@keyframes avatar-online-10-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-10-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 0) 0 0 0 16px;
    }
}


@keyframes avatar-online-10-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 0) 0 0 0 20px;
    }
}


@keyframes avatar-online-10-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 0) 0 0 0 24px;
    }
}


@keyframes avatar-online-10-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 0) 0 0 0 30px;
    }
}


@keyframes avatar-online-10-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-10), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 11 -- */
/* #region Animations -- 12 -- */
.user-avatar.user-color-11.user-avatar-xs.online, .online .user-avatar.user-color-11.user-avatar-xs {
    -webkit-animation: avatar-online-11-xs 1.2s ease-out infinite;
    animation: avatar-online-11-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-11.user-avatar-sm.online, .online .user-avatar.user-color-11.user-avatar-sm {
    -webkit-animation: avatar-online-11-sm 1.2s ease-out infinite;
    animation: avatar-online-11-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-11.user-avatar-md.online, .online .user-avatar.user-color-11.user-avatar-md {
    -webkit-animation: avatar-online-11-md 1.2s ease-out infinite;
    animation: avatar-online-11-md 1.2s ease-out infinite;
}

.user-avatar.user-color-11.online, .online .user-avatar.user-color-11,
.user-avatar.user-color-11.user-avatar-lg.online, .online .user-avatar.user-color-11.user-avatar-lg {
    -webkit-animation: avatar-online-11-lg 1.2s ease-out infinite;
    animation: avatar-online-11-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-11.user-avatar-xl.online, .online .user-avatar.user-color-11.user-avatar-xl {
        -webkit-animation: avatar-online-11-xl 1.2s ease-out infinite;
        animation: avatar-online-11-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-11.user-avatar-xxl.online, .online .user-avatar.user-color-11.user-avatar-xxl {
        -webkit-animation: avatar-online-11-xxl 1.2s ease-out infinite;
        animation: avatar-online-11-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-11.user-avatar-xxxl.online, .online .user-avatar.user-color-11.user-avatar-xxxl {
        -webkit-animation: avatar-online-11-xxxl 1.2s ease-out infinite;
        animation: avatar-online-11-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-11-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-11-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-11-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-11-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 0) 0 0 0 20px;
    }
}


@keyframes avatar-online-11-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-11-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-11-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-11), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 12 -- */
/* #region Animations -- 13 -- */
.user-avatar.user-color-12.user-avatar-xs.online, .online .user-avatar.user-color-12.user-avatar-xs {
    -webkit-animation: avatar-online-12-xs 1.2s ease-out infinite;
    animation: avatar-online-12-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-12.user-avatar-sm.online, .online .user-avatar.user-color-12.user-avatar-sm {
    -webkit-animation: avatar-online-12-sm 1.2s ease-out infinite;
    animation: avatar-online-12-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-12.user-avatar-md.online, .online .user-avatar.user-color-12.user-avatar-md {
    -webkit-animation: avatar-online-12-md 1.2s ease-out infinite;
    animation: avatar-online-12-md 1.2s ease-out infinite;
}

.user-avatar.user-color-12.online, .online .user-avatar.user-color-12,
.user-avatar.user-color-12.user-avatar-lg.online, .online .user-avatar.user-color-12.user-avatar-lg {
    -webkit-animation: avatar-online-12-lg 1.2s ease-out infinite;
    animation: avatar-online-12-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-12.user-avatar-xl.online, .online .user-avatar.user-color-12.user-avatar-xl {
        -webkit-animation: avatar-online-12-xl 1.2s ease-out infinite;
        animation: avatar-online-12-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-12.user-avatar-xxl.online, .online .user-avatar.user-color-12.user-avatar-xxl {
        -webkit-animation: avatar-online-12-xxl 1.2s ease-out infinite;
        animation: avatar-online-12-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-12.user-avatar-xxxl.online, .online .user-avatar.user-color-12.user-avatar-xxxl {
        -webkit-animation: avatar-online-12-xxxl 1.2s ease-out infinite;
        animation: avatar-online-12-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-12-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-12-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-12-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-12-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-12-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-12-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 0) 0 0 0 30px;
    }
}


@keyframes avatar-online-12-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-12), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 13 -- */
/* #region Animations -- 14 -- */
.user-avatar.user-color-13.user-avatar-xs.online, .online .user-avatar.user-color-13.user-avatar-xs {
    -webkit-animation: avatar-online-13-xs 1.2s ease-out infinite;
    animation: avatar-online-13-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-13.user-avatar-sm.online, .online .user-avatar.user-color-13.user-avatar-sm {
    -webkit-animation: avatar-online-13-sm 1.2s ease-out infinite;
    animation: avatar-online-13-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-13.user-avatar-md.online, .online .user-avatar.user-color-13.user-avatar-md {
    -webkit-animation: avatar-online-13-md 1.2s ease-out infinite;
    animation: avatar-online-13-md 1.2s ease-out infinite;
}

.user-avatar.user-color-13.online, .online .user-avatar.user-color-13,
.user-avatar.user-color-13.user-avatar-lg.online, .online .user-avatar.user-color-13.user-avatar-lg {
    -webkit-animation: avatar-online-13-lg 1.2s ease-out infinite;
    animation: avatar-online-13-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-13.user-avatar-xl.online, .online .user-avatar.user-color-13.user-avatar-xl {
        -webkit-animation: avatar-online-13-xl 1.2s ease-out infinite;
        animation: avatar-online-13-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-13.user-avatar-xxl.online, .online .user-avatar.user-color-13.user-avatar-xxl {
        -webkit-animation: avatar-online-13-xxl 1.2s ease-out infinite;
        animation: avatar-online-13-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-13.user-avatar-xxxl.online, .online .user-avatar.user-color-13.user-avatar-xxxl {
        -webkit-animation: avatar-online-13-xxxl 1.2s ease-out infinite;
        animation: avatar-online-13-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-13-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-13-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-13-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 0) 0 0 0 16px;
    }
}


@keyframes avatar-online-13-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-13-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-13-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 0) 0 0 0 30px;
    }
}


@keyframes avatar-online-13-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-13), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 14 -- */
/* #region Animations -- 15 -- */
.user-avatar.user-color-14.user-avatar-xs.online, .online .user-avatar.user-color-14.user-avatar-xs {
    -webkit-animation: avatar-online-14-xs 1.2s ease-out infinite;
    animation: avatar-online-14-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-14.user-avatar-sm.online, .online .user-avatar.user-color-14.user-avatar-sm {
    -webkit-animation: avatar-online-14-sm 1.2s ease-out infinite;
    animation: avatar-online-14-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-14.user-avatar-md.online, .online .user-avatar.user-color-14.user-avatar-md {
    -webkit-animation: avatar-online-14-md 1.2s ease-out infinite;
    animation: avatar-online-14-md 1.2s ease-out infinite;
}

.user-avatar.user-color-14.online, .online .user-avatar.user-color-14,
.user-avatar.user-color-14.user-avatar-lg.online, .online .user-avatar.user-color-14.user-avatar-lg {
    -webkit-animation: avatar-online-14-lg 1.2s ease-out infinite;
    animation: avatar-online-14-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-14.user-avatar-xl.online, .online .user-avatar.user-color-14.user-avatar-xl {
        -webkit-animation: avatar-online-14-xl 1.2s ease-out infinite;
        animation: avatar-online-14-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-14.user-avatar-xxl.online, .online .user-avatar.user-color-14.user-avatar-xxl {
        -webkit-animation: avatar-online-14-xxl 1.2s ease-out infinite;
        animation: avatar-online-14-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-14.user-avatar-xxxl.online, .online .user-avatar.user-color-14.user-avatar-xxxl {
        -webkit-animation: avatar-online-14-xxxl 1.2s ease-out infinite;
        animation: avatar-online-14-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-14-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 0) 0 0 0 8px;
    }
}


@keyframes avatar-online-14-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-14-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-14-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-14-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 0) 0 0 0 24px;
    }
}


@keyframes avatar-online-14-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-14-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-14), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 15 -- */
/* #region Animations -- 16 -- */
.user-avatar.user-color-15.user-avatar-xs.online, .online .user-avatar.user-color-15.user-avatar-xs {
    -webkit-animation: avatar-online-15-xs 1.2s ease-out infinite;
    animation: avatar-online-15-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-15.user-avatar-sm.online, .online .user-avatar.user-color-15.user-avatar-sm {
    -webkit-animation: avatar-online-15-sm 1.2s ease-out infinite;
    animation: avatar-online-15-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-15.user-avatar-md.online, .online .user-avatar.user-color-15.user-avatar-md {
    -webkit-animation: avatar-online-15-md 1.2s ease-out infinite;
    animation: avatar-online-15-md 1.2s ease-out infinite;
}

.user-avatar.user-color-15.online, .online .user-avatar.user-color-15,
.user-avatar.user-color-15.user-avatar-lg.online, .online .user-avatar.user-color-15.user-avatar-lg {
    -webkit-animation: avatar-online-15-lg 1.2s ease-out infinite;
    animation: avatar-online-15-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-15.user-avatar-xl.online, .online .user-avatar.user-color-15.user-avatar-xl {
        -webkit-animation: avatar-online-15-xl 1.2s ease-out infinite;
        animation: avatar-online-15-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-15.user-avatar-xxl.online, .online .user-avatar.user-color-15.user-avatar-xxl {
        -webkit-animation: avatar-online-15-xxl 1.2s ease-out infinite;
        animation: avatar-online-15-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-15.user-avatar-xxxl.online, .online .user-avatar.user-color-15.user-avatar-xxxl {
        -webkit-animation: avatar-online-15-xxxl 1.2s ease-out infinite;
        animation: avatar-online-15-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-15-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 0) 0 0 0 8px;
    }
}


@keyframes avatar-online-15-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-15-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-15-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 0) 0 0 0 20px;
    }
}


@keyframes avatar-online-15-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 0) 0 0 0 24px;
    }
}


@keyframes avatar-online-15-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-15-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-15), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 16 -- */
/* #region Animations -- 17 -- */
.user-avatar.user-color-16.user-avatar-xs.online, .online .user-avatar.user-color-16.user-avatar-xs {
    -webkit-animation: avatar-online-16-xs 1.2s ease-out infinite;
    animation: avatar-online-16-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-16.user-avatar-sm.online, .online .user-avatar.user-color-16.user-avatar-sm {
    -webkit-animation: avatar-online-16-sm 1.2s ease-out infinite;
    animation: avatar-online-16-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-16.user-avatar-md.online, .online .user-avatar.user-color-16.user-avatar-md {
    -webkit-animation: avatar-online-16-md 1.2s ease-out infinite;
    animation: avatar-online-16-md 1.2s ease-out infinite;
}

.user-avatar.user-color-16.online, .online .user-avatar.user-color-16,
.user-avatar.user-color-16.user-avatar-lg.online, .online .user-avatar.user-color-16.user-avatar-lg {
    -webkit-animation: avatar-online-16-lg 1.2s ease-out infinite;
    animation: avatar-online-16-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-16.user-avatar-xl.online, .online .user-avatar.user-color-16.user-avatar-xl {
        -webkit-animation: avatar-online-16-xl 1.2s ease-out infinite;
        animation: avatar-online-16-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-16.user-avatar-xxl.online, .online .user-avatar.user-color-16.user-avatar-xxl {
        -webkit-animation: avatar-online-16-xxl 1.2s ease-out infinite;
        animation: avatar-online-16-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-16.user-avatar-xxxl.online, .online .user-avatar.user-color-16.user-avatar-xxxl {
        -webkit-animation: avatar-online-16-xxxl 1.2s ease-out infinite;
        animation: avatar-online-16-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-16-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-16-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-16-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 0) 0 0 0 16px;
    }
}


@keyframes avatar-online-16-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-16-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-16-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 0) 0 0 0 30px;
    }
}


@keyframes avatar-online-16-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-16), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 17 -- */
/* #region Animations -- 18 -- */
.user-avatar.user-color-17.user-avatar-xs.online, .online .user-avatar.user-color-17.user-avatar-xs {
    -webkit-animation: avatar-online-17-xs 1.2s ease-out infinite;
    animation: avatar-online-17-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-17.user-avatar-sm.online, .online .user-avatar.user-color-17.user-avatar-sm {
    -webkit-animation: avatar-online-17-sm 1.2s ease-out infinite;
    animation: avatar-online-17-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-17.user-avatar-md.online, .online .user-avatar.user-color-17.user-avatar-md {
    -webkit-animation: avatar-online-17-md 1.2s ease-out infinite;
    animation: avatar-online-17-md 1.2s ease-out infinite;
}

.user-avatar.user-color-17.online, .online .user-avatar.user-color-17,
.user-avatar.user-color-17.user-avatar-lg.online, .online .user-avatar.user-color-17.user-avatar-lg {
    -webkit-animation: avatar-online-17-lg 1.2s ease-out infinite;
    animation: avatar-online-17-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-17.user-avatar-xl.online, .online .user-avatar.user-color-17.user-avatar-xl {
        -webkit-animation: avatar-online-17-xl 1.2s ease-out infinite;
        animation: avatar-online-17-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-17.user-avatar-xxl.online, .online .user-avatar.user-color-17.user-avatar-xxl {
        -webkit-animation: avatar-online-17-xxl 1.2s ease-out infinite;
        animation: avatar-online-17-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-17.user-avatar-xxxl.online, .online .user-avatar.user-color-17.user-avatar-xxxl {
        -webkit-animation: avatar-online-17-xxxl 1.2s ease-out infinite;
        animation: avatar-online-17-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-17-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-17-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-17-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 0) 0 0 0 16px;
    }
}


@keyframes avatar-online-17-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 0) 0 0 0 20px;
    }
}


@keyframes avatar-online-17-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 0) 0 0 0 24px;
    }
}


@keyframes avatar-online-17-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-17-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-17), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 18 -- */
/* #region Animations -- 19 -- */
.user-avatar.user-color-18.user-avatar-xs.online, .online .user-avatar.user-color-18.user-avatar-xs {
    -webkit-animation: avatar-online-18-xs 1.2s ease-out infinite;
    animation: avatar-online-18-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-18.user-avatar-sm.online, .online .user-avatar.user-color-18.user-avatar-sm {
    -webkit-animation: avatar-online-18-sm 1.2s ease-out infinite;
    animation: avatar-online-18-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-18.user-avatar-md.online, .online .user-avatar.user-color-18.user-avatar-md {
    -webkit-animation: avatar-online-18-md 1.2s ease-out infinite;
    animation: avatar-online-18-md 1.2s ease-out infinite;
}

.user-avatar.user-color-18.online, .online .user-avatar.user-color-18,
.user-avatar.user-color-18.user-avatar-lg.online, .online .user-avatar.user-color-18.user-avatar-lg {
    -webkit-animation: avatar-online-18-lg 1.2s ease-out infinite;
    animation: avatar-online-18-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-18.user-avatar-xl.online, .online .user-avatar.user-color-18.user-avatar-xl {
        -webkit-animation: avatar-online-18-xl 1.2s ease-out infinite;
        animation: avatar-online-18-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-18.user-avatar-xxl.online, .online .user-avatar.user-color-18.user-avatar-xxl {
        -webkit-animation: avatar-online-18-xxl 1.2s ease-out infinite;
        animation: avatar-online-18-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-18.user-avatar-xxxl.online, .online .user-avatar.user-color-18.user-avatar-xxxl {
        -webkit-animation: avatar-online-18-xxxl 1.2s ease-out infinite;
        animation: avatar-online-18-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-18-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-18-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-18-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-18-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-18-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 0) 0 0 0 24px;
    }
}


@keyframes avatar-online-18-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 0) 0 0 0 30px;
    }
}


@keyframes avatar-online-18-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-18), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 19 -- */
/* #region Animations -- 20 -- */
.user-avatar.user-color-19.user-avatar-xs.online, .online .user-avatar.user-color-19.user-avatar-xs {
    -webkit-animation: avatar-online-19-xs 1.2s ease-out infinite;
    animation: avatar-online-19-xs 1.2s ease-out infinite;
}

.user-avatar.user-color-19.user-avatar-sm.online, .online .user-avatar.user-color-19.user-avatar-sm {
    -webkit-animation: avatar-online-19-sm 1.2s ease-out infinite;
    animation: avatar-online-19-sm 1.2s ease-out infinite;
}

.user-avatar.user-color-19.user-avatar-md.online, .online .user-avatar.user-color-19.user-avatar-md {
    -webkit-animation: avatar-online-19-md 1.2s ease-out infinite;
    animation: avatar-online-19-md 1.2s ease-out infinite;
}

.user-avatar.user-color-19.online, .online .user-avatar.user-color-19,
.user-avatar.user-color-19.user-avatar-lg.online, .online .user-avatar.user-color-19.user-avatar-lg {
    -webkit-animation: avatar-online-19-lg 1.2s ease-out infinite;
    animation: avatar-online-19-lg 1.2s ease-out infinite;
}

    .user-avatar.user-color-19.user-avatar-xl.online, .online .user-avatar.user-color-19.user-avatar-xl {
        -webkit-animation: avatar-online-19-xl 1.2s ease-out infinite;
        animation: avatar-online-19-xl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-19.user-avatar-xxl.online, .online .user-avatar.user-color-19.user-avatar-xxl {
        -webkit-animation: avatar-online-19-xxl 1.2s ease-out infinite;
        animation: avatar-online-19-xxl 1.2s ease-out infinite;
    }

    .user-avatar.user-color-19.user-avatar-xxxl.online, .online .user-avatar.user-color-19.user-avatar-xxxl {
        -webkit-animation: avatar-online-19-xxxl 1.2s ease-out infinite;
        animation: avatar-online-19-xxxl 1.2s ease-out infinite;
    }

@keyframes avatar-online-19-xs {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-19-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 0) 0 0 0 12px;
    }
}


@keyframes avatar-online-19-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-19-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 0) 0 0 0 20px;
    }
}


@keyframes avatar-online-19-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 0) 0 0 0 24px;
    }
}


@keyframes avatar-online-19-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 0) 0 0 0 30px;
    }
}


@keyframes avatar-online-19-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(var(--color-avatar-rgb-19), 0) 0 0 0 35px;
    }
}

/* #endregion Animations -- 20 -- */
/* #endregion ------------------------------ /User Avatars -------------------------------------------- */
/* #region ------------------------------------- Counter Marker --------------------------------------- */
.counter-marker {
    font-size: 12px;
    color: var(--color-text-basic);
    font-weight: 700;
    display: inline-block;
    border-radius: 40px;
    background-color: #EBEBEB;
    padding: 10px 8px 10px 8px;
    line-height: 0px;
}

    .counter-marker:empty {
        display: none;
    }


    .counter-marker.danger {
        color: var(--color-text-danger);
        background-color: #FBCFCF;
    }

    .counter-marker.danger-inversed {
        color: #FFFFFF;
        background-color: var(--color-bg-danger);
    }
/* #endregion --------------------------------- /Counter Marker --------------------------------------- */
/* #region ------------------------------------- Dropup Modal ----------------------------------------- */

/* #region Variables and basics */
:root {
    --modal-width: 600px;
    --modal-bezier: cubic-bezier(0.25, 0.8, 0.25, 1);
    --modal-transition: transform 0.4s var(--modal-bezier), opacity 0.4s ease, filter 0.4s ease;
}

.dropup-modal {
    display: flex;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-shade-600);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    justify-content: center;
    z-index: 99999;
}

    .dropup-modal.active {
        opacity: 1;
        pointer-events: auto;
    }

    .dropup-modal .modal-panel {
        display: flex;
        flex-direction: column;
        background-color: var(--color-bg-main);
        transition: var(--modal-transition);
        will-change: transform, opacity;
        box-shadow: 0 -5px 25px rgba(0,0,0,0.1);
    }

    .dropup-modal.stacked-under .modal-panel {
        transform: scale(0.92) translateY(-20px) !important;
        filter: brightness(0.6) grayscale(0.2);
        pointer-events: none;
        opacity: 1;
    }
    /* #endregion */

    /* #region (Header, Content, Footer) */
    .dropup-modal .modal-header {
        background-color: var(--color-bg-main);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        display: flex;
        flex-direction: row;
        position: relative;
        padding: 0px;
        border-bottom: 0px none transparent;
    }

        .dropup-modal .modal-header .title {
            display: block;
            text-align: center;
            font-weight: 600;
            font-size: 18px;
            line-height: 100%;
            width: 100%;
            color: var(--color-text-basic);
            padding-block: 16px;
        }

        .dropup-modal .modal-header .btn-cross {
            position: absolute;
            inset-inline-end: 0px;
            font-size: 24px;
            width: 48px;
            height: 48px;
            border: none;
            background: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            opacity: 1;
            transition: opacity 0.2s ease;
            color: var(--color-text-basic);
        }

            .dropup-modal .modal-header .btn-cross:hover {
                opacity: 0.6;
            }

    .dropup-modal .modal-content {
        background-color: var(--color-bg-main);
        text-align: start;
        max-height: calc(100vh - 180px);
        overflow-y: auto;
        padding-inline: 16px;
        padding-block-end: 16px;
        border: 0px none transparent;
        box-shadow: none;
        border-radius: 0px;
    }

    .dropup-modal .modal-footer {
        display: flex;
        background-color: var(--color-bg-main);
        padding-inline: 16px;
        padding-block: 8px;
        gap: 8px;
        justify-content: center;
        align-items: center;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        border-top: 1px solid var(--color-border-muted);
    }


        .dropup-modal .modal-footer .new-btn {
            min-width: 100px;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 16px;
            height: 50px;
        }

            .dropup-modal .modal-footer .new-btn.btn-default {
                background-color: transparent !important;
                color: var(--color-text-basic) !important;
                border: 0px none transparent !important;
            }

            .dropup-modal .modal-footer .new-btn.btn-primary {
                background-color: transparent !important;
                color: var(--color-text-primary) !important;
                border: 0px none transparent !important;
            }



    /* Handle */
    .dropup-modal .modal-handle {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        padding-block: 16px;
        background-color: var(--color-bg-main);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        cursor: grab;
        touch-action: none;
    }

        .dropup-modal .modal-handle .handle {
            width: 40px;
            height: 5px;
            border-radius: var(--radius-16);
            background-color: var(--color-border-basic);
        }

    .dropup-modal .modal-footer .element-loader {
        width: auto;
    }
/* #endregion */
/* Mobile */
@media (max-width: 700px) {
    .dropup-modal {
        align-items: flex-end;
    }

        .dropup-modal .modal-panel {
            width: 100% !important;
            max-width: 100% !important;
            border-radius: 20px 20px 0 0;
            transform: translateY(100%);
        }

        .dropup-modal.active .modal-panel {
            transform: translateY(0);
        }

        .dropup-modal .modal-handle {
            display: flex;
        }

        .dropup-modal .modal-header .btn-cross {
            display: none;
        }

        .dropup-modal .modal-header .title {
            padding-block: 8px;
        }

        .dropup-modal .modal-content {
            padding-block: 16px;
        }

        .dropup-modal .modal-header,
        .dropup-modal .modal-footer {
            border-radius: 0;
        }

        .dropup-modal .modal-footer {
            padding-bottom: calc(8px + env(safe-area-inset-bottom));
        }
}

/* Desktop */
@media (min-width: 701px) {
    .dropup-modal {
        align-items: center;
    }

        .dropup-modal .modal-panel {
            width: var(--modal-width);
            max-width: 90%;
            border-radius: var(--radius-16);
            transform: scale(0.85);
            opacity: 0;
        }

        .dropup-modal.active .modal-panel {
            transform: scale(1);
            opacity: 1;
        }

        .dropup-modal .modal-handle {
            display: none;
        }
}

/* #endregion ---------------------------------/ Dropup Modal ----------------------------------------- */
/* #region ---------------------------------------- Dropup -------------------------------------------- */
:root {
    --dropup-bezier: cubic-bezier(0.25, 0.8, 0.25, 1);
    --dropup-transition: transform 0.4s var(--dropup-bezier), opacity 0.4s ease;
}

.dropup-element {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-8);
}

.dropup-btn {
    cursor: pointer;
    user-select: none;
}

.dropup-panel {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-main, #ffffff);
    will-change: transform, opacity;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.dropup .dropup-content {
    text-align: start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.dropup .dropup-header,
.dropup .dropup-footer {
    display: flex;
    background-color: var(--color-bg-main, #ffffff);
    gap: var(--gap-8);
    align-items: center;
    position: sticky;
    z-index: 2;
}

.dropup .dropup-header {
    top: 0;
}

.dropup .dropup-footer {
    bottom: 0;
    justify-content: center;
}

    /* #region Footer Components */
    .dropup .dropup-footer .new-btn.btn-primary {
        background-color: transparent !important;
        color: var(--color-text-primary) !important;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 500;
        border: 0px none transparent;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
/* #endregion Footer Components */
/* #region Desktop */
.dropup:not(.dropup-mobile) {
    background-color: transparent;
    width: auto;
    height: 0;
    overflow: hidden;
    position: absolute;
    display: block !important;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease, visibility 0.1s ease;
}

/* Closed and still sitting in the page, an absolutely positioned panel at its natural height
       stretches the document's scroll area well past the footer. DropUpManager.open moves the
       panel to <body> before it measures anything, so releasing the clamp there leaves
       positionDesktop's scrollHeight read intact. */
body > .dropup:not(.dropup-mobile) {
    height: auto;
    overflow: visible;
}

.dropup:not(.dropup-mobile).active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.dropup:not(.dropup-mobile) .dropup-panel {
    border-radius: var(--radius-8);
    width: 100%;
}

.dropup:not(.dropup-mobile) .dropup-content {
    flex: 1;
}

.dropup:not(.dropup-mobile) .dropup-header,
.dropup:not(.dropup-mobile) .dropup-footer {
}

.dropup:not(.dropup-mobile) .dropup-handle {
    display: none !important;
}
/* #endregion Desktop */
/* #region Mobile */
.dropup.dropup-mobile {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: var(--color-shade-600, rgba(0, 0, 0, 0.4));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 99999;
    top: 0 !important;
    left: 0 !important;
    touch-action: none !important;
}

    .dropup.dropup-mobile.active {
        opacity: 1;
        pointer-events: auto;
    }

    .dropup.dropup-mobile .dropup-panel {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--gap-16) var(--gap-16) 0 0;
        transform: translateY(100%);
        transition: var(--dropup-transition);
        max-height: calc(100vh - 40px) !important;
    }

    .dropup.dropup-mobile.active .dropup-panel {
        transform: translateY(0);
    }

    .dropup.dropup-mobile .dropup-handle {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        padding-block: var(--gap-16);
        background-color: var(--color-bg-main, #ffffff);
        border-top-left-radius: var(--radius-16);
        border-top-right-radius: var(--radius-16);
        cursor: grab;
        touch-action: none !important;
        cursor: grab;
    }

        .dropup.dropup-mobile .dropup-handle .handle {
            width: 40px;
            height: 5px;
            border-radius: var(--radius-8);
            background-color: var(--color-border-basic, #e0e0e0);
        }

    .dropup.dropup-mobile .dropup-content {
        flex: 1;
        touch-action: pan-y !important;
    }

    .dropup.dropup-mobile .dropup-header {
    }

    .dropup.dropup-mobile .dropup-footer {
        /*padding-bottom: calc(16px + env(safe-area-inset-bottom));*/
    }

/* #endregion Mobile */

/* #endregion ------------------------------------/ Dropup -------------------------------------------- */
/* #region ----------------------------------------- Tabs --------------------------------------------- */
.bootstrap4.list-group-horizontal.tabs-underlined {
    display: block;
    font-size: 0px;
}

    .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item {
        display: inline-block;
        width: auto;
        font-size: 14px;
        padding: 0px;
        border: 0px none transparent;
        border-radius: var(--radius-0) !important;
        border-bottom: 2px solid transparent;
        background: transparent;
        position: relative;
        text-decoration: none;
    }

        .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item + .list-group-item {
            margin-inline-start: 40px;
        }

        .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item .title {
            padding-block: 10px;
            display: inline-block;
            color: var(--color-text-muted);
            text-transform: uppercase;
        }

        .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item .counter-marker {
            margin-inline-start: 5px;
        }

.bootstrap4.list-group-horizontal.tabs-underlined {
    display: block;
    font-size: 0px;
}

    .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item.active {
        border-bottom: 2px solid var(--color-border-primary);
    }

        .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item.active .title {
            color: var(--color-text-basic);
        }

    /* #region Small size */
    .bootstrap4.list-group-horizontal.tabs-underlined.tabs-sm .list-group-item {
        display: inline-block;
        width: auto;
        font-size: 10px;
        padding: 0px;
        border: 0px none transparent;
        border-radius: var(--radius-0) !important;
        border-bottom: 2px solid transparent;
        background: transparent;
        position: relative;
    }

        .bootstrap4.list-group-horizontal.tabs-underlined.tabs-sm .list-group-item.active {
            border-bottom: 2px solid var(--color-border-primary);
        }

        .bootstrap4.list-group-horizontal.tabs-underlined.tabs-sm .list-group-item .counter-marker {
            font-size: 10px;
        }

        .bootstrap4.list-group-horizontal.tabs-underlined.tabs-sm .list-group-item + .list-group-item {
            margin-inline-start: 15px;
        }

.tab-links {
    display: flex;
    width: 100%;
    border-block-end: 1px solid var(--color-border-muted);
    gap: var(--gap-40);
}

    .tab-links .tab {
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
        color: var(--color-text-muted);
        display: inline-block;
        border-block-end: 2px solid transparent;
        padding-block: var(--gap-12);
        text-transform: uppercase;
        cursor: pointer;
    }

        .tab-links .tab.active {
            color: var(--color-text-basic);
            border-block-end: 2px solid var(--color-bg-primary);
        }
/* #endregion Small size */
/* #endregion ------------------------------------- /Tabs --------------------------------------------- */
/* #region =================================== Bootstrap Modals ======================================= */
.modal-backdrop {
    height: 100%;
}
    /* dark blured version 


    .modal-backdrop.show {
        background-color: rgba(33, 37, 41, 0.9);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
        opacity: 1;
    }

*/
    .modal-backdrop.show {
        background-color: rgba(33, 37, 41, 0.3);
        opacity: 1;
    }

/* dark blured version
.modal-dialog .modal-content {
    box-shadow: rgba(0,0,0,1) 0 0 150px;
    border-radius: var(--radius-12);
}
    */

.modal-dialog .modal-content {
    box-shadow: rgba(0,0,0,0.5) 0 0 150px;
    border-radius: var(--radius-12);
    border: 0px none transparent;
}

.modal-dialog .modal-header {
    border-bottom: 1px solid #DDDDDD;
    padding: 0px;
    height: 52px;
}

    .modal-dialog .modal-header .inner {
        display: block;
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .modal-dialog .modal-header .modal-title {
        text-align: center;
        width: 100%;
        font-size: 18px;
        font-weight: 500;
        color: var(--color-text-muted);
        line-height: 21px;
        display: block;
        margin: 0px;
        padding: 15px 0px 0px 0px;
    }

    .modal-dialog .modal-header .close {
        display: block;
        position: absolute;
        top: 14px;
        right: 14px;
        left: auto;
        width: 52px;
        height: 52px;
        opacity: 1;
    }

*[dir='rtl'] .modal-dialog .modal-header .close {
    right: auto;
    left: 0px;
}

.modal-dialog .modal-header .close span {
    font-size: 18px;
}

.modal-dialog .modal-header .close:not(:disabled):not(.disabled):hover,
.modal-dialog .modal-header .close:not(:disabled):not(.disabled):focus {
    opacity: 1;
}

.modal-dialog .modal-footer {
    border-top: 1px solid #DDDDDD;
    justify-content: center;
}

    .modal-dialog .modal-footer .new-btn {
        min-width: 150px;
    }


.modal-dialog.no-footer .modal-footer {
    display: none;
}

@media (max-width: 728px) {
    .modal.show {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
        }

            .modal.show .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal-dialog .modal-footer {
        height: 69px;
    }
}

/* #region ----------------------- Old modals -------------------------- */
.old-modal.modal.remove-ad {
    width: 100%;
    height: 100%;
    background-color: transparent;
    overflow: hidden;
    top: 0px;
    left: 0px;
    box-shadow: none;
    margin: 0px;
}


.old-modal.modal-backdrop.fade.in {
    background-color: rgba(33, 37, 41, 0.3) !important;
    /* -webkit-backdrop-filter: blur(7px);*/
    /* backdrop-filter: blur(5px); */
    opacity: 1 !important;
}

.old-modal .modal-content {
    padding: 0px;
    background-color: #ffffff;
    border: 0px none transparent;
    box-shadow: rgba(0,0,0,0.4) 0 0 150px;
}

    .old-modal .modal-content .modal-header {
        border-bottom: 1px solid #DDDDDD;
        padding: 0px;
        height: 52px;
        background-color: #ffffff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

        .old-modal .modal-content .modal-header .modal-title {
            text-align: center;
            width: 100%;
            font-size: 18px;
            font-weight: 600;
            color: var(--color-text-muted);
            line-height: 21px;
            display: block;
            margin: 0px;
            padding: 15px 0px 0px 0px;
        }

        .old-modal .modal-content .modal-header .close {
            display: block;
            position: absolute;
            top: 0px;
            right: 0px;
            left: auto;
            width: 52px;
            height: 52px;
            opacity: 1;
            margin: 0px;
        }

    .old-modal .modal-content .modal-footer {
        background-color: #ffffff;
        padding: 0.75rem;
        text-align: center;
    }

        .old-modal .modal-content .modal-footer .btn-primary {
            text-shadow: none;
        }

.old-modal.remove-ad .modal-content .modal-body {
    text-align: center;
}

.old-modal .modal-content .modal-body .help-block {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-basic);
    margin: 0px;
    padding: 20px;
}

.old-modal .modal-content .modal-body img {
    min-height: 120px;
}

*[dir='rtl'] .old-modal .modal-content .modal-header .close {
    top: 0px;
    right: auto;
    left: 0;
}

@media (max-width: 767px) {
    .modal.old-modal {
        border-radius: var(--radius-0);
        border: 0px none transparent;
        z-index: 999999;
    }

        .modal.old-modal .modal-dialog {
            height: 100%;
            border-radius: var(--radius-0);
        }

            .modal.old-modal .modal-dialog .modal-content {
                height: 100%;
                border-radius: var(--radius-0);
            }

                .modal.old-modal .modal-dialog .modal-content .modal-header {
                    position: absolute;
                    width: 100%;
                    top: 0px;
                    left: 0px;
                    z-index: 1;
                    border-radius: var(--radius-0);
                }

                .modal.old-modal .modal-dialog .modal-content .modal-footer {
                    position: absolute;
                    width: 100%;
                    bottom: 0px;
                    left: 0px;
                    z-index: 1;
                    border-radius: var(--radius-0);
                }

                .modal.old-modal .modal-dialog .modal-content .modal-body {
                    padding-top: 52px;
                    padding-bottom: 69px;
                    overflow: auto;
                    height: 100%;
                }

                    .modal.old-modal .modal-dialog .modal-content .modal-body .modal-content-container {
                        display: block;
                        width: 100%;
                        overflow-y: auto;
                        height: 100%;
                        padding-top: 10px;
                    }

                .modal.old-modal .modal-dialog .modal-content .modal-footer .btn-primary {
                    color: #ffffff !important;
                    background: var(--color-bg-primary) !important;
                    border: 0px none transparent;
                }

                .modal.old-modal .modal-dialog .modal-content .modal-footer .new-btn {
                    min-width: 0px;
                }

                .modal.old-modal .modal-dialog .modal-content .close > * {
                    display: block;
                    margin: 0px auto;
                }
}
/* #endregion -------------------- Old modals -------------------------- */
/* #endregion ================================= Bootstrap Modals ====================================== */
/* #region ====================================== Custom Modals ======================================= */
.modal-custom-show, .chat-window-show {
    overflow: hidden;
}

    .modal-custom-show .fb_dialog, .chat-window-show .fb_dialog, .chat-window-show .cd-top, .modal-custom-show .cd-top {
        display: none !important;
    }


.modal-custom {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999999;
}

    .modal-custom .overlay {
        display: block;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        position: absolute;
        background-color: rgba(33, 37, 41, 0.3);
    }

    .modal-custom.active {
        display: block;
    }

    .modal-custom .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .modal-custom .modal-window {
        display: block;
        position: absolute;
        top: 200px;
        left: calc(50% - 300px);
        width: 600px;
        z-index: 1;
        background-color: #FFFFFF;
        border-radius: var(--radius-12);
        box-shadow: rgba(0,0,0,0.4) 0 0 150px;
    }

    .modal-custom .modal-header {
        display: block;
        width: 100%;
        border-bottom: 1px solid #DDDDDD;
        padding: 0px;
        height: 52px;
        background-color: #ffffff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

        .modal-custom .modal-header.no-border {
            border-bottom: 0px none transparent;
        }

        .modal-custom .modal-header .btn-back {
            position: absolute !important;
        }

.modal-footer {
    justify-content: center !important;
}

.modal-custom .modal-footer {
    border-top: 1px solid #DDDDDD;
    background-color: #ffffff;
    padding: 0.75rem;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.modal-custom .modal-body {
    padding: 0px;
    max-height: 100%;
}

.modal-custom .modal-footer .new-btn {
    min-width: 150px;
    cursor: pointer;
}

.modal-custom .modal-header .modal-title {
    text-align: center;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 21px;
    display: block;
    margin: 0px;
    padding: 15px 0px 0px 0px;
}

.modal-custom .modal-header .close-btn {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    left: auto;
    width: 52px;
    height: 52px;
    opacity: 1;
    border: 0px none transparent;
    background-color: transparent;
    cursor: pointer;
}

.modal-custom .modal-container {
    padding: 10px 15px;
    display: block;
    border: 0px none transparent;
    position: relative;
    border-radius: var(--radius-0);
    background-color: transparent;
}

*[dir='rtl'] .modal-custom .modal-header .close-btn {
    right: auto;
    left: 0px;
}

.modal-custom .modal-header .close-btn span {
    font-size: 18px;
}

.modal-custom.no-footer .modal-footer {
    display: none;
}

.modal-custom .modal-content {
    border: 0px none transparent;
    background: transparent;
    box-shadow: none;
    border-radius: var(--radius-0);
    margin: 0px;
    min-height: 0px;
    max-width: none;
    padding: 0px;
}

@media (max-width: 728px) {
    .modal-custom .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.no-footer .modal-body {
        padding-bottom: 0px;
    }
}
/* #endregion ================================== /Custom Modals ======================================= */
/* #region =================================== Bootstrap Carousel ===================================== */
.bootstrap4.carousel .bootstrap4.prev-custom-button i,
.bootstrap4.carousel .bootstrap4.next-custom-button i {
    font-size: 48px;
    z-index: 1;
}

.bootstrap4.carousel .bootstrap4.full-screen-button-container {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 2;
    padding: 10px;
    opacity: 0.6;
}

    .bootstrap4.carousel .bootstrap4.full-screen-button-container:hover {
        opacity: 1;
    }

    .bootstrap4.carousel .bootstrap4.full-screen-button-container i {
        font-size: 32px;
    }

.bootstrap4.carousel img,
.bootstrap4.carousel-inner {
    border-radius: var(--radius-4);
}

.bootstrap4.carousel .custom-photo-gallery {
    height: 30rem;
}

.bootstrap4.carousel .custom-photo-link {
    cursor: zoom-in;
}
/* #endregion =============================== /Bootstrap Carousel ===================================== */
/* #region ================================ Paid Services Cliparts ==================================== */
.clipart.paidservice-autorenewal {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

    .clipart.paidservice-autorenewal .cloud-1,
    .clipart.paidservice-autorenewal .cloud-2,
    .clipart.paidservice-autorenewal .cloud-3,
    .clipart.paidservice-autorenewal .cloud-4,
    .clipart.paidservice-autorenewal .cloud-5,
    .clipart.paidservice-autorenewal .cloud-6,
    .clipart.paidservice-autorenewal .cloud-7,
    .clipart.paidservice-autorenewal .cloud-8,
    .clipart.paidservice-autorenewal .cloud-9 {
        display: block;
        border-radius: 50%;
        background-color: #F7F7F7;
        position: absolute;
        z-index: 1;
    }

    .clipart.paidservice-autorenewal .cloud-1 {
        top: 12%;
        left: 12%;
        width: 22%;
        height: 22%;
        animation: paidservice-autorenewal-cloud-1 1.3s ease-in-out infinite alternate;
    }

    .clipart.paidservice-autorenewal .cloud-2 {
        top: 3%;
        left: 25%;
        width: 34%;
        height: 34%;
        animation: paidservice-autorenewal-cloud-2 1.5s ease-in-out infinite alternate;
    }

    .clipart.paidservice-autorenewal .cloud-3 {
        top: 2%;
        left: 45%;
        width: 45%;
        height: 45%;
        animation: paidservice-autorenewal-cloud-3 1.6s ease-in-out infinite alternate;
    }

    .clipart.paidservice-autorenewal .cloud-4 {
        top: 25%;
        left: 60%;
        width: 40%;
        height: 40%;
        animation: paidservice-autorenewal-cloud-4 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-autorenewal .cloud-5 {
        top: 45%;
        left: 46%;
        width: 50%;
        height: 50%;
        animation: paidservice-autorenewal-cloud-5 1.7s ease-in-out infinite alternate;
    }

    .clipart.paidservice-autorenewal .cloud-6 {
        top: 38%;
        left: 13%;
        width: 60%;
        height: 60%;
        animation: paidservice-autorenewal-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .clipart.paidservice-autorenewal .cloud-7 {
        top: 53%;
        left: 2%;
        width: 26%;
        height: 26%;
        animation: paidservice-autorenewal-cloud-7 1.3s ease-in-out infinite alternate;
    }

    .clipart.paidservice-autorenewal .cloud-8 {
        top: 18%;
        left: 0%;
        width: 46%;
        height: 46%;
        animation: paidservice-autorenewal-cloud-8 1.3s ease-in-out infinite alternate;
    }

    .clipart.paidservice-autorenewal .cloud-9 {
        top: 18%;
        left: 20%;
        width: 56%;
        height: 56%;
    }

@keyframes paidservice-autorenewal-cloud-1 {
    from {
        transform: translate(-10%, -10%);
    }

    to {
        transform: translate(10%, 10%);
    }
}

@keyframes paidservice-autorenewal-cloud-2 {
    from {
        transform: translate(3%, 8%);
    }

    to {
        transform: translate(-3%, -8%);
    }
}

@keyframes paidservice-autorenewal-cloud-3 {
    from {
        transform: translate(3%, -8%);
    }

    to {
        transform: translate(-3%, 8%);
    }
}

@keyframes paidservice-autorenewal-cloud-4 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(10%, 0%);
    }
}

@keyframes paidservice-autorenewal-cloud-5 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(-5%, -5%);
    }
}

@keyframes paidservice-autorenewal-cloud-6 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes paidservice-autorenewal-cloud-7 {
    from {
        transform: translate(-5%, 5%);
    }

    to {
        transform: translate(5%, -5%);
    }
}

@keyframes paidservice-autorenewal-cloud-8 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

.clipart.paidservice-autorenewal .content {
    display: block;
    width: 75%;
    height: 75%;
    top: 10%;
    left: 16%;
    background: url('../../Content/Images/PaidServices/clipart-autorenewal.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: paidservice-autorenewal-content 1.45s ease-in-out infinite alternate;
}

@keyframes paidservice-autorenewal-content {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

.clipart.paidservice-autorenewal .shadow {
    display: block;
    width: 75%;
    height: 5%;
    top: 84%;
    left: 15%;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    animation: paidservice-autorenewal-shadow 1.45s ease-in-out infinite alternate;
}

@keyframes paidservice-autorenewal-shadow {
    from {
        transform: scale(1, 1);
        opacity: 1;
    }

    to {
        transform: scale(0.85, 1);
        opacity: 0.6;
    }
}


.clipart.paidservice-gallery {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

    .clipart.paidservice-gallery .cloud-1,
    .clipart.paidservice-gallery .cloud-2,
    .clipart.paidservice-gallery .cloud-3,
    .clipart.paidservice-gallery .cloud-4,
    .clipart.paidservice-gallery .cloud-5,
    .clipart.paidservice-gallery .cloud-6 {
        display: block;
        border-radius: 50%;
        background-color: #F7F7F7;
        position: absolute;
        z-index: 1;
    }

    .clipart.paidservice-gallery .cloud-1 {
        width: 45%;
        height: 45%;
        top: 5%;
        left: 15%;
        animation: paidservice-gallery-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-gallery .cloud-2 {
        width: 27%;
        height: 27%;
        top: 5%;
        left: 51%;
        animation: paidservice-gallery-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .clipart.paidservice-gallery .cloud-3 {
        width: 60%;
        height: 60%;
        top: 12%;
        left: 38%;
        animation: paidservice-gallery-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .clipart.paidservice-gallery .cloud-4 {
        width: 45%;
        height: 45%;
        top: 50%;
        left: 50%;
        animation: paidservice-gallery-cloud-4 1.7s ease-in-out infinite alternate;
    }

    .clipart.paidservice-gallery .cloud-5 {
        width: 54%;
        height: 54%;
        top: 39%;
        left: 13%;
        animation: paidservice-gallery-cloud-5 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-gallery .cloud-6 {
        width: 28%;
        height: 28%;
        top: 35%;
        left: 1%;
        animation: paidservice-gallery-cloud-6 1.6s ease-in-out infinite alternate;
    }

@keyframes paidservice-gallery-cloud-1 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@keyframes paidservice-gallery-cloud-2 {
    from {
        transform: translate(0%, 8%);
    }

    to {
        transform: translate(0%, -8%);
    }
}

@keyframes paidservice-gallery-cloud-3 {
    from {
        transform: translate(8%, 0%);
    }

    to {
        transform: translate(-8%, 0%);
    }
}

@keyframes paidservice-gallery-cloud-4 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes paidservice-gallery-cloud-5 {
    from {
        transform: translate(-4%, 4%);
    }

    to {
        transform: translate(4%, -4%);
    }
}

@keyframes paidservice-gallery-cloud-6 {
    from {
        transform: translate(14%, 0%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

.clipart.paidservice-gallery .content {
    display: block;
    width: 80%;
    height: 80%;
    top: 7%;
    left: 12%;
    background: url('../../Content/Images/PaidServices/clipart-gallery.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: paidservice-gallery-content 1.35s ease-in-out infinite alternate;
}

@keyframes paidservice-gallery-content {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

.clipart.paidservice-gallery .shadow {
    display: block;
    width: 75%;
    height: 5%;
    top: 80%;
    left: 15%;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    animation: paidservice-gallery-shadow 1.35s ease-in-out infinite alternate;
}

@keyframes paidservice-gallery-shadow {
    from {
        transform: scale(1, 1);
        opacity: 1;
    }

    to {
        transform: scale(0.85, 1);
        opacity: 0.6;
    }
}

.clipart.paidservice-highlighting {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

    .clipart.paidservice-highlighting .cloud-1,
    .clipart.paidservice-highlighting .cloud-2,
    .clipart.paidservice-highlighting .cloud-3,
    .clipart.paidservice-highlighting .cloud-4,
    .clipart.paidservice-highlighting .cloud-5,
    .clipart.paidservice-highlighting .cloud-6,
    .clipart.paidservice-highlighting .cloud-7,
    .clipart.paidservice-highlighting .cloud-8,
    .clipart.paidservice-highlighting .cloud-9,
    .clipart.paidservice-highlighting .cloud-10 {
        display: block;
        border-radius: 50%;
        background-color: #F7F7F7;
        position: absolute;
        z-index: 1;
    }

    .clipart.paidservice-highlighting .cloud-1 {
        width: 32%;
        height: 32%;
        top: 15%;
        left: 3%;
        animation: paidservice-highlighting-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-highlighting .cloud-2 {
        width: 25%;
        height: 25%;
        top: 4%;
        left: 24%;
        animation: paidservice-highlighting-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .clipart.paidservice-highlighting .cloud-3 {
        width: 25%;
        height: 25%;
        top: 8%;
        left: 40%;
        animation: paidservice-highlighting-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .clipart.paidservice-highlighting .cloud-4 {
        width: 45%;
        height: 45%;
        top: 5%;
        left: 49%;
        animation: paidservice-highlighting-cloud-4 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-highlighting .cloud-5 {
        width: 25%;
        height: 25%;
        top: 34%;
        left: 75%;
        animation: paidservice-highlighting-cloud-5 1.7s ease-in-out infinite alternate;
    }

    .clipart.paidservice-highlighting .cloud-6 {
        width: 35%;
        height: 35%;
        top: 45%;
        left: 57%;
        animation: paidservice-highlighting-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .clipart.paidservice-highlighting .cloud-7 {
        width: 50%;
        height: 50%;
        top: 45%;
        left: 35%;
        animation: paidservice-highlighting-cloud-7 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-highlighting .cloud-8 {
        width: 35%;
        height: 35%;
        top: 56%;
        left: 18%;
        animation: paidservice-highlighting-cloud-8 1.6s ease-in-out infinite alternate;
    }

    .clipart.paidservice-highlighting .cloud-9 {
        width: 45%;
        height: 45%;
        top: 34%;
        left: 0%;
        animation: paidservice-highlighting-cloud-9 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-highlighting .cloud-10 {
        width: 65%;
        height: 65%;
        top: 17%;
        left: 18%;
    }

@keyframes paidservice-highlighting-cloud-1 {
    from {
        transform: translate(-7%, -7%);
    }

    to {
        transform: translate(7%, 7%);
    }
}

@keyframes paidservice-highlighting-cloud-2 {
    from {
        transform: translate(2%, 7%);
    }

    to {
        transform: translate(-2%, -7%);
    }
}

@keyframes paidservice-highlighting-cloud-3 {
    from {
        transform: translate(0%, -9%);
    }

    to {
        transform: translate(0%, 9%);
    }
}

@keyframes paidservice-highlighting-cloud-4 {
    from {
        transform: translate(-4%, 15%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

@keyframes paidservice-highlighting-cloud-5 {
    from {
        transform: translate(8%, 0%);
    }

    to {
        transform: translate(-7%, 0%);
    }
}

@keyframes paidservice-highlighting-cloud-6 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(8%, 8%);
    }
}

@keyframes paidservice-highlighting-cloud-7 {
    from {
        transform: translate(-3%, -8%);
    }

    to {
        transform: translate(3%, 0%);
    }
}

@keyframes paidservice-highlighting-cloud-8 {
    from {
        transform: translate(3%, 14%);
    }

    to {
        transform: translate(-3%, -7%);
    }
}

@keyframes paidservice-highlighting-cloud-9 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}


.clipart.paidservice-highlighting .content {
    display: block;
    width: 75%;
    height: 75%;
    top: 7%;
    left: 14%;
    background: url('../../Content/Images/PaidServices/clipart-highlighting.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: paidservice-highlighting-content 1.25s ease-in-out infinite alternate;
}

@keyframes paidservice-highlighting-content {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

.clipart.paidservice-highlighting .shadow {
    display: block;
    width: 75%;
    height: 5%;
    top: 83%;
    left: 15%;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    animation: paidservice-highlighting-shadow 1.25s ease-in-out infinite alternate;
}

@keyframes paidservice-highlighting-shadow {
    from {
        transform: scale(1, 1);
        opacity: 1;
    }

    to {
        transform: scale(0.85, 1);
        opacity: 0.6;
    }
}

.clipart.paidservice-sms {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

    .clipart.paidservice-sms .cloud-1,
    .clipart.paidservice-sms .cloud-2,
    .clipart.paidservice-sms .cloud-3,
    .clipart.paidservice-sms .cloud-4,
    .clipart.paidservice-sms .cloud-5,
    .clipart.paidservice-sms .cloud-6,
    .clipart.paidservice-sms .cloud-7,
    .clipart.paidservice-sms .cloud-8,
    .clipart.paidservice-sms .cloud-9,
    .clipart.paidservice-sms .cloud-10 {
        display: block;
        border-radius: 50%;
        background-color: #F7F7F7;
        position: absolute;
        z-index: 1;
    }

    .clipart.paidservice-sms .cloud-1 {
        width: 35%;
        height: 35%;
        left: 5%;
        top: 8%;
        animation: paidservice-sms-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-sms .cloud-2 {
        width: 50%;
        height: 50%;
        left: 22%;
        top: 0%;
        animation: paidservice-sms-cloud-2 1.7s ease-in-out infinite alternate;
    }

    .clipart.paidservice-sms .cloud-3 {
        width: 40%;
        height: 40%;
        left: 47%;
        top: 6%;
        animation: paidservice-sms-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .clipart.paidservice-sms .cloud-4 {
        width: 24%;
        height: 24%;
        left: 71%;
        top: 26%;
        animation: paidservice-sms-cloud-4 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-sms .cloud-5 {
        width: 60%;
        height: 60%;
        left: 40%;
        top: 31%;
        animation: paidservice-sms-cloud-5 1.5s ease-in-out infinite alternate;
    }

    .clipart.paidservice-sms .cloud-6 {
        width: 25%;
        height: 25%;
        left: 44%;
        top: 75%;
        animation: paidservice-sms-cloud-6 1.7s ease-in-out infinite alternate;
    }

    .clipart.paidservice-sms .cloud-7 {
        width: 45%;
        height: 45%;
        left: 15%;
        top: 48%;
        animation: paidservice-sms-cloud-7 1.6s ease-in-out infinite alternate;
    }

    .clipart.paidservice-sms .cloud-8 {
        width: 33%;
        height: 33%;
        left: 3%;
        top: 59%;
        animation: paidservice-sms-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-sms .cloud-9 {
        width: 50%;
        height: 50%;
        left: -1%;
        top: 28%;
        animation: paidservice-sms-cloud-9 1.7s ease-in-out infinite alternate;
    }

@keyframes paidservice-sms-cloud-1 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes paidservice-sms-cloud-2 {
    from {
        transform: translate(0%, 8%);
    }

    to {
        transform: translate(0%, -3%);
    }
}

@keyframes paidservice-sms-cloud-3 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes paidservice-sms-cloud-4 {
    from {
        transform: translate(-7%, -2%);
    }

    to {
        transform: translate(7%, 2%);
    }
}

@keyframes paidservice-sms-cloud-5 {
    from {
        transform: translate(4%, 2%);
    }

    to {
        transform: translate(-8%, -2%);
    }
}

@keyframes paidservice-sms-cloud-6 {
    from {
        transform: translate(1%, -14%);
    }

    to {
        transform: translate(-1%, 0%);
    }
}

@keyframes paidservice-sms-cloud-7 {
    from {
        transform: translate(-1%, 7%);
    }

    to {
        transform: translate(1%, -14%);
    }
}

@keyframes paidservice-sms-cloud-8 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@keyframes paidservice-sms-cloud-9 {
    from {
        transform: translate(-4%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

.clipart.paidservice-sms .content {
    display: block;
    width: 75%;
    height: 75%;
    top: 9%;
    left: 14%;
    background: url('../../Content/Images/PaidServices/clipart-sms.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: paidservice-sms-content 1.4s ease-in-out infinite alternate;
}

@keyframes paidservice-sms-content {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

.clipart.paidservice-sms .shadow {
    display: block;
    width: 75%;
    height: 5%;
    top: 82%;
    left: 13%;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    animation: paidservice-sms-shadow 1.4s ease-in-out infinite alternate;
}

@keyframes paidservice-sms-shadow {
    from {
        transform: scale(1, 1);
        opacity: 1;
    }

    to {
        transform: scale(0.85, 1);
        opacity: 0.6;
    }
}

.clipart.paidservice-top-positioning {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

    .clipart.paidservice-top-positioning .cloud-1,
    .clipart.paidservice-top-positioning .cloud-2,
    .clipart.paidservice-top-positioning .cloud-3,
    .clipart.paidservice-top-positioning .cloud-4,
    .clipart.paidservice-top-positioning .cloud-5,
    .clipart.paidservice-top-positioning .cloud-6,
    .clipart.paidservice-top-positioning .cloud-7,
    .clipart.paidservice-top-positioning .cloud-8,
    .clipart.paidservice-top-positioning .cloud-9,
    .clipart.paidservice-top-positioning .cloud-10,
    .clipart.paidservice-top-positioning .cloud-11 {
        display: block;
        border-radius: 50%;
        background-color: #F7F7F7;
        position: absolute;
        z-index: 1;
    }

    .clipart.paidservice-top-positioning .cloud-1 {
        width: 45%;
        height: 45%;
        top: 6%;
        left: 10%;
        animation: paidservice-top-positioning-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-top-positioning .cloud-2 {
        width: 25%;
        height: 25%;
        top: 10%;
        left: 36%;
        animation: paidservice-top-positioning-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .clipart.paidservice-top-positioning .cloud-3 {
        width: 40%;
        height: 40%;
        top: 10%;
        left: 49%;
        animation: paidservice-top-positioning-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .clipart.paidservice-top-positioning .cloud-4 {
        width: 35%;
        height: 35%;
        top: 23%;
        left: 65%;
        animation: paidservice-top-positioning-cloud-4 1.7s ease-in-out infinite alternate;
    }

    .clipart.paidservice-top-positioning .cloud-5 {
        width: 45%;
        height: 45%;
        top: 37%;
        left: 53%;
        animation: paidservice-top-positioning-cloud-5 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-top-positioning .cloud-6 {
        width: 25%;
        height: 25%;
        top: 68%;
        left: 62%;
        animation: paidservice-top-positioning-cloud-6 1.6s ease-in-out infinite alternate;
    }

    .clipart.paidservice-top-positioning .cloud-7 {
        width: 35%;
        height: 35%;
        top: 57%;
        left: 37%;
        animation: paidservice-top-positioning-cloud-7 1.7s ease-in-out infinite alternate;
    }

    .clipart.paidservice-top-positioning .cloud-8 {
        width: 30%;
        height: 30%;
        top: 63%;
        left: 16%;
        animation: paidservice-top-positioning-cloud-8 1.5s ease-in-out infinite alternate;
    }

    .clipart.paidservice-top-positioning .cloud-9 {
        width: 20%;
        height: 20%;
        top: 56%;
        left: 8%;
        animation: paidservice-top-positioning-cloud-9 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-top-positioning .cloud-10 {
        width: 30%;
        height: 30%;
        top: 32%;
        left: 1%;
        animation: paidservice-top-positioning-cloud-10 1.7s ease-in-out infinite alternate;
    }

    .clipart.paidservice-top-positioning .cloud-11 {
        width: 60%;
        height: 60%;
        top: 20%;
        left: 19%;
    }

@keyframes paidservice-top-positioning-cloud-1 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@keyframes paidservice-top-positioning-cloud-2 {
    from {
        transform: translate(0%, 10%);
    }

    to {
        transform: translate(0%, -10%);
    }
}

@keyframes paidservice-top-positioning-cloud-3 {
    from {
        transform: translate(4%, -10%);
    }

    to {
        transform: translate(-4%, 10%);
    }
}

@keyframes paidservice-top-positioning-cloud-4 {
    from {
        transform: translate(-8%, 4%);
    }

    to {
        transform: translate(8%, -4%);
    }
}

@keyframes paidservice-top-positioning-cloud-5 {
    from {
        transform: translate(8%, 4%);
    }

    to {
        transform: translate(-8%, -4%);
    }
}

@keyframes paidservice-top-positioning-cloud-6 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@keyframes paidservice-top-positioning-cloud-7 {
    from {
        transform: translate(0%, 9%);
    }

    to {
        transform: translate(0%, -9%);
    }
}

@keyframes paidservice-top-positioning-cloud-8 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes paidservice-top-positioning-cloud-9 {
    from {
        transform: translate(-5%, 5%);
    }

    to {
        transform: translate(5%, -5%);
    }
}

@keyframes paidservice-top-positioning-cloud-10 {
    from {
        transform: translate(7%, 0%);
    }

    to {
        transform: translate(-7%, 0%);
    }
}

.clipart.paidservice-top-positioning .content {
    display: block;
    width: 75%;
    height: 75%;
    top: 9%;
    left: 19%;
    background: url('../../Content/Images/PaidServices/clipart-top-positioning.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: paidservice-top-positioning-content 1.3s ease-in-out infinite alternate;
}

@keyframes paidservice-top-positioning-content {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

.clipart.paidservice-top-positioning .shadow {
    display: block;
    width: 75%;
    height: 5%;
    top: 82%;
    left: 14%;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    animation: paidservice-top-positioning-shadow 1.3s ease-in-out infinite alternate;
}

@keyframes paidservice-top-positioning-shadow {
    from {
        transform: scale(1, 1);
        opacity: 1;
    }

    to {
        transform: scale(0.85, 1);
        opacity: 0.6;
    }
}

.clipart.paidservice-company-logo {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

    .clipart.paidservice-company-logo .cloud-1,
    .clipart.paidservice-company-logo .cloud-2,
    .clipart.paidservice-company-logo .cloud-3,
    .clipart.paidservice-company-logo .cloud-4,
    .clipart.paidservice-company-logo .cloud-5,
    .clipart.paidservice-company-logo .cloud-6,
    .clipart.paidservice-company-logo .cloud-7,
    .clipart.paidservice-company-logo .cloud-8,
    .clipart.paidservice-company-logo .cloud-9 {
        display: block;
        border-radius: 50%;
        background-color: #F7F7F7;
        position: absolute;
        z-index: 1;
    }

    .clipart.paidservice-company-logo .cloud-1 {
        width: 28%;
        height: 28%;
        top: 16%;
        left: 4%;
        animation: paidservice-company-logo-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-company-logo .cloud-2 {
        width: 37%;
        height: 37%;
        top: 5%;
        left: 25%;
        animation: paidservice-company-logo-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .clipart.paidservice-company-logo .cloud-3 {
        width: 26%;
        height: 26%;
        top: 11%;
        left: 54%;
        animation: paidservice-company-logo-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .clipart.paidservice-company-logo .cloud-4 {
        width: 37%;
        height: 37%;
        top: 20%;
        left: 60%;
        animation: paidservice-company-logo-cloud-4 1.7s ease-in-out infinite alternate;
    }

    .clipart.paidservice-company-logo .cloud-5 {
        width: 28%;
        height: 28%;
        top: 46%;
        left: 70%;
        animation: paidservice-company-logo-cloud-5 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-company-logo .cloud-6 {
        width: 48%;
        height: 48%;
        top: 47%;
        left: 38%;
        animation: paidservice-company-logo-cloud-6 1.3s ease-in-out infinite alternate;
    }

    .clipart.paidservice-company-logo .cloud-7 {
        width: 28%;
        height: 28%;
        top: 64%;
        left: 19%;
        animation: paidservice-company-logo-cloud-7 1.6s ease-in-out infinite alternate;
    }

    .clipart.paidservice-company-logo .cloud-8 {
        width: 40%;
        height: 40%;
        top: 39%;
        left: 2%;
        animation: paidservice-company-logo-cloud-8 1.5s ease-in-out infinite alternate;
    }

    .clipart.paidservice-company-logo .cloud-9 {
        width: 50%;
        height: 50%;
        top: 24%;
        left: 22%;
    }

@keyframes paidservice-company-logo-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(12%, 12%);
    }
}

@keyframes paidservice-company-logo-cloud-2 {
    from {
        transform: translate(0%, 8%);
    }

    to {
        transform: translate(0%, -8%);
    }
}

@keyframes paidservice-company-logo-cloud-3 {
    from {
        transform: translate(8%, -4%);
    }

    to {
        transform: translate(-8%, 4%);
    }
}

@keyframes paidservice-company-logo-cloud-4 {
    from {
        transform: translate(-8%, 4%);
    }

    to {
        transform: translate(8%, -4%);
    }
}

@keyframes paidservice-company-logo-cloud-5 {
    from {
        transform: translate(8%, 4%);
    }

    to {
        transform: translate(-8%, -4%);
    }
}

@keyframes paidservice-company-logo-cloud-6 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes paidservice-company-logo-cloud-7 {
    from {
        transform: translate(-4%, 4%);
    }

    to {
        transform: translate(4%, -4%);
    }
}

@keyframes paidservice-company-logo-cloud-8 {
    from {
        transform: translate(8%, 0%);
    }

    to {
        transform: translate(-8%, 0%);
    }
}

.clipart.paidservice-company-logo .content {
    display: block;
    width: 70%;
    height: 70%;
    top: 11%;
    left: 16%;
    background: url('../../Content/Images/PaidServices/clipart-company-logo.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: paidservice-company-logo-content 1.2s ease-in-out infinite alternate;
}

@keyframes paidservice-company-logo-content {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

.clipart.paidservice-company-logo .shadow {
    display: block;
    width: 75%;
    height: 5%;
    top: 82%;
    left: 14%;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    animation: paidservice-company-logo-shadow 1.2s ease-in-out infinite alternate;
}

@keyframes paidservice-company-logo-shadow {
    from {
        transform: scale(1, 1);
        opacity: 1;
    }

    to {
        transform: scale(0.85, 1);
        opacity: 0.6;
    }
}

.clipart.paidservice-package {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

    .clipart.paidservice-package .cloud-1,
    .clipart.paidservice-package .cloud-2,
    .clipart.paidservice-package .cloud-3,
    .clipart.paidservice-package .cloud-4,
    .clipart.paidservice-package .cloud-5,
    .clipart.paidservice-package .cloud-6,
    .clipart.paidservice-package .cloud-7,
    .clipart.paidservice-package .cloud-8,
    .clipart.paidservice-package .cloud-9,
    .clipart.paidservice-package .cloud-10 {
        display: block;
        border-radius: 50%;
        background-color: #F7F7F7;
        position: absolute;
        z-index: 1;
    }

    .clipart.paidservice-package .cloud-1 {
        width: 28%;
        height: 28%;
        top: 18%;
        left: 7%;
        animation: paidservice-package-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-package .cloud-2 {
        width: 25%;
        height: 25%;
        top: 7%;
        left: 26%;
        animation: paidservice-package-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .clipart.paidservice-package .cloud-3 {
        width: 35%;
        height: 35%;
        top: 13%;
        left: 34%;
        animation: paidservice-package-cloud-3 1.7s ease-in-out infinite alternate;
    }

    .clipart.paidservice-package .cloud-4 {
        width: 43%;
        height: 43%;
        top: 9%;
        left: 48%;
        animation: paidservice-package-cloud-4 1.5s ease-in-out infinite alternate;
    }

    .clipart.paidservice-package .cloud-5 {
        width: 23%;
        height: 23%;
        top: 35%;
        left: 73%;
        animation: paidservice-package-cloud-5 1.3s ease-in-out infinite alternate;
    }

    .clipart.paidservice-package .cloud-6 {
        width: 30%;
        height: 30%;
        top: 47%;
        left: 59%;
        animation: paidservice-package-cloud-6 1.6s ease-in-out infinite alternate;
    }

    .clipart.paidservice-package .cloud-7 {
        width: 46%;
        height: 46%;
        top: 46%;
        left: 36%;
        animation: paidservice-package-cloud-7 1.5s ease-in-out infinite alternate;
    }

    .clipart.paidservice-package .cloud-8 {
        width: 40%;
        height: 40%;
        top: 49%;
        left: 19%;
        animation: paidservice-package-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .clipart.paidservice-package .cloud-9 {
        width: 38%;
        height: 38%;
        top: 38%;
        left: 4%;
        animation: paidservice-package-cloud-9 1.7s ease-in-out infinite alternate;
    }

    .clipart.paidservice-package .cloud-10 {
        width: 55%;
        height: 55%;
        top: 23%;
        left: 22%;
    }

@keyframes paidservice-package-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(12%, 12%);
    }
}

@keyframes paidservice-package-cloud-2 {
    from {
        transform: translate(2%, 8%);
    }

    to {
        transform: translate(-2%, -8%);
    }
}

@keyframes paidservice-package-cloud-3 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@keyframes paidservice-package-cloud-4 {
    from {
        transform: translate(-4%, 6%);
    }

    to {
        transform: translate(4%, -6%);
    }
}

@keyframes paidservice-package-cloud-5 {
    from {
        transform: translate(9%, 0%);
    }

    to {
        transform: translate(-9%, 0%);
    }
}

@keyframes paidservice-package-cloud-6 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@keyframes paidservice-package-cloud-7 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -9%);
    }
}

@keyframes paidservice-package-cloud-8 {
    from {
        transform: translate(5%, -6%);
    }

    to {
        transform: translate(-5%, 6%);
    }
}

@keyframes paidservice-package-cloud-9 {
    from {
        transform: translate(-7%, 0%);
    }

    to {
        transform: translate(7%, 0%);
    }
}

.clipart.paidservice-package .shadow {
    display: block;
    width: 75%;
    height: 5%;
    top: 82%;
    left: 14%;
    background-color: rgba(0, 0, 0, 0.15);
    position: absolute;
    z-index: 1;
    border-radius: 50%;
}

.clipart.paidservice-package .content-box {
    display: block;
    width: 65%;
    height: 65%;
    top: 37%;
    left: 19%;
    background: url('../../Content/Images/PaidServices/clipart-package-box.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
}

.clipart.paidservice-package .content-star {
    display: block;
    width: 22%;
    height: 22%;
    top: 14%;
    left: 41%;
    background: url('../../Content/Images/PaidServices/clipart-package-star.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: paidservice-package-star 1.2s ease-in-out infinite alternate;
}

@keyframes paidservice-package-star {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -24%);
    }
}

.clipart.paidservice-package .content-rocket {
    display: block;
    width: 25%;
    height: 25%;
    top: 26%;
    left: 58%;
    background: url('../../Content/Images/PaidServices/clipart-package-rocket.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: paidservice-package-rocket 1.2s ease-in-out infinite alternate;
}

@keyframes paidservice-package-rocket {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(12%, -12%);
    }
}

.clipart.paidservice-package .content-picture {
    display: block;
    width: 25%;
    height: 25%;
    top: 26%;
    left: 20%;
    background: url('../../Content/Images/PaidServices/clipart-package-picture.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: paidservice-package-picture 1.2s ease-in-out infinite alternate;
}

@keyframes paidservice-package-picture {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(-12%, -12%);
    }
}

/* #endregion ============================ /Paid Services Cliparts ==================================== */
/* #region -------------------------------------- Remove It ------------------------------------------- */
.direction {
    display: block;
    width: 100px;
    height: 120px;
    position: fixed;
    background-color: #F2F2F2;
    border-radius: var(--radius-4);
    box-shadow: rgba(0,0,0,0.3) 0px 4px 3px 0px;
    z-index: 99;
    top: calc(50% - 50px);
    right: 10px;
    text-align: center;
    padding-top: 10px;
}

    .direction label {
        display: block;
    }

        .direction label span {
            padding-left: 5px;
            vertical-align: middle;
            line-height: 16px;
            display: inline-block;
            padding-top: 6px;
        }

        .direction label input {
            display: inline-block;
            line-height: 16px;
            vertical-align: middle;
        }
/* #endregion ----------------------------------- Remove It ------------------------------------------- */
/* #region --------------------------------- Shimm Placeholders --------------------------------------- */
:root {
    /* Shimmers */
    --color-shimmer-muted-from: #f0f0f0;
    --color-shimmer-muted-to: #ffffff;
    --color-shimmer-basic-from: #e9e9e9;
    --color-shimmer-basic-to: #ffffff;
    --color-shimmer-primary-from: var(--color-text-primary);
    --color-shimmer-primary-to: #ffffff;
}

.shimm-item {
    --shimmer-gradient-width: 300px;
    --shimmer-animation-duration: 1.5s;
    background-image: none !important;
    background-color: var(--color-shimmer-basic-from) !important;
    max-width: 100%;
    border-radius: var(--radius-8);
    display: inline-flex;
    flex-shrink: 0;
    line-height: 1;
    position: relative;
    overflow: hidden;
    visibility: visible;
    z-index: 1;
    color: transparent !important;
}

    .shimm-item.dark {
        background-color: var(--color-shimmer-muted-from) !important;
    }

    .shimm-item.primary {
        background-color: var(--color-shimmer-primary-from) !important;
    }

    .shimm-item:after {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: calc(100% + var(--shimmer-gradient-width, 300px));
        background-image: linear-gradient(to right, var(--color-shimmer-basic-from) 0, var(--color-shimmer-basic-to) calc(var(--shimmer-gradient-width, 300px)* .5), var(--color-shimmer-basic-from) calc(var(--shimmer-gradient-width, 300px)* .75));
        background-size: var(--shimmer-gradient-width, 300px) 100%;
        background-attachment: fixed;
        animation-name: shimm;
        animation-direction: normal;
        animation-iteration-count: infinite;
        animation-duration: var(--shimmer-animation-duration, 1.5s);
        animation-timing-function: ease-in-out;
    }

*[dir='rtl'] .shimm-item:after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: calc(100% + var(--shimmer-gradient-width, 300px));
    background-image: linear-gradient(to right, var(--color-shimmer-basic-from) 0, var(--color-shimmer-basic-to) calc(var(--shimmer-gradient-width, 300px)* .5), var(--color-shimmer-basic-from) calc(var(--shimmer-gradient-width, 300px)* .75));
    background-size: var(--shimmer-gradient-width, 300px) 100%;
    background-attachment: fixed;
    animation-name: shimm-rtl;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-duration: var(--shimmer-animation-duration, 1.5s);
    animation-timing-function: ease-in-out;
}

.shimm-item.dark:after {
    background-image: linear-gradient(to right, var(--color-shimmer-muted-from) 0, var(--color-shimmer-muted-to) calc(var(--shimmer-gradient-width, 300px)* .5), var(--color-shimmer-muted-from) calc(var(--shimmer-gradient-width, 300px)* .75));
}

.shimm-item.primary:after {
    background-image: linear-gradient(to right, var(--color-shimmer-primary-from) 0, var(--color-shimmer-primary-to) calc(var(--shimmer-gradient-width, 300px)* .5), var(--color-shimmer-primary-from) calc(var(--shimmer-gradient-width, 300px)* .75));
}

@keyframes shimm {
    0% {
        transform: translateX(calc(var(--shimmer-gradient-width, 300px)* -1));
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes shimm-rtl {
    0% {
        transform: translateX(calc(var(--shimmer-gradient-width, 300px)* 1));
    }

    100% {
        transform: translateX(0);
    }
}

.shimm .shimm-placeholder {
    display: none;
}

.shimm.shimmered .shimm-placeholder,
.shimm.shimmered .shimm-placeholder.block {
    display: block;
}

    .shimm.shimmered .shimm-placeholder.inline {
        display: inline;
    }

    .shimm.shimmered .shimm-placeholder.inline-block {
        display: inline-block;
    }

    .shimm.shimmered .shimm-placeholder.flex {
        display: flex;
    }

    .shimm.shimmered .shimm-placeholder.inline-flex {
        display: inline-flex;
    }

    .shimm.shimmered .shimm-placeholder.table {
        display: table;
    }

    .shimm.shimmered .shimm-placeholder.grid {
        display: grid;
    }

    .shimm.shimmered .shimm-placeholder.inline-grid {
        display: inline-grid;
    }

.shimm.shimmered .shimm-content {
    position: fixed;
    transform: scale(0);
}

.shimm-item.block {
    display: block;
}

.shimm-item.inline {
    display: inline;
}

.shimm-item.inline-block {
    display: inline-block;
}

.shimm-item.flex {
    display: flex;
}

.shimm-item.inline-flex {
    display: inline-flex;
}

.shimm-item.grid {
    display: grid;
}

.shimm-item.inline-grid {
    display: inline-grid;
}

.shimm-item.table {
    display: table;
}

.shimm-item:empty {
    content: '';
}

.shimm-item.w-100 {
    width: 100% !important;
}

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

.shimm-item.w-80 {
    width: 80% !important;
}

.shimm-item.w-70 {
    width: 70% !important;
}

.shimm-item.w-60 {
    width: 60% !important;
}

.shimm-item.w-50 {
    width: 50% !important;
}

.shimm-item.w-40 {
    width: 40% !important;
}

.shimm-item.w-30 {
    width: 30% !important;
}

.shimm-item.w-20 {
    width: 20% !important;
}

.shimm-item.w-10 {
    width: 10% !important;
}

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

/* #endregion ------------------------------ Shimmered Placeholders --------------------------------- */
/* #region ----------------------------------------- Stepper ------------------------------------------ */
.stepper {
    display: flex;
    gap: var(--gap-32);
    padding-block: var(--gap-24);
}

    .stepper .item {
        display: flex;
        text-decoration: none;
        align-items: center;
        gap: var(--gap-8);
        font-weight: 700;
        color: var(--color-text-muted);
    }

        .stepper .item .counter {
            display: flex;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-weight: 700;
            font-size: 18px;
            line-height: 100%;
            align-items: center;
            justify-content: center;
            color: var(--color-text-basic);
            background-color: var(--color-bg-inputs-transparent);
            flex-shrink: 0;
        }

        .stepper .item.passed .counter {
            background-color: var(--color-bg-primary-light);
            font-size: 14px;
        }

            .stepper .item.passed .counter span {
                display: none;
            }

        .stepper .item.passed {
            color: var(--color-text-basic);
        }

        .stepper .item .counter .ci-pazar-small {
            display: none;
        }

        .stepper .item.passed .counter .ci-pazar-small {
            display: block;
        }

        .stepper .item.active .counter {
            background-color: var(--color-bg-primary);
            font-size: 14px;
            color: var(--color-text-alt);
        }

        .stepper .item.active {
            color: var(--color-text-primary);
        }

@media (max-width: 767px) {
    .stepper {
        display: none;
    }
}

/* #endregion -------------------------------------/ Stepper ------------------------------------------ */
/* #region ------------------------------------- Wizard Stepper --------------------------------------- */
.wizard-stepper {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0 0 16px 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

    .wizard-stepper::-webkit-scrollbar {
        display: none;
    }

    .wizard-stepper .step {
        flex: 1 1 0;
        min-width: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        text-align: center;
    }

        .wizard-stepper .step::after {
            content: '';
            position: absolute;
            top: 25px;
            inset-inline-start: 50%;
            width: 100%;
            height: 1px;
            border-top: 1px dashed var(--color-border-basic);
            background-color: transparent;
            z-index: 1;
        }

        .wizard-stepper .step.is-completed::after {
            border-top: none;
            background-color: var(--color-border-primary);
        }

        .wizard-stepper .step:last-child::after {
            display: none;
        }

    .wizard-stepper .step-circle {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-bg-main);
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        font-size: 18px;
        line-height: 100%;
        font-weight: 700;
        transition: all 0.2s ease-in-out;
    }

    .wizard-stepper .step.is-completed .step-circle {
        background-color: var(--color-bg-primary);
        border: 1px solid var(--color-bg-primary);
        color: var(--color-text-alt);
    }

        .wizard-stepper .step.is-completed .step-circle i {
            font-size: 16px;
        }

    .wizard-stepper .step.is-active .step-circle {
        border: 1px solid var(--color-text-basic);
        color: var(--color-text-basic);
        font-weight: 700;
    }

    .wizard-stepper .step:not(.is-completed):not(.is-active) .step-circle {
        border: 1px solid var(--color-border-basic);
        color: var(--color-text-basic);
        background: var(--color-bg-main);
    }

    .wizard-stepper .step-label {
        margin-top: 12px;
        font-size: 14px;
        font-weight: 500;
        color: var(--color-text-basic);
        word-break: break-word;
        padding: 0 var(--gap-8);
        transition: color 0.2s ease-in-out;
    }

    .wizard-stepper .step.is-completed .step-label {
        color: var(--color-text-primary);
        font-weight: 700;
    }

    .wizard-stepper .step.is-active .step-label {
        color: var(--color-text-basic);
        font-weight: 700;
    }

    .wizard-stepper .step:not(.is-completed):not(.is-active) .step-label {
        color: var(--color-text-basic);
        font-weight: 500;
    }
/* #endregion ---------------------------------/ Wizard Stepper --------------------------------------- */
/* #region ------------------------------------- Notification Bar ------------------------------------- */
.notification-bar {
    display: none;
    position: static;
}

.notification-bar {
    position: fixed;
    top: 0px;
    width: 100%;
    left: 0px;
    z-index: 99999999;
}

    .notification-bar.show {
        display: block;
    }

    .notification-bar .inner {
        display: flex;
        gap: 10px;
        width: 100%;
        padding: 10px;
        align-items: center;
        min-height: 61px;
    }

    .notification-bar.error {
        background-color: var(--color-bg-danger);
        color: #ffffff;
    }


    .notification-bar .icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        aspect-ratio: 1/1;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .notification-bar.error .icon {
        border: 2px solid #ffffff;
    }

    .notification-bar.error .content {
        font-size: 14px;
        font-weight: 700;
        color: #ffffff;
        flex: 1 0 0;
    }

        .notification-bar.error .content a {
            color: #ffffff;
        }

    .notification-bar .controls {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .notification-bar.error .btn {
        display: flex;
        min-width: 100px;
        padding: 12px 18px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: var(--radius-4);
        border: 0px none transparent;
        color: #ffffff;
        background-color: rgba(255,255,255,0);
        font-weight: 500;
        text-transform: uppercase;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .notification-bar.error .btn:hover {
            background-color: rgba(255,255,255,0.2);
            transition: background-color 0.2s ease;
        }

        .notification-bar.error .btn:active {
            background-color: rgba(0,0,0,0.2);
            transition: background-color 0.1s ease;
        }

        .notification-bar.error .btn.primary {
            background-color: rgba(255,255,255,0.2);
            transition: background-color 0.2s ease;
        }

            .notification-bar.error .btn.primary:hover {
                background-color: rgba(255,255,255,0.4);
                transition: background-color 0.2s ease;
            }

            .notification-bar.error .btn.primary:active {
                background-color: rgba(0,0,0,0.2);
                transition: background-color 0.1s ease;
            }

@media (max-width: 500px) {
    .notification-bar .inner {
        display: block;
    }

    .notification-bar .icon {
        margin: 0px auto;
        margin-top: 10px;
    }

    .notification-bar .content {
        display: block;
        width: 100%;
        text-align: center;
        padding-block: 10px;
    }

    .notification-bar .controls {
        text-align: center;
        align-items: center;
        justify-content: center;
    }
}
/* #endregion --------------------------------- /Notification Bar ------------------------------------- */
/* #region ---------------------------------------- Callouts ------------------------------------------ */
.callout {
    display: flex;
    width: 100%;
    background: var(--color-bg-panel-transparent);
    border-radius: var(--radius-16);
    padding: var(--gap-16);
    gap: var(--gap-16);
}

    .callout .message {
        font-size: 14px;
        font-weight: 400;
        line-height: 130%;
        color: var(--color-text-muted);
        padding-block: var(--gap-2);
        text-align: start;
    }

        .callout .message b {
            font-weight: 700;
            color: var(--color-text-basic);
        }

    .callout > .ci-pazar-bold {
        font-size: 24px;
        flex-shrink: 0;
    }

    .callout .message h2, .callout .message h3, .callout .message h4, .callout .message h5, .callout .message h6 {
        color: var(--color-text-basic);
        font-size: 16px;
        margin-block-end: var(--gap-8);
    }

    .callout.success {
        background: var(--color-bg-success-light);
    }

        .callout.success .message {
            color: var(--color-text-basic);
        }



/* #endregion ------------------------------------/ Callouts ------------------------------------------ */
/* #region ------------------------------------- Input Counter ---------------------------------------- */
.input-counter {
    display: inline-flex;
    border-radius: var(--gap-8);
    overflow: hidden;
    background: var(--color-bg-inputs-transparent);
    width: auto;
    vertical-align: middle;
}

    .input-counter button {
        display: flex;
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
        border: 0px none transparent;
        border-radius: 0px;
        background: transparent;
        transition: background 0.2s ease;
    }

        .input-counter button:hover {
            background: var(--color-bg-inputs-transparent);
            transition: background 0.2s ease;
        }

        .input-counter button.remove {
            font-size: 24px;
        }

        .input-counter button.plus,
        .input-counter button.minus {
            font-size: 14px;
            line-height: 24px;
        }

    .input-counter .value {
        min-width: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: 700;
    }

    /* #region Counter sizes */
    .input-counter.lg button {
        width: 50px;
        height: 50px;
    }
/* #endregion Counter sizes */
/* #endregion ---------------------------------/ Input Counter ---------------------------------------- */
/* #endregion ==================================== GLOBALS ============================================ */
/* #region ===================================== Takeover Ad ========================================== */
.takeover-container {
    display: none;
}

    .takeover-container.active {
        display: block;
    }

.takeover-wrapper {
    background: var(--color-text-muted);
    width: 100%;
    display: block;
    height: calc(-88px + 100svh) !important;
    clip-path: inset(0);
}

.takeover-close {
    display: flex;
    position: fixed;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    z-index: 1;
    background-color: rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    border: 0px none transparent;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transform: scale(1);
    transition: transform 0.2s ease;
}

    .takeover-close > .ci-pazar-bold {
        font-size: 24px;
    }

    .takeover-close:hover .ci-pazar-bold {
        transform: scale(0.8);
        transition: transform 0.2s ease;
    }

.takeover-badge {
    position: fixed;
    z-index: 1;
    inset-block-start: 16px;
    inset-inline-start: 16px;
    border-radius: var(--radius-4);
    background-color: rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    display: inline-block;
    color: #ffffff;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    padding-inline: 16px;
    padding-block: 8px;
    line-height: 100%;
}

.takeover-helper {
    display: block;
    position: absolute;
    inset-block-end: 200px;
    inset-inline-start: 0px;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    z-index: 1;
}

.takeover-arrow {
    display: flex;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    inset-block-end: 130px;
    inset-inline: calc(50% - 25px);
    border-radius: 50%;
    font-size: 24px;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    animation: takeover-arrow 1s ease-in-out infinite alternate;
}

@keyframes takeover-arrow {
    from {
        transform: translateY(-10px);
    }

    to {
        transform: translateY(10px);
    }
}

@media (max-width: 1200px) {
    .takeover-badge {
        font-size: 10px;
    }

    .takeover-close {
        width: 40px;
        height: 40px;
    }

    .takeover-helper {
        inset-block-end: 170px;
        font-size: 14px;
    }

    .takeover-arrow {
        width: 40px;
        height: 40px;
        inset-block-end: 110px;
        inset-inline: calc(50% - 20px);
    }

    @keyframes takeover-arrow {
        from {
            transform: translateY(-5px);
        }

        to {
            transform: translateY(5px);
        }
    }
}

@media (max-width: 600px) {
    .takeover-helper {
        display: none;
    }

    .takeover-badge {
        inset-block-start: 8px;
        inset-inline-start: 8px;
    }

    .takeover-close {
        inset-block-start: 8px;
        inset-inline-end: 8px;
    }
}

/* #endregion ================================= /Takeover Ad ========================================== */
/* #region ==================================== Mobile Tabbar ========================================= */
.bottombar .mobile-topbar-whitespace {
    display: none;
}

.nav-header-mobile.mobile-tabbar {
    position: fixed;
    top: auto;
    inset-block-end: 0px !important;
    inset-inline-start: 0px !important;
    width: 100%;
    height: auto;
    z-index: 100;
    background-color: #ffffff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: rgba(0,0,0,0.05) 0px -34px 60px;
    border-bottom: 0px none transparent;
}

    .nav-header-mobile.mobile-tabbar > * {
        width: 20%;
    }


.bottombar .mobile-tabbar > * > a,
.bottombar .mobile-tabbar > * > button {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-direction: column;
    gap: 2px;
    color: var(--color-text-muted);
    padding-block: 8px;
    padding-inline: 4px;
}

.mobile-tabbar .title {
    position: relative;
    background: transparent;
    border-radius: var(--radius-0);
    display: block;
    width: 100%;
    font-size: 11px !important;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 130%;
}

.bottombar .mobile-tabbar a.active .title,
.bottombar .mobile-tabbar button.active .title {
    color: var(--color-text-basic);
}

.mobile-tabbar .i-container {
    width: 24px;
    height: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mobile-tabbar .i-container .ci-pazar-bold {
        font-size: 24px;
        opacity: 0.5;
    }

.mobile-tabbar .active .i-container .ci-pazar-bold {
    opacity: 1;
}

.mobile-tabbar .i-container .marker {
    display: none;
    width: 14px;
    height: 14px;
    background-color: var(--color-bg-danger);
    border-radius: 50%;
    border: 4px solid #ffffff;
    position: absolute;
    inset-block-start: -6px;
    inset-inline-end: -6px;
    z-index: 1;
}

.mobile-tabbar .updated .i-container .marker {
    display: block;
}

.mobile-tabbar .btn-plus {
    display: flex;
    justify-content: flex-start !important;
}

    .mobile-tabbar .btn-plus small {
        display: flex;
        width: 45px;
        height: 29px;
        border-radius: var(--radius-8);
        background-color: var(--color-bg-primary);
        align-items: center;
        justify-content: center;
        font-size: 21px;
        padding: 0px !important;
    }


@media (max-width: 991px) {

    .bottombar .mobile-topbar-whitespace {
        display: none;
    }

    .bottombar .nav-header-mobile {
        display: none;
    }

        .bottombar .nav-header-mobile.mobile-tabbar {
            display: flex;
            flex-direction: row;
        }
}
/* #endregion ================================/ Mobile Tabbar ========================================= */
/* #region ====================================== Google Ads ========================================== */

.google-ad {
    background-color: #FAFAFA;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .google-ad > [class^="ad-placeholder"] {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* #region Homepage */
    .google-ad.desktop-home-right-300x600 {
        width: 300px;
        height: 600px;
        display: flex;
    }

.mobile .google-ad.desktop-home-right-300x600 {
    display: none;
}

.google-ad.desktop-home-top-970x250 {
    width: 970px;
    height: 250px;
    display: flex;
}

.mobile .google-ad.desktop-home-top-970x250 {
    display: none;
}

.google-ad.desktop-home-left-300x600 {
    width: 300px;
    height: 600px;
    display: flex;
}

.mobile .google-ad.desktop-home-left-300x600 {
    display: none;
}

.google-ad.mobile-home-bottom-300x250 {
    width: 320px;
    height: 250px;
    margin: 30px auto;
    display: none;
}

.mobile .google-ad.mobile-home-bottom-300x250 {
    display: flex;
}
/* #endregion Homepage */
/* #region Listing */
.google-ad.desktop-ad-listing-728x90 {
    width: 728px;
    height: 90px;
    display: flex;
    margin: 0px auto;
    border-radius: var(--radius-16);
    overflow: hidden;
}

.mobile .google-ad.desktop-ad-listing-728x90 {
    display: none;
}

.google-ad.desktop-ad-listing-right-300x600 {
    width: 300px;
    height: 600px;
    display: flex;
    top: 0px !important;
    border-radius: var(--radius-16);
    overflow: hidden;
}

.mobile .google-ad.desktop-ad-listing-right-300x600 {
    display: none;
}

.google-ad.desktop-ad-listing-left-300x600 {
    width: 300px;
    height: 600px;
    display: flex;
    border-radius: var(--radius-16);
    overflow: hidden;
}

.mobile .google-ad.desktop-ad-listing-left-300x600 {
    display: none;
}

.google-ad.desktop-ad-listing-right-300x250 {
    width: 300px;
    height: 250px;
    display: flex;
    margin-block-end: var(--gap-16);
    border-radius: var(--radius-16);
    overflow: hidden;
}

.mobile .google-ad.desktop-ad-listing-right-300x250 {
    display: none;
}

.google-ad.desktop-ad-listing-top-970x250 {
    width: 970px;
    height: 250px;
    display: flex;
    margin-block-start: var(--gap-24);
    margin-block-end: var(--gap-8);
    border-radius: var(--radius-16);
    overflow: hidden;
}

.mobile .google-ad.desktop-ad-listing-top-970x250 {
    display: none;
}

.google-ad.mobile-ad-listing-top-300x250 {
    width: 320px;
    height: 250px;
    display: none;
    margin: 0px auto;
    margin-bottom: 30px;
    border-radius: var(--radius-16);
    overflow: hidden;
}

.mobile .google-ad.mobile-ad-listing-top-300x250 {
    display: flex;
}

.google-ad.mobile-ad-listing-bottom-300x250 {
    width: 320px;
    height: 250px;
    margin: 0 auto 30px auto;
    overflow: hidden;
    border-radius: var(--radius-16);
}

.mobile .google-ad.mobile-ad-listing-bottom-300x250 {
    display: flex;
}

.google-ad.desktop-ad-listing-bottom-970x250 {
    width: 100%;
    max-width: 870px;
    height: 280px;
    margin: 30px auto;
    display: flex;
}

.mobile .google-ad.desktop-ad-listing-bottom-970x250 {
    display: none;
}

.google-ad.desktop-ad-listing-bottom-728x90 {
    width: 728px;
    height: 90px;
    margin: 0px auto;
    display: flex;
}

.mobile .desktop-ad-listing-bottom-728x90 {
    display: none;
}
/* #endregion Listing */
/* #region Ad Details */
.google-ad.universal-ad-details-right-300x250 {
    width: 300px;
    height: 250px;
    margin: 30px auto 30px auto;
    display: flex;
}
/* #endregion Ad Details */
/* #region Stores */
.google-ad.desktop-store-listing-top-728x90 {
    width: 728px;
    height: 90px;
    margin: 30px auto;
    border-radius: var(--radius-16);
    overflow: hidden;
}

.google-ad.mobile-store-listing-top-300x250 {
    width: 320px;
    height: 250px;
    margin: 30px auto;
    display: none;
    border-radius: var(--radius-16);
    overflow: hidden;
}

@media (max-width: 1170px) {
    .google-ad.desktop-store-listing-top-728x90 {
        display: none;
    }

    .google-ad.mobile-store-listing-top-300x250 {
        display: flex;
    }
}
/* #endregion Stores */
/* #region Store */
.google-ad.desktop-store-details-top-728x90 {
    width: 728px;
    height: 90px;
    margin: 30px auto;
}

.google-ad.mobile-store-details-top-300x250 {
    width: 320px;
    height: 250px;
    margin: 30px auto;
    border-radius: var(--radius-16);
    display: none;
}

@media (max-width: 1170px) {
    .google-ad.desktop-store-details-top-728x90 {
        display: none;
    }

    .google-ad.mobile-store-details-top-300x250 {
        display: flex;
    }
}
/* #endregion Store */
/* #endregion ===================================== /Google Ads ========================================== */
/* #region ===================================== Support Chat ========================================= */
@media (max-width: 991px) {
    .fb-root {
        display: none !important;
    }
}

/* #endregion ================================= /Support Chat ========================================= */
/*#region =================================== Modal: Download App ==================================== */
.modal-custom.modal-download-app.overlay {
    backdrop-filter: blur(10px);
    z-index: 999999;
}

.modal-custom.modal-download-app.no-footer .inner {
    display: flex;
    justify-content: center;
    align-items: center;
}


.modal-custom.modal-download-app.no-footer .modal-window {
    position: static !important;
}

.modal-custom.modal-download-app .modal-window {
    width: 500px;
}

.modal-custom.modal-download-app .modal-container {
    text-align: center;
}

.modal-custom.modal-download-app .modal-header {
    height: 32px;
    border-bottom: 0px none transparent;
}

.modal-custom.modal-download-app .app-icon {
    display: inline-block;
    font-size: 64px;
    background-color: #F2F2F2;
    border-radius: var(--radius-16);
    padding: 10px;
    margin-bottom: 20px;
    margin-top: -9px;
    width: 97px;
    height: 97px;
    position: relative;
}

    .modal-custom.modal-download-app .app-icon > i {
        position: absolute;
        top: calc(50% - 32px);
        left: calc(50% - 30px);
        line-height: 64px;
    }

.modal-custom.modal-download-app .modal-container p {
    line-height: 1.4em;
    margin-bottom: 10px;
    padding: 0px;
}

.modal-custom.modal-download-app .download-btn {
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 0px;
    background-position: center center;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
}

    .modal-custom.modal-download-app .download-btn.ios-btn {
        background-image: url('../../Content/Images/clipart-appstore-button.svg');
        width: 120px;
        height: 40px;
    }

    .modal-custom.modal-download-app .download-btn.android-btn {
        background-image: url('../../Content/Images/clipart-googleplay-button.svg');
        width: 136px;
        height: 41px;
    }

.modal-custom.modal-download-app .modal-container .btn-link {
    text-decoration: none;
    margin-bottom: 20px !important;
}

.modal-custom.modal-download-app .modal-body {
    padding-bottom: 0px !important;
}


@media (max-width: 728px) {
    .modal-custom.modal-download-app .modal-window {
        border-radius: var(--radius-12);
        height: auto;
        width: calc(100% - 30px) !important;
        left: 15px !important;
    }

    .modal-custom.modal-download-app .modal-header {
        position: static;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .modal-custom.modal-download-app .modal-body {
        padding-top: 0px;
        padding-bottom: 0px !important;
    }
}

@media (max-width: 650px) {
    .modal-custom.modal-download-app .modal-window {
        width: 260px;
        left: calc(50% - 130px);
        top: calc(50% - 180px);
    }

    .modal-custom.modal-download-app .modal-container .btn-link {
        margin-bottom: 0px;
    }

    .modal-custom.modal-download-app .modal-header .modal-close {
        z-index: 4;
    }

    .modal-custom.modal-download-app .modal-header {
        height: 20px;
    }

    .modal-custom.modal-download-app .download-btn {
        margin-top: 10px;
    }
}
/* #endregion =============================== /Modal: Download App ==================================== */
/* #region ====================================== OLD START PAGE ====================================== */
.old-mobile-version.start-page-location-item {
    padding: 0px;
}

    .old-mobile-version.start-page-location-item a {
        display: block;
        padding-inline: 16px;
        padding-block: 10px;
        font-size: 1em;
        font-weight: 100 !important;
        position: relative;
    }

    .old-mobile-version.start-page-location-item .ci-pazar-small {
        position: absolute;
        font-size: 16px;
        inset-inline-end: 10px;
        top: calc(50% - 8px);
    }

*[dir='rtl'] .old-mobile-version.start-page-location-item .ci-pazar-small {
    transform: rotateY(180deg);
}

.item-groups a {
    text-decoration: none;
}

.site-Macedonia .item-groups .description h2 {
    margin-top: 11px;
    margin-bottom: 5px;
}

.item-groups .span8 .description small {
    font-size: 11px;
}

.btn.btn-register {
    text-decoration: none !important;
}


.item-groups .row-fluid {
    display: table;
}

    .item-groups .row-fluid .span4 {
        display: table-row;
        margin-bottom: 7px;
    }

        .item-groups .row-fluid .span4 a {
            display: table-cell;
            height: 100px;
            width: 105px;
            vertical-align: middle;
        }

            .item-groups .row-fluid .span4 a h2 {
                padding-bottom: 7px;
            }

    .item-groups .row-fluid .span8 {
        display: table-row;
    }

        .item-groups .row-fluid .span8 a {
            display: table-cell;
            vertical-align: middle;
            height: 100px;
            width: 204px;
        }

            .item-groups .row-fluid .span8 a .icon {
                margin-top: 4px;
            }

            .item-groups .row-fluid .span8 a .description {
                height: auto;
            }

                .item-groups .row-fluid .span8 a .description h2 {
                    margin-top: 0px;
                    margin-bottom: 0px;
                    padding-bottom: 5px;
                }

.btn.btn-register.btn-wide.btn-lg i {
    font-size: 30px;
    vertical-align: middle;
}

.btn.btn-register.btn-wide.btn-lg span {
    vertical-align: middle;
}

.store-btn-block {
    display: block;
    position: relative;
    background-color: #F2F2F2;
    border-radius: var(--radius-4);
    width: 310px;
    font-size: 0px;
    margin-top: 5px;
    padding-top: 10px;
    padding-bottom: 7px;
}

    .store-btn-block .item {
        font-size: 14px;
        display: inline-block;
        width: 50%;
        text-align: center;
    }

        .store-btn-block .item:first-child {
            border-right: 1px solid #DDDDDD;
        }

*[dir='rtl'] .store-btn-block .item:first-child {
    border-right: 0px none transparent;
    border-left: 1px solid #DDDDDD;
}

.store-btn-block .item a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    color: var(--color-text-basic);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
}

*[lang='mk-MK'] .store-btn-block .item a {
    font-size: 10px;
}

.store-btn-block .item a span {
    display: block;
    width: 100%;
}

.store-btn-block .item a i {
    font-size: 40px;
    margin-bottom: 3px;
}

.crngora h3 {
    color: var(--color-text-primary) !important;
    font-weight: bold !important;
}

.blog-section h2 a {
    color: var(--color-text-basic) !important;
    text-decoration: none !important;
}

    .blog-section h2 a span {
        color: var(--color-text-basic) !important;
        text-decoration: none !important;
    }

*[dir="rtl"] #rightAds.span2 {
    padding-right: 80px;
}

.span2.home-rightads {
    width: 10px !important;
}

.home-header-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* padding-inline-end: 155px; */
}

    .home-header-content .languages {
        width: auto;
        flex: 0 0 auto;
    }

    .home-header-content .elements {
        flex-grow: 1;
        padding-inline-end: 170px;
    }




.home-header-logo-slogan {
    display: flex;
}

    .home-header-logo-slogan .logo {
        align-self: center;
    }

    .home-header-logo-slogan .slogan {
        align-self: center;
        padding-block: 20px;
        padding-inline-start: 40px;
        width: 100%;
        padding-inline-end: 170px;
    }

.site-Kosovo .home-header-content .elements {
}

.site-Kosovo .home-header-logo-slogan .slogan {
    padding-inline-end: 170px;
}

.site-Kosovo .landing-widgets {
    margin-inline-start: 0px !important;
}

    .site-Kosovo .landing-widgets h4 {
        margin-block-end: 12px;
    }


.static-container {
    max-width: 1140px;
    width: 1140px;
    margin: 0px auto;
}

@media (max-width: 1199px) {
    .span2.home-rightads {
        display: none;
    }
}

@media (max-width: 767px) {
    .mobile body.bottombar {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
}

/* #region ---------------- Section Blog ------------------- */
/* #region Albania */
.site-Albania .landing-categories-section h5 {
    margin-block-end: var(--gap-16);
    font-size: 22px !important;
    color: var(--color-text-basic) !important;
}

.site-Albania .landing-blog-section {
    margin-inline-start: 0px;
    margin-block-end: 36px;
}

    .site-Albania .landing-blog-section h2 {
        font-size: 22px;
        line-height: 100%;
        padding: 0px;
        margin-block-end: 16px;
    }

        .site-Albania .landing-blog-section h2 span {
            font-weight: 400;
        }

    .site-Albania .landing-blog-section .widget-button {
        display: none;
    }

    .site-Albania .landing-blog-section .widget-image {
        border-radius: var(--radius-12);
        overflow: hidden;
        margin-block-end: 12px;
    }

    .site-Albania .landing-blog-section .widget-title h2, .site-Albania .landing-blog-section .widget-title h3 {
        font-weight: 500;
        color: var(--color-text-basic);
    }

.site-Albania .landing-categories-section {
    margin-block-end: 64px;
}

    .site-Albania .landing-categories-section h4 {
        font-size: 22px !important;
        font-weight: 400 !important;
        line-height: 100%;
        margin-block-end: 16px;
        margin-block-start: 24px;
    }

    .site-Albania .landing-categories-section a:hover {
        text-decoration: none;
    }

    .site-Albania .landing-categories-section .recent-h3-link {
        color: var(--color-text-primary);
    }

.site-Albania .RegionList_Serbia {
    overflow: hidden;
}

    .site-Albania .RegionList_Serbia div {
        width: 240px !important;
    }

.site-Albania .desktop-home-top-970x250 {
    overflow: hidden;
    border-radius: var(--radius-16);
    margin-block-start: 16px;
}

.site-Albania .desktop-home-right-300x600 {
    border-radius: var(--radius-16);
    overflow: hidden;
}
/* #endregion Albania */
/* #region Kosovo */
.site-Kosovo .desktop-home-top-970x250 {
    overflow: hidden;
    border-radius: var(--radius-16);
    margin-block-start: 16px;
}

.site-Kosovo .desktop-home-right-300x600 {
    border-radius: var(--radius-16);
    overflow: hidden;
}

.site-Kosovo .RegionList_2_Serbia .ci-pazar-small {
    font-size: 12px;
}

.site-Kosovo .RegionList_Serbia .crngora h3 {
    font-size: 18px;
    padding-block: 4px;
}

.site-Kosovo .RegionList_Serbia .crngora:hover h3 {
    text-decoration: none !important;
}

.site-Kosovo .landing-blog-section {
    margin-inline-start: 0px;
    margin-block-end: 36px;
}

    .site-Kosovo .landing-blog-section h4 {
        font-size: 22px;
        line-height: 100%;
        padding: 0px;
        margin-block-end: 16px;
    }

        .site-Kosovo .landing-blog-section h4 a {
            font-weight: 400 !important;
        }

            .site-Kosovo .landing-blog-section h4 a:hover {
                text-decoration: none;
            }

    .site-Kosovo .landing-blog-section .widget-button {
        display: none;
    }

    .site-Kosovo .landing-blog-section .widget-image {
        border-radius: var(--radius-12);
        overflow: hidden;
        margin-block-end: 12px;
    }

    .site-Kosovo .landing-blog-section .widget-title h2, .site-Kosovo .landing-blog-section .widget-title h3 {
        font-weight: 500;
        color: var(--color-text-basic);
    }

.site-Kosovo .landing-categories-section {
    margin-block-end: 64px;
}

    .site-Kosovo .landing-categories-section h5 {
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 100%;
        margin-block-end: 16px;
        margin-block-start: 32px;
        color: var(--color-text-basic);
    }

    .site-Kosovo .landing-categories-section a:hover {
        text-decoration: none;
    }

    .site-Kosovo .landing-categories-section .recent-h3-link {
        color: var(--color-text-primary);
    }

.recent .horisontal-image-wrapper img {
    filter: brightness(0.92);
}
/* #endregion Kosovo */
/* #region Serbia */
.site-Serbia .desktop-home-top-970x250 {
    overflow: hidden;
    border-radius: var(--radius-16);
    margin-block-start: 16px;
}

.site-Serbia .desktop-home-right-300x600 {
    border-radius: var(--radius-16);
    overflow: hidden;
    margin-block-start: 14px;
}

.site-Serbia .RegionList_Serbia li a {
    padding-block: 1px !important;
    display: inline-block;
}

.site-Serbia .RegionList_2_Serbia a h3 .ci-pazar-small {
    font-size: 12px;
}

.site-Serbia .RegionList_2_Serbia a:hover,
.site-Serbia .RegionList_Serbia li a:hover {
    text-decoration: none !important;
}

.site-Serbia .RegionList_2_Serbia {
    position: absolute;
    width: auto !important;
    white-space: nowrap;
    inset-inline-end: -210px !important;
}

.site-Serbia .item-groups .span8 .description {
    text-align: start;
    padding-inline-end: 8px;
}

    .site-Serbia .item-groups .span8 .description h2 {
        text-align: start;
    }


.site-Serbia .landing-blog-section {
    margin-block-end: 36px;
}

    .site-Serbia .landing-blog-section h2 {
        font-size: 22px;
        line-height: 100%;
        padding: 0px;
        margin-block-end: 16px;
        margin-block-start: 48px;
    }

        .site-Serbia .landing-blog-section h2 a {
            font-weight: 700 !important;
        }

            .site-Serbia .landing-blog-section h2 a:hover {
                text-decoration: none;
            }


    .site-Serbia .landing-blog-section .widget-button {
        display: none;
    }

    .site-Serbia .landing-blog-section .widget-image {
        border-radius: var(--radius-12);
        overflow: hidden;
        margin-block-end: 12px;
        background-color: var(--color-bg-inputs-transparent);
        filter: brightness(0.95);
        height: 180px;
    }

        .site-Serbia .landing-blog-section .widget-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .site-Serbia .landing-blog-section .widget-title h2, .site-Serbia .landing-blog-section .widget-title h3 {
        font-weight: 500;
        color: var(--color-text-basic);
        margin-block: 0px !important;
    }

.site-Serbia .RegionList_Serbia ul {
    column-count: 2;
    width: 240px !important;
    position: absolute;
    inset-block-start: 50px;
    inset-inline-end: 0px;
    column-gap: 20px;
}

.site-Serbia .RegionList_2_Serbia {
    position: absolute;
    width: auto !important;
    white-space: nowrap;
    inset-inline-end: -173px !important;
}

.site-Serbia .RegionList_Serbia ul li {
    float: none !important;
    width: 100%;
    clear: both;
    text-align: start;
}

.site-Serbia .RegionList_Serbia li a {
    padding-block: 1px !important;
    display: inline-block;
}

.site-Serbia .RegionList_Serbia ul a h3 {
    font-size: 16px !important;
}

.site-Serbia .home-rightads {
    position: absolute;
    inset-inline-end: 130px;
}

.site-Serbia .MainPage_ContentField_Serbia {
    min-height: 0px !important;
}


.site-Serbia .landing-categories-section {
    margin-block-end: 64px;
}

    .site-Serbia .landing-categories-section h5 {
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 100%;
        margin-block-end: 16px;
        margin-block-start: 32px;
        color: var(--color-text-basic);
    }

    .site-Serbia .landing-categories-section a:hover {
        text-decoration: none;
    }

    .site-Serbia .landing-categories-section .recent-h3-link {
        color: var(--color-text-primary);
    }
/* #endregion Serbia */
/* #region Montenegro */
.site-Montenegro .desktop-home-top-970x250 {
    overflow: hidden;
    border-radius: var(--radius-16);
    margin-block-start: 16px;
}

.site-Montenegro .desktop-home-right-300x600 {
    border-radius: var(--radius-16);
    overflow: hidden;
}

.site-Montenegro .index_main .item-groups .description {
    padding-inline-end: 8px;
}

.site-Montenegro .index_main .item-groups a:hover small {
    color: #ffffff;
}

.site-Montenegro .RegionList_2_Serbia h3 {
    font-size: 20px !important;
    color: var(--color-text-primary) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}

.site-Montenegro .RegionList_2_Serbia .ci-pazar-small {
    font-size: 12px;
}

.site-Montenegro .RegionList_Serbia li a h3 {
    color: var(--color-text-muted) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

.site-Montenegro .RegionList_Serbia li .crngora h3 {
    font-weight: 700 !important;
    color: var(--color-text-primary) !important;
    padding-block: 4px;
}

.site-Montenegro #mapParent {
    margin-inline-start: 70px;
    margin-block-start: 40px;
}

.site-Montenegro .relatedPages {
    display: none;
}

.site-Montenegro .landing-blog-section {
    margin-block-end: 36px;
}

    .site-Montenegro .landing-blog-section h2 {
        font-size: 22px;
        line-height: 100%;
        padding: 0px;
        margin-block-end: 16px;
    }

        .site-Montenegro .landing-blog-section h2 span {
            font-weight: 400 !important;
        }

    .site-Montenegro .landing-blog-section .widget-button {
        display: none;
    }

    .site-Montenegro .landing-blog-section .widget-image {
        border-radius: var(--radius-12);
        overflow: hidden;
        margin-block-end: 12px;
    }

    .site-Montenegro .landing-blog-section .widget-title h2, .site-Montenegro .landing-blog-section .widget-title h3 {
        font-weight: 500;
        color: var(--color-text-basic);
    }

.site-Montenegro .landing-categories-section {
    margin-block-end: 64px;
}

    .site-Montenegro .landing-categories-section h5 {
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 100%;
        margin-block-end: 16px;
        margin-block-start: 24px;
        color: var(--color-text-basic);
    }

    .site-Montenegro .landing-categories-section a:hover {
        text-decoration: none;
    }

    .site-Montenegro .landing-categories-section .recent-h3-link {
        color: var(--color-text-primary);
    }

/* #endregion Montenegro */
/* #region Afghanistan */
.site-Afghanistan .desktop-home-top-970x250 {
    overflow: hidden;
    border-radius: var(--radius-16);
    margin-block-start: 16px;
}

.site-Afghanistan .desktop-home-right-300x600 {
    border-radius: var(--radius-16);
    overflow: hidden;
}

[lang="en"].site-Afghanistan #mapParent {
    margin-inline-start: -20px !important;
    transform: rotate(-7deg);
}

[lang="fa"].site-Afghanistan #mapParent {
    transform: rotate(-7deg);
    margin-inline-start: 0px !important;
}

[lang="ps"].site-Afghanistan #mapParent {
    transform: rotate(-7deg);
    margin-inline-start: 0px !important;
}

[lang="en"].site-Afghanistan .RegionList_2_Serbia a {
    display: flex;
    gap: 4px;
    white-space: nowrap;
    color: var(--color-text-primary);
    align-items: center;
}

    [lang="en"].site-Afghanistan .RegionList_2_Serbia a .ci-pazar-small {
        font-size: 12px;
    }

[lang="fa"].site-Afghanistan .RegionList_2_Serbia a {
    display: flex;
    gap: 4px;
    white-space: nowrap;
    color: var(--color-text-primary);
    align-items: center;
}

    [lang="fa"].site-Afghanistan .RegionList_2_Serbia a .ci-pazar-small {
        font-size: 12px;
        transform: rotateY(180deg);
    }

[lang="ps"].site-Afghanistan .RegionList_2_Serbia a {
    display: flex;
    gap: 4px;
    white-space: nowrap;
    color: var(--color-text-primary);
    align-items: center;
}

    [lang="ps"].site-Afghanistan .RegionList_2_Serbia a .ci-pazar-small {
        font-size: 12px;
        transform: rotateY(180deg);
    }

[lang="en"].site-Afghanistan .RegionList_Serbia ul {
    column-gap: 0px !important;
    display: block;
    column-count: 2;
    width: 210px;
    clear: both;
    float: none;
    margin-inline-end: 20px;
    margin-block-start: 0px !important;
}

[lang="fa"].site-Afghanistan .RegionList_Serbia ul {
    column-gap: 0px !important;
    display: block;
    column-count: 2;
    width: 130px;
    clear: both;
    float: none;
    margin-inline-end: 48px;
    margin-block-start: 30px !important;
}

[lang="ps"].site-Afghanistan .RegionList_Serbia ul {
    column-gap: 0px !important;
    display: block;
    column-count: 2;
    width: 130px;
    clear: both;
    float: none;
    margin-inline-end: 48px;
    margin-block-start: 30px !important;
}

[lang="en"].site-Afghanistan .RegionList_2_Serbia {
    margin-block-start: 96px;
    margin-inline-end: 25px;
}

[lang="fa"].site-Afghanistan .RegionList_2_Serbia {
    margin-block-start: 116px;
    margin-inline-end: 83px;
}

[lang="fa"].site-Afghanistan .home-rightads {
    padding-inline-start: 0px !important;
}

[lang="ps"].site-Afghanistan .RegionList_2_Serbia {
    margin-block-start: 116px;
    margin-inline-end: 86px;
}

[lang="ps"].site-Afghanistan .home-rightads {
    padding-inline-start: 0px !important;
}

.site-Afghanistan .kosovo-getstarted-caption {
    margin-block-start: 16px !important;
    margin-block-end: 16px;
}

.site-Afghanistan .landing-blog-section {
    margin-block-end: 36px;
}

    .site-Afghanistan .landing-blog-section h2 {
        font-size: 22px;
        line-height: 100%;
        padding: 0px;
        margin-block-end: 16px;
    }

        .site-Afghanistan .landing-blog-section h2 span {
            font-weight: 400 !important;
        }

        .site-Afghanistan .landing-blog-section h2 a {
            font-weight: 700 !important;
            color: var(--color-text-basic) !important;
        }

    .site-Afghanistan .landing-blog-section .widget-button {
        display: none;
    }

    .site-Afghanistan .landing-blog-section .widget-image {
        border-radius: var(--radius-12);
        overflow: hidden;
        margin-block-end: 12px;
    }

    .site-Afghanistan .landing-blog-section .widget-title h2, .site-Afghanistan .landing-blog-section .widget-title h3 {
        font-weight: 500;
        color: var(--color-text-basic);
    }

.site-Afghanistan .landing-categories-section {
    margin-block-end: 64px;
}

    .site-Afghanistan .landing-categories-section h5 {
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 100%;
        margin-block-end: 16px;
        margin-block-start: 24px;
        color: var(--color-text-basic);
    }

    .site-Afghanistan .landing-categories-section a:hover {
        text-decoration: none;
    }

    .site-Afghanistan .landing-categories-section .recent-h3-link {
        color: var(--color-text-primary);
    }

.site-Afghanistan[dir='rtl'] .RegionList_Serbia {
    top: -160px !important;
}
/* #endregion Afghanistan */
/* #region Macedonia */
.site-Macedonia .desktop-home-top-970x250 {
    overflow: hidden;
    border-radius: var(--radius-16);
    margin-block-start: 16px;
}

.site-Macedonia .desktop-home-right-300x600 {
    border-radius: var(--radius-16);
    overflow: hidden;
}

.site-Macedonia .RegionList a h3 {
    padding-block: 2px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.site-Macedonia .RegionList {
    position: relative;
    overflow: visible;
}

    .site-Macedonia .RegionList .cela {
        position: absolute;
        inset-inline-end: 78px;
    }

    .site-Macedonia .RegionList #linkRegions .cela h3 {
        color: var(--color-text-primary);
        font-size: 18px !important;
        white-space: nowrap;
        font-weight: 600;
    }

    .site-Macedonia .RegionList .cela a {
        font-size: 12px !important;
        display: flex;
        align-items: center;
        gap: 4px;
    }

.site-Macedonia .MainPage_MapArea {
    margin-block-start: 50px;
    margin-inline-start: 20px;
}


.site-Macedonia .landing-blog-section {
    margin-inline-start: 0px;
    margin-block-end: 36px;
}

    .site-Macedonia .landing-blog-section h2 {
        font-size: 22px;
        line-height: 100%;
        padding: 0px;
        margin-block-end: 16px;
    }

        .site-Macedonia .landing-blog-section h2 span {
            font-weight: 400;
        }

    .site-Macedonia .landing-blog-section .widget-button {
        display: none;
    }

    .site-Macedonia .landing-blog-section .widget-image {
        border-radius: var(--radius-12);
        overflow: hidden;
        margin-block-end: 12px;
        filter: brightness(0.92);
    }

    .site-Macedonia .landing-blog-section .widget-title h2, .site-Macedonia .landing-blog-section .widget-title h3 {
        font-weight: 500;
        color: var(--color-text-basic);
    }

.site-Macedonia .landing-categories-section {
    margin-block-end: 64px;
}

    .site-Macedonia .landing-categories-section h5 {
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 100%;
        margin-block-end: var(--gap-16);
        margin-block-start: var(--gap-24);
        color: var(--color-text-basic);
    }

    .site-Macedonia .landing-categories-section a:hover {
        text-decoration: none;
    }

    .site-Macedonia .landing-categories-section .recent-h3-link {
        color: var(--color-text-primary);
    }
/* #endregion Macedonia */
/* #endregion ------------/ Section Blog ------------------- */
/* #endregion ================================== /OLD START PAGE ====================================== */
/* #region =================================== OLD AD CREATE PAGE ===================================== */
.panel-checkbox .container .clipart {
    display: block;
    width: 140px;
    height: 140px;
    margin: 0px auto;
}

.create-ad-container {
    width: 869px;
    margin-inline-start: 16px;
    margin-block-end: 64px;
    font-size: 14px;
}

[dir='rtl'] .create-ad-container {
    margin-inline-start: 0px;
    width: 900px;
}



.create-ad-container .row {
    width: 100%;
    margin-inline: 0px !important;
    padding-inline: 0px !important;
}

.create-ad-container .span10 {
    padding-inline: 0px;
    margin-inline: 0px;
    width: 100%;
}

[dir='rtl'] .create-ad-container .row .span10 {
    margin-right: 0px;
}

.create-ad-container .span5 {
    padding-inline: 0px;
    margin-inline: 0px;
}

.create-ad-container .breadcrumb {
    padding-inline: 0px;
}

.create-ad-container .create-ad-map {
    width: 399px;
    padding-inline-start: 30px;
}

.create-ad-container input[type='text'] {
    width: 100% !important;
    height: 40px;
    font-size: 14px;
    border-radius: var(--radius-4);
    border: 1px solid var(--color-border-basic) !important;
    box-shadow: none;
}

.create-ad-container textarea {
    width: 100% !important;
    border-radius: var(--radius-4);
    box-shadow: none;
    border: 1px solid var(--color-border-basic);
    font-size: 14px;
    padding-block: 8px;
    margin-block-end: 10px !important;
}

.create-ad-container .ui-selectmenu {
    width: 100% !important;
    height: 40px;
    border-radius: var(--radius-4);
    border: 1px solid var(--color-border-basic);
    color: var(--color-bas);
    font-size: 14px;
    margin-block-start: 0px;
}

.create-ad-container .ui-selectmenu-dropdown {
    margin-block-start: 0px;
}

.create-ad-container .ui-selectmenu .ui-selectmenu-status {
    height: 100%;
    display: flex;
    align-items: center;
    padding-inline: 6px;
}

.create-ad-container .control-group > label:first-child {
    padding-block-start: 0px;
    line-height: 130%;
    clear: both;
    float: left;
    font-size: 14px;
    display: flex;
    height: 40px;
    align-items: center;
    text-align: end;
    justify-content: end;
}

[dir='rtl'] .create-ad-container .control-group > label:first-child {
    float: right;
}

.create-ad-container .control-group .propertyLine > label:first-child {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: end;
    font-size: 14px;
}

.create-ad-container #priceRaw .controls > div:last-child {
    display: flex;
    height: 40px;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

    .create-ad-container #priceRaw .controls > div:last-child input[type='radio'] {
        margin-inline-start: 8px;
    }

.create-ad-container .control-group .textbox label {
    font-size: 12px;
    inset-block-start: 6px;
}

.create-ad-container .control-group .textbox input[type='text'] {
    background: transparent;
    padding-block-end: 10px !important;
    line-height: 100%;
    font-size: 18px;
    padding-block-start: 28px;
    height: 50px;
}
/* Form Paddings */
.create-ad-container .control-group input[type='text'] {
    padding-block-end: 0px !important;
    margin-block-end: 8px;
}

.create-ad-container .ui-selectmenu-dropdown {
    margin-block-start: 0px;
    margin-block-end: 10px;
}

.create-ad-container .control-group {
    margin-block-end: 0px;
}

    .create-ad-container .control-group .controls {
        margin-block-end: 0px;
        padding-block-end: 0px;
    }

    .create-ad-container .control-group > label:first-child:empty {
        height: 0px;
    }

    .create-ad-container .control-group.hide-edit-phone .controls {
        margin-block-start: 13px;
    }

    .create-ad-container .control-group.price .controls {
        display: flex;
        align-items: center;
        gap: var(--gap-4);
    }

.createa-ad-container .control-group.price .controls .input-small {
    width: 40% !important;
    margin-block-end: 0px;
}

.create-ad-form .control-group.price input[type='radio'] {
    margin-inline-start: var(--gap-8);
}

.create-ad-form .user-type .controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

    .create-ad-form .user-type .controls *:nth-child(2) {
        margin-inline-start: 10px;
    }

.create-ad-container .form-horizontal .control-group .help-block {
    margin-block-end: 10px;
    font-size: 14px;
}

.create-ad-container .categoryDependent .controls *:last-child {
    margin-block-end: 12px;
}

.create-ad-container .btn-car {
    margin-block-end: 24px;
    display: inline-block;
    color: var(--color-text-primary);
}

.create-ad-container .hide-phone {
    margin-block-end: 8px;
}

.create-ad-container .well {
    padding: 16px;
    border-radius: var(--radius-16);
    line-height: 160%;
    background-color: var(--color-bg-panel);
    border: 0px none transparent;
    color: var(--color-text-muted);
}

.create-ad-container .breadcrumb .active a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.create-ad-container .well a {
    font-size: 1em;
    color: var(--color-text-primary);
}

.create-ad-container .breadcrumb .divider {
    color: var(--color-border-basic);
}

.create-ad-container .btn-primary {
    border: 0px none transparent;
    box-shadow: none;
    padding-inline: 16px;
    padding-block: 12px;
    text-shadow: none;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: var(--radius-8);
    margin-block-end: 16px;
}

.create-ad-container .mapRelative .lmap {
    border-radius: var(--radius-16);
    overflow: hidden;
}

.create-ad-container .leaflet-tile-pane {
    filter: grayscale(1);
}

.create-ad-container .help-inline a {
    color: var(--color-text-primary);
}

.create-ad-container .categoryDependent .control-group .controls .pull-left {
    margin-block-end: 8px !important;
    padding-inline-end: 8px;
}

.create-ad-container .control-group.propertyLine .controls {
    margin-block-end: 0px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 120%;
}

.create-ad-container .input-small[type='text'] {
    display: inline-flex;
    width: 90% !important;
    margin-inline-end: 8px;
}

.create-ad-container .control-group.propertyLine .controls sup {
    display: inline-block;
    margin-block-start: 8px;
}

.create-ad-container select {
    padding-inline-start: 2px;
    font-size: 14px;
    height: 40px;
    border-radius: var(--radius-4);
    border: 1px solid var(--color-border-basic);
}

.create-ad-container .controls .pull-left input[type='radio'] {
    margin-inline-start: 16px;
    margin-inline-end: 4px;
}

    .create-ad-container .controls .pull-left input[type='radio']:first-child {
        margin-inline-start: 0px;
    }


.create-ad-container .thumbnail {
    position: relative;
}

.create-ad-container .img-control.pull-left {
    inset-inline-start: 16px;
    inset-block-start: 16px;
}

.create-ad-container .img-control.pull-right {
    inset-inline-end: 16px;
    inset-block-end: auto;
    inset-inline-start: auto;
    inset-block-start: 16px;
}
/* #endregion =============================== /OLD AD CREATE PAGE ===================================== */
/* #region ========================================= CHAT ============================================= */
.chat-promotion + .popover.fade.bottom .popover-inner .popover-caption {
    width: 70% !important;
}

.chat-promotion + .popover.fade.bottom .popover-inner .popover-img {
    top: 27px !important;
    right: 4px !important;
}
/* #endregion ===================================== /CHAT ============================================= */
/* #region ===================================== Modal SignIn ========================================= */
.pazar-overlay .modal-window {
    display: block;
    background-color: #FFFFFF;
    border-radius: var(--radius-12);
    box-shadow: rgba(0, 0, 0, 1) 0px 0px 150px;
    position: absolute;
}

    .pazar-overlay .modal-window.sign-in {
        width: 520px;
        top: calc(50% - 295px);
        left: calc(50% - 260px);
    }

        .pazar-overlay .modal-window.sign-in.registration {
            width: 520px;
            top: calc(50% - 380px);
            left: calc(50% - 260px);
        }


        .pazar-overlay .modal-window.sign-in .modal-header {
            display: block;
            width: 100%;
            height: 60px;
            position: relative;
            border: 0px none transparent;
        }

            .pazar-overlay .modal-window.sign-in .modal-header .btn-close {
                position: absolute;
                display: block;
                width: 40px;
                height: 40px;
                top: 10px;
                right: 10px;
            }

                .pazar-overlay .modal-window.sign-in .modal-header .btn-close span {
                    font-size: 20px;
                    margin: 10px auto;
                    display: block;
                }

            .pazar-overlay .modal-window.sign-in .modal-header .btn-back {
                min-width: 0px;
                position: absolute;
                top: 22px;
                left: 10px;
                padding: 0px 0px 0px 35px;
            }

*[dir='rtl'] .pazar-overlay .modal-window.sign-in .modal-header .btn-back {
    right: 10px;
    left: auto;
    padding: 0px 35px 0px 0px;
}


*[dir='rtl'] .pazar-overlay .modal-window.sign-in .modal-header .btn-close {
    left: 10px;
    right: auto;
}

.pazar-overlay .modal-window .modal-content {
    display: block;
    width: 100%;
    height: 100%;
    padding-left: 60px;
    padding-right: 60px;
    border: 0px none transparent;
    border-radius: var(--radius-0);
}

.pazar-overlay .modal-window.registration .modal-content {
    padding-left: 0px;
    padding-right: 0px;
}

.pazar-overlay .modal-window .modal-container {
    display: block;
    width: 100%;
    margin: 0px auto;
}

.modal-window.sign-in .content-container {
    width: 400px;
    margin: 0px auto;
}

.pazar-overlay .modal-window .btn-primary {
    min-width: 190px;
}

.pazar-overlay .modal-window .window-container {
    padding-left: 60px;
    padding-right: 60px;
}

.pazar-overlay .modal-window.sign-in .tab-content {
    background-color: #F2F2F2;
}

.modal-window.sign-in .list-group-item {
    border: 0px none transparent;
    border-bottom: 2px solid #DDDDDD;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text-muted) !important;
    align-self: flex-end;
    border-radius: var(--radius-0);
}

.modal-window.sign-in .list-group-item-action:hover, .modal-window.sign-in .list-group-item-action:focus {
    background-color: transparent;
    opacity: 1;
}

.modal-window.sign-in .list-group-item.active {
    background-color: transparent;
    border-bottom: 2px solid var(--color-border-primary);
    color: var(--color-text-primary) !important;
}

.modal-window.sign-in .verification-field {
    display: block;
    width: 385px;
    margin: 0px auto;
}

.pazar-overlay .modal-window.sign-in .phone-number {
    white-space: nowrap;
}

/* #region Verification */
.modal-window .clipart-container.phone-verification {
    position: relative;
    display: block;
    width: 250px;
    height: 250px;
    margin: 0px auto;
}

    .modal-window .clipart-container.phone-verification .clipart-hand {
        position: absolute;
        display: block;
        width: 200px;
        height: 200px;
        background: url("../../Content/Images/verification/clipart-verification-phone.svg") no-repeat center center transparent;
        background-size: contain;
        z-index: 2;
        top: 12%;
        left: 10%;
        animation: clipart-verification-hand 2s ease-in-out infinite alternate;
        -webkit-animation: clipart-verification-hand 2s ease-in-out infinite alternate;
    }

@keyframes clipart-verification-hand {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(5deg);
    }
}

.modal-window .clipart-container.phone-verification .clipart-ok {
    position: absolute;
    display: block;
    width: 76px;
    height: 76px;
    background: url("../../Content/Images/verification/clipart-verification-ok.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 3;
    top: 30%;
    left: 26%;
    animation: clipart-verification-ok 0.6s ease-in-out normal;
    -webkit-animation: clipart-verification-ok 0.6s ease-in-out normal;
}

@keyframes clipart-verification-ok {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@-webkit-keyframes clipart-verification-ok {
    from {
        -webkit-transform: scale(0);
    }

    to {
        -webkit-transform: scale(1);
    }
}


.modal-window .clipart-container.phone-verification .clipart-cloud-1,
.modal-window .clipart-container.phone-verification .clipart-cloud-2,
.modal-window .clipart-container.phone-verification .clipart-cloud-3,
.modal-window .clipart-container.phone-verification .clipart-cloud-4,
.modal-window .clipart-container.phone-verification .clipart-cloud-5,
.modal-window .clipart-container.phone-verification .clipart-cloud-6,
.modal-window .clipart-container.phone-verification .clipart-cloud-7,
.modal-window .clipart-container.phone-verification .clipart-cloud-8,
.modal-window .clipart-container.phone-verification .clipart-cloud-9,
.modal-window .clipart-container.phone-verification .clipart-cloud-10,
.modal-window .clipart-container.phone-verification .clipart-cloud-11 {
    display: block;
    position: absolute;
    z-index: 1;
    background-color: #E8E8E8;
    border-radius: 50%;
}

.modal-window .clipart-container.phone-verification .clipart-cloud-1 {
    width: 18%;
    height: 18%;
    top: 10%;
    left: 14%;
    animation: clipart-phone-verification-cloud-1 1.2s ease-in-out infinite alternate;
    -webkit-animation: clipart-phone-verification-cloud-1 1.2s ease-in-out infinite alternate;
}

.modal-window .clipart-container.phone-verification .clipart-cloud-2 {
    width: 31%;
    height: 31%;
    top: 11%;
    left: 26%;
    animation: clipart-phone-verification-cloud-2 1.2s ease-in-out infinite alternate;
    -webkit-animation: clipart-phone-verification-cloud-2 1.2s ease-in-out infinite alternate;
}

.modal-window .clipart-container.phone-verification .clipart-cloud-3 {
    width: 37%;
    height: 37%;
    top: 11%;
    left: 48%;
    animation: clipart-phone-verification-cloud-3 1.2s ease-in-out infinite alternate;
    -webkit-animation: clipart-phone-verification-cloud-3 1.2s ease-in-out infinite alternate;
}

.modal-window .clipart-container.phone-verification .clipart-cloud-4 {
    width: 28%;
    height: 28%;
    top: 23%;
    left: 8%;
    animation: clipart-phone-verification-cloud-4 2s ease-in-out infinite alternate;
    -webkit-animation: clipart-phone-verification-cloud-4 2s ease-in-out infinite alternate;
}

.modal-window .clipart-container.phone-verification .clipart-cloud-5 {
    width: 23%;
    height: 23%;
    top: 27%;
    left: 68%;
    animation: clipart-phone-verification-cloud-5 1.5s ease-in-out infinite alternate;
    -webkit-animation: clipart-phone-verification-cloud-5 1.5s ease-in-out infinite alternate;
}

.modal-window .clipart-container.phone-verification .clipart-cloud-6 {
    width: 41%;
    height: 41%;
    top: 31%;
    left: 20%;
    animation: clipart-phone-verification-cloud-6 1s ease-in-out infinite alternate;
    -webkit-animation: clipart-phone-verification-cloud-6 1s ease-in-out infinite alternate;
}

.modal-window .clipart-container.phone-verification .clipart-cloud-7 {
    width: 31%;
    height: 31%;
    top: 43%;
    left: 62%;
    animation: clipart-phone-verification-cloud-7 1s ease-in-out infinite alternate;
    -webkit-animation: clipart-phone-verification-cloud-7 1s ease-in-out infinite alternate;
}

.modal-window .clipart-container.phone-verification .clipart-cloud-8 {
    width: 41%;
    height: 41%;
    top: 41%;
    left: 41%;
    animation: clipart-phone-verification-cloud-8 1.5s ease-in-out infinite alternate;
    -webkit-animation: clipart-phone-verification-cloud-8 1.5s ease-in-out infinite alternate;
}

.modal-window .clipart-container.phone-verification .clipart-cloud-9 {
    width: 26%;
    height: 26%;
    top: 55%;
    left: 11%;
    animation: clipart-phone-verification-cloud-9 1.2s ease-in-out infinite alternate;
    -webkit-animation: clipart-phone-verification-cloud-9 1.2s ease-in-out infinite alternate;
}

.modal-window .clipart-container.phone-verification .clipart-cloud-10 {
    width: 36%;
    height: 36%;
    top: 51%;
    left: 27%;
    animation: clipart-phone-verification-cloud-10 1s ease-in-out infinite alternate;
    -webkit-animation: clipart-phone-verification-cloud-10 1s ease-in-out infinite alternate;
}

.modal-window .clipart-container.phone-verification .clipart-cloud-11 {
    width: 28%;
    height: 28%;
    top: 65%;
    left: 44%;
    animation: clipart-phone-verification-cloud-11 1s ease-in-out infinite alternate;
    -webkit-animation: clipart-phone-verification-cloud-11 1s ease-in-out infinite alternate;
}


@keyframes clipart-phone-verification-cloud-1 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(-2%, -2%);
    }
}

@-webkit-keyframes clipart-phone-verification-cloud-1 {
    from {
        -webkit-transform: translate(5%, 5%);
    }

    to {
        -webkit-transform: translate(-2%, -2%);
    }
}

@keyframes clipart-phone-verification-cloud-2 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 2%);
    }
}

@-webkit-keyframes clipart-phone-verification-cloud-2 {
    from {
        -webkit-transform: translate(0%, -5%);
    }

    to {
        -webkit-transform: translate(0%, 2%);
    }
}

@keyframes clipart-phone-verification-cloud-3 {
    from {
        transform: translate(-5%, 5%);
    }

    to {
        transform: translate(2%, -2%);
    }
}

@-webkit-keyframes clipart-phone-verification-cloud-3 {
    from {
        -webkit-transform: translate(-5%, 5%);
    }

    to {
        -webkit-transform: translate(2%, -2%);
    }
}

@keyframes clipart-phone-verification-cloud-4 {
    from {
        transform: translate(-7%, -2%);
    }

    to {
        transform: translate(7%, 2%);
    }
}

@-webkit-keyframes clipart-phone-verification-cloud-4 {
    from {
        -webkit-transform: translate(-7%, -2%);
    }

    to {
        -webkit-transform: translate(7%, 2%);
    }
}

@keyframes clipart-phone-verification-cloud-5 {
    from {
        transform: translate(2%, -2%);
    }

    to {
        transform: translate(-4%, 2%);
    }
}

@-webkit-keyframes clipart-phone-verification-cloud-5 {
    from {
        -webkit-transform: translate(2%, -2%);
    }

    to {
        -webkit-transform: translate(-4%, 2%);
    }
}

@keyframes clipart-phone-verification-cloud-6 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

@-webkit-keyframes clipart-phone-verification-cloud-6 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(-6%, 0%);
    }
}

@keyframes clipart-phone-verification-cloud-7 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(6%, 0%);
    }
}

@-webkit-keyframes clipart-phone-verification-cloud-7 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(6%, 0%);
    }
}

@keyframes clipart-phone-verification-cloud-8 {
    from {
        transform: translate(6%, 6%);
    }

    to {
        transform: translate(-1%, -5%);
    }
}

@-webkit-keyframes clipart-phone-verification-cloud-8 {
    from {
        -webkit-transform: translate(6%, 6%);
    }

    to {
        -webkit-transform: translate(-1%, -5%);
    }
}

@keyframes clipart-phone-verification-cloud-9 {
    from {
        transform: translate(4%, -3%);
    }

    to {
        transform: translate(-4%, 5%);
    }
}

@-webkit-keyframes clipart-phone-verification-cloud-9 {
    from {
        -webkit-transform: translate(4%, -3%);
    }

    to {
        -webkit-transform: translate(-4%, 5%);
    }
}

@keyframes clipart-phone-verification-cloud-10 {
    from {
        transform: translate(4%, -3%);
    }

    to {
        transform: translate(-4%, 5%);
    }
}

@-webkit-keyframes clipart-phone-verification-cloud-10 {
    from {
        -webkit-transform: translate(4%, -3%);
    }

    to {
        -webkit-transform: translate(-4%, 5%);
    }
}

@keyframes clipart-phone-verification-cloud-11 {
    from {
        transform: translate(0%, 3%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@-webkit-keyframes clipart-phone-verification-cloud-11 {
    from {
        -webkit-transform: translate(0%, 3%);
    }

    to {
        -webkit-transform: translate(0%, -5%);
    }
}


.modal-window .clipart-container.email-verification {
    position: relative;
    display: block;
    width: 250px;
    height: 250px;
    margin: 0px auto;
}

    .modal-window .clipart-container.email-verification .clipart-envelope {
        position: absolute;
        display: block;
        width: 200px;
        height: 200px;
        background: url("../../Content/Images/verification/clipart-verification-email.svg") no-repeat center center transparent;
        background-size: contain;
        z-index: 2;
        top: 12%;
        left: 10%;
        animation: clipart-email-verification-envelope 1.5s ease-in-out infinite alternate;
        -webkit-animation: clipart-email-verification-envelope 1.5s ease-in-out infinite alternate;
    }

@keyframes clipart-email-verification-envelope {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

@-webkit-keyframes clipart-email-verification-envelope {
    from {
        -webkit-transform: scale(1);
    }

    to {
        -webkit-transform: scale(1.1);
    }
}

.modal-window .clipart-container.email-verification .clipart-ok {
    position: absolute;
    display: block;
    width: 90px;
    height: 90px;
    background: url("../../Content/Images/verification/clipart-verification-ok.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 3;
    top: 31%;
    left: 36%;
    animation: clipart-verification-ok 0.6s ease-in-out normal;
    -webkit-animation: clipart-verification-ok 0.6s ease-in-out normal;
}

.modal-window .clipart-container.email-verification .clipart-cloud-1,
.modal-window .clipart-container.email-verification .clipart-cloud-2,
.modal-window .clipart-container.email-verification .clipart-cloud-3,
.modal-window .clipart-container.email-verification .clipart-cloud-4,
.modal-window .clipart-container.email-verification .clipart-cloud-5,
.modal-window .clipart-container.email-verification .clipart-cloud-6,
.modal-window .clipart-container.email-verification .clipart-cloud-7,
.modal-window .clipart-container.email-verification .clipart-cloud-8,
.modal-window .clipart-container.email-verification .clipart-cloud-9,
.modal-window .clipart-container.email-verification .clipart-cloud-10,
.modal-window .clipart-container.email-verification .clipart-cloud-11,
.modal-window .clipart-container.email-verification .clipart-cloud-12,
.modal-window .clipart-container.email-verification .clipart-cloud-13,
.modal-window .clipart-container.email-verification .clipart-cloud-14 {
    display: block;
    position: absolute;
    z-index: 1;
    background-color: #E8E8E8;
    border-radius: 50%;
}

.modal-window .clipart-container.email-verification .clipart-cloud-1 {
    width: 32%;
    height: 32%;
    top: 7%;
    left: 10%;
    animation: clipart-email-verification-cloud-1 1.2s ease-in-out infinite alternate;
    -webkit-animation: clipart-email-verification-cloud-1 1.2s ease-in-out infinite alternate;
}

.modal-window .clipart-container.email-verification .clipart-cloud-2 {
    width: 28%;
    height: 28%;
    top: 3%;
    left: 46%;
    animation: clipart-email-verification-cloud-2 1s ease-in-out infinite alternate;
    -webkit-animation: clipart-email-verification-cloud-2 1s ease-in-out infinite alternate;
}

.modal-window .clipart-container.email-verification .clipart-cloud-3 {
    width: 39%;
    height: 39%;
    top: 11%;
    left: 25%;
    animation: clipart-email-verification-cloud-3 2s ease-in-out infinite alternate;
    -webkit-animation: clipart-email-verification-cloud-3 2s ease-in-out infinite alternate;
}

.modal-window .clipart-container.email-verification .clipart-cloud-4 {
    width: 37%;
    height: 37%;
    top: 11%;
    left: 50%;
    animation: clipart-email-verification-cloud-4 1s ease-in-out infinite alternate;
    -webkit-animation: clipart-email-verification-cloud-4 1s ease-in-out infinite alternate;
}

.modal-window .clipart-container.email-verification .clipart-cloud-5 {
    width: 27%;
    height: 27%;
    top: 28%;
    left: 12%;
    animation: clipart-email-verification-cloud-5 1s ease-in-out infinite alternate;
    -webkit-animation: clipart-email-verification-cloud-5 1s ease-in-out infinite alternate;
}

.modal-window .clipart-container.email-verification .clipart-cloud-6 {
    width: 20%;
    height: 20%;
    top: 28%;
    left: 75%;
    animation: clipart-email-verification-cloud-6 1.5s ease-in-out infinite alternate;
    -webkit-animation: clipart-email-verification-cloud-6 1.5s ease-in-out infinite alternate;
}

.modal-window .clipart-container.email-verification .clipart-cloud-7 {
    width: 20%;
    height: 20%;
    top: 44%;
    left: 3%;
    animation: clipart-email-verification-cloud-7 1s ease-in-out infinite alternate;
    -webkit-animation: clipart-email-verification-cloud-7 1s ease-in-out infinite alternate;
}

.modal-window .clipart-container.email-verification .clipart-cloud-8 {
    width: 30%;
    height: 30%;
    top: 36%;
    left: 63%;
    animation: clipart-email-verification-cloud-8 1s ease-in-out infinite alternate;
    -webkit-animation: clipart-email-verification-cloud-8 1s ease-in-out infinite alternate;
}

.modal-window .clipart-container.email-verification .clipart-cloud-9 {
    width: 30%;
    height: 30%;
    top: 45%;
    left: 13%;
    animation: clipart-email-verification-cloud-9 2s ease-in-out infinite alternate;
    -webkit-animation: clipart-email-verification-cloud-9 2s ease-in-out infinite alternate;
}

.modal-window .clipart-container.email-verification .clipart-cloud-10 {
    width: 50%;
    height: 50%;
    top: 33%;
    left: 28%;
}

.modal-window .clipart-container.email-verification .clipart-cloud-11 {
    width: 24%;
    height: 24%;
    top: 63%;
    left: 18%;
    animation: clipart-email-verification-cloud-11 1.5s ease-in-out infinite alternate;
    -webkit-animation: clipart-email-verification-cloud-11 1.5s ease-in-out infinite alternate;
}

.modal-window .clipart-container.email-verification .clipart-cloud-12 {
    width: 24%;
    height: 24%;
    top: 65%;
    left: 31%;
    animation: clipart-email-verification-cloud-12 1.5s ease-in-out infinite alternate;
    -webkit-animation: clipart-email-verification-cloud-12 1.5s ease-in-out infinite alternate;
}

.modal-window .clipart-container.email-verification .clipart-cloud-13 {
    width: 34%;
    height: 34%;
    top: 54%;
    left: 59%;
    animation: clipart-email-verification-cloud-13 1s ease-in-out infinite alternate;
    -webkit-animation: clipart-email-verification-cloud-13 1s ease-in-out infinite alternate;
}

.modal-window .clipart-container.email-verification .clipart-cloud-14 {
    width: 28%;
    height: 28%;
    top: 70%;
    left: 43%;
    animation: clipart-email-verification-cloud-14 1.5s ease-in-out infinite alternate;
    -webkit-animation: clipart-email-verification-cloud-14 1.5s ease-in-out infinite alternate;
}

@keyframes clipart-email-verification-cloud-1 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(-2%, -2%);
    }
}

@-webkit-keyframes clipart-email-verification-cloud-1 {
    from {
        -webkit-transform: translate(5%, 5%);
    }

    to {
        -webkit-transform: translate(-2%, -2%);
    }
}

@keyframes clipart-email-verification-cloud-2 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -4%);
    }
}

@-webkit-keyframes clipart-email-verification-cloud-2 {
    from {
        -webkit-transform: translate(0%, -5%);
    }

    to {
        -webkit-transform: translate(2%, 4%);
    }
}

@keyframes clipart-email-verification-cloud-3 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -4%);
    }
}

@-webkit-keyframes clipart-email-verification-cloud-3 {
    from {
        -webkit-transform: translate(0%, 5%);
    }

    to {
        -webkit-transform: translate(0%, -4%);
    }
}

@keyframes clipart-email-verification-cloud-4 {
    from {
        transform: translate(3%, -3%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@-webkit-keyframes clipart-email-verification-cloud-4 {
    from {
        -webkit-transform: translate(3%, -3%);
    }

    to {
        -webkit-transform: translate(-4%, 4%);
    }
}

@keyframes clipart-email-verification-cloud-5 {
    from {
        transform: translate(-4%, -2%);
    }

    to {
        transform: translate(5%, 2%);
    }
}

@-webkit-keyframes clipart-email-verification-cloud-5 {
    from {
        -webkit-transform: translate(-4%, -2%);
    }

    to {
        -webkit-transform: translate(5%, 2%);
    }
}

@keyframes clipart-email-verification-cloud-6 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-5%, 2%);
    }
}

@-webkit-keyframes clipart-email-verification-cloud-6 {
    from {
        -webkit-transform: translate(4%, -4%);
    }

    to {
        -webkit-transform: translate(-5%, 2%);
    }
}

@keyframes clipart-email-verification-cloud-7 {
    from {
        transform: translate(4%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

@-webkit-keyframes clipart-email-verification-cloud-7 {
    from {
        -webkit-transform: translate(4%, 0%);
    }

    to {
        -webkit-transform: translate(-5%, 0%);
    }
}

@keyframes clipart-email-verification-cloud-8 {
    from {
        transform: translate(-4%, 0%);
    }

    to {
        transform: translate(9%, 0%);
    }
}

@-webkit-keyframes clipart-email-verification-cloud-8 {
    from {
        -webkit-transform: translate(-4%, 0%);
    }

    to {
        -webkit-transform: translate(9%, 0%);
    }
}

@keyframes clipart-email-verification-cloud-9 {
    from {
        transform: translate(-4%, 0%);
    }

    to {
        transform: translate(9%, -5%);
    }
}

@-webkit-keyframes clipart-email-verification-cloud-9 {
    from {
        -webkit-transform: translate(-4%, 0%);
    }

    to {
        -webkit-transform: translate(9%, -5%);
    }
}

@keyframes clipart-email-verification-cloud-11 {
    from {
        transform: translate(9%, -5%);
    }

    to {
        transform: translate(-4%, 0%);
    }
}

@-webkit-keyframes clipart-email-verification-cloud-11 {
    from {
        -webkit-transform: translate(9%, -5%);
    }

    to {
        -webkit-transform: translate(-4%, 0%);
    }
}

@keyframes clipart-email-verification-cloud-12 {
    from {
        transform: translate(-2%, 12%);
    }

    to {
        transform: translate(3%, -5%);
    }
}

@-webkit-keyframes clipart-email-verification-cloud-12 {
    from {
        -webkit-transform: translate(-2%, 12%);
    }

    to {
        -webkit-transform: translate(3%, -5%);
    }
}

@keyframes clipart-email-verification-cloud-13 {
    from {
        transform: translate(4%, 7%);
    }

    to {
        transform: translate(-3%, -2%);
    }
}

@-webkit-keyframes clipart-email-verification-cloud-13 {
    from {
        -webkit-transform: translate(4%, 7%);
    }

    to {
        -webkit-transform: translate(-3%, -2%);
    }
}

@keyframes clipart-email-verification-cloud-14 {
    from {
        transform: translate(0%, -3%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@-webkit-keyframes clipart-email-verification-cloud-14 {
    from {
        -webkit-transform: translate(0%, -3%);
    }

    to {
        -webkit-transform: translate(0%, 6%);
    }
}
/* #endregion Verification */

.modal .modal-header .btn-back {
    position: absolute;
    display: block;
    top: 13px;
    left: 6px;
    z-index: 1;
    color: var(--color-text-primary);
    text-decoration: none;
    border: 0px none transparent;
    background-color: transparent;
    font-weight: 700;
}

    .modal .modal-header .btn-back span {
        margin-left: 3px;
        display: inline-block;
        text-decoration: underline;
    }


    .modal .modal-header .btn-back .ci-pazar-small {
        font-size: 25px;
    }


*[dir='rtl'] .modal .modal-header .btn-back {
    left: auto;
    right: 6px;
}

    *[dir='rtl'] .modal .modal-header .btn-back span {
        margin-left: 0px;
        margin-right: 3px;
    }

    *[dir='rtl'] .modal .modal-header .btn-back .ci-pazar-small {
        transform: rotateZ(180deg);
    }


.modal-window.sign-in .new-btn.btn-link {
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 30px;
}

.modal-window.sign-in .request-timer {
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .pazar-overlay .modal-window.sign-in, .pazar-overlay .modal-window.sign-in.registration {
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        border-radius: var(--radius-0);
        padding-top: 50px;
    }

        .pazar-overlay .modal-window.sign-in .modal-header {
            position: fixed;
            top: 0px;
            left: 0px;
            background-color: #ffffff;
            z-index: 99;
        }

        .pazar-overlay .modal-window.sign-in .modal-content {
            min-height: 100%;
            overflow-y: auto;
        }

        .pazar-overlay .modal-window.sign-in .modal-header {
            height: 50px;
        }

    .modal-window.sign-in .modal-header {
        border-bottom: 1px solid #DDDDDD !important;
        box-shadow: none !important;
    }

    .modal-window.sign-in .content-container {
        width: 100% !important;
        padding-top: 0px !important;
    }


    .pazar-overlay .modal-window.sign-in .modal-header .btn-close {
        width: 40px;
        height: 40px;
        top: 5px;
        right: 5px;
    }

    .pazar-overlay .modal-window.sign-in .modal-header .btn-back {
        top: 17px;
        left: 3px;
    }

    *[dir="rtl"] .pazar-overlay .modal-window.sign-in .modal-header .btn-back {
        top: 17px;
        left: auto;
        right: 3px;
    }

    .pazar-overlay .modal-window.sign-in .modal-container {
        width: 100%;
        padding-top: 0px;
    }
}

@media (max-width: 600px) {
    .modal .modal-header .btn-back {
        font-size: 23px;
        top: 13px;
    }

        .modal .modal-header .btn-back span {
            display: none;
        }
}

@media (max-width: 570px) {
    .modal-window.sign-in .textbox-code {
        font-size: 24px;
        height: 40px;
        width: 40px;
    }

    .modal-window.sign-in .verification-field {
        width: 265px;
    }
}

@media (max-width: 480px) {
    .pazar-overlay .modal-window.sign-in .modal-content {
        padding-left: 30px;
        padding-right: 30px;
    }

    .pazar-overlay .modal-window.sign-in.registration .modal-content {
        padding-left: 0px;
        padding-right: 0px;
    }

    .pazar-overlay .modal-window .window-container {
        padding-left: 30px;
        padding-right: 30px;
    }

    .modal-window .clipart-container.phone-verification,
    .modal-window .clipart-container.email-verification {
        position: relative;
        display: block;
        width: 180px;
        height: 180px;
        margin: 0px auto;
    }


        .modal-window .clipart-container.phone-verification .clipart-hand {
            width: 130px;
            height: 130px;
            top: 15%;
            left: 13%;
        }

        .modal-window .clipart-container.email-verification .clipart-envelope {
            width: 150px;
            height: 150px;
            top: 12%;
            left: 10%;
        }


        .modal-window .clipart-container.phone-verification .clipart-ok {
            width: 44px;
            height: 44px;
            top: 33%;
            left: 29%;
        }

        .modal-window .clipart-container.email-verification .clipart-ok {
            width: 74px;
            height: 74px;
            top: 30%;
            left: 34%;
        }
}

@media (max-width: 321px) {
    .pazar-overlay .modal-window.sign-in .modal-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .pazar-overlay .modal-window .window-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .modal-window .clipart-container.phone-verification,
    .modal-window .clipart-container.email-verification {
        width: 120px;
        height: 120px;
    }


        .modal-window .clipart-container.phone-verification .clipart-hand {
            width: 90px;
            height: 90px;
            top: 15%;
            left: 13%;
        }


        .modal-window .clipart-container.email-verification .clipart-envelope {
            width: 110px;
            height: 110px;
            top: 5%;
            left: 5%;
        }


        .modal-window .clipart-container.phone-verification .clipart-ok {
            width: 32px;
            height: 32px;
            top: 33%;
            left: 29%;
        }

        .modal-window .clipart-container.email-verification .clipart-ok {
            width: 52px;
            height: 52px;
            top: 25%;
            left: 32%;
        }
}

@media (max-width: 319px) {
    .pazar-overlay .modal-window.sign-in .btn-facebook,
    .pazar-overlay .modal-window.sign-in .btn-google {
        font-size: 12px;
    }

    .modal-window.sign-in .textbox-code {
        font-size: 18px;
        height: 30px;
        width: 30px;
    }

    .modal-window.sign-in .verification-field {
        width: 205px;
    }
}

@media (max-height: 650px) {
    .pazar-overlay .modal-window.sign-in, .pazar-overlay .modal-window.sign-in.registration {
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        border-radius: var(--radius-0);
        padding-top: 50px;
    }

        .pazar-overlay .modal-window.sign-in .modal-header {
            position: fixed;
            top: 0px;
            left: 0px;
            background-color: #ffffff;
            z-index: 99;
        }

        .pazar-overlay .modal-window.sign-in .modal-content {
            min-height: 100%;
            overflow-y: auto;
        }

        .pazar-overlay .modal-window.sign-in .modal-header {
            height: 50px;
        }

            .pazar-overlay .modal-window.sign-in .modal-header.shadowed {
                box-shadow: rgba(0,0,0,0.1) 0px 2px 36px;
            }


            .pazar-overlay .modal-window.sign-in .modal-header .btn-close {
                width: 40px;
                height: 40px;
                top: 5px;
                right: 5px;
            }

            .pazar-overlay .modal-window.sign-in .modal-header .btn-back {
                top: 17px;
                left: 3px;
            }

    *[dir="rtl"] .pazar-overlay .modal-window.sign-in .modal-header .btn-back {
        top: 17px;
        left: auto;
        right: 3px;
    }

    .pazar-overlay .modal-window .modal-container {
        display: block;
        width: 600px;
        margin: 0px auto;
        padding-top: 30px;
    }

    .modal-window.sign-in .content-container {
        padding-top: 40px;
        width: 600px;
    }

    .modal-window.sign-in .modal-header {
        border-bottom: 1px solid #DDDDDD !important;
        box-shadow: none !important;
    }
}
/* #endregion ================================== Modal SignIn ========================================= */
/* #region ============================= Custom Modal: Verification =================================== */
.modal-custom.email-success .modal-window,
.modal-custom.phone-success .modal-window {
    width: 600px;
    left: calc(50% - 300px);
    top: calc(50% - 250px);
}

.modal-custom.email-verification .modal-window {
    width: 600px;
    left: calc(50% - 300px);
    top: calc(50% - 238px);
}

.modal-custom.phone-verification .modal-window {
    width: 600px;
    left: calc(50% - 300px);
    top: calc(50% - 256px);
}

.modal-custom.email-success .modal-container,
.modal-custom.email-verification .modal-container,
.modal-custom.phone-success .modal-container,
.modal-custom.phone-verification .modal-container {
    padding: 10px 60px;
}

.modal-custom.email-success .modal-window .clipart-container.email-verification,
.modal-custom.phone-success .modal-window .clipart-container.phone-verification {
    width: 200px;
    height: 200px;
    margin-bottom: 30px;
}

    .modal-custom.email-success .modal-window .clipart-container.email-verification .clipart-envelope,
    .modal-custom.email-verification .modal-window .clipart-container.email-verification .clipart-envelope {
        width: 80%;
        height: 80%;
        top: 12%;
        left: 10%;
    }

    .modal-custom.email-success .modal-window .clipart-container.email-verification .clipart-ok,
    .modal-custom.email-verification .modal-window .clipart-container.email-verification .clipart-ok {
        width: 40%;
        height: 40%;
        top: 31%;
        left: 36%;
    }

    .modal-custom.phone-success .modal-window .clipart-container.phone-verification .clipart-hand {
        width: 80%;
        height: 80%;
        top: 12%;
        left: 10%;
    }

    .modal-custom.phone-success .modal-window .clipart-container.phone-verification .clipart-ok {
        width: 30%;
        height: 30%;
        top: 30%;
        left: 27%;
    }

.modal-custom.phone-verification .modal-window .verification-field {
    display: block;
    width: 385px;
    margin: 0px auto;
}


@media (max-height: 520px) {
    .modal-custom.email-success .modal-window, .modal-custom.email-verification .modal-window, .modal-custom.phone-success .modal-window, .modal-custom.phone-verification .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.email-success .modal-header,
    .modal-custom.email-verification .modal-header,
    .modal-custom.phone-success .modal-header,
    .modal-custom.phone-verification .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.email-success .modal-body,
    .modal-custom.email-verification .modal-body,
    .modal-custom.phone-success .modal-body,
    .modal-custom.phone-verification .modal-body {
        padding-top: 52px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.email-success .modal-content,
    .modal-custom.email-verification .modal-content,
    .modal-custom.phone-success .modal-content,
    .modal-custom.phone-verification .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.email-success .modal-container,
    .modal-custom.email-verification .modal-container,
    .modal-custom.phone-success .modal-container,
    .modal-custom.phone-verification .modal-container {
        width: 600px;
        margin: 0px auto;
    }


    .modal-custom.email-success .modal-footer,
    .modal-custom.email-verification .modal-footer,
    .modal-custom.phone-success .modal-footer,
    .modal-custom.phone-verification .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }
}

@media (max-width: 727px) {
    .modal-custom.email-success .modal-window,
    .modal-custom.email-verification .modal-window,
    .modal-custom.phone-success .modal-window,
    .modal-custom.phone-verification .modal-window {
        max-width: 100%;
        top: 0px;
        left: 0px;
    }

    .modal-custom.email-success .modal-container,
    .modal-custom.email-verification .modal-container,
    .modal-custom.phone-success .modal-container,
    .modal-custom.phone-verification .modal-container {
        width: 100%;
        padding: 10px 60px;
    }
}

@media (max-width: 560px) {
    .modal-custom.phone-verification .modal-window .textbox-code {
        font-size: 24px;
        height: 40px;
        width: 40px;
    }

    .modal-custom.phone-verification .modal-window .verification-field {
        width: 265px;
    }
}

@media (max-width: 480px) {
    .modal-custom.email-success .modal-container,
    .modal-custom.email-verification .modal-container,
    .modal-custom.phone-success .modal-container,
    .modal-custom.phone-verification .modal-container {
        padding: 10px 20px;
    }

    .modal-custom.email-success .modal-window .clipart-container.email-verification,
    .modal-custom.phone-success .modal-window .clipart-container.phone-verification {
        width: 150px;
        height: 150px;
        margin-bottom: 20px;
    }
}

@media (max-width: 319px) {
    .modal-custom.phone-verification .modal-window .verification-field {
        width: 205px;
    }

    .modal-custom.phone-verification .modal-window .textbox-code {
        font-size: 18px;
        height: 30px;
        width: 30px;
    }
}


/* #endregion =========================== Custom Modal: Verification ================================== */
/* #region ================================ Custom Modal: Sign in ===================================== */
.modal-custom.signin-error .modal-window {
    width: 600px;
    left: calc(50% - 300px);
    top: calc(50% - 256px);
}

.modal-custom.signin-firststep .modal-window {
    width: 600px;
    left: calc(50% - 300px);
    top: calc(50% - 290px);
}


.modal-custom.signin-secondstep .modal-window {
    width: 600px;
    left: calc(50% - 300px);
    top: calc(50% - 240px);
}

.modal-custom.register-new-account .modal-window {
    width: 600px;
    left: calc(50% - 300px);
    top: calc(50% - 290px);
}

.modal-custom.password-success .modal-window {
    width: 600px;
    left: calc(50% - 300px);
    top: calc(50% - 290px);
}


.modal-custom.signin-error .modal-container,
.modal-custom.signin-firststep .modal-container,
.modal-custom.signin-secondstep .modal-container,
.modal-custom.register-new-account .modal-container,
.modal-custom.password-success .modal-container {
    padding: 10px 60px;
}

.modal-custom.register-new-account .list-group-item {
    border: 0px none transparent;
    border-bottom: 2px solid #DDDDDD;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text-muted) !important;
    align-self: flex-end;
    border-radius: var(--radius-0) !important;
}

    .modal-custom.register-new-account .list-group-item:hover {
        background-color: transparent !important;
    }

    .modal-custom.register-new-account .list-group-item.active {
        background-color: transparent;
        border-bottom: 2px solid var(--color-border-primary);
        color: var(--color-text-primary) !important;
    }

.modal-custom.password-success h2 {
    font-size: 24px;
}

@media (max-height: 600px) {
    .modal-custom.signin-firststep .modal-window, .modal-custom.signin-secondstep .modal-window, .modal-custom.register-new-account .modal-window, .modal-custom.password-success .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.signin-firststep .modal-header,
    .modal-custom.signin-secondstep .modal-header,
    .modal-custom.register-new-account .modal-header,
    .modal-custom.password-success .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.signin-firststep .modal-body,
    .modal-custom.signin-secondstep .modal-body,
    .modal-custom.register-new-account .modal-body,
    .modal-custom.password-success .modal-body {
        padding-top: 52px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.signin-firststep .modal-content,
    .modal-custom.signin-secondstep .modal-content,
    .modal-custom.register-new-account .modal-content,
    .modal-custom.password-success .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.signin-firststep .modal-container,
    .modal-custom.signin-secondstep .modal-container,
    .modal-custom.register-new-account .modal-container,
    .modal-custom.password-success .modal-container {
        width: 600px;
        margin: 0px auto;
    }

    .modal-custom.signin-firststep .modal-footer,
    .modal-custom.signin-secondstep .modal-footer,
    .modal-custom.register-new-account .modal-footer,
    .modal-custom.password-success .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }
}

@media (max-height: 520px) {
    .modal-custom.signin-error .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.signin-error .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.signin-error .modal-body {
        padding-top: 52px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.signin-error .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.signin-error .modal-container {
        width: 600px;
        margin: 0px auto;
    }


    .modal-custom.signin-error .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }
}

@media (max-width: 727px) {
    .modal-custom.signin-error .modal-window,
    .modal-custom.signin-firststep .modal-window,
    .modal-custom.signin-secondstep .modal-window,
    .modal-custom.register-new-account .modal-window,
    .modal-custom.password-success .modal-window {
        max-width: 100%;
        top: 0px;
        left: 0px;
    }

    .modal-custom.signin-error .modal-container,
    .modal-custom.signin-firststep .modal-container,
    .modal-custom.signin-secondstep .modal-container,
    .modal-custom.register-new-account .modal-container,
    .modal-custom.password-success .modal-container {
        width: 100%;
        padding: 10px 60px;
    }
}

@media (max-width: 575px) {
    .modal-custom.signin-secondstep .checkbox {
        margin-top: 10px;
    }

    .modal-custom.password-success h2 {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .modal-custom.signin-error .modal-container,
    .modal-custom.signin-firststep .modal-container,
    .modal-custom.signin-secondstep .modal-container,
    .modal-custom.register-new-account .modal-container,
    .modal-custom.password-success .modal-container {
        padding: 10px 20px;
    }

    .modal-custom.signin-firststep .modal-footer .new-btn,
    .modal-custom.signin-secondstep .modal-footer .new-btn {
        min-width: 0px;
    }
}

/* #endregion ============================ /Custom Modal: Sign in ===================================== */
/* #region ===================================== SignIn Old form ===================================== */
.privacy-policy-msg {
    margin-bottom: 100px;
}

    .privacy-policy-msg .message-container {
        max-width: 400px;
        margin: 0px auto;
        font-size: 14px;
    }

        .privacy-policy-msg .message-container a {
            color: var(--color-text-primary);
            font-weight: 700;
            text-decoration: underline;
        }
/* #endregion ================================= /SignIn Old form ===================================== */
/* #region ========================================= Sign In ========================================= */
.ui-main-content .ui-form.login-form {
    background-color: transparent !important;
    padding-inline: var(--gap-0) !important;
    border: 0px none transparent;
    box-shadow: none;
}

    .ui-main-content .ui-form.login-form h1 {
        margin-block-start: var(--gap-0);
        text-align: start !important;
        font-size: 32px;
        line-height: 120%;
        text-transform: none;
        color: var(--color-text-basic);
        font-weight: 700;
        font-family: 'Manrope';
        margin-block-end: var(--gap-48);
        width: 100% !important;
        margin-inline: 0px !important;
    }

@media (max-width: 600px) {
    .ui-main-content .ui-form.login-form h1 {
        font-size: 24px !important;
    }
}

.ui-main-content .ui-form.login-form .social-btn {
    background-color: var(--color-bg-inputs-transparent) !important;
    display: flex !important;
    border: 0px none transparent;
    box-shadow: none !important;
    align-items: center;
    justify-content: center;
    color: var(--color-text-basic) !important;
    width: 100%;
    height: 50px;
    border-radius: var(--radius-8) !important;
    font-family: 'Manrope' !important;
}

    .ui-main-content .ui-form.login-form .social-btn .btn-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ui-main-content .ui-form.login-form .social-btn span {
        color: var(--color-text-basic) !important;
        font-family: 'Manrope' !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        font-size: 14px !important;
        line-height: 120%;
    }

    .ui-main-content .ui-form.login-form .social-btn img {
        margin: 0px !important;
        padding: 0px !important;
        width: 22px !important;
        height: 22px !important;
        position: absolute;
        z-index: 1;
        inset-inline-start: var(--gap-12) !important;
        inset-block-start: calc(50% - 11px) !important;
    }

.ui-main-content .ui-form.login-form input[type='text'],
.ui-main-content .ui-form.login-form input[type='password'] {
    border: 0px none transparent;
    background-color: var(--color-bg-panel);
    display: flex;
    height: 50px;
    border-radius: var(--radius-8) !important;
    color: var(--color-text-basic);
    padding-inline: var(--gap-8);
    line-height: 100%;
    padding-block: 0px;
    font-size: 16px;
    font-weight: 400;
}

.ui-main-content .ui-form.login-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg version='1.0' id='caret' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.41,4.61c-0.78-0.78-2.05-0.78-2.83,0L8.01,8.19L4.41,4.59c-0.78-0.78-2.05-0.78-2.83,0c-0.78,0.78-0.78,2.05,0,2.83 l4.99,4.99c0,0,0.01,0.01,0.01,0.01c0,0,0.01,0.01,0.01,0.01c0.39,0.39,0.9,0.59,1.41,0.59s1.02-0.2,1.41-0.59l4.99-4.99 C15.2,6.65,15.2,5.39,14.41,4.61z'/%3E%3C/svg%3E");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 10px;
    border: 0px none transparent;
    background-color: var(--color-bg-panel);
    display: flex;
    height: 50px;
    border-radius: var(--radius-8) !important;
    color: var(--color-text-basic);
    padding-inline: var(--gap-8);
    line-height: 100%;
    padding-block: 0px;
    font-size: 16px;
    font-weight: 400;
}

*[dir='rtl'] .ui-main-content .ui-form.login-form select {
    background-image: url("data:image/svg+xml,%3Csvg version='1.0' id='caret' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.41,4.61c-0.78-0.78-2.05-0.78-2.83,0L8.01,8.19L4.41,4.59c-0.78-0.78-2.05-0.78-2.83,0c-0.78,0.78-0.78,2.05,0,2.83 l4.99,4.99c0,0,0.01,0.01,0.01,0.01c0,0,0.01,0.01,0.01,0.01c0.39,0.39,0.9,0.59,1.41,0.59s1.02-0.2,1.41-0.59l4.99-4.99 C15.2,6.65,15.2,5.39,14.41,4.61z'/%3E%3C/svg%3E");
    background-position: left 8px center;
}


.ui-main-content .ui-form.login-form textarea {
    border: 0px none transparent;
    background-color: var(--color-bg-panel);
    display: flex;
    min-height: 100px;
    border-radius: var(--radius-8) !important;
    color: var(--color-text-basic);
    padding-inline: var(--gap-8);
    line-height: 100%;
    padding-block: 0px;
    font-size: 16px;
    font-weight: 400;
    padding-block-start: var(--gap-12);
}

    .ui-main-content .ui-form.login-form input[type='text']::placeholder,
    .ui-main-content .ui-form.login-form input[type='password']::placeholder,
    .ui-main-content .ui-form.login-form select::placeholder,
    .ui-main-content .ui-form.login-form textarea::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }

    .ui-main-content .ui-form.login-form input[type='text']::-webkit-input-placeholder,
    .ui-main-content .ui-form.login-form input[type='password']::-webkit-input-placeholder,
    .ui-main-content .ui-form.login-form select::-webkit-input-placeholder,
    .ui-main-content .ui-form.login-form textarea::-webkit-input-placeholder {
        color: var(--color-text-muted);
    }

    .ui-main-content .ui-form.login-form input[type='text']::-moz-placeholder,
    .ui-main-content .ui-form.login-form input[type='password']::-moz-placeholder,
    .ui-main-content .ui-form.login-form select::-moz-placeholder,
    .ui-main-content .ui-form.login-form textarea::-moz-placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }

    .ui-main-content .ui-form.login-form input[type='text']:-moz-placeholder,
    .ui-main-content .ui-form.login-form input[type='password']:-moz-placeholder,
    .ui-main-content .ui-form.login-form select:-moz-placeholder,
    .ui-main-content .ui-form.login-form textarea:-moz-placeholder {
        color: var(--color-text-muted);
    }

    .ui-main-content .ui-form.login-form input[type='text']:-ms-input-placeholder,
    .ui-main-content .ui-form.login-form input[type='password']:-ms-input-placeholder,
    .ui-main-content .ui-form.login-form select:-ms-input-placeholder,
    .ui-main-content .ui-form.login-form textarea:-ms-input-placeholder {
        color: var(--color-text-muted);
    }

.ui-main-content .ui-form.login-form .field-validation-error {
    background-color: transparent;
    color: var(--color-text-danger);
    padding: 0px !important;
    margin: 0px !important;
}

    .ui-main-content .ui-form.login-form .field-validation-error span {
        font-size: 14px !important;
        line-height: 130%;
        padding: 0px !important;
        margin-block-start: var(--gap-4);
        display: inline-block;
    }

.ui-main-content .ui-form.login-form .btn-primary {
    box-shadow: none;
    border-radius: var(--radius-8);
    background-color: var(--color-bg-primary) !important;
    display: flex;
    height: 60px;
    justify-content: center;
    align-items: center;
    text-shadow: none;
    font-size: 16px;
    font-weight: 700;
    transition: opacity 0.2s ease;
    margin-block-start: var(--gap-24);
    opacity: 1;
}

    .ui-main-content .ui-form.login-form .btn-primary:hover {
        transition: opacity 0.2s ease;
        opacity: 0.6;
    }

    .ui-main-content .ui-form.login-form .btn-primary:active {
        background-color: var(--color-bg-primary-dark) !important;
    }


.ui-main-content .ui-form.login-form .link-to-reg-form label {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-basic);
    padding-inline-end: var(--gap-8);
}

.ui-main-content .ui-form.login-form .link-to-reg-form a.form-link {
    font-size: 16px;
    font-weight: 700 !important;
    color: var(--color-text-primary);
    text-decoration: none !important;
}

.ui-main-content .ui-form.login-form .link-to-reg-form {
    text-decoration: none !important;
}

.ui-main-content .ui-form.login-form .checkbox {
    margin: 0px;
    padding: 0px;
}

    .ui-main-content .ui-form.login-form .checkbox input[type='checkbox'] {
        margin: 0px;
    }

    .ui-main-content .ui-form.login-form .checkbox label {
        display: flex !important;
        align-items: center;
        gap: var(--gap-8);
        font-size: 14px;
        font-weight: 500;
        color: var(--color-text-basic);
        padding-block-start: var(--gap-4);
    }

.ui-main-content .ui-form.login-form .form-link {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: 700 !important;
    font-family: 'Manrope';
}

    .ui-main-content .ui-form.login-form .form-link label {
        font-weight: 500;
        color: var(--color-text-basic);
        text-align: start;
        padding: 0px;
        background-color: transparent;
    }

.ui-main-content .ui-form.login-form .p-title {
    display: none !important;
}

.ui-main-content .ui-form.login-form .nav-item span {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 120%;
    padding-block-start: var(--gap-8);
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-main-content .ui-form.login-form .nav-item .nav-link.active span {
    color: var(--color-text-basic);
}

.ui-main-content .ui-form.login-form .nav-link i {
    font-size: 24px;
}

.ui-main-content .ui-form.login-form .nav-tabs .nav-link {
    background: transparent !important;
    border: none;
    border-bottom: 1px solid var(--color-border-basic);
    padding: 0px;
    margin: 0px;
    padding-block: var(--gap-12);
}

    .ui-main-content .ui-form.login-form .nav-tabs .nav-link:hover,
    .ui-main-content .ui-form.login-form .nav-tabs .nav-link:focus {
        border-top: 0px none transparent !important;
        border-left: 0px none transparent !important;
        border-right: 0px none transparent !important;
        border-bottom: 1px solid var(--color-border-basic);
    }

.ui-main-content .ui-form.login-form .nav-tabs {
    border-bottom: 0px none transparent;
    margin-block-end: var(--gap-32);
}

    .ui-main-content .ui-form.login-form .nav-tabs .nav-item {
        margin-bottom: 0px !important;
        margin: 0px;
        padding: 0px;
        display: block;
    }

.ui-main-content .ui-form.login-form .nav-item .nav-link.active,
.ui-main-content .ui-form.login-form .nav-item .nav-link.active:hover {
    border-bottom: 1px solid var(--color-border-primary) !important;
    background-color: transparent !important;
}

.ui-main-content .message-container {
    color: var(--color-text-muted);
}

.ui-main-content .ui-form.login-form .static-label {
    background-color: transparent;
    display: flex;
    font-weight: 500;
    color: var(--color-text-basic);
    padding-inline: 0px;
    gap: var(--gap-8);
    width: 100%;
    font-size: 16px;
}

    .ui-main-content .ui-form.login-form .static-label span {
        font-size: 16px;
        line-height: 130%;
        text-align: start;
        word-wrap: break-word;
        word-break: break-all;
        width: 100%;
        flex-shrink: 1;
    }

        .ui-main-content .ui-form.login-form .static-label span + a {
            white-space: nowrap;
        }

.nav-line .login-page.container {
    display: flex;
    align-items: center;
    padding-block: var(--gap-16);
}

    .nav-line .login-page.container .left-side {
        width: 100%;
    }

    .nav-line .login-page.container .right-side {
        white-space: nowrap;
        display: flex;
        gap: var(--gap-12);
    }

.nav-line .login-page .right-side .lang a {
    font-size: 14px;
    font-weight: 500 !important;
    color: var(--color-text-muted);
    text-decoration: none;
}

.nav-line .login-page .right-side .lang {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-basic);
    text-decoration: none;
}

.nav-line .login-page .right-side .divider {
    font-size: 21px;
    font-weight: 100;
    color: var(--color-border-basic);
}

.nav-line .login-page .SiteLogo i {
    font-size: 60px;
    display: none;
}

.nav-line .login-page .SiteLogo a {
    margin-block-start: 0px;
}

.login-form .phone-details {
    display: flex;
    font-size: 16px;
    gap: var(--gap-16);
    line-height: 120%;
    font-weight: 500;
    margin-block-end: var(--gap-16);
}

    .login-form .phone-details span {
        width: 100%;
        text-align: start;
    }

    .login-form .phone-details a {
        white-space: nowrap;
        text-decoration: none;
        flex-shrink: 0;
    }

.login-form .callout.timer .message b {
    font-weight: 500;
    color: var(--color-text-muted);
}

    .login-form .callout.timer .message b span {
        font-weight: 700;
        color: var(--color-text-basic);
    }

.restore-password.p-store-main-container {
    border: 0px none transparent;
    padding: var(--gap-0);
    box-shadow: none;
    text-align: center;
}

.p-store-main-container.restore-password .clipart-default-success {
    margin: 0px auto;
    margin-block-end: -20px;
}

.p-store-main-container.restore-password .p-title > h1 {
    font-weight: 700;
    color: var(--color-text-basic);
    font-size: 32px;
}

.restore-password.p-store-main-container .p-body {
    font-size: 16px;
    line-height: 150%;
    padding-block-start: var(--gap-24);
    color: var(--color-text-basic);
}

.p-store-main-container.restore-password .btn-primary {
    display: inline-flex;
    text-decoration: none !important;
    width: auto;
    height: 60px;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    padding-inline: var(--gap-24);
    margin-block-end: var(--gap-128);
}

@media (max-width: 600px) {
    .p-store-main-container.restore-password .p-title > h1 {
        font-size: 24px;
    }

    .restore-password.p-store-main-container .p-body {
        font-size: 14px;
        line-height: 130%;
    }

    .p-store-main-container.restore-password .clipart-default-success {
        width: 150px;
        height: 150px;
        margin-block-end: 0px;
    }
}

@media (max-width: 575px) {
    .site-Afghanistan .nav-line .login-page .SiteLogo i, .site-Macedonia .nav-line .login-page .SiteLogo i {
        display: inline-block
    }

    .site-Afghanistan .nav-line .login-page .SiteLogo a,
    .site-Macedonia .nav-line .login-page .SiteLogo a {
        background: none;
        width: 60px;
    }
}
/* #endregion =====================================/ Sign In ========================================= */
/* #region =============================== Cargo Delivery Error Panel ================================ */
.error-panel {
    display: block;
    width: 100%;
    position: relative;
    background-color: #EEEEEE;
    border-radius: var(--radius-12);
    padding: 40px 20px 40px 20px;
    text-align: center;
    color: #6C757D;
}

    .error-panel h2 {
        font-size: 24px;
        font-weight: 500;
        margin: 0px;
        padding: 0px;
    }

    .error-panel p {
        display: block;
        font-size: 14px;
        font-weight: 400;
        width: 500px;
        margin: 0px auto;
        line-height: 18px;
        margin-top: 15px;
        margin-bottom: 25px;
        box-sizing: border-box;
    }


    /* #region -------------- Clipart ---------------- */
    .error-panel .clipart-container {
        display: block;
        position: relative;
        margin: 20px auto 30px auto;
        width: 360px;
        height: 360px;
    }
    /* #region Cloud */
    .error-panel .clipart-confusion-cloud-1,
    .error-panel .clipart-confusion-cloud-2,
    .error-panel .clipart-confusion-cloud-3,
    .error-panel .clipart-confusion-cloud-4,
    .error-panel .clipart-confusion-cloud-5,
    .error-panel .clipart-confusion-cloud-6,
    .error-panel .clipart-confusion-cloud-7,
    .error-panel .clipart-confusion-cloud-8,
    .error-panel .clipart-confusion-cloud-9 {
        display: block;
        position: absolute;
        z-index: 1;
        background-color: #DCDCDC;
        border-radius: 50%;
    }

    .error-panel .clipart-confusion-cloud-1 {
        width: 20%;
        height: 20%;
        top: 16%;
        left: 13%;
        animation: clipart-confusion-cloud-1 1.2s ease-in-out infinite alternate;
        -webkit-animation: clipart-confusion-cloud-1 1.2s ease-in-out infinite alternate;
    }

    .error-panel .clipart-confusion-cloud-2 {
        width: 16%;
        height: 16%;
        top: 65%;
        left: 18%;
        animation: clipart-confusion-cloud-2 1s ease-in-out infinite alternate;
        -webkit-animation: clipart-confusion-cloud-2 1s ease-in-out infinite alternate;
    }

    .error-panel .clipart-confusion-cloud-3 {
        width: 23%;
        height: 23%;
        top: 61.5%;
        left: 52.5%;
        animation: clipart-confusion-cloud-3 1.1s ease-in-out infinite alternate;
        -webkit-animation: clipart-confusion-cloud-3 1.1s ease-in-out infinite alternate;
    }

    .error-panel .clipart-confusion-cloud-4 {
        width: 33%;
        height: 33%;
        top: 22.8%;
        left: 66.2%;
        animation: clipart-confusion-cloud-4 0.9s ease-in-out infinite alternate;
        -webkit-animation: clipart-confusion-cloud-4 0.9s ease-in-out infinite alternate;
    }

    .error-panel .clipart-confusion-cloud-5 {
        width: 29%;
        height: 29%;
        top: 45.8%;
        left: 0.2%;
        animation: clipart-confusion-cloud-5 1s ease-in-out infinite alternate;
        -webkit-animation: clipart-confusion-cloud-5 1s ease-in-out infinite alternate;
    }

    .error-panel .clipart-confusion-cloud-6 {
        width: 47%;
        height: 47%;
        top: 7.8%;
        left: 28.2%;
        animation: clipart-confusion-cloud-6 1.2s ease-in-out infinite alternate;
        -webkit-animation: clipart-confusion-cloud-6 1.2s ease-in-out infinite alternate;
    }

    .error-panel .clipart-confusion-cloud-7 {
        width: 39%;
        height: 39%;
        top: 49.5%;
        left: 28%;
        animation: clipart-confusion-cloud-7 1.5s ease-in-out infinite alternate;
        -webkit-animation: clipart-confusion-cloud-7 1.5s ease-in-out infinite alternate;
    }

    .error-panel .clipart-confusion-cloud-8 {
        width: 41%;
        height: 41%;
        top: 36.5%;
        left: 47%;
        animation: clipart-confusion-cloud-8 1.1s ease-in-out infinite alternate;
        -webkit-animation: clipart-confusion-cloud-8 1.1s ease-in-out infinite alternate;
    }

    .error-panel .clipart-confusion-cloud-9 {
        width: 38%;
        height: 38%;
        top: 25.5%;
        left: 11%;
        animation: clipart-confusion-cloud-9 1.2s ease-in-out infinite alternate;
        -webkit-animation: clipart-confusion-cloud-9 1.2s ease-in-out infinite alternate;
    }

@keyframes clipart-confusion-cloud-1 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(-2%, -2%);
    }
}

@-webkit-keyframes clipart-confusion-cloud-1 {
    from {
        -webkit-transform: translate(5%, 5%);
    }

    to {
        -webkit-transform: translate(-2%, -2%);
    }
}

@keyframes clipart-confusion-cloud-2 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@-webkit-keyframes clipart-confusion-cloud-2 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(-5%, 5%);
    }
}

@keyframes clipart-confusion-cloud-3 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@-webkit-keyframes clipart-confusion-cloud-3 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(5%, 5%);
    }
}

@keyframes clipart-confusion-cloud-4 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(2%, -3%);
    }
}

@-webkit-keyframes clipart-confusion-cloud-4 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(2%, -3%);
    }
}

@keyframes clipart-confusion-cloud-5 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(5%, -6%);
    }
}

@-webkit-keyframes clipart-confusion-cloud-5 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(5%, -6%);
    }
}

@keyframes clipart-confusion-cloud-6 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@-webkit-keyframes clipart-confusion-cloud-6 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(0%, 6%);
    }
}

@keyframes clipart-confusion-cloud-7 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -6%);
    }
}

@-webkit-keyframes clipart-confusion-cloud-7 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(0%, -6%);
    }
}

@keyframes clipart-confusion-cloud-8 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(-5%, -6%);
    }
}

@-webkit-keyframes clipart-confusion-cloud-8 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(-5%, -6%);
    }
}

@keyframes clipart-confusion-cloud-9 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(4%, 3%);
    }
}

@-webkit-keyframes clipart-confusion-cloud-9 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(4%, 3%);
    }
}
/* #endregion Cloud */
.error-panel .clipart-person-container {
    display: block;
    position: absolute;
    top: 0%;
    left: 26%;
    width: 60%;
    height: 100%;
}

    .error-panel .clipart-person-container .inner {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

.error-panel .clipart-confusion-person-body {
    display: block;
    position: absolute;
    width: 38%;
    height: 85%;
    top: 13%;
    left: 21%;
    background: url("../../Content/Images/cargo-delivery/error-page/person/person-body.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 3;
}

.error-panel .clipart-confusion-person-eyes {
    display: block;
    position: absolute;
    background: url("../../Content/Images/cargo-delivery/error-page/person/person-eyes.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 4;
    width: 13%;
    height: 5%;
    left: 29%;
    top: 24%;
    animation: clipart-confusion-person-eyes 4s linear infinite;
    -webkit-animation: clipart-confusion-person-eyes 4s linear infinite;
}

.error-panel .clipart-confusion-person-brows {
    display: block;
    position: absolute;
    background: url("../../Content/Images/cargo-delivery/error-page/person/person-brows.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 4;
    width: 14%;
    height: 3%;
    left: 28%;
    top: 22.5%;
    animation: clipart-confusion-person-brows 4s ease-in-out infinite;
    -webkit-animation: clipart-confusion-person-brows 4s ease-in-out infinite;
}

.error-panel .clipart-confusion-person-hand-1 {
    display: block;
    position: absolute;
    background: url("../../Content/Images/cargo-delivery/error-page/person/person-hand-scratching.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 2;
    width: 28%;
    height: 27%;
    left: 2%;
    top: 19%;
    animation: clipart-confusion-person-hand-1 6s ease-in-out infinite alternate;
    -webkit-animation: clipart-confusion-person-hand-1 6s ease-in-out infinite alternate;
}

.error-panel .clipart-confusion-person-hand-2 {
    display: block;
    position: absolute;
    background: url("../../Content/Images/cargo-delivery/error-page/person/person-hand-box.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 2;
    width: 55%;
    height: 25%;
    left: 44.4%;
    top: 30%;
    animation: clipart-confusion-person-hand-2 3s ease-in-out infinite alternate;
    -webkit-animation: clipart-confusion-person-hand-2 3s ease-in-out infinite alternate;
}

.error-panel .clipart-confusion-symbol-1,
.error-panel .clipart-confusion-symbol-2,
.error-panel .clipart-confusion-symbol-3 {
    display: block;
    position: absolute;
    z-index: 2;
    background: url("../../Content/Images/cargo-delivery/error-page/person/symbol-question.svg") no-repeat center center transparent;
    background-size: contain;
}

.error-panel .clipart-confusion-symbol-1 {
    width: 8%;
    height: 8%;
    top: 17%;
    left: 3%;
    transform: rotate(-69deg);
    -webkit-transform: rotate(-69deg);
    animation: clipart-confusion-symbol-1 3s ease-in-out infinite;
    -webkit-animation: clipart-confusion-symbol-1 3s ease-in-out infinite;
}

.error-panel .clipart-confusion-symbol-2 {
    width: 16%;
    height: 16%;
    top: 4%;
    left: 3%;
    transform: rotate(-34deg);
    -webkit-transform: rotate(-34deg);
    animation: clipart-confusion-symbol-2 3s ease-in-out infinite;
    -webkit-animation: clipart-confusion-symbol-2 3s ease-in-out infinite;
}

.error-panel .clipart-confusion-symbol-3 {
    width: 10%;
    height: 10%;
    top: 3%;
    left: 19%;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    animation: clipart-confusion-symbol-3 3s ease-in-out infinite;
    -webkit-animation: clipart-confusion-symbol-3 3s ease-in-out infinite;
}


@keyframes clipart-confusion-person-eyes {
    0% {
        opacity: 1;
    }

    49% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    51% {
        opacity: 0;
    }

    52% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes clipart-confusion-person-eyes {
    0% {
        opacity: 1;
    }

    49% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    51% {
        opacity: 0;
    }

    52% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes clipart-confusion-person-brows {
    0% {
        transform: translateY(0%);
    }

    25% {
        transform: translateY(0%);
    }

    30% {
        transform: translateY(-20%);
    }

    65% {
        transform: translateY(-20%);
    }

    70% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes clipart-confusion-person-brows {
    0% {
        -webkit-transform: translateY(0%);
    }

    25% {
        -webkit-transform: translateY(0%);
    }

    30% {
        -webkit-transform: translateY(-20%);
    }

    65% {
        -webkit-transform: translateY(-20%);
    }

    70% {
        -webkit-transform: translateY(0%);
    }

    100% {
        -webkit-transform: translateY(0%);
    }
}

@keyframes clipart-confusion-person-hand-2 {
    from {
        transform: rotate(-1deg);
        transform-origin: 7% 20%;
    }

    to {
        transform: rotate(7deg);
        transform-origin: 7% 20%;
    }
}

@-webkit-keyframes clipart-confusion-person-hand-2 {
    from {
        -webkit-transform: rotate(-1deg);
        -webkit-transform-origin: 7% 20%;
    }

    to {
        -webkit-transform: rotate(7deg);
        -webkit-transform-origin: 7% 20%;
    }
}

@keyframes clipart-confusion-person-hand-1 {
    0% {
        transform: rotate(-1deg);
        transform-origin: 100% 100%;
    }

    2% {
        transform: rotate(3deg);
        transform-origin: 100% 100%;
    }

    4% {
        transform: rotate(-1deg);
        transform-origin: 100% 100%;
    }

    6% {
        transform: rotate(3deg);
        transform-origin: 100% 100%;
    }

    8% {
        transform: rotate(-1deg);
        transform-origin: 100% 100%;
    }

    10% {
        transform: rotate(3deg);
        transform-origin: 100% 100%;
    }

    12% {
        transform: rotate(-1deg);
        transform-origin: 100% 100%;
    }

    14% {
        transform: rotate(3deg);
        transform-origin: 100% 100%;
    }

    16% {
        transform: rotate(-1deg);
        transform-origin: 100% 100%;
    }

    18% {
        transform: rotate(3deg);
        transform-origin: 100% 100%;
    }

    20% {
        transform: rotate(-1deg);
        transform-origin: 100% 100%;
    }

    22% {
        transform: rotate(3deg);
        transform-origin: 100% 100%;
    }

    24% {
        transform: rotate(-1deg);
        transform-origin: 100% 100%;
    }

    26% {
        transform: rotate(3deg);
        transform-origin: 100% 100%;
    }

    30% {
        transform: rotate(-3deg);
        transform-origin: 100% 100%;
    }

    60% {
        transform: rotate(-1deg);
        transform-origin: 100% 100%;
    }

    100% {
        transform: rotate(-1deg);
        transform-origin: 100% 100%;
    }
}

@-webkit-keyframes clipart-confusion-person-hand-1 {
    0% {
        -webkit-transform: rotate(-1deg);
        -webkit-transform-origin: 100% 100%;
    }

    2% {
        -webkit-transform: rotate(3deg);
        -webkit-transform-origin: 100% 100%;
    }

    4% {
        -webkit-transform: rotate(-1deg);
        -webkit-transform-origin: 100% 100%;
    }

    6% {
        -webkit-transform: rotate(3deg);
        -webkit-transform-origin: 100% 100%;
    }

    8% {
        -webkit-transform: rotate(-1deg);
        -webkit-transform-origin: 100% 100%;
    }

    10% {
        -webkit-transform: rotate(3deg);
        -webkit-transform-origin: 100% 100%;
    }

    12% {
        -webkit-transform: rotate(-1deg);
        -webkit-transform-origin: 100% 100%;
    }

    14% {
        -webkit-transform: rotate(3deg);
        -webkit-transform-origin: 100% 100%;
    }

    16% {
        -webkit-transform: rotate(-1deg);
        -webkit-transform-origin: 100% 100%;
    }

    18% {
        -webkit-transform: rotate(3deg);
        -webkit-transform-origin: 100% 100%;
    }

    20% {
        -webkit-transform: rotate(-1deg);
        -webkit-transform-origin: 100% 100%;
    }

    22% {
        -webkit-transform: rotate(3deg);
        -webkit-transform-origin: 100% 100%;
    }

    24% {
        -webkit-transform: rotate(-1deg);
        -webkit-transform-origin: 100% 100%;
    }

    26% {
        -webkit-transform: rotate(3deg);
        -webkit-transform-origin: 100% 100%;
    }

    30% {
        -webkit-transform: rotate(-3deg);
        -webkit-transform-origin: 100% 100%;
    }

    60% {
        -webkit-transform: rotate(-1deg);
        -webkit-transform-origin: 100% 100%;
    }

    100% {
        -webkit-transform: rotate(-1deg);
        -webkit-transform-origin: 100% 100%;
    }
}

@keyframes clipart-confusion-symbol-1 {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0;
    }

    7% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes clipart-confusion-symbol-1 {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0;
    }

    7% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes clipart-confusion-symbol-2 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes clipart-confusion-symbol-2 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes clipart-confusion-symbol-3 {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    65% {
        opacity: 1;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes clipart-confusion-symbol-3 {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    65% {
        opacity: 1;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}
/* #endregion ---------- /Clipart ---------------- */

@media (max-width: 1200px) {
    .error-panel .clipart-container {
        width: 280px;
        height: 280px;
        margin: 0px auto 20px auto;
    }
}

@media (max-width: 767px) {
    .error-panel {
        padding: 20px 10px 20px 10px;
    }

        .error-panel .clipart-container {
            width: 240px;
            height: 240px;
            margin: 0px auto 20px auto;
        }


        .error-panel p {
            width: 100%;
            margin-top: 15px;
            margin-bottom: 25px;
            padding: 0px 80px 0px 80px;
        }
}


@media (max-width: 550px) {

    .error-panel .clipart-container {
        width: 240px;
        height: 240px;
        margin: 0px auto 20px auto;
    }


    .error-panel p {
        width: 100%;
        margin-top: 15px;
        margin-bottom: 25px;
        padding: 0px 20px 0px 20px;
    }
}


@media (max-width: 450px) {
    .error-panel .clipart-container {
        width: 200px;
        height: 200px;
        margin: 0px auto 20px auto;
    }
}

/* #endregion =========================== /Cargo Delivery Error Panel ================================ */
/* #region ====================================== Cookies ============================================ */
/* #region Cookies popup panel */
.cookies-area {
    display: block;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    z-index: 9999999;
    position: fixed;
    padding-bottom: 30px;
    transform: translateY(1000px);
    transition: transform 1s cubic-bezier(.56,-0.59,.15,1.17);
}

    .cookies-area.active {
        display: block;
        transform: translateY(0px);
        transition: transform 2s cubic-bezier(.56,-0.59,.15,1.17);
    }

.cookies-panel {
    display: block;
    background-color: #E6F4ED;
    border-radius: var(--radius-12);
    box-shadow: rgba(0, 0, 0, 0.17) 0px 10px 30px;
}

.cookies-layout {
    display: table;
    width: 100%;
    table-layout: fixed;
}

    .cookies-layout > * {
        display: table-row;
    }

        .cookies-layout > * > * {
            display: table-cell;
            vertical-align: middle;
        }

    .cookies-layout .cookies-clipart-area {
        width: 120px;
        padding: 10px 10px 10px 10px;
    }

    .cookies-layout .cookies-controls-area {
        width: 500px;
        padding: 20px 20px 20px 20px;
    }

    .cookies-layout .cookies-clipart-block {
        position: relative;
        display: block;
        width: 100px;
        height: 100px;
    }


    .cookies-layout .cookies-content-area p {
        font-size: 18px;
    }

    .cookies-layout .cookies-content-area a {
        font-size: 18px;
        display: inline-block;
        margin-top: 10px;
        color: var(--color-text-primary);
        text-decoration: underline;
        font-weight: 700;
    }

    .cookies-layout .cookies-content-area {
        text-align: left;
        padding: 20px;
    }

*[dir='rtl'] .cookies-layout .cookies-content-area {
    text-align: right;
}

.cookies-layout .cookies-controls-area .new-btn {
    display: inline-block;
    width: auto;
    min-width: 220px;
    padding: 20px 15px 20px 15px;
    text-transform: uppercase;
    font-weight: 700;
}

    .cookies-layout .cookies-controls-area .new-btn.btn-link {
        border: 1px solid var(--color-border-primary) !important;
        border-radius: var(--radius-8);
        margin-top: 0px;
        padding: 19px 15px 19px 15px;
        text-decoration: none;
        color: var(--color-text-primary) !important;
        background-color: transparent !important;
        text-transform: uppercase;
        font-weight: 700;
    }

.cookies-layout .cookies-clipart-block .clipart-cloud-1,
.cookies-layout .cookies-clipart-block .clipart-cloud-2,
.cookies-layout .cookies-clipart-block .clipart-cloud-3,
.cookies-layout .cookies-clipart-block .clipart-cloud-4,
.cookies-layout .cookies-clipart-block .clipart-cloud-5,
.cookies-layout .cookies-clipart-block .clipart-cloud-6 {
    position: absolute;
    z-index: 1;
    display: block;
    border-radius: 50%;
    background-color: #c0d4c9;
}


.cookies-layout .cookies-clipart-block .clipart-cloud-1 {
    width: 40%;
    height: 40%;
    top: 12%;
    left: 14%;
    -webkit-animation: cookies-cloud-1 1.2s ease-in-out infinite alternate;
    animation: cookies-cloud-1 1.2s ease-in-out infinite alternate;
}

.cookies-layout .cookies-clipart-block .clipart-cloud-2 {
    width: 26%;
    height: 26%;
    top: 6%;
    left: 41%;
    -webkit-animation: cookies-cloud-2 1.5s ease-in-out infinite alternate;
    animation: cookies-cloud-2 1.5s ease-in-out infinite alternate;
}

.cookies-layout .cookies-clipart-block .clipart-cloud-3 {
    width: 54%;
    height: 54%;
    top: 13%;
    left: 46%;
    -webkit-animation: cookies-cloud-3 1.7s ease-in-out infinite alternate;
    animation: cookies-cloud-3 1.7s ease-in-out infinite alternate;
}

.cookies-layout .cookies-clipart-block .clipart-cloud-4 {
    width: 33%;
    height: 33%;
    top: 51%;
    left: 66%;
    -webkit-animation: cookies-cloud-4 1.2s ease-in-out infinite alternate;
    animation: cookies-cloud-4 1.2s ease-in-out infinite alternate;
}

.cookies-layout .cookies-clipart-block .clipart-cloud-5 {
    width: 55%;
    height: 55%;
    top: 39%;
    left: 21%;
    -webkit-animation: cookies-cloud-5 1.5s ease-in-out infinite alternate;
    animation: cookies-cloud-5 1.5s ease-in-out infinite alternate;
}

.cookies-layout .cookies-clipart-block .clipart-cloud-6 {
    width: 42%;
    height: 42%;
    top: 30%;
    left: 2%;
    -webkit-animation: cookies-cloud-6 1.3s ease-in-out infinite alternate;
    animation: cookies-cloud-6 1.3s ease-in-out infinite alternate;
}

@keyframes cookies-cloud-1 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@-webkit-keyframes cookies-cloud-1 {
    from {
        -webkit-transform: translate(-5%, -5%);
    }

    to {
        -webkit-transform: translate(5%, 5%);
    }
}

@keyframes cookies-cloud-2 {
    from {
        transform: translate(0%, 8%);
    }

    to {
        transform: translate(0%, -8%);
    }
}

@-webkit-keyframes cookies-cloud-2 {
    from {
        -webkit-transform: translate(0%, 8%);
    }

    to {
        -webkit-transform: translate(0%, -8%);
    }
}

@keyframes cookies-cloud-3 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@-webkit-keyframes cookies-cloud-3 {
    from {
        -webkit-transform: translate(5%, -5%);
    }

    to {
        -webkit-transform: translate(-5%, 5%);
    }
}

@keyframes cookies-cloud-4 {
    from {
        transform: translate(-9%, -9%);
    }

    to {
        transform: translate(7%, 5%);
    }
}

@-webkit-keyframes cookies-cloud-4 {
    from {
        -webkit-transform: translate(-9%, -9%);
    }

    to {
        -webkit-transform: translate(7%, 5%);
    }
}

@keyframes cookies-cloud-5 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -8%);
    }
}

@-webkit-keyframes cookies-cloud-5 {
    from {
        -webkit-transform: translate(0%, 5%);
    }

    to {
        -webkit-transform: translate(0%, -8%);
    }
}

@keyframes cookies-cloud-6 {
    from {
        transform: translate(9%, 0%);
    }

    to {
        transform: translate(-4%, 0%);
    }
}

@-webkit-keyframes cookies-cloud-6 {
    from {
        -webkit-transform: translate(9%, 0%);
    }

    to {
        -webkit-transform: translate(-4%, 0%);
    }
}

.cookies-layout .cookies-clipart-block .clipart-cookies {
    display: block;
    position: absolute;
    z-index: 2;
    width: 60%;
    height: 60%;
    top: 13%;
    left: 24%;
    background: url('../../Content/Images/Help/clipart-cookies.svg') no-repeat center center transparent;
    background-size: contain;
}

.cookies-layout .cookies-clipart-block .clipart-shadow {
    display: block;
    position: absolute;
    z-index: 2;
    width: 53%;
    height: 4%;
    top: 74%;
    left: 28%;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

@media (max-width: 1199px) {
    .cookies-layout .cookies-content-area p {
        font-size: 14px;
    }

    .cookies-layout .cookies-content-area a {
        font-size: 14px;
        margin-top: 10px;
    }

    .cookies-layout .cookies-controls-area {
        width: 300px;
    }

        .cookies-layout .cookies-controls-area .new-btn {
            display: block;
            width: 100%;
            min-width: 0px;
            padding: 10px 15px 10px 15px;
        }

            .cookies-layout .cookies-controls-area .new-btn.btn-link {
                border: 1px solid var(--color-border-primary) !important;
                border-radius: var(--radius-8);
                margin-top: 5px;
                padding: 10px 15px 10px 15px;
                text-decoration: none;
                color: var(--color-text-primary) !important;
                background-color: transparent !important;
            }
}

@media (max-width: 991px) {
    .cookies-layout .cookies-controls-area {
        width: 250px;
    }
}

@media (max-width: 767px) {
    .cookies-layout {
        display: block;
        width: 100%;
    }

        .cookies-layout > * {
            display: block;
        }

            .cookies-layout > * > * {
                display: block;
            }

        .cookies-layout .cookies-controls-area,
        .cookies-layout .cookies-content-area {
            width: 100%;
        }

        .cookies-layout .cookies-controls-area {
            border-top: 1px solid #DDDDDD;
            text-align: center;
        }

        .cookies-layout .cookies-clipart-area {
            display: none;
        }

        .cookies-layout .cookies-controls-area .new-btn {
            display: inline-block;
            min-width: 200px;
            width: auto;
        }

            .cookies-layout .cookies-controls-area .new-btn.btn-link {
                margin-top: 0px;
            }
}

@media (max-width: 500px) {
    .cookies-area {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        /* iOS Safari 11.2, Safari 11 */
        padding-bottom: constant(safe-area-inset-bottom, 10px);
        /* iOS Safari 11.4+, Safari 11.1+, Chrome 69+, Opera 56+ */
        padding-bottom: env(safe-area-inset-bottom, 10px);
    }

    .cookies-layout .cookies-controls-area .new-btn {
        width: 100%;
    }

    .cookies-area .cookies-layout {
        margin-bottom: 10px;
    }

    .cookies-layout .cookies-controls-area .new-btn.btn-link {
        margin-top: 5px;
    }
}

@media (max-width: 321px) and (max-height: 500px) {
    .cookies-area p {
        line-height: 1.2em;
    }

    .cookies-layout .cookies-controls-area .new-btn {
        padding: 15px 5px 13px 5px;
    }

    .cookies-layout .cookies-content-area {
        padding: 15px;
    }

    .cookies-layout .cookies-controls-area {
        padding: 15px;
    }
}

/* #endregion Cookies popup panel */
/* #region Cookies details */
.cookies-details {
    padding-bottom: 200px;
}

    .cookies-details h1 {
        font-size: 64px;
        text-transform: uppercase;
        text-align: center;
        margin-top: 90px;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .cookies-details small {
        font-size: 14px;
        text-align: center;
        display: block;
        margin-bottom: 60px;
    }

    .cookies-details h4 {
        font-weight: 700;
        font-size: 32px;
        margin-top: 60px;
        margin-bottom: 20px;
    }

    .cookies-details h5 {
        font-weight: 700;
        font-size: 24px;
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .cookies-details label {
        font-weight: 700;
        font-size: 18px;
        display: block;
        line-height: 140%;
    }

    .cookies-details p {
        font-weight: 400;
        font-size: 18px;
        margin-bottom: 20px;
        line-height: 180%;
    }

.cookies-browser-block {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-top: 40px;
    margin-bottom: 40px;
}

    .cookies-browser-block + .cookies-browser-block {
        border-left: 1px solid #DDDDDD;
    }

*[dir='rtl'] .cookies-browser-block + .cookies-browser-block {
    border-left: 0px none transparent;
    border-right: 1px solid #DDDDDD;
}

.cookies-browser-block a {
    display: block;
    width: 100%;
}

    .cookies-browser-block a .clipart-chrome,
    .cookies-browser-block a .clipart-firefox,
    .cookies-browser-block a .clipart-ie {
        display: inline-block;
        width: 150px;
        height: 150px;
        background-color: transparent;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .cookies-browser-block a .clipart-chrome {
        background-image: url('../../Content/Images/Help/clipart-chrome.svg');
    }

    .cookies-browser-block a .clipart-firefox {
        background-image: url('../../Content/Images/Help/clipart-firefox.svg');
    }

    .cookies-browser-block a .clipart-ie {
        background-image: url('../../Content/Images/Help/clipart-ie.svg');
    }

    .cookies-browser-block a span {
        display: block;
        width: 100%;
        margin-top: 20px;
        font-size: 16px;
        line-height: 130%;
    }

@media (max-width: 991px) {
    .cookies-details h1 {
        font-size: 48px;
        line-height: 1em;
    }
}

@media (max-width: 767px) {
    .cookies-details h1 {
        font-size: 48px;
        line-height: 1em;
    }

    .cookies-details p {
        font-size: 14px;
    }


    .cookies-browser-block + .cookies-browser-block {
        border-left: 0px solid #DDDDDD;
    }

    *[dir='rtl'] .cookies-browser-block + .cookies-browser-block {
        border-left: 0px none transparent;
        border-right: 0px solid #DDDDDD;
    }

    .cookies-browser-block a .clipart-chrome,
    .cookies-browser-block a .clipart-firefox,
    .cookies-browser-block a .clipart-ie {
        width: 100px;
        height: 100px;
    }

    .cookies-browser-block {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media (max-width: 575px) {
    .cookies-details {
        padding-bottom: 100px;
    }

        .cookies-details h1 {
            font-size: 36px;
            line-height: 1em;
        }

        .cookies-details h4 {
            font-size: 24px;
            line-height: 1em;
        }

        .cookies-details h5 {
            font-size: 18px;
            line-height: 1em;
        }

        .cookies-details label {
            font-size: 14px;
        }

    .cookies-browser-block {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        text-align: left;
    }

    *[dir='rtl'] .cookies-browser-block {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        text-align: right;
    }

    .cookies-browser-block a {
        text-decoration: none;
        text-align: left;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    *[dir='rtl'] .cookies-browser-block a {
        text-decoration: none;
        text-align: right;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .cookies-browser-block a .clipart-chrome,
    .cookies-browser-block a .clipart-firefox,
    .cookies-browser-block a .clipart-ie {
        width: 50px;
        height: 50px;
        display: inline-block;
        vertical-align: middle;
    }

    .cookies-browser-block a span {
        margin: 0px;
        display: inline-block;
        vertical-align: middle;
        width: auto
    }
}
/* #endregion Cookies details */
/* #endregion ================================== /Cookies ============================================ */
/* #region ==================================== Account: Delivery ==================================== */
.switch-btn-block {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #DEE2E6;
    border-radius: var(--radius-4);
    margin-top: 20px;
    margin-bottom: 20px;
}

    .switch-btn-block a {
        font-size: 12px;
        color: #808080;
        font-weight: 400;
        text-decoration: none;
        margin: 0px;
        display: inline-block;
        text-align: center;
        padding: 10px 15px 10px 15px;
        background-color: transparent;
        transition: background-color 0.2s ease;
        -webkit-transition: background-color 0.2s ease;
    }

        .switch-btn-block a + a {
            border-left: 1px solid #DEE2E6;
        }

        .switch-btn-block a:hover, .switch-btn-block a.active {
            background-color: #F1F1F1;
            transition: background-color 0.2s ease;
            -webkit-transition: background-color 0.2s ease;
        }
/* #endregion ================================ /Account: Delivery ==================================== */
/* #region ================================== Account: No Delivery =================================== */
.account-no-delivery-panel {
    display: block;
    width: 100%;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 100px;
}

    .account-no-delivery-panel .clipart-container {
        margin: 0px auto 0px auto;
        position: relative;
        width: 400px;
        height: 400px;
        background-size: contain;
    }

    .account-no-delivery-panel h2 {
        font-size: 30px;
        line-height: 32px;
        color: var(--color-text-muted);
        font-weight: 800;
        text-transform: uppercase;
        text-align: center;
        width: 600px;
        margin: 0px auto;
    }

    .account-no-delivery-panel .description-block {
        display: block;
        width: 700px;
        margin: 0px auto 0px auto;
        padding-top: 40px;
        padding-bottom: 40px;
    }

        .account-no-delivery-panel .description-block .divider-horizontal {
            background-color: #F2f2f2;
        }

    .account-no-delivery-panel ul {
        padding: 40px 20px 40px 20px;
    }



    .account-no-delivery-panel .btn-link {
        font-weight: 500;
        color: var(--color-text-primary);
        font-size: 14px;
        text-align: center;
        display: inline-block;
        margin-top: 20px;
        margin-bottom: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        opacity: 1;
        transition: opacity 0.2s ease;
        -webkit-transition: opacity 0.2s ease;
    }

        .account-no-delivery-panel .btn-link:hover {
            opacity: 0.8;
            transition: opacity 0.2s ease;
            -webkit-transition: opacity 0.2s ease;
        }
    /* #region Background */
    .account-no-delivery-panel .clipart-delivery-circle-1,
    .account-no-delivery-panel .clipart-delivery-circle-2,
    .account-no-delivery-panel .clipart-delivery-circle-3,
    .account-no-delivery-panel .clipart-delivery-circle-4,
    .account-no-delivery-panel .clipart-delivery-circle-5,
    .account-no-delivery-panel .clipart-delivery-circle-6,
    .account-no-delivery-panel .clipart-delivery-circle-7,
    .account-no-delivery-panel .clipart-delivery-circle-8,
    .account-no-delivery-panel .clipart-delivery-circle-9,
    .account-no-delivery-panel .clipart-delivery-circle-10 {
        display: block;
        position: absolute;
        z-index: 1;
        background-color: #EBEBEB;
        border-radius: 50%;
    }

    .account-no-delivery-panel .clipart-delivery-circle-1 {
        width: 16%;
        height: 16%;
        top: 29%;
        left: 5%;
        animation: clipart-delivery-circle-1 1s ease-in-out infinite alternate;
        -webkit-animation: clipart-delivery-circle-1 1s ease-in-out infinite alternate;
    }

    .account-no-delivery-panel .clipart-delivery-circle-2 {
        width: 16%;
        height: 16%;
        top: 68%;
        left: 8%;
        animation: clipart-delivery-circle-2 0.8s ease-in-out infinite alternate;
        -webkit-animation: clipart-delivery-circle-2 0.8s ease-in-out infinite alternate;
    }

    .account-no-delivery-panel .clipart-delivery-circle-3 {
        width: 27%;
        height: 27%;
        top: 61%;
        left: 44%;
        animation: clipart-delivery-circle-3 0.9s ease-in-out infinite alternate;
        -webkit-animation: clipart-delivery-circle-3 0.9s ease-in-out infinite alternate;
    }

    .account-no-delivery-panel .clipart-delivery-circle-4 {
        width: 27%;
        height: 27%;
        top: 7%;
        left: 57%;
        animation: clipart-delivery-circle-4 1.1s ease-in-out infinite alternate;
        -webkit-animation: clipart-delivery-circle-4 1.1s ease-in-out infinite alternate;
    }

    .account-no-delivery-panel .clipart-delivery-circle-5 {
        width: 22%;
        height: 22%;
        top: 39%;
        left: 76%;
        animation: clipart-delivery-circle-5 1.3s ease-in-out infinite alternate;
        -webkit-animation: clipart-delivery-circle-5 1.3s ease-in-out infinite alternate;
    }

    .account-no-delivery-panel .clipart-delivery-circle-6 {
        width: 27%;
        height: 27%;
        top: 18%;
        left: 73%;
        animation: clipart-delivery-circle-6 1s ease-in-out infinite alternate;
        -webkit-animation: clipart-delivery-circle-6 1s ease-in-out infinite alternate;
    }

    .account-no-delivery-panel .clipart-delivery-circle-7 {
        width: 31%;
        height: 31%;
        top: 64%;
        left: 21%;
        animation: clipart-delivery-circle-7 0.9s ease-in-out infinite alternate;
        -webkit-animation: clipart-delivery-circle-7 0.9s ease-in-out infinite alternate;
    }

    .account-no-delivery-panel .clipart-delivery-circle-8 {
        width: 40%;
        height: 40%;
        top: 52%;
        left: 57%;
        animation: clipart-delivery-circle-8 1s ease-in-out infinite alternate;
        -webkit-animation: clipart-delivery-circle-8 1s ease-in-out infinite alternate;
    }

    .account-no-delivery-panel .clipart-delivery-circle-9 {
        width: 37%;
        height: 37%;
        top: 38%;
        left: 0%;
        animation: clipart-delivery-circle-9 1.1s ease-in-out infinite alternate;
        -webkit-animation: clipart-delivery-circle-9 1.1s ease-in-out infinite alternate;
    }

    .account-no-delivery-panel .clipart-delivery-circle-10 {
        width: 68%;
        height: 68%;
        top: 5%;
        left: 12%;
        animation: clipart-delivery-circle-10 1.2s ease-in-out infinite alternate;
        -webkit-animation: clipart-delivery-circle-10 1.2s ease-in-out infinite alternate;
    }

@keyframes clipart-delivery-circle-1 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(10%, 10%);
    }
}

@-webkit-keyframes clipart-delivery-circle-1 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(10%, 10%);
    }
}

@keyframes clipart-delivery-circle-2 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(10%, -10%);
    }
}

@-webkit-keyframes clipart-delivery-circle-2 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(10%, -10%);
    }
}

@keyframes clipart-delivery-circle-3 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -10%);
    }
}

@-webkit-keyframes clipart-delivery-circle-3 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(0%, -10%);
    }
}

@keyframes clipart-delivery-circle-4 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, 10%);
    }
}

@-webkit-keyframes clipart-delivery-circle-4 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(0%, 10%);
    }
}

@keyframes clipart-delivery-circle-5 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(-10%, 0%);
    }
}

@-webkit-keyframes clipart-delivery-circle-5 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(-10%, 0%);
    }
}

@keyframes clipart-delivery-circle-6 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(6%, -3%);
    }
}

@-webkit-keyframes clipart-delivery-circle-6 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(6%, -3%);
    }
}

@keyframes clipart-delivery-circle-7 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(-3%, 6%);
    }
}

@-webkit-keyframes clipart-delivery-circle-7 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(-3%, 6%);
    }
}

@keyframes clipart-delivery-circle-8 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(6%, 3%);
    }
}

@-webkit-keyframes clipart-delivery-circle-8 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(6%, 3%);
    }
}

@keyframes clipart-delivery-circle-9 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

@-webkit-keyframes clipart-delivery-circle-9 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(-6%, 0%);
    }
}

@keyframes clipart-delivery-circle-10 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -3%);
    }
}

@-webkit-keyframes clipart-delivery-circle-10 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(0%, -3%);
    }
}

/* #endregion Background */
/* #region Truck */
.account-no-delivery-panel .car-truck-shadow,
.cargo-promo-page section.start .clipart-truck .car-truck-shadow {
    display: block;
    position: absolute;
    background: url("../../Content/Images/cargo-delivery/no-delivery/clipart/car-shadow.svg") center center no-repeat transparent;
    background-size: contain;
    z-index: 1;
    width: 65%;
    height: 6%;
    top: 74%;
    left: 19%;
    animation: clipart-truck-shadow 0.8s ease-in-out infinite alternate;
    -webkit-animation: clipart-truck-shadow 0.8s ease-in-out infinite alternate;
}

.account-no-delivery-panel .car-wheel-1,
.cargo-promo-page section.start .clipart-truck .car-wheel-1 {
    display: block;
    position: absolute;
    z-index: 5;
    width: 13%;
    height: 13%;
    top: 65.3%;
    left: 30%;
    animation: clipart-truck-wheel-transform 0.8s ease-in-out infinite alternate;
    -webkit-animation: clipart-truck-wheel-transform 0.8s ease-in-out infinite alternate;
}

    .account-no-delivery-panel .car-wheel-1 div,
    .account-no-delivery-panel .car-wheel-2 div,
    .cargo-promo-page section.start .clipart-truck .car-wheel-1 div,
    .cargo-promo-page section.start .clipart-truck .car-wheel-2 div {
        display: block;
        width: 100%;
        height: 100%;
        background: url("../../Content/Images/cargo-delivery/no-delivery/clipart/car-wheel.svg") center center no-repeat transparent;
        background-size: contain;
        animation: clipart-truck-wheel-rotating 0.15s linear infinite;
        -webkit-animation: clipart-truck-wheel-rotating 0.15s linear infinite;
    }

.account-no-delivery-panel .car-wheel-2,
.cargo-promo-page section.start .clipart-truck .car-wheel-2 {
    display: block;
    position: absolute;
    z-index: 5;
    width: 13%;
    height: 13%;
    top: 65.3%;
    left: 63.1%;
    animation: clipart-truck-wheel-transform 0.8s ease-in-out infinite alternate;
    -webkit-animation: clipart-truck-wheel-transform 0.8s ease-in-out infinite alternate;
}

.account-no-delivery-panel .car-body,
.cargo-promo-page section.start .clipart-truck .car-body {
    display: block;
    position: absolute;
    z-index: 4;
    background: url("../../Content/Images/cargo-delivery/no-delivery/clipart/car-body.svg") center center no-repeat transparent;
    background-size: contain;
    width: 56.5%;
    height: 32%;
    top: 43%;
    left: 24.5%;
    animation: clipart-truck-body 0.8s ease-in-out infinite alternate;
    -webkit-animation: clipart-truck-body 0.8s ease-in-out infinite alternate;
}

    .account-no-delivery-panel .car-body .inner,
    .cargo-promo-page section.start .clipart-truck .inner {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

.account-no-delivery-panel .car-window-glare,
.cargo-promo-page section.start .clipart-truck .car-window-glare {
    display: block;
    position: absolute;
    background: url("../../Content/Images/cargo-delivery/no-delivery/clipart/car-window-glare.svg") center center no-repeat transparent;
    background-size: contain;
    width: 9%;
    height: 27.5%;
    top: 13.1%;
    left: 64%;
    animation: clipart-truck-window 0.8s ease-in-out infinite alternate;
    -webkit-animation: clipart-truck-window 0.8s ease-in-out infinite alternate;
}

.account-no-delivery-panel .car-title {
    display: block;
    position: absolute;
    width: 54%;
    height: 19%;
    top: 30%;
    left: 6%;
    color: #FFFFFF;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
}

@keyframes clipart-truck-wheel-rotating {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes clipart-truck-wheel-rotating {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes clipart-truck-wheel-transform {
    from {
        transform: scale(1, 1);
        transform-origin: 100% 100%;
    }

    to {
        transform: scale(1, 0.9);
        transform-origin: 100% 100%;
    }
}

@-webkit-keyframes clipart-truck-wheel-transform {
    from {
        -webkit-transform: scale(1, 1);
        -webkit-transform-origin: 100% 100%;
    }

    to {
        -webkit-transform: scale(1, 0.9);
        -webkit-transform-origin: 100% 100%;
    }
}

@keyframes clipart-truck-body {
    from {
        transform: translateY(-1%);
    }

    to {
        transform: translateY(5%);
    }
}

@-webkit-keyframes clipart-truck-body {
    from {
        -webkit-transform: translateY(-1%);
    }

    to {
        -webkit-transform: translateY(5%);
    }
}

@keyframes clipart-truck-window {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(1.2);
    }
}

@-webkit-keyframes clipart-truck-window {
    from {
        -webkit-transform: scaleX(1);
    }

    to {
        -webkit-transform: scaleX(1.2);
    }
}

@keyframes clipart-truck-shadow {
    from {
        transform: scaleX(0.92);
        opacity: 0.5;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

@-webkit-keyframes clipart-truck-shadow {
    from {
        -webkit-transform: scaleX(0.92);
        opacity: 0.5;
    }

    to {
        -webkit-transform: scaleX(1);
        opacity: 1;
    }
}
/* #endregion Truck */
/* #region Clouds */
.account-no-delivery-panel .clipart-delivery-cloud-1 {
    display: block;
    position: absolute;
    background: url("../../Content/Images/cargo-delivery/no-delivery/clipart/object-cloud-1.svg") center center no-repeat transparent;
    background-size: contain;
    top: 19%;
    left: 7%;
    width: 27%;
    height: 13%;
    z-index: 2;
    opacity: 0;
    animation: clipart-delivery-cloud 9s linear infinite;
    -webkit-animation: clipart-delivery-cloud 9s linear infinite;
}

.account-no-delivery-panel .clipart-delivery-cloud-2 {
    display: block;
    position: absolute;
    background: url("../../Content/Images/cargo-delivery/no-delivery/clipart/object-cloud-2.svg") center center no-repeat transparent;
    background-size: contain;
    top: 11%;
    left: 41%;
    width: 30%;
    height: 11%;
    z-index: 2;
    opacity: 0;
    animation: clipart-delivery-cloud 9s linear 3s infinite;
    -webkit-animation: clipart-delivery-cloud 9s linear 3s infinite;
}

.account-no-delivery-panel .clipart-delivery-cloud-3 {
    display: block;
    position: absolute;
    background: url("../../Content/Images/cargo-delivery/no-delivery/clipart/object-cloud-3.svg") center center no-repeat transparent;
    background-size: contain;
    top: 23%;
    left: 41%;
    width: 20%;
    height: 12%;
    z-index: 2;
    opacity: 0;
    animation: clipart-delivery-cloud 9s linear 6s infinite;
    -webkit-animation: clipart-delivery-cloud 9s linear 6s infinite;
}

@keyframes clipart-delivery-cloud {
    0% {
        opacity: 0;
        left: auto;
        right: -30%;
    }

    20% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        left: auto;
        right: 100%;
    }
}

@-webkit-keyframes clipart-delivery-cloud {
    0% {
        opacity: 0;
        left: auto;
        right: -30%;
    }

    20% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        left: auto;
        right: 100%;
    }
}

/* #endregion Clouds */
/* #region Trees */
.account-no-delivery-panel .clipart-delivery-tree-1 {
    display: block;
    position: absolute;
    background: url("../../Content/Images/cargo-delivery/no-delivery/clipart/object-tree-1.svg") center center no-repeat transparent;
    background-size: contain;
    z-index: 3;
    opacity: 0;
    top: 31%;
    left: 87%;
    width: 21%;
    height: 40%;
    animation: clipart-delivery-tree 2.5s linear infinite;
    -webkit-animation: clipart-delivery-tree 2.5s linear infinite;
}

.account-no-delivery-panel .clipart-delivery-tree-2 {
    display: block;
    position: absolute;
    background: url("../../Content/Images/cargo-delivery/no-delivery/clipart/object-tree-2.svg") center center no-repeat transparent;
    background-size: contain;
    z-index: 3;
    opacity: 0;
    top: 33%;
    left: 87%;
    width: 21%;
    height: 38%;
    animation: clipart-delivery-tree 2.5s linear 1.25s infinite;
    -webkit-animation: clipart-delivery-tree 2.5s linear 1.25s infinite;
}

@keyframes clipart-delivery-tree {
    0% {
        opacity: 0;
        left: auto;
        right: -20%;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        left: auto;
        right: 90%;
    }
}

@-webkit-keyframes clipart-delivery-tree {
    0% {
        opacity: 0;
        left: auto;
        right: -20%;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        left: auto;
        right: 90%;
    }
}
/* #endregion Trees */
/* #region Pickets */
.account-no-delivery-panel .clipart-delivery-picket-1,
.account-no-delivery-panel .clipart-delivery-picket-2 {
    display: block;
    position: absolute;
    background: url("../../Content/Images/cargo-delivery/no-delivery/clipart/object-picket.svg") center center no-repeat transparent;
    background-size: contain;
    z-index: 6;
}

.account-no-delivery-panel .clipart-delivery-picket-1 {
    top: 78%;
    left: 90%;
    width: 7%;
    height: 9%;
    opacity: 0;
    animation: clipart-delivery-picket 0.8s linear infinite;
}

.account-no-delivery-panel .clipart-delivery-picket-2 {
    top: 78%;
    left: 90%;
    width: 7%;
    height: 9%;
    opacity: 0;
    animation: clipart-delivery-picket 0.8s linear 0.4s infinite;
}

@keyframes clipart-delivery-picket {
    0% {
        opacity: 0;
        left: auto;
        right: -10%;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        left: auto;
        right: 90%;
    }
}

/* #endregion Pickets */

@media (max-width: 992px) {
    .account-no-delivery-panel .description-block {
        width: 600px;
    }
}

@media (max-width: 900px) {
    .account-no-delivery-panel .clipart-container {
        width: 300px;
        height: 300px;
    }

    .account-no-delivery-panel .car-title {
        font-size: 16px;
    }
}

@media (max-width: 767px) {

    .account-no-delivery-panel {
        padding-left: 30px;
        padding-right: 30px;
    }

        .account-no-delivery-panel .clipart-container {
            width: 200px;
            height: 200px;
        }

        .account-no-delivery-panel .car-title {
            font-size: 10px;
        }

        .account-no-delivery-panel h2 {
            margin-top: 20px;
            margin-bottom: 0px;
            width: 100%;
        }

        .account-no-delivery-panel ul {
            width: 100%;
            padding: 20px 20px 20px 20px;
        }

        .account-no-delivery-panel .description-block {
            width: 100%;
        }
}

@media (max-width: 575px) {
    .account-no-delivery-panel {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 400px) {
    .account-no-delivery-panel {
        padding-left: 10px;
        padding-right: 10px;
    }

        .account-no-delivery-panel .clipart-container {
            width: 180px;
            height: 180px;
        }

        .account-no-delivery-panel .car-title {
            font-size: 8px;
        }

        .account-no-delivery-panel h2 {
            font-size: 20px;
            line-height: 22px;
        }
}
/* #endregion ============================== /Account: No Delivery =================================== */
/* #region =================================== Search No Results ===================================== */
.search-noresults-block {
    margin-top: 20px;
    margin-bottom: 150px;
}

    .search-noresults-block h2 {
        color: var(--color-text-muted);
        font-size: 30px;
        line-height: 32px;
        font-weight: 800;
        text-align: center;
        width: 700px;
        margin: 30px auto 0px auto;
        text-transform: uppercase;
    }

    .search-noresults-block p {
        width: 700px;
        margin: 10px auto 0px auto;
        text-align: center;
        font-size: 14px;
    }

        .search-noresults-block p button.btn-link {
            padding-left: 0px;
            padding-right: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
        }

    .search-noresults-block .clipart-block {
        display: block;
        width: 300px;
        height: 300px;
        margin: 0px auto 0px auto;
    }

        .search-noresults-block .clipart-block .inner {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
        }

    .search-noresults-block .clipart-cloud-1,
    .search-noresults-block .clipart-cloud-2,
    .search-noresults-block .clipart-cloud-3,
    .search-noresults-block .clipart-cloud-4,
    .search-noresults-block .clipart-cloud-5,
    .search-noresults-block .clipart-cloud-6,
    .search-noresults-block .clipart-cloud-7,
    .search-noresults-block .clipart-cloud-8,
    .search-noresults-block .clipart-cloud-9 {
        display: block;
        position: absolute;
        background-color: #EBEBEB;
        z-index: 1;
        border-radius: 50%;
    }

    .search-noresults-block .clipart-cloud-1 {
        width: 17%;
        height: 17%;
        top: 26%;
        left: 5%;
        animation: search-noresults-cloud-1 1.3s ease-in-out infinite alternate;
    }

    .search-noresults-block .clipart-cloud-2 {
        width: 30%;
        height: 30%;
        top: 14%;
        left: 14%;
        animation: search-noresults-cloud-2 1.7s ease-in-out infinite alternate;
    }

    .search-noresults-block .clipart-cloud-3 {
        width: 45%;
        height: 45%;
        top: 3%;
        left: 32%;
        animation: search-noresults-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .search-noresults-block .clipart-cloud-4 {
        width: 35%;
        height: 35%;
        top: 18%;
        left: 59%;
        animation: search-noresults-cloud-4 1.6s ease-in-out infinite alternate;
    }

    .search-noresults-block .clipart-cloud-5 {
        width: 20%;
        height: 20%;
        top: 40%;
        left: 79%;
        animation: search-noresults-cloud-5 1.3s ease-in-out infinite alternate;
    }

    .search-noresults-block .clipart-cloud-6 {
        width: 45%;
        height: 45%;
        top: 44%;
        left: 52%;
        animation: search-noresults-cloud-6 1.8s ease-in-out infinite alternate;
    }

    .search-noresults-block .clipart-cloud-7 {
        width: 40%;
        height: 40%;
        top: 59%;
        left: 25%;
        animation: search-noresults-cloud-7 1.4s ease-in-out infinite alternate;
    }

    .search-noresults-block .clipart-cloud-8 {
        width: 40%;
        height: 40%;
        top: 35%;
        left: 1%;
        animation: search-noresults-cloud-8 1.6s ease-in-out infinite alternate;
    }

    .search-noresults-block .clipart-cloud-9 {
        width: 50%;
        height: 50%;
        top: 23%;
        left: 26%;
    }

@keyframes search-noresults-cloud-1 {
    from {
        transform: translate(-10%, -10%);
    }

    to {
        transform: translate(10%, 10%);
    }
}

@keyframes search-noresults-cloud-2 {
    from {
        transform: translate(2%, 8%);
    }

    to {
        transform: translate(-2%, -8%);
    }
}

@keyframes search-noresults-cloud-3 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

@keyframes search-noresults-cloud-4 {
    from {
        transform: translate(-4%, 4%);
    }

    to {
        transform: translate(4%, -4%);
    }
}

@keyframes search-noresults-cloud-5 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

@keyframes search-noresults-cloud-6 {
    from {
        transform: translate(-7%, -7%);
    }

    to {
        transform: translate(7%, 7%);
    }
}

@keyframes search-noresults-cloud-7 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -15%);
    }
}

@keyframes search-noresults-cloud-8 {
    from {
        transform: translate(8%, -2%);
    }

    to {
        transform: translate(-8%, 2%);
    }
}

.search-noresults-block .clipart-search {
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/AdSearch/clipart-NoAds/clipart-search.svg') no-repeat center center transparent;
    background-size: contain;
    top: 26%;
    left: 25%;
    width: 65%;
    height: 65%;
    animation: search-noresults-search 2s ease-in-out infinite alternate;
}

@keyframes search-noresults-search {
    from {
        transform: translateY(-2%);
    }

    to {
        transform: translateY(2%);
    }
}

.search-noresults-block .clipart-microwave {
    display: block;
    position: absolute;
    width: 15%;
    height: 15%;
    top: 13%;
    left: 15%;
    z-index: 1;
    animation: search-noresults-zoom1 3s ease-in-out infinite alternate;
}

    .search-noresults-block .clipart-microwave > * > * {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-microwave.svg') no-repeat center center transparent;
        background-size: contain;
        animation: search-noresults-rotate1 3s ease-in-out infinite alternate;
    }

.search-noresults-block .clipart-smartphone {
    display: block;
    position: absolute;
    width: 13%;
    height: 13%;
    top: 52%;
    left: 7%;
    z-index: 1;
    animation: search-noresults-zoom2 3s ease-in-out infinite alternate;
}

    .search-noresults-block .clipart-smartphone > * > * {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-smartphone.svg') no-repeat center center transparent;
        background-size: contain;
        animation: search-noresults-rotate2 3s ease-in-out infinite alternate;
    }

.search-noresults-block .clipart-dress {
    display: block;
    position: absolute;
    width: 13%;
    height: 13%;
    top: 79%;
    left: 34%;
    z-index: 1;
    animation: search-noresults-zoom1 4s ease-in-out infinite alternate;
}

    .search-noresults-block .clipart-dress > * > * {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-dress.svg') no-repeat center center transparent;
        background-size: contain;
        animation: search-noresults-rotate1 4s ease-in-out infinite alternate;
    }

.search-noresults-block .clipart-drill {
    display: block;
    position: absolute;
    width: 9%;
    height: 9%;
    top: 55%;
    left: 77%;
    z-index: 1;
    animation: search-noresults-zoom2 4s ease-in-out infinite alternate;
}

    .search-noresults-block .clipart-drill > * > * {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-drill.svg') no-repeat center center transparent;
        background-size: contain;
        animation: search-noresults-rotate2 4s ease-in-out infinite alternate;
    }

.search-noresults-block .clipart-table {
    display: block;
    position: absolute;
    width: 9%;
    height: 9%;
    top: 26%;
    left: 74%;
    z-index: 1;
    animation: search-noresults-zoom1 2.5s ease-in-out infinite alternate;
}

    .search-noresults-block .clipart-table > * > * {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-table.svg') no-repeat center center transparent;
        background-size: contain;
        animation: search-noresults-rotate1 2.5s ease-in-out infinite alternate;
    }

.search-noresults-block .clipart-tshirt {
    display: block;
    position: absolute;
    width: 9%;
    height: 9%;
    top: 10%;
    left: 50%;
    z-index: 1;
    animation: search-noresults-zoom2 2.8s ease-in-out infinite alternate;
}

    .search-noresults-block .clipart-tshirt > * > * {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-tshirt.svg') no-repeat center center transparent;
        background-size: contain;
        animation: search-noresults-rotate2 2.8s ease-in-out infinite alternate;
    }

@keyframes search-noresults-zoom1 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes search-noresults-rotate1 {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(10deg);
    }

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

@keyframes search-noresults-zoom2 {
    0% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.3);
    }
}

@keyframes search-noresults-rotate2 {
    0% {
        transform: rotate(-20deg);
    }

    50% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(-20deg);
    }
}

@media (max-width: 991px) {
    .search-noresults-block .clipart-block {
        display: block;
        width: 250px;
        height: 250px;
        margin: 0px auto 0px auto;
    }

    .search-noresults-block h2 {
        width: 100%;
        font-size: 24px;
        line-height: 26px;
        margin-top: 10px;
    }

    .search-noresults-block p {
        width: 100%;
        line-height: 17px;
        margin-top: 10px;
    }
}

@media (max-width: 575px) {
    .search-noresults-block .clipart-block {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 400px) {
    .search-noresults-block h2 {
        width: 100%;
        font-size: 18px;
        line-height: 20px;
        margin: 10px auto 0px auto;
    }
}
/* #endregion =============================== /Search No Results ===================================== */
/* #region ===================================== Offer Create ======================================== */
/* #region ---------- How it works ----------- */
.howitworks .item {
    position: relative;
}

    .howitworks .item .clipart {
        display: block;
        width: 150px;
        height: 150px;
        margin: 0px auto;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: transparent;
    }

        .howitworks .item .clipart.clipart-map {
            background-image: url("../../Content/Images/cargo-delivery/offer-create/clipart-map.svg");
        }

        .howitworks .item .clipart.clipart-truck {
            background-image: url("../../Content/Images/cargo-delivery/offer-create/clipart-delivery-truck.svg");
        }

        .howitworks .item .clipart.clipart-person {
            background-image: url("../../Content/Images/cargo-delivery/offer-create/clipart-person.svg");
        }

    .howitworks .item *[class^='ci-pazar'] {
        position: absolute;
        top: 55px;
        left: auto;
        right: -14px;
        font-size: 32px;
    }

*[dir='rtl'] .howitworks .item *[class^='ci-pazar'] {
    left: -14px;
    right: auto;
    transform: rotateZ(180deg);
}

.modal .howitworks .item *[class^='ci-pazar'] {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
}

*[dir='rtl'] .modal .howitworks .item *[class^='ci-pazar'] {
    transform: none;
}

*[dir='rtl'] .btn-howitworks .ci-pazar {
    transform: none;
}

/* #endregion ------- How it works ----------- */
/* #region --------- Product Panel ----------- */
.panel.panel-product {
    position: relative;
    padding: 10px 0px 10px 0px;
}

    .panel.panel-product .image-block {
        display: block;
        width: 100%;
        float: none;
    }

*[dir='rtl'] .panel.panel-product .image-block {
    float: none;
}

.panel.panel-product .content-block {
    display: block;
    width: 100%;
    float: none;
    padding-left: 0px;
    padding-bottom: 70px;
}


*[dir='rtl'] .panel.panel-product .content-block {
    float: none;
    padding-left: 0px;
    padding-right: 0px;
}

.panel.panel-product .image-container {
    border-radius: var(--radius-4);
    width: 100%;
    height: 250px;
    background-color: #E7E7E7;
    position: relative;
    overflow: hidden;
}

.panel.panel-product h3 {
    font-size: 18px;
    color: var(--color-text-basic);
    font-weight: 400;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    word-break: break-word;
}


.panel.panel-product .statusbar {
    display: block;
    width: 100%;
    border-bottom: 0px none transparent;
    border-top: 1px solid #DDDDDD;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 10px;
}

    .panel.panel-product .statusbar span {
        display: block;
    }

        .panel.panel-product .statusbar span + span {
            padding-left: 0px;
        }

*[dir='rtl'] .panel.panel-product .statusbar span + span {
    padding-right: 0px;
    padding-left: 0px;
}

.panel.panel-product .image-container .ci-pazar {
    position: absolute;
    font-size: 144px;
    top: calc(50% - 72px);
    left: calc(50% - 72px);
    opacity: 0.1;
}

.panel.panel-product .image-container .image {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
}

.panel.panel-product .content-container {
    display: block;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

.panel.panel-product .price-block {
    border-top: 1px solid #DDDDDD;
    padding-top: 25px;
    font-size: 0px;
}

    .panel.panel-product .price-block .price-item {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .panel.panel-product .price-block .left-side {
        display: inline-block;
        font-size: 14px;
        width: 50%;
        text-align: left;
    }

*[dir='rtl'] .panel.panel-product .price-block .left-side {
    text-align: right;
}

.panel.panel-product .price-block .right-side {
    display: inline-block;
    font-size: 14px;
    width: 50%;
    text-align: right;
}

*[dir='rtl'] .panel.panel-product .price-block .right-side {
    text-align: left;
}

.panel.panel-product .price-block .price-item.total .left-side,
.panel.panel-product .price-block .price-item.total .right-side {
    font-size: 18px;
    font-weight: 700;
    padding-top: 20px;
}

.panel.panel-product .price-block .price-item bdi span + span {
    margin-left: 5px;
}

*[dir='rtl'] .panel.panel-product .price-block .price-item bdi span + span {
    margin-left: 5px;
    margin-right: 5px;
}

@media (max-width: 1199px) {
    .panel.panel-product {
        position: relative;
        padding: 10px;
        min-height: 0px;
    }

        .panel.panel-product .image-block {
            display: block;
            width: 20%;
            float: left;
        }

    *[dir='rtl'] .panel.panel-product .image-block {
        float: right;
    }

    .panel.panel-product .content-block {
        display: block;
        width: 80%;
        float: left;
        padding-left: 10px;
    }


    *[dir='rtl'] .panel.panel-product .content-block {
        float: right;
        padding-left: 0px;
        padding-right: 10px;
    }

    .panel.panel-product .image-container {
        border-radius: var(--radius-4);
        width: 100%;
        height: 210px;
        background-color: #E7E7E7;
        position: relative;
        overflow: hidden;
    }

    .panel.panel-product h3 {
        font-size: 18px;
        color: var(--color-text-basic);
        font-weight: 400;
        padding-top: 10px;
        padding-bottom: 5px;
        text-align: left;
    }

    *[dir='rtl'] .panel.panel-product h3 {
        text-align: right;
    }



    .panel.panel-product .statusbar {
        padding: 0px;
        display: block;
        width: 100%;
        border-bottom: 1px solid #DDDDDD;
        border-top: 0px none transparent;
        padding-bottom: 8px;
        position: relative;
    }

        .panel.panel-product .statusbar span {
            display: inline;
        }

            .panel.panel-product .statusbar span + span {
                padding-left: 30px;
            }

    *[dir='rtl'] .panel.panel-product .statusbar span + span {
        padding-right: 30px;
        padding-left: 0px;
    }

    .panel.panel-product .image-container .ci-pazar {
        font-size: 144px;
        top: calc(50% - 72px);
        left: calc(50% - 72px);
    }

    .panel.panel-product .price-block .left-side,
    .panel.panel-product .price-block .right-side {
        display: inline-block;
        font-size: 14px;
        width: auto;
        text-align: left;
    }

    .panel.panel-product .price-block .left-side {
        margin-right: 10px;
    }

    .panel.panel-product .price-block {
        padding-top: 10px;
        border-top: 0px none transparent;
    }

    .panel.panel-product .content-container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .panel.panel-product .price-block .price-item.total .left-side,
    .panel.panel-product .price-block .price-item.total .right-side {
        padding-top: 10px;
    }

    .panel.panel-product .content-block {
        padding-bottom: 0px;
    }

    .panel.panel-product .price-block .price-item {
        padding-left: 20px;
    }

    *[dir='rtl'] .panel.panel-product .price-block .price-item {
        padding-right: 20px;
        padding-left: 0px;
    }
}


/* #endregion ------ Product Panel ----------- */
/* #region ----------- Offer Panel ----------- */
.panel.panel-offer .panel-header {
    display: none;
    position: relative;
}

.panel.panel-offer .panel-content {
    display: block;
}

.panel.panel-offer.minimized .panel-header {
    display: block;
    min-height: 60px;
}

.panel.panel-offer.minimized .panel-content {
    display: none;
}

.panel.panel-offer {
    margin-bottom: 10px;
}


    .panel.panel-offer .preselected-info-block h4 {
        display: block;
        font-size: 24px;
        margin-bottom: 15px;
        font-weight: 400;
    }

    .panel.panel-offer .preselected-info-block p {
        display: block;
        font-size: 14px;
        margin-top: 5px;
        margin-bottom: 5px;
        font-weight: 400;
    }

    .panel.panel-offer .preselected-info-block a {
        display: inline-block;
        margin-top: 15px;
    }

    .panel.panel-offer .preselected-info-block .edit-preselected-part,
    .panel.panel-offer .total-price-block .edit-preselected-part {
        margin-top: 0px;
        font-size: 18px;
        font-weight: 400;
        text-decoration: none;
    }

        .panel.panel-offer .preselected-info-block .edit-preselected-part span,
        .panel.panel-offer .total-price-block .edit-preselected-part span {
            margin-right: 5px;
            vertical-align: middle;
        }

*[dir='rtl'] .panel.panel-offer .preselected-info-block .edit-preselected-part span,
*[dir='rtl'] .panel.panel-offer .total-price-block .edit-preselected-part span {
    margin-right: 0px;
    margin-left: 5px;
    vertical-align: middle;
}

.panel.panel-offer .preselected-info-block .edit-preselected-part i,
.panel.panel-offer .total-price-block .edit-preselected-part i {
    font-size: 20px;
    vertical-align: middle;
}

.panel.panel-offer .information-block {
    margin-top: 10px;
    margin-bottom: 30px;
}

.panel.panel-offer .user-price-block p {
    margin-bottom: 15px;
}

.panel.panel-offer .textbox-labeled.price {
    width: 45%;
}


.panel.panel-offer.new .textbox-labeled.price {
    width: 75%;
}



.panel.panel-offer .user-price-block .select {
    width: calc(25% - 5px);
}

.panel.panel-offer .user-price-block .select-button {
    width: 100%;
}



.panel.panel-offer .preselected-location {
    min-height: 230px;
}

.panel.panel-offer .panel-container {
    padding: 20px 30px 20px 30px;
}

.panel.panel-offer .btn-primary {
    min-width: 150px;
}

.panel.panel-offer .quickform-priceblock {
    display: none;
}

.panel.panel-offer .panel-header h3 {
    font-weight: 400;
    font-size: 18px;
    text-align: left;
    width: 100%;
    padding-left: 0px;
    white-space: nowrap;
    line-height: 21px;
    position: absolute;
    top: 20px;
    left: 30px;
}

    .panel.panel-offer .panel-header h3 .short-version {
        display: none;
    }

    .panel.panel-offer .panel-header h3 .long-version {
        display: inline-block;
    }

.panel.panel-offer .panel-header button {
    position: absolute;
    top: 9px;
    left: auto;
    right: 20px;
}

.panel.panel-offer .payment-method {
    margin-top: 20px;
    margin-bottom: 30px;
}

    .panel.panel-offer .payment-method i {
        font-size: 40px;
        display: inline-block;
        margin-right: 5px;
        vertical-align: middle;
    }

*[dir='rtl'] .panel.panel-offer .payment-method i {
    margin-left: 5px;
    margin-right: 0px;
}

.panel.panel-offer .payment-method span {
    vertical-align: middle;
}

*[dir='rtl'] .panel.panel-offer .panel-header h3 {
    text-align: right;
    padding-right: 0px;
    left: auto;
    right: 30px;
}

*[dir='rtl'] .panel.panel-offer .panel-header button {
    left: 20px;
    right: auto;
}


.panel.panel-offer .show-tooltip {
    display: inline-block;
    color: var(--color-text-basic) !important;
    border-radius: 50%;
    background-color: var(--color-bg-warning);
    font-size: 18px;
    font-weight: 500;
    width: 23px;
    height: 23px;
    padding: 3px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    margin-top: -4px;
}

.panel.panel-offer .panel-header .tooltip-block {
    top: 50px;
    max-width: 300px;
}

.warning-icon {
    display: inline-block;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background-color: var(--color-bg-warning);
    color: var(--color-text-basic);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    line-height: 18px;
    padding-top: 2px;
}

.global-warning td:first-child {
    width: 30px;
    text-align: left;
}

*[dir='rtl'] .global-warning td:first-child {
    width: 30px;
    text-align: right;
}


.global-warning td:last-child {
    text-align: left;
    color: var(--color-text-muted);
    line-height: 16px;
}

.global-warning td {
    vertical-align: middle;
}

*[dir='rtl'] .global-warning td:last-child {
    text-align: right;
}

.panel.panel-offer .collapse-btn {
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    background-color: #E7E7E7;
    padding: 5px;
    margin-left: 5px;
    margin-right: 5px;
}

.panel.panel-offer .collapse-content {
    padding: 20px;
    background-color: #E7E7E7;
    border-radius: var(--radius-4);
}

.panel.panel-offer .coordinates-block {
    display: block;
    width: 100%;
    font-size: 0px;
    padding-bottom: 10px;
}

    .panel.panel-offer .coordinates-block > *:first-child {
        display: inline-block;
        width: 60%;
        font-size: 14px;
        vertical-align: middle;
    }

    .panel.panel-offer .coordinates-block > *:last-child {
        display: inline-block;
        width: 40%;
        font-size: 14px;
        text-align: center;
        vertical-align: middle;
    }

        .panel.panel-offer .coordinates-block > *:last-child .new-btn {
            text-transform: uppercase;
            text-decoration: none;
        }

            .panel.panel-offer .coordinates-block > *:last-child .new-btn .ci-pazar {
                font-size: 32px;
                top: calc(50% - 16px);
                left: 0px;
            }

*[dir='rtl'] .panel.panel-offer .coordinates-block > *:last-child .new-btn .ci-pazar {
    right: 0px;
    left: auto;
}


.panel.panel-offer .address-location-block {
    display: block;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0px;
}

    .panel.panel-offer .address-location-block .left-side {
        display: inline-block;
        width: 50%;
        font-size: 14px;
        vertical-align: top;
        position: relative;
        text-align: center;
        border-right: 1px solid #DDDDDD;
    }

    .panel.panel-offer .address-location-block .right-side {
        display: inline-block;
        width: 50%;
        font-size: 14px;
        vertical-align: top;
        position: relative;
        text-align: center;
    }

        .panel.panel-offer .address-location-block .right-side .divider {
            display: inline-block;
            padding-bottom: 5px;
            padding-top: 5px;
            width: 40px;
            position: absolute;
            text-align: center;
            top: calc(50% - 14px);
            left: -6%;
            z-index: 1;
            background-color: #F2F2F2;
        }

        .panel.panel-offer .address-location-block .right-side .new-btn,
        .panel.panel-offer .address-location-block .left-side .new-btn {
            text-transform: uppercase;
            text-decoration: none;
        }

            .panel.panel-offer .address-location-block .right-side .new-btn .ci-pazar,
            .panel.panel-offer .address-location-block .left-side .new-btn .ci-pazar {
                font-size: 26px;
                top: calc(50% - 13px);
                left: 0px;
            }

*[dir='rtl'] .panel.panel-offer .address-location-block .right-side .new-btn .ci-pazar,
*[dir='rtl'] .panel.panel-offer .address-location-block .left-side .new-btn .ci-pazar {
    right: 0px;
    top: calc(50% - 15px);
    left: auto;
}

*[dir='rtl'] .panel.panel-offer .address-location-block .left-side {
    border-right: 0px none transparent;
    border-left: 1px solid #DDDDDD;
}

*[dir='rtl'] .panel.panel-offer .address-location-block .right-side .divider {
    left: auto;
    right: -6%;
}

.panel.panel-offer .address-location-block .address {
    font-size: 18px;
    text-align: left;
    padding-right: 20px;
}

*[dir='rtl'] .panel.panel-offer .address-location-block .address {
    text-align: right;
    padding-right: 0px;
    padding-left: 20px;
}

.panel.panel-offer .address-location-block .address-title {
    text-align: left;
    padding-right: 20px;
    margin-bottom: 10px;
}

*[dir='rtl'] .panel.panel-offer .address-location-block .address-title {
    text-align: right;
    padding-right: 0px;
    padding-left: 20px;
}


.panel.panel-offer .price-item {
    margin-bottom: 5px;
}

    .panel.panel-offer .price-item bdi span + span {
        padding-left: 5px;
    }

*[dir='rtl'] .panel.panel-offer .price-item bdi span + span {
    padding-left: 5px;
    padding-right: 5px;
}


.panel.panel-offer .btn-select-location,
.panel.panel-offer .btn-saved-addresses,
.modal.edit-delivery-info .btn-select-location,
.modal.edit-delivery-info .btn-saved-addresses {
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    margin-top: 10px;
}

.panel.panel-offer .btn-saved-addresses,
.modal.edit-delivery-info .btn-saved-addresses {
    padding-left: 40px;
    padding-right: 0px;
}

*[dir='rtl'] .panel.panel-offer .btn-saved-addresses,
*[dir='rtl'] .modal.edit-delivery-info .btn-saved-addresses {
    padding-left: 0px;
    padding-right: 40px;
}

.panel.panel-offer .btn-select-location .ci-pazar,
.panel.panel-offer .btn-saved-addresses .ci-pazar,
.modal.edit-delivery-info .btn-select-location .ci-pazar,
.modal.edit-delivery-info .btn-saved-addresses .ci-pazar {
    font-size: 32px;
    left: 0px;
    top: calc(50% - 16px);
}

*[dir='rtl'] .panel.panel-offer .btn-select-location .ci-pazar,
*[dir='rtl'] .panel.panel-offer .btn-saved-addresses .ci-pazar,
*[dir='rtl'] .modal.edit-delivery-info .btn-select-location .ci-pazar,
*[dir='rtl'] .modal.edit-delivery-info .btn-saved-addresses .ci-pazar {
    font-size: 32px;
    left: auto;
    right: 0px;
    top: calc(50% - 16px);
}

.panel.panel-offer .selected-location {
    height: 300px;
    margin-top: 25px;
}

.panel.panel-offer .select .add-new-card {
    padding: 20px 0px 20px 0px;
    text-align: center;
    font-weight: 700 !important;
    text-transform: uppercase;
    color: var(--color-text-primary) !important;
}

.panel.panel-offer .manage-cards {
    text-align: left;
}

    .panel.panel-offer .manage-cards a {
        padding-left: 0px;
        padding-right: 0px;
    }

*[dir='rtl'] .panel.panel-offer .manage-cards {
    text-align: right;
}

@media (max-width: 1199px) {
    .panel.panel-offer .address-location-block .right-side .divider {
        left: -5%;
    }

    *[dir='rtl'] .panel.panel-offer .address-location-block .right-side .divider {
        left: auto;
        right: -5%;
    }
}

@media (max-width: 991px) {
    .panel.panel-offer .coordinates-block > *:first-child {
        width: 50%;
    }

    .panel.panel-offer .coordinates-block > *:last-child {
        width: 50%;
    }

    .panel.panel-offer .address-location-block .right-side .divider {
        left: -6%;
    }

    *[dir='rtl'] .panel.panel-offer .address-location-block .right-side .divider {
        left: auto;
        right: -6%;
    }
}

@media (max-width: 767px) {

    .panel.panel-offer .preselected-info-block {
        margin-bottom: 0px;
    }

    .panel.panel-offer .quickform-priceblock {
        display: block;
    }

    .panel.panel-offer .textbox-labeled.price {
        width: calc(70% - 10px);
    }

    .panel.panel-offer.new .textbox-labeled.price {
        width: calc(70% - 10px);
    }

    .panel.panel-offer .user-price-block .select {
        width: 30%;
    }

    .panel.panel-offer .panel-container {
        padding: 20px 20px 20px 20px;
    }

    .panel.panel-offer .panel-header h3 {
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        top: 20px;
        left: 20px;
    }

    *[dir='rtl'] .panel.panel-offer .panel-header h3 {
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        top: 20px;
        right: 20px;
        left: auto;
    }

    .panel.panel-offer .panel-header button {
        right: 12px;
    }

    *[dir='rtl'] .panel.panel-offer .panel-header button {
        left: 12px;
        right: auto;
    }

    .panel.panel-offer .coordinates-block > *:first-child {
        width: 100%;
        display: block;
    }

    .panel.panel-offer .coordinates-block > *:last-child {
        display: block;
        width: 100%;
        text-align: left;
        margin-top: 30px;
    }

    *[dir='rtl'] .panel.panel-offer .coordinates-block > *:last-child {
        text-align: right;
    }

    .panel.panel-offer .address-location-block .left-side,
    .panel.panel-offer .address-location-block .right-side,
    *[dir='rtl'] .panel.panel-offer .address-location-block .left-side,
    *[dir='rtl'] .panel.panel-offer .address-location-block .right-side {
        display: block;
        width: 100%;
        padding-top: 0px;
        padding-bottom: 0px;
        border-right: 0px none transparent;
        border-left: 0px none transparent;
    }

    .panel.panel-offer .address-location-block .left-side,
    *[dir='rtl'] .panel.panel-offer .address-location-block .left-side {
        border-bottom: 1px solid #DDDDDD;
        padding-bottom: 40px;
    }

    .panel.panel-offer .address-location-block .right-side,
    *[dir='rtl'] .panel.panel-offer .address-location-block .right-side {
        padding-top: 40px;
    }

        .panel.panel-offer .address-location-block .right-side .divider {
            top: -14px;
            left: calc(50% - 20px);
        }

        *[dir='rtl'] .panel.panel-offer .address-location-block .right-side .divider {
            right: calc(50% - 20px);
            left: auto;
        }

    .panel.panel-offer .btn-select-location .ci-pazar {
        left: -4px;
    }

    .panel.panel-offer .btn-saved-addresses,
    .modal.edit-delivery-info .btn-saved-addresses {
        margin-top: 5px;
        padding-left: 33px;
        padding-right: 0px;
    }

        .panel.panel-offer .btn-saved-addresses .ci-pazar,
        .modal.edit-delivery-info .btn-saved-addresses .ci-pazar {
            font-size: 26px;
            top: calc(50% - 13px);
            left: 3px;
        }

    *[dir='rtl'] .panel.panel-offer .btn-saved-addresses,
    *[dir='rtl'] .modal.edit-delivery-info .btn-saved-addresses {
        margin-top: 5px;
        padding-left: 0px;
        padding-right: 33px;
    }

        *[dir='rtl'] .panel.panel-offer .btn-saved-addresses .ci-pazar,
        *[dir='rtl'] .modal.edit-delivery-info .btn-saved-addresses .ci-pazar {
            font-size: 26px;
            top: calc(50% - 13px);
            left: auto;
            right: 3px;
        }
}

@media (max-width: 575px) {
    .panel.panel-offer .preselected-info-block p,
    .panel.panel-offer .preselected-info-block h4,
    .panel.panel-offer .preselected-info-block a {
        text-align: left;
        display: inherit;
    }

    *[dir='rtl'] .panel.panel-offer .preselected-info-block p,
    *[dir='rtl'] .panel.panel-offer .preselected-info-block h4,
    *[dir='rtl'] .panel.panel-offer .preselected-info-block a {
        text-align: right;
        display: inherit;
    }
}

@media (max-width: 500px) {
    .panel.panel-offer .panel-header h3 .short-version {
        display: inline-block;
    }

    .panel.panel-offer .panel-header h3 .long-version {
        display: none;
    }

    .panel.panel-offer .textbox-labeled.price {
        width: calc(60% - 10px);
    }

    .panel.panel-offer.new .textbox-labeled.price {
        width: calc(60% - 10px);
    }

    .panel.panel-offer .user-price-block .select {
        width: 40%;
    }
}


@media (max-width: 321px) {


    .panel.panel-offer .panel-container {
        padding: 10px 10px 10px 10px;
    }

    .panel.panel-offer .panel-header h3 {
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        top: 20px;
        left: 10px;
    }

    *[dir='rtl'] .panel.panel-offer .panel-header h3 {
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        top: 20px;
        right: 10px;
        left: auto;
    }

    .panel.panel-offer .panel-header button {
        right: 5px;
    }

    *[dir='rtl'] .panel.panel-offer .panel-header button {
        left: 5px;
        right: auto;
    }
}

/* #endregion ------- Offer Panel ----------- */
/* #region ------ Offer Congratulations ----- */
.offer-congratulations-page h3 {
    display: inline-block;
    padding: 5px;
    color: var(--color-text-primary);
    background-color: #E6F4ED;
    font-weight: 700;
    text-align: center;
    font-size: 36px;
    border-radius: 50%;
    width: 53px;
    height: 53px;
    margin-top: 40px;
    margin-bottom: 30px;
}

.offer-congratulations-page h4 {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 18px;
}

.offer-congratulations-page .new-btn {
    min-width: 200px;
}

.offer-congratulations-page .banner-panel {
    display: block;
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #F4F4F4;
    position: relative;
    height: 350px;
    margin-top: 30px;
    overflow: hidden;
}

    .offer-congratulations-page .banner-panel h2 {
        display: block;
        text-align: center;
        text-transform: uppercase;
        color: var(--color-text-primary);
        font-size: 48px;
        font-weight: 700;
        width: 100%;
        margin-bottom: 30px;
        position: absolute;
        z-index: 1;
        top: 26%;
    }

    .offer-congratulations-page .banner-panel .description {
        display: block;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        position: absolute;
        z-index: 1;
        top: calc(50% + 20px);
        left: 0px;
    }

    .offer-congratulations-page .banner-panel p {
        display: block;
        text-align: center;
        font-size: 18px;
        font-weight: 700;
        width: 100%;
        top: 34%;
    }

.offer-congratulations-page .cloud-block {
    display: block;
    width: 350px;
    height: 350px;
    margin: 0px auto;
    z-index: 1;
}

.offer-congratulations-page .banner-panel .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.offer-congratulations-page .cloud-1,
.offer-congratulations-page .cloud-2,
.offer-congratulations-page .cloud-3,
.offer-congratulations-page .cloud-4,
.offer-congratulations-page .cloud-5,
.offer-congratulations-page .cloud-6,
.offer-congratulations-page .cloud-7,
.offer-congratulations-page .cloud-8,
.offer-congratulations-page .cloud-9,
.offer-congratulations-page .cloud-10 {
    display: block;
    border-radius: 50%;
    background-color: #FFFFFF;
    z-index: 1;
    position: absolute;
}

.offer-congratulations-page .cloud-1 {
    width: 56%;
    height: 56%;
    left: 21%;
    top: 22%;
}

.offer-congratulations-page .cloud-2 {
    width: 43%;
    height: 43%;
    left: 7%;
    top: 7%;
    -webkit-animation: congratulations-cloud-2 1.3s ease-in-out alternate infinite;
    animation: congratulations-cloud-2 1.3s ease-in-out alternate infinite;
}

.offer-congratulations-page .cloud-3 {
    width: 26%;
    height: 26%;
    left: 42%;
    top: 3%;
    -webkit-animation: congratulations-cloud-3 1.6s ease-in-out alternate infinite;
    animation: congratulations-cloud-3 1.6s ease-in-out alternate infinite;
}

.offer-congratulations-page .cloud-4 {
    width: 20%;
    height: 20%;
    left: 58%;
    top: 19%;
    -webkit-animation: congratulations-cloud-4 1.2s ease-in-out alternate infinite;
    animation: congratulations-cloud-4 1.2s ease-in-out alternate infinite;
}

.offer-congratulations-page .cloud-5 {
    width: 26%;
    height: 26%;
    left: 68%;
    top: 25%;
    -webkit-animation: congratulations-cloud-5 1.4s ease-in-out alternate infinite;
    animation: congratulations-cloud-5 1.4s ease-in-out alternate infinite;
}

.offer-congratulations-page .cloud-6 {
    width: 43%;
    height: 43%;
    left: 53%;
    top: 40%;
    -webkit-animation: congratulations-cloud-6 1.8s ease-in-out alternate infinite;
    animation: congratulations-cloud-6 1.8s ease-in-out alternate infinite;
}

.offer-congratulations-page .cloud-7 {
    width: 19%;
    height: 19%;
    left: 66%;
    top: 71%;
    -webkit-animation: congratulations-cloud-7 1.3s ease-in-out alternate infinite;
    animation: congratulations-cloud-7 1.3s ease-in-out alternate infinite;
}

.offer-congratulations-page .cloud-8 {
    width: 19%;
    height: 19%;
    left: 51%;
    top: 68%;
    -webkit-animation: congratulations-cloud-8 1.3s ease-in-out alternate infinite;
    animation: congratulations-cloud-8 1.3s ease-in-out alternate infinite;
}

.offer-congratulations-page .cloud-9 {
    width: 42%;
    height: 42%;
    left: 15%;
    top: 55%;
    -webkit-animation: congratulations-cloud-9 1.8s ease-in-out alternate infinite;
    animation: congratulations-cloud-9 1.8s ease-in-out alternate infinite;
}

.offer-congratulations-page .cloud-10 {
    width: 34%;
    height: 34%;
    left: 4%;
    top: 40%;
    -webkit-animation: congratulations-cloud-10 1.5s ease-in-out alternate infinite;
    animation: congratulations-cloud-10 1.5s ease-in-out alternate infinite;
}

@keyframes congratulations-cloud-2 {
    from {
        transform: translate(-3%, -4%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@-webkit-keyframes congratulations-cloud-2 {
    from {
        -webkit-transform: translate(-3%, -4%);
    }

    to {
        -webkit-transform: translate(5%, 5%);
    }
}

@keyframes congratulations-cloud-3 {
    from {
        transform: translate(0%, 7%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@-webkit-keyframes congratulations-cloud-3 {
    from {
        -webkit-transform: translate(0%, 7%);
    }

    to {
        -webkit-transform: translate(0%, -5%);
    }
}

@keyframes congratulations-cloud-4 {
    from {
        transform: translate(4%, -7%);
    }

    to {
        transform: translate(-4%, 5%);
    }
}

@-webkit-keyframes congratulations-cloud-4 {
    from {
        -webkit-transform: translate(4%, -7%);
    }

    to {
        -webkit-transform: translate(-4%, 5%);
    }
}

@keyframes congratulations-cloud-5 {
    from {
        transform: translate(-8%, 3%);
    }

    to {
        transform: translate(8%, -3%);
    }
}

@-webkit-keyframes congratulations-cloud-5 {
    from {
        -webkit-transform: translate(-8%, 3%);
    }

    to {
        -webkit-transform: translate(8%, -3%);
    }
}

@keyframes congratulations-cloud-6 {
    from {
        transform: translate(6%, -1%);
    }

    to {
        transform: translate(-6%, 1%);
    }
}

@-webkit-keyframes congratulations-cloud-6 {
    from {
        -webkit-transform: translate(6%, -1%);
    }

    to {
        -webkit-transform: translate(-6%, 1%);
    }
}

@keyframes congratulations-cloud-7 {
    from {
        transform: translate(6%, 4%);
    }

    to {
        transform: translate(-6%, -5%);
    }
}

@-webkit-keyframes congratulations-cloud-7 {
    from {
        -webkit-transform: translate(6%, 4%);
    }

    to {
        -webkit-transform: translate(-6%, -5%);
    }
}

@keyframes congratulations-cloud-8 {
    from {
        transform: translate(0%, -10%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

@-webkit-keyframes congratulations-cloud-8 {
    from {
        -webkit-transform: translate(0%, -10%);
    }

    to {
        -webkit-transform: translate(0%, 8%);
    }
}

@keyframes congratulations-cloud-9 {
    from {
        transform: translate(1%, 5%);
    }

    to {
        transform: translate(-1%, -8%);
    }
}

@-webkit-keyframes congratulations-cloud-9 {
    from {
        -webkit-transform: translate(1%, 5%);
    }

    to {
        -webkit-transform: translate(-1%, -8%);
    }
}

@keyframes congratulations-cloud-10 {
    from {
        transform: translate(4%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

@-webkit-keyframes congratulations-cloud-10 {
    from {
        -webkit-transform: translate(4%, 0%);
    }

    to {
        -webkit-transform: translate(-6%, 0%);
    }
}

.goods-item {
    display: block;
    position: absolute;
    z-index: 1;
}

    .goods-item > * {
        display: block;
        width: 100%;
        height: 100%;
        background-position: center center;
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .goods-item.item-1 {
        width: 72px;
        height: 72px;
        top: 10%;
        right: 0px;
        -webkit-animation: offer-congratulations-move-1 10s linear infinite;
        animation: offer-congratulations-move-1 10s linear infinite;
    }

        .goods-item.item-1 > * {
            background-image: url("../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-carriage.svg");
            -webkit-animation: offer-congratulations-rotation1 5s linear infinite;
            animation: offer-congratulations-rotation1 5s linear infinite;
        }

    .goods-item.item-2 {
        width: 72px;
        height: 72px;
        top: 40%;
        right: 0px;
        -webkit-animation: offer-congratulations-move-2 17s linear infinite;
        animation: offer-congratulations-move-2 17s linear infinite;
    }

        .goods-item.item-2 > * {
            background-image: url("../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-dress.svg");
            -webkit-animation: offer-congratulations-rotation1 6s linear infinite;
            animation: offer-congratulations-rotation1 6s linear infinite;
        }

    .goods-item.item-3 {
        width: 72px;
        height: 72px;
        top: 60%;
        right: 0px;
        -webkit-animation: offer-congratulations-move-3 20s linear infinite;
        animation: offer-congratulations-move-3 20s linear infinite;
    }

        .goods-item.item-3 > * {
            background-image: url("../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-drill.svg");
            -webkit-animation: offer-congratulations-rotation4 4s linear infinite;
            animation: offer-congratulations-rotation4 4s linear infinite;
        }

    .goods-item.item-4 {
        width: 72px;
        height: 72px;
        top: 10%;
        right: 0px;
        -webkit-animation: offer-congratulations-move-3 30s linear infinite;
        animation: offer-congratulations-move-3 30s linear infinite;
    }

        .goods-item.item-4 > * {
            background-image: url("../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-microwave.svg");
            -webkit-animation: offer-congratulations-rotation2 5s linear infinite;
            animation: offer-congratulations-rotation2 5s linear infinite;
        }

    .goods-item.item-5 {
        width: 72px;
        height: 72px;
        top: 70%;
        right: 0px;
        -webkit-animation: offer-congratulations-move-1 15s linear infinite;
        animation: offer-congratulations-move-1 15s linear infinite;
    }

        .goods-item.item-5 > * {
            background-image: url("../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-pumps.svg");
            -webkit-animation: offer-congratulations-rotation1 5s linear infinite;
            animation: offer-congratulations-rotation1 5s linear infinite;
        }

    .goods-item.item-6 {
        width: 72px;
        height: 72px;
        top: 30%;
        right: 0px;
        -webkit-animation: offer-congratulations-move-2 25s linear infinite;
        animation: offer-congratulations-move-2 25s linear infinite;
    }

        .goods-item.item-6 > * {
            background-image: url("../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-scooter.svg");
            -webkit-animation: offer-congratulations-rotation3 6s linear infinite;
            animation: offer-congratulations-rotation3 6s linear infinite;
        }

    .goods-item.item-7 {
        width: 72px;
        height: 72px;
        top: 10%;
        right: 0px;
        -webkit-animation: offer-congratulations-move-4 15s linear infinite;
        animation: offer-congratulations-move-4 15s linear infinite;
    }

        .goods-item.item-7 > * {
            background-image: url("../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-smartphone.svg");
            -webkit-animation: offer-congratulations-rotation1 3s linear infinite;
            animation: offer-congratulations-rotation1 3s linear infinite;
        }

    .goods-item.item-8 {
        width: 72px;
        height: 72px;
        top: 75%;
        right: 0px;
        -webkit-animation: offer-congratulations-move-5 25s linear infinite;
        animation: offer-congratulations-move-5 25s linear infinite;
    }

        .goods-item.item-8 > * {
            background-image: url("../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-sneakers.svg");
            -webkit-animation: offer-congratulations-rotation1 5s linear infinite;
            animation: offer-congratulations-rotation1 5s linear infinite;
        }

    .goods-item.item-9 {
        width: 72px;
        height: 72px;
        top: 40%;
        right: 0px;
        -webkit-animation: offer-congratulations-move-5 30s linear infinite;
        animation: offer-congratulations-move-5 30s linear infinite;
    }

        .goods-item.item-9 > * {
            background-image: url("../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-table.svg");
            -webkit-animation: offer-congratulations-rotation2 5s linear infinite;
            animation: offer-congratulations-rotation2 5s linear infinite;
        }

    .goods-item.item-10 {
        width: 72px;
        height: 72px;
        top: 70%;
        right: -120%;
        -webkit-animation: offer-congratulations-move-5 20s linear 10s infinite;
        animation: offer-congratulations-move-5 20s linear 5s infinite;
    }

        .goods-item.item-10 > * {
            background-image: url("../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-tshirt.svg");
            -webkit-animation: offer-congratulations-rotation2 7s linear infinite;
            animation: offer-congratulations-rotation2 7s linear infinite;
        }

/* #region Rotation */
@keyframes offer-congratulations-rotation1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes offer-congratulations-rotation1 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-360deg);
    }
}

@keyframes offer-congratulations-rotation2 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes offer-congratulations-rotation2 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes offer-congratulations-rotation3 {
    from {
        transform: rotate(0deg);
        transform-origin: 20% 60%;
    }

    to {
        transform: rotate(-360deg);
        transform-origin: 20% 60%;
    }
}

@-webkit-keyframes offer-congratulations-rotation3 {
    from {
        -webkit-transform: rotate(0deg);
        -webkit-transform-origin: 20% 60%;
    }

    to {
        -webkit-transform: rotate(-360deg);
        -webkit-transform-origin: 20% 60%;
    }
}

@keyframes offer-congratulations-rotation4 {
    from {
        transform: rotate(0deg);
        transform-origin: 70% 40%;
    }

    to {
        transform: rotate(-360deg);
        transform-origin: 70% 40%;
    }
}

@-webkit-keyframes offer-congratulations-rotation4 {
    from {
        -webkit-transform: rotate(0deg);
        -webkit-transform-origin: 70% 40%;
    }

    to {
        -webkit-transform: rotate(-360deg);
        -webkit-transform-origin: 70% 40%;
    }
}
/* #endregion Rotation */
/* #region Moving */
@keyframes offer-congratulations-move-1 {
    0% {
        opacity: 0;
        right: -10%;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        right: 110%;
    }
}

@-webkit-keyframes offer-congratulations-move-1 {
    0% {
        opacity: 0;
        right: -10%;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        right: 110%;
    }
}

@keyframes offer-congratulations-move-2 {
    0% {
        opacity: 0;
        right: -20%;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        right: 120%;
    }
}

@-webkit-keyframes offer-congratulations-move-2 {
    0% {
        opacity: 0;
        right: -20%;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        right: 120%;
    }
}

@keyframes offer-congratulations-move-3 {
    0% {
        opacity: 0;
        right: -24%;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        right: 124%;
    }
}

@-webkit-keyframes offer-congratulations-move-3 {
    0% {
        opacity: 0;
        right: -24%;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        right: 124%;
    }
}

@keyframes offer-congratulations-move-4 {
    0% {
        opacity: 0;
        right: -24%;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        right: 124%;
    }
}

@-webkit-keyframes offer-congratulations-move-4 {
    0% {
        opacity: 0;
        right: -24%;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        right: 124%;
    }
}

@keyframes offer-congratulations-move-5 {
    0% {
        opacity: 0;
        right: -40%;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        right: 120%;
    }
}

@-webkit-keyframes offer-congratulations-move-5 {
    0% {
        opacity: 0;
        right: -40%;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
        right: 120%;
    }
}
/* #endregion Moving */

@media(max-width: 767px) {
    .offer-congratulations-page .banner-panel {
        margin-bottom: 30px;
    }

        .offer-congratulations-page .banner-panel h2 {
            display: block;
            text-align: center;
            text-transform: uppercase;
            color: var(--color-text-primary);
            font-size: 36px;
            font-weight: 700;
            width: 100%;
            margin-bottom: 30px;
            position: absolute;
            z-index: 20;
            top: 26%;
        }

        .offer-congratulations-page .banner-panel h2 {
            top: 33%;
        }

    .offer-congratulations-page .col-xs-12 {
        position: relative;
    }

        .offer-congratulations-page .col-xs-12 h3 {
            position: absolute;
            top: 0px;
            left: 13px;
            margin: 0px;
        }

    *[dir='rtl'] .offer-congratulations-page .col-xs-12 h3 {
        left: auto;
        right: 13px;
    }

    .offer-congratulations-page .col-xs-12 h4 {
        text-align: left;
        margin-bottom: 10px;
        padding-left: 64px;
    }

    *[dir='rtl'] .offer-congratulations-page .col-xs-12 h4 {
        text-align: right;
        padding-left: 0px;
        padding-right: 64px;
    }

    .offer-congratulations-page .col-xs-12 p {
        text-align: left;
        padding-left: 64px;
        margin-bottom: 40px;
    }

    *[dir='rtl'] .offer-congratulations-page .col-xs-12 p {
        text-align: right;
        padding-left: 0px;
        padding-right: 64px;
    }
}

@media (max-width: 575px) {
    .offer-congratulations-page .banner-panel {
        height: 250px;
    }

        .offer-congratulations-page .banner-panel h2 {
            font-size: 28px;
            top: 33%;
        }

        .offer-congratulations-page .banner-panel .description {
            top: calc(50% + 10px);
        }

        .offer-congratulations-page .banner-panel p {
            font-size: 14px;
        }

        .offer-congratulations-page .banner-panel .goods-item {
            display: none;
        }

        .offer-congratulations-page .banner-panel .cloud-block {
            width: 250px;
            height: 250px;
        }
}

@media (max-width: 450px) {
    .offer-congratulations-page .banner-panel {
        height: 150px;
    }

        .offer-congratulations-page .banner-panel .cloud-block {
            width: 150px;
            height: 150px;
        }

        .offer-congratulations-page .banner-panel h2 {
            font-size: 20px;
            top: 30%;
        }

        .offer-congratulations-page .banner-panel .description {
            top: 51%;
        }

    .offer-congratulations-page .col-xs-12 h3 {
        font-size: 26px;
        width: 43px;
        height: 43px;
    }

    .offer-congratulations-page .col-xs-12 h4,
    .offer-congratulations-page .col-xs-12 p {
        padding-left: 52px;
    }

    *[dir='rtl'] .offer-congratulations-page .col-xs-12 h4,
    *[dir='rtl'] .offer-congratulations-page .col-xs-12 p {
        padding-left: 0px;
        padding-right: 52px;
    }
}

@media (max-width: 320px) {
    .offer-congratulations-page .col-xs-12 h3 {
        font-size: 18px;
        width: 30px;
        height: 30px;
    }

    .offer-congratulations-page .col-xs-12 h4,
    .offer-congratulations-page .col-xs-12 p {
        padding-left: 38px;
    }

    *[dir='rtl'] .offer-congratulations-page .col-xs-12 h4,
    *[dir='rtl'] .offer-congratulations-page .col-xs-12 p {
        padding-left: 0px;
        padding-right: 38px;
    }
}
/* #endregion --/ Offer Congratulations ----- */
/* #region --------- Offer Success ----------- */
.offer-create-success-page h2 {
    display: block;
    width: 380px;
    margin: 0px auto;
    font-size: 30px;
    line-height: 32px;
    font-weight: 800;
    color: var(--color-text-primary);
    text-transform: uppercase;
    text-align: center;
}

.offer-create-success-page .description-block {
    display: block;
    width: 700px;
    margin: 40px auto 100px auto;
}

    .offer-create-success-page .description-block .divider-horizontal {
        background-color: #f2f2f2;
    }

.offer-create-success-page .pazar-list {
    padding: 30px;
}

.offer-create-success-page .clipart-block {
    display: block;
    width: 250px;
    height: 250px;
    margin: 40px auto 40px auto;
}

    .offer-create-success-page .clipart-block .inner {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

.offer-create-success-page .clipart-cloud-1,
.offer-create-success-page .clipart-cloud-2,
.offer-create-success-page .clipart-cloud-3,
.offer-create-success-page .clipart-cloud-4,
.offer-create-success-page .clipart-cloud-5,
.offer-create-success-page .clipart-cloud-6,
.offer-create-success-page .clipart-cloud-7,
.offer-create-success-page .clipart-cloud-8,
.offer-create-success-page .clipart-cloud-9 {
    display: block;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    background-color: #EBEBEB;
}

.offer-create-success-page .clipart-cloud-1 {
    top: 14%;
    left: 9%;
    width: 50%;
    height: 50%;
    animation: create-offer-success-cloud-1 1.6s ease-in-out alternate infinite;
}

.offer-create-success-page .clipart-cloud-2 {
    top: 12%;
    left: 44%;
    width: 30%;
    height: 30%;
    animation: create-offer-success-cloud-2 1.4s ease-in-out alternate infinite;
}

.offer-create-success-page .clipart-cloud-3 {
    top: 26%;
    left: 44%;
    width: 48%;
    height: 48%;
    animation: create-offer-success-cloud-3 1.5s ease-in-out alternate infinite;
}

.offer-create-success-page .clipart-cloud-4 {
    top: 65%;
    left: 62%;
    width: 30%;
    height: 30%;
    animation: create-offer-success-cloud-4 1.3s ease-in-out alternate infinite;
}

.offer-create-success-page .clipart-cloud-5 {
    top: 57%;
    left: 29%;
    width: 40%;
    height: 40%;
    animation: create-offer-success-cloud-5 1.7s ease-in-out alternate infinite;
}

.offer-create-success-page .clipart-cloud-6 {
    top: 73%;
    left: 18%;
    width: 22%;
    height: 22%;
    animation: create-offer-success-cloud-6 1.5s ease-in-out alternate infinite;
}

.offer-create-success-page .clipart-cloud-7 {
    top: 53%;
    left: 5%;
    width: 32%;
    height: 32%;
    animation: create-offer-success-cloud-7 1.4s ease-in-out alternate infinite;
}

.offer-create-success-page .clipart-cloud-8 {
    top: 36%;
    left: 5%;
    width: 25%;
    height: 25%;
    animation: create-offer-success-cloud-8 1.6s ease-in-out alternate infinite;
}

.offer-create-success-page .clipart-cloud-9 {
    top: 28%;
    left: 19%;
    width: 55%;
    height: 55%;
}

@keyframes create-offer-success-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes create-offer-success-cloud-2 {
    from {
        transform: translate(-6%, 6%);
    }

    to {
        transform: translate(6%, -6%);
    }
}

@keyframes create-offer-success-cloud-3 {
    from {
        transform: translate(5%, -2%);
    }

    to {
        transform: translate(-5%, 2%);
    }
}

@keyframes create-offer-success-cloud-4 {
    from {
        transform: translate(-12%, -12%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes create-offer-success-cloud-5 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@keyframes create-offer-success-cloud-6 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes create-offer-success-cloud-7 {
    from {
        transform: translate(-8%, 3%);
    }

    to {
        transform: translate(8%, -3%);
    }
}

@keyframes create-offer-success-cloud-8 {
    from {
        transform: translate(5%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

.offer-create-success-page .clipart-body {
    display: block;
    position: absolute;
    z-index: 1;
    top: 41%;
    left: 26%;
    width: 58%;
    height: 58%;
    background: url('../../Content/Images/cargo-delivery/offer-create/success/clipart-user.svg') no-repeat center center transparent;
    background-size: contain;
}

.offer-create-success-page .clipart-hand {
    display: block;
    position: absolute;
    z-index: 1;
    top: 44%;
    left: 73.5%;
    width: 13%;
    height: 13%;
    background: url('../../Content/Images/cargo-delivery/offer-create/success/clipart-hand.svg') no-repeat center center transparent;
    background-size: contain;
    animation: create-offer-success-hand 7s ease-in-out infinite;
    transform-origin: 50% 100%;
}

@keyframes create-offer-success-hand {
    0% {
        transform: rotate(0deg);
    }

    18% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    22% {
        transform: rotate(20deg);
    }

    24% {
        transform: rotate(-10deg);
    }

    26% {
        transform: rotate(20deg);
    }

    28% {
        transform: rotate(-10deg);
    }

    30% {
        transform: rotate(20deg);
    }

    32% {
        transform: rotate(-10deg);
    }

    34% {
        transform: rotate(20deg);
    }

    36% {
        transform: rotate(-10deg);
    }

    38% {
        transform: rotate(20deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    42% {
        transform: rotate(20deg);
    }

    44% {
        transform: rotate(-10deg);
    }

    46% {
        transform: rotate(20deg);
    }

    48% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(20deg);
    }

    52% {
        transform: rotate(0deg);
    }

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

.offer-create-success-page .clipart-head {
    display: block;
    position: absolute;
    z-index: 1;
    top: 5%;
    left: 23.5%;
    width: 46%;
    height: 46%;
    background: url('../../Content/Images/cargo-delivery/offer-create/success/clipart-head.svg') no-repeat center center transparent;
    background-size: contain;
    animation: create-offer-success-head 3s ease-in-out infinite alternate;
    transform-origin: 50% 80%;
}

@keyframes create-offer-success-head {
    from {
        transform: rotate(-8deg);
    }

    to {
        transform: rotate(8deg);
    }
}



.offer-create-success-page .clipart-eyes {
    display: block;
    position: absolute;
    z-index: 1;
    top: 48%;
    left: 38%;
    width: 38%;
    height: 20%;
    background: url('../../Content/Images/cargo-delivery/offer-create/success/clipart-eyes.svg') no-repeat center center transparent;
    background-size: contain;
    animation: create-offer-success-eyes 5s ease-in-out infinite;
}

@keyframes create-offer-success-eyes {
    0% {
        transform: scale(1, 1);
    }

    20% {
        transform: scale(1, 1);
    }

    22% {
        transform: scale(1, 0);
    }

    24% {
        transform: scale(1, 1);
    }

    44% {
        transform: scale(1, 1);
    }

    46% {
        transform: scale(1, 0);
    }

    48% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

.offer-create-success-page .clipart-brows {
    display: block;
    position: absolute;
    z-index: 1;
    top: 46%;
    left: 36.5%;
    width: 40%;
    height: 5%;
    background: url('../../Content/Images/cargo-delivery/offer-create/success/clipart-brows.svg') no-repeat center center transparent;
    background-size: contain;
    animation: create-offer-success-brows 5s ease-in-out infinite;
}

@keyframes create-offer-success-brows {
    0% {
        transform: translateY(0%);
    }

    10% {
        transform: translateY(0%);
    }

    14% {
        transform: translateY(-50%);
    }

    18% {
        transform: translateY(-50%);
    }

    20% {
        transform: translateY(0%);
    }

    80% {
        transform: translateY(0%);
    }

    84% {
        transform: translateY(-50%);
    }

    88% {
        transform: translateY(-50%);
    }

    90% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

@media (max-width: 992px) {
    .offer-create-success-page .description-block {
        width: 600px;
    }
}

@media (max-width: 767px) {
    .offer-create-success-page .description-block {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .offer-create-success-page .description-block {
        width: 100%;
    }

    .offer-create-success-page h2 {
        width: 100%;
    }

    .offer-create-success-page .clipart-block {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 400px) {
    .offer-create-success-page .pazar-list {
        padding: 10px;
    }

    .offer-create-success-page h2 {
        font-size: 20px;
        line-height: 24px;
    }

    .offer-create-success-page .description-block {
        margin: 20px auto 60px auto;
    }

    .offer-create-success-page .clipart-block {
        margin: 20px auto 20px auto;
    }

    .offer-create-success-page .new-btn {
        width: 100%;
        display: block;
        margin-bottom: 5px;
    }
}
/* #endregion ----- /Offer Success ----------- */
/* #region ------- Custom Modal - Address Manager ---- */
.modal-custom.address-manager .modal-window {
    max-width: 600px;
    top: calc(50% - 283px);
}

    .modal-custom.address-manager .modal-window .modal-body {
        height: 500px;
        max-height: 450px;
    }

    .modal-custom.address-manager .modal-window .modal-container {
        width: 590px;
        margin: 0px auto;
    }

.modal-custom.address-manager .item {
    display: block;
    width: 100%;
    position: relative;
    cursor: pointer;
}

    .modal-custom.address-manager .item + .item {
        margin-top: 5px;
    }

    .modal-custom.address-manager .item input[type='radio'] {
        display: none;
    }

    .modal-custom.address-manager .item .panel {
        background-color: #F2F2F2;
        border-radius: var(--radius-4);
        padding: 15px 50px 15px 50px;
        font-size: 0px;
    }

    .modal-custom.address-manager .item input[type='radio']:checked + .panel {
        background-color: #E6F4ED;
    }

    .modal-custom.address-manager .item .address-content,
    .modal-custom.address-manager .item .no-info-helper {
        font-size: 18px;
        display: inline-block;
        width: 70%;
        vertical-align: middle;
        padding-left: 20px;
    }

*[dir='rtl'] .modal-custom.address-manager .item .address-content,
*[dir='rtl'] .modal-custom.address-manager .item .no-info-helper {
    padding-right: 20px;
    padding-left: 0px;
}

.modal-custom.address-manager .item .no-info-helper {
    font-size: 14px;
    color: var(--color-text-muted);
}

.modal-custom.address-manager .item .map-preview {
    font-size: 18px;
    display: inline-block;
    width: 30%;
    vertical-align: middle;
    height: 100px;
    background-color: var(--color-neutral-600);
    border-radius: var(--radius-4);
}

    .modal-custom.address-manager .item .map-preview > * {
        height: 100%;
        width: 100%;
        display: block;
    }

.modal-custom.address-manager .item .icon {
    display: block;
    position: absolute;
    top: calc(50% - 11px);
    left: 15px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #DDDDDD;
}

*[dir='rtl'] .modal-custom.address-manager .item .icon {
    right: 15px;
    left: auto;
}

.modal-custom.address-manager .item .icon .ci-pazar-small {
    font-size: 18px;
    font-size: 14px;
    margin-left: 4px;
    margin-top: 4px;
    display: none;
}

*[dir='rtl'] .modal-custom.address-manager .item .icon .ci-pazar-small {
    margin-right: 4px;
    margin-left: 0px;
}

.modal-custom.address-manager .item input[type='radio']:checked + .panel .icon {
    background-color: var(--color-bg-primary);
}

    .modal-custom.address-manager .item input[type='radio']:checked + .panel .icon .ci-pazar-small {
        display: inline-block;
    }



.modal-custom.address-manager .item .ci-trashcan {
    display: block;
    position: absolute;
    font-size: 32px;
    right: 10px;
    top: calc(50% - 16px);
}

*[dir='rtl'] .modal-custom.address-manager .item .ci-trashcan {
    right: auto;
    left: 10px;
}

.modal-custom.address-manager .btn-add-new {
    border: 2px dashed var(--color-border-primary);
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 500;
    border-radius: var(--radius-4);
    background-color: transparent;
    display: block;
    width: 100%;
    padding: 20px 10px 20px 10px;
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    margin-top: 5px;
}

    .modal-custom.address-manager .btn-add-new:hover {
        opacity: 0.6;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

    .modal-custom.address-manager .btn-add-new i {
        font-size: 32px;
        vertical-align: middle;
        margin-right: 10px;
    }

    .modal-custom.address-manager .btn-add-new span {
        vertical-align: middle;
    }

*[dir='rtl'] .modal-custom.address-manager .btn-add-new i {
    margin-right: 0px;
    margin-left: 10px;
}

@media (max-width: 727px) {

    .modal-custom.address-manager .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.address-manager .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.address-manager .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.address-manager .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    .modal-custom.address-manager .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.address-manager .modal-window .modal-container {
        width: 100%;
        margin: 0px;
    }
}

@media (max-width: 550px) {
    .modal-custom.address-manager .item .address-content {
        font-size: 14px;
    }

    .modal-custom.address-manager .modal-footer .new-btn {
        min-width: 0px;
    }
}

@media (max-width: 500px) {
    .modal-custom.address-manager .item .address-content,
    .modal-custom.address-manager .item .no-info-helper {
        font-size: 18px;
        display: block;
        width: 100%;
        padding-left: 0px;
    }

    *[dir='rtl'] .modal-custom.address-manager .item .address-content,
    *[dir='rtl'] .modal-custom.address-manager .item .no-info-helper {
        padding-right: 0px;
        padding-left: 0px;
    }

    .modal-custom.address-manager .item .no-info-helper {
        font-size: 14px;
    }

    .modal-custom.address-manager .item .map-preview {
        font-size: 14px;
        display: block;
        width: 100%;
        height: 150px;
        margin-bottom: 15px;
    }
}

@media (max-width: 400px) {
    .modal-custom.address-manager .item .address-content,
    .modal-custom.address-manager .item .no-info-helper {
        font-size: 14px;
    }
}

@media (max-width: 320px) {
    .modal-custom.address-manager .btn-add-new i {
        display: none;
    }
}

@media (max-height: 590px) {

    .modal-custom.address-manager .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.address-manager .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.address-manager .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.address-manager .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    .modal-custom.address-manager .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}
/* #endregion ---- Custom Modal - Address Manager ---- */
/* #region ------Modal - Address Manager ---- */
.modal.address-manager .modal-dialog {
    max-width: 600px;
    top: calc(50% - 308px);
}



    .modal.address-manager .modal-dialog .modal-body {
        height: 500px;
        max-height: 450px;
    }

    .modal.address-manager .modal-dialog .mCSB_container {
        width: 560px;
        margin: 0px auto;
    }


.modal.address-manager .item {
    display: block;
    width: 100%;
    position: relative;
    cursor: pointer;
}

    .modal.address-manager .item + .item {
        margin-top: 5px;
    }

    .modal.address-manager .item input[type='radio'] {
        display: none;
    }

    .modal.address-manager .item .panel {
        background-color: #F2F2F2;
        border-radius: var(--radius-4);
        padding: 15px 50px 15px 50px;
        font-size: 0px;
    }

    .modal.address-manager .item input[type='radio']:checked + .panel {
        background-color: #E6F4ED;
    }

    .modal.address-manager .item .address-content,
    .modal.address-manager .item .no-info-helper {
        font-size: 18px;
        display: inline-block;
        width: 70%;
        vertical-align: middle;
        padding-left: 20px;
    }

*[dir='rtl'] .modal.address-manager .item .address-content,
*[dir='rtl'] .modal.address-manager .item .no-info-helper {
    padding-right: 20px;
    padding-left: 0px;
}

.modal.address-manager .item .no-info-helper {
    font-size: 14px;
    color: var(--color-text-muted);
}

.modal.address-manager .item .map-preview {
    font-size: 18px;
    display: inline-block;
    width: 30%;
    vertical-align: middle;
    height: 100px;
    background-color: var(--color-neutral-600);
    border-radius: var(--radius-4);
}

    .modal.address-manager .item .map-preview > * {
        height: 100%;
        width: 100%;
        display: block;
    }

.modal.address-manager .item .icon {
    display: block;
    position: absolute;
    top: calc(50% - 11px);
    left: 15px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #DDDDDD;
}

*[dir='rtl'] .modal.address-manager .item .icon {
    right: 15px;
    left: auto;
}

.modal.address-manager .item .icon .ci-pazar-small {
    font-size: 18px;
    font-size: 14px;
    margin-left: 4px;
    margin-top: 4px;
    display: none;
}

*[dir='rtl'] .modal.address-manager .item .icon .ci-pazar-small {
    margin-right: 4px;
    margin-left: 0px;
}

.modal.address-manager .item input[type='radio']:checked + .panel .icon {
    background-color: var(--color-bg-primary);
}

    .modal.address-manager .item input[type='radio']:checked + .panel .icon .ci-pazar-small {
        display: inline-block;
    }



.modal.address-manager .item .ci-trashcan {
    display: block;
    position: absolute;
    font-size: 32px;
    right: 10px;
    top: calc(50% - 16px);
}

*[dir='rtl'] .modal.address-manager .item .ci-trashcan {
    right: auto;
    left: 10px;
}

.modal.address-manager .btn-add-new {
    border: 2px dashed var(--color-border-primary);
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 500;
    border-radius: var(--radius-4);
    background-color: transparent;
    display: block;
    width: 100%;
    padding: 20px 10px 20px 10px;
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    margin-top: 5px;
}

    .modal.address-manager .btn-add-new:hover {
        opacity: 0.6;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

    .modal.address-manager .btn-add-new i {
        font-size: 32px;
        vertical-align: middle;
        margin-right: 10px;
    }

    .modal.address-manager .btn-add-new span {
        vertical-align: middle;
    }

*[dir='rtl'] .modal.address-manager .btn-add-new i {
    margin-right: 0px;
    margin-left: 10px;
}

@media (max-width: 727px) {
    .modal.address-manager .modal-dialog {
        max-width: 100%;
        top: 0px;
    }

        .modal.address-manager .modal-dialog .mCSB_container {
            width: 100%;
        }
}

@media (max-width: 550px) {
    .modal.address-manager .item .address-content {
        font-size: 14px;
    }

    .modal.address-manager .modal-footer .new-btn {
        min-width: 0px;
    }
}

@media (max-width: 500px) {
    .modal.address-manager .item .address-content,
    .modal.address-manager .item .no-info-helper {
        font-size: 18px;
        display: block;
        width: 100%;
        padding-left: 0px;
    }

    *[dir='rtl'] .modal.address-manager .item .address-content,
    *[dir='rtl'] .modal.address-manager .item .no-info-helper {
        padding-right: 0px;
        padding-left: 0px;
    }

    .modal.address-manager .item .no-info-helper {
        font-size: 14px;
    }

    .modal.address-manager .item .map-preview {
        font-size: 14px;
        display: block;
        width: 100%;
        height: 150px;
        margin-bottom: 15px;
    }
}

@media (max-width: 400px) {
    .modal.address-manager .item .address-content,
    .modal.address-manager .item .no-info-helper {
        font-size: 14px;
    }
}

@media (max-width: 320px) {
    .modal.address-manager .btn-add-new i {
        display: none;
    }
}

@media (max-height: 600px) {
    .modal.show.address-manager {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.address-manager .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.address-manager .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.address-manager .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.address-manager .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.address-manager .modal-dialog .modal-footer {
        height: 69px;
    }
}


/* #endregion -/ Modal - Address Manager ---- */
/* #region ---- Modal - New-Edit Address ---- */
.modal.new-edit-address .modal-dialog {
    max-width: 512px;
    top: calc(50% - 350px);
}

    .modal.new-edit-address .modal-dialog .mCSB_container,
    .modal.new-edit-address .modal-dialog .mCustomScrollBox {
        overflow: visible;
    }

@media (max-width: 767px) {
    .modal.new-edit-address .modal-dialog {
        max-width: 100%;
        top: 0px;
        left: 0px;
    }

        .modal.new-edit-address .modal-dialog .modal-body {
            max-height: 100%;
            height: 100%;
        }

        .modal.new-edit-address .modal-dialog .mCSB_container,
        .modal.new-edit-address .modal-dialog .mCustomScrollBox {
            overflow: hidden;
        }

        .modal.new-edit-address .modal-dialog .address-container {
            min-height: 500px;
        }
}

@media (max-width: 550px) {
    .modal.new-edit-address .modal-dialog .modal-footer .new-btn {
        min-width: 0px;
    }
}
/* #endregion -/Modal - New-Edit Address ---- */
/* #region -------- Modal Location ---------- */
.modal-custom.modal-location .modal-window {
    width: 850px;
    top: calc(50% - 400px);
    left: calc(50% - 425px);
}

.modal-custom.modal-location.maximized .modal-window {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-0);
}

    .modal-custom.modal-location.maximized .modal-window .modal-header {
        border-radius: var(--radius-0);
    }

    .modal-custom.modal-location.maximized .modal-window .modal-footer {
        display: none;
    }

.modal-custom.modal-location .modal-body {
    padding: 0px;
    padding-top: 80px;
    position: relative;
}



.modal-custom.modal-location .information-panel {
    width: 100%;
    height: 80px;
    position: absolute;
    font-size: 0px;
    top: 0px;
    left: 0px;
    z-index: 999;
    background-color: #F2F2F2;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 7px;
    padding: 20px 10px 0px 10px;
}

.modal-custom.modal-location .address-block {
    display: inline-block;
    width: 65%;
    font-size: 14px;
    position: relative;
    padding-left: 40px;
    vertical-align: top;
    padding-right: 20px;
}

*[dir='rtl'] .modal-custom.modal-location .address-block {
    padding-left: 20px;
    padding-right: 40px;
}

.modal-custom.modal-location .buttons-block {
    display: none;
}

.modal-custom.modal-location.maximized .address-block {
    width: 30%;
}

.modal-custom.modal-location.maximized .coordinates-block {
    width: 40%;
}

.modal-custom.modal-location.maximized .buttons-block {
    width: 30%;
    display: inline-block;
    text-align: right;
    font-size: 14px;
    position: relative;
    vertical-align: top;
    padding-right: 10px;
}

*[dir='rtl'] .modal-custom.modal-location.maximized .buttons-block {
    padding-right: 0px;
    padding-left: 10px;
    text-align: left;
}

.modal-custom.modal-location.maximized .buttons-block .new-btn {
    min-width: 150px;
}

    .modal-custom.modal-location.maximized .buttons-block .new-btn.btn-default {
        background-color: #FFFFFF !important;
    }


.modal-custom.modal-location .coordinates-block {
    display: inline-block;
    width: 35%;
    font-size: 14px;
    vertical-align: top;
}

.modal-custom.modal-location .address-block .ci-map-marker {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    font-size: 38px;
}

*[dir='rtl'] .modal-custom.modal-location .address-block .ci-map-marker {
    left: auto;
    right: 0px;
}

.modal-custom.modal-location .btn-maximize {
    position: absolute;
    top: 90px;
    right: 9px;
    z-index: 999;
    border: 0px none transparent;
    border-radius: var(--radius-4);
    background-color: rgba(33, 37, 41, 0.8);
    min-width: 0px;
    padding: 3px;
    font-size: 48px;
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

    .modal-custom.modal-location .btn-maximize:hover {
        opacity: 0.6;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }


*[dir='rtl'] .modal-custom.modal-location .btn-maximize {
    right: auto;
    left: 9px;
}

.modal-custom.modal-location .btn-maximize .ci-pazar:before {
    background-position: -31em 0em;
}

.modal-custom.modal-location.maximized .btn-maximize .ci-pazar:before {
    background-position: -32em 0em;
}

.modal-custom.modal-location .modal-body {
    height: calc(100% - 58px);
}

.modal-custom.modal-location .location-map {
    height: 512px;
}

.modal-custom.modal-location.maximized .location-map {
    height: 100%;
}

.location-map .leaflet-bar a {
    color: #ffffff;
    background-color: rgba(33, 37, 41, 0.8);
}

.location-map .leaflet-interactive {
    stroke: var(--color-border-primary);
    fill: var(--color-bg-primary);
}

.location-map .leaflet-pane.leaflet-marker-pane .leaflet-marker-icon {
    width: 32px !important;
    height: 45px !important;
    margin-left: -14px !important;
    background-size: contain;
    border: 0px none transparent;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: url("../../Content/leaflet/images/clipart-map-marker.svg");
}

.location-map .leaflet-pane.leaflet-shadow-pane .leaflet-marker-shadow {
    background-size: contain;
    border: 0px none transparent;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: url("../../Content/leaflet/images/marker-shadow.png");
}


*[dir='rtl'] .location-map .leaflet-left {
    left: auto;
    right: 0px;
}

*[dir='rtl'] .leaflet-left .leaflet-control {
    margin-left: 0px;
    margin-right: 10px;
}

.modal-custom.modal-location.no-footer .modal-body,
.modal-custom.modal-location.no-footer .location-map {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

@media (max-width: 2200px) {
    .modal-custom.modal-location.maximized .address-block {
        width: 40%;
        padding-left: 40px;
        padding-right: 20px;
    }

    *[dir='rtl'] .modal-custom.modal-location.maximized .address-block {
        padding-left: 20px;
        padding-right: 40px;
    }

    .modal-custom.modal-location.maximized .coordinates-block {
        width: 40%;
    }


    .modal-custom.modal-location.maximized .buttons-block {
        width: 20%;
        padding-right: 10px;
    }

    *[dir='rtl'] .modal-custom.modal-location.maximized .buttons-block {
        padding-right: 0px;
        padding-left: 10px;
    }
}

@media (max-width: 1900px) {
    .modal-custom.modal-location.maximized .address-block {
        width: 40%;
        padding-left: 40px;
        padding-right: 20px;
    }

    *[dir='rtl'] .modal-custom.modal-location.maximized .address-block {
        padding-left: 20px;
        padding-right: 40px;
    }

    .modal-custom.modal-location.maximized .coordinates-block {
        width: 30%;
    }


    .modal-custom.modal-location.maximized .buttons-block {
        width: 30%;
        padding-right: 10px;
    }

    *[dir='rtl'] .modal-custom.modal-location.maximized .buttons-block {
        padding-right: 0px;
        padding-left: 10px;
    }
}

@media (max-width: 1500px) {
    .modal-custom.modal-location.maximized .address-block {
        width: 55%;
        padding-left: 40px;
        padding-right: 20px;
    }

    *[dir='rtl'] .modal-custom.modal-location.maximized .address-block {
        padding-left: 20px;
        padding-right: 40px;
    }

    .modal-custom.modal-location.maximized .coordinates-block {
        width: 20%;
    }


    .modal-custom.modal-location.maximized .buttons-block {
        width: 25%;
        padding-right: 10px;
    }


    *[dir='rtl'] .modal-custom.modal-location.maximized .buttons-block {
        padding-left: 10px;
        padding-right: 0px;
    }

    .modal-custom.modal-location.maximized .buttons-block .new-btn {
        min-width: 0px;
    }
}

@media (max-width: 1199px) {
    .modal-custom.modal-location .modal-window {
        width: 100%;
        min-width: 100%;
        top: 0px;
        left: 0px;
        border-radius: var(--radius-0);
        height: 100%;
    }

    .modal-custom.modal-location.no-footer .modal-body,
    .modal-custom.modal-location.no-footer .location-map {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .modal-custom.modal-location.maximized .address-block {
        width: 70%;
        padding-left: 40px;
        padding-right: 20px;
    }

    .modal-custom.modal-location.maximized .coordinates-block {
        width: 30%;
    }

    .modal-custom.modal-location.maximized .buttons-block {
        display: none;
    }

    .modal-custom.modal-location .modal-body {
        height: calc(100% - 120px);
    }

    .modal-custom.modal-location.maximized .modal-window .modal-header {
        border-radius: var(--radius-0);
    }

    .modal-custom.modal-location.maximized .modal-window .modal-footer {
        display: block;
        border-radius: var(--radius-0);
    }

    .modal-custom.modal-location .btn-maximize {
        display: none;
    }

    .modal-custom.modal-location .location-map {
        height: 100%;
    }
}

@media (max-height: 850px) and (min-width: 1200px) {
    .modal-custom.modal-location .modal-window {
        width: 100%;
        min-width: 100%;
        top: 0px;
        left: 0px;
        border-radius: var(--radius-0);
        height: 100%;
    }

    .modal-custom.modal-location.no-footer .modal-body,
    .modal-custom.modal-location.no-footer .location-map {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .modal-custom.modal-location.maximized .address-block {
        width: 70%;
        padding-left: 40px;
        padding-right: 20px;
    }

    .modal-custom.modal-location.maximized .coordinates-block {
        width: 30%;
    }

    .modal-custom.modal-location.maximized .buttons-block {
        display: none;
    }

    .modal-custom.modal-location .modal-body {
        height: calc(100% - 120px);
    }

    .modal-custom.modal-location.maximized .modal-window .modal-header {
        border-radius: var(--radius-0);
    }

    .modal-custom.modal-location.maximized .modal-window .modal-footer {
        display: block;
        border-radius: var(--radius-0);
    }

    .modal-custom.modal-location .btn-maximize {
        display: none;
    }

    .modal-custom.modal-location .location-map {
        height: 100%;
    }
}

@media (max-width: 727px) {
    .modal-custom.modal-location .information-panel {
        position: static;
        top: auto;
        left: auto;
        height: auto;
        padding: 20px;
        border-bottom: 1px solid #DDDDDD;
        background-color: #FFFFFF;
    }

        .modal-custom.modal-location .information-panel .address-block .ci-pazar {
            display: none;
        }

        .modal-custom.modal-location .information-panel .address-block {
            padding-bottom: 10px;
        }

        .modal-custom.modal-location .information-panel .address-block,
        .modal-custom.modal-location .information-panel .coordinates-block {
            display: block;
            width: 100%;
            padding-left: 0px;
            padding-right: 0px;
        }

    .modal-custom.modal-location .modal-body {
        padding-top: 52px;
    }

    .modal-custom.modal-location .modal-footer {
        z-index: 1000;
    }
}

@media (max-width: 450px) {
    .modal-custom.modal-location .modal-header .modal-title {
        font-size: 14px;
    }

    .modal-custom.modal-location .modal-footer .new-btn {
        min-width: 0px;
    }
}
/* #endregion ---- /Modal Location ---------- */
/* #endregion ================================= /Offer Create ======================================== */
/* #region ================================= Sales-Purchases Page ==================================== */
.sales-purchases-page .listing-header {
    display: block;
    padding-top: 30px;
    padding-bottom: 30px;
}

.sales-purchases-page .right-side {
    display: block;
    float: right;
}

*[dir='rtl'] .sales-purchases-page .right-side {
    float: left;
}

@media (max-width: 991px) {
    .sales-purchases-page .listing-header {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .sales-purchases-page .listing-header {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
/* #region Sorting Filters */
.sales-purchases-page .listing-header .right-side .select .select-button {
    width: 250px;
}

.sales-purchases-page .listing-header .right-side .new-btn.filter-btn {
    height: 58px;
    min-width: 58px;
    padding: 0px;
    background-color: #f2f2f2 !important;
}

    .sales-purchases-page .listing-header .right-side .new-btn.filter-btn .inner {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .sales-purchases-page .listing-header .right-side .new-btn.filter-btn .ci-pazar {
        position: absolute;
        font-size: 32px;
        top: calc(50% - 16px);
        left: 12px;
    }

*[dir='rtl'] .sales-purchases-page .listing-header .right-side .new-btn.filter-btn .ci-pazar {
    right: 12px;
    left: auto;
}

.sales-purchases-page .listing-header .right-side .new-btn.filter-btn b {
    font-size: 12px;
    color: var(--color-text-danger);
    font-weight: 700;
    display: inline-block;
    vertical-align: top;
    border-radius: 40px;
    background-color: #FBCFCF;
    padding: 10px 8px 10px 8px;
    line-height: 0px;
    margin-top: 19px;
    margin-left: 46px;
    margin-right: 10px;
}

*[dir='rtl'] .sales-purchases-page .listing-header .right-side .new-btn.filter-btn b {
    margin-left: 10px;
    margin-right: 46px;
}

.sales-purchases-page .listing-header .right-side .new-btn.filter-btn b:empty {
    display: none;
}

@media (max-width: 992px) {
    .sales-purchases-page .listing-header .right-side .new-btn.filter-btn {
        background-color: transparent !important;
        min-width: 40px;
        height: 40px;
    }

        .sales-purchases-page .listing-header .right-side .new-btn.filter-btn .ci-pazar {
            position: absolute;
            font-size: 32px;
            top: calc(50% - 16px);
            left: 4px;
        }

    *[dir='rtl'] .sales-purchases-page .listing-header .right-side .new-btn.filter-btn .ci-pazar {
        right: 4px;
        left: auto;
    }

    .sales-purchases-page .listing-header .right-side .new-btn.filter-btn b {
        margin-top: 10px;
        margin-left: 40px;
        margin-right: 10px;
    }

    *[dir='rtl'] .sales-purchases-page .listing-header .right-side .new-btn.filter-btn b {
        margin-left: 10px;
        margin-right: 40px;
    }
}

@media (max-width: 767px) {
    .sales-purchases-page .listing-header .right-side .new-btn.filter-btn {
        min-width: 32px;
        height: 32px;
    }

        .sales-purchases-page .listing-header .right-side .new-btn.filter-btn .ci-pazar {
            position: absolute;
            font-size: 28px;
            top: calc(50% - 14px);
            left: 2px;
        }

    *[dir='rtl'] .sales-purchases-page .listing-header .right-side .new-btn.filter-btn .ci-pazar {
        right: 2px;
        left: auto;
    }

    .sales-purchases-page .listing-header .right-side .new-btn.filter-btn b {
        margin-top: 6px;
        margin-left: 30px;
        margin-right: 6px;
    }

    *[dir='rtl'] .sales-purchases-page .listing-header .right-side .new-btn.filter-btn b {
        margin-left: 6px;
        margin-right: 30px;
    }
}

/* #endregion Sorting Filters */
/* #region Tabs */

.sales-purchases-page .list-group {
    display: inline-block;
    width: auto;
    font-size: 0px;
}

.sales-purchases-page .list-group-item {
    display: inline-block;
    width: auto;
    font-size: 14px;
    vertical-align: top;
    border: 1px solid #DDDDDD;
    color: var(--color-text-muted);
    font-weight: 400;
}

    .sales-purchases-page .list-group-item.active {
        border: 1px solid #DDDDDD;
        background-color: #EBEBEB;
        color: var(--color-text-muted);
    }

.sales-purchases-page .list-group-item-action:active {
    background-color: #EBEBEB;
}

.sales-purchases-page .list-group-item:first-child,
*[dir='rtl'] .sales-purchases-page .list-group-item:last-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.sales-purchases-page .list-group-item:last-child,
*[dir='rtl'] .sales-purchases-page .list-group-item:first-child {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.sales-purchases-page .list-group-horizontal > .list-group-item + .list-group-item {
    border-left-width: 0;
}

*[dir='rtl'] .sales-purchases-page .list-group-horizontal > .list-group-item + .list-group-item {
    border-left-width: 1px;
    border-right-width: 0px;
}


/* ------------  New -------------------- */
.sales-purchases-page .list-group.page-switcher {
    display: inline-block;
    width: auto;
    font-size: 0px;
}

    .sales-purchases-page .list-group.page-switcher .list-group-item {
        display: inline-block;
        width: auto;
        font-size: 24px;
        vertical-align: middle;
        border: 0px none transparent;
        color: var(--color-text-muted);
        font-weight: 400;
        position: relative;
        padding: 10px 0px 10px 0px !important;
        margin: 0px;
        margin-left: 0px !important;
    }

*[dir='rtl'] .sales-purchases-page .list-group.page-switcher .list-group-item {
    margin: 0px;
    margin-left: 0px !important;
    margin-right: 0px !important;
}


.sales-purchases-page .list-group.page-switcher .divider-vertical {
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 58px;
    background-color: #DDDDDD;
    margin-left: 26px;
    margin-right: 26px;
}

.sales-purchases-page .list-group.page-switcher .list-group-item:hover {
    background-color: transparent;
    opacity: 1;
}


.sales-purchases-page .list-group.page-switcher .list-group-item.active {
    border: 0px none transparent;
    background-color: transparent;
    color: var(--color-text-basic);
}

.sales-purchases-page .list-group.page-switcher .list-group-item-action:active {
    background-color: transparent;
}

.sales-purchases-page .list-group.page-switcher .list-group-item span {
    display: inline-block;
    vertical-align: middle;
}

    .sales-purchases-page .list-group.page-switcher .list-group-item span + span {
        margin-left: 5px;
    }

*[dir='rtl'] .sales-purchases-page .list-group.page-switcher .list-group-item span + span {
    margin-left: 0px;
    margin-right: 5px;
}

.sales-purchases-page .list-group.page-switcher .list-group-item .marker {
    display: none;
    vertical-align: middle;
    height: 1em;
    width: 7px;
    margin-left: 2px;
}

*[dir='rtl'] .sales-purchases-page .list-group.page-switcher .list-group-item .marker {
    margin-right: 2px;
    margin-left: 0px;
}

.sales-purchases-page .list-group.page-switcher .list-group-item.new .marker {
    display: inline-block;
}


.sales-purchases-page .list-group.page-switcher .list-group-item .marker span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color-bg-danger);
}

@media (max-width: 1199px) {
    .sales-purchases-page .list-group.page-switcher .list-group-item {
        font-size: 18px;
        padding: 10px 0px 10px 0px !important;
    }
}

@media (max-width: 992px) {
    .sales-purchases-page .listing-header .right-side .select {
        display: none;
    }

    .sales-purchases-page .list-group.page-switcher .divider-vertical {
        height: 40px;
    }
}

@media (max-width: 767px) {
    .sales-purchases-page .list-group.page-switcher .divider-vertical {
        margin-left: 10px;
        margin-right: 10px;
    }

    .sales-purchases-page .list-group.page-switcher .list-group-item {
        font-size: 14px;
    }

    .sales-purchases-page .list-group.page-switcher .divider-vertical {
        height: 32px;
    }
}

@media (max-width: 420px) {
    .sales-purchases-page .list-group.page-switcher .list-group-item .counter {
        display: none;
    }
}

/* #endregion Tabs */
/* #region Collapser */
.sales-purchases-page .collapser .collapser-btn {
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
}

    .sales-purchases-page .collapser .collapser-btn .inner {
        margin: 0px;
        padding: 0px;
    }

    .sales-purchases-page .collapser .collapser-btn > * > * {
        vertical-align: middle;
    }

    .sales-purchases-page .collapser .collapser-btn span {
        padding-left: 22px;
        line-height: 18px;
        display: inline-block;
    }

*[dir='rtl'] .sales-purchases-page .collapser .collapser-btn span {
    padding-left: 0px;
    padding-right: 22px;
}

.sales-purchases-page .collapser .collapser-btn i {
    position: absolute;
    top: calc(50% - 9px);
    left: 0px;
}

*[dir='rtl'] .sales-purchases-page .collapser .collapser-btn i {
    position: absolute;
    top: calc(50% - 9px);
    left: auto;
    right: 0px;
}

.sales-purchases-page .collapser.collapsed .collapser-btn i {
    transform: rotate(-90deg);
}

*[dir='rtl'] .sales-purchases-page .collapser.collapsed .collapser-btn i {
    transform: rotate(90deg);
    top: calc(50% - 9px);
    left: auto;
    right: 0px;
}

.sales-purchases-page section.orders .collapser .collapser-btn {
    border-top: 0px none transparent;
}

.sales-purchases-page section.offers + section.orders .collapser .collapser-btn {
    border-top: 1px solid #F2F2F2;
}

.sales-purchases-page .collapser.collapsed .collapser-content {
    padding-bottom: 0px;
}

.sales-purchases-page .collapser .collapser-content {
    padding-bottom: 50px;
}

@media (max-width: 575px) {
    .sales-purchases-page .collapser .collapser-btn {
        font-size: 14px;
    }

        .sales-purchases-page .collapser .collapser-btn span {
            line-height: 17px;
        }

        .sales-purchases-page .collapser .collapser-btn i {
            top: calc(50% - 8px);
        }
}

/* #endregion Collapser */
/* #region Filter */
.sales-purchases-page .panel-filter {
    display: block;
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #F9F9F9;
    font-size: 0px;
    padding: 15px 20px 15px 20px;
}

    .sales-purchases-page .panel-filter .control-block {
        display: inline-block;
        font-size: 14px;
        width: 20%;
        vertical-align: top;
    }

    .sales-purchases-page .panel-filter .content-block {
        display: inline-block;
        font-size: 14px;
        width: 80%;
        vertical-align: top;
        border-left: 1px solid #DDDDDD;
        padding-left: 10px;
    }

*[dir='rtl'] .sales-purchases-page .panel-filter .content-block {
    border-left: 0px none transparent;
    border-right: 1px solid #DDDDDD;
    padding-left: 0px;
    padding-right: 10px;
}

.sales-purchases-page .panel-filter .tag-item {
    background-color: #E7E7E7;
    position: relative;
    font-size: 12px;
    display: inline-block;
    padding: 10px 10px 10px 10px;
    border-radius: var(--radius-4);
    cursor: pointer;
    margin-bottom: 5px;
    margin-right: 5px;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

    .sales-purchases-page .panel-filter .tag-item:hover {
        opacity: 0.6;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

*[dir='rtl'] .sales-purchases-page .panel-filter .tag-item {
    margin-right: 0px;
    margin-left: 5px;
}

.sales-purchases-page .panel-filter .label {
    font-size: 14px;
    display: inline-block;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

*[dir='rtl'] .sales-purchases-page .panel-filter .label {
    padding-right: 0px;
    padding-left: 10px;
}

.sales-purchases-page .panel-filter .sorting-filters {
    font-size: 0px;
}

.sales-purchases-page .panel-filter .selecting-filters {
    font-size: 0px;
    margin-top: 5px;
}

.sales-purchases-page .panel-filter .tag-item span + span {
    padding-left: 5px;
}

*[dir='rtl'] .sales-purchases-page .panel-filter .tag-item span + span {
    padding-left: 0px;
    padding-right: 5px;
}

.sales-purchases-page .panel-filter .tag-item.delete-tag {
    padding-right: 25px;
}

*[dir='rtl'] .sales-purchases-page .panel-filter .tag-item.delete-tag {
    padding-right: 10px;
    padding-left: 25px;
}

.sales-purchases-page .panel-filter .tag-item.delete-tag button {
    position: absolute;
    top: calc(50% - 17px);
    right: 0px;
    width: 25px;
    height: 37px;
    z-index: 1;
    border: 0px none transparent;
    font-size: 12px;
    background-color: transparent;
    cursor: pointer;
}

*[dir='rtl'] .sales-purchases-page .panel-filter .tag-item.delete-tag button {
    right: auto;
    left: 0px
}

.sales-purchases-page .panel-filter .tag-item.delete-tag button i {
    margin-top: -4px;
}

.sales-purchases-page .panel-filter .control-block a {
    padding: 10px 0px 10px 0px;
    display: inline-block;
}

@media (max-width: 991px) {
    .sales-purchases-page .panel-filter .control-block {
        width: 100%;
        display: block;
        padding-bottom: 13px;
        border-bottom: 1px solid #DDDDDD;
    }

    .sales-purchases-page .panel-filter .content-block,
    *[dir='rtl'] .sales-purchases-page .panel-filter .content-block {
        width: 100%;
        display: block;
        padding-top: 15px;
        border: 0px none transparent;
        padding-left: 0px;
        padding-right: 0px;
    }
}
/* #endregion Filter */


/* #region Filter Settings modal-custom */
.modal-custom.sales-sorting-filter .modal-window {
    width: 700px;
    left: calc(50% - 350px);
    top: calc(50% - 210px);
}

.modal-custom.sales-sorting-filter .sorting {
    display: none;
}

.modal-custom.sales-sorting-filter p {
    font-size: 20px;
    font-weight: 400 !important;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

.modal-custom.sales-sorting-filter .modal-footer .new-btn {
    min-width: 0px;
}

.modal-custom.sales-sorting-filter .tag-list {
    display: block;
    width: 100%;
    font-size: 0px;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

.modal-custom.sales-sorting-filter .tag-item {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    opacity: 1;
    transition: opacity 0.2s ease;
    -webkit-transition: opacity 0.2s ease;
}

*[dir='rtl'] .modal-custom.sales-sorting-filter .tag-item {
    margin-right: 0px;
    margin-left: 5px;
}

.modal-custom.sales-sorting-filter .tag-item:hover {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    -webkit-transition: opacity 0.2s ease;
}

.modal-custom.sales-sorting-filter .tag-item input[type='radio'] {
    display: none;
}

.modal-custom.sales-sorting-filter .tag-item .panel {
    background-color: #E7E7E7;
    padding: 10px 10px 10px 10px;
    border-radius: var(--radius-4);
    position: relative;
    font-size: 12px;
    display: inline-block;
    width: auto;
}

.modal-custom.sales-sorting-filter .tag-item span + span {
    padding-left: 5px;
}

*[dir='rtl'] .modal-custom.sales-sorting-filter .tag-item span + span {
    padding-left: 0px;
    padding-right: 5px;
}

.modal-custom.sales-sorting-filter .tag-item input[type='radio']:checked + .panel {
    background-color: #E6F4ED;
}

.modal-custom.sales-sorting-filter .tag-list .all-statuses {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    border: 0px none transparent;
    padding: 10px 10px 10px 10px;
    border-radius: var(--radius-4);
    color: var(--color-text-muted);
    background-color: #E7E7E7;
    opacity: 1;
    cursor: pointer;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.modal-custom.sales-sorting-filter .tag-list .all-statuses {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    border: 0px none transparent;
    padding: 10px 10px 10px 10px;
    border-radius: var(--radius-4);
    color: var(--color-text-muted);
    background-color: #E7E7E7;
    margin-right: 5px;
    margin-bottom: 5px;
    opacity: 1;
    cursor: pointer;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

*[dir='rtl'] .modal-custom.sales-sorting-filter .tag-list .all-statuses {
    margin-right: 0px;
    margin-left: 5px;
}

.modal-custom.sales-sorting-filter .tag-list .all-statuses:hover {
    opacity: 0.6;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.modal-custom.sales-sorting-filter .tag-list .all-statuses.active {
    background-color: #E6F4ED;
}

.modal-custom.sales-sorting-filter .tag-item input[type='checkbox'],
.modal-custom.sales-sorting-filter .tag-item input[type='checkbox'] + .panel i {
    display: none;
}

    .modal-custom.sales-sorting-filter .tag-item input[type='checkbox']:checked + .panel {
        background-color: #E6F4ED;
    }

        .modal-custom.sales-sorting-filter .tag-item input[type='checkbox']:checked + .panel i {
            display: inline-block;
            vertical-align: middle;
            background-color: var(--color-bg-primary);
            border-radius: 50%;
            width: 12px;
            height: 12px;
            font-size: 10px;
            margin-right: 3px;
            margin-left: -3px;
            margin-top: -1px;
        }

            .modal-custom.sales-sorting-filter .tag-item input[type='checkbox']:checked + .panel i:before {
                margin-top: 1px;
                margin-left: 1px;
            }

*[dir='rtl'] .modal-custom.sales-sorting-filter .tag-item input[type='checkbox']:checked + .panel i {
    margin-left: 3px;
    margin-right: -3px;
}

@media (max-width: 992px) {

    .modal-custom.sales-sorting-filter .modal-window {
        top: calc(50% - 232px);
    }

    .modal-custom.sales-sorting-filter .sorting {
        display: block;
    }
}

@media (max-width: 727px) {
    .modal-custom.sales-sorting-filter .modal-window {
        max-width: 100%;
        top: 0px;
    }
}

@media (max-width: 575px) {
    .modal-custom.sales-sorting-filter p {
        font-size: 14px;
        font-weight: 700 !important;
        margin-top: 10px;
        margin-bottom: 10px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal-custom.sales-sorting-filter .tag-list {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 450px) {
    .modal-custom.sales-sorting-filter .modal-dialog .clear {
        display: none;
    }
}


@media (max-height: 500px) {

    .modal-custom.sales-sorting-filter .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.sales-sorting-filter .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.sales-sorting-filter .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.sales-sorting-filter .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.sales-sorting-filter .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}

/* #endregion Filter Settings modal-custom */
/* #region Filter Settings modal */
.modal.sales-sorting-filter .modal-dialog {
    max-width: 700px;
    top: calc(50% - 300px);
}

.modal.sales-sorting-filter .sorting {
    display: none;
}

.modal.sales-sorting-filter p {
    font-size: 20px;
    font-weight: 400 !important;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

.modal.sales-sorting-filter .modal-footer .new-btn {
    min-width: 0px;
}

.modal.sales-sorting-filter .tag-list {
    display: block;
    width: 100%;
    font-size: 0px;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

.modal.sales-sorting-filter .tag-item {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    opacity: 1;
    transition: opacity 0.2s ease;
    -webkit-transition: opacity 0.2s ease;
}

*[dir='rtl'] .modal.sales-sorting-filter .tag-item {
    margin-right: 0px;
    margin-left: 5px;
}

.modal.sales-sorting-filter .tag-item:hover {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    -webkit-transition: opacity 0.2s ease;
}

.modal.sales-sorting-filter .tag-item input[type='radio'] {
    display: none;
}

.modal.sales-sorting-filter .tag-item .panel {
    background-color: #E7E7E7;
    padding: 10px 10px 10px 10px;
    border-radius: var(--radius-4);
    position: relative;
    font-size: 12px;
    display: inline-block;
    width: auto;
}

.modal.sales-sorting-filter .tag-item span + span {
    padding-left: 5px;
}

*[dir='rtl'] .modal.sales-sorting-filter .tag-item span + span {
    padding-left: 0px;
    padding-right: 5px;
}

.modal.sales-sorting-filter .tag-item input[type='radio']:checked + .panel {
    background-color: #E6F4ED;
}

.modal.sales-sorting-filter .tag-list .all-statuses {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    border: 0px none transparent;
    padding: 10px 10px 10px 10px;
    border-radius: var(--radius-4);
    color: var(--color-text-muted);
    background-color: #E7E7E7;
    opacity: 1;
    cursor: pointer;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.modal.sales-sorting-filter .tag-list .all-statuses {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    border: 0px none transparent;
    padding: 10px 10px 10px 10px;
    border-radius: var(--radius-4);
    color: var(--color-text-muted);
    background-color: #E7E7E7;
    margin-right: 5px;
    margin-bottom: 5px;
    opacity: 1;
    cursor: pointer;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

*[dir='rtl'] .modal.sales-sorting-filter .tag-list .all-statuses {
    margin-right: 0px;
    margin-left: 5px;
}

.modal.sales-sorting-filter .tag-list .all-statuses:hover {
    opacity: 0.6;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.modal.sales-sorting-filter .tag-list .all-statuses.active {
    background-color: #E6F4ED;
}

.modal.sales-sorting-filter .tag-item input[type='checkbox'],
.modal.sales-sorting-filter .tag-item input[type='checkbox'] + .panel i {
    display: none;
}

    .modal.sales-sorting-filter .tag-item input[type='checkbox']:checked + .panel {
        background-color: #E6F4ED;
    }

        .modal.sales-sorting-filter .tag-item input[type='checkbox']:checked + .panel i {
            display: inline-block;
            vertical-align: middle;
            background-color: var(--color-bg-primary);
            border-radius: 50%;
            width: 12px;
            height: 12px;
            font-size: 10px;
            margin-right: 3px;
            margin-left: -3px;
            margin-top: -1px;
        }

            .modal.sales-sorting-filter .tag-item input[type='checkbox']:checked + .panel i:before {
                margin-top: 1px;
                margin-left: 1px;
            }

*[dir='rtl'] .modal.sales-sorting-filter .tag-item input[type='checkbox']:checked + .panel i {
    margin-left: 3px;
    margin-right: -3px;
}

@media (max-width: 992px) {

    .modal.sales-sorting-filter .modal-dialog {
        top: calc(50% - 340px);
    }

    .modal.sales-sorting-filter .sorting {
        display: block;
    }
}

@media (max-width: 727px) {
    .modal.sales-sorting-filter .modal-dialog {
        max-width: 100%;
        top: 0px;
    }
}

@media (max-width: 575px) {
    .modal.sales-sorting-filter p {
        font-size: 14px;
        font-weight: 700 !important;
        margin-top: 10px;
        margin-bottom: 10px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal.sales-sorting-filter .tag-list {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 450px) {
    .modal.sales-sorting-filter .modal-dialog .clear {
        display: none;
    }
}

@media (max-height: 680px) {

    .modal.show.sales-sorting-filter {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.sales-sorting-filter .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.sales-sorting-filter .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.sales-sorting-filter .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.sales-sorting-filter .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.sales-sorting-filter .modal-dialog .modal-footer {
        height: 69px;
    }
}

/* #endregion Filter Settings modal */

/* #region Cancel order modal-custom */
.modal-custom.cancel-order .modal-window {
    width: 700px;
    left: calc(50% - 350px);
    top: calc(50% - 276px);
}

    .modal-custom.cancel-order .modal-window .modal-body .content {
        margin: 10px auto 10px auto;
        width: 600px;
    }


    .modal-custom.cancel-order .modal-window .modal-body h5 {
        font-size: 18px;
        font-weight: 400;
    }

    .modal-custom.cancel-order .modal-window .modal-body .new-textarea {
        max-height: 200px;
    }

@media (max-width: 728px) {
    .modal-custom.cancel-order .modal-window {
        max-width: 100%;
        top: 0px;
    }

        .modal-custom.cancel-order .modal-window .modal-body .content {
            padding: 10px 30px 10px 30px;
            margin: 0px;
            width: 100%;
        }
}

@media (max-width: 500px) {
    .modal-custom.cancel-order .modal-window .modal-body h5 {
        font-size: 14px;
    }

    .modal-custom.cancel-order .modal-window .modal-body .content {
        padding: 10px 10px 10px 10px;
    }

    .modal-custom.cancel-order .modal-window .radio.radio-alternate {
        position: relative;
        padding-left: 30px;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    *[dir='rtl'] .modal-custom.cancel-order .modal-window .radio.radio-alternate {
        padding-right: 30px;
        padding-left: 0px;
    }

    .modal-custom.cancel-order .modal-window .radio.radio-alternate i {
        position: absolute;
        left: 0px;
        top: calc(50% - 15px);
    }

    *[dir='rtl'] .modal-custom.cancel-order .modal-window .radio.radio-alternate i {
        left: auto;
        right: 0px;
    }

    .modal-custom.cancel-order .modal-window .modal-footer .new-btn {
        min-width: 0px;
    }
}

@media (max-height: 570px) {

    .modal-custom.cancel-order .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.cancel-order .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.cancel-order .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.cancel-order .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.cancel-order .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}
/* #endregion Cance order modal-custom */
/* #region Cancel order modal */
.modal.cancel-order .modal-dialog {
    max-width: 700px;
    top: calc(50% - 320px);
}

    .modal.cancel-order .modal-dialog .modal-body .content {
        padding: 10px 30px 10px 30px;
        width: 600px;
        margin: 0px auto;
    }


    .modal.cancel-order .modal-dialog .modal-body h5 {
        font-size: 18px;
        font-weight: 400;
    }

    .modal.cancel-order .modal-dialog .modal-body .new-textarea {
        max-height: 200px;
    }

@media (max-width: 727px) {
    .modal.cancel-order .modal-dialog {
        max-width: 100%;
        top: 0px;
    }

        .modal.cancel-order .modal-dialog .modal-body .content {
            width: 100%;
        }
}

@media (max-width: 500px) {
    .modal.cancel-order .modal-dialog .modal-body h5 {
        font-size: 14px;
    }

    .modal.cancel-order .modal-dialog .modal-body .content {
        padding: 10px 10px 10px 10px;
    }

    .modal.cancel-order .modal-dialog .radio.radio-alternate {
        position: relative;
        padding-left: 30px;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    *[dir='rtl'] .modal.cancel-order .modal-dialog .radio.radio-alternate {
        padding-right: 30px;
        padding-left: 0px;
    }

    .modal.cancel-order .modal-dialog .radio.radio-alternate i {
        position: absolute;
        left: 0px;
        top: calc(50% - 15px);
    }

    *[dir='rtl'] .modal.cancel-order .modal-dialog .radio.radio-alternate i {
        left: auto;
        right: 0px;
    }

    .modal.cancel-order .modal-dialog .modal-footer .new-btn {
        min-width: 0px;
    }
}

@media (max-height: 640px) {
    .modal.show.cancel-order {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.cancel-order .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.cancel-order .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.cancel-order .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.cancel-order .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.cancel-order .modal-dialog .modal-footer {
        height: 69px;
    }
}

/* #endregion Cancel order modal */
/* #region Order History - custom modal */
.modal-custom.order-history .modal-window {
    width: 800px;
    left: calc(50% - 400px);
    top: calc(50% - 310px);
}

.modal-custom.order-history .modal-body {
    padding: 0px;
    max-height: 500px;
    min-height: 450px;
}

.modal-custom.order-history .modal-container {
    width: 780px;
    margin: 0px auto 0px auto;
}

.modal-custom.order-history .modal-window .statusbar {
    width: 100%;
    border-bottom: 1px solid #DDDDDD;
    font-size: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: top;
    display: table;
    table-layout: fixed;
}


    .modal-custom.order-history .modal-window .statusbar > * {
        display: table-row;
    }

        .modal-custom.order-history .modal-window .statusbar > * > * {
            display: table-cell;
        }

    .modal-custom.order-history .modal-window .statusbar .delivery-service-block {
        width: 170px;
        font-size: 14px;
        border-right: 1px solid #DDDDDD;
        vertical-align: top;
        text-align: center;
        padding-top: 0px;
    }

*[dir='rtl'] .modal-custom.order-history .modal-window .statusbar .delivery-service-block {
    border-right: 0px none transparent;
    border-left: 1px solid #DDDDDD;
}

.modal-custom.order-history .modal-window .statusbar .address-block {
    font-size: 14px;
    border-right: 1px solid #DDDDDD;
    vertical-align: top;
    padding: 10px 20px 10px 20px;
}

*[dir='rtl'] .modal-custom.order-history .modal-window .statusbar .address-block {
    border-right: 0px none transparent;
    border-left: 1px solid #DDDDDD;
}

.modal-custom.order-history .modal-window .statusbar .date-block {
    width: 35%;
    font-size: 14px;
    vertical-align: top;
    padding: 10px 20px 10px 20px;
}

.modal-custom.order-history .modal-window .statusbar .delivery-service-block {
    width: 170px;
    font-size: 14px;
    border-right: 1px solid #DDDDDD;
    vertical-align: top;
    text-align: center;
}

.modal-custom.order-history .modal-window .statusbar .address-block .content:first-child,
.modal-custom.order-history .modal-window .statusbar .date-block .content:first-child {
    margin-bottom: 20px;
}

.modal-custom.order-history .modal-window .statusbar label {
    margin-bottom: 2px;
    display: block;
}

.modal-custom.order-history .modal-window .statusbar .logo {
    display: inline-block;
    width: 100px;
    height: 60px;
    background-color: #DDDDDD;
    margin-bottom: 6px;
}

.modal-custom.order-history .modal-window .statusbar .logo {
    display: inline-block;
    width: 100px;
    height: 60px;
    margin-bottom: 6px;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.modal-custom.order-history .modal-window .statusbar .date-block bdi {
    padding-right: 5px;
}

*[dir='rtl'] .modal-custom.order-history .modal-window .statusbar .date-block bdi {
    padding-left: 5px;
    padding-right: 0px;
}

.modal-custom.order-history .timeline {
    display: table;
    width: 100%;
    table-layout: fixed;
}

    .modal-custom.order-history .timeline .item {
        display: table-row;
    }

        .modal-custom.order-history .timeline .item > * {
            display: table-cell;
            vertical-align: top;
        }

    .modal-custom.order-history .timeline .date-area {
        color: var(--color-text-muted);
        width: 225px;
        text-align: right;
    }

*[dir='rtl'] .modal-custom.order-history .timeline .date-area {
    text-align: left;
}

.modal-custom.order-history .timeline .date-area bdi + bdi {
    padding-left: 10px;
}

*[dir='rtl'] .modal-custom.order-history .timeline .date-area bdi + bdi {
    padding-left: 0px;
    padding-right: 10px;
}

.modal-custom.order-history .timeline .item .marker-area {
    width: 80px;
    text-align: center;
    position: relative;
    background: url('../../Content/Images/clipart-line-vertical-dashed.svg') repeat-y center top transparent;
}

.modal-custom.order-history .timeline .item.passed .marker-area {
    width: 80px;
    text-align: center;
    background: url('../../Content/Images/clipart-line-vertical-solid.svg') repeat-y center top transparent;
}

.modal-custom.order-history .timeline .item .date-area > * {
    display: none;
}

.modal-custom.order-history .timeline .item.passed .date-area > * {
    display: block;
}

.modal-custom.order-history .timeline .item .content-area .status-item {
    display: none;
}

.modal-custom.order-history .timeline .item.passed .content-area .status-item {
    display: inline-block;
}

.modal-custom.order-history .timeline .item:last-child .marker-area {
    background: none;
}

.modal-custom.order-history .timeline .marker-area .marker-default {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #EBEBEB;
    position: absolute;
    left: calc(50% - 24px);
    top: 0px;
    font-size: 32px;
    border-radius: 50%;
    z-index: 1;
}

.modal-custom.order-history .timeline .item.passed .marker-default {
    width: 20px;
    height: 20px;
    left: calc(50% - 10px);
    top: 0px;
}

    .modal-custom.order-history .timeline .item.passed .marker-default .ci-pazar {
        display: none;
    }

.modal-custom.order-history .timeline .marker-area .marker-default .ci-pazar,
.modal-custom.order-history .timeline .item .marker-warning .ci-pazar,
.modal-custom.order-history .timeline .item .marker-success .ci-pazar-small,
.modal-custom.order-history .timeline .item .marker-success .ci-pazar,
.modal-custom.order-history .timeline .item .marker-error .ci-pazar-small {
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    font-size: 30px;
}

.modal-custom.order-history .timeline .item.cash-delivery .marker-default .ci-pazar:before {
    background-position: -85em 0em;
}

.modal-custom.order-history .timeline .item.card-payment .marker-default .ci-pazar:before {
    background-position: -83em 0em;
}

.modal-custom.order-history .timeline .item.address-delivery .marker-default .ci-pazar:before {
    background-position: -64em 0em;
}

.modal-custom.order-history .timeline .item.shipping-preparation .marker-success .ci-pazar:before {
    background-position: -66em 0em;
}

.modal-custom.order-history .timeline .item.shipping-process .marker-success .ci-pazar:before {
    background-position: -75em 0em;
}

.modal-custom.order-history .timeline .item .marker-success {
    display: none;
    width: 48px;
    height: 48px;
    background-color: var(--color-bg-primary);
    position: absolute;
    left: calc(50% - 24px);
    top: 0px;
    font-size: 32px;
    border-radius: 50%;
    z-index: 1;
}

.modal-custom.order-history .timeline .item.shipping-preparation.success .marker-success .ci-pazar-small,
.modal-custom.order-history .timeline .item.shipping-process.success .marker-success .ci-pazar-small {
    display: none;
}

.modal-custom.order-history .timeline .item.shipping-preparation.success .marker-success .ci-pazar,
.modal-custom.order-history .timeline .item.shipping-process.success .marker-success .ci-pazar {
    display: block;
}

.modal-custom.order-history .timeline .item.address-delivery.success .marker-success .ci-pazar,
.modal-custom.order-history .timeline .item.cash-delivery.success .marker-success .ci-pazar,
.modal-custom.order-history .timeline .item.card-payment.success .marker-success .ci-pazar {
    display: none;
}

.modal-custom.order-history .timeline .item.address-delivery.success .marker-success .ci-pazar-small,
.modal-custom.order-history .timeline .item.cash-delivery.success .marker-success .ci-pazar-small,
.modal-custom.order-history .timeline .item.card-payment.success .marker-success .ci-pazar-small {
    display: block;
}


.modal-custom.order-history .timeline .item .marker-warning {
    display: none;
    width: 48px;
    height: 48px;
    background-color: var(--color-bg-warning);
    position: absolute;
    left: calc(50% - 24px);
    top: 0px;
    font-size: 32px;
    border-radius: 50%;
    z-index: 1;
}

.modal-custom.order-history .timeline .item .marker-error {
    display: none;
    width: 48px;
    height: 48px;
    background-color: var(--color-bg-danger);
    position: absolute;
    left: calc(50% - 24px);
    top: 0px;
    font-size: 32px;
    border-radius: 50%;
    z-index: 1;
}

.modal-custom.order-history .timeline .item.success .marker-warning,
.modal-custom.order-history .timeline .item.success .marker-default,
.modal-custom.order-history .timeline .item.success .marker-error {
    display: none;
}

.modal-custom.order-history .timeline .item.warning .marker-error,
.modal-custom.order-history .timeline .item.warning .marker-success,
.modal-custom.order-history .timeline .item.warning .marker-default {
    display: none;
}

.modal-custom.order-history .timeline .item.error .marker-warning,
.modal-custom.order-history .timeline .item.error .marker-success,
.modal-custom.order-history .timeline .item.error .marker-default {
    display: none;
}

.modal-custom.order-history .timeline .item.error .marker-error {
    display: block;
}

.modal-custom.order-history .timeline .item.warning .marker-warning {
    display: block;
}

.modal-custom.order-history .timeline .item.success .marker-success {
    display: block;
}


.modal-custom.order-history .timeline .content-area {
    padding-bottom: 30px;
}

    .modal-custom.order-history .timeline .content-area .mobile-date-block {
        margin-bottom: 15px;
        display: none;
    }

        .modal-custom.order-history .timeline .content-area .mobile-date-block bdi {
            font-weight: 700;
        }

            .modal-custom.order-history .timeline .content-area .mobile-date-block bdi + bdi {
                padding-left: 10px;
            }

*[dir='rtl'] .modal-custom.order-history .timeline .content-area .mobile-date-block bdi + bdi {
    padding-left: 0px;
    padding-right: 10px;
}

.modal-custom.order-history .timeline .content-area p {
    display: block;
    width: 100%;
    word-break: break-word;
    margin-bottom: 5px;
    line-height: 16px;
}

.modal-custom.order-history .timeline .content-area small {
    display: block;
    width: 100%;
    word-break: break-word;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 8px;
    line-height: 16px;
}

.modal-custom.order-history .timeline .content-area .status-item {
    cursor: auto;
}


@media (max-width: 991px) {
    .modal-custom.order-history .modal-window {
        width: 600px;
        left: calc(50% - 300px);
    }

    .modal-custom.order-history .timeline .date-area {
        color: var(--color-text-muted);
        width: 150px;
        text-align: right;
    }

    .modal-custom.order-history .modal-container {
        width: 100%;
    }
}

@media (max-width: 727px) {

    .modal-custom.order-history .modal-window {
        top: 0px;
        width: 100%;
        left: 0px;
    }

        .modal-custom.order-history .modal-window .statusbar {
            padding-top: 0px;
            padding-bottom: 0px;
        }

            .modal-custom.order-history .modal-window .statusbar,
            .modal-custom.order-history .modal-window .statusbar > *,
            .modal-custom.order-history .modal-window .statusbar > * > * {
                display: block;
                width: 100%;
                background-color: #F9F9F9;
            }

                .modal-custom.order-history .modal-window .statusbar .delivery-service-block,
                .modal-custom.order-history .modal-window .statusbar .address-block,
                .modal-custom.order-history .modal-window .statusbar .date-block {
                    width: 100%;
                }

                .modal-custom.order-history .modal-window .statusbar .delivery-service-block {
                    font-size: 0px;
                    border-bottom: 1px solid #DDDDDD;
                    border-right: 0px none transparent;
                }

    *[dir='rtl'] .modal-custom.order-history .modal-window .statusbar .delivery-service-block {
        border-left: 0px none transparent;
    }

    .modal-custom.order-history .modal-window .statusbar .delivery-service-block .logo {
        display: inline-block;
        font-size: 14px;
        width: 150px;
        text-align: center;
        vertical-align: middle;
        margin-bottom: 0px;
        background-position: left center;
        margin-left: 20px;
    }

    *[dir='rtl'] .modal-custom.order-history .modal-window .statusbar .delivery-service-block .logo {
        background-position: right center;
        margin-right: 20px;
        margin-left: 0px;
    }

    .modal-custom.order-history .modal-window .statusbar .delivery-service-block .content {
        display: inline-block;
        font-size: 14px;
        width: calc(100% - 170px);
        vertical-align: middle;
        text-align: left;
    }

    *[dir='rtl'] .modal-custom.order-history .modal-window .statusbar .delivery-service-block .content {
        text-align: right;
    }

    .modal-custom.order-history .modal-window .statusbar .address-block {
        border-bottom: 1px solid #DDDDDD;
        border-right: 0px none transparent;
    }

    *[dir='rtl'] .modal-custom.order-history .modal-window .statusbar .address-block {
        border-left: 0px none transparent;
    }

    .modal-custom.order-history .modal-window .statusbar .address-block .content:first-child,
    .modal-custom.order-history .modal-window .statusbar .date-block .content:first-child {
        margin-bottom: 5px;
    }

    .modal-custom.order-history .modal-window .statusbar .address-block .content,
    .modal-custom.order-history .modal-window .statusbar .date-block .content {
        display: block;
        width: 100%;
    }

        .modal-custom.order-history .modal-window .statusbar .address-block .content label,
        .modal-custom.order-history .modal-window .statusbar .address-block .content p,
        .modal-custom.order-history .modal-window .statusbar .date-block .content label,
        .modal-custom.order-history .modal-window .statusbar .date-block .content p {
            display: inline-block;
            width: auto;
            vertical-align: baseline;
        }

        .modal-custom.order-history .modal-window .statusbar .address-block .content label,
        .modal-custom.order-history .modal-window .statusbar .date-block .content label {
            margin-right: 10px;
        }

    *[dir='rtl'] .modal-custom.order-history .modal-window .statusbar .address-block .content label,
    *[dir='rtl'] .modal-custom.order-history .modal-window .statusbar .date-block .content label {
        margin-right: 0px;
        margin-left: 10px;
    }


    .modal-custom.order-history .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.order-history .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.order-history .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.order-history .modal-body {
        padding-top: 52px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.order-history .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}

@media (max-width: 599px) {
    .modal-custom.order-history .timeline .date-area {
        display: none;
    }

    .modal-custom.order-history .timeline .item .content-area .mobile-date-block {
        display: none;
    }

    .modal-custom.order-history .timeline .item.passed .content-area .mobile-date-block {
        display: block;
    }
}

@media (max-width: 499px) {
    .modal-custom.order-history .timeline {
        padding-left: 0px;
        padding-right: 0px;
    }

        .modal-custom.order-history .timeline .marker-area {
            width: 48px;
        }

        .modal-custom.order-history .timeline .content-area {
            padding-left: 15px;
        }

    *[dir='rtl'] .modal-custom.order-history .timeline .content-area {
        padding-left: 0px;
        padding-right: 15px;
    }

    .modal-custom.order-history .modal-footer .new-btn {
        min-width: 0px;
    }
}

@media (max-width: 319px) {
    .modal-custom.order-history .modal-window .statusbar .delivery-service-block .logo {
        display: none;
    }

    .modal-custom.order-history .modal-window .statusbar .delivery-service-block .content {
        width: 100%;
        padding: 10px 20px 10px 20px;
    }
}

@media (max-height: 660px) {

    .modal-custom.show.order-history {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal-custom.show.order-history .modal-window {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal-custom.show.order-history .modal-window .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal-custom.show.order-history .modal-window .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal-custom.show.order-history .modal-window.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal-custom.order-history .modal-window .modal-footer {
        height: 69px;
    }
}

@media (max-height: 650px) {

    .modal-custom.order-history .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.order-history .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.order-history .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.order-history .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.order-history .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}

/* #endregion Order History - custom modal */
/* #region Order History modal */
.modal.order-history .modal-dialog {
    max-width: 825px;
    top: calc(50% - 336px);
}

.modal.order-history .modal-body {
    padding: 0px;
    max-height: 500px;
}

.modal.order-history .modal-dialog .statusbar {
    width: 100%;
    border-bottom: 1px solid #DDDDDD;
    font-size: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: top;
    display: table;
    table-layout: fixed;
}


    .modal.order-history .modal-dialog .statusbar > * {
        display: table-row;
    }

        .modal.order-history .modal-dialog .statusbar > * > * {
            display: table-cell;
        }

    .modal.order-history .modal-dialog .statusbar .delivery-service-block {
        width: 170px;
        font-size: 14px;
        border-right: 1px solid #DDDDDD;
        vertical-align: top;
        text-align: center;
        padding-top: 0px;
    }

*[dir='rtl'] .modal.order-history .modal-dialog .statusbar .delivery-service-block {
    border-right: 0px none transparent;
    border-left: 1px solid #DDDDDD;
}

.modal.order-history .modal-dialog .statusbar .address-block {
    font-size: 14px;
    border-right: 1px solid #DDDDDD;
    vertical-align: top;
    padding: 10px 20px 10px 20px;
}

*[dir='rtl'] .modal.order-history .modal-dialog .statusbar .address-block {
    border-right: 0px none transparent;
    border-left: 1px solid #DDDDDD;
}

.modal.order-history .modal-dialog .statusbar .date-block {
    width: 35%;
    font-size: 14px;
    vertical-align: top;
    padding: 10px 20px 10px 20px;
}

.modal.order-history .modal-dialog .statusbar .delivery-service-block {
    width: 170px;
    font-size: 14px;
    border-right: 1px solid #DDDDDD;
    vertical-align: top;
    text-align: center;
}

.modal.order-history .modal-dialog .statusbar .address-block .content:first-child,
.modal.order-history .modal-dialog .statusbar .date-block .content:first-child {
    margin-bottom: 20px;
}

.modal.order-history .modal-dialog .statusbar label {
    margin-bottom: 2px;
    display: block;
}

.modal.order-history .modal-dialog .statusbar .logo {
    display: inline-block;
    width: 100px;
    height: 60px;
    background-color: #DDDDDD;
    margin-bottom: 6px;
}

.modal.order-history .modal-dialog .statusbar .logo {
    display: inline-block;
    width: 100px;
    height: 60px;
    margin-bottom: 6px;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.modal.order-history .modal-dialog .statusbar .date-block bdi {
    padding-right: 5px;
}

*[dir='rtl'] .modal.order-history .modal-dialog .statusbar .date-block bdi {
    padding-left: 5px;
    padding-right: 0px;
}

.timeline {
    display: block;
    width: 800px;
    margin: 40px auto 40px auto;
    padding-left: 20px;
    padding-right: 20px;
}

    .timeline .timeline-item {
        display: block;
        width: 100%;
        font-size: 0px;
        vertical-align: top;
    }

        .timeline .timeline-item .date-block {
            display: inline-block;
            font-size: 14px;
            width: 225px;
            vertical-align: top;
            text-align: right;
            padding-right: 35px;
            padding-top: 11px;
        }

*[dir='rtl'] .timeline .timeline-item .date-block {
    text-align: left;
    padding-right: 0px;
    padding-left: 35px;
}

.timeline .timeline-item .content-block {
    display: inline-block;
    font-size: 14px;
    position: relative;
    width: calc(100% - 225px);
    vertical-align: top;
    border-left: 1px dashed #E7E7E7;
    padding-left: 35px;
    padding-bottom: 30px;
}

*[dir='rtl'] .timeline .timeline-item .content-block {
    border-left: 0px none transparent;
    border-right: 1px dashed #E7E7E7;
    padding-left: 0px;
    padding-right: 35px;
}

.timeline .timeline-item .content-block .status-item {
    cursor: default;
}

.timeline .marker {
    display: block;
    position: absolute;
    top: 10px;
    left: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #E7E7E7;
    z-index: 1;
}

*[dir='rtl'] .timeline .marker {
    right: -10px;
    left: auto;
}

.timeline .timeline-item.passed .marker.marker-default {
    display: none;
}

.timeline .marker.marker-default {
    display: block;
    position: absolute;
    top: 0px;
    left: -20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #E7E7E7;
    font-size: 26px;
    z-index: 2;
}


*[dir='rtl'] .timeline .marker.marker-default {
    right: -20px;
    left: auto;
}

.timeline .marker.marker-active {
    display: none;
    position: absolute;
    top: 0px;
    left: -20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-bg-primary);
    font-size: 26px;
    z-index: 3;
}

*[dir='rtl'] .timeline .marker.marker-active {
    right: -20px;
    left: auto;
}

.timeline .marker.marker-warning {
    display: none;
    position: absolute;
    top: 0px;
    left: -20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-bg-warning);
    font-size: 26px;
    z-index: 4;
}

*[dir='rtl'] .timeline .marker.marker-warning {
    right: -20px;
    left: auto;
}

.timeline .marker.marker-error {
    display: none;
    position: absolute;
    top: 0px;
    left: -20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-bg-danger);
    font-size: 26px;
    z-index: 5;
}

*[dir='rtl'] .timeline .marker.marker-error {
    right: -20px;
    left: auto;
}

.timeline .marker.marker-active i,
.timeline .marker.marker-default i,
.timeline .marker.marker-warning i,
.timeline .marker.marker-error i {
    top: calc(50% - 13px);
    left: calc(50% - 13px);
    position: absolute;
}

*[dir='rtl'] .timeline .marker.marker-active i,
*[dir='rtl'] .timeline .marker.marker-default i,
*[dir='rtl'] .timeline .marker.marker-warning i,
*[dir='rtl'] .timeline .marker.marker-error i {
    left: auto;
    right: calc(50% - 13px);
}

.timeline .timeline-item .date-block bdi {
    padding-left: 15px;
}

*[dir='rtl'] .timeline .timeline-item .date-block bdi {
    padding-left: 0px;
    padding-right: 15px;
}

.timeline .timeline-item .content-block .mobile-date-block {
    margin-bottom: 15px;
    display: none;
}

    .timeline .timeline-item .content-block .mobile-date-block bdi {
        padding-right: 15px;
        font-weight: 700;
    }

*[dir='rtl'] .timeline .timeline-item .content-block .mobile-date-block bdi {
    padding-right: 0px;
    padding-left: 15px;
}

.timeline .timeline-item .content-block p {
    display: block;
    width: 100%;
    word-break: break-word;
    margin-bottom: 5px;
}

.timeline .timeline-item .content-block small {
    display: block;
    width: 100%;
    word-break: break-word;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 8px;
}

.timeline .timeline-item.passed .content-block {
    border-left: 1px solid #E7E7E7;
}

*[dir='rtl'] .timeline .timeline-item.passed .content-block {
    border-left: 0px none transparent;
    border-right: 1px solid #E7E7E7;
}

.timeline .timeline-item.active .marker-active {
    display: block;
}

.timeline .timeline-item.active .marker-default {
    display: none;
}

.timeline .timeline-item.warning .marker-warning {
    display: block;
}

.timeline .timeline-item.warning .marker-default,
.timeline .timeline-item.warning .marker-active {
    display: none;
}

.timeline .timeline-item.error .marker-error {
    display: block;
}

.timeline .timeline-item.error .marker-default,
.timeline .timeline-item.error .marker-active,
.timeline .timeline-item.error .marker-warning {
    display: none;
}

.timeline .timeline-item:last-child .content-block {
    border-left: 1px none transparent;
    padding-bottom: 0px;
}

*[dir='rtl'] .timeline .timeline-item:last-child .content-block {
    border-left: 0px none transparent;
    border-right: 1px none transparent;
}

.timeline .timeline-item:last-child .marker:before {
    content: '';
    display: block;
    width: 1px;
    height: 20px;
    background-color: #E7E7E7;
    top: -15px;
    left: 50%;
    position: absolute;
}

*[dir='rtl'] .timeline .timeline-item:last-child .marker:before {
    right: 50%;
    left: auto;
}

.timeline .timeline-item.active:last-child .marker:before,
*[dir='rtl'] .timeline .timeline-item.active:last-child .marker:before {
    display: none;
}

.timeline .timeline-item .date-block bdo {
    display: none;
}

.timeline .timeline-item.passed .date-block bdo {
    display: block;
}

.timeline .timeline-item .content-block .status-item {
    display: none;
}

.timeline .timeline-item.passed .content-block .status-item {
    display: inline-block;
}

@media (max-width: 991px) {
    .modal.order-history .modal-dialog {
        max-width: 600px;
    }

    .timeline {
        display: block;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media (max-width: 727px) {

    .modal.order-history .modal-dialog {
        top: 0px;
        max-width: 100%;
    }

        .modal.order-history .modal-dialog .statusbar {
            padding-top: 0px;
            padding-bottom: 0px;
        }

            .modal.order-history .modal-dialog .statusbar,
            .modal.order-history .modal-dialog .statusbar > *,
            .modal.order-history .modal-dialog .statusbar > * > * {
                display: block;
                width: 100%;
                background-color: #F9F9F9;
            }

                .modal.order-history .modal-dialog .statusbar .delivery-service-block,
                .modal.order-history .modal-dialog .statusbar .address-block,
                .modal.order-history .modal-dialog .statusbar .date-block {
                    width: 100%;
                }

                .modal.order-history .modal-dialog .statusbar .delivery-service-block {
                    font-size: 0px;
                    border-bottom: 1px solid #DDDDDD;
                    border-right: 0px none transparent;
                }

    *[dir='rtl'] .modal.order-history .modal-dialog .statusbar .delivery-service-block {
        border-left: 0px none transparent;
    }

    .modal.order-history .modal-dialog .statusbar .delivery-service-block .logo {
        display: inline-block;
        font-size: 14px;
        width: 150px;
        text-align: center;
        vertical-align: middle;
        margin-bottom: 0px;
        background-position: left center;
        margin-left: 20px;
    }

    *[dir='rtl'] .modal.order-history .modal-dialog .statusbar .delivery-service-block .logo {
        background-position: right center;
        margin-right: 20px;
        margin-left: 0px;
    }

    .modal.order-history .modal-dialog .statusbar .delivery-service-block .content {
        display: inline-block;
        font-size: 14px;
        width: calc(100% - 170px);
        vertical-align: middle;
        text-align: left;
    }

    *[dir='rtl'] .modal.order-history .modal-dialog .statusbar .delivery-service-block .content {
        text-align: right;
    }

    .modal.order-history .modal-dialog .statusbar .address-block {
        border-bottom: 1px solid #DDDDDD;
        border-right: 0px none transparent;
    }

    *[dir='rtl'] .modal.order-history .modal-dialog .statusbar .address-block {
        border-left: 0px none transparent;
    }

    .modal.order-history .modal-dialog .statusbar .address-block .content:first-child,
    .modal.order-history .modal-dialog .statusbar .date-block .content:first-child {
        margin-bottom: 5px;
    }

    .modal.order-history .modal-dialog .statusbar .address-block .content,
    .modal.order-history .modal-dialog .statusbar .date-block .content {
        display: block;
        width: 100%;
    }

        .modal.order-history .modal-dialog .statusbar .address-block .content label,
        .modal.order-history .modal-dialog .statusbar .address-block .content p,
        .modal.order-history .modal-dialog .statusbar .date-block .content label,
        .modal.order-history .modal-dialog .statusbar .date-block .content p {
            display: inline-block;
            width: auto;
            vertical-align: baseline;
        }

        .modal.order-history .modal-dialog .statusbar .address-block .content label,
        .modal.order-history .modal-dialog .statusbar .date-block .content label {
            margin-right: 10px;
        }

    *[dir='rtl'] .modal.order-history .modal-dialog .statusbar .address-block .content label,
    *[dir='rtl'] .modal.order-history .modal-dialog .statusbar .date-block .content label {
        margin-right: 0px;
        margin-left: 10px;
    }
}

@media (max-width: 599px) {
    .timeline .timeline-item .date-block {
        padding-top: 0px;
    }

        .timeline .timeline-item .date-block bdi {
            display: block;
            width: 100%;
            margin-bottom: 5px;
        }

    .timeline .timeline-item .date-block {
        width: 150px;
    }

    .timeline .timeline-item .content-block {
        width: calc(100% - 150px);
    }
}

@media (max-width: 499px) {

    .timeline .timeline-item .date-block {
        display: none;
    }

    .timeline .timeline-item .content-block {
        width: 100%;
    }

    .timeline .timeline-item.passed .content-block .mobile-date-block {
        display: block;
    }

    .timeline .timeline-item {
        padding-left: 10px;
    }

    *[dir='rtl'] .timeline .timeline-item {
        padding-right: 10px;
        padding-left: 0px;
    }
}

@media (max-width: 319px) {
    .modal.order-history .modal-dialog .statusbar .delivery-service-block .logo {
        display: none;
    }

    .modal.order-history .modal-dialog .statusbar .delivery-service-block .content {
        width: 100%;
        padding: 10px 20px 10px 20px;
    }
}

@media (max-height: 660px) {

    .modal.show.order-history {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.order-history .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.order-history .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.order-history .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.order-history .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.order-history .modal-dialog .modal-footer {
        height: 69px;
    }
}

/* #endregion Order History modal */
/* #region Edit info modal */
.modal.edit-delivery-info .modal-dialog {
    max-width: 900px;
    top: calc(50% - 400px);
}

.modal.edit-delivery-info .content-container {
    display: block;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.modal.edit-delivery-info .map-container {
    width: 100%;
    height: 300px;
    padding-top: 20px;
}

.modal.edit-delivery-info .location-map {
    width: 100%;
    height: 100%;
    display: block;
}

.modal.edit-delivery-info .item-panel {
    display: table;
    width: 100%;
    padding: 8px;
    border-radius: var(--radius-4);
    background-color: #E6F4ED;
    table-layout: fixed;
}

    .modal.edit-delivery-info .item-panel > * {
        display: table-row;
    }

        .modal.edit-delivery-info .item-panel > * > * {
            display: table-cell;
            vertical-align: top;
        }

    .modal.edit-delivery-info .item-panel .product-image-area {
        width: 125px;
        text-align: center;
        position: relative;
    }

    .modal.edit-delivery-info .item-panel .product-price-area {
        width: 180px;
        text-align: center;
        border-left: 1px solid #DDDDDD;
    }

*[dir='rtl'] .modal.edit-delivery-info .item-panel .product-price-area {
    border-right: 1px solid #DDDDDD;
    border-left: 0px none transparent;
}

.modal.edit-delivery-info .scrollbar-vertical {
    max-height: 500px;
    overflow-y: scroll;
}

.modal.edit-delivery-info .item-panel .product-price-area label {
    font-size: 14px;
    font-weight: 400;
}

.modal.edit-delivery-info .item-panel .product-price-area p {
    font-size: 18px;
    font-weight: 400;
}

.modal.edit-delivery-info .item-panel .price-block:first-child {
    margin-bottom: 10px;
}

.modal.edit-delivery-info .item-panel .product-description-area {
    padding-left: 10px;
    padding-right: 10px;
}

    .modal.edit-delivery-info .item-panel .product-description-area .order-info-block {
        margin-bottom: 10px;
        font-size: 0px;
    }

        .modal.edit-delivery-info .item-panel .product-description-area .order-info-block .order-number {
            margin-right: 15px;
            font-size: 14px;
        }

*[dir='rtl'] .modal.edit-delivery-info .item-panel .product-description-area .order-info-block .order-number {
    margin-left: 15px;
    margin-right: 0px;
}


.modal.edit-delivery-info .item-panel .product-description-area .order-info-block .order-number bdi:last-child {
    margin-left: 10px;
}

*[dir='rtl'] .modal.edit-delivery-info .item-panel .product-description-area .order-info-block .order-number bdi:last-child {
    margin-left: 0px;
    margin-right: 10px;
}

.modal.edit-delivery-info .item-panel .product-description-area .order-info-block .order-date {
    padding-left: 15px;
    border-left: 1px solid #DDDDDD;
    font-size: 14px;
}

*[dir='rtl'] .modal.edit-delivery-info .item-panel .product-description-area .order-info-block .order-date {
    padding-left: 0px;
    padding-right: 15px;
    border-left: 0px none transparent;
    border-right: 1px solid #DDDDDD;
    font-size: 14px;
}

.modal.edit-delivery-info .item-panel .product-description-area .order-info-block .order-date bdi {
    margin-right: 10px;
}

*[dir='rtl'] .modal.edit-delivery-info .item-panel .product-description-area .order-info-block .order-date bdi {
    margin-right: 0px;
    margin-left: 10px;
}

.modal.edit-delivery-info .item-panel .product-description-area .goods-title {
    font-size: 18px;
    font-weight: 400;
    word-break: break-word;
    margin-bottom: 10px;
}

.modal.edit-delivery-info .item-panel .product-image-area .product-img-container {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-color: #F2F2F2;
    border-radius: var(--radius-4);
    position: absolute;
}

    .modal.edit-delivery-info .item-panel .product-image-area .product-img-container .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .modal.edit-delivery-info .item-panel .product-image-area .product-img-container .ci-pazar {
        position: absolute;
        font-size: 80px;
        top: calc(50% - 40px);
        left: calc(50% - 40px);
        opacity: 0.2;
    }

    .modal.edit-delivery-info .item-panel .product-image-area .product-img-container .img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border-radius: var(--radius-4);
        background-color: transparent;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

*[dir='rtl'] .modal.edit-delivery-info .item-panel .product-image-area .product-img-container .img {
    right: 0px;
    left: auto;
}

.modal.edit-delivery-info .delivery-info {
    display: block;
    width: 100%;
    position: relative;
    table-layout: fixed;
    margin-top: 20px;
}

    .modal.edit-delivery-info .delivery-info h4 {
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 5px;
    }

    .modal.edit-delivery-info .delivery-info p {
        margin-bottom: 20px;
    }

    .modal.edit-delivery-info .delivery-info h5 {
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 20px;
    }



.modal.edit-delivery-info .warning-block {
    display: none;
    width: 100%;
    padding-left: 34px;
}

*[dir='rtl'] .modal.edit-delivery-info .warning-block {
    padding-left: 0px;
    padding-right: 34px;
}

    .modal.edit-delivery-info .warning-block.active,
    *[dir='rtl'] .modal.edit-delivery-info .warning-block.active {
        display: block;
    }

.modal.edit-delivery-info .warning-block {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .modal.edit-delivery-info .warning-block i {
        display: inline-block;
        position: absolute;
        top: calc(50% - 13px);
        left: 0px;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: var(--color-bg-warning);
        color: var(--color-text-basic);
        font-style: normal;
        font-weight: 700;
        padding: 2px;
        text-align: center;
        z-index: 1;
        font-size: 18px;
    }

*[dir='rtl'] .modal.edit-delivery-info .warning-block i {
    right: 0px;
    left: auto;
}

.modal.edit-delivery-info h3 {
    display: block;
    width: 100%;
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    margin-top: 20px;
}

@media (max-height: 800px) {
    .modal.edit-delivery-info .modal-dialog {
        top: 0px;
        left: 0px;
        max-width: 100%;
        margin: 0px;
        height: 100%;
    }

    .modal.edit-delivery-info .modal-body {
        max-height: calc(100% - 121px) !important;
    }

    .modal.edit-delivery-info.show {
        padding: 0px !important;
        margin: 0px !important;
    }

    .modal.edit-delivery-info .modal-content {
        border-radius: var(--radius-0);
        border: 0px;
        height: 100%;
    }

    .modal.edit-delivery-info .modal-footer {
        height: 69px;
    }
}

@media (max-width: 991px) and (min-height: 801px) {
    .modal.edit-delivery-info .modal-dialog {
        max-width: 700px;
    }

        .modal.edit-delivery-info .modal-dialog .modal-body {
            max-height: 500px;
        }

    .modal.edit-delivery-info .order-info-block .order-number,
    .modal.edit-delivery-info .order-info-block .order-date {
        display: block;
        width: 100%;
    }

    .modal.edit-delivery-info .item-panel .product-description-area .order-info-block .order-date {
        padding-left: 0px;
        border-left: 0px none transparent;
    }

    *[dir='rtl'] .modal.edit-delivery-info .item-panel .product-description-area .order-info-block .order-date {
        padding-left: 0px;
        padding-right: 0px;
        border-right: 0px none transparent;
    }
}

@media (max-width: 728px) {
    .modal.edit-delivery-info .modal-dialog {
        top: 0px;
        left: 0px;
        max-width: 100%;
    }





    .modal.edit-delivery-info .delivery-info h4 {
        text-align: left;
    }

    *[dir='rtl'] .modal.edit-delivery-info .delivery-info h4 {
        text-align: right;
    }

    .modal.edit-delivery-info .delivery-info .left-side p {
        min-height: 0px;
    }

    .modal.edit-delivery-info .warning-block {
        border-top: 1px solid #DDDDDD;
        padding-top: 20px;
    }
}

@media (max-width: 600px) {
    .modal.edit-delivery-info .item-panel {
        display: none;
    }

    .modal.edit-delivery-info .delivery-info {
        margin-top: 0px;
    }


        .modal.edit-delivery-info .delivery-info h4 {
            font-size: 18px;
            font-weight: 700;
        }

        .modal.edit-delivery-info .delivery-info h5 {
            font-size: 14px;
            font-weight: 700;
        }

    .modal.edit-delivery-info h3 {
        margin-top: 20px;
        margin-bottom: 30px;
        font-weight: 400;
        font-size: 28px;
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media (max-width: 500px) {
    .modal.edit-delivery-info .modal-footer .new-btn {
        min-width: 0px;
    }

    .modal.edit-delivery-info .warning-block i {
        top: 24px;
    }

    .modal.edit-delivery-info h3 {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 400px) {
    .modal.edit-delivery-info h3 {
        font-size: 24px;
        margin-top: 30px;
        margin-bottom: 40px;
    }
}
/* #endregion Edit info modal */


/* #region Edit info Success - Custom Modal */
.modal-custom.edit-info-success .modal-window {
    max-width: 800px;
    top: calc(50% - 300px);
}

.modal-custom.edit-info-success .clipart-area,
.modal-custom.order-confirmation-success .clipart-area {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
}

    .modal-custom.edit-info-success .clipart-area h5,
    .modal-custom.order-confirmation-success .clipart-area h5 {
        display: block;
        width: 100%;
        font-size: 64px;
        text-align: center;
        text-transform: uppercase;
        font-weight: 700;
        position: absolute;
        z-index: 3;
        top: 20%;
    }

    .modal-custom.edit-info-success .clipart-area h6,
    .modal-custom.order-confirmation-success .clipart-area h6 {
        display: block;
        width: 100%;
        font-size: 18px;
        text-align: center;
        font-weight: 500;
        z-index: 3;
        position: absolute;
        top: 60%;
    }

.modal-custom.edit-info-success .clipart-block,
.modal-custom.order-confirmation-success .clipart-block {
    display: block;
    width: 240px;
    height: 240px;
    margin: 0px auto;
}

    .modal-custom.edit-info-success .clipart-block .inner,
    .modal-custom.order-confirmation-success .clipart-block .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

.modal-custom.edit-info-success p {
    display: block;
    width: 100%;
    padding-left: 140px;
    padding-right: 140px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

.modal-custom.edit-info-success .clipart-block .clipart-cloud-1,
.modal-custom.edit-info-success .clipart-block .clipart-cloud-2,
.modal-custom.edit-info-success .clipart-block .clipart-cloud-3,
.modal-custom.edit-info-success .clipart-block .clipart-cloud-4,
.modal-custom.edit-info-success .clipart-block .clipart-cloud-5,
.modal-custom.edit-info-success .clipart-block .clipart-cloud-6,
.modal-custom.edit-info-success .clipart-block .clipart-cloud-7,
.modal-custom.edit-info-success .clipart-block .clipart-cloud-8,
.modal-custom.edit-info-success .clipart-block .clipart-cloud-9,
.modal-custom.edit-info-success .clipart-block .clipart-cloud-10,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-1,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-2,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-3,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-4,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-5,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-6,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-7,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-8,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-9,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-10 {
    position: absolute;
    z-index: 1;
    background-color: #F2F2F2;
    border-radius: 50%;
}

.modal-custom.edit-info-success .clipart-block .clipart-cloud-1,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-1 {
    top: 7%;
    left: 7%;
    width: 45%;
    height: 45%;
    -webkit-animation: editinfo-success-cloud-1 1.4s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-1 1.4s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-block .clipart-cloud-2,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-2 {
    top: 3%;
    left: 41%;
    width: 28%;
    height: 28%;
    -webkit-animation: editinfo-success-cloud-2 1.2s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-2 1.2s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-block .clipart-cloud-3,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-3 {
    top: 18%;
    left: 57%;
    width: 22%;
    height: 22%;
    -webkit-animation: editinfo-success-cloud-3 1.3s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-3 1.3s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-block .clipart-cloud-4,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-4 {
    top: 26%;
    left: 71%;
    width: 24%;
    height: 24%;
    -webkit-animation: editinfo-success-cloud-4 1.4s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-4 1.4s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-block .clipart-cloud-5,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-5 {
    top: 40%;
    left: 52%;
    width: 44%;
    height: 44%;
    -webkit-animation: editinfo-success-cloud-5 1.6s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-5 1.6s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-block .clipart-cloud-6,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-6 {
    top: 70%;
    left: 66%;
    width: 20%;
    height: 20%;
    -webkit-animation: editinfo-success-cloud-6 1.5s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-6 1.5s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-block .clipart-cloud-7,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-7 {
    top: 61%;
    left: 47%;
    width: 25%;
    height: 25%;
    -webkit-animation: editinfo-success-cloud-7 1.3s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-7 1.3s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-block .clipart-cloud-8,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-8 {
    top: 52%;
    left: 14%;
    width: 45%;
    height: 45%;
    -webkit-animation: editinfo-success-cloud-8 1.5s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-8 1.5s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-block .clipart-cloud-9,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-9 {
    top: 41%;
    left: 4%;
    width: 34%;
    height: 34%;
    -webkit-animation: editinfo-success-cloud-9 1.3s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-9 1.3s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-block .clipart-cloud-10,
.modal-custom.order-confirmation-success .clipart-block .clipart-cloud-10 {
    top: 23%;
    left: 33%;
    width: 44%;
    height: 44%;
}

@keyframes editinfo-success-cloud-1 {
    from {
        transform: translate(-3%, -3%);
    }

    to {
        transform: translate(8%, 7%);
    }
}

@-webkit-keyframes editinfo-success-cloud-1 {
    from {
        -webkit-transform: translate(-3%, -3%);
    }

    to {
        -webkit-transform: translate(8%, 7%);
    }
}

@keyframes editinfo-success-cloud-2 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -3%);
    }
}

@-webkit-keyframes editinfo-success-cloud-2 {
    from {
        -webkit-transform: translate(0%, 5%);
    }

    to {
        -webkit-transform: translate(0%, -3%);
    }
}

@keyframes editinfo-success-cloud-3 {
    from {
        transform: translate(2%, -8%);
    }

    to {
        transform: translate(-3%, 12%);
    }
}

@-webkit-keyframes editinfo-success-cloud-3 {
    from {
        -webkit-transform: translate(2%, -8%);
    }

    to {
        -webkit-transform: translate(-3%, 12%);
    }
}

@keyframes editinfo-success-cloud-4 {
    from {
        transform: translate(-6%, 4%);
    }

    to {
        transform: translate(8%, -8%);
    }
}

@-webkit-keyframes editinfo-success-cloud-4 {
    from {
        -webkit-transform: translate(-6%, 4%);
    }

    to {
        -webkit-transform: translate(8%, -8%);
    }
}

@keyframes editinfo-success-cloud-5 {
    from {
        transform: translate(5%, 2%);
    }

    to {
        transform: translate(-8%, -2%);
    }
}

@-webkit-keyframes editinfo-success-cloud-5 {
    from {
        -webkit-transform: translate(5%, 2%);
    }

    to {
        -webkit-transform: translate(-8%, -2%);
    }
}

@keyframes editinfo-success-cloud-6 {
    from {
        transform: translate(-2%, -4%);
    }

    to {
        transform: translate(2%, 4%);
    }
}

@-webkit-keyframes editinfo-success-cloud-6 {
    from {
        -webkit-transform: translate(-2%, -4%);
    }

    to {
        -webkit-transform: translate(2%, 4%);
    }
}

@keyframes editinfo-success-cloud-7 {
    from {
        transform: translate(1%, 16%);
    }

    to {
        transform: translate(-1%, -4%);
    }
}

@-webkit-keyframes editinfo-success-cloud-7 {
    from {
        -webkit-transform: translate(1%, 16%);
    }

    to {
        -webkit-transform: translate(-1%, -4%);
    }
}

@keyframes editinfo-success-cloud-8 {
    from {
        transform: translate(2%, -8%);
    }

    to {
        transform: translate(-2%, 4%);
    }
}

@-webkit-keyframes editinfo-success-cloud-8 {
    from {
        -webkit-transform: translate(2%, -8%);
    }

    to {
        -webkit-transform: translate(-2%, 4%);
    }
}

@keyframes editinfo-success-cloud-9 {
    from {
        transform: translate(-9%, 0%);
    }

    to {
        transform: translate(8%, 0%);
    }
}

@-webkit-keyframes editinfo-success-cloud-9 {
    from {
        -webkit-transform: translate(-9%, 0%);
    }

    to {
        -webkit-transform: translate(8%, 0%);
    }
}

@media (max-height: 780px) {
    .modal-custom.order-confirmation-success.new.show {
        padding: 0px !important;
        margin: 0px !important;
    }

    .modal-custom.order-confirmation-success.new .modal-dialog {
        top: 0px;
        left: 0px;
        max-width: 100%;
        margin: 0px;
        height: 100%;
    }

        .modal-custom.order-confirmation-success.new .modal-dialog .modal-content {
            border-radius: var(--radius-0);
            border: 0px;
            height: 100%;
            box-shadow: none;
        }

        .modal-custom.order-confirmation-success.new .modal-dialog .modal-body {
            max-height: calc(100% - 121px) !important;
        }

        .modal-custom.order-confirmation-success.new .modal-dialog .modal-footer {
            height: 69px;
        }
}

@media (max-width: 991px) {
    .modal-custom.edit-info-success .modal-dialog,
    .modal-custom.order-confirmation-success .modal-dialog {
        max-width: 600px;
    }

    .modal-custom.edit-info-success p {
        display: block;
        width: 100%;
        padding-left: 100px;
        padding-right: 100px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}



@media (max-width: 728px) {
    .modal-custom.edit-info-success .modal-dialog,
    .modal-custom.order-confirmation-success .modal-dialog {
        max-width: 100%;
        top: 0px;
    }
}



@media (max-width: 600px) {
    .modal-custom.edit-info-success .clipart-area h5,
    .modal-custom.order-confirmation-success .clipart-area h5 {
        display: block;
        width: 100%;
        font-size: 48px;
        text-align: center;
        text-transform: uppercase;
        font-weight: 700;
        position: absolute;
        z-index: 3;
        top: 20%;
    }

    .modal-custom.edit-info-success .clipart-area h6,
    .modal-custom.order-confirmation-success .clipart-area h6 {
        display: block;
        width: 100%;
        font-size: 18px;
        text-align: center;
        font-weight: 500;
        z-index: 3;
        position: absolute;
        top: 60%;
    }

    .modal.edit-info-success .clipart-block,
    .modal.order-confirmation-success .clipart-block .clipart-block {
        width: 200px;
        height: 200px;
    }

    .modal-custom.edit-info-success p {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media (max-width: 450px) {
    .modal-custom.edit-info-success .clipart-area h5,
    .modal-custom.order-confirmation-success .clipart-area h5 {
        font-size: 36px;
        top: 20%;
    }

    .modal-custom.edit-info-success p {
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .modal-custom.edit-info-success .clipart-area h6,
    .modal-custom.order-confirmation-success .clipart-area h6 {
        font-size: 16px;
        top: 50%;
    }
}
/* #endregion Edit info Success - Custom Modal */
/* #region Edit info Success */
.modal.edit-info-success .modal-dialog {
    max-width: 800px;
    top: calc(50% - 300px);
}

.modal.edit-info-success .clipart-area,
.modal.order-confirmation-success .clipart-area {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
}

    .modal.edit-info-success .clipart-area h5,
    .modal.order-confirmation-success .clipart-area h5 {
        display: block;
        width: 100%;
        font-size: 64px;
        text-align: center;
        text-transform: uppercase;
        font-weight: 700;
        position: absolute;
        z-index: 3;
        top: 20%;
    }

    .modal.edit-info-success .clipart-area h6,
    .modal.order-confirmation-success .clipart-area h6 {
        display: block;
        width: 100%;
        font-size: 18px;
        text-align: center;
        font-weight: 500;
        z-index: 3;
        position: absolute;
        top: 60%;
    }

.modal.edit-info-success .clipart-block,
.modal.order-confirmation-success .clipart-block {
    display: block;
    width: 240px;
    height: 240px;
    margin: 0px auto;
}

    .modal.edit-info-success .clipart-block .inner,
    .modal.order-confirmation-success .clipart-block .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

.modal.edit-info-success p {
    display: block;
    width: 100%;
    padding-left: 140px;
    padding-right: 140px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

.modal.edit-info-success .clipart-block .clipart-cloud-1,
.modal.edit-info-success .clipart-block .clipart-cloud-2,
.modal.edit-info-success .clipart-block .clipart-cloud-3,
.modal.edit-info-success .clipart-block .clipart-cloud-4,
.modal.edit-info-success .clipart-block .clipart-cloud-5,
.modal.edit-info-success .clipart-block .clipart-cloud-6,
.modal.edit-info-success .clipart-block .clipart-cloud-7,
.modal.edit-info-success .clipart-block .clipart-cloud-8,
.modal.edit-info-success .clipart-block .clipart-cloud-9,
.modal.edit-info-success .clipart-block .clipart-cloud-10,
.modal.order-confirmation-success .clipart-block .clipart-cloud-1,
.modal.order-confirmation-success .clipart-block .clipart-cloud-2,
.modal.order-confirmation-success .clipart-block .clipart-cloud-3,
.modal.order-confirmation-success .clipart-block .clipart-cloud-4,
.modal.order-confirmation-success .clipart-block .clipart-cloud-5,
.modal.order-confirmation-success .clipart-block .clipart-cloud-6,
.modal.order-confirmation-success .clipart-block .clipart-cloud-7,
.modal.order-confirmation-success .clipart-block .clipart-cloud-8,
.modal.order-confirmation-success .clipart-block .clipart-cloud-9,
.modal.order-confirmation-success .clipart-block .clipart-cloud-10 {
    position: absolute;
    z-index: 1;
    background-color: #F2F2F2;
    border-radius: 50%;
}

.modal.edit-info-success .clipart-block .clipart-cloud-1,
.modal.order-confirmation-success .clipart-block .clipart-cloud-1 {
    top: 7%;
    left: 7%;
    width: 45%;
    height: 45%;
    -webkit-animation: editinfo-success-cloud-1 1.4s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-1 1.4s ease-in-out infinite alternate;
}

.modal.edit-info-success .clipart-block .clipart-cloud-2,
.modal.order-confirmation-success .clipart-block .clipart-cloud-2 {
    top: 3%;
    left: 41%;
    width: 28%;
    height: 28%;
    -webkit-animation: editinfo-success-cloud-2 1.2s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-2 1.2s ease-in-out infinite alternate;
}

.modal.edit-info-success .clipart-block .clipart-cloud-3,
.modal.order-confirmation-success .clipart-block .clipart-cloud-3 {
    top: 18%;
    left: 57%;
    width: 22%;
    height: 22%;
    -webkit-animation: editinfo-success-cloud-3 1.3s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-3 1.3s ease-in-out infinite alternate;
}

.modal.edit-info-success .clipart-block .clipart-cloud-4,
.modal.order-confirmation-success .clipart-block .clipart-cloud-4 {
    top: 26%;
    left: 71%;
    width: 24%;
    height: 24%;
    -webkit-animation: editinfo-success-cloud-4 1.4s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-4 1.4s ease-in-out infinite alternate;
}

.modal.edit-info-success .clipart-block .clipart-cloud-5,
.modal.order-confirmation-success .clipart-block .clipart-cloud-5 {
    top: 40%;
    left: 52%;
    width: 44%;
    height: 44%;
    -webkit-animation: editinfo-success-cloud-5 1.6s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-5 1.6s ease-in-out infinite alternate;
}

.modal.edit-info-success .clipart-block .clipart-cloud-6,
.modal.order-confirmation-success .clipart-block .clipart-cloud-6 {
    top: 70%;
    left: 66%;
    width: 20%;
    height: 20%;
    -webkit-animation: editinfo-success-cloud-6 1.5s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-6 1.5s ease-in-out infinite alternate;
}

.modal.edit-info-success .clipart-block .clipart-cloud-7,
.modal.order-confirmation-success .clipart-block .clipart-cloud-7 {
    top: 61%;
    left: 47%;
    width: 25%;
    height: 25%;
    -webkit-animation: editinfo-success-cloud-7 1.3s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-7 1.3s ease-in-out infinite alternate;
}

.modal.edit-info-success .clipart-block .clipart-cloud-8,
.modal.order-confirmation-success .clipart-block .clipart-cloud-8 {
    top: 52%;
    left: 14%;
    width: 45%;
    height: 45%;
    -webkit-animation: editinfo-success-cloud-8 1.5s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-8 1.5s ease-in-out infinite alternate;
}

.modal.edit-info-success .clipart-block .clipart-cloud-9,
.modal.order-confirmation-success .clipart-block .clipart-cloud-9 {
    top: 41%;
    left: 4%;
    width: 34%;
    height: 34%;
    -webkit-animation: editinfo-success-cloud-9 1.3s ease-in-out infinite alternate;
    animation: editinfo-success-cloud-9 1.3s ease-in-out infinite alternate;
}

.modal.edit-info-success .clipart-block .clipart-cloud-10,
.modal.order-confirmation-success .clipart-block .clipart-cloud-10 {
    top: 23%;
    left: 33%;
    width: 44%;
    height: 44%;
}

@keyframes editinfo-success-cloud-1 {
    from {
        transform: translate(-3%, -3%);
    }

    to {
        transform: translate(8%, 7%);
    }
}

@-webkit-keyframes editinfo-success-cloud-1 {
    from {
        -webkit-transform: translate(-3%, -3%);
    }

    to {
        -webkit-transform: translate(8%, 7%);
    }
}

@keyframes editinfo-success-cloud-2 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -3%);
    }
}

@-webkit-keyframes editinfo-success-cloud-2 {
    from {
        -webkit-transform: translate(0%, 5%);
    }

    to {
        -webkit-transform: translate(0%, -3%);
    }
}

@keyframes editinfo-success-cloud-3 {
    from {
        transform: translate(2%, -8%);
    }

    to {
        transform: translate(-3%, 12%);
    }
}

@-webkit-keyframes editinfo-success-cloud-3 {
    from {
        -webkit-transform: translate(2%, -8%);
    }

    to {
        -webkit-transform: translate(-3%, 12%);
    }
}

@keyframes editinfo-success-cloud-4 {
    from {
        transform: translate(-6%, 4%);
    }

    to {
        transform: translate(8%, -8%);
    }
}

@-webkit-keyframes editinfo-success-cloud-4 {
    from {
        -webkit-transform: translate(-6%, 4%);
    }

    to {
        -webkit-transform: translate(8%, -8%);
    }
}

@keyframes editinfo-success-cloud-5 {
    from {
        transform: translate(5%, 2%);
    }

    to {
        transform: translate(-8%, -2%);
    }
}

@-webkit-keyframes editinfo-success-cloud-5 {
    from {
        -webkit-transform: translate(5%, 2%);
    }

    to {
        -webkit-transform: translate(-8%, -2%);
    }
}

@keyframes editinfo-success-cloud-6 {
    from {
        transform: translate(-2%, -4%);
    }

    to {
        transform: translate(2%, 4%);
    }
}

@-webkit-keyframes editinfo-success-cloud-6 {
    from {
        -webkit-transform: translate(-2%, -4%);
    }

    to {
        -webkit-transform: translate(2%, 4%);
    }
}

@keyframes editinfo-success-cloud-7 {
    from {
        transform: translate(1%, 16%);
    }

    to {
        transform: translate(-1%, -4%);
    }
}

@-webkit-keyframes editinfo-success-cloud-7 {
    from {
        -webkit-transform: translate(1%, 16%);
    }

    to {
        -webkit-transform: translate(-1%, -4%);
    }
}

@keyframes editinfo-success-cloud-8 {
    from {
        transform: translate(2%, -8%);
    }

    to {
        transform: translate(-2%, 4%);
    }
}

@-webkit-keyframes editinfo-success-cloud-8 {
    from {
        -webkit-transform: translate(2%, -8%);
    }

    to {
        -webkit-transform: translate(-2%, 4%);
    }
}

@keyframes editinfo-success-cloud-9 {
    from {
        transform: translate(-9%, 0%);
    }

    to {
        transform: translate(8%, 0%);
    }
}

@-webkit-keyframes editinfo-success-cloud-9 {
    from {
        -webkit-transform: translate(-9%, 0%);
    }

    to {
        -webkit-transform: translate(8%, 0%);
    }
}

@media (max-height: 780px) {
    .modal.order-confirmation-success.new.show {
        padding: 0px !important;
        margin: 0px !important;
    }

    .modal.order-confirmation-success.new .modal-dialog {
        top: 0px;
        left: 0px;
        max-width: 100%;
        margin: 0px;
        height: 100%;
    }

        .modal.order-confirmation-success.new .modal-dialog .modal-content {
            border-radius: var(--radius-0);
            border: 0px;
            height: 100%;
            box-shadow: none;
        }

        .modal.order-confirmation-success.new .modal-dialog .modal-body {
            max-height: calc(100% - 121px) !important;
        }

        .modal.order-confirmation-success.new .modal-dialog .modal-footer {
            height: 69px;
        }
}

@media (max-width: 991px) {
    .modal.edit-info-success .modal-dialog,
    .modal.order-confirmation-success .modal-dialog {
        max-width: 600px;
    }

    .modal.edit-info-success p {
        display: block;
        width: 100%;
        padding-left: 100px;
        padding-right: 100px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}



@media (max-width: 728px) {
    .modal.edit-info-success .modal-dialog,
    .modal.order-confirmation-success .modal-dialog {
        max-width: 100%;
        top: 0px;
    }
}



@media (max-width: 600px) {
    .modal.edit-info-success .clipart-area h5,
    .modal.order-confirmation-success .clipart-area h5 {
        display: block;
        width: 100%;
        font-size: 48px;
        text-align: center;
        text-transform: uppercase;
        font-weight: 700;
        position: absolute;
        z-index: 3;
        top: 20%;
    }

    .modal.edit-info-success .clipart-area h6,
    .modal.order-confirmation-success .clipart-area h6 {
        display: block;
        width: 100%;
        font-size: 18px;
        text-align: center;
        font-weight: 500;
        z-index: 3;
        position: absolute;
        top: 60%;
    }

    .modal.edit-info-success .clipart-block,
    .modal.order-confirmation-success .clipart-block .clipart-block {
        width: 200px;
        height: 200px;
    }

    .modal.edit-info-success p {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media (max-width: 450px) {
    .modal.edit-info-success .clipart-area h5,
    .modal.order-confirmation-success .clipart-area h5 {
        font-size: 36px;
        top: 20%;
    }

    .modal.edit-info-success p {
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .modal.edit-info-success .clipart-area h6,
    .modal.order-confirmation-success .clipart-area h6 {
        font-size: 16px;
        top: 50%;
    }
}

@media (max-height: 600px) {

    .modal.show.edit-info-success {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.edit-info-success .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.edit-info-success .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.edit-info-success .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.edit-info-success .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.edit-info-success .modal-dialog .modal-footer {
        height: 69px;
    }
}



/* #endregion Edit info success */



/* #region Custom modal - Order Confirmation */
.modal-custom.order-confirmation-success .modal-window {
    width: 900px;
    left: calc(50% - 450px);
    top: calc(50% - 355px);
}

.modal-custom.order-confirmation-success .steps {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin-bottom: 30px;
}

    .modal-custom.order-confirmation-success .steps > * {
        display: table-row;
    }

        .modal-custom.order-confirmation-success .steps > * > * {
            display: table-cell;
            width: 50%;
            text-align: center;
            padding-left: 10px;
            padding-right: 10px;
        }

    .modal-custom.order-confirmation-success .steps label {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
        display: inline-block;
    }

.modal-custom.order-confirmation-success .step-1 .clipart-block {
    display: block;
    width: 130px;
    height: 130px;
    margin: 10px auto 10px auto;
}

    .modal-custom.order-confirmation-success .step-1 .clipart-block .inner,
    .modal-custom.order-confirmation-success .step-2 .clipart-block .inner,
    .modal-custom.order-confirmation-success .step-3 .clipart-block .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-1,
    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-2,
    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-3,
    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-4,
    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-5,
    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-6,
    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-7,
    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-8,
    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-9,
    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-10,
    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-11 {
        display: block;
        position: absolute;
        background-color: #F2F2F2;
        border-radius: 50%;
        z-index: 1;
    }

    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-1 {
        width: 22%;
        height: 22%;
        top: 1%;
        left: 7%;
        -webkit-animation: order-confirm-cloud-1-1 1.2s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-1 1.2s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-2 {
        width: 38%;
        height: 38%;
        top: 3%;
        left: 20%;
        -webkit-animation: order-confirm-cloud-1-2 1.4s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-2 1.4s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-3 {
        width: 40%;
        height: 40%;
        top: 2%;
        left: 46%;
        -webkit-animation: order-confirm-cloud-1-3 1.2s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-3 1.2s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-4 {
        width: 25%;
        height: 25%;
        top: 21%;
        left: 69%;
        -webkit-animation: order-confirm-cloud-1-4 1.3s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-4 1.3s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-5 {
        width: 35%;
        height: 35%;
        top: 42%;
        left: 65%;
        -webkit-animation: order-confirm-cloud-1-5 1.6s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-5 1.6s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-6 {
        width: 55%;
        height: 55%;
        top: 32%;
        left: 33%;
        -webkit-animation: order-confirm-cloud-1-6 1.3s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-6 1.3s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-7 {
        width: 28%;
        height: 28%;
        top: 72%;
        left: 44%;
        -webkit-animation: order-confirm-cloud-1-7 1.4s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-7 1.4s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-8 {
        width: 38%;
        height: 38%;
        top: 52%;
        left: 20%;
        -webkit-animation: order-confirm-cloud-1-8 1.1s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-8 1.1s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-9 {
        width: 30%;
        height: 30%;
        top: 57%;
        left: 1%;
        -webkit-animation: order-confirm-cloud-1-9 1.3s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-9 1.3s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-10 {
        width: 40%;
        height: 40%;
        top: 32%;
        left: 11%;
        -webkit-animation: order-confirm-cloud-1-10 1.2s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-10 1.2s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-1 .clipart-block .cloud-11 {
        width: 34%;
        height: 34%;
        top: 17%;
        left: 0%;
        -webkit-animation: order-confirm-cloud-1-11 1.6s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-11 1.6s ease-in-out infinite alternate;
    }

@keyframes order-confirm-cloud-1-1 {
    from {
        transform: translate(-3%, -3%);
    }

    to {
        transform: translate(10%, 10%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-1 {
    from {
        -webkit-transform: translate(-3%, -3%);
    }

    to {
        -webkit-transform: translate(10%, 10%);
    }
}

@keyframes order-confirm-cloud-1-2 {
    from {
        transform: translate(0%, 6%);
    }

    to {
        transform: translate(0%, -6%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-2 {
    from {
        -webkit-transform: translate(0%, 6%);
    }

    to {
        -webkit-transform: translate(0%, -6%);
    }
}

@keyframes order-confirm-cloud-1-3 {
    from {
        transform: translate(3%, -3%);
    }

    to {
        transform: translate(-3%, 8%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-3 {
    from {
        -webkit-transform: translate(3%, -3%);
    }

    to {
        -webkit-transform: translate(-3%, 8%);
    }
}

@keyframes order-confirm-cloud-1-4 {
    from {
        transform: translate(-9%, 3%);
    }

    to {
        transform: translate(8%, -3%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-4 {
    from {
        -webkit-transform: translate(-9%, 3%);
    }

    to {
        -webkit-transform: translate(8%, -3%);
    }
}

@keyframes order-confirm-cloud-1-5 {
    from {
        transform: translate(9%, 0%);
    }

    to {
        transform: translate(-8%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-5 {
    from {
        -webkit-transform: translate(9%, 0%);
    }

    to {
        -webkit-transform: translate(-8%, 0%);
    }
}

@keyframes order-confirm-cloud-1-6 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-6 {
    from {
        -webkit-transform: translate(-5%, -5%);
    }

    to {
        -webkit-transform: translate(0%, 0%);
    }
}

@keyframes order-confirm-cloud-1-7 {
    from {
        transform: translate(1%, 4%);
    }

    to {
        transform: translate(-1%, -6%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-7 {
    from {
        -webkit-transform: translate(1%, 4%);
    }

    to {
        -webkit-transform: translate(-1%, -6%);
    }
}

@keyframes order-confirm-cloud-1-8 {
    from {
        transform: translate(-1%, 3%);
    }

    to {
        transform: translate(1%, -4%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-8 {
    from {
        -webkit-transform: translate(-1%, 3%);
    }

    to {
        -webkit-transform: translate(1%, -4%);
    }
}

@keyframes order-confirm-cloud-1-9 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-9 {
    from {
        -webkit-transform: translate(4%, -4%);
    }

    to {
        -webkit-transform: translate(-4%, 4%);
    }
}

@keyframes order-confirm-cloud-1-10 {
    from {
        transform: translate(-6%, 0%);
    }

    to {
        transform: translate(7%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-10 {
    from {
        -webkit-transform: translate(-6%, 0%);
    }

    to {
        -webkit-transform: translate(7%, 0%);
    }
}

@keyframes order-confirm-cloud-1-11 {
    from {
        transform: translate(5%, 3%);
    }

    to {
        transform: translate(-7%, -3%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-11 {
    from {
        -webkit-transform: translate(5%, 3%);
    }

    to {
        -webkit-transform: translate(-7%, -3%);
    }
}

.modal-custom.order-confirmation-success .clipart-call {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: url("../../Content/Images/cargo-delivery/user-account/clipart-call.svg") center center no-repeat transparent;
    background-size: contain;
    z-index: 2;
}

.modal-custom.order-confirmation-success .step-2 .clipart-block {
    display: block;
    width: 130px;
    height: 130px;
    margin: 10px auto 10px auto;
}

    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-1,
    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-2,
    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-3,
    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-4,
    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-5,
    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-6,
    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-7,
    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-8 {
        display: block;
        position: absolute;
        border-radius: 50%;
        background-color: #F2F2F2;
        z-index: 1;
    }

    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-1 {
        width: 40%;
        height: 40%;
        top: 15%;
        left: 6%;
        -webkit-animation: order-confirm-cloud-2-1 1.2s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-1 1.2s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-2 {
        width: 50%;
        height: 50%;
        top: 3%;
        left: 23%;
        -webkit-animation: order-confirm-cloud-2-2 1.4s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-2 1.4s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-3 {
        width: 42%;
        height: 42%;
        top: 14%;
        left: 53%;
        -webkit-animation: order-confirm-cloud-2-3 1.6s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-3 1.6s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-4 {
        width: 25%;
        height: 25%;
        top: 35%;
        left: 78%;
        -webkit-animation: order-confirm-cloud-2-4 1.1s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-4 1.1s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-5 {
        width: 40%;
        height: 40%;
        top: 46%;
        left: 56%;
        -webkit-animation: order-confirm-cloud-2-5 1.4s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-5 1.4s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-6 {
        width: 60%;
        height: 60%;
        top: 38%;
        left: 23%;
        -webkit-animation: order-confirm-cloud-2-6 1.1s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-6 1.1s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-7 {
        width: 25%;
        height: 25%;
        top: 65%;
        left: 12%;
        -webkit-animation: order-confirm-cloud-2-7 1.5s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-7 1.5s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-2 .clipart-block .cloud-8 {
        width: 38%;
        height: 38%;
        top: 35%;
        left: 1%;
        -webkit-animation: order-confirm-cloud-2-8 1.1s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-8 1.1s ease-in-out infinite alternate;
    }

@keyframes order-confirm-cloud-2-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-1 {
    from {
        -webkit-transform: translate(-4%, -4%);
    }

    to {
        -webkit-transform: translate(5%, 5%);
    }
}

@keyframes order-confirm-cloud-2-2 {
    from {
        transform: translate(0%, 7%);
    }

    to {
        transform: translate(0%, -3%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-2 {
    from {
        -webkit-transform: translate(0%, 7%);
    }

    to {
        -webkit-transform: translate(0%, -3%);
    }
}

@keyframes order-confirm-cloud-2-3 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 3%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-3 {
    from {
        -webkit-transform: translate(4%, -4%);
    }

    to {
        -webkit-transform: translate(-4%, 3%);
    }
}

@keyframes order-confirm-cloud-2-4 {
    from {
        transform: translate(-5%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-4 {
    from {
        -webkit-transform: translate(-5%, 0%);
    }

    to {
        -webkit-transform: translate(4%, 0%);
    }
}

@keyframes order-confirm-cloud-2-5 {
    from {
        transform: translate(4%, 4%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-5 {
    from {
        -webkit-transform: translate(4%, 4%);
    }

    to {
        -webkit-transform: translate(-4%, -4%);
    }
}

@keyframes order-confirm-cloud-2-6 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 3%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-6 {
    from {
        -webkit-transform: translate(0%, -5%);
    }

    to {
        -webkit-transform: translate(0%, 3%);
    }
}

@keyframes order-confirm-cloud-2-7 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 3%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-7 {
    from {
        -webkit-transform: translate(5%, -5%);
    }

    to {
        -webkit-transform: translate(-5%, 3%);
    }
}

@keyframes order-confirm-cloud-2-8 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(6%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-8 {
    from {
        -webkit-transform: translate(-8%, 0%);
    }

    to {
        -webkit-transform: translate(6%, 0%);
    }
}

.modal-custom.order-confirmation-success .clipart-stopwatch {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    display: block;
    background: url("../../Content/Images/cargo-delivery/user-account/clipart-stopwatch.svg") center center no-repeat;
    background-size: contain;
    z-index: 2;
}


.modal-custom.order-confirmation-success .step-3 .clipart-block {
    display: block;
    width: 130px;
    height: 130px;
    margin: 10px auto 10px auto;
}

    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-1,
    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-2,
    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-3,
    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-4,
    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-5,
    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-6,
    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-7,
    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-8,
    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-9,
    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-10,
    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-11,
    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-12 {
        display: block;
        position: absolute;
        border-radius: 50%;
        background-color: #F2F2F2;
        z-index: 1;
    }

    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-1 {
        width: 25%;
        height: 25%;
        top: 13%;
        left: 20%;
        -webkit-animation: order-confirm-cloud-3-1 1.2s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-1 1.2s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-2 {
        width: 35%;
        height: 35%;
        top: 3%;
        left: 33%;
        -webkit-animation: order-confirm-cloud-3-2 1.3s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-2 1.3s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-3 {
        width: 20%;
        height: 20%;
        top: 17%;
        left: 61%;
        -webkit-animation: order-confirm-cloud-3-3 1.5s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-3 1.5s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-4 {
        width: 32%;
        height: 32%;
        top: 26%;
        left: 61%;
        -webkit-animation: order-confirm-cloud-3-4 1.1s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-4 1.1s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-5 {
        width: 20%;
        height: 20%;
        top: 49%;
        left: 75%;
        -webkit-animation: order-confirm-cloud-3-5 1.4s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-5 1.4s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-6 {
        width: 33%;
        height: 33%;
        top: 61%;
        left: 67%;
        -webkit-animation: order-confirm-cloud-3-6 1.2s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-6 1.2s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-7 {
        width: 23%;
        height: 23%;
        top: 74%;
        left: 57%;
        -webkit-animation: order-confirm-cloud-3-7 1.2s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-7 1.2s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-8 {
        width: 33%;
        height: 33%;
        top: 58%;
        left: 39%;
        -webkit-animation: order-confirm-cloud-3-8 1.5s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-8 1.5s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-9 {
        width: 37%;
        height: 37%;
        top: 55%;
        left: 16%;
        -webkit-animation: order-confirm-cloud-3-9 1.4s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-9 1.4s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-10 {
        width: 22%;
        height: 22%;
        top: 71%;
        left: 6%;
        -webkit-animation: order-confirm-cloud-3-10 1.1s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-10 1.1s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-11 {
        width: 62%;
        height: 62%;
        top: 24%;
        left: 1%;
        -webkit-animation: order-confirm-cloud-3-11 1.3s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-11 1.3s ease-in-out infinite alternate;
    }

    .modal-custom.order-confirmation-success .step-3 .clipart-block .cloud-12 {
        width: 52%;
        height: 52%;
        top: 24%;
        left: 31%;
    }

@keyframes order-confirm-cloud-3-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-1 {
    from {
        -webkit-transform: translate(-8%, -8%);
    }

    to {
        -webkit-transform: translate(6%, 6%);
    }
}

@keyframes order-confirm-cloud-3-2 {
    from {
        transform: translate(0%, 15%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-2 {
    from {
        -webkit-transform: translate(0%, 15%);
    }

    to {
        -webkit-transform: translate(0%, -5%);
    }
}

@keyframes order-confirm-cloud-3-3 {
    from {
        transform: translate(4%, -7%);
    }

    to {
        transform: translate(-4%, 5%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-3 {
    from {
        -webkit-transform: translate(4%, -7%);
    }

    to {
        -webkit-transform: translate(-4%, 5%);
    }
}

@keyframes order-confirm-cloud-3-4 {
    from {
        transform: translate(-9%, 3%);
    }

    to {
        transform: translate(8%, -3%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-4 {
    from {
        -webkit-transform: translate(-9%, 3%);
    }

    to {
        -webkit-transform: translate(8%, -3%);
    }
}

@keyframes order-confirm-cloud-3-5 {
    from {
        transform: translate(9%, 0%);
    }

    to {
        transform: translate(-10%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-5 {
    from {
        -webkit-transform: translate(9%, 0%);
    }

    to {
        -webkit-transform: translate(-10%, 0%);
    }
}

@keyframes order-confirm-cloud-3-6 {
    from {
        transform: translate(9%, 0%);
    }

    to {
        transform: translate(-10%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-6 {
    from {
        -webkit-transform: translate(9%, 0%);
    }

    to {
        -webkit-transform: translate(-10%, 0%);
    }
}

@keyframes order-confirm-cloud-3-7 {
    from {
        transform: translate(-8%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-7 {
    from {
        -webkit-transform: translate(-8%, -5%);
    }

    to {
        -webkit-transform: translate(5%, 5%);
    }
}

@keyframes order-confirm-cloud-3-8 {
    from {
        transform: translate(0%, 8%);
    }

    to {
        transform: translate(0%, -13%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-8 {
    from {
        -webkit-transform: translate(0%, 8%);
    }

    to {
        -webkit-transform: translate(0%, -13%);
    }
}

@keyframes order-confirm-cloud-3-9 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 7%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-9 {
    from {
        -webkit-transform: translate(0%, -6%);
    }

    to {
        -webkit-transform: translate(0%, 7%);
    }
}

@keyframes order-confirm-cloud-3-10 {
    from {
        transform: translate(0%, 4%);
    }

    to {
        transform: translate(5%, -7%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-10 {
    from {
        -webkit-transform: translate(0%, 4%);
    }

    to {
        -webkit-transform: translate(5%, -7%);
    }
}

@keyframes order-confirm-cloud-3-11 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-8%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-11 {
    from {
        -webkit-transform: translate(6%, 0%);
    }

    to {
        -webkit-transform: translate(-8%, 0%);
    }
}


.modal-custom.order-confirmation-success .step-3 .clipart-map {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    z-index: 2;
    background: url("../../Content/Images/cargo-delivery/user-account/clipart-map.svg") no-repeat center center transparent;
    background-size: contain;
}

@media (max-width: 991px) {
    .modal-custom.order-confirmation-success .modal-window {
        max-width: 700px;
        left: calc(50% - 350px);
        top: calc(50% - 330px);
    }

    .modal-custom.order-confirmation-success .clipart-block {
        width: 180px;
        height: 180px;
    }

    .modal-custom.order-confirmation-success .clipart-area h5 {
        font-size: 48px;
    }

    .modal-custom.order-confirmation-success .clipart-area h6 {
        top: 54%;
    }

    .modal-custom.order-confirmation-success .step-1 .clipart-block,
    .modal-custom.order-confirmation-success .step-2 .clipart-block,
    .modal-custom.order-confirmation-success .step-3 .clipart-block {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 728px) {
    .modal-custom.order-confirmation-success .modal-window {
        max-width: 100%;
        top: 0px;
    }

    .modal-custom.order-confirmation-success .steps {
        display: block;
        width: 100%;
    }


        .modal-custom.order-confirmation-success .steps > *,
        .modal-custom.order-confirmation-success .steps > * > * {
            display: block;
            width: 100%;
            position: relative;
            text-align: left;
        }

    *[dir='rtl'] .modal-custom.order-confirmation-success .steps > *,
    *[dir='rtl'] .modal-custom.order-confirmation-success .steps > * > * {
        text-align: right;
    }

    .modal-custom.order-confirmation-success .steps > * > * {
        padding-left: 120px;
        margin-bottom: 50px;
        margin-top: 50px;
    }

    *[dir='rtl'] .modal-custom.order-confirmation-success .steps > * > * {
        padding-left: 0px;
        padding-right: 120px;
    }

    .modal-custom.order-confirmation-success .steps .step-1 .clipart-block,
    .modal-custom.order-confirmation-success .steps .step-2 .clipart-block,
    .modal-custom.order-confirmation-success .steps .step-3 .clipart-block {
        position: absolute;
        top: calc(50% - 50px);
        left: 0px;
        margin: 0px;
    }

    *[dir='rtl'] .modal-custom.order-confirmation-success .steps .step-1 .clipart-block,
    *[dir='rtl'] .modal-custom.order-confirmation-success .steps .step-2 .clipart-block,
    *[dir='rtl'] .modal-custom.order-confirmation-success .steps .step-3 .clipart-block {
        left: auto;
        right: 0px;
    }

    .modal-custom.order-confirmation-success .steps label {
        margin-bottom: 10px;
    }
}

@media (max-width: 400px) {
    .modal-custom.order-confirmation-success .clipart-area h5 {
        font-size: 36px;
    }

    .modal-custom.order-confirmation-success .steps > * > * {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .modal-custom.order-confirmation-success .steps .step-1 .clipart-block,
    .modal-custom.order-confirmation-success .steps .step-2 .clipart-block,
    .modal-custom.order-confirmation-success .steps .step-3 .clipart-block {
        width: 60px;
        height: 60px;
        top: 0px;
    }

    .modal-custom.order-confirmation-success .steps > * > * {
        padding-left: 80px;
    }

    *[dir='rtl'] .modal-custom.order-confirmation-success .steps > * > * {
        padding-left: 0px;
        padding-right: 80px;
    }
}

@media (max-width: 300px) {
    .modal-custom.order-confirmation-success .steps .step-1 .clipart-block,
    .modal-custom.order-confirmation-success .steps .step-2 .clipart-block,
    .modal-custom.order-confirmation-success .steps .step-3 .clipart-block {
        display: none;
    }

    .modal-custom.order-confirmation-success .steps > * > * {
        padding-left: 0px;
    }

    *[dir='rtl'] .modal-custom.order-confirmation-success .steps > * > * {
        padding-left: 0px;
        padding-right: 0px;
    }
}


@media (max-height: 720px) {

    .modal-custom.order-confirmation-success .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.order-confirmation-success .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.order-confirmation-success .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.order-confirmation-success .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.order-confirmation-success .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}
/* #endregion Custom modal - Order Confirmation */
/* #region Order Confirmation */
.modal.order-confirmation-success .modal-dialog {
    max-width: 900px;
    top: calc(50% - 380px);
}

.modal.order-confirmation-success .steps {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin-bottom: 30px;
}

    .modal.order-confirmation-success .steps > * {
        display: table-row;
    }

        .modal.order-confirmation-success .steps > * > * {
            display: table-cell;
            width: 50%;
            text-align: center;
            padding-left: 10px;
            padding-right: 10px;
        }

    .modal.order-confirmation-success .steps label {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
        display: inline-block;
    }

.modal.order-confirmation-success .step-1 .clipart-block {
    display: block;
    width: 130px;
    height: 130px;
    margin: 10px auto 10px auto;
}

    .modal.order-confirmation-success .step-1 .clipart-block .inner,
    .modal.order-confirmation-success .step-2 .clipart-block .inner,
    .modal.order-confirmation-success .step-3 .clipart-block .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .modal.order-confirmation-success .step-1 .clipart-block .cloud-1,
    .modal.order-confirmation-success .step-1 .clipart-block .cloud-2,
    .modal.order-confirmation-success .step-1 .clipart-block .cloud-3,
    .modal.order-confirmation-success .step-1 .clipart-block .cloud-4,
    .modal.order-confirmation-success .step-1 .clipart-block .cloud-5,
    .modal.order-confirmation-success .step-1 .clipart-block .cloud-6,
    .modal.order-confirmation-success .step-1 .clipart-block .cloud-7,
    .modal.order-confirmation-success .step-1 .clipart-block .cloud-8,
    .modal.order-confirmation-success .step-1 .clipart-block .cloud-9,
    .modal.order-confirmation-success .step-1 .clipart-block .cloud-10,
    .modal.order-confirmation-success .step-1 .clipart-block .cloud-11 {
        display: block;
        position: absolute;
        background-color: #F2F2F2;
        border-radius: 50%;
        z-index: 1;
    }

    .modal.order-confirmation-success .step-1 .clipart-block .cloud-1 {
        width: 22%;
        height: 22%;
        top: 1%;
        left: 7%;
        -webkit-animation: order-confirm-cloud-1-1 1.2s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-1 1.2s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-1 .clipart-block .cloud-2 {
        width: 38%;
        height: 38%;
        top: 3%;
        left: 20%;
        -webkit-animation: order-confirm-cloud-1-2 1.4s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-2 1.4s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-1 .clipart-block .cloud-3 {
        width: 40%;
        height: 40%;
        top: 2%;
        left: 46%;
        -webkit-animation: order-confirm-cloud-1-3 1.2s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-3 1.2s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-1 .clipart-block .cloud-4 {
        width: 25%;
        height: 25%;
        top: 21%;
        left: 69%;
        -webkit-animation: order-confirm-cloud-1-4 1.3s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-4 1.3s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-1 .clipart-block .cloud-5 {
        width: 35%;
        height: 35%;
        top: 42%;
        left: 65%;
        -webkit-animation: order-confirm-cloud-1-5 1.6s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-5 1.6s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-1 .clipart-block .cloud-6 {
        width: 55%;
        height: 55%;
        top: 32%;
        left: 33%;
        -webkit-animation: order-confirm-cloud-1-6 1.3s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-6 1.3s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-1 .clipart-block .cloud-7 {
        width: 28%;
        height: 28%;
        top: 72%;
        left: 44%;
        -webkit-animation: order-confirm-cloud-1-7 1.4s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-7 1.4s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-1 .clipart-block .cloud-8 {
        width: 38%;
        height: 38%;
        top: 52%;
        left: 20%;
        -webkit-animation: order-confirm-cloud-1-8 1.1s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-8 1.1s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-1 .clipart-block .cloud-9 {
        width: 30%;
        height: 30%;
        top: 57%;
        left: 1%;
        -webkit-animation: order-confirm-cloud-1-9 1.3s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-9 1.3s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-1 .clipart-block .cloud-10 {
        width: 40%;
        height: 40%;
        top: 32%;
        left: 11%;
        -webkit-animation: order-confirm-cloud-1-10 1.2s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-10 1.2s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-1 .clipart-block .cloud-11 {
        width: 34%;
        height: 34%;
        top: 17%;
        left: 0%;
        -webkit-animation: order-confirm-cloud-1-11 1.6s ease-in-out infinite alternate;
        animation: order-confirm-cloud-1-11 1.6s ease-in-out infinite alternate;
    }

@keyframes order-confirm-cloud-1-1 {
    from {
        transform: translate(-3%, -3%);
    }

    to {
        transform: translate(10%, 10%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-1 {
    from {
        -webkit-transform: translate(-3%, -3%);
    }

    to {
        -webkit-transform: translate(10%, 10%);
    }
}

@keyframes order-confirm-cloud-1-2 {
    from {
        transform: translate(0%, 6%);
    }

    to {
        transform: translate(0%, -6%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-2 {
    from {
        -webkit-transform: translate(0%, 6%);
    }

    to {
        -webkit-transform: translate(0%, -6%);
    }
}

@keyframes order-confirm-cloud-1-3 {
    from {
        transform: translate(3%, -3%);
    }

    to {
        transform: translate(-3%, 8%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-3 {
    from {
        -webkit-transform: translate(3%, -3%);
    }

    to {
        -webkit-transform: translate(-3%, 8%);
    }
}

@keyframes order-confirm-cloud-1-4 {
    from {
        transform: translate(-9%, 3%);
    }

    to {
        transform: translate(8%, -3%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-4 {
    from {
        -webkit-transform: translate(-9%, 3%);
    }

    to {
        -webkit-transform: translate(8%, -3%);
    }
}

@keyframes order-confirm-cloud-1-5 {
    from {
        transform: translate(9%, 0%);
    }

    to {
        transform: translate(-8%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-5 {
    from {
        -webkit-transform: translate(9%, 0%);
    }

    to {
        -webkit-transform: translate(-8%, 0%);
    }
}

@keyframes order-confirm-cloud-1-6 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-6 {
    from {
        -webkit-transform: translate(-5%, -5%);
    }

    to {
        -webkit-transform: translate(0%, 0%);
    }
}

@keyframes order-confirm-cloud-1-7 {
    from {
        transform: translate(1%, 4%);
    }

    to {
        transform: translate(-1%, -6%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-7 {
    from {
        -webkit-transform: translate(1%, 4%);
    }

    to {
        -webkit-transform: translate(-1%, -6%);
    }
}

@keyframes order-confirm-cloud-1-8 {
    from {
        transform: translate(-1%, 3%);
    }

    to {
        transform: translate(1%, -4%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-8 {
    from {
        -webkit-transform: translate(-1%, 3%);
    }

    to {
        -webkit-transform: translate(1%, -4%);
    }
}

@keyframes order-confirm-cloud-1-9 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-9 {
    from {
        -webkit-transform: translate(4%, -4%);
    }

    to {
        -webkit-transform: translate(-4%, 4%);
    }
}

@keyframes order-confirm-cloud-1-10 {
    from {
        transform: translate(-6%, 0%);
    }

    to {
        transform: translate(7%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-10 {
    from {
        -webkit-transform: translate(-6%, 0%);
    }

    to {
        -webkit-transform: translate(7%, 0%);
    }
}

@keyframes order-confirm-cloud-1-11 {
    from {
        transform: translate(5%, 3%);
    }

    to {
        transform: translate(-7%, -3%);
    }
}

@-webkit-keyframes order-confirm-cloud-1-11 {
    from {
        -webkit-transform: translate(5%, 3%);
    }

    to {
        -webkit-transform: translate(-7%, -3%);
    }
}

.modal.order-confirmation-success .clipart-call {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: url("../../Content/Images/cargo-delivery/user-account/clipart-call.svg") center center no-repeat transparent;
    background-size: contain;
    z-index: 2;
}

.modal.order-confirmation-success .step-2 .clipart-block {
    display: block;
    width: 130px;
    height: 130px;
    margin: 10px auto 10px auto;
}

    .modal.order-confirmation-success .step-2 .clipart-block .cloud-1,
    .modal.order-confirmation-success .step-2 .clipart-block .cloud-2,
    .modal.order-confirmation-success .step-2 .clipart-block .cloud-3,
    .modal.order-confirmation-success .step-2 .clipart-block .cloud-4,
    .modal.order-confirmation-success .step-2 .clipart-block .cloud-5,
    .modal.order-confirmation-success .step-2 .clipart-block .cloud-6,
    .modal.order-confirmation-success .step-2 .clipart-block .cloud-7,
    .modal.order-confirmation-success .step-2 .clipart-block .cloud-8 {
        display: block;
        position: absolute;
        border-radius: 50%;
        background-color: #F2F2F2;
        z-index: 1;
    }

    .modal.order-confirmation-success .step-2 .clipart-block .cloud-1 {
        width: 40%;
        height: 40%;
        top: 15%;
        left: 6%;
        -webkit-animation: order-confirm-cloud-2-1 1.2s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-1 1.2s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-2 .clipart-block .cloud-2 {
        width: 50%;
        height: 50%;
        top: 3%;
        left: 23%;
        -webkit-animation: order-confirm-cloud-2-2 1.4s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-2 1.4s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-2 .clipart-block .cloud-3 {
        width: 42%;
        height: 42%;
        top: 14%;
        left: 53%;
        -webkit-animation: order-confirm-cloud-2-3 1.6s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-3 1.6s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-2 .clipart-block .cloud-4 {
        width: 25%;
        height: 25%;
        top: 35%;
        left: 78%;
        -webkit-animation: order-confirm-cloud-2-4 1.1s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-4 1.1s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-2 .clipart-block .cloud-5 {
        width: 40%;
        height: 40%;
        top: 46%;
        left: 56%;
        -webkit-animation: order-confirm-cloud-2-5 1.4s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-5 1.4s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-2 .clipart-block .cloud-6 {
        width: 60%;
        height: 60%;
        top: 38%;
        left: 23%;
        -webkit-animation: order-confirm-cloud-2-6 1.1s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-6 1.1s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-2 .clipart-block .cloud-7 {
        width: 25%;
        height: 25%;
        top: 65%;
        left: 12%;
        -webkit-animation: order-confirm-cloud-2-7 1.5s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-7 1.5s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-2 .clipart-block .cloud-8 {
        width: 38%;
        height: 38%;
        top: 35%;
        left: 1%;
        -webkit-animation: order-confirm-cloud-2-8 1.1s ease-in-out infinite alternate;
        animation: order-confirm-cloud-2-8 1.1s ease-in-out infinite alternate;
    }

@keyframes order-confirm-cloud-2-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-1 {
    from {
        -webkit-transform: translate(-4%, -4%);
    }

    to {
        -webkit-transform: translate(5%, 5%);
    }
}

@keyframes order-confirm-cloud-2-2 {
    from {
        transform: translate(0%, 7%);
    }

    to {
        transform: translate(0%, -3%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-2 {
    from {
        -webkit-transform: translate(0%, 7%);
    }

    to {
        -webkit-transform: translate(0%, -3%);
    }
}

@keyframes order-confirm-cloud-2-3 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 3%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-3 {
    from {
        -webkit-transform: translate(4%, -4%);
    }

    to {
        -webkit-transform: translate(-4%, 3%);
    }
}

@keyframes order-confirm-cloud-2-4 {
    from {
        transform: translate(-5%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-4 {
    from {
        -webkit-transform: translate(-5%, 0%);
    }

    to {
        -webkit-transform: translate(4%, 0%);
    }
}

@keyframes order-confirm-cloud-2-5 {
    from {
        transform: translate(4%, 4%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-5 {
    from {
        -webkit-transform: translate(4%, 4%);
    }

    to {
        -webkit-transform: translate(-4%, -4%);
    }
}

@keyframes order-confirm-cloud-2-6 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 3%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-6 {
    from {
        -webkit-transform: translate(0%, -5%);
    }

    to {
        -webkit-transform: translate(0%, 3%);
    }
}

@keyframes order-confirm-cloud-2-7 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 3%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-7 {
    from {
        -webkit-transform: translate(5%, -5%);
    }

    to {
        -webkit-transform: translate(-5%, 3%);
    }
}

@keyframes order-confirm-cloud-2-8 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(6%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-2-8 {
    from {
        -webkit-transform: translate(-8%, 0%);
    }

    to {
        -webkit-transform: translate(6%, 0%);
    }
}

.modal.order-confirmation-success .clipart-stopwatch {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    display: block;
    background: url("../../Content/Images/cargo-delivery/user-account/clipart-stopwatch.svg") center center no-repeat;
    background-size: contain;
    z-index: 2;
}


.modal.order-confirmation-success .step-3 .clipart-block {
    display: block;
    width: 130px;
    height: 130px;
    margin: 10px auto 10px auto;
}

    .modal.order-confirmation-success .step-3 .clipart-block .cloud-1,
    .modal.order-confirmation-success .step-3 .clipart-block .cloud-2,
    .modal.order-confirmation-success .step-3 .clipart-block .cloud-3,
    .modal.order-confirmation-success .step-3 .clipart-block .cloud-4,
    .modal.order-confirmation-success .step-3 .clipart-block .cloud-5,
    .modal.order-confirmation-success .step-3 .clipart-block .cloud-6,
    .modal.order-confirmation-success .step-3 .clipart-block .cloud-7,
    .modal.order-confirmation-success .step-3 .clipart-block .cloud-8,
    .modal.order-confirmation-success .step-3 .clipart-block .cloud-9,
    .modal.order-confirmation-success .step-3 .clipart-block .cloud-10,
    .modal.order-confirmation-success .step-3 .clipart-block .cloud-11,
    .modal.order-confirmation-success .step-3 .clipart-block .cloud-12 {
        display: block;
        position: absolute;
        border-radius: 50%;
        background-color: #F2F2F2;
        z-index: 1;
    }

    .modal.order-confirmation-success .step-3 .clipart-block .cloud-1 {
        width: 25%;
        height: 25%;
        top: 13%;
        left: 20%;
        -webkit-animation: order-confirm-cloud-3-1 1.2s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-1 1.2s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-3 .clipart-block .cloud-2 {
        width: 35%;
        height: 35%;
        top: 3%;
        left: 33%;
        -webkit-animation: order-confirm-cloud-3-2 1.3s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-2 1.3s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-3 .clipart-block .cloud-3 {
        width: 20%;
        height: 20%;
        top: 17%;
        left: 61%;
        -webkit-animation: order-confirm-cloud-3-3 1.5s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-3 1.5s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-3 .clipart-block .cloud-4 {
        width: 32%;
        height: 32%;
        top: 26%;
        left: 61%;
        -webkit-animation: order-confirm-cloud-3-4 1.1s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-4 1.1s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-3 .clipart-block .cloud-5 {
        width: 20%;
        height: 20%;
        top: 49%;
        left: 75%;
        -webkit-animation: order-confirm-cloud-3-5 1.4s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-5 1.4s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-3 .clipart-block .cloud-6 {
        width: 33%;
        height: 33%;
        top: 61%;
        left: 67%;
        -webkit-animation: order-confirm-cloud-3-6 1.2s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-6 1.2s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-3 .clipart-block .cloud-7 {
        width: 23%;
        height: 23%;
        top: 74%;
        left: 57%;
        -webkit-animation: order-confirm-cloud-3-7 1.2s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-7 1.2s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-3 .clipart-block .cloud-8 {
        width: 33%;
        height: 33%;
        top: 58%;
        left: 39%;
        -webkit-animation: order-confirm-cloud-3-8 1.5s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-8 1.5s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-3 .clipart-block .cloud-9 {
        width: 37%;
        height: 37%;
        top: 55%;
        left: 16%;
        -webkit-animation: order-confirm-cloud-3-9 1.4s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-9 1.4s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-3 .clipart-block .cloud-10 {
        width: 22%;
        height: 22%;
        top: 71%;
        left: 6%;
        -webkit-animation: order-confirm-cloud-3-10 1.1s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-10 1.1s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-3 .clipart-block .cloud-11 {
        width: 62%;
        height: 62%;
        top: 24%;
        left: 1%;
        -webkit-animation: order-confirm-cloud-3-11 1.3s ease-in-out infinite alternate;
        animation: order-confirm-cloud-3-11 1.3s ease-in-out infinite alternate;
    }

    .modal.order-confirmation-success .step-3 .clipart-block .cloud-12 {
        width: 52%;
        height: 52%;
        top: 24%;
        left: 31%;
    }

@keyframes order-confirm-cloud-3-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-1 {
    from {
        -webkit-transform: translate(-8%, -8%);
    }

    to {
        -webkit-transform: translate(6%, 6%);
    }
}

@keyframes order-confirm-cloud-3-2 {
    from {
        transform: translate(0%, 15%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-2 {
    from {
        -webkit-transform: translate(0%, 15%);
    }

    to {
        -webkit-transform: translate(0%, -5%);
    }
}

@keyframes order-confirm-cloud-3-3 {
    from {
        transform: translate(4%, -7%);
    }

    to {
        transform: translate(-4%, 5%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-3 {
    from {
        -webkit-transform: translate(4%, -7%);
    }

    to {
        -webkit-transform: translate(-4%, 5%);
    }
}

@keyframes order-confirm-cloud-3-4 {
    from {
        transform: translate(-9%, 3%);
    }

    to {
        transform: translate(8%, -3%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-4 {
    from {
        -webkit-transform: translate(-9%, 3%);
    }

    to {
        -webkit-transform: translate(8%, -3%);
    }
}

@keyframes order-confirm-cloud-3-5 {
    from {
        transform: translate(9%, 0%);
    }

    to {
        transform: translate(-10%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-5 {
    from {
        -webkit-transform: translate(9%, 0%);
    }

    to {
        -webkit-transform: translate(-10%, 0%);
    }
}

@keyframes order-confirm-cloud-3-6 {
    from {
        transform: translate(9%, 0%);
    }

    to {
        transform: translate(-10%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-6 {
    from {
        -webkit-transform: translate(9%, 0%);
    }

    to {
        -webkit-transform: translate(-10%, 0%);
    }
}

@keyframes order-confirm-cloud-3-7 {
    from {
        transform: translate(-8%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-7 {
    from {
        -webkit-transform: translate(-8%, -5%);
    }

    to {
        -webkit-transform: translate(5%, 5%);
    }
}

@keyframes order-confirm-cloud-3-8 {
    from {
        transform: translate(0%, 8%);
    }

    to {
        transform: translate(0%, -13%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-8 {
    from {
        -webkit-transform: translate(0%, 8%);
    }

    to {
        -webkit-transform: translate(0%, -13%);
    }
}

@keyframes order-confirm-cloud-3-9 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 7%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-9 {
    from {
        -webkit-transform: translate(0%, -6%);
    }

    to {
        -webkit-transform: translate(0%, 7%);
    }
}

@keyframes order-confirm-cloud-3-10 {
    from {
        transform: translate(0%, 4%);
    }

    to {
        transform: translate(5%, -7%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-10 {
    from {
        -webkit-transform: translate(0%, 4%);
    }

    to {
        -webkit-transform: translate(5%, -7%);
    }
}

@keyframes order-confirm-cloud-3-11 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-8%, 0%);
    }
}

@-webkit-keyframes order-confirm-cloud-3-11 {
    from {
        -webkit-transform: translate(6%, 0%);
    }

    to {
        -webkit-transform: translate(-8%, 0%);
    }
}


.modal.order-confirmation-success .step-3 .clipart-map {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    z-index: 2;
    background: url("../../Content/Images/cargo-delivery/user-account/clipart-map.svg") no-repeat center center transparent;
    background-size: contain;
}

@media (max-width: 991px) {
    .modal.order-confirmation-success .modal-dialog {
        max-width: 700px;
        top: calc(50% - 400px);
    }

    .modal.order-confirmation-success .clipart-block {
        width: 180px;
        height: 180px;
    }

    .modal.order-confirmation-success .clipart-area h5 {
        font-size: 48px;
    }

    .modal.order-confirmation-success .clipart-area h6 {
        top: 54%;
    }

    .modal.order-confirmation-success .step-1 .clipart-block,
    .modal.order-confirmation-success .step-2 .clipart-block,
    .modal.order-confirmation-success .step-3 .clipart-block {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 728px) {
    .modal.order-confirmation-success .modal-dialog {
        max-width: 100%;
        top: 0px;
    }

    .modal.order-confirmation-success .steps {
        display: block;
        width: 100%;
    }


        .modal.order-confirmation-success .steps > *,
        .modal.order-confirmation-success .steps > * > * {
            display: block;
            width: 100%;
            position: relative;
            text-align: left;
        }

    *[dir='rtl'] .modal.order-confirmation-success .steps > *,
    *[dir='rtl'] .modal.order-confirmation-success .steps > * > * {
        text-align: right;
    }

    .modal.order-confirmation-success .steps > * > * {
        padding-left: 120px;
        margin-bottom: 50px;
        margin-top: 50px;
    }

    *[dir='rtl'] .modal.order-confirmation-success .steps > * > * {
        padding-left: 0px;
        padding-right: 120px;
    }

    .modal.order-confirmation-success .steps .step-1 .clipart-block,
    .modal.order-confirmation-success .steps .step-2 .clipart-block,
    .modal.order-confirmation-success .steps .step-3 .clipart-block {
        position: absolute;
        top: calc(50% - 50px);
        left: 0px;
        margin: 0px;
    }

    *[dir='rtl'] .modal.order-confirmation-success .steps .step-1 .clipart-block,
    *[dir='rtl'] .modal.order-confirmation-success .steps .step-2 .clipart-block,
    *[dir='rtl'] .modal.order-confirmation-success .steps .step-3 .clipart-block {
        left: auto;
        right: 0px;
    }

    .modal.order-confirmation-success .steps label {
        margin-bottom: 10px;
    }
}

@media (max-width: 400px) {
    .modal.order-confirmation-success .clipart-area h5 {
        font-size: 36px;
    }

    .modal.order-confirmation-success .steps > * > * {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .modal.order-confirmation-success .steps .step-1 .clipart-block,
    .modal.order-confirmation-success .steps .step-2 .clipart-block,
    .modal.order-confirmation-success .steps .step-3 .clipart-block {
        width: 60px;
        height: 60px;
        top: 0px;
    }

    .modal.order-confirmation-success .steps > * > * {
        padding-left: 80px;
    }

    *[dir='rtl'] .modal.order-confirmation-success .steps > * > * {
        padding-left: 0px;
        padding-right: 80px;
    }
}

@media (max-width: 300px) {
    .modal.order-confirmation-success .steps .step-1 .clipart-block,
    .modal.order-confirmation-success .steps .step-2 .clipart-block,
    .modal.order-confirmation-success .steps .step-3 .clipart-block {
        display: none;
    }

    .modal.order-confirmation-success .steps > * > * {
        padding-left: 0px;
    }

    *[dir='rtl'] .modal.order-confirmation-success .steps > * > * {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-height: 730px) {

    .modal.show.order-confirmation-success {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.order-confirmation-success .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.order-confirmation-success .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.order-confirmation-success .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.order-confirmation-success .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.order-confirmation-success .modal-dialog .modal-footer {
        height: 69px;
    }
}
/* #endregion Order Confirmation */
/* #region New Events section */
.sales-purchases-page .new-events {
    display: block;
    width: 100%;
    background-color: #F9F9F9;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 30px;
}

    .sales-purchases-page .new-events.new {
        margin-top: 0px;
        margin-bottom: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .sales-purchases-page .new-events h3 {
        display: block;
        width: 100%;
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 30px;
    }

@media (max-width: 767px) {
    .sales-purchases-page .new-events.new {
        margin-top: 0px;
        margin-bottom: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
/* #endregion /New Events section */
/* #region Sales-Purchases List */
.sales-purchases-page .sales-purchases-list {
    padding-top: 50px;
    padding-bottom: 100px;
}

.sales-purchases-page section.orders {
    margin-bottom: 100px;
}
/* #endregion Sales-Purchases List */
/* #region Products item */
.sales-purchases-page .product-item {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-radius: var(--radius-4);
    border: 1px solid #DDDDDD;
    background-color: #FFFFFF;
    padding: 7px;
    margin-bottom: 10px;
}

    .sales-purchases-page .product-item.new {
        border: 0px none transparent;
        background-color: #F9F9F9;
        padding: 15px;
    }

.sales-purchases-page .new.new-events .product-item.new {
    border: 0px none transparent;
    background-color: #FFFFFF;
    padding: 15px;
}

.sales-purchases-page .product-item > * {
    display: table-row;
}

    .sales-purchases-page .product-item > * > * {
        display: table-cell
    }

.sales-purchases-page .product-item .product-image-area {
    width: 210px;
    position: relative;
    vertical-align: top;
}

    .sales-purchases-page .product-item .product-image-area .product-img-container {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 100%;
        background-color: #F2F2F2;
        border-radius: var(--radius-4);
        position: absolute;
    }

        .sales-purchases-page .product-item .product-image-area .product-img-container .inner {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .sales-purchases-page .product-item .product-image-area .product-img-container .ci-pazar {
            position: absolute;
            font-size: 80px;
            top: calc(50% - 40px);
            left: calc(50% - 40px);
            opacity: 0.2;
        }

        .sales-purchases-page .product-item .product-image-area .product-img-container .img {
            position: absolute;
            display: block;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            border-radius: var(--radius-4);
            background-color: transparent;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
        }

.sales-purchases-page .product-item .product-delivery-area {
    border-left: 1px solid #DDDDDD;
    text-align: center;
    width: 210px;
    position: relative;
    vertical-align: middle;
    padding-top: 30px;
    padding-left: 7px;
    padding-right: 7px;
}

.sales-purchases-page .product-item.new .product-delivery-area {
    vertical-align: top;
    padding-top: 0px;
    padding-left: 7px;
    padding-right: 7px;
}


.sales-purchases-page .product-item.new .product-delivery-area {
    vertical-align: top;
}

.sales-purchases-page section.new-events.new .product-item.new .product-delivery-area {
    border-left: 1px solid #F2F2F2;
}



.sales-purchases-page .product-item .product-delivery-area a {
    display: inline-block;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 15px;
}

    .sales-purchases-page .product-item .product-delivery-area a + a {
        margin-top: 15px;
    }

.sales-purchases-page .product-item .product-delivery-area .address-note {
    margin-top: 15px;
    margin-bottom: 15px;
}

*[dir='rtl'] .sales-purchases-page .product-item .product-delivery-area {
    border-left: 0px none transparent;
    border-right: 1px solid #DDDDDD;
}

*[dir='rtl'] .sales-purchases-page section.new-events.new .product-item.new .product-delivery-area {
    border-left: 0px none transparent;
    border-right: 1px solid #F2F2F2;
}

.sales-purchases-page .product-item .product-controls-area {
    border-left: 1px solid #DDDDDD;
    text-align: center;
    width: 210px;
    position: relative;
    padding-left: 7px;
}

.sales-purchases-page section.new-events.new .product-item.new .product-controls-area {
    border-left: 1px solid #F2F2F2;
}


*[dir='rtl'] .sales-purchases-page .product-item .product-controls-area {
    border-left: 0px none transparent;
    border-right: 1px solid #DDDDDD;
    padding-left: 0px;
    padding-right: 7px;
}

*[dir='rtl'] .sales-purchases-page section.new-events.new .product-item.new .product-controls-area {
    border-left: 0px none transparent;
    border-right: 1px solid #F2F2F2;
}


.sales-purchases-page .product-item .product-controls-area .new-btn.btn-default,
.sales-purchases-page .product-item .product-controls-area .new-btn.btn-primary {
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
}

.sales-purchases-page .product-item .product-controls-area .new-btn {
    padding-left: 5px;
    padding-right: 5px;
}

    .sales-purchases-page .product-item .product-controls-area .new-btn .badge:empty {
        display: none !important;
    }

    .sales-purchases-page .product-item .product-controls-area .new-btn .badge {
        font-style: normal;
        font-weight: 700;
        background-color: var(--color-bg-danger);
        color: #ffffff;
        padding: 2px 5px 2px 5px;
        border-radius: var(--radius-4);
        margin-right: 5px;
    }

    .sales-purchases-page .product-item .product-controls-area .new-btn .ci-pazar {
        display: none;
    }

*[dir='rtl'] .sales-purchases-page .product-item .product-controls-area .new-btn .badge {
    margin-right: 0px;
    margin-left: 5px;
}

.sales-purchases-page .product-item .product-delivery-area .title {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}

.sales-purchases-page .product-item.new .product-delivery-area .title {
    position: static;
    margin: 0px;
    padding: 0px;
    margin-bottom: 10px;
}

.sales-purchases-page .product-item .product-description-area {
    vertical-align: top;
    padding-left: 12px;
}

*[dir='rtl'] .sales-purchases-page .product-item .product-description-area {
    padding-right: 12px;
    padding-left: 0px;
}

.sales-purchases-page .product-item .order-info-block {
    display: block;
    position: relative;
    font-size: 0px;
}

    .sales-purchases-page .product-item .order-info-block .order-number {
        display: inline-block;
        font-size: 14px;
        border-right: 1px solid #DDDDDD;
        padding-right: 15px;
    }

*[dir='rtl'] .sales-purchases-page .product-item .order-info-block .order-number {
    border-right: 0px none transparent;
    border-left: 1px solid #DDDDDD;
    padding-right: 0px;
    padding-left: 15px;
}

.sales-purchases-page .product-item .order-info-block .order-date {
    display: inline-block;
    font-size: 14px;
    margin-left: 15px;
}

*[dir='rtl'] .sales-purchases-page .product-item .order-info-block .order-date {
    margin-left: 0px;
    margin-right: 15px;
}

.sales-purchases-page .product-item .order-info-block .order-date .date {
    padding-right: 10px;
}

*[dir='rtl'] .sales-purchases-page .product-item .order-info-block .order-date .date {
    padding-right: 0px;
    padding-left: 10px;
}

.sales-purchases-page .product-item .order-info-block .number {
    margin-left: 10px;
}

*[dir='rtl'] .sales-purchases-page .product-item .order-info-block .number {
    margin-left: 0px;
    margin-right: 10px;
}

.sales-purchases-page .product-description-area .goods-title {
    font-size: 24px;
    font-weight: 400;
    margin-top: 15px;
    word-break: break-word;
    padding-right: 30px;
}

*[dir='rtl'] .sales-purchases-page .product-description-area .goods-title {
    padding-right: 0px;
    padding-left: 30px;
}

.sales-purchases-page .product-description-area .goods-title a {
    color: var(--color-text-basic);
    text-decoration: none;
    font-weight: 400;
}

.sales-purchases-page .product-item .product-description-area .price-block {
    display: block;
    width: 100%;
    margin-top: 5px;
}

    .sales-purchases-page .product-item .product-description-area .price-block .price {
        font-size: 18px;
        color: var(--color-text-muted);
        margin-right: 15px;
    }

*[dir='rtl'] .sales-purchases-page .product-item .product-description-area .price-block .price {
    margin-right: 0px;
    margin-left: 15px;
}

.sales-purchases-page .product-item .product-description-area .price-block .new-price .price {
    margin-left: 8px;
    margin-right: 0px;
}

*[dir='rtl'] .sales-purchases-page .product-item .product-description-area .price-block .new-price .price {
    margin-left: 0px;
    margin-right: 8px;
}

.sales-purchases-page .product-item .product-description-area .price-block .new-price bdo {
    white-space: nowrap;
}

.sales-purchases-page .product-item .product-description-area .price-block .old-price.price {
    text-decoration: line-through;
    color: var(--color-text-muted);
}


.sales-purchases-page .product-item.new .product-description-area .price-block bdi span + span {
    padding-left: 5px;
}


.sales-purchases-page .product-item .statuses-list {
    display: block;
    width: 100%;
    position: relative;
    font-size: 0px;
    margin-top: 20px;
}

    .sales-purchases-page .product-item .statuses-list .status-item,
    .modal .status-item, .modal-custom .status-item,
    .myads-page .goods-card .status-item {
        display: inline-block;
        font-size: 14px;
        border-radius: var(--radius-4);
        color: var(--color-text-basic);
        background-color: #F2F2F2;
        padding: 10px 15px 10px 15px;
        cursor: pointer;
        margin-right: 5px;
        margin-bottom: 5px;
    }

*[dir='rtl'] .sales-purchases-page .product-item .statuses-list .status-item,
*[dir='rtl'] .modal .status-item, *[dir='rtl'] .modal-custom .status-item,
*[dir='rtl'] .myads-page .goods-card .status-item {
    margin-right: 0px;
    margin-left: 5px;
}

.sales-purchases-page .product-item .statuses-list .status-item.not-paid, .modal .status-item.not-paid, .modal-custom .status-item.not-paid,
.sales-purchases-page .product-item .statuses-list .status-item.waiting-pickup, .modal .status-item.waiting-pickup, .modal-custom .status-item.waiting-pickup,
.sales-purchases-page .product-item .statuses-list .status-item.awaiting-your-confirmation, .modal .status-item.awaiting-your-confirmation, .modal-custom .status-item.awaiting-your-confirmation,
.sales-purchases-page .product-item .statuses-list .status-item.awaiting-sellers-confirmation, .modal .status-item.awaiting-sellers-confirmation, .modal-custom .status-item.awaiting-sellers-confirmation,
.sales-purchases-page .product-item .statuses-list .status-item.closed, .modal .status-item.closed, .modal-custom .status-item.closed,
.myads-page .goods-card .status-item.not-paid,
.modal-custom .status-item.not-paid,
.myads-page .goods-card .status-item.in-review,
.modal-custom .status-item.in-review,
.myads-page .goods-card .status-item.inactive,
.modal-custom .status-item.inactive {
    background-color: #EBEBEB;
    color: var(--color-text-basic);
}

.sales-purchases-page .product-item .statuses-list .status-item.paid, .modal .status-item.paid, .modal-custom .status-item.paid,
.sales-purchases-page .product-item .statuses-list .status-item.confirmed-by-you, .modal .status-item.confirmed-by-you, .modal-custom .status-item.confirmed-by-you,
.sales-purchases-page .product-item .statuses-list .status-item.confirmed-by-seller, .modal .status-item.confirmed-by-seller, .modal-custom .status-item.confirmed-by-seller,
.sales-purchases-page .product-item .statuses-list .status-item.confirmed-by-you-waiting-pickup, .modal .status-item.confirmed-by-you-waiting-pickup, .modal-custom .status-item.confirmed-by-you-waiting-pickup,
.sales-purchases-page .product-item .statuses-list .status-item.confirmed-waiting-pickup, .modal .status-item.confirmed-waiting-pickup, .modal-custom .status-item.confirmed-waiting-pickup,
.sales-purchases-page .product-item .statuses-list .status-item.pickedup, .modal .status-item.pickedup, .modal-custom .status-item.pickedup,
.sales-purchases-page .product-item .statuses-list .status-item.on-the-way, .modal .status-item.on-the-way, .modal-custom .status-item.on-the-way,
.sales-purchases-page .product-item .statuses-list .status-item.awaiting-courier, .modal .status-item.awaiting-courier, .modal-custom .status-item.awaiting-courier,
.sales-purchases-page .product-item .statuses-list .status-item.delivered, .modal .status-item.delivered, .modal-custom .status-item.delivered,
.sales-purchases-page .product-item .statuses-list .status-item.on-way-back, .modal .status-item.on-way-back, .modal-custom .status-item.on-way-back,
.myads-page .goods-card .status-item.paid,
.modal-custom .status-item.paid,
.myads-page .goods-card .status-item.published,
.modal-custom .status-item.published {
    background-color: #E6F4ED;
    color: var(--color-text-muted);
}

.sales-purchases-page .product-item .statuses-list .status-item.canceled-by-buyer, .modal .status-item.canceled-by-buyer, .modal-custom .status-item.canceled-by-buyer,
.sales-purchases-page .product-item .statuses-list .status-item.canceled-by-seller, .modal .status-item.canceled-by-seller, .modal-custom .status-item.canceled-by-seller,
.sales-purchases-page .product-item .statuses-list .status-item.canceled-by-administration, .modal .status-item.canceled-by-administration, .modal-custom .status-item.canceled-by-administration,
.sales-purchases-page .product-item .statuses-list .status-item.expired, .modal .status-item.expired, .modal-custom .status-item.expired,
.sales-purchases-page .product-item .statuses-list .status-item.canceled-by-cargo, .modal .status-item.canceled-by-cargo, .modal-custom .status-item.canceled-by-cargo,
.sales-purchases-page .product-item .statuses-list .status-item.refused-by-buyer, .modal .status-item.refused-by-buyer, .modal-custom .status-item.refused-by-buyer,
.myads-page .goods-card .status-item.wrong-payment,
.modal-custom .status-item.wrong-payment,
.myads-page .goods-card .status-item.rejected,
.modal-custom .status-item.rejected,
.myads-page .goods-card .status-item.deleted,
.modal-custom .status-item.deleted {
    background-color: var(--color-bg-danger);
    color: #ffffff;
}

.sales-purchases-page .product-item .statuses-list .status-item.canceled-by-you, .modal .status-item.canceled-by-you, .modal-custom .status-item.canceled-by-you,
.sales-purchases-page .product-item .statuses-list .status-item.refused-by-you, .modal .status-item.refused-by-you, .modal-custom .status-item.refused-by-you {
    background-color: #FBCFCF;
    color: var(--color-text-muted);
}

.sales-purchases-page .product-item .statuses-list .status-item.on-hold, .modal .status-item.on-hold, .modal-custom .status-item.on-hold,
.myads-page .goods-card .status-item.pending,
.modal-custom .status-item.pending,
.myads-page .goods-card .status-item.drafted,
.modal-custom .status-item.drafted {
    background-color: var(--color-bg-warning);
    color: var(--color-text-basic);
}

.sales-purchases-page .product-item .notes-block {
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-right: 10px;
    word-break: break-word;
}

*[dir='rtl'] .sales-purchases-page .product-item .notes-block {
    padding-right: 0px;
    padding-left: 10px;
}

.sales-purchases-page .product-item .product-delivery-area .delivery-status-panel {
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #EBEBEB;
    margin-bottom: 15px;
    text-align: left;
}

*[dir='rtl'] .sales-purchases-page .product-item .product-delivery-area .delivery-status-panel {
    text-align: right;
}

.sales-purchases-page .product-item .product-delivery-area .delivery-status-panel .content {
    display: block;
    width: 100%;
    padding: 10px 10px 10px 10px;
}

    .sales-purchases-page .product-item .product-delivery-area .delivery-status-panel .content bdi {
        display: inline-block;
    }

        .sales-purchases-page .product-item .product-delivery-area .delivery-status-panel .content bdi:first-child {
            margin-right: 10px;
        }

*[dir='rtl'] .sales-purchases-page .product-item .product-delivery-area .delivery-status-panel .content bdi:first-child {
    margin-right: 0px;
    margin-left: 10px;
}


.sales-purchases-page .product-item.new .user-info {
    position: relative;
    vertical-align: middle;
    height: 32px;
    margin-bottom: 5px;
}

    .sales-purchases-page .product-item.new .user-info .user-avatar {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
    }

*[dir='rtl'] .sales-purchases-page .product-item.new .user-info .user-avatar {
    left: auto;
    right: 0px;
}

.sales-purchases-page .product-item.new .user-info span {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    line-height: 32px;
    text-align: left;
    padding-left: 40px;
    font-size: 14px;
}

*[dir='rtl'] .sales-purchases-page .product-item.new .user-info span {
    text-align: right;
    padding-right: 40px;
    padding-left: 0px;
}

.sales-purchases-page .product-item.new .user-address {
    position: relative;
    vertical-align: middle;
    margin-bottom: 15px;
    min-height: 32px;
}

    .sales-purchases-page .product-item.new .user-address button {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
        font-size: 32px;
        padding: 0px;
        border: 0px none transparent;
        background-color: transparent;
    }

*[dir='rtl'] .sales-purchases-page .product-item.new .user-address button {
    left: auto;
    right: 0px;
}

.sales-purchases-page .product-item.new .user-address span {
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 17px;
    text-align: left;
    padding-left: 40px;
    font-size: 14px;
}

*[dir='rtl'] .sales-purchases-page .product-item.new .user-address span {
    text-align: right;
    padding-left: 0px;
    padding-right: 40px;
}

@media (max-width: 1199px) {
    .sales-purchases-page .product-item .product-image-area {
        width: 150px;
    }

    .sales-purchases-page .product-item .product-delivery-area,
    .sales-purchases-page .product-item .product-controls-area {
        width: 180px;
    }

    .sales-purchases-page .product-item .order-info-block .number {
        margin-left: 5px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item .order-info-block .number {
        margin-left: 0px;
        margin-right: 5px;
    }
}

@media (max-width: 991px) {
    .sales-purchases-page .product-item {
        display: block;
        font-size: 0px;
    }

        .sales-purchases-page .product-item > *,
        .sales-purchases-page .product-item > * > *,
        .sales-purchases-page .product-item .product-image-area,
        .sales-purchases-page .product-item .product-description-area,
        .sales-purchases-page .product-item .product-delivery-area,
        .sales-purchases-page .product-item .product-controls-area {
            display: block;
            width: 100%;
        }

        .sales-purchases-page .product-item .product-delivery-area,
        .sales-purchases-page .product-item .product-controls-area {
            border-left: 0px none transparent;
            padding-left: 0px;
            padding-right: 0px;
        }

    *[dir='rtl'] .sales-purchases-page .product-item .product-delivery-area,
    *[dir='rtl'] .sales-purchases-page .product-item .product-controls-area {
        border-right: 0px none transparent;
        padding-left: 0px;
        padding-right: 0px;
    }

    .sales-purchases-page .product-item .product-controls-area {
        text-align: left;
        position: relative;
        border-top: 1px solid #DDDDDD;
        padding-top: 12px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 14px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item .product-controls-area {
        text-align: right;
        padding-left: 12px;
        padding-right: 12px;
    }

    .sales-purchases-page .product-item .product-controls-area .new-btn {
        display: inline-block;
        width: auto;
        min-width: 0px;
    }

    .sales-purchases-page .product-item.new .product-controls-area .btn-messages.btn-default {
        float: left;
        margin-left: 0px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item.new .product-controls-area .btn-messages.btn-default {
        float: right;
        margin-left: 0px;
        margin-right: 0px;
    }

    .sales-purchases-page .product-item .product-controls-area .btn-primary,
    .sales-purchases-page .product-item.new .product-controls-area .btn-primary,
    .sales-purchases-page .product-item.new .product-controls-area .btn-default {
        float: right;
        margin-left: 5px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item .product-controls-area .btn-primary,
    *[dir='rtl'] .sales-purchases-page .product-item.new .product-controls-area .btn-primary,
    *[dir='rtl'] .sales-purchases-page .product-item.new .product-controls-area .btn-default {
        margin-left: 0px;
        margin-right: 5px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item .product-controls-area .btn-primary,
    *[dir='rtl'] .sales-purchases-page .product-item .product-controls-area .btn-link,
    *[dir='rtl'] .sales-purchases-page .product-item.new .product-controls-area .btn-primary,
    *[dir='rtl'] .sales-purchases-page .product-item.new .product-controls-area .btn-link,
    *[dir='rtl'] .sales-purchases-page .product-item.new .product-controls-area .btn-default {
        float: left;
    }

    .sales-purchases-page .product-item .product-controls-area .btn-link {
        float: right;
    }


    .sales-purchases-page .product-item.new .product-controls-area .btn-link {
        float: right;
        padding-left: 8px;
        padding-right: 8px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item.new .product-controls-area .btn-link {
        float: left;
        padding-left: 8px;
        padding-right: 8px;
    }

    .sales-purchases-page .product-item .product-delivery-area {
        text-align: left;
        padding-left: 12px;
        padding-right: 12px;
        border-top: 1px solid #DDDDDD;
        padding-bottom: 23px;
        padding-top: 20px;
        font-size: 14px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item .product-delivery-area {
        text-align: right;
        padding-left: 12px;
        padding-right: 12px;
    }


    .sales-purchases-page .product-item .product-delivery-area a {
        display: inline-block;
        width: auto;
    }

        .sales-purchases-page .product-item .product-delivery-area a + a {
            margin-left: 20px;
            margin-top: 0px;
        }

    *[dir='rtl'] .sales-purchases-page .product-item .product-delivery-area a + a {
        margin-left: 0px;
        margin-right: 20px;
    }

    .sales-purchases-page .product-item .product-delivery-area .title {
        position: static;
        font-weight: 700;
        margin-bottom: 20px;
        color: var(--color-text-basic) !important;
    }

    .sales-purchases-page .product-item .product-delivery-area .address-note {
        margin-top: 10px;
        margin-bottom: 0px;
    }

    .sales-purchases-page .product-item .product-image-area {
        display: inline-block;
        vertical-align: top;
        width: 30%;
    }

    .sales-purchases-page .product-item .product-image-area {
        display: inline-block;
        vertical-align: top;
        width: 30%;
        font-size: 14px;
        height: 200px;
        padding-left: 12px;
        padding-top: 12px;
        padding-bottom: 20px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item .product-image-area {
        padding-left: 0px;
        padding-right: 12px;
    }

    .sales-purchases-page .product-item .product-description-area {
        display: inline-block;
        vertical-align: top;
        width: 70%;
        font-size: 14px;
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 12px;
        padding-bottom: 20px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item .product-description-area {
        padding-left: 12px;
        padding-right: 20px;
    }

    .sales-purchases-page .product-item .product-image-area .product-img-container {
        position: static;
    }

    .sales-purchases-page .product-item .notes-block,
    *[dir='rtl'] .sales-purchases-page .product-item .notes-block {
        margin-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .sales-purchases-page .product-description-area .goods-title,
    *[dir='rtl'] .sales-purchases-page .product-description-area .goods-title {
        padding-right: 0px;
        padding-left: 0px;
    }

    .sales-purchases-page .product-item .product-controls-area .new-btn {
        padding-left: 20px;
        padding-right: 20px;
    }

    .sales-purchases-page .product-item.new .product-delivery-area {
        border-left: 0px none transparent;
        padding-top: 15px;
        padding-left: 15px;
        padding-right: 15px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item.new .product-delivery-area {
        border-left: 0px none transparent;
        border-right: 0px none transparent;
    }

    .sales-purchases-page .product-item.new .product-controls-area {
        border-left: 0px none transparent;
        padding-bottom: 5px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item.new .product-controls-area {
        border-left: 0px none transparent;
        border-right: 0px none transparent;
    }

    .sales-purchases-page .product-item.new .user-address span {
        padding-top: 7px;
    }

    .sales-purchases-page .new.new-events.new .product-item.new,
    .sales-purchases-page .product-item.new {
        padding: 0px;
    }

        .sales-purchases-page .product-item.new .user-address button {
            top: calc(50% - 16px);
        }
}

@media (max-width: 767px) {
    .sales-purchases-page .product-item .product-image-area,
    *[dir='rtl'] .sales-purchases-page .product-item .product-image-area {
        width: 100%;
        height: 250px;
        padding-right: 12px;
        padding-left: 12px;
        padding-bottom: 0px;
    }

    .sales-purchases-page .product-item .product-description-area,
    *[dir='rtl'] .sales-purchases-page .product-item .product-description-area {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .sales-purchases-page .product-item .product-controls-area .new-btn.btn-default,
    .sales-purchases-page .product-item.new .product-controls-area .new-btn.btn-default.btn-messages {
        position: relative;
        min-height: 50px;
        min-width: 57px;
        padding-left: 45px;
        padding-right: 13px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item .product-controls-area .new-btn.btn-default,
    *[dir='rtl'] .sales-purchases-page .product-item.new .product-controls-area .new-btn.btn-default.btn-messages {
        padding-right: 45px;
        padding-left: 13px;
    }

    .sales-purchases-page .product-item.new .product-controls-area .new-btn.btn-default {
        padding-left: 20px;
        padding-right: 20px;
    }

    .sales-purchases-page .product-item .product-controls-area .new-btn .ci-pazar {
        display: block;
        position: absolute;
        font-size: 32px;
        left: 12px;
        top: calc(50% - 16px);
    }

    *[dir='rtl'] .sales-purchases-page .product-item .product-controls-area .new-btn .ci-pazar {
        right: 12px;
        left: auto;
    }

    .sales-purchases-page .product-item .product-controls-area .new-btn bdi {
        display: none;
    }

    .sales-purchases-page .product-item .product-controls-area .new-btn .badge {
        font-style: normal;
        font-weight: 700;
        background-color: var(--color-bg-danger);
        color: #ffffff;
        padding: 2px 5px 2px 5px;
        border-radius: var(--radius-4);
        margin-right: 0px;
        display: inline-block;
        margin-top: -5px;
        margin-left: -1px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item .product-controls-area .new-btn .badge {
        margin-left: 0px;
        margin-right: -1px;
    }
}

@media (max-width: 474px) {
    .sales-purchases-page .new-events {
        padding-top: 25px;
        padding-bottom: 25px;
    }

        .sales-purchases-page .new-events h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 25px;
        }

    .sales-purchases-page .product-item .product-image-area,
    *[dir='rtl'] .sales-purchases-page .product-item .product-image-area {
        width: 100%;
        height: 160px;
        padding-right: 12px;
        padding-left: 12px;
        padding-bottom: 0px;
    }

    .sales-purchases-page .product-description-area .goods-title,
    *[dir='rtl'] .sales-purchases-page .product-description-area .goods-title {
        font-size: 18px;
        font-weight: 700;
    }

    .sales-purchases-page .product-item .product-controls-area .new-btn {
        display: block;
        width: 100%;
        float: none;
        margin-left: 0px;
        margin-top: 0px;
        padding-left: 5px;
        padding-right: 5px;
    }

        .sales-purchases-page .product-item .product-controls-area .new-btn.btn-default,
        *[dir='rtl'] .sales-purchases-page .product-item .product-controls-area .new-btn.btn-default {
            padding-left: 5px;
            padding-right: 5px;
        }


            .sales-purchases-page .product-item .product-controls-area .new-btn.btn-default bdi {
                display: inline-block;
            }

        .sales-purchases-page .product-item .product-controls-area .new-btn .ci-pazar {
            display: none;
        }

        .sales-purchases-page .product-item .product-controls-area .new-btn .badge {
            margin: 0px;
            margin-right: 5px;
            display: inline;
            margin-left: -10px;
        }

    *[dir='rtl'] .sales-purchases-page .product-item .product-controls-area .new-btn .badge {
        margin: 0px;
        margin-left: 5px;
        display: inline;
        margin-right: -10px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item .product-delivery-area a + a,
    .sales-purchases-page .product-item .product-delivery-area a + a {
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 12px;
    }

    .sales-purchases-page .product-item .product-delivery-area a {
        margin-right: 10px;
        margin-top: 12px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item .product-delivery-area a {
        margin-left: 10px;
        margin-right: 0px;
        margin-top: 12px;
    }

    .sales-purchases-page .product-item .product-delivery-area .delivery-status-panel {
        margin-bottom: 0px;
    }

    .sales-purchases-page .product-item {
        padding: 0px;
        position: relative;
    }

        .sales-purchases-page .product-item .product-image-area .product-img-container,
        .sales-purchases-page .product-item .order-info-block {
            position: static;
        }

        .sales-purchases-page .product-item .product-image-area,
        *[dir='rtl'] .sales-purchases-page .product-item .product-image-area {
            padding-right: 0px;
            padding-left: 0px;
            padding-top: 0px;
        }

            .sales-purchases-page .product-item .product-image-area .product-img-container .img {
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 0px;
            }

        .sales-purchases-page .product-item .order-info-block .order-number {
            position: absolute;
            top: 4px;
            left: 4px;
            background-color: rgba(0,0,0,0.5);
            padding: 6px 12px 6px 12px;
            border-radius: var(--radius-4);
            -webkit-backdrop-filter: blur(3px);
            -ms-backdrop-filter: blur(3px);
            -moz-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
            border-right: 0px none transparent;
        }

    *[dir='rtl'] .sales-purchases-page .product-item .order-info-block .order-number {
        right: 4px;
        left: auto;
        padding: 6px 12px 6px 12px;
        border-left: 0px none transparent;
    }

    .sales-purchases-page .product-item .order-info-block .order-date {
        margin: 0px;
        position: absolute;
        top: 4px;
        right: 4px;
        background-color: rgba(0,0,0,0.5);
        padding: 6px 12px 6px 12px;
        border-radius: var(--radius-4);
        -webkit-backdrop-filter: blur(3px);
        -ms-backdrop-filter: blur(3px);
        -moz-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        border-right: 0px none transparent;
    }

    *[dir='rtl'] .sales-purchases-page .product-item .order-info-block .order-date {
        left: 4px;
        right: auto;
        padding: 6px 12px 6px 12px;
        border-left: 0px none transparent;
    }

    .sales-purchases-page .product-item .order-info-block .order-number bdi,
    .sales-purchases-page .product-item .order-info-block .order-date bdi {
        color: #FFFFFF !important;
    }

    .sales-purchases-page .product-description-area .goods-title,
    *[dir='rtl'] .sales-purchases-page .product-description-area .goods-title {
        margin-top: 0px;
    }

    .sales-purchases-page .product-item.new .product-controls-area .new-btn.btn-default.btn-messages,
    *[dir='rtl'] .sales-purchases-page .product-item.new .product-controls-area .new-btn.btn-default.btn-messages {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 419px) {
    .sales-purchases-page .product-item .order-info-block .order-date {
        top: 127px;
        right: auto;
        left: 4px;
    }

    *[dir='rtl'] .sales-purchases-page .product-item .order-info-block .order-date {
        top: 127px;
        right: 4px;
        left: auto;
    }
}
/* #endregion Products item */
/* #region ----------------- Offer Confirmation Success - Custom Modal ---------------------- */
.modal-custom.offer-confirmation-success.new .modal-window {
    width: 820px;
    left: calc(50% - 410px);
    top: calc(50% - 300px);
}

.modal-custom.offer-confirmation-success.new .content-container {
    display: block;
    width: 600px;
    margin: 0px auto 0px auto;
}

    .modal-custom.offer-confirmation-success.new .content-container h4 {
        display: block;
        font-size: 30px;
        line-height: 32px;
        font-weight: 800;
    }

    .modal-custom.offer-confirmation-success.new .content-container p {
        display: block;
        font-size: 14px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

.modal-custom.offer-confirmation-success.new .clipart-area,
.modal-custom.password-success .clipart-area {
    display: block;
    margin: 0px auto 0px auto;
    width: 230px;
    height: 230px;
    background: none;
    background-size: contain;
}

    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-1,
    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-2,
    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-3,
    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-4,
    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-5,
    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-6,
    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-7,
    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-8,
    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-9,
    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-10,
    .modal-custom.password-success .clipart-area .clipart-cloud-1,
    .modal-custom.password-success .clipart-area .clipart-cloud-2,
    .modal-custom.password-success .clipart-area .clipart-cloud-3,
    .modal-custom.password-success .clipart-area .clipart-cloud-4,
    .modal-custom.password-success .clipart-area .clipart-cloud-5,
    .modal-custom.password-success .clipart-area .clipart-cloud-6,
    .modal-custom.password-success .clipart-area .clipart-cloud-7,
    .modal-custom.password-success .clipart-area .clipart-cloud-8,
    .modal-custom.password-success .clipart-area .clipart-cloud-9,
    .modal-custom.password-success .clipart-area .clipart-cloud-10 {
        display: block;
        border-radius: 50%;
        position: absolute;
        background-color: #EBEBEB;
        z-index: 1;
    }

    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-1,
    .modal-custom.password-success .clipart-area .clipart-cloud-1 {
        width: 28%;
        height: 28%;
        top: 13%;
        left: 5%;
        animation: offer-confirm-success-cloud-1 1.5s ease-in-out infinite alternate;
    }

    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-2,
    .modal-custom.password-success .clipart-area .clipart-cloud-2 {
        width: 38%;
        height: 38%;
        top: 15%;
        left: 21%;
        animation: offer-confirm-success-cloud-2 1.7s ease-in-out infinite alternate;
    }

    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-3,
    .modal-custom.password-success .clipart-area .clipart-cloud-3 {
        width: 35%;
        height: 35%;
        top: 4%;
        left: 39%;
        animation: offer-confirm-success-cloud-3 1.2s ease-in-out infinite alternate;
    }

    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-4,
    .modal-custom.password-success .clipart-area .clipart-cloud-4 {
        width: 28%;
        height: 28%;
        top: 18%;
        left: 62%;
        animation: offer-confirm-success-cloud-4 1.6s ease-in-out infinite alternate;
    }

    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-5,
    .modal-custom.password-success .clipart-area .clipart-cloud-5 {
        width: 25%;
        height: 25%;
        top: 37%;
        left: 71%;
        animation: offer-confirm-success-cloud-5 1.1s ease-in-out infinite alternate;
    }

    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-6,
    .modal-custom.password-success .clipart-area .clipart-cloud-6 {
        width: 40%;
        height: 40%;
        top: 45%;
        left: 47%;
        animation: offer-confirm-success-cloud-6 1.3s ease-in-out infinite alternate;
    }

    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-7,
    .modal-custom.password-success .clipart-area .clipart-cloud-7 {
        width: 30%;
        height: 30%;
        top: 63%;
        left: 31%;
        animation: offer-confirm-success-cloud-7 1.7s ease-in-out infinite alternate;
    }

    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-8,
    .modal-custom.password-success .clipart-area .clipart-cloud-8 {
        width: 40%;
        height: 40%;
        top: 45%;
        left: 11%;
        animation: offer-confirm-success-cloud-8 1.5s ease-in-out infinite alternate;
    }

    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-9,
    .modal-custom.password-success .clipart-area .clipart-cloud-9 {
        width: 30%;
        height: 30%;
        top: 34%;
        left: 3%;
        animation: offer-confirm-success-cloud-9 1.1s ease-in-out infinite alternate;
    }

    .modal-custom.offer-confirmation-success.new .clipart-area .clipart-cloud-10,
    .modal-custom.password-success .clipart-area .clipart-cloud-10 {
        width: 50%;
        height: 50%;
        top: 21%;
        left: 34%;
    }

@keyframes offer-confirm-success-cloud-1 {
    from {
        transform: translate(-1%, -1%);
    }

    to {
        transform: translate(10%, 10%);
    }
}

@keyframes offer-confirm-success-cloud-2 {
    from {
        transform: translate(5%, 8%);
    }

    to {
        transform: translate(-1%, -4%);
    }
}

@keyframes offer-confirm-success-cloud-3 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@keyframes offer-confirm-success-cloud-4 {
    from {
        transform: translate(4%, -6%);
    }

    to {
        transform: translate(-4%, 6%);
    }
}

@keyframes offer-confirm-success-cloud-5 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(8%, 0%);
    }
}

@keyframes offer-confirm-success-cloud-6 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(-5%, -5%);
    }
}

@keyframes offer-confirm-success-cloud-7 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@keyframes offer-confirm-success-cloud-8 {
    from {
        transform: translate(-7%, 7%);
    }

    to {
        transform: translate(7%, -7%);
    }
}

@keyframes offer-confirm-success-cloud-9 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

.modal-custom.offer-confirmation-success.new .clipart-area .clipart-ok,
.modal-custom.password-success .clipart-area .clipart-ok {
    display: block;
    position: absolute;
    width: 50%;
    height: 50%;
    top: 18%;
    left: 24%;
    z-index: 1;
    background: url('../../Content/Images/clipart-ok.svg') no-repeat center center transparent;
    background-size: contain;
    animation: offer-confirm-success-ok 1.2s ease-in-out infinite alternate;
}

@keyframes offer-confirm-success-ok {
    from {
        transform: translate(0%, -3%);
    }

    to {
        transform: translate(0%, 7%);
    }
}

.modal-custom.offer-confirmation-success.new .clipart-area .clipart-shadow,
.modal-custom.password-success .clipart-area .clipart-shadow {
    display: block;
    position: absolute;
    width: 50%;
    height: 5%;
    top: 74%;
    left: 24%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    animation: offer-confirm-success-shadow 1.2s ease-in-out infinite alternate;
}

@keyframes offer-confirm-success-shadow {
    from {
        transform: scale(0.8, 0.8);
        opacity: 0.6;
    }

    to {
        transform: scale(1, 1);
        opacity: 1;
    }
}

@media (max-width: 991px) {
    .modal-custom.offer-confirmation-success.new .modal-window {
        max-width: 600px;
        left: calc(50% - 300px);
        top: calc(50% - 316px);
    }

    .modal-custom.offer-confirmation-success.new .content-container {
        display: block;
        width: 100%;
        padding-left: 50px;
        padding-right: 50px;
    }

    .modal-custom.offer-confirmation-success.new .clipart-area,
    .modal-custom.password-success .clipart-area {
        display: block;
        margin: 0px auto 0px auto;
        width: 200px;
        height: 200px;
        background: none;
        background-size: contain;
    }
}



@media (max-height: 660px) {
    .modal-custom.offer-confirmation-success.new .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.offer-confirmation-success.new .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.offer-confirmation-success.new .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.offer-confirmation-success.new .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.offer-confirmation-success.new .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}

@media (max-width: 767px) {
    .modal-custom.offer-confirmation-success.new .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.offer-confirmation-success.new .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.offer-confirmation-success.new .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.offer-confirmation-success.new .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.offer-confirmation-success.new .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}

@media (max-width: 650px) {
    .modal-custom.offer-confirmation-success.new .content-container {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 450px) {
    .modal-custom.offer-confirmation-success.new .content-container h4 {
        font-size: 24px;
        line-height: 26px;
    }

    .modal-custom.offer-confirmation-success.new .content-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .modal-custom.offer-confirmation-success.new .clipart-area,
    .modal-custom.password-success .clipart-area {
        width: 150px;
        height: 150px;
        margin-bottom: 10px;
    }
}

/* #endregion ------------- /Offer Confirmation Success - Custom Modal ---------------------- */
/* #region ------------------------ Offer Confirmation Success ------------------------------ */
.modal.offer-confirmation-success.new .modal-dialog {
    max-width: 820px;
    top: calc(50% - 300px);
}

.modal.offer-confirmation-success.new .content-container {
    display: block;
    width: 100%;
    padding-left: 90px;
    padding-right: 90px;
}

    .modal.offer-confirmation-success.new .content-container h4 {
        display: block;
        font-size: 30px;
        line-height: 32px;
        font-weight: 800;
    }

    .modal.offer-confirmation-success.new .content-container p {
        display: block;
        font-size: 14px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

.modal.offer-confirmation-success.new .clipart-area {
    display: block;
    margin: 0px auto 0px auto;
    width: 230px;
    height: 230px;
    background: none;
    background-size: contain;
}

    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-1,
    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-2,
    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-3,
    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-4,
    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-5,
    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-6,
    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-7,
    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-8,
    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-9,
    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-10 {
        display: block;
        border-radius: 50%;
        position: absolute;
        background-color: #EBEBEB;
        z-index: 1;
    }

    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-1 {
        width: 28%;
        height: 28%;
        top: 13%;
        left: 5%;
        animation: offer-confirm-success-cloud-1 1.5s ease-in-out infinite alternate;
    }

    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-2 {
        width: 38%;
        height: 38%;
        top: 15%;
        left: 21%;
        animation: offer-confirm-success-cloud-2 1.7s ease-in-out infinite alternate;
    }

    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-3 {
        width: 35%;
        height: 35%;
        top: 4%;
        left: 39%;
        animation: offer-confirm-success-cloud-3 1.2s ease-in-out infinite alternate;
    }

    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-4 {
        width: 28%;
        height: 28%;
        top: 18%;
        left: 62%;
        animation: offer-confirm-success-cloud-4 1.6s ease-in-out infinite alternate;
    }

    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-5 {
        width: 25%;
        height: 25%;
        top: 37%;
        left: 71%;
        animation: offer-confirm-success-cloud-5 1.1s ease-in-out infinite alternate;
    }

    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-6 {
        width: 40%;
        height: 40%;
        top: 45%;
        left: 47%;
        animation: offer-confirm-success-cloud-6 1.3s ease-in-out infinite alternate;
    }

    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-7 {
        width: 30%;
        height: 30%;
        top: 63%;
        left: 31%;
        animation: offer-confirm-success-cloud-7 1.7s ease-in-out infinite alternate;
    }

    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-8 {
        width: 40%;
        height: 40%;
        top: 45%;
        left: 11%;
        animation: offer-confirm-success-cloud-8 1.5s ease-in-out infinite alternate;
    }

    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-9 {
        width: 30%;
        height: 30%;
        top: 34%;
        left: 3%;
        animation: offer-confirm-success-cloud-9 1.1s ease-in-out infinite alternate;
    }

    .modal.offer-confirmation-success.new .clipart-area .clipart-cloud-10 {
        width: 50%;
        height: 50%;
        top: 21%;
        left: 34%;
    }

@keyframes offer-confirm-success-cloud-1 {
    from {
        transform: translate(-1%, -1%);
    }

    to {
        transform: translate(10%, 10%);
    }
}

@keyframes offer-confirm-success-cloud-2 {
    from {
        transform: translate(5%, 8%);
    }

    to {
        transform: translate(-1%, -4%);
    }
}

@keyframes offer-confirm-success-cloud-3 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@keyframes offer-confirm-success-cloud-4 {
    from {
        transform: translate(4%, -6%);
    }

    to {
        transform: translate(-4%, 6%);
    }
}

@keyframes offer-confirm-success-cloud-5 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(8%, 0%);
    }
}

@keyframes offer-confirm-success-cloud-6 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(-5%, -5%);
    }
}

@keyframes offer-confirm-success-cloud-7 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@keyframes offer-confirm-success-cloud-8 {
    from {
        transform: translate(-7%, 7%);
    }

    to {
        transform: translate(7%, -7%);
    }
}

@keyframes offer-confirm-success-cloud-9 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

.modal.offer-confirmation-success.new .clipart-area .clipart-ok {
    display: block;
    position: absolute;
    width: 50%;
    height: 50%;
    top: 18%;
    left: 24%;
    z-index: 1;
    background: url('../../Content/Images/clipart-ok.svg') no-repeat center center transparent;
    background-size: contain;
    animation: offer-confirm-success-ok 1.2s ease-in-out infinite alternate;
}

@keyframes offer-confirm-success-ok {
    from {
        transform: translate(0%, -3%);
    }

    to {
        transform: translate(0%, 7%);
    }
}

.modal.offer-confirmation-success.new .clipart-area .clipart-shadow {
    display: block;
    position: absolute;
    width: 50%;
    height: 5%;
    top: 74%;
    left: 24%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    animation: offer-confirm-success-shadow 1.2s ease-in-out infinite alternate;
}

@keyframes offer-confirm-success-shadow {
    from {
        transform: scale(0.8, 0.8);
        opacity: 0.6;
    }

    to {
        transform: scale(1, 1);
        opacity: 1;
    }
}

@media (max-width: 991px) {
    .modal.offer-confirmation-success.new .modal-dialog {
        max-width: 600px;
        top: calc(50% - 316px);
    }

    .modal.offer-confirmation-success.new .content-container {
        display: block;
        width: 100%;
        padding-left: 50px;
        padding-right: 50px;
    }

    .modal.offer-confirmation-success.new .clipart-area {
        display: block;
        margin: 0px auto 0px auto;
        width: 200px;
        height: 200px;
        background: none;
        background-size: contain;
    }
}


@media (max-height: 660px) {
    .modal.delivery-info.show {
        padding: 0px !important;
        margin: 0px !important;
    }

    .modal.offer-confirmation-success.new .modal-dialog {
        top: 0px;
        left: 0px;
        max-width: 100%;
        margin: 0px;
        height: 100%;
    }

        .modal.offer-confirmation-success.new .modal-dialog .modal-content {
            border-radius: var(--radius-0);
            border: 0px;
            height: 100%;
            box-shadow: none;
        }

        .modal.offer-confirmation-success.new .modal-dialog .modal-body {
            max-height: calc(100% - 121px) !important;
        }

        .modal.offer-confirmation-success.new .modal-dialog .modal-footer {
            height: 69px;
        }
}

@media (max-width: 767px) {
    .modal.delivery-info.show {
        padding: 0px !important;
        margin: 0px !important;
    }

    .modal.offer-confirmation-success.new .modal-dialog {
        top: 0px;
        left: 0px;
        max-width: 100%;
        margin: 0px;
        height: 100%;
    }

        .modal.offer-confirmation-success.new .modal-dialog .modal-content {
            border-radius: var(--radius-0);
            border: 0px;
            height: 100%;
            box-shadow: none;
        }

        .modal.offer-confirmation-success.new .modal-dialog .modal-body {
            max-height: calc(100% - 121px) !important;
        }

        .modal.offer-confirmation-success.new .modal-dialog .modal-footer {
            height: 69px;
        }
}

@media (max-width: 650px) {
    .modal.offer-confirmation-success.new .content-container {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 450px) {
    .modal.offer-confirmation-success.new .content-container h4 {
        font-size: 24px;
        line-height: 26px;
    }

    .modal.offer-confirmation-success.new .content-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .modal.offer-confirmation-success.new .clipart-area {
        width: 150px;
        height: 150px;
        margin-bottom: 10px;
    }
}

/* #endregion -------------------- /Offer Confirmation Success ------------------------------ */
/* #region ----------------- Order Edit Info Success - Custom Modal ------------------------- */
.modal-custom.edit-info-success .modal-window {
    width: 820px;
    left: calc(50% - 410px);
    top: calc(50% - 250px);
}

.modal-custom.edit-info-success .caption {
    display: block;
    width: 600px;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1;
    position: absolute;
}

    .modal-custom.edit-info-success .caption h4 {
        display: block;
        font-size: 60px;
        line-height: 64px;
        font-weight: 800;
        color: var(--color-text-primary);
        text-align: center;
        width: 100%;
        margin-top: 50px;
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .modal-custom.edit-info-success .caption p {
        display: block;
        font-size: 16px;
        line-height: 21px;
        font-weight: 700;
        color: var(--color-text-muted);
        text-align: center;
        width: 100%;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 0px;
        padding-left: 50px;
        padding-right: 50px;
    }

.modal-custom.edit-info-success .clipart-area {
    display: block;
    width: 250px;
    height: 250px;
    margin: 0px auto 0px auto;
}

.modal-custom.edit-info-success .clipart-cloud-1,
.modal-custom.edit-info-success .clipart-cloud-2,
.modal-custom.edit-info-success .clipart-cloud-3,
.modal-custom.edit-info-success .clipart-cloud-4,
.modal-custom.edit-info-success .clipart-cloud-5,
.modal-custom.edit-info-success .clipart-cloud-6,
.modal-custom.edit-info-success .clipart-cloud-7,
.modal-custom.edit-info-success .clipart-cloud-8,
.modal-custom.edit-info-success .clipart-cloud-9,
.modal-custom.edit-info-success .clipart-cloud-10 {
    display: block;
    z-index: 1;
    position: absolute;
    border-radius: 50%;
    background-color: #EBEBEB;
}

.modal-custom.edit-info-success .clipart-cloud-1 {
    top: 7%;
    left: 7%;
    width: 42%;
    height: 42%;
    animation: edit-info-success-cloud-1 1.2s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-cloud-2 {
    top: 3%;
    left: 42%;
    width: 27%;
    height: 27%;
    animation: edit-info-success-cloud-2 1.4s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-cloud-3 {
    top: 16%;
    left: 42%;
    width: 37%;
    height: 37%;
    animation: edit-info-success-cloud-3 1.5s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-cloud-4 {
    top: 25%;
    left: 67%;
    width: 27%;
    height: 27%;
    animation: edit-info-success-cloud-4 1.6s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-cloud-5 {
    top: 42%;
    left: 57%;
    width: 40%;
    height: 40%;
    animation: edit-info-success-cloud-5 1.5s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-cloud-6 {
    top: 64%;
    left: 49%;
    width: 30%;
    height: 30%;
    animation: edit-info-success-cloud-6 1.1s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-cloud-7 {
    top: 53%;
    left: 14%;
    width: 45%;
    height: 45%;
    animation: edit-info-success-cloud-7 1.4s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-cloud-8 {
    top: 39%;
    left: 4%;
    width: 35%;
    height: 35%;
    animation: edit-info-success-cloud-8 1.3s ease-in-out infinite alternate;
}

.modal-custom.edit-info-success .clipart-cloud-9 {
    top: 29%;
    left: 28%;
    width: 50%;
    height: 50%;
}

@keyframes edit-info-success-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes edit-info-success-cloud-2 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@keyframes edit-info-success-cloud-3 {
    from {
        transform: translate(-2%, 2%);
    }

    to {
        transform: translate(6%, -6%);
    }
}

@keyframes edit-info-success-cloud-4 {
    from {
        transform: translate(6%, -2%);
    }

    to {
        transform: translate(-6%, 2%);
    }
}

@keyframes edit-info-success-cloud-5 {
    from {
        transform: translate(-8%, 2%);
    }

    to {
        transform: translate(4%, -2%);
    }
}

@keyframes edit-info-success-cloud-6 {
    from {
        transform: translate(3%, 6%);
    }

    to {
        transform: translate(-3%, -6%);
    }
}

@keyframes edit-info-success-cloud-7 {
    from {
        transform: translate(-3%, 2%);
    }

    to {
        transform: translate(3%, -12%);
    }
}

@keyframes edit-info-success-cloud-8 {
    from {
        transform: translate(7%, 0%);
    }

    to {
        transform: translate(-7%, 0%);
    }
}

@media (max-width: 991px) {
    .modal-custom.edit-info-success .modal-window {
        width: 600px;
        left: calc(50% - 300px);
        top: calc(50% - 250px);
    }
}

@media (max-width: 727px) {

    .modal-custom.edit-info-success .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.edit-info-success .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.edit-info-success .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.edit-info-success .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.edit-info-success .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}

@media (max-width: 550px) {
    .modal-custom.edit-info-success .caption h4 {
        font-size: 48px;
        line-height: 52px;
        margin-top: 50px;
        margin-bottom: 10px;
    }

    .modal-custom.edit-info-success .clipart-area {
        display: block;
        width: 200px;
        height: 200px;
        margin: 0px auto 0px auto;
    }

    .modal-custom.edit-info-success .caption p {
        display: block;
        font-size: 14px;
        line-height: 18px;
        text-align: center;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 0px;
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 400px) {
    .modal-custom.edit-info-success .caption h4 {
        font-size: 36px;
        line-height: 42px;
        margin-top: 40px;
        margin-bottom: 10px;
    }

    .modal-custom.edit-info-success .clipart-area {
        display: block;
        width: 200px;
        height: 200px;
        margin: 0px auto 0px auto;
    }

    .modal-custom.edit-info-success .caption p {
        display: block;
        font-size: 14px;
        line-height: 18px;
        text-align: center;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 0px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-height: 540px) {

    .modal-custom.edit-info-success .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.edit-info-success .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.edit-info-success .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.edit-info-success .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.edit-info-success .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}

/* #endregion ------------- /Order Edit Info Success - Custom Modal ------------------------- */
/* #region ------------------------- Sales offer confirmation ------------------------------- */
.modal-custom.delivery-info .modal-window {
    width: 900px;
    left: calc(50% - 450px);
    top: calc(50% - 376px);
}

.modal-custom.delivery-info .modal-body {
    padding: 0px;
}

.modal-custom.delivery-info .modal-container {
    padding: 0px;
}

.modal-custom.delivery-info section.order-details {
    background-color: #F9F9F9;
    padding: 15px;
}

.modal-custom.delivery-info .order-table {
    display: table;
    width: 100%;
    table-layout: fixed;
}

    .modal-custom.delivery-info .order-table > * {
        display: table-row;
    }

        .modal-custom.delivery-info .order-table > * > * {
            display: table-cell;
        }

    .modal-custom.delivery-info .order-table .order-image-cell {
        width: 160px;
        position: relative;
    }

    .modal-custom.delivery-info .order-table .order-info-cell {
        padding-left: 15px;
        padding-right: 15px;
    }

    .modal-custom.delivery-info .order-table .order-price-cell {
        width: 230px;
        border-left: 1px solid #DDDDDD;
        text-align: center;
        padding-left: 15px;
    }
    /* #region Item photo */
    .modal-custom.delivery-info .order-table .order-image-cell .product-img-container {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 100%;
        background-color: #F2F2F2;
        border-radius: var(--radius-4);
        position: absolute;
    }

        .modal-custom.delivery-info .order-table .order-image-cell .product-img-container .ci-pazar {
            position: absolute;
            font-size: 80px;
            top: calc(50% - 40px);
            left: calc(50% - 40px);
            opacity: 0.2;
        }

        .modal-custom.delivery-info .order-table .order-image-cell .product-img-container .img {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            border-radius: var(--radius-4);
            background-color: transparent;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
        }
    /* #endregion Item photo */
    /* #region Order Info Cell */

    .modal-custom.delivery-info .order-table .order-info-cell .order-info-block {
        margin-bottom: 10px;
    }

        .modal-custom.delivery-info .order-table .order-info-cell .order-info-block bdi {
            color: var(--color-text-basic);
        }

    .modal-custom.delivery-info .order-table .order-info-cell .order-number,
    .modal-custom.delivery-info .order-table .order-info-cell .order-date {
        display: inline-block;
        vertical-align: middle;
        line-height: 17px;
        font-size: 14px;
    }

        .modal-custom.delivery-info .order-table .order-info-cell .order-number bdi {
            padding-left: 10px;
        }

*[dir='rtl'] .modal-custom.delivery-info .order-table .order-info-cell .order-number bdi {
    padding-left: 0px;
    padding-right: 10px;
}

.modal-custom.delivery-info .order-table .order-info-cell .order-info-block .divider-vertical {
    display: inline-block;
    width: 1px;
    height: 20px;
    background-color: #DDDDDD;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
}

.modal-custom.delivery-info .order-table .order-info-cell .order-date bdi + bdi {
    margin-left: 10px;
}

*[dir='rtl'] .modal-custom.delivery-info .order-table .order-info-cell .order-date bdi + bdi {
    margin-left: 0px;
    margin-right: 10px;
}

.modal-custom.delivery-info .order-table .order-info-cell h4 {
    color: var(--color-text-basic);
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
}

.modal-custom.delivery-info .order-table .order-info-cell .user-info-block {
    display: block;
    margin-top: 25px;
}

    .modal-custom.delivery-info .order-table .order-info-cell .user-info-block label {
        display: block;
        color: var(--color-text-muted);
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        margin-bottom: 10px;
    }

    .modal-custom.delivery-info .order-table .order-info-cell .user-info-block .user-info {
        position: relative;
        vertical-align: middle;
        height: 32px;
        margin-bottom: 5px;
    }

    .modal-custom.delivery-info .order-table .order-info-cell .user-info-block .user-avatar {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
    }

*[dir='rtl'] .modal-custom.delivery-info .order-table .order-info-cell .user-info-block .user-avatar {
    left: auto;
    right: 0px;
}

.modal-custom.delivery-info .order-table .order-info-cell .user-info-block .user-info span {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    line-height: 32px;
    text-align: left;
    padding-left: 40px;
    font-size: 14px;
}

*[dir='rtl'] .modal-custom.delivery-info .order-table .order-info-cell .user-info-block .user-info span {
    text-align: right;
    padding-left: 0px;
    padding-right: 40px;
}

.modal-custom.delivery-info .order-table .order-info-cell .user-info-block .user-address {
    position: relative;
    vertical-align: middle;
    min-height: 32px;
}

    .modal-custom.delivery-info .order-table .order-info-cell .user-info-block .user-address button {
        position: absolute;
        top: calc(50% - 16px);
        left: 0px;
        z-index: 1;
        font-size: 32px;
        padding: 0px;
        border: 0px none transparent;
        background-color: transparent;
    }

*[dir='rtl'] .modal-custom.delivery-info .order-table .order-info-cell .user-info-block .user-address button {
    right: 0px;
    left: auto;
}

.modal-custom.delivery-info .order-table .order-info-cell .user-info-block .user-address span {
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 17px;
    text-align: left;
    padding-left: 40px;
    font-size: 14px;
    padding-top: 7px;
}

*[dir='rtl'] .modal-custom.delivery-info .order-table .order-info-cell .user-info-block .user-address span {
    text-align: right;
    padding-right: 40px;
    padding-left: 0px;
}

/* #endregion Order Info Cell */
/* #region Price cell */
*[dir='rtl'] .modal-custom.delivery-info .order-table .order-price-cell {
    border-left: 0px none transparent;
    border-right: 1px solid #DDDDDD;
    padding-left: 0px;
    padding-right: 15px;
}

.modal-custom.delivery-info .order-table .order-price-cell .price-block + .price-block {
    margin-top: 15px;
}

.modal-custom.delivery-info .order-table .order-price-cell .price-block label {
    font-size: 14px;
    line-height: 21px;
    color: var(--color-text-muted);
    font-weight: 400;
}

.modal-custom.delivery-info .order-table .order-price-cell .price-block .price {
    font-size: 20px;
    line-height: 23px;
    color: var(--color-text-basic);
    font-weight: 500;
    text-transform: uppercase;
}

.modal-custom.delivery-info .order-table .order-price-cell .price-block.old-price .price {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.modal-custom.delivery-info .order-table .order-price-cell .price-block .price span + span {
    padding-left: 5px;
}

/* #endregion Price cell */

.modal-custom.delivery-info section.user-summary-info {
    background-color: #FFFFFF;
}

    .modal-custom.delivery-info section.user-summary-info .content-container {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .modal-custom.delivery-info section.user-summary-info h4 {
        font-size: 24px;
        font-weight: 400;
        line-height: 28px;
        text-align: center;
        padding-left: 30px;
        padding-right: 30px;
    }

    .modal-custom.delivery-info section.user-summary-info p {
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .modal-custom.delivery-info section.user-summary-info .left-side,
    .modal-custom.delivery-info section.user-summary-info .right-side {
        display: inline-block;
        width: 50%;
        vertical-align: top;
        font-size: 14px;
        margin-top: 20px;
    }

    .modal-custom.delivery-info section.user-summary-info .left-side {
        padding-left: 30px;
        padding-right: 10px;
    }

*[dir='rtl'] .modal-custom.delivery-info section.user-summary-info .left-side {
    padding-left: 10px;
    padding-right: 30px;
}

.modal-custom.delivery-info section.user-summary-info .right-side {
    padding-left: 10px;
    padding-right: 30px;
}

*[dir='rtl'] .modal-custom.delivery-info section.user-summary-info .right-side {
    padding-left: 30px;
    padding-right: 10px;
}

.modal-custom.delivery-info section.user-summary-info .edit-preselected-part {
    margin-top: 0px;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
}

    .modal-custom.delivery-info section.user-summary-info .edit-preselected-part span {
        margin-right: 5px;
        vertical-align: middle;
    }

*[dir='rtl'] .modal-custom.delivery-info section.user-summary-info .edit-preselected-part span {
    margin-right: 0px;
    margin-left: 5px;
}

.modal-custom.delivery-info section.user-summary-info .edit-preselected-part i {
    font-size: 20px;
    vertical-align: middle;
}

.modal-custom.delivery-info section.user-summary-info .information-block {
    margin-top: 10px;
    margin-bottom: 30px;
    text-align: left;
}

*[dir='rtl'] .modal-custom.delivery-info section.user-summary-info .information-block {
    text-align: right;
}

.modal-custom.delivery-info section.user-summary-info .information-block p {
    display: block;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 400;
    padding: 0px;
    text-align: left;
}

*[dir='rtl'] .modal-custom.delivery-info section.user-summary-info .information-block p {
    text-align: right;
}

.modal-custom.delivery-info section.user-summary-info .payment-method {
    margin-bottom: 20px;
}

    .modal-custom.delivery-info section.user-summary-info .payment-method .content {
        margin-top: 10px;
        margin-bottom: 5px;
    }

        .modal-custom.delivery-info section.user-summary-info .payment-method .content i {
            font-size: 40px;
            display: inline-block;
            margin-right: 5px;
            vertical-align: middle;
        }

*[dir='rtl'] .modal-custom.delivery-info section.user-summary-info .payment-method .content i {
    margin-right: 0px;
    margin-left: 5px;
}

.modal-custom.delivery-info section.user-summary-info .payment-method .content span {
    vertical-align: middle;
}

.modal-custom.delivery-info section.user-summary-info .payment-method .fee-block bdi {
    display: inline-block;
    margin-left: 8px;
}

*[dir='rtl'] .modal-custom.delivery-info section.user-summary-info .payment-method .fee-block bdi {
    margin-right: 8px;
    margin-left: 0px;
}

.modal-custom.delivery-info section.user-summary-info .payment-method .fee-block bdi span + span {
    display: inline-block;
    margin-left: 3px;
}

*[dir='rtl'] .modal-custom.delivery-info section.user-summary-info .payment-method .fee-block bdi span + span {
    margin-left: 0px;
    margin-right: 3px;
}

.modal-custom.delivery-info section.user-summary-info .preselected-location {
    min-height: 290px;
    border-radius: var(--radius-4);
}

.modal-custom.delivery-info .collapser {
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}

    .modal-custom.delivery-info .collapser:last-child {
        border-bottom: 0px none transparent;
    }

    .modal-custom.delivery-info .collapser.collapsed:last-child {
        border-top: 1px solid #DDDDDD;
        border-bottom: 1px solid #DDDDDD;
    }

    .modal-custom.delivery-info .collapser + .collapser {
        margin-top: -1px;
    }

    .modal-custom.delivery-info .collapser .collapser-btn {
        display: block;
        width: 100%;
        position: relative;
        text-decoration: none;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 18px;
        padding-bottom: 18px;
        cursor: pointer;
    }

        .modal-custom.delivery-info .collapser .collapser-btn span {
            font-size: 18px;
            font-weight: 400;
            color: var(--color-text-basic);
            text-decoration: none;
            line-height: 26px;
        }

        .modal-custom.delivery-info .collapser .collapser-btn .ci-pazar-small {
            position: absolute;
            top: calc(50% - 7px);
            right: 12px;
        }

    .modal-custom.delivery-info .collapser.collapsed .collapser-btn .ci-pazar-small {
        transform: rotate(180deg);
    }

*[dir='rtl'] .modal-custom.delivery-info .collapser .collapser-btn .ci-pazar-small {
    left: 12px;
    right: auto;
}

.modal-custom.delivery-info .collapser.collapsed .collapser-btn .marker {
    display: inline-block;
    border-radius: 50%;
    background-color: var(--color-bg-warning);
    color: var(--color-text-basic);
    font-weight: 700;
    width: 25px;
    height: 25px;
    padding: 2px;
    text-align: center;
    margin-left: 10px;
    line-height: 21px;
}

*[dir='rtl'] .modal-custom.delivery-info .collapser .collapser-btn .marker {
    margin-left: 0px;
    margin-right: 10px;
}

.modal-custom.delivery-info .collapser .collapser-btn .marker {
    display: none;
}

.modal-custom.delivery-info .collapser.collapsed .collapser-content {
    padding: 0px;
}

.modal-custom.delivery-info .collapser .collapser-content {
    padding: 0px 15px 20px 15px;
}

    .modal-custom.delivery-info .collapser .collapser-content .inner {
        font-size: 0px;
    }

    .modal-custom.delivery-info .collapser .collapser-content .left-side,
    .modal-custom.delivery-info .collapser .collapser-content .right-side {
        font-size: 14px;
        display: inline-block;
        width: 50%;
    }

    .modal-custom.delivery-info .collapser .collapser-content .left-side {
        padding-right: 5px;
        vertical-align: top;
    }

*[dir='rtl'] .modal-custom.delivery-info .collapser .collapser-content .left-side {
    padding-right: 0px;
    padding-left: 5px;
}

.modal-custom.delivery-info .collapser .collapser-content .right-side {
    padding-left: 5px;
    vertical-align: top;
}

*[dir='rtl'] .modal-custom.delivery-info .collapser .collapser-content .right-side {
    padding-left: 0px;
    padding-right: 0px;
}

.modal-custom.delivery-info .collapser .autocomplete-menu,
.modal-custom.delivery-info .collapser .select-autocomplete .options-list {
    top: auto;
    bottom: 71px;
}

.modal-custom.delivery-info .collapser .location-map {
    width: 100%;
    height: 250px;
    border-radius: var(--radius-4);
}

.modal-custom.delivery-info .collapser .btn-select-location {
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    padding-left: 28px;
    padding-right: 0px;
}

*[dir='rtl'] .modal-custom.delivery-info .collapser .btn-select-location {
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    padding-right: 28px;
    padding-left: 0px;
}

.modal-custom.delivery-info .collapser .btn-select-location .ci-pazar,
.modal-custom.delivery-info .collapser .btn-saved-addresses .ci-pazar {
    left: 0px;
}

*[dir='rtl'] .modal-custom.delivery-info .collapser .btn-select-location .ci-pazar,
*[dir='rtl'] .modal-custom.delivery-info .collapser .btn-saved-addresses .ci-pazar {
    left: auto;
    right: 0px;
}

.modal-custom.delivery-info .collapser .btn-saved-addresses {
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    padding-left: 30px;
    padding-right: 0px;
}

*[dir='rtl'] .modal-custom.delivery-info .collapser .btn-saved-addresses {
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    padding-right: 30px;
    padding-left: 0px;
}

.modal-custom.delivery-info .collapser.payment .left-side {
    padding-left: 50px;
    padding-right: 20px;
}

*[dir='rtl'] .modal-custom.delivery-info .collapser.payment .left-side {
    padding-left: 20px;
    padding-right: 50px;
}

.modal-custom.delivery-info .collapser.payment .right-side {
    padding-right: 50px;
    padding-left: 20px;
}

*[dir='rtl'] .modal-custom.delivery-info .collapser.payment .right-side {
    padding-right: 20px;
    padding-left: 50px;
}

.modal-custom.delivery-info .collapser .price-item.total {
    font-size: 18px;
}


.modal-custom.delivery-info .collapser.payment .select .add-new-card {
    padding: 20px 0px 20px 0px;
    text-align: center;
    font-weight: 500 !important;
    text-transform: uppercase;
    color: var(--color-text-primary) !important;
}

.modal-custom.delivery-info .collapser.payment .inner {
    margin-top: 40px;
    margin-bottom: 40px;
}

@media (max-height: 780px) {
    .modal-custom.delivery-info .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.delivery-info .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.delivery-info .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.delivery-info .modal-body {
        padding-top: 52px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.delivery-info .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}


@media (max-width: 991px) {


    .modal-custom.delivery-info .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.delivery-info .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.delivery-info .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.delivery-info .modal-body {
        padding-top: 52px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.delivery-info .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}

@media (max-width: 850px) {
    .modal-custom.delivery-info .order-details .order-image-cell {
        display: none;
    }

    .modal-custom.delivery-info .order-table .order-info-cell {
        padding-left: 0px;
    }

    *[dir='rtl'] .modal-custom.delivery-info .order-table .order-info-cell {
        padding-right: 0px;
    }

    .modal-custom.delivery-info .order-table {
        padding-left: 30px;
        padding-right: 30px;
    }

        .modal-custom.delivery-info .order-table .order-price-cell {
            text-align: right;
            width: 180px;
        }

    *[dir='rtl'] .modal-custom.delivery-info .order-table .order-price-cell {
        text-align: left;
    }

    .modal-custom.delivery-info section.user-summary-info .left-side {
        width: 65%;
    }

    .modal-custom.delivery-info section.user-summary-info .right-side {
        width: 35%;
    }

    .modal-custom.delivery-info section.user-summary-info h4 {
        margin-top: 20px;
        margin-bottom: 5px;
    }

    .modal-custom.delivery-info .collapser.payment .left-side {
        padding-left: 30px;
    }

    *[dir='rtl'] .modal-custom.delivery-info .collapser.payment .left-side {
        padding-right: 30px;
        padding-left: 0px;
    }

    .modal-custom.delivery-info .collapser.payment .right-side {
        padding-right: 30px;
    }

    *[dir='rtl'] .modal-custom.delivery-info .collapser.payment .right-side {
        padding-right: 0px;
        padding-left: 30px;
    }
}

@media (max-width: 650px) {
    .modal-custom.delivery-info .modal-window .order-table,
    .modal-custom.delivery-info .modal-window .order-table > *,
    .modal-custom.delivery-info .modal-window .order-table > * > * {
        display: block;
    }

    .modal-custom.delivery-info .order-details .order-image-cell {
        display: none;
    }

    .modal-custom.delivery-info .order-table .order-price-cell {
        border-top: 1px solid #DDDDDD;
        border-left: 0px none transparent;
        width: 100%;
        text-align: left;
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 20px;
        padding-top: 20px;
        font-size: 0px;
    }

    *[dir='rtl'] .modal-custom.delivery-info .order-table .order-price-cell {
        border-top: 1px solid #DDDDDD;
        border-left: 0px none transparent;
        border-right: 0px none transparent;
        padding-left: 0px;
        padding-right: 0px;
        text-align: right;
    }

    .modal-custom.delivery-info .order-table .order-price-cell .price-block {
        display: inline-block;
        margin-bottom: 20px;
        width: 33%;
    }

        .modal-custom.delivery-info .order-table .order-price-cell .price-block + .price-block {
            margin-top: 0px;
        }

        .modal-custom.delivery-info .order-table .order-price-cell .price-block > * {
            font-size: 14px;
        }

        .modal-custom.delivery-info .order-table .order-price-cell .price-block .price {
            font-size: 18px;
        }

    .modal-custom.delivery-info .modal-window .order-table,
    .modal-custom.delivery-info .modal-window .order-table > *,
    .modal-custom.delivery-info .modal-window .order-table > * > * {
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal-custom.delivery-info section.user-summary-info .left-side {
        padding-left: 0px;
    }

    *[dir='rtl'] .modal-custom.delivery-info section.user-summary-info .left-side {
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal-custom.delivery-info section.user-summary-info .right-side {
        padding-right: 0px;
    }

    *[dir='rtl'] .modal-custom.delivery-info section.user-summary-info .right-side {
        padding-right: 0px;
        padding-left: 0px;
    }

    .modal-custom.delivery-info .collapser .collapser-content .left-side,
    .modal-custom.delivery-info .collapser .collapser-content .right-side {
        display: block;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal-custom.delivery-info .collapser .right-side.ci-text-right {
        text-align: left !important;
    }

    *[dir='rtl'] .modal-custom.delivery-info .collapser .right-side.ci-text-right {
        text-align: right !important;
    }

    .modal-custom.delivery-info .collapser .btn-select-location,
    .modal-custom.delivery-info .collapser .btn-saved-addresses {
        padding-top: 10px;
        padding-bottom: 10px;
    }

        .modal-custom.delivery-info .collapser .btn-saved-addresses .ci-pazar {
            font-size: 22px;
            left: 2px;
        }

    *[dir='rtl'] .modal-custom.delivery-info .collapser .btn-saved-addresses .ci-pazar {
        left: auto;
        right: 2px;
    }

    .modal-custom.delivery-info .collapser .location-map {
        margin-bottom: 10px;
    }

    .modal-custom.delivery-info .collapser.payment .right-side,
    .modal-custom.delivery-info .collapser.payment .left-side {
        padding-left: 0px;
        padding-right: 0px;
    }

    *[dir='rtl'] .modal-custom.delivery-info .collapser.payment .right-side,
    *[dir='rtl'] .modal-custom.delivery-info .collapser.payment .left-side {
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal-custom.delivery-info .collapser.payment .right-side {
        padding-top: 30px;
    }
}

@media (max-width: 500px) {

    .modal-custom.delivery-info .order-table .order-info-cell h4 {
        margin-top: 15px;
    }

    .modal-custom.delivery-info .order-table .order-info-cell .order-info-block {
        display: none;
    }

    .modal-custom.delivery-info .order-table .order-price-cell .price-block {
        display: block;
        margin-bottom: 5px;
        width: 100%;
    }

        .modal-custom.delivery-info .order-table .order-price-cell .price-block label {
            display: inline-block;
            vertical-align: baseline;
            font-size: 14px;
        }

        .modal-custom.delivery-info .order-table .order-price-cell .price-block .price {
            display: inline-block;
            vertical-align: baseline;
            font-size: 14px;
            font-weight: 700;
            margin-left: 5px;
        }

    *[dir='rtl'] .modal-custom.delivery-info .order-table .order-price-cell .price-block .price {
        margin-right: 5px;
        margin-left: 0px;
    }

    .modal-custom.delivery-info .order-table .order-price-cell .price-block:last-child {
        display: block;
        margin-bottom: 10px;
    }

    .modal-custom.delivery-info .modal-window .modal-footer .new-btn {
        min-width: 0px;
    }

    .modal-custom.delivery-info section.user-summary-info .left-side {
        display: block;
        width: 100%;
    }


    .modal-custom.delivery-info section.user-summary-info .right-side {
        display: block;
        width: 100%;
        padding-left: 0px;
        margin-bottom: 30px;
    }

    *[dir='rtl'] .modal-custom.delivery-info section.user-summary-info .right-side {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 400px) {
    .modal-custom.delivery-info .order-table .order-info-cell h4 {
        font-size: 18px;
        font-weight: 700;
        margin-top: 5px;
        line-height: 22px;
    }

    .modal-custom.delivery-info section.user-summary-info h4 {
        font-size: 18px;
        font-weight: 700;
        line-height: 22px;
        margin-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal-custom.delivery-info section.user-summary-info .edit-preselected-part {
        font-size: 14px;
        font-weight: 700;
    }

    .modal-custom.delivery-info section.user-summary-info p {
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
}
/* #endregion ---------------------- Sales offer confirmation ------------------------------- */
/* #region ------------------------- Sales offer confirmation ------------------------------- */
.modal.delivery-info .modal-dialog {
    max-width: 900px;
    top: calc(50% - 405px);
}

.modal.delivery-info .modal-body {
    padding: 0px;
    max-height: 640px;
    height: 640px;
}

.modal.delivery-info section.order-details {
    background-color: #F9F9F9;
    padding: 15px;
}

.modal.delivery-info .order-table {
    display: table;
    width: 100%;
    table-layout: fixed;
}

    .modal.delivery-info .order-table > * {
        display: table-row;
    }

        .modal.delivery-info .order-table > * > * {
            display: table-cell;
        }

    .modal.delivery-info .order-table .order-image-cell {
        width: 160px;
        position: relative;
    }

    .modal.delivery-info .order-table .order-info-cell {
        padding-left: 15px;
        padding-right: 15px;
    }

    .modal.delivery-info .order-table .order-price-cell {
        width: 230px;
        border-left: 1px solid #DDDDDD;
        text-align: center;
        padding-left: 15px;
    }
    /* #region Item photo */
    .modal.delivery-info .order-table .order-image-cell .product-img-container {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 100%;
        background-color: #F2F2F2;
        border-radius: var(--radius-4);
        position: absolute;
    }

        .modal.delivery-info .order-table .order-image-cell .product-img-container .ci-pazar {
            position: absolute;
            font-size: 80px;
            top: calc(50% - 40px);
            left: calc(50% - 40px);
            opacity: 0.2;
        }

        .modal.delivery-info .order-table .order-image-cell .product-img-container .img {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            border-radius: var(--radius-4);
            background-color: transparent;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
        }
    /* #endregion Item photo */
    /* #region Order Info Cell */

    .modal.delivery-info .order-table .order-info-cell .order-info-block {
        margin-bottom: 10px;
    }

        .modal.delivery-info .order-table .order-info-cell .order-info-block bdi {
            color: var(--color-text-basic);
        }

    .modal.delivery-info .order-table .order-info-cell .order-number,
    .modal.delivery-info .order-table .order-info-cell .order-date {
        display: inline-block;
        vertical-align: middle;
        line-height: 17px;
        font-size: 14px;
    }

        .modal.delivery-info .order-table .order-info-cell .order-number bdi {
            padding-left: 10px;
        }

*[dir='rtl'] .modal.delivery-info .order-table .order-info-cell .order-number bdi {
    padding-left: 0px;
    padding-right: 10px;
}

.modal.delivery-info .order-table .order-info-cell .order-info-block .divider-vertical {
    display: inline-block;
    width: 1px;
    height: 20px;
    background-color: #DDDDDD;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
}

.modal.delivery-info .order-table .order-info-cell .order-date bdi + bdi {
    margin-left: 10px;
}

*[dir='rtl'] .modal.delivery-info .order-table .order-info-cell .order-date bdi + bdi {
    margin-left: 0px;
    margin-right: 10px;
}

.modal.delivery-info .order-table .order-info-cell h4 {
    color: var(--color-text-basic);
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
}

.modal.delivery-info .order-table .order-info-cell .user-info-block {
    display: block;
    margin-top: 25px;
}

    .modal.delivery-info .order-table .order-info-cell .user-info-block label {
        display: block;
        color: var(--color-text-muted);
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        margin-bottom: 10px;
    }

    .modal.delivery-info .order-table .order-info-cell .user-info-block .user-info {
        position: relative;
        vertical-align: middle;
        height: 32px;
        margin-bottom: 5px;
    }

    .modal.delivery-info .order-table .order-info-cell .user-info-block .user-avatar {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
    }

*[dir='rtl'] .modal.delivery-info .order-table .order-info-cell .user-info-block .user-avatar {
    left: auto;
    right: 0px;
}

.modal.delivery-info .order-table .order-info-cell .user-info-block .user-info span {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    line-height: 32px;
    text-align: left;
    padding-left: 40px;
    font-size: 14px;
}

*[dir='rtl'] .modal.delivery-info .order-table .order-info-cell .user-info-block .user-info span {
    text-align: right;
    padding-left: 0px;
    padding-right: 40px;
}

.modal.delivery-info .order-table .order-info-cell .user-info-block .user-address {
    position: relative;
    vertical-align: middle;
    min-height: 32px;
}

    .modal.delivery-info .order-table .order-info-cell .user-info-block .user-address button {
        position: absolute;
        top: calc(50% - 16px);
        left: 0px;
        z-index: 1;
        font-size: 32px;
        padding: 0px;
        border: 0px none transparent;
        background-color: transparent;
    }

*[dir='rtl'] .modal.delivery-info .order-table .order-info-cell .user-info-block .user-address button {
    right: 0px;
    left: auto;
}

.modal.delivery-info .order-table .order-info-cell .user-info-block .user-address span {
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 17px;
    text-align: left;
    padding-left: 40px;
    font-size: 14px;
    padding-top: 7px;
}

*[dir='rtl'] .modal.delivery-info .order-table .order-info-cell .user-info-block .user-address span {
    text-align: right;
    padding-right: 40px;
    padding-left: 0px;
}

/* #endregion Order Info Cell */
/* #region Price cell */
*[dir='rtl'] .modal.delivery-info .order-table .order-price-cell {
    border-left: 0px none transparent;
    border-right: 1px solid #DDDDDD;
    padding-left: 0px;
    padding-right: 15px;
}

.modal.delivery-info .order-table .order-price-cell .price-block + .price-block {
    margin-top: 15px;
}

.modal.delivery-info .order-table .order-price-cell .price-block label {
    font-size: 14px;
    line-height: 21px;
    color: var(--color-text-muted);
    font-weight: 400;
}

.modal.delivery-info .order-table .order-price-cell .price-block .price {
    font-size: 20px;
    line-height: 23px;
    color: var(--color-text-basic);
    font-weight: 500;
    text-transform: uppercase;
}

.modal.delivery-info .order-table .order-price-cell .price-block.old-price .price {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.modal.delivery-info .order-table .order-price-cell .price-block .price span + span {
    padding-left: 5px;
}

/* #endregion Price cell */

.modal.delivery-info section.user-summary-info {
    background-color: #FFFFFF;
}

    .modal.delivery-info section.user-summary-info .content-container {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .modal.delivery-info section.user-summary-info h4 {
        font-size: 24px;
        font-weight: 400;
        line-height: 28px;
        text-align: center;
        padding-left: 30px;
        padding-right: 30px;
    }

    .modal.delivery-info section.user-summary-info p {
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .modal.delivery-info section.user-summary-info .left-side,
    .modal.delivery-info section.user-summary-info .right-side {
        display: inline-block;
        width: 50%;
        vertical-align: top;
        font-size: 14px;
        margin-top: 20px;
    }

    .modal.delivery-info section.user-summary-info .left-side {
        padding-left: 30px;
        padding-right: 10px;
    }

*[dir='rtl'] .modal.delivery-info section.user-summary-info .left-side {
    padding-left: 10px;
    padding-right: 30px;
}

.modal.delivery-info section.user-summary-info .right-side {
    padding-left: 10px;
    padding-right: 30px;
}

*[dir='rtl'] .modal.delivery-info section.user-summary-info .right-side {
    padding-left: 30px;
    padding-right: 10px;
}

.modal.delivery-info section.user-summary-info .edit-preselected-part {
    margin-top: 0px;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
}

    .modal.delivery-info section.user-summary-info .edit-preselected-part span {
        margin-right: 5px;
        vertical-align: middle;
    }

*[dir='rtl'] .modal.delivery-info section.user-summary-info .edit-preselected-part span {
    margin-right: 0px;
    margin-left: 5px;
}

.modal.delivery-info section.user-summary-info .edit-preselected-part i {
    font-size: 20px;
    vertical-align: middle;
}

.modal.delivery-info section.user-summary-info .information-block {
    margin-top: 10px;
    margin-bottom: 30px;
    text-align: left;
}

*[dir='rtl'] .modal.delivery-info section.user-summary-info .information-block {
    text-align: right;
}

.modal.delivery-info section.user-summary-info .information-block p {
    display: block;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 400;
    padding: 0px;
    text-align: left;
}

*[dir='rtl'] .modal.delivery-info section.user-summary-info .information-block p {
    text-align: right;
}

.modal.delivery-info section.user-summary-info .payment-method {
    margin-bottom: 20px;
}

    .modal.delivery-info section.user-summary-info .payment-method .content {
        margin-top: 10px;
        margin-bottom: 5px;
    }

        .modal.delivery-info section.user-summary-info .payment-method .content i {
            font-size: 40px;
            display: inline-block;
            margin-right: 5px;
            vertical-align: middle;
        }

*[dir='rtl'] .modal.delivery-info section.user-summary-info .payment-method .content i {
    margin-right: 0px;
    margin-left: 5px;
}

.modal.delivery-info section.user-summary-info .payment-method .content span {
    vertical-align: middle;
}

.modal.delivery-info section.user-summary-info .payment-method .fee-block bdi {
    display: inline-block;
    margin-left: 8px;
}

*[dir='rtl'] .modal.delivery-info section.user-summary-info .payment-method .fee-block bdi {
    margin-right: 8px;
    margin-left: 0px;
}

.modal.delivery-info section.user-summary-info .payment-method .fee-block bdi span + span {
    display: inline-block;
    margin-left: 3px;
}

*[dir='rtl'] .modal.delivery-info section.user-summary-info .payment-method .fee-block bdi span + span {
    margin-left: 0px;
    margin-right: 3px;
}

.modal.delivery-info section.user-summary-info .preselected-location {
    min-height: 290px;
    border-radius: var(--radius-4);
}

.modal.delivery-info .collapser {
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}

    .modal.delivery-info .collapser:last-child {
        border-bottom: 0px none transparent;
    }

    .modal.delivery-info .collapser.collapsed:last-child {
        border-top: 1px solid #DDDDDD;
        border-bottom: 1px solid #DDDDDD;
    }

    .modal.delivery-info .collapser + .collapser {
        margin-top: -1px;
    }

    .modal.delivery-info .collapser .collapser-btn {
        display: block;
        width: 100%;
        position: relative;
        text-decoration: none;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 18px;
        padding-bottom: 18px;
        cursor: pointer;
    }

        .modal.delivery-info .collapser .collapser-btn span {
            font-size: 18px;
            font-weight: 400;
            color: var(--color-text-basic);
            text-decoration: none;
            line-height: 26px;
        }

        .modal.delivery-info .collapser .collapser-btn .ci-pazar-small {
            position: absolute;
            top: calc(50% - 7px);
            right: 12px;
        }

    .modal.delivery-info .collapser.collapsed .collapser-btn .ci-pazar-small {
        transform: rotate(180deg);
    }

*[dir='rtl'] .modal.delivery-info .collapser .collapser-btn .ci-pazar-small {
    left: 12px;
    right: auto;
}

.modal.delivery-info .collapser.collapsed .collapser-btn .marker {
    display: inline-block;
    border-radius: 50%;
    background-color: var(--color-bg-warning);
    color: var(--color-text-basic);
    font-weight: 700;
    width: 25px;
    height: 25px;
    padding: 2px;
    text-align: center;
    margin-left: 10px;
    line-height: 21px;
}

*[dir='rtl'] .modal.delivery-info .collapser .collapser-btn .marker {
    margin-left: 0px;
    margin-right: 10px;
}

.modal.delivery-info .collapser .collapser-btn .marker {
    display: none;
}

.modal.delivery-info .collapser.collapsed .collapser-content {
    padding: 0px;
}

.modal.delivery-info .collapser .collapser-content {
    padding: 0px 15px 20px 15px;
}

    .modal.delivery-info .collapser .collapser-content .inner {
        font-size: 0px;
    }

    .modal.delivery-info .collapser .collapser-content .left-side,
    .modal.delivery-info .collapser .collapser-content .right-side {
        font-size: 14px;
        display: inline-block;
        width: 50%;
    }

    .modal.delivery-info .collapser .collapser-content .left-side {
        padding-right: 5px;
        vertical-align: top;
    }

*[dir='rtl'] .modal.delivery-info .collapser .collapser-content .left-side {
    padding-right: 0px;
    padding-left: 5px;
}

.modal.delivery-info .collapser .collapser-content .right-side {
    padding-left: 5px;
    vertical-align: top;
}

*[dir='rtl'] .modal.delivery-info .collapser .collapser-content .right-side {
    padding-left: 0px;
    padding-right: 0px;
}

.modal.delivery-info .collapser .autocomplete-menu,
.modal.delivery-info .collapser .select-autocomplete .options-list {
    top: auto;
    bottom: 71px;
}

.modal.delivery-info .collapser .location-map {
    width: 100%;
    height: 250px;
    border-radius: var(--radius-4);
}

.modal.delivery-info .collapser .btn-select-location {
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    padding-left: 28px;
    padding-right: 0px;
}

*[dir='rtl'] .modal.delivery-info .collapser .btn-select-location {
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    padding-right: 28px;
    padding-left: 0px;
}

.modal.delivery-info .collapser .btn-select-location .ci-pazar,
.modal.delivery-info .collapser .btn-saved-addresses .ci-pazar {
    left: 0px;
}

*[dir='rtl'] .modal.delivery-info .collapser .btn-select-location .ci-pazar,
*[dir='rtl'] .modal.delivery-info .collapser .btn-saved-addresses .ci-pazar {
    left: auto;
    right: 0px;
}

.modal.delivery-info .collapser .btn-saved-addresses {
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    padding-left: 30px;
    padding-right: 0px;
}

*[dir='rtl'] .modal.delivery-info .collapser .btn-saved-addresses {
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    padding-right: 30px;
    padding-left: 0px;
}

.modal.delivery-info .collapser.payment .left-side {
    padding-left: 50px;
    padding-right: 20px;
}

*[dir='rtl'] .modal.delivery-info .collapser.payment .left-side {
    padding-left: 20px;
    padding-right: 50px;
}

.modal.delivery-info .collapser.payment .right-side {
    padding-right: 50px;
    padding-left: 20px;
}

*[dir='rtl'] .modal.delivery-info .collapser.payment .right-side {
    padding-right: 20px;
    padding-left: 50px;
}

.modal.delivery-info .collapser .price-item.total {
    font-size: 18px;
}

.modal.delivery-info .collapser.payment .select .options-list {
    top: auto;
    bottom: 71px;
}

.modal.delivery-info .collapser.payment .select .add-new-card {
    padding: 20px 0px 20px 0px;
    text-align: center;
    font-weight: 500 !important;
    text-transform: uppercase;
    color: var(--color-text-primary) !important;
}

.modal.delivery-info .collapser.payment .inner {
    margin-top: 40px;
    margin-bottom: 40px;
}

@media (max-height: 780px) {
    .modal.delivery-info.show {
        padding: 0px !important;
        margin: 0px !important;
    }

    .modal.delivery-info .modal-dialog {
        top: 0px;
        left: 0px;
        max-width: 100%;
        margin: 0px;
        height: 100%;
    }

    .modal.delivery-info.show .modal-dialog .modal-content {
        border-radius: var(--radius-0);
        border: 0px;
        height: 100%;
        box-shadow: none;
    }


    .modal.delivery-info.show .modal-dialog .modal-body {
        max-height: calc(100% - 121px) !important;
    }

    .modal.delivery-info.show .modal-dialog .modal-footer {
        height: 69px;
    }
}


@media (max-width: 991px) {
    .modal.delivery-info.show {
        padding: 0px !important;
        margin: 0px !important;
    }

    .modal.delivery-info .modal-dialog {
        top: 0px;
        left: 0px;
        max-width: 100%;
        margin: 0px;
        height: 100%;
    }

    .modal.delivery-info.show .modal-dialog .modal-content {
        border-radius: var(--radius-0);
        border: 0px;
        height: 100%;
        box-shadow: none;
    }

    .modal.delivery-info.show .modal-dialog .modal-body {
        max-height: calc(100% - 121px) !important;
    }

    .modal.delivery-info.show .modal-dialog .modal-footer {
        height: 69px;
    }
}

@media (max-width: 850px) {
    .modal.delivery-info .order-details .order-image-cell {
        display: none;
    }

    .modal.delivery-info .order-table .order-info-cell {
        padding-left: 0px;
    }

    *[dir='rtl'] .modal.delivery-info .order-table .order-info-cell {
        padding-right: 0px;
    }

    .modal.delivery-info .order-table {
        padding-left: 30px;
        padding-right: 30px;
    }

        .modal.delivery-info .order-table .order-price-cell {
            text-align: right;
            width: 180px;
        }

    *[dir='rtl'] .modal.delivery-info .order-table .order-price-cell {
        text-align: left;
    }

    .modal.delivery-info section.user-summary-info .left-side {
        width: 65%;
    }

    .modal.delivery-info section.user-summary-info .right-side {
        width: 35%;
    }

    .modal.delivery-info section.user-summary-info h4 {
        margin-top: 20px;
        margin-bottom: 5px;
    }

    .modal.delivery-info .collapser.payment .left-side {
        padding-left: 30px;
    }

    *[dir='rtl'] .modal.delivery-info .collapser.payment .left-side {
        padding-right: 30px;
        padding-left: 0px;
    }

    .modal.delivery-info .collapser.payment .right-side {
        padding-right: 30px;
    }

    *[dir='rtl'] .modal.delivery-info .collapser.payment .right-side {
        padding-right: 0px;
        padding-left: 30px;
    }
}

@media (max-width: 650px) {
    .modal.delivery-info .modal-dialog .order-table,
    .modal.delivery-info .modal-dialog .order-table > *,
    .modal.delivery-info .modal-dialog .order-table > * > * {
        display: block;
    }

    .modal.delivery-info .order-details .order-image-cell {
        display: none;
    }

    .modal.delivery-info .order-table .order-price-cell {
        border-top: 1px solid #DDDDDD;
        border-left: 0px none transparent;
        width: 100%;
        text-align: left;
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 20px;
        padding-top: 20px;
        font-size: 0px;
    }

    *[dir='rtl'] .modal.delivery-info .order-table .order-price-cell {
        border-top: 1px solid #DDDDDD;
        border-left: 0px none transparent;
        border-right: 0px none transparent;
        padding-left: 0px;
        padding-right: 0px;
        text-align: right;
    }

    .modal.delivery-info .order-table .order-price-cell .price-block {
        display: inline-block;
        margin-bottom: 20px;
        width: 33%;
    }

        .modal.delivery-info .order-table .order-price-cell .price-block + .price-block {
            margin-top: 0px;
        }

        .modal.delivery-info .order-table .order-price-cell .price-block > * {
            font-size: 14px;
        }

        .modal.delivery-info .order-table .order-price-cell .price-block .price {
            font-size: 18px;
        }

    .modal.delivery-info .modal-dialog .order-table,
    .modal.delivery-info .modal-dialog .order-table > *,
    .modal.delivery-info .modal-dialog .order-table > * > * {
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal.delivery-info section.user-summary-info .left-side {
        padding-left: 0px;
    }

    *[dir='rtl'] .modal.delivery-info section.user-summary-info .left-side {
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal.delivery-info section.user-summary-info .right-side {
        padding-right: 0px;
    }

    *[dir='rtl'] .modal.delivery-info section.user-summary-info .right-side {
        padding-right: 0px;
        padding-left: 0px;
    }

    .modal.delivery-info .collapser .collapser-content .left-side,
    .modal.delivery-info .collapser .collapser-content .right-side {
        display: block;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal.delivery-info .collapser .right-side.ci-text-right {
        text-align: left !important;
    }

    *[dir='rtl'] .modal.delivery-info .collapser .right-side.ci-text-right {
        text-align: right !important;
    }

    .modal.delivery-info .collapser .btn-select-location,
    .modal.delivery-info .collapser .btn-saved-addresses {
        padding-top: 10px;
        padding-bottom: 10px;
    }

        .modal.delivery-info .collapser .btn-saved-addresses .ci-pazar {
            font-size: 22px;
            left: 2px;
        }

    *[dir='rtl'] .modal.delivery-info .collapser .btn-saved-addresses .ci-pazar {
        left: auto;
        right: 2px;
    }

    .modal.delivery-info .collapser .location-map {
        margin-bottom: 10px;
    }

    .modal.delivery-info .collapser.payment .right-side,
    .modal.delivery-info .collapser.payment .left-side {
        padding-left: 0px;
        padding-right: 0px;
    }

    *[dir='rtl'] .modal.delivery-info .collapser.payment .right-side,
    *[dir='rtl'] .modal.delivery-info .collapser.payment .left-side {
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal.delivery-info .collapser.payment .right-side {
        padding-top: 30px;
    }
}

@media (max-width: 500px) {

    .modal.delivery-info .order-table .order-info-cell h4 {
        margin-top: 15px;
    }

    .modal.delivery-info .order-table .order-info-cell .order-info-block {
        display: none;
    }

    .modal.delivery-info .order-table .order-price-cell .price-block {
        display: block;
        margin-bottom: 5px;
        width: 100%;
    }

        .modal.delivery-info .order-table .order-price-cell .price-block label {
            display: inline-block;
            vertical-align: baseline;
            font-size: 14px;
        }

        .modal.delivery-info .order-table .order-price-cell .price-block .price {
            display: inline-block;
            vertical-align: baseline;
            font-size: 14px;
            font-weight: 700;
            margin-left: 5px;
        }

    *[dir='rtl'] .modal.delivery-info .order-table .order-price-cell .price-block .price {
        margin-right: 5px;
        margin-left: 0px;
    }

    .modal.delivery-info .order-table .order-price-cell .price-block:last-child {
        display: block;
        margin-bottom: 10px;
    }

    .modal-dialog .modal-footer .new-btn {
        min-width: 0px;
    }

    .modal.delivery-info section.user-summary-info .left-side {
        display: block;
        width: 100%;
    }


    .modal.delivery-info section.user-summary-info .right-side {
        display: block;
        width: 100%;
        padding-left: 0px;
        margin-bottom: 30px;
    }

    *[dir='rtl'] .modal.delivery-info section.user-summary-info .right-side {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 400px) {
    .modal.delivery-info .order-table .order-info-cell h4 {
        font-size: 18px;
        font-weight: 700;
        margin-top: 5px;
        line-height: 22px;
    }

    .modal.delivery-info section.user-summary-info h4 {
        font-size: 18px;
        font-weight: 700;
        line-height: 22px;
        margin-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal.delivery-info section.user-summary-info .edit-preselected-part {
        font-size: 14px;
        font-weight: 700;
    }

    .modal.delivery-info section.user-summary-info p {
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
}
/* #endregion ---------------------- Sales offer confirmation ------------------------------- */

/* #endregion ============================= /Sales-Purchases Page ==================================== */
/* #region ==================================== Terms Modals ========================================= */
.modal.terms .modal-dialog {
    max-width: 728px;
}

.modal.show.terms .modal-body {
    max-height: 85vh;
}


.modal.terms .terms-content {
    margin: 0px auto;
    width: 700px;
}




    .modal.terms .terms-content h4 {
        font-size: 42px;
        text-align: center;
        font-weight: 700;
        text-transform: uppercase;
        padding-top: 40px;
        padding-bottom: 30px;
    }

    .modal.terms .terms-content h5 {
        font-size: 32px;
        text-align: left;
        font-weight: 700;
        text-transform: none;
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .modal.terms .terms-content h6 {
        font-size: 22px;
        font-weight: 700;
        text-transform: none;
        text-align: left;
        padding-top: 20px;
        padding-bottom: 10px;
    }

    .modal.terms .terms-content p {
        font-size: 14px;
        text-align: left;
        font-weight: 400;
        padding-top: 8px;
        padding-bottom: 8px;
        line-height: 1.3em;
    }

*[dir='rtl'] .modal.terms .terms-content h5,
*[dir='rtl'] .modal.terms .terms-content h6,
*[dir='rtl'] .modal.terms .terms-content p {
    text-align: right;
}


@media (max-width: 767px) {


    .modal.terms.show .terms-content {
        width: 100%;
    }

    .modal.terms .scrollbar-vertical {
        max-height: 90vh;
    }

    .modal.show.terms {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.terms .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.terms .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.terms .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.terms .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.terms .modal-dialog .modal-footer {
        height: 69px;
    }
}

@media (max-width: 500px) {
    .modal.terms .terms-content h4 {
        font-size: 30px;
    }

    .modal.terms .terms-content h5 {
        font-size: 24px;
    }

    .modal.terms .terms-content h6 {
        font-size: 18px;
    }
}

@media (max-height: 870px) {
    .modal.show.terms {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.terms .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.terms .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.terms .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.terms .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.terms .modal-dialog .modal-footer {
        height: 69px;
    }
}

/* #endregion ================================ /Terms Modals ========================================= */
/* #region ================================= Remove Card Modal ======================================= */
.modal.modal-remove-card .modal-dialog {
    top: calc(50% - 220px);
    max-width: 525px;
}

    .modal.modal-remove-card .modal-dialog .modal-body {
        text-align: center;
    }

    .modal.modal-remove-card .modal-dialog .card {
        display: block;
        width: 230px;
        height: 140px;
        margin: 10px auto 0px auto;
        background-color: #F2F2F2;
        border-radius: var(--radius-4);
        position: relative;
    }

        .modal.modal-remove-card .modal-dialog .card .logo {
            display: block;
            width: 60px;
            height: 40px;
            position: absolute;
            background-color: #FFFFFF;
            border-radius: var(--radius-4);
            top: 15px;
            left: 18px;
        }

*[dir='rtl'] .modal.modal-remove-card .modal-dialog .card .logo {
    right: 18px;
    left: auto;
}

.modal.modal-remove-card .modal-dialog .card .logo .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

    .modal.modal-remove-card .modal-dialog .card .logo .inner .ci-pazar-social {
        display: block;
        font-size: 42px;
        position: absolute;
        top: calc(50% - 21px);
        left: calc(50% - 21px);
    }

.modal.modal-remove-card .modal-dialog .card .card-number {
    display: block;
    position: absolute;
    top: 71px;
    left: 0px;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
}

*[dir='rtl'] .modal.modal-remove-card .modal-dialog .card .card-number {
    left: auto;
    right: 0px;
}

.modal.modal-remove-card .modal-dialog .card .card-date {
    display: block;
    position: absolute;
    bottom: 15px;
    left: 18px;
    z-index: 1;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
}

*[dir='rtl'] .modal.modal-remove-card .modal-dialog .card .card-date {
    right: 18px;
    left: auto;
}

.modal.modal-remove-card .modal-dialog .modal-body p {
    font-size: 18px;
    padding-top: 30px;
    padding-bottom: 40px;
    padding-right: 20px;
    padding-left: 20px;
}

@media (max-width: 727px) {
    .modal.modal-remove-card .modal-dialog {
        top: 0px;
        left: 0px;
        max-width: 100%;
    }
}

@media (max-width: 419px) {
    .modal.modal-remove-card .modal-dialog .modal-footer .new-btn {
        min-width: 100px;
    }
}

@media (max-height: 450px) {

    .modal.show.modal-remove-card {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.modal-remove-card .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.modal-remove-card .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.modal-remove-card .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.modal-remove-card .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.modal-remove-card .modal-dialog .modal-footer {
        height: 69px;
    }
}
/* #endregion ============================== Remove Card Modal ======================================= */
/* #region ================================= Modal: PayPal Error ===================================== */
.modal-custom.paypal-error .modal-window {
    top: calc(50% - 260px);
    max-width: 635px;
}

.modal-custom.paypal-error .modal-container {
    margin: 0px auto;
    width: 600px;
}

.modal-custom.paypal-error .clipart-block {
    display: block;
    width: 210px;
    height: 210px;
    margin: 0px auto;
}

    .modal-custom.paypal-error .clipart-block .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .modal-custom.paypal-error .clipart-block .clipart-cloud-1,
    .modal-custom.paypal-error .clipart-block .clipart-cloud-2,
    .modal-custom.paypal-error .clipart-block .clipart-cloud-3,
    .modal-custom.paypal-error .clipart-block .clipart-cloud-4,
    .modal-custom.paypal-error .clipart-block .clipart-cloud-5,
    .modal-custom.paypal-error .clipart-block .clipart-cloud-6,
    .modal-custom.paypal-error .clipart-block .clipart-cloud-7,
    .modal-custom.paypal-error .clipart-block .clipart-cloud-8 {
        display: block;
        position: absolute;
        z-index: 1;
        background-color: #F1F1F1;
        border-radius: 50%;
    }

    .modal-custom.paypal-error .clipart-block .clipart-cloud-1 {
        top: 8%;
        left: 17%;
        width: 34%;
        height: 34%;
        -webkit-animation: modal-card-error-cloud-1 1.2s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-1 1.2s ease-in-out infinite alternate;
    }

    .modal-custom.paypal-error .clipart-block .clipart-cloud-2 {
        top: 8%;
        left: 39%;
        width: 44%;
        height: 44%;
        -webkit-animation: modal-card-error-cloud-2 1.5s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-2 1.5s ease-in-out infinite alternate;
    }

    .modal-custom.paypal-error .clipart-block .clipart-cloud-3 {
        top: 19%;
        left: 73%;
        width: 24%;
        height: 24%;
        -webkit-animation: modal-card-error-cloud-3 2s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-3 2s ease-in-out infinite alternate;
    }

    .modal-custom.paypal-error .clipart-block .clipart-cloud-4 {
        top: 30%;
        left: 50%;
        width: 50%;
        height: 50%;
        -webkit-animation: modal-card-error-cloud-4 1.4s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-4 1.4s ease-in-out infinite alternate;
    }

    .modal-custom.paypal-error .clipart-block .clipart-cloud-5 {
        top: 59%;
        left: 44%;
        width: 27%;
        height: 27%;
        -webkit-animation: modal-card-error-cloud-5 1.1s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-5 1.1s ease-in-out infinite alternate;
    }

    .modal-custom.paypal-error .clipart-block .clipart-cloud-6 {
        top: 26%;
        left: 17%;
        width: 52%;
        height: 52%;
        -webkit-animation: modal-card-error-cloud-6 1.7s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-6 1.7s ease-in-out infinite alternate;
    }

    .modal-custom.paypal-error .clipart-block .clipart-cloud-7 {
        top: 53%;
        left: 11%;
        width: 25%;
        height: 25%;
        -webkit-animation: modal-card-error-cloud-7 1.3s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-7 1.3s ease-in-out infinite alternate;
    }

    .modal-custom.paypal-error .clipart-block .clipart-cloud-8 {
        top: 27%;
        left: -1%;
        width: 31%;
        height: 30%;
        -webkit-animation: modal-card-error-cloud-8 1.2s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-8 1.2s ease-in-out infinite alternate;
    }

    .modal-custom.paypal-error .clipart-block .clipart-card {
        display: block;
        position: absolute;
        z-index: 2;
        width: 50%;
        height: 50%;
        background: url("../../Content/Images/PaymentMethods/clipart-invoice-error.svg") no-repeat center center transparent;
        background-size: contain;
        left: 31%;
        top: 12%;
        -webkit-animation: modal-card-error 1.2s ease-in-out infinite alternate;
        animation: modal-card-error 1.2s ease-in-out infinite alternate;
    }

    .modal-custom.paypal-error .clipart-block .clipart-shadow {
        display: block;
        position: absolute;
        z-index: 2;
        border-radius: 50%;
        width: 50%;
        height: 5%;
        top: 66%;
        left: 27%;
        background-color: rgba(0, 0, 0, 0.15);
        -webkit-animation: modal-card-error-shadow 1.2s ease-in-out infinite alternate;
        animation: modal-card-error-shadow 1.2s ease-in-out infinite alternate;
    }

.modal-custom.paypal-error .modal-body {
    text-align: center;
}

    .modal-custom.paypal-error .modal-body p {
        font-size: 18px;
        padding-left: 30px;
        padding-right: 30px;
    }

@media (max-width: 727px) {
    .modal-custom.paypal-error .modal-window {
        top: 0px;
        left: 0px;
        max-width: 100%;
    }

    .modal-custom.paypal-error .modal-container {
        width: 100%;
    }
}

@media (max-width: 449px) {
    .modal-custom.paypal-error .modal-body p {
        font-size: 16px;
    }

    .modal-custom.paypal-error .clipart-block {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 400px) {
    .modal-custom.paypal-error .clipart-block {
        width: 150px;
        height: 150px;
    }

    .modal-custom.paypal-error .modal-body p {
        font-size: 14px;
        padding-right: 0px;
        padding-left: 0px;
    }
}

@media (max-width: 400px) {
    .modal-custom.paypal-error .clipart-block {
        width: 150px;
        height: 150px;
    }

    .modal-custom.paypal-error .modal-body p {
        font-size: 14px;
        padding-right: 0px;
        padding-left: 0px;
    }
}

@media (max-height: 550px) {

    .modal-custom.paypal-error .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.paypal-error .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.paypal-error .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.paypal-error .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.paypal-error .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}

/* #endregion ============================= /Modal: PayPal Error ===================================== */
/* #region ============================= Modal: PayPal Account Error ================================= */
.modal-custom.paypal-account-error .modal-window {
    top: calc(50% - 260px);
    inset-inline-start: calc(50% - 300px);
    width: 600px;
}

.modal-custom.paypal-account-error .modal-container {
    margin: 0px auto;
    width: 600px;
    padding-inline: var(--gap-32);
}

.modal-custom.paypal-account-error .modal-body {
    text-align: center;
}

    .modal-custom.paypal-account-error .modal-body p {
        font-size: 16px;
        line-height: 130%;
        color: var(--color-text-muted);
    }

    .modal-custom.paypal-account-error .modal-body .row-clipart {
        width: 100%;
        padding-block-start: var(--gap-8);
        position: relative;
    }

    .modal-custom.paypal-account-error .modal-body .clipart-remove-paypal {
        width: 200px;
        height: 200px;
        margin-inline: auto;
    }

    .modal-custom.paypal-account-error .modal-body .clipart-block {
        width: 250px;
        height: 250px;
        margin-inline: auto;
    }


.modal-custom.paypal-account-error .clipart-block .clipart-cloud-1,
.modal-custom.paypal-account-error .clipart-block .clipart-cloud-2,
.modal-custom.paypal-account-error .clipart-block .clipart-cloud-3,
.modal-custom.paypal-account-error .clipart-block .clipart-cloud-4,
.modal-custom.paypal-account-error .clipart-block .clipart-cloud-5,
.modal-custom.paypal-account-error .clipart-block .clipart-cloud-6,
.modal-custom.paypal-account-error .clipart-block .clipart-cloud-7,
.modal-custom.paypal-account-error .clipart-block .clipart-cloud-8 {
    display: block;
    position: absolute;
    z-index: 1;
    background-color: #F1F1F1;
    border-radius: 50%;
}

.modal-custom.paypal-account-error .clipart-block .clipart-cloud-1 {
    top: 8%;
    left: 17%;
    width: 34%;
    height: 34%;
    -webkit-animation: modal-card-error-cloud-1 1.2s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-1 1.2s ease-in-out infinite alternate;
}

.modal-custom.paypal-account-error .clipart-block .clipart-cloud-2 {
    top: 8%;
    left: 39%;
    width: 44%;
    height: 44%;
    -webkit-animation: modal-card-error-cloud-2 1.5s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-2 1.5s ease-in-out infinite alternate;
}

.modal-custom.paypal-account-error .clipart-block .clipart-cloud-3 {
    top: 19%;
    left: 73%;
    width: 24%;
    height: 24%;
    -webkit-animation: modal-card-error-cloud-3 2s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-3 2s ease-in-out infinite alternate;
}

.modal-custom.paypal-account-error .clipart-block .clipart-cloud-4 {
    top: 30%;
    left: 50%;
    width: 50%;
    height: 50%;
    -webkit-animation: modal-card-error-cloud-4 1.4s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-4 1.4s ease-in-out infinite alternate;
}

.modal-custom.paypal-account-error .clipart-block .clipart-cloud-5 {
    top: 59%;
    left: 44%;
    width: 27%;
    height: 27%;
    -webkit-animation: modal-card-error-cloud-5 1.1s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-5 1.1s ease-in-out infinite alternate;
}

.modal-custom.paypal-account-error .clipart-block .clipart-cloud-6 {
    top: 26%;
    left: 17%;
    width: 52%;
    height: 52%;
    -webkit-animation: modal-card-error-cloud-6 1.7s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-6 1.7s ease-in-out infinite alternate;
}

.modal-custom.paypal-account-error .clipart-block .clipart-cloud-7 {
    top: 53%;
    left: 11%;
    width: 25%;
    height: 25%;
    -webkit-animation: modal-card-error-cloud-7 1.3s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-7 1.3s ease-in-out infinite alternate;
}

.modal-custom.paypal-account-error .clipart-block .clipart-cloud-8 {
    top: 27%;
    left: -1%;
    width: 31%;
    height: 30%;
    -webkit-animation: modal-card-error-cloud-8 1.2s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-8 1.2s ease-in-out infinite alternate;
}

.modal-custom.paypal-account-error .clipart-block .clipart-paypal {
    display: block;
    position: absolute;
    z-index: 2;
    font-size: 100px;
    left: 30%;
    top: 22%;
    -webkit-animation: modal-card-error 1.2s ease-in-out infinite alternate;
    animation: modal-card-error 1.2s ease-in-out infinite alternate;
}

.modal-custom.paypal-account-error .clipart-block .clipart-cross {
    display: block;
    position: absolute;
    z-index: 2;
    width: 20%;
    height: 20%;
    background: url('../../Content/Images/clipart-cancel.svg') no-repeat center center transparent;
    background-size: contain;
    left: 55%;
    top: 41%;
    -webkit-animation: modal-card-error 1.2s ease-in-out infinite alternate;
    animation: modal-card-error 1.2s ease-in-out infinite alternate;
}


.modal-custom.paypal-account-error .clipart-block .clipart-shadow {
    display: block;
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    width: 60%;
    height: 5%;
    top: 64%;
    left: 23%;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-animation: modal-card-error-shadow 1.2s ease-in-out infinite alternate;
    animation: modal-card-error-shadow 1.2s ease-in-out infinite alternate;
}


@media (max-width: 820px) {
    .modal-custom.paypal-account-error .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.paypal-account-error .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.paypal-account-error .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.paypal-account-error .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.paypal-account-error .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.paypal-account-error .modal-container {
        width: 100%;
    }

    .modal-custom.paypal-account-error .modal-footer .new-btn span {
        display: none;
    }
}


@media (max-width: 400px) {


    .modal-custom.paypal-account-error .modal-footer .new-btn {
        min-width: auto;
    }
}

@media (max-height: 550px) {

    .modal-custom.paypal-account-error .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.paypal-account-error .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.paypal-account-error .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.paypal-account-error .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.paypal-account-error .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}
/* #endregion ========================== Modal: PayPal Account Error ================================= */
/* #region ================================== Card Error Modal ======================================= */
.modal.modal-card-error .modal-dialog {
    top: calc(50% - 300px);
    max-width: 635px;
}

.modal.modal-card-error .clipart-block {
    display: block;
    width: 210px;
    height: 210px;
    margin: 0px auto;
}

.modal.modal-card-error .mCSB_container {
    width: 600px;
    margin: 0px auto;
}

.modal.modal-card-error .clipart-block .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.modal.modal-card-error .clipart-block .clipart-cloud-1,
.modal.modal-card-error .clipart-block .clipart-cloud-2,
.modal.modal-card-error .clipart-block .clipart-cloud-3,
.modal.modal-card-error .clipart-block .clipart-cloud-4,
.modal.modal-card-error .clipart-block .clipart-cloud-5,
.modal.modal-card-error .clipart-block .clipart-cloud-6,
.modal.modal-card-error .clipart-block .clipart-cloud-7,
.modal.modal-card-error .clipart-block .clipart-cloud-8 {
    display: block;
    position: absolute;
    z-index: 1;
    background-color: #F1F1F1;
    border-radius: 50%;
}

.modal.modal-card-error .clipart-block .clipart-cloud-1 {
    top: 8%;
    left: 17%;
    width: 34%;
    height: 34%;
    -webkit-animation: modal-card-error-cloud-1 1.2s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-1 1.2s ease-in-out infinite alternate;
}

.modal.modal-card-error .clipart-block .clipart-cloud-2 {
    top: 8%;
    left: 39%;
    width: 44%;
    height: 44%;
    -webkit-animation: modal-card-error-cloud-2 1.5s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-2 1.5s ease-in-out infinite alternate;
}

.modal.modal-card-error .clipart-block .clipart-cloud-3 {
    top: 19%;
    left: 73%;
    width: 24%;
    height: 24%;
    -webkit-animation: modal-card-error-cloud-3 2s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-3 2s ease-in-out infinite alternate;
}

.modal.modal-card-error .clipart-block .clipart-cloud-4 {
    top: 30%;
    left: 50%;
    width: 50%;
    height: 50%;
    -webkit-animation: modal-card-error-cloud-4 1.4s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-4 1.4s ease-in-out infinite alternate;
}

.modal.modal-card-error .clipart-block .clipart-cloud-5 {
    top: 59%;
    left: 44%;
    width: 27%;
    height: 27%;
    -webkit-animation: modal-card-error-cloud-5 1.1s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-5 1.1s ease-in-out infinite alternate;
}

.modal.modal-card-error .clipart-block .clipart-cloud-6 {
    top: 26%;
    left: 17%;
    width: 52%;
    height: 52%;
    -webkit-animation: modal-card-error-cloud-6 1.7s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-6 1.7s ease-in-out infinite alternate;
}

.modal.modal-card-error .clipart-block .clipart-cloud-7 {
    top: 53%;
    left: 11%;
    width: 25%;
    height: 25%;
    -webkit-animation: modal-card-error-cloud-7 1.3s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-7 1.3s ease-in-out infinite alternate;
}

.modal.modal-card-error .clipart-block .clipart-cloud-8 {
    top: 27%;
    left: -1%;
    width: 31%;
    height: 30%;
    -webkit-animation: modal-card-error-cloud-8 1.2s ease-in-out infinite alternate;
    animation: modal-card-error-cloud-8 1.2s ease-in-out infinite alternate;
}

@keyframes modal-card-error-cloud-1 {
    from {
        transform: translate(-3%, -3%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@-webkit-keyframes modal-card-error-cloud-1 {
    from {
        -webkit-transform: translate(-3%, -3%);
    }

    to {
        -webkit-transform: translate(4%, 4%);
    }
}

@keyframes modal-card-error-cloud-2 {
    from {
        transform: translate(0%, 2%);
    }

    to {
        transform: translate(0%, -4%);
    }
}

@-webkit-keyframes modal-card-error-cloud-2 {
    from {
        -webkit-transform: translate(0%, 2%);
    }

    to {
        -webkit-transform: translate(0%, -4%);
    }
}

@keyframes modal-card-error-cloud-3 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-3%, 5%);
    }
}

@-webkit-keyframes modal-card-error-cloud-3 {
    from {
        -webkit-transform: translate(4%, -4%);
    }

    to {
        -webkit-transform: translate(-3%, 5%);
    }
}

@keyframes modal-card-error-cloud-4 {
    from {
        transform: translate(-5%, -4%);
    }

    to {
        transform: translate(5%, 4%);
    }
}

@-webkit-keyframes modal-card-error-cloud-4 {
    from {
        -webkit-transform: translate(-5%, -4%);
    }

    to {
        -webkit-transform: translate(5%, 4%);
    }
}

@keyframes modal-card-error-cloud-5 {
    from {
        transform: translate(2%, 5%);
    }

    to {
        transform: translate(-2%, -4%);
    }
}

@-webkit-keyframes modal-card-error-cloud-5 {
    from {
        -webkit-transform: translate(2%, 5%);
    }

    to {
        -webkit-transform: translate(-2%, -4%);
    }
}

@keyframes modal-card-error-cloud-6 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(-1%, 4%);
    }
}

@-webkit-keyframes modal-card-error-cloud-6 {
    from {
        -webkit-transform: translate(0%, -5%);
    }

    to {
        -webkit-transform: translate(-1%, 4%);
    }
}

@keyframes modal-card-error-cloud-7 {
    from {
        transform: translate(-2%, 5%);
    }

    to {
        transform: translate(3%, -3%);
    }
}

@-webkit-keyframes modal-card-error-cloud-7 {
    from {
        -webkit-transform: translate(-2%, 5%);
    }

    to {
        -webkit-transform: translate(3%, -3%);
    }
}

@keyframes modal-card-error-cloud-8 {
    from {
        transform: translate(4%, 0%);
    }

    to {
        transform: translate(-3%, 0%);
    }
}

@-webkit-keyframes modal-card-error-cloud-8 {
    from {
        -webkit-transform: translate(4%, 0%);
    }

    to {
        -webkit-transform: translate(-3%, 0%);
    }
}

.modal.modal-card-error .clipart-block .clipart-card {
    display: block;
    position: absolute;
    z-index: 2;
    width: 60%;
    height: 60%;
    background: url("../../Content/Images/PaymentMethods/clipart-error.svg") no-repeat center center transparent;
    background-size: contain;
    left: 26%;
    top: 12%;
    -webkit-animation: modal-card-error 1.2s ease-in-out infinite alternate;
    animation: modal-card-error 1.2s ease-in-out infinite alternate;
}

@keyframes modal-card-error {
    from {
        transform: translateY(2%);
    }

    to {
        transform: translateY(-7%);
    }
}

@-webkit-keyframes modal-card-error {
    from {
        -webkit-transform: translateY(2%);
    }

    to {
        -webkit-transform: translateY(-7%);
    }
}

.modal.modal-card-error .clipart-block .clipart-shadow {
    display: block;
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    width: 60%;
    height: 5%;
    top: 64%;
    left: 23%;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-animation: modal-card-error-shadow 1.2s ease-in-out infinite alternate;
    animation: modal-card-error-shadow 1.2s ease-in-out infinite alternate;
}

@keyframes modal-card-error-shadow {
    from {
        transform: scaleX(1);
        opacity: 1;
    }

    to {
        transform: scaleX(0.8);
        opacity: 0.6;
    }
}

.modal.modal-card-error .modal-body {
    text-align: center;
}

    .modal.modal-card-error .modal-body p {
        font-size: 18px;
        padding-left: 30px;
        padding-right: 30px;
    }


@media (max-width: 727px) {
    .modal.modal-card-error .modal-dialog {
        top: 0px;
        left: 0px;
        max-width: 100%;
    }

    .modal.modal-card-error .mCSB_container {
        width: 100%;
    }
}

@media (max-width: 449px) {
    .modal.modal-card-error .modal-body p {
        font-size: 16px;
    }

    .modal.modal-card-error .clipart-block {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 400px) {
    .modal.modal-card-error .clipart-block {
        width: 150px;
        height: 150px;
    }

    .modal.modal-card-error .modal-body p {
        font-size: 14px;
        padding-right: 0px;
        padding-left: 0px;
    }
}

@media (max-width: 400px) {
    .modal.modal-card-error .clipart-block {
        width: 150px;
        height: 150px;
    }

    .modal.modal-card-error .modal-body p {
        font-size: 14px;
        padding-right: 0px;
        padding-left: 0px;
    }
}

@media (max-height: 580px) {

    .modal.show.modal-card-error {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.modal-card-error .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.modal-card-error .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.modal-card-error .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.modal-card-error .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.modal-card-error .modal-dialog .modal-footer {
        height: 69px;
    }
}
/* #endregion ============================== /Card Error Modal ======================================= */
/* #region ============================ New/Edit Card - Custom Modal ================================= */
.modal-custom.modal-new-edit-card .modal-window {
    width: 850px;
    left: calc(50% - 425px);
    top: calc(50% - 306px);
}

.modal.modal-new-edit-card .modal-window .modal-footer {
    display: block;
    text-align: center;
}

.modal-custom.modal-new-edit-card .modal-body {
    background-color: #F9F9F9;
}

    .modal-custom.modal-new-edit-card .modal-body p {
        font-size: 18px;
    }

    .modal-custom.modal-new-edit-card .modal-body .card-panel {
        display: block;
        position: relative;
        width: 100%;
        border-radius: var(--radius-12);
        background-color: #FFFFFF;
        padding: 20px 50px 40px 50px;
        margin: 30px auto 20px auto;
    }


        .modal-custom.modal-new-edit-card .modal-body .card-panel .card-number {
            direction: ltr;
        }

*[dir='rtl'] .modal-custom.modal-new-edit-card .modal-body .card-panel .card-number {
    direction: ltr;
    text-align: right;
}

.modal-custom.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block {
    display: block;
    width: 100%;
    position: relative;
    margin-top: 40px;
}

    .modal-custom.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block input[type='text'],
    .modal-custom.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block input[type='password'] {
        max-width: 100px;
    }

    .modal-custom.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block input[type='text'] {
        margin-right: 40px;
    }

*[dir='rtl'] .modal-custom.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block input[type='text'] {
    margin-right: 0px;
    margin-left: 40px;
}


.modal-custom.modal-new-edit-card .modal-body .card-panel .card-logo-block {
    margin-bottom: 10px;
    font-size: 0px;
}

    .modal-custom.modal-new-edit-card .modal-body .card-panel .card-logo-block .logo-item {
        display: inline-block;
        width: 64px;
        height: 64px;
        position: relative;
        font-size: 60px;
        filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
        filter: gray;
        -webkit-filter: grayscale(100%);
        opacity: 0.4;
    }

        .modal-custom.modal-new-edit-card .modal-body .card-panel .card-logo-block .logo-item.active {
            filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
            -webkit-filter: grayscale(0%);
            opacity: 1;
        }




.modal-custom.modal-new-edit-card .modal-body .card-container {
    width: 600px;
    margin: 10px auto 10px auto;
}

@media (max-width: 950px) {
    .modal-custom.modal-new-edit-card .modal-window {
        max-width: 700px;
        left: calc(50% - 350px);
    }
}

@media (max-width: 727px) {
    .modal-custom.modal-new-edit-card .modal-window {
        max-width: 100%;
        top: 0px;
        left: 0px;
    }


    .modal-custom.modal-new-edit-card .modal-body .card-container {
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 600px) {
    .modal-custom.modal-new-edit-card .modal-body .card-panel {
        padding: 10px 10px 10px 10px;
    }

        .modal-custom.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block {
            margin-top: 10px;
        }

            .modal-custom.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block input[type='text'] {
                margin-right: 10px;
            }

    *[dir='rtl'] .modal-custom.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block input[type='text'] {
        margin-right: 0px;
        margin-left: 10px;
    }

    .modal-custom.modal-new-edit-card .modal-body .card-panel .card-logo-block {
        margin-bottom: 10px;
    }

        .modal-custom.modal-new-edit-card .modal-body .card-panel .card-logo-block .logo-item {
            width: 48px;
            height: 48px;
        }

            .modal-custom.modal-new-edit-card .modal-body .card-panel .card-logo-block .logo-item .ci-pazar-social {
                font-size: 48px;
            }

    .modal-custom.modal-new-edit-card .modal-body p {
        font-size: 16px;
        margin-top: 0px;
    }

    .modal-custom.modal-new-edit-card .modal-body .card-container {
        margin-top: 10px;
    }

    .modal-custom.modal-new-edit-card .modal-body .card-panel {
        margin-top: 30px;
        padding-bottom: 40px;
    }
}

@media (max-width: 450px) {
    .modal-custom.modal-new-edit-card .modal-body .card-container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal-custom.modal-new-edit-card .modal-footer .new-btn {
        min-width: 100px;
    }
}

@media (max-height: 650px) {

    .modal-custom.modal-new-edit-card .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.modal-new-edit-card .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.modal-new-edit-card .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.modal-new-edit-card .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.modal-new-edit-card .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}
/* #endregion ======================== /New/Edit Card - Custom Modal ================================= */
/* #region ================================ New/Edit Card Modal ====================================== */
.modal.modal-new-edit-card .modal-dialog {
    max-width: 850px;
    top: calc(50% - 324px);
}

    .modal.modal-new-edit-card .modal-dialog .modal-footer {
        display: block;
        text-align: center;
    }

.modal.modal-new-edit-card .modal-body {
    background-color: #F9F9F9;
}

    .modal.modal-new-edit-card .modal-body p {
        font-size: 18px;
    }

    .modal.modal-new-edit-card .modal-body .card-panel {
        display: block;
        position: relative;
        width: 100%;
        border-radius: var(--radius-12);
        background-color: #FFFFFF;
        padding: 20px 50px 40px 50px;
        margin: 30px auto 20px auto;
    }


        .modal.modal-new-edit-card .modal-body .card-panel .card-number {
            direction: ltr;
        }

*[dir='rtl'] .modal.modal-new-edit-card .modal-body .card-panel .card-number {
    direction: ltr;
    text-align: right;
}

.modal.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block {
    display: block;
    width: 100%;
    position: relative;
    margin-top: 40px;
}

    .modal.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block input[type='text'],
    .modal.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block input[type='password'] {
        max-width: 100px;
    }

    .modal.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block input[type='text'] {
        margin-right: 40px;
    }

*[dir='rtl'] .modal.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block input[type='text'] {
    margin-right: 0px;
    margin-left: 40px;
}


.modal.modal-new-edit-card .modal-body .card-panel .card-logo-block {
    margin-bottom: 10px;
    font-size: 0px;
}

    .modal.modal-new-edit-card .modal-body .card-panel .card-logo-block .logo-item {
        display: inline-block;
        width: 64px;
        height: 64px;
        position: relative;
        font-size: 60px;
        filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
        filter: gray;
        -webkit-filter: grayscale(100%);
        opacity: 0.4;
    }

        .modal.modal-new-edit-card .modal-body .card-panel .card-logo-block .logo-item.active {
            filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
            -webkit-filter: grayscale(0%);
            opacity: 1;
        }




.modal.modal-new-edit-card .modal-body .card-container {
    width: 600px;
    margin: 10px auto 10px auto;
}

@media (max-width: 950px) {
    .modal.modal-new-edit-card .modal-dialog {
        max-width: 700px;
    }
}

@media (max-width: 727px) {
    .modal.modal-new-edit-card .modal-dialog {
        max-width: 100%;
        top: 0px;
        left: 0px;
    }


    .modal.modal-new-edit-card .modal-body .card-container {
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 600px) {
    .modal.modal-new-edit-card .modal-body .card-panel {
        padding: 10px 10px 10px 10px;
    }

        .modal.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block {
            margin-top: 10px;
        }

            .modal.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block input[type='text'] {
                margin-right: 10px;
            }

    *[dir='rtl'] .modal.modal-new-edit-card .modal-body .card-panel .card-date-cvc-block input[type='text'] {
        margin-right: 0px;
        margin-left: 10px;
    }

    .modal.modal-new-edit-card .modal-body .card-panel .card-logo-block {
        margin-bottom: 10px;
    }

        .modal.modal-new-edit-card .modal-body .card-panel .card-logo-block .logo-item {
            width: 48px;
            height: 48px;
        }

            .modal.modal-new-edit-card .modal-body .card-panel .card-logo-block .logo-item .ci-pazar-social {
                font-size: 48px;
            }

    .modal.modal-new-edit-card .modal-body p {
        font-size: 16px;
        margin-top: 0px;
    }

    .modal.modal-new-edit-card .modal-body .card-container {
        margin-top: 10px;
    }

    .modal.modal-new-edit-card .modal-body .card-panel {
        margin-top: 30px;
        padding-bottom: 40px;
    }
}

@media (max-width: 450px) {
    .modal.modal-new-edit-card .modal-body .card-container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal.modal-new-edit-card .modal-footer .new-btn {
        min-width: 100px;
    }
}

@media (max-height: 660px) {

    .modal.show.modal-new-edit-card {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.modal-new-edit-card .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.modal-new-edit-card .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.modal-new-edit-card .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.modal-new-edit-card .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.modal-new-edit-card .modal-dialog .modal-footer {
        height: 69px;
    }
}
/* #endregion ============================ /New/Edit Card Modal ====================================== */
/* #region =========================== Contact regular seller Modal - NEW ============================ */
.modal-custom.modal-contact-seller .modal-window {
    max-width: 550px;
    top: calc(50% - 300px);
    left: calc(50% - 275px);
}

.modal-custom.modal-contact-seller .modal-body {
    background-color: #F9F9F9;
    padding: 0px;
}

.modal-custom.modal-contact-seller .modal-container {
    padding: 0px;
}

.modal-custom.modal-contact-seller .modal-body .main-info-block {
    border-bottom: 1px solid #DDDDDD;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.modal-custom.modal-contact-seller .modal-window .contact-item {
    display: block;
    border-bottom: 1px solid #DDDDDD;
    text-align: center;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    text-decoration: none;
    background-color: #FFFFFF;
}

    .modal-custom.modal-contact-seller .modal-window .contact-item label {
        font-weight: 400;
    }

    .modal-custom.modal-contact-seller .modal-window .contact-item p {
        font-weight: 500;
    }

.modal-custom.modal-contact-seller .modal-window .main-info-block .new-btn {
    text-align: center;
    padding: 20px 10px 20px 10px;
    border-radius: var(--radius-4);
}

.modal-custom.modal-contact-seller .modal-window .new-btn + .new-btn {
    margin-top: 5px;
}

.modal-custom.modal-contact-seller .main-info-block .regular-user {
    display: block;
    margin-bottom: 20px;
    position: relative;
    min-height: 80px;
    text-decoration: none;
}

.modal-custom.modal-contact-seller .main-info-block .avatar-area {
    position: absolute;
    top: 0px;
    left: 0px;
}

*[dir='rtl'] .modal-custom.modal-contact-seller .main-info-block .avatar-area {
    right: 0px;
    left: auto;
}

.modal-custom.modal-contact-seller .main-info-block .avatar-area .user-avatar {
    width: 80px;
    height: 80px;
}

.modal-custom.modal-contact-seller .main-info-block .info-area {
    padding-left: 90px;
}

*[dir='rtl'] .modal-custom.modal-contact-seller .main-info-block .info-area {
    padding-left: 0px;
    padding-right: 90px;
}

.modal-custom.modal-contact-seller .main-info-block .info-area .user-name {
    font-size: 18px;
    font-weight: 500;
    word-break: break-word;
}

.modal-custom.modal-contact-seller .main-info-block .info-area .user-history {
    font-weight: 400;
}

.modal-custom.modal-contact-seller .main-info-block .info-area .status {
    position: relative;
    padding-left: 14px;
    margin-top: 3px;
    font-weight: 400;
    margin-bottom: 3px;
}

*[dir='rtl'] .modal-custom.modal-contact-seller .main-info-block .info-area .status {
    padding-right: 14px;
    padding-left: 0px;
}

.modal-custom.modal-contact-seller .main-info-block .online .info-area .status.status-online {
    color: var(--color-text-primary);
    display: block;
}

.modal-custom.modal-contact-seller .main-info-block .info-area .status.status-online {
    display: none;
}

.modal-custom.modal-contact-seller .main-info-block .status.status-offline {
    color: var(--color-text-muted);
    display: block;
}

.modal-custom.modal-contact-seller .main-info-block .online .status.status-offline {
    display: none;
}

.modal-custom.modal-contact-seller .main-info-block .status:before {
    position: absolute;
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: 0px;
    border-radius: 50%;
}

*[dir='rtl'] .modal-custom.modal-contact-seller .main-info-block .status:before {
    left: auto;
    right: 0px;
}

.modal-custom.modal-contact-seller .main-info-block .status.status-offline:before {
    background-color: #C5C5C5;
}

.modal-custom.modal-contact-seller .main-info-block .status.status-online:before {
    background-color: var(--color-bg-primary);
}

@media (max-width: 728px) {
    .modal-custom.modal-contact-seller .modal-window {
        max-width: 100%;
        top: 0px;
        left: 0px;
    }

    .modal-custom.modal-contact-seller .modal-body {
        height: 100%;
        padding-top: 52px;
    }
}
/* #endregion ======================= /Contact regular seller Modal - NEW ============================ */
/* #region =========================== Contact regular seller Modal ================================== */
.modal.modal-contact-seller .modal-dialog {
    max-width: 550px;
    top: calc(50% - 300px);
}

.modal.modal-contact-seller .modal-body {
    background-color: #F9F9F9;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 0px;
    max-height: 400px;
}

    .modal.modal-contact-seller .modal-body .main-info-block {
        border-bottom: 1px solid #DDDDDD;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-top: 20px;
    }


.modal.modal-contact-seller .modal-dialog .contact-item {
    display: block;
    border-bottom: 1px solid #DDDDDD;
    text-align: center;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    text-decoration: none;
    background-color: #FFFFFF;
}

    .modal.modal-contact-seller .modal-dialog .contact-item label {
        font-weight: 400;
    }

    .modal.modal-contact-seller .modal-dialog .contact-item p {
        font-weight: 500;
    }

.modal.modal-contact-seller .modal-dialog .main-info-block .new-btn {
    text-align: center;
    padding: 20px 10px 20px 10px;
    border-radius: var(--radius-4);
}

.modal.modal-contact-seller .modal-dialog .new-btn + .new-btn {
    margin-top: 5px;
}

.modal.modal-contact-seller .main-info-block .regular-user {
    display: block;
    margin-bottom: 20px;
    position: relative;
    min-height: 80px;
    text-decoration: none;
}

.modal.modal-contact-seller .main-info-block .avatar-area {
    position: absolute;
    top: 0px;
    left: 0px;
}

*[dir='rtl'] .modal.modal-contact-seller .main-info-block .avatar-area {
    right: 0px;
    left: auto;
}

.modal.modal-contact-seller .main-info-block .avatar-area .user-avatar {
    width: 80px;
    height: 80px;
}

.modal.modal-contact-seller .main-info-block .info-area {
    padding-left: 90px;
}

*[dir='rtl'] .modal.modal-contact-seller .main-info-block .info-area {
    padding-left: 0px;
    padding-right: 90px;
}

.modal.modal-contact-seller .main-info-block .info-area .user-name {
    font-size: 18px;
    font-weight: 500;
    word-break: break-word;
}

.modal.modal-contact-seller .main-info-block .info-area .user-history {
    font-weight: 400;
}

.modal.modal-contact-seller .main-info-block .info-area .status {
    position: relative;
    padding-left: 14px;
    margin-top: 3px;
    font-weight: 400;
    margin-bottom: 3px;
}

*[dir='rtl'] .modal.modal-contact-seller .main-info-block .info-area .status {
    padding-right: 14px;
    padding-left: 0px;
}

.modal.modal-contact-seller .main-info-block .online .info-area .status.status-online {
    color: var(--color-text-primary);
    display: block;
}

.modal.modal-contact-seller .main-info-block .info-area .status.status-online {
    display: none;
}

.modal.modal-contact-seller .main-info-block .status.status-offline {
    color: var(--color-text-muted);
    display: block;
}

.modal.modal-contact-seller .main-info-block .online .status.status-offline {
    display: none;
}

.modal.modal-contact-seller .main-info-block .status:before {
    position: absolute;
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: 0px;
    border-radius: 50%;
}

*[dir='rtl'] .modal.modal-contact-seller .main-info-block .status:before {
    left: auto;
    right: 0px;
}

.modal.modal-contact-seller .main-info-block .status.status-offline:before {
    background-color: #C5C5C5;
}

.modal.modal-contact-seller .main-info-block .status.status-online:before {
    background-color: var(--color-bg-primary);
}

@media (max-width: 728px) {
    .modal.modal-contact-seller .modal-dialog {
        max-width: 100%;
        top: 0px;
        left: 0px;
    }
}
/* #endregion ======================= /Contact regular seller Modal ================================== */
/* #region =============================== Contact Store Modal NEW =================================== */
.modal-custom.modal-contact-store .modal-window {
    max-width: 550px;
    top: calc(50% - 300px);
    left: calc(50% - 275px);
}

.modal-custom.modal-contact-store .modal-body {
    background-color: #F9F9F9;
    padding: 0px;
}

.modal-custom.modal-contact-store .modal-container {
    padding: 0px;
}

.modal-custom.modal-contact-store .modal-body .main-info-block {
    border-bottom: 1px solid #DDDDDD;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.modal-custom.modal-contact-store .modal-window .contact-item {
    display: block;
    border-bottom: 1px solid #DDDDDD;
    text-align: center;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    text-decoration: none;
    background-color: #FFFFFF;
}

    .modal-custom.modal-contact-store .modal-window .contact-item label {
        font-weight: 400;
    }

    .modal-custom.modal-contact-store .modal-window .contact-item p {
        font-weight: 500;
    }

.modal-custom.modal-contact-store .modal-window .main-info-block .new-btn {
    text-align: center;
    padding: 20px 10px 20px 10px;
    border-radius: var(--radius-4);
}

.modal-custom.modal-contact-store .modal-window .new-btn + .new-btn {
    margin-top: 5px;
}

.modal-custom.modal-contact-store .main-info-block .store {
    display: block;
    margin-bottom: 20px;
    position: relative;
    text-decoration: none;
    font-size: 0px;
}

.modal-custom.modal-contact-store .main-info-block .logo-area {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    width: 100px;
}

.modal-custom.modal-contact-store .main-info-block .info-area {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    width: calc(100% - 110px);
    padding-left: 20px;
}

*[dir='rtl'] .modal-custom.modal-contact-store .main-info-block .info-area {
    padding-right: 20px;
    padding-left: 0px;
}

.modal-custom.modal-contact-store .main-info-block .logo-area img {
    display: inline-block;
    width: 100%;
    height: auto;
}

.modal-custom.modal-contact-store .main-info-block .info-area .user-name {
    font-size: 18px;
    font-weight: 500;
    word-break: break-word;
}

.modal-custom.modal-contact-store .main-info-block .info-area .user-history {
    font-weight: 400;
}

.modal-custom.modal-contact-store .main-info-block .info-area .status {
    position: relative;
    padding-left: 14px;
    margin-top: 3px;
    font-weight: 400;
    margin-bottom: 3px;
}

*[dir='rtl'] .modal-custom.modal-contact-store .main-info-block .info-area .status {
    padding-right: 14px;
    padding-left: 0px;
}

.modal-custom.modal-contact-store .main-info-block .online .info-area .status.status-online {
    color: var(--color-text-primary);
    display: block;
}

.modal-custom.modal-contact-store .main-info-block .info-area .status.status-online {
    display: none;
}

.modal-custom.modal-contact-store .main-info-block .status.status-offline {
    color: var(--color-text-muted);
    display: block;
}

.modal-custom.modal-contact-store .main-info-block .online .status.status-offline {
    display: none;
}

.modal-custom.modal-contact-store .main-info-block .status:before {
    position: absolute;
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: 0px;
    border-radius: 50%;
}

*[dir='rtl'] .modal-custom.modal-contact-store .main-info-block .status:before {
    left: auto;
    right: 0px;
}

.modal-custom.modal-contact-store .main-info-block .status.status-offline:before {
    background-color: #C5C5C5;
}

.modal-custom.modal-contact-store .main-info-block .status.status-online:before {
    background-color: var(--color-bg-primary);
}

@media (max-width: 728px) {
    .modal-custom.modal-contact-store .modal-window {
        max-width: 100%;
        top: 0px;
        left: 0px;
    }

    .modal-custom.modal-contact-store .modal-body {
        height: 100%;
        padding-top: 52px;
    }
}

@media (max-width: 450px) {
    .modal-custom.modal-contact-store .main-info-block .logo-area {
        display: none;
    }

    .modal-custom.modal-contact-store .main-info-block .info-area,
    *[dir='rtl'] .modal-custom.modal-contact-store .main-info-block .info-area {
        display: block;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }
}
/* #endregion =========================== /Contact Store Modal NEW =================================== */
/* #region =============================== Contact Store Modal ======================================= */
.modal.modal-contact-store .modal-dialog {
    max-width: 550px;
    top: calc(50% - 300px);
}

.modal.modal-contact-store .modal-body {
    background-color: #F9F9F9;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 0px;
    max-height: 400px;
}

    .modal.modal-contact-store .modal-body .main-info-block {
        border-bottom: 1px solid #DDDDDD;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-top: 20px;
    }


.modal.modal-contact-store .modal-dialog .contact-item {
    display: block;
    border-bottom: 1px solid #DDDDDD;
    text-align: center;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    text-decoration: none;
    background-color: #FFFFFF;
}

    .modal.modal-contact-store .modal-dialog .contact-item label {
        font-weight: 400;
    }

    .modal.modal-contact-store .modal-dialog .contact-item p {
        font-weight: 500;
    }

.modal.modal-contact-store .modal-dialog .main-info-block .new-btn {
    text-align: center;
    padding: 20px 10px 20px 10px;
    border-radius: var(--radius-4);
}

.modal.modal-contact-store .modal-dialog .new-btn + .new-btn {
    margin-top: 5px;
}

.modal.modal-contact-store .main-info-block .store {
    display: block;
    margin-bottom: 20px;
    position: relative;
    text-decoration: none;
    font-size: 0px;
}

.modal.modal-contact-store .main-info-block .logo-area {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    width: 100px;
}

.modal.modal-contact-store .main-info-block .info-area {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    width: calc(100% - 110px);
    padding-left: 20px;
}


*[dir='rtl'] .modal.modal-contact-store .main-info-block .info-area {
    padding-right: 20px;
    padding-left: 0px;
}

.modal.modal-contact-store .main-info-block .logo-area img {
    display: inline-block;
    width: 100%;
    height: auto;
}

.modal.modal-contact-store .main-info-block .info-area .user-name {
    font-size: 18px;
    font-weight: 500;
    word-break: break-word;
}

.modal.modal-contact-store .main-info-block .info-area .user-history {
    font-weight: 400;
}

.modal.modal-contact-store .main-info-block .info-area .status {
    position: relative;
    padding-left: 14px;
    margin-top: 3px;
    font-weight: 400;
    margin-bottom: 3px;
}

*[dir='rtl'] .modal.modal-contact-store .main-info-block .info-area .status {
    padding-right: 14px;
    padding-left: 0px;
}

.modal.modal-contact-store .main-info-block .online .info-area .status.status-online {
    color: var(--color-text-primary);
    display: block;
}

.modal.modal-contact-store .main-info-block .info-area .status.status-online {
    display: none;
}

.modal.modal-contact-store .main-info-block .status.status-offline {
    color: var(--color-text-muted);
    display: block;
}

.modal.modal-contact-store .main-info-block .online .status.status-offline {
    display: none;
}

.modal.modal-contact-store .main-info-block .status:before {
    position: absolute;
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: 0px;
    border-radius: 50%;
}

*[dir='rtl'] .modal.modal-contact-store .main-info-block .status:before {
    left: auto;
    right: 0px;
}

.modal.modal-contact-store .main-info-block .status.status-offline:before {
    background-color: #C5C5C5;
}

.modal.modal-contact-store .main-info-block .status.status-online:before {
    background-color: var(--color-bg-primary);
}

@media (max-width: 728px) {
    .modal.modal-contact-store .modal-dialog {
        max-width: 100%;
        top: 0px;
        left: 0px;
    }
}

@media (max-width: 450px) {
    .modal.modal-contact-store .main-info-block .logo-area {
        display: none;
    }

    .modal.modal-contact-store .main-info-block .info-area,
    *[dir='rtl'] .modal.modal-contact-store .main-info-block .info-area {
        display: block;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }
}
/* #endregion ========================== /Contact store Modal ==================================== */
/* #region ================================== Modal Email ======================================== */
.modal.modal-email .modal-dialog {
    max-width: 850px;
    top: calc(50% - 325px);
}

    .modal.modal-email .modal-dialog .modal-container {
        padding: 10px 20px 10px 20px;
    }

@media (max-width: 991px) {
    .modal.modal-email .modal-dialog {
        max-width: 650px;
        top: calc(50% - 325px);
    }
}

@media (max-width: 767px) {
    .modal.modal-email .modal-dialog {
        max-width: 450px;
        top: calc(50% - 325px);
    }
}

@media (max-width: 728px) {
    .modal.modal-email .modal-dialog {
        max-width: 100%;
        top: 0px;
        left: 0px;
    }
}

@media (max-width: 450px) {
    .modal.modal-email .new-btn {
        min-width: 0px;
    }

    .modal.modal-email .modal-dialog .modal-container {
        padding: 5px 10px 5px 10px;
    }
}



/* #endregion ============================== /Modal Email ======================================== */
/* #region ================================= Modal Shipping Rates ====================================== */
.modal.shipping-rates .modal-dialog {
    max-width: 550px;
    top: calc(50% - 350px);
}

    .modal.shipping-rates .modal-dialog .content-container {
        padding: 0px 10px 10px 10px;
        width: 500px;
        margin: 0px auto;
    }

    .modal.shipping-rates .modal-dialog h4 {
        margin-top: 10px;
        margin-bottom: 25px;
    }


.modal.shipping-rates .description-item {
    display: block;
    width: 100%;
    font-size: 0px;
}

    .modal.shipping-rates .description-item .left-side {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        width: 150px;
        text-align: center;
    }

    .modal.shipping-rates .description-item .right-side {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        width: calc(100% - 150px);
    }

.modal.shipping-rates .divider-horizontal {
    background-color: #F2F2F2;
}

.modal.shipping-rates .panel-calculator {
    display: block;
    width: 100%;
    background-color: #F2F2F2;
    padding: 40px 70px 40px 70px;
    border-radius: var(--radius-4);
}

    .modal.shipping-rates .panel-calculator .price-area {
        display: block;
        font-size: 0px;
        margin-top: 20px;
    }

        .modal.shipping-rates .panel-calculator .price-area .left-side {
            display: inline-block;
            font-size: 14px;
            vertical-align: middle;
            width: 50%;
            border-right: 1px solid #DDDDDD;
            padding-top: 10px;
            padding-bottom: 10px;
        }

*[dir='rtl'] .modal.shipping-rates .panel-calculator .price-area .left-side {
    border-right: 0px none transparent;
    border-left: 1px solid #DDDDDD;
}

.modal.shipping-rates .panel-calculator .price-area .right-side {
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
    width: 50%;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .modal.shipping-rates .panel-calculator .price-area .left-side p,
    .modal.shipping-rates .panel-calculator .price-area .right-side p {
        font-size: 14px;
        text-align: center;
    }

    .modal.shipping-rates .panel-calculator .price-area .left-side h5,
    .modal.shipping-rates .panel-calculator .price-area .right-side h5 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
    }


@media (max-width: 728px) {
    .modal.shipping-rates .modal-dialog {
        max-width: 100%;
        top: 0px;
        left: 0px;
    }

        .modal.shipping-rates .modal-dialog .content-container {
            width: 100%;
        }
}

@media (max-width: 600px) {
    .modal.shipping-rates .panel-calculator {
        padding: 40px 40px 40px 40px;
    }
}

@media (max-width: 500px) {
    .modal.shipping-rates .panel-calculator {
        padding: 20px 20px 20px 20px;
    }

    .modal.shipping-rates .modal-dialog .content-container {
        padding: 0px 0px 0px 0px;
    }
}

@media (max-width: 450px) {
    .modal.shipping-rates .panel-calculator .price-area .left-side,
    .modal.shipping-rates .panel-calculator .price-area .right-side {
        width: 100%;
        text-align: left;
        border-right: 0px none transparent;
    }

    *[dir='rtl'] .modal.shipping-rates .panel-calculator .price-area .left-side,
    *[dir='rtl'] .modal.shipping-rates .panel-calculator .price-area .right-side {
        width: 100%;
        text-align: right;
        border-left: 0px none transparent;
    }

    .modal.shipping-rates .description-item .left-side {
        text-align: left;
        width: 100%;
        display: block;
        margin-bottom: 8px;
    }

    *[dir='rtl'] .modal.shipping-rates .description-item .left-side {
        text-align: right;
    }

    .modal.shipping-rates .description-item .right-side {
        display: block;
        width: 100%;
    }
}

@media (max-height: 660px) {

    .modal.show.shipping-rates {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.shipping-rates .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.shipping-rates .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.shipping-rates .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.shipping-rates .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.shipping-rates .modal-dialog .modal-footer {
        height: 69px;
    }
}
/* #endregion ============================= /Modal Shipping Rates ====================================== */
/* #region ================================= Modal Shipping Rates ====================================== */
.modal-custom.shipping-rates .modal-window {
    max-width: 550px;
    top: calc(50% - 350px);
}

    .modal-custom.shipping-rates .modal-window .content-container {
        padding: 0px 30px 30px 30px;
    }

    .modal-custom.shipping-rates .modal-window h4 {
        margin-top: 20px;
        margin-bottom: 25px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.4em;
        padding-bottom: 0px;
    }


.modal-custom.shipping-rates .description-item {
    display: block;
    width: 100%;
    font-size: 0px;
}

    .modal-custom.shipping-rates .description-item .left-side {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        width: 150px;
        text-align: center;
    }

    .modal-custom.shipping-rates .description-item .right-side {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        width: calc(100% - 150px);
    }

.modal-custom.shipping-rates .divider-horizontal {
    background-color: #F2F2F2;
}

.modal-custom.shipping-rates .panel-calculator {
    display: block;
    width: 100%;
    background-color: #F2F2F2;
    padding: 40px 70px 40px 70px;
    border-radius: var(--radius-4);
}

    .modal-custom.shipping-rates .panel-calculator .price-area {
        display: block;
        font-size: 0px;
        margin-top: 20px;
    }

        .modal-custom.shipping-rates .panel-calculator .price-area .left-side {
            display: inline-block;
            font-size: 14px;
            vertical-align: middle;
            width: 50%;
            border-right: 1px solid #DDDDDD;
            padding-top: 10px;
            padding-bottom: 10px;
        }

*[dir='rtl'] .modal-custom.shipping-rates .panel-calculator .price-area .left-side {
    border-right: 0px none transparent;
    border-left: 1px solid #DDDDDD;
}

.modal-custom.shipping-rates .panel-calculator .price-area .right-side {
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
    width: 50%;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .modal-custom.shipping-rates .panel-calculator .price-area .left-side p,
    .modal-custom.shipping-rates .panel-calculator .price-area .right-side p {
        font-size: 14px;
        text-align: center;
    }

    .modal-custom.shipping-rates .panel-calculator .price-area .left-side h5,
    .modal-custom.shipping-rates .panel-calculator .price-area .right-side h5 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
    }


@media (max-width: 728px) {
    .modal-custom.shipping-rates .modal-window {
        max-width: 100%;
        top: 0px;
        left: 0px;
    }
}

@media (max-width: 600px) {
    .modal-custom.shipping-rates .panel-calculator {
        padding: 40px 40px 40px 40px;
    }
}

@media (max-width: 500px) {
    .modal-custom.shipping-rates .panel-calculator {
        padding: 20px 20px 20px 20px;
    }

    .modal-custom.shipping-rates .modal-window .content-container {
        padding: 0px 10px 10px 10px;
    }
}

@media (max-width: 450px) {
    .modal-custom.shipping-rates .panel-calculator .price-area .left-side,
    .modal-custom.shipping-rates .panel-calculator .price-area .right-side {
        width: 100%;
        text-align: left;
        border-right: 0px none transparent;
    }

    *[dir='rtl'] .modal-custom.shipping-rates .panel-calculator .price-area .left-side,
    *[dir='rtl'] .modal-custom.shipping-rates .panel-calculator .price-area .right-side {
        width: 100%;
        text-align: right;
        border-left: 0px none transparent;
    }

    .modal-custom.shipping-rates .description-item .left-side {
        text-align: left;
        width: 100%;
        display: block;
        margin-bottom: 8px;
    }

    *[dir='rtl'] .modal-custom.shipping-rates .description-item .left-side {
        text-align: right;
    }

    .modal-custom.shipping-rates .description-item .right-side {
        display: block;
        width: 100%;
    }
}
/* #endregion ============================= /Modal Shipping Rates ====================================== */
/* #region ====================================== Ads Search ========================================= */
/* #region ------------ Car types ----------- */
.car-body .car-body-panel {
    width: 12%;
    min-height: 90px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid transparent !important;
    background-color: #F2F2F2 !important;
    border-radius: var(--radius-4);
}

    .car-body .car-body-panel.selected {
        border: 1px solid transparent !important;
        background-color: #E6F4ED !important;
        border-radius: var(--radius-4);
        color: var(--color-text-primary);
    }

    .car-body .car-body-panel:hover {
        text-decoration: none;
    }

form.pz-search-form .car-body a {
    text-decoration: none;
}

.car-body {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

    .car-body .car-body-panel .caption {
        line-height: 14px;
        font-weight: 600;
        color: var(--color-text-muted);
    }

    .car-body .car-body-panel.selected .caption {
        color: var(--color-text-primary);
    }


    .car-body .car-body-panel .inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        padding-top: 13px;
    }

    .car-body .car-body-panel.selected *[class^='ci-']:before {
        background-image: url("../../Content/Images/ci-pazar-cars-primary.svg");
    }

.mobile .car-body .car-body-panel {
    width: 24%;
    margin-bottom: 4px;
    min-height: 70px;
}


.mobile form.pz-search-form .car-body a.selected > div {
    border: 0px solid transparent;
    background-color: transparent;
}

@media (max-width: 319px) {
    .mobile .car-body .car-body-panel {
        width: 25%;
    }
}
/* #endregion -------- /Car types ----------- */
/* #region --------- Color swatches --------- */
.color-container {
    display: block;
    width: 100%;
    text-align: center;
    padding-top: 12px;
}

    .color-container .color-swatch {
        display: inline-block;
        width: 5.8%;
        height: 40px;
        position: relative;
        border-radius: var(--radius-4);
    }


.mobile .color-container .color-swatch {
    width: 11%;
}

.color-container .color-swatch input {
    display: none;
}

.color-container .color-swatch label {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.color-container .color-swatch i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-4);
}

.color-container .color-swatch .ci-pazar-small {
    position: absolute;
    font-size: 16px;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
}

.color-container .color-swatch input[type='checkbox'] + i .ci-pazar-small {
    display: none;
}

.color-container .color-swatch input[type='checkbox']:checked + i .ci-pazar-small {
    display: block;
}

.color-container .tooltip-block {
    opacity: 0;
    color: #FFFFFF;
    border-radius: var(--radius-4);
    padding: 15px 15px 15px 15px;
    font-size: 14px;
    text-align: left;
    background-color: rgba(33,37,41,0.8);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 25px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: absolute;
    z-index: 1;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    display: none;
}

    .color-container .tooltip-block.show {
        display: block;
        opacity: 1;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

*[dir='rtl'] .color-container .tooltip-block {
    text-align: right;
}

.color-container .color-swatch .tooltip .tooltip-inner {
    padding: 8px 10px 8px 10px;
    background-color: rgba(33,37,41,1);
    box-shadow: rgba(0, 0, 0, 0.9) 0px 5px 25px;
    font-size: 14px;
}

.color-container .color-swatch .tooltip.bottom .tooltip-arrow {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: rgba(33,37,41,1) !important;
}

.color-container .color-swatch .tooltip.top .tooltip-arrow {
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: rgba(33,37,41,1) !important;
}

.color-container .color-swatch .tooltip.right .tooltip-arrow {
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-right-color: rgba(33,37,41,1) !important;
}

.color-container .color-swatch .tooltip.left .tooltip-arrow {
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: rgba(33,37,41,1) !important;
}


form.pz-search-form .search-colors {
    width: 214px;
}

    form.pz-search-form .search-colors a {
        display: block;
        float: left;
    }

        form.pz-search-form .search-colors a .color-item {
            width: 24px;
            height: 24px;
            border: 0px none transparent;
            border-radius: var(--radius-4);
            position: relative;
        }

[dir='rtl'] form.pz-search-form .search-colors a {
    float: right;
}

form.pz-search-form .search-colors *[value='White'] + a .color-item {
    border: 1px solid #DDDDDD;
}

form.pz-search-form .search-colors a.selected {
    border: 1px solid transparent;
}

form.pz-search-form .search-colors a .color-item > * {
    top: calc(50% - 7px);
    left: calc(50% - 6px);
    content: '';
    display: none;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-image: url("../../Content/Images/ci-pazar-small-alt.svg");
    background-repeat: no-repeat;
    background-size: 50em 1em;
    background-position: -8em 0em;
    font-size: 1em;
    opacity: 1;
    position: absolute;
}

form.pz-search-form .search-colors *[value='White'] + a .color-item > *,
form.pz-search-form .search-colors *[value='Yellow'] + a .color-item > * {
    background-image: url("../../Content/Images/ci-pazar-small-base.svg");
}

form.pz-search-form .search-colors input[type='checkbox']:checked + a .color-item > * {
    display: inline-block;
}


.mobile form.pz-search-form .search-colors {
    text-align: center;
    padding-top: 13px;
}


    .mobile form.pz-search-form .search-colors a {
        display: inline-block;
        float: none;
        margin-bottom: 3px;
        width: 19%;
    }

        .mobile form.pz-search-form .search-colors a .color-item {
            width: 100%;
            height: 41px;
        }

            .mobile form.pz-search-form .search-colors a .color-item > * {
                font-size: 20px;
                top: calc(50% - 10px);
                left: calc(50% - 10px);
            }


[dir='rtl'] form.pz-search-form .pz-form-properties .span2.search-colors {
    margin-left: 0px;
    margin-right: 20px;
}
/* #endregion ----- /Color swatches --------- */
/* #region ---------- Search form ----------- */

[dir='rtl'] form.pz-search-form .pz-form-properties .span2, [dir='rtl'] form.pz-search-form .pz-form-properties .span3 {
    margin-right: 0px !important;
}
/* #endregion ------ /Search form ----------- */
form.pz-search-form .pz-form-properties {
    overflow: visible !important;
}

.line-form > ul > li input {
    padding-inline-start: 35px;
    padding-inline-end: 10px;
    appearance: none !important;
}

.line-form > ul > li select {
    padding-inline-start: 34px;
    padding-inline-end: 10px;
    appearance: none !important;
}

/* #endregion ================================== /Ads Search ========================================= */
/* #region ===================================== Ads Listing ========================================= */
.search-page select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg version='1.0' id='caret' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.41,4.61c-0.78-0.78-2.05-0.78-2.83,0L8.01,8.19L4.41,4.59c-0.78-0.78-2.05-0.78-2.83,0c-0.78,0.78-0.78,2.05,0,2.83 l4.99,4.99c0,0,0.01,0.01,0.01,0.01c0,0,0.01,0.01,0.01,0.01c0.39,0.39,0.9,0.59,1.41,0.59s1.02-0.2,1.41-0.59l4.99-4.99 C15.2,6.65,15.2,5.39,14.41,4.61z'/%3E%3C/svg%3E");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 10px;
    padding-inline-start: 8px !important;
    padding-inline-end: 24px !important;
    padding-block: 0px;
    border-radius: var(--radius-4);
}

*[dir='rtl'] .search-page select {
    background-image: url("data:image/svg+xml,%3Csvg version='1.0' id='caret' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.41,4.61c-0.78-0.78-2.05-0.78-2.83,0L8.01,8.19L4.41,4.59c-0.78-0.78-2.05-0.78-2.83,0c-0.78,0.78-0.78,2.05,0,2.83 l4.99,4.99c0,0,0.01,0.01,0.01,0.01c0,0,0.01,0.01,0.01,0.01c0.39,0.39,0.9,0.59,1.41,0.59s1.02-0.2,1.41-0.59l4.99-4.99 C15.2,6.65,15.2,5.39,14.41,4.61z'/%3E%3C/svg%3E");
    background-position: left 8px center;
}

.search-page select.submit-click-category,
.search-page select.search-location-dropdown {
    padding-inline-start: 34px !important;
}
/* #region Chat Button */
a.clickable.ws-chat-status-item.online {
    display: inline-flex;
    align-items: center;
    padding-inline-start: 6px;
    padding-inline-end: 12px;
    padding-block: 2px;
    background-color: #D5F5DC;
    border-radius: 50px;
    color: var(--color-text-success);
    gap: 2px;
    text-decoration: none;
}

    a.clickable.ws-chat-status-item.online i.ci-pazar.ci-message.ci-color-muted:before {
        background-image: url("../../Content/Images/ci-pazar-success.svg") !important;
    }

/* #endregion Chat Button */
.filter-checkbox {
    padding-right: 20px;
    display: inline-block;
}

*[dir='rtl'] .filter-checkbox {
    padding-left: 20px;
    padding-right: 0px;
}

.filter-checkbox input {
    vertical-align: baseline !important;
}

.filter-checkbox label {
    width: auto;
    vertical-align: top !important;
    padding-top: 4px !important;
}

.mobile .filter-checkbox label {
    padding-top: 0px !important;
}

.search-page {
    margin-top: 15px;
}

.row.row-listing.new {
    margin: 0px;
}

    .row.row-listing.new .span2-ad-img-list.first-span {
        width: 27%;
        padding: 0px;
        margin: 0px;
    }

    .row.row-listing.new .span-col-title {
        width: 73%;
        padding: 0px;
        margin: 0px;
        padding-right: 20px;
        padding-bottom: 10px;
    }

*[dir='rtl'] .row.row-listing.new .span-col-title {
    width: 73%;
    padding: 0px;
    margin: 0px;
    padding-right: 0px;
    padding-left: 20px;
    padding-bottom: 10px;
}

.row.row-listing.new .span2-ad-img-list.first-span > .span2-ad-img-list {
    margin-left: 8px;
}

*[dir='rtl'] .row.row-listing.new .span2-ad-img-list.first-span > .span2-ad-img-list {
    margin-left: 0px;
    margin-right: 8px;
}

.row.row-listing .list-btns .badge-trusted-seller {
    position: static;
    margin-inline-start: 10px;
}


.card-body .m-0 .badge-trusted-seller {
    display: none;
}

.listing-hashtags-area {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10px;
}

    .listing-hashtags-area .tag {
        display: inline-block;
        position: relative;
        border-radius: var(--radius-4);
        padding: 4px 10px 4px 10px;
        text-decoration: none;
        background-color: #E6F4ED;
        font-weight: 400 !important;
        color: var(--color-text-basic);
        cursor: pointer;
        font-size: 12px;
        vertical-align: top;
    }

@media (max-width: 400px) {
    .card-body.pt-0 .badge-trusted-seller {
        display: none;
    }

    .card-body .m-0 .badge-trusted-seller {
        display: inline-block;
    }
}

.goodssearch-item-content {
    display: flex;
    margin-block-start: 10px;
}

    .goodssearch-item-content .left-side {
        width: 100%;
        padding-inline-end: 20px;
    }

    .goodssearch-item-content .right-side {
        display: flex;
        flex-direction: column;
        align-items: end;
    }

.mobile .btn.btn-primary.ad-search {
    color: #ffffff;
}

.search-page .category-tree a h3 {
    color: var(--color-text-muted);
    font-weight: 500;
    line-height: 150% !important;
    font-size: 14px !important;
}

.search-page .category-tree .active a h3 {
    color: var(--color-text-basic) !important;
    padding-block: var(--gap-4) !important;
    transition: color 0.3s ease;
}

.search-page .category-tree a:hover {
    text-decoration: none;
    opacity: 1;
}

    .search-page .category-tree a:hover h3 {
        color: var(--color-text-basic);
        transition: color 0.3s ease;
    }

.search-page .popularSearch a,
.search-page .recommendedSearch a {
    display: inline-flex !important;
    color: var(--color-text-basic);
    font-weight: 500 !important;
    font-size: 14px;
    background-color: var(--color-bg-panel);
    justify-content: center;
    align-items: center;
    padding-inline: var(--gap-12);
    padding-block: var(--gap-8);
    border-radius: var(--radius-8);
    transition: background-color 0.3s ease;
    margin-inline-end: var(--gap-4);
    margin-block-end: var(--gap-8);
    line-height: 100%;
}

    .search-page .popularSearch a:hover,
    .search-page .recommendedSearch a:hover {
        text-decoration: none;
        background: var(--color-bg-panel-selected);
        opacity: 1;
        transition: background-color 0.3s ease;
    }


.search-page .popularSearch .nav.nav-tabs,
.search-page .recommendedSearch .nav.nav-tabs,
.search-page .relatedSearches .nav.nav-tabs,
.search-page .category-tree .nav.nav-tabs {
    border-bottom: 0px none transparent;
    padding-block-start: var(--gap-32);
    padding-block-end: var(--gap-16);
}

    .search-page .popularSearch .nav.nav-tabs a,
    .search-page .recommendedSearch .nav.nav-tabs a,
    .search-page .relatedSearches .nav.nav-tabs a,
    .search-page .category-tree .nav.nav-tabs a {
        border: 0px;
        padding: 0px;
        background: transparent;
        font-size: 20px;
        color: var(--color-text-basic) !important;
        font-weight: 700 !important;
        line-height: 130%;
    }

.search-page .recommendedSearch p {
    border: 0px;
    padding: 0px;
    background: transparent;
    font-size: 20px;
    color: var(--color-text-basic) !important;
    font-weight: 700 !important;
    padding-block-end: var(--gap-16);
    padding-block-start: var(--gap-32);
    margin-block-end: var(--gap-12);
}

.search-page .popularSearch .nav.nav-tabs .ci-margin-l-5,
*[dir='rtl'] .search-page .popularSearch .nav.nav-tabs .ci-margin-l-5,
.search-page .recommendedSearch .nav.nav-tabs .ci-margin-l-5,
*[dir='rtl'] .search-page .recommendedSearch .nav.nav-tabs .ci-margin-l-5,
.search-page .relatedSearches .nav.nav-tabs .ci-margin-l-5,
*[dir='rtl'] .search-page .relatedSearches .nav.nav-tabs .ci-margin-l-5,
.search-page .category-tree .nav.nav-tabs .ci-margin-l-5,
*[dir='rtl'] .search-page .category-tree .nav.nav-tabs .ci-margin-l-5 {
    margin: 0px !important;
}

.search-page .relatedSearches .relatedSearchesColumns a {
    color: var(--color-text-basic);
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
}

.search-page .relatedSearches .relatedSearchesColumns b {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 14px;
    padding-inline-start: var(--gap-4) !important;
}

.search-page .category-tree {
    margin-block-end: var(--gap-64);
}

.search-page .popularSearch,
.search-page .recommendedSearch,
.search-page .relatedSearches {
    margin-block-end: var(--gap-24);
}

.search-page .relatedSearchesColumns {
    padding-block-start: var(--gap-4) !important;
}

.teads-adCall {
    width: 100%;
}
/* #region Gallery */
img.cover {
    object-fit: cover !important;
}
/* #endregion Gallery */
/* #region Mobile */
.mobile .search-page .result-content {
    border: 0px none transparent;
}



.mobile .search-page .ShimmeredBlockAds .span9 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-16);
    padding-block: var(--gap-16);
}

.mobile .search-page .video-carousel-container {
    border: 0px none transparent;
    padding-inline: var(--gap-12);
}

.mobile .search-page .search-item .caption span.ci-valign-middle {
    color: var(--color-text-basic);
    font-weight: 400;
    font-size: 14px;
    font-family: 'Manrope';
}

.mobile .search-page .search-item {
    border: 0px none transparent !important;
    display: flex;
    border-radius: var(--radius-16);
    overflow: hidden;
    width: calc(50% - var(--gap-8)) !important;
    height: auto;
    flex-direction: column;
    box-shadow: 0px 1px 2px var(--color-shade-300);
}

.mobile .listing-page .search-item:first-child {
    width: calc(50% - var(--gap-8)) !important;
}

.mobile .search-page .result-content > .row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
    padding-inline: var(--gap-12);
    border: 0px none transparent;
}

.mobile .search-page .search-item .caption {
    line-height: 130%;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    white-space: normal !important;
    padding-block-start: var(--gap-8);
    width: 90%;
}

.mobile .listing-page .search-item .description label,
*[dir='rtl'] .mobile .listing-page .search-item .description label {
    border-radius: var(--radius-16);
    inset-inline-start: var(--gap-8) !important;
    inset-block-start: var(--gap-8) !important;
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-alt) !important;
    right: auto !important;
    z-index: 30;
}

.mobile .listing-page .top-positioned .search-item, .mobile .listing-page .top-positioned .search-item.colored {
    background-color: var(--color-bg-inputs-solid) !important;
}

.mobile .listing-page .search-item.colored {
    background-color: var(--color-bg-warning-light) !important;
}

.mobile .search-page a.clickable.ws-chat-status-item.online span {
    display: none !important;
}

.mobile .search-page .btn-save-ad {
    position: absolute;
    inset-block-start: var(--gap-8) !important;
    inset-inline-end: var(--gap-8) !important;
    background-color: var(--color-bg-main) !important;
    border-radius: var(--radius-circle);
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    z-index: 30;
}

.mobile .search-page .search-item .ws-chat-status-item.offline {
    position: absolute;
    inset-block-end: var(--gap-8);
    display: flex;
    width: 40px;
    height: 40px;
    background-color: var(--color-bg-inputs-transparent) !important;
    border-radius: var(--radius-circle);
    justify-content: center;
    align-items: center;
    inset-inline-start: var(--gap-8) !important;
    margin: 0px !important;
}

.mobile .search-page .search-item .ws-chat-status-item.online {
    position: absolute;
    inset-block-end: var(--gap-8);
    inset-inline-start: var(--gap-8) !important;
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0px !important;
    justify-content: center;
    align-items: center;
    margin: 0px !important;
}

.mobile .search-page .search-item .date {
    position: absolute;
    inset-inline-end: var(--gap-8);
    inset-block-end: var(--gap-8);
    padding: 0px !important;
    line-height: 100%;
    color: var(--color-text-muted);
    opacity: 1 !important;
}

.mobile .listing-page .search-item .description .price {
    color: var(--color-text-basic) !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-weight: 700;
    vertical-align: middle !important;
    line-height: 100%;
    padding-block-start: var(--gap-8);
    display: flex !important;
    font-family: 'Manrope';
}

    .mobile .listing-page .search-item .description .price span:nth-child(2) {
        color: var(--color-text-muted);
        font-weight: 500;
    }

.mobile .search-page .search-item .price picture {
    display: block;
    margin-block-start: -3px;
}

.mobile .listing-page .search-item .photo {
    border-radius: var(--radius-12) !important;
    overflow: hidden;
}

.mobile .search-page .search-item .cargo-icon,
*[dir='rtl'] .mobile .search-page .search-item .cargo-icon {
    inset-inline-start: var(--gap-8) !important;
    inset-block-end: var(--gap-8);
}

.mobile .search-page .popularSearch, .mobile .search-page .recommendedSearch, .mobile .search-page .relatedSearches {
    padding-inline: var(--gap-12);
}

    .mobile .search-page .category-tree .nav.nav-tabs,
    .mobile .search-page .popularSearch .nav.nav-tabs,
    .mobile .search-page .recommendedSearch .nav.nav-tabs,
    .mobile .search-page .relatedSearches .nav.nav-tabs {
        margin-block: 0px;
    }

/* #region Save search */
.new_watch.save-search-block {
    background-image: none;
    padding: 0px;
    margin-block: var(--gap-8) var(--gap-16);
}

    .new_watch.save-search-block .save-search {
        display: inline-flex;
        align-items: center;
        gap: var(--gap-8);
        padding: 10px 16px;
        border: 1px solid var(--color-border-basic);
        border-radius: var(--radius-32);
        background-color: var(--color-bg-main);
        color: var(--color-text-basic);
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        text-decoration: none;
        -webkit-transition: background-color 0.2s ease, border-color 0.2s ease;
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }

        .new_watch.save-search-block .save-search i {
            font-size: 18px;
        }

@media (hover: hover) {
    .new_watch.save-search-block .save-search:hover {
        background-color: var(--color-bg-panel);
        border-color: var(--color-border-dark);
        text-decoration: none;
    }
}

.mobile .search-page .new_watch {
    background-image: none;
}

    .mobile .search-page .new_watch.save-search-block {
        width: 100% !important;
        padding-inline: var(--gap-12);
        padding-block-end: var(--gap-24);
        margin-block: var(--gap-8) 0px;
    }

        .mobile .search-page .new_watch.save-search-block .save-search {
            display: flex;
            width: 100%;
            justify-content: center;
            padding-block: 14px;
            border-radius: var(--radius-12);
        }
/* #endregion Save search */

.mobile .search-page h1.form-inline {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 130% !important;
    padding-inline: var(--gap-12) !important;
}

i.ci-pazar.ci-heart.ci-color-muted.ci-a-glyph-heart-filled.ci-a-color-danger.reg-promotion.img-to-save.ci-size-30 {
    position: absolute;
    inset-block-start: var(--gap-8);
    inset-inline-end: var(--gap-8);
    background-color: var(--color-bg-main);
    width: 40px;
    height: 40px;
    border: 5px solid transparent;
    border-radius: var(--radius-circle);
    z-index: 30;
}


.mobile .search-page .search-item .mobile-goods-photo,
.mobile .search-page .search-item .ShimmeredImgBlock {
    width: 100%;
}

    .mobile .search-page .search-item .ShimmeredImgBlock img,
    .mobile .search-page .search-item .mobile-goods-photo img {
        width: 100%;
        height: 100%;
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        filter: brightness(0.96);
    }

.mobile .search-page .top-positioned .search-item:nth-child(3) {
    display: none;
}

.mobile .search-page .nav.nav-count,
.mobile .search-page .nav.nav-sort {
    display: none;
}

.mobile .search-page .nav.nav-sort {
    float: none !important;
    clear: both;
    width: 100%;
    padding-inline: var(--gap-4);
}

    .mobile .search-page .nav.nav-sort .active a {
        color: var(--color-text-primary);
    }

    .mobile .search-page .nav.nav-sort a {
        color: var(--color-text-muted);
        font-size: 16px;
        font-family: 'Manrope';
        font-weight: 700;
    }

.mobile .search-page .groups-count {
    border: 0px none transparent;
    padding-inline: var(--gap-12);
    display: none;
    flex-wrap: nowrap;
    gap: var(--gap-8);
    overflow-x: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .mobile .search-page .groups-count::-webkit-scrollbar {
        display: none;
    }

    .mobile .search-page .groups-count .more-links, .mobile .search-page .groups-count div {
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: var(--radius-8);
        border: 0px none transparent;
        padding: 0px;
        flex-shrink: 0;
    }

        .mobile .search-page .groups-count .more-links a, .mobile .search-page .groups-count div a {
            background-color: var(--color-bg-panel-transparent);
            color: var(--color-text-basic);
            display: inline-block;
            font-size: 14px;
            font-weight: 700 !important;
            line-height: 100%;
            padding-inline: var(--gap-16);
            padding-block: var(--gap-24);
            transition: background-color 0.2s ease;
        }

            .mobile .search-page .groups-count .more-links a, .mobile .search-page .groups-count div a:hover {
                background-color: var(--color-bg-inputs-transparent);
                transition: background-color 0.2s ease;
            }

.mobile .search-page .ShimmerBlockMobileAds {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-16);
}

    .mobile .search-page .ShimmerBlockMobileAds .search-goods-item {
        width: calc(50% - var(--gap-8));
        display: flex;
        flex-direction: column;
        margin-block-end: var(--gap-24);
    }

.mobile .ShimmerBlockMobileAds .search-goods-item .image-block {
    width: 100%;
    height: 260px;
}

.mobile .ShimmerBlockMobileAds .search-goods-item .text-side {
    width: 100%;
}

.mobile .listing-page .search-item .btn-save-ad-signin {
    inset-block-start: var(--gap-8);
    position: absolute;
    z-index: 11;
    inset-inline-end: var(--gap-8);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-bg-main);
    border-radius: var(--radius-circle);
    width: 40px;
    height: 40px;
}

.mobile .search-page .breadcrumb {
    border-bottom: 0px none transparent;
    border-left: 0px none transparent;
    border-right: 0px none transparent;
    display: none;
    white-space: nowrap;
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: center;
    padding-inline: 0px;
    margin-block-start: var(--gap-12);
}

    .mobile .search-page .breadcrumb li {
        border: 0px;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .mobile .search-page .breadcrumb li:before {
            width: 1px;
            height: 100%;
            background: transparent;
            content: "/";
            color: var(--color-text-muted);
            display: block;
            position: static;
        }

        .mobile .search-page .breadcrumb li:first-child:before {
            display: none;
        }

        .mobile .search-page .breadcrumb li:after {
            display: none;
        }

    .mobile .search-page .breadcrumb a {
        font-size: 14px;
        font-weight: 400 !important;
        color: var(--color-text-muted);
        padding-inline: var(--gap-0);
        padding-block: var(--gap-8);
        border-radius: var(--radius-8);
        display: inline-block;
        margin-inline: var(--gap-12);
    }

.search-page .mobile-maincategories {
    display: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: var(--gap-8);
    padding-inline: var(--gap-12);
    margin-block-start: var(--gap-8);
}

.mobile .search-page .mobile-maincategories {
    display: flex;
}

    .mobile .search-page .mobile-maincategories a {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: var(--radius-8);
        background-color: var(--color-bg-panel-transparent);
        width: auto;
        min-width: 100px;
        height: auto;
        flex-shrink: 0;
        text-decoration: none;
        color: var(--color-text-basic);
        padding: var(--gap-12);
        gap: var(--gap-4);
    }

        .mobile .search-page .mobile-maincategories a i {
            font-size: 40px;
        }

        .mobile .search-page .mobile-maincategories a span {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 14px;
            font-weight: 700;
            white-space: nowrap;
        }


.search-page .mobile-subcategories {
    display: none;
    width: 100%;
    gap: var(--gap-8);
    overflow: hidden;
    margin-block-start: var(--gap-8);
    padding-inline: var(--gap-12);
}

.mobile .search-page .mobile-subcategories {
    display: flex;
}

.search-page .mobile-subcategories .subcategories-list {
    display: flex;
    width: 100%;
    gap: var(--gap-8);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
}

    .search-page .mobile-subcategories .subcategories-list a {
        background-color: var(--color-bg-panel-transparent);
        color: var(--color-text-basic);
        display: flex;
        font-size: 14px;
        font-weight: 700 !important;
        line-height: 130%;
        align-items: center;
        padding-inline: var(--gap-16);
        transition: background-color 0.2s ease;
        text-decoration: none;
        border-radius: var(--radius-8);
    }

        .search-page .mobile-subcategories .subcategories-list a span {
            white-space: nowrap;
            display: inline-block;
            max-width: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.search-page .mobile-subcategories .btn-level-up {
    display: flex;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    font-size: 24px;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    text-decoration: none;
    border-radius: var(--radius-8);
    background-color: var(--color-bg-panel-transparent);
}

.mobile-adslisting-filters {
    display: none;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding-inline: var(--gap-12);
    gap: var(--gap-12);
}

.mobile .mobile-adslisting-filters {
    display: flex;
}

.mobile-adslisting-filters select {
    display: flex !important;
    border: 1px solid transparent;
    box-shadow: none;
    outline: none;
    color: var(--color-text-basic);
    background-color: var(--color-bg-panel-transparent);
    border-radius: var(--radius-8);
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 130%;
    height: 40px;
    width: 50%;
    max-width: 100%;
    margin-bottom: 0px;
    padding-inline: var(--gap-16) !important;
    background-position: right 16px center;
}

*[dir='rtl'] .mobile-adslisting-filters select {
    background-position: left 16px center;
}

.mobile-adslisting-filters select option {
    font-size: 16px;
}
/* #endregion Mobile */
/* #endregion ================================= /Ads Listing ========================================= */
/* #region ==================================== Saved Searches ======================================= */
.saved-searches-page .bootstrap4.list-group.list-group-horizontal.page-switcher {
    overflow-x: auto;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}


/* #endregion ================================/ Saved Searches ======================================= */
/* #region ======================================== My Ads =========================================== */
.user-settings .row.less-right-menu h1 {
    color: var(--color-text-basic);
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 30px;
    padding-left: 8px;
    padding-right: 8px;
}

.myads-page h1 {
    font-size: 24px;
    font-weight: 400;
    margin-top: 30px;
}

.myads-page .page-header {
    display: block;
    width: 100%;
    clear: both;
    float: none;
    margin-top: 10px;
    margin-bottom: 20px;
}

    .myads-page .page-header:after {
        display: block;
        width: 0px;
        height: 0px;
        content: '';
        clear: both;
        float: none;
    }

    .myads-page .page-header .left-side {
        float: left;
    }

*[dir='rtl'] .myads-page .page-header .left-side {
    float: right;
}

.myads-page .page-header .right-side {
    float: right;
    width: 300px;
}

*[dir='rtl'] .myads-page .page-header .right-side {
    float: left;
}

.myads-page .page-header .right-side .search-btn {
    display: none;
    font-size: 32px;
    border: 0px none transparent;
    background: transparent;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 0px;
}

/* #region Page navmenu */
.myads-page .page-header .list-group {
    border-radius: var(--radius-0) !important;
}

.myads-page .page-header .list-group-item {
    border: 0px none transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-0) !important;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    white-space: nowrap;
}

*[dir='rtl'] .myads-page .page-header .list-group-item {
    margin-right: 0px;
}

.myads-page .page-header .list-group-item:hover {
    background-color: transparent;
}

.myads-page .page-header .list-group-item + .list-group-item {
    margin-inline-start: 30px !important;
    flex-shrink: 0;
    flex-basis: content;
}

.myads-page .page-header .list-group-item.active {
    background-color: transparent;
    border-bottom: 2px solid var(--color-border-primary);
    color: var(--color-text-basic);
    border-radius: var(--radius-0);
    margin-left: 0px;
    white-space: nowrap;
}

*[dir='rtl'] .myads-page .page-header .list-group-item.active {
    margin-left: 0px;
    margin-right: 0px;
}

.myads-page .page-header .list-group-item span {
    text-transform: uppercase;
    white-space: nowrap;
}

    .myads-page .page-header .list-group-item span:first-child {
        font-weight: bold;
    }

    .myads-page .page-header .list-group-item span:last-child {
        font-weight: 400;
        padding-left: 5px;
    }

*[dir='rtl'] .myads-page .page-header .list-group-item span:last-child {
    padding-right: 5px;
    padding-left: 0px;
}

.btn-sorting.shimm-item {
    width: 44px;
    border-radius: var(--radius-4) !important;
}

.checkbox.checkbox-alternate i.shimm-item, .checkbox-inline.checkbox-alternate i.shimm-item {
    border: none;
}

@media (max-width: 500px) {
    .myads-page .page-header .list-group-item span {
        font-size: 11px;
    }

    .myads-page .page-header .list-group-item + .list-group-item {
        margin-left: 15px !important;
    }

    *[dir='rtl'] .myads-page .page-header .list-group-item + .list-group-item {
        margin-left: 0px !important;
        margin-right: 15px !important;
    }

    .myads-page .page-header .right-side .search-btn {
        padding-top: 3px;
        padding-bottom: 5px;
    }
}

@media (max-width: 400px) {
    .myads-page .page-header .list-group-item span:last-child {
        display: none;
    }

    .myads-page .page-header .list-group-item + .list-group-item {
        margin-left: 10px !important;
    }

    *[dir='rtl'] .myads-page .page-header .list-group-item + .list-group-item {
        margin-left: 0px !important;
        margin-right: 10px !important;
    }
}


/* #endregion Page navmenu */

@media (max-width: 991px) {
    .myads-page h1 {
        font-size: 24px;
        font-weight: 700;
        margin-top: 20px;
    }

    .myads-page .page-header {
        margin-top: 10px;
        margin-bottom: 20px;
    }

        .myads-page .page-header .right-side {
            width: 230px;
        }
}

@media (max-width: 767px) {
    .myads-page .page-header .right-side {
        width: auto;
    }

        .myads-page .page-header .right-side .textbox {
            display: none;
        }

        .myads-page .page-header .right-side .search-btn {
            display: inline-block;
        }
}

@media (max-width: 450px) {
    .myads-page .page-header {
        margin-top: 10px;
        margin-bottom: 20px;
    }
}

.myads-page .tab-pane.active {
    padding-bottom: 100px;
}

/* #region Store Locked */
.myads-page .store-locked-block .clipart-store-locked {
    width: 350px;
    height: 350px;
}

.myads-page .store-locked-block h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 32px;
}

.myads-page .store-locked-block p {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 18px;
    width: 600px;
    margin: 20px auto 30px auto;
}

.myads-page .store-locked-block .controls {
    text-align: center;
    margin-bottom: 80px;
}

.myads-page .store-locked-block .btn-link {
    text-transform: uppercase;
    text-decoration: none;
}

.myads-page .store-locked-block .new-btn + .new-btn {
    margin-left: 20px;
}

*[dir='rtl'] .myads-page .store-locked-block .new-btn + .new-btn {
    margin-left: 0px;
    margin-right: 20px;
}

@media (max-width: 767px) {
    .myads-page .store-locked-block .clipart-store-locked {
        width: 250px;
        height: 250px;
    }

    .myads-page .store-locked-block p {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .myads-page .store-locked-block .controls .new-btn {
        text-align: center;
        margin-bottom: 10px;
        display: block;
        width: auto;
    }

    .myads-page .store-locked-block .new-btn + .new-btn {
        margin-left: 0px;
    }

    *[dir='rtl'] .myads-page .store-locked-block .new-btn + .new-btn {
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media (max-width: 400px) {
    .myads-page .store-locked-block .clipart-store-locked {
        width: 150px;
        height: 150px;
    }

    .myads-page .store-locked-block h2 {
        font-size: 18px;
        font-weight: 600;
        color: var(--color-text-muted);
        text-align: center;
        line-height: 24px;
    }
}

/* #endregion Store Locked */
/* #region Mobile Search */
.mobile-search {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 11;
}

    .mobile-search.active {
        display: block;
    }

    .mobile-search .overlay {
        display: block;
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(0,0,0,0.2);
        backdrop-filter: blur(10px);
    }

    .mobile-search .search-close {
        position: absolute;
        top: 0px;
        right: 0px;
        font-size: 24px;
        border: 0px none transparent;
        padding: 20px;
        background-color: transparent;
        opacity: 1;
        transition: opacity 0.2s ease-in-out;
    }

*[dir='rtl'] .mobile-search .search-close {
    left: 0px;
    right: auto;
}

.mobile-search .search-close:hover {
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
}

.mobile-search .content {
    position: absolute;
    top: calc(50% - 30px);
    width: 500px;
    left: calc(50% - 250px);
}

@media (max-width: 600px) {
    .mobile-search .content {
        width: calc(100% - 40px);
        left: 20px;
    }
}
/* #endregion Mobile Search */

/* #region Empty page */
.clipart-area.no-myads {
    display: block;
    width: 300px;
    height: 300px;
    margin: 40px auto 0px auto;
}

    .clipart-area.no-myads .clipart-cloud-1,
    .clipart-area.no-myads .clipart-cloud-2,
    .clipart-area.no-myads .clipart-cloud-3,
    .clipart-area.no-myads .clipart-cloud-4,
    .clipart-area.no-myads .clipart-cloud-5,
    .clipart-area.no-myads .clipart-cloud-6,
    .clipart-area.no-myads .clipart-cloud-7,
    .clipart-area.no-myads .clipart-cloud-8,
    .clipart-area.no-myads .clipart-cloud-9,
    .clipart-area.no-myads .clipart-cloud-10,
    .clipart-area.no-myads .clipart-cloud-11 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #EBEBEB;
    }

    .clipart-area.no-myads .clipart-cloud-1 {
        width: 25%;
        height: 25%;
        top: 23%;
        left: 10%;
        animation: nomyads-cloud-1 1.2s ease-in-out infinite alternate;
    }

    .clipart-area.no-myads .clipart-cloud-2 {
        width: 35%;
        height: 35%;
        top: 8%;
        left: 23%;
        animation: nomyads-cloud-2 1.4s ease-in-out infinite alternate;
    }

    .clipart-area.no-myads .clipart-cloud-3 {
        width: 20%;
        height: 20%;
        top: 17%;
        left: 48%;
        animation: nomyads-cloud-3 1.2s ease-in-out infinite alternate;
    }

    .clipart-area.no-myads .clipart-cloud-4 {
        width: 40%;
        height: 40%;
        top: 14%;
        left: 53%;
        animation: nomyads-cloud-4 1.3s ease-in-out infinite alternate;
    }

    .clipart-area.no-myads .clipart-cloud-5 {
        width: 28%;
        height: 28%;
        top: 39%;
        left: 69%;
        animation: nomyads-cloud-5 1.1s ease-in-out infinite alternate;
    }

    .clipart-area.no-myads .clipart-cloud-6 {
        width: 30%;
        height: 30%;
        top: 52%;
        left: 58%;
        animation: nomyads-cloud-6 1.2s ease-in-out infinite alternate;
    }

    .clipart-area.no-myads .clipart-cloud-7 {
        width: 45%;
        height: 45%;
        top: 47%;
        left: 27%;
        animation: nomyads-cloud-7 1.3s ease-in-out infinite alternate;
    }

    .clipart-area.no-myads .clipart-cloud-8 {
        width: 20%;
        height: 20%;
        top: 64%;
        left: 16%;
        animation: nomyads-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .clipart-area.no-myads .clipart-cloud-9 {
        width: 30%;
        height: 30%;
        top: 42%;
        left: 12%;
        animation: nomyads-cloud-9 1.2s ease-in-out infinite alternate;
    }

    .clipart-area.no-myads .clipart-cloud-10 {
        width: 22%;
        height: 22%;
        top: 42%;
        left: 3%;
        animation: nomyads-cloud-10 1.1s ease-in-out infinite alternate;
    }

    .clipart-area.no-myads .clipart-cloud-11 {
        width: 45%;
        height: 45%;
        top: 25%;
        left: 29%;
    }

@keyframes nomyads-cloud-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(8%, 8%);
    }
}

@keyframes nomyads-cloud-2 {
    from {
        transform: translate(2%, 6%);
    }

    to {
        transform: translate(-2%, -6%);
    }
}

@keyframes nomyads-cloud-3 {
    from {
        transform: translate(0%, 6%);
    }

    to {
        transform: translate(0%, -6%);
    }
}

@keyframes nomyads-cloud-4 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@keyframes nomyads-cloud-5 {
    from {
        transform: translate(-6%, 0%);
    }

    to {
        transform: translate(6%, 0%);
    }
}

@keyframes nomyads-cloud-6 {
    from {
        transform: translate(4%, 4%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

@keyframes nomyads-cloud-7 {
    from {
        transform: translate(0%, -8%);
    }

    to {
        transform: translate(0%, 8%);
    }
}

@keyframes nomyads-cloud-8 {
    from {
        transform: translate(-8%, 8%);
    }

    to {
        transform: translate(8%, -8%);
    }
}

@keyframes nomyads-cloud-9 {
    from {
        transform: translate(8%, -8%);
    }

    to {
        transform: translate(-8%, 8%);
    }
}

@keyframes nomyads-cloud-10 {
    from {
        transform: translate(10%, 0%);
    }

    to {
        transform: translate(-10%, 0%);
    }
}

.clipart-area.no-myads .clipart-ad-card-1 {
    display: block;
    width: 54%;
    height: 54%;
    top: 10%;
    left: 32%;
    position: absolute;
    background: url('../../Content/Images/MyAds/clipart-ad-card-1.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    transform: rotate(10deg);
    animation: nomyads-adcard-1 1.5s ease-in-out infinite alternate;
}

.clipart-area.no-myads .clipart-ad-card-2 {
    display: block;
    width: 45%;
    height: 45%;
    top: 40%;
    left: 35%;
    position: absolute;
    background: url('../../Content/Images/MyAds/clipart-ad-card-2.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    transform: rotate(-30deg);
    animation: nomyads-adcard-2 1.5s ease-in-out infinite alternate;
}

.clipart-area.no-myads .clipart-ad-card-3 {
    display: block;
    width: 40%;
    height: 40%;
    top: 30%;
    left: 13%;
    position: absolute;
    background: url('../../Content/Images/MyAds/clipart-ad-card-3.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    transform: rotate(-50deg);
    animation: nomyads-adcard-3 1.5s ease-in-out infinite alternate;
}

@keyframes nomyads-adcard-1 {
    from {
        transform: rotate(10deg) scale(1.1);
    }

    to {
        transform: rotate(0deg) scale(0.9);
    }
}

@keyframes nomyads-adcard-2 {
    from {
        transform: rotate(-30deg) scale(1.1);
    }

    to {
        transform: rotate(-20deg) scale(0.9);
    }
}

@keyframes nomyads-adcard-3 {
    from {
        transform: rotate(-50deg) scale(1.1);
    }

    to {
        transform: rotate(-40deg) scale(0.9);
    }
}

.myads-page .empty-area h2 {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
}

.myads-page .empty-area p {
    display: block;
    width: 500px;
    text-align: center;
    font-size: 14px;
    margin: 20px auto 0px auto;
}

@media (max-width: 767px) {
    .myads-page .empty-area p {
        display: block;
        width: 90%;
        text-align: center;
        font-size: 14px;
        margin: 20px auto 0px auto;
    }
}

@media (max-width: 480px) {
    .myads-page .clipart-area.no-myads {
        width: 150px;
        height: 150px;
        margin: 0px auto 0px auto;
    }

    .myads-page .empty-area h2 {
        font-size: 18px;
    }
}
/* #endregion Empty page */

/* #region Empty Search */
.clipart-area.no-search {
    display: block;
    width: 300px;
    height: 300px;
    margin: 40px auto 0px auto;
}

    .clipart-area.no-search .clipart-cloud-1,
    .clipart-area.no-search .clipart-cloud-2,
    .clipart-area.no-search .clipart-cloud-3,
    .clipart-area.no-search .clipart-cloud-4,
    .clipart-area.no-search .clipart-cloud-5,
    .clipart-area.no-search .clipart-cloud-6,
    .clipart-area.no-search .clipart-cloud-7,
    .clipart-area.no-search .clipart-cloud-8,
    .clipart-area.no-search .clipart-cloud-9 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #EBEBEB;
    }

    .clipart-area.no-search .clipart-cloud-1 {
        top: 26%;
        left: 5%;
        width: 17%;
        height: 17%;
        animation: nosearch-cloud-1 1.2s ease-in-out infinite alternate;
    }

    .clipart-area.no-search .clipart-cloud-2 {
        top: 14%;
        left: 15%;
        width: 30%;
        height: 30%;
        animation: nosearch-cloud-2 1.5s ease-in-out infinite alternate;
    }

    .clipart-area.no-search .clipart-cloud-3 {
        top: 3%;
        left: 33%;
        width: 43%;
        height: 43%;
        animation: nosearch-cloud-3 1.3s ease-in-out infinite alternate;
    }

    .clipart-area.no-search .clipart-cloud-4 {
        top: 18%;
        left: 59%;
        width: 35%;
        height: 35%;
        animation: nosearch-cloud-4 1.2s ease-in-out infinite alternate;
    }

    .clipart-area.no-search .clipart-cloud-5 {
        top: 40%;
        left: 78%;
        width: 20%;
        height: 20%;
        animation: nosearch-cloud-5 1.5s ease-in-out infinite alternate;
    }

    .clipart-area.no-search .clipart-cloud-6 {
        top: 40%;
        left: 42%;
        width: 50%;
        height: 50%;
        animation: nosearch-cloud-6 1.3s ease-in-out infinite alternate;
    }

    .clipart-area.no-search .clipart-cloud-7 {
        top: 57%;
        left: 26%;
        width: 40%;
        height: 40%;
        animation: nosearch-cloud-7 1.4s ease-in-out infinite alternate;
    }

    .clipart-area.no-search .clipart-cloud-8 {
        top: 37%;
        left: 1%;
        width: 35%;
        height: 35%;
        animation: nosearch-cloud-8 1.2s ease-in-out infinite alternate;
    }

    .clipart-area.no-search .clipart-cloud-9 {
        top: 22%;
        left: 13%;
        width: 55%;
        height: 55%;
    }

@keyframes nosearch-cloud-1 {
    from {
        transform: translate(-9%, -9%);
    }

    to {
        transform: translate(9%, 9%);
    }
}

@keyframes nosearch-cloud-2 {
    from {
        transform: translate(2%, 10%);
    }

    to {
        transform: translate(-2%, -10%);
    }
}

@keyframes nosearch-cloud-3 {
    from {
        transform: translate(0%, -7%);
    }

    to {
        transform: translate(0%, 7%);
    }
}

@keyframes nosearch-cloud-4 {
    from {
        transform: translate(-2%, 4%);
    }

    to {
        transform: translate(2%, -4%);
    }
}

@keyframes nosearch-cloud-5 {
    from {
        transform: translate(8%, 0%);
    }

    to {
        transform: translate(-8%, 0%);
    }
}

@keyframes nosearch-cloud-6 {
    from {
        transform: translate(6%, 6%);
    }

    to {
        transform: translate(-6%, -6%);
    }
}

@keyframes nosearch-cloud-7 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@keyframes nosearch-cloud-8 {
    from {
        transform: translate(9%, 0%);
    }

    to {
        transform: translate(-4%, 0%);
    }
}

.clipart-area.no-search .clipart-search {
    display: block;
    width: 60%;
    height: 60%;
    top: 30%;
    left: 30%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/MyAds/clipart-search.svg') no-repeat center center transparent;
    background-size: contain;
    animation: nosearch-search 1.5s ease-in-out infinite alternate;
}

@keyframes nosearch-search {
    from {
        transform: scale(0.9);
    }

    to {
        transform: scale(1);
    }
}

.clipart-area.no-search .clipart-microwave {
    display: block;
    position: absolute;
    z-index: 1;
    width: 15%;
    height: 15%;
    top: 18%;
    left: 23%;
    background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-microwave.svg') no-repeat center center transparent;
    background-size: contain;
    animation: nosearch-microwave 1.3s ease-in-out infinite alternate;
}

@keyframes nosearch-microwave {
    from {
        transform: scale(0.9) rotate(-10deg);
    }

    to {
        transform: scale(1.1) rotate(5deg);
    }
}

.clipart-area.no-search .clipart-smartphone {
    display: block;
    position: absolute;
    z-index: 1;
    width: 15%;
    height: 15%;
    top: 48%;
    left: 10%;
    background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-smartphone.svg') no-repeat center center transparent;
    background-size: contain;
    animation: nosearch-smartphone 1.3s ease-in-out infinite alternate;
}

@keyframes nosearch-smartphone {
    from {
        transform: scale(1.1) rotate(5deg);
    }

    to {
        transform: scale(0.9) rotate(-10deg);
    }
}

.clipart-area.no-search .clipart-dress {
    display: block;
    position: absolute;
    z-index: 1;
    width: 15%;
    height: 15%;
    top: 77%;
    left: 34%;
    background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-dress.svg') no-repeat center center transparent;
    background-size: contain;
    animation: nosearch-dress 1.3s ease-in-out infinite alternate;
}

@keyframes nosearch-dress {
    from {
        transform: scale(0.9) rotate(-20deg);
    }

    to {
        transform: scale(1.2) rotate(-10deg);
    }
}

.clipart-area.no-search .clipart-drill {
    display: block;
    position: absolute;
    z-index: 1;
    width: 15%;
    height: 15%;
    top: 43%;
    left: 77%;
    background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-drill.svg') no-repeat center center transparent;
    background-size: contain;
    animation: nosearch-drill 1.3s ease-in-out infinite alternate;
}

@keyframes nosearch-drill {
    from {
        transform: scale(1.1) rotate(30deg);
    }

    to {
        transform: scale(0.8) rotate(50deg);
    }
}

.clipart-area.no-search .clipart-tshirt {
    display: block;
    position: absolute;
    z-index: 1;
    width: 13%;
    height: 13%;
    top: 14%;
    left: 58%;
    background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-tshirt.svg') no-repeat center center transparent;
    background-size: contain;
    animation: nosearch-tshirt 1.3s ease-in-out infinite alternate;
}

@keyframes nosearch-tshirt {
    from {
        transform: scale(0.8) rotate(-10deg);
    }

    to {
        transform: scale(1.1) rotate(20deg);
    }
}

.myads-page .empty-search h2 {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    margin-top: 10px;
}

.myads-page .empty-search p {
    display: block;
    width: 500px;
    text-align: center;
    font-size: 14px;
    margin: 20px auto 0px auto;
}

@media (max-width: 767px) {
    .myads-page .empty-search p {
        display: block;
        width: 90%;
        text-align: center;
        font-size: 14px;
        margin: 20px auto 0px auto;
    }
}

@media (max-width: 480px) {
    .myads-page .clipart-area.no-search {
        width: 150px;
        height: 150px;
        margin: 0px auto 0px auto;
    }

    .myads-page .empty-search h2 {
        font-size: 18px;
    }
}


/* #endregion Empty Search */

/* #region Listing header */
.myads-page .listing-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--color-border-muted);
    padding-bottom: var(--gap-16);
    flex-wrap: nowrap;
}

    .myads-page .listing-header .left-side {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--gap-8);
    }

    .myads-page .listing-header .right-side {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--gap-8);
    }

        .myads-page .listing-header .right-side .select-new {
            min-width: 252px;
            max-width: 350px;
        }

        .myads-page .listing-header .right-side .select .select-button {
            width: 250px;
        }

    .myads-page .listing-header .additional-controls {
        border-inline-start: 1px solid var(--color-border-muted);
        display: inline-block;
        margin-inline-start: var(--gap-8);
        padding-inline-start: var(--gap-8);
    }

        .myads-page .listing-header .additional-controls .btn-link {
            padding: var(--gap-12);
        }

    .myads-page .listing-header .btn-sorting {
        display: flex;
        min-width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        gap: var(--gap-4);
        border: 0px none transparent;
        background-color: transparent;
        flex-shrink: 0;
    }

        .myads-page .listing-header .btn-sorting:hover {
            opacity: 0.6;
            transition: opacity 0.2s ease-in-out;
        }

        .myads-page .listing-header .btn-sorting .marker {
            font-size: 12px;
            color: var(--color-text-alt);
            background-color: var(--color-bg-danger);
            display: flex;
            min-width: 24px;
            height: 24px;
            border-radius: var(--radius-32);
            justify-content: center;
            align-items: center;
            font-weight: 700;
            line-height: 100%;
        }

            .myads-page .listing-header .btn-sorting .marker:empty {
                display: none;
            }

    .myads-page .listing-header .listing-actions.dropup-btn {
        display: none;
        font-size: 24px;
        height: 40px;
        width: 40px;
        border: 0px none transparent !important;
        border-radius: var(--radius-4);
        justify-content: center;
        align-items: center;
        background-color: transparent;
    }

    .myads-page .listing-header .listing-actions {
        display: none;
    }

        .myads-page .listing-header .listing-actions .new-btn {
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 12px;
        }


            .myads-page .listing-header .listing-actions .new-btn i {
                display: block;
                width: 24px;
                height: 2px;
                background-color: var(--color-text-muted);
            }

                .myads-page .listing-header .listing-actions .new-btn i + i {
                    margin-top: 5px;
                }


@media (max-width: 1199px) {
}

@media (max-width: 991px) {
    .myads-page .listing-header .right-side .select,
    .myads-page .listing-header .right-side .select-new {
        display: none;
    }
}

@media (max-width: 450px) {
    .myads-page .listing-header .listing-actions {
        display: inline-block;
    }

        .myads-page .listing-header .listing-actions.dropup-btn {
            display: flex;
        }

    .myads-page .listing-header .checkbox-inline {
        display: none;
    }

    .myads-page .listing-header .additional-controls {
        display: none;
    }
}

/* #endregion Listing header */

/* #region Ad item */

.myads-page .goods-card {
    display: block;
    width: 100%;
    position: relative;
    padding-left: 50px;
    margin-top: 10px;
}

*[dir='rtl'] .myads-page .goods-card {
    padding-left: 0px;
    padding-right: 50px;
}

.myads-page .goods-card > .checkbox {
    display: block;
    position: absolute;
    top: calc(50% - 12px);
    left: 0px;
}

*[dir='rtl'] .myads-page .goods-card > .checkbox {
    right: 0px;
    left: auto;
}

.myads-page .goods-card .goods-panel {
    display: block;
    width: 100%;
    background-color: var(--color-bg-panel);
    border-radius: var(--radius-4);
    position: relative;
    overflow: hidden;
}

    .myads-page .goods-card .goods-panel .main-area {
        font-size: 0px;
        padding: 8px 230px 8px 8px;
    }

*[dir='rtl'] .myads-page .goods-card .goods-panel .main-area {
    padding: 8px 8px 8px 230px;
}

.myads-page .goods-card .goods-panel .main-area {
    display: table;
    width: 100%;
    table-layout: fixed;
}

    .myads-page .goods-card .goods-panel .main-area > div {
        display: table-row;
    }

        .myads-page .goods-card .goods-panel .main-area > div > div {
            display: table-cell;
        }


    .myads-page .goods-card .goods-panel .main-area .left-side,
    .myads-page .goods-card .goods-panel .main-area .right-side {
        font-size: 14px;
        position: relative;
        vertical-align: top;
    }

    .myads-page .goods-card .goods-panel .main-area .left-side {
        background-color: #EBEBEB;
        width: 200px;
        height: 220px;
        border-radius: var(--radius-4);
        overflow: hidden;
    }

.myads-page .goods-card .goods-photo .ci-image {
    position: absolute;
    z-index: 1;
    font-size: 64px;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
}

.myads-page .goods-card .goods-photo img {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.myads-page .goods-card .goods-photo .cargo-icon {
    position: absolute;
    z-index: 1;
    font-size: 32px;
    border-radius: 50%;
    background-color: #FFFFFF;
    padding: 0px;
    bottom: 5px;
    right: 5px;
    height: 42px;
    width: 42px;
    text-align: center;
}

*[dir='rtl'] .myads-page .goods-card .goods-photo .cargo-icon {
    left: 5px;
    right: auto;
}

.myads-page .goods-card .goods-photo .cargo-icon .ci-delivery-truck {
    position: absolute;
    font-size: 32px;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
}

.myads-page .goods-card .goods-photo .pictures-counter {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background-color: rgba(33, 37, 41, 0.8);
    color: #ffffff;
    z-index: 1;
    border-radius: var(--radius-4);
    padding: 3px 6px 3px 3px;
    font-size: 14px;
    font-weight: 700;
}

*[dir='rtl'] .myads-page .goods-card .goods-photo .pictures-counter {
    padding: 3px 3px 3px 6px;
    right: 5px;
    left: auto;
}

.myads-page .goods-card .goods-photo .pictures-counter .ci-images {
    font-size: 32px;
}

.myads-page .goods-card .goods-panel .main-area .right-side {
    width: calc(100% - 200px);
    border-right: 1px solid #DDDDDD;
    padding-left: 15px;
}

*[dir='rtl'] .myads-page .goods-card .goods-panel .main-area .right-side {
    border-right: 0px none transparent;
    border-left: 1px solid #DDDDDD;
    padding-left: 0px;
    padding-right: 20px;
}

.myads-page .goods-card .goods-info-block {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
}

    .myads-page .goods-card .goods-info-block .goods-id {
        padding-right: 20px;
    }

*[dir='rtl'] .myads-page .goods-card .goods-info-block .goods-id {
    padding-right: 0px;
    padding-left: 20px;
}

.myads-page .goods-card .goods-info-block .date-time .date {
    padding-right: 10px;
}

*[dir='rtl'] .myads-page .goods-card .goods-info-block .date-time .date {
    padding-right: 0px;
    padding-left: 10px;
}

.myads-page .goods-card .goods-title-price {
    display: block;
    text-decoration: none;
}

.myads-page .goods-card .goods-title {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 24px;
    font-weight: 400;
    margin-top: 10px;
    padding-right: 10px;
}

*[dir='rtl'] .myads-page .goods-card .goods-title {
    padding-left: 10px;
    padding-right: 0px;
}

.myads-page .goods-card .price {
    font-size: 18px;
    font-weight: 400;
    display: block;
    margin-top: 2px;
    text-align: left;
}

*[dir='rtl'] .myads-page .goods-card .price {
    text-align: right;
}

.myads-page .goods-card .price span + span {
    padding-left: 5px;
}

.myads-page .goods-card .statuses-list {
    margin-top: 18px;
    font-size: 0px;
}

    .myads-page .goods-card .statuses-list .status-item {
        cursor: default;
    }

.myads-page .goods-card .reason {
    font-size: 14px;
    text-align: left;
    margin-top: 10px;
    padding-right: 10px;
}

*[dir='rtl'] .myads-page .goods-card .reason {
    text-align: right;
    padding-left: 10px;
    padding-right: 0px;
}

.myads-page .goods-card .reason span {
    padding-left: 5px;
}

*[dir='rtl'] .myads-page .goods-card .reason span {
    padding-left: 0px;
    padding-right: 5px;
}

.myads-page .goods-card .statistics-area {
    display: block;
    margin-top: 30px;
}

    .myads-page .goods-card .statistics-area .first-group,
    .myads-page .goods-card .statistics-area .second-group {
        display: inline-block;
        vertical-align: top;
    }

    .myads-page .goods-card .statistics-area .statistics-btn {
        display: inline-block;
        vertical-align: top;
        font-size: 32px;
        padding: 5px 5px 5px 5px;
        cursor: pointer;
        margin-right: 10px;
    }

*[dir='rtl'] .myads-page .goods-card .statistics-area .statistics-btn {
    margin-left: 10px;
    margin-right: 0px;
}

.myads-page .goods-card .statistics-area .statistics-btn span {
    display: none;
}


.myads-page .goods-card .statistics-area .statistics-item {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
}

    .myads-page .goods-card .statistics-area .statistics-item span,
    .myads-page .goods-card .statistics-area .statistics-item small {
        display: block;
        text-align: center;
    }

    .myads-page .goods-card .statistics-area .statistics-item span {
        font-size: 20px;
        font-weight: 600;
    }

        .myads-page .goods-card .statistics-area .statistics-item span i {
            font-style: normal;
            padding-left: 5px;
        }

            .myads-page .goods-card .statistics-area .statistics-item span i:empty {
                display: none;
            }

    .myads-page .goods-card .statistics-area .statistics-item small {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        margin-top: 4px;
    }

.myads-page .goods-card .controls-area {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 230px;
    padding: 8px 8px 0px 8px;
}

*[dir='rtl'] .myads-page .goods-card .controls-area {
    right: auto;
    left: 0px;
}

.myads-page .goods-card .controls-area button {
    margin-bottom: 5px;
}

.myads-page .goods-card .controls-area .btn-messages .ci-pazar,
.myads-page .goods-card .controls-area .btn-edit .ci-pazar,
.myads-page .goods-card .controls-area .btn-renew .ci-pazar {
    display: none;
}

.myads-page .goods-card .controls-area .btn-messages {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
}

    .myads-page .goods-card .controls-area .btn-messages .badge {
        font-style: normal;
        background-color: var(--color-bg-alt);
        color: var(--color-text-primary);
        font-weight: 700;
        font-size: 12px;
        border-radius: var(--radius-16);
        margin-right: 5px;
        display: flex;
        min-width: 20px;
        min-height: 20px;
        justify-content: center;
        align-items: center;
    }

.myads-page .goods-card .btn-pay bdi {
    padding-left: 5px;
}

*[dir='rtl'] .myads-page .goods-card .btn-pay bdi {
    padding-left: 0px;
    padding-right: 5px;
}

.myads-page .goods-card .btn-pay bdi span + span {
    padding-left: 3px;
}

.myads-page .goods-card .collapser {
    display: block;
    width: 100%;
    background-color: #F2F2F2;
}

.myads-page .goods-card .collapser-btn {
    position: relative;
    padding: 12px 8px 12px 8px;
    background-color: transparent;
    cursor: pointer;
}

.myads-page .goods-card .collapser.collapsed.services-connected .collapser-btn {
    background-color: #E6F4ED;
}

.myads-page .goods-card .collapser .collapser-btn label small {
    display: none;
}

.myads-page .goods-card .collapser.services-connected .collapser-btn label small {
    display: inline-block;
}

.myads-page .goods-card .collapser-btn label {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.myads-page .goods-card .collapser-btn small {
    font-size: 14px;
    font-weight: 500;
    padding-left: 5px;
}

*[dir='rtl'] .myads-page .goods-card .collapser-btn small {
    padding-right: 5px;
    padding-left: 0px;
}

.myads-page .goods-card .collapser-btn button {
    display: none;
    margin-left: 10px;
    padding: 0px;
}

.myads-page .goods-card .collapser.collapsed .collapser-btn button {
    display: inline-block;
}

*[dir='rtl'] .myads-page .goods-card .collapser-btn button {
    margin-right: 10px;
    margin-left: 0px
}

.myads-page .goods-card .collapser-btn .ci-pazar-small {
    position: absolute;
    font-size: 14px;
    right: 10px;
    top: calc(50% - 7px);
}

*[dir='rtl'] .myads-page .goods-card .collapser-btn .ci-pazar-small {
    right: auto;
    left: 10px;
}

.myads-page .goods-card .collapser.collapsed .collapser-btn .ci-pazar-small {
    transform: rotate(180deg);
}

.myads-page .goods-card .collapser.potential-buyers .purchased {
    padding-inline-start: 5px;
}

.myads-page .goods-card .collapser.potential-buyers .potential {
    padding-inline-start: 5px;
    font-weight: 400;
}

.myads-page .goods-card .collapser.potential-buyers {
    background-color: #f9f9f9;
}

.myads-page .buyers-content .buyers-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0px;
    padding-inline: 20px;
    max-height: 106px;
    overflow: hidden;
}

/* #region Buyer card */

.myads-page .buyer-card {
    border-radius: var(--radius-4);
    background-color: #ffffff;
    width: 330px;
    position: relative;
    font-size: 0px;
    padding: 10px;
    margin-bottom: 10px;
}

    .myads-page .buyer-card .close-btn {
        display: inline-block;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 1;
        border: 0px none transparent;
        background: transparent;
        font-size: 14px;
        outline: none;
        padding: 10px;
        outline: none;
        opacity: 1;
        cursor: pointer;
    }

*[dir='rtl'] .myads-page .buyer-card .close-btn {
    right: auto;
    left: 0px;
}

.myads-page .buyer-card .close-btn:hover {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.myads-page .buyer-card .left-side,
.myads-page .buyer-card .right-side {
    display: inline-block;
    font-size: 14px;
    height: 100%;
    vertical-align: top;
}

.myads-page .buyer-card .left-side {
    width: 90px;
}

.myads-page .buyer-card .right-side {
    width: calc(100% - 90px);
    padding-inline-end: 20px;
    padding-inline-start: 5px;
}

.myads-page .buyer-card .name {
    font-weight: 700;
    font-size: 14px;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 2px;
    padding-bottom: 4px;
}

.myads-page .buyer-card .text-label {
    font-weight: 700;
}

    .myads-page .buyer-card .text-label.success {
        background-color: #D5F5DC;
        color: var(--color-text-success);
    }

    .myads-page .buyer-card .text-label.warning {
        background-color: #FFF9C5;
        color: #F6AD3F;
    }

    .myads-page .buyer-card .text-label.danger {
        background-color: #FBCFCF;
        color: var(--color-text-danger);
    }

.myads-page .buyer-card .contacts {
    padding-top: 5px;
    padding-bottom: 0px;
}

.myads-page .buyer-card .messages {
    font-size: 24px;
    border: 0px none transparent;
    background: transparent;
    position: relative;
    padding: 3px;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    opacity: 1;
    transition: opacity 0.2s ease;
    margin-inline-end: 5px;
}

    .myads-page .buyer-card .messages:hover {
        opacity: 0.6;
        transition: opacity 0.2s ease;
    }

    .myads-page .buyer-card .messages .marker {
        display: none;
        position: absolute;
        top: -1px;
        right: -3px;
        border-radius: 50%;
        background-color: var(--color-bg-danger);
        width: 12px;
        height: 12px;
        border: #ffffff 3px solid;
    }

    .myads-page .buyer-card .messages.active .marker {
        display: block;
    }

.myads-page .buyer-card .phone {
    display: inline-block;
    font-size: 14px;
    color: var(--color-text-basic);
    font-weight: 400;
    text-decoration: none;
    background-color: transparent;
    padding: 4px 6px;
    vertical-align: middle;
}



/* #endregion Buyer card */
.myads-page .goods-card .collapser-content .empty-content {
    padding-left: 8px;
    padding-right: 8px;
}

    .myads-page .goods-card .collapser-content .empty-content h4 {
        font-size: 18px;
        font-weight: 400;
        display: block;
        width: 80%;
        margin: 0px auto;
        text-align: center;
        padding-bottom: 10px;
    }

    .myads-page .goods-card .collapser-content .empty-content p {
        font-size: 14px;
        width: 80%;
        margin: 0px auto;
        text-align: center;
    }

    .myads-page .goods-card .collapser-content .empty-content .controls {
        width: 100%;
        text-align: center;
        padding-top: 30px;
        padding-bottom: 40px;
    }

    .myads-page .goods-card .collapser-content .empty-content .btn-default {
        background-color: #E7E7E7 !important;
    }

    .myads-page .goods-card .collapser-content .empty-content .controls span {
        text-transform: uppercase;
        padding-left: 10px;
        padding-right: 10px;
    }

.myads-page .goods-card .collapser .services-content {
    display: none;
    padding: 10px 20px 20px 20px;
}

.myads-page .goods-card .collapser .empty-content {
    display: block;
}

.myads-page .goods-card .collapser.services-connected .services-content {
    display: block;
}

.myads-page .goods-card .collapser.services-connected .empty-content {
    display: none;
}

.myads-page .goods-card .collapser .indicators-field {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 30px;
}

    .myads-page .goods-card .collapser .indicators-field > * {
        display: table-row;
    }

        .myads-page .goods-card .collapser .indicators-field > * > * {
            display: table-cell;
        }

.myads-page .goods-card .collapser .indicator-item {
    text-align: center;
}

    .myads-page .goods-card .collapser .indicator-item label {
        text-align: center;
        display: block;
        width: 100%;
        color: var(--color-text-basic);
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        margin-top: 10px;
    }

.myads-page .goods-card .services-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 30px;
    margin-bottom: 20px;
}


.myads-page .goods-card .potential-buyers .buyers-content .btn-link {
    text-decoration: none;
    text-transform: uppercase;
}

.myads-page .goods-card .potential-buyers .buyers-content p b,
.myads-page .goods-card .potential-buyers .buyers-content p a {
    padding-inline: 5px;
    white-space: nowrap;
}

.myads-page .goods-card .service-item {
    border-radius: var(--radius-4);
    background-color: #ffffff;
    width: 300px;
}

    .myads-page .goods-card .service-item .header {
        width: 100%;
        padding-inline: 10px;
        padding-block: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text-basic);
        line-height: 16px;
    }

    .myads-page .goods-card .service-item .content {
        width: 100%;
        font-size: 0px;
    }

        .myads-page .goods-card .service-item .content .left-side {
            width: 120px;
            font-size: 14px;
            display: inline-block;
            text-align: center;
            vertical-align: top;
            margin-top: 5px;
            margin-bottom: 20px;
        }

        .myads-page .goods-card .service-item .content .right-side {
            width: calc(100% - 120px);
            display: inline-block;
            font-size: 14px;
            vertical-align: top;
            padding-inline-start: 10px;
        }

    .myads-page .goods-card .service-item .autorenew-details {
        margin-block-start: 10px;
        margin-block-end: 10px;
    }

        .myads-page .goods-card .service-item .autorenew-details span {
            font-size: 12px;
            display: inline-block;
            margin-block-start: 5px;
        }

            .myads-page .goods-card .service-item .autorenew-details span + span {
                padding-inline-start: 10px;
            }

    .myads-page .goods-card .service-item .content .switch-inline {
        margin-block-start: 15px;
        display: inline-block;
    }

    .myads-page .goods-card .service-item .content .extra-days {
        margin-block-start: 10px;
        margin-block-end: 10px;
    }

        .myads-page .goods-card .service-item .content .extra-days a {
            text-decoration: none;
        }

    .myads-page .goods-card .service-item .content .payment-error {
        margin-top: 15px;
        display: none;
        padding-block-end: 10px;
    }

        .myads-page .goods-card .service-item .content .payment-error a {
            padding-left: 0px;
            padding-right: 0px;
            text-decoration: none;
        }

            .myads-page .goods-card .service-item .content .payment-error a + a {
                margin-inline-start: 10px;
            }

    .myads-page .goods-card .service-item.error {
        background-color: rgba(251, 207, 207, 0.3);
    }

        .myads-page .goods-card .service-item.error .payment-error {
            display: block;
        }

        .myads-page .goods-card .service-item.error .autorenew-details,
        .myads-page .goods-card .service-item.error .extra-days,
        .myads-page .goods-card .service-item.error .description {
            display: none;
        }

    .myads-page .goods-card .service-item .subscription {
        margin-block-start: 10px;
        padding-inline-end: 10px;
        margin-block-end: 10px;
    }

@media (max-width: 1199px) {
    .myads-page .buyer-card {
        width: 410px;
    }
}

@media (max-width: 991px) {
    .myads-page .goods-card .services-section {
        gap: 10px;
        margin-bottom: 20px;
    }


    .myads-page .goods-card .service-item {
        width: 290px;
        text-align: left;
    }

    *[dir='rtl'] .myads-page .goods-card .service-item {
        text-align: right;
    }

    .myads-page .goods-card .collapser .service-item .left-side {
        width: 100px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .myads-page .goods-card .collapser .service-item .right-side {
        width: calc(100% - 100px);
        padding-inline-start: 10px;
    }

    .myads-page .buyer-card {
        width: 100%;
    }

    .myads-page .buyers-content .buyers-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0px;
        padding-inline: 20px;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 767px) {
    .myads-page .goods-card .collapser .service-item .circle-progress svg {
        display: none;
    }

    .circle-progress .progress-field {
        border: 0px none transparent;
    }

    .myads-page .goods-card .collapser .service-item {
        width: 100%;
        position: relative;
    }

        .myads-page .goods-card .collapser .service-item .header {
            position: absolute;
            padding-inline-start: 100px;
        }

        .myads-page .goods-card .collapser .service-item .left-side {
            width: 100px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .myads-page .goods-card .collapser .service-item .right-side {
            margin-top: 20px;
            width: calc(100% - 100px);
            padding-inline-start: 0px;
        }

    .myads-page .goods-card .collapser.potential-buyers .empty-content h4 {
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }

    .myads-page .goods-card .collapser.potential-buyers .empty-content .btn-primary {
        font-size: 12px !important;
        padding: 15px 20px;
    }
}

@media (max-width: 400px) {
    .myads-page .buyer-card .left-side {
        display: none;
    }

    .myads-page .buyer-card .right-side {
        width: 100%;
    }
}

.myads-page .goods-card .collapser .services-content p {
    display: block;
    text-align: center;
    margin: 0px;
    padding-bottom: 5px;
}

    .myads-page .goods-card .collapser .services-content p .btn-link {
        padding: 0px;
    }

.myads-page .goods-card .collapser .services-content .word-divider,
.vip-user .myads-page .goods-card .collapser .services-content .word-divider,
.vip-user .myads-page .goods-card .collapser .services-content .upgrade-account {
    display: none;
}

.myads-page .goods-card .notification {
    font-size: 0px;
}

    .myads-page .goods-card .notification .left-side,
    .myads-page .goods-card .notification .right-side {
        font-size: 14px;
        display: inline-block;
        vertical-align: top;
    }

    .myads-page .goods-card .notification .left-side {
        text-align: left;
        width: calc(100% - 200px);
        padding: 12px 0px 12px 8px;
    }

*[dir='rtl'] .myads-page .goods-card .notification .left-side {
    text-align: right;
    padding: 12px 8px 12px 0px;
}

.myads-page .goods-card .notification .right-side {
    text-align: right;
    width: 200px;
    padding: 0px 8px 0px 0px;
}

*[dir='rtl'] .myads-page .goods-card .notification .right-side {
    padding: 0px 0px 0px 8px;
    text-align: left;
}

.myads-page .goods-card .notification.success {
    background-color: #D5F5DC;
}

.myads-page .goods-card .notification.warning {
    background-color: #FFF9C5;
}

.myads-page .goods-card .notification.danger {
    background-color: #FBCFCF;
}

.myads-page .mobile-bottom-controls.my-ads {
    display: none;
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    background-color: rgba(255,255,255,0);
    padding: 15px 15px 15px 15px;
    z-index: 999;
    text-align: center;
}

.myads-selected .myads-page .mobile-bottom-controls.my-ads .actions-btn {
    background-color: #FFFFFF;
    box-shadow: rgba(0,0,0, 0.3) 0px 0px 18px;
}

    .myads-selected .myads-page .mobile-bottom-controls.my-ads .actions-btn span {
        display: inline-block;
        vertical-align: middle;
    }

        .myads-selected .myads-page .mobile-bottom-controls.my-ads .actions-btn span:first-child {
            width: 15px;
            margin-right: 10px;
        }

*[dir='rtl'] .myads-selected .myads-page .mobile-bottom-controls.my-ads .actions-btn span:first-child {
    margin-left: 10px;
    margin-right: 0px;
}

.myads-selected .myads-page .mobile-bottom-controls.my-ads .actions-btn i {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #FFFFFF;
    margin-top: 4px;
}

    .myads-selected .myads-page .mobile-bottom-controls.my-ads .actions-btn i:first-child {
        margin-top: 0px;
    }


@media (max-width: 1199px) {
    .myads-page .goods-card .controls-area {
        width: 180px;
    }

    .myads-page .goods-card .goods-panel .main-area {
        padding: 8px 180px 8px 8px;
    }

    *[dir='rtl'] .myads-page .goods-card .goods-panel .main-area {
        padding: 8px 8px 8px 180px;
    }

    .myads-page .goods-card .collapser .indicator-item label {
        font-size: 12px;
    }
}

@media (max-width: 991px) {
    .myads-page .goods-card .goods-panel .main-area,
    *[dir='rtl'] .myads-page .goods-card .goods-panel .main-area {
        padding: 8px 8px 8px 8px;
    }

        .myads-page .goods-card .goods-panel .main-area .left-side {
            width: 150px;
        }

        .myads-page .goods-card .goods-panel .main-area .right-side,
        *[dir='rtl'] .myads-page .goods-card .goods-panel .main-area .right-side {
            width: calc(100% - 150px);
            border: 0px none transparent;
        }


    .myads-page .goods-card .reason {
        padding-right: 0px;
    }

    *[dir='rtl'] .myads-page .goods-card .reason {
        padding-right: 0px;
        margin-left: 0px;
    }

    .myads-page .goods-card .controls-area {
        display: block;
        position: static;
        width: 100%;
        padding: 8px 8px 8px 8px;
    }

    .myads-page .goods-card .collapser-content .empty-content h4 {
        padding-top: 20px;
    }

    .myads-page .goods-card > .checkbox {
        top: 0px;
    }

    .myads-page .goods-card .controls-area .btn-messages {
        display: inline-flex;
        width: auto !important;
        min-width: 50px;
        height: 50px;
        border-radius: var(--radius-8);
        justify-content: center;
        align-items: center;
        padding: 0px;
        margin: 0px;
        gap: var(--gap-0);
        padding-inline: var(--gap-4);
    }

    .myads-page .goods-card .controls-area .btn-primary,
    .myads-page .goods-card .controls-area .btn-renew,
    .myads-page .goods-card .controls-area .btn-publish,
    .myads-page .goods-card .controls-area .btn-pay,
    .myads-page .goods-card .controls-area .btn-edit,
    .myads-page .goods-card .controls-area .btn-renew {
        display: inline-flex;
        width: 50px;
        height: 50px;
        border-radius: var(--radius-8);
        justify-content: center;
        align-items: center;
        padding: 0px;
        margin: 0px;
    }

        .myads-page .goods-card .controls-area .btn-primary span:last-child {
            display: none;
        }

        .myads-page .goods-card .controls-area .btn-primary .ci-rocket {
            font-size: 32px;
            position: relative;
            top: auto;
            left: auto;
            right: auto;
        }

        .myads-page .goods-card .controls-area .btn-pay bdi {
            display: none;
        }

    .myads-page .goods-card .controls-area .btn-messages .badge {
        margin-right: 3px;
        margin-left: 3px;
    }


    *[dir='rtl'] .myads-page .goods-card .controls-area .btn-messages .badge {
        margin-right: 3px;
        margin-left: 3px;
    }

    .myads-page .goods-card .controls-area .btn-messages span:last-child,
    .myads-page .goods-card .controls-area .btn-edit span:last-child,
    .myads-page .goods-card .controls-area .btn-renew span:last-child {
        display: none;
    }

    .myads-page .goods-card .controls-area .btn-messages .ci-pazar,
    .myads-page .goods-card .controls-area .btn-edit .ci-pazar,
    .myads-page .goods-card .controls-area .btn-renew .ci-pazar {
        display: inline-block;
        font-size: 32px;
    }

    .myads-page .goods-card .controls-area .btn-link {
        display: inline-block;
        width: auto;
        vertical-align: top;
        margin: 0px;
        float: right;
    }

    *[dir='rtl'] .myads-page .goods-card .controls-area .btn-link {
        float: left;
    }

    .myads-page .goods-card .collapser .circle-progress {
        width: 80px;
        height: 80px;
    }

    .myads-page .goods-card .collapser .services-content {
        text-align: center;
    }

        .myads-page .goods-card .collapser .services-content .word-divider,
        .myads-page .goods-card .collapser .services-content p {
            display: inline-block;
            padding-left: 5px;
            padding-right: 5px;
        }

            .myads-page .goods-card .collapser .services-content p span {
                display: none;
            }
}

@media (max-width: 767px) {
    .myads-page .goods-card .goods-panel .main-area,
    .myads-page .goods-card .goods-panel .main-area > div,
    .myads-page .goods-card .goods-panel .main-area > div > div {
        display: block;
        width: 100%;
    }

    .myads-page .goods-card .goods-panel .main-area,
    *[dir='rtl'] .myads-page .goods-card .goods-panel .main-area {
        padding: 8px 8px 8px 8px;
    }

        .myads-page .goods-card .goods-panel .main-area .left-side {
            width: 100%;
        }

        .myads-page .goods-card .goods-panel .main-area .right-side, *[dir='rtl'] .myads-page .goods-card .goods-panel .main-area .right-side {
            width: 100%;
            padding: 0px;
        }

        .myads-page .goods-card .goods-panel .main-area .left-side {
            height: 300px;
        }

        .myads-page .goods-card .goods-panel .main-area .right-side .goods-info-block .goods-id {
            display: block;
            position: absolute;
            top: -294px;
            left: 5px;
            z-index: 1;
            color: #FFFFFF;
            font-size: 14px;
            font-weight: 700;
            background-color: rgba(33,37,41,0.8);
            padding: 5px 8px 5px 8px;
            border-radius: var(--radius-4);
        }

        *[dir='rtl'] .myads-page .goods-card .goods-panel .main-area .right-side .goods-info-block .goods-id {
            right: 5px;
            left: auto;
        }

        .myads-page .goods-card .goods-panel .main-area .right-side,
        *[dir='rtl'] .myads-page .goods-card .goods-panel .main-area .right-side {
            padding-top: 10px;
            padding-bottom: 10px;
        }

            .myads-page .goods-card .goods-panel .main-area .right-side .goods-title-price h3 {
                margin-top: 0px;
            }

    .myads-page .goods-card .statistics-area .statistics-item {
        padding-left: 5px;
        padding-right: 5px;
    }

    .myads-page .goods-card .notification .right-side {
        width: 100%;
    }

        .myads-page .goods-card .notification .right-side .btn-link {
            padding-top: 0px;
        }

    .myads-page .goods-card .notification .left-side,
    *[dir='rtl'] .myads-page .goods-card .notification .left-side {
        width: 100%;
        padding: 12px 8px 12px 8px;
    }

    .myads-page .goods-card .collapser-content .empty-content .controls .new-btn {
        display: block;
        margin: 0px auto;
        width: 80%;
    }

        .myads-page .goods-card .collapser-content .empty-content .controls .new-btn:first-child {
            margin-bottom: 5px;
        }

    .myads-page .goods-card .collapser-content .empty-content .controls span {
        display: none;
    }

    .myads-page .goods-card .collapser .indicators-field {
        display: block
    }

        .myads-page .goods-card .collapser .indicators-field > * {
            display: block;
        }

            .myads-page .goods-card .collapser .indicators-field > * > * {
                display: block;
                width: 100%;
                border-bottom: 1px solid #E9E9E9;
            }

        .myads-page .goods-card .collapser .indicators-field .indicator-item:first-child {
            border-top: 1px solid #E9E9E9;
        }

        .myads-page .goods-card .collapser .indicators-field .indicator-item {
            position: relative;
        }

        .myads-page .goods-card .collapser .indicators-field .circle-progress svg,
        .myads-page .goods-card .collapser .indicators-field .circle-progress .progress-field {
            display: none;
        }

        .myads-page .goods-card .collapser .indicators-field .circle-progress {
            position: absolute;
            top: calc(50% - 35px);
            right: 0px;
            z-index: 1;
        }

    *[dir='rtl'] .myads-page .goods-card .collapser .indicators-field .circle-progress {
        left: 0px;
        right: auto;
    }

    .myads-page .goods-card .collapser .circle-progress {
        width: 70px;
        height: 70px;
        border-radius: 50%;
    }

        .myads-page .goods-card .collapser .circle-progress.success {
            background-color: #d7efe3;
        }

        .myads-page .goods-card .collapser .circle-progress.warning {
            background-color: #FFF9C5;
        }

        .myads-page .goods-card .collapser .circle-progress.danger {
            background-color: #FBCFCF;
        }

    .myads-page .goods-card .collapser .indicator-item label {
        display: block;
        text-align: left;
        padding-top: 35px;
        padding-bottom: 35px;
        margin-top: 0px;
        font-size: 18px;
        text-transform: none;
        font-weight: 400;
        color: var(--color-text-muted);
        padding-right: 100px;
    }

    *[dir='rtl'] .myads-page .goods-card .collapser .indicator-item label {
        text-align: right;
        padding-left: 100px;
        padding-right: 0px;
    }

    .myads-page .goods-card .collapser .services-content {
        padding-top: 0px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 25px;
    }
}

@media (max-width: 500px) {
    .myads-selected .myads-page .mobile-bottom-controls.my-ads {
        display: block;
    }

    .vip-services-user-banner,
    .vip-services-store-banner {
        padding-left: 0px !important;
    }

    *[dir='rtl'] .vip-services-user-banner,
    *[dir='rtl'] .vip-services-store-banner {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .vip-services-user-banner:after,
    .vip-services-store-banner:after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background-color: #F2F2F2;
        margin-top: 13px;
        margin-bottom: 13px;
    }



    .myads-page .goods-card {
        display: block;
        padding-left: 0px;
        padding-top: 45px;
        border-top: 1px solid #F2F2F2;
        margin-top: 20px;
    }

    *[dir='rtl'] .myads-page .goods-card {
        padding-right: 0px;
        padding-left: 0px;
    }

    .myads-page .goods-card .checkbox-alternate {
        top: 10px;
    }

    .myads-page .goods-card:first-child {
        padding-left: 0px;
        padding-top: 35px;
        border-top: 0px none transparent;
        margin-top: 10px;
    }

    *[dir='rtl'] .myads-page .goods-card:first-child {
        padding-left: 0px;
        padding-right: 0px;
    }

    .myads-page .goods-card:first-child .checkbox-alternate {
        top: 0px !important;
    }
}

@media (max-width: 450px) {
    .myads-page .goods-card .goods-panel .main-area .left-side {
        height: 200px;
    }

    .myads-page .goods-card .goods-panel .main-area .right-side .goods-info-block .goods-id {
        top: -195px;
        left: 5px;
    }

    .myads-page .goods-card .goods-panel .main-area .right-side .goods-title-price h3 {
        font-size: 18px;
        font-weight: 700;
        margin-top: 5px;
    }

    .myads-page .goods-card .statistics-area .first-group,
    .myads-page .goods-card .statistics-area .second-group {
        display: block;
        width: 100%;
        font-size: 0px;
        margin-bottom: 10px;
    }

    .myads-page .goods-card .statistics-area .statistics-item {
        width: 33.3%;
        font-size: 14px;
        text-align: center;
    }

    .myads-page .goods-card .statistics-area .statistics-btn,
    *[dir='rtl'] .myads-page .goods-card .statistics-area .statistics-btn {
        width: 33.3%;
        margin: 0px;
        padding: 0px;
        background-color: transparent !important;
    }

        .myads-page .goods-card .statistics-area .statistics-btn span {
            display: block;
            font-size: 10px;
            font-weight: 700;
        }

    .myads-page .goods-card .statistics-area .statistics-item bdi b {
        line-height: 28px;
    }

    .myads-page .goods-card .collapser.collapsed .collapser-btn button {
        display: none;
    }

    .myads-page .goods-card .controls-area .new-btn {
        display: block;
        width: 100%;
        padding: 13px 5px 13px 5px;
        margin-bottom: 5px;
    }

        .myads-page .goods-card .controls-area .new-btn .ci-pazar {
            display: none;
        }

    .myads-page .goods-card .controls-area .btn-messages span:last-child {
        display: inline-block;
        padding-left: 5px;
    }

    *[dir='rtl'] .myads-page .goods-card .controls-area .btn-messages span:last-child {
        padding-left: 0px;
        padding-right: 5px;
    }

    .myads-page .goods-card .controls-area .btn-edit span:last-child,
    .myads-page .goods-card .controls-area .btn-renew span:last-child {
        display: inline-block;
    }

    .myads-page .goods-card .collapser .services-content .word-divider,
    .myads-page .goods-card .collapser .services-content p {
        display: block;
        padding-left: 5px;
        padding-right: 5px;
    }


    .myads-page .goods-card .controls-area .btn-primary.btn-messages {
        display: flex;
        width: 100% !important;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .myads-page .goods-card .controls-area .btn-primary span,
    .myads-page .goods-card .controls-area .btn-primary span:last-child {
        display: inline-block;
    }

    .myads-page .goods-card .controls-area .btn-primary.btn-messages i {
        position: absolute;
        inset-inline-start: var(--gap-16);
        inset-block-start: 50%;
        transform: translateY(-50%);
        display: flex;
    }
}

@media (max-width: 400px) {
    .myads-page .goods-card .collapser-content .empty-content h4,
    .myads-page .goods-card .collapser-content .empty-content p,
    .myads-page .goods-card .collapser-content .empty-content .controls .new-btn {
        width: 90%;
    }
}

/* #endregion Ad item */
/* #region MODAL: Unpublish-Remove ads */
.modal-custom.unpublish-1ad .modal-window,
.modal-custom.unpublish-multiple-ads .modal-window,
.modal-custom.remove-multiple-ads .modal-window {
    width: 700px;
    left: calc(50% - 350px);
    top: calc(50% - 260px);
}

.modal-custom.remove-1ad .modal-window {
    width: 700px;
    left: calc(50% - 350px);
    top: calc(50% - 220px);
}

.modal-custom.unpublish-1ad .inner-container,
.modal-custom.unpublish-multiple-ads .inner-container,
.modal-custom.remove-1ad .inner-container,
.modal-custom.remove-multiple-ads .inner-container {
    display: block;
    width: 600px;
    margin: 0px auto 0px auto;
}

.modal-custom.unpublish-1ad .ad-card-block,
.modal-custom.remove-1ad .ad-card-block {
    display: block;
    width: 100%;
    background-color: #F9F9F9;
    font-size: 0px;
    border-radius: var(--radius-4);
    padding: 8px;
    margin-top: 10px;
}

.modal-custom.remove-1ad .ad-card-block {
    margin-bottom: 40px;
}

    .modal-custom.unpublish-1ad .ad-card-block .left-side,
    .modal-custom.unpublish-1ad .ad-card-block .right-side,
    .modal-custom.remove-1ad .ad-card-block .left-side,
    .modal-custom.remove-1ad .ad-card-block .right-side {
        font-size: 14px;
        display: inline-block;
        vertical-align: top;
    }

    .modal-custom.unpublish-1ad .ad-card-block .ad-image,
    .modal-custom.remove-1ad .ad-card-block .ad-image {
        width: 100px;
        height: 100px;
        border-radius: var(--radius-4);
        position: relative;
        background-color: #EBEBEB;
        overflow: hidden;
    }

        .modal-custom.unpublish-1ad .ad-card-block .ad-image .ci-pazar,
        .modal-custom.remove-1ad .ad-card-block .ad-image .ci-pazar,
        .modal-custom.remove-multiple-ads .ad-card-block .ad-image .ci-pazar {
            font-size: 48px;
            position: absolute;
            top: calc(50% - 24px);
            left: calc(50% - 24px);
            z-index: 1;
        }

        .modal-custom.unpublish-1ad .ad-card-block .ad-image img,
        .modal-custom.remove-1ad .ad-card-block .ad-image img,
        .modal-custom.remove-multiple-ads .ad-card-block .ad-image img {
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100%;
            object-position: center center;
        }

    .modal-custom.unpublish-1ad .ad-card-block .right-side,
    .modal-custom.remove-1ad .ad-card-block .right-side {
        padding-left: 15px;
        width: calc(100% - 100px);
    }

*[dir='rtl'] .modal-custom.unpublish-1ad .ad-card-block .right-side,
*[dir='rtl'] .modal-custom.remove-1ad .ad-card-block .right-side {
    padding-left: 0px;
    padding-right: 15px;
}

.modal-custom.unpublish-1ad .ad-card-block .right-side h4 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-custom.unpublish-multiple-ads h5 {
    display: block;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    width: 100%;
    margin-top: 20px;
}

.modal-custom.unpublish-multiple-ads .modal-body span {
    display: block;
    width: auto;
}

.modal-custom.unpublish-multiple-ads p {
    display: block;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.modal-custom.unpublish-1ad .ad-card-block .right-side bdi,
.modal-custom.remove-1ad .ad-card-block .right-side bdi {
    display: block;
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: 400;
    line-height: 24px;
    text-align: left;
}

*[dir='rtl'] .modal-custom.unpublish-1ad .ad-card-block .right-side bdi,
*[dir='rtl'] .modal-custom.remove-1ad .ad-card-block .right-side bdi {
    text-align: right;
}

.modal-custom.unpublish-1ad .ad-card-block .right-side bdi span:last-child,
.modal-custom.remove-1ad .ad-card-block .right-side bdi span:last-child {
    margin-left: 5px;
}

.modal-custom .statuses-list {
    margin-top: 10px;
    font-size: 0px;
}

.modal-custom.unpublish-1ad p {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    margin-top: 20px;
}

.modal-custom.unpublish-1ad h5 {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    margin-top: 40px;
}

.modal-custom.remove-1ad h5 {
    font-weight: 400;
    font-size: 24px;
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
}

.modal-custom.remove-1ad p {
    font-weight: 400;
    font-size: 18px;
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
}

.modal-custom.remove-multiple-ads h5 {
    font-weight: 400;
    font-size: 24px;
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.modal-custom.remove-multiple-ads p {
    font-weight: 400;
    font-size: 18px;
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 40px;
}

.modal-custom.remove-multiple-ads .clipart-area {
    display: block;
    width: 250px;
    height: 250px;
    margin: 0px auto 0px auto;
}

    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-1,
    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-2,
    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-3,
    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-4,
    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-5,
    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-6,
    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-7,
    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-8,
    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-9 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #EBEBEB;
    }

    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-1 {
        top: 24%;
        left: 9%;
        width: 20%;
        height: 20%;
        animation: clipart-remove-ads-cloud-1 1.2s ease-in-out infinite alternate;
    }

    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-2 {
        top: 17%;
        left: 22%;
        width: 28%;
        height: 28%;
        animation: clipart-remove-ads-cloud-2 1.5s ease-in-out infinite alternate;
    }

    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-3 {
        top: 6%;
        left: 38%;
        width: 27%;
        height: 27%;
        animation: clipart-remove-ads-cloud-3 1.4s ease-in-out infinite alternate;
    }

    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-4 {
        top: 17%;
        left: 48%;
        width: 40%;
        height: 40%;
        animation: clipart-remove-ads-cloud-4 1.3s ease-in-out infinite alternate;
    }

    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-5 {
        top: 35%;
        left: 59%;
        width: 40%;
        height: 40%;
        animation: clipart-remove-ads-cloud-5 1.3s ease-in-out infinite alternate;
    }

    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-6 {
        top: 59%;
        left: 48%;
        width: 34%;
        height: 34%;
        animation: clipart-remove-ads-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-7 {
        top: 57%;
        left: 18%;
        width: 38%;
        height: 38%;
        animation: clipart-remove-ads-cloud-7 1.3s ease-in-out infinite alternate;
    }

    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-8 {
        top: 29%;
        left: 2%;
        width: 48%;
        height: 48%;
        animation: clipart-remove-ads-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-cloud-9 {
        top: 29%;
        left: 21%;
        width: 55%;
        height: 55%;
    }


@keyframes clipart-remove-ads-cloud-1 {
    from {
        transform: translate(-7%, -7%);
    }

    to {
        transform: translate(7%, 7%);
    }
}

@keyframes clipart-remove-ads-cloud-2 {
    from {
        transform: translate(4%, 8%);
    }

    to {
        transform: translate(-4%, -8%);
    }
}

@keyframes clipart-remove-ads-cloud-3 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 9%);
    }
}

@keyframes clipart-remove-ads-cloud-4 {
    from {
        transform: translate(-2%, 5%);
    }

    to {
        transform: translate(2%, -9%);
    }
}

@keyframes clipart-remove-ads-cloud-5 {
    from {
        transform: translate(5%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

@keyframes clipart-remove-ads-cloud-6 {
    from {
        transform: translate(-3%, -7%);
    }

    to {
        transform: translate(3%, 7%);
    }
}

@keyframes clipart-remove-ads-cloud-7 {
    from {
        transform: translate(-3%, 7%);
    }

    to {
        transform: translate(3%, -7%);
    }
}

@keyframes clipart-remove-ads-cloud-8 {
    from {
        transform: translate(5%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

.modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-trashcan {
    display: block;
    width: 40%;
    height: 40%;
    position: absolute;
    z-index: 1;
    top: 48%;
    left: 26%;
    background: url('../../Content/Images/MyAds/clipart-trashcan.svg') no-repeat center center transparent;
    background-size: contain;
}

.modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-shadow {
    display: block;
    width: 40%;
    height: 5%;
    position: absolute;
    z-index: 1;
    top: 82%;
    left: 26%;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
}

.modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-ad-card-1 {
    display: block;
    width: 14%;
    height: 14%;
    position: absolute;
    z-index: 1;
    top: 38%;
    left: 48%;
    background: url('../../Content/Images/MyAds/clipart-ad-card-3.svg') no-repeat center center transparent;
    background-size: contain;
    transform: rotate(334deg);
    animation: clipart-remove-ads-card-1 1.4s ease-in-out infinite alternate;
}

.modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-ad-card-2 {
    display: block;
    width: 19%;
    height: 19%;
    position: absolute;
    z-index: 1;
    top: 26%;
    left: 46%;
    background: url('../../Content/Images/MyAds/clipart-ad-card-2.svg') no-repeat center center transparent;
    background-size: contain;
    transform: rotate(19deg);
    animation: clipart-remove-ads-card-2 1.4s ease-in-out infinite alternate;
}


.modal-custom.remove-multiple-ads .clipart-area.remove-ads .clipart-ad-card-3 {
    display: block;
    width: 23%;
    height: 23%;
    position: absolute;
    z-index: 1;
    top: 10%;
    left: 38%;
    background: url('../../Content/Images/MyAds/clipart-ad-card-1.svg') no-repeat center center transparent;
    background-size: contain;
    transform: rotate(351deg);
    animation: clipart-remove-ads-card-3 1.4s ease-in-out infinite alternate;
}

@keyframes clipart-remove-ads-card-1 {
    from {
        transform: translate(0%, -30%) rotate(334deg) scale(1.3);
    }

    to {
        transform: translate(0%, 30%) rotate(320deg) scale(0.8);
    }
}

@keyframes clipart-remove-ads-card-2 {
    from {
        transform: translate(0%, -10%) rotate(19deg) scale(1.3);
    }

    to {
        transform: translate(0%, 50%) rotate(35deg) scale(0.8);
    }
}

@keyframes clipart-remove-ads-card-3 {
    from {
        transform: translate(0%, -5%) rotate(351deg) scale(1.3);
    }

    to {
        transform: translate(0%, 70%) rotate(320deg) scale(0.8);
    }
}


.modal-custom.unpublish-1ad .radio-selector,
.modal-custom.unpublish-multiple-ads .radio-selector {
    display: block;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

    .modal-custom.unpublish-1ad .radio-selector label,
    .modal-custom.unpublish-multiple-ads .radio-selector label {
        display: inline-block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        cursor: pointer;
    }

        .modal-custom.unpublish-1ad .radio-selector label input[type='radio'],
        .modal-custom.unpublish-multiple-ads .radio-selector label input[type='radio'] {
            display: none;
        }

        .modal-custom.unpublish-1ad .radio-selector label span,
        .modal-custom.unpublish-multiple-ads .radio-selector label span {
            display: flex;
            width: 100%;
            height: 100%;
            background-color: var(--color-bg-inputs-transparent);
            align-items: center;
            justify-content: center;
        }

        .modal-custom.unpublish-1ad .radio-selector label input[type='radio']:checked + span,
        .modal-custom.unpublish-multiple-ads .radio-selector label input[type='radio']:checked + span {
            background-color: var(--color-bg-success-light);
        }

        .modal-custom.unpublish-1ad .radio-selector label small,
        .modal-custom.unpublish-multiple-ads .radio-selector label small {
            display: block;
            width: 100%;
            font-size: 24px;
            text-transform: uppercase;
            text-align: center;
            top: calc(50% - 12px);
            left: 0px;
            color: var(--color-text-basic);
            font-weight: 500;
        }

        .modal-custom.unpublish-1ad .radio-selector label input[type='radio']:checked + span small,
        .modal-custom.unpublish-multiple-ads .radio-selector label input[type='radio']:checked + span small {
            color: var(--color-text-primary);
        }

        .modal-custom.unpublish-1ad .radio-selector label + label,
        .modal-custom.unpublish-multiple-ads .radio-selector label + label {
            margin-left: 100px;
        }

*[dir='rtl'] .modal-custom.unpublish-1ad .radio-selector label + label,
*[dir='rtl'] .modal-custom.unpublish-multiple-ads .radio-selector label + label {
    margin-left: 0px;
    margin-right: 100px;
}

@media (max-height: 570px) {
    .modal-custom.unpublish-1ad .modal-window,
    .modal-custom.unpublish-multiple-ads .modal-window,
    .modal-custom.remove-1ad .modal-window,
    .modal-custom.remove-multiple-ads .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.unpublish-1ad .modal-header,
    .modal-custom.unpublish-multiple-ads .modal-header,
    .modal-custom.remove-1ad .modal-header,
    .modal-custom.remove-multiple-ads .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.unpublish-1ad .modal-body,
    .modal-custom.unpublish-multiple-ads .modal-body,
    .modal-custom.remove-1ad .modal-body,
    .modal-custom.remove-multiple-ads .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.unpublish-1ad .modal-content,
    .modal-custom.unpublish-multiple-ads .modal-content,
    .modal-custom.remove-1ad .modal-content,
    .modal-custom.remove-multiple-ads .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.unpublish-1ad .modal-footer,
    .modal-custom.unpublish-multiple-ads .modal-footer,
    .modal-custom.remove-ad .modal-footer,
    .modal-custom.remove-multiple-ads .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }
}

@media (max-width: 728px) {
    .modal-custom.unpublish-1ad .modal-window,
    .modal-custom.unpublish-multiple-ads .modal-window,
    .modal-custom.remove-1ad .modal-window,
    .modal-custom.remove-multiple-ads .modal-window {
        max-width: 100%;
        top: 0px;
    }
}

@media (max-width: 650px) {
    .modal-custom.unpublish-1ad .inner-container,
    .modal-custom.unpublish-multiple-ads .inner-container,
    .modal-custom.remove-1ad .inner-container,
    .modal-custom.remove-multiple-ads .inner-container {
        display: block;
        width: calc(100% - 40px);
        margin: 0px auto 0px auto;
    }
}

@media (max-width: 450px) {
    .modal-custom.unpublish-1ad .inner-container,
    .modal-custom.unpublish-multiple-ads .inner-container,
    .modal-custom.remove-1ad .inner-container,
    .modal-custom.remove-multiple-ads .inner-container {
        display: block;
        width: calc(100% - 20px);
        margin: 0px auto 0px auto;
    }

    .modal-custom.unpublish-1ad .radio-selector label + label,
    .modal-custom.unpublish-multiple-ads .radio-selector label + label {
        margin-left: 50px;
    }

    *[dir='rtl'] .modal-custom.unpublish-1ad .radio-selector label + label,
    *[dir='rtl'] .modal-custom.unpublish-multiple-ads .radio-selector label + label {
        margin-left: 0px;
        margin-right: 50px;
    }

    .modal-custom.unpublish-1ad .modal-footer .new-btn,
    .modal-custom.unpublish-multiple-ads .modal-footer .new-btn,
    .modal-custom.remove-1ad .modal-footer .new-btn,
    .modal-custom.remove-multiple-ads .modal-footer .new-btn {
        min-width: 0px;
        width: auto;
    }


    .modal-custom.remove-1ad h5 {
        margin-top: 10px;
    }


    .modal-custom.remove-multiple-ads .clipart-area {
        display: block;
        width: 200px;
        height: 200px;
        margin: 0px auto 0px auto;
    }
}

@media (max-width: 400px) {
    .modal-custom.unpublish-1ad .ad-card-block .left-side,
    .modal-custom.remove-1ad .ad-card-block .left-side {
        display: none;
    }

    .modal-custom.unpublish-1ad .ad-card-block .right-side,
    .modal-custom.remove-1ad .ad-card-block .right-side {
        width: 100%;
        padding-left: 0px;
    }

    *[dir='rtl'] .modal-custom.unpublish-1ad .ad-card-block .right-side,
    *[dir='rtl'] .modal-custom.remove-1ad .ad-card-block .right-side {
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal-custom.remove-multiple-ads .clipart-area {
        display: block;
        width: 150px;
        height: 150px;
        margin: 0px auto 0px auto;
    }

    .modal-custom.remove-multiple-ads h5 {
        font-size: 18px;
    }

    .modal-custom.remove-multiple-ads p {
        font-size: 14px;
    }
}

@media (max-width: 319px) {
    .modal-custom.unpublish-1ad .radio-selector label + label,
    .modal-custom.unpublish-multiple-ads .radio-selector label + label {
        margin-left: 20px;
    }

    *[dir='rtl'] .modal-custom.unpublish-1ad .radio-selector label + label,
    *[dir='rtl'] .modal-custom.unpublish-multiple-ads .radio-selector label + label {
        margin-left: 0px;
        margin-right: 20px;
    }
}

/* #endregion MODAL: Unpublish-Remove ads */
/* #region MODAL: Boost the Ad */
.modal-custom.boost-ad .modal-window {
    width: 750px;
    left: calc(50% - 375px);
    top: calc(50% - 560px);
}

.modal-custom.boost-ad .inner-container {
    width: 720px;
    margin: 0px auto 0px auto;
}

.modal-custom.boost-ad .modal-content {
    max-height: 1000px;
}

.modal-custom.boost-ad .item {
    display: block;
    width: 100%;
    position: relative;
}

    .modal-custom.boost-ad .item + .item {
        margin-top: 10px;
    }

    .modal-custom.boost-ad .item .panel {
        border-radius: var(--radius-4);
        background-color: #F2F2F2;
        font-size: 0px;
        padding: 10px 10px 10px 70px;
        cursor: pointer;
    }

*[dir='rtl'] .modal-custom.boost-ad .item .panel {
    padding: 10px 70px 10px 10px;
}

.modal-custom.boost-ad .item .panel .left-side {
    font-size: 14px;
    display: inline-block;
    width: calc(100% - 110px);
    vertical-align: middle;
    padding-right: 20px;
}

*[dir='rtl'] .modal-custom.boost-ad .item .panel .left-side {
    padding-right: 0px;
    padding-left: 20px;
}

.modal-custom.boost-ad .item .panel .right-side {
    font-size: 14px;
    display: inline-block;
    width: 110px;
    height: 110px;
    vertical-align: middle;
}

.modal-custom.boost-ad .item input[type='checkbox'] {
    display: none;
}

    .modal-custom.boost-ad .item input[type='checkbox']:checked + .panel {
        background-color: #E6F4ED;
    }

.modal-custom.boost-ad .item .checkbox {
    display: block;
    font-size: 14px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-4);
    border: 2px solid #C5C5C5;
    position: absolute;
    top: calc(50% - 12px);
    left: 23px;
}

*[dir='rtl'] .modal-custom.boost-ad .item .checkbox {
    left: auto;
    right: 23px;
}

.modal-custom.boost-ad .item .checkbox i {
    font-size: 14px;
    position: absolute;
    top: calc(50% - 7px);
    left: calc(50% - 7px);
    z-index: 1;
    display: none;
}

.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .checkbox {
    background-color: var(--color-bg-primary);
    border: 2px solid var(--color-border-primary);
}

    .modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .checkbox i {
        display: block;
    }

.modal-custom.boost-ad .item .title {
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: 700;
}

.modal-custom.boost-ad .item .autorenew-switch {
    display: block;
    margin-block-start: 5px;
    margin-block-end: 20px;
}

.modal-custom.boost-ad .item .description {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    padding-top: 10px;
    padding-bottom: 10px;
}

.modal-custom.boost-ad .item .price-area {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
}

    .modal-custom.boost-ad .item .price-area bdi span + span {
        padding-left: 3px;
    }


.modal-custom.boost-ad .item .clipart-area .clipart-cloud-1,
.modal-custom.boost-ad .item .clipart-area .clipart-cloud-2,
.modal-custom.boost-ad .item .clipart-area .clipart-cloud-3,
.modal-custom.boost-ad .item .clipart-area .clipart-cloud-4,
.modal-custom.boost-ad .item .clipart-area .clipart-cloud-5,
.modal-custom.boost-ad .item .clipart-area .clipart-cloud-6,
.modal-custom.boost-ad .item .clipart-area .clipart-cloud-7,
.modal-custom.boost-ad .item .clipart-area .clipart-cloud-8,
.modal-custom.boost-ad .item .clipart-area .clipart-cloud-9,
.modal-custom.boost-ad .item .clipart-area .clipart-cloud-10,
.modal-custom.boost-ad .item .clipart-area .clipart-cloud-11,
.modal-custom.boost-ad .item .clipart-area .cloud-1,
.modal-custom.boost-ad .item .clipart-area .cloud-2,
.modal-custom.boost-ad .item .clipart-area .cloud-3,
.modal-custom.boost-ad .item .clipart-area .cloud-4,
.modal-custom.boost-ad .item .clipart-area .cloud-5,
.modal-custom.boost-ad .item .clipart-area .cloud-6,
.modal-custom.boost-ad .item .clipart-area .cloud-7,
.modal-custom.boost-ad .item .clipart-area .cloud-8,
.modal-custom.boost-ad .item .clipart-area .cloud-9,
.modal-custom.boost-ad .item .clipart-area .cloud-10 {
    display: block;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background-color: #FFFFFF;
}

.modal-custom.boost-ad .item .clipart-area.gallery .clipart-cloud-1 {
    top: 5%;
    left: 11%;
    width: 50%;
    height: 50%;
    animation: clipart-boost-modal-gallery-cloud-1 1.3s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.gallery .clipart-cloud-2 {
    top: 3%;
    left: 50%;
    width: 30%;
    height: 30%;
    animation: clipart-boost-modal-gallery-cloud-2 1.4s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.gallery .clipart-cloud-3 {
    top: 13%;
    left: 45%;
    width: 55%;
    height: 55%;
    animation: clipart-boost-modal-gallery-cloud-3 1.5s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.gallery .clipart-cloud-4 {
    top: 52%;
    left: 52%;
    width: 45%;
    height: 45%;
    animation: clipart-boost-modal-gallery-cloud-4 1.2s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.gallery .clipart-cloud-5 {
    top: 44%;
    left: 14%;
    width: 50%;
    height: 50%;
    animation: clipart-boost-modal-gallery-cloud-5 1.5s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.gallery .clipart-cloud-6 {
    top: 36%;
    left: 0%;
    width: 30%;
    height: 30%;
    animation: clipart-boost-modal-gallery-cloud-6 1.4s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.gallery .clipart-cloud-7 {
    top: 20%;
    left: 24%;
    width: 60%;
    height: 60%;
}

@keyframes clipart-boost-modal-gallery-cloud-1 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(9%, 9%);
    }
}

@keyframes clipart-boost-modal-gallery-cloud-2 {
    from {
        transform: translate(-2%, 10%);
    }

    to {
        transform: translate(2%, 0%);
    }
}

@keyframes clipart-boost-modal-gallery-cloud-3 {
    from {
        transform: translate(0%, -4%);
    }

    to {
        transform: translate(-9%, 4%);
    }
}

@keyframes clipart-boost-modal-gallery-cloud-4 {
    from {
        transform: translate(-9%, -4%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes clipart-boost-modal-gallery-cloud-5 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(4%, -8%);
    }
}

@keyframes clipart-boost-modal-gallery-cloud-6 {
    from {
        transform: translate(9%, 0%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

.modal-custom.boost-ad .item .clipart-area.gallery .clipart-gallery {
    top: 14%;
    left: 18%;
    width: 70%;
    height: 70%;
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/PaidServices/clipart-gallery.svg') no-repeat center center transparent;
    background-size: contain;
}

.modal-custom.boost-ad .item .clipart-area.gallery .clipart-shadow {
    top: 76%;
    left: 14%;
    width: 80%;
    height: 6%;
    display: block;
    position: absolute;
    z-index: 1;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

.modal-custom.boost-ad .item .clipart-area.special-labeling .clipart-cloud-1 {
    top: 14%;
    left: 2%;
    width: 35%;
    height: 35%;
    animation: clipart-boost-modal-labeling-cloud-1 1.3s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.special-labeling .clipart-cloud-2 {
    top: 5%;
    left: 22%;
    width: 30%;
    height: 30%;
    animation: clipart-boost-modal-labeling-cloud-2 1.5s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.special-labeling .clipart-cloud-3 {
    top: 10%;
    left: 37%;
    width: 30%;
    height: 30%;
    animation: clipart-boost-modal-labeling-cloud-3 1.4s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.special-labeling .clipart-cloud-4 {
    top: 6%;
    left: 51%;
    width: 45%;
    height: 45%;
    animation: clipart-boost-modal-labeling-cloud-4 1.3s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.special-labeling .clipart-cloud-5 {
    top: 31%;
    left: 71%;
    width: 30%;
    height: 30%;
    animation: clipart-boost-modal-labeling-cloud-5 1.4s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.special-labeling .clipart-cloud-6 {
    top: 43%;
    left: 53%;
    width: 40%;
    height: 40%;
    animation: clipart-boost-modal-labeling-cloud-6 1.3s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.special-labeling .clipart-cloud-7 {
    top: 47%;
    left: 34%;
    width: 50%;
    height: 50%;
    animation: clipart-boost-modal-labeling-cloud-7 1.5s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.special-labeling .clipart-cloud-8 {
    top: 57%;
    left: 17%;
    width: 35%;
    height: 35%;
    animation: clipart-boost-modal-labeling-cloud-8 1.4s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.special-labeling .clipart-cloud-9 {
    top: 39%;
    left: 1%;
    width: 40%;
    height: 40%;
    animation: clipart-boost-modal-labeling-cloud-9 1.4s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.special-labeling .clipart-cloud-10 {
    top: 19%;
    left: 19%;
    width: 60%;
    height: 60%;
}


@keyframes clipart-boost-modal-labeling-cloud-1 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(12%, 12%);
    }
}

@keyframes clipart-boost-modal-labeling-cloud-2 {
    from {
        transform: translate(2%, 14%);
    }

    to {
        transform: translate(-2%, 0%);
    }
}

@keyframes clipart-boost-modal-labeling-cloud-3 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, 9%);
    }
}

@keyframes clipart-boost-modal-labeling-cloud-4 {
    from {
        transform: translate(-7%, 7%);
    }

    to {
        transform: translate(3%, 0%);
    }
}

@keyframes clipart-boost-modal-labeling-cloud-5 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(-12%, 0%);
    }
}

@keyframes clipart-boost-modal-labeling-cloud-6 {
    from {
        transform: translate(-10%, -3%);
    }

    to {
        transform: translate(6%, 3%);
    }
}

@keyframes clipart-boost-modal-labeling-cloud-7 {
    from {
        transform: translate(3%, 2%);
    }

    to {
        transform: translate(-4%, -9%);
    }
}

@keyframes clipart-boost-modal-labeling-cloud-8 {
    from {
        transform: translate(4%, -14%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes clipart-boost-modal-labeling-cloud-9 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(9%, 0%);
    }
}

.modal-custom.boost-ad .item .clipart-area.special-labeling .clipart-special-labeling {
    top: 13%;
    left: 19%;
    width: 65%;
    height: 65%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/PaidServices/clipart-highlighting.svg') no-repeat center center transparent;
    background-size: contain;
}

.modal-custom.boost-ad .item .clipart-area.special-labeling .clipart-shadow {
    top: 79%;
    left: 13%;
    width: 80%;
    height: 5%;
    position: absolute;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

.modal-custom.boost-ad .item .clipart-area.top-positioning .clipart-cloud-1 {
    top: 7%;
    left: 10%;
    width: 46%;
    height: 46%;
    animation: clipart-boost-modal-positioning-cloud-1 1.4s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.top-positioning .clipart-cloud-2 {
    top: 12%;
    left: 39%;
    width: 25%;
    height: 25%;
    animation: clipart-boost-modal-positioning-cloud-2 1.3s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.top-positioning .clipart-cloud-3 {
    top: 11%;
    left: 51%;
    width: 38%;
    height: 38%;
    animation: clipart-boost-modal-positioning-cloud-3 1.2s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.top-positioning .clipart-cloud-4 {
    top: 27%;
    left: 70%;
    width: 30%;
    height: 30%;
    animation: clipart-boost-modal-positioning-cloud-4 1.5s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.top-positioning .clipart-cloud-5 {
    top: 34%;
    left: 47%;
    width: 50%;
    height: 50%;
    animation: clipart-boost-modal-positioning-cloud-5 1.3s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.top-positioning .clipart-cloud-6 {
    top: 64%;
    left: 58%;
    width: 30%;
    height: 30%;
    animation: clipart-boost-modal-positioning-cloud-6 1.4s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.top-positioning .clipart-cloud-7 {
    top: 53%;
    left: 34%;
    width: 40%;
    height: 40%;
    animation: clipart-boost-modal-positioning-cloud-7 1.2s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.top-positioning .clipart-cloud-8 {
    top: 63%;
    left: 15%;
    width: 30%;
    height: 30%;
    animation: clipart-boost-modal-positioning-cloud-8 1.4s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.top-positioning .clipart-cloud-9 {
    top: 51%;
    left: 7%;
    width: 30%;
    height: 30%;
    animation: clipart-boost-modal-positioning-cloud-9 1.3s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.top-positioning .clipart-cloud-10 {
    top: 29%;
    left: 0%;
    width: 40%;
    height: 40%;
    animation: clipart-boost-modal-positioning-cloud-10 1.5s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.top-positioning .clipart-cloud-11 {
    top: 19%;
    left: 21%;
    width: 60%;
    height: 60%;
}

@keyframes clipart-boost-modal-positioning-cloud-1 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(12%, 12%);
    }
}

@keyframes clipart-boost-modal-positioning-cloud-2 {
    from {
        transform: translate(0%, 12%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes clipart-boost-modal-positioning-cloud-3 {
    from {
        transform: translate(3%, 0%);
    }

    to {
        transform: translate(-3%, 9%);
    }
}

@keyframes clipart-boost-modal-positioning-cloud-4 {
    from {
        transform: translate(-13%, 3%);
    }

    to {
        transform: translate(0%, -3%);
    }
}

@keyframes clipart-boost-modal-positioning-cloud-5 {
    from {
        transform: translate(0%, -3%);
    }

    to {
        transform: translate(-13%, 3%);
    }
}

@keyframes clipart-boost-modal-positioning-cloud-6 {
    from {
        transform: translate(-14%, -14%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes clipart-boost-modal-positioning-cloud-7 {
    from {
        transform: translate(0%, 4%);
    }

    to {
        transform: translate(0%, -13%);
    }
}

@keyframes clipart-boost-modal-positioning-cloud-8 {
    from {
        transform: translate(8%, -13%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes clipart-boost-modal-positioning-cloud-9 {
    from {
        transform: translate(0%, 3%);
    }

    to {
        transform: translate(8%, -13%);
    }
}

@keyframes clipart-boost-modal-positioning-cloud-10 {
    from {
        transform: translate(8%, 0%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

.modal-custom.boost-ad .item .clipart-area.top-positioning .clipart-top-positioning {
    top: 13%;
    left: 21%;
    width: 70%;
    height: 70%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/PaidServices/clipart-top-positioning.svg') no-repeat center center transparent;
    background-size: contain;
}

.modal-custom.boost-ad .item .clipart-area.top-positioning .clipart-shadow {
    top: 81%;
    left: 13%;
    width: 80%;
    height: 5%;
    position: absolute;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

.modal-custom.boost-ad .item .clipart-area.automatic-renewal .clipart-cloud-1 {
    top: 12%;
    left: 11%;
    width: 30%;
    height: 30%;
    animation: clipart-boost-modal-renewal-cloud-1 1.3s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.automatic-renewal .clipart-cloud-2 {
    top: 5%;
    left: 27%;
    width: 34%;
    height: 34%;
    animation: clipart-boost-modal-renewal-cloud-2 1.5s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.automatic-renewal .clipart-cloud-3 {
    top: 4%;
    left: 45%;
    width: 45%;
    height: 45%;
    animation: clipart-boost-modal-renewal-cloud-3 1.4s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.automatic-renewal .clipart-cloud-4 {
    top: 25%;
    left: 59%;
    width: 40%;
    height: 40%;
    animation: clipart-boost-modal-renewal-cloud-4 1.2s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.automatic-renewal .clipart-cloud-5 {
    top: 41%;
    left: 40%;
    width: 55%;
    height: 55%;
    animation: clipart-boost-modal-renewal-cloud-5 1.3s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.automatic-renewal .clipart-cloud-6 {
    top: 38%;
    left: 13%;
    width: 60%;
    height: 60%;
    animation: clipart-boost-modal-renewal-cloud-6 1.4s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.automatic-renewal .clipart-cloud-7 {
    top: 53%;
    left: 3%;
    width: 28%;
    height: 28%;
    animation: clipart-boost-modal-renewal-cloud-7 1.5s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.automatic-renewal .clipart-cloud-8 {
    top: 23%;
    left: 1%;
    width: 38%;
    height: 38%;
    animation: clipart-boost-modal-renewal-cloud-8 1.3s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.automatic-renewal .clipart-cloud-9 {
    top: 20%;
    left: 21%;
    width: 60%;
    height: 60%;
}

@keyframes clipart-boost-modal-renewal-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(9%, 9%);
    }
}

@keyframes clipart-boost-modal-renewal-cloud-2 {
    from {
        transform: translate(0%, 9%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes clipart-boost-modal-renewal-cloud-3 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-9%, 9%);
    }
}

@keyframes clipart-boost-modal-renewal-cloud-4 {
    from {
        transform: translate(-12%, 0%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes clipart-boost-modal-renewal-cloud-5 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(-8%, -8%);
    }
}

@keyframes clipart-boost-modal-renewal-cloud-6 {
    from {
        transform: translate(0%, -8%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes clipart-boost-modal-renewal-cloud-7 {
    from {
        transform: translate(0%, 4%);
    }

    to {
        transform: translate(14%, -4%);
    }
}

@keyframes clipart-boost-modal-renewal-cloud-8 {
    from {
        transform: translate(12%, 4%);
    }

    to {
        transform: translate(0%, -4%);
    }
}

.modal-custom.boost-ad .item .clipart-area.automatic-renewal .clipart-automatic-renewal {
    top: 10%;
    left: 20%;
    width: 70%;
    height: 70%;
    position: absolute;
    display: block;
    z-index: 1;
    background: url('../../Content/Images/PaidServices/clipart-autorenewal.svg') no-repeat center center transparent;
    background-size: contain;
}

.modal-custom.boost-ad .item .clipart-area.automatic-renewal .clipart-shadow {
    top: 81%;
    left: 13%;
    width: 80%;
    height: 5%;
    position: absolute;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

.modal-custom.boost-ad .item .clipart-area.sms .clipart-cloud-1 {
    top: 9%;
    left: 6%;
    width: 30%;
    height: 30%;
    animation: clipart-boost-modal-sms-cloud-1 1.3s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.sms .clipart-cloud-2 {
    top: 0%;
    left: 24%;
    width: 45%;
    height: 45%;
    animation: clipart-boost-modal-sms-cloud-2 1.5s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.sms .clipart-cloud-3 {
    top: 8%;
    left: 50%;
    width: 40%;
    height: 40%;
    animation: clipart-boost-modal-sms-cloud-3 1.2s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.sms .clipart-cloud-4 {
    top: 24%;
    left: 66%;
    width: 30%;
    height: 30%;
    animation: clipart-boost-modal-sms-cloud-4 1.4s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.sms .clipart-cloud-5 {
    top: 34%;
    left: 38%;
    width: 60%;
    height: 60%;
    animation: clipart-boost-modal-sms-cloud-5 1.3s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.sms .clipart-cloud-6 {
    top: 70%;
    left: 42%;
    width: 30%;
    height: 30%;
    animation: clipart-boost-modal-sms-cloud-6 1.4s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.sms .clipart-cloud-7 {
    top: 52%;
    left: 22%;
    width: 40%;
    height: 40%;
    animation: clipart-boost-modal-sms-cloud-7 1.5s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.sms .clipart-cloud-8 {
    top: 64%;
    left: 5%;
    width: 35%;
    height: 35%;
    animation: clipart-boost-modal-sms-cloud-8 1.3s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.sms .clipart-cloud-9 {
    top: 27%;
    left: 1%;
    width: 55%;
    height: 55%;
    animation: clipart-boost-modal-sms-cloud-9 1.2s ease-in-out infinite alternate;
}

.modal-custom.boost-ad .item .clipart-area.sms .clipart-cloud-10 {
    top: 18%;
    left: 18%;
    width: 65%;
    height: 65%;
}

@keyframes clipart-boost-modal-sms-cloud-1 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(10%, 10%);
    }
}

@keyframes clipart-boost-modal-sms-cloud-2 {
    from {
        transform: translate(0%, 10%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes clipart-boost-modal-sms-cloud-3 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(-12%, 12%);
    }
}

@keyframes clipart-boost-modal-sms-cloud-4 {
    from {
        transform: translate(-18%, 4%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes clipart-boost-modal-sms-cloud-5 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(-8%, -4%);
    }
}

@keyframes clipart-boost-modal-sms-cloud-6 {
    from {
        transform: translate(0%, -15%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes clipart-boost-modal-sms-cloud-7 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -10%);
    }
}

@keyframes clipart-boost-modal-sms-cloud-8 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(12%, -12%);
    }
}

@keyframes clipart-boost-modal-sms-cloud-9 {
    from {
        transform: translate(8%, 0%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

.modal-custom.boost-ad .item .clipart-area.sms .clipart-sms {
    top: 11%;
    left: 19%;
    width: 70%;
    height: 70%;
    position: absolute;
    z-index: 1;
    display: block;
    background: url('../../Content/Images/PaidServices/clipart-sms.svg') no-repeat center center transparent;
    background-size: contain;
}

.modal-custom.boost-ad .item .clipart-area.sms .clipart-shadow {
    top: 81%;
    left: 13%;
    width: 80%;
    height: 5%;
    position: absolute;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .clipart-cloud-1,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .clipart-cloud-2,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .clipart-cloud-3,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .clipart-cloud-4,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .clipart-cloud-5,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .clipart-cloud-6,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .clipart-cloud-7,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .clipart-cloud-8,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .clipart-cloud-9,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .clipart-cloud-10,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .clipart-cloud-11,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .cloud-1,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .cloud-2,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .cloud-3,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .cloud-4,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .cloud-5,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .cloud-6,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .cloud-7,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .cloud-8,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .cloud-9,
.modal-custom.boost-ad .item input[type='checkbox']:checked + .panel .cloud-10 {
    background-color: #f6fffa;
}

.modal-custom.boost-ad .item .details-area {
    display: block;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
}

.modal-custom.boost-ad .item .divider-horizontal {
    display: block;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.modal-custom.boost-ad .item .total {
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-muted);
    padding-top: 5px;
}

    .modal-custom.boost-ad .item .total .caption {
        margin-right: 5px;
    }

*[dir='rtl'] .modal-custom.boost-ad .item .total .caption {
    margin-right: 0px;
    margin-left: 5px;
}

.modal-custom.boost-ad .item .total bdi {
    font-weight: 700;
    color: var(--color-text-basic);
}

.modal-custom.boost-ad .item .total .format-money {
    margin-right: 3px;
}

.modal-custom.boost-ad .item .details-area .price {
    margin-right: 10px;
    display: inline-block;
}

*[dir='rtl'] .modal-custom.boost-ad .item .details-area .price {
    margin-right: 0px;
    margin-left: 10px;
}

.modal-custom.boost-ad .item .details-area .price,
.modal-custom.boost-ad .item .details-area .vat .caption {
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: 400;
    display: inline-block;
}

.modal-custom.boost-ad .item .details-area .vat {
    font-size: 14px;
    color: var(--color-text-basic);
    font-weight: 700;
    margin-right: 15px;
    display: inline-block;
}

*[dir='rtl'] .modal-custom.boost-ad .item .details-area .vat {
    margin-left: 15px;
    margin-right: 0px;
}

.modal-custom.boost-ad .item .details-area .price bdi {
    font-weight: 700;
    color: var(--color-text-basic);
    margin-right: 5px;
}

*[dir='rtl'] .modal-custom.boost-ad .item .details-area .price bdi {
    margin-right: 0px;
    margin-left: 5px;
}

.modal-custom.boost-ad .item .details-area .price bdi.old-price {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.modal-custom.boost-ad .item .details-area .price bdi.new-price {
    color: var(--color-text-success);
}

.modal-custom.boost-ad .item .details-area .price .format-money-int {
    margin-right: 2px;
}

.modal-custom.boost-ad .item .details-area .period {
    font-size: 14px;
    color: var(--color-text-basic);
    font-weight: 700;
    display: inline-block;
}

    .modal-custom.boost-ad .item .details-area .period .caption {
        font-size: 14px;
        color: var(--color-text-muted);
        font-weight: 400;
        display: inline-block;
    }



@media (min-width: 850px) and (max-height: 1150px) {
    .modal-custom.boost-ad .modal-window {
        top: calc(50% - 480px) !important;
    }

    .modal-custom.boost-ad .modal-content {
        max-height: 800px;
    }
}

@media (min-width: 850px) and (max-height: 1000px) {
    .modal-custom.boost-ad .modal-window {
        top: calc(50% - 380px) !important;
    }

    .modal-custom.boost-ad .modal-content {
        max-height: 600px;
    }
}

@media (min-width: 850px) and (max-height: 800px) {
    .modal-custom.boost-ad .modal-window {
        top: calc(50% - 300px) !important;
    }

    .modal-custom.boost-ad .modal-content {
        max-height: 480px;
    }
}

@media (max-width: 850px) and (min-height: 601px) {
    .modal-custom.boost-ad .modal-window {
        width: 650px;
        left: calc(50% - 325px);
        top: calc(50% - 297px);
    }

    .modal-custom.boost-ad .inner-container {
        width: 620px;
        margin: 0px auto 0px auto;
    }

    .modal-custom.boost-ad .modal-content {
        max-height: 480px;
    }
}

@media (max-width: 850px) {


    .modal-custom.boost-ad .inner-container {
        width: 100%;
        margin: 0px auto 0px auto;
    }
}

@media (max-width: 728px) {
    .modal-custom.boost-ad .modal-window {
        max-width: 100%;
        top: 0px;
    }
}

@media (max-width: 650px) {
    .modal-custom.boost-ad .item .details-area .price,
    .modal-custom.boost-ad .item .details-area .vat,
    .modal-custom.boost-ad .item .details-area .period {
        display: block;
    }
}

@media (max-width: 450px) {
    .modal-custom.boost-ad .modal-footer .new-btn {
        min-width: 0px;
        width: auto;
    }

    .modal-custom.boost-ad .item .panel {
        padding: 10px 10px 10px 50px;
    }

    *[dir='rtl'] .modal-custom.boost-ad .item .panel {
        padding: 10px 50px 10px 10px;
    }

    .modal-custom.boost-ad .item .checkbox {
        left: 14px;
    }

    *[dir='rtl'] .modal-custom.boost-ad .item .checkbox {
        left: auto;
        right: 14px;
    }

    .modal-custom.boost-ad .item .panel .right-side {
        display: none;
    }

    .modal-custom.boost-ad .item .panel .left-side,
    *[dir='rtl'] .modal-custom.boost-ad .item .panel .left-side {
        width: 100%;
    }
}

@media (max-height: 600px) {
    .modal-custom.boost-ad .modal-window {
        top: 0% !important;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.boost-ad .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.boost-ad .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.boost-ad .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.boost-ad .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }
}

/* #endregion MODAL: Boost the Ad */
/* #region MODAL: Ad Statistics */
.modal-custom.goods-statistics .modal-window {
    width: 750px;
    left: calc(50% - 375px);
    top: calc(50% - 318px);
}

.modal-custom.goods-statistics .modal-container {
    padding: 0px;
}

.modal-custom.goods-statistics .inner-container {
    width: 720px;
    margin: 0px auto 0px auto;
    padding-bottom: 10px;
    padding-top: 10px;
}

.modal-custom.goods-statistics .goods-container {
    background-color: #F9F9F9;
    position: relative;
}

    .modal-custom.goods-statistics .goods-container .content-container {
        display: block;
        width: 730px;
        margin: 0px auto;
        position: relative;
        padding: 20px 0px 20px 70px;
    }

*[dir='rtl'] .modal-custom.goods-statistics .goods-container .content-container {
    padding: 20px 70px 20px 0px;
}

.modal-custom.goods-statistics .goods-container .goods-title {
    display: block;
    text-decoration: none;
    font-weight: 400;
}

.modal-custom.goods-statistics .goods-title label {
    font-size: 18px;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 24px;
}

.modal-custom.goods-statistics .ad-price {
    font-size: 14px;
    display: block;
    width: 100%;
    text-align: left;
}

*[dir='rtl'] .modal-custom.goods-statistics .ad-price {
    text-align: right;
}

.modal-custom.goods-statistics .ad-price span + span {
    padding-left: 5px;
}

.modal-custom.goods-statistics .ad-image-container {
    display: block;
    width: 64px;
    height: 64px;
    position: absolute;
    top: calc(50% - 32px);
    left: 0px;
    z-index: 1;
    background-color: #EBEBEB;
    overflow: hidden;
    border-radius: var(--radius-4);
}

*[dir='rtl'] .modal-custom.goods-statistics .ad-image-container {
    left: auto;
    right: 0px;
}

.modal-custom.goods-statistics .ad-image-container i {
    font-size: 32px;
    position: absolute;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
}

.modal-custom.goods-statistics .ad-image-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-position: center center;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
}

.modal-custom.goods-statistics .values-container {
    display: block;
    background-color: #F2F2F2;
    width: 100%;
}

    .modal-custom.goods-statistics .values-container .content-container {
        display: block;
        margin: 0px auto;
        width: 730px;
    }

        .modal-custom.goods-statistics .values-container .content-container > * {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

            .modal-custom.goods-statistics .values-container .content-container > * > * {
                display: table-row;
            }

                .modal-custom.goods-statistics .values-container .content-container > * > * > * {
                    display: table-cell;
                    text-align: center;
                    padding-top: 5px;
                    padding-bottom: 10px;
                }

                    .modal-custom.goods-statistics .values-container .content-container > * > * > * > span {
                        display: block;
                        width: 100%;
                        font-size: 20px;
                        font-weight: 500;
                    }

                    .modal-custom.goods-statistics .values-container .content-container > * > * > * > small {
                        display: block;
                        width: 100%;
                        font-size: 10px;
                        text-transform: uppercase;
                        font-weight: 700;
                        text-align: center;
                    }

                        .modal-custom.goods-statistics .values-container .content-container > * > * > * > small.views,
                        .modal-custom.goods-statistics .values-container .content-container > * > * > * > small.messages,
                        .modal-custom.goods-statistics .values-container .content-container > * > * > * > small.calls,
                        .modal-custom.goods-statistics .values-container .content-container > * > * > * > small.favorited,
                        .modal-custom.goods-statistics .values-container .content-container > * > * > * > small.orders {
                            padding: 3px 6px 3px 6px;
                            border-radius: var(--radius-16);
                            display: inline-block;
                            width: auto;
                        }

                        .modal-custom.goods-statistics .values-container .content-container > * > * > * > small.views {
                            background-color: rgba(93, 170, 128, 1);
                        }

                        .modal-custom.goods-statistics .values-container .content-container > * > * > * > small.messages {
                            background-color: rgba(246, 173, 63, 1);
                        }

                        .modal-custom.goods-statistics .values-container .content-container > * > * > * > small.calls {
                            background-color: rgba(216, 63, 63, 1);
                        }

                        .modal-custom.goods-statistics .values-container .content-container > * > * > * > small.favorited {
                            background-color: rgba(83, 130, 220, 1);
                        }

                        .modal-custom.goods-statistics .values-container .content-container > * > * > * > small.orders {
                            background-color: rgba(152, 83, 220, 1);
                        }


@media (max-height: 649px) {
    .modal-custom.goods-statistics .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.goods-statistics .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.goods-statistics .modal-body {
        padding-top: 52px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.goods-statistics .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.goods-statistics .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }
}

@media (max-width: 850px) and (min-height: 650px) {
    .modal-custom.goods-statistics .modal-window {
        width: 650px;
        left: calc(50% - 325px);
        top: calc(50% - 297px);
    }

    .modal-custom.goods-statistics .inner-container {
        width: 620px;
        margin: 0px auto 0px auto;
    }
}

@media (max-width: 850px) {
    .modal-custom.goods-statistics .modal-body {
        padding-top: 52px;
    }

    .modal-custom.goods-statistics .inner-container {
        width: 630px;
        margin: 0px auto 0px auto;
    }

    .modal-custom.goods-statistics .goods-container .content-container,
    .modal-custom.goods-statistics .values-container .content-container {
        width: 630px;
    }
}

@media (max-width: 728px) {
    .modal-custom.goods-statistics .modal-window {
        max-width: 100%;
        top: 0px;
    }

    .modal-custom.goods-statistics .inner-container,
    .modal-custom.goods-statistics .goods-container .content-container,
    .modal-custom.goods-statistics .values-container .content-container {
        width: 95%;
        margin: 0px auto;
    }
}

@media (max-width: 450px) {
    .modal-custom.goods-statistics .modal-footer .new-btn {
        min-width: 0px;
        width: auto;
    }

    .modal-custom.goods-statistics .values-container .content-container > *,
    .modal-custom.goods-statistics .values-container .content-container > * > * {
        display: block;
        text-align: center;
    }

        .modal-custom.goods-statistics .values-container .content-container > * > * > * {
            display: inline-block;
            min-width: 80px;
        }
}
/* #endregion MODAL: MyAds Filters */
/* #region MODAL: MyAds Filters */
.modal-custom.myads-filters .modal-window {
    width: 750px;
    left: calc(50% - 375px);
    top: calc(50% - 250px);
}

.modal-custom.myads-filters .modal-container {
    padding: 0px;
    min-height: 370px;
}

.modal-custom.myads-filters .inner-container {
    width: 720px;
    margin: 0px auto 0px auto;
    padding-bottom: 10px;
    padding-top: 10px;
}

.modal-custom.myads-filters p {
    font-size: 20px;
    font-weight: 400 !important;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}


.modal-custom.myads-filters .tag-list {
    display: block;
    width: 100%;
    font-size: 0px;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

    .modal-custom.myads-filters .tag-list .all-statuses {
        display: inline-block;
        font-size: 12px;
        font-weight: 400;
        border: 0px none transparent;
        padding: 10px 10px 10px 10px;
        border-radius: var(--radius-4);
        color: var(--color-text-muted);
        background-color: #E7E7E7;
        margin-right: 5px;
        margin-bottom: 5px;
        opacity: 1;
        cursor: pointer;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

        .modal-custom.myads-filters .tag-list .all-statuses:hover {
            opacity: 0.6;
            -webkit-transition: opacity 0.2s ease;
            transition: opacity 0.2s ease;
        }

        .modal-custom.myads-filters .tag-list .all-statuses.active {
            background-color: #E6F4ED;
        }

.modal-custom.myads-filters .tag-item {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    opacity: 1;
    transition: opacity 0.2s ease;
    -webkit-transition: opacity 0.2s ease;
}

    .modal-custom.myads-filters .tag-item:hover {
        cursor: pointer;
        opacity: 1;
        transition: opacity 0.2s ease;
        -webkit-transition: opacity 0.2s ease;
    }

    .modal-custom.myads-filters .tag-item input[type='checkbox'],
    .modal-custom.myads-filters .tag-item input[type='checkbox'] + .panel i {
        display: none;
    }

    .modal-custom.myads-filters .tag-item .panel {
        background-color: #E7E7E7;
        padding: 10px 10px 10px 10px;
        border-radius: var(--radius-4);
        position: relative;
        font-size: 12px;
        display: inline-block;
        width: auto;
    }

    .modal-custom.myads-filters .tag-item input[type='checkbox']:checked + .panel {
        background-color: #E6F4ED;
    }

        .modal-custom.myads-filters .tag-item input[type='checkbox']:checked + .panel i {
            display: inline-block;
            vertical-align: middle;
            background-color: var(--color-bg-primary);
            border-radius: 50%;
            width: 12px;
            height: 12px;
            font-size: 10px;
            margin-right: 3px;
            margin-left: -3px;
            margin-top: -1px;
        }

*[dir='rtl'] .modal-custom.myads-filters .tag-item input[type='checkbox']:checked + .panel i {
    margin-right: -3px;
    margin-left: 3px;
}

.modal-custom.myads-filters .tag-item input[type='checkbox']:checked + .panel i:before {
    margin-top: 1px;
    margin-left: 1px;
}


.modal-custom.myads-filters .filter-inner {
    display: block;
    width: 100%;
    font-size: 0px;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}



    .modal-custom.myads-filters .filter-inner .left-side,
    .modal-custom.myads-filters .filter-inner .right-side {
        display: inline-block;
        width: 50%;
    }

    .modal-custom.myads-filters .filter-inner .left-side {
        padding-right: 10px;
    }

*[dir='rtl'] .modal-custom.myads-filters .filter-inner .left-side {
    padding-right: 0px;
    padding-left: 10px;
}

.modal-custom.myads-filters .filter-inner .right-side {
    padding-left: 10px;
}

*[dir='rtl'] .modal-custom.myads-filters .filter-inner .right-side {
    padding-left: 0px;
    padding-right: 10px;
}



@media (max-height: 600px) {
    .modal-custom.myads-filters .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.myads-filters .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.myads-filters .modal-body {
        padding-top: 52px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.myads-filters .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.myads-filters .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }
}

@media (max-width: 850px) and (min-height: 601px) {
    .modal-custom.myads-filters .modal-window {
        width: 650px;
        left: calc(50% - 325px);
        top: calc(50% - 297px);
    }

    .modal-custom.myads-filters .inner-container {
        width: 620px;
        margin: 0px auto 0px auto;
    }
}

@media (max-width: 991px) {
}

@media (max-width: 850px) {


    .modal-custom.myads-filters .inner-container {
        width: 630px;
        margin: 0px auto 0px auto;
    }
}

@media (max-width: 728px) {
    .modal-custom.myads-filters .modal-window {
        max-width: 100%;
        top: 0px;
    }
}

@media (max-width: 640px) {
    .modal-custom.myads-filters .inner-container {
        width: 90%;
        padding-top: 0px;
    }

    .modal-custom.myads-filters .filter-inner .left-side,
    .modal-custom.myads-filters .filter-inner .right-side,
    *[dir='rtl'] .modal-custom.myads-filters .filter-inner .left-side,
    *[dir='rtl'] .modal-custom.myads-filters .filter-inner .right-side {
        display: block;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal-custom.myads-filters .filter-inner .left-side {
        padding-bottom: 5px;
    }
}


@media (max-width: 450px) {
    .modal-custom.myads-filters .inner-container {
        width: 100%;
    }

    .modal-custom.myads-filters .modal-footer .new-btn {
        min-width: 0px;
        width: auto;
    }
}


/* #endregion  */
/* #region MODAL: Remove Buyer */
.modal-custom.remove-buyer .modal-window {
    width: 700px;
    left: calc(50% - 350px);
    top: calc(50% - 260px);
}

.modal-custom.remove-buyer .inner-container {
    display: block;
    width: 600px;
    margin: 0px auto 0px auto;
}

.modal-custom.remove-buyer h5 {
    font-size: 24px;
    font-weight: 400;
    padding-block: 20px;
    text-align: center;
}

.modal-custom.remove-buyer p {
    font-size: 16px;
    margin-bottom: 20px;
}

.modal-custom.remove-buyer .checkbox {
    margin-bottom: 20px;
    position: relative;
    padding-inline-start: 25px;
    padding-block-start: 1px;
}

    .modal-custom.remove-buyer .checkbox i {
        position: absolute;
        top: 0px;
        left: 0px;
    }

.modal-custom.remove-buyer .user-info {
    display: block;
    width: 100%;
    text-align: center;
    padding-block: 10px;
}

    .modal-custom.remove-buyer .user-info h6 {
        font-size: 20px;
        font-weight: 700;
        padding-top: 10px;
    }

.modal-custom.remove-buyer .avatar-block {
    display: inline-block;
    position: relative;
}

    .modal-custom.remove-buyer .avatar-block .marker {
        display: inline-block;
        font-size: 18px;
        padding: 15px;
        border-radius: 50%;
        background-color: var(--color-bg-danger);
        width: auto;
        height: auto;
        position: absolute;
        right: -2px;
        bottom: -2px;
        z-index: 2;
    }




@media (max-height: 570px) {
    .modal-custom.remove-buyer .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.remove-buyer .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.remove-buyer .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.remove-buyer .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.remove-buyer .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }
}

@media (max-width: 728px) {
    .modal-custom.remove-buyer .modal-window {
        max-width: 100%;
        top: 0px;
    }
}

@media (max-width: 650px) {
    .modal-custom.remove-buyer .inner-container {
        display: block;
        width: calc(100% - 40px);
        margin: 0px auto 0px auto;
    }
}

@media (max-width: 450px) {
    .modal-custom.remove-buyer .inner-container {
        display: block;
        width: calc(100% - 20px);
        margin: 0px auto 0px auto;
    }

    .modal-custom.remove-buyer h5 {
        font-size: 18px;
    }

    .modal-custom.remove-buyer p {
        font-size: 14px;
    }

    .modal-custom.remove-buyer .modal-footer .new-btn {
        min-width: 0px;
    }
}


/* #endregion MODAL: Remove Buyer */
/* #endregion ==================================== /My Ads =========================================== */
/* #region ==================================== Potential Buyers ======================================= */
.buyers-page h1 {
    font-size: 24px;
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 10px;
}

.buyers-page .tab-content {
    padding-block: 40px;
}

.buyers-page .buy-button b {
    margin-inline-end: 3px;
}

.buyers-page .buy-button bdi {
    margin-inline-start: 3px;
}

*[dir='rtl'] .buyers-page .buy-button bdi {
    margin-inline-start: 0px;
    margin-inline-end: 3px;
}

.buyers-page .filter-block {
    margin-block: 30px;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    padding-block: 20px;
    display: flex;
}

    .buyers-page .filter-block > *:first-child {
        width: 100%;
        padding-inline-end: 5px;
    }

    .buyers-page .filter-block > *:last-child {
        width: auto;
        padding-inline-start: 5px;
        white-space: nowrap;
    }

    .buyers-page .filter-block .select-item {
        width: 200px;
        display: inline-block;
        margin-inline-end: 20px;
    }

    .buyers-page .filter-block .range-item {
        display: inline-block;
        height: 40px;
        vertical-align: top;
    }

        .buyers-page .filter-block .range-item .control {
            width: 200px;
            display: inline-block;
            vertical-align: middle;
            margin-top: 28px;
            margin-inline-start: 20px;
        }

.buyers-page .btn-sorting {
    display: none;
    font-size: 32px;
    vertical-align: middle;
    padding: 10px 10px 10px 10px;
    border: 0px none transparent;
    border-radius: var(--radius-4);
    background-color: transparent;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

    .buyers-page .btn-sorting:hover {
        opacity: 0.6;
        transition: opacity 0.2s ease-in-out;
    }

    .buyers-page .btn-sorting b {
        vertical-align: middle;
        margin-inline-start: 3px;
    }


.buyers-page .mobile-bottom-controls {
    display: none;
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    background-color: rgba(255,255,255,0);
    backdrop-filter: blur(10px);
    padding: 15px 15px 15px 15px;
    z-index: 999;
    text-align: center;
}

.buyers-page .clear-button {
    padding: 10px;
}

.buyers-page .no-results .clipart-no-results {
    width: 250px;
    height: 250px;
}

.buyers-page .no-results {
    margin-top: 80px;
    margin-bottom: 150px;
}

    .buyers-page .no-results h3 {
        font-size: 24px;
        font-weight: 500;
        color: var(--color-text-muted);
        display: block;
        width: 600px;
        text-align: center;
        margin: 20px auto 10px auto;
    }

    .buyers-page .no-results p {
        font-size: 14px;
        font-weight: 400;
        color: var(--color-text-muted);
        display: block;
        width: 600px;
        text-align: center;
        margin: 0px auto;
    }

.buyer-item .tab-content {
    padding-block: 0px;
}

.buyer-item .counters-list {
    display: flex;
}

    .buyer-item .counters-list .item {
        margin-block-start: 20px;
    }

        .buyer-item .counters-list .item + .item {
            margin-inline-start: 20px;
        }

    .buyer-item .counters-list .value {
        display: block;
        text-align: center;
        font-weight: 700;
        font-size: 14px;
        line-height: 21px;
    }

    .buyer-item .counters-list .title {
        display: block;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        color: var(--color-text-muted);
        line-height: 14px;
        margin-block-start: 5px;
    }

    .buyer-item .counters-list .mobile {
        display: none;
    }

    .buyer-item .counters-list .value bdi span + span {
        margin-inline-start: 5px;
    }


@media (max-width: 1199px) {
    .buyers-page .filter-block .range-item .control {
        width: 100px;
        display: inline-block;
        vertical-align: middle;
        margin-top: 28px;
        margin-inline-start: 20px;
    }
}

@media (max-width: 991px) {
    .buyers-page .filter-block {
        display: none;
    }

    .buyers-page .btn-sorting {
        display: inline-block;
    }

    .buyers-page .search-block .buy-button,
    .buyers-page .search-block .clear-button {
        display: none;
    }


    .buyers-page .mobile-bottom-controls {
        display: block;
    }

    .buyers-page .no-results .clipart-no-results {
        width: 200px;
        height: 200px;
    }

    .buyers-page .no-results {
        margin-top: 40px;
        margin-bottom: 100px;
    }

    .buyer-item .counters-list .mobile {
        display: block;
    }

    .buyer-item .counters-list .desktop {
        display: none;
    }

    .buyer-item .counters-list {
        display: block;
        font-size: 0px;
    }

        .buyer-item .counters-list .item {
            display: inline-block;
            width: 33.3%;
        }

            .buyer-item .counters-list .item + .item {
                margin-inline-start: 0px;
            }
}

@media (max-width: 767px) {
    .buyers-page .no-results h3,
    .buyers-page .no-results p {
        width: 100%;
        padding-inline: 50px;
    }

    .buyers-page .tab-content {
        padding-block: 10px;
    }
}

@media (max-width: 450px) {
    .buyers-page .search-block .textbox *[class*='ci-'].addon-l ~ input[type='text'] {
        font-size: 14px !important;
    }

    .buyers-page .mobile-bottom-controls .buy-button {
        display: block;
        width: 100%;
    }

        .buyers-page .mobile-bottom-controls .buy-button span {
            display: none;
        }

    .buyers-page .mobile-bottom-controls .buy-form {
        display: flex;
        gap: 5px;
    }

    .buyers-page .no-results h3 {
        padding-inline: 20px;
        font-size: 18px;
    }

    .buyers-page .no-results p {
        padding-inline: 20px;
    }

    .buyers-page .no-results {
        margin-top: 0px;
        margin-bottom: 80px;
    }


        .buyers-page .no-results .clipart-no-results {
            width: 150px;
            height: 150px;
        }

    .buyer-item .counters-list .value {
        font-size: 12px;
        line-height: 14px;
    }
}
/* #region ----------------- Buyer Item ---------------------- */
.buyers-page .buyer-item {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-4);
    margin-block-end: 10px;
    overflow: hidden;
}

    .buyers-page .buyer-item .main-panel {
        display: block;
        width: 100%;
        height: 68px;
        background-color: #F9F9F9;
        position: relative;
    }

    .buyers-page .buyer-item .collapser-btn {
        display: flex;
        width: 100%;
        position: relative;
        cursor: pointer;
        align-items: center;
        padding: 10px;
    }

        .buyers-page .buyer-item .collapser-btn > * {
            flex-basis: auto;
            white-space: nowrap;
        }

            .buyers-page .buyer-item .collapser-btn > *:first-child {
                flex-basis: 100%;
                white-space: nowrap;
            }


            .buyers-page .buyer-item .collapser-btn > *:last-child {
                flex-basis: 100%;
                white-space: nowrap;
                text-align: right;
            }

    .buyers-page .buyer-item .user-info-block {
        display: flex;
        width: 100%;
        align-items: center;
    }

        .buyers-page .buyer-item .user-info-block > *:last-child {
            width: 100%;
            padding-inline-start: 10px;
        }

    .buyers-page .buyer-item .name {
        color: var(--color-text-basic);
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 21px;
        display: block;
        width: 100%;
    }

    .buyers-page .buyer-item .city {
        color: var(--color-text-muted);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        display: block;
        width: 100%;
    }

    .buyers-page .buyer-item .counter {
        display: inline-block;
        padding: 0px 5px 0px 5px;
    }

        .buyers-page .buyer-item .counter .title-mobile {
            display: none;
        }

        .buyers-page .buyer-item .counter b {
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 21px;
            text-align: center;
            display: inline-block;
            width: 100%;
        }

        .buyers-page .buyer-item .counter .title {
            display: block;
            width: 100%;
            white-space: nowrap;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            color: var(--color-text-muted);
        }

    .buyers-page .buyer-item .collapser-content {
        background-color: #F2F2F2;
        position: relative;
        padding: 10px 20px 20px 20px;
    }

    .buyers-page .buyer-item.collapsed .collapser-content {
        padding: 0px;
    }

    .buyers-page .buyer-item .controls {
        display: flex;
        width: 100%;
        align-items: center;
    }

        .buyers-page .buyer-item .controls > *:first-child {
            text-align: right;
            width: 100%;
            padding-inline-end: 10px;
        }

*[dir='rtl'] .buyers-page .buyer-item .controls > *:first-child {
    text-align: left;
}

.buyers-page .buyer-item .controls > *:first-child a {
    display: inline-block;
    width: auto;
    padding: 8px 10px;
    border-left: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-basic);
}

.buyers-page .buyer-item .shimm-placeholder .controls > *:first-child a {
    border: 0px none transparent;
    padding-inline: 0px;
}

@media (max-width: 991px) {
    .buyers-page .buyer-item .shimm-placeholder .controls > *:first-child a {
        display: none;
    }

    .buyers-page .new-buyer-item .price .shimm-item {
        display: none;
    }

    .buyers-page .shimm-placeholder .new-buyer-item .price {
        display: none;
    }
}

.buyers-page .buyer-item .controls .button {
    width: 48px;
    height: 48px;
    text-align: center;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: var(--radius-4);
    border: 0px none transparent;
    transition: background-color 0.2s ease;
    cursor: pointer;
    position: relative;
    background-color: transparent;
}

.buyers-page .buyer-item .button .ci-pazar {
    font-size: 28px;
}

.buyers-page .buyer-item .controls > *:last-child .button {
    width: auto;
    padding-left: 0px;
    padding-right: 0px;
}

.buyers-page .buyer-item .controls .button:hover {
    background-color: #EBEBEB;
    transition: background-color 0.2s ease;
}

.buyers-page .buyer-item .button .counter-marker {
    font-size: 0px;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 9px;
    right: 9px;
    line-height: 0px;
    padding: 0px;
    background: var(--color-bg-danger);
}

*[dir='rtl'] .buyers-page .buyer-item .button .counter-marker {
    right: auto;
    left: 9px;
}

*[dir='rtl'] .buyers-page .buyer-item .controls .ci-pazar {
    transform: rotateY(180deg);
}

.buyers-page .buyer-item .controls .ci-pazar-small.ci-caret-down {
    transform: rotateZ(180deg);
}

.buyers-page .buyer-item.collapsed .ci-pazar-small.ci-caret-down {
    transform: rotateZ(0deg);
}

.buyers-page .buyer-item .collapser-btn:hover .controls > *:last-child .button {
    background-color: #EBEBEB;
    transition: background-color 0.2s ease;
}

.buyers-page .buyer-item .list-group-item .mobile {
    display: none;
}

.buyers-page .buyer-item .list-group-item .counter {
    margin-inline-end: 0px;
    margin-block-start: 0px;
    padding-inline: 0px;
}

.buyers-page .buyer-item .list-group-item .counter {
    margin-inline-end: 0px;
    margin-block-start: 0px;
    margin-inline-start: 5px;
}

.buyers-page .buyer-item .search-title h5 {
    display: inline-block;
    color: var(--color-text-basic);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
}

.buyers-page .buyer-item .select .select-button {
    color: var(--color-text-primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    padding: 7px 25px 5px 10px;
    background-color: transparent !important;
    cursor: pointer;
}

*[dir='rtl'] .buyers-page .buyer-item .select .select-button {
    padding: 7px 10px 5px 25px;
}

.buyers-page .buyer-item .select .select-button *[class*='ci-'] {
    top: calc(50% - 5px);
}

.viewed-categories.no-results {
    display: none;
    padding: 10px 0px 20px 0px;
    margin: 0px;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.search-requests.no-results {
    display: none;
    padding: 10px 0px 10px 0px;
    margin: 0px;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.buyer-item .viewed-categories.results:empty + .viewed-categories.no-results,
.buyer-item .search-requests.results:empty + .search-requests.no-results {
    display: block !important;
}

.buyer-item .viewed-categories.results,
.buyer-item .search-requests.results {
    font-size: 0px;
    margin-inline: -2px;
    margin-block: 10px;
}

.buyer-item .card-list.no-results {
    margin-top: 20px;
    margin-bottom: 10px;
    display: block;
}

    .buyer-item .card-list.no-results h4 {
        font-size: 16px;
        font-weight: 500;
        text-transform: uppercase;
        color: var(--color-text-basic);
    }

    .buyer-item .card-list.no-results p {
        font-size: 14px;
        font-weight: 400;
        color: var(--color-text-muted);
        margin-top: 5px;
        margin-bottom: 20px;
    }

.buyer-item .card-list .row-show-more {
    display: block;
    width: 100%;
    text-align: center;
}

    .buyer-item .card-list .row-show-more button {
        margin: 0px;
        display: inline-flex;
        padding-inline: 20px;
        padding-block: 10px;
        text-decoration: none;
        text-transform: uppercase;
    }

        .buyer-item .card-list .row-show-more button i {
            display: none;
        }

@media (max-width: 767px) {
    .buyer-item .card-list .row-show-more button i {
        display: block;
    }

    .buyer-item .card-list .row-show-more button span {
        display: none;
    }

    .buyer-item .card-list .row-show-more button {
        width: 50px;
        height: 50px;
        padding: 0px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.03) !important;
        border-radius: 50%;
    }
}

.buyer-item .other-ad {
    padding-inline: 0px;
    text-transform: uppercase;
    text-decoration: none;
    position: absolute;
    top: 7px;
    right: 20px;
}

*[dir='rtl'] .buyer-item .other-ad {
    left: 20px;
    right: auto;
}

/* #region Blocked page */
.blocked-page-content {
    padding-top: 0px;
    padding-bottom: 100px;
}

    .blocked-page-content h2 {
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        margin-top: -30px;
        margin-bottom: 10px;
        padding-inline: 40px;
    }

    .blocked-page-content h3 {
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        margin-bottom: 40px;
    }



/* #endregio Blocked page */
/* #region Ad item */
.buyer-item .card-list > div {
    display: grid;
    grid-template-columns: 32% 32% 32%;
    gap: 20px;
    margin-top: 20px;
}

.buyer-item .card {
    display: flex;
    background-color: #ffffff;
    overflow: hidden;
    border-radius: var(--radius-4);
}

    .buyer-item .card .photo-area {
        width: 90px;
        height: 100%;
        background-color: #F9F9F9;
        position: relative;
        min-width: 90px;
    }

    .buyer-item .card .ci-image {
        position: absolute;
        font-size: 32px;
        top: calc(50% - 16px);
        left: calc(50% - 16px);
        z-index: 1;
    }

    .buyer-item .card img {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        z-index: 2;
        top: 0px;
        left: 0px;
    }

    .buyer-item .card .info-area {
        padding-inline: 10px;
        padding-block: 10px;
        max-width: calc(100% - 90px);
    }

    .buyer-item .card .new-btn {
        padding-left: 0px;
        padding-right: 0px;
        text-transform: uppercase;
        text-decoration: none;
        padding-block: 10px;
        margin-top: 10px;
    }

    .buyer-item .card bdi {
        color: var(--color-text-muted);
        direction: ltr;
    }

    .buyer-item .card .ci-arrow-right {
        display: inline-block;
        margin-top: -1px;
        margin-inline-start: 5px;
    }

    .buyer-item .card bdi span + span {
        padding-left: 5px;
    }

    .buyer-item .card h5 {
        margin-bottom: 5px;
    }

        .buyer-item .card h5 a {
            color: var(--color-text-basic);
            text-decoration: none;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .buyer-item .card .counter-marker {
        font-style: normal;
        margin-inline-start: 5px;
        vertical-align: top;
        margin-top: -4px;
    }
/* #endregion Ad item */
@media (max-width: 1199px) {
    .buyers-page .buyer-item .controls > *:first-child a {
        font-size: 12px;
    }
}

@media (max-width: 991px) {
    .buyers-page .buyer-item .collapser-btn {
        display: block;
    }

    .buyers-page .buyer-item .main-panel {
        height: auto;
    }

    .buyers-page .buyer-item .collapser-btn > *:last-child {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    *[dir='rtl'] .buyers-page .buyer-item .collapser-btn > *:last-child {
        left: 10px;
        right: auto;
    }

    .buyers-page .buyer-item .controls > *:first-child a {
        font-size: 14px;
        border-left: 0px none transparent;
        padding-left: 20px;
        padding-right: 20px;
    }

    *[dir='rtl'] .buyers-page .buyer-item .controls > *:first-child a {
        border-right: 0px none transparent;
        border-left: 1px solid #f2f2f2;
    }

    .buyers-page .buyer-item .collapser-btn > *:first-child {
        border-bottom: 1px solid #F2F2F2;
        display: block;
        padding-bottom: 10px;
    }

    .buyers-page .buyer-item .collapser-btn > * {
        white-space: normal;
    }

    .buyers-page .buyer-item .counter {
        padding-left: 0px;
        padding-right: 0px;
        margin-inline-end: 10px;
        margin-block-start: 10px;
    }

        .buyers-page .buyer-item .counter .title-mobile {
            display: inline-block;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            color: var(--color-text-muted);
        }

        .buyers-page .buyer-item .counter b {
            display: inline-block;
            width: auto;
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            line-height: 21px;
        }

        .buyers-page .buyer-item .counter .title {
            display: none;
        }

    .buyers-page .buyer-item .collapser-btn .controls > *:last-child {
        position: absolute;
        top: 54px;
        right: 0px;
    }

    *[dir='rtl'] .buyers-page .buyer-item .collapser-btn .controls > *:last-child {
        left: 0px;
        right: auto;
    }

    .buyers-page .buyer-item .collapser-btn:hover .controls > *:last-child .button {
        background: transparent;
    }

    .buyers-page .buyer-item .list-group-item .desktop {
        display: none;
    }

    .buyers-page .buyer-item .list-group-item .mobile {
        display: inline-block;
    }

    .buyer-item .card-list.no-results h4 {
        font-size: 14px;
    }

    .buyer-item .card-list.no-results p {
        font-size: 12px;
    }

    .buyer-item .card-list > div {
        display: grid;
        grid-template-columns: 48.5% 48.5%;
        gap: 20px;
        margin-top: 20px;
    }
}

@media (max-width: 767px) {
    .buyers-page .buyer-item .controls > *:first-child a {
        font-size: 12px;
    }

    .buyers-page .buyer-item .list-group-item .counter {
        display: none;
    }

    .buyers-page .buyer-item .list-group-item .counter-marker {
        font-size: 0px !important;
    }

    .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item + .list-group-item {
        margin-inline-start: 15px !important;
    }

    .buyer-item .card-list > div {
        display: grid;
        grid-template-columns: 100%;
        gap: 20px;
        margin-top: 20px;
    }

    .buyer-item .other-ad {
        margin-top: 30px;
        position: static;
        padding: 0px;
    }

    .blocked-page-content h2 {
        font-size: 18px;
    }

    .blocked-page-content h3 {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .buyers-page .buyer-item .panel > *:first-child {
        display: block;
        border-bottom: 0px none transparent;
        text-align: center;
    }

    .buyers-page .buyer-item .user-info-block {
        display: block;
        text-align: center;
    }

    .buyers-page .buyer-item .user-avatar.user-avatar-md {
        width: 64px;
        height: 64px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

        .buyers-page .buyer-item .user-avatar.user-avatar-md i {
            font-size: 36px;
        }

        .buyers-page .buyer-item .user-avatar.user-avatar-md .trusted-seller-badge {
            right: -5px !important;
            top: -3px !important;
        }

    *[dir='rtl'] .buyers-page .buyer-item .user-avatar.user-avatar-md .trusted-seller-badge {
        right: auto !important;
        left: -5px !important;
    }

    .buyers-page .buyer-item .user-info-block > *:last-child {
        padding-inline: 0px;
    }

    .buyers-page .buyer-item .collapser-btn > *:first-child {
        display: block;
        border-bottom: 0px none transparent;
        text-align: center;
    }

    .buyers-page .buyer-item .collapser-btn > * {
        display: block;
        text-align: center;
    }

    .buyers-page .buyer-item .counter {
        display: inline-flex;
        padding: 0px 5px 0px 5px;
        margin: 0px;
        flex-direction: column-reverse;
    }

        .buyers-page .buyer-item .counter b {
            display: inline-block;
            width: auto;
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 21px;
        }

    .buyers-page .buyer-item .controls {
        display: block;
    }

    .buyers-page .buyer-item .collapser-btn > *:last-child {
        position: static;
        text-align: left;
        font-size: 0px;
    }

    .buyers-page .buyer-item .collapser-btn .controls > *:last-child {
        position: static;
        display: block;
        width: 100%;
        text-align: center;
        font-size: 14px;
    }

    .buyers-page .buyer-item .controls > *:last-child .button {
        padding-top: 0px;
        padding-bottom: 0px;
        height: auto;
    }

    .buyers-page .buyer-item .controls .button.remove {
        position: absolute;
        top: 5px;
        right: 5px;
    }

    *[dir='rtl'] .buyers-page .buyer-item .controls .button.remove {
        left: 5px;
        right: auto;
    }

    .buyers-page .buyer-item .controls > *:first-child {
        text-align: left;
        width: 50%;
        padding-inline-end: 0px;
        display: inline-block;
        vertical-align: middle;
    }

    *[dir='rtl'] .buyers-page .buyer-item .controls > *:first-child {
        text-align: right;
    }

    .buyers-page .buyer-item .controls > *:first-child a {
        border-right: 0px none transparent;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
    }

    *[dir='rtl'] .buyers-page .buyer-item .controls > *:first-child a {
        border-right: 0px none transparent;
        border-left: 0px none transparent;
        padding-left: 10px;
        padding-right: 10px;
    }

    .buyers-page .buyer-item .controls > *:nth-child(2) {
        text-align: right;
        width: 50%;
        padding-inline-end: 0px;
        display: inline-block;
        vertical-align: middle;
    }

    *[dir='rtl'] .buyers-page .buyer-item .controls > *:nth-child(2) {
        text-align: left;
    }

    .blocked-page-content .clipart-buyers {
        width: 200px !important;
        height: 200px !important;
        margin-top: 0px;
    }

    .blocked-page-content h2 {
        margin-top: -10px;
    }
}

@media (max-width: 400px) {
    .buyer-item .card .photo-area {
        width: 70px;
        min-width: 70px;
    }

    .buyer-item .card .info-area {
        max-width: calc(100% - 70px);
    }

    .blocked-page-content h2 {
        padding-inline: 0px;
    }

    .blocked-page-content .new-btn {
        display: block !important;
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
        padding: 15px;
    }
}

/* #endregion ------------- /Buyer Item ---------------------- */
/* #region -------------- Purchased -------------------- */
.buyers-page .with-new-messages {
    border-bottom: 1px solid #F2F2F2;
    padding-bottom: 15px;
    margin-bottom: 25px;
}

    .buyers-page .with-new-messages .divider-labeled {
        margin-bottom: 20px;
    }


.buyers-page .purchased-header {
    display: flex;
    margin-bottom: 20px;
}

    .buyers-page .purchased-header > *:first-child {
        width: 100%;
        padding-inline-end: 100px;
    }

    .buyers-page .purchased-header > *:last-child {
        width: auto;
        white-space: nowrap;
        padding-inline-start: 5px;
    }

.no-buyers-container {
    width: 800px;
    margin: 0px auto;
}

    .no-buyers-container h3 {
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .no-buyers-container p {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 20px;
    }


    .no-buyers-container button {
        margin-bottom: 100px;
    }

@media (max-width: 991px) {
    .buyers-page .purchased-header > *:first-child {
        padding-inline-end: 20px;
        padding-top: 10px;
        font-size: 12px;
    }

    .buyers-page .purchased-header .buy-button,
    .buyers-page .purchased-header .clear-button {
        display: none;
    }

    .no-buyers-container {
        width: 600px;
    }
}

@media (max-width: 767px) {
    .no-buyers-container {
        width: 100%;
        padding-inline: 50px;
    }
}

@media (max-width: 450px) {
    .buyers-page .purchased-header > *:first-child > * {
        display: none;
    }

    .no-buyers-container h3 {
        font-size: 18px;
    }

    .no-buyers-container {
        width: 100%;
        padding-inline: 20px;
    }

        .no-buyers-container .clipart-buyers {
            width: 200px !important;
            height: 200px !important;
        }
}
/* #endregion ---------- /Purchased -------------------- */
/* #region -------------- Visitors --------------------- */
.buyers-page .new-visitors {
    border-bottom: 1px solid #F2F2F2;
    padding-bottom: 15px;
    margin-bottom: 25px;
}

    .buyers-page .new-visitors .divider-labeled {
        margin-bottom: 20px;
    }

.buyers-page .visitors-header {
    display: flex;
    margin-bottom: 20px;
}

    .buyers-page .visitors-header > *:first-child {
        width: 100%;
        padding-inline-end: 100px;
    }

    .buyers-page .visitors-header > *:last-child {
        width: auto;
        white-space: nowrap;
        padding-inline-start: 5px;
    }


@media (max-width: 991px) {
    .buyers-page .visitors-header > *:first-child {
        padding-inline-end: 20px;
        padding-top: 10px;
        font-size: 12px;
    }

    .buyers-page .visitors-header .buy-button,
    .buyers-page .visitors-header .clear-button {
        display: none;
    }
}

@media (max-width: 450px) {
    .buyers-page .visitors-header > *:first-child > * {
        display: none;
    }
}
/* #endregion ---------- /Visitors --------------------- */
/* #region -------------- Wholesale -------------------- */
.buyers-page .buyers-wholesale {
    display: block;
    width: 100%;
    font-size: 0px;
    padding-bottom: 100px;
}

    .buyers-page .buyers-wholesale .left-side,
    .buyers-page .buyers-wholesale .right-side {
        display: inline-block;
        font-size: 14px;
        vertical-align: top;
    }

    .buyers-page .buyers-wholesale .left-side {
        width: 450px;
    }

    .buyers-page .buyers-wholesale .right-side {
        width: calc(100% - 450px);
        padding-inline-start: 50px;
    }

        .buyers-page .buyers-wholesale .right-side .description {
            font-size: 16px;
            color: var(--color-text-muted);
            font-weight: 400;
            margin-block-end: 50px;
            display: block;
        }

    .buyers-page .buyers-wholesale .clipart-block {
        width: 100%;
        height: 450px;
        background-color: #F9F9F9;
        border-radius: var(--radius-4);
        padding-top: 25px;
    }

.buyers-page .clipart-buyers {
    width: 400px;
    height: 400px;
}

.buyers-page .buyers-wholesale .form-row {
    display: block;
    width: 100%;
    margin-top: 20px;
    font-size: 0px;
}

    .buyers-page .buyers-wholesale .form-row .item {
        font-size: 14px;
        display: inline-block;
        vertical-align: top;
    }

        .buyers-page .buyers-wholesale .form-row .item + .item {
            margin-inline-start: 50px;
        }

        .buyers-page .buyers-wholesale .form-row .item.range {
            min-width: 40%;
        }

            .buyers-page .buyers-wholesale .form-row .item.range label {
                display: block;
                margin-bottom: 45px;
            }

        .buyers-page .buyers-wholesale .form-row .item.checkbox {
            padding-block-start: 57px;
        }

        .buyers-page .buyers-wholesale .form-row .item.quantity label {
            display: block;
            width: 100%;
            margin-bottom: 15px;
            font-size: 14px;
        }

        .buyers-page .buyers-wholesale .form-row .item.quantity {
            font-size: 0px;
            vertical-align: top;
        }

            .buyers-page .buyers-wholesale .form-row .item.quantity .counter-btn {
                font-size: 14px;
                vertical-align: top;
            }

            .buyers-page .buyers-wholesale .form-row .item.quantity .textbox {
                max-width: 50px;
                font-size: 14px;
                vertical-align: top;
                margin-inline: 5px;
            }

.buyers-page .buyers-wholesale .additional-info {
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 400;
    display: block;
    padding-top: 10px;
}

    .buyers-page .buyers-wholesale .additional-info span {
        padding-inline-end: 3px;
    }

    .buyers-page .buyers-wholesale .additional-info bdi {
        padding-inline-end: 3px;
    }

*[dir='rtl'] .buyers-page .buyers-wholesale .additional-info bdi {
    padding-inline-start: 3px;
}


.buyers-page .buyers-wholesale .sum {
    font-size: 30px;
    line-height: 32px;
    color: var(--color-text-basic);
    font-weight: 800;
    padding-top: 35px;
    padding-bottom: 5px;
    display: block;
}

    .buyers-page .buyers-wholesale .sum span + span {
        padding-inline-start: 5px;
    }

.buyers-page .buyers-wholesale .form-row.buy-btn {
    padding-top: 25px;
}

.buyers-page .buyers-wholesale .info-block {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-top: 40px;
    position: relative;
    padding-inline-start: 45px;
}

    .buyers-page .buyers-wholesale .info-block .ci-pazar {
        position: absolute;
        font-size: 32px;
        top: calc(50% - 16px);
        left: 0px;
    }

*[dir='rtl'] .buyers-page .buyers-wholesale .info-block .ci-pazar {
    right: 0px;
    left: auto;
}




@media (max-width: 1199px) {
    .buyers-page .buyers-wholesale .left-side {
        width: 350px;
    }

    .buyers-page .clipart-buyers {
        width: 300px;
        height: 300px;
    }

    .buyers-page .buyers-wholesale .clipart-block {
        height: 350px;
    }

    .buyers-page .buyers-wholesale .right-side {
        width: calc(100% - 350px);
    }
}

@media (max-width: 991px) {
    .buyers-page .buyers-wholesale .left-side {
        display: none;
    }

    .buyers-page .buyers-wholesale .right-side {
        width: 100%;
        padding: 0px;
    }

    .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item + .list-group-item {
        margin-inline-start: 20px;
    }

    .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item {
        font-size: 12px;
    }

    .buyers-page .buyer-item .collapser-content .counter-marker {
        margin-inline-start: 5px;
    }

    .buyers-page h1 {
        font-size: 24px;
        font-weight: 700;
    }
}

@media (max-width: 767px) {
    .buyers-page .buyers-wholesale .info-block,
    .buyers-page .buyers-wholesale .right-side .description {
        font-size: 14px;
    }

    .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item .counter-marker {
        font-size: 0px !important;
        width: 5px;
        height: 5px;
        position: absolute;
        top: 6px;
        right: -6px;
        line-height: 0px;
        padding: 0px;
        background: var(--color-bg-danger);
    }

    *[dir='rtl'] .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item .counter-marker {
        left: -6px;
        right: auto;
    }

    .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item small {
        display: none;
    }
}

@media (max-width: 575px) {
    .buyers-page .buyers-wholesale .right-side .description {
        margin-block-end: 30px;
    }

    .buyers-page .buyers-wholesale {
        padding-inline: 30px;
    }

        .buyers-page .buyers-wholesale .item.range {
            width: 100%;
        }

        .buyers-page .buyers-wholesale .form-row.buy-btn .new-btn {
            width: 100%;
        }

        .buyers-page .buyers-wholesale .form-row .item.checkbox {
            padding-block-start: 30px;
        }

        .buyers-page .buyers-wholesale .form-row .item + .item {
            margin-inline-start: 0px;
        }

        .buyers-page .buyers-wholesale .form-row .item.quantity {
            width: 100%;
        }

        .buyers-page .buyers-wholesale .form-row .item.price .additional-info {
            padding-top: 0px;
        }

        .buyers-page .buyers-wholesale .form-row .item.quantity label {
            padding-top: 30px;
        }

        .buyers-page .buyers-wholesale .sum {
            font-size: 24px;
        }
}

@media (max-width: 450px) {
    .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item {
        font-size: 10px;
    }

    .buyers-page .buyers-wholesale .right-side .description,
    .buyers-page .buyers-wholesale .info-block {
        font-size: 12px;
    }

    .buyers-page .buyers-wholesale {
        padding-inline: 15px;
    }
}

/* #endregion ----------- Wholesale -------------------- */
/* #region -------------- Find new --------------------- */
.buyers-page .search-block {
    display: flex;
    margin-bottom: 20px;
}

    .buyers-page .search-block > *:first-child {
        width: 100%;
        padding-inline-end: 5px;
    }

    .buyers-page .search-block > *:last-child {
        width: auto;
        white-space: nowrap;
        padding-inline-start: 5px;
    }

    .buyers-page .search-block .textbox {
        height: 52px;
    }

        .buyers-page .search-block .textbox .ci-search {
            font-size: 32px;
        }

        .buyers-page .search-block .textbox *[class*='ci-'].addon-l ~ input[type='text'] {
            font-size: 18px;
            line-height: 24px;
            padding-inline-start: 48px !important;
        }



.buyers-page .new-buyer-item {
    display: block;
    width: 100%;
    cursor: pointer;
    margin-bottom: 10px;
}

    .buyers-page .new-buyer-item input[type="checkbox"] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        border: 0px;
        padding: 0px;
        clip: rect(0 0 0 0);
        overflow: hidden;
    }

    .buyers-page .new-buyer-item .panel {
        display: flex;
        width: 100%;
        position: relative;
        cursor: pointer;
        background-color: #F9F9F9;
        border-radius: var(--radius-4);
        align-items: center;
        padding: 10px;
    }

    .buyers-page .new-buyer-item input[type="checkbox"]:checked + .panel {
        background-color: rgba(93, 170, 128, 0.1);
    }

    .buyers-page .new-buyer-item .panel > * {
        flex-basis: auto;
        white-space: nowrap;
    }

        .buyers-page .new-buyer-item .panel > *:first-child {
            flex-basis: 100%;
            align-content: start;
        }

        .buyers-page .new-buyer-item .panel > *:last-child {
            flex-basis: 100%;
        }

    .buyers-page .new-buyer-item .counter {
        display: inline-block;
        padding: 0px 5px 0px 5px;
    }

        .buyers-page .new-buyer-item .counter .title-mobile {
            display: none;
        }

        .buyers-page .new-buyer-item .counter b {
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 21px;
            text-align: center;
            display: inline-block;
            width: 100%;
        }

        .buyers-page .new-buyer-item .counter .title {
            display: block;
            width: 100%;
            white-space: nowrap;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            color: var(--color-text-muted);
        }

    .buyers-page .new-buyer-item .user-info-block {
        display: flex;
        width: 100%;
        align-items: center;
    }

        .buyers-page .new-buyer-item .user-info-block > *:last-child {
            width: 100%;
            padding-inline-start: 10px;
        }

    .buyers-page .new-buyer-item .name {
        color: var(--color-text-basic);
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 21px;
        display: block;
        width: 100%;
    }

    .buyers-page .new-buyer-item .city {
        color: var(--color-text-muted);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        display: block;
        width: 100%;
    }

    .buyers-page .new-buyer-item .price {
        display: flex;
        width: 100%;
        align-items: center;
    }

        .buyers-page .new-buyer-item .price > *:first-child {
            text-align: right;
            width: 100%;
            padding-inline-end: 10px;
        }

*[dir='rtl'] .buyers-page .new-buyer-item .price > *:first-child {
    text-align: left;
}

.buyers-page .new-buyer-item .price .button {
    width: 48px;
    height: 48px;
    text-align: center;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: var(--radius-4);
    transition: 0.2s ease-in-out background-color;
}

    .buyers-page .new-buyer-item .price .button .ci-pazar {
        font-size: 28px;
    }

        .buyers-page .new-buyer-item .price .button .ci-pazar.ci-plus {
            display: inline-block;
        }

        .buyers-page .new-buyer-item .price .button .ci-pazar.ci-check,
        .buyers-page .new-buyer-item .price .button .ci-pazar-small.ci-check,
        .buyers-page .new-buyer-item .price .button .ci-pazar-small.ci-plus {
            display: none;
        }

.buyers-page .new-buyer-item input[type="checkbox"]:checked + .panel .price .button .ci-pazar.ci-plus,
.buyers-page .new-buyer-item input[type="checkbox"]:checked + .panel .price .button .ci-pazar-small.ci-plus,
.buyers-page .new-buyer-item input[type="checkbox"]:checked + .panel .price .button .ci-pazar-small.ci-check {
    display: none;
}

.buyers-page .new-buyer-item input[type="checkbox"]:checked + .panel .price .button .ci-pazar.ci-check {
    display: inline-block;
}

.buyers-page .new-buyer-item input[type="checkbox"]:checked + .panel .price .button {
    background-color: var(--color-bg-primary);
    transition: 0.2s ease-in-out background-color;
}

.buyers-page .new-buyer-item:hover .panel .price .button {
    background-color: #EBEBEB;
    transition: 0.2s ease-in-out background-color;
}

.buyers-page .new-buyer-item .price bdi {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px;
    color: var(--color-text-basic);
}

.buyers-page .new-buyer-item .price .format-money {
    padding-inline-end: 3px;
}

@media (max-width: 991px) {
    .buyers-page .new-buyer-item .panel {
        display: block;
    }

        .buyers-page .new-buyer-item .panel > * {
            white-space: normal;
        }

            .buyers-page .new-buyer-item .panel > *:first-child {
                border-bottom: 1px solid #F2F2F2;
                display: block;
                padding-bottom: 10px;
            }

    .buyers-page .new-buyer-item input[type="checkbox"]:checked + .panel > *:first-child {
        border-bottom: 1px solid rgba(93, 170, 128, 0.1);
    }


    .buyers-page .new-buyer-item .panel > *:last-child {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    *[dir='rtl'] .buyers-page .new-buyer-item .panel > *:last-child {
        left: 10px;
        right: auto;
    }

    .buyers-page .new-buyer-item .counter {
        padding-left: 0px;
        padding-right: 0px;
        margin-inline-end: 10px;
        margin-block-start: 10px;
    }

        .buyers-page .new-buyer-item .counter .title {
            display: none;
        }

        .buyers-page .new-buyer-item .counter .title-mobile {
            display: inline-block;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 21px;
            color: var(--color-text-muted);
        }

        .buyers-page .new-buyer-item .counter b {
            display: inline-block;
            width: auto;
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            line-height: 21px;
        }
}

@media (max-width: 575px) {
    .buyers-page .new-buyer-item .price .button {
        width: 30px;
        height: 30px;
        padding-top: 8px;
        padding-bottom: 8px;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    *[dir='rtl'] .buyers-page .new-buyer-item .price .button {
        left: 10px;
        right: auto;
    }

    .buyers-page .new-buyer-item .panel .price .button .ci-pazar-small.ci-check,
    .buyers-page .new-buyer-item .panel .price .button .ci-pazar.ci-plus,
    .buyers-page .new-buyer-item .panel .price .button .ci-pazar.ci-check {
        display: none;
    }

    .buyers-page .new-buyer-item .panel .price .button .ci-pazar-small.ci-plus {
        display: inline-block;
    }

    .buyers-page .new-buyer-item input[type="checkbox"]:checked + .panel .price .button .ci-pazar-small.ci-plus,
    .buyers-page .new-buyer-item input[type="checkbox"]:checked + .panel .price .button .ci-pazar.ci-plus,
    .buyers-page .new-buyer-item input[type="checkbox"]:checked + .panel .price .button .ci-pazar.ci-check {
        display: none;
    }

    .buyers-page .new-buyer-item input[type="checkbox"]:checked + .panel .price .button .ci-pazar-small.ci-check {
        display: inline-block;
    }

    .buyers-page .new-buyer-item .panel > * {
        display: block;
        text-align: center;
    }

        .buyers-page .new-buyer-item .panel > *:first-child {
            display: block;
            border-bottom: 0px none transparent;
            text-align: center;
        }

    .buyers-page .new-buyer-item input[type="checkbox"]:checked + .panel > *:first-child {
        border-bottom: 0px none transparent;
    }

    .buyers-page .new-buyer-item .panel > *:last-child {
        display: block;
        position: static;
    }

    .buyers-page .new-buyer-item .user-info-block > *:last-child {
        padding-inline-start: 0px;
    }


    .buyers-page .new-buyer-item .user-info-block {
        display: block;
    }

    .buyers-page .new-buyer-item .price {
        display: block;
        width: 100%;
        text-align: center;
        padding: 15px 0px 15px 0px;
    }

    .buyers-page .new-buyer-item .counter {
        display: inline-flex;
        padding: 0px 5px 0px 5px;
        margin: 0px;
        flex-direction: column-reverse;
    }

        .buyers-page .new-buyer-item .counter .title-mobile > * {
            display: none;
        }

        .buyers-page .new-buyer-item .counter b {
            display: inline-block;
            width: auto;
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 21px;
        }

    .buyers-page .new-buyer-item .user-avatar.user-avatar-md {
        width: 64px;
        height: 64px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

        .buyers-page .new-buyer-item .user-avatar.user-avatar-md i {
            font-size: 36px;
        }

        .buyers-page .new-buyer-item .user-avatar.user-avatar-md .trusted-seller-badge {
            right: -5px !important;
            top: -3px !important;
        }

    *[dir='rtl'] .buyers-page .new-buyer-item .user-avatar.user-avatar-md .trusted-seller-badge {
        right: auto !important;
        left: -5px !important;
    }
}
/* #endregion ---------- /Find new --------------------- */
/* #region MODAL: Promo */
.modal-custom.leads-promo .modal-window {
    width: 750px;
    left: calc(50% - 375px);
    top: calc(50% - 280px);
}

.modal-custom.leads-promo .inner-container {
    display: block;
    width: 500px;
    margin: 10px auto 0px auto;
}

.modal-custom.leads-promo .clipart-buyers {
    width: 300px;
    height: 300px;
    margin-top: -30px;
}

.modal-custom.leads-promo h2 {
    font-size: 24px;
    display: block;
    text-align: center;
    font-weight: 400;
    color: var(--color-text-basic);
    margin-top: -30px;
}

.modal-custom.leads-promo .description {
    font-size: 16px;
    color: var(--color-text-muted);
    text-align: center;
    font-weight: 400;
    margin-top: 5px;
}

.modal-custom.leads-promo .guide-steps {
    display: flex;
    padding-block: 20px;
}

    .modal-custom.leads-promo .guide-steps > * {
        width: 33.3%;
        text-align: center;
        padding-inline: 10px;
        position: relative;
    }

    .modal-custom.leads-promo .guide-steps h3 {
        display: inline-block;
        color: var(--color-text-primary);
        background-color: #E6F4ED;
        border-radius: 50%;
        font-size: 24px;
        font-weight: 700;
        padding: 10px;
        width: 50px;
    }

    .modal-custom.leads-promo .guide-steps p {
        display: block;
        width: 100%;
        color: var(--color-text-basic);
        font-size: 14px;
        font-weight: 700;
        padding-top: 10px;
    }

    .modal-custom.leads-promo .guide-steps .ci-pazar {
        position: absolute;
        top: 7px;
        right: -15px;
        font-size: 32px;
    }

*[dir='rtl'] .modal-custom.leads-promo .guide-steps .ci-pazar {
    left: -15px;
    right: auto;
    transform: rotate(180deg);
}


@media (max-height: 570px) {
    .modal-custom.leads-promo .modal-window {
        top: 0% !important;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.leads-promo .modal-header {
        position: fixed;
        top: 0px !important;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.leads-promo .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.leads-promo .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.leads-promo .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }
}


@media (max-width: 728px) {
    .modal-custom.leads-promo .modal-window {
        max-width: 100%;
        top: 0px !important;
    }
}

@media (max-width: 450px) {
    .modal-custom.leads-promo .inner-container {
        display: block;
        width: calc(100% - 20px);
        margin: 0px auto 0px auto;
    }

    .modal-custom.leads-promo .modal-footer .new-btn {
        min-width: 0px;
    }

    .modal-custom.leads-promo .clipart-buyers {
        width: 200px;
        height: 200px;
    }

    .modal-custom.leads-promo h2 {
        font-size: 18px;
        margin-top: -10px;
    }

    .modal-custom.leads-promo .description {
        font-size: 14px;
    }

    .modal-custom.leads-promo .guide-steps .ci-pazar {
        display: none;
    }

    .modal-custom.leads-promo .guide-steps {
        display: block;
        padding-block: 20px;
    }

        .modal-custom.leads-promo .guide-steps > * {
            width: 100%;
            padding-inline: 0px;
            padding-bottom: 10px;
        }

        .modal-custom.leads-promo .guide-steps h3 {
            display: inline-block;
            color: var(--color-text-primary);
            background-color: #E6F4ED;
            border-radius: 50%;
            font-size: 18px;
            font-weight: 700;
            padding: 4px;
            width: 30px;
            vertical-align: middle
        }

        .modal-custom.leads-promo .guide-steps p {
            display: inline-block;
            width: calc(100% - 40px);
            padding-top: 0px;
            vertical-align: middle;
            padding-inline-start: 10px;
            text-align: left;
        }

    *[dir='rtl'] .modal-custom.leads-promo .guide-steps p {
        text-align: right;
    }
}
/* #endregion MODAL: Promo */
/* #region MODAL: Buyers Filter */
.modal-custom.buyers-filter .modal-window {
    width: 600px;
    left: calc(50% - 300px);
    top: calc(50% - 260px);
}

.modal-custom.buyers-filter .inner-container {
    display: block;
    width: 500px;
    margin: 10px auto 0px auto;
}

.modal-custom.buyers-filter .range-item {
    display: block;
    width: 100%;
    margin-block-end: 30px;
}

    .modal-custom.buyers-filter .range-item label {
        display: block;
        width: 100%;
        margin-block-end: 40px;
    }

    .modal-custom.buyers-filter .range-item .control {
        padding-inline: 10px;
    }

.modal-custom.buyers-filter .options-list.show {
    max-width: 0px !important;
}


@media (max-height: 570px) {
    .modal-custom.buyers-filter .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.buyers-filter .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.buyers-filter .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.buyers-filter .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.buyers-filter .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }
}

@media (max-width: 728px) {
    .modal-custom.buyers-filter .modal-window {
        max-width: 100%;
        top: 0px;
    }
}

@media (max-width: 650px) {
    .modal-custom.buyers-filter .inner-container {
        display: block;
        width: calc(100% - 40px);
        margin: 0px auto 0px auto;
    }
}

@media (max-width: 450px) {
    .modal-custom.buyers-filter .inner-container {
        display: block;
        width: calc(100% - 20px);
        margin: 0px auto 0px auto;
    }

    .modal-custom.buyers-filter .modal-footer .new-btn {
        min-width: 0px;
    }
}


/* #endregion MODAL: Buyers Filter */
/* #region MODAL: Offer the ad */
.modal-custom.offer-ad .modal-window {
    width: 750px;
    left: calc(50% - 375px);
    top: calc(50% - 280px);
}

.modal-custom.offer-ad .modal-container {
    background-color: #F9F9F9;
    padding: 20px;
    max-width: 800px;
    margin: 0px auto;
}

.modal-custom.offer-ad .notification {
    display: flex;
}

    .modal-custom.offer-ad .notification > *:last-child {
        padding-inline-start: 10px;
    }

.modal-custom.offer-ad .card-list {
    display: grid;
    grid-template-columns: 48.5% 48.5%;
    gap: 20px;
    margin-top: 20px;
}

.modal-custom.offer-ad .card {
    display: flex;
    background-color: #ffffff;
    overflow: hidden;
    border-radius: var(--radius-4);
}

    .modal-custom.offer-ad .card .photo-area {
        width: 90px;
        height: 100%;
        background-color: #F9F9F9;
        position: relative;
        min-width: 90px;
    }

    .modal-custom.offer-ad .card .ci-image {
        position: absolute;
        font-size: 32px;
        top: calc(50% - 16px);
        left: calc(50% - 16px);
        z-index: 1;
    }

    .modal-custom.offer-ad .card img {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        z-index: 2;
        top: 0px;
        left: 0px;
    }

    .modal-custom.offer-ad .card .info-area {
        padding-inline: 10px;
        padding-block: 10px;
        max-width: calc(100% - 90px);
    }

    .modal-custom.offer-ad .card .new-btn {
        padding-left: 0px;
        padding-right: 0px;
        text-transform: uppercase;
        text-decoration: none;
        padding-block: 10px;
        margin-top: 10px;
    }

    .modal-custom.offer-ad .card bdi {
        color: var(--color-text-muted);
        direction: ltr;
    }

    .modal-custom.offer-ad .card .ci-arrow-right {
        display: inline-block;
        margin-top: -1px;
        margin-inline-start: 5px;
    }

    .modal-custom.offer-ad .card bdi span + span {
        padding-left: 5px;
    }

    .modal-custom.offer-ad .card h5 {
        margin-bottom: 5px;
    }

        .modal-custom.offer-ad .card h5 a {
            color: var(--color-text-basic);
            text-decoration: none;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

/* #endregion Ad item */

@media (max-height: 570px) {
    .modal-custom.offer-ad .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.offer-ad .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.offer-ad .modal-body {
        padding-top: 52px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
        background-color: #F9F9F9;
    }

    .modal-custom.offer-ad .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.offer-ad .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }
}

@media (max-width: 800px) {
    .modal-custom.offer-ad .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.offer-ad .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.offer-ad .modal-body {
        padding-top: 52px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
        background-color: #F9F9F9;
    }

    .modal-custom.offer-ad .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.offer-ad .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }
}

@media (max-width: 650px) {
    .modal-custom.offer-ad .card-list {
        display: grid;
        grid-template-columns: 100%;
        gap: 20px;
        margin-top: 20px;
    }
}

@media (max-width: 450px) {


    .modal-custom.offer-ad .modal-footer .new-btn {
        min-width: 0px;
    }
}
/* #endregion MODAL: Offer the ad */
/* #region -------------- Clipart - No Results --------------------- */
.clipart-no-results {
    display: block;
    width: 450px;
    height: 450px;
}

    .clipart-no-results .clipart-cloud-1,
    .clipart-no-results .clipart-cloud-2,
    .clipart-no-results .clipart-cloud-3,
    .clipart-no-results .clipart-cloud-4,
    .clipart-no-results .clipart-cloud-5,
    .clipart-no-results .clipart-cloud-6,
    .clipart-no-results .clipart-cloud-7,
    .clipart-no-results .clipart-cloud-8,
    .clipart-no-results .clipart-cloud-9 {
        display: block;
        position: absolute;
        border-radius: 50%;
        z-index: 1;
        background-color: #EBEBEB;
    }

    .clipart-no-results .clipart-cloud-1 {
        width: 16%;
        height: 16%;
        top: 26%;
        left: 5%;
        animation: clipart-noresults-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .clipart-no-results .clipart-cloud-2 {
        width: 28%;
        height: 28%;
        top: 14%;
        left: 15%;
        animation: clipart-noresults-cloud-2 1.4s ease-in-out infinite alternate;
    }

    .clipart-no-results .clipart-cloud-3 {
        width: 43%;
        height: 43%;
        top: 3%;
        left: 33%;
        animation: clipart-noresults-cloud-3 1.4s ease-in-out infinite alternate;
    }

    .clipart-no-results .clipart-cloud-4 {
        width: 33%;
        height: 33%;
        top: 18%;
        left: 61%;
        animation: clipart-noresults-cloud-4 1.4s ease-in-out infinite alternate;
    }

    .clipart-no-results .clipart-cloud-5 {
        width: 17%;
        height: 17%;
        top: 42%;
        left: 81%;
        animation: clipart-noresults-cloud-5 1.4s ease-in-out infinite alternate;
    }

    .clipart-no-results .clipart-cloud-6 {
        width: 42%;
        height: 42%;
        top: 44%;
        left: 51%;
        animation: clipart-noresults-cloud-6 1.4s ease-in-out infinite alternate;
    }

    .clipart-no-results .clipart-cloud-7 {
        width: 45%;
        height: 45%;
        top: 52%;
        left: 25%;
        animation: clipart-noresults-cloud-7 1.4s ease-in-out infinite alternate;
    }

    .clipart-no-results .clipart-cloud-8 {
        width: 40%;
        height: 40%;
        top: 33%;
        left: 2%;
        animation: clipart-noresults-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .clipart-no-results .clipart-cloud-9 {
        width: 60%;
        height: 60%;
        top: 19%;
        left: 22%;
    }

@keyframes clipart-noresults-cloud-1 {
    from {
        transform: translate(-7%, -7%);
    }

    to {
        transform: translate(7%, 7%);
    }
}

@keyframes clipart-noresults-cloud-2 {
    from {
        transform: translate(4%, 4%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

@keyframes clipart-noresults-cloud-3 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

@keyframes clipart-noresults-cloud-4 {
    from {
        transform: translate(-5%, 5%);
    }

    to {
        transform: translate(5%, -5%);
    }
}

@keyframes clipart-noresults-cloud-5 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

@keyframes clipart-noresults-cloud-6 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes clipart-noresults-cloud-7 {
    from {
        transform: translate(0%, 3%);
    }

    to {
        transform: translate(0%, -3%);
    }
}

@keyframes clipart-noresults-cloud-8 {
    from {
        transform: translate(4%, -2%);
    }

    to {
        transform: translate(-4%, 2%);
    }
}

.clipart-no-results .clipart-search {
    display: block;
    position: absolute;
    z-index: 1;
    background: url("../../Content/Images/AdSearch/clipart-NoResults/clipart-search.svg") no-repeat center center transparent;
    background-size: contain;
    top: 25%;
    left: 23%;
    width: 60%;
    height: 60%;
}
/* #endregion ----------- Clipart - No Results --------------------- */
/* #region ----------- Clipart Buyers ------------------ */
.clipart-buyers {
    display: block;
    width: 450px;
    height: 450px;
}

    .clipart-buyers .clipart-cloud-1,
    .clipart-buyers .clipart-cloud-2,
    .clipart-buyers .clipart-cloud-3,
    .clipart-buyers .clipart-cloud-4,
    .clipart-buyers .clipart-cloud-5,
    .clipart-buyers .clipart-cloud-6,
    .clipart-buyers .clipart-cloud-7,
    .clipart-buyers .clipart-cloud-8,
    .clipart-buyers .clipart-cloud-9,
    .clipart-buyers .clipart-cloud-10,
    .clipart-buyers .clipart-cloud-11,
    .clipart-buyers .clipart-cloud-12 {
        display: block;
        position: absolute;
        border-radius: 50%;
        z-index: 1;
        background-color: #EBEBEB;
    }

    .clipart-buyers .clipart-cloud-1 {
        width: 35%;
        height: 35%;
        top: 30%;
        left: 5%;
        animation: clipart-buyers-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .clipart-buyers .clipart-cloud-2 {
        width: 17%;
        height: 17%;
        top: 19%;
        left: 17%;
        animation: clipart-buyers-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .clipart-buyers .clipart-cloud-3 {
        width: 26%;
        height: 26%;
        top: 14%;
        left: 27%;
        animation: clipart-buyers-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .clipart-buyers .clipart-cloud-4 {
        width: 27%;
        height: 27%;
        top: 19%;
        left: 39%;
        animation: clipart-buyers-cloud-4 1.4s ease-in-out infinite alternate;
    }

    .clipart-buyers .clipart-cloud-5 {
        width: 25%;
        height: 25%;
        top: 14%;
        left: 56%;
        animation: clipart-buyers-cloud-5 1.7s ease-in-out infinite alternate;
    }

    .clipart-buyers .clipart-cloud-6 {
        width: 35%;
        height: 35%;
        top: 25%;
        left: 60%;
        animation: clipart-buyers-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .clipart-buyers .clipart-cloud-7 {
        width: 20%;
        height: 20%;
        top: 50%;
        left: 75%;
        animation: clipart-buyers-cloud-7 1.6s ease-in-out infinite alternate;
    }

    .clipart-buyers .clipart-cloud-8 {
        width: 35%;
        height: 35%;
        top: 49%;
        left: 50%;
        animation: clipart-buyers-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .clipart-buyers .clipart-cloud-9 {
        width: 30%;
        height: 30%;
        top: 49%;
        left: 36%;
        animation: clipart-buyers-cloud-9 1.5s ease-in-out infinite alternate;
    }

    .clipart-buyers .clipart-cloud-10 {
        width: 35%;
        height: 35%;
        top: 51%;
        left: 16%;
        animation: clipart-buyers-cloud-10 1.6s ease-in-out infinite alternate;
    }

    .clipart-buyers .clipart-cloud-11 {
        width: 22%;
        height: 22%;
        top: 52%;
        left: 5%;
        animation: clipart-buyers-cloud-11 1.4s ease-in-out infinite alternate;
    }

    .clipart-buyers .clipart-cloud-12 {
        width: 42%;
        height: 42%;
        top: 28%;
        left: 30%;
    }

@keyframes clipart-buyers-cloud-1 {
    from {
        transform: translate(-5%, -2%);
    }

    to {
        transform: translate(5%, 2%);
    }
}

@keyframes clipart-buyers-cloud-2 {
    from {
        transform: translate(6%, 6%);
    }

    to {
        transform: translate(-6%, -6%);
    }
}

@keyframes clipart-buyers-cloud-3 {
    from {
        transform: translate(1%, -7%);
    }

    to {
        transform: translate(-1%, 7%);
    }
}

@keyframes clipart-buyers-cloud-4 {
    from {
        transform: translate(0%, 6%);
    }

    to {
        transform: translate(0%, -6%);
    }
}

@keyframes clipart-buyers-cloud-5 {
    from {
        transform: translate(-1%, -5%);
    }

    to {
        transform: translate(1%, 5%);
    }
}

@keyframes clipart-buyers-cloud-6 {
    from {
        transform: translate(-5%, 5%);
    }

    to {
        transform: translate(5%, -5%);
    }
}

@keyframes clipart-buyers-cloud-7 {
    from {
        transform: translate(5%, -1%);
    }

    to {
        transform: translate(-5%, 1%);
    }
}

@keyframes clipart-buyers-cloud-8 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes clipart-buyers-cloud-9 {
    from {
        transform: translate(0%, 4%);
    }

    to {
        transform: translate(0%, -4%);
    }
}

@keyframes clipart-buyers-cloud-10 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@keyframes clipart-buyers-cloud-11 {
    from {
        transform: translate(-5%, 0%);
    }

    to {
        transform: translate(6%, 0%);
    }
}

.clipart-buyers .clipart-bodies {
    width: 55%;
    height: 55%;
    top: 32%;
    left: 19%;
    background: url('../../Content/Images/Buyers/buyers-bodies.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
}

.clipart-buyers .clipart-man-hand {
    width: 23%;
    height: 23%;
    top: 41%;
    left: 66%;
    background: url('../../Content/Images/Buyers/buyers-man-hand.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: clipart-buyers-man1-hand 4s ease-in-out infinite alternate;
    transform-origin: 10% 50%;
}

.clipart-buyers .clipart-man-head-1 {
    width: 17%;
    height: 17%;
    top: 27%;
    left: 58%;
    background: url('../../Content/Images/Buyers/buyers-man-head-1.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    transform-origin: 50% 90%;
    animation: clipart-buyers-man1-head 3s ease-in-out infinite alternate;
}

.clipart-buyers .clipart-man1-eye-1 {
    width: 12%;
    height: 12%;
    top: 60%;
    left: 28%;
    background: url('../../Content/Images/Buyers/buyers-man-eye-1.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: clipart-buyers-man1-eyes 3s ease-in-out infinite alternate;
}

.clipart-buyers .clipart-man1-eye-2 {
    width: 12%;
    height: 12%;
    top: 60%;
    left: 56%;
    background: url('../../Content/Images/Buyers/buyers-man-eye-1.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: clipart-buyers-man1-eyes 3s ease-in-out infinite alternate;
}

.clipart-buyers .clipart-man1-brow-1 {
    width: 12%;
    height: 12%;
    top: 49%;
    left: 28%;
    background: url('../../Content/Images/Buyers/buyers-man-brow-1.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    transform: rotate(-6deg);
    animation: clipart-buyers-man1-brow1 4s ease-in-out infinite alternate;
}

.clipart-buyers .clipart-man1-brow-2 {
    width: 12%;
    height: 12%;
    top: 49%;
    left: 58%;
    background: url('../../Content/Images/Buyers/buyers-man-brow-1.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    transform: rotate(7deg);
    animation: clipart-buyers-man1-brow2 4s ease-in-out infinite alternate;
}

.clipart-buyers .clipart-man-head-2 {
    width: 25%;
    height: 25%;
    top: 20%;
    left: 35%;
    background: url('../../Content/Images/Buyers/buyers-man-head-2.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: clipart-buyers-man2-head 3s ease-in-out infinite alternate;
}

.clipart-buyers .clipart-man2-eye-1 {
    width: 12%;
    height: 12%;
    top: 52%;
    left: 28%;
    background: url('../../Content/Images/Buyers/buyers-man-eye-2.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: clipart-buyers-man2-eyes 3s ease-in-out infinite alternate;
}

.clipart-buyers .clipart-man2-eye-2 {
    width: 12%;
    height: 12%;
    top: 52%;
    left: 58%;
    background: url('../../Content/Images/Buyers/buyers-man-eye-2.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: clipart-buyers-man2-eyes 3s ease-in-out infinite alternate;
}

.clipart-buyers .clipart-man2-brow-1 {
    width: 12%;
    height: 12%;
    top: 42%;
    left: 28%;
    background: url('../../Content/Images/Buyers/buyers-man-brow-2.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: clipart-buyers-man2-brows 3s ease-in-out infinite alternate;
}

.clipart-buyers .clipart-man2-brow-2 {
    width: 12%;
    height: 12%;
    top: 42%;
    left: 58%;
    background: url('../../Content/Images/Buyers/buyers-man-brow-2.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: clipart-buyers-man2-brows 3s ease-in-out infinite alternate;
}

.clipart-buyers .clipart-woman-hand {
    width: 13%;
    height: 13%;
    top: 47%;
    left: 12%;
    background: url('../../Content/Images/Buyers/buyers-woman-hand.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: clipart-buyers-woman-hand 0.5s ease-in-out infinite alternate;
    transform-origin: 90% 90%;
}

.clipart-buyers .clipart-woman-head {
    width: 17%;
    height: 17%;
    top: 30%;
    left: 23%;
    background: url('../../Content/Images/Buyers/buyers-woman-head.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: clipart-buyers-woman-head 2s ease-in-out infinite alternate;
    transform-origin: 50% 80%;
}

.clipart-buyers .clipart-woman-brow-1 {
    width: 14%;
    height: 14%;
    top: 39%;
    left: 21%;
    background: url('../../Content/Images/Buyers/buyers-woman-brow-1.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: clipart-buyers-woman-brow 4s ease-in-out infinite;
}

.clipart-buyers .clipart-woman-brow-2 {
    width: 14%;
    height: 14%;
    top: 39%;
    left: 53%;
    background: url('../../Content/Images/Buyers/buyers-woman-brow-2.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: clipart-buyers-woman-brow 4s ease-in-out infinite;
}

@keyframes clipart-buyers-woman-brow {
    0% {
        transform: translateY(0%);
    }

    30% {
        transform: translateY(0%);
    }

    32% {
        transform: translateY(-20%);
    }

    54% {
        transform: translateY(-20%);
    }

    56% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

@keyframes clipart-buyers-woman-head {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(-10deg);
    }
}

@keyframes clipart-buyers-woman-hand {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(-10deg);
    }
}

@keyframes clipart-buyers-man2-brows {
    0% {
        transform: translateY(0%);
    }

    20% {
        transform: translateY(0%);
    }

    22% {
        transform: translateY(-20%);
    }

    40% {
        transform: translateY(-20%);
    }

    42% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

@keyframes clipart-buyers-man2-eyes {
    0% {
        transform: scaleY(1);
    }

    60% {
        transform: scaleY(1);
    }

    62% {
        transform: scaleY(0);
    }

    64% {
        transform: scaleY(0);
    }

    66% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes clipart-buyers-man2-head {
    0% {
        transform: translateY(0%);
    }

    40% {
        transform: translateY(0%);
    }

    45% {
        transform: translateY(2%);
    }

    50% {
        transform: translateY(2%);
    }

    55% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

@keyframes clipart-buyers-man1-brow2 {
    0% {
        transform: translateY(0%) rotate(7deg);
    }

    20% {
        transform: translateY(0%) rotate(7deg);
    }

    22% {
        transform: translateY(-20%) rotate(7deg);
    }

    40% {
        transform: translateY(-20%) rotate(7deg);
    }

    42% {
        transform: translateY(0%) rotate(7deg);
    }

    100% {
        transform: translateY(0%) rotate(7deg);
    }
}

@keyframes clipart-buyers-man1-brow1 {
    0% {
        transform: translateY(0%) rotate(-6deg);
    }

    20% {
        transform: translateY(0%) rotate(-6deg);
    }

    22% {
        transform: translateY(-20%) rotate(-6deg);
    }

    40% {
        transform: translateY(-20%) rotate(-6deg);
    }

    42% {
        transform: translateY(0%) rotate(-6deg);
    }

    100% {
        transform: translateY(0%) rotate(-6deg);
    }
}


@keyframes clipart-buyers-man1-eyes {
    0% {
        transform: scaleY(1);
    }

    30% {
        transform: scaleY(1);
    }

    32% {
        transform: scaleY(0);
    }

    34% {
        transform: scaleY(0);
    }

    36% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes clipart-buyers-man1-head {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(10deg);
    }
}

@keyframes clipart-buyers-man1-hand {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(13deg);
    }
}
/* #endregion ------- /Clipart Buyers ------------------ */
/* #region -------------------------- Leads promotion page ------------------------------ */
/* #region Home */
.leads-promotion-page .home {
    display: block;
    width: 100%;
    height: 640px;
    background: url("../../Content/Images/Cliparts/clipart-room-green.svg") repeat-x center bottom #E6F4ED;
    background-size: auto 150%;
    overflow: hidden;
}

    .leads-promotion-page .home .container {
        height: 100%;
    }

    .leads-promotion-page .home .nav-menu {
        display: block;
        width: 100%;
        list-style: none;
        padding-inline: 0px;
        margin-inline: 0px;
        padding-block-start: 15px;
    }

        .leads-promotion-page .home .nav-menu > li {
            display: inline-block;
        }

            .leads-promotion-page .home .nav-menu > li > a {
                display: inline-block;
                padding-block: 20px;
                text-decoration: none;
                color: var(--color-text-muted);
                text-transform: uppercase;
            }

                .leads-promotion-page .home .nav-menu > li > a:hover {
                    transition: opacity 0.2s ease;
                    opacity: 0.6;
                }

            .leads-promotion-page .home .nav-menu > li + li {
                margin-inline-start: 30px;
            }

.leads-promotion-page .content {
    display: flex;
    height: calc(100% - 72px);
}

.leads-promotion-page .text-side {
    width: 50%;
    height: 100%;
}

.leads-promotion-page .clipart-side {
    width: 50%;
    position: relative;
    height: 100%;
}

.leads-promotion-page .clipart-selectbuyers {
    position: absolute;
    width: 560px;
    height: 560px;
    top: -20px;
    right: -10%;
}

*[dir='rtl'] .leads-promotion-page .clipart-selectbuyers {
    transform: rotateY(180deg);
    left: -10%;
    right: auto;
}

.leads-promotion-page .content-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.leads-promotion-page h1 {
    margin-block-end: 40px;
    margin-block-start: -60px;
}

    .leads-promotion-page h1 span {
        color: var(--color-text-basic);
        text-transform: uppercase;
        font-weight: 800;
        line-height: 100%;
        display: block;
    }

        .leads-promotion-page h1 span:first-child {
            font-size: 58px;
        }

        .leads-promotion-page h1 span:last-child {
            font-size: 34px;
        }

*[lang="mk-MK"] .leads-promotion-page h1 span:first-child {
    font-size: 50px;
}

*[lang="mk-MK"] .leads-promotion-page h1 span:last-child {
    font-size: 20px;
}


.leads-promotion-page .btn-danger span {
    display: inline;
}

.leads-promotion-page .btn-danger small {
    display: none;
}

@media (max-width: 1199px) {
    .leads-promotion-page .text-side {
        width: 60%;
        height: 100%;
    }

    .leads-promotion-page .clipart-side {
        width: 40%;
        position: relative;
        height: 100%;
    }

    .leads-promotion-page .clipart-selectbuyers {
        position: absolute;
        width: 560px;
        height: 560px;
        top: -20px;
        right: -40%;
    }

    *[dir='rtl'] .leads-promotion-page .clipart-selectbuyers {
        transform: rotateY(180deg);
        left: -40%;
        right: auto;
    }
}

@media (max-width: 991px) {
    .leads-promotion-page h1 span:first-child {
        font-size: 60px;
    }

    .leads-promotion-page h1 span:last-child {
        font-size: 24px;
    }

    *[lang="mk-MK"] .leads-promotion-page h1 span:first-child {
        font-size: 40px;
        margin-block-end: 10px;
    }

    *[lang="mk-MK"] .leads-promotion-page h1 span:last-child {
        font-size: 16px;
    }

    *[lang="sr-Latn-RS"] .leads-promotion-page h1 span:first-child,
    *[lang="sr-Latn-ME"] .leads-promotion-page h1 span:first-child {
        font-size: 40px;
        margin-block-end: 10px;
    }

    *[lang="sr-Latn-RS"] .leads-promotion-page h1 span:last-child,
    *[lang="sr-Latn-ME"] .leads-promotion-page h1 span:last-child {
        font-size: 16px;
    }


    .leads-promotion-page .clipart-selectbuyers {
        position: absolute;
        width: 500px;
        height: 500px;
        top: 20px;
        right: -50%;
    }

    *[dir='rtl'] .leads-promotion-page .clipart-selectbuyers {
        transform: rotateY(180deg);
        left: -50%;
        right: auto;
    }
}

@media (max-width: 767px) {
    .leads-promotion-page .home .nav-menu {
        text-align: center;
    }

    .leads-promotion-page .home {
        height: 1060px;
        background-size: auto 100%;
    }

    .leads-promotion-page .content {
        display: block;
    }

    .leads-promotion-page .text-side {
        width: 100%;
        height: 50%;
        text-align: center;
    }

    .leads-promotion-page .clipart-side {
        width: 100%;
        height: 50%;
    }

    .leads-promotion-page h1 span:first-child {
        font-size: 48px;
    }

    .leads-promotion-page h1 span:last-child {
        font-size: 24px;
    }

    *[lang="mk-MK"] .leads-promotion-page h1 span:first-child {
        font-size: 40px;
        margin-block-end: 10px;
    }

    *[lang="mk-MK"] .leads-promotion-page h1 span:last-child {
        font-size: 16px;
    }

    *[lang="sr-Latn-RS"] .leads-promotion-page h1 span:first-child,
    *[lang="sr-Latn-ME"] .leads-promotion-page h1 span:first-child {
        font-size: 40px;
        margin-block-end: 10px;
    }

    *[lang="sr-Latn-RS"] .leads-promotion-page h1 span:last-child,
    *[lang="sr-Latn-ME"] .leads-promotion-page h1 span:last-child {
        font-size: 16px;
    }

    .leads-promotion-page .clipart-selectbuyers {
        position: absolute;
        width: 500px;
        height: 500px;
        top: -40px;
        right: 0px;
    }

    *[dir='rtl'] .leads-promotion-page .clipart-selectbuyers {
        transform: rotateY(180deg);
        left: 0px;
        right: auto;
    }
}

@media (max-width: 575px) {
    .leads-promotion-page .home .nav-menu {
        display: none;
    }

    .leads-promotion-page .home {
        height: 960px;
        background-size: auto 100%;
    }

    .leads-promotion-page h1 {
        padding-inline: 40px;
    }

        .leads-promotion-page h1 span:first-child {
            font-size: 50px;
        }

        .leads-promotion-page h1 span:last-child {
            font-size: 18px;
            margin-block-start: 20px;
        }

    *[lang="mk-MK"] .leads-promotion-page h1 span:first-child {
        font-size: 36px;
        margin-block-end: 10px;
    }

    *[lang="mk-MK"] .leads-promotion-page h1 span:last-child {
        font-size: 16px;
    }

    *[lang="sr-Latn-RS"] .leads-promotion-page h1 span:first-child,
    *[lang="sr-Latn-ME"] .leads-promotion-page h1 span:first-child {
        font-size: 36px;
        margin-block-end: 10px;
    }

    *[lang="sr-Latn-RS"] .leads-promotion-page h1 span:last-child,
    *[lang="sr-Latn-ME"] .leads-promotion-page h1 span:last-child {
        font-size: 16px;
    }

    .leads-promotion-page .text-side {
        width: 100%;
        height: 60%;
        text-align: center;
    }

    .leads-promotion-page .clipart-side {
        width: 100%;
        height: 40%;
    }

    .leads-promotion-page .clipart-selectbuyers {
        width: 500px;
        height: 500px;
        top: -120px;
    }

    *[dir='rtl'] .leads-promotion-page .clipart-selectbuyers {
        transform: rotateY(180deg);
        left: 0px;
        right: auto;
    }
}

@media (max-width: 475px) {

    .leads-promotion-page h1 {
        padding-inline: 20px;
    }

        .leads-promotion-page h1 span:first-child {
            font-size: 40px;
        }

        .leads-promotion-page h1 span:last-child {
            font-size: 18px;
            margin-block-start: 20px;
        }

    *[lang="mk-MK"] .leads-promotion-page h1 span:first-child {
        font-size: 32px;
        margin-block-end: 10px;
    }

    *[lang="mk-MK"] .leads-promotion-page h1 span:last-child {
        font-size: 16px;
    }

    *[lang="sr-Latn-RS"] .leads-promotion-page h1 span:first-child,
    *[lang="sr-Latn-ME"] .leads-promotion-page h1 span:first-child {
        font-size: 32px;
        margin-block-end: 10px;
    }

    *[lang="sr-Latn-RS"] .leads-promotion-page h1 span:last-child,
    *[lang="sr-Latn-ME"] .leads-promotion-page h1 span:last-child {
        font-size: 16px;
    }

    .leads-promotion-page .home {
        height: 810px;
        background-size: auto 100%;
    }

    .leads-promotion-page .clipart-selectbuyers {
        width: 400px;
        height: 400px;
        top: -70px;
    }

    *[dir='rtl'] .leads-promotion-page .clipart-selectbuyers {
        transform: rotateY(180deg);
        left: 0px;
        right: auto;
    }
}

@media (max-width: 400px) {

    .leads-promotion-page h1 {
        padding-inline: 0px;
    }

        .leads-promotion-page h1 span:first-child {
            font-size: 28px;
        }

        .leads-promotion-page h1 span:last-child {
            font-size: 16px;
            margin-block-start: 10px;
        }

    *[lang="mk-MK"] .leads-promotion-page h1 span:first-child {
        font-size: 26px;
        margin-block-end: 10px;
    }

    *[lang="mk-MK"] .leads-promotion-page h1 span:last-child {
        font-size: 16px;
    }

    *[lang="sr-Latn-RS"] .leads-promotion-page h1 span:first-child,
    *[lang="sr-Latn-ME"] .leads-promotion-page h1 span:first-child {
        font-size: 26px;
        margin-block-end: 10px;
    }

    *[lang="sr-Latn-RS"] .leads-promotion-page h1 span:last-child,
    *[lang="sr-Latn-ME"] .leads-promotion-page h1 span:last-child {
        font-size: 16px;
    }

    .leads-promotion-page .home {
        height: 760px;
        background-size: auto 100%;
    }

    .leads-promotion-page .text-side {
        width: 100%;
        height: 70%;
        text-align: center;
    }

    .leads-promotion-page .clipart-side {
        width: 100%;
        height: 30%;
    }

    .leads-promotion-page .clipart-selectbuyers {
        width: 320px;
        height: 320px;
        top: -70px;
        right: -20px;
    }

    *[dir='rtl'] .leads-promotion-page .clipart-selectbuyers {
        transform: rotateY(180deg);
        left: -20px;
        right: auto;
    }

    .leads-promotion-page .btn-danger span {
        display: none;
    }

    .leads-promotion-page .btn-danger small {
        display: inline;
    }
}

/* #endregion Home */
/* #region Benefits */
.leads-promotion-page .benefits {
    padding-block: 60px;
    background-color: #FFFFFF;
}

    .leads-promotion-page .benefits h2 {
        font-size: 36px;
        text-transform: uppercase;
        font-weight: 800;
        padding-bottom: 30px;
        width: 100%;
        text-align: center;
    }

    .leads-promotion-page .benefits .benefits-items {
        display: flex;
    }

        .leads-promotion-page .benefits .benefits-items .item {
            width: 33.33%;
            text-align: center;
            padding-inline: 30px;
            position: relative;
        }

    .leads-promotion-page .benefits .clipart-leads-stopwatch,
    .leads-promotion-page .benefits .clipart-visitors,
    .leads-promotion-page .benefits .clipart-leads-yourbuyer {
        width: 256px;
        height: 256px;
        margin: 0px auto 20px auto;
    }


    .leads-promotion-page .benefits h3 {
        display: inline-block;
        width: 100%;
        font-size: 20px;
        line-height: 26px;
        font-weight: 700;
        color: var(--color-text-basic);
        margin-block-end: 10px;
    }

    .leads-promotion-page .benefits p {
        display: inline-block;
        width: 100%;
        font-size: 16px;
        line-height: 21px;
        font-weight: 400;
        color: var(--color-text-muted);
    }

@media (max-width: 1199px) {
    .leads-promotion-page .benefits .clipart-leads-stopwatch,
    .leads-promotion-page .benefits .clipart-visitors,
    .leads-promotion-page .benefits .clipart-leads-yourbuyer {
        width: 150px;
        height: 150px;
        margin: 0px auto 20px auto;
    }

    .leads-promotion-page .benefits .benefits-items .item {
        padding-inline: 20px;
    }
}

@media (max-width: 991px) {
    .leads-promotion-page .benefits h3 {
        font-size: 16px;
        line-height: 18px;
        margin-block-end: 10px;
    }

    .leads-promotion-page .benefits p {
        font-size: 14px;
        line-height: 16px;
    }

    .leads-promotion-page .benefits h2 {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .leads-promotion-page .benefits .benefits-items {
        display: block;
    }

        .leads-promotion-page .benefits .benefits-items .item {
            width: 100%;
        }

            .leads-promotion-page .benefits .benefits-items .item + .item {
                margin-block-start: 40px;
            }

    .leads-promotion-page .benefits .clipart-leads-stopwatch,
    .leads-promotion-page .benefits .clipart-visitors,
    .leads-promotion-page .benefits .clipart-leads-yourbuyer {
        width: 250px;
        height: 250px;
    }
}

@media (max-width: 550px) {
    .leads-promotion-page .benefits .clipart-leads-stopwatch,
    .leads-promotion-page .benefits .clipart-visitors,
    .leads-promotion-page .benefits .clipart-leads-yourbuyer {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 420px) {
    .leads-promotion-page .benefits {
        padding-block: 40px;
    }

        .leads-promotion-page .benefits h2 {
            font-size: 20px;
        }
}

/* #endregion Benefits */
/* #region How does it work */
.leads-promotion-page .how-it-works {
    padding-block: 60px;
    background-color: #F9F9F9;
}

    .leads-promotion-page .how-it-works h2 {
        font-size: 36px;
        text-transform: uppercase;
        font-weight: 800;
        padding-bottom: 30px;
        width: 100%;
        text-align: center;
    }

    .leads-promotion-page .how-it-works .steps {
        display: flex;
    }

    .leads-promotion-page .how-it-works .step {
        width: 33.33%;
        text-align: center;
        padding-inline: 30px;
        position: relative;
    }

    .leads-promotion-page .how-it-works .number {
        display: inline-block;
        border-radius: 50%;
        font-size: 46px;
        color: var(--color-text-primary);
        background-color: #E6F4ED;
        font-weight: 400;
        width: 120px;
        height: 120px;
        padding: 34px;
        margin-block-end: 20px;
    }

    .leads-promotion-page .how-it-works h3 {
        display: inline-block;
        width: 100%;
        font-size: 20px;
        line-height: 26px;
        font-weight: 700;
        color: var(--color-text-basic);
        margin-block-end: 10px;
    }

    .leads-promotion-page .how-it-works p {
        display: inline-block;
        width: 100%;
        font-size: 16px;
        line-height: 21px;
        font-weight: 400;
        color: var(--color-text-muted);
    }

    .leads-promotion-page .how-it-works .step-1 .arc-arrow {
        display: block;
        top: 0px;
        left: 72%;
        position: absolute;
        z-index: 1;
        width: 200px;
        height: 60px;
        background: url('../../Content/Images/Cliparts/clipart-arc-arrow-1.svg') no-repeat center center transparent;
        background-size: contain;
    }

*[dir='rtl'] .leads-promotion-page .how-it-works .step-1 .arc-arrow {
    transform: rotateY(180deg);
    left: auto;
    right: 72%;
}

.leads-promotion-page .how-it-works .step-2 .arc-arrow {
    display: block;
    top: 60px;
    left: 72%;
    position: absolute;
    z-index: 1;
    width: 200px;
    height: 60px;
    background: url('../../Content/Images/Cliparts/clipart-arc-arrow-2.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir="rtl"] .leads-promotion-page .how-it-works .step-2 .arc-arrow {
    transform: rotateY(180deg);
    left: auto;
    right: 72%;
}

@media (max-width: 1199px) {
    .leads-promotion-page .how-it-works .number {
        display: inline-block;
        border-radius: 50%;
        font-size: 32px;
        color: var(--color-text-primary);
        background-color: #E6F4ED;
        font-weight: 400;
        width: 80px;
        height: 80px;
        padding: 22px;
        margin-block-end: 20px;
    }

    .leads-promotion-page .how-it-works .step {
        padding-inline: 20px;
    }

    .leads-promotion-page .how-it-works .step-1 .arc-arrow {
        top: -15px;
        left: 68%;
    }

    *[dir='rtl'] .leads-promotion-page .how-it-works .step-1 .arc-arrow {
        right: 68%;
        left: auto;
    }

    .leads-promotion-page .how-it-works .step-2 .arc-arrow {
        top: 30px;
        left: 68%;
    }

    *[dir='rtl'] .leads-promotion-page .how-it-works .step-2 .arc-arrow {
        right: 68%;
        left: auto;
    }
}

@media (max-width: 991px) {
    .leads-promotion-page .how-it-works .step-1 .arc-arrow {
        top: -10px;
        left: 74%;
        width: 120px;
    }

    *[dir='rtl'] .leads-promotion-page .how-it-works .step-1 .arc-arrow {
        right: 74%;
        left: auto;
    }

    .leads-promotion-page .how-it-works .step-2 .arc-arrow {
        top: 30px;
        left: 74%;
        width: 120px;
    }

    *[dir='rtl'] .leads-promotion-page .how-it-works .step-2 .arc-arrow {
        right: 74%;
        left: auto;
    }

    .leads-promotion-page .how-it-works h3 {
        font-size: 16px;
        line-height: 18px;
    }

    .leads-promotion-page .how-it-works p {
        font-size: 14px;
        line-height: 16px;
    }

    .leads-promotion-page .how-it-works .step {
        padding-inline: 15px;
    }

    .leads-promotion-page .how-it-works h2 {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .leads-promotion-page .how-it-works .steps {
        display: block;
    }

    .leads-promotion-page .how-it-works .step {
        width: 100%;
        text-align: left;
        padding-inline-start: 80px;
    }

    *[dir='rtl'] .leads-promotion-page .how-it-works .step {
        text-align: right;
    }

    .leads-promotion-page .how-it-works .number {
        text-align: center;
        position: absolute;
        left: 0px;
        width: 60px;
        height: 60px;
        font-size: 32px;
        padding: 11px;
        margin-block-end: 0px;
    }

    *[dir="rtl"] .leads-promotion-page .how-it-works .number {
        right: 0px;
        left: auto;
    }

    .leads-promotion-page .how-it-works .step-1 .arc-arrow,
    .leads-promotion-page .how-it-works .step-2 .arc-arrow {
        display: none;
    }

    .leads-promotion-page .how-it-works .step.step-2,
    .leads-promotion-page .how-it-works .step.step-3 {
        margin-top: 40px;
    }
}

@media (max-width: 420px) {
    .leads-promotion-page .how-it-works h2 {
        font-size: 20px;
    }

    .leads-promotion-page .how-it-works {
        padding-block: 40px;
    }
}

@media (max-width: 350px) {
    .leads-promotion-page .how-it-works .number {
        width: 40px;
        height: 40px;
        font-size: 24px;
        padding: 5px;
    }

    .leads-promotion-page .how-it-works .step {
        padding-inline-start: 50px;
    }
}
/* #endregion How does it work */
/* #region FAQ */
.leads-promotion-page .faq {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: rgba(255, 255, 255, 1);
}

    .leads-promotion-page .faq h2 {
        font-size: 36px;
        text-transform: uppercase;
        font-weight: 800;
        padding-bottom: 30px;
    }

.leads-promotion-page .content-container {
    width: 750px;
    margin: 0px auto 0px auto;
}

.leads-promotion-page .faq .collapser-btn {
    display: block;
    width: 100%;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    padding-block: 20px;
    padding-inline-end: 50px;
}

    .leads-promotion-page .faq .collapser-btn span {
        font-size: 20px;
        font-weight: 700;
    }

.leads-promotion-page .faq .collapser.collapsed .collapser-btn .ci-pazar-small {
    transform: rotate(180deg);
}

.leads-promotion-page .faq .collapser-btn .ci-pazar-small {
    font-size: 14px;
    position: absolute;
    top: calc(50% - 7px);
    right: 0px;
}

*[dir='rtl'] .leads-promotion-page .faq .collapser-btn .ci-pazar-small {
    right: auto;
    left: 0px;
}


.leads-promotion-page .faq .collapser-content span {
    font-size: 16px;
    color: var(--color-text-muted);
    font-weight: 400;
    padding: 0px 60px 10px 60px;
    display: block;
    width: 100%;
}

.leads-promotion-page .faq .collapser + .collapser {
    border-top: 1px solid #F2F2F2;
}

.leads-promotion-page .faq .collapser-content .pazar-list {
    padding-inline-start: 60px;
    padding-block-end: 20px;
}

.leads-promotion-page section.support {
    background-color: #F9F9F9;
    padding-top: 60px;
    padding-bottom: 120px;
    text-align: center;
}

.leads-promotion-page .clipart-support {
    width: 210px;
    height: 210px;
}

.leads-promotion-page section.support h2 {
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 800;
    padding-bottom: 10px;
    padding-top: 20px;
}

.leads-promotion-page section.support p {
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 30px;
}

.leads-promotion-page section.support .btn-primary {
}

@media (max-width: 991px) {
    .leads-promotion-page .faq {
        padding-top: 70px;
        padding-bottom: 80px;
    }

        .leads-promotion-page .faq h2 {
            font-size: 24px;
        }

        .leads-promotion-page .faq h3 {
            font-size: 14px;
        }

    .leads-promotion-page .content-container {
        width: 500px;
        margin: 0px auto 0px auto;
    }

    .leads-promotion-page .faq .collapser-btn span {
        font-size: 14px;
    }

    .leads-promotion-page .faq .collapser-content span {
        font-size: 14px;
        padding: 0px 30px 10px 30px;
    }
}

@media (max-width: 600px) {
    .leads-promotion-page .content-container {
        width: 100%;
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media (max-width: 500px) {
    .leads-promotion-page .content-container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 420px) {
    .leads-promotion-page .faq {
        padding-top: 40px;
        padding-bottom: 40px;
    }

        .leads-promotion-page .faq h2 {
            font-size: 20px;
        }

        .leads-promotion-page .faq h3 {
            font-size: 12px;
        }
}
/* #endregion FAQ */
/* #region Get in Touch */
.leads-promotion-page section.support {
    padding-bottom: 110px;
    padding-top: 60px;
    background-color: #F9F9F9;
}

    .leads-promotion-page section.support .clipart-support {
        width: 210px;
        height: 210px;
    }

    .leads-promotion-page section.support h2 {
        font-size: 36px;
        text-transform: uppercase;
        font-weight: 800;
        padding-bottom: 10px;
    }

    .leads-promotion-page section.support p {
        font-size: 18px;
        font-weight: 400;
        padding-bottom: 30px;
    }

@media (max-width: 991px) {
    .leads-promotion-page section.support h2 {
        font-size: 24px;
    }

    .leads-promotion-page section.support p {
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .leads-promotion-page section.support {
        padding-top: 20px;
        padding-bottom: 80px;
    }

        .leads-promotion-page section.support h2 {
            font-size: 20px;
        }

        .leads-promotion-page section.support p {
            font-size: 12px;
        }

        .leads-promotion-page section.support .clipart-support {
            width: 150px;
            height: 150px;
        }
}
/* #endregion Get in Touch */
/* #endregion ---------------------- /Leads promotion page ------------------------------- */
/* #region -------------- Clipart - Support --------------------- */
.clipart-support {
    display: block;
    width: 450px;
    height: 450px;
}

    .clipart-support .clipart-cloud-1,
    .clipart-support .clipart-cloud-2,
    .clipart-support .clipart-cloud-3,
    .clipart-support .clipart-cloud-4,
    .clipart-support .clipart-cloud-5,
    .clipart-support .clipart-cloud-6,
    .clipart-support .clipart-cloud-7,
    .clipart-support .clipart-cloud-8,
    .clipart-support .clipart-cloud-9,
    .clipart-support .clipart-cloud-10,
    .clipart-support .clipart-cloud-11 {
        display: block;
        position: absolute;
        border-radius: 50%;
        background-color: #EBEBEB;
        z-index: 1;
    }

    .clipart-support .clipart-cloud-1 {
        top: 18%;
        left: 8%;
        width: 27%;
        height: 27%;
        animation: clipart-support-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .clipart-support .clipart-cloud-2 {
        top: 8%;
        left: 19%;
        width: 17%;
        height: 17%;
        animation: clipart-support-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .clipart-support .clipart-cloud-3 {
        top: 5%;
        left: 27%;
        width: 30%;
        height: 30%;
        animation: clipart-support-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .clipart-support .clipart-cloud-4 {
        top: 12%;
        left: 47%;
        width: 20%;
        height: 20%;
        animation: clipart-support-cloud-4 1.3s ease-in-out infinite alternate;
    }

    .clipart-support .clipart-cloud-5 {
        top: 10%;
        left: 53%;
        width: 35%;
        height: 35%;
        animation: clipart-support-cloud-5 1.4s ease-in-out infinite alternate;
    }

    .clipart-support .clipart-cloud-6 {
        top: 30%;
        left: 64%;
        width: 35%;
        height: 35%;
        animation: clipart-support-cloud-6 1.6s ease-in-out infinite alternate;
    }

    .clipart-support .clipart-cloud-7 {
        top: 49%;
        left: 41%;
        width: 45%;
        height: 45%;
        animation: clipart-support-cloud-7 1.5s ease-in-out infinite alternate;
    }

    .clipart-support .clipart-cloud-8 {
        top: 68%;
        left: 24%;
        width: 28%;
        height: 28%;
        animation: clipart-support-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .clipart-support .clipart-cloud-9 {
        top: 51%;
        left: 17%;
        width: 28%;
        height: 28%;
        animation: clipart-support-cloud-9 1.3s ease-in-out infinite alternate;
    }

    .clipart-support .clipart-cloud-10 {
        top: 39%;
        left: 1%;
        width: 36%;
        height: 36%;
        animation: clipart-support-cloud-10 1.4s ease-in-out infinite alternate;
    }

    .clipart-support .clipart-cloud-11 {
        top: 21%;
        left: 20%;
        width: 56%;
        height: 56%;
    }

@keyframes clipart-support-cloud-1 {
    from {
        transform: translate(-7%, -7%);
    }

    to {
        transform: translate(7%, 7%);
    }
}

@keyframes clipart-support-cloud-2 {
    from {
        transform: translate(8%, 8%);
    }

    to {
        transform: translate(-8%, -8%);
    }
}

@keyframes clipart-support-cloud-3 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

@keyframes clipart-support-cloud-4 {
    from {
        transform: translate(0%, 10%);
    }

    to {
        transform: translate(0%, -10%);
    }
}

@keyframes clipart-support-cloud-5 {
    from {
        transform: translate(3%, -7%);
    }

    to {
        transform: translate(-3%, 7%);
    }
}

@keyframes clipart-support-cloud-6 {
    from {
        transform: translate(-7%, 0%);
    }

    to {
        transform: translate(7%, 0%);
    }
}

@keyframes clipart-support-cloud-7 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(-5%, -5%);
    }
}

@keyframes clipart-support-cloud-8 {
    from {
        transform: translate(6%, -5%);
    }

    to {
        transform: translate(-6%, 5%);
    }
}

@keyframes clipart-support-cloud-9 {
    from {
        transform: translate(-9%, 9%);
    }

    to {
        transform: translate(6%, -5%);
    }
}

@keyframes clipart-support-cloud-10 {
    from {
        transform: translate(9%, 0%);
    }

    to {
        transform: translate(-9%, 0%);
    }
}


.clipart-support .clipart-body {
    display: block;
    position: absolute;
    top: 11%;
    left: 8%;
    width: 83%;
    height: 83%;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Support/clipart-body.svg') no-repeat center center transparent;
    background-size: contain;
}

.clipart-support .clipart-eye-left {
    display: block;
    position: absolute;
    top: 30%;
    left: 40%;
    width: 8%;
    height: 8%;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Support/clipart-eye.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-customer-support-eyes 3s ease-in-out infinite;
}

.clipart-support .clipart-eye-right {
    display: block;
    position: absolute;
    top: 30%;
    left: 58%;
    width: 8%;
    height: 8%;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Support/clipart-eye.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-customer-support-eyes 3s ease-in-out infinite;
}



.clipart-support .clipart-brow-left {
    display: block;
    position: absolute;
    top: 23%;
    left: 40%;
    width: 8%;
    height: 8%;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Support/clipart-brow-left.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-customer-support-brows 3s ease-in-out infinite;
}

.clipart-support .clipart-brow-right {
    display: block;
    position: absolute;
    top: 23%;
    left: 58%;
    width: 8%;
    height: 8%;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Support/clipart-brow-right.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-customer-support-brows 3s ease-in-out infinite;
}


/* #endregion ----------- Clipart - Support --------------------- */
/* #region -------------- Clipart - Stopwatch ------------------- */
.clipart-leads-stopwatch {
    display: block;
    width: 450px;
    height: 450px;
}

    .clipart-leads-stopwatch .clipart-cloud-1,
    .clipart-leads-stopwatch .clipart-cloud-2,
    .clipart-leads-stopwatch .clipart-cloud-3,
    .clipart-leads-stopwatch .clipart-cloud-4,
    .clipart-leads-stopwatch .clipart-cloud-5,
    .clipart-leads-stopwatch .clipart-cloud-6,
    .clipart-leads-stopwatch .clipart-cloud-7,
    .clipart-leads-stopwatch .clipart-cloud-8,
    .clipart-leads-stopwatch .clipart-cloud-9,
    .clipart-leads-stopwatch .clipart-cloud-10,
    .clipart-leads-stopwatch .clipart-cloud-11,
    .clipart-leads-stopwatch .clipart-cloud-12 {
        display: block;
        position: absolute;
        border-radius: 50%;
        background-color: #EBEBEB;
        z-index: 1;
    }

    .clipart-leads-stopwatch .clipart-cloud-1 {
        top: 14%;
        left: 12%;
        width: 24%;
        height: 24%;
        animation: clipart-leads-stopwatch-cloud-1 1.6s ease-in-out infinite alternate;
    }

    .clipart-leads-stopwatch .clipart-cloud-2 {
        top: 3%;
        left: 23%;
        width: 28%;
        height: 28%;
        animation: clipart-leads-stopwatch-cloud-2 1.4s ease-in-out infinite alternate;
    }

    .clipart-leads-stopwatch .clipart-cloud-3 {
        top: 6%;
        left: 46%;
        width: 15%;
        height: 15%;
        animation: clipart-leads-stopwatch-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .clipart-leads-stopwatch .clipart-cloud-4 {
        top: 4%;
        left: 53%;
        width: 33%;
        height: 33%;
        animation: clipart-leads-stopwatch-cloud-4 1.3s ease-in-out infinite alternate;
    }

    .clipart-leads-stopwatch .clipart-cloud-5 {
        top: 18%;
        left: 71%;
        width: 22%;
        height: 22%;
        animation: clipart-leads-stopwatch-cloud-5 1.6s ease-in-out infinite alternate;
    }

    .clipart-leads-stopwatch .clipart-cloud-6 {
        top: 27%;
        left: 55%;
        width: 45%;
        height: 45%;
        animation: clipart-leads-stopwatch-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .clipart-leads-stopwatch .clipart-cloud-7 {
        top: 60%;
        left: 63%;
        width: 28%;
        height: 28%;
        animation: clipart-leads-stopwatch-cloud-7 1.4s ease-in-out infinite alternate;
    }

    .clipart-leads-stopwatch .clipart-cloud-8 {
        top: 61%;
        left: 31%;
        width: 38%;
        height: 38%;
        animation: clipart-leads-stopwatch-cloud-8 1.6s ease-in-out infinite alternate;
    }

    .clipart-leads-stopwatch .clipart-cloud-9 {
        top: 70%;
        left: 17%;
        width: 24%;
        height: 24%;
        animation: clipart-leads-stopwatch-cloud-9 1.5s ease-in-out infinite alternate;
    }

    .clipart-leads-stopwatch .clipart-cloud-10 {
        top: 51%;
        left: 4%;
        width: 32%;
        height: 32%;
        animation: clipart-leads-stopwatch-cloud-10 1.4s ease-in-out infinite alternate;
    }

    .clipart-leads-stopwatch .clipart-cloud-11 {
        top: 26%;
        left: 0%;
        width: 42%;
        height: 42%;
        animation: clipart-leads-stopwatch-cloud-11 1.7s ease-in-out infinite alternate;
    }

    .clipart-leads-stopwatch .clipart-cloud-12 {
        top: 14%;
        left: 19%;
        width: 62%;
        height: 62%;
    }

@keyframes clipart-leads-stopwatch-cloud-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(8%, 8%);
    }
}

@keyframes clipart-leads-stopwatch-cloud-2 {
    from {
        transform: translate(4%, 8%);
    }

    to {
        transform: translate(-4%, -8%);
    }
}

@keyframes clipart-leads-stopwatch-cloud-3 {
    from {
        transform: translate(0%, -10%);
    }

    to {
        transform: translate(0%, 10%);
    }
}

@keyframes clipart-leads-stopwatch-cloud-4 {
    from {
        transform: translate(-4%, 8%);
    }

    to {
        transform: translate(4%, -8%);
    }
}

@keyframes clipart-leads-stopwatch-cloud-5 {
    from {
        transform: translate(8%, -8%);
    }

    to {
        transform: translate(-8%, 8%);
    }
}

@keyframes clipart-leads-stopwatch-cloud-6 {
    from {
        transform: translate(-6%, 0%);
    }

    to {
        transform: translate(6%, 0%);
    }
}

@keyframes clipart-leads-stopwatch-cloud-7 {
    from {
        transform: translate(7%, 7%);
    }

    to {
        transform: translate(-7%, -7%);
    }
}

@keyframes clipart-leads-stopwatch-cloud-8 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

@keyframes clipart-leads-stopwatch-cloud-9 {
    from {
        transform: translate(-6%, 6%);
    }

    to {
        transform: translate(6%, -6%);
    }
}

@keyframes clipart-leads-stopwatch-cloud-10 {
    from {
        transform: translate(8%, -4%);
    }

    to {
        transform: translate(-8%, 4%);
    }
}

@keyframes clipart-leads-stopwatch-cloud-11 {
    from {
        transform: translate(-7%, -1%);
    }

    to {
        transform: translate(7%, 1%);
    }
}

.clipart-leads-stopwatch .body {
    display: block;
    position: absolute;
    z-index: 1;
    width: 70%;
    height: 70%;
    top: 13%;
    left: 14%;
    background: url('../../Content/Images/Cliparts/Stopwatch/clipart-body.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-stopwatch-body 2s ease-in-out infinite alternate;
}

@keyframes clipart-leads-stopwatch-body {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

.clipart-leads-stopwatch .arrow {
    display: block;
    position: absolute;
    z-index: 1;
    width: 46%;
    height: 20%;
    top: 45%;
    left: 13%;
    background: url('../../Content/Images/Cliparts/Stopwatch/clipart-arrow.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-stopwatch-arrow 4s ease-in-out infinite alternate;
    transform-origin: 80% 50%;
}

@keyframes clipart-leads-stopwatch-arrow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(90deg);
    }
}

.clipart-leads-stopwatch .shadow {
    display: block;
    position: absolute;
    z-index: 1;
    width: 51%;
    height: 6%;
    top: 86%;
    left: 24%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    animation: clipart-leads-stopwatch-shadow 2s ease-in-out infinite alternate;
}

@keyframes clipart-leads-stopwatch-shadow {
    from {
        transform: scale(1);
        background-color: rgba(0, 0, 0, 0.15);
    }

    to {
        transform: scale(0.8);
        background-color: rgba(0, 0, 0, 0.1);
    }
}


/* #endregion ----------- Clipart - Stopwatch ------------------- */
/* #region -------------- Clipart - Visitors -------------------- */
.clipart-visitors {
    display: block;
    width: 450px;
    height: 450px;
}

    .clipart-visitors .clipart-cloud-1,
    .clipart-visitors .clipart-cloud-2,
    .clipart-visitors .clipart-cloud-3,
    .clipart-visitors .clipart-cloud-4,
    .clipart-visitors .clipart-cloud-5,
    .clipart-visitors .clipart-cloud-6,
    .clipart-visitors .clipart-cloud-7,
    .clipart-visitors .clipart-cloud-8,
    .clipart-visitors .clipart-cloud-9,
    .clipart-visitors .clipart-cloud-10,
    .clipart-visitors .clipart-cloud-11,
    .clipart-visitors .clipart-cloud-12,
    .clipart-visitors .clipart-cloud-13 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #EBEBEB;
    }

    .clipart-visitors .clipart-cloud-1 {
        width: 20%;
        height: 20%;
        top: 16%;
        left: 10%;
        animation: clipart-visitors-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .clipart-visitors .clipart-cloud-2 {
        width: 31%;
        height: 31%;
        top: 5%;
        left: 19%;
        animation: clipart-visitors-cloud-2 1.5s ease-in-out infinite alternate;
    }

    .clipart-visitors .clipart-cloud-3 {
        width: 21%;
        height: 21%;
        top: 2%;
        left: 40%;
        animation: clipart-visitors-cloud-3 1.6s ease-in-out infinite alternate;
    }

    .clipart-visitors .clipart-cloud-4 {
        width: 21%;
        height: 21%;
        top: 9%;
        left: 51%;
        animation: clipart-visitors-cloud-4 1.3s ease-in-out infinite alternate;
    }

    .clipart-visitors .clipart-cloud-5 {
        width: 30%;
        height: 30%;
        top: 6%;
        left: 59%;
        animation: clipart-visitors-cloud-5 1.5s ease-in-out infinite alternate;
    }

    .clipart-visitors .clipart-cloud-6 {
        width: 35%;
        height: 35%;
        top: 22%;
        left: 65%;
        animation: clipart-visitors-cloud-6 1.6s ease-in-out infinite alternate;
    }

    .clipart-visitors .clipart-cloud-7 {
        width: 25%;
        height: 25%;
        top: 46%;
        left: 70%;
        animation: clipart-visitors-cloud-7 1.4s ease-in-out infinite alternate;
    }

    .clipart-visitors .clipart-cloud-8 {
        width: 30%;
        height: 30%;
        top: 60%;
        left: 65%;
        animation: clipart-visitors-cloud-8 1.3s ease-in-out infinite alternate;
    }

    .clipart-visitors .clipart-cloud-9 {
        width: 34%;
        height: 34%;
        top: 64%;
        left: 39%;
        animation: clipart-visitors-cloud-9 1.5s ease-in-out infinite alternate;
    }

    .clipart-visitors .clipart-cloud-10 {
        width: 28%;
        height: 28%;
        top: 64%;
        left: 21%;
        animation: clipart-visitors-cloud-10 1.6s ease-in-out infinite alternate;
    }

    .clipart-visitors .clipart-cloud-11 {
        width: 38%;
        height: 38%;
        top: 45%;
        left: 2%;
        animation: clipart-visitors-cloud-11 1.5s ease-in-out infinite alternate;
    }

    .clipart-visitors .clipart-cloud-12 {
        width: 28%;
        height: 28%;
        top: 26%;
        left: 2%;
        animation: clipart-visitors-cloud-12 1.6s ease-in-out infinite alternate;
    }

    .clipart-visitors .clipart-cloud-13 {
        width: 60%;
        height: 60%;
        top: 19%;
        left: 23%;
    }

@keyframes clipart-visitors-cloud-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(8%, 8%);
    }
}

@keyframes clipart-visitors-cloud-2 {
    from {
        transform: translate(6%, 6%);
    }

    to {
        transform: translate(-6%, -6%);
    }
}

@keyframes clipart-visitors-cloud-3 {
    from {
        transform: translate(0%, -8%);
    }

    to {
        transform: translate(0%, 8%);
    }
}

@keyframes clipart-visitors-cloud-4 {
    from {
        transform: translate(0%, 12%);
    }

    to {
        transform: translate(0%, -12%);
    }
}

@keyframes clipart-visitors-cloud-5 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes clipart-visitors-cloud-6 {
    from {
        transform: translate(-7%, 2%);
    }

    to {
        transform: translate(7%, -2%);
    }
}

@keyframes clipart-visitors-cloud-7 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

@keyframes clipart-visitors-cloud-8 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes clipart-visitors-cloud-9 {
    from {
        transform: translate(0%, 7%);
    }

    to {
        transform: translate(0%, -7%);
    }
}

@keyframes clipart-visitors-cloud-10 {
    from {
        transform: translate(6%, -6%);
    }

    to {
        transform: translate(-6%, 6%);
    }
}

@keyframes clipart-visitors-cloud-11 {
    from {
        transform: translate(-7%, 2%);
    }

    to {
        transform: translate(7%, -2%);
    }
}

@keyframes clipart-visitors-cloud-12 {
    from {
        transform: translate(7%, 0%);
    }

    to {
        transform: translate(-7%, 0%);
    }
}

.clipart-visitors .clipart-body {
    display: block;
    position: absolute;
    z-index: 1;
    width: 60%;
    height: 60%;
    top: 42%;
    left: 20%;
    background: url('../../Content/Images/Cliparts/Visitors/clipart-body.svg') no-repeat center center transparent;
    background-size: contain;
}

.clipart-visitors .clipart-head {
    display: block;
    position: absolute;
    z-index: 1;
    width: 60%;
    height: 60%;
    top: -37%;
    left: 3%;
    background: url('../../Content/Images/Cliparts/Visitors/clipart-head.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-visitors-head 4s ease-in-out infinite alternate;
    transform-origin: 50% 80%;
}

@keyframes clipart-leads-visitors-head {
    from {
        transform: rotate(10deg);
    }

    to {
        transform: rotate(-5deg);
    }
}

.clipart-visitors .clipart-brows {
    display: block;
    position: absolute;
    z-index: 1;
    width: 45%;
    height: 6%;
    top: 43%;
    left: 34%;
    background: url('../../Content/Images/Cliparts/Visitors/clipart-brows.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-visitors-brows 4s ease-in-out infinite;
}

@keyframes clipart-leads-visitors-brows {
    0% {
        transform: translate(0%, 0%);
    }

    27% {
        transform: translate(0%, 0%);
    }

    30% {
        transform: translate(0%, -40%);
    }

    70% {
        transform: translate(0%, -40%);
    }

    73% {
        transform: translate(0%, 0%);
    }

    100% {
        transform: translate(0%, 0%);
    }
}

.clipart-visitors .clipart-eye-1 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 13%;
    height: 13%;
    top: 48%;
    left: 34%;
    background: url('../../Content/Images/Cliparts/Visitors/clipart-eye.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-visitors-eyes 2s ease-in-out infinite alternate;
}

.clipart-visitors .clipart-eye-2 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 13%;
    height: 13%;
    top: 48%;
    left: 66%;
    background: url('../../Content/Images/Cliparts/Visitors/clipart-eye.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-visitors-eyes 2s ease-in-out infinite alternate;
}

@keyframes clipart-leads-visitors-eyes {
    0% {
        transform: scale(1, 1);
    }

    72% {
        transform: scale(1, 1);
    }

    80% {
        transform: scale(1, 0);
    }

    90% {
        transform: scale(1, 1);
    }

    99% {
        transform: scale(1, 1);
    }
}

.clipart-visitors .clipart-mouth {
    display: block;
    position: absolute;
    z-index: 1;
    width: 14%;
    height: 14%;
    top: 68%;
    left: 51%;
    background: url('../../Content/Images/Cliparts/Visitors/clipart-mouth.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-visitors-mouth 4s ease-in-out infinite;
}

@keyframes clipart-leads-visitors-mouth {
    0% {
        transform: translate(0%, 0%);
    }

    27% {
        transform: translate(0%, 0%);
    }

    30% {
        transform: translate(-30%, 0%);
    }

    70% {
        transform: translate(-30%, 0%);
    }

    73% {
        transform: translate(0%, 0%);
    }

    100% {
        transform: translate(0%, 0%);
    }
}



.clipart-visitors .clipart-shoe {
    display: block;
    position: absolute;
    z-index: 1;
    width: 40%;
    height: 40%;
    top: 6%;
    left: 63%;
    background: url('../../Content/Images/Cliparts/Visitors/clipart-shoe.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-visitors-shoe 3s ease-in-out infinite alternate;
    transform-origin: 70% 30%;
}

@keyframes clipart-leads-visitors-shoe {
    from {
        transform: rotate(15deg);
    }

    to {
        transform: rotate(-10deg);
    }
}

.clipart-visitors .clipart-frame {
    display: block;
    position: absolute;
    z-index: 1;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    background: url('../../Content/Images/Cliparts/Visitors/clipart-frame.svg') no-repeat center center transparent;
    background-size: contain;
}

.clipart-visitors .clipart-record {
    display: block;
    position: absolute;
    z-index: 1;
    width: 8%;
    height: 8%;
    top: 10%;
    left: 83%;
    background: url('../../Content/Images/Cliparts/Visitors/clipart-record.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-visitors-record 1.2s ease infinite;
}

@keyframes clipart-leads-visitors-record {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    90% {
        opacity: 0;
    }

    99% {
        opacity: 1;
    }
}

/* #endregion ----------- Clipart - Visitors -------------------- */
/* #region ------------- Clipart - Your buyer ------------------- */
.clipart-leads-yourbuyer {
    display: block;
    width: 450px;
    height: 450px;
}

    .clipart-leads-yourbuyer .clipart-cloud-1,
    .clipart-leads-yourbuyer .clipart-cloud-2,
    .clipart-leads-yourbuyer .clipart-cloud-3,
    .clipart-leads-yourbuyer .clipart-cloud-4,
    .clipart-leads-yourbuyer .clipart-cloud-5,
    .clipart-leads-yourbuyer .clipart-cloud-6,
    .clipart-leads-yourbuyer .clipart-cloud-7,
    .clipart-leads-yourbuyer .clipart-cloud-8,
    .clipart-leads-yourbuyer .clipart-cloud-9,
    .clipart-leads-yourbuyer .clipart-cloud-10,
    .clipart-leads-yourbuyer .clipart-cloud-11 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #EBEBEB;
    }

    .clipart-leads-yourbuyer .clipart-cloud-1 {
        width: 30%;
        height: 30%;
        top: 20%;
        left: 8%;
        animation: clipart-leads-yourbuyer-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .clipart-leads-yourbuyer .clipart-cloud-2 {
        width: 32%;
        height: 32%;
        top: 2%;
        left: 18%;
        animation: clipart-leads-yourbuyer-cloud-2 1.5s ease-in-out infinite alternate;
    }

    .clipart-leads-yourbuyer .clipart-cloud-3 {
        width: 22%;
        height: 22%;
        top: 8%;
        left: 40%;
        animation: clipart-leads-yourbuyer-cloud-3 1.6s ease-in-out infinite alternate;
    }

    .clipart-leads-yourbuyer .clipart-cloud-4 {
        width: 36%;
        height: 36%;
        top: 5%;
        left: 52%;
        animation: clipart-leads-yourbuyer-cloud-4 1.4s ease-in-out infinite alternate;
    }

    .clipart-leads-yourbuyer .clipart-cloud-5 {
        width: 24%;
        height: 24%;
        top: 24%;
        left: 73%;
        animation: clipart-leads-yourbuyer-cloud-5 1.6s ease-in-out infinite alternate;
    }

    .clipart-leads-yourbuyer .clipart-cloud-6 {
        width: 35%;
        height: 35%;
        top: 38%;
        left: 64%;
        animation: clipart-leads-yourbuyer-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .clipart-leads-yourbuyer .clipart-cloud-7 {
        width: 40%;
        height: 40%;
        top: 54%;
        left: 52%;
        animation: clipart-leads-yourbuyer-cloud-7 1.4s ease-in-out infinite alternate;
    }

    .clipart-leads-yourbuyer .clipart-cloud-8 {
        width: 38%;
        height: 38%;
        top: 61%;
        left: 22%;
        animation: clipart-leads-yourbuyer-cloud-8 1.6s ease-in-out infinite alternate;
    }

    .clipart-leads-yourbuyer .clipart-cloud-9 {
        width: 35%;
        height: 35%;
        top: 50%;
        left: 9%;
        animation: clipart-leads-yourbuyer-cloud-9 1.5s ease-in-out infinite alternate;
    }

    .clipart-leads-yourbuyer .clipart-cloud-10 {
        width: 24%;
        height: 24%;
        top: 38%;
        left: 1%;
        animation: clipart-leads-yourbuyer-cloud-10 1.7s ease-in-out infinite alternate;
    }

    .clipart-leads-yourbuyer .clipart-cloud-11 {
        width: 58%;
        height: 58%;
        top: 20%;
        left: 22%;
    }

@keyframes clipart-leads-yourbuyer-cloud-1 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes clipart-leads-yourbuyer-cloud-2 {
    from {
        transform: translate(2%, 7%);
    }

    to {
        transform: translate(-2%, -7%);
    }
}

@keyframes clipart-leads-yourbuyer-cloud-3 {
    from {
        transform: translate(0%, -9%);
    }

    to {
        transform: translate(0%, 9%);
    }
}

@keyframes clipart-leads-yourbuyer-cloud-4 {
    from {
        transform: translate(-4%, 6%);
    }

    to {
        transform: translate(4%, -6%);
    }
}

@keyframes clipart-leads-yourbuyer-cloud-5 {
    from {
        transform: translate(8%, -8%);
    }

    to {
        transform: translate(-8%, 8%);
    }
}

@keyframes clipart-leads-yourbuyer-cloud-6 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(8%, 0%);
    }
}

@keyframes clipart-leads-yourbuyer-cloud-7 {
    from {
        transform: translate(6%, 6%);
    }

    to {
        transform: translate(-6%, -6%);
    }
}

@keyframes clipart-leads-yourbuyer-cloud-8 {
    from {
        transform: translate(2%, -6%);
    }

    to {
        transform: translate(-2%, 6%);
    }
}

@keyframes clipart-leads-yourbuyer-cloud-9 {
    from {
        transform: translate(-5%, 5%);
    }

    to {
        transform: translate(5%, -5%);
    }
}

@keyframes clipart-leads-yourbuyer-cloud-10 {
    from {
        transform: translate(10%, 0%);
    }

    to {
        transform: translate(-10%, 0%);
    }
}

.clipart-leads-yourbuyer .clipart-boards {
    display: block;
    position: absolute;
    z-index: 1;
    width: 70%;
    height: 70%;
    top: 15%;
    left: 4%;
    background: url('../../Content/Images/Cliparts/YourBuyer/clipart-boards.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-yourbuyer-boards 3s ease-in-out infinite alternate;
}

@keyframes clipart-leads-yourbuyer-boards {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

.clipart-leads-yourbuyer .clipart-body {
    display: block;
    position: absolute;
    z-index: 1;
    width: 50%;
    height: 50%;
    top: 45%;
    left: 42%;
    background: url('../../Content/Images/Cliparts/YourBuyer/clipart-body.svg') no-repeat center center transparent;
    background-size: contain;
}

.clipart-leads-yourbuyer .clipart-head {
    display: block;
    position: absolute;
    z-index: 1;
    width: 35%;
    height: 35%;
    top: 16%;
    left: 46%;
    background: url('../../Content/Images/Cliparts/YourBuyer/clipart-head.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-yourbuyer-head 4s ease-in-out infinite alternate;
    transform-origin: 50% 80%;
}

@keyframes clipart-leads-yourbuyer-head {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(10deg);
    }
}

.clipart-leads-yourbuyer .clipart-brows {
    display: block;
    position: absolute;
    z-index: 1;
    width: 45%;
    height: 14%;
    top: 45%;
    left: 29%;
    background: url('../../Content/Images/Cliparts/YourBuyer/clipart-brows.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-yourbuyer-brows 3s ease-in-out infinite alternate;
}

@keyframes clipart-leads-yourbuyer-brows {
    0% {
        transform: translate(0%, 0%);
    }

    10% {
        transform: translate(0%, 0%);
    }

    15% {
        transform: translate(0%, -20%);
    }

    40% {
        transform: translate(0%, -20%);
    }

    45% {
        transform: translate(0%, 0%);
    }

    99% {
        transform: translate(0%, 0%);
    }
}


.clipart-leads-yourbuyer .clipart-eye-1 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 43%;
    height: 13%;
    top: 52%;
    left: 12%;
    background: url('../../Content/Images/Cliparts/YourBuyer/clipart-eye.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-yourbuyer-eyes 3s ease-in-out infinite alternate;
}

.clipart-leads-yourbuyer .clipart-eye-2 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 43%;
    height: 13%;
    top: 58%;
    left: 41%;
    background: url('../../Content/Images/Cliparts/YourBuyer/clipart-eye.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-yourbuyer-eyes 3s ease-in-out infinite alternate;
}


@keyframes clipart-leads-yourbuyer-eyes {
    0% {
        transform: scale(1, 1);
    }

    10% {
        transform: scale(1, 1);
    }

    15% {
        transform: scale(1, 0);
    }

    20% {
        transform: scale(1, 1);
    }

    99% {
        transform: scale(1, 1);
    }
}

/* #endregion --------- /Clipart - Your buyer ------------------- */
/* #region ------------ Clipart - Select Buyer ------------------ */
.clipart-selectbuyers {
    display: block;
    width: 450px;
    height: 450px;
}

    .clipart-selectbuyers .clipart-body {
        display: block;
        position: absolute;
        z-index: 1;
        width: 92%;
        height: 92%;
        top: 2%;
        left: -4%;
        background: url('../../Content/Images/Cliparts/SelectBuyers/clipart-body.svg') no-repeat center center transparent;
        background-size: contain;
    }

    .clipart-selectbuyers .clipart-brows {
        display: block;
        position: absolute;
        z-index: 1;
        width: 10%;
        height: 4%;
        top: 10%;
        left: 41%;
        background: url('../../Content/Images/Cliparts/SelectBuyers/clipart-brows.svg') no-repeat center center transparent;
        background-size: contain;
        animation: clipart-leads-selectbuyers-brows 4s ease-in-out infinite alternate;
    }

@keyframes clipart-leads-selectbuyers-brows {
    0% {
        transform: translate(0%, 0%);
    }

    30% {
        transform: translate(0%, 0%);
    }

    32% {
        transform: translate(0%, -15%);
    }

    60% {
        transform: translate(0%, -15%);
    }

    62% {
        transform: translate(0%, 0%);
    }

    99% {
        transform: translate(0%, 0%);
    }
}

.clipart-selectbuyers .clipart-card-3 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 30%;
    height: 21%;
    top: 10%;
    left: 54%;
    background: url('../../Content/Images/Cliparts/SelectBuyers/clipart-card-3.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-selectbuyers-card-3 4s ease-in-out infinite alternate;
}

@keyframes clipart-leads-selectbuyers-card-3 {
    from {
        transform: rotate(0deg) translate(0%, -10%);
    }

    to {
        transform: rotate(5deg) translate(0%, 10%);
    }
}

.clipart-selectbuyers .clipart-card-2 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 48%;
    height: 27%;
    top: 25%;
    left: 43%;
    background: url('../../Content/Images/Cliparts/SelectBuyers/clipart-card-2.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-selectbuyers-card-2 3s ease-in-out infinite alternate;
}

@keyframes clipart-leads-selectbuyers-card-2 {
    from {
        transform: rotate(5deg) translate(0%, 5%);
    }

    to {
        transform: rotate(0deg) translate(0%, -15%);
    }
}

.clipart-selectbuyers .clipart-card-1 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 52%;
    height: 34%;
    top: 44%;
    left: 41%;
    background: url('../../Content/Images/Cliparts/SelectBuyers/clipart-card-1.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-selectbuyers-card-1 3.5s ease-in-out infinite alternate;
}

@keyframes clipart-leads-selectbuyers-card-1 {
    from {
        transform: rotate(-2deg) translate(0%, 7%);
    }

    to {
        transform: rotate(5deg) translate(0%, -10%);
    }
}


.clipart-selectbuyers .clipart-hand-2 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 15%;
    height: 9%;
    top: 36.5%;
    left: 36.5%;
    background: url('../../Content/Images/Cliparts/SelectBuyers/clipart-hand-2.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-selectbuyers-hand-2 6s ease-in-out infinite;
    transform-origin: 105% -5%;
}

@keyframes clipart-leads-selectbuyers-hand-2 {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(-20deg);
    }

    60% {
        transform: rotate(-20deg);
    }

    80% {
        transform: rotate(0deg);
    }

    99% {
        transform: rotate(0deg);
    }
}

.clipart-selectbuyers .clipart-hand-1 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 25%;
    height: 24%;
    top: 16%;
    left: 13%;
    background: url('../../Content/Images/Cliparts/SelectBuyers/clipart-hand-1.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-selectbuyers-hand-1 3s ease-in-out infinite alternate;
    transform-origin: 90% 20%;
}

@keyframes clipart-leads-selectbuyers-hand-1 {
    from {
        transform: rotate(3deg);
    }

    to {
        transform: rotate(-8deg);
    }
}

.clipart-selectbuyers .clipart-tshirt {
    display: block;
    position: absolute;
    z-index: 1;
    width: 28%;
    height: 41%;
    top: 41%;
    left: 25%;
    background: url('../../Content/Images/Cliparts/SelectBuyers/clipart-tshirt.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-leads-selectbuyers-tshirt 6s ease-in-out infinite;
}

@keyframes clipart-leads-selectbuyers-tshirt {
    0% {
        transform: translate(0%, 0%);
    }

    10% {
        transform: translate(0%, 0%);
    }

    30% {
        transform: translate(8%, 10%);
    }

    60% {
        transform: translate(8%, 10%);
    }

    80% {
        transform: translate(0%, 0%);
    }

    99% {
        transform: translate(0%, 0%);
    }
}

.clipart-selectbuyers .clipart-shadow {
    display: block;
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    width: 51%;
    height: 7%;
    top: 90%;
    left: 15%;
    background-color: rgba(0, 0, 0, 0.1);
}


/* #endregion -------- /Clipart - Select Buyer ------------------ */

/* #region -------- Shimmers --------- */
.shimm-item .new-buyer-item {
    height: 68px;
    padding: 0px;
    margin: 0px;
}

@media (max-width: 991px) {
    .shimm-item .new-buyer-item {
        height: 110px;
    }
}

@media (max-width: 575px) {
    .shimm-item .new-buyer-item {
        height: 249px;
    }
}
/* #endregion ---- /Shimmers --------- */
/* #endregion ================================ /Potential Buyers ======================================= */
/* #region ======================================= Statistics ========================================== */
.transaction-layout > h1 {
    color: var(--color-text-basic);
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 30px;
    padding-left: 8px;
    padding-right: 8px;
}
/* #endregion ================================= /Statistics ========================================== */
/* #region ======================================= Account Menu ======================================== */
.ui-main-content .dd-one .dd-dropdown .account-menu.list-unstyled {
    display: block;
    position: relative;
}

    .ui-main-content .dd-one .dd-dropdown .account-menu.list-unstyled > li {
        position: relative;
        display: block;
        padding: 0px;
        margin: 0px;
        line-height: 16px;
        height: auto;
    }

        .ui-main-content .dd-one .dd-dropdown .account-menu.list-unstyled > li a {
            position: relative;
            display: block;
            padding: 8px 5px;
            min-height: 0px;
            min-width: 0px;
            border-bottom: 1px solid #efefef;
            font-weight: 400 !important;
        }

        .ui-main-content .dd-one .dd-dropdown .account-menu.list-unstyled > li:last-child a {
            border-bottom: 0px none transparent;
        }

        .ui-main-content .dd-one .dd-dropdown .account-menu.list-unstyled > li a i {
            display: inline-block;
            vertical-align: middle;
            width: 1em;
            margin: 0px;
        }

        .ui-main-content .dd-one .dd-dropdown .account-menu.list-unstyled > li a span {
            display: inline-block;
            vertical-align: middle;
        }

            .ui-main-content .dd-one .dd-dropdown .account-menu.list-unstyled > li a span.notice-watch-new.hide {
                display: none;
            }

        .ui-main-content .dd-one .dd-dropdown .account-menu.list-unstyled > li a:hover {
            color: var(--color-text-basic) !important;
        }


        .ui-main-content .dd-one .dd-dropdown .account-menu.list-unstyled > li a.login-mobile {
            text-align: left;
        }

            .ui-main-content .dd-one .dd-dropdown .account-menu.list-unstyled > li a.login-mobile i {
                display: inline-block;
                line-height: 1em;
                margin-top: -2px;
            }

            .ui-main-content .dd-one .dd-dropdown .account-menu.list-unstyled > li a.login-mobile p {
                display: inline-block;
                width: auto !important;
                margin: 0px !important;
                vertical-align: text-top;
                padding: 0px;
                line-height: 10px;
            }

        .ui-main-content .dd-one .dd-dropdown .account-menu.list-unstyled > li a span:empty {
            display: none;
        }

        .ui-main-content .dd-one .dd-dropdown .account-menu.list-unstyled > li a.login-mobile span {
            display: inline-block;
            vertical-align: middle;
            margin: 0px;
            position: absolute;
            text-align: center;
            padding: 8px 14px 8px 8px;
            top: calc(50% - 13px);
            right: 8px;
        }

            .ui-main-content .dd-one .dd-dropdown .account-menu.list-unstyled > li a.login-mobile span:empty {
                display: none;
            }

.dd-one .dd-dropdown .account-menu.list-unstyled .label.dd-span-alert {
    border-radius: var(--radius-4);
    padding: 5px 4px 5px 4px;
    text-align: center;
}

.mobile .account-menu.list-unstyled .label.dd-span-alert.notice-watch-new {
    display: inline;
}

.mobile .nav-tab-mobile-page-old .dd-old .dd-dropdown:after, .mobile .nav-tab-mobile-page-old .dd-old .dd-dropdown:before {
    left: auto;
    right: 30px;
}

.ui-main-content.dd-old .dd-menu .dd-dropdown:after, .ui-main-content.dd-old .dd-menu .dd-dropdown:before {
    left: 27px;
}

.ui-main-content .dd-menu.dd-one .dd-dropdown:after, .ui-main-content .dd-menu.dd-one .dd-dropdown:before {
    left: 25px;
}

[dir='rtl'] .ui-main-content .dd-menu.dd-one .dd-dropdown:after, [dir='rtl'] .ui-main-content .dd-menu.dd-one .dd-dropdown:before {
    left: 54px;
}

.mobile .ui-main-content .dd-menu.dd-one .dd-dropdown:after, .mobile .ui-main-content .dd-menu.dd-one .dd-dropdown:before {
    left: auto;
}

.account-menu-header tr td {
    vertical-align: middle;
}

.account-menu-header .user-badge {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-neutral-600);
    position: relative;
}

    .account-menu-header .user-badge > * {
        position: absolute;
        font-size: 32px;
        top: calc(50% - 16px);
        left: calc(50% - 16px);
    }

.account-menu-header tr td:first-child {
    width: 60px;
    text-align: center;
}

.account-menu-header tr td:last-child {
    text-align: left;
    line-height: 18px;
    padding-right: 10px;
}

    .account-menu-header tr td:last-child a {
        line-height: 18px;
        color: var(--color-text-basic) !important;
        font-weight: 700 !important;
        padding-left: 0px;
        padding-right: 0px;
        text-decoration: underline;
    }

.dd-dropdown.dd-drop-mobile:before, .dd-dropdown.dd-drop-mobile:after {
    left: 26px !important;
}

[dir='rtl'] .dd-dropdown.dd-drop-mobile:before, [dir='rtl'] .dd-dropdown.dd-drop-mobile:after {
    left: 65px !important;
}

.mobile .dd-dropdown.dd-drop-mobile:before, .mobile .dd-dropdown.dd-drop-mobile:after {
    left: auto !important;
}

.account-menu.list-unstyled .ci-message {
    font-size: 32px !important;
}

.account-menu-header img.img-responsive.dd-user-img,
.account-menu-header img.img-responsive {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}


/* #endregion ================================= /Account Menu ======================================== */
/* #region ======================================== Main menu ========================================== */
.nav-item .dd-old .dd-menu a h3 {
    margin-left: 0px !important;
}

.ui-main-content .dd-menu.dd-one a h3 {
    margin-left: 0px !important;
}

.user-badge.header-btn {
    display: block;
    width: 36px;
    height: 36px;
    background-color: var(--color-neutral-600);
    border-radius: 50%;
    position: relative;
}

    .user-badge.header-btn i {
        position: absolute;
        font-size: 28px;
        top: calc(50% - 24px);
        left: calc(50% - 14px);
    }

.nav-item .dd-img-login-0ld {
    background: none transparent;
    position: relative;
    padding-left: 30px !important;
}

[dir='rtl'] .nav-item .dd-img-login-0ld.nav-link.nav-link-profile.dd-link-index {
    padding-left: 0px !important;
    padding-right: 30px !important
}

.nav-item .dd-img-login-0ld:before {
    top: 6px;
    left: 0px;
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-image: url("../../Content/Images/ci-pazar-ghost.svg");
    background-repeat: no-repeat;
    background-size: 150em 1em;
    background-position: -45em 0em;
    font-size: 32px;
    opacity: 1;
    position: absolute;
}

[dir='rtl'] .nav-item .dd-img-login-0ld:before {
    left: auto;
    right: 0px;
}

.nav-item .dd-img-login {
    background: none transparent;
    position: relative;
    padding-left: 30px !important;
    margin-left: 10px;
}

[dir='rtl'] .nav-item .dd-img-login.nav-link-profile.form-link {
    padding-left: 0px !important;
    padding-right: 30px !important;
    margin-left: 0px;
    margin-right: 10px;
}

.nav-item .dd-img-login:before {
    top: 9px;
    left: 0px;
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-image: url("../../Content/Images/ci-pazar-ghost.svg");
    background-repeat: no-repeat;
    background-size: 150em 1em;
    background-position: -45em 0em;
    font-size: 32px;
    opacity: 1;
    position: absolute;
}

[dir='rtl'] .nav-item .dd-img-login:before {
    left: auto;
    right: 0px;
}
/* #endregion ================================== /Main menu ========================================== */
/* #region ======================================== Top Line =========================================== */
.top-line .chat-promotion.chat-style {
    background: none transparent;
    position: relative;
    padding-left: 27px;
}

[dir='rtl'] .top-line .chat-promotion.chat-style {
    padding-left: 0px !important;
    padding-right: 27px !important;
}

.top-line .chat-promotion.chat-style:before {
    top: -3px;
    left: 0px;
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-image: url("../../Content/Images/ci-pazar-ghost.svg");
    background-repeat: no-repeat;
    background-size: 150em 1em;
    background-position: -43em 0em;
    font-size: 26px;
    opacity: 1;
    position: absolute;
}

[dir='rtl'] .top-line .chat-promotion.chat-style:before {
    left: auto;
    right: 0px;
}

.top-line .login-link.logout.logout-action-google-yolo {
    background: none transparent;
    position: relative;
    padding-left: 27px;
}

[dir='rtl'] .top-line .login-link.logout.logout-action-google-yolo {
    background: none transparent;
    position: relative;
    padding-left: 0px !important;
    padding-right: 27px !important;
}

.top-line .login-link.logout.logout-action-google-yolo:before {
    top: -3px;
    left: 0px;
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-image: url("../../Content/Images/ci-pazar-ghost.svg");
    background-repeat: no-repeat;
    background-size: 150em 1em;
    background-position: -26em 0em;
    font-size: 26px;
    opacity: 1;
    position: absolute;
}

[dir='rtl'] .top-line .login-link.logout.logout-action-google-yolo:before {
    left: auto;
    right: 0px;
}

.top-line .dd-img-login-nav-tab {
    background: none transparent;
    position: relative;
    padding-left: 27px;
}

[dir='rtl'] .top-line .dd-img-login-nav-tab {
    padding-left: 0px !important;
    padding-right: 27px !important;
}

.top-line .dd-img-login-nav-tab:before {
    top: -2px;
    left: 0px;
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-image: url("../../Content/Images/ci-pazar-ghost.svg");
    background-repeat: no-repeat;
    background-size: 150em 1em;
    background-position: -45em 0em;
    font-size: 26px;
    opacity: 1;
    position: absolute;
}

[dir='rtl'] .top-line .dd-img-login-nav-tab:before {
    left: auto;
    right: 0px;
}

.top-line .dd-img-login-nav-tab-new,
.top-line .dd-img-login-0ld.nav-link.nav-link-profile.dd-link-index {
    background: none transparent;
    position: relative;
    padding-left: 24px !important;
}

[dir='rtl'] .top-line .dd-img-login-nav-tab-new,
[dir='rtl'] .top-line .dd-img-login-0ld.nav-link.nav-link-profile.dd-link-index {
    padding-right: 24px !important;
    padding-left: 0px !important;
}

.top-line .dd-img-login-nav-tab-new:before,
.top-line .dd-img-login-0ld.nav-link.nav-link-profile.dd-link-index:before {
    top: -3px;
    left: 0px;
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-image: url("../../Content/Images/ci-pazar-ghost.svg");
    background-repeat: no-repeat;
    background-size: 150em 1em;
    background-position: -45em 0em;
    font-size: 26px;
    opacity: 1;
    position: absolute;
}

[dir='rtl'] .top-line .dd-img-login-nav-tab-new:before,
[dir='rtl'] .top-line .dd-img-login-0ld.nav-link.nav-link-profile.dd-link-index:before {
    left: auto;
    right: 0px;
}

#mobile-profile .dd-img-login-0ld {
    padding-top: 9px !important;
}
/* #endregion ================================== /Top Line =========================================== */
/* #region =================================== Ohrid bank Banner ======================================= */
.ohridbank-banner {
    display: block;
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #E6F4ED;
    margin-top: 26px;
    margin-bottom: 16px;
    padding: 22px 10px 22px 10px;
}

    .ohridbank-banner .banner-art-block {
        display: block;
        width: 195px;
        float: left;
    }

    .ohridbank-banner .banner-content-block {
        display: block;
        width: calc(100% - 195px);
        float: left;
    }
    /* #region Art block */
    .ohridbank-banner .logo {
        display: block;
        width: 100%;
        height: 30px;
        background: url("../../Content/Images/OhridBank/logo.svg") no-repeat center center transparent;
        background-size: contain;
        margin-top: -3px;
    }

    .ohridbank-banner.sparkasse .logo {
        display: block;
        width: 100%;
        height: 30px;
        background: url("../../Content/Images/OhridBank/logo2.svg") no-repeat center center transparent;
        background-size: contain;
        margin-top: -3px;
    }

    .ohridbank-banner .person {
        width: 160px;
        height: 160px;
        display: block;
        margin: 10px auto 0px auto;
    }

        .ohridbank-banner .person .inner {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
        }

            .ohridbank-banner .person .inner .person-shadow {
                display: block;
                position: absolute;
                width: 34%;
                height: 11%;
                background-color: rgba(0, 0, 0, 0.1);
                border-radius: 50%;
                z-index: 1;
                top: 89%;
                left: 26%;
            }

            .ohridbank-banner .person .inner .person-body {
                display: block;
                position: absolute;
                width: 33%;
                height: 74%;
                background: url("../../Content/Images/OhridBank/BannerPriced/person-body.svg") no-repeat center center transparent;
                background-size: contain;
                top: 24%;
                left: 26%;
                z-index: 1;
            }

            .ohridbank-banner .person .inner .person-head {
                display: block;
                position: absolute;
                width: 22.5%;
                height: 28.5%;
                background: url("../../Content/Images/OhridBank/BannerPriced/person-head.svg") no-repeat center center transparent;
                background-size: contain;
                top: 1.2%;
                left: 30%;
                z-index: 1;
                transform-origin: 50% 100%;
                animation: ohridbank-person-head 7s ease-in-out infinite;
            }

@keyframes ohridbank-person-head {
    0% {
        transform: rotateZ(0deg);
    }

    20% {
        transform: rotateZ(10deg);
    }

    40% {
        transform: rotateZ(0deg);
    }

    60% {
        transform: rotateZ(-10deg);
    }

    80% {
        transform: rotateZ(10deg);
    }

    100% {
        transform: rotateZ(0deg);
    }
}

.ohridbank-banner .person .inner .person-eye-left {
    display: block;
    position: absolute;
    width: 10%;
    height: 12%;
    background: url("../../Content/Images/OhridBank/BannerPriced/person-eye.svg") no-repeat center center transparent;
    background-size: contain;
    top: 49%;
    left: 32%;
    z-index: 1;
    animation: ohridbank-person-eyes 6s ease-in-out infinite;
    -webkit-animation: ohridbank-person-eyes 6s ease-in-out infinite;
}

.ohridbank-banner .person .inner .person-eye-right {
    display: block;
    position: absolute;
    width: 10%;
    height: 12%;
    background: url("../../Content/Images/OhridBank/BannerPriced/person-eye.svg") no-repeat center center transparent;
    background-size: contain;
    top: 47.7%;
    left: 66%;
    z-index: 1;
    animation: ohridbank-person-eyes 6s ease-in-out infinite;
    -webkit-animation: ohridbank-person-eyes 6s ease-in-out infinite;
}

@keyframes ohridbank-person-eyes {
    0% {
        transform: scaleY(1);
    }

    10% {
        transform: scaleY(1);
    }

    11% {
        transform: scaleY(0);
    }

    12% {
        transform: scaleY(0);
    }

    13% {
        transform: scaleY(1);
    }

    40% {
        transform: scaleY(1);
    }

    41% {
        transform: scale(0);
    }

    42% {
        transform: scale(0);
    }

    43% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes ohridbank-person-eyes {
    0% {
        -webkit-transform: scaleY(1);
    }

    10% {
        -webkit-transform: scaleY(1);
    }

    11% {
        -webkit-transform: scaleY(0);
    }

    12% {
        -webkit-transform: scaleY(0);
    }

    13% {
        -webkit-transform: scaleY(1);
    }

    40% {
        -webkit-transform: scaleY(1);
    }

    41% {
        -webkit-transform: scale(0);
    }

    42% {
        -webkit-transform: scale(0);
    }

    43% {
        -webkit-transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

.ohridbank-banner .person .inner .person-brow-left {
    display: block;
    position: absolute;
    width: 20%;
    height: 8%;
    background: url("../../Content/Images/OhridBank/BannerPriced/person-brow-left.svg") no-repeat center center transparent;
    background-size: contain;
    top: 40%;
    left: 10px;
    z-index: 1;
    animation: ohridbank-person-brows 6s ease-in-out infinite;
    -webkit-animation: ohridbank-person-brows 6s ease-in-out infinite;
}

.ohridbank-banner .person .inner .person-brow-right {
    display: block;
    position: absolute;
    width: 20%;
    height: 8%;
    background: url("../../Content/Images/OhridBank/BannerPriced/person-brow-right.svg") no-repeat center center transparent;
    background-size: contain;
    top: 39%;
    left: 60%;
    z-index: 1;
    animation: ohridbank-person-brows 6s ease-in-out infinite;
    -webkit-animation: ohridbank-person-brows 6s ease-in-out infinite;
}

@keyframes ohridbank-person-brows {
    0% {
        transform: translateY(0%);
    }

    10% {
        transform: translateY(0%);
    }

    15% {
        transform: translateY(-45%);
    }

    20% {
        transform: translateY(-45%);
    }

    25% {
        transform: translateY(0%);
    }

    60% {
        transform: translateY(0%);
    }

    65% {
        transform: translateY(-45%);
    }

    70% {
        transform: translateY(-45%);
    }

    75% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes ohridbank-person-brows {
    0% {
        -webkit-transform: translateY(0%);
    }

    10% {
        -webkit-transform: translateY(0%);
    }

    15% {
        -webkit-transform: translateY(-45%);
    }

    20% {
        -webkit-transform: translateY(-45%);
    }

    25% {
        -webkit-transform: translateY(0%);
    }

    60% {
        -webkit-transform: translateY(0%);
    }

    65% {
        -webkit-transform: translateY(-45%);
    }

    70% {
        -webkit-transform: translateY(-45%);
    }

    75% {
        -webkit-transform: translateY(0%);
    }

    100% {
        -webkit-transform: translateY(0%);
    }
}

.ohridbank-banner .person .inner .person-hand {
    display: block;
    position: absolute;
    width: 24%;
    height: 15%;
    background: url("../../Content/Images/OhridBank/BannerPriced/person-hand.svg") no-repeat center center transparent;
    background-size: contain;
    top: 29.5%;
    left: 52.8%;
    z-index: 1;
    transform-origin: 10% 93%;
    animation: ohridbank-person-hand 4s ease-in-out infinite;
    -webkit-animation: ohridbank-person-hand 4s ease-in-out infinite;
}

@keyframes ohridbank-person-hand {
    0% {
        transform: rotateZ(0deg);
    }

    10% {
        transform: rotateZ(40deg);
    }

    40% {
        transform: rotateZ(40deg);
    }

    60% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(0deg);
    }
}

@-webkit-keyframes ohridbank-person-hand {
    0% {
        -webkit-transform: rotateZ(0deg);
    }

    10% {
        -webkit-transform: rotateZ(40deg);
    }

    40% {
        -webkit-transform: rotateZ(40deg);
    }

    60% {
        -webkit-transform: rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(0deg);
    }
}

/* #endregion Art block */

/* #region Content block */
.ohridbank-banner .banner-content-block .heading-1 {
    display: block;
    width: 100%;
    font-size: 28px;
    color: var(--color-text-basic);
    font-weight: 600;
    padding: 0px;
    margin-bottom: 5px;
    line-height: 30px;
}

.ohridbank-banner .banner-content-block .heading-2 {
    display: block;
    color: var(--color-text-basic);
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    padding: 0px;
    margin: 0px;
}

.ohridbank-banner .banner-content-block .additional-info {
    display: block;
    color: var(--color-text-basic);
    margin: 0px;
    padding: 0px;
    width: 100%;
}

.ohridbank-banner .banner-content-block .price-block {
    border-left: 1px solid rgba(93, 170, 128, 0.4);
    padding-left: 25px;
    padding-right: 25px;
}

*[dir='rtl'] .ohridbank-banner .banner-content-block .price-block {
    border-right: 1px solid rgba(93, 170, 128, 0.4);
    border-left: 0px none transparent;
}

.ohridbank-banner .banner-content-block .action-btn {
    padding-right: 30px;
    padding-top: 2px;
}

    .ohridbank-banner .banner-content-block .action-btn .new-btn {
        min-width: 160px;
    }

*[dir='rtl'] .ohridbank-banner .banner-content-block .action-btn {
    padding-right: 0px;
    padding-left: 30px;
}

.ohridbank-banner .banner-content-block .price-block .price {
    display: block;
    width: 100%;
    font-size: 36px;
    line-height: 36px;
    font-weight: 700;
}

.ohridbank-banner .banner-content-block .price-block .price-details {
    display: block;
    width: 100%;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 14px;
    padding-top: 3px;
    padding-bottom: 3px;
}
/* #endregion Content block */

@media (max-width: 1500px) {
    .ohridbank-banner .banner-content-block .heading-1 {
        font-size: 20px;
    }

    .ohridbank-banner .banner-content-block .heading-2 {
        font-size: 14px;
    }
}

@media (max-width: 1199px) {
    .ohridbank-banner .banner-art-block {
        float: none;
        display: block;
        width: 100%;
    }

    .ohridbank-banner .person {
        display: none;
    }

    .ohridbank-banner .logo {
        height: 50px;
    }

    .ohridbank-banner .banner-content-block {
        width: 100%;
        float: none;
        margin-top: 10px;
        text-align: center !important;
    }

        .ohridbank-banner .banner-content-block .heading-1 {
            text-align: center !important;
            margin-top: 24px;
            line-height: 24px;
        }

        .ohridbank-banner .banner-content-block .heading-2 {
            text-align: center !important;
        }

        .ohridbank-banner .banner-content-block .additional-info {
            text-align: center !important;
        }

        .ohridbank-banner .banner-content-block .action-btn {
            float: none !important;
            display: inline-block;
            vertical-align: middle;
        }

        .ohridbank-banner .banner-content-block .price-block {
            float: none !important;
            display: inline-block;
            vertical-align: middle;
        }
}

@media (max-width: 720px) {
    .ohridbank-banner .banner-content-block .action-btn {
        float: none !important;
        display: block;
        width: 100%;
    }

    .ohridbank-banner .banner-content-block .price-block {
        float: none !important;
        display: block;
        width: 100%;
    }

    .ohridbank-banner .banner-content-block .action-btn {
        margin-right: 0px;
        padding-right: 0px;
    }

    .ohridbank-banner .banner-content-block .price-block {
        border-left: 0px none transparent;
        margin-top: 14px;
    }
}

@media (max-width: 419px) {
    .ohridbank-banner {
        margin-top: 0px;
    }
}

/* #region -------------------------- No Price -------------------------- */
.ohridbank-banner.noprice {
    width: 100%;
    height: 200px;
    position: relative;
    padding: 0px;
    background-color: #ffffff;
}

    .ohridbank-banner.noprice .scene-1 {
        width: 100%;
        height: 100%;
        background: url('../../Content/Images/OhridBank/BannerNoPrice/background-1.svg') no-repeat center center #FFFFFF;
        background-size: cover;
        position: relative;
        border-radius: var(--radius-4);
        overflow: hidden;
        display: block;
    }

        .ohridbank-banner.noprice .scene-1:hover {
            opacity: 1 !important;
        }
        /* #region Cloud Message 1 */

        .ohridbank-banner.noprice .scene-1 .cloud-message-1 {
            display: block;
            position: absolute;
            width: 300px;
            height: 200px;
            top: calc(50% - 100px);
            left: calc(50% - 150px);
            opacity: 0;
            animation: scene-cloud-1 6s linear forwards;
        }

@keyframes scene-cloud-1 {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    97% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-1,
.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-2,
.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-3,
.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-4,
.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-5,
.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-6,
.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-7,
.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-8,
.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-9 {
    display: block;
    position: absolute;
    border-radius: 50%;
    background-color: #FFFFFF;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-1 {
    width: 18%;
    height: 21%;
    left: 17%;
    top: 10%;
    animation: bankbanner-cloud-1-1 1s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-1-1 1s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-2 {
    width: 50%;
    height: 56%;
    left: 29%;
    top: 5%;
    animation: bankbanner-cloud-1-2 1.6s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-1-2 1.6s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-3 {
    width: 31%;
    height: 37%;
    left: 69%;
    top: 26%;
    animation: bankbanner-cloud-1-3 1.2s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-1-3 1.2s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-4 {
    width: 31%;
    height: 40%;
    left: 55%;
    top: 45%;
    animation: bankbanner-cloud-1-4 1.2s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-1-4 1.2s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-5 {
    width: 29%;
    height: 40%;
    left: 46%;
    top: 52%;
    animation: bankbanner-cloud-1-5 1.4s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-1-5 1.4s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-6 {
    width: 36%;
    height: 40%;
    left: 27%;
    top: 55%;
    animation: bankbanner-cloud-1-6 1s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-1-6 1s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-7 {
    width: 16%;
    height: 21%;
    left: 15%;
    top: 63%;
    animation: bankbanner-cloud-1-7 1s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-1-7 1s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-8 {
    width: 28%;
    height: 33%;
    left: 0%;
    top: 42%;
    animation: bankbanner-cloud-1-8 1s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-1-8 1s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-1 .part-9 {
    width: 38%;
    height: 50%;
    left: 9%;
    top: 21%;
    animation: bankbanner-cloud-1-9 1s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-1-9 1s ease-in-out infinite alternate;
}

@keyframes bankbanner-cloud-1-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@-webkit-keyframes bankbanner-cloud-1-1 {
    from {
        -webkit-transform: translate(-4%, -4%);
    }

    to {
        -webkit-transform: translate(4%, 4%);
    }
}

@keyframes bankbanner-cloud-1-2 {
    from {
        transform: translate(0%, 4%);
    }

    to {
        transform: translate(0%, -4%);
    }
}

@-webkit-keyframes bankbanner-cloud-1-2 {
    from {
        -webkit-transform: translate(0%, 4%);
    }

    to {
        -webkit-transform: translate(0%, -4%);
    }
}

@keyframes bankbanner-cloud-1-3 {
    from {
        transform: translate(-4%, -1%);
    }

    to {
        transform: translate(4%, 1%);
    }
}

@-webkit-keyframes bankbanner-cloud-1-3 {
    from {
        -webkit-transform: translate(-4%, -4%);
    }

    to {
        -webkit-transform: translate(4%, 4%);
    }
}

@keyframes bankbanner-cloud-1-4 {
    from {
        transform: translate(4%, 3%);
    }

    to {
        transform: translate(-4%, -3%);
    }
}

@-webkit-keyframes bankbanner-cloud-1-4 {
    from {
        -webkit-transform: translate(4%, 3%);
    }

    to {
        -webkit-transform: translate(-4%, -3%);
    }
}

@keyframes bankbanner-cloud-1-5 {
    from {
        transform: translate(-3%, -3%);
    }

    to {
        transform: translate(4%, 3%);
    }
}

@-webkit-keyframes bankbanner-cloud-1-5 {
    from {
        -webkit-transform: translate(-3%, -3%);
    }

    to {
        -webkit-transform: translate(4%, 3%);
    }
}

@keyframes bankbanner-cloud-1-6 {
    from {
        transform: translate(0%, 3%);
    }

    to {
        transform: translate(0%, -3%);
    }
}

@-webkit-keyframes bankbanner-cloud-1-6 {
    from {
        -webkit-transform: translate(0%, 3%);
    }

    to {
        -webkit-transform: translate(0%, -3%);
    }
}

@keyframes bankbanner-cloud-1-7 {
    from {
        transform: translate(3%, -3%);
    }

    to {
        transform: translate(-3%, 3%);
    }
}

@-webkit-keyframes bankbanner-cloud-1-7 {
    from {
        -webkit-transform: translate(3%, -3%);
    }

    to {
        -webkit-transform: translate(-3%, 3%);
    }
}

@keyframes bankbanner-cloud-1-8 {
    from {
        transform: translate(-3%, 3%);
    }

    to {
        transform: translate(3%, -3%);
    }
}

@-webkit-keyframes bankbanner-cloud-1-8 {
    from {
        -webkit-transform: translate(-3%, 3%);
    }

    to {
        -webkit-transform: translate(3%, -3%);
    }
}

@keyframes bankbanner-cloud-1-9 {
    from {
        transform: translate(3%, 0%);
    }

    to {
        transform: translate(-3%, 0%);
    }
}

@-webkit-keyframes bankbanner-cloud-1-9 {
    from {
        -webkit-transform: translate(3%, 0%);
    }

    to {
        -webkit-transform: translate(-3%, 0%);
    }
}
/* #endregion Cloud Message 1 */
/* #region Cloud Message 2 */
.ohridbank-banner.noprice .scene-1 .cloud-message-2 {
    display: block;
    position: absolute;
    width: 300px;
    height: 200px;
    top: calc(50% - 100px);
    left: calc(50% - 150px);
    opacity: 0;
    animation: scene-cloud-2 20s forwards 6.5s;
}

@keyframes scene-cloud-2 {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    2% {
        opacity: 1;
        transform: scale(0);
    }

    5% {
        opacity: 1;
        transform: scale(1);
    }

    99% {
        opacity: 1;
        transform: scale(4);
    }

    100% {
        opacity: 0;
    }
}

.ohridbank-banner.noprice .scene-1 .cloud-message-2 .part-1,
.ohridbank-banner.noprice .scene-1 .cloud-message-2 .part-2,
.ohridbank-banner.noprice .scene-1 .cloud-message-2 .part-3,
.ohridbank-banner.noprice .scene-1 .cloud-message-2 .part-4,
.ohridbank-banner.noprice .scene-1 .cloud-message-2 .part-5,
.ohridbank-banner.noprice .scene-1 .cloud-message-2 .part-6 {
    display: block;
    position: absolute;
    border-radius: 50%;
    background-color: #FFFFFF;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-2 .part-1 {
    width: 46%;
    height: 51%;
    left: 16%;
    top: 2%;
    animation: bankbanner-cloud-2-1 1.5s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-2-1 1.5s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-2 .part-2 {
    width: 39%;
    height: 51%;
    left: 45%;
    top: 5%;
    animation: bankbanner-cloud-2-2 1.3s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-2-2 1.3s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-2 .part-3 {
    width: 39%;
    height: 44%;
    left: 61%;
    top: 20%;
    animation: bankbanner-cloud-2-3 1s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-2-3 1s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-2 .part-4 {
    width: 29%;
    height: 39%;
    left: 60%;
    top: 42%;
    animation: bankbanner-cloud-2-4 1.4s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-2-4 1.4s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-2 .part-5 {
    width: 53%;
    height: 54%;
    left: 22%;
    top: 44%;
    animation: bankbanner-cloud-2-5 1s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-2-5 1s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .cloud-message-2 .part-6 {
    width: 36%;
    height: 45%;
    left: 0%;
    top: 33%;
    animation: bankbanner-cloud-2-6 1s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-cloud-2-6 1s ease-in-out infinite alternate;
}

@keyframes bankbanner-cloud-2-1 {
    from {
        transform: translate(-3%, -3%);
    }

    to {
        transform: translate(3%, 3%);
    }
}

@-webkit-keyframes bankbanner-cloud-2-1 {
    from {
        -webkit-transform: translate(-3%, -3%);
    }

    to {
        -webkit-transform: translate(3%, 3%);
    }
}

@keyframes bankbanner-cloud-2-2 {
    from {
        transform: translate(-4%, 3%);
    }

    to {
        transform: translate(2%, -3%);
    }
}

@-webkit-keyframes bankbanner-cloud-2-2 {
    from {
        -webkit-transform: translate(-4%, 3%);
    }

    to {
        -webkit-transform: translate(2%, -3%);
    }
}

@keyframes bankbanner-cloud-2-3 {
    from {
        transform: translate(-4%, 1%);
    }

    to {
        transform: translate(4%, -1%);
    }
}

@-webkit-keyframes bankbanner-cloud-2-3 {
    from {
        -webkit-transform: translate(-4%, 1%);
    }

    to {
        -webkit-transform: translate(4%, -1%);
    }
}

@keyframes bankbanner-cloud-2-4 {
    from {
        transform: translate(4%, 2%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

@-webkit-keyframes bankbanner-cloud-2-4 {
    from {
        -webkit-transform: translate(4%, 2%);
    }

    to {
        -webkit-transform: translate(-4%, -4%);
    }
}

@keyframes bankbanner-cloud-2-5 {
    from {
        transform: translate(0%, -4%);
    }

    to {
        transform: translate(0%, 4%);
    }
}

@-webkit-keyframes bankbanner-cloud-2-5 {
    from {
        -webkit-transform: translate(0%, -4%);
    }

    to {
        -webkit-transform: translate(0%, 4%);
    }
}

@keyframes bankbanner-cloud-2-6 {
    from {
        transform: translate(-4%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

@-webkit-keyframes bankbanner-cloud-2-6 {
    from {
        -webkit-transform: translate(-4%, 0%);
    }

    to {
        -webkit-transform: translate(4%, 0%);
    }
}
/* #endregion Cloud Message 2 */
/* #region Person 1-1 */
.ohridbank-banner.noprice .scene-1 .person-1-1 {
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: -10px;
    left: 15%;
    opacity: 0;
    animation: scene-person-1-1 6s linear forwards;
}

@keyframes scene-person-1-1 {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    20% {
        opacity: 1;
        transform: translateY(0%);
    }

    99% {
        opacity: 1;
        transform: translateY(0%);
    }

    100% {
        opacity: 0;
        transform: translateY(0%);
    }
}

.ohridbank-banner.noprice .scene-1 .person-1-1 .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.ohridbank-banner.noprice .scene-1 .person-1-1 .person-body {
    position: absolute;
    width: 40%;
    height: 58%;
    top: 42%;
    left: 14%;
    background: url('../../Content/Images/OhridBank/BannerNoPrice/person-1-1/person-body.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.ohridbank-banner.noprice .scene-1 .person-1-1 .person-head {
    position: absolute;
    width: 31%;
    height: 40%;
    top: 6%;
    left: 19%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-1-1/person-head.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    transform-origin: 50% 100%;
    animation: bankbanner-person-1-1-head 3s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-person-1-1-head 3s ease-in-out infinite alternate;
}

@keyframes bankbanner-person-1-1-head {
    from {
        transform: rotateZ(10deg);
    }

    to {
        transform: rotateZ(-10deg);
    }
}

@-webkit-keyframes bankbanner-person-1-1-head {
    from {
        -webkit-transform: rotateZ(10deg);
    }

    to {
        -webkit-transform: rotateZ(-10deg);
    }
}

.ohridbank-banner.noprice .scene-1 .person-1-1 .person-eye-left {
    position: absolute;
    width: 10%;
    height: 11%;
    top: 61%;
    left: 32%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-1-1/person-eye.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-1-1-eyes 3s ease-in-out infinite;
    -webkit-animation: bankbanner-person-1-1-eyes 3s ease-in-out infinite;
}

.ohridbank-banner.noprice .scene-1 .person-1-1 .person-eye-right {
    position: absolute;
    width: 10%;
    height: 11%;
    top: 54%;
    left: 67%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-1-1/person-eye.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-1-1-eyes 3s ease-in-out infinite;
    -webkit-animation: bankbanner-person-1-1-eyes 3s ease-in-out infinite;
}

@keyframes bankbanner-person-1-1-eyes {
    0% {
        transform: scale(1, 1);
    }

    10% {
        transform: scale(1, 1);
    }

    11% {
        transform: scale(1, 0);
    }

    13% {
        transform: scale(1, 0);
    }

    14% {
        transform: scale(1, 1);
    }

    80% {
        transform: scale(1, 1);
    }

    81% {
        transform: scale(1, 0);
    }

    83% {
        transform: scale(1, 0);
    }

    84% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-webkit-keyframes bankbanner-person-1-1-eyes {
    0% {
        -webkit-transform: scale(1, 1);
    }

    10% {
        -webkit-transform: scale(1, 1);
    }

    11% {
        -webkit-transform: scale(1, 0);
    }

    13% {
        -webkit-transform: scale(1, 0);
    }

    14% {
        -webkit-transform: scale(1, 1);
    }

    80% {
        -webkit-transform: scale(1, 1);
    }

    81% {
        -webkit-transform: scale(1, 0);
    }

    83% {
        -webkit-transform: scale(1, 0);
    }

    84% {
        -webkit-transform: scale(1, 1);
    }

    100% {
        -webkit-transform: scale(1, 1);
    }
}

.ohridbank-banner.noprice .scene-1 .person-1-1 .person-brows {
    position: absolute;
    width: 54%;
    height: 30%;
    top: 38%;
    left: 23%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-1-1/person-brows.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-1-1-brows 2s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-person-1-1-brows 2s ease-in-out infinite alternate;
}

@keyframes bankbanner-person-1-1-brows {
    0% {
        transform: translateY(0%);
    }

    30% {
        transform: translateY(0%);
    }

    40% {
        transform: translateY(-8%);
    }

    50% {
        transform: translateY(-8%);
    }

    60% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes bankbanner-person-1-1-brows {
    0% {
        -webkit-transform: translateY(0%);
    }

    30% {
        -webkit-transform: translateY(0%);
    }

    40% {
        -webkit-transform: translateY(-8%);
    }

    50% {
        -webkit-transform: translateY(-8%);
    }

    60% {
        -webkit-transform: translateY(0%);
    }

    100% {
        -webkit-transform: translateY(0%);
    }
}

.ohridbank-banner.noprice .scene-1 .person-1-1 .person-hand {
    position: absolute;
    width: 54%;
    height: 69%;
    top: 0%;
    left: 38%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-1-1/person-hand.svg") no-repeat center center transparent;
    background-size: contain;
    transform-origin: 10% 90%;
    animation: bankbanner-person-1-1-hand 0.5s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-person-1-1-hand 0.5s ease-in-out infinite alternate;
}

@keyframes bankbanner-person-1-1-hand {
    from {
        transform: rotate(-2deg);
    }

    to {
        transform: rotate(2deg);
    }
}


@-webkit-keyframes bankbanner-person-1-1-hand {
    from {
        -webkit-transform: rotate(-2deg);
    }

    to {
        -webkit-transform: rotate(2deg);
    }
}
/* #endregion Person 1-1 */
/* #region Person 2-1 */
.ohridbank-banner.noprice .scene-1 .person-2-1 {
    width: 210px;
    height: 210px;
    position: absolute;
    bottom: -32px;
    left: 11%;
    opacity: 0;
    animation: scene-person-2-1 1s ease-out 6s forwards;
}

@keyframes scene-person-2-1 {
    0% {
        opacity: 0;
        transform: translateX(0);
    }

    1% {
        opacity: 1;
    }

    99% {
        opacity: 1;
        transform: translateX(-2%);
    }

    100% {
        opacity: 0;
    }
}

.ohridbank-banner.noprice .scene-1 .person-2-1 .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.ohridbank-banner.noprice .scene-1 .person-2-1 .person-body {
    position: absolute;
    width: 97%;
    height: 67%;
    top: 34%;
    left: 2%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-2-1/person-body.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.ohridbank-banner.noprice .scene-1 .person-2-1 .person-head {
    position: absolute;
    width: 31%;
    height: 41%;
    top: 0%;
    left: 1%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-2-1/person-head.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    transform-origin: 50% 100%;
}

.ohridbank-banner.noprice .scene-1 .person-2-1 .person-brows {
    position: absolute;
    width: 54%;
    height: 30%;
    top: 38%;
    left: 23%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-2-1/person-brows.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-2-1-brows 1s ease forwards;
    -webkit-animation: bankbanner-person-2-1-brows 1s ease forwards;
}

@keyframes bankbanner-person-2-1-brows {
    from {
        transform: translateY(0%)
    }

    to {
        transform: translateY(-10%);
    }
}

@-webkit-keyframes bankbanner-person-2-1-brows {
    from {
        -webkit-transform: translateY(0%)
    }

    to {
        -webkit-transform: translateY(-10%);
    }
}
/* #endregion Person 2-1 */
/* #region Person 2-2  */
.ohridbank-banner.noprice .scene-1 .person-2-2 {
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: -20px;
    left: auto;
    right: 18%;
    opacity: 0;
    animation: scene-person-2-2 12s ease-out forwards 6s;
}

@keyframes scene-person-2-2 {
    0% {
        opacity: 0;
        transform: translateX(200%);
    }

    5% {
        opacity: 1;
        transform: translateX(0%);
    }

    95% {
        opacity: 1;
        transform: translateX(0%);
    }

    100% {
        opacity: 0;
        transform: translateX(0%);
    }
}

.ohridbank-banner.noprice .scene-1 .person-2-2 .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.ohridbank-banner.noprice .scene-1 .person-2-2 .person-body {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-2-2/person-body.svg") no-repeat center center transparent;
    background-size: contain;
}

.ohridbank-banner.noprice.sparkasse .scene-1 .person-2-2 .person-body {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-2-2/person-body2.svg") no-repeat center center transparent;
    background-size: contain;
}

.ohridbank-banner.noprice .scene-1 .person-2-2 .person-eye-left {
    position: absolute;
    width: 4%;
    height: 5%;
    top: 24%;
    left: 53%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-2-2/person-eye.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-1-1-eyes 3s ease-in-out infinite;
    -webkit-animation: bankbanner-person-1-1-eyes 3s ease-in-out infinite;
}

.ohridbank-banner.noprice .scene-1 .person-2-2 .person-eye-right {
    position: absolute;
    width: 4%;
    height: 5%;
    top: 22%;
    left: 67%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-2-2/person-eye.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-1-1-eyes 3s ease-in-out infinite;
    -webkit-animation: bankbanner-person-1-1-eyes 3s ease-in-out infinite;
}

.ohridbank-banner.noprice .scene-1 .person-2-2 .person-brows {
    position: absolute;
    width: 20%;
    height: 4%;
    top: 19%;
    left: 52%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-2-2/person-brows.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-2-2-brows 5s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-person-2-2-brows 5s ease-in-out infinite alternate;
}

@keyframes bankbanner-person-2-2-brows {
    0% {
        transform: translateY(0%);
    }

    10% {
        transform: translateY(0%);
    }

    11% {
        transform: translateY(-40%);
    }

    20% {
        transform: translateY(-40%);
    }

    21% {
        transform: translateY(0%);
    }

    70% {
        transform: translateY(0%);
    }

    71% {
        transform: translateY(-40%);
    }

    80% {
        transform: translateY(-40%);
    }

    81% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes bankbanner-person-2-2-brows {
    0% {
        -webkit-transform: translateY(0%);
    }

    10% {
        -webkit-transform: translateY(0%);
    }

    11% {
        -webkit-transform: translateY(-40%);
    }

    20% {
        -webkit-transform: translateY(-40%);
    }

    21% {
        -webkit-transform: translateY(0%);
    }

    70% {
        -webkit-transform: translateY(0%);
    }

    71% {
        -webkit-transform: translateY(-40%);
    }

    80% {
        -webkit-transform: translateY(-40%);
    }

    81% {
        -webkit-transform: translateY(0%);
    }

    100% {
        -webkit-transform: translateY(0%);
    }
}
/* #endregion Person 2-2 */
/* #region Wind */
.ohridbank-banner.noprice .scene-1 .wind {
    width: 130px;
    height: 200px;
    position: absolute;
    bottom: 0px;
    left: auto;
    right: 4%;
    opacity: 0;
}

    .ohridbank-banner.noprice .scene-1 .wind .wind-part-1,
    .ohridbank-banner.noprice .scene-1 .wind .wind-part-2,
    .ohridbank-banner.noprice .scene-1 .wind .wind-part-3 {
        height: 4px;
        position: absolute;
        border-radius: var(--radius-4);
        background-color: #FFFFFF;
    }

    .ohridbank-banner.noprice .scene-1 .wind .wind-part-1 {
        width: 80px;
        top: 40%;
        left: 0%;
    }

    .ohridbank-banner.noprice .scene-1 .wind .wind-part-2 {
        width: 95px;
        top: 50%;
        left: 20%;
    }

    .ohridbank-banner.noprice .scene-1 .wind .wind-part-3 {
        width: 50px;
        top: 70%;
        left: 10%;
    }
/* #endregion Wind */
/* #region Person 2-3 */
.ohridbank-banner.noprice .scene-1 .person-2-3 {
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: -10px;
    left: 11%;
    opacity: 0;
    animation: scene-person-2-3 10s ease-out forwards 7s;
}

@keyframes scene-person-2-3 {
    0% {
        opacity: 0;
        transform: translateX(0%);
    }

    1% {
        opacity: 1;
    }

    20% {
        opacity: 1;
        transform: translateX(12%);
    }

    90% {
        opacity: 1;
        transform: translateX(12%);
    }

    100% {
        opacity: 0;
        transform: translateX(12%);
    }
}


.ohridbank-banner.noprice .scene-1 .person-2-3 .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.ohridbank-banner.noprice .scene-1 .person-2-3 .person-body {
    position: absolute;
    width: 61%;
    height: 67%;
    top: 36%;
    left: 20%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-2-3/person-body.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.ohridbank-banner.noprice .scene-1 .person-2-3 .person-head {
    position: absolute;
    width: 34%;
    height: 42%;
    top: 0%;
    left: 30%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-2-3/person-head.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    transform-origin: 50% 100%;
    animation: bankbanner-person-2-3-head 1.8s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-person-2-3-head 1.8s ease-in-out infinite alternate;
}

@keyframes bankbanner-person-2-3-head {
    from {
        transform: rotate(-5deg);
    }

    to {
        transform: rotate(5deg);
    }
}

@-webkit-keyframes bankbanner-person-2-3-head {
    from {
        -webkit-transform: rotate(-5deg);
    }

    to {
        -webkit-transform: rotate(5deg);
    }
}


.ohridbank-banner.noprice .scene-1 .person-2-3 .person-brows {
    position: absolute;
    width: 58%;
    height: 39%;
    top: 34%;
    left: 19%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-2-3/person-brows.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-1-1-brows 2s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-person-1-1-brows 2s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .person-2-3 .person-eye-left {
    position: absolute;
    width: 10%;
    height: 12%;
    top: 59%;
    left: 23%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-2-3/person-eye.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-2-3-eyes 3s ease-in-out infinite;
    -webkit-animation: bankbanner-person-2-3-eyes 3s ease-in-out infinite;
}

.ohridbank-banner.noprice .scene-1 .person-2-3 .person-eye-right {
    position: absolute;
    width: 10%;
    height: 12%;
    top: 60%;
    left: 62%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-2-3/person-eye.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-2-3-eyes 3s ease-in-out infinite;
    -webkit-animation: bankbanner-person-2-3-eyes 3s ease-in-out infinite;
}

@keyframes bankbanner-person-2-3-eyes {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1, 1);
    }

    51% {
        transform: scale(1, 0);
    }

    53% {
        transform: scale(1, 0);
    }

    54% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-webkit-keyframes bankbanner-person-2-3-eyes {
    0% {
        -webkit-transform: scale(1, 1);
    }

    50% {
        -webkit-transform: scale(1, 1);
    }

    51% {
        -webkit-transform: scale(1, 0);
    }

    53% {
        -webkit-transform: scale(1, 0);
    }

    54% {
        -webkit-transform: scale(1, 1);
    }

    100% {
        -webkit-transform: scale(1, 1);
    }
}
/* #endregion Person 2-3 */
/* #region Person 3-1 */
.ohridbank-banner.noprice .scene-1 .person-3-1 {
    width: 250px;
    height: 250px;
    position: absolute;
    bottom: -59px;
    left: 11%;
    opacity: 0;
    animation: scene-person-3-1 1s ease-out 20s forwards;
    z-index: 1;
}

@keyframes scene-person-3-1 {
    from {
        opacity: 1;
        transform: translateX(-200%);
    }

    to {
        opacity: 1;
        transform: translateX(0%);
    }
}

.ohridbank-banner.noprice .scene-1 .person-3-1 .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.ohridbank-banner.noprice .scene-1 .person-3-1 .person-body {
    position: absolute;
    width: 66%;
    height: 78%;
    top: 22%;
    left: 17%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-3-1/person-body.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.ohridbank-banner.noprice .scene-1 .person-3-1 .person-head {
    position: absolute;
    width: 20%;
    height: 24%;
    top: 0%;
    left: 45%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-3-1/person-head.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    transform-origin: 50% 100%;
    animation: bankbanner-person-2-3-head 1.8s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-person-2-3-head 1.8s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .person-3-1 .person-brows {
    position: absolute;
    width: 58%;
    height: 39%;
    top: 32%;
    left: 19%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-3-1/person-brows.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-1-1-brows 4s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-person-1-1-brows 4s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .person-3-1 .person-eye-left {
    position: absolute;
    width: 10%;
    height: 12%;
    top: 59%;
    left: 24%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-3-1/person-eye.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-2-3-eyes 4s ease-in-out infinite;
    -webkit-animation: bankbanner-person-2-3-eyes 4s ease-in-out infinite;
}

.ohridbank-banner.noprice .scene-1 .person-3-1 .person-eye-right {
    position: absolute;
    width: 10%;
    height: 12%;
    top: 59%;
    left: 62%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-3-1/person-eye.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-2-3-eyes 4s ease-in-out infinite;
    -webkit-animation: bankbanner-person-2-3-eyes 4s ease-in-out infinite;
}
/* #endregion Person 3-1 */
/* #region Person 3-2 */
.ohridbank-banner.noprice .scene-1 .person-3-2 {
    width: 230px;
    height: 230px;
    position: absolute;
    bottom: -40px;
    left: auto;
    right: 14%;
    opacity: 0;
    animation: scene-person-3-2 1s ease-out 19.5s forwards;
    z-index: 1;
}

@keyframes scene-person-3-2 {
    from {
        opacity: 1;
        transform: translateX(200%);
    }

    to {
        opacity: 1;
        transform: translateX(0%);
    }
}

.ohridbank-banner.noprice .scene-1 .person-3-2 .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.ohridbank-banner.noprice .scene-1 .person-3-2 .person-body {
    position: absolute;
    width: 66%;
    height: 78%;
    top: 22%;
    left: 27%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-3-2/person-body.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.ohridbank-banner.noprice .scene-1 .person-3-2 .person-head {
    position: absolute;
    width: 22%;
    height: 25%;
    top: 0%;
    left: 49%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-3-2/person-head.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    transform-origin: 50% 100%;
    animation: bankbanner-person-1-1-head 2.3s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-person-1-1-head 2.3s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .person-3-2 .person-brows {
    position: absolute;
    width: 52%;
    height: 37%;
    top: 27%;
    left: 20%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-3-2/person-brows.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-1-1-brows 4s ease-in-out infinite alternate;
    -webkit-animation: bankbanner-person-1-1-brows 4s ease-in-out infinite alternate;
}

.ohridbank-banner.noprice .scene-1 .person-3-2 .person-eye-left {
    position: absolute;
    width: 10%;
    height: 12%;
    top: 50%;
    left: 22%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-3-2/person-eye.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-2-3-eyes 4s ease-in-out infinite;
    -webkit-animation: bankbanner-person-2-3-eyes 4s ease-in-out infinite;
}

.ohridbank-banner.noprice .scene-1 .person-3-2 .person-eye-right {
    position: absolute;
    width: 10%;
    height: 12%;
    top: 50%;
    left: 60%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-3-2/person-eye.svg") no-repeat center center transparent;
    background-size: contain;
    animation: bankbanner-person-2-3-eyes 4s ease-in-out infinite;
    -webkit-animation: bankbanner-person-2-3-eyes 4s ease-in-out infinite;
}

.ohridbank-banner.noprice .scene-1 .person-3-2 .person-hand {
    position: absolute;
    width: 25%;
    height: 15%;
    top: 27%;
    left: 22%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/person-3-2/person-hand.svg") no-repeat center center transparent;
    background-size: contain;
    transform-origin: 90% 90%;
    animation: bankbanner-person-3-2-hand 2s ease-in-out alternate infinite;
    -webkit-animation: bankbanner-person-3-2-hand 2s ease-in-out alternate infinite;
}

@keyframes bankbanner-person-3-2-hand {
    from {
        transform: rotate(5deg);
    }

    to {
        transform: rotate(-8deg);
    }
}

@-webkit-keyframes bankbanner-person-3-2-hand {
    from {
        -webkit-transform: rotate(5deg);
    }

    to {
        -webkit-transform: rotate(-8deg);
    }
}

.ohridbank-banner.noprice .scene-1 .bg-room {
    width: 100%;
    height: 100%;
    background: url("../../Content/Images/OhridBank/BannerNoPrice/background-2.svg") no-repeat center center transparent;
    background-size: cover;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    animation: scene-bg-room 0.6s ease forwards 18s;
}

@keyframes scene-bg-room {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ohridbank-banner.noprice .scene-1 .overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255,255, 0.8);
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    animation: scene-bg-room 0.6s ease forwards 19s;
}

@keyframes scene-overlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ohridbank-banner.noprice .scene-1 .banner-logo {
    width: 300px;
    height: 100px;
    background: url("../../Content/Images/OhridBank/logo.svg") no-repeat center center transparent;
    background-size: contain;
    top: calc(50% - 60px);
    left: calc(50% - 150px);
    position: absolute;
    opacity: 0;
    animation: scene-logo 4s ease forwards 13.5s;
    margin-top: 0px;
}

.ohridbank-banner.noprice.sparkasse .scene-1 .banner-logo {
    width: 300px;
    height: 100px;
    background: url("../../Content/Images/OhridBank/logo2.svg") no-repeat center center transparent;
    background-size: contain;
    top: calc(50% - 60px);
    left: calc(50% - 150px);
    position: absolute;
    opacity: 0;
    animation: scene-logo 4s ease forwards 13.5s;
    margin-top: 0px;
}

@keyframes scene-logo {
    0% {
        opacity: 0;
        transform: scale(1);
        margin-top: 0px;
    }

    30% {
        opacity: 0;
        transform: scale(1);
        margin-top: 0px;
    }

    35% {
        opacity: 1;
        transform: scale(1);
        margin-top: 0px;
    }

    90% {
        opacity: 1;
        transform: scale(1);
        margin-top: 0px;
    }

    100% {
        opacity: 1;
        transform: scale(0.4);
        margin-top: -60px;
    }
}

@keyframes scene-logo-2 {
    0% {
        opacity: 0;
        transform: scale(1);
        margin-top: 0px;
    }

    30% {
        opacity: 0;
        transform: scale(1);
        margin-top: 0px;
    }

    35% {
        opacity: 1;
        transform: scale(1);
        margin-top: 0px;
    }

    90% {
        opacity: 1;
        transform: scale(1);
        margin-top: 0px;
    }

    100% {
        opacity: 1;
        transform: scale(0.4);
        margin-top: -30px;
    }
}

/* #endregion Person 3-2 */
.ohridbank-banner.noprice .new-btn {
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 75px);
    min-width: 150px;
    opacity: 0;
    animation: scene-btn 0.6s ease forwards 19.5s;
    z-index: 2;
    cursor: pointer;
}

@keyframes scene-btn {
    from {
        transform: scale(0);
        opacity: 1;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.ohridbank-banner.noprice .left-person-message {
    position: absolute;
    font-size: 33px;
    font-weight: 600;
    color: var(--color-text-primary);
    display: block;
    width: 260px;
    margin: 0px auto;
    text-align: center;
    top: 34%;
    left: calc(50% - 130px);
    line-height: 33px;
    opacity: 0;
    animation: scene-message-1 6s ease-in-out forwards;
}


@keyframes scene-message-1 {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    97% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.ohridbank-banner.noprice .right-person-message-1 {
    position: absolute;
    font-size: 33px;
    font-weight: 600;
    color: #4D4D4D;
    display: block;
    width: 300px;
    margin: 0px auto;
    text-align: center;
    top: 35%;
    left: calc(50% - 150px);
    line-height: 33px;
    opacity: 0;
    animation: scene-message-2 3.5s ease-in-out forwards 5.9s;
}


*[lang="sq-AL"] .ohridbank-banner.noprice .right-person-message-1 {
    position: absolute;
    font-size: 28px;
    font-weight: 600;
    color: #4D4D4D;
    display: block;
    width: 240px;
    margin: 0px auto;
    text-align: center;
    top: 22%;
    left: calc(50% - 120px);
    line-height: 30px;
    opacity: 0;
    animation: scene-message-2 3.5s ease-in-out forwards 5.9s;
}

@keyframes scene-message-2 {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    97% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


.ohridbank-banner.noprice .right-person-message-2 {
    position: absolute;
    font-size: 33px;
    font-weight: 600;
    color: #4D4D4D;
    display: block;
    width: 260px;
    margin: 0px auto;
    text-align: center;
    top: 32%;
    left: calc(50% - 130px);
    line-height: 33px;
    opacity: 0;
    animation: scene-message-3 3.5s ease-in-out forwards 8.5s;
}

@keyframes scene-message-3 {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    97% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.ohridbank-banner.noprice .right-person-message-3 {
    position: absolute;
    font-size: 33px;
    font-weight: 600;
    color: #4D4D4D;
    display: block;
    width: 100%;
    line-height: 35px;
    margin: 0px auto;
    text-align: center;
    top: 35%;
    left: 0%;
    opacity: 0;
    animation: scene-message-4 3.5s ease-in-out forwards 11s
}

@keyframes scene-message-4 {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    97% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.ohridbank-banner.noprice .right-person-message-3 p:first-child {
    color: #4D4D4D;
    margin: 0px;
    padding: 0px;
}

.ohridbank-banner.noprice .right-person-message-3 p:last-child {
    color: #E00712;
    margin: 0px;
    padding: 0px;
}


.ohridbank-banner.noprice.sparkasse .rate-badge {
    position: absolute;
    z-index: 1;
    bottom: 10px;
    right: 10px;
    text-align: center;
    animation: sparkasse-rate-container 0.8s ease-in-out 19s forwards;
}

.ohridbank-banner.noprice.sparkasse .new-btn {
    top: calc(50% - 25px);
}


.ohridbank-banner.noprice.sparkasse .rate-badge > span {
    display: inline-block;
    color: #FFFFFF;
    font-weight: 700;
    padding: 5px 8px 5px 8px;
    border-radius: var(--radius-4);
    background-color: #ec1d25;
    animation: sparkasse-rate 0.8s ease-in-out 19s forwards;
}

    .ohridbank-banner.noprice.sparkasse .rate-badge > span b {
        color: #FFFFFF;
        animation: sparkasse-rate-b 0.8s ease-in-out 19s forwards;
    }

@keyframes sparkasse-rate {
    0% {
        color: #FFFFFF;
        background-color: #ec1d25;
    }

    100% {
        color: #014a7b;
        background-color: transparent;
        font-size: 16px;
    }
}

@keyframes sparkasse-rate-b {
    0% {
        color: #FFFFFF;
        background-color: #ec1d25;
    }

    100% {
        color: #ec1d25;
        background-color: transparent;
        font-size: 16px;
    }
}

@keyframes sparkasse-rate-container {
    0% {
        right: 10px;
        width: auto;
        opacity: 1;
    }

    5% {
        opacity: 0;
    }

    95% {
        opacity: 0;
    }

    100% {
        right: auto;
        left: 0px;
        width: 100%;
        opacity: 1;
        bottom: 20px;
    }
}


@media (max-width: 1550px) {
    .ohridbank-banner.noprice .scene-1 .person-1-1, .ohridbank-banner.noprice .scene-1 .person-2-1, .ohridbank-banner.noprice .scene-1 .person-2-3 {
        left: 5%;
    }

    .ohridbank-banner.noprice .scene-1 .person-2-2 {
        right: 6%;
    }

    /*   .ohridbank-banner.noprice .scene-1 .person-3-1 {
        left: 1%;
    }

    .ohridbank-banner.noprice .scene-1 .person-3-2 {
        right: 4%;
    }*/
}

@media (max-width: 1199px) {
    .ohridbank-banner.noprice .scene-1 .person-1-1,
    .ohridbank-banner.noprice .scene-1 .person-2-1,
    .ohridbank-banner.noprice .scene-1 .person-2-3 {
        left: 0%;
    }

    .ohridbank-banner.noprice .scene-1 .person-2-2 {
        right: 2%;
    }

    .ohridbank-banner.noprice .scene-1 .person-3-1 {
        left: 1%;
    }

    .ohridbank-banner.noprice .scene-1 .person-3-2 {
        right: 4%;
    }
}

@media (max-width: 1070px) {
    .ohridbank-banner.noprice .scene-1 .person-3-1 {
        left: 1%;
    }

    .ohridbank-banner.noprice .scene-1 .person-3-2 {
        right: 4%;
    }
}


@media (max-width: 991px) {
    .ohridbank-banner.noprice .scene-1 .left-person-message,
    .ohridbank-banner.noprice .scene-1 .right-person-message-1,
    .ohridbank-banner.noprice .scene-1 .right-person-message-2 {
        font-size: 26px;
        width: 200px;
        left: calc(50% - 100px);
        top: 32%;
    }

    .ohridbank-banner.noprice .right-person-message-3 {
        font-size: 26px;
        width: 400px;
        left: calc(50% - 200px);
        top: 24%;
    }

    *[lang="sq-AL"] .ohridbank-banner.noprice .right-person-message-1 {
        position: absolute;
        font-size: 26px;
        font-weight: 600;
        color: #4D4D4D;
        display: block;
        width: 240px;
        margin: 0px auto;
        text-align: center;
        top: 25%;
        left: calc(50% - 120px);
        line-height: 30px;
        opacity: 0;
        animation: scene-message-2 3.5s ease-in-out forwards 5.9s;
    }
}

@media (max-width: 767px) {
    .ohridbank-banner.noprice .scene-1 .person-3-1 {
        left: -10%;
    }

    .ohridbank-banner.noprice .scene-1 .person-3-2 {
        right: -10%;
    }
}

@media (max-width: 526px) {
    .ohridbank-banner.noprice .scene-1 .person-1-1,
    .ohridbank-banner.noprice .scene-1 .person-2-1,
    .ohridbank-banner.noprice .scene-1 .person-2-3 {
        left: -10%;
    }

    .ohridbank-banner.noprice .right-person-message-3 {
        width: 300px;
        left: calc(50% - 150px);
        font-size: 18px;
        line-height: 24px;
        top: 31%;
    }
}

@media (max-width: 450px) {
    .ohridbank-banner.noprice .scene-1 .person-1-1 {
        width: 170px;
        height: 170px;
    }

    .ohridbank-banner.noprice .scene-1 .person-2-1 {
        width: 170px;
        height: 170px;
    }

    .ohridbank-banner.noprice .scene-1 .person-2-2 {
        width: 170px;
        height: 170px;
    }

    .ohridbank-banner.noprice .scene-1 .person-2-3 {
        width: 170px;
        height: 170px;
    }

    .ohridbank-banner.noprice .scene-1 .person-3-1 {
        width: 210px;
        height: 210px;
    }

    .ohridbank-banner.noprice .scene-1 .person-3-2 {
        width: 190px;
        height: 190px;
    }

    .ohridbank-banner.noprice .scene-1 .left-person-message {
        font-size: 22px;
        width: 160px;
        left: calc(50% - 80px);
        color: var(--color-text-basic);
    }

    .ohridbank-banner.noprice .scene-1 .right-person-message-1 {
        font-size: 22px;
    }

    .ohridbank-banner.noprice .scene-1 .right-person-message-2 {
        font-size: 22px;
    }

    .ohridbank-banner.noprice .scene-1 .right-person-message-3 {
        font-size: 18px;
    }

    .ohridbank-banner.noprice .scene-1 .banner-logo {
        width: 200px;
        left: calc(50% - 100px);
    }

    .ohridbank-banner.noprice .new-btn {
        left: calc(50% - 75px);
    }

    *[lang="sq-AL"] .ohridbank-banner.noprice .new-btn {
        left: calc(50% - 75px);
    }

    *[lang="sq-AL"] .ohridbank-banner.noprice .right-person-message-1 {
        position: absolute;
        font-size: 22px;
        font-weight: 600;
        color: #4D4D4D;
        display: block;
        width: 240px;
        margin: 0px auto;
        text-align: center;
        top: 32%;
        left: calc(50% - 120px);
        line-height: 28px;
        opacity: 0;
        animation: scene-message-2 3.5s ease-in-out forwards 5.9s;
    }
}

@media (max-width: 410px) {
    .ohridbank-banner.noprice .new-btn {
        font-size: 12px;
        /*   padding: 13px 10px 12px 10px;*/
        min-width: 145px;
        left: calc(50% - 74px);
    }

    .ohridbank-banner.noprice.sparkasse .new-btn {
        font-size: 12px;
        /*   padding: 13px 10px 12px 10px;*/
        min-width: 145px;
        left: calc(50% - 74px);
    }

    .ohridbank-banner.noprice .right-person-message-3 {
        width: 260px;
        left: calc(50% - 130px);
        font-size: 16px;
        top: 27%;
    }

    .ohridbank-banner.noprice .scene-1 .person-1-1 {
        width: 150px;
        height: 150px;
    }

    .ohridbank-banner.noprice .scene-1 .person-1-1,
    .ohridbank-banner.noprice .scene-1 .person-2-1,
    .ohridbank-banner.noprice .scene-1 .person-2-3 {
        width: 150px;
        height: 150px;
    }

    .ohridbank-banner.noprice .scene-1 .person-2-2 {
        width: 140px;
        height: 140px;
    }

    .ohridbank-banner.noprice .scene-1 .person-3-1 {
        width: 180px;
        height: 180px;
    }

    .ohridbank-banner.noprice .scene-1 .person-3-2 {
        width: 160px;
        height: 160px;
    }

    .ohridbank-banner.noprice {
        /*  height: 145px;*/
    }

        .ohridbank-banner.noprice .scene-1 .banner-logo {
            animation: scene-logo-2 4s ease forwards 13.5s;
        }
}

@media (max-width: 345px) {
    .ohridbank-banner.noprice .scene-1 .person-3-1 {
        display: none;
    }

    .ohridbank-banner.noprice .scene-1 .person-3-2 {
        display: none;
    }

    .ohridbank-banner.noprice .scene-1 .left-person-message {
        font-size: 16px;
        width: 100px;
        left: calc(50% - 50px);
        line-height: 20px;
        top: calc(50% - 18px);
    }

    .ohridbank-banner.noprice .scene-1 .cloud-message-1 {
        width: 200px;
        height: 160px;
        top: calc(50% - 80px);
        left: calc(50% - 100px);
    }

    .ohridbank-banner.noprice .scene-1 .right-person-message-1 {
        font-size: 16px;
        line-height: 20px;
        left: calc(50% - 50px);
        width: 100px;
        top: calc(50% - 18px);
    }

    *[lang="sq-AL"] .ohridbank-banner.noprice .scene-1 .right-person-message-1 {
        font-size: 16px;
        line-height: 20px;
        left: calc(50% - 50px);
        width: 100px;
        top: 20%;
    }


    .ohridbank-banner.noprice .scene-1 .cloud-message-2 {
        width: 200px;
        height: 160px;
        top: calc(50% - 80px);
        left: calc(50% - 100px);
    }

    .ohridbank-banner.noprice .scene-1 .right-person-message-2 {
        font-size: 16px;
        line-height: 20px;
        left: calc(50% - 70px);
        width: 140px;
        top: calc(50% - 18px);
    }

    .ohridbank-banner.noprice .right-person-message-3 {
        width: 180px;
        left: calc(50% - 90px);
        font-size: 14px;
        line-height: 18px;
    }

        .ohridbank-banner.noprice .right-person-message-3 p:first-child {
            margin-top: -5px;
        }

        .ohridbank-banner.noprice .right-person-message-3 p:last-child {
            margin-top: 5px;
        }

    .ohridbank-banner.noprice.sparkasse .scene-1 .banner-logo {
        width: 280px;
        left: calc(50% - 140px);
    }
}
/* #endregion ---------------------- /No Price -------------------------- */
/* #endregion ============================= /Ohrid bank Banner ======================================= */
/* #region ================================ Sparkasse Bank Banner ====================================== */
.sparkasse-banner.no-price {
    margin-top: 25px;
    display: block;
    width: 100%;
    height: 140px;
    border-radius: var(--radius-4);
    background: url('../../Content/Images/SparkasseBank/bg-desktop.png') no-repeat right center #156F96;
    position: relative;
}

    .sparkasse-banner.no-price .banner-content-area {
        width: 250px;
        position: absolute;
        top: 10px;
        left: 10px;
        display: block;
    }

        .sparkasse-banner.no-price .banner-content-area .content-block-1 {
            width: 100%;
            display: block;
            background-color: rgba(171, 224, 249, 0.95);
            padding: 10px 10px 13px 10px;
        }

            .sparkasse-banner.no-price .banner-content-area .content-block-1 h5 {
                font-size: 20px;
                font-weight: 400;
                color: #00497B;
                margin-bottom: 5px;
                display: block;
            }

            .sparkasse-banner.no-price .banner-content-area .content-block-1 h6 {
                font-size: 15px;
                font-weight: 400;
                color: #00497B;
                margin-top: 5px;
                display: block;
            }

        .sparkasse-banner.no-price .banner-content-area .content-block-2 {
            width: 100%;
            display: block;
            background-color: rgba(171, 224, 249, 0.95);
            padding: 10px 10px 13px 10px;
            position: relative;
            margin-top: 3px;
            color: #00497B;
            height: 46px;
        }

            .sparkasse-banner.no-price .banner-content-area .content-block-2 .slogan {
                display: block;
                font-size: 9px;
                right: 9px;
                top: 24px;
                position: absolute;
            }

            .sparkasse-banner.no-price .banner-content-area .content-block-2 .logo {
                display: block;
                left: 9px;
                top: 0px;
                position: absolute;
                background: url('../../Content/Images/OhridBank/logo2.svg') no-repeat center center transparent;
                background-size: contain;
                width: 95px;
                height: 46px;
            }

    .sparkasse-banner.no-price .rate-badge {
        display: block;
        position: absolute;
        top: 10px;
        left: 310px;
        width: 120px;
        height: 120px;
    }

        .sparkasse-banner.no-price .rate-badge .inner {
            display: block;
            position: relative;
            width: 100%;
            height: 100%;
        }

        .sparkasse-banner.no-price .rate-badge .polygon-1 {
            display: block;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: url('../../Content/Images/SparkasseBank/banner-polygon1.svg') no-repeat center center transparent;
            background-size: contain;
            transform: rotate(20deg);
        }

        .sparkasse-banner.no-price .rate-badge .polygon-2 {
            display: block;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: url('../../Content/Images/SparkasseBank/banner-polygon2.svg') no-repeat center center transparent;
            background-size: contain;
            transform: rotate(50deg);
        }

        .sparkasse-banner.no-price .rate-badge .text-block {
            display: block;
            position: absolute;
            color: #FFFFFF;
            top: 0px;
            left: 8px;
            width: 100%;
            height: 100%;
            font-style: italic;
            text-align: center;
            top: 21px;
            font-weight: 700;
            transform: rotate( -20deg);
        }

            .sparkasse-banner.no-price .rate-badge .text-block p {
                font-size: 13px;
                line-height: 14px;
            }

                .sparkasse-banner.no-price .rate-badge .text-block p:first-child {
                    font-size: 18px;
                    line-height: 18px;
                }

                .sparkasse-banner.no-price .rate-badge .text-block p:last-child {
                    font-size: 25px;
                    line-height: 28px;
                }

@media (max-width: 1199px) {
    .sparkasse-banner.no-price {
        background: url('../../Content/Images/SparkasseBank/bg-desktop.png') no-repeat -260px center #156F96;
    }

        .sparkasse-banner.no-price .rate-badge {
            left: 286px;
        }
}

@media (max-width: 991px) {
    .sparkasse-banner.no-price {
        background: url('../../Content/Images/SparkasseBank/bg-desktop.png') no-repeat -200px center #156F96;
    }

        .sparkasse-banner.no-price .rate-badge {
            left: 306px;
        }
}

@media (max-width: 767px) {
    .sparkasse-banner.no-price {
        background: url("../../Content/Images/SparkasseBank/bg-mobile.jpg") no-repeat center bottom transparent;
        background-size: cover;
        width: 100%;
        height: 400px;
    }

        .sparkasse-banner.no-price .banner-content-area {
            width: 300px;
            position: absolute;
            top: auto;
            left: 20px;
            display: block;
            bottom: 20px;
        }

        .sparkasse-banner.no-price .rate-badge {
            left: 20px;
            top: auto;
            bottom: 160px;
        }

        .sparkasse-banner.no-price .banner-content-area .content-block-2 .logo {
            width: 120px;
        }
}

@media (max-width: 450px) {
    .sparkasse-banner.no-price {
        height: 320px;
    }
}

@media (max-width: 419px) {
    .sparkasse-banner.no-price {
        margin-top: 0px;
    }
}

@media (max-width: 380px) {
    .sparkasse-banner.no-price .banner-content-area {
        width: calc(100% - 40px);
    }

        .sparkasse-banner.no-price .banner-content-area .content-block-2 .logo {
            width: 90px;
        }
}

@media (max-width: 350px) {
    .sparkasse-banner.no-price {
        height: 280px;
    }

        .sparkasse-banner.no-price .rate-badge {
            width: 100px;
            height: 100px;
        }


            .sparkasse-banner.no-price .rate-badge .text-block {
                display: block;
                position: absolute;
                color: #FFFFFF;
                top: 0px;
                left: 8px;
                width: 100%;
                height: 100%;
                font-style: italic;
                text-align: center;
                top: 17px;
                font-weight: 700;
                transform: rotate( -20deg);
            }

                .sparkasse-banner.no-price .rate-badge .text-block p {
                    font-size: 12px;
                    line-height: 12px;
                }

                    .sparkasse-banner.no-price .rate-badge .text-block p:first-child {
                        font-size: 16px;
                        line-height: 15px;
                    }

                    .sparkasse-banner.no-price .rate-badge .text-block p:last-child {
                        font-size: 22px;
                        line-height: 25px;
                    }
}

@media (max-width: 319px) {
    .sparkasse-banner.no-price .banner-content-area .content-block-1 h5 {
        font-size: 16px;
    }

    .sparkasse-banner.no-price .banner-content-area .content-block-1 h6 {
        font-size: 14px;
    }

    .sparkasse-banner.no-price .banner-content-area .content-block-2 .logo {
        width: 70px;
    }
}


/* #endregion ========================== /Sparkasse Bank Banner ====================================== */
/* #region =============================== MerrJep.com, MerrJep.al ===================================== */
.logo-big-kosovo {
    width: 490px;
    background-image: url("../../Content/Images/Kosovo/Kosovo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    font-size: 17pt;
    font-style: italic;
    color: #34946a;
    height: 50px;
    /* padding-bottom: 24px; */
}

.kosovo-getstarted-caption p,
.albania-getstarted-caption p {
    line-height: 22px;
    margin-bottom: 20px;
    text-align: center;
    color: var(--color-text-basic);
    font-size: 15px;
}


    .kosovo-getstarted-caption p a,
    .albania-getstarted-caption p a {
        display: block;
        text-decoration: underline;
        font-size: 16px;
        color: var(--color-text-primary);
    }

.site-Kosovo .kosovo-getstarted-caption,
.site-Albania .albania-getstarted-caption {
    margin-top: 9px !important;
}

.kosovo-getstarted-caption h5,
.albania-getstarted-caption h5 {
    margin-top: 8px;
}


/* #endregion ============================= /MerrJep.com, MerrJep.al ================================== */
/* #region ========================================= Contacts ========================================== */
/* .card-body ul li {
    margin-left: 40px;
}

*[dir='rtl'] .card-body ul li {
    margin-right: 40px;
    margin-left: 0px;
} */
/* #endregion ==================================== /Contacts ========================================== */
/* #region ========================================= Payment =========================================== */
.payment-page .mobile-container {
    display: block;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.payment-page .btn-back bdi + bdi {
    padding-left: 0.4ch;
}

*[dir='rtl'] .payment-page .btn-back bdi + bdi {
    padding-left: 0px;
    padding-right: 0.4ch;
}

.payment-page h1 {
    font-size: 36px;
}

.payment-page h2 {
    font-size: 24px;
    padding-bottom: 20px;
}

.payment-page .content-area {
    padding-right: 30px;
    padding-left: 15px;
    margin-bottom: 80px;
}

*[dir='rtl'] .payment-page .content-area {
    padding-left: 30px;
    padding-right: 15px;
}

.payment-page .summary-area {
    border-left: 1px solid #DDDDDD;
    padding-left: 30px;
    padding-bottom: 30px;
    margin-bottom: 80px;
}

*[dir='rtl'] .payment-page .summary-area {
    border-left: none 0px transparent;
    border-right: 1px solid #DDDDDD;
    padding-left: 0px;
    padding-right: 30px;
}

.payment-page .mobile-action-panel {
    display: none;
    width: 100%;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: linear-gradient(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.08));
    text-align: center;
    position: fixed;
    z-index: 2;
    left: 0px;
    bottom: 0px;
}

    .payment-page .mobile-action-panel .inner {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        padding: 20px 30px 20px 30px;
    }

    .payment-page .mobile-action-panel .btn-primary {
        min-width: 300px;
    }

        .payment-page .mobile-action-panel .btn-primary span,
        .payment-page .mobile-action-panel .btn-primary bdi {
            display: inline-block;
        }

            .payment-page .mobile-action-panel .btn-primary span + span {
                margin-left: 0.4ch;
            }

*[dir='rtl'] .payment-page .mobile-action-panel .btn-primary span + span {
    margin-right: 0.4ch;
    margin-left: 0px;
}

.payment-page .mobile-action-panel .btn-primary span + bdi {
    margin-left: 10px;
}

*[dir='rtl'] .payment-page .mobile-action-panel .btn-primary span + bdi {
    margin-left: 0px;
    margin-right: 10px;
}

*[dir='rtl'] .methods-tabs-group .list-group-item .check {
    left: -14px;
    right: auto !important;
}

.methods-tabs-group .mhawala-logo {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-top: 20px;
    vertical-align: middle;
    position: relative;
    background: transparent;
}

    .methods-tabs-group .mhawala-logo > * {
        display: block;
        background: url("../../Content/Images/mHawala/mHawala-grayscale.svg") no-repeat center center transparent;
        background-size: contain;
        width: 48px;
        height: 48px;
        vertical-align: middle;
        position: absolute;
        z-index: 1;
        top: -8px;
        left: -8px;
    }


.payment-page .collapse-item .divider {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #F2F2F2;
}

.payment-page .collapse-item a {
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    line-height: 20px;
    display: block;
    padding-left: 10px;
    padding-right: 40px;
}

*[dir='rtl'] .payment-page .collapse-item a {
    padding-left: 40px;
    padding-right: 10px;
}

.payment-page .collapse-item a.collapsed .ci-pazar-small {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.payment-page .collapse-item a .ci-pazar-small {
    display: block;
    position: absolute;
    top: calc(50% - 10px);
    right: 8px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

*[dir='rtl'] .payment-page .collapse-item a .ci-pazar-small {
    right: auto;
    left: 8px;
}

@media (max-width: 991px) {
    .payment-page .mobile-container {
        max-width: 720px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    .payment-page h1 {
        font-size: 28px;
        margin-bottom: 5px;
        font-weight: 700 !important;
    }

    .payment-page h2 {
        font-weight: 700 !important;
    }

    .payment-page .content-area,
    *[dir='rtl'] .payment-page .content-area {
        padding-right: 15px;
        padding-left: 15px;
        margin-bottom: 50px;
    }

    .payment-page .summary-area,
    *[dir='rtl'] .payment-page .summary-area {
        padding-top: 50px;
        border-left: 0px none transparent;
        border-right: 0px none transparent;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 170px;
        margin-bottom: 0px;
        background-color: #F9F9F9;
    }

        .payment-page .summary-area .btn-primary,
        .payment-page .summary-area .btn-default {
            display: none;
        }

    .payment-page .mobile-action-panel {
        display: block;
    }

        .payment-page .mobile-action-panel .new-btn.btn-default {
            background-color: #FFFFFF !important;
        }
}

@media (max-width: 767px) {
    .payment-page .mobile-container {
        max-width: 540px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    .payment-page h1 {
        padding-top: 5px;
        line-height: 28px;
        padding-bottom: 10px;
    }
}

@media (max-width: 575px) {
    .payment-page .btn-back bdi + bdi {
        display: none;
    }

    .payment-page .btn-back {
        margin-left: -10px;
    }

    *[dir='rtl'] .payment-page .btn-back {
        margin-left: 0px;
        margin-right: -10px;
    }

    .payment-page .mobile-action-panel .btn-primary {
        min-width: 100%;
    }

        .payment-page .mobile-action-panel .btn-primary span:first-child {
            display: none;
        }

    .payment-page .mobile-container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .payment-page h2 {
        font-size: 18px;
    }

    .payment-page .summary-area, *[dir='rtl'] .payment-page .summary-area {
        padding-top: 40px;
    }


    .payment-page .mobile-action-panel .new-btn.btn-default {
        width: 100%;
        margin-top: 10px;
    }
}

@media (max-width: 450px) {
    .payment-page .mobile-action-panel .new-btn {
        padding: 15px 10px 15px 10px;
    }

    .payment-page .mobile-action-panel .inner {
        padding: 10px 20px 10px 20px;
    }

    .payment-page .summary-area,
    *[dir='rtl'] .payment-page .summary-area {
        padding-bottom: 130px;
    }
}
/* #region --------------- Payment Methods Tabs --------------------- */
.methods-tabs-group.list-group.bootstrap4 {
    display: table !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 0px !important;
}

.methods-tabs-group .list-group-item {
    display: inline-block !important;
    width: calc(20%) !important;
    border: 0px none transparent !important;
    color: var(--color-text-muted) !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 0px 7px 0px 7px !important;
}

    .methods-tabs-group .list-group-item:hover,
    .methods-tabs-group .list-group-item:active {
        background-color: transparent !important;
        opacity: 1 !important;
    }

        .methods-tabs-group .list-group-item:hover .inner {
            border: 2px solid #C5C5C5 !important;
            -webkit-transition: border 0.2s ease !important;
            transition: border 0.2s ease !important;
        }

    .methods-tabs-group .list-group-item .inner {
        display: block !important;
        width: 100% !important;
        min-height: 105px !important;
        position: relative !important;
        border: 2px solid #DDDDDD !important;
        border-radius: var(--radius-4) !important;
        -webkit-transition: border 0.2s ease !important;
        transition: border 0.2s ease !important;
    }


    .methods-tabs-group .list-group-item.active {
        background-color: transparent !important;
        color: var(--color-text-muted) !important;
        border: 0px none transparent !important;
    }

        .methods-tabs-group .list-group-item.active .inner {
            border: 2px solid var(--color-border-primary) !important;
            background-color: transparent !important;
            -webkit-transition: border 0.2s ease !important;
            transition: border 0.2s ease !important;
        }

.methods-tabs-group.bootstrap4.list-group-horizontal > .list-group-item + .list-group-item.active {
    margin-left: 0px !important;
}


.methods-tabs-group .list-group-item .ci-pazar.method {
    font-size: 32px !important;
    margin-top: 20px !important;
}

.methods-tabs-group .list-group-item .title {
    display: block !important;
    width: 100% !important;
    position: absolute !important;
    top: 60px !important;
    left: 0px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.methods-tabs-group .list-group-item .check {
    display: block !important;
    position: absolute !important;
    top: -14px !important;
    right: -14px !important;
    background-color: var(--color-bg-primary) !important;
    border-radius: 50% !important;
    border: 3px solid #ffffff !important;
    -webkit-transform: scale(0) !important;
    transform: scale(0) !important;
    -webkit-transition: -webkit-transform 0.3s ease !important;
    transition: transform 0.3s ease !important;
}

    .methods-tabs-group .list-group-item .check .ci-pazar-small {
        margin: 5px !important;
        font-size: 12px !important;
    }

.methods-tabs-group .list-group-item.active .check {
    display: block !important;
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
    -webkit-transition: -webkit-transform 0.3s ease !important;
    transition: transform 0.3s ease !important;
}

@media (max-width: 767px) {
    .methods-tabs-group .list-group-item {
        display: inline-block !important;
        width: 100% !important;
        border: 0px none transparent !important;
        color: var(--color-text-muted) !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        padding: 5px 0px 5px 0px !important;
    }

        .methods-tabs-group .list-group-item .inner {
            text-align: left !important;
            min-height: 0px !important;
            padding: 20px 10px 20px 60px !important;
        }

    *[dir='rtl'] .methods-tabs-group .list-group-item .inner {
        text-align: right !important;
        min-height: 0px !important;
        padding: 20px 60px 20px 10px !important;
    }

    .methods-tabs-group .list-group-item .ci-pazar.method {
        font-size: 44px !important;
        margin-top: 0px !important;
        position: absolute !important;
        left: 10px !important;
        top: calc(50% - 22px) !important;
    }

    *[dir='rtl'] .methods-tabs-group .list-group-item .ci-pazar.method {
        left: auto !important;
        right: 10px !important;
    }

    .methods-tabs-group .list-group-item .title {
        position: static !important;
        display: inline-block !important;
        width: auto !important;
    }

    .methods-tabs-group .list-group-item .check {
        top: calc(50% - 15px) !important;
        right: 10px !important;
    }

    *[dir='rtl'] .methods-tabs-group .list-group-item .check {
        left: 10px !important;
        right: auto !important;
    }
}
/* #endregion ------------ Payment Methods Tabs --------------------- */
/* #region ------------------- Order panel -------------------------- */
.payment-page .summary-area .order-item:before {
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, rgba(200,200,200,1) 45%, rgba(200,200,200,0) 0%);
    background-position: bottom;
    background-size: 9px 1px;
    background-repeat: repeat-x;
    margin-bottom: 20px;
}

.payment-page .summary-area .order-item {
    display: block;
    margin-bottom: 20px;
}

    .payment-page .summary-area .order-item .title {
        font-weight: 700;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .payment-page .summary-area .order-item .description {
        margin-bottom: 10px;
    }

    .payment-page .summary-area .order-item .price {
        font-size: 18px;
        font-weight: 700;
        text-align: right;
    }

*[dir='rtl'] .payment-page .summary-area .order-item .price {
    text-align: left;
}

.payment-page .summary-area .total {
    display: block;
    position: relative;
}

    .payment-page .summary-area .total:before {
        display: block;
        content: '';
        width: 100%;
        height: 1px;
        background-image: linear-gradient(to right, rgba(200,200,200,1) 45%, rgba(200,200,200,0) 0%);
        background-position: bottom;
        background-size: 9px 1px;
        background-repeat: repeat-x;
        margin-bottom: 15px;
    }

    .payment-page .summary-area .total:after {
        display: block;
        content: '';
        width: 100%;
        height: 1px;
        background-image: linear-gradient(to right, rgba(200,200,200,1) 45%, rgba(200,200,200,0) 0%);
        background-position: bottom;
        background-size: 9px 1px;
        background-repeat: repeat-x;
        margin-top: 15px;
    }

.payment-page .summary-area .discount-item {
    position: relative;
    padding-top: 2px;
    padding-bottom: 15px;
}

    .payment-page .summary-area .discount-item .title {
        position: absolute;
        left: 0px;
        top: calc(50% - 14px);
        display: block;
        width: 100%;
        text-align: left;
        font-size: 14px;
        font-weight: 700;
    }

*[dir='rtl'] .payment-page .summary-area .discount-item .title {
    left: auto;
    right: 0px;
    text-align: right;
}

.payment-page .summary-area .discount-item .title .value {
    display: inline-block;
    margin-left: 8px;
    color: var(--color-text-primary);
}

*[dir='rtl'] .payment-page .summary-area .discount-item .title .value {
    margin-left: 0px;
    margin-right: 8px;
}

.payment-page .summary-area .discount-item .price {
    display: block;
    text-align: right;
    font-weight: 700;
    color: var(--color-text-primary) !important;
    font-size: 18px;
    text-transform: uppercase;
}

*[dir='rtl'] .payment-page .summary-area .discount-item .price {
    text-align: left;
}

.payment-page .summary-area .total-item {
    position: relative;
}


.payment-page .summary-area .total .total-item .price {
    display: block;
    text-align: right;
}

    .payment-page .summary-area .total .total-item .price span {
        font-weight: 700;
        font-size: 36px;
    }

    .payment-page .summary-area .total .total-item .price small {
        font-weight: 700;
        font-size: 18px;
        text-transform: uppercase;
    }

*[dir='rtl'] .payment-page .summary-area .total .total-item .price {
    text-align: left;
}

.payment-page .summary-area .total .total-item .title {
    position: absolute;
    left: 0px;
    bottom: 5px;
    display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
}

*[dir='rtl'] .payment-page .summary-area .total .total-item .title {
    text-align: right;
}

@media (max-width: 991px) {
    .payment-page .summary-area .order-item:before,
    .payment-page .summary-area .total:before,
    .payment-page .summary-area .total:after {
        display: none;
    }

    .payment-page .summary-area .order-item {
        border-top: 2px solid #DDDDDD;
        padding-top: 20px;
    }

    .payment-page .summary-area .total {
        border-top: 2px solid #DDDDDD;
        border-bottom: 2px solid #DDDDDD;
        padding-top: 15px;
        padding-bottom: 15px;
    }
}
/* #endregion ---------------- Order panel -------------------------- */
/* #region --------------------- mHawala ---------------------------- */
.payment-page .mhawala .content-area .description {
    font-size: 18px;
    margin-bottom: 30px;
    margin-inline-end: 30px;
}

.payment-page .mhawala-content {
    display: flex;
    width: 100%;
}

    .payment-page .mhawala-content .left-side {
        width: 200px;
        margin-inline-end: 60px;
    }

    .payment-page .mhawala-content .right-side {
        width: 100%;
        margin-inline-end: 30px;
    }

    .payment-page .mhawala-content .left-side img {
        width: 200px;
        height: auto;
        display: block;
        margin-bottom: 15px;
    }

    .payment-page .mhawala-content .right-side p {
        font-size: 18px;
        line-height: 24px;
        padding-bottom: 15px;
    }

.payment-page .phone-item {
    display: block;
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

    .payment-page .phone-item label {
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .payment-page .phone-item input[type='radio']:checked + .panel {
        background-color: #E6F4ED;
    }

    .payment-page .phone-item .panel .content {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .payment-page .phone-item .panel .phone-number {
        width: 100%;
        font-size: 20px;
        font-weight: 400;
        color: var(--color-text-muted);
        padding-inline-start: 50px;
    }

    .payment-page .phone-item .panel .remove-phone {
        width: 64px;
        height: 64px;
        background-color: transparent;
        display: block;
        border: 0px none transparent;
        font-size: 32px;
        cursor: pointer;
    }

    .payment-page .phone-item .checker {
        display: block;
        position: absolute;
        z-index: 1;
        top: calc(50% - 15px);
        left: 10px;
        width: 30px;
        height: 30px;
        border: 3px solid #FFFFFF;
        background-color: var(--color-neutral-600);
        border-radius: 50%;
    }

*[dir='rtl'] .payment-page .phone-item .checker {
    right: 10px;
    left: auto;
}

.payment-page .phone-item .checker i {
    display: none;
    font-size: 14px;
    margin-top: 5px;
    margin-left: 5px;
}

*[dir='rtl'] .payment-page .phone-item .checker i {
    margin-right: 5px;
    margin-left: 0px;
}

.payment-page .phone-item input[type='radio']:checked + .panel .checker {
    background-color: var(--color-bg-primary);
}

    .payment-page .phone-item input[type='radio']:checked + .panel .checker i {
        display: block;
    }

@media (max-width: 1199px) {
    .payment-page .mhawala .content-area .description {
        margin-inline-end: 0px;
    }

    .payment-page .mhawala-content .left-side {
        width: 200px;
        margin-inline-end: 30px;
    }


    .payment-page .mhawala-content .right-side {
        margin-inline-end: 0px;
    }
}

@media (max-width: 767px) {
    .methods-tabs-group .mhawala-logo {
        display: inline-block;
        width: 44px;
        height: 44px;
        margin-top: 20px;
        vertical-align: middle;
        position: absolute;
        background: transparent;
        top: -15px;
        left: 8px;
    }

    *[dir='rtl'] .methods-tabs-group .mhawala-logo {
        top: -15px;
        right: 8px;
        left: auto;
    }

    .methods-tabs-group .mhawala-logo > * {
        top: -3px;
        left: -2px;
    }


    .payment-page .mhawala-content .left-side {
        display: none;
    }
}

@media (max-width: 400px) {
    .payment-page .phone-item .panel .phone-number {
        font-size: 14px;
    }
}

/* #endregion ----------------- /mHawala ---------------------------- */
/* #region ----------------- Account Balance ------------------------ */
.payment-page .account-balance .content-area .panel {
    background-color: #F9F9F9;
    border-radius: var(--radius-4);
    padding: 30px;
    position: relative;
}

    .payment-page .account-balance .content-area .panel .title {
        display: block;
        width: 100%;
        text-align: left;
        text-transform: uppercase;
        font-size: 14px;
    }

    .payment-page .account-balance .content-area .panel .balance {
        display: block;
        width: 100%;
        text-align: left;
        text-transform: uppercase;
        font-size: 36px;
    }

*[dir='rtl'] .payment-page .account-balance .content-area .panel .title {
    text-align: right;
}

*[dir='rtl'] .payment-page .account-balance .content-area .panel .balance {
    text-align: right;
}

.payment-page .account-balance .content-area .panel .new-btn {
    color: var(--color-text-primary) !important;
    position: absolute;
    top: calc(50% - 26px);
    right: 30px;
}

*[dir='rtl'] .payment-page .account-balance .content-area .panel .new-btn {
    right: auto;
    left: 30px;
}

.payment-page .account-balance .content-area .panel .new-btn .ci-plus {
    top: calc(50% - 7px);
    left: 14px;
}

*[dir='rtl'] .payment-page .account-balance .content-area .panel .new-btn .ci-plus {
    left: auto;
    right: 14px;
}

.payment-page .account-balance .content-area .panel.error {
    display: block;
    width: 100%;
    padding: 30px;
    padding-left: 100px;
    border-radius: var(--radius-4);
    background-color: #FFF4F4;
    position: relative;
}

*[dir='rtl'] .payment-page .account-balance .content-area .panel.error {
    padding-left: 30px;
    padding-right: 100px;
}

.payment-page .account-balance .content-area .panel.error p {
    margin-top: 5px;
    margin-bottom: 5px;
}

.payment-page .account-balance .content-area .panel.error .error-icon {
    position: absolute;
    top: calc(50% - 28px);
    left: 28px;
    border-radius: 50%;
    padding: 14px;
    background-color: var(--color-bg-danger);
}

    .payment-page .account-balance .content-area .panel.error .error-icon .ci-pazar-small {
        font-size: 24px;
    }

*[dir='rtl'] .payment-page .account-balance .content-area .panel.error .error-icon {
    left: auto;
    right: 28px;
}

@media (max-width: 767px) {
    .payment-page .account-balance .content-area .panel .balance {
        font-size: 24px;
    }
}

@media (max-width: 519px) {
    .payment-page .account-balance .content-area .panel,
    *[dir='rtl'] .payment-page .account-balance .content-area .panel {
        text-align: center;
    }

        .payment-page .account-balance .content-area .panel .title,
        .payment-page .account-balance .content-area .panel .balance,
        *[dir='rtl'] .payment-page .account-balance .content-area .panel .title,
        *[dir='rtl'] .payment-page .account-balance .content-area .panel .balance {
            text-align: center;
        }

        .payment-page .account-balance .content-area .panel .balance {
            font-size: 36px;
        }

        .payment-page .account-balance .content-area .panel .new-btn,
        *[dir='rtl'] .payment-page .account-balance .content-area .panel .new-btn {
            position: relative;
            display: inline-block;
            top: auto;
            left: auto;
            right: auto;
            margin: 20px auto 0px auto;
        }

        .payment-page .account-balance .content-area .panel.error {
            text-align: left;
        }

        *[dir='rtl'] .payment-page .account-balance .content-area .panel.error {
            text-align: right;
        }
}

@media (max-width: 450px) {
    .payment-page .account-balance .content-area .panel.error {
        padding: 20px;
        padding-left: 60px;
    }

    *[dir='rtl'] .payment-page .account-balance .content-area .panel.error {
        padding: 20px;
        padding-left: 20px;
        padding-right: 60px;
    }

    .payment-page .account-balance .content-area .panel.error .error-icon {
        top: 30px;
        left: 18px;
        padding: 6px;
    }

    *[dir='rtl'] .payment-page .account-balance .content-area .panel.error .error-icon {
        left: auto;
        right: 18px;
    }

    .payment-page .account-balance .content-area .panel.error .error-icon .ci-pazar-small {
        font-size: 14px;
    }
}

@media (max-width: 350px) {
    .payment-page .account-balance .content-area .panel .balance {
        font-size: 28px;
    }
}
/* #endregion -------------- Account Balance ------------------------ */
/* #region ------------------- Credit Card -------------------------- */
.payment-page .credit-card .content-area .card-item,
.payment-methods-page .card-item {
    display: block;
    width: 100%;
    position: relative;
    margin-block-end: var(--gap-4);
}

    .payment-page .credit-card .content-area .card-item .row,
    .payment-methods-page .card-item .row {
        margin: 0px;
        display: flex;
        align-items: center;
    }

        .payment-page .credit-card .content-area .card-item .row *[class*='col-'],
        .payment-methods-page .card-item .row *[class*='col-'] {
            padding-left: 0px;
            padding-right: 0px;
        }

    .payment-page .credit-card .content-area .card-item label,
    .payment-methods-page .card-item label {
        display: block;
        width: 100%;
        height: 100%;
    }

    .payment-page .credit-card .content-area .card-item input[type='radio'],
    .payment-methods-page .card-item input[type='radio'] {
        display: none;
    }

    .payment-page .credit-card .content-area .card-item .panel,
    .payment-methods-page .card-item .panel {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        background-color: transparent;
        border-radius: var(--radius-12);
        padding: 10px 10px 10px 65px;
        cursor: pointer;
    }

*[dir='rtl'] .payment-page .credit-card .content-area .card-item .panel,
*[dir='rtl'] .payment-methods-page .card-item .panel {
    padding: 10px 65px 10px 10px;
}

.payment-page .credit-card .content-area .card-item input[type='radio']:checked + .panel,
.payment-methods-page .card-item input[type='radio']:checked + .panel {
    background-color: var(--color-bg-panel);
}

.payment-page .credit-card .content-area .card-item .checker,
.payment-methods-page .card-item .checker {
    display: block;
    position: absolute;
    z-index: 1;
    inset-block-start: calc(50% - 12px);
    inset-inline-start: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border-basic);
    background-color: var(--color-bg-panel);
    border-radius: 50%;
}


    .payment-page .credit-card .content-area .card-item .checker i,
    .payment-methods-page .card-item .checker i {
        display: none;
        font-size: 14px;
        margin-top: 3px;
        margin-left: 3px;
    }

*[dir='rtl'] .payment-page .credit-card .content-area .card-item .checker i,
*[dir='rtl'] .payment-methods-page .card-item .checker i {
    margin-left: 0px;
    margin-right: 3px;
}

.payment-page .credit-card .content-area .card-item input[type='radio']:checked + .panel .checker,
.payment-methods-page .card-item input[type='radio']:checked + .panel .checker {
    background-color: var(--color-bg-primary);
    border-color: var(--color-bg-primary) !important;
}

    .payment-page .credit-card .content-area .card-item input[type='radio']:checked + .panel .checker i,
    .payment-methods-page .card-item input[type='radio']:checked + .panel .checker i {
        display: block;
    }

.payment-page .credit-card .content-area .card-item .card-title,
.payment-page .credit-card .content-area .card-item .card-date,
.payment-page .credit-card .content-area .card-item .ci-text-muted,
.payment-methods-page .card-item .card-title,
.payment-methods-page .card-item .card-date,
.payment-methods-page .card-item .ci-text-muted {
    display: block;
    width: 100%;
}

.payment-page .credit-card .content-area .card-item .title,
.payment-methods-page .card-item .title {
    padding-left: 60px !important;
    position: relative;
}

*[dir='rtl'] .payment-page .credit-card .content-area .card-item .title,
*[dir='rtl'] .payment-methods-page .card-item .title {
    padding-right: 60px !important;
    padding-left: 15px;
}

.payment-page .credit-card .content-area .card-item .title .logo,
.payment-methods-page .card-item .title .logo {
    position: absolute;
    inset-block-start: -3px;
    inset-inline-start: 0px;
    width: 40px;
    height: 40px;
    background-color: var(--color-bg-panel);
    border-radius: var(--radius-4);
}

.payment-page .credit-card .content-area .card-item input[type='radio']:checked + .panel .title .logo,
.payment-methods-page .card-item input[type='radio']:checked + .panel .title .logo {
    background-color: var(--color-bg-alt);
}



.payment-page .credit-card .content-area .card-item .title .logo .inner,
.payment-methods-page .card-item .title .logo .inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .payment-page .credit-card .content-area .card-item .title .logo .inner .ci-pazar-social,
    .payment-methods-page .card-item .title .logo .inner .ci-pazar-social {
        font-size: 32px;
        display: block;
    }

.payment-page .credit-card .content-area .card-item .card-title,
.payment-methods-page .card-item .card-title {
    text-align: left;
}

*[dir='rtl'] .payment-page .credit-card .content-area .card-item .card-title,
*[dir='rtl'] .payment-methods-page .card-item .card-title {
    text-align: right;
}

.payment-page .credit-card .content-area .card-item .date,
.payment-methods-page .card-item .date {
    text-align: center;
}

.payment-page .credit-card .content-area .card-item .card-controls,
.payment-methods-page .card-item .card-controls {
    text-align: right;
    font-size: 0px;
}

*[dir='rtl'] .payment-page .credit-card .content-area .card-item .card-controls,
*[dir='rtl'] .payment-methods-page .card-item .card-controls {
    text-align: left;
}

.payment-page .credit-card .content-area .card-item .card-controls button,
.payment-methods-page .card-item .card-controls button {
    font-size: 24px;
    padding: 0px;
    margin: 0px;
    border: 0px none transparent;
    background: transparent;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-4);
    background-color: transparent;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

    .payment-page .credit-card .content-area .card-item .card-controls button:hover,
    .payment-methods-page .card-item .card-controls button:hover {
        background-color: var(--color-bg-inputs-transparent);
        transition: background-color 0.3s ease;
    }

.payment-page .credit-card .content-area .card-item .error-block,
.payment-methods-page .card-item .error-block {
    display: block;
    width: 100%;
    border-top: 1px solid var(--color-border-muted);
    margin-top: 10px;
    padding-top: 10px
}

    .payment-page .credit-card .content-area .card-item .error-block b,
    .payment-methods-page .card-item .error-block b {
        padding-right: 5px;
    }

*[dir='rtl'] .payment-page .credit-card .content-area .card-item .error-block b,
*[dir='rtl'] .payment-methods-page .card-item .error-block b {
    padding-right: 0px;
    padding-left: 5px;
}

.card-item .card-title, .card-item .card-date {
    font-size: 14px;
    font-weight: 700;
}

.new-card-btn {
    display: block;
    width: 100%;
    background-color: transparent;
    border: 2px dashed #C5C5C5;
    padding: 30px 20px 30px 20px;
    border-radius: var(--radius-4);
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

    .new-card-btn:hover {
        opacity: 0.6;
        -webkit-transition: opacity 0.2s ease-in-out;
        transition: opacity 0.2s ease-in-out;
    }

.payment-methods-page .cardlist .controls {
    display: flex;
    width: 100%;
    gap: var(--gap-16);
    padding-block-start: var(--gap-32);
}

    .payment-methods-page .cardlist .controls .new-btn {
        display: block;
        width: 100%;
        border-radius: var(--radius-4);
        background-color: var(--color-bg-inputs-transparent);
    }


/* #region MerrJep */
.payment-page .credit-card.merrjep .content-area .warning-message {
    display: block;
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #F9F9F9;
    margin-top: 50px;
    padding: 20px 20px 20px 60px;
    position: relative;
}

*[dir='rtl'] .payment-page .credit-card.merrjep .content-area .warning-message {
    padding: 20px 60px 20px 20px;
}

.payment-page .credit-card.merrjep .content-area .warning-message .ci-pazar {
    position: absolute;
    top: 22px;
    left: 16px;
    font-size: 32px;
}

*[dir='rtl'] .payment-page .credit-card.merrjep .content-area .warning-message .ci-pazar {
    left: auto;
    right: 16px;
}

.payment-page .credit-card.merrjep .instructions-block {
    display: block;
    position: relative;
}

    .payment-page .credit-card.merrjep .instructions-block .ci-pazar-small {
        position: absolute;
        font-size: 32px !important;
        top: 110px;
        left: calc(50% - 18px);
    }

*[dir='rtl'] .payment-page .credit-card.merrjep .instructions-block .ci-pazar-small {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.payment-page .credit-card.merrjep .instructions-block .instructions-item {
    width: 50%;
    text-align: center;
    float: left;
}

*[dir='rtl'] .payment-page .credit-card.merrjep .instructions-block .instructions-item {
    float: right;
}

.payment-page .credit-card.merrjep .instructions-block .instructions-item p {
    font-size: 18px;
    padding-left: 20px;
    padding-right: 20px;
}

.payment-page .credit-card.merrjep .instructions-block .instructions-item .clipart-block {
    display: block;
    width: 250px;
    height: 250px;
    margin: 0px auto;
    position: relative;
}

    .payment-page .credit-card.merrjep .instructions-block .instructions-item .clipart-block .clipart-bank {
        display: block;
        width: 60%;
        height: 60%;
        top: 19%;
        left: 20%;
        background-color: transparent;
        background-image: url('../../Content/Images/PaymentMethods/clipart-bank.svg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        z-index: 3;
    }

.payment-page .credit-card.merrjep .clipart-current-bank .clipart-tree-1,
.payment-page .credit-card.merrjep .clipart-current-bank .clipart-tree-2,
.payment-page .credit-card.merrjep .clipart-current-bank .clipart-tree-3 {
    display: block;
    position: absolute;
    border-radius: 50%;
    z-index: 2;
    background-color: var(--color-bg-primary);
}

.payment-page .credit-card.merrjep .clipart-current-bank .clipart-tree-1 {
    top: 55%;
    left: 12%;
    width: 23%;
    height: 16%;
    transform-origin: bottom;
    animation: credit-card-bank-tree-1 1.0s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-current-bank .clipart-tree-2 {
    top: 49%;
    left: 17%;
    width: 18%;
    height: 18%;
    animation: credit-card-bank-tree-2 1.0s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-current-bank .clipart-tree-3 {
    top: 54%;
    left: 60%;
    width: 25%;
    height: 18%;
    transform-origin: bottom;
    animation: credit-card-bank-tree-3 1.3s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-current-bank .clipart-tree-4,
.payment-page .credit-card.merrjep .clipart-current-bank .clipart-tree-5 {
    display: block;
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    background-color: #78d19e;
}

.payment-page .credit-card.merrjep .clipart-current-bank .clipart-tree-4 {
    top: 45%;
    left: 68%;
    width: 15%;
    height: 15%;
    animation: credit-card-bank-tree-4 1.0s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-current-bank .clipart-tree-5 {
    top: 55.5%;
    left: 74%;
    width: 15%;
    height: 15%;
    animation: credit-card-bank-tree-5 1.0s ease-in-out infinite alternate;
}


@keyframes credit-card-bank-tree-1 {
    from {
        transform: scaleY(1);
    }

    to {
        transform: scaleY(1.1);
    }
}


@keyframes credit-card-bank-tree-2 {
    from {
        transform: translate(-3%, -5%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes credit-card-bank-tree-3 {
    from {
        transform: scaleY(1);
    }

    to {
        transform: scaleY(1.15);
    }
}

@keyframes credit-card-bank-tree-4 {
    from {
        transform: translate(4%, -5%);
    }

    to {
        transform: translate(0%, 3%);
    }
}

@keyframes credit-card-bank-tree-5 {
    from {
        transform: translate(3%, 0%);
    }

    to {
        transform: translate(-3%, 0%);
    }
}

.payment-page .credit-card.merrjep .clipart-current-bank .clipart-cloud-1,
.payment-page .credit-card.merrjep .clipart-current-bank .clipart-cloud-2,
.payment-page .credit-card.merrjep .clipart-current-bank .clipart-cloud-3,
.payment-page .credit-card.merrjep .clipart-current-bank .clipart-cloud-4,
.payment-page .credit-card.merrjep .clipart-current-bank .clipart-cloud-5,
.payment-page .credit-card.merrjep .clipart-current-bank .clipart-cloud-6 {
    display: block;
    position: absolute;
    border-radius: 50%;
    background-color: #F6F6F6;
}

.payment-page .credit-card.merrjep .clipart-current-bank .clipart-cloud-1 {
    top: 9%;
    left: 24%;
    width: 32%;
    height: 32%;
    -webkit-animation: credit-card-clipart1-cloud-1 1.5s ease-in-out infinite alternate;
    animation: credit-card-clipart1-cloud-1 1.5s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-current-bank .clipart-cloud-2 {
    top: 12%;
    left: 45%;
    width: 35%;
    height: 35%;
    -webkit-animation: credit-card-clipart1-cloud-2 1.2s ease-in-out infinite alternate;
    animation: credit-card-clipart1-cloud-2 1.2s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-current-bank .clipart-cloud-3 {
    top: 20%;
    left: 68%;
    width: 32%;
    height: 32%;
    -webkit-animation: credit-card-clipart1-cloud-3 1.5s ease-in-out infinite alternate;
    animation: credit-card-clipart1-cloud-3 1.5s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-current-bank .clipart-cloud-4 {
    top: 31%;
    left: 37%;
    width: 60%;
    height: 60%;
    -webkit-animation: credit-card-clipart1-cloud-4 1.5s ease-in-out infinite alternate;
    animation: credit-card-clipart1-cloud-4 1.5s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-current-bank .clipart-cloud-5 {
    top: 66%;
    left: 24%;
    width: 26%;
    height: 26%;
    -webkit-animation: credit-card-clipart1-cloud-5 1.2s ease-in-out infinite alternate;
    animation: credit-card-clipart1-cloud-5 1.2s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-current-bank .clipart-cloud-6 {
    top: 29%;
    left: 0%;
    width: 50%;
    height: 50%;
    -webkit-animation: credit-card-clipart1-cloud-6 1.3s ease-in-out infinite alternate;
    animation: credit-card-clipart1-cloud-6 1.3s ease-in-out infinite alternate;
}


@keyframes credit-card-clipart1-cloud-1 {
    from {
        transform: translate(3%, 3%);
    }

    to {
        transform: translate(-3%, -5%);
    }
}

@-webkit-keyframes credit-card-clipart1-cloud-1 {
    from {
        -webkit-transform: translate(3%, 3%);
    }

    to {
        -webkit-transform: translate(-3%, -5%);
    }
}

@keyframes credit-card-clipart1-cloud-2 {
    from {
        transform: translate(0%, -3%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

@-webkit-keyframes credit-card-clipart1-cloud-2 {
    from {
        -webkit-transform: translate(0%, -3%);
    }

    to {
        -webkit-transform: translate(0%, 5%);
    }
}

@keyframes credit-card-clipart1-cloud-3 {
    from {
        transform: translate(3%, -3%);
    }

    to {
        transform: translate(-2%, 4%);
    }
}

@-webkit-keyframes credit-card-clipart1-cloud-3 {
    from {
        -webkit-transform: translate(3%, -3%);
    }

    to {
        -webkit-transform: translate(-2%, 4%);
    }
}

@keyframes credit-card-clipart1-cloud-4 {
    from {
        transform: translate(0%, -3%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

@-webkit-keyframes credit-card-clipart1-cloud-4 {
    from {
        -webkit-transform: translate(0%, -3%);
    }

    to {
        -webkit-transform: translate(-5%, 0%);
    }
}

@keyframes credit-card-clipart1-cloud-5 {
    from {
        transform: translate(0%, 2%);
    }

    to {
        transform: translate(2%, -3%);
    }
}

@-webkit-keyframes credit-card-clipart1-cloud-5 {
    from {
        -webkit-transform: translate(0%, 2%);
    }

    to {
        -webkit-transform: translate(2%, -3%);
    }
}

@keyframes credit-card-clipart1-cloud-6 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

@-webkit-keyframes credit-card-clipart1-cloud-6 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(4%, 0%);
    }
}

.payment-page .credit-card.merrjep .clipart-confirmation .clipart-cloud-1,
.payment-page .credit-card.merrjep .clipart-confirmation .clipart-cloud-2,
.payment-page .credit-card.merrjep .clipart-confirmation .clipart-cloud-3,
.payment-page .credit-card.merrjep .clipart-confirmation .clipart-cloud-4,
.payment-page .credit-card.merrjep .clipart-confirmation .clipart-cloud-5,
.payment-page .credit-card.merrjep .clipart-confirmation .clipart-cloud-6 {
    display: block;
    position: absolute;
    border-radius: 50%;
    background-color: #F6F6F6;
}

.payment-page .credit-card.merrjep .clipart-confirmation .clipart-cloud-1 {
    width: 46%;
    height: 46%;
    top: 5%;
    left: 14%;
    -webkit-animation: credit-card-clipart2-cloud-1 1.5s ease-in-out infinite alternate;
    animation: credit-card-clipart2-cloud-1 1.5s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-confirmation .clipart-cloud-2 {
    width: 31%;
    height: 31%;
    top: 3%;
    left: 49%;
    -webkit-animation: credit-card-clipart2-cloud-2 1.5s ease-in-out infinite alternate;
    animation: credit-card-clipart2-cloud-2 1.5s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-confirmation .clipart-cloud-3 {
    width: 55%;
    height: 55%;
    top: 15%;
    left: 44%;
    -webkit-animation: credit-card-clipart2-cloud-3 1.2s ease-in-out infinite alternate;
    animation: credit-card-clipart2-cloud-3 1.2s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-confirmation .clipart-cloud-4 {
    width: 45%;
    height: 45%;
    top: 49%;
    left: 48%;
    -webkit-animation: credit-card-clipart2-cloud-4 1.4s ease-in-out infinite alternate;
    animation: credit-card-clipart2-cloud-4 1.4s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-confirmation .clipart-cloud-5 {
    width: 60%;
    height: 60%;
    top: 34%;
    left: 10%;
    -webkit-animation: credit-card-clipart2-cloud-5 1.2s ease-in-out infinite alternate;
    animation: credit-card-clipart2-cloud-5 1.2s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-confirmation .clipart-cloud-6 {
    width: 26%;
    height: 26%;
    top: 35%;
    left: 0%;
    -webkit-animation: credit-card-clipart2-cloud-6 1.2s ease-in-out infinite alternate;
    animation: credit-card-clipart2-cloud-6 1.2s ease-in-out infinite alternate;
}

@keyframes credit-card-clipart2-cloud-1 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@-webkit-keyframes credit-card-clipart2-cloud-1 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(4%, 4%);
    }
}

@keyframes credit-card-clipart2-cloud-2 {
    from {
        transform: translate(2%, -4%);
    }

    to {
        transform: translate(-7%, 4%);
    }
}

@-webkit-keyframes credit-card-clipart2-cloud-2 {
    from {
        -webkit-transform: translate(2%, -4%);
    }

    to {
        -webkit-transform: translate(-7%, 4%);
    }
}

@keyframes credit-card-clipart2-cloud-3 {
    from {
        transform: translate(-5%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

@-webkit-keyframes credit-card-clipart2-cloud-3 {
    from {
        -webkit-transform: translate(-5%, 0%);
    }

    to {
        -webkit-transform: translate(4%, 0%);
    }
}

@keyframes credit-card-clipart2-cloud-4 {
    from {
        transform: translate(4%, 3%);
    }

    to {
        transform: translate(-5%, -3%);
    }
}

@-webkit-keyframes credit-card-clipart2-cloud-4 {
    from {
        -webkit-transform: translate(4%, 3%);
    }

    to {
        -webkit-transform: translate(-5%, -3%);
    }
}

@keyframes credit-card-clipart2-cloud-5 {
    from {
        transform: translate(4%, -3%);
    }

    to {
        transform: translate(-5%, 3%);
    }
}

@-webkit-keyframes credit-card-clipart2-cloud-5 {
    from {
        -webkit-transform: translate(4%, -3%);
    }

    to {
        -webkit-transform: translate(-5%, 3%);
    }
}

@keyframes credit-card-clipart2-cloud-6 {
    from {
        transform: translate(-4%, 0%);
    }

    to {
        transform: translate(5%, -1%);
    }
}

.payment-page .credit-card.merrjep .clipart-confirmation .clipart-window {
    display: block;
    position: absolute;
    z-index: 1;
    width: 50%;
    height: 50%;
    background-image: url('../../Content/Images/PaymentMethods/clipart-paypal-confirmation.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: calc(50% - 67px);
    left: calc(50% - 56px);
    -webkit-animation: credit-card-confirmation 2s ease-in-out infinite alternate;
    animation: credit-card-confirmation 2s ease-in-out infinite alternate;
}

.payment-page .credit-card.merrjep .clipart-confirmation .clipart-shadow {
    display: block;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    width: 51%;
    height: 5%;
    top: 72%;
    left: 27%;
    background-color: rgba(0,0,0,0.1);
    animation: credit-card-confirmation-shadow 2s ease-in-out infinite alternate;
    -webkit-animation: credit-card-confirmation-shadow 2s ease-in-out infinite alternate;
}

@keyframes credit-card-confirmation {
    from {
        transform: translateY(4%);
    }

    to {
        transform: translateY(-4%);
    }
}

@-webkit-keyframes credit-card-confirmation {
    from {
        -webkit-transform: translateY(4%);
    }

    to {
        -webkit-transform: translateY(-4%);
    }
}

@keyframes credit-card-confirmation-shadow {
    from {
        transform: scaleX(1);
        opacity: 1;
    }

    to {
        transform: scaleX(0.8);
        opacity: 0.6;
    }
}

@-webkit-keyframes credit-card-confirmation-shadow {
    from {
        -webkit-transform: scaleX(1);
        opacity: 1;
    }

    to {
        -webkit-transform: scaleX(0.8);
        opacity: 0.6;
    }
}



@media (max-width: 1199px) {
    .payment-page .credit-card.merrjep .instructions-block .instructions-item .clipart-block {
        width: 200px;
        height: 200px;
    }

    .payment-page .credit-card.merrjep .clipart-confirmation .clipart-window {
        top: calc(50% - 60px);
        left: 27%;
    }

    .payment-page .credit-card.merrjep .instructions-block .ci-pazar-small,
    *[dir='rtl'] .payment-page .credit-card.merrjep .instructions-block .ci-pazar-small {
        top: 88px;
    }
}

@media (max-width: 991px) {

    .payment-page .credit-card.merrjep .instructions-block .ci-pazar-small,
    *[dir='rtl'] .payment-page .credit-card.merrjep .instructions-block .ci-pazar-small {
        top: 88px;
    }
}

@media (max-width: 767px) {

    .payment-page .credit-card.merrjep .instructions-block .ci-pazar-small,
    *[dir='rtl'] .payment-page .credit-card.merrjep .instructions-block .ci-pazar-small {
        top: 88px;
    }
}

@media (max-width: 575px) {
    .payment-page .credit-card.merrjep .instructions-block .instructions-item {
        width: 100%;
        float: none;
        margin-bottom: 60px;
    }

    .payment-page .credit-card.merrjep .instructions-block {
        text-align: center;
    }

        .payment-page .credit-card.merrjep .instructions-block .ci-pazar-small,
        *[dir='rtl'] .payment-page .credit-card.merrjep .instructions-block .ci-pazar-small {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            position: static;
            top: auto;
            left: auto;
            margin-top: -30px;
            margin-bottom: 30px;
            display: inline-block;
        }
}

@media (max-width: 321px) {
    .payment-page .credit-card.merrjep .instructions-block .instructions-item .clipart-block {
        width: 180px;
        height: 180px;
    }

    .payment-page .credit-card.merrjep .clipart-confirmation .clipart-window {
        top: calc(50% - 50px);
        left: 27%;
    }
}

/* #endregion MerrJep */

@media (max-width: 575px) {
    .payment-page .credit-card .content-area .card-item .panel,
    *[dir='rtl'] .payment-page .credit-card .content-area .card-item .panel,
    .payment-methods-page .credit-card .card-item .panel,
    *[dir='rtl'] .payment-methods-page .card-item .panel {
        padding: 10px 10px 10px 10px !important;
    }

    .payment-page .credit-card .content-area .card-item .panel,
    .payment-methods-page .card-item .panel {
        padding: 10px 10px 10px 10px !important;
    }

    .payment-page .credit-card .content-area .card-item .checker,
    .payment-methods-page .card-item .checker {
        inset-inline-start: auto;
        inset-inline-end: var(--gap-16) !important;
        inset-block-start: var(--gap-16);
    }


    .payment-page .credit-card .content-area .card-item .title .ci-text-muted,
    .payment-methods-page .card-item .title .ci-text-muted {
        position: absolute;
        top: 70px;
        left: 0px;
        z-index: 1;
        width: 100%;
        text-align: center;
        font-size: 22px;
    }

    .payment-page .credit-card .content-area .card-item .card-title,
    .payment-methods-page .card-item .card-title {
        font-size: 18px;
        inset-block-start: var(--gap-24);
        inset-inline-start: var(--gap-64);
        position: absolute;
        width: auto;
    }

    .payment-page .credit-card .content-area .card-item .row,
    .payment-methods-page .card-item .row {
        min-height: 140px;
    }

    .payment-page .credit-card .content-area .card-item .card-controls,
    .payment-methods-page .card-item .bootstrap4 .card-controls {
        position: absolute !important;
        display: flex;
        z-index: 1;
        inset-inline-end: var(--gap-8);
        inset-block-start: 110px;
        width: auto;
    }

    .payment-page .credit-card .bootstrap4,
    .payment-methods-page .card-item .bootstrap4 {
        position: static !important;
    }

    .payment-page .credit-card,
    .payment-methods-page .card-item {
        position: relative;
    }

        .payment-page .credit-card .content-area .card-item .title .logo,
        .payment-methods-page .card-item .title .logo {
            inset-inline-start: var(--gap-16);
            inset-block-start: var(--gap-16);
            position: absolute;
        }


        .payment-page .credit-card .content-area .card-item .date,
        .payment-methods-page .card-item .date {
            position: absolute !important;
            inset-block-start: 110px;
            inset-inline-start: var(--gap-16);
            z-index: 1;
            display: inline-block;
            width: auto;
            text-align: start;
        }

        .payment-page .credit-card .content-area .card-item .title .ci-text-ghost,
        .payment-methods-page .card-item .title .ci-text-ghost {
            display: block;
            width: 100%;
            text-align: center;
            inset-inline-start: 0px;
            position: absolute;
            z-index: 1;
        }

        .payment-page .credit-card .content-area .card-item .panel,
        .payment-methods-page .card-item .panel {
            background-color: var(--color-bg-panel);
        }

        .payment-page .credit-card .content-area .card-item input[type='radio']:checked + .panel,
        .payment-methods-page .card-item input[type='radio']:checked + .panel {
            background-color: var(--color-bg-primary-light);
        }

        .payment-page .credit-card .content-area .card-item .title .logo, .payment-methods-page .card-item .title .logo {
            background-color: var(--color-bg-alt);
        }

    .payment-methods-page .cardlist .controls {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: var(--gap-8);
    }
}

@media (max-width: 419px) {
    .payment-page .credit-card .content-area .card-item .title .ci-text-muted,
    .payment-methods-page .card-item .title .ci-text-muted {
        font-size: 18px;
    }
}

@media (max-width: 300px) {
    .payment-page .credit-card .content-area .card-item .title .ci-text-muted,
    .payment-methods-page .card-item .title .ci-text-muted {
        font-size: 16px;
    }
}

/* #region Card Panel */
.payment-page .credit-card .content-area p.description {
    font-size: 18px;
}

.payment-page .credit-card .content-area .card-panel {
    display: block;
    position: relative;
    width: 600px;
    border-radius: var(--radius-12);
    background-color: #F2F2F2;
    padding: 20px 50px 40px 50px;
    margin-top: 30px;
    margin-bottom: 30px;
}

    .payment-page .credit-card .content-area .card-panel .card-number {
        direction: ltr;
    }

*[dir='rtl'] .payment-page .credit-card .content-area .card-panel .card-number {
    direction: ltr;
    text-align: right;
}

.payment-page .credit-card .content-area .card-panel .card-date-cvc-block {
    display: block;
    width: 100%;
    position: relative;
    margin-top: 40px;
}

    .payment-page .credit-card .content-area .card-panel .card-date-cvc-block input[type='text'],
    .payment-page .credit-card .content-area .card-panel .card-date-cvc-block input[type='password'] {
        max-width: 100px;
    }

    .payment-page .credit-card .content-area .card-panel .card-date-cvc-block input[type='text'] {
        margin-right: 40px;
    }

*[dir='rtl'] .payment-page .credit-card .content-area .card-panel .card-date-cvc-block input[type='text'] {
    margin-right: 0px;
    margin-left: 40px;
}


.payment-page .credit-card .content-area .card-panel .card-logo-block {
    margin-bottom: 10px;
    font-size: 0px;
}

    .payment-page .credit-card .content-area .card-panel .card-logo-block .logo-item {
        display: inline-block;
        width: 64px;
        height: 64px;
        position: relative;
        font-size: 60px;
        filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
        filter: gray;
        -webkit-filter: grayscale(100%);
        opacity: 0.4;
    }

        .payment-page .credit-card .content-area .card-panel .card-logo-block .logo-item.active {
            filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
            -webkit-filter: grayscale(0%);
            opacity: 1;
        }

@media (max-width: 1199px) {
    .payment-page .credit-card .content-area .card-panel {
        width: 560px;
    }
}

@media (max-width: 991px) {
    .payment-page .credit-card .content-area .card-panel {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .payment-page .credit-card .content-area .card-panel {
        padding: 20px 30px 30px 30px;
    }

        .payment-page .credit-card .content-area .card-panel .card-date-cvc-block {
            margin-top: 20px;
        }
}

@media (max-width: 450px) {
    .payment-page .credit-card .content-area .card-panel {
        padding: 10px 10px 10px 10px;
    }

        .payment-page .credit-card .content-area .card-panel .card-date-cvc-block {
            margin-top: 10px;
        }

            .payment-page .credit-card .content-area .card-panel .card-date-cvc-block input[type='text'] {
                margin-right: 10px;
            }

    *[dir='rtl'] .payment-page .credit-card .content-area .card-panel .card-date-cvc-block input[type='text'] {
        margin-right: 0px;
        margin-left: 10px;
    }

    .payment-page .credit-card .content-area .card-panel .card-logo-block {
        margin-bottom: 10px;
    }

        .payment-page .credit-card .content-area .card-panel .card-logo-block .logo-item {
            width: 48px;
            height: 48px;
        }

            .payment-page .credit-card .content-area .card-panel .card-logo-block .logo-item .ci-pazar-social {
                font-size: 48px;
            }
}

/* #endregion Card Panel */
/* #endregion ---------------- Credit Card -------------------------- */
/* #region ---------------------- PayPal ---------------------------- */
.payment-page .paypal .content-area .panel {
    padding: 20px;
    margin-top: 40px;
}

    .payment-page .paypal .content-area .panel p {
        margin: 0px;
        padding: 0px;
    }

.payment-page .paypal .instructions-block {
    display: block;
    position: relative;
}

    .payment-page .paypal .instructions-block .ci-pazar-small {
        position: absolute;
        font-size: 32px !important;
        top: 110px;
        left: calc(50% - 18px);
    }

*[dir='rtl'] .payment-page .paypal .instructions-block .ci-pazar-small {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.payment-page .paypal .instructions-block .instructions-item {
    width: 50%;
    text-align: center;
    float: left;
}

*[dir='rtl'] .payment-page .paypal .instructions-block .instructions-item {
    float: right;
}

.payment-page .paypal .instructions-block .instructions-item p {
    font-size: 18px;
    padding-left: 20px;
    padding-right: 20px;
}

.payment-page .paypal .instructions-block .instructions-item .clipart-block {
    display: block;
    width: 250px;
    height: 250px;
    margin: 0px auto;
    position: relative;
}

.payment-page .paypal .clipart-paypal .clipart-cloud-1,
.payment-page .paypal .clipart-paypal .clipart-cloud-2,
.payment-page .paypal .clipart-paypal .clipart-cloud-3,
.payment-page .paypal .clipart-paypal .clipart-cloud-4,
.payment-page .paypal .clipart-paypal .clipart-cloud-5,
.payment-page .paypal .clipart-paypal .clipart-cloud-6 {
    display: block;
    position: absolute;
    border-radius: 50%;
    background-color: #F6F6F6;
}

.payment-page .paypal .clipart-paypal .clipart-cloud-1 {
    top: 9%;
    left: 24%;
    width: 32%;
    height: 32%;
    -webkit-animation: paypal-clipart1-cloud-1 1.5s ease-in-out infinite alternate;
    animation: paypal-clipart1-cloud-1 1.5s ease-in-out infinite alternate;
}

.payment-page .paypal .clipart-paypal .clipart-cloud-2 {
    top: 12%;
    left: 45%;
    width: 35%;
    height: 35%;
    -webkit-animation: paypal-clipart1-cloud-2 1.2s ease-in-out infinite alternate;
    animation: paypal-clipart1-cloud-2 1.2s ease-in-out infinite alternate;
}

.payment-page .paypal .clipart-paypal .clipart-cloud-3 {
    top: 20%;
    left: 68%;
    width: 32%;
    height: 32%;
    -webkit-animation: paypal-clipart1-cloud-3 1.5s ease-in-out infinite alternate;
    animation: paypal-clipart1-cloud-3 1.5s ease-in-out infinite alternate;
}

.payment-page .paypal .clipart-paypal .clipart-cloud-4 {
    top: 31%;
    left: 37%;
    width: 60%;
    height: 60%;
    -webkit-animation: paypal-clipart1-cloud-4 1.5s ease-in-out infinite alternate;
    animation: paypal-clipart1-cloud-4 1.5s ease-in-out infinite alternate;
}

.payment-page .paypal .clipart-paypal .clipart-cloud-5 {
    top: 66%;
    left: 24%;
    width: 26%;
    height: 26%;
    -webkit-animation: paypal-clipart1-cloud-5 1.2s ease-in-out infinite alternate;
    animation: paypal-clipart1-cloud-5 1.2s ease-in-out infinite alternate;
}

.payment-page .paypal .clipart-paypal .clipart-cloud-6 {
    top: 29%;
    left: 0%;
    width: 50%;
    height: 50%;
    -webkit-animation: paypal-clipart1-cloud-6 1.3s ease-in-out infinite alternate;
    animation: paypal-clipart1-cloud-6 1.3s ease-in-out infinite alternate;
}

.payment-page .paypal .clipart-paypal .ci-pazar-social {
    position: absolute;
    font-size: 170px;
    top: calc(50% - 85px);
    left: calc(50% - 85px);
    z-index: 1;
}

@keyframes paypal-clipart1-cloud-1 {
    from {
        transform: translate(3%, 3%);
    }

    to {
        transform: translate(-3%, -5%);
    }
}

@-webkit-keyframes paypal-clipart1-cloud-1 {
    from {
        -webkit-transform: translate(3%, 3%);
    }

    to {
        -webkit-transform: translate(-3%, -5%);
    }
}

@keyframes paypal-clipart1-cloud-2 {
    from {
        transform: translate(0%, -3%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

@-webkit-keyframes paypal-clipart1-cloud-2 {
    from {
        -webkit-transform: translate(0%, -3%);
    }

    to {
        -webkit-transform: translate(0%, 5%);
    }
}

@keyframes paypal-clipart1-cloud-3 {
    from {
        transform: translate(3%, -3%);
    }

    to {
        transform: translate(-2%, 4%);
    }
}

@-webkit-keyframes paypal-clipart1-cloud-3 {
    from {
        -webkit-transform: translate(3%, -3%);
    }

    to {
        -webkit-transform: translate(-2%, 4%);
    }
}

@keyframes paypal-clipart1-cloud-4 {
    from {
        transform: translate(0%, -3%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

@-webkit-keyframes paypal-clipart1-cloud-4 {
    from {
        -webkit-transform: translate(0%, -3%);
    }

    to {
        -webkit-transform: translate(-5%, 0%);
    }
}

@keyframes paypal-clipart1-cloud-5 {
    from {
        transform: translate(0%, 2%);
    }

    to {
        transform: translate(2%, -3%);
    }
}

@-webkit-keyframes paypal-clipart1-cloud-5 {
    from {
        -webkit-transform: translate(0%, 2%);
    }

    to {
        -webkit-transform: translate(2%, -3%);
    }
}

@keyframes paypal-clipart1-cloud-6 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

@-webkit-keyframes paypal-clipart1-cloud-6 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(4%, 0%);
    }
}

.payment-page .paypal .clipart-confirmation .clipart-cloud-1,
.payment-page .paypal .clipart-confirmation .clipart-cloud-2,
.payment-page .paypal .clipart-confirmation .clipart-cloud-3,
.payment-page .paypal .clipart-confirmation .clipart-cloud-4,
.payment-page .paypal .clipart-confirmation .clipart-cloud-5,
.payment-page .paypal .clipart-confirmation .clipart-cloud-6 {
    display: block;
    position: absolute;
    border-radius: 50%;
    background-color: #F6F6F6;
}

.payment-page .paypal .clipart-confirmation .clipart-cloud-1 {
    width: 46%;
    height: 46%;
    top: 5%;
    left: 14%;
    -webkit-animation: paypal-clipart2-cloud-1 1.5s ease-in-out infinite alternate;
    animation: paypal-clipart2-cloud-1 1.5s ease-in-out infinite alternate;
}

.payment-page .paypal .clipart-confirmation .clipart-cloud-2 {
    width: 31%;
    height: 31%;
    top: 3%;
    left: 49%;
    -webkit-animation: paypal-clipart2-cloud-2 1.5s ease-in-out infinite alternate;
    animation: paypal-clipart2-cloud-2 1.5s ease-in-out infinite alternate;
}

.payment-page .paypal .clipart-confirmation .clipart-cloud-3 {
    width: 55%;
    height: 55%;
    top: 15%;
    left: 44%;
    -webkit-animation: paypal-clipart2-cloud-3 1.2s ease-in-out infinite alternate;
    animation: paypal-clipart2-cloud-3 1.2s ease-in-out infinite alternate;
}

.payment-page .paypal .clipart-confirmation .clipart-cloud-4 {
    width: 45%;
    height: 45%;
    top: 49%;
    left: 48%;
    -webkit-animation: paypal-clipart2-cloud-4 1.4s ease-in-out infinite alternate;
    animation: paypal-clipart2-cloud-4 1.4s ease-in-out infinite alternate;
}

.payment-page .paypal .clipart-confirmation .clipart-cloud-5 {
    width: 60%;
    height: 60%;
    top: 34%;
    left: 10%;
    -webkit-animation: paypal-clipart2-cloud-5 1.2s ease-in-out infinite alternate;
    animation: paypal-clipart2-cloud-5 1.2s ease-in-out infinite alternate;
}

.payment-page .paypal .clipart-confirmation .clipart-cloud-6 {
    width: 26%;
    height: 26%;
    top: 35%;
    left: 0%;
    -webkit-animation: paypal-clipart2-cloud-6 1.2s ease-in-out infinite alternate;
    animation: paypal-clipart2-cloud-6 1.2s ease-in-out infinite alternate;
}

@keyframes paypal-clipart2-cloud-1 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@-webkit-keyframes paypal-clipart2-cloud-1 {
    from {
        -webkit-transform: translate(0%, 0%);
    }

    to {
        -webkit-transform: translate(4%, 4%);
    }
}

@keyframes paypal-clipart2-cloud-2 {
    from {
        transform: translate(2%, -4%);
    }

    to {
        transform: translate(-7%, 4%);
    }
}

@-webkit-keyframes paypal-clipart2-cloud-2 {
    from {
        -webkit-transform: translate(2%, -4%);
    }

    to {
        -webkit-transform: translate(-7%, 4%);
    }
}

@keyframes paypal-clipart2-cloud-3 {
    from {
        transform: translate(-5%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

@-webkit-keyframes paypal-clipart2-cloud-3 {
    from {
        -webkit-transform: translate(-5%, 0%);
    }

    to {
        -webkit-transform: translate(4%, 0%);
    }
}

@keyframes paypal-clipart2-cloud-4 {
    from {
        transform: translate(4%, 3%);
    }

    to {
        transform: translate(-5%, -3%);
    }
}

@-webkit-keyframes paypal-clipart2-cloud-4 {
    from {
        -webkit-transform: translate(4%, 3%);
    }

    to {
        -webkit-transform: translate(-5%, -3%);
    }
}

@keyframes paypal-clipart2-cloud-5 {
    from {
        transform: translate(4%, -3%);
    }

    to {
        transform: translate(-5%, 3%);
    }
}

@-webkit-keyframes paypal-clipart2-cloud-5 {
    from {
        -webkit-transform: translate(4%, -3%);
    }

    to {
        -webkit-transform: translate(-5%, 3%);
    }
}

@keyframes paypal-clipart2-cloud-6 {
    from {
        transform: translate(-4%, 0%);
    }

    to {
        transform: translate(5%, -1%);
    }
}

.payment-page .paypal .clipart-confirmation .clipart-window {
    display: block;
    position: absolute;
    z-index: 1;
    width: 50%;
    height: 50%;
    background-image: url('../../Content/Images/PaymentMethods/clipart-paypal-confirmation.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: calc(50% - 67px);
    left: calc(50% - 56px);
    -webkit-animation: paypal-confirmation 2s ease-in-out infinite alternate;
    animation: paypal-confirmation 2s ease-in-out infinite alternate;
}

.payment-page .paypal .clipart-confirmation .clipart-shadow {
    display: block;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    width: 51%;
    height: 5%;
    top: 72%;
    left: 27%;
    background-color: rgba(0,0,0,0.1);
    animation: paypal-confirmation-shadow 2s ease-in-out infinite alternate;
    -webkit-animation: paypal-confirmation-shadow 2s ease-in-out infinite alternate;
}

@keyframes paypal-confirmation {
    from {
        transform: translateY(4%);
    }

    to {
        transform: translateY(-4%);
    }
}

@-webkit-keyframes paypal-confirmation {
    from {
        -webkit-transform: translateY(4%);
    }

    to {
        -webkit-transform: translateY(-4%);
    }
}

@keyframes paypal-confirmation-shadow {
    from {
        transform: scaleX(1);
        opacity: 1;
    }

    to {
        transform: scaleX(0.8);
        opacity: 0.6;
    }
}

@-webkit-keyframes paypal-confirmation-shadow {
    from {
        -webkit-transform: scaleX(1);
        opacity: 1;
    }

    to {
        -webkit-transform: scaleX(0.8);
        opacity: 0.6;
    }
}


.payment-page .saved-paypal-accounts {
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
    margin-block-end: var(--gap-32);
}



    .payment-page .saved-paypal-accounts input {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        border: 0px;
        padding: 0px;
        clip: rect(0 0 0 0);
        overflow: hidden;
    }

    .payment-page .saved-paypal-accounts .panel {
        background-color: transparent;
        position: relative;
        display: flex;
        align-items: center;
        border-radius: var(--radius-12);
        width: 100%;
        margin-top: 0px !important;
        margin-block-start: 0px;
        padding-block: 0px !important;
        gap: var(--gap-24);
        padding-inline-start: var(--gap-16);
        padding-inline-end: var(--gap-8);
    }

    .payment-page .saved-paypal-accounts .checker {
        display: flex;
        width: var(--gap-24);
        height: var(--gap-24);
        border: 2px solid var(--color-border-basic);
        border-radius: var(--radius-circle);
        background: var(--color-bg-panel);
    }

        .payment-page .saved-paypal-accounts .checker .ci-check {
            display: none;
        }

    .payment-page .saved-paypal-accounts input[type='radio']:checked + .panel {
        background: var(--color-bg-panel);
    }

        .payment-page .saved-paypal-accounts input[type='radio']:checked + .panel .checker {
            border: 2px solid var(--color-bg-primary);
            background-color: var(--color-bg-primary);
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .payment-page .saved-paypal-accounts input[type='radio']:checked + .panel .ci-check {
            display: inline-block;
        }

    .payment-page .saved-paypal-accounts .right-side {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-block: var(--gap-8);
        gap: var(--gap-8);
    }

        .payment-page .saved-paypal-accounts .right-side .error {
            color: var(--color-text-danger);
            font-size: 14px;
            padding-block-start: var(--gap-8);
            border-top: 1px solid var(--color-border-muted);
        }

    .payment-page .saved-paypal-accounts .main-info {
        display: flex;
        gap: var(--gap-24);
        width: 100%;
        align-items: center;
    }

    .payment-page .saved-paypal-accounts .i-container {
        display: flex;
        width: 40px;
        height: 40px;
        background: var(--color-bg-panel);
        border-radius: var(--radius-4);
        font-size: 32px;
        align-items: center;
        justify-content: center;
    }

    .payment-page .saved-paypal-accounts input[type='radio']:checked + .panel .i-container {
        background-color: var(--color-bg-alt);
    }

    .payment-page .saved-paypal-accounts .i-container .ci-paypal-outline {
        opacity: 0.6;
    }

    .payment-page .saved-paypal-accounts .column-info {
        display: flex;
        flex-direction: column;
        gap: var(--gap-2);
    }

        .payment-page .saved-paypal-accounts .column-info b {
            display: block;
            width: 100%;
            font-size: 12px;
            font-weight: bold;
            line-height: 100%;
            color: var(--color-text-basic);
        }

        .payment-page .saved-paypal-accounts .column-info span {
            display: block;
            width: 100%;
            font-size: 14px;
            color: var(--color-text-muted);
            line-height: 100%;
            word-break: break-all;
            white-space: normal;
        }

        .payment-page .saved-paypal-accounts .column-info .title {
            display: block;
            width: 100%;
            font-size: 14px;
            color: var(--color-text-basic);
            line-height: 100%;
            font-weight: bold;
            word-break: normal;
        }


@media (max-width: 1199px) {
    .payment-page .paypal .instructions-block .instructions-item .clipart-block {
        width: 200px;
        height: 200px;
    }

    .payment-page .paypal .clipart-confirmation .clipart-window {
        top: calc(50% - 60px);
        left: 27%;
    }

    .payment-page .paypal .instructions-block .ci-pazar-small,
    *[dir='rtl'] .payment-page .paypal .instructions-block .ci-pazar-small {
        top: 88px;
    }
}

@media (max-width: 991px) {

    .payment-page .paypal .instructions-block .ci-pazar-small,
    *[dir='rtl'] .payment-page .paypal .instructions-block .ci-pazar-small {
        top: 88px;
    }
}

@media (max-width: 767px) {

    .payment-page .paypal .instructions-block .ci-pazar-small,
    *[dir='rtl'] .payment-page .paypal .instructions-block .ci-pazar-small {
        top: 88px;
    }
}

@media (max-width: 575px) {
    .payment-page .paypal .instructions-block .instructions-item {
        width: 100%;
        float: none;
        margin-bottom: 60px;
    }

    .payment-page .paypal .instructions-block {
        text-align: center;
    }

        .payment-page .paypal .instructions-block .ci-pazar-small,
        *[dir='rtl'] .payment-page .paypal .instructions-block .ci-pazar-small {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            position: static;
            top: auto;
            left: auto;
            margin-top: -30px;
            margin-bottom: 30px;
            display: inline-block;
        }


    .payment-page .saved-paypal-accounts .main-info {
        gap: var(--gap-8);
    }

    .payment-page .saved-paypal-accounts .panel {
        gap: var(--gap-16);
        padding-left: 0px;
        padding-right: 0px;
        padding-inline-start: var(--gap-8) !important;
        padding-inline-end: var(--gap-8);
    }
}

@media (max-width: 321px) {
    .payment-page .paypal .instructions-block .instructions-item .clipart-block {
        width: 180px;
        height: 180px;
    }

    .payment-page .paypal .clipart-confirmation .clipart-window {
        top: calc(50% - 50px);
        left: 27%;
    }
}
/* #endregion ------------------- PayPal ---------------------------- */
/* #region ------------------- Call & Pay --------------------------- */
.payment-page .call-pay .summary-area .btn-primary .ci-phone,
.payment-page .call-pay .mobile-action-panel .btn-primary .ci-phone {
    font-size: 36px;
    top: calc(50% - 18px);
}

.payment-page .call-pay .panel {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #E6F4ED;
}

    .payment-page .call-pay .panel h4 {
        font-size: 36px;
        margin: 0px;
        padding: 0px;
        margin-bottom: 4px;
    }

    .payment-page .call-pay .panel .col-sm-6 {
        padding-top: 10px;
        padding-bottom: 10px;
    }

        .payment-page .call-pay .panel .col-sm-6 + .col-sm-6 {
            border-left: 1px solid rgba(93, 170, 128, 0.5);
        }

*[dir='rtl'] .payment-page .call-pay .panel .col-sm-6 + .col-sm-6 {
    border-right: 1px solid rgba(93, 170, 128, 0.5);
    border-left: 0px none transparent;
}


.payment-page .call-pay .instructions-item {
    display: block;
    position: relative;
    margin-top: 0px;
    margin-bottom: 30px;
    padding-left: 70px;
}

*[dir='rtl'] .payment-page .call-pay .instructions-item {
    padding-left: 0px;
    padding-right: 70px;
}

.payment-page .call-pay .instructions-item h6 {
    display: block;
    font-size: 18px;
    margin-bottom: 5px;
    padding: 0px;
}

.payment-page .call-pay .instructions-item p {
    font-size: 18px;
}

.payment-page .call-pay .instructions-item .marker {
    display: block;
    position: absolute;
    border-radius: 50%;
    top: calc(50% - 25px);
    left: 0px;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text-muted);
    background-color: #F2F2F2;
    text-align: center;
    width: 50px;
    height: 50px;
    padding: 7px;
}

*[dir='rtl'] .payment-page .call-pay .instructions-item .marker {
    left: auto;
    right: 0px;
}

@media (max-width: 575px) {
    .payment-page .call-pay .mobile-action-panel .btn-primary {
        padding-left: 10px;
        padding-right: 10px;
    }

    .payment-page .call-pay .panel .col-sm-6 + .col-sm-6,
    *[dir='rtl'] .payment-page .call-pay .panel .col-sm-6 + .col-sm-6 {
        border-left: 0px none transparent;
        border-right: 0px none transparent;
        border-top: 1px solid rgba(93, 170, 128, 0.5);
    }

    .payment-page .call-pay .panel .col-sm-6:first-child {
        padding-bottom: 20px;
    }

    .payment-page .call-pay .panel .col-sm-6:last-child {
        padding-top: 20px;
    }

    .payment-page .call-pay .panel h4 {
        margin-bottom: 0px;
    }
}

@media (max-width: 420px) {
    .payment-page .call-pay .instructions-item {
        margin-bottom: 30px;
        padding-left: 40px;
    }

    *[dir='rtl'] .payment-page .call-pay .instructions-item {
        padding-left: 0px;
        padding-right: 40px;
    }

    .payment-page .call-pay .instructions-item .marker {
        top: -4px;
        left: 0px;
        font-size: 14px;
        width: 30px;
        height: 30px;
        padding: 7px;
    }

    *[dir='rtl'] .payment-page .call-pay .instructions-item .marker {
        left: auto;
        right: 0px;
    }
}
/* #endregion ---------------- Call & Pay --------------------------- */
/* #region ------------------ Bank Transfer ------------------------- */
.payment-page .bank-transfer .content-area .description {
    font-size: 18px;
    margin-bottom: 30px;
}

.payment-page .bank-transfer .content-area .warning {
    position: relative;
    padding: 4px 0px 4px 36px;
    margin-top: 16px;
    margin-bottom: 30px;
}

    .payment-page .bank-transfer .content-area .warning b {
        font-weight: 700;
        border-radius: 50%;
        padding: 5px;
        width: 24px;
        height: 24px;
        background-color: var(--color-bg-warning);
        display: block;
        position: absolute;
        top: calc(50% - 13px);
        left: 0px;
        text-align: center;
        font-size: 16px;
        line-height: 16px;
    }

*[dir='rtl'] .payment-page .bank-transfer .content-area .warning {
    padding: 4px 36px 4px 0px;
}

    *[dir='rtl'] .payment-page .bank-transfer .content-area .warning b {
        left: auto;
        right: 0px;
    }

.payment-page .bank-transfer .content-area .panel {
    display: block;
    background-color: #F9F9F9;
    border-radius: var(--radius-4);
    position: relative;
}

    .payment-page .bank-transfer .content-area .panel .divider {
        display: block;
        width: 100%;
        height: 1px;
        background-color: #DDDDDD;
        position: static;
    }

    .payment-page .bank-transfer .content-area .panel.invoice-details .title {
        text-align: right;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 30px;
    }

*[dir='rtl'] .payment-page .bank-transfer .content-area .panel.invoice-details .title {
    text-align: left;
    padding-left: 15px;
    padding-right: 30px;
}

.payment-page .bank-transfer .content-area .panel.invoice-details .description {
    text-align: left;
    margin-bottom: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 700;
    font-size: 14px;
    padding-right: 30px;
}

*[dir='rtl'] .payment-page .bank-transfer .content-area .panel.invoice-details .description {
    text-align: right;
    padding-left: 30px;
    padding-right: 15px;
}

.payment-page .bank-transfer .content-area .panel.invoice-details .invoice-number .description,
.payment-page .bank-transfer .content-area .panel.invoice-details .invoice-number .title {
    font-size: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}


.payment-page .bank-transfer .content-area .panel.invoice-details .invoice-description li,
.payment-page .bank-transfer .content-area .panel.invoice-details .invoice-description li:first-child {
    margin-top: 1px;
    margin-bottom: 0px;
    line-height: 1.2em;
}

    .payment-page .bank-transfer .content-area .panel.invoice-details .invoice-description li:last-child {
        margin-bottom: 2px;
    }

    .payment-page .bank-transfer .content-area .panel.invoice-details .invoice-description li:before {
        top: 0.3em;
    }

    .payment-page .bank-transfer .content-area .panel.invoice-details .invoice-description li + li {
        margin-top: 5px;
    }

.payment-page .bank-transfer .content-area .panel.invoice-details .invoice-description .description {
    padding-top: 20px;
    padding-bottom: 20px;
}

.payment-page .bank-transfer .panel.invoice-details .other-details {
    padding-top: 20px;
    padding-bottom: 20px;
}

    .payment-page .bank-transfer .panel.invoice-details .other-details .title,
    .payment-page .bank-transfer .panel.invoice-details .other-details .description {
        padding-top: 5px;
        padding-bottom: 5px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

.qr-code-pay-area {
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #F9F9F9;
    padding: 20px 5px 20px 5px;
    text-align: center;
    margin-top: 20px;
}

    .qr-code-pay-area img {
        display: inline-block;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .qr-code-pay-area h6 {
        font-size: 24px;
        margin-top: 10px;
    }

.payment-page .bank-transfer .summary-area .additional-info {
    display: block;
}

@media (max-width: 991px) {
    .payment-page .bank-transfer .summary-area .additional-info {
        display: none;
    }
}

@media (max-width: 575px) {
    .payment-page .bank-transfer .content-area .panel.invoice-details .invoice-number {
        display: block;
        margin: 0px;
        padding: 15px;
        text-align: center;
    }

        .payment-page .bank-transfer .content-area .panel.invoice-details .invoice-number .description,
        .payment-page .bank-transfer .content-area .panel.invoice-details .invoice-number .title {
            display: inline;
            width: auto;
            padding: 0px;
            font-size: 16px;
        }



    .payment-page .bank-transfer .content-area .panel.invoice-details .invoice-description {
        margin: 0px;
        padding: 15px;
    }

        .payment-page .bank-transfer .content-area .panel.invoice-details .invoice-description .description,
        .payment-page .bank-transfer .content-area .panel.invoice-details .invoice-description .title {
            padding: 0px;
            text-align: left;
        }

    *[dir='rtl'] .payment-page .bank-transfer .content-area .panel.invoice-details .invoice-description .description,
    *[dir='rtl'] .payment-page .bank-transfer .content-area .panel.invoice-details .invoice-description .title {
        text-align: right;
    }

    .payment-page .bank-transfer .content-area .panel.invoice-details .invoice-description .description {
        margin-top: 5px;
    }

    .payment-page .bank-transfer .content-area .panel.invoice-details .other-details .row {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        margin: 0px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 10px;
    }

    .payment-page .bank-transfer .content-area .panel.invoice-details .other-details .title,
    .payment-page .bank-transfer .content-area .panel.invoice-details .other-details .description {
        width: 100%;
        display: block !important;
        text-align: left;
        min-width: 100%;
        max-width: 100%;
        padding: 0px;
    }

    .payment-page .bank-transfer .content-area .panel.invoice-details .other-details .title {
        margin-bottom: 5px;
    }

    *[dir='rtl'] .payment-page .bank-transfer .content-area .panel.invoice-details .other-details .title,
    *[dir='rtl'] .payment-page .bank-transfer .content-area .panel.invoice-details .other-details .description {
        text-align: right;
    }
}

/* #endregion -------------- /Bank Transfer ------------------------- */
/* #endregion ==================================== /Payment =========================================== */
/* #region ==================================== Payment Success ======================================== */
.payment-success-page .panel {
    display: block;
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #F9F9F9;
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 40px;
}

    .payment-success-page .panel h2 {
        font-size: 36px;
    }

.success-nopay-page.free-ad h2 {
    width: 60%;
    margin: 20px auto;
}

.success-nopay-page.free-ad .divider-horizontal {
    width: 60%;
    margin: 20px auto;
}

.success-nopay-page.free-ad .free-ad-ul {
    width: 60%;
    margin: 0px auto;
    color: var(--color-text-muted);
}



.payment-success-page .panel .container {
    display: block;
    margin: 0px auto 0px auto;
    width: 640px;
}


    .payment-success-page .panel .container .details-block {
        display: block;
        width: 100%;
        border-top: 1px solid #DDDDDD;
        border-bottom: 1px solid #DDDDDD;
        margin-top: 40px;
    }

    .payment-success-page .panel .container .details-container {
        display: block;
        width: 350px;
        margin: 0px auto 0px auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .payment-success-page .panel .container .details-block .details-container {
        padding-top: 20px;
        padding-bottom: 20px;
    }


    .payment-success-page .panel .container .details-container .title {
        text-align: left;
    }

*[dir='rtl'] .payment-success-page .panel .container .details-container .title {
    text-align: right;
}

.payment-success-page .panel .container .details-container .description {
    text-align: right;
    word-break: break-word;
}

*[dir='rtl'] .payment-success-page .panel .container .details-container .description {
    text-align: left;
}

.payment-success-page .panel .container .total .title,
.payment-success-page .panel .container .total .description {
    font-size: 18px;
}

.payment-success-page .panel .container .details-container .details-item {
    margin-top: 10px;
    margin-bottom: 10px;
}

.payment-success-page .new-btn {
    min-width: 150px;
}

.payment-success-page .clipart-container,
.add-funds-success-invoice .payment-success-page .clipart-container {
    display: block;
    margin: 0px auto 0px auto;
    width: 250px;
    height: 250px;
    position: relative;
}

    .payment-success-page .clipart-container .clipart-cloud-1,
    .add-funds-success-invoice .clipart-container .clipart-cloud-1,
    .payment-success-page .clipart-container .clipart-cloud-2,
    .add-funds-success-invoice .clipart-container .clipart-cloud-2,
    .payment-success-page .clipart-container .clipart-cloud-3,
    .add-funds-success-invoice .clipart-container .clipart-cloud-3,
    .payment-success-page .clipart-container .clipart-cloud-4,
    .add-funds-success-invoice .clipart-container .clipart-cloud-4,
    .payment-success-page .clipart-container .clipart-cloud-5,
    .add-funds-success-invoice .clipart-container .clipart-cloud-5,
    .payment-success-page .clipart-container .clipart-cloud-6,
    .add-funds-success-invoice .clipart-container .clipart-cloud-6,
    .payment-success-page .clipart-container .clipart-cloud-7,
    .add-funds-success-invoice .clipart-container .clipart-cloud-7 {
        display: block;
        background-color: #EEEEEE;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
    }

    .payment-success-page .clipart-container .clipart-cloud-1,
    .add-funds-success-invoice .clipart-container .clipart-cloud-1 {
        width: 43%;
        height: 43%;
        top: 12%;
        left: 14%;
        -webkit-animation: payment-success-cloud-1 1.3s ease-in-out infinite alternate;
        animation: payment-success-cloud-1 1.3s ease-in-out infinite alternate;
    }

    .payment-success-page .clipart-container .clipart-cloud-2,
    .add-funds-success-invoice .clipart-container .clipart-cloud-2 {
        width: 33%;
        height: 33%;
        top: 12%;
        left: 45%;
        -webkit-animation: payment-success-cloud-2 1.5s ease-in-out infinite alternate;
        animation: payment-success-cloud-2 1.5s ease-in-out infinite alternate;
    }

    .payment-success-page .clipart-container .clipart-cloud-3,
    .add-funds-success-invoice .clipart-container .clipart-cloud-3 {
        width: 24%;
        height: 24%;
        top: 28%;
        left: 72%;
        -webkit-animation: payment-success-cloud-3 1.2s ease-in-out infinite alternate;
        animation: payment-success-cloud-3 1.2s ease-in-out infinite alternate;
    }

    .payment-success-page .clipart-container .clipart-cloud-4,
    .add-funds-success-invoice .clipart-container .clipart-cloud-4 {
        width: 50%;
        height: 50%;
        top: 38%;
        left: 50%;
        -webkit-animation: payment-success-cloud-4 1.5s ease-in-out infinite alternate;
        animation: payment-success-cloud-4 1.5s ease-in-out infinite alternate;
    }

    .payment-success-page .clipart-container .clipart-cloud-5,
    .add-funds-success-invoice .clipart-container .clipart-cloud-5 {
        width: 60%;
        height: 60%;
        top: 33%;
        left: 23%;
        -webkit-animation: payment-success-cloud-5 1.2s ease-in-out infinite alternate;
        animation: payment-success-cloud-5 1.2s ease-in-out infinite alternate;
    }

    .payment-success-page .clipart-container .clipart-cloud-6,
    .add-funds-success-invoice .clipart-container .clipart-cloud-6 {
        width: 40%;
        height: 40%;
        top: 43%;
        left: 6%;
        -webkit-animation: payment-success-cloud-6 1.3s ease-in-out infinite alternate;
        animation: payment-success-cloud-6 1.3s ease-in-out infinite alternate;
    }

    .payment-success-page .clipart-container .clipart-cloud-7,
    .add-funds-success-invoice .clipart-container .clipart-cloud-7 {
        width: 25%;
        height: 25%;
        top: 37%;
        left: 0%;
        -webkit-animation: payment-success-cloud-7 1s ease-in-out infinite alternate;
        animation: payment-success-cloud-7 1s ease-in-out infinite alternate;
    }

@keyframes payment-success-cloud-1 {
    from {
        transform: translate(-1%, -4%);
    }

    to {
        transform: translate(1%, 4%);
    }
}

@-webkit-keyframes payment-success-cloud-1 {
    from {
        -webkit-transform: translate(-1%, -4%);
    }

    to {
        -webkit-transform: translate(1%, 4%);
    }
}

@keyframes payment-success-cloud-2 {
    from {
        transform: translate(-2%, 4%);
    }

    to {
        transform: translate(3%, -4%);
    }
}

@-webkit-keyframes payment-success-cloud-2 {
    from {
        -webkit-transform: translate(-2%, 4%);
    }

    to {
        -webkit-transform: translate(3%, -4%);
    }
}

@keyframes payment-success-cloud-3 {
    from {
        transform: translate(5%, -3%);
    }

    to {
        transform: translate(-3%, 4%);
    }
}

@-webkit-keyframes payment-success-cloud-3 {
    from {
        -webkit-transform: translate(5%, -3%);
    }

    to {
        -webkit-transform: translate(-3%, 4%);
    }
}

@keyframes payment-success-cloud-4 {
    from {
        transform: translate(-5%, -4%);
    }

    to {
        transform: translate(2%, 3%);
    }
}

@-webkit-keyframes payment-success-cloud-4 {
    from {
        -webkit-transform: translate(-5%, -4%);
    }

    to {
        -webkit-transform: translate(2%, 3%);
    }
}

@keyframes payment-success-cloud-5 {
    from {
        transform: translate(0%, 4%);
    }

    to {
        transform: translate(0%, -3%);
    }
}

@-webkit-keyframes payment-success-cloud-5 {
    from {
        -webkit-transform: translate(0%, 4%);
    }

    to {
        -webkit-transform: translate(0%, -3%);
    }
}

@keyframes payment-success-cloud-6 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-3%, 3%);
    }
}

@-webkit-keyframes payment-success-cloud-6 {
    from {
        -webkit-transform: translate(4%, -4%);
    }

    to {
        -webkit-transform: translate(-3%, 3%);
    }
}

@keyframes payment-success-cloud-7 {
    from {
        transform: translate(-4%, 0%);
    }

    to {
        transform: translate(3%, 0%);
    }
}

@-webkit-keyframes payment-success-cloud-7 {
    from {
        -webkit-transform: translate(-4%, 0%);
    }

    to {
        -webkit-transform: translate(3%, 0%);
    }
}

.payment-success-page .clipart-container .clipart-invoice,
.add-funds-success-invoice .clipart-container .clipart-invoice {
    display: block;
    position: absolute;
    background: url("../../Content/Images/PaymentMethods/clipart-payment-success.svg") no-repeat center center transparent;
    background-size: contain;
    width: 45%;
    height: 45%;
    top: 22%;
    left: 30%;
    z-index: 2;
    -webkit-animation: payment-success-invoice 1.2s ease-in-out infinite alternate;
    animation: payment-success-invoice 1.2s ease-in-out infinite alternate;
}

@keyframes payment-success-invoice {
    from {
        transform: translate(0%, 3%);
    }

    to {
        transform: translate(0%, -3%);
    }
}

@-webkit-keyframes payment-success-invoice {
    from {
        -webkit-transform: translate(0%, 3%);
    }

    to {
        -webkit-transform: translate(0%, -3%);
    }
}

.payment-success-page .clipart-container .clipart-shadow,
.add-funds-success-invoice .clipart-container .clipart-shadow {
    display: block;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    width: 40%;
    height: 4%;
    top: 72%;
    left: 30%;
    z-index: 2;
    -webkit-animation: payment-success-shadow 1.2s ease-in-out infinite alternate;
    animation: payment-success-shadow 1.2s ease-in-out infinite alternate;
}

@keyframes payment-success-shadow {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.8);
        opacity: 0.7;
    }
}


@-webkit-keyframes payment-success-shadow {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(0.8);
        opacity: 0.7;
    }
}


@media (max-width: 1199px) {
    .success-nopay-page.free-ad h2 {
        width: 80%;
        margin: 20px auto;
    }

    .success-nopay-page.free-ad .panel p, .add-funds-success-invoice.free-ad .panel p {
        width: 100%;
        margin: 20px auto;
    }

    .success-nopay-page.free-ad .divider-horizontal {
        width: 80%;
        margin: 20px auto;
    }

    .success-nopay-page.free-ad .free-ad-ul {
        width: 80%;
        margin: 0px auto;
    }
}


@media (max-width: 991px) {
    .payment-success-page .clipart-container,
    .add-funds-success-invoice .clipart-container {
        width: 150px;
        height: 150px;
    }

    .payment-success-page .panel .container {
        width: 500px;
    }
}

@media (max-width: 767px) {
    .payment-success-page .panel {
        padding: 0px;
    }

        .payment-success-page .panel .container {
            width: 100%;
            padding-bottom: 15px;
        }

        .payment-success-page .panel h2 {
            padding-left: 20px;
            padding-right: 20px;
            font-size: 24px;
        }

        .payment-success-page .panel .container .details-block {
            margin-top: 20px;
        }

            .payment-success-page .panel .container .details-block .details-container {
                width: 100%;
                padding-left: 0px;
                padding-right: 0px;
            }

        .payment-success-page .panel .container .details-container .details-item {
            margin-top: 10px;
            margin-bottom: 10px;
            padding-left: 20px;
            padding-right: 20px;
        }

        .payment-success-page .panel .container .details-container {
            width: 100%;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 22px;
        }


    .success-nopay-page.free-ad h2 {
        width: 90%;
        margin: 20px auto;
    }

    .success-nopay-page.free-ad .panel p, .add-funds-success-invoice.free-ad .panel p {
        width: 100%;
        margin: 20px auto;
    }

    .success-nopay-page.free-ad .divider-horizontal {
        width: 90%;
        margin: 20px auto;
    }

    .success-nopay-page.free-ad .free-ad-ul {
        width: 90%;
        margin: 0px auto;
    }
}

@media (max-width: 434px) {
    .payment-success-page .clipart-container {
        width: 100px;
        height: 100px;
    }

    .payment-success-page .details-item {
        width: 100%;
        display: block;
    }

    .payment-success-page .panel .container .details-container .title,
    *[dir='rtl'] .payment-success-page .panel .container .details-container .title {
        display: block;
        width: 100%;
        text-align: center;
        max-width: 100%;
    }

    .payment-success-page .panel .container .details-container .description,
    *[dir='rtl'] .payment-success-page .panel .container .details-container .description {
        display: block;
        width: 100%;
        text-align: center;
        max-width: 100%;
        font-size: 18px;
    }

    .payment-success-page .panel .container .details-container .details-item {
        margin-left: 0px;
        margin-right: 0px;
    }

    .payment-success-page .panel .total .title {
        text-align: left !important;
    }

    *[dir='rtl'] .payment-success-page .panel .total .title {
        text-align: right !important;
    }

    .payment-success-page .panel .total .description {
        text-align: right !important;
    }

    *[dir='rtl'] .payment-success-page .panel .total .description {
        text-align: left !important;
    }

    .payment-success-page .new-btn {
        display: block;
        width: 100%;
    }

        .payment-success-page .new-btn + .new-btn {
            margin-top: 5px;
        }
}
/* #endregion =============================== /Payment Success ======================================== */
/* #region =================================== Ad Create Success ======================================= */
.success-nopay-page .panel,
.add-funds-success-invoice .panel {
    background-color: #F9F9F9;
    padding: 30px 30px 30px 30px;
    text-align: center;
    margin-top: 40px;
}

    .success-nopay-page .panel .new-btn,
    .add-funds-success-invoice .panel .new-btn {
        min-width: 170px;
        margin-top: 40px;
        margin-bottom: 50px;
    }

    .success-nopay-page .panel h2,
    .add-funds-success-invoice .panel h2 {
        font-size: 30px;
        margin-bottom: 30px;
    }

    .success-nopay-page .panel p,
    .add-funds-success-invoice .panel p {
        display: block;
        width: 60%;
        margin: 0px auto 0px auto;
    }

    .success-nopay-page .panel .clipart-container,
    .add-funds-success-invoice .panel .clipart-container {
        display: block;
        position: relative;
        margin: 0px auto 0px auto;
        width: 200px;
        height: 200px;
    }

    .success-nopay-page .panel .clipart-cloud-1,
    .success-nopay-page .panel .clipart-cloud-2,
    .success-nopay-page .panel .clipart-cloud-3,
    .success-nopay-page .panel .clipart-cloud-4,
    .success-nopay-page .panel .clipart-cloud-5,
    .success-nopay-page .panel .clipart-cloud-6,
    .success-nopay-page .panel .clipart-cloud-7 {
        display: block;
        border-radius: 50%;
        background-color: #EEEEEE;
        position: absolute;
        z-index: 1;
    }

    .success-nopay-page .panel .clipart-cloud-1 {
        width: 25%;
        height: 25%;
        left: 18%;
        top: 16%;
        -webkit-animation: nopay-cloud-1 1.2s ease-in-out alternate infinite;
        animation: nopay-cloud-1 1.2s ease-in-out alternate infinite;
    }

    .success-nopay-page .panel .clipart-cloud-2 {
        width: 45%;
        height: 45%;
        left: 34%;
        top: 14%;
        -webkit-animation: nopay-cloud-2 1.4s ease-in-out alternate infinite;
        animation: nopay-cloud-2 1.4s ease-in-out alternate infinite;
    }

    .success-nopay-page .panel .clipart-cloud-3 {
        width: 34%;
        height: 34%;
        left: 63%;
        top: 23%;
        -webkit-animation: nopay-cloud-3 1.6s ease-in-out alternate infinite;
        animation: nopay-cloud-3 1.6s ease-in-out alternate infinite;
    }

    .success-nopay-page .panel .clipart-cloud-4 {
        width: 46%;
        height: 46%;
        left: 55%;
        top: 36%;
        -webkit-animation: nopay-cloud-4 1.3s ease-in-out alternate infinite;
        animation: nopay-cloud-4 1.3s ease-in-out alternate infinite;
    }

    .success-nopay-page .panel .clipart-cloud-5 {
        width: 30%;
        height: 30%;
        left: 40%;
        top: 57%;
        -webkit-animation: nopay-cloud-5 1.3s ease-in-out alternate infinite;
        animation: nopay-cloud-5 1.3s ease-in-out alternate infinite;
    }

    .success-nopay-page .panel .clipart-cloud-6 {
        width: 35%;
        height: 35%;
        left: 20%;
        top: 49%;
        -webkit-animation: nopay-cloud-6 1.3s ease-in-out alternate infinite;
        animation: nopay-cloud-6 1.3s ease-in-out alternate infinite;
    }

    .success-nopay-page .panel .clipart-cloud-7 {
        width: 42%;
        height: 42%;
        left: 0%;
        top: 31%;
        -webkit-animation: nopay-cloud-7 1.3s ease-in-out alternate infinite;
        animation: nopay-cloud-7 1.3s ease-in-out alternate infinite;
    }

.success-nopay-page .call-and-pay-container {
    display: block;
    margin: 0px auto;
    width: 800px;
}

.success-nopay-page .panel-info {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #E6F4ED;
    margin-top: 20px;
    margin-bottom: 10px;
}

    .success-nopay-page .panel-info .col-sm-6 + .col-sm-6 {
        border-left: 1px solid rgba(93, 170, 128, 0.5);
    }

*[dir='rtl'] .success-nopay-page .panel-info .col-sm-6 + .col-sm-6 {
    border-right: 1px solid rgba(93, 170, 128, 0.5);
    border-left: 0px none transparent;
}

.success-nopay-page .panel-info a {
    text-decoration: none;
}

.success-nopay-page .panel-info h4 {
    font-size: 36px;
    margin: 0px;
    padding: 0px;
    margin-bottom: 4px;
}

@media (max-width: 991px) {
    .success-nopay-page .call-and-pay-container {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .success-nopay-page .panel-info h4 {
        font-size: 24px;
        margin: 0px;
        padding: 0px;
        margin-bottom: 4px;
    }

    .success-nopay-page .panel-info p {
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .success-nopay-page .panel-info .col-sm-6 + .col-sm-6 {
        border-left: 0px none transparent;
        border-top: 1px solid rgba(93, 170, 128, 0.5);
    }

    *[dir='rtl'] .success-nopay-page .panel-info .col-sm-6 + .col-sm-6 {
        border-right: 0px none transparent;
        border-left: 0px none transparent;
        border-top: 1px solid rgba(93, 170, 128, 0.5);
    }

    .success-nopay-page .panel-info .col-sm-6:first-child {
        padding-top: 5px;
        padding-bottom: 20px;
    }

    .success-nopay-page .panel-info .col-sm-6:last-child {
        padding-top: 20px;
        padding-bottom: 5px;
    }
}

@keyframes nopay-cloud-1 {
    from {
        transform: translate(-6%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@-webkit-keyframes nopay-cloud-1 {
    from {
        -webkit-transform: translate(-6%, -5%);
    }

    to {
        -webkit-transform: translate(5%, 5%);
    }
}

@keyframes nopay-cloud-2 {
    from {
        transform: translate(0%, 6%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@-webkit-keyframes nopay-cloud-2 {
    from {
        -webkit-transform: translate(0%, 6%);
    }

    to {
        -webkit-transform: translate(0%, -5%);
    }
}

@keyframes nopay-cloud-3 {
    from {
        transform: translate(4%, -3%);
    }

    to {
        transform: translate(-7%, 6%);
    }
}

@-webkit-keyframes nopay-cloud-3 {
    from {
        -webkit-transform: translate(4%, -3%);
    }

    to {
        -webkit-transform: translate(-7%, 6%);
    }
}

@keyframes nopay-cloud-4 {
    from {
        transform: translate(-8%, 1%);
    }

    to {
        transform: translate(3%, -1%);
    }
}

@-webkit-keyframes nopay-cloud-4 {
    from {
        -webkit-transform: translate(-8%, 1%);
    }

    to {
        -webkit-transform: translate(3%, -1%);
    }
}

@keyframes nopay-cloud-5 {
    from {
        transform: translate(0%, 6%);
    }

    to {
        transform: translate(0%, -3%);
    }
}

@-webkit-keyframes nopay-cloud-5 {
    from {
        -webkit-transform: translate(0%, 6%);
    }

    to {
        -webkit-transform: translate(0%, -3%);
    }
}

@keyframes nopay-cloud-6 {
    from {
        transform: translate(4%, -6%);
    }

    to {
        transform: translate(-5%, 4%);
    }
}

@-webkit-keyframes nopay-cloud-6 {
    from {
        -webkit-transform: translate(4%, -6%);
    }

    to {
        -webkit-transform: translate(-5%, 4%);
    }
}

@keyframes nopay-cloud-7 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

@-webkit-keyframes nopay-cloud-7 {
    from {
        -webkit-transform: translate(-8%, 0%);
    }

    to {
        -webkit-transform: translate(4%, 0%);
    }
}

.success-nopay-page .panel .clipart-megaphone-block {
    width: 60%;
    height: 60%;
    left: 27%;
    top: 18%;
    position: absolute;
    z-index: 2;
    -webkit-animation: clipart-nopay-megaphone 1.3s ease-in-out alternate infinite;
    animation: clipart-nopay-megaphone 1.3s ease-in-out alternate infinite;
}

@keyframes clipart-nopay-megaphone {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(-8%);
    }
}

@-webkit-keyframes clipart-nopay-megaphone {
    from {
        -webkit-transform: translateY(0%);
    }

    to {
        -webkit-transform: translateY(-8%);
    }
}

.success-nopay-page .panel .clipart-megaphone-block .clipart-megaphone {
    display: block;
    position: absolute;
    top: 21%;
    left: 0%;
    width: 60%;
    height: 60%;
    background: url("../../Content/Images/PaymentMethods/clipart-megaphone.svg") no-repeat center center transparent;
    background-size: contain;
}

.success-nopay-page .panel .clipart-megaphone-block .clipart-line-block-1 {
    display: block;
    width: 20%;
    height: 3px;
    top: 29%;
    left: 66%;
    position: absolute;
    -webkit-animation: success-nopay-block 0.8s infinite linear;
    animation: success-nopay-block 0.8s infinite linear;
    -webkit-transform: rotate(-25deg);
    transform: rotate(-25deg);
}

.success-nopay-page .panel .clipart-megaphone-block .clipart-line-block-2 {
    display: block;
    width: 20%;
    height: 3px;
    top: 42%;
    left: 68%;
    position: absolute;
    -webkit-animation: success-nopay-block 0.8s infinite linear;
    animation: success-nopay-block 0.8s infinite linear;
}

.success-nopay-page .panel .clipart-megaphone-block .clipart-line-block-3 {
    display: block;
    width: 20%;
    height: 3px;
    top: 55%;
    left: 66%;
    position: absolute;
    -webkit-animation: success-nopay-block 0.8s infinite linear;
    animation: success-nopay-block 0.8s infinite linear;
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}

@keyframes success-nopay-block {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    99% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes success-nopay-block {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    99% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.success-nopay-page .panel .clipart-megaphone-block .clipart-line-block-1 .clipart-line,
.success-nopay-page .panel .clipart-megaphone-block .clipart-line-block-2 .clipart-line,
.success-nopay-page .panel .clipart-megaphone-block .clipart-line-block-3 .clipart-line {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-4);
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-animation: success-nopay-line 0.8s infinite linear;
    animation: success-nopay-line 0.8s infinite linear;
}

@keyframes success-nopay-line {
    0% {
        width: 0%;
    }

    50% {
        width: 100%;
    }

    99% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}

@-webkit-keyframes success-nopay-line {
    0% {
        width: 0%;
    }

    50% {
        width: 100%;
    }

    99% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}

.success-nopay-page .panel .clipart-shadow {
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 69%;
    left: 26%;
    width: 36%;
    height: 4%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 2;
    -webkit-animation: nopay-shadow 1.3s ease-in-out infinite alternate;
    animation: nopay-shadow 1.3s ease-in-out infinite alternate;
}

@keyframes nopay-shadow {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.8);
        opacity: 0.6;
    }
}

@-webkit-keyframes nopay-shadow {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.8);
        opacity: 0.6;
    }
}

@media (max-width: 991px) {
    .success-nopay-page .panel p,
    .add-funds-success-invoice .panel p {
        display: block;
        width: 100%;
        padding: 0px 40px 0px 40px;
    }
}

@media (max-width: 575px) {
    .success-nopay-page .panel p,
    .add-funds-success-invoice .panel p {
        padding: 0px 20px 0px 20px;
    }
}

@media (max-width: 450px) {
    .success-nopay-page .panel,
    .add-funds-success-invoice .panel {
        padding: 10px;
    }

        .success-nopay-page .panel h2,
        .add-funds-success-invoice .panel h2 {
            font-size: 24px;
        }

        .success-nopay-page .panel .clipart-container,
        .add-funds-success-invoice .panel .clipart-container {
            width: 150px;
            height: 150px;
        }
}
/* #endregion ============================== /Ad Create Success ======================================= */
/* #region ==================================== Payment Methods ======================================== */
.payment-methods-page {
    padding-top: 30px;
}

    .payment-methods-page h1 {
        font-size: 24px;
        font-weight: 400;
    }

    .payment-methods-page h3 {
        font-size: 24px;
        font-weight: 400;
        margin-top: 0px;
        margin-bottom: 40px;
    }

    .payment-methods-page .no-cards {
        width: 740px;
        margin: 0px auto 0px auto;
    }

        .payment-methods-page .no-cards .btn-primary {
            min-width: 200px;
            margin-bottom: 50px;
        }

        .payment-methods-page .no-cards .clipart-block {
            margin: 0px auto 0px auto;
            width: 250px;
            height: 250px;
            position: relative;
        }

    .payment-methods-page .information-block {
        display: block;
        border-top: 1px solid #DDDDDD;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 70px;
        padding-right: 30px;
        border-bottom: 1px solid #DDDDDD;
        position: relative;
        text-align: left;
        margin-bottom: 20px;
    }

*[dir='rtl'] .payment-methods-page .information-block {
    padding-left: 30px;
    padding-right: 70px;
    text-align: right;
}

.payment-methods-page .information-block i {
    font-size: 32px;
    position: absolute;
    top: calc(50% - 16px);
    left: 20px;
}

*[dir='rtl'] .payment-methods-page .information-block i {
    left: auto;
    right: 20px;
}

.payment-methods-page .clipart-block .clipart-cloud-1,
.payment-methods-page .clipart-block .clipart-cloud-2,
.payment-methods-page .clipart-block .clipart-cloud-3,
.payment-methods-page .clipart-block .clipart-cloud-4,
.payment-methods-page .clipart-block .clipart-cloud-5,
.payment-methods-page .clipart-block .clipart-cloud-6,
.payment-methods-page .clipart-block .clipart-cloud-7,
.payment-methods-page .clipart-block .clipart-cloud-8,
.payment-methods-page .clipart-block .clipart-cloud-9 {
    display: block;
    position: absolute;
    border-radius: 50%;
    background-color: #EFEFEF;
}

.payment-methods-page .clipart-block .clipart-cloud-1 {
    width: 44%;
    height: 44%;
    left: 10%;
    top: 15%;
    -webkit-animation: clipart-methods-nocards-cloud-1 1.3s ease-in-out infinite alternate;
    animation: clipart-methods-nocards-cloud-1 1.3s ease-in-out infinite alternate;
}

.payment-methods-page .clipart-block .clipart-cloud-2 {
    width: 26%;
    height: 26%;
    left: 41%;
    top: 9%;
    -webkit-animation: clipart-methods-nocards-cloud-2 1.1s ease-in-out infinite alternate;
    animation: clipart-methods-nocards-cloud-2 1.1s ease-in-out infinite alternate;
}

.payment-methods-page .clipart-block .clipart-cloud-3 {
    width: 40%;
    height: 40%;
    left: 48%;
    top: 20%;
    -webkit-animation: clipart-methods-nocards-cloud-3 1.4s ease-in-out infinite alternate;
    animation: clipart-methods-nocards-cloud-3 1.4s ease-in-out infinite alternate;
}

.payment-methods-page .clipart-block .clipart-cloud-4 {
    width: 25%;
    height: 25%;
    left: 75%;
    top: 28%;
    -webkit-animation: clipart-methods-nocards-cloud-4 1.6s ease-in-out infinite alternate;
    animation: clipart-methods-nocards-cloud-4 1.6s ease-in-out infinite alternate;
}

.payment-methods-page .clipart-block .clipart-cloud-5 {
    width: 35%;
    height: 35%;
    left: 55%;
    top: 42%;
    -webkit-animation: clipart-methods-nocards-cloud-5 1.1s ease-in-out infinite alternate;
    animation: clipart-methods-nocards-cloud-5 1.1s ease-in-out infinite alternate;
}

.payment-methods-page .clipart-block .clipart-cloud-6 {
    width: 28%;
    height: 28%;
    left: 49%;
    top: 63%;
    -webkit-animation: clipart-methods-nocards-cloud-6 1.4s ease-in-out infinite alternate;
    animation: clipart-methods-nocards-cloud-6 1.4s ease-in-out infinite alternate;
}

.payment-methods-page .clipart-block .clipart-cloud-7 {
    width: 50%;
    height: 50%;
    left: 14%;
    top: 36%;
    -webkit-animation: clipart-methods-nocards-cloud-7 1.2s ease-in-out infinite alternate;
    animation: clipart-methods-nocards-cloud-7 1.2s ease-in-out infinite alternate;
}

.payment-methods-page .clipart-block .clipart-cloud-8 {
    width: 33%;
    height: 33%;
    left: 0%;
    top: 52%;
    -webkit-animation: clipart-methods-nocards-cloud-8 1.5s ease-in-out infinite alternate;
    animation: clipart-methods-nocards-cloud-8 1.5s ease-in-out infinite alternate;
}

.payment-methods-page .clipart-block .clipart-cloud-9 {
    width: 25%;
    height: 25%;
    left: 0%;
    top: 34%;
    -webkit-animation: clipart-methods-nocards-cloud-9 1.3s ease-in-out infinite alternate;
    animation: clipart-methods-nocards-cloud-9 1.3s ease-in-out infinite alternate;
}

@keyframes clipart-methods-nocards-cloud-1 {
    from {
        transform: translate(-6%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@-webkit-keyframes clipart-methods-nocards-cloud-1 {
    from {
        -webkit-transform: translate(-6%, -5%);
    }

    to {
        -webkit-transform: translate(5%, 5%);
    }
}

@keyframes clipart-methods-nocards-cloud-2 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@-webkit-keyframes clipart-methods-nocards-cloud-2 {
    from {
        -webkit-transform: translate(0%, 5%);
    }

    to {
        -webkit-transform: translate(0%, -5%);
    }
}

@keyframes clipart-methods-nocards-cloud-3 {
    from {
        transform: translate(4%, -6%);
    }

    to {
        transform: translate(-3%, 4%);
    }
}

@-webkit-keyframes clipart-methods-nocards-cloud-3 {
    from {
        -webkit-transform: translate(4%, -6%);
    }

    to {
        -webkit-transform: translate(-3%, 4%);
    }
}

@keyframes clipart-methods-nocards-cloud-4 {
    from {
        transform: translate(-7%, 3%);
    }

    to {
        transform: translate(5%, -4%);
    }
}

@-webkit-keyframes clipart-methods-nocards-cloud-4 {
    from {
        -webkit-transform: translate(-7%, 3%);
    }

    to {
        -webkit-transform: translate(5%, -4%);
    }
}

@keyframes clipart-methods-nocards-cloud-5 {
    from {
        transform: translate(4%, 2%);
    }

    to {
        transform: translate(-4%, -2%);
    }
}

@-webkit-keyframes clipart-methods-nocards-cloud-5 {
    from {
        -webkit-transform: translate(4%, 2%);
    }

    to {
        -webkit-transform: translate(-4%, -2%);
    }
}

@keyframes clipart-methods-nocards-cloud-6 {
    from {
        transform: translate(-2%, -6%);
    }

    to {
        transform: translate(2%, 2%);
    }
}

@-webkit-keyframes clipart-methods-nocards-cloud-6 {
    from {
        -webkit-transform: translate(-2%, -6%);
    }

    to {
        -webkit-transform: translate(2%, 2%);
    }
}

@keyframes clipart-methods-nocards-cloud-7 {
    from {
        transform: translate(0%, 4%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@-webkit-keyframes clipart-methods-nocards-cloud-7 {
    from {
        -webkit-transform: translate(0%, 4%);
    }

    to {
        -webkit-transform: translate(0%, -5%);
    }
}

@keyframes clipart-methods-nocards-cloud-8 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-3%, 5%);
    }
}

@-webkit-keyframes clipart-methods-nocards-cloud-8 {
    from {
        -webkit-transform: translate(4%, -4%);
    }

    to {
        -webkit-transform: translate(-3%, 5%);
    }
}

@keyframes clipart-methods-nocards-cloud-9 {
    from {
        transform: translate(4%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

@-webkit-keyframes clipart-methods-nocards-cloud-9 {
    from {
        -webkit-transform: translate(4%, 0%);
    }

    to {
        -webkit-transform: translate(-6%, 0%);
    }
}

.payment-methods-page .clipart-block .clipart-cards {
    width: 40%;
    height: 40%;
    top: 26%;
    left: 27%;
    position: absolute;
    z-index: 2;
    background: url("../../Content/Images/PaymentMethods/clipart-cards.svg") no-repeat center center transparent;
    background-size: contain;
    -webkit-animation: clipart-methods-cards 1.1s ease-in-out infinite alternate;
    animation: clipart-methods-cards 1.1s ease-in-out infinite alternate;
}

@keyframes clipart-methods-cards {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(-8%);
    }
}

@-webkit-keyframes clipart-methods-cards {
    from {
        -webkit-transform: translateY(0%);
    }

    to {
        -webkit-transform: translateY(-8%);
    }
}

.payment-methods-page .clipart-block .clipart-shadow {
    width: 40%;
    height: 4%;
    top: 68%;
    left: 27%;
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-animation: clipart-methods-shadow 1.1s ease-in-out infinite alternate;
    animation: clipart-methods-shadow 1.1s ease-in-out infinite alternate;
}

@keyframes clipart-methods-shadow {
    from {
        transform: scaleX(1);
        opacity: 1;
    }

    to {
        transform: scaleX(0.8);
        opacity: 0.5;
    }
}

@-webkit-keyframes clipart-methods-shadow {
    from {
        -webkit-transform: scaleX(1);
        opacity: 1;
    }

    to {
        -webkit-transform: scaleX(0.8);
        opacity: 0.5;
    }
}


.payment-methods-page .cardlist {
    margin: 40px auto 40px auto;
    width: 740px;
}


.payment-methods-page .no-saved-methods .row-message {
    width: 100%;
    display: flex;
    padding-inline: var(--gap-24);
    padding-block-start: var(--gap-64);
    padding-block-end: var(--gap-32);
    font-size: 24px;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 100%;
    justify-content: center;
    text-align: center;
}

.payment-methods-page .row-btns {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--gap-16);
    padding-block-end: var(--gap-128);
}

    .payment-methods-page .row-btns button {
        width: 260px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 0px none transparent;
        border-radius: var(--radius-16);
        background-color: var(--color-bg-panel);
        color: var(--color-text-basic);
        text-transform: uppercase;
        font-weight: 500;
        font-size: 16px;
        cursor: pointer;
        padding-block-end: var(--gap-32);
        opacity: 1;
        transition: opacity 0.2s ease-in-out;
    }

        .payment-methods-page .row-btns button:hover {
            opacity: 0.6;
            transition: opacity 0.2s ease-in-out;
        }

        .payment-methods-page .row-btns button .ci-paypal {
            font-size: 120px;
        }

        .payment-methods-page .row-btns button.card .clipart {
            width: 120px;
            height: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .payment-methods-page .row-btns button.card .clipart i {
                width: 74px;
                height: 74px;
                background: url('../../Content/Images/PaymentMethods/clipart-cards.svg') no-repeat center center transparent;
                background-size: contain;
            }

@media (max-width: 991px) {
    .payment-methods-page h1 {
        font-weight: 700;
    }


    .payment-methods-page .no-cards {
        width: 100%;
    }

    .payment-methods-page .cardlist {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .payment-methods-page .no-cards .clipart-block {
        width: 150px;
        height: 150px;
    }

    .payment-methods-page .no-cards h3 {
        font-size: 18px;
    }

    .payment-methods-page .information-block i {
        top: 20px;
    }

    .payment-methods-page .row-btns {
        flex-direction: column;
    }

        .payment-methods-page .row-btns button {
            width: 100%;
            position: relative;
            padding-block: var(--gap-24);
        }

            .payment-methods-page .row-btns button .ci-paypal {
                font-size: 24px;
            }

                .payment-methods-page .row-btns button .ci-paypal:before {
                    background-position: -17em 0em;
                }

            .payment-methods-page .row-btns button .clipart {
                position: absolute;
                inset-inline-start: var(--gap-16);
                width: var(--gap-24);
                height: var(--gap-24);
            }

            .payment-methods-page .row-btns button.card .clipart {
                width: var(--gap-24);
                height: var(--gap-24);
            }

                .payment-methods-page .row-btns button.card .clipart i {
                    background: none !important;
                    display: inline-block;
                    width: 1em;
                    height: 1em;
                    vertical-align: middle;
                    font-size: 24px;
                    opacity: 1;
                    position: relative;
                }

                    .payment-methods-page .row-btns button.card .clipart i:before {
                        top: 0px;
                        left: 0px;
                        content: '';
                        display: inline-block;
                        width: 1em;
                        height: 1em;
                        vertical-align: middle;
                        background-image: url("../../Content/Images/ci-pazar-muted.svg");
                        background-repeat: no-repeat;
                        background-size: 150em 1em;
                        background-position: -83em 0em;
                        font-size: 1em;
                        opacity: 1;
                        position: absolute;
                    }
}

@media (max-width: 400px) {
    .payment-methods-page .information-block {
        padding-left: 40px;
        padding-right: 20px;
    }

    *[dir='rtl'] .payment-methods-page .information-block {
        padding-left: 20px;
        padding-right: 40px;
    }

    .payment-methods-page .information-block i {
        top: 20px;
        font-size: 24px;
        left: 2px;
    }

    *[dir='rtl'] .payment-methods-page .information-block i {
        left: auto;
        right: 2px;
    }
}
/* #endregion =============================== /Payment Methods ======================================== */
/* #region ============================= PayPal Attachment Error/Success =============================== */
.paypal-error-block, .paypal-success-block {
    display: flex;
    flex-direction: column;
    gap: var(--gap-24);
    padding-block-start: var(--gap-32);
    align-items: center;
    justify-content: center;
}

    .paypal-error-block .row-title, .paypal-success-block .row-title {
        display: flex;
        width: 600px;
        font-size: 30px;
        line-height: 110%;
        text-transform: uppercase;
        font-weight: 800;
        color: var(--color-text-muted);
        text-align: center;
    }

    .paypal-error-block .row-btns, .paypal-success-block .row-btns {
        display: flex;
        padding-block-start: var(--gap-24);
        gap: var(--gap-8);
    }

    .paypal-error-block .clipart-default-error, .paypal-success-block .clipart-default-success {
        width: 180px;
        height: 180px;
    }

@media (max-width: 991px) {
    .paypal-error-block, .paypal-success-block {
        padding-block-start: var(--gap-24);
    }
}

@media (max-width: 767px) {
    .paypal-error-block .row-title, .paypal-success-block .row-title {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .paypal-error-block, .paypal-success-block {
        padding-block-start: 0px;
        gap: var(--gap-16);
    }

        .paypal-error-block .row-title, .paypal-success-block .row-title {
            font-size: 24px;
        }
}
/* #endregion ========================= /PayPal Attachment Error/Success =============================== */
/* #region ======================================= Add Funds =========================================== */
.add-funds-page {
    padding-top: 30px;
}

    .add-funds-page h2, .add-funds-page h1 {
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 30px;
    }

@media (max-width: 991px) {
    .add-funds-page h2, .add-funds-page h1 {
        font-size: 24px;
        font-weight: 700;
    }
}
/* #region ---------------------------------- Add Funds block ----------------------------------------- */
.add-funds-page .add-funds-block .panel {
    background-color: #E6F4ED;
    border-radius: var(--radius-4);
    padding: 5px 5px 5px 5px;
    margin-bottom: 30px;
    font-size: 0px;
}

    .add-funds-page .add-funds-block .panel .balance-block {
        display: inline-block;
        width: 33.3%;
        text-align: center;
        border-right: 1px solid #DDDDDD;
        font-size: 14px;
        padding-top: 15px;
        padding-bottom: 15px;
        vertical-align: top;
    }

*[dir='rtl'] .add-funds-page .add-funds-block .panel .balance-block {
    border-left: 1px solid #DDDDDD;
    border-right: 0px none transparent;
}

.add-funds-page .add-funds-block .panel .action-block {
    display: inline-block;
    width: 66.6%;
    font-size: 0px;
    vertical-align: top;
}

.add-funds-page .add-funds-block .panel .balance-block label {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.add-funds-page .add-funds-block .panel .balance-block span {
    display: block;
    width: 100%;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 6px;
}

    .add-funds-page .add-funds-block .panel .balance-block span small {
        padding-left: 0.15em;
        padding-right: 0.15em;
    }

.add-funds-page .add-funds-block .action-block .amount-block,
.add-funds-page .add-funds-block .action-block .slider-block,
.add-funds-page .add-funds-block .action-block .button-block {
    font-size: 14px;
    width: 33.33%;
    display: inline-block;
    vertical-align: top;
}

.add-funds-page .add-funds-block .action-block .amount-block {
    text-align: left;
    padding: 15px 20px 15px 20px;
}

*[dir='rtl'] .add-funds-page .add-funds-block .action-block .amount-block {
    text-align: right;
}

.add-funds-page .add-funds-block .action-block .amount-block label {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.add-funds-page .add-funds-block .action-block .amount-block input {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.05);
    border: 0px none transparent;
    border-radius: var(--radius-4);
    text-align: left;
    font-size: 28px;
    color: var(--color-text-primary);
    font-weight: 700;
    width: 100%;
}

*[dir='rtl'] .add-funds-page .add-funds-block .action-block .amount-block input {
    text-align: right;
}

.add-funds-page .add-funds-block .action-block .button-block {
    text-align: right;
    padding: 16px 20px 16px 20px;
}

*[dir='rtl'] .add-funds-page .add-funds-block .action-block .button-block {
    text-align: left;
}

.add-funds-page .add-funds-block .action-block .button-block .btn-primary {
    padding-top: 22px;
    padding-bottom: 22px;
    width: 100%;
}

.add-funds-page .add-funds-block .action-block .slider-block input {
    width: 100%;
    z-index: 1;
    margin-bottom: 10px;
}

.add-funds-page .add-funds-block .action-block .slider-block {
    padding: 30px 15px 0px 15px;
    font-size: 0px;
}


    .add-funds-page .add-funds-block .action-block .slider-block .min-value-block,
    .add-funds-page .add-funds-block .action-block .slider-block .max-value-block {
        width: 50%;
        font-size: 14px;
        display: inline-block;
        margin-top: 10px;
    }

    .add-funds-page .add-funds-block .action-block .slider-block .min-value-block {
        text-align: left;
    }

*[dir='rtl'] .add-funds-page .add-funds-block .action-block .slider-block .min-value-block {
    text-align: right;
}

.add-funds-page .add-funds-block .action-block .slider-block .max-value-block {
    text-align: right;
}

*[dir='rtl'] .add-funds-page .add-funds-block .action-block .slider-block .max-value-block {
    text-align: left;
}

.add-funds-page .add-funds-block .panel .amount-block input[type='text'] {
    margin-top: 3px;
}

@media(max-width: 1199px) {
    .add-funds-page .add-funds-block .panel .balance-block {
        width: 25%;
    }

    .add-funds-page .add-funds-block .panel .action-block {
        width: 75%;
    }

    .add-funds-page .add-funds-block .panel .balance-block span {
        font-size: 20px;
        margin-top: 14px;
    }
}

@media (max-width: 991px) {
    *[dir='rtl'] .add-funds-page .add-funds-block .panel .balance-block,
    .add-funds-page .add-funds-block .panel .balance-block,
    .add-funds-page .add-funds-block .panel .action-block {
        width: 100%;
        border-left: 0px none transparent;
        border-right: 0px none transparent;
    }

    .add-funds-page .add-funds-block .panel .balance-block {
        border-bottom: 1px solid #DDDDDD;
    }

    .add-funds-page .add-funds-block .panel {
        padding: 0px;
    }

        .add-funds-page .add-funds-block .panel .balance-block span {
            font-size: 24px;
            margin-top: 2px;
            line-height: 24px;
        }
}

@media (max-width: 767px) {
    .add-funds-page .add-funds-block .action-block .slider-block {
        display: none;
    }

    .add-funds-page .add-funds-block .panel .amount-block,
    .add-funds-page .add-funds-block .panel .button-block {
        width: 50%;
    }
}

@media (max-width: 575px) {
    .add-funds-page .add-funds-block .panel .amount-block,
    .add-funds-page .add-funds-block .panel .button-block {
        width: 100%;
    }

    .add-funds-page .add-funds-block .panel .amount-block {
        padding-bottom: 8px;
    }

    .add-funds-page .add-funds-block .panel .button-block {
        padding-top: 8px;
    }
}
/* #endregion ------------------------------ /Add Funds block ----------------------------------------- */
/* #region --------------------------------- Auto-Topup Switch ---------------------------------------- */
.autotopup-switch-block {
    display: block;
    position: relative;
    margin-bottom: 30px;
}

    .autotopup-switch-block .panel {
        display: block;
        background-color: #F9F9F9;
        border-radius: var(--radius-4);
        padding: 20px 25px 60px 25px;
        overflow: hidden;
        opacity: 1;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }


    .autotopup-switch-block.active .panel {
        height: 0px;
        padding: 0px;
        opacity: 0;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        margin-bottom: 50px;
    }

    .autotopup-switch-block .switch {
        position: absolute;
        left: 25px;
        top: calc(100% - 44px);
        z-index: 1;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

*[dir='rtl'] .autotopup-switch-block .switch {
    left: auto;
    right: 25px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.autotopup-switch-block.active .switch {
    left: 0px;
    top: 0px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

*[dir='rtl'] .autotopup-switch-block.active .switch {
    left: auto;
    right: 0px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

@media (max-width: 767px) {
    .autotopup-switch-block .switch i {
        position: absolute;
        top: 0px;
        left: 0px;
    }

    *[dir='rtl'] .autotopup-switch-block .switch i {
        left: auto;
        right: 0px;
    }

    .autotopup-switch-block .switch span {
        padding-left: 50px;
        padding-right: 20px;
        display: block;
        line-height: 18px;
        padding-top: 2px;
    }

    *[dir='rtl'] .autotopup-switch-block .switch span {
        padding-left: 20px;
        padding-right: 50px;
    }

    .autotopup-switch-block .panel {
        display: block;
        background-color: #F9F9F9;
        border-radius: var(--radius-4);
        padding: 20px 25px 80px 25px;
        overflow: hidden;
        opacity: 1;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    .autotopup-switch-block .switch {
        position: absolute;
        left: 25px;
        top: calc(100% - 65px);
        z-index: 1;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    .autotopup-switch-block.active .panel {
        height: 0px;
        padding: 0px;
        opacity: 0;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        margin-bottom: 70px;
    }
}

/* #endregion ----------------------------- /Auto-Topup Switch ---------------------------------------- */
/* #region --------------------------------- Auto-topup block ----------------------------------------- */
.add-funds-page .autotopup-block {
    padding-top: 5px;
}

    .add-funds-page .autotopup-block .panel {
        position: relative;
        display: block;
        width: 100%;
        background-color: #F2F2F2;
        border-radius: var(--radius-4);
        padding-top: 30px;
        padding-bottom: 40px;
    }

        .add-funds-page .autotopup-block .panel h4 {
            display: block;
            width: 100%;
            font-size: 14px;
            padding-left: 20px;
            padding-right: 20px;
        }

        .add-funds-page .autotopup-block .panel .parameters-container {
            margin-top: 40px;
            margin-bottom: 40px;
            margin-left: 0px;
            margin-right: 0px;
        }

        .add-funds-page .autotopup-block .panel .fall-block,
        .add-funds-page .autotopup-block .panel .topup-block {
            border-right: 1px solid #DDDDDD;
            text-align: center;
        }

*[dir='rtl'] .add-funds-page .autotopup-block .panel .fall-block,
*[dir='rtl'] .add-funds-page .autotopup-block .panel .topup-block {
    border-left: 1px solid #DDDDDD;
    border-right: 0px none transparent;
}

.add-funds-page .autotopup-block .panel p bdi {
    padding-left: 5px;
}

*[dir='rtl'] .add-funds-page .autotopup-block .panel p bdi {
    padding-left: 0px;
    padding-right: 5px;
}

.add-funds-page .autotopup-block .fall-block input[type="text"],
.add-funds-page .autotopup-block .topup-block input[type="text"] {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.05);
    border: 0px none transparent;
    border-radius: var(--radius-4);
    text-align: center;
    font-weight: 700;
    width: 60%;
    font-size: 30px;
    margin-top: 19px;
}

.add-funds-page .autotopup-block .topup-block input[type="text"] {
    color: var(--color-text-primary);
}

.add-funds-page .autotopup-block .slider-block {
    width: 80%;
    margin: 15px auto 0px auto;
    font-size: 0px;
}

    .add-funds-page .autotopup-block .slider-block input[type='range'] {
        width: 100%;
        font-size: 14px;
    }

    .add-funds-page .autotopup-block .slider-block .min-value-block,
    .add-funds-page .autotopup-block .slider-block .max-value-block {
        width: 50%;
        display: inline-block;
        font-size: 14px;
        padding-top: 10px;
    }

    .add-funds-page .autotopup-block .slider-block .min-value-block {
        text-align: left;
    }

*[dir='rtl'] .add-funds-page .autotopup-block .slider-block .min-value-block {
    text-align: right;
}

.add-funds-page .autotopup-block .slider-block .max-value-block {
    text-align: right;
}

*[dir='rtl'] .add-funds-page .autotopup-block .slider-block .max-value-block {
    text-align: left;
}

.add-funds-page .autotopup-block .fall-block p,
.add-funds-page .autotopup-block .topup-block p,
.add-funds-page .autotopup-block .card-select-block p {
    padding-top: 30px;
}


.add-funds-page .autotopup-block .fall-block .slider-block,
.add-funds-page .autotopup-block .topup-block .slider-block,
.add-funds-page .autotopup-block .card-select-block .btn-link {
    margin-bottom: 30px;
}

.add-funds-page .autotopup-block .card-select-block .btn-link {
    margin-top: 10px;
}

.add-funds-page .autotopup-block .card-select-block .error-block {
    position: relative;
    width: 90%;
    margin: 20px auto 0px auto;
}

    .add-funds-page .autotopup-block .card-select-block .error-block p {
        margin: 0px;
        padding: 0px 0px 0px 35px;
        text-align: left;
    }

*[dir='rtl'] .add-funds-page .autotopup-block .card-select-block .error-block p {
    padding: 0px 35px 0px 0px;
    text-align: right;
}

.add-funds-page .autotopup-block .error-block .icon {
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-bg-danger);
    color: #ffffff;
    top: 2px;
    left: 0px;
}

*[dir='rtl'] .add-funds-page .autotopup-block .error-block .icon {
    right: 2px;
    left: auto;
}

.add-funds-page .autotopup-block .error-block .icon i {
    font-size: 18px;
    font-weight: 700;
    width: 100%;
    text-align: center;
    font-style: normal;
    padding-top: 1px;
    display: inline-block;
}

.add-funds-page .autotopup-block .options-list {
    max-height: 250px;
}


.add-funds-page .autotopup-block .card-select-block .select {
    margin-top: 18px;
}

    .add-funds-page .autotopup-block .card-select-block .select .add-new {
        text-align: center;
        color: var(--color-text-primary) !important;
        font-weight: 700;
        text-transform: uppercase;
        padding-top: 20px;
        padding-bottom: 20px;
    }

.add-funds-page .autotopup-block .card-select-block .select {
    width: 90%;
    margin: 18px auto 0px auto;
}

@media (max-width: 1199px) {
    .add-funds-page .autotopup-block .fall-block input[type="text"],
    .add-funds-page .autotopup-block .topup-block input[type="text"] {
        width: 80%;
        font-size: 30px;
        margin-top: 19px;
    }
}

@media (max-width: 991px) {
    .add-funds-page .autotopup-block .panel .topup-block,
    *[dir='rtl'] .add-funds-page .autotopup-block .panel .topup-block {
        border-right: 0px none transparent;
        border-left: 0px none transparent;
        text-align: center;
    }

    .add-funds-page .autotopup-block .panel .parameters-container {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .add-funds-page .autotopup-block .fall-block p,
    .add-funds-page .autotopup-block .topup-block p,
    .add-funds-page .autotopup-block .card-select-block p {
        padding-top: 0px;
    }

    .add-funds-page .autotopup-block .fall-block .slider-block,
    .add-funds-page .autotopup-block .topup-block .slider-block {
        margin-bottom: 0px;
    }

    .add-funds-page .autotopup-block .panel h4 {
        margin-bottom: 40px;
    }

    .add-funds-page .autotopup-block .panel {
        padding-bottom: 20px;
    }

    .add-funds-page .autotopup-block .card-select-block {
        margin-top: 40px;
        border-bottom: 1px solid #DDDDDD;
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .add-funds-page .autotopup-block .panel .fall-block,
    *[dir='rtl'] .add-funds-page .autotopup-block .panel .fall-block {
        border-right: 0px none transparent;
        border-left: 0px none transparent;
    }

    .add-funds-page .autotopup-block .panel h4 {
        display: block;
        width: 80%;
        margin: 0px auto 20px auto;
    }

    .add-funds-page .autotopup-block .card-select-block .select {
        width: 80%;
    }

    .add-funds-page .autotopup-block .panel .slider-block {
        display: none;
    }

    .add-funds-page .autotopup-block .fall-block p,
    .add-funds-page .autotopup-block .topup-block p,
    .add-funds-page .autotopup-block .card-select-block p {
        margin: 20px auto 0px auto;
        text-align: left;
        width: 80%;
        display: block;
    }

    *[dir='rtl'] .add-funds-page .autotopup-block .fall-block p,
    *[dir='rtl'] .add-funds-page .autotopup-block .topup-block p,
    *[dir='rtl'] .add-funds-page .autotopup-block .card-select-block p {
        text-align: right;
    }

    .add-funds-page .autotopup-block .fall-block input[type='text'],
    .add-funds-page .autotopup-block .topup-block input[type='text'] {
        margin-top: 5px;
        text-align: left;
    }

    *[dir='rtl'] .add-funds-page .autotopup-block .fall-block input[type='text'],
    *[dir='rtl'] .add-funds-page .autotopup-block .topup-block input[type='text'] {
        text-align: right;
    }

    .add-funds-page .autotopup-block .card-select-block {
        margin-top: 0px;
    }

        .add-funds-page .autotopup-block .card-select-block .select {
            margin-top: 5px;
        }

        .add-funds-page .autotopup-block .card-select-block .error-block {
            width: 80%;
        }

            .add-funds-page .autotopup-block .card-select-block .error-block p {
                width: 100%;
            }

        .add-funds-page .autotopup-block .card-select-block .btn-link {
            display: block;
            margin: 15px auto 20px auto;
            text-align: left;
            width: 80%;
        }

    *[dir='rtl'] .add-funds-page .autotopup-block .card-select-block .btn-link {
        text-align: right;
    }
}

@media (max-width: 575px) {
    .add-funds-page .autotopup-block .card-select-block .btn-link {
        display: block;
        margin: 15px auto 20px auto;
        text-align: center;
        width: 100%;
    }



    .add-funds-page .autotopup-block .fall-block input[type='text'],
    .add-funds-page .autotopup-block .topup-block input[type='text'],
    .add-funds-page .autotopup-block .card-select-block .error-block,
    .add-funds-page .autotopup-block .fall-block p,
    .add-funds-page .autotopup-block .topup-block p,
    .add-funds-page .autotopup-block .card-select-block p,
    .add-funds-page .autotopup-block .card-select-block .select,
    .add-funds-page .autotopup-block .panel h4 {
        width: 100%;
    }
}
/* #endregion ----------------------------- /Auto-topup block ----------------------------------------- */
/* #region --------------------------------- Auto-Topup Saved ----------------------------------------- */
.add-funds-page .autotopup-saved-block .panel {
    display: block;
    width: 570px;
    background-color: #F2F2F2;
    border-radius: var(--radius-4);
    position: relative;
}

    .add-funds-page .autotopup-saved-block .panel .panel-container {
        padding: 27px 70px 27px 25px;
        position: relative;
    }

*[dir='rtl'] .add-funds-page .autotopup-saved-block .panel .panel-container {
    padding: 27px 25px 27px 70px;
    position: relative;
}

.add-funds-page .autotopup-saved-block .panel .panel-container p {
    margin-bottom: 15px;
}

    .add-funds-page .autotopup-saved-block .panel .panel-container p span {
        display: inline-block;
        margin-right: 10px;
    }

*[dir='rtl'] .add-funds-page .autotopup-saved-block .panel .panel-container p span {
    margin-left: 10px;
    margin-right: 0px;
}


.add-funds-page .autotopup-saved-block .panel .panel-container p bdi {
    font-weight: 700;
    white-space: nowrap;
}

.add-funds-page .autotopup-saved-block .panel .panel-container .card-display {
    vertical-align: middle;
    font-size: 18px;
}

    .add-funds-page .autotopup-saved-block .panel .panel-container .card-display .logo {
        display: inline-block;
        background-color: #ffffff;
        border-radius: var(--radius-4);
        font-size: 32px;
        padding: 3px;
        vertical-align: middle;
        margin-right: 10px;
    }

*[dir='rtl'] .add-funds-page .autotopup-saved-block .panel .panel-container .card-display .logo {
    margin-right: 0px;
    margin-left: 10px;
}

.add-funds-page .autotopup-saved-block .panel .panel-container .btn-primary {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    padding: 10px;
    font-size: 32px;
}

    .add-funds-page .autotopup-saved-block .panel .panel-container .btn-primary span {
        display: none;
    }

*[dir='rtl'] .add-funds-page .autotopup-saved-block .panel .panel-container .btn-primary {
    right: auto;
    left: 10px;
}

.add-funds-page .autotopup-saved-block .panel .error-block {
    border-bottom: 1px solid #DDDDDD;
}

    .add-funds-page .autotopup-saved-block .panel .error-block .panel-container {
        padding: 20px 25px 20px 60px;
    }

*[dir='rtl'] .add-funds-page .autotopup-saved-block .panel .error-block .panel-container {
    padding: 20px 60px 20px 25px;
}

.add-funds-page .autotopup-saved-block .panel .error-block .panel-container .error {
    position: absolute;
    top: calc(50% - 12px);
    left: 24px;
    background-color: var(--color-bg-danger);
    font-size: 14px;
    padding: 5px;
    display: block;
    border-radius: 50%;
}

*[dir='rtl'] .add-funds-page .autotopup-saved-block .panel .error-block .panel-container .error {
    left: auto;
    right: 24px;
}

@media (max-width: 991px) {
    .add-funds-page .autotopup-saved-block .panel {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .add-funds-page .autotopup-saved-block .panel .panel-container,
    *[dir='rtl'] .add-funds-page .autotopup-saved-block .panel .panel-container {
        padding: 27px 25px 27px 25px;
    }

        .add-funds-page .autotopup-saved-block .panel .panel-container .btn-primary {
            position: relative;
            font-size: 14px;
            min-width: 150px;
            padding-top: 15px;
            padding-bottom: 15px;
            margin-top: 20px;
            top: auto;
            right: auto;
        }

            .add-funds-page .autotopup-saved-block .panel .panel-container .btn-primary i {
                display: none;
            }

            .add-funds-page .autotopup-saved-block .panel .panel-container .btn-primary span {
                display: inline;
            }
}

@media (max-width: 450px) {
    .add-funds-page .autotopup-saved-block .panel .panel-container,
    *[dir='rtl'] .add-funds-page .autotopup-saved-block .panel .panel-container {
        padding: 27px 10px 27px 10px;
    }

    .add-funds-page .autotopup-saved-block .panel .error-block .panel-container {
        padding: 15px 10px 15px 50px;
    }

    *[dir='rtl'] .add-funds-page .autotopup-saved-block .panel .error-block .panel-container {
        padding: 15px 50px 15px 10px;
    }

    .add-funds-page .autotopup-saved-block .panel .error-block .panel-container .error {
        top: 20px;
        left: 14px;
    }

    *[dir='rtl'] .add-funds-page .autotopup-saved-block .panel .error-block .panel-container .error {
        top: 20px;
        left: auto;
        right: 14px;
    }

    .add-funds-page .autotopup-saved-block .panel .panel-container p span {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
    }

    .add-funds-page .autotopup-saved-block .panel .panel-container p {
        text-align: center;
    }

        .add-funds-page .autotopup-saved-block .panel .panel-container p bdi {
            font-size: 18px;
        }

    .add-funds-page .autotopup-saved-block .panel .panel-container .card-display {
        text-align: center;
    }

    .add-funds-page .autotopup-saved-block .panel .panel-container .btn-primary {
        margin-top: 30px;
    }
}
/* #endregion ----------------------------- /Auto-Topup Saved ----------------------------------------- */
/* #region ----------------------------- Invoice History - No Data ------------------------------------ */
.add-funds-page .invoice-history-nodata {
    width: 600px;
    margin: 0px auto;
}

    .add-funds-page .invoice-history-nodata h3 {
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 10px;
    }

    .add-funds-page .invoice-history-nodata p {
        font-size: 14px;
        margin-bottom: 100px;
    }

    .add-funds-page .invoice-history-nodata .clipart-block {
        display: block;
        width: 200px;
        height: 200px;
        margin: 0px auto 0px auto;
        position: relative;
    }

        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-1,
        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-2,
        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-3,
        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-4,
        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-5,
        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-6,
        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-7,
        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-8,
        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-9 {
            position: absolute;
            display: block;
            position: absolute;
            z-index: 1;
            background-color: #EFEFEF;
            border-radius: 50%;
        }

        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-1 {
            width: 28%;
            height: 28%;
            top: 9%;
            left: 23%;
            -webkit-animation: invoice-history-cloud-1 1.4s ease-in-out infinite alternate;
            animation: invoice-history-cloud-1 1.4s ease-in-out infinite alternate;
        }

        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-2 {
            width: 40%;
            height: 40%;
            top: 13%;
            left: 40%;
            -webkit-animation: invoice-history-cloud-2 1.2s ease-in-out infinite alternate;
            animation: invoice-history-cloud-2 1.2s ease-in-out infinite alternate;
        }

        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-3 {
            width: 33%;
            height: 33%;
            top: 15%;
            left: 68%;
            -webkit-animation: invoice-history-cloud-3 1.6s ease-in-out infinite alternate;
            animation: invoice-history-cloud-3 1.6s ease-in-out infinite alternate;
        }

        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-4 {
            width: 28%;
            height: 28%;
            top: 40%;
            left: 72%;
            -webkit-animation: invoice-history-cloud-4 1.1s ease-in-out infinite alternate;
            animation: invoice-history-cloud-4 1.1s ease-in-out infinite alternate;
        }

        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-5 {
            width: 48%;
            height: 48%;
            top: 38%;
            left: 43%;
            -webkit-animation: invoice-history-cloud-5 1.5s ease-in-out infinite alternate;
            animation: invoice-history-cloud-5 1.5s ease-in-out infinite alternate;
        }

        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-6 {
            width: 26%;
            height: 26%;
            top: 65%;
            left: 33%;
            -webkit-animation: invoice-history-cloud-6 1.3s ease-in-out infinite alternate;
            animation: invoice-history-cloud-6 1.3s ease-in-out infinite alternate;
        }

        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-7 {
            width: 45%;
            height: 45%;
            top: 36%;
            left: 12%;
            -webkit-animation: invoice-history-cloud-7 1.6s ease-in-out infinite alternate;
            animation: invoice-history-cloud-7 1.6s ease-in-out infinite alternate;
        }

        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-8 {
            width: 24%;
            height: 24%;
            top: 47%;
            left: 0%;
            -webkit-animation: invoice-history-cloud-8 1.4s ease-in-out infinite alternate;
            animation: invoice-history-cloud-8 1.4s ease-in-out infinite alternate;
        }

        .add-funds-page .invoice-history-nodata .clipart-block .clipart-cloud-9 {
            width: 35%;
            height: 35%;
            top: 24%;
            left: 9%;
            -webkit-animation: invoice-history-cloud-9 1.1s ease-in-out infinite alternate;
            animation: invoice-history-cloud-9 1.1s ease-in-out infinite alternate;
        }

@keyframes invoice-history-cloud-1 {
    from {
        transform: translate(-3%, -4%);
    }

    to {
        transform: translate(3%, 8%);
    }
}

@-webkit-keyframes invoice-history-cloud-1 {
    from {
        -webkit-transform: translate(-3%, -4%);
    }

    to {
        -webkit-transform: translate(3%, 8%);
    }
}

@keyframes invoice-history-cloud-2 {
    from {
        transform: translate(0%, 4%);
    }

    to {
        transform: translate(0%, -6%);
    }
}

@-webkit-keyframes invoice-history-cloud-2 {
    from {
        -webkit-transform: translate(0%, 4%);
    }

    to {
        -webkit-transform: translate(0%, -6%);
    }
}

@keyframes invoice-history-cloud-3 {
    from {
        transform: translate(3%, -5%);
    }

    to {
        transform: translate(-7%, 6%);
    }
}

@-webkit-keyframes invoice-history-cloud-3 {
    from {
        -webkit-transform: translate(3%, -5%);
    }

    to {
        -webkit-transform: translate(-7%, 6%);
    }
}

@keyframes invoice-history-cloud-4 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(8%, 0%);
    }
}

@-webkit-keyframes invoice-history-cloud-4 {
    from {
        -webkit-transform: translate(-8%, 0%);
    }

    to {
        -webkit-transform: translate(8%, 0%);
    }
}

@keyframes invoice-history-cloud-5 {
    from {
        transform: translate(5%, 4%);
    }

    to {
        transform: translate(-8%, -4%);
    }
}

@-webkit-keyframes invoice-history-cloud-5 {
    from {
        -webkit-transform: translate(5%, 4%);
    }

    to {
        -webkit-transform: translate(-8%, -4%);
    }
}

@keyframes invoice-history-cloud-6 {
    from {
        transform: translate(0%, -8%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@-webkit-keyframes invoice-history-cloud-6 {
    from {
        -webkit-transform: translate(0%, -8%);
    }

    to {
        -webkit-transform: translate(0%, 6%);
    }
}

@keyframes invoice-history-cloud-7 {
    from {
        transform: translate(-8%, 6%);
    }

    to {
        transform: translate(5%, -5%);
    }
}

@-webkit-keyframes invoice-history-cloud-7 {
    from {
        -webkit-transform: translate(-8%, 6%);
    }

    to {
        -webkit-transform: translate(5%, -5%);
    }
}

@keyframes invoice-history-cloud-8 {
    from {
        transform: translate(5%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

@-webkit-keyframes invoice-history-cloud-8 {
    from {
        -webkit-transform: translate(5%, 0%);
    }

    to {
        -webkit-transform: translate(-5%, 0%);
    }
}

@keyframes invoice-history-cloud-9 {
    from {
        transform: translate(-5%, -4%);
    }

    to {
        transform: translate(5%, 6%);
    }
}

@-webkit-keyframes invoice-history-cloud-9 {
    from {
        -webkit-transform: translate(-5%, -4%);
    }

    to {
        -webkit-transform: translate(5%, 6%);
    }
}

.add-funds-page .invoice-history-nodata .clipart-block .clipart-invoice-history {
    display: block;
    background: url("../../Content/Images/PaymentMethods/clipart-invoice-history.svg") no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    width: 45%;
    height: 45%;
    top: 22%;
    left: 27%;
    -webkit-animation: invoice-history 1.3s ease-in-out infinite alternate;
    animation: invoice-history 1.3s ease-in-out infinite alternate;
}

@keyframes invoice-history {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(-9%);
    }
}

@-webkit-keyframes invoice-history {
    from {
        -webkit-transform: translateY(0%);
    }

    to {
        -webkit-transform: translateY(-9%);
    }
}

.add-funds-page .invoice-history-nodata .clipart-block .clipart-shadow {
    display: block;
    background-color: rgba(0, 0, 0, 0.15);
    position: absolute;
    z-index: 1;
    width: 43%;
    height: 4%;
    top: 70%;
    left: 32%;
    border-radius: 50%;
    -webkit-animation: invoice-history-shadow 1.3s ease-in-out infinite alternate;
    animation: invoice-history-shadow 1.3s ease-in-out infinite alternate;
}

@keyframes invoice-history-shadow {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.8);
        opacity: 0.7;
    }
}

@-webkit-keyframes invoice-history-shadow {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(0.8);
        opacity: 0.7;
    }
}

@media (max-width: 767px) {
    .add-funds-page .invoice-history-nodata {
        width: 100%;
    }

        .add-funds-page .invoice-history-nodata h3 {
            font-size: 18px;
            font-weight: 700;
        }
}

@media (max-width: 450px) {
    .add-funds-page .invoice-history-nodata .clipart-block {
        width: 150px;
        height: 150px;
    }
}
/* #endregion ------------------------- /Invoice History - No Data ------------------------------------ */
/* #region ------------------------------- Invoice History Data --------------------------------------- */
.invoice-history-data .records-count {
    font-size: 14px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 20px;
}

    .invoice-history-data .records-count bdi {
        padding-left: 3px;
        padding-right: 3px;
    }

.invoice-history-data .table .badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: var(--radius-4);
}

    .invoice-history-data .table .badge.badge-success {
        background-color: #E6F4ED;
        color: var(--color-text-primary);
    }

    .invoice-history-data .table .badge.badge-warning {
        background-color: #FFF9C5;
        color: var(--color-text-muted);
    }

    .invoice-history-data .table .badge.badge-danger {
        background-color: #FBCFCF;
        color: var(--color-text-danger);
    }

.invoice-history-data .table tr > td:nth-child(5) {
    width: 300px;
}

    .invoice-history-data .table tr > td:nth-child(5) .description span,
    .invoice-history-data .table tr > td:nth-child(5) .description a {
        width: 100%;
        display: block;
        padding-top: 2px;
        padding-bottom: 2px;
    }

@media (max-width: 991px) {

    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(1) .caption,
    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(1) .description {
        padding-right: 0px;
        padding-left: 5px;
    }

    .invoice-history-data .table tr > td {
        vertical-align: top !important;
    }

    .invoice-history-data .new-table.table > tbody > tr {
        padding-top: 0px;
        padding-bottom: 0px;
        font-size: 0px;
    }

    .invoice-history-data .table .caption {
        text-transform: uppercase;
        font-weight: 700;
        color: var(--color-text-muted);
    }

    .invoice-history-data .table .description {
        font-weight: 400;
    }

    .invoice-history-data .table tr > td:nth-child(1) {
        width: 100%;
        border-bottom: 1px solid #DDDDDD;
        text-align: left;
        padding: 10px 20px 10px 20px;
        margin-bottom: 20px;
    }

    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(1) {
        text-align: right;
    }

    .invoice-history-data .table tr > td:nth-child(1) .caption,
    .invoice-history-data .table tr > td:nth-child(1) .description {
        display: inline-block;
        width: auto;
    }

    .invoice-history-data .table tr > td:nth-child(2),
    .invoice-history-data .table tr > td:nth-child(3),
    .invoice-history-data .table tr > td:nth-child(4) {
        width: 33% !important;
        display: inline-block;
        font-size: 0px;
    }

        .invoice-history-data .table tr > td:nth-child(2) .caption,
        .invoice-history-data .table tr > td:nth-child(2) .description,
        .invoice-history-data .table tr > td:nth-child(3) .caption,
        .invoice-history-data .table tr > td:nth-child(3) .description,
        .invoice-history-data .table tr > td:nth-child(4) .caption,
        .invoice-history-data .table tr > td:nth-child(4) .description {
            display: block;
            width: 100%;
            text-align: center;
            padding-left: 0px;
            padding-right: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
        }

        .invoice-history-data .table tr > td:nth-child(2) .description,
        .invoice-history-data .table tr > td:nth-child(3) .description {
            font-size: 24px;
            font-weight: 700;
        }

    .invoice-history-data .table tr > td:nth-child(2),
    .invoice-history-data .table tr > td:nth-child(3) {
        border-right: 1px solid #DDDDDD;
    }

    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(2),
    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(3) {
        border-right: 0px none transparent;
        border-left: 1px solid #DDDDDD;
    }

    .invoice-history-data .table tr > td:nth-child(5),
    .invoice-history-data .table tr > td:nth-child(6) {
        display: inline-block;
        width: 50% !important;
        border-top: 1px solid #DDDDDD;
        margin-top: 20px;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }

        .invoice-history-data .table tr > td:nth-child(5) .caption,
        .invoice-history-data .table tr > td:nth-child(5) .description,
        .invoice-history-data .table tr > td:nth-child(6) .caption,
        .invoice-history-data .table tr > td:nth-child(6) .description {
            display: block;
            text-align: center;
            width: 100%;
            padding-top: 3px;
            padding-bottom: 3px;
            padding-left: 0px;
            padding-right: 0px;
        }
}

@media (max-width: 767px) {
    .invoice-history-data .table tr > td:nth-child(1) .caption,
    .invoice-history-data .table tr > td:nth-child(2) .caption,
    .invoice-history-data .table tr > td:nth-child(3) .caption,
    .invoice-history-data .table tr > td:nth-child(4) .caption,
    .invoice-history-data .table tr > td:nth-child(5) .caption,
    .invoice-history-data .table tr > td:nth-child(6) .caption {
        font-size: 10px;
    }

    .invoice-history-data .table tr > td:nth-child(5) .caption,
    .invoice-history-data .table tr > td:nth-child(6) .caption {
        padding-bottom: 10px;
    }

    .invoice-history-data .table tr > td:nth-child(2) .description,
    .invoice-history-data .table tr > td:nth-child(3) .description {
        font-size: 18px;
        padding-top: 3px;
        padding-bottom: 2px;
    }
}

@media (max-width: 499px) {
    .invoice-history-data .table tr > td:nth-child(2),
    .invoice-history-data .table tr > td:nth-child(3),
    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(2),
    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(3) {
        border-right: 0px none transparent;
        border-left: 0px none transparent;
    }

    .invoice-history-data .table tr > td:nth-child(2),
    .invoice-history-data .table tr > td:nth-child(3),
    .invoice-history-data .table tr > td:nth-child(4) {
        width: 100% !important;
        display: block;
        text-align: left;
        padding-left: 20px;
    }

    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(2),
    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(3),
    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(4) {
        text-align: right;
        padding-left: 0px;
        padding-right: 20px;
    }

    .invoice-history-data .table tr > td:nth-child(5),
    .invoice-history-data .table tr > td:nth-child(6) {
        width: 100% !important;
    }

    .invoice-history-data .table tr > td:nth-child(6) {
        margin-top: 0px;
    }

    .invoice-history-data .table tr > td:nth-child(2) .caption,
    .invoice-history-data .table tr > td:nth-child(2) .description,
    .invoice-history-data .table tr > td:nth-child(3) .caption,
    .invoice-history-data .table tr > td:nth-child(3) .description,
    .invoice-history-data .table tr > td:nth-child(4) .caption,
    .invoice-history-data .table tr > td:nth-child(4) .description {
        display: inline-block;
        width: auto;
    }

    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(2) .caption,
    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(2) .description,
    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(3) .caption,
    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(3) .description,
    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(4) .caption,
    *[dir='rtl'] .invoice-history-data .table tr > td:nth-child(4) .description {
        padding-left: 5px;
    }

    .invoice-history-data .table tr > td:nth-child(2) .description,
    .invoice-history-data .table tr > td:nth-child(3) .description,
    .invoice-history-data .table tr > td:nth-child(4) .description {
        font-size: 14px;
        font-weight: 400;
        padding-left: 5px;
    }

    .invoice-history-data .table tr > td:nth-child(1) {
        margin-bottom: 8px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .invoice-history-data .table tr > td:nth-child(5) {
        margin-top: 8px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .invoice-history-data .table tr > td:nth-child(6) {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}
/* #endregion --------------------------- /Invoice History Data --------------------------------------- */
/* #endregion ================================== /Add Funds =========================================== */
/* #region ====================================== Ad Create ============================================ */
.weight-selection-area {
    display: table;
    width: 100%;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    table-layout: fixed;
    margin-top: 20px;
    margin-bottom: 20px;
}

    .weight-selection-area > * {
        display: table-row;
    }

        .weight-selection-area > * > * {
            display: table-cell;
            vertical-align: top;
            padding-top: 20px;
            padding-bottom: 20px;
        }

    .weight-selection-area h5 {
        display: block;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .weight-selection-area .weight-block {
        display: block;
        width: 100%;
        position: relative;
        font-size: 0px;
        margin-top: 20px;
        margin-bottom: 10px;
    }

        .weight-selection-area .weight-block .weight-item {
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
            margin-bottom: 5px;
            font-size: 14px;
            font-weight: 500;
            opacity: 1;
            -webkit-transition: opacity 0.2s ease-in-out;
            transition: opacity 0.2s ease-in-out;
        }

            .weight-selection-area .weight-block .weight-item:hover {
                opacity: 0.8;
                -webkit-transition: opacity 0.2s ease-in-out;
                transition: opacity 0.2s ease-in-out;
            }

            .weight-selection-area .weight-block .weight-item input[type="radio"] {
                display: none;
            }

                .weight-selection-area .weight-block .weight-item input[type="radio"] + .panel {
                    display: block;
                    width: 100%;
                    height: 100%;
                    background-color: #E7E7E7;
                    border-radius: var(--radius-4);
                    padding: 12px 15px 12px 14px;
                    cursor: pointer;
                    user-select: none;
                }

                .weight-selection-area .weight-block .weight-item input[type="radio"]:checked + .panel {
                    background-color: #E6F4ED;
                }


            .weight-selection-area .weight-block .weight-item.active .panel {
                background-color: var(--color-bg-primary) !important;
                color: #ffffff;
            }

    .weight-selection-area .clipart-block {
        width: 130px;
    }

        .weight-selection-area .clipart-block .clipart {
            display: block;
            width: 100px;
            height: 100px;
            position: relative;
        }

            .weight-selection-area .clipart-block .clipart .clipart-cloud-1,
            .weight-selection-area .clipart-block .clipart .clipart-cloud-2,
            .weight-selection-area .clipart-block .clipart .clipart-cloud-3,
            .weight-selection-area .clipart-block .clipart .clipart-cloud-4,
            .weight-selection-area .clipart-block .clipart .clipart-cloud-5,
            .weight-selection-area .clipart-block .clipart .clipart-cloud-6,
            .weight-selection-area .clipart-block .clipart .clipart-cloud-7,
            .weight-selection-area .clipart-block .clipart .clipart-cloud-8,
            .weight-selection-area .clipart-block .clipart .clipart-cloud-9,
            .weight-selection-area .clipart-block .clipart .clipart-cloud-10,
            .weight-selection-area .clipart-block .clipart .clipart-cloud-11 {
                position: absolute;
                border-radius: 50%;
                z-index: 1;
                display: block;
                background-color: #F2F2F2;
            }

            .weight-selection-area .clipart-block .clipart .clipart-cloud-1 {
                width: 58%;
                height: 58%;
                top: 4%;
                left: 14%;
                animation: weight-cloud-1 1.2s ease-in-out infinite alternate;
                -webkit-animation: weight-cloud-1 1.2s ease-in-out infinite alternate;
            }

            .weight-selection-area .clipart-block .clipart .clipart-cloud-2 {
                width: 35%;
                height: 35%;
                top: 7%;
                left: 52%;
                animation: weight-cloud-2 1.4s ease-in-out infinite alternate;
                -webkit-animation: weight-cloud-2 1.4s ease-in-out infinite alternate;
            }

            .weight-selection-area .clipart-block .clipart .clipart-cloud-3 {
                width: 27%;
                height: 27%;
                top: 16%;
                left: 73%;
                animation: weight-cloud-3 1.3s ease-in-out infinite alternate;
                -webkit-animation: weight-cloud-3 1.3s ease-in-out infinite alternate;
            }

            .weight-selection-area .clipart-block .clipart .clipart-cloud-4 {
                width: 37%;
                height: 37%;
                top: 28%;
                left: 59%;
                animation: weight-cloud-4 1.5s ease-in-out infinite alternate;
                -webkit-animation: weight-cloud-4 1.5s ease-in-out infinite alternate;
            }

            .weight-selection-area .clipart-block .clipart .clipart-cloud-5 {
                width: 37%;
                height: 37%;
                top: 55%;
                left: 60%;
                animation: weight-cloud-5 1.5s ease-in-out infinite alternate;
                -webkit-animation: weight-cloud-5 1.5s ease-in-out infinite alternate;
            }

            .weight-selection-area .clipart-block .clipart .clipart-cloud-6 {
                width: 32%;
                height: 32%;
                top: 55%;
                left: 40%;
                animation: weight-cloud-6 1.2s ease-in-out infinite alternate;
                -webkit-animation: weight-cloud-6 1.2s ease-in-out infinite alternate;
            }

            .weight-selection-area .clipart-block .clipart .clipart-cloud-7 {
                width: 30%;
                height: 30%;
                top: 65%;
                left: 21%;
                animation: weight-cloud-7 1.2s ease-in-out infinite alternate;
                -webkit-animation: weight-cloud-7 1.2s ease-in-out infinite alternate;
            }

            .weight-selection-area .clipart-block .clipart .clipart-cloud-8 {
                width: 20%;
                height: 20%;
                top: 65%;
                left: 8%;
                animation: weight-cloud-8 1.4s ease-in-out infinite alternate;
                -webkit-animation: weight-cloud-8 1.4s ease-in-out infinite alternate;
            }

            .weight-selection-area .clipart-block .clipart .clipart-cloud-9 {
                width: 40%;
                height: 40%;
                top: 34%;
                left: 1%;
                animation: weight-cloud-9 1.6s ease-in-out infinite alternate;
                -webkit-animation: weight-cloud-9 1.6s ease-in-out infinite alternate;
            }

            .weight-selection-area .clipart-block .clipart .clipart-cloud-10 {
                width: 20%;
                height: 20%;
                top: 25%;
                left: 4%;
                animation: weight-cloud-10 1.1s ease-in-out infinite alternate;
                -webkit-animation: weight-cloud-10 1.1s ease-in-out infinite alternate;
            }

            .weight-selection-area .clipart-block .clipart .clipart-cloud-11 {
                width: 60%;
                height: 60%;
                top: 18%;
                left: 22%;
            }

@keyframes weight-cloud-1 {
    from {
        transform: translate(-1%, -5%);
    }

    to {
        transform: translate(1%, 5%);
    }
}

@-webkit-keyframes weight-cloud-1 {
    from {
        -webkit-transform: translate(-1%, -5%);
    }

    to {
        -webkit-transform: translate(1%, 5%);
    }
}

@keyframes weight-cloud-2 {
    from {
        transform: translate(1%, 5%);
    }

    to {
        transform: translate(-1%, -8%);
    }
}

@-webkit-keyframes weight-cloud-2 {
    from {
        -webkit-transform: translate(1%, 5%);
    }

    to {
        -webkit-transform: translate(-1%, -8%);
    }
}

@keyframes weight-cloud-3 {
    from {
        transform: translate(10%, -10%);
    }

    to {
        transform: translate(-10%, 10%);
    }
}

@-webkit-keyframes weight-cloud-3 {
    from {
        -webkit-transform: translate(10%, -10%);
    }

    to {
        -webkit-transform: translate(-10%, 10%);
    }
}

@keyframes weight-cloud-4 {
    from {
        transform: translate(-10%, 0%);
    }

    to {
        transform: translate(10%, 0%);
    }
}

@-webkit-keyframes weight-cloud-4 {
    from {
        -webkit-transform: translate(-10%, 0%);
    }

    to {
        -webkit-transform: translate(10%, 0%);
    }
}

@keyframes weight-cloud-5 {
    from {
        transform: translate(8%, 5%);
    }

    to {
        transform: translate(-8%, -5%);
    }
}

@-webkit-keyframes weight-cloud-5 {
    from {
        -webkit-transform: translate(8%, 5%);
    }

    to {
        -webkit-transform: translate(-8%, -5%);
    }
}

@keyframes weight-cloud-6 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@-webkit-keyframes weight-cloud-6 {
    from {
        -webkit-transform: translate(0%, -6%);
    }

    to {
        -webkit-transform: translate(0%, 6%);
    }
}

@keyframes weight-cloud-7 {
    from {
        transform: translate(-1%, 8%);
    }

    to {
        transform: translate(1%, -8%);
    }
}

@-webkit-keyframes weight-cloud-7 {
    from {
        -webkit-transform: translate(-1%, 8%);
    }

    to {
        -webkit-transform: translate(1%, -8%);
    }
}

@keyframes weight-cloud-8 {
    from {
        transform: translate(8%, -8%);
    }

    to {
        transform: translate(-8%, 8%);
    }
}

@-webkit-keyframes weight-cloud-8 {
    from {
        -webkit-transform: translate(8%, -8%);
    }

    to {
        -webkit-transform: translate(-8%, 8%);
    }
}

@keyframes weight-cloud-9 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(8%, 0%);
    }
}

@-webkit-keyframes weight-cloud-9 {
    from {
        -webkit-transform: translate(-8%, 0%);
    }

    to {
        -webkit-transform: translate(8%, 0%);
    }
}

@keyframes weight-cloud-10 {
    from {
        transform: translate(7%, 6%);
    }

    to {
        transform: translate(-7%, -6%);
    }
}

@-webkit-keyframes weight-cloud-10 {
    from {
        -webkit-transform: translate(7%, 6%);
    }

    to {
        -webkit-transform: translate(-7%, -6%);
    }
}


.weight-selection-area .clipart-block .clipart-truck {
    display: block;
    position: absolute;
    top: 9%;
    left: 17%;
    width: 70%;
    height: 70%;
    background: url("../../Content/Images/Images/clipart-deliverytruck.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    -webkit-animation: weight-delivery-truck 0.6s ease-in-out infinite alternate;
    animation: weight-delivery-truck 0.6s ease-in-out infinite alternate;
}

@keyframes weight-delivery-truck {
    from {
        transform: translateY(-1.5%);
    }

    to {
        transform: translateY(1.5%);
    }
}

@-webkit-keyframes weight-delivery-truck {
    from {
        -webkit-transform: translateY(-1.5%);
    }

    to {
        -webkit-transform: translateY(1.5%);
    }
}

.weight-selection-area .clipart-block .clipart-wheel-1 {
    display: block;
    position: absolute;
    top: 52%;
    left: 64%;
    width: 17%;
    height: 17%;
    background: url("../../Content/Images/Images/clipart-deliverytruck-wheel.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    -webkit-animation: weight-truck-wheel 0.3s linear infinite;
    animation: weight-truck-wheel 0.3s linear infinite;
}

.weight-selection-area .clipart-block .clipart-wheel-2 {
    display: block;
    position: absolute;
    top: 52%;
    left: 23.4%;
    width: 17%;
    height: 17%;
    background: url("../../Content/Images/Images/clipart-deliverytruck-wheel.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    -webkit-animation: weight-truck-wheel 0.3s linear infinite;
    animation: weight-truck-wheel 0.3s linear infinite;
}

@keyframes weight-truck-wheel {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes weight-truck-wheel {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.weight-selection-area .clipart-block .clipart-shadow {
    display: block;
    width: 70%;
    height: 6%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 65px;
    left: 17px;
    z-index: 1;
    -webkit-animation: weight-truck-shadow 0.6s ease-in-out infinite alternate;
    animation: weight-truck-shadow 0.6s ease-in-out infinite alternate;
}

@keyframes weight-truck-shadow {
    from {
        opacity: 0.8;
        transform: scaleX(0.9);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@-webkit-keyframes weight-truck-shadow {
    from {
        opacity: 0.8;
        -webkit-transform: scaleX(0.9);
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
    }
}

@media (max-width: 767px) {
    .weight-selection-area {
        display: block;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
    }

        .weight-selection-area > * {
            display: block;
        }

            .weight-selection-area > * > * {
                display: block;
                padding-top: 20px;
                padding-bottom: 20px;
            }

        .weight-selection-area .clipart-block {
            display: none;
        }
}



/* #region ------------- Mobile Version ------------ */
.mobile .control-groups.boosting-services {
    border: 0px none transparent;
    background: transparent;
    padding-inline: 8px;
}

.mobile .boosting-services .ad-temlate-title-h1 {
    margin-block-start: 32px;
    margin-block-end: 0px;
    padding-block: 0px;
    line-height: 100%;
}

.mobile .boosting-services .panel-checkbox .container {
    background: rgba(0, 0, 0, 0.02);
    border-radius: var(--radius-16);
    padding-block: 16px;
}

.mobile .boosting-services .panel-checkbox input[type=checkbox]:checked ~ span.container,
.mobile .boosting-services .panel-checkbox input[type=radio]:checked ~ span.container {
    border: 0px none transparent;
    background: rgba(52, 148, 106, 0.1);
}


.mobile .boosting-services .clipart .cloud-1,
.mobile .boosting-services .clipart .cloud-10,
.mobile .boosting-services .clipart .cloud-2,
.mobile .boosting-services .clipart .cloud-3,
.mobile .boosting-services .clipart .cloud-4,
.mobile .boosting-services .clipart .cloud-5,
.mobile .boosting-services .clipart .cloud-6,
.mobile .boosting-services .clipart .cloud-7,
.mobile .boosting-services .clipart .cloud-8,
.mobile .boosting-services .clipart .cloud-9 {
    background-color: rgba(242, 242, 242);
}

.mobile .boosting-services .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-1,
.mobile .boosting-services .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-2,
.mobile .boosting-services .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-3,
.mobile .boosting-services .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-4,
.mobile .boosting-services .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-5,
.mobile .boosting-services .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-6,
.mobile .boosting-services .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-7,
.mobile .boosting-services .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-8,
.mobile .boosting-services .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-9,
.mobile .boosting-services .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-10,
.mobile .boosting-services .panel-checkbox input[type=radio]:checked ~ span.container .cloud-1,
.mobile .boosting-services .panel-checkbox input[type=radio]:checked ~ span.container .cloud-2,
.mobile .boosting-services .panel-checkbox input[type=radio]:checked ~ span.container .cloud-3,
.mobile .boosting-services .panel-checkbox input[type=radio]:checked ~ span.container .cloud-4,
.mobile .boosting-services .panel-checkbox input[type=radio]:checked ~ span.container .cloud-5,
.mobile .boosting-services .panel-checkbox input[type=radio]:checked ~ span.container .cloud-6,
.mobile .boosting-services .panel-checkbox input[type=radio]:checked ~ span.container .cloud-7,
.mobile .boosting-services .panel-checkbox input[type=radio]:checked ~ span.container .cloud-8,
.mobile .boosting-services .panel-checkbox input[type=radio]:checked ~ span.container .cloud-9,
.mobile .boosting-services .panel-checkbox input[type=radio]:checked ~ span.container .cloud-10 {
    background-color: #ffffff;
}

.mobile .boosting-services .switch-inline label {
    display: flex;
    align-items: center;
}

    .mobile .boosting-services .switch-inline label i {
        flex-shrink: 0;
    }

        .mobile .boosting-services .switch-inline label i + span {
            line-height: 140%;
        }

.mobile .boosting-services .panel-checkbox .image-block {
    display: block;
    float: none;
    margin: 0px auto;
    padding-block: 0px;
}

.mobile .boosting-services .panel-checkbox .check-block {
    position: absolute;
    inset-inline-end: 0px;
    inset-block-start: 16px;
}

.mobile .boosting-services .panel-checkbox .description-block {
    display: flex;
    flex-direction: column;
    padding-inline: 16px;
    padding-block-start: 4px;
    padding-block-end: 0px;
    gap: 4px;
}

    .mobile .boosting-services .panel-checkbox .description-block b {
        font-size: 20px !important;
        display: block;
        text-align: center;
    }

/* #endregion ---------/ Mobile Version ------------ */
/* #endregion ================================= /Ad Create ============================================ */
/* #region ===================================== Edit Ad ============================================== */
.mobile .control-groups.noback.renew-ad {
    border: 0px none transparent;
    padding-inline: 8px;
    padding-block-start: 16px;
}

.mobile .renew-ad hr {
    border: 0px none transparent;
}

.mobile .renew-ad .control-groups {
    border: 0px none transparent !important;
    background: transparent !important;
}

.mobile .renew-ad h3 {
    margin-block-start: 32px;
    margin-block-end: 0px;
    padding-block: 0px;
    line-height: 100%;
    font-weight: 400;
}

.mobile .renew-ad .panel-checkbox .container {
    background: rgba(0, 0, 0, 0.02);
    border-radius: var(--radius-16);
    padding-block: 16px;
}

.mobile .renew-ad .panel-checkbox input[type=checkbox]:checked ~ span.container,
.mobile .renew-ad .panel-checkbox input[type=radio]:checked ~ span.container {
    border: 0px none transparent;
    background: rgba(52, 148, 106, 0.1);
}

.mobile .renew-ad .clipart .cloud-1,
.mobile .renew-ad .clipart .cloud-10,
.mobile .renew-ad .clipart .cloud-2,
.mobile .renew-ad .clipart .cloud-3,
.mobile .renew-ad .clipart .cloud-4,
.mobile .renew-ad .clipart .cloud-5,
.mobile .renew-ad .clipart .cloud-6,
.mobile .renew-ad .clipart .cloud-7,
.mobile .renew-ad .clipart .cloud-8,
.mobile .renew-ad .clipart .cloud-9 {
    background-color: rgba(242, 242, 242);
}

.mobile .renew-ad .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-1,
.mobile .renew-ad .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-2,
.mobile .renew-ad .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-3,
.mobile .renew-ad .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-4,
.mobile .renew-ad .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-5,
.mobile .renew-ad .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-6,
.mobile .renew-ad .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-7,
.mobile .renew-ad .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-8,
.mobile .renew-ad .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-9,
.mobile .renew-ad .panel-checkbox input[type=checkbox]:checked ~ span.container .cloud-10,
.mobile .renew-ad .panel-checkbox input[type=radio]:checked ~ span.container .cloud-1,
.mobile .renew-ad .panel-checkbox input[type=radio]:checked ~ span.container .cloud-2,
.mobile .renew-ad .panel-checkbox input[type=radio]:checked ~ span.container .cloud-3,
.mobile .renew-ad .panel-checkbox input[type=radio]:checked ~ span.container .cloud-4,
.mobile .renew-ad .panel-checkbox input[type=radio]:checked ~ span.container .cloud-5,
.mobile .renew-ad .panel-checkbox input[type=radio]:checked ~ span.container .cloud-6,
.mobile .renew-ad .panel-checkbox input[type=radio]:checked ~ span.container .cloud-7,
.mobile .renew-ad .panel-checkbox input[type=radio]:checked ~ span.container .cloud-8,
.mobile .renew-ad .panel-checkbox input[type=radio]:checked ~ span.container .cloud-9,
.mobile .renew-ad .panel-checkbox input[type=radio]:checked ~ span.container .cloud-10 {
    background-color: #ffffff;
}

.mobile .renew-ad .switch-inline label {
    display: flex;
    align-items: center;
}

    .mobile .renew-ad .switch-inline label i {
        flex-shrink: 0;
    }

        .mobile .renew-ad .switch-inline label i + span {
            line-height: 140%;
        }

.mobile .renew-ad .panel-checkbox .image-block {
    display: block;
    float: none;
    margin: 0px auto;
    padding-block: 0px;
}

.mobile .renew-ad .panel-checkbox .check-block {
    position: absolute;
    inset-inline-end: 0px;
    inset-block-start: 16px;
}

.mobile .renew-ad .panel-checkbox .description-block {
    display: flex;
    flex-direction: column;
    padding-inline: 16px;
    padding-block-start: 4px;
    padding-block-end: 0px;
    gap: 4px;
}

    .mobile .renew-ad .panel-checkbox .description-block b {
        font-size: 20px !important;
        display: block;
        text-align: center;
    }

.mobile .no-decoration {
    border: 0px;
    background: transparent;
}

.mobile h2 {
    padding-inline-start: 12px;
}

.mobile .renew-ad strong {
    font-size: 16px;
    padding-inline-start: 4px;
    line-height: 130%;
    display: block;
}

.mobile .renew-ad .controls {
    position: relative !important;
    padding: 0px !important;
    margin: 0px !important;
    padding-inline-start: 24px !important;
}

    .mobile .renew-ad .controls input {
        position: absolute;
        inset-inline-start: 0px;
        inset-block-start: 5px;
    }



.mobile .renew-ad .control-group {
    margin-block: 12px;
}

/* #region --------------- Single Password Section --------------- */
.single-password {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-block-start: var(--gap-100);
    margin-block-end: var(--gap-100);
}

    .single-password .password-container {
        display: block;
        max-width: 480px;
        margin-block-start: var(--gap-64);
    }

    .single-password h3 {
        font-size: 18px;
        font-weight: 700;
        color: var(--color-text-basic);
        line-height: 130%;
        margin-block-start: var(--gap-16);
        margin-block-end: var(--gap-16);
    }

    .single-password p {
        font-size: 14px;
        font-weight: 400;
        color: var(--color-text-muted);
        line-height: 130%;
        margin-block-end: var(--gap-24);
    }

@media (max-width: 767px) {
    .single-password {
        margin-block-start: var(--gap-64);
        margin-block-end: var(--gap-64);
    }

        .single-password .password-container {
            margin-block-start: var(--gap-32);
        }
}



/* #endregion -----------/ Single Password Section --------------- */

/* #endregion =================================/ Edit Ad ============================================== */
/* #region ================================= Notifications Area ======================================== */
.notifications-area:empty {
    display: none !important;
}

.notifications-area {
    display: block;
    width: 380px;
    bottom: 0px;
    left: 0px;
    position: fixed;
    z-index: 99;
    top: auto;
}

*[dir='rtl'] .notifications-area {
    left: auto;
    right: 0px;
}


.notifications-area > .inner {
    display: block;
    vertical-align: bottom;
    position: relative;
}

.notifications-area .item {
    display: block;
    position: relative;
    border-radius: var(--radius-4);
    background-color: rgba(33, 37, 41, 0.9);
    color: #FFFFFF;
    padding: 0px;
    vertical-align: bottom;
    width: calc(100% - 20px);
    float: right;
    box-shadow: rgba(0, 0, 0, 0.7) 0px 4px 30px;
    margin-bottom: 10px;
    font-size: 0px;
}

*[dir='rtl'] .notifications-area .item {
    float: left;
}

.notifications-area .item:after {
    content: '';
    clear: both;
    float: none;
}

.notifications-area .item .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 10px 20px 20px 20px;
}

.notifications-area .item .btn-close {
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 14px;
    padding: 5px;
    border: 0px none transparent;
    background-color: transparent;
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

*[dir='rtl'] .notifications-area .item .btn-close {
    right: auto;
    left: 12px;
}


.notifications-area .item .btn-close:hover {
    opacity: 0.6;
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.notifications-area .item h5 {
    font-size: 14px;
    font-weight: 700;
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 18px;
    margin-right: 30px;
}

*[dir='rtl'] .notifications-area .item h5 {
    margin-right: 0px;
    margin-left: 30px;
}

.notifications-area .item:before {
    display: block;
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border-right: 10px solid rgba(33, 37, 41, 0.9);
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid transparent;
    z-index: 5;
    top: 14px;
    left: -20px;
}

*[dir='rtl'] .notifications-area .item:before {
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    border-left: 10px solid rgba(33, 37, 41, 0.9);
    border-bottom: 10px solid transparent;
    left: 0px;
    right: -20px;
}

.notifications-area .item p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 400;
    padding-top: 10px;
}

.notifications-area .notification-image {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    height: 100px;
    font-size: 14px;
    border-radius: var(--radius-4);
    border: 2px solid #FFFFFF;
    margin-top: 15px;
    background-color: #DDDDDD;
    position: relative;
}

.notifications-area .notification-info-block {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 100px);
    font-size: 14px;
    margin-top: 15px;
    padding-left: 10px;
}

*[dir='rtl'] .notifications-area .notification-info-block {
    padding-right: 10px;
    padding-left: 0px;
}

.notifications-area .notification-image .ci-pazar {
    font-size: 48px;
    position: absolute;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    z-index: 1;
}

.notifications-area a {
    color: #FFFFFF;
    text-decoration: underline;
}

.notifications-area .item .ad-caption {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 22px;
}

.notifications-area .item .ad-price {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
}

.notifications-area .notification-image .image {
    font-size: 48px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--radius-4);
    z-index: 1;
}

*[dir='rtl'] .notifications-area .notification-image .image {
    left: auto;
    right: 0px;
}

.notifications-area .item .message-avatar-block {
    display: inline-block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 14px;
    margin-top: 10px;
}

.notifications-area .notification-info-block.message {
    width: calc(100% - 64px);
    margin-top: 8px;
}

@media (max-width: 991px) {
    .notifications-area {
        display: none;
    }
}
/* #endregion ============================ /Notifications Area ======================================== */
/* #region ===================================== Ad Details ============================================ */
.ad-details-page {
    padding-block-start: 20px !important;
}

@media (max-width: 991px) {
    .ad-details-page {
        padding-block-start: 60px !important;
    }
}

.ad-details-page .ad-twosides-container {
    display: table;
    width: 100%;
    table-layout: fixed;
}

    .ad-details-page .ad-twosides-container > * {
        display: table-row;
    }

        .ad-details-page .ad-twosides-container > * > * {
            display: table-cell;
            vertical-align: top;
        }

    .ad-details-page .ad-twosides-container .left-side {
        padding-right: 20px;
    }

    .ad-details-page .ad-twosides-container .right-side {
        width: 300px;
    }

*[dir='rtl'] .ad-details-page .ad-twosides-container .left-side {
    padding-right: 0px;
    padding-left: 20px;
}

.ad-details-page .ad-publish-info-area {
    margin-bottom: 5px;
}


.ad-details-page .hashtags-area {
    margin-top: 20px;
}

    .ad-details-page .hashtags-area:empty {
        margin-top: 0px !important;
    }


    .ad-details-page .hashtags-area .tag {
        display: inline-block;
        text-decoration: none;
        font-size: 14px;
        color: var(--color-text-muted);
        line-height: 130%;
        padding-block: var(--gap-4);
        margin-inline-end: var(--gap-8);
        white-space: nowrap;
        transition: color 0.2s ease;
    }

        .ad-details-page .hashtags-area .tag:hover {
            color: var(--color-text-basic);
            opacity: 1;
            transition: color 0.2s ease;
        }


.ad-details-page .mobile-breadcrumbs-section {
    display: none;
    align-items: center;
    margin-block-end: 8px;
}

    .ad-details-page .mobile-breadcrumbs-section .breadcrumbs {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        height: 100%;
        align-items: center;
        padding: 0px;
    }

        .ad-details-page .mobile-breadcrumbs-section .breadcrumbs::-webkit-scrollbar {
            display: none;
        }

    .ad-details-page .mobile-breadcrumbs-section .company-ad-tag {
        flex-shrink: 0;
    }

    .ad-details-page .mobile-breadcrumbs-section .breadcrumbs > :after {
        display: none;
    }

    .ad-details-page .mobile-breadcrumbs-section .breadcrumbs li {
        white-space: nowrap;
        padding: 0px;
        display: flex;
        padding-inline-end: 8px;
        align-items: center;
    }

        .ad-details-page .mobile-breadcrumbs-section .breadcrumbs li:before {
            content: "/";
            display: flex;
            color: var(--color-text-muted);
            margin-inline-end: 8px;
            height: 100%;
            align-items: center;
        }

        .ad-details-page .mobile-breadcrumbs-section .breadcrumbs li:first-child:before {
            display: none;
        }

.ad-details-page .company-ad-tag {
    display: inline-block;
    background-color: #E6F4ED;
    padding: 8px 12px 8px 12px;
    border-radius: var(--radius-8);
    font-size: 14px;
    color: var(--color-text-primary);
    margin-right: 18px;
}

*[dir='rtl'] .ad-details-page .company-ad-tag {
    margin-left: 20px;
    margin-right: 0px;
}


.ad-details-page .now-viewing-tag {
    display: inline-block;
    background-color: #FCF8E3;
    padding: 8px 12px 8px 12px;
    border-radius: var(--radius-4);
    font-size: 14px;
}

    .ad-details-page .now-viewing-tag bdi,
    .ad-details-page .now-viewing-tag span {
        padding-left: 2px;
        padding-right: 2px;
    }

.ad-details-page .published-date {
    margin-left: 5px;
    line-height: 33px;
}

*[dir='rtl'] .ad-details-page .published-date {
    margin-right: 5px;
    margin-left: 0px;
}

.ad-details-page .published-time {
    margin-left: 5px;
    margin-right: 20px;
    line-height: 33px;
}

*[dir='rtl'] .ad-details-page .published-time {
    margin-left: 20px;
    margin-right: 5px;
}

.favorites-share-area {
    display: flex;
}

.ad-details-page .carousel-indicators li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ad-details-page .seller-contacts {
    padding-block-end: var(--gap-16);
}

@media (max-width: 991px) {
    .ad-details-page .favorites-share-area.desktop {
        display: none !important;
    }
}

.ad-details-page .favorites-share-area {
    display: flex;
    width: 100%;
}

    .ad-details-page .favorites-share-area .views-number {
        display: flex;
        flex-grow: 1;
        gap: 4px;
        align-items: center;
        height: 40px;
    }

        .ad-details-page .favorites-share-area .views-number .ci-pazar-bold {
            font-size: 24px;
        }

    .ad-details-page .favorites-share-area .right-side {
        display: flex;
        flex-shrink: 0;
        width: auto;
    }

        .ad-details-page .favorites-share-area .right-side button {
            display: flex;
            width: 40px;
            height: 40px;
            border: 0px none transparent;
            background: transparent;
            outline: none;
            font-size: 24px;
            justify-content: center;
            align-items: center;
        }

*[dir='rtl'] .ad-details-page .favorites-share-area .right-side button {
    transform: rotateY(180deg);
}

.ad-details-page .save-ad-area {
}

    .ad-details-page .save-ad-area .views-number {
        line-height: 33px;
    }

*[dir='rtl'] .ad-details-page .save-ad-area .views-number {
    float: right;
}


.ad-details-page .save-ad-area .views-number .ci-pazar {
    font-size: 32px;
    margin-right: 5px;
    margin-bottom: 5px;
}

*[dir='rtl'] .ad-details-page .save-ad-area .views-number .ci-pazar {
    margin-left: 5px;
    margin-right: 0px;
}

.ad-details-page .save-ad-area .new-btn {
    float: right;
    text-decoration: none;
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 33px;
}

*[dir='rtl'] .ad-details-page .save-ad-area .new-btn {
    float: left;
}

.ad-details-page .save-ad-area .new-btn.btn-icon-right *[class*='ci-'] {
    font-size: 28px;
    top: calc(50% - 15px);
    left: auto;
    right: 0px;
}


*[dir='rtl'] .ad-details-page .save-ad-area .new-btn.btn-icon-right *[class*='ci-'] {
    font-size: 28px;
    top: calc(50% - 15px);
    left: 0px;
    right: auto;
}

.ad-details-page .addtocart-area {
    padding-block-end: var(--gap-16);
    padding-block-start: var(--gap-32);
}

    .ad-details-page .addtocart-area .new-btn {
        display: flex;
        height: 58px;
        justify-content: center;
        align-items: center;
        padding: 0px;
        position: relative;
    }

    .ad-details-page .addtocart-area .ci-pazar-bold {
        font-size: 24px;
        position: absolute;
        z-index: 1;
        left: var(--gap-12);
        top: 50%;
        transform: translateY(-50%);
    }

*[dir='rtl'] .ad-details-page .addtocart-area .ci-pazar-bold {
    left: auto;
    right: var(--gap-12);
    top: 50%;
    transform: translateY(-50%) rotateY(180deg);
}

.ad-details-page .addtocart-area .ci-shopping-cart {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.ad-details-page .addtocart-area .cart-btn.active .ci-shopping-cart {
    opacity: 0;
    transition: opacity 0.2s ease;
}

*[dir='rtl'] .ad-details-page .addtocart-area .cart-btn .ci-check-circle,
.ad-details-page .addtocart-area .ci-check-circle {
    opacity: 0;
    transform: scale(2) translateY(-25%);
    transition: all 0.2s ease;
}

*[dir='rtl'] .ad-details-page .addtocart-area .cart-btn.active .ci-check-circle,
.ad-details-page .addtocart-area .cart-btn.active .ci-check-circle {
    opacity: 1;
    transform: scale(1) translateY(-50%);
    transition: all 0.2s ease;
}

.ad-details-page .addtocart-area .cart-btn .title {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.ad-details-page .addtocart-area .cart-btn.active .title {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ad-details-page .addtocart-area .cart-btn .title-alternate {
    position: absolute;
    z-index: 1;
    opacity: 0;
    transform: scale(1.5);
    transition: all 0.2s ease;
}

.ad-details-page .addtocart-area .cart-btn.active .title-alternate {
    z-index: 1;
    opacity: 1;
    transform: scale(1);
    transition: all 0.2s ease;
}



.temp-carousel {
    display: block;
    width: 100%;
    height: 480px;
    background-color: var(--color-text-muted);
    color: #FFFFFF;
    text-align: center;
    padding-top: 100px;
    border-radius: var(--radius-4);
}

.ad-details-page h1 {
    font-size: 28px;
    font-weight: 500;
    margin-top: 20px;
}

.ad-details-page h4 {
    font-size: 18px;
    font-weight: 400;
    margin-top: 8px;
    display: inline-block;
}

.ad-details-page .format-money-int {
    margin-right: var(--gap-4);
}

.ad-details-page h4 .format-money {
    margin-inline-end: 5px;
}

.ad-details-page h4 .new-price {
    padding-inline-end: 10px;
}

.ad-details-page h4 > span {
    white-space: nowrap;
    font-weight: 500;
}


.ad-details-page .new-price,
.ad-details-page .old-price {
    font-size: 18px;
}

.ad-details-page .old-price {
    padding-inline-start: var(--gap-12);
}

*[dir='rtl'] .ad-details-page .old-price {
    padding-inline-end: var(--gap-12);
}



.ad-details-page .description-area {
    display: block;
    width: 100%;
    padding-top: 20px;
    word-break: break-word;
}

    .ad-details-page .description-area > span {
        line-height: 23px;
        margin-block: 12px;
        display: inline-block;
    }

.ad-details-page .manage-block-not-logged {
    text-align: center;
}

.ad-details-page .manage-block .new-btn .ci-pazar-bold {
    font-size: 24px;
    position: absolute;
    z-index: 1;
    left: var(--gap-12);
    top: 50%;
    transform: translateY(-50%);
}

*[dir='rtl'] .ad-details-page .manage-block .new-btn .ci-pazar-bold {
    font-size: 24px;
    left: auto;
    right: var(--gap-12);
    top: 50%;
}

.ad-additional-link {
    display: block;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
}

    .ad-additional-link i {
        font-size: 26px;
        margin-right: 8px;
    }

*[dir='rtl'] .ad-additional-link i {
    margin-left: 8px;
    margin-right: 0px;
}

@media (max-width: 991px) {

    .ad-details-page h1 {
        font-size: 28px;
        font-weight: 700;
        margin-top: 4px;
    }

    .ad-details-page .ad-twosides-container {
        display: block;
        width: 100%;
    }


        .ad-details-page .ad-twosides-container > *,
        .ad-details-page .ad-twosides-container > * > * {
            display: block;
            width: 100%;
        }

        .ad-details-page .ad-twosides-container .left-side,
        .ad-details-page .ad-twosides-container .right-side,
        *[dir='rtl'] .ad-details-page .ad-twosides-container .left-side,
        *[dir='rtl'] .ad-details-page .ad-twosides-container .right-side {
            width: 100%;
            padding-left: 0px;
            padding-right: 0px;
        }

    .ad-details-page .ad-publish-info-area {
        display: none;
    }

    .ad-details-page .ad-twosides-container > * > .right-side {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .temp-carousel {
        height: 360px;
    }
}

@media (max-width: 575px) {
    .ad-details-page h1 {
        font-size: 24px;
        font-weight: 700;
        margin-top: 4px;
        margin-block-end: 4px;
    }

    .ad-details-page h4 {
        font-size: 18px;
        font-weight: 400;
        margin-top: 5px;
    }

    .ad-details-page .carousel .custom-photo-gallery {
        height: 480px;
    }

    .ad-details-page .mobile-breadcrumbs-section {
        display: flex;
    }
}

@media (max-width: 479px) {
    .temp-carousel {
        height: 250px;
    }
}

@media (max-width: 419px) {
    .ad-details-page h1 {
        font-size: 20px;
        font-weight: 700;
        margin-top: 6px;
    }

    .ad-details-page h4 {
        font-size: 18px;
        font-weight: 400;
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .ad-details-page .hashtags-area {
        margin-top: 12px;
    }
}

.store .logo-area .default-logo {
    position: relative;
    background-color: #ebebeb;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-4);
}

    .store .logo-area .default-logo i {
        position: absolute;
        font-size: 64px;
        top: calc(50% - 32px);
        left: calc(50% - 32px);
    }

/* #region ------------- Section Store info -------------------- */
.ad-details-page .section-store-info {
    display: block;
    width: 100%;
    margin-block-end: var(--gap-40);
    margin-block-start: var(--gap-32);
}

    .ad-details-page .section-store-info .row-main-part {
        margin-block-start: var(--gap-24);
        display: flex;
        gap: var(--gap-32);
        align-items: center;
    }

    .ad-details-page .section-store-info .store-main {
        width: 50%;
        display: flex;
        gap: var(--gap-16);
        align-items: center;
    }

    .ad-details-page .section-store-info .store-logo-container {
        width: 120px;
        height: 120px;
        border: 1px solid var(--color-border-muted);
        border-radius: 16px;
        overflow: hidden;
        background-color: var(--color-bg-panel);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32px;
        position: relative;
        flex-shrink: 0;
    }

        .ad-details-page .section-store-info .store-logo-container img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            z-index: 1;
        }

    .ad-details-page .section-store-info .store-name-container {
        width: 100%;
    }

        .ad-details-page .section-store-info .store-name-container h3 a {
            font-size: 24px;
            font-weight: 500;
            line-height: 120%;
            color: var(--color-text-basic);
            text-decoration: none;
        }

    .ad-details-page .section-store-info .store-contacts {
        width: 50%;
        display: flex;
        flex-direction: column;
        gap: var(--gap-8);
    }

        .ad-details-page .section-store-info .store-contacts .item {
            display: flex;
            gap: var(--gap-8);
            align-items: center;
            width: 100%;
            flex: 1;
        }

            .ad-details-page .section-store-info .store-contacts .item i {
                flex-shrink: 0;
                font-size: 24px;
            }

            .ad-details-page .section-store-info .store-contacts .item a {
                color: var(--color-text-muted);
                text-decoration: none;
                width: 100%;
            }

            .ad-details-page .section-store-info .store-contacts .item.website a {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

    .ad-details-page .section-store-info .truncator {
        margin-block-start: var(--gap-24);
    }


@media (max-width: 991px) {
    .ad-details-page .section-store-info .row-main-part {
        width: 100%;
        display: block;
    }

    .ad-details-page .section-store-info .store-main {
        width: 100%;
    }

    .ad-details-page .section-store-info .store-contacts {
        width: 100%;
        margin-block-start: var(--gap-16);
        flex: 1;
        flex-wrap: wrap;
    }

        .ad-details-page .section-store-info .store-contacts .item {
            flex-shrink: 0;
        }
}

@media (max-width: 475px) {
    .ad-details-page .section-store-info {
        margin-block-start: var(--gap-32);
    }

        .ad-details-page .section-store-info .store-main {
            flex-direction: column;
            gap: var(--gap-8);
        }

        .ad-details-page .section-store-info .store-logo-container {
            width: 200px;
            height: 200px;
        }

        .ad-details-page .section-store-info .store-name-container {
            text-align: center;
        }
}


/* #endregion ---------/ Section Store info -------------------- */

/* #region --------------- Store Info Area --------------------- */

.ad-details-page .store-info-area {
    width: 100%;
    border-radius: var(--radius-4);
    background-color: transparent;
}

.ad-details-page .store-info-container a {
    display: inline-block;
}

.ad-details-page .store-info-container {
    display: block;
    width: 100%;
    padding-block: 20px;
}

    .ad-details-page .store-info-container h4 {
        display: block;
        font-size: 24px;
        width: 100%;
        margin-block: 24px;
    }

    .ad-details-page .store-info-container pre {
        line-height: 23px;
        font-family: "Manrope", Arial;
        white-space: pre-wrap; /* css-3 */
        white-space: -moz-pre-wrap; /* Mozilla, � 1999 ����*/
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        word-wrap: break-word; /* Internet Explorer 5.5+ */
    }

    .ad-details-page .store-info-container .contact-item {
        padding-bottom: 10px;
        position: relative;
        padding-left: 40px;
        padding-top: 10px;
        word-break: break-word;
    }

*[dir='rtl'] .ad-details-page .store-info-container .contact-item {
    padding-left: 0px;
    padding-right: 40px;
}

.ad-details-page .store-info-container .contact-item .ci-pazar {
    font-size: 32px;
    position: absolute;
    top: calc(50% - 16px);
    left: 0px;
}

*[dir='rtl'] .ad-details-page .store-info-container .contact-item .ci-pazar {
    right: 0px;
    left: auto;
}

.ad-details-page .store-info-container .contact-item span {
    margin-right: 5px;
}

*[dir='rtl'] .ad-details-page .store-info-container .contact-item span {
    margin-right: 0px;
    margin-left: 5px;
}

@media(max-width: 991px) {
    .ad-details-page .store-info-area {
        display: none;
    }
}

.ad-details-page .google-ad.universal-ad-details-right-300x250 {
    border-radius: var(--radius-8);
    overflow: hidden;
}
/* #endregion ----------- /Store Info Area --------------------- */
/* #region ------------------ Ads pager ------------------------ */
.ad-details-page .ads-pager {
    display: table;
    width: 100%;
    max-height: 38.35px;
}

    .ad-details-page .ads-pager > * {
        display: table-row;
    }

        .ad-details-page .ads-pager > * > * {
            display: table-cell;
            vertical-align: top;
            padding: 10px 5px 10px 5px;
            border-top: 1px solid #DDDDDD;
            border-bottom: 1px solid #DDDDDD;
            border-left: 1px solid #DDDDDD;
            border-right: 1px solid #DDDDDD;
            position: relative;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
        }

            .ad-details-page .ads-pager > * > *:first-child {
                border-right: 0px none transparent;
                width: 40px;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
            }

*[dir='rtl'] .ad-details-page .ads-pager > * > *:first-child {
    border-left: 0px none transparent;
    border-right: 1px solid #DDDDDD;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.ad-details-page .ads-pager > * > *:last-child {
    border-left: 0px none transparent;
    width: 40px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

*[dir='rtl'] .ad-details-page .ads-pager > * > *:last-child {
    border-right: 0px none transparent;
    border-left: 1px solid #DDDDDD;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.ad-details-page .ads-pager .ci-pazar-small {
    position: absolute;
    z-index: 1;
    font-size: 14px;
    top: calc(50% - 7px);
}

.ad-details-page .ads-pager > * > *:first-child .ci-pazar-small {
    left: calc(50% - 7px);
}

*[dir='rtl'] .ad-details-page .ads-pager > * > *:first-child .ci-pazar-small {
    transform: rotateZ(180deg);
}

.ad-details-page .ads-pager > * > *:last-child .ci-pazar-small {
    left: auto;
    right: calc(50% - 7px);
}

*[dir='rtl'] .ad-details-page .ads-pager > * > *:last-child .ci-pazar-small {
    transform: rotateZ(180deg);
}

@media (max-width: 991px) {
    .ad-details-page .ads-pager {
        display: none;
    }
}
/* #endregion --------------- Ads pager ------------------------ */
/* #region ----------------- Breadcrumbs ----------------------- */
.ad-details-page .breadcrumbs {
    display: block;
    width: 100%;
    list-style: none;
    font-size: 0px;
    padding-block-end: 15px;
}

    .ad-details-page .breadcrumbs > * {
        display: inline-block;
        font-size: 14px;
        vertical-align: top;
    }

        .ad-details-page .breadcrumbs > * > a {
            text-decoration: none;
            color: #6C757D;
            font-weight: 400;
            line-height: 24px;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 150px;
        }

        .ad-details-page .breadcrumbs > *:after {
            display: inline-block;
            content: '';
            margin-left: 10px;
            margin-right: 10px;
            font-size: 0px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: #9D9D9D;
            vertical-align: top;
            margin-top: 10px;
        }


*[dir='rtl'] .ad-details-page .breadcrumbs > * + *:before {
    margin-left: 5px;
    margin-right: 9px;
}

.ad-details-page .breadcrumbs > *:last-child > a {
    color: #6C757D;
}

    .ad-details-page .breadcrumbs > *:last-child > a:after {
        display: none;
    }

.ad-details-page .breadcrumbs > *:last-child:after {
    display: none;
}

@media (max-width: 991px) {
    .ad-details-page .breadcrumbs {
        min-height: 0px;
    }
}

@media (max-width: 575px) {
    .ad-details-page .breadcrumbs {
        display: none;
    }
}
/* #endregion -------------- Breadcrumbs ----------------------- */
/* #region -------------------- Tags --------------------------- */
.ad-details-page .tags-area {
    display: block;
    font-size: 0;
    width: 100%;
    margin-block-start: 16px;
}

.ad-details-page .tag-item {
    display: inline-block;
    position: relative;
    border-radius: var(--radius-8);
    padding: 12px 15px 12px 15px;
    text-decoration: none;
    background-color: var(--color-bg-inputs-transparent);
    font-weight: 400;
    color: var(--color-text-basic);
    cursor: pointer;
    font-size: 14px;
    margin-right: 6px;
    margin-bottom: 3px;
    margin-top: 3px;
    vertical-align: top;
}

*[dir='rtl'] .ad-details-page .tag-item {
    margin-left: 6px;
    margin-right: 0px;
}

.ad-details-page .tag-item span {
    color: var(--color-text-muted);
}

.ad-details-page .tag-item bdi {
    color: var(--color-text-basic);
    margin-left: 5px;
}

*[dir='rtl'] .ad-details-page .tag-item bdi {
    margin-left: 0px;
    margin-right: 5px;
}

.ad-details-page .tag-item.cargo {
    background-color: #E6F4ED;
    padding: 12px 15px 12px 45px;
}

*[dir='rtl'] .ad-details-page .tag-item.cargo {
    background-color: #E6F4ED;
    padding: 12px 45px 12px 15px;
}

.ad-details-page .tag-item.cargo .ci-pazar {
    position: absolute;
    font-size: 32px;
    top: calc(50% - 16px);
    left: 9px;
}

*[dir='rtl'] .ad-details-page .tag-item.cargo .ci-pazar {
    left: 0px;
    right: 9px;
}

@media (max-width: 419px) {
    .ad-details-page .tags-area {
        padding-top: 15px;
        padding-bottom: 0px;
        margin-top: 0px;
    }

    .ad-details-page .tag-item {
        padding: 9px 10px 9px 10px;
        font-size: 12px;
        margin-right: 3px;
        margin-bottom: 2px;
        margin-top: 1px;
        font-weight: 500;
    }

    *[dir='rtl'] .ad-details-page .tag-item {
        padding: 9px 10px 9px 10px;
        font-size: 12px;
        margin-right: 0px;
        margin-left: 3px;
        margin-bottom: 2px;
        margin-top: 1px;
    }

    .ad-details-page .tag-item.cargo {
        padding: 9px 10px 9px 28px;
    }

    *[dir='rtl'] .ad-details-page .tag-item.cargo {
        padding: 9px 28px 9px 10px;
    }

    .ad-details-page .tag-item.cargo .ci-pazar {
        font-size: 24px;
        top: calc(50% - 12px);
        left: 5px;
    }

    *[dir='rtl'] .ad-details-page .tag-item.cargo .ci-pazar {
        font-size: 24px;
        top: calc(50% - 12px);
        left: auto;
        right: 5px;
    }
}
/* #endregion ----------------- Tags --------------------------- */
/* #region --------------- Report Ad Area ---------------------- */
.ad-details-page .report-area {
    line-height: 24px;
    padding: 16px;
    display: flex;
    background: var(--color-bg-panel);
    border-radius: var(--radius-16);
    gap: 16px;
}

    .ad-details-page .report-area .ci-pazar-bold {
        font-size: 24px;
        flex-shrink: 0;
    }

    .ad-details-page .report-area .text-description {
        width: 100%;
        flex-grow: 1;
    }

    .ad-details-page .report-area .report-footer {
        display: flex;
        width: 100%;
        flex-direction: row;
    }

@media (max-width: 575px) {
    .ad-details-page .report-area .report-footer {
        flex-direction: row-reverse;
    }
}

.ad-details-page .report-area .btn-report {
    padding-bottom: 0;
    padding-top: 0;
    text-decoration: none !important;
    text-transform: uppercase;
    padding-inline: 0px;
    margin-block-start: 16px;
    font-weight: 700;
}

.ad-details-page .report-area a {
    color: var(--color-text-basic);
    text-decoration: none;
}
/* #endregion ----------- /Report Ad Area ---------------------- */
/* #region ---------------- Visited Ads ------------------------ */
.ad-details-page .visited-ads-area {
    padding-bottom: 20px;
}

    .ad-details-page .visited-ads-area h3 {
        display: block;
        font-size: 24px;
        font-weight: 400;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .ad-details-page .visited-ads-area .goods-card {
        margin-bottom: 20px;
    }

        .ad-details-page .visited-ads-area .goods-card,
        .ad-details-page .visited-ads-area .goods-card:hover {
            text-decoration: none;
        }

            .ad-details-page .visited-ads-area .goods-card .ad-image-container {
                display: block;
                width: 100%;
                height: 130px;
                border-radius: var(--radius-4);
                position: relative;
                background-color: #DDDDDD;
            }

            .ad-details-page .visited-ads-area .goods-card .seo-image {
                width: 100%;
                height: 100%;
                object-position: center center;
                border-radius: var(--radius-4);
                position: absolute;
                z-index: 3;
            }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ad-details-page .visited-ads-area .goods-card .seo-image {
        display: none;
    }
}

.ad-details-page .visited-ads-area .goods-card .ad-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-4);
    position: absolute;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 2;
}

.ad-details-page .visited-ads-area .goods-card .ad-image-container .cargo-icon {
    display: flex;
    position: absolute;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    background-color: #FFFFFF;
    padding: 0px;
    font-size: 32px;
    z-index: 3;
    width: 42px;
    height: 42px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.ad-details-page .visited-ads-area .goods-card .ad-image-container .ci-image {
    position: absolute;
    font-size: 48px;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    z-index: 1;
}

*[dir='rtl'] .ad-details-page .visited-ads-area .goods-card .ad-image-container .cargo-icon {
    right: auto;
    left: 5px;
}

.ad-details-page .visited-ads-area .goods-card h6 {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 8px;
}

.ad-details-page .visited-ads-area .goods-card .ad-date {
    font-size: 14px;
    font-weight: 400;
    margin-top: 6px;
}

    .ad-details-page .visited-ads-area .goods-card .ad-date bdi {
        padding-right: 5px;
    }

*[dir='rtl'] .ad-details-page .visited-ads-area .goods-card .ad-date bdi {
    padding-right: 0px;
    padding-left: 5px;
}

.ad-details-page .visited-ads-area .goods-card .ad-price {
    font-weight: 700;
    margin-top: 6px;
}

    .ad-details-page .visited-ads-area .goods-card .ad-price span {
        padding-right: 5px;
    }

*[dir='rtl'] .ad-details-page .visited-ads-area .goods-card .ad-price span {
    padding-right: 0px;
    padding-left: 5px;
}

*[dir='rtl'] .ad-details-page .visited-ads-area .goods-card .ad-price .ci-pazar-small {
    transform: rotate(315deg);
}


.ad-details-page .visited-ads-area .goods-card .store-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 5px;
    background-color: var(--color-bg-primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    color: #FFFFFF;
    z-index: 4;
    border-radius: var(--radius-4);
}

*[dir='rtl'] .ad-details-page .visited-ads-area .goods-card .store-badge {
    right: 5px;
    left: auto;
}


@media (max-width: 1199px) {
    .ad-details-page .visited-ads-area .goods-card .ad-image-container {
        height: 100px;
    }
}

@media (max-width: 991px) {
    .ad-details-page .visited-ads-area h3 {
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .ad-details-page .visited-ads-area .goods-card:nth-child(4) {
        display: none;
    }
}

@media (max-width: 575px) {
    .ad-details-page .visited-ads-area .goods-card {
        margin-bottom: 60px;
    }

        .ad-details-page .visited-ads-area .goods-card:nth-child(4) {
            display: block;
        }

        .ad-details-page .visited-ads-area .goods-card .ad-image-container {
            height: 180px;
        }

    .ad-details-page .visited-ads-area {
        padding-bottom: 20px;
    }
}

@media (max-width: 450px) {
    .ad-details-page .visited-ads-area .goods-card .ad-image-container {
        height: 140px;
    }
}

@media (max-width: 360px) {
    .ad-details-page .visited-ads-area {
        padding-bottom: 20px;
    }

        .ad-details-page .visited-ads-area .goods-card .ad-image-container {
            height: 100px;
        }

        .ad-details-page .visited-ads-area .goods-card .ad-date {
            font-size: 12px;
        }

        .ad-details-page .visited-ads-area .goods-card .ad-price {
            font-size: 12px;
        }

        .ad-details-page .visited-ads-area .goods-card {
            margin-bottom: 40px;
        }
}
/* #endregion ------------ /Visited Ads ------------------------ */
/* #region ------------ Seller's Info area --------------------- */
.ad-details-page .seller-info-area {
    border-top: 1px solid #DDDDDD;
    padding-top: 15px;
    font-size: 0px;
}

    .ad-details-page .seller-info-area .avatar-area {
        display: inline-block;
        width: 64px;
        height: 64px;
        position: relative;
        vertical-align: top;
    }

    .ad-details-page .seller-info-area .regular-user {
        display: block;
        text-decoration: none;
        font-weight: 400;
        margin-bottom: 20px;
        margin-top: 4px;
    }

        .ad-details-page .seller-info-area .regular-user .info-area {
            display: inline-block;
            font-size: 14px;
            width: calc(100% - 64px);
            vertical-align: top;
            padding-left: 10px;
        }

*[dir='rtl'] .ad-details-page .seller-info-area .regular-user .info-area {
    padding-left: 0px;
    padding-right: 10px;
}

.ad-details-page .seller-info-area .user-name,
.ad-details-page .seller-info-area .store-name {
    font-size: 18px;
    font-weight: 700;
}

.ad-details-page .seller-info-area .user-history,
.ad-details-page .seller-info-area .store-history {
    margin-top: 3px;
}

.ad-details-page .seller-info-area .status {
    position: relative;
    padding-left: 14px;
    margin-top: 3px;
}

*[dir='rtl'] .ad-details-page .seller-info-area .status {
    padding-right: 14px;
    padding-left: 0px;
}

.ad-details-page .seller-info-area .status:before {
    position: absolute;
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: 0px;
    border-radius: 50%;
}

*[dir='rtl'] .ad-details-page .seller-info-area .status:before {
    right: 0px;
    left: auto;
}

.ad-details-page .seller-info-area .status.status-offline {
    color: var(--color-text-muted);
    display: block;
}

    .ad-details-page .seller-info-area .status.status-offline:before {
        background-color: #C5C5C5;
    }

.ad-details-page .seller-info-area.online .status.status-offline {
    color: var(--color-text-muted);
    display: none;
}

.ad-details-page .seller-info-area .status.status-online {
    color: var(--color-text-primary);
    display: none;
}

    .ad-details-page .seller-info-area .status.status-online:before {
        background-color: var(--color-bg-primary);
    }

.ad-details-page .seller-info-area.online .status.status-online {
    color: var(--color-text-primary);
    display: block;
}

.ad-details-page .seller-info-area .store {
    text-decoration: none;
    display: block;
    font-weight: 400;
}

    .ad-details-page .seller-info-area .store .info-area {
        display: block;
        font-size: 14px;
        width: 100%;
        vertical-align: top;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }


    .ad-details-page .seller-info-area .store .status {
        width: auto;
        position: relative;
        vertical-align: middle;
        padding-left: 0px;
    }

        .ad-details-page .seller-info-area .store .status:before {
            position: static;
            content: '';
            width: 10px;
            height: 10px;
            vertical-align: middle;
            border-radius: 50%;
            margin-right: 5px;
        }

*[dir='rtl'] .ad-details-page .seller-info-area .store .status:before {
    margin-right: 0px;
    margin-left: 5px;
}

.ad-details-page .seller-info-area.online .store .status-online:before,
.ad-details-page .seller-info-area .store .status-offline:before {
    display: inline-block;
}

.ad-details-page .seller-info-area.online .store .status-offline:before,
.ad-details-page .seller-info-area .store .status-online:before {
    display: none;
}

.ad-details-page .seller-info-area .store .logo-area {
    border-bottom: 1px solid #DDDDDD;
    padding-bottom: 15px;
    text-align: center;
}

    .ad-details-page .seller-info-area .store .logo-area img {
        display: inline-block;
        max-width: 100%;
        border-radius: var(--radius-4);
    }
/* #endregion -------- /Seller's Info area --------------------- */
/* #region --------------- Delivery Area ----------------------- */
.ad-details-page .right-side .delivery-area {
    display: block;
    width: 100%;
    border-radius: var(--radius-8);
    background-color: var(--color-bg-panel);
    padding: 10px;
    margin-bottom: var(--gap-16);
}

    .ad-details-page .right-side .delivery-area .item {
        display: block;
        width: 100%;
        position: relative;
        padding-left: 44px;
        padding-top: 5px;
        padding-bottom: 5px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

*[dir='rtl'] .ad-details-page .right-side .delivery-area .item {
    padding-left: 0px;
    padding-right: 44px;
}

.ad-details-page .right-side .delivery-area .item .ci-pazar {
    position: absolute;
    z-index: 1;
    top: calc(50% - 18px);
    left: 0px;
    font-size: 36px;
}

*[dir='rtl'] .ad-details-page .right-side .delivery-area .item .ci-pazar {
    left: auto;
    right: 0px;
}

/* #endregion ----------- /Delivery Area ----------------------- */
/* #region ----------- Seller Contacts Area -------------------- */

.multicontact-btn .new-btn {
    position: relative;
}

    .multicontact-btn .new-btn .ci-pazar-small {
        position: absolute;
        font-size: 14px;
        top: calc(50% - 7px);
        right: 14px;
    }

*[dir='rtl'] .multicontact-btn .new-btn .ci-pazar-small {
    left: 14px;
    right: auto;
}

.multicontact-btn .new-btn .main-contact {
    display: inline-block;
    width: 100%;
}

.multicontact-btn .new-btn .secondary-contacts {
    display: inline-block;
    width: 100%;
    color: var(--color-text-muted);
    font-size: 12px;
    text-transform: none;
    font-weight: 400;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multicontact-btn .new-btn {
    padding-top: 13px;
    padding-bottom: 12px;
}

.multicontact-btn.active .new-btn .ci-pazar-small {
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
}

.multicontact-btn {
    overflow: hidden;
    height: 58px;
}

    .multicontact-btn.active {
        background: #F2F2F2;
        border-radius: var(--radius-4);
        height: auto;
    }

    .multicontact-btn .option a {
        text-align: center;
        font-weight: 500;
        color: var(--color-text-basic);
        text-decoration: none;
        display: block;
        width: 100%;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .multicontact-btn .option + .option {
        border-top: 1px solid #DDDDDD;
    }

    .multicontact-btn .option a span {
        font-size: 14px;
        color: var(--color-text-muted);
        font-weight: 400;
    }


/* #endregion ------- /Seller Contacts Area -------------------- */
/* #region -------------- Address Area ------------------------- */
.ad-details-page .address-area {
    margin-top: 20px;
    margin-bottom: 20px;
}

    .ad-details-page .address-area h4 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 10px;
    }

    .ad-details-page .address-area p {
        position: relative;
        padding-left: 35px;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .ad-details-page .address-area .display-ad-address {
        display: inline-block;
    }


*[dir='rtl'] .ad-details-page .address-area p {
    padding-left: 0px;
    padding-right: 35px;
}

.ad-details-page .address-area p .ci-pazar {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 32px;
}

.ad-details-page .address-area .address {
    display: flex;
    width: 100%;
    gap: var(--gap-4);
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: 500;
    align-items: center;
    margin-block-end: var(--gap-16);
}

    .ad-details-page .address-area .address .ci-pazar-bold {
        font-size: 24px;
    }

*[dir='rtl'] .ad-details-page .address-area p .ci-pazar {
    right: 0px;
    left: auto;
}

.ad-details-page .address-area .map {
    display: block;
    width: 100%;
    height: 200px;
    background: url('../../Content/Images/Images/clipart-map.svg') no-repeat center center transparent;
    background-size: cover;
    border-radius: var(--radius-4);
}

.ad-details-page .address-map {
    width: 100%;
    height: 240px;
    border-radius: var(--radius-8);
    background-color: var(--color-bg-panel);
}
/* #endregion ---------- /Address Area ------------------------- */
/* #region ------------ Sellers Ads Area ----------------------- */
.ad-details-page .sellers-ads-area {
    margin-bottom: 50px;
}

    .ad-details-page .sellers-ads-area h4 {
        margin-bottom: 10px;
        line-height: 24px;
        font-size: 18px;
    }

    .ad-details-page .sellers-ads-area .item {
        display: table;
        width: 100%;
        border-radius: var(--radius-4);
        background-color: #F2F2F2;
        table-layout: fixed;
        text-decoration: none;
        font-weight: 400;
        padding: 5px;
        margin-bottom: 5px;
        min-height: 80px;
    }

        .ad-details-page .sellers-ads-area .item > * {
            display: table-row;
        }

            .ad-details-page .sellers-ads-area .item > * > * {
                display: table-cell;
                vertical-align: top;
            }


        .ad-details-page .sellers-ads-area .item .seo-image {
            width: 100%;
            height: 100%;
            object-position: center center;
            border-radius: var(--radius-4);
            position: absolute;
            z-index: 3;
        }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ad-details-page .sellers-ads-area .item .seo-image {
        display: none;
    }

    .ad-details-page .sellers-ads-area .item .image-area .image-container {
        position: static !important;
    }

    .ad-details-page .sellers-ads-area .item .image-area {
        height: 80px;
    }
}


.ad-details-page .sellers-ads-area .item .image-area {
    width: 80px;
    position: relative;
}

.ad-details-page .sellers-ads-area .item .info-area {
    padding-left: 10px;
    padding-right: 10px;
}

.ad-details-page .sellers-ads-area .item .ad-caption {
    font-size: 14px;
    text-decoration: none;
    font-weight: 400;
}

.ad-details-page .sellers-ads-area .item .ad-caption {
    font-size: 14px;
    text-decoration: none;
    font-weight: 400;
    margin-top: 10px;
}

.ad-details-page .sellers-ads-area .item .ad-price {
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .ad-details-page .sellers-ads-area .item .ad-price bdi span {
        margin-right: 5px;
    }

*[dir='rtl'] .ad-details-page .sellers-ads-area .item .ad-price bdi span {
    margin-right: 0px;
    margin-left: 5px;
}

.ad-details-page .sellers-ads-area .item .image-area .image-container {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background-color: #DDDDDD;
    border-radius: var(--radius-4);
    border: 3px solid #FFFFFF;
}

    .ad-details-page .sellers-ads-area .item .image-area .image-container .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

.ad-details-page .sellers-ads-area .item .ci-image {
    font-size: 48px;
    position: absolute;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    z-index: 1;
}

.ad-details-page .sellers-ads-area .item .image {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

*[dir='rtl'] .ad-details-page .sellers-ads-area .item .ad-price .ci-arrow-left {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}

.ad-details-page .sellers-ads-area .item .cargo-icon {
    display: flex;
    position: absolute;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    background-color: #FFFFFF;
    padding: 0px;
    font-size: 23px;
    z-index: 3;
    width: 32px;
    height: 32px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px;
    justify-content: center;
    align-items: center;
}

*[dir='rtl'] .ad-details-page .sellers-ads-area .item .cargo-icon {
    left: 5px;
    right: auto;
}
/* #endregion -------- /Sellers Ads Area ----------------------- */
/* #region -------------- Similar Ads -------------------------- */
.ad-details-page .similar-ads {
    background-color: #F4F4F4;
    padding-top: 40px;
    padding-bottom: 100px;
    margin-top: 40px;
}

    .ad-details-page .similar-ads h3 {
        display: block;
        width: 100%;
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 20px;
    }

    .ad-details-page .similar-ads .goods-card a {
        background-color: #FFFFFF;
        border-radius: var(--radius-4);
        display: block;
        color: var(--color-text-basic);
        text-decoration: none;
        font-weight: 400;
        padding-bottom: 20px;
        margin-bottom: 30px;
        box-shadow: rgba(0,0,0,0.1) 0px 0px 3px;
        min-height: 253px;
    }

    .ad-details-page .similar-ads .goods-card .ad-image-container {
        display: block;
        width: 100%;
        height: 150px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background-color: #DDDDDD;
        position: relative;
        overflow: hidden;
        margin-bottom: 5px;
    }

        .ad-details-page .similar-ads .goods-card .ad-image-container .ci-image {
            position: absolute;
            font-size: 64px;
            left: calc(50% - 32px);
            top: calc(50% - 32px);
            z-index: 1;
        }

        .ad-details-page .similar-ads .goods-card .ad-image-container .ad-image {
            position: absolute;
            z-index: 2;
            background-color: transparent;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            display: block;
            width: 100%;
            height: 100%;
        }


    .ad-details-page .similar-ads .goods-card .seo-image {
        width: 100%;
        height: 100%;
        object-position: center center;
        border-radius: var(--radius-4);
        position: absolute;
        z-index: 2;
    }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ad-details-page .similar-ads .goods-card .seo-image {
        display: none;
    }
}



.ad-details-page .similar-ads .goods-card .ad-image-container .cargo-icon {
    position: absolute;
    z-index: 3;
    font-size: 32px;
    border-radius: 50%;
    background-color: #FFFFFF;
    padding: 0px;
    bottom: 5px;
    right: 5px;
    height: 42px;
    width: 42px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

*[dir='rtl'] .ad-details-page .similar-ads .goods-card .ad-image-container .cargo-icon {
    right: auto;
    left: 5px;
}

.ad-details-page .similar-ads .goods-card .ad-caption {
    display: block;
    padding: 0px 10px 10px 10px;
    line-height: 24px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.ad-details-page .similar-ads .goods-card .ad-price {
    padding: 0px 10px 0px 10px;
    font-size: 14px;
    font-weight: 700;
    display: block;
}

    .ad-details-page .similar-ads .goods-card .ad-price span {
        display: inline-block;
        margin-right: 5px;
    }

*[dir='rtl'] .ad-details-page .similar-ads .goods-card .ad-price span {
    display: inline-block;
    margin-right: 0px;
    margin-left: 5px;
}

*[dir='rtl'] .ad-details-page .similar-ads .goods-card .ad-price .ci-arrow-right {
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
}


.ad-details-page .similar-ads .goods-card .ad-date {
    padding: 5px 10px 5px 10px;
}

    .ad-details-page .similar-ads .goods-card .ad-date bdi {
        padding-right: 10px;
    }

*[dir='rtl'] .ad-details-page .similar-ads .goods-card .ad-date bdi {
    padding-right: 0px;
    padding-left: 10px;
}

.ad-details-page .similar-ads .goods-card .store-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 5px;
    background-color: var(--color-bg-primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    color: #FFFFFF;
    z-index: 4;
    border-radius: var(--radius-4);
}

*[dir='rtl'] .ad-details-page .similar-ads .goods-card .store-badge {
    right: 5px;
    left: auto;
}

.ad-details-page .similar-ads .load-more {
    min-width: 250px;
}

@media (max-width: 991px) {
    .ad-details-page .similar-ads .goods-card:nth-last-child(-n+2) {
        display: none;
    }

    .ad-details-page .similar-ads {
        margin-top: 0px;
    }
}

@media (max-width: 767px) {
    .ad-details-page .similar-ads .goods-card:nth-last-child(-n+2) {
        display: block;
    }
}

@media (max-width: 450px) {
    .ad-details-page .similar-ads .goods-card .ad-image-container {
        height: 120px;
    }

    .ad-details-page .similar-ads .goods-card .ad-date {
        font-size: 12px;
    }

    .ad-details-page .similar-ads .goods-card .ad-caption {
        padding: 0px 10px 0px 10px;
    }

    .ad-details-page .similar-ads .goods-card a {
        padding-bottom: 15px;
        min-height: 205px;
    }
}

@media (max-width: 400px) {
    .ad-details-page .similar-ads .goods-card {
        max-width: 100%;
        flex: 0 0 100%;
    }

        .ad-details-page .similar-ads .goods-card a {
            margin-bottom: 10px;
            position: relative;
            padding-bottom: 0px;
            min-height: 90px;
        }

        .ad-details-page .similar-ads .goods-card .ad-image-container {
            display: inline-block;
            font-size: 0px;
            width: 90px;
            border-top-left-radius: 5px;
            border-top-right-radius: 0px;
            border-bottom-left-radius: 5px;
            vertical-align: top;
            margin-bottom: 0px;
            height: 90px;
        }

    *[dir='rtl'] .ad-details-page .similar-ads .goods-card .ad-image-container {
        border-top-left-radius: 0px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 0px;
    }

    .ad-details-page .similar-ads .goods-card .ad-info {
        vertical-align: top;
        display: inline-block;
        width: calc(100% - 95px);
        padding-top: 10px;
    }

    .ad-details-page .similar-ads .goods-card .ad-image-container .ci-image {
        position: absolute;
        font-size: 48px;
        left: calc(50% - 24px);
        top: calc(50% - 24px);
        z-index: 1;
    }

    .ad-details-page .similar-ads .goods-card .ad-image-container .cargo-icon {
        font-size: 24px;
        width: 34px;
        height: 34px;
    }
}
/* #endregion ---------- /Similar Ads -------------------------- */
/* #region ------ Mobile Additional info area ------------------ */
.ad-details-page .mobile-additional-info-area .location {
    text-decoration: none;
    color: var(--color-text-muted);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .ad-details-page .mobile-additional-info-area .location span:nth-child(2):before {
        display: none;
    }

    .ad-details-page .mobile-additional-info-area .location span:before {
        content: "/";
        display: inline-block;
        font-size: 14px;
        padding-inline-end: 8px;
    }

    .ad-details-page .mobile-additional-info-area .location .ci-pazar-bold {
        font-size: 24px;
    }

.ad-details-page .mobile-additional-info-area .published-date {
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: row-reverse;
    line-height: 25px;
}

.ad-details-page .mobile-additional-info-area {
    display: none;
    font-size: 0;
    margin-block-start: 12px;
}

    .ad-details-page .mobile-additional-info-area .left-side {
        display: inline-block;
        font-size: 14px;
        vertical-align: top;
        width: 100%;
        flex-grow: 1;
    }

    .ad-details-page .mobile-additional-info-area .right-side {
        display: inline-block;
        font-size: 14px;
        vertical-align: top;
        width: auto;
        flex-shrink: 0;
    }

    .ad-details-page .mobile-additional-info-area .item {
        position: relative;
        padding-left: 30px;
        padding-right: 10px;
    }

*[dir='rtl'] .ad-details-page .mobile-additional-info-area .item {
    padding-right: 30px;
    padding-left: 10px;
}

.ad-details-page .mobile-additional-info-area .item i {
    font-size: 24px;
    position: absolute;
    z-index: 1;
    top: calc(50% - 12px);
    left: 0px;
}

*[dir='rtl'] .ad-details-page .mobile-additional-info-area .item i {
    right: 0px;
    left: auto;
}

.ad-details-page .mobile-additional-info-area .item span {
    padding-top: 5px;
    padding-bottom: 5px;
    display: inline-block;
}

    .ad-details-page .mobile-additional-info-area .item span + span {
        padding-left: 5px;
    }

*[dir='rtl'] .ad-details-page .mobile-additional-info-area .item span + span {
    padding-left: 0px;
    padding-right: 5px;
}

.ad-details-page .mobile-additional-info-area .item a {
    font-weight: 400;
    text-decoration: none;
}

@media (max-width: 991px) {
    .ad-details-page .mobile-additional-info-area {
        display: flex;
    }
}

@media (max-width: 575px) {
    .ad-details-page .mobile-additional-info-area .left-side {
        width: 100%;
        padding-right: 0px;
    }

    *[dir='rtl'] .ad-details-page .mobile-additional-info-area .left-side {
        padding-left: 0px;
        width: 100%;
    }
}

@media (max-width: 419px) {
    .ad-details-page .mobile-additional-info-area .item {
        padding-top: 5px;
        padding-bottom: 5px;
    }

        .ad-details-page .mobile-additional-info-area .item span {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-right: 5px;
        }

    *[dir='rtl'] .ad-details-page .mobile-additional-info-area .item span {
        padding-left: 5px;
        padding-right: 0px;
    }

    .ad-details-page .mobile-additional-info-area .item span + span {
        padding-left: 0px;
    }

    *[dir='rtl'] .ad-details-page .mobile-additional-info-area .item span + span {
        padding-right: 0px;
        padding-left: 0px;
    }
}
/* #endregion -- /Mobile Additional info area ------------------ */
/* #region --------- Mobile Delivery Area ---------------------- */
.ad-details-page .mobile-delivery-area {
    display: none;
    width: 100%;
    background-color: #F2F2F2;
    border-radius: var(--radius-16);
    margin-top: 20px;
    padding: 30px 20px 30px 20px;
    font-size: 0px;
}

    .ad-details-page .mobile-delivery-area .features-item {
        display: inline-block;
        font-size: 0px;
        width: 33%;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        vertical-align: top;
    }

        .ad-details-page .mobile-delivery-area .features-item span {
            font-size: 14px;
            text-align: center;
        }

        .ad-details-page .mobile-delivery-area .features-item i {
            font-size: 48px;
            display: block;
            margin: 0px auto;
            margin-bottom: 5px;
        }

    .ad-details-page .mobile-delivery-area .btn-primary {
        margin-top: 20px;
        text-align: center;
        padding: 25px 10px 25px 10px;
        font-size: 18px;
    }

    .ad-details-page .mobile-delivery-area .delivery-price-block {
        font-size: 14px;
        margin-top: 10px;
        text-align: center;
        width: 100%;
        display: block;
    }

        .ad-details-page .mobile-delivery-area .delivery-price-block bdi span {
            padding-right: 5px;
        }

*[dir='rtl'] .ad-details-page .mobile-delivery-area .delivery-price-block bdi span {
    padding-right: 0px;
    padding-left: 5px;
}


@media (max-width: 991px) {
    .ad-details-page .mobile-delivery-area {
        display: block;
    }
}

@media (max-width: 575px) {
    .ad-details-page .mobile-delivery-area .features-item {
        display: block;
        width: 100%;
        text-align: left;
        position: relative;
    }

    *[dir='rtl'] .ad-details-page .mobile-delivery-area .features-item {
        text-align: right;
    }

    .ad-details-page .mobile-delivery-area .features-item i {
        position: absolute;
        z-index: 1;
        left: 0px;
        top: calc(50% - 24px);
    }

    *[dir='rtl'] .ad-details-page .mobile-delivery-area .features-item i {
        left: auto;
        right: 0px;
    }

    .ad-details-page .mobile-delivery-area .features-item span {
        padding-top: 20px;
        padding-bottom: 20px;
        display: inline-block;
        padding-left: 48px;
    }

    *[dir='rtl'] .ad-details-page .mobile-delivery-area .features-item span {
        padding-right: 48px;
        padding-left: 0px;
    }

    .ad-details-page .mobile-delivery-area {
        padding: 15px 20px 20px 20px;
    }
}


@media (max-width: 470px) {
    .ad-details-page .mobile-delivery-area .btn-primary {
        margin-top: 20px;
        padding: 15px 10px 15px 10px;
        font-size: 14px;
    }

    .ad-details-page .mobile-delivery-area .features-item i {
        font-size: 32px;
        top: calc(50% - 16px);
    }

    .ad-details-page .mobile-delivery-area .features-item span {
        padding-left: 36px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: left;
    }

    *[dir='rtl'] .ad-details-page .mobile-delivery-area .features-item span {
        padding-left: 0px;
        padding-right: 36px;
        text-align: right;
    }
}

@media (max-width: 350px) {
    .ad-details-page .mobile-delivery-area {
        padding: 10px 10px 20px 10px;
    }
}
/* #endregion ----- /Mobile Delivery Area ---------------------- */
/* #region ---------- Mobile Seller info ----------------------- */
.ad-details-page .mobile-seller-info {
    padding-top: 30px;
    display: none;
}

    .ad-details-page .mobile-seller-info h3 {
        display: block;
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 20px;
    }

    /* #region Regular user */
    .ad-details-page .mobile-seller-info .regular-user {
        display: block;
        background-color: #F2F2F2;
        padding: 20px;
        border-radius: var(--radius-4);
        font-size: 0px;
    }

        .ad-details-page .mobile-seller-info .regular-user .main-info {
            display: inline-block;
            width: 65%;
            font-size: 14px;
            vertical-align: top;
            position: relative;
            text-decoration: none;
            font-weight: 400;
        }

        .ad-details-page .mobile-seller-info .regular-user .additional-info {
            display: inline-block;
            width: 35%;
            font-size: 14px;
            vertical-align: top;
            text-align: right;
        }

*[dir='rtl'] .ad-details-page .mobile-seller-info .regular-user .additional-info {
    text-align: left;
}

.ad-details-page .mobile-seller-info .regular-user .avatar-area {
    display: block;
    width: 64px;
    height: 64px;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
}

*[dir='rtl'] .ad-details-page .mobile-seller-info .regular-user .avatar-area {
    right: 0px;
    left: auto;
}

.ad-details-page .mobile-seller-info .regular-user .info-area {
    display: block;
    padding-left: 75px;
}

*[dir='rtl'] .ad-details-page .mobile-seller-info .regular-user .info-area {
    padding-right: 75px;
    padding-left: 0px;
}


.ad-details-page .mobile-seller-info .regular-user .info-area .user-name {
    font-size: 18px;
    font-weight: 700;
}

.ad-details-page .mobile-seller-info .status {
    position: relative;
    padding-left: 14px;
    margin-top: 3px;
}

*[dir='rtl'] .ad-details-page .mobile-seller-info .status {
    padding-left: 0px;
    padding-right: 14px;
}

.ad-details-page .mobile-seller-info .online .status.status-offline {
    display: none;
}

.ad-details-page .mobile-seller-info .online .status.status-online {
    display: block;
}

.ad-details-page .mobile-seller-info .status.status-offline {
    color: var(--color-text-muted);
    display: block;
}

.ad-details-page .mobile-seller-info .status.status-online {
    color: var(--color-text-primary);
    display: none;
}

.ad-details-page .mobile-seller-info .status:before {
    position: absolute;
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: 0px;
    border-radius: 50%;
}

*[dir='rtl'] .ad-details-page .mobile-seller-info .status:before {
    right: 0px;
    left: auto;
}

.ad-details-page .mobile-seller-info .status.status-offline:before {
    background-color: #C5C5C5;
}

.ad-details-page .mobile-seller-info .status.status-online:before {
    background-color: var(--color-bg-primary);
}

.ad-details-page .mobile-seller-info .user-history {
    margin-top: 4px;
}

@media (max-width: 991px) {
    .ad-details-page .mobile-seller-info {
        display: block;
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .ad-details-page .mobile-seller-info .regular-user .additional-info {
        width: 100%;
        display: block;
        border-top: #DDDDDD solid 1px;
        text-align: center;
        margin-top: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .ad-details-page .mobile-seller-info .regular-user {
        padding: 0px;
        padding-bottom: 25px;
    }

        .ad-details-page .mobile-seller-info .regular-user .main-info {
            width: 100%;
            padding: 20px 10px 0px 10px;
        }

        .ad-details-page .mobile-seller-info .regular-user .avatar-area {
            top: 20px;
            left: 11px;
        }

    *[dir='rtl'] .ad-details-page .mobile-seller-info .regular-user .avatar-area {
        right: 11px;
        left: auto;
    }

    .ad-details-page .mobile-seller-info .regular-user .additional-info,
    *[dir='rtl'] .ad-details-page .mobile-seller-info .regular-user .additional-info {
        text-align: center;
    }
}

@media (max-width: 319px) {
    .ad-details-page .mobile-seller-info .regular-user .info-area {
        padding-left: 60px;
    }

    *[dir='rtl'] .ad-details-page .mobile-seller-info .regular-user .info-area {
        padding-left: 0px;
        padding-right: 60px;
    }
}
/* #endregion Regular user */
/* #region Store */
.ad-details-page .mobile-seller-info .store {
    background-color: var(--color-bg-panel);
    border-radius: var(--radius-16);
    position: relative;
    width: 100%;
}

    .ad-details-page .mobile-seller-info .store .store-ads {
        position: relative;
        display: block;
        border-top: 1px solid #DDDDDD;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
    }

    .ad-details-page .mobile-seller-info .store .store-contacts {
        border-top: 1px solid #DDDDDD;
    }

        .ad-details-page .mobile-seller-info .store .store-contacts .store-container {
            padding: 20px 20px 10px 20px;
        }

        .ad-details-page .mobile-seller-info .store .store-contacts label {
            display: block;
            width: 100%;
        }

        .ad-details-page .mobile-seller-info .store .store-contacts a {
            display: inline-block;
            margin-top: 3px;
            margin-bottom: 15px;
            white-space: pre-wrap;
            word-break: break-word;
        }

    .ad-details-page .mobile-seller-info .store .store-description {
        padding-top: 20px;
        padding-bottom: 20px;
    }

        .ad-details-page .mobile-seller-info .store .store-description .store-container {
            padding-left: 20px;
            padding-right: 20px;
            font-family: "Manrope", Arial;
            line-height: 23px;
            white-space: pre-wrap; /* css-3 */
            white-space: -moz-pre-wrap; /* Mozilla, � 1999 ����*/
            white-space: -pre-wrap; /* Opera 4-6 */
            white-space: -o-pre-wrap; /* Opera 7 */
            word-wrap: break-word; /* Internet Explorer 5.5+ */
        }

    .ad-details-page .mobile-seller-info .store .store-info {
        padding-top: 20px;
        padding-bottom: 0px;
    }

        .ad-details-page .mobile-seller-info .store .store-info .store-container {
            padding-left: 20px;
            padding-right: 20px;
            display: block;
            text-decoration: none;
            font-weight: 400;
        }

        .ad-details-page .mobile-seller-info .store .store-info .user-name {
            font-size: 24px;
        }

    .ad-details-page .mobile-seller-info .store .store-img {
        width: 100%;
        position: relative;
        padding-top: 0px;
        padding-bottom: 0px;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        overflow: hidden;
        font-size: 0px;
    }

        .ad-details-page .mobile-seller-info .store .store-img .store-container {
            padding-left: 0px;
            padding-right: 0px;
            text-align: center;
            display: block;
            background-color: #dddddd;
        }


        .ad-details-page .mobile-seller-info .store .store-img .overlay {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1;
            background-color: rgba(0,0,0,0.02);
            top: 0px;
            left: 0px;
        }

        .ad-details-page .mobile-seller-info .store .store-img img {
            display: inline-block;
            max-width: 100%;
        }
/* #endregion Store */
/* #endregion ------ /Mobile Seller info ----------------------- */
/* #region ---------- Mobile Contact Button -------------------- */
.ad-details-page .mobile-bottom-controls {
    display: none;
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    background-color: rgba(255,255,255,0);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
    z-index: 999;
}

    .ad-details-page .mobile-bottom-controls .new-btn {
        padding: 16px 10px 16px 10px;
        font-size: 16px;
        border-radius: var(--radius-8);
        box-shadow: 0 1px 2px var(--color-shade-200), 0 6px 20px var(--color-shade-300);
        cursor: pointer;
    }


    .ad-details-page .mobile-bottom-controls.cargo {
        font-size: 0px;
    }

        .ad-details-page .mobile-bottom-controls.cargo .new-btn {
            font-size: 16px;
            width: 49%;
        }

            .ad-details-page .mobile-bottom-controls.cargo .new-btn + .new-btn {
                margin-left: 2%;
            }

*[dir='rtl'] .ad-details-page .mobile-bottom-controls.cargo .new-btn + .new-btn {
    margin-left: 0%;
    margin-right: 2%;
}

.ad-details-page .mobile-bottom-controls .cart-btn {
    font-size: 24px;
    min-width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .ad-details-page .mobile-bottom-controls .cart-btn .ci-shopping-cart {
        opacity: 1;
        transition: opacity 0.2s ease;
    }

    .ad-details-page .mobile-bottom-controls .cart-btn.active .ci-shopping-cart {
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .ad-details-page .mobile-bottom-controls .cart-btn .ci-check-circle {
        transform: scale(3);
        opacity: 0;
        position: absolute;
        transition: all 0.2s ease;
    }

    .ad-details-page .mobile-bottom-controls .cart-btn.active .ci-check-circle {
        transform: scale(1);
        opacity: 1;
        transition: all 0.2s ease;
    }



@media (max-width: 991px) {
    .ad-details-page .mobile-bottom-controls {
        display: flex;
        background-color: var(--color-bg-alt);
        border-top: 1px solid var(--color-border-muted);
        gap: var(--gap-8);
    }
}

/* Frosted only where the blur actually renders; elsewhere the opaque surface above stands. */
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
    @media (max-width: 991px) {
        .ad-details-page .mobile-bottom-controls {
            background-color: rgba(255,255,255,0.72);
        }
    }
}

@media (max-width: 400px) {
    .ad-details-page .mobile-bottom-controls {
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px;
    }
}
/* #endregion ------ /Mobile Contact Button -------------------- */
/* #region ---------- Mobile Manage ad Panel ------------------- */
.manage-ad-overlay {
    display: none;
    position: fixed;
    z-index: 2000;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

    .manage-ad-overlay.show {
        display: block;
    }

.manage-ad-modal {
    display: none;
    width: 400px;
    background-color: #FFFFFF;
    border-radius: var(--radius-12);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 30px;
    position: fixed;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    z-index: 2001;
    padding: 10px;
}

    .manage-ad-modal.show {
        display: block;
    }

    .manage-ad-modal .new-btn {
        padding: 25px 5px 25px 5px;
        font-size: 18px;
    }

        .manage-ad-modal .new-btn + .new-btn {
            margin-top: 5px;
        }

    .manage-ad-modal .new-btn {
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
    }

@media (max-width: 550px) {
    .manage-ad-modal .new-btn {
        padding: 18px 5px 17px 5px;
        font-size: 14px
    }

    .manage-ad-modal {
        width: 320px;
        top: calc(50% - 140px);
        left: calc(50% - 160px);
    }
}

@media (max-width: 420px) {
    .manage-ad-modal {
        width: 280px;
        top: calc(50% - 120px);
        left: calc(50% - 140px);
    }
}

/* #endregion ------ /Mobile Manage ad Panel ------------------- */
/* #region ----------- Modal: Share the Ad --------------------- */
.dropup-modal.share-modal .modal-header .title {
    color: transparent;
}

.dropup-modal.share-modal .modal-content {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    max-height: calc(100vh - 120px);
}


    .dropup-modal.share-modal .modal-content .title {
        padding-block-start: 16px;
        padding-block-end: 48px;
        padding-inline: 64px;
        text-align: center;
    }

        .dropup-modal.share-modal .modal-content .title h3 {
            font-size: 32px;
            font-weight: 400;
            line-height: 130%;
            color: var(--color-text-basic);
        }

        .dropup-modal.share-modal .modal-content .title p {
            font-size: 16px;
            font-weight: 400;
            line-height: 130%;
            color: var(--color-text-muted);
        }

.dropup-modal.share-modal .row-link {
    display: block;
    width: 100%;
    padding-inline: 32px;
}

.dropup-modal.share-modal .label {
    width: 100%;
    font-weight: 600;
    font-size: 16px;
    margin-block-end: 8px;
    display: block;
    color: var(--color-text-basic);
    line-height: 100%;
    text-align: start;
    padding-inline: 0px !important;
}

.dropup-modal.share-modal .address-box {
    display: flex;
    width: 100%;
    align-items: center;
    background: var(--color-bg-panel);
    border-radius: var(--radius-8);
    gap: 16px;
    padding-inline: 8px;
    padding-block: 4px;
    position: relative;
}

    .dropup-modal.share-modal .address-box input[type='text'] {
        flex-grow: 1;
        background: transparent;
        border: 0px none transparent;
    }

    .dropup-modal.share-modal .address-box .btn-address-copy {
        display: flex;
        width: 40px;
        height: 40px;
        border: 0px none transparent;
        background: transparent;
        outline: none;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        flex-shrink: 0;
    }

    .dropup-modal.share-modal .address-box .copy-success {
        display: inline-block;
        position: absolute;
        inset-inline-end: 0px;
        inset-block-end: 50px;
        background-color: var(--color-shade-800);
        color: var(--color-white, #fff);
        border-radius: var(--radius-8);
        padding-inline: 12px;
        padding-block: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 100%;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
    }

        .dropup-modal.share-modal .address-box .copy-success.active {
            opacity: 1;
            transform: translateY(0);
        }


.dropup-modal.share-modal .row-share-targets {
    display: block;
    padding-inline: 32px;
    padding-block-start: 32px;
    padding-block-end: 32px;
}

.dropup-modal.share-modal .target-list {
    display: flex;
    flex-direction: row;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
    padding-block-start: 8px;
}

.dropup-modal.share-modal .row-share-targets .item {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    background-color: transparent;
    border: 0px none transparent;
    outline: none;
    color: var(--color-text-basic);
    align-items: center;
}

.dropup-modal.share-modal .row-share-targets .target-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: var(--color-bg-inputs-transparent);
    border-radius: 50%;
    overflow: hidden;
    font-size: 24px;
}


    .dropup-modal.share-modal .row-share-targets .target-icon-container.facebook,
    .dropup-modal.share-modal .row-share-targets .target-icon-container.twitter {
        font-size: 60px;
        background: transparent;
    }

    .dropup-modal.share-modal .row-share-targets .target-icon-container.instagram {
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
        font-size: 40px;
    }

    .dropup-modal.share-modal .row-share-targets .target-icon-container.tiktok {
        background: #000000;
        font-size: 50px;
    }

    .dropup-modal.share-modal .row-share-targets .target-icon-container.whatsapp {
        background: #25D366;
        font-size: 40px;
    }

    .dropup-modal.share-modal .row-share-targets .target-icon-container.viber {
        background: #7360F2;
        font-size: 40px;
        padding-block-start: 4px;
    }

.dropup-modal.share-modal .row-share-targets .item.sms {
    display: none;
}

@media (max-width: 700px) {
    .dropup-modal.share-modal .row-share-targets .item.sms {
        display: flex;
    }

    .dropup-modal.share-modal .modal-header {
        display: none;
    }

    .dropup-modal.share-modal .modal-content .title {
        padding-block-start: 0px;
    }
}

@media (max-width: 450px) {
    .dropup-modal.share-modal .modal-content .title {
        padding-inline: 12px;
    }

    .dropup-modal.share-modal .row-link {
        display: block;
        width: 100%;
        padding-inline: 12px;
    }

    .dropup-modal.share-modal .row-share-targets {
        display: block;
        padding-inline: 12px;
    }

    .dropup-modal.share-modal .target-list {
        gap: 24px;
    }
}

/* #endregion -------/ Modal: Share the Ad --------------------- */
/* #region ------------------- Iute ---------------------------- */
.ad-details-page .iute-calculator {
    border-radius: var(--radius-16);
    border: 1px solid var(--color-border-basic);
    padding: var(--gap-16);
    margin-block-start: var(--gap-24);
}

    .ad-details-page .iute-calculator.collapsed .iute-calculation-form .right-side,
    .ad-details-page .iute-calculator.collapsed .iute-calculation-form .iute-content {
        display: none;
    }

    .ad-details-page .iute-calculator.collapsed .iute-calculation-form h2 {
        margin: 0px;
        padding: 0px;
        font-size: 18px;
        font-weight: 700;
        line-height: 130%;
        display: flex;
        gap: var(--gap-8);
        align-items: center;
        margin-block-end: var(--gap-12);
    }

    .ad-details-page .iute-calculator .iute-calculation-form h2 {
        display: none;
    }

        .ad-details-page .iute-calculator .iute-calculation-form h2 i {
            display: block;
            width: 70px;
            height: 24px;
            background: url('../../Content/Images/Iute/logo-full.svg') no-repeat center center transparent;
            background-size: contain;
        }

    .ad-details-page .iute-calculator .price-tabs {
        display: flex;
        gap: var(--gap-8);
        padding-block-start: var(--gap-4);
        padding-block-end: var(--gap-32);
    }

    .ad-details-page .iute-calculator.collapsed .price-tabs {
        padding-block-end: var(--gap-0);
    }

    .ad-details-page .iute-calculator .price-tabs .tab {
        position: relative;
        border: 1px solid var(--color-border-basic);
        width: 100%;
        padding-block-start: var(--gap-16);
        padding-block-end: var(--gap-24);
        border-radius: var(--gap-8);
        text-align: center;
    }

        .ad-details-page .iute-calculator .price-tabs .tab.negotiable small {
            margin-block-start: var(--gap-0);
        }

        .ad-details-page .iute-calculator .price-tabs .tab.active {
            background: var(--color-bg-inputs-transparent);
        }

        .ad-details-page .iute-calculator .price-tabs .tab h4 {
            display: flex;
            flex-direction: column;
        }

        .ad-details-page .iute-calculator .price-tabs .tab.negotiable h4 {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: var(--gap-4);
        }

    .ad-details-page .iute-calculator.collapsed .price-tabs .tab h4 {
        display: flex;
        flex-direction: row;
        text-align: center;
        gap: var(--gap-4);
        font-weight: 700 !important;
        font-size: 16px;
        width: 100%;
        justify-content: center;
        line-height: 120%;
        margin-block-end: var(--gap-4);
    }



.ad-details-page .price-tabs .tab h4 span {
    font-weight: 700;
    line-height: 130%;
    font-size: 16px;
}

.ad-details-page .price-tabs .tab small {
    display: inline-block;
    margin-block-start: var(--gap-8);
}

.ad-details-page .price-tabs .tab .recommended {
    position: absolute;
    display: inline-block;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    padding-inline: var(--gap-12);
    padding-block: var(--gap-4);
    border-radius: var(--radius-32);
    background: var(--color-bg-warning);
    color: var(--color-text-basic);
    inset-inline-start: 50%;
    inset-block-start: 0px;
    transform: translate(-50%, -50%);
    z-index: 1;
}

*[dir='rtl'] .ad-details-page .price-tabs .tab .recommended {
    transform: translate(50%, -50%);
}

@media (max-width: 1199px) {

    .ad-details-page .iute-calculator .price-tabs {
        padding-block-start: var(--gap-0);
        flex-direction: column;
        gap: var(--gap-16);
    }

        .ad-details-page .iute-calculator .price-tabs .tab {
            padding-block-start: var(--gap-12);
            padding-block-end: var(--gap-16);
        }

            .ad-details-page .iute-calculator .price-tabs .tab h4 {
                display: flex;
                flex-direction: row;
                width: 100%;
                gap: var(--gap-4);
                text-align: center;
                justify-content: center;
            }

                .ad-details-page .iute-calculator .price-tabs .tab h4 > span:first-child {
                    display: inherit;
                    width: auto;
                }

    .ad-details-page .price-tabs .tab small {
        margin-block-start: var(--gap-4);
    }

    .ad-details-page .iute-calculator.collapsed .price-tabs {
        flex-direction: row;
    }

        .ad-details-page .iute-calculator.collapsed .price-tabs .tab h4 {
            display: block;
            width: 100%;
        }

            .ad-details-page .iute-calculator.collapsed .price-tabs .tab h4 > span:first-child {
                display: block;
                width: 100%;
            }
}

@media (max-width: 991px) {


    .ad-details-page .iute-calculator {
        border-radius: var(--radius-0);
        border: 0px;
        padding: var(--gap-0);
        margin-block-start: var(--gap-24);
    }

        .ad-details-page .iute-calculator .price-tabs {
            padding-block-start: var(--gap-0);
        }

            .ad-details-page .iute-calculator .price-tabs .tab.active,
            .page-checkout .iute-calculator .price-tabs .tab.active {
                background: var(--color-bg-main);
            }

        .ad-details-page .iute-calculator.collapsed .iute-calculation-form h2 {
            margin-block-end: var(--gap-24);
        }
}

@media (max-width: 767px) {

    .ad-details-page .iute-calculator.collapsed .left-side {
        margin-block-start: var(--gap-0);
    }

    .ad-details-page .iute-calculator.collapsed .price-tabs{
        padding-block-start: var(--gap-8);
        flex-direction: column;
        gap: var(--gap-16);
    }

        .ad-details-page .iute-calculator.collapsed .price-tabs .tab h4 {
            display: flex;
        }

            .ad-details-page .iute-calculator.collapsed .price-tabs .tab h4 > span:first-child {
                display: inherit;
                width: auto;
            }

        .ad-details-page .iute-calculator.collapsed .price-tabs .tab {
            padding-block-start: var(--gap-12);
            padding-block-end: var(--gap-16);
            display: flex;
            align-items: center;
            flex-direction: column;
        }

    .ad-details-page .iute-calculator.collapsed .iute-calculation-form h2 {
        margin-block-end: var(--gap-16);
    }
}

@media (max-width: 419px) {
    .ad-details-page .iute-calculator .price-tabs .tab h4 {
        margin-block-end: 0px !important;
    }
}

.ad-details-page .iute-calculator .left-side,
.page-checkout .iute-calculator .left-side {
    padding-inline-end: var(--gap-0) !important;
}

.ad-details-page .delivery-area .iute-container {
    display: flex;
    gap: var(--gap-12);
    align-items: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-basic);
    width: 100%;
    padding-block: var(--gap-16);
    border-bottom: 1px solid var(--color-border-basic);
    padding-inline: var(--gap-4);
}

    .ad-details-page .delivery-area .iute-container.no-border {
        border-bottom: 0px;
        padding-block-end: var(--gap-8);
    }



    .ad-details-page .delivery-area .iute-container .logo {
        display: flex;
        width: 28px;
        height: 28px;
        background: url('../../Content/Images/Iute/pictogram.svg') no-repeat center center transparent;
        background-size: contain;
        flex-shrink: 0;
    }

    .ad-details-page .delivery-area .iute-container .description {
        width: 100%;
        height: auto;
        display: flex;
        gap: var(--gap-4);
    }

        .ad-details-page .delivery-area .iute-container .description bdi {
            display: flex;
            gap: var(--gap-4);
        }

            .ad-details-page .delivery-area .iute-container .description bdi .format-money-int {
                margin-inline-end: 0px !important;
            }

.ad-details-page .price-block {
    display: flex;
    gap: var(--gap-16);
}

    .ad-details-page .price-block .iute-block {
        border-inline-start: 1px solid var(--color-border-basic);
        padding-inline-start: var(--gap-16);
        padding-block-end: var(--gap-12);
    }

    .ad-details-page .price-block .iute-details {
        font-weight: 700;
        display: flex;
        gap: var(--gap-12);
    }

@media (max-width: 575px) {

    .ad-details-page .price-block {
        flex-direction: column;
    }

        .ad-details-page .price-block .iute-block {
            border-inline-start: 0px none transparent;
            border-block-start: 1px solid var(--color-border-basic);
            padding-inline-start: var(--gap-0);
            padding-block-end: var(--gap-12);
            padding-block-start: var(--gap-12);
        }
}

@media (max-width: 419px) {
    .ad-details-page .price-block h4 {
        margin-block-end: 0px;
    }
}


.iute-calculation-form h3,
.iute-calculation-form h2 {
    font-size: 24px;
    font-weight: 500;
    padding-block-start: var(--gap-24);
    padding-block-end: var(--gap-24);
    display: inline-flex;
    width: 100%;
    gap: 0px var(--gap-8);
    flex-wrap: wrap;
}

    .iute-calculation-form h3 bdi,
    .iute-calculation-form h2 bdi {
        white-space: nowrap;
    }

.iute-calculation-form .iute-container {
    display: flex;
    width: 100%;
    gap: var(--gap-24);
}

    .iute-calculation-form .iute-container .left-side {
        width: 100%;
    }

    .iute-calculation-form .iute-container .right-side {
        width: 240px;
        flex-shrink: 0;
    }

        .iute-calculation-form .iute-container .right-side h6 {
            font-size: 14px;
            color: var(--color-text-basic);
            font-weight: 700;
            margin-block-end: var(--gap-4);
        }

        .iute-calculation-form .iute-container .right-side .logo {
            background: url('../../Content/Images/Iute/logo-full.svg') no-repeat center center transparent;
            background-size: contain;
            width: 100px;
            height: 40px;
            margin-block-end: var(--gap-16);
        }

        .iute-calculation-form .iute-container .right-side ul {
            display: block;
            list-style: none;
            font-weight: 500;
        }

            .iute-calculation-form .iute-container .right-side ul li {
                display: flex;
                gap: var(--gap-8);
                width: 100%;
                align-items: center;
                padding-block: var(--gap-4);
            }

                .iute-calculation-form .iute-container .right-side ul li i {
                    display: block;
                    width: 24px;
                    height: 24px;
                    background: url('../../Content/Images/Iute/icon-check-bullet.svg') no-repeat center center transparent;
                    background-size: contain;
                    flex-shrink: 0;
                }

                .iute-calculation-form .iute-container .right-side ul li span {
                    width: 100%;
                }

.iute-calculation-form p {
    margin-block-end: var(--gap-24);
}

.iute-calculation-form .slider-input-group {
    display: flex;
    gap: var(--gap-24);
    margin-block-end: var(--gap-24);
}

    .iute-calculation-form .slider-input-group > *:first-child {
        width: 100%;
        margin-block-start: var(--gap-8);
    }

    .iute-calculation-form .slider-input-group > *:last-child,
    .select-new.floating-select.iute-months-select {
        width: 150px;
        flex-shrink: 0;
    }

        .select-new.floating-select.iute-months-select span {
            text-transform: uppercase;
        }

        .iute-calculation-form .callout {
            margin-block-start: 30px;
        }

.iute-calculation-form .loan-details {
    background: var(--color-bg-panel);
    padding: var(--gap-24);
    border-radius: var(--radius-16);
    margin-block-start: var(--gap-32);
}

    .iute-calculation-form .loan-details h3 {
        padding-block: var(--gap-0);
        margin-block-start: var(--gap-0);
        align-items: center;
    }

    .iute-calculation-form .loan-details .heading {
        display: flex;
        gap: var(--gap-24);
        justify-content: center;
    }

        .iute-calculation-form .loan-details .heading .collapser-btn {
            border-radius: var(--gap-8);
            border: 1px solid var(--color-border-basic);
            width: 40px;
            height: 40px;
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            padding: var(--gap-0);
            flex-shrink: 0;
        }

        .iute-calculation-form .loan-details .heading .hide-content {
            display: inline-block;
        }

    .iute-calculation-form .loan-details.collapsed .heading .hide-content {
        display: none;
    }

    .iute-calculation-form .loan-details .heading .show-content {
        display: none;
    }

    .iute-calculation-form .loan-details.collapsed .heading .show-content {
        display: inline-block;
    }



    .iute-calculation-form .loan-details .item {
        display: flex;
        border-block-end: 1px solid var(--color-border-basic);
        justify-content: space-between;
        padding-block: var(--gap-16);
        font-size: 16px;
    }

        .iute-calculation-form .loan-details .item:first-child {
            padding-block-start: var(--gap-32);
        }

        .iute-calculation-form .loan-details .item:last-child {
            border-block-end: 0px none transparent;
            padding-block-end: var(--gap-0);
            text-align: end;
        }

        .iute-calculation-form .loan-details .item h6 {
            font-weight: 400;
        }

        .iute-calculation-form .loan-details .item > *:last-child {
            font-weight: 700;
            text-align: end;
            display: flex;
        }

        .iute-calculation-form .loan-details .item .format-money-int {
            white-space: nowrap;
        }

        .iute-calculation-form .loan-details .item bdi span {
            white-space: nowrap;
        }

.iute-calculation-form .footing {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16);
    text-align: center;
    padding-block-end: var(--gap-32);
    font-size: 16px;
    font-weight: 500;
}

    .iute-calculation-form .footing .new-btn {
        margin-block-end: var(--gap-4);
    }

    .iute-calculation-form .footing .btn-link {
        padding-block: var(--gap-0);
    }

.iute-calculator .iute-calculation-form .footing {
    padding-block-end: var(--gap-16);
}



@media (max-width: 991px) {


    .iute-calculation-form {
        background-color: var(--color-bg-panel);
        border-radius: var(--radius-16);
        padding: var(--gap-24);
        margin-block-start: var(--gap-32);
    }

        .iute-calculation-form h3,
        .iute-calculation-form h2 {
            padding-block-start: var(--gap-0);
            padding-block-end: var(--gap-24);
        }



        .iute-calculation-form .loan-details {
            padding: var(--gap-0);
        }
}

@media (max-width: 767px) {

    .iute-calculation-form .iute-container {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: var(--gap-0);
    }

        .iute-calculation-form .iute-container .left-side,
        .iute-calculation-form .iute-container .right-side {
            width: 100%;
            margin-block-start: var(--gap-32);
        }

        .page-checkout .iute-container .left-side {
            width: 100%;
            margin-block-start: var(--gap-0);
        }

    .iute-calculation-form h2 {
        padding-block-end: var(--gap-0);
    }
}

@media (max-width: 475px) {
    .iute-calculation-form .slider-input-group {
        flex-direction: column;
        gap: var(--gap-16);
    }

        .iute-calculation-form .slider-input-group > *:last-child,
        .select-new.floating-select.iute-months-select {
            width: 100%;
        }

    .iute-calculation-form .loan-details h3 {
        font-size: 20px;
        font-weight: 700;
    }
}

/* #endregion ---------------/ Iute ---------------------------- */
/* #region --------------- Modal: Iute Step 2 ------------------ */
.modal-iute-step-2 .textboxes {
    display: flex;
    flex-direction: column;
    gap: var(--gap-8);
    padding-inline: var(--gap-32);
    padding-block-start: var(--gap-24);
    padding-block-end: var(--gap-16);
}

.modal-iute-step-2 .checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16);
    padding-inline: var(--gap-32);
    padding-block-end: var(--gap-16);
}

.modal-iute-step-2 .callout-section {
    padding-inline: var(--gap-32);
    padding-block: var(--gap-16);
}

.modal-iute-step-2 .section-stepper {
    border-block-end: 1px solid var(--color-border-muted);
    padding-block: var(--gap-16);
}

.section-stepper bdi > span:last-child {
    margin-left: var(--gap-4);
}

@media (max-width: 475px) {
    .modal-iute-step-2 .textboxes,
    .modal-iute-step-2 .checkboxes,
    .modal-iute-step-2 .callout-section {
        padding-inline: var(--gap-8);
    }
}
/* #endregion -----------/ Modal: Iute Step 2 ------------------ */
/* #region --------------- Modal: Iute Step 3 ------------------ */
.modal-iute-step-3 .section-stepper {
    border-block-end: 1px solid var(--color-border-muted);
    padding-block: var(--gap-16);
}

.modal-iute-step-3 .description {
    padding-inline: var(--gap-32);
    padding-block: var(--gap-32);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--gap-8);
}

    .modal-iute-step-3 .description h2 {
        font-size: 16px;
        font-weight: 700;
    }

.modal-iute-step-3 .qr {
    padding-block: var(--gap-16);
    text-align: center;
}

    .modal-iute-step-3 .qr img {
        display: inline-block;
        width: 240px;
        height: 240px;
        object-fit: contain;
    }


.modal-iute-step-3 .link {
    padding-block: var(--gap-16);
    text-align: center;
}

.modal-iute-step-3 .modal-footer .new-btn {
    display: flex;
    height: 50px;
    align-items: center;
    width: auto;
}

    .modal-iute-step-3 .modal-footer .new-btn i {
        font-size: 14px;
        display: inline-block;
        margin-inline-end: var(--gap-4);
    }

.modal-iute-step-3 .modal-footer {
    justify-content: space-between !important;
}

*[dir='rtl'] .modal-iute-step-3 .modal-footer .new-btn i.ci-caret-left {
    transform: rotate(180deg);
}

@media (max-width: 475px) {
    .modal-iute-step-3 .modal-footer {
        padding-inline: var(--gap-0);
        gap: 0px;
    }

        .modal-iute-step-3 .modal-footer .btn-default {
            width: 50px;
            min-width: 0px;
        }

            .modal-iute-step-3 .modal-footer .btn-default span {
                display: none;
            }
}

/* #endregion -----------/ Modal: Iute Step 3 ------------------ */
@media (max-width: 991px) {
    .ad-details-page .save-ad-area, .ad-details-page .seller-info-area, .ad-details-page .right-side .delivery-area, .ad-details-page .seller-contacts, .ad-details-page .manage-block, .ad-details-page .address-area, .ad-details-page .sellers-ads-area {
        display: none !important;
    }
}


/* #endregion ================================ /Ad Details ============================================ */
/* #region ======================================= ADMIN =============================================== */
/* #region -------------------------- Media Library ------------------------------ */
.media-library-table {
    table-layout: fixed;
}

    .media-library-table tbody tr td:nth-child(4) {
        word-break: break-all;
        word-wrap: break-word;
    }


/* #endregion ---------------------- /Media Library ------------------------------ */
/* #endregion ================================== /ADMIN =============================================== */
/* #region ================================== User Settings ============================================ */
.new-btn.btn-primary.btn-save-profile,
.new-btn.btn-primary.btn-change-password,
.new-btn.btn-primary.btn-manage-account {
    display: block;
    text-shadow: none;
    width: calc(100% - 35px);
}


/* #endregion ============================= /User Settings ============================================ */
/* #region ========================= Modal: Manage account options ===================================== */

.modal-acc-manage-options .modal-dialog {
    max-width: 700px;
    top: calc(50% - 322px);
}

    .modal-acc-manage-options .modal-dialog .body-container {
        padding: 15px 15px 15px 15px;
        margin: 0px auto;
        width: 670px;
    }

.modal-acc-manage-options label {
    display: block;
    width: 100%;
    position: relative;
}

    .modal-acc-manage-options label + label {
        margin-top: 10px;
    }

.modal-acc-manage-options .panel {
    display: block;
    width: 100%;
    position: relative;
    border-radius: var(--radius-4);
    padding: 25px 25px 25px 60px;
    background-color: #F2F2F2;
}

*[dir='rtl'] .modal-acc-manage-options .panel {
    padding: 25px 60px 25px 25px;
}

.modal-acc-manage-options label input {
    display: none;
}

.modal-acc-manage-options input[type='radio']:checked + .panel {
    background-color: #E6F4ED;
}

.modal-acc-manage-options label .icon {
    display: block;
    position: absolute;
    top: calc(50% - 11px);
    left: 20px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #DDDDDD;
}

*[dir='rtl'] .modal-acc-manage-options label .icon {
    left: auto;
    right: 20px;
}

.modal-acc-manage-options label .icon .ci-pazar-small {
    font-size: 18px;
    font-size: 14px;
    margin-left: 4px;
    margin-top: 4px;
    display: none;
}

*[dir='rtl'] .modal-acc-manage-options label .icon .ci-pazar-small {
    margin-left: 0px;
    margin-right: 4px;
}

.modal-acc-manage-options label input[type='radio']:checked + .panel .icon {
    background-color: var(--color-bg-primary);
}

    .modal-acc-manage-options label input[type='radio']:checked + .panel .icon .ci-pazar-small {
        display: inline-block;
    }

.modal-acc-manage-options label .title {
    font-size: 28px;
    font-weight: 500;
    display: block;
    width: 100%;
    margin-bottom: 10px;
    line-height: 26px;
}

.modal-acc-manage-options .warning-message {
    position: relative;
    padding: 0px 0px 0px 40px;
}

*[dir='rtl'] .modal-acc-manage-options .warning-message {
    padding: 0px 40px 0px 0px;
}

.modal-acc-manage-options .warning-message .icon {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-bg-warning);
    color: var(--color-text-basic);
    font-weight: 500;
    font-size: 17px;
    position: absolute;
    top: 2px;
    left: 0px;
    padding: 2px 10px 2px 10px;
}

*[dir='rtl'] .modal-acc-manage-options .warning-message .icon {
    left: auto;
    right: 0px;
}



@media (max-width: 728px) {
    .modal-acc-manage-options .modal-dialog {
        max-width: 100%;
        top: 0px;
    }

        .modal-acc-manage-options .modal-dialog .body-container {
            margin: 0px auto;
            width: 100%;
        }
}

@media (max-width: 600px) {
    .modal-acc-manage-options .modal-dialog .title {
        font-size: 18px;
    }

    .modal-acc-manage-options .panel {
        padding: 15px 15px 18px 60px;
    }

    *[dir='rtl'] .modal-acc-manage-options .panel {
        padding: 15px 60px 18px 15px;
    }
}

@media(max-width: 500px) {
    .modal-acc-manage-options .modal-dialog .body-container {
        padding: 0px;
    }

    .modal-acc-manage-options .modal-dialog .modal-footer .new-btn {
        min-width: 0px;
    }
}


@media (max-height: 620px) {

    .modal.show.modal-acc-manage-options {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.modal-acc-manage-options .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.modal-acc-manage-options .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.modal-acc-manage-options .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.modal-acc-manage-options .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.modal-acc-manage-options .modal-dialog .modal-footer {
        height: 69px;
    }
}
/* #endregion ==================== /Modal: Manage account options ===================================== */
/* #region ========================= Modal: Account Delete reasons ===================================== */
.modal-acc-reasons .modal-dialog {
    max-width: 700px;
    top: calc(50% - 320px);
}

    .modal-acc-reasons .modal-dialog .body-container {
        display: block;
        padding: 25px 15px 15px 15px;
        margin: 0px auto;
        width: 600px;
    }

    .modal-acc-reasons .modal-dialog h5 {
        font-size: 18px;
        font-weight: 400;
    }

@media (max-width: 728px) {
    .modal-acc-reasons .modal-dialog {
        max-width: 100%;
        top: 0px;
    }

        .modal-acc-reasons .modal-dialog .body-container {
            display: block;
            padding: 25px 15px 15px 15px;
            margin: 0px auto;
            width: 100%;
        }

        .modal-acc-reasons .modal-dialog .radio.radio-alternate {
            position: relative;
            padding-left: 30px;
            margin-top: 5px;
            margin-bottom: 10px;
        }

    *[dir='rtl'] .modal-acc-reasons .modal-dialog .radio.radio-alternate {
        padding-left: 0px;
        padding-right: 30px;
    }

    .modal-acc-reasons .modal-dialog .radio.radio-alternate i {
        position: absolute;
        left: 0px;
        top: calc(50% - 15px);
    }

    *[dir='rtl'] .modal-acc-reasons .modal-dialog .radio.radio-alternate i {
        right: 0px;
        left: auto;
    }
}

@media (max-width: 600px) {
    .modal-acc-reasons .modal-dialog h5 {
        font-size: 14px;
    }
}

@media (max-width: 500px) {
    .modal-acc-reasons .modal-dialog .modal-footer .new-btn {
        min-width: 0px;
    }

    .modal-acc-reasons .modal-dialog .modal-body {
        padding: 0px;
    }
}

@media (max-height: 620px) {

    .modal.show.modal-acc-reasons {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.modal-acc-reasons .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.modal-acc-reasons .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.modal-acc-reasons .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.modal-acc-reasons .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.modal-acc-reasons .modal-dialog .modal-footer {
        height: 69px;
    }
}

/* #endregion ==================== /Modal: Account Delete reasons ===================================== */
/* #region ================== Modal: Account deactivation confirmation ways ============================ */
.modal-acc-deactivation-confirm-ways .modal-dialog,
.modal-acc-deletion-confirm-ways .modal-dialog {
    max-width: 700px;
    top: calc(50% - 400px);
}

    .modal-acc-deactivation-confirm-ways .modal-dialog .body-container,
    .modal-acc-deletion-confirm-ways .modal-dialog .body-container {
        padding: 15px 15px 15px 15px;
        width: 670px;
        margin: 0px auto;
    }

.modal-acc-deactivation-confirm-ways label,
.modal-acc-deletion-confirm-ways label {
    display: block;
    width: 100%;
    position: relative;
}

    .modal-acc-deactivation-confirm-ways label + label,
    .modal-acc-deletion-confirm-ways label + label {
        margin-top: 10px;
    }

.modal-acc-deactivation-confirm-ways .panel,
.modal-acc-deletion-confirm-ways .panel {
    display: block;
    width: 100%;
    position: relative;
    border-radius: var(--radius-4);
    padding: 20px 125px 25px 60px;
    background-color: #F2F2F2;
}

*[dir='rtl'] .modal-acc-deactivation-confirm-ways .panel,
*[dir='rtl'] .modal-acc-deletion-confirm-ways .panel {
    padding: 20px 60px 25px 125px;
}

.modal-acc-deactivation-confirm-ways label input,
.modal-acc-deletion-confirm-ways label input {
    display: none;
}

.modal-acc-deactivation-confirm-ways input[type='radio']:checked + .panel,
.modal-acc-deletion-confirm-ways input[type='radio']:checked + .panel {
    background-color: #E6F4ED;
}

.modal-acc-deactivation-confirm-ways label .icon,
.modal-acc-deletion-confirm-ways label .icon {
    display: block;
    position: absolute;
    top: calc(50% - 11px);
    left: 20px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #DDDDDD;
}

*[dir='rtl'] .modal-acc-deactivation-confirm-ways label .icon,
*[dir='rtl'] .modal-acc-deletion-confirm-ways label .icon {
    left: auto;
    right: 20px;
}

.modal-acc-deactivation-confirm-ways label .icon .ci-pazar-small,
.modal-acc-deletion-confirm-ways label .icon .ci-pazar-small {
    font-size: 18px;
    font-size: 14px;
    margin-left: 4px;
    margin-top: 4px;
    display: none;
}

*[dir='rtl'] .modal-acc-deactivation-confirm-ways label .icon .ci-pazar-small,
*[dir='rtl'] .modal-acc-deletion-confirm-ways label .icon .ci-pazar-small {
    margin-left: 0px;
    margin-right: 4px;
}

.modal-acc-deactivation-confirm-ways label input[type='radio']:checked + .panel .icon,
.modal-acc-deletion-confirm-ways label input[type='radio']:checked + .panel .icon {
    background-color: var(--color-bg-primary);
}

    .modal-acc-deactivation-confirm-ways label input[type='radio']:checked + .panel .icon .ci-pazar-small,
    .modal-acc-deletion-confirm-ways label input[type='radio']:checked + .panel .icon .ci-pazar-small {
        display: inline-block;
    }

.modal-acc-deactivation-confirm-ways label .title,
.modal-acc-deletion-confirm-ways label .title {
    font-size: 18px;
    font-weight: 500;
    display: block;
    width: 100%;
    margin-bottom: 10px;
    line-height: 26px;
}

.modal-acc-deactivation-confirm-ways .image-container,
.modal-acc-deletion-confirm-ways .image-container {
    display: block;
    position: absolute;
    top: calc(50% - 55px);
    right: 14px;
    width: 110px;
    height: 110px;
}

*[dir='rtl'] .modal-acc-deactivation-confirm-ways .image-container,
*[dir='rtl'] .modal-acc-deletion-confirm-ways .image-container {
    right: auto;
    left: 5px;
}

.modal-acc-deactivation-confirm-ways .image-container .inner,
.modal-acc-deletion-confirm-ways .image-container .inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}


.modal-acc-deactivation-confirm-ways .image-container .cloud-1,
.modal-acc-deactivation-confirm-ways .image-container .cloud-2,
.modal-acc-deactivation-confirm-ways .image-container .cloud-3,
.modal-acc-deactivation-confirm-ways .image-container .cloud-4,
.modal-acc-deactivation-confirm-ways .image-container .cloud-5,
.modal-acc-deactivation-confirm-ways .image-container .cloud-6,
.modal-acc-deactivation-confirm-ways .image-container .cloud-7,
.modal-acc-deactivation-confirm-ways .image-container .cloud-8,
.modal-acc-deletion-confirm-ways .image-container .cloud-1,
.modal-acc-deletion-confirm-ways .image-container .cloud-2,
.modal-acc-deletion-confirm-ways .image-container .cloud-3,
.modal-acc-deletion-confirm-ways .image-container .cloud-4,
.modal-acc-deletion-confirm-ways .image-container .cloud-5,
.modal-acc-deletion-confirm-ways .image-container .cloud-6,
.modal-acc-deletion-confirm-ways .image-container .cloud-7,
.modal-acc-deletion-confirm-ways .image-container .cloud-8 {
    display: block;
    position: absolute;
    border-radius: 50%;
    background-color: #E2E2E2;
    z-index: 1;
}

.modal-acc-deactivation-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-1,
.modal-acc-deactivation-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-2,
.modal-acc-deactivation-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-3,
.modal-acc-deactivation-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-4,
.modal-acc-deactivation-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-5,
.modal-acc-deactivation-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-6,
.modal-acc-deactivation-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-7,
.modal-acc-deactivation-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-8,
.modal-acc-deletion-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-1,
.modal-acc-deletion-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-2,
.modal-acc-deletion-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-3,
.modal-acc-deletion-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-4,
.modal-acc-deletion-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-5,
.modal-acc-deletion-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-6,
.modal-acc-deletion-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-7,
.modal-acc-deletion-confirm-ways input[type='radio']:checked + .panel .image-container .cloud-8 {
    background-color: #d3e4db;
}

.modal-acc-deactivation-confirm-ways .password .image-container .cloud-1,
.modal-acc-deletion-confirm-ways .password .image-container .cloud-1,
.modal-acc-deactivation-confirm-ways .social-media-2 .image-container .cloud-1,
.modal-acc-deletion-confirm-ways .social-media-2 .image-container .cloud-1 {
    width: 40%;
    height: 40%;
    top: 7%;
    left: 12%;
    -webkit-animation: acc-cloud-password-1 1.2s ease-in-out infinite alternate;
    animation: acc-cloud-password-1 1.2s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .password .image-container .cloud-2,
.modal-acc-deletion-confirm-ways .password .image-container .cloud-2,
.modal-acc-deactivation-confirm-ways .social-media-2 .image-container .cloud-2,
.modal-acc-deletion-confirm-ways .social-media-2 .image-container .cloud-2 {
    width: 30%;
    height: 30%;
    top: 14%;
    left: 38%;
    -webkit-animation: acc-cloud-password-2 1.4s ease-in-out infinite alternate;
    animation: acc-cloud-password-2 1.4s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .password .image-container .cloud-3,
.modal-acc-deletion-confirm-ways .password .image-container .cloud-3,
.modal-acc-deactivation-confirm-ways .social-media-2 .image-container .cloud-3,
.modal-acc-deletion-confirm-ways .social-media-2 .image-container .cloud-3 {
    width: 50%;
    height: 50%;
    top: 13%;
    left: 50%;
    -webkit-animation: acc-cloud-password-3 1.3s ease-in-out infinite alternate;
    animation: acc-cloud-password-3 1.3s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .password .image-container .cloud-4,
.modal-acc-deletion-confirm-ways .password .image-container .cloud-4,
.modal-acc-deactivation-confirm-ways .social-media-2 .image-container .cloud-4,
.modal-acc-deletion-confirm-ways .social-media-2 .image-container .cloud-4 {
    width: 31%;
    height: 31%;
    top: 49%;
    left: 69%;
    -webkit-animation: acc-cloud-password-4 1.6s ease-in-out infinite alternate;
    animation: acc-cloud-password-4 1.6s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .password .image-container .cloud-5,
.modal-acc-deletion-confirm-ways .password .image-container .cloud-5,
.modal-acc-deactivation-confirm-ways .social-media-2 .image-container .cloud-5,
.modal-acc-deletion-confirm-ways .social-media-2 .image-container .cloud-5 {
    width: 55%;
    height: 55%;
    top: 38%;
    left: 28%;
    -webkit-animation: acc-cloud-password-5 1.2s ease-in-out infinite alternate;
    animation: acc-cloud-password-5 1.2s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .password .image-container .cloud-6,
.modal-acc-deletion-confirm-ways .password .image-container .cloud-6,
.modal-acc-deactivation-confirm-ways .social-media-2 .image-container .cloud-6,
.modal-acc-deletion-confirm-ways .social-media-2 .image-container .cloud-6 {
    width: 45%;
    height: 45%;
    top: 42%;
    left: 7%;
    -webkit-animation: acc-cloud-password-6 1.4s ease-in-out infinite alternate;
    animation: acc-cloud-password-6 1.4s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .password .image-container .cloud-7,
.modal-acc-deletion-confirm-ways .password .image-container .cloud-7,
.modal-acc-deactivation-confirm-ways .social-media-2 .image-container .cloud-7,
.modal-acc-deletion-confirm-ways .social-media-2 .image-container .cloud-7 {
    width: 25%;
    height: 25%;
    top: 33%;
    left: 0%;
    -webkit-animation: acc-cloud-password-7 1.4s ease-in-out infinite alternate;
    animation: acc-cloud-password-7 1.4s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .password .image-container .lock-password,
.modal-acc-deletion-confirm-ways .password .image-container .lock-password {
    width: 65%;
    height: 65%;
    top: 17%;
    left: 19%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/UserSettings/clipart-lock-password.svg') no-repeat center center transparent;
    background-size: contain;
}

.modal-acc-deactivation-confirm-ways .social-media-2 .image-container .clipart-facebook,
.modal-acc-deletion-confirm-ways .social-media-2 .image-container .clipart-facebook {
    width: 55%;
    height: 55%;
    top: 24%;
    left: 23%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/UserSettings/cllipart-facebook.svg') no-repeat center center transparent;
    background-size: contain;
}

.modal-acc-deactivation-confirm-ways .image-container .shimm-placeholder .shimm-item,
.modal-acc-deletion-confirm-ways .image-container .shimm-placeholder .shimm-item {
    height: 110px
}

@media (max-width: 600px) {
    .modal-acc-deactivation-confirm-ways .image-container .shimm-placeholder .shimm-item,
    .modal-acc-deletion-confirm-ways .image-container .shimm-placeholder .shimm-item {
        height: 80px
    }
}

.textbox-code.shimm-item {
    max-width: 60px;
}

@keyframes acc-cloud-password-1 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(7%, 7%);
    }
}

@-webkit-keyframes acc-cloud-password-1 {
    from {
        -webkit-transform: translate(-6%, -6%);
    }

    to {
        -webkit-transform: translate(7%, 7%);
    }
}

@keyframes acc-cloud-password-2 {
    from {
        transform: translate(0%, 7%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@-webkit-keyframes acc-cloud-password-2 {
    from {
        -webkit-transform: translate(0%, 7%);
    }

    to {
        -webkit-transform: translate(0%, -5%);
    }
}

@keyframes acc-cloud-password-3 {
    from {
        transform: translate(4%, -7%);
    }

    to {
        transform: translate(-7%, 5%);
    }
}

@-webkit-keyframes acc-cloud-password-3 {
    from {
        transform: translate(4%, -7%);
    }

    to {
        transform: translate(-7%, 5%);
    }
}

@keyframes acc-cloud-password-4 {
    from {
        transform: translate(8%, 8%);
    }

    to {
        transform: translate(-6%, -8%);
    }
}

@-webkit-keyframes acc-cloud-password-4 {
    from {
        -webkit-transform: translate(8%, 8%);
    }

    to {
        -webkit-transform: translate(-6%, -8%);
    }
}

@keyframes acc-cloud-password-5 {
    from {
        transform: translate(-2%, -7%);
    }

    to {
        transform: translate(2%, 6%);
    }
}

@-webkit-keyframes acc-cloud-password-5 {
    from {
        -webkit-transform: translate(-2%, -7%);
    }

    to {
        -webkit-transform: translate(2%, 6%);
    }
}

@keyframes acc-cloud-password-6 {
    from {
        transform: translate(-2%, 6%);
    }

    to {
        transform: translate(2%, -6%);
    }
}

@-webkit-keyframes acc-cloud-password-6 {
    from {
        -webkit-transform: translate(-2%, 6%);
    }

    to {
        -webkit-transform: translate(2%, -6%);
    }
}

@keyframes acc-cloud-password-7 {
    from {
        transform: translate(8%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

@-webkit-keyframes acc-cloud-password-7 {
    from {
        -webkit-transform: translate(8%, 0%);
    }

    to {
        -webkit-transform: translate(-5%, 0%);
    }
}


.modal-acc-deactivation-confirm-ways .envelope .image-container .cloud-1,
.modal-acc-deletion-confirm-ways .envelope .image-container .cloud-1 {
    width: 37%;
    height: 37%;
    top: 23%;
    left: 5%;
    -webkit-animation: acc-cloud-envelope-1 1.2s ease-in-out infinite alternate;
    animation: acc-cloud-envelope-1 1.2s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .envelope .image-container .cloud-2,
.modal-acc-deletion-confirm-ways .envelope .image-container .cloud-2 {
    width: 31%;
    height: 31%;
    top: 10%;
    left: 25%;
    -webkit-animation: acc-cloud-envelope-2 1.4s ease-in-out infinite alternate;
    animation: acc-cloud-envelope-2 1.4s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .envelope .image-container .cloud-3,
.modal-acc-deletion-confirm-ways .envelope .image-container .cloud-3 {
    width: 50%;
    height: 50%;
    top: 16%;
    left: 38%;
    -webkit-animation: acc-cloud-envelope-3 1.1s ease-in-out infinite alternate;
    animation: acc-cloud-envelope-3 1.1s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .envelope .image-container .cloud-4,
.modal-acc-deletion-confirm-ways .envelope .image-container .cloud-4 {
    width: 30%;
    height: 30%;
    top: 47%;
    left: 69%;
    -webkit-animation: acc-cloud-envelope-4 1.5s ease-in-out infinite alternate;
    animation: acc-cloud-envelope-4 1.5s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .envelope .image-container .cloud-5,
.modal-acc-deletion-confirm-ways .envelope .image-container .cloud-5 {
    width: 40%;
    height: 40%;
    top: 49%;
    left: 46%;
    -webkit-animation: acc-cloud-envelope-5 1.3s ease-in-out infinite alternate;
    animation: acc-cloud-envelope-5 1.3s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .envelope .image-container .cloud-6,
.modal-acc-deletion-confirm-ways .envelope .image-container .cloud-6 {
    width: 50%;
    height: 50%;
    top: 39%;
    left: 15%;
    -webkit-animation: acc-cloud-envelope-6 1.1s ease-in-out infinite alternate;
    animation: acc-cloud-envelope-6 1.1s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .envelope .image-container .cloud-7,
.modal-acc-deletion-confirm-ways .envelope .image-container .cloud-7 {
    width: 30%;
    height: 30%;
    top: 51%;
    left: 1%;
    -webkit-animation: acc-cloud-envelope-7 1.5s ease-in-out infinite alternate;
    animation: acc-cloud-envelope-7 1.5s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .envelope .image-container .clipart-envelope,
.modal-acc-deletion-confirm-ways .envelope .image-container .clipart-envelope {
    width: 65%;
    height: 65%;
    top: 20%;
    left: 17%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/UserSettings/clipart-envelope.svg') no-repeat center center transparent;
    background-size: contain;
}

@keyframes acc-cloud-envelope-1 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(7%, 5%);
    }
}

@-webkit-keyframes acc-cloud-envelope-1 {
    from {
        -webkit-transform: translate(-5%, -5%);
    }

    to {
        -webkit-transform: translate(7%, 5%);
    }
}

@keyframes acc-cloud-envelope-2 {
    from {
        transform: translate(0%, 6%);
    }

    to {
        transform: translate(0%, -6%);
    }
}

@-webkit-keyframes acc-cloud-envelope-2 {
    from {
        -webkit-transform: translate(0%, 6%);
    }

    to {
        -webkit-transform: translate(0%, -6%);
    }
}

@keyframes acc-cloud-envelope-3 {
    from {
        transform: translate(4%, -7%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@-webkit-keyframes acc-cloud-envelope-3 {
    from {
        -webkit-transform: translate(4%, -7%);
    }

    to {
        -webkit-transform: translate(-4%, 4%);
    }
}

@keyframes acc-cloud-envelope-4 {
    from {
        transform: translate(-6%, 0%);
    }

    to {
        transform: translate(6%, 0%);
    }
}

@-webkit-keyframes acc-cloud-envelope-4 {
    from {
        -webkit-transform: translate(-6%, 0%);
    }

    to {
        -webkit-transform: translate(6%, 0%);
    }
}


@keyframes acc-cloud-envelope-5 {
    from {
        transform: translate(6%, 4%);
    }

    to {
        transform: translate(-6%, -4%);
    }
}

@-webkit-keyframes acc-cloud-envelope-5 {
    from {
        -webkit-transform: translate(6%, 4%);
    }

    to {
        -webkit-transform: translate(-6%, -4%);
    }
}

@keyframes acc-cloud-envelope-6 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 7%);
    }
}

@-webkit-keyframes acc-cloud-envelope-6 {
    from {
        -webkit-transform: translate(0%, -6%);
    }

    to {
        -webkit-transform: translate(0%, 7%);
    }
}

@keyframes acc-cloud-envelope-7 {
    from {
        transform: translate(-9%, 1%);
    }

    to {
        transform: translate(9%, -1%);
    }
}

@-webkit-keyframes acc-cloud-envelope-7 {
    from {
        -webkit-transform: translate(-9%, 1%);
    }

    to {
        -webkit-transform: translate(9%, -1%);
    }
}


.modal-acc-deactivation-confirm-ways .hand-phone .image-container .cloud-1,
.modal-acc-deletion-confirm-ways .hand-phone .image-container .cloud-1 {
    width: 20%;
    height: 20%;
    top: 22%;
    left: 18%;
    -webkit-animation: acc-handphone-cloud-1 1.2s ease-in-out infinite alternate;
    animation: acc-handphone-cloud-1 1.2s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .hand-phone .image-container .cloud-2,
.modal-acc-deletion-confirm-ways .hand-phone .image-container .cloud-2 {
    width: 40%;
    height: 40%;
    top: 11%;
    left: 24%;
    -webkit-animation: acc-handphone-cloud-2 1.4s ease-in-out infinite alternate;
    animation: acc-handphone-cloud-2 1.4s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .hand-phone .image-container .cloud-3,
.modal-acc-deletion-confirm-ways .hand-phone .image-container .cloud-3 {
    width: 30%;
    height: 30%;
    top: 12%;
    left: 49%;
    -webkit-animation: acc-handphone-cloud-3 0.9s ease-in-out infinite alternate;
    animation: acc-handphone-cloud-3 0.9s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .hand-phone .image-container .cloud-4,
.modal-acc-deletion-confirm-ways .hand-phone .image-container .cloud-4 {
    width: 51%;
    height: 51%;
    top: 24%;
    left: 48%;
    -webkit-animation: acc-handphone-cloud-4 1.3s ease-in-out infinite alternate;
    animation: acc-handphone-cloud-4 1.3s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .hand-phone .image-container .cloud-5,
.modal-acc-deletion-confirm-ways .hand-phone .image-container .cloud-5 {
    width: 31%;
    height: 31%;
    top: 59%;
    left: 52%;
    -webkit-animation: acc-handphone-cloud-5 1.2s ease-in-out infinite alternate;
    animation: acc-handphone-cloud-5 1.2s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .hand-phone .image-container .cloud-6,
.modal-acc-deletion-confirm-ways .hand-phone .image-container .cloud-6 {
    width: 40%;
    height: 40%;
    top: 49%;
    left: 29%;
    -webkit-animation: acc-handphone-cloud-6 1.6s ease-in-out infinite alternate;
    animation: acc-handphone-cloud-6 1.6s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .hand-phone .image-container .cloud-7,
.modal-acc-deletion-confirm-ways .hand-phone .image-container .cloud-7 {
    width: 45%;
    height: 45%;
    top: 44%;
    left: 5%;
    -webkit-animation: acc-handphone-cloud-7 1.4s ease-in-out infinite alternate;
    animation: acc-handphone-cloud-7 1.4s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .hand-phone .image-container .cloud-8,
.modal-acc-deletion-confirm-ways .hand-phone .image-container .cloud-8 {
    width: 35%;
    height: 35%;
    top: 32%;
    left: 1%;
    -webkit-animation: acc-handphone-cloud-8 1.2s ease-in-out infinite alternate;
    animation: acc-handphone-cloud-8 1.2s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .hand-phone .image-container .clipart-handphone,
.modal-acc-deletion-confirm-ways .hand-phone .image-container .clipart-handphone {
    width: 75%;
    height: 75%;
    top: 15%;
    left: 9%;
    background: url('../../Content/Images/UserSettings/clipart-mobile-hand.svg') no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 2;
}

@keyframes acc-handphone-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@-webkit-keyframes acc-handphone-cloud-1 {
    from {
        -webkit-transform: translate(-4%, -4%);
    }

    to {
        -webkit-transform: translate(4%, 4%);
    }
}

@keyframes acc-handphone-cloud-2 {
    from {
        transform: translate(0%, 6%);
    }

    to {
        transform: translate(-1%, -6%);
    }
}

@-webkit-keyframes acc-handphone-cloud-2 {
    from {
        -webkit-transform: translate(0%, 6%);
    }

    to {
        -webkit-transform: translate(-1%, -6%);
    }
}

@keyframes acc-handphone-cloud-3 {
    from {
        transform: translate(3%, -5%);
    }

    to {
        transform: translate(-1%, 5%);
    }
}

@-webkit-keyframes acc-handphone-cloud-3 {
    from {
        -webkit-transform: translate(3%, -5%);
    }

    to {
        -webkit-transform: translate(-1%, 5%);
    }
}

@keyframes acc-handphone-cloud-4 {
    from {
        transform: translate(-10%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

@-webkit-keyframes acc-handphone-cloud-4 {
    from {
        -webkit-transform: translate(-10%, 0%);
    }

    to {
        -webkit-transform: translate(4%, 0%);
    }
}

@keyframes acc-handphone-cloud-5 {
    from {
        transform: translate(4%, 4%);
    }

    to {
        transform: translate(-4%, -5%);
    }
}

@keyframes acc-handphone-cloud-5 {
    from {
        transform: translate(4%, 4%);
    }

    to {
        transform: translate(-4%, -5%);
    }
}

@keyframes acc-handphone-cloud-6 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

@-webkit-keyframes acc-handphone-cloud-6 {
    from {
        -webkit-transform: translate(0%, -5%);
    }

    to {
        -webkit-transform: translate(0%, 5%);
    }
}

@keyframes acc-handphone-cloud-7 {
    from {
        transform: translate(-3%, 3%);
    }

    to {
        transform: translate(5%, -9%);
    }
}

@-webkit-keyframes acc-handphone-cloud-7 {
    from {
        -webkit-transform: translate(-3%, 3%);
    }

    to {
        -webkit-transform: translate(5%, -9%);
    }
}

@keyframes acc-handphone-cloud-8 {
    from {
        transform: translate(8%, 0%);
    }

    to {
        transform: translate(-3%, 0%);
    }
}

@-webkit-keyframes acc-handphone-cloud-8 {
    from {
        -webkit-transform: translate(8%, 0%);
    }

    to {
        -webkit-transform: translate(-3%, 0%);
    }
}

.modal-acc-deactivation-confirm-ways .social-media-1 .image-container .cloud-1,
.modal-acc-deletion-confirm-ways .social-media-1 .image-container .cloud-1 {
    width: 40%;
    height: 40%;
    top: 18%;
    left: 4%;
    -webkit-animation: acc-social-media-cloud-1 1.2s ease-in-out infinite alternate;
    animation: acc-social-media-cloud-1 1.2s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .social-media-1 .image-container .cloud-2,
.modal-acc-deletion-confirm-ways .social-media-1 .image-container .cloud-2 {
    width: 25%;
    height: 25%;
    top: 8%;
    left: 26%;
    -webkit-animation: acc-social-media-cloud-2 1.1s ease-in-out infinite alternate;
    animation: acc-social-media-cloud-2 1.1s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .social-media-1 .image-container .cloud-3,
.modal-acc-deletion-confirm-ways .social-media-1 .image-container .cloud-3 {
    width: 45%;
    height: 45%;
    top: 9%;
    left: 36%;
    -webkit-animation: acc-social-media-cloud-3 1.5s ease-in-out infinite alternate;
    animation: acc-social-media-cloud-3 1.5s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .social-media-1 .image-container .cloud-4,
.modal-acc-deletion-confirm-ways .social-media-1 .image-container .cloud-4 {
    width: 30%;
    height: 30%;
    top: 16%;
    left: 66%;
    -webkit-animation: acc-social-media-cloud-4 1.4s ease-in-out infinite alternate;
    animation: acc-social-media-cloud-4 1.4s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .social-media-1 .image-container .cloud-5,
.modal-acc-deletion-confirm-ways .social-media-1 .image-container .cloud-5 {
    width: 50%;
    height: 50%;
    top: 33%;
    left: 45%;
    -webkit-animation: acc-social-media-cloud-5 1.2s ease-in-out infinite alternate;
    animation: acc-social-media-cloud-5 1.2s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .social-media-1 .image-container .cloud-6,
.modal-acc-deletion-confirm-ways .social-media-1 .image-container .cloud-6 {
    width: 30%;
    height: 30%;
    top: 64%;
    left: 47%;
    -webkit-animation: acc-social-media-cloud-6 1.5s ease-in-out infinite alternate;
    animation: acc-social-media-cloud-6 1.5s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .social-media-1 .image-container .cloud-7,
.modal-acc-deletion-confirm-ways .social-media-1 .image-container .cloud-7 {
    width: 50%;
    height: 50%;
    top: 39%;
    left: 18%;
    -webkit-animation: acc-social-media-cloud-7 1.1s ease-in-out infinite alternate;
    animation: acc-social-media-cloud-7 1.1s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .social-media-1 .image-container .cloud-8,
.modal-acc-deletion-confirm-ways .social-media-1 .image-container .cloud-8 {
    width: 28%;
    height: 28%;
    top: 47%;
    left: 9%;
    -webkit-animation: acc-social-media-cloud-8 0.8s ease-in-out infinite alternate;
    animation: acc-social-media-cloud-8 0.8s ease-in-out infinite alternate;
}

.modal-acc-deactivation-confirm-ways .social-media-1 .image-container .clipart-socialmedia,
.modal-acc-deletion-confirm-ways .social-media-1 .image-container .clipart-socialmedia {
    width: 68%;
    height: 68%;
    top: 15%;
    left: 18%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/UserSettings/clipart-social-media.svg') no-repeat center center transparent;
    background-size: contain;
}

.modal-acc-deactivation-confirm-ways .social-media-1 .image-container .clipart-google,
.modal-acc-deletion-confirm-ways .social-media-1 .image-container .clipart-google {
    width: 55%;
    height: 55%;
    top: 22%;
    left: 23%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/UserSettings/clipart-google.svg') no-repeat center center transparent;
    background-size: contain;
}


@keyframes acc-social-media-cloud-1 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@-webkit-keyframes acc-social-media-cloud-1 {
    from {
        -webkit-transform: translate(-5%, -5%);
    }

    to {
        -webkit-transform: translate(5%, 5%);
    }
}

@keyframes acc-social-media-cloud-2 {
    from {
        transform: translate(1%, 6%);
    }

    to {
        transform: translate(-1%, -6%);
    }
}

@-webkit-keyframes acc-social-media-cloud-2 {
    from {
        -webkit-transform: translate(1%, 6%);
    }

    to {
        -webkit-transform: translate(-1%, -6%);
    }
}

@keyframes acc-social-media-cloud-3 {
    from {
        transform: translate(-1%, -6%);
    }

    to {
        transform: translate(1%, 6%);
    }
}

@-webkit-keyframes acc-social-media-cloud-3 {
    from {
        -webkit-transform: translate(-1%, -6%);
    }

    to {
        -webkit-transform: translate(1%, 6%);
    }
}

@keyframes acc-social-media-cloud-4 {
    from {
        transform: translate(-6%, 6%);
    }

    to {
        transform: translate(6%, -6%);
    }
}

@-webkit-keyframes acc-social-media-cloud-4 {
    from {
        -webkit-transform: translate(-6%, 6%);
    }

    to {
        -webkit-transform: translate(6%, -6%);
    }
}

@keyframes acc-social-media-cloud-5 {
    from {
        transform: translate(4%, 1%);
    }

    to {
        transform: translate(-7%, -1%);
    }
}

@-webkit-keyframes acc-social-media-cloud-5 {
    from {
        -webkit-transform: translate(4%, 1%);
    }

    to {
        -webkit-transform: translate(-7%, -1%);
    }
}

@keyframes acc-social-media-cloud-6 {
    from {
        transform: translate(-2%, -7%);
    }

    to {
        transform: translate(2%, 4%);
    }
}

@-webkit-keyframes acc-social-media-cloud-6 {
    from {
        -webkit-transform: translate(-2%, -7%);
    }

    to {
        -webkit-transform: translate(2%, 4%);
    }
}

@keyframes acc-social-media-cloud-7 {
    from {
        transform: translate(1%, -4%);
    }

    to {
        transform: translate(-1%, 3%);
    }
}

@-webkit-keyframes acc-social-media-cloud-7 {
    from {
        -webkit-transform: translate(1%, -4%);
    }

    to {
        -webkit-transform: translate(-1%, 3%);
    }
}

@keyframes acc-social-media-cloud-8 {
    from {
        transform: translate(-3%, 0%);
    }

    to {
        transform: translate(5%, 0%);
    }
}

@-webkit-keyframes acc-social-media-cloud-8 {
    from {
        -webkit-transform: translate(-3%, 0%);
    }

    to {
        -webkit-transform: translate(5%, 0%);
    }
}

@media(max-width: 767px) {
    .modal-acc-deactivation-confirm-ways .modal-dialog .body-container, .modal-acc-deletion-confirm-ways .modal-dialog .body-container {
        width: 100%;
    }
}

@media (max-width: 728px) {
    .modal-acc-deactivation-confirm-ways .modal-dialog,
    .modal-acc-deletion-confirm-ways .modal-dialog {
        max-width: 100%;
        top: 0px;
    }
}

@media (max-width: 600px) {
    .modal-acc-deactivation-confirm-ways .image-container,
    .modal-acc-deletion-confirm-ways .image-container {
        display: block;
        top: calc(50% - 40px);
        right: 14px;
        width: 80px;
        height: 80px;
    }

    *[dir='rtl'] .modal-acc-deactivation-confirm-ways .image-container,
    *[dir='rtl'] .modal-acc-deletion-confirm-ways .image-container {
        right: auto;
        left: 14px;
    }

    .modal-acc-deactivation-confirm-ways .panel,
    .modal-acc-deletion-confirm-ways .panel {
        padding: 20px 100px 25px 60px;
    }

    *[dir='rtl'] .modal-acc-deactivation-confirm-ways .panel,
    *[dir='rtl'] .modal-acc-deletion-confirm-ways .panel {
        padding: 20px 60px 25px 100px;
    }
}

@media (max-width: 500px) {
    .modal-acc-deactivation-confirm-ways .image-container,
    *[dir='rtl'] .modal-acc-deactivation-confirm-ways .image-container,
    .modal-acc-deletion-confirm-ways .image-container,
    *[dir='rtl'] .modal-acc-deletion-confirm-ways .image-container {
        display: none;
    }

    .modal-acc-deactivation-confirm-ways .panel,
    .modal-acc-deletion-confirm-ways .panel {
        padding: 20px 20px 25px 60px;
    }

    *[dir='rtl'] .modal-acc-deactivation-confirm-ways .panel,
    *[dir='rtl'] .modal-acc-deletion-confirm-ways .panel {
        padding: 20px 60px 25px 20px;
    }

    .modal-acc-deactivation-confirm-ways .modal-footer .new-btn,
    .modal-acc-deletion-confirm-ways .modal-footer .new-btn {
        min-width: 0px;
    }
}

@media (max-width: 450px) {
    .modal-acc-deactivation-confirm-ways .modal-dialog .body-container,
    .modal-acc-deletion-confirm-ways .modal-dialog .body-container {
        padding: 0px;
    }

    .modal-acc-deactivation-confirm-ways label .title,
    .modal-acc-deletion-confirm-ways label .title {
        line-height: 20px;
    }
}

@media (max-height: 790px) {

    .modal.show.modal-acc-deactivation-confirm-ways,
    .modal.show.modal-acc-deletion-confirm-ways {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.modal-acc-deactivation-confirm-ways .modal-dialog,
        .modal.show.modal-acc-deletion-confirm-ways .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.modal-acc-deactivation-confirm-ways .modal-dialog .modal-content,
            .modal.show.modal-acc-deletion-confirm-ways .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.modal-acc-deactivation-confirm-ways .modal-dialog .modal-body,
            .modal.show.modal-acc-deletion-confirm-ways .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.modal-acc-deactivation-confirm-ways .modal-dialog.no-footer .modal-body,
            .modal.show.modal-acc-deletion-confirm-ways .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.modal-acc-deactivation-confirm-ways .modal-dialog .modal-footer,
    .modal.modal-acc-deletion-confirm-ways .modal-dialog .modal-footer {
        height: 69px;
    }
}
/* #endregion ============= /Modal: Account deactivation confirmation ways ============================ */
/* #region ==================== Modal: Deactivation Password Confirmation ============================== */
.modal.modal-acc-deactivation-password .modal-dialog,
.modal.modal-acc-deletion-password .modal-dialog {
    max-width: 520px;
    top: calc(50% - 260px);
}

.modal.modal-acc-deactivation-password .body-container,
.modal.modal-acc-deletion-password .body-container {
    padding: 15px 15px 15px 15px;
    width: 460px;
    margin: 0px auto;
}

.modal.modal-acc-deactivation-password h5,
.modal.modal-acc-deletion-password h5 {
    display: block;
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 70px;
}

.modal.modal-acc-deactivation-password p,
.modal.modal-acc-deletion-password p {
    margin-bottom: 20px;
}

.modal.modal-acc-deactivation-password .textbox,
.modal.modal-acc-deletion-password .textbox {
    margin-bottom: 70px;
}


.modal-acc-deletion-password .warning-message {
    position: relative;
    padding: 0px 0px 0px 35px;
    margin-top: 10px;
    margin-bottom: 30px;
}

*[dir='rtl'] .modal-acc-deletion-password .warning-message {
    padding: 0px 35px 0px 0px;
}

.modal-acc-deletion-password .warning-message .icon {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-bg-warning);
    color: var(--color-text-basic);
    font-weight: 500;
    font-size: 17px;
    position: absolute;
    top: 2px;
    left: 0px;
    padding: 2px 10px 2px 10px;
}

*[dir='rtl'] .modal-acc-deletion-password .warning-message .icon {
    left: auto;
    right: 0px;
}

@media (max-width: 728px) {
    .modal.modal-acc-deactivation-password .modal-dialog,
    .modal.modal-acc-deletion-password .modal-dialog {
        max-width: 100%;
        top: 0px;
    }

    .modal.modal-acc-deactivation-password .textbox,
    .modal.modal-acc-deletion-password .textbox {
        margin-bottom: 10px;
    }
}


@media (max-width: 500px) {
    .modal.modal-acc-deactivation-password h5,
    .modal.modal-acc-deletion-password h5 {
        margin-top: 20px;
        margin-bottom: 40px;
    }

    .modal.modal-acc-deactivation-password .modal-footer .new-btn,
    .modal.modal-acc-deletion-password .modal-footer .new-btn {
        min-width: 0px;
    }

    .modal.modal-acc-deactivation-password .body-container,
    .modal.modal-acc-deletion-password .body-container {
        width: 100%;
    }
}

@media (max-width: 350px) {
    .modal.modal-acc-deletion-password h5 {
        margin-top: 0px;
        margin-bottom: 20px;
    }
}

@media (max-height: 490px) {
    .modal.show.modal-acc-deletion-password,
    .modal.show.modal-acc-deactivation-password {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.modal-acc-deletion-password .modal-dialog,
        .modal.show.modal-acc-deactivation-password .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.modal-acc-deletion-password .modal-dialog .modal-content,
            .modal.show.modal-acc-deactivation-password .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.modal-acc-deletion-password .modal-dialog .modal-body,
            .modal.show.modal-acc-deactivation-password .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.modal-acc-deletion-password .modal-dialog.no-footer .modal-body,
            .modal.show.modal-acc-deactivation-password .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.modal-acc-deletion-password .modal-dialog .modal-footer,
    .modal.modal-acc-deactivation-password .modal-dialog .modal-footer {
        height: 69px;
    }
}

/* #endregion ================ /Modal: Deactivation Password Confirmation ============================== */
/* #region ========================== Modal: mHawala Confirmation ====================================== */
.modal.modal-mhawala-confirmation .modal-dialog {
    max-width: 520px;
    top: calc(50% - 260px);
}

.modal.modal-mhawala-confirmation .body-container {
    padding: 15px 15px 15px 15px;
    width: 460px;
    margin: 0px auto;
}

.modal.modal-mhawala-confirmation p {
    margin-bottom: 20px;
}

.modal.modal-mhawala-confirmation .textbox {
    margin-bottom: 70px;
}


.modal-mhawala-confirmation .warning-message {
    position: relative;
    padding: 0px 0px 0px 35px;
    margin-top: 10px;
    margin-bottom: 30px;
}

*[dir='rtl'] .modal-mhawala-confirmation .warning-message {
    padding: 0px 35px 0px 0px;
}

.modal-mhawala-confirmation .warning-message .icon {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-bg-warning);
    color: var(--color-text-basic);
    font-weight: 500;
    font-size: 17px;
    position: absolute;
    top: 2px;
    left: 0px;
    padding: 2px 10px 2px 10px;
}

*[dir='rtl'] .modal-mhawala-confirmation .warning-message .icon {
    left: auto;
    right: 0px;
}

/* #region Clipart */
.clipart-mhawala {
    display: block;
    margin: -20px auto 10px auto;
    width: 170px;
    height: 170px;
}

    .clipart-mhawala .logo {
        display: block;
        width: 75%;
        height: 75%;
        top: 10%;
        left: 14%;
        position: absolute;
        z-index: 1;
        background: url('../../Content/Images/mHawala/mHawala.svg') no-repeat center center transparent;
        background-size: contain;
    }

    .clipart-mhawala .clipart-cloud-1,
    .clipart-mhawala .clipart-cloud-2,
    .clipart-mhawala .clipart-cloud-3,
    .clipart-mhawala .clipart-cloud-4,
    .clipart-mhawala .clipart-cloud-5,
    .clipart-mhawala .clipart-cloud-6 {
        display: block;
        position: absolute;
        border-radius: 50%;
        background-color: #F6F6F6;
    }

    .clipart-mhawala .clipart-cloud-1 {
        top: 9%;
        left: 24%;
        width: 32%;
        height: 32%;
        -webkit-animation: paypal-clipart1-cloud-1 1.5s ease-in-out infinite alternate;
        animation: paypal-clipart1-cloud-1 1.5s ease-in-out infinite alternate;
    }

    .clipart-mhawala .clipart-cloud-2 {
        top: 12%;
        left: 45%;
        width: 35%;
        height: 35%;
        -webkit-animation: paypal-clipart1-cloud-2 1.2s ease-in-out infinite alternate;
        animation: paypal-clipart1-cloud-2 1.2s ease-in-out infinite alternate;
    }

    .clipart-mhawala .clipart-cloud-3 {
        top: 20%;
        left: 68%;
        width: 32%;
        height: 32%;
        -webkit-animation: paypal-clipart1-cloud-3 1.5s ease-in-out infinite alternate;
        animation: paypal-clipart1-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .clipart-mhawala .clipart-cloud-4 {
        top: 31%;
        left: 37%;
        width: 60%;
        height: 60%;
        -webkit-animation: paypal-clipart1-cloud-4 1.5s ease-in-out infinite alternate;
        animation: paypal-clipart1-cloud-4 1.5s ease-in-out infinite alternate;
    }

    .clipart-mhawala .clipart-cloud-5 {
        top: 66%;
        left: 24%;
        width: 26%;
        height: 26%;
        -webkit-animation: paypal-clipart1-cloud-5 1.2s ease-in-out infinite alternate;
        animation: paypal-clipart1-cloud-5 1.2s ease-in-out infinite alternate;
    }

    .clipart-mhawala .clipart-cloud-6 {
        top: 29%;
        left: 0%;
        width: 50%;
        height: 50%;
        -webkit-animation: paypal-clipart1-cloud-6 1.3s ease-in-out infinite alternate;
        animation: paypal-clipart1-cloud-6 1.3s ease-in-out infinite alternate;
    }


/* #endregion Clipart */
@media (max-width: 728px) {
    .modal.modal-mhawala-confirmation .modal-dialog {
        max-width: 100%;
        top: 0px;
    }

    .modal.modal-mhawala-confirmation .textbox {
        margin-bottom: 10px;
    }
}


@media (max-width: 500px) {

    .modal.modal-mhawala-confirmation .modal-footer .new-btn {
        min-width: 0px;
    }

    .modal.modal-mhawala-confirmation .body-container {
        width: 100%;
    }
}


@media (max-height: 490px) {

    .modal.show.modal-mhawala-confirmation {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.modal-mhawala-confirmation .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.modal-mhawala-confirmation .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.modal-mhawala-confirmation .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.modal-mhawala-confirmation .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.modal-mhawala-confirmation .modal-dialog .modal-footer {
        height: 69px;
    }
}
/* #endregion ====================== /Modal: mHawala Confirmation ====================================== */
/* #region ====================== Modal: Deactivation Email Confirmation =============================== */
.modal.modal-acc-deactivation-email .modal-dialog {
    max-width: 520px;
    top: calc(50% - 270px);
}

.modal.modal-acc-deactivation-email .body-container {
    padding: 15px 15px 15px 15px;
    width: 500px;
    margin: 0px auto;
}

.modal.modal-acc-deactivation-email h5 {
    margin-top: 30px;
    font-size: 24px;
    margin-bottom: 30px;
}

.modal.modal-acc-deactivation-email .divider-horizontal {
    margin-top: 20px;
    margin-bottom: 20px;
}

.modal.modal-acc-deactivation-email .btn-link {
    padding: 0px;
    margin-top: 20px;
    margin-bottom: 40px;
}

@media(max-width: 728px) {
    .modal.modal-acc-deactivation-email .modal-dialog {
        max-width: 100%;
        top: 0%;
    }

    .modal.modal-acc-deactivation-email .body-container {
        width: 100%;
        margin: 0px auto;
    }
}

@media(max-width: 350px) {
    .modal.modal-acc-deactivation-email h5 {
        margin-top: 0px;
        margin-bottom: 20px;
    }
}

@media (max-height: 550px) {

    .modal.modal-acc-deactivation-email.show {
        padding: 0px !important;
        margin: 0px !important;
    }

    .modal.show.modal-acc-deactivation-email .modal-dialog {
        margin: 0px;
        height: 100%;
        max-width: 100%;
        top: 0px;
    }

        .modal.show.modal-acc-deactivation-email .modal-dialog .modal-content {
            border-radius: var(--radius-0);
            border: 0px;
            height: 100%;
        }

        .modal.show.modal-acc-deactivation-email .modal-dialog .modal-body {
            max-height: calc(100% - 121px) !important;
        }

        .modal.show.modal-acc-deactivation-email .modal-dialog.no-footer .modal-body {
            max-height: calc(100% - 52px) !important;
        }

    .modal.modal-acc-deactivation-email .modal-dialog .modal-footer {
        height: 69px;
    }
}
/* #endregion ================== /Modal: Deactivation Email Confirmation =============================== */
/* #region ====================== Modal: Deactivation Phone Confirmation =============================== */
.modal.modal-acc-deactivation-phone .modal-dialog {
    max-width: 520px;
    top: calc(50% - 285px);
}

.modal.modal-acc-deactivation-phone h5 {
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.modal.modal-acc-deactivation-phone .body-container {
    padding: 15px 15px 15px 15px;
    width: 500px;
    margin: 0px auto;
}

.modal.modal-acc-deactivation-phone .divider-horizontal {
    margin-top: 20px;
    margin-bottom: 20px;
}

.modal.modal-acc-deactivation-phone .code-block {
    padding-left: 39px;
    margin-bottom: 25px;
}

.modal.modal-acc-deactivation-phone .request-timer {
    margin-top: 10px;
    margin-bottom: 10px;
}

.modal.modal-acc-deactivation-phone .body-container .btn-link {
    padding-left: 0px;
    padding-right: 0px;
}

@media (max-width: 728px) {
    .modal.modal-acc-deactivation-phone .modal-dialog {
        max-width: 100%;
        top: 0px;
    }

    .modal.modal-acc-deactivation-phone .code-block {
        padding: 0px;
        width: 388px;
        margin: 0px auto 10px auto;
    }

    .modal.modal-acc-deactivation-phone .body-container {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .modal.modal-acc-deactivation-phone .code-block .textbox-code {
        font-size: 18px;
        padding-left: 0px;
        padding-right: 0px;
        width: 40px;
        height: 40px;
    }

    .modal.modal-acc-deactivation-phone .code-block {
        padding: 0px;
        width: 268px;
        margin: 0px auto 10px auto;
    }
}

@media (max-width: 450px) {
    .modal.modal-acc-deactivation-phone h5 {
        margin-top: 0px;
        margin-bottom: 20px;
    }

    .modal.modal-acc-deactivation-phone .body-container {
        padding: 0px;
    }
}

@media (max-height: 590px) {
    .modal.show.modal-acc-deactivation-phone {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.modal-acc-deactivation-phone .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.modal-acc-deactivation-phone .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.modal-acc-deactivation-phone .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.modal-acc-deactivation-phone .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.modal-acc-deactivation-phone .modal-dialog .modal-footer {
        height: 69px;
    }
}


/* #endregion ================== /Modal: Deactivation Phone Confirmation =============================== */
/* #region ============================ Modal: Settings confirmation =================================== */
.modal.confirmation .modal-dialog {
    max-width: 650px;
    top: calc(50% - 260px);
}

.modal.confirmation h5 {
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 80px;
    padding-right: 30px;
    padding-left: 30px;
}

.modal.confirmation .clipart-area {
    display: block;
    margin: 0px auto;
    width: 190px;
    height: 190px;
    position: relative;
}

    .modal.confirmation .clipart-area .clipart-cloud-1,
    .modal.confirmation .clipart-area .clipart-cloud-2,
    .modal.confirmation .clipart-area .clipart-cloud-3,
    .modal.confirmation .clipart-area .clipart-cloud-4,
    .modal.confirmation .clipart-area .clipart-cloud-5,
    .modal.confirmation .clipart-area .clipart-cloud-6,
    .modal.confirmation .clipart-area .clipart-cloud-7 {
        position: absolute;
        border-radius: 50%;
        z-index: 1;
        background-color: #E8E8E8;
    }


    .modal.confirmation .clipart-area .clipart-cloud-1 {
        width: 34%;
        height: 34%;
        top: 7%;
        left: 15%;
        -webkit-animation: settings-confirm-cloud-1 1.6s ease-in-out infinite alternate;
        animation: settings-confirm-cloud-1 1.6s ease-in-out infinite alternate;
    }

    .modal.confirmation .clipart-area .clipart-cloud-2 {
        width: 43%;
        height: 43%;
        top: 3%;
        left: 32%;
        -webkit-animation: settings-confirm-cloud-2 1.4s ease-in-out infinite alternate;
        animation: settings-confirm-cloud-2 1.4s ease-in-out infinite alternate;
    }

    .modal.confirmation .clipart-area .clipart-cloud-3 {
        width: 55%;
        height: 53%;
        top: 8%;
        left: 45%;
        -webkit-animation: settings-confirm-cloud-3 1.8s ease-in-out infinite alternate;
        animation: settings-confirm-cloud-3 1.8s ease-in-out infinite alternate;
    }

    .modal.confirmation .clipart-area .clipart-cloud-4 {
        width: 34%;
        height: 34%;
        top: 46%;
        left: 65%;
        -webkit-animation: settings-confirm-cloud-4 1.5s ease-in-out infinite alternate;
        animation: settings-confirm-cloud-4 1.5s ease-in-out infinite alternate;
    }

    .modal.confirmation .clipart-area .clipart-cloud-5 {
        width: 54%;
        height: 54%;
        top: 41%;
        left: 29%;
        -webkit-animation: settings-confirm-cloud-5 1.7s ease-in-out infinite alternate;
        animation: settings-confirm-cloud-5 1.7s ease-in-out infinite alternate;
    }

    .modal.confirmation .clipart-area .clipart-cloud-6 {
        width: 44%;
        height: 44%;
        top: 44%;
        left: 9%;
        -webkit-animation: settings-confirm-cloud-6 1.3s ease-in-out infinite alternate;
        animation: settings-confirm-cloud-6 1.3s ease-in-out infinite alternate;
    }

    .modal.confirmation .clipart-area .clipart-cloud-7 {
        width: 54%;
        height: 54%;
        top: 18%;
        left: 1%;
        -webkit-animation: settings-confirm-cloud-7 1.4s ease-in-out infinite alternate;
        animation: settings-confirm-cloud-7 1.4s ease-in-out infinite alternate;
    }

@keyframes settings-confirm-cloud-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@-webkit-keyframes settings-confirm-cloud-1 {
    from {
        -webkit-transform: translate(-8%, -8%);
    }

    to {
        -webkit-transform: translate(4%, 4%);
    }
}

@keyframes settings-confirm-cloud-2 {
    from {
        transform: translate(0%, 8%);
    }

    to {
        transform: translate(0%, -4%);
    }
}

@-webkit-keyframes settings-confirm-cloud-2 {
    from {
        -webkit-transform: translate(0%, 8%);
    }

    to {
        -webkit-transform: translate(0%, -4%);
    }
}

@keyframes settings-confirm-cloud-3 {
    from {
        transform: translate(4%, -6%);
    }

    to {
        transform: translate(-8%, 6%);
    }
}

@-webkit-keyframes settings-confirm-cloud-3 {
    from {
        -webkit-transform: translate(4%, -6%);
    }

    to {
        -webkit-transform: translate(-8%, 6%);
    }
}

@keyframes settings-confirm-cloud-4 {
    from {
        transform: translate(-4%, -2%);
    }

    to {
        transform: translate(4%, 2%);
    }
}

@-webkit-keyframes settings-confirm-cloud-4 {
    from {
        -webkit-transform: translate(-4%, -2%);
    }

    to {
        -webkit-transform: translate(4%, 2%);
    }
}

@keyframes settings-confirm-cloud-5 {
    from {
        transform: translate(0%, 7%);
    }

    to {
        transform: translate(0%, -8%);
    }
}

@-webkit-keyframes settings-confirm-cloud-5 {
    from {
        -webkit-transform: translate(0%, 7%);
    }

    to {
        -webkit-transform: translate(0%, -8%);
    }
}

@keyframes settings-confirm-cloud-6 {
    from {
        transform: translate(4%, -7%);
    }

    to {
        transform: translate(-6%, 8%);
    }
}

@-webkit-keyframes settings-confirm-cloud-6 {
    from {
        -webkit-transform: translate(4%, -7%);
    }

    to {
        -webkit-transform: translate(-6%, 8%);
    }
}

@keyframes settings-confirm-cloud-7 {
    from {
        transform: translate(-7%, 0%);
    }

    to {
        transform: translate(6%, 0%);
    }
}

@-webkit-keyframes settings-confirm-cloud-7 {
    from {
        -webkit-transform: translate(-7%, 0%);
    }

    to {
        -webkit-transform: translate(6%, 0%);
    }
}


.modal.confirmation .clipart-area .clipart-ok {
    display: block;
    width: 40%;
    height: 40%;
    top: 24%;
    left: 32%;
    position: absolute;
    z-index: 2;
    background: url('../../Content/Images/UserSettings/clipart-ok.svg') no-repeat center center transparent;
    background-size: contain;
    -webkit-animation: settings-clipart-ok 1.3s infinite ease-in-out alternate;
    animation: settings-clipart-ok 1.3s infinite ease-in-out alternate;
}

.modal.confirmation.error h5 {
    margin-bottom: 30px;
}

.modal.confirmation .clipart-area .clipart-cancel {
    display: block;
    width: 40%;
    height: 40%;
    top: 24%;
    left: 32%;
    position: absolute;
    z-index: 2;
    background: url('../../Content/Images/clipart-cancel.svg') no-repeat center center transparent;
    background-size: contain;
    -webkit-animation: settings-clipart-ok 1.3s infinite ease-in-out alternate;
    animation: settings-clipart-ok 1.3s infinite ease-in-out alternate;
}



@keyframes settings-clipart-ok {
    from {
        transform: translateY(-7%);
    }

    to {
        transform: translateY(7%);
    }
}

@-webkit-keyframes settings-clipart-ok {
    from {
        -webkit-transform: translateY(-7%);
    }

    to {
        -webkit-transform: translateY(7%);
    }
}

.modal.confirmation .clipart-area .clipart-shadow {
    display: block;
    width: 40%;
    height: 4%;
    top: 70%;
    left: 32%;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3);
    -webkit-animation: settings-clipart-shadow 1.3s ease-in-out infinite alternate;
    animation: settings-clipart-shadow 1.3s ease-in-out infinite alternate;
}

@keyframes settings-clipart-shadow {
    from {
        opacity: 0.4;
        transform: scaleX(0.8);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@-webkit-keyframes settings-clipart-shadow {
    from {
        opacity: 0.4;
        -webkit-transform: scaleX(0.8);
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
    }
}

@media (max-width: 728px) {
    .modal.confirmation .modal-dialog {
        max-width: 100%;
        top: 0px;
    }
}

@media (max-width: 450px) {
    .modal.confirmation h5 {
        margin-top: 10px;
        margin-bottom: 40px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .modal.confirmation .clipart-area {
        width: 150px;
        height: 150px;
    }
}

@media (max-height: 530px) {

    .modal.show.confirmation {
        padding: 0px !important;
        margin: 0px !important;
    }

        .modal.show.confirmation .modal-dialog {
            margin: 0px;
            height: 100%;
            max-width: 100%;
            top: 0px;
        }

            .modal.show.confirmation .modal-dialog .modal-content {
                border-radius: var(--radius-0);
                border: 0px;
                height: 100%;
            }

            .modal.show.confirmation .modal-dialog .modal-body {
                max-height: calc(100% - 121px) !important;
            }

            .modal.show.confirmation .modal-dialog.no-footer .modal-body {
                max-height: calc(100% - 52px) !important;
            }

    .modal.confirmation .modal-dialog .modal-footer {
        height: 69px;
    }
}
/* #endregion ======================== /Modal: Settings confirmation =================================== */
/* #region ================================== Modal: New PayPal ======================================== */
.modal-custom.new-paypal .modal-window {
    top: calc(50% - 260px);
    inset-inline-start: calc(50% - 400px);
    width: 800px;
}

.modal-custom.new-paypal .modal-container {
    margin: 0px auto;
    width: 600px;
}

.modal-custom.new-paypal .modal-body {
    text-align: center;
}

    .modal-custom.new-paypal .modal-body p {
        font-size: 16px;
        line-height: 130%;
        color: var(--color-text-muted);
    }


    .modal-custom.new-paypal .modal-body .pazar-list {
        padding-block-start: var(--gap-32);
        padding-block-end: var(--gap-24);
    }

    .modal-custom.new-paypal .modal-body h3 {
        color: var(--color-text-basic);
        font-size: 20px;
        font-weight: bold;
        width: 100%;
        display: block;
        text-align: center;
        line-height: 130%;
        padding-block: var(--gap-24);
    }

    .modal-custom.new-paypal .modal-body .logo-paypal {
        display: block;
        width: 100%;
        height: 54px;
        margin-block: var(--gap-24);
        background: url('../../Content/Images/logo-paypal.svg') no-repeat center center transparent;
        background-size: contain;
    }

@media (max-width: 820px) {
    .modal-custom.new-paypal .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.new-paypal .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.new-paypal .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.new-paypal .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.new-paypal .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.new-paypal .modal-container {
        width: 100%;
    }

    .modal-custom.new-paypal .modal-footer .new-btn span {
        display: none;
    }
}

@media (max-width: 449px) {
    .modal-custom.new-paypal .modal-body p {
        font-size: 16px;
    }
}

@media (max-width: 400px) {

    .modal-custom.new-paypal .modal-body p {
        font-size: 14px;
        padding-right: 0px;
        padding-left: 0px;
    }
}

@media (max-width: 400px) {

    .modal-custom.new-paypal .modal-body p {
        font-size: 14px;
        padding-right: 0px;
        padding-left: 0px;
    }

    .modal-custom.new-paypal .modal-footer .new-btn {
        min-width: auto;
    }
}

@media (max-height: 550px) {

    .modal-custom.new-paypal .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.new-paypal .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.new-paypal .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.new-paypal .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.new-paypal .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}
/* #endregion ============================== /Modal: New PayPal ======================================== */
/* #region ================================= Modal: Remove PayPal ====================================== */
.modal-custom.remove-paypal .modal-window {
    top: calc(50% - 260px);
    inset-inline-start: calc(50% - 300px);
    width: 600px;
}

.modal-custom.remove-paypal .modal-container {
    margin: 0px auto;
    width: 600px;
}

.modal-custom.remove-paypal .modal-body {
    text-align: center;
}

    .modal-custom.remove-paypal .modal-body p {
        font-size: 16px;
        line-height: 130%;
        color: var(--color-text-muted);
        padding-block: var(--gap-32);
    }

    .modal-custom.remove-paypal .modal-body .row-clipart {
        width: 100%;
        padding-block-start: var(--gap-8);
        position: relative;
    }

    .modal-custom.remove-paypal .modal-body .clipart-remove-paypal {
        width: 200px;
        height: 200px;
        margin-inline: auto;
    }

    .modal-custom.remove-paypal .modal-body .row-clipart .clipart-mail {
        position: absolute;
        z-index: 1;
        width: 100%;
        inset-block-start: 130px;
        inset-inline-start: 0px;
        text-align: center;
        font-size: 18px;
        font-weight: 400;
        line-height: 100%;
    }


@media (max-width: 820px) {
    .modal-custom.remove-paypal .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.remove-paypal .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.remove-paypal .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.remove-paypal .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.remove-paypal .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.remove-paypal .modal-container {
        width: 100%;
    }

    .modal-custom.remove-paypal .modal-footer .new-btn span {
        display: none;
    }
}

@media (max-width: 449px) {
    .modal-custom.remove-paypal .modal-body p {
        font-size: 16px;
    }
}

@media (max-width: 400px) {

    .modal-custom.remove-paypal .modal-body p {
        font-size: 14px;
        padding-right: 0px;
        padding-left: 0px;
    }
}

@media (max-width: 400px) {

    .modal-custom.remove-paypal .modal-body p {
        font-size: 14px;
        padding-right: 0px;
        padding-left: 0px;
    }

    .modal-custom.remove-paypal .modal-footer .new-btn {
        min-width: auto;
    }
}

@media (max-height: 550px) {

    .modal-custom.remove-paypal .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.remove-paypal .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.remove-paypal .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.remove-paypal .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.remove-paypal .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}
/* #endregion ============================ /Modal: Remove PayPal ======================================= */
/* #region =================================== Search form ============================================= */
.with-online-checkbox {
    display: inline-block;
}

*[dir='rtl'] .with-online-checkbox {
    margin-right: 0px;
}


.cargo-search-checkbox {
    display: inline-block;
    cursor: pointer;
    position: relative;
}



    .cargo-search-checkbox input[type='checkbox'],
    *[dir='rtl'] .cargo-search-checkbox input[type='checkbox'] {
        margin-top: 0px;
        vertical-align: middle;
    }

.well .cargo-search-checkbox span {
    font-family: 'Manrope', Arial !important;
    padding-left: 32px;
}

*[dir='rtl'] .well .cargo-search-checkbox span {
    padding-right: 30px;
    padding-left: 0px;
}

.cargo-search-checkbox .ci-pazar {
    font-size: 28px;
    position: absolute;
}

*[dir='rtl'] .cargo-search-checkbox .ci-pazar {
}

.with-photos-checkbox {
    display: inline-block;
}

*[dir='rtl'] .with-photos-checkbox {
    margin-right: 0px;
}

.extra-search .with-online-checkbox {
    display: flex;
    align-items: center;
    padding: 0px;
    gap: var(--gap-4);
}


.extra-search .cargo-search-checkbox {
    display: flex;
    position: relative;
    align-items: center;
    gap: var(--gap-4);
}

    .extra-search .cargo-search-checkbox .ci-pazar {
        position: relative;
    }

    .extra-search .cargo-search-checkbox span {
        padding: 0px !important;
    }

.pz-search-form .extra-search .submit-search-trigger-click {
    padding: 0px !important;
    margin-inline-start: var(--gap-4) !important;
    margin-block-start: 0px;
}

.extra-search .with-photos-checkbox {
    display: flex;
    align-items: center;
    gap: var(--gap-4);
}
/* #endregion =============================== /Search form ============================================= */
/* #region ================================ /Search Results ============================================ */
/*
.result-content .span2.img-polaroid {
    display: inline-block;
    width: auto;
    float: none;
    
    object-position: center center;
    width: 100% !important;
    height: 150px;
}
*/
.result-content .img-col a {
    background-color: #ececec;
    box-shadow: #DDDDDD 0px 0px 0px 1px;
    border: solid 4px #FFFFFF;
    line-height: 150px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-col.multi img.span2.img-polaroid,
img.img-polaroid {
    box-shadow: none !important;
    border: 0px none transparent !important;
    padding: 0px !important;
}




.span2-ad-img-list {
    position: relative;
}

    .span2-ad-img-list .cargo-icon,
    .pull-left.photo .cargo-icon {
        position: absolute;
        right: 10px;
        bottom: 10px;
        z-index: 1;
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #FFFFFF;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 15px;
    }

*[dir='rtl'] .span2-ad-img-list .cargo-icon {
    right: auto;
    left: 10px;
}

.span2-ad-img-list .cargo-icon > span,
.pull-left.photo .cargo-icon > span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

    .span2-ad-img-list .cargo-icon > span > .ci-pazar,
    .pull-left.photo .cargo-icon > span > .ci-pazar {
        position: absolute;
        top: calc(50% - 16px);
        left: calc(50% - 16px);
        font-size: 32px;
    }

@media (max-width: 991px) {
    .search-result .cargo-icon {
        right: 5px !important;
        bottom: 5px !important;
    }

    *[dir='rtl'] .search-result .cargo-icon {
        right: auto !important;
        left: 5px !important;
    }
}

@media (max-width: 767px) {

    .search-result .cargo-icon {
        right: 5px !important;
        bottom: 5px !important;
        font-size: 20px !important;
        width: 32px !important;
        height: 32px !important;
    }

    *[dir='rtl'] .search-result .cargo-icon {
        right: auto !important;
        left: 5px !important;
    }


    .search-result .cargo-icon span i {
        top: calc(50% - 10px) !important;
        left: calc(50% - 10px) !important;
    }
}

@media (max-width: 320px) {
    .search-result .cargo-icon {
        right: 5px !important;
        bottom: 5px !important;
        font-size: 16px !important;
        width: 28px !important;
        height: 28px !important;
    }

    *[dir='rtl'] .search-result .cargo-icon {
        right: auto !important;
        left: 5px !important;
        bottom: 5px !important;
        font-size: 16px !important;
        width: 28px !important;
        height: 28px !important;
    }

    .search-result .cargo-icon span i {
        top: calc(50% - 8px) !important;
        left: calc(50% - 8px) !important;
    }
}


.mobile .listing-page .search-item .photo {
    position: relative;
}

.pull-left.photo .cargo-icon {
    bottom: 10px;
}

*[dir='rtl'] .pull-left.photo .cargo-icon {
    left: 10px;
    right: auto;
}
/* #endregion =============================== /Search Results ============================================ */
/* #region ===================================== Gallery =============================================== */
.gallery .thumbnails {
    margin-left: 0px;
}

    .gallery .thumbnails > li {
        margin-left: 0px !important;
        width: 100%;
    }

.gallery .thumbnail .img-shimmer-container > a {
    display: flex;
    margin-bottom: 5px;
    position: relative;
    width: calc(100% - 28px);
    background-color: #ececec;
    border: 4px solid #FFFFFF;
    box-shadow: #dddddd 0px 0px 1px 1px;
    height: 150px;
    margin-inline: auto;
    justify-content: center;
    align-items: center;
}

.gallery .thumbnail .cargo-icon {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 1;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FFFFFF;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 15px;
}

*[dir='rtl'] .gallery .thumbnail .cargo-icon {
    left: 5px;
    right: auto;
}

.gallery .thumbnail .cargo-icon > span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

    .gallery .thumbnail .cargo-icon > span > .ci-pazar {
        position: absolute;
        top: calc(50% - 16px);
        left: calc(50% - 16px);
        font-size: 32px;
    }


.gallery .thumbnail a img {
    object-fit: none;
    width: auto;
    max-height: 142px;
    display: inline-block;
}

.list-price span img {
    vertical-align: baseline;
}
/* #endregion ================================= /Gallery =============================================== */
/* #region ================================ Secondary Menu ============================================= */
.secondary-menu {
    width: 100%;
    border-bottom: 1px solid #DDDDDD;
    background-color: #FFFFFF;
    position: relative;
}

    .secondary-menu > .container {
        position: relative;
    }

    .secondary-menu .btn-logout {
        width: 55px;
        height: 55px;
        font-size: 32px;
        border: 0px none transparent;
        background-color: transparent;
        position: absolute;
        top: 0px;
        right: 0px;
    }

*[dir='rtl'] .secondary-menu .btn-logout {
    left: 0px;
    right: auto;
    transform: rotateY(180deg);
}

.secondary-menu .menu-list-block {
    display: inline-block;
    position: relative;
    list-style: none;
    font-size: 0px;
    vertical-align: top;
    margin: 0px;
    padding: 0px;
}

    .secondary-menu .menu-list-block > li {
        display: inline-block;
        font-size: 14px;
        margin: 0px;
        padding: 0px;
        list-style: none;
    }

        .secondary-menu .menu-list-block > li + li {
            margin-left: 20px;
        }

*[dir='rtl'] .secondary-menu .menu-list-block > li + li {
    margin-left: 0px;
    margin-right: 20px;
}

.secondary-menu .menu-list-block > li > a {
    display: block;
    position: relative;
    padding: 19px 0px 19px 0px;
    height: 55px;
    font-weight: 400;
    text-decoration: none;
    color: var(--color-text-muted);
}

    .secondary-menu .menu-list-block > li > a:hover {
        color: var(--color-text-muted);
    }

.secondary-menu .menu-list-block > li.active > a:after {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-bg-danger);
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0px;
}

*[dir='rtl'] .secondary-menu .menu-list-block > li.active > a:after {
    right: 0px;
    left: auto;
}

.secondary-menu .menu-list-block > li.active > a {
    color: var(--color-text-basic);
}

.secondary-menu .menu-list-block > li > a > b {
    font-size: 12px;
    color: var(--color-text-danger);
    font-weight: 700;
    display: inline-block;
    vertical-align: top;
    border-radius: 40px;
    background-color: #FBCFCF;
    padding: 10px 8px 10px 8px;
    line-height: 0px;
    margin-top: -2px;
    margin-left: 5px;
}


*[dir='rtl'] .secondary-menu .menu-list-block > li > a > b {
    margin-right: 5px;
    margin-left: 0px;
}

.secondary-menu .menu-list-block > li > a > b:empty {
    display: none;
}

.secondary-menu .menu-list-block > li.add-funds > a > b,
.secondary-menu .menu-list-block > li.my-ads > a > b {
    font-size: 12px;
    color: var(--color-text-basic);
    font-weight: 700;
    display: inline-block;
    vertical-align: top;
    border-radius: 40px;
    background-color: #EBEBEB;
    padding: 10px 8px 10px 8px;
    line-height: 0px;
    margin-top: -2px;
    margin-left: 5px;
}



*[dir='rtl'] .secondary-menu .menu-list-block > li.add-funds > a > b {
    margin-right: 5px;
    margin-left: 0px;
}

.secondary-menu .menu-list-block > li.add-funds > a > b > bdi {
    margin-right: 5px;
}

*[dir='rtl'] .secondary-menu .menu-list-block > li.add-funds > a > b > bdi {
    margin-right: 0px;
    margin-left: 5px;
}

.secondary-menu .menu-list-block > li > a > small {
    margin-left: 5px;
    display: inline-block;
}

*[dir='rtl'] .secondary-menu .menu-list-block > li > a > small {
    margin-left: 0px;
    margin-right: 5px;
}

@media (max-width: 991px) {
    .secondary-menu {
        display: none;
    }
}

/* #endregion ============================ /Secondary Menu ============================================= */
/* #region =================================== Settings ================================================ */
/* #region Shimmers */
.settings-page .shimm .page-title {
    font-size: 36px;
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 37px;
}


.settings-page .tab-header .shimm .shimm-item {
    max-width: 40%;
    display: block;
}

.settings-page .account-subscription-info-promo h3 .shimm .shimm-item {
    max-width: 40%;
    display: block;
}

.settings-page .account-subscription-info-promo h2 .shimm .shimm-item {
    max-width: 80%;
    display: block;
}

@media (max-width: 450px) {
    .settings-page .shimm .page-title {
        font-size: 32px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .settings-page .tab-header .shimm .shimm-item {
        max-width: 100%;
        max-height: 18px;
    }
}


/* #endregion Shimmers */

.old-settings-caption {
    color: var(--color-text-basic);
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 30px;
    padding-left: 8px;
    padding-right: 8px;
}

.settings-page {
    padding-bottom: 150px;
}

    .settings-page h1 {
        font-size: 36px;
        font-weight: 400;
        margin-top: 30px;
        margin-bottom: 30px;
    }

.settings-tab {
    display: block;
    width: 100%;
    background-color: #F9F9F9;
    border-radius: var(--radius-4);
    margin-bottom: 10px;
}

    .settings-tab .tab-header {
        display: block;
        position: relative;
        cursor: pointer;
    }

    .settings-tab .tab-content {
        border-top: 1px solid #DDDDDD;
        height: auto;
        overflow-y: visible;
        -webkit-transition: height 0.2s ease;
        transition: height 0.2s ease;
    }

    .settings-tab.collapsed .tab-content {
        height: 0px;
        overflow: hidden;
        border-top: 0px none transparent;
        -webkit-transition: height 0.2s ease;
        transition: height 0.2s ease;
        padding: 0px !important;
    }

    .settings-tab .tab-header h4 {
        display: block;
        width: 100%;
        font-size: 24px;
        font-weight: 400;
        color: var(--color-text-muted);
        padding: 20px 55px 20px 30px;
    }

*[dir='rtl'] .settings-tab .tab-header h4 {
    padding: 20px 30px 20px 55px;
}

.settings-tab.collapsed .tab-header h4 {
    font-size: 18px;
}

.settings-tab .tab-header .ci-pazar-small {
    position: absolute;
    z-index: 1;
    font-size: 18px;
    top: calc(50% - 9px);
    right: 20px;
}

.settings-tab.collapsed .tab-header .ci-pazar-small {
    transform: rotate(180deg);
}

*[dir='rtl'] .settings-tab .tab-header .ci-pazar-small {
    left: 20px;
    right: auto;
}

.settings-tab .tab-content .btn-primary {
    min-width: 250px;
}
/* #region ----------------------------- Account Details -------------------------------------- */
.settings-tab.account-details .tab-content {
    padding-top: 30px;
    padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 30px;
}

.settings-tab.account-details input[type='text']:disabled {
    opacity: 1;
    cursor: default;
    background-color: #EBEBEB;
}

.settings-tab.account-details .warning-message {
    position: relative;
    padding-left: 30px;
    margin-top: 10px;
    margin-bottom: 20px;
}

*[dir='rtl'] .settings-tab.account-details .warning-message {
    padding-left: 0px;
    padding-right: 30px;
}

.settings-tab.account-details .warning-message .warning-icon {
    position: absolute;
    top: calc(50% - 12px);
    left: 0px;
}

*[dir='rtl'] .settings-tab.account-details .warning-message .warning-icon {
    right: 0px;
    left: auto;
}

.settings-tab.account-details h5 {
    font-size: 20px;
    text-align: center;
    font-weight: 400;
    margin-bottom: 30px;
}

.settings-tab.account-details .social-account-item {
    display: block;
    width: 100%;
    position: relative;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    padding-left: 70px;
}

*[dir='rtl'] .settings-tab.account-details .social-account-item {
    padding-right: 70px;
    padding-left: 0px;
}

.settings-tab.account-details .social-account-item + .social-account-item {
    border-top: 0px none transparent;
}

.settings-tab.account-details .social-account-item .item-title {
    font-size: 18px;
    font-weight: 400;
    display: block;
    padding-top: 14px;
}

.settings-tab.account-details .social-account-item .ci-pazar-social {
    position: absolute;
    top: calc(50% - 24px);
    left: 10px;
    font-size: 48px;
    z-index: 1;
}

*[dir='rtl'] .settings-tab.account-details .social-account-item .ci-pazar-social {
    right: 10px;
    left: auto;
}

.settings-tab.account-details .social-account-item .status.not-connected,
.settings-tab.account-details .social-account-item.connected .status.connected,
.settings-tab.account-details .social-account-item .action-connect,
.settings-tab.account-details .social-account-item.connected .action-disconnect {
    display: block;
    padding-bottom: 14px;
}

.settings-tab.account-details .social-account-item.connected .status.not-connected,
.settings-tab.account-details .social-account-item .status.connected,
.settings-tab.account-details .social-account-item.connected .action-connect,
.settings-tab.account-details .social-account-item .action-disconnect {
    display: none;
    padding-bottom: 14px;
}


.settings-tab.account-details .social-account-item a {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: center;
    padding: 10px;
    width: 60px;
    height: 67px;
}

*[dir='rtl'] .settings-tab.account-details .social-account-item a {
    left: 0px;
    right: auto;
}

.settings-tab.account-details .social-account-item a span {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.settings-tab.account-details .social-account-item .action-disconnect i {
    font-size: 32px;
    position: absolute;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
}

.settings-tab.account-details .social-account-item .action-connect i {
    font-size: 17px;
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
}

.settings-tab.account-details .note-block {
    margin-top: 10px;
}

    .settings-tab.account-details .note-block span {
        margin-right: 5px;
    }

*[dir='rtl'] .settings-tab.account-details .note-block span {
    margin-right: 0px;
    margin-left: 5px;
}

.settings-tab.account-details .croppie-container .cr-slider-wrap {
    width: 100%;
    margin-top: 5px;
}

    .settings-tab.account-details .croppie-container .cr-slider-wrap .cr-slider {
        width: 100%;
    }

.settings-tab.account-details .croppie-container .cr-viewport, .croppie-container .cr-resizer {
    box-shadow: 0 0 2000px 2000px rgba(33, 37, 41, 0.6);
}

.settings-tab.account-details .avatar-cropper-block .avatar-cropper {
    display: none;
}

.settings-tab.account-details .avatar-cropper-block.loaded .avatar-cropper {
    display: block;
}

.settings-tab.account-details .croppie-container .cr-boundary {
    border-radius: var(--radius-4);
}

.settings-tab.account-details .avatar-cropper-block .apply-avatar-btn {
    width: auto;
    min-width: 0px;
    top: 5px;
    left: 5px;
    opacity: 100%;
    display: none;
    height: 45px;
}

*[dir='rtl'] .settings-tab.account-details .avatar-cropper-block .apply-avatar-btn {
    left: auto;
    right: 5px;
}

.settings-tab.account-details .avatar-cropper-block .avatar-ready {
    display: none;
}

.settings-tab.account-details .avatar-cropper-block.ready .avatar-ready {
    display: block;
    width: 200px;
    height: 200px;
    position: absolute;
    z-index: 1;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
    border-radius: 50%;
}

.settings-tab.account-details .avatar-cropper-block.loaded .apply-avatar-btn {
    display: block;
}

.settings-tab.account-details .avatar-cropper-block .remove-avatar-btn {
    display: none;
}

.settings-tab.account-details .avatar-cropper-block .add-avatar-btn .ci-pencil {
    display: none;
}

.settings-tab.account-details .avatar-cropper-block.loaded .remove-avatar-btn,
.settings-tab.account-details .avatar-cropper-block.ready .remove-avatar-btn {
    display: block;
    border: 0px none transparent;
    width: 45px;
    height: 45px;
    border-radius: var(--radius-4);
    font-size: 32px;
    top: 5px;
    right: 5px;
    background-color: rgba(93, 170, 128, 1);
}

*[dir='rtl'] .settings-tab.account-details .avatar-cropper-block.loaded .remove-avatar-btn,
*[dir='rtl'] .settings-tab.account-details .avatar-cropper-block.ready .remove-avatar-btn {
    left: 5px;
    right: auto;
}

.settings-tab.account-details .avatar-cropper-block.loaded .add-avatar-btn .ci-pencil,
.settings-tab.account-details .avatar-cropper-block.ready .add-avatar-btn .ci-pencil {
    display: block;
}

.settings-tab.account-details .avatar-cropper-block.loaded .add-avatar-btn .ci-plus,
.settings-tab.account-details .avatar-cropper-block.ready .add-avatar-btn .ci-plus,
.settings-tab.account-details .avatar-cropper-block.loaded .add-avatar-btn span,
.settings-tab.account-details .avatar-cropper-block.ready .add-avatar-btn span {
    display: none;
}

.settings-tab.account-details .avatar-cropper-block.loaded .add-avatar-btn,
.settings-tab.account-details .avatar-cropper-block.ready .add-avatar-btn {
    position: absolute;
    top: 5px;
    right: 55px;
    left: auto;
    width: 45px;
    height: 45px;
    border-radius: var(--radius-4);
    background-color: rgba(93, 170, 128, 1);
}

*[dir='rtl'] .settings-tab.account-details .avatar-cropper-block.loaded .add-avatar-btn,
*[dir='rtl'] .settings-tab.account-details .avatar-cropper-block.ready .add-avatar-btn {
    right: auto;
    left: 55px;
}

.settings-tab.account-details .avatar-cropper-block {
    display: block;
    width: 100%;
    height: 260px;
    position: relative;
    background-color: #F2F2F2;
    border: dashed 1px #C5C5C5;
    border-radius: var(--radius-4);
    margin-bottom: 40px;
}

    .settings-tab.account-details .avatar-cropper-block.ready {
        border: none;
    }

    .settings-tab.account-details .avatar-cropper-block input[type='file'] {
        display: none;
    }

    .settings-tab.account-details .avatar-cropper-block label {
        display: block;
        position: absolute;
        z-index: 2;
        width: 100%;
        text-align: center;
        top: calc(50% - 40px);
    }

    .settings-tab.account-details .avatar-cropper-block button {
        position: absolute;
        z-index: 2;
        cursor: pointer;
    }

    .settings-tab.account-details .avatar-cropper-block label span {
        display: block;
        width: 100%;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--color-text-primary);
    }


    .settings-tab.account-details .avatar-cropper-block label .ci-plus {
        font-size: 48px;
    }

    .settings-tab.account-details .avatar-cropper-block.loaded {
        border: none 0px transparent;
        margin-bottom: 70px;
    }

        .settings-tab.account-details .avatar-cropper-block.loaded .add-avatar-btn .ci-pencil,
        .settings-tab.account-details .avatar-cropper-block.ready .add-avatar-btn .ci-pencil {
            font-size: 32px;
            top: calc(50% - 16px);
            left: calc(50% - 16px);
        }

*[dir='rtl'] .settings-tab.account-details .avatar-cropper-block.loaded .add-avatar-btn .ci-pencil,
*[dir='rtl'] .settings-tab.account-details .avatar-cropper-block.ready .add-avatar-btn .ci-pencil {
    right: calc(50% - 16px);
    left: auto;
}


.settings-tab.account-details .avatar-cropper-block .add-avatar-btn {
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

    .settings-tab.account-details .avatar-cropper-block .add-avatar-btn:hover {
        opacity: 0.7;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

.settings-tab.account-details .avatar-cropper-block .remove-avatar-btn {
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

    .settings-tab.account-details .avatar-cropper-block .remove-avatar-btn:hover {
        opacity: 0.7;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

.settings-tab.account-details .avatar-cropper-block .label {
    display: none;
}

.settings-tab.account-details .avatar-cropper-block.ready .label {
    position: absolute;
    display: block;
    z-index: 1;
    top: 10px;
    left: 10px;
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: 400;
}

*[dir='rtl'] .settings-tab.account-details .avatar-cropper-block.ready .label {
    left: auto;
    right: 10px;
}

.settings-tab.account-details .shimm-placeholder .avatar-cropper-block {
    height: 260px;
    margin-bottom: 0px !important;
}


.settings-tab.account-details .shimm .button {
    position: absolute;
    z-index: 1;
    width: 32px;
    height: 32px;
    top: calc(50% - 16px);
    right: 16px;
}

*[dir='rtl'] .settings-tab.account-details .shimm .button {
    right: auto;
    left: 16px;
}

.subscription-panel .shimm.collapser-button .shimm-item {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 11px;
    right: 14px;
}

*[dir='rtl'] .subscription-panel .shimm.collapser-button .shimm-item {
    right: auto;
    left: 14px;
}

.subscription-panel .plan .shimm-placeholder small span,
.subscription-panel .days .shimm-placeholder small span {
    font-size: 14px !important;
}

.subscription-panel .days .shimm-placeholder > span {
    height: 18px;
}

.subscription-panel .status .shimm-placeholder > span {
    padding: 0px;
    height: 18px;
}

@media (max-width: 400px) {
    .subscription-panel .plan .shimm-placeholder small span, .subscription-panel .days .shimm-placeholder small span, .subscription-panel .status .shimm-placeholder small span {
        width: 100% !important;
    }

    .subscription-panel .status .shimm-placeholder .text-label {
        font-size: 14px;
        padding-block: 0px;
        vertical-align: top;
        margin-inline-start: 2px !important;
    }

    .subscription-panel .status .shimm-placeholder > span {
        padding: 0px;
        height: 14px;
    }

    .subscription-panel .days .shimm-placeholder > span {
        height: 14px;
    }
}

@media (max-width: 991px) {
    .settings-tab.account-details h5 {
        margin-top: 40px;
    }

    .billing-details .shimm.shimmered .shimm-placeholder .text-label {
        display: none;
    }

    *[dir='rtl'] .amount .shimm-placeholder,
    *[dir='rtl'] .payment-method .shimm-placeholder {
        text-align: right;
    }
}

@media(max-width: 450px) {
    .settings-tab.account-details .tab-content {
        padding-top: 20px;
        padding-bottom: 30px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .settings-tab.account-details .avatar-cropper-block.loaded .add-avatar-btn {
        left: 5px;
        right: auto;
        opacity: 1 !important;
    }

    *[dir='rtl'] .settings-tab.account-details .avatar-cropper-block.loaded .add-avatar-btn {
        left: auto;
        right: 5px;
        opacity: 1 !important;
    }

    .settings-tab.account-details .social-account-item .ci-pazar-social {
        position: absolute;
        top: calc(50% - 18px);
        left: 5px;
        font-size: 36px;
        z-index: 1;
    }

    *[dir='rtl'] .settings-tab.account-details .social-account-item .ci-pazar-social {
        position: absolute;
        top: calc(50% - 18px);
        left: auto;
        right: 5px;
        font-size: 36px;
        z-index: 1;
    }

    .settings-tab.account-details .social-account-item {
        padding-left: 50px;
    }

    *[dir='rtl'] .settings-tab.account-details .social-account-item {
        padding-right: 50px;
        padding-left: 0px;
    }

    .settings-tab.account-details .note-block {
        margin-bottom: 20px;
    }

    .settings-tab.account-details .social-account-item a {
        width: 40px;
    }
}
/* #endregion ------------------------- /Account Details -------------------------------------- */
/* #region ------------------------------ Store Details --------------------------------------- */
.settings-tab.store-details .tab-content {
    padding-top: 30px;
    padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 30px;
}

.settings-tab.store-details textarea {
    min-height: 222px;
}

.settings-tab .cover-image {
    display: block;
    width: 100%;
    height: 260px;
    background-color: #F2F2F2;
    border-radius: var(--radius-4);
    margin-bottom: 30px;
    border: dashed 1px #C5C5C5;
    position: relative;
    overflow: hidden;
}

    .settings-tab .cover-image.loaded {
        border: 0px none transparent;
    }

    .settings-tab .cover-image input[type='file'] {
        display: none;
    }

    .settings-tab .cover-image .input-cover-image {
        cursor: pointer;
        display: block;
        position: absolute;
        width: 100%;
        text-align: center;
        top: calc(50% - 32px);
        z-index: 2;
        opacity: 1;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

        .settings-tab .cover-image .input-cover-image .ci-plus {
            display: inline-block;
            font-size: 48px;
        }

        .settings-tab .cover-image .input-cover-image .ci-pencil {
            display: none;
        }

        .settings-tab .cover-image .input-cover-image span {
            display: block;
            width: 100%;
            color: var(--color-text-primary);
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
        }

    .settings-tab .cover-image img {
        display: none;
    }

    .settings-tab .cover-image.loaded img {
        display: block;
        width: auto;
        height: 100%;
        text-align: center;
        margin: 0px auto;
        max-width: 100%;
        object-fit: contain;
    }


    .settings-tab .cover-image .image-overlay {
        display: none;
    }

    .settings-tab .cover-image.loaded .image-overlay {
        display: block;
        position: absolute;
        z-index: 1;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 90px;
        background: linear-gradient(180deg,rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 50%);
    }

    .settings-tab .cover-image .title {
        display: none;
    }

    .settings-tab .cover-image.loaded .title {
        display: block;
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        width: 100%;
        text-align: start;
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 2;
    }


*[dir='rtl'] .settings-tab .cover-image.loaded .title {
    left: auto;
    right: 10px;
}

.settings-tab .cover-image .remove-store-cover-image {
    display: none;
}


.settings-tab .cover-image.loaded .remove-store-cover-image {
    display: block;
    background-color: rgba(93, 170, 128, 0.8);
    border-radius: var(--radius-4);
    z-index: 2;
    position: absolute;
    border: 0px none transparent;
    font-size: 32px;
    padding: 7px;
    right: 5px;
    top: 5px;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

*[dir='rtl'] .settings-tab .cover-image.loaded .remove-store-cover-image {
    right: auto;
    left: 5px;
}

.settings-tab .cover-image.loaded .input-cover-image {
    display: block;
    background-color: rgba(93, 170, 128, 0.8);
    border-radius: var(--radius-4);
    z-index: 2;
    position: absolute;
    border: 0px none transparent;
    font-size: 32px;
    padding: 7px;
    right: 56px;
    width: auto;
    top: 5px;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

*[dir='rtl'] .settings-tab .cover-image.loaded .input-cover-image {
    right: auto;
    left: 56px;
}

.settings-tab .cover-image.loaded .input-cover-image span,
.settings-tab .cover-image.loaded .input-cover-image .ci-plus {
    display: none;
}

.settings-tab .cover-image.loaded .input-cover-image .ci-pencil {
    display: inline-block;
}

.settings-tab .cover-image .remove-store-cover-image:hover,
.settings-tab .cover-image .input-cover-image:hover {
    opacity: 0.8;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

@media (max-width: 450px) {
    .settings-tab.store-details .tab-content {
        padding-top: 20px;
        padding-bottom: 30px;
        padding-left: 10px;
        padding-right: 10px;
    }
}
/* #endregion -------------------------- /Store Details --------------------------------------- */
/* #region ------------------------------ Other Contacts -------------------------------------- */
.settings-tab.other-contacts .tab-content {
    padding-top: 40px;
    padding-bottom: 40px;
}

.settings-tab.other-contacts .tab-container {
    display: block;
    width: 600px;
    margin: 0px auto;
}

@media (max-width: 768px) {
    .settings-tab.other-contacts .tab-container {
        display: block;
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
        margin: 0px auto;
    }
}

@media (max-width: 450px) {
    .settings-tab.other-contacts .tab-container {
        display: block;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        margin: 0px auto;
    }
}

/* #endregion -------------------------- /Other Contacts -------------------------------------- */
/* #region -------------------------- Addresses & Locations ----------------------------------- */
.settings-tab.addresses-locations .tab-content {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 30px;
}

.settings-tab.addresses-locations .tab-container {
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.settings-tab.addresses-locations .btn-new-address {
    display: block;
    border-radius: var(--radius-4);
    border: 2px dashed var(--color-border-primary);
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
}

.settings-tab.addresses-locations .address-item {
    position: relative;
    border-radius: var(--radius-4);
    display: block;
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
}

    .settings-tab.addresses-locations .address-item input[type='radio'] {
        display: none;
    }

    .settings-tab.addresses-locations .address-item .panel {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        background-color: #F2F2F2;
        padding: 10px 80px 10px 50px;
        font-size: 0px;
    }

*[dir='rtl'] .settings-tab.addresses-locations .address-item .panel {
    padding: 10px 50px 10px 80px;
}

.settings-tab.addresses-locations .address-item input[type='radio']:checked + .panel {
    background-color: #E6F4ED;
}

.settings-tab.addresses-locations .address-item .panel .checker {
    display: inline-block;
    width: 24px;
    height: 24px;
    text-align: center;
    background-color: #C5C5C5;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 12px);
    left: 13px;
}

*[dir='rtl'] .settings-tab.addresses-locations .address-item .panel .checker {
    right: 13px;
    left: auto;
}

.settings-tab.addresses-locations .address-item .panel .checker i {
    top: calc(50% - 7px);
    display: block;
    left: calc(50% - 7px);
    font-size: 14px;
    display: none;
}

*[dir='rtl'] .settings-tab.addresses-locations .address-item .panel .checker i {
    right: calc(50% - 7px);
    left: auto;
}

.settings-tab.addresses-locations .address-item input[type='radio']:checked + .panel .checker {
    background-color: var(--color-bg-primary);
}

    .settings-tab.addresses-locations .address-item input[type='radio']:checked + .panel .checker i {
        display: block;
    }

.settings-tab.addresses-locations .address-item .panel .map-preview {
    display: inline-block;
    width: 125px;
    height: 90px;
    border-radius: var(--radius-4);
    background: #C5C5C5;
    position: relative;
    vertical-align: middle;
}

.settings-tab.addresses-locations .address-item .panel .address-details {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    vertical-align: middle;
    width: calc(100% - 160px);
    padding-left: 20px;
}

*[dir='rtl'] .settings-tab.addresses-locations .address-item .panel .address-details {
    padding-left: 0px;
    padding-right: 20px;
}

.settings-tab.addresses-locations .address-item .panel .address-details + .no-address {
    display: none;
}

.settings-tab.addresses-locations .address-item .panel .address-details:empty {
    display: none;
}

    .settings-tab.addresses-locations .address-item .panel .address-details:empty + .no-address {
        display: inline-block;
        font-size: 14px;
        font-weight: 400;
        vertical-align: middle;
        width: calc(100% - 160px);
        padding-left: 20px;
    }

*[dir='rtl'] .settings-tab.addresses-locations .address-item .panel .address-details:empty + .no-address {
    padding-left: 0px;
    padding-right: 20px;
}

.settings-tab.addresses-locations .address-item .panel a {
    display: block;
    position: absolute;
    font-size: 32px;
    top: calc(50% - 16px);
}

.settings-tab.addresses-locations .address-item .control-remove {
    right: 15px;
}

*[dir='rtl'] .settings-tab.addresses-locations .address-item .control-remove {
    right: auto;
    left: 15px;
}

.settings-tab.addresses-locations .address-item .control-edit {
    right: 50px;
}

*[dir='rtl'] .settings-tab.addresses-locations .address-item .control-edit {
    right: auto;
    left: 50px;
    transform: rotateY(180deg);
}

.modal.edit-delivery-info.address-details .map-container {
    width: 100%;
    height: 270px;
    padding-top: 20px;
}

.modal.edit-delivery-info.address-details .delivery-info {
    margin-top: 0px;
}

@media (max-width: 991px) {
    .settings-tab.addresses-locations .tab-container {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

@media (max-width: 575px) {
    .settings-tab.addresses-locations .address-item .panel .map-preview {
        width: 100%;
        height: 150px;
    }

    .settings-tab.addresses-locations .address-item .panel .address-details,
    .settings-tab.addresses-locations .address-item .panel .no-address {
        width: 100% !important;
        padding-left: 0px !important;
        padding-top: 10px;
    }

    *[dir='rtl'] .settings-tab.addresses-locations .address-item .panel .address-details,
    *[dir='rtl'] .settings-tab.addresses-locations .address-item .panel .no-address {
        width: 100% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        padding-top: 10px;
    }

    .settings-tab.addresses-locations .address-item .panel a.control-edit {
        top: calc(50% - 40px);
        right: 10px;
    }

    *[dir='rtl'] .settings-tab.addresses-locations .address-item .panel a.control-edit {
        top: calc(50% - 40px);
        right: auto;
        left: 10px;
    }

    .settings-tab.addresses-locations .address-item .panel a.control-remove {
        top: calc(50% + 5px);
        right: 10px;
    }

    *[dir='rtl'] .settings-tab.addresses-locations .address-item .panel a.control-remove {
        top: calc(50% + 5px);
        right: auto;
        left: 10px;
    }

    .settings-tab.addresses-locations .address-item .panel,
    *[dir='rtl'] .settings-tab.addresses-locations .address-item .panel {
        padding: 10px 50px 10px 50px;
    }

    .settings-tab.addresses-locations .btn-new-address .ci-pazar {
        display: none;
    }
}

@media (max-width: 450px) {
    .settings-tab.addresses-locations .tab-content {
        padding-top: 10px;
        padding-bottom: 40px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .settings-tab.addresses-locations .tab-container {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
/* #endregion ---------------------- /Addresses & Locations ----------------------------------- */
/* #region ----------------------------- Change Password -------------------------------------- */
.settings-tab.change-password .tab-content {
    padding-top: 40px;
    padding-bottom: 40px;
}

.settings-tab.change-password .tab-container {
    display: block;
    margin: 0px auto;
    width: 600px;
}

@media (max-width: 768px) {
    .settings-tab.change-password .tab-container {
        display: block;
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
        margin: 0px auto;
    }
}

@media (max-width: 450px) {
    .settings-tab.change-password .tab-container {
        display: block;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        margin: 0px auto;
    }
}
/* #endregion ------------------------- /Change Password -------------------------------------- */
/* #region ------------------------ Deactivation and Deletion --------------------------------- */
.settings-tab.deactivation .tab-content {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 10px;
    padding-right: 10px;
}
/* #endregion -------------------- /Deactivation and Deletion --------------------------------- */
/* #region --------------------------- Edit phone number -------------------------------------- */
.settings-edit-contact-panel {
    display: block;
    width: 100%;
    background-color: #F9F9F9;
    border-radius: var(--radius-4);
    text-align: center;
    padding: 80px 40px 80px 40px;
}

    .settings-edit-contact-panel h3 {
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 5px;
    }

    .settings-edit-contact-panel p {
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 40px;
    }

    .settings-edit-contact-panel .panel-container {
        width: 600px;
        margin: 0px auto;
    }

    .settings-edit-contact-panel .new-btn {
        margin-top: 40px;
        min-width: 250px;
    }

@media (max-width: 768px) {
    .settings-edit-contact-panel .panel-container {
        width: 100%;
        margin: 0px auto;
    }
}

@media (max-width: 450px) {
    .settings-edit-contact-panel {
        display: block;
        width: 100%;
        background-color: #F9F9F9;
        border-radius: var(--radius-4);
        text-align: center;
        padding: 40px 10px 40px 10px;
    }

        .settings-edit-contact-panel .panel-container {
            width: 100%;
            margin: 0px auto;
        }

        .settings-edit-contact-panel h3 {
            font-size: 18px;
        }

        .settings-edit-contact-panel p {
            font-size: 14px;
        }

        .settings-edit-contact-panel .new-btn {
            margin-top: 40px;
            min-width: 0px;
        }
}
/* #endregion ----------------------- /Edit phone number -------------------------------------- */
@media (max-width: 450px) {
    .settings-page {
        padding-bottom: 100px;
    }

        .settings-page h1 {
            font-size: 32px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

    .settings-tab {
        margin-bottom: 10px;
    }


        .settings-tab .tab-header h4 {
            display: block;
            width: 100%;
            font-size: 18px;
            font-weight: 400;
            color: var(--color-text-muted);
            padding: 15px 35px 15px 15px;
        }

    *[dir='rtl'] .settings-tab .tab-header h4 {
        padding: 15px 15px 15px 35px;
    }

    .settings-tab.collapsed .tab-header h4 {
        font-size: 18px;
    }

    .settings-tab .tab-header .ci-pazar-small {
        position: absolute;
        z-index: 1;
        font-size: 14px;
        top: calc(50% - 7px);
        right: 10px;
    }

    .settings-tab.collapsed .tab-header .ci-pazar-small {
        transform: rotate(180deg);
    }

    *[dir='rtl'] .settings-tab .tab-header .ci-pazar-small {
        left: 10px;
        right: auto;
    }

    .settings-tab .tab-content .btn-primary {
        min-width: 0px;
    }
}
/* #endregion =============================== /Settings ================================================ */
/* #region ================================ Notifications ============================================== */
.notifications-page {
    padding-bottom: 150px;
}

    .notifications-page h1 {
        font-size: 36px;
        font-weight: 400;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .notifications-page .empty-notifications {
        width: 100%;
        position: relative;
        border-radius: var(--radius-4);
        background-color: #F9F9F9;
        text-align: center;
        padding-top: 250px;
        padding-bottom: 250px;
        margin-bottom: 100px;
    }

        .notifications-page .empty-notifications i {
            display: inline-block;
            font-size: 96px;
        }

        .notifications-page .empty-notifications h3 {
            font-size: 24px;
            font-weight: 400;
            text-transform: uppercase;
            padding-left: 30px;
            padding-right: 30px;
            color: var(--color-text-muted);
            margin-top: 10px;
            margin-bottom: 10px;
        }

    .notifications-page .notification-item {
        display: block;
        width: 100%;
        border-top: 1px solid #F2F2F2;
        border-bottom: 1px solid #F2F2F2;
        position: relative;
    }

        .notifications-page .notification-item + .notification-item {
            display: block;
            width: 100%;
            border-top: 0px none transparent;
            border-bottom: 1px solid #F2F2F2;
            position: relative;
        }

    .notifications-page .btn-delete {
        position: absolute;
        top: 10px;
        right: 5px;
        border: 0px none transparent;
        min-width: 0px;
        min-height: 0px;
        padding: 10px;
        font-size: 16px;
        background-color: transparent;
    }

*[dir='rtl'] .notifications-page .btn-delete {
    right: auto;
    left: 5px;
}

.notifications-page .btn-delete .ci-pazar-small {
    padding: 0px;
}

.notifications-page .header {
    font-size: 0px;
}

.notifications-page .content {
    font-size: 0px;
}

.notifications-page .header .left-side {
    display: inline-block;
    font-size: 14px;
    width: 98px;
    text-align: center;
    padding-top: 15px;
    vertical-align: top;
}

.notifications-page .header .right-side {
    display: inline-block;
    font-size: 14px;
    width: calc(100% - 98px);
    vertical-align: top;
}

.notifications-page .content .left-side {
    display: inline-block;
    font-size: 14px;
    width: 98px;
    vertical-align: top;
    margin-bottom: 20px;
}

.notifications-page .content .right-side {
    display: inline-block;
    font-size: 14px;
    width: calc(100% - 98px);
    vertical-align: top;
    margin-bottom: 20px;
    margin-top: 10px;
    padding-right: 15px;
}

*[dir='rtl'] .notifications-page .content .right-side {
    padding-right: 0px;
    padding-left: 15px;
}

.notifications-page .header .date-time {
    display: block;
    margin-top: 26px;
    margin-bottom: 1px;
}

    .notifications-page .header .date-time .date {
        margin-right: 10px;
        display: inline-block;
    }

*[dir='rtl'] .notifications-page .header .date-time .date {
    margin-right: 0px;
    margin-left: 10px;
}

.notifications-page .header .name {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    font-weight: 700;
}

.notifications-page .header .status {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    padding: 3px 8px 3px 8px;
    border-radius: 50px;
    margin-left: 8px;
}

*[dir='rtl'] .notifications-page .header .status {
    margin-left: 0px;
    margin-right: 8px;
}

.notifications-page .header .status.status-standard {
    background-color: #E6F4ED;
    color: var(--color-text-muted);
}

.notifications-page .header .status.status-admin {
    background-color: var(--color-bg-warning);
    color: var(--color-text-muted);
}

.notifications-page .content .right-side .message-text {
    margin-bottom: 10px;
}

.notifications-page .content .right-side .message-ad {
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #F9F9F9;
    padding: 10px;
    font-size: 0px;
}

.notifications-page .content .right-side .message-ad {
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #F9F9F9;
    padding: 10px;
    font-size: 0px;
}

    .notifications-page .content .right-side .message-ad .image-container {
        display: inline-block;
        font-size: 14px;
        vertical-align: top;
        width: 100px;
        height: 72px;
        background-color: #E7E7E7;
        border-radius: var(--radius-4);
        position: relative;
    }

        .notifications-page .content .right-side .message-ad .image-container .ci-pazar {
            font-size: 32px;
            position: absolute;
            top: calc(50% - 16px);
            left: calc(50% - 16px);
            z-index: 1;
        }

        .notifications-page .content .right-side .message-ad .image-container .image {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 2;
            border-radius: var(--radius-4);
            background-repeat: no-repeat;
            background-color: transparent;
            background-position: center center;
            background-size: cover;
        }

    .notifications-page .content .right-side .message-ad .right-side {
        display: inline-block;
        font-size: 14px;
        vertical-align: top;
        width: calc(100% - 100px);
        margin-top: 0px;
        margin-bottom: 0px;
        padding-left: 10px;
        padding-right: 20px;
    }

*[dir='rtl'] .notifications-page .content .right-side .message-ad .right-side {
    padding-left: 20px;
    padding-right: 10px;
}


.notifications-page .content .right-side .message-ad .right-side .ad-caption {
    display: block;
    font-size: 18px;
    font-weight: 400;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0px;
    padding-right: 0px;
    padding-top: 11px;
    padding-bottom: 10px;
    text-decoration: none;
}

*[dir='rtl'] .notifications-page .content .right-side .message-ad .right-side .ad-caption {
    padding-right: 0px;
    padding-left: 0px;
}

.notifications-page .right-side .price-block {
    display: inline-block;
    vertical-align: top;
    width: auto;
}

    .notifications-page .right-side .price-block + .price-block {
        margin-left: 30px;
    }

*[dir='rtl'] .notifications-page .right-side .price-block + .price-block {
    margin-left: 0px;
    margin-right: 30px;
}

.notifications-page .right-side .price-block .caption {
    margin-right: 5px;
    color: var(--color-text-muted);
}

*[dir='rtl'] .notifications-page .right-side .price-block .caption {
    margin-right: 5px;
    margin-left: 0px;
}

.notifications-page .right-side .price-block .price {
    font-weight: 700;
}

    .notifications-page .right-side .price-block .price.old-price {
        color: var(--color-text-muted);
        text-decoration: line-through;
    }

    .notifications-page .right-side .price-block .price small {
        padding-left: 5px;
    }

*[dir='rtl'] .notifications-page .right-side .price-block .price small {
    padding-left: 5px;
    padding-right: 0px;
}

.notifications-page .content .right-side .message-controls a {
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 20px;
}

    .notifications-page .content .right-side .message-controls a + a {
        margin-left: 40px;
    }

*[dir='rtl'] .notifications-page .content .right-side .message-controls a + a {
    margin-left: 0px;
    margin-right: 40px;
}

.notifications-page h4 {
    font-size: 18px;
    font-weight: 400;
}

@media (max-width: 991px) {
    .notifications-page .right-side .price-block {
        display: block;
    }

        .notifications-page .right-side .price-block + .price-block {
            margin-left: 0px;
        }

    *[dir='rtl'] .notifications-page .right-side .price-block + .price-block {
        margin-left: 0px;
        margin-right: 0px;
    }

    .notifications-page .content .right-side .message-ad .right-side .ad-caption {
        padding-top: 0px;
    }

    .notifications-page .empty-notifications {
        padding-top: 150px;
        padding-bottom: 150px;
        margin-bottom: 80px;
    }

        .notifications-page .empty-notifications i {
            display: inline-block;
            font-size: 84px;
        }

        .notifications-page .empty-notifications h3 {
            font-size: 24px;
            padding-left: 30px;
            padding-right: 30px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
}

@media (max-width: 767px) {
    .notifications-page .content .left-side {
        display: none;
    }

    .notifications-page .content .right-side {
        padding-left: 15px;
        width: 100%;
    }

    *[dir='rtl'] .notifications-page .content .right-side {
        padding-left: 15px;
        padding-right: 15px;
    }

    .notifications-page .content .right-side .message-text {
        margin-top: 10px;
    }

    .notifications-page .empty-notifications {
        padding-top: 150px;
        padding-bottom: 150px;
        margin-bottom: 80px;
    }

        .notifications-page .empty-notifications i {
            display: inline-block;
            font-size: 84px;
        }

        .notifications-page .empty-notifications h3 {
            font-size: 18px;
            padding-left: 30px;
            padding-right: 30px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
}

@media (max-width: 450px) {

    .notifications-page h1 {
        font-size: 32px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .notifications-page .content .right-side,
    *[dir='rtl'] .notifications-page .content .right-side {
        padding-left: 0px;
        padding-right: 0px;
    }

    .notifications-page .header .left-side {
        width: 64px;
    }

    .notifications-page .header .right-side {
        width: calc(100% - 64px);
        padding-left: 10px;
    }

    *[dir='rtl'] .notifications-page .header .right-side {
        padding-left: 0px;
        padding-right: 10px;
    }

    .notifications-page .btn-delete {
        right: -10px;
    }

    *[dir='rtl'] .notifications-page .btn-delete {
        right: auto;
        left: -10px;
    }

    .notifications-page .header .date-time {
        display: block;
        margin-top: 12px;
        margin-bottom: 1px;
    }

    .notifications-page .header .name {
        display: block;
        margin-top: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 30px;
    }

    *[dir='rtl'] .notifications-page .header .name {
        padding-right: 30px;
        padding-right: 0px;
    }

    .notifications-page .header .status {
        margin-left: 0px;
        margin-top: 6px;
    }

    *[dir='rtl'] .notifications-page .header .status {
        margin-left: 0px;
        margin-right: 0px;
    }

    .notifications-page .content .right-side .message-ad .image-container {
        width: 72px;
    }

    .notifications-page .content .right-side .message-ad .right-side {
        width: calc(100% - 72px);
    }

    .notifications-page .new-btn .mobile-hidden {
        display: none;
    }

    .notifications-page .empty-notifications {
        padding-top: 100px;
        padding-bottom: 100px;
        margin-bottom: 80px;
    }

        .notifications-page .empty-notifications i {
            display: inline-block;
            font-size: 72px;
        }

        .notifications-page .empty-notifications h3 {
            font-size: 18px;
            padding-left: 30px;
            padding-right: 30px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
}

@media (max-width: 400px) {
    .notifications-page .content .right-side .message-ad .image-container {
        width: 100%;
        display: block;
        height: 150px;
    }

    .notifications-page .content .right-side .message-ad .right-side,
    *[dir='rtl'] .notifications-page .content .right-side .message-ad .right-side {
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 8px;
    }

    .notifications-page .btn-delete {
        top: 5px;
    }

    .notifications-page .content .right-side .message-controls a + a {
        margin-left: 0px;
    }

    *[dir='rtl'] .notifications-page .content .right-side .message-controls a + a {
        margin-left: 0px;
        margin-right: 0px
    }

    .notifications-page .content .right-side .message-controls a {
        margin-right: 20px;
    }

    *[dir='rtl'] .notifications-page .content .right-side .message-controls a {
        margin-right: 0px;
        margin-left: 20px;
    }
}

@media (max-width: 319px) {
    .notifications-page .notifications-page {
        margin-top: 5px;
    }

    .notifications-page .header .right-side {
        padding-left: 0px;
        width: calc(100% - 58px);
    }

    *[dir='rtl'] .notifications-page .header .right-side {
        padding-left: 0px;
        padding-right: 0px;
    }

    .notifications-page .header .left-side {
        width: 58px;
        text-align: left;
        padding-top: 20px;
    }

    *[dir='rtl'] .notifications-page .header .left-side {
        width: 58px;
        text-align: right;
    }
}
/* #endregion ============================ /Notifications ============================================== */
/*#region ============================== Deactivation Success ========================================= */
.panel.success-deactivation {
    background-color: #F9F9F9;
    border-radius: var(--radius-12);
    margin-top: 30px;
    padding-top: 40px;
}

    .panel.success-deactivation .clipart-container {
        display: block;
        width: 250px;
        height: 250px;
        position: relative;
        margin: 0px auto 30px auto;
    }

    .panel.success-deactivation h2 {
        font-size: 36px;
        text-transform: uppercase;
        width: 600px;
        margin: 0px auto 20px auto;
    }

    .panel.success-deactivation p {
        width: 600px;
        margin: 0px auto 20px auto;
    }

    .panel.success-deactivation .new-btn {
        margin-top: 20px;
        margin-bottom: 60px;
    }

    .panel.success-deactivation .clipart-container .clipart-cloud-1,
    .panel.success-deactivation .clipart-container .clipart-cloud-2,
    .panel.success-deactivation .clipart-container .clipart-cloud-3,
    .panel.success-deactivation .clipart-container .clipart-cloud-4,
    .panel.success-deactivation .clipart-container .clipart-cloud-5,
    .panel.success-deactivation .clipart-container .clipart-cloud-6,
    .panel.success-deactivation .clipart-container .clipart-cloud-7,
    .panel.success-deactivation .clipart-container .clipart-cloud-8,
    .panel.success-deactivation .clipart-container .clipart-cloud-9,
    .panel.success-deactivation .clipart-container .clipart-cloud-10 {
        display: block;
        border-radius: 50%;
        background-color: #F2F2F2;
        position: absolute;
        z-index: 1;
    }

    .panel.success-deactivation .clipart-container .clipart-cloud-1 {
        width: 40%;
        height: 40%;
        top: 20%;
        left: 11%;
        -webkit-animation: deactivation-success-cloud-1 1.2s ease-in-out infinite alternate;
        animation: deactivation-success-cloud-1 1.2s ease-in-out infinite alternate;
    }

    .panel.success-deactivation .clipart-container .clipart-cloud-2 {
        width: 30%;
        height: 30%;
        top: 7%;
        left: 30%;
        -webkit-animation: deactivation-success-cloud-2 1.3s ease-in-out infinite alternate;
        animation: deactivation-success-cloud-2 1.3s ease-in-out infinite alternate;
    }

    .panel.success-deactivation .clipart-container .clipart-cloud-3 {
        width: 27%;
        height: 27%;
        top: 12%;
        left: 50%;
        -webkit-animation: deactivation-success-cloud-3 1.5s ease-in-out infinite alternate;
        animation: deactivation-success-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .panel.success-deactivation .clipart-container .clipart-cloud-4 {
        width: 30%;
        height: 30%;
        top: 16%;
        left: 70%;
        -webkit-animation: deactivation-success-cloud-4 1.1s ease-in-out infinite alternate;
        animation: deactivation-success-cloud-4 1.1s ease-in-out infinite alternate;
    }

    .panel.success-deactivation .clipart-container .clipart-cloud-5 {
        width: 50%;
        height: 50%;
        top: 28%;
        left: 50%;
        -webkit-animation: deactivation-success-cloud-5 1.3s ease-in-out infinite alternate;
        animation: deactivation-success-cloud-5 1.3s ease-in-out infinite alternate;
    }

    .panel.success-deactivation .clipart-container .clipart-cloud-6 {
        width: 18%;
        height: 18%;
        top: 69%;
        left: 64%;
        -webkit-animation: deactivation-success-cloud-6 1.2s ease-in-out infinite alternate;
        animation: deactivation-success-cloud-6 1.2s ease-in-out infinite alternate;
    }

    .panel.success-deactivation .clipart-container .clipart-cloud-7 {
        width: 32%;
        height: 32%;
        top: 61%;
        left: 34%;
        -webkit-animation: deactivation-success-cloud-7 1.4s ease-in-out infinite alternate;
        animation: deactivation-success-cloud-7 1.4s ease-in-out infinite alternate;
    }

    .panel.success-deactivation .clipart-container .clipart-cloud-8 {
        width: 28%;
        height: 28%;
        top: 53%;
        left: 15%;
        -webkit-animation: deactivation-success-cloud-8 1.1s ease-in-out infinite alternate;
        animation: deactivation-success-cloud-8 1.1s ease-in-out infinite alternate;
    }

    .panel.success-deactivation .clipart-container .clipart-cloud-9 {
        width: 25%;
        height: 25%;
        top: 40%;
        left: 0%;
        -webkit-animation: deactivation-success-cloud-9 1.1s ease-in-out infinite alternate;
        animation: deactivation-success-cloud-9 1.1s ease-in-out infinite alternate;
    }

    .panel.success-deactivation .clipart-container .clipart-cloud-10 {
        width: 50%;
        height: 50%;
        top: 25%;
        left: 28%;
    }

    .panel.success-deactivation .clipart-container .clipart-logo {
        display: block;
        width: 50%;
        height: 50%;
        top: 24%;
        left: 28%;
        background: url('../../Content/Images/UserSettings/clipart-logo-pictogram.svg') no-repeat center center transparent;
        background-size: contain;
        position: absolute;
        z-index: 1;
    }

.cancel-deletion-btn-block {
    margin-top: 30px;
}

    .cancel-deletion-btn-block .new-btn {
        min-width: 200px;
    }

@keyframes deactivation-success-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@-webkit-keyframes deactivation-success-cloud-1 {
    from {
        -webkit-transform: translate(-4%, -4%);
    }

    to {
        -webkit-transform: translate(5%, 5%);
    }
}

@keyframes deactivation-success-cloud-2 {
    from {
        transform: translate(0%, 9%);
    }

    to {
        transform: translate(0%, -8%);
    }
}

@-webkit-keyframes deactivation-success-cloud-2 {
    from {
        -webkit-transform: translate(0%, 9%);
    }

    to {
        -webkit-transform: translate(0%, -8%);
    }
}

@keyframes deactivation-success-cloud-3 {
    from {
        transform: translate(0%, -7%);
    }

    to {
        transform: translate(0%, 9%);
    }
}


@-webkit-keyframes deactivation-success-cloud-3 {
    from {
        -webkit-transform: translate(0%, -7%);
    }

    to {
        -webkit-transform: translate(0%, 9%);
    }
}

@keyframes deactivation-success-cloud-4 {
    from {
        transform: translate(-4%, 4%);
    }

    to {
        transform: translate(4%, -6%);
    }
}

@-webkit-keyframes deactivation-success-cloud-4 {
    from {
        -webkit-transform: translate(-4%, 4%);
    }

    to {
        -webkit-transform: translate(4%, -6%);
    }
}

@keyframes deactivation-success-cloud-5 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-8%, 0%);
    }
}

@-webkit-keyframes deactivation-success-cloud-5 {
    from {
        -webkit-transform: translate(6%, 0%);
    }

    to {
        -webkit-transform: translate(-8%, 0%);
    }
}

@keyframes deactivation-success-cloud-6 {
    from {
        transform: translate(-7%, -6%);
    }

    to {
        transform: translate(8%, 5%);
    }
}

@-webkit-keyframes deactivation-success-cloud-6 {
    from {
        -webkit-transform: translate(-7%, -6%);
    }

    to {
        -webkit-transform: translate(8%, 5%);
    }
}

@keyframes deactivation-success-cloud-7 {
    from {
        transform: translate(0%, 7%);
    }

    to {
        transform: translate(0%, -8%);
    }
}

@-webkit-keyframes deactivation-success-cloud-7 {
    from {
        -webkit-transform: translate(0%, 7%);
    }

    to {
        -webkit-transform: translate(0%, -8%);
    }
}

@keyframes deactivation-success-cloud-8 {
    from {
        transform: translate(5%, -7%);
    }

    to {
        transform: translate(-4%, 8%);
    }
}

@-webkit-keyframes deactivation-success-cloud-8 {
    from {
        -webkit-transform: translate(5%, -7%);
    }

    to {
        -webkit-transform: translate(-4%, 8%);
    }
}

@keyframes deactivation-success-cloud-9 {
    from {
        transform: translate(-6%, 0%);
    }

    to {
        transform: translate(5%, 0%);
    }
}

@-webkit-keyframes deactivation-success-cloud-9 {
    from {
        -webkit-transform: translate(-6%, 0%);
    }

    to {
        -webkit-transform: translate(5%, 0%);
    }
}

@media (max-width: 767px) {
    .panel.success-deactivation {
        background-color: #F9F9F9;
        border-radius: var(--radius-12);
        margin-top: 20px;
        padding-top: 30px;
    }


        .panel.success-deactivation .clipart-container {
            width: 150px;
            height: 150px;
            margin: 0px auto 10px auto;
        }

        .panel.success-deactivation h2 {
            padding-left: 30px;
            padding-right: 30px;
            font-size: 28px;
            text-transform: uppercase;
            width: 100%;
            margin: 0px;
            padding-bottom: 20px;
        }

        .panel.success-deactivation p {
            width: 100%;
            margin: 0px;
            padding-left: 30px;
            padding-right: 30px;
            padding-bottom: 20px;
        }

    .cancel-deletion-btn-block .new-btn {
        min-width: 0px;
    }
}

@media (max-width: 575px) {
    .cancel-deletion-btn-block {
        margin-top: 0px;
        padding-bottom: 30px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .panel.success-deactivation .cancel-deletion-btn-block .new-btn {
        margin-bottom: 0px;
        margin-top: 5px;
        width: 100%;
    }
}

@media (max-width: 500px) {
    .panel.success-deactivation h2 {
        font-size: 24px;
        margin: 0px;
        padding-bottom: 20px;
    }
}

@media (max-width: 450px) {
    .panel.success-deactivation h2 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .panel.success-deactivation .clipart-container {
        width: 100px;
        height: 100px;
        margin: 0px auto 10px auto;
    }

    .panel.success-deactivation p {
        padding-left: 10px;
        padding-right: 10px;
    }
}
/* #endregion ========================== /Deactivation Success ========================================= */
/* #region ==================================== Carfax ================================================= */
.carfax-details-block {
    width: 100%;
    border-bottom: 1px solid #DDDDDD;
    padding: 15px 0px 30px 0px;
    position: relative;
    margin-bottom: 0px;
}

    .carfax-details-block .carfax-container {
        display: block;
        width: calc(100% - 250px);
    }

*[dir='rtl'] .carfax-details-block .carfax-container {
    text-align: right;
}

.carfax-details-block h4 {
    font-size: 18px;
    font-weight: 400;
    margin-top: 0px;
    margin-bottom: 0px
}

*[dir='rtl'] .carfax-details-block h4 {
    text-align: right;
}

.carfax-details-block p {
    margin-top: 15px;
    margin-bottom: 20px;
}

*[dir='rtl'] .carfax-details-block p {
    text-align: right;
}

.carfax-details-block .clipart-container {
    display: block;
    width: 200px;
    height: 200px;
    position: absolute;
    right: 0px;
    top: calc(50% - 100px);
}

*[dir='rtl'] .carfax-details-block .clipart-container {
    left: 0px;
    right: auto;
}

.carfax-details-block .clipart-container .inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.carfax-details-block .clipart-container .logo {
    display: block;
    background: url("../../Content/Images/logo-carfax.svg") no-repeat center center transparent;
    background-size: contain;
    width: 90%;
    height: 20%;
    position: absolute;
    left: 7%;
    top: 70%;
    z-index: 3;
}

.carfax-details-block .clipart-container .clipart-car {
    display: block;
    background: url("../../Content/Images/clipart-car-history.svg") no-repeat center center transparent;
    background-size: contain;
    width: 48%;
    height: 48%;
    position: absolute;
    left: 27%;
    top: 18%;
    z-index: 3;
}

.carfax-details-block .clipart-container .clipart-shadow {
    display: block;
    border-radius: 50%;
    width: 51%;
    height: 3%;
    top: 60%;
    left: 25%;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 2;
}

.carfax-details-block .clipart-container .clipart-cloud-1,
.carfax-details-block .clipart-container .clipart-cloud-2,
.carfax-details-block .clipart-container .clipart-cloud-3,
.carfax-details-block .clipart-container .clipart-cloud-4,
.carfax-details-block .clipart-container .clipart-cloud-5,
.carfax-details-block .clipart-container .clipart-cloud-6,
.carfax-details-block .clipart-container .clipart-cloud-7 {
    display: block;
    border-radius: 50%;
    z-index: 1;
    position: absolute;
    background-color: #EEEEEE;
}

.carfax-details-block .clipart-container .clipart-cloud-1 {
    width: 16%;
    height: 16%;
    top: 18%;
    left: 18%;
    -webkit-animation: carfax-clipart-cloud-1 1.6s ease-in-out infinite alternate;
    animation: carfax-clipart-cloud-1 1.6s ease-in-out infinite alternate;
}

.carfax-details-block .clipart-container .clipart-cloud-2 {
    width: 46%;
    height: 46%;
    top: 10%;
    left: 26%;
    -webkit-animation: carfax-clipart-cloud-2 2.1s ease-in-out infinite alternate;
    animation: carfax-clipart-cloud-2 2.1s ease-in-out infinite alternate;
}

.carfax-details-block .clipart-container .clipart-cloud-3 {
    width: 30%;
    height: 30%;
    top: 15%;
    left: 54%;
    -webkit-animation: carfax-clipart-cloud-3 2.0s ease-in-out infinite alternate;
    animation: carfax-clipart-cloud-3 2.0s ease-in-out infinite alternate;
}

.carfax-details-block .clipart-container .clipart-cloud-4 {
    width: 23%;
    height: 23%;
    top: 38%;
    left: 67%;
    -webkit-animation: carfax-clipart-cloud-4 1.6s ease-in-out infinite alternate;
    animation: carfax-clipart-cloud-4 1.6s ease-in-out infinite alternate;
}

.carfax-details-block .clipart-container .clipart-cloud-5 {
    width: 40%;
    height: 40%;
    top: 38%;
    left: 42%;
    -webkit-animation: carfax-clipart-cloud-5 2.1s ease-in-out infinite alternate;
    animation: carfax-clipart-cloud-5 2.1s ease-in-out infinite alternate;
}

.carfax-details-block .clipart-container .clipart-cloud-6 {
    width: 35%;
    height: 35%;
    top: 44%;
    left: 22%;
    -webkit-animation: carfax-clipart-cloud-6 2.0s ease-in-out infinite alternate;
    animation: carfax-clipart-cloud-6 2.0s ease-in-out infinite alternate;
}

.carfax-details-block .clipart-container .clipart-cloud-7 {
    width: 34%;
    height: 34%;
    top: 29%;
    left: 11%;
    -webkit-animation: carfax-clipart-cloud-7 1.6s ease-in-out infinite alternate;
    animation: carfax-clipart-cloud-7 1.6s ease-in-out infinite alternate;
}

@keyframes carfax-clipart-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(14%, 14%);
    }
}

@-webkit-keyframes carfax-clipart-cloud-1 {
    from {
        -webkit-transform: translate(-4%, -4%);
    }

    to {
        -webkit-transform: translate(14%, 14%);
    }
}

@keyframes carfax-clipart-cloud-2 {
    from {
        transform: translate(0%, 10%);
    }

    to {
        transform: translate(0%, -6%);
    }
}

@-webkit-keyframes carfax-clipart-cloud-2 {
    from {
        -webkit-transform: translate(0%, 10%);
    }

    to {
        -webkit-transform: translate(0%, -6%);
    }
}

@keyframes carfax-clipart-cloud-3 {
    from {
        transform: translate(6%, -8%);
    }

    to {
        transform: translate(-6%, 10%);
    }
}

@-webkit-keyframes carfax-clipart-cloud-3 {
    from {
        -webkit-transform: translate(6%, -8%);
    }

    to {
        -webkit-transform: translate(-6%, 10%);
    }
}

@keyframes carfax-clipart-cloud-4 {
    from {
        transform: translate(-6%, 0%);
    }

    to {
        transform: translate(10%, 0%);
    }
}

@-webkit-keyframes carfax-clipart-cloud-4 {
    from {
        -webkit-transform: translate(-6%, 0%);
    }

    to {
        -webkit-transform: translate(10%, 0%);
    }
}

@keyframes carfax-clipart-cloud-5 {
    from {
        transform: translate(4%, 8%);
    }

    to {
        transform: translate(-4%, -3%);
    }
}

@-webkit-keyframes carfax-clipart-cloud-5 {
    from {
        -webkit-transform: translate(4%, 8%);
    }

    to {
        -webkit-transform: translate(-4%, -3%);
    }
}

@keyframes carfax-clipart-cloud-6 {
    from {
        transform: translate(4%, -8%);
    }

    to {
        transform: translate(-4%, 3%);
    }
}

@-webkit-keyframes carfax-clipart-cloud-6 {
    from {
        -webkit-transform: translate(4%, -8%);
    }

    to {
        -webkit-transform: translate(-4%, 3%);
    }
}

@keyframes carfax-clipart-cloud-7 {
    from {
        transform: translate(8%, 0%);
    }

    to {
        transform: translate(-10%, 0%);
    }
}

@-webkit-keyframes carfax-clipart-cloud-7 {
    from {
        -webkit-transform: translate(8%, 0%);
    }

    to {
        -webkit-transform: translate(-10%, 0%);
    }
}


.new.row.row-listing {
    position: relative;
}

.carfax-link {
    position: absolute;
    bottom: 15px;
    right: 18px;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--color-text-muted) !important;
    text-decoration: none;
    z-index: 1;
}

    .carfax-link span {
        vertical-align: middle;
    }

    .carfax-link .ci-pazar {
        font-size: 24px;
        margin-left: 5px;
    }

*[dir='rtl'] .carfax-link .ci-pazar {
    margin-right: 5px;
    margin-left: 0px;
}

.carfax-link:hover {
    font-weight: 400 !important;
    color: var(--color-text-primary) !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

*[dir='rtl'] .carfax-link {
    left: 18px;
    right: auto;
}


.search-item .carfax-link {
    position: static;
    left: auto;
    right: auto;
}

    .search-item .carfax-link .ci-pazar {
        margin-right: 5px;
        margin-left: 0px;
    }

*[dir='rtl'] .search-item .carfax-link .ci-pazar {
    margin-right: 0px;
    margin-left: 5px;
}

.store-goods-card-description .carfax-link {
    right: 10px;
}

*[dir='rtl'] .store-goods-card-description .carfax-link {
    right: auto;
    left: 10px;
}

.table.table-savedads .carfax-link {
    right: 10px;
}

*[dir='rtl'] .table.table-savedads .carfax-link {
    right: auto;
    left: 10px;
}



.my-ads-layout .td-2 .carfax-link .ci-pazar {
    margin-left: 0px;
    margin-right: 5px;
}


*[dir='rtl'] .my-ads-layout .td-2 .carfax-link .ci-pazar {
    margin-left: 5px;
    margin-right: 0px;
}

.my-ads-layout .td-2 .carfax-link {
    top: 22px;
    left: 14px;
}

*[dir='rtl'] .my-ads-layout .td-2 .carfax-link {
    right: 0px !important;
    left: auto !important;
}


.result-content .table.table-savedads .carfax-link {
    right: 0px;
}

*[dir='rtl'] .result-content .table.table-savedads .carfax-link {
    right: auto;
    left: 0px;
}

.similar-ad-info-container {
    position: relative;
}

    .similar-ad-info-container .carfax-link {
        position: absolute;
        bottom: 0px;
        right: 13px;
    }

*[dir='rtl'] .similar-ad-info-container .carfax-link {
    right: auto;
    left: 13px;
}

@media (max-width: 1199px) {
    .carfax-details-block .carfax-container {
        display: block;
        width: calc(100% - 200px);
    }

    .carfax-details-block .clipart-container {
        width: 150px;
        height: 150px;
        top: calc(50% - 75px);
    }
}

@media (max-width: 779px) {
    .carfax-details-block .carfax-container,
    *[dir='rtl'] .carfax-details-block .carfax-container {
        display: block;
        width: 100%;
    }

    .carfax-details-block .clipart-container,
    *[dir='rtl'] .carfax-details-block .clipart-container {
        width: 150px;
        height: 150px;
        position: static;
        margin-top: 10px;
    }
}

@media (max-width: 560px) {
    .similar-ad-info-container .carfax-link span {
        display: none;
    }
}

@media (max-width: 500px) {
    .store-goods-card-description .carfax-link span {
        display: none;
    }
}

/* #endregion ================================ /Carfax ================================================= */
/* #region ================================ Search Listing ============================================= */
.mobile .result-content .span2.img-polaroid {
    height: 100%;
    text-align: center;
    width: 100%;
    display: block;
    object-fit: contain;
    margin-inline: auto;
    background-color: #ececec;
}

.mobile-goods-photo {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
    height: 100%;
    background: transparent;
    background-color: #ececec;
}

.mobile .listing-page .search-item {
    position: relative;
}


    .mobile .listing-page .search-item .description .caption {
        display: block;
        font-weight: 700 !important;
    }


    .mobile .listing-page .search-item .additional-info {
        margin-top: 0px;
    }



.ad-date-block {
    text-align: right;
}

*[dir='rtl'] .ad-date-block {
    text-align: left;
}

.store-goods-card-description {
    position: relative;
}

    .store-goods-card-description .createDataFont {
        padding-right: 8px;
    }

*[dir='rtl'] .store-goods-card-description .createDataFont {
    padding-right: 0px;
    padding-left: 8px;
}

.table.table-savedads tr {
    position: relative;
}

    .table.table-savedads tr:last-child td {
        border-bottom: 1px solid #DDDDDD;
    }

.mobile .my-ads-layout .td-2 {
    position: relative;
}

@media (max-width: 500px) {
    .mobile .my-ads-layout .goods-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.result-content {
    border-top: 1px solid #d4d4d4;
}
/* #endregion ============================ /Search Listing ============================================= */
/* #region ================================== Saved Ads ================================================ */
.table.table-savedads .img-span {
    position: relative;
}

.table.table-savedads td:nth-child(2) {
    padding-left: 15px;
}

*[dir='rtl'].table.table-savedads td:nth-child(2) {
    padding-left: 0px;
    padding-right: 15px;
}

.table.table-savedads .img-span img {
    object-position: center center;
    width: 100% !important;
    max-height: 150px;
}



.table.table-savedads .img-span .cargo-icon {
    display: block;
    position: absolute;
    right: 10px;
    bottom: 14px;
    border-radius: 50%;
    background-color: #FFFFFF;
    padding: 4px;
    font-size: 32px;
    z-index: 3;
}

*[dir='rtl'] .table.table-savedads .img-span .cargo-icon {
    display: block;
    position: absolute;
    right: auto;
    left: 10px;
    bottom: 14px;
    border-radius: 50%;
    background-color: #FFFFFF;
    padding: 4px;
    font-size: 32px;
    z-index: 3;
}

.watch-layout .img-span .cargo-icon {
}

*[dir='rtl'] .watch-layout .img-span .cargo-icon {
}

.my-ads-layout .img-span {
    position: relative;
}

    .my-ads-layout .img-span .cargo-icon {
        display: block;
        position: absolute;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        background-color: #FFFFFF;
        padding: 4px;
        font-size: 32px;
        z-index: 3;
    }

*[dir='rtl'] .my-ads-layout .img-span .cargo-icon {
    left: 5px;
    right: auto;
    bottom: 5px;
}

.my-ads-layout .img-span .img-polaroid {
    max-height: 80px;
    text-align: center;
    padding: 0px;
    width: 100%;
    height: 80px;
    object-position: center center;
}


.mobile .my-ads-layout .img-span .cargo-icon {
    display: block;
    position: absolute;
    right: 5px !important;
    bottom: 5px;
    border-radius: 50%;
    background-color: #FFFFFF;
    padding: 4px;
    font-size: 32px;
    z-index: 3;
}

*[dir='rtl'] .mobile .my-ads-layout .img-span .cargo-icon {
    left: 5px !important;
    right: auto !important;
    bottom: 5px;
}
/* #endregion ============================== /Saved Ads ================================================ */
/* #region ===================================== Header ================================================ */
.nav-header {
    display: block;
}

.menu-helper-mobile {
    display: none;
    position: fixed;
    top: 63px;
    left: 10px;
    background-color: var(--color-bg-warning);
    width: calc(100% - 20px);
    border-radius: var(--radius-4);
    z-index: 2;
}

    .menu-helper-mobile .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .menu-helper-mobile .helper-btn {
        display: block;
        position: absolute;
        right: 0px;
        top: 2px;
        font-size: 14px;
        border: 0px none transparent;
        width: 40px;
        height: 40px;
        background-color: transparent;
    }


*[dir='rtl'] .menu-helper-mobile .helper-btn {
    left: 0px;
    right: auto;
}

.menu-helper-mobile .content {
    padding: 12px 50px 12px 15px;
}

*[dir='rtl'] .menu-helper-mobile .content {
    padding: 12px 15px 12px 50px;
}

.menu-helper-mobile .content:before {
    content: '';
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--color-bg-warning);
    position: absolute;
    top: -18px;
    left: 14px;
    z-index: 999;
}

*[dir='rtl'] .menu-helper-mobile .content:before {
    right: 14px;
    left: auto;
}

@media (max-width: 992px) {
    .menu-helper-mobile {
        display: block;
    }
}
/* #region ------------------------- Top header --------------------------- */
.nav-header {
    padding: 0px 0px !important;
    margin-bottom: 0px !important;
}

    .nav-header .top-header {
        background-color: var(--color-bg-panel);
        border-bottom: 1px solid var(--color-border-muted);
        display: block;
        padding-bottom: 0px;
        padding-top: 0px;
        position: relative;
    }

        .nav-header .top-header .container {
            min-height: 55px;
            position: relative;
        }

        .nav-header .top-header .right-side {
            display: block;
            float: right;
        }

*[dir='rtl'] .nav-header .top-header .right-side {
    float: left;
}

.nav-header .top-header .sign-in-btn {
    display: inline-block;
    margin-block-start: 7px;
    vertical-align: top;
    margin-block-end: 8px;
    margin-inline-start: var(--gap-16);
}

.nav-header .top-header .balance-btn {
    display: inline-block;
    vertical-align: top;
    height: 55px;
    font-size: 0px;
    text-decoration: none;
    padding-top: 10px;
    margin-left: 20px;
    margin-right: 30px;
}

    .nav-header .top-header .balance-btn .ci-wallet {
        font-size: 32px;
    }

*[dir='rtl'] .nav-header .top-header .balance-btn {
    margin-left: 30px;
    margin-right: 20px;
}

    *[dir='rtl'] .nav-header .top-header .balance-btn .ci-wallet {
        transform: rotateY(180deg);
    }

.nav-header .top-header .balance-btn bdi {
    vertical-align: top;
    font-size: 14px;
    padding-left: 5px;
    padding-top: 7px;
    display: inline-block;
}

*[dir='rtl'] .nav-header .top-header .balance-btn bdi {
    padding-inline: 5px;
}

.nav-header .top-header .balance-btn bdi span + span {
    padding-inline: 5px;
}

.nav-header .top-header .savedads-btn {
    display: inline-block;
    vertical-align: top;
    height: 55px;
    font-size: 0px;
    text-decoration: none;
    padding-top: 8px;
    position: relative;
    margin-left: 20px;
}

*[dir='rtl'] .nav-header .top-header .savedads-btn {
    margin-left: 0px;
    margin-right: 20px;
}

.nav-header .top-header .savedads-btn .ci-heart {
    font-size: 36px;
}

.nav-header .top-header .savedads-btn span {
    font-size: 11px;
    vertical-align: middle;
    background-color: #FBCFCF;
    color: var(--color-text-danger) !important;
    font-weight: 700;
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--radius-32);
    position: absolute;
    top: 6px;
    left: 18px;
    z-index: 1;
    border: 3px #F9F9F9 solid;
}

*[dir='rtl'] .nav-header .top-header .savedads-btn span {
    left: auto;
    right: 18px;
}


.nav-header .top-header .savedads-btn span:empty {
    display: none;
}

.nav-header .top-header .messages-btn {
    display: inline-block;
    vertical-align: top;
    height: 55px;
    font-size: 0px;
    text-decoration: none;
    padding-top: 8px;
    position: relative;
}

    .nav-header .top-header .messages-btn .ci-message {
        font-size: 36px;
    }

    .nav-header .top-header .messages-btn span {
        background-color: var(--color-bg-danger);
        border: 3px solid var(--color-bg-panel);
        border-radius: var(--radius-32);
        color: var(--color-text-alt) !important;
        display: flex;
        font-size: 11px;
        font-weight: 700;
        inset-inline-start: 18px;
        position: absolute;
        top: 6px;
        vertical-align: middle;
        z-index: 1;
        min-width: 24px;
        height: 24px;
        padding-inline: var(--gap-4);
        justify-content: center;
        align-items: center;
        line-height: 120%;
    }

        .nav-header .top-header .messages-btn span:empty {
            display: none !important;
        }


*[dir='rtl'] .nav-header .top-header .messages-btn .ci-message {
    transform: rotateY(180deg);
}


.nav-header .top-header .notifications-btn {
    display: inline-block;
    vertical-align: top;
    height: 55px;
    font-size: 0px;
    text-decoration: none;
    padding-top: 8px;
    position: relative;
    margin-left: 20px;
}

*[dir='rtl'] .nav-header .top-header .notifications-btn {
    margin-left: 0px;
    margin-right: 20px;
}


.nav-header .top-header .notifications-btn .ci-bell {
    font-size: 36px;
}

.nav-header .top-header .notifications-btn span {
    background-color: var(--color-bg-danger);
    border: 3px solid var(--color-bg-panel);
    border-radius: var(--radius-32);
    color: var(--color-text-alt) !important;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    inset-inline-start: 18px;
    position: absolute;
    top: 6px;
    vertical-align: middle;
    z-index: 1;
    min-width: 24px;
    height: 24px;
    padding-inline: var(--gap-4);
    justify-content: center;
    align-items: center;
    line-height: 120%;
}


    .nav-header .top-header .notifications-btn span:empty {
        display: none;
    }



.nav-header .top-header .cart-btn {
    display: inline-block;
    vertical-align: top;
    height: 55px;
    font-size: 0px;
    text-decoration: none;
    padding-top: 8px;
    position: relative;
    margin-left: 20px;
    border: 0px none transparent;
    background: transparent;
    padding: 0px;
}

*[dir='rtl'] .nav-header .top-header .cart-btn {
    margin-left: 0px;
    margin-right: 20px;
}


.nav-header .top-header .cart-btn .ci-shopping-cart-empty {
    font-size: 36px;
}

*[dir='rtl'] .nav-header .top-header .cart-btn .ci-shopping-cart-empty {
    transform: rotateY(180deg);
}

.nav-header .top-header .cart-btn span {
    background-color: var(--color-bg-danger);
    border: 3px solid var(--color-bg-panel);
    border-radius: var(--radius-32);
    color: var(--color-text-alt) !important;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    inset-inline-start: 18px;
    position: absolute;
    top: 6px;
    vertical-align: middle;
    z-index: 1;
    min-width: 24px;
    height: 24px;
    padding-inline: var(--gap-4);
    justify-content: center;
    align-items: center;
    line-height: 120%;
}


    .nav-header .top-header .cart-btn span:empty {
        display: none;
    }



/* #region Language Selector */
.nav-header .top-header .language-selector {
    display: inline-block;
    height: 55px;
    list-style: none;
    font-size: 0px;
    padding-top: 16px;
    padding-bottom: 16px;
    float: left;
    margin-bottom: 0px;
}

*[dir='rtl'] .nav-header .top-header .language-selector {
    float: right;
}

.nav-header .top-header .language-selector li {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
    padding-inline-end: var(--gap-16);
}

    .nav-header .top-header .language-selector li:last-child {
        padding-inline-end: 0px;
    }

    .nav-header .top-header .language-selector li + li {
        border-inline-start: 1px solid var(--color-border-basic);
        padding-inline-start: var(--gap-16);
    }

    .nav-header .top-header .language-selector li a {
        font-size: 14px;
        font-weight: 400 !important;
        text-decoration: none;
        padding: 3px 0px;
        display: inline-block;
        cursor: pointer;
        line-height: 1.1em;
    }
/* #endregion Language Selector */
/* #region User Account */
.nav-header .top-header .user-account-dropdown {
    display: inline-block;
    vertical-align: top;
    position: relative;
}

    .nav-header .top-header .user-account-dropdown .user-account-btn {
        display: inline-block;
        vertical-align: top;
        position: relative;
        height: 55px;
        cursor: pointer;
        border: 0px none transparent;
        border-radius: var(--radius-0);
        border-left: 1px solid var(--color-border-muted);
        border-right: 1px solid var(--color-border-muted);
        background-color: transparent;
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 0px;
        padding-bottom: 0px;
        font-size: 0px;
        transition: background-color 0.2s ease;
    }

        .nav-header .top-header .user-account-dropdown .user-account-btn:hover {
            background-color: var(--color-bg-inputs-selected-solid);
        }

        .nav-header .top-header .user-account-dropdown .user-account-btn .user-avatar {
            display: block;
            width: 40px;
            height: 40px;
            vertical-align: top;
            position: absolute;
            top: calc(50% - 21px);
            right: 26px;
        }

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-btn .user-avatar {
    left: 26px;
    right: auto;
}

.nav-header .top-header .user-account-dropdown .user-account-btn .user-avatar i {
    font-size: 24px;
}

.nav-header .top-header .user-account-dropdown .user-account-btn .name {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    margin-right: 64px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-btn .name {
    margin-left: 64px;
    margin-right: 0px;
}

.nav-header .top-header .user-account-dropdown .user-account-btn .ci-caret-down {
    position: absolute;
    font-size: 10px;
    right: 8px;
    top: calc(50% - 5px);
    z-index: 1;
}

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-btn .ci-caret-down {
    right: auto;
    left: 8px;
}

.nav-header .top-header .user-account-dropdown .user-account-menu {
    position: absolute;
    z-index: 3;
    list-style: none;
    display: none;
    background-color: #FFFFFF;
    border-radius: var(--radius-4);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 30px;
    width: 320px;
    top: 60px;
    right: 0px;
    padding-bottom: 10px;
}

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-menu {
    right: auto;
    left: 0px;
}


.nav-header .top-header .user-account-dropdown.active .user-account-menu {
    display: block;
}


.nav-header .top-header .user-account-dropdown .user-account-menu ul {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

    .nav-header .top-header .user-account-dropdown .user-account-menu ul:before {
        content: '';
        display: block;
        width: 0px;
        height: 0px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid #FFFFFF;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        position: absolute;
        top: -19px;
        right: 36px;
    }

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-menu ul:before {
    right: auto;
    left: 36px;
}


.nav-header .top-header .user-account-dropdown .user-account-menu ul a {
    display: block;
    position: relative;
    width: 100%;
    padding: 5px 55px 5px 50px;
    font-weight: 400;
    text-decoration: none;
    font-size: 0px;
    line-height: 14px;
}

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-menu ul a {
    padding: 5px 50px 5px 55px;
}

.nav-header .top-header .user-account-dropdown .user-account-menu ul i {
    font-size: 32px;
    position: absolute;
    top: calc(50% - 16px);
    left: 10px;
}

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-menu ul i {
    right: 10px;
    left: auto;
}

.nav-header .top-header .user-account-dropdown .user-account-menu ul span {
    font-size: 14px;
    display: inline-block;
    font-weight: 500;
    padding-top: 7px;
    padding-bottom: 7px;
    line-height: 15px;
}

.nav-header .top-header .user-account-dropdown .user-account-menu ul li.divider {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #F2F2F2;
    margin-top: 10px;
    margin-bottom: 10px;
}

.nav-header .top-header .user-account-dropdown .user-account-menu ul a b {
    position: absolute;
    top: calc(50% - 12px);
    right: 10px;
    color: var(--color-text-danger);
    background-color: #FBCFCF;
    font-size: 14px;
    font-weight: 500;
    border-radius: 40px;
    padding: 3px 10px 3px 10px;
}

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-menu ul a b {
    left: 10px;
    right: auto;
}

.nav-header .top-header .user-account-dropdown .user-account-menu ul a b:empty {
    display: none;
}

.nav-header .top-header .user-account-dropdown .user-account-menu .header {
    position: relative;
    padding-left: 98px;
    padding-right: 10px;
    min-height: 86px;
}

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-menu .header {
    padding-left: 10px;
    padding-right: 98px;
}

    .nav-header .top-header .user-account-dropdown .user-account-menu .header a,
    *[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-menu .header a {
        padding: 0px;
    }

.nav-header .top-header .user-account-dropdown .user-account-menu .header .user-avatar {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 70px;
    height: 70px;
}

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-menu .header .user-avatar {
    right: 12px;
    left: auto;
}

.nav-header .top-header .user-account-dropdown .user-account-menu .header .user-avatar i {
    left: 0px;
    font-size: 54px;
    top: 50%;
    font-weight: 400;
}

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-menu .header .user-avatar i {
    left: auto;
    right: 0px;
}

.nav-header .top-header .user-account-dropdown .user-account-menu .header .user-info {
    text-decoration: none;
    line-height: 14px;
}

    .nav-header .top-header .user-account-dropdown .user-account-menu .header .user-info .name {
        display: inline-block;
        margin-top: 17px;
        font-size: 16px;
        word-break: break-word;
        line-height: 16px;
        padding-top: 0px;
        padding-bottom: 5px;
    }

    .nav-header .top-header .user-account-dropdown .user-account-menu .header .user-info .login-info {
        font-size: 12px;
        font-weight: 400;
        word-break: break-word;
        display: block;
        width: 100%;
    }

.nav-header .top-header .user-account-dropdown .user-account-menu small {
    font-size: 12px;
    display: block;
    width: 100%;
    -webkit-font-smoothing: subpixel-antialiased;
    font-family: 'Manrope', Arial;
}

    .nav-header .top-header .user-account-dropdown .user-account-menu small span {
        font-size: 12px;
        padding-top: 0px;
        padding-bottom: 0px;
        display: inline;
    }

    .nav-header .top-header .user-account-dropdown .user-account-menu small > span {
        padding-right: 5px;
    }

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-menu small > span {
    padding-right: 0px;
    padding-left: 5px;
}

.nav-header .top-header .user-account-dropdown .user-account-menu small bdi span + span {
    padding-left: 5px;
}

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-menu small bdi span + span {
    padding-left: 0px;
    padding-right: 5px;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .header {
    padding-left: 0px;
    padding-right: 0px;
    min-height: auto;
}

.user-account-menu .user-info-block {
    display: table;
    width: 100%;
    table-layout: fixed;
}

    .user-account-menu .user-info-block > * {
        display: table-row;
    }

        .user-account-menu .user-info-block > * > * {
            display: table-cell;
            vertical-align: middle;
        }

            .user-account-menu .user-info-block > * > *:first-child {
                width: 96px;
                height: 96px;
            }

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .header .user-info .name {
    margin-top: 0px;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser {
    border-top: 1px solid #F2F2F2;
    border-bottom: 1px solid #F2F2F2;
    margin-bottom: 10px;
}

.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.success {
    background-color: #E6F4ED;
}

.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.warning {
    background-color: #FFF9C5;
}


.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.danger {
    background-color: #FBCFCF;
}



.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-btn {
    display: block;
    width: 100%;
    position: relative;
    cursor: pointer;
    padding-top: 8px;
    padding-bottom: 8px;
}

    .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-btn .ci-pazar-small {
        font-size: 14px;
        position: absolute;
        top: calc(50% - 7px);
        right: 15px;
        left: auto;
        z-index: 1;
    }

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-btn .ci-pazar-small {
    right: auto;
    left: 15px;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed .collapser-btn .ci-pazar-small {
    transform: rotate(180deg);
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed .collapser-btn .plan-name {
    color: var(--color-text-basic);
    text-transform: uppercase;
    display: inline-block;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-btn .plan-name {
    display: none;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed .collapser-btn .title {
    display: none;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-btn .title {
    color: var(--color-text-basic);
    font-weight: 700;
    display: inline-block;
    text-transform: none;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-btn .badge {
    display: none;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed .collapser-btn .badge {
    display: inline-block;
    padding: 6px 10px 6px 10px;
    border-radius: var(--radius-4);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
    background-color: rgba(33, 37, 41, 0.1);
    margin-left: 10px;
}

    .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed .collapser-btn .badge span {
        font-weight: 400;
        padding: 0px;
        line-height: 16px;
    }

    .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed .collapser-btn .badge *:first-child,
    .vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed .collapser-btn .badge *:last-child,
    .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed .collapser-btn .badge *:nth-child(2),
    .vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed.danger .collapser-btn .badge *:first-child,
    .vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed.danger .collapser-btn .badge *:last-child {
        display: none;
    }

    .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed .collapser-btn .badge *:last-child,
    .vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed .collapser-btn .badge *:first-child,
    .vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed.danger .collapser-btn .badge *:nth-child(2) {
        display: inline-block;
    }


*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed .collapser-btn .badge {
    margin-right: 10px;
    margin-left: 0px;
}

.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.success .collapser-btn .badge {
    background-color: rgba(93, 170, 128, 0.2);
    color: var(--color-text-primary);
}

.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.warning .collapser-btn .badge {
    background-color: var(--color-bg-warning);
}


.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-btn .ci-pazar.ci-premium.ci-color-success,
.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-btn .ci-pazar.ci-premium.ci-color-warning,
.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.warning .collapser-btn .ci-pazar.ci-premium.ci-color-success,
.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.warning .collapser-btn .ci-pazar.ci-premium.ci-color-muted,
.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.success .collapser-btn .ci-pazar.ci-premium.ci-color-warning,
.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.success .collapser-btn .ci-pazar.ci-premium.ci-color-muted,
.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.success .collapser-btn .ci-pazar.ci-premium.ci-color-success,
.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.warning .collapser-btn .ci-pazar.ci-premium.ci-color-warning {
    display: none;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.success .collapser-btn .ci-pazar.ci-premium.ci-color-muted,
.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.warning .collapser-btn .ci-pazar.ci-premium.ci-color-muted {
    display: block;
}

.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.success .collapser-btn .ci-pazar.ci-premium.ci-color-success {
    display: block;
}

.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.warning .collapser-btn .ci-pazar.ci-premium.ci-color-warning {
    display: block;
}


.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .free-plan-container,
.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.danger .collapser-content .expired-plan-container {
    display: block;
    text-align: center;
}

.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .free-plan-container,
.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .expired-plan-container,
.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.warning .collapser-content .expired-plan-container,
.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.success .collapser-content .expired-plan-container {
    display: none;
}

    .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .free-plan-container .description,
    .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .expired-plan-container .description {
        display: block;
        text-align: center;
        color: var(--color-text-muted);
        font-size: 14px;
        font-weight: 400;
        padding: 10px 10px 10px 10px;
        text-transform: none;
    }

    .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .free-plan-container .motivator,
    .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .expired-plan-container .motivator {
        display: block;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        padding: 10px 10px 10px 10px;
        text-transform: none;
        color: var(--color-text-basic);
    }

    .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .free-plan-container .new-btn,
    .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .expired-plan-container .new-btn {
        width: auto;
        color: #FFFFFF !important;
        font-size: 14px;
        font-weight: 500;
        display: inline-block;
        padding: 12px 12px 12px 12px;
        margin-bottom: 20px;
        margin-top: 5px;
    }




.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .paid-plan-container,
.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.danger .collapser-content .paid-plan-container {
    display: none;
}

.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .paid-plan-container {
    display: block;
    font-size: 0px;
    text-align: center;
}



.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .paid-plan-container .left-side,
.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .paid-plan-container .right-side {
    display: inline-block;
    font-size: 14px;
    width: 50%;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .paid-plan-container .left-side {
    border-right: 1px solid #C5C5C5;
}

*[dir='rtl'] .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .paid-plan-container .left-side {
    border-right: 0px none transparent;
    border-left: 1px solid #C5C5C5;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .paid-plan-container .left-side small,
.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .paid-plan-container .right-side small {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700 !important;
    font-family: "Manrope";
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .paid-plan-container .left-side a {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 14px;
    text-transform: uppercase;
    padding: 0;
    margin: 0px;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .paid-plan-container .right-side span {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 32px;
    padding: 0;
    margin: 0px;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.success .collapser-content .paid-plan-container .right-side span {
    color: var(--color-text-muted);
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.warning .collapser-content .paid-plan-container .right-side span {
    color: #F6AD3F;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .paid-plan-container .left-side small {
    padding-top: 10px;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .paid-plan-container .right-side small {
    padding-top: 9px;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .paid-plan-container .warning-text {
    font-size: 14px;
    color: var(--color-text-muted);
    padding: 10px;
    display: none;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.warning .collapser-content .paid-plan-container .warning-text {
    display: block;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-content .paid-plan-container a {
    font-size: 14px;
    color: var(--color-text-primary);
    text-transform: uppercase;
    padding: 10px 0px 10px 0px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* #endregion User Account */
/* #endregion --------------------- /Top header --------------------------- */
/* #region ----------------------- Bottom header -------------------------- */
.nav-header .bottom-header {
    display: block;
    position: relative;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DDDDDD;
}

    .nav-header .bottom-header .site-logo {
        display: block;
        float: left;
        width: 260px;
        height: 75px;
        background-color: transparent;
        background-position: left center;
        background-repeat: no-repeat;
        background-size: contain;
        font-size: 0px !important;
        color: transparent !important;
    }

*[dir='rtl'] .nav-header .bottom-header .site-logo {
    float: right;
}

.nav-header .bottom-header .right-side {
    display: block;
    float: right;
}

*[dir='rtl'] .nav-header .bottom-header .right-side {
    float: left;
}

.nav-header .bottom-header .btn-danger {
    padding: 17px 30px 16px 36px !important;
    margin-top: 13px !important;
    vertical-align: top !important;
    margin-left: 15px !important;
    border-radius: var(--radius-8) !important;
    border: 0px none transparent !important;
    color: #FFFFFF !important;
    position: relative;
    text-shadow: none;
    background: none var(--color-bg-danger) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    opacity: 1;
    transition: opacity 0.2s ease !important;
    text-decoration: none !important;
    display: inline-block;
    height: auto !important;
}

*[dir='rtl'] .nav-header .bottom-header .btn-danger {
    padding: 17px 36px 16px 30px;
    margin-left: 0px;
    margin-right: 15px;
}

.nav-header .bottom-header .btn-danger:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
    text-decoration: none !important;
}

.nav-header .bottom-header .btn-danger .ci-plus {
    top: calc(50% - 7px);
    left: 12px;
    font-size: 12px;
    position: absolute;
}

*[dir='rtl'] .nav-header .bottom-header .btn-danger .ci-plus {
    left: auto;
    right: 12px;
}

.nav-header .bottom-header .nav-menu {
    display: inline-block;
    list-style: none;
    margin: 0px;
    padding: 0px;
    vertical-align: top;
    font-size: 0px;
}

    .nav-header .bottom-header .nav-menu > li {
        display: inline-block;
        margin: 0px;
        vertical-align: top;
    }

        .nav-header .bottom-header .nav-menu > li > a {
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
            display: inline-block;
            position: relative;
            height: 75px;
            padding: 27px 15px 0px 15px;
        }

            .nav-header .bottom-header .nav-menu > li > a > span {
                display: inline-block;
                vertical-align: top;
            }

            .nav-header .bottom-header .nav-menu > li > a > b {
                font-size: 11px;
                color: var(--color-text-alt);
                font-weight: 700;
                display: inline-flex;
                vertical-align: top;
                border-radius: 40px;
                background-color: var(--color-bg-danger);
                padding-inline: var(--gap-4);
                margin-top: 0px;
                margin-inline-start: 2px;
                min-width: 20px;
                height: 20px;
                width: auto;
                align-items: center;
                justify-content: center;
                line-height: 120%;
            }


                .nav-header .bottom-header .nav-menu > li > a > b:empty {
                    display: none;
                }
/* #endregion -------------------- Bottom header -------------------------- */
/* #region ----------------------- Mobile header -------------------------- */
.nav-header-mobile {
    display: none;
    width: 100%;
    background-color: #F9F9F9;
    height: 55px;
    border-bottom: 1px solid #DDDDDD;
    padding-left: 5px;
    padding-right: 5px;
    position: fixed;
    z-index: 100;
    top: 0px;
    left: 0px;
}

.mobile-topbar-whitespace {
    display: none;
    width: 100%;
    height: 55px;
}

.nav-header-mobile .layout {
    display: table;
    position: relative;
    table-layout: fixed;
    width: 100%;
}

    .nav-header-mobile .layout > * {
        display: table-row;
    }

        .nav-header-mobile .layout > * > * {
            display: table-cell;
            position: relative;
            vertical-align: top;
        }

            .nav-header-mobile .layout > * > *:nth-child(2),
            .nav-header-mobile .layout > * > *:nth-child(3),
            .nav-header-mobile .layout > * > *:nth-child(4),
            .nav-header-mobile .layout > * > *:nth-child(5) {
                width: 64px;
                text-align: center;
            }

.nav-header-mobile .sidemenu-btn {
    display: block;
    width: 64px;
    height: 55px;
    position: relative;
    border-radius: var(--radius-0);
    border: 0px none transparent;
    background-color: transparent;
    cursor: pointer;
}

    .nav-header-mobile .sidemenu-btn .sidemenu-btn-image {
        position: absolute;
        display: block;
        width: 46px;
        height: 46px;
        z-index: 1;
        top: calc(50% - 23px);
        left: calc(50% - 23px);
        background: url('../../Content/Images/icon-website-pict-grayscaled.svg') no-repeat center center transparent;
        background-size: contain;
    }

.nav-header-mobile .search-ads-btn,
.nav-header-mobile .create-ads-btn,
.nav-header-mobile .messages-btn,
.nav-header-mobile .savedads-btn {
    display: block;
    width: 64px;
    height: 55px;
    position: relative;
    border-radius: var(--radius-0);
    cursor: pointer;
}

    .nav-header-mobile .search-ads-btn i,
    .nav-header-mobile .create-ads-btn i,
    .nav-header-mobile .messages-btn i,
    .nav-header-mobile .savedads-btn i {
        display: inline-block;
        position: absolute;
        top: calc(50% - 16px);
        left: calc(50% - 16px);
        font-size: 32px;
        z-index: 1;
    }


    .nav-header-mobile .sidemenu-btn span,
    .nav-header-mobile .search-ads-btn span,
    .nav-header-mobile .create-ads-btn span,
    .nav-header-mobile .messages-btn span,
    .nav-header-mobile .savedads-btn span {
        font-size: 11px;
        vertical-align: middle;
        background-color: var(--color-bg-danger);
        color: #FFFFFF;
        font-weight: 700;
        display: inline-block;
        padding: 2px 6px;
        border-radius: var(--radius-32);
        position: absolute;
        top: 6px;
        z-index: 2;
        border: 3px #F9F9F9 solid;
    }

    .nav-header-mobile .search-ads-btn span,
    .nav-header-mobile .create-ads-btn span,
    .nav-header-mobile .messages-btn span,
    .nav-header-mobile .savedads-btn span {
        left: 30px;
    }

*[dir='rtl'] .nav-header-mobile .search-ads-btn span,
*[dir='rtl'] .nav-header-mobile .create-ads-btn span,
*[dir='rtl'] .nav-header-mobile .messages-btn span,
*[dir='rtl'] .nav-header-mobile .savedads-btn span {
    left: auto;
    right: 30px;
}

.nav-header-mobile .sidemenu-btn span {
    left: 33px;
}

*[dir='rtl'] .nav-header-mobile .sidemenu-btn span {
    right: 33px;
    left: auto;
}

.nav-header-mobile .sidemenu-btn span:empty,
.nav-header-mobile .search-ads-btn span:empty,
.nav-header-mobile .create-ads-btn span:empty,
.nav-header-mobile .messages-btn span:empty,
.nav-header-mobile .savedads-btn span:empty {
    display: none;
}

.nav-header-mobile.account-deletion .left-side {
    display: block;
    float: left;
}

*[dir='rtl'] .nav-header-mobile.account-deletion .left-side {
    float: right;
}

.nav-header-mobile.account-deletion .right-side {
    display: block;
    float: right;
}

*[dir='rtl'] .nav-header-mobile.account-deletion .right-side {
    float: left;
}

.nav-header-mobile.account-deletion .language-selector {
    display: inline-flex;
    list-style: none;
    margin-top: 12px;
}

    .nav-header-mobile.account-deletion .language-selector a {
        padding-inline: 10px;
        font-weight: 400 !important;
        text-decoration: none;
        padding-block: 5px;
        display: inline-block;
    }

    .nav-header-mobile.account-deletion .language-selector li + li {
        border-left: 1px solid #DDDDDD;
    }

*[dir='rtl'] .nav-header-mobile.account-deletion .language-selector li + li {
    border-left: 0px solid transparent;
    border-right: 1px solid #DDDDDD;
}

.nav-header-mobile.account-deletion .log-out-btn {
    text-decoration: none !important;
    font-size: 32px;
    padding: 11px;
    display: inline-block;
}


*[dir='rtl'] .nav-header-mobile.account-deletion .log-out-btn {
    transform: rotateY(180deg);
}

@media (max-width: 450px) {

    .nav-header-mobile.account-deletion .language-selector {
        margin-top: 14px;
    }

        .nav-header-mobile.account-deletion .language-selector a {
            font-size: 12px;
        }
}

/* #endregion ------------------- /Mobile header -------------------------- */
/* #region -------------------- Mobile Side menu -------------------------- */
.mobile-menu-overlay {
    display: none;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.2);
    position: fixed;
    z-index: 999;
    backdrop-filter: blur(10px);
}

    .mobile-menu-overlay.show {
        display: block;
    }

.mobile-side-menu {
    display: block;
    width: 320px;
    height: 100%;
    position: fixed;
    z-index: 1001;
    background-color: #F9F9F9;
    top: 0px;
    left: 0px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 60px;
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

    .mobile-side-menu.show {
        transform: translateX(0%);
        opacity: 1;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 60px;
        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }

*[dir='rtl'] .mobile-side-menu {
    right: 0px;
    left: auto;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

    *[dir='rtl'] .mobile-side-menu.show {
        transform: translateX(0%);
        opacity: 1;
        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }

.mobile-side-menu .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.mobile-side-menu .side-menu-close-btn {
    display: block;
    width: 55px;
    height: 55px;
    position: absolute;
    z-index: 1;
    top: 0px;
    right: 0px;
    font-size: 16px;
    border-radius: var(--radius-0);
    border: 0px none transparent;
    background-color: transparent;
    cursor: pointer;
}

*[dir='rtl'] .mobile-side-menu .side-menu-close-btn {
    right: auto;
    left: 0px;
}


.mobile-side-menu .menu-header {
    background-color: #F9F9F9;
    display: block;
    width: 100%;
    height: 55px;
    position: absolute;
    z-index: 1;
}

    .mobile-side-menu .menu-header .site-logo {
        display: block;
        height: 55px;
        background-color: transparent;
        background-position: left center;
        background-size: contain;
        background-repeat: no-repeat;
        width: 60%;
        margin-left: 24px;
        cursor: pointer;
    }

*[dir='rtl'] .mobile-side-menu .menu-header .site-logo {
    margin-right: 24px;
    margin-left: 0px;
}

.mobile-side-menu .menu-body {
    display: block;
    height: 100%;
    padding-top: 55px;
}

.mobile-side-menu .content {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100% !important;
    padding-top: 5px;
}

.mobile-side-menu .menu-container {
    display: block;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 2px;
}

.mobile-side-menu .divider-horizontal {
    background-color: #F2F2F2;
}

.mobile-side-menu .menu-list-block {
    background-color: #FFFFFF;
    padding-top: 15px;
    padding-bottom: 20px;
}

.mobile-side-menu .user-account-block {
    background-color: #F9F9F9;
    padding-bottom: 20px;
}

.mobile-side-menu .language-selector {
    display: block;
    text-align: center;
    font-size: 0px;
}

.mobile-side-menu .language-selector {
    display: block;
    text-align: center;
    font-size: 0px;
    list-style: none;
    margin: 0px;
    margin-bottom: 30px;
}

    .mobile-side-menu .language-selector li {
        display: inline-block;
        vertical-align: top;
        padding: 0px;
        margin: 0px;
    }

    .mobile-side-menu .language-selector a {
        display: inline-block;
        position: relative;
        vertical-align: top;
        font-size: 14px;
        text-decoration: none;
        font-weight: 400;
        padding: 4px 12px 4px 12px;
    }

    .mobile-side-menu .language-selector li + li {
        border-left: 1px solid #DDDDDD;
    }

*[dir='rtl'] .mobile-side-menu .language-selector li + li {
    border-left: 0px none transparent;
    border-right: 1px solid #DDDDDD;
}

.mobile-side-menu .language-selector-block {
    padding-top: 20px;
    padding-bottom: 20px;
}

.mobile-side-menu .user-account-block .new-btn {
    display: block;
    width: 100%;
    padding-top: 16px;
    padding-bottom: 16px;
    border-radius: var(--radius-4);
    text-align: center;
    background: none;
    text-shadow: none;
    font-family: Manrope, Arial !important;
}

    .mobile-side-menu .user-account-block .new-btn span {
        font-family: Manrope, Arial !important;
    }

    .mobile-side-menu .user-account-block .new-btn .ci-pazar {
        font-size: 29px !important;
        margin-top: -4px;
    }

.mobile-side-menu .user-account-block .divider-horizontal {
    background-color: #DDDDDD;
    opacity: 0.5;
}

.mobile-side-menu .btn-danger {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 5px;
}

.mobile-side-menu .btn-danger {
    padding: 16px 40px 16px 40px;
}

    .mobile-side-menu .btn-danger .ci-pazar-small {
        font-size: 14px;
        top: calc(50% - 7px);
        left: 14px;
    }

*[dir='rtl'] .mobile-side-menu .btn-danger .ci-pazar-small {
    font-size: 14px;
    top: calc(50% - 7px);
    left: auto;
    right: 14px;
}

.mobile-side-menu .menu-item {
    display: block;
    width: 100%;
    padding: 10px 40px 10px 40px;
    text-decoration: none;
    position: relative;
    font-weight: 500;
}

    .mobile-side-menu .menu-item .ci-pazar {
        position: absolute;
        font-size: 32px;
        top: calc(50% - 16px);
        left: 0px;
    }

*[dir='rtl'] .mobile-side-menu .menu-item .ci-pazar {
    right: 0px;
    left: auto;
}


.mobile-side-menu .menu-item b {
    display: block;
    background-color: #FBCFCF;
    color: var(--color-text-danger);
    font-weight: 700;
    position: absolute;
    top: calc(50% - 12px);
    right: 0px;
    padding: 3px 10px 3px 10px;
    border-radius: 40px;
}

*[dir='rtl'] .mobile-side-menu .menu-item b {
    left: 0px;
    right: auto;
}

.mobile-side-menu .menu-item b:empty {
    display: none;
}


.mobile-side-menu .menu-item small {
    font-size: 12px;
    display: block;
    width: 100%;
}

    .mobile-side-menu .menu-item small > span {
        padding-right: 5px;
    }

*[dir='rtl'] .mobile-side-menu .menu-item small > span {
    padding-right: 0px;
    padding-left: 5px;
}

.mobile-side-menu .menu-item small span {
    font-size: 12px;
    padding-top: 0px;
    padding-bottom: 0px;
    display: inline;
}

.mobile-side-menu .menu-item small bdi span + span {
    padding-left: 5px;
}

*[dir='rtl'] .mobile-side-menu .menu-item small bdi span + span {
    padding-left: 0px;
    padding-right: 5px;
}


.mobile-side-menu .account {
    width: 100%;
    position: relative;
    padding-left: 80px;
    min-height: 80px;
    display: inline-block;
    text-decoration: none;
}

*[dir='rtl'] .mobile-side-menu .account {
    padding-right: 80px;
    padding-left: 0px;
}

.mobile-side-menu .user-avatar {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
}

*[dir='rtl'] .mobile-side-menu .user-avatar {
    right: 0px;
    left: auto;
}

.mobile-side-menu .account .info .name {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    word-break: break-word;
    text-align: left;
}

*[dir='rtl'] .mobile-side-menu .account .info .name {
    text-align: right;
}

.mobile-side-menu .account .login-info {
    display: block;
    width: 100%;
    font-size: 12px;
    font-weight: 400;
    word-break: break-word;
    text-align: left;
}

*[dir='rtl'] .mobile-side-menu .account .login-info {
    text-align: right;
}

.mobile-side-menu .download-block {
    padding-bottom: 60px;
    position: relative;
    text-align: center;
}

    .mobile-side-menu .download-block p {
        display: block;
        margin-bottom: 10px;
        padding-bottom: 0px;
    }

    .mobile-side-menu .download-block .android-btn,
    .mobile-side-menu .download-block .ios-btn {
        display: inline-block;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: center center;
        background-size: contain;
    }

    .mobile-side-menu .download-block .ios-btn {
        width: 120px;
        height: 40px;
        background-image: url('../../Content/Images/clipart-appstore-button.svg');
    }

    .mobile-side-menu .download-block .android-btn {
        width: 136px;
        height: 41px;
        background-image: url('../../Content/Images/clipart-googleplay-button.svg');
    }

.mobile-side-menu.version-2 .user-account-block .account {
    display: table;
    width: 100%;
    table-layout: fixed;
    padding: 0px;
    min-height: auto;
    margin-bottom: 15px;
}

    .mobile-side-menu.version-2 .user-account-block .account > * {
        display: table-row;
    }

        .mobile-side-menu.version-2 .user-account-block .account > * > * {
            display: table-cell;
            vertical-align: middle;
        }

            .mobile-side-menu.version-2 .user-account-block .account > * > *:first-child {
                width: 80px;
            }

.mobile-side-menu.version-2 .user-avatar {
    position: relative;
}

.mobile-side-menu.version-2 .trusted-seller-badge {
    display: none !important;
    background-color: var(--color-bg-warning);
    border-radius: var(--radius-16);
    padding: 5px 7px 5px 25px !important;
    color: var(--color-text-basic);
    text-transform: uppercase;
    position: relative;
    margin-top: 6px;
}

.vip-user .mobile-side-menu.version-2 .trusted-seller-badge {
    display: inline-block !important;
}

*[dir='rtl'] .mobile-side-menu.version-2 .trusted-seller-badge {
    padding: 5px 25px 5px 7px !important;
}

.mobile-side-menu.version-2 .trusted-seller-badge .ci-check {
    font-size: 12px;
    position: absolute;
    top: calc(50% - 7px);
    left: 5px;
    z-index: 1;
}

*[dir='rtl'] .mobile-side-menu.version-2 .trusted-seller-badge .ci-check {
    right: 5px;
    left: auto;
}

.mobile-side-menu.version-2 .trusted-seller-badge span {
    font-size: 10px;
    font-weight: 700;
    line-height: 10px;
    padding: 0px;
}

.mobile-side-menu.version-2 .collapser {
    background-color: #F2F2F2;
    margin-bottom: 10px;
}

.vip-user .mobile-side-menu.version-2 .collapser.success {
    background-color: #E6F4ED;
}

.vip-user .mobile-side-menu.version-2 .collapser.warning {
    background-color: #FFF9C5;
}

.vip-user .mobile-side-menu.version-2 .collapser.danger {
    background-color: #FBCFCF;
}


.mobile-side-menu.version-2 .collapser .collapser-btn {
    display: block;
    width: 100%;
    position: relative;
    cursor: pointer;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 64px;
    padding-right: 50px;
    text-decoration: none;
    line-height: 26px;
}

*[dir='rtl'] .mobile-side-menu.version-2 .collapser .collapser-btn {
    padding-left: 50px;
    padding-right: 64px;
}

.mobile-side-menu.version-2 .collapser .collapser-btn .ci-pazar {
    position: absolute;
    font-size: 32px;
    top: calc(50% - 16px);
    left: 24px;
    z-index: 1;
}

*[dir='rtl'] .mobile-side-menu.version-2 .collapser .collapser-btn .ci-pazar {
    right: 24px;
    left: auto;
}

.mobile-side-menu.version-2 .collapser .collapser-btn .ci-pazar-small {
    font-size: 14px;
    position: absolute;
    top: calc(50% - 7px);
    right: 24px;
    left: auto;
    z-index: 1;
}

*[dir='rtl'] .mobile-side-menu.version-2 .collapser .collapser-btn .ci-pazar-small {
    right: auto;
    left: 24px;
}

.mobile-side-menu.version-2 .collapser.collapsed .collapser-btn .ci-pazar-small {
    transform: rotate(180deg);
}

.mobile-side-menu.version-2 .collapser.collapsed .collapser-btn .plan-name {
    color: var(--color-text-basic);
    text-transform: uppercase;
    display: inline-block;
}

.mobile-side-menu.version-2 .collapser .collapser-btn .plan-name {
    display: none;
}

.mobile-side-menu.version-2 .collapser.collapsed .collapser-btn .title {
    display: none;
}

.mobile-side-menu.version-2 .collapser .collapser-btn .title {
    color: var(--color-text-basic);
    font-weight: 700;
    display: inline-block;
    text-transform: none;
}

.mobile-side-menu.version-2 .collapser .collapser-btn .badge {
    display: none;
}

.mobile-side-menu.version-2 .collapser.collapsed .collapser-btn .badge {
    display: inline-block;
    padding: 6px 10px 6px 10px;
    border-radius: var(--radius-4);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
    background-color: rgba(33, 37, 41, 0.1);
    margin-left: 10px;
}

    .mobile-side-menu.version-2 .collapser.collapsed .collapser-btn .badge span {
        font-weight: 400;
        padding: 0px;
        line-height: 16px;
    }

    .mobile-side-menu.version-2 .collapser.collapsed .collapser-btn .badge *:first-child,
    .vip-user .mobile-side-menu.version-2 .collapser.collapsed .collapser-btn .badge *:last-child,
    .vip-user .mobile-side-menu.version-2 .collapser.collapsed.danger .collapser-btn .badge *:last-child,
    .vip-user .mobile-side-menu.version-2 .collapser.collapsed.danger .collapser-btn .badge *:first-child,
    .vip-user .mobile-side-menu.version-2 .collapser.collapsed.success .collapser-btn .badge *:nth-child(2),
    .vip-user .mobile-side-menu.version-2 .collapser.collapsed.warning .collapser-btn .badge *:nth-child(2),
    .mobile-side-menu.version-2 .collapser.collapsed.danger .collapser-btn .badge *:nth-child(2) {
        display: none;
    }

    .mobile-side-menu.version-2 .collapser.collapsed .collapser-btn .badge *:last-child,
    .vip-user .mobile-side-menu.version-2 .collapser.collapsed .collapser-btn .badge *:first-child,
    .vip-user .mobile-side-menu.version-2 .collapser.collapsed.danger .collapser-btn .badge *:nth-child(2) {
        display: inline-block;
    }

*[dir='rtl'] .mobile-side-menu.version-2 .collapser.collapsed .collapser-btn .badge {
    margin-right: 10px;
    margin-left: 0px;
}

.vip-user .mobile-side-menu.version-2 .collapser.success .collapser-btn .badge {
    background-color: rgba(93, 170, 128, 0.2);
    color: var(--color-text-primary);
}

.vip-user .mobile-side-menu.version-2 .collapser.warning .collapser-btn .badge {
    background-color: var(--color-bg-warning);
}


.mobile-side-menu.version-2 .collapser .collapser-btn .ci-pazar.ci-premium.ci-color-success,
.mobile-side-menu.version-2 .collapser .collapser-btn .ci-pazar.ci-premium.ci-color-warning,
.mobile-side-menu.version-2 .collapser.warning .collapser-btn .ci-pazar.ci-premium.ci-color-success,
.vip-user .mobile-side-menu.version-2 .collapser.warning .collapser-btn .ci-pazar.ci-premium.ci-color-muted,
.mobile-side-menu.version-2 .collapser.success .collapser-btn .ci-pazar.ci-premium.ci-color-warning,
.vip-user .mobile-side-menu.version-2 .collapser.success .collapser-btn .ci-pazar.ci-premium.ci-color-muted,
.mobile-side-menu.version-2 .collapser.success .collapser-btn .ci-pazar.ci-premium.ci-color-success,
.mobile-side-menu.version-2 .collapser.warning .collapser-btn .ci-pazar.ci-premium.ci-color-warning {
    display: none;
}

.mobile-side-menu.version-2 .collapser.success .collapser-btn .ci-pazar.ci-premium.ci-color-muted,
.mobile-side-menu.version-2 .collapser.warning .collapser-btn .ci-pazar.ci-premium.ci-color-muted {
    display: block;
}

.vip-user .mobile-side-menu.version-2 .collapser.success .collapser-btn .ci-pazar.ci-premium.ci-color-success {
    display: block;
}

.vip-user .mobile-side-menu.version-2 .collapser.warning .collapser-btn .ci-pazar.ci-premium.ci-color-warning {
    display: block;
}

.mobile-side-menu.version-2 .collapser .collapser-content .free-plan-container {
    display: block;
    text-align: center;
}

.vip-user .mobile-side-menu.version-2 .collapser .collapser-content .free-plan-container {
    display: none;
}

.mobile-side-menu.version-2 .collapser .collapser-content .free-plan-container .description,
.mobile-side-menu.version-2 .collapser .collapser-content .expired-plan-container .description {
    display: block;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 400;
    padding: 10px 10px 10px 10px;
}

.mobile-side-menu.version-2 .collapser .collapser-content .free-plan-container .motivator,
.mobile-side-menu.version-2 .collapser .collapser-content .expired-plan-container .motivator {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 10px 10px 10px;
}

.mobile-side-menu.version-2 .collapser .collapser-content .free-plan-container .new-btn,
.mobile-side-menu.version-2 .collapser .collapser-content .expired-plan-container .new-btn {
    font-size: 14px;
    padding: 16px 0px 16px 0px;
    margin-bottom: 10px;
    margin-top: 5px;
}


.mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container,
.mobile-side-menu.version-2 .collapser .collapser-content .expired-plan-container,
.vip-user .mobile-side-menu.version-2 .collapser.danger .collapser-content .paid-plan-container {
    display: none;
}

.vip-user .mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container {
    display: block;
    font-size: 0px;
    text-align: center;
    padding-bottom: 20px;
}

.vip-user .mobile-side-menu.version-2 .collapser.danger .collapser-content .expired-plan-container {
    display: block;
}


.mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container .left-side,
.mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container .right-side {
    display: inline-block;
    font-size: 14px;
    width: 50%;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container .left-side {
    border-right: 1px solid #C5C5C5;
}

*[dir='rtl'] .mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container .left-side {
    border-right: 0px none transparent;
    border-left: 1px solid #C5C5C5;
}

.mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container .left-side small,
.mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container .right-side small {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700 !important;
    font-family: "Manrope";
}

.mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container .left-side a {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 14px;
    text-transform: uppercase;
    padding: 0;
    margin: 0px;
    text-decoration: none;
}

.mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container .right-side span {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 32px;
    padding: 0;
    margin: 0px;
    line-height: 16px;
}

.mobile-side-menu.version-2 .collapser.success .collapser-content .paid-plan-container .right-side span {
    color: var(--color-text-muted);
}

.mobile-side-menu.version-2 .collapser.warning .collapser-content .paid-plan-container .right-side span {
    color: #F6AD3F;
}

.mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container .left-side small {
    padding-top: 10px;
}

.mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container .right-side small {
    padding-top: 9px;
}

.mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container .warning-text {
    font-size: 14px;
    color: var(--color-text-muted);
    padding: 10px;
    display: none;
}

.mobile-side-menu.version-2 .collapser.warning .collapser-content .paid-plan-container .warning-text {
    display: block;
}

.mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container a {
    font-size: 14px;
    color: var(--color-text-primary);
    text-transform: uppercase;
    padding: 10px 0px 10px 0px;
    font-weight: 700;
    margin-bottom: 10px;
    text-decoration: none;
}

.mobile-side-menu.version-2 .collapser .collapser-content .paid-plan-container .btn-primary,
.mobile-side-menu.version-2 .collapser .collapser-content .expired-plan-container .btn-danger {
    font-size: 14px;
    padding: 16px 0px 16px 0px;
    font-weight: 700;
    margin-bottom: 10px;
    text-decoration: none;
}


/* #endregion ---------------- /Mobile Side menu -------------------------- */
/* #region ------------------ Ad details - topbar ------------------------- */
.mobile-topbar-ad-details {
    display: none;
    position: fixed;
    z-index: 1000;
    background-color: #F9F9F9;
    border-bottom: #DDDDDD 1px solid;
    height: 55px;
    top: 0px;
    left: 0px;
    width: 100%;
}

    .mobile-topbar-ad-details .inner {
        display: block;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        position: relative;
    }

    .mobile-topbar-ad-details .btn-back,
    .mobile-topbar-ad-details .btn-save-ad {
        display: block;
        width: 64px;
        height: 55px;
        position: absolute;
        z-index: 1;
        font-size: 36px;
        border: 0px none transparent;
        background-color: transparent;
        top: 0px;
        cursor: pointer;
    }

    .mobile-topbar-ad-details .btn-back {
        left: 0px;
    }

*[dir='rtl'] .mobile-topbar-ad-details .btn-back {
    left: auto;
    right: 0px;
    transform: rotateY(180deg);
}

.mobile-topbar-ad-details .btn-save-ad {
    right: 0px;
}

*[dir='rtl'] .mobile-topbar-ad-details .btn-save-ad {
    right: auto;
    left: 0px;
}

.mobile-topbar-ad-details .mobile-manage-ad-btn {
    display: block;
    width: 64px;
    height: 55px;
    position: absolute;
    top: 0px;
    right: 64px;
    font-size: 36px;
    border: 0px none transparent;
    background: transparent;
}

*[dir='rtl'] .mobile-topbar-ad-details .mobile-manage-ad-btn {
    display: block;
    width: 64px;
    height: 55px;
    position: absolute;
    top: 0px;
    right: auto;
    left: 64px;
    font-size: 36px;
    border: 0px none transparent;
    background: transparent;
}



/* */
.ad-details-mobile-topbar {
    display: none;
    position: fixed;
    inset-inline-start: 0px;
    inset-block-start: 0px;
    width: 100%;
    z-index: 101;
    background-color: #ffffff;
    height: 56px;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
}

    .ad-details-mobile-topbar .left-side {
        flex: 0 0 auto;
    }

    .ad-details-mobile-topbar .right-side {
        display: flex;
        align-items: center;
    }

@media (max-width: 991px) {
    .ad-details-mobile-topbar {
        display: flex;
    }
}

.ad-details-mobile-topbar .btn-back,
.ad-details-mobile-topbar .btn-favorites,
.ad-details-mobile-topbar .btn-share,
.ad-details-mobile-topbar .btn-dots {
    display: flex;
    width: 56px;
    height: 56px;
    font-size: 24px;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 0px none transparent;
    border-radius: var(--radius-0);
}

*[dir='rtl'] .ad-details-mobile-topbar .btn-back,
*[dir='rtl'] .ad-details-mobile-topbar .btn-share {
    transform: rotateY(180deg);
}



/* #endregion -------------- /Ad details - topbar ------------------------- */
@media (max-width: 991px) {
    .nav-header {
        display: none !important;
    }

    .nav-header-mobile {
        display: block;
    }

    .mobile-topbar-whitespace {
        display: block;
    }

    .menu-helper-mobile {
        /*display: none;*/
    }

    .mobile-topbar-ad-details {
        display: block;
    }

    .nav-header.nav-header-tablet {
        display: block !important;
    }

    .nav-header-tablet .static-container,
    .nav-header-tablet .bootstrap4.container {
        width: auto;
        max-width: none;
        margin: 0;
        padding-inline: 16px;
    }

    .nav-header-tablet .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 0;
    }

    .nav-header-tablet .row::before,
    .nav-header-tablet .row::after {
        display: none;
    }

    .nav-header-tablet .row > [class*="span"] {
        width: auto;
        margin-left: 0;
        float: none;
    }

    .nav-header-tablet .row:has(> .span10 > .google-ad) {
        display: none;
    }

    .nav-header-tablet .home-header-content .elements {
        flex: 1;
        padding-right: 0;
    }

    .nav-header-tablet .home-header-logo-slogan .slogan {
        flex: 1;
        min-width: 0;
        padding-right: 0;
    }

    html:has(.home-main),
    body:has(.home-main) {
        min-width: 0;
    }

    .static-container:has(.home-main) {
        width: auto;
        padding-inline: 16px;
    }

    .static-container:has(.home-main) > .row,
    .home-main > .row {
        margin-left: 0;
    }

    .row > .home-main,
    .static-container:has(.home-main) .landing-blog-section > .span10,
    .static-container:has(.home-main) .landing-categories-section > .span10,
    .static-container:has(.home-main) .landing-jobs-section > .span10 {
        width: auto;
        float: none;
        margin-left: 0;
    }

    .home-main .home-cols {
        display: flex;
        gap: 32px;
        margin-left: 0;
    }

    .home-main .home-cols::before,
    .home-main .home-cols::after {
        display: none;
    }

    .home-main .home-cols > * {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        margin-left: 0;
        float: none;
    }

    .home-main .home-cols > .span3,
    .home-main .home-cols > .MainPage_LeftArea {
        flex: 0 0 310px;
    }

    .home-main .home-cols > .span5 {
        display: none;
    }

    .home-main .home-cols .RegionList_2_Serbia,
    .home-main .home-cols .RegionList_Serbia,
    .home-main .home-cols .RegionList,
    .home-main .home-cols .RegionList_Serbia > div,
    .home-main .home-cols .RegionList > div {
        position: static !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        margin: 0 !important;
        text-align: start !important;
    }

    .home-main .home-cols .RegionList_2_Serbia {
        display: block;
        margin: 12px 0 10px !important;
    }

    .home-main .home-cols .RegionList_2_Serbia *,
    .home-main .home-cols .RegionList_Serbia h3,
    .home-main .home-cols .RegionList h3 {
        float: none !important;
    }

    .home-main .home-cols .RegionList_Serbia,
    .home-main .home-cols .RegionList {
        clear: both;
    }

    .home-main .home-cols .RegionList_Serbia ul,
    .home-main .home-cols .RegionList ul {
        position: static !important;
        display: block !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        columns: 150px auto !important;
        column-gap: 16px;
    }

    .home-main .home-cols .RegionList_Serbia ul li:nth-child(n),
    .home-main .home-cols .RegionList ul li:nth-child(n) {
        position: static !important;
        display: block !important;
        float: none !important;
        clear: none !important;
        width: auto !important;
        margin: 0 !important;
        text-align: start !important;
        break-inside: avoid;
    }

    .home-main #linkRegions li h3 {
        line-height: 1.6 !important;
    }

    .home-main .MainPage_RightArea > .row > div[style] {
        float: none !important;
        position: static !important;
        clear: both;
    }

    .nav-header-tablet ~ .static-container:has(> .listing-page) {
        width: auto;
        padding-inline: 16px;
    }

    .nav-header-tablet ~ .static-container > .listing-page {
        display: flex;
        flex-direction: column;
        margin-left: 0;
    }

    .nav-header-tablet ~ .static-container > .listing-page::before,
    .nav-header-tablet ~ .static-container > .listing-page::after {
        display: none;
    }

    .nav-header-tablet ~ .static-container > .listing-page > [class*="span"] {
        width: auto;
        margin-left: 0;
        float: none;
    }

    .nav-header-tablet ~ .static-container > .listing-page .span9 .span9 {
        width: auto;
        float: none;
    }

    .nav-header-tablet ~ .static-container > .listing-page > .left-b {
        display: none !important;
    }

    .nav-header-tablet ~ .static-container > .listing-page .row-listing > .img-col {
        width: auto;
    }

    .nav-header-tablet ~ .static-container > .listing-page .row-listing > .span-col-title {
        float: none;
        width: auto;
        display: flow-root;
    }

    .nav-header-tablet ~ .static-container > .listing-page > .span2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
    }

    .nav-header-tablet ~ .static-container > .listing-page .category-tree h3 {
        overflow-wrap: anywhere;
    }

    .nav-header-tablet ~ .static-container > .listing-page > .span2 > .gallery,
    .nav-header-tablet ~ .static-container > .listing-page > .span2 > .gallery-block,
    .nav-header-tablet ~ .static-container > .listing-page > .span2 > .desktop-ad-listing-right-300x600 {
        display: none !important;
    }
}

@media (max-width: 500px) {
    .nav-header-mobile .layout > * > *:nth-child(1),
    .nav-header-mobile .layout > * > *:nth-child(2),
    .nav-header-mobile .layout > * > *:nth-child(3),
    .nav-header-mobile .layout > * > *:nth-child(4),
    .nav-header-mobile .layout > * > *:nth-child(5) {
        width: auto;
        text-align: center;
    }

    .nav-header-mobile .search-ads-btn,
    .nav-header-mobile .create-ads-btn,
    .nav-header-mobile .messages-btn,
    .nav-header-mobile .savedads-btn {
        display: block;
        margin: 0px auto;
    }
}

@media (max-width: 480px) {
}

@media (max-width: 319px) {
    .nav-header-mobile .sidemenu-btn,
    .nav-header-mobile .search-ads-btn,
    .nav-header-mobile .create-ads-btn,
    .nav-header-mobile .messages-btn,
    .nav-header-mobile .savedads-btn {
        width: 55px;
    }



        .nav-header-mobile .sidemenu-btn span,
        .nav-header-mobile .search-ads-btn span,
        .nav-header-mobile .create-ads-btn span,
        .nav-header-mobile .messages-btn span,
        .nav-header-mobile .savedads-btn span {
            font-size: 10px;
        }

        .nav-header-mobile .search-ads-btn i,
        .nav-header-mobile .create-ads-btn i,
        .nav-header-mobile .messages-btn i,
        .nav-header-mobile .savedads-btn i {
            top: calc(50% - 14px);
            left: calc(50% - 14px);
            font-size: 28px;
        }

    *[dir='rtl'] .nav-header-mobile .search-ads-btn i,
    *[dir='rtl'] .nav-header-mobile .create-ads-btn i,
    *[dir='rtl'] .nav-header-mobile .messages-btn i,
    *[dir='rtl'] .nav-header-mobile .savedads-btn i {
        right: calc(50% - 14px);
        left: auto;
    }

    .nav-header-mobile .sidemenu-btn span {
        left: 28px;
    }

    *[dir='rtl'] .nav-header-mobile .sidemenu-btn span {
        left: auto;
        right: 28px;
    }

    .nav-header-mobile .search-ads-btn span,
    .nav-header-mobile .create-ads-btn span,
    .nav-header-mobile .messages-btn span,
    .nav-header-mobile .savedads-btn span {
        left: 24px;
    }

    *[dir='rtl'] .nav-header-mobile .search-ads-btn span,
    *[dir='rtl'] .nav-header-mobile .create-ads-btn span,
    *[dir='rtl'] .nav-header-mobile .messages-btn span,
    *[dir='rtl'] .nav-header-mobile .savedads-btn span {
        left: auto;
        right: 24px;
    }

    .mobile-side-menu {
        width: 260px;
    }

        .mobile-side-menu .menu-header .site-logo {
            margin-left: 10px;
        }

    .user-avatar {
        width: 48px;
        height: 48px;
    }

    .mobile-side-menu .account {
        padding-left: 64px;
        min-height: 64px;
    }

    .mobile-side-menu .menu-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .mobile-side-menu .language-selector a {
        font-size: 12px;
    }
}
/* #endregion ================================= /Header ================================================ */
/* #region ===================================== Footer ================================================ */
footer.new-footer {
    display: block;
    width: 100%;
    background-color: var(--color-bg-main);
    border-top: 1px solid var(--color-border-muted);
    font-size: 0px;
    margin-top: -431px;
    padding-top: 0px;
}

    footer.new-footer.old-mobile-version {
        margin-top: 0px;
    }

    footer.new-footer .container {
        background-color: transparent !important;
    }

    footer.new-footer > div {
        margin-left: auto;
        margin-right: auto;
    }

footer .footer-secondary {
    display: block;
    width: 100%;
    background-color: var(--color-bg-panel);
    font-size: 0px;
}

    footer .footer-secondary .logo {
        display: inline-block;
        font-size: 12px;
        height: 80px;
        width: 200px;
        background-color: transparent;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
        filter: gray;
        -webkit-filter: grayscale(100%);
        opacity: 0.8;
        vertical-align: middle;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    footer .footer-secondary .address-block {
        display: inline-block;
        font-size: 12px;
        color: var(--color-text-muted);
        font-weight: 400;
        vertical-align: middle;
        margin-left: 40px;
    }

        footer .footer-secondary .address-block .ci-map-marker {
            position: absolute;
            top: calc(50% - 20px);
            left: 0px;
            z-index: 1;
            font-size: 40px;
            display: none;
        }

*[dir='rtl'] footer .footer-secondary .address-block {
    margin-right: 40px;
    margin-left: 0px;
}

footer .footer-secondary .address-block span {
    display: block;
    width: 100%;
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 1.3em;
    text-align: left;
}

*[dir='rtl'] footer .footer-secondary .address-block span {
    text-align: right;
}

footer .footer-secondary .address-block span:first-child {
    margin-bottom: 5px;
}

footer .footer-secondary .phone-block {
    display: inline-block;
    font-size: 12px;
    margin-left: 40px;
    position: relative;
    padding-left: 42px;
    vertical-align: middle;
    text-align: left;
}

*[dir='rtl'] footer .footer-secondary .phone-block {
    margin-left: 0px;
    margin-right: 40px;
    padding-left: 0px;
    padding-right: 42px;
    text-align: right;
}

footer .footer-secondary .phone-block bdi {
    display: block;
    width: 100%;
    line-height: 18px;
}

footer .footer-secondary .phone-block .ci-smartphone {
    position: absolute;
    top: calc(50% - 20px);
    left: 0px;
    z-index: 1;
    font-size: 40px;
}

*[dir='rtl'] footer .footer-secondary .phone-block .ci-smartphone {
    right: 0px;
    left: auto;
}

footer .footer-secondary .phone-block a {
    text-decoration: none;
    color: var(--color-text-muted);
    font-weight: 400;
}

footer .ecommerce-block {
    display: none;
}


    footer .ecommerce-block > a {
        display: block;
        height: 150px;
        width: 150px;
        margin: 0px auto;
    }

        footer .ecommerce-block > a > img {
            max-height: 100%;
            max-width: 100%;
        }

footer .footer-secondary .ecommerce-block {
    display: inline-block;
    vertical-align: middle;
    margin-left: 40px;
}


*[dir='rtl'] footer .footer-secondary .ecommerce-block {
    margin-left: 0px;
    margin-right: 40px;
}


footer .footer-secondary .ecommerce-block a {
    display: inline;
}

    footer .footer-secondary .ecommerce-block a img {
        width: 75px;
        height: 75px;
    }

footer.new-footer .left-side {
    display: inline-block;
    font-size: 14px;
    width: calc(100% - 280px);
    height: 330px;
    vertical-align: top;
    padding-top: 40px;
}

    footer.new-footer .left-side > div {
        display: inline-block;
        width: 32%;
        vertical-align: top;
    }

    footer.new-footer .left-side h6 {
        display: block;
        width: 100%;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-text-basic);
        text-transform: uppercase;
        margin-bottom: 10px;
        margin-top: 0px;
        padding: 0px;
        font-family: Manrope, Arial;
    }

    footer.new-footer .left-side > div > a {
        display: block;
        width: 100%;
        font-weight: 400 !important;
        text-decoration: none;
        padding-top: 2px;
        padding-bottom: 2px;
        color: var(--color-text-muted);
        line-height: 1.3em;
    }

footer.new-footer .right-side {
    display: inline-block;
    width: 280px;
    text-align: center;
    vertical-align: top;
    padding-top: 38px;
    font-size: 0px;
}


    footer.new-footer .right-side p {
        font-size: 12px;
        color: var(--color-text-muted);
        font-weight: 400;
        margin: 0px;
        padding: 0px;
        padding-bottom: 10px;
        line-height: 1.3em;
    }

    footer.new-footer .right-side .app-icon {
        display: inline-block;
        vertical-align: top;
        background-color: transparent;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-bottom: 20px;
    }

        footer.new-footer .right-side .app-icon.app-store {
            background-image: url('../../Content/Images/clipart-appstore-button.svg');
            width: 120px;
            height: 40px;
        }

        footer.new-footer .right-side .app-icon.google-play {
            background-image: url('../../Content/Images/clipart-googleplay-button.svg');
            width: 135px;
            height: 40px;
        }

footer.new-footer .social-icon {
    display: inline-block;
    border-radius: var(--radius-4);
    position: relative;
    width: 46px;
    height: 46px;
    background-color: #F2F2F2;
    text-decoration: none;
    margin-left: 3px;
    margin-right: 3px;
}

    footer.new-footer .social-icon > .ci-pazar-social {
        display: block;
        font-size: 24px;
        top: calc(50% - 12px);
        left: calc(50% - 12px);
        opacity: 0.6;
    }

*[dir='rtl'] footer.new-footer .social-icon > .ci-pazar-social {
    left: auto;
    right: calc(50% - 12px);
}

footer.new-footer .m-footer-menu-item {
    display: none;
    font-size: 0px;
}

footer.new-footer .website-switch-area {
    text-align: center;
    font-size: 14px;
    padding-bottom: 20px;
}


    footer.new-footer .website-switch-area strong {
        color: var(--color-text-muted);
        font-weight: 400 !important;
    }

    footer.new-footer .website-switch-area a {
        color: var(--color-text-primary);
        font-weight: 400 !important;
        text-decoration: underline;
    }


    footer.new-footer .website-switch-area.is-desktop {
        display: block;
    }

    footer.new-footer .website-switch-area.is-mobile {
        display: none;
    }

.mobile footer.new-footer .website-switch-area.is-desktop {
    display: none;
}

.mobile footer.new-footer .website-switch-area.is-mobile {
    display: block;
}

footer.new-footer.account-deletion {
    margin-top: -101px;
}

footer.new-footer .footer-parnters {
    background-color: var(--color-bg-panel);
    border-bottom: 1px solid var(--color-border-muted);
    border-top: 1px solid var(--color-border-muted);
    display: none;
    height: 180px;
    width: 100%;
}

    footer.new-footer .footer-parnters .our-partners {
        width: 100%;
        text-align: center;
        font-size: 14px;
        margin-top: 40px;
        display: none;
    }

    footer.new-footer .footer-parnters .our-rewards {
        width: 100%;
        text-align: center;
        font-size: 14px;
        margin-top: 30px;
        display: none;
    }

    footer.new-footer .footer-parnters h6 {
        display: block;
        width: 100%;
        font-size: 18px;
        font-weight: 700;
        color: var(--color-text-basic);
        text-transform: uppercase;
        margin-bottom: 10px;
        margin-top: 0px;
        padding: 0px;
        font-family: Manrope, Arial;
    }

    footer.new-footer .footer-parnters .etisalat {
        display: inline-block;
        width: 152px;
        height: 64px;
        background: url("../../Content/Images/Logo/Parnters/EtisalatHorizontalColor.svg") no-repeat center center transparent;
        background-size: contain;
    }

    footer.new-footer .footer-parnters .verified-seller {
        display: inline-block;
        width: 90px;
        height: 90px;
        background: url("../../Content/Images/verifikuvan800.svg") no-repeat center center transparent;
        background-size: contain;
    }

footer.new-footer .payment-methods {
    margin-top: 20px;
    font-size: 0px;
}

footer.new-footer .payment-item {
    display: inline-block;
    font-size: 14px;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-4);
    background-color: #f2f2f2;
    position: relative;
}

    footer.new-footer .payment-item + .payment-item {
        margin-inline-start: 6px;
    }

    footer.new-footer .payment-item i {
        position: absolute;
        z-index: 1;
    }

    footer.new-footer .payment-item.bank-transfer i {
        font-size: 30px;
        top: 7px;
        left: 8px;
    }

    footer.new-footer .payment-item.mhawala {
        display: none;
    }

        footer.new-footer .payment-item.mhawala i {
            width: 32px;
            height: 32px;
            top: 6px;
            left: 7px;
            background: url('../../Content/Images/Logo/Payment/mhawala-grayscale-small.svg') no-repeat center center transparent;
            background-size: contain;
        }

    footer.new-footer .payment-item.visa i {
        width: 32px;
        height: 32px;
        top: 7px;
        left: 7px;
        background: url('../../Content/Images/Logo/Payment/visa-grayscale.svg') no-repeat center center transparent;
        background-size: contain;
    }

    footer.new-footer .payment-item.mastercard i {
        width: 32px;
        height: 32px;
        top: 7px;
        left: 7px;
        background: url('../../Content/Images/Logo/Payment/mastercard-grayscale.svg') no-repeat center center transparent;
        background-size: contain;
    }

    footer.new-footer .payment-item.paypal i {
        width: 24px;
        height: 24px;
        top: 12px;
        left: 11px;
        background: url('../../Content/Images/Logo/Payment/paypal-grayscale.svg') no-repeat center center transparent;
        background-size: contain;
    }


/* #region Footer Customizing */
.site-Afghanistan .website-wrapper,
.site-Macedonia .website-wrapper {
    padding-bottom: 611px;
}

.mobile.site-Afghanistan .website-wrapper,
.mobile.site-Macedonia .website-wrapper {
    padding-bottom: 40px;
}

.site-Afghanistan footer.new-footer,
.site-Macedonia footer.new-footer {
    margin-top: -611px;
}

.mobile.site-Afghanistan footer.new-footer,
.mobile.site-Macedonia footer.new-footer {
    margin-top: 0px;
}

.site-Afghanistan footer.new-footer .footer-parnters,
.site-Macedonia footer.new-footer .footer-parnters {
    display: block;
}

    .site-Afghanistan footer.new-footer .footer-parnters .our-partners {
        display: block;
    }

    .site-Macedonia footer.new-footer .footer-parnters .our-rewards {
        display: block;
    }

.site-Afghanistan footer.new-footer .payment-item.mhawala {
    display: inline-block;
}
/* #endregion Footer Customizing */


@media (max-width: 1199px) {
    footer.new-footer .footer-parnters .content {
        width: 100%;
    }
}

@media (max-width: 991px) {
    footer.new-footer .left-side {
        width: 100%;
        display: block;
        padding-top: 30px;
        height: 310px;
    }

    footer.new-footer .right-side {
        width: 100%;
        display: block;
        padding-top: 0px;
        padding-bottom: 30px;
    }

        footer.new-footer .right-side .app-download-block {
            display: none;
        }

    footer .footer-secondary .logo {
        display: none;
    }

    footer .footer-secondary .address-block {
        margin-left: 0px;
        position: relative;
        padding-left: 42px;
    }

    *[dir='rtl'] footer .footer-secondary .address-block {
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 42px;
    }

    footer .footer-secondary {
        height: 90px;
        padding-top: 9px;
    }

    footer.new-footer {
        margin-top: -441px;
    }

    footer .footer-secondary .address-block .ci-map-marker {
        position: absolute;
        top: calc(50% - 20px);
        left: 0px;
        z-index: 1;
        font-size: 40px;
        display: block;
    }

    *[dir='rtl'] footer .footer-secondary .address-block .ci-map-marker {
        left: auto;
        right: 0px;
    }

    footer.new-footer.account-deletion {
        margin-top: -91px;
    }
}

@media (max-width: 767px) {
    footer .ecommerce-block {
        display: block;
        text-align: center;
        padding-bottom: 30px;
    }


    footer .footer-secondary .ecommerce-block {
        display: none;
    }

    footer .footer-secondary {
        height: auto;
        padding-top: 18px;
        padding-block-end: 64px;
    }

    .bottombar footer .footer-secondary {
        padding-bottom: 60px;
    }

    footer .footer-secondary .address-block {
        display: block;
        width: 100%;
        padding-left: 38px;
    }

    *[dir='rtl'] footer .footer-secondary .address-block {
        padding-left: 0px;
        padding-right: 38px;
    }

    footer .footer-secondary .phone-block {
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 18px;
        padding-bottom: 18px;
        margin-left: 0px;
        display: block;
        width: 100%;
        padding-left: 38px;
    }

    *[dir='rtl'] footer .footer-secondary .phone-block {
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 38px;
    }

    footer .footer-secondary .phone-block .ci-smartphone {
        left: -5px;
    }

    *[dir='rtl'] footer .footer-secondary .phone-block .ci-smartphone {
        left: auto;
        right: -8px;
    }

    footer .footer-secondary .address-block .ci-map-marker {
        left: -5px;
    }

    *[dir='rtl'] footer .footer-secondary .address-block .ci-map-marker {
        left: auto;
        right: -5px;
    }

    *[dir='rtl'] footer .footer-secondary .phone-block bdi {
        text-align: right;
    }

    footer.new-footer .left-side {
        display: none;
    }

    footer.new-footer .right-side {
        margin-top: 20px;
        padding-bottom: 25px;
    }

    footer.new-footer {
        margin-top: 0px;
        border-top: 0px none transparent;
    }

        footer.new-footer .m-footer-menu-item {
            display: block;
            font-size: 14px;
            text-align: center;
            width: 100%;
            border-top: 1px solid #F2F2F2;
        }

        footer.new-footer .m-footer-menu-item {
            border-bottom: 1px solid #F2F2F2;
            margin-top: -1px;
        }

        footer.new-footer .m-footer-menu-header {
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            padding-top: 21px;
            padding-bottom: 21px;
            cursor: pointer;
            background-color: #FFFFFF;
            transition: background-color 0.2s ease;
        }


            footer.new-footer .m-footer-menu-header:hover {
                background-color: #FAFAFA;
                transition: background-color 0.2s ease;
            }


        footer.new-footer .m-footer-menu-item .m-footer-menu-list {
            padding-top: 0px;
            padding-bottom: 0px;
            transform: scale(1, 0);
            transform-origin: top;
            height: 0px;
            transition: all 0s ease-in-out;
        }

        footer.new-footer .m-footer-menu-item.active .m-footer-menu-list {
            padding-top: 10px;
            padding-bottom: 25px;
            transform: scale(1, 1);
            height: auto;
            transition: all 0.2s ease-in-out;
        }

        footer.new-footer .m-footer-menu-list a {
            display: block;
            width: 100%;
            font-size: 14px;
            color: var(--color-text-muted);
            font-weight: 400 !important;
            text-decoration: none;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        footer.new-footer.old-mobile-version .footer-secondary .address-block {
            padding-left: 48px;
        }

    *[dir='rtl'] footer.new-footer.old-mobile-version .footer-secondary .address-block {
        padding-left: 0px;
        padding-right: 48px;
    }

    footer.new-footer.old-mobile-version .footer-secondary .phone-block {
        padding-left: 48px;
    }

    *[dir='rtl'] footer.new-footer.old-mobile-version .footer-secondary .phone-block {
        padding-left: 0px;
        padding-right: 48px;
    }

    footer.new-footer.old-mobile-version .footer-secondary .address-block .ci-map-marker {
        left: 4px;
    }

    *[dir='rtl'] footer.new-footer.old-mobile-version .footer-secondary .address-block .ci-map-marker {
        left: auto;
        right: 4px;
    }

    footer.new-footer.old-mobile-version .footer-secondary .phone-block .ci-smartphone {
        left: 4px;
    }

    *[dir='rtl'] footer.new-footer.old-mobile-version .footer-secondary .phone-block .ci-smartphone {
        left: auto;
        right: 4px;
    }

    footer.new-footer .footer-parnters {
        height: auto;
        padding-bottom: 35px;
    }
}
/* #endregion ================================= /Footer ================================================ */
/* #region ================================== Start page =============================================== */
.startpage-slogan {
    color: var(--color-text-basic);
    font-weight: 400;
}

    .startpage-slogan p {
        text-transform: none;
        font-size: 12px;
    }

.MainPage_ContentField_Serbia .MainPage_LeftArea {
    width: 350px;
}

.site-Serbia body .MainPage_RightArea {
    margin-top: 15px !important;
}

.site-Serbia .RegionList_2_Serbia {
    top: -8px;
    width: 150px !important;
    margin-left: 60px !important;
    inset-inline-start: 10px !important;
}

.site-Serbia .RegionList_Serbia {
    margin-left: 150px !important;
}
/* #endregion ============================== /Start page =============================================== */
/* #region ======================================== Loaders ============================================ */
.pazar-loader.element-loader {
    width: 100%;
    height: 100%;
    position: relative;
}

    .pazar-loader.element-loader.active .loading-element {
        opacity: 0.05;
        pointer-events: none;
    }

.pazar-loader.partial-loader {
    width: 100%;
    height: 100%;
    position: relative;
    display: none;
}

    .pazar-loader.partial-loader.active {
        display: block;
    }

    .pazar-loader.element-loader.active .loader,
    .pazar-loader.partial-loader .loader {
        position: absolute;
        display: block;
        top: calc(50% - 4px);
        left: calc(50% - 4px);
        border-radius: 50%;
        background-color: rgba(99, 107, 114, 1);
        width: 8px;
        height: 8px;
        animation: pazar-element-loader 1s ease infinite;
        -webkit-animation: pazar-element-loader 1s ease infinite;
    }

*[dir='rtl'] .pazar-loader.element-loader.active .loader,
*[dir='rtl'] .pazar-loader.partial-loader .loader {
    left: auto;
    right: calc(50% - 4px);
}

.pazar-loader.element-loader.active .loader:before,
.pazar-loader.partial-loader .loader:before {
    content: '';
    display: block;
    border-radius: 50%;
    background-color: rgba(99, 107, 114, 0.3);
    margin-left: -15px;
    width: 8px;
    height: 8px;
    position: absolute;
    animation: pazar-element-loader-before 1s ease infinite;
    -webkit-animation: pazar-element-loader-before 1s ease infinite;
}

*[dir='rtl'] .pazar-loader.element-loader.active .loader:before,
*[dir='rtl'] .pazar-loader.partial-loader .loader:before {
    margin-left: 0px;
    margin-right: -15px;
}

.pazar-loader.element-loader.active .loader:after,
.pazar-loader.partial-loader .loader:after {
    content: '';
    display: block;
    border-radius: 50%;
    background-color: rgba(99, 107, 114, 0.3);
    margin-left: 15px;
    width: 8px;
    height: 8px;
    position: absolute;
    animation: pazar-element-loader-after 1s ease infinite;
    -webkit-animation: pazar-element-loader-after 1s ease infinite;
}

*[dir='rtl'] .pazar-loader.element-loader.active .loader:after,
*[dir='rtl'] .pazar-loader.partial-loader .loader:after {
    margin-left: 0px;
    margin-right: 15px;
}

.pazar-element-loader-w {
    width: auto !important;
    height: auto !important;
}

@keyframes pazar-element-loader-before {
    0% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    25% {
        background-color: rgba(99, 107, 114, 1);
    }

    50% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    75% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    100% {
        background-color: rgba(99, 107, 114, 0.3);
    }
}

@-webkit-keyframes pazar-element-loader-before {
    0% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    25% {
        background-color: rgba(99, 107, 114, 1);
    }

    50% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    75% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    100% {
        background-color: rgba(99, 107, 114, 0.3);
    }
}

@keyframes pazar-element-loader {
    0% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    25% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    50% {
        background-color: rgba(99, 107, 114, 1);
    }

    75% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    100% {
        background-color: rgba(99, 107, 114, 0.3);
    }
}

@-webkit-keyframes pazar-element-loader {
    0% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    25% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    50% {
        background-color: rgba(99, 107, 114, 1);
    }

    75% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    100% {
        background-color: rgba(99, 107, 114, 0.3);
    }
}

@keyframes pazar-element-loader-after {
    0% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    25% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    50% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    75% {
        background-color: rgba(99, 107, 114, 1);
    }

    100% {
        background-color: rgba(99, 107, 114, 0.3);
    }
}

@-webkit-keyframes pazar-element-loader-after {
    0% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    25% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    50% {
        background-color: rgba(99, 107, 114, 0.3);
    }

    75% {
        background-color: rgba(99, 107, 114, 1);
    }

    100% {
        background-color: rgba(99, 107, 114, 0.3);
    }
}

/* #endregion ==================================== /Loaders ============================================ */
/* #region ========================================== Chat ============================================= */
.chat-modal {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(33, 37, 41, 0.3);
    backdrop-filter: blur(7px);
}

    .chat-modal.active {
        display: block;
    }

    .chat-modal .inner {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .chat-modal .chat-window {
        display: block;
        position: absolute;
        background-color: #FFFFFF;
        top: calc(50% - 575px);
        left: calc(50% - 1000px);
        height: 1150px;
        width: 2000px;
        border-radius: var(--radius-12);
        box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 100px;
    }

    /* #region ---------------------- Chat Header ----------------------------- */
    .chat-modal .chat-header {
        display: block;
        border-bottom: 1px solid #DDDDDD;
        background-color: #FFFFFF;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        height: 55px;
    }

        .chat-modal .chat-header .btn-close {
            position: absolute;
            top: 0px;
            right: 0px;
            height: 55px;
            border-radius: var(--radius-0);
            border: 0px none transparent;
            width: 55px;
            background-color: transparent;
            cursor: pointer;
        }

*[dir='rtl'] .chat-modal .chat-header .btn-close {
    left: 0px;
    right: auto;
}

.chat-modal .chat-header .btn-close .ci-pazar {
    font-size: 28px;
}

.chat-modal .chat-header .chat-header-caption {
    width: 100%;
    text-align: center;
    font-weight: 500;
    color: var(--color-text-muted);
    font-size: 18px;
    padding-top: 16px;
}

.chat-status-popup {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

*[dir='rtl'] .chat-status-popup {
    right: 0px;
    left: auto;
}

.chat-status-popup .custom-popup-btn {
    position: relative;
    height: 55px;
    border: 0px none transparent;
    background: transparent;
    cursor: pointer;
    padding: 0px;
}

    .chat-status-popup .custom-popup-btn .ci-pazar-small {
        position: absolute;
        font-size: 14px;
        top: calc(50% - 7px);
        right: 5px;
    }

*[dir='rtl'] .chat-status-popup .custom-popup-btn .ci-pazar-small {
    left: 5px;
    right: auto;
}

.chat-status-popup .custom-popup-btn .custom-popup-btn-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    padding-right: 28px;
    padding-left: 58px;
}

*[dir='rtl'] .chat-status-popup .custom-popup-btn .custom-popup-btn-value {
    padding-right: 58px;
    padding-left: 28px;
}

.chat-status-popup .custom-popup-btn .status-block {
    position: absolute;
    top: calc(50% - 16px);
    left: 12px;
    z-index: 1;
}

*[dir='rtl'] .chat-status-popup .custom-popup-btn .status-block {
    right: 12px;
    left: auto;
}

.chat-status-popup .custom-popup-btn .user-avatar {
    width: 32px;
    height: 32px;
}

    .chat-status-popup .custom-popup-btn .user-avatar i {
        font-size: 20px;
    }

.chat-status-popup .custom-popup-btn .user-status {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    display: block;
    z-index: 3;
    bottom: 3px;
    right: -5px;
}

*[dir='rtl'] .chat-status-popup .custom-popup-btn .user-status {
    left: -5px;
    right: auto;
}

.custom-popup.chat-status-popup .custom-popup-panel {
    width: 250px;
}

.custom-popup.chat-status-popup .custom-popup-overlay {
    left: 6px;
}

*[dir='rtl'] .custom-popup.chat-status-popup .custom-popup-overlay {
    left: auto;
    right: 6px;
}

.custom-popup.chat-status-popup .custom-popup-option a small {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 6px);
    left: 15px;
}

*[dir='rtl'] .custom-popup.chat-status-popup .custom-popup-option a small {
    left: auto;
    right: 15px;
}

.custom-popup.chat-status-popup .custom-popup-option .custom-popup-option-value {
    padding-left: 30px;
    padding-right: 30px;
}

.custom-popup.chat-status-popup .custom-popup-panel li.active a .ci-check {
    right: 13px;
}

.custom-popup.chat-status-popup .custom-popup-panel li a {
    padding-top: 12px;
    padding-bottom: 12px;
}

*[dir='rtl'] .custom-popup.chat-status-popup .custom-popup-panel li.active a .ci-check {
    right: auto;
    left: 13px;
}

.custom-popup.chat-status-popup .switch-option {
    padding: 10px 12px 10px 14px;
}

*[dir='rtl'] .custom-popup.chat-status-popup .switch-option {
    padding: 10px 14px 10px 12px;
}

    .custom-popup.chat-status-popup .switch-option span,
    *[dir='rtl'] .custom-popup.chat-status-popup .switch-option span {
        padding: 0px;
    }

.user-status.status-online,
.custom-popup.status-online .status-block .user-status,
.custom-popup.chat-status-popup .custom-popup-option a.online small {
    background-color: var(--color-bg-success);
}

.user-status.status-offline,
.custom-popup.status-offline .status-block .user-status,
.custom-popup.chat-status-popup .custom-popup-option a.offline small {
    background-color: var(--color-neutral-600);
}

.user-status.status-busy,
.custom-popup.status-busy .status-block .user-status,
.custom-popup.chat-status-popup .custom-popup-option a.busy small {
    background-color: #F6AD3F;
}

.chat-modal .m-chat-header-block-contacts {
    display: none;
}

.chat-modal .m-chat-header-block-info {
    display: none;
}


.chat-modal .m-chat-header-block-contacts,
.chat-modal .m-chat-header-block-info {
    width: 100%;
    text-align: center;
    font-weight: 500;
    color: var(--color-text-muted);
    font-size: 18px;
    padding-top: 16px;
    display: none;
}

.chat-modal .btn-back-to-conversation,
.chat-modal .btn-back-to-contacts {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 55px;
    height: 55px;
    font-size: 18px;
    border: 0px none transparent;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    display: none;
    line-height: 14px;
}

*[dir='rtl'] .chat-modal .btn-back-to-conversation,
*[dir='rtl'] .chat-modal .btn-back-to-contacts {
    left: auto;
    right: 0px;
    transform: rotate(180deg);
}

.chat-modal .m-chat-header-block-conversation {
    display: none;
    margin-left: 60px;
}

*[dir='rtl'] .chat-modal .m-chat-header-block-conversation {
    margin-left: 0px;
    margin-right: 60px;
}

.chat-modal .m-chat-header-block-conversation .ad-caption {
    display: block;
    width: calc(100% - 60px);
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-top: 9px;
    line-height: 17px;
}

    .chat-modal .m-chat-header-block-conversation .ad-caption.ad-caption-single {
        font-size: 20px;
        padding-top: 16px;
        line-height: 22px;
    }

.chat-modal .m-chat-header-block-conversation .ad-price {
    display: block;
    width: calc(100% - 60px);
    font-weight: 400;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    padding-top: 4px;
    line-height: 14px;
}

    .chat-modal .m-chat-header-block-conversation .ad-price bdi {
        color: var(--color-text-muted);
        vertical-align: middle;
    }

        .chat-modal .m-chat-header-block-conversation .ad-price bdi span + span {
            padding-left: 5px;
        }


    .chat-modal .m-chat-header-block-conversation .ad-price .ci-arrow-left {
        transform: rotate(-45deg);
        vertical-align: middle;
        margin-left: 5px;
        margin-right: 5px;
    }

*[dir='rtl'] .chat-modal .m-chat-header-block-conversation .ad-price .ci-arrow-left {
    transform: rotate(225deg);
}

.chat-modal .m-chat-header-block-conversation .ad-price a {
    display: none;
}

.chat-modal.dialog-with-seller .m-chat-header-block-conversation .ad-price a {
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}

.chat-modal.dialog-with-seller.item-sold .m-chat-header-block-conversation .ad-price a {
    display: none;
}

*[dir='rtl'] .chat-modal.dialog-with-seller .m-chat-header-block-conversation .ad-price a {
    margin-left: 0px;
    margin-right: 5px;
}

/* #endregion ------------------ /Chat Header ----------------------------- */
/* #region -------------------- Chat Container ---------------------------- */
.chat-modal .chat-content-layout {
    display: block;
    width: 100%;
    height: calc(100% - 55px);
}

    .chat-modal .chat-content-layout > * {
        display: flex;
        height: 100%;
    }

        .chat-modal .chat-content-layout > * > * {
            height: 100%;
            vertical-align: top;
            position: relative;
        }

.chat-modal .chat-conversations-area {
    border-bottom-left-radius: 10px;
    width: 350px;
    background-color: #FFFFFF;
    flex-shrink: 0;
}

*[dir='rtl'] .chat-modal .chat-conversations-area {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 10px;
}

.chat-modal .chat-conversations-area > .inner,
.chat-modal .chat-dialog-area > .inner,
.chat-modal .chat-userinfo-area > .inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.chat-modal .chat-dialog-area {
    flex-shrink: 1;
    width: 100%;
    border-left: 1px solid #DDDDDD;
    background-color: #FFFFFF;
    border-right: 1px solid #DDDDDD;
}

.chat-modal .chat-userinfo-area {
    flex-shrink: 0;
    border-bottom-right-radius: 10px;
    width: 350px;
    background-color: #FFFFFF;
    transition: width 0.25s ease;
}

*[dir='rtl'] .chat-modal .chat-userinfo-area {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 10px;
}


.chat-modal.no-active-dialogs .chat-userinfo-area {
    display: none;
}

.chat-modal.no-active-dialogs .chat-dialog-area {
    background-color: #F9F9F9;
    border-bottom-right-radius: 10px;
    border-right: 0px none transparent;
}

*[dir='rtl'] .chat-modal.no-active-dialogs .chat-dialog-area {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 10px;
    border-right: 1px solid #DDDDDD;
    border-left: 0px none transparent;
}

/* #endregion ---------------- /Chat Container ---------------------------- */
/* #region --------------- Chat Conversations Area ------------------------ */

.chat-modal .chat-conversations-area .search-block {
    border-bottom: 1px solid #DDDDDD;
    padding: 19px 20px 19px 20px;
}

    .chat-modal .chat-conversations-area .search-block .ci-search {
        z-index: 0;
        cursor: pointer;
    }

.chat-modal .chat-conversations-area .conversations-selector .custom-popup-btn {
    text-align: left;
    padding: 20px 20px 20px 20px;
    position: relative;
    border-radius: var(--radius-0);
    border: 0px none transparent;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    background-color: #FFFFFF;
}

*[dir='rtl'] .chat-modal .chat-conversations-area .conversations-selector .custom-popup-btn {
    text-align: right;
}

.chat-modal .chat-conversations-area .conversations-selector .custom-popup-btn .ci-pazar-small {
    position: absolute;
    top: calc(50% - 7px);
    right: 18px;
    font-size: 14px;
}

*[dir='rtl'] .chat-modal .chat-conversations-area .conversations-selector .custom-popup-btn .ci-pazar-small {
    right: auto;
    left: 18px;
}

.chat-modal .chat-conversations-area .conversations-selector .custom-popup-btn-value {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 700;
    display: block;
    padding-right: 15px;
}

*[dir='rtl'] .chat-modal .chat-conversations-area .conversations-selector .custom-popup-btn-value {
    padding-left: 15px;
    padding-right: 0px;
}

.chat-modal .chat-conversations-area .conversations-selector .custom-popup-panel {
    width: 320px;
}

.chat-modal .chat-conversations-area .conversations-selector .custom-popup-overlay {
    left: 15px;
    top: 45px;
}

*[dir='rtl'] .chat-modal .chat-conversations-area .conversations-selector .custom-popup-overlay {
    left: auto;
    right: 15px;
    top: 45px;
}

.chat-modal .conversations-selector .custom-popup-panel li a {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 15px;
    padding-right: 15px;
}

.chat-modal .conversations-selector li.active a .ci-check {
    right: 15px;
}

*[dir='rtl'] .chat-modal .conversations-selector li.active a .ci-check {
    right: auto;
    left: 15px;
}

.chat-modal .conversations-selector .custom-popup-panel .custom-popup-option-value {
    display: block;
    padding-right: 30px;
}

*[dir='rtl'] .chat-modal .conversations-selector .custom-popup-panel .custom-popup-option-value {
    padding-left: 30px;
    padding-right: 0px;
}

.chat-modal .conversations-list {
    overflow-y: auto;
    height: calc(100% - 141px);
    border-bottom-left-radius: 10px;
}

    .chat-modal .conversations-list .conversation-item {
        display: block;
        width: 100%;
        position: relative;
        text-decoration: none;
        color: var(--color-text-basic);
        font-weight: 400;
        padding: 20px 20px 20px 20px;
    }

        .chat-modal .conversations-list .conversation-item.active {
            background-color: #F2F2F2;
        }

        .chat-modal .conversations-list .conversation-item .ad-image-container {
            background-color: #EBEBEB;
            display: block;
            width: 54px;
            height: 54px;
            border-radius: var(--radius-4);
            position: absolute;
            top: 20px;
            left: 20px;
        }

*[dir='rtl'] .chat-modal .conversations-list .conversation-item .ad-image-container {
    right: 20px;
    left: auto;
}

.chat-modal .conversations-list .conversation-item .ad-image-container .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.chat-modal .conversations-list .conversation-item .ad-image-container .ci-image {
    font-size: 32px;
    position: absolute;
    z-index: 0;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
}

*[dir='rtl'] .chat-modal .conversations-list .conversation-item .ad-image-container .ci-image {
    right: calc(50% - 16px);
    left: auto;
}

.chat-modal .conversations-list .conversation-item .ad-image-container .ad-image {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    border-radius: var(--radius-4);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
}

.chat-modal .conversations-list .conversation-item .ad-caption {
    font-size: 14px;
    color: var(--color-text-basic);
    font-weight: 700;
    padding-left: 62px;
    padding-right: 58px;
    line-height: 1.3em;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

*[dir='rtl'] .chat-modal .conversations-list .conversation-item .ad-caption {
    padding-right: 62px;
    padding-left: 58px;
}

.chat-modal .conversations-list .conversation-item .ad-contact {
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: 700;
    padding-left: 78px;
    padding-right: 58px;
    position: relative;
    line-height: 1.3em;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

*[dir='rtl'] .chat-modal .conversations-list .conversation-item .ad-contact {
    padding-right: 78px;
    padding-left: 58px;
}

.chat-modal .conversations-list .conversation-item .ad-contact .user-status {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    left: 62px;
    top: calc(50% - 5px);
}

*[dir='rtl'] .chat-modal .conversations-list .conversation-item .ad-contact .user-status {
    right: 62px;
    left: auto;
}

.chat-modal .conversations-list .conversation-item .ad-contact .user-name {
    line-height: 1.4em;
}

.chat-modal .conversations-list .conversation-item .message-part {
    padding-left: 62px;
    padding-right: 58px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.3em;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

*[dir='rtl'] .chat-modal .conversations-list .conversation-item .message-part {
    padding-right: 62px;
    padding-left: 58px;
}

.chat-modal .conversations-list .conversation-item .date {
    position: absolute;
    right: 18px;
    top: 20px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 400;
}

*[dir='rtl'] .chat-modal .conversations-list .conversation-item .date {
    right: auto;
    left: 18px;
}

.chat-modal .conversations-list .conversation-item .badge {
    font-size: 12px;
    color: var(--color-text-danger);
    font-weight: 700;
    display: inline-block;
    vertical-align: top;
    border-radius: 40px;
    background-color: #FBCFCF;
    padding: 10px 8px 10px 8px;
    line-height: 0px;
    position: absolute;
    top: 53px;
    right: 18px;
}

*[dir='rtl'] .chat-modal .conversations-list .conversation-item .badge {
    left: 18px;
    right: auto;
}

.chat-modal .conversations-list .conversation-item .badge:empty {
    display: none;
}

.chat-modal .conversations-list .empty-block {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
}

    .chat-modal .conversations-list .empty-block .empty-icon {
        position: absolute;
        top: calc(50% - 110px);
        width: 100%;
    }

    .chat-modal .conversations-list .empty-block .ci-pazar {
        font-size: 130px;
        opacity: 0.3;
    }

    .chat-modal .conversations-list .empty-block p {
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--color-text-muted);
        padding: 0px 15px 0px 15px;
    }

/* #endregion ----------- /Chat Conversations Area ------------------------ */
/* #region ------------------ Chat Dialog Area ---------------------------- */

.chat-modal .chat-dialog-area .empty-block {
    display: none;
}

.chat-modal.no-active-dialogs .chat-dialog-area .empty-block {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.chat-modal .chat-dialog-area .empty-block h3 {
    display: block;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-size: 36px;
    font-weight: 700;
    margin-top: 70px;
}

.chat-modal .chat-dialog-area .empty-block h5 {
    color: var(--color-text-muted);
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    margin-top: 10px;
}

.chat-modal .chat-dialog-area .empty-block .icon-block {
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
    margin-top: 30px;
}

    .chat-modal .chat-dialog-area .empty-block .icon-block .ci-messages {
        font-size: 120px;
    }

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .icon-block .ci-messages {
    transform: rotateY(180deg);
}

.chat-modal .chat-dialog-area .empty-block .icon-block .ci-arrow-corner {
    opacity: 0.5;
    font-size: 84px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .icon-block .ci-arrow-corner {
    transform: rotateY(180deg);
}

.chat-modal .chat-dialog-area .empty-block .recent-ads {
    display: block;
    width: 100%;
    position: relative;
    margin-top: 100px;
    margin-bottom: 40px;
}

    .chat-modal .chat-dialog-area .empty-block .recent-ads h6 {
        display: block;
        width: 100%;
        text-align: center;
        color: var(--color-text-muted);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 14px;
    }

.chat-modal .chat-dialog-area .empty-block .recent-ads-container {
    display: block;
    width: 1130px;
    margin: 40px auto 0px auto;
    font-size: 0px;
    vertical-align: top;
}

    .chat-modal .chat-dialog-area .empty-block .recent-ads-container .left-side {
        font-size: 14px;
        display: inline-block;
        width: 50%;
        padding-right: 10px;
        vertical-align: top;
    }

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .left-side {
    padding-left: 10px;
    padding-right: 0px;
}

.chat-modal .chat-dialog-area .empty-block .recent-ads-container .right-side {
    font-size: 14px;
    display: inline-block;
    width: 50%;
    padding-left: 10px;
    vertical-align: top;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .right-side {
    padding-left: 0px;
    padding-right: 10px;
}

.chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card {
    display: block;
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #FFFFFF;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 110px;
    margin-bottom: 10px;
}

    .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-image-container {
        display: block;
        width: 90px;
        height: 90px;
        border-radius: var(--radius-4);
        background-color: #EBEBEB;
        overflow: hidden;
        position: absolute;
        top: 10px;
        left: 10px;
    }

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-image-container {
    right: 10px;
    left: auto;
}

.chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-image-container .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-image-container .ci-image {
    position: absolute;
    font-size: 42px;
    top: calc(50% - 21px);
    left: calc(50% - 21px);
}

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-image-container .ci-image {
    right: calc(50% - 21px);
    left: auto;
}

.chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-image-container .cargo-icon {
    position: absolute;
    display: block;
    width: 37px;
    height: 37px;
    background-color: #FFFFFF;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 10px;
    right: 5px;
    bottom: 5px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-image-container .cargo-icon {
    left: 5px;
    right: auto;
}

.chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-image-container .ci-delivery-truck {
    font-size: 24px;
    display: inline-block;
    margin-top: 6px;
    left: 6px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-image-container .ci-delivery-truck {
    right: 6px;
    left: auto;
}

.chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-image-container .ad-image {
    display: block;
    position: absolute;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-image-container .ad-image {
    left: auto;
    right: 0px;
}

.chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .chat-button {
    position: absolute;
    font-size: 48px;
    right: 20px;
    top: calc(50% - 22px);
}

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .chat-button {
    left: 20px;
    right: auto;
    transform: rotateY(180deg);
}

.chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .breadcrumbs {
    display: block;
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 400;
    padding-left: 110px;
    padding-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 90px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .breadcrumbs {
    padding-left: 90px;
    padding-right: 110px;
}

.chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 400;
    vertical-align: middle;
}

    .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .breadcrumbs a:first-child {
        margin-right: 8px;
    }

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .breadcrumbs a:first-child {
    margin-right: 0px;
    margin-left: 8px;
}

.chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .breadcrumbs a:last-child {
    margin-left: 8px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .breadcrumbs a:last-child {
    margin-left: 0px;
    margin-right: 8px;
}

.chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-details {
    padding-left: 110px;
    display: block;
    text-decoration: none;
    padding-right: 90px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-details {
    padding-left: 90px;
    padding-right: 110px;
}

.chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-caption {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-basic);
    text-decoration: none;
    padding-top: 15px;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-price {
    color: var(--color-text-muted);
    font-weight: 700;
    margin-top: 8px;
    font-size: 14px;
}

    .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-price span {
        vertical-align: middle;
    }

        .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-price span + span {
            padding-left: 5px;
        }


    .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-price i {
        vertical-align: middle;
        font-size: 18px;
        transform: rotate(-45deg);
        margin-left: 5px;
    }

*[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-price i {
    margin-right: 5px;
    margin-left: 0px;
    transform: rotate(225deg);
}

/* #endregion -------------- /Chat Dialog Area ---------------------------- */
/* #region ----------------- Chat Userinfo Area --------------------------- */
.chat-userinfo-area .userinfo-area-collapser {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #DDDDDD;
    background-color: #FFFFFF;
    position: absolute;
    top: 23px;
    left: -18px;
    cursor: pointer;
    z-index: 1;
}

*[dir='rtl'] .chat-userinfo-area .userinfo-area-collapser {
    left: auto;
    right: -18px;
}

.chat-userinfo-area .userinfo-area-collapser .ci-pazar-small {
    font-size: 16px;
}

*[dir='rtl'] .chat-userinfo-area .userinfo-area-collapser .ci-pazar-small {
    transform: rotateY(180deg);
}


.chat-userinfo-area .userinfo-area-collapser.active .ci-pazar-small {
    transform: rotateY(180deg);
}

*[dir='rtl'] .chat-userinfo-area .userinfo-area-collapser.active .ci-pazar-small {
    transform: rotateY(0deg);
}


.chat-modal.info-collapsed .chat-userinfo-area {
    width: 28px;
    transition: width 0.25s ease;
}

.chat-modal .chat-userinfo-area .inner {
    display: block;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.chat-modal.info-collapsed .chat-userinfo-area .inner {
    display: none;
}

.chat-modal .chat-userinfo-area .main-user-info-block {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 60px;
    padding-left: 18px;
    padding-right: 18px;
}

    .chat-modal .chat-userinfo-area .main-user-info-block h5 {
        font-size: 24px;
        color: var(--color-text-basic);
        font-weight: 700;
        margin-top: 10px;
        word-break: break-word;
        line-height: 24px;
        margin-bottom: 5px;
    }

    .chat-modal .chat-userinfo-area .main-user-info-block p {
        font-size: 14px;
        color: var(--color-text-muted);
        font-weight: 400;
        margin-top: 0px;
    }

.chat-modal .chat-userinfo-area .user-contacts-block,
.chat-modal .chat-userinfo-area .user-ads-block {
    padding-left: 18px;
    padding-right: 18px;
    position: relative;
}

.chat-modal .chat-userinfo-area .collapser-btn {
    position: relative;
    border: 0px none transparent;
    background-color: transparent;
    outline: none;
    padding: 0px;
    border-top: 1px solid #DDDDDD;
    display: block;
    box-shadow: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

*[dir='rtl'] .chat-modal .chat-userinfo-area .collapser-btn {
    text-align: right;
}


.chat-modal .chat-userinfo-area .collapser-content {
    margin-top: 20px;
    margin-bottom: 30px;
}

.chat-modal .chat-userinfo-area .collapser-btn .btn-caption {
    background-color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    top: -8px;
    left: 0px;
    color: var(--color-text-muted);
    padding-right: 10px;
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 50px);
}

*[dir='rtl'] .chat-modal .chat-userinfo-area .collapser-btn .btn-caption {
    left: auto;
    right: 0px;
    padding-right: 0px;
    padding-left: 10px;
}

.chat-modal .chat-userinfo-area .collapser-btn .btn-icon {
    background-color: #FFFFFF;
    font-size: 14px;
    position: absolute;
    top: -8px;
    right: -7px;
    padding-left: 10px;
}

*[dir='rtl'] .chat-modal .chat-userinfo-area .collapser-btn .btn-icon {
    right: auto;
    left: -7px;
    padding-left: 0px;
    padding-right: 10px;
}

.chat-modal .chat-userinfo-area .collapser.collapsed .btn-icon .ci-pazar-small {
    transform: rotate(180deg);
}


.chat-modal .chat-userinfo-area .user-contacts-block .item {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 60px;
}

*[dir='rtl'] .chat-modal .chat-userinfo-area .user-contacts-block .item {
    padding-right: 60px;
    padding-left: 0px;
}


.chat-modal .chat-userinfo-area .user-contacts-block .item .item-icon {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: calc(50% - 25px);
    left: 0px;
    background-color: #F2F2F2;
    font-size: 30px;
}

*[dir='rtl'] .chat-modal .chat-userinfo-area .user-contacts-block .item .item-icon {
    left: auto;
    right: 0px;
}

.chat-modal .chat-userinfo-area .user-contacts-block .item .item-icon * {
    margin-top: 10px;
    margin-left: 10px;
}

*[dir='rtl'] .chat-modal .chat-userinfo-area .user-contacts-block .item .item-icon * {
    margin-right: 10px;
    margin-left: 0px;
}

.chat-modal .chat-userinfo-area .user-contacts-block .item p {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.chat-modal .chat-userinfo-area .user-contacts-block .item bdi {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-basic);
    word-break: break-word;
}

.chat-modal .chat-userinfo-area .user-ads-block .collapser-content {
    position: relative;
    font-size: 0px;
}

    .chat-modal .chat-userinfo-area .user-ads-block .collapser-content .item {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: calc(50% - 8px);
        font-weight: 400;
        text-decoration: none;
        color: var(--color-text-basic);
        vertical-align: top;
        margin-top: 12px;
        margin-bottom: 5px;
    }

        .chat-modal .chat-userinfo-area .user-ads-block .collapser-content .item:nth-child(2n) {
            margin-left: 8px;
        }

*[dir='rtl'] .chat-modal .chat-userinfo-area .user-ads-block .collapser-content .item:nth-child(2n) {
    margin-left: 0px;
    margin-right: 8px;
}

.chat-modal .chat-userinfo-area .user-ads-block .collapser-content .item:nth-child(2n+1) {
    margin-right: 8px;
}

*[dir='rtl'] .chat-modal .chat-userinfo-area .user-ads-block .collapser-content .item:nth-child(2n+1) {
    margin-right: 0px;
    margin-left: 8px;
}

.chat-modal .chat-userinfo-area .user-ads-block .collapser-content .item .image-area {
    display: block;
    width: 100%;
    height: 100px;
    position: relative;
    background-color: #EBEBEB;
    border-radius: var(--radius-4);
    font-size: 42px;
    overflow: hidden;
}

.chat-modal .chat-userinfo-area .user-ads-block .item .image-area .ci-image {
    position: absolute;
    top: calc(50% - 21px);
    left: calc(50% - 21px);
}

*[dir='rtl'] .chat-modal .chat-userinfo-area .user-ads-block .item .image-area .ci-image {
    right: calc(50% - 21px);
    left: auto;
}

.chat-modal .chat-userinfo-area .user-ads-block .item .image-area .image {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
}

*[dir='rtl'] .chat-modal .chat-userinfo-area .user-ads-block .item .image-area .image {
    right: 0px;
    left: auto;
}

.chat-modal .chat-userinfo-area .user-ads-block .item .cargo-icon {
    position: absolute;
    right: 6px;
    bottom: 6px;
    font-size: 24px;
    background-color: #FFFFFF;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 7px;
    padding: 5px;
}

*[dir='rtl'] .chat-modal .chat-userinfo-area .user-ads-block .item .cargo-icon {
    right: auto;
    left: 6px;
}

.chat-modal .chat-userinfo-area .user-ads-block .item h6 {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-basic);
    margin-top: 8px;
    margin-bottom: 4px;
}

.chat-modal .chat-userinfo-area .user-ads-block .item .price {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-muted);
}

    .chat-modal .chat-userinfo-area .user-ads-block .item .price bdi {
        vertical-align: middle;
    }

        .chat-modal .chat-userinfo-area .user-ads-block .item .price bdi span:last-child {
            padding-left: 5px;
        }

    .chat-modal .chat-userinfo-area .user-ads-block .item .price i {
        transform: rotateZ(-45deg);
        margin-left: 5px;
        font-size: 16px;
    }

*[dir='rtl'] .chat-modal .chat-userinfo-area .user-ads-block .item .price i {
    transform: rotateZ(225deg);
    margin-left: 0px;
    margin-right: 5px;
}


/* #endregion ------------- /Chat Userinfo Area --------------------------- */
/* #region ----------------- Chat Dialog header --------------------------- */
.chat-modal .chat-dialog-area .chat-dialog-header {
    display: block;
    width: 100%;
    border-bottom: 1px solid #DDDDDD;
    background-color: #FFFFFF;
    height: 84px;
    font-size: 0px;
}

.chat-modal.no-active-dialogs .chat-dialog-area .chat-dialog-header {
    display: none;
}


.chat-modal .chat-dialog-area .chat-dialog-header .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

.chat-modal .chat-dialog-area .chat-dialog-header .ad-side {
    font-size: 14px;
    display: inline-block;
    width: 50%;
    height: 84px;
    vertical-align: top;
}

.chat-modal .chat-dialog-area .chat-dialog-header .user-side {
    font-size: 14px;
    display: inline-block;
    width: 50%;
    height: 84px;
    vertical-align: top;
}

.chat-modal .chat-dialog-area .chat-dialog-header .ad-side .ad-image-container {
    display: block;
    width: 54px;
    height: 54px;
    position: absolute;
    top: calc(50% - 27px);
    left: 15px;
    background-color: #EBEBEB;
    border-radius: var(--radius-4);
    overflow: hidden;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .ad-side .ad-image-container {
    right: 15px;
    left: auto;
}

.chat-modal .chat-dialog-area .chat-dialog-header .ad-side .ad-image-container .ci-image {
    position: absolute;
    font-size: 32px;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .ad-side .ad-image-container .ci-image {
    right: calc(50% - 16px);
    left: auto;
}

.chat-modal .chat-dialog-area .chat-dialog-header .ad-side .ad-image-container .ad-image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .ad-side .ad-image-container .ad-image {
    right: 0px;
    left: auto;
}

.chat-modal .chat-dialog-area .chat-dialog-header .ad-side h5 {
    display: block;
    white-space: nowrap;
    top: 18px;
    left: 80px;
    position: absolute;
    white-space: nowrap;
    width: calc(100% - 80px);
    color: var(--color-text-basic);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    font-weight: 700;
    margin: 0px;
    padding: 0px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .ad-side h5 {
    right: 80px;
    left: auto;
}

.chat-modal .chat-dialog-area .chat-dialog-header .ad-side .price {
    display: block;
    position: absolute;
    top: 46px;
    left: 80px;
    width: calc(100% - 80px);
    color: var(--color-text-muted);
    font-weight: 700;
    font-size: 14px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .ad-side .price {
    left: auto;
    right: 80px;
}

.chat-modal .chat-dialog-area .chat-dialog-header .ad-side .price span {
    display: inline-block;
    margin-right: 5px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .ad-side .price span {
    margin-left: 5px;
    margin-right: 0px;
}

.chat-modal .chat-dialog-area .chat-dialog-header .ad-side .price .bdi {
    vertical-align: top;
}

.chat-modal .chat-dialog-area .chat-dialog-header .ad-side .price i {
    transform: rotate( -45deg );
    font-size: 16px;
    vertical-align: top;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .ad-side .price i {
    transform: rotate( 225deg );
}

.chat-modal .chat-dialog-area .chat-dialog-header .user-side .dialog-actions-selector {
    position: absolute;
    top: 0px;
    right: 20px;
    font-size: 24px;
    height: 100%;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .user-side .dialog-actions-selector {
    left: 20px;
    right: auto;
}

.chat-modal .chat-dialog-area .chat-dialog-header .user-side .dialog-actions-selector .custom-popup-btn {
    height: 100%;
    border: 0px none transparent;
    background-color: transparent;
    cursor: pointer;
    font-size: 24px;
}

.chat-modal .chat-dialog-area .chat-dialog-header .user-side .dialog-actions-selector .custom-popup-panel li.active a {
    background-color: transparent;
}

    .chat-modal .chat-dialog-area .chat-dialog-header .user-side .dialog-actions-selector .custom-popup-panel li.active a i {
        display: none;
    }

.chat-modal .chat-dialog-area .chat-dialog-header .user-side .dialog-actions-selector .custom-popup-panel {
    min-width: 250px;
}

.chat-modal .chat-dialog-area .chat-dialog-header .user-side .dialog-actions-selector .custom-popup-overlay {
    top: 60px;
}

.chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-avatar {
    width: 56px;
    height: 56px;
    right: 60px;
    top: calc(50% - 28px);
    position: absolute;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-avatar {
    left: 60px;
    right: auto;
}

.chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-avatar .inner {
    top: -1px;
    left: -1px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-avatar .inner {
    top: 0px;
    left: 0px;
}

.chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-avatar i {
    font-size: 28px;
    left: 1px;
    top: calc(50% + 1px);
    font-weight: 400;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-avatar i {
    left: auto;
    right: 0px;
    top: 50%;
}

.chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-avatar .inner div {
    display: block;
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    position: absolute;
    top: -1px;
    left: -1px;
    border-radius: 50%;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}

.chat-modal .chat-dialog-area .chat-dialog-header .user-side h5 {
    position: absolute;
    top: 18px;
    right: 130px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 130px);
    font-size: 18px;
    color: var(--color-text-basic);
    font-weight: 700;
    text-align: right;
    margin: 0px;
    padding: 0px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .user-side h5 {
    left: 130px;
    right: auto;
    text-align: left;
}

.chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-status {
    display: inline-block;
    position: absolute;
    top: 40px;
    right: 130px;
    color: #FFFFFF;
    font-size: 14px;
    padding: 4px 8px 4px 8px;
    border-radius: 100px;
    font-weight: 400;
    line-height: 17px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-status {
    right: auto;
    left: 130px;
}

.chat-modal .chat-dialog-area .seller-header {
    display: none;
    overflow: hidden;
    height: 0px;
}

.chat-modal.dialog-with-seller .chat-dialog-area .seller-header {
    background-color: #E6F4ED;
    padding: 15px 15px 15px 15px;
    color: var(--color-text-muted);
    display: block;
    width: 100%;
    height: auto;
    overflow: auto;
}

.chat-modal.dialog-with-seller.item-sold .chat-dialog-area .seller-header {
    display: none;
    height: 0px;
}

.chat-modal.no-active-dialogs .chat-dialog-area .seller-header,
.chat-modal.no-active-dialogs.dialog-with-seller .chat-dialog-area .seller-header {
    display: none;
}


.chat-modal.dialog-with-seller .chat-dialog-area .seller-header table {
    display: table;
    table-layout: auto;
    max-width: 100%;
    border-collapse: collapse;
}

    .chat-modal.dialog-with-seller .chat-dialog-area .seller-header table > * {
        display: table-row;
    }

        .chat-modal.dialog-with-seller .chat-dialog-area .seller-header table > * > * {
            display: table-cell;
            text-align: left;
        }

            .chat-modal.dialog-with-seller .chat-dialog-area .seller-header table > * > * :nth-child(1) {
                min-width: 150px;
                vertical-align: baseline;
            }


            .chat-modal.dialog-with-seller .chat-dialog-area .seller-header table > * > * :nth-child(2) {
                vertical-align: middle;
                padding-left: 20px;
                padding-right: 20px;
            }

.chat-modal .view-user-info {
    display: none !important;
}
/* #endregion ------------- /Chat Dialog header --------------------------- */
/* #region -------------------- Chat Content ------------------------------ */
.chat-modal .chat-dialog-area .chat-dialog-content {
    overflow-y: auto;
}

.chat-modal.no-active-dialogs .chat-dialog-area .chat-dialog-content {
    display: none;
}
/* #endregion ---------------- /Chat Content ------------------------------ */
/* #region ------------------ Chat input area ----------------------------- */
.chat-modal .chat-dialog-area .chat-dialog-input-area {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 5px 25px 25px 25px;
    background-color: #FFFFFF;
    z-index: 2;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 5px 25px 25px 25px;
    background-color: #FFFFFF;
}

.chat-modal.no-active-dialogs .chat-dialog-area .chat-dialog-input-area {
    display: none;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area {
    left: auto;
    right: 0px;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .input-field {
    position: relative;
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #F2F2F2;
    padding-top: 12px;
    padding-bottom: 13px;
    padding-left: 60px;
    padding-right: 60px;
}


    .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field textarea {
        display: block;
        width: 100%;
        resize: none;
        padding-top: 11px;
        padding-bottom: 0px;
        min-height: 10px;
        line-height: 18px;
        border: 0px none transparent;
        height: 35px;
        max-height: 100px;
        overflow-y: auto;
        background-color: transparent;
        box-shadow: none;
        margin: 0px;
        border-radius: var(--radius-0);
    }

    .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .send-message {
        display: block;
        width: 60px;
        height: 60px;
        font-size: 32px;
        position: absolute;
        top: 0px;
        right: 0px;
        border-radius: var(--radius-0) !important;
        border: 0px none transparent;
        outline: none;
        box-shadow: none;
        background-color: transparent;
        vertical-align: middle;
        padding: 0px;
        cursor: pointer;
    }

        .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .send-message i {
            left: calc(50% - 16px);
            display: block;
            position: absolute;
            top: calc(50% - 16px);
        }

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .send-message {
    left: 0px;
    right: auto;
    transform: rotate(180deg);
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector {
    position: absolute;
    top: 0px;
    left: 0px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector {
    right: 0px;
    left: auto;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-btn {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-0);
    border: 0px none transparent;
    font-size: 30px;
    outline: none;
    background-color: transparent;
    cursor: pointer;
    position: relative;
}

    .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-btn i {
        display: block;
        font-size: 32px;
        left: calc(50% - 16px);
        top: calc(50% - 16px);
        position: absolute;
    }

.chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-overlay {
    top: auto;
    bottom: 50px;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-panel {
    min-width: 250px;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector label input[type='file'] {
    display: none;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector label {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: var(--color-text-basic);
    position: relative;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s ease;
}

    .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector label:hover {
        opacity: 0.6;
        transition: opacity 0.2s ease;
    }

.chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector li.active a {
    background-color: transparent;
}

    .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector li.active a .ci-check {
        display: none;
    }

.chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-overlay .ci-pazar {
    position: absolute;
    font-size: 32px;
    top: calc(50% - 16px);
    left: 7px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-overlay .ci-pazar {
    right: 7px;
    left: auto;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-overlay a,
.chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-overlay label {
    padding-top: 14px;
    padding-bottom: 14px;
}

    .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-overlay a span,
    .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-overlay label span {
        padding-left: 35px;
    }

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-overlay a span,
*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-overlay label span {
    padding-left: 0px;
    padding-right: 35px;
}
/* #endregion -------------- /Chat input area ----------------------------- */
/* #region ----------------- Attachment block ----------------------------- */
.chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block {
    display: none;
    width: 340px;
    height: 54px;
    border-radius: var(--radius-4);
    position: relative;
    background-color: #F2F2F2;
    margin-bottom: 5px;
}

.chat-modal.message-with-image-attachment .chat-dialog-area .chat-dialog-input-area .attachment-block.attachment-image-block {
    display: block;
}

.chat-modal.message-with-file-attachment .chat-dialog-area .chat-dialog-input-area .attachment-block.attachment-file-block {
    display: block;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .attachment-icon {
    display: block;
    width: 50px;
    height: 40px;
    border-radius: var(--radius-4);
    background-color: rgba(93, 170, 128, 0.2);
    position: absolute;
    top: calc(50% - 20px);
    left: 7px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .attachment-icon {
    right: 7px;
    left: auto;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .attachment-icon .ci-pazar {
    font-size: 32px;
    margin-left: 9px;
    margin-top: 4px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .attachment-icon .ci-pazar {
    margin-right: 9px;
    margin-left: 0px;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .btn-remove {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 40px;
    background-color: transparent;
    border-radius: var(--radius-0);
    border: 0px none transparent;
    cursor: pointer;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block.ready .btn-remove .ci-cross {
    display: none;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .btn-remove .ci-trashcan {
    display: none;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block.ready .btn-remove .ci-trashcan {
    display: block;
    font-size: 32px;
    margin-left: -2px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .btn-remove {
    left: 0px;
    right: auto;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .file-name {
    display: block;
    width: 100%;
    padding-left: 65px;
    padding-right: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    color: var(--color-text-basic);
    padding-top: 10px;
}

    .chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .file-name:empty {
        content: " " !important;
    }

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .file-name {
    padding-left: 40px;
    padding-right: 65px;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .progressbar {
    display: block;
    position: absolute;
    width: calc(100% - 110px);
    top: 37px;
    left: 65px;
    height: 3px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .progressbar {
    right: 65px;
    left: auto;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block.ready .progressbar {
    display: none;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .file-size {
    display: none;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block.ready .file-size {
    display: block;
    width: 100%;
    padding-left: 65px;
    padding-right: 40px;
    font-weight: 400;
    font-size: 14px;
    color: var(--color-text-muted);
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block.ready .file-size {
    padding-left: 40px;
    padding-right: 65px;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .attachment-image {
    display: none;
    position: absolute;
    top: calc(50% - 20px);
    left: 7px;
    width: 50px;
    height: 40px;
    border-radius: var(--radius-4);
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block .attachment-image {
    left: auto;
    right: 7px;
}

.chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block.ready .attachment-image {
    display: block;
}
/* #endregion ------------- /Attachment block ----------------------------- */
/* #region ---------------------- Dialog content -------------------------- */
.chat-modal .chat-dialog-area .messages-divider {
    display: block;
    padding-left: 25px;
    padding-right: 25px;
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
}

    .chat-modal .chat-dialog-area .messages-divider .divider {
        display: block;
        width: 100%;
        height: 1px;
        background-color: #F2F2F2;
    }

    .chat-modal .chat-dialog-area .messages-divider span {
        display: block;
        margin-top: -13px;
        color: var(--color-text-muted);
        line-height: 24px;
    }

        .chat-modal .chat-dialog-area .messages-divider span small {
            display: inline-block;
            padding-left: 15px;
            padding-right: 15px;
            background-color: #FFFFFF;
            font-size: 14px;
            line-height: 17px;
        }

    .chat-modal .chat-dialog-area .messages-divider.new .divider {
        background-color: #FBCFCF;
    }

    .chat-modal .chat-dialog-area .messages-divider.new span {
        color: var(--color-text-danger);
    }

.chat-modal .chat-dialog-area .message-item {
    display: block;
    max-width: 865px;
    position: relative;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 50px;
}

    .chat-modal .chat-dialog-area .message-item .message-avatar {
        position: absolute;
        top: 0px;
        left: 25px;
    }

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-avatar {
    right: 25px;
    left: auto;
}

.chat-modal .chat-dialog-area .message-item .user-name {
    display: block;
    padding-left: 65px;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-basic);
    padding-top: 2px;
    line-height: 17px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .user-name {
    padding-left: 0px;
    padding-right: 65px;
}

.chat-modal .chat-dialog-area .message-item .status-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    padding: 2px 8px 2px 8px;
    border-radius: var(--radius-16);
    margin-left: 10px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .status-badge {
    margin-right: 10px;
    margin-left: 0px;
}


.chat-modal .chat-dialog-area .message-item .status-badge.status-you {
    background-color: #EBEBEB;
    color: var(--color-text-muted);
}

.chat-modal .chat-dialog-area .message-item .status-badge.status-seller,
.chat-modal .chat-dialog-area .message-item .status-badge.status-buyer {
    background-color: #E6F4ED;
    color: var(--color-text-muted);
}

.chat-modal .chat-dialog-area .message-item .status-badge.status-admin {
    background-color: var(--color-bg-warning);
    color: var(--color-text-basic);
}

.chat-modal .chat-dialog-area .message-item .message-date {
    display: block;
    padding-left: 65px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 400;
    margin-top: 2px;
    margin-bottom: 15px;
    line-height: 17px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-date {
    padding-left: 0px;
    padding-right: 65px;
}

.chat-modal .chat-dialog-area .message-item .message-date .status-badge {
    display: none;
}

.chat-modal .chat-dialog-area .message-item .message-date bdi {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}

.chat-modal .chat-dialog-area .message-item .message-date span,
.chat-modal .chat-dialog-area .message-item .message-date bdi {
    vertical-align: middle;
}

.chat-modal .chat-dialog-area .message-item .message-date i {
    margin-top: -2px;
}

.chat-modal .chat-dialog-area .message-item .message-text {
    padding-left: 65px;
    color: var(--color-text-basic);
    margin-bottom: 10px;
    line-height: 17px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-text {
    padding-left: 0px;
    padding-right: 65px;
}

.chat-modal .chat-dialog-area .message-item .message-photo {
    display: inline-block;
    max-width: 420px;
    margin-left: 65px;
    border-radius: var(--radius-4);
    overflow: hidden;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-photo {
    margin-right: 65px;
    margin-left: 0px;
}

.chat-modal .chat-dialog-area .message-item .message-photo img {
    display: inline-block;
    width: 100%;
    height: auto;
}

.chat-modal .chat-dialog-area .message-item .message-file {
    display: inline-block;
    position: relative;
    border-radius: var(--radius-4);
    background-color: #F9F9F9;
    margin-left: 65px;
    width: 420px;
    height: 90px;
    padding-right: 10px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-file {
    margin-right: 65px;
    margin-left: 0px;
    padding-left: 10px;
    padding-right: 0px;
}

.chat-modal .chat-dialog-area .message-item .message-file .message-file-icon {
    font-size: 48px;
    display: block;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-4);
    background-color: rgba(93, 170, 128, 0.2);
    position: absolute;
    top: calc(50% - 36px);
    left: 9px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-file .message-file-icon {
    right: 9px;
    left: auto;
}

.chat-modal .chat-dialog-area .message-item .message-file .message-file-icon .ci-pazar {
    display: inline-block;
    margin-left: 12px;
    margin-top: 12px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-file .message-file-icon .ci-pazar {
    margin-left: 0px;
    margin-right: 12px;
}

.chat-modal .chat-dialog-area .message-item .message-file .file-name {
    display: block;
    padding-left: 90px;
    margin-top: 12px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-basic);
    font-weight: 400;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-file .file-name {
    padding-left: 0px;
    padding-right: 90px;
}

.chat-modal .chat-dialog-area .message-item .message-file .file-size {
    display: block;
    padding-left: 90px;
    margin-top: 2px;
    max-width: 100%;
    white-space: nowrap;
    color: var(--color-text-muted);
    font-weight: 400;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-file .file-size {
    padding-left: 0px;
    padding-right: 90px;
}

.chat-modal .chat-dialog-area .message-item .message-file a {
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    color: var(--color-text-primary);
    margin-top: 12px;
    margin-left: 90px;
    display: inline-block;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-file a {
    margin-right: 90px;
    margin-left: 0px;
}

.chat-modal .chat-dialog-area .message-item .message-location {
    display: inline-block;
    position: relative;
    border-radius: var(--radius-4);
    background-color: #F9F9F9;
    margin-left: 65px;
    width: 420px;
    height: 90px;
    padding-right: 10px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-location {
    margin-right: 65px;
    margin-left: 0px;
    padding-right: 0px;
    padding-left: 10px;
}

.chat-modal .chat-dialog-area .message-item .message-location .message-location-icon {
    font-size: 48px;
    display: block;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-4);
    background-color: rgba(93, 170, 128, 0.2);
    position: absolute;
    top: calc(50% - 36px);
    left: 9px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-location .message-location-icon {
    right: 9px;
    left: auto;
}

.chat-modal .chat-dialog-area .message-item .message-location .message-location-icon .ci-pazar {
    display: inline-block;
    margin-left: 12px;
    margin-top: 12px;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-location .message-location-icon .ci-pazar {
    margin-left: 0px;
    margin-right: 12px;
}

.chat-modal .chat-dialog-area .message-item .message-location .location-address {
    display: block;
    padding-left: 90px;
    margin-top: 12px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-basic);
    font-weight: 400;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-location .location-address {
    padding-left: 0px;
    padding-right: 90px;
}

.chat-modal .chat-dialog-area .message-item .message-location .location-caption {
    display: block;
    padding-left: 90px;
    margin-top: 2px;
    max-width: 100%;
    white-space: nowrap;
    color: var(--color-text-muted);
    font-weight: 400;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-location .location-caption {
    padding-right: 90px;
    padding-left: 0px;
}

.chat-modal .chat-dialog-area .message-item .message-location a {
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    color: var(--color-text-primary);
    margin-top: 12px;
    margin-left: 90px;
    display: inline-block;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-location a {
    margin-right: 90px;
    margin-left: 0px;
}

.chat-modal .chat-dialog-area .message-item .message-error {
    padding-left: 65px;
    color: var(--color-text-danger);
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-error {
    padding-left: 0px;
    padding-right: 65px;
}

.chat-modal .chat-dialog-area .message-item .message-error .marker {
    background-color: #FBCFCF;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
    border-radius: 50%;
    padding: 5px;
    margin-right: 9px;
    width: 27px;
    text-align: center;
}

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-error .marker {
    margin-left: 9px;
    margin-right: 0px;
}

.chat-modal.conversation-on-loading .chat-dialog-area {
    background-color: transparent;
    border-right: 0px none transparent;
}

*[dir='rtl'] .chat-modal.conversation-on-loading .chat-dialog-area {
    background-color: transparent;
    border-right: 1px solid #DDDDDD;
    border-left: 0px none transparent;
}

.chat-modal.conversation-on-loading .chat-dialog-area .chat-dialog-header {
    display: none;
}

.chat-modal.conversation-on-loading.dialog-with-seller .chat-dialog-area .seller-header {
    display: none;
}

.chat-modal.conversation-on-loading .chat-dialog-area .chat-dialog-content {
    display: none;
}

.chat-modal.conversation-on-loading .chat-dialog-area .chat-dialog-input-area {
    display: none;
}

.chat-modal.conversation-on-loading .chat-dialog-area .pazar-loader.partial-loader {
    display: block;
}

.chat-modal.conversation-on-loading .chat-userinfo-area {
    display: none;
}

.chat-modal.m-display-conversation.conversation-on-loading .m-chat-header-block-conversation {
    display: none;
}

.chat-modal.no-active-dialogs.conversation-on-loading .chat-dialog-area .empty-block {
    display: none;
}

.chat-modal .input-blocked-by-user,
.chat-modal .input-blocked-by-you {
    display: none;
}

.chat-modal.blocked-by-user .chat-dialog-area .chat-dialog-input-area .input-field,
.chat-modal.blocked-by-you .chat-dialog-area .chat-dialog-input-area .input-field {
    display: none;
}

.chat-modal.blocked-by-user .input-blocked-by-user,
.chat-modal.blocked-by-you .input-blocked-by-you {
    display: block;
    color: var(--color-text-muted);
    position: relative;
}

    .chat-modal.blocked-by-user .input-blocked-by-user .ci-pazar,
    .chat-modal.blocked-by-you .input-blocked-by-you .ci-pazar {
        font-size: 32px;
        position: absolute;
        z-index: 1;
        left: 0px;
        top: calc(50% - 16px);
    }

*[dir='rtl'] .chat-modal.blocked-by-user .input-blocked-by-user .ci-pazar,
*[dir='rtl'] .chat-modal.blocked-by-you .input-blocked-by-you .ci-pazar {
    right: 0px;
    left: auto;
}

.chat-modal.blocked-by-user .chat-dialog-area .chat-dialog-input-area,
.chat-modal.blocked-by-you .chat-dialog-area .chat-dialog-input-area {
    background-color: #F2F2F2;
    padding: 20px;
}

.chat-modal.blocked-by-user .input-blocked-by-user span,
.chat-modal.blocked-by-you .input-blocked-by-you span {
    padding-left: 40px;
    display: block;
}

*[dir='rtl'] .chat-modal.blocked-by-user .input-blocked-by-user span,
*[dir='rtl'] .chat-modal.blocked-by-you .input-blocked-by-you span {
    padding-left: 0px;
    padding-right: 40px;
}

.chat-modal .chat-dialog-area .message-item .offered-item {
    margin-inline-start: 65px;
    margin-inline-end: 10px;
    background-color: #F9F9F9;
    border-radius: var(--radius-4);
    width: 410px;
    padding: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
}

    .chat-modal .chat-dialog-area .message-item .offered-item .image-container {
        display: flex;
        width: 80px;
        height: 80px;
        border-radius: var(--radius-4);
        align-items: center;
        flex-shrink: 0;
        aspect-ratio: 1/1;
        background-color: #DDDDDD;
        position: relative;
        justify-content: center;
        overflow: hidden;
    }

        .chat-modal .chat-dialog-area .message-item .offered-item .image-container .ci-image {
            font-size: 48px;
        }

        .chat-modal .chat-dialog-area .message-item .offered-item .image-container img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            z-index: 1;
            object-fit: cover;
        }

    .chat-modal .chat-dialog-area .message-item .offered-item .text-container {
        overflow: hidden;
    }

    .chat-modal .chat-dialog-area .message-item .offered-item .categories-list {
        font-size: 0px;
        margin-block-end: 8px;
    }

        .chat-modal .chat-dialog-area .message-item .offered-item .categories-list span {
            display: inline-block;
            font-size: 12px;
            font-weight: 400;
            color: var(--color-text-muted);
            vertical-align: middle;
        }

            .chat-modal .chat-dialog-area .message-item .offered-item .categories-list span + span:before {
                content: "•";
                display: inline-block;
                color: var(--color-text-muted);
                font-size: 10px;
                margin-inline: 8px;
            }

    .chat-modal .chat-dialog-area .message-item .offered-item .item-title {
        font-size: 14px;
        font-weight: 400;
        color: var(--color-text-basic);
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-wrap: nowrap;
        margin-block-end: 8px;
    }

    .chat-modal .chat-dialog-area .message-item .offered-item .price {
        display: flex;
        align-items: center;
        gap: 4px;
        font-weight: 800;
    }

    .chat-modal .chat-dialog-area .message-item .offered-item bdi {
        display: flex;
        gap: 4px;
    }

    .chat-modal .chat-dialog-area .message-item .offered-item .price .ci-arrow-right {
        transform: rotateZ(45deg);
        font-size: 16px;
        margin-bottom: 2px;
    }

*[dir='rtl'] .chat-modal .chat-dialog-area .message-item .offered-item .price .ci-arrow-right {
    transform: rotateZ(135deg);
}


@media (max-width: 550px) {

    .chat-modal .chat-dialog-area .message-item .offered-item {
        margin-inline-start: 50px;
        margin-inline-end: 10px;
        width: calc(100% - 50px);
    }
}

@media (max-width: 450px) {

    .chat-modal .chat-dialog-area .message-item .offered-item {
        display: block;
    }

        .chat-modal .chat-dialog-area .message-item .offered-item .image-container {
            width: 100%;
            height: 350px;
            margin-bottom: 16px;
        }

        .chat-modal .chat-dialog-area .message-item .offered-item .price {
            margin-bottom: 8px;
        }
}

/* #endregion ------------------/ Dialog content -------------------------- */
/* #region ---------------------- Cargo Message --------------------------- */
.chat-modal .chat-dialog-area .message-item .message-text.system-message {
    color: var(--color-text-muted);
}

    .chat-modal .chat-dialog-area .message-item .message-text.system-message span {
        padding-right: 5px;
    }

        .chat-modal .chat-dialog-area .message-item .message-text.system-message span:empty {
            padding: 0px;
            display: none;
        }

.chat-modal .message-item .message-cargo {
    max-width: 860px;
    background-color: #F9F9F9;
    border-radius: var(--radius-4);
    margin-left: 65px;
    position: relative;
}

*[dir='rtl'] .chat-modal .message-item .message-cargo {
    margin-right: 65px;
    margin-left: 0px;
}

.chat-modal .message-cargo .cargo-top-part {
    display: block;
    width: 100%;
    padding: 10px;
}

    .chat-modal .message-cargo .cargo-top-part > * {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

        .chat-modal .message-cargo .cargo-top-part > * > * {
            display: table-row;
        }

            .chat-modal .message-cargo .cargo-top-part > * > * > * {
                display: table-cell;
                vertical-align: top;
            }

                .chat-modal .message-cargo .cargo-top-part > * > * > *:last-child {
                    padding-left: 15px;
                }

*[dir='rtl'] .chat-modal .message-cargo .cargo-top-part > * > * > *:last-child {
    padding-left: 0px;
    padding-right: 15px;
}

.chat-modal .message-cargo .cargo-picture-area {
    width: 220px;
    position: relative;
    height: 150px;
}

.chat-modal .message-cargo .cargo-picture-container {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #EBEBEB;
    border-radius: var(--radius-4);
    overflow: hidden;
}

    .chat-modal .message-cargo .cargo-picture-container .inner {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .chat-modal .message-cargo .cargo-picture-container .ci-pazar {
        font-size: 72px;
        position: absolute;
        top: calc(50% - 36px);
        left: calc(50% - 36px);
    }

    .chat-modal .message-cargo .cargo-picture-container .cargo-image {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: center center;
        background-size: cover;
    }


.chat-modal .message-cargo .order-info-block {
    margin-top: 5px;
}

    .chat-modal .message-cargo .order-info-block .order-number {
        padding-right: 15px;
        border-right: 1px solid #DDDDDD;
        display: inline-block;
        margin-right: 10px;
    }

*[dir='rtl'] .chat-modal .message-cargo .order-info-block .order-number {
    padding-right: 0px;
    padding-left: 15px;
    border-right: 0px none transparent;
    border-left: 1px solid #DDDDDD;
    margin-right: 0px;
    margin-left: 10px;
}

.chat-modal .message-cargo .order-info-block .order-number span:first-child {
    padding-right: 5px;
}

*[dir='rtl'] .chat-modal .message-cargo .order-info-block .order-number span:first-child {
    padding-right: 0px;
    padding-left: 5px;
}

.chat-modal .message-cargo .order-info-block .order-date bdi:first-child {
    padding-right: 10px;
}

*[dir='rtl'] .chat-modal .message-cargo .order-info-block .order-date bdi:first-child {
    padding-right: 0px;
    padding-left: 10px;
}

.chat-modal .message-cargo h4 {
    font-size: 20px;
    font-weight: 400;
    margin-top: 15px;
    word-break: break-word;
    padding-right: 30px;
}

*[dir='rtl'] .chat-modal .message-cargo h4 {
    padding-left: 30px;
    padding-right: 0px;
}

.chat-modal .message-cargo .price-block {
    display: block;
    width: 100%;
    margin-top: 5px;
}

    .chat-modal .message-cargo .price-block .price {
        font-size: 16px;
        color: var(--color-text-basic);
        font-weight: 700;
        margin-right: 10px;
        white-space: nowrap;
    }

*[dir='rtl'] .chat-modal .message-cargo .price-block .price {
    margin-left: 10px;
    margin-right: 0px;
}

.chat-modal .message-cargo .price-block .price.old-price {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.chat-modal .message-cargo .price-block .price bdi {
    padding-right: 5px;
}

*[dir='rtl'] .chat-modal .message-cargo .price-block .price bdi {
    padding-right: 0px;
    padding-left: 5px;
}

.chat-modal .message-cargo .price-block .new-price span:first-child {
    padding-right: 5px;
    white-space: nowrap;
}

*[dir='rtl'] .chat-modal .message-cargo .price-block .new-price span:first-child {
    padding-right: 0px;
    padding-left: 5px;
}


.chat-modal .message-cargo .statuses-list {
    display: block;
    width: 100%;
    position: relative;
    font-size: 0px;
    margin-top: 20px;
}


    .chat-modal .message-cargo .statuses-list .status-item {
        display: inline-block;
        font-size: 14px;
        border-radius: var(--radius-4);
        color: var(--color-text-basic);
        background-color: #EBEBEB;
        padding: 10px 15px 10px 15px;
        cursor: pointer;
        margin-right: 5px;
        margin-bottom: 5px;
    }

*[dir='rtl'] .chat-modal .message-cargo .statuses-list .status-item {
    margin-right: 0px;
    margin-left: 5px;
}

.chat-modal .message-cargo .statuses-list .status-item.not-paid,
.chat-modal .message-cargo .statuses-list .status-item.awaiting-your-confirmation,
.chat-modal .message-cargo .statuses-list .status-item.awaiting-sellers-confirmation,
.chat-modal .message-cargo .statuses-list .status-item.closed {
    background-color: #EBEBEB;
    color: var(--color-text-basic);
}

.chat-modal .message-cargo .statuses-list .status-item.paid,
.chat-modal .message-cargo .statuses-list .status-item.confirmed-by-you-waiting-pickup,
.chat-modal .message-cargo .statuses-list .status-item.confirmed-waiting-pickup,
.chat-modal .message-cargo .statuses-list .status-item.pickedup,
.chat-modal .message-cargo .statuses-list .status-item.confirmed-by-seller,
.chat-modal .message-cargo .statuses-list .status-item.on-the-way,
.chat-modal .message-cargo .statuses-list .status-item.awaiting-courier,
.chat-modal .message-cargo .statuses-list .status-item.delivered,
.chat-modal .message-cargo .statuses-list .status-item.on-way-back {
    background-color: #E6F4ED;
    color: var(--color-text-muted);
}

.chat-modal .message-cargo .statuses-list .status-item.canceled-by-buyer,
.chat-modal .message-cargo .statuses-list .status-item.canceled-by-seller,
.chat-modal .message-cargo .statuses-list .status-item.canceled-by-administration,
.chat-modal .message-cargo .statuses-list .status-item.expired,
.chat-modal .message-cargo .statuses-list .status-item.refused-by-buyer,
.chat-modal .message-cargo .statuses-list .status-item.canceled-by-cargo {
    background-color: var(--color-bg-danger);
    color: #ffffff;
}

.chat-modal .message-cargo .statuses-list .status-item.canceled-by-you,
.chat-modal .message-cargo .statuses-list .status-item.refused-by-you {
    background-color: #FBCFCF;
    color: var(--color-text-muted);
}

.chat-modal .message-cargo .statuses-list .status-item.on-hold {
    background-color: var(--color-bg-warning);
    color: var(--color-text-basic);
}

.chat-modal .message-cargo .note-block {
    margin-top: 15px;
    margin-bottom: 10px;
}

.chat-modal .message-cargo .user-address {
    position: relative;
    vertical-align: middle;
    min-height: 32px;
    margin-top: 17px;
}

    .chat-modal .message-cargo .user-address button {
        position: absolute;
        top: calc(50% - 16px);
        left: 0px;
        z-index: 1;
        font-size: 32px;
        padding: 0px;
        border: 0px none transparent;
        background-color: transparent;
        cursor: pointer;
    }

    .chat-modal .message-cargo .user-address span {
        display: block;
        width: 100%;
        max-width: 100%;
        line-height: 17px;
        text-align: left;
        padding-left: 40px;
        font-size: 14px;
        padding-top: 7px;
    }

.chat-modal .message-cargo .delivery-info-block {
    padding: 20px 10px 20px 10px;
    font-size: 0px;
    border-top: 1px solid #DDDDDD;
}

    .chat-modal .message-cargo .delivery-info-block .left-side {
        font-size: 14px;
        display: inline-block;
        width: 220px;
        font-weight: 700;
        color: var(--color-text-basic);
        vertical-align: top;
    }

    .chat-modal .message-cargo .delivery-info-block .right-side {
        font-size: 14px;
        display: inline-block;
        width: calc(100% - 220px);
        padding-left: 15px;
        vertical-align: top;
        padding-right: 10px;
    }

*[dir='rtl'] .chat-modal .message-cargo .delivery-info-block .right-side {
    padding-right: 15px;
    padding-left: inherit;
}

.chat-modal .message-cargo .delivery-info-block .btn-link {
    padding-top: 0px;
}

.chat-modal .message-cargo .delivery-info-block .delivery-info-panel {
    display: block;
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #EBEBEB;
    padding: 10px;
    margin-bottom: 20px;
}

    .chat-modal .message-cargo .delivery-info-block .delivery-info-panel .date-block {
        color: var(--color-text-muted);
        font-size: 14px;
    }

        .chat-modal .message-cargo .delivery-info-block .delivery-info-panel .date-block bdi:first-child {
            padding-right: 10px;
        }

*[dir='rtl'] .chat-modal .message-cargo .delivery-info-block .delivery-info-panel .date-block bdi:first-child {
    padding-right: 0px;
    padding-left: 10px;
}

.chat-modal .message-cargo .delivery-info-block .delivery-info-panel .operation-block {
    font-size: 14px;
    padding-top: 15px;
    color: var(--color-text-basic);
    font-weight: 400;
    display: inline-block;
    width: 100%;
}

.chat-modal .message-cargo .delivery-info-block .delivery-info-panel .address-block {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
    padding-top: 3px;
    display: inline-block;
    width: 100%;
}

.chat-modal .message-cargo .cargo-controls {
    padding: 15px 10px 15px 10px;
}

    .chat-modal .message-cargo .cargo-controls .btn-link {
        float: right;
    }

*[dir='rtl'] .chat-modal .message-cargo .cargo-controls .btn-link {
    float: left;
}

.chat-modal .otheruser-typingblock {
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 25px;
    color: var(--color-text-muted);
    display: none;
}

*[dir='rtl'] .chat-modal .otheruser-typingblock {
    padding-right: 25px;
    padding-left: 0px;
}

.chat-modal.other-user-typing .otheruser-typingblock {
    display: block;
}

.chat-modal .otheruser-typingblock .icon-block {
    position: absolute;
    top: 0px;
    left: 0px;
}

*[dir='rtl'] .chat-modal .otheruser-typingblock .icon-block {
    left: auto;
    right: 0px;
}

.chat-modal .otheruser-typingblock .icon-block .ci-pencil {
    position: absolute;
    top: 6px;
    left: 0px;
    animation: chat-typing linear 1.4s infinite;
}

*[dir='rtl'] .chat-modal .otheruser-typingblock .icon-block .ci-pencil {
    left: auto;
    right: 0px;
    animation: chat-typing-rtl linear 1.4s infinite;
}

    *[dir='rtl'] .chat-modal .otheruser-typingblock .icon-block .ci-pencil:before {
        transform: rotateY(180deg);
    }

@keyframes chat-typing {
    0% {
        transform: translateX(0px);
    }

    80% {
        transform: translateX(10px);
    }

    90% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0px);
    }
}

@keyframes chat-typing-rtl {
    0% {
        transform: translateX(0px);
    }

    80% {
        transform: translateX(-10px);
    }

    90% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0px);
    }
}

.chat-modal .otheruser-typingblock .icon-block .line {
    display: block;
    position: absolute;
    top: 17px;
    height: 2px;
    background-color: #CCCCCC;
    width: 0px;
    animation: chat-typing-line linear 1.4s infinite;
}

*[dir='rtl'] .chat-modal .otheruser-typingblock .icon-block .line {
    display: block;
    position: absolute;
    height: 2px;
    right: 0px;
    background-color: #CCCCCC;
    width: 0px;
    animation: chat-typing-line linear 1.4s infinite;
    transform: rotateY(180deg);
}

@keyframes chat-typing-line {
    0% {
        width: 0px;
    }

    80% {
        width: 10px;
    }

    80.1% {
        width: 0px;
    }

    100% {
        width: 0px;
    }
}


/* #endregion ------------------ /Cargo Message --------------------------- */
@media(max-width: 1550px) {
    .chat-modal .chat-dialog-area .empty-block .recent-ads-container .left-side {
        width: 100%;
        padding-right: 0px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .left-side {
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
    }

    .chat-modal .chat-dialog-area .empty-block .recent-ads-container .right-side {
        width: 100%;
        padding-left: 0px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .right-side {
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }


    .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .chat-modal .chat-dialog-area .empty-block .recent-ads-container {
        width: 100%;
    }

    .chat-modal .chat-dialog-area .empty-block h3, .chat-modal .chat-dialog-area .empty-block h5 {
        padding-left: 40px;
        padding-right: 40px;
    }

    .chat-modal .chat-dialog-area .empty-block h3 {
        font-size: 28px;
    }

    .chat-modal .chat-dialog-area .empty-block h5 {
        font-size: 14px;
    }

    .chat-modal .chat-dialog-area .empty-block .icon-block .ci-messages {
        font-size: 96px;
    }

    .chat-modal .chat-dialog-area .empty-block .icon-block .ci-arrow-corner {
        font-size: 64px;
    }

    .chat-modal .chat-dialog-area .empty-block .recent-ads {
        margin-top: 60px;
    }

    .chat-modal .message-cargo .cargo-picture-area {
        width: 180px;
    }

    .chat-modal .message-cargo .delivery-info-block .left-side {
        width: 180px;
    }

    .chat-modal .message-cargo .delivery-info-block .right-side {
        width: calc(100% - 180px);
    }
}

@media(max-width: 1399px) {
    .chat-modal .chat-userinfo-area {
        position: absolute;
        z-index: 2;
        right: 0px;
        display: block;
        border-left: 1px solid #DDDDDD;
    }

    *[dir='rtl'] .chat-modal .chat-userinfo-area {
        border-left: 0px none transparent;
        border-right: 1px solid #DDDDDD;
        right: auto;
        left: 0px;
    }

    .chat-modal .chat-dialog-area {
        width: 100%;
        padding-right: 27px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area {
        padding-left: 27px;
        padding-right: 0px;
    }

    .chat-modal.no-active-dialogs .chat-dialog-area {
        width: 100%;
        padding-right: 0px;
    }

    *[dir='rtl'] .chat-modal.no-active-dialogs .chat-dialog-area {
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
    }

    .chat-modal .chat-dialog-area .chat-dialog-input-area {
        width: calc(100% - 27px);
    }

    .chat-modal .chat-userinfo-area .inner {
        height: calc(100% - 55px);
    }
}

@media (max-width: 1100px) {
    .chat-modal .message-cargo .cargo-top-part > * {
        display: block;
        width: 100%;
    }

        .chat-modal .message-cargo .cargo-top-part > * > * {
            display: block;
            width: 100%;
        }

            .chat-modal .message-cargo .cargo-top-part > * > * > *.cargo-picture-area {
                display: block;
                width: 100%;
                height: 200px;
            }

            .chat-modal .message-cargo .cargo-top-part > * > * > *:last-child {
                padding-left: 0px;
            }

    .chat-modal .message-cargo .delivery-info-block .left-side {
        display: block;
        width: 100%;
    }

    .chat-modal .message-cargo .delivery-info-block .right-side {
        display: block;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 10px;
    }

    .chat-modal .message-cargo .cargo-controls .new-btn {
        display: block;
        clear: both;
        float: none;
        width: 100%;
    }

        .chat-modal .message-cargo .cargo-controls .new-btn + .new-btn {
            margin-top: 5px;
        }
}

@media(max-width: 991px) {
    .chat-modal .chat-conversations-area {
        width: 280px;
    }


    .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card {
        width: 500px;
    }
}

@media(max-width: 850px) {
    .chat-modal .chat-conversations-area {
        width: 100%;
    }

    /* #region Chat Window Header */
    .chat-modal .chat-header-caption {
        display: none;
    }

    .chat-modal.m-display-contacts .m-chat-header-block-contacts {
        display: block;
    }

    .chat-modal.m-display-contacts .chat-status-popup {
        display: block;
    }


    .chat-modal.m-display-info .m-chat-header-block-info {
        display: block;
    }

    .chat-modal.m-display-info .chat-status-popup,
    .chat-modal.m-display-conversation .chat-status-popup {
        display: none;
    }

    .chat-modal.m-display-info .btn-back-to-conversation {
        display: block;
    }

    .chat-modal.m-display-conversation .btn-back-to-contacts {
        display: block;
    }

    .chat-modal.m-display-conversation .m-chat-header-block-conversation {
        display: block;
    }

    .chat-modal.m-display-conversation.no-active-dialogs .m-chat-header-block-conversation {
        display: none;
    }

    /* #endregion Chat Window Header */
    /* #region Chat areas */
    .chat-modal.m-display-contacts .chat-dialog-area {
        display: none;
    }

    .chat-modal.m-display-contacts .chat-userinfo-area {
        display: none;
    }

    .chat-modal.m-display-conversation .chat-userinfo-area {
        display: none;
    }

    .chat-modal.m-display-conversation .chat-conversations-area {
        display: none;
    }

    .chat-modal.m-display-info .chat-conversations-area {
        display: none;
    }

    .chat-modal.m-display-info .chat-dialog-area {
        display: none;
    }
    /* #endregion Chat areas */
    /* #region Chat popups */
    .chat-modal .custom-popup-overlay,
    *[dir='rtl'] .chat-modal .custom-popup-overlay {
        position: fixed;
        top: 0px !important;
        left: 0px !important;
        width: 100% !important;
        height: 100% !important;
        backdrop-filter: blur(7px);
        background-color: rgba(0, 0, 0, 0.3);
        right: auto !important;
    }

    .custom-popup.chat-status-popup .custom-popup-panel {
        width: calc(100% - 200px);
        left: 100px;
        top: calc(50% - 104px);
        padding-top: 15px;
        margin: 0px !important;
    }

    *[dir='rtl'] .custom-popup.chat-status-popup .custom-popup-panel {
        left: auto;
        right: 100px;
    }

    .chat-modal .chat-conversations-area .conversations-selector .custom-popup-panel {
        width: calc(100% - 200px);
        left: 100px;
        top: calc(50% - 155px);
    }

    *[dir='rtl'] .chat-modal .chat-conversations-area .conversations-selector .custom-popup-panel {
        right: 100px;
        left: auto;
    }

    .chat-modal .chat-dialog-area .chat-dialog-header .user-side .dialog-actions-selector .custom-popup-panel {
        width: calc(100% - 200px);
        left: 100px;
        top: calc(50% - 95px);
        padding-top: 15px;
        padding-bottom: 15px;
        margin: 0px;
        position: absolute;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .user-side .dialog-actions-selector .custom-popup-panel {
        left: auto;
        right: 100px;
    }

    .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-panel {
        width: calc(100% - 200px);
        left: 100px;
        top: calc(50% - 88px);
        padding-top: 15px;
        padding-bottom: 15px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-panel {
        left: auto;
        right: 100px;
    }


    .chat-modal .view-user-info {
        display: block !important;
    }
    /* #endregion Chat popups */
    /* #region �ontacts view */
    .chat-modal .chat-conversations-area .search-block {
        padding: 11px 15px 0px 15px;
        border-bottom: 0px none transparent;
    }

    .chat-modal .chat-conversations-area .conversations-selector .custom-popup-btn {
        padding: 12px 15px 12px 15px;
    }

    .chat-modal .conversations-list {
        height: calc(100% - 97px);
    }

        .chat-modal .conversations-list .conversation-item.active {
            background-color: #FFFFFF;
        }

        .chat-modal .conversations-list .conversation-item + .conversation-item {
            border-top: 1px solid #F2F2F2;
        }

        .chat-modal .conversations-list .conversation-item {
            width: calc(100% - 30px);
            margin-left: 15px;
        }

    *[dir='rtl'] .chat-modal .conversations-list .conversation-item {
        margin-right: 15px;
        margin-left: 0px;
    }
    /* #endregion Contacts view */
    /* #region Conversation view */
    .chat-modal .chat-dialog-area {
        padding-right: 0px;
        border-left: 0px none transparent;
        border-right: 0px none transparent;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area {
        padding-right: 0px;
        padding-left: 0px;
    }

    .chat-modal .chat-dialog-area .chat-dialog-header {
        height: 58px;
    }

    .chat-modal.dialog-with-seller .chat-dialog-area .seller-header {
        display: none;
        height: 0px;
        overflow: hidden;
    }

    .chat-modal .chat-dialog-area .chat-dialog-header .ad-side {
        display: none;
    }

    .chat-modal .chat-dialog-area .chat-dialog-header .user-side {
        width: 100%;
        height: 55px;
    }

        .chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-avatar {
            width: 42px;
            height: 42px;
            top: calc(50% - 21px);
            left: 10px;
        }

    *[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-avatar {
        left: auto;
        right: 10px;
    }

    .chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-avatar i {
        font-size: 24px;
    }

    .chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-avatar .trusted-seller-badge {
        width: 18px;
        height: 18px;
        right: auto;
        top: -1px;
        left: -4px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-avatar .trusted-seller-badge {
        width: 18px;
        height: 18px;
        right: -4px;
        top: -1px;
        left: auto;
    }

    .chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-avatar .trusted-seller-badge .ci-pazar-small {
        position: absolute;
        font-size: 12px;
        top: calc(50% - 6px);
        left: calc(50% - 6px);
    }



    .chat-modal .chat-dialog-area .chat-dialog-header .user-side .dialog-actions-selector {
        right: 0px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .user-side .dialog-actions-selector {
        right: auto;
        left: 0px;
    }


    .chat-modal .chat-dialog-area .chat-dialog-header .user-side h5 {
        color: var(--color-text-muted);
        text-align: left;
        font-size: 14px;
        font-weight: 700;
        top: 6px;
        right: auto;
        left: 60px;
        width: calc(100% - 110px);
        line-height: 17px;
        padding: 0px;
        margin: 0px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .user-side h5 {
        text-align: right;
        right: 60px;
        left: auto;
    }

    .chat-modal .chat-dialog-area .chat-dialog-header .user-side .dialog-actions-selector .custom-popup-btn {
        width: 55px;
    }

    .chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-status {
        font-size: 12px;
        right: auto;
        left: 60px;
        top: 26px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .user-side .user-status {
        right: 60px;
        left: auto;
    }

    .chat-modal .chat-dialog-area .chat-dialog-input-area {
        width: 100%;
        padding: 5px 10px 10px 10px;
    }
    /* #endregion Conversation view */
    /* #region User Information view */
    .chat-modal.info-collapsed.m-display-info .chat-userinfo-area .inner {
        display: block;
    }

    .chat-modal.m-display-info .chat-userinfo-area {
        width: 100%;
        border-left: 0px solid transparent;
    }

    *[dir='rtl'] .chat-modal.m-display-info .chat-userinfo-area {
        border-right: 0px solid transparent;
        border-left: 0px solid transparent;
    }

    .chat-modal.m-display-info .chat-userinfo-area .userinfo-area-collapser {
        display: none;
    }

    .chat-modal .chat-userinfo-area .user-ads-block .collapser-content .item .image-area {
        height: 200px;
    }

    /* #endregion User Information view */
    /* #region Cargo Message */
    .chat-modal .message-cargo .cargo-top-part > * {
        display: table;
        table-layout: fixed;
    }

        .chat-modal .message-cargo .cargo-top-part > * > * {
            display: table-row;
        }

            .chat-modal .message-cargo .cargo-top-part > * > * > * {
                display: table-cell;
            }

                .chat-modal .message-cargo .cargo-top-part > * > * > *.cargo-picture-area {
                    display: table-cell;
                    width: 220px;
                    position: relative;
                    height: 150px;
                }

                .chat-modal .message-cargo .cargo-top-part > * > * > *:last-child {
                    padding-left: 15px;
                }

    *[dir='rtl'] .chat-modal .message-cargo .cargo-top-part > * > * > *:last-child {
        padding-left: 0px;
        padding-right: 15px;
    }

    .chat-modal .message-cargo .delivery-info-block .left-side {
        font-size: 14px;
        display: inline-block;
        width: 220px;
        font-weight: 700;
        color: var(--color-text-basic);
        vertical-align: top;
    }

    .chat-modal .message-cargo .delivery-info-block .right-side {
        margin-top: 0px;
        font-size: 14px;
        display: inline-block;
        width: calc(100% - 220px);
        padding-left: 15px;
        vertical-align: top;
        padding-right: 10px;
    }

    *[dir='rtl'] .chat-modal .message-cargo .delivery-info-block .right-side {
        padding-left: 10px;
        padding-right: 15px;
    }

    .chat-modal .message-cargo .cargo-controls .new-btn {
        display: inline-block;
        width: auto;
        vertical-align: top;
    }

        .chat-modal .message-cargo .cargo-controls .new-btn.btn-link {
            display: inline-block;
            float: right;
        }

        .chat-modal .message-cargo .cargo-controls .new-btn + .new-btn {
            margin-top: 0px;
        }

    *[dir='rtl'] .chat-modal .message-cargo .cargo-controls .new-btn.btn-link {
        float: left;
    }
    /* #endregion Cargo Message */
}

@media (max-width: 750px) {
    .chat-modal .message-cargo .cargo-top-part > * > * > *.cargo-picture-area {
        width: 150px;
    }

    .chat-modal .message-cargo .delivery-info-block .left-side {
        width: 150px;
    }

    .chat-modal .message-cargo .delivery-info-block .right-side {
        width: calc(100% - 150px);
    }
}

@media (max-width: 700px) {
    .chat-modal .message-cargo .cargo-top-part > * {
        display: block;
        width: 100%;
    }

        .chat-modal .message-cargo .cargo-top-part > * > * {
            display: block;
            width: 100%;
        }

            .chat-modal .message-cargo .cargo-top-part > * > * > *.cargo-picture-area {
                display: block;
                width: 100%;
                height: 200px;
            }

            .chat-modal .message-cargo .cargo-top-part > * > * > *:last-child {
                padding-left: 0px;
            }

    *[dir='rtl'] .chat-modal .message-cargo .cargo-top-part > * > * > *:last-child {
        padding-right: 0px;
    }



    .chat-modal .message-cargo .delivery-info-block .left-side {
        display: block;
        width: 100%;
    }

    .chat-modal .message-cargo .delivery-info-block .right-side,
    *[dir='rtl'] .chat-modal .message-cargo .delivery-info-block .right-side {
        display: block;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 10px;
    }



    .chat-modal .message-cargo .cargo-controls .new-btn {
        display: block;
        clear: both;
        float: none;
        width: 100%;
    }

        .chat-modal .message-cargo .cargo-controls .new-btn + .new-btn {
            margin-top: 5px;
        }
}

@media (max-height: 1250px) {
    .chat-modal .chat-window {
        top: calc(50% - 500px);
        height: 1000px;
    }
}

@media (max-height: 1250px) and (max-width: 2100px) {
    .chat-modal .chat-window {
        top: calc(50% - 500px);
        left: calc(50% - 950px);
        height: 1000px;
        width: 1900px;
    }
}

@media (max-width: 2000px) {
    .chat-modal .chat-window {
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        border-radius: var(--radius-0);
    }
}

@media (max-height: 1100px) {
    .chat-modal .chat-window {
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        border-radius: var(--radius-0);
    }
}

@media (max-width: 550px) {
    .custom-popup.chat-status-popup .custom-popup-overlay {
        left: 0px;
    }

    *[dir='rtl'] .custom-popup.chat-status-popup .custom-popup-overlay {
        left: auto;
        right: 0px;
    }

    .custom-popup.chat-status-popup .custom-popup-panel {
        width: 90%;
        left: 5%;
    }

    *[dir='rtl'] .custom-popup.chat-status-popup .custom-popup-panel {
        width: 90%;
        left: auto;
        right: 5%;
    }

    .chat-modal .chat-conversations-area .conversations-selector .custom-popup-overlay {
        left: 0px;
        top: 0px;
    }

    *[dir='rtl'] .chat-modal .chat-conversations-area .conversations-selector .custom-popup-overlay {
        left: 0px;
        right: auto;
        top: 0px;
    }

    .chat-modal .chat-conversations-area .conversations-selector .custom-popup-panel {
        width: 90%;
        left: 5%;
        top: calc(50% - 155px);
    }


    .chat-modal .chat-dialog-area .chat-dialog-header .user-side .dialog-actions-selector .custom-popup-panel {
        width: 90%;
        left: 5%;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-header .user-side .dialog-actions-selector .custom-popup-panel {
        left: auto;
        right: 5%;
    }

    .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-panel {
        width: 90%;
        left: 5%;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .chat-dialog-input-area .input-field .attachment-selector .custom-popup-panel {
        width: 90%;
        left: auto;
        right: 5px;
    }

    .chat-modal .chat-status-popup .custom-popup-btn-value,
    .chat-modal .chat-status-popup .custom-popup-btn .ci-pazar-small {
        display: none;
    }

    .chat-modal .conversations-list .conversation-item .ad-image-container {
        left: 0px;
    }

    *[dir='rtl'] .chat-modal .conversations-list .conversation-item .ad-image-container {
        left: auto;
        right: 0px;
    }

    .chat-modal .conversations-list .conversation-item {
        padding: 20px 0px 20px 0px;
    }

        .chat-modal .conversations-list .conversation-item .date {
            right: 0px;
        }

    *[dir='rtl'] .chat-modal .conversations-list .conversation-item .date {
        right: auto;
        left: 0px;
    }

    .chat-modal .conversations-list .conversation-item .badge {
        right: 0px;
    }

    *[dir='rtl'] .chat-modal .conversations-list .conversation-item .badge {
        right: auto;
        left: 0px;
    }

    .chat-modal .chat-dialog-area .chat-dialog-input-area .attachment-block {
        width: 100%;
    }

    .chat-modal .chat-dialog-area .messages-divider {
        padding-left: 10px;
        padding-right: 10px;
    }

    .chat-modal .chat-dialog-area .message-item {
        padding-left: 10px;
        padding-right: 10px;
    }

        .chat-modal .chat-dialog-area .message-item .message-avatar {
            left: 10px;
        }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-avatar {
        left: auto;
        right: 10px;
    }

    .chat-modal .chat-dialog-area .message-item .message-avatar .user-avatar {
        width: 42px;
        height: 42px;
    }

        .chat-modal .chat-dialog-area .message-item .message-avatar .user-avatar i {
            font-size: 24px;
        }

    .chat-modal .chat-dialog-area .message-item .user-name {
        padding-left: 50px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .user-name {
        padding-left: 0px;
        padding-right: 50px;
    }

    .chat-modal .chat-dialog-area .message-item .message-date {
        padding-left: 50px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-date {
        padding-left: 0px;
        padding-right: 50px;
    }

    .chat-modal .chat-dialog-area .message-item .user-name .status-badge {
        display: none;
    }

    .chat-modal .chat-dialog-area .message-item .message-date .status-badge {
        display: inline-block;
        margin-left: 0px;
        margin-right: 5px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-date .status-badge {
        margin-left: 5px;
        margin-right: 0px;
    }

    .chat-modal .chat-dialog-area .message-item .message-text {
        padding-left: 50px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-text {
        padding-left: 0px;
        padding-right: 50px;
    }

    .chat-modal .chat-dialog-area .message-item .message-photo {
        margin-left: 50px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-photo {
        margin-left: 0px;
        margin-right: 50px;
    }

    .chat-modal .chat-dialog-area .message-item .message-file {
        margin-left: 50px;
        width: calc(100% - 50px);
        max-width: 420px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-file {
        margin-left: 0px;
        margin-right: 50px;
    }

    .chat-modal .chat-dialog-area .message-item .message-file .message-file-icon {
        width: 45px;
        top: 0px;
        left: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        height: 100%;
        font-size: 36px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-file .message-file-icon {
        right: 0px;
        left: auto;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .chat-modal .chat-dialog-area .message-item .message-file .message-file-icon .ci-pazar {
        margin-left: 5px;
        margin-top: 25px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-file .message-file-icon .ci-pazar {
        margin-left: 0px;
        margin-right: 5px;
    }

    .chat-modal .chat-dialog-area .message-item .message-file .file-name {
        padding-left: 60px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-file .file-name {
        padding-left: 0px;
        padding-right: 60px;
    }

    .chat-modal .chat-dialog-area .message-item .message-file .file-size {
        padding-left: 60px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-file .file-size {
        padding-left: 0px;
        padding-right: 60px;
    }

    .chat-modal .chat-dialog-area .message-item .message-file a {
        margin-left: 60px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-file a {
        margin-left: 0px;
        margin-right: 60px;
    }

    .chat-modal .chat-dialog-area .message-item .message-location {
        margin-left: 50px;
        width: calc(100% - 50px);
        max-width: 420px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-location {
        margin-left: 0px;
        margin-right: 50px;
    }

    .chat-modal .chat-dialog-area .message-item .message-location .message-location-icon {
        width: 45px;
        top: 0px;
        left: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        height: 100%;
        font-size: 36px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-location .message-location-icon {
        right: 0px;
        left: auto;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .chat-modal .chat-dialog-area .message-item .message-location .message-location-icon .ci-pazar {
        margin-left: 5px;
        margin-top: 26px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-location .message-location-icon .ci-pazar {
        margin-left: 0px;
        margin-right: 5px;
    }

    .chat-modal .chat-dialog-area .message-item .message-location .location-address {
        padding-left: 60px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-location .location-address {
        padding-left: 0px;
        padding-right: 60px;
    }

    .chat-modal .chat-dialog-area .message-item .message-location .location-caption {
        padding-left: 60px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-location .location-caption {
        padding-left: 0px;
        padding-right: 60px;
    }

    .chat-modal .chat-dialog-area .message-item .message-location a {
        margin-left: 60px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-location a {
        margin-left: 0px;
        margin-right: 60px;
    }

    .chat-modal .chat-dialog-area .message-item .message-error {
        padding-left: 32px;
        color: var(--color-text-danger);
        position: relative;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-error {
        padding-left: 0px;
        padding-right: 32px;
    }

    .chat-modal .chat-dialog-area .message-item .message-error span {
        padding-left: 5px;
        padding-right: 5px;
    }

    .chat-modal .chat-dialog-area .message-item .message-error .marker {
        position: absolute;
        left: 0px;
        top: calc(50% - 14px);
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .message-item .message-error .marker {
        left: auto;
        right: 0px;
    }

    .chat-modal .chat-dialog-area .message-item .message-error button {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .chat-modal .chat-dialog-area .empty-block h3 {
        margin-top: 40px;
        font-size: 24px;
    }

    .chat-modal .chat-dialog-area .empty-block .icon-block .ci-messages {
        font-size: 76px;
    }

    .chat-modal .chat-dialog-area .empty-block .icon-block .ci-arrow-corner {
        font-size: 44px;
    }

    .chat-modal .chat-dialog-area .empty-block .recent-ads-container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

        .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card {
            width: 100%;
        }

            .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-caption {
                font-size: 16px;
                padding-top: 20px;
            }

    .chat-modal .chat-userinfo-area .user-ads-block .collapser-content .item .image-area {
        height: 100px;
    }

    /* #region Cargo message */
    .chat-modal .message-item .message-cargo {
        margin-left: 50px;
    }

    *[dir='rtl'] .chat-modal .message-item .message-cargo {
        margin-left: 0px;
        margin-right: 50px;
    }


    .chat-modal .message-cargo .cargo-top-part {
        padding: 0px;
    }

    .chat-modal .message-cargo .cargo-picture-container {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .chat-modal .message-cargo .order-info-block .order-number {
        position: absolute;
        top: 3px;
        left: 3px;
        border: 0px none transparent;
        margin: 0px;
        padding: 5px;
        color: #FFFFFF;
        background-color: rgba(33, 37, 41, 0.8);
        border-radius: var(--radius-4);
    }

    *[dir='rtl'] .chat-modal .message-cargo .order-info-block .order-number {
        left: auto;
        right: 3px;
        border: 0px none transparent;
        padding: 5px;
        margin: 0px;
    }

    .chat-modal .message-cargo .order-info-block .order-number .ci-text-muted,
    .chat-modal .message-cargo .order-info-block .order-number .ci-text-base {
        color: #FFFFFF !important;
    }


    .chat-modal .message-cargo .order-info-block .order-date {
        position: absolute;
        top: 170px;
        left: 3px;
        border: 0px none transparent;
        margin: 0px;
        padding: 5px;
        color: #FFFFFF;
        background-color: rgba(33, 37, 41, 0.8);
        border-radius: var(--radius-4);
    }

    *[dir='rtl'] .chat-modal .message-cargo .order-info-block .order-date {
        left: auto;
        right: 3px;
    }

    .chat-modal .message-cargo .order-info-block .order-date .ci-text-muted,
    .chat-modal .message-cargo .order-info-block .order-date .ci-text-base {
        color: #FFFFFF !important;
    }

    .chat-modal .message-cargo .cargo-top-part > * > * > *:last-child {
        padding: 10px;
    }

    .chat-modal .message-cargo .order-info-block {
        margin-top: 0px;
    }

    .chat-modal .message-cargo h4 {
        margin-top: 0px;
        margin-bottom: 15px;
    }

    /* #endregion Cargo message */
}

@media (max-width: 400px) {
    .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .chat-button {
        font-size: 36px;
        right: 10px;
        top: calc(50% - 18px);
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .chat-button {
        right: auto;
        left: 10px;
    }

    .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-details,
    .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .breadcrumbs {
        padding-right: 58px;
        padding-left: 95px;
    }

    *[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-details,
    *[dir='rtl'] .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .breadcrumbs {
        padding-right: 95px;
        padding-left: 58px;
    }

    .chat-modal .chat-dialog-area .empty-block .recent-ads-container .goods-card .ad-image-container {
        width: 75px;
    }

    .chat-modal .message-cargo h4 {
        font-size: 14px;
        font-weight: 700;
    }

    .chat-modal .message-cargo .price-block .price {
        font-size: 12px;
    }

    .chat-modal .message-cargo .price-block {
        font-size: 12px;
    }
}

@media (max-width: 350px) {
    .chat-modal .chat-userinfo-area .user-ads-block .collapser-content .item:nth-child(2n) {
        margin-left: 0px;
    }

    *[dir='rtl'] .chat-modal .chat-userinfo-area .user-ads-block .collapser-content .item:nth-child(2n) {
        margin-left: 0px;
        margin-right: 0px;
    }

    .chat-modal .chat-userinfo-area .user-ads-block .collapser-content .item .image-area {
        height: 200px;
    }

    .chat-modal .chat-userinfo-area .user-ads-block .collapser-content .item {
        width: 100%;
    }
}
/* #endregion ====================================== /Chat ============================================= */
/* #region ========================= Modal: Manage the ad (not signed in) ============================== */
.modal-custom.manage-ad-nosignin .modal-window {
    top: calc(50% - 370px);
    width: 700px;
    left: calc(50% - 350px);
}

.modal-custom.manage-ad-nosignin label.boost,
.modal-custom.manage-ad-nosignin label.edit-renew,
.modal-custom.manage-ad-nosignin label.remove {
    display: block;
    width: 100%;
    position: relative;
}

.modal-custom.manage-ad-nosignin label + label {
    margin-top: 10px;
}

.modal-custom.manage-ad-nosignin label input {
    display: none;
}

.modal-custom.manage-ad-nosignin .panel {
    display: block;
    width: 100%;
    position: relative;
    border-radius: var(--radius-4);
    padding: 20px 145px 25px 60px;
    background-color: #F2F2F2;
    min-height: 130px;
}

*[dir='rtl'] .modal-custom.manage-ad-nosignin .panel {
    padding: 20px 60px 25px 145px;
}

.modal-custom.manage-ad-nosignin input[type='radio']:checked + .panel {
    background-color: #E6F4ED;
}

.modal-custom.manage-ad-nosignin label .icon {
    display: block;
    position: absolute;
    top: calc(50% - 11px);
    left: 20px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #DDDDDD;
}

*[dir='rtl'] .modal-custom.manage-ad-nosignin label .icon {
    right: 20px;
    left: auto;
}

.modal-custom.manage-ad-nosignin label input[type='radio']:checked + .panel .icon {
    background-color: var(--color-bg-primary);
}

.modal-custom.manage-ad-nosignin label .icon .ci-pazar-small {
    font-size: 18px;
    font-size: 14px;
    margin-left: 4px;
    margin-top: 4px;
    display: none;
}

.modal-custom.manage-ad-nosignin label input[type='radio']:checked + .panel .icon .ci-pazar-small {
    display: inline-block;
}

.modal-custom.manage-ad-nosignin label .title {
    font-size: 18px;
    font-weight: 500;
    display: block;
    width: 100%;
    margin-bottom: 10px;
    line-height: 26px;
}

.modal-custom.manage-ad-nosignin .image-container {
    display: block;
    position: absolute;
    top: calc(50% - 55px);
    right: 14px;
    width: 110px;
    height: 110px;
}

*[dir='rtl'] .modal-custom.manage-ad-nosignin .image-container {
    right: auto;
    left: 14px;
}

.modal-custom.manage-ad-nosignin .image-container .inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}


.modal-custom.manage-ad-nosignin .image-container .clipart-cloud-1,
.modal-custom.manage-ad-nosignin .image-container .clipart-cloud-2,
.modal-custom.manage-ad-nosignin .image-container .clipart-cloud-3,
.modal-custom.manage-ad-nosignin .image-container .clipart-cloud-4,
.modal-custom.manage-ad-nosignin .image-container .clipart-cloud-5,
.modal-custom.manage-ad-nosignin .image-container .clipart-cloud-6,
.modal-custom.manage-ad-nosignin .image-container .clipart-cloud-7,
.modal-custom.manage-ad-nosignin .image-container .clipart-cloud-8,
.modal-custom.manage-ad-nosignin .image-container .clipart-cloud-9,
.modal-custom.manage-ad-nosignin .image-container .clipart-cloud-10 {
    display: block;
    position: absolute;
    border-radius: 50%;
    background: #E2E2E2;
}


.modal-custom.manage-ad-nosignin input[type='radio']:checked + .panel .image-container .clipart-cloud-1,
.modal-custom.manage-ad-nosignin input[type='radio']:checked + .panel .image-container .clipart-cloud-2,
.modal-custom.manage-ad-nosignin input[type='radio']:checked + .panel .image-container .clipart-cloud-3,
.modal-custom.manage-ad-nosignin input[type='radio']:checked + .panel .image-container .clipart-cloud-4,
.modal-custom.manage-ad-nosignin input[type='radio']:checked + .panel .image-container .clipart-cloud-5,
.modal-custom.manage-ad-nosignin input[type='radio']:checked + .panel .image-container .clipart-cloud-6,
.modal-custom.manage-ad-nosignin input[type='radio']:checked + .panel .image-container .clipart-cloud-7,
.modal-custom.manage-ad-nosignin input[type='radio']:checked + .panel .image-container .clipart-cloud-8,
.modal-custom.manage-ad-nosignin input[type='radio']:checked + .panel .image-container .clipart-cloud-9,
.modal-custom.manage-ad-nosignin input[type='radio']:checked + .panel .image-container .clipart-cloud-10 {
    background-color: #d3e4db;
}

.modal-custom.manage-ad-nosignin .boost .image-container .clipart-cloud-1 {
    width: 32%;
    height: 32%;
    top: 15%;
    left: 3%;
    animation: manage-ad-boost-cloud-1 1.4s ease-in-out alternate infinite;
}

.modal-custom.manage-ad-nosignin .boost .image-container .clipart-cloud-2 {
    width: 26%;
    height: 26%;
    top: 4%;
    left: 24%;
    animation: manage-ad-boost-cloud-2 1.5s ease-in-out alternate infinite;
}

.modal-custom.manage-ad-nosignin .boost .image-container .clipart-cloud-3 {
    width: 28%;
    height: 28%;
    top: 9%;
    left: 37%;
    animation: manage-ad-boost-cloud-3 1.8s ease-in-out alternate infinite;
}

.modal-custom.manage-ad-nosignin .boost .image-container .clipart-cloud-4 {
    width: 44%;
    height: 44%;
    top: 6%;
    left: 51%;
    animation: manage-ad-boost-cloud-4 1.5s ease-in-out alternate infinite;
}

.modal-custom.manage-ad-nosignin .boost .image-container .clipart-cloud-5 {
    width: 25%;
    height: 25%;
    top: 34%;
    left: 75%;
    animation: manage-ad-boost-cloud-5 1.2s ease-in-out alternate infinite;
}

.modal-custom.manage-ad-nosignin .boost .image-container .clipart-cloud-6 {
    width: 30%;
    height: 30%;
    top: 50%;
    left: 64%;
    animation: manage-ad-boost-cloud-6 1.6s ease-in-out alternate infinite;
}

.modal-custom.manage-ad-nosignin .boost .image-container .clipart-cloud-7 {
    width: 47%;
    height: 47%;
    top: 51%;
    left: 37%;
    animation: manage-ad-boost-cloud-7 1.5s ease-in-out alternate infinite;
}

.modal-custom.manage-ad-nosignin .boost .image-container .clipart-cloud-8 {
    width: 32%;
    height: 32%;
    top: 61%;
    left: 18%;
    animation: manage-ad-boost-cloud-8 1.2s ease-in-out alternate infinite;
}

.modal-custom.manage-ad-nosignin .boost .image-container .clipart-cloud-9 {
    width: 42%;
    height: 42%;
    top: 37%;
    left: -2%;
    animation: manage-ad-boost-cloud-9 1.5s ease-in-out alternate infinite;
}

.modal-custom.manage-ad-nosignin .boost .image-container .clipart-cloud-10 {
    width: 60%;
    height: 60%;
    top: 17%;
    left: 21%;
    animation: manage-ad-boost-cloud-10 1.5s ease-in-out alternate infinite;
}

@keyframes manage-ad-boost-cloud-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(8%, 8%);
    }
}

@keyframes manage-ad-boost-cloud-2 {
    from {
        transform: translate(1%, 8%);
    }

    to {
        transform: translate(-1%, -8%);
    }
}

@keyframes manage-ad-boost-cloud-3 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@keyframes manage-ad-boost-cloud-4 {
    from {
        transform: translate(6%, -6%);
    }

    to {
        transform: translate(-6%, 6%);
    }
}

@keyframes manage-ad-boost-cloud-5 {
    from {
        transform: translate(-7%, 0%);
    }

    to {
        transform: translate(5%, 0%);
    }
}


@keyframes manage-ad-boost-cloud-6 {
    from {
        transform: translate(6%, 2%);
    }

    to {
        transform: translate(-6%, -2%);
    }
}

@keyframes manage-ad-boost-cloud-7 {
    from {
        transform: translate(3%, 7%);
    }

    to {
        transform: translate(-3%, -7%);
    }
}

@keyframes manage-ad-boost-cloud-8 {
    from {
        transform: translate(3%, -7%);
    }

    to {
        transform: translate(-3%, 7%);
    }
}

@keyframes manage-ad-boost-cloud-9 {
    from {
        transform: translate(8%, 0%);
    }

    to {
        transform: translate(-7%, 0%);
    }
}

.modal-custom.manage-ad-nosignin .image-container .clipart-rocket {
    display: block;
    position: absolute;
    top: 20%;
    left: 23%;
    width: 60%;
    height: 60%;
    background-image: url('../../Content/Images/clipart-rocket.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-color: transparent;
    animation: manage-ad-boost-rocket 1.2s ease-in-out infinite alternate;
}

@keyframes manage-ad-boost-rocket {
    from {
        transform: translate(0%, -2%);
    }

    to {
        transform: translate(0%, 2%);
    }
}

.modal-custom.manage-ad-nosignin .edit-renew .image-container .clipart-cloud-1 {
    width: 27%;
    height: 27%;
    top: 17%;
    left: 13%;
    animation: manage-ad-boost-cloud-1 1.4s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .edit-renew .image-container .clipart-cloud-2 {
    width: 33%;
    height: 33%;
    top: 6%;
    left: 34%;
    animation: manage-ad-boost-cloud-2 1.6s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .edit-renew .image-container .clipart-cloud-3 {
    width: 23%;
    height: 23%;
    top: 16%;
    left: 55%;
    animation: manage-ad-boost-cloud-3 1.3s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .edit-renew .image-container .clipart-cloud-4 {
    width: 38%;
    height: 38%;
    top: 21%;
    left: 63%;
    animation: manage-ad-boost-cloud-4 1.5s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .edit-renew .image-container .clipart-cloud-5 {
    width: 28%;
    height: 28%;
    top: 45%;
    left: 64%;
    animation: manage-ad-boost-cloud-5 1.7s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .edit-renew .image-container .clipart-cloud-6 {
    width: 33%;
    height: 33%;
    top: 58%;
    left: 59%;
    animation: manage-ad-boost-cloud-6 1.4s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .edit-renew .image-container .clipart-cloud-7 {
    width: 38%;
    height: 38%;
    top: 58%;
    left: 29%;
    animation: manage-ad-boost-cloud-7 1.7s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .edit-renew .image-container .clipart-cloud-8 {
    width: 32%;
    height: 32%;
    top: 58%;
    left: 7%;
    animation: manage-ad-boost-cloud-8 1.3s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .edit-renew .image-container .clipart-cloud-9 {
    width: 36%;
    height: 36%;
    top: 38%;
    left: 0%;
    animation: manage-ad-boost-cloud-9 1.8s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .edit-renew .image-container .clipart-cloud-10 {
    width: 46%;
    height: 46%;
    top: 28%;
    left: 26%;
}

@keyframes manage-ad-boost-cloud-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(8%, 8%);
    }
}

@keyframes manage-ad-boost-cloud-2 {
    from {
        transform: translate(0%, 7%);
    }

    to {
        transform: translate(0%, -7%);
    }
}

@keyframes manage-ad-boost-cloud-3 {
    from {
        transform: translate(4%, -8%);
    }

    to {
        transform: translate(-4%, 7%);
    }
}

@keyframes manage-ad-boost-cloud-4 {
    from {
        transform: translate(-4%, 4%);
    }

    to {
        transform: translate(4%, -4%);
    }
}

@keyframes manage-ad-boost-cloud-5 {
    from {
        transform: translate(12%, 0%);
    }

    to {
        transform: translate(-12%, 0%);
    }
}

@keyframes manage-ad-boost-cloud-6 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(-5%, -5%);
    }
}

@keyframes manage-ad-boost-cloud-7 {
    from {
        transform: translate(0%, -8%);
    }

    to {
        transform: translate(0%, 8%);
    }
}

@keyframes manage-ad-boost-cloud-8 {
    from {
        transform: translate(-4%, 4%);
    }

    to {
        transform: translate(4%, -4%);
    }
}

@keyframes manage-ad-boost-cloud-9 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(9%, 0%);
    }
}

.modal-custom.manage-ad-nosignin .edit-renew .image-container .clipart-edit-ad {
    width: 76%;
    height: 76%;
    top: 8%;
    left: 17%;
    background-image: url('../../Content/Images/clipart-edit-ad.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    display: block;
}

.modal-custom.manage-ad-nosignin .remove .image-container .clipart-cloud-1 {
    width: 30%;
    height: 30%;
    top: 14%;
    left: 3%;
    animation: manage-ad-remove-cloud-1 1.3s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .remove .image-container .clipart-cloud-2 {
    width: 38%;
    height: 38%;
    top: 2%;
    left: 24%;
    animation: manage-ad-remove-cloud-2 1.6s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .remove .image-container .clipart-cloud-3 {
    width: 30%;
    height: 30%;
    top: 9%;
    left: 54%;
    animation: manage-ad-remove-cloud-3 1.4s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .remove .image-container .clipart-cloud-4 {
    width: 40%;
    height: 40%;
    top: 17%;
    left: 60%;
    animation: manage-ad-remove-cloud-4 1.8s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .remove .image-container .clipart-cloud-5 {
    width: 30%;
    height: 30%;
    top: 45%;
    left: 70%;
    animation: manage-ad-remove-cloud-5 1.3s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .remove .image-container .clipart-cloud-6 {
    width: 50%;
    height: 50%;
    top: 47%;
    left: 38%;
    animation: manage-ad-remove-cloud-6 1.5s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .remove .image-container .clipart-cloud-7 {
    width: 30%;
    height: 30%;
    top: 64%;
    left: 17%;
    animation: manage-ad-remove-cloud-7 1.5s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .remove .image-container .clipart-cloud-8 {
    width: 42%;
    height: 42%;
    top: 38%;
    left: 1%;
    animation: manage-ad-remove-cloud-8 1.3s ease-in-out infinite alternate;
}

.modal-custom.manage-ad-nosignin .remove .image-container .clipart-cloud-9 {
    width: 52%;
    height: 52%;
    top: 23%;
    left: 25%;
}

@keyframes manage-ad-remove-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes manage-ad-remove-cloud-2 {
    from {
        transform: translate(0%, 7%);
    }

    to {
        transform: translate(0%, -7%);
    }
}

@keyframes manage-ad-remove-cloud-3 {
    from {
        transform: translate(-5%, 7%);
    }

    to {
        transform: translate(5%, -7%);
    }
}

@keyframes manage-ad-remove-cloud-4 {
    from {
        transform: translate(7%, -7%);
    }

    to {
        transform: translate(-4%, 7%);
    }
}

@keyframes manage-ad-remove-cloud-5 {
    from {
        transform: translate(-7%, -7%);
    }

    to {
        transform: translate(4%, 7%);
    }
}

@keyframes manage-ad-remove-cloud-6 {
    from {
        transform: translate(2%, 5%);
    }

    to {
        transform: translate(-2%, -5%);
    }
}

@keyframes manage-ad-remove-cloud-7 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes manage-ad-remove-cloud-8 {
    from {
        transform: translate(-5%, 0%);
    }

    to {
        transform: translate(8%, 0%);
    }
}

.modal-custom.manage-ad-nosignin .remove .image-container .clipart-trashcan {
    width: 52%;
    height: 52%;
    top: 23%;
    left: 23%;
    position: absolute;
    display: block;
    background-image: url('../../Content/Images/clipart-trashcan.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: contain;
}

.modal-custom.manage-ad-nosignin h4 {
    font-size: 18px;
    text-align: center;
    font-weight: 400;
    color: var(--color-text-basic);
    margin-top: 20px;
    margin-bottom: 20px;
}

.modal-custom.manage-ad-nosignin .confirmation-area {
    display: block;
    font-size: 0px;
}

.modal-custom.manage-ad-nosignin .left-side,
.modal-custom.manage-ad-nosignin .right-side {
    display: inline-block;
    width: 50%;
    font-size: 14px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    vertical-align: top;
    position: relative;
    margin-bottom: 20px;
}

.modal-custom.manage-ad-nosignin .left-side {
    border-right: 1px solid #DDDDDD;
    padding-right: 50px;
}

*[dir='rtl'] .modal-custom.manage-ad-nosignin .left-side {
    border-right: 0px none transparent;
    border-left: 1px solid #DDDDDD;
    padding-left: 50px;
    padding-right: 0px;
}

.modal-custom.manage-ad-nosignin .right-side {
    padding-left: 50px;
    padding-right: 0px;
}

*[dir='rtl'] .modal-custom.manage-ad-nosignin .right-side {
    padding-left: 0px;
    padding-right: 50px;
}

.modal-custom.manage-ad-nosignin .divider-label {
    position: absolute;
    top: 30px;
    left: -27px;
    background-color: #FFFFFF;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--color-text-basic);
    padding: 10px 0px 10px 0px;
    text-align: center;
    width: 52px;
}

*[dir='rtl'] .modal-custom.manage-ad-nosignin .divider-label {
    right: -27px;
    left: auto;
}

@media (max-width: 728px) {
    .modal-custom.manage-ad-nosignin .modal-window {
        top: 0px;
        left: 0px;
        max-width: 100%;
        width: 100%;
    }

        .modal-custom.manage-ad-nosignin .modal-window .modal-body {
            height: 100%;
        }

    .modal-custom.manage-ad-nosignin .left-side,
    .modal-custom.manage-ad-nosignin .right-side {
        display: block;
        border: 0px none transparent !important;
        width: 100%;
        padding-left: 40px;
        padding-right: 40px;
    }

    .modal-custom.manage-ad-nosignin .left-side {
        border-bottom: 1px solid #F2F2F2 !important;
        padding-bottom: 40px;
    }

    .modal-custom.manage-ad-nosignin .divider-label {
        top: -39px;
        left: calc(50% - 20px);
    }

    *[dir='rtl'] .modal-custom.manage-ad-nosignin .divider-label {
        left: auto;
        right: calc(50% - 20px);
    }

    *[dir='rtl'] .modal-custom.manage-ad-nosignin .left-side,
    *[dir='rtl'] .modal-custom.manage-ad-nosignin .right-side {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 500px) {
    .modal-custom.manage-ad-nosignin .image-container {
        width: 90px;
        height: 90px;
    }

    .modal-custom.manage-ad-nosignin .panel {
        padding: 20px 125px 25px 60px;
    }

    *[dir='rtl'] .modal-custom.manage-ad-nosignin .panel {
        padding: 20px 60px 25px 125px;
    }
}

@media (max-width: 400px) {
    .modal-custom.manage-ad-nosignin .left-side,
    .modal-custom.manage-ad-nosignin .right-side {
        display: block;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    *[dir='rtl'] .modal-custom.manage-ad-nosignin .left-side,
    *[dir='rtl'] .modal-custom.manage-ad-nosignin .right-side {
        padding-left: 0px;
        padding-right: 0px;
    }

    .modal-custom.manage-ad-nosignin .panel {
        padding: 15px 15px 15px 40px;
    }

    *[dir='rtl'] .modal-custom.manage-ad-nosignin .panel {
        padding: 15px 40px 15px 15px;
    }

    .modal-custom.manage-ad-nosignin label .icon {
        left: 10px;
    }

    *[dir='rtl'] .modal-custom.manage-ad-nosignin label .icon {
        left: auto;
        right: 10px;
    }

    .modal-custom.manage-ad-nosignin .image-container {
        display: none;
    }

    .modal-custom.manage-ad-nosignin .modal-footer .new-btn {
        min-width: 0px;
    }

    .modal-custom.manage-ad-nosignin label .title {
        font-size: 14px;
    }
}

/* #endregion ===================== /Modal: Manage the ad (not signed in) ============================== */
/* #region ================================ Modal: Ad delete success =================================== */
.modal-custom.delete-ad-success .modal-window {
    top: calc(50% - 223px);
    width: 650px;
    left: calc(50% - 325px);
}

.modal-custom.delete-ad-success h4 {
    font-size: 24px;
    color: var(--color-text-basic);
    font-weight: 400;
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 100px;
    width: 100%;
}

.modal-custom.delete-ad-success .image-container {
    width: 150px;
    height: 150px;
    display: block;
    margin: 10px auto 20px auto;
}

    .modal-custom.delete-ad-success .image-container .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .modal-custom.delete-ad-success .image-container .clipart-cloud-1,
    .modal-custom.delete-ad-success .image-container .clipart-cloud-2,
    .modal-custom.delete-ad-success .image-container .clipart-cloud-3,
    .modal-custom.delete-ad-success .image-container .clipart-cloud-4,
    .modal-custom.delete-ad-success .image-container .clipart-cloud-5,
    .modal-custom.delete-ad-success .image-container .clipart-cloud-6,
    .modal-custom.delete-ad-success .image-container .clipart-cloud-7,
    .modal-custom.delete-ad-success .image-container .clipart-cloud-8,
    .modal-custom.delete-ad-success .image-container .clipart-cloud-9,
    .modal-custom.delete-ad-success .image-container .clipart-cloud-10 {
        display: block;
        position: absolute;
        border-radius: 50%;
        background-color: #F2F2F2;
    }

    .modal-custom.delete-ad-success .image-container .clipart-cloud-1 {
        width: 28%;
        height: 28%;
        top: 12%;
        left: 4%;
        animation: delete-ad-success-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .modal-custom.delete-ad-success .image-container .clipart-cloud-2 {
        width: 35%;
        height: 35%;
        top: 13%;
        left: 21%;
        animation: delete-ad-success-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .modal-custom.delete-ad-success .image-container .clipart-cloud-3 {
        width: 38%;
        height: 38%;
        top: 3%;
        left: 39%;
        animation: delete-ad-success-cloud-3 1.2s ease-in-out infinite alternate;
    }

    .modal-custom.delete-ad-success .image-container .clipart-cloud-4 {
        width: 30%;
        height: 30%;
        top: 17%;
        left: 63%;
        animation: delete-ad-success-cloud-4 1.5s ease-in-out infinite alternate;
    }

    .modal-custom.delete-ad-success .image-container .clipart-cloud-5 {
        width: 25%;
        height: 25%;
        top: 39%;
        left: 75%;
        animation: delete-ad-success-cloud-5 1.7s ease-in-out infinite alternate;
    }

    .modal-custom.delete-ad-success .image-container .clipart-cloud-6 {
        width: 40%;
        height: 40%;
        top: 51%;
        left: 50%;
        animation: delete-ad-success-cloud-6 1.6s ease-in-out infinite alternate;
    }

    .modal-custom.delete-ad-success .image-container .clipart-cloud-7 {
        width: 30%;
        height: 30%;
        top: 68%;
        left: 31%;
        animation: delete-ad-success-cloud-7 1.2s ease-in-out infinite alternate;
    }

    .modal-custom.delete-ad-success .image-container .clipart-cloud-8 {
        width: 40%;
        height: 40%;
        top: 48%;
        left: 8%;
        animation: delete-ad-success-cloud-8 1.5s ease-in-out infinite alternate;
    }

    .modal-custom.delete-ad-success .image-container .clipart-cloud-9 {
        width: 33%;
        height: 33%;
        top: 33%;
        left: 0%;
        animation: delete-ad-success-cloud-9 1.7s ease-in-out infinite alternate;
    }

    .modal-custom.delete-ad-success .image-container .clipart-cloud-10 {
        width: 50%;
        height: 50%;
        top: 23%;
        left: 30%;
    }

@keyframes delete-ad-success-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes delete-ad-success-cloud-2 {
    from {
        transform: translate(1%, 4%);
    }

    to {
        transform: translate(-1%, -9%);
    }
}

@keyframes delete-ad-success-cloud-3 {
    from {
        transform: translate(-1%, -9%);
    }

    to {
        transform: translate(1%, 4%);
    }
}

@keyframes delete-ad-success-cloud-4 {
    from {
        transform: translate(-6%, 6%);
    }

    to {
        transform: translate(6%, -6%);
    }
}

@keyframes delete-ad-success-cloud-5 {
    from {
        transform: translate(9%, 0%);
    }

    to {
        transform: translate(-9%, 0%);
    }
}

@keyframes delete-ad-success-cloud-6 {
    from {
        transform: translate(-9%, -6%);
    }

    to {
        transform: translate(9%, 6%);
    }
}

@keyframes delete-ad-success-cloud-7 {
    from {
        transform: translate(0%, 8%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@keyframes delete-ad-success-cloud-8 {
    from {
        transform: translate(6%, -7%);
    }

    to {
        transform: translate(-6%, 7%);
    }
}

@keyframes delete-ad-success-cloud-9 {
    from {
        transform: translate(-5%, 0%);
    }

    to {
        transform: translate(5%, 0%);
    }
}

.modal-custom.delete-ad-success .image-container .clipart-ok {
    width: 50%;
    height: 50%;
    top: 19%;
    left: 24%;
    position: absolute;
    display: block;
    background-image: url("../../Content/Images/clipart-ok.svg");
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    animation: modal-ok-clipart 1.2s ease-in-out infinite alternate;
}

@keyframes modal-ok-clipart {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

.modal-custom.delete-ad-success .image-container .clipart-shadow {
    width: 40%;
    height: 7%;
    top: 75%;
    left: 29%;
    border-radius: 50%;
    display: block;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    animation: modal-ok-shadow-clipart 1.2s ease-in-out infinite alternate;
}

@keyframes modal-ok-shadow-clipart {
    from {
        opacity: 0.4;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 728px) {
    .modal-custom.delete-ad-success .modal-window {
        top: 0px;
        left: 0px;
        max-width: 100%;
        width: 100%;
    }

        .modal-custom.delete-ad-success .modal-window .modal-body {
            height: 100%;
        }
}

@media (max-width: 400px) {
    .modal-custom.delete-ad-success h4 {
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 20px;
        font-size: 18px;
    }
}
/* #endregion ============================ /Modal: Ad delete success =================================== */
/* #region ================================ Modal DropUp: Ad remove ==================================== */
.dropup-modal.remove-ad .row-clipart {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    .dropup-modal.remove-ad .row-clipart .clipart-remove {
        width: 150px;
        height: 150px;
    }

.dropup-modal.remove-ad .row-title {
    width: 100%;
    padding-inline: var(--gap-64);
    text-align: center;
}

    .dropup-modal.remove-ad .row-title h2 {
        font-size: 18px;
        line-height: 130%;
        color: var(--color-text-basic);
        font-weight: 700;
        padding: 0px;
        margin: 0px;
    }

.dropup-modal.remove-ad .row-description {
    width: 100%;
    padding-inline: var(--gap-64);
    text-align: center;
    font-size: 14px;
    line-height: 130%;
    color: var(--color-text-muted);
    padding-block-start: var(--gap-16);
    padding-block-end: var(--gap-32);
}

.dropup-modal.remove-ad.clean-cart .row-description {
    text-align: center;
    margin-block-start: var(--gap-16);
}

    .dropup-modal.remove-ad.clean-cart .row-description .flex-checkbox {
        display: inline-block;
        width: auto;
    }

.dropup-modal.remove-ad .modal-footer {
    gap: var(--gap-32);
}

@media (max-width: 500px) {
    .dropup-modal.remove-ad .row-description, .dropup-modal.remove-ad .row-title {
        padding-inline: var(--gap-24);
    }
}
/* #endregion ============================/ Modal DropUp: Ad remove ==================================== */
/* #region ================================ Modal DropUp: Ad Renew ===================================== */
.dropup-modal.renew-ad .row-clipart {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    .dropup-modal.renew-ad .row-clipart .clipart-renew-ad {
        width: 150px;
        height: 150px;
    }

.dropup-modal.renew-ad .row-title {
    width: 100%;
    padding-inline: var(--gap-64);
    text-align: center;
}

    .dropup-modal.renew-ad .row-title h2 {
        font-size: 18px;
        line-height: 130%;
        color: var(--color-text-basic);
        font-weight: 700;
        padding: 0px;
        margin: 0px;
    }

.dropup-modal.renew-ad .row-description {
    width: 100%;
    padding-inline: var(--gap-64);
    text-align: center;
    font-size: 14px;
    line-height: 130%;
    color: var(--color-text-muted);
    padding-block-start: var(--gap-16);
    padding-block-end: var(--gap-32);
}

.dropup-modal.renew-ad .modal-footer {
    gap: var(--gap-32);
}

@media (max-width: 500px) {
    .dropup-modal.renew-ad .row-description, .dropup-modal.renew-ad .row-title {
        padding-inline: var(--gap-24);
    }
}
/* #endregion ============================/ Modal DropUp: Ad Renew ===================================== */
/* #region ============================= Modal Dropup: Iute Pending ==================================== */
.dropup-modal.iute-loan-pending .title {
    padding-inline: var(--gap-24);
    text-align: center;
    color: var(--color-text-basic);
    padding-block-end: var(--gap-24);
    gap: var(--gap-16);
    display: flex;
    flex-direction: column;
}

    .dropup-modal.iute-loan-pending .title h2 {
        font-size: 18px;
        line-height: 130%;
        font-weight: 700;
    }

    .dropup-modal.iute-loan-pending .title p {
        font-size: 16px;
        line-height: 130%;
        font-weight: 500;
    }

.dropup-modal.iute-loan-pending .row-qr-code {
    padding-inline: var(--gap-24);
    text-align: center;
}

    .dropup-modal.iute-loan-pending .row-qr-code img {
        width: 230px;
        height: 230px;
    }

.dropup-modal.iute-loan-pending .row-link {
    width: 100%;
    text-align: center;
    padding-block-start: var(--gap-16);
    padding-block-end: var(--gap-32);
    font-size: 16px;
    font-weight: 500;
}

    .dropup-modal.iute-loan-pending .row-link a {
        text-decoration: underline;
        color: var(--color-text-primary);
    }

@media (max-width: 700px) {
    .dropup-modal.iute-loan-pending .modal-header {
        display: none;
    }
}

@media (max-width: 500px) {
    .dropup-modal.iute-loan-pending .title p {
        font-size: 14px;
    }

    .dropup-modal.iute-loan-pending .title,
    .dropup-modal.iute-loan-pending .row-qr-code,
    .dropup-modal.iute-loan-pending .row-link {
        padding-inline: var(--gap-0);
    }
}

/* #endregion ========================== Modal Dropup: Iute Pending ==================================== */
/* #region ============================== Modal Dropup: Iute Error ===================================== */
.dropup-modal.iute-error .title {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16);
    text-align: center;
    padding-block-end: var(--gap-32);
    color: var(--color-text-basic);
    line-height: 130%;
    padding-inline: var(--gap-40);
}

    .dropup-modal.iute-error .title h2 {
        font-size: 18px;
        font-weight: 700;
    }

    .dropup-modal.iute-error .title p {
        font-size: 16px;
        font-weight: 500;
    }

.dropup-modal.iute-error .clipart-cloud {
    width: 180px;
    height: 180px;
    margin-inline: auto;
}

@media (max-width: 500px) {
    .dropup-modal.iute-error .title {
        padding-inline: var(--gap-24);
    }
}

/* #endregion ==========================/ Modal Dropup: Iute Error ===================================== */
/* #region ======================== Modal DropUp: Message Successfully Sent ============================ */
.dropup-modal.message-sent .row-clipart {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    .dropup-modal.message-sent .row-clipart .clipart-message-success {
        width: 150px;
        height: 150px;
    }

.dropup-modal.message-sent .row-title {
    width: 100%;
    padding-inline: var(--gap-64);
    text-align: center;
}

    .dropup-modal.message-sent .row-title h2 {
        font-size: 18px;
        line-height: 130%;
        color: var(--color-text-basic);
        font-weight: 700;
        padding: 0px;
        margin: 0px;
    }

.dropup-modal.message-sent .row-description {
    width: 100%;
    padding-inline: var(--gap-64);
    text-align: center;
    font-size: 14px;
    line-height: 130%;
    color: var(--color-text-muted);
    padding-block-start: var(--gap-16);
    padding-block-end: var(--gap-32);
}

.dropup-modal.message-sent .modal-footer {
    gap: var(--gap-32);
}

.dropup-modal.message-sent .modal-content {
    margin-block: 0px;
}

@media (max-width: 500px) {
    .dropup-modal.message-sent .row-description, .dropup-modal.message-sent .row-title {
        padding-inline: var(--gap-24);
    }
}
/* #endregion ====================/ Modal DropUp: Message Successfully Sent ============================ */
/* #region ============================= Modal DropUp: Send message ==================================== */
.dropup-modal.send-message .input-form {
    padding-inline: var(--gap-32);
    padding-block: var(--gap-32);
    font-weight: 500;
}

    .dropup-modal.send-message .input-form textarea {
        min-height: 150px;
        font-size: 18px;
        border: 0px none transparent;
        box-shadow: none;
    }

        .dropup-modal.send-message .input-form textarea::placeholder {
            font-size: 14px;
            opacity: 1;
        }

        .dropup-modal.send-message .input-form textarea::-webkit-input-placeholder {
            font-size: 14px;
        }

        .dropup-modal.send-message .input-form textarea::-moz-placeholder {
            font-size: 14px;
            opacity: 1;
        }

        .dropup-modal.send-message .input-form textarea:-moz-placeholder {
            font-size: 14px;
        }

        .dropup-modal.send-message .input-form textarea:-ms-input-placeholder {
            font-size: 14px;
        }

.dropup-modal.send-message .info {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--gap-8);
    margin-block-end: var(--gap-24);
}

    .dropup-modal.send-message .info i {
        flex-shrink: 0;
        font-size: 24px;
    }

    .dropup-modal.send-message .info span {
        width: 100%;
        color: var(--color-text-muted);
    }

.dropup-modal.send-message .checkbox {
    padding-inline: 0px;
}

.dropup-modal.send-message .input-form textarea:focus {
    box-shadow: none;
}

.dropup-modal.send-message .modal-content {
    margin-block: 0px;
}

@media (max-width: 575px) {
    .dropup-modal.send-message .input-form {
        padding-inline: var(--gap-0);
        padding-block-start: var(--gap-12);
        padding-block-end: var(--gap-24);
    }

        .dropup-modal.send-message .input-form textarea {
            min-height: 120px;
        }
}
/* #endregion =========================/ Modal DropUp: Send message ==================================== */
/* #region ============================== Modal DropUp: Unpublish Ad =================================== */
.dropup-modal.unpublish-ad .row-clipart,
.dropup-modal.unpublish-ads .row-clipart {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    .dropup-modal.unpublish-ad .row-clipart .clipart-unpublish-ad,
    .dropup-modal.unpublish-ads .row-clipart .clipart-unpublish-ad {
        width: 150px;
        height: 150px;
    }

.dropup-modal.unpublish-ad .row-title,
.dropup-modal.unpublish-ads .row-title {
    width: 100%;
    padding-inline: var(--gap-64);
    text-align: center;
}

    .dropup-modal.unpublish-ad .row-title h2,
    .dropup-modal.unpublish-ads .row-title h2 {
        font-size: 18px;
        line-height: 130%;
        color: var(--color-text-basic);
        font-weight: 700;
        padding: 0px;
        margin: 0px;
    }

.dropup-modal.unpublish-ad .row-description,
.dropup-modal.unpublish-ads .row-description {
    width: 100%;
    padding-inline: var(--gap-64);
    text-align: center;
    font-size: 14px;
    line-height: 130%;
    color: var(--color-text-muted);
    padding-block-start: var(--gap-16);
    padding-block-end: var(--gap-32);
}

.dropup-modal.unpublish-ad .modal-footer,
.dropup-modal.unpublish-ads .modal-footer {
    gap: var(--gap-32);
}

@media (max-width: 500px) {
    .dropup-modal.unpublish-ad .row-description, .dropup-modal.unpublish-ad .row-title,
    .dropup-modal.unpublish-ads .row-description, .dropup-modal.unpublish-ads .row-title {
        padding-inline: var(--gap-24);
    }
}
/* #endregion ==========================/ Modal DropUp: Unpublish Ad =================================== */
/* #region ================================ Modal: Mobile Password ===================================== */
.modal-custom.mobile-password .modal-window {
    top: calc(50% - 223px);
    width: 650px;
    left: calc(50% - 325px);
}

.modal-custom.mobile-password h4 {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-basic);
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.modal-custom.mobile-password .modal-container {
    padding-left: 20px;
    padding-right: 20px;
}

.modal-custom.mobile-password .divider-horizontal {
    margin-top: 40px;
}

.modal-custom.mobile-password .divider-label {
    display: block;
    width: 100%;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-text-basic);
    margin-top: -9px;
}

    .modal-custom.mobile-password .divider-label span {
        background-color: #FFFFFF;
        padding: 3px 20px 3px 20px;
    }

.modal-custom.mobile-password .modal-container .new-btn {
    margin-top: 33px;
    margin-bottom: 50px;
}

@media (max-width: 728px) {
    .modal-custom.mobile-password .modal-window {
        top: 0px;
        left: 0px;
        max-width: 100%;
        width: 100%;
    }

        .modal-custom.mobile-password .modal-window .modal-body {
            height: 100%;
        }
}

@media (max-width: 500px) {
    .modal-custom.mobile-password .modal-footer .new-btn {
        min-width: 0px;
    }
}

/* #endregion ============================ /Modal: Mobile Password ===================================== */
/* #region ================================ Modal: Too large image ===================================== */
.modal-custom.too-large-image {
    z-index: 99999;
}

    .modal-custom.too-large-image .modal-window {
        top: calc(50% - 230px);
        width: 650px;
        left: calc(50% - 325px);
    }

    .modal-custom.too-large-image .modal-container {
        margin: 0px auto;
        width: 600px;
    }

    .modal-custom.too-large-image h4 {
        font-size: 24px;
        font-weight: 400;
        padding-left: 30px;
        padding-right: 30px;
        margin-bottom: 20px;
        text-align: center;
    }

    .modal-custom.too-large-image p {
        font-size: 14px;
        font-weight: 400;
        padding-left: 30px;
        padding-right: 30px;
        text-align: center;
    }

    .modal-custom.too-large-image .error-message-container {
        padding-bottom: 60px;
    }


    .modal-custom.too-large-image .image-container {
        display: block;
        width: 230px;
        height: 230px;
        top: 0%;
        left: 0%;
        margin: 0px auto 0px auto;
    }

        .modal-custom.too-large-image .image-container .inner {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .modal-custom.too-large-image .image-container .clipart-cloud-1,
        .modal-custom.too-large-image .image-container .clipart-cloud-2,
        .modal-custom.too-large-image .image-container .clipart-cloud-3,
        .modal-custom.too-large-image .image-container .clipart-cloud-4,
        .modal-custom.too-large-image .image-container .clipart-cloud-5,
        .modal-custom.too-large-image .image-container .clipart-cloud-6,
        .modal-custom.too-large-image .image-container .clipart-cloud-7,
        .modal-custom.too-large-image .image-container .clipart-cloud-8,
        .modal-custom.too-large-image .image-container .clipart-cloud-9,
        .modal-custom.too-large-image .image-container .clipart-cloud-10 {
            position: absolute;
            display: block;
            background-color: #F2F2F2;
            border-radius: 50%;
        }

        .modal-custom.too-large-image .image-container .clipart-cloud-1 {
            top: 24%;
            left: 9%;
            width: 27%;
            height: 27%;
            animation: too-large-image-cloud-1 1.6s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-image .image-container .clipart-cloud-2 {
            top: 9%;
            left: 20%;
            width: 35%;
            height: 35%;
            animation: too-large-image-cloud-2 1.7s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-image .image-container .clipart-cloud-3 {
            top: 6%;
            left: 42%;
            width: 25%;
            height: 25%;
            animation: too-large-image-cloud-3 1.4s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-image .image-container .clipart-cloud-4 {
            top: 13%;
            left: 58%;
            width: 28%;
            height: 28%;
            animation: too-large-image-cloud-4 1.6s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-image .image-container .clipart-cloud-5 {
            top: 29%;
            left: 70%;
            width: 25%;
            height: 25%;
            animation: too-large-image-cloud-5 1.5s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-image .image-container .clipart-cloud-6 {
            top: 37%;
            left: 51%;
            width: 50%;
            height: 50%;
            animation: too-large-image-cloud-6 1.7s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-image .image-container .clipart-cloud-7 {
            top: 65%;
            left: 39%;
            width: 30%;
            height: 30%;
            animation: too-large-image-cloud-7 1.4s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-image .image-container .clipart-cloud-8 {
            top: 46%;
            left: 18%;
            width: 40%;
            height: 40%;
            animation: too-large-image-cloud-8 1.6s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-image .image-container .clipart-cloud-9 {
            top: 36%;
            left: 0%;
            width: 33%;
            height: 33%;
            animation: too-large-image-cloud-9 1.5s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-image .image-container .clipart-cloud-10 {
            top: 19%;
            left: 26%;
            width: 53%;
            height: 53%;
        }

@keyframes too-large-image-cloud-1 {
    from {
        transform: translate(-12%, -12%);
    }

    to {
        transform: translate(12%, 12%);
    }
}

@keyframes too-large-image-cloud-2 {
    from {
        transform: translate(2%, 6%);
    }

    to {
        transform: translate(-2%, -6%);
    }
}

@keyframes too-large-image-cloud-3 {
    from {
        transform: translate(0%, -8%);
    }

    to {
        transform: translate(0%, 7%);
    }
}

@keyframes too-large-image-cloud-4 {
    from {
        transform: translate(-4%, 4%);
    }

    to {
        transform: translate(4%, -4%);
    }
}

@keyframes too-large-image-cloud-5 {
    from {
        transform: translate(6%, -6%);
    }

    to {
        transform: translate(-6%, 6%);
    }
}

@keyframes too-large-image-cloud-6 {
    from {
        transform: translate(-4%, -2%);
    }

    to {
        transform: translate(4%, 2%);
    }
}

@keyframes too-large-image-cloud-7 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@keyframes too-large-image-cloud-8 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes too-large-image-cloud-9 {
    from {
        transform: translate(-5%, 0%);
    }

    to {
        transform: translate(5%, 0%);
    }
}


.modal-custom.too-large-image .image-container .clipart-box {
    display: block;
    position: absolute;
    top: 50%;
    left: 37%;
    width: 40%;
    height: 40%;
    background: url('../../Content/Images/clipart-box.svg') no-repeat center center transparent;
    background-size: contain;
    animation: too-large-image-box 3s ease-in-out infinite;
    transform-origin: 50% 100%;
}

@keyframes too-large-image-box {
    0% {
        transform: scale(1, 1);
    }

    30% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    80% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

.modal-custom.too-large-image .image-container .clipart-image {
    display: block;
    position: absolute;
    top: 11%;
    left: 27%;
    width: 50%;
    height: 50%;
    background: url('../../Content/Images/clipart-image.svg') no-repeat center center transparent;
    background-size: contain;
    animation: too-large-image 1.5s ease-in-out infinite alternate;
}

@keyframes too-large-image {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, 31%);
    }
}


@media (max-width: 728px) {
    .modal-custom.too-large-image .modal-window {
        top: 0px;
        left: 0px;
        max-width: 100%;
        width: 100%;
    }

        .modal-custom.too-large-image .modal-window .modal-body {
            height: 100%;
        }

    .modal-custom.too-large-image .modal-container {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .modal-custom.too-large-image .modal-footer .new-btn {
        min-width: 0px;
    }

    .modal-custom.too-large-image .image-container {
        width: 160px;
        height: 160px;
    }

    .modal-custom.too-large-image h4,
    .modal-custom.too-large-image p {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-height: 500px) {

    .modal-custom.too-large-image .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.too-large-image .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.too-large-image .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.too-large-image .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.too-large-image .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}

/* #endregion ============================ /Modal: Too large image ===================================== */
/* #region ================================ Modal: Too large file ====================================== */
.modal-custom.too-large-file {
    z-index: 99999;
}

    .modal-custom.too-large-file .modal-window {
        top: calc(50% - 260px);
        width: 650px;
        left: calc(50% - 325px);
    }

    .modal-custom.too-large-file .modal-container {
        margin: 0px auto;
        width: 600px;
    }


    .modal-custom.too-large-file h4 {
        font-size: 24px;
        font-weight: 400;
        padding-left: 30px;
        padding-right: 30px;
        margin-bottom: 20px;
        text-align: center;
    }

    .modal-custom.too-large-file p {
        font-size: 14px;
        font-weight: 400;
        padding-left: 30px;
        padding-right: 30px;
        margin-bottom: 60px;
        text-align: center;
    }

    .modal-custom.too-large-file .error-message-container {
        padding-bottom: 60px;
    }

    .modal-custom.too-large-file .image-container {
        display: block;
        width: 230px;
        height: 230px;
        top: 0%;
        left: 0%;
        margin: 0px auto 0px auto;
    }

        .modal-custom.too-large-file .image-container .inner {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .modal-custom.too-large-file .image-container .clipart-cloud-1,
        .modal-custom.too-large-file .image-container .clipart-cloud-2,
        .modal-custom.too-large-file .image-container .clipart-cloud-3,
        .modal-custom.too-large-file .image-container .clipart-cloud-4,
        .modal-custom.too-large-file .image-container .clipart-cloud-5,
        .modal-custom.too-large-file .image-container .clipart-cloud-6,
        .modal-custom.too-large-file .image-container .clipart-cloud-7,
        .modal-custom.too-large-file .image-container .clipart-cloud-8,
        .modal-custom.too-large-file .image-container .clipart-cloud-9,
        .modal-custom.too-large-file .image-container .clipart-cloud-10,
        .modal-custom.too-large-file .image-container .clipart-cloud-11,
        .modal-custom.too-large-file .image-container .clipart-cloud-12 {
            display: block;
            border-radius: 50%;
            position: absolute;
            background-color: #F2F2F2;
        }


        .modal-custom.too-large-file .image-container .clipart-cloud-1 {
            top: 18%;
            left: 10%;
            width: 40%;
            height: 40%;
            animation: too-large-file-cloud-1 1.6s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-file .image-container .clipart-cloud-2 {
            top: 7%;
            left: 24%;
            width: 30%;
            height: 30%;
            animation: too-large-file-cloud-2 1.5s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-file .image-container .clipart-cloud-3 {
            top: 13%;
            left: 43%;
            width: 25%;
            height: 25%;
            animation: too-large-file-cloud-3 1.7s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-file .image-container .clipart-cloud-4 {
            top: 11%;
            left: 54%;
            width: 35%;
            height: 35%;
            animation: too-large-file-cloud-4 1.4s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-file .image-container .clipart-cloud-5 {
            top: 29%;
            left: 73%;
            width: 27%;
            height: 27%;
            animation: too-large-file-cloud-5 1.5s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-file .image-container .clipart-cloud-6 {
            top: 47%;
            left: 66%;
            width: 27%;
            height: 27%;
            animation: too-large-file-cloud-6 1.7s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-file .image-container .clipart-cloud-7 {
            top: 67%;
            left: 62%;
            width: 20%;
            height: 20%;
            animation: too-large-file-cloud-7 1.5s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-file .image-container .clipart-cloud-8 {
            top: 63%;
            left: 41%;
            width: 30%;
            height: 30%;
            animation: too-large-file-cloud-8 1.3s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-file .image-container .clipart-cloud-9 {
            top: 58%;
            left: 20%;
            width: 33%;
            height: 33%;
            animation: too-large-file-cloud-9 1.4s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-file .image-container .clipart-cloud-10 {
            top: 58%;
            left: 10%;
            width: 18%;
            height: 18%;
            animation: too-large-file-cloud-10 1.6s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-file .image-container .clipart-cloud-11 {
            top: 38%;
            left: 0%;
            width: 30%;
            height: 30%;
            animation: too-large-file-cloud-11 1.3s ease-in-out infinite alternate;
        }

        .modal-custom.too-large-file .image-container .clipart-cloud-12 {
            top: 23%;
            left: 22%;
            width: 60%;
            height: 60%;
        }

@keyframes too-large-file-cloud-1 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@keyframes too-large-file-cloud-2 {
    from {
        transform: translate(3%, 6%);
    }

    to {
        transform: translate(-3%, -6%);
    }
}

@keyframes too-large-file-cloud-3 {
    from {
        transform: translate(0%, -7%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@keyframes too-large-file-cloud-4 {
    from {
        transform: translate(-6%, 6%);
    }

    to {
        transform: translate(6%, -8%);
    }
}

@keyframes too-large-file-cloud-5 {
    from {
        transform: translate(5%, -2%);
    }

    to {
        transform: translate(-5%, 2%);
    }
}

@keyframes too-large-file-cloud-6 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(8%, 0%);
    }
}


@keyframes too-large-file-cloud-7 {
    from {
        transform: translate(10%, 10%);
    }

    to {
        transform: translate(-10%, -10%);
    }
}

@keyframes too-large-file-cloud-8 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

@keyframes too-large-file-cloud-9 {
    from {
        transform: translate(-4%, 5%);
    }

    to {
        transform: translate(4%, -5%);
    }
}

@keyframes too-large-file-cloud-10 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes too-large-file-cloud-11 {
    from {
        transform: translate(-7%, 0%);
    }

    to {
        transform: translate(7%, 0%);
    }
}

.modal-custom.too-large-file .image-container .clipart-box {
    display: block;
    position: absolute;
    top: 50%;
    left: 34%;
    width: 43%;
    height: 43%;
    background: url('../../Content/Images/clipart-box.svg') no-repeat center center transparent;
    background-size: contain;
    animation: too-large-image-box 3s ease-in-out infinite;
    transform-origin: 50% 100%;
}

@keyframes too-large-file-box {
    0% {
        transform: scale(1, 1);
    }

    30% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    80% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

.modal-custom.too-large-file .image-container .clipart-file {
    display: block;
    position: absolute;
    top: 9.5%;
    left: 27%;
    width: 50%;
    height: 50%;
    background: url('../../Content/Images/clipart-file.svg') no-repeat center center transparent;
    background-size: contain;
    animation: too-large-image 1.5s ease-in-out infinite alternate;
}

@keyframes too-large-file {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, 31%);
    }
}


@media (max-width: 728px) {
    .modal-custom.too-large-file .modal-window {
        top: 0px;
        left: 0px;
        max-width: 100%;
        width: 100%;
    }

        .modal-custom.too-large-file .modal-window .modal-body {
            height: 100%;
        }

    .modal-custom.too-large-file .modal-container {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .modal-custom.too-large-file .modal-footer .new-btn {
        min-width: 0px;
    }

    .modal-custom.too-large-file .image-container {
        width: 160px;
        height: 160px;
    }

    .modal-custom.too-large-file h4,
    .modal-custom.too-large-file p {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-height: 550px) {

    .modal-custom.too-large-file .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.too-large-file .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.too-large-file .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.too-large-file .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100%;
        max-height: 100%;
    }

    .modal-custom.too-large-file .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}
/* #endregion ============================ /Modal: Too large file ====================================== */
/* #region ================================ Under construction ========================================= */
.under-construction-page {
    padding-top: 50px;
}

.internal-error-page {
    margin-block: 48px;
}

.under-construction-page .site-logo {
    display: block;
    width: 400px;
    height: 100px;
    margin: 0px auto;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.under-construction-page .clipart-area,
.internal-error-page .clipart-area {
    display: block;
    width: 400px;
    height: 400px;
    margin: 0px auto;
}

    .under-construction-page .clipart-area .inner,
    .internal-error-page .clipart-area .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .under-construction-page .clipart-area .clipart-cloud-1,
    .under-construction-page .clipart-area .clipart-cloud-2,
    .under-construction-page .clipart-area .clipart-cloud-3,
    .under-construction-page .clipart-area .clipart-cloud-4,
    .under-construction-page .clipart-area .clipart-cloud-5,
    .under-construction-page .clipart-area .clipart-cloud-6,
    .under-construction-page .clipart-area .clipart-cloud-7,
    .under-construction-page .clipart-area .clipart-cloud-8,
    .under-construction-page .clipart-area .clipart-cloud-9,
    .under-construction-page .clipart-area .clipart-cloud-10,
    .under-construction-page .clipart-area .clipart-cloud-11,
    .internal-error-page .clipart-area .clipart-cloud-1,
    .internal-error-page .clipart-area .clipart-cloud-2,
    .internal-error-page .clipart-area .clipart-cloud-3,
    .internal-error-page .clipart-area .clipart-cloud-4,
    .internal-error-page .clipart-area .clipart-cloud-5,
    .internal-error-page .clipart-area .clipart-cloud-6,
    .internal-error-page .clipart-area .clipart-cloud-7,
    .internal-error-page .clipart-area .clipart-cloud-8,
    .internal-error-page .clipart-area .clipart-cloud-9,
    .internal-error-page .clipart-area .clipart-cloud-10,
    .internal-error-page .clipart-area .clipart-cloud-11 {
        display: block;
        position: absolute;
        border-radius: 50%;
        background-color: #F5F5F5;
    }

    .under-construction-page .clipart-area .clipart-cloud-1,
    .internal-error-page .clipart-area .clipart-cloud-1 {
        width: 27%;
        height: 27%;
        top: 22%;
        left: 14%;
        animation: undercontstruction-cloud-1 1.6s ease-in-out infinite alternate;
    }

    .under-construction-page .clipart-area .clipart-cloud-2,
    .internal-error-page .clipart-area .clipart-cloud-2 {
        width: 34%;
        height: 34%;
        top: 14%;
        left: 31%;
        animation: undercontstruction-cloud-2 1.8s ease-in-out infinite alternate;
    }

    .under-construction-page .clipart-area .clipart-cloud-3,
    .internal-error-page .clipart-area .clipart-cloud-3 {
        width: 24%;
        height: 24%;
        top: 24%;
        left: 55%;
        animation: undercontstruction-cloud-3 1.4s ease-in-out infinite alternate;
    }

    .under-construction-page .clipart-area .clipart-cloud-4,
    .internal-error-page .clipart-area .clipart-cloud-4 {
        width: 23%;
        height: 23%;
        top: 23%;
        left: 75%;
        animation: undercontstruction-cloud-4 2.1s ease-in-out infinite alternate;
    }

    .under-construction-page .clipart-area .clipart-cloud-5,
    .internal-error-page .clipart-area .clipart-cloud-5 {
        width: 33%;
        height: 33%;
        top: 36%;
        left: 67%;
        animation: undercontstruction-cloud-5 1.8s ease-in-out infinite alternate;
    }

    .under-construction-page .clipart-area .clipart-cloud-6,
    .internal-error-page .clipart-area .clipart-cloud-6 {
        width: 38%;
        height: 38%;
        top: 42%;
        left: 51%;
        animation: undercontstruction-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .under-construction-page .clipart-area .clipart-cloud-7,
    .internal-error-page .clipart-area .clipart-cloud-7 {
        width: 29%;
        height: 29%;
        top: 57%;
        left: 38%;
        animation: undercontstruction-cloud-7 1.7s ease-in-out infinite alternate;
    }

    .under-construction-page .clipart-area .clipart-cloud-8,
    .internal-error-page .clipart-area .clipart-cloud-8 {
        width: 22%;
        height: 22%;
        top: 62%;
        left: 25%;
        animation: undercontstruction-cloud-8 1.6s ease-in-out infinite alternate;
    }

    .under-construction-page .clipart-area .clipart-cloud-9,
    .internal-error-page .clipart-area .clipart-cloud-9 {
        width: 26%;
        height: 26%;
        top: 51%;
        left: 10%;
        animation: undercontstruction-cloud-9 1.8s ease-in-out infinite alternate;
    }

    .under-construction-page .clipart-area .clipart-cloud-10,
    .internal-error-page .clipart-area .clipart-cloud-10 {
        width: 32%;
        height: 32%;
        top: 32%;
        left: 0%;
        animation: undercontstruction-cloud-10 1.8s ease-in-out infinite alternate;
    }

    .under-construction-page .clipart-area .clipart-cloud-11,
    .internal-error-page .clipart-area .clipart-cloud-11 {
        width: 42%;
        height: 42%;
        top: 30%;
        left: 27%;
    }

@keyframes undercontstruction-cloud-1 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes undercontstruction-cloud-2 {
    from {
        transform: translate(0%, 6%);
    }

    to {
        transform: translate(0%, -6%);
    }
}

@keyframes undercontstruction-cloud-3 {
    from {
        transform: translate(3%, -6%);
    }

    to {
        transform: translate(-3%, 6%);
    }
}

@keyframes undercontstruction-cloud-4 {
    from {
        transform: translate(-5%, 40%);
    }

    to {
        transform: translate(5%, -1%);
    }
}

@keyframes undercontstruction-cloud-5 {
    from {
        transform: translate(7%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

@keyframes undercontstruction-cloud-6 {
    from {
        transform: translate(-3%, -8%);
    }

    to {
        transform: translate(3%, 8%);
    }
}

@keyframes undercontstruction-cloud-7 {
    from {
        transform: translate(0%, 6%);
    }

    to {
        transform: translate(0%, -7%);
    }
}

@keyframes undercontstruction-cloud-8 {
    from {
        transform: translate(3%, -6%);
    }

    to {
        transform: translate(-3%, 7%);
    }
}

@keyframes undercontstruction-cloud-9 {
    from {
        transform: translate(-6%, 6%);
    }

    to {
        transform: translate(6%, -6%);
    }
}

@keyframes undercontstruction-cloud-10 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

.under-construction-page .clipart-bar {
    display: block;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 22%;
    position: absolute;
    background-image: url("../../Content/Images/Errors/clipart-under-construction.svg");
    background-position: center center;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
}

.internal-error-page .clipart-internal-error svg {
    width: 100%;
    height: auto;
}

.internal-error-page .clipart-internal-error {
    display: block;
    width: 60%;
    height: 60%;
    top: 21%;
    left: 22.3%;
    position: absolute;
}

.under-construction-page .clipart-lamp-1 {
    display: block;
    width: 9%;
    height: 9%;
    top: 26.7%;
    left: 28.4%;
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(rgba(255,82,0,1) 0%, rgba(255,82,0,0) 70%);
    animation: underconstruction-lamp-1 1.2s ease infinite;
    opacity: 1;
}

@keyframes underconstruction-lamp-1 {
    0% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    95% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.under-construction-page .clipart-lamp-2 {
    display: block;
    width: 9%;
    height: 9%;
    top: 26.7%;
    left: 62.9%;
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(rgba(255,82,0,1) 0%, rgba(255,82,0,0) 70%);
    animation: underconstruction-lamp-2 1.2s ease infinite;
    opacity: 1;
}

@keyframes underconstruction-lamp-2 {
    0% {
        opacity: 0;
    }

    45% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.under-construction-page h1 {
    display: block;
    width: 80%;
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    margin: -30px auto 0px auto;
}

.internal-error-page h1 {
    display: block;
    width: 80%;
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase;
    margin: -30px auto 0px auto;
}

.internal-error-page p {
    display: block;
    width: 800px;
    text-align: center;
    color: var(--color-text-muted);
    line-height: 1.3em;
    margin-inline: auto;
    padding-block-start: 40px;
    padding-block-end: 100px;
}


.under-construction-page h2 {
    display: block;
    width: 80%;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    margin: 10px auto 0px auto;
}

.under-construction-page p {
    display: block;
    width: 60%;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    margin: 40px auto 0px auto;
}

.under-construction-page .timer-area {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

    .under-construction-page .timer-area .timer-block {
        display: inline-block;
        border-radius: var(--radius-4);
        background-color: #F2F2F2;
        text-align: center;
        padding: 5px;
        width: 130px;
        vertical-align: top;
    }

        .under-construction-page .timer-area .timer-block .timer {
            display: block;
            text-align: center;
            font-size: 64px;
            color: var(--color-text-muted);
            font-weight: 700;
            padding-top: 10px;
        }

        .under-construction-page .timer-area .timer-block small {
            font-size: 12px;
            color: var(--color-text-muted);
            font-weight: 700;
            padding-top: 5px;
            text-transform: uppercase;
            padding-bottom: 15px;
            display: block;
        }

    .under-construction-page .timer-area .timer-divider {
        display: inline-block;
        text-align: center;
        position: relative;
        width: 30px;
        vertical-align: top;
    }

        .under-construction-page .timer-area .timer-divider .dot-1,
        .under-construction-page .timer-area .timer-divider .dot-2 {
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--color-text-muted);
            margin: 0px auto 0px auto;
        }

        .under-construction-page .timer-area .timer-divider .dot-1 {
            margin: 50px auto 10px auto;
        }

@media (max-width: 1190px) {
    .under-construction-page p {
        display: block;
        width: 80%;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        margin: 40px auto 0px auto;
    }
}

@media (max-width: 991px) {
    .under-construction-page .site-logo {
        width: 300px;
        height: 80px;
    }

    .under-construction-page .clipart-area {
        display: block;
        width: 300px;
        height: 300px;
        margin: 0px auto;
    }

    .under-construction-page h1 {
        display: block;
        width: 90%;
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        text-transform: uppercase;
        margin: -20px auto 0px auto;
    }
}

@media (max-width: 767px) {
    .under-construction-page {
        padding-top: 10px;
    }

        .under-construction-page .site-logo {
            width: 200px;
            height: 80px;
            margin-top: -10px;
        }

        .under-construction-page .clipart-area {
            display: block;
            width: 250px;
            height: 250px;
            margin: -30px auto 0px auto;
        }

        .under-construction-page h1 {
            width: 100%;
            text-align: center;
            font-size: 28px;
            font-weight: 700;
            margin: -20px auto 0px auto;
        }

        .under-construction-page h2 {
            width: 100%;
            text-align: center;
            font-size: 18px;
            font-weight: 700;
        }

        .under-construction-page .timer-area .timer-block {
            display: inline-block;
            border-radius: var(--radius-4);
            background-color: #F2F2F2;
            text-align: center;
            padding: 5px;
            width: 100px;
            vertical-align: top;
        }

            .under-construction-page .timer-area .timer-block .timer {
                display: block;
                text-align: center;
                font-size: 48px;
                color: var(--color-text-muted);
                font-weight: 700;
                padding-top: 10px;
            }

            .under-construction-page .timer-area .timer-block small {
                font-size: 10px;
                color: var(--color-text-muted);
                font-weight: 700;
                padding-top: 5px;
                text-transform: uppercase;
                padding-bottom: 15px;
                display: block;
            }

        .under-construction-page .timer-area .timer-divider .dot-1,
        .under-construction-page .timer-area .timer-divider .dot-2 {
            display: block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: var(--color-text-muted);
            margin: 0px auto 0px auto;
        }

        .under-construction-page .timer-area .timer-divider .dot-1 {
            margin: 45px auto 10px auto;
        }
}

@media (max-width: 550px) {
    .under-construction-page h1 {
        width: 100%;
        text-align: center;
        font-size: 18px;
        font-weight: 700;
        margin: -20px auto 0px auto;
    }

    .under-construction-page h2 {
        width: 100%;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
    }

    .under-construction-page p {
        display: block;
        width: 95%;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        margin: 40px auto 0px auto;
    }

    .under-construction-page .timer-area .timer-block {
        display: inline-block;
        border-radius: var(--radius-4);
        background-color: #F2F2F2;
        text-align: center;
        padding: 5px;
        width: 70px;
        vertical-align: top;
    }

        .under-construction-page .timer-area .timer-block .timer {
            display: block;
            text-align: center;
            font-size: 32px;
            color: var(--color-text-muted);
            font-weight: 700;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .under-construction-page .timer-area .timer-block small {
            display: none;
        }

    .under-construction-page .timer-area .timer-divider .dot-1,
    .under-construction-page .timer-area .timer-divider .dot-2 {
        display: block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: var(--color-text-muted);
        margin: 0px auto 0px auto;
    }

    .under-construction-page .timer-area .timer-divider .dot-1 {
        margin: 25px auto 8px auto;
    }

    .under-construction-page .timer-area .timer-divider {
        width: 20px;
    }
}

@media (max-width: 350px) {
    .under-construction-page .clipart-area {
        display: block;
        width: 200px;
        height: 200px;
        margin: -30px auto 0px auto;
    }

    .under-construction-page h1 {
        margin: -10px auto 0px auto;
    }

    .under-construction-page .timer-area .timer-block .timer {
        display: block;
        text-align: center;
        font-size: 32px;
        color: var(--color-text-muted);
        font-weight: 700;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .under-construction-page .timer-area .timer-block {
        display: inline-block;
        border-radius: var(--radius-4);
        background-color: #F2F2F2;
        text-align: center;
        padding: 5px;
        width: 60px;
        vertical-align: top;
    }

    .under-construction-page .timer-area .timer-divider .dot-1,
    .under-construction-page .timer-area .timer-divider .dot-2 {
        display: block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: var(--color-text-muted);
        margin: 0px auto 0px auto;
    }

    .under-construction-page .timer-area .timer-divider .dot-1 {
        margin: 20px auto 8px auto;
    }
}

@media (max-width: 1100px) {

    .internal-error-page p {
        width: 100%;
        padding-block-start: 40px;
    }
}

@media (max-width: 800px) {
    .internal-error-page h1 {
        font-size: 24px;
    }


    .internal-error-page p {
        font-size: 14px;
    }

    .internal-error-page .clipart-area {
        display: block;
        width: 300px;
        height: 300px;
        margin: 0px auto;
    }
}

@media (max-width: 500px) {
    .internal-error-page h1 {
        font-size: 24px;
        line-height: 1.2em;
    }

    .internal-error-page p {
        font-size: 14px;
        width: 100%;
        padding-block-end: 80px;
    }

    .internal-error-page .clipart-area {
        display: block;
        width: 250px;
        height: 250px;
        margin: 0px auto;
    }
}
/* #endregion ============================ /Under construction ========================================= */
/* #region =============================== Remove Ad Success =========================================== */
.delete-ad-success-page .panel {
    margin-block-start: var(--gap-32);
    background-color: var(--color-bg-panel);
    border-radius: var(--radius-16);
    text-align: center;
    padding-block: var(--gap-40);
    padding-inline: var(--gap-128);
    display: flex;
    flex-direction: column;
    gap: var(--gap-16);
    margin-block-end: var(--gap-128);
}

.delete-ad-success-page .row-clipart {
    display: flex;
    width: 100%;
    justify-content: center;
    align-content: center;
}

    .delete-ad-success-page .row-clipart .clipart-remove-success {
        width: 200px;
        height: 200px;
    }

.delete-ad-success-page .clipart-cloud .cloud-circle-1,
.delete-ad-success-page .clipart-cloud .cloud-circle-2,
.delete-ad-success-page .clipart-cloud .cloud-circle-3,
.delete-ad-success-page .clipart-cloud .cloud-circle-4,
.delete-ad-success-page .clipart-cloud .cloud-circle-5,
.delete-ad-success-page .clipart-cloud .cloud-circle-6,
.delete-ad-success-page .clipart-cloud .cloud-circle-7,
.delete-ad-success-page .clipart-cloud .cloud-circle-8,
.delete-ad-success-page .clipart-cloud .cloud-circle-9,
.delete-ad-success-page .clipart-cloud .cloud-circle-10,
.delete-ad-success-page .clipart-cloud .cloud-circle-11 {
    background-color: #EEEEEE;
}

.delete-ad-success-page .row-title,
.delete-ad-success-page .row-description,
.delete-ad-success-page .row-controls {
    display: block;
    width: 100%;
}

    .delete-ad-success-page .row-title h1 {
        display: block;
        width: 100%;
        font-size: 24px;
        color: var(--color-text-primary);
        text-transform: uppercase;
        font-weight: 700;
        padding: 0px;
        margin: 0px;
        line-height: 130%;
    }

.delete-ad-success-page .row-description {
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%;
    color: var(--color-text-muted);
}

.delete-ad-success-page .row-controls {
    display: flex;
    padding-block-start: var(--gap-64);
    justify-content: center;
    align-items: center;
}

    .delete-ad-success-page .row-controls .new-btn {
        font-size: 16px;
        line-height: 100%;
    }

@media (max-width: 767px) {
    .delete-ad-success-page .panel {
        padding-inline: var(--gap-64);
    }
}

@media (max-width: 575px) {
    .delete-ad-success-page .panel {
        padding-inline: var(--gap-24);
        margin-block-start: var(--gap-16);
    }

    .delete-ad-success-page .row-controls {
        padding-block-start: var(--gap-32);
    }
}

@media (max-width: 400px) {
    .delete-ad-success-page .row-title h1 {
        font-size: 18px;
    }

    .delete-ad-success-page .row-description {
        font-size: 14px;
    }

    .delete-ad-success-page .row-clipart .clipart-remove-success {
        width: 150px;
        height: 150px;
    }
}


/* #endregion ===========================/ Remove Ad Success =========================================== */
/* #region =================================== No ad page ============================================== */
.no-ad-page {
    text-align: center;
    margin-block: 64px;
}

    .no-ad-page h2 {
        display: block;
        font-size: 24px;
        text-align: center;
        font-weight: 500;
    }

    .no-ad-page p {
        width: 650px;
        margin: 30px auto 0px auto;
        text-align: center;
        font-size: 14px;
    }

    .no-ad-page .new-btn {
        margin-top: 40px;
        margin-bottom: 50px;
    }

    .no-ad-page .image-container {
        display: block;
        width: 300px;
        height: 300px;
        margin: 20px auto 20px auto;
    }

        .no-ad-page .image-container .inner {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .no-ad-page .image-container .clipart-cloud-1,
        .no-ad-page .image-container .clipart-cloud-2,
        .no-ad-page .image-container .clipart-cloud-3,
        .no-ad-page .image-container .clipart-cloud-4,
        .no-ad-page .image-container .clipart-cloud-5,
        .no-ad-page .image-container .clipart-cloud-6,
        .no-ad-page .image-container .clipart-cloud-7,
        .no-ad-page .image-container .clipart-cloud-8,
        .no-ad-page .image-container .clipart-cloud-9 {
            display: block;
            border-radius: 50%;
            background-color: #F5F5F5;
            position: absolute;
        }

        .no-ad-page .image-container .clipart-cloud-1 {
            width: 33%;
            height: 33%;
            top: 10%;
            left: 12%;
            animation: no-ad-cloud-1 1.5s ease-in-out infinite alternate;
        }

        .no-ad-page .image-container .clipart-cloud-2 {
            width: 33%;
            height: 33%;
            top: 15%;
            left: 32%;
            animation: no-ad-cloud-2 1.7s ease-in-out infinite alternate;
        }

        .no-ad-page .image-container .clipart-cloud-3 {
            width: 33%;
            height: 33%;
            top: 8%;
            left: 50%;
            animation: no-ad-cloud-3 1.3s ease-in-out infinite alternate;
        }

        .no-ad-page .image-container .clipart-cloud-4 {
            width: 45%;
            height: 45%;
            top: 28%;
            left: 54%;
            animation: no-ad-cloud-4 1.8s ease-in-out infinite alternate;
        }

        .no-ad-page .image-container .clipart-cloud-5 {
            width: 35%;
            height: 35%;
            top: 48%;
            left: 45%;
            animation: no-ad-cloud-5 1.5s ease-in-out infinite alternate;
        }

        .no-ad-page .image-container .clipart-cloud-6 {
            width: 30%;
            height: 30%;
            top: 50%;
            left: 22%;
            animation: no-ad-cloud-6 1.7s ease-in-out infinite alternate;
        }

        .no-ad-page .image-container .clipart-cloud-7 {
            width: 25%;
            height: 25%;
            top: 40%;
            left: 7%;
            animation: no-ad-cloud-7 1.4s ease-in-out infinite alternate;
        }

        .no-ad-page .image-container .clipart-cloud-8 {
            width: 23%;
            height: 23%;
            top: 24%;
            left: 2%;
            animation: no-ad-cloud-8 1.6s ease-in-out infinite alternate;
        }

        .no-ad-page .image-container .clipart-cloud-9 {
            width: 43%;
            height: 43%;
            top: 24%;
            left: 22%;
        }

@keyframes no-ad-cloud-1 {
    from {
        transform: translate(-2%, -9%);
    }

    to {
        transform: translate(2%, 9%);
    }
}

@keyframes no-ad-cloud-2 {
    from {
        transform: translate(0%, 7%);
    }

    to {
        transform: translate(0%, -7%);
    }
}

@keyframes no-ad-cloud-3 {
    from {
        transform: translate(3%, -8%);
    }

    to {
        transform: translate(-3%, 8%);
    }
}

@keyframes no-ad-cloud-4 {
    from {
        transform: translate(-6%, 0%);
    }

    to {
        transform: translate(8%, 0%);
    }
}

@keyframes no-ad-cloud-5 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes no-ad-cloud-6 {
    from {
        transform: translate(-4%, 4%);
    }

    to {
        transform: translate(4%, -4%);
    }
}

@keyframes no-ad-cloud-7 {
    from {
        transform: translate(8%, 0%);
    }

    to {
        transform: translate(-8%, 0%);
    }
}

@keyframes no-ad-cloud-8 {
    from {
        transform: translate(-4%, -5%);
    }

    to {
        transform: translate(5%, 4%);
    }
}

.no-ad-page .image-container .clipart-frame {
    display: block;
    width: 46%;
    height: 46%;
    position: absolute;
    top: 26%;
    left: 34%;
    background: url('../../Content/Images/Errors/no-ad/clipart-frame.svg') no-repeat center center transparent;
    background-size: contain;
}

.no-ad-page .image-container .clipart-question {
    display: block;
    width: 51%;
    height: 51%;
    position: absolute;
    top: 11%;
    left: 31%;
    background: url('../../Content/Images/Errors/no-ad/clipart-question.svg') no-repeat center center transparent;
    background-size: contain;
    animation: no-ad-question 1.3s ease-in-out infinite alternate;
}

@keyframes no-ad-question {
    from {
        transform: translate(0%, -3%);
    }

    to {
        transform: translate(0%, 3%);
    }
}

.no-ad-page .image-container .clipart-girl {
    display: block;
    width: 65%;
    height: 65%;
    position: absolute;
    top: 30%;
    left: -10%;
    background: url('../../Content/Images/Errors/no-ad/clipart-girl.svg') no-repeat center center transparent;
    background-size: contain;
}

.no-ad-page .image-container .clipart-boot {
    display: block;
    width: 6.5%;
    height: 6.5%;
    position: absolute;
    top: 87.5%;
    left: 26.5%;
    background: url('../../Content/Images/Errors/no-ad/clipart-boot.svg') no-repeat center center transparent;
    background-size: contain;
    animation: no-ad-page-boot 1.3s ease-in-out infinite;
    transform-origin: 0% 40%;
}

@keyframes no-ad-page-boot {
    0% {
        transform: rotate(0deg);
    }

    40% {
        transform: rotate(-20deg);
    }

    45% {
        transform: rotate(0deg);
    }

    99% {
        transform: rotate(0deg);
    }
}




.no-ad-page .image-container .clipart-eyes {
    display: block;
    width: 5.5%;
    height: 5.5%;
    position: absolute;
    top: 35.5%;
    left: 16.5%;
    background: url('../../Content/Images/Errors/no-ad/clipart-eyes.svg') no-repeat center center transparent;
    background-size: contain;
    animation: no-ad-eyes 3s ease-in-out infinite;
}

@keyframes no-ad-eyes {
    0% {
        transform: scale(1, 1);
    }

    10% {
        transform: scale(1, 1);
    }

    12% {
        transform: scale(1, 0);
    }

    15% {
        transform: scale(1, 0);
    }

    17% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

.no-ad-page .image-container .clipart-brows {
    display: block;
    width: 5.7%;
    height: 5.7%;
    position: absolute;
    top: 33.7%;
    left: 16.3%;
    background: url('../../Content/Images/Errors/no-ad/clipart-brows.svg') no-repeat center center transparent;
    background-size: contain;
    animation: no-ad-brows 5s infinite ease-in-out;
}

@keyframes no-ad-brows {
    0% {
        transform: translate(0%, 0%);
    }

    30% {
        transform: translate(0%, 0%);
    }

    35% {
        transform: translate(0%, -10%);
    }

    70% {
        transform: translate(0%, -10%);
    }

    75% {
        transform: translate(0%, 0%);
    }

    100% {
        transform: translate(0%, 0%);
    }
}

.no-ad-page .image-container .clipart-mouth {
    display: block;
    width: 2%;
    height: 2%;
    position: absolute;
    top: 40%;
    left: 18.3%;
    background: url('../../Content/Images/Errors/no-ad/clipart-mouth.svg') no-repeat center center transparent;
    background-size: contain;
    animation: no-ad-mouth 3s ease-in-out infinite;
}

@keyframes no-ad-mouth {
    0% {
        transform: translate(0%, 0%);
    }

    30% {
        transform: translate(0%, 0%);
    }

    35% {
        transform: translate(0%, -20%);
    }

    40% {
        transform: translate(0%, -20%);
    }

    45% {
        transform: translate(0%, 0%);
    }

    100% {
        transform: translate(0%, 0%);
    }
}

@media (max-width: 767px) {
    .no-ad-page p {
        width: 100%;
        font-size: 14px;
    }
}

@media (max-width: 600px) {

    .no-ad-page .image-container {
        display: block;
        width: 180px;
        height: 180px;
        margin: 20px auto 20px auto;
    }
}

/* #endregion =============================== /No ad page ============================================== */
/* #region ==================================== 404 page =============================================== */
.page-404 {
    text-align: center;
    margin-block: 56px;
}

    .page-404 h2 {
        display: block;
        font-size: 24px;
        text-align: center;
        font-weight: 500;
    }

    .page-404 p {
        width: 650px;
        margin: 30px auto 0px auto;
        text-align: center;
        font-size: 14px;
    }

    .page-404 .new-btn {
        margin-top: 40px;
        margin-bottom: 50px;
    }

    .page-404 .image-container {
        display: block;
        width: 380px;
        height: 380px;
        margin: 0px auto -20px auto;
    }

        .page-404 .image-container .inner {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .page-404 .image-container .clipart-cloud-1,
        .page-404 .image-container .clipart-cloud-2,
        .page-404 .image-container .clipart-cloud-3,
        .page-404 .image-container .clipart-cloud-4,
        .page-404 .image-container .clipart-cloud-5,
        .page-404 .image-container .clipart-cloud-6,
        .page-404 .image-container .clipart-cloud-7,
        .page-404 .image-container .clipart-cloud-8,
        .page-404 .image-container .clipart-cloud-9,
        .page-404 .image-container .clipart-cloud-10,
        .page-404 .image-container .clipart-cloud-11,
        .page-404 .image-container .clipart-cloud-12 {
            display: block;
            position: absolute;
            border-radius: 50%;
            background-color: #F5F5F5;
        }

        .page-404 .image-container .clipart-cloud-1 {
            width: 30%;
            height: 30%;
            top: 20%;
            left: 9%;
            animation: page-404-cloud-1 1.4s ease-in-out infinite alternate;
        }

        .page-404 .image-container .clipart-cloud-2 {
            width: 22%;
            height: 22%;
            top: 12%;
            left: 26%;
            animation: page-404-cloud-2 1.7s ease-in-out infinite alternate;
        }

        .page-404 .image-container .clipart-cloud-3 {
            width: 22%;
            height: 22%;
            top: 19%;
            left: 41%;
            animation: page-404-cloud-3 1.3s ease-in-out infinite alternate;
        }

        .page-404 .image-container .clipart-cloud-4 {
            width: 28%;
            height: 28%;
            top: 17%;
            left: 56%;
            animation: page-404-cloud-4 1.6s ease-in-out infinite alternate;
        }

        .page-404 .image-container .clipart-cloud-5 {
            width: 18%;
            height: 18%;
            top: 32%;
            left: 78%;
            animation: page-404-cloud-5 1.2s ease-in-out infinite alternate;
        }

        .page-404 .image-container .clipart-cloud-6 {
            width: 28%;
            height: 28%;
            top: 43%;
            left: 69%;
            animation: page-404-cloud-6 1.5s ease-in-out infinite alternate;
        }

        .page-404 .image-container .clipart-cloud-7 {
            width: 22%;
            height: 22%;
            top: 64%;
            left: 62%;
            animation: page-404-cloud-7 1.4s ease-in-out infinite alternate;
        }

        .page-404 .image-container .clipart-cloud-8 {
            width: 32%;
            height: 32%;
            top: 55%;
            left: 41%;
            animation: page-404-cloud-8 1.6s ease-in-out infinite alternate;
        }

        .page-404 .image-container .clipart-cloud-9 {
            width: 22%;
            height: 22%;
            top: 66%;
            left: 26%;
            animation: page-404-cloud-9 1.3s ease-in-out infinite alternate;
        }

        .page-404 .image-container .clipart-cloud-10 {
            width: 32%;
            height: 32%;
            top: 45%;
            left: 10%;
            animation: page-404-cloud-10 1.4s ease-in-out infinite alternate;
        }

        .page-404 .image-container .clipart-cloud-11 {
            width: 21%;
            height: 21%;
            top: 41%;
            left: 3%;
            animation: page-404-cloud-11 1.6s ease-in-out infinite alternate;
        }

        .page-404 .image-container .clipart-cloud-12 {
            width: 58%;
            height: 55%;
            top: 25%;
            left: 28%;
        }

@keyframes page-404-cloud-1 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@keyframes page-404-cloud-2 {
    from {
        transform: translate(2%, 7%);
    }

    to {
        transform: translate(-2%, -7%);
    }
}

@keyframes page-404-cloud-3 {
    from {
        transform: translate(0%, -8%);
    }

    to {
        transform: translate(0%, 8%);
    }
}

@keyframes page-404-cloud-4 {
    from {
        transform: translate(-2%, 5%);
    }

    to {
        transform: translate(2%, -5%);
    }
}

@keyframes page-404-cloud-5 {
    from {
        transform: translate(6%, -6%);
    }

    to {
        transform: translate(-6%, 6%);
    }
}

@keyframes page-404-cloud-6 {
    from {
        transform: translate(-6%, 0%);
    }

    to {
        transform: translate(6%, 0%);
    }
}

@keyframes page-404-cloud-7 {
    from {
        transform: translate(4%, 4%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

@keyframes page-404-cloud-8 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@keyframes page-404-cloud-9 {
    from {
        transform: translate(-2%, 7%);
    }

    to {
        transform: translate(2%, -7%);
    }
}

@keyframes page-404-cloud-10 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes page-404-cloud-11 {
    from {
        transform: translate(-5%, 0%);
    }

    to {
        transform: translate(6%, 0%);
    }
}

.page-404 .image-container .clipart-404 {
    display: block;
    width: 100%;
    height: 100%;
    top: 12%;
    left: 0%;
    position: absolute;
    background: url('../../Content/Images/Errors/404/clipart-404.svg') no-repeat center center transparent;
    background-size: contain;
}

.page-404 .image-container .clipart-head {
    display: block;
    width: 30%;
    height: 30%;
    top: 16%;
    left: 32%;
    position: absolute;
    background: url('../../Content/Images/Errors/404/clipart-girl-head.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-404-head 2s ease-in-out infinite alternate;
    transform-origin: 50% 100%;
}

@keyframes clipart-404-head {
    from {
        transform: rotate(-5deg);
    }

    to {
        transform: rotate(5deg);
    }
}

.page-404 .image-container .clipart-brows {
    display: block;
    width: 45%;
    height: 45%;
    top: 25%;
    left: 33%;
    position: absolute;
    background: url('../../Content/Images/Errors/404/clipart-girl-brows.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-404-brows 3s ease-in-out infinite;
}

@keyframes clipart-404-brows {
    0% {
        transform: translate(0%, 0%);
    }

    10% {
        transform: translate(0%, -5%);
    }

    15% {
        transform: translate(0%, -5%);
    }

    40% {
        transform: translate(0%, -5%);
    }

    45% {
        transform: translate(0%, 0%);
    }

    100% {
        transform: translate(0%, 0%);
    }
}

.page-404 .image-container .clipart-eyes {
    display: block;
    width: 40%;
    height: 40%;
    top: 38%;
    left: 35%;
    position: absolute;
    background: url('../../Content/Images/Errors/404/clipart-girl-eyes.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-404-eyes 2s infinite ease-in-out;
}

@keyframes clipart-404-eyes {
    0% {
        transform: scale(1, 1);
    }

    20% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(1, 0);
    }

    30% {
        transform: scale(1, 0);
    }

    35% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

.page-404 .image-container .clipart-mouth {
    display: block;
    width: 19%;
    height: 19%;
    top: 64%;
    left: 45%;
    position: absolute;
    background: url('../../Content/Images/Errors/404/clipart-girl-mouth.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-404-mouth 3s ease-in-out infinite;
}

@keyframes clipart-404-mouth {
    0% {
        transform: translate(0%, 0%);
    }

    10% {
        transform: translate(0%, 10%);
    }

    15% {
        transform: translate(0%, 10%);
    }

    40% {
        transform: translate(0%, 10%);
    }

    45% {
        transform: translate(0%, 0%);
    }

    100% {
        transform: translate(0%, 0%);
    }
}

@media (max-width: 840px) {
    .page-404 h2 {
        display: block;
        font-size: 24px;
        text-align: center;
        font-weight: 500;
    }

    .page-404 p {
        width: 500px;
        margin: 30px auto 0px auto;
        text-align: center;
        font-size: 14px;
    }

    .page-404 .new-btn {
        margin-top: 40px;
        margin-bottom: 50px;
    }

    .page-404 .image-container {
        display: block;
        width: 250px;
        height: 250px;
        margin: 0px auto -20px auto;
    }
}

@media (max-width: 600px) {
    .page-404 h2 {
        display: block;
        font-size: 24px;
        text-align: center;
        font-weight: 500;
    }

    .page-404 p {
        width: 100%;
        margin: 30px auto 0px auto;
        padding-left: 30px;
        padding-right: 30px;
        text-align: center;
        font-size: 14px;
    }

    .page-404 .new-btn {
        margin-top: 40px;
        margin-bottom: 50px;
    }

    .page-404 .image-container {
        display: block;
        width: 250px;
        height: 250px;
        margin: 0px auto -20px auto;
    }
}

@media (max-width: 500px) {
    .page-404 h2 {
        font-size: 18px;
    }

    .page-404 .image-container {
        margin: 0px auto -10px auto;
    }
}

@media (max-width: 400px) {
    .page-404 .image-container {
        width: 180px;
        height: 180px;
    }

    .page-404 p {
        width: 100%;
        margin: 20px auto 0px auto;
        padding-left: 10px;
        padding-right: 10px;
    }
}
/* #endregion ================================ /404 page =============================================== */
/* #region ======================== OLD similar ads ==================================================== */
.similar-ad-info-container .similar-store-name {
    top: 48px;
    left: 1rem;
    bottom: auto;
    right: auto;
}

*[dir='rtl'] .similar-ad-info-container .similar-store-name {
    top: 48px;
    right: 1rem;
    bottom: auto;
    left: auto;
}

@media(min-width: 576px) and (max-width: 767.98px) {
    .custom-photo-similar-ad {
        height: 7.3rem !important;
    }
}

@media (max-width: 575.98px) {
    .custom-photo-similar-ad {
        height: 7rem !important;
    }
}

/* #endregion ==================== /OLD similar ads ==================================================== */
/* #region ============================= Cargo Delivery Promotion Page ================================= */
.cargo-promo-page section {
    display: block;
    width: 100%;
    margin: 0px;
    box-sizing: border-box;
    position: relative;
}

.cargo-promo-page h2 {
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: 40px;
}

    .cargo-promo-page h2.element-animation {
        transform: scale(0,0) translateY(60px);
        transition: transform 0.3s ease-in-out;
    }

        .cargo-promo-page h2.element-animation.element-show {
            transform: scale(1,1) translateY(0px);
            transition: transform 0.3s ease-in-out;
        }


@media (max-width: 575px) {
    .cargo-promo-page h2 {
        font-size: 24px;
        margin-bottom: 40px;
    }
}
/* #region --------------------------- Start ------------------------------------------ */
.cargo-promo-page section.start {
    background-color: #E6F4ED;
    height: 700px;
    overflow: hidden;
}

    .cargo-promo-page section.start .nav-menu-block {
        position: absolute;
        top: 40px;
        left: 0px;
        width: 100%;
        z-index: 2;
    }

        .cargo-promo-page section.start .nav-menu-block .nav-menu {
            display: block;
            width: 100%;
            text-align: center;
            list-style: none;
            font-size: 0px;
            z-index: 2;
        }

    .cargo-promo-page section.start .nav-menu li {
        display: inline-block;
        font-size: 16px;
    }

        .cargo-promo-page section.start .nav-menu li a {
            display: inline-block;
            text-decoration: none;
            text-transform: uppercase;
            font-weight: 700;
            padding-left: 20px;
            padding-right: 20px;
        }

    .cargo-promo-page section.start .slogan {
        display: block;
        position: absolute;
        top: 120px;
        left: 0px;
        width: 100%;
        z-index: 2;
        text-align: center;
    }

    .cargo-promo-page section.start .slogan-1 {
        display: block;
        width: 100%;
        text-align: center;
        font-weight: 800;
        color: var(--color-text-muted);
        font-size: 38px;
        text-transform: uppercase;
        line-height: 1em;
    }

        .cargo-promo-page section.start .slogan-1.element-animation {
            transform: translateY(60px);
            opacity: 0;
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }

            .cargo-promo-page section.start .slogan-1.element-animation.element-show {
                transform: translateY(0px);
                opacity: 1;
                transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
            }

    .cargo-promo-page section.start .slogan-2 {
        display: block;
        width: 100%;
        text-align: center;
        font-weight: 800;
        color: var(--color-text-primary);
        font-size: 65px;
        text-transform: uppercase;
        line-height: 1em;
    }

        .cargo-promo-page section.start .slogan-2.element-animation {
            transform: translateY(60px);
            opacity: 0;
            transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s;
        }

            .cargo-promo-page section.start .slogan-2.element-animation.element-show {
                transform: translateY(0px);
                opacity: 1;
                transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s;
            }

*[lang='mk-MK'] .cargo-promo-page section.start .slogan-1 {
    font-size: 28px;
}

*[lang='mk-MK'] .cargo-promo-page section.start .slogan-2 {
    font-size: 74px;
}

*[lang='sq-AL'] .cargo-promo-page section.start .slogan-1 {
    font-size: 37px;
}

*[lang='sq-AL'] .cargo-promo-page section.start .slogan-2 {
    font-size: 56px;
}

*[lang='ps-AF'] .cargo-promo-page section.start .slogan-1 {
    font-size: 43px;
}

*[lang='ps-AF'] .cargo-promo-page section.start .slogan-2 {
    font-size: 56px;
}

*[lang='fa-AF'] .cargo-promo-page section.start .slogan-1 {
    font-size: 43px;
}

*[lang='fa-AF'] .cargo-promo-page section.start .slogan-2 {
    font-size: 70px;
}

*[lang='sr-Latn-RS'] .cargo-promo-page section.start .slogan-1 {
    font-size: 30px;
}

*[lang='sr-Latn-RS'] .cargo-promo-page section.start .slogan-2 {
    font-size: 70px;
}

*[lang='sr-Latn-ME'] .cargo-promo-page section.start .slogan-1 {
    font-size: 30px;
}

*[lang='sr-Latn-ME'] .cargo-promo-page section.start .slogan-2 {
    font-size: 70px;
}

@media (max-width: 991px) {
    .cargo-promo-page section.start .slogan {
        top: 145px;
    }

    .cargo-promo-page section.start .slogan-1 {
        font-size: 31px;
    }

    .cargo-promo-page section.start .slogan-2 {
        font-size: 53px;
    }


    *[lang='mk-MK'] .cargo-promo-page section.start .slogan-1 {
        font-size: 20px;
    }

    *[lang='mk-MK'] .cargo-promo-page section.start .slogan-2 {
        font-size: 53px;
    }

    *[lang='sq-AL'] .cargo-promo-page section.start .slogan-1 {
        font-size: 30px;
    }

    *[lang='sq-AL'] .cargo-promo-page section.start .slogan-2 {
        font-size: 45px;
    }

    *[lang='ps-AF'] .cargo-promo-page section.start .slogan-1 {
        font-size: 35px;
    }

    *[lang='ps-AF'] .cargo-promo-page section.start .slogan-2 {
        font-size: 46px;
    }

    *[lang='fa-AF'] .cargo-promo-page section.start .slogan-1 {
        font-size: 37px;
    }

    *[lang='fa-AF'] .cargo-promo-page section.start .slogan-2 {
        font-size: 60px;
    }

    *[lang='sr-Latn-RS'] .cargo-promo-page section.start .slogan-1 {
        font-size: 23px;
    }

    *[lang='sr-Latn-RS'] .cargo-promo-page section.start .slogan-2 {
        font-size: 53px;
    }

    *[lang='sr-Latn-ME'] .cargo-promo-page section.start .slogan-1 {
        font-size: 23px;
    }

    *[lang='sr-Latn-ME'] .cargo-promo-page section.start .slogan-2 {
        font-size: 54px;
    }
}

@media (max-width: 767px) {
    .cargo-promo-page section.start .nav-menu li {
        font-size: 14px;
    }

    .cargo-promo-page section.start .slogan {
        top: 145px;
    }

    .cargo-promo-page section.start .slogan-1 {
        font-size: 22px;
    }

    .cargo-promo-page section.start .slogan-2 {
        font-size: 38px;
    }


    *[lang='mk-MK'] .cargo-promo-page section.start .slogan-1 {
        font-size: 16px;
    }

    *[lang='mk-MK'] .cargo-promo-page section.start .slogan-2 {
        font-size: 42px;
    }

    *[lang='sq-AL'] .cargo-promo-page section.start .slogan-1 {
        font-size: 23px;
    }

    *[lang='sq-AL'] .cargo-promo-page section.start .slogan-2 {
        font-size: 35px;
    }

    *[lang='ps-AF'] .cargo-promo-page section.start .slogan-1 {
        font-size: 29px;
    }

    *[lang='ps-AF'] .cargo-promo-page section.start .slogan-2 {
        font-size: 38px;
    }

    *[lang='fa-AF'] .cargo-promo-page section.start .slogan-1 {
        font-size: 32px;
    }

    *[lang='fa-AF'] .cargo-promo-page section.start .slogan-2 {
        font-size: 52px;
    }

    *[lang='sr-Latn-RS'] .cargo-promo-page section.start .slogan-1 {
        font-size: 20px;
    }

    *[lang='sr-Latn-RS'] .cargo-promo-page section.start .slogan-2 {
        font-size: 46px;
    }

    *[lang='sr-Latn-ME'] .cargo-promo-page section.start .slogan-1 {
        font-size: 20px;
    }

    *[lang='sr-Latn-ME'] .cargo-promo-page section.start .slogan-2 {
        font-size: 47px;
    }
}

@media (max-width: 575px) {
    .cargo-promo-page section.start {
        height: 430px;
    }

        .cargo-promo-page section.start .nav-menu-block {
            display: none;
        }

        .cargo-promo-page section.start .slogan {
            top: 65px;
        }

        .cargo-promo-page section.start .slogan-1 {
            font-size: 18px;
        }

        .cargo-promo-page section.start .slogan-2 {
            font-size: 31px;
        }


    *[lang='mk-MK'] .cargo-promo-page section.start .slogan-1 {
        font-size: 13px;
    }

    *[lang='mk-MK'] .cargo-promo-page section.start .slogan-2 {
        font-size: 34px;
    }

    *[lang='sq-AL'] .cargo-promo-page section.start .slogan-1 {
        font-size: 18px;
    }

    *[lang='sq-AL'] .cargo-promo-page section.start .slogan-2 {
        font-size: 27px;
    }

    *[lang='ps-AF'] .cargo-promo-page section.start .slogan-1 {
        font-size: 24px;
    }

    *[lang='ps-AF'] .cargo-promo-page section.start .slogan-2 {
        font-size: 31px;
    }

    *[lang='fa-AF'] .cargo-promo-page section.start .slogan-1 {
        font-size: 26px;
    }

    *[lang='fa-AF'] .cargo-promo-page section.start .slogan-2 {
        font-size: 42px;
    }

    *[lang='sr-Latn-RS'] .cargo-promo-page section.start .slogan-1 {
        font-size: 16px;
    }

    *[lang='sr-Latn-RS'] .cargo-promo-page section.start .slogan-2 {
        font-size: 37px;
    }

    *[lang='sr-Latn-ME'] .cargo-promo-page section.start .slogan-1 {
        font-size: 16px;
    }

    *[lang='sr-Latn-ME'] .cargo-promo-page section.start .slogan-2 {
        font-size: 37px;
    }
}

@media (max-width: 480px) {

    *[lang='sq-AL'] .cargo-promo-page section.start .slogan-1 {
        font-size: 15px;
    }

    *[lang='sq-AL'] .cargo-promo-page section.start .slogan-2 {
        font-size: 26px;
    }
}

@media (max-width: 400px) {
    .cargo-promo-page section.start .slogan {
        top: 45px;
    }

    .cargo-promo-page section.start .slogan-1,
    .cargo-promo-page section.start .slogan-2 {
        padding-left: 30px;
        padding-right: 30px;
    }

    .cargo-promo-page section.start .slogan-1 {
        margin-bottom: 5px;
    }

    *[lang='mk-MK'] .cargo-promo-page section.start .slogan-1 {
        font-size: 13px;
    }

    *[lang='mk-MK'] .cargo-promo-page section.start .slogan-2 {
        font-size: 29px;
    }

    *[lang='fa-AF'] .cargo-promo-page section.start .slogan-1 {
        font-size: 23px;
    }

    *[lang='fa-AF'] .cargo-promo-page section.start .slogan-2 {
        font-size: 36px;
    }
}

/* #region Clipart Truck */
.cargo-promo-page section.start .clipart-truck {
    display: block;
    width: 700px;
    height: 700px;
    position: absolute;
    z-index: 1;
    background-color: transparent;
    top: 0%;
    left: calc(50% - 350px);
    animation: cargopromo-start-truck 7s ease-out;
    animation-fill-mode: forwards;
}

@keyframes cargopromo-start-truck {
    from {
        transform: translateX(-200%);
    }

    to {
        transform: translate(0%);
    }
}

.cargo-promo-page section.start .clipart-truck .car-truck-shadow {
    background-color: rgba(61, 99, 80, 0.3) !important;
    border-radius: 50%;
    background-image: none;
}

@media (max-width: 1199px) {
    @keyframes cargopromo-start-truck {
        from {
            transform: translateX(-130%);
        }

        to {
            transform: translate(0%);
        }
    }
}

@media (max-width: 767px) {
    @keyframes cargopromo-start-truck {
        from {
            transform: translateX(-100%);
        }

        to {
            transform: translate(0%);
        }
    }
}

@media (max-width: 575px) {
    .cargo-promo-page section.start .clipart-truck {
        width: 430px;
        height: 430px;
        left: calc(50% - 222px);
    }
}

@media (max-width: 400px) {
    @keyframes cargopromo-start-truck {
        from {
            transform: translateX(-80%);
        }

        to {
            transform: translate(0%);
        }
    }
}
/* #endregion Clipart Truck */
/* #region Clipart Pickets */
.cargo-promo-page section.start .clipart-pickets1,
.cargo-promo-page section.start .clipart-pickets2 {
    display: block;
    position: absolute;
    top: 80%;
    width: 4000px;
    height: 6.1%;
    z-index: 1;
    animation: cargopromo-start-pickets 5s linear infinite;
}

.cargo-promo-page section.start .clipart-pickets1 {
    left: 0px;
}

.cargo-promo-page section.start .clipart-pickets2 {
    left: 4000px;
}

@keyframes cargopromo-start-pickets {
    0% {
        transform: translateX(0%);
    }

    99.9999% {
        transform: translateX(-4000px);
    }

    100% {
        transform: translateX(0%);
    }
}


.cargo-promo-page section.start .clipart-pickets1 div,
.cargo-promo-page section.start .clipart-pickets2 div {
    display: block;
    width: 100%;
    height: 100%;
    background: url('../../Content/Images/cargo-delivery/promotion/start/clipart-picket.svg') repeat-x left center transparent;
    background-size: contain;
}

/* #endregion Clipart Pickets */
/* #region Clipart Trees */
.cargo-promo-page section.start .clipart-trees1,
.cargo-promo-page section.start .clipart-trees2 {
    display: block;
    position: absolute;
    top: 34%;
    width: 4000px;
    height: 29.2%;
    z-index: 1;
    animation: cargopromo-start-trees 15s linear infinite;
}

.cargo-promo-page section.start .clipart-trees1 {
    left: 0px;
}

.cargo-promo-page section.start .clipart-trees2 {
    left: 4000px;
}

@keyframes cargopromo-start-trees {
    0% {
        transform: translateX(0%);
    }

    99.9999% {
        transform: translateX(-4000px);
    }

    100% {
        transform: translateX(0%);
    }
}

.cargo-promo-page section.start .clipart-trees1 div,
.cargo-promo-page section.start .clipart-trees2 div {
    display: block;
    width: 100%;
    height: 100%;
    background: url('../../Content/Images/cargo-delivery/promotion/start/clipart-trees.svg') repeat-x left center transparent;
    background-size: contain;
}


@media (max-width: 575px) {
    .cargo-promo-page section.start .clipart-trees1,
    .cargo-promo-page section.start .clipart-trees2 {
        height: 30%;
    }
}

/* #endregion Clipart Trees */
/* #region Clipart Clouds */
.cargo-promo-page section.start .clipart-clouds1,
.cargo-promo-page section.start .clipart-clouds2 {
    display: block;
    position: absolute;
    top: -5%;
    width: 4000px;
    height: 49%;
    z-index: 1;
    animation: cargopromo-start-clouds 50s linear infinite;
    opacity: 0.7;
}

.cargo-promo-page section.start .clipart-clouds1 {
    left: 0px;
}

.cargo-promo-page section.start .clipart-clouds2 {
    left: 4000px;
}

@keyframes cargopromo-start-clouds {
    0% {
        transform: translateX(0%);
    }

    99.9999% {
        transform: translateX(-4000px);
    }

    100% {
        transform: translateX(0%);
    }
}

.cargo-promo-page section.start .clipart-clouds1 div,
.cargo-promo-page section.start .clipart-clouds2 div {
    display: block;
    width: 100%;
    height: 100%;
    background: url('../../Content/Images/cargo-delivery/promotion/start/clipart-clouds.svg') repeat-x left center transparent;
    background-size: contain;
}

@media (max-width: 575px) {
    .cargo-promo-page section.start .clipart-clouds1,
    .cargo-promo-page section.start .clipart-clouds2 {
        height: 50%;
    }
}
/* #endregion Clipart Clouds */
/* #endregion ------------------------ /Start ----------------------------------------- */
/* #region ---------------------------- Goal ------------------------------------------ */
.cargo-promo-page section.goal {
    background-color: #FFFFFF;
    padding-top: 80px;
    padding-bottom: 120px;
}

    .cargo-promo-page section.goal h2 {
        margin-bottom: 60px;
    }

    .cargo-promo-page section.goal p {
        color: var(--color-text-muted);
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 60px;
    }

        .cargo-promo-page section.goal p.element-animation {
            opacity: 0;
            transform: translateY(80px);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }

            .cargo-promo-page section.goal p.element-animation.element-show {
                opacity: 1;
                transform: translateY(0px);
                transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            }

    .cargo-promo-page section.goal .goal-item {
        padding-left: 40px;
        padding-right: 40px;
        text-align: center;
    }

        .cargo-promo-page section.goal .goal-item p {
            margin-bottom: 0px;
        }

        .cargo-promo-page section.goal .goal-item.item-1 p.element-animation {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }

            .cargo-promo-page section.goal .goal-item.item-1 p.element-animation.element-show {
                opacity: 1;
                transform: translateY(0px);
                transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            }

        .cargo-promo-page section.goal .goal-item.item-2 p.element-animation {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.5s ease-in-out 0.1s, transform 0.5s ease-in-out 0.1s;
        }

            .cargo-promo-page section.goal .goal-item.item-2 p.element-animation.element-show {
                opacity: 1;
                transform: translateY(0px);
                transition: opacity 0.5s ease-in-out 0.1s, transform 0.5s ease-in-out 0.1s;
            }

        .cargo-promo-page section.goal .goal-item.item-3 p.element-animation {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.5s ease-in-out 0.2s, transform 0.5s ease-in-out 0.2s;
        }

            .cargo-promo-page section.goal .goal-item.item-3 p.element-animation.element-show {
                opacity: 1;
                transform: translateY(0px);
                transition: opacity 0.5s ease-in-out 0.2s, transform 0.5s ease-in-out 0.2s;
            }

    /* #region clipart-1 */
    .cargo-promo-page section.goal .item-1 .clipart-area {
        display: inline-block;
        width: 300px;
        height: 300px;
        margin-bottom: 20px;
    }

        .cargo-promo-page section.goal .item-1 .clipart-area.element-animation {
            opacity: 0;
            transform: scale(0);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }

            .cargo-promo-page section.goal .item-1 .clipart-area.element-animation.element-show {
                opacity: 1;
                transform: scale(1);
                transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            }

    .cargo-promo-page section.goal .item-1 .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .cargo-promo-page section.goal .item-1 .cloud-1,
    .cargo-promo-page section.goal .item-1 .cloud-2,
    .cargo-promo-page section.goal .item-1 .cloud-3,
    .cargo-promo-page section.goal .item-1 .cloud-4,
    .cargo-promo-page section.goal .item-1 .cloud-5,
    .cargo-promo-page section.goal .item-1 .cloud-6,
    .cargo-promo-page section.goal .item-1 .cloud-7,
    .cargo-promo-page section.goal .item-1 .cloud-8,
    .cargo-promo-page section.goal .item-1 .cloud-9,
    .cargo-promo-page section.goal .item-1 .cloud-10 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #EBEBEB;
    }

    .cargo-promo-page section.goal .item-1 .cloud-1 {
        width: 32%;
        height: 32%;
        top: 13%;
        left: 10%;
        animation: cargopromo-goals-item1-cloud-1 1.3s ease-in-out infinite alternate;
    }

    .cargo-promo-page section.goal .item-1 .cloud-2 {
        width: 25%;
        height: 25%;
        top: 3%;
        left: 26%;
        animation: cargopromo-goals-item1-cloud-2 1.7s ease-in-out infinite alternate;
    }

    .cargo-promo-page section.goal .item-1 .cloud-3 {
        width: 38%;
        height: 38%;
        top: 11%;
        left: 38%;
        animation: cargopromo-goals-item1-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .cargo-promo-page section.goal .item-1 .cloud-4 {
        width: 37%;
        height: 37%;
        top: 8%;
        left: 58%;
        animation: cargopromo-goals-item1-cloud-4 1.2s ease-in-out infinite alternate;
    }

    .cargo-promo-page section.goal .item-1 .cloud-5 {
        width: 47%;
        height: 47%;
        top: 32%;
        left: 53%;
        animation: cargopromo-goals-item1-cloud-5 1.6s ease-in-out infinite alternate;
    }

    .cargo-promo-page section.goal .item-1 .cloud-6 {
        width: 34%;
        height: 34%;
        top: 63%;
        left: 58%;
        animation: cargopromo-goals-item1-cloud-6 1.8s ease-in-out infinite alternate;
    }

    .cargo-promo-page section.goal .item-1 .cloud-7 {
        width: 40%;
        height: 40%;
        top: 55%;
        left: 28%;
        animation: cargopromo-goals-item1-cloud-7 1.3s ease-in-out infinite alternate;
    }

    .cargo-promo-page section.goal .item-1 .cloud-8 {
        width: 23%;
        height: 23%;
        top: 69%;
        left: 10%;
        animation: cargopromo-goals-item1-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .cargo-promo-page section.goal .item-1 .cloud-9 {
        width: 45%;
        height: 45%;
        top: 31%;
        left: 0%;
        animation: cargopromo-goals-item1-cloud-9 1.6s ease-in-out infinite alternate;
    }

    .cargo-promo-page section.goal .item-1 .cloud-10 {
        width: 45%;
        height: 45%;
        top: 27%;
        left: 29%;
    }

@keyframes cargopromo-goals-item1-cloud-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(8%, 8%);
    }
}

@keyframes cargopromo-goals-item1-cloud-2 {
    from {
        transform: translate(2%, 6%);
    }

    to {
        transform: translate(-2%, -6%);
    }
}

@keyframes cargopromo-goals-item1-cloud-3 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@keyframes cargopromo-goals-item1-cloud-4 {
    from {
        transform: translate(-6%, 5%);
    }

    to {
        transform: translate(6%, -5%);
    }
}

@keyframes cargopromo-goals-item1-cloud-5 {
    from {
        transform: translate(8%, 0%);
    }

    to {
        transform: translate(-8%, 0%);
    }
}

@keyframes cargopromo-goals-item1-cloud-6 {
    from {
        transform: translate(-8%, -5%);
    }

    to {
        transform: translate(8%, 5%);
    }
}

@keyframes cargopromo-goals-item1-cloud-7 {
    from {
        transform: translate(0%, 8%);
    }

    to {
        transform: translate(0%, -6%);
    }
}

@keyframes cargopromo-goals-item1-cloud-8 {
    from {
        transform: translate(-4%, 4%);
    }

    to {
        transform: translate(4%, -4%);
    }
}

@keyframes cargopromo-goals-item1-cloud-9 {
    from {
        transform: translate(-4%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

.cargo-promo-page section.goal .item-1 .tshirt {
    display: block;
    position: absolute;
    width: 45%;
    height: 45%;
    top: 40%;
    left: 4%;
    z-index: 1;
    animation: argopromo-goals-item1-tshirt 1.8s ease-in-out infinite alternate;
}

    .cargo-promo-page section.goal .item-1 .tshirt > div {
        display: block;
        width: 100%;
        height: 100%;
        background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-tshirt.svg') no-repeat center center transparent;
        background-size: contain;
        animation: argopromo-goals-item1-tshirt-inner 1.8s ease-in-out infinite alternate;
    }

@keyframes argopromo-goals-item1-tshirt {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0.8);
    }
}

@keyframes argopromo-goals-item1-tshirt-inner {
    from {
        transform: rotate(40deg);
    }

    to {
        transform: rotate(50deg);
    }
}

.cargo-promo-page section.goal .item-1 .sneakers {
    display: block;
    position: absolute;
    width: 35%;
    height: 35%;
    top: 58%;
    left: 64%;
    z-index: 1;
    animation: argopromo-goals-item1-sneakers 1.6s ease-in-out infinite alternate;
}

    .cargo-promo-page section.goal .item-1 .sneakers > div {
        display: block;
        width: 100%;
        height: 100%;
        background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-sneakers.svg') no-repeat center center transparent;
        background-size: contain;
        animation: argopromo-goals-item1-sneakers-inner 1.6s ease-in-out infinite alternate;
    }

@keyframes argopromo-goals-item1-sneakers {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0.8);
    }
}

@keyframes argopromo-goals-item1-sneakers-inner {
    from {
        transform: rotate(23deg);
    }

    to {
        transform: scale(10deg);
    }
}

.cargo-promo-page section.goal .item-1 .mobile {
    display: block;
    position: absolute;
    width: 35%;
    height: 35%;
    top: 14%;
    left: 55%;
    z-index: 1;
    animation: argopromo-goals-item1-mobile 1.9s ease-in-out infinite alternate;
}

    .cargo-promo-page section.goal .item-1 .mobile > div {
        display: block;
        width: 100%;
        height: 100%;
        background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-smartphone.svg') no-repeat center center transparent;
        background-size: contain;
        animation: argopromo-goals-item1-mobile-inner 1.9s ease-in-out infinite alternate;
    }

@keyframes argopromo-goals-item1-mobile {
    from {
        transform: scale(0.8);
    }

    to {
        transform: scale(1);
    }
}

@keyframes argopromo-goals-item1-mobile-inner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(24deg);
    }
}

.cargo-promo-page section.goal .item-1 .dress {
    display: block;
    position: absolute;
    width: 53%;
    height: 53%;
    top: 6%;
    left: 7%;
    z-index: 1;
    animation: argopromo-goals-item1-dress 1.8s ease-in-out infinite alternate;
}

    .cargo-promo-page section.goal .item-1 .dress > div {
        display: block;
        width: 100%;
        height: 100%;
        background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-dress.svg') no-repeat center center transparent;
        background-size: contain;
        animation: argopromo-goals-item1-dress-inner 1.8s ease-in-out infinite alternate;
    }

@keyframes argopromo-goals-item1-dress {
    from {
        transform: scale(0.7);
    }

    to {
        transform: scale(1);
    }
}

@keyframes argopromo-goals-item1-dress-inner {
    from {
        transform: rotate(-15deg);
    }

    to {
        transform: rotate(-30deg);
    }
}

.cargo-promo-page section.goal .item-1 .microwave {
    display: block;
    position: absolute;
    width: 47%;
    height: 47%;
    top: 46%;
    left: 29%;
    z-index: 1;
    animation: argopromo-goals-item1-microwave 1.6s ease-in-out infinite alternate;
}

    .cargo-promo-page section.goal .item-1 .microwave > div {
        display: block;
        width: 100%;
        height: 100%;
        background: url('../../Content/Images/cargo-delivery/offer-create/congratulations/clipart-microwave.svg') no-repeat center center transparent;
        background-size: contain;
        transform: rotate(-11deg);
        animation: argopromo-goals-item1-microwave-inner 1.6s ease-in-out infinite alternate;
    }

@keyframes argopromo-goals-item1-microwave {
    from {
        transform: scale(0.8);
    }

    to {
        transform: scale(1);
    }
}

@keyframes argopromo-goals-item1-microwave-inner {
    from {
        transform: rotate(-11deg);
    }

    to {
        transform: rotate(-25deg);
    }
}

/* #endregion clipart-1 */
/* #region clipart-2 */
.cargo-promo-page section.goal .item-2 .clipart-area {
    display: inline-block;
    width: 300px;
    height: 300px;
    margin-bottom: 20px;
}

    .cargo-promo-page section.goal .item-2 .clipart-area.element-animation {
        opacity: 0;
        transform: scale(0);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

        .cargo-promo-page section.goal .item-2 .clipart-area.element-animation.element-show {
            opacity: 1;
            transform: scale(1);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }

.cargo-promo-page section.goal .item-2 .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.cargo-promo-page section.goal .item-2 .cloud-1,
.cargo-promo-page section.goal .item-2 .cloud-2,
.cargo-promo-page section.goal .item-2 .cloud-3,
.cargo-promo-page section.goal .item-2 .cloud-4,
.cargo-promo-page section.goal .item-2 .cloud-5,
.cargo-promo-page section.goal .item-2 .cloud-6,
.cargo-promo-page section.goal .item-2 .cloud-7,
.cargo-promo-page section.goal .item-2 .cloud-8,
.cargo-promo-page section.goal .item-2 .cloud-9,
.cargo-promo-page section.goal .item-2 .cloud-10,
.cargo-promo-page section.goal .item-2 .cloud-11,
.cargo-promo-page section.goal .item-2 .cloud-12 {
    display: block;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background-color: #EBEBEB;
}

.cargo-promo-page section.goal .item-2 .cloud-1 {
    top: 12%;
    left: 9%;
    width: 30%;
    height: 30%;
    animation: cargopromo-goals-item2-cloud-1 1.5s ease-in-out infinite alternate;
}


.cargo-promo-page section.goal .item-2 .cloud-2 {
    top: 0%;
    left: 26%;
    width: 20%;
    height: 20%;
    animation: cargopromo-goals-item2-cloud-2 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-2 .cloud-3 {
    top: 4%;
    left: 33%;
    width: 33%;
    height: 33%;
    animation: cargopromo-goals-item2-cloud-3 1.8s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-2 .cloud-4 {
    top: 4%;
    left: 51%;
    width: 33%;
    height: 33%;
    animation: cargopromo-goals-item2-cloud-4 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-2 .cloud-5 {
    top: 14%;
    left: 74%;
    width: 23%;
    height: 23%;
    animation: cargopromo-goals-item2-cloud-5 1.5s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-2 .cloud-6 {
    top: 29%;
    left: 66%;
    width: 35%;
    height: 35%;
    animation: cargopromo-goals-item2-cloud-6 1.7s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-2 .cloud-7 {
    top: 36%;
    left: 42%;
    width: 55%;
    height: 55%;
    animation: cargopromo-goals-item2-cloud-7 1.8s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-2 .cloud-8 {
    top: 74%;
    left: 58%;
    width: 25%;
    height: 25%;
    animation: cargopromo-goals-item2-cloud-8 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-2 .cloud-9 {
    top: 61%;
    left: 27%;
    width: 40%;
    height: 40%;
    animation: cargopromo-goals-item2-cloud-9 1.5s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-2 .cloud-10 {
    top: 59%;
    left: 9%;
    width: 34%;
    height: 34%;
    animation: cargopromo-goals-item2-cloud-10 1.7s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-2 .cloud-11 {
    top: 24%;
    left: 1%;
    width: 54%;
    height: 54%;
    animation: cargopromo-goals-item2-cloud-11 1.8s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-2 .cloud-12 {
    top: 16%;
    left: 19%;
    width: 64%;
    height: 64%;
}

@keyframes cargopromo-goals-item2-cloud-1 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@keyframes cargopromo-goals-item2-cloud-2 {
    from {
        transform: translate(2%, 10%);
    }

    to {
        transform: translate(-2%, 0%);
    }
}

@keyframes cargopromo-goals-item2-cloud-3 {
    from {
        transform: translate(0%, -10%);
    }

    to {
        transform: translate(0%, 10%);
    }
}

@keyframes cargopromo-goals-item2-cloud-4 {
    from {
        transform: translate(-1%, 10%);
    }

    to {
        transform: translate(1%, -10%);
    }
}

@keyframes cargopromo-goals-item2-cloud-5 {
    from {
        transform: translate(7%, -6%);
    }

    to {
        transform: translate(-7%, 6%);
    }
}

@keyframes cargopromo-goals-item2-cloud-6 {
    from {
        transform: translate(-7%, 0%);
    }

    to {
        transform: translate(7%, 0%);
    }
}

@keyframes cargopromo-goals-item2-cloud-7 {
    from {
        transform: translate(4%, 4%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

@keyframes cargopromo-goals-item2-cloud-8 {
    from {
        transform: translate(-3%, -8%);
    }

    to {
        transform: translate(3%, 8%);
    }
}

@keyframes cargopromo-goals-item2-cloud-9 {
    from {
        transform: translate(0%, 6%);
    }

    to {
        transform: translate(0%, -6%);
    }
}

@keyframes cargopromo-goals-item2-cloud-10 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes cargopromo-goals-item2-cloud-11 {
    from {
        transform: translate(-7%, 0%);
    }

    to {
        transform: translate(7%, 0%);
    }
}


.cargo-promo-page section.goal .item-2 .shadow {
    display: block;
    position: absolute;
    width: 74%;
    height: 7%;
    top: 81%;
    left: 14%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.cargo-promo-page section.goal .item-2 .clipart-barchart {
    display: block;
    position: absolute;
    width: 62%;
    height: 70%;
    top: 14%;
    left: 20%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-barchart.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.cargo-promo-page section.goal .item-2 .clipart-body {
    display: block;
    position: absolute;
    width: 25%;
    height: 43%;
    top: 39%;
    left: 20%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-body.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.cargo-promo-page section.goal .item-2 .clipart-leg {
    display: block;
    position: absolute;
    width: 7%;
    height: 24%;
    top: 60%;
    left: 37%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-leg.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item2-leg 1s ease-in-out alternate infinite;
    transform-origin: 0% 0%;
}

@keyframes cargopromo-goals-item2-leg {
    from {
        transform: rotate(-5deg);
    }

    to {
        transform: rotate(5deg);
    }
}

.cargo-promo-page section.goal .item-2 .head-front {
    display: block;
    position: absolute;
    width: 13%;
    height: 19%;
    top: 26%;
    left: 20%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-head-front.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item2-head 8s ease-in-out infinite;
    transform-origin: 40% 70%;
}

.cargo-promo-page section.goal .item-2 .clipart-head-back {
    display: block;
    position: absolute;
    width: 10%;
    height: 22%;
    top: 26%;
    left: 22%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-head-back.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item2-head 8s ease-in-out infinite;
    transform-origin: 40% 70%;
}

@keyframes cargopromo-goals-item2-head {
    0% {
        transform: rotate(0deg);
    }

    40% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(10deg);
    }

    70% {
        transform: rotate(0deg);
    }

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

.cargo-promo-page section.goal .item-2 .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.cargo-promo-page section.goal .item-2 .clipart-eye1 {
    display: block;
    position: absolute;
    width: 11%;
    height: 9%;
    top: 40%;
    left: 37%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-eye.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item2-eyes 6s ease-in-out infinite;
}

.cargo-promo-page section.goal .item-2 .clipart-eye2 {
    display: block;
    position: absolute;
    width: 11%;
    height: 9%;
    top: 40%;
    left: 69%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-eye.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item2-eyes 6s ease-in-out infinite;
}

@keyframes cargopromo-goals-item2-eyes {
    0% {
        transform: scale(1, 1);
    }

    30% {
        transform: scale(1, 1);
    }

    31% {
        transform: scale(1, 0);
    }

    32% {
        transform: scale(1, 0);
    }

    31% {
        transform: scale(1, 0);
    }

    33% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

.cargo-promo-page section.goal .item-2 .clipart-brows {
    display: block;
    position: absolute;
    width: 54%;
    height: 9%;
    top: 32%;
    left: 31%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-brows.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item2-brows 4s ease-in-out infinite;
}

@keyframes cargopromo-goals-item2-brows {
    0% {
        transform: translateY(0%);
    }

    20% {
        transform: translateY(0%);
    }

    22% {
        transform: translateY(-20%);
    }

    40% {
        transform: translateY(-20%);
    }

    42% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

.cargo-promo-page section.goal .item-2 .clipart-coin1 {
    display: block;
    position: absolute;
    width: 14%;
    height: 8%;
    top: 49%;
    left: 28%;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1-move 2s infinite linear;
}

.cargo-promo-page section.goal .item-2 .clipart-coin2 {
    display: block;
    position: absolute;
    width: 14%;
    height: 8%;
    top: 49%;
    left: 34%;
    z-index: 1;
    opacity: 0;
    animation: cargopromo-goals-item2-coin1-move 2s infinite linear 0.5s;
}

.cargo-promo-page section.goal .item-2 .clipart-coin3 {
    display: block;
    position: absolute;
    width: 14%;
    height: 8%;
    top: 49%;
    left: 28%;
    z-index: 1;
    opacity: 0;
    animation: cargopromo-goals-item2-coin1-move 2s infinite linear 1s;
}

.cargo-promo-page section.goal .item-2 .clipart-coin4 {
    display: block;
    position: absolute;
    width: 14%;
    height: 8%;
    top: 49%;
    left: 34%;
    z-index: 1;
    opacity: 0;
    animation: cargopromo-goals-item2-coin1-move 2s infinite linear 1.5s;
}

@keyframes cargopromo-goals-item2-coin1-move {
    0% {
        opacity: 0;
        transform: translateY(0%);
    }

    5% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-600%);
    }
}

.cargo-promo-page section.goal .item-2 .clipart-coin1 > div {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1-zoom 2s linear infinite;
}

.cargo-promo-page section.goal .item-2 .clipart-coin2 > div {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1-zoom 2s linear infinite 0.5s;
}

.cargo-promo-page section.goal .item-2 .clipart-coin3 > div {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1-zoom 2s linear infinite 1s;
}

.cargo-promo-page section.goal .item-2 .clipart-coin4 > div {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1-zoom 2s linear infinite 1.5s;
}


@keyframes cargopromo-goals-item2-coin1-zoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0.4);
    }
}

.cargo-promo-page section.goal .item-2 .clipart-coin1 > div > div {
    display: block;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-coin.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1 0.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-2 .clipart-coin2 > div > div {
    display: block;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-coin.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1 0.4s ease-in-out infinite alternate 0.5s;
}

.cargo-promo-page section.goal .item-2 .clipart-coin3 > div > div {
    display: block;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-coin.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1 0.4s ease-in-out infinite alternate 1s;
}

.cargo-promo-page section.goal .item-2 .clipart-coin4 > div > div {
    display: block;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-coin.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1 0.4s ease-in-out infinite alternate 1.5s;
}

@keyframes cargopromo-goals-item2-coin1 {
    from {
        transform: translate(-0%, 0%);
    }

    to {
        transform: translate(20%, 0%);
    }
}


/* #endregion clipart-2 */
/* #region clipart-3 */
.cargo-promo-page section.goal .item-3 .clipart-area {
    display: inline-block;
    width: 300px;
    height: 300px;
    margin-bottom: 20px;
}

    .cargo-promo-page section.goal .item-3 .clipart-area.element-animation {
        opacity: 0;
        transform: scale(0);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

        .cargo-promo-page section.goal .item-3 .clipart-area.element-animation.element-show {
            opacity: 1;
            transform: scale(1);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }

.cargo-promo-page section.goal .item-3 .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.cargo-promo-page section.goal .item-3 .cloud-1,
.cargo-promo-page section.goal .item-3 .cloud-2,
.cargo-promo-page section.goal .item-3 .cloud-3,
.cargo-promo-page section.goal .item-3 .cloud-4,
.cargo-promo-page section.goal .item-3 .cloud-5,
.cargo-promo-page section.goal .item-3 .cloud-6,
.cargo-promo-page section.goal .item-3 .cloud-7,
.cargo-promo-page section.goal .item-3 .cloud-8,
.cargo-promo-page section.goal .item-3 .cloud-9,
.cargo-promo-page section.goal .item-3 .cloud-10,
.cargo-promo-page section.goal .item-3 .cloud-11 {
    display: block;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background-color: #EBEBEB;
}

.cargo-promo-page section.goal .item-3 .cloud-1 {
    width: 32%;
    height: 32%;
    top: 11%;
    left: 5%;
    animation: cargopromo-goals-item3-cloud-1 1.5s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-3 .cloud-2 {
    width: 22%;
    height: 22%;
    top: 1%;
    left: 23%;
    animation: cargopromo-goals-item3-cloud-2 1.7s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-3 .cloud-3 {
    width: 38%;
    height: 38%;
    top: 4%;
    left: 35%;
    animation: cargopromo-goals-item3-cloud-3 1.3s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-3 .cloud-4 {
    width: 28%;
    height: 28%;
    top: 7%;
    left: 61%;
    animation: cargopromo-goals-item3-cloud-4 1.5s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-3 .cloud-5 {
    width: 20%;
    height: 20%;
    top: 23%;
    left: 78%;
    animation: cargopromo-goals-item3-cloud-5 1.8s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-3 .cloud-6 {
    width: 44%;
    height: 44%;
    top: 31%;
    left: 56%;
    animation: cargopromo-goals-item3-cloud-6 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-3 .cloud-7 {
    width: 34%;
    height: 34%;
    top: 57%;
    left: 57%;
    animation: cargopromo-goals-item3-cloud-7 1.6s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-3 .cloud-8 {
    width: 28%;
    height: 28%;
    top: 70%;
    left: 38%;
    animation: cargopromo-goals-item3-cloud-8 1.3s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-3 .cloud-9 {
    width: 34%;
    height: 34%;
    top: 57%;
    left: 14%;
    animation: cargopromo-goals-item3-cloud-9 1.7s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-3 .cloud-10 {
    width: 50%;
    height: 50%;
    top: 28%;
    left: 0%;
    animation: cargopromo-goals-item3-cloud-10 1.5s ease-in-out infinite alternate;
}

.cargo-promo-page section.goal .item-3 .cloud-11 {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 18%;
}

@keyframes cargopromo-goals-item3-cloud-1 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes cargopromo-goals-item3-cloud-2 {
    from {
        transform: translate(1%, 6%);
    }

    to {
        transform: translate(-1%, -4%);
    }
}

@keyframes cargopromo-goals-item3-cloud-3 {
    from {
        transform: translate(0%, -7%);
    }

    to {
        transform: translate(0%, 7%);
    }
}

@keyframes cargopromo-goals-item3-cloud-4 {
    from {
        transform: translate(-2%, 7%);
    }

    to {
        transform: translate(2%, -7%);
    }
}

@keyframes cargopromo-goals-item3-cloud-5 {
    from {
        transform: translate(8%, -8%);
    }

    to {
        transform: translate(-8%, 8%);
    }
}

@keyframes cargopromo-goals-item3-cloud-6 {
    from {
        transform: translate(-7%, 0%);
    }

    to {
        transform: translate(7%, 0%);
    }
}

@keyframes cargopromo-goals-item3-cloud-7 {
    from {
        transform: translate(4%, 4%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

@keyframes cargopromo-goals-item3-cloud-8 {
    from {
        transform: translate(0%, -7%);
    }

    to {
        transform: translate(0%, 7%);
    }
}

@keyframes cargopromo-goals-item3-cloud-9 {
    from {
        transform: translate(-6%, 6%);
    }

    to {
        transform: translate(6%, -6%);
    }
}

@keyframes cargopromo-goals-item3-cloud-10 {
    from {
        transform: translate(7%, 0%);
    }

    to {
        transform: translate(-7%, 0%);
    }
}

.cargo-promo-page section.goal .item-3 .hand-1 {
    display: block;
    position: absolute;
    top: 10%;
    left: 0%;
    width: 64%;
    height: 64%;
    background: url('../../Content/Images/cargo-delivery/promotion/goals/item3/clipart-hand1.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item3-hand-1 2s ease-in-out infinite alternate;
    transform-origin: -40% 40%;
}

@keyframes cargopromo-goals-item3-hand-1 {
    from {
        transform: rotate(-5deg);
    }

    to {
        transform: rotate(5deg);
    }
}

.cargo-promo-page section.goal .item-3 .hand-2 {
    display: block;
    position: absolute;
    top: 35%;
    left: 30%;
    width: 67%;
    height: 67%;
    background: url('../../Content/Images/cargo-delivery/promotion/goals/item3/clipart-hand2.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item3-hand-1 2s ease-in-out infinite alternate;
    transform-origin: 140% 40%;
}

@keyframes cargopromo-goals-item3-hand-2 {
    from {
        transform: rotate(-5deg);
    }

    to {
        transform: rotate(5deg);
    }
}

/* #endregion clipart-3 */

@media (max-width: 1199px) {
    .cargo-promo-page section.goal .item-1 .clipart-area,
    .cargo-promo-page section.goal .item-2 .clipart-area,
    .cargo-promo-page section.goal .item-3 .clipart-area {
        width: 250px;
        height: 250px;
    }

    .cargo-promo-page section.goal .item-2 .clipart-eye1 {
        left: 34.5%;
    }

    .cargo-promo-page section.goal .item-2 .clipart-brows {
        width: 51%;
        left: 33%;
    }
}

@media (max-width: 991px) {
    .cargo-promo-page section.goal .item-1 .clipart-area,
    .cargo-promo-page section.goal .item-2 .clipart-area,
    .cargo-promo-page section.goal .item-3 .clipart-area {
        width: 350px;
        height: 350px;
    }

    .cargo-promo-page section.goal .item-1,
    .cargo-promo-page section.goal .item-2 {
        margin-bottom: 80px;
    }

        .cargo-promo-page section.goal .item-1 p,
        .cargo-promo-page section.goal .item-2 p,
        .cargo-promo-page section.goal .item-3 p {
            font-weight: 700;
        }
}

@media (max-width: 575px) {
    .cargo-promo-page section.goal .item-1 .clipart-area,
    .cargo-promo-page section.goal .item-2 .clipart-area,
    .cargo-promo-page section.goal .item-3 .clipart-area {
        width: 250px;
        height: 250px;
    }

    .cargo-promo-page section.goal .item-1,
    .cargo-promo-page section.goal .item-2 {
        margin-bottom: 50px;
    }

    .cargo-promo-page section.goal p {
        padding-left: 40px;
        padding-right: 40px;
        font-size: 16px;
        margin-bottom: 20px;
    }

    .cargo-promo-page section.goal h2 {
        margin-bottom: 40px;
    }

    .cargo-promo-page section.goal .item-1,
    .cargo-promo-page section.goal .item-2,
    .cargo-promo-page section.goal .item-3 {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 480px) {
    .cargo-promo-page section.goal p {
        padding-left: 20px;
        padding-right: 20px;
        font-size: 16px;
        margin-bottom: 20px;
    }

    .cargo-promo-page section.goal .item-1,
    .cargo-promo-page section.goal .item-2,
    .cargo-promo-page section.goal .item-3 {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 400px) {
    .cargo-promo-page section.goal {
        padding-top: 40px;
        padding-bottom: 100px;
    }

        .cargo-promo-page section.goal h2 {
            padding-left: 10px;
            padding-right: 10px;
        }

        .cargo-promo-page section.goal .item-1 .clipart-area,
        .cargo-promo-page section.goal .item-2 .clipart-area,
        .cargo-promo-page section.goal .item-3 .clipart-area {
            width: 200px;
            height: 200px;
        }
}

/* #endregion ------------------------- Goal ------------------------------------------ */
/* #region ------------------------ How it works -------------------------------------- */
.cargo-promo-page section.howitworks {
    background-color: #F9F9F9;
    padding-top: 80px;
    padding-bottom: 120px;
}

    .cargo-promo-page section.howitworks h3 {
        text-align: center;
        font-weight: 600;
        font-size: 24px;
        text-transform: uppercase;
        margin-bottom: 40px;
    }

    .cargo-promo-page section.howitworks .left-side h3 {
        color: var(--color-text-primary);
    }

    .cargo-promo-page section.howitworks .right-side h3 {
        color: var(--color-text-danger);
    }

    .cargo-promo-page section.howitworks .left-side {
        border-right: 1px solid #EEEEEE;
        padding-right: 40px;
    }

*[dir='rtl'] .cargo-promo-page section.howitworks .left-side {
    border-right: 0px none transparent;
    border-left: 1px solid #EEEEEE;
    padding-right: 15px;
    padding-left: 40px;
}

.cargo-promo-page section.howitworks .right-side {
    padding-left: 40px;
}

*[dir='rtl'] .cargo-promo-page section.howitworks .right-side {
    padding-left: 15px;
    padding-right: 40px;
}

.cargo-promo-page section.howitworks .item {
    display: block;
    position: relative;
    padding-left: 75px;
    margin-bottom: 40px;
}

    .cargo-promo-page section.howitworks .item.element-animation {
        opacity: 0;
        transform: translateY(60px);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

        .cargo-promo-page section.howitworks .item.element-animation.element-show {
            opacity: 1;
            transform: translateY(0px);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }

*[dir='rtl'] .cargo-promo-page section.howitworks .item {
    padding-left: 0px;
    padding-right: 75px;
}

.cargo-promo-page section.howitworks .item .badge {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    padding-top: 7px;
}

*[dir='rtl'] .cargo-promo-page section.howitworks .item .badge {
    left: auto;
    right: 0px;
}

.cargo-promo-page section.howitworks .left-side .item .badge {
    background-color: #CBE5D8;
    color: var(--color-text-primary);
}

.cargo-promo-page section.howitworks .right-side .item .badge {
    background-color: #FBCFCF;
    color: var(--color-text-danger);
}

.cargo-promo-page section.howitworks .item p {
    font-size: 18px;
    color: var(--color-text-muted);
    font-weight: 400;
}

.cargo-promo-page section.howitworks .left-side .clipart-area,
.cargo-promo-page section.howitworks .right-side .clipart-area {
    display: inline-block;
    width: 300px;
    height: 300px;
    margin-bottom: 20px;
}

    .cargo-promo-page section.howitworks .left-side .clipart-area.element-animation,
    .cargo-promo-page section.howitworks .right-side .clipart-area.element-animation {
        opacity: 0;
        transform: scale(0);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

        .cargo-promo-page section.howitworks .left-side .clipart-area.element-animation.element-show,
        .cargo-promo-page section.howitworks .right-side .clipart-area.element-animation.element-show {
            opacity: 1;
            transform: scale(1);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }

.cargo-promo-page section.howitworks .left-side .inner,
.cargo-promo-page section.howitworks .right-side .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.cargo-promo-page section.howitworks .left-side h3.element-animation,
.cargo-promo-page section.howitworks .right-side h3.element-animation {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

    .cargo-promo-page section.howitworks .left-side h3.element-animation.element-show,
    .cargo-promo-page section.howitworks .right-side h3.element-animation.element-show {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }
/* #region clipart-1 */
.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-1,
.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-2,
.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-3,
.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-4,
.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-5,
.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-6,
.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-7,
.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-8,
.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-9,
.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-10 {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    background-color: #EBEBEB;
    display: block;
}

.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-1 {
    top: 37%;
    left: 0%;
    width: 22%;
    height: 22%;
    animation: cargopromo-howitworks-item1-cloud-1 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-2 {
    top: 13%;
    left: 12%;
    width: 42%;
    height: 42%;
    animation: cargopromo-howitworks-item1-cloud-2 1.6s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-3 {
    top: 3%;
    left: 34%;
    width: 34%;
    height: 34%;
    animation: cargopromo-howitworks-item1-cloud-3 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-4 {
    top: 10%;
    left: 53%;
    width: 30%;
    height: 30%;
    animation: cargopromo-howitworks-item1-cloud-4 1.7s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-5 {
    top: 15%;
    left: 48%;
    width: 50%;
    height: 50%;
    animation: cargopromo-howitworks-item1-cloud-5 1.5s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-6 {
    top: 48%;
    left: 75%;
    width: 25%;
    height: 25%;
    animation: cargopromo-howitworks-item1-cloud-6 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-7 {
    top: 46%;
    left: 37%;
    width: 50%;
    height: 50%;
    animation: cargopromo-howitworks-item1-cloud-7 1.8s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-8 {
    top: 68%;
    left: 24%;
    width: 30%;
    height: 30%;
    animation: cargopromo-howitworks-item1-cloud-8 1.7s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-9 {
    top: 36%;
    left: 11%;
    width: 50%;
    height: 50%;
    animation: cargopromo-howitworks-item1-cloud-9 1.9s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .left-side .clipart-area .cloud-10 {
    top: 26%;
    left: 27%;
    width: 50%;
    height: 50%;
}

@keyframes cargopromo-howitworks-item1-cloud-1 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(14%, 0%);
    }
}

@keyframes cargopromo-howitworks-item1-cloud-2 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(-5%, -5%);
    }
}

@keyframes cargopromo-howitworks-item1-cloud-3 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@keyframes cargopromo-howitworks-item1-cloud-4 {
    from {
        transform: translate(-5%, 8%);
    }

    to {
        transform: translate(5%, -8%);
    }
}

@keyframes cargopromo-howitworks-item1-cloud-5 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@keyframes cargopromo-howitworks-item1-cloud-6 {
    from {
        transform: translate(-7%, 0%);
    }

    to {
        transform: translate(7%, 0%);
    }
}

@keyframes cargopromo-howitworks-item1-cloud-7 {
    from {
        transform: translate(3%, 3%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

@keyframes cargopromo-howitworks-item1-cloud-8 {
    from {
        transform: translate(3%, -3%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@keyframes cargopromo-howitworks-item1-cloud-9 {
    from {
        transform: translate(-6%, 6%);
    }

    to {
        transform: translate(6%, -6%);
    }
}

.cargo-promo-page section.howitworks .left-side .clipart-area .clipart-body {
    display: block;
    position: absolute;
    top: 40%;
    left: 18%;
    width: 58%;
    height: 58%;
    z-index: 1;
    background: url("../../Content/Images/cargo-delivery/promotion/howitworks/item1/clipart-body.svg") no-repeat center center transparent;
    background-size: contain;
}

.cargo-promo-page section.howitworks .left-side .clipart-area .clipart-hand {
    display: block;
    position: absolute;
    top: 21%;
    left: 25%;
    width: 58%;
    height: 58%;
    z-index: 1;
    background: url("../../Content/Images/cargo-delivery/promotion/howitworks/item1/clipart-hand.svg") no-repeat center center transparent;
    background-size: contain;
    animation: cargopromo-howitworks-item1-clipart-hand 4s ease-in-out infinite alternate;
    transform-origin: 5% 54%;
}

@keyframes cargopromo-howitworks-item1-clipart-hand {
    from {
        transform: rotate(-5deg);
    }

    to {
        transform: rotate(5deg);
    }
}

.cargo-promo-page section.howitworks .left-side .clipart-area .head {
    display: block;
    position: absolute;
    top: 11%;
    left: 25%;
    width: 33%;
    height: 33%;
    z-index: 1;
    background: url("../../Content/Images/cargo-delivery/promotion/howitworks/item1/clipart-head.svg") no-repeat center center transparent;
    background-size: contain;
    animation: cargopromo-howitworks-item1-clipart-head 6s ease-in-out infinite;
    transform-origin: 50% 100%;
}

@keyframes cargopromo-howitworks-item1-clipart-head {
    0% {
        transform: rotate(-12deg);
    }

    40% {
        transform: rotate(-12deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(-12deg);
    }
}

.cargo-promo-page section.howitworks .left-side .clipart-area .clipart-eye1 {
    display: block;
    position: absolute;
    top: 57%;
    left: 28%;
    width: 12%;
    height: 12%;
    z-index: 1;
    background: url("../../Content/Images/cargo-delivery/promotion/howitworks/item1/clipart-eye.svg") no-repeat center center transparent;
    background-size: contain;
    animation: cargopromo-howitworks-item1-clipart-eye 4s ease-in-out infinite;
}

.cargo-promo-page section.howitworks .left-side .clipart-area .clipart-eye2 {
    display: block;
    position: absolute;
    top: 56%;
    left: 60%;
    width: 12%;
    height: 12%;
    z-index: 1;
    background: url("../../Content/Images/cargo-delivery/promotion/howitworks/item1/clipart-eye.svg") no-repeat center center transparent;
    background-size: contain;
    animation: cargopromo-howitworks-item1-clipart-eye 4s ease-in-out infinite;
}

@keyframes cargopromo-howitworks-item1-clipart-eye {
    0% {
        transform: scale(1, 1);
    }

    10% {
        transform: scale(1, 1);
    }

    11% {
        transform: scale(1, 0);
    }

    14% {
        transform: scale(1, 0);
    }

    15% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}
/* #endregion clipart-1 */
/* #region clipart-2 */
.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-1,
.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-2,
.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-3,
.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-4,
.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-5,
.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-6,
.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-7,
.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-8,
.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-9,
.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-10 {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    background-color: #EBEBEB;
    display: block;
}

.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-1 {
    top: 11%;
    left: 5%;
    width: 52%;
    height: 52%;
    animation: cargopromo-howitworks-item2-cloud-1 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-2 {
    top: 0%;
    left: 17%;
    width: 32%;
    height: 32%;
    animation: cargopromo-howitworks-item2-cloud-2 1.6s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-3 {
    top: 0%;
    left: 40%;
    width: 38%;
    height: 38%;
    animation: cargopromo-howitworks-item2-cloud-3 1.8s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-4 {
    top: 14%;
    left: 69%;
    width: 26%;
    height: 26%;
    animation: cargopromo-howitworks-item2-cloud-4 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-5 {
    top: 28%;
    left: 52%;
    width: 46%;
    height: 46%;
    animation: cargopromo-howitworks-item2-cloud-5 1.6s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-6 {
    top: 64%;
    left: 67%;
    width: 26%;
    height: 26%;
    animation: cargopromo-howitworks-item2-cloud-6 1.3s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-7 {
    top: 50%;
    left: 28%;
    width: 50%;
    height: 50%;
    animation: cargopromo-howitworks-item2-cloud-7 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-8 {
    top: 59%;
    left: 12%;
    width: 37%;
    height: 37%;
    animation: cargopromo-howitworks-item2-cloud-8 1.7s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-9 {
    top: 43%;
    left: 2%;
    width: 30%;
    height: 30%;
    animation: cargopromo-howitworks-item2-cloud-9 1.3s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .right-side .clipart-area .cloud-10 {
    top: 19%;
    left: 21%;
    width: 60%;
    height: 60%;
}

@keyframes cargopromo-howitworks-item2-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes cargopromo-howitworks-item2-cloud-2 {
    from {
        transform: translate(2%, 5%);
    }

    to {
        transform: translate(-2%, -5%);
    }
}

@keyframes cargopromo-howitworks-item2-cloud-3 {
    from {
        transform: translate(2%, -5%);
    }

    to {
        transform: translate(-2%, 5%);
    }
}

@keyframes cargopromo-howitworks-item2-cloud-4 {
    from {
        transform: translate(-5%, 5%);
    }

    to {
        transform: translate(5%, -5%);
    }
}

@keyframes cargopromo-howitworks-item2-cloud-5 {
    from {
        transform: translate(5%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

@keyframes cargopromo-howitworks-item2-cloud-6 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes cargopromo-howitworks-item2-cloud-7 {
    from {
        transform: translate(0%, 6%);
    }

    to {
        transform: translate(0%, -6%);
    }
}

@keyframes cargopromo-howitworks-item2-cloud-8 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes cargopromo-howitworks-item2-cloud-9 {
    from {
        transform: translate(-7%, 0%);
    }

    to {
        transform: translate(7%, 0%);
    }
}

.cargo-promo-page section.howitworks .right-side .clipart-area .clipart-body {
    display: block;
    position: absolute;
    top: 34%;
    left: 21%;
    width: 65%;
    height: 65%;
    z-index: 1;
    background: url("../../Content/Images/cargo-delivery/promotion/howitworks/item2/clipart-body.svg") no-repeat center center transparent;
    background-size: contain;
}

.cargo-promo-page section.howitworks .right-side .clipart-area .head {
    display: block;
    position: absolute;
    top: 9%;
    left: 39%;
    width: 32%;
    height: 32%;
    z-index: 1;
    background: url("../../Content/Images/cargo-delivery/promotion/howitworks/item2/clipart-head.svg") no-repeat center center transparent;
    background-size: contain;
    animation: cargopromo-howitworks-item2-clipart-head 2s ease-in-out infinite alternate;
    transform-origin: 50% 100%;
}

@keyframes cargopromo-howitworks-item2-clipart-head {
    from {
        transform: rotate(-5deg);
    }

    to {
        transform: rotate(5deg);
    }
}

.cargo-promo-page section.howitworks .right-side .clipart-area .clipart-eye1 {
    display: block;
    position: absolute;
    top: 51%;
    left: 55%;
    width: 11%;
    height: 11%;
    z-index: 1;
    background: url("../../Content/Images/cargo-delivery/promotion/howitworks/item2/clipart-eye.svg") no-repeat center center transparent;
    background-size: contain;
    animation: cargopromo-howitworks-item1-clipart-eye 3s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .right-side .clipart-area .clipart-eye2 {
    display: block;
    position: absolute;
    top: 51%;
    left: 23%;
    width: 11%;
    height: 11%;
    z-index: 1;
    background: url("../../Content/Images/cargo-delivery/promotion/howitworks/item2/clipart-eye.svg") no-repeat center center transparent;
    background-size: contain;
    animation: cargopromo-howitworks-item1-clipart-eye 3s ease-in-out infinite alternate;
}


.cargo-promo-page section.howitworks .right-side .clipart-area .clipart-brows {
    display: block;
    position: absolute;
    top: 23%;
    left: 23%;
    width: 44%;
    height: 44%;
    z-index: 1;
    background: url("../../Content/Images/cargo-delivery/promotion/howitworks/item2/clipart-brows.svg") no-repeat center center transparent;
    background-size: contain;
    animation: cargopromo-howitworks-item2-clipart-brows 5s ease-in-out infinite;
}

@keyframes cargopromo-howitworks-item2-clipart-brows {
    0% {
        transform: translateY(0%);
    }

    20% {
        transform: translateY(0%);
    }

    22% {
        transform: translateY(-5%);
    }

    40% {
        transform: translateY(-5%);
    }

    42% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

.cargo-promo-page section.howitworks .right-side .clipart-coin1 {
    display: block;
    position: absolute;
    width: 14%;
    height: 8%;
    top: 49%;
    left: 16%;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1-move 2s infinite linear;
}

.cargo-promo-page section.howitworks .right-side .clipart-coin2 {
    display: block;
    position: absolute;
    width: 14%;
    height: 8%;
    top: 49%;
    left: 23%;
    z-index: 1;
    opacity: 0;
    animation: cargopromo-goals-item2-coin1-move 2s infinite linear 0.5s;
}

.cargo-promo-page section.howitworks .right-side .clipart-coin3 {
    display: block;
    position: absolute;
    width: 14%;
    height: 8%;
    top: 49%;
    left: 18%;
    z-index: 1;
    opacity: 0;
    animation: cargopromo-goals-item2-coin1-move 2s infinite linear 1s;
}

.cargo-promo-page section.howitworks .right-side .clipart-coin4 {
    display: block;
    position: absolute;
    width: 14%;
    height: 8%;
    top: 49%;
    left: 22%;
    z-index: 1;
    opacity: 0;
    animation: cargopromo-goals-item2-coin1-move 2s infinite linear 1.5s;
}

.cargo-promo-page section.howitworks .right-side .clipart-coin1 > div {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1-zoom 2s linear infinite;
}

.cargo-promo-page section.howitworks .right-side .clipart-coin2 > div {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1-zoom 2s linear infinite 0.5s;
}

.cargo-promo-page section.howitworks .right-side .clipart-coin3 > div {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1-zoom 2s linear infinite 1s;
}

.cargo-promo-page section.howitworks .right-side .clipart-coin4 > div {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1-zoom 2s linear infinite 1.5s;
}

.cargo-promo-page section.howitworks .right-side .clipart-coin1 > div > div {
    display: block;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-coin.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1 0.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.howitworks .right-side .clipart-coin2 > div > div {
    display: block;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-coin.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1 0.4s ease-in-out infinite alternate 0.5s;
}

.cargo-promo-page section.howitworks .right-side .clipart-coin3 > div > div {
    display: block;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-coin.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1 0.4s ease-in-out infinite alternate 1s;
}

.cargo-promo-page section.howitworks .right-side .clipart-coin4 > div > div {
    display: block;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background: url("../../Content/Images/cargo-delivery/promotion/goals/item2/clipart-coin.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-goals-item2-coin1 0.4s ease-in-out infinite alternate 1.5s;
}


/* #endregion clipart-2 */

@media (max-width: 991px) {
    .cargo-promo-page section.howitworks .left-side {
        border-right: 0px none transparent;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 80px;
    }

    *[dir='rtl'] .cargo-promo-page section.howitworks .left-side {
        border-right: 0px none transparent;
        border-left: 0px none transparent;
        padding-left: 15px;
        padding-right: 15px;
    }

    .cargo-promo-page section.howitworks .right-side,
    *[dir='rtl'] .cargo-promo-page section.howitworks .right-side {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 575px) {
    .cargo-promo-page section.howitworks .left-side .clipart-area,
    .cargo-promo-page section.howitworks .right-side .clipart-area {
        width: 250px;
        height: 250px;
    }

    .cargo-promo-page section.howitworks .left-side h3,
    .cargo-promo-page section.howitworks .right-side h3 {
        font-size: 18px;
    }


    .cargo-promo-page section.howitworks .item p {
        font-size: 14px;
    }

    .cargo-promo-page section.howitworks .left-side,
    .cargo-promo-page section.howitworks .right-side,
    *[dir='rtl'] .cargo-promo-page section.howitworks .left-side,
    *[dir='rtl'] .cargo-promo-page section.howitworks .right-side {
        padding-left: 55px;
        padding-right: 55px;
    }

    .cargo-promo-page section.howitworks .left-side {
        margin-bottom: 30px;
    }

    .cargo-promo-page section.howitworks {
        padding-bottom: 80px;
    }
}

@media (max-width: 480px) {
    .cargo-promo-page section.howitworks .left-side,
    .cargo-promo-page section.howitworks .right-side,
    *[dir='rtl'] .cargo-promo-page section.howitworks .left-side,
    *[dir='rtl'] .cargo-promo-page section.howitworks .right-side {
        padding-left: 25px;
        padding-right: 25px;
    }

    .cargo-promo-page section.howitworks {
        padding-bottom: 40px;
    }
}

@media (max-width: 400px) {
    .cargo-promo-page section.howitworks {
        padding-top: 50px;
        padding-bottom: 40px;
    }

        .cargo-promo-page section.howitworks .item {
            display: block;
            position: relative;
            padding-left: 50px;
            margin-bottom: 20px;
        }

            .cargo-promo-page section.howitworks .item .badge {
                display: block;
                position: absolute;
                top: 0px;
                left: 0px;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                text-align: center;
                font-size: 24px;
                font-weight: 700;
                padding-top: 5px;
            }

        .cargo-promo-page section.howitworks .left-side .clipart-area,
        .cargo-promo-page section.howitworks .right-side .clipart-area {
            width: 200px;
            height: 200px;
        }
}
/* #endregion -------------------- /How it works -------------------------------------- */
/* #region -------------------------- Benefits ---------------------------------------- */
.cargo-promo-page section.benefits {
    background-color: #FFFFFF;
    padding-top: 80px;
    padding-bottom: 120px;
}

    .cargo-promo-page section.benefits h3 {
        text-align: center;
        font-weight: 600;
        font-size: 24px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .cargo-promo-page section.benefits .left-side h3 {
        color: var(--color-text-primary);
    }

    .cargo-promo-page section.benefits .right-side h3 {
        color: var(--color-text-danger);
    }

    .cargo-promo-page section.benefits .left-side {
        border-right: 1px solid #EEEEEE;
        padding-right: 40px;
    }

*[dir='rtl'] .cargo-promo-page section.benefits .left-side {
    border-right: 0px none transparent;
    border-left: 1px solid #EEEEEE;
    padding-right: 15px;
    padding-left: 40px;
}

.cargo-promo-page section.benefits .right-side {
    padding-left: 40px;
}

*[dir='rtl'] .cargo-promo-page section.benefits .right-side {
    padding-left: 15px;
    padding-right: 40px;
}

.cargo-promo-page section.benefits h4 {
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 30px;
    color: var(--color-text-muted);
    min-height: 40px;
}

.cargo-promo-page section.benefits .item {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin-bottom: 20px;
}

    .cargo-promo-page section.benefits .item.element-animation {
        opacity: 0;
        transform: translateY(80px);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

        .cargo-promo-page section.benefits .item.element-animation.element-show {
            opacity: 1;
            transform: translateY(0px);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }

    .cargo-promo-page section.benefits .item > div {
        display: table-row;
    }

        .cargo-promo-page section.benefits .item > div > div {
            display: table-cell;
            vertical-align: middle;
        }

            .cargo-promo-page section.benefits .item > div > div:first-child {
                width: 125px;
                text-align: left;
                vertical-align: middle;
            }

*[dir='rtl'] .cargo-promo-page section.benefits .item > div > div:first-child {
    text-align: right;
}

.cargo-promo-page section.benefits .item p {
    font-size: 18px;
    color: var(--color-text-muted);
    font-weight: 400;
}

.cargo-promo-page section.benefits .item .badge {
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    font-size: 64px;
    font-weight: 700;
    padding-top: 17px;
}

.cargo-promo-page section.benefits .left-side .item .badge {
    background-color: #CBE5D8;
    color: var(--color-text-primary);
}

.cargo-promo-page section.benefits .right-side .item .badge {
    background-color: #FBCFCF;
    color: var(--color-text-danger);
}

    .cargo-promo-page section.benefits .left-side .item .badge i,
    .cargo-promo-page section.benefits .right-side .item .badge i {
        margin-block-start: -20px;
    }

.cargo-promo-page section.benefits .left-side .clipart-area,
.cargo-promo-page section.benefits .right-side .clipart-area {
    display: inline-block;
    width: 300px;
    height: 300px;
    margin-bottom: 20px;
}

.cargo-promo-page section.benefits .left-side .inner,
.cargo-promo-page section.benefits .right-side .inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.cargo-promo-page section.benefits .left-side .clipart-area.element-animation,
.cargo-promo-page section.benefits .right-side .clipart-area.element-animation,
.cargo-promo-page section.benefits .left-side h3.element-animation,
.cargo-promo-page section.benefits .right-side h3.element-animation,
.cargo-promo-page section.benefits .left-side h4.element-animation,
.cargo-promo-page section.benefits .right-side h4.element-animation {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

    .cargo-promo-page section.benefits .left-side .clipart-area.element-animation.element-show,
    .cargo-promo-page section.benefits .right-side .clipart-area.element-animation.element-show,
    .cargo-promo-page section.benefits .left-side h3.element-animation.element-show,
    .cargo-promo-page section.benefits .right-side h3.element-animation.element-show,
    .cargo-promo-page section.benefits .left-side h4.element-animation.element-show,
    .cargo-promo-page section.benefits .right-side h4.element-animation.element-show {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }


/* #region Clipart-1 */
.cargo-promo-page section.benefits .left-side .clipart-area .cloud-1,
.cargo-promo-page section.benefits .left-side .clipart-area .cloud-2,
.cargo-promo-page section.benefits .left-side .clipart-area .cloud-3,
.cargo-promo-page section.benefits .left-side .clipart-area .cloud-4,
.cargo-promo-page section.benefits .left-side .clipart-area .cloud-5,
.cargo-promo-page section.benefits .left-side .clipart-area .cloud-6,
.cargo-promo-page section.benefits .left-side .clipart-area .cloud-7,
.cargo-promo-page section.benefits .left-side .clipart-area .cloud-8,
.cargo-promo-page section.benefits .left-side .clipart-area .cloud-9,
.cargo-promo-page section.benefits .left-side .clipart-area .cloud-10,
.cargo-promo-page section.benefits .left-side .clipart-area .cloud-11 {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    background-color: #EBEBEB;
    display: block;
}

.cargo-promo-page section.benefits .left-side .clipart-area .cloud-1 {
    top: 4%;
    left: 14%;
    width: 23%;
    height: 23%;
    animation: cargopromo-benefits-item1-cloud-1 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .left-side .clipart-area .cloud-2 {
    top: 5%;
    left: 30%;
    width: 36%;
    height: 36%;
    animation: cargopromo-benefits-item1-cloud-2 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .left-side .clipart-area .cloud-3 {
    top: 1%;
    left: 51%;
    width: 28%;
    height: 28%;
    animation: cargopromo-benefits-item1-cloud-3 1.6s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .left-side .clipart-area .cloud-4 {
    top: 10%;
    left: 59%;
    width: 38%;
    height: 38%;
    animation: cargopromo-benefits-item1-cloud-4 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .left-side .clipart-area .cloud-5 {
    top: 39%;
    left: 76%;
    width: 24%;
    height: 24%;
    animation: cargopromo-benefits-item1-cloud-5 1.7s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .left-side .clipart-area .cloud-6 {
    top: 52%;
    left: 57%;
    width: 40%;
    height: 40%;
    animation: cargopromo-benefits-item1-cloud-6 1.5s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .left-side .clipart-area .cloud-7 {
    top: 69%;
    left: 45%;
    width: 30%;
    height: 30%;
    animation: cargopromo-benefits-item1-cloud-7 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .left-side .clipart-area .cloud-8 {
    top: 57%;
    left: 18%;
    width: 40%;
    height: 40%;
    animation: cargopromo-benefits-item1-cloud-8 1.7s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .left-side .clipart-area .cloud-9 {
    top: 36%;
    left: 0%;
    width: 46%;
    height: 46%;
    animation: cargopromo-benefits-item1-cloud-9 1.8s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .left-side .clipart-area .cloud-10 {
    top: 19%;
    left: 3%;
    width: 29%;
    height: 29%;
    animation: cargopromo-benefits-item1-cloud-10 1.6s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .left-side .clipart-area .cloud-11 {
    top: 17%;
    left: 20%;
    width: 64%;
    height: 64%;
}

@keyframes cargopromo-benefits-item1-cloud-1 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(10%, 10%);
    }
}

@keyframes cargopromo-benefits-item1-cloud-2 {
    from {
        transform: translate(2%, 4%);
    }

    to {
        transform: translate(-2%, -4%);
    }
}

@keyframes cargopromo-benefits-item1-cloud-3 {
    from {
        transform: translate(2%, -6%);
    }

    to {
        transform: translate(-2%, 6%);
    }
}

@keyframes cargopromo-benefits-item1-cloud-4 {
    from {
        transform: translate(-4%, 4%);
    }

    to {
        transform: translate(4%, -4%);
    }
}

@keyframes cargopromo-benefits-item1-cloud-5 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

@keyframes cargopromo-benefits-item1-cloud-6 {
    from {
        transform: translate(-5%, -6%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes cargopromo-benefits-item1-cloud-7 {
    from {
        transform: translate(1%, 6%);
    }

    to {
        transform: translate(-1%, -6%);
    }
}

@keyframes cargopromo-benefits-item1-cloud-8 {
    from {
        transform: translate(-1%, -7%);
    }

    to {
        transform: translate(1%, 6%);
    }
}

@keyframes cargopromo-benefits-item1-cloud-9 {
    from {
        transform: translate(-4%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

@keyframes cargopromo-benefits-item1-cloud-10 {
    from {
        transform: translate(4%, 5%);
    }

    to {
        transform: translate(-4%, -5%);
    }
}

.cargo-promo-page section.benefits .left-side .clipart-area .effect-bars {
    display: block;
    position: absolute;
    top: 30%;
    left: 48%;
    width: 17%;
    height: 17%;
    z-index: 1;
}

    .cargo-promo-page section.benefits .left-side .clipart-area .effect-bars .bar-1 {
        display: block;
        position: absolute;
        top: 8%;
        left: 10%;
        width: 30%;
        height: 30%;
        z-index: 1;
        animation: cargopromo-benefits-item1-bar-1 0.5s linear infinite;
    }

        .cargo-promo-page section.benefits .left-side .clipart-area .effect-bars .bar-1 > div {
            display: block;
            width: 100%;
            height: 25%;
            margin-top: 40%;
            background-color: #FFFFFF;
            border-radius: var(--radius-16);
            transform: rotate(45deg);
        }

@keyframes cargopromo-benefits-item1-bar-1 {
    from {
        transform: translate(0%, 0%);
        opacity: 1;
    }

    to {
        transform: translate(-60%, -60%);
        opacity: 0;
    }
}

.cargo-promo-page section.benefits .left-side .clipart-area .effect-bars .bar-2 {
    display: block;
    position: absolute;
    top: 54%;
    left: 58%;
    width: 30%;
    height: 30%;
    z-index: 1;
    animation: cargopromo-benefits-item1-bar-2 0.5s linear infinite;
}

    .cargo-promo-page section.benefits .left-side .clipart-area .effect-bars .bar-2 > div {
        display: block;
        width: 100%;
        height: 25%;
        margin-top: 40%;
        background-color: #FFFFFF;
        border-radius: var(--radius-16);
        transform: rotate(45deg);
    }

@keyframes cargopromo-benefits-item1-bar-2 {
    from {
        transform: translate(0%, 0%);
        opacity: 1;
    }

    to {
        transform: translate(60%, 60%);
        opacity: 0;
    }
}

.cargo-promo-page section.benefits .left-side .clipart-area .effect-bars .bar-3 {
    display: block;
    position: absolute;
    top: 13%;
    left: 58%;
    width: 30%;
    height: 30%;
    z-index: 1;
    animation: cargopromo-benefits-item1-bar-3 0.5s linear infinite;
}

    .cargo-promo-page section.benefits .left-side .clipart-area .effect-bars .bar-3 > div {
        display: block;
        width: 100%;
        height: 25%;
        margin-top: 40%;
        background-color: #FFFFFF;
        border-radius: var(--radius-16);
        transform: rotate(-31deg);
    }

@keyframes cargopromo-benefits-item1-bar-3 {
    from {
        transform: translate(0%, 0%);
        opacity: 1;
    }

    to {
        transform: translate(60%, -40%);
        opacity: 0;
    }
}

.cargo-promo-page section.benefits .left-side .clipart-area .effect-bars .bar-4 {
    display: block;
    position: absolute;
    top: 1%;
    left: 33%;
    width: 30%;
    height: 30%;
    z-index: 1;
    animation: cargopromo-benefits-item1-bar-4 0.5s linear infinite;
}

    .cargo-promo-page section.benefits .left-side .clipart-area .effect-bars .bar-4 > div {
        display: block;
        width: 100%;
        height: 25%;
        margin-top: 40%;
        background-color: #FFFFFF;
        border-radius: var(--radius-16);
        transform: rotate(90deg);
    }

@keyframes cargopromo-benefits-item1-bar-4 {
    from {
        transform: translate(0%, 0%);
        opacity: 1;
    }

    to {
        transform: translate(0%, -60%);
        opacity: 0;
    }
}


.cargo-promo-page section.benefits .left-side .clipart-area .effect-bars .bar-5 {
    display: block;
    position: absolute;
    top: 60%;
    left: 33%;
    width: 30%;
    height: 30%;
    z-index: 1;
    animation: cargopromo-benefits-item1-bar-5 0.5s linear infinite;
}

    .cargo-promo-page section.benefits .left-side .clipart-area .effect-bars .bar-5 > div {
        display: block;
        width: 100%;
        height: 25%;
        margin-top: 40%;
        background-color: #FFFFFF;
        border-radius: var(--radius-16);
        transform: rotate(90deg);
    }

@keyframes cargopromo-benefits-item1-bar-5 {
    from {
        transform: translate(0%, 0%);
        opacity: 1;
    }

    to {
        transform: translate(0%, 60%);
        opacity: 0;
    }
}

.cargo-promo-page section.benefits .left-side .clipart-area .clipart-body {
    display: block;
    position: absolute;
    width: 83%;
    height: 83%;
    top: 8%;
    left: 11%;
    background: url("../../Content/Images/cargo-delivery/promotion/benefits/item1/clipart-body.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.cargo-promo-page section.benefits .left-side .clipart-area .clipart-hand {
    display: block;
    position: absolute;
    width: 27%;
    height: 27%;
    top: 38%;
    left: 11%;
    background: url("../../Content/Images/cargo-delivery/promotion/benefits/item1/clipart-hand.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.cargo-promo-page section.benefits .left-side .clipart-area .clipart-hand {
    display: block;
    position: absolute;
    width: 27%;
    height: 27%;
    top: 38%;
    left: 11%;
    background: url("../../Content/Images/cargo-delivery/promotion/benefits/item1/clipart-hand.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    animation: cargopromo-benefits-item1-hand 2s ease-in-out infinite alternate;
    transform-origin: 50% 0%;
}

@keyframes cargopromo-benefits-item1-hand {
    from {
        transform: rotate(-2deg);
    }

    to {
        transform: rotate(2deg);
    }
}

.cargo-promo-page section.benefits .left-side .clipart-area .head {
    display: block;
    position: absolute;
    width: 16%;
    height: 16%;
    top: 19%;
    left: 23%;
    background: url("../../Content/Images/cargo-delivery/promotion/benefits/item1/clipart-head.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    transform-origin: 50% 100%;
    animation: cargopromo-howitworks-item1-clipart-head 5s ease-in-out infinite;
    transform-origin: 50% 100%;
}

@keyframes cargopromo-howitworks-item1-clipart-head {
    0% {
        transform: rotate(-5deg);
    }

    40% {
        transform: rotate(-5deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(-5deg);
    }
}

.cargo-promo-page section.benefits .left-side .clipart-area .clipart-eye1 {
    display: block;
    position: absolute;
    width: 13%;
    height: 13%;
    top: 52%;
    left: 29%;
    background: url("../../Content/Images/cargo-delivery/promotion/benefits/item1/clipart-eye.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    transform-origin: 50% 100%;
    animation: cargopromo-benefits-item1-clipart-eye 4s ease-in-out infinite;
}

.cargo-promo-page section.benefits .left-side .clipart-area .clipart-eye2 {
    display: block;
    position: absolute;
    width: 13%;
    height: 13%;
    top: 52%;
    left: 60%;
    background: url("../../Content/Images/cargo-delivery/promotion/benefits/item1/clipart-eye.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
    transform-origin: 50% 100%;
    animation: cargopromo-benefits-item1-clipart-eye 4s ease-in-out infinite;
}

@keyframes cargopromo-benefits-item1-clipart-eye {
    0% {
        transform: scale(1, 1);
    }

    10% {
        transform: scale(1, 1);
    }

    11% {
        transform: scale(1, 0);
    }

    14% {
        transform: scale(1, 0);
    }

    15% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

.cargo-promo-page section.benefits .left-side .clipart-area .clipart-shadow1 {
    display: block;
    position: absolute;
    width: 30%;
    height: 3%;
    border-radius: 50%;
    top: 89%;
    left: 16%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.2);
}

.cargo-promo-page section.benefits .left-side .clipart-area .clipart-shadow2 {
    display: block;
    position: absolute;
    width: 32%;
    height: 2%;
    border-radius: 50%;
    top: 87%;
    left: 30%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.2);
}
/* #endregion Clipart-1 */
/* #region Clipart-2 */
.cargo-promo-page section.benefits .right-side .clipart-area .cloud-1,
.cargo-promo-page section.benefits .right-side .clipart-area .cloud-2,
.cargo-promo-page section.benefits .right-side .clipart-area .cloud-3,
.cargo-promo-page section.benefits .right-side .clipart-area .cloud-4,
.cargo-promo-page section.benefits .right-side .clipart-area .cloud-5,
.cargo-promo-page section.benefits .right-side .clipart-area .cloud-6,
.cargo-promo-page section.benefits .right-side .clipart-area .cloud-7,
.cargo-promo-page section.benefits .right-side .clipart-area .cloud-8,
.cargo-promo-page section.benefits .right-side .clipart-area .cloud-9,
.cargo-promo-page section.benefits .right-side .clipart-area .cloud-10,
.cargo-promo-page section.benefits .right-side .clipart-area .cloud-11 {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    background-color: #EBEBEB;
    display: block;
}

.cargo-promo-page section.benefits .right-side .clipart-area .cloud-1 {
    top: 2%;
    left: 17%;
    width: 40%;
    height: 40%;
    animation: cargopromo-benefits-item2-cloud-1 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .right-side .clipart-area .cloud-2 {
    top: 5%;
    left: 50%;
    width: 42%;
    height: 42%;
    animation: cargopromo-benefits-item2-cloud-2 1.6s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .right-side .clipart-area .cloud-3 {
    top: 25%;
    left: 64%;
    width: 36%;
    height: 36%;
    animation: cargopromo-benefits-item2-cloud-3 1.5s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .right-side .clipart-area .cloud-4 {
    top: 41%;
    left: 47%;
    width: 50%;
    height: 50%;
    animation: cargopromo-benefits-item2-cloud-4 1.7s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .right-side .clipart-area .cloud-5 {
    top: 53%;
    left: 29%;
    width: 46%;
    height: 46%;
    animation: cargopromo-benefits-item2-cloud-5 1.6s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .right-side .clipart-area .cloud-6 {
    top: 42%;
    left: 2%;
    width: 50%;
    height: 50%;
    animation: cargopromo-benefits-item2-cloud-6 1.4s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .right-side .clipart-area .cloud-7 {
    top: 20%;
    left: 0%;
    width: 32%;
    height: 32%;
    animation: cargopromo-benefits-item2-cloud-7 1.7s ease-in-out infinite alternate;
}

.cargo-promo-page section.benefits .right-side .clipart-area .cloud-8 {
    top: 20%;
    left: 20%;
    width: 58%;
    height: 58%;
}

@keyframes cargopromo-benefits-item2-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes cargopromo-benefits-item2-cloud-2 {
    from {
        transform: translate(-4%, 4%);
    }

    to {
        transform: translate(4%, -4%);
    }
}

@keyframes cargopromo-benefits-item2-cloud-3 {
    from {
        transform: translate(5%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

@keyframes cargopromo-benefits-item2-cloud-4 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@keyframes cargopromo-benefits-item2-cloud-5 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@keyframes cargopromo-benefits-item2-cloud-6 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes cargopromo-benefits-item2-cloud-7 {
    from {
        transform: translate(-4%, 2%);
    }

    to {
        transform: translate(5%, -2%);
    }
}

.cargo-promo-page section.benefits .right-side .clipart-area .clipart-store {
    display: block;
    position: absolute;
    width: 90%;
    height: 90%;
    top: 4%;
    left: 4%;
    background: url("../../Content/Images/cargo-delivery/promotion/benefits/item2/clipart-store.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

    .cargo-promo-page section.benefits .right-side .clipart-area .clipart-store .counter {
        display: block;
        position: absolute;
        color: #FFFFFF;
        font-size: 45px;
        font-weight: 800;
        background-color: transparent;
        text-align: center;
        width: 17%;
        height: 20%;
        top: 60%;
        border-radius: var(--radius-4);
        overflow: hidden;
    }

        .cargo-promo-page section.benefits .right-side .clipart-area .clipart-store .counter p {
            height: 1em;
            padding: 0px;
            margin: 0px;
            margin-top: 0em;
        }

        .cargo-promo-page section.benefits .right-side .clipart-area .clipart-store .counter.counter-1 {
            right: 4%;
        }

            .cargo-promo-page section.benefits .right-side .clipart-area .clipart-store .counter.counter-1 div {
                animation: cargopromo-benefits-item2-counter 0.1s linear infinite;
            }

        .cargo-promo-page section.benefits .right-side .clipart-area .clipart-store .counter.counter-2 {
            right: 22.5%;
        }

            .cargo-promo-page section.benefits .right-side .clipart-area .clipart-store .counter.counter-2 div {
                animation: cargopromo-benefits-item2-counter 1s linear infinite;
            }

        .cargo-promo-page section.benefits .right-side .clipart-area .clipart-store .counter.counter-3 {
            right: 41%;
        }

            .cargo-promo-page section.benefits .right-side .clipart-area .clipart-store .counter.counter-3 div {
                animation: cargopromo-benefits-item2-counter 10s linear infinite;
            }

        .cargo-promo-page section.benefits .right-side .clipart-area .clipart-store .counter.counter-4 {
            right: 59.5%;
        }

            .cargo-promo-page section.benefits .right-side .clipart-area .clipart-store .counter.counter-4 div {
                animation: cargopromo-benefits-item2-counter 100s linear infinite;
            }

        .cargo-promo-page section.benefits .right-side .clipart-area .clipart-store .counter.counter-5 {
            right: 78%;
        }

            .cargo-promo-page section.benefits .right-side .clipart-area .clipart-store .counter.counter-5 div {
                animation: cargopromo-benefits-item2-counter 1000s linear infinite;
            }

.cargo-promo-page section.benefits .right-side .clipart-area .clipart-shadow {
    display: block;
    position: absolute;
    z-index: 1;
    top: 76%;
    left: -2%;
    width: 102%;
    height: 7%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
}

@keyframes cargopromo-benefits-item2-counter {
    0% {
        transform: translateY(0em);
        opacity: 1;
    }

    0.9% {
        transform: translateY(0em);
    }

    10% {
        transform: translateY(-1em);
    }

    10.9% {
        transform: translateY(-1em);
    }

    20% {
        transform: translateY(-2em);
    }

    20.9% {
        transform: translateY(-2em);
    }

    30% {
        transform: translateY(-3em);
    }

    30.9% {
        transform: translateY(-3em);
    }

    40% {
        transform: translateY(-4em);
    }

    40.9% {
        transform: translateY(-4em);
    }

    50% {
        transform: translateY(-5em);
    }

    50.9% {
        transform: translateY(-5em);
    }

    60% {
        transform: translateY(-6em);
    }

    60.9% {
        transform: translateY(-6em);
    }

    70% {
        transform: translateY(-7em);
    }

    70.9% {
        transform: translateY(-7em);
    }

    80% {
        transform: translateY(-8em);
    }

    80.9% {
        transform: translateY(-8em);
    }

    90% {
        transform: translateY(-9em);
    }

    90.9% {
        transform: translateY(-9em);
        opacity: 1;
    }

    99.9999% {
        transform: translateY(-9em);
        opacity: 1;
    }

    100% {
        transform: translateY(0em);
        opacity: 0;
    }
}
/* #endregion Clipart-2 */

@media (max-width: 991px) {
    .cargo-promo-page section.benefits .left-side {
        border-right: 0px none transparent;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 80px;
    }

    *[dir='rtl'] .cargo-promo-page section.benefits .left-side {
        border-right: 0px none transparent;
        border-left: 0px none transparent;
        padding-left: 15px;
        padding-right: 15px;
    }

    .cargo-promo-page section.benefits .right-side,
    *[dir='rtl'] .cargo-promo-page section.benefits .right-side {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 767px) {
    .cargo-promo-page section.benefits .item .badge {
        font-size: 48px;
        width: 80px;
        height: 80px;
    }

    .cargo-promo-page section.benefits .item > div > div:first-child {
        width: 105px;
    }
}

@media (max-width: 575px) {
    .cargo-promo-page section.benefits .left-side,
    .cargo-promo-page section.benefits .right-side {
        padding-left: 55px;
        padding-right: 55px;
    }

        .cargo-promo-page section.benefits .left-side h3,
        .cargo-promo-page section.benefits .right-side h3 {
            font-size: 18px;
        }

        .cargo-promo-page section.benefits .left-side h4,
        .cargo-promo-page section.benefits .right-side h4 {
            font-size: 14px;
        }

    .cargo-promo-page section.benefits .left-side {
        margin-bottom: 30px;
    }

    .cargo-promo-page section.benefits .item p {
        font-size: 14px;
    }

    .cargo-promo-page section.benefits .right-side {
        padding-bottom: 30px;
    }

        .cargo-promo-page section.benefits .left-side .clipart-area,
        .cargo-promo-page section.benefits .right-side .clipart-area {
            display: inline-block;
            width: 250px;
            height: 250px;
            margin-bottom: 20px;
        }

            .cargo-promo-page section.benefits .right-side .clipart-area .clipart-store .counter {
                display: block;
                position: absolute;
                color: #FFFFFF;
                font-size: 34px;
                font-weight: 800;
                background-color: transparent;
                text-align: center;
                width: 17%;
                height: 18%;
                top: 61%;
                border-radius: var(--radius-4);
                overflow: hidden;
            }

    .cargo-promo-page section.benefits {
        padding-bottom: 60px;
    }
}

@media (max-width: 480px) {
    .cargo-promo-page section.benefits .left-side,
    .cargo-promo-page section.benefits .right-side,
    *[dir='rtl'] .cargo-promo-page section.benefits .left-side,
    *[dir='rtl'] .cargo-promo-page section.benefits .right-side {
        padding-left: 25px;
        padding-right: 25px;
    }

    .cargo-promo-page section.benefits {
        padding-bottom: 40px;
    }
}

@media (max-width: 400px) {
    .cargo-promo-page section.benefits .left-side .clipart-area,
    .cargo-promo-page section.benefits .right-side .clipart-area {
        display: inline-block;
        width: 200px;
        height: 200px;
        margin-bottom: 20px;
    }

        .cargo-promo-page section.benefits .right-side .clipart-area .clipart-store .counter {
            display: block;
            position: absolute;
            color: #FFFFFF;
            font-size: 34px;
            font-weight: 800;
            background-color: transparent;
            text-align: center;
            width: 17%;
            height: 19%;
            top: 60%;
            border-radius: var(--radius-4);
            overflow: hidden;
        }

        .cargo-promo-page section.benefits .left-side .clipart-area .clipart-eye1 {
            display: block;
            position: absolute;
            width: 12%;
            height: 12%;
            top: 53%;
            left: 30%;
            background: url("../../Content/Images/cargo-delivery/promotion/benefits/item1/clipart-eye.svg") no-repeat center center transparent;
            background-size: contain;
            z-index: 1;
            transform-origin: 50% 100%;
            animation: cargopromo-benefits-item1-clipart-eye 4s ease-in-out infinite;
        }

        .cargo-promo-page section.benefits .left-side .clipart-area .clipart-eye2 {
            display: block;
            position: absolute;
            width: 12%;
            height: 12%;
            top: 53%;
            left: 60%;
            background: url("../../Content/Images/cargo-delivery/promotion/benefits/item1/clipart-eye.svg") no-repeat center center transparent;
            background-size: contain;
            z-index: 1;
            transform-origin: 50% 100%;
            animation: cargopromo-benefits-item1-clipart-eye 4s ease-in-out infinite;
        }

    .cargo-promo-page section.benefits .item .badge {
        font-size: 32px;
        width: 60px;
        height: 60px;
    }

    .cargo-promo-page section.benefits .item .badge {
        padding-top: 14px;
    }

    .cargo-promo-page section.benefits .item > div > div:first-child {
        width: 75px;
    }

    .cargo-promo-page section.benefits {
        padding-top: 50px;
    }
}
/* #endregion ---------------------- /Benefits ---------------------------------------- */
/* #region ----------------------- Section: FAQs -------------------------------------- */
.cargo-promo-page section.faqs {
    background-color: #F9F9F9;
    padding-top: 80px;
    padding-bottom: 150px;
}

    .cargo-promo-page section.faqs h3 {
        display: block;
        text-align: center;
        font-size: 24px;
        text-transform: uppercase;
        font-weight: 700;
        margin-top: 30px;
        margin-bottom: 50px;
    }

    .cargo-promo-page section.faqs .left-side {
        border-right: 1px solid #EEEEEE;
        padding-right: 40px;
    }

*[dir='rtl'] .cargo-promo-page section.faqs .left-side {
    border-right: 0px none transparent;
    border-left: 1px solid #EEEEEE;
    padding-right: 15px;
    padding-left: 40px;
}

.cargo-promo-page section.faqs .right-side {
    padding-left: 40px;
}

*[dir='rtl'] .cargo-promo-page section.faqs .right-side {
    padding-left: 15px;
    padding-right: 40px;
}

.cargo-promo-page section.faqs .left-side,
.cargo-promo-page section.faqs .right-side {
    padding-bottom: 20px;
}

    .cargo-promo-page section.faqs .left-side h3 {
        color: var(--color-text-primary);
    }

    .cargo-promo-page section.faqs .right-side h3 {
        color: var(--color-text-danger);
    }


        .cargo-promo-page section.faqs .left-side h3.element-animation,
        .cargo-promo-page section.faqs .right-side h3.element-animation {
            opacity: 0;
            transform: scale(0);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }

            .cargo-promo-page section.faqs .left-side h3.element-animation.element-show,
            .cargo-promo-page section.faqs .right-side h3.element-animation.element-show {
                opacity: 1;
                transform: scale(1);
                transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            }

.cargo-promo-page section.faqs .collapser {
    border-bottom: 1px solid #EEEEEE;
}

    .cargo-promo-page section.faqs .collapser.element-animation {
        opacity: 0;
        transform: translateY(80px);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

        .cargo-promo-page section.faqs .collapser.element-animation.element-show {
            opacity: 1;
            transform: translateY(0px);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }

    .cargo-promo-page section.faqs .collapser .collapser-btn {
        position: relative;
        display: block;
        cursor: pointer;
        padding-top: 20px;
        padding-bottom: 20px;
        text-decoration: none;
    }

        .cargo-promo-page section.faqs .collapser .collapser-btn span {
            font-size: 20px;
            font-weight: 700;
            color: var(--color-text-muted);
            text-decoration: none;
            padding-right: 30px;
            display: inline-block;
        }

*[dir='rtl'] .cargo-promo-page section.faqs .collapser .collapser-btn span {
    padding-right: 0px;
    padding-left: 30px;
}

.cargo-promo-page section.faqs .collapser .collapser-btn i {
    position: absolute;
    top: calc(50% - 7px);
    right: 0px;
    display: inline-block;
}

*[dir='rtl'] .cargo-promo-page section.faqs .collapser .collapser-btn i {
    left: 0px;
    right: auto;
}

.cargo-promo-page section.faqs .collapser.collapsed .collapser-btn i {
    transform: rotate(180deg);
}

.cargo-promo-page section.faqs .collapser .collapser-content {
    font-size: 18px;
    color: var(--color-text-basic);
    padding-left: 40px;
    padding-right: 40px;
}

    .cargo-promo-page section.faqs .collapser .collapser-content span {
        padding-bottom: 20px;
        display: block;
    }

@media (max-width: 991px) {
    .cargo-promo-page section.faqs .left-side {
        border-right: 0px none transparent;
        padding-right: 15px;
        padding-bottom: 50px;
    }

    *[dir='rtl'] .cargo-promo-page section.faqs .left-side {
        border-right: 0px none transparent;
        border-left: 0px none transparent;
        padding-right: 15px;
        padding-left: 15px;
    }

    .cargo-promo-page section.faqs .right-side {
        padding-left: 15px;
    }

    *[dir='rtl'] .cargo-promo-page section.faqs .right-side {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 575px) {
    .cargo-promo-page section.faqs .left-side,
    .cargo-promo-page section.faqs .right-side,
    *[dir='rtl'] .cargo-promo-page section.faqs .left-side,
    *[dir='rtl'] .cargo-promo-page section.faqs .right-side {
        padding-left: 40px;
        padding-right: 40px;
    }

    .cargo-promo-page section.faqs .collapser .collapser-btn span {
        font-size: 16px;
    }

    .cargo-promo-page section.faqs .collapser .collapser-content {
        font-size: 14px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .cargo-promo-page section.faqs h3 {
        font-size: 20px;
        margin-top: 10px;
        margin-bottom: 20px;
    }
}

@media (max-width: 400px) {
    .cargo-promo-page section.faqs {
        background-color: #F9F9F9;
        padding-top: 40px;
        padding-bottom: 100px;
    }
}
/* #endregion ------------------- /Section: FAQs -------------------------------------- */







/* #endregion ========================= /Cargo Delivery Promotion Page ================================= */
/* #region ================================ Cargo Delivery Widgets ===================================== */
.cargo-widget {
    position: relative;
    border-radius: var(--radius-4);
    background-color: #E6F4ED;
    overflow: hidden;
}

    /* #region -------------- 728x90 + 970x90 -------------------- */
    .cargo-widget.widget-728x90 {
        width: 728px;
        height: 90px;
    }

    .cargo-widget.widget-970x90 {
        width: 970px;
        height: 90px;
    }

        .cargo-widget.widget-728x90 > .content,
        .cargo-widget.widget-970x90 > .content {
            display: table;
            table-layout: fixed;
            width: 100%;
            height: 90px;
        }

            .cargo-widget.widget-728x90 > .content > *,
            .cargo-widget.widget-970x90 > .content > * {
                display: table-row;
            }

                .cargo-widget.widget-728x90 > .content > * > *,
                .cargo-widget.widget-970x90 > .content > * > * {
                    display: table-cell;
                    vertical-align: top;
                }

    .cargo-widget.widget-728x90 .clipart-side {
        width: 120px;
        position: relative;
    }

    .cargo-widget.widget-970x90 .clipart-side {
        width: 170px;
        position: relative;
    }

    .cargo-widget.widget-728x90 .ads-side,
    .cargo-widget.widget-970x90 .ads-side {
        font-size: 0px;
        text-align: right;
    }

*[dir='rtl'] .cargo-widget.widget-728x90 .ads-side,
*[dir='rtl'] .cargo-widget.widget-970x90 .ads-side {
    text-align: left;
}

.cargo-widget.widget-728x90 .goods-card,
.cargo-widget.widget-970x90 .goods-card {
    display: inline-block;
    background-color: #FFFFFF;
    border-radius: var(--radius-4);
    font-size: 14px;
    width: 190px;
    height: 70px;
    text-align: left;
    margin-right: 10px;
    margin-top: 10px;
    vertical-align: top;
    position: relative;
    padding-left: 80px;
    padding-top: 5px;
    padding-right: 5px;
}

*[dir='rtl'] .cargo-widget.widget-728x90 .goods-card,
*[dir='rtl'] .cargo-widget.widget-970x90 .goods-card {
    text-align: right;
    margin-right: 0px;
    margin-left: 10px;
    padding-left: 5px;
    padding-right: 80px;
}

.cargo-widget.widget-728x90 .goods-card .image-area,
.cargo-widget.widget-970x90 .goods-card .image-area {
    display: block;
    width: 70px;
    height: 70px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #DDDDDD;
    overflow: hidden;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    z-index: 1;
}

.cargo-widget.widget-728x90 .goods-card .content-area,
.cargo-widget.widget-970x90 .goods-card .content-area {
    position: relative;
}

*[dir='rtl'] .cargo-widget.widget-728x90 .goods-card .image-area,
*[dir='rtl'] .cargo-widget.widget-970x90 .goods-card .image-area {
    right: 0px;
    left: auto;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 1;
}

.cargo-widget.widget-728x90 .goods-card .image-area .ci-image,
.cargo-widget.widget-970x90 .goods-card .image-area .ci-image {
    position: absolute;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
    z-index: 1;
    font-size: 32px;
}

.cargo-widget.widget-728x90 .goods-card .image-area img,
.cargo-widget.widget-970x90 .goods-card .image-area img {
    width: 100%;
    height: 100%;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}

.cargo-widget.widget-728x90 .goods-card .content-area a,
.cargo-widget.widget-970x90 .goods-card .content-area a {
    text-decoration: none;
}

.cargo-widget.widget-728x90 .goods-card .caption,
.cargo-widget.widget-970x90 .goods-card .caption {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: var(--color-text-basic);
    font-weight: 500;
    margin-bottom: 2px;
}

.cargo-widget.widget-728x90 .goods-card .ad-price,
.cargo-widget.widget-970x90 .goods-card .ad-price {
    font-size: 12px;
    font-weight: 500;
}

    .cargo-widget.widget-728x90 .goods-card .ad-price .ci-arrow-left,
    .cargo-widget.widget-970x90 .goods-card .ad-price .ci-arrow-left {
        font-size: 16px;
        vertical-align: middle;
        margin-top: -1px;
    }

*[dir='rtl'] .cargo-widget.widget-728x90 .goods-card .ad-price .ci-arrow-left,
*[dir='rtl'] .cargo-widget.widget-970x90 .goods-card .ad-price .ci-arrow-left {
    transform: rotate(315deg);
}

.cargo-widget.widget-728x90 .goods-card .ad-price bdi span:first-child,
.cargo-widget.widget-970x90 .goods-card .ad-price bdi span:first-child {
    padding-right: 5px;
}

.cargo-widget.widget-728x90 .goods-card .new-btn,
.cargo-widget.widget-970x90 .goods-card .new-btn {
    font-size: 12px;
    padding: 4px 5px 4px 5px;
    display: inline-block;
    position: absolute;
    top: 35px;
    left: 0px;
}

*[dir='rtl'] .cargo-widget.widget-728x90 .goods-card .new-btn,
*[dir='rtl'] .cargo-widget.widget-970x90 .goods-card .new-btn {
    right: 0px;
    left: auto;
}

.cargo-widget.widget-728x90 .clipart-side .clipart-area {
    width: 200px;
    height: 200px;
    position: absolute;
    top: -55px;
    left: -55px;
    z-index: 1;
}

.cargo-widget.widget-970x90 .clipart-side .clipart-area {
    width: 200px;
    height: 200px;
    position: absolute;
    top: -55px;
    left: -15px;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-728x90 .clipart-side .clipart-area {
    left: auto;
    right: -55px;
}

*[dir='rtl'] .cargo-widget.widget-970x90 .clipart-side .clipart-area {
    left: auto;
    right: -15px;
}

.cargo-widget.widget-970x250.home-appliances .clipart-area .clipart-cloud-1,
.cargo-widget.widget-970x250.home-appliances .clipart-area .clipart-cloud-2,
.cargo-widget.widget-970x250.home-appliances .clipart-area .clipart-cloud-3,
.cargo-widget.widget-970x250.home-appliances .clipart-area .clipart-cloud-4,
.cargo-widget.widget-970x250.home-appliances .clipart-area .clipart-cloud-5,
.cargo-widget.widget-970x250.home-appliances .clipart-area .clipart-cloud-6,
.cargo-widget.widget-970x250.home-appliances .clipart-area .clipart-cloud-7,
.cargo-widget.widget-970x250.home-appliances .clipart-area .clipart-cloud-8,
.cargo-widget.widget-970x250.home-appliances .clipart-area .clipart-cloud-9 {
    background-color: #DAECE3;
}

.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-1,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-1,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-1,
.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-2,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-2,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-2,
.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-3,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-3,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-3,
.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-4,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-4,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-4,
.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-5,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-5,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-5,
.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-6,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-6,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-6,
.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-7,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-7,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-7,
.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-8,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-8,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-8,
.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-9,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-9,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-9 {
    display: block;
    position: absolute;
    z-index: 1;
    background-color: #F2FCF7;
    border-radius: 50%;
}

.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-1,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-1,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-1 {
    top: 23%;
    left: 15%;
    width: 28%;
    height: 28%;
    animation: widget-728x90-cloud-1 1.3s ease-in-out infinite alternate;
}

.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-2,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-2,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-2 {
    top: 15%;
    left: 35%;
    width: 23%;
    height: 23%;
    animation: widget-728x90-cloud-2 1.5s ease-in-out infinite alternate;
}

.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-3,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-3,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-3 {
    top: 18%;
    left: 47%;
    width: 30%;
    height: 30%;
    animation: widget-728x90-cloud-3 1.4s ease-in-out infinite alternate;
}

.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-4,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-4,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-4 {
    top: 37%;
    left: 65%;
    width: 22%;
    height: 22%;
    animation: widget-728x90-cloud-4 1.6s ease-in-out infinite alternate;
}

.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-5,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-5,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-5 {
    top: 47%;
    left: 50%;
    width: 31%;
    height: 31%;
    animation: widget-728x90-cloud-5 1.3s ease-in-out infinite alternate;
}

.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-6,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-6,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-6 {
    top: 59%;
    left: 41%;
    width: 23%;
    height: 23%;
    animation: widget-728x90-cloud-6 1.5s ease-in-out infinite alternate;
}

.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-7,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-7,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-7 {
    top: 54%;
    left: 26%;
    width: 28%;
    height: 28%;
    animation: widget-728x90-cloud-7 1.4s ease-in-out infinite alternate;
}

.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-8,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-8,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-8 {
    top: 45%;
    left: 15%;
    width: 25%;
    height: 25%;
    animation: widget-728x90-cloud-8 1.3s ease-in-out infinite alternate;
}

.cargo-widget.widget-728x90 .clipart-area .clipart-cloud-9,
.cargo-widget.widget-970x90 .clipart-area .clipart-cloud-9,
.cargo-widget.widget-970x250 .clipart-area .clipart-cloud-9 {
    top: 30%;
    left: 30%;
    width: 40%;
    height: 40%;
}

@keyframes widget-728x90-cloud-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(8%, 8%);
    }
}

@keyframes widget-728x90-cloud-2 {
    from {
        transform: translate(0%, 8%);
    }

    to {
        transform: translate(0%, -8%);
    }
}

@keyframes widget-728x90-cloud-3 {
    from {
        transform: translate(8%, -8%);
    }

    to {
        transform: translate(-8%, 8%);
    }
}

@keyframes widget-728x90-cloud-4 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(8%, 0%);
    }
}

@keyframes widget-728x90-cloud-5 {
    from {
        transform: translate(8%, 8%);
    }

    to {
        transform: translate(-8%, -8%);
    }
}

@keyframes widget-728x90-cloud-6 {
    from {
        transform: translate(0%, -8%);
    }

    to {
        transform: translate(0%, 8%);
    }
}

@keyframes widget-728x90-cloud-7 {
    from {
        transform: translate(-6%, 8%);
    }

    to {
        transform: translate(6%, -8%);
    }
}

@keyframes widget-728x90-cloud-8 {
    from {
        transform: translate(7%, 0%);
    }

    to {
        transform: translate(-7%, 0%);
    }
}

.cargo-widget.widget-728x90 .clipart-side .clipart-truck {
    display: block;
    position: absolute;
    width: 70px;
    height: 70px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-truck.svg') no-repeat center center transparent;
    background-size: contain;
    top: -6px;
    left: 24px;
    z-index: 1;
}

.cargo-widget.widget-970x90 .clipart-side .clipart-truck {
    display: block;
    position: absolute;
    width: 70px;
    height: 70px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-truck.svg') no-repeat center center transparent;
    background-size: contain;
    top: -6px;
    left: 50px;
    z-index: 1;
}

.site-Kosovo .cargo-widget.widget-728x90 .clipart-side .clipart-truck {
    display: block;
    position: absolute;
    width: 60px;
    height: 60px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-truck.svg') no-repeat center center transparent;
    background-size: contain;
    top: -2px;
    left: 29px;
    z-index: 1;
}

.site-Albania .cargo-widget.widget-728x90 .clipart-side .clipart-truck {
    display: block;
    position: absolute;
    width: 60px;
    height: 60px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-truck.svg') no-repeat center center transparent;
    background-size: contain;
    top: -2px;
    left: 29px;
    z-index: 1;
}

.site-Kosovo .cargo-widget.widget-970x90 .clipart-side .clipart-truck {
    display: block;
    position: absolute;
    width: 60px;
    height: 60px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-truck.svg') no-repeat center center transparent;
    background-size: contain;
    top: -2px;
    left: 55px;
    z-index: 1;
}

.site-Albania .cargo-widget.widget-970x90 .clipart-side .clipart-truck {
    display: block;
    position: absolute;
    width: 60px;
    height: 60px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-truck.svg') no-repeat center center transparent;
    background-size: contain;
    top: -2px;
    left: 55px;
    z-index: 1;
}

.cargo-widget.widget-728x90 .clipart-side .caption,
.cargo-widget.widget-970x90 .clipart-side .caption {
    display: block;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 52px;
    left: 0px;
    text-decoration: none;
}

.site-Kosovo .cargo-widget.widget-728x90 .clipart-side .caption,
.site-Kosovo .cargo-widget.widget-970x90 .clipart-side .caption {
    top: 49px;
}

.cargo-widget.widget-728x90 .clipart-side .caption .name,
.cargo-widget.widget-970x90 .clipart-side .caption .name {
    display: block;
    color: var(--color-text-primary);
    width: 100%;
    font-size: 17px;
    line-height: 18px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.site-Kosovo .cargo-widget.widget-728x90 .clipart-side .caption .name,
.site-Kosovo .cargo-widget.widget-970x90 .clipart-side .caption .name {
    font-size: 22px;
    line-height: 18px;
}

.site-Albania .cargo-widget.widget-728x90 .clipart-side .caption .name,
.site-Albania .cargo-widget.widget-970x90 .clipart-side .caption .name {
    font-size: 22px;
    line-height: 18px;
}

.cargo-widget.widget-728x90 .clipart-side .caption .description,
.cargo-widget.widget-970x90 .clipart-side .caption .description {
    display: block;
    width: 100%;
    color: var(--color-text-muted);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0px;
    padding-top: 0px;
}
/* #endregion ---------- /728x90 + 970x90 -------------------- */
/* #region ------------------ 970x250 ------------------------ */
.cargo-widget.widget-970x250 {
    width: 970px;
    height: 250px;
    position: relative;
}

    .cargo-widget.widget-970x250 > .content {
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 90px;
    }

        .cargo-widget.widget-970x250 > .content > * {
            display: table-row;
        }

            .cargo-widget.widget-970x250 > .content > * > * {
                display: table-cell;
                vertical-align: top;
            }

    .cargo-widget.widget-970x250 .clipart-side {
        width: 240px;
        position: relative;
    }

    .cargo-widget.widget-970x250 .ads-side {
        font-size: 0px;
        text-align: right;
    }

*[dir='rtl'] .cargo-widget.widget-970x250 .ads-side {
    text-align: left;
}

.cargo-widget.widget-970x250 .goods-card {
    display: inline-block;
    background-color: #FFFFFF;
    border-radius: var(--radius-4);
    font-size: 14px;
    width: 230px;
    height: 230px;
    text-align: left;
    margin-right: 10px;
    margin-top: 10px;
    vertical-align: top;
    position: relative;
    padding-left: 10px;
    padding-top: 140px;
    padding-right: 10px;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-970x250 .goods-card {
    text-align: right;
    margin-right: 0px;
    margin-left: 10px;
}

.cargo-widget.widget-970x250 .goods-card .image-area {
    display: block;
    width: 100%;
    height: 130px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #DDDDDD;
    overflow: hidden;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    z-index: 1;
}

.cargo-widget.widget-970x250 .goods-card .content-area {
    position: relative;
}

.cargo-widget.widget-970x250 .goods-card .image-area .ci-image {
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    z-index: 1;
    font-size: 64px;
}

.cargo-widget.widget-970x250 .goods-card .image-area img {
    width: 100%;
    height: 100%;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}

.cargo-widget.widget-970x250 .goods-card .content-area a {
    text-decoration: none;
}

.cargo-widget.widget-970x250 .goods-card .caption {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    color: var(--color-text-basic);
    font-weight: 500;
    margin-bottom: 2px;
}

.cargo-widget.widget-970x250 .goods-card .ad-price {
    font-size: 14px;
    font-weight: 500;
}

    .cargo-widget.widget-970x250 .goods-card .ad-price .ci-arrow-left {
        font-size: 18px;
        vertical-align: middle;
        margin-top: -2px;
    }

*[dir='rtl'] .cargo-widget.widget-970x250 .goods-card .ad-price .ci-arrow-left {
    transform: rotate(315deg);
}

.cargo-widget.widget-970x250 .goods-card .ad-price bdi span:first-child {
    padding-right: 5px;
}

.cargo-widget.widget-970x250 .goods-card .new-btn {
    font-size: 14px;
    padding: 10px 10px 9px 10px;
    display: inline-block;
    position: absolute;
    top: 45px;
    left: 0px;
}

*[dir='rtl'] .cargo-widget.widget-970x250 .goods-card .new-btn {
    right: 0px;
    left: auto;
}

.cargo-widget.widget-970x250 .cargo-icon {
    display: block;
    position: absolute;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    background-color: #FFFFFF;
    padding: 0px;
    font-size: 32px;
    z-index: 3;
    width: 42px;
    height: 42px;
    text-align: center;
    box-shadow: rgba(0,0,0,0.2) 0px 0px 10px;
}

*[dir='rtl'] .cargo-widget.widget-970x250 .cargo-icon {
    left: 5px;
    right: auto;
}

.cargo-widget.widget-970x250 .cargo-icon .ci-delivery-truck {
    position: absolute;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
}

.cargo-widget.widget-970x250 .clipart-area {
    width: 410px;
    height: 410px;
    position: absolute;
    top: -80px;
    left: -80px;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-970x250 .clipart-area {
    right: -80px;
    left: auto;
}

.cargo-widget.widget-970x250.default .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 180px;
    height: 180px;
    z-index: 1;
    top: 0px;
    left: 33px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-truck.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.default .clipart-side .clipart {
    right: 33px;
    left: auto;
}

.cargo-widget.widget-970x250.clothes .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 180px;
    height: 180px;
    z-index: 1;
    top: 0px;
    left: 33px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-clothes.svg') no-repeat center center transparent;
    background-size: contain;
}

.cargo-widget.widget-970x250.watches .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 180px;
    height: 180px;
    z-index: 1;
    top: 0px;
    left: 33px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-watches.svg') no-repeat center center transparent;
    background-size: contain;
}

.cargo-widget.widget-970x250.musical-instruments .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 160px;
    height: 160px;
    z-index: 1;
    top: 5px;
    left: 43px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-musical-instruments.svg') no-repeat center center transparent;
    background-size: contain;
}

.cargo-widget.widget-970x250.sports .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 180px;
    height: 180px;
    z-index: 1;
    top: -5px;
    left: 30px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-sports-equipment.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.sports .clipart-side .clipart {
    left: auto;
    right: 40px;
}

.cargo-widget.widget-970x250.consoles .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 180px;
    height: 180px;
    z-index: 1;
    top: -5px;
    left: 30px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-consoles.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.consoles .clipart-side .clipart {
    left: auto;
    right: 40px;
}

.cargo-widget.widget-970x250.computer-parts .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 180px;
    height: 180px;
    z-index: 1;
    top: -5px;
    left: 30px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-computers-parts.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.computer-parts .clipart-side .clipart {
    left: auto;
    right: 40px;
}

.cargo-widget.widget-970x250.computers .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 1;
    top: -15px;
    left: 23px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-computers.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.computers .clipart-side .clipart {
    left: auto;
    right: 23px;
}

.cargo-widget.widget-970x250.mobile-accessories .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 150px;
    height: 150px;
    z-index: 1;
    top: 5px;
    left: 53px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-mobile-accessories.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.mobile-accessories .clipart-side .clipart {
    left: auto;
    right: 53px;
}

.cargo-widget.widget-970x250.mobile-phones .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 150px;
    height: 150px;
    z-index: 1;
    top: 5px;
    left: 53px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-mobile.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.mobile-phones .clipart-side .clipart {
    left: auto;
    right: 53px;
}

.cargo-widget.widget-970x250.for-kids .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 170px;
    height: 170px;
    z-index: 1;
    top: 5px;
    left: 35px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-for-kids.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.for-kids .clipart-side .clipart {
    left: auto;
    right: 53px;
}

.cargo-widget.widget-970x250.materials .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 1;
    top: -15px;
    left: 25px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-construction-materials.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.materials .clipart-side .clipart {
    left: auto;
    right: 25px;
}

.cargo-widget.widget-970x250.tools .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 180px;
    height: 180px;
    z-index: 1;
    top: -5px;
    left: 35px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-instruments.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.tools .clipart-side .clipart {
    left: auto;
    right: 35px;
}

.cargo-widget.widget-970x250.furniture .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 150px;
    height: 150px;
    z-index: 1;
    top: 3px;
    left: 47px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-furniture.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.furniture .clipart-side .clipart {
    left: auto;
    right: 35px;
}

.cargo-widget.widget-970x250.home-appliances .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 170px;
    height: 170px;
    z-index: 1;
    top: -5px;
    left: 40px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-home-appliances.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.home-appliances .clipart-side .clipart {
    left: auto;
    right: 35px;
}

.cargo-widget.widget-970x250.agricultural .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 1;
    top: -15px;
    left: 25px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-agricultural-equipment.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.agricultural .clipart-side .clipart {
    left: auto;
    right: 25px;
}

.cargo-widget.widget-970x250.auto-parts .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 160px;
    height: 160px;
    z-index: 1;
    top: 5px;
    left: 45px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-automobile-parts.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.auto-parts .clipart-side .clipart {
    left: auto;
    right: 45px;
}

.cargo-widget.widget-970x250.moto-parts .clipart-side .clipart {
    display: block;
    position: absolute;
    width: 160px;
    height: 160px;
    z-index: 1;
    top: 5px;
    left: 45px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-moto-parts.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-970x250.moto-parts .clipart-side .clipart {
    left: auto;
    right: 45px;
}

.cargo-widget.widget-970x250 .clipart-side .description {
    display: block;
    position: absolute;
    z-index: 1;
    color: var(--color-text-muted);
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    top: 150px;
    left: 0px;
    padding-left: 10px;
}

*[dir='rtl'] .cargo-widget.widget-970x250 .clipart-side .description {
    padding-right: 10px;
    padding-left: 0px;
}

.cargo-widget.widget-970x250.default .clipart-side .description {
    font-size: 16px;
    top: 150px;
}

.site-Kosovo .cargo-widget.widget-970x250.default .clipart-side .description {
    font-size: 16px;
    top: 170px;
}

.site-Albania .cargo-widget.widget-970x250.default .clipart-side .description {
    font-size: 16px;
    top: 170px;
}

*[lang="mk-MK"] .cargo-widget.widget-970x250.default .clipart-side .description {
    font-size: 16px;
    top: 170px;
}


.cargo-widget.widget-970x250 .clipart-side .description a {
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 800;
}

.cargo-widget.widget-970x250.clothes .clipart-side .description {
    font-size: 16px;
    top: 170px;
}

.cargo-widget.widget-970x250.watches .clipart-side .description {
    font-size: 16px;
    top: 175px;
}

.cargo-widget.widget-970x250.musical-instruments .clipart-side .description {
    font-size: 16px;
    top: 175px;
}

.cargo-widget.widget-970x250.sports .clipart-side .description {
    font-size: 16px;
    top: 175px;
}

.cargo-widget.widget-970x250.consoles .clipart-side .description {
    font-size: 16px;
    top: 160px;
}

.cargo-widget.widget-970x250.computer-parts .clipart-side .description {
    font-size: 16px;
    top: 155px;
}

.cargo-widget.widget-970x250.computers .clipart-side .description {
    font-size: 16px;
    top: 155px;
}

.cargo-widget.widget-970x250.mobile-phones .clipart-side .description {
    font-size: 16px;
    top: 165px;
}

.cargo-widget.widget-970x250.for-kids .clipart-side .description {
    font-size: 16px;
    top: 165px;
}

.cargo-widget.widget-970x250.materials .clipart-side .description {
    font-size: 16px;
    top: 155px;
}

.cargo-widget.widget-970x250.tools .clipart-side .description {
    font-size: 16px;
    top: 170px;
}

.cargo-widget.widget-970x250.furniture .clipart-side .description {
    font-size: 16px;
    top: 160px;
}

.cargo-widget.widget-970x250.home-appliances .clipart-side .description {
    font-size: 16px;
    top: 160px;
}

.cargo-widget.widget-970x250.agricultural .clipart-side .description {
    font-size: 16px;
    top: 155px;
}

.cargo-widget.widget-970x250.auto-parts .clipart-side .description {
    font-size: 16px;
    top: 155px;
}

.cargo-widget.widget-970x250.moto-parts .clipart-side .description {
    font-size: 16px;
    top: 155px;
}


/* #endregion -------------- /970x250 ------------------------ */
/* #region ------------------ 300x250 ------------------------ */
.cargo-widget.widget-300x250 {
    width: 300px;
    height: 250px;
    position: relative;
    padding: 10px;
}

    .cargo-widget.widget-300x250 .goods-card,
    .cargo-widget.widget-300x600 .goods-card {
        width: 280px;
        height: 110px;
        border-radius: var(--radius-4);
        background-color: #FFFFFF;
        position: relative;
        padding-left: 110px;
        padding-right: 10px;
    }

*[dir='rtl'] .cargo-widget.widget-300x250 .goods-card,
*[dir='rtl'] .cargo-widget.widget-300x600 .goods-card {
    padding-left: 10px;
    padding-right: 110px;
}

.cargo-widget.widget-300x250 .goods-card .image-area,
.cargo-widget.widget-300x600 .goods-card .image-area {
    display: block;
    width: 90px;
    height: 90px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #DDDDDD;
    overflow: hidden;
    border-radius: var(--radius-4);
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-300x250 .goods-card .image-area,
*[dir='rtl'] .cargo-widget.widget-300x600 .goods-card .image-area {
    right: 10px;
    left: auto;
}

.cargo-widget.widget-300x250 .goods-card .content-area,
.cargo-widget.widget-300x600 .goods-card .content-area {
    position: relative;
    padding-top: 10px;
}

.cargo-widget.widget-300x250 .goods-card .image-area .ci-image,
.cargo-widget.widget-300x600 .goods-card .image-area .ci-image {
    position: absolute;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    z-index: 1;
    font-size: 48px;
}

.cargo-widget.widget-300x250 .goods-card .image-area img,
.cargo-widget.widget-300x600 .goods-card .image-area img {
    width: 100%;
    height: 100%;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}

.cargo-widget.widget-300x250 .goods-card .content-area a,
.cargo-widget.widget-300x600 .goods-card .content-area a {
    text-decoration: none;
}

.cargo-widget.widget-300x250 .cargo-icon,
.cargo-widget.widget-300x600 .cargo-icon {
    display: block;
    position: absolute;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    background-color: #FFFFFF;
    padding: 0px;
    font-size: 24px;
    z-index: 3;
    width: 32px;
    height: 32px;
    text-align: center;
    box-shadow: rgba(0,0,0,0.2) 0px 0px 10px;
}

*[dir='rtl'] .cargo-widget.widget-300x250 .cargo-icon,
*[dir='rtl'] .cargo-widget.widget-300x600 .cargo-icon {
    left: 5px;
    right: auto;
}

.cargo-widget.widget-300x250 .cargo-icon .ci-delivery-truck,
.cargo-widget.widget-300x600 .cargo-icon .ci-delivery-truck {
    position: absolute;
    top: calc(50% - 12px);
    left: calc(50% - 12px);
}

.cargo-widget.widget-300x250 .goods-card .caption,
.cargo-widget.widget-300x600 .goods-card .caption {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    color: var(--color-text-basic);
    font-weight: 500;
    margin-bottom: 2px;
}

.cargo-widget.widget-300x250 .goods-card .ad-price,
.cargo-widget.widget-300x600 .goods-card .ad-price {
    font-size: 14px;
    font-weight: 500;
}

    .cargo-widget.widget-300x250 .goods-card .ad-price .ci-arrow-left,
    .cargo-widget.widget-300x600 .goods-card .ad-price .ci-arrow-left {
        font-size: 18px;
        vertical-align: middle;
        margin-top: -2px;
    }

*[dir='rtl'] .cargo-widget.widget-300x250 .goods-card .ad-price .ci-arrow-left,
*[dir='rtl'] .cargo-widget.widget-300x600 .goods-card .ad-price .ci-arrow-left {
    transform: rotate(315deg);
}

.cargo-widget.widget-300x250 .goods-card .ad-price bdi span:first-child,
.cargo-widget.widget-300x600 .goods-card .ad-price bdi span:first-child {
    padding-right: 5px;
}

.cargo-widget.widget-300x250 .goods-card .new-btn,
.cargo-widget.widget-300x600 .goods-card .new-btn {
    font-size: 14px;
    padding: 10px 10px 9px 10px;
    display: inline-block;
    position: absolute;
    top: 67px;
    left: 0px;
}

*[dir='rtl'] .cargo-widget.widget-300x250 .goods-card .new-btn,
*[dir='rtl'] .cargo-widget.widget-300x600 .goods-card .new-btn {
    right: 0px;
    left: auto;
}

.cargo-widget.widget-300x250 .header {
    display: block;
    width: 100%;
    position: relative;
    height: 120px;
}

.cargo-widget.widget-300x250.default .clipart {
    display: block;
    position: absolute;
    top: -105px;
    left: -10px;
    width: 300px;
    height: 300px;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-truck-2.svg') no-repeat center center transparent;
    background-size: contain;
}

.cargo-widget.widget-300x250.default .description {
    display: block;
    position: absolute;
    z-index: 1;
    top: 5px;
    left: 0px;
    width: 100%;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-text-muted);
}

    .cargo-widget.widget-300x250.default .description a {
        text-decoration: none;
        font-size: 16px;
        text-transform: uppercase;
        font-weight: 800;
    }

.cargo-widget.widget-300x250 .header .content {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 110px;
}

    .cargo-widget.widget-300x250 .header .content > * {
        display: table-row;
    }

        .cargo-widget.widget-300x250 .header .content > * > * {
            display: table-cell;
        }

    .cargo-widget.widget-300x250 .header .content .clipart-side {
        width: 130px;
        vertical-align: top;
        position: relative;
    }

    .cargo-widget.widget-300x250 .header .content .content-side {
        vertical-align: middle;
    }

.cargo-widget.widget-300x250 .clipart-area {
    display: block;
    width: 110px;
    height: 110px;
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-300x250 .clipart-area {
    left: auto;
    right: 0px;
}

.cargo-widget.widget-300x250.clothes .clipart {
    display: block;
    width: 110px;
    height: 110px;
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-clothes.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.clothes .clipart {
    left: auto;
    right: 0px;
}


.cargo-widget.widget-300x250.watches .clipart {
    display: block;
    width: 110px;
    height: 110px;
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-watches.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.watches .clipart {
    left: auto;
    right: 0px;
}

.cargo-widget.widget-300x250.musical-instruments .clipart {
    display: block;
    width: 100px;
    height: 100px;
    top: 0px;
    left: 5px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-musical-instruments.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.musical-instruments .clipart {
    left: auto;
    right: 5px;
}

.cargo-widget.widget-300x250.sports .clipart {
    display: block;
    width: 100px;
    height: 100px;
    top: 0px;
    left: 5px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-sports-equipment.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.sports .clipart {
    left: auto;
    right: 5px;
}

.cargo-widget.widget-300x250.consoles .clipart {
    display: block;
    width: 100px;
    height: 100px;
    top: 0px;
    left: 5px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-consoles.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.consoles .clipart {
    left: auto;
    right: 5px;
}

.cargo-widget.widget-300x250.computer-parts .clipart {
    display: block;
    width: 100px;
    height: 100px;
    top: 5px;
    left: 5px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-computers-parts.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.computer-parts .clipart {
    left: auto;
    right: 5px;
}

.cargo-widget.widget-300x250.computers .clipart {
    display: block;
    width: 110px;
    height: 110px;
    top: -2px;
    left: 3px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-computers.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.computers .clipart {
    left: auto;
    right: 2px;
}

.cargo-widget.widget-300x250.mobile-accessories .clipart {
    display: block;
    width: 110px;
    height: 110px;
    top: -2px;
    left: 3px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-mobile-accessories.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.mobile-accessories .clipart {
    left: auto;
    right: 2px;
}

.cargo-widget.widget-300x250.mobile-phones .clipart {
    display: block;
    width: 100px;
    height: 100px;
    top: -2px;
    left: 5px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-mobile.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.mobile-phones .clipart {
    left: auto;
    right: 5px;
}

.cargo-widget.widget-300x250.for-kids .clipart {
    display: block;
    width: 100px;
    height: 100px;
    top: -2px;
    left: 5px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-for-kids.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.for-kids .clipart {
    left: auto;
    right: 5px;
}

.cargo-widget.widget-300x250.materials .clipart {
    display: block;
    width: 110px;
    height: 110px;
    top: -2px;
    left: 0px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-construction-materials.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.materials .clipart {
    left: auto;
    right: 0px;
}

.cargo-widget.widget-300x250.tools .clipart {
    display: block;
    width: 110px;
    height: 110px;
    top: -2px;
    left: 0px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-instruments.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.tools .clipart {
    left: auto;
    right: 0px;
}

.cargo-widget.widget-300x250.furniture .clipart {
    display: block;
    width: 110px;
    height: 110px;
    top: -2px;
    left: 0px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-furniture.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.furniture .clipart {
    left: auto;
    right: 0px;
}

.cargo-widget.widget-300x250.home-appliances .clipart {
    display: block;
    width: 110px;
    height: 110px;
    top: -2px;
    left: 0px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-home-appliances.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.home-appliances .clipart {
    left: auto;
    right: 0px;
}

.cargo-widget.widget-300x250.agricultural .clipart {
    display: block;
    width: 110px;
    height: 110px;
    top: -2px;
    left: 0px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-agricultural-equipment.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.agricultural .clipart {
    left: auto;
    right: 0px;
}

.cargo-widget.widget-300x250.auto-parts .clipart {
    display: block;
    width: 110px;
    height: 110px;
    top: -2px;
    left: 0px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-automobile-parts.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.auto-parts .clipart {
    left: auto;
    right: 0px;
}

.cargo-widget.widget-300x250.moto-parts .clipart {
    display: block;
    width: 110px;
    height: 110px;
    top: -2px;
    left: 0px;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-moto-parts.svg') no-repeat center center transparent;
    background-size: contain;
}

*[dir='rtl'] .cargo-widget.widget-300x250.moto-parts .clipart {
    left: auto;
    right: 0px;
}

.cargo-widget.widget-300x250 .header .content .content-side .description {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

    .cargo-widget.widget-300x250 .header .content .content-side .description a {
        text-decoration: none;
        font-weight: 800;
        text-transform: uppercase;
    }


/* #endregion -------------- /300x250 ------------------------ */
/* #region ------------------ 300x600 ------------------------ */
.cargo-widget.widget-300x600 {
    width: 300px;
    height: 600px;
    position: relative;
    padding: 10px;
}

    .cargo-widget.widget-300x600 .goods-card {
        margin-bottom: 10px;
    }

    .cargo-widget.widget-300x600 .header {
        display: block;
        height: 230px;
    }

    .cargo-widget.widget-300x600.default .clipart {
        display: block;
        position: absolute;
        top: -10px;
        left: -130px;
        width: 560px;
        height: 230px;
        background: url('../../Content/Images/cargo-delivery/widgets/clipart-truck-2.svg') no-repeat center center transparent;
        background-size: contain;
        z-index: 1;
    }

    .cargo-widget.widget-300x600.default .description {
        font-size: 16px;
        color: var(--color-text-muted);
        font-weight: 800;
        display: block;
        position: absolute;
        z-index: 1;
        top: 30px;
        left: 25px;
        width: 250px;
        text-transform: uppercase;
        text-align: center;
    }

        .cargo-widget.widget-300x600.default .description a {
            text-transform: uppercase;
            text-decoration: none;
            font-weight: 800;
        }

    .cargo-widget.widget-300x600 .clipart-area {
        display: block;
        width: 290px;
        height: 290px;
        top: -50px;
        left: 0px;
        position: absolute;
        z-index: 1;
    }

    .cargo-widget.widget-300x600.home-appliances .clipart-area .clipart-cloud-1,
    .cargo-widget.widget-300x600.home-appliances .clipart-area .clipart-cloud-2,
    .cargo-widget.widget-300x600.home-appliances .clipart-area .clipart-cloud-3,
    .cargo-widget.widget-300x600.home-appliances .clipart-area .clipart-cloud-4,
    .cargo-widget.widget-300x600.home-appliances .clipart-area .clipart-cloud-5,
    .cargo-widget.widget-300x600.home-appliances .clipart-area .clipart-cloud-6,
    .cargo-widget.widget-300x600.home-appliances .clipart-area .clipart-cloud-7,
    .cargo-widget.widget-300x600.home-appliances .clipart-area .clipart-cloud-8,
    .cargo-widget.widget-300x600.home-appliances .clipart-area .clipart-cloud-9,
    .cargo-widget.widget-300x600.home-appliances .clipart-area .clipart-cloud-10,
    .cargo-widget.widget-300x600.home-appliances .clipart-area .clipart-cloud-11,
    .cargo-widget.widget-300x250.home-appliances .clipart-area .clipart-cloud-1,
    .cargo-widget.widget-300x250.home-appliances .clipart-area .clipart-cloud-2,
    .cargo-widget.widget-300x250.home-appliances .clipart-area .clipart-cloud-3,
    .cargo-widget.widget-300x250.home-appliances .clipart-area .clipart-cloud-4,
    .cargo-widget.widget-300x250.home-appliances .clipart-area .clipart-cloud-5,
    .cargo-widget.widget-300x250.home-appliances .clipart-area .clipart-cloud-6,
    .cargo-widget.widget-300x250.home-appliances .clipart-area .clipart-cloud-7,
    .cargo-widget.widget-300x250.home-appliances .clipart-area .clipart-cloud-8,
    .cargo-widget.widget-300x250.home-appliances .clipart-area .clipart-cloud-9,
    .cargo-widget.widget-300x250.home-appliances .clipart-area .clipart-cloud-10,
    .cargo-widget.widget-300x250.home-appliances .clipart-area .clipart-cloud-11 {
        background-color: #DAECE3;
    }

    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-1,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-1,
    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-2,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-2,
    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-3,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-3,
    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-4,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-4,
    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-5,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-5,
    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-6,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-6,
    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-7,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-7,
    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-8,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-8,
    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-9,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-9,
    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-10,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-10,
    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-11,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-11 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #F2FCF7;
    }

    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-1,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-1 {
        width: 30%;
        height: 30%;
        top: 12%;
        left: 7%;
        animation: cargo-widget-300x600-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-2,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-2 {
        width: 22%;
        height: 22%;
        top: 4%;
        left: 24%;
        animation: cargo-widget-300x600-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-3,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-3 {
        width: 35%;
        height: 35%;
        top: 6%;
        left: 36%;
        animation: cargo-widget-300x600-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-4,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-4 {
        width: 30%;
        height: 30%;
        top: 9%;
        left: 58%;
        animation: cargo-widget-300x600-cloud-4 1.3s ease-in-out infinite alternate;
    }

    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-5,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-5 {
        width: 20%;
        height: 20%;
        top: 25%;
        left: 75%;
        animation: cargo-widget-300x600-cloud-5 1.7s ease-in-out infinite alternate;
    }

    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-6,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-6 {
        width: 43%;
        height: 43%;
        top: 32%;
        left: 58%;
        animation: cargo-widget-300x600-cloud-6 1.4s ease-in-out infinite alternate;
    }

    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-7,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-7 {
        width: 33%;
        height: 33%;
        top: 57%;
        left: 57%;
        animation: cargo-widget-300x600-cloud-7 1.3s ease-in-out infinite alternate;
    }

    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-8,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-8 {
        width: 30%;
        height: 30%;
        top: 66%;
        left: 37%;
        animation: cargo-widget-300x600-cloud-8 1.5s ease-in-out infinite alternate;
    }

    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-9,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-9 {
        width: 45%;
        height: 45%;
        top: 46%;
        left: 14%;
        animation: cargo-widget-300x600-cloud-9 1.4s ease-in-out infinite alternate;
    }

    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-10,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-10 {
        width: 55%;
        height: 55%;
        top: 24%;
        left: 2%;
        animation: cargo-widget-300x600-cloud-10 1.6s ease-in-out infinite alternate;
    }

    .cargo-widget.widget-300x600 .clipart-area .clipart-cloud-11,
    .cargo-widget.widget-300x250 .clipart-area .clipart-cloud-11 {
        width: 65%;
        height: 65%;
        top: 14%;
        left: 20%;
    }

@keyframes cargo-widget-300x600-cloud-1 {
    from {
        transform: translate(-7%, -7%);
    }

    to {
        transform: translate(7%, 7%);
    }
}

@keyframes cargo-widget-300x600-cloud-2 {
    from {
        transform: translate(2%, 7%);
    }

    to {
        transform: translate(-2%, -7%);
    }
}

@keyframes cargo-widget-300x600-cloud-3 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

@keyframes cargo-widget-300x600-cloud-4 {
    from {
        transform: translate(-4%, 6%);
    }

    to {
        transform: translate(4%, -6%);
    }
}

@keyframes cargo-widget-300x600-cloud-5 {
    from {
        transform: translate(7%, -7%);
    }

    to {
        transform: translate(-7%, 7%);
    }
}

@keyframes cargo-widget-300x600-cloud-6 {
    from {
        transform: translate(-5%, 0%);
    }

    to {
        transform: translate(5%, 0%);
    }
}

@keyframes cargo-widget-300x600-cloud-7 {
    from {
        transform: translate(6%, 6%);
    }

    to {
        transform: translate(-6%, -6%);
    }
}

@keyframes cargo-widget-300x600-cloud-8 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

@keyframes cargo-widget-300x600-cloud-9 {
    from {
        transform: translate(-6%, 6%);
    }

    to {
        transform: translate(6%, -6%);
    }
}

@keyframes cargo-widget-300x600-cloud-10 {
    from {
        transform: translate(5%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

.cargo-widget.widget-300x600.clothes .header .clipart {
    display: block;
    top: -20px;
    left: 40px;
    position: absolute;
    width: 200px;
    height: 200px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-clothes.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.cargo-widget.widget-300x600.watches .header .clipart {
    display: block;
    top: -20px;
    left: 50px;
    position: absolute;
    width: 200px;
    height: 200px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-watches.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.cargo-widget.widget-300x600.musical-instruments .header .clipart {
    display: block;
    top: 8px;
    left: 69px;
    position: absolute;
    width: 150px;
    height: 150px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-musical-instruments.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.cargo-widget.widget-300x600.sports .header .clipart {
    display: block;
    top: -16px;
    left: 48px;
    position: absolute;
    width: 190px;
    height: 190px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-sports-equipment.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.cargo-widget.widget-300x600.consoles .header .clipart {
    display: block;
    top: -16px;
    left: 48px;
    position: absolute;
    width: 190px;
    height: 190px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-consoles.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.cargo-widget.widget-300x600.computer-parts .header .clipart {
    display: block;
    top: -16px;
    left: 48px;
    position: absolute;
    width: 190px;
    height: 190px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-computers-parts.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.cargo-widget.widget-300x600.computers .header .clipart {
    display: block;
    top: -16px;
    left: 48px;
    position: absolute;
    width: 190px;
    height: 190px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-computers.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-300x600.computers .header .clipart {
    right: 55px;
    left: auto;
}

.cargo-widget.widget-300x600.mobile-accessories .header .clipart {
    display: block;
    top: 0px;
    left: 70px;
    position: absolute;
    width: 150px;
    height: 150px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-mobile-accessories.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-300x600.mobile-accessories .header .clipart {
    right: 70px;
    left: auto;
}

.cargo-widget.widget-300x600.mobile-phones .header .clipart {
    display: block;
    top: 0px;
    left: 70px;
    position: absolute;
    width: 150px;
    height: 150px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-mobile.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-300x600.mobile-phones .header .clipart {
    right: 70px;
    left: auto;
}

.cargo-widget.widget-300x600.for-kids .header .clipart {
    display: block;
    top: -10px;
    left: 55px;
    position: absolute;
    width: 170px;
    height: 170px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-for-kids.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-300x600.for-kids .header .clipart {
    right: 70px;
    left: auto;
}

.cargo-widget.widget-300x600.materials .header .clipart {
    display: block;
    top: -20px;
    left: 45px;
    position: absolute;
    width: 210px;
    height: 210px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-construction-materials.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-300x600.materials .header .clipart {
    right: 45px;
    left: auto;
}

.cargo-widget.widget-300x600.tools .header .clipart {
    display: block;
    top: -20px;
    left: 55px;
    position: absolute;
    width: 190px;
    height: 190px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-instruments.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-300x600.tools .header .clipart {
    right: 45px;
    left: auto;
}

.cargo-widget.widget-300x600.furniture .header .clipart {
    display: block;
    top: 0px;
    left: 75px;
    position: absolute;
    width: 150px;
    height: 150px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-furniture.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-300x600.furniture .header .clipart {
    right: 55px;
    left: auto;
}

.cargo-widget.widget-300x600.home-appliances .header .clipart {
    display: block;
    top: 0px;
    left: 75px;
    position: absolute;
    width: 150px;
    height: 150px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-home-appliances.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-300x600.home-appliances .header .clipart {
    right: 75px;
    left: auto;
}

.cargo-widget.widget-300x600.agricultural .header .clipart {
    display: block;
    top: -35px;
    left: 40px;
    position: absolute;
    width: 220px;
    height: 220px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-agricultural-equipment.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-300x600.agricultural .header .clipart {
    right: 40px;
    left: auto;
}

.cargo-widget.widget-300x600.auto-parts .header .clipart {
    display: block;
    top: 5px;
    left: 70px;
    position: absolute;
    width: 150px;
    height: 150px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-automobile-parts.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-300x600.auto-parts .header .clipart {
    right: 70px;
    left: auto;
}

.cargo-widget.widget-300x600.moto-parts .header .clipart {
    display: block;
    top: 5px;
    left: 70px;
    position: absolute;
    width: 150px;
    height: 150px;
    background: url('../../Content/Images/cargo-delivery/widgets/clipart-moto-parts.svg') no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

*[dir='rtl'] .cargo-widget.widget-300x600.moto-parts .header .clipart {
    right: 70px;
    left: auto;
}

.cargo-widget.widget-300x600 .header .description a {
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
}

.cargo-widget.widget-300x600.clothes .header .description {
    position: absolute;
    top: 155px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.watches .header .description {
    position: absolute;
    top: 165px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.musical-instruments .header .description {
    position: absolute;
    top: 165px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.sports .header .description {
    position: absolute;
    top: 165px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.consoles .header .description {
    position: absolute;
    top: 154px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.computer-parts .header .description {
    position: absolute;
    top: 147px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.computers .header .description {
    position: absolute;
    top: 147px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.mobile-accessories .header .description {
    position: absolute;
    top: 147px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.mobile-phones .header .description {
    position: absolute;
    top: 155px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.for-kids .header .description {
    position: absolute;
    top: 155px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.materials .header .description {
    position: absolute;
    top: 155px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.tools .header .description {
    position: absolute;
    top: 160px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.furniture .header .description {
    position: absolute;
    top: 150px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.home-appliances .header .description {
    position: absolute;
    top: 150px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.agricultural .header .description {
    position: absolute;
    top: 150px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.auto-parts .header .description {
    position: absolute;
    top: 150px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}

.cargo-widget.widget-300x600.moto-parts .header .description {
    position: absolute;
    top: 150px;
    left: 15px;
    width: 90%;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 16px;
    z-index: 1;
    text-transform: uppercase;
}
/* #endregion -------------- /300x600 ------------------------ */
/* #endregion ============================ /Cargo Delivery Widgets ===================================== */
/* #region ==================================== VIP Services =========================================== */
/* #region -------------------------- Cliparts ------------------------ */
/* #region Clipart VIP Medalman */
.vip-clipart-medalman {
    margin: 0px auto;
    display: block;
    width: 450px;
    height: 450px;
}

    .vip-clipart-medalman .clipart-cloud-1,
    .vip-clipart-medalman .clipart-cloud-2,
    .vip-clipart-medalman .clipart-cloud-3,
    .vip-clipart-medalman .clipart-cloud-4,
    .vip-clipart-medalman .clipart-cloud-5,
    .vip-clipart-medalman .clipart-cloud-6,
    .vip-clipart-medalman .clipart-cloud-7,
    .vip-clipart-medalman .clipart-cloud-8,
    .vip-clipart-medalman .clipart-cloud-9 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #EBEBEB;
    }

    .vip-clipart-medalman .clipart-cloud-1 {
        width: 24%;
        height: 24%;
        top: 20%;
        left: 14%;
        animation: clipart-vip-medalman-cloud-1 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-medalman .clipart-cloud-2 {
        width: 38%;
        height: 38%;
        top: 9%;
        left: 25%;
        animation: clipart-vip-medalman-cloud-2 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-medalman .clipart-cloud-3 {
        width: 30%;
        height: 30%;
        top: 12%;
        left: 53%;
        animation: clipart-vip-medalman-cloud-3 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-medalman .clipart-cloud-4 {
        width: 40%;
        height: 40%;
        top: 20%;
        left: 57%;
        animation: clipart-vip-medalman-cloud-4 1.7s ease-in-out infinite alternate;
    }

    .vip-clipart-medalman .clipart-cloud-5 {
        width: 30%;
        height: 30%;
        top: 45%;
        left: 66%;
        animation: clipart-vip-medalman-cloud-5 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-medalman .clipart-cloud-6 {
        width: 42%;
        height: 42%;
        top: 49%;
        left: 40%;
        animation: clipart-vip-medalman-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-medalman .clipart-cloud-7 {
        width: 28%;
        height: 28%;
        top: 61%;
        left: 25%;
        animation: clipart-vip-medalman-cloud-7 1.7s ease-in-out infinite alternate;
    }

    .vip-clipart-medalman .clipart-cloud-8 {
        width: 44%;
        height: 44%;
        top: 34%;
        left: 3%;
        animation: clipart-vip-medalman-cloud-8 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-medalman .clipart-cloud-9 {
        width: 48%;
        height: 48%;
        top: 25%;
        left: 29%;
    }

@keyframes clipart-vip-medalman-cloud-1 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes clipart-vip-medalman-cloud-2 {
    from {
        transform: translate(2%, 8%);
    }

    to {
        transform: translate(-2%, -2%);
    }
}

@keyframes clipart-vip-medalman-cloud-3 {
    from {
        transform: translate(-2%, -2%);
    }

    to {
        transform: translate(2%, 8%);
    }
}

@keyframes clipart-vip-medalman-cloud-4 {
    from {
        transform: translate(-8%, 3%);
    }

    to {
        transform: translate(8%, -3%);
    }
}

@keyframes clipart-vip-medalman-cloud-5 {
    from {
        transform: translate(7%, 3%);
    }

    to {
        transform: translate(-7%, -3%);
    }
}

@keyframes clipart-vip-medalman-cloud-6 {
    from {
        transform: translate(-3%, -7%);
    }

    to {
        transform: translate(3%, 7%);
    }
}

@keyframes clipart-vip-medalman-cloud-7 {
    from {
        transform: translate(-3%, 7%);
    }

    to {
        transform: translate(3%, -7%);
    }
}

@keyframes clipart-vip-medalman-cloud-8 {
    from {
        transform: translate(8%, 0%);
    }

    to {
        transform: translate(-4%, 0%);
    }
}

.vip-clipart-medalman .clipart-body {
    display: block;
    position: absolute;
    width: 51%;
    height: 51%;
    top: 33%;
    left: 27%;
    z-index: 1;
    background: url('../../Content/Images/VIP/ManMedal/clipart-body.svg') no-repeat center center transparent;
    background-size: contain;
}

.vip-clipart-medalman .head {
    display: block;
    position: absolute;
    width: 30%;
    height: 30%;
    top: 17.5%;
    left: 50%;
    z-index: 1;
    background: url('../../Content/Images/VIP/ManMedal/clipart-head.svg') no-repeat center center transparent;
    background-size: contain;
    animation: vip-medalman-head 2s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

.vip-clipart-medalman .eye-1 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 15%;
    height: 15%;
    top: 50%;
    left: 53%;
    background: url('../../Content/Images/VIP/ManMedal/clipart-eye.svg') no-repeat center center transparent;
    background-size: contain;
    animation: vip-medalman-eye-1 4s ease-in-out infinite 3s;
}

.vip-clipart-medalman .eye-2 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 15%;
    height: 15%;
    top: 50%;
    left: 26%;
    background: url('../../Content/Images/VIP/ManMedal/clipart-eye.svg') no-repeat center center transparent;
    background-size: contain;
    animation: vip-medalman-eye-2 4s ease-in-out infinite 3s;
}

.vip-clipart-medalman .brow-1 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 16%;
    height: 16%;
    top: 39%;
    left: 53%;
    background: url('../../Content/Images/VIP/ManMedal/clipart-brow.svg') no-repeat center center transparent;
    background-size: contain;
}

.vip-clipart-medalman .brow-2 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 16%;
    height: 16%;
    top: 39%;
    left: 28%;
    background: url('../../Content/Images/VIP/ManMedal/clipart-brow.svg') no-repeat center center transparent;
    background-size: contain;
    animation: vip-medalman-brow 4s ease-in-out infinite 3s;
}

@keyframes vip-medalman-eye-1 {
    0% {
        transform: scale(1, 1);
    }

    74% {
        transform: scale(1, 1);
    }

    76% {
        transform: scale(1, 0.3);
    }

    78% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes vip-medalman-eye-2 {
    0% {
        transform: scale(1, 1);
    }

    10% {
        transform: scale(1, 1);
    }

    12% {
        transform: scale(1, 0.3);
    }

    18% {
        transform: scale(1, 0.3);
    }

    21% {
        transform: scale(1, 1);
    }

    74% {
        transform: scale(1, 1);
    }

    76% {
        transform: scale(1, 0.3);
    }

    78% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes vip-medalman-brow {
    0% {
        transform: translate(0%, 0%);
    }

    10% {
        transform: translate(0%, 0%);
    }

    12% {
        transform: translate(0%, 10%);
    }

    18% {
        transform: translate(0%, 10%);
    }

    21% {
        transform: translate(0%, 0%);
    }

    100% {
        transform: translate(0%, 0%);
    }
}

@keyframes vip-medalman-head {
    from {
        transform: rotate(-15deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.vip-clipart-medalman .clipart-star-1,
.vip-clipart-medalman .clipart-star-2,
.vip-clipart-medalman .clipart-star-3,
.vip-clipart-medalman .clipart-star-4 {
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/clipart-shine-star.svg') no-repeat center center transparent;
    background-size: contain;
}

.vip-clipart-medalman .clipart-star-1 {
    width: 6%;
    height: 6%;
    top: 46%;
    left: 46%;
    animation: vip-medalman-star-1 2s ease-in-out infinite;
}

.vip-clipart-medalman .clipart-star-2 {
    width: 6%;
    height: 6%;
    top: 59%;
    left: 46%;
    animation: vip-medalman-star-2 2s ease-in-out infinite;
}

.vip-clipart-medalman .clipart-star-3 {
    width: 6%;
    height: 6%;
    top: 52%;
    left: 36%;
    animation: vip-medalman-star-3 2s ease-in-out infinite;
}

.vip-clipart-medalman .clipart-star-4 {
    width: 6%;
    height: 6%;
    top: 39%;
    left: 39%;
    animation: vip-medalman-star-4 2s ease-in-out infinite;
}

@keyframes vip-medalman-star-1 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    10% {
        transform: scale(0, 0) rotate(0deg);
    }

    30% {
        transform: scale(1, 1) rotate(30deg);
    }

    50% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}


@keyframes vip-medalman-star-2 {
    0% {
        transform: scale(0, 0) rotate(-20deg);
    }

    20% {
        transform: scale(0, 0) rotate(-20deg);
    }

    40% {
        transform: scale(1.8, 1.8) rotate(10deg);
    }

    60% {
        transform: scale(0, 0) rotate(40deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-medalman-star-3 {
    0% {
        transform: scale(0, 0) rotate(-20deg);
    }

    40% {
        transform: scale(0, 0) rotate(-20deg);
    }

    60% {
        transform: scale(1.5, 1.5) rotate(10deg);
    }

    80% {
        transform: scale(0, 0) rotate(40deg);
    }

    100% {
        transform: scale(0, 0) rotate(-20deg);
    }
}

@keyframes vip-medalman-star-4 {
    0% {
        transform: scale(0, 0) rotate(-10deg);
    }

    60% {
        transform: scale(0, 0) rotate(-10deg);
    }

    80% {
        transform: scale(1.4, 1.4) rotate(20deg);
    }

    99% {
        transform: scale(0, 0) rotate(50deg);
    }

    100% {
        transform: scale(0, 0) rotate(-10deg);
    }
}
/* #endregion Clipart VIP Medalman */
/* #region Clipart VIP MedalStore */
.vip-clipart-medalstore {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}

    .vip-clipart-medalstore .clipart-cloud-1,
    .vip-clipart-medalstore .clipart-cloud-2,
    .vip-clipart-medalstore .clipart-cloud-3,
    .vip-clipart-medalstore .clipart-cloud-4,
    .vip-clipart-medalstore .clipart-cloud-5,
    .vip-clipart-medalstore .clipart-cloud-6,
    .vip-clipart-medalstore .clipart-cloud-7,
    .vip-clipart-medalstore .clipart-cloud-8,
    .vip-clipart-medalstore .clipart-cloud-9,
    .vip-clipart-medalstore .clipart-cloud-10 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #EBEBEB;
    }

    .vip-clipart-medalstore .clipart-cloud-1 {
        width: 24%;
        height: 24%;
        top: 15%;
        left: 13%;
        animation: clipart-vip-medalstore-cloud-1 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-medalstore .clipart-cloud-2 {
        width: 44%;
        height: 44%;
        top: 6%;
        left: 25%;
        animation: clipart-vip-medalstore-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-medalstore .clipart-cloud-3 {
        width: 34%;
        height: 34%;
        top: 12%;
        left: 48%;
        animation: clipart-vip-medalstore-cloud-3 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-medalstore .clipart-cloud-4 {
        width: 17%;
        height: 17%;
        top: 31%;
        left: 72%;
        animation: clipart-vip-medalstore-cloud-4 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-medalstore .clipart-cloud-5 {
        width: 50%;
        height: 50%;
        top: 35%;
        left: 43%;
        animation: clipart-vip-medalstore-cloud-5 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-medalstore .clipart-cloud-6 {
        width: 23%;
        height: 23%;
        top: 71%;
        left: 45%;
        animation: clipart-vip-medalstore-cloud-6 1.7s ease-in-out infinite alternate;
    }

    .vip-clipart-medalstore .clipart-cloud-7 {
        width: 30%;
        height: 30%;
        top: 56%;
        left: 27%;
        animation: clipart-vip-medalstore-cloud-7 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-medalstore .clipart-cloud-8 {
        width: 27%;
        height: 27%;
        top: 63%;
        left: 9%;
        animation: clipart-vip-medalstore-cloud-8 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-medalstore .clipart-cloud-9 {
        width: 45%;
        height: 45%;
        top: 30%;
        left: 6%;
        animation: clipart-vip-medalstore-cloud-9 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-medalstore .clipart-cloud-10 {
        width: 55%;
        height: 55%;
        top: 22%;
        left: 21%;
    }

@keyframes clipart-vip-medalstore-cloud-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(8%, 8%);
    }
}

@keyframes clipart-vip-medalstore-cloud-2 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@keyframes clipart-vip-medalstore-cloud-3 {
    from {
        transform: translate(4%, -6%);
    }

    to {
        transform: translate(-4%, 6%);
    }
}

@keyframes clipart-vip-medalstore-cloud-4 {
    from {
        transform: translate(-8%, 2%);
    }

    to {
        transform: translate(8%, -2%);
    }
}

@keyframes clipart-vip-medalstore-cloud-5 {
    from {
        transform: translate(4%, 4%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

@keyframes clipart-vip-medalstore-cloud-6 {
    from {
        transform: translate(-2%, -8%);
    }

    to {
        transform: translate(2%, 8%);
    }
}

@keyframes clipart-vip-medalstore-cloud-7 {
    from {
        transform: translate(0%, 8%);
    }

    to {
        transform: translate(0%, -8%);
    }
}

@keyframes clipart-vip-medalstore-cloud-8 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes clipart-vip-medalstore-cloud-9 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

.vip-clipart-medalstore .clipart-store {
    display: block;
    width: 65%;
    height: 65%;
    top: 13%;
    left: 17%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/ShopMedal/clipart-store.svg') no-repeat center center transparent;
    background-size: contain;
}

.vip-clipart-medalstore .shadow {
    display: block;
    width: 70%;
    height: 5%;
    top: 72%;
    left: 15%;
    position: absolute;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
}

.vip-clipart-medalstore .clipart-star-1,
.vip-clipart-medalstore .clipart-star-2,
.vip-clipart-medalstore .clipart-star-3,
.vip-clipart-medalstore .clipart-star-4,
.vip-clipart-medalstore .clipart-star-5,
.vip-clipart-medalstore .clipart-star-6 {
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/clipart-shine-star.svg') no-repeat center center transparent;
    background-size: contain;
}

.vip-clipart-medalstore .clipart-star-1 {
    width: 10%;
    height: 10%;
    top: 40%;
    left: 40%;
    animation: vip-medalstore-star-1 2s ease-in-out infinite;
}

.vip-clipart-medalstore .clipart-star-2 {
    width: 7%;
    height: 7%;
    top: 38%;
    left: 59%;
    animation: vip-medalstore-star-2 2s ease-in-out infinite;
}

.vip-clipart-medalstore .clipart-star-3 {
    width: 8%;
    height: 8%;
    top: 27%;
    left: 50%;
    animation: vip-medalstore-star-3 2s ease-in-out infinite;
}

.vip-clipart-medalstore .clipart-star-4 {
    width: 10%;
    height: 10%;
    top: 21%;
    left: 35%;
    animation: vip-medalstore-star-4 2s ease-in-out infinite;
}

.vip-clipart-medalstore .clipart-star-5 {
    width: 10%;
    height: 10%;
    top: 30%;
    left: 38%;
    animation: vip-medalstore-star-5 2s ease-in-out infinite;
}

.vip-clipart-medalstore .clipart-star-6 {
    width: 10%;
    height: 10%;
    top: 16%;
    left: 48%;
    animation: vip-medalstore-star-6 2s ease-in-out infinite;
}

@keyframes vip-medalstore-star-1 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    10% {
        transform: scale(0, 0) rotate(0deg);
    }

    30% {
        transform: scale(1, 1) rotate(30deg);
    }

    50% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-medalstore-star-2 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    20% {
        transform: scale(0, 0) rotate(0deg);
    }

    40% {
        transform: scale(1, 1) rotate(30deg);
    }

    60% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-medalstore-star-3 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    30% {
        transform: scale(0, 0) rotate(0deg);
    }

    50% {
        transform: scale(1, 1) rotate(30deg);
    }

    70% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-medalstore-star-4 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    40% {
        transform: scale(0, 0) rotate(0deg);
    }

    60% {
        transform: scale(1, 1) rotate(30deg);
    }

    80% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-medalstore-star-5 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    50% {
        transform: scale(0, 0) rotate(0deg);
    }

    70% {
        transform: scale(1, 1) rotate(30deg);
    }

    90% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-medalstore-star-6 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    60% {
        transform: scale(0, 0) rotate(0deg);
    }

    80% {
        transform: scale(1, 1) rotate(30deg);
    }

    99% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

/* #endregion Clipart VIP MedalStore */
/* #region Clipart VIP Autorenew */
.vip-clipart-autorenew {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}

    .vip-clipart-autorenew .clipart-cloud-1,
    .vip-clipart-autorenew .clipart-cloud-2,
    .vip-clipart-autorenew .clipart-cloud-3,
    .vip-clipart-autorenew .clipart-cloud-4,
    .vip-clipart-autorenew .clipart-cloud-5,
    .vip-clipart-autorenew .clipart-cloud-6,
    .vip-clipart-autorenew .clipart-cloud-7,
    .vip-clipart-autorenew .clipart-cloud-8,
    .vip-clipart-autorenew .clipart-cloud-9,
    .vip-clipart-autorenew .clipart-cloud-10,
    .vip-clipart-autorenew .clipart-cloud-11,
    .vip-clipart-autorenew .clipart-cloud-12 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #EBEBEB;
    }

    .vip-clipart-autorenew .clipart-cloud-1 {
        top: 23%;
        left: 15%;
        width: 20%;
        height: 20%;
        animation: clipart-vip-autorenew-cloud-1 1.7s ease-in-out infinite alternate;
    }

    .vip-clipart-autorenew .clipart-cloud-2 {
        top: 8%;
        left: 19%;
        width: 29%;
        height: 29%;
        animation: clipart-vip-autorenew-cloud-2 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-autorenew .clipart-cloud-3 {
        top: 14%;
        left: 37%;
        width: 25%;
        height: 25%;
        animation: clipart-vip-autorenew-cloud-3 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-autorenew .clipart-cloud-4 {
        top: 12%;
        left: 48%;
        width: 40%;
        height: 40%;
        animation: clipart-vip-autorenew-cloud-4 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-autorenew .clipart-cloud-5 {
        top: 27%;
        left: 68%;
        width: 30%;
        height: 30%;
        animation: clipart-vip-autorenew-cloud-5 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-autorenew .clipart-cloud-6 {
        top: 40%;
        left: 56%;
        width: 40%;
        height: 40%;
        animation: clipart-vip-autorenew-cloud-6 1.7s ease-in-out infinite alternate;
    }

    .vip-clipart-autorenew .clipart-cloud-7 {
        top: 67%;
        left: 60%;
        width: 25%;
        height: 25%;
        animation: clipart-vip-autorenew-cloud-7 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-autorenew .clipart-cloud-8 {
        top: 55%;
        left: 37%;
        width: 35%;
        height: 35%;
        animation: clipart-vip-autorenew-cloud-8 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-autorenew .clipart-cloud-9 {
        top: 62%;
        left: 16%;
        width: 30%;
        height: 30%;
        animation: clipart-vip-autorenew-cloud-9 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-autorenew .clipart-cloud-10 {
        top: 55%;
        left: 10%;
        width: 20%;
        height: 20%;
        animation: clipart-vip-autorenew-cloud-10 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-autorenew .clipart-cloud-11 {
        top: 33%;
        left: 3%;
        width: 30%;
        height: 30%;
        animation: clipart-vip-autorenew-cloud-11 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-autorenew .clipart-cloud-12 {
        top: 19%;
        left: 21%;
        width: 60%;
        height: 60%;
    }

@keyframes clipart-vip-autorenew-cloud-1 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes clipart-vip-autorenew-cloud-2 {
    from {
        transform: translate(8%, 8%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

@keyframes clipart-vip-autorenew-cloud-3 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

@keyframes clipart-vip-autorenew-cloud-4 {
    from {
        transform: translate(-4%, 5%);
    }

    to {
        transform: translate(4%, -5%);
    }
}

@keyframes clipart-vip-autorenew-cloud-5 {
    from {
        transform: translate(7%, -3%);
    }

    to {
        transform: translate(-7%, 3%);
    }
}

@keyframes clipart-vip-autorenew-cloud-6 {
    from {
        transform: translate(-7%, -3%);
    }

    to {
        transform: translate(7%, 3%);
    }
}

@keyframes clipart-vip-autorenew-cloud-7 {
    from {
        transform: translate(3%, 6%);
    }

    to {
        transform: translate(-3%, -6%);
    }
}

@keyframes clipart-vip-autorenew-cloud-8 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@keyframes clipart-vip-autorenew-cloud-9 {
    from {
        transform: translate(-5%, 5%);
    }

    to {
        transform: translate(5%, -5%);
    }
}

@keyframes clipart-vip-autorenew-cloud-10 {
    from {
        transform: translate(6%, -4%);
    }

    to {
        transform: translate(-6%, 4%);
    }
}

@keyframes clipart-vip-autorenew-cloud-11 {
    from {
        transform: translate(-5%, 0%);
    }

    to {
        transform: translate(5%, 0%);
    }
}

.vip-clipart-autorenew .clipart-medal {
    top: 22%;
    left: 19%;
    width: 45%;
    height: 45%;
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/clipart-medal.svg') no-repeat center center transparent;
    background-size: contain;
    animation: vip-autorenew-medal 2s ease-in-out infinite alternate;
}

@keyframes vip-autorenew-medal {
    from {
        transform: translate(0%, -10%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

.vip-clipart-autorenew .clipart-star-1,
.vip-clipart-expired .clipart-star-1,
.vip-clipart-reminder .clipart-star-1 {
    top: 0%;
    left: 27%;
    width: 20%;
    height: 20%;
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/clipart-shine-star.svg') no-repeat center center transparent;
    background-size: contain;
    animation: vip-autorenew-star-1 2s ease-in-out infinite;
}

.vip-clipart-autorenew .clipart-star-2,
.vip-clipart-expired .clipart-star-2,
.vip-clipart-reminder .clipart-star-2 {
    top: 6%;
    left: 51%;
    width: 20%;
    height: 20%;
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/clipart-shine-star.svg') no-repeat center center transparent;
    background-size: contain;
    animation: vip-autorenew-star-2 2s ease-in-out infinite;
}

.vip-clipart-autorenew .clipart-star-3,
.vip-clipart-expired .clipart-star-3,
.vip-clipart-reminder .clipart-star-3 {
    top: 28%;
    left: 25%;
    width: 20%;
    height: 20%;
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/clipart-shine-star.svg') no-repeat center center transparent;
    background-size: contain;
    animation: vip-autorenew-star-3 2s ease-in-out infinite;
}

.vip-clipart-autorenew .clipart-star-4,
.vip-clipart-expired .clipart-star-4,
.vip-clipart-reminder .clipart-star-4 {
    top: 53%;
    left: 26%;
    width: 20%;
    height: 20%;
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/clipart-shine-star.svg') no-repeat center center transparent;
    background-size: contain;
    animation: vip-autorenew-star-4 2s ease-in-out infinite;
}

@keyframes vip-autorenew-star-1 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    10% {
        transform: scale(0, 0) rotate(0deg);
    }

    30% {
        transform: scale(1, 1) rotate(30deg);
    }

    50% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-autorenew-star-2 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    20% {
        transform: scale(0, 0) rotate(0deg);
    }

    40% {
        transform: scale(1, 1) rotate(30deg);
    }

    60% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-autorenew-star-3 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    40% {
        transform: scale(0, 0) rotate(0deg);
    }

    60% {
        transform: scale(1, 1) rotate(30deg);
    }

    80% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-autorenew-star-4 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    60% {
        transform: scale(0, 0) rotate(0deg);
    }

    80% {
        transform: scale(1, 1) rotate(30deg);
    }

    99% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

.vip-clipart-autorenew .shadow-1 {
    display: block;
    top: 68%;
    left: 22%;
    width: 39%;
    height: 4%;
    position: absolute;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    animation: vip-autorenew-shadow-1 2s ease-in-out infinite alternate;
}

@keyframes vip-autorenew-shadow-1 {
    from {
        transform: scale(0.9, 1);
        background-color: rgba(0, 0, 0, 0.1);
    }

    to {
        transform: scale(1, 1);
        background-color: rgba(0, 0, 0, 0.2);
    }
}

.vip-clipart-autorenew .clipart-invoice {
    display: block;
    width: 41%;
    height: 41%;
    top: 33%;
    left: 40%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/Autorenew/clipart-invoice.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-vip-autorenew-invoice 2s ease-in-out infinite alternate;
}

@keyframes clipart-vip-autorenew-invoice {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(0%, -8%);
    }
}

.vip-clipart-autorenew .shadow-2 {
    display: block;
    top: 77%;
    left: 41%;
    width: 39%;
    height: 4%;
    position: absolute;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    animation: vip-autorenew-shadow-2 2s ease-in-out infinite alternate;
}

@keyframes vip-autorenew-shadow-2 {
    from {
        transform: scale(1, 1);
        background-color: rgba(0, 0, 0, 0.2);
    }

    to {
        transform: scale(0.9, 1);
        background-color: rgba(0, 0, 0, 0.1);
    }
}


/* #endregion Clipart VIP Autorenew */
/* #region Clipart VIP Expired */
.vip-clipart-expired {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}

    .vip-clipart-expired .clipart-cloud-1,
    .vip-clipart-expired .clipart-cloud-2,
    .vip-clipart-expired .clipart-cloud-3,
    .vip-clipart-expired .clipart-cloud-4,
    .vip-clipart-expired .clipart-cloud-5,
    .vip-clipart-expired .clipart-cloud-6,
    .vip-clipart-expired .clipart-cloud-7,
    .vip-clipart-expired .clipart-cloud-8,
    .vip-clipart-expired .clipart-cloud-9,
    .vip-clipart-expired .clipart-cloud-10,
    .vip-clipart-expired .clipart-cloud-11 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #EBEBEB;
    }

    .vip-clipart-expired .clipart-cloud-1 {
        top: 22%;
        left: 5%;
        width: 25%;
        height: 25%;
        animation: clipart-vip-expired-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-expired .clipart-cloud-2 {
        top: 5%;
        left: 12%;
        width: 35%;
        height: 35%;
        animation: clipart-vip-expired-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-expired .clipart-cloud-3 {
        top: 11%;
        left: 38%;
        width: 23%;
        height: 23%;
        animation: clipart-vip-expired-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-expired .clipart-cloud-4 {
        top: 6%;
        left: 48%;
        width: 40%;
        height: 40%;
        animation: clipart-vip-expired-cloud-4 1.7s ease-in-out infinite alternate;
    }

    .vip-clipart-expired .clipart-cloud-5 {
        top: 28%;
        left: 76%;
        width: 21%;
        height: 21%;
        animation: clipart-vip-expired-cloud-5 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-expired .clipart-cloud-6 {
        top: 40%;
        left: 63%;
        width: 35%;
        height: 35%;
        animation: clipart-vip-expired-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-expired .clipart-cloud-7 {
        top: 55%;
        left: 47%;
        width: 40%;
        height: 40%;
        animation: clipart-vip-expired-cloud-7 1.7s ease-in-out infinite alternate;
    }

    .vip-clipart-expired .clipart-cloud-8 {
        top: 57%;
        left: 28%;
        width: 35%;
        height: 35%;
        animation: clipart-vip-expired-cloud-8 1.6s ease-in-out infinite alternate;
    }


    .vip-clipart-expired .clipart-cloud-9 {
        top: 60%;
        left: 11%;
        width: 32%;
        height: 32%;
        animation: clipart-vip-expired-cloud-9 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-expired .clipart-cloud-10 {
        top: 36%;
        left: 3%;
        width: 37%;
        height: 37%;
        animation: clipart-vip-expired-cloud-10 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-expired .clipart-cloud-11 {
        top: 26%;
        left: 23%;
        width: 50%;
        height: 50%;
    }

@keyframes clipart-vip-expired-cloud-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(8%, 8%);
    }
}

@keyframes clipart-vip-expired-cloud-2 {
    from {
        transform: translate(3%, 6%);
    }

    to {
        transform: translate(-3%, -6%);
    }
}

@keyframes clipart-vip-expired-cloud-3 {
    from {
        transform: translate(0%, -7%);
    }

    to {
        transform: translate(0%, 7%);
    }
}

@keyframes clipart-vip-expired-cloud-4 {
    from {
        transform: translate(-3%, 7%);
    }

    to {
        transform: translate(3%, -7%);
    }
}

@keyframes clipart-vip-expired-cloud-5 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@keyframes clipart-vip-expired-cloud-6 {
    from {
        transform: translate(-4%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

@keyframes clipart-vip-expired-cloud-7 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(-9%, -9%);
    }
}

@keyframes clipart-vip-expired-cloud-8 {
    from {
        transform: translate(0%, -7%);
    }

    to {
        transform: translate(0%, 7%);
    }
}

@keyframes clipart-vip-expired-cloud-9 {
    from {
        transform: translate(-4%, 7%);
    }

    to {
        transform: translate(4%, -7%);
    }
}

@keyframes clipart-vip-expired-cloud-10 {
    from {
        transform: translate(5%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

.vip-clipart-expired .clipart-medal {
    top: 18%;
    left: 13%;
    width: 50%;
    height: 50%;
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/clipart-medal2.svg') no-repeat center center transparent;
    background-size: contain;
    animation: vip-autorenew-medal 2s ease-in-out infinite alternate;
}

.vip-clipart-expired .shadow-1 {
    display: block;
    top: 69%;
    left: 18%;
    width: 41%;
    height: 4%;
    position: absolute;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    animation: vip-autorenew-shadow-1 2s ease-in-out infinite alternate;
}

.vip-clipart-expired .clipart-cross {
    top: 36%;
    left: 43%;
    width: 40%;
    height: 40%;
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/clipart-cancel.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-vip-autorenew-invoice 2s ease-in-out infinite alternate;
}

.vip-clipart-expired .shadow-2 {
    display: block;
    top: 78%;
    left: 43%;
    width: 41%;
    height: 4%;
    position: absolute;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    animation: vip-autorenew-shadow-2 2s ease-in-out infinite alternate;
}
/* #endregion Clipart VIP Expired */
/* #region Clipart VIP Reminder */
.vip-clipart-reminder {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}

    .vip-clipart-reminder .clipart-cloud-1,
    .vip-clipart-reminder .clipart-cloud-2,
    .vip-clipart-reminder .clipart-cloud-3,
    .vip-clipart-reminder .clipart-cloud-4,
    .vip-clipart-reminder .clipart-cloud-5,
    .vip-clipart-reminder .clipart-cloud-6,
    .vip-clipart-reminder .clipart-cloud-7,
    .vip-clipart-reminder .clipart-cloud-8,
    .vip-clipart-reminder .clipart-cloud-9 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #EBEBEB;
    }

    .vip-clipart-reminder .clipart-cloud-1 {
        width: 22%;
        height: 22%;
        top: 18%;
        left: 17%;
        animation: clipart-vip-reminder-cloud-1 1.3s ease-in-out infinite alternate;
    }

    .vip-clipart-reminder .clipart-cloud-2 {
        width: 30%;
        height: 30%;
        top: 9%;
        left: 29%;
        animation: clipart-vip-reminder-cloud-2 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-reminder .clipart-cloud-3 {
        width: 40%;
        height: 40%;
        top: 8%;
        left: 46%;
        animation: clipart-vip-reminder-cloud-3 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-reminder .clipart-cloud-4 {
        width: 32%;
        height: 32%;
        top: 29%;
        left: 66%;
        animation: clipart-vip-reminder-cloud-4 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-reminder .clipart-cloud-5 {
        width: 45%;
        height: 45%;
        top: 45%;
        left: 47%;
        animation: clipart-vip-reminder-cloud-5 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-reminder .clipart-cloud-6 {
        width: 55%;
        height: 55%;
        top: 37%;
        left: 17%;
        animation: clipart-vip-reminder-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-reminder .clipart-cloud-7 {
        width: 25%;
        height: 25%;
        top: 51%;
        left: 9%;
        animation: clipart-vip-reminder-cloud-7 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-reminder .clipart-cloud-8 {
        width: 32%;
        height: 32%;
        top: 26%;
        left: 3%;
        animation: clipart-vip-reminder-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-reminder .clipart-cloud-9 {
        width: 52%;
        height: 52%;
        top: 26%;
        left: 22%;
    }

@keyframes clipart-vip-reminder-cloud-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(8%, 8%);
    }
}

@keyframes clipart-vip-reminder-cloud-2 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@keyframes clipart-vip-reminder-cloud-3 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@keyframes clipart-vip-reminder-cloud-4 {
    from {
        transform: translate(-7%, 0%);
    }

    to {
        transform: translate(5%, 0%);
    }
}

@keyframes clipart-vip-reminder-cloud-5 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(-5%, -5%);
    }
}

@keyframes clipart-vip-reminder-cloud-6 {
    from {
        transform: translate(2%, -5%);
    }

    to {
        transform: translate(-2%, 5%);
    }
}

@keyframes clipart-vip-reminder-cloud-7 {
    from {
        transform: translate(-7%, 2%);
    }

    to {
        transform: translate(7%, -2%);
    }
}

@keyframes clipart-vip-reminder-cloud-8 {
    from {
        transform: translate(8%, 2%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

.vip-clipart-reminder .clipart-medal {
    top: 18%;
    left: 13%;
    width: 50%;
    height: 50%;
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/clipart-medal.svg') no-repeat center center transparent;
    background-size: contain;
    animation: vip-autorenew-medal 2s ease-in-out infinite alternate;
}

.vip-clipart-reminder .shadow-1 {
    display: block;
    top: 69%;
    left: 18%;
    width: 41%;
    height: 4%;
    position: absolute;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    animation: vip-autorenew-shadow-1 2s ease-in-out infinite alternate;
}

.vip-clipart-reminder .clipart-timer {
    display: block;
    width: 45%;
    height: 45%;
    top: 28%;
    left: 40%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/Reminder/clipart-timer.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-vip-autorenew-invoice 2s ease-in-out infinite alternate;
}

.vip-clipart-reminder .clipart-arrow {
    display: block;
    width: 45%;
    height: 45%;
    top: 33%;
    left: 16%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/Reminder/clipart-arrow.svg') no-repeat center center transparent;
    background-size: contain;
    animation: vip-clipart-reminder-arrow 2s ease-in-out infinite alternate;
    transform-origin: 78% 50%;
}

@keyframes vip-clipart-reminder-arrow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(60deg);
    }
}

.vip-clipart-reminder .shadow-2 {
    display: block;
    top: 77%;
    left: 41%;
    width: 39%;
    height: 4%;
    position: absolute;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    animation: vip-autorenew-shadow-2 2s ease-in-out infinite alternate;
}


/* #endregion Clipart VIP Reminder */
/* #region Clipart Settings VIP user */
.vip-clipart-settings-user {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}

    .vip-clipart-settings-user .user {
        display: block;
        width: 65%;
        height: 65%;
        top: 17%;
        left: 15%;
        position: absolute;
        z-index: 1;
    }

    .vip-clipart-settings-user .clipart-cloud-1,
    .vip-clipart-settings-user .clipart-cloud-2,
    .vip-clipart-settings-user .clipart-cloud-3,
    .vip-clipart-settings-user .clipart-cloud-4,
    .vip-clipart-settings-user .clipart-cloud-5,
    .vip-clipart-settings-user .clipart-cloud-6,
    .vip-clipart-settings-user .clipart-cloud-7,
    .vip-clipart-settings-user .clipart-cloud-8,
    .vip-clipart-settings-user .clipart-cloud-9,
    .vip-clipart-settings-user .clipart-cloud-10,
    .vip-clipart-settings-user .clipart-cloud-11,
    .vip-clipart-settings-user .clipart-cloud-12,
    .vip-clipart-settings-user .clipart-cloud-13 {
        display: block;
        position: absolute;
        border-radius: 50%;
        z-index: 1;
        background-color: #FFFFFF;
    }

    .vip-clipart-settings-user .clipart-cloud-1 {
        width: 18%;
        height: 18%;
        top: 25%;
        left: 8%;
        animation: clipart-vip-settings-user-cloud-1 1.3s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-user .clipart-cloud-2 {
        width: 30%;
        height: 30%;
        top: 15%;
        left: 18%;
        animation: clipart-vip-settings-user-cloud-2 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-user .clipart-cloud-3 {
        width: 15%;
        height: 15%;
        top: 18%;
        left: 43%;
        animation: clipart-vip-settings-user-cloud-3 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-user .clipart-cloud-4 {
        width: 30%;
        height: 30%;
        top: 15%;
        left: 51%;
        animation: clipart-vip-settings-user-cloud-4 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-user .clipart-cloud-5 {
        width: 36%;
        height: 36%;
        top: 22%;
        left: 63%;
        animation: clipart-vip-settings-user-cloud-5 1.3s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-user .clipart-cloud-6 {
        width: 20%;
        height: 20%;
        top: 47%;
        left: 73%;
        animation: clipart-vip-settings-user-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-user .clipart-cloud-7 {
        width: 26%;
        height: 26%;
        top: 59%;
        left: 68%;
        animation: clipart-vip-settings-user-cloud-7 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-user .clipart-cloud-8 {
        width: 22%;
        height: 22%;
        top: 59%;
        left: 53%;
        animation: clipart-vip-settings-user-cloud-8 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-user .clipart-cloud-9 {
        width: 32%;
        height: 32%;
        top: 53%;
        left: 27%;
        animation: clipart-vip-settings-user-cloud-9 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-user .clipart-cloud-10 {
        width: 22%;
        height: 22%;
        top: 62%;
        left: 11%;
        animation: clipart-vip-settings-user-cloud-10 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-user .clipart-cloud-11 {
        width: 30%;
        height: 30%;
        top: 40%;
        left: 11%;
        animation: clipart-vip-settings-user-cloud-11 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-user .clipart-cloud-12 {
        width: 24%;
        height: 24%;
        top: 33%;
        left: 1%;
        animation: clipart-vip-settings-user-cloud-12 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-user .clipart-cloud-13 {
        width: 71%;
        height: 49%;
        top: 25%;
        left: 16%;
    }

@keyframes clipart-vip-settings-user-cloud-1 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@keyframes clipart-vip-settings-user-cloud-2 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@keyframes clipart-vip-settings-user-cloud-3 {
    from {
        transform: translate(0%, -7%);
    }

    to {
        transform: translate(0%, 7%);
    }
}

@keyframes clipart-vip-settings-user-cloud-4 {
    from {
        transform: translate(0%, 6%);
    }

    to {
        transform: translate(0%, -6%);
    }
}

@keyframes clipart-vip-settings-user-cloud-5 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes clipart-vip-settings-user-cloud-6 {
    from {
        transform: translate(-7%, 0%);
    }

    to {
        transform: translate(7%, 0%);
    }
}

@keyframes clipart-vip-settings-user-cloud-7 {
    from {
        transform: translate(6%, 6%);
    }

    to {
        transform: translate(-6%, -6%);
    }
}

@keyframes clipart-vip-settings-user-cloud-8 {
    from {
        transform: translate(0%, -8%);
    }

    to {
        transform: translate(0%, 8%);
    }
}

@keyframes clipart-vip-settings-user-cloud-9 {
    from {
        transform: translate(0%, 7%);
    }

    to {
        transform: translate(0%, -7%);
    }
}

@keyframes clipart-vip-settings-user-cloud-10 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@keyframes clipart-vip-settings-user-cloud-11 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(8%, 0%);
    }
}

@keyframes clipart-vip-settings-user-cloud-12 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

.vip-clipart-settings-user .clipart-user-body {
    display: block;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/Settings/clipart-user-body.svg') no-repeat center center transparent;
    background-size: contain;
}

.vip-clipart-settings-user .clipart-user-head {
    display: block;
    width: 10%;
    height: 10%;
    top: 17%;
    left: 17%;
    position: absolute;
    z-index: 1;
}

.vip-clipart-settings-user .clipart-eye-1 {
    display: block;
    width: 28%;
    height: 28%;
    top: 24%;
    left: 4%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/Settings/clipart-user-eye.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-vip-settings-user-eyes 3s ease-in-out infinite;
}

.vip-clipart-settings-user .clipart-eye-2 {
    display: block;
    width: 28%;
    height: 28%;
    top: 24%;
    left: 59%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/Settings/clipart-user-eye.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-vip-settings-user-eyes 3s ease-in-out infinite;
}

@keyframes clipart-vip-settings-user-eyes {
    0% {
        transform: scale(1, 1);
    }

    10% {
        transform: scale(1, 1);
    }

    11% {
        transform: scale(1, 0);
    }

    15% {
        transform: scale(1, 0);
    }

    16% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

.vip-clipart-settings-user .clipart-brow-1 {
    display: block;
    width: 32%;
    height: 32%;
    top: -3%;
    left: 8%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/Settings/clipart-user-brow-left.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-vip-settings-user-brows 3s ease-in-out infinite;
}

.vip-clipart-settings-user .clipart-brow-2 {
    display: block;
    width: 24%;
    height: 24%;
    top: 2%;
    left: 65%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/Settings/clipart-user-brow-right.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-vip-settings-user-brows 3s ease-in-out infinite;
}


@keyframes clipart-vip-settings-user-brows {
    0% {
        transform: translate(0%, 0%);
    }

    10% {
        transform: translate(0%, 0%);
    }

    16% {
        transform: translate(0%, -20%);
    }

    30% {
        transform: translate(0%, -20%);
    }

    35% {
        transform: translate(0%, 0%);
    }

    100% {
        transform: translate(0%, 0%);
    }
}

.vip-clipart-settings-user .clipart-star-1,
.vip-clipart-settings-user .clipart-star-2,
.vip-clipart-settings-user .clipart-star-3,
.vip-clipart-settings-user .clipart-star-4,
.vip-clipart-settings-user .clipart-star-5,
.vip-clipart-settings-user .clipart-star-6,
.vip-clipart-settings-user .clipart-star-7,
.vip-clipart-settings-user .clipart-star-8 {
    width: 7%;
    height: 7%;
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/clipart-shine-star.svg') no-repeat center center transparent;
    background-size: contain;
}

.vip-clipart-settings-user .clipart-star-1 {
    top: 38%;
    left: 21%;
    animation: vip-clipart-settings-user-star-1 3s ease-in-out infinite;
}

.vip-clipart-settings-user .clipart-star-2 {
    top: 44%;
    left: 31%;
    animation: vip-clipart-settings-user-star-2 3s ease-in-out infinite;
}

.vip-clipart-settings-user .clipart-star-3 {
    top: 34%;
    left: 29%;
    animation: vip-clipart-settings-user-star-3 3s ease-in-out infinite;
}

.vip-clipart-settings-user .clipart-star-4 {
    top: 24%;
    left: 37%;
    animation: vip-clipart-settings-user-star-4 3s ease-in-out infinite;
}

.vip-clipart-settings-user .clipart-star-5 {
    top: 17%;
    left: 46%;
    animation: vip-clipart-settings-user-star-5 3s ease-in-out infinite;
}

.vip-clipart-settings-user .clipart-star-6 {
    top: 21%;
    left: 87%;
    animation: vip-clipart-settings-user-star-6 3s ease-in-out infinite;
}

.vip-clipart-settings-user .clipart-star-7 {
    top: 28%;
    left: 72%;
    animation: vip-clipart-settings-user-star-7 3s ease-in-out infinite;
}

.vip-clipart-settings-user .clipart-star-8 {
    top: 21%;
    left: 56%;
    animation: vip-clipart-settings-user-star-8 3s ease-in-out infinite;
}

@keyframes vip-clipart-settings-user-star-1 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    5% {
        transform: scale(0, 0) rotate(0deg);
    }

    25% {
        transform: scale(1, 1) rotate(30deg);
    }

    45% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-clipart-settings-user-star-2 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    15% {
        transform: scale(0, 0) rotate(0deg);
    }

    35% {
        transform: scale(1, 1) rotate(30deg);
    }

    55% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-clipart-settings-user-star-3 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    25% {
        transform: scale(0, 0) rotate(0deg);
    }

    45% {
        transform: scale(1, 1) rotate(30deg);
    }

    65% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-clipart-settings-user-star-4 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    35% {
        transform: scale(0, 0) rotate(0deg);
    }

    55% {
        transform: scale(1, 1) rotate(30deg);
    }

    75% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-clipart-settings-user-star-5 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    45% {
        transform: scale(0, 0) rotate(0deg);
    }

    65% {
        transform: scale(1, 1) rotate(30deg);
    }

    85% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-clipart-settings-user-star-6 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    55% {
        transform: scale(0, 0) rotate(0deg);
    }

    75% {
        transform: scale(1, 1) rotate(30deg);
    }

    95% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-clipart-settings-user-star-7 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    25% {
        transform: scale(0, 0) rotate(0deg);
    }

    45% {
        transform: scale(2, 2) rotate(30deg);
    }

    65% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-clipart-settings-user-star-8 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    35% {
        transform: scale(0, 0) rotate(0deg);
    }

    55% {
        transform: scale(1, 1) rotate(30deg);
    }

    75% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

/* #endregion Clipart Settings VIP user */
/* #region Clipart Settings VIP store */
.vip-clipart-settings-store {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}

    .vip-clipart-settings-store .store {
        display: block;
        width: 81%;
        height: 81%;
        top: 10%;
        left: 7%;
        position: absolute;
        z-index: 1;
    }

    .vip-clipart-settings-store .clipart-store {
        display: block;
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        position: absolute;
        z-index: 1;
        background: url('../../Content/Images/VIP/Settings/clipart-store.svg') no-repeat center center transparent;
        background-size: contain;
    }

    .vip-clipart-settings-store .clipart-cloud-1,
    .vip-clipart-settings-store .clipart-cloud-2,
    .vip-clipart-settings-store .clipart-cloud-3,
    .vip-clipart-settings-store .clipart-cloud-4,
    .vip-clipart-settings-store .clipart-cloud-5,
    .vip-clipart-settings-store .clipart-cloud-6,
    .vip-clipart-settings-store .clipart-cloud-7,
    .vip-clipart-settings-store .clipart-cloud-8,
    .vip-clipart-settings-store .clipart-cloud-9,
    .vip-clipart-settings-store .clipart-cloud-10,
    .vip-clipart-settings-store .clipart-cloud-11,
    .vip-clipart-settings-store .clipart-cloud-12,
    .vip-clipart-settings-store .clipart-cloud-13 {
        display: block;
        position: absolute;
        border-radius: 50%;
        z-index: 1;
        background-color: #FFFFFF;
    }

    .vip-clipart-settings-store .clipart-cloud-1 {
        width: 26%;
        height: 26%;
        top: 21%;
        left: 10%;
        animation: clipart-vip-settings-store-cloud-1 1.3s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-store .clipart-cloud-2 {
        width: 18%;
        height: 18%;
        top: 23%;
        left: 30%;
        animation: clipart-vip-settings-store-cloud-2 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-store .clipart-cloud-3 {
        width: 20%;
        height: 20%;
        top: 24%;
        left: 42%;
        animation: clipart-vip-settings-store-cloud-3 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-store .clipart-cloud-4 {
        width: 28%;
        height: 28%;
        top: 16%;
        left: 53%;
        animation: clipart-vip-settings-store-cloud-4 1.3s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-store .clipart-cloud-5 {
        width: 22%;
        height: 22%;
        top: 23%;
        left: 70%;
        animation: clipart-vip-settings-store-cloud-5 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-store .clipart-cloud-6 {
        width: 26%;
        height: 26%;
        top: 35%;
        left: 73%;
        animation: clipart-vip-settings-store-cloud-6 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-store .clipart-cloud-7 {
        width: 30%;
        height: 30%;
        top: 51%;
        left: 62%;
        animation: clipart-vip-settings-store-cloud-7 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-store .clipart-cloud-8 {
        width: 18%;
        height: 18%;
        top: 59%;
        left: 52%;
        animation: clipart-vip-settings-store-cloud-8 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-store .clipart-cloud-9 {
        width: 34%;
        height: 34%;
        top: 48%;
        left: 27%;
        animation: clipart-vip-settings-store-cloud-9 1.3s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-store .clipart-cloud-10 {
        width: 20%;
        height: 20%;
        top: 64%;
        left: 15%;
        animation: clipart-vip-settings-store-cloud-10 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-store .clipart-cloud-11 {
        width: 24%;
        height: 24%;
        top: 52%;
        left: 8%;
        animation: clipart-vip-settings-store-cloud-11 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-store .clipart-cloud-12 {
        width: 34%;
        height: 34%;
        top: 32%;
        left: 1%;
        animation: clipart-vip-settings-store-cloud-12 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-settings-store .clipart-cloud-13 {
        width: 79%;
        height: 42%;
        top: 30%;
        left: 10%;
    }

@keyframes clipart-vip-settings-store-cloud-1 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@keyframes clipart-vip-settings-store-cloud-2 {
    from {
        transform: translate(0%, 8%);
    }

    to {
        transform: translate(0%, -8%);
    }
}

@keyframes clipart-vip-settings-store-cloud-3 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@keyframes clipart-vip-settings-store-cloud-4 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@keyframes clipart-vip-settings-store-cloud-5 {
    from {
        transform: translate(6%, -6%);
    }

    to {
        transform: translate(-6%, 6%);
    }
}

@keyframes clipart-vip-settings-store-cloud-6 {
    from {
        transform: translate(-6%, 0%);
    }

    to {
        transform: translate(6%, 0%);
    }
}

@keyframes clipart-vip-settings-store-cloud-7 {
    from {
        transform: translate(6%, 6%);
    }

    to {
        transform: translate(-6%, -6%);
    }
}

@keyframes clipart-vip-settings-store-cloud-8 {
    from {
        transform: translate(0%, -8%);
    }

    to {
        transform: translate(0%, 8%);
    }
}


@keyframes clipart-vip-settings-store-cloud-9 {
    from {
        transform: translate(0%, 7%);
    }

    to {
        transform: translate(0%, -7%);
    }
}

@keyframes clipart-vip-settings-store-cloud-10 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

@keyframes clipart-vip-settings-store-cloud-11 {
    from {
        transform: translate(-4%, 4%);
    }

    to {
        transform: translate(4%, -4%);
    }
}

@keyframes clipart-vip-settings-store-cloud-12 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}



.vip-clipart-settings-store .clipart-star-1,
.vip-clipart-settings-store .clipart-star-2,
.vip-clipart-settings-store .clipart-star-3,
.vip-clipart-settings-store .clipart-star-4,
.vip-clipart-settings-store .clipart-star-5,
.vip-clipart-settings-store .clipart-star-6,
.vip-clipart-settings-store .clipart-star-7,
.vip-clipart-settings-store .clipart-star-8 {
    width: 7%;
    height: 7%;
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/clipart-shine-star.svg') no-repeat center center transparent;
    background-size: contain;
}

.vip-clipart-settings-store .clipart-star-1 {
    top: 30%;
    left: 30%;
    animation: vip-clipart-settings-store-star-1 3s ease-in-out infinite;
}

.vip-clipart-settings-store .clipart-star-2 {
    top: 38%;
    left: 16%;
    animation: vip-clipart-settings-store-star-2 3s ease-in-out infinite;
}

.vip-clipart-settings-store .clipart-star-3 {
    top: 28%;
    left: 18%;
    animation: vip-clipart-settings-store-star-3 3s ease-in-out infinite;
}

.vip-clipart-settings-store .clipart-star-4 {
    top: 44%;
    left: 27%;
    animation: vip-clipart-settings-store-star-4 3s ease-in-out infinite;
}

.vip-clipart-settings-store .clipart-star-5 {
    top: 25%;
    left: 89%;
    animation: vip-clipart-settings-store-star-5 3s ease-in-out infinite;
}

.vip-clipart-settings-store .clipart-star-6 {
    top: 22%;
    left: 59%;
    animation: vip-clipart-settings-store-star-6 3s ease-in-out infinite;
}

.vip-clipart-settings-store .clipart-star-7 {
    top: 30%;
    left: 69%;
    animation: vip-clipart-settings-store-star-7 3s ease-in-out infinite;
}

.vip-clipart-settings-store .clipart-star-8 {
    top: 25%;
    left: 77%;
    animation: vip-clipart-settings-store-star-8 3s ease-in-out infinite;
}

@keyframes vip-clipart-settings-store-star-1 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    5% {
        transform: scale(0, 0) rotate(0deg);
    }

    25% {
        transform: scale(1, 1) rotate(30deg);
    }

    45% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-clipart-settings-store-star-2 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    15% {
        transform: scale(0, 0) rotate(0deg);
    }

    35% {
        transform: scale(1.5, 1.5) rotate(30deg);
    }

    55% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-clipart-settings-store-star-3 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    25% {
        transform: scale(0, 0) rotate(0deg);
    }

    45% {
        transform: scale(1, 1) rotate(30deg);
    }

    65% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-clipart-settings-store-star-4 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    35% {
        transform: scale(0, 0) rotate(0deg);
    }

    55% {
        transform: scale(1, 1) rotate(30deg);
    }

    75% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-clipart-settings-store-star-5 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    45% {
        transform: scale(0, 0) rotate(0deg);
    }

    65% {
        transform: scale(1, 1) rotate(30deg);
    }

    85% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-clipart-settings-store-star-6 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    55% {
        transform: scale(0, 0) rotate(0deg);
    }

    75% {
        transform: scale(1, 1) rotate(30deg);
    }

    95% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-clipart-settings-store-star-7 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    30% {
        transform: scale(0, 0) rotate(0deg);
    }

    50% {
        transform: scale(1, 1) rotate(30deg);
    }

    70% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

@keyframes vip-clipart-settings-store-star-8 {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    40% {
        transform: scale(0, 0) rotate(0deg);
    }

    60% {
        transform: scale(2, 2) rotate(30deg);
    }

    80% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

/* #endregion Clipart Settings VIP store */
/* #region Clipart Trashcan static */
.clipart-trashcan-static {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}

    .clipart-trashcan-static .clipart-cloud-1,
    .clipart-trashcan-static .clipart-cloud-2,
    .clipart-trashcan-static .clipart-cloud-3,
    .clipart-trashcan-static .clipart-cloud-4,
    .clipart-trashcan-static .clipart-cloud-5,
    .clipart-trashcan-static .clipart-cloud-6,
    .clipart-trashcan-static .clipart-cloud-7,
    .clipart-trashcan-static .clipart-cloud-8,
    .clipart-trashcan-static .clipart-cloud-9 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #EBEBEB;
    }

    .clipart-trashcan-static .clipart-cloud-1 {
        top: 16%;
        left: 5%;
        width: 30%;
        height: 30%;
        animation: clipart-trashcan-static-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .clipart-trashcan-static .clipart-cloud-2 {
        top: 4%;
        left: 26%;
        width: 35%;
        height: 35%;
        animation: clipart-trashcan-static-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .clipart-trashcan-static .clipart-cloud-3 {
        top: 11%;
        left: 51%;
        width: 30%;
        height: 30%;
        animation: clipart-trashcan-static-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .clipart-trashcan-static .clipart-cloud-4 {
        top: 20%;
        left: 59%;
        width: 38%;
        height: 38%;
        animation: clipart-trashcan-static-cloud-4 1.4s ease-in-out infinite alternate;
    }

    .clipart-trashcan-static .clipart-cloud-5 {
        top: 46%;
        left: 70%;
        width: 28%;
        height: 28%;
        animation: clipart-trashcan-static-cloud-5 1.5s ease-in-out infinite alternate;
    }

    .clipart-trashcan-static .clipart-cloud-6 {
        top: 50%;
        left: 40%;
        width: 45%;
        height: 45%;
        animation: clipart-trashcan-static-cloud-6 1.4s ease-in-out infinite alternate;
    }

    .clipart-trashcan-static .clipart-cloud-7 {
        top: 62%;
        left: 18%;
        width: 30%;
        height: 30%;
        animation: clipart-trashcan-static-cloud-7 1.4s ease-in-out infinite alternate;
    }

    .clipart-trashcan-static .clipart-cloud-8 {
        top: 38%;
        left: 2%;
        width: 40%;
        height: 40%;
        animation: clipart-trashcan-static-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .clipart-trashcan-static .clipart-cloud-9 {
        top: 26%;
        left: 25%;
        width: 50%;
        height: 50%;
    }

@keyframes clipart-trashcan-static-cloud-1 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes clipart-trashcan-static-cloud-2 {
    from {
        transform: translate(0%, 6%);
    }

    to {
        transform: translate(0%, -3%);
    }
}

@keyframes clipart-trashcan-static-cloud-3 {
    from {
        transform: translate(3%, -8%);
    }

    to {
        transform: translate(-3%, 8%);
    }
}

@keyframes clipart-trashcan-static-cloud-4 {
    from {
        transform: translate(-6%, 6%);
    }

    to {
        transform: translate(6%, -6%);
    }
}

@keyframes clipart-trashcan-static-cloud-5 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

@keyframes clipart-trashcan-static-cloud-6 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(3%, 3%);
    }
}

@keyframes clipart-trashcan-static-cloud-7 {
    from {
        transform: translate(-3%, 6%);
    }

    to {
        transform: translate(3%, -6%);
    }
}

@keyframes clipart-trashcan-static-cloud-8 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

.clipart-trashcan-static .trashcan {
    display: block;
    position: absolute;
    z-index: 1;
    width: 60%;
    height: 60%;
    top: 22%;
    left: 16%;
    background: url('../../Content/Images/VIP/Remove/clipart-trashcan.svg') no-repeat center center transparent;
    background-size: contain;
}

.clipart-trashcan-static .shadow {
    display: block;
    position: absolute;
    z-index: 1;
    width: 70%;
    height: 10%;
    top: 71%;
    left: 15%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
}

/* #endregion Clipart Trashcan static*/
/* #region Clipart Store Locked */
.clipart-store-locked {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}

    .clipart-store-locked .clipart-cloud-1,
    .clipart-store-locked .clipart-cloud-2,
    .clipart-store-locked .clipart-cloud-3,
    .clipart-store-locked .clipart-cloud-4,
    .clipart-store-locked .clipart-cloud-5,
    .clipart-store-locked .clipart-cloud-6,
    .clipart-store-locked .clipart-cloud-7,
    .clipart-store-locked .clipart-cloud-8,
    .clipart-store-locked .clipart-cloud-9 {
        display: block;
        position: absolute;
        border-radius: 50%;
        z-index: 1;
        background-color: #EBEBEB;
    }

    .clipart-store-locked .clipart-cloud-1 {
        width: 35%;
        height: 35%;
        top: 28%;
        left: 6%;
        animation: store-locked-cloud-1 1.2s ease-in-out infinite alternate;
    }

    .clipart-store-locked .clipart-cloud-2 {
        width: 23%;
        height: 23%;
        top: 14%;
        left: 17%;
        animation: store-locked-cloud-2 1.4s ease-in-out infinite alternate;
    }

    .clipart-store-locked .clipart-cloud-3 {
        width: 36%;
        height: 36%;
        top: 6%;
        left: 34%;
        animation: store-locked-cloud-3 1.6s ease-in-out infinite alternate;
    }

    .clipart-store-locked .clipart-cloud-4 {
        width: 24%;
        height: 24%;
        top: 21%;
        left: 62%;
        animation: store-locked-cloud-4 1.4s ease-in-out infinite alternate;
    }

    .clipart-store-locked .clipart-cloud-5 {
        width: 30%;
        height: 30%;
        top: 37%;
        left: 67%;
        animation: store-locked-cloud-5 1.5s ease-in-out infinite alternate;
    }

    .clipart-store-locked .clipart-cloud-6 {
        width: 45%;
        height: 45%;
        top: 49%;
        left: 41%;
        animation: store-locked-cloud-6 1.6s ease-in-out infinite alternate;
    }

    .clipart-store-locked .clipart-cloud-7 {
        width: 40%;
        height: 40%;
        top: 51%;
        left: 15%;
        animation: store-locked-cloud-7 1.4s ease-in-out infinite alternate;
    }

    .clipart-store-locked .clipart-cloud-8 {
        width: 25%;
        height: 25%;
        top: 52%;
        left: 3%;
        animation: store-locked-cloud-8 1.3s ease-in-out infinite alternate;
    }

    .clipart-store-locked .clipart-cloud-9 {
        width: 55%;
        height: 55%;
        top: 22%;
        left: 21%;
    }

@keyframes store-locked-cloud-1 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@keyframes store-locked-cloud-2 {
    from {
        transform: translate(8%, 8%);
    }

    to {
        transform: translate(-8%, -8%);
    }
}

@keyframes store-locked-cloud-3 {
    from {
        transform: translate(0%, -4%);
    }

    to {
        transform: translate(0%, 4%);
    }
}

@keyframes store-locked-cloud-4 {
    from {
        transform: translate(-5%, 5%);
    }

    to {
        transform: translate(5%, -5%);
    }
}

@keyframes store-locked-cloud-5 {
    from {
        transform: translate(4%, 0%);
    }

    to {
        transform: translate(-10%, 0%);
    }
}

@keyframes store-locked-cloud-6 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(2%, 2%);
    }
}

@keyframes store-locked-cloud-7 {
    from {
        transform: translate(-6%, 6%);
    }

    to {
        transform: translate(2%, -2%);
    }
}

@keyframes store-locked-cloud-8 {
    from {
        transform: translate(6%, -6%);
    }

    to {
        transform: translate(-2%, 2%);
    }
}

.clipart-store-locked .clipart-store-part {
    display: block;
    width: 50%;
    height: 50%;
    left: 15%;
    top: 35%;
    background: url("../../Content/Images/VIP/LockedStore/clipart-store.svg") no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
}

.clipart-store-locked .clipart-lock {
    display: block;
    width: 60%;
    height: 60%;
    left: 32%;
    top: 14%;
    background: url("../../Content/Images/VIP/LockedStore/clipart-lock.svg") no-repeat center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 1;
    animation: store-locked-lock 1.6s ease-in-out infinite alternate;
}

@keyframes store-locked-lock {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

.clipart-store-locked .clipart-store-shadow {
    display: block;
    border-radius: 50%;
    width: 60%;
    height: 5%;
    left: 11%;
    top: 76%;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 1;
}

.clipart-store-locked .clipart-lock-shadow {
    display: block;
    border-radius: 50%;
    width: 40%;
    height: 3%;
    left: 41%;
    top: 83%;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 1;
    animation: store-locked-shadow 1.6s ease-in-out infinite alternate;
}

@keyframes store-locked-shadow {
    from {
        transform: scale(0.8);
    }

    to {
        transform: scale(1);
    }
}

/* #endregion Clipart Store Locked */
/* #region Clipart Plan selection */
.vip-clipart-plan-selection {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}

    .vip-clipart-plan-selection .clipart-cloud-1,
    .vip-clipart-plan-selection .clipart-cloud-2,
    .vip-clipart-plan-selection .clipart-cloud-3,
    .vip-clipart-plan-selection .clipart-cloud-4,
    .vip-clipart-plan-selection .clipart-cloud-5,
    .vip-clipart-plan-selection .clipart-cloud-6,
    .vip-clipart-plan-selection .clipart-cloud-7,
    .vip-clipart-plan-selection .clipart-cloud-8,
    .vip-clipart-plan-selection .clipart-cloud-9,
    .vip-clipart-plan-selection .clipart-cloud-10,
    .vip-clipart-plan-selection .clipart-cloud-11,
    .vip-clipart-plan-selection .clipart-cloud-12 {
        display: block;
        position: absolute;
        border-radius: 50%;
        z-index: 1;
        background-color: #F2F2F2;
    }

    .vip-clipart-plan-selection .clipart-cloud-1 {
        top: 24%;
        left: 15%;
        width: 14%;
        height: 14%;
        animation: vip-plan-selection-cloud-1 1.3s ease-in-out infinite alternate;
    }

    .vip-clipart-plan-selection .clipart-cloud-2 {
        top: 16%;
        left: 23%;
        width: 28%;
        height: 28%;
        animation: vip-plan-selection-cloud-2 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-plan-selection .clipart-cloud-3 {
        top: 12%;
        left: 39%;
        width: 38%;
        height: 38%;
        animation: vip-plan-selection-cloud-3 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-plan-selection .clipart-cloud-4 {
        top: 19%;
        left: 65%;
        width: 24%;
        height: 24%;
        animation: vip-plan-selection-cloud-4 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-plan-selection .clipart-cloud-5 {
        top: 31%;
        left: 65%;
        width: 36%;
        height: 36%;
        animation: vip-plan-selection-cloud-5 1.3s ease-in-out infinite alternate;
    }

    .vip-clipart-plan-selection .clipart-cloud-6 {
        top: 58%;
        left: 71%;
        width: 24%;
        height: 24%;
        animation: vip-plan-selection-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-plan-selection .clipart-cloud-7 {
        top: 53%;
        left: 46%;
        width: 34%;
        height: 34%;
        animation: vip-plan-selection-cloud-7 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-plan-selection .clipart-cloud-8 {
        top: 51%;
        left: 32%;
        width: 30%;
        height: 30%;
        animation: vip-plan-selection-cloud-8 1.3s ease-in-out infinite alternate;
    }

    .vip-clipart-plan-selection .clipart-cloud-9 {
        top: 53%;
        left: 13%;
        width: 34%;
        height: 34%;
        animation: vip-plan-selection-cloud-9 1.6s ease-in-out infinite alternate;
    }

    .vip-clipart-plan-selection .clipart-cloud-10 {
        top: 54%;
        left: 1%;
        width: 21%;
        height: 21%;
        animation: vip-plan-selection-cloud-10 1.5s ease-in-out infinite alternate;
    }

    .vip-clipart-plan-selection .clipart-cloud-11 {
        top: 32%;
        left: 2%;
        width: 31%;
        height: 31%;
        animation: vip-plan-selection-cloud-11 1.4s ease-in-out infinite alternate;
    }

    .vip-clipart-plan-selection .clipart-cloud-12 {
        top: 31%;
        left: 20%;
        width: 61%;
        height: 41%;
    }

@keyframes vip-plan-selection-cloud-1 {
    from {
        transform: translate(-9%, -9%);
    }

    to {
        transform: translate(9%, 9%);
    }
}

@keyframes vip-plan-selection-cloud-2 {
    from {
        transform: translate(2%, 6%);
    }

    to {
        transform: translate(-2%, -6%);
    }
}

@keyframes vip-plan-selection-cloud-3 {
    from {
        transform: translate(0%, -5%);
    }

    to {
        transform: translate(0%, 5%);
    }
}

@keyframes vip-plan-selection-cloud-4 {
    from {
        transform: translate(-5%, 5%);
    }

    to {
        transform: translate(5%, -5%);
    }
}

@keyframes vip-plan-selection-cloud-5 {
    from {
        transform: translate(7%, 0%);
    }

    to {
        transform: translate(-7%, 0%);
    }
}

@keyframes vip-plan-selection-cloud-6 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes vip-plan-selection-cloud-7 {
    from {
        transform: translate(0%, 5%);
    }

    to {
        transform: translate(0%, -5%);
    }
}

@keyframes vip-plan-selection-cloud-8 {
    from {
        transform: translate(0%, -8%);
    }

    to {
        transform: translate(0%, 8%);
    }
}

@keyframes vip-plan-selection-cloud-9 {
    from {
        transform: translate(-4%, 5%);
    }

    to {
        transform: translate(4%, -5%);
    }
}

@keyframes vip-plan-selection-cloud-10 {
    from {
        transform: translate(8%, -2%);
    }

    to {
        transform: translate(-8%, 2%);
    }
}

@keyframes vip-plan-selection-cloud-11 {
    from {
        transform: translate(8%, 0%);
    }

    to {
        transform: translate(-8%, 0%);
    }
}

.vip-clipart-plan-selection .content {
    display: block;
    top: 19%;
    left: 16%;
    width: 66%;
    height: 66%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/PlanChoosing/content.svg') no-repeat center center transparent;
    background-size: contain;
}

.vip-clipart-plan-selection .clipart-shoe {
    display: block;
    top: 89%;
    left: 24.4%;
    width: 11%;
    height: 11%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/PlanChoosing/shoe.svg') no-repeat center center transparent;
    background-size: contain;
    transform-origin: 20% 50%;
    animation: vip-plan-selection-shoe 0.5s ease infinite alternate;
}

@keyframes vip-plan-selection-shoe {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-10deg);
    }
}

.vip-clipart-plan-selection .clipart-head {
    display: block;
    top: 0%;
    left: 11%;
    width: 23%;
    height: 23%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/PlanChoosing/head.svg') no-repeat center center transparent;
    background-size: contain;
    animation: vip-plan-selection-head 3s ease infinite alternate;
    transform-origin: 50% 90%;
}

@keyframes vip-plan-selection-head {
    from {
        transform: rotate(3deg);
    }

    to {
        transform: rotate(-12deg);
    }
}

.vip-clipart-plan-selection .clipart-eye-1 {
    display: block;
    top: 65%;
    left: 31%;
    width: 7%;
    height: 12%;
    position: absolute;
    z-index: 1;
    background-color: #7D2428;
    border-radius: 50%;
    animation: vip-plan-selection-eyes 3s ease infinite alternate;
}

.vip-clipart-plan-selection .clipart-eye-2 {
    display: block;
    top: 65%;
    left: 61%;
    width: 7%;
    height: 12%;
    position: absolute;
    z-index: 1;
    background-color: #7D2428;
    border-radius: 50%;
    animation: vip-plan-selection-eyes 3s ease infinite alternate;
}

@keyframes vip-plan-selection-eyes {
    0% {
        transform: scaleY(1);
    }

    5% {
        transform: scaleY(1);
    }

    10% {
        transform: scaleY(0);
    }

    15% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(1);
    }
}

.vip-clipart-plan-selection .clipart-brow-1 {
    display: block;
    top: 55%;
    left: 29%;
    width: 10%;
    height: 5%;
    position: absolute;
    z-index: 1;
    background-color: #7D2428;
    border-radius: 3%;
    animation: vip-plan-selection-brow 6s ease infinite;
}

.vip-clipart-plan-selection .clipart-brow-2 {
    display: block;
    top: 55%;
    left: 61%;
    width: 11%;
    height: 5%;
    position: absolute;
    z-index: 1;
    background-color: #7D2428;
    border-radius: 3%;
    transform: rotate(14deg);
}

@keyframes vip-plan-selection-brow {
    0% {
        transform: translateY(0%);
    }

    5% {
        transform: translateY(0%);
    }

    10% {
        transform: translateY(-100%);
    }

    20% {
        transform: translateY(-100%);
    }

    25% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

.vip-clipart-plan-selection .clipart-hand {
    display: block;
    top: 19%;
    left: 22%;
    width: 21%;
    height: 21%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/PlanChoosing/hand.svg') no-repeat center center transparent;
    background-size: contain;
}

.vip-clipart-plan-selection .clipart-shadow {
    display: block;
    top: 81%;
    left: 18%;
    width: 26%;
    height: 3%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 1;
}

.vip-clipart-plan-selection .clipart-star-1,
.vip-clipart-plan-selection .clipart-star-2,
.vip-clipart-plan-selection .clipart-star-3,
.vip-clipart-plan-selection .clipart-star-4,
.vip-clipart-plan-selection .clipart-star-5 {
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/clipart-shine-star.svg') no-repeat center center transparent;
    background-size: contain;
    transform: scale(0, 0);
}

.vip-clipart-plan-selection .clipart-star-1 {
    top: 5%;
    left: 55%;
    width: 10%;
    height: 10%;
    animation: vip-plan-selection-star 3s ease infinite;
}

.vip-clipart-plan-selection .clipart-star-2 {
    top: 14%;
    left: 45%;
    width: 8%;
    height: 8%;
    animation: vip-plan-selection-star 3s ease infinite 2s;
}

.vip-clipart-plan-selection .clipart-star-3 {
    top: 7%;
    left: 75%;
    width: 8%;
    height: 8%;
    animation: vip-plan-selection-star 3s ease infinite 1.5s;
}

.vip-clipart-plan-selection .clipart-star-4 {
    top: 41%;
    left: 66%;
    width: 8%;
    height: 8%;
    animation: vip-plan-selection-star 3s ease infinite 1s;
}

.vip-clipart-plan-selection .clipart-star-5 {
    top: 50%;
    left: 60%;
    width: 8%;
    height: 8%;
    animation: vip-plan-selection-star 3s ease infinite 2.5s;
}

@keyframes vip-plan-selection-star {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    10% {
        transform: scale(0, 0) rotate(0deg);
    }

    30% {
        transform: scale(1, 1) rotate(30deg);
    }

    50% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}

/* #endregion Clipart Plan selection */
/* #region Clipart Customer Support */
.clipart-customer-support {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}

    .clipart-customer-support .clipart-cloud-1,
    .clipart-customer-support .clipart-cloud-2,
    .clipart-customer-support .clipart-cloud-3,
    .clipart-customer-support .clipart-cloud-4,
    .clipart-customer-support .clipart-cloud-5,
    .clipart-customer-support .clipart-cloud-6,
    .clipart-customer-support .clipart-cloud-7,
    .clipart-customer-support .clipart-cloud-8,
    .clipart-customer-support .clipart-cloud-9,
    .clipart-customer-support .clipart-cloud-10,
    .clipart-customer-support .clipart-cloud-11 {
        display: block;
        position: absolute;
        border-radius: 50%;
        z-index: 1;
        background-color: #F2F2F2;
    }

    .clipart-customer-support .clipart-cloud-1 {
        width: 28%;
        height: 28%;
        top: 18%;
        left: 8%;
        animation: clipart-customer-support-cloud-1 1.3s ease-in-out infinite alternate;
    }

    .clipart-customer-support .clipart-cloud-2 {
        width: 15%;
        height: 15%;
        top: 8%;
        left: 19%;
        animation: clipart-customer-support-cloud-2 1.5s ease-in-out infinite alternate;
    }

    .clipart-customer-support .clipart-cloud-3 {
        width: 30%;
        height: 30%;
        top: 5%;
        left: 27%;
        animation: clipart-customer-support-cloud-3 1.4s ease-in-out infinite alternate;
    }

    .clipart-customer-support .clipart-cloud-4 {
        width: 25%;
        height: 25%;
        top: 11%;
        left: 45%;
        animation: clipart-customer-support-cloud-4 1.6s ease-in-out infinite alternate;
    }

    .clipart-customer-support .clipart-cloud-5 {
        width: 35%;
        height: 35%;
        top: 10%;
        left: 54%;
        animation: clipart-customer-support-cloud-5 1.5s ease-in-out infinite alternate;
    }

    .clipart-customer-support .clipart-cloud-6 {
        width: 38%;
        height: 38%;
        top: 29%;
        left: 61%;
        animation: clipart-customer-support-cloud-6 1.3s ease-in-out infinite alternate;
    }

    .clipart-customer-support .clipart-cloud-7 {
        width: 46%;
        height: 46%;
        top: 49%;
        left: 40%;
        animation: clipart-customer-support-cloud-7 1.4s ease-in-out infinite alternate;
    }

    .clipart-customer-support .clipart-cloud-8 {
        width: 27%;
        height: 27%;
        top: 69%;
        left: 24%;
        animation: clipart-customer-support-cloud-8 1.5s ease-in-out infinite alternate;
    }

    .clipart-customer-support .clipart-cloud-9 {
        width: 25%;
        height: 25%;
        top: 56%;
        left: 19%;
        animation: clipart-customer-support-cloud-9 1.6s ease-in-out infinite alternate;
    }

    .clipart-customer-support .clipart-cloud-10 {
        width: 37%;
        height: 37%;
        top: 38%;
        left: 1%;
        animation: clipart-customer-support-cloud-10 1.4s ease-in-out infinite alternate;
    }

    .clipart-customer-support .clipart-cloud-11 {
        width: 50%;
        height: 50%;
        top: 24%;
        left: 24%;
    }

@keyframes clipart-customer-support-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes clipart-customer-support-cloud-2 {
    from {
        transform: translate(24%, 24%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes clipart-customer-support-cloud-3 {
    from {
        transform: translate(0%, -8%);
    }

    to {
        transform: translate(0%, 8%);
    }
}

@keyframes clipart-customer-support-cloud-4 {
    from {
        transform: translate(0%, 24%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes clipart-customer-support-cloud-5 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@keyframes clipart-customer-support-cloud-6 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

@keyframes clipart-customer-support-cloud-7 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(-5%, -5%);
    }
}

@keyframes clipart-customer-support-cloud-8 {
    from {
        transform: translate(2%, -9%);
    }

    to {
        transform: translate(-2%, 9%);
    }
}

@keyframes clipart-customer-support-cloud-9 {
    from {
        transform: translate(-2%, 9%);
    }

    to {
        transform: translate(2%, -9%);
    }
}

@keyframes clipart-customer-support-cloud-10 {
    from {
        transform: translate(6%, -3%);
    }

    to {
        transform: translate(-6%, 3%);
    }
}

.clipart-customer-support .clipart-body {
    display: block;
    position: absolute;
    z-index: 1;
    width: 41%;
    height: 41%;
    top: 52%;
    left: 29%;
    background: url('../../Content/Images/VIP/Support/clipart-body.svg') no-repeat center center transparent;
    background-size: contain;
}

.clipart-customer-support .clipart-head {
    display: block;
    position: absolute;
    z-index: 1;
    width: 48%;
    height: 48%;
    top: 12%;
    left: 27%;
    background: url('../../Content/Images/VIP/Support/clipart-head.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-customer-support-head 3s ease-in-out infinite alternate;
    transform-origin: 50% 80%;
}

@keyframes clipart-customer-support-head {
    from {
        transform: rotate(-10deg);
    }

    to {
        transform: rotate(5deg);
    }
}

.clipart-customer-support .clipart-brows {
    display: block;
    position: absolute;
    z-index: 1;
    width: 45%;
    height: 45%;
    top: 21%;
    left: 31%;
    background: url('../../Content/Images/VIP/Support/clipart-brows.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-customer-support-brows 4s ease-in-out infinite;
}

@keyframes clipart-customer-support-brows {
    0% {
        transform: translateY(0%);
    }

    5% {
        transform: translateY(0%);
    }

    10% {
        transform: translateY(-5%);
    }

    30% {
        transform: translateY(-5%);
    }

    35% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

.clipart-customer-support .eye-1 {
    display: block;
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    width: 8%;
    height: 12%;
    top: 50%;
    left: 34%;
    background-color: #8A4245;
    animation: clipart-customer-support-eyes 2s ease-in-out infinite alternate;
}

.clipart-customer-support .eye-2 {
    display: block;
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    width: 8%;
    height: 12%;
    top: 50%;
    left: 65%;
    background-color: #8A4245;
    animation: clipart-customer-support-eyes 2s ease-in-out infinite alternate;
}

@keyframes clipart-customer-support-eyes {
    0% {
        transform: scaleY(1);
    }

    30% {
        transform: scaleY(1);
    }

    35% {
        transform: scaleY(0);
    }

    40% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(1);
    }
}

/* #endregion Clipart Customer Support */
/* #region Clipart Free Autorenew */
.clipart-free-autorenew {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}


    .clipart-free-autorenew .clipart-cloud-1,
    .clipart-free-autorenew .clipart-cloud-2,
    .clipart-free-autorenew .clipart-cloud-3,
    .clipart-free-autorenew .clipart-cloud-4,
    .clipart-free-autorenew .clipart-cloud-5,
    .clipart-free-autorenew .clipart-cloud-6,
    .clipart-free-autorenew .clipart-cloud-7,
    .clipart-free-autorenew .clipart-cloud-8,
    .clipart-free-autorenew .clipart-cloud-9 {
        display: block;
        position: absolute;
        border-radius: 50%;
        z-index: 1;
        background-color: #f2f2f2;
    }

    .clipart-free-autorenew .clipart-cloud-1 {
        width: 28%;
        height: 28%;
        top: 13%;
        left: 12%;
        animation: clipart-free-autorenew-cloud-1 1.3s ease-in-out infinite alternate;
    }

    .clipart-free-autorenew .clipart-cloud-2 {
        width: 34%;
        height: 34%;
        top: 4%;
        left: 25%;
        animation: clipart-free-autorenew-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .clipart-free-autorenew .clipart-cloud-3 {
        width: 45%;
        height: 45%;
        top: 2%;
        left: 44%;
        animation: clipart-free-autorenew-cloud-3 1.4s ease-in-out infinite alternate;
    }

    .clipart-free-autorenew .clipart-cloud-4 {
        width: 36%;
        height: 36%;
        top: 26%;
        left: 62%;
        animation: clipart-free-autorenew-cloud-4 1.5s ease-in-out infinite alternate;
    }

    .clipart-free-autorenew .clipart-cloud-5 {
        width: 50%;
        height: 50%;
        top: 43%;
        left: 44%;
        animation: clipart-free-autorenew-cloud-5 1.3s ease-in-out infinite alternate;
    }

    .clipart-free-autorenew .clipart-cloud-6 {
        width: 58%;
        height: 58%;
        top: 39%;
        left: 14%;
        animation: clipart-free-autorenew-cloud-6 1.4s ease-in-out infinite alternate;
    }

    .clipart-free-autorenew .clipart-cloud-7 {
        width: 25%;
        height: 25%;
        top: 52%;
        left: 4%;
        animation: clipart-free-autorenew-cloud-7 1.5s ease-in-out infinite alternate;
    }

    .clipart-free-autorenew .clipart-cloud-8 {
        width: 36%;
        height: 36%;
        top: 22%;
        left: 2%;
        animation: clipart-free-autorenew-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .clipart-free-autorenew .clipart-cloud-9 {
        width: 56%;
        height: 56%;
        top: 17%;
        left: 22%;
    }

@keyframes clipart-free-autorenew-cloud-1 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(-5%, -5%);
    }
}

@keyframes clipart-free-autorenew-cloud-2 {
    from {
        transform: translate(-2%, -8%);
    }

    to {
        transform: translate(2%, 8%);
    }
}

@keyframes clipart-free-autorenew-cloud-3 {
    from {
        transform: translate(-2%, 4%);
    }

    to {
        transform: translate(2%, -4%);
    }
}

@keyframes clipart-free-autorenew-cloud-4 {
    from {
        transform: translate(6%, -2%);
    }

    to {
        transform: translate(-6%, 2%);
    }
}

@keyframes clipart-free-autorenew-cloud-5 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes clipart-free-autorenew-cloud-6 {
    from {
        transform: translate(-4%, 2%);
    }

    to {
        transform: translate(4%, -2%);
    }
}

@keyframes clipart-free-autorenew-cloud-7 {
    from {
        transform: translate(8%, -2%);
    }

    to {
        transform: translate(-8%, 2%);
    }
}

@keyframes clipart-free-autorenew-cloud-8 {
    from {
        transform: translate(-4%, -2%);
    }

    to {
        transform: translate(4%, 2%);
    }
}

.clipart-free-autorenew .clipart-ads-list {
    display: block;
    width: 58%;
    height: 58%;
    top: 19%;
    left: 16%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/FreeAutorenew/clipart-ads-list.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-free-autorenew-ad-list 2s ease-in-out infinite alternate;
}

@keyframes clipart-free-autorenew-ad-list {
    from {
        transform: translateY(3%);
    }

    to {
        transform: translateY(-3%);
    }
}

.clipart-free-autorenew .clipart-free-badge {
    display: block;
    width: 47%;
    height: 47%;
    top: 10%;
    left: 10%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/FreeAutorenew/clipart-free-badge.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-free-autorenew-badge 2s ease-in-out infinite alternate;
}

@keyframes clipart-free-autorenew-badge {
    from {
        transform: translateY(-8%);
    }

    to {
        transform: translateY(8%);
    }
}

.clipart-free-autorenew .clipart-arrows {
    display: block;
    width: 36%;
    height: 36%;
    top: 30%;
    left: 54%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/FreeAutorenew/clipart-arrows.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-free-autorenew-arrows 2s linear infinite;
}

@keyframes clipart-free-autorenew-arrows {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

.clipart-free-autorenew .shadow {
    display: block;
    width: 65%;
    height: 4%;
    top: 82%;
    left: 14%;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    animation: clipart-free-autorenew-shadow 2s ease-in-out infinite alternate;
}

@keyframes clipart-free-autorenew-shadow {
    from {
        transform: scale(1, 1);
        opacity: 1;
    }

    to {
        transform: scale(0.8, 1);
        opacity: 0.6;
    }
}

/* #endregion Clipart Free Autorenew */
/* #region Clipart Saving Money */
.clipart-vip-saving-money {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}


    .clipart-vip-saving-money .clipart-cloud-1,
    .clipart-vip-saving-money .clipart-cloud-2,
    .clipart-vip-saving-money .clipart-cloud-3,
    .clipart-vip-saving-money .clipart-cloud-4,
    .clipart-vip-saving-money .clipart-cloud-5,
    .clipart-vip-saving-money .clipart-cloud-6,
    .clipart-vip-saving-money .clipart-cloud-7,
    .clipart-vip-saving-money .clipart-cloud-8,
    .clipart-vip-saving-money .clipart-cloud-9,
    .clipart-vip-saving-money .clipart-cloud-10 {
        display: block;
        position: absolute;
        border-radius: 50%;
        z-index: 1;
        background-color: #f2f2f2;
    }

    .clipart-vip-saving-money .clipart-cloud-1 {
        width: 30%;
        height: 30%;
        top: 14%;
        left: 7%;
        animation: clipart-saving-money-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-money .clipart-cloud-2 {
        width: 35%;
        height: 35%;
        top: 5%;
        left: 25%;
        animation: clipart-saving-money-cloud-2 1.3s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-money .clipart-cloud-3 {
        width: 25%;
        height: 25%;
        top: 7%;
        left: 51%;
        animation: clipart-saving-money-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-money .clipart-cloud-4 {
        width: 35%;
        height: 35%;
        top: 16%;
        left: 58%;
        animation: clipart-saving-money-cloud-4 1.4s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-money .clipart-cloud-5 {
        width: 25%;
        height: 25%;
        top: 44%;
        left: 72%;
        animation: clipart-saving-money-cloud-5 1.6s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-money .clipart-cloud-6 {
        width: 40%;
        height: 40%;
        top: 55%;
        left: 45%;
        animation: clipart-saving-money-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-money .clipart-cloud-7 {
        width: 35%;
        height: 35%;
        top: 62%;
        left: 26%;
        animation: clipart-saving-money-cloud-7 1.3s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-money .clipart-cloud-8 {
        width: 28%;
        height: 28%;
        top: 62%;
        left: 6%;
        animation: clipart-saving-money-cloud-8 1.6s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-money .clipart-cloud-9 {
        width: 38%;
        height: 38%;
        top: 32%;
        left: 2%;
        animation: clipart-saving-money-cloud-9 1.3s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-money .clipart-cloud-10 {
        width: 58%;
        height: 58%;
        top: 24%;
        left: 23%;
    }

@keyframes clipart-saving-money-cloud-1 {
    from {
        transform: translate(0%, 0%);
    }

    to {
        transform: translate(10%, 10%);
    }
}

@keyframes clipart-saving-money-cloud-2 {
    from {
        transform: translate(6%, 6%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

@keyframes clipart-saving-money-cloud-3 {
    from {
        transform: translate(6%, -6%);
    }

    to {
        transform: translate(-6%, 6%);
    }
}

@keyframes clipart-saving-money-cloud-4 {
    from {
        transform: translate(-6%, 6%);
    }

    to {
        transform: translate(6%, -6%);
    }
}

@keyframes clipart-saving-money-cloud-5 {
    from {
        transform: translate(5%, 0%);
    }

    to {
        transform: translate(-10%, 0%);
    }
}

@keyframes clipart-saving-money-cloud-6 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes clipart-saving-money-cloud-7 {
    from {
        transform: translate(-4%, 5%);
    }

    to {
        transform: translate(4%, -5%);
    }
}

@keyframes clipart-saving-money-cloud-8 {
    from {
        transform: translate(4%, -5%);
    }

    to {
        transform: translate(-4%, 5%);
    }
}

@keyframes clipart-saving-money-cloud-9 {
    from {
        transform: translate(4%, 0%);
    }

    to {
        transform: translate(-4%, 0%);
    }
}

.clipart-vip-saving-money .clipart-pig {
    display: block;
    width: 63%;
    height: 63%;
    top: 31%;
    left: 20%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/SavingMoney/clipart-pig.svg') no-repeat center center transparent;
    background-size: contain;
}

.clipart-vip-saving-money .clipart-wallet {
    display: block;
    width: 63%;
    height: 63%;
    top: 34%;
    left: 18%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/SavingMoney/clipart-wallet.svg') no-repeat center center transparent;
    background-size: contain;
}

.clipart-vip-saving-money .shadow {
    display: block;
    width: 70%;
    height: 7%;
    top: 75%;
    left: 15%;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
}

.clipart-vip-saving-money .shadow2 {
    display: block;
    width: 48%;
    height: 6%;
    top: 81%;
    left: 39%;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
}

.clipart-vip-saving-money .clipart-coin-1,
.clipart-vip-saving-money .clipart-coin-2 {
    display: block;
    width: 17%;
    height: 17%;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background: url('../../Content/Images/VIP/SavingMoney/clipart-coin.svg') no-repeat center center transparent;
    background-size: contain;
    opacity: 0;
}

.clipart-vip-saving-money .clipart-coin-1 {
    top: 8%;
    left: 32%;
    animation: clipart-saving-money-coins 1s linear infinite;
}

.clipart-vip-saving-money .clipart-coin-2 {
    top: 8%;
    left: 45%;
    animation: clipart-saving-money-coins 1s linear infinite 0.5s;
}

@keyframes clipart-saving-money-coins {
    0% {
        opacity: 0;
        transform: translateY(0%);
    }

    10% {
        opacity: 1;
    }

    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(300%);
    }
}

/* #endregion Clipart Saving Money */
/* #region Clipart More Sales */
.clipart-vip-more-sales {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}


    .clipart-vip-more-sales .clipart-cloud-1,
    .clipart-vip-more-sales .clipart-cloud-2,
    .clipart-vip-more-sales .clipart-cloud-3,
    .clipart-vip-more-sales .clipart-cloud-4,
    .clipart-vip-more-sales .clipart-cloud-5,
    .clipart-vip-more-sales .clipart-cloud-6,
    .clipart-vip-more-sales .clipart-cloud-7,
    .clipart-vip-more-sales .clipart-cloud-8,
    .clipart-vip-more-sales .clipart-cloud-9,
    .clipart-vip-more-sales .clipart-cloud-10 {
        display: block;
        position: absolute;
        border-radius: 50%;
        z-index: 1;
        background-color: #F2F2F2;
    }

    .clipart-vip-more-sales .clipart-cloud-1 {
        top: 20%;
        left: 10%;
        width: 25%;
        height: 25%;
        animation: clipart-vip-more-sales-cloud-1 1.4s ease-in-out infinite alternate;
    }

    .clipart-vip-more-sales .clipart-cloud-2 {
        top: 4%;
        left: 24%;
        width: 38%;
        height: 38%;
        animation: clipart-vip-more-sales-cloud-2 1.3s ease-in-out infinite alternate;
    }

    .clipart-vip-more-sales .clipart-cloud-3 {
        top: 6%;
        left: 47%;
        width: 25%;
        height: 25%;
        animation: clipart-vip-more-sales-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .clipart-vip-more-sales .clipart-cloud-4 {
        top: 17%;
        left: 61%;
        width: 35%;
        height: 35%;
        animation: clipart-vip-more-sales-cloud-4 1.6s ease-in-out infinite alternate;
    }

    .clipart-vip-more-sales .clipart-cloud-5 {
        top: 43%;
        left: 75%;
        width: 24%;
        height: 24%;
        animation: clipart-vip-more-sales-cloud-5 1.4s ease-in-out infinite alternate;
    }

    .clipart-vip-more-sales .clipart-cloud-6 {
        top: 54%;
        left: 56%;
        width: 38%;
        height: 38%;
        animation: clipart-vip-more-sales-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .clipart-vip-more-sales .clipart-cloud-7 {
        top: 50%;
        left: 23%;
        width: 48%;
        height: 48%;
        animation: clipart-vip-more-sales-cloud-7 1.3s ease-in-out infinite alternate;
    }

    .clipart-vip-more-sales .clipart-cloud-8 {
        top: 59%;
        left: 6%;
        width: 30%;
        height: 30%;
        animation: clipart-vip-more-sales-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .clipart-vip-more-sales .clipart-cloud-9 {
        top: 31%;
        left: 3%;
        width: 45%;
        height: 45%;
        animation: clipart-vip-more-sales-cloud-9 1.5s ease-in-out infinite alternate;
    }

    .clipart-vip-more-sales .clipart-cloud-10 {
        top: 21%;
        left: 27%;
        width: 55%;
        height: 55%;
    }

@keyframes clipart-vip-more-sales-cloud-1 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@keyframes clipart-vip-more-sales-cloud-2 {
    from {
        transform: translate(2%, 4%);
    }

    to {
        transform: translate(-2%, -4%);
    }
}

@keyframes clipart-vip-more-sales-cloud-3 {
    from {
        transform: translate(2%, -6%);
    }

    to {
        transform: translate(-2%, 10%);
    }
}

@keyframes clipart-vip-more-sales-cloud-4 {
    from {
        transform: translate(-8%, 8%);
    }

    to {
        transform: translate(4%, -4%);
    }
}

@keyframes clipart-vip-more-sales-cloud-5 {
    from {
        transform: translate(7%, 0%);
    }

    to {
        transform: translate(-9%, 0%);
    }
}

@keyframes clipart-vip-more-sales-cloud-6 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(2%, 2%);
    }
}

@keyframes clipart-vip-more-sales-cloud-7 {
    from {
        transform: translate(0%, 4%);
    }

    to {
        transform: translate(0%, -7%);
    }
}

@keyframes clipart-vip-more-sales-cloud-8 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}


@keyframes clipart-vip-more-sales-cloud-9 {
    from {
        transform: translate(-5%, 0%);
    }

    to {
        transform: translate(5%, 0%);
    }
}

.clipart-vip-more-sales .axis {
    display: block;
    position: absolute;
    z-index: 1;
    top: 74%;
    left: 20%;
    width: 59%;
    height: 2%;
    background-color: #999999;
}

.clipart-vip-more-sales .bar-1 {
    display: block;
    position: absolute;
    z-index: 1;
    top: 49%;
    left: 20%;
    width: 18%;
    height: 23%;
    background-color: #999999;
    animation: clipart-vip-more-sales-bar-1 2s ease-in-out infinite alternate;
    transform-origin: 50% 100%;
}

@keyframes clipart-vip-more-sales-bar-1 {
    from {
        transform: scaleY(1);
    }

    to {
        transform: scaleY(0.5);
    }
}

.clipart-vip-more-sales .bar-2 {
    display: block;
    position: absolute;
    z-index: 1;
    top: 41%;
    left: 41%;
    width: 18%;
    height: 31%;
    background-color: #999999;
    animation: clipart-vip-more-sales-bar-2 2s ease-in-out infinite alternate;
    transform-origin: 50% 100%;
}


@keyframes clipart-vip-more-sales-bar-2 {
    from {
        transform: scaleY(0.8);
    }

    to {
        transform: scaleY(1.1);
    }
}

.clipart-vip-more-sales .bar-3 {
    display: block;
    position: absolute;
    z-index: 1;
    top: 24%;
    left: 61%;
    width: 18%;
    height: 48%;
    background-color: var(--color-bg-primary);
    animation: clipart-vip-more-sales-bar-3 1.8s ease-in-out infinite alternate;
    transform-origin: 50% 100%;
}

@keyframes clipart-vip-more-sales-bar-3 {
    from {
        transform: scaleY(1);
    }

    to {
        transform: scaleY(0.7);
    }
}

.clipart-vip-more-sales .clipart-medal {
    display: block;
    position: absolute;
    z-index: 1;
    top: 52%;
    left: 55%;
    width: 30%;
    height: 30%;
    background: url('../../Content/Images/VIP/MoreSales/clipart-medal.svg') no-repeat center center transparent;
    background-size: contain;
}

.clipart-vip-more-sales .shadow {
    display: block;
    position: absolute;
    z-index: 1;
    top: 82%;
    left: 53%;
    width: 32%;
    height: 3%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
}

.clipart-vip-more-sales .clipart-star-1,
.clipart-vip-more-sales .clipart-star-2 {
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/clipart-shine-star.svg') no-repeat center center transparent;
    background-size: contain;
    transform: scale(0, 0);
}

.clipart-vip-more-sales .clipart-star-1 {
    top: 60%;
    left: 73%;
    width: 8%;
    height: 8%;
    animation: clipart-vip-more-sales-stars 3s ease infinite 1s;
}

.clipart-vip-more-sales .clipart-star-2 {
    top: 73%;
    left: 60%;
    width: 8%;
    height: 8%;
    animation: clipart-vip-more-sales-stars 3s ease infinite 2.5s;
}

@keyframes clipart-vip-more-sales-stars {
    0% {
        transform: scale(0, 0) rotate(0deg);
    }

    10% {
        transform: scale(0, 0) rotate(0deg);
    }

    30% {
        transform: scale(1.5, 1.5) rotate(30deg);
    }

    50% {
        transform: scale(0, 0) rotate(60deg);
    }

    100% {
        transform: scale(0, 0) rotate(0deg);
    }
}
/* #endregion Clipart More Sales */
/* #region Clipart Saving Time */
.clipart-vip-saving-time {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}


    .clipart-vip-saving-time .clipart-cloud-1,
    .clipart-vip-saving-time .clipart-cloud-2,
    .clipart-vip-saving-time .clipart-cloud-3,
    .clipart-vip-saving-time .clipart-cloud-4,
    .clipart-vip-saving-time .clipart-cloud-5,
    .clipart-vip-saving-time .clipart-cloud-6,
    .clipart-vip-saving-time .clipart-cloud-7,
    .clipart-vip-saving-time .clipart-cloud-8,
    .clipart-vip-saving-time .clipart-cloud-9,
    .clipart-vip-saving-time .clipart-cloud-10 {
        display: block;
        position: absolute;
        border-radius: 50%;
        z-index: 1;
        background-color: #f2f2f2;
    }

    .clipart-vip-saving-time .clipart-cloud-1 {
        width: 25%;
        height: 25%;
        top: 13%;
        left: 10%;
        animation: clipart-vip-saving-time-cloud-1 1.3s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-time .clipart-cloud-2 {
        width: 35%;
        height: 35%;
        top: 2%;
        left: 27%;
        animation: clipart-vip-saving-time-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-time .clipart-cloud-3 {
        width: 30%;
        height: 30%;
        top: 8%;
        left: 48%;
        animation: clipart-vip-saving-time-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-time .clipart-cloud-4 {
        width: 44%;
        height: 44%;
        top: 11%;
        left: 58%;
        animation: clipart-vip-saving-time-cloud-4 1.3s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-time .clipart-cloud-5 {
        width: 28%;
        height: 28%;
        top: 43%;
        left: 70%;
        animation: clipart-vip-saving-time-cloud-5 1.4s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-time .clipart-cloud-6 {
        width: 55%;
        height: 55%;
        top: 43%;
        left: 36%;
        animation: clipart-vip-saving-time-cloud-6 1.5s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-time .clipart-cloud-7 {
        width: 43%;
        height: 43%;
        top: 53%;
        left: 9%;
        animation: clipart-vip-saving-time-cloud-7 1.3s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-time .clipart-cloud-8 {
        width: 45%;
        height: 45%;
        top: 32%;
        left: 0%;
        animation: clipart-vip-saving-time-cloud-8 1.5s ease-in-out infinite alternate;
    }

    .clipart-vip-saving-time .clipart-cloud-9 {
        width: 55%;
        height: 55%;
        top: 22%;
        left: 20%;
    }

@keyframes clipart-vip-saving-time-cloud-1 {
    from {
        transform: translate(-2%, -2%);
    }

    to {
        transform: translate(12%, 12%);
    }
}

@keyframes clipart-vip-saving-time-cloud-2 {
    from {
        transform: translate(2%, 12%);
    }

    to {
        transform: translate(-2%, -2%);
    }
}

@keyframes clipart-vip-saving-time-cloud-3 {
    from {
        transform: translate(2%, -12%);
    }

    to {
        transform: translate(-2%, 2%);
    }
}

@keyframes clipart-vip-saving-time-cloud-4 {
    from {
        transform: translate(-8%, 10%);
    }

    to {
        transform: translate(3%, 0%);
    }
}

@keyframes clipart-vip-saving-time-cloud-5 {
    from {
        transform: translate(5%, 0%);
    }

    to {
        transform: translate(-9%, 0%);
    }
}

@keyframes clipart-vip-saving-time-cloud-6 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(2%, 2%);
    }
}

@keyframes clipart-vip-saving-time-cloud-7 {
    from {
        transform: translate(-6%, 6%);
    }

    to {
        transform: translate(2%, -2%);
    }
}

@keyframes clipart-vip-saving-time-cloud-8 {
    from {
        transform: translate(5%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

.clipart-vip-saving-time .clipart-clock {
    display: block;
    width: 76%;
    height: 76%;
    top: 13%;
    left: 13%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/SavingTime/clipart-clock.svg') no-repeat center center transparent;
    background-size: contain;
}

.clipart-vip-saving-time .clipart-arrow-1 {
    display: block;
    width: 17%;
    height: 17%;
    top: 28%;
    left: 51%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/SavingTime/clipart-arrow-1.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-vip-saving-time-arrow 1s infinite linear;
    transform-origin: 50% 90%;
}


.clipart-vip-saving-time .clipart-arrow-2 {
    display: block;
    width: 14%;
    height: 14%;
    top: 31%;
    left: 52.5%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/SavingTime/clipart-arrow-2.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-vip-saving-time-arrow 12s infinite linear;
    transform-origin: 50% 87%;
}

@keyframes clipart-vip-saving-time-arrow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* #endregion Clipart Saving Time */
/* #region Clipart Marketing Opportunity */
.clipart-vip-marketing-opportunity {
    display: block;
    width: 450px;
    height: 450px;
    margin: 0px auto;
}


    .clipart-vip-marketing-opportunity .clipart-cloud-1,
    .clipart-vip-marketing-opportunity .clipart-cloud-2,
    .clipart-vip-marketing-opportunity .clipart-cloud-3,
    .clipart-vip-marketing-opportunity .clipart-cloud-4,
    .clipart-vip-marketing-opportunity .clipart-cloud-5,
    .clipart-vip-marketing-opportunity .clipart-cloud-6,
    .clipart-vip-marketing-opportunity .clipart-cloud-7,
    .clipart-vip-marketing-opportunity .clipart-cloud-8,
    .clipart-vip-marketing-opportunity .clipart-cloud-9,
    .clipart-vip-marketing-opportunity .clipart-cloud-10,
    .clipart-vip-marketing-opportunity .clipart-cloud-11,
    .clipart-vip-marketing-opportunity .clipart-cloud-12 {
        display: block;
        position: absolute;
        border-radius: 50%;
        z-index: 1;
        background-color: #f2f2f2;
    }

    .clipart-vip-marketing-opportunity .clipart-cloud-1 {
        width: 20%;
        height: 20%;
        top: 15%;
        left: 10%;
        animation: clipart-marketing-opportunity-cloud-1 1.3s ease-in-out infinite alternate;
    }

    .clipart-vip-marketing-opportunity .clipart-cloud-2 {
        width: 29%;
        height: 29%;
        top: 1%;
        left: 20%;
        animation: clipart-marketing-opportunity-cloud-2 1.4s ease-in-out infinite alternate;
    }

    .clipart-vip-marketing-opportunity .clipart-cloud-3 {
        width: 24%;
        height: 24%;
        top: 8%;
        left: 37%;
        animation: clipart-marketing-opportunity-cloud-3 1.5s ease-in-out infinite alternate;
    }

    .clipart-vip-marketing-opportunity .clipart-cloud-4 {
        width: 28%;
        height: 28%;
        top: 6%;
        left: 52%;
        animation: clipart-marketing-opportunity-cloud-4 1.3s ease-in-out infinite alternate;
    }

    .clipart-vip-marketing-opportunity .clipart-cloud-5 {
        width: 24%;
        height: 24%;
        top: 22%;
        left: 69%;
        animation: clipart-marketing-opportunity-cloud-5 1.6s ease-in-out infinite alternate;
    }

    .clipart-vip-marketing-opportunity .clipart-cloud-6 {
        width: 34%;
        height: 34%;
        top: 33%;
        left: 64%;
        animation: clipart-marketing-opportunity-cloud-6 1.4s ease-in-out infinite alternate;
    }

    .clipart-vip-marketing-opportunity .clipart-cloud-7 {
        width: 28%;
        height: 28%;
        top: 59%;
        left: 62%;
        animation: clipart-marketing-opportunity-cloud-7 1.3s ease-in-out infinite alternate;
    }

    .clipart-vip-marketing-opportunity .clipart-cloud-8 {
        width: 42%;
        height: 42%;
        top: 59%;
        left: 30%;
        animation: clipart-marketing-opportunity-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .clipart-vip-marketing-opportunity .clipart-cloud-9 {
        width: 30%;
        height: 30%;
        top: 61%;
        left: 16%;
        animation: clipart-marketing-opportunity-cloud-9 1.5s ease-in-out infinite alternate;
    }

    .clipart-vip-marketing-opportunity .clipart-cloud-10 {
        width: 38%;
        height: 38%;
        top: 44%;
        left: 1%;
        animation: clipart-marketing-opportunity-cloud-10 1.4s ease-in-out infinite alternate;
    }

    .clipart-vip-marketing-opportunity .clipart-cloud-11 {
        width: 36%;
        height: 36%;
        top: 25%;
        left: 5%;
        animation: clipart-marketing-opportunity-cloud-11 1.5s ease-in-out infinite alternate;
    }

    .clipart-vip-marketing-opportunity .clipart-cloud-12 {
        width: 55%;
        height: 55%;
        top: 22%;
        left: 22%;
    }

@keyframes clipart-marketing-opportunity-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(9%, 9%);
    }
}

@keyframes clipart-marketing-opportunity-cloud-2 {
    from {
        transform: translate(3%, 11%);
    }

    to {
        transform: translate(-3%, -3%);
    }
}

@keyframes clipart-marketing-opportunity-cloud-3 {
    from {
        transform: translate(3%, -11%);
    }

    to {
        transform: translate(-3%, 11%);
    }
}

@keyframes clipart-marketing-opportunity-cloud-4 {
    from {
        transform: translate(-3%, 8%);
    }

    to {
        transform: translate(3%, -8%);
    }
}

@keyframes clipart-marketing-opportunity-cloud-5 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes clipart-marketing-opportunity-cloud-6 {
    from {
        transform: translate(-6%, 0%);
    }

    to {
        transform: translate(6%, 0%);
    }
}

@keyframes clipart-marketing-opportunity-cloud-7 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(-5%, -5%);
    }
}

@keyframes clipart-marketing-opportunity-cloud-8 {
    from {
        transform: translate(0%, -15%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes clipart-marketing-opportunity-cloud-9 {
    from {
        transform: translate(-5%, 15%);
    }

    to {
        transform: translate(5%, 0%);
    }
}

@keyframes clipart-marketing-opportunity-cloud-10 {
    from {
        transform: translate(6%, -6%);
    }

    to {
        transform: translate(-6%, 6%);
    }
}

@keyframes clipart-marketing-opportunity-cloud-11 {
    from {
        transform: translate(-8%, 0%);
    }

    to {
        transform: translate(8%, 0%);
    }
}


.clipart-vip-marketing-opportunity .clipart-body {
    display: block;
    width: 43%;
    height: 43%;
    top: 47%;
    left: 19%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/MarketingOpportunity/clipart-body.svg') no-repeat center center transparent;
    background-size: contain;
}

.clipart-vip-marketing-opportunity .clipart-hand {
    display: block;
    width: 35%;
    height: 35%;
    top: 52%;
    left: 53%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/MarketingOpportunity/clipart-hand.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-marketing-opportunity-hand 2s ease-in-out infinite alternate;
    transform-origin: 13% 24%;
}

@keyframes clipart-marketing-opportunity-hand {
    from {
        transform: rotate(-10deg);
    }

    to {
        transform: rotate(10deg);
    }
}

.clipart-vip-marketing-opportunity .clipart-head {
    display: block;
    width: 37%;
    height: 37%;
    top: 12%;
    left: 26%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/MarketingOpportunity/clipart-head.svg') no-repeat center center transparent;
    background-size: contain;
    transform-origin: 13% 24%;
    animation: clipart-vip-marketing-opportunity-head 3s ease-in-out infinite alternate;
    transform-origin: 50% 80%;
}

@keyframes clipart-vip-marketing-opportunity-head {
    from {
        transform: rotate(-10deg);
    }

    to {
        transform: rotate(10deg);
    }
}

.clipart-vip-marketing-opportunity .clipart-brow {
    display: block;
    width: 17%;
    height: 17%;
    top: 39%;
    left: 34%;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/VIP/MarketingOpportunity/clipart-brow.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-vip-marketing-opportunity-brow 4s ease-in-out infinite alternate;
}

@keyframes clipart-vip-marketing-opportunity-brow {
    0% {
        transform: translateY(0%);
    }

    20% {
        transform: translateY(0%);
    }

    25% {
        transform: translateY(-16%);
    }

    35% {
        transform: translateY(-16%);
    }

    40% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

.clipart-vip-marketing-opportunity .eye-1,
.clipart-vip-marketing-opportunity .eye-2 {
    display: block;
    width: 8.5%;
    height: 11%;
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    background-color: #853F33;
    animation: clipart-vip-marketing-opportunity-eyes 2s ease-in-out infinite alternate;
}

.clipart-vip-marketing-opportunity .eye-1 {
    top: 52%;
    left: 37%;
}

.clipart-vip-marketing-opportunity .eye-2 {
    top: 52%;
    left: 66%;
}

@keyframes clipart-vip-marketing-opportunity-eyes {
    0% {
        transform: scaleY(1);
    }

    10% {
        transform: scaleY(1);
    }

    15% {
        transform: scaleY(0);
    }

    20% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(1);
    }
}

/* #endregion Clipart Marketing Opportunity */
/* #region Banner thumbsup man */
.vip-clipart-thumbsup {
    display: block;
    width: 450px;
    height: 450px;
    background-size: contain;
}

    .vip-clipart-thumbsup .body {
        display: block;
        position: absolute;
        width: 60%;
        height: 60%;
        top: 41%;
        left: 8%;
        background: url("../../Content/Images/VIP/Banners/body.svg") no-repeat center center transparent;
        background-size: contain;
    }

    .vip-clipart-thumbsup .head {
        display: block;
        position: absolute;
        width: 45%;
        height: 45%;
        top: 0%;
        left: 19%;
        background: url("../../Content/Images/VIP/Banners/head.svg") no-repeat center center transparent;
        background-size: contain;
        animation: vip-banner-head 3s ease-in-out infinite alternate;
        transform-origin: 50% 90%;
    }

    .vip-clipart-thumbsup .hand {
        display: block;
        position: absolute;
        width: 40%;
        height: 40%;
        top: 45%;
        left: 56%;
        background: url("../../Content/Images/VIP/Banners/hand.svg") no-repeat center center transparent;
        background-size: contain;
        animation: vip-banner-hand 4s ease-in-out infinite alternate;
        transform-origin: 10% 90%;
    }

    .vip-clipart-thumbsup .brow-1 {
        display: block;
        position: absolute;
        width: 17%;
        height: 17%;
        top: 37%;
        left: 35%;
        background: url("../../Content/Images/VIP/Banners/brow.svg") no-repeat center center transparent;
        background-size: contain;
        animation: vip-banner-brows 3s ease-in-out infinite;
    }

    .vip-clipart-thumbsup .brow-2 {
        display: block;
        position: absolute;
        width: 17%;
        height: 17%;
        top: 40%;
        left: 62%;
        background: url("../../Content/Images/VIP/Banners/brow.svg") no-repeat center center transparent;
        background-size: contain;
        animation: vip-banner-brows 3s ease-in-out infinite;
    }

    .vip-clipart-thumbsup .eye-1 {
        display: block;
        position: absolute;
        width: 12%;
        height: 12%;
        top: 50%;
        left: 36%;
        background: url("../../Content/Images/VIP/Banners/eye.svg") no-repeat center center transparent;
        background-size: contain;
        animation: vip-banner-eyes 3s ease-in-out infinite;
    }

    .vip-clipart-thumbsup .eye-2 {
        display: block;
        position: absolute;
        width: 12%;
        height: 12%;
        top: 53%;
        left: 64%;
        background: url("../../Content/Images/VIP/Banners/eye.svg") no-repeat center center transparent;
        background-size: contain;
        animation: vip-banner-eyes 3s ease-in-out infinite;
    }

@keyframes vip-banner-hand {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(15deg);
    }
}

@keyframes vip-banner-head {
    from {
        transform: rotateZ(-10deg);
    }

    to {
        transform: rotateZ(5deg);
    }
}


@keyframes vip-banner-eyes {
    0% {
        transform: scaleY(1);
    }

    40% {
        transform: scaleY(1);
    }

    43% {
        transform: scaleY(0);
    }

    46% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes vip-banner-brows {
    0% {
        transform: translateY(0%);
    }

    20% {
        transform: translateY(0%);
    }

    24% {
        transform: translateY(-20%);
    }

    28% {
        transform: translateY(-20%);
    }

    32% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

/* #endregion Banner thumbs man */
/* #endregion ---------------------- /Cliparts ------------------------ */
/* #region ------------------------- Main menu ------------------------ */
.user-account-btn .vip-marker {
    display: none;
    position: absolute;
    z-index: 2;
    background-color: var(--color-bg-warning);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    top: 4px;
    right: 56px;
}

.vip-user .user-account-btn .vip-marker {
    display: block;
}

*[dir='rtl'] .user-account-btn .vip-marker {
    left: 56px;
    right: auto;
}

.user-account-btn .ci-check {
    font-size: 12px;
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    z-index: 1;
}

.user-account-menu.version-2 .user-info-block .trusted-seller-badge {
    display: none !important;
    background-color: var(--color-bg-warning);
    border-radius: var(--radius-16);
    padding: 5px 7px 5px 25px !important;
    color: var(--color-text-basic);
    text-transform: uppercase;
    position: relative;
    margin-top: 6px;
}

.vip-user .user-account-menu.version-2 .user-info-block .trusted-seller-badge {
    display: inline-block !important;
}

*[dir='rtl'] .user-account-menu.version-2 .user-info-block .trusted-seller-badge {
    padding: 5px 25px 5px 7px !important;
}

.user-account-menu.version-2 .user-info-block .trusted-seller-badge .ci-check {
    font-size: 12px;
    position: absolute;
    top: calc(50% - 7px);
    left: 5px;
    z-index: 1;
}

*[dir='rtl'] .user-account-menu.version-2 .user-info-block .trusted-seller-badge .ci-check {
    right: 5px;
    left: auto;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 ul .trusted-seller-badge span {
    font-size: 10px;
    font-weight: 700;
    line-height: 10px;
    padding: 0px;
}
/* #endregion --------------------- /Main menu ------------------------ */
/* #region ------------------------ My Ads Page ----------------------- */
.vip-services-user-banner {
    display: block;
    margin-top: 30px;
}

.myads-page .vip-services-user-banner {
    display: block;
    margin-top: 30px;
    padding-left: 50px;
}

*[dir='rtl'] .myads-page .vip-services-user-banner {
    padding-right: 50px;
    padding-left: 0px;
}

.vip-services-user-banner > .inner {
    display: block;
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #E6F4ED;
    font-size: 0px;
    padding: 10px 10px 10px 10px;
}

.vip-services-user-banner .banner-close {
    display: block;
    position: absolute;
    z-index: 1;
    font-size: 16px;
    top: 0px;
    right: 0px;
    padding: 12px;
    border: 0px none transparent;
    cursor: pointer;
    background: transparent;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

*[dir='rtl'] .vip-services-user-banner .banner-close {
    right: auto;
    left: 0px;
}

.vip-services-user-banner .banner-close:hover {
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
}

.vip-services-user-banner > .inner .left-side, .vip-services-user-banner > .inner .right-side {
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
}

.vip-services-user-banner > .inner .left-side {
    width: 200px;
}

.vip-services-user-banner > .inner .right-side {
    width: calc(100% - 200px);
    padding-left: 10px;
    padding-right: 40px;
}

*[dir='rtl'] .vip-services-user-banner > .inner .right-side {
    padding-left: 40px;
    padding-right: 10px;
}

.vip-services-user-banner h3 {
    font-size: 24px;
    font-weight: 400;
    padding-top: 15px;
    padding-bottom: 10px;
    line-height: 1.2em;
}

.vip-services-user-banner p {
    font-size: 14px;
    font-weight: 400;
    padding-top: 5px;
    padding-bottom: 20px;
}

.vip-services-user-banner a {
    margin-bottom: 25px;
}

.vip-services-user-banner .vip-clipart-medalman, .vip-services-user-banner .vip-clipart-medalstore {
    width: 180px;
    height: 180px;
}

    .vip-services-user-banner .vip-clipart-medalman .clipart-cloud-1, .vip-services-user-banner .vip-clipart-medalman .clipart-cloud-2, .vip-services-user-banner .vip-clipart-medalman .clipart-cloud-3, .vip-services-user-banner .vip-clipart-medalman .clipart-cloud-4, .vip-services-user-banner .vip-clipart-medalman .clipart-cloud-5, .vip-services-user-banner .vip-clipart-medalman .clipart-cloud-6, .vip-services-user-banner .vip-clipart-medalman .clipart-cloud-7, .vip-services-user-banner .vip-clipart-medalman .clipart-cloud-8, .vip-services-user-banner .vip-clipart-medalman .clipart-cloud-9, .vip-services-user-banner .vip-clipart-medalstore .clipart-cloud-1, .vip-services-user-banner .vip-clipart-medalstore .clipart-cloud-2, .vip-services-user-banner .vip-clipart-medalstore .clipart-cloud-3, .vip-services-user-banner .vip-clipart-medalstore .clipart-cloud-4, .vip-services-user-banner .vip-clipart-medalstore .clipart-cloud-5, .vip-services-user-banner .vip-clipart-medalstore .clipart-cloud-6, .vip-services-user-banner .vip-clipart-medalstore .clipart-cloud-7, .vip-services-user-banner .vip-clipart-medalstore .clipart-cloud-8, .vip-services-user-banner .vip-clipart-medalstore .clipart-cloud-9, .vip-services-user-banner .vip-clipart-medalstore .clipart-cloud-10 {
        background-color: #D9E7DF;
    }

@media (max-width: 767px) {
    .vip-services-user-banner {
        margin-top: 10px;
    }

        .vip-services-user-banner > .inner .left-side,
        .vip-services-user-banner > .inner .right-side,
        *[dir='rtl'] .vip-services-user-banner > .inner .left-side,
        *[dir='rtl'] .vip-services-user-banner > .inner .right-side {
            display: block;
            width: 100%;
            text-align: center;
            padding-left: 0px;
            padding-right: 0px;
        }

            .vip-services-user-banner > .inner .right-side h3 {
                padding-top: 0px;
                padding-left: 30px;
                padding-right: 30px;
            }

            .vip-services-user-banner > .inner .right-side p {
                padding-left: 30px;
                padding-right: 30px;
            }
}

@media (max-width: 450px) {
    .vip-services-user-banner > .inner .right-side h3 {
        font-size: 18px;
        font-weight: 700;
        padding-left: 0px;
        padding-right: 0px;
    }

    .vip-services-user-banner > .inner .right-side p {
        padding-left: 0px;
        padding-right: 0px;
    }

    .vip-services-user-banner,
    *[dir='rtl'] .vip-services-user-banner {
        padding-left: 0px;
        padding-right: 0px;
    }

        .vip-services-user-banner > .inner .right-side,
        *[dir='rtl'] .vip-services-user-banner > .inner .right-side {
            padding-left: 20px;
            padding-right: 20px;
        }
}

@media (max-width: 380px) {
    .vip-services-user-banner a {
        width: 100%;
    }
}

/* #endregion -------------------- /My Ads Page ----------------------- */
/* #region -------------------- Plan selection Page ------------------- */
/* #region Plans section */
.plan-selection-page .plan-section {
    display: block;
    width: 100%;
    background-color: #FFFFFF;
    padding-top: 50px;
    padding-bottom: 90px;
}

    .plan-selection-page .plan-section h1 {
        font-size: 36px;
        font-weight: 800;
        text-transform: uppercase;
        text-align: center;
        width: 750px;
        margin: 0px auto 0px auto;
    }

    .plan-selection-page .plan-section h2 {
        font-size: 24px;
        font-weight: 400;
        text-align: center;
        width: 750px;
        margin: 10px auto 40px auto;
        color: var(--color-text-muted);
    }

    .plan-selection-page .plan-section .plans-selection-tabs {
        display: block;
        text-align: center;
    }

        .plan-selection-page .plan-section .plans-selection-tabs .list-group-item-action {
            display: inline-block;
            width: auto;
            border-radius: var(--radius-4);
            border: 0px none transparent;
            vertical-align: middle;
            text-transform: uppercase;
            font-size: 14px;
            font-weight: 500;
            padding: 15px 13px 15px 13px;
            color: var(--color-text-muted);
        }

            .plan-selection-page .plan-section .plans-selection-tabs .list-group-item-action:hover {
                color: var(--color-text-basic);
                background-color: transparent;
            }

            .plan-selection-page .plan-section .plans-selection-tabs .list-group-item-action.active {
                color: var(--color-text-basic);
                background-color: #F2F2F2;
            }

        .plan-selection-page .plan-section .plans-selection-tabs .divider {
            display: inline-block;
            width: 1px;
            height: 47px;
            background-color: #DDDDDD;
            vertical-align: middle;
            margin-left: 10px;
            margin-right: 10px;
        }

        .plan-selection-page .plan-section .plans-selection-tabs span {
            vertical-align: middle;
        }


        .plan-selection-page .plan-section .plans-selection-tabs i {
            display: inline-block;
            color: #FFFFFF;
            font-weight: 700;
            font-size: 14px;
            background-color: var(--color-bg-primary);
            padding: 2px 10px 2px 10px;
            border-radius: var(--radius-16);
            vertical-align: middle;
            margin-left: 5px;
        }

*[dir='rtl'] .plan-selection-page .plan-section .plans-selection-tabs i {
    margin-left: 0px;
    margin-right: 5px;
}

.plan-selection-page .plan-section .tab-content {
    margin-top: 40px;
}

.plan-selection-page .plan-section .tab-pane {
    border-top: 1px solid #DDDDDD;
}

.plan-selection-page .plan-section .plans-table {
    display: table;
    width: 100%;
    table-layout: fixed;
}

    .plan-selection-page .plan-section .plans-table > * {
        display: table-row;
    }

        .plan-selection-page .plan-section .plans-table > * > * {
            display: table-cell;
            vertical-align: top;
            padding-top: 30px;
            padding-right: 20px;
            position: relative;
        }

*[dir='rtl'] .plan-selection-page .plan-section .plans-table > * > * {
    padding-left: 20px;
    padding-right: 0px;
}

.plan-selection-page .plan-section .plans-table > * > *:first-child {
    width: 350px;
}

.plan-selection-page .plan-item {
    padding-bottom: 100px;
}

    .plan-selection-page .plan-item label {
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .plan-selection-page .plan-item .price {
        display: block;
        width: 100%;
        color: var(--color-text-basic);
        text-align: left;
    }

*[dir='rtl'] .plan-selection-page .plan-item .price {
    text-align: right;
}

.plan-selection-page .plan-item .price span {
    font-size: 48px;
    font-weight: 800;
    vertical-align: baseline;
}

.site-Albania .plan-selection-page .plan-item .price span {
    font-size: 28px;
}

.plan-selection-page .plan-item .price small {
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    vertical-align: baseline;
    padding-left: 5px;
}

.plan-selection-page .plan-item .old-price {
    width: 100%;
    font-size: 14px;
    color: var(--color-text-muted);
    text-align: left;
    display: block;
    margin-top: 10px;
    text-decoration: line-through;
}

*[dir='rtl'] .plan-selection-page .plan-item .old-price {
    text-align: right;
}

.plan-selection-page .plan-item .old-price small {
    padding-left: 5px;
    font-size: 14px;
    text-transform: uppercase;
}

.plan-selection-page .plan-item .badge {
    display: inline-block;
    color: var(--color-text-muted);
    background-color: #E6F4ED;
    border-radius: var(--radius-16);
    padding: 4px 12px 4px 12px;
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 10px;
}

    .plan-selection-page .plan-item .badge bdi {
        padding-left: 3px;
    }

*[dir='rtl'] .plan-selection-page .plan-item .badge bdi {
    padding-left: 0px;
    padding-right: 3px;
}

.plan-selection-page .plan-item .badge small {
    padding-left: 3px;
    font-size: 14px;
    text-transform: uppercase;
}

.plan-selection-page .plan-item p {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
    display: block;
    margin-top: 10px;
}

    .plan-selection-page .plan-item p + p {
        margin-top: 20px;
    }

    .plan-selection-page .plan-item p a {
        white-space: nowrap;
    }


.plan-selection-page .plan-item .new-btn {
    position: absolute;
    bottom: 24px;
    left: 0px;
}

*[dir='rtl'] .plan-selection-page .plan-item .new-btn {
    right: 0px;
    left: auto;
}

.plan-selection-page .plan-item .new-btn:disabled {
    padding-left: 0px;
    padding-right: 0px;
    color: var(--color-text-muted) !important;
    background-color: transparent !important;
    opacity: 1;
}

.plan-selection-page .plan-item .new-btn.btn-link {
    text-transform: uppercase;
    text-decoration: none;
}

.plan-selection-page .plan-item .btn-helper {
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-transform: uppercase;
    font-size: 10px;
}

*[dir='rtl'] .plan-selection-page .plan-item .btn-helper {
    right: 0px;
    left: auto;
}

.plan-selection-page .plan-section h3 {
    font-size: 24px;
    font-weight: 400;
    color: var(--color-text-basic);
    display: block;
    margin-bottom: 20px;
    margin-top: 40px;
}

.plan-selection-page .overview-table {
    display: table;
    width: 100%;
    table-layout: fixed;
}

    .plan-selection-page .overview-table > * {
        display: table-row;
    }

        .plan-selection-page .overview-table > * > * {
            display: table-cell;
            padding: 15px 10px 15px 0px;
            vertical-align: middle;
        }

        .plan-selection-page .overview-table > *:nth-child(2n-1) {
            background-color: #F9F9F9;
        }

        .plan-selection-page .overview-table > * > *:first-child {
            width: 350px;
            padding-left: 20px;
        }

*[dir='rtl'] .plan-selection-page .overview-table > * > *:first-child {
    padding-right: 20px;
    padding-left: 0px;
}

.plan-selection-page .overview-table .marker {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #D5F5DC;
}

    .plan-selection-page .overview-table .marker .ci-pazar-small {
        position: absolute;
        z-index: 1;
        font-size: 14px;
        top: calc(50% - 7px);
        left: calc(50% - 7px);
    }

.plan-selection-page .overview-table .collapser .collapser-btn {
    cursor: pointer;
    display: block;
    width: 100%;
}

.plan-selection-page .overview-table .collapser a {
    text-decoration: none;
    display: block;
    width: 100%;
}

    .plan-selection-page .overview-table .collapser a span {
        font-size: 14px;
        font-weight: 700;
        color: var(--color-text-basic);
        vertical-align: middle;
        display: inline;
    }

    .plan-selection-page .overview-table .collapser a small {
        vertical-align: middle;
        display: inline-block;
        border-radius: 50%;
        border: 2px solid var(--color-border-primary);
        width: 18px;
        height: 18px;
        margin-left: 3px;
    }

*[dir='rtl'] .plan-selection-page .overview-table .collapser a small {
    margin-right: 3px;
    margin-left: 0px;
}

.plan-selection-page .overview-table .collapser a i {
    display: inline-block;
    position: absolute;
    font-size: 14px;
    width: 14px;
    line-height: 14px;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    top: calc(50% - 6px);
    left: calc(50% - 7px);
    z-index: 1;
}

.plan-selection-page .collapser-content span {
    display: block;
    width: 100%;
    padding: 10px 20px 5px 0px;
    font-size: 14px;
    color: var(--color-text-muted);
}

*[dir='rtl'] .plan-selection-page .collapser-content span {
    padding: 5px 20px 10px 0px;
}


.plan-selection-page .plan-section .plans-table > *:nth-child(2) > * {
    padding-top: 30px;
    padding-bottom: 10px;
}

.plan-selection-page .plan-item-description .collapser {
    padding: 10px 0px 10px 0px;
}

.plan-selection-page .plan-item-description .collapser-btn {
    position: relative;
    display: block;
    width: 100%;
    padding-left: 32px;
    color: var(--color-text-muted);
    font-weight: 400;
    text-decoration: none;
}

*[dir='rtl'] .plan-selection-page .plan-item-description .collapser-btn {
    padding-left: 0px;
    padding-right: 32px;
}


.plan-selection-page .plan-item-description .marker {
    position: absolute;
    width: 24px;
    height: 24px;
    display: block;
    border-radius: 50%;
    z-index: 1;
    left: 0px;
    top: calc(50% - 12px);
    background-color: #D5F5DC;
}

*[dir='rtl'] .plan-selection-page .plan-item-description .marker {
    left: auto;
    right: 0px;
}

.plan-selection-page .plan-item-description .caption {
    display: block;
    width: 100%;
}

.plan-selection-page .plan-item-description .marker .ci-pazar-small {
    position: absolute;
    top: calc(50% - 7px);
    left: calc(50% - 7px);
    font-size: 14px;
}

.plan-selection-page .plan-item-description .collapser-content span {
    display: block;
    padding: 10px 0px 0px 30px;
}

*[dir='rtl'] .plan-selection-page .plan-item-description .collapser-content span {
    padding: 10px 30px 0px 0px;
}

.plan-selection-page .plan-section .plans-table > *:nth-child(2) {
    display: none;
}

.plan-selection-page .plan-item .collapser {
    display: none;
}

@media (max-width: 1199px) {
    .plan-selection-page .plan-section .plans-table > * > *:first-child {
        width: 250px;
    }

    .plan-selection-page .overview-table > * > *:first-child {
        width: 250px;
    }
}

@media (max-width: 991px) {
    .plan-selection-page .plan-section h1,
    .plan-selection-page .plan-section h2 {
        width: 100%;
    }

    .plan-selection-page .plan-section h3,
    .plan-selection-page .overview-table {
        display: none;
    }

    .plan-selection-page .plan-section .plans-table > * > *:first-child {
        display: none;
    }

    .plan-selection-page .plan-section .plans-table > * > * {
        border-right: 1px solid #DDDDDD;
        padding: 0px 10px 60px 10px;
    }

    *[dir='rtl'] .plan-selection-page .plan-section .plans-table > * > * {
        border-right: 0px none transparent;
        border-left: 1px solid #DDDDDD;
        padding-left: 10px;
        padding-right: 10px;
    }

    .plan-selection-page .plan-section .plans-table > * > *:last-child {
        border-right: 0px none transparent;
    }

    *[dir='rtl'] .plan-selection-page .plan-section .plans-table > * > *:last-child {
        border-left: 0px none transparent;
    }



    .plan-selection-page .plan-section .plans-table .plan-item .btn-primary,
    .plan-selection-page .plan-section .plans-table .plan-item .btn-default,
    .plan-selection-page .plan-section .plans-table .plan-item .btn-link {
        display: block;
        width: calc(100% - 20px);
        left: 10px;
    }

    *[dir='rtl'] .plan-selection-page .plan-section .plans-table .plan-item .btn-primary,
    *[dir='rtl'] .plan-selection-page .plan-section .plans-table .plan-item .btn-default,
    *[dir='rtl'] .plan-selection-page .plan-section .plans-table .plan-item .btn-link {
        right: 10px;
        left: auto;
    }

    .plan-selection-page .plan-section .plans-table .plan-item .btn-primary:disabled {
        background-color: #F0F0F0 !important;
    }

    .plan-selection-page .plan-section .tab-pane {
        border-top: 0px none transparent;
    }

    .plan-selection-page .plan-section .plans-table > *:nth-child(2) {
        display: table-row;
    }

    .plan-selection-page .plan-item .btn-helper {
        width: 100%;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 767px) {
    .plan-selection-page .plan-section .plans-table > *:nth-child(2) {
        display: none;
    }

    .plan-selection-page .plan-section .plans-table,
    .plan-selection-page .plan-section .plans-table > *,
    .plan-selection-page .plan-section .plans-table > * > *,
    *[dir='rtl'] .plan-selection-page .plan-section .plans-table > * > * {
        display: block;
        border: 0px none transparent;
    }

        .plan-selection-page .plan-section .plans-table > * > *:first-child {
            display: none;
        }




        .plan-selection-page .plan-section .plans-table > * > *,
        *[dir='rtl'] .plan-selection-page .plan-section .plans-table > * > * {
            border-radius: var(--radius-4);
            background-color: #F9F9F9;
            padding: 30px 30px 30px 30px;
            margin-bottom: 30px;
        }

        .plan-selection-page .plan-section .plans-table .plan-item .btn-primary,
        .plan-selection-page .plan-section .plans-table .plan-item .btn-default,
        .plan-selection-page .plan-section .plans-table .plan-item .btn-link {
            position: static;
            width: 100%;
            margin-top: 20px;
        }

        .plan-selection-page .plan-section .plans-table .plan-item .btn-link {
            background-color: #EBEBEB !important;
            color: var(--color-text-basic) !important;
        }

        .plan-selection-page .plan-section .plans-table .plan-item label {
            display: block;
            width: 100%;
            padding: 0px;
            padding-bottom: 30px;
        }

        .plan-selection-page .plan-section .plans-table .plan-item .price-block {
            position: absolute;
            top: 16px;
            right: 30px;
            z-index: 1;
        }

    *[dir='rtl'] .plan-selection-page .plan-section .plans-table .plan-item .price-block {
        left: 30px;
        right: auto;
    }

    .plan-selection-page .plan-item .price {
        display: inline-block;
        width: auto;
    }

    .plan-selection-page .plan-section .plans-table .plan-item .discount {
        display: inline-block;
        vertical-align: top;
        padding-left: 10px;
    }

    *[dir='rtl'] .plan-selection-page .plan-section .plans-table .plan-item .discount {
        padding-right: 10px;
        padding-left: 0px;
    }

    .plan-selection-page .plan-item .old-price {
        margin-top: 5px;
    }

    .plan-selection-page .plan-item .badge {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .plan-selection-page .plan-section {
        padding-bottom: 50px;
    }

    .plan-selection-page .plan-item p {
        margin-bottom: 10px;
    }

    .plan-selection-page .plan-item .collapser {
        padding: 10px 0px 10px 0px;
        display: block;
    }

    .plan-selection-page .plan-item .collapser-btn {
        position: relative;
        display: block;
        width: 100%;
        padding-left: 32px;
        color: var(--color-text-muted);
        font-weight: 400;
        text-decoration: none;
    }

    *[dir='rtl'] .plan-selection-page .plan-item .collapser-btn {
        padding-right: 32px;
        padding-left: 0px;
    }

    .plan-selection-page .plan-item .marker {
        position: absolute;
        width: 24px;
        height: 24px;
        display: block;
        border-radius: 50%;
        z-index: 1;
        left: 0px;
        top: calc(50% - 12px);
        background-color: #D5F5DC;
    }

    *[dir='rtl'] .plan-selection-page .plan-item .marker {
        right: 0px;
        left: auto;
    }

    .plan-selection-page .plan-item .caption {
        display: block;
        width: 100%;
        font-weight: 700;
        color: var(--color-text-basic);
    }

    .plan-selection-page .plan-item .marker .ci-pazar-small {
        position: absolute;
        top: calc(50% - 7px);
        left: calc(50% - 7px);
        font-size: 14px;
    }

    .plan-selection-page .plan-item .collapser-content span {
        display: block;
        padding: 10px 0px 0px 30px;
    }

    *[dir='rtl'] .plan-selection-page .plan-item .collapser-content span {
        padding: 10px 30px 0px 0px;
    }

    .plan-selection-page .plan-item .collapser-btn .caption small {
        padding-left: 10px;
    }

    *[dir='rtl'] .plan-selection-page .plan-item .collapser-btn .caption small {
        padding-left: 0px;
        padding-right: 10px;
    }

    .plan-selection-page .plan-item .btn-helper {
        position: static;
    }
}

@media (max-width: 575px) {
    .plan-selection-page .plan-section h1 {
        font-size: 32px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .plan-selection-page .plan-section h2 {
        font-size: 20px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .plan-selection-page .plan-section .plans-selection-tabs .divider {
        display: none;
    }

    .plan-selection-page .plan-section .plans-selection-tabs .list-group-item-action {
        background-color: transparent;
        border-bottom: 2px solid transparent;
        border-radius: var(--radius-0);
    }

        .plan-selection-page .plan-section .plans-selection-tabs .list-group-item-action.active {
            background-color: transparent;
            border-bottom: 2px solid var(--color-border-primary);
        }

        .plan-selection-page .plan-section .plans-selection-tabs .list-group-item-action i {
            display: none;
        }
}

@media (max-width: 480px) {
    .plan-selection-page .plan-section {
        padding-top: 20px;
    }

        .plan-selection-page .plan-section h1 {
            font-size: 24px;
            padding-left: 20px;
            padding-right: 20px;
        }

        .plan-selection-page .plan-section h2 {
            font-size: 14px;
            padding-left: 20px;
            padding-right: 20px;
        }
}

@media (max-width: 450px) {
    .plan-selection-page .plan-section .plans-table .plan-item .price-block,
    *[dir='rtl'] .plan-selection-page .plan-section .plans-table .plan-item .price-block {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
    }

    .plan-selection-page .plan-section .plans-table .plan-item label {
        padding-bottom: 0px;
    }

    .plan-selection-page .plan-section .plans-selection-tabs .list-group-item-action {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 12px;
    }
}


@media (max-width: 319px) {
    .plan-selection-page .plan-section .plans-table .plan-item label {
        text-align: center;
    }

    .plan-selection-page .plan-section .plans-table .plan-item .discount {
        display: block;
        padding: 0px;
        text-align: center;
        margin-bottom: 15px;
    }

        .plan-selection-page .plan-section .plans-table .plan-item .discount .old-price {
            margin-bottom: 5px;
            text-align: center;
        }

    .plan-selection-page .plan-section .plans-table .plan-item .price-block {
        text-align: center;
    }
}
/* #endregion Plans section */
/* #region FAQ section */
.plan-selection-page .faq-section {
    display: block;
    width: 100%;
    background-color: #F9F9F9;
    padding-top: 60px;
    padding-bottom: 60px;
}

    .plan-selection-page .faq-section h2 {
        font-size: 36px;
        font-weight: 800;
        color: var(--color-text-basic);
        text-transform: uppercase;
        display: block;
        text-align: center;
    }

    .plan-selection-page .faq-section h3 {
        font-size: 24px;
        font-weight: 400;
        color: var(--color-text-muted);
        display: block;
        text-align: center;
        margin-top: 10px;
    }

    .plan-selection-page .faq-section .content-container {
        display: block;
        width: 750px;
        margin: 40px auto 0px auto;
    }

    .plan-selection-page .faq-section .collapser-btn {
        display: block;
        width: 100%;
        position: relative;
        cursor: pointer;
        text-decoration: none;
        padding: 20px 50px 20px 0px;
    }

*[dir='rtl'] .plan-selection-page .faq-section .collapser-btn {
    padding: 20px 0px 20px 50px;
}

.plan-selection-page .faq-section .collapser-btn span {
    font-size: 20px;
    font-weight: 700;
}

.plan-selection-page .faq-section .collapser-btn .ci-pazar-small {
    font-size: 14px;
    position: absolute;
    top: calc(50% - 7px);
    right: 0px;
}

*[dir='rtl'] .plan-selection-page .faq-section .collapser-btn .ci-pazar-small {
    left: 0px;
    right: auto;
}

.plan-selection-page .faq-section .collapser.collapsed .collapser-btn .ci-pazar-small {
    transform: rotate(180deg);
}

.plan-selection-page .faq-section .collapser + .collapser {
    border-top: 1px solid #F2F2F2;
}

.plan-selection-page .faq-section .collapser-content span {
    font-size: 16px;
    color: var(--color-text-muted);
    font-weight: 400;
    padding: 0px 60px 10px 60px;
    display: block;
    width: 100%;
}

@media (max-width: 991px) {
    .plan-selection-page .faq-section .content-container {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .plan-selection-page .faq-section .collapser-content span {
        padding: 0px 10px 10px 10px;
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .plan-selection-page .faq-section .content-container {
        padding-left: 30px;
        padding-right: 30px;
    }

    .plan-selection-page .faq-section h2 {
        font-size: 32px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .plan-selection-page .faq-section h3 {
        font-size: 20px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .plan-selection-page .faq-section .collapser-btn span {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .plan-selection-page .faq-section h2 {
        font-size: 24px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .plan-selection-page .faq-section h3 {
        font-size: 14px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
/* #endregion FAQ section */
/* #region Footer section */
.plan-selection-page .content-footer {
    display: block;
    width: 100%;
    background-color: #FFFFFF;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 100px;
}

    .plan-selection-page .content-footer .vip-clipart-medalman,
    .plan-selection-page .content-footer .vip-clipart-medalstore {
        width: 210px;
        height: 210px;
    }

    .plan-selection-page .content-footer h2 {
        font-size: 36px;
        font-weight: 800;
        color: var(--color-text-basic);
        text-transform: uppercase;
    }

    .plan-selection-page .content-footer p {
        font-size: 14px;
        color: var(--color-text-muted);
        display: block;
        width: 850px;
        margin: 20px auto 20px auto;
    }

    .plan-selection-page .content-footer .new-btn + .new-btn {
        margin-left: 10px;
    }

@media (max-width: 1199px) {
    .plan-selection-page .content-footer p {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .plan-selection-page .content-footer h2 {
        font-size: 32px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .plan-selection-page .content-footer p {
        padding-left: 30px;
        padding-right: 30px;
    }

    .plan-selection-page .content-footer .content-container {
        display: block;
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
    }

        .plan-selection-page .content-footer .content-container .new-btn {
            display: block;
            width: 100%;
            margin-left: 0px;
            margin-right: 0px;
        }

            .plan-selection-page .content-footer .content-container .new-btn + .new-btn {
                margin-top: 5px;
            }
}

@media (max-width: 480px) {
    .plan-selection-page .content-footer h2 {
        font-size: 24px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .plan-selection-page .content-footer .content-container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .plan-selection-page .content-footer p {
        padding-left: 0px;
        padding-right: 0px;
    }
}
/* #endregion Footer section */
/* #endregion ---------------- /Plan selection Page ------------------- */
/* #region ----------------- Modal: Stote Locked ---------------------- */
.modal-custom.store-locked .modal-window {
    width: 750px;
    left: calc(50% - 375px);
    top: calc(50% - 268px);
}

/* #endregion -------------- Modal: Store Locked ---------------------- */
/* #region ----------------- Modal: Get in touch ---------------------- */
.modal-custom.getintouch .modal-window {
    width: 750px;
    left: calc(50% - 375px);
    top: calc(50% - 318px);
}

    .modal-custom.getintouch .modal-window .modal-body {
        max-height: 600px;
    }

    .modal-custom.getintouch .modal-window .modal-container {
        width: 650px;
        margin: 0px auto;
    }

.modal-custom.getintouch h2 {
    font-size: 24px;
    color: var(--color-text-basic);
    font-weight: 400;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 5px;
}

.modal-custom.getintouch p {
    color: var(--color-text-muted);
    margin-bottom: 30px;
}

@media (max-width: 780px) {
    .modal-custom.getintouch .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.getintouch .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.getintouch .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.getintouch .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    .modal-custom.getintouch .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }


    .modal-custom.getintouch .modal-window .modal-container {
        width: 550px;
        margin: 0px auto;
    }
}

@media (max-width: 600px) {
    .modal-custom.getintouch .modal-window .modal-container {
        width: 100%;
        margin: 0px;
    }
}

@media (max-width: 480px) {
    .modal-custom.getintouch .modal-window .modal-container {
        padding-top: 0px;
    }

    .modal-custom.getintouch .modal-body {
        padding-top: 52px;
    }

    .modal-custom.getintouch .modal-footer .new-btn {
        min-width: auto;
    }
}

@media (max-height: 650px) {
    .modal-custom.getintouch .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.getintouch .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.getintouch .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.getintouch .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    .modal-custom.getintouch .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}
/* #endregion -------------- Modal: Get in touch ---------------------- */
/* #region ----------- Modal: Get in touch - Success ------------------ */
.modal-custom.getintouch-success .modal-window {
    width: 750px;
    left: calc(50% - 375px);
    top: calc(50% - 318px);
}

    .modal-custom.getintouch-success .modal-window .modal-body {
        max-height: 600px;
    }

    .modal-custom.getintouch-success .modal-window .modal-container {
        width: 650px;
        margin: 0px auto;
    }

.modal-custom.getintouch-success .clipart-customer-support {
    width: 200px;
    height: 200px;
    margin: 0px auto;
}

.modal-custom.getintouch-success h2 {
    font-size: 24px;
    font-weight: 400;
}

.modal-custom.getintouch-success p {
    font-size: 14px;
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 50px;
}

@media (max-width: 780px) {
    .modal-custom.getintouch-success .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.getintouch-success .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.getintouch-success .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.getintouch-success .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    .modal-custom.getintouch-success .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }


    .modal-custom.getintouch-success .modal-window .modal-container {
        width: 550px;
        margin: 0px auto;
    }
}

@media (max-width: 600px) {
    .modal-custom.getintouch-success .modal-window .modal-container {
        width: 100%;
        margin: 0px;
    }
}

@media (max-width: 480px) {
    .modal-custom.getintouch-success .modal-window .modal-container {
        padding-top: 0px;
    }

    .modal-custom.getintouch-success .modal-body {
        padding-top: 52px;
    }
}

@media (max-height: 650px) {
    .modal-custom.getintouch-success .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.getintouch-success .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.getintouch-success .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.getintouch-success .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    .modal-custom.getintouch-success .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }
}
/* #endregion ------- /Modal: Get in touch - Success ------------------ */
/* #region ------------ Modal: Private - Successful upgrade ----------- */
.modal-custom.private-successful-upgrade .modal-window,
.modal-custom.store-successful-upgrade .modal-window,
.modal-custom.reminder .modal-window, .modal-custom.error .modal-window,
.modal-custom.vip-promotion .modal-window, .modal-custom.question .modal-window {
    width: 750px;
    left: calc(50% - 375px);
    top: calc(50% - 318px);
}



    .modal-custom.private-successful-upgrade .modal-window .modal-body,
    .modal-custom.store-successful-upgrade .modal-window .modal-body,
    .modal-custom.reminder .modal-window .modal-body,
    .modal-custom.error .modal-window .modal-body,
    .modal-custom.vip-promotion .modal-window .modal-body,
    .modal-custom.question .modal-window .modal-body,
    .modal-custom.store-locked .modal-window .modal-body {
        max-height: 600px;
    }

    .modal-custom.private-successful-upgrade .modal-window .modal-container,
    .modal-custom.store-successful-upgrade .modal-window .modal-container,
    .modal-custom.reminder .modal-window .modal-container,
    .modal-custom.error .modal-window .modal-container,
    .modal-custom.vip-promotion .modal-window .modal-container,
    .modal-custom.question .modal-window .modal-container,
    .modal-custom.store-locked .modal-window .modal-container {
        width: 650px;
        margin: 0px auto;
    }

.modal-custom.private-successful-upgrade .vip-clipart-medalman,
.modal-custom.store-successful-upgrade .vip-clipart-medalstore,
.modal-custom.error .vip-clipart-expired,
.modal-custom.question .clipart-trashcan-static,
.modal-custom.store-locked .clipart-store-locked {
    width: 250px;
    height: 250px;
    margin: 0px auto 0px auto;
}

.modal-custom.reminder .vip-clipart-reminder,
.modal-custom.reminder .vip-clipart-autorenew,
.modal-custom.vip-promotion .vip-clipart-medalman,
.modal-custom.vip-promotion .vip-clipart-medalstore {
    width: 200px;
    height: 200px;
    margin: 0px auto 0px auto;
}

.modal-custom.private-successful-upgrade h2,
.modal-custom.store-successful-upgrade h2 {
    display: block;
    width: 100%;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: 36px;
}

.modal-custom.reminder h2,
.modal-custom.error h2,
.modal-custom.vip-promotion h2,
.modal-custom.question h2,
.modal-custom.store-locked h2 {
    display: block;
    color: var(--color-text-basic);
    font-weight: 400;
    font-size: 24px;
    text-align: center;
    width: 100%;
    margin-bottom: 30px;
    line-height: 1.2em !important;
}

.modal-custom.private-successful-upgrade h3,
.modal-custom.store-successful-upgrade h3 {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 24px;
    margin-bottom: 30px;
}

.modal-custom.private-successful-upgrade .description,
.modal-custom.store-successful-upgrade .description,
.modal-custom.reminder .description,
.modal-custom.question .description {
    display: block;
    width: 100%;
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: 400;
    padding-bottom: 30px;
    text-align: center;
}

.modal-custom.reminder p {
    display: block;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 400;
}

.modal-custom.reminder .controls-area {
    display: block;
    width: 100%;
    font-size: 0px;
}

    .modal-custom.reminder .controls-area .left-side,
    .modal-custom.reminder .controls-area .right-side {
        font-size: 14px;
        display: inline-block;
        vertical-align: top;
        width: 50%;
        text-align: center;
        padding-bottom: 5px;
        padding-top: 5px;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .modal-custom.reminder .controls-area .left-side {
        border-right: 1px solid #DDDDDD;
    }

*[dir='rtl'] .modal-custom.reminder .controls-area .left-side {
    border-right: 0px none transparent;
    border-left: 1px solid #DDDDDD;
}

.modal-custom.reminder .controls-area .new-btn {
    text-decoration: none;
    text-transform: uppercase;
}

@media (max-width: 780px) {

    .modal-custom.private-successful-upgrade .modal-window,
    .modal-custom.store-successful-upgrade .modal-window,
    .modal-custom.reminder .modal-window,
    .modal-custom.error .modal-window,
    .modal-custom.vip-promotion .modal-window,
    .modal-custom.question .modal-window,
    .modal-custom.store-locked .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.private-successful-upgrade .modal-header,
    .modal-custom.store-successful-upgrade .modal-header,
    .modal-custom.reminder .modal-header,
    .modal-custom.error .modal-header,
    .modal-custom.vip-promotion .modal-header,
    .modal-custom.question .modal-header,
    .modal-custom.store-locked .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.private-successful-upgrade .modal-footer,
    .modal-custom.store-successful-upgrade .modal-footer,
    .modal-custom.reminder .modal-footer,
    .modal-custom.error .modal-footer,
    .modal-custom.vip-promotion .modal-footer,
    .modal-custom.question .modal-footer,
    .modal-custom.store-locked .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.private-successful-upgrade .modal-body,
    .modal-custom.store-successful-upgrade .modal-body,
    .modal-custom.reminder .modal-body,
    .modal-custom.error .modal-body,
    .modal-custom.vip-promotion .modal-body,
    .modal-custom.question .modal-body,
    .modal-custom.store-locked .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    .modal-custom.private-successful-upgrade .modal-content,
    .modal-custom.store-successful-upgrade .modal-content,
    .modal-custom.reminder .modal-content,
    .modal-custom.error .modal-content,
    .modal-custom.vip-promotion .modal-content,
    .modal-custom.question .modal-content,
    .modal-custom.store-locked .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }


    .modal-custom.private-successful-upgrade .modal-window .modal-container,
    .modal-custom.store-successful-upgrade .modal-window .modal-container,
    .modal-custom.reminder .modal-window .modal-container,
    .modal-custom.error .modal-window .modal-container,
    .modal-custom.vip-promotion .modal-window .modal-container,
    .modal-custom.question .modal-window .modal-container,
    .modal-custom.store-locked .modal-window .modal-container {
        width: 550px;
        margin: 0px auto;
    }
}

@media (max-width: 600px) {
    .modal-custom.private-successful-upgrade .modal-window .modal-container,
    .modal-custom.store-successful-upgrade .modal-window .modal-container,
    .modal-custom.reminder .modal-window .modal-container,
    .modal-custom.error .modal-window .modal-container,
    .modal-custom.vip-promotion .modal-window .modal-container,
    .modal-custom.question .modal-window .modal-container,
    .modal-custom.store-locked .modal-window .modal-container {
        width: 100%;
        margin: 0px;
    }
}

@media (max-width: 480px) {
    .modal-custom.private-successful-upgrade h2,
    .modal-custom.store-successful-upgrade h2,
    .modal-custom.question h2 {
        font-size: 24px;
    }

    .modal-custom.private-successful-upgrade h3,
    .modal-custom.store-successful-upgrade h3 {
        font-size: 16px;
        font-weight: 700;
    }

    .modal-custom.private-successful-upgrade .vip-clipart-medalman,
    .modal-custom.store-successful-upgrade .vip-clipart-medalstore,
    .modal-custom.reminder .vip-clipart-reminder,
    .modal-custom.reminder .vip-clipart-autorenew,
    .modal-custom.error .vip-clipart-expired,
    .modal-custom.vip-promotion .vip-clipart-medalman,
    .modal-custom.vip-promotion .vip-clipart-medalstore,
    .modal-custom.question .clipart-trashcan-static,
    .modal-custom.store-locked .clipart-store-locked {
        width: 150px !important;
        height: 150px !important;
    }

    .modal-custom.private-successful-upgrade .modal-window .modal-container,
    .modal-custom.store-successful-upgrade .modal-window .modal-container,
    .modal-custom.vip-promotion .modal-window .modal-container,
    .modal-custom.question .modal-window .modal-container,
    .modal-custom.store-locked .modal-window .modal-container {
        padding-top: 0px;
    }

    .modal-custom.private-successful-upgrade .modal-body,
    .modal-custom.store-successful-upgrade .modal-body,
    .modal-custom.vip-promotion .modal-body,
    .modal-custom.question .modal-body,
    .modal-custom.store-locked .modal-body {
        padding-top: 52px;
    }

    .modal-custom.reminder .controls-area .left-side,
    .modal-custom.reminder .controls-area .right-side,
    *[dir='rtl'] .modal-custom.reminder .controls-area .left-side,
    *[dir='rtl'] .modal-custom.reminder .controls-area .right-side {
        font-size: 14px;
        display: block;
        width: 100%;
        border-left: 0px none transparent;
        border-right: 0px none transparent;
        padding-top: 0px;
        padding-bottom: 0px;
    }

        .modal-custom.reminder .controls-area .left-side .new-btn,
        .modal-custom.reminder .controls-area .right-side .new-btn {
            padding-top: 5px;
            padding-bottom: 5px;
        }

    .modal-custom.reminder .controls-area {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .modal-custom.vip-promotion .modal-footer .new-btn,
    .modal-custom.question .modal-footer .new-btn,
    .modal-custom.store-locked .modal-footer .new-btn {
        min-width: 0px;
    }
}

@media (max-width: 320px) {
    .modal-custom.private-successful-upgrade .vip-clipart-medalman,
    .modal-custom.store-successful-upgrade .vip-clipart-medalstore,
    .modal-custom.reminder .vip-clipart-reminder,
    .modal-custom.reminder .vip-clipart-autorenew,
    .modal-custom.error .vip-clipart-expired,
    .modal-custom.vip-promotion .vip-clipart-medalman,
    .modal-custom.vip-promotion .vip-clipart-medalstore,
    .modal-custom.question .clipart-trashcan-static,
    .modal-custom.store-locked .clipart-store-locked {
        width: 120px !important;
        height: 120px !important;
    }
}

@media (max-height: 650px) {

    .modal-custom.private-successful-upgrade .modal-window,
    .modal-custom.store-successful-upgrade .modal-window,
    .modal-custom.reminder .modal-window,
    .modal-custom.error .modal-window,
    .modal-custom.vip-promotion .modal-window,
    .modal-custom.question .modal-window,
    .modal-custom.store-locked .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: var(--radius-0);
        box-shadow: none;
        height: 100%;
        max-width: 100%;
        width: 100% !important;
    }

    .modal-custom.private-successful-upgrade .modal-header,
    .modal-custom.store-successful-upgrade .modal-header,
    .modal-custom.reminder .modal-header,
    .modal-custom.error .modal-header,
    .modal-custom.vip-promotion .modal-header,
    .modal-custom.question .modal-header,
    .modal-custom.store-locked .modal-header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1;
        border-radius: var(--radius-0);
    }

    .modal-custom.private-successful-upgrade .modal-footer,
    .modal-custom.store-successful-upgrade .modal-footer,
    .modal-custom.reminder .modal-footer,
    .modal-custom.error .modal-footer,
    .modal-custom.vip-promotion .modal-footer,
    .modal-custom.question .modal-footer,
    .modal-custom.store-locked .modal-footer {
        height: 69px;
        border-radius: var(--radius-0);
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 1;
        width: 100%;
    }

    .modal-custom.private-successful-upgrade .modal-body,
    .modal-custom.store-successful-upgrade .modal-body,
    .modal-custom.reminder .modal-body,
    .modal-custom.error .modal-body,
    .modal-custom.vip-promotion .modal-body,
    .modal-custom.question .modal-body,
    .modal-custom.store-locked .modal-body {
        padding-top: 58px;
        padding-bottom: 69px !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    .modal-custom.private-successful-upgrade .modal-content,
    .modal-custom.store-successful-upgrade .modal-content,
    .modal-custom.reminder .modal-content,
    .modal-custom.error .modal-content,
    .modal-custom.vip-promotion .modal-content,
    .modal-custom.question .modal-content,
    .modal-custom.store-locked .modal-content {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100% !important;
    }

    .modal-custom.private-successful-upgrade .vip-clipart-medalman,
    .modal-custom.store-successful-upgrade .vip-clipart-medalstore,
    .modal-custom.reminder .vip-clipart-reminder,
    .modal-custom.reminder .vip-clipart-autorenew,
    .modal-custom.error .vip-clipart-expired,
    .modal-custom.vip-promotion .vip-clipart-medalman,
    .modal-custom.vip-promotion .vip-clipart-medalstore,
    .modal-custom.question .clipart-trashcan-static,
    .modal-custom.store-locked .clipart-store-locked {
        width: 200px;
        height: 200px;
    }
}


/* #endregion --------- Modal: Private - Successful upgrade ----------- */

/* #region ----------------- Notifications page ----------------------- */
.notifications-page .notification-item .tariff-table {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: var(--radius-4);
    background-color: #F9F9F9;
    padding: 20px 20px 20px 20px;
}

    .notifications-page .notification-item .tariff-table > * {
        display: table-row;
    }

        .notifications-page .notification-item .tariff-table > * > * {
            display: table-cell;
        }

            .notifications-page .notification-item .tariff-table > * > *:last-child {
                width: 200px;
            }

    .notifications-page .notification-item .tariff-table label {
        font-size: 16px;
        font-weight: 400;
        color: var(--color-text-muted);
        margin-bottom: 20px;
        display: block;
    }

    .notifications-page .notification-item .tariff-table p {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-text-basic);
        text-transform: uppercase;
    }

    .notifications-page .notification-item .tariff-table span + span {
        margin-left: 3px;
    }

@media (max-width: 991px) {
    .notifications-page .notification-item .tariff-table > * > *:last-child {
        width: 150px;
    }
}

@media (max-width: 767px) {
    .notifications-page .notification-item .tariff-table > * > *:last-child {
        width: 100px;
    }
}

@media (max-width: 479px) {
    .notifications-page .notification-item .tariff-table,
    .notifications-page .notification-item .tariff-table > *,
    .notifications-page .notification-item .tariff-table > * > * {
        display: block;
        width: 100% !important;
    }


        .notifications-page .notification-item .tariff-table > * > * {
            margin-bottom: 10px;
        }

            .notifications-page .notification-item .tariff-table > * > *:last-child {
                margin-bottom: 0px !important;
            }

        .notifications-page .notification-item .tariff-table label {
            display: inline-block;
            margin-bottom: 0px;
            margin-right: 5px;
        }

    *[dir='rtl'] .notifications-page .notification-item .tariff-table label {
        margin-left: 5px;
        margin-right: 0px;
    }

    .notifications-page .notification-item .tariff-table p {
        display: inline;
    }
}

/* #endregion -------------- Notifications page ----------------------- */
/* #region --------------- Avatar - trusted seller -------------------- */
.user-avatar .trusted-seller-badge {
    display: none;
}

.user-avatar.trusted-seller .trusted-seller-badge,
.user-avatar.trusted-seller.user-avatar-lg .trusted-seller-badge {
    display: block;
    position: absolute;
    z-index: 2;
    background-color: var(--color-bg-warning);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    right: -5px;
    top: -3px;
    left: auto;
}

*[dir="rtl"] .user-avatar.trusted-seller .trusted-seller-badge,
*[dir="rtl"] .user-avatar.trusted-seller.user-avatar-lg .trusted-seller-badge {
    right: auto;
    left: -5px;
    transform: rotateY(180deg);
}

.user-avatar.trusted-seller .trusted-seller-badge .ci-pazar-small,
.user-avatar.trusted-seller.user-avatar-lg .trusted-seller-badge .ci-pazar-small {
    position: absolute;
    font-size: 14px !important;
    top: calc(50% - 7px);
    left: calc(50% - 7px);
}


.user-avatar.trusted-seller.user-avatar-md .trusted-seller-badge {
    width: 20px;
    height: 20px;
    right: -4px;
    top: -3px;
    left: auto;
}

*[dir="rtl"] .user-avatar.trusted-seller.user-avatar-md .trusted-seller-badge {
    right: auto;
    left: -4px;
    transform: rotateY(180deg);
}

.user-avatar.trusted-seller.user-avatar-md .trusted-seller-badge .ci-pazar-small {
    position: absolute;
    font-size: 12px !important;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
}

.user-avatar.trusted-seller.user-avatar-sm .trusted-seller-badge {
    width: 16px;
    height: 16px;
    right: -4px;
    top: -3px;
    left: auto;
}

*[dir='rtl'] .user-avatar.trusted-seller.user-avatar-sm .trusted-seller-badge {
    right: auto;
    left: -4px;
    transform: rotateY(180deg);
}


.user-avatar.trusted-seller.user-avatar-sm .trusted-seller-badge .ci-pazar-small {
    position: absolute;
    font-size: 10px !important;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
}

.user-avatar.trusted-seller.user-avatar-xs .trusted-seller-badge {
    width: 14px;
    height: 14px;
    right: -4px;
    top: -3px;
    left: auto;
}

*[dir='rtl'] .user-avatar.trusted-seller.user-avatar-xs .trusted-seller-badge {
    right: auto;
    left: -4px;
    transform: rotateY(180deg);
}

.user-avatar.trusted-seller.user-avatar-xs .trusted-seller-badge .ci-pazar-small {
    position: absolute;
    font-size: 8px !important;
    top: calc(50% - 4px);
    left: calc(50% - 4px);
}

.user-avatar.trusted-seller.user-avatar-xl .trusted-seller-badge {
    width: 26px;
    height: 26px;
    right: 0px;
    top: 0px;
    left: auto;
}

*[dir='rtl'] .user-avatar.trusted-seller.user-avatar-xl .trusted-seller-badge {
    right: auto;
    left: 0px;
    transform: rotateY(180deg);
}

.user-avatar.trusted-seller.user-avatar-xl .trusted-seller-badge .ci-pazar-small {
    position: absolute;
    font-size: 16px !important;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
}

.user-avatar.trusted-seller.user-avatar-xxl .trusted-seller-badge {
    width: 32px;
    height: 32px;
    right: 0px;
    top: 0px;
    left: auto;
}

*[dir='rtl'] .user-avatar.trusted-seller.user-avatar-xxl .trusted-seller-badge {
    right: auto;
    left: 0px;
    transform: rotateY(180deg);
}

.user-avatar.trusted-seller.user-avatar-xxl .trusted-seller-badge .ci-pazar-small {
    position: absolute;
    font-size: 20px !important;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
}

.user-avatar.trusted-seller.user-avatar-xxxl .trusted-seller-badge {
    width: 42px;
    height: 42px;
    right: 14px;
    top: 5px;
    left: auto;
}

*[dir='rtl'] .user-avatar.trusted-seller.user-avatar-xxxl .trusted-seller-badge {
    right: auto;
    left: 14px;
    transform: rotateY(180deg);
}

.user-avatar.trusted-seller.user-avatar-xxxl .trusted-seller-badge .ci-pazar-small {
    position: absolute;
    font-size: 24px !important;
    top: calc(50% - 12px);
    left: calc(50% - 12px);
}

.trusted-seller-badge .inner {
    top: 0px !important;
    left: 0px !important;
}
/* #endregion ------------ Avatar - trusted seller -------------------- */
/* #region ------------------ Trusted Seller Badge -------------------- */
.badge-trusted-seller {
    display: inline-block;
    background-color: var(--color-bg-warning);
    color: var(--color-text-basic);
    border-radius: 1000px;
    vertical-align: middle;
}

    .badge-trusted-seller > * > * {
        text-transform: uppercase;
        font-weight: 700;
    }

    .badge-trusted-seller .ci-check {
        position: absolute;
    }

    /* #region XS */
    .badge-trusted-seller.badge-size-xs {
        height: 14px;
        min-width: 14px;
        font-size: 9px;
        font-weight: 800;
    }

        .badge-trusted-seller.badge-size-xs .inner {
            padding-left: 16px;
            padding-right: 8px;
            padding-top: 7px;
            line-height: 0px;
            height: 100%;
            top: 0px !important;
            left: 0px !important;
        }

*[dir='rtl'] .badge-trusted-seller.badge-size-xs .inner {
    padding-left: 8px;
    padding-right: 16px;
}

.badge-trusted-seller.badge-size-xs .ci-check {
    font-size: 9px;
    top: calc(50% - 5px);
    left: 3px;
}

*[dir='rtl'] .badge-trusted-seller.badge-size-xs .ci-check {
    right: 3px;
    left: 0px;
    transform: rotateY(180deg);
}

.badge-trusted-seller.badge-icon-only.badge-size-xs .ci-check {
    font-size: 10px;
    top: calc(50% - 5px);
    left: 2px;
}

*[dir='rtl'] .badge-trusted-seller.badge-icon-only.badge-size-xs .ci-check {
    right: 2px;
    left: 0px;
    transform: rotateY(180deg);
}
/* #endregion XS */
/* #region SM */
.badge-trusted-seller.badge-size-sm {
    height: 16px;
    min-width: 16px;
    font-size: 9px;
    font-weight: 800;
}

    .badge-trusted-seller.badge-size-sm .inner {
        padding-left: 16px;
        padding-right: 8px;
        padding-top: 8px;
        line-height: 0px;
        height: 100%;
        top: 0px !important;
        left: 0px !important;
    }

*[dir='rtl'] .badge-trusted-seller.badge-size-sm .inner {
    padding-left: 8px;
    padding-right: 16px;
}

.badge-trusted-seller.badge-size-sm .ci-check {
    font-size: 9px;
    top: calc(50% - 5px);
    left: 3px;
}

*[dir='rtl'] .badge-trusted-seller.badge-size-sm .ci-check {
    right: 3px;
    left: 0px;
    transform: rotateY(180deg);
}

.badge-trusted-seller.badge-icon-only.badge-size-sm .ci-check {
    font-size: 10px;
    top: calc(50% - 5px);
    left: 3px;
}

*[dir='rtl'] .badge-trusted-seller.badge-icon-only.badge-size-sm .ci-check {
    right: 3px;
    left: 0px;
    transform: rotateY(180deg);
}
/* #endregion SM */
/* #region MD */
.badge-trusted-seller.badge-size-md {
    height: 20px;
    min-width: 20px;
    font-size: 10px;
    font-weight: 800;
}

    .badge-trusted-seller.badge-size-md .inner {
        padding-left: 24px;
        padding-right: 8px;
        padding-top: 11px;
        line-height: 0px;
        height: 100%;
        top: 0px !important;
        left: 0px !important;
    }

*[dir='rtl'] .badge-trusted-seller.badge-size-md .inner {
    padding-left: 8px;
    padding-right: 24px;
}

.badge-trusted-seller.badge-size-md .ci-check {
    font-size: 14px;
    top: calc(50% - 7px);
    left: 5px;
}

*[dir='rtl'] .badge-trusted-seller.badge-size-md .ci-check {
    right: 5px;
    left: 0px;
    transform: rotateY(180deg);
}

.badge-trusted-seller.badge-icon-only.badge-size-md .ci-check {
    font-size: 14px;
    top: calc(50% - 7px);
    left: 3px;
}

*[dir='rtl'] .badge-trusted-seller.badge-icon-only.badge-size-md .ci-check {
    right: 3px;
    left: 0px;
    transform: rotateY(180deg);
}
/* #endregion MD */
/* #region LG */
.badge-trusted-seller.badge-size-lg {
    height: 24px;
    min-width: 24px;
    font-size: 11px;
    font-weight: 800;
}

    .badge-trusted-seller.badge-size-lg .inner {
        padding-left: 25px;
        padding-right: 10px;
        padding-top: 13px;
        line-height: 0px;
        height: 100%;
        top: 0px !important;
        left: 0px !important;
    }

*[dir='rtl'] .badge-trusted-seller.badge-size-lg .inner {
    padding-left: 10px;
    padding-right: 25px;
}

.badge-trusted-seller.badge-size-lg .ci-check {
    font-size: 14px;
    top: calc(50% - 7px);
    left: 5px;
}

*[dir='rtl'] .badge-trusted-seller.badge-size-lg .ci-check {
    right: 5px;
    left: 0px;
    transform: rotateY(180deg);
}

.badge-trusted-seller.badge-icon-only.badge-size-lg .ci-check {
    font-size: 16px;
    top: calc(50% - 8px);
    left: 4px;
}

*[dir='rtl'] .badge-trusted-seller.badge-icon-only.badge-size-lg .ci-check {
    right: 4px;
    left: 0px;
    transform: rotateY(180deg);
}
/* #endregion LG */
/* #region XL */
.badge-trusted-seller.badge-size-xl {
    height: 26px;
    min-width: 26px;
    font-size: 11px;
    font-weight: 800;
}

    .badge-trusted-seller.badge-size-xl .inner {
        padding-left: 25px;
        padding-right: 10px;
        padding-top: 14px;
        line-height: 0px;
        height: 100%;
        top: 0px !important;
        left: 0px !important;
    }

*[dir='rtl'] .badge-trusted-seller.badge-size-xl .inner {
    padding-left: 10px;
    padding-right: 25px;
}

.badge-trusted-seller.badge-size-xl .ci-check {
    font-size: 14px;
    top: calc(50% - 7px);
    left: 5px;
}

*[dir='rtl'] .badge-trusted-seller.badge-size-xl .ci-check {
    right: 5px;
    left: 0px;
    transform: rotateY(180deg);
}

.badge-trusted-seller.badge-icon-only.badge-size-xl .ci-check {
    font-size: 16px;
    top: calc(50% - 8px);
    left: 5px;
}

*[dir='rtl'] .badge-trusted-seller.badge-icon-only.badge-size-xl .ci-check {
    right: 5px;
    left: 0px;
    transform: rotateY(180deg);
}
/* #endregion XL */
/* #region XXL */
.badge-trusted-seller.badge-size-xxl {
    height: 32px;
    min-width: 32px;
    font-size: 11px;
    font-weight: 800;
}

    .badge-trusted-seller.badge-size-xxl .inner {
        padding-left: 32px;
        padding-right: 12px;
        padding-top: 17px;
        line-height: 0px;
        height: 100%;
        top: 0px !important;
        left: 0px !important;
    }

*[dir='rtl'] .badge-trusted-seller.badge-size-xxl .inner {
    padding-left: 12px;
    padding-right: 32px;
}

.badge-trusted-seller.badge-size-xxl .ci-check {
    font-size: 18px;
    top: calc(50% - 9px);
    left: 7px;
}

*[dir='rtl'] .badge-trusted-seller.badge-size-xxl .ci-check {
    right: 7px;
    left: 0px;
    transform: rotateY(180deg);
}

.badge-trusted-seller.badge-icon-only.badge-size-xxl .ci-check {
    font-size: 18px;
    top: calc(50% - 9px);
    left: 7px;
}

*[dir='rtl'] .badge-trusted-seller.badge-icon-only.badge-size-xxl .ci-check {
    right: 7px;
    left: 0px;
    transform: rotateY(180deg);
}
/* #endregion XXL */
/* #region XXXL */
.badge-trusted-seller.badge-size-xxxl {
    height: 42px;
    min-width: 42px;
    font-size: 12px;
    font-weight: 800;
}

    .badge-trusted-seller.badge-size-xxxl .inner {
        padding-left: 40px;
        padding-right: 16px;
        padding-top: 22px;
        line-height: 0px;
        height: 100%;
        top: 0px !important;
        left: 0px !important;
    }

*[dir='rtl'] .badge-trusted-seller.badge-size-xxxl .inner {
    padding-left: 16px;
    padding-right: 40px;
}

.badge-trusted-seller.badge-size-xxxl .ci-check {
    font-size: 20px;
    top: calc(50% - 10px);
    left: 9px;
}

*[dir='rtl'] .badge-trusted-seller.badge-size-xxxl .ci-check {
    right: 9px;
    left: 0px;
    transform: rotateY(180deg);
}

.badge-trusted-seller.badge-icon-only.badge-size-xxxl .ci-check {
    font-size: 22px;
    top: calc(50% - 11px);
    left: 10px;
}

*[dir='rtl'] .badge-trusted-seller.badge-icon-only.badge-size-xxxl .ci-check {
    right: 10px;
    left: 0px;
    transform: rotateY(180deg);
}
/* #endregion XXXL */
.badge-trusted-seller.badge-icon-only > * > *:not(.ci-check) {
    display: none;
}

.badge-trusted-seller.badge-icon-only .inner,
*[dir='rtl'] .badge-trusted-seller.badge-icon-only .inner {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}


/* #endregion -------------- /Trusted Seller Badge -------------------- */
/* #region --------------------- Settings ----------------------------- */
.settings-page .settings-tab.account-subscription-info-promo .tab-content,
.settings-page .settings-tab.account-subscription-info .tab-content {
    padding-top: 30px;
    padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 30px;
}

.settings-page .settings-tab.account-subscription-info-promo .new-btn {
    min-width: 0px;
}

    .settings-page .settings-tab.account-subscription-info-promo .new-btn + .new-btn {
        margin-left: 10px;
    }

*[dir='rtl'] .settings-page .settings-tab.account-subscription-info-promo .new-btn + .new-btn {
    margin-left: 0px;
    margin-right: 10px;
}

.settings-page .vip-clipart-settings-user,
.settings-page .vip-clipart-settings-store {
    width: 500px;
    height: 500px;
    margin-top: -50px;
}

.settings-page .settings-tab.account-subscription-info-promo h3 {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.settings-page .settings-tab.account-subscription-info-promo h2 {
    font-size: 36px;
    font-weight: 400;
    color: var(--color-text-primary);
    margin-bottom: 10px;
}

.settings-page .settings-tab.account-subscription-info-promo p {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.4em;
}

.settings-page .settings-tab.account-subscription-info-promo .features-table {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .settings-page .settings-tab.account-subscription-info-promo .features-table > * {
        display: table-row;
    }

        .settings-page .settings-tab.account-subscription-info-promo .features-table > * > * {
            display: table-cell;
            vertical-align: middle;
            padding-top: 10px;
            padding-bottom: 10px;
        }

            .settings-page .settings-tab.account-subscription-info-promo .features-table > * > *:first-child {
                width: 70px;
            }

    .settings-page .settings-tab.account-subscription-info-promo .features-table .marker {
        display: block;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #E6F4ED;
        border-radius: 50%;
    }

        .settings-page .settings-tab.account-subscription-info-promo .features-table .marker span {
            position: absolute;
            font-size: 24px;
            font-weight: 700;
            top: calc(50% - 12px);
            left: 0px;
            z-index: 1;
            display: block;
            width: 100%;
            text-align: center;
            color: var(--color-text-primary);
            line-height: 1em;
        }

    .settings-page .settings-tab.account-subscription-info-promo .features-table > * > *:last-child {
        font-size: 18px;
        font-weight: 700;
        color: var(--color-text-muted);
    }

.settings-page .settings-tab.account-subscription-info h3 {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-bottom: 30px;
}

.settings-page .settings-tab.account-subscription-info .billing-details {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 30px;
}

    .settings-page .settings-tab.account-subscription-info .billing-details tr th {
        text-transform: uppercase;
        font-weight: 500;
        color: var(--color-text-muted);
        font-size: 14px;
        border-top: 1px solid #DDDDDD;
        border-bottom: 1px solid #DDDDDD;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .settings-page .settings-tab.account-subscription-info .billing-details tr td {
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #DDDDDD;
        text-align: center;
        color: var(--color-text-basic);
        vertical-align: middle;
    }

        .settings-page .settings-tab.account-subscription-info .billing-details tr td .format-money {
            padding-right: 3px;
        }

        .settings-page .settings-tab.account-subscription-info .billing-details tr td a {
            display: block;
            width: 100%;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .settings-page .settings-tab.account-subscription-info .billing-details tr td p {
            display: block;
            width: 100%;
            padding-top: 5px;
            padding-bottom: 5px;
        }

    .settings-page .settings-tab.account-subscription-info .billing-details .invoice small,
    .settings-page .settings-tab.account-subscription-info .billing-details .amount small,
    .settings-page .settings-tab.account-subscription-info .billing-details .status small,
    .settings-page .settings-tab.account-subscription-info .billing-details .payment-method small {
        display: none;
    }

    .settings-page .settings-tab.account-subscription-info .billing-details .actions {
        margin-top: 10px;
    }

.settings-page .settings-tab.account-subscription-info .left-side h3,
.settings-page .settings-tab.account-subscription-info .right-side h3 {
    margin-bottom: 20px;
}

.settings-page .settings-tab.account-subscription-info .left-side p {
    margin-bottom: 20px;
}

.settings-page .settings-tab.account-subscription-info .subscription-panel {
    display: block;
    width: 100%;
    border-radius: var(--radius-12);
    background-color: #ffffff;
}

    .settings-page .settings-tab.account-subscription-info .subscription-panel + .subscription-panel {
        margin-top: 10px;
    }

    .settings-page .settings-tab.account-subscription-info .subscription-panel .panel-header {
        display: block;
        width: 100%;
        padding: 15px 15px 15px 15px;
    }

    .settings-page .settings-tab.account-subscription-info .subscription-panel h4 {
        font-size: 14px;
        color: var(--color-text-muted);
        font-weight: 700;
        text-transform: uppercase;
        display: inline-block;
        width: auto;
        margin-right: 10px;
    }

*[dir='rtl'] .settings-page .settings-tab.account-subscription-info .subscription-panel h4 {
    margin-right: 0px;
    margin-left: 10px;
}


.settings-page .settings-tab.account-subscription-info .subscription-panel a {
    text-transform: uppercase;
}

.settings-page .settings-tab.account-subscription-info .subscription-panel .collapser-btn {
    border: 2px solid var(--color-border-primary);
    border-radius: 50%;
    background-color: transparent;
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: 14px;
    position: absolute;
    z-index: 1;
    top: 11px;
    right: 14px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

*[dir='rtl'] .settings-page .settings-tab.account-subscription-info .subscription-panel .collapser-btn {
    left: 14px;
    right: auto;
}

.settings-page .settings-tab.account-subscription-info .subscription-panel .collapser-btn:hover {
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
}

.settings-page .settings-tab.account-subscription-info .subscription-panel .pazar-list {
    color: var(--color-text-muted);
}

.settings-page .settings-tab.account-subscription-info .subscription-panel .panel-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
}

.settings-page .settings-tab.account-subscription-info .subscription-panel .counters {
    display: table;
    table-layout: fixed;
    width: 100%;
}

    .settings-page .settings-tab.account-subscription-info .subscription-panel .counters > * {
        display: table-row;
    }

        .settings-page .settings-tab.account-subscription-info .subscription-panel .counters > * > * {
            display: table-cell;
            text-align: center;
            position: relative;
            padding-bottom: 30px;
            padding-top: 5px;
            vertical-align: middle;
        }


            .settings-page .settings-tab.account-subscription-info .subscription-panel .counters > * > * + * {
                border-left: 1px solid #F2F2F2;
            }

*[dir='rtl'] .settings-page .settings-tab.account-subscription-info .subscription-panel .counters > * > * + * {
    border-left: 0px none transparent;
    border-right: 1px solid #F2F2F2;
}

.settings-page .settings-tab.account-subscription-info .subscription-panel .counters small {
    display: block;
    width: 100%;
    color: var(--color-text-muted);
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    left: 0px;
    bottom: 10px;
}

.settings-page .settings-tab.account-subscription-info .subscription-panel .counters .plan span {
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.settings-page .settings-tab.account-subscription-info .subscription-panel .counters .days {
    font-size: 36px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.settings-page .settings-tab.account-subscription-info .subscription-panel .counters .status .text-label.active {
    color: #FFFFFF;
    background-color: var(--color-bg-primary);
}

.settings-page .settings-tab.account-subscription-info .subscription-panel .counters small i {
    display: none;
    font-style: normal;
}

.settings-page .settings-tab .notification {
    width: 100%;
    padding: 20px 20px 20px 20px;
    border-radius: var(--radius-4);
    margin-bottom: 20px;
}

    .settings-page .settings-tab .notification.danger {
        background-color: #FBCFCF;
    }

    .settings-page .settings-tab .notification.warning {
        background-color: #FFF9C5;
    }

    .settings-page .settings-tab .notification h5 {
        font-weight: 700;
        font-size: 14px;
        text-transform: uppercase;
        display: block;
        margin-bottom: 15px;
    }

    .settings-page .settings-tab .notification.danger h5 {
        color: var(--color-text-danger);
    }

    .settings-page .settings-tab .notification.warning h5 {
        color: #F6AD3F;
    }

    .settings-page .settings-tab .notification p {
        color: var(--color-text-basic);
    }

    .settings-page .settings-tab .notification .controls {
        text-align: right;
        margin-top: 15px;
    }

*[dir='rtl'] .settings-page .settings-tab .notification .controls {
    text-align: left;
}

.settings-page .settings-tab .notification .controls .btn-link {
    padding: 0px;
}

.settings-page .settings-tab .autorenew-table {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    margin-bottom: 30px;
}

    .settings-page .settings-tab .autorenew-table > * {
        display: table-row;
    }

        .settings-page .settings-tab .autorenew-table > * > * {
            display: table-cell;
            padding-top: 10px;
            padding-bottom: 10px;
        }

            .settings-page .settings-tab .autorenew-table > * > *:nth-child(3),
            .settings-page .settings-tab .autorenew-table > * > *:nth-child(4) {
                width: 90px;
            }

            .settings-page .settings-tab .autorenew-table > * > * small {
                display: block;
                width: 100%;
                font-size: 14px;
                font-weight: 400;
                color: var(--color-text-muted);
                margin-bottom: 10px;
            }

            .settings-page .settings-tab .autorenew-table > * > * span {
                display: block;
                width: 100%;
                font-size: 14px;
                font-weight: 700;
                color: var(--color-text-basic);
            }

    .settings-page .settings-tab .autorenew-table bdi span {
        width: auto;
        display: inline-block;
    }

        .settings-page .settings-tab .autorenew-table bdi span + span {
            padding-left: 5px;
        }


.settings-page .select .add-new {
    text-align: center;
    color: var(--color-text-primary) !important;
    font-weight: 700;
    text-transform: uppercase;
    padding-top: 20px;
    padding-bottom: 20px;
}

.settings-page .select .options-list {
    max-height: 240px;
}

.settings-page .payment-method-area .error-block,
.settings-page .payment-method-area .information-block {
    position: relative;
    width: 100%;
    margin: 20px auto 0px auto;
}

    .settings-page .payment-method-area .error-block p,
    .settings-page .payment-method-area .information-block p {
        margin: 0px;
        padding: 0px 0px 0px 35px;
        text-align: left;
    }

*[dir='rtl'] .settings-page .payment-method-area .error-block p,
*[dir='rtl'] .settings-page .payment-method-area .information-block p {
    padding: 0px 35px 0px 0px;
    text-align: right;
}

.settings-page .payment-method-area .error-block .icon {
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-bg-danger);
    color: #ffffff;
    top: 2px;
    left: 0px;
}

.settings-page .payment-method-area .information-block .icon {
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-bg-warning);
    color: var(--color-text-basic);
    top: 2px;
    left: 0px;
}

*[dir='rtl'] .settings-page .payment-method-area .error-block .icon,
*[dir='rtl'] .settings-page .payment-method-area .information-block .icon {
    right: 0px;
    left: auto;
}

.settings-page .payment-method-area .error-block .icon i,
.settings-page .payment-method-area .information-block .icon i {
    font-size: 18px;
    font-weight: 700;
    width: 100%;
    text-align: center;
    font-style: normal;
    padding-top: 1px;
    display: inline-block;
}

@media (max-width: 1199px) {
    .settings-page .vip-clipart-settings-user,
    .settings-page .vip-clipart-settings-store {
        width: 400px;
        height: 400px;
        margin-top: -50px;
    }
}


@media (max-width: 991px) {
    .settings-page .settings-tab.account-subscription-info-promo h3 {
        margin-top: -30px;
    }

    .settings-page .settings-tab.account-subscription-info-promo .features-table {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .settings-page .settings-tab.account-subscription-info .billing-details {
        width: 100%;
        display: block;
    }

        .settings-page .settings-tab.account-subscription-info .billing-details tbody,
        .settings-page .settings-tab.account-subscription-info .billing-details td {
            display: block;
            box-sizing: border-box;
        }

        .settings-page .settings-tab.account-subscription-info .billing-details tr {
            width: 100%;
            display: block;
            border: 1px solid #DDDDDD;
            border-radius: var(--radius-12);
            position: relative;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 70px;
            padding-bottom: 15px;
            margin-bottom: 10px;
        }


            .settings-page .settings-tab.account-subscription-info .billing-details th,
            .settings-page .settings-tab.account-subscription-info .billing-details tr:first-child {
                display: none;
            }

            .settings-page .settings-tab.account-subscription-info .billing-details tr td {
                border-bottom: 0px none transparent;
                text-align: left;
            }

        .settings-page .settings-tab.account-subscription-info .billing-details .amount,
        .settings-page .settings-tab.account-subscription-info .billing-details .status,
        .settings-page .settings-tab.account-subscription-info .billing-details .payment-method {
            padding-top: 5px;
            padding-bottom: 5px;
            font-size: 0px;
        }

        .settings-page .settings-tab.account-subscription-info .billing-details .date {
            position: absolute;
            top: 0px;
            right: 15px;
        }

    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .date {
        left: 15px;
        right: auto;
    }


    .settings-page .settings-tab.account-subscription-info .billing-details .invoice {
        position: absolute;
        top: 0px;
        left: 15px;
    }

    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .invoice {
        right: 15px;
        left: auto;
    }

    .settings-page .settings-tab.account-subscription-info .billing-details .invoice small {
        display: inline-block;
        color: var(--color-text-muted);
        margin-right: 5px;
    }

    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .invoice small {
        margin-left: 5px;
        margin-right: 0px;
    }

    .settings-page .settings-tab.account-subscription-info .billing-details .invoice span {
        color: var(--color-text-basic);
    }

    .settings-page .settings-tab.account-subscription-info .billing-details .download {
        position: absolute;
        top: 20px;
        left: 15px;
    }

    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .download {
        right: 15px;
        left: auto;
    }

    .settings-page .settings-tab.account-subscription-info .billing-details .status {
        text-align: left;
    }

    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .status {
        text-align: right;
    }

    .settings-page .settings-tab.account-subscription-info .billing-details .amount small,
    .settings-page .settings-tab.account-subscription-info .billing-details .status small,
    .settings-page .settings-tab.account-subscription-info .billing-details .payment-method small {
        color: var(--color-text-muted);
        display: inline-block;
        width: 200px;
        text-align: right;
        padding-right: 20px;
        font-size: 14px;
    }

    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .amount small,
    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .status small,
    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .payment-method small {
        text-align: left;
        padding-left: 20px;
        padding-right: 0px;
    }

    .settings-page .settings-tab.account-subscription-info .billing-details .amount bdi,
    .settings-page .settings-tab.account-subscription-info .billing-details .payment-method span {
        display: inline-block;
        width: calc(100% - 200px);
        text-align: left;
        font-weight: 700;
        font-size: 14px;
    }

    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .amount bdi,
    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .payment-method span {
        text-align: right;
    }

    .settings-page .settings-tab.account-subscription-info .billing-details .actions {
        font-size: 14px;
        border-top: 1px solid #DDDDDD;
        margin-top: 20px;
        padding-top: 15px;
        display: block;
        text-align: left;
    }

    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .actions {
        text-align: right;
    }

    .settings-page .settings-tab.account-subscription-info .billing-details .actions a,
    .settings-page .settings-tab.account-subscription-info .billing-details .actions p {
        display: inline-block;
        width: auto;
        margin-right: 5px;
    }

    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .actions a,
    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .actions p {
        margin-left: 5px;
        margin-right: 0px;
    }

    .settings-page .settings-tab.account-subscription-info .billing-details .invoice small b {
        font-weight: 400;
    }

    .settings-page .settings-tab.account-subscription-info .right-side h3 {
        margin-top: 40px;
    }
}

@media (max-width: 550px) {
    .settings-page .vip-clipart-settings-user,
    .settings-page .vip-clipart-settings-store {
        width: 300px;
        height: 300px;
        margin-top: -50px;
    }

    .settings-page .settings-tab.account-subscription-info .subscription-panel .counters .plan span {
        font-size: 14px;
    }

    .settings-page .settings-tab.account-subscription-info-promo h2 {
        font-size: 24px;
    }

    .settings-page .settings-tab.account-subscription-info-promo .features-table > * > *:last-child {
        font-size: 14px;
    }
}

@media (max-width: 500px) {
    .settings-page .settings-tab.account-subscription-info .billing-details .amount,
    .settings-page .settings-tab.account-subscription-info .billing-details .payment-method {
        text-align: left;
    }

    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .amount,
    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .payment-method {
        text-align: right;
    }

        .settings-page .settings-tab.account-subscription-info .billing-details .amount small,
        .settings-page .settings-tab.account-subscription-info .billing-details .status small,
        .settings-page .settings-tab.account-subscription-info .billing-details .payment-method small,
        *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .amount small,
        *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .status small,
        *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .payment-method small {
            display: inline-block;
            width: auto;
        }

    .settings-page .settings-tab.account-subscription-info .billing-details .amount small,
    .settings-page .settings-tab.account-subscription-info .billing-details .status small,
    .settings-page .settings-tab.account-subscription-info .billing-details .payment-method small {
        padding-right: 8px;
    }

    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .amount small,
    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .status small,
    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .payment-method small {
        padding-right: 0px;
        padding-left: 8px;
    }

    .settings-page .settings-tab.account-subscription-info .billing-details .amount bdi,
    .settings-page .settings-tab.account-subscription-info .billing-details .payment-method span,
    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .amount bdi,
    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .billing-details .payment-method span {
        display: inline-block;
        width: auto;
    }

    .settings-page .settings-tab.account-subscription-info .billing-details .amount {
        display: block;
        width: 100%;
        border-top: 1px solid #DDDDDD;
        padding-top: 15px;
        margin-top: 5px;
    }

    .settings-page .settings-tab .autorenew-table,
    .settings-page .settings-tab .autorenew-table > *,
    .settings-page .settings-tab .autorenew-table > * > * {
        display: block;
        width: 100% !important;
        padding-top: 5px;
        padding-bottom: 5px;
    }

        .settings-page .settings-tab .autorenew-table small,
        .settings-page .settings-tab .autorenew-table span {
            display: inline-block;
            width: auto;
            margin-bottom: 0px;
            padding-bottom: 0px;
        }

        .settings-page .settings-tab .autorenew-table small {
            margin-right: 5px;
        }

    *[dir='rtl'] .settings-page .settings-tab .autorenew-table small {
        margin-right: 0px;
        margin-left: 5px;
    }

    .settings-page .settings-tab.account-subscription-info-promo .features-table .marker {
        width: 32px;
        height: 32px;
    }

        .settings-page .settings-tab.account-subscription-info-promo .features-table .marker span {
            font-size: 14px;
            top: calc(50% - 7px);
        }

    .settings-page .settings-tab.account-subscription-info-promo .features-table > * > *:first-child {
        width: 45px;
    }


    .settings-page .settings-tab.account-subscription-info-promo .new-btn.btn-default,
    .settings-page .settings-tab.account-subscription-info-promo .new-btn.btn-primary {
        display: block;
        margin-top: 5px;
        width: 100%;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

@media (max-width: 450px) {
    .settings-page .settings-tab.account-subscription-info h3 {
        text-align: center;
    }

    .settings-page .settings-tab.account-subscription-info .tab-content {
        padding-top: 20px;
        padding-bottom: 30px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .settings-page .settings-tab.account-subscription-info-promo .tab-content {
        padding-top: 20px;
        padding-bottom: 30px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 400px) {
    .settings-page .settings-tab.account-subscription-info .subscription-panel h4 span {
        display: none;
    }

    .settings-page .settings-tab.account-subscription-info .subscription-panel .counters,
    .settings-page .settings-tab.account-subscription-info .subscription-panel .counters > *,
    .settings-page .settings-tab.account-subscription-info .subscription-panel .counters > * > * {
        display: block;
        width: 100%;
        text-align: left;
    }

    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .subscription-panel .counters,
    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .subscription-panel .counters > *,
    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .subscription-panel .counters > * > * {
        text-align: right;
    }


    .settings-page .settings-tab.account-subscription-info .subscription-panel .counters > * > * + * {
        border-left: 0px none transparent;
    }

    .settings-page .settings-tab.account-subscription-info .subscription-panel .counters > * > * {
        padding-top: 5px;
        padding-bottom: 5px;
    }


    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .subscription-panel .counters > * > * + * {
        border-left: 0px none transparent;
        border-right: 0px none transparent;
    }

    .settings-page .settings-tab.account-subscription-info .subscription-panel .counters small {
        display: inline-block;
        width: auto;
        color: var(--color-text-muted);
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        text-transform: none;
        position: relative;
        left: auto;
        bottom: auto;
        margin-right: 8px;
    }

    *[dir='rtl'] .settings-page .settings-tab.account-subscription-info .subscription-panel .counters small {
        margin-right: 0px;
        margin-left: 8px;
    }

    .settings-page .settings-tab.account-subscription-info .subscription-panel .counters small i {
        display: inline-block;
    }

    .settings-page .settings-tab.account-subscription-info .subscription-panel .counters .days {
        font-size: 14px;
        font-weight: 400;
    }

        .settings-page .settings-tab.account-subscription-info .subscription-panel .counters .plan span,
        .settings-page .settings-tab.account-subscription-info .subscription-panel .counters .days span {
            color: var(--color-text-basic);
            font-weight: 700;
            display: inline-block;
            width: auto;
        }

    .settings-page .vip-clipart-settings-user,
    .settings-page .vip-clipart-settings-store {
        width: 250px;
        height: 250px;
        margin-top: -50px;
    }
}

@media (max-width: 380px) {
    .settings-page .settings-tab.account-subscription-info .billing-details .invoice small b {
        display: none;
    }
}

@media (max-width: 310px) {
    .settings-page .vip-clipart-settings-user,
    .settings-page .vip-clipart-settings-store {
        width: 180px;
        height: 180px;
        margin-top: -30px;
        margin-bottom: 20px;
    }
}
/* #endregion ------------------ Settings ----------------------------- */
/* #region ----------------------- VIP Promotion ---------------------- */

.vip-promotion-page .new-btn:hover {
    opacity: 0.8 !important;
    transition: 0.2s ease !important;
}
/* #region Banner */
.vip-promotion-page .banner {
    position: relative;
    min-height: 600px;
    background: url('../../Content/Images/VIP/PromotionHeader/clipart-background.svg') repeat-x center bottom #FFFBD6;
    background-size: contain;
    overflow: hidden;
}

.vip-promotion-page .clouds {
    position: absolute;
    z-index: 1;
    width: 10000%;
    height: 70%;
    background: url('../../Content/Images/VIP/PromotionHeader/clipart-clouds.svg') repeat-x center center transparent;
    background-size: contain;
    animation: clipart-vip-banner-clouds 5000s linear infinite;
}


.vip-promotion-page .front-layer {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: url('../../Content/Images/VIP/PromotionHeader/clipart-front-layer.svg') no-repeat center bottom transparent;
    background-size: contain;
}

@keyframes clipart-vip-banner-clouds {
    from {
        background-position-x: 0%;
    }

    to {
        background-position-x: -90%;
    }
}

.vip-promotion-page .promo-page-menu {
    position: absolute;
    text-align: center;
    display: block;
    list-style: none;
    z-index: 1;
    font-size: 0px;
    width: 100%;
    margin-top: 10px;
}

    .vip-promotion-page .promo-page-menu li {
        display: inline;
        font-size: 14px;
        font-weight: 500;
    }

        .vip-promotion-page .promo-page-menu li a {
            display: inline-block;
            text-decoration: none;
            text-transform: uppercase;
            padding: 30px 20px 30px 20px;
            color: rgba(33, 37, 41, 1);
        }

            .vip-promotion-page .promo-page-menu li a:hover {
                color: var(--color-text-danger);
                opacity: 1;
                transition: color 0.3s ease;
            }

.vip-promotion-page .banner .content {
    position: absolute;
    width: 800px;
    top: 32%;
    left: calc(50% - 400px);
    text-align: center;
    z-index: 1;
}

.vip-promotion-page .banner h1 {
    font-weight: 800;
    font-size: 48px;
    line-height: 48px;
    text-transform: uppercase;
    margin-bottom: 40px;
}

@media (max-width: 1399px) {
    .vip-promotion-page .front-layer {
        position: absolute;
        z-index: 1;
        width: 200%;
        height: 100%;
        left: -50%;
        background: url('../../Content/Images/VIP/PromotionHeader/clipart-front-layer.svg') no-repeat center bottom transparent;
        background-size: contain;
    }

    .vip-promotion-page .banner {
        position: relative;
        min-height: 600px;
        background: url('../../Content/Images/VIP/PromotionHeader/clipart-background.svg') repeat-x center bottom #FFFBD6;
        background-size: 150% auto;
        overflow: hidden;
    }
}

@media (max-width: 991px) {
    .vip-promotion-page .banner .content {
        width: 600px;
        top: 32%;
        left: calc(50% - 300px);
    }
}

@media (max-width: 700px) {
    .vip-promotion-page .banner .content {
        width: 100%;
        padding-left: 80px;
        padding-right: 80px;
        top: 30%;
        left: 0px;
    }

    .vip-promotion-page .banner h1 {
        font-size: 36px;
        line-height: 38px;
    }

    .vip-promotion-page .promo-page-menu {
        display: none;
    }
}

@media (max-width: 600px) {
    .vip-promotion-page .banner {
        min-height: 400px;
    }

    .vip-promotion-page .front-layer {
        position: absolute;
        z-index: 1;
        width: 300%;
        height: 100%;
        left: -100%;
        background: url('../../Content/Images/VIP/PromotionHeader/clipart-front-layer.svg') no-repeat center bottom transparent;
        background-size: contain;
    }

    .vip-promotion-page .banner h1 {
        font-size: 24px;
        line-height: 26px;
    }

    .vip-promotion-page .clouds {
        top: -30px;
    }
}

@media (max-width: 500px) {
    .vip-promotion-page .banner .content {
        padding-left: 30px;
        padding-right: 30px;
        top: 30%;
    }
}

@media (max-width: 400px) {
    .vip-promotion-page .banner .content {
        padding-left: 30px;
        padding-right: 30px;
        top: 25%;
    }
}
/* #endregion Banner */
/* #region Benefits */
.vip-promotion-page .benefits {
    padding-top: 70px;
    padding-bottom: 60px;
    background-color: #FFFFFF;
}

    .vip-promotion-page .benefits h2 {
        font-size: 36px;
        text-transform: uppercase;
        font-weight: 800;
        padding-bottom: 10px;
    }

    .vip-promotion-page .benefits .benefit-item {
        display: block;
        width: 33%;
        float: left;
        padding: 20px 40px 40px 40px;
    }

        .vip-promotion-page .benefits .benefit-item .clipart {
            width: 180px;
            height: 180px;
            margin: 0px auto 0px auto;
        }

        .vip-promotion-page .benefits .benefit-item h3 {
            font-size: 20px;
            line-height: 26px;
            font-weight: 800;
            padding-bottom: 10px;
        }

        .vip-promotion-page .benefits .benefit-item p {
            font-size: 14px;
            line-height: 21px;
            font-weight: 400;
        }

@media (max-width: 991px) {
    .vip-promotion-page .benefits .benefit-item {
        width: 50%;
        float: left;
        display: block;
        height: 380px;
    }

    .vip-promotion-page .benefits h2 {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .vip-promotion-page .benefits .benefit-item {
        width: 100%;
        float: none;
        display: block;
        height: auto;
    }
}

@media (max-width: 420px) {

    .vip-promotion-page .benefits h2 {
        font-size: 20px;
    }

    .vip-promotion-page .benefits .benefit-item h3 {
        font-size: 16px;
    }

    .vip-promotion-page .benefits .benefit-item {
        padding: 20px 20px 20px 20px;
    }
}

/* #endregion Benefits */
/* #region Goals */
.vip-promotion-page .goals {
    padding-top: 90px;
    padding-bottom: 60px;
    background-color: rgba(249, 249, 249, 1);
}

    .vip-promotion-page .goals h2 {
        font-size: 36px;
        text-transform: uppercase;
        font-weight: 800;
        padding-bottom: 10px;
    }

    .vip-promotion-page .goals .left-side {
        display: block;
        width: 50%;
        float: left;
        padding-top: 40px;
    }

*[dir='rtl'] .vip-promotion-page .goals .left-side {
    float: right;
}

.vip-promotion-page .goals .right-side {
    display: block;
    width: 50%;
    float: right;
}

*[dir='rtl'] .vip-promotion-page .goals .right-side {
    float: left;
}

.vip-promotion-page .goals p {
    font-size: 20px;
    line-height: 26px;
    padding-bottom: 30px;
}

@media (max-width:991px) {
    .vip-promotion-page .goals {
        padding-top: 70px;
        padding-bottom: 50px;
    }

        .vip-promotion-page .goals h2 {
            font-size: 24px;
        }

        .vip-promotion-page .goals .vip-clipart-settings-user {
            width: 350px;
            height: 350px;
            margin: 0px auto;
        }

        .vip-promotion-page .goals p {
            font-size: 14px;
            line-height: 21px;
            padding-bottom: 30px;
        }

        .vip-promotion-page .goals .right-side {
            padding-left: 30px;
        }

    *[dir='rtl'] .vip-promotion-page .goals .right-side {
        padding-left: 0px;
        padding-right: 30px;
    }
}

@media (max-width: 800px) {
    .vip-promotion-page .goals .left-side,
    .vip-promotion-page .goals .right-side,
    *[dir='rtl'] .vip-promotion-page .goals .left-side,
    *[dir='rtl'] .vip-promotion-page .goals .right-side {
        display: block;
        width: 100%;
        float: none;
        padding-left: 0px;
        padding-right: 0px;
    }

    .vip-promotion-page .goals .left-side {
        padding-top: 0px;
    }

    .vip-promotion-page .goals p {
        padding-bottom: 30px;
    }
}

@media (max-width: 600px) {
    .vip-promotion-page .goals p {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 420px) {
    .vip-promotion-page .goals h2 {
        font-size: 20px;
    }

    .vip-promotion-page .goals {
        padding-top: 50px;
        padding-bottom: 70px;
    }

        .vip-promotion-page .goals .vip-clipart-settings-user {
            width: 250px;
            height: 250px;
        }
}
/* #endregion Goals */
/* #region How does it work */
.vip-promotion-page .how-it-works {
    padding-top: 90px;
    padding-bottom: 60px;
    background-color: #FFFFFF;
}

    .vip-promotion-page .how-it-works h2 {
        font-size: 36px;
        text-transform: uppercase;
        font-weight: 800;
        padding-bottom: 10px;
    }

    .vip-promotion-page .how-it-works .left-side {
        display: block;
        width: 50%;
        float: left;
    }

    .vip-promotion-page .how-it-works .right-side {
        display: block;
        width: 50%;
        float: right;
        padding-left: 40px;
    }

*[dir='rtl'] .vip-promotion-page .how-it-works .left-side {
    float: right;
}

*[dir='rtl'] .vip-promotion-page .how-it-works .right-side {
    float: left;
    padding-left: 0px;
    padding-right: 40px;
}

.vip-promotion-page .how-it-works p {
    font-size: 20px;
    line-height: 26px;
    padding-top: 50px;
    padding-bottom: 30px;
}

@media (max-width: 991px) {
    .vip-promotion-page .how-it-works {
        padding-top: 70px;
        padding-bottom: 50px;
        background-color: #FFFFFF;
    }

        .vip-promotion-page .how-it-works .vip-clipart-plan-selection {
            width: 350px;
            height: 350px;
        }

        .vip-promotion-page .how-it-works h2 {
            font-size: 24px;
        }

        .vip-promotion-page .how-it-works p {
            font-size: 14px;
            line-height: 21px;
            padding-top: 50px;
            padding-bottom: 30px;
        }
}

@media (max-width: 800px) {
    .vip-promotion-page .how-it-works {
        padding-top: 70px;
        padding-bottom: 90px;
        background-color: #FFFFFF;
    }

        .vip-promotion-page .how-it-works .left-side,
        .vip-promotion-page .how-it-works .right-side,
        *[dir='rtl'] .vip-promotion-page .how-it-works .left-side,
        *[dir='rtl'] .vip-promotion-page .how-it-works .right-side {
            display: block;
            width: 100%;
            float: none;
            text-align: center;
            padding-left: 0px;
            padding-right: 0px;
        }

        .vip-promotion-page .how-it-works p {
            padding-top: 0px;
        }
}

@media (max-width: 600px) {
    .vip-promotion-page .how-it-works p {
        padding-right: 30px;
        padding-left: 30px;
        text-align: left;
    }

    *[dir='rtl'] .vip-promotion-page .how-it-works p {
        text-align: right;
    }
}


@media (max-width: 480px) {
    .vip-promotion-page .how-it-works .vip-clipart-plan-selection {
        width: 250px;
        height: 250px;
    }

    .vip-promotion-page .how-it-works {
        padding-top: 50px;
        padding-bottom: 70px;
        background-color: #FFFFFF;
    }

        .vip-promotion-page .how-it-works h2 {
            font-size: 20px;
        }
}
/* #endregion How does it work */
/* #region FAQ */
.vip-promotion-page .faq {
    padding-top: 90px;
    padding-bottom: 110px;
    background-color: rgba(249, 249, 249, 1);
}

    .vip-promotion-page .faq h2 {
        font-size: 36px;
        text-transform: uppercase;
        font-weight: 800;
        padding-bottom: 10px;
    }

    .vip-promotion-page .faq h3 {
        font-size: 24px;
        font-weight: 400;
        padding-bottom: 30px;
    }

.vip-promotion-page .content-container {
    width: 750px;
    margin: 0px auto 0px auto;
}

.vip-promotion-page .faq .collapser-btn {
    display: block;
    width: 100%;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    padding: 20px 50px 20px 0px;
}

    .vip-promotion-page .faq .collapser-btn span {
        font-size: 20px;
        font-weight: 700;
    }

.vip-promotion-page .faq .collapser.collapsed .collapser-btn .ci-pazar-small {
    transform: rotate(180deg);
}

.vip-promotion-page .faq .collapser-btn .ci-pazar-small {
    font-size: 14px;
    position: absolute;
    top: calc(50% - 7px);
    right: 0px;
}

.collapser.collapsed .collapser-content {
    height: 0px;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.1s ease, opacity 0.1s ease;
}

.vip-promotion-page .faq .collapser-content span {
    font-size: 16px;
    color: var(--color-text-muted);
    font-weight: 400;
    padding: 0px 60px 10px 60px;
    display: block;
    width: 100%;
}

.vip-promotion-page .faq .collapser + .collapser {
    border-top: 1px solid #F2F2F2;
}

@media (max-width: 991px) {
    .vip-promotion-page .faq {
        padding-top: 70px;
        padding-bottom: 80px;
    }

        .vip-promotion-page .faq h2 {
            font-size: 24px;
        }

        .vip-promotion-page .faq h3 {
            font-size: 14px;
        }

    .vip-promotion-page .content-container {
        width: 500px;
        margin: 0px auto 0px auto;
    }

    .vip-promotion-page .faq .collapser-btn span {
        font-size: 14px;
    }

    .vip-promotion-page .faq .collapser-content span {
        font-size: 14px;
        padding: 0px 30px 10px 30px;
    }
}

@media (max-width: 600px) {
    .vip-promotion-page .content-container {
        width: 100%;
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media (max-width: 500px) {
    .vip-promotion-page .content-container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 420px) {
    .vip-promotion-page .faq {
        padding-top: 50px;
        padding-bottom: 60px;
    }

        .vip-promotion-page .faq h2 {
            font-size: 20px;
        }

        .vip-promotion-page .faq h3 {
            font-size: 12px;
        }
}
/* #endregion FAQ */
/* #region Footer */
.vip-promotion-page .content-footer {
    padding-bottom: 110px;
    padding-top: 60px;
    background-color: #FFFFFF;
}

    .vip-promotion-page .content-footer .vip-clipart-medalman {
        width: 210px;
        height: 210px;
    }

    .vip-promotion-page .content-footer h2 {
        font-size: 36px;
        text-transform: uppercase;
        font-weight: 800;
        padding-bottom: 10px;
    }

    .vip-promotion-page .content-footer p {
        font-size: 18px;
        font-weight: 400;
        padding-bottom: 30px;
    }

@media (max-width: 991px) {
    .vip-promotion-page .content-footer h2 {
        font-size: 24px;
    }

    .vip-promotion-page .content-footer p {
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .vip-promotion-page .content-footer {
        padding-top: 20px;
        padding-bottom: 80px;
    }

        .vip-promotion-page .content-footer h2 {
            font-size: 20px;
        }

        .vip-promotion-page .content-footer p {
            font-size: 12px;
        }

        .vip-promotion-page .content-footer .vip-clipart-medalman {
            width: 150px;
            height: 150px;
        }
}

/* #endregion Footer */
/* #endregion ------------------- /VIP Promotion ---------------------- */
/* #region ------------------------- Banners -------------------------- */
/* #region Billboard */
.vip-banner.billboard {
    width: 970px;
    height: 250px;
    overflow: hidden;
    border-radius: var(--radius-4);
    background-color: #FFFBD6;
    display: block;
}

    .vip-banner.billboard .bg-clouds {
        position: absolute;
        z-index: 1;
        top: 0px;
        left: 0px;
        display: block;
        width: 5970px;
        height: 250px;
        background: url("../../Content/Images/VIP/Banners/bg-clouds-1.svg") repeat-x center center transparent;
        background-size: contain;
        animation: vip-banner-bg-clouds 200s linear infinite;
    }

    .vip-banner.billboard .vip-clipart-thumbsup {
        z-index: 4;
        display: block;
        position: absolute;
        width: 248px;
        height: 248px;
        top: 20px;
        left: 0px;
    }

    .vip-banner.billboard .vip-clipart-medalstore {
        z-index: 4;
        display: block;
        position: absolute;
        width: 300px;
        height: 300px;
        top: -18px;
        right: -20px;
    }

@keyframes vip-banner-bg-clouds {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    1% {
        opacity: 1;
    }

    99% {
        opacity: 1;
    }

    99.9% {
        opacity: 0;
        transform: translateX(-5000px);
    }

    100% {
        opacity: 0;
        transform: translateX(0px);
    }
}

.vip-banner.billboard .bg {
    display: block;
    width: 970px;
    height: 250px;
    background: url("../../Content/Images/VIP/Banners/bg-1.svg") repeat-x center center transparent;
    background-size: contain;
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
}

.vip-banner.billboard .overlay {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
}

.vip-banner.billboard .cloud-block-1 {
    display: block;
    position: absolute;
    width: 400px;
    height: 400px;
    top: -73px;
    left: -70px;
    z-index: 3;
}

    .vip-banner.billboard .cloud-block-1 .cloud-1,
    .vip-banner.billboard .cloud-block-1 .cloud-2,
    .vip-banner.billboard .cloud-block-1 .cloud-3,
    .vip-banner.billboard .cloud-block-1 .cloud-4,
    .vip-banner.billboard .cloud-block-1 .cloud-5,
    .vip-banner.billboard .cloud-block-1 .cloud-6,
    .vip-banner.billboard .cloud-block-1 .cloud-7,
    .vip-banner.billboard .cloud-block-1 .cloud-8 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #FFFBD6;
    }

    .vip-banner.billboard .cloud-block-1 .cloud-1 {
        width: 45%;
        height: 45%;
        top: 26%;
        left: 55%;
        animation: vip-banner-billboard-cloud-1-1 1.6s ease-in-out infinite alternate;
    }

    .vip-banner.billboard .cloud-block-1 .cloud-2 {
        width: 35%;
        height: 35%;
        top: 5%;
        left: 50%;
        animation: vip-banner-billboard-cloud-1-2 1.2s ease-in-out infinite alternate;
    }

    .vip-banner.billboard .cloud-block-1 .cloud-3 {
        width: 35%;
        height: 35%;
        top: 60%;
        left: 50%;
        animation: vip-banner-billboard-cloud-1-3 1.4s ease-in-out infinite alternate;
    }

    .vip-banner.billboard .cloud-block-1 .cloud-4 {
        width: 30%;
        height: 30%;
        top: 70%;
        left: 29%;
    }

    .vip-banner.billboard .cloud-block-1 .cloud-5 {
        width: 30%;
        height: 30%;
        top: 0%;
        left: 29%;
    }

    .vip-banner.billboard .cloud-block-1 .cloud-6 {
        width: 80%;
        height: 80%;
        top: 11%;
        left: 0%;
    }

@keyframes vip-banner-billboard-cloud-1-1 {
    from {
        transform: translate(-5%, 0%);
    }

    to {
        transform: translate(5%, 0%);
    }
}

@keyframes vip-banner-billboard-cloud-1-2 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@keyframes vip-banner-billboard-cloud-1-3 {
    from {
        transform: translate(4%, 4%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

.vip-banner.billboard .cloud-block-2 {
    display: block;
    position: absolute;
    width: 400px;
    height: 400px;
    top: -70px;
    left: 660px;
    z-index: 3;
}

    .vip-banner.billboard .cloud-block-2 .cloud-1,
    .vip-banner.billboard .cloud-block-2 .cloud-2,
    .vip-banner.billboard .cloud-block-2 .cloud-3,
    .vip-banner.billboard .cloud-block-2 .cloud-4,
    .vip-banner.billboard .cloud-block-2 .cloud-5,
    .vip-banner.billboard .cloud-block-2 .cloud-6,
    .vip-banner.billboard .cloud-block-2 .cloud-7,
    .vip-banner.billboard .cloud-block-2 .cloud-8 {
        display: block;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        background-color: #FFFBD6;
    }

    .vip-banner.billboard .cloud-block-2 .cloud-1 {
        width: 45%;
        height: 45%;
        top: 26%;
        left: 0%;
        animation: vip-banner-billboard-cloud-2-1 1.5s ease-in-out infinite alternate;
    }

    .vip-banner.billboard .cloud-block-2 .cloud-2 {
        width: 32%;
        height: 32%;
        top: 9%;
        left: 10%;
        animation: vip-banner-billboard-cloud-2-2 1.4s ease-in-out infinite alternate;
    }

    .vip-banner.billboard .cloud-block-2 .cloud-3 {
        width: 32%;
        height: 32%;
        top: 58%;
        left: 10%;
        animation: vip-banner-billboard-cloud-2-3 1.6s ease-in-out infinite alternate;
    }

    .vip-banner.billboard .cloud-block-2 .cloud-4 {
        width: 40%;
        height: 40%;
        top: 0%;
        left: 30%;
    }

    .vip-banner.billboard .cloud-block-2 .cloud-5 {
        width: 40%;
        height: 40%;
        top: 60%;
        left: 30%;
    }

    .vip-banner.billboard .cloud-block-2 .cloud-6 {
        width: 70%;
        height: 70%;
        top: 14%;
        left: 30%;
    }

@keyframes vip-banner-billboard-cloud-2-1 {
    from {
        transform: translate(5%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

@keyframes vip-banner-billboard-cloud-2-2 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes vip-banner-billboard-cloud-2-3 {
    from {
        transform: translate(-4%, 4%);
    }

    to {
        transform: translate(4%, -4%);
    }
}

.vip-banner.billboard .content {
    display: table;
    width: 100%;
    height: 250px;
    table-layout: fixed;
    position: absolute;
    z-index: 5;
}

    .vip-banner.billboard .content > * {
        display: table-row;
    }

        .vip-banner.billboard .content > * > * {
            display: table-cell;
            vertical-align: middle;
        }

    .vip-banner.billboard .content .slogan {
        display: block;
        width: 100%;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--color-text-muted);
        font-size: 21px;
        margin-bottom: 20px;
    }
/* #endregion Billboard */
/* #region Leaderboard */
.vip-banner.leaderboard {
    width: 728px;
    height: 90px;
    overflow: hidden;
    border-radius: var(--radius-4);
    background-color: #FFFBD6;
    display: block;
}

    .vip-banner.leaderboard .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        background: rgba(0, 0, 0, 0.05);
        top: 0px;
        left: 0px;
    }

    .vip-banner.leaderboard .cloud-block {
        display: block;
        position: absolute;
        width: 350px;
        height: 350px;
        top: -129px;
        left: -60px;
        z-index: 3;
    }

*[dir='rtl'] .vip-banner.leaderboard .cloud-block {
    right: -60px;
    left: auto;
}

.vip-banner.leaderboard .cloud-block .cloud-1,
.vip-banner.leaderboard .cloud-block .cloud-2,
.vip-banner.leaderboard .cloud-block .cloud-3,
.vip-banner.leaderboard .cloud-block .cloud-4 {
    display: block;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background-color: #FFFBD6;
}

.vip-banner.leaderboard .cloud-block .cloud-1 {
    width: 20%;
    height: 20%;
    top: 32%;
    left: 80%;
    animation: vip-banner-leaderboard-cloud-1 1.5s ease-in-out infinite alternate;
}

*[dir='rtl'] .vip-banner.leaderboard .cloud-block .cloud-1 {
    right: 80%;
    left: auto;
}

.vip-banner.leaderboard .cloud-block .cloud-2 {
    width: 20%;
    height: 20%;
    top: 48%;
    left: 80%;
    animation: vip-banner-leaderboard-cloud-2 1.7s ease-in-out infinite alternate;
}

*[dir='rtl'] .vip-banner.leaderboard .cloud-block .cloud-2 {
    right: 80%;
    left: auto;
}

.vip-banner.leaderboard .cloud-block .cloud-3 {
    width: 90%;
    height: 100%;
    top: 0%;
    left: 0%;
}

*[dir='rtl'] .vip-banner.leaderboard .cloud-block .cloud-3 {
    right: 0%;
    left: auto;
}

@keyframes vip-banner-leaderboard-cloud-1 {
    from {
        transform: translate(5%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

@keyframes vip-banner-leaderboard-cloud-2 {
    from {
        transform: translate(-4%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

.vip-banner.leaderboard .vip-clipart-medalstore {
    z-index: 4;
    display: block;
    position: absolute;
    width: 110px;
    height: 110px;
    top: -6px;
    left: -5px;
}

*[dir='rtl'] .vip-banner.leaderboard .vip-clipart-medalstore {
    left: auto;
    right: -5px;
}

.vip-banner.leaderboard .title {
    display: block;
    position: absolute;
    z-index: 4;
    color: var(--color-text-danger);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 36px;
    top: 16px;
    left: 100px;
}

*[dir='rtl'] .vip-banner.leaderboard .title {
    right: 100px;
    left: auto;
}

.vip-banner.leaderboard .description {
    display: block;
    position: absolute;
    z-index: 4;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 17px;
    top: 54px;
    left: 100px;
}

*[dir='rtl'] .vip-banner.leaderboard .description {
    right: 100px;
    left: auto;
}

.vip-banner.leaderboard .content {
    display: table;
    width: 100%;
    height: 90px;
    table-layout: auto;
    position: absolute;
    z-index: 5;
}

.vip-banner.leaderboard .new-btn {
    white-space: nowrap;
}

.vip-banner.leaderboard .content > * {
    display: table-row;
}

    .vip-banner.leaderboard .content > * > * {
        display: table-cell;
        vertical-align: middle;
    }

        .vip-banner.leaderboard .content > * > *:first-child {
            width: 310px;
        }

        .vip-banner.leaderboard .content > * > *:last-child {
            min-width: 0px;
            padding: 0px 20px 0px 30px;
        }

*[dir='rtl'] .vip-banner.leaderboard .content > * > *:last-child {
    min-width: 0px;
    padding: 0px 30px 0px 20px;
}

.vip-banner.leaderboard .slogan {
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
}
/* #endregion Leaderboard */
/* #region StickyFooter */
.vip-banner.stickyfooter {
    width: 320px;
    height: 100px;
    overflow: hidden;
    border-radius: var(--radius-4);
    background-color: #FFFBD6;
    display: block;
}

    .vip-banner.stickyfooter .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        background: rgba(0, 0, 0, 0.05);
        top: 0px;
        left: 0px;
    }

    .vip-banner.stickyfooter .vip-clipart-medalstore {
        z-index: 4;
        display: block;
        position: absolute;
        width: 120px;
        height: 120px;
        top: -6px;
        right: -11px;
    }

*[dir='rtl'] .vip-banner.stickyfooter .vip-clipart-medalstore {
    left: -11px;
    right: auto;
}

.vip-banner.stickyfooter .cloud-block {
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    top: -52px;
    right: -80px;
    z-index: 2;
}

*[dir='rtl'] .vip-banner.stickyfooter .cloud-block {
    left: -80px;
    right: auto;
}

.vip-banner.stickyfooter .cloud-block .cloud-1,
.vip-banner.stickyfooter .cloud-block .cloud-2,
.vip-banner.stickyfooter .cloud-block .cloud-3,
.vip-banner.stickyfooter .cloud-block .cloud-4 {
    display: block;
    position: absolute;
    z-index: 3;
    border-radius: 50%;
    background-color: #FFFBD6;
}

.vip-banner.stickyfooter .cloud-block .cloud-1 {
    width: 30%;
    height: 30%;
    top: 38%;
    left: 0%;
    animation: vip-banner-stickyfooter-cloud-1 1.5s ease-in-out infinite alternate;
}

*[dir='rtl'] .vip-banner.stickyfooter .cloud-block .cloud-1 {
    left: auto;
    right: 0%;
}

.vip-banner.stickyfooter .cloud-block .cloud-2 {
    width: 40%;
    height: 40%;
    top: 8%;
    left: 8%;
    animation: vip-banner-stickyfooter-cloud-2 1.7s ease-in-out infinite alternate;
}

*[dir='rtl'] .vip-banner.stickyfooter .cloud-block .cloud-2 {
    right: 8%;
    left: auto;
}

.vip-banner.stickyfooter .cloud-block .cloud-3 {
    width: 50%;
    height: 50%;
    top: 50%;
    left: 10%;
    animation: vip-banner-stickyfooter-cloud-2 1.6s ease-in-out infinite alternate;
}

.vip-banner.stickyfooter .cloud-block .cloud-4 {
    width: 90%;
    height: 90%;
    top: 6%;
    left: 11%;
}

*[dir='rtl'] .vip-banner.stickyfooter .cloud-block .cloud-4 {
    right: 11%;
    left: auto;
}


@keyframes vip-banner-stickyfooter-cloud-1 {
    from {
        transform: translate(4%, 0%);
    }

    to {
        transform: translate(-4%, 0%);
    }
}

@keyframes vip-banner-stickyfooter-cloud-2 {
    from {
        transform: translate(-4%, 0%);
    }

    to {
        transform: translate(4%, 0%);
    }
}

.vip-banner.stickyfooter .content {
    display: table;
    width: 100%;
    height: 100px;
    table-layout: auto;
    position: absolute;
    z-index: 5;
}

    .vip-banner.stickyfooter .content > * {
        display: table-row;
    }

        .vip-banner.stickyfooter .content > * > * {
            display: table-cell;
            vertical-align: middle;
        }

            .vip-banner.stickyfooter .content > * > *:first-child {
                padding: 0px 20px 0px 20px;
            }

            .vip-banner.stickyfooter .content > * > *:last-child {
                width: 100px;
            }

.vip-banner.stickyfooter .slogan {
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
}

/* #endregion StickyBanner */
/* #region MediumRectangle */
.vip-banner.mediumrectangle {
    width: 300px;
    height: 250px;
    overflow: hidden;
    border-radius: var(--radius-4);
    background-color: #FFFBD6;
    display: block;
}

    .vip-banner.mediumrectangle .bg {
        display: block;
        width: 920px;
        height: 210px;
        background: url("../../Content/Images/VIP/Banners/bg-1.svg") repeat-x center center transparent;
        background-size: contain;
        position: absolute;
        z-index: 2;
        top: 0px;
        left: -513px;
    }

    .vip-banner.mediumrectangle .bg-2 {
        display: block;
        width: 300px;
        height: 100px;
        overflow: hidden;
        position: absolute;
        z-index: 1;
        bottom: 0px;
        left: 0px;
        background: #FFF9C5;
    }

    .vip-banner.mediumrectangle .bg-clouds {
        position: absolute;
        z-index: 1;
        top: 0px;
        left: 0px;
        display: block;
        width: 5970px;
        height: 250px;
        background: url("../../Content/Images/VIP/Banners/bg-clouds-1.svg") repeat-x center center transparent;
        background-size: contain;
        animation: vip-banner-bg-clouds 200s linear infinite;
    }

    .vip-banner.mediumrectangle .vip-clipart-medalstore {
        z-index: 4;
        display: block;
        position: absolute;
        width: 150px;
        height: 150px;
        top: 65px;
        right: 73px;
    }

    .vip-banner.mediumrectangle .slogan {
        display: block;
        width: 100%;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--color-text-muted);
        font-size: 16px;
        position: absolute;
        z-index: 5;
        top: 0px;
        left: 0px;
        text-align: center;
        padding: 20px 30px 20px 30px;
    }

    .vip-banner.mediumrectangle .control {
        display: block;
        width: 100%;
        position: absolute;
        text-align: center;
        z-index: 5;
        bottom: 20px;
        left: 0px;
    }

/* #endregion MediumRectangle */
/* #region Skyscraper */
.vip-banner.skyscraper {
    width: 300px;
    height: 600px;
    overflow: hidden;
    border-radius: var(--radius-4);
    background-color: #FFFBD6;
    display: block;
}

    .vip-banner.skyscraper .bg {
        display: block;
        width: 1300px;
        height: 330px;
        background: url("../../Content/Images/VIP/Banners/bg-1.svg") repeat-x center center transparent;
        background-size: contain;
        position: absolute;
        z-index: 2;
        top: 0px;
        left: -570px;
    }

    .vip-banner.skyscraper .bg-2 {
        display: block;
        width: 300px;
        height: 320px;
        overflow: hidden;
        position: absolute;
        z-index: 1;
        bottom: 0px;
        left: 0px;
        background: #FFF9C5;
    }

    .vip-banner.skyscraper .bg-clouds {
        position: absolute;
        z-index: 1;
        top: 0px;
        left: 0px;
        display: block;
        width: 5970px;
        height: 350px;
        background: url("../../Content/Images/VIP/Banners/bg-clouds-1.svg") repeat-x center center transparent;
        background-size: contain;
        animation: vip-banner-bg-clouds 200s linear infinite;
    }

    .vip-banner.skyscraper .vip-clipart-medalstore {
        z-index: 4;
        display: block;
        position: absolute;
        width: 300px;
        height: 300px;
        top: 65px;
        left: 0;
    }

    .vip-banner.skyscraper .title {
        display: block;
        position: absolute;
        z-index: 4;
        color: var(--color-text-danger);
        text-transform: uppercase;
        font-weight: 800;
        font-size: 42px;
        top: 28px;
        left: 0px;
        width: 100%;
        text-align: center;
    }

    .vip-banner.skyscraper .description {
        display: block;
        position: absolute;
        z-index: 4;
        color: var(--color-text-muted);
        text-transform: uppercase;
        font-weight: 800;
        font-size: 20px;
        top: 70px;
        left: 0px;
        width: 100%;
        text-align: center;
    }

    .vip-banner.skyscraper .control {
        display: block;
        width: 100%;
        position: absolute;
        text-align: center;
        z-index: 5;
        bottom: 40px;
        left: 0px;
    }

    .vip-banner.skyscraper .content {
        display: table;
        width: 100%;
        height: 190px;
        left: 0px;
        top: 307px;
        table-layout: auto;
        position: absolute;
        z-index: 5;
    }

        .vip-banner.skyscraper .content > * {
            display: table-row;
        }

            .vip-banner.skyscraper .content > * > * {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                font-weight: 800;
                padding: 0px 20px 0px 20px;
                text-transform: uppercase;
                color: var(--color-text-muted);
                font-size: 20px;
            }



/* #endregion Skyscraper */
/* #endregion --------------------- /Banners -------------------------- */
/* #endregion ================================ /VIP Services =========================================== */
/* #region ================================== App Download Page ======================================== */
.app-download-page {
    padding-top: 0px;
    padding-bottom: 100px;
}

    .app-download-page .section-features h2 {
        font-size: 24px;
        line-height: 28px;
        color: var(--color-text-basic);
        font-weight: 400;
        text-align: center;
    }

    .app-download-page .features {
        display: flex;
        text-align: center;
    }

        .app-download-page .features h3 {
            font-size: 20px;
            line-height: 26px;
            font-weight: 700;
            padding-bottom: 10px;
            color: var(--color-text-basic);
        }

        .app-download-page .features p {
            color: var(--color-text-muted);
            font-weight: 400;
            font-size: 14px;
            line-height: 21px;
        }

        .app-download-page .features .item {
            width: 100%;
            padding-inline: 20px;
            padding-top: 50px;
        }

            .app-download-page .features .item .clipart-app-newad,
            .app-download-page .features .item .clipart-app-camera,
            .app-download-page .features .item .clipart-app-notifications {
                margin: 0px auto;
                width: 150px;
                height: 150px;
            }

@media (max-width: 991px) {
    .app-download-page .features h3 {
        font-size: 16px;
        line-height: 21px;
        padding-top: 10px;
    }
}

@media (max-width: 767px) {
    .app-download-page .features {
        display: block;
    }
}


.app-download-page .section-start {
    margin-bottom: 50px;
    position: relative;
    min-height: 600px;
    background: url('../../Content/Images/AppDownloadPromo/clipart-background.svg') repeat-x center bottom #EBF6F0;
    background-size: contain;
    overflow: hidden;
}

    .app-download-page .section-start .clouds {
        position: absolute;
        z-index: 1;
        width: 10000%;
        height: 70%;
        background: url('../../Content/Images/AppDownloadPromo/clipart-clouds.svg') repeat-x center center transparent;
        background-size: contain;
        animation: clipart-vip-banner-clouds 5000s linear infinite;
    }


    .app-download-page .section-start .front-layer {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: url('../../Content/Images/AppDownloadPromo/clipart-front-layer.svg') no-repeat center bottom transparent;
        background-size: contain;
    }



    .app-download-page .section-start .content {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
    }

    .app-download-page .section-start .container {
        display: flex;
        height: 100%;
    }

    .app-download-page .section-start .left-side {
        width: 60%;
        align-self: center;
        padding-inline-end: 40px;
    }

    .app-download-page .section-start .right-side {
        width: 50%;
    }

    .app-download-page .section-start .circle {
        width: 100%;
        height: 100%;
        background: url("../../Content/Images/AppDownloadPromo/clipart-circle.svg") no-repeat center center transparent;
        background-size: contain;
        display: flex;
        justify-content: center;
    }

    .app-download-page .section-start .app-screen {
        width: 80%;
        height: 80%;
        background: url("../../Content/Images/AppDownloadPromo/Screen-Pazar3MK.png") no-repeat center center transparent;
        background-size: contain;
        display: block;
        align-self: center;
    }

.site-Macedonia .app-download-page .section-start .app-screen {
    background: url("../../Content/Images/AppDownloadPromo/Screen-Pazar3MK.png") no-repeat center center transparent;
    background-size: contain;
}

.site-Albania .app-download-page .section-start .app-screen {
    background: url("../../Content/Images/AppDownloadPromo/Screen-MerrJepAL.png") no-repeat center center transparent;
    background-size: contain;
}

.site-Kosovo .app-download-page .section-start .app-screen {
    background: url("../../Content/Images/AppDownloadPromo/Screen-MerrJepCOM.png") no-repeat center center transparent;
    background-size: contain;
}

.site-Serbia .app-download-page .section-start .app-screen {
    background: url("../../Content/Images/AppDownloadPromo/Screen-MojTrgRS.png") no-repeat center center transparent;
    background-size: contain;
}

.site-Montenegro .app-download-page .section-start .app-screen {
    background: url("../../Content/Images/AppDownloadPromo/Screen-MojTrgME.png") no-repeat center center transparent;
    background-size: contain;
}

.site-Afghanistan .app-download-page .section-start .app-screen {
    background: url("../../Content/Images/AppDownloadPromo/Screen-LeelamAF.png") no-repeat center center transparent;
    background-size: contain;
}

.app-download-page .section-start h2 {
    color: var(--color-text-primary);
    font-weight: 800;
    font-size: 38px;
    line-height: 40px;
    text-transform: uppercase;
}

.app-download-page .section-start .slogan {
    min-height: 200px;
    position: relative;
}

.app-download-page .section-start .btn-apple,
.app-download-page .section-start .btn-android {
    border-radius: var(--radius-12);
    color: #FFFFFF;
    display: inline-flex;
    text-decoration: none;
    padding: 10px 10px 10px 10px;
    min-width: 220px;
    justify-content: center;
}

.app-download-page .section-start .btn-apple {
    background-color: var(--color-bg-primary);
    margin-inline-end: 5px;
}

.app-download-page .section-start .btn-android {
    background-color: var(--color-neutral-900);
}


    .app-download-page .section-start .btn-apple i,
    .app-download-page .section-start .btn-android i {
        align-self: center;
        font-size: 32px;
        margin-inline-end: 10px;
    }

    .app-download-page .section-start .btn-apple small,
    .app-download-page .section-start .btn-android small {
        font-size: 14px;
        line-height: 21px;
        display: block;
        font-weight: 400;
    }

    .app-download-page .section-start .btn-apple span,
    .app-download-page .section-start .btn-android span {
        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
    }


@keyframes clipart-vip-banner-clouds {
    from {
        background-position-x: 0%;
    }

    to {
        background-position-x: -90%;
    }
}

.app-download-page .section-start .slogan .item-1,
.app-download-page .section-start .slogan .item-2,
.app-download-page .section-start .slogan .item-3 {
    opacity: 0;
    position: absolute;
    z-index: 1;
    width: 100%;
}

.app-download-page .section-start .slogan .item-1 {
    animation: app-download-slogan-1 9s ease-in-out infinite;
}

.app-download-page .section-start .slogan .item-2 {
    animation: app-download-slogan-2 9s ease-in-out infinite;
}

.app-download-page .section-start .slogan .item-3 {
    animation: app-download-slogan-3 9s ease-in-out infinite;
}

@keyframes app-download-slogan-1 {
    0% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    90% {
        opacity: 0;
    }

    95% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes app-download-slogan-2 {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    55% {
        opacity: 1;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes app-download-slogan-3 {
    0% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    65% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    95% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}



@media (max-width: 1399px) {
    .app-download-page .section-start .front-layer {
        position: absolute;
        z-index: 1;
        width: 200%;
        height: 100%;
        left: -50%;
        background: url('../../Content/Images/AppDownloadPromo/clipart-front-layer.svg') no-repeat center bottom transparent;
        background-size: contain;
    }

    .app-download-page .section-start {
        position: relative;
        min-height: 600px;
        background: url('../../Content/Images/AppDownloadPromo/clipart-background.svg') repeat-x center bottom #EBF6F0;
        background-size: 150% auto;
        overflow: hidden;
    }
}

@media (max-width: 1199px) {
    .app-download-page .section-start h2 {
        font-size: 36px;
        line-height: 38px;
    }
}

@media (max-width: 991px) {
    .app-download-page .section-start h2 {
        font-size: 32px;
        line-height: 32px;
    }

    .app-download-page .section-start .btn-apple,
    .app-download-page .section-start .btn-android {
        margin-bottom: 5px;
    }
}

@media (max-width: 767px) {
    .app-download-page .section-start .left-side {
        width: 100%;
        align-self: center;
        text-align: center;
        padding-inline-end: 0px;
    }

    .app-download-page .section-start .right-side {
        display: none;
    }
}

@media (max-width: 600px) {
    .app-download-page .section-start {
        min-height: 400px;
    }

        .app-download-page .section-start .front-layer {
            position: absolute;
            z-index: 1;
            width: 300%;
            height: 100%;
            left: -100%;
            background: url('../../Content/Images/AppDownloadPromo/clipart-front-layer.svg') no-repeat center bottom transparent;
            background-size: contain;
        }

        .app-download-page .section-start h2 {
            font-size: 32px;
            line-height: 32px;
        }

        .app-download-page .section-start .slogan {
            min-height: 150px;
        }

        .app-download-page .section-start .clouds {
            top: -30px;
        }
}

@media (max-width: 478px) {
    .app-download-page .section-start .btn-apple,
    .app-download-page .section-start .btn-android {
        margin-inline-end: 0px;
    }
}

@media (max-width: 450px) {
    .app-download-page .section-start h2 {
        font-size: 28px;
        line-height: 28px;
    }
}

@media (max-width: 400px) {
    .app-download-page .section-start h2 {
        font-size: 24px;
        line-height: 24px;
    }

    .app-download-page .section-start .slogan {
        min-height: 130px;
    }
}


/* #endregion ============================== /App Download Page ======================================== */
/* #region ===================================== SEO Blocks ============================================ */
.longDescription h1, .shortDescription h1,
.longDescription h2, .shortDescription h2,
.longDescription h3, .shortDescription h3,
.longDescription h4, .shortDescription h4,
.longDescription h5, .shortDescription h5,
.longDescription h6, .shortDescription h6 {
    font-weight: 700;
    color: var(--color-text-basic);
}

.longDescription, .shortDescription {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

    .longDescription h1, .shortDescription h1 {
        font-size: 2.1em;
        margin-bottom: 20px;
        margin-top: 40px;
    }

    .longDescription h2, .shortDescription h2 {
        font-size: 1.7em;
        margin-bottom: 15px;
        margin-top: 25px;
    }

    .longDescription h3, .shortDescription h3 {
        font-size: 1.5em;
        margin-bottom: 10px;
        margin-top: 15px;
    }

    .longDescription h4, .shortDescription h4 {
        font-size: 1.3em;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .longDescription h5, .shortDescription h5 {
        font-size: 1.1em;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .longDescription h6, .shortDescription h6 {
        font-size: 1em;
        margin-bottom: 10px;
        margin-top: 10px;
    }


    .longDescription p, .shortDescription p {
        font-weight: 400;
        color: var(--color-text-muted);
        font-size: 16px;
        padding-top: 0px;
        padding-bottom: 15px;
        line-height: 1.5em;
    }


    .longDescription em, .shortDescription em {
        font-style: italic;
    }

    .longDescription h1 + br, .shortDescription h1 + br,
    .longDescription h2 + br, .shortDescription h2 + br,
    .longDescription h3 + br, .shortDescription h3 + br,
    .longDescription h4 + br, .shortDescription h4 + br,
    .longDescription h5 + br, .shortDescription h5 + br,
    .longDescription h6 + br, .shortDescription h6 + br,
    .longDescription p + br, .shortDescription p + br {
        display: none;
    }

    .longDescription blockquote, .shortDescription blockquote {
        border-left: 3px solid #DDDDDD;
        color: var(--color-text-muted);
        padding-left: 30px;
        font-style: italic;
    }

*[dir='rtl'] .longDescription blockquote, *[dir='rtl'] .shortDescription blockquote {
    border-left: 0px none transparent;
    border-right: 3px solid #DDDDDD;
    color: var(--color-text-muted);
    padding-left: 0px;
    padding-right: 30px;
}

.longDescription strong, .shortDescription strong {
    font-weight: 700;
    color: var(--color-text-basic);
}


/* #endregion ================================= /SEO Blocks ============================================ */
/* #region =================================== Stores Listing ========================================== */

.stores-search .form-row select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg version='1.0' id='caret' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.41,4.61c-0.78-0.78-2.05-0.78-2.83,0L8.01,8.19L4.41,4.59c-0.78-0.78-2.05-0.78-2.83,0c-0.78,0.78-0.78,2.05,0,2.83 l4.99,4.99c0,0,0.01,0.01,0.01,0.01c0,0,0.01,0.01,0.01,0.01c0.39,0.39,0.9,0.59,1.41,0.59s1.02-0.2,1.41-0.59l4.99-4.99 C15.2,6.65,15.2,5.39,14.41,4.61z'/%3E%3C/svg%3E");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 10px;
    padding-inline-start: 8px !important;
    padding-inline-end: 24px !important;
}

*[dir='rtl'] .stores-search .form-row select {
    background-image: url("data:image/svg+xml,%3Csvg version='1.0' id='caret' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.41,4.61c-0.78-0.78-2.05-0.78-2.83,0L8.01,8.19L4.41,4.59c-0.78-0.78-2.05-0.78-2.83,0c-0.78,0.78-0.78,2.05,0,2.83 l4.99,4.99c0,0,0.01,0.01,0.01,0.01c0,0,0.01,0.01,0.01,0.01c0.39,0.39,0.9,0.59,1.41,0.59s1.02-0.2,1.41-0.59l4.99-4.99 C15.2,6.65,15.2,5.39,14.41,4.61z'/%3E%3C/svg%3E");
    background-position: left 8px center;
}

.store-search .hashtags-area {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10px;
}

    .store-search .hashtags-area .tag {
        display: inline-block;
        position: relative;
        border-radius: var(--radius-4);
        padding: 4px 10px 4px 10px;
        text-decoration: none;
        background-color: #E6F4ED;
        font-weight: 400 !important;
        color: var(--color-text-basic);
        cursor: pointer;
        font-size: 12px !important;
        vertical-align: top;
    }

.storeslist-title {
    font-size: 20px !important;
    font-weight: 400 !important;
}

.storeslist-subtitle {
    font-size: 18px !important;
    font-weight: 400 !important;
}

.stores-search .card-body .form-check .form-check-input {
    inset-inline-start: 0px;
    inset-block-start: -7px;
    margin: 0px;
}

.stores-search .form-row .form-control {
    height: 47px !important;
    padding-inline-start: 4px;
    border-color: var(--color-border-basic) !important;
    border-radius: var(--radius-8);
}

.stores-search .form-group input[type='text'] {
    padding-inline-start: 8px !important;
    border-color: var(--color-border-basic) !important;
    background-color: var(--color-bg-alt) !important;
}

    .stores-search .form-group input[type='text']:focus {
        border-color: var(--color-text-muted) !important;
    }

.stores-search .form-row .form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--color-text-muted);
}

.stores-search .card {
    border: 0px none transparent;
    background-color: var(--color-bg-panel);
    border-radius: var(--radius-16);
}

.stores-search .card-body .form-row button {
    border-radius: var(--radius-8);
}

.stores-search .form-group.filter {
    margin-block-end: 4px;
}

.stores-search .alert-secondary.bootstrap4 {
    background-color: transparent !important;
    border-color: transparent !important;
}

.stores-search .alert-dark {
    background: transparent;
    padding-inline: 0px !important;
    font-weight: 500;
}

.stores-search .result-content {
    border-top: 0px;
    padding-block-start: 4px;
}

.stores-search .MainBlock a {
    color: var(--color-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 130%;
}

    .stores-search .MainBlock a .ci-pazar-bold {
        font-size: 24px;
    }


.stores-search .MainBlock .div-image-center-content a {
    display: flex;
    width: 150px;
    height: 150px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-12);
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

*[dir='rtl'] .stores-search .MainBlock .div-image-center-content a {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.stores-search .card-content {
    display: flex;
    flex-wrap: nowrap;
}

.stores-search .card-image {
    display: flex;
    flex-shrink: 0;
}

.stores-search .card-text-content {
    flex-grow: 1;
    padding-inline: 16px;
    position: relative;
    display: block;
    overflow: hidden;
}

.stores-search .img-shimmer-container.store-list-item {
    padding: 0px;
}

.stores-search .card-content .card-body {
    padding: 0px;
}

.stores-search .card-text-content h2 {
    font-size: 1em;
    line-height: 100%;
    padding-block-end: 0px;
}

    .stores-search .card-text-content h2 a {
        line-height: 130%;
        margin-block: 0px !important;
        font-size: 22px !important;
        font-weight: 400 !important;
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.stores-search .card-text-content .div-categoryLink {
    margin-block-start: 12px;
}

    .stores-search .card-text-content .div-categoryLink a {
        color: var(--color-text-muted) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
    }

.stores-search .card-text-content .slogan {
    font-size: 14px;
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stores-search .card-content .card-text.count {
    font-size: 14px;
    text-decoration: none;
}

    .stores-search .card-content .card-text.count strong {
        color: var(--color-text-primary) !important;
        font-weight: 600;
    }

.stores-search .card-content .row-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    position: absolute;
    inset-inline-start: 16px;
    inset-block-end: 12px;
}

.stores-search a.clickable.ws-chat-status-item.online span {
    padding-block-start: 1px;
}

.pz-chat-inline {
    position: initial !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .stores-search .MainBlock .div-image-center-content a {
        height: 140px;
        width: 100px;
    }

    .stores-search .card-text-content h2 a {
        font-size: 18px !important;
        line-height: 150% !important;
    }
}

@media (max-width: 575px) {
    .store-search .hashtags-area {
        display: none;
    }

    .stores-search .search-stores-form {
        background: none;
    }

        .stores-search .search-stores-form .card-body {
            padding-inline: 0px !important;
        }
}

@media (max-width: 400px) {
    .stores-search .MainBlock .div-image-center-content a {
        height: 140px;
        width: 80px;
    }

    .stores-search .card-text-content {
        padding-inline: 10px;
    }

    .stores-search .card-content .row-controls {
        inset-inline-start: 10px;
    }
}

/* #endregion =============================== /Stores Listing ========================================== */
/* #region ======================================== Store ============================================== */
.store-hashtags-area {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 40px;
}

    .store-hashtags-area .tag {
        display: inline-block;
        position: relative;
        border-radius: var(--radius-4);
        padding: 6px 12px 6px 12px;
        text-decoration: none;
        background-color: #E6F4ED;
        font-weight: 400 !important;
        color: var(--color-text-basic);
        cursor: pointer;
        font-size: 14px;
        vertical-align: top;
    }

.search-result .hashtags-area {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    margin-block: 10px;
}

    .search-result .hashtags-area .tag {
        display: inline-block;
        position: relative;
        border-radius: var(--radius-4);
        padding: 4px 10px 4px 10px;
        text-decoration: none;
        background-color: #E6F4ED;
        font-weight: 400 !important;
        color: var(--color-text-basic);
        cursor: pointer;
        font-size: 12px !important;
        vertical-align: top;
    }

.store-ads-page .desktop-store-details-top-728x90 {
    border-radius: var(--radius-16);
    overflow: hidden;
}

.store-ads-page .form-check-inline input[type='radio'] {
    margin-inline-start: 0px;
    margin-block-start: -1px;
    margin-inline-end: 2px;
}

.store-ads-page .form-check-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-block: var(--gap-8);
}

.store-ads-page .select-category select {
    padding-inline-start: 4px;
    background-color: var(--color-bg-alt);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg version='1.0' id='caret' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.41,4.61c-0.78-0.78-2.05-0.78-2.83,0L8.01,8.19L4.41,4.59c-0.78-0.78-2.05-0.78-2.83,0c-0.78,0.78-0.78,2.05,0,2.83 l4.99,4.99c0,0,0.01,0.01,0.01,0.01c0,0,0.01,0.01,0.01,0.01c0.39,0.39,0.9,0.59,1.41,0.59s1.02-0.2,1.41-0.59l4.99-4.99 C15.2,6.65,15.2,5.39,14.41,4.61z'/%3E%3C/svg%3E");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 10px;
    padding-inline-start: 8px !important;
    padding-inline-end: 24px !important;
}

*[dir='rtl'] .store-ads-page .select-category select {
    background-image: url("data:image/svg+xml,%3Csvg version='1.0' id='caret' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.41,4.61c-0.78-0.78-2.05-0.78-2.83,0L8.01,8.19L4.41,4.59c-0.78-0.78-2.05-0.78-2.83,0c-0.78,0.78-0.78,2.05,0,2.83 l4.99,4.99c0,0,0.01,0.01,0.01,0.01c0,0,0.01,0.01,0.01,0.01c0.39,0.39,0.9,0.59,1.41,0.59s1.02-0.2,1.41-0.59l4.99-4.99 C15.2,6.65,15.2,5.39,14.41,4.61z'/%3E%3C/svg%3E");
    background-position: left 8px center;
}

.store-ads-page .filter {
    background: transparent;
    padding: 0px;
    margin: 0px;
    border: 0px none transparent;
}

    .store-ads-page .filter .row.border {
        border: 0px none transparent !important;
        border-bottom: 0px solid var(--color-border-basic) !important;
        box-shadow: none !important;
        background-color: var(--color-bg-panel);
        border-radius: var(--radius-8);
    }

    .store-ads-page .filter .col-6.p-0 {
        margin-block-end: 8px;
    }

.store-ads-page .alert-secondary {
    background: transparent;
    border: 0px none transparent !important;
}

.store-ads-page .alert-dark {
    background-color: transparent;
    padding-inline: 0px !important;
    padding-block: 12px !important;
}

.store-ads-page .border.bootstrap4.search-result {
    border: 0px none transparent !important;
    background: var(--color-bg-panel) !important;
    margin-block-end: 8px !important;
    border-radius: var(--radius-16);
}

.store-ads-page .div-categoryLink {
    padding-block-start: 12px;
}

.store-ads-page .createDataFont {
    padding-block-start: 12px;
    color: var(--color-text-muted);
    font-size: 14px !important;
}

.store-ads-page h3 .Link_vis, .store-ads-page h3 .Link_vis:hover {
    color: var(--color-text-basic) !important;
    text-decoration: none;
}

.store-ads-page .multi .img-polaroid {
    box-shadow: none !important;
    height: 100% !important;
    width: 100% !important;
    display: block !important;
}

.store-ads-page .img-col.multi, .store-ads-page .img-col {
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #ececec;
    border-radius: var(--radius-8) !important;
    overflow: hidden !important;
}

.store-ads-page .store-goods-card-description {
    padding-inline-start: 8px !important;
}

.store-ads-page .store-goodsitem-photo .Link_vis {
    display: flex;
    justify-content: center;
    align-items: center;
}

.store-ads-page .img-shimmer-container.store-goodsitem-photo {
    padding: 0px !important;
    height: 100%;
    margin: 0px !important;
}

.store-results-header {
    display: flex;
    align-items: center;
    width: 100%;
    flex-wrap: nowrap;
    min-height: 60px;
}

    .store-results-header .filter-btn {
        flex-shrink: 0;
        font-size: 14px;
        text-decoration: none;
    }

    .store-results-header .alert-dark {
        width: 100%;
    }

.store-ads-page .row-select-category {
    padding-inline: var(--gap-8) !important;
    padding-block: var(--gap-8) !important;
}

.store-ads-page .row-select-options {
    padding-inline: var(--gap-8) !important;
    padding-block: var(--gap-8) !important;
    margin: 0px;
}

@media (max-width: 1199px) {
    .store-ads-page h3 .Link_vis {
        font-size: 20px !important;
        padding-block-start: 8px;
        padding-block-end: 8px;
        display: block;
        line-height: 120%;
    }
}

@media (max-width: 991px) {
    .store-ads-page h3 .Link_vis {
        font-size: 16px !important;
        font-weight: 500 !important
    }

    .store-ads-page .createDataFont {
        padding-block-start: 9px;
    }
}

@media (max-width: 767px) {
    .store-ads-page .createDataFont {
        padding-block-start: 8px;
        font-size: 12px !important;
    }
}



@media (max-width: 575px) {
    .search-result .hashtags-area {
        display: none;
    }

    .store-ads-page .ad-date-block {
        display: none !important;
    }

    .store-ads-page .list-price {
        font-size: 14px;
        position: absolute;
        inset-block-end: 4px;
    }
}

@media (max-width: 475px) {
    .store-ads-page h3 .Link_vis {
        font-size: 14px !important;
        font-weight: 500 !important
    }
}

@media (max-width: 455px) {
    .store-ads-page .search-result {
        min-height: 110px !important;
    }
}

@media (max-width: 420px) {
    .store-ads-page h3 .Link_vis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* #endregion ==================================== /Store ============================================== */
/* #region ======================================== Blog =============================================== */


.help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.p-2 a:hover,
.help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-6.col-xl-6.p-2 a:hover {
    text-decoration: none;
}

.help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.p-2 .card,
.help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-6.col-xl-6.p-2 .card {
    border: 0px none transparent;
}

.help-page .card-img-top {
    border-radius: var(--radius-16);
    max-height: 200px;
    object-fit: cover;
}

.help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.p-2 .card .card-body,
.help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-6.col-xl-6.p-2 .card .card-body {
    padding: 0px;
}

.help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.p-2 .card .card-title,
.help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-6.col-xl-6.p-2 .card .card-title {
    margin: 0px;
}

    .help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.p-2 .card .card-title h2,
    .help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.p-2 .card .card-title h1,
    .help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-6.col-xl-6.p-2 .card .card-title h2,
    .help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-6.col-xl-6.p-2 .card .card-title h1 {
        margin: 0px;
        padding: 0px;
        line-height: 130%;
        color: var(--color-text-basic);
        font-size: 16px;
        text-align: start !important;
        padding-block-start: 16px;
    }

        .help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.p-2 .card .card-title h2:empty,
        .help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-6.col-xl-6.p-2 .card .card-title h2:empty {
            display: none;
        }

.help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.p-2 .btn.btn-pazar,
.help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-6.col-xl-6.p-2 .btn.btn-pazar {
    display: none;
}

.help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-4.col-xl-4.p-2 .card .card-title h2 br,
.help-page .col-12.col-xs-12.col-sm-12.col-md-6.col-lg-6.col-xl-6.p-2 .card .card-title h2 br {
    display: none;
}


.blog-page .hashtags-area {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 20px;
    border-bottom: 1px solid #DDDDDD;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

    .blog-page .hashtags-area .tag {
        display: inline-block;
        position: relative;
        border-radius: var(--radius-4);
        padding: 6px 12px 6px 12px;
        text-decoration: none;
        background-color: #E6F4ED;
        font-weight: 400 !important;
        color: var(--color-text-basic);
        cursor: pointer;
        font-size: 14px;
        vertical-align: top;
    }
/* #endregion ==================================== /Blog =============================================== */
/* #region ===================================== Help pages ============================================ */
a:focus {
    outline: none !important;
}

.help-page p {
    font-size: 16px;
    line-height: 180%;
    color: var(--color-text-muted);
}

.help-page .form-check.fix {
    position: relative;
}

    .help-page .form-check.fix input[type='checkbox'] {
        position: absolute;
        inset-inline-start: 0px;
        inset-block-start: -1px;
    }

body .help-page .left-separator input[type=text],
body .container .help-page .left-separator input[type=text] {
    width: 100% !important;
    display: inline-block;
    height: 40px;
    font-size: 14px;
    border-radius: var(--radius-4);
    box-shadow: none;
    border: 1px solid var(--color-border-basic);
}

body .help-page .left-separator textarea,
body .container .help-page .left-separator textarea {
    width: 100% !important;
    border-radius: var(--radius-4);
    box-shadow: none;
    border: 1px solid var(--color-border-basic);
}

.help-page h1 {
    margin-block-start: 0px;
    font-size: 32px;
    font-weight: 500;
}


.help-page h2 {
    padding-block-start: 32px;
    padding-block-end: 16px !important;
    margin: 0px !important;
    font-weight: 500;
}

.help-page h4, .help-page h3 {
    padding-block-start: 20px;
    padding-block-end: 0px;
    margin-block-end: 0px;
    font-weight: 500;
}

.help-page blockquote {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 180%;
}

.help-page .left-separator h5,
.help-page .left-separator h3 {
    margin-block-start: 0px;
    font-size: 18px;
    line-height: 130%;
    padding-block-start: 0px;
}

.help-page .left-separator label {
    font-size: 14px;
    display: inline-block;
    font-weight: 500;
    padding-block-end: 4px;
}

.help-page .left-separator select {
    height: 40px;
    padding-inline-start: 2px;
    border-radius: var(--radius-4);
    border: 1px solid var(--color-border-basic);
}

.help-page .left-separator .btn.btn-pazar {
    background: var(--color-bg-primary);
    text-shadow: none;
    box-shadow: none;
    border: 0px none transparent;
    color: var(--color-text-alt);
    text-transform: uppercase;
    padding-inline: 16px;
    padding-block: 12px;
    font-weight: 600;
    border-radius: var(--radius-8);
}

.help-page ul {
    list-style: none;
    margin-inline-start: 0px;
    margin-block: 16px;
}

    .help-page ul li {
        font-size: 16px;
        line-height: 170%;
        margin-inline-start: 20px !important;
        padding-inline-start: 0px !important;
        position: relative;
        padding-block: 8px;
        color: var(--color-text-muted);
        background: none;
    }

        .help-page ul li:before {
            content: "";
            display: block;
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--color-bg-primary);
            border-radius: 50%;
            inset-inline-start: -24px;
            inset-block-start: 16px;
        }

.help-page .well li {
    font-size: 16px !important;
    line-height: 160% !important;
    color: var(--color-text-muted);
}

    .help-page .well li:before {
        inset-inline-start: -24px !important;
        inset-block-start: 16px !important;
    }

.help-page p a, .help-page blockquote a {
    font-size: 1em;
    color: var(--color-text-primary);
}

.help-page .left-separator p,
.help-page .left-separator blockquote {
    line-height: 130%;
    font-size: 14px;
}

.help-page .waths_new {
    border-radius: var(--radius-16);
    background: transparent;
    border: 1px solid var(--color-border-basic);
    padding-inline: 16px;
}

.help-page .left-separator .gallery {
    margin: 0px auto;
    width: 100%;
    display: block;
    border: 1px solid var(--color-border-basic);
    border-radius: var(--radius-16);
}

    .help-page .left-separator .gallery .thumbnail-header,
    .help-page .left-separator .gallery .thumbnails {
        border: 0px none transparent;
    }

.help-page .new_watch {
    font-size: 16px;
}
/* #region ------------------ Customer Service ------------------- */
.customer-service {
    padding-block-start: 24px;
    padding-block-end: 64px;
}

    .customer-service blockquote {
        font-size: 16px;
        line-height: 150%;
        font-weight: 400;
        color: var(--color-text-muted);
    }

    .customer-service .card {
        width: 100% !important;
        border-radius: var(--radius-16);
        overflow: hidden;
        border: 0px none transparent;
    }

    .customer-service a {
        color: var(--color-text-primary);
    }

    .customer-service .card ul {
        list-style: none;
        margin-inline: 0px;
        padding-inline: 0px;
    }

        .customer-service .card ul li {
            font-size: 14px;
            line-height: 180%;
            margin-inline-start: 32px;
            position: relative;
        }

            .customer-service .card ul li:before {
                content: "";
                display: block;
                width: 6px;
                height: 6px;
                background-color: var(--color-bg-primary);
                border-radius: 50%;
                position: absolute;
                inset-inline-start: -20px;
                inset-block-start: calc(50% - 3px);
            }

            .customer-service .card ul li a {
                color: var(--color-text-muted);
                font-weight: 400 !important;
            }

    .customer-service .card-text {
        font-size: 14px;
        color: var(--color-text-muted);
    }


    .customer-service .waths_new_noback ul {
        padding-inline-start: 0px !important;
        gap: 32px;
    }


@media (max-width: 767px) {
    .customer-service .waths_new_noback ul {
        column-count: 1 !important;
    }
}

.customer-service .waths_new_noback li {
    display: flex;
    width: 100%;
    align-items: center;
    padding-inline: 0px;
    gap: 16px;
}

    .customer-service .waths_new_noback li .ci-pazar {
        flex-shrink: 0;
    }

    .customer-service .waths_new_noback li .icon-container {
        flex-shrink: 0;
        width: auto;
        height: auto;
        background: var(--color-bg-panel);
        padding: 12px;
        border-radius: 50%;
    }

    .customer-service .waths_new_noback li .text-description {
        flex-grow: 1;
        width: 100%;
    }

    .customer-service .waths_new_noback li .ci-pazar {
        font-size: 48px;
    }

    .customer-service .waths_new_noback li .ci-pazar-social {
        font-size: 36px;
        opacity: 0.6;
        margin: 6px;
    }

    .customer-service .waths_new_noback li a {
        color: var(--color-text-basic);
        font-size: 16px;
    }

    .customer-service .waths_new_noback li p {
        color: var(--color-text-muted);
        font-size: 14px;
    }

.customer-service .waths_new_noback .a1,
.customer-service .waths_new_noback .a2,
.customer-service .waths_new_noback .a3,
.customer-service .waths_new_noback .a4,
.customer-service .waths_new_noback .a5,
.customer-service .waths_new_noback .a6,
.customer-service .waths_new_noback .a11,
.customer-service .waths_new_noback .a14,
.customer-service .waths_new_noback .a7,
.customer-service .waths_new_noback .a8,
.customer-service .waths_new_noback .a10,
.customer-service .waths_new_noback .a9,
.customer-service .waths_new_noback .a13 {
    background: none;
}

/* #endregion --------------/ Customer Service ------------------- */
/* #endregion =================================/ Help pages ============================================ */
/* #region ======================================= Sitemap ============================================= */
.sitemap-pagination-wrapper {
    width: 100%;
    text-align: center;
    margin-top: var(--gap-32);
}

    .sitemap-pagination-wrapper .records-count {
        margin-bottom: var(--gap-12);
        font-size: 14px;
        color: var(--color-text-muted);
    }

    .sitemap-pagination-wrapper .paging-control {
        display: inline-flex;
    }

.sitemap-page h2.title {
    padding-block-start: var(--gap-32);
    padding-block-end: var(--gap-16);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-basic);
    padding-inline: var(--gap-8);
}

.sitemap-page .empty-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
    padding-block-end: var(--gap-48);
}

    .sitemap-page .empty-content .row-clipart {
        width: 100%;
        display: flex;
        justify-content: center;
    }

        .sitemap-page .empty-content .row-clipart .clipart-cloud {
            width: 350px;
            height: 350px;
        }

    .sitemap-page .empty-content h3 {
        color: var(--color-text-muted);
        font-weight: 700;
        font-size: 24px;
        line-height: 120%;
        text-align: center;
    }

    .sitemap-page .empty-content p {
        color: var(--color-text-muted);
        font-weight: 400;
        font-size: 16px;
        line-height: 130%;
        text-align: center;
    }

@media (max-width: 800px) {
    .sitemap-page .empty-content .row-clipart .clipart-cloud {
        width: 300px;
        height: 300px;
    }

    .sitemap-page .empty-content h3 {
        font-size: 24px;
    }

    .sitemap-page .empty-content p {
        font-size: 16px;
    }
}

@media (max-width: 500px) {
    .sitemap-page .empty-content .row-clipart .clipart-cloud {
        width: 250px;
        height: 250px;
    }

    .sitemap-page .empty-content h3 {
        font-size: 18px;
    }

    .sitemap-page .empty-content p {
        font-size: 14px;
    }
}

/* #region Heading */
.sitemap-page .heading {
    display: flex;
    width: 100%;
    padding-inline: var(--gap-8);
    padding-block-start: var(--gap-48);
    padding-block-end: var(--gap-40);
    align-items: center;
    gap: var(--gap-16);
}

.sitemap-page .content {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--gap-8);
    max-width: 100%;
    padding-block-end: var(--gap-100);
}

.sitemap-page .heading .text-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
}

.sitemap-page .heading h1 {
    color: var(--color-text-basic);
    font-size: 32px;
    font-weight: 700;
    line-height: 120%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.sitemap-page .heading p {
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 130%;
    width: 100%;
}

.sitemap-page .heading .btn-back {
    display: flex;
    width: 30px;
    height: 30px;
    font-size: 20px;
    border-radius: 50%;
    border: 2px solid var(--color-bg-primary);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

*[dir='rtl'] .sitemap-page .heading .btn-back {
    transform: rotateY(180deg);
}

@media (max-width: 600px) {
    .sitemap-page .heading h1 {
        font-size: 24px;
        line-height: 100%;
    }

    .sitemap-page .heading .text-content {
        gap: var(--gap-2);
    }
}
/* #endregion Heading */
/* #region Trees */


.tree {
    display: block;
    width: 100%;
}

    .tree .tree-parent {
        display: inline-flex;
        align-items: center;
        width: auto;
        height: 30px;
        font-size: 16px;
        font-weight: 700;
        line-height: 100%;
        color: var(--color-text-basic);
        padding-inline: var(--gap-8);
        padding-block: var(--gap-4);
        border-radius: var(--radius-8);
        text-decoration: none !important;
        transition: background-color 0.2s ease;
    }

        .tree .tree-parent:hover {
            background-color: var(--color-bg-inputs-transparent);
            transition: background-color 0.2s ease;
            opacity: 1;
        }

    .tree .tree-child {
        display: flex;
        padding-inline-start: var(--gap-12);
        min-width: 0;
    }

        .tree .tree-child .connector {
            display: flex;
            align-self: stretch;
            align-items: flex-start;
            border-inline-start: 1px solid var(--color-border-basic);
        }


        .tree .tree-child .angle {
            width: 20px;
            height: 16px;
            border-bottom-left-radius: var(--radius-12);
            border-inline-start: 1px solid var(--color-border-basic);
            border-block-end: 1px solid var(--color-border-basic);
            margin-inline-start: -1px;
        }

        .tree .tree-child:last-child .connector {
            border-inline-start: 0px none transparent;
        }

        .tree .tree-child:last-child .angle {
            margin-inline-start: 0px;
        }

*[dir='rtl'] .tree .tree-child .angle {
    border-bottom-left-radius: var(--radius-0);
    border-bottom-right-radius: var(--radius-12);
}


.tree .tree-child .right-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

    .tree .tree-child .right-side > a {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        min-width: 0;
        height: 30px;
        padding-inline: var(--gap-8);
        padding-block: var(--gap-4);
        text-decoration: none;
        font-weight: 400;
        font-size: 16px;
        color: var(--color-text-basic);
        border-radius: var(--radius-8);
        transition: background-color 0.2s ease;
        justify-content: flex-start;
        text-align: start;
    }

        .tree .tree-child .right-side > a > span {
            display: block;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: inherit;
        }

        .tree .tree-child .right-side > a:hover {
            background-color: var(--color-bg-inputs-transparent);
            transition: background-color 0.2s ease;
            opacity: 1;
        }

*[dir='rtl'] .tree .tree-child {
    flex-direction: row;
}

    *[dir='rtl'] .tree .tree-child .right-side {
        align-items: flex-start;
        width: 100%;
    }

        *[dir='rtl'] .tree .tree-child .right-side > a {
            justify-content: flex-start;
        }


            *[dir='rtl'] .tree .tree-child .right-side > a > span {
                direction: rtl;
                unicode-bidi: isolate;
                text-align: right;
            }


/* #endregion Trees */
/* #region Link Tabs */
.sitemap-page section.tabs {
    padding-inline: var(--gap-8);
}

@media (max-width: 480px) {
    .sitemap-page .tab-links {
        gap: var(--gap-16);
    }

        .sitemap-page .tab-links .tab {
            font-size: 12px;
        }
}
/* #endregion Link Tabs */
/* #region Breadcrumbs */
.sitemap-page .breadcrumbs {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--gap-8);
}

    .sitemap-page .breadcrumbs .home {
        display: flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-8);
        font-size: 24px;
        transition: background-color 0.2s ease;
        flex-shrink: 0;
    }

        .sitemap-page .breadcrumbs .home:hover {
            background-color: var(--color-bg-inputs-transparent);
            transition: background-color 0.2s ease;
            opacity: 1;
        }

    .sitemap-page .breadcrumbs .breadcrumbs-list {
        display: flex;
        align-items: center;
        gap: 0;
        overflow-x: auto;
        flex-grow: 1;
        white-space: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .sitemap-page .breadcrumbs .breadcrumbs-list::-webkit-scrollbar {
            display: none;
        }

        .sitemap-page .breadcrumbs .breadcrumbs-list .breadcrumb-wrapper {
            display: inline-flex;
            align-items: center;
        }

            .sitemap-page .breadcrumbs .breadcrumbs-list .breadcrumb-wrapper:not(:first-child)::before,
            .sitemap-page .breadcrumbs .breadcrumbs-list .breadcrumb-wrapper:first-child::before {
                content: "/";
                display: inline-block;
                padding-inline-start: var(--gap-8);
                padding-inline-end: var(--gap-8);
                color: var(--color-text-muted);
                pointer-events: none;
                background: transparent !important;
            }

        .sitemap-page .breadcrumbs .breadcrumbs-list .breadcrumb-item {
            display: inline-flex;
            align-items: center;
            font-size: 14px;
            text-decoration: none;
            height: 40px;
            padding-inline: var(--gap-8);
            border-radius: var(--radius-8);
            box-sizing: border-box;
        }

        .sitemap-page .breadcrumbs .breadcrumbs-list a.breadcrumb-item {
            color: var(--color-text-muted);
            transition: background-color 0.2s ease, color 0.2s ease;
        }

            .sitemap-page .breadcrumbs .breadcrumbs-list a.breadcrumb-item:hover {
                text-decoration: none;
                background-color: var(--color-bg-inputs-transparent);
                color: var(--color-text-basic);
            }

        .sitemap-page .breadcrumbs .breadcrumbs-list p.breadcrumb-item {
            color: var(--color-text-basic);
        }

/* #endregion Breadcrumbs */
/* #region Tags */
.sitemap-page .tags-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--gap-32) var(--gap-24);
    width: 100%;
    padding-inline: var(--gap-8);
}

    .sitemap-page .tags-container .tags-group {
        display: flex;
        flex-direction: column;
        gap: var(--gap-12);
    }

    .sitemap-page .tags-container .tags-letter {
        font-size: 16px;
        font-weight: 700;
        line-height: 130%;
        color: var(--color-text-basic);
        margin: 0;
    }

    .sitemap-page .tags-container .tags-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-4);
    }

    .sitemap-page .tags-container .tags-item {
        display: inline-flex;
        align-items: center;
        font-size: 16px;
        font-weight: 400;
        line-height: 130%;
        color: var(--color-text-basic);
        text-decoration: none;
        min-height: 30px;
        padding-inline: var(--gap-8);
        padding-block: var(--gap-4);
        border-radius: var(--radius-8);
        box-sizing: border-box;
        margin-inline-start: calc(var(--gap-8) * -1);
        transition: background-color 0.2s ease, color 0.2s ease;
        word-break: break-word;
        max-width: 100%;
    }

        .sitemap-page .tags-container .tags-item:hover {
            text-decoration: none;
            background-color: var(--color-bg-inputs-transparent);
            color: var(--color-text-basic);
            opacity: 1;
        }

@media (min-width: 576px) {
    .sitemap-page .tags-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .sitemap-page .tags-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .sitemap-page .tags-container {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* #endregion Tags */
/* #region Ads */
.sitemap-page .listings-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-32);
    width: 100%;
    padding-inline: var(--gap-8);
}

    .sitemap-page .listings-container .listings-group {
        display: flex;
        flex-direction: column;
        gap: var(--gap-12);
        width: 100%;
    }

    .sitemap-page .listings-container .listings-letter {
        font-size: 16px;
        font-weight: 700;
        line-height: 130%;
        color: var(--color-text-basic);
        margin: 0;
    }

    .sitemap-page .listings-container .listings-list {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 0 var(--gap-24);
        width: 100%;
    }

    .sitemap-page .listings-container .listings-item-wrapper {
        display: flex;
        min-width: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .sitemap-page .listings-container .listings-item {
        display: inline-flex;
        align-items: center;
        font-size: 16px;
        font-weight: 400;
        line-height: 130%;
        color: var(--color-text-basic);
        text-decoration: none;
        height: 30px;
        padding-inline: var(--gap-8);
        border-radius: var(--radius-8);
        box-sizing: border-box;
        margin-inline-start: calc(var(--gap-8) * -1);
        max-width: 100%;
        min-width: 0;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        .sitemap-page .listings-container .listings-item:hover {
            text-decoration: none;
            background-color: var(--color-bg-inputs-transparent);
            color: var(--color-text-basic);
            opacity: 1;
        }

        .sitemap-page .listings-container .listings-item > span {
            display: block;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (min-width: 768px) {
    .sitemap-page .listings-container .listings-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* #endregion Ads */
/* #region Pagination */
.sitemap-page .pagination {
    margin-block-start: var(--gap-48);
    text-align: center;
}

/* #endregion Pagination */
/* #region Filter Result Link */
.sitemap-page .result-link {
    width: 100%;
    margin-block: var(--gap-24);
    padding-inline: var(--gap-8);
}

    .sitemap-page .result-link > a {
        display: block;
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
        line-height: 140%;
        max-width: 100%;
        color: var(--color-text-primary);
    }

        .sitemap-page .result-link > a > span:first-child {
            color: inherit;
            margin-inline-end: var(--gap-8);
        }


        .sitemap-page .result-link > a > span:last-child {
            color: inherit;
            word-break: normal;
            overflow-wrap: anywhere;
        }

        .sitemap-page .result-link > a:hover {
            text-decoration: underline;
        }
/* #endregion Filter Result Link */
/* #region Filter item */
.sitemap-page .filter-item h3 {
    display: block;
    width: 100%;
    font-weight: 700;
    font-size: 18px;
    line-height: 130%;
    color: var(--color-text-basic);
    padding-inline: var(--gap-8);
    padding-block-end: 0px;
}

.sitemap-page .filter-item .tree-parent {
    font-weight: 400;
    height: auto;
    line-height: 130%;
}
/* #endregion Filter item */
/* #region Filters Grid */

.sitemap-page .filter-group {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--gap-32) var(--gap-24);
    width: 100%;
    margin-block-end: var(--gap-32);
}

    .sitemap-page .filter-group .filter-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        min-width: 0;
    }


        .sitemap-page .filter-group .filter-item h3 {
            font-size: 16px;
            font-weight: 700;
            line-height: 130%;
            color: var(--color-text-basic);
            margin: 0;
            margin-block-end: var(--gap-12);
        }


        .sitemap-page .filter-group .filter-item .tree {
            width: 100%;
        }


@media (min-width: 576px) {
    .sitemap-page .filter-group {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (min-width: 768px) {
    .sitemap-page .filter-group {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .sitemap-page .filter-group {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* #endregion Filters Grid */
/* #region Filters - Keywords */

.sitemap-page .keywords-container {
    width: 100%;
    padding-inline: var(--gap-8);
}

    .sitemap-page .keywords-container .keywords-list {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 0 var(--gap-24);
        width: 100%;
        justify-items: start;
    }

    .sitemap-page .keywords-container .keywords-item {
        display: inline-flex;
        align-items: center;
        font-size: 16px;
        font-weight: 400;
        line-height: 130%;
        color: var(--color-text-basic);
        text-decoration: none;
        min-height: 30px;
        padding-block: var(--gap-4);
        padding-inline: var(--gap-8);
        border-radius: var(--radius-8);
        box-sizing: border-box;
        margin-inline-start: calc(var(--gap-8) * -1);
        max-width: 100%;
        min-width: 0;
        word-break: break-word;
        transition: background-color 0.2s ease, color 0.2s ease;
    }


        .sitemap-page .keywords-container .keywords-item:hover {
            text-decoration: none;
            background-color: var(--color-bg-inputs-transparent);
            color: var(--color-text-basic);
            opacity: 1;
        }


@media (min-width: 576px) {
    .sitemap-page .keywords-container .keywords-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .sitemap-page .keywords-container .keywords-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .sitemap-page .keywords-container .keywords-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* #endregion Filters - Keywords */
/* #region Store Profiles */

.sitemap-page .profiles-container {
    columns: 1;
    column-gap: var(--gap-40);
    width: 100%;
    margin-block-start: var(--gap-24);
    padding-inline: var(--gap-8);
}

    .sitemap-page .profiles-container .profiles-group {
        display: block;
        margin-bottom: var(--gap-24);
    }

    .sitemap-page .profiles-container .profiles-letter {
        font-size: 16px;
        font-weight: 700;
        line-height: 130%;
        color: var(--color-text-basic);
        margin: 0 0 4px 0;
        break-after: avoid;
        column-break-after: avoid;
    }

    .sitemap-page .profiles-container .profiles-list {
        display: block;
    }

    .sitemap-page .profiles-container .profiles-item-wrapper {
        display: flex;
        min-width: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .sitemap-page .profiles-container .profiles-item {
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        line-height: 130%;
        color: var(--color-text-basic);
        text-decoration: none;
        height: 26px;
        padding-inline: var(--gap-8);
        border-radius: var(--radius-8);
        box-sizing: border-box;
        margin-inline-start: calc(var(--gap-8) * -1);
        max-width: 100%;
        min-width: 0;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        .sitemap-page .profiles-container .profiles-item:hover {
            text-decoration: none;
            background-color: var(--color-bg-inputs-transparent);
            color: var(--color-text-basic);
            opacity: 1;
        }

        .sitemap-page .profiles-container .profiles-item > span {
            display: block;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (min-width: 600px) {
    .sitemap-page .profiles-container {
        columns: 2;
    }
}

@media (min-width: 1024px) {
    .sitemap-page .profiles-container {
        columns: 3;
    }
}

@media (min-width: 1400px) {
    .sitemap-page .profiles-container {
        columns: 4;
    }
}

/* #endregion Store Profiles */
/* #region Blog Articles */

.sitemap-page .articles-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--gap-32) var(--gap-40);
    width: 100%;
    margin-block-start: var(--gap-24);
    padding-inline: var(--gap-8);
}

    .sitemap-page .articles-container .articles-group {
        display: flex;
        flex-direction: column;
        gap: var(--gap-12);
        width: 100%;
        min-width: 0;
    }

    .sitemap-page .articles-container .articles-letter {
        font-size: 16px;
        font-weight: 700;
        line-height: 130%;
        color: var(--color-text-basic);
        margin: 0;
    }

    .sitemap-page .articles-container .articles-list {
        display: block;
        width: 100%;
    }

    .sitemap-page .articles-container .articles-item-wrapper {
        display: block;
        width: 100%;
        text-align: start;
    }

    .sitemap-page .articles-container .articles-item {
        display: inline-block;
        vertical-align: middle;
        font-size: 16px;
        font-weight: 400;
        text-decoration: none;
        color: var(--color-text-basic);
        height: 30px;
        line-height: 22px;
        padding-inline: var(--gap-8);
        padding-block: var(--gap-4);
        border-radius: var(--radius-8);
        box-sizing: border-box;
        margin-inline-start: calc(var(--gap-8) * -1);
        max-width: 100%;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        .sitemap-page .articles-container .articles-item:hover {
            text-decoration: none;
            background-color: var(--color-bg-inputs-transparent);
            color: var(--color-text-basic);
            opacity: 1;
        }

        .sitemap-page .articles-container .articles-item > span {
            display: block;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (min-width: 992px) {
    .sitemap-page .articles-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* #endregion Blog Articles */

/* #endregion ===================================/ Sitemap ============================================= */
/* #region ================================= Boosting services ========================================= */

.edit-ad-page {
    padding-block-end: var(--gap-100);
}

.mobile .edit-ad-page.content.boosting-services {
    gap: 8px;
    display: flex;
    flex-direction: column;
    padding-block-end: 32px;
}
/* #region Heading */
.edit-ad-page .heading {
    display: flex;
    flex-direction: column;
    padding-block-start: var(--gap-24);
    padding-block-end: var(--gap-32);
}

    .edit-ad-page .heading h1 {
        font-size: 32px;
        line-height: 120%;
        color: var(--color-text-basic);
        margin-block-end: var(--gap-12);
        font-weight: 700;
    }

    .edit-ad-page .heading p {
        font-size: 14px;
        line-height: 130%;
        color: var(--color-text-muted);
        font-weight: 400;
    }

@media (width: 767px) {
    .edit-ad-page .heading {
        padding-block-start: var(--gap-32);
        padding-block-end: var(--gap-32);
    }
}


@media (max-width: 600px) {
    .edit-ad-page .heading h1 {
        font-size: 24px;
    }
}
/* #endregion Heading */
/* #region Content */
.edit-ad-page .boosting-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-16);
    width: 100%;
    box-sizing: border-box;
    margin-block-end: var(--gap-48);
}

.edit-ad-page .boosting-service-item {
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

    .edit-ad-page .boosting-service-item input[type="checkbox"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

@media (max-width:991px) {
    .edit-ad-page .boosting-services {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* #endregion Content */
/* #region Boosting item */
.edit-ad-page .boosting-service-item .panel {
    display: flex;
    width: 100%;
    min-height: 220px;
    height: 100%;
    justify-items: center;
    background-color: var(--color-bg-panel);
    border-radius: var(--gap-12);
    padding: var(--gap-16);
    gap: var(--gap-16);
}

.edit-ad-page .boosting-service-item .checked:checked ~ .panel {
    background-color: var(--color-bg-primary-light);
}

.edit-ad-page .boosting-service-item .col-decoration {
    display: flex;
    width: 130px;
    height: 100%;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
}



@media (max-width: 1199px) {
    .edit-ad-page .boosting-service-item .col-decoration {
        width: 100px;
    }
}

@media (max-width: 991px) {
    .edit-ad-page .boosting-service-item .col-decoration {
        width: 130px;
        align-self: center;
    }

    .edit-ad-page .boosting-service-item .panel {
        min-height: 200px;
        height: auto;
    }
}

@media (max-width: 500px) {
    .edit-ad-page .boosting-service-item .col-decoration {
        width: 100px;
    }
}

@media (max-width: 374px) {
    .edit-ad-page .boosting-service-item .panel {
        display: block;
    }
}

.edit-ad-page .boosting-service-item .col-controls {
    display: flex;
    width: 130px;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 1199px) {
    .edit-ad-page .boosting-service-item .col-controls {
        width: 100px;
    }
}

@media (max-width: 991px) {
    .edit-ad-page .boosting-service-item .col-controls {
        width: 130px;
        align-self: center;
    }
}

@media (max-width: 500px) {
    .edit-ad-page .boosting-service-item .col-controls {
        width: 100px;
    }
}

@media (max-width: 450px) {
    .edit-ad-page .boosting-service-item .col-controls .text-content {
        display: none;
    }

    .edit-ad-page .boosting-service-item .col-controls {
        width: auto;
    }
}

.edit-ad-page .boosting-service-item .panel .col-description {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
}

    .edit-ad-page .boosting-service-item .panel .col-description .description {
        height: 100%;
    }

    .edit-ad-page .boosting-service-item .panel .col-description .description-footer {
        flex-shrink: 0;
    }

.edit-ad-page .boosting-service-item .panel .title {
    font-size: 18px;
    font-weight: 700;
    line-height: 130%;
    color: var(--color-text-basic);
    width: 100%;
    padding-inline-start: 0px;
    margin: 0px;
}

@media (max-width: 500px) {
    .edit-ad-page .boosting-service-item .panel .title {
        font-size: 14px;
    }
}


.edit-ad-page .boosting-service-item .panel .description {
    font-size: 14px;
    font-weight: 400;
    line-height: 130%;
    color: var(--color-text-muted);
    width: 100%;
}

.edit-ad-page .boosting-service-item .panel .price {
    font-size: 14px;
    line-height: 130%;
    font-weight: 700;
    color: var(--color-text-basic);
    padding-block-end: var(--gap-8);
}

    .edit-ad-page .boosting-service-item .panel .price bdi {
        padding-inline-end: var(--gap-4);
    }

*[dir='rtl'] .edit-ad-page .boosting-service-item .panel .price bdi {
    padding-inline-end: 0px;
    padding-inline-start: var(--gap-4);
}

.edit-ad-page .boosting-service-item .panel .price bdi span:last-child {
    padding-inline-start: var(--gap-4);
}

.edit-ad-page .boosting-service-item .panel .price .old-price {
    display: none;
}

.edit-ad-page .boosting-service-item .panel .price.discount .old-price {
    display: block;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.edit-ad-page .boosting-service-item .panel .price.discount .new-price {
    color: var(--color-text-danger);
}

.edit-ad-page .boosting-service-item .next-payment {
    display: none;
    font-size: 14px;
    line-height: 130%;
    color: var(--color-text-muted);
    padding-block-end: var(--gap-4);
}

    .edit-ad-page .boosting-service-item .next-payment span:first-child {
        padding-inline-end: var(--gap-8);
    }

.edit-ad-page .boosting-service-item.paid .autorenew:checked ~ .panel .next-payment {
    display: block;
}

.edit-ad-page .boosting-service-item.paid .autorenew:checked ~ .panel .col-controls {
    display: none;
}

@media (max-width: 374px) {

    .edit-ad-page .boosting-service-item .panel .description-footer {
        justify-items: center;
    }

    .edit-ad-page .boosting-service-item .panel .title {
        text-align: center;
        font-size: 18px;
        padding-block-start: var(--gap-8);
    }

    .edit-ad-page .boosting-service-item .panel .description {
        text-align: center;
        padding-block-end: var(--gap-24);
    }

    .edit-ad-page .boosting-service-item .panel .subscription-details {
        text-align: center;
    }

    .edit-ad-page .boosting-service-item .panel .price {
        text-align: center;
    }



    .edit-ad-page .boosting-service-item .panel .btn-plus {
        margin-block-start: var(--gap-24);
    }
}

.edit-ad-page .boosting-service-item .clipart {
    display: block;
    width: 130px;
    height: 130px;
}


.edit-ad-page .boosting-service-item .clipart {
    display: block;
    width: 130px;
    height: 130px;
}

    .edit-ad-page .boosting-service-item .clipart .cloud-1,
    .edit-ad-page .boosting-service-item .clipart .cloud-2,
    .edit-ad-page .boosting-service-item .clipart .cloud-3,
    .edit-ad-page .boosting-service-item .clipart .cloud-4,
    .edit-ad-page .boosting-service-item .clipart .cloud-5,
    .edit-ad-page .boosting-service-item .clipart .cloud-6,
    .edit-ad-page .boosting-service-item .clipart .cloud-7,
    .edit-ad-page .boosting-service-item .clipart .cloud-8,
    .edit-ad-page .boosting-service-item .clipart .cloud-9,
    .edit-ad-page .boosting-service-item .clipart .cloud-10,
    .edit-ad-page .boosting-service-item .clipart .cloud-11 {
        background-color: var(--color-bg-alt);
    }



@media (max-width: 1199px) {
    .edit-ad-page .boosting-service-item .clipart {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 991px) {
    .edit-ad-page .boosting-service-item .clipart {
        width: 130px;
        height: 130px;
    }
}

@media (max-width: 500px) {
    .edit-ad-page .boosting-service-item .clipart {
        width: 100px;
        height: 100px;
    }
}

.edit-ad-page .boosting-service-item.paid .clipart {
    display: none;
}

.edit-ad-page .boosting-service-item .radial-progress {
    display: none;
}


.edit-ad-page .boosting-service-item.paid .radial-progress {
    display: flex;
}
/* #endregion Boosting item */
/* #region Subscription */
.edit-ad-page .boosting-service-item.subscription .price,
.edit-ad-page .boosting-service-item.subscription .next-payment,
.edit-ad-page .boosting-service-item.subscription .switch,
.edit-ad-page .boosting-service-item.subscription .col-controls {
    display: none;
}

.edit-ad-page .boosting-service-item .subscription-details {
    display: none;
}

.edit-ad-page .boosting-service-item.subscription .subscription-details {
    display: flex;
    width: 100%;
    gap: var(--gap-4);
    align-items: center;
    padding-block-end: var(--gap-8);
}

    .edit-ad-page .boosting-service-item.subscription .subscription-details .ci-pazar {
        flex-shrink: 0;
        font-size: 48px;
    }

    .edit-ad-page .boosting-service-item.subscription .subscription-details .text-content {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: var(--gap-2);
    }

        .edit-ad-page .boosting-service-item.subscription .subscription-details .text-content p {
            font-weight: 700;
            color: var(--color-text-basic);
            font-size: 14px;
        }

        .edit-ad-page .boosting-service-item.subscription .subscription-details .text-content a {
            font-weight: 700;
            color: var(--color-text-primary);
            font-size: 14px;
            text-decoration: none;
        }

@media (max-width: 500px) {
    .edit-ad-page .boosting-service-item.subscription .subscription-details .ci-pazar {
        display: none;
    }
}

/* #endregion Subscription */
/* #region Radial progress */
.edit-ad-page .boosting-service-item .radial-progress {
    width: 130px;
}

    .edit-ad-page .boosting-service-item .radial-progress .days-label {
        font-size: 11px;
        color: var(--color-text-muted);
        font-weight: bold;
        margin-top: 4cqw;
        letter-spacing: normal;
    }

    .edit-ad-page .boosting-service-item .radial-progress .inner-circle {
        background-color: var(--color-bg-panel);
    }


.edit-ad-page .boosting-service-item .checked:checked ~ .panel .radial-progress .inner-circle {
    background-color: var(--color-bg-primary-light);
}


@media (max-width: 1199px) {
    .edit-ad-page .boosting-service-item .radial-progress .days-label {
        font-size: 10px;
    }
}

@media (max-width: 991px) {
    .edit-ad-page .boosting-service-item .radial-progress .days-label {
        font-size: 11px;
    }
}

@media (max-width: 500px) {
    .edit-ad-page .boosting-service-item .radial-progress .days-label {
        font-size: 10px;
    }
}
/* #endregion Radial progress */
/* #region Switch */
.edit-ad-page .boosting-service-item .switch {
    display: flex;
    align-items: center;
    gap: var(--gap-8);
    cursor: pointer;
    width: auto;
}

.edit-ad-page .boosting-service-item .autorenew:checked ~ .panel .switch i {
    border: 0px none transparent;
}

    .edit-ad-page .boosting-service-item .autorenew:checked ~ .panel .switch i:before {
        background-color: var(--color-bg-primary);
    }

    .edit-ad-page .boosting-service-item .autorenew:checked ~ .panel .switch i:after {
        height: 18px;
        width: 18px;
        background-color: var(--color-bg-alt);
        position: absolute;
        inset-inline-end: 3px !important;
        left: auto;
        top: 3px;
    }
/* #endregion Switch */
/* #region Add extra days button */
.edit-ad-page .boosting-service-item .btn-plus {
    display: flex;
    flex-direction: column;
    gap: var(--gap-8);
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .edit-ad-page .boosting-service-item .btn-plus .icon-plus {
        display: flex;
        width: 50px;
        height: 50px;
        justify-content: center;
        align-items: center;
        border-radius: var(--radius-circle);
        background-color: var(--color-bg-primary-light);
        font-size: 24px;
        background-image: none;
    }

    .edit-ad-page .boosting-service-item .btn-plus .icon-check {
        display: none;
        width: 50px;
        height: 50px;
        justify-content: center;
        align-items: center;
        border-radius: var(--radius-circle);
        background-color: var(--color-bg-primary);
        font-size: 18px;
        background-image: none;
    }

.edit-ad-page .boosting-service-item .checked:checked ~ .panel .btn-plus .icon-plus {
    display: none;
}

.edit-ad-page .boosting-service-item .checked:checked ~ .panel .btn-plus .icon-check {
    display: flex;
}

.edit-ad-page .boosting-service-item .btn-plus .text-content {
    font-size: 14px;
    line-height: 120%;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: center;
}
/* #endregion Add extra days button */
/* #region Content footer */
.edit-ad-page .content-footer {
    display: flex;
    border-top: 1px solid var(--color-border-muted);
    padding-block-start: 24px;
    gap: var(--gap-8);
    justify-content: space-between;
    width: 100%;
}
/* #endregion Content footer */
/* #region My Ads */
.myads-page .boosting-services-section {
    display: flex;
    width: 100%;
    padding-inline: var(--gap-8);
    background-color: var(--color-bg-inputs-transparent);
    padding-block: 10px;
}

    .myads-page .boosting-services-section .shimm-content {
        vertical-align: middle;
    }

        .myads-page .boosting-services-section .shimm-content .title {
            text-transform: uppercase;
            padding-inline-end: var(--gap-4);
        }

        .myads-page .boosting-services-section .shimm-content .counter {
            color: var(--color-text-muted);
            display: none;
        }

    .myads-page .boosting-services-section.services-connected {
        background-color: var(--color-bg-primary-light);
    }

        .myads-page .boosting-services-section.services-connected .shimm-content .counter {
            display: inline-block;
        }

    .myads-page .boosting-services-section .shimm-content .boost {
        border: 0px none transparent;
        color: var(--color-text-primary);
        font-weight: 700;
        display: inline-block;
        margin-inline-start: var(--gap-8);
        background: transparent;
        cursor: pointer;
    }

@media (max-width: 500px) {
    .myads-page .boosting-services-section .shimm-content .title {
        display: none;
    }

    .myads-page .boosting-services-section .shimm-content .boost {
        margin-inline-start: 0px;
        padding-inline: 0px;
    }

    .myads-page .boosting-services-section .shimm-content .counter {
        position: absolute;
        inset-inline-end: var(--gap-8);
    }
}
/* #endregion My Ads */
/* #endregion =============================/ Boosting services ========================================= */
/* #region ========================== Modal DropUp: Boosting services ================================== */

@media (max-width: 700px) {
    .dropup-modal.boosting-services .modal-content {
        padding-block-start: 0px;
    }
}

/* #region Heading */
.dropup-modal.boosting-services .heading {
    display: flex;
    flex-direction: column;
    padding-block-start: var(--gap-16);
    padding-block-end: var(--gap-16);
}

    .dropup-modal.boosting-services .heading h2 {
        font-size: 24px;
        line-height: 120%;
        color: var(--color-text-basic);
        font-weight: 700;
    }

    .dropup-modal.boosting-services .heading p {
        font-size: 14px;
        line-height: 130%;
        color: var(--color-text-muted);
        font-weight: 400;
    }

@media (width: 767px) {
    .dropup-modal.boosting-services .heading {
        padding-block-start: var(--gap-32);
        padding-block-end: var(--gap-32);
    }
}

/* #endregion Heading */
/* #region Content */
.dropup-modal.boosting-services .boosting-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-16);
    width: 100%;
    box-sizing: border-box;
}

.dropup-modal.boosting-services .boosting-service-item {
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

    .dropup-modal.boosting-services .boosting-service-item input[type="checkbox"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

@media (max-width:991px) {
    .dropup-modal.boosting-services .boosting-services {
        grid-template-columns: repeat(1, 1fr);
    }
}
/* #endregion Content */
/* #region Boosting item */
.dropup-modal.boosting-services .boosting-service-item .panel {
    display: flex;
    width: 100%;
    min-height: 200px;
    height: 100%;
    justify-items: center;
    background-color: var(--color-bg-panel);
    border-radius: var(--gap-12);
    padding: var(--gap-16);
    gap: var(--gap-16);
}

.dropup-modal.boosting-services .boosting-service-item .checked:checked ~ .panel {
    background-color: var(--color-bg-primary-light);
}

.dropup-modal.boosting-services .boosting-service-item .col-decoration {
    display: flex;
    width: 130px;
    height: 100%;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
}

@media (max-width: 1199px) {
    .dropup-modal.boosting-services .boosting-service-item .col-decoration {
        width: 100px;
    }
}

@media (max-width: 991px) {
    .dropup-modal.boosting-services .boosting-service-item .col-decoration {
        width: 130px;
        align-self: center;
    }

    .dropup-modal.boosting-services .boosting-service-item .panel {
        min-height: 150px;
        height: auto;
    }
}

@media (max-width: 500px) {
    .dropup-modal.boosting-services .boosting-service-item .col-decoration {
        width: 100px;
    }
}

@media (max-width: 374px) {
    .dropup-modal.boosting-services .boosting-service-item .panel {
        display: block;
    }
}

.dropup-modal.boosting-services .boosting-service-item .col-controls {
    display: flex;
    width: 130px;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 1199px) {
    .dropup-modal.boosting-services .boosting-service-item .col-controls {
        width: 100px;
    }
}

@media (max-width: 991px) {
    .dropup-modal.boosting-services .boosting-service-item .col-controls {
        width: 130px;
        align-self: center;
    }
}

@media (max-width: 500px) {
    .dropup-modal.boosting-services .boosting-service-item .col-controls {
        width: 100px;
    }
}

@media (max-width: 450px) {
    .dropup-modal.boosting-services .boosting-service-item .col-controls .text-content {
        display: none;
    }

    .dropup-modal.boosting-services .boosting-service-item .col-controls {
        width: auto;
    }
}

.dropup-modal.boosting-services .boosting-service-item .panel .col-description {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
}

    .dropup-modal.boosting-services .boosting-service-item .panel .col-description .description {
        height: 100%;
    }

    .dropup-modal.boosting-services .boosting-service-item .panel .col-description .description-footer {
        flex-shrink: 0;
    }

.dropup-modal.boosting-services .boosting-service-item .panel .title {
    font-size: 18px;
    font-weight: 700;
    line-height: 130%;
    color: var(--color-text-basic);
    width: 100%;
}

@media (max-width: 500px) {
    .dropup-modal.boosting-services .boosting-service-item .panel .title {
        font-size: 14px;
    }
}


.dropup-modal.boosting-services .boosting-service-item .panel .description {
    font-size: 14px;
    font-weight: 400;
    line-height: 130%;
    color: var(--color-text-muted);
    width: 100%;
}

.dropup-modal.boosting-services .boosting-service-item .panel .price {
    font-size: 14px;
    line-height: 130%;
    font-weight: 700;
    color: var(--color-text-basic);
    padding-block-end: var(--gap-8);
}

    .dropup-modal.boosting-services .boosting-service-item .panel .price .new-price,
    .dropup-modal.boosting-services .boosting-service-item .panel .price .old-price {
        font-size: 14px;
    }

    .dropup-modal.boosting-services .boosting-service-item .panel .price bdi {
        padding-inline-end: var(--gap-4);
    }

*[dir='rtl'] .dropup-modal.boosting-services .boosting-service-item .panel .price bdi {
    padding-inline-end: 0px;
    padding-inline-start: var(--gap-4);
}

.dropup-modal.boosting-services .boosting-service-item .panel .price bdi span:last-child {
    padding-inline-start: var(--gap-4);
}

.dropup-modal.boosting-services .boosting-service-item .panel .price .old-price {
    display: none;
}

.dropup-modal.boosting-services .boosting-service-item .panel .price.discount .old-price {
    display: block;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.dropup-modal.boosting-services .boosting-service-item .panel .price.discount .new-price {
    color: var(--color-text-danger);
}

.dropup-modal.boosting-services .boosting-service-item .next-payment {
    display: none;
    font-size: 14px;
    line-height: 130%;
    color: var(--color-text-muted);
    padding-block-end: var(--gap-4);
}

    .dropup-modal.boosting-services .boosting-service-item .next-payment span:first-child {
        padding-inline-end: var(--gap-8);
    }

.dropup-modal.boosting-services .boosting-service-item.paid .autorenew:checked ~ .panel .next-payment {
    display: block;
}

.dropup-modal.boosting-services .boosting-service-item.paid .autorenew:checked ~ .panel .col-controls {
    display: none;
}

@media (max-width: 374px) {

    .dropup-modal.boosting-services .boosting-service-item .panel .description-footer {
        justify-items: center;
    }

    .dropup-modal.boosting-services .boosting-service-item .panel .title {
        text-align: center;
        font-size: 18px;
        padding-block-start: var(--gap-8);
    }

    .dropup-modal.boosting-services .boosting-service-item .panel .description {
        text-align: center;
        padding-block-end: var(--gap-24);
    }

    .dropup-modal.boosting-services .boosting-service-item .panel .subscription-details {
        text-align: center;
    }

    .dropup-modal.boosting-services .boosting-service-item .panel .price {
        text-align: center;
    }



    .dropup-modal.boosting-services .boosting-service-item .panel .btn-plus {
        margin-block-start: var(--gap-24);
    }
}

.dropup-modal.boosting-services .boosting-service-item .clipart {
    display: block;
    width: 130px;
    height: 130px;
}


.dropup-modal.boosting-services .boosting-service-item .clipart {
    display: block;
    width: 130px;
    height: 130px;
}

    .dropup-modal.boosting-services .boosting-service-item .clipart .cloud-1,
    .dropup-modal.boosting-services .boosting-service-item .clipart .cloud-2,
    .dropup-modal.boosting-services .boosting-service-item .clipart .cloud-3,
    .dropup-modal.boosting-services .boosting-service-item .clipart .cloud-4,
    .dropup-modal.boosting-services .boosting-service-item .clipart .cloud-5,
    .dropup-modal.boosting-services .boosting-service-item .clipart .cloud-6,
    .dropup-modal.boosting-services .boosting-service-item .clipart .cloud-7,
    .dropup-modal.boosting-services .boosting-service-item .clipart .cloud-8,
    .dropup-modal.boosting-services .boosting-service-item .clipart .cloud-9,
    .dropup-modal.boosting-services .boosting-service-item .clipart .cloud-10,
    .dropup-modal.boosting-services .boosting-service-item .clipart .cloud-11 {
        background-color: var(--color-bg-alt);
    }



@media (max-width: 1199px) {
    .dropup-modal.boosting-services .boosting-service-item .clipart {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 991px) {
    .dropup-modal.boosting-services .boosting-service-item .clipart {
        width: 130px;
        height: 130px;
    }
}

@media (max-width: 500px) {
    .dropup-modal.boosting-services .boosting-service-item .clipart {
        width: 100px;
        height: 100px;
    }
}

.dropup-modal.boosting-services .boosting-service-item.paid .clipart {
    display: none;
}

.dropup-modal.boosting-services .boosting-service-item .radial-progress {
    display: none;
}


.dropup-modal.boosting-services .boosting-service-item.paid .radial-progress {
    display: flex;
}
/* #endregion Boosting item */
/* #region Subscription */
.dropup-modal.boosting-services .boosting-service-item.subscription .price,
.dropup-modal.boosting-services .boosting-service-item.subscription .next-payment,
.dropup-modal.boosting-services .boosting-service-item.subscription .switch,
.dropup-modal.boosting-services .boosting-service-item.subscription .col-controls {
    display: none;
}

.dropup-modal.boosting-services .boosting-service-item .subscription-details {
    display: none;
}

.dropup-modal.boosting-services .boosting-service-item.subscription .subscription-details {
    display: flex;
    width: 100%;
    gap: var(--gap-4);
    align-items: center;
    padding-block-end: var(--gap-8);
}

    .dropup-modal.boosting-services .boosting-service-item.subscription .subscription-details .ci-pazar {
        flex-shrink: 0;
        font-size: 48px;
    }

    .dropup-modal.boosting-services .boosting-service-item.subscription .subscription-details .text-content {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: var(--gap-2);
    }

        .dropup-modal.boosting-services .boosting-service-item.subscription .subscription-details .text-content p {
            font-weight: 700;
            color: var(--color-text-basic);
            font-size: 14px;
        }

        .dropup-modal.boosting-services .boosting-service-item.subscription .subscription-details .text-content a {
            font-weight: 700;
            color: var(--color-text-primary);
            font-size: 14px;
            text-decoration: none;
        }

@media (max-width: 500px) {
    .dropup-modal.boosting-services .boosting-service-item.subscription .subscription-details .ci-pazar {
        display: none;
    }
}

/* #endregion Subscription */
/* #region Radial progress */
.dropup-modal.boosting-services .boosting-service-item .radial-progress {
    width: 130px;
}

    .dropup-modal.boosting-services .boosting-service-item .radial-progress .days-label {
        font-size: 11px;
        color: var(--color-text-muted);
        font-weight: bold;
        margin-top: 4cqw;
        letter-spacing: normal;
    }

    .dropup-modal.boosting-services .boosting-service-item .radial-progress .inner-circle {
        background-color: var(--color-bg-panel);
    }


.dropup-modal.boosting-services .boosting-service-item .checked:checked ~ .panel .radial-progress .inner-circle {
    background-color: var(--color-bg-primary-light);
}


@media (max-width: 1199px) {
    .dropup-modal.boosting-services .boosting-service-item .radial-progress .days-label {
        font-size: 10px;
    }
}

@media (max-width: 991px) {
    .dropup-modal.boosting-services .boosting-service-item .radial-progress .days-label {
        font-size: 11px;
    }
}

@media (max-width: 500px) {
    .dropup-modal.boosting-services .boosting-service-item .radial-progress .days-label {
        font-size: 10px;
    }
}
/* #endregion Radial progress */
/* #region Switch */
.dropup-modal.boosting-services .boosting-service-item .switch {
    display: flex;
    align-items: center;
    gap: var(--gap-8);
    cursor: pointer;
    width: auto;
}

.dropup-modal.boosting-services .boosting-service-item .autorenew:checked ~ .panel .switch i {
    border: 0px none transparent;
}

    .dropup-modal.boosting-services .boosting-service-item .autorenew:checked ~ .panel .switch i:before {
        background-color: var(--color-bg-primary);
    }

    .dropup-modal.boosting-services .boosting-service-item .autorenew:checked ~ .panel .switch i:after {
        height: 18px;
        width: 18px;
        background-color: var(--color-bg-alt);
        position: absolute;
        inset-inline-end: 3px !important;
        left: auto;
        top: 3px;
    }
/* #endregion Switch */
/* #region Add extra days button */
.dropup-modal.boosting-services .boosting-service-item .btn-plus {
    display: flex;
    flex-direction: column;
    gap: var(--gap-8);
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .dropup-modal.boosting-services .boosting-service-item .btn-plus .icon-plus {
        display: flex;
        width: 50px;
        height: 50px;
        justify-content: center;
        align-items: center;
        border-radius: var(--radius-circle);
        background-color: var(--color-bg-primary-light);
        font-size: 24px;
    }

    .dropup-modal.boosting-services .boosting-service-item .btn-plus .icon-check {
        display: none;
        width: 50px;
        height: 50px;
        justify-content: center;
        align-items: center;
        border-radius: var(--radius-circle);
        background-color: var(--color-bg-primary);
        font-size: 18px;
    }

.dropup-modal.boosting-services .boosting-service-item .checked:checked ~ .panel .btn-plus .icon-plus {
    display: none;
}

.dropup-modal.boosting-services .boosting-service-item .checked:checked ~ .panel .btn-plus .icon-check {
    display: flex;
}

.dropup-modal.boosting-services .boosting-service-item .btn-plus .text-content {
    font-size: 14px;
    line-height: 120%;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: center;
}
/* #endregion Add extra days button */
/* #endregion ======================/ Modal DropUp: Boosting services ================================== */
/* #region ==================================== Shopping Cart ========================================== */
.page-shopping-cart h1,
.page-shopping-cart .h1 {
    font-size: 32px;
    color: var(--color-text-basic);
    width: 100%;
    font-weight: 700;
    margin: 0px;
    padding-block-start: var(--gap-24);
    padding-block-end: var(--gap-32);
}

@media (max-width: 600px) {
    .page-shopping-cart h1,
    .page-shopping-cart .h1 {
        font-size: 24px;
    }
}
/* #region -------------------- Sign in Callout --------------------- */
.page-shopping-cart .section-signin-callout {
    padding-block-end: var(--gap-32);
}

    .page-shopping-cart .section-signin-callout .panel {
        display: flex;
        width: 100%;
        background: var(--color-bg-panel);
        font-size: 14px;
        font-weight: 500;
        line-height: 130%;
        color: var(--color-text-muted);
        padding: var(--gap-16);
        border-radius: var(--radius-16);
        gap: var(--gap-8);
        align-items: center;
        flex-wrap: wrap;
    }

        .page-shopping-cart .section-signin-callout .panel a {
            display: flex;
            gap: var(--gap-4);
            text-decoration: none;
            font-weight: 700;
            align-items: center;
            flex-shrink: 0;
        }

        .page-shopping-cart .section-signin-callout .panel i {
            font-size: 24px;
            flex-shrink: 0;
        }

@media (max-width: 991px) {
    .page-shopping-cart .section-signin-callout .panel {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}
/* #endregion ----------------/ Sign in Callout --------------------- */
/* #region --------------------- Empty Content ---------------------- */
.page-shopping-cart .section-empty-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16);
    padding-block-start: var(--gap-48);
    padding-block-end: var(--gap-128);
}

    .page-shopping-cart .section-empty-content .description {
        display: flex;
        flex-direction: column;
        gap: var(--gap-16);
        padding-block-end: var(--gap-24);
    }

    .page-shopping-cart .section-empty-content i {
        display: block;
        margin-inline: auto;
        font-size: 100px;
    }

*[dir='rtl'] .page-shopping-cart .section-empty-content i {
    transform: rotateY(180deg);
}

.page-shopping-cart .section-empty-content h2 {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 130%;
    color: var(--color-text-basic);
    text-align: center;
}

.page-shopping-cart .section-empty-content p {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 130%;
    color: var(--color-text-muted);
    text-align: center;
}

.page-shopping-cart .section-empty-content .controls {
    display: block;
    text-align: center;
    text-align: center;
}

    .page-shopping-cart .section-empty-content .controls .new-btn {
        min-width: 200px
    }
/* #endregion -----------------/ Empty Content ---------------------- */
/* #region --------------------- Main Content ----------------------- */
.page-shopping-cart section.main-content {
    display: flex;
    gap: var(--gap-32);
    padding-block-end: var(--gap-128);
}
    /* #region -------- Left side --------- */
    .page-shopping-cart section.main-content > .left-side {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: var(--gap-16);
        flex: 1;
        min-width: 0px;
    }
    /* #region List header */
    .page-shopping-cart section.main-content .list-header {
        display: flex;
        border-bottom: 1px solid var(--color-border-muted);
        gap: var(--gap-16);
        padding-block: var(--gap-8);
        padding-inline: var(--gap-16);
        align-items: center;
    }

        .page-shopping-cart section.main-content .list-header p {
            width: 100%;
            display: flex;
            gap: var(--gap-4);
            font-size: 14px;
            font-weight: 500;
            color: var(--color-text-basic);
            line-height: 130%;
        }

        .page-shopping-cart section.main-content .list-header .btn-remove {
            display: flex;
            width: 50px;
            height: 50px;
            align-items: center;
            justify-content: center;
            border: 0px none transparent;
            font-size: 24px;
            padding: 0px;
            flex-shrink: 0;
            background: transparent;
            transition: background 0.2s ease;
            cursor: pointer;
            border-radius: var(--radius-8);
        }

            .page-shopping-cart section.main-content .list-header .btn-remove:hover {
                background: var(--color-bg-inputs-transparent);
                transition: background 0.2s ease;
            }

@media (max-width: 767px) {
    .page-shopping-cart section.main-content .list-header {
        flex-direction: row-reverse;
    }

        .page-shopping-cart section.main-content .list-header p {
            justify-content: end;
        }
}
/* #endregion List header */

/* #region Items group */
.page-shopping-cart section.main-content .items-group {
    display: flex;
    width: 100%;
    border-radius: var(--radius-16);
    border: 1px solid var(--color-border-muted);
    flex-direction: column;
}

    .page-shopping-cart section.main-content .items-group .heading {
        display: flex;
        width: 100%;
        padding-inline: var(--gap-16);
        padding-block-start: var(--gap-16);
        gap: var(--gap-16);
        align-items: center;
    }

        .page-shopping-cart section.main-content .items-group .heading .left-side {
            width: 100%;
            display: flex;
            gap: var(--gap-8);
            flex: 1;
            min-width: 0px;
        }

        .page-shopping-cart section.main-content .items-group .heading .name {
            width: 100%;
            flex-direction: column;
            text-decoration: none;
            flex: 1;
            min-width: 0px;
        }

            .page-shopping-cart section.main-content .items-group .heading .name h4 {
                width: 100%;
                color: var(--color-text-basic);
                font-size: 16px;
                font-weight: 700;
                line-height: 130%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: block;
            }

            .page-shopping-cart section.main-content .items-group .heading .name p {
                width: 100%;
                color: var(--color-text-muted);
                font-size: 14px;
                font-weight: 500;
                line-height: 130%;
                display: flex;
                gap: var(--gap-4);
            }

    .page-shopping-cart section.main-content .items-group .avatar-block {
        display: flex;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        position: relative;
        text-decoration: none;
    }

        .page-shopping-cart section.main-content .items-group .avatar-block .logo-container {
            display: none;
            width: 100%;
            height: 100%;
            border-radius: var(--radius-8);
            background-color: var(--color-bg-panel);
            position: relative;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            overflow: hidden;
        }

        .page-shopping-cart section.main-content .items-group .avatar-block.store .logo-container {
            display: flex;
        }

        .page-shopping-cart section.main-content .items-group .avatar-block.person .logo-container {
            display: none;
        }

        .page-shopping-cart section.main-content .items-group .avatar-block .user-avatar {
            display: none;
        }

        .page-shopping-cart section.main-content .items-group .avatar-block.person .user-avatar {
            display: block;
            width: 100%;
            height: 100%;
        }

            .page-shopping-cart section.main-content .items-group .avatar-block.person .user-avatar i {
                font-size: 18px;
            }

        .page-shopping-cart section.main-content .items-group .avatar-block.online .user-avatar {
            animation: none;
            transform: none;
        }

        .page-shopping-cart section.main-content .items-group .avatar-block .logo-container img {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1;
            inset-inline-start: 0px;
            inset-block-start: 0px;
            filter: brightness(0.97);
            object-fit: cover;
        }

    .page-shopping-cart section.main-content .items-group .online-status {
        display: none;
        width: 16px;
        height: 16px;
        position: absolute;
        z-index: 2;
        border-radius: var(--radius-circle);
        background: var(--color-bg-success);
        border: 3px solid var(--color-bg-main);
    }

    .page-shopping-cart section.main-content .items-group .online .online-status {
        display: block;
    }

    .page-shopping-cart section.main-content .items-group .store .online-status {
        inset-inline-end: -3px;
        inset-block-end: -3px;
    }

    .page-shopping-cart section.main-content .items-group .person .online-status {
        inset-inline-end: -2px;
        inset-block-end: -2px;
    }


    .page-shopping-cart section.main-content .items-group .heading .right-side {
        flex-shrink: 0;
    }

        .page-shopping-cart section.main-content .items-group .heading .right-side a {
            text-decoration: none;
            font-size: 14px;
            font-weight: 700;
            color: var(--color-text-primary);
            line-height: 130%;
        }

        .page-shopping-cart section.main-content .items-group .heading .right-side .dots-menu {
            display: none;
        }

.page-shopping-cart section.main-content .item {
    display: flex;
    width: 100%;
    position: relative;
    border-bottom: 1px solid var(--color-border-muted);
    padding-block: var(--gap-16);
}

    .page-shopping-cart section.main-content .item:last-child {
        border-bottom: 0px none transparent;
    }

    .page-shopping-cart section.main-content .item .col-checker {
        display: flex;
        padding: var(--gap-16);
        justify-content: center;
        align-items: center;
    }


    .page-shopping-cart section.main-content .item .image-container {
        display: flex;
        position: relative;
        width: 170px;
        height: 200px;
        background-color: var(--color-bg-panel);
        border-radius: var(--radius-12);
        overflow: hidden;
        font-size: 48px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .page-shopping-cart section.main-content .item .image-container img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            z-index: 1;
            inset-inline-start: 0px;
            inset-block-start: 0px;
            filter: brightness(0.97);
        }

    .page-shopping-cart section.main-content .item .main-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-8);
        flex: 1 0 0;
        align-self: stretch;
    }

    .page-shopping-cart section.main-content .item .col-details {
        display: flex;
        padding-inline: var(--gap-16);
        flex-direction: column;
        align-items: flex-start;
        flex: 1 0 0;
        align-self: stretch;
        min-width: 0px;
    }

    .page-shopping-cart section.main-content .item .row-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

    .page-shopping-cart section.main-content .item .buy-btn {
        display: flex;
        height: 50px;
        padding-inline: var(--gap-16);
        justify-content: center;
        align-items: center;
    }



    .page-shopping-cart section.main-content .item .row-footer .controls {
        display: flex;
        align-items: center;
        gap: var(--gap-4);
    }

    .page-shopping-cart section.main-content .item .row-footer .btn-actions {
        display: flex;
        width: 50px;
        height: 50px;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        border: 0px none transparent;
        border-radius: var(--radius-8);
        background: transparent;
        transition: background 0.2s ease;
    }

        .page-shopping-cart section.main-content .item .row-footer .btn-actions:hover {
            background: var(--color-bg-inputs-transparent);
            transition: background 0.2s ease;
        }

    .page-shopping-cart section.main-content .item .row-title {
        align-items: center;
        align-self: stretch;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        color: var(--color-text-basic);
        text-overflow: ellipsis;
        font-size: 18px;
        font-weight: 700;
        line-height: 130%;
        text-decoration: none;
        white-space: nowrap;
    }

    .page-shopping-cart section.main-content .item .row-cargo-delivery {
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        gap: var(--gap-4);
        font-size: 14px;
        font-weight: 500;
        color: var(--color-text-basic);
    }

        .page-shopping-cart section.main-content .item .row-cargo-delivery span:last-child {
            padding-inline-start: var(--gap-4);
        }

    .page-shopping-cart section.main-content .item .row-price {
        display: flex;
        padding-top: var(--gap-12);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-4);
        align-self: stretch;
    }

    .page-shopping-cart section.main-content .item .row-old-price {
        display: flex;
        align-items: center;
        align-self: stretch;
        font-weight: 700;
        color: var(--color-text-muted);
        text-decoration: line-through;
        font-size: 14px;
    }

        .page-shopping-cart section.main-content .item .row-old-price span:last-child {
            padding-inline-start: var(--gap-4);
        }

    .page-shopping-cart section.main-content .item .row-actual-price {
        display: flex;
        align-items: center;
        gap: var(--gap-8);
        align-self: stretch;
    }


    .page-shopping-cart section.main-content .item .btn-price {
        display: flex;
        height: 40px;
        padding-inline-start: var(--gap-8);
        justify-content: center;
        align-items: center;
        background-color: var(--color-bg-inputs-transparent);
        border-radius: var(--radius-8);
        font-size: 18px;
        font-weight: 700;
        color: var(--color-text-basic);
        cursor: pointer;
    }

        .page-shopping-cart section.main-content .item .btn-price bdi span:last-child {
            padding-inline-start: var(--gap-4);
        }

        .page-shopping-cart section.main-content .item .btn-price button {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            justify-content: center;
            align-items: center;
            background: transparent;
            border: 0px none transparent;
            cursor: pointer;
        }

            .page-shopping-cart section.main-content .item .btn-price button .ci-cross {
                font-size: 14px;
            }

    .page-shopping-cart section.main-content .item .price {
        font-size: 18px;
        font-weight: 700;
        color: var(--color-text-basic);
        padding-block: var(--gap-4);
    }

        .page-shopping-cart section.main-content .item .price span:last-child {
            padding-inline-start: var(--gap-4);
        }

    .page-shopping-cart section.main-content .item .edit-price {
        width: 90px;
        border: 1px solid var(--color-border-basic);
        background-color: var(--color-bg-main);
        border-radius: 4px;
        height: 40px;
        font-size: 16px;
        font-weight: 400;
        color: var(--color-text-basic);
        line-height: 130%;
        padding-inline: var(--gap-8);
    }

    .page-shopping-cart section.main-content .item .currency {
        font-size: 16px;
        font-weight: 500;
        color: var(--color-text-basic);
    }

    .page-shopping-cart section.main-content .item .select-new {
        width: 90px;
    }

    .page-shopping-cart section.main-content .item .sold {
        display: none;
    }

    .page-shopping-cart section.main-content .item.sold-out .sold {
        display: flex;
        font-size: 16px;
        font-weight: 700;
        line-height: 130%;
        color: var(--color-text-muted);
        opacity: 0.4;
    }

    .page-shopping-cart section.main-content .item .buy-btn span:last-child {
        padding-inline-start: var(--gap-4);
    }

    .page-shopping-cart section.main-content .item.sold-out .buy-btn {
        display: none;
    }

    .page-shopping-cart section.main-content .item.sold-out .image-container {
        opacity: 0.2;
    }

    .page-shopping-cart section.main-content .item.sold-out .row-price,
    .page-shopping-cart section.main-content .item.sold-out .row-cargo-delivery,
    .page-shopping-cart section.main-content .item.sold-out .row-title {
        opacity: 0.4;
    }

    .page-shopping-cart section.main-content .item.sold-out .favorites,
    .page-shopping-cart section.main-content .item.sold-out .message {
        display: none;
    }

@media (max-width: 767px) {
    .page-shopping-cart section.main-content .item .image-container {
        width: 123px;
        height: 140px;
    }

    .page-shopping-cart section.main-content .item .row-title {
        width: calc(100% - 40px);
        padding-block-start: var(--gap-4);
    }

    .page-shopping-cart section.main-content .item .col-checker {
        position: absolute;
        width: auto;
        height: auto;
        z-index: 3;
        inset-inline-end: var(--gap-0);
        inset-block-start: var(--gap-0);
    }

    .page-shopping-cart section.main-content .item {
        padding-inline-start: var(--gap-16);
        min-height: 240px;
    }

        .page-shopping-cart section.main-content .item .row-footer {
            flex-direction: row-reverse;
            position: absolute;
            width: 100%;
            inset-inline-start: 0px;
            inset-block-end: 0px;
            padding-inline: var(--gap-16);
            padding-block: var(--gap-16);
            z-index: 1;
        }

            .page-shopping-cart section.main-content .item .row-footer .controls {
                flex-direction: row-reverse;
            }
}

@media (max-width: 475px) {
    .page-shopping-cart section.main-content .items-group .heading .right-side a {
        display: none;
    }

    .page-shopping-cart section.main-content .items-group .heading .right-side .dots-menu {
        display: flex;
        width: 30px;
        height: 40px;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        border-radius: var(--radius-8);
        border: 0px none transparent;
        background-color: transparent;
    }

    .page-shopping-cart section.main-content .item .row-footer .controls {
        gap: var(--gap-4);
    }

        .page-shopping-cart section.main-content .item .row-footer .controls .btn-actions {
            width: 40px;
            height: 40px;
        }

        .page-shopping-cart section.main-content .item .row-footer .controls .input-counter.lg button {
            width: 40px;
            height: 40px;
        }

    .page-shopping-cart section.main-content .item .buy-btn {
        height: 40px;
    }

    .page-shopping-cart section.main-content .item {
        min-height: 224px;
    }

        .page-shopping-cart section.main-content .item .row-title {
            font-size: 16px;
        }

        .page-shopping-cart section.main-content .item .btn-price,
        .page-shopping-cart section.main-content .item .price {
            font-size: 16px;
        }
}

@media (max-width: 420px) {
    .page-shopping-cart section.main-content .item .image-container {
        width: 100px;
        height: 140px;
    }

    .page-shopping-cart section.main-content .item .select-new,
    .page-shopping-cart section.main-content .item .edit-price {
        width: 80px;
    }

    .page-shopping-cart section.main-content .item .row-footer .controls .input-counter.lg button {
        width: 32px;
    }
}


@media (max-width: 374px) {
    .page-shopping-cart section.main-content .item .buy-btn span:last-child {
        display: none;
    }

    .page-shopping-cart section.main-content .item .row-footer {
        gap: var(--gap-8);
    }

    .page-shopping-cart section.main-content .item .buy-btn {
        width: 100%;
    }

    .page-shopping-cart .shimm-placeholder section.main-content .item .buy-btn {
        width: auto;
    }
}
/* #endregion Items group */



/* #endregion ----/ Left side --------- */
/* #region ------- Right side --------- */
.page-shopping-cart section.main-content > .right-side {
    display: flex;
    flex-shrink: 0;
    width: 380px;
    flex-direction: column;
    position: relative;
}

.page-shopping-cart section.main-content .summary-panel {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: var(--gap-16);
    border-radius: var(--radius-16);
    background-color: var(--color-bg-panel);
    position: sticky;
    top: var(--gap-24);
}

    .page-shopping-cart section.main-content .summary-panel .heading {
        width: 100%;
        font-weight: 700;
        line-height: 130%;
        color: var(--color-text-basic);
        font-size: 20px;
        padding-block-end: var(--gap-24);
    }

    .page-shopping-cart section.main-content .summary-panel .footing {
        display: block;
        width: 100%;
        padding-block-start: var(--gap-24);
    }

    .page-shopping-cart section.main-content .summary-panel .no-selection {
        display: block;
        font-size: 16px;
        color: var(--color-text-muted);
        text-align: center;
        padding-block-start: var(--gap-8);
    }

    .page-shopping-cart section.main-content .summary-panel .price-details {
        display: flex;
        flex-direction: column;
    }

    .page-shopping-cart section.main-content .summary-panel .price-item {
        display: flex;
        justify-content: space-between;
        align-self: stretch;
        padding-block: var(--gap-8);
        color: var(--color-text-basic);
    }

        .page-shopping-cart section.main-content .summary-panel .price-item .title {
            font-size: 14px;
            font-weight: 500;
            display: flex;
            justify-content: flex-start;
            text-align: start;
            gap: var(--gap-4);
            line-height: 130%;
        }

        .page-shopping-cart section.main-content .summary-panel .price-item .price {
            display: flex;
            flex-direction: column;
            font-weight: 500;
            font-size: 14px;
            line-height: 130%;
            justify-content: flex-end;
            text-align: end;
        }

*[dir='rtl'] .page-shopping-cart section.main-content .summary-panel .price-item .price {
    justify-content: flex-start;
    text-align: start;
}

.page-shopping-cart section.main-content .summary-panel .price-item .price span:last-child {
    padding-inline-start: var(--gap-4);
}

.page-shopping-cart section.main-content .summary-panel .total {
    display: flex;
    justify-content: space-between;
    align-self: stretch;
    padding-block: var(--gap-16);
    color: var(--color-text-basic);
    border-block-start: 1px solid var(--color-border-basic);
    margin-block-start: var(--gap-12);
}

    .page-shopping-cart section.main-content .summary-panel .total .title {
        font-size: 18px;
        font-weight: 700;
        display: flex;
        justify-content: flex-start;
        text-align: start;
        gap: var(--gap-4);
        line-height: 130%;
    }

    .page-shopping-cart section.main-content .summary-panel .total .price {
        display: flex;
        flex-direction: column;
        font-weight: 700;
        font-size: 18px;
        line-height: 130%;
        justify-content: flex-end;
        text-align: end;
    }

*[dir='rtl'] .page-shopping-cart section.main-content .summary-panel .total .price {
    justify-content: flex-start;
    text-align: start;
}

.page-shopping-cart section.main-content .summary-panel .total .price span:last-child {
    padding-inline-start: var(--gap-4);
}
/* #endregion ---/ Right side --------- */
.nav-footer-mobile.shopping-cart .shimm {
    width: 100%;
    display: block;
    padding-inline: var(--gap-16);
}

    .nav-footer-mobile.shopping-cart .shimm .btn-primary {
        width: 100%;
        display: block;
    }

@media (max-width: 1199px) {
    .page-shopping-cart section.main-content > .right-side {
        width: 300px;
    }
}

@media (max-width: 991px) {
    .page-shopping-cart section.main-content {
        flex-direction: column;
    }

        .page-shopping-cart section.main-content > .right-side {
            width: 100%;
        }
}

/* #endregion -----------------/ Main Content ----------------------- */
/* #endregion ================================/ Shopping Cart ========================================== */
/* #region ====================================== Checkout ============================================= */
/* #region -------------------------- Header --------------------------- */
.page-checkout header {
    padding-block: var(--gap-24);
}

    .page-checkout header .container {
        display: flex;
        gap: var(--gap-16);
        align-items: center;
    }

        .page-checkout header .container .left-side {
            width: 100%;
            display: flex;
            gap: var(--gap-16);
        }

    .page-checkout header .site-logo {
        width: 240px;
        height: 40px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
        flex-shrink: 0;
        display: inline-block;
    }

    .page-checkout header h1 {
        font-size: 32px;
        font-weight: 700;
        color: var(--color-text-basic);
        line-height: 130%;
    }

    .page-checkout header .container .right-side {
        flex-shrink: 0;
    }

    .page-checkout header .container .language-selector {
        display: flex;
        list-style: none;
    }

        .page-checkout header .container .language-selector li {
            padding-block: var(--gap-2);
            padding-inline-end: var(--gap-12);
        }

            .page-checkout header .container .language-selector li + li {
                border-inline-start: 1px solid var(--color-border-muted);
                padding-inline-start: var(--gap-12);
            }

            .page-checkout header .container .language-selector li:last-child {
                padding-block: var(--gap-2);
                padding-inline-end: var(--gap-0);
            }

        .page-checkout header .container .language-selector a {
            font-size: 14px;
            text-decoration: none;
            color: var(--color-text-muted);
        }

            .page-checkout header .container .language-selector a.active {
                color: var(--color-text-basic);
            }
/* #endregion ----------------------/ Header --------------------------- */
/* #region ------------------- Back to previous step ------------------- */
.page-checkout .row-backstep {
    padding-block-start: var(--gap-16);
    padding-block-end: var(--gap-8);
}

    .page-checkout .row-backstep a {
        display: flex;
        height: 40px;
        align-items: center;
        gap: var(--gap-8);
        font-size: 16px;
        font-weight: 700;
        color: var(--color-text-muted);
        line-height: 130%;
        text-decoration: none;
    }

        .page-checkout .row-backstep a i {
            font-size: 24px;
        }

*[dir='rtl'] .page-checkout .row-backstep a i {
    transform: rotateY(180deg);
}
/* #endregion ---------------/ Back to previous step ------------------- */
.page-checkout .main-content {
    display: flex;
    gap: var(--gap-32);
    padding-block-end: var(--gap-128);
}
    /* #region ------------------------- Left side ------------------------- */
    .page-checkout .main-content > .left-side {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: var(--gap-16);
        flex: 1;
        min-width: 0px;
    }
/* #region Heading */
.page-checkout .left-side .heading {
    display: flex;
    padding-block-start: var(--gap-32);
    padding-block-end: var(--gap-8);
    gap: var(--gap-16);
}

    .page-checkout .left-side .heading h2 {
        font-size: 24px;
        font-weight: 500;
        line-height: 130%;
        color: var(--color-text-basic);
        width: 100%;
    }

    .page-checkout .left-side .heading button {
        font-size: 16px;
        font-weight: 700;
        line-height: 130%;
        color: var(--color-text-primary);
        flex-shrink: 0;
        padding: 0px;
        border: 1px solid transparent;
        background-color: transparent;
    }
/* #endregion Heading */
/* #region Check order */
.page-checkout .left-side .check-order-area {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--gap-16);
}
/* #region Items group */
.page-checkout section.main-content .items-group {
    display: flex;
    width: 100%;
    border-radius: var(--radius-16);
    border: 1px solid var(--color-border-muted);
    flex-direction: column;
}

    .page-checkout section.main-content .items-group .heading {
        display: flex;
        width: 100%;
        padding-inline: var(--gap-16);
        padding-block-start: var(--gap-16);
        gap: var(--gap-16);
        align-items: center;
    }

        .page-checkout section.main-content .items-group .heading .left-side {
            width: 100%;
            display: flex;
            gap: var(--gap-8);
            flex: 1;
            min-width: 0px;
        }

        .page-checkout section.main-content .items-group .heading .name {
            width: 100%;
            flex-direction: column;
            text-decoration: none;
            flex: 1;
            min-width: 0px;
        }

            .page-checkout section.main-content .items-group .heading .name h4 {
                width: 100%;
                color: var(--color-text-basic);
                font-size: 16px;
                font-weight: 700;
                line-height: 130%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: block;
            }

            .page-checkout section.main-content .items-group .heading .name p {
                width: 100%;
                color: var(--color-text-muted);
                font-size: 14px;
                font-weight: 500;
                line-height: 130%;
                display: flex;
                gap: var(--gap-4);
            }

    .page-checkout section.main-content .items-group .avatar-block {
        display: flex;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        position: relative;
        text-decoration: none;
    }

        .page-checkout section.main-content .items-group .avatar-block .logo-container {
            display: none;
            width: 100%;
            height: 100%;
            border-radius: var(--radius-8);
            background-color: var(--color-bg-panel);
            position: relative;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            overflow: hidden;
        }

        .page-checkout section.main-content .items-group .avatar-block.store .logo-container {
            display: flex;
        }

        .page-checkout section.main-content .items-group .avatar-block.person .logo-container {
            display: none;
        }

        .page-checkout section.main-content .items-group .avatar-block .user-avatar {
            display: none;
        }

        .page-checkout section.main-content .items-group .avatar-block.person .user-avatar {
            display: block;
            width: 100%;
            height: 100%;
        }

            .page-checkout section.main-content .items-group .avatar-block.person .user-avatar i {
                font-size: 18px;
            }

        .page-checkout section.main-content .items-group .avatar-block.online .user-avatar {
            animation: none;
            transform: none;
        }

        .page-checkout section.main-content .items-group .avatar-block .logo-container img {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1;
            inset-inline-start: 0px;
            inset-block-start: 0px;
            filter: brightness(0.97);
            object-fit: cover;
        }

    .page-checkout section.main-content .items-group .online-status {
        display: none;
        width: 16px;
        height: 16px;
        position: absolute;
        z-index: 2;
        border-radius: var(--radius-circle);
        background: var(--color-bg-success);
        border: 3px solid var(--color-bg-main);
    }

    .page-checkout section.main-content .items-group .online .online-status {
        display: block;
    }

    .page-checkout section.main-content .items-group .store .online-status {
        inset-inline-end: -3px;
        inset-block-end: -3px;
    }

    .page-checkout section.main-content .items-group .person .online-status {
        inset-inline-end: -2px;
        inset-block-end: -2px;
    }


.page-checkout section.main-content .item {
    display: flex;
    width: 100%;
    position: relative;
    border-bottom: 1px solid var(--color-border-muted);
    padding-block: var(--gap-16);
    padding-inline-start: var(--gap-16);
}

    .page-checkout section.main-content .item:last-child {
        border-bottom: 0px none transparent;
    }

    .page-checkout section.main-content .item .col-checker {
        display: flex;
        padding: var(--gap-16);
        justify-content: center;
        align-items: center;
    }


    .page-checkout section.main-content .item .image-container {
        display: flex;
        position: relative;
        width: 170px;
        height: 170px;
        background-color: var(--color-bg-panel);
        border-radius: var(--radius-12);
        overflow: hidden;
        font-size: 48px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .page-checkout section.main-content .item .image-container img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            z-index: 1;
            inset-inline-start: 0px;
            inset-block-start: 0px;
            filter: brightness(0.97);
        }

    .page-checkout section.main-content .item .main-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-8);
        flex: 1 0 0;
        align-self: stretch;
    }

    .page-checkout section.main-content .item .col-details {
        display: flex;
        padding-inline: var(--gap-16);
        flex-direction: column;
        align-items: flex-start;
        flex: 1 0 0;
        align-self: stretch;
        min-width: 0px;
    }

    .page-checkout section.main-content .item .row-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }




        .page-checkout section.main-content .item .row-footer .controls {
            display: flex;
            align-items: center;
            gap: var(--gap-4);
        }

        .page-checkout section.main-content .item .row-footer .btn-actions {
            display: flex;
            width: 50px;
            height: 50px;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            border: 0px none transparent;
            border-radius: var(--radius-8);
            background: transparent;
            transition: background 0.2s ease;
        }

            .page-checkout section.main-content .item .row-footer .btn-actions:hover {
                background: var(--color-bg-inputs-transparent);
                transition: background 0.2s ease;
            }

    .page-checkout section.main-content .item .row-title {
        align-items: center;
        align-self: stretch;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        color: var(--color-text-basic);
        text-overflow: ellipsis;
        font-size: 18px;
        font-weight: 700;
        line-height: 130%;
        text-decoration: none;
        white-space: nowrap;
    }

    .page-checkout section.main-content .item .row-price {
        display: flex;
        padding-top: var(--gap-12);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-4);
        align-self: stretch;
    }

    .page-checkout section.main-content .item .row-old-price {
        display: flex;
        align-items: center;
        align-self: stretch;
        font-weight: 700;
        color: var(--color-text-muted);
        text-decoration: line-through;
        font-size: 14px;
    }

        .page-checkout section.main-content .item .row-old-price span:last-child {
            padding-inline-start: var(--gap-4);
        }

    .page-checkout section.main-content .item .row-actual-price {
        display: flex;
        align-items: center;
        gap: var(--gap-8);
        align-self: stretch;
    }


    .page-checkout section.main-content .item .btn-price {
        display: flex;
        height: 40px;
        padding-inline-start: var(--gap-8);
        justify-content: center;
        align-items: center;
        background-color: var(--color-bg-inputs-transparent);
        border-radius: var(--radius-8);
        font-size: 18px;
        font-weight: 700;
        color: var(--color-text-basic);
        cursor: pointer;
    }

        .page-checkout section.main-content .item .btn-price bdi span:last-child {
            padding-inline-start: var(--gap-4);
        }

        .page-checkout section.main-content .item .btn-price button {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            justify-content: center;
            align-items: center;
            background: transparent;
            border: 0px none transparent;
            cursor: pointer;
        }

            .page-checkout section.main-content .item .btn-price button .ci-cross {
                font-size: 14px;
            }

    .page-checkout section.main-content .item .price {
        font-size: 18px;
        font-weight: 700;
        color: var(--color-text-basic);
        padding-block: var(--gap-4);
    }

        .page-checkout section.main-content .item .price span:last-child {
            padding-inline-start: var(--gap-4);
        }

    .page-checkout section.main-content .item .edit-price {
        width: 90px;
        border: 1px solid var(--color-border-basic);
        background-color: var(--color-bg-main);
        border-radius: 4px;
        height: 40px;
        font-size: 16px;
        font-weight: 400;
        color: var(--color-text-basic);
        line-height: 130%;
        padding-inline: var(--gap-8);
    }

    .page-checkout section.main-content .item .currency {
        font-size: 16px;
        font-weight: 500;
        color: var(--color-text-basic);
    }

    .page-checkout section.main-content .item .select-new {
        width: 90px;
    }

    .page-checkout section.main-content .item .subtotal-block {
        display: flex;
        flex-direction: column;
        gap: var(--gap-2);
        flex-shrink: 0;
        font-size: 14px;
        line-height: 130%;
        font-weight: 500;
        color: var(--color-text-basic);
    }

        .page-checkout section.main-content .item .subtotal-block .item-price {
            display: flex;
            gap: var(--gap-8);
        }

            .page-checkout section.main-content .item .subtotal-block .item-price bdi {
                font-weight: 700;
            }

                .page-checkout section.main-content .item .subtotal-block .item-price bdi span + span {
                    padding-inline-start: var(--gap-4);
                }

@media (max-width: 1199px) {
    .page-checkout section.main-content .item .image-container {
        width: 140px;
    }
}

@media (max-width: 767px) {
    .page-checkout section.main-content .item .image-container {
        width: 123px;
        height: 140px;
    }

    .page-checkout section.main-content .item .row-title {  
        padding-block-start: var(--gap-4);
    }

    .page-checkout section.main-content .item .col-checker {
        position: absolute;
        width: auto;
        height: auto;
        z-index: 3;
        inset-inline-end: var(--gap-0);
        inset-block-start: var(--gap-0);
    }

    .page-checkout section.main-content .item {
        padding-inline-start: var(--gap-16);
        min-height: 240px;
    }

        .page-checkout section.main-content .item .row-footer {       
            position: absolute;
            width: 100%;
            inset-inline-start: 0px;
            inset-block-end: 0px;
            padding-inline: var(--gap-16);
            padding-block: var(--gap-16);
            z-index: 1;
        }

         
}

@media (max-width: 475px) {

    .page-checkout section.main-content .item .row-footer .controls {
        gap: var(--gap-4);
    }

        .page-checkout section.main-content .item .row-footer .controls .btn-actions {
            width: 40px;
            height: 40px;
        }

        .page-checkout section.main-content .item .row-footer .controls .input-counter.lg button {
            width: 40px;
            height: 40px;
        }

    .page-checkout section.main-content .item {
        min-height: 224px;
    }

        .page-checkout section.main-content .item .row-title {
            font-size: 16px;
        }

        .page-checkout section.main-content .item .btn-price,
        .page-checkout section.main-content .item .price {
            font-size: 16px;
        }
}

@media (max-width: 420px) {
    .page-checkout section.main-content .item .image-container {
        width: 100px;
        height: 140px;
    }

    .page-checkout section.main-content .item .select-new,
    .page-checkout section.main-content .item .edit-price {
        width: 80px;
    }

    .page-checkout section.main-content .item .row-footer .controls .input-counter.lg button {
        width: 32px;
    }
}


@media (max-width: 374px) {

    .page-checkout section.main-content .item .row-footer {
        gap: var(--gap-8);
    }

}
/* #endregion Items group */
/* #endregion Check order */
/* #region Pay with */
.page-checkout .methods-tabs-group.list-group.bootstrap4 {
    display: flex !important;
    flex-direction: row;
    width: 100% !important;
    gap: var(--gap-16);
    margin-block-start: var(--gap-16);
}

.page-checkout .methods-tabs-group .list-group-item {
    display: flex !important;
    width: 100% !important;
    border: 0px none transparent !important;
    color: var(--color-text-basic) !important;
    text-transform: none !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 130%;
    padding: 0px !important;
    align-self: stretch;
}

    .page-checkout .methods-tabs-group .list-group-item .inner {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        min-height: 140px !important;
        border: 2px solid var(--color-border-basic) !important;
        border-radius: var(--radius-16) !important;
        justify-content: center;
        align-items: center;
        gap: var(--gap-8);
    }


    .page-checkout .shimm-placeholder .methods-tabs-group .list-group-item .inner {
        border: 0px solid transparent !important;
    }

    .page-checkout .methods-tabs-group .list-group-item.active .inner {
        border: 2px solid var(--color-brand-300) !important;
    }

    .page-checkout .methods-tabs-group .list-group-item .ci-pazar.method {
        margin-block-start: 0px !important;
    }

    .page-checkout .methods-tabs-group .list-group-item .title {
        display: block !important;
        width: 100% !important;
        position: static !important;
        padding-inline: var(--gap-16) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .page-checkout .methods-tabs-group .list-group-item .check,
    .page-checkout .methods-tabs-group .list-group-item.active .check {
        inset-block-start: -10px !important;
        inset-inline-end: -10px !important;
        padding: var(--gap-2) !important;
        border: 8px solid var(--color-bg-main) !important;
    }

    .page-checkout .methods-tabs-group .list-group-item .inner .ci-pazar {
        font-size: 40px !important;
    }

    .page-checkout .methods-tabs-group .list-group-item .inner .iute-logo {
        display: flex;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        padding: var(--gap-2);
    }

        .page-checkout .methods-tabs-group .list-group-item .inner .iute-logo span {
            display: flex;
            width: 100%;
            height: 100%;
            background: url(../../Content/Images/Iute/pictogram.svg) no-repeat center center transparent;
            background-size: contain;
            flex-shrink: 0;
        }

@media (max-width: 991px) {
    .page-checkout .methods-tabs-group.list-group.bootstrap4 {
        display: flex !important;
        flex-direction: column !important;
    }

    .page-checkout .methods-tabs-group .list-group-item .inner {
        min-height: 70px !important;
        padding-inline: var(--gap-16) !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
    }

    .page-checkout .methods-tabs-group .list-group-item .title {
        padding-inline: 0px !important;
    }

    .page-checkout .methods-tabs-group .list-group-item .inner .ci-pazar {
        flex-shrink: 0;
        position: relative !important;
        top: inherit !important;
        left: inherit !important;
    }

    *[dir='rtl'] .page-checkout .methods-tabs-group .list-group-item .inner .ci-pazar {        
        left: inherit !important;
        right: inherit !important;
    }

    .page-checkout .methods-tabs-group .list-group-item .check, .page-checkout .methods-tabs-group .list-group-item.active .check {
        position: relative !important;
        top: inherit !important;
        left: inherit !important;
    }

    *[dir='rtl'] .page-checkout .methods-tabs-group .list-group-item .check, .page-checkout .methods-tabs-group .list-group-item.active .check {
        left: inherit !important;
        right: inherit !important;
    }
}

.page-checkout .iute-calculator {
    margin-block-start: var(--gap-40);
}

    .page-checkout .iute-calculator .price-tabs {
        display: flex;
        gap: var(--gap-8);
        padding-block-start: var(--gap-4);
        padding-block-end: var(--gap-32);
    }

.iute-calculator .price-tabs .tab {
    cursor: pointer;
}

.iute-calculator .callout.warning {
    background-color: var(--color-bg-warning-light);  
}

.iute-calculator .callout.warning span {
    color: var(--color-text-basic);
}

    .iute-calculator .callout b {
        padding-inline:var(--gap-4);
    }

    .iute-calculator .callout bdi span+span {
        padding-left: var(--gap-4);
    }

.page-checkout .iute-calculator .price-tabs .tab {
    position: relative;
    border: 1px solid var(--color-border-basic);
    width: 100%;
    padding-block-start: var(--gap-16);
    padding-block-end: var(--gap-24);
    border-radius: var(--gap-8);
    text-align: center;
}

.page-checkout .price-tabs .tab .recommended {
    position: absolute;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    padding-inline: var(--gap-12);
    padding-block: var(--gap-4);
    border-radius: var(--radius-32);
    background: var(--color-bg-warning);
    color: var(--color-text-basic);
    inset-inline-start: 50%;
    inset-block-start: 0px;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
}

*[dir='rtl'] .page-checkout .price-tabs .tab .recommended {
    transform: translate(50%, -50%);
}

.page-checkout .iute-calculator .price-tabs .tab h4 {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: var(--gap-0);
    font-weight: 700 !important;
    font-size: 16px;
    width: 100%;
    justify-content: center;
    line-height: 120%;
    margin-block-end: var(--gap-4);
    margin-block-start: var(--gap-8);
}

.page-checkout .price-tabs .tab h4 > span {
    font-weight: 700;
    line-height: 130%;
    font-size: 16px;
    white-space: nowrap;
    display: block;
}

.page-checkout .price-tabs .tab h4 bdi span+span {
    padding-left: var(--gap-4);
}


.page-checkout .price-tabs .tab small {
    display: inline-block;
    margin-block-start: var(--gap-8);
}

.page-checkout .iute-calculator .price-tabs .tab.active {
    background: var(--color-bg-inputs-transparent);
}

.page-checkout .iute-calculator .checkboxes-block {
    padding-block-start: var(--gap-32);
    gap: var(--gap-16);
    display: flex;
    flex-direction: column;
}

    .page-checkout .iute-calculator .checkboxes-block a {
        font-weight: 700;
    }

@media (max-width: 991px) {
    .page-checkout .iute-calculator .price-tabs .tab.active {
        background: var(--color-bg-main);
    }
}

@media (max-width: 767px) {
    .page-checkout .iute-calculator .price-tabs {
        flex-direction: column;
        gap: var(--gap-16);
    }

        .page-checkout .iute-calculator .price-tabs .tab {
            padding-block-start: var(--gap-16);
            padding-block-end: var(--gap-16);
        }

            .page-checkout .iute-calculator .price-tabs .tab h4 {
                flex-direction: row;
                gap: var(--gap-4);
            }

    .page-checkout .price-tabs .tab small {
        margin-block-start: 0px;
    }
}

/* #endregion Pay with */
/* #region Personal information */
.page-checkout .left-side .personal-info-area {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--gap-16);
}

    .page-checkout .left-side .personal-info-area .content {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: var(--gap-4);
        padding: var(--gap-16);
        border-radius: var(--radius-16);
        background: var(--color-bg-panel);
    }

        .page-checkout .left-side .personal-info-area .content p {
            display: block;
            width: 100%;
            font-size: 16px;
            font-weight: 400;
            line-height: 130%;
            color: var(--color-text-basic);
        }

    .page-checkout .left-side .personal-info-area .edit-form {
        gap: var(--gap-16);
        display: flex;
        width: 100%;
        flex-direction: column;
    }

.page-checkout .personal-info-area .select-new .flag,
.dropup .flag {
    font-size: 24px;
    border-radius: var(--radius-4);
    filter: brightness(0.97);
}

.page-checkout .left-side .personal-info-area .phone-input {
    display: flex;
    gap: var(--gap-8);
    align-items: center;
    flex-direction: column;
    width: 100%;
}


    .page-checkout .left-side .personal-info-area .phone-input .phone-input-control {
        display: flex;
        gap: var(--gap-0);
        align-items: center;
        width: 100%;
    }

    .page-checkout .left-side .personal-info-area .phone-input .select-new {
        max-width: 130px;
        flex-shrink: 0;
    }

        .page-checkout .left-side .personal-info-area .phone-input .select-new .control {
            border-inline-end: 0px none transparent;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
        }

*[dir='rtl'] .page-checkout .left-side .personal-info-area .phone-input .select-new .control {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.page-checkout .left-side .personal-info-area .phone-input .select-new .control .selection-data {
    direction: ltr;
}

.page-checkout .left-side .personal-info-area .phone-input .floating-textbox {
    width: 100%;
    align-self: stretch;
}

    .page-checkout .left-side .personal-info-area .phone-input .floating-textbox .control {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

*[dir='rtl'] .page-checkout .left-side .personal-info-area .phone-input .floating-textbox .control {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.page-checkout .left-side .personal-info-area .phone-input .validation {
    display: none;
    color: var(--color-text-danger);
    font-size: 12px;
    padding-inline: var(--gap-16);
    line-height: 140%;
    justify-content: flex-start;
    text-align: start;
    width: 100%;
}

.page-checkout .left-side .personal-info-area .phone-input.has-error .validation {
    display: block;
}

.page-checkout .left-side .personal-info-area .phone-input.has-error .floating-textbox .control,
.page-checkout .left-side .personal-info-area .phone-input.has-error .select-new .control {
    border-color: var(--color-border-danger);
}

.page-checkout .left-side .personal-info-area .phone-input.has-error .floating-textbox.has-value .floating-input ~ .floating-label {
    color: var(--color-text-danger);
}
/* #endregion Personal information */
/* #region Delivery address */
.page-checkout .left-side .delivery-info-area {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--gap-16);
}

    .page-checkout .left-side .delivery-info-area .edit-form {
        gap: var(--gap-16);
        display: flex;
        width: 100%;
        flex-direction: column;
    }

        .page-checkout .left-side .delivery-info-area .edit-form .horizontal {
            display: flex;
            gap: var(--gap-16);
        }

        .page-checkout .left-side .delivery-info-area .edit-form .footing {
            display: flex;
            gap: var(--gap-4);
            padding-block: var(--gap-16);
            border-top: 1px solid var(--color-border-muted);
        }

    .page-checkout .left-side .delivery-info-area .content {
        display: flex;
        gap: var(--gap-8);
        flex-direction: column;
    }

        .page-checkout .left-side .delivery-info-area .content .address-item {
            display: flex;
            background: var(--color-bg-panel);
            border-radius: var(--radius-8);
            align-items: center;
            cursor: pointer;
            transition: background 0.2s ease;
        }

            .page-checkout .left-side .delivery-info-area .content .address-item:hover {
                background: var(--color-bg-inputs-transparent);
                transition: background 0.2s ease;
            }

            .page-checkout .left-side .delivery-info-area .content .address-item .address-content {
                width: 100%;
                font-size: 16px;
                line-height: 130%;
                font-weight: 500;
                color: var(--color-text-basic);
                padding: var(--gap-16);
            }

            .page-checkout .left-side .delivery-info-area .content .address-item button {
                display: flex;
                font-size: 24px;
                width: 50px;
                height: 50px;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                border: 0px none transparent;
                background: transparent;
            }

            .page-checkout .left-side .delivery-info-area .content .address-item input[type='radio'] {
                position: absolute;
                width: 1px;
                height: 1px;
                clip: rect(0px, 0px, 0px, 0px);
                clip-path: inset(50%);
                padding: 0px;
                margin: -1px;
                overflow: hidden;
                white-space: nowrap;
                border-width: 0px;
                border-style: none;
                border-color: currentcolor;
                border-image: none;
            }

            .page-checkout .left-side .delivery-info-area .content .address-item .check {
                display: flex;
                width: 24px;
                height: 24px;
                background: var(--color-bg-main);
                border: 2px solid var(--color-border-basic);
                flex-shrink: 0;
                border-radius: var(--radius-circle);
                margin-inline-start: var(--gap-16);
                position: relative;
            }

            .page-checkout .left-side .delivery-info-area .content .address-item input[type='radio']:checked ~ .check {
                border: 0px solid transparent;
                background-color: var(--color-bg-primary);
            }

                .page-checkout .left-side .delivery-info-area .content .address-item input[type='radio']:checked ~ .check:before {
                    left: 50%;
                    inset-block-start: 50%;
                    transform: translate(-50%, -50%);
                    content: "";
                    width: 1em;
                    height: 1em;
                    background-image: url(../../Content/Images/ci-pazar-small-alt.svg);
                    background-repeat: no-repeat;
                    background-size: 50em 1em;
                    font-size: 14px;
                    opacity: 1;
                    position: absolute;
                    z-index: 1;
                    background-position: -8em 0em;
                }

*[dir='rtl'] .page-checkout .left-side .delivery-info-area .content .address-item input[type='radio']:checked ~ .check:before {
    left: auto;
    right: -10% !important;
    inset-block-start: 50%;
    transform: translate(-50%, -50%);
}

/* #endregion Delivery address */
/* #endregion ---------------------/ Left side ------------------------- */
/* #region ------------------------ Right side ------------------------- */
.page-checkout section.main-content > .right-side {
    display: flex;
    flex-shrink: 0;
    width: 380px;
    flex-direction: column;
    position: relative;
    padding-block-start: var(--gap-32);
}

.page-checkout section.main-content .summary-panel {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding-block: var(--gap-16);
    border-radius: var(--radius-16);
    background-color: var(--color-bg-panel);
    position: sticky;
    top: var(--gap-24);
}

    .page-checkout section.main-content .summary-panel .heading {
        width: 100%;
        font-weight: 700;
        line-height: 130%;
        color: var(--color-text-basic);
        font-size: 20px;
        padding-block-end: var(--gap-24);
        padding-inline: var(--gap-16);
    }

    .page-checkout section.main-content .summary-panel .panel-content {
        padding-inline: var(--gap-16);
        max-height: calc(100vh - 216px);
    }

    .page-checkout section.main-content .summary-panel .footing {
        display: block;
        width: 100%;
        padding-block-start: var(--gap-24);
        padding-inline: var(--gap-16);
    }

    .page-checkout section.main-content .summary-panel .no-selection {
        display: block;
        font-size: 16px;
        color: var(--color-text-muted);
        text-align: center;
        padding-block-start: var(--gap-8);
    }

    .page-checkout section.main-content .summary-panel .price-details {
        display: flex;
        flex-direction: column;
    }

    .page-checkout section.main-content .summary-panel .price-item {
        display: flex;
        justify-content: space-between;
        align-self: stretch;
        padding-block: var(--gap-8);
        color: var(--color-text-basic);
    }

        .page-checkout section.main-content .summary-panel .price-item .title {
            font-size: 14px;
            font-weight: 500;
            display: flex;
            justify-content: flex-start;
            text-align: start;
            gap: var(--gap-4);
            line-height: 130%;
        }

        .page-checkout section.main-content .summary-panel .price-item .price {
            display: flex;
            flex-direction: column;
            font-weight: 500;
            font-size: 14px;
            line-height: 130%;
            justify-content: flex-end;
            text-align: end;
        }

*[dir='rtl'] .page-checkout section.main-content .summary-panel .price-item .price {
    justify-content: flex-start;
    text-align: start;
}

.page-checkout section.main-content .summary-panel .price-item .price span + span {
    padding-inline-start: var(--gap-4);
}

.page-checkout section.main-content .summary-panel .total {
    display: flex;
    justify-content: space-between;
    align-self: stretch;
    padding-block: var(--gap-16);
    color: var(--color-text-basic);
    border-block-start: 1px solid var(--color-border-basic);
    margin-block-start: var(--gap-12);
}

    .page-checkout section.main-content .summary-panel .total .title {
        font-size: 18px;
        font-weight: 700;
        display: flex;
        justify-content: flex-start;
        text-align: start;
        gap: var(--gap-4);
        line-height: 130%;
    }

    .page-checkout section.main-content .summary-panel .total .price {
        display: flex;
        flex-direction: column;
        font-weight: 700;
        font-size: 18px;
        line-height: 130%;
        justify-content: flex-end;
        text-align: end;
    }

*[dir='rtl'] .page-checkout section.main-content .summary-panel .total .price {
    justify-content: flex-start;
    text-align: start;
}

.page-checkout section.main-content .summary-panel .total .price span + span {
    padding-inline-start: var(--gap-4);
}

.page-checkout section.main-content .summary-panel .collapser.loan {
    margin-block-end: var(--gap-16);
}

    .page-checkout section.main-content .summary-panel .collapser.loan .collapser-btn {
        width: 100%;
        padding: var(--gap-12);
        border-radius: var(--radius-8);
        display: flex;
        border: 1px solid var(--color-border-basic);
        gap: var(--gap-16);
        align-items: center;
        background: transparent;
    }

        .page-checkout section.main-content .summary-panel .collapser.loan .collapser-btn i {
            flex-shrink: 0;
            font-size: 14px;
        }

        .page-checkout section.main-content .summary-panel .collapser.loan .collapser-btn .ci-plus {
            display: none;
        }

        .page-checkout section.main-content .summary-panel .collapser.loan .collapser-btn .ci-minus {
            display: inline-block;
        }

    .page-checkout section.main-content .summary-panel .collapser.loan.collapsed .collapser-btn .ci-plus {
        display: inline-block;
    }

    .page-checkout section.main-content .summary-panel .collapser.loan.collapsed .collapser-btn .ci-minus {
        display: none;
    }

    .page-checkout section.main-content .summary-panel .collapser.loan .collapser-btn span {
        width: 100%;
        font-size: 14px;
        font-weight: 500;
        color: var(--color-text-basic);
        text-align: start;
    }

    .page-checkout section.main-content .summary-panel .collapser.loan .collapser-btn .title-collapsed {
        display: none;
    }

    .page-checkout section.main-content .summary-panel .collapser.loan.collapsed .collapser-btn .title-collapsed {
        display: inline-block;
    }

    .page-checkout section.main-content .summary-panel .collapser.loan. .collapser-btn .title-expanded {
        display: inline-block;
    }

    .page-checkout section.main-content .summary-panel .collapser.loan.collapsed .collapser-btn .title-expanded {
        display: none;
    }

    .page-checkout section.main-content .summary-panel .collapser.loan .collapser-content {
        border-bottom: 1px solid var(--color-border-basic);
    }

        .page-checkout section.main-content .summary-panel .collapser.loan .collapser-content .content {
            padding-block: var(--gap-12);
        }

.page-checkout section.main-content .summary-panel .collapser.terms .collapser-btn {
    display: flex;
    align-items: center;
    gap: var(--gap-16);
    border: 0px none transparent;
    background: transparent;
    padding: 0px;
    text-align: start;
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: 500;
    width: 100%;
}

    .page-checkout section.main-content .summary-panel .collapser.terms .collapser-btn b {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: var(--radius-circle);
        background: var(--color-bg-inputs-transparent);
        align-items: center;
        justify-content: center;
        font-size: 14px;
        display: flex;
    }

    .page-checkout section.main-content .summary-panel .collapser.terms .collapser-btn span {
        width: 100%;
        display: block;
    }

.page-checkout section.main-content .summary-panel .collapser.terms .collapser-content .content {
    padding-block: var(--gap-12);
}

    .page-checkout section.main-content .summary-panel .collapser.terms .collapser-content .content li {
        color: var(--color-text-muted);
        font-size: 14px;
        font-weight: 500;
        line-height: 130%;
    }

        .page-checkout section.main-content .summary-panel .collapser.terms .collapser-content .content li a {
            color: var(--color-text-primary);
            font-weight: 700;
            text-decoration: underline;
        }

.page-checkout section.main-content .summary-panel .collapser.terms.collapsed .collapser-btn b {
    transform: rotateX(180deg);
}

@media (max-width: 1199px) {
    .page-checkout section.main-content > .right-side {
        width: 300px;
    }
}

@media (max-width: 992px) {
    .page-checkout section.main-content .summary-panel .panel-content {
        max-height: none;
    }
}

/* #endregion --------------------/ Right side ------------------------- */
.nav-footer-mobile.checkout .shimm {
    width: 100%;
    display: block;
    padding-inline: var(--gap-16);
}

.nav-footer-mobile.checkout .controls {
    display: flex;
    gap: var(--gap-8);
}

    .nav-footer-mobile.checkout .shimm .btn-primary {
        width: 100%;
        display: block;
    }

@media (max-width: 1199px) {
    .page-checkout section.main-content > .right-side {
        width: 300px;
    }
}

@media (max-width: 991px) {

    .page-checkout .row-backstep {
        display: none;
    }

    .page-checkout header .container .language-selector {
        display: none;
    }

    .page-checkout header .site-logo {
        display: none;
    }

    .page-checkout section.main-content {
        flex-direction: column;
    }

        .page-checkout section.main-content > .right-side {
            width: 100%;
        }
}
/* #endregion ==================================/ Checkout ============================================= */
/* #region ==================================== Order Success ========================================== */
.page-order-success {
    padding-block-end: var(--gap-100);
}


    .page-order-success .heading-panel {
        display: block;
        width: 100%;
        background-color: var(--color-bg-panel);
        border-radius: var(--radius-16);
        padding-block: var(--padding-64);
        display: flex;
        flex-direction: column;
        gap: var(--gap-12);
        margin-block-start: var(--gap-24);
        padding-block: var(--gap-64);
    }

        .page-order-success .heading-panel .clipart-default-success {
            width: 150px;
            height: 150px;
            margin-inline: auto;
        }

        .page-order-success .heading-panel h1 {
            color: var(--color-text-basic);
            font-size: 36px;
            font-weight: 700;
            line-height: 120%;
            text-align: center;
            width: 600px;
            display: block;
            margin-inline: auto;
        }

        .page-order-success .heading-panel p {
            display: block;
            width: 600px;
            text-align: center;
            color: var(--color-text-basic);
            margin-inline: auto;
            font-size: 16px;
            line-height: 130%;
        }

    .page-order-success .ordered-items {
        margin-block-start: var(--gap-40);
        background: var(--color-bg-main);
        position: relative;
        width: 640px;
        margin-inline: auto;
    }

        .page-order-success .ordered-items .content-container {
            display: flex;
            flex-direction: column;
            width: 600px;
            gap: var(--gap-16);
            margin-inline: auto;
            padding-block-end: var(--gap-24);
        }

        .page-order-success .ordered-items h2 {
            font-size: 20px;
            line-height: 120%;
            color: var(--color-text-basic);
            font-weight: 700;
            padding-block-start: var(--gap-24);
            padding-block-end: var(--gap-12);
        }

        .page-order-success .ordered-items .item {
            display: flex;
            width: 100%;
            gap: var(--gap-16);
            align-content: center;
        }

            .page-order-success .ordered-items .item .image-container {
                flex-shrink: 0;
                width: 64px;
                height: 64px;
                border-radius: var(--radius-8);
                border: 1px solid var(--color-border-basic);
                position: relative;
                justify-content: center;
                align-items: center;
                font-size: 24px;
                display: flex;
                background-color: var(--color-bg-inputs-solid);
                overflow: hidden;
            }

                .page-order-success .ordered-items .item .image-container.shimm-item {
                    border: 0px none transparent;
                }

                .page-order-success .ordered-items .item .image-container img {
                    display: block;
                    position: absolute;
                    z-index: 1;
                    inset-inline-start: 0px;
                    inset-block-start: 0px;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

            .page-order-success .ordered-items .item .description {
                width: 100%;
                display: flex;
                gap: var(--gap-16);
                align-items: center;
            }

            .page-order-success .ordered-items .item .main {
                width: 100%;
                font-size: 14px;
                line-height: 130%;
                display: flex;
                flex-direction: column;
                gap: var(--gap-4);
            }

            .page-order-success .ordered-items .item h3 {
                font-weight: 700;
                width: 100%;
            }

            .page-order-success .ordered-items .item p {
                font-weight: 500;
                width: 100%;
            }

            .page-order-success .ordered-items .item .price {
                flex-shrink: 0;
                font-weight: 700;
                font-size: 14px;
                line-height: 130%;
            }

                .page-order-success .ordered-items .item .price span:first-child {
                    display: inline-block;
                    margin-inline-end: var(--gap-4);
                }

        .page-order-success .ordered-items:before {
            content: '';
            display: block;
            position: absolute;
            z-index: 1;
            top: 0px;
            inset-inline-start: 0px;
            width: 100%;
            height: 28px;
            background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
        }

        .page-order-success .ordered-items:after {
            content: '';
            display: block;
            position: absolute;
            z-index: 1;
            bottom: 0px;
            inset-inline-start: 0px;
            width: 100%;
            height: 28px;
            background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
        }

        .page-order-success .ordered-items .scrollbar-track {
            display: none !important;
        }

    .page-order-success .order-details .content-container {
        width: 600px;
        margin-inline: auto;
        margin-block-start: var(--gap-12);
    }

    .page-order-success .order-details .row-price {
        display: flex;
        width: 100%;
        align-content: center;
        border-block-end: 1px solid var(--color-border-muted);
        padding-block: var(--gap-16);
    }

        .page-order-success .order-details .row-price .title {
            width: 100%;
            font-weight: 500;
            font-size: 14px;
            line-height: 130%;
        }

        .page-order-success .order-details .row-price .details {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            font-weight: 700;
            line-height: 130%;
            font-size: 14px;
            text-align: end;
            gap: var(--gap-4);
        }

*[dir='rtl'] .page-order-success .order-details .row-price .details bdi {
    text-align: start;
}

.page-order-success .order-details .row-price .details bdi span:first-child {
    margin-inline-end: var(--gap-4);
}

.page-order-success .controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-8);
    margin-block-start: var(--gap-40);
}

.page-order-success .heading-panel.iute h1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 120%;
    text-align: center;
    color: var(--color-text-basic);
}

.page-order-success .heading-panel.iute p {
    font-size: 18px;
    font-weight: 400;
    line-height: 120%;
    text-align: center;
    color: var(--color-text-basic);
    padding-block-end: var(--gap-16);
}

.page-order-success .heading-panel.iute .qr {
    display: block;
    width: 260px;
    height: 260px;
    padding: var(--gap-16);
    border-radius: var(--radius-16);
    background: var(--color-bg-main);
    margin-inline: auto;
}

    .page-order-success .heading-panel.iute .qr img {
        display: block;
        width: 100%;
        height: 100%;
    }

.page-order-success .heading-panel.iute .row-link {
    display: block;
    width: 100%;
    text-align: center;
}

    .page-order-success .heading-panel.iute .row-link a {
        display: inline-block;
        font-size: 16px;
        line-height: 130%;
        font-weight: 500;
        color: var(--color-text-primary);
        text-decoration: underline;
    }



@media (max-width: 767px) {
    .page-order-success .heading-panel h1, .page-order-success .heading-panel p, .page-order-success .ordered-items .content-container, .page-order-success .order-details .content-container {
        width: 400px;
    }

    .page-order-success .heading-panel h1 {
        font-size: 24px;
    }

    .page-order-success .heading-panel {
        padding-inline: var(--gap-32);
    }

        .page-order-success .heading-panel p,
        .page-order-success .heading-panel.iute p {
            font-size: 14px;
        }

    .page-order-success .ordered-items {
        width: 440px;
        max-height: none !important;
    }

    .page-order-success .controls {
        display: none;
    }
}

@media (max-width: 600px) {

    .page-order-success .heading-panel.iute {
        padding-block-start: var(--gap-32);
        padding-block-end: var(--gap-32);
    }


    .page-order-success .heading-panel h1,
    .page-order-success .heading-panel p,
    .page-order-success .ordered-items .content-container,
    .page-order-success .order-details .content-container {
        width: calc(100% - 20px);
    }

    .page-order-success .ordered-items {
        width: 100%;
        margin-block-start: var(--gap-8) !important;
    }

    .page-order-success .order-details .row-price .title,
    .page-order-success .order-details .row-price .details {
        width: 50%;
    }

        .page-order-success .order-details .row-price .details span {
            word-break: break-word;
        }
}


@media (max-width: 575px) {
    .page-order-success .heading-panel.iute .qr {
        width: 200px;
        height: 200px;
    }

    .page-order-success .heading-panel.iute {
        padding-inline: var(--gap-16);
    }
}
/* #endregion ================================/ Order Success ========================================== */
/* #region ================================= Shopping Cart Widget ====================================== */
.shopping-cart-widget {
    display: none;
}

    .shopping-cart-widget.active {
        display: flex;
        flex-direction: column;
        background: var(--color-bg-main);
        position: absolute;
        z-index: 4;
        width: 400px;
        inset-block-start: var(--gap-64);
        inset-inline-end: 15px;
        border-radius: var(--radius-8);
        box-shadow: 0px 10px 60px 0px var(--color-shade-300);
    }

    .shopping-cart-widget .heading {
        display: flex;
        padding-inline: var(--gap-16);
        padding-block: var(--gap-12);
        gap: var(--gap-16);
        align-items: center;
    }

        .shopping-cart-widget .heading h2 {
            display: block;
            width: 100%;
            line-height: 120%;
            color: var(--color-text-basic);
            font-weight: 700;
            font-size: 20px;
        }

    .shopping-cart-widget .btn-remove-all {
        display: flex;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        border: 0px none transparent;
        outline: none;
        cursor: pointer;
        border-radius: var(--radius-8);
        background-color: transparent;
        transition: background 0.2s ease;
    }

        .shopping-cart-widget .btn-remove-all:hover {
            background-color: var(--color-bg-inputs-transparent);
            transition: background 0.2s ease;
        }

    .shopping-cart-widget .row-callout {
        padding-inline: var(--gap-16);
        padding-block-end: var(--gap-8);
    }

        .shopping-cart-widget .row-callout .callout.signin {
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

            .shopping-cart-widget .row-callout .callout.signin p {
                text-align: center;
            }

            .shopping-cart-widget .row-callout .callout.signin a {
                display: flex;
                gap: var(--gap-8);
                text-decoration: none;
                font-weight: 700;
                line-height: 130%;
                color: var(--color-text-primary);
                align-items: center;
            }

                .shopping-cart-widget .row-callout .callout.signin a i {
                    font-size: 24px;
                }

    .shopping-cart-widget .footing {
        display: flex;
        flex-direction: column;
    }

        .shopping-cart-widget .footing .total {
            display: flex;
            gap: var(--gap-16);
            padding: var(--gap-16);
            background: var(--color-bg-panel);
        }

            .shopping-cart-widget .footing .total h3 {
                width: 100%;
                font-size: 16px;
                line-height: 130%;
                font-weight: 700;
                color: var(--color-text-basic);
            }

            .shopping-cart-widget .footing .total .price-block {
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                gap: var(--gap-0);
                text-align: end;
            }

*[dir='rtl'] .shopping-cart-widget .footing .total .price-block bdi {
    text-align: start;
}

.shopping-cart-widget .footing .total .price-block bdi {
    font-weight: 700;
    line-height: 130%;
    font-size: 16px;
}

    .shopping-cart-widget .footing .total .price-block bdi span:first-child {
        margin-inline-end: var(--gap-4);
    }

.shopping-cart-widget .footing .controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
    padding: var(--gap-16);
}

    .shopping-cart-widget .footing .controls .new-btn {
        display: flex;
        height: 50px;
        justify-content: center;
        align-items: center;
    }

.shopping-cart-widget .empty-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-8);
    padding-inline: var(--gap-48);
    padding-block-start: var(--gap-8);
    padding-block-end: var(--gap-48);
    text-align: center;
}

    .shopping-cart-widget .empty-content .ci-pazar-large {
        font-size: 64px;
    }

    .shopping-cart-widget .empty-content .controls {
        text-align: center;
        padding-block-start: var(--gap-16);
    }

        .shopping-cart-widget .empty-content .controls .new-btn {
            height: 50px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

    .shopping-cart-widget .empty-content h3 {
        font-size: 18px;
        color: var(--color-text-basic);
        font-weight: 700;
        line-height: 130%;
    }

    .shopping-cart-widget .empty-content p {
        font-size: 14px;
        color: var(--color-text-muted);
        font-weight: 500;
        line-height: 130%;
    }

    .shopping-cart-widget .empty-content .row-icon {
        text-align: center;
    }

@media (max-width: 767px) {
    .shopping-cart-widget.active {
        display: none;
    }
}

/* #region Item */
.shopping-cart-widget .content .ads-list {
    display: flex;
    flex-direction: column;
    padding-block-start: var(--gap-0);
    padding-block-end: var(--gap-16);
}

.shopping-cart-widget .content .item {
    display: flex;
    padding-inline: var(--gap-8);
}

    .shopping-cart-widget .content .item .panel {
        display: flex;
        background-color: transparent;
        padding: var(--gap-8);
        gap: var(--gap-8);
        border-radius: var(--radius-8);
        width: 100%;
        max-width: 100%;
    }

    .shopping-cart-widget .content .item:hover .panel,
    .shopping-cart-widget .content .item.active .panel {
        background-color: var(--color-bg-panel);
    }

.shopping-cart-widget .shimm-placeholder .item:hover .panel {
    background-color: transparent;
}

.shopping-cart-widget .content .item .image-container {
    display: flex;
    width: 128px;
    height: 128px;
    border-radius: var(--radius-8);
    justify-content: center;
    align-items: center;
    font-size: 48px;
    background-color: var(--color-bg-inputs-transparent);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
}

    .shopping-cart-widget .content .item .image-container img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        z-index: 1;
        inset-inline-start: 0px;
        inset-block-start: 0px;
        filter: brightness(0.96);
    }

.shopping-cart-widget .content .item .info-container {
    display: flex;
    width: 100%;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: var(--gap-8);
}

.shopping-cart-widget .content .item .title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-basic);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    cursor: pointer;
    padding-inline-start: var(--gap-4);
    padding-block-start: var(--gap-4);
}



.shopping-cart-widget .content .item .section-controls {
    gap: var(--gap-16);
    display: flex;
    width: 100%;
    align-items: center;
}

    .shopping-cart-widget .content .item .section-controls .delivery {
        flex-shrink: 0;
        display: flex;
        gap: var(--gap-4);
        align-items: center;
        font-size: 14px;
        font-weight: 700;
        color: var(--color-text-muted);
    }

    .shopping-cart-widget .content .item .section-controls .ci-truck {
        font-size: 24px;
    }

    .shopping-cart-widget .content .item .section-controls .right-side {
        width: 100%;
        justify-content: end;
        display: flex;
    }

        .shopping-cart-widget .content .item .section-controls .right-side .btn-remove {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            font-size: 24px;
            border: 0px none transparent;
            border-radius: var(--radius-8);
            cursor: pointer;
            background: transparent;
            transition: background 0.2s ease;
        }

            .shopping-cart-widget .content .item .section-controls .right-side .btn-remove:hover {
                background: var(--color-bg-inputs-transparent);
                transition: background 0.2s ease;
            }

/* #region Price */

.shopping-cart-widget .content .item .section-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-2);
    flex: 1 0 0;
    align-self: stretch;
}

    .shopping-cart-widget .content .item .section-price .price {
        display: flex;
        height: 30px;
        padding-inline: var(--gap-4);
        gap: var(--gap-4);
        font-size: 16px;
        font-weight: 700;
        color: var(--color-text-basic);
        align-items: center;
    }


.shopping-cart-widget .content .item .old-price {
    color: var(--color-text-muted);
    text-decoration: line-through;
    font-size: 12px;
    font-weight: 700;
    line-height: 120%;
    text-align: start;
    padding-inline-start: var(--gap-4);
}

*[dir='rtl'] .shopping-cart-widget .content .item .old-price {
    text-align: end;
    padding-inline-end: var(--gap-4);
}

.shopping-cart-widget .content .item .old-price span:first-child {
    margin-inline-end: var(--gap-4);
}

.shopping-cart-widget .content .item .row-price {
    display: flex;
    gap: var(--gap-8);
    align-items: center;
}

.shopping-cart-widget .content .item .btn-price {
    border: 0px none transparent;
    font-size: 16px;
    padding-inline: var(--gap-4);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-basic);
    cursor: pointer;
    border-radius: var(--radius-4);
    display: inline-block;
    padding-block: var(--gap-4);
    background-color: transparent;
}

    .shopping-cart-widget .content .item .btn-price:hover {
        background-color: var(--color-bg-inputs-transparent);
    }

    .shopping-cart-widget .content .item .btn-price span:first-child {
        margin-inline-end: var(--gap-4);
        display: inline-block;
    }

.shopping-cart-widget .content .item .edit-price {
    width: 90px;
    border: 1px solid var(--color-border-basic);
    background-color: var(--color-bg-main);
    border-radius: 4px;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-basic);
    line-height: 130%;
    padding-inline: var(--gap-8);
}

.shopping-cart-widget .content .item .currency {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-basic);
}

.shopping-cart-widget .content .item .row-price .select-new .control {
    border: 1px solid var(--color-border-basic);
    background: var(--color-bg-main);
}

/* endregion Price */


/* #endregion Item */
/* #endregion =============================/ Shopping Cart Widget ====================================== */
/* #endregion ==============================/ Shopping Cart Widget ===================================== */
/* #region ================================= Modal: Add to cart ======================================== */
.dropup-modal.add-to-cart .row-ad-detail {
    display: block;
    padding-inline: 80px;
    padding-block-start: var(--gap-24);
}

    .dropup-modal.add-to-cart .row-ad-detail .panel {
        display: flex;
        gap: var(--gap-16);
        border-radius: var(--radius-16);
        background-color: var(--color-bg-panel);
        flex: 1;
        align-items: center;
    }

    .dropup-modal.add-to-cart .row-ad-detail .image-container {
        display: flex;
        width: 100px;
        height: 100px;
        border-radius: var(--radius-16);
        overflow: hidden;
        background-color: var(--color-bg-inputs-transparent);
        align-items: center;
        justify-content: center;
        font-size: 32px;
        position: relative;
        flex-shrink: 0;
    }

        .dropup-modal.add-to-cart .row-ad-detail .image-container img {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1;
            object-fit: cover;
            filter: brightness(0.97);
        }

    .dropup-modal.add-to-cart .row-ad-detail .col-information {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex: 1;
        min-width: 0px;
        padding-inline-end: var(--gap-16);
        gap: var(--gap-8);
    }

    .dropup-modal.add-to-cart .row-ad-detail .category {
        display: flex;
        font-size: 14px;
        color: var(--color-text-muted);
        gap: var(--gap-8);
    }

        .dropup-modal.add-to-cart .row-ad-detail .category span {
            display: inline-block;
            max-width: 130px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            .dropup-modal.add-to-cart .row-ad-detail .category span + span:before {
                content: '/';
                display: inline-block;
                margin-inline-end: var(--gap-8);
            }

    .dropup-modal.add-to-cart .row-ad-detail .title {
        display: block;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--color-text-basic);
        font-size: 18px;
        line-height: 130%;
        font-weight: 500;
    }

    .dropup-modal.add-to-cart .row-ad-detail bdi {
        font-size: 14px;
        line-height: 130%;
        font-weight: 700;
    }

        .dropup-modal.add-to-cart .row-ad-detail bdi span:last-child {
            margin-inline-start: var(--gap-4);
        }

*[dir='rtl'] .dropup-modal.add-to-cart .row-ad-detail bdi {
    text-align: right;
}

.dropup-modal.add-to-cart .row-offer {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16);
    padding-block-start: var(--gap-32);
    padding-block-end: var(--gap-32);
}

.dropup-modal.add-to-cart .row-controls {
    display: flex;
    gap: var(--gap-8);
    justify-content: center;
}

.dropup-modal.add-to-cart .row-offer .title {
    font-size: 14px;
    font-weight: 500;
    line-height: 130%;
    text-align: center;
}

.dropup-modal.add-to-cart .row-offer .floating-textbox {
    max-width: 210px;
}

.dropup-modal.add-to-cart .row-offer .select-new {
    max-width: 90px;
}

@media (max-width: 600px) {
    .dropup-modal.add-to-cart .row-ad-detail {
        display: block;
        padding-inline: 0px;
        padding-block-start: var(--gap-12);
    }
}

/* #endregion =============================/ Modal: Add to cart ======================================== */
/* #region ==================================== Mobile Footer ========================================== */
.nav-footer-mobile {
    display: none;
    background: var(--color-bg-main);
    border-top-left-radius: var(--radius-8);
    border-top-right-radius: var(--radius-8);
    position: fixed;
    z-index: 101;
    inset-block-end: 0px;
    inset-inline-start: 0px;
    width: 100%;
    gap: var(--gap-8);
    padding-block: var(--gap-8);
}

@media (max-width: 991px) {
    .nav-footer-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
/* #endregion ================================/ Mobile Footer ========================================== */
/* #region ====================================== Shimmers ============================================= */
.shimmer {
    position: absolute;
    z-index: 1;
    display: block;
    width: 50%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 80%);
    animation: shimmer 1.5s linear infinite;
}

@keyframes shimmer {
    0% {
        transform: translate(-300%);
    }

    100% {
        transform: translate(300%);
    }
}

.shimmer-block {
    position: relative;
    overflow: hidden;
}

.mobile-shimmer-block {
    position: relative;
    overflow: hidden;
}

.mobile-shimmer-block {
    display: none;
}

.mobile .mobile-shimmer-block {
    display: block;
}

.mobile .shimmer-block {
    display: none;
}

.responsive-shimmer-block {
    position: relative;
    overflow: hidden;
}

    /* #region -------------- Responsive Topbar ---------------------  */
    .responsive-shimmer-block.topmenu-username-shimmer {
        margin-inline-end: 65px;
    }

        .responsive-shimmer-block.topmenu-username-shimmer .content {
            display: block;
            width: 100px;
            height: 20px;
            border-radius: var(--radius-4);
            background: #e9e9e9;
        }

    .responsive-shimmer-block.topmenu-avatar-shimmer {
        display: block;
        width: 40px;
        height: 40px;
        vertical-align: top;
        position: absolute;
        top: calc(50% - 21px);
        right: 26px;
        overflow: hidden;
        border-radius: 50%;
    }

    .responsive-shimmer-block.display-ad-address-shimmer .content {
        width: 100%;
        height: 50px;
        display: block;
        background-color: #e9e9e9;
        margin-bottom: 10px;
    }

*[dir='rtl'] .responsive-shimmer-block.topmenu-avatar-shimmer {
    left: 26px;
    right: auto;
}

.responsive-shimmer-block.topmenu-avatar-shimmer .content {
    display: block;
    width: 100%;
    height: 100%;
    background: #E9E9E9;
}

.responsive-shimmer-block.mobilemenu-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
}

    .responsive-shimmer-block.mobilemenu-avatar .content {
        width: 100%;
        height: 100%;
        display: block;
        background-color: #e9e9e9;
    }

.responsive-shimmer-block.sidemenu-avatar-shimmer {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
}

*[dir='rtl'] .responsive-shimmer-block.sidemenu-avatar-shimmer {
    right: 12px;
    left: auto;
}

.responsive-shimmer-block.sidemenu-avatar-shimmer .content {
    display: block;
    width: 100%;
    height: 100%;
    background: #E9E9E9;
}

.responsive-shimmer-block.shimmer-topheader .content {
    display: flex;
    align-items: center;
    height: 54px;
}

.responsive-shimmer-block.shimmer-topheader .left-side {
    width: 100%;
    gap: 10px;
    display: flex;
    align-content: center;
}

.responsive-shimmer-block.shimmer-topheader .right-side {
    width: 100%;
    gap: 10px;
    display: flex;
    align-content: center;
    flex-direction: row-reverse;
}

.responsive-shimmer-block.shimmer-topheader .left-side span {
    display: inline-block;
    font-size: 14px;
    width: 60px;
    height: 16px;
    border-radius: var(--radius-4);
    background-color: #E9E9E9;
    vertical-align: middle;
    align-self: center;
}

.responsive-shimmer-block.shimmer-topheader .right-side span {
    display: inline-block;
    font-size: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #E9E9E9;
    vertical-align: middle;
    align-self: center;
}

.responsive-shimmer-block.shimmer-bottomheader .content {
    display: flex;
    align-items: center;
    height: 75px;
}

.responsive-shimmer-block.shimmer-bottomheader .left-side {
    width: 100%;
    height: 100%;
    display: flex;
}

.responsive-shimmer-block.shimmer-bottomheader .right-side {
    display: flex;
    gap: 40px;
    height: 100%;
    font-size: 0px;
}

    .responsive-shimmer-block.shimmer-bottomheader .right-side span {
        display: inline-block;
        font-size: 14px;
        width: 60px;
        height: 16px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        align-self: center;
    }

    .responsive-shimmer-block.shimmer-bottomheader .right-side b {
        display: inline-block;
        font-size: 14px;
        width: 150px;
        height: 50px;
        border-radius: var(--radius-8);
        background-color: var(--color-bg-danger);
        vertical-align: middle;
        align-self: center;
    }


/* #region Logos */

.site-Macedonia .responsive-shimmer-block.shimmer-bottomheader .logo {
    display: block;
    width: 260px;
    height: 40px;
    background: url('../../Content/Images/Macedonia/Macedonia.svg') no-repeat center center transparent;
    background-size: contain;
    align-self: center;
}

.site-Afghanistan .responsive-shimmer-block.shimmer-bottomheader .logo {
    display: block;
    width: 223px;
    height: 40px;
    background: url('../../Content/Images/Afghanistan/Afghanistan.svg') no-repeat center center transparent;
    background-size: contain;
    align-self: center;
}

.site-Albania .responsive-shimmer-block.shimmer-bottomheader .logo {
    display: block;
    width: 220px;
    height: 40px;
    background: url('../../Content/Images/Albania/Albania.svg') no-repeat center center transparent;
    background-size: contain;
    align-self: center;
}

.site-Kosovo .responsive-shimmer-block.shimmer-bottomheader .logo {
    display: block;
    width: 227px;
    height: 40px;
    background: url('../../Content/Images/Kosovo/Kosovo.svg') no-repeat center center transparent;
    background-size: contain;
    align-self: center;
}

.site-Montenegro .responsive-shimmer-block.shimmer-bottomheader .logo {
    display: block;
    width: 212px;
    height: 40px;
    background: url('../../Content/Images/Montenegro/Montenegro.svg') no-repeat center center transparent;
    background-size: contain;
    align-self: center;
}

.site-Serbia .responsive-shimmer-block.shimmer-bottomheader .logo {
    display: block;
    width: 202px;
    height: 40px;
    background: url('../../Content/Images/Serbia/Serbia.svg') no-repeat center center transparent;
    background-size: contain;
    align-self: center;
}
/* #endregion Logos */


.responsive-shimmer-block.shimmer-mobileheader .large-screen,
.responsive-shimmer-block.shimmer-mobileheader .small-screen {
    height: 55px;
}

.responsive-shimmer-block.shimmer-mobileheader .large-screen {
    display: flex;
    align-content: center;
}

.responsive-shimmer-block.shimmer-mobileheader .small-screen {
    display: none;
}

.responsive-shimmer-block.shimmer-mobileheader .large-screen .left-side {
    width: calc(100% - 90px);
    display: flex;
    align-items: center;
}

.responsive-shimmer-block.shimmer-mobileheader .large-screen .right-side {
    width: 90px;
    display: flex;
    align-items: center;
}

    .responsive-shimmer-block.shimmer-mobileheader .large-screen .right-side span + span {
        margin-inline-start: 10px;
    }

.responsive-shimmer-block.shimmer-mobileheader span {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #E9E9E9;
}

@media (max-width: 500px) {
    .responsive-shimmer-block.shimmer-mobileheader .large-screen {
        display: none;
    }

    .responsive-shimmer-block.shimmer-mobileheader .small-screen {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* #endregion ---------- /Responsive Topbar ---------------------- */
/* #region ------------ Responsive Stores ----------------- */
.img-shimmer-container.store-list-item {
    padding-inline-start: 3px;
}

    .img-shimmer-container.store-list-item .responsive-shimmer-block {
        position: absolute !important;
    }

        .img-shimmer-container.store-list-item .responsive-shimmer-block .content {
            height: 100% !important;
        }

        .img-shimmer-container.store-list-item .responsive-shimmer-block + .visually-hidden-shimmer img {
            border-radius: var(--radius-4);
        }

        .img-shimmer-container.store-list-item .responsive-shimmer-block.hidden + .visually-hidden-shimmer img {
            border-radius: var(--radius-0);
        }

    .img-shimmer-container.store-list-item .visually-hidden-shimmer {
        height: 100%;
        display: flex;
        justify-content: center;
    }

        .img-shimmer-container.store-list-item .visually-hidden-shimmer img {
            height: auto;
            display: inline-block;
            object-fit: contain;
        }

@media (max-width: 766px) {
    .img-shimmer-container.store-list-item {
        padding-inline-start: 3px;
        height: 140px;
    }
}

.img-shimmer-container.store-goodsitem-photo {
    position: relative;
    padding-inline-start: 4px;
    height: 160px;
}

    .img-shimmer-container.store-goodsitem-photo .responsive-shimmer-block {
        position: absolute;
        z-index: 1;
    }

    .img-shimmer-container.store-goodsitem-photo .content {
        height: 100% !important;
    }

    .img-shimmer-container.store-goodsitem-photo .responsive-shimmer-block + .visually-hidden-shimmer {
        border-radius: var(--radius-4);
        overflow: hidden;
    }

    .img-shimmer-container.store-goodsitem-photo .responsive-shimmer-block.hidden + .visually-hidden-shimmer {
        border-radius: var(--radius-0);
        overflow: visible;
    }


@media (max-width: 991px) {
    .img-shimmer-container.store-goodsitem-photo {
        height: 150px;
    }
}

@media (max-width: 800px) {
    .img-shimmer-container.store-goodsitem-photo {
        height: 120px;
    }
}

@media (max-width: 400px) {
    .img-shimmer-container.store-goodsitem-photo {
        height: 100px;
    }
}

.responsive-shimmer-block.storeserch-textbox-shimmer .content {
    display: block;
    width: 100%;
    height: 35px;
    border-radius: var(--radius-4);
    background: #e9e9e9;
}

.responsive-shimmer-block.storeserch-button-shimmer .content {
    display: block;
    width: 100%;
    height: 35px;
    border-radius: var(--radius-4);
    background: var(--color-bg-primary);
}

.responsive-shimmer-block.shimmer-storesearch .content {
    display: flex;
    gap: 10px;
}

    .responsive-shimmer-block.shimmer-storesearch .content + .content {
        margin-block-start: 20px;
    }

.responsive-shimmer-block.shimmer-storesearch .checkbox-item {
    display: flex;
    gap: 5px;
}

    .responsive-shimmer-block.shimmer-storesearch .checkbox-item span {
        width: 20px;
        height: 20px;
        border-radius: var(--radius-4);
        background: #e9e9e9;
    }

        .responsive-shimmer-block.shimmer-storesearch .checkbox-item span + span {
            width: 120px;
        }

.responsive-shimmer-block.shimmer-storesearch .content.textboxes small,
.responsive-shimmer-block.shimmer-storesearch .content.textboxes span {
    display: inline-block;
    height: 35px;
    border-radius: var(--radius-4);
    background: #e9e9e9;
}

.responsive-shimmer-block.shimmer-storesearch .content.textboxes b {
    display: inline-block;
    height: 35px;
    border-radius: var(--radius-4);
    background: var(--color-bg-primary);
}

.responsive-shimmer-block.shimmer-storesearch .content.textboxes small {
    flex-grow: 3;
}

.responsive-shimmer-block.shimmer-storesearch .content.textboxes span {
    flex-grow: 4;
}

.responsive-shimmer-block.shimmer-storesearch .content.textboxes b {
    flex-grow: 2;
}

@media (max-width: 767px) {
    .responsive-shimmer-block.shimmer-storesearch .content.textboxes {
        display: block;
    }

        .responsive-shimmer-block.shimmer-storesearch .content.textboxes span,
        .responsive-shimmer-block.shimmer-storesearch .content.textboxes small,
        .responsive-shimmer-block.shimmer-storesearch .content.textboxes b {
            display: block;
            width: 100%;
            margin-bottom: 5px;
        }

    .responsive-shimmer-block.shimmer-storesearch .content + .content {
        margin-block-start: 15px;
    }
}

.responsive-shimmer-block.shimmer-storesearch-title .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 50px;
}

    .responsive-shimmer-block.shimmer-storesearch-title .content span {
        display: inline-block;
        width: 160px;
        height: 20px;
        border-radius: var(--radius-4);
        background: #e9e9e9;
    }

.responsive-shimmer-block.shimmer-storesearch-header .content {
    display: flex;
    width: 100%;
    align-items: center;
    background-color: #fafafa;
    border-radius: var(--radius-4);
    padding-inline: 10px;
    height: 35px;
}

    .responsive-shimmer-block.shimmer-storesearch-header .content span {
        display: inline-block;
        width: 140px;
        height: 20px;
        background: #e9e9e9;
        border-radius: var(--radius-4);
    }

.responsive-shimmer-block.shimmer-stores-list .store-item {
    display: flex;
    margin-block: 15px;
    gap: 30px;
}

    .responsive-shimmer-block.shimmer-stores-list .store-item .image-block {
        flex-grow: 4;
        height: 170px;
        border-radius: var(--radius-4);
        background-color: #e9e9e9;
    }

    .responsive-shimmer-block.shimmer-stores-list .store-item .text-side {
        flex-grow: 9;
    }

    .responsive-shimmer-block.shimmer-stores-list .store-item .title {
        display: block;
        height: 30px;
        border-radius: var(--radius-4);
        background-color: #e9e9e9;
        margin-block-end: 20px;
    }

    .responsive-shimmer-block.shimmer-stores-list .store-item .title-1 {
        width: 100%;
    }

    .responsive-shimmer-block.shimmer-stores-list .store-item .title-2 {
        width: 70%;
    }

    .responsive-shimmer-block.shimmer-stores-list .store-item .title-3 {
        width: 20%;
    }

@media (max-width: 575px) {
    .responsive-shimmer-block.shimmer-stores-list .store-item .image-block {
        height: 100px;
    }

    .responsive-shimmer-block.shimmer-stores-list .store-item .title {
        height: 15px;
    }
}
/* #endregion -------- /Responsive Stores ----------------- */
/* #region -------- Responsive StoreDetails --------------- */
.responsive-shimmer-block.shimmer-logintostore .content {
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content: end;
}

    .responsive-shimmer-block.shimmer-logintostore .content span {
        display: inline-block;
        width: 160px;
        height: 20px;
        border-radius: var(--radius-4);
        background-color: #e9e9e9;
    }

.responsive-shimmer-block.shimmer-storedetails-leftside {
    padding-inline: 20px;
    padding-block: 10px;
}

    .responsive-shimmer-block.shimmer-storedetails-leftside .caption {
        display: block;
        width: 40%;
        height: 30px;
        border-radius: var(--radius-4);
        background: #e9e9e9;
        margin-block-end: 10px;
    }

    .responsive-shimmer-block.shimmer-storedetails-leftside .slogan {
        display: block;
        width: 70%;
        height: 20px;
        border-radius: var(--radius-4);
        background: #e9e9e9;
        margin-block-end: 30px;
    }

    .responsive-shimmer-block.shimmer-storedetails-leftside .description-item {
        display: block;
        height: 10px;
        border-radius: var(--radius-4);
        background: #e9e9e9;
        margin-block-end: 10px;
    }

    .responsive-shimmer-block.shimmer-storedetails-leftside .item-1 {
        width: 40%;
    }

    .responsive-shimmer-block.shimmer-storedetails-leftside .item-2 {
        width: 30%;
    }

    .responsive-shimmer-block.shimmer-storedetails-leftside .item-3 {
        width: 10%;
    }

.responsive-shimmer-block.shimmer-storedetails-rightside {
    padding-inline: 20px;
    padding-block: 20px;
}

    .responsive-shimmer-block.shimmer-storedetails-rightside .logo {
        display: block;
        margin: 0px auto;
        width: 70%;
        height: 200px;
        border-radius: var(--radius-4);
        background: #e9e9e9;
        margin-bottom: 60px;
    }

    .responsive-shimmer-block.shimmer-storedetails-rightside .phone {
        display: block;
        margin: 0px auto;
        width: 60%;
        height: 20px;
        border-radius: var(--radius-4);
        background: #e9e9e9;
        margin-bottom: 20px;
    }

    .responsive-shimmer-block.shimmer-storedetails-rightside .email {
        display: block;
        width: 100%;
        height: 35px;
        border-radius: var(--radius-4);
        background: var(--color-bg-primary);
        margin-bottom: 20px;
    }

    .responsive-shimmer-block.shimmer-storedetails-rightside .description {
        display: block;
        height: 15px;
        border-radius: var(--radius-4);
        background: #e9e9e9;
        margin-bottom: 10px;
    }

        .responsive-shimmer-block.shimmer-storedetails-rightside .description.item-1 {
            width: 70%;
        }

        .responsive-shimmer-block.shimmer-storedetails-rightside .description.item-2 {
            width: 50%;
        }



.responsive-shimmer-block.shimmer-storesearch-filter {
    background: #fafafa;
    padding: 10px;
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    margin-inline: 4px;
}

    .responsive-shimmer-block.shimmer-storesearch-filter .first-line {
        display: flex;
        justify-content: space-between;
        height: 50px;
        align-items: center;
    }

        .responsive-shimmer-block.shimmer-storesearch-filter .first-line span {
            display: inline-block;
            width: 130px;
            height: 30px;
            background-color: #e9e9e9;
            border-radius: var(--radius-4);
        }

    .responsive-shimmer-block.shimmer-storesearch-filter .checkboxes {
        display: flex;
        gap: 20px;
    }

    .responsive-shimmer-block.shimmer-storesearch-filter .checkbox-item {
        display: flex;
        gap: 5px;
        margin-block-end: 5px;
    }

        .responsive-shimmer-block.shimmer-storesearch-filter .checkbox-item span {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: var(--radius-4);
            background: #e9e9e9;
        }

            .responsive-shimmer-block.shimmer-storesearch-filter .checkbox-item span + span {
                width: 80px;
            }

.responsive-shimmer-block.shimmer-storesearch-adheader .content {
    display: flex;
    background: #fafafa;
    padding: 10px;
    height: 40px;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
}

    .responsive-shimmer-block.shimmer-storesearch-adheader .content span {
        display: inline-block;
        width: 140px;
        height: 20px;
        border-radius: var(--radius-4);
        background: #e9e9e9;
    }


@media (max-width: 991px) {
    .responsive-shimmer-block.shimmer-storedetails-rightside .logo {
        display: none;
    }

    .responsive-shimmer-block.shimmer-storedetails-rightside .phone {
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 20px;
    }

    .responsive-shimmer-block.shimmer-storesearch-filter .checkboxes {
        display: block;
    }
}
/* #endregion ---- /Responsive StoreDetails --------------- */
/* #region ------------- Pagination ----------------------- */
.responsive-shimmer-block.shimmer-pagination {
    margin-block: 20px;
}

    .responsive-shimmer-block.shimmer-pagination .content {
        display: flex;
        gap: 5px;
        justify-content: center;
        align-items: center;
    }

    .responsive-shimmer-block.shimmer-pagination span {
        display: inline-block;
        width: 60px;
        height: 30px;
        background: #e9e9e9;
        border-radius: var(--radius-4);
    }

    .responsive-shimmer-block.shimmer-pagination small {
        display: inline-block;
        width: 30px;
        height: 30px;
        background: #e9e9e9;
        border-radius: var(--radius-4);
    }

@media (max-width: 766px) {
    .responsive-shimmer-block.shimmer-pagination small {
        display: none;
    }

    .responsive-shimmer-block.shimmer-pagination .content {
        gap: 50px;
        justify-content: center;
    }

    .responsive-shimmer-block.shimmer-pagination span {
        width: 100px;
    }
}
/* #endregion --------- /Pagination ----------------------- */
/* #endregion ====================================== Shimmers ============================================= */
/* #region ------------------- Mobile Nav Header -------------------- */
.mobile-nav-header span {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #E9E9E9;
}

.mobile-nav-header .large-screen,
.mobile-nav-header .small-screen {
    height: 55px;
}

.mobile-nav-header .small-screen {
    display: none;
}

.mobile-nav-header .large-screen {
    display: flex;
}

    .mobile-nav-header .large-screen .left-side {
        width: calc(100% - 90px);
        display: flex;
        align-items: center;
    }

    .mobile-nav-header .large-screen .right-side {
        width: 90px;
        display: flex;
        align-items: center;
    }


        .mobile-nav-header .large-screen .right-side span + span {
            margin-inline-start: 10px;
        }



@media (max-width: 500px) {
    .mobile-shimmer-block.mobile-nav-header .large-screen {
        display: none;
    }

    .mobile-shimmer-block.mobile-nav-header .small-screen {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
/* #endregion ---------------- Mobile Nav Header -------------------- */
/* #region ---------------- Mobile Create\Edit ad ------------------- */
.mobile .control-group .controls label {
    padding-inline-end: var(--gap-12);
}

.mobile .form-horizontal .control-groups .control-group .controls,
*[dir='rtl'].mobile .form-horizontal .control-groups .control-group .controls {
    margin-left: 0;
    padding-inline-start: var(--gap-8) !important;
    padding-inline-end: var(--gap-8) !important;
}


.mobile .control-group input[type='text'] {
    height: 45px;
    border-radius: 4px;
    box-shadow: none;
    font-size: 14px;
    font-family: 'Manrope';
    line-height: 100%;
    padding-inline: 8px;
    font-weight: 400;
    border: 1px solid var(--color-border-basic);
}

    .mobile .control-group input[type='text']:focus {
        border-color: var(--color-text-muted) !important;
    }

.mobile .control-group select {
    height: 45px;
    border-radius: var(--radius-4);
    border: 1px solid var(--color-border-basic);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg version='1.0' id='caret' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.41,4.61c-0.78-0.78-2.05-0.78-2.83,0L8.01,8.19L4.41,4.59c-0.78-0.78-2.05-0.78-2.83,0c-0.78,0.78-0.78,2.05,0,2.83 l4.99,4.99c0,0,0.01,0.01,0.01,0.01c0,0,0.01,0.01,0.01,0.01c0.39,0.39,0.9,0.59,1.41,0.59s1.02-0.2,1.41-0.59l4.99-4.99 C15.2,6.65,15.2,5.39,14.41,4.61z'/%3E%3C/svg%3E");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 10px;
    padding-inline-start: var(--gap-8) !important;
    padding-inline-end: var(--gap-24) !important;
    padding-block: 0px;
}

*[dir='rtl'].mobile .control-group select {
    background-image: url("data:image/svg+xml,%3Csvg version='1.0' id='caret' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.41,4.61c-0.78-0.78-2.05-0.78-2.83,0L8.01,8.19L4.41,4.59c-0.78-0.78-2.05-0.78-2.83,0c-0.78,0.78-0.78,2.05,0,2.83 l4.99,4.99c0,0,0.01,0.01,0.01,0.01c0,0,0.01,0.01,0.01,0.01c0.39,0.39,0.9,0.59,1.41,0.59s1.02-0.2,1.41-0.59l4.99-4.99 C15.2,6.65,15.2,5.39,14.41,4.61z'/%3E%3C/svg%3E");
    background-position: left 8px center;
}

.mobile .control-group select:focus {
    outline: none;
    border: 1px solid var(--color-text-muted);
}

.mobile .control-group select option {
    font-size: 16px;
}

.mobile .form-horizontal .control-groups .control-group .help-block {
    line-height: 130%;
    font-size: 14px;
    color: var(--color-text-muted);
    padding-block-end: var(--gap-8);
    padding-inline: var(--gap-2);
}

.mobile .form-horizontal .control-groups {
    border: 0px none transparent;
    background: var(--color-bg-panel);
    margin-block-start: var(--gap-16);
    margin-block-end: var(--gap-16);
    padding-block: var(--gap-8);
}

    .mobile .form-horizontal .control-groups .control-group {
        margin-block: var(--gap-8);
    }

        .mobile .form-horizontal .control-groups .control-group .controls label {
            font-size: 14px;
            line-height: 100%;
        }

.mobile .mobile-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 120%;
    padding-inline: var(--gap-12);
    font-family: 'Manrope';
    color: var(--color-text-basic);
}

.mobile .form-horizontal .control-groups .control-group .controls .pull-left.ci-margin-r-5 {
    margin-inline-end: 16px !important;
    padding-block: 0px;
    width: 100%;
}

.mobile .form-horizontal input[type='text'].input-small {
    margin-inline-end: var(--gap-12);
}

.mobile input[type='radio']:focus, .mobile input[type='checkbox']:focus {
    box-shadow: none;
    outline: none;
}

.mobile .form-horizontal .control-group .controls input[type=checkbox],
.mobile .form-horizontal .control-group .controls input[type=radio] {
    margin-inline-end: 2px;
}


.mobile .controls textarea {
    border-radius: var(--radius-4);
    box-shadow: none;
    border: 1px solid var(--color-border-basic);
    padding-inline: var(--gap-8);
    font-size: 14px;
    font-family: 'Manrope';
    font-weight: 400;
}

    .mobile .controls textarea:focus {
        border: 1px solid var(--color-text-muted) !important;
    }

.mobile .upload-button label {
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-8);
    background-color: var(--color-bg-inputs-transparent);
    font-size: 14px !important;
    font-weight: 700;
    color: var(--color-text-basic);
    text-transform: uppercase;
    padding: 0px !important;
    line-height: 100% !important;
    font-family: 'Manrope';
    box-shadow: none;
    border: 0px none transparent;
}

.mobile .upload-button.uploadId_images {
    margin-block-end: var(--gap-8);
}

.mobile .img-rt-wrap img {
    border-radius: var(--radius-8);
    filter: brightness(0.95);
}

.mobile .img-control.icon-repeat, .mobile .img-control.icon-remove {
    background-image: url('../../Content/Images/glyphicons-halflings-white.png');
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.mobile .img-control.icon-repeat {
    margin-block-start: 11px;
    margin-inline-start: 7px;
}

.mobile .img-control.icon-remove {
    margin-inline-end: 6px;
    margin-block-start: 11px;
    margin-inline-start: 72px !important;
}

.mobile .control-group .input-small + input[type='radio'] + input[type='radio'] {
    margin-inline-start: var(--gap-16);
}

.mobile .propertyLine .pull-left input[type=text].input-small {
    width: 100% !important;
}

.mobile .propertyLine .pull-left select.dropdown-price {
    font-size: 14px;
    text-transform: capitalize;
}

*[dir='rtl'].mobile .propertyLine .pull-left select.dropdown-price {
    margin-inline-start: 10px;
}

.mobile .propertyLine .pull-left.ci-margin-l-5 input[type='radio'] + input[type='radio'] {
    margin-inline-start: var(--gap-16);
}

.mobile .propertyLine .pull-left.ci-margin-l-5 input[type='radio'] {
    margin-block: var(--gap-16);
    margin-inline-end: var(--gap-4);
}

.mobile .controls.pad-left-right-6 {
    padding-block-end: var(--gap-8);
}

.mobile .propertyLine .btn-car {
    display: inline-block;
    margin-block-start: var(--gap-8);
    margin-block-end: var(--gap-16);
    color: var(--color-text-primary);
}

.mobile a.btnAsLink.showMapButton {
    color: var(--color-text-basic);
    text-decoration: none;
    display: flex;
    text-align: center;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg-inputs-transparent);
    height: 50px;
    border-radius: var(--radius-8);
    text-transform: uppercase;
    font-weight: 700 !important;
    font-family: 'Manrope';
    font-size: 14px;
}

.mobile .images-loader#imgContainer_video .img-small-container {
    width: 100%;
}

    .mobile .images-loader#imgContainer_video .img-small-container .thumbnail {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--gap-16);
    }

.mobile .fill-float#imgContainer_video .thumbnail a {
    display: flex;
    width: 100%;
    text-align: center;
    background-color: var(--color-bg-inputs-transparent);
    position: static;
    justify-content: center;
    align-items: center;
    height: 50px;
    border-radius: var(--radius-8);
    font-size: 14px;
    color: var(--color-text-basic);
    font-weight: 700 !important;
    line-height: 100%;
    text-transform: uppercase;
    font-family: 'Manrope';
}

.mobile .fill-float#imgContainer_video video.img-polaroid {
    border-radius: var(--radius-8);
    box-shadow: none;
    border: 1px solid var(--color-border-basic);
}

.mobile .controls select#SubCategory {
    margin-block-start: var(--gap-8);
}

*[dir='rtl'] input#ChangeAdContactInfoCmd_Phone {
    direction: ltr;
    text-align: right;
    unicode-bidi: plaintext;
}
/* #endregion ------------/ Mobile Create\Edit ad ------------------- */
/* #region --------------- Mobile Search Breadcrumbs ---------------- */
.mobile-search-breadcrumbs {
    display: none;
    padding-inline: 5px;
}

.mobile .mobile-search-breadcrumbs {
    display: block;
}

.mobile-search-breadcrumbs .content {
    display: flex;
    align-items: center;
    width: 100%;
    height: 46px;
}

    .mobile-search-breadcrumbs .content span {
        display: block;
        width: 80px;
        height: 30px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
    }

        .mobile-search-breadcrumbs .content span + span {
            margin-inline-start: 10px;
        }

/* #endregion ----------- /Mobile Search Breadcrumbs ---------------- */
/* #region ----------------------- Topbar ----------------------- */
.shimmer-block .topbar {
    display: block;
    width: 100%;
    height: 56px;
    background-color: #F9F9F9;
    padding-inline: 30px;
}

    .shimmer-block .topbar .container {
        width: 1170px;
        margin: 0px auto;
        display: flex;
        height: 100%;
    }

        .shimmer-block .topbar .container .left-side {
            width: 100%;
            font-size: 0px;
            height: 100%;
            display: flex;
            gap: 10px;
        }

            .shimmer-block .topbar .container .left-side span {
                display: inline-block;
                font-size: 14px;
                width: 60px;
                height: 16px;
                border-radius: var(--radius-4);
                background-color: #E9E9E9;
                vertical-align: middle;
                align-self: center;
            }

        .shimmer-block .topbar .container .right-side {
            display: flex;
            gap: 10px;
            height: 100%;
            font-size: 0px;
            padding-inline-end: 300px;
        }

            .shimmer-block .topbar .container .right-side span {
                display: inline-block;
                font-size: 14px;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: #E9E9E9;
                vertical-align: middle;
                align-self: center;
            }

    .shimmer-block .topbar.new .right-side {
        padding-inline-end: 0px;
    }
/* #endregion ------------------- /Topbar ----------------------- */
/* #region ----------------------- Navbar ----------------------- */
.shimmer-block .navbar {
    display: block;
    width: 100%;
    height: 75px;
    margin-bottom: 0px !important;
    padding-inline: 30px;
}

    .shimmer-block .navbar .container {
        width: 1170px;
        margin: 0px auto;
        display: flex;
        height: 100%;
    }

        .shimmer-block .navbar .container .left-side {
            width: 100%;
            height: 100%;
            display: flex;
        }

        .shimmer-block .navbar .container .right-side {
            display: flex;
            gap: 40px;
            height: 100%;
            font-size: 0px;
            padding-inline-end: 300px;
        }

            .shimmer-block .navbar .container .right-side span {
                display: inline-block;
                font-size: 14px;
                width: 60px;
                height: 16px;
                border-radius: var(--radius-4);
                background-color: #E9E9E9;
                vertical-align: middle;
                align-self: center;
            }

            .shimmer-block .navbar .container .right-side b {
                display: inline-block;
                font-size: 14px;
                width: 150px;
                height: 50px;
                border-radius: var(--radius-8);
                background-color: var(--color-bg-danger);
                vertical-align: middle;
                align-self: center;
            }

    .shimmer-block .navbar.new .container .right-side {
        padding-inline-end: 0px;
    }
/* #region Logos */

.site-Macedonia .shimmer-block .navbar .logo {
    display: block;
    width: 260px;
    height: 40px;
    background: url('../../Content/Images/Macedonia/Macedonia.svg') no-repeat center center transparent;
    background-size: contain;
    align-self: center;
}

.site-Afghanistan .shimmer-block .navbar .logo {
    display: block;
    width: 223px;
    height: 40px;
    background: url('../../Content/Images/Afghanistan/Afghanistan.svg') no-repeat center center transparent;
    background-size: contain;
    align-self: center;
}

.site-Albania .shimmer-block .navbar .logo {
    display: block;
    width: 220px;
    height: 40px;
    background: url('../../Content/Images/Albania/Albania.svg') no-repeat center center transparent;
    background-size: contain;
    align-self: center;
}

.site-Kosovo .shimmer-block .navbar .logo {
    display: block;
    width: 227px;
    height: 40px;
    background: url('../../Content/Images/Kosovo/Kosovo.svg') no-repeat center center transparent;
    background-size: contain;
    align-self: center;
}

.site-Montenegro .shimmer-block .navbar .logo {
    display: block;
    width: 212px;
    height: 40px;
    background: url('../../Content/Images/Montenegro/Montenegro.svg') no-repeat center center transparent;
    background-size: contain;
    align-self: center;
}

.site-Serbia .shimmer-block .navbar .logo {
    display: block;
    width: 202px;
    height: 40px;
    background: url('../../Content/Images/Serbia/Serbia.svg') no-repeat center center transparent;
    background-size: contain;
    align-self: center;
}
/* #endregion Logos */
/* #endregion ------------------- /Navbar ----------------------- */
/* #region ------------------- Search Block --------------------- */
.shimmer-block .search-button {
    display: block;
    width: 100%;
    height: 50px;
    border-radius: var(--radius-4);
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    background: var(--color-bg-primary);
}

.mobile-shimmer-block .search-button {
    display: block;
    width: 100%;
    height: 50px;
    border-radius: var(--radius-4);
    background: #e9e9e9;
}

.shimmer-block .search-block {
    display: block;
    width: 100%;
    height: 52px;
    margin-block-end: 10px;
}

    .shimmer-block .search-block .container {
        width: 100%;
        margin: 0px auto;
        display: flex;
        height: 100%;
    }

    .shimmer-block .search-block .left-side {
        width: 100%;
        font-size: 0px;
        height: 100%;
        display: flex;
        gap: 10px;
        padding-inline-end: 10px;
    }

        .shimmer-block .search-block .left-side span {
            display: inline-block;
            font-size: 14px;
            width: 100%;
            height: 52px;
            border-radius: var(--radius-4);
            background-color: #E9E9E9;
            vertical-align: middle;
            align-self: center;
        }

    .shimmer-block .search-block .right-side {
        display: flex;
        height: 100%;
        font-size: 0px;
        padding-inline-end: 0px;
    }

        .shimmer-block .search-block .right-side span {
            display: inline-block;
            font-size: 14px;
            width: 52px;
            height: 52px;
            border-radius: var(--radius-4);
            background-color: var(--color-bg-primary);
            vertical-align: middle;
            align-self: center;
        }

.img-shimmer-container.search-goods-item-logo img[src="/Content/Images/skeleton.svg"] {
    min-height: 100px;
}

.mobile-shimmer-block.search-block {
    padding-block-end: 20px;
    width: 100%;
}

    .mobile-shimmer-block.search-block span {
        display: block;
        width: 100%;
        height: 48px;
        margin-block-end: 2px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
    }
/* #endregion --------------- /Search Block --------------------- */
/* #region ------------------- Filter Block --------------------- */
.shimmer-block .filter-block {
    display: block;
    width: 100%;
    height: 100px;
}

    .shimmer-block .filter-block .container {
        width: 1170px;
        margin: 0px auto;
        display: flex;
        height: 100%;
        padding-inline-end: 255px;
    }

    .shimmer-block .filter-block span {
        display: inline-block;
        font-size: 14px;
        width: 100%;
        height: 100%;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        align-self: center;
    }

.shimmer-block .filter-first-row {
    display: block;
    width: 100%;
    height: 30px;
}

.shimmer-block .filter-second-row {
    display: block;
    width: 100%;
    height: 30px;
    margin-block-start: 10px;
}

    .shimmer-block .filter-first-row .container,
    .shimmer-block .filter-second-row .container {
        width: 100%;
        margin: 0px auto;
        display: flex;
        height: 100%;
        padding-inline-end: 0px;
    }

.shimmer-block .checkbox-item {
    display: inline-block;
    margin-inline-end: 30px;
}

    .shimmer-block .checkbox-item span {
        display: inline-block;
        font-size: 14px;
        width: 100%;
        height: 20px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        align-self: center;
        font-size: 14px;
    }

    .shimmer-block .checkbox-item span {
        width: 20px;
    }

        .shimmer-block .checkbox-item span + span {
            margin-inline-start: 5px;
            width: 120px;
        }

.shimmer-block .filter-second-row .checkbox-item span + span {
    width: 80px;
}


.shimmer-block .additional-filter {
    width: 100%;
    position: relative;
    padding-top: 10px;
}

    .shimmer-block .additional-filter .dropdown-shimmer {
        width: 125px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        height: 30px;
        display: inline-block;
    }

        .shimmer-block .additional-filter .dropdown-shimmer.long {
            width: 275px;
        }

        .shimmer-block .additional-filter .dropdown-shimmer + .dropdown-shimmer {
            margin-inline-start: 2px;
        }

.shimmer-block .color-filter-item {
    display: inline-block;
    width: 29px;
    height: 30px;
    background-color: #E9E9E9;
    border-radius: var(--radius-4);
    margin-block-end: 0px;
}

    .shimmer-block .color-filter-item + .color-filter-item {
        margin-inline-start: 0px;
    }

.shimmer-block .filter {
    display: flex;
}

    .shimmer-block .filter .left-side {
        width: calc(100% - 225px);
    }

    .shimmer-block .filter .right-side {
        width: 225px;
    }

.shimmer-block .cars-body-block {
    display: flex;
    gap: 5px;
    margin-block-start: 5px;
}

    .shimmer-block .cars-body-block .item {
        width: 100%;
        height: 90px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
    }

.mobile-shimmer-block .checkbox-item {
    display: flex;
    align-items: center;
    padding-inline-end: 30px;
}

    .mobile-shimmer-block .checkbox-item span {
        display: inline-block;
        font-size: 14px;
        width: 100%;
        height: 20px;
        width: 20px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        align-self: center;
        font-size: 14px;
    }

        .mobile-shimmer-block .checkbox-item span + span {
            width: 80px;
            margin-inline-start: 10px;
        }

.mobile-shimmer-block.extra-search-mobile .content {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.mobile-shimmer-block.extra-search-mobile {
    margin-bottom: 20px;
}

.mobile-shimmer-block.additional-filter {
    margin-bottom: 20px;
    margin-top: 20px;
}

    .mobile-shimmer-block.additional-filter .dropdown-shimmer {
        display: inline-block;
        width: 120px;
        height: 30px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        margin-bottom: 3px;
    }

        .mobile-shimmer-block.additional-filter .dropdown-shimmer.long {
            width: 100%;
        }

    .mobile-shimmer-block.additional-filter .checkbox-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 30px;
    }


.mobile-shimmer-block .cars-body-block {
    display: flex;
    gap: 3px;
}

    .mobile-shimmer-block .cars-body-block .item {
        width: 100%;
        height: 60px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
    }
/* #region Bottom */
.shimmer-block .filter-bottom {
    display: block;
    width: 100%;
    height: 30px;
    text-align: right;
}

*[dir='rtl'] .shimmer-block .filter-bottom {
    text-align: left;
}

.shimmer-block .filter-bottom .item {
    display: inline-block;
    width: 160px;
    height: 20px;
    border-radius: var(--radius-4);
    background-color: #E9E9E9;
}

/* #endregion Bottom */
/* #endregion --------------- /Filter Block --------------------- */
/* #region ------------------ AdSearch Tags --------------------- */
.shimmer-block .search-title {
    display: block;
    width: 100%;
    height: auto;
}

    .shimmer-block .search-title span {
        display: inline-block;
        width: 200px;
        height: 30px;
        background-color: #E9E9E9;
        border-radius: var(--radius-4);
        margin-block-start: 10px;
        margin-block-end: 5px;
    }

.shimmer-block.search-navbar {
    display: flex;
    width: 100%;
    border: 1px solid #d4d4d4;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 35px;
    background-color: #f9f9f9;
}

    .shimmer-block.search-navbar .left-side {
        width: calc(100% - 35px);
        display: flex;
        gap: 10px;
        align-items: center;
        vertical-align: middle;
        padding-inline: 10px;
    }

        .shimmer-block.search-navbar .left-side span {
            display: block;
            width: 80px;
            height: 20px;
            border-radius: var(--radius-4);
            background-color: #E9E9E9;
            vertical-align: middle;
        }


    .shimmer-block.search-navbar .right-side {
        width: 35px;
        display: block;
        text-align: center;
        padding-top: 7px;
    }

        .shimmer-block.search-navbar .right-side span {
            width: 20px;
            height: 20px;
            border-radius: var(--radius-4);
            background-color: #E9E9E9;
            display: inline-block;
        }

.shimmer-block.search-breadcrumbs {
    display: block;
    width: 100%;
    height: 38px;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    padding-inline: 10px;
    border-bottom: 1px solid #dddddd;
}


    .shimmer-block.search-breadcrumbs .items {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 100%;
    }

        .shimmer-block.search-breadcrumbs .items span {
            width: 120px;
            height: 20px;
            border-radius: var(--radius-4);
            background-color: #E9E9E9;
        }

.shimmer-block.groups-count-shimmer {
    display: block;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 10px;
}

    .shimmer-block.groups-count-shimmer .items {
        display: flex;
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
        gap: 12px;
    }

        .shimmer-block.groups-count-shimmer .items span {
            display: inline-block;
            width: 60px;
            height: 30px;
            padding-block-end: 10px;
            padding-inline-end: 10px;
            border-radius: var(--radius-4);
            background-color: #E9E9E9;
        }

            .shimmer-block.groups-count-shimmer .items span:nth-child(2n) {
                width: 90px;
            }


/* #endregion --------------- AdSearch Tags -------------------- */
/* #region --------------- Goods Listing Block ------------------ */

.shimmer-block.search-item-gallery-photo-shimmer {
    width: calc(100% - 20px);
    height: 152px;
    border-radius: var(--radius-4);
    margin-inline: 10px;
    top: -1px;
}

    .shimmer-block.search-item-gallery-photo-shimmer .content {
        width: 100%;
        height: 100%;
        background: #e9e9e9;
    }

.mobile-shimmer-block.search-goodsitem-photo-shimmer {
    width: 100%;
    height: 100%;
}

    .mobile-shimmer-block.search-goodsitem-photo-shimmer .content {
        display: block;
        width: 100%;
        height: 100%;
        background: #e9e9e9;
        border-radius: var(--radius-4);
        top: 0px;
        left: 0px;
    }

.img-shimmer-container.search-goods-item-logo {
    padding-inline-start: 0px;
}

    .img-shimmer-container.search-goods-item-logo .shimmer-block.search-goodsitem-logo-shimmer {
        left: auto;
        right: 0px;
    }

*[dir='rtl'] .img-shimmer-container.search-goods-item-logo .shimmer-block.search-goodsitem-logo-shimmer {
    left: 0px;
    right: auto;
}

.shimmer-block.search-goodsitem-photo-shimmer {
    margin-inline-start: 8px;
}


.img-shimmer-container.mobile-search {
    padding-inline-start: 0px;
}

    .img-shimmer-container.mobile-search .mobile-shimmer-block {
        position: absolute !important;
    }

.img-shimmer-container {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    padding-inline-start: 9px;
}

    .img-shimmer-container .shimmer-block {
        position: absolute !important;
        top: 0px;
        left: 0px;
        z-index: 1;
    }

*[dir='rtl'] .img-shimmer-container .shimmer-block {
    position: absolute !important;
    top: 0px;
    left: auto;
    right: 0px;
    z-index: 1;
}

.img-shimmer-container .shimmer-block + .visually-hidden-shimmer {
    border-radius: var(--radius-4);
    overflow: hidden;
}

.img-shimmer-container .shimmer-block.hidden + .visually-hidden-shimmer {
    border-radius: var(--radius-0);
    overflow: visible;
}

.shimmer-block.search-goodsitem-photo-shimmer .content {
    display: block;
    width: 212px;
    height: 162px;
    background: #e9e9e9;
    border-radius: var(--radius-4);
}

.shimmer-block.search-goodsitem-logo-shimmer .content {
    display: block;
    width: 130px;
    height: 100px;
    border-radius: var(--radius-4);
    background: #e9e9e9;
}

.shimmer-block .goods-listing-block {
    display: block;
    width: 100%;
    height: auto;
}

    .shimmer-block .goods-listing-block .container {
        width: 1170px;
        margin: 0px auto;
        display: flex;
        height: 100%;
        padding-block-start: 24px;
    }

    .shimmer-block .goods-listing-block .goods-block {
        width: calc(100% - 255px);
    }

    .shimmer-block .goods-listing-block .gallery-block {
        width: 255px;
        padding-inline-start: 24px;
    }
    /* #region Gallery */
    .shimmer-block .goods-listing-block .gallery-item {
        display: block;
        width: 100%;
        height: auto;
        padding-block-end: 24px;
    }

        .shimmer-block .goods-listing-block .gallery-item .image-block {
            display: block;
            width: 100%;
            height: 150px;
            border-radius: var(--radius-4);
            background-color: #E9E9E9;
        }

        .shimmer-block .goods-listing-block .gallery-item .title-1 {
            display: block;
            width: 100%;
            height: 16px;
            border-radius: var(--radius-4);
            background-color: #E9E9E9;
            margin-block-start: 16px;
        }

        .shimmer-block .goods-listing-block .gallery-item .title-2 {
            display: block;
            width: 30%;
            height: 16px;
            border-radius: var(--radius-4);
            background-color: #E9E9E9;
            margin-block-start: 16px;
        }

.shimmer-block.gallery-block {
    position: relative;
    overflow: hidden;
    width: 230px;
    padding-inline: 10px;
}

.shimmer-block .search-gallery-block {
    display: block;
    width: 100%;
    height: auto;
    padding-block-end: 24px;
    margin-block-start: 40px;
}

    .shimmer-block .search-gallery-block .gallery-item {
        margin-bottom: 40px;
    }


        .shimmer-block .search-gallery-block .gallery-item .image-block {
            width: 100%;
            height: 150px;
            background-color: #E9E9E9;
            border-radius: var(--radius-4);
            margin-bottom: 10px;
        }

        .shimmer-block .search-gallery-block .gallery-item .title-1 {
            width: 100%;
            height: 20px;
            background-color: #E9E9E9;
            border-radius: var(--radius-4);
            margin-bottom: 10px;
        }

        .shimmer-block .search-gallery-block .gallery-item .title-2 {
            width: 60%;
            height: 20px;
            background-color: #E9E9E9;
            border-radius: var(--radius-4);
        }


/* #endregion Gallery */
/* #region Listing */
.shimmer-block .goods-listing-block .goods-item,
.shimmer-block .stores-list-block .store-item {
    display: flex;
    width: 100%;
    height: auto;
    padding-block-end: 24px;
    position: static;
}

    .shimmer-block .goods-listing-block .goods-item .image-block,
    .shimmer-block .stores-list-block .store-item .image-block {
        display: block;
        width: 200px;
        height: 150px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
    }

    .shimmer-block .goods-listing-block .goods-item .text-side,
    .shimmer-block .stores-list-block .store-item .text-side {
        display: block;
        width: calc(100% - 200px);
        height: auto;
        padding-inline-start: 24px;
    }

    .shimmer-block .goods-listing-block .goods-item .title-1,
    .shimmer-block .stores-list-block .store-item .title-1 {
        display: block;
        width: 40%;
        height: 16px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        margin-block-start: 16px;
    }

    .shimmer-block .goods-listing-block .goods-item .title-2,
    .shimmer-block .stores-list-block .store-item .title-2 {
        display: block;
        width: 80%;
        height: 16px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        margin-block-start: 16px;
    }

    .shimmer-block .goods-listing-block .goods-item .title-3,
    .shimmer-block .stores-list-block .store-item .title-3 {
        display: block;
        width: 20%;
        height: 16px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        margin-block-start: 16px;
    }

.shimmer-block .search-goods-item {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
}

    .shimmer-block .search-goods-item .image-block {
        width: 200px;
        height: 150px;
        border-radius: var(--radius-4);
        background: #E9E9E9;
    }

    .shimmer-block .search-goods-item .text-side {
        width: calc(100% - 200px);
    }

    .shimmer-block .search-goods-item .title-1 {
        width: 80%;
        height: 20px;
        border-radius: var(--radius-4);
        background: #E9E9E9;
        margin-bottom: 20px;
    }

    .shimmer-block .search-goods-item .title-2 {
        width: 80%;
        height: 20px;
        border-radius: var(--radius-4);
        background: #E9E9E9;
        margin-bottom: 20px;
    }

    .shimmer-block .search-goods-item .title-3 {
        width: 40%;
        height: 20px;
        border-radius: var(--radius-4);
        background: #E9E9E9;
    }

.mobile-shimmer-block .search-goods-item {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
}


    .mobile-shimmer-block .search-goods-item .image-block {
        width: 150px;
        height: 150px;
        border-radius: var(--radius-4);
        background: #E9E9E9;
    }

    .mobile-shimmer-block .search-goods-item .text-side {
        width: calc(100% - 150px);
    }

    .mobile-shimmer-block .search-goods-item .title-1 {
        width: 80%;
        height: 20px;
        border-radius: var(--radius-4);
        background: #E9E9E9;
        margin-bottom: 20px;
    }

    .mobile-shimmer-block .search-goods-item .title-2 {
        width: 80%;
        height: 20px;
        border-radius: var(--radius-4);
        background: #E9E9E9;
        margin-bottom: 20px;
    }

    .mobile-shimmer-block .search-goods-item .title-3 {
        width: 40%;
        height: 20px;
        border-radius: var(--radius-4);
        background: #E9E9E9;
    }
/* #endregion Listing */
/* #endregion ----------- /Goods Listing Block ------------------ */
/* #region --------------- Stores Search Block ------------------ */
.responsive-shimmer-block.storeitem-logo-shimmer {
    width: 100%;
    height: 100%;
}

    .responsive-shimmer-block.storeitem-logo-shimmer .content {
        width: 100%;
        height: 165px;
        border-radius: var(--radius-4);
        background: #e9e9e9;
        display: block;
    }

@media (max-width: 767px) {
    .responsive-shimmer-block.storeitem-logo-shimmer .content {
        height: 120px;
    }
}

.responsive-shimmer-block.store-goodsitem-photo-shimmer {
    width: 100%;
    height: 100%;
}

    .responsive-shimmer-block.store-goodsitem-photo-shimmer .content {
        width: 100%;
        height: 160px;
        border-radius: var(--radius-4);
        background-color: #e9e9e9;
        display: block;
    }

@media (max-width: 767px) {
    .responsive-shimmer-block.store-goodsitem-photo-shimmer .content {
        height: 120px;
    }
}

.shimmer-block .stores-search-block {
    display: block;
    width: 100%;
    height: 150px;
}

    .shimmer-block .stores-search-block .container {
        width: 1170px;
        margin: 0px auto;
        display: flex;
        height: 100%;
        gap: 10px;
    }

    .shimmer-block .stores-search-block .left-side {
        width: 100%;
        font-size: 0px;
        height: 100%;
        display: flex;
        gap: 10px;
    }

    .shimmer-block .stores-search-block .right-side {
        display: flex;
        height: 100%;
        font-size: 0px;
    }

    .shimmer-block .stores-search-block .left-side span {
        display: inline-block;
        font-size: 14px;
        width: 100%;
        height: 52px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        align-self: center;
    }


    .shimmer-block .stores-search-block .right-side span {
        display: inline-block;
        font-size: 14px;
        width: 150px;
        height: 52px;
        border-radius: var(--radius-4);
        background-color: var(--color-bg-primary);
        vertical-align: middle;
        align-self: center;
    }
/* #endregion ----------- /Stores Search Block ------------------ */
/* #region ---------------- Stores List Block ------------------- */
.shimmer-block .stores-list-block {
    display: block;
    width: 100%;
    height: auto;
}

    .shimmer-block .stores-list-block .container {
        width: 1170px;
        margin: 0px auto;
        display: block;
        height: 100%;
    }
/* #endregion ------------ /Stores List Block ------------------- */
/* #region ---------------- Store Info Block -------------------- */
.shimmer-block .store-info-block .container {
    width: 1170px;
    margin: 0px auto;
    display: flex;
    height: auto;
    border-radius: var(--radius-4);
    background-color: #F9F9F9;
    gap: 24px;
    padding: 24px;
    margin-block: 40px;
}

    .shimmer-block .store-info-block .container .left-side {
        width: calc(100% - 345px);
    }

    .shimmer-block .store-info-block .container .right-side {
        width: 345px;
    }

.shimmer-block .store-info-block .left-side .image-block {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-4);
    background-color: #E9E9E9;
    margin-block-end: 16px;
    display: none;
}

.shimmer-block .store-info-block .left-side .title-1 {
    display: block;
    width: 80%;
    height: 16px;
    border-radius: var(--radius-4);
    background-color: #E9E9E9;
    margin-block-end: 16px;
}

.shimmer-block .store-info-block .left-side .title-2 {
    display: block;
    width: 60%;
    height: 16px;
    border-radius: var(--radius-4);
    background-color: #E9E9E9;
    margin-block-end: 16px;
}

.shimmer-block .store-info-block .left-side .title-3 {
    display: block;
    width: 30%;
    height: 16px;
    border-radius: var(--radius-4);
    background-color: #E9E9E9;
    margin-block-end: 16px;
}

.shimmer-block .store-info-block .right-side .image-block {
    display: block;
    width: 100%;
    height: 200px;
    border-radius: var(--radius-4);
    background-color: #E9E9E9;
    margin-block-end: 16px;
}

.shimmer-block .store-info-block .right-side .btn {
    display: block;
    width: 100%;
    height: 40px;
    border-radius: var(--radius-4);
    background-color: var(--color-bg-primary);
    margin-block-end: 16px;
}

.shimmer-block .store-info-block .right-side .title-1 {
    display: block;
    width: 70%;
    height: 16px;
    border-radius: var(--radius-4);
    background-color: #E9E9E9;
    margin-block-end: 16px;
}

.shimmer-block .store-info-block .right-side .title-2 {
    display: block;
    width: 40%;
    height: 16px;
    border-radius: var(--radius-4);
    background-color: #E9E9E9;
    margin-block-end: 0px;
}

/* #endregion ------------ /Store Info Block -------------------- */
/* #region ------------ Menu ------------------ */
.responsive-shimmer-block.topbar-userwallet {
    display: inline-block;
    vertical-align: top;
    width: 80px;
    height: 20px;
    margin-top: 7px;
    margin-inline: 5px;
}

    .responsive-shimmer-block.topbar-userwallet .content {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: var(--radius-4);
        background-color: #e9e9e9;
    }

.responsive-shimmer-block.menu-name {
    display: block;
    vertical-align: top;
    width: 130px;
    height: 20px;
}

    .responsive-shimmer-block.menu-name .content {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: var(--radius-4);
        background-color: #e9e9e9;
    }


.responsive-shimmer-block.menu-phone {
    display: block;
    vertical-align: top;
    width: 80px;
    height: 10px;
    margin-top: 10px;
}

    .responsive-shimmer-block.menu-phone .content {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: var(--radius-4);
        background-color: #e9e9e9;
    }

.responsive-shimmer-block.menu-planname {
    display: inline-block;
    vertical-align: top;
    width: 80px;
    height: 20px;
}

    .responsive-shimmer-block.menu-planname .content {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: var(--radius-4);
        background-color: #e9e9e9;
    }

.responsive-shimmer-block.menu-planbadge {
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 20px;
    margin-inline-start: 5px;
}

    .responsive-shimmer-block.menu-planbadge .content {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: var(--radius-4);
        background-color: #e9e9e9;
    }

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed .collapser-btn .responsive-shimmer-block.menu-planname,
.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.collapsed .collapser-btn .responsive-shimmer-block.menu-planbadge {
    display: inline-block;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-btn .responsive-shimmer-block.menu-planname {
    display: none;
}

.nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser .collapser-btn .responsive-shimmer-block.menu-planbadge {
    display: none;
}


.responsive-shimmer-block.menu-plandescription .description-text-1 {
    margin-top: 20px;
}

.responsive-shimmer-block.menu-plandescription .description-text-1,
.responsive-shimmer-block.menu-plandescription .description-text-2,
.responsive-shimmer-block.menu-plandescription .description-text-3,
.responsive-shimmer-block.menu-plandescription .description-text-4 {
    display: block;
    height: 15px;
    margin-inline: auto;
    margin-bottom: 10px;
    width: 80%;
    border-radius: var(--radius-4);
    background: #e9e9e9;
}


.responsive-shimmer-block.menu-plandescription .description-text-4 {
    width: 40%;
    margin-bottom: 20px;
}

.responsive-shimmer-block.menu-marker {
    position: absolute;
    top: calc(50% - 12px);
    right: 10px;
    width: 50px;
    height: 20px;
}

    .responsive-shimmer-block.menu-marker .content {
        background: #e9e9e9;
        border-radius: var(--radius-4);
        display: block;
        width: 100%;
        height: 100%;
    }

.responsive-shimmer-block.menu-priceblock {
    display: block;
    width: 120px;
    height: 15px;
}

    .responsive-shimmer-block.menu-priceblock .content {
        border-radius: var(--radius-4);
        background: #e9e9e9;
        display: block;
        width: 100%;
        height: 100%;
    }

.mobile-side-menu.version-2 .collapser.collapsed .collapser-btn .responsive-shimmer-block.menu-planname,
.mobile-side-menu.version-2 .collapser.collapsed .collapser-btn .responsive-shimmer-block.menu-planbadge {
    display: inline-block;
    margin-top: 3px;
}

.mobile-side-menu.version-2 .collapser .collapser-btn .responsive-shimmer-block.menu-planname,
.mobile-side-menu.version-2 .collapser .collapser-btn .responsive-shimmer-block.menu-planbadge {
    display: none;
}
/* endregion --------- /Menu ------------------ */
@media (max-width: 1199px) {
    .shimmer-block .topbar .container, .shimmer-block .navbar .container, .shimmer-block .search-block .container, .shimmer-block .filter-block .container, .shimmer-block .goods-listing-block .container, .shimmer-block .stores-search-block .container, .shimmer-block .stores-list-block .container, .shimmer-block .store-info-block .container {
        width: 960px;
    }

        .shimmer-block .topbar .container .right-side,
        .shimmer-block .navbar .container .right-side,
        .shimmer-block .search-block .right-side,
        .shimmer-block .filter-block .container {
            padding-inline-end: 0px;
        }

    .shimmer-block .goods-listing-block .gallery-block {
        display: none;
    }

    .shimmer-block .goods-listing-block .goods-block {
        width: 100%;
    }
}

@media (max-width: 991px) {
    .shimmer-block .topbar .container,
    .shimmer-block .navbar .container,
    .shimmer-block .search-block .container,
    .shimmer-block .filter-block .container,
    .shimmer-block .goods-listing-block .container,
    .shimmer-block .stores-search-block .container,
    .shimmer-block .stores-list-block .container,
    .shimmer-block .store-info-block .container {
        width: 728px;
    }

    .shimmer-block .navbar.new {
        display: none;
    }

    .shimmer-block .topbar.new .container {
        width: 100%;
        padding-inline: 24px;
    }

        .shimmer-block .topbar.new .container .left-side span {
            display: none;
        }

            .shimmer-block .topbar.new .container .left-side span:first-child {
                display: block;
                width: 40px;
                height: 40px;
            }

    .shimmer-block .store-info-block .container {
        display: block;
    }

    .shimmer-block .store-info-block .left-side,
    .shimmer-block .store-info-block .right-side {
        width: 100% !important;
    }

        .shimmer-block .store-info-block .right-side .image-block {
            display: none;
        }

        .shimmer-block .store-info-block .left-side .image-block {
            display: block;
        }
}

@media (max-width: 767px) {
    .shimmer-block .topbar .container,
    .shimmer-block .navbar .container,
    .shimmer-block .search-block .container,
    .shimmer-block .filter-block .container,
    .shimmer-block .goods-listing-block .container,
    .shimmer-block .stores-search-block .container,
    .shimmer-block .stores-list-block .container,
    .shimmer-block .store-info-block .container {
        width: 100%;
    }

    .shimmer-block .navbar,
    .shimmer-block .filter-block {
        display: none;
    }

    .shimmer-block .topbar .container .left-side {
        display: none;
    }

    .shimmer-block .topbar .container .right-side {
        width: 100%;
        gap: 0px;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding-inline: 24px;
    }

    .shimmer-block .topbar.new .container .right-side {
        width: 100%;
        gap: 10px;
        justify-content: flex-end;
        padding-inline: 0px;
    }

    .shimmer-block .topbar.new .container .left-side {
        display: flex;
    }

    .shimmer-block .search-block .right-side {
        display: none;
    }

    .shimmer-block .search-block .container,
    .shimmer-block .goods-listing-block .container,
    .shimmer-block .stores-search-block .container,
    .shimmer-block .stores-list-block .container,
    .shimmer-block .store-info-block .container {
        padding-inline: 24px;
    }

    .shimmer-block .search-block {
        display: block;
        height: auto;
        padding-block-end: 20px;
    }

        .shimmer-block .search-block .left-side {
            display: block;
        }

            .shimmer-block .search-block .left-side span {
                display: block;
                margin-block-start: 16px;
            }

    .shimmer-block .goods-listing-block .goods-item .image-block,
    .shimmer-block .stores-list-block .store-item .image-block {
        width: 150px;
        height: 100px;
    }

    .shimmer-block .goods-listing-block .goods-item .text-side,
    .shimmer-block .stores-list-block .store-item .text-side {
        width: calc(100% - 150px);
    }

    .shimmer-block .goods-listing-block .goods-item .title-1,
    .shimmer-block .stores-list-block .store-item .title-1 {
        margin-block-start: 0px;
    }

    .shimmer-block .stores-search-block {
        height: auto;
        padding-block-start: 24px;
        padding-block-end: 50px;
    }

        .shimmer-block .stores-search-block .container {
            display: block;
        }

        .shimmer-block .stores-search-block .left-side,
        .shimmer-block .stores-search-block .right-side {
            display: block;
        }

            .shimmer-block .stores-search-block .left-side span {
                display: block;
                margin-block-end: 16px;
            }

            .shimmer-block .stores-search-block .right-side span {
                display: block;
                width: 100%;
            }

    .shimmer-block .store-info-block {
        padding-inline: 24px;
    }
}

@media (max-width: 500px) {
    .shimmer-block .topbar.new .container .left-side {
        display: none;
    }

    .shimmer-block .topbar.new .container .right-side {
        width: 100%;
        gap: 0px;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
}

@media (max-width: 450px) {
    .shimmer-block .goods-listing-block .goods-item .image-block,
    .shimmer-block .stores-list-block .store-item .image-block {
        width: 100px;
    }

    .shimmer-block .goods-listing-block .goods-item .text-side,
    .shimmer-block .stores-list-block .store-item .text-side {
        width: calc(100% - 100px);
    }
}
/* #endregion ================================== /Shimmers ============================================= */
/* #region ------------------- Ad Details ----------------------- */
.responsive-shimmer-block.details-breadcrumbs .content {
    display: flex;
    gap: 15px;
    margin-bottom: 60px;
}

    .responsive-shimmer-block.details-breadcrumbs .content span {
        display: inline-block;
        font-size: 14px;
        width: 90px;
        height: 20px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        align-self: center;
    }

@media (max-width: 991px) {
    .responsive-shimmer-block.details-breadcrumbs .content {
        margin-bottom: 24px;
    }
}

@media (max-width: 575px) {
    .responsive-shimmer-block.details-breadcrumbs {
        display: none;
    }
}

.responsive-shimmer-block.details-published-area .content {
    display: flex;
    gap: 15px;
    margin-bottom: 17px;
}

    .responsive-shimmer-block.details-published-area .content span {
        display: inline-block;
        font-size: 14px;
        height: 20px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        align-self: center;
    }

        .responsive-shimmer-block.details-published-area .content span:first-child {
            width: 80px;
        }

        .responsive-shimmer-block.details-published-area .content span:last-child {
            width: 140px;
        }

@media (max-width: 991px) {
    .responsive-shimmer-block.details-published-area {
        display: none;
    }
}

.responsive-shimmer-block.details-image-gallery .content {
    display: flex;
}

    .responsive-shimmer-block.details-image-gallery .content span {
        display: inline-block;
        font-size: 14px;
        width: 100%;
        height: 420px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        align-self: center;
    }

.responsive-shimmer-block.details-caption .content {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

    .responsive-shimmer-block.details-caption .content span {
        display: inline-block;
        font-size: 14px;
        width: 70%;
        height: 34px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        align-self: center;
    }

@media (max-width: 575px) {
    .responsive-shimmer-block.details-caption .content span {
        height: 29px;
    }
}

.responsive-shimmer-block.details-tags {
    width: 100%;
    padding-block: 20px;
    margin-top: 20px;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}

    .responsive-shimmer-block.details-tags .content {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

        .responsive-shimmer-block.details-tags .content span {
            display: inline-block;
            font-size: 14px;
            height: 40px;
            border-radius: var(--radius-4);
            background-color: #E9E9E9;
            vertical-align: middle;
            align-self: center;
        }

            .responsive-shimmer-block.details-tags .content span:nth-child(2n+1) {
                width: 120px;
            }

            .responsive-shimmer-block.details-tags .content span:nth-child(2n) {
                width: 180px;
            }

.responsive-shimmer-block.details-description {
    border-bottom: 1px solid #DDDDDD;
    width: 100%;
    padding-block: 30px;
}

    .responsive-shimmer-block.details-description .content {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

        .responsive-shimmer-block.details-description .content span {
            display: inline-block;
            font-size: 14px;
            height: 20px;
            border-radius: var(--radius-4);
            background-color: #E9E9E9;
            vertical-align: middle;
            align-self: center;
        }


            .responsive-shimmer-block.details-description .content span:nth-child(1) {
                width: 90%;
            }

            .responsive-shimmer-block.details-description .content span:nth-child(2) {
                width: 80%;
            }

            .responsive-shimmer-block.details-description .content span:nth-child(3) {
                width: 60%;
            }

            .responsive-shimmer-block.details-description .content span:nth-child(4) {
                width: 70%;
            }

            .responsive-shimmer-block.details-description .content span:nth-child(5) {
                width: 40%;
            }

.responsive-shimmer-block.details-mobile-additional-info {
    border-top: 1px solid #DDDDDD;
    padding-top: 20px;
    font-size: 0px;
    margin-top: 20px;
    display: none;
}

    .responsive-shimmer-block.details-mobile-additional-info .content {
        display: block;
    }

        .responsive-shimmer-block.details-mobile-additional-info .content > div {
            display: flex;
            gap: 15px;
            width: 100%;
            padding-block: 8px;
        }

        .responsive-shimmer-block.details-mobile-additional-info .content span {
            display: inline-block;
            font-size: 14px;
            height: 20px;
            border-radius: var(--radius-4);
            background-color: #E9E9E9;
            vertical-align: middle;
            align-self: center;
        }

            .responsive-shimmer-block.details-mobile-additional-info .content span:nth-child(1) {
                width: 20px;
            }

            .responsive-shimmer-block.details-mobile-additional-info .content span:nth-child(2) {
                width: 120px;
            }

@media (max-width: 991px) {
    .responsive-shimmer-block.details-mobile-additional-info {
        display: block;
    }
}

.responsive-shimmer-block.details-report {
    padding-block: 18px;
    border-bottom: 1px solid #DDDDDD;
}

    .responsive-shimmer-block.details-report .content {
        display: flex;
        gap: 15px;
    }

    .responsive-shimmer-block.details-report span {
        display: inline-block;
        font-size: 14px;
        height: 20px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        align-self: center;
    }

        .responsive-shimmer-block.details-report span:nth-child(1) {
            width: 130px;
        }

        .responsive-shimmer-block.details-report span:nth-child(2) {
            width: 200px;
        }

.responsive-shimmer-block.details-mobile-seller-info-title .content {
    display: flex;
    margin-bottom: 20px;
}

.responsive-shimmer-block.details-mobile-seller-info-title span {
    display: inline-block;
    font-size: 14px;
    width: 120px;
    height: 24px;
    border-radius: var(--radius-4);
    background-color: #E9E9E9;
    vertical-align: middle;
    align-self: center;
}

.responsive-shimmer-block.details-mobile-seller-info-regularuser .content {
    display: flex;
    border-radius: var(--radius-4);
    background-color: #E9E9E9;
    padding: 20px 10px 20px 10px;
    gap: 15px;
    width: 100%;
    margin-bottom: 20px;
}

    .responsive-shimmer-block.details-mobile-seller-info-regularuser .content div:first-child {
        display: block;
        width: 66px;
        height: 66px;
        border-radius: 50%;
        background-color: #bbbbbb;
    }

    .responsive-shimmer-block.details-mobile-seller-info-regularuser .content div:last-child {
        width: calc(100% - 75px);
        display: flex;
        gap: 10px;
        flex-direction: column;
    }


        .responsive-shimmer-block.details-mobile-seller-info-regularuser .content div:last-child span {
            display: block;
            font-size: 14px;
            height: 15px;
            border-radius: var(--radius-4);
            background-color: #bbbbbb;
            vertical-align: middle;
            align-self: start;
        }

            .responsive-shimmer-block.details-mobile-seller-info-regularuser .content div:last-child span:nth-child(1) {
                width: 70px;
            }

            .responsive-shimmer-block.details-mobile-seller-info-regularuser .content div:last-child span:nth-child(2) {
                width: 100px;
            }

            .responsive-shimmer-block.details-mobile-seller-info-regularuser .content div:last-child span:nth-child(3) {
                width: 80px;
            }

.responsive-shimmer-block.details-store-info-area .content {
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #E6F4ED;
    margin-top: 20px;
}

.responsive-shimmer-block.details-store-info-area .top-block {
    padding: 20px;
    border-bottom: 1px solid #dddddd;
}

    .responsive-shimmer-block.details-store-info-area .top-block span {
        display: inline-block;
        border-radius: var(--radius-4);
        background-color: #bbbbbb;
        vertical-align: middle;
    }

        .responsive-shimmer-block.details-store-info-area .top-block span:nth-child(1) {
            width: 70%;
            height: 24px;
            margin-top: 8px;
            margin-bottom: 20px;
        }

        .responsive-shimmer-block.details-store-info-area .top-block span:nth-child(2) {
            width: 100%;
            height: 16px;
            margin-bottom: 15px;
        }

        .responsive-shimmer-block.details-store-info-area .top-block span:nth-child(3) {
            width: 80%;
            height: 16px;
            margin-bottom: 15px;
        }

        .responsive-shimmer-block.details-store-info-area .top-block span:nth-child(4) {
            width: 20%;
            height: 16px;
            background-color: var(--color-bg-primary);
        }

.responsive-shimmer-block.details-store-info-area .bottom-block {
    padding: 20px;
}

    .responsive-shimmer-block.details-store-info-area .bottom-block > div {
        display: flex;
        gap: 15px;
        padding-block: 8px;
    }

        .responsive-shimmer-block.details-store-info-area .bottom-block > div > span {
            display: inline-block;
            border-radius: var(--radius-4);
            background-color: #bbbbbb;
            vertical-align: middle;
            align-self: center;
        }

            .responsive-shimmer-block.details-store-info-area .bottom-block > div > span:first-child {
                width: 40px;
                height: 40px;
            }

            .responsive-shimmer-block.details-store-info-area .bottom-block > div > span:last-child {
                width: 80%;
                height: 16px;
            }

@media (max-width: 991px) {
    .responsive-shimmer-block.details-store-info-area {
        display: none;
    }
}

.responsive-shimmer-block.details-mobile-seller-info-store .content {
    width: 100%;
    background-color: #F2F2F2;
    border-radius: var(--radius-4);
    overflow: hidden;
}

.responsive-shimmer-block.details-mobile-seller-info-store .logo-block {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.1);
    padding-block: 10px;
}

    .responsive-shimmer-block.details-mobile-seller-info-store .logo-block span {
        display: inline-block;
        border-radius: var(--radius-4);
        background-color: rgba(0,0,0,0.1);
        vertical-align: middle;
        align-self: center;
        width: 150px;
        height: 90px;
    }

.responsive-shimmer-block.details-mobile-seller-info-store .top-block {
    padding: 20px;
    border-bottom: 1px solid #dddddd;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 15px;
}

    .responsive-shimmer-block.details-mobile-seller-info-store .top-block span {
        display: inline-block;
        border-radius: var(--radius-4);
        background-color: rgba(0,0,0,0.1);
        vertical-align: middle;
    }

        .responsive-shimmer-block.details-mobile-seller-info-store .top-block span:nth-child(1) {
            width: 60%;
            height: 30px;
            margin-top: 8px;
        }

        .responsive-shimmer-block.details-mobile-seller-info-store .top-block span:nth-child(2) {
            width: 20%;
            height: 15px;
        }

        .responsive-shimmer-block.details-mobile-seller-info-store .top-block span:nth-child(3) {
            width: 15%;
            height: 15px;
            margin-bottom: 30px;
        }

        .responsive-shimmer-block.details-mobile-seller-info-store .top-block span:nth-child(4) {
            width: 100%;
            height: 15px;
        }

        .responsive-shimmer-block.details-mobile-seller-info-store .top-block span:nth-child(5) {
            width: 80%;
            height: 15px;
        }

.responsive-shimmer-block.details-mobile-seller-info-store .bottom-block {
    padding: 20px;
    border-bottom: 1px solid #dddddd;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 15px;
}

    .responsive-shimmer-block.details-mobile-seller-info-store .bottom-block span {
        display: inline-block;
        border-radius: var(--radius-4);
        background-color: rgba(0,0,0,0.1);
        vertical-align: middle;
    }

        .responsive-shimmer-block.details-mobile-seller-info-store .bottom-block span:nth-child(1) {
            width: 10%;
            height: 15px;
        }

        .responsive-shimmer-block.details-mobile-seller-info-store .bottom-block span:nth-child(2) {
            width: 70%;
            height: 15px;
            background-color: var(--color-bg-primary);
            margin-bottom: 10px;
        }

        .responsive-shimmer-block.details-mobile-seller-info-store .bottom-block span:nth-child(3) {
            width: 10%;
            height: 15px;
        }

        .responsive-shimmer-block.details-mobile-seller-info-store .bottom-block span:nth-child(4) {
            width: 60%;
            height: 15px;
            background-color: var(--color-bg-primary);
            margin-bottom: 10px;
        }

        .responsive-shimmer-block.details-mobile-seller-info-store .bottom-block span:nth-child(5) {
            width: 10%;
            height: 15px;
        }

        .responsive-shimmer-block.details-mobile-seller-info-store .bottom-block span:nth-child(6) {
            width: 75%;
            height: 15px;
            background-color: var(--color-bg-primary);
        }

.responsive-shimmer-block.details-mobile-seller-info-store .control-block {
    padding: 20px;
    display: flex;
    align-items: start;
    justify-content: center;
}

    .responsive-shimmer-block.details-mobile-seller-info-store .control-block span {
        display: inline-block;
        border-radius: var(--radius-4);
        background-color: var(--color-bg-primary);
        vertical-align: middle;
        width: 40%;
        height: 15px;
    }

.responsive-shimmer-block.details-similar-ads-title {
    width: 180px;
    margin-bottom: 20px;
}

    .responsive-shimmer-block.details-similar-ads-title .content {
        display: flex;
    }

    .responsive-shimmer-block.details-similar-ads-title span {
        display: inline-block;
        font-size: 14px;
        width: 180px;
        height: 24px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        align-self: center;
    }

.responsive-shimmer-block.details-recent-ad-image {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
}

    .responsive-shimmer-block.details-recent-ad-image .content {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .responsive-shimmer-block.details-recent-ad-image span {
        display: block;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        width: 100%;
        height: 100%;
    }

.responsive-shimmer-block.details-recent-ad-title {
    margin-block: 10px;
}

    .responsive-shimmer-block.details-recent-ad-title .content {
        display: flex;
    }

    .responsive-shimmer-block.details-recent-ad-title span {
        display: block;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        width: 100%;
        height: 15px;
    }


.responsive-shimmer-block.details-recent-ad-price .content {
    display: flex;
}

.responsive-shimmer-block.details-recent-ad-price span {
    display: block;
    border-radius: var(--radius-4);
    background-color: #E9E9E9;
    vertical-align: middle;
    width: 60%;
    height: 15px;
}

.responsive-shimmer-block.details-similar-ad-image {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
}

    .responsive-shimmer-block.details-similar-ad-image .content {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .responsive-shimmer-block.details-similar-ad-image span {
        display: block;
        border-radius: var(--radius-4);
        border-bottom-left-radius: 0px;
        background-color: #E9E9E9;
        vertical-align: middle;
        width: 100%;
        height: 100%;
        border-bottom-right-radius: 0px;
    }



.responsive-shimmer-block.details-similar-ad-title {
    margin-bottom: 25px;
    margin-top: 10px;
    padding-inline: 10px;
}

    .responsive-shimmer-block.details-similar-ad-title .content {
        display: flex;
    }

    .responsive-shimmer-block.details-similar-ad-title span {
        display: block;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        width: 100%;
        height: 15px;
    }

.responsive-shimmer-block.details-similar-ad-date {
    margin-block: 5px;
    padding-inline: 10px;
}

    .responsive-shimmer-block.details-similar-ad-date .content {
        display: flex;
    }

    .responsive-shimmer-block.details-similar-ad-date span {
        display: block;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        width: 70%;
        height: 15px;
    }

.responsive-shimmer-block.details-similar-ad-price {
    padding-inline: 10px;
    padding-block: 5px;
}

    .responsive-shimmer-block.details-similar-ad-price .content {
        display: flex;
    }

    .responsive-shimmer-block.details-similar-ad-price span {
        display: block;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        width: 40%;
        height: 15px;
    }


.responsive-shimmer-block.details-similar-ads-loadmore {
    display: inline-block;
    width: 186px;
    height: 52px;
    border-radius: var(--radius-4);
    overflow: hidden;
}

    .responsive-shimmer-block.details-similar-ads-loadmore .content {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .responsive-shimmer-block.details-similar-ads-loadmore span {
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--color-bg-primary);
    }

@media (max-width: 400px) {
    .responsive-shimmer-block.details-similar-ad-image span {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .responsive-shimmer-block.details-similar-ad-title {
        margin-bottom: 12px;
        margin-top: 0px;
        padding-inline: 10px;
    }
}

.responsive-shimmer-block.details-ads-pager .content {
    display: flex;
    gap: 8px;
}

    .responsive-shimmer-block.details-ads-pager .content span {
        display: block;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
        vertical-align: middle;
        width: 60px;
        height: 40px;
    }

        .responsive-shimmer-block.details-ads-pager .content span:nth-child(2) {
            width: 100%;
        }

@media (max-width: 991px) {
    .responsive-shimmer-block.details-ads-pager {
        display: none;
    }
}

.responsive-shimmer-block.details-save-area .content {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.responsive-shimmer-block.details-save-area span {
    display: block;
    border-radius: var(--radius-4);
    background-color: #E9E9E9;
    vertical-align: middle;
    width: 200px;
    height: 32px;
}

    .responsive-shimmer-block.details-save-area span:nth-child(2) {
        width: 100%;
        background-color: transparent;
    }

@media (max-width: 991px) {
    .responsive-shimmer-block.details-save-area {
        display: none;
    }
}

.responsive-shimmer-block.details-seller-info-block {
    border-top: 1px solid #DDDDDD;
    padding-top: 15px;
    padding-bottom: 30px;
}

    .responsive-shimmer-block.details-seller-info-block .content {
        display: flex;
        gap: 15px;
        align-items: center;
    }

        .responsive-shimmer-block.details-seller-info-block .content div:first-child {
            display: block;
            width: 66px;
            height: 66px;
            border-radius: 50%;
            background-color: #E9E9E9;
        }

        .responsive-shimmer-block.details-seller-info-block .content div:last-child {
            display: flex;
            width: calc(100% - 90px);
            gap: 10px;
            flex-direction: column;
        }

        .responsive-shimmer-block.details-seller-info-block .content div span {
            display: block;
            border-radius: var(--radius-4);
            background-color: #E9E9E9;
            vertical-align: middle;
            width: 70%;
            height: 15px;
        }

            .responsive-shimmer-block.details-seller-info-block .content div span:nth-child(1) {
                width: 70%;
            }

            .responsive-shimmer-block.details-seller-info-block .content div span:nth-child(2) {
                width: 20%;
            }

            .responsive-shimmer-block.details-seller-info-block .content div span:nth-child(3) {
                width: 40%;
            }

@media (max-width: 991px) {
    .responsive-shimmer-block.details-seller-info-block {
        display: none;
    }
}

.responsive-shimmer-block.details-delivery-block .content {
    display: flex;
    width: 100%;
    border-radius: var(--radius-4);
    background-color: #F2F2F2;
    padding: 10px;
    margin-bottom: 15px;
    flex-direction: column;
    gap: 15px;
}

    .responsive-shimmer-block.details-delivery-block .content > span:first-child {
        display: block;
        width: 100%;
        height: 52px;
        border-radius: var(--radius-4);
        background-color: var(--color-bg-primary);
    }

    .responsive-shimmer-block.details-delivery-block .content > span:nth-child(2) {
        display: block;
        width: 70%;
        height: 15px;
        border-radius: var(--radius-4);
        background-color: rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        margin-inline: auto;
    }

    .responsive-shimmer-block.details-delivery-block .content > div {
        display: flex;
        gap: 15px;
        align-items: center;
    }

        .responsive-shimmer-block.details-delivery-block .content > div > span:first-child {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: var(--radius-4);
            background-color: var(--color-bg-primary);
        }

        .responsive-shimmer-block.details-delivery-block .content > div > span:last-child {
            display: inline-block;
            width: 70%;
            height: 15px;
            border-radius: var(--radius-4);
            background-color: rgba(0, 0, 0, 0.1);
        }

@media (max-width: 991px) {
    .responsive-shimmer-block.details-delivery-block {
        display: none;
    }
}

.responsive-shimmer-block.details-seller-contacts .content {
    display: flex;
    margin-bottom: 30px;
    gap: 8px;
    flex-direction: column;
}

    .responsive-shimmer-block.details-seller-contacts .content span {
        display: block;
        width: 100%;
        height: 58px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
    }

@media (max-width: 991px) {
    .responsive-shimmer-block.details-seller-contacts .content {
        display: none;
    }
}

.responsive-shimmer-block.details-address-area .content {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-direction: column;
}

    .responsive-shimmer-block.details-address-area .content span:nth-child(1) {
        display: block;
        width: 40%;
        border-radius: var(--radius-4);
        background: #E9E9E9;
        height: 24px;
    }

    .responsive-shimmer-block.details-address-area .content div {
        display: flex;
        gap: 15px;
        align-items: center;
    }

        .responsive-shimmer-block.details-address-area .content div span:first-child {
            display: block;
            width: 40px;
            height: 40px;
            background-color: #E9E9E9;
            border-radius: var(--radius-4);
        }

        .responsive-shimmer-block.details-address-area .content div span:last-child {
            display: block;
            width: calc(100% - 70px);
            height: 15px;
            background-color: #E9E9E9;
            border-radius: var(--radius-4);
        }

    .responsive-shimmer-block.details-address-area .content span:last-child {
        display: block;
        width: 100%;
        height: 200px;
        border-radius: var(--radius-4);
        background-color: #E9E9E9;
    }

@media (max-width: 991px) {
    .responsive-shimmer-block.details-address-area {
        display: none;
    }
}


/* #endregion --------------- /Ad Details ----------------------- */
/* #region ====================================== Clipart ============================================== */

/* #region ------------ Clipart cloud ----------- */
.clipart-cloud {
    width: 512px;
    height: 512px;
}


    .clipart-cloud .cloud-circle-1,
    .clipart-cloud .cloud-circle-2,
    .clipart-cloud .cloud-circle-3,
    .clipart-cloud .cloud-circle-4,
    .clipart-cloud .cloud-circle-5,
    .clipart-cloud .cloud-circle-6,
    .clipart-cloud .cloud-circle-7,
    .clipart-cloud .cloud-circle-8,
    .clipart-cloud .cloud-circle-9,
    .clipart-cloud .cloud-circle-10,
    .clipart-cloud .cloud-circle-11 {
        position: absolute;
        display: block;
        border-radius: 50%;
        background-color: transparent;
        background-color: #f2f2f2;
        z-index: 1;
    }

    .clipart-cloud .cloud-circle-1 {
        width: 26%;
        height: 26%;
        top: 23%;
        left: 11%;
        animation: clipart-cloud-circle-1 1.6s ease-in-out infinite alternate;
    }

    .clipart-cloud .cloud-circle-2 {
        width: 34%;
        height: 34%;
        top: 8%;
        left: 24%;
        animation: clipart-cloud-circle-2 1.5s ease-in-out infinite alternate;
    }

    .clipart-cloud .cloud-circle-3 {
        width: 34%;
        height: 34%;
        top: 17%;
        left: 38%;
        animation: clipart-cloud-circle-3 1.7s ease-in-out infinite alternate;
    }

    .clipart-cloud .cloud-circle-4 {
        width: 39%;
        height: 39%;
        top: 15%;
        left: 54%;
        animation: clipart-cloud-circle-4 1.8s ease-in-out infinite alternate;
    }

    .clipart-cloud .cloud-circle-5 {
        width: 27%;
        height: 27%;
        top: 40%;
        left: 70%;
        animation: clipart-cloud-circle-5 1.6s ease-in-out infinite alternate;
    }

    .clipart-cloud .cloud-circle-6 {
        width: 28%;
        height: 28%;
        top: 54%;
        left: 60%;
        animation: clipart-cloud-circle-6 1.7s ease-in-out infinite alternate;
    }

    .clipart-cloud .cloud-circle-7 {
        width: 45%;
        height: 45%;
        top: 47%;
        left: 28%;
        animation: clipart-cloud-circle-7 1.8s ease-in-out infinite alternate;
    }

    .clipart-cloud .cloud-circle-8 {
        width: 20%;
        height: 20%;
        top: 64%;
        left: 16%;
        animation: clipart-cloud-circle-8 1.6s ease-in-out infinite alternate;
    }

    .clipart-cloud .cloud-circle-9 {
        width: 30%;
        height: 30%;
        top: 43%;
        left: 13%;
        animation: clipart-cloud-circle-9 1.7s ease-in-out infinite alternate;
    }

    .clipart-cloud .cloud-circle-10 {
        width: 22%;
        height: 22%;
        top: 42%;
        left: 3%;
        animation: clipart-cloud-circle-10 1.8s ease-in-out infinite alternate;
    }

    .clipart-cloud .cloud-circle-11 {
        width: 52%;
        height: 52%;
        top: 24%;
        left: 24%;
    }

@keyframes clipart-cloud-circle-1 {
    from {
        transform: translate(-6%, -6%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@keyframes clipart-cloud-circle-2 {
    from {
        transform: translate(2%, 6%);
    }

    to {
        transform: translate(-2%, -6%);
    }
}

@keyframes clipart-cloud-circle-3 {
    from {
        transform: translate(2%, 6%);
    }

    to {
        transform: translate(-2%, -12%);
    }
}

@keyframes clipart-cloud-circle-4 {
    from {
        transform: translate(-7%, 6%);
    }

    to {
        transform: translate(8%, -2%);
    }
}

@keyframes clipart-cloud-circle-5 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

@keyframes clipart-cloud-circle-6 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes clipart-cloud-circle-7 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@keyframes clipart-cloud-circle-8 {
    from {
        transform: translate(-5%, 4%);
    }

    to {
        transform: translate(4%, -6%);
    }
}

@keyframes clipart-cloud-circle-9 {
    from {
        transform: translate(4%, -4%);
    }

    to {
        transform: translate(-4%, 4%);
    }
}

@keyframes clipart-cloud-circle-10 {
    from {
        transform: translate(-6%, 0%);
    }

    to {
        transform: translate(6%, 0%);
    }
}
/* #endregion --------/ Clipart cloud ----------- */
/* #region -------------- Iute Error ------------ */
.clipart-message-success .clipart-iute-pictogram {
    width: 46%;
    height: 46%;
    left: 28%;
    top: 28%;
    z-index: 1;
    position: absolute;
    background: url('../../Content/Images/Iute/pictogram.svg') no-repeat center center transparent;
    background-size: contain;
    filter: grayscale();
    opacity: 0.5;
}

.clipart-message-success .clipart-cross {
    width: 24%;
    height: 24%;
    left: 55%;
    top: 54%;
    z-index: 1;
    position: absolute;
    background: url('../../Content/Images/Iute/cross.svg') no-repeat center center transparent;
    background-size: contain;
    animation: clipart-message-success 1.6s ease-in-out infinite alternate;
}
/* #endregion ----------/ Iute Error ------------ */
/* #region ---------------- Remove -------------- */
.clipart-remove .clipart-trashcan {
    position: absolute;
    display: block;
    z-index: 1;
    background: url('../../Content/Images/clipart-trashcan.svg') no-repeat center center transparent;
    background-size: contain;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 23%;
}
/* #endregion ------------/ Remove -------------- */
/* #region ------------ Remove Success ---------- */
.clipart-remove-success .clipart-trashcan {
    position: absolute;
    display: block;
    z-index: 1;
    background: url('../../Content/Images/clipart-trashcan.svg') no-repeat center center transparent;
    background-size: contain;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 21%;
}

.clipart-remove-success .clipart-check {
    position: absolute;
    display: block;
    z-index: 1;
    background: url('../../Content/Images/clipart-ok.svg') no-repeat center center transparent;
    background-size: contain;
    width: 26%;
    height: 26%;
    top: 47%;
    left: 55%;
    animation: clipart-remove-success 1.6s ease-in-out infinite alternate;
}

@keyframes clipart-remove-success {
    from {
        transform: translateY(-10%);
    }

    to {
        transform: translateY(10%);
    }
}
/* #endregion --------/ Remove Success ---------- */
/* #region ------------- Message Sent ----------- */
.clipart-message-success .clipart-envelope {
    position: absolute;
    display: block;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Message/clipart-envelope.svg') no-repeat center center transparent;
    background-size: contain;
    width: 60%;
    height: 60%;
    top: 22%;
    left: 20%;
    animation: clipart-message-success 1.6s ease-in-out infinite alternate;
}

.clipart-message-success .clipart-check {
    position: absolute;
    display: block;
    z-index: 1;
    background: url('../../Content/Images/clipart-ok.svg') no-repeat center center transparent;
    background-size: contain;
    width: 26%;
    height: 26%;
    top: 47%;
    left: 55%;
    animation: clipart-remove-success 1.6s ease-in-out infinite alternate;
}

@keyframes clipart-message-success {
    from {
        transform: scale(0.9);
    }

    to {
        transform: scale(1.1);
    }
}
/* #endregion ---------/ Message Sent ---------- */
/* #region -------------- Renew Ad -------------- */
.clipart-renew-ad .item-container-1,
.clipart-renew-ad .item-container-2,
.clipart-renew-ad .item-container-3 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 55%;
    height: 55%;
    left: 24%;
}

.clipart-renew-ad .item-container-1 {
    z-index: 1;
    top: 2%;
    animation: clipart-renew-ad-container-1 10s ease infinite;
}

.clipart-renew-ad .item-container-2 {
    z-index: 1;
    top: 22%;
    animation: clipart-renew-ad-container-2 10s ease infinite;
}

.clipart-renew-ad .item-container-3 {
    z-index: 1;
    top: 42%;
    animation: clipart-renew-ad-container-3 10s ease infinite;
}

    .clipart-renew-ad .item-container-1 .item,
    .clipart-renew-ad .item-container-1 .item-selected,
    .clipart-renew-ad .item-container-2 .item,
    .clipart-renew-ad .item-container-2 .item-selected,
    .clipart-renew-ad .item-container-3 .item,
    .clipart-renew-ad .item-container-3 .item-selected {
        display: block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        left: 0%;
        top: 0%;
    }

    .clipart-renew-ad .item-container-1 .item,
    .clipart-renew-ad .item-container-2 .item,
    .clipart-renew-ad .item-container-3 .item {
        background: url('../../Content/Images/Cliparts/RenewAd/clipart-item.svg') no-repeat center center transparent;
        background-size: contain;
    }

    .clipart-renew-ad .item-container-1 .item-selected,
    .clipart-renew-ad .item-container-2 .item-selected,
    .clipart-renew-ad .item-container-3 .item-selected {
        background: url('../../Content/Images/Cliparts/RenewAd/clipart-item-selected.svg') no-repeat center center transparent;
        background-size: contain;
    }

.clipart-renew-ad .item-container-1 .item {
    opacity: 0;
    animation: clipart-renew-ad-c1-i 10s ease infinite;
}

.clipart-renew-ad .item-container-1 .item-selected {
    opacity: 1;
    animation: clipart-renew-ad-c1-is 10s ease infinite;
}

.clipart-renew-ad .item-container-2 .item {
    opacity: 1;
    animation: clipart-renew-ad-c2-i 10s ease infinite;
}

.clipart-renew-ad .item-container-2 .item-selected {
    opacity: 0;
    animation: clipart-renew-ad-c2-is 10s ease infinite;
}

.clipart-renew-ad .item-container-3 .item {
    opacity: 1;
    animation: clipart-renew-ad-c3-i 10s ease infinite;
}

.clipart-renew-ad .item-container-3 .item-selected {
    opacity: 0;
    animation: clipart-renew-ad-c3-is 10s ease infinite;
}

@keyframes clipart-renew-ad-container-1 {
    0%, 12% {
        transform: translateY(0);
        z-index: 1;
    }

    22%, 33% {
        transform: translateY(36.3636%);
        z-index: 1;
    }

    33%, 45% {
        transform: translateY(36.3636%);
        z-index: 1;
    }

    55%, 66% {
        transform: translateY(72.7272%);
        z-index: 1;
    }

    66%, 78% {
        transform: translateY(72.7272%);
        z-index: 1;
    }

    79% {
        z-index: 3;
    }

    89%, 100% {
        transform: translateY(0);
        z-index: 3;
    }
}


@keyframes clipart-renew-ad-container-2 {
    0%, 12% {
        transform: translateY(0);
        z-index: 1;
    }

    22%, 33% {
        transform: translateY(36.3636%);
        z-index: 1;
    }

    33%, 45% {
        transform: translateY(36.3636%);
        z-index: 1;
    }

    46% {
        z-index: 3;
    }

    55%, 66% {
        transform: translateY(-36.3636%);
        z-index: 3;
    }

    66%, 78% {
        transform: translateY(-36.3636%);
        z-index: 1;
    }

    89%, 100% {
        transform: translateY(0);
        z-index: 1;
    }
}

@keyframes clipart-renew-ad-container-3 {
    0%, 12% {
        transform: translateY(0);
        z-index: 3;
    }

    22%, 33% {
        transform: translateY(-72.7272%);
        z-index: 3;
    }

    33%, 45% {
        transform: translateY(-72.7272%);
        z-index: 1;
    }

    55%, 66% {
        transform: translateY(-36.3636%);
        z-index: 1;
    }

    66%, 78% {
        transform: translateY(-36.3636%);
        z-index: 1;
    }

    89%, 100% {
        transform: translateY(0);
        z-index: 1;
    }
}

@keyframes clipart-renew-ad-c1-i {
    0%, 68%, 99%, 100% {
        opacity: 1;
    }

    73%, 94% {
        opacity: 0;
    }
}

@keyframes clipart-renew-ad-c1-is {
    0%, 68%, 99%, 100% {
        opacity: 0;
    }

    73%, 94% {
        opacity: 1;
    }
}

@keyframes clipart-renew-ad-c2-i {
    0%, 35%, 66%, 100% {
        opacity: 1;
    }

    40%, 61% {
        opacity: 0;
    }
}

@keyframes clipart-renew-ad-c2-is {
    0%, 35%, 66%, 100% {
        opacity: 0;
    }

    40%, 61% {
        opacity: 1;
    }
}

@keyframes clipart-renew-ad-c3-i {
    0%, 28%, 100% {
        opacity: 1;
    }

    5%, 23% {
        opacity: 0;
    }
}

@keyframes clipart-renew-ad-c3-is {
    0%, 28%, 100% {
        opacity: 0;
    }

    5%, 23% {
        opacity: 1;
    }
}
/* #endregion ----------/ Renew Ad -------------- */
/* #region ------------ Unpublish Ad ------------ */


.clipart-unpublish-ad .item-container-1,
.clipart-unpublish-ad .item-container-2,
.clipart-unpublish-ad .item-container-3,
.clipart-unpublish-ad .item-container-4 {
    display: block;
    position: absolute;
    z-index: 1;
    width: 55%;
    height: 55%;
    left: 24%;
}

.clipart-unpublish-ad .item-container-1 {
    top: 2%;
}

.clipart-unpublish-ad .item-container-2 {
    top: 22%;
    animation: clipart-unpublish-ad-container-2 7s ease infinite;
}

.clipart-unpublish-ad .item-container-3 {
    top: 42%;
    animation: clipart-unpublish-ad-container-3 7s ease infinite;
}

.clipart-unpublish-ad .item-container-4 {
    top: 62%;
    animation: clipart-unpublish-ad-container-4 7s ease infinite;
}

    .clipart-unpublish-ad .item-container-1 .item, .clipart-unpublish-ad .item-container-1 .item-selected,
    .clipart-unpublish-ad .item-container-2 .item, .clipart-unpublish-ad .item-container-2 .item-selected,
    .clipart-unpublish-ad .item-container-3 .item, .clipart-unpublish-ad .item-container-3 .item-selected,
    .clipart-unpublish-ad .item-container-4 .item, .clipart-unpublish-ad .item-container-4 .item-selected {
        display: block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        left: 0%;
        top: 0%;
    }

    .clipart-unpublish-ad .item-container-1 .item, .clipart-unpublish-ad .item-container-2 .item,
    .clipart-unpublish-ad .item-container-3 .item, .clipart-unpublish-ad .item-container-4 .item {
        background: url('../../Content/Images/Cliparts/RenewAd/clipart-item.svg') no-repeat center center transparent;
        background-size: contain;
    }

    .clipart-unpublish-ad .item-container-1 .item-selected, .clipart-unpublish-ad .item-container-2 .item-selected,
    .clipart-unpublish-ad .item-container-3 .item-selected, .clipart-unpublish-ad .item-container-4 .item-selected {
        background: url('../../Content/Images/Cliparts/RenewAd/clipart-item-selected.svg') no-repeat center center transparent;
        background-size: contain;
    }

.clipart-unpublish-ad .item-container-1 .item {
    opacity: 1;
}

.clipart-unpublish-ad .item-container-1 .item-selected {
    opacity: 0;
}

.clipart-unpublish-ad .item-container-2 .item {
    opacity: 1;
    animation: clipart-unpublish-ad-c2-i 7s ease infinite;
}

.clipart-unpublish-ad .item-container-2 .item-selected {
    opacity: 0;
    animation: clipart-unpublish-ad-c2-is 7s ease infinite;
}

.clipart-unpublish-ad .item-container-3 .item {
    opacity: 1;
    animation: clipart-unpublish-ad-c3-i 7s ease infinite;
}

.clipart-unpublish-ad .item-container-3 .item-selected {
    opacity: 0;
    animation: clipart-unpublish-ad-c3-is 7s ease infinite;
}

.clipart-unpublish-ad .item-container-4 .item {
    opacity: 1;
    animation: clipart-unpublish-ad-c4-i 7s ease infinite;
}

.clipart-unpublish-ad .item-container-4 .item-selected {
    opacity: 0;
    animation: clipart-unpublish-ad-c4-is 7s ease infinite;
}


@keyframes clipart-unpublish-ad-container-2 {

    0%, 10% {
        transform: translate(0, 0);
        opacity: 1;
        z-index: 3;
    }

    20% {
        transform: translate(60%, 0);
        opacity: 0;
        z-index: 3;
    }

    21%, 33.33% {
        transform: translate(0, 72.7272%);
        opacity: 0;
        z-index: 1;
    }

    43.33%, 53.33% {
        transform: translate(0, 72.7272%);
        opacity: 0;
        z-index: 1;
    }

    63.33%, 66.66% {
        transform: translate(0, 36.3636%);
        opacity: 1;
        z-index: 1;
    }

    76.66%, 86.66% {
        transform: translate(0, 36.3636%);
        opacity: 1;
        z-index: 1;
    }

    96.66%, 100% {
        transform: translate(0, 0);
        opacity: 1;
        z-index: 1;
    }
}

@keyframes clipart-unpublish-ad-container-3 {

    0%, 20% {
        transform: translate(0, 0);
        opacity: 1;
        z-index: 1;
    }

    30%, 33.33% {
        transform: translate(0, -36.3636%);
        opacity: 1;
        z-index: 1;
    }

    33.33%, 43.33% {
        transform: translate(0, -36.3636%);
        opacity: 1;
        z-index: 3;
    }

    53.33% {
        transform: translate(60%, -36.3636%);
        opacity: 0;
        z-index: 3;
    }

    54.33%, 66.66% {
        transform: translate(0, 36.3636%);
        opacity: 0;
        z-index: 1;
    }

    76.66%, 86.66% {
        transform: translate(0, 36.3636%);
        opacity: 0;
        z-index: 1;
    }

    96.66%, 100% {
        transform: translate(0, 0);
        opacity: 1;
        z-index: 1;
    }
}

@keyframes clipart-unpublish-ad-container-4 {

    0%, 20% {
        transform: translate(0, 0);
        opacity: 0;
        z-index: 1;
    }

    30%, 33.33% {
        transform: translate(0, -36.3636%);
        opacity: 1;
        z-index: 1;
    }

    33.33%, 53.33% {
        transform: translate(0, -36.3636%);
        opacity: 1;
        z-index: 1;
    }

    63.33%, 66.66% {
        transform: translate(0, -72.7272%);
        opacity: 1;
        z-index: 1;
    }

    66.66%, 76.66% {
        transform: translate(0, -72.7272%);
        opacity: 1;
        z-index: 3;
    }

    86.66% {
        transform: translate(60%, -72.7272%);
        opacity: 0;
        z-index: 3;
    }

    87.66%, 100% {
        transform: translate(0, 0);
        opacity: 0;
        z-index: 1;
    }
}

@keyframes clipart-unpublish-ad-c2-i {
    0%, 5% {
        opacity: 1;
    }

    10%, 20% {
        opacity: 0;
    }

    21%, 100% {
        opacity: 1;
    }
}

@keyframes clipart-unpublish-ad-c2-is {
    0%, 5% {
        opacity: 0;
    }

    10%, 20% {
        opacity: 1;
    }

    21%, 100% {
        opacity: 0;
    }
}

@keyframes clipart-unpublish-ad-c3-i {
    0%, 33.33% {
        opacity: 1;
    }

    38.33%, 53.33% {
        opacity: 0;
    }

    54.33%, 100% {
        opacity: 1;
    }
}

@keyframes clipart-unpublish-ad-c3-is {
    0%, 33.33% {
        opacity: 0;
    }

    38.33%, 53.33% {
        opacity: 1;
    }

    54.33%, 100% {
        opacity: 0;
    }
}

@keyframes clipart-unpublish-ad-c4-i {
    0%, 66.66% {
        opacity: 1;
    }

    71.66%, 86.66% {
        opacity: 0;
    }

    87.66%, 100% {
        opacity: 1;
    }
}

@keyframes clipart-unpublish-ad-c4-is {
    0%, 66.66% {
        opacity: 0;
    }

    71.66%, 86.66% {
        opacity: 1;
    }

    87.66%, 100% {
        opacity: 0;
    }
}
/* #endregion -----------/ Unpublish Ad ------------ */
/* #region ----------------- Tags --------------- */
.clipart-tags .clipart-tag-1 {
    position: absolute;
    display: block;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Tags/tag-1.svg') no-repeat center center transparent;
    background-size: contain;
    width: 42%;
    height: 42%;
    top: 28%;
    left: 23%;
    transform-origin: 0% 50%;
    transform: rotate(-14deg);
    animation: clipart-tag-1 1.7s ease-in-out infinite alternate;
}

.clipart-tags .clipart-tag-2 {
    position: absolute;
    display: block;
    background-color: transparent;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Tags/tag-2.svg') no-repeat center center transparent;
    background-size: contain;
    width: 42%;
    height: 42%;
    top: 29%;
    left: 36%;
    animation: clipart-tag-2 1.7s ease-in-out infinite alternate;
}

.clipart-tags .clipart-tag-3 {
    position: absolute;
    display: block;
    background-color: transparent;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Tags/tag-3.svg') no-repeat center center transparent;
    background-size: contain;
    width: 42%;
    height: 42%;
    top: 32%;
    left: 25%;
    transform-origin: 0% 50%;
    transform: rotate(20deg);
    animation: clipart-tag-3 1.7s ease-in-out infinite alternate;
}

@keyframes clipart-tag-1 {
    from {
        transform: translateY(0%) rotate(-14deg) scale(1);
    }

    to {
        transform: translateY(-5%) rotate(-20deg) scale(1.1);
    }
}

@keyframes clipart-tag-2 {
    from {
        transform: translateX(0%) scale(1);
    }

    to {
        transform: translateX(5%) scale(1.2);
    }
}

@keyframes clipart-tag-3 {
    from {
        transform: translateY(0%) rotate(20deg) scale(1);
    }

    to {
        transform: translateY(5%) rotate(26deg) scale(1.1);
    }
}

/* #endregion -------------/ Tags --------------- */
/* #region -------------- No Ads ---------------- */
.clipart-noads .clipart-ad-1 {
    position: absolute;
    display: block;
    background-color: transparent;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Ads/ad-1.svg') no-repeat center center transparent;
    background-size: contain;
    width: 37%;
    height: 37%;
    top: 35%;
    left: 16%;
    transform-origin: 50% 50%;
    transform: rotate(-61deg);
    animation: clipart-ad-1 1.7s ease-in-out infinite alternate;
}

.clipart-noads .clipart-ad-2 {
    position: absolute;
    display: block;
    background-color: transparent;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Ads/ad-2.svg') no-repeat center center transparent;
    background-size: contain;
    width: 39%;
    height: 39%;
    top: 44%;
    left: 40%;
    transform-origin: 50% 50%;
    transform: rotate(-21deg);
    animation: clipart-ad-2 1.7s ease-in-out infinite alternate;
}

.clipart-noads .clipart-ad-3 {
    position: absolute;
    display: block;
    background-color: transparent;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Ads/ad-3.svg') no-repeat center center transparent;
    background-size: contain;
    width: 46%;
    height: 46%;
    top: 14%;
    left: 34%;
    transform-origin: 50% 50%;
    transform: rotate(0deg);
    animation: clipart-ad-3 1.7s ease-in-out infinite alternate;
}

@keyframes clipart-ad-1 {
    from {
        transform: rotate(-60deg) scale(1);
    }

    to {
        transform: rotate(-68deg) scale(1.1);
    }
}

@keyframes clipart-ad-2 {
    from {
        transform: rotate(-26deg) scale(1);
    }

    to {
        transform: rotate(-21deg) scale(1.2);
    }
}

@keyframes clipart-ad-3 {
    from {
        transform: rotate(0deg) scale(1);
    }

    to {
        transform: rotate(8deg) scale(1.2);
    }
}
/* #endregion ----------/ No Ads ---------------- */
/* #region --------------- Store --------------- */
.clipart-stores .store {
    position: absolute;
    display: block;
    background-color: transparent;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Store/store.svg') no-repeat center center transparent;
    background-size: contain;
    width: 46%;
    height: 46%;
    top: 28%;
    left: 28%;
    animation: stores 1.7s ease-in-out infinite alternate;
}

@keyframes stores {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.2);
    }
}
/* #endregion -----------/ Store --------------- */
/* #region --------------- Blog ---------------- */
.clipart-blog-1 {
    position: absolute;
    display: block;
    background-color: transparent;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Blog/blog-1.svg') no-repeat center center transparent;
    background-size: contain;
    width: 36%;
    height: 36%;
    top: 32%;
    left: 20%;
    transform: rotate(-31deg);
    animation: clipart-blog-1 1.7s ease-in-out infinite alternate;
}

.clipart-blog-2 {
    position: absolute;
    display: block;
    background-color: transparent;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Blog/blog-1.svg') no-repeat center center transparent;
    background-size: contain;
    width: 36%;
    height: 36%;
    top: 32%;
    left: 47%;
    transform: rotate(31deg);
    animation: clipart-blog-2 1.7s ease-in-out infinite alternate;
}

.clipart-blog-3 {
    position: absolute;
    display: block;
    background-color: transparent;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Blog/blog-2.svg') no-repeat center center transparent;
    background-size: contain;
    width: 44%;
    height: 44%;
    top: 24%;
    left: 30%;
    animation: clipart-blog-3 1.7s ease-in-out infinite alternate;
}

.clipart-blog .clipart-shadow {
    position: absolute;
    display: block;
    background-color: transparent;
    z-index: 1;
    background: rgba(0,0,0, 0.3);
    border-radius: 50%;
    width: 45%;
    height: 3%;
    top: 77%;
    left: 29%;
    animation: clipart-blog-shadow 1.7s ease-in-out infinite alternate;
}

@keyframes clipart-blog-1 {
    from {
        transform: translateX(0%) translateY(0%) rotate(-31deg);
    }

    to {
        transform: translateX(-8%) translateY(-8%) rotate(-31deg);
    }
}

@keyframes clipart-blog-2 {
    from {
        transform: translateX(0%) translateY(0%) rotate(31deg);
    }

    to {
        transform: translateX(8%) translateY(-8%) rotate(31deg);
    }
}

@keyframes clipart-blog-3 {
    from {
        transform: scale(1) translateY(0%);
    }

    to {
        transform: scale(1.2) translateY(-8%);
    }
}

@keyframes clipart-blog-shadow {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.9);
        opacity: 0.4;
    }
}
/* #endregion -----------/ Blog ---------------- */
/* #region ------------- Filters --------------- */
.clipart-filters .clipart-filter-block {
    display: block;
    position: absolute;
    width: 50%;
    height: 50%;
    top: 22%;
    left: 26%;
    z-index: 1;
}

.clipart-filters .track-1,
.clipart-filters .track-2,
.clipart-filters .track-3 {
    display: block;
    position: absolute;
    z-index: 1;
    background: url('../../Content/Images/Cliparts/Filters/track.svg') no-repeat center center transparent;
    background-size: contain;
}

.clipart-filters .track-1 {
    width: 96%;
    height: 96%;
    top: -25%;
    left: 3%;
}

.clipart-filters .track-2 {
    width: 96%;
    height: 96%;
    top: 3%;
    left: 3%;
}

.clipart-filters .track-3 {
    width: 96%;
    height: 96%;
    top: 31%;
    left: 3%;
}

.clipart-filters .dot-1,
.clipart-filters .dot-2,
.clipart-filters .dot-3 {
    display: block;
    position: absolute;
    z-index: 2;
    background: url('../../Content/Images/Cliparts/Filters/dot.svg') no-repeat center center transparent;
    background-size: contain;
}

.clipart-filters .dot-1 {
    width: 23%;
    height: 23%;
    top: 11%;
    left: 10%;
    animation: clipart-filters-dot-1 2s ease-in-out infinite;
}

.clipart-filters .dot-2 {
    width: 23%;
    height: 23%;
    top: 40%;
    left: 69%;
    animation: clipart-filters-dot-2 2s ease-in-out infinite;
}

.clipart-filters .dot-3 {
    width: 23%;
    height: 23%;
    top: 68%;
    left: 10%;
    animation: clipart-filters-dot-1 2s ease-in-out infinite;
}

.clipart-filters .clipart-shadow {
    position: absolute;
    display: block;
    background-color: transparent;
    z-index: 1;
    background: rgba(0,0,0, 0.3);
    border-radius: 50%;
    width: 56%;
    height: 3%;
    top: 74%;
    left: 24%;
}

@keyframes clipart-filters-dot-1 {
    0% {
        transform: translateX(0%);
    }

    30% {
        transform: translateX(250%);
    }

    60% {
        transform: translateX(250%);
    }

    90% {
        transform: translateX(0%);
    }
}

@keyframes clipart-filters-dot-2 {
    0% {
        transform: translateX(0%);
    }

    30% {
        transform: translateX(-250%);
    }

    60% {
        transform: translateX(-250%);
    }

    90% {
        transform: translateX(0%);
    }
}

/* #endregion ---------/ Filters --------------- */
/* #region ------------- App New Ad ------------ */
.clipart-app-newad {
    display: block;
    width: 350px;
    height: 350px;
}

    .clipart-app-newad .clipart-cloud-1,
    .clipart-app-newad .clipart-cloud-2,
    .clipart-app-newad .clipart-cloud-3,
    .clipart-app-newad .clipart-cloud-4,
    .clipart-app-newad .clipart-cloud-5,
    .clipart-app-newad .clipart-cloud-6,
    .clipart-app-newad .clipart-cloud-7,
    .clipart-app-newad .clipart-cloud-8,
    .clipart-app-newad .clipart-cloud-9 {
        position: absolute;
        display: block;
        border-radius: 50%;
        background-color: #EBEBEB;
        z-index: 1;
    }

    .clipart-app-newad .clipart-cloud-1 {
        width: 28%;
        height: 28%;
        top: 27%;
        left: 10%;
        animation: clipart-app-newad-cloud-1 1.2s ease-in-out infinite alternate;
    }

    .clipart-app-newad .clipart-cloud-2 {
        width: 38%;
        height: 38%;
        top: 6%;
        left: 24%;
        animation: clipart-app-newad-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .clipart-app-newad .clipart-cloud-3 {
        width: 22%;
        height: 22%;
        top: 8%;
        left: 54%;
        animation: clipart-app-newad-cloud-3 1.4s ease-in-out infinite alternate;
    }

    .clipart-app-newad .clipart-cloud-4 {
        width: 37%;
        height: 37%;
        top: 20%;
        left: 55%;
        animation: clipart-app-newad-cloud-4 1.8s ease-in-out infinite alternate;
    }

    .clipart-app-newad .clipart-cloud-5 {
        width: 24%;
        height: 24%;
        top: 44%;
        left: 74%;
        animation: clipart-app-newad-cloud-5 1.3s ease-in-out infinite alternate;
    }

    .clipart-app-newad .clipart-cloud-6 {
        width: 45%;
        height: 45%;
        top: 49%;
        left: 43%;
        animation: clipart-app-newad-cloud-6 1.2s ease-in-out infinite alternate;
    }

    .clipart-app-newad .clipart-cloud-7 {
        width: 52%;
        height: 52%;
        top: 41%;
        left: 9%;
        animation: clipart-app-newad-cloud-7 1.7s ease-in-out infinite alternate;
    }

    .clipart-app-newad .clipart-cloud-8 {
        width: 20%;
        height: 20%;
        top: 44%;
        left: 1%;
        animation: clipart-app-newad-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .clipart-app-newad .clipart-cloud-9 {
        width: 50%;
        height: 50%;
        top: 27%;
        left: 28%;
    }

@keyframes clipart-app-newad-cloud-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(8%, 8%);
    }
}

@keyframes clipart-app-newad-cloud-2 {
    from {
        transform: translate(2%, 8%);
    }

    to {
        transform: translate(-2%, -8%);
    }
}

@keyframes clipart-app-newad-cloud-3 {
    from {
        transform: translate(2%, -7%);
    }

    to {
        transform: translate(-2%, 15%);
    }
}

@keyframes clipart-app-newad-cloud-4 {
    from {
        transform: translate(-7%, 6%);
    }

    to {
        transform: translate(15%, -15%);
    }
}

@keyframes clipart-app-newad-cloud-5 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

@keyframes clipart-app-newad-cloud-6 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes clipart-app-newad-cloud-7 {
    from {
        transform: translate(6%, -6%);
    }

    to {
        transform: translate(-6%, 6%);
    }
}

@keyframes clipart-app-newad-cloud-8 {
    from {
        transform: translate(19%, 0%);
    }

    to {
        transform: translate(-8%, 0%);
    }
}

.clipart-app-newad .clipart-content {
    display: block;
    position: absolute;
    top: 27%;
    left: 25%;
    width: 55%;
    height: 55%;
    background: url("../../Content/Images/Cliparts/AppNewAd/clipart-appnewad.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

/* #endregion ---------- App New Ad ------------ */
/* #region ----------- Remove PayPal ----------- */
.clipart-remove-paypal {
    display: block;
    width: 350px;
    height: 350px;
}

    .clipart-remove-paypal .clipart-cloud-1,
    .clipart-remove-paypal .clipart-cloud-2,
    .clipart-remove-paypal .clipart-cloud-3,
    .clipart-remove-paypal .clipart-cloud-4,
    .clipart-remove-paypal .clipart-cloud-5,
    .clipart-remove-paypal .clipart-cloud-6,
    .clipart-remove-paypal .clipart-cloud-7,
    .clipart-remove-paypal .clipart-cloud-8,
    .clipart-remove-paypal .clipart-cloud-9 {
        position: absolute;
        display: block;
        border-radius: 50%;
        background-color: #EBEBEB;
        z-index: 1;
    }

    .clipart-remove-paypal .clipart-cloud-1 {
        width: 28%;
        height: 28%;
        top: 27%;
        left: 10%;
        animation: clipart-remove-paypal-cloud-1 1.2s ease-in-out infinite alternate;
    }

    .clipart-remove-paypal .clipart-cloud-2 {
        width: 38%;
        height: 38%;
        top: 6%;
        left: 24%;
        animation: clipart-remove-paypal-cloud-2 1.6s ease-in-out infinite alternate;
    }

    .clipart-remove-paypal .clipart-cloud-3 {
        width: 22%;
        height: 22%;
        top: 8%;
        left: 54%;
        animation: clipart-remove-paypal-cloud-3 1.4s ease-in-out infinite alternate;
    }

    .clipart-remove-paypal .clipart-cloud-4 {
        width: 37%;
        height: 37%;
        top: 20%;
        left: 55%;
        animation: clipart-remove-paypal-cloud-4 1.8s ease-in-out infinite alternate;
    }

    .clipart-remove-paypal .clipart-cloud-5 {
        width: 24%;
        height: 24%;
        top: 44%;
        left: 74%;
        animation: clipart-remove-paypal-cloud-5 1.3s ease-in-out infinite alternate;
    }

    .clipart-remove-paypal .clipart-cloud-6 {
        width: 45%;
        height: 45%;
        top: 49%;
        left: 43%;
        animation: clipart-remove-paypal-cloud-6 1.2s ease-in-out infinite alternate;
    }

    .clipart-remove-paypal .clipart-cloud-7 {
        width: 52%;
        height: 52%;
        top: 41%;
        left: 9%;
        animation: clipart-remove-paypal-cloud-7 1.7s ease-in-out infinite alternate;
    }

    .clipart-remove-paypal .clipart-cloud-8 {
        width: 20%;
        height: 20%;
        top: 44%;
        left: 1%;
        animation: clipart-remove-paypal-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .clipart-remove-paypal .clipart-cloud-9 {
        width: 50%;
        height: 50%;
        top: 27%;
        left: 28%;
    }

@keyframes clipart-remove-paypal-cloud-1 {
    from {
        transform: translate(-8%, -8%);
    }

    to {
        transform: translate(8%, 8%);
    }
}

@keyframes clipart-remove-paypal-cloud-2 {
    from {
        transform: translate(2%, 8%);
    }

    to {
        transform: translate(-2%, -8%);
    }
}

@keyframes clipart-remove-paypal-cloud-3 {
    from {
        transform: translate(2%, -7%);
    }

    to {
        transform: translate(-2%, 15%);
    }
}

@keyframes clipart-remove-paypal-cloud-4 {
    from {
        transform: translate(-7%, 6%);
    }

    to {
        transform: translate(15%, -15%);
    }
}

@keyframes clipart-remove-paypal-cloud-5 {
    from {
        transform: translate(6%, 0%);
    }

    to {
        transform: translate(-6%, 0%);
    }
}

@keyframes clipart-remove-paypal-cloud-6 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes clipart-remove-paypal-cloud-7 {
    from {
        transform: translate(6%, -6%);
    }

    to {
        transform: translate(-6%, 6%);
    }
}

@keyframes clipart-remove-paypal-cloud-8 {
    from {
        transform: translate(19%, 0%);
    }

    to {
        transform: translate(-8%, 0%);
    }
}

.clipart-remove-paypal .clipart-content {
    display: block;
    position: absolute;
    top: 8%;
    left: 11%;
    width: 75%;
    height: 75%;
    background: url("../../Content/Images/logo-paypal.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

.clipart-remove-paypal .clipart-mail {
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 100%;
    position: absolute;
    z-index: 1;
    top: 65%;
    left: 0%;
}
/* #endregion -------- Remove PayPal ----------- */
/* #region ----------- App Take photos --------- */
.clipart-app-camera {
    display: block;
    width: 350px;
    height: 350px;
}

    .clipart-app-camera .clipart-cloud-1,
    .clipart-app-camera .clipart-cloud-2,
    .clipart-app-camera .clipart-cloud-3,
    .clipart-app-camera .clipart-cloud-4,
    .clipart-app-camera .clipart-cloud-5,
    .clipart-app-camera .clipart-cloud-6,
    .clipart-app-camera .clipart-cloud-7,
    .clipart-app-camera .clipart-cloud-8,
    .clipart-app-camera .clipart-cloud-9 {
        position: absolute;
        display: block;
        border-radius: 50%;
        background-color: #EBEBEB;
        z-index: 1;
    }

    .clipart-app-camera .clipart-cloud-1 {
        width: 35%;
        height: 35%;
        top: 16%;
        left: 10%;
        animation: clipart-app-camera-cloud-1 1.2s ease-in-out infinite alternate;
    }

    .clipart-app-camera .clipart-cloud-2 {
        width: 48%;
        height: 48%;
        top: 4%;
        left: 17%;
        animation: clipart-app-camera-cloud-2 1.4s ease-in-out infinite alternate;
    }

    .clipart-app-camera .clipart-cloud-3 {
        width: 31%;
        height: 31%;
        top: 10%;
        left: 51%;
        animation: clipart-app-camera-cloud-3 1.3s ease-in-out infinite alternate;
    }

    .clipart-app-camera .clipart-cloud-4 {
        width: 40%;
        height: 40%;
        top: 23%;
        left: 57%;
        animation: clipart-app-camera-cloud-4 1.6s ease-in-out infinite alternate;
    }

    .clipart-app-camera .clipart-cloud-5 {
        width: 33%;
        height: 33%;
        top: 51%;
        left: 63%;
        animation: clipart-app-camera-cloud-5 1.5s ease-in-out infinite alternate;
    }

    .clipart-app-camera .clipart-cloud-6 {
        width: 46%;
        height: 46%;
        top: 49%;
        left: 32%;
        animation: clipart-app-camera-cloud-6 1.7s ease-in-out infinite alternate;
    }

    .clipart-app-camera .clipart-cloud-7 {
        width: 25%;
        height: 25%;
        top: 67%;
        left: 19%;
        animation: clipart-app-camera-cloud-7 1.2s ease-in-out infinite alternate;
    }

    .clipart-app-camera .clipart-cloud-8 {
        width: 45%;
        height: 45%;
        top: 33%;
        left: 3%;
        animation: clipart-app-camera-cloud-8 1.3s ease-in-out infinite alternate;
    }

    .clipart-app-camera .clipart-cloud-9 {
        width: 60%;
        height: 60%;
        top: 22%;
        left: 19%;
    }

@keyframes clipart-app-camera-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(6%, 6%);
    }
}

@keyframes clipart-app-camera-cloud-2 {
    from {
        transform: translate(6%, 6%);
    }

    to {
        transform: translate(0%, 0%);
    }
}

@keyframes clipart-app-camera-cloud-3 {
    from {
        transform: translate(6%, -5%);
    }

    to {
        transform: translate(-6%, 5%);
    }
}

@keyframes clipart-app-camera-cloud-4 {
    from {
        transform: translate(-5%, 0%);
    }

    to {
        transform: translate(5%, 0%);
    }
}

@keyframes clipart-app-camera-cloud-5 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(-4%, -4%);
    }
}

@keyframes clipart-app-camera-cloud-6 {
    from {
        transform: translate(0%, -6%);
    }

    to {
        transform: translate(0%, 6%);
    }
}

@keyframes clipart-app-camera-cloud-7 {
    from {
        transform: translate(-4%, 4%);
    }

    to {
        transform: translate(4%, -4%);
    }
}

@keyframes clipart-app-camera-cloud-8 {
    from {
        transform: translate(5%, 0%);
    }

    to {
        transform: translate(-5%, 0%);
    }
}

.clipart-app-camera .clipart-content {
    display: block;
    position: absolute;
    top: 6%;
    left: 3%;
    width: 97%;
    height: 97%;
    background: url("../../Content/Images/Cliparts/AppTakePhoto/clipart-camera.svg") no-repeat center center transparent;
    background-size: contain;
    z-index: 1;
}

/* #endregion ------- /App Take photos --------- */
/* #region --------- App Notifications --------- */
.clipart-app-notifications {
    display: block;
    width: 350px;
    height: 350px;
}

    .clipart-app-notifications .clipart-cloud-1,
    .clipart-app-notifications .clipart-cloud-2,
    .clipart-app-notifications .clipart-cloud-3,
    .clipart-app-notifications .clipart-cloud-4,
    .clipart-app-notifications .clipart-cloud-5,
    .clipart-app-notifications .clipart-cloud-6,
    .clipart-app-notifications .clipart-cloud-7,
    .clipart-app-notifications .clipart-cloud-8,
    .clipart-app-notifications .clipart-cloud-9,
    .clipart-app-notifications .clipart-cloud-10 {
        position: absolute;
        display: block;
        border-radius: 50%;
        background-color: #EBEBEB;
        z-index: 1;
    }

    .clipart-app-notifications .clipart-cloud-1 {
        width: 40%;
        height: 40%;
        top: 7%;
        left: 14%;
        animation: clipart-app-notifications-cloud-1 1.5s ease-in-out infinite alternate;
    }

    .clipart-app-notifications .clipart-cloud-2 {
        width: 18%;
        height: 18%;
        top: 4%;
        left: 38%;
        animation: clipart-app-notifications-cloud-2 1.3s ease-in-out infinite alternate;
    }

    .clipart-app-notifications .clipart-cloud-3 {
        width: 30%;
        height: 30%;
        top: 4%;
        left: 46%;
        animation: clipart-app-notifications-cloud-3 1.6s ease-in-out infinite alternate;
    }

    .clipart-app-notifications .clipart-cloud-4 {
        width: 16%;
        height: 16%;
        top: 19%;
        left: 68%;
        animation: clipart-app-notifications-cloud-4 1.4s ease-in-out infinite alternate;
    }

    .clipart-app-notifications .clipart-cloud-5 {
        width: 38%;
        height: 38%;
        top: 28%;
        left: 60%;
        animation: clipart-app-notifications-cloud-5 1.5s ease-in-out infinite alternate;
    }

    .clipart-app-notifications .clipart-cloud-6 {
        width: 31%;
        height: 31%;
        top: 54%;
        left: 56%;
        animation: clipart-app-notifications-cloud-6 1.3s ease-in-out infinite alternate;
    }

    .clipart-app-notifications .clipart-cloud-7 {
        width: 43%;
        height: 43%;
        top: 52%;
        left: 30%;
        animation: clipart-app-notifications-cloud-7 1.6s ease-in-out infinite alternate;
    }

    .clipart-app-notifications .clipart-cloud-8 {
        width: 30%;
        height: 30%;
        top: 53%;
        left: 13%;
        animation: clipart-app-notifications-cloud-8 1.4s ease-in-out infinite alternate;
    }

    .clipart-app-notifications .clipart-cloud-9 {
        width: 34%;
        height: 34%;
        top: 34%;
        left: 2%;
        animation: clipart-app-notifications-cloud-9 1.7s ease-in-out infinite alternate;
    }

    .clipart-app-notifications .clipart-cloud-10 {
        width: 60%;
        height: 60%;
        top: 19%;
        left: 20%;
    }

@keyframes clipart-app-notifications-cloud-1 {
    from {
        transform: translate(-4%, -4%);
    }

    to {
        transform: translate(4%, 4%);
    }
}

@keyframes clipart-app-notifications-cloud-2 {
    from {
        transform: translate(0%, 8%);
    }

    to {
        transform: translate(0%, -8%);
    }
}

@keyframes clipart-app-notifications-cloud-3 {
    from {
        transform: translate(5%, -5%);
    }

    to {
        transform: translate(-5%, 5%);
    }
}

@keyframes clipart-app-notifications-cloud-4 {
    from {
        transform: translate(-5%, 5%);
    }

    to {
        transform: translate(5%, -5%);
    }
}

@keyframes clipart-app-notifications-cloud-5 {
    from {
        transform: translate(7%, 0%);
    }

    to {
        transform: translate(-7%, 0%);
    }
}

@keyframes clipart-app-notifications-cloud-6 {
    from {
        transform: translate(-5%, -5%);
    }

    to {
        transform: translate(5%, 5%);
    }
}

@keyframes clipart-app-notifications-cloud-7 {
    from {
        transform: translate(0%, 7%);
    }

    to {
        transform: translate(0%, -7%);
    }
}

@keyframes clipart-app-notifications-cloud-8 {
    from {
        transform: translate(6%, -6%);
    }

    to {
        transform: translate(-6%, 6%);
    }
}

@keyframes clipart-app-notifications-cloud-9 {
    from {
        transform: translate(-6%, 0%);
    }

    to {
        transform: translate(6%, 0%);
    }
}

.clipart-app-notifications .clipart-content {
    width: 70%;
    height: 70%;
    top: 14%;
    left: 21%;
    position: absolute;
    z-index: 1;
    display: block;
    background: url("../../Content/Images/Cliparts/AppNotifications/clipart-app-notifications.svg") no-repeat center center transparent;
    background-size: contain;
}

/* #endregion ----- /App Notifications --------- */
/* #region --------- Default Success ----------- */

.clipart-default-success {
    display: block;
    width: 250px;
    height: 250px;
    position: relative;
}



    .clipart-default-success .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .clipart-default-success .clipart-cloud-1,
    .clipart-default-success .clipart-cloud-2,
    .clipart-default-success .clipart-cloud-3,
    .clipart-default-success .clipart-cloud-4,
    .clipart-default-success .clipart-cloud-5,
    .clipart-default-success .clipart-cloud-6,
    .clipart-default-success .clipart-cloud-7,
    .clipart-default-success .clipart-cloud-8 {
        display: block;
        position: absolute;
        z-index: 1;
        background-color: #F1F1F1;
        border-radius: 50%;
    }

    .clipart-default-success .clipart-cloud-1 {
        top: 8%;
        left: 17%;
        width: 34%;
        height: 34%;
        -webkit-animation: modal-card-error-cloud-1 1.2s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-1 1.2s ease-in-out infinite alternate;
    }

    .clipart-default-success .clipart-cloud-2 {
        top: 8%;
        left: 39%;
        width: 44%;
        height: 44%;
        -webkit-animation: modal-card-error-cloud-2 1.5s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-2 1.5s ease-in-out infinite alternate;
    }

    .clipart-default-success .clipart-cloud-3 {
        top: 19%;
        left: 73%;
        width: 24%;
        height: 24%;
        -webkit-animation: modal-card-error-cloud-3 2s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-3 2s ease-in-out infinite alternate;
    }

    .clipart-default-success .clipart-cloud-4 {
        top: 30%;
        left: 50%;
        width: 50%;
        height: 50%;
        -webkit-animation: modal-card-error-cloud-4 1.4s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-4 1.4s ease-in-out infinite alternate;
    }

    .clipart-default-success .clipart-cloud-5 {
        top: 59%;
        left: 44%;
        width: 27%;
        height: 27%;
        -webkit-animation: modal-card-error-cloud-5 1.1s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-5 1.1s ease-in-out infinite alternate;
    }

    .clipart-default-success .clipart-cloud-6 {
        top: 26%;
        left: 17%;
        width: 52%;
        height: 52%;
        -webkit-animation: modal-card-error-cloud-6 1.7s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-6 1.7s ease-in-out infinite alternate;
    }

    .clipart-default-success .clipart-cloud-7 {
        top: 53%;
        left: 11%;
        width: 25%;
        height: 25%;
        -webkit-animation: modal-card-error-cloud-7 1.3s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-7 1.3s ease-in-out infinite alternate;
    }

    .clipart-default-success .clipart-cloud-8 {
        top: 27%;
        left: -1%;
        width: 31%;
        height: 30%;
        -webkit-animation: modal-card-error-cloud-8 1.2s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-8 1.2s ease-in-out infinite alternate;
    }

    .clipart-default-success .clipart-ok {
        display: block;
        position: absolute;
        z-index: 2;
        width: 42%;
        height: 42%;
        background: url("../../Content/Images/clipart-ok.svg") no-repeat center center transparent;
        background-size: contain;
        left: 31%;
        top: 21%;
        -webkit-animation: modal-card-error 1.2s ease-in-out infinite alternate;
        animation: modal-card-error 1.2s ease-in-out infinite alternate;
    }

    .clipart-default-success .clipart-shadow {
        display: block;
        position: absolute;
        z-index: 2;
        border-radius: 50%;
        width: 50%;
        height: 5%;
        top: 66%;
        left: 27%;
        background-color: rgba(0, 0, 0, 0.15);
        -webkit-animation: modal-card-error-shadow 1.2s ease-in-out infinite alternate;
        animation: modal-card-error-shadow 1.2s ease-in-out infinite alternate;
    }
/* #endregion ----- /Default Success ----------- */
/* #region --------- Default Error ----------- */

.clipart-default-error {
    display: block;
    width: 250px;
    height: 250px;
    position: relative;
}



    .clipart-default-error .inner {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .clipart-default-error .clipart-cloud-1,
    .clipart-default-error .clipart-cloud-2,
    .clipart-default-error .clipart-cloud-3,
    .clipart-default-error .clipart-cloud-4,
    .clipart-default-error .clipart-cloud-5,
    .clipart-default-error .clipart-cloud-6,
    .clipart-default-error .clipart-cloud-7,
    .clipart-default-error .clipart-cloud-8 {
        display: block;
        position: absolute;
        z-index: 1;
        background-color: #F1F1F1;
        border-radius: 50%;
    }

    .clipart-default-error .clipart-cloud-1 {
        top: 8%;
        left: 17%;
        width: 34%;
        height: 34%;
        -webkit-animation: modal-card-error-cloud-1 1.2s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-1 1.2s ease-in-out infinite alternate;
    }

    .clipart-default-error .clipart-cloud-2 {
        top: 8%;
        left: 39%;
        width: 44%;
        height: 44%;
        -webkit-animation: modal-card-error-cloud-2 1.5s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-2 1.5s ease-in-out infinite alternate;
    }

    .clipart-default-error .clipart-cloud-3 {
        top: 19%;
        left: 73%;
        width: 24%;
        height: 24%;
        -webkit-animation: modal-card-error-cloud-3 2s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-3 2s ease-in-out infinite alternate;
    }

    .clipart-default-error .clipart-cloud-4 {
        top: 30%;
        left: 50%;
        width: 50%;
        height: 50%;
        -webkit-animation: modal-card-error-cloud-4 1.4s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-4 1.4s ease-in-out infinite alternate;
    }

    .clipart-default-error .clipart-cloud-5 {
        top: 59%;
        left: 44%;
        width: 27%;
        height: 27%;
        -webkit-animation: modal-card-error-cloud-5 1.1s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-5 1.1s ease-in-out infinite alternate;
    }

    .clipart-default-error .clipart-cloud-6 {
        top: 26%;
        left: 17%;
        width: 52%;
        height: 52%;
        -webkit-animation: modal-card-error-cloud-6 1.7s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-6 1.7s ease-in-out infinite alternate;
    }

    .clipart-default-error .clipart-cloud-7 {
        top: 53%;
        left: 11%;
        width: 25%;
        height: 25%;
        -webkit-animation: modal-card-error-cloud-7 1.3s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-7 1.3s ease-in-out infinite alternate;
    }

    .clipart-default-error .clipart-cloud-8 {
        top: 27%;
        left: -1%;
        width: 31%;
        height: 30%;
        -webkit-animation: modal-card-error-cloud-8 1.2s ease-in-out infinite alternate;
        animation: modal-card-error-cloud-8 1.2s ease-in-out infinite alternate;
    }

    .clipart-default-error .clipart-error {
        display: block;
        position: absolute;
        z-index: 2;
        width: 42%;
        height: 42%;
        background: url("../../Content/Images/clipart-cancel.svg") no-repeat center center transparent;
        background-size: contain;
        left: 31%;
        top: 21%;
        -webkit-animation: modal-card-error 1.2s ease-in-out infinite alternate;
        animation: modal-card-error 1.2s ease-in-out infinite alternate;
    }

    .clipart-default-error .clipart-shadow {
        display: block;
        position: absolute;
        z-index: 2;
        border-radius: 50%;
        width: 50%;
        height: 5%;
        top: 66%;
        left: 27%;
        background-color: rgba(0, 0, 0, 0.15);
        -webkit-animation: modal-card-error-shadow 1.2s ease-in-out infinite alternate;
        animation: modal-card-error-shadow 1.2s ease-in-out infinite alternate;
    }
/* #endregion ----- /Default Error ----------- */
/* #endregion ================================== /Clipart ============================================== */

/* Fancybox fullscreen video on mobile view */
@media (max-width: 768px) {
    .fancybox-slide--video .fancybox-content {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        padding: 0 !important;
        background: black;
    }

    .fancybox-slide--video video {
        position: absolute;
        inset: 0;
        width: 100vw !important;
        height: 100vh !important;
        object-fit: cover;
    }
}

/* #region Top alert */
.ci-top-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-muted);
    background-color: var(--color-neutral-100);
    color: var(--color-text-basic);
    font-size: 14px;
    line-height: 1.4;
    /* Some mount points sat inside headers that uppercase their contents. Stated outright so the
       wording reads the same wherever the strip renders. */
    text-transform: none;
}

.ci-top-alert--pending {
    display: none;
}

.ci-top-alert__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.ci-top-alert__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--color-neutral-200);
}

    .ci-top-alert__icon svg {
        width: 14px;
        height: 14px;
        fill: var(--color-text-muted);
    }

.ci-top-alert__message {
    font-weight: 500;
}

.ci-top-alert__countdown {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border-basic);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ci-top-alert__action {
    color: var(--color-text-basic);
    font-weight: 600;
    text-decoration: underline;
}

    .ci-top-alert__action:hover,
    .ci-top-alert__action:focus {
        text-decoration: underline;
        opacity: .7;
    }

.ci-top-alert__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    opacity: .55;
}

    .ci-top-alert__close:hover,
    .ci-top-alert__close:focus {
        opacity: 1;
        background-color: var(--color-bg-main);
    }

    .ci-top-alert__close svg {
        width: 14px;
        height: 14px;
        fill: var(--color-text-basic);
    }

.ci-top-alert--warning {
    background-color: var(--color-bg-warning-light);
    box-shadow: inset 3px 0 0 0 var(--color-bg-warning-dark);
}

    .ci-top-alert--warning .ci-top-alert__icon {
        background-color: var(--color-bg-warning-dark);
    }

        .ci-top-alert--warning .ci-top-alert__icon svg {
            fill: var(--color-text-alt);
        }

@media (max-width: 767.98px) {
    /* Floats clear of the header rather than sitting flush under it: full bleed read as part of
       the chrome on a phone and picked up the header's drop shadow along its edge. No shadow of
       its own, the border carries it, the same way .cd-top floats. Background is left to the
       variant so the pill stays opaque over whatever it covers. */
    .ci-top-alert {
        position: fixed;
        top: 10px;
        right: 10px;
        left: 10px;
        z-index: 999999;
        width: auto;
        gap: 8px;
        padding: 8px 10px 8px 12px;
        border: 1px solid var(--color-border-muted);
        border-radius: var(--radius-32);
        box-shadow: none;
        font-size: 13px;
    }
}
/* #endregion Top alert */

/* #region Home recent rails */
.recent-rail + .recent-rail {
    margin-top: 24px;
}

.recent-rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.landing-categories-section .recent-rail-head .recent-h3-link {
    margin: 0;
    color: var(--color-neutral-900);
}

.recent-rail-all {
    color: var(--color-brand-700);
    white-space: nowrap;
}

.recent-rail-all span {
    font-size: 18px;
}

.recent-rail-wrap {
    position: relative;
}

.recent-rail-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.recent-rail-track::-webkit-scrollbar {
    display: none;
}

.recent-card {
    flex: 0 0 200px;
    min-width: 0;
    scroll-snap-align: start;
    color: var(--color-neutral-900);
}

.recent-card:hover {
    text-decoration: none;
}

.recent-card-img {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-12);
    overflow: hidden;
    background: var(--color-neutral-100);
}

.recent-card-img img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.recent-card:hover .recent-card-img img {
    transform: scale(1.05);
}

.recent-card-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 8px;
    line-height: 1.35;
}

.recent-card:hover .recent-card-title {
    color: var(--color-brand-700);
}

.recent-card-price {
    min-height: 1.35em;
    margin-top: 4px;
}

.recent-card-meta {
    margin-top: 2px;
}

.recent-rail-nav {
    position: absolute;
    top: 75px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--color-neutral-000);
    box-shadow: 0 2px 10px rgba(0,0,0,0.16);
    color: var(--color-neutral-900);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.15s ease;
}

.recent-rail-nav.prev {
    left: -12px;
}

.recent-rail-nav.next {
    right: -12px;
}

.recent-rail-nav[hidden] {
    display: none;
}

[dir='rtl'] .recent-rail-nav.prev {
    right: -12px;
    left: auto;
}

[dir='rtl'] .recent-rail-nav.next {
    left: -12px;
    right: auto;
}

[dir='rtl'] .recent-rail-nav {
    transform: translateY(-50%) rotateY(180deg);
}

.recent-rail-wrap:hover .recent-rail-nav {
    opacity: 1;
}

@media (hover: none) {
    .recent-rail-nav {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .recent-card-img img,
    .recent-rail-nav {
        transition: none;
    }
}
/* #endregion Home recent rails */

/* #region Home jobs */
.landing-jobs-section {
    margin-top: 32px;
    margin-bottom: 24px;
}

.home-jobs {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 1.6fr;
    gap: 16px;
}

.home-jobs-hero {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 18px;
    color: var(--color-neutral-000);
    background: radial-gradient(120% 120% at 100% 0%, var(--color-brand-600) 0%, var(--color-brand-800) 55%, var(--color-brand-900) 100%);
}

.home-jobs-kicker {
    letter-spacing: 0.08em;
    opacity: 0.85;
}

.home-jobs-headline {
    margin: 10px 0 0;
    line-height: 1.15;
    color: var(--color-neutral-000);
}

.home-jobs-desc {
    margin: 10px 0 0;
    line-height: 1.5;
    opacity: 0.9;
}

.home-jobs-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
}

.home-jobs-btn,
.home-jobs-btn:hover {
    padding: 10px 16px;
    border: 1.5px solid var(--color-neutral-000);
    border-radius: 999px;
    background: var(--color-neutral-000);
    color: var(--color-brand-900);
    text-decoration: none;
}

.home-jobs-btn.ghost,
.home-jobs-btn.ghost:hover {
    border-color: rgba(255,255,255,0.7);
    background: transparent;
    color: var(--color-neutral-000);
}

.home-jobs-list {
    min-width: 0;
    padding: 8px 16px;
    border: 1px solid var(--color-border-muted);
    border-radius: 18px;
}

.home-jobs-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 0;
}

.home-jobs-list-head h3 {
    margin: 0;
    color: var(--color-neutral-900);
}

.home-jobs-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--color-border-muted);
    color: var(--color-neutral-900);
}

.home-jobs-row:hover {
    text-decoration: none;
}

.home-jobs-row:hover .home-jobs-row-title {
    color: var(--color-brand-700);
}

.home-jobs-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    color: var(--color-neutral-000);
}

.home-jobs-avatar:has(img) {
    border: 1px solid var(--color-border-muted);
    background: var(--color-neutral-000);
}

.home-jobs-avatar img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain;
}

.home-jobs-avatar.tone-0 { background-color: rgb(26,115,232); }
.home-jobs-avatar.tone-1 { background-color: rgb(217,48,37); }
.home-jobs-avatar.tone-2 { background-color: rgb(227,116,0); }
.home-jobs-avatar.tone-3 { background-color: rgb(24,128,56); }
.home-jobs-avatar.tone-4 { background-color: rgb(147,52,230); }
.home-jobs-avatar.tone-5 { background-color: rgb(18,132,150); }

.home-jobs-avatar.tone-0:has(img),
.home-jobs-avatar.tone-1:has(img),
.home-jobs-avatar.tone-2:has(img),
.home-jobs-avatar.tone-3:has(img),
.home-jobs-avatar.tone-4:has(img),
.home-jobs-avatar.tone-5:has(img) {
    background-color: var(--color-neutral-000);
}

.home-jobs-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-jobs-row-title,
.home-jobs-meta {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-jobs-meta {
    margin-top: 2px;
}

@media (max-width: 767px) {
    .home-jobs {
        grid-template-columns: 1fr;
    }
}
/* #endregion Home jobs */


/*# sourceMappingURL=pazarNew.bundle.css.map*/