@import url('style.css');
@import url('dialog-edit.css');
@import url('tabs.css');
/*@import url('loader.css');*/
@import url('fabric-icons.css');
/*@import url('font-awesome.min.css');*/
@import url('../js/slick/slick.css');
/*@import url('../js/slick/slick-theme.css');


@import url('condpro-style.css');*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/akrobat');

:root {
    /*Set Colors*/


    --dl-green-color: #67ecba !important;

    --font-icon-MS: 16px/1 FabricMDL2Icons;
    
    --color-white: #ffffff;
    --color-black: #000000;;
    
    --selected-item: rgba(95, 210, 85, 0.2);
    
    
    --themePrimary: #f05139; /*f15139*/
    --themeSecondary: #f26650;
    --themeDark: #b63e2c; /*c23d00*/

    --themeAccent: #114c62; /*0a3548*/
    --themeAccentSecondary: #1f5d74;
    --themeAccentDark: #0d394a;

    --neutralDark: #201f1e;
    --neutralPrimary: #323130;
    --neutralSecondary: #a19f9d;

    --neutralLight: #eaeaea;
    --neutralLighter: #f4f4f4;
    --neutralLighterAlt: #fafafa;



    --link: #464646;
    --link-hover: #B79B53;
    
    /*--app-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;*/
    --app-font: Roboto, 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --heading-font: 'Akrobat', sans-serif;

    --app-weight-200: 200;
    --app-weight-300: 300;
    --app-weight-400: 400;
    --app-weight-500: 500;
    --app-weight-600: 600;



    --fontSize-42: 42px/1.24 var(--app-font); 
    --fontSize-32: 32px/1.25 var(--app-font); 
    --fontSize-28: 28px/1.3 var(--app-font); 
    --fontSize-24: 24px/1.34 var(--app-font); 
    --fontSize-20: 20px/1.4 var(--app-font); 
    --fontSize-18: 18px/1.334 var(--app-font); 
    --fontSize-16: 16px/1.4 var(--app-font); 
    --fontSize-14: 14px/1.45 var(--app-font);  
    --fontSize-12: 12px/1.34 var(--app-font); 

    --button-hover: #B3AFA5;

    --padding: 3rem;

}

/*
html,
body {
	padding: 0;
	margin: 0;
	color: var(--neutralPrimary);
	font-family: var(--app-font);
	font-size: var(--app-size-16);
	font-weight: var(--app-weight-400);
    letter-spacing: 0.1rem;
    line-height: normal;
}

.hide {
    display: none !important;
}

*/

/**
 * Vertical rhythm by Syncope
 * http://nowodzinski.pl/syncope
 * 
 * Scale: Fourth (1.333)
 */

 html, body {
	padding: 0;
	margin: 0;
	color: var(--neutralDark);
    font: 1em/1.6 var(--app-font) ;
    /*font-family: var(--app-font);*/
	font-weight: var(--app-weight-400);
    /*letter-spacing: 0.1em;*/

	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
}

* {
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, p, li {
	font-weight: inherit;
    margin-top: 0;
}

h1 {
	font: var(--fontSize-42);
	padding-top: 0.342em;
	margin-bottom: 0.342em;
}

h2 {
	font: var(--fontSize-32);
	padding-top: 0.571em;
	margin-bottom: 0.357em;
}

h3 {
	font: var(--fontSize-28);
	padding-top: 0.286em;
	margin-bottom: 0.952em;
}

h4 {
	font: var(--fontSize-24);
	padding-top: 0.500em;
	margin-bottom: 1.13em;
}

h5 {
    font: var(--fontSize-20);
    padding-top: 0.5em;
    margin-bottom: 1.13em;
}


p, li:not(li.k-tool-group) {
	font: var(--fontSize-16);
	padding-top: 0.500em;
	margin-bottom: 1.13em;
}

#processevo-application {
    display: grid;
    grid-template-rows: max-content auto max-content;
    grid-template-columns: repeat(12, 1fr);
    height: initial;
    justify-content: initial;
    align-content: initial;
    justify-items: initial;
    align-items: initial;
}
#main-container.main-is-fullwidth {
    grid-row: unset;
    /*min-height: 768px;*/
    align-content: start;
}

.text-bold {
    font-weight: var(--app-weight-500);
}

/* BOF Visual gird helper*/

/* Uncommen only for development!

#processevo-application {
    padding: 0 0;
    background: linear-gradient(to bottom, rgba( 32,160,255,.35 ) 1px, transparent 1px),
                linear-gradient(to right, rgba(235, 8, 8, 0.35) 1px, transparent 1px);
    
    background-size: 100% 8px;
    background-size: calc( 100% / 12 ) 1.5em;
}

#processevo-application * {
    background: transparent;
    background-color: transparent !important;
}

section, section *  {
    outline: 1px solid green;
}
 */

/* EOF Visual gird */

img:not(.k-layer > img) {
    vertical-align: top;
    max-width: 100%;
    border: 0;
}

.k-tool-group {
    .k-picker-wrap {
        display: grid;
        gap: 4px;
        grid-template-columns: max-content max-content;
        height: 32px;
        align-items: center;
    }
    .k-picker-wrap .k-select {
        border-left: none !important;
        .k-icon::before {
            margin: 0;
        }
    }

    .k-icon::before {
        margin: 2px 2px 2px 4px;
    }
}


#workspace-container {
    row-gap: unset;
}

#workspace-container > section {
    display: grid;
    row-gap: 1.5em;
    margin: 0 !important;
    padding-top: 3em;
    padding-bottom: 3em;
}

/*
#workspace-container > section {
    z-index:99;
    background-color: var(--color-white);
}

#workspace-container > section#hero-board,
#workspace-container > section#expected {
    position: sticky;
    top: 6em;
    z-index:0;
    background-color: transparent;
}
*/

#workspace-container > section > h1.section-title,
#workspace-container > section > h2.section-title {
    text-align: center;
    color: var(--neutralDark);
}

#promo-board {
    display: grid;
    row-gap: 1.5em;
}


.section__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.section__inner h2 > a,
h1.section-title > a {
    text-decoration: none;
    color: inherit;
}

.section__inner h2 > a:hover,
h1.section-title > a:hover {
    color: var(--themeDark);
}

.section__inner--img-text {
    justify-items: start;
    text-align: left;
}

.section__inner--text-img {
    justify-items: end;
    text-align: right;
}

.section__inner--img-text > *:not(div.img) {
    margin-left: 1.5rem;
    margin-right: 3rem;
    grid-column: 2/3;
}

.section__inner--text-img > *:not(div.img) {
    margin-left: 3rem;
    margin-right: 1.5rem;
    grid-column: 1/2;
}


.section-inverse {
    background: var(--themePrimary);
}

.section-inverse .slick-prev:before, .slick-next:before {}

.section-inverse .prd-cadr * {
    color: var(--color-white) !important;
}

.section-inverse .section-title,
.section-inverse .section-title > a,
.section-inverse .section-sub-title > a,
.section-inverse * {
    color: var(--color-white);
}


.section-inverse .section-title > a:hover,
.section-inverse .section-sub-title > a:hover {
    color: var(--themeDark);
}

.k-mediaplayer-toolbar {
    background: transparent;
}
.k-button:not(.k-mediaplayer-toolbar .k-button) {

    border-width: 0px !important;
    
    font-size: 1em;
    font-weight: var(--app-weight-500);
    line-height: 1.50em !important;
    /*text-transform: uppercase;*/
    letter-spacing: calc( (50 / 1000 ) * 1em);
    border-radius: 4px !important;
    padding: 0.438em  0.85em 0.438em 0.85em !important;
    margin-bottom: 0.622em;
}


.section__inner--img-text .img {
    grid-column: 1/2;
    grid-row: 1/5;
    width: 100%;
    height: 100%;

    
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.section__inner--text-img .img {
    grid-column: 2/3;
    grid-row: 1/5;
    width: 100%;
    height: 100%;
    
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.img-1 {background-image: url(../images/icons/greece.jpg);}
.img-2 {background-image: url(../images/icons/home-img-02.webp);}
.img-3 {background-image: url(../images/icons/home-img-03.webp);}

    
.section__inner--product-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr; /*repeat( auto-fill, minmax(180px, 1fr) )*/
    column-gap: 1.5rem;
    row-gap: 0.5rem;
    padding: 0 3rem;
}
.product-grid__card {
    text-align: center;
    word-break: break-word;
}
.product-grid__card a {
    text-decoration: none;
    display: grid;
    grid-template-columns: 32px auto;
    column-gap: 12px;
    color: var(--color-white);
    background-color: var(--themePrimary);
    border-radius: 4px;
}

.card__img,
.product-grid__card .prd-name {
    cursor: pointer;
    font-weight: 500 !important;
    font: var(--fontSize-16);
}

.product-grid__card a:hover {
    color: var(--color-white) ;
    background-color: var(--themeDark);

}

.card__img {
    width: 100%;
    aspect-ratio: 1/1;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat; 
    background-color: var(--neutralDark);
    border-radius: 4px;
    > img {
        filter: invert(1);
        padding: 8px;
    }

}

.card__img--img-1 {background-image: url(../images/icons/dest_bg.jpg);}
.card__img--img-2 {background-image: url(../images/icons/dest_gr.jpg);}
.card__img--img-3 {background-image: url(../images/icons/dest_tr_01.jpg);}
.card__img--img-4 {background-image: url(../images/icons/dest_it.jpg);}
.card__img--img-5 {background-image: url(../images/icons/dest_sp.jpg);}
.card__img--img-6 {background-image: url(../images/icons/dest_fr.jpg);}
.card__img--img-7 {background-image: url(../images/icons/dest_isl.jpg);}
.card__img--img-8 {background-image: url(../images/icons/dest_other.jpg);}

.section-header-logo {background-image: url(../images/ILN-logo.png); width: 140px;
    background-size: contain;
    background-repeat: no-repeat;}


.app-main-nav--mobile,
.app-main-nav--mobile-content {
    display: none;
}
.app-main-nav--mobile-content a {
    display: block;
    margin-bottom: 8px;
    /*text-transform: uppercase;*/
}

.app-main-nav--mobile .burger-button {
    /*
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    */
    padding: 0 !important;
    cursor: pointer;
    font-weight: var(--app-weight-500);

}

.app-main-nav--mobile .burger-button .ms-Icon {
    font-weight: 700 !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0px 0px !important;
    font-size: 18px !important;
    padding: 7px 3px !important;
}

.burger-button:hover,
.burger-button:hover > .ms-Icon {
    color: var(--color-white) !important;
    background-color: var(--themeDark);
}

.donation-btn-hidden {
    display: none;
}

@media only screen and (max-width: 479px)   {
    :root {
        --padding: 1.5rem;
    }
    #processevo-application {
        grid-template-columns: repeat(4, 1fr);
    }
    #team {
        .section-4-col {
            grid-template-columns: 1fr !important;
        }
    }

/*    
    #header {
        grid-template-areas:
                "app-header-contact-line app-header-contact-line"
                "app-header-info app-header-info"
                "app-header-nav app-acions" !important;
        grid-template-columns: min-content auto !important;
        z-index: 9999;
    }

    #app-header-info {
        padding: 0 !important;
        justify-content: center;
    }
    #app-header-nav {
        padding-left: var(--padding) !important;
    }
    .app-main-nav {
        justify-content: start !important;
        display: none !important;
    }
    .app-main-nav--mobile {
        display: block;
        position: relative;
        width: max-content;
    }
    
    .app-main-nav--mobile-content.m-nav--show  {
        position: absolute;
        z-index: 999999;
        background: var(--color-white);
        padding: 2em;
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        gap: 1em;
        width: 16em;
    }
    .burger-button.m-button--close > i.ms-Icon--GlobalNavButton::before {
        content: "\E8BB";
    }
*/
    .app-overlay-panel-content__cart {
        grid-template-columns: 100px 1fr !important;
    }
    .cart-pannel-image {
        width: 100px !important;
        height: 100px !important;
    }

    #overlay-panel-cart {
        max-width: 340px;
    }
    .cart-pannel-prd-info {
        padding: 0px 0px 8px 0px !important;
    }
    .cart-pannel-actions.colSpan-8 {
        grid-column: 1/3 !important;
        display: grid;
    }
    .pannel-prd-price {
        margin-top: 0px !important;
    }
    .app-overlay-panel-content__cart > .colSpan-4 {
        display: none;
    }


    #overlay-panel-cart,
    #overlay-panel-search {
        top: 3.75em;
    }

    #overlay-panel-search {
        width: calc(100vw - 3rem) !important;
        right: 1rem !important;
    }

    .section-tags .section-description,
    .section-tabs .tab-content,
    #product-listing .section-title,
    #product-listing .section-description,
    #profile,
    #contact,
    .order,
    .categories {
        padding: var(--padding) var(--padding) !important;
    }

    [class*="breadcrumbs"] {
        padding: 0 var(--padding) !important;
    }
    #category-listing,
    #news .containerGrid {
        grid-template-columns: unset;
        row-gap: 48px;
    }
    #news .containerGrid .colSpan-4 {
        grid-auto-flow: column;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 144px;
        aspect-ratio: unset;
    }
    #category-listing .cat-card {
        grid-template-rows: unset;
        grid-template-columns: 140px auto;
        column-gap: 48px;
        align-items: center;
    }
    #category-list,  #category-listing .cat-name {
        justify-self: start !important;
        text-align: unset;
    }
    .products-listing {
        padding: 0px var(--padding) var(--padding) !important;
    }
    .product-listing-filters {
        display: grid;
        grid-template-columns: 1fr;
        padding: 0px var(--padding) var(--padding) !important;
    }
    .filters-header {
        grid-row: 1;
        justify-content: unset !important;
        width: auto !important;
    }
    .sort {
        grid-row: 4;
        margin-top: 0px;
        margin-bottom: 24px
    }
    .sort-type {
        grid-row: 3;
        margin-top: 24px;
        margin-bottom: 24px
    }
    .filters {
        grid-row: 2;
    }
    
    .product-view {
        padding: 0px var(--padding) 0 !important; 
        grid-template-columns: minmax(255px,1fr) 1fr !important;
        gap: initial !important;
    }
    #prd-image-scroller {
        position: initial !important;
    }
    #prd-image-scroller,
    .product-view > .prd-title {
        grid-column: 1/-1 !important;
    }
    .product-view > .prd-attributes {
        grid-column: 1/-1 !important;
        grid-row: 2/3 !important;
        margin: 0 0 var(--padding) 0 !important; 
    }
    .product-view > .prd-description {
        grid-column: 1/-1 !important;
        grid-row: 3/4 !important;
    }

    .k-scrollview.vertical {
        /*
        height: 80px !important;
        left: -247px !important;
        */
        background: transparent;
    }
    .vertical ul.k-scrollview-wrap > li > .img-wrapper > div {
        grid-template-rows: 80px !important;
    }
    div.k-scrollview.vertical ul.k-scrollview-wrap > li {
        width: 100%! important;
    }
    .vertical .scroller-image {
        height: 80px !important;
        max-width: 80px !important;
    }
    
    #contact {
        column-gap: unset !important;
    }
    .map-search,
    .map-view {
        margin-bottom: var(--padding);
    }
    .store-image {
        aspect-ratio: 2/1;
    }
    .contact-form > .containerGrid .colSpan-6 {
        grid-column: span 12 !important;
    }

    .odrer-form:nth-child(1) > .containerGrid.colGap-24,
    .order > .containerGrid.colGap-48 {
        column-gap: unset !important;
    }
    .odrer-form:nth-child(1) > .containerGrid.colGap-24 .colSpan-6,
    .odrer-form {
        grid-column: span 12 !important;
    }

    .odrer-form:nth-child(2) {
        /*grid-row: 1;*/
        margin-bottom: 48px;
    }

    #document-products .odrer-form,
    #order-view .odrer-form{
        grid-row: initial;
    }

    .cta-home {
        #hero-slider {
            min-height: 100% !important;
        }
    }
    
    .cta-home .hero-cta {


        padding: 0rem !important;
        grid-template-rows: max-content !important;

        .cta-image {
            display: none
        }

    }
    .cta-home h1.cta-title {
        font-size: 250%;
    }
    .cta-home h3.cta-sub-title {
        font-size: 135%;
    }

    .fieldlist li.colSpan-3 {
        grid-column: span 6;
        display: grid;
        grid-auto-flow: column;
        justify-content: start;
        align-items: center;
        column-gap: 8px;
    }
    
    .user-profile-form h3 {
        font-weight: var(--app-weight-500);
        margin-bottom: 0;
    }

    .user-profile-form > .containerGrid [class^="colSpan-"],
    .odrer-form  > .containerGrid [class^="colSpan-"] {
        grid-column: span 12;
        column-gap: unset;
    }

    .k-widget.k-window.k-dialog {
        min-width: calc(100vw - 48px) !important;
        width: min-content !important;
    }
    .section__inner--product-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--padding) !important;
        padding: 0 var(--padding) 0 var(--padding) !important;
    }

    .questionnaire-hero-board {
        padding: 24px !important;
        margin: 24px !important;
    }
    .questionnaire-card {
        grid-auto-flow: row !important;
        grid-template-columns: unset !important;
        row-gap: 36px;
        width: auto !important;
        margin: 0 24px !important;
    }

    .reviews {
        grid-template-columns: 1fr !important;
        padding: 0 24px 0px 24px !important;
    }

    .section-title {
        font-size: 220%;
        padding-left: 24px !important;
        padding-right: 24px !important;
       /* width: 100vw;*/
    }
    .section-sub-title {
        font-size: 170%;
    }

    /*Temporary hide scroll arrows */
    #scrollViewVertical .k-scrollview-elements {
        display: none !important;
    }
}

@media only screen and (min-width: 480px) and (max-width: 639px)   {
    :root {
        --padding: 1.5rem
    }
    #processevo-application {
        grid-template-columns: repeat(4, 1fr);
    }
    /*
    #header {
        grid-template-areas:
                "app-header-contact-line app-header-contact-line"
                "app-header-info app-header-info"
                "app-header-nav app-acions" !important;
        grid-template-columns: 1fr 1fr !important;
        z-index: 9999;
    }

    #app-header-info {
        padding: 0 !important;
        justify-content: center;
    }
    #app-header-nav {
        padding-left: var(--padding) !important;
    }
    .app-main-nav {
        justify-content: start !important;
        display: none !important;
    }
    .app-main-nav--mobile {
        display: block;
        position: relative;
        width: max-content;
    }
    
    .app-main-nav--mobile-content.m-nav--show {
        position: absolute;
        z-index: 999;
        background: var(--color-white);
        padding: 2em;
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        gap: 1em;
        width: 16em;
    }
    .burger-button.m-button--close > i.ms-Icon--GlobalNavButton::before {
        content: "\E8BB";
    }
    */
    #overlay-panel-cart,
    #overlay-panel-search {
        top: 13.5em;
    }

    .products-scroller > div,
    .section__inner--product-grid,
    #product-listing .section-title,
    #product-listing .section-description,
    #profile,
    #contact,
    .order,
    .categories {
        padding: var(--padding) var(--padding) !important;
    }
    [class*="breadcrumbs"] {
        padding: 0 24px 0 24px;
    }

    #category-listing,
    #news .containerGrid {  
        grid-template-columns: unset;
        row-gap: 48px;
    }
    #news .containerGrid .colSpan-4 {
        grid-auto-flow: column;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 144px;
        aspect-ratio: unset;
    }
    #category-listing .cat-card {
        grid-template-rows: unset;
        grid-template-columns: minmax(auto ,140px) auto;
        column-gap: 24px;
        align-items: center;
    }
    #category-list,  #category-listing .cat-name{
        justify-self: start !important;
        text-align: unset;
    }
    .products-listing {
        grid-template-columns: 1fr 1fr;
        padding: 0px var(--padding) var(--padding) !important;
    }
    .product-listing-filters {
        display: grid;
        grid-template-columns: 1fr;
        padding: 0px var(--padding) var(--padding) !important;
    }
    .filters-header {
        grid-row: 1;
        justify-content: unset !important;
        width: auto !important;
    }

    .sort {
        grid-row: 4;
        margin-top: 0px;
        margin-bottom: 24px
    }
    .sort-type {
        grid-row: 3;
        margin-top: 24px;
        margin-bottom: 24px
    }
    .filters {
        grid-row: 2;
    }
    .product-view {
        padding: 0px var(--padding) 0 !important;
    }
    #prd-image-scroller {
        position: initial !important;
    }
    #prd-image-scroller,
    .product-view > .prd-title {
        grid-column: 1/-1 !important;
    }
    .product-view > .prd-attributes {
        grid-column: 1/-1 !important;
        grid-row: 2/3 !important;
        margin: 0px 0px var(--padding) 0px !important; 
    }
    .product-view > .prd-description {
        grid-column: 1/-1 !important;
        grid-row: 3/4 !important;
    }

    .k-scrollview.vertical {
        /*
        height: 80px !important;
        left: -247px !important;
        */
        background: transparent;
    }
    .vertical ul.k-scrollview-wrap > li > .img-wrapper > div {
        grid-template-rows: 80px !important;
    }
    div.k-scrollview.vertical ul.k-scrollview-wrap > li {
        width: 100%! important;
    }
    .vertical .scroller-image {
        height: 80px !important;
        max-width: 80px !important;
    }

    #contact {
        column-gap: unset !important;
    }
    .map-search,
    .map-view {
        margin-bottom: 24px;
    }
    .store-image {
        aspect-ratio: 2/1;
    }
    .contact-form > .containerGrid .colSpan-6 {
        grid-column: span 12 !important;
    }
    
    .odrer-form:nth-child(1) > .containerGrid.colGap-24,
    .order > .containerGrid.colGap-48 {
        column-gap: unset !important;
    }
    .odrer-form:nth-child(1) > .containerGrid.colGap-24 .colSpan-6,
    .odrer-form {
        grid-column: span 12 !important;
    }

    .odrer-form > .containerGrid > .colSpan-6 {
        grid-column: span 12 !important;
    }

    .odrer-form:nth-child(2) {
        /*grid-row: 1;*/
        margin-bottom: 48px;
    }

    #document-products .odrer-form,
    #order-view .odrer-form{
        grid-row: initial;
    }


    .fieldlist li.colSpan-3 {
        grid-column: span 6;
        display: grid;
        grid-auto-flow: column;
        justify-content: start;
        align-items: center;
        column-gap: 8px;
    }

    .user-profile-form h3 {
        font-weight: var(--app-weight-500);
        margin-bottom: 0;
    }

    .user-profile-form > .containerGrid [class^="colSpan-"]:not(.colSpan-12) {
        grid-column: span 6;
    }

    .k-widget.k-window.k-dialog {
        min-width: calc(100vw - 96px) !important;
        width: min-content !important;
    }

    .questionnaire-card {
        grid-auto-flow: row !important;
        grid-template-columns: unset !important;
        row-gap: 36px;
        width: auto !important;
        margin: 0 48px !important;
    }

    /*Temporary hide scroll arrows */
    #scrollViewVertical .k-scrollview-elements {
        display: none !important;
    }

    .reviews {
        grid-template-columns: 1fr !important;
        padding: 0 48px 0px 48px !important;
    }

}

