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

@font-face {
    font-family: 'Roboto';
    src: url('Fonts/Roboto-BoldItalic.eot');
    src: url('Fonts/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'), url('Fonts/Roboto-BoldItalic.woff2') format('woff2'), url('Fonts/Roboto-BoldItalic.woff') format('woff'), url('Fonts/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

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

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

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

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

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

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

@font-face {
    font-family: 'Roboto';
    src: url('Fonts/Roboto-BlackItalic.eot');
    src: url('Fonts/Roboto-BlackItalic.eot?#iefix') format('embedded-opentype'), url('Fonts/Roboto-BlackItalic.woff2') format('woff2'), url('Fonts/Roboto-BlackItalic.woff') format('woff'), url('Fonts/Roboto-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

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

@font-face {
    font-family: 'Roboto';
    src: url('Fonts/Roboto-ThinItalic.eot');
    src: url('Fonts/Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'), url('Fonts/Roboto-ThinItalic.woff2') format('woff2'), url('Fonts/Roboto-ThinItalic.woff') format('woff'), url('Fonts/Roboto-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

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

/* #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: 'Roboto', Arial;
    -webkit-font-smoothing: subpixel-antialiased !important;
}

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

html, body {
    color: #212529;
    font-size: 14px;
    height: 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: 'Roboto', 'Arial' !important;
}

    select option {
        font-weight: 400 !important;
        font-family: 'Roboto', '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: #5DAA80;
    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: #5DAA80;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

    a:active {
        opacity: 1;
        color: #5DAA80;
        -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;
}
/* #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 {
    background-image: url("Images/Macedonia/Macedonia.svg");
}

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

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

.bottom-header a.site-logo,
.new-footer .site-logo {
    background-image: url("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 {
    background-image: url("Images/Kosovo/Kosovo.svg");
}

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

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

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

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

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

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

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

.logo-mojtrg-rs {
    background-image: url("Images/Serbia/Serbia.svg") !important;
}
/* #endregion ------------------------------------ /Logos --------------------------------------------- */
/* #region --------------------------------------- Cursors -------------------------------------------- */
.cursor-pointer {
    cursor: pointer;
}
/* #endregion ----------------------------------- /Cursors -------------------------------------------- */
/* #region ---------------------------------------- Links --------------------------------------------- */
.link-inline {
    display: inline-block;
    color: #5DAA80 !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: #5DAA80 !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: #5DAA80;
            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: 3px;
    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: "Roboto", Arial;
    display: inline-block;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    border: 0px none transparent;
    border-radius: 3px;
    color: #212529 !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: #EBEBEB !important;
    }

        .new-btn.btn-default:active,
        a.new-btn.btn-default:active {
            background-color: #E8E8E8 !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: #5DAA80 !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: #D83F3F !important;
    }

    .new-btn.btn-link,
    a.new-btn.btn-link {
        color: #5DAA80 !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: 500;
    font-size: 14px;
    padding: 10px 10px 8px 10px;
}

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

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

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

.new-btn.btn-md {
    border-radius: 3px;
    font-weight: 500;
    font-size: 14px;
    padding: 20px 24px 18px 24px;
}

    .new-btn.btn-md.btn-link {
        border-radius: 3px;
        font-weight: 500;
        font-size: 14px;
        padding: 20px 5px 18px 5px;
    }

.new-btn.btn-lg {
    border-radius: 3px;
    font-weight: 500;
    font-size: 14px;
    padding: 23px 30px 21px 30px;
}

    .new-btn.btn-lg.btn-link {
        border-radius: 3px;
        font-weight: 500;
        font-size: 14px;
        padding: 23px 5px 21px 5px;
    }

.new-btn.btn-xl {
    font-weight: 500;
    font-size: 18px;
    padding: 32px 32px 30px 32px;
    border-radius: 5px;
    line-height: 18px;
}

    .new-btn.btn-xl.btn-link {
        font-weight: 500;
        font-size: 18px;
        padding: 32px 32px 30px 32px;
        border-radius: 5px;
        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);
    left: 7px;
    right: auto;
}

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

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

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

.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 */
/* #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: 3px;
    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("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: 5px;
}

    .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: #5DAA80;
    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;
}

/* #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: #5DAA80;
            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 #5DAA80;
        }

        .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: 16px;
    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: #5DAA80;
    -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: 2px;
    }

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

    input[type="range"]::-moz-range-progress {
        background-color: #5DAA80;
        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: 2px;
    }

    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #5DAA80;
        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: #5DAA80;
        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;
    }
/* #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: #5DAA80;
        }

        .asRange .asRange-pointer .asRange-tip {
            background-color: #5DAA80;
            border: #5DAA80;
            font-family: 'Roboto', Arial;
            font-weight: 500;
        }

            .asRange .asRange-pointer .asRange-tip:before {
                background-color: #5DAA80;
            }
/* #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: #212529;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border: 0px none transparent;
    border-radius: 3px;
    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: #212529;
    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: #8F8F8F;
    -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: #8F8F8F;
    -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: #8F8F8F;
    -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: #8F8F8F;
    -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: #8F8F8F;
        -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: #8F8F8F;
        -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: #8F8F8F;
        -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: #8F8F8F;
        -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: #8F8F8F;
    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: #8F8F8F;
    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: #D83F3F !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: #D83F3F !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: #D83F3F !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: #D83F3F !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: #5DAA80;
        -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: #5DAA80;
        -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: #5DAA80;
        -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: #5DAA80;
        -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("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("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("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: 2px;
    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: #D83F3F;
}

    .textbox.has-error .help-block:before, .textbox-inline.has-error .help-block:before {
        border-bottom: 6px solid #D83F3F;
    }

.textbox.has-warning .help-block, .textbox-inline.has-warning .help-block {
    background-color: #FFE24B;
    color: #212529 !important;
}

    .textbox.has-warning .help-block:before, .textbox-inline.has-warning .help-block:before {
        border-bottom: 6px solid #FFE24B;
    }

.textbox.has-success .help-block, .textbox-inline.has-success .help-block {
    background-color: #5DAA80;
}

    .textbox.has-success .help-block:before, .textbox-inline.has-success .help-block:before {
        border-bottom: 6px solid #5DAA80;
    }

.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: #5DAA80;
}

.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: #D83F3F;
}

.textbox-code {
    float: left;
    display: block;
    font-size: 36px;
    height: 58px;
    color: #212529;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border: 0px none transparent;
    border-radius: 3px;
    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 ------------------------------------- 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: #212529;
        padding: 10px;
        border: 0px none transparent;
        border-radius: 3px;
        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: #8F8F8F;
            -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: #8F8F8F;
            -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: #8F8F8F;
            -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: #8F8F8F;
            -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: #8F8F8F;
                -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: #8F8F8F;
                -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: #8F8F8F;
                -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: #8F8F8F;
                -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: #8F8F8F;
            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: #D83F3F;
    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: #5DAA80;
    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: #212529 !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: #D83F3F !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: #D83F3F !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: #D83F3F !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: #D83F3F !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

.new-textarea.has-warning textarea, textarea.new-textarea.has-warning {
    color: #212529 !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: #212529 !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: #5DAA80 !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: #5DAA80 !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: #5DAA80 !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: #5DAA80 !important;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }


.new-textarea .help-block {
    display: none;
    position: absolute;
    border-radius: 2px;
    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: #D83F3F;
}

    .new-textarea.has-error .help-block:before {
        border-bottom: 6px solid #D83F3F;
    }

.new-textarea.has-warning .help-block {
    background-color: #FFE24B;
    color: #212529 !important;
}

    .new-textarea.has-warning .help-block:before {
        border-bottom: 6px solid #FFE24B;
    }

.new-textarea.has-success .help-block {
    background-color: #5DAA80;
}

    .new-textarea.has-success .help-block:before {
        border-bottom: 6px solid #5DAA80;
    }
/* #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: #212529;
        border-radius: 3px;
        -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: #8F8F8F !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: #8F8F8F;
    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: #212529;
    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: #8F8F8F;
    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: #212529;
    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: 3px;
    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: #8F8F8F !important;
        }

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

    .select .options-list li a {
        text-align: left;
        display: block;
        color: #212529 !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: #636B72;
    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: 3px;
        padding-top: 8px 0px 8px 0px;
        font-size: 18px;
        line-height: 18px;
    }

    .select .options-list.options-list-extended label {
        border-radius: 3px;
    }

    .select .options-list.options-list-extended li.selected a {
        color: #5DAA80 !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(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: #D83F3F;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.select.has-error:hover .select-button {
    background-color: #F9DBDB;
    color: #D83F3F;
    -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: #D83F3F;
    -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: #5DAA80;
    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: #D83F3F;
}

.select.select-labeled.has-success .select-label,
.select.select-labeled-sm.has-success .select-label {
    color: #5DAA80;
}

.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: 2px;
    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: #D83F3F;
}

    .select.has-error .help-block:before,
    .select-autocomplete.has-error .help-block:before {
        border-bottom: 6px solid #D83F3F;
    }

.select.has-warning .help-block,
.select-autocomplete.has-warning .help-block {
    background-color: #FFE24B;
    color: #212529 !important;
}

    .select.has-warning .help-block:before,
    .select-autocomplete.has-warning .help-block:before {
        border-bottom: 6px solid #FFE24B;
    }

.select.has-success .help-block,
.select-autocomplete.has-success .help-block {
    background-color: #5DAA80;
}

    .select.has-success .help-block:before,
    .select-autocomplete.has-success .help-block:before {
        border-bottom: 6px solid #5DAA80;
    }


/* #endregion Validation */

/* #endregion ---------------------------------- Dropdowns -------------------------------------------- */
/* #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: 5px;
    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: #212529;
        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: 3px;
    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: #212529 !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: #212529;
        border-radius: 3px;
        -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: #8F8F8F;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.select-autocomplete input::-moz-placeholder {
    color: #8F8F8F;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.select-autocomplete input:-moz-placeholder {
    color: #8F8F8F;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.select-autocomplete input:-ms-input-placeholder {
    color: #8F8F8F;
    -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: #D83F3F;
    -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: #212529;
    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: #5DAA80;
    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: #8F8F8F;
    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: #D83F3F;
}

.select-autocomplete.select-labeled.has-success .select-label {
    color: #5DAA80;
}

.select-autocomplete.select-labeled input {
    padding-top: 6px;
    padding-bottom: 8px;
    font-size: 18px;
    font-weight: 400;
    color: #212529;
    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: #8F8F8F;
    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: #212529;
    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: #5DAA80;
}

.select-autocomplete.select-labeled.select-iconed.has-error .select-label,
.select-autocomplete.select-labeled-sm.select-iconed.has-error .select-label {
    color: #D83F3F;
}

/* #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: 3px;
    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: #212529 !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 --------------------------------- Text labels ---------------------------------------------- */
.text-label {
    display: inline-block;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    padding: 6px 10px 5px 10px;
    border-radius: 5px;
    color: #636B72;
    background-color: rgba(0, 0, 0, 0.1);
}

    .text-label.success {
        color: #5DAA80;
        background-color: rgba(93, 170, 98, 0.1);
    }

    .text-label.warning {
        color: #636B72;
        background-color: rgba(255, 229, 0, 0.3);
    }

    .text-label.danger {
        color: #D83F3F;
        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: #212529 !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 ----------------------------------- Progressbar -------------------------------------------- */
.progressbar {
    display: block;
    width: 100%;
    background-color: rgba(93, 170, 128, 0.2);
    overflow: hidden;
    box-shadow: none;
    border-radius: 3px;
    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: #5DAA80;
    margin: 0px;
    height: 100%;
    border-radius: 3px;
    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: #5DAA80;
    }

    .circle-progress.warning circle {
        stroke: #F6AD3F;
    }

    .circle-progress.danger circle {
        stroke: #D83F3F;
    }

    .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: #212529;
            font-weight: 500;
            line-height: 26px;
        }

        .circle-progress .content small {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 9px;
            color: #8F8F8F;
            font-weight: 500;
            text-transform: uppercase;
        }

/* #endregion ---------------------------- /Circle Progressbar ---------------------------------------- */
/* #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: #636B72;
            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: #8F8F8F;
}

    .divider-labeled > * {
        white-space: nowrap;
        padding-inline: 10px;
        text-transform: uppercase;
        font-size: 10px;
        font-weight: 700;
    }

    .divider-labeled:before,
    .divider-labeled:after {
        content: '';
        width: 100%;
        background-color: #F2F2F2;
        height: 1px;
    }
/* #endregion ---------------------------------- Dividers --------------------------------------------- */
/* #region ------------------------------------- Tooltips --------------------------------------------- */
.tooltip-block {
    opacity: 0;
    color: #FFFFFF;
    border-radius: 3px;
    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;
}
/* #endregion ---------------------------------- Tooltips --------------------------------------------- */
/* #region -------------------------------------- Panels -----------------------------------------------*/
.panel {
    display: block;
    width: 100%;
    border-radius: 5px;
    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: 5px;
        text-transform: uppercase;
        text-decoration: none;
        color: #212529;
        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: 3px;
    }

    .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: #5DAA80;
        color: #ffffff;
    }

*[dir='rtl'] .pagination.new-pagination .next,
*[dir='rtl'] .pagination.new-pagination .previous {
    transform: rotateZ(180deg);
}

@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 -------------------------------------- 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: #636B72 !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: #212529;
    }

@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: 5px;
            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: #636B72;
        }

        .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: rgba(243, 52, 60, 1);
}

    .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;
    }
    /* #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: rgba(243, 52, 60, 1);
}

.user-color-1 {
    background-color: rgba(252, 90, 15, 1);
}

.user-color-2 {
    background-color: rgba(243, 172, 6, 1);
}

.user-color-3 {
    background-color: rgba(74, 85, 103, 1);
}

.user-color-4 {
    background-color: rgba(10, 179, 122, 1);
}

.user-color-5 {
    background-color: rgba(12, 195, 173, 1);
}

.user-color-6 {
    background-color: rgba(14, 99, 232, 1);
}

.user-color-7 {
    background-color: rgba(70, 42, 238, 1);
}

.user-color-8 {
    background-color: rgba(108, 38, 255, 1);
}

.user-color-9 {
    background-color: rgba(248, 20, 157, 1);
}

.user-color-10 {
    background-color: rgba(131, 74, 31, 1);
}

.user-color-11 {
    background-color: rgba(251, 136, 30, 1);
}

.user-color-12 {
    background-color: rgba(104, 183, 4, 1);
}

.user-color-13 {
    background-color: rgba(69, 92, 133, 1);
}

.user-color-14 {
    background-color: rgba(8, 192, 81, 1);
}

.user-color-15 {
    background-color: rgba(4, 181, 205, 1);
}

.user-color-16 {
    background-color: rgba(10, 154, 232, 1);
}

.user-color-17 {
    background-color: rgba(93, 93, 93, 1);
}

.user-color-18 {
    background-color: rgba(205, 19, 250, 1);
}

.user-color-19 {
    background-color: rgba(255, 36, 92, 1);
}
/* #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(243, 52, 60, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-0-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-0-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-0-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-0-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-0-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-0-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-0-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-0-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-0-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-0-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-0-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-0-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-0-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 52, 60, 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(252, 90, 15, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-1-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-1-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-1-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-1-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-1-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-1-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-1-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-1-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-1-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-1-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-1-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-1-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-1-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(252, 90, 15, 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(243, 172, 6, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-2-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-2-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-2-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-2-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-2-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-2-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-2-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-2-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-2-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-2-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-2-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-2-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-2-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(243, 172, 6, 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(74, 85, 103, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-3-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-3-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-3-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-3-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-3-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-3-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-3-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-3-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-3-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-3-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-3-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-3-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-3-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(74, 85, 103, 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(10, 179, 122, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-4-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-4-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-4-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-4-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-4-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-4-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-4-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-4-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-4-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-4-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-4-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-4-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-4-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 179, 122, 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(12, 195, 173, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-5-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-5-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-5-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-5-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-5-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-5-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-5-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-5-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-5-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-5-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-5-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-5-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-5-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(12, 195, 173, 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(14, 99, 232, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-6-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-6-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-6-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-6-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-6-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-6-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-6-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-6-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-6-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-6-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-6-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-6-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-6-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(14, 99, 232, 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(70, 42, 238, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-7-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-7-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-7-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-7-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-7-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-7-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-7-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-7-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-7-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-7-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-7-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-7-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-7-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(70, 42, 238, 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(108, 38, 255, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-8-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-8-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-8-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-8-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-8-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-8-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-8-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-8-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-8-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-8-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-8-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-8-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-8-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(108, 38, 255, 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(248, 20, 157, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-9-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-9-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-9-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-9-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-9-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-9-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-9-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-9-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-9-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-9-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-9-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-9-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-9-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(248, 20, 157, 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(131, 74, 31, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-10-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-10-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-10-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-10-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-10-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-10-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-10-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-10-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-10-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-10-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-10-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-10-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-10-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(131, 74, 31, 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(251, 136, 30, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-11-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-11-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-11-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-11-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-11-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-11-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-11-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-11-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-11-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-11-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-11-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-11-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-11-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(251, 136, 30, 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(104, 183, 4, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-12-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-12-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-12-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-12-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-12-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-12-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-12-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-12-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-12-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-12-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-12-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-12-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-12-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(104, 183, 4, 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(69, 92, 133, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-13-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-13-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-13-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-13-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-13-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-13-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-13-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-13-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-13-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-13-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-13-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-13-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-13-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(69, 92, 133, 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(8, 192, 81, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-14-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-14-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-14-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-14-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-14-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-14-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-14-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-14-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-14-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-14-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-14-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-14-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-14-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(8, 192, 81, 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(4, 181, 205, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-15-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-15-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-15-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-15-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-15-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-15-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-15-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-15-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-15-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-15-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-15-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-15-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-15-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(4, 181, 205, 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(10, 154, 232, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-16-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-16-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-16-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-16-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-16-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-16-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-16-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-16-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-16-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-16-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-16-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-16-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-16-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(10, 154, 232, 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(93, 93, 93, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-17-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-17-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-17-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-17-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-17-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-17-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-17-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-17-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-17-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-17-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-17-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-17-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-17-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(93, 93, 93, 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(205, 19, 250, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-18-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-18-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-18-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-18-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-18-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-18-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-18-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-18-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-18-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-18-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-18-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-18-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-18-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(205, 19, 250, 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(255, 36, 92, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 8px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 8px;
    }
}

@-webkit-keyframes avatar-online-19-xs {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 8px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 8px;
    }
}

@keyframes avatar-online-19-sm {
    0% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 12px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 12px;
    }
}

@-webkit-keyframes avatar-online-19-sm {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 12px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 12px;
    }
}

@keyframes avatar-online-19-md {
    0% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 16px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 16px;
    }
}

@-webkit-keyframes avatar-online-19-md {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 16px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 16px;
    }
}

@keyframes avatar-online-19-lg {
    0% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 20px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 20px;
    }
}

@-webkit-keyframes avatar-online-19-lg {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 20px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 20px;
    }
}

@keyframes avatar-online-19-xl {
    0% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 24px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 24px;
    }
}

@-webkit-keyframes avatar-online-19-xl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 24px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 24px;
    }
}

@keyframes avatar-online-19-xxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 30px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 30px;
    }
}

@-webkit-keyframes avatar-online-19-xxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 30px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 30px;
    }
}

@keyframes avatar-online-19-xxxl {
    0% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 1) 0 0 0 0px;
    }

    5% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 35px;
    }

    100% {
        transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 35px;
    }
}

@-webkit-keyframes avatar-online-19-xxxl {
    0% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 1) 0 0 0 0px;
    }

    5% {
        -webkit-transform: scale(0.9);
    }

    70% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 35px;
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: rgba(255, 36, 92, 0) 0 0 0 35px;
    }
}
/* #endregion Animations -- 20 -- */
/* #endregion ------------------------------ /User Avatars -------------------------------------------- */
/* #region ------------------------------------- Counter Marker --------------------------------------- */
.counter-marker {
    font-size: 12px;
    color: #212529;
    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: #D83F3F;
        background-color: #FBCFCF;
    }

    .counter-marker.danger-inversed {
        color: #FFFFFF;
        background-color: #D83F3F;
    }