@media only screen and (min-width: 640px) and (max-width: 767px)   {
    #processevo-application {
        grid-template-columns: repeat(8, 1fr);
    }
    /*
    #header {
        grid-template-areas:
                "app-header-contact-line app-header-contact-line"
                "app-header-info app-header-info"
                "app-header-nav app-acions" !important;
        grid-template-columns: 1fr 1fr !important;
        z-index: 9999;
    }
    #app-header-info {
        padding: 0 !important;
        justify-content: center;
    }
    #app-header-nav {
        padding-left: 48px !important;
    }
    .app-main-nav {
        justify-content: start !important;
        display: none !important;
    }
    */


    #overlay-panel-cart,
    #overlay-panel-search {
        top: 13.5em;
    }
    #profile,
    #contact,
    .order,
    .categories,
    [class*="breadcrumbs"] {
        padding: 0 48px 0 48px;
    }
    #category-listing {
        grid-template-columns: unset;
        row-gap: 48px;
    }
    #category-listing .cat-card {
        grid-template-rows: unset;
        grid-template-columns: minmax(auto ,140px) auto;
        column-gap: 24px;
        align-items: center;
    }
    #category-list, #category-listing .cat-name {
        justify-self: start !important;
        text-align: unset;
    }
    .products-listing {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .product-listing-filters {
        display: grid;
        grid-template-columns: auto  170px;
        padding: 0px 72px 48px;
    }
    .product-view {
        padding: 0px 48px 0 !important;
    }
    #prd-image-scroller {
        position: initial !important;
    }
    #prd-image-scroller,
    .product-view > .prd-title {
        grid-column: 1/-1 !important;
    }
    .product-view > .prd-attributes {
        grid-column: 1/-1 !important;
        grid-row: 2/3 !important;
        margin: 0px 0px 24px 0px !important; 
    }
    .product-view > .prd-description {
        grid-column: 1/-1 !important;
        grid-row: 3/4 !important;
    }

    #contact {
        column-gap: unset !important;
    }
    .map-search,
    .map-view {
        margin-bottom: 24px;
    }
    .store-image {
        aspect-ratio: 2/1;
    }

    .order > .containerGrid.colGap-48 {
        column-gap: unset !important;
    }
    .odrer-form {
        grid-column: span 12 !important;
    }
    .odrer-form:nth-child(2) {
        /*grid-row: 1;*/
        margin-bottom: 48px;
    }

    #document-products .odrer-form,
    #order-view .odrer-form{
        grid-row: initial;
    }
    

    .fieldlist li.colSpan-3 {
        grid-column: span 4;
        display: grid;
        grid-auto-flow: column;
        justify-content: start;
        align-items: center;
        column-gap: 8px;
    }
    
    .user-profile-form h3 {
        font-weight: var(--app-weight-500);
        margin-bottom: 0;
    }

    .k-widget.k-window.k-dialog {
        min-width: 520px !important;
    }
    .section__inner--product-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .reviews {
        grid-template-columns: 1fr !important;
        padding: 0 48px 0px 48px !important;
    }

}

@media only screen and (min-width: 768px) and (max-width: 1023px)  {
    #processevo-application {
        grid-template-columns: repeat(8, 1fr);
    }
/*
    #header {
        grid-template-areas:
                "app-header-contact-line app-header-contact-line"
                "app-header-info app-header-info"
                "app-header-nav app-acions" !important;
        grid-template-columns: unset !important;
    }

    #app-header-info {
        padding: 0 !important;
        justify-content: center;
    }

    #app-header-nav {
        padding-left: 48px;
    }
    .app-main-nav {
        justify-content: start !important;
    }
*/
    #overlay-panel-cart,
    #overlay-panel-search {
        top: 13.5em;
    }
    #profile,
    #contact,
    .order,
    .categories,
    [class*="breadcrumbs"] {
        padding: 0 3rem 0 3rem;
    }
    .products-listing {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .product-listing-filters {
        display: grid;
        grid-template-columns: auto  170px;
        padding: 0px 3rem 48px;
    }
    .product-view {
    }
    #prd-image-scroller {
        position: initial !important;
    }
    #prd-image-scroller,
    .product-view > .prd-title {
        grid-column: 1/-1 !important;
    }
    .product-view > .prd-attributes {
        grid-column: 1/-1 !important;
        grid-row: 2/3 !important;
        margin: 0px 0px 24px 0px !important; 
    }
    .product-view > .prd-description {
        grid-column: 1/-1 !important;
        grid-row: 3/4 !important;
    }
    
    .map-search,
    .map-view {
        margin-bottom: 24px;
    }
    .store-image {
        aspect-ratio: 2/1;
    }
    
    .order > .containerGrid.colGap-48 {
        column-gap: unset !important;
    }
    .odrer-form {
        grid-column: span 12 !important;
    }
    .odrer-form:nth-child(2):not(#order-view .odrer-form, #document-products .odrer-form) {
        /*grid-row: 1;*/
        margin-bottom: 48px;
    }

    .user-profile-form h3 {
        font-weight: var(--app-weight-500);
        margin-bottom: 0;
    }
    
    .k-widget.k-window.k-dialog {
        min-width: 520px !important;
    }
}

@media only screen and (min-width: 1024px) {
    #processevo-application {
        grid-template-columns: repeat(12, 1fr) !important;
    }

    #overlay-panel-cart,
    #overlay-panel-search {
        top: 9em;
    }
    #profile,
    .order,
    .categories,
    [class*="breadcrumbs"] {
        padding: 0 3rem 0 3rem;
    }
    .products-listing {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .product-listing-filters {
        display: grid;
        grid-template-columns: auto  170px;
        padding: 0px 72px 48px;
    }
    .filters-header,
    .sort,
    .sort-type {
        grid-row: 1;
    }
    .filters {
        grid-row: 2;
    }
    #contact {
        padding: 0 72px;
    }
    .map-search {
        grid-column: 1/9;
        margin-bottom: 24px;
    }
    .map-view {
        grid-column: 1/9;
    }
    .store-info {
        grid-column: 9/13;
    }
    .store-image {
        aspect-ratio: 4/3;
    }


    .user-profile-form h3 {
        font-weight: var(--app-weight-500);
        margin-bottom: 0;
    }
    .products-listing.odrers.order-view {
        grid-template-columns: 1fr 1fr;
    }
    
    .k-widget.k-window.k-dialog {
        min-width: 520px !important;
    }
    
}

@media only screen and (min-width: 1024px) and (max-width: 1365px)  {}

#header,
#status-bar-container,
#main-container,
.filters {
    display: grid;
    grid-column: 1/-1 !important;
}

#main-container {
    grid-template-rows: unset !important;
    grid-template-areas:
        "main-header-notifications"
        "workspace-container";
    background-color: var(--color-white);
    height: initial !important;
    grid-row: 1/2;
}


#header {
    grid-template-areas:
            "app-header-contact-line app-header-contact-line app-header-contact-line"
            "app-header-info app-header-nav app-acions";
    grid-template-rows: 36px 72px;
    grid-template-columns: minmax(58px, auto) 1fr max-content;
    align-items: center;
    background-color: var(--color-white);
    border-bottom: 0px solid #E2E2E2;
    color: inherit !important;
}

.sticky {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 999999;
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 4.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
}

.sticky-breadcrumb {
    position: fixed;
    width: 100%;
    z-index: 1;
    background: white;
    border: 0px !important;
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 4.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
}

[class*="breadcrumbs"].sticky-breadcrumb .bc-nav {
    margin: 8px auto;
}

[class*="ms-Icon"] {
    letter-spacing: normal;
    line-height: normal !important;
}
.ms-Icon {
    grid-row: initial;
}

#header .ms-Icon {
    font-size: 1rem;
    font-weight: 600;
}

#app-header-contact-line,
#app-header-info,
#app-header-nav,
#app-header-actions {
    grid-row: unset !important;
    width: auto !important;
    display: inline-grid !important;
}

#app-header-contact-line {grid-area: app-header-contact-line}
#app-header-info {grid-area: app-header-info}
#app-header-nav {grid-area: app-header-nav}
#app-header-actions {grid-area: app-acions}


.app-main-nav {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 8px;
    margin-right: 24px;
}

#app-header-info {
    padding-left: 3rem;
}

#app-header-actions {
    padding-right: 3rem;
}

#app-header-actions i.ms-Icon {
    width: auto;
    display: grid;
    grid-template-columns: 26px auto;
    margin: 0px 4px;
    background-color: var(--themeDark);
}

#header i.ms-Icon:hover {
    color: var(--color-white);
    background-color: var(--themeDark);
}

.contact-line-info,
.contact-line-lang {
    display: flex;
    column-gap: 6px;
}

#app-header-contact-line {
    background-color: var(--neutralLighter);
    padding: 0 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--themeAccent);
    font-weight: var(--app-weight-500);
    height: 100%
}

#app-header-contact-line a,
#app-header-contact-line span {
    text-decoration: none;
    color: var(--themeAccent);
    margin-left: 0px;
    text-transform: none;
    font-size: 14px;
    font-weight: 500;
    padding: 2px 6px 1px 6px;
    border-radius: 2px;
    display: flex;
    align-items: center;
}

#app-header-contact-line a:hover {
    text-decoration: none;
}

#app-header-contact-line ul {
    padding-left: 8px;
}

#app-header-contact-line ul li {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 12px auto;
    float: left;   
    margin-right: 34px;
    color: inherit;
    font-weight: var(--app-weight-500);
    font: var(--fontSize-16);
}

#app-header-contact-line ul li:before {
    content: '\00a0\2022\00a0\00a0';
    color: inherit;
    font-size:26px;
    height: 26px;
    margin: -6px 0px 0px -8px;
    width: 8px;
}

#app-header-nav {
    display: grid;
    grid-template-columns: unset;
    padding-left: 3rem;
    /*text-transform: uppercase;
    
    font-size: 0.8333rem;

    -moz-transform: scale(1.2, 0.95);
    -webkit-transform: scale(1.2, 0.95);
    -ms-transform: scale(1.2, 0.95);
    */
}

#app-header-nav a, #app-header-nav li.submenu span {
    color: var(--neutralPrimary);
    text-decoration: none;
    font-weight: var(--app-weight-500);
    height: 4.5rem;
    padding: 0px .875rem !important;
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;
    cursor: pointer;

    &::before {
        background-color: var(--themePrimary);
        bottom: -4px;
        content: "";
        height: .5rem;
        opacity: 0;
        position: absolute;
        width: calc(100% - 28px);
    }

    &:hover, &:focus, &:active {
        color: var(--themePrimary);
        background-color: transparent;
        border-radius: 0px;
    
        &::before  {
            opacity: 1;
        }
    }

    .submenu-items {
        li a::before {
            opacity: 0;
        }
    }
}

.menu > li:first-child  a {
    padding: 0px !important;
}

ul {
    margin: 0;
    padding: 0;
}

/* Basic styling for the navigation */
nav ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    
    gap: 0;
}

nav ul.menu li {
    margin: 0px;
    padding: 0px !important;
    align-items: center;
    display: flex;
    font-size: 16px;
    line-height: 1;
}

nav ul.menu li a {
    color: #fff;
    text-decoration: none;
}

/* Styling for the submenu */
nav ul.menu li.submenu {
    position: relative; /* Required for positioning submenu */
    border-radius: 0px;
    z-index: 1000;
}
nav ul.menu li.submenu > a {
    padding-right: 28px !important;
}

nav ul.menu li.submenu .submenu-items li a:hover {
    color: var(--color-white);
    background-color: var(--themePrimary) !important;
    border-radius: 0px;
}

/*
nav ul.menu li.submenu > a::after {
    content: "\E972";
    position: absolute;
    font-size: 10px;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    font-family: 'FabricMDL2Icons';
    font-style: normal;
    color: var(--neutralPrimary);
    padding: 3px 8px;
}
*/


nav ul.menu li.submenu .submenu-items {
    display: none;
    position: absolute;
    background-color: var(--themeAccent);
    padding: 12px;
    top: 72px;
    left: 14px;
    min-width: 280px;
    border-radius: 0px;
    z-index: 100000;
}

#user-submenu {
    left: auto;
    right: 14px;
}

nav ul.menu li.submenu:hover .submenu-items {
    display: block;
}

nav ul.menu li.submenu .submenu-items li {
    display: block;
    margin: 0px 0;
}

nav ul.menu li.submenu .submenu-items li a {
    color: #fff !important;
    justify-content: start !important;
    height: 48px !important;
}

.submenu--mobile {
    display: inline-flex;
    justify-content: space-between;

    i.ms-Icon {
        
        &:hover {
            color: var(--color-white) !important;
        }
    }
}
.submenu--mobile > .ms-Icon {
    height: 32px;
}
.submenu-items--mobile {
    display: none;
}
.submenu-items--mobile--show {
    display: block;
    padding-left: 12px;
}

.app-main-nav--mobile-content a {
    font-size: 1rem;
    padding: 8px 8px 8px 24px !important;
    justify-content: space-between !important;
    height: 2.62rem !important;

    &:hover {
        &::before {
            opacity: 0 !important;
            height: 2.62rem !important;
        }
    }
}

.app-main-nav--mobile-content .submenu-items--mobile--show a::before {
    content: "\E974" !important;
    position: absolute;
    font-size: 10px;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    font-family: 'FabricMDL2Icons';
    font-style: normal;
    color: var(--color-white) !important;
    padding: 6px 8px;
    top: 0px;
    left: -8px;
    width: unset !important;
    height: unset !important;
    opacity: 1 !important;
    background-color: transparent !important;
}

.submenu-items--mobile a::before {
    left: 42px;
}

#app-header-info__logo {
    display: block !important;
    cursor: pointer;
}

#app-header-info__logo,
#app-header-info__logo img {
    width: 100%;
    height: auto;
    margin-right: 0px;
    padding: 0px 0;
    height: 48px;
    margin-right: 0px
}

#app-header-contact-line {
    grid-column: 1/-1;
    grid-template-columns: max-content max-content;
    justify-content: space-between;
}


#app-toolbar.k-toolbar {
    grid-row: 2;
    height: 72px;
    padding: 0px 0px 0px 0px;
}

#app-toolbar.k-toolbar > .k-overflow-anchor {
    padding: 0px !important;
    width: 58px !important;
    height: 58px;
    top: 7px;
    box-shadow: none;
}

#app-toolbar.k-toolbar > .k-button.k-state-hover, #app-toolbar.k-toolbar > .k-button:hover {
    background: var(--button-hover);
}

.app-toolbar-item {
    font-weight: var(--app-weight-500);
}

.k-popup.k-list-container {
    right: 0px;
}

.k-list-container.k-state-border-up i.ms-Icon {
    color: var(--link);
    font-weight: 600;

}

.app-toolbar-item:hover i.ms-Icon {
    color: var(--themePrimary);
}

#header i.ms-Icon {
    color: var(--neutralPrimary);
}

.ms-Icon::after {
    display: block;
    position: absolute;
    font-size: 11px;
    color: transparent !important;
    top: 48px;
}


#app-toolbar .ms-Icon > span {
    font-family: var(--app-font);
    font-size: 16px;
    line-height: 1;
    font-weight: var(--app-weight-500);
    margin-right: 4px;
    /*text-transform: uppercase;*/
}

.ms-Icon:hover::after {
    color: var(--color-white) !important;
}

/*
#app-header-actions__search::after {
    content: "Търси";
    margin-left: -6px;
}

#app-header-actions__user-profile::after {
    content: "Моят профил";
    margin-left: -24px;
}

#app-header-actions__user-favorites::after {
    content: "Любими";
    margin-left: -9px;
}

#app-header-actions__shopping-cart::after {
    content: "Поръчки";
    margin-left: -10px;
}

#app-header-actions__logout::after {
    content: "Изход";
    margin-left: -4px;
}
#app-header-actions__login::after {
    content: "Вход";
    margin-left: -2px;
}
*/

#workspace-container {
    padding: 0px;
    grid-template-rows: unset;
    overflow: unset;
}

#app-main-content {
    height: unset;
    overflow: unset;
}

#overlay-panel {
    display: block;
    height: 100vh;
    width: 100vw;
    background-color: #00000070;;
    position: fixed;
    z-index: 99999999;
    right: 0;
}

#overlay-panel-search {
    display: grid;
    /*max-width: 480px;*/
    width: calc(100% - 6rem);
    right: 3rem;
    position: fixed;
    padding: 1em;
}

.search-result-footer {
    display: grid;
    grid-template-columns: auto max-content;
    padding: 12px;
    border-top: 1px solid var(--neutralLight);
}
.search-results-actions {
  cursor: pointer;
  padding-top: 2px;
}

.app-overlay-panel-container {
    border: 1px solid transparent;
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
    border-radius: 0px;
}

.app-overlay-panel-header-description {
    font: var(--fontSize-14);
}

.app-overlay-panel-header-actions > .ms-Icon,
#overlay-panel-search .ms-Icon,
.search-box i.ms-Icon{
    font-size: 1rem;
    color: var(--themePrimary);
    cursor: pointer;
}

.app-overlay-panel-content #change-password,
.app-overlay-panel-content #change-work-place {
    display: none;
}

.full-width {
    padding-bottom: 48px;
    padding-top: 24px;
}

.full-width {
    color: var(--color-white);
}

#welkome-board.full-width {
    color: var(--neutralDark);
    padding-bottom: 0;
}

#pe-tab-content.k-tabstrip > .k-content {
    padding: 12px 0px 12px 0px;
}

#document-favorites .products-listing {
    padding: 0 !important;
}

.k-button.inverse,
.k-button.inverse:active,
.k-button.inverse:focus {
    background-color: var(--neutralDark);
    border-color: var(--neutralDark);
    color: var(--color-white);
    padding: 0.5rem 0.875rem;
    line-height: normal;
}

.k-button.inverse:hover {
    background-color: var(--color-white);   
}


.k-button.inverse.button--big,
.k-button.inverse.button--big:active,
.k-button.inverse.button--big:focus {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--neutralDark);
    
    font-size: 2.4167rem;
    font-weight: var(--app-weight-300);
    letter-spacing: calc( (60 / 1000 ) * 1em);
    padding: 1.125rem 1.25rem;
    line-height: normal;
}

.k-button.inverse.button--big:hover {
    background-color: var(--neutralDark);
    border-color: var(--neutralDark);  
}

#hero-board,
#expected {
    display: grid;
    justify-items: center;
    /*align-content: space-between;*/
    position: relative;
}

/*#hero-board.full-width.questionnaire,*/
#subscribe.full-width {
    align-content: center;
    padding-top: 48px;
    padding-bottom: unset;
}

.cta-title {
    font: var(--fontSize-42);
    font-weight: var(--app-weight-400);
}

.cta-sub-title {
    font: var(--fontSize-32);
    font-weight: var(--app-weight-300);
}


.cta-welkome .cta-title {

}

.cta-welkome {
    /*background: url('https://platformata.bg/images/front-cover.jpg') center center no-repeat;*/
    background-size: cover;
}

.cta-expected .cta-title {
    padding: 120px 48px 0 48px;
    font-size: 44px;
    margin: 0;
}

.cta-expected .cta-sub-title {
    padding: 0 48px 0 48px;
    font-size: 36px;
    margin: 0;
}

.cta-expected {
    justify-items: center !important;
    align-content: center !important;
    background: url(/images/icons/cta-expected.webp) center center no-repeat;
    background-size: cover;
}

.cta-home {
    align-content: center !important;
    padding: 0 !important;
}
.cta-home .hero-cta {
    display: grid;
    grid-template-columns: 50% auto;
    /*background-color: rgba(0, 0, 0, 0.5);
    padding: 6rem 3rem;*/
    width: 100%;
    column-gap: 3rem;


    .cta-content {
        align-self: center;
    }
    .cta-video {
        justify-self: center;
        align-self: center;
        aspect-ratio: 16/9;
        min-width: 320px;
        width: 100%;
    }

}

.cta-home h1.cta-title {
    padding: 0 0 1rem 0;
    margin: 0 0 1rem 0;
}
.cta-home h2.cta-sub-title {
    padding: 0 0 1rem 0;
    margin: 0 0 0 0;
}

.cta-actions {
    padding-top: 2rem;
}


.cta-content {
    background: var(--themeAccent);
    padding: 3rem;
    z-index: 5;
    /*
    h1.cta-title {
        &::before {
            background-color: var(--themePrimary);
            content: "";
            position: relative;
            height: 3rem;
            display: inline-block;
            width: 2rem;
            top: .5rem;
            margin-right: 1rem;
        }
    }
    */
}

.cta-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.cta-image {
    z-index: 5;
}

.filters--cta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 120px;
    column-gap: 24px;
    background-color: var(--themePrimary);
    padding: 1rem 2rem;
    row-gap: 24px;
    grid-template-rows: 48px max-content;
}

.filters--cta > div {
    display: grid;
    grid-template-rows: 24px auto;
    align-content: center;
    text-align: left;
}

@media only screen and (max-width: 767px)   {

    .filters--cta {
        grid-template-columns: 1fr !important;
        column-gap: unset !important;
        row-gap: initial !important;
        grid-template-rows: initial !important;
    }

    .filters--cta > div {
        grid-template-rows: initial !important;
        grid-column: 1/-1 !important;
    }

    #team {
        .section-4-col {
            grid-template-columns: 1fr 1fr;
        }
    }
}

.filters--cta > div > label {
    color: #ffffff !important
}

.tabs {
    background: var(--neutralLighter);
    text-align: left;
    margin-top: 3rem;
    padding: 0px 0rem;
    display: flex;
    flex-wrap: wrap;
    /*display: grid;
    grid-auto-flow: column;
    justify-content: start;
    grid-template-columns: repeat( auto-fit, minmax(188px, 1fr) );*/
}

.tabs a {
    color: #ffffff;
    text-decoration: none;
    font: var(--fontSize-18);
    font-weight: 500;
    padding: 12px 16px 12px 16px;
    display: grid;
    grid-template-columns: 24px max-content;
    column-gap: 16px;
    background-color: var(--themeDark);
}
.active {
    background: var(--themePrimary) !important;
}
.tab-header {
    grid-column: 1/-1;
    text-align: left;
    margin-bottom: 16px;
}
.tab-content {
    display: none;
  }
.tab-link > i.ms-Icon {
    padding: 0px !important;
}

#tripGuide .k-button.inverse,
.tab-content .k-button.inverse {
    background-color: var(--themeDark);
    border-color: var(--themeDark);
}

#tripGuide .k-button.inverse:hover,
.tab-content .k-button.inverse:hover {
    background-color: var(--themePrimary);
    border-color: var(--themePrimary);
}

#news {
    padding: 0px 48px 48px
}

#news .blog-image-01 {
    background: url(/images/icons/home-blog-img-01.webp) center center no-repeat;
    background-size: cover;   
}
#news .blog-image-02 {
    background: url(/images/icons/home-blog-img-02.webp) center center no-repeat;
    background-size: cover;   
}
#news .blog-image-03 {
    background: url(/images/icons/home-blog-img-03.webp) center center no-repeat;
    background-size: cover;   
}

.questionnaire-hero-board {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 48px;
    margin: 48px;
    color: var(--neutralPrimary);
    text-align: center;
}
.questionnaire-hero-board > h2 {
    margin-top: 0px;
    margin-bottom: 72px;
    font-weight: var(--app-weight-300);
}
.questionnaire-hero-board > .hero-cta > .k-button {
    padding-left: 24px;
    padding-right: 24px;
}


#subscribe.full-width {
    background: #F3F3F3;
    color: var(--neutralDark);
}
.subscribe-content {
    max-width: 520px;
    margin: 0 auto;
    padding: 0px 48px;
}

.subscribe-content h1,
.subscribe-content p {
    margin-bottom: 48px;
}

.subscribe-actions {
    display: grid;
    grid-template-columns: auto max-content;
    /*column-gap: 24px;*/
    margin-bottom: 48px;
}

.subscribe-actions > input {
    height: initial;
    line-height: initial;
    background: transparent;
    box-shadow: none;
    border-color: transparent;
    border-bottom: 1px solid var(--neutralDark)
}

.subscribe-actions > button,
.subscribe-actions > button:hover {
    
    box-shadow: none;
    border: 0px;
    border-bottom: 1px solid var(--neutralDark) !important;
}

.card-title {
    grid-column: span 4;
    text-align: center;
}

.card-title.span3 {
    grid-column: span 3;
}

.product-scroller {
    display: grid;
    grid-template-rows: max-content auto;
    grid-auto-flow: column;
    column-gap: 96px;
    padding-left: 48px;
    padding-right: 48px;
}

.prd-cadr {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: max-content minmax(1.5em, max-content) max-content;
}

.slick-slide {
    margin: 0 12px;
}

.slick-slide > div > .prd-cadr {
    /*padding: 12px;*/
    height: 100%;
}

#regular,
#featured {
    .slick-track {
        display: grid;
        grid-auto-flow: column;
    }   
}

.prd-badges {
    display: grid;
    position: absolute;
    margin: -12px;
}

.prd-badge {
    justify-self: start;
    color: var(--color-white);
    z-index: 2;
    font: var(--fontSize-14);
    font-weight: 500 !important;
    padding: 6px 8px 7px 8px;
    margin-bottom: 2px;
}

.badge-recomended {
    background-color: var(--themeAccent);
}
.badge-promo {
    background-color: var(--themePrimary);
}
.badge-new {
    background-color: var(--themeDark);
}


.prd-name,
.prd-size-name,
.prd-price {
    text-align: center;
}
.prd-name {
    /*font-size: 1.75em;*/
	line-height: 1.71em;
	padding-top: 5px;
	/*margin-bottom: 0.357em;*/
    font: var(--fontSize-20);
    text-align: left;
}

/*
.products-scroller > div {
    height: 528px;
}

ul.k-scrollview-wrap {
    height: 100% !important;
}
*/

.prd-favorites {
    grid-row: 1/2;
    grid-column: 2/3;
    color: var(--color-white);
    background-color: var(--themePrimary); 
    cursor: pointer;
    /*position: absolute;*/
    z-index: 2;
}

.section-inverse .prd-favorites .ms-Icon {
    color: var(--themePrimary) !important;
    background-color: var(--color-white) !important; 
    cursor: pointer;
    /*position: absolute;*/
    z-index: 2;
}

.prd-favorites .ms-Icon:hover::before {
    content: "\EB52"
}

.prd-g-icon {
    grid-row: 1/2;
    grid-column: 2/3;
    position: relative;
    z-index: 2;
    top: 32px;
    right: 0;
    height: 32px;
    text-align: center;
    cursor: pointer;
}
.prd-g-icon > i.fa {
    font-size: 1em;
    padding: 8px 0;
    width: 32px;
}

.prd-image {
    /*aspect-ratio: 4 / 3;*/
    cursor: pointer;
    /* background-color: transparent;
    width: 100%;
    height: 100%;
    margin: initial;
    position:relative;
    aspect-ratio: 15/16;*/
    text-align: center;
    display: block;
    padding: 12px;
    position: relative;
}
.slick-slide .prd-image {
    /*aspect-ratio: 4/3;*/
}

#product-view-wrapper .slick-slide {
    aspect-ratio: 16/9;
    object-fit: contain;
    div {
        height: 100%;
    }
    
    div > video {
        position: relative !important;
    }
}

.slick-slide img,
.prd-cadr img {
    /*-webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    height: 100%;
    max-height: 320px;
    aspect-ratio: 27/32;
    
    width: 100%;
    aspect-ratio: 27/32;
    max-height: 320px;
    
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    */
    
    height: 100%;
    width: auto;
    z-index: 1;
    margin: auto;
    object-fit: scale-down;
}

.prd-cadr .prd-name {
    /*grid-row: 3/4;
    grid-column: 1/3;*/
    align-items: center;
    /*display: grid;
    cursor: pointer;*/
    color: var(--themePrimary);
    /*font-size: 1.9167rem;*/
    font-weight: var(--app-weight-500);
    /*letter-spacing: calc( (50 / 1000 ) * 1em);*/
    text-decoration: auto;
}

.prd-cadr .prd-name a {
    color: var(--themePrimary);
    text-decoration: none;
}

/*
.prd-name,
h3.cat-name {
    line-height: 1.08;
}
*/
.prd-cadr .prd-size-name {
    
    font: var(--fontSize-18);
    text-align: left;
}

.prd-cadr .prd-price {
    /*grid-row: 4/5;*/
    
    /*display: grid;*/
    grid-auto-flow: column;
    /*align-items: end;*/
    justify-content: center;
    column-gap: 8px;
    /*font-size: var(--app-size-18);*/
    color: var(--neutralDark);
    /*margin-top: 12px;*/
    align-self: end;
}
  
.prd-cadr .prd-price .regular-price {
    font-weight: var(--app-weight-600);
    /*font-size: 2.2083rem;*/
    font-size: 1.75em;
    letter-spacing: calc( (60 / 1000 ) * 1em);
}

.prd-cadr .prd-price .disscounted-price,
.prd-attr-item #prd-items li .disscounted-price { 
    display: inline-block;
    position: relative;
    /*font-size: 2.2083rem;*/
    font-size: 1.75em;
    font-weight: var(--app-weight-300);
}

.prd-cadr .prd-price .disscounted-price:before,
.prd-attr-item #prd-items li .disscounted-price:before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    border-bottom: 1px solid var(--neutralDark);
    width: 100%;
  }

.symbol {
    font: var(--fontSize-18);
    font-weight: var(--app-weight-400);
    margin-left: 0.25rem;
}

.products-listing--list {
    grid-template-columns: 1fr;
}

.prd-card--list {
    grid-template-columns: 260px auto 200px;
    border: 1px solid #E2E2E2;
    grid-template-rows: 1fr;
}

.campaign-description {
    padding: 0 0 32px 0;
    word-break: break-word;
}

.campaign-list {
    gap: 24px !important;
    padding-bottom: 0px !important; 
}

.campaign-card {
    grid-template-rows: 240px auto max-content max-content;
    border: 1px solid var(--neutralLighter);
    border-radius: 4px;

    .prd-image::after  {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #F3F3F3;
        opacity: .03;
        pointer-events: none;
        display: block;
    }
}

.campaign-card > .prd-name,
.campaign-card > .campaign-card-content  {
    padding: 12px 16px;
}

.campaign-donated {
    text-align: center;

    &.view-page {
        display: grid;
        grid-auto-flow: column;
        font-size: 18px;
        font-weight: 500;
        color: var(--neutralDark);

        > span {
            display: grid;
        }

        strong {
            font-size: 2rem;
            &.currnet-amount {
                color: var(--themeAccent);
            }
            &.target-amount {
                color: var(--themePrimary);
            }
        }

    }
    
}
.campaign-status {
    &.view-page {
        font-weight: 500;
        color: var(--neutralDark);
        margin-bottom: 24px;
    }
}

.campaign-card-content {
    &.view-page {
        row-gap: 12px;
        padding: 24px 24px 12px 24px;
        border: 1px solid var(--neutralLighter);
        border-radius: 4px;
    }
}

.campaign-card-content {
    display: grid;
    row-gap: 6px;
    margin-bottom: 8px;
}
.campaign-status {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6px;
    place-items: center;
}
.campaign-actions {
    text-align: center;
    margin-bottom: 8px;
}

.donation-stats {
    row-gap: 24px;
}

.campaign-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    padding: 3rem
}

.campaign-stats > div {
    padding: 0 !important;
    grid-auto-flow: initial !important;
    grid-template-rows: max-content auto;
    row-gap: 24px;
}

.donation-stats-card {
    display: grid;
    place-items: center;
    border: 1px solid var(--neutralLighter);
    border-radius: 4px;
    padding: 12px 24px 24px 24px;
}
.stats-card-value {
    font-size: 3rem;
    color: var(--themePrimary);
    font-weight: 700;
}
.stats-card-desc {
    font-weight: 500;
}

.last-donations-list {
    display: grid;
    border: 1px solid var(--neutralLighter);
    border-radius: 4px;
    margin: 0px 0 24px 0;
    align-content: start;
    max-height: 480px;
    overflow: auto;

    .donations-list-item.list-item-heading {
        position: sticky;
        top: 0;
        background-color: var(--color-white);
        z-index: 1;
    }
}
.last-donations {
    .last-donations-list {
        max-height: unset;
        overflow: unset;
        margin: 0;
        padding: 0px 0 24px 0;
    }
}

.donations-list-item {
    display: grid;
    grid-template-columns: 1fr 130px;
    border-bottom: 1px solid var(--neutralLighter);
    padding: 6px 24px;
}

#donors .donations-list-item {
    grid-template-columns: 1fr 320px;
}
.donations-list-item:hover:not(.donations-list-item.list-item-heading:hover) {
    background-color: var(--neutralLighter);
}
.list-item-heading {
    font-weight: 500;
}

.progress-container { 
    background-color: var(--neutralLighter); 
    width: 100%; 
    border-radius: 4px; 
} 

.progress-bar { 
    background-color: var(--themeAccent); 
    padding: 4px; 
    border-radius: 4px; 
    max-width: 100%;
}


.products-listing--list .prd-image {
    display: block;
    /*grid-row: initial;
    grid-column: initial;*/
    height: 100%;
}

.products-listing--list .prd-action {
    display: grid;
    border-left: 1px solid #E2E2E2;
    grid-template-rows: auto max-content;
    padding: 1rem 1rem 0rem  1rem;
    row-gap: 1rem;
}

.products-listing--list .prd-content {
    padding: 1rem;
}

.products-listing--list .prd-price {
    grid-column: unset
}

.prd-card--list .prd-favorites {
    color: var(--color-white);
    background-color: var(--themePrimary); 
    cursor: pointer;
    position: absolute;
    z-index: 2;
    right: 0;
}


/*
[id^="ProductsType-"] .prd-badge,
[id^="ProductsType-"] .regular-price
*/

/*
#best-sales .regular-price,
#related .regular-price,
#ProductsType-Women .regular-price,
#ProductsType-Aroma .regular-price {
    display: none;
}

#ProductsType-Favorites .prd-cadr:not(:first-child, :nth-child(5)) .regular-price,
#ProductsType-Special .prd-cadr:not(:first-child, :nth-child(5)) .regular-price  {
    display: none;
}


*.regular-price {
    display: none;
}
*/


#status-bar-container {
    grid-template-columns: 1fr;
    padding: 0;
    background-color: var(--neutralDark);
    font: var(--fontSize-16);
    color: var(--color-white) !important;
}
.copy-rights {
    text-align: center;
    font: var(--fontSize-14);
    padding: 12px 48px;
}

#footer-main-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 48px;
    background-color: var(--themeAccent);
    padding: 48px;
}

.footer-install > [hidden] { display: none !important; }

.footer-nav {
    display: grid;
    justify-items: start;
    align-content: start;
}

.f-social a,
.footer-nav a {
    color: inherit;
    margin: 5px 0px 7px 0;
    text-decoration: none;
}

.footer-nav a:hover {
    color: inherit;
    font-weight: 700;
}

.f-social a svg {
    width: 1.5rem;
    fill: #ffffff;
}

.footer-info {
    font: var(--fontSize-18);
    font-weight: var(--app-weight-500);
}

/*Sections*/
.section-title:not(.section__inner > .section-title) {
    font-weight: var(--app-weight-300);
    /*text-transform: uppercase;*/
    padding-left: 3rem;
    padding-right: 3rem;
    text-align: center;
}
.section-description {
    text-align: left;    
    padding: 0px 3rem 2rem 3rem;
}
.section-title > a,
.section-sub-title > a {
    color: var(--neutralDark);
    text-decoration: none;
}
.section-title > a:hover,
.section-sub-title > a:hover {
    color: var(--themeDark);
}

.section-title.span3 {
    grid-column: span 3;
}
.section-title.span4 {
    grid-column: span 4;
}

.section-title.footer-cta-title {
    /*margin: 48px 0 48px 0;*/
    border-bottom: 0px;
}

.section-title.footer-cta-title::after,
.section-title.footer-cta-title::before  {
    display: none;
}

.section-tabs .tab-content {
    padding-left: 0rem;
    padding-right: 0rem;
}

.section-tabs { 
    margin-top: 0px !important;
    padding: 0px 3rem !important ;
}

/*Product Scroller*/
.products-scroller > div {
    padding: 0px var(--padding);
    /*min-height: 284px;
    width:calc(100% - 144px);*/
    display: grid;
    grid-auto-flow: column;
}

.slick-prev {
    left: 16px !important;
    width: auto;
    height: auto;
    z-index: 1;
    background: rgba(255,255,255,0.6);
    padding: 8px;
}
.slick-next {
    right: 16px !important;
    width: auto;
    height: auto;
    background: rgba(255,255,255,0.6);
    padding: 8px;
}

.slick-prev:before, .slick-next:before {
    color: var(--themePrimary);
    font: var(--font-icon-MS);
    font-size: 32px;
    font-weight: 600;
    opacity: 1;
}
.slick-prev:before {
    content: "\E973" !important;
}
.slick-next:before {
    content: "\E974" !important;
}

.products-scroller > div.k-scrollview {
    border: 0px !important;
}

div.k-scrollview ul.k-scrollview-wrap > li {
    width: calc(100vw - 17px) !important;
    left: -72px;
    /*height: auto !important;*/
}

div.k-scrollview ul.k-scrollview-wrap > li {
    text-align: center;
    display: grid;
    box-sizing: border-box;
}

ul.k-scrollview-wrap > li > .img-wrapper {
    padding: 0 72px 0px 72px;
    display: grid;
    vertical-align: middle;
    white-space: initial;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 48px;
}
.products-scroller .k-scrollview-next,
.products-scroller .k-scrollview-prev {
    width: 72px;
}

/*
ul.k-scrollview-wrap > li > .img-wrapper > div {
    width: 20%;
    min-width: 150px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0;
}
*/

ul.k-scrollview-wrap > li > .img-wrapper > div > div {
    /*
    margin: auto;
    margin-bottom: 0;
    */
}


.prd-cadr {
    box-sizing: border-box;
    display: grid !important;
    vertical-align: top;
    margin-bottom: 0;
    width: 100%;
    /*grid-template-rows: max-content 32px;*/
}

.scroller-image {
    /*
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 27/32;
    max-height: 320px;
    */
}

.vertical > div .k-scrollview-next span,
.vertical > div .k-scrollview-prev span,
.products-scroller > div .k-scrollview-next span,
.products-scroller > div .k-scrollview-prev span {
    font-size: 24px;
    font-weight: 600;
}

.vertical > div .k-icon,
.vertical > div .k-tool-icon,
.products-scroller > div .k-icon,
.products-scroller > div .k-tool-icon {
    font: 16px/1 FabricMDL2Icons;
    width: 48px;
    color: var(--themePrimary);
}

.vertical > div .k-icon,
.vertical > div .k-tool-icon {
    width: 24px;
}

.vertical > div .k-scrollview-next,
.vertical > div .k-scrollview-prev,
.products-scroller > div .k-scrollview-next,
.products-scroller > div .k-scrollview-prev {
    padding: 0;
    /*height: 100%;
    height: auto;
    top: 0;*/
    text-shadow: none;
    opacity: 1;
}

.products-scroller > div .k-icon:before {
    width: 48px;
}

.vertical > div .k-icon:before {
    width: 24px;
}

.k-scrollview-prev > .k-i-arrowhead-w::before {
    content: "\E973";
}

.k-scrollview-next > .k-i-arrowhead-e::before {
    content: "\E974";
}

.k-scrollview.vertical ul.k-scrollview-wrap > li > .img-wrapper > div {
    /*transform: rotate(-90deg) !important;*/
    aspect-ratio: 1/1;
    height: 80px;
    /*border-top: 1px solid red !important;*/
}
.k-scrollview.vertical {
    /*grid-column: 1/2;*/
    grid-row: 2/3;
    /*right: calc(50% + 20px);
    top: 76px;*/
    border: 0;
    height: 360px !important;
    width: 80px;
}
.vertical ul.k-scrollview-wrap {
    height: 312px !important;
    width: 80px;
    left: 0px;
    top: 24px;
}
div.k-scrollview.vertical ul.k-scrollview-wrap > li {
    width: 80px !important;
    height: 312px !important;
    left: 0px;
}
.vertical ul.k-scrollview-wrap > li > .img-wrapper {
    padding: 0 0px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: 24px;
}