/* #endregion --------------------------------- /Counter Marker --------------------------------------- */
/* #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: 0px !important;
        border-bottom: 2px solid transparent;
        background: transparent;
        position: relative;
    }

        .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: #8F8F8F;
            text-transform: uppercase;
        }

        .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item .counter-marker {
            margin-inline-start: 10px;
        }

.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 #5DAA80;
    }

        .bootstrap4.list-group-horizontal.tabs-underlined .list-group-item.active .title {
            color: #212529;
        }

    /* #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: 0px !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 #5DAA80;
        }

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

/* #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: 10px;
}
    */

.modal-dialog .modal-content {
    box-shadow: rgba(0,0,0,0.5) 0 0 150px;
    border-radius: 10px;
    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: #636B72;
        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: 0px;
                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: #636B72;
            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: #212529;
    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: 0px;
        border: 0px none transparent;
        z-index: 999999;
    }

        .modal.old-modal .modal-dialog {
            height: 100%;
            border-radius: 0px;
        }

            .modal.old-modal .modal-dialog .modal-content {
                height: 100%;
                border-radius: 0px;
            }

                .modal.old-modal .modal-dialog .modal-content .modal-header {
                    position: absolute;
                    width: 100%;
                    top: 0px;
                    left: 0px;
                    z-index: 1;
                    border-radius: 0px;
                }

                .modal.old-modal .modal-dialog .modal-content .modal-footer {
                    position: absolute;
                    width: 100%;
                    bottom: 0px;
                    left: 0px;
                    z-index: 1;
                    border-radius: 0px;
                }

                .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: #5DAA80 !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: 10px;
        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: #636B72;
    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: 0px;
    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: 0px;
    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: 0px;
        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: 0px;
    }

    .modal-custom .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 64px;
    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: 5px;
}