.vertical .scroller-image {
    height: 80px;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 1/1;
    max-width: 80px;
    cursor: pointer;
}

/*
.vertical > div .k-scrollview-next,
.vertical > div .k-scrollview-prev {
    z-index: 100;
}
.vertical .k-scrollview-elements::before {
    content: "\E973";
    display: block;
    height: 160px;
    width: 24px;
    font: 24px/1 FabricMDL2Icons;
    color: #C9A047;
    position: absolute;
    top: 68px;
    z-index: 0;
    font-weight: 600;
    opacity: 0.4;
}
.vertical .k-scrollview-elements::after {
    content: "\E974";
    display: block;
    height: 160px;
    width: 24px;
    font: 24px/1 FabricMDL2Icons;
    color: #C9A047;
    position: absolute;
    right: 0;
    top: 68px;
    z-index: 0;
    font-weight: 600;
    opacity: 0.4;
}

.vertical div.k-scrollview ul.k-scrollview-wrap > li {
    width: 600px;
}
*/
.vertical ul.k-scrollview-wrap > li > .img-wrapper > div {
    grid-template-rows: 160px;
}


/*Product Listing*/
.products-listing {
    padding: 0px 3rem 72px 3rem;
    margin-bottom: -1px;
    /*min-height: 510px;*/
    display: grid;
    /*grid-template-columns: 1fr 1fr 1fr 1fr;*/
    column-gap: 24px;
    row-gap: 1rem;
    justify-items: center;
}

.k-listview-content {
    overflow: hidden;
}

.product {
    /*float: left;*/
    position: relative;
    width: 100%;
    margin: 0 0px;
    padding: 0;
    display: grid;
    grid-template-rows: max-content max-content  max-content;

}

.product img {
    background-color: aliceblue;
    width: 100%;
    /*height: 110px;*/
    aspect-ratio: 27/32;
}

.product h3 {
    margin: 0;
    padding: 12px 0;
    font-weight: normal;
    color: var(--link);
    text-align: center;
    font-size: 18px;
}

.product p {
    margin: 0;
    color: var(--link);
    text-align: center;
    font-size: 18px;
}

.k-listview:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.product > * {
    cursor: pointer;
}

#pager,
.k-pager-wrap.k-grid-pager {
    padding: 0px 48px;
    margin: 0 0 48px 0;
    background: none;
    border: 0;
    justify-content: center;
    flex-wrap: wrap;

    .k-pager-info {
        flex: inherit;
        text-align: center;
        justify-content: center;
        width: 100%;
        padding-top: 16px;
    }

}

.k-pager-wrap.k-grid-pager {
    margin-top: 48px;
}
.k-grid-header {
    display: none;
}

#document-orders,
#document-reservations,
#document-payments,
#document-documents {
    
    .k-grid.k-widget {
        border-color: transparent;
    }
}

#document-orders,
#document-reservations,
#document-payments,
#document-documents {

    .k-grid.k-widget .k-alt {
        background-color: var(--color-white);
    }
}

#document-orders,
#document-reservations,
#document-payments,
#document-documents {

    .k-grid.k-widget .k-grid-content.k-auto-scrollable {
        overflow-y: hidden;
    }
}

#pe-tab-content .tab-container.k-state-active {
    height: auto !important;
}

.k-grid tbody tr:first-child td {
    border-width: 0px 0 1px 0;
}
.k-grid tbody tr:last-child td {
    border-width: 0px 0 0px 0;
}

.k-grid tr:hover {
    background-color: transparent;
    background-image: none;
}
.k-grid td {
    border-color: var(--neutralDark);
    border-width: 0 0 1px 0;
    padding: 6px 1rem;

}

.k-grid tbody .k-button {
    min-width: 64px;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--neutralDark);
}

.k-grid tbody .k-button:hover {
    color: var(--themePrimary)
}
.k-grid tbody .k-button:hover .k-icon{
    color: var(--color-white)
}

.k-grid tbody .k-button:hover,
.k-grid tbody .k-button:active,
.k-grid tbody .k-button:focus:hover {
    box-shadow: none;
}

.k-i-edit:before {
    font: 24px/1 FabricMDL2Icons;
    content: "\E890";
    /*margin: 4px 0px 0px 4px;*/
    cursor: pointer;
    place-self: center;
}

.k-button-icontext .k-icon {
    width: 32px;
    height: 32px;
    margin: 0px;
}

.k-pager-wrap .k-link,
.k-pager-wrap .k-link.k-state-disabled {
    border-color: transparent;
}
.k-pager-wrap.k-pager-lg .k-link, 
.k-pager-wrap.k-pager-lg .k-state-selected, 
.k-pager-wrap.k-pager-md .k-link,
.k-pager-wrap.k-pager-md .k-linstate-selectedk,
.k-pager-wrap.k-pager-sm .k-link,
.k-pager-wrap.k-pager-sm .k-state-selected,
.k-pager-wrap.k-pager-lg .k-pager-numbers, .k-pager-wrap.k-pager-md .k-pager-numbers, .k-pager-wrap.k-pager-sm .k-pager-numbers,
.k-pager-wrap .k-link,
.k-pager-wrap .k-state-selected {
    border-radius: 0;
}

.k-pager-wrap .k-link:hover,
.k-pager-wrap .k-state-selected {
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px !important;
    background: none;
    color: var(--link);
    border-color: transparent;
}

.k-pager-wrap.k-pager-lg .k-pager-numbers,
.k-pager-wrap.k-pager-md .k-pager-numbers,
.k-pager-wrap.k-pager-sm .k-pager-numbers {
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px !important;
    background: none;
    color: var(--link);
    border-color: transparent;
    width: 34px !important;
}
.k-pager-wrap.k-pager-lg .k-pager-numbers .k-link:hover,
.k-pager-wrap.k-pager-md .k-pager-numbers .k-link:hover,
.k-pager-wrap.k-pager-sm .k-pager-numbers .k-link:hover {
    box-shadow: none !important;
}

.k-pager-wrap.k-pager-lg .k-pager-numbers .k-link,
.k-pager-wrap.k-pager-lg .k-pager-numbers .k-state-selected,
.k-pager-wrap.k-pager-md .k-pager-numbers .k-link,
.k-pager-wrap.k-pager-md .k-pager-numbers .k-state-selected,
.k-pager-wrap.k-pager-sm .k-pager-numbers .k-link,
.k-pager-wrap.k-pager-sm .k-pager-numbers .k-state-selected {
    width: 34px !important;
}

.k-pager-wrap.k-pager-lg .k-pager-numbers-wrap,
.k-pager-wrap.k-pager-md .k-pager-numbers-wrap,
.k-pager-wrap.k-pager-sm .k-pager-numbers-wrap {
    width: 34px !important;
}

.k-i-arrow-60-left:before {
    content: "\E96F";
}
.k-i-arrow-60-right:before {
    content: "\E970";
}
.k-i-arrow-end-left:before {
    content: "\F371";
}
.k-i-arrow-end-right:before {
    content: "\F372";
}

.k-pager-wrap .k-link>.k-icon,
.k-pager-wrap .k-state-selected>.k-icon {
    cursor: pointer;
    font: 14px/1 FabricMDL2Icons;
    color: var(--themePrimary);
    margin: 2px 0px 0px 0px;
}

.k-pager-wrap .k-link.k-state-disabled > .k-icon {
    opacity: 0.5;
}

.k-link.k-pager-nav > .k-icon.k-i-arrow-60-left {
    margin-right: 4px;
}

.k-pager-wrap .k-pager-numbers li {
    display: inline-block;
    margin: 0px 4px;
}


#filtersContainer {
    column-gap: 14px;
}
.product-listing-filters {
    padding: 0px 72px 48px;
}

.filters-header {
    padding: 0px;
    display: grid;
    grid-template-columns: auto 2.5em;
    align-items: center;
    justify-items: center;
    width: fit-content;
}

.filters-header > span {
    padding: 0.438em 0.85em 0.438em 0.85em !important;
}

.filters-header > .ms-Icon {
    grid-row: unset;
    color: var(--themePrimary);
    cursor: pointer;
    font: 16px/1 FabricMDL2Icons !important;
    padding: unset;
}

.filters-header > .ms-Icon::before {
    margin: auto auto;
}

.fieldlist {
    padding: 24px 1rem 24px 3rem;
    margin-top: -1px;
    background: white;
    /*grid-template-columns: 3fr 1fr;*/
    display: grid;
    grid-column: 1/-1 !important;
    z-index: 999;
    margin-right: -2px;

    border-right: 1px solid #E2E2E2;
}

.filtersTitle {
    grid-column: 1/-1;
    grid-template-columns: 1fr !important;
}

#filters-list{
    margin: 0;
    padding: 0px;
    display: grid;
    /*grid-template-columns: 1fr 1fr 1fr;*/
}

#filters-list-parfume {
    margin: 0;
    padding: 0;
}

.fieldlist li {
    list-style: none;
    padding-bottom: 24px;
    display: grid;
    grid-template-columns: 16px auto;
    column-gap: 4px;
}

.k-checkbox {
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px;
    line-height: initial;
    border-width: 1px;
    border-style: solid;
    outline: 0;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    -webkit-appearance: none;
}

.k-checkbox:checked::before {
    border-radius: 4px;
}
.k-checkbox:checked::before {
    -webkit-transform: scale(1) translate(-50%,-50%);
    -ms-transform: scale(1) translate(-50%,-50%);
    transform: scale(1) translate(-50%,-50%);
}
.k-checkbox::before {
    content: "\e118";
    width: 12px;
    height: 12px;
    font-size: 12px;
    font-family: WebComponentsIcons,monospace;
    -webkit-transform: scale(0) translate(-50%,-50%);
    -ms-transform: scale(0) translate(-50%,-50%);
    transform: scale(0) translate(-50%,-50%);
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
}
.k-widget {
    outline: 0;
    -webkit-tap-highlight-color: transparent;
    line-height: normal;
    box-sizing: content-box;
}
.k-checkbox+.k-checkbox-label {
    margin-left: 4px;
}
.k-checkbox-label {
    margin: 0;
    padding: 0;
    line-height: 17px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: start;
    align-items: flex-start;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
}

.fieldlist li .k-checkbox { 
    margin-top: 2px;
}
.fieldlist li .k-checkbox-label {
    margin-left: 4px;
    word-break: break-word;
}

.k-checkbox {
    border-radius: 0px;
}

.k-checkbox:checked {
    color: var(--themePrimary);
    background-color: var(--themePrimary);
    border-color: var(--themePrimary);
}

.k-checkbox:focus {
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px !important;
    border-color: var(--themePrimary) !important;
}

.filtersActinios {
    grid-column: 1/-1;
}

/*Product Vew*/

#product-view-wrapper {
    align-items: start;
    padding-bottom: 0px !important;
}
.product-view {
    padding: 0px 3rem 0;
    display: grid;
    grid-template-columns: minmax(272px,1fr) 1fr; /*360px*/
    
    gap:24px;
}

#prd-image-scroller {
    position: sticky;
    top: 11.5996em;
    grid-column: 1/2;
}

.prd-title {
    /*
    margin-top: 0px;
    margin-bottom: 12px;
    font-size: var(--app-size-25);
    
    font-weight: var(--app-weight-300);
    color: var(--neutralDark);
    font: var(--fontSize-28);
    */
    padding-top: 0.089em;
    margin-bottom: 0.142em;
}
.product-view .prd-number {
    font-weight: var(--app-weight-300);
    font: var(--fontSize-12);
}

.product-view > .prd-gallery {
    grid-column: 1/2;
    grid-row: 2/3;
    display: grid;
    row-gap: 24px;
}
.product-view > .prd-gallery .prd-gallery-image {
    /*background-color: lightskyblue;*/
    min-height: 160px;
}

.product-view > .prd-image,
.product-view > .prd-image img {
    grid-column: 1/2;
    grid-row: 2/3;
    width: 100%;
    height: auto;
    /*background-color: lightskyblue;*/
    aspect-ratio: initial;
}

#image-zoom-view {
    position: relative;
}

#image-zoom-view .drift-zoom-pane.drift-open {
    position: absolute;
    display: block;
    top: -24px;
    left: -24px;
    width: calc(100% + 24px);
    min-width: 360px;
    height: auto;
    aspect-ratio: 1/1;
}

#prd-main-image {
    position: relative;
}

#prd-main-image .drift-zoom-pane.drift-opening {
    position: absolute;
    display: block;
    min-width: 360px;
    height: auto;
    aspect-ratio: 1/1;
}


.product-view > .prd-attributes {
    grid-column: 2 / -1;
    grid-row: 1/2;
/*
    margin-top: 24px;
    margin-left: 24px;
*/
    align-content: start;
}

.prd-attr-item .attr-item-label {
    font-weight: var(--app-weight-500);
}

.prd-attr-item .attr-item-value {
    font: var(--fontSize-16);
}

.prd-attr-item #prd-items li .prd-price {
    grid-row: 1;
    grid-column: 2/3;
    font: var(--fontSize-32);
    font-weight: var(--app-weight-500);
    justify-self: baseline;
    margin-bottom: 4px;
}

.prd-attr-item #prd-items li .disscounted-price {
    grid-row: 1;
    grid-column: 1/2;
    font: var(--fontSize-20);
    justify-self: baseline;
    margin-bottom: 4px;
}

.prd-attr-item #prd-items li .unitsSelect  {
    grid-row: 2;
}

.desc-title {
    font: var(--fontSize-20);
    font-weight: var(--app-weight-500);
}

.desc-title::after {
    font: 16px/1 FabricMDL2Icons;
    color: var(--themePrimary);
    content: "\E972";
    top: 3px;
    position: relative;
    margin: 0px 0px 0px 8px;
    cursor: pointer;
}

.desc-text {
    margin: 12px 0;
}

.in-stock {
    color: var(--dl-green-color);
}

.in-stock::before {
    font: 16px/1 FabricMDL2Icons;
    color: var(--themePrimary);
    content: "\E8FB";
}

.out-stock {
    color: red;
}

.out-stock::before {
    font: 14px/1 FabricMDL2Icons;
    color: red;
    content: "\E8BB";
    margin: 0px 10px 0px 0px !important;
    
}

.add-to-fav::before {
    font: 16px/1 FabricMDL2Icons;
    color: var(--themePrimary);
    content: "\EB51";
}

.remove-from-fav::before {
    font: 16px/1 FabricMDL2Icons;
    color: var(--themePrimary);
    content: "\EB52";
}


.in-stock::before,
.add-to-fav::before,
.remove-from-fav::before {
    top: 3px;
    position: relative;
    margin: 0px 8px 0px 0px;
}

.font-small {
    font-size: 14px;
}

.product-view > .prd-description {
    grid-column: 2 / 3;
    grid-row: 2/3;
}

.product-view .k-scrollview-next,
.product-view .k-scrollview-prev {
    height: 100%;
    top: 0;
}

#add-cart {
    margin-bottom: 24px;
}

.prd-prices {
    list-style: none;
    display: grid;
    grid-template-columns: max-content;
    padding-left: 0;
    /*column-gap: 1.65em;*/
}

.prd-prices li {
    display: grid;
    grid-auto-flow: column;
    column-gap: 8px;
    align-items: center;
    margin: 0px;
    padding: 0px;
}

.prd-quantity {
    display: grid;
    grid-auto-flow: column;
    column-gap: 0.65em;
    grid-template-columns: 6em auto;
    margin: 1em 0;
}
    

/*Categories*/
.categories {
    display: grid;
    column-gap: 48px;
    /*padding: 36px 72px 72px 72px;*/
    padding-top: 36px;
    padding-bottom: 72px;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
}

.aroma-families {
    padding: 0px 72px 72px ;
    grid-template-columns: repeat(4, 1fr);
}
.aroma-families > .cat-card {
    margin-bottom: 72px;
}

.cat-card {
    display: grid;
    row-gap: 24px;
    box-sizing: border-box;
    grid-template-rows: 1fr auto;
    width: 100%;

}
.cat-name {
    text-align: center;
    justify-self: center !important
}

.cat-name a {
    /*
    font-size: var(--app-size-18);
    font-weight: var(--app-weight-500);
    */
    color: var(--link);
    text-decoration: none;
}
.cat-name a:hover {
    color: var(--themeDark);
}

.cat-image {
    background-color: lightskyblue;
    aspect-ratio: 27/32;
}

.cat-image, .cat-name a {
    cursor: pointer;
}

.cat-image.new-products {
    background: url(/images/icons/cat-new-product.webp) center center no-repeat;
    background-size: cover;
}

.cat-image.cat-aroma-families {
    background: url(/images/icons/cat-aroma-families.webp) center center no-repeat;
    background-size: cover;
}

.cat-image.products {
    background: url(/images/icons/cat-products.webp) center center no-repeat;
    background-size: cover;
}

.cat-image.cosmetics {
    background: url(/images/icons/cat-cosmetics.webp) center center no-repeat;
    background-size: cover;
}

.cat-image.find-aromat {
    background: url(/images/icons/cat-aromats.webp) center center no-repeat;
    background-size: cover;
}

.cat-image.citrus {
    background: url(/images/icons/cat-af-citrus.webp) center center no-repeat;
    background-size: cover !important;
}

.cat-image.fruits {
    background: url(/images/icons/cat-af-fruits.webp) center center no-repeat;
    background-size: cover;
}

.cat-image.floral {
    background: url(/images/icons/cat-af-floral.webp) center center no-repeat;
    background-size: cover;
}

.cat-image.pepperly {
    background: url(/images/icons/cat-af-pepperly.webp) center center no-repeat;
    background-size: cover;
}

.cat-image.wooden {
    background: url(/images/icons/cat-af-wooden.webp) center center no-repeat;
    background-size: cover;
}

.cat-image.light-floral {
    background: url(/images/icons/cat-af-light-floral.webp) center center no-repeat;
    background-size: cover;
}

.cat-image.special {
    background: url(/images/icons/cat-af-special.webp) center center no-repeat;
    background-size: cover;
}


#category-list {
    justify-self: center;
}
#category-list > .cat-links {
    display: grid;
    justify-items: start;
    /*
    margin-top: 12px;
    row-gap: 12px;
    */
}

#category-list > .cat-links a {
    font: var(--fontSize-16);
    font-weight: var(--app-weight-300);
    text-decoration: none;
    color: var(--link);
}
#category-list > .cat-links a:hover {
    font: var(--fontSize-16);
    font-weight: var(--app-weight-300);
    text-decoration: none;
    color: var(--themeDark);
}



/*Breadcrumbs Nav*/

[class*="breadcrumbs"]{
    /*padding: 0 4.5rem 0 4.5rem;*/
}

.bc-nav {
    padding: 0;
    margin: 8px auto;
}

.bc-nav-item {
    display: inline;
}
.bc-nav-item a,
.bc-nav-item a:visited,
.bc-nav-item a:active {
    font-size: 14px;
    font-weight: var(--app-weight-500);
    color: var(--neutralDark);
    text-decoration: none;
}

.bc-nav-item:hover,
.bc-nav-item a:hover {
    color: var(--themeDark);
}

.bc-nav-item::before {
    content: "\E970";
    font: var(--font-icon-MS);
    font-size: 9px;
    margin: 0 4px 0 2px;
}

.bc-nav-item-first::before {
    content: "\E80F";
    font: var(--font-icon-MS);
    font-size: 16px;
    margin: 0 4px 0 2px;
    position: relative;
    top: 2px;
}

.bc-nav-item-active {
    font-size: 14px;
    color: var(--neutralDark);
    font-weight: var(--app-weight-300);
}

.bc-nav-item-active:hover {
    color: var(--neutralDark);
    font-weight: var(--app-weight-300);
    cursor: initial;
}

.bc-nav-item-active::before {
    color: var(--themeDark) !important;
    font-weight: var(--app-weight-500);;
}


/*Questionnaire*/
.questionnaire-wrapper {
    display: grid;
    padding: 24px 0;
}

.questionnaire-card {
    display: grid;
    grid-template-columns: minmax(160px, 204px) 1fr;
    grid-auto-flow: column;
    padding: 48px 36px 24px;
    border: 1px solid lightgrey;
    border-radius: 0px;
    margin: auto 48px;
    column-gap: 36px;
}

.questionnaire-image {
    display: grid;
    row-gap: 12px;
    grid-template-rows: min-content 24px;
}

.question-image {
    aspect-ratio: 3/4;
    background-color: lightskyblue;
}

.questionnaire-image-nav {
    display: grid;
    grid-template-columns: repeat(6, 24px);
    column-gap: 12px;
}

.q-nav {
    border: 1px solid lightgrey;
}
.q-nav.active {
    border: 1px solid lightskyblue;
    background: lightskyblue;
}

.questionnaire-content {
    display: grid;
    grid-auto-flow: row;
    row-gap: 12px;
    align-content: space-between;
}

.questionnaire-content-wrapper {
    display: grid;
    row-gap: 24px;
    margin-bottom: 24px;
}

.question-title {
    font-weight: var(--app-weight-300);
    padding-bottom: 6px;
}

.question-item {
    display: grid;
    column-gap: 8px;
    grid-template-columns: 16px 1fr;
}

.question-actions {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-content: end;
    column-gap: 36px;
    grid-auto-flow: column;
}

#q-result .question-actions button:last-child {
    word-break: break-word;
}

/**/
.register,
#related {
    margin-bottom: 72px;
}
.register .colSpan-3 {
    grid-column: 4/9;
}

#quick-order-form {
    padding: 12px 12px 24px 12px;
    background: white;
    margin: 2px 0px 0px 0px;
    position: absolute;
    width: 20em;
    /*left: -82px;*/
}

.order-item,
.terms {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    column-gap: 8px;
}


#quick-order-form .terms {
    align-items: center;
    padding: 0px 24px;
}

#quick-order-form .k-checkbox-label {
    font-size: 12px;
    margin-left: 4px;
    font-weight: var(--app-weight-500);
    text-align: center;
}

.order-item .k-checkbox {
    margin-top: 2px;
    color: transparent;
}
.order-item .k-checkbox-label {
    font-weight: var(--app-weight-500);
}

.order-view-number {
    font-size: 22px;
    border-bottom: 1px solid var(--neutralDark);
    padding-bottom: 36px;
    margin-bottom: 24px;
}

.odrer-form .order-total {
    grid-auto-flow: column;
    padding: 24px 0px 36px 0px;
    /*margin: 0px 53px 0px 124px;*/
    border-top: 2px solid var(--neutralDark);
    justify-items: end;
}
#basket-total {
    margin-left: 12px
}

.order-actions {
    grid-auto-flow: column;
    justify-content: space-between;
}

#favorites-badge,
#favorites-badge--overflow,
#shopping-cart-badge,
#shopping-cart-badge--overflow {
    font-family: var(--app-font);
    font-size: 12px;
    width: 14px;
    height: 14px;
    display: block;
    text-align: center;
    position: relative;
    margin: -14px 0 0 0;
    top: -18px;
    right: -14px;
    outline: 1px solid var(--color-white);
    border-radius: 50%;
    padding: 0 0 0 0;
    color: var(--color-white);
    font-weight: var(--app-weight-500);
}

#favorites-badge,
#favorites-badge--overflow,
#shopping-cart-badge,
#shopping-cart-badge--overflow {
    background: var(--themePrimary);
}

#app-header-actions__user-favorites--overflow,
#app-header-actions__shopping-cart--overflow {
    grid-template-columns: 2em auto;
}

#favorites-badge--overflow,
#shopping-cart-badge--overflow  {
    line-height: 1.2em;
}

.products-listing.odrers::after {
    display: none ;
}

.products-listing.odrers.order-view {
    /*grid-template-columns: 1fr 1fr !important;*/
    max-height: initial;
}

.products-listing.odrers.ordered-products {
    grid-template-columns: 1fr !important;
    max-height: initial;
    overflow: hidden;
}

.invoice-info .k-checkbox-label {
    font: var(--fontSize-16);
    font-weight: var(--app-weight-500);
    color: var(--neutralPrimary);
    border-bottom: 1px solid var(--neutralDark);
    padding-bottom: 12px;
    margin-left: 24px
}

/*.section-title:after,*/
.invoice-info .k-checkbox-label:after {
    padding: 0px;
    margin: 0px;
    content: "";
    width: calc(50% - 16px);
    height: 1px;
    background-color: white;
    position: absolute;
    bottom: -1px;
    right: 0;
}
/*.section-title:before,*/
.invoice-info .k-checkbox-label:before {
    padding: 0;
    content: "";
    width: calc(50% - 16px);
    height: 1px;
    background-color: white;
    position: absolute;
    bottom: -1px;
    left: 0;
}

.products-listing.odrers {
    grid-template-columns: 1fr;
    padding: 0px;
    max-height: 524px;
    overflow: auto;
    justify-items: initial;
    min-height: unset;
    row-gap: 24px;
    padding: 0px !important;
}

.products-listing.odrers .pannel-prd-price {
    margin-top: 0px;
    font-weight: var(--app-weight-500);
}

.products-listing.odrers  .cart-pannel-image {
    width: 140px;
    height: 140px;
    grid-row: 1/3;
    grid-column: 1/2;
}

.products-listing.odrers .product {
    grid-template-columns: 120px auto;
    grid-template-rows: unset;
    width: 100%;
}

.products-listing.odrers .product img {
    grid-row: 1/3;
    aspect-ratio: 1/1;
}

.products-listing.odrers .product h3 {
    grid-row: 1/2;
    text-align: left;
    padding: 12px 24px;
    word-break: break-word;
}

.products-listing.odrers .product p {
    grid-row: 2/3;
    text-align: left;
    padding-left: 24px;
}

.cart-pannel-item {
    grid-template-columns: 140px 1fr 32px !important;
    border: 1px solid transparent !important;
}

.cart-pannel-item:hover {
    border: 1px solid lightgrey !important;
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
}
.cart-pannel-actions:not(.app-overlay-panel-content__cart > .cart-pannel-actions) {
    grid-row: 1/2;
    grid-column: 3/4;
    padding-right: 0px;
    margin-top: 0px;
    justify-self: end;
    height: 32px;
    background: var(--color-white);
}

.cart-pannel-actions i {
    cursor: pointer;
    color: var(--themePrimary);
}

.cart-pannel-actions i:hover {
    cursor: pointer;
    color: var(--neutralDark);
}

.cart-pannel-content {
    padding: 8px 36px 0px 0px;
    grid-row: 1/2;
    grid-column: 2/3;
}

.k-autocomplete input,
input, textarea {
    padding: 0px 8px;
    border-radius: 0px;
    border: 0px solid var(--neutralDark);
    /*font-size: 14px;
    color: var(--neutralDark);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: none;*/
    outline: none;
    width: 100%;
    text-overflow: ellipsis;
    /*line-height: 20px;*/
    grid-row: 1;
    grid-column: 1;
    /*height: 30px;*/
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
}

.app-overlay-panel-content__search {
    grid-template-columns: 32px auto !important;
}

.k-autocomplete {
    width: 100%;
    background-color: transparent !important;
    background-image: none;
    grid-column: 1/3;
    grid-row: 1;
    border-color: transparent;
}

.k-autocomplete.k-state-hover,
.k-autocomplete.k-state-focused {
    border-color: transparent;
    box-shadow: none;
}
#module-search--button {
    grid-row: 1;
    grid-column: 1/2;
    /*margin-top: 2px;*/
}



#module-search {
    background: transparent;
    border-radius: 0px;
    border-color: transparent;
    text-indent: 32px;
    font-size: 14px;
    line-height: 32px;
    padding: 0px;
    width: -webkit-fill-available;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
   /* height: 32px;*/
}
/*
.k-autocomplete.k-state-focused  #module-search {
    width: calc(100% - 32px);
    padding: 0 32px 0 0;
}
*/

.k-autocomplete>.k-i-close {
   /* top: 1.25em !important;*/
}

ul#module-search_listbox {
    font-size: 14px;
}


.app-overlay-panel-header {
    grid-template-rows: auto auto;
    align-items: baseline;
    row-gap: 8px;
    margin-bottom: 12px;
}

.app-overlay-panel-content .k-button {
    background-color: var(--neutralDark);
    border-color: var(--neutralDark);
    border-radius: 0px;
    padding: 0px 8px;
    font-weight: var(--app-weight-500);
    color: var(--color-black);
    font-size: 14px !important;
    height: 34px;
}

.app-overlay-panel-content .k-button:hover {
    color: var(--color-white);
    background-color: var(--button-hover);
    border-color: var(--button-hover);
    border-radius: 0px;
}

#overlay-panel-cart .app-overlay-panel-header {
    grid-template-rows: 32px;
    padding-left: 12px;
}

#overlay-panel-cart {
    position: fixed;
    right: 0px;
    
    
    animation-duration: 1s;
    animation-name: slidein;
    z-index: 99999999;
}

@keyframes slidein {
    from {
        margin-right: -434px;
    }

    to {
        margin-right: 0;
    }
}

#overlay-panel-cart.hide {
    animation-duration: 1s;
    animation-name: slideout;
    z-index: 99999999;
}

.app-overlay-panel-content__cart {
    grid-template-rows: auto 32px;
    margin-top: 12px;
    padding: 0px 12px 12px 12px;
    grid-template-columns: 140px 1fr;
}
.cart-pannel-image {
    width: 140px;
    height: 140px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    grid-column: 1/2;
    cursor: pointer;
}

.cart-pannel-image img {
    width: 100%;
    height: 100%;
}

.cart-pannel-title {
    font-size: 18px;
}
/*
.cart-pannel-description,
.pannel-prd-price {
    font-size: 14px;
    margin-top: 12px;
}
*/
.products-listing.odrers .cart-pannel-prd-info {
    grid-column: 2/3;
}

.cart-pannel-prd-info {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-content: end;
    padding: 0px 36px 8px 0px ;
}

.app-overlay-panel-content__cart > .cart-pannel-actions,
.app-overlay-panel-content__cart > div.colSpan-8 {
    grid-column: 2/3;
}

.k-button:not(.k-navigator-up, .k-navigator-down, .k-navigator-left, .k-navigator-right, .k-zoom-in, .k-zoom-out, .k-dialog-close),
.k-button:not(.k-navigator-up, .k-navigator-down, .k-navigator-left, .k-navigator-right, .k-zoom-in, .k-zoom-out, .k-dialog-close):active,
.k-button:not(.k-navigator-up, .k-navigator-down, .k-navigator-left, .k-navigator-right, .k-zoom-in, .k-zoom-out, k-dialog-close):focus {
    color: var(--color-white);
    /*height: 34px;*/
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
    background-image: none !important;
    background-color: var(--themePrimary);
    border-radius: 0px;
    border-color: var(--themePrimary);
/*
    font-weight: var(--app-weight-400);
    font-size: 1.3333rem;
    letter-spacing: calc( (50 / 1000 ) * 1em);
    text-transform: uppercase;
*/
}
  
.k-button:not(.k-navigator-up, .k-navigator-down, .k-navigator-left, .k-navigator-right, .k-zoom-in, .k-zoom-out, .k-dialog-close):hover,
.k-button:not(.k-navigator-up, .k-navigator-down, .k-navigator-left, .k-navigator-right, .k-zoom-in, .k-zoom-out, .k-dialog-close):active,
.k-button:not(.k-navigator-up, .k-navigator-down, .k-navigator-left, .k-navigator-right, .k-zoom-in, .k-zoom-out, .k-dialog-close):focus:hover {
    color: var(--color-white);
    background-color: var(--themeDark);
    border-color: var(--themeDark);
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
}

/*Blog*/
.blog-home {
    padding: 48px;
}

.blog-item {
    display: grid;
    grid-template-rows: auto max-content;
    aspect-ratio: 4/3;
}

#blog-board .blog-item:first-child .blog-item-image {
    grid-row: 1/3;
    grid-column: 1/2;
    height: calc(100% - 36px);
}

#blog-board .blog-item:first-child .blog-item-title {
    grid-row: 2/3;
    grid-column: 1/2;
    color: var(--color-white);
    font-size: 30px;
    text-align: left;
    margin-bottom: 36px;
    padding: 24px;
}

.blog-item-image {
    cursor: pointer;
}
.blog-item-title {
    margin: 0;
    padding: 12px 0;
    font-weight: normal;
    color: var(--neutralPrimary);
    text-align: center;
    font: var(--fontSize-18);
    cursor: pointer;
}

/*Contact*/

#contact-form {
    margin-bottom: 96px;
}

#contact .info {
    text-align: center;
    padding-top: 48px;
    font-weight: var(--app-weight-500);
}
.search-box {
    display: grid;
    grid-template-columns: 36px 1fr 120Px;    
}
.search-box i {
    grid-column: 1/2;
    order: 1;
    cursor: pointer;
    margin-top: 4px;
    margin-left: 2px;
}

.search-box #map-search-phrase {
    margin-bottom: 0px !important;
    padding-left: 36px !important;
    text-indent: 0;
}

.map-search span.k-combobox,
.search-box input {
    grid-column: 1/3;
    grid-row: 1;
    background: transparent;
    width: 100%;
}

.map-search span.k-combobox .k-input {
    padding-left: 32px;
    border-radius: 0px;
    height: 34px;
    padding-right: 32px;
}

.map-search span.k-dropdown-wrap {
    padding-right: 0px;
}
button#map-search {
    margin-left: 24px;
    margin-bottom: 0;
}

.k-dropdown-wrap.k-state-hover .k-input {
    /*padding-right: 64px !important;   */
}

.map {
    aspect-ratio: 2/1;
    /*margin-right: 48px;*/
    height: auto;
    width: 100%;
}

.k-button.k-zoom-in,
.k-button.k-zoom-out {
    padding: 4px !important;
}

.k-button.k-zoom-in > span.k-icon.k-i-plus:before {
    content: "+";
    font-size: 22px;
    font-weight: bold;
    top: -1px;
    left: -2px;
}
.k-button.k-zoom-out > span.k-icon.k-i-minus:before {
    content: "-";
    font-size: 22px;
    font-weight: bold;
    top: -4px;
    left: -3px;
}



#contact .store-image {
    width: 100%;
}

.contact-form {
    margin: 0 auto;
}

.contact-form  .k-button {
    min-width: 120px;
}

.text-icon {
    display: grid;
    grid-template-columns: 24px auto;
    align-items: center;
    /*margin-left: -24px;*/
}

.address::before,
.work-hours::before,
.phone::before,
.email::before {
    font: var(--font-icon-MS);
}
.address::before {
    content: "\ECAF";
}
.work-hours::before {
    content: "\E917";
}
.phone::before {
    content: "\E717";
}
.email::before {
    content: "\E715";
}
    
.text-icon-dl-custom {
    display: grid;
    grid-template-columns: 60px auto;
    align-items: center;
}

.text-icon-dl-custom.red::before {
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    background-color: #ef3232;
    content: url(/images/icons/contact-icon-white.webp);
}
.text-icon-dl-custom.blue::before {
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    background-color: #b7fcff;
    content: url(/images/icons/contact-icon-black.webp);
}


.k-map .k-i-marker-marker-blue {
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    background-color: #b7fcff;
    background-image: url(/images/icons/contact-icon-black.webp);
    background-size: contain;
}

.k-map .k-i-marker-marker-red {
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    background-color: #ef3232;
    background-image: url(/images/icons/contact-icon-white.webp);
    background-size: contain;
}

.shadow {
    border: 1px solid lightgrey !important;
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
    border-radius: 0px;
}


/*Profile
#profile {
    padding: 0px 48px;
}
*/

#pe-tab-content .k-tabstrip-items {
    background-color: var(--color-white);
}

#pe-tab-content .k-tabstrip-items .k-item {
    background-color: var(--color-white);
    border-bottom-color: var(--color-white)
}

#pe-tab-content .k-tabstrip-items > .k-item.k-state-active {
    border-bottom-color: #000000;
}

/*
.k-dropdown-wrap {
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
}
*/

.k-dropdown-wrap.k-state-default {
    background: unset;
    border-radius: 0;
    border: 0;
}

.k-dropdown-wrap.k-state-focused,
.k-state-focused.k-state-selected {
    
    background-image: none;
}

.k-dropdown-wrap .k-input,
.k-list-scroller ul li.k-item {
    font-family: var(--app-font);
    -webkit-font-smoothing: antialiased;
    /*font-size: 14px;*/
    font-weight: var(--app-weight-300);
    line-height: unset;
    min-height: unset;
    border-bottom: 0 !important;
    padding: 5px 8px 6px 8px;
    margin: 0px !important;
    color: var(--neutralDark);
    text-indent: unset;
}

.k-dropdown-wrap.k-state-hover .k-input {
    color: var(--neutralDark);
}

/*
.k-input,
input:not(.k-checkbox),
textarea {
    padding: 0.438em 0.85em 0.438em 0.85em !important;
    font-family: var(--app-font) !important;
    font-size: 1em !important;
    line-height: 1.5em !important;
    margin-bottom: 0.622em !important;
    font-family: var(--app-font) !important;
    font-weight: var(--app-weight-300) !important;
    height: unset;
}
*/
.k-dropdown-wrap, .k-numeric-wrap, .k-picker-wrap:not(.k-tool-group .k-picker-wrap) {
    display: grid;
    grid-template-columns: auto 32px;
    align-items: center;
    justify-items: center;
    padding-right: 0;
}

.k-dropdown-wrap .k-select, .k-numeric-wrap .k-select, .k-picker-wrap:not(.k-tool-group .k-picker-wrap) .k-select {
    line-height: unset;
    vertical-align: unset;
    -moz-box-sizing: border-box;
    text-align: unset;
    width: unset;
    height: unset;
    position: unset;
    top: unset;
    right: unset;
    display: inherit;
}

.k-list-scroller ul li.k-item.k-state-hover,
.k-list-scroller ul li.k-item.k-state-focused.k-state-selected  {
    background-color: var(--neutralLighter) !important;
    color: initial;
    border-color: transparent;
    background-image: none;
}


.k-list-scroller ul li.k-item:nth-child(odd) {
    background-color: unset;
    box-shadow: none;
    color: initial;
}

.k-i-arrow-60-down, .k-i-arrow-60-left, .k-i-arrow-60-right, .k-i-arrow-60-up {
    cursor: pointer;
    font: 1em/1 FabricMDL2Icons;
    color: var(--themePrimary);
    margin-bottom: unset;
}

.k-i-arrow-60-up:before {
    content: "\E971"; /*up: E971 */
}

.k-i-arrow-60-down:before {
    content: "\E972";
}

.k-navigator .k-i-arrow-60-down,
.k-navigator .k-i-arrow-60-left,
.k-navigator .k-i-arrow-60-right,
.k-navigator .k-i-arrow-60-up {
    font: 16px/1 FabricMDL2Icons;
    margin: 0px;
}
.k-navigator .k-i-arrow-60-up:before {
    content: "\E96D"; 
}

.k-navigator .k-i-arrow-60-down:before {
    content: "\E96E"; 
}

/*About*/
.pT-48 {
    padding-top: 48px;
}
.pR-48 {
    padding-right: 48px;
}
.pB-48 {
    padding-bottom: 48px;
}
.pL-48 {
    padding-left: 48px;
}

.mB-0 {
    margin-bottom: 0px;
}

.cta {
    padding: 48px;
    margin-bottom: 48px;
}

#about .store-image {
    aspect-ratio: unset;
    width: 100%;
    height: auto;
}

#about h1.inner,
#about h3 {
    margin-top: 0;
    margin-bottom: 48px;
}


    

.box-icon {
    text-align: center;
    height: 110px;
}

/*
.box-icon::after {
    content: "\E706";
    font-family: 'FabricMDL2Icons';
    font-size: 96px;
}
*/

#dl-about-01 {
    background: url(/images/icons/about-us-icons_01.webp) center center no-repeat;
    background-size: contain;
}
#dl-about-02 {
    background: url(/images/icons/about-us-icons_02.webp) center center no-repeat;
    background-size: contain;
}
#dl-about-03 {
    background: url(/images/icons/about-us-icons_03.webp) center center no-repeat;
    background-size: contain;
}
#dl-about-04 {
    background: url(/images/icons/about-us-icons_04.webp) center center no-repeat;
    background-size: contain;
}
#dl-about-05 {
    background: url(/images/icons/about-us-icons_05.webp) center center no-repeat;
    background-size: contain;
}
#dl-about-06 {
    background: url(/images/icons/about-us-icons_06.webp) center center no-repeat;
    background-size: contain;
}
#dl-about-07 {
    background: url(/images/icons/about-us-icons_07.webp) center center no-repeat;
    background-size: contain;
}
#dl-about-08 {
    background: url(/images/icons/about-us-icons_08.webp) center center no-repeat;
    background-size: contain;
}
#dl-about-09 {
    background: url(/images/icons/about-us-icons_09.webp) center center no-repeat;
    background-size: contain;
}


.about-hero {
    background: url(/images/icons/about-hero-01.webp) center center no-repeat;
    background-size: cover;
}

.promotions-hero { 
    background: url(/images/icons/promotions-hero-01.webp) center center no-repeat;
    background-size: cover;
}

video:not(.campaign-description video) {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }



.blog-hero {
    background: url(/images/icons/blog-hero-01.webp) center center no-repeat;
    background-size: cover;
}

.questionary-hero {
    background: url(/images/icons/questionary-hero-01.webp) center center no-repeat;
    background-size: cover;
}


.box-title {
    font-weight: var(--app-weight-500);
    text-align: center;
}

.box-content {
    font-size: 14px;
}

.vl-1 {
    border-left: 1px solid grey;
    height: 96px;
    margin: 8px 0;
}

.vl-2 {
    border-right: 1px solid grey;
    height: 96px;
    margin: 8px 0;
}
.hl {
    border-top: 1px solid grey;
  }

/*Blog page*/
.blog-first {
    font: var(--fontSize-18);
    font-weight: var(--app-weight-500);
}
p.blog-first::first-letter {
    font-size: 32px;
}