.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('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('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('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('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('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('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('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('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('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('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: 5px;
    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: #5DAA80;
    --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: 6px;
    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 ------------------------------------- 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: #D83F3F;
        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: 3px;
        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 ------------------------------------- */
/* #endregion ==================================== GLOBALS ============================================ */
/* #region ====================================== Google Ads ========================================== */

.google-ad {
    background-color: #FAFAFA;
}

    /* #region Homepage */
    .google-ad.desktop-home-right-300x600 {
        width: 300px;
        height: auto;
        display: block;
    }

.mobile .google-ad.desktop-home-right-300x600 {
    display: none;
}

.google-ad.desktop-home-top-970x250 {
    width: 970px;
    height: auto;
    display: block;
}

.mobile .google-ad.desktop-home-top-970x250 {
    display: none;
}

.google-ad.desktop-home-left-300x600 {
    width: 300px;
    height: auto;
    display: block;
}

.mobile .google-ad.desktop-home-left-300x600 {
    display: none;
}

.google-ad.mobile-home-bottom-300x250 {
    width: 300px;
    height: auto;
    margin: 30px auto;
    display: none;
}

.mobile .google-ad.mobile-home-bottom-300x250 {
    display: block;
}
/* #endregion Homepage */
/* #region Listing */
.google-ad.desktop-ad-listing-728x90 {
    width: 728px;
    height: auto;
    display: block;
    margin: 0px auto;
}

.mobile .google-ad.desktop-ad-listing-728x90 {
    display: none;
}

.google-ad.desktop-ad-listing-right-300x600 {
    width: 300px;
    height: auto;
    display: block;
}

.mobile .google-ad.desktop-ad-listing-right-300x600 {
    display: none;
}

.google-ad.desktop-ad-listing-left-300x600 {
    width: 300px;
    height: auto;
    display: block;
}

.mobile .google-ad.desktop-ad-listing-left-300x600 {
    display: none;
}

.google-ad.desktop-ad-listing-right-300x250 {
    width: 300px;
    height: auto;
    display: block;
}

.mobile .google-ad.desktop-ad-listing-right-300x250 {
    display: none;
}

.google-ad.desktop-ad-listing-top-970x250 {
    width: 970px;
    height: auto;
    display: block;
}

.mobile .google-ad.desktop-ad-listing-top-970x250 {
    display: none;
}

.google-ad.mobile-ad-listing-top-300x250 {
    width: 300px;
    height: auto;
    display: none;
    margin: 0px auto;
}

.mobile .google-ad.mobile-ad-listing-top-300x250 {
    display: block;
}

.google-ad.mobile-ad-listing-bottom-300x250 {
    width: 300px;
    height: auto;
    display: none;
    margin: 0px auto;
}

.mobile .google-ad.mobile-ad-listing-bottom-300x250 {
    display: block;
}

.google-ad.desktop-ad-listing-bottom-728x90 {
    width: 728px;
    height: auto;
    margin: 0px auto;
    display: block;
}

.mobile .desktop-ad-listing-bottom-728x90 {
    display: none;
}
/* #endregion Listing */
/* #region Ad Details */
.google-ad.universal-ad-details-right-300x250 {
    width: 300px;
    height: auto;
    margin: 30px auto 30px auto;
    display: block;
}
/* #endregion Ad Details */
/* #region Stores */
.google-ad.desktop-store-listing-top-728x90 {
    width: 728px;
    height: auto;
    margin: 30px auto;
}

.google-ad.mobile-store-listing-top-300x250 {
    width: 300px;
    height: auto;
    margin: 30px auto;
    display: none;
}

@media (max-width: 1170px) {
    .google-ad.desktop-store-listing-top-728x90 {
        display: none;
    }

    .google-ad.mobile-store-listing-top-300x250 {
        display: block;
    }
}
/* #endregion Stores */
/* #region Store */
.google-ad.desktop-store-details-top-728x90 {
    width: 728px;
    height: auto;
    margin: 30px auto;
}

.google-ad.mobile-store-details-top-300x250 {
    width: 300px;
    height: auto;
    margin: 30px auto;
    display: none;
}

@media (max-width: 1170px) {
    .google-ad.desktop-store-details-top-728x90 {
        display: none;
    }

    .google-ad.mobile-store-details-top-300x250 {
        display: block;
    }
}
/* #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 .modal-window {
    width: 500px;
    left: calc(50% - 250px);
    top: calc(50% - 170px);
}

.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: 20px;
    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('Images/clipart-appstore-button.svg');
        width: 120px;
        height: 40px;
    }

    .modal-custom.modal-download-app .download-btn.android-btn {
        background-image: url('Images/clipart-googleplay-button.svg');
        width: 136px;
        height: 41px;
    }

.modal-custom.modal-download-app .modal-container .btn-link {
    text-decoration: none;
    margin-bottom: 20px;
}

@media (max-width: 728px) {
    .modal-custom.modal-download-app .modal-window {
        border-radius: 10px;
        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;
    }
}

@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 ====================================== */
.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: 5px;
    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: #636B72;
    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: #5db791 !important;
    font-weight: bold !important;
}

.blog-section h2 a {
    color: #636B72 !important;
    text-decoration: none !important;
}

    .blog-section h2 a span {
        color: #636B72 !important;
        text-decoration: none !important;
    }

*[dir="rtl"] #rightAds.span2 {
    padding-right: 80px;
}

.span2.home-rightads {
    width: 10px !important;
}

.home-header-content {
    display: flex;
    width: 100%;
}

    .home-header-content .elements,
    .home-header-content .languages {
        width: 100%;
    }


.home-header-logo-slogan {
    display: flex;
}

    .home-header-logo-slogan .logo {
        align-self: center;
    }

    .home-header-logo-slogan .slogan {
        align-self: center;
        padding-inline-start: 40px;
        padding-block: 20px;
        width: 100%;
    }

.static-container {
    max-width: 1140px;
    width: 1140px;
    margin: 0px auto;
}

@media (max-width: 1199px) {
    .span2.home-rightads {
        display: none;
    }
}
/* #endregion ================================== /OLD START PAGE ====================================== */
/* #region =================================== OLD AD CREATE PAGE ===================================== */
.panel-checkbox .container .clipart {
    display: block;
    width: 140px;
    height: 140px;
    margin: 0px auto;
}
/* #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: 10px;
    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: 0px;
}

.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: #636B72 !important;
    align-self: flex-end;
    border-radius: 0px;
}

.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 #5DAA80;
    color: #5DAA80 !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("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(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("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(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: #5DAA80;
    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: 0px;
        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: 0px;
        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: 0px;
        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: 0px;
    }

    .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: 0px;
        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: #636B72 !important;
    align-self: flex-end;
    border-radius: 0px !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 #5DAA80;
        color: #5DAA80 !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: 0px;
        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: 0px;
    }

    .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: 0px;
        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: 0px;
        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: 0px;
    }

    .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: 0px;
        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: #5DAA80;
            font-weight: 700;
            text-decoration: underline;
        }
/* #endregion ================================= /SignIn Old form ===================================== */
/* #region =============================== Cargo Delivery Error Panel ================================ */
.error-panel {
    display: block;
    width: 100%;
    position: relative;
    background-color: #EEEEEE;
    border-radius: 10px;
    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("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("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("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("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("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("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: 10px;
    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: #5DAA80;
        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;
}

    .cookies-layout .cookies-controls-area .new-btn.btn-link {
        border: 1px solid #5DAA80 !important;
        border-radius: 3px;
        margin-top: 0px;
        padding: 19px 15px 19px 15px;
        text-decoration: none;
        color: #5DAA80 !important;
        background-color: transparent !important;
    }

.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('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 #5DAA80 !important;
                border-radius: 3px;
                margin-top: 5px;
                padding: 10px 15px 10px 15px;
                text-decoration: none;
                color: #5DAA80 !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: 30px;
        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;
    }

    .cookies-details p {
        font-weight: 400;
        font-size: 18px;
        margin-bottom: 20px;
    }

.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('Images/Help/clipart-chrome.svg');
    }

    .cookies-browser-block a .clipart-firefox {
        background-image: url('Images/Help/clipart-firefox.svg');
    }

    .cookies-browser-block a .clipart-ie {
        background-image: url('Images/Help/clipart-ie.svg');
    }

    .cookies-browser-block a span {
        display: block;
        width: 100%;
        margin-top: 20px;
    }

@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: 5px;
    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: #8F8F8F;
        font-weight: 900;
        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: #5DAA80;
        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("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("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("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("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("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("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("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("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("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("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: #8F8F8F;
        font-size: 30px;
        line-height: 32px;
        font-weight: 900;
        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('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('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('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('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('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('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: 5px;
    width: 100%;
    height: 250px;
    background-color: #E7E7E7;
    position: relative;
    overflow: hidden;
}

.panel.panel-product h3 {
    font-size: 18px;
    color: #212529;
    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: 5px;
        width: 100%;
        height: 210px;
        background-color: #E7E7E7;
        position: relative;
        overflow: hidden;
    }

    .panel.panel-product h3 {
        font-size: 18px;
        color: #212529;
        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: #212529 !important;
    border-radius: 50%;
    background-color: #FFE24B;
    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: #FFE24B;
    color: #212529;
    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: #636B72;
    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: 5px;
}

.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: #5DAA80 !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: #5DAA80;
    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: 5px;
    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: #5DAA80;
        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("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("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("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("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("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("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("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("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("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("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: #5DAA80;
            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: 900;
    color: #5DAA80;
    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('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('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('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('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('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: 5px;
        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: #8F8F8F;
}

.modal-custom.address-manager .item .map-preview {
    font-size: 18px;
    display: inline-block;
    width: 30%;
    vertical-align: middle;
    height: 100px;
    background-color: #8F8F8F;
    border-radius: 3px;
}

    .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: #5DAA80;
}

    .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 #5DAA80;
    color: #5DAA80;
    font-size: 18px;
    font-weight: 500;
    border-radius: 5px;
    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: 0px;
        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: 0px;
    }

    .modal-custom.address-manager .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 0px;
        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: 0px;
    }

    .modal-custom.address-manager .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 5px;
        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: #8F8F8F;
}

.modal.address-manager .item .map-preview {
    font-size: 18px;
    display: inline-block;
    width: 30%;
    vertical-align: middle;
    height: 100px;
    background-color: #8F8F8F;
    border-radius: 3px;
}

    .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: #5DAA80;
}

    .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 #5DAA80;
    color: #5DAA80;
    font-size: 18px;
    font-weight: 500;
    border-radius: 5px;
    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: 0px;
                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: 0px;
}

    .modal-custom.modal-location.maximized .modal-window .modal-header {
        border-radius: 0px;
    }

    .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: 5px;
    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: #5DAA80;
    fill: #5DAA80;
}

.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("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("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: 0px;
        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: 0px;
    }

    .modal-custom.modal-location.maximized .modal-window .modal-footer {
        display: block;
        border-radius: 0px;
    }

    .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: 0px;
        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: 0px;
    }

    .modal-custom.modal-location.maximized .modal-window .modal-footer {
        display: block;
        border-radius: 0px;
    }

    .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: #D83F3F;
    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: #636B72;
    font-weight: 400;
}

    .sales-purchases-page .list-group-item.active {
        border: 1px solid #DDDDDD;
        background-color: #EBEBEB;
        color: #636B72;
    }

.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: #8F8F8F;
        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: #212529;
}

.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: #D83F3F;
}

@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: #8F8F8F;
    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: 5px;
    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: 3px;
    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: 3px;
    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: 3px;
    color: #636B72;
    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: 3px;
    color: #636B72;
    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: #5DAA80;
            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: 0px;
        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: 0px;
    }

    .modal-custom.sales-sorting-filter .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 3px;
    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: 3px;
    color: #636B72;
    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: 3px;
    color: #636B72;
    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: #5DAA80;
            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: 0px;
                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: 0px;
        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: 0px;
    }

    .modal-custom.cancel-order .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 0px;
                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: #8F8F8F;
        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('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('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: #5DAA80;
    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: #FFE24B;
    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: #D83F3F;
    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: #8F8F8F;
        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: 0px;
        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: 0px;
    }

    .modal-custom.order-history .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 0px;
                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: 0px;
        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: 0px;
    }

    .modal-custom.order-history .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: #5DAA80;
    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: #FFE24B;
    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: #D83F3F;
    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: 0px;
                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: 5px;
    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: 5px;
    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: 5px;
        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: #FFE24B;
        color: #212529;
        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: 0px;
        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: 0px;
            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: 0px;
            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: 0px;
                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: 0px;
        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: 0px;
    }

    .modal-custom.order-confirmation-success .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 0px;
                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: 5px;
    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: 5px;
        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: 5px;
            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: #D83F3F;
        color: #ffffff;
        padding: 2px 5px 2px 5px;
        border-radius: 5px;
        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: #212529;
    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: #636B72;
        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: #8F8F8F;
}


.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: 5px;
        color: #212529;
        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: #212529;
}

.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: #636B72;
}

.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: #D83F3F;
    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: #636B72;
}

.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: #FFE24B;
    color: #212529;
}

.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: 5px;
    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: #212529 !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: #D83F3F;
        color: #ffffff;
        padding: 2px 5px 2px 5px;
        border-radius: 5px;
        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: 4px;
            -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: 4px;
        -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: 900;
    }

    .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('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: 0px;
        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: 0px;
    }

    .modal-custom.offer-confirmation-success.new .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 0px;
        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: 0px;
    }

    .modal-custom.offer-confirmation-success.new .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 900;
    }

    .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('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: 0px;
            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: 0px;
            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: 900;
        color: #5DAA80;
        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: #636B72;
        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: 0px;
        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: 0px;
    }

    .modal-custom.edit-info-success .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 0px;
        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: 0px;
    }

    .modal-custom.edit-info-success .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 5px;
        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: 5px;
            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: #212529;
        }

    .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: #212529;
    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: #8F8F8F;
        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: #8F8F8F;
    font-weight: 400;
}

.modal-custom.delivery-info .order-table .order-price-cell .price-block .price {
    font-size: 20px;
    line-height: 23px;
    color: #212529;
    font-weight: 500;
    text-transform: uppercase;
}

.modal-custom.delivery-info .order-table .order-price-cell .price-block.old-price .price {
    color: #8F8F8F;
    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: 5px;
}

.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: #212529;
            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: #FFE24B;
    color: #212529;
    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: 5px;
}

.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: #5DAA80 !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: 0px;
        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: 0px;
    }

    .modal-custom.delivery-info .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 0px;
        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: 0px;
    }

    .modal-custom.delivery-info .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 5px;
        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: 5px;
            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: #212529;
        }

    .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: #212529;
    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: #8F8F8F;
        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: #8F8F8F;
    font-weight: 400;
}

.modal.delivery-info .order-table .order-price-cell .price-block .price {
    font-size: 20px;
    line-height: 23px;
    color: #212529;
    font-weight: 500;
    text-transform: uppercase;
}

.modal.delivery-info .order-table .order-price-cell .price-block.old-price .price {
    color: #8F8F8F;
    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: 5px;
}

.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: #212529;
            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: #FFE24B;
    color: #212529;
    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: 5px;
}

.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: #5DAA80 !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: 0px;
        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: 0px;
        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: 0px;
                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: 0px;
                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: 5px;
        position: relative;
    }

        .modal.modal-remove-card .modal-dialog .card .logo {
            display: block;
            width: 60px;
            height: 40px;
            position: absolute;
            background-color: #FFFFFF;
            border-radius: 5px;
            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: 0px;
                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: 0px;
        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: 0px;
    }

    .modal-custom.paypal-error .modal-footer {
        height: 69px;
        border-radius: 0px;
        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 ================================== 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: 0px;
                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: 10px;
        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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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\'/></filter></svg>#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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#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: 0px;
        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: 0px;
    }

    .modal-custom.modal-new-edit-card .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 10px;
        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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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\'/></filter></svg>#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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#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: 0px;
                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: 5px;
}

.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: #5DAA80;
    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: #636B72;
    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: #5DAA80;
}

@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: 5px;
}

.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: #5DAA80;
    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: #636B72;
    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: #5DAA80;
}

@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: 5px;
}

.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: #5DAA80;
    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: #636B72;
    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: #5DAA80;
}

@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: 5px;
}

.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: #5DAA80;
    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: #636B72;
    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: #5DAA80;
}

@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: 5px;
}

    .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: 0px;
                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: 5px;
}

    .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: 5px;
}

    .car-body .car-body-panel.selected {
        border: 1px solid transparent !important;
        background-color: #E6F4ED !important;
        border-radius: 5px;
        color: #5DAA80;
    }

    .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: #8F8F8F;
    }

    .car-body .car-body-panel.selected .caption {
        color: #5DAA80;
    }


    .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(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: 5px;
    }


.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: 5px;
}

.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: 3px;
    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: 3px;
            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(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(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;
}

/* #endregion ================================== /Ads Search ========================================= */
/* #region ===================================== Ads Listing ========================================= */

.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: 3px;
        padding: 4px 10px 4px 10px;
        text-decoration: none;
        background-color: #E6F4ED;
        font-weight: 400 !important;
        color: #212529;
        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 .line-form > ul > li {
    margin-block-end: 10px !important;
}

.mobile .btn.btn-primary.ad-search {
    color: #ffffff;
}
/* #endregion ================================= /Ads Listing ========================================= */
/* #region ======================================== My Ads =========================================== */
.user-settings .row.less-right-menu h1 {
    color: #212529;
    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: 0px !important;
}

.myads-page .page-header .list-group-item {
    border: 0px none transparent;
    color: #8F8F8F;
    border-radius: 0px !important;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
}

*[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-left: 30px !important;
}

*[dir='rtl'] .myads-page .page-header .list-group-item + .list-group-item {
    margin-left: 0px !important;
    margin-right: 30px !important;
}

.myads-page .page-header .list-group-item.active {
    background-color: transparent;
    border-bottom: 2px solid #5DAA80;
    color: #212529;
    border-radius: 0px;
    margin-left: 0px;
}

*[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;
}

@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: #636B72;
    text-align: center;
    line-height: 32px;
}

.myads-page .store-locked-block p {
    font-size: 14px;
    font-weight: 400;
    color: #636B72;
    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: #636B72;
        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('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('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('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('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('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('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 {
    width: 100%;
    border-bottom: 1px solid #F2F2F2;
    padding-bottom: 15px;
}

    .myads-page .listing-header .left-side {
        float: left;
    }

*[dir='rtl'] .myads-page .listing-header .left-side {
    float: right;
}

.myads-page .listing-header .right-side {
    float: right;
}

*[dir='rtl'] .myads-page .listing-header .right-side {
    float: left;
}

.myads-page .listing-header .left-side .checkbox-inline {
    margin-top: 10px;
}

.myads-page .listing-header .right-side .select .select-button {
    width: 250px;
}

.myads-page .listing-header .additional-controls {
    border-left: 1px solid #DDDDDD;
    display: inline-block;
    margin-left: 10px;
    padding-left: 10px;
}

*[dir='rtl'] .myads-page .listing-header .additional-controls {
    border-left: 0px none transparent;
    border-right: 1px solid #DDDDDD;
    margin-left: 0px;
    margin-right: 10px;
    padding-left: 0px;
    padding-right: 10px;
}

.myads-page .listing-header .additional-controls .btn-link span:last-child {
    padding-left: 3px;
}

*[dir='rtl'] .myads-page .listing-header .additional-controls .btn-link span:last-child {
    padding-left: 0px;
    padding-right: 3px;
}

.myads-page .listing-header .btn-sorting {
    font-size: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
    vertical-align: middle;
    border: 0px none transparent;
    border-radius: 3px;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    cursor: pointer;
    line-height: 0px;
}

    .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: #FFFFFF;
        font-weight: 700;
        display: inline-block;
        vertical-align: top;
        border-radius: 40px;
        background-color: #D83F3F;
        padding: 10px 8px 10px 8px;
        line-height: 0px;
        margin-top: 6px;
        margin-left: 3px;
    }

*[dir='rtl'] .myads-page .listing-header .btn-sorting .marker {
    margin-left: 0px;
    margin-right: 3px;
}

.myads-page .listing-header .btn-sorting .marker:empty {
    display: none;
}

.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: #636B72;
        }

            .myads-page .listing-header .listing-actions .new-btn i + i {
                margin-top: 5px;
            }


@media (max-width: 1199px) {
    .myads-page .listing-header .additional-controls .btn-link span:last-child {
        display: none;
    }
}

@media (max-width: 991px) {
    .myads-page .listing-header .right-side .select {
        display: none;
    }
}

@media (max-width: 450px) {
    .myads-page .listing-header .listing-actions {
        display: inline-block;
    }

    .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: #F9F9F9;
    border-radius: 5px;
    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: 150px;
        border-radius: 5px;
        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%;
    object-fit: cover;
    object-position: center center;
}

.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: 3px;
    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: #636B72;
}

    .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: 20px;
}

    .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 .badge {
    font-style: normal;
    background-color: #FFFFFF;
    color: #5DAA80;
    font-weight: 500;
    font-size: 12px;
    padding: 1px 4px 1px 4px;
    border-radius: 5px;
    margin-right: 5px;
}

.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: 5px;
    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: #28A745;
    }

    .myads-page .buyer-card .text-label.warning {
        background-color: #FFF9C5;
        color: #F6AD3F;
    }

    .myads-page .buyer-card .text-label.danger {
        background-color: #FBCFCF;
        color: #D83F3F;
    }

.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: #D83F3F;
        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: #212529;
    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: #212529;
        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: 5px;
    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: #212529;
        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,
    .myads-page .goods-card .controls-area .btn-edit,
    .myads-page .goods-card .controls-area .btn-renew {
        display: inline-block;
        width: auto;
        padding: 4px 4px 4px 4px;
        vertical-align: top;
        margin: 0px;
    }

    .myads-page .goods-card .controls-area .btn-renew,
    .myads-page .goods-card .controls-area .btn-publish,
    .myads-page .goods-card .controls-area .btn-pay {
        display: inline-block;
        width: auto;
        vertical-align: top;
        margin: 0px;
    }

        .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: 3px;
        }

        *[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: #636B72;
        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;
    }
}

@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: 5px;
    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: 5px;
        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-fit: cover;
            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: #636B72;
    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('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('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('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('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: block;
            width: 100%;
            height: 100%;
            background-color: #F2F2F2;
        }

        .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: #E6F4ED;
        }

        .modal-custom.unpublish-1ad .radio-selector label small,
        .modal-custom.unpublish-multiple-ads .radio-selector label small {
            display: block;
            width: 100%;
            position: absolute;
            font-size: 24px;
            text-transform: uppercase;
            text-align: center;
            top: calc(50% - 12px);
            left: 0px;
            color: #636B72;
            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: #5DAA80;
        }

        .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: 0px;
        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: 0px;
    }

    .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: 0px;
        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: 5px;
        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: 5px;
    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: #5DAA80;
    border: 2px solid #5DAA80;
}

    .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('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('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('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('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('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: #636B72;
    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: #212529;
}

.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: #636B72;
    font-weight: 400;
    display: inline-block;
}

.modal-custom.boost-ad .item .details-area .vat {
    font-size: 14px;
    color: #212529;
    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: #212529;
    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: #8F8F8F;
    text-decoration: line-through;
}

.modal-custom.boost-ad .item .details-area .price bdi.new-price {
    color: #28A745;
}

.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: #212529;
    font-weight: 700;
    display: inline-block;
}

    .modal-custom.boost-ad .item .details-area .period .caption {
        font-size: 14px;
        color: #636B72;
        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: 0px;
        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: 0px;
    }

    .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: 0px;
        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: 5px;
}

*[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-fit: cover;
    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: 20px;
                            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: 0px;
        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: 0px;
    }

    .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: 0px;
        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: 3px;
        color: #636B72;
        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: 3px;
        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: #5DAA80;
            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: 0px;
        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: 0px;
    }

    .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: 0px;
        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: #D83F3F;
        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: 0px;
        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: 0px;
    }

    .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: 0px;
        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: 3px;
    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: #636B72;
        display: block;
        width: 600px;
        text-align: center;
        margin: 20px auto 10px auto;
    }

    .buyers-page .no-results p {
        font-size: 14px;
        font-weight: 400;
        color: #8F8F8F;
        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: #8F8F8F;
        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: 5px;
    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: #212529;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 21px;
        display: block;
        width: 100%;
    }

    .buyers-page .buyer-item .city {
        color: #8F8F8F;
        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: #8F8F8F;
        }

    .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: #212529;
}

.buyers-page .buyer-item .controls .button {
    width: 48px;
    height: 48px;
    text-align: center;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
    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: #D83F3F;
}

*[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: #212529;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
}

.buyers-page .buyer-item .select .select-button {
    color: #5DAA80;
    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: #636B72;
}

.search-requests.no-results {
    display: none;
    padding: 10px 0px 10px 0px;
    margin: 0px;
    font-size: 12px;
    font-weight: 400;
    color: #636B72;
}

.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: #212529;
    }

    .buyer-item .card-list.no-results p {
        font-size: 14px;
        font-weight: 400;
        color: #636B72;
        margin-top: 5px;
        margin-bottom: 20px;
    }

.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: 5px;
}

    .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%;
        object-fit: cover;
        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: #8F8F8F;
        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: #212529;
            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: #8F8F8F;
        }

        .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: #636B72;
            font-weight: 400;
            margin-block-end: 50px;
            display: block;
        }

    .buyers-page .buyers-wholesale .clipart-block {
        width: 100%;
        height: 450px;
        background-color: #F9F9F9;
        border-radius: 5px;
        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: #8F8F8F;
    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: #212529;
    font-weight: 900;
    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: #636B72;
    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: #D83F3F;
    }

    *[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: 5px;
        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: #8F8F8F;
        }

    .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: #212529;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 21px;
        display: block;
        width: 100%;
    }

    .buyers-page .new-buyer-item .city {
        color: #8F8F8F;
        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: 5px;
    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: #5DAA80;
    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: #212529;
}

.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: #8F8F8F;
        }

        .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: #212529;
    margin-top: -30px;
}

.modal-custom.leads-promo .description {
    font-size: 16px;
    color: #8F8F8F;
    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: #5DAA80;
        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: #212529;
        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: 0px;
        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: 0px;
    }

    .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: 0px;
        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: #5DAA80;
            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: 0px;
        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: 0px;
    }

    .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: 0px;
        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: 5px;
}

    .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%;
        object-fit: cover;
        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: #8F8F8F;
        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: #212529;
            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: 0px;
        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: 0px;
    }

    .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: 0px;
        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: 0px;
        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: 0px;
    }

    .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: 0px;
        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: #636B72;
                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: #212529;
        text-transform: uppercase;
        font-weight: 900;
        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: 900;
        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: #212529;
        margin-block-end: 10px;
    }

    .leads-promotion-page .benefits p {
        display: inline-block;
        width: 100%;
        font-size: 16px;
        line-height: 21px;
        font-weight: 400;
        color: #636B72;
    }

@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: 900;
        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: #5DAA80;
        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: #212529;
        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: #636B72;
    }

    .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: #5DAA80;
        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: 900;
        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: #636B72;
    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: 900;
    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: 900;
        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 ------------------ */