.date, 
.autor,
.social {
    font: var(--fontSize-14);
}
.social {
    margin-top: 24px;
    cursor: pointer;
    justify-self: end;
}
.social > .k-icon {
    margin-bottom: 4px;
    font-size: 14px;
}

.k-widget.k-window.k-dialog {
    min-width: 520px;
    width: 520px;
    /*top: 96px !important;*/
}

.nl-image {
    width: 100%;
    height: 320px
}
.nl-title {
    display: grid;
    column-gap: 12px;
    justify-content: center;
    color: var(--neutralPrimary);
}
.nl-title h1 {
    font-size: 32px;
    margin: 12px;
}
.nl-title h1 span {
    font-size: 24px;
    font-weight: var(--app-weight-500) !important;
}

.nl-form {
    display: grid;
    padding: 0px 96px 12px 96px;
}

.k-dialog-buttongroup {
    justify-content: center;
}

.k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched .k-button {
    margin: 0px;
    background-color: var(--neutralDark);
    border: 1px  solid var(--neutralDark) !important;
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
    border-radius: 0px  !important;
    height: 34px;
    font-size: 1rem;
    color: var(--color-white);
    font-weight: 500;
    border-radius: 4px !important;
}
.k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched .k-button:hover,
.k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched .k-button:active,
.k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched .k-button:focus {
    color: var(--color-white);
    background-color: var(--neutralSecondary);
    border-color: var(--neutralSecondary);
    border: 1px  solid var(--neutralSecondary) !important;
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
}

.k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched .k-button.k-primary {
    background-color: var(--themePrimary);
    border: 1px  solid var(--themePrimary) !important;
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
    border-radius: 0px  !important;
    height: 34px;
    font-size: 1rem;
    color: var(--color-white);
    font-weight: 500;
    border-radius: 4px !important;
}

.k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched .k-button.k-primary:hover,
.k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched .k-button.k-primary:active,
.k-dialog .k-dialog-buttongroup.k-dialog-button-layout-stretched .k-button.k-primary:focus {
    color: var(--color-white);
    background-color: var(--themeDark);
    border-color: var(--themeDark);
    border: 1px  solid var(--themeDark) !important;
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
}
/*
.k-overlay {
    background-color: var(--color-white);
}
*/
.k-dialog-buttongroup.k-dialog-button-layout-stretched {
    column-gap: 24px;
    display: flex;
}

.k-dialog-buttongroup.k-dialog-button-layout-stretched .k-button {
    min-width: 120px !important;
}


#app-main-header-info-error .k-widget.k-notification.k-notification-error,
#app-main-header-info-error .k-widget.k-notification.k-notification-info,
#app-main-header-info-error .k-widget.k-notification.k-notification-success,
#app-main-header-info-error .k-widget.k-notification.k-notification-warning  {
    position: fixed;
    display: grid !important;
    left: 0px;
    top: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    z-index: 999999;
    pointer-events: all;

}

.app-main-header-notificaitons .k-widget.k-notification .k-notification-wrap {
    display: grid;
    grid-template-columns: 32px auto;
    width: 50%;
    max-width: 480px;
    margin: auto auto;
    position: relative;
    pointer-events: all;
    padding-right: 32px !important;
    align-items: start;
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
    border-radius: 4px;
}

.app-main-header-notificaitons .k-notification-error .k-notification-wrap {
    background-color: rgba(252,243,244,255);
    border: 1px solid rgba(164, 38, 44,255)
}
.app-main-header-notificaitons .k-notification-info .k-notification-wrap {
    background-color:rgb(227,239,250);
    border: 1px solid rgb(0, 24, 143);
}
.app-main-header-notificaitons .k-notification-success .k-notification-wrap{
	background-color: rgb(223,246,221);
    border: 1px solid rgb(16, 124, 16);
}


.app-main-header-notificaitons .k-notification-wrap > .k-icon.k-i-close {
    top: 16px;
    right: 0;
    margin-right: 0 !important;
}

.k-notification-wrap>.k-i-error,
.k-notification-wrap>.k-i-info,
.k-notification-wrap>.k-i-success,
.k-notification-wrap>.k-i-warning {
    margin-right: 0px;
}

.k-notification .k-notification-content {
    /*line-height: 1.2;*/
    padding: 6px;
    font: var(--fontSize-14);

}

.app-main-header-notificaitons .k-notification-wrap .k-notification-content ul {
    padding-left: 18px;
    padding-right: 18px;
    text-indent: -2px;
}

.app-main-header-notificaitons .k-notification-wrap .k-notification-content li {
    margin-bottom: 6px; 
    font: var(--fontSize-14);
}

.k-widget.k-tooltip.k-popup.k-group {
    background-color: var(--color-white);
    border-radius: 0;
}

.k-tooltip-content {
    width: 320px !important;
}

.k-tooltip-content p {
    word-break: break-word;
    text-align: left;
    margin-top: 4px;
    margin-bottom: 0px;
    padding: 0px 16px;
}
.k-tooltip-content p.map-name {
    text-align: center;
    margin-top: 12px;
    margin-bottom: 12px;
    font-weight: var(--app-weight-500);
}
.k-tooltip-content label {
    margin-right: 6px;
    font-size: 16px !important;
}
.k-tooltip-content p.map-hours,
.k-tooltip-content div.map-action {
    margin-bottom: 16px;
}
.k-tooltip-content p.map-image {
    margin-top: 16px !important;
}

.k-tooltip-content div.map-action > .k-button{
    margin-bottom: 0 !important;
}

label {
    -webkit-font-smoothing: antialiased;
    font-size: 1em;
    font-weight: var(--app-weight-500);
    color: var(--neutralDark);
}

.k-window-title.k-dialog-title {
    font: var(--fontSize-24);
    font-weight: var(--app-weight-500);
    color:var(--neutralDark);
}

.app-overlay-panel-header-title {
    font: var(--fontSize-24);
    line-height: 28px;
    font-weight: var(--app-weight-500);
}

#OrderView,
#OrderedProducts {
    margin-bottom: 24px;
}

/*Media queries*/
@media only screen and (min-width: 320px) and (max-width: 768px) {
    :root {
        --padding: 1.5rem;
    }
    .prd-card--list {
        grid-template-columns: 1fr;
        border: 1px solid #E2E2E2;
        grid-template-rows: max-content auto 1fr;
    }
    .products-listing--list {
        grid-template-columns: repeat( auto-fill, minmax(180px, 1fr) );
        column-gap: var(--padding);
    }
    .products-listing--list .prd-content {
        padding-bottom: 0;
        word-break: break-word;
    }
    .products-listing--list .prd-action {
        padding: 0rem 1rem 0.5rem 1rem;
        row-gap: 1.5rem;
    }
    .products-listing--list .prd-image {
        aspect-ratio: 1/1;
    }
    #module-search_listbox {
        grid-template-columns: 1fr !important;
    }

    #donation-btn {
        position: fixed;
        bottom: 12px;
        left: 24px;
        width: calc(100% - 48px);
    }
}

@media (max-width: 980px) {

    #app-header-nav {
        justify-content: end;
    }

    .app-main-nav {
        display: none !important;
    }
    .app-main-nav--mobile {
        display: block;
        position: relative;
        width: max-content;
        padding-right: 24px;
    }
    
    .app-main-nav--mobile-content.m-nav--show  {
        position: fixed;
        z-index: 9999999;
        background: var(--color-white);
        padding: 2em;
        top: 0;
        /* left: 64px; */
        display: grid;
        gap: 1em;
        width: 20em;
        right: 0;
        height: calc(100vh - 56px);
        overflow: auto;
        border: 0 !important;
        align-content: baseline;
        /*color: var(--color-white);*/
        text-transform: initial;

        > span {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        > div {
            overflow: auto;
        }
    }
    .burger-button.m-button--close > i.ms-Icon--GlobalNavButton::before {
        content: "\E8BB";
    }

    .contact-line-info {
        
        a, span {
            padding: 6px !important;
        }
        
        a > span,
        span > span {
            display: none !important;
        } 
    }

    #hero-board, #expected {
        aspect-ratio: unset !important;
        height: unset;
    }

    .campaign-stats {
        grid-template-columns: 1fr !important;
        grid-auto-flow: row;
    }
 
}

@media (max-width: 1024px) {
    
    #app-header-nav {
        /*
        grid-template-columns: repeat(3,max-content);
        justify-items: center;
        */
    }

    #footer-main-container {
        grid-template-columns: repeat(2,1fr);
        column-gap: 24px;
        row-gap: 24px;
    }
    .footer-info {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: 24px;
    }
    .footer-info p.f-phone {
        order:1;
    }
    .footer-info p.f-addres {
        order:3;
    }
    .footer-info p.f-follow {
        order:2;
    }
    .footer-info p.f-social {
        order:4;
        margin-top: 18px !important;
    }

    .categories {
        grid-template-columns: repeat(3, 1fr);
    }
    section:not(.full-width) {
        /*padding: 0 4.86rem*/
    }

    .cta-home .hero-cta {
        grid-template-columns: auto;
        grid-auto-flow: row;
        grid-template-rows: 1fr;
        row-gap: 2rem;

        .cta-image {
            display: none;
        }
    }

    .list-view-content-item {
        grid-template-columns: 1fr !important;
        gap: 8px;
        margin: 0 0 12px 0;

        label, .content-item-label, .list-view-content-actions {
            justify-content: start;
            text-align: left;
            padding: 0;
        }
    }

        
    .userProfile {
        &.k-tabstrip-left {
            .containerGrid {
                grid-template-columns: 1fr;
            }
            .containerGrid > * {
                grid-column: 1 / -1;
            }
        }
    }

}


@media (max-width: 768px) {
    .userProfile {

        &.k-tabstrip-left {
            grid-template-columns: 48px auto !important;
            
            .k-tabstrip-items {
                width: 48px;
                margin-left: 0px !important;
                margin-right: 0px !important;
                overflow: hidden;

                & .k-item {
                    max-height: 24px !important;

                    .k-link {
                        line-height: 0.5 !important;
                    }
                }
            }

            & .tab-container.k-state-active {
                
                grid-row-gap: 40px !important;
                grid-template-rows: max-content auto !important;

                #tab-header-content.title-actions {
                    margin-top: 76px;
                    /*max-width: calc(100vw - 112px);*/
                    grid-template-columns: 1fr !important;
                }
            }
            .tab-container.k-state-active {
                padding: 0px 0px 0px 0px !important;
                
                /*max-width: calc(100vw - 112px) !important;*/

                .tab-title {
                
                    white-space: initial !important;
                    overflow: initial !important;
                    text-overflow: initial !important;
                    max-width: calc(100vw - 112px) !important;
                }
                .tab-title-description {
                    max-width: calc(100vw - 112px) !important;
                }
            }

            .containerGrid {
                grid-template-columns: 1fr;
            }
            .containerGrid > * {
                grid-column: 1 / -1;
            }

            & .accordion-item {
                .accordion-title {
                    gap: 12px !important;
                    /*grid-template-columns: auto 32px !important;*/
                    grid-template-columns: 1fr 32px !important;
                    grid-template-areas:
                        "image actions"
                        "name  name";

                    .image {
                        max-width: 64px;
                    }
                }

                .image.user-icon {
                    grid-area: image;
                }
                .toollbar {
                    grid-area: actions;
                }
                .info:not(.openHide) {
                    grid-area: name;
                    max-width: calc(100vw - 162px);
                }
                .info.openHide {
                    display: none !important
                }
                &.open {
                    .accordion-title {
                        grid-template-columns: auto 32px !important;
                        grid-template-areas: unset;
                        gap: 12px !important;
                                        
                        .info:not(.openHide) {
                            max-width: calc(100vw - 214px);
                        }
                    }

                    .image.user-icon {
                        grid-area: unset;
                    }
                    .toollbar {
                        grid-area: unset;
                    }
                    .info:not(.openHide) {
                        grid-area: unset;
                    }
                    .info.openHide {
                        display: none !important
                    }
                    & .accordion-content {
                        grid-template-columns: 1fr !important;
                        .info {
                            word-break: break-word;
                        }
                    }

                    & .info-card-wrapper {
                        grid-template-columns: 1fr !important;
                        & .info-card {
                            .info-card-title {
                                padding: 8px 16px 8px 16px !important;
                            }
                            .info-card-item {
                                grid-template-columns: 1fr !important;
                                padding: 8px 16px 8px 16px !important;
                            }
                        }
                    }

                    .footer {
                        grid-auto-flow: row !important;
                        gap:18px;
                        span {
                            display: grid;
                            gap:12px
                        }
                        a {
                            margin: 0 !important;
                        }
                    }

                }
            }  
        }
    }
}

@media (max-width: 600px) {
    #app-header-nav {
        /*
        grid-template-columns: repeat(3,max-content);
        justify-items: center;
        */
    }
/*
    #header {
        grid-template-columns: minmax(58px, auto) 1fr minmax(58px, 82px);
    }
*/
    #app-header-info {
        padding-left: 24px;
    }
    #app-header-nav {
        padding-left: unset;
    }
    #app-header-actions {
        padding-right: 24px;
    }

    #footer-main-container {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }
    
    .footer-info {
        display: grid;
        grid-template-columns: 1fr;
    }

    .footer-info > p {
        order: initial !important;
        text-align: center;
    }
    .footer-nav {
        justify-items: center;
    }

    .stats-card-value {
        font-size: 2rem;
    }
    
}

@media (max-width: 480px) {
    #app-header-nav {
        /*
        grid-template-columns: repeat(2,max-content);
        justify-items: center;
        */
    }
}

@media only screen and (min-width: 1280px) {
    section:not(.full-width) {
        /*padding: 0 5.166875rem*/
    }   
}

@media only screen and (min-width: 1366px) {
    section:not(.full-width) {
        /*padding: 0 5.51375rem*/
    }   
}

@media only screen and (min-width: 1440px) {
    section:not(.full-width) {
        /*padding: 0 5.8125rem*/
    } 
}

@media only screen and (min-width: 1680px) {
    section:not(.full-width) {
        /*padding: 0 6.78125rem*/
    } 
}

@media only screen and (min-width: 1900px) {
    section:not(.full-width) {
        /*padding: 0 7.75rem*/
    } 
}

/*Reviews*/
.reviews {
    grid-template-columns: 1fr 3fr;
    column-gap: 72px;
    padding: 0 72px 0px 72px
}

[class^="product__general"]:not([class^="product__general"]:last-child),
.reviews__item:not(.reviews__item:last-child) {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--neutralLighter);
}

.general__stars .k-rating-container,
.reviews__item .k-rating-container {
    margin: 0 0 0 -4px;
}

.charts__item {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
}
.charts__item:not(.charts__item:last-child) {
    margin-bottom: 8px;
}

.item__stars {
    justify-items: end;
}

.k-icon.k-i-star-outline,
.k-icon.k-i-star {
    font: var(--font-icon-MS); 
}

.k-i-star:before {
    content: "\E735";
    color: var(--themePrimary);
}
.k-i-star-outline:before  {
    content: "\E734";
}

.k-rating-precision-complement {
    width :100% !important;
    left: -2px !important;
    top: 2px !important;
    height: 100%;
}
.k-rating-precision-part {
    top: 2px !important;
    height: 100%;
}

.item__stars .k-rating-container .k-rating-item .k-icon {
    font-size: 1em;
}

.item__stars .k-rating-label {
    line-height: 1.3;
}

.basket {
    grid-template-columns: 1fr 280px;
    column-gap: 48px;
    padding: 0 72px 0px 72px;
    align-items: start
}

.basket__details {
    padding: 1.5em;
}

#basket-content.content__items {
    padding: 24px 0 0 0;
    border-top: 1px solid var(--neutralLighter) !important;
}
#basket-content .cart-pannel-item:hover {
    border-color: transparent !important;
    box-shadow: none;
    border-bottom-color: var(--neutralLighter) !important;
}

:where(#basket-content) .cart-pannel-item {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--neutralLighter) !important;
    grid-template-columns: 140px 1fr !important;
}

:where(#basket-content > .cart-pannel-item ) .cart-pannel-content {
    padding: 0 !important;
    grid-template-columns: 1fr 96px;
    display: grid;
}

.cart-prd-title {
    cursor: pointer;
    grid-column: 1/2;
}

.cart-prd-quantity {
    margin-bottom: 12px;
}

.cart-prd-actions a {
    text-decoration: none;
}

.cart-prd-actions a:first-child {
    padding-left: 0
}

.cart-prd-actions a:hover {
    color: var(--themeDark);
}

:where(#basket-content > .cart-pannel-item > .cart-pannel-content )  .cart-prd-price {
    grid-column: 2/3;
}

:where(#basket-content > .cart-pannel-item > .cart-pannel-content ) .cart-prd-size,
:where(#basket-content > .cart-pannel-item > .cart-pannel-content ) .cart-prd-quantity,
:where(#basket-content > .cart-pannel-item > .cart-pannel-content ) .cart-prd-actions {
    grid-column: 1/-1;
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    align-items: end;
    column-gap: 8px;
}

.details__items,
.details__recomended,
.details__actions {
    display: grid;
}

.details__items {
    display: grid;
    grid-template-columns: 1fr auto;
}

.basket-total {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column: 1/-1;
    border-top: 1px solid grey;
    padding-top: 12px;
    margin-top: 12px;
}

.basket-subtotal {
    text-align: right;
}

.stars,
.item__purchase {
    display: flex;
    gap: 12px;
    align-items: center;
}
.customer__date {
    margin: 6px 0;
}
.purchase__name {
    border-right: 1px solid var(--neutralLighter);
    padding-right: 12px;
}
.purchase__verified {
    color: var(--themePrimary);
}

#quick-order-confirm {
    margin-bottom: 0;
}

@media only screen and (max-width: 1024px) {
    .basket {
        column-gap: 24px;
        padding: 0 48px 0px 48px;
    }
}

@media only screen and (max-width: 767px) {
    .basket {
        grid-template-columns: 1fr;
        column-gap: 24px;
        padding: 0 48px 0px 48px;
    }

    ul.k-scrollview-wrap > li > .img-wrapper {
        grid-template-columns: 1fr 1fr;
    }

}

#workspace-loader {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 9999999999;
    margin-left: 0px;
    margin-top: 0px;
}

.order-complete {
    grid-template-columns: 1fr 1fr;
    padding-left: 72px;
    padding-right: 72px;
    column-gap: 24px;
    align-items: start;
}
.order-complete h1.section-title,
.order-complete h3.section-title,
.order-complete-info {
    grid-column: 1/-1;
    padding-left: 0 !important; 
    padding-right: 0 !important;
}


@media only screen and (max-width: 767px) {
    .order-complete {
        grid-template-columns: 1fr;
        column-gap: 24px;
        padding: 0 48px 0px 48px;
    }
    .order-complete > .containerGrid:not(.containerGrid.order-complete-info) .colSpan-6{
        grid-column: 1/-1;
    }
}


.login-form,
.register-form {
    display: grid;
    max-width: 360px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    width: 100%;
}
.login-form button {
    min-width: 140px;
}

.register-form {

    .radio-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
        
        label {
            display: grid;
            grid-template-columns: 24px 1fr;
            column-gap: 12px;

            align-items: center;
            padding: 10px 12px;
            border-radius: 4px;
            border: 0px solid var(--neutralDark);
            outline: none;
            width: 100%;
            text-overflow: ellipsis;
            box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
            cursor: pointer;

            input {
                box-shadow: none;

                appearance: none;

                border-radius: 50%;
                width: 24px;
                height: 24px;
                margin: 0;

                border: 1px solid #999;
                transition: 0.2s all linear;


                &:checked {
                    border: 1px solid transparent;
                    margin: 0px;

                    &:before {
                        font: 26px / 0.8 FabricMDL2Icons;
                        content: "\F13E";
                        display: block;
                        width: 24px;
                        height: 24px;
                        background-color: var(--themePrimary);
                        border-radius: 50%;
                        position: relative;
                        top: -1px;
                        left: -9px;
                        color: var(--color-white);
                    }

                  }

            }

        }
    }
    
}



/*Loader BOF*/
#workspace-loader {
    display: grid;
    align-content: center;
    justify-content: center;
    position: absolute;
    height: calc(100vh - 80px);
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 20000;
    margin-left: -12px;
    margin-top: -12px;
}

.main-is-boxed #workspace-loader {
    width: calc(100vw - 200px)
}
.main-is-fullwidth #workspace-loader {
    width: 100vw;
}

.spinner-circle {
    box-sizing: border-box;
    animation-name: spiner-animation;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border-width: 1.5px;
    border-style: solid;
    border-color: #8a181b #eaeaea #eaeaea;
    border-image: initial;
    margin: auto;
}

.spinner-lable {
    font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 12px;
    font-weight: 400;
    color: #8a181b;
    margin-top: 8px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    text-align: center;
}

@keyframes spiner-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


@media only screen and (min-width: 1366px) {
    .main-is-boxed #workspace-loader {
        width: calc(100vw - 320px)
    }
}


.error-page {
    justify-items: center;
    padding: 3rem !important;
}
.error-page .section-sub-title,
.error-page .section-title {
    text-align: center;
    padding-left: 0.373em;
    padding-right: 0.373em;
}


.error-page-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 0.373em;
    padding-right: 0.373em;
}