/* #endregion ================================ /Potential Buyers ======================================= */
/* #region ======================================= Statistics ========================================== */
.transaction-layout > h1 {
    color: #212529;
    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: #212529 !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: 3px;
    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: #8F8F8F;
    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: #212529 !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: #8F8F8F;
    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(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(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(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(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(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(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: 5px;
    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(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(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(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(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("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("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("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("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(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: #212529;
    font-weight: 600;
    padding: 0px;
    margin-bottom: 5px;
    line-height: 30px;
}

.ohridbank-banner .banner-content-block .heading-2 {
    display: block;
    color: #212529;
    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: #212529;
    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('Images/OhridBank/BannerNoPrice/background-1.svg') no-repeat center center #FFFFFF;
        background-size: cover;
        position: relative;
        border-radius: 5px;
        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(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(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(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(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(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(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(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(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(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(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(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(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(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(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: 5px;
        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(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(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(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(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(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(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(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(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(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(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(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(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(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(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(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(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(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(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(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: #5DAA80;
    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: 3px;
    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: #212529;
    }

    .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: 5px;
    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(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: #5a5a5a;
    font-size: 15px;
}


    .kosovo-getstarted-caption p a,
    .albania-getstarted-caption p a {
        display: block;
        text-decoration: underline;
        font-size: 16px;
        color: #5db791;
    }

.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: #636B72 !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: 5px !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: #636B72 !important;
        border: 0px none transparent !important;
    }

        .methods-tabs-group .list-group-item.active .inner {
            border: 2px solid #5DAA80 !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: #5DAA80 !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: #636B72 !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: #5DAA80;
}

*[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: #5DAA80 !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: #636B72;
        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: #8F8F8F;
        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: #5DAA80;
}

    .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: 5px;
    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: #5DAA80 !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: 5px;
    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: #D83F3F;
}

    .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-bottom: 10px;
}

    .payment-page .credit-card .content-area .card-item .row,
    .payment-methods-page .card-item .row {
        margin: 0px;
    }

        .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: #F2F2F2;
        border-radius: 5px;
        padding: 10px 10px 10px 65px;
        cursor: pointer;
        opacity: 1;
        -webkit-transition: opacity 0.1s ease-in-out;
        transition: opacity 0.1s ease-in-out;
    }

*[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: #E6F4ED;
}

.payment-page .credit-card .content-area .card-item .panel:hover,
.payment-methods-page .card-item .panel:hover {
    opacity: 0.8;
    -webkit-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

.payment-page .credit-card .content-area .card-item .checker,
.payment-methods-page .card-item .checker {
    display: block;
    position: absolute;
    z-index: 1;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    left: 10px;
    width: 30px;
    height: 30px;
    border: 3px solid #FFFFFF;
    background-color: #8F8F8F;
    border-radius: 50%;
}

*[dir='rtl'] .payment-page .credit-card .content-area .card-item .checker,
*[dir='rtl'] .payment-methods-page .card-item .checker {
    left: auto;
    right: 10px;
}

.payment-page .credit-card .content-area .card-item .checker i,
.payment-methods-page .card-item .checker i {
    display: none;
    font-size: 14px;
    margin-top: 5px;
    margin-left: 5px;
}

*[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: 5px;
}

.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: #5DAA80;
}

    .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;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 35px;
    background-color: #FFFFFF;
    border-radius: 3px;
}

*[dir='rtl'] .payment-page .credit-card .content-area .card-item .title .logo,
*[dir='rtl'] .payment-methods-page .card-item .title .logo {
    right: 0px;
    left: auto;
}

.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: block;
}

    .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;
        position: absolute;
        top: calc(50% - 17px);
        left: calc(50% - 16px);
        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: 32px;
    padding: 0px;
    margin: 0px;
    border: 0px none transparent;
    background: transparent;
}

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

.new-card-btn {
    display: block;
    width: 100%;
    background-color: transparent;
    border: 2px dashed #C5C5C5;
    padding: 30px 20px 30px 20px;
    border-radius: 5px;
    color: #5DAA80;
    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;
    }


/* #region MerrJep */
.payment-page .credit-card.merrjep .content-area .warning-message {
    display: block;
    width: 100%;
    border-radius: 5px;
    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: #5DAA80;
}

.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 {
        top: 13px;
        left: auto;
        right: 11px;
    }

    *[dir='rtl'] .payment-page .credit-card .content-area .card-item .checker,
    *[dir='rtl'] .payment-methods-page .card-item .checker {
        left: 11px;
        right: auto;
    }

    .payment-page .credit-card .content-area .card-item .title .ci-text-muted,
    .payment-methods-page .card-item .title .ci-text-muted {
        position: absolute;
        top: 60px;
        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;
        top: 7px;
        left: 58px;
        position: absolute;
        width: auto;
    }

    *[dir='rtl'] .payment-page .credit-card .content-area .card-item .card-title,
    *[dir='rtl'] .payment-methods-page .card-item .card-title {
        left: auto;
        right: 58px;
    }

    .payment-page .credit-card .content-area .card-item .row,
    .payment-methods-page .card-item .row {
        min-height: 140px;
        position: relative;
    }

    .payment-page .credit-card .content-area .card-item .card-controls,
    .payment-methods-page .card-item .card-controls {
        position: absolute;
        z-index: 1;
        right: 0px;
        left: auto;
        bottom: 3px;
        display: block;
        min-width: 0px;
    }

    .payment-page .credit-card .content-area .card-item .date,
    .payment-methods-page .card-item .date {
        position: absolute;
        left: 5px;
        bottom: 4px;
        z-index: 1;
        display: inline-block;
        width: auto;
    }

    *[dir='rtl'] .payment-page .credit-card .content-area .card-item .date,
    *[dir='rtl'] .payment-methods-page .card-item .date {
        left: auto;
        right: 5px;
    }
}

@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: 10px;
    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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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\'/></filter></svg>#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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#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;
    }
}

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

@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: #8F8F8F;
    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: #FFE24B;
        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: 5px;
    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: 5px;
    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: 5px;
    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: #636B72;
}



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

*[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(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("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: 3px;
    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("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;
}

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

@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 ======================================= 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: 5px;
    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: 5px;
    text-align: left;
    font-size: 28px;
    color: #5DAA80;
    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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
    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: #5DAA80;
}

.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: #D83F3F;
    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 .card-select-block .select {
    margin-top: 18px;
}

    .add-funds-page .autotopup-block .card-select-block .select .add-new {
        text-align: center;
        color: #5DAA80 !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: 5px;
    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: 3px;
        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: #D83F3F;
    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(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: 5px;
}

    .invoice-history-data .table .badge.badge-success {
        background-color: #E6F4ED;
        color: #5DAA80;
    }

    .invoice-history-data .table .badge.badge-warning {
        background-color: #FFF9C5;
        color: #636B72;
    }

    .invoice-history-data .table .badge.badge-danger {
        background-color: #FBCFCF;
        color: #D83F3F;
    }

.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: #8F8F8F;
    }

    .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: 3px;
                    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: #5DAA80 !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("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("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("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;
        }
}

/* #endregion ================================= /Ad Create ============================================ */
/* #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: 5px;
    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: 5px;
    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: 4px;
    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 .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 {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 20px;
}

    .ad-details-page .hashtags-area .tag {
        display: inline-block;
        position: relative;
        border-radius: 3px;
        padding: 6px 12px 6px 12px;
        text-decoration: none;
        background-color: #E6F4ED;
        font-weight: 400 !important;
        color: #212529;
        cursor: pointer;
        font-size: 14px;
        vertical-align: top;
    }

.ad-details-page .company-ad-tag {
    display: inline-block;
    background-color: #E6F4ED;
    padding: 8px 12px 8px 12px;
    border-radius: 3px;
    font-size: 14px;
    color: #5DAA80;
    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: 3px;
    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;
}

.ad-details-page .save-ad-area {
}

    .ad-details-page .save-ad-area .views-number {
        line-height: 33px;
        float: left;
    }

*[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;
}

.temp-carousel {
    display: block;
    width: 100%;
    height: 480px;
    background-color: #636B72;
    color: #FFFFFF;
    text-align: center;
    padding-top: 100px;
    border-radius: 5px;
}

.ad-details-page h1 {
    font-size: 28px;
    font-weight: 400;
    margin-top: 20px;
}

.ad-details-page h4 {
    font-size: 18px;
    font-weight: 400;
    margin-top: 8px;
    display: inline-block;
}

    .ad-details-page h4 .format-money {
        margin-right: 5px;
    }

    .ad-details-page h4 .new-price {
        padding-right: 10px;
    }

    .ad-details-page h4 > span {
        white-space: nowrap;
    }


.ad-details-page .new-price,
.ad-details-page .old-price {
    font-size: 18px;
}

    .ad-details-page .new-price > span,
    .ad-details-page .old-price > span {
        padding-left: 5px;
    }

.ad-details-page .description-area {
    display: block;
    width: 100%;
    border-bottom: 1px solid #DDDDDD;
    padding-top: 20px;
    padding-bottom: 20px;
    word-break: break-word;
}

    .ad-details-page .description-area > span {
        line-height: 23px;
    }

.ad-details-page .manage-block-not-logged {
    text-align: center;
}

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

@media (max-width: 767px) {
    .temp-carousel {
        height: 360px;
    }
}

@media (max-width: 575px) {
    .ad-details-page h1 {
        font-size: 24px;
        font-weight: 400;
        margin-top: 20px;
    }

    .ad-details-page h4 {
        font-size: 18px;
        font-weight: 400;
        margin-top: 5px;
    }
}

@media (max-width: 479px) {
    .temp-carousel {
        height: 250px;
    }
}

@media (max-width: 419px) {
    .ad-details-page h1 {
        font-size: 24px;
        font-weight: 400;
        margin-top: 12px;
    }

    .ad-details-page h4 {
        font-size: 18px;
        font-weight: 400;
        margin-top: 5px;
        margin-bottom: 15px;
    }
}

.store .logo-area .default-logo {
    position: relative;
    background-color: #ebebeb;
    width: 100px;
    height: 100px;
    border-radius: 5px;
}

    .store .logo-area .default-logo i {
        position: absolute;
        font-size: 64px;
        top: calc(50% - 32px);
        left: calc(50% - 32px);
    }

/* #region --------------- Store Info Area --------------------- */
.ad-details-page .store-info-area {
    width: 100%;
    border-radius: 5px;
    background-color: #E6F4ED;
    margin-top: 20px;
}

.ad-details-page .store-info-container {
    display: block;
    width: 100%;
    padding: 20px;
}

    .ad-details-page .store-info-container h4 {
        display: block;
        width: 100%;
        font-size: 24px;
        margin-bottom: 12px;
    }

    .ad-details-page .store-info-container pre {
        line-height: 23px;
        font-family: "Roboto", 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;
    }
}
/* #endregion ----------- /Store Info Area --------------------- */
/* #region ------------------ Ads pager ------------------------ */
.ad-details-page .ads-pager {
    display: table;
    width: 100%;
}

    .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;
    min-height: 80px;
}

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

        .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;
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .ad-details-page .breadcrumbs {
        display: none;
    }
}
/* #endregion -------------- Breadcrumbs ----------------------- */
/* #region -------------------- Tags --------------------------- */
.ad-details-page .tags-area {
    display: block;
    width: 100%;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 0px;
    margin-top: 20px;
}

.ad-details-page .tag-item {
    display: inline-block;
    position: relative;
    border-radius: 3px;
    padding: 12px 15px 12px 15px;
    text-decoration: none;
    background-color: #E7E7E7;
    font-weight: 400;
    color: #212529;
    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: #636B72;
}

.ad-details-page .tag-item bdi {
    color: #212529;
    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: 15px;
        margin-top: 15px;
    }

    .ad-details-page .tag-item {
        padding: 9px 10px 9px 10px;
        font-size: 12px;
        margin-right: 3px;
        margin-bottom: 2px;
        margin-top: 1px;
    }

    *[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 {
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #DDDDDD;
    line-height: 24px;
}

    .ad-details-page .report-area .btn-report {
        color: #D83F3F !important;
        text-decoration: none !important;
        padding-top: 0px;
        padding-bottom: 0px;
    }
/* #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: 3px;
                position: relative;
                background-color: #DDDDDD;
            }

            .ad-details-page .visited-ads-area .goods-card .seo-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
                border-radius: 3px;
                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: 3px;
    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: 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;
}

.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: #5DAA80;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    color: #FFFFFF;
    z-index: 4;
    border-radius: 3px;
}

*[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: #636B72;
    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: #636B72;
    display: none;
}

.ad-details-page .seller-info-area .status.status-online {
    color: #5DAA80;
    display: none;
}

    .ad-details-page .seller-info-area .status.status-online:before {
        background-color: #5DAA80;
    }

.ad-details-page .seller-info-area.online .status.status-online {
    color: #5DAA80;
    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: 5px;
    }
/* #endregion -------- /Seller's Info area --------------------- */
/* #region --------------- Delivery Area ----------------------- */
.ad-details-page .right-side .delivery-area {
    display: block;
    width: 100%;
    border-radius: 5px;
    background-color: #F2F2F2;
    padding: 10px;
    margin-bottom: 15px;
}

    .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: #636B72;
    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: 5px;
        height: auto;
    }

    .multicontact-btn .option a {
        text-align: center;
        font-weight: 500;
        color: #212529;
        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: #636B72;
        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;
}

*[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('Images/Images/clipart-map.svg') no-repeat center center transparent;
    background-size: cover;
    border-radius: 5px;
}
/* #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: 5px;
        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-fit: cover;
            object-position: center center;
            border-radius: 3px;
            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: 5px;
    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: block;
    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;
}

*[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: 5px;
        display: block;
        color: #212529;
        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-fit: cover;
        object-position: center center;
        border-radius: 3px;
        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;
}

*[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: #5DAA80;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    color: #FFFFFF;
    z-index: 4;
    border-radius: 3px;
}

*[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 {
    display: none;
    border-top: 1px solid #DDDDDD;
    padding-top: 20px;
    font-size: 0px;
    margin-top: 20px;
}

    .ad-details-page .mobile-additional-info-area .left-side {
        display: inline-block;
        width: 60%;
        font-size: 14px;
        vertical-align: top;
    }

    .ad-details-page .mobile-additional-info-area .right-side {
        display: inline-block;
        width: 40%;
        font-size: 14px;
        vertical-align: top;
    }


*[dir='rtl'] .ad-details-page .mobile-additional-info-area .left-side {
    display: inline-block;
    width: 60%;
}

*[dir='rtl'] .ad-details-page .mobile-additional-info-area .right-side {
    display: inline-block;
    width: 40%;
}

.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: block;
    }
}

@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%;
    }

    .ad-details-page .mobile-additional-info-area .right-side,
    *[dir='rtl'] .ad-details-page .mobile-additional-info-area .right-side {
        display: none;
    }
}

@media (max-width: 419px) {
    .ad-details-page .mobile-additional-info-area {
        padding-top: 12px;
        padding-bottom: 12px;
    }

        .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: 5px;
    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: 5px;
        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: #636B72;
    display: block;
}

.ad-details-page .mobile-seller-info .status.status-online {
    color: #5DAA80;
    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: #5DAA80;
}

.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 {
    width: 100%;
    position: relative;
    background-color: #F2F2F2;
    border-radius: 5px;
}

    .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: "Roboto", 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: 5px;
        border-top-right-radius: 5px;
        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);
    backdrop-filter: blur(10px);
    padding: 15px 15px 15px 15px;
    z-index: 999;
}

    .ad-details-page .mobile-bottom-controls .new-btn {
        padding: 25px 10px 25px 10px;
        font-size: 24px;
        border-radius: 10px;
        box-shadow: rgba(0,0,0,0.3) 0px 0px 10px;
        cursor: pointer;
    }


    .ad-details-page .mobile-bottom-controls.cargo {
        font-size: 0px;
    }

        .ad-details-page .mobile-bottom-controls.cargo .new-btn {
            font-size: 18px;
            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%;
}

@media (max-width: 991px) {
    .ad-details-page .mobile-bottom-controls {
        display: block;
    }
}

@media (max-width: 500px) {
    .ad-details-page .mobile-bottom-controls .new-btn {
        padding: 20px 10px 20px 10px;
        font-size: 16px;
        border-radius: 5px;
        box-shadow: rgba(0,0,0,0.3) 0px 0px 10px;
    }
}

@media (max-width: 400px) {
    .ad-details-page .mobile-bottom-controls .new-btn {
        padding: 20px 10px 20px 10px;
        font-size: 16px;
        border-radius: 5px;
        box-shadow: rgba(0,0,0,0.3) 0px 0px 10px;
    }

    .ad-details-page .mobile-bottom-controls {
        padding: 5px 5px 5px 5px;
    }
}
/* #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: 10px;
    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 ------------------- */

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


/* #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: 5px;
    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: #5DAA80;
}

    .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: #FFE24B;
    color: #212529;
    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: 0px;
                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: 0px;
                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: 5px;
    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: #5DAA80;
}

    .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('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('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('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('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('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('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: 0px;
                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: #FFE24B;
    color: #212529;
    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: 0px;
                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: #FFE24B;
    color: #212529;
    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: 0px;
                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: 0px;
            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: 0px;
                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('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('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: 0px;
                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 =================================== Search form ============================================= */
.with-online-checkbox {
    display: inline-block;
    margin-right: 45px;
}

*[dir='rtl'] .with-online-checkbox {
    margin-right: 0px;
    margin-left: 45px;
}


.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: 'Roboto', Arial !important;
    padding-left: 36px;
}

*[dir='rtl'] .well .cargo-search-checkbox span {
    padding-right: 30px;
    padding-left: 0px;
}

.cargo-search-checkbox .ci-pazar {
    font-size: 28px;
    position: absolute;
    top: calc(50% - 14px);
    left: 24px;
}

*[dir='rtl'] .cargo-search-checkbox .ci-pazar {
    left: auto;
    right: 18px;
}

.with-photos-checkbox {
    display: inline-block;
    margin-right: 45px;
}

*[dir='rtl'] .with-photos-checkbox {
    margin-left: 45px;
    margin-right: 0px;
}
/* #endregion =============================== /Search form ============================================= */
/* #region ================================ /Search Results ============================================ */
/*
.result-content .span2.img-polaroid {
    display: inline-block;
    width: auto;
    float: none;
    object-fit: cover;
    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: #636B72;
}

    .secondary-menu .menu-list-block > li > a:hover {
        color: #636B72;
    }

.secondary-menu .menu-list-block > li.active > a:after {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #D83F3F;
    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: #212529;
}

.secondary-menu .menu-list-block > li > a > b {
    font-size: 12px;
    color: #D83F3F;
    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: #212529;
    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: #212529;
    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: 5px;
    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: #636B72;
        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: 3px;
}

.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%;
    object-fit: cover;
}

.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: 3px;
    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: 3px;
    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: 3px;
    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: #5DAA80;
    }


    .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: #8F8F8F;
    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: 3px;
    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: #5DAA80;
            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: 3px;
    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: 3px;
    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: 5px;
    border: 2px dashed #5DAA80;
    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: 5px;
    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: #5DAA80;
}

    .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: 5px;
    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: 5px;
    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: 5px;
        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: #636B72;
            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: 5px;
        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: #8F8F8F;
            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: #636B72;
}

.notifications-page .header .status.status-admin {
    background-color: #FFE24B;
    color: #636B72;
}

.notifications-page .content .right-side .message-text {
    margin-bottom: 10px;
}

.notifications-page .content .right-side .message-ad {
    width: 100%;
    border-radius: 5px;
    background-color: #F9F9F9;
    padding: 10px;
    font-size: 0px;
}

.notifications-page .content .right-side .message-ad {
    width: 100%;
    border-radius: 5px;
    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: 3px;
        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: 3px;
            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: #636B72;
}

*[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: #8F8F8F;
        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: 10px;
    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('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: 10px;
        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("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("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: #636B72 !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: #5DAA80 !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;
        width: 80%;
        font-weight: 700 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .mobile .listing-page .search-item .additional-info {
        margin-top: 10px;
    }



.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-fit: cover;
    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-fit: cover;
    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: #FFE24B;
    width: calc(100% - 20px);
    border-radius: 5px;
    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 #FFE24B;
    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 {
        display: block;
        position: relative;
        background-color: #F9F9F9;
        padding-top: 0px;
        padding-bottom: 0px;
        border-bottom: 1px solid #DDDDDD;
    }

        .nav-header .top-header .container {
            min-height: 55px;
        }

        .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-top: 7px;
    vertical-align: top;
}

.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-right: 5px;
    padding-left: 0px;
}

.nav-header .top-header .balance-btn bdi span + span {
    padding-left: 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: #D83F3F !important;
    font-weight: 700;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 30px;
    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 {
        font-size: 11px;
        vertical-align: middle;
        background-color: #FBCFCF;
        color: #D83F3F !important;
        font-weight: 700;
        display: inline-block;
        padding: 2px 6px;
        border-radius: 30px;
        position: absolute;
        top: 6px;
        left: 18px;
        z-index: 1;
        border: 3px #F9F9F9 solid;
    }

        .nav-header .top-header .messages-btn span:empty {
            display: none !important;
        }

*[dir='rtl'] .nav-header .top-header .messages-btn span {
    left: auto;
    right: 18px;
}

*[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 {
    font-size: 11px;
    vertical-align: middle;
    background-color: #FBCFCF;
    color: #D83F3F !important;
    font-weight: 700;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 30px;
    position: absolute;
    top: 6px;
    left: 14px;
    z-index: 1;
    border: 3px #F9F9F9 solid;
}

*[dir='rtl'] .nav-header .top-header .notifications-btn span {
    left: auto;
    right: 14px;
}

.nav-header .top-header .notifications-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-right: 14px;
}

*[dir='rtl'] .nav-header .top-header .language-selector li {
    padding-left: 14px;
    padding-right: 0px;
}

.nav-header .top-header .language-selector li:last-child {
    padding-right: 0px;
}

*[dir='rtl'] .nav-header .top-header .language-selector li:last-child {
    padding-left: 0px;
}

.nav-header .top-header .language-selector li + li {
    border-left: 1px solid #DDDDDD;
    padding-left: 14px;
}

*[dir='rtl'] .nav-header .top-header .language-selector li + li {
    border-left: 0px none transparent;
    border-right: 1px solid #DDDDDD;
    padding-right: 14px;
}

.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: 0px;
        border-left: 1px solid #DDDDDD;
        border-right: 1px solid #DDDDDD;
        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: #F2F2F2;
        }

        .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: 5px;
    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: #D83F3F;
    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: 'Roboto', 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: #212529;
    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: #212529;
    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: 3px;
    font-size: 14px;
    font-weight: 400;
    color: #636B72;
    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: #5DAA80;
}

.vip-user .nav-header .top-header .user-account-dropdown .user-account-menu.version-2 .collapser.warning .collapser-btn .badge {
    background-color: #FFE24B;
}


.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: #636B72;
        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: #212529;
    }

    .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: "Roboto";
}

.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: #636B72;
}

.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: #636B72;
    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: #5DAA80;
    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;
    }

*[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: 3px !important;
    border: 0px none transparent !important;
    color: #FFFFFF !important;
    position: relative;
    text-shadow: none;
    background: none #D83F3F !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: 12px;
                color: #D83F3F;
                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: 2px;
            }

*[dir='rtl'] .nav-header .bottom-header .nav-menu > li > a > b {
    margin-right: 2px;
    margin-left: 0px;
}

.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: 10;
    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: 0px;
    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('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: 0px;
    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: #D83F3F;
        color: #FFFFFF;
        font-weight: 700;
        display: inline-block;
        padding: 2px 6px;
        border-radius: 30px;
        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: 0px;
    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: 5px;
    text-align: center;
    background: none;
    text-shadow: none;
    font-family: Roboto, Arial !important;
}

    .mobile-side-menu .user-account-block .new-btn span {
        font-family: Roboto, 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: #D83F3F;
    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('Images/clipart-appstore-button.svg');
    }

    .mobile-side-menu .download-block .android-btn {
        width: 136px;
        height: 41px;
        background-image: url('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: #FFE24B;
    border-radius: 20px;
    padding: 5px 7px 5px 25px !important;
    color: #212529;
    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: #212529;
    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: #212529;
    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: 3px;
    font-size: 14px;
    font-weight: 400;
    color: #636B72;
    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: #5DAA80;
}

.vip-user .mobile-side-menu.version-2 .collapser.warning .collapser-btn .badge {
    background-color: #FFE24B;
}


.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: #636B72;
    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: "Roboto";
}

.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: #636B72;
}

.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: #636B72;
    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: #5DAA80;
    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;
}
/* #endregion -------------- /Ad details - topbar ------------------------- */
@media (max-width: 991px) {
    .nav-header {
        display: none;
    }

    .nav-header-mobile {
        display: block;
    }

    .mobile-topbar-whitespace {
        display: block;
    }

    .menu-helper-mobile {
        /*display: none;*/
    }

    .mobile-topbar-ad-details {
        display: block;
    }
}

@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: #FFFFFF;
    border-top: 1px solid #DDDDDD;
    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: #F9F9F9;
    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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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\'/></filter></svg>#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: #636B72;
        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: #636B72;
    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: #212529;
        text-transform: uppercase;
        margin-bottom: 10px;
        margin-top: 0px;
        padding: 0px;
        font-family: Roboto, 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: #636B72;
        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: #636B72;
        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: 5px;
    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: #636B72;
        font-weight: 400 !important;
    }

    footer.new-footer .website-switch-area a {
        color: #5DAA80;
        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 {
    width: 100%;
    height: 180px;
    background-color: #fafafa;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    display: none;
}

    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: #212529;
        text-transform: uppercase;
        margin-bottom: 10px;
        margin-top: 0px;
        padding: 0px;
        font-family: Roboto, 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: 5px;
    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.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;
    }

        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: #636B72;
            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: #212529;
    font-weight: 400;
}

    .startpage-slogan p {
        text-transform: none;
        font-size: 12px;
    }
/* #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: 10px;
        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: 0px;
            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: #636B72;
    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: #636B72;
    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: #28A745;
}

.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: #8F8F8F;
}

.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: #636B72;
    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: #636B72;
    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: #8F8F8F;
        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: table;
    table-layout: fixed;
    width: 100%;
    height: calc(100% - 55px);
}

    .chat-modal .chat-content-layout > * {
        display: table-row;
    }

        .chat-modal .chat-content-layout > * > * {
            display: table-cell;
            height: 100%;
            vertical-align: top;
            position: relative;
        }

.chat-modal .chat-conversations-area {
    border-bottom-left-radius: 10px;
    width: 350px;
    background-color: #FFFFFF;
}

*[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 {
    border-left: 1px solid #DDDDDD;
    background-color: #FFFFFF;
    border-right: 1px solid #DDDDDD;
}

.chat-modal .chat-userinfo-area {
    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: 0px;
    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: #636B72;
    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: #212529;
        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: 3px;
            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: 3px;
    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: #212529;
    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: #636B72;
    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: #8F8F8F;
    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: #8F8F8F;
    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: #D83F3F;
    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: #8F8F8F;
        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: #636B72;
    font-size: 36px;
    font-weight: 700;
    margin-top: 70px;
}

.chat-modal .chat-dialog-area .empty-block h5 {
    color: #8F8F8F;
    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: #636B72;
        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: 5px;
    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: 3px;
        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: #8F8F8F;
    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: #8F8F8F;
    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: #212529;
    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: #636B72;
    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: #212529;
        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: #8F8F8F;
        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: #636B72;
    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: #8F8F8F;
    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: #212529;
    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: #212529;
        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: 3px;
    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: #212529;
    margin-top: 8px;
    margin-bottom: 4px;
}

.chat-modal .chat-userinfo-area .user-ads-block .item .price {
    font-size: 14px;
    font-weight: 700;
    color: #636B72;
}

    .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: 3px;
    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: #212529;
    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: #636B72;
    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: #212529;
    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: #636B72;
    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: 3px;
    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: 0px;
    }

    .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: 0px !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: 0px;
    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: #212529;
    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: 3px;
    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: 3px;
    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: 0px;
    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: #212529;
    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: #8F8F8F;
}

*[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: 3px;
    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: #8F8F8F;
        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: #D83F3F;
    }

.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: #212529;
    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: 20px;
    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: #636B72;
}

.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: #636B72;
}

.chat-modal .chat-dialog-area .message-item .status-badge.status-admin {
    background-color: #FFE24B;
    color: #212529;
}

.chat-modal .chat-dialog-area .message-item .message-date {
    display: block;
    padding-left: 65px;
    color: #8F8F8F;
    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: #212529;
    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: 5px;
    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: 5px;
    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: 5px;
    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: #212529;
    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: #8F8F8F;
    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: #5DAA80;
    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: 5px;
    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: 5px;
    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: #212529;
    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: #8F8F8F;
    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: #5DAA80;
    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: #D83F3F;
}

*[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: #8F8F8F;
    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;
}

/* #endregion ------------------/ Dialog content -------------------------- */
/* #region ---------------------- Cargo Message --------------------------- */
.chat-modal .chat-dialog-area .message-item .message-text.system-message {
    color: #636B72;
}

    .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: 5px;
    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: 5px;
    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: #212529;
        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: #8F8F8F;
    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: 5px;
        color: #212529;
        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: #212529;
}

.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: #636B72;
}

.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: #D83F3F;
    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: #636B72;
}

.chat-modal .message-cargo .statuses-list .status-item.on-hold {
    background-color: #FFE24B;
    color: #212529;
}

.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: #212529;
        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: 3px;
    background-color: #EBEBEB;
    padding: 10px;
    margin-bottom: 20px;
}

    .chat-modal .message-cargo .delivery-info-block .delivery-info-panel .date-block {
        color: #636B72;
        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: #212529;
    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: #8F8F8F;
    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: #8F8F8F;
    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) {

    /* #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: #636B72;
        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: #212529;
        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: 0px;
    }
}

@media (max-height: 1100px) {
    .chat-modal .chat-window {
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        border-radius: 0px;
    }
}

@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: #D83F3F;
        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: 3px;
    }

    *[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: 3px;
    }

    *[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: 5px;
    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: #5DAA80;
}

.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('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('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('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: #212529;
    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: #212529;
    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: #212529;
    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("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: 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: #212529;
    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: #212529;
    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('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('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: 0px;
        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: 0px;
    }

    .modal-custom.too-large-image .modal-footer {
        height: 69px;
        border-radius: 0px;
        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('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('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: 0px;
        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: 0px;
    }

    .modal-custom.too-large-file .modal-footer {
        height: 69px;
        border-radius: 0px;
        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;
}

    .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 {
        display: block;
        width: 400px;
        height: 400px;
        margin: 0px auto;
    }

        .under-construction-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 {
            display: block;
            position: absolute;
            border-radius: 50%;
            background-color: #F5F5F5;
        }

        .under-construction-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 {
            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 {
            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 {
            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 {
            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 {
            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 {
            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 {
            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 {
            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 {
            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 {
            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("Images/Errors/clipart-under-construction.svg");
    background-position: center center;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
}

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

.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: 5px;
        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: #636B72;
            font-weight: 700;
            padding-top: 10px;
        }

        .under-construction-page .timer-area .timer-block small {
            font-size: 12px;
            color: #8F8F8F;
            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: #636B72;
            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: 5px;
            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: #636B72;
                font-weight: 700;
                padding-top: 10px;
            }

            .under-construction-page .timer-area .timer-block small {
                font-size: 10px;
                color: #8F8F8F;
                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: #636B72;
            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: 5px;
        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: #636B72;
            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: #636B72;
        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: #636B72;
        font-weight: 700;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .under-construction-page .timer-area .timer-block {
        display: inline-block;
        border-radius: 5px;
        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: #636B72;
        margin: 0px auto 0px auto;
    }

    .under-construction-page .timer-area .timer-divider .dot-1 {
        margin: 20px auto 8px auto;
    }
}
/* #endregion ============================ /Under construction ========================================= */
/* #region =================================== No ad page ============================================== */
.no-ad-page {
    text-align: center;
}

    .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('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('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('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('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('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('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('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;
}

    .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('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('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('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('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('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: #636B72;
    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: 900;
        color: #636B72;
        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: 900;
        color: #5DAA80;
        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: #636B72;
        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: #5DAA80;
    }

    .cargo-promo-page section.howitworks .right-side h3 {
        color: #D83F3F;
    }

    .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: #5DAA80;
}

.cargo-promo-page section.howitworks .right-side .item .badge {
    background-color: #FBCFCF;
    color: #D83F3F;
}

.cargo-promo-page section.howitworks .item p {
    font-size: 18px;
    color: #636B72;
    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: #5DAA80;
    }

    .cargo-promo-page section.benefits .right-side h3 {
        color: #D83F3F;
    }

    .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: #636B72;
    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: #636B72;
    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: #5DAA80;
}

.cargo-promo-page section.benefits .right-side .item .badge {
    background-color: #FBCFCF;
    color: #D83F3F;
}

.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: 20px;
            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: 20px;
        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: 20px;
        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: 20px;
        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: 20px;
        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: 900;
        background-color: transparent;
        text-align: center;
        width: 17%;
        height: 20%;
        top: 60%;
        border-radius: 4px;
        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: 900;
                background-color: transparent;
                text-align: center;
                width: 17%;
                height: 18%;
                top: 61%;
                border-radius: 4px;
                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: 900;
            background-color: transparent;
            text-align: center;
            width: 17%;
            height: 19%;
            top: 60%;
            border-radius: 4px;
            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: #5DAA80;
    }

    .cargo-promo-page section.faqs .right-side h3 {
        color: #D83F3F;
    }


        .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: #8F8F8F;
            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: #212529;
    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: 5px;
    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: 5px;
    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-fit: cover;
    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: #212529;
    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: #5DAA80;
    width: 100%;
    font-size: 17px;
    line-height: 18px;
    font-weight: 900;
    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: #636B72;
    font-size: 8px;
    font-weight: 900;
    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: 5px;
    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-fit: cover;
    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: #212529;
    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: #636B72;
    font-size: 16px;
    font-weight: 900;
    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: 900;
}

.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: 5px;
        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: 5px;
    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-fit: cover;
    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: #212529;
    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: 900;
    text-transform: uppercase;
    text-align: center;
    color: #636B72;
}

    .cargo-widget.widget-300x250.default .description a {
        text-decoration: none;
        font-size: 16px;
        text-transform: uppercase;
        font-weight: 900;
    }

.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: 900;
    color: #636B72;
    text-transform: uppercase;
}

    .cargo-widget.widget-300x250 .header .content .content-side .description a {
        text-decoration: none;
        font-weight: 900;
        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: #636B72;
        font-weight: 900;
        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: 900;
        }

    .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: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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: #5DAA80;
    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('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('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('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('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('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('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('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('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('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: #FFE24B;
    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: #FFE24B;
    border-radius: 20px;
    padding: 5px 7px 5px 25px !important;
    color: #212529;
    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: 5px;
    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: 900;
        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: #636B72;
    }

    .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: 5px;
            border: 0px none transparent;
            vertical-align: middle;
            text-transform: uppercase;
            font-size: 14px;
            font-weight: 500;
            padding: 15px 13px 15px 13px;
            color: #636B72;
        }

            .plan-selection-page .plan-section .plans-selection-tabs .list-group-item-action:hover {
                color: #212529;
                background-color: transparent;
            }

            .plan-selection-page .plan-section .plans-selection-tabs .list-group-item-action.active {
                color: #212529;
                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: #5DAA80;
            padding: 2px 10px 2px 10px;
            border-radius: 20px;
            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: #212529;
        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: 900;
    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: #8F8F8F;
    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: #636B72;
    background-color: #E6F4ED;
    border-radius: 20px;
    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: #636B72;
    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: #8F8F8F !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: #212529;
    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: #212529;
        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 #5DAA80;
        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: #636B72;
}

*[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: #636B72;
    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: 5px;
            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: #212529 !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: #636B72;
        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: #212529;
    }

    .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: 0px;
    }

        .plan-selection-page .plan-section .plans-selection-tabs .list-group-item-action.active {
            background-color: transparent;
            border-bottom: 2px solid #5DAA80;
        }

        .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: 900;
        color: #212529;
        text-transform: uppercase;
        display: block;
        text-align: center;
    }

    .plan-selection-page .faq-section h3 {
        font-size: 24px;
        font-weight: 400;
        color: #636B72;
        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: #636B72;
    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: 900;
        color: #212529;
        text-transform: uppercase;
    }

    .plan-selection-page .content-footer p {
        font-size: 14px;
        color: #636B72;
        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: #212529;
    font-weight: 400;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 5px;
}

.modal-custom.getintouch p {
    color: #636B72;
    margin-bottom: 30px;
}

@media (max-width: 780px) {
    .modal-custom.getintouch .modal-window {
        top: 0%;
        left: 0% !important;
        width: 100%;
        border-radius: 0px;
        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: 0px;
    }

    .modal-custom.getintouch .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 0px;
        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: 0px;
    }

    .modal-custom.getintouch .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 0px;
        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: 0px;
    }

    .modal-custom.getintouch-success .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: 0px;
        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: 0px;
    }

    .modal-custom.getintouch-success .modal-footer {
        height: 69px;
        border-radius: 0px;
        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: #5DAA80;
    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: #212529;
    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: #636B72;
    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: #636B72;
    font-weight: 400;
    padding-bottom: 30px;
    text-align: center;
}

.modal-custom.reminder p {
    display: block;
    color: #636B72;
    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: 0px;
        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: 0px;
    }

    .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: 0px;
        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: 0px;
        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: 0px;
    }

    .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: 0px;
        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: 5px;
    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: #8F8F8F;
        margin-bottom: 20px;
        display: block;
    }

    .notifications-page .notification-item .tariff-table p {
        font-size: 16px;
        font-weight: 700;
        color: #212529;
        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: #FFE24B;
    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: #FFE24B;
    color: #212529;
    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: 900;
    }

        .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: 900;
}

    .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: 900;
}

    .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: 900;
}

    .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: 900;
}

    .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: 900;
}

    .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: 900;
}

    .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: #636B72;
}

.settings-page .settings-tab.account-subscription-info-promo h2 {
    font-size: 36px;
    font-weight: 400;
    color: #5DAA80;
    margin-bottom: 10px;
}

.settings-page .settings-tab.account-subscription-info-promo p {
    font-size: 14px;
    font-weight: 400;
    color: #636B72;
    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: #5DAA80;
            line-height: 1em;
        }

    .settings-page .settings-tab.account-subscription-info-promo .features-table > * > *:last-child {
        font-size: 18px;
        font-weight: 700;
        color: #636B72;
    }

.settings-page .settings-tab.account-subscription-info h3 {
    font-size: 20px;
    font-weight: 400;
    color: #636B72;
    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: #636B72;
        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: #212529;
        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: 10px;
    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: #636B72;
        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 #5DAA80;
    border-radius: 50%;
    background-color: transparent;
    color: #5DAA80;
    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: #636B72;
}

.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: #8F8F8F;
    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: #636B72;
}

.settings-page .settings-tab.account-subscription-info .subscription-panel .counters .days {
    font-size: 36px;
    font-weight: 400;
    color: #636B72;
}

.settings-page .settings-tab.account-subscription-info .subscription-panel .counters .status .text-label.active {
    color: #FFFFFF;
    background-color: #5DAA80;
}

.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: 5px;
    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: #D83F3F;
    }

    .settings-page .settings-tab .notification.warning h5 {
        color: #F6AD3F;
    }

    .settings-page .settings-tab .notification p {
        color: #212529;
    }

    .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: #636B72;
                margin-bottom: 10px;
            }

            .settings-page .settings-tab .autorenew-table > * > * span {
                display: block;
                width: 100%;
                font-size: 14px;
                font-weight: 700;
                color: #212529;
            }

    .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: #5DAA80 !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: #D83F3F;
    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: #FFE24B;
    color: #212529;
    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: 10px;
            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: #636B72;
        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: #212529;
    }

    .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: #636B72;
        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: #636B72;
        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: #212529;
            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('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('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('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: #D83F3F;
                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: 900;
    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('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('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('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: 900;
        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: 900;
            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: 900;
        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: 900;
        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: 900;
        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: #636B72;
    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: 900;
        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: 5px;
    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: 900;
        text-transform: uppercase;
        color: #636B72;
        font-size: 21px;
        margin-bottom: 20px;
    }
/* #endregion Billboard */
/* #region Leaderboard */
.vip-banner.leaderboard {
    width: 728px;
    height: 90px;
    overflow: hidden;
    border-radius: 5px;
    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: #D83F3F;
    text-transform: uppercase;
    font-weight: 900;
    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: #636B72;
    text-transform: uppercase;
    font-weight: 900;
    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: #636B72;
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
}
/* #endregion Leaderboard */
/* #region StickyFooter */
.vip-banner.stickyfooter {
    width: 320px;
    height: 100px;
    overflow: hidden;
    border-radius: 5px;
    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: #636B72;
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
}

/* #endregion StickyBanner */
/* #region MediumRectangle */
.vip-banner.mediumrectangle {
    width: 300px;
    height: 250px;
    overflow: hidden;
    border-radius: 5px;
    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: 900;
        text-transform: uppercase;
        color: #636B72;
        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: 5px;
    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: #D83F3F;
        text-transform: uppercase;
        font-weight: 900;
        font-size: 42px;
        top: 28px;
        left: 0px;
        width: 100%;
        text-align: center;
    }

    .vip-banner.skyscraper .description {
        display: block;
        position: absolute;
        z-index: 4;
        color: #636B72;
        text-transform: uppercase;
        font-weight: 900;
        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: 900;
                padding: 0px 20px 0px 20px;
                text-transform: uppercase;
                color: #636B72;
                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: #212529;
        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: #212529;
        }

        .app-download-page .features p {
            color: #8F8F8F;
            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('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('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('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: #5DAA80;
    font-weight: 900;
    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: 10px;
    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: #5DAA80;
    margin-inline-end: 5px;
}

.app-download-page .section-start .btn-android {
    background-color: #212529;
}


    .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('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('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('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: #212529;
}

.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: #636B72;
        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: #8F8F8F;
        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: #8F8F8F;
    padding-left: 0px;
    padding-right: 30px;
}

.longDescription strong, .shortDescription strong {
    font-weight: 700;
    color: #212529;
}


/* #endregion ================================= /SEO Blocks ============================================ */
/* #region =================================== Stores Listing ========================================== */
.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: 3px;
        padding: 4px 10px 4px 10px;
        text-decoration: none;
        background-color: #E6F4ED;
        font-weight: 400 !important;
        color: #212529;
        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;
}

@media (max-width: 575px) {
    .store-search .hashtags-area {
        display: none;
    }
}

/* #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: 3px;
        padding: 6px 12px 6px 12px;
        text-decoration: none;
        background-color: #E6F4ED;
        font-weight: 400 !important;
        color: #212529;
        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: 3px;
        padding: 4px 10px 4px 10px;
        text-decoration: none;
        background-color: #E6F4ED;
        font-weight: 400 !important;
        color: #212529;
        cursor: pointer;
        font-size: 12px !important;
        vertical-align: top;
    }

@media (max-width: 575px) {
    .search-result .hashtags-area {
        display: none;
    }
}

/* #endregion ==================================== /Store ============================================== */
/* #region ======================================== Blog =============================================== */
.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: 3px;
        padding: 6px 12px 6px 12px;
        text-decoration: none;
        background-color: #E6F4ED;
        font-weight: 400 !important;
        color: #212529;
        cursor: pointer;
        font-size: 14px;
        vertical-align: top;
    }
/* #endregion ==================================== /Blog =============================================== */
/* #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: 5px;
            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%;
    }

*[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: 5px;
    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: 5px;
        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: 8px;
        background-color: #D83F3F;
        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;
    height: 155px;
}

    .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: 5px;
        }

        .img-shimmer-container.store-list-item .responsive-shimmer-block.hidden + .visually-hidden-shimmer img {
            border-radius: 0px;
        }

    .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: 5px;
        overflow: hidden;
    }

    .img-shimmer-container.store-goodsitem-photo .responsive-shimmer-block.hidden + .visually-hidden-shimmer {
        border-radius: 0px;
        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: 5px;
    background: #e9e9e9;
}

.responsive-shimmer-block.storeserch-button-shimmer .content {
    display: block;
    width: 100%;
    height: 35px;
    border-radius: 5px;
    background: #5DAA80;
}

.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: 5px;
        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: 5px;
    background: #e9e9e9;
}

.responsive-shimmer-block.shimmer-storesearch .content.textboxes b {
    display: inline-block;
    height: 35px;
    border-radius: 5px;
    background: #5DAA80;
}

.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: 5px;
        background: #e9e9e9;
    }

.responsive-shimmer-block.shimmer-storesearch-header .content {
    display: flex;
    width: 100%;
    align-items: center;
    background-color: #fafafa;
    border-radius: 5px;
    padding-inline: 10px;
    height: 35px;
}

    .responsive-shimmer-block.shimmer-storesearch-header .content span {
        display: inline-block;
        width: 140px;
        height: 20px;
        background: #e9e9e9;
        border-radius: 5px;
    }

.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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
        background: #e9e9e9;
        margin-block-end: 10px;
    }

    .responsive-shimmer-block.shimmer-storedetails-leftside .slogan {
        display: block;
        width: 70%;
        height: 20px;
        border-radius: 5px;
        background: #e9e9e9;
        margin-block-end: 30px;
    }

    .responsive-shimmer-block.shimmer-storedetails-leftside .description-item {
        display: block;
        height: 10px;
        border-radius: 5px;
        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: 5px;
        background: #e9e9e9;
        margin-bottom: 60px;
    }

    .responsive-shimmer-block.shimmer-storedetails-rightside .phone {
        display: block;
        margin: 0px auto;
        width: 60%;
        height: 20px;
        border-radius: 5px;
        background: #e9e9e9;
        margin-bottom: 20px;
    }

    .responsive-shimmer-block.shimmer-storedetails-rightside .email {
        display: block;
        width: 100%;
        height: 35px;
        border-radius: 5px;
        background: #5DAA80;
        margin-bottom: 20px;
    }

    .responsive-shimmer-block.shimmer-storedetails-rightside .description {
        display: block;
        height: 15px;
        border-radius: 5px;
        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: 5px;
        }

    .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: 5px;
            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: 5px;
        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: 5px;
    }

    .responsive-shimmer-block.shimmer-pagination small {
        display: inline-block;
        width: 30px;
        height: 30px;
        background: #e9e9e9;
        border-radius: 5px;
    }

@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 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: 5px;
        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: 5px;
                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: 5px;
                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: 8px;
                background-color: #D83F3F;
                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: 3px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    background: #5DAA80;
}

.mobile-shimmer-block .search-button {
    display: block;
    width: 100%;
    height: 50px;
    border-radius: 3px;
    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: 5px;
            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: 5px;
            background-color: #5DAA80;
            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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
    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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
    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: 5px;
        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: 5px;
            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: 5px;
            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: 5px;
            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: 5px;
            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: 5px;
    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: 5px;
        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: 5px;
    overflow: hidden;
}

.img-shimmer-container .shimmer-block.hidden + .visually-hidden-shimmer {
    border-radius: 0px;
    overflow: visible;
}

.shimmer-block.search-goodsitem-photo-shimmer .content {
    display: block;
    width: 212px;
    height: 162px;
    background: #e9e9e9;
    border-radius: 5px;
}

.shimmer-block.search-goodsitem-logo-shimmer .content {
    display: block;
    width: 130px;
    height: 100px;
    border-radius: 5px;
    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: 5px;
            background-color: #E9E9E9;
        }

        .shimmer-block .goods-listing-block .gallery-item .title-1 {
            display: block;
            width: 100%;
            height: 16px;
            border-radius: 5px;
            background-color: #E9E9E9;
            margin-block-start: 16px;
        }

        .shimmer-block .goods-listing-block .gallery-item .title-2 {
            display: block;
            width: 30%;
            height: 16px;
            border-radius: 5px;
            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: 5px;
            margin-bottom: 10px;
        }

        .shimmer-block .search-gallery-block .gallery-item .title-1 {
            width: 100%;
            height: 20px;
            background-color: #E9E9E9;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .shimmer-block .search-gallery-block .gallery-item .title-2 {
            width: 60%;
            height: 20px;
            background-color: #E9E9E9;
            border-radius: 5px;
        }


/* #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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
        background: #E9E9E9;
        margin-bottom: 20px;
    }

    .shimmer-block .search-goods-item .title-2 {
        width: 80%;
        height: 20px;
        border-radius: 5px;
        background: #E9E9E9;
        margin-bottom: 20px;
    }

    .shimmer-block .search-goods-item .title-3 {
        width: 40%;
        height: 20px;
        border-radius: 5px;
        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: 5px;
        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: 5px;
        background: #E9E9E9;
        margin-bottom: 20px;
    }

    .mobile-shimmer-block .search-goods-item .title-2 {
        width: 80%;
        height: 20px;
        border-radius: 5px;
        background: #E9E9E9;
        margin-bottom: 20px;
    }

    .mobile-shimmer-block .search-goods-item .title-3 {
        width: 40%;
        height: 20px;
        border-radius: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
        background-color: #5DAA80;
        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: 5px;
    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: 5px;
    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: 5px;
    background-color: #E9E9E9;
    margin-block-end: 16px;
}

.shimmer-block .store-info-block .left-side .title-2 {
    display: block;
    width: 60%;
    height: 16px;
    border-radius: 5px;
    background-color: #E9E9E9;
    margin-block-end: 16px;
}

.shimmer-block .store-info-block .left-side .title-3 {
    display: block;
    width: 30%;
    height: 16px;
    border-radius: 5px;
    background-color: #E9E9E9;
    margin-block-end: 16px;
}

.shimmer-block .store-info-block .right-side .image-block {
    display: block;
    width: 100%;
    height: 200px;
    border-radius: 5px;
    background-color: #E9E9E9;
    margin-block-end: 16px;
}

.shimmer-block .store-info-block .right-side .btn {
    display: block;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    background-color: #5DAA80;
    margin-block-end: 16px;
}

.shimmer-block .store-info-block .right-side .title-1 {
    display: block;
    width: 70%;
    height: 16px;
    border-radius: 5px;
    background-color: #E9E9E9;
    margin-block-end: 16px;
}

.shimmer-block .store-info-block .right-side .title-2 {
    display: block;
    width: 40%;
    height: 16px;
    border-radius: 5px;
    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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
    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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
            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: 5px;
            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: 5px;
            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: 5px;
        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: 5px;
    background-color: #E9E9E9;
    vertical-align: middle;
    align-self: center;
}

.responsive-shimmer-block.details-mobile-seller-info-regularuser .content {
    display: flex;
    border-radius: 5px;
    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: 5px;
            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: 5px;
    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: 5px;
        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: #5DAA80;
        }

.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: 5px;
            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: 5px;
    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: 5px;
        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: 5px;
        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: 5px;
        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: #5DAA80;
            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: #5DAA80;
            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: #5DAA80;
        }

.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: 5px;
        background-color: #5DAA80;
        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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
    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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
        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: 5px;
    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: #5DAA80;
    }

@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: 5px;
        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: 5px;
    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: 5px;
            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: 5px;
    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: 5px;
        background-color: #5DAA80;
    }

    .responsive-shimmer-block.details-delivery-block .content > span:nth-child(2) {
        display: block;
        width: 70%;
        height: 15px;
        border-radius: 5px;
        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: 5px;
            background-color: #5DAA80;
        }

        .responsive-shimmer-block.details-delivery-block .content > div > span:last-child {
            display: inline-block;
            width: 70%;
            height: 15px;
            border-radius: 5px;
            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: 5px;
        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: 5px;
        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: 5px;
        }

        .responsive-shimmer-block.details-address-area .content div span:last-child {
            display: block;
            width: calc(100% - 70px);
            height: 15px;
            background-color: #E9E9E9;
            border-radius: 5px;
        }

    .responsive-shimmer-block.details-address-area .content span:last-child {
        display: block;
        width: 100%;
        height: 200px;
        border-radius: 5px;
        background-color: #E9E9E9;
    }

@media (max-width: 991px) {
    .responsive-shimmer-block.details-address-area {
        display: none;
    }
}


/* #endregion --------------- /Ad Details ----------------------- */
/* #region ====================================== Clipart ============================================== */
/* #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 ----------- 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 --------- */

/* #endregion ================================== /Clipart ============================================== */