.error-page-links .cat-links {
    display: grid;
}

.error-page-links .cat-links a {
    text-decoration: none;
    color: var(--link);
}
.error-page-links .cat-links a:hover {
    color: var(--themeDark);
}
/*Loader EOF*/


/*
.product-grid__card a {
    opacity: 0.4 !important;
}

.product-grid__card.tripActive a {
    opacity: 1 !important;
}
*/

[class^="trip-dates"]:not([class^="trip-dates--"]) {
    padding: 1rem 0;
    border-bottom: 1px solid var(--neutralSecondary);   
}

.trip-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    align-items: baseline;
}

[data-trip="City"] {
    margin-bottom: 0.357em;
}

.opitonsList--item {
    display: grid;
    grid-template-columns: 1fr 360px;
    border: 1px solid var(--neutralSecondary);
    border-top: 0px !important;
}

.opitonsList--item.reservation {
    grid-template-columns: 1fr 360px 150px;
}

.opitonsList--item.heading{
    background-color: var(--themePrimary);
    color: var(--color-white);
    font: var(--fontSize-18);
}
.opitonsList--item.heading {
    border: 0px !important;
}
.opitonsList--item > span {
    padding: 0.5rem;
    text-align: right;
}
.opitonsList--item.heading > span:first-child,
.opitonsList--item > span:first-child {
    border-right: 1px solid var(--neutralSecondary);
    text-align: left;
}

.opitonsList--item.heading.reservation > span:last-child, .opitonsList--item.reservation > span:last-child {
    border-left: 1px solid var(--neutralSecondary);
    text-align: left;
}
#product-listing .section-title {
    padding-left: 3rem;
    padding-bottom: 1rem;
}

#filters-menu {
    display: none;
}

@media only screen and (max-width: 1023px) {
    /*
    .containerGrid.autoGrid-3-9 {
        grid-template-columns: 1fr !important;
        column-gap: unset;
    }
    */
    .fieldlist {
        padding: 24px 3rem 24px 3rem;
        margin: 0px;
    }
    #product-listing .section-title,
    .products-listing {
        padding-left: 3rem;
    }
    #filters-menu {
        display: block;
    }
    .filtersTitle {
        grid-template-columns: 1fr max-content;
        grid-auto-flow: column;
    }
}

/*
#prd-tabs .tabs,
#reservation-tabs .tabs {
    position: sticky;
    top: 8.6rem;
}
*/
#reservation-tabs .tabs {
    margin-top: 0px !important
}

#reservation-tabs > .section-content > #order-view.order-complete {
    grid-template-columns: repeat(12, 1fr);
    column-gap: initial;
    word-wrap: break-word;
}

@media only screen and (max-width: 767px) {
    #reservation-tabs > .section-content > #order-view.order-complete {
        grid-template-columns: 1fr;
    }
    #reservation-tabs > .section-content > #order-view.order-complete .colSpan-6 {
        grid-column: span 12;
    }
}

.tab-content p {
    margin: revert;
    line-height: inherit;
}

#ProductsType-New,
#ProductsType-Promotions,
#product-listing-search .products-listing {
    padding-left: 3rem;
    row-gap: 3rem;
}
/*
#ProductsType-New .prd-image,
#ProductsType-Promotions .prd-image,
#ProductsType-Featured .prd-image {
    aspect-ratio: 4/3;
}
*/
[data-type="product-listing-grid"] {
    &.products-listing {
        padding-left: 3rem;
        row-gap: 3rem;
        grid-template-columns: repeat(auto-fill, minmax(260px, auto)) !important;

/*
        .prd-image {
            aspect-ratio: 4/3;
        }
*/            
    }
}

#homeCategories {
    grid-template-columns: repeat(auto-fill, minmax(260px, auto)) !important;
}

a {
    color: var(--themePrimary);
}
a:hover {
    text-decoration: none;
}

#rual__destinations .card__img {
    height: 100px;
    background-size: contain;
    aspect-ratio: initial;
}

/*
.k-popup.k-list-container {
    max-height: 320px !important;
}

.k-list-scroller {
    height: calc(100% - 42px) !important;
}
*/
#module-search_listbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    row-gap: 8px;
    margin: 8px;
}

#pageSearch {
    display: grid;
    grid-row-gap: 12px;
    padding: 0 0 1.5rem;
    width: 100%;
    max-width: 75%;
    margin: 0 auto;

    .search-box {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 12px;

        #home-search {
            padding: 0.438em 0.85em 0.438em 0.85em !important;
            margin-bottom: 0.622em;
            height: unset;
        }
    }
}
@media only screen and (max-width: 1024px) {
    #pageSearch {
        max-width: calc(100% - 6rem);
    }
}


.product-search-list-item {
    display: grid;
    grid-template-columns: 130px 1fr;
    grid-auto-flow: column;
}

.search-list-image img {
    width: 130px;
    aspect-ratio: 1/1;
}



/*CookieScript*/
#cookiescript_injected_fsd,
#cookiescript_save {
    background-color: var(--themePrimary) !important;
    border: 0px !important;
}

#cookiescript_accept,
#cookiescript_reject,
#cookiescript_save {
    border-radius: 0px !important;
}

#cookiescript_injected_fsd,
#cookiescript_save:hover {
    background-color: var(--themeDark) !important;
}

#cookiescript_readmore:hover,
#cookiescript_reportlink:hover,
#cookiescript_cookiescriptlink:hover {
    color: var(--color-white) !important;
    text-decoration: none;
}
#cookiescript_fsd_wrapper #cookiescript_readmore {
    color: var(--themePrimary) !important;
}

.cookiescript_fsd_tabs > .cookiescript_active {
    border-top: 1px solid var(--themePrimary) !important;
    background-color: #f3f3f3;
    color: var(--themePrimary) !important;
}

.cookiescript_fsd_cookies_control {
    color: var(--themePrimary) !important;
}

.cookiescript_fsd_cookies_control.active {
    background: transparent !important;
}

.cookiescript_fsd_tabs_content {
    --mask-height: 0px !important;
}

#cookiescript_manage:hover #cookiescript_manageicon .cookiescript_gear {
    fill: var(--themePrimary) !important;
}

.cookiescript_fsd_cookies::-webkit-scrollbar,
.cookiescript_fsd_tabs_content::-webkit-scrollbar {
    width: 16px !important;
    height: 16px !important;
}

.cookiescript_fsd_cookies::-webkit-scrollbar-thumb,
.cookiescript_fsd_tabs_content::-webkit-scrollbar-thumb,
#cookiescript_iabwrap::-webkit-scrollbar-thumb,
#cookiescript_aboutwrap::-webkit-scrollbar-thumb {
    border-radius: 0px !important;
}

.cookiescript_fsd_cookies::-webkit-scrollbar-thumb,
.cookiescript_fsd_tabs_content::-webkit-scrollbar-thumb {
    background-color: var(--themePrimary) !important;
}

.cookiescriptlogo {
    fill: #ffffff !important;
}
#cookiescript_badge {
    background-color: var(--themePrimary) !important;
}

#cookiescript_fsd_wrapper,
#cookiescript_injected,
#cookiescript_badgetext {
    text-transform: none !important;
    font-family: inherit !important;
}

#cookiescript_description,
.cookiescript_fsd_description,
.cookiescript_category_description,
.cookiescript_fsd_cookies_table td,
.cookiescript_fsd_cookies_table th {
    font-size: inherit !important; 
}
/*CookieScript*/




.grid-btn-download .k-i-edit:before {
    font: 24px/1 FabricMDL2Icons;
    content: "\EA90";
    margin: 4px 0px 0px 4px;
    cursor: pointer;
}


/*Page sections*/
.page-section {
    padding: 3rem;

    @media screen and (max-width: 768px) {
        padding: 1.5rem;
    }
    
    .section__inner {
        padding-bottom: 1rem;
    }

    &.section-inverse--grey {
        background-color: var(--neutralLighter) !important;
    }
    &.section-inverse--dark-grey {
        background-color: var(--neutralDark) !important;
    }
    .terms {
        column-gap: 8px;
        grid-template-columns: 18px auto;
    }

    .terms > input {
        box-shadow: none;
        margin: 0 !important;
        grid-row: unset;
        grid-column: unset;
        padding: 6px 0px 5px 0px !important;;
    }

    h4 {
        margin: 0;
    }

    &#map {
        padding: 0px !important;
    }


    .section-title, .section-description  {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .section-1-1 {
        grid-template-columns: 1fr 1fr;
        gap:24px;
    }

    .section-2-3 {
        grid-template-columns: 2fr 3fr;
        column-gap: 2rem;
        align-items: center;
    }
    
    .section-3-2 {
        grid-template-columns: 3fr 2fr;
    }
    .section-4-col {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap:24px;
    }

    .section-auto-col {
        grid-template-columns: repeat(auto-fill, minmax(220px, auto));
        gap:24px;
    }


    .accordion {
        display: grid;
        row-gap: 4px;
        align-content: baseline;
    }

    .accordion-item {
        border: 1px solid var(--neutralLighter);
        overflow: hidden; /* Ensure content doesn't overflow */
        border-radius: 4px;
    }
    
    .accordion-title {
        background-color: #f1f1f1;
        padding: 0;
        cursor: pointer;
        display: grid;
        grid-template-columns: 1fr 32px;
    }

    .accordion-title > h5 {
        padding: 4px 12px 4px;
        margin: 0px;
        font: var(--fontSize-16);
        font-weight: 500;
    }

    .accordion-content {
        padding: 0 12px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .accordion-item.open .accordion-content {
        padding: 12px;
        max-height: 1000px; /* Adjust to a value that is taller than your content */
    }

    .team-card {
        display: grid;
        align-content: space-between;

        .card-image {

        }
        
        .card-title {
            margin: 0;
            text-align: left;
            grid-column: initial;
        }
        .card-info {

        }
    }

    .bnt-ronded {
        display: grid;
        align-content: center;
        border-radius: 4px;
        text-decoration: none;
        font-weight: 600;
        padding: 12px;

        &:hover {
            color: var(--color-white);
            background-color: var(--themeDark);
        }
    }

    .tag-list ul {
       padding-top: 12px 
    }
    .tag-list ul li {
        padding-top: 0;
        padding-bottom: 0.500em;
        margin-bottom: 0px;
        display: grid;
        justify-content: start;
    }
    .tag-list ul li a {
        text-decoration: none;
        font-weight: 600;
        display: grid;
        padding: 0px 0px 0px 8px;
        grid-auto-flow: column;
        gap: 8px;
        line-height: normal;

        &:hover {
            color: var(--color-white);
            background-color: var(--themeDark);
            border-radius: 4px;
        }
    }
    .badge-info {
        color: var(--color-white);
        background-color: var(--themePrimary);
        border-radius: 4px;
        padding: 2px 8px 3px 8px;
    }

/*
    &#company-campaign-list .section__inner .section-title {
       grid-column: 1/-1 !important;
    }
*/

    &#for-companies .section__inner--img-text > *:not(div.img) {
        margin-left: 0;
    }

    &#for-companies {
        .section-2-3 {
            align-items: start;
            justify-items: center;
        }

        @media screen and (max-width: 768px) {
            .section-2-3 {
                grid-template-columns: 1fr !important;
                row-gap: 2rem;
            }
            #company-name,
            #company-description {
                margin-right: 0;
            }
        }
    }

    #company-campaigns {
        .section__inner {
            border-bottom: 1px solid #E2E2E2;
            margin-bottom: 2.5rem
        }
        .section-2-3 {
            align-items: start;
            justify-items: center;
        }
        @media screen and (max-width: 768px) {
            .section-2-3 {
                grid-template-columns: 1fr !important;
                row-gap: 2rem;
            }
            .section__inner--img-text {
                .section-title,
                > * {
                    margin-left: 0;
                    margin-right: 0;
                }
            }
            
        }
    }


    &#company-campaign-list {
        padding-top: 0;

        .section-header {
            .section-title {
                padding-top: 0;
                padding-bottom: 2rem;
            }
        }

        .section__inner--img-text > .section-title {
            padding-top: 0;
            text-align: left;
        }
    }

    .company-card  {
        display: grid;
        grid-template-rows: 160px auto max-content;
        border: 1px solid var(--neutralLighter);
        border-radius: 4px;
        place-items: center;
        row-gap: .662rem;
        padding: .662rem;
        cursor: pointer;

        .company-name {
            margin-bottom: 0.75rem;
            font-weight: 500;
        }

        .company-image > img {
            max-height: 160px;
        }
    }
   
}


.registration-steps {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    margin-bottom: 24px;
    
    > .step {
        display: grid !important;
        place-items: center;
        color: var(--neutralSecondary);
        /*cursor: no-drop;*/

        .step-number {
            font-size: 18px;
            font-weight: 500;
            background: var(--color-white);
            padding: 4px 16px;
            border-radius: 4px;
        }
        
        .step-name {
            font-size: 14px;
            background: var(--color-white);
        }

        &.active {
            background: var(--color-white);
            /*cursor: pointer;*/
            .step-number {
                color: var(--color-white);
                background: var(--themePrimary);
            }
            .step-name {
                color: var(--neutralPrimary);
            }
        }

        
    }
    
}


.registration-container {
    .section-actons {
        margin-top: 24px;
    }
}

.step {
    display: none;
}

.step.current {
    display: grid;
}

button {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.next {
    float: right;
}

button.prev {
    float: left;
}

.wizard {

    .autoGrid-3-9 > *:nth-child(odd) {
        grid-column: 1 / 4;
        grid-row: initial;
        text-align: end;
    }
    .autoGrid-3-9 > *:nth-child(even) {
        grid-column: 4 / 13;
        grid-row: initial;
    }
    .autoGrid-5-7 > *:nth-child(odd) {
        grid-column: 1 / 6;
        grid-row: initial;
    }
    .autoGrid-5-7 > *:nth-child(even) {
        grid-column: 6 / 13;
        grid-row: initial;
    }
    .autoGrid-3-9 > label,
    .autoGrid-5-7 > label {
        justify-self: initial;
    }

    .k-widget.k-datetimepicker .k-picker-wrap > .k-select {
        width: auto;
        grid-template-columns: 1fr 1fr;
        column-gap: 2px;
        margin-bottom: 0.622em !important;
        border: 0;
    }

    .k-i-calendar,
    .k-i-clock {
        padding: 18px;
        box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
    }
    .k-datetimepicker .k-picker-wrap {
        padding-right: 0;
        column-gap: 8px;
        border: 0px;
    }
    .k-widget.k-datetimepicker .k-input {
        text-indent: 0;
        border-right: 0px;
        border-radius: 2px 0px 0px 2px;
    }
    .k-dropdown-wrap, .k-numeric-wrap, .k-picker-wrap {
        grid-template-columns: auto max-content;
    }

    .k-picker-wrap {

        &.k-state-focused,
        &.k-state-focused.k-state-hover {
            box-shadow: none;
        }
    }
        
    }
    .k-i-calendar:before {
        font-family: FabricMDL2Icons;
        content: "\F059";
    }
    .k-i-clock:before {
        font-family: FabricMDL2Icons;
        content: "\E917";
    }


    #campaign_start_dateview {
        background-color: #ffffff;
    }
    .k-dropdown-wrap .k-select {
        justify-content: center;
        padding: 11px;
    }


.k-popup,
table.k-editor {
    padding: 0px 0px !important;
    background-color: #ffffff;
    border: 0px !important;
    right: -1px;
    border-radius: 4px;
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
}

#campaign-description {
     
    .k-popup,
    table.k-editor {
        padding: 0px 0px !important;
        background-color: #ffffff;
        border: 0px !important;
        box-shadow:none;
        height: 100%;
    }

    .k-content {
        padding: 8px 6px !important;
        height: 100%;
    }

}

.k-widget.k-window.k-dialog {
    top: 132px !important;
    
    &.full-width {
        min-width: calc(100% - 64px) !important;
    }
    &.full-height {
        min-height: calc(100% - (264px + 10%)) !important;
        padding: 0;
        grid-template-rows: 74px auto 74px;

        #dialog-container {
            align-content: stretch  !important;
        }
    }
}




.k-popup.k-list-container {
    /*top: -12px;*/
    overflow: auto;
}
.k-widget.k-dropdown {
    width: max-content;
}

#partners {
    padding: 3rem;

    .partners-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, auto));
        column-gap: 3rem;
        row-gap: 3rem;

        .partner {
            display: grid;
            grid-template-columns: 1fr 140px;
            align-items: center;
            column-gap: 1rem;
            outline: 1px solid var(--neutralLighter);
            padding: 1rem;

            .partner-name {
                font-size: 24px;
                font-weight: 500;
                text-align: left;
            }
        }
    }
}


.label-info {
    display: block;
    font-weight: 400;
    padding: 12px 0 4px 0;
    font-size: 14px;
    /*0.622em !important*/
}

.file-upload {
    display: grid;
    position: relative;
    overflow: hidden;
}

.custom-file-upload {
    width: 110px;
    cursor: pointer;
    z-index: 999;
}

#company_logo,
#campaign_logo {
    position: absolute;
    left: 0;
    top: 32px;
    opacity: 0;
    width: 110px;
    height: 38px;
    cursor: pointer;
}


[id^="file-name-"] {
    position: absolute;
    display: block;
    left: 110px;
    top: 42px;

    margin-left: 12px;
    font-family: var(--app-font);
    font-size: 14px;
    color: #555;
}

#create-campaign, 
#create-donation {
    padding: 0 3rem 0 3rem;

    #pe-tab-content .tab-container.k-state-active {
        grid-template-rows: max-content auto auto;
    }

    #tab-header-content.title-actions {
        grid-template-columns: auto minmax(320px, max-content);
    }
    .tab-title-description {
        grid-column: 1 / -1;
    }


    .list-view-content-item {
        /*grid-template-columns: 320px 1fr max-content;*/
        column-gap: 6px;
        font-size: 16px;
        color: #000000;
        margin: 0 0 6px 0;
        grid-column: 3 / 10;
        
        &:hover {
            background-color: transparent !important;
        }

        .list-view-content-actions {
            align-self: center;

            .k-button {
                margin: 0px;
                width: 114px;
                padding: 0px !important;
                box-shadow: none;
                justify-content: start;
    
                .ms-Icon {
                    color: #ffffff;
    
                    &:hover {
                        background: transparent;
                    }
                }
            }
        }

        label {
            display: grid;
            grid-auto-flow: column;
            justify-content: end;
            column-gap: 2px;
            align-self: center;
            
            &::after {
                content: "*";
                display: block;
                color: red;
            }
        }

        
        &[id^="item-beneficiary"]:not([id="item-beneficiary"]),
        &[id^="item-initiator"]:not([id="item-initiator"]),
        &[id^="item-campaign"]:not([id="item-initiator"]),
        &[id^="item-number"]:not([id="item-initiator"]) {
            label {
                &::after {
                    content: ":";
                    color: var(--neutralPrimary);
                }
            }

            .inputFieldGroup {
                border: 0px !important;
                padding: 3px 0 0 0;

                &:hover {
                    border: 0px !important;
                }
            }
        }
    }
    #item-comment {
        label {
            &::after {
                content: ":";
                color: var(--neutralPrimary);
            }
        }
    }

    #borika-paymant-info {
        label {
            &::after {
                content: ":";
                color: var(--neutralPrimary);
            }
        }

        .inputFieldGroup {
            border: 0px !important;
            padding: 3px 0 0 0;

            &:hover {
                border: 0px !important;
            }
        }
    }


    .content-item-value {
        max-width: 100%;
        padding: 5px 8px;
        font-size: 15px;
        font-weight: 400;
    }

    .k-listview:after {
        display: none;
    }

    .tab-footer-content {
        display: grid;
        grid-template-columns: auto auto;
        margin-top: 24px;

        .action-buttons:not(:first-child) {
            text-align: right;
        }
    }

    .k-notification-error {
        background-color: transparent;

        .content-item-value {
            border-color: red !important; /*rgb(251,207,211)*/
            color: #000000;
            background-color: rgb(251,207,211);
        }

    }

    .k-notification-success {
        background-color: transparent;

        .content-item-value {
            border-color: #37b400 !important; /*rgb(223,246,221)*/
            color: #000000;
            background-color: #ffffff;
        }
        label {
            &::after {
                color: #37b400;
            }
        }
    }

    .k-notification-info {
        background-color: transparent;

        .content-item-value {
            border-color: transparent !important; /*rgb(223,246,221)*/
            color: var(--neutralSecondary);
            font-style: italic;
            background-color: #ffffff;
        }
    }

}

#create-donation {
    #pe-tab-content .k-tabstrip-items,
    #tab-header-content.title-actions {
        text-align: center;
    }
}


.k-datetimepicker {

    #datetimepicker {
        width: auto;
    }

    .k-picker-wrap {
        grid-template-columns: max-content 32px 32px !important;
        
        .k-select {
            grid-template-columns: 32px 32px !important;
            
            .k-link {
                width: 100%;
                text-align: center;
            }
        }
    }

    .k-icon {

        &.k-i-clock {
            margin-bottom: 3px !important;
        }
        &.k-i-calendar {
            margin-bottom: 1px !important;
        }

        &::before {
            margin: auto 0px !important;
        }
    }
}

.k-numeric-wrap {

    border: 1px solid var(--neutralPrimary) !important;

    &.k-state-hover {
        border: 1px solid var(--neutralSecondary) !important;
    }
    &.k-state-focused {
        box-shadow: none !important;
    }

    .k-input {
        text-indent: 0px ;
    }

    .k-icon {

        &.k-i-arrow-60-up{
            margin: 0 8px !important;
        }
        &.k-i-arrow-60-down {
            margin: 0 8px !important;
        }

        &::before {
            margin: 0 !important;
        }
    }
}

#tabImages {
    .k-grid-content.k-auto-scrollable {
        height: 100% !important;
    }

    .tab-main-content {
        overflow: auto;
        min-height: 230px;
    }

    td:first-child {
        width: 200px;
        img {
            width: auto;
            max-height: 80px;
        }
    }
}

#item-termsAccepted {
    #termsAccepted,
    .list-view-content-actions {
       display: none;
    }

}

#item-isAnonimous {
    #isAnonimous,
    .list-view-content-actions {
       display: none;
    }
}

#item-regularDonationCampaign {
    #regularDonationCampaign,
    .list-view-content-actions {
       display: none;
    }

    label {
        grid-column: 1/-1;
        justify-content: start !important;
        &::after {
            content: '' !important;
        }
    }
    p {
        grid-column: 1/-1;
        padding-left: 12px;
    }

    span {
        grid-column: 2/3;
        padding-left: 12px;
    }
}


#app-main-content .k-command-cell a {
    margin: 0;
    padding: 0 !important;

    &:hover > .k-icon {
        color: #ffffff !important;
    }
}

.k-grid table tr {
    cursor: pointer;
}

#profile,
#create-campaign {
    background-color: var(--neutralLighter);
    .profile-header {
        display: grid;
        grid-template-columns: auto;
    

        .user-profile {
            display: grid;
            grid-template-columns: 48px auto;
            column-gap: 8px;

            .user-icon {
                border-radius: 50%;
                color: var(--color-white);
                font-size: 16px;
                font-weight: 600;
                line-height: 46px;
                height: 48px;
                background-color: rgb(105, 121, 126);
                text-align: center;
            }

            .user-info {
                display: grid;
                align-content: center;

                .user-name {
                    display: inline;
                    line-height: 1.4;
                    font-size: 14px;
                    font-weight: 600;
                }
                .user-email {
                    font-size: 12px;
                    font-weight: 400;
                    color: rgb(96, 94, 92);
                    display: inline;
                    line-height: 1.4;
                }
            }

        }

        .section-title {
            font-size: 24px;
            font-weight: 600;
            color: rgb(50, 49, 48);
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4;
            padding: 0;
            text-align: left;
        }
    }
    #document-images-grid {
        height: 360px !important;
    }

}


#pe-tab-content {
    &.k-tabstrip-left {
        display: grid;
        column-gap: 16px;
        background: transparent;
        grid-template-columns: 280px auto;
        padding: 0 !important;
        grid-template-rows: 48px auto;
        row-gap: 32px;


        &.k-floatwrap:after {
            display: none;
        }

        .tab-container.k-state-active {
            margin: 0px auto 0 auto !important;
            background: transparent;
            padding: 0px 0px 0px 0px ;
            /*grid-template-rows: 48px auto;*/
            grid-row-gap: 32px;
            width: 100%;
            opacity: initial !important;
            grid-row: 1 / -1;
            grid-column: 2 / -1;
            max-width: 1024px;

            #tab-header-content.title-actions {
                align-content: center;
                grid-template-columns: 1fr 0px !important;
            }

            .tab-title {
                font-size: 24px;
                font-weight: 600;
                color: rgb(50, 49, 48);
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.4;
                padding: 0;
                text-align: left;
            }

            .tab-title-description {
                grid-column: 1/-1;
            }
            .tab-main-content {
                padding: 24px 16px !important;
                border-radius: 8px;
                background-color: #ffffff !important;
                box-shadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;

                &[id*='tabAccount']  {
                    padding: 0!important;
                    border-radius: 0 !important;
                    background-color: transparent !important;
                    box-shadow: none !important;                    
                    
                    #document-account {
                        display: grid;
                        row-gap: 16px;
    
                        section {
                            padding: 24px 16px !important;
                            border-radius: 8px;
                            background-color: #ffffff !important;
                            box-shadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
                        }
                    }

                }
            }

        }

        .k-tabstrip-items {
            background: transparent;
            position: sticky;
            top: 168px;
            align-self: start;

            .k-item {
                background: transparent; 
                border-bottom-color: transparent;
                border-radius: 4px;
                margin: 0;
                margin-bottom: 6px;
                padding: 8px 16px 8px 0;
                border-width: 0px;
                display: grid;
                grid-template-columns: 48px auto;
                cursor: pointer;
                font: var(--fontSize-14);

                &.k-state-hover {
                    background-color: var(--neutralLight);
                }
                
                &::before {
                    content: "\E77B";
                    display: block;
                    padding: 0 16px;
                    -webkit-font-smoothing: antialiased;
                    font-style: normal;
                    font-weight: normal;
                    speak: none;
                    font-family: "FabricMDL2Icons";
                    font-size: 16px;
                }

                &[id$='tabProfile'] {
                    &::before {
                        content: "\E77B";
                    }
                }
                &[id$='tabCampaigns'] {
                    &::before {
                        content: "\EFB6";
                    }
                }
                &[id$='tabBeneficiaries'] {
                    &::before {
                        content: "\E4F9";
                    }
                }
                &[id$='tabInitiators'] {
                    &::before {
                        content: "\F69C";
                    }
                }
                &[id$='tabHeader'] {
                    &::before {
                        content: "\F02B";
                    }
                }
                &[id$='tabDonations'] {
                    &::before {
                        content: "\EAE4";
                    }
                }
                &[id$='tabDonators'] {
                    &::before {
                        content: "\F25F";
                    }
                }
                /*Create campaign*/
                
                &[id$='tabCampaign'] {
                    &::before {
                        content: "\EFB6";
                    }
                }
                &[id$='tabRecipient'] {
                    &::before {
                        content: "\E4F9";
                    }
                }
                &[id$='tabInitiator'] {
                    &::before {
                        content: "\EE05";
                    }
                }
                &[id$='tabImages'] {
                    &::before {
                        content: "\F4E8";
                    }
                }
                &[id$='tabReview'] {
                    &::before {
                        content: "\F038";
                    }
                }


                .k-link {
                    padding: 0;
                    line-height: normal;
                    display: grid;
                    grid-auto-flow: column;
                    align-items: center;
                    &::before {
                        content: " ";
                        position: absolute;
                        left: 0px;
                        width: 3px;
                        height: 16px;
                        background-color: transparent;
                        opacity: 1;
                        transition: opacity 300ms;
                        border-radius: 999px;
                    }
                }

                &.k-state-active {
                    background: var(--color-white); 
                    border-bottom-color: transparent;
                    box-shadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
                    
                    &:hover {
                        background-color: var(--neutralLighter);
                    }

                    &::before {
                        color: var(--themeAccent);
                    }
                    
                    .k-link {
                        &::before {
                            background-color: var(--themeAccent);
                        }


                    }
                }
            }

        }

        .sys-id {
            font: var(--fontSize-12);
        }

        #document-beneficiaries {
            .accordion-item {
                .accordion-title {
                    grid-template-columns: 48px calc(50% - 104px) repeat(2, 1fr) 32px;
                }

                &.open {
                    .accordion-title {
                        grid-template-columns: auto  32px;
                    }

                }
            }
        }

        .accordion-item {

            border-radius: 8px;
            border: 1px solid var(--neutralLighter);
            border-bottom: 0px;
            box-shadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;

            .accordion-title {
                background-color: var(--color-white);
                display: grid;
                grid-template-columns: 48px 1fr  148px 32px;
                gap: 24px;
                padding: 8px;
                align-items: center;
                
                &:hover {
                    background-color: var(--neutralLighter);
                }

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

                .info.openHide {
                    display: grid;
                    
                    .sys-id {
                        display: grid;
                        grid-template-columns: 52px auto;
                        
                        span {
                            font-weight: 500;
                            display: block;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }

            &.open {
                .accordion-title {
                    border-bottom:  1px solid var(--neutralLighter);
                    display: grid;
                    grid-template-columns: auto  32px;
                    gap: 24px;
                    padding: 8px;
                    align-items: center;

                    .image, .openHide {
                        display: none;
                    }
                }

                .accordion-content {
                    .info {
                        display: grid;
                        row-gap: 12px;

                        .sys-id {
                            font-size: 14px;
                            font-weight: 400;
                            color: rgb(96, 94, 92);
                            display: inline;
                            line-height: 1.4;
                        }
                    }
                    .info.openHide {
                        display: grid;
                        
                        .sys-id {
                            
                            span {
                                font-weight: 500;
                                display: block;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                    .name {
                        -webkit-font-smoothing: antialiased;
                        font-size: 24px;
                        font-weight: 600;
                        display: inline;
                        line-height: 1.4;
                    }

                    .info-card-wrapper {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        column-gap: 24px;
                        grid-column: 1/-1;

                        .info-card-title {
                            font-size: 14px;
                            padding: 8px 0px 8px 16px;
                            font-weight: 600;
                        }
                        .info-card {
                            display: grid;
                            
                            .info-card-item {
                                display: grid;
                                grid-template-columns: 1fr 1fr;
                                font-size: 14px;
                                align-items: center;
                                background-color: var(--color-white);
                                padding: 8px 0px 8px 16px;
                                border-bottom: 1px solid var(--neutralLighter);
                                min-height: 24px;
                                cursor: pointer;
                                
                                &:hover {
                                    background-color: var(--neutralLighter);
                                }

                                span {
                                    font-weight: 600;
                                }
                            }

                        }

                    }
                }
            }
            
            .footer {
                grid-column: 1/-1;
                background-color: var(--neutralLighterAlt);
                padding: 8px 16px 8px 16px;
                border-top: 1px solid var(--neutralLighter);
                font-size: 14px;
                display: grid;
                grid-auto-flow: column;
                justify-content: space-between;
                
                a {
                    text-decoration: none;
                    margin: 0 8px;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }


    }
}

.action-buttons {
    display: grid;
    grid-auto-flow: column;
    column-gap: 8px;
    justify-content: start;
    padding: 16px 0 0 0;
    align-items:center;

    &.payment {
        grid-auto-flow: row;
        row-gap: 6px;

        button {
            height: 45px;
            background-color: rgb(0, 112, 186);

            &:hover {
                background-color: rgb(0, 112, 186);
                filter: brightness(0.95) !important;
            }
        }
    }

}



#paypal-button-container {
    display: grid;
    margin: 0 0 12px 0;
    box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;

}

@media only screen and (min-width: 200px) {
    .paypal-button-row {
        height: 36px !important;
        vertical-align: top;
        min-height: 36px !important;
        max-height: 56px;
        box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
    }
}


@media only screen and (min-width: 1920px) {
    .tab-container {
        padding: 0px 0px 10px;
        margin: 0px auto;
        max-width: 1184px ;
        width: 100%;
    }
}

@media only screen and (min-width: 1366px) {
    .tab-container {
        padding: 0px 0px 10px;
        margin: 0px auto;
        max-width: 968px;
        width: 100%;
    }
}

@media only screen and (min-width: 1024px) {
    .tab-container {
        padding: 0px 54px 10px;
        width: 100%;
    }
}

@media only screen and (min-width: 640px) {
    .tab-container {
        padding: 0px 48px 10px;
        width: 100%;
    }
}

@media only screen and (min-width: 480px) {
    .tab-container {
        padding: 0px 16px 10px;
        width: 100%;
    }
}

a.tag {
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    padding: 2px 4px 4px 4px;
    margin:0 4px 4px 0;
    line-height: normal;
    background-color: var(--themePrimary);
    border-radius: 4px;
    color: var(--color-white);

    &:hover {
        color: var(--color-white);
        background-color: var(--themeDark);
        border-radius: 4px;
    }
}

.goalTitle {
    margin-bottom: 0rem;
}

.goalDescription {
    margin-top: 0rem !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font) !important;
}

.campaign-goals {
    padding: 0 0 32px 0;
}


#hero-slider {
    /*
    display: grid;
    min-height: 420px !important;
    align-content: center;
    outline: 1px solid red;
    width: 100%;

    */
    
    display: grid;
    width: auto;
    height: 720px;

    .slick-slide {
        margin: 0;

        > div {
            height: 100%;
            display: grid;
        }
    }
    
    .slider-item {
        height: 100%;
    }
    
    .slick-track {
        height: 100%;
    }

    @media screen and (max-width: 1023px) {
        height: auto;
    }

}
.slider-item {
    padding: 3em 6em;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: grid !important;
    align-content: center;
    /*justify-items: start;*/

    @media screen and (max-width: 1023px) {
        padding: 3em 3em;
    }
    @media screen and (max-width: 767px) {
        padding: 2em 1em;
    }

}
.cta-image {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.slick-prev {
    left: 32px ;
    z-index: 100 !important;
}
.slick-next {
    right: 32px ;
    z-index: 100 !important;
}
.donation-request-info {

    display: grid;
    grid-template-columns: 1fr;
    column-gap: 24px;
    row-gap: 12px;
    margin-top: 24px;
    justify-items: center;

    .donation-request-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 8px;
        align-items: center;

        .donation-request-info-label {
            font-weight: 600;
            text-align: right;
        }
        .donation-request-info-value {
            font-weight: 400;
            display: grid;
            grid-auto-flow: column;
            align-items: center;
        }
    }
    .donation-request-header {
        grid-column: 1/-1;
        text-align: center;
    }
}

.copy-btn {
    position: relative;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    background: var(--themePrimary);
    margin: 0 0 0 8px;
}

.copy-btn .tooltip-text {
    visibility: hidden;
    background-color: var(--themeAccent);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 8px;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
    font-size: 13px;
    z-index: 100;
}

.copy-btn .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.copy-btn .tooltip-text.show-tooltip {
    visibility: visible;
    opacity: 1;
}

#cmp-qrcode {
    display: block;
    max-width: 240px;
    margin-left: -19px;
}

.tab-main-content-actions {
    margin-bottom: 16px;
    background: transparent !important;
    margin-top: -8px;
    justify-content: end !important;
}

@media only screen and (max-width: 479px) {
    .basket {
        grid-template-columns: 1fr;
        column-gap: 24px;
        padding: 0 24px 0px 24px;
    }
    :where(#basket-content) .cart-pannel-item {
        grid-template-columns: 70px 1fr !important;
    }
    :where(#basket-content .cart-pannel-item)  .cart-pannel-image{
        width: 70px !important;
        height: 70px !important;
    }
    #expected .k-button.inverse.button--big {
        font-size: 150%;
        padding-bottom: 0.85rem;
        margin-bottom: 0;
    }

    .products-scroller > div {
        padding: 0px 24px;
        /*width: calc(100% - 108px);*/
    }
    div.k-scrollview ul.k-scrollview-wrap > li {
        width: 100vw !important;
        left: -48px;
    }
    ul.k-scrollview-wrap > li > .img-wrapper {
        padding: 0 48px 0px 48px;
        column-gap: 24px;
    }
    
    .products-scroller .k-scrollview-next, .products-scroller .k-scrollview-prev {
        width: 32px;
        height: 100%;
        top: 0;
    }
    .products-scroller .k-scrollview-next {
        margin-right: 12px;
    }
    .products-scroller .k-scrollview-prev {
        margin-left: 12px;
    }
    .products-scroller > div .k-icon:before {
        width: auto;
    }
    .slick-slide {
        margin: 0 0px;
    }
    .slick-slide > div > .prd-cadr {
        padding: 0;
    }
    .slick-prev {
        left: 0px !important;
    }
    .slick-next {
        right: 0px !important;
    }

    .prevent-scroll {
        overflow: hidden;
        position: fixed;

        #main-container::after {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
        }
    }
    #prd-name {
        font-size: 32pe !important;
    }
    .campaign-donated {
        &.view-page {
            grid-auto-flow: row !important;
            row-gap: 1rem;
        }
    }
    #donors .donations-list-item {
        grid-template-columns: 1fr;
    }
    .section-tabs .tab-content.trip-tabs {
        padding: 0px !important;
    }
    #active-company-list {
        &.page-section {
            padding-left: 0px;
            padding-right: 0px;
            
            .section-content {
                padding: 24px;
                /*width: calc(100vw - 12px);*/
            }
        }
    }
    #last-donations {
        padding-left: 0px;
        padding-right: 0px;
    }

    #product-view-wrapper .slick-slide {
        /*aspect-ratio: auto;*/
    }
    .section-tabs {
        padding: 0px 24px !important;
    }

    #create-campaign {
        padding: 24px;

        #pe-tab-content {
            &.k-tabstrip-left {
                .tab-container.k-state-active {
                    grid-row-gap: 0px;
                    margin: 0 !important;
                    padding: 0px !important;

                    .tab-title {
                        white-space: initial;
                        overflow: initial;
                        text-overflow: initial;
                    }
                    .tab-main-content {
                        margin-top: 48px   
                    }
                }
                /*
                .k-tabstrip-items {
                    width: 0;
                    display: none;
                }
                */
            }
        }
        #tab-header-content.title-actions {
            grid-template-columns: 1fr;
        }

    }

    .k-widget.k-window.k-dialog {
        width: 50% !important;
        z-index: 999999;
        
        /*Drawer like dialogs
        
        width: 50% !important;
        height: calc(100vh - 56px);
        max-height: 100vh;
        left: unset !important;
        top: 0 !important;
        right: 0 !important;
        align-items: start;
        */
        .k-dialog-buttongroup.k-dialog-button-layout-stretched {
            justify-content: flex-start;
        }
    }

}

#document-donators,
#document-donations {
    & .accordion-item {
        .accordion-title.donations {
            grid-template-columns: max-content 1fr auto 32px;

            .amount-header {
                grid-template-columns: 1fr;
                justify-items: end;

                .sys-id {
                    grid-template-columns: 1fr 64px !important;
                    justify-items: end;
                }
            }
        }
        &.open {
            
            .accordion-content {
                .info {
                    grid-column: 1/3;
                }

            }
        }
    }
}

#active-company-campaign {

    .campaign-card {
        grid-template-rows: 240px auto max-content max-content max-content;
    }

    .supported-by {
        display: grid;
        padding: 0 16px 12px 16px;
        margin-bottom: 8px;

        .supported-by-company {
            display: flex;
            padding: 6px 0;

            
            span:not(:last-child)::after {
                content: "|" !important;
            }

            a {
                margin: 4px 8px;
            }
            span:first-child a {
                margin-left: 0;
            }
        }

    }
}

#document-campaigns {
    .accordion-item {
        [class^="campaign-"] {
            border-radius: 4px;
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            padding: 2px 8px;
            width: fit-content;
        }
        .campaign-waiting {
            background-color: #fffef5;
            border: 1px solid #817400;
            color: #817400;
        }
        .campaign-approved {
            background-color: rgb(223, 246, 221);
            border: 1px solid rgb(16, 124, 16);
            color: rgb(16, 124, 16);
        }
        .campaign-rejected {
            background-color: rgba(252,243,244,255);
            border: 1px solid rgba(164, 38, 44,255);
            color: rgb(164, 38, 44,255);
        }
        .campaign-completed {
            background-color: var(--neutralLighterAlt);            
            border: 1px solid var(--neutralSecondary);
            color: var(--neutralSecondary);
        }
        .campaign-new {
            background-color:rgb(227,239,250);
            border: 1px solid rgb(0, 24, 143);
            color: rgb(0, 24, 143);
        }
    }
}



/*Social share*/
.social-share {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: sans-serif;  
  border-top: 1px solid var(--neutralLighter);
  padding-top:12px;

}

.social-share span {
  font-weight: 600;
}

.social-share a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}

.social-share a:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* Platform colors */
.social-share .facebook { background: #1877f2; }
.social-share .linkedin { background: #0077b5; }
.social-share .x { background: #000000; }
.social-share .whatsapp { background: #25D366; }



/*Company campaigns*/
.company-camaigns {
    .selected-campaigns-header {
        display: flex;
        p {
            font-weight: 500;
            margin-bottom: 8px;
        }
        border-bottom: 1px solid var(--neutralLight)
    }

    .selected-campaigns-list {
        display: flex;
        flex-flow: wrap;
        gap: 12px;
        padding: 16px 0;
        margin-bottom: 16px
    }

    .selected-campaign-item {
        display: grid;
        grid-template-columns: max-content 32px;
        color: #ffffff;
        font-weight: 500;
        background: var(--themePrimary);
        font-size: 14px;
        border-radius: 16px;
        align-items: center;
        padding: 0 0 0 12px;

        &:hover {
            background: var(--themeDark);
        }
    }

    .btn-remove-campaign {
        height: 32px;
        width: 32px;
        .ms-Icon {
            font-size: 12px;
            font-weight: 600;
            margin: 2px;
            cursor: pointer;
        }

    }
}

@media only screen and (max-width: 639px)   {
    #contact {
        &.page-section {
            .section-1-1 {
                grid-template-columns: 1fr !important;
            }
        } 
    }

}