@import url("/OutSystemsUIWeb/Theme.BaseTheme.css?192");

/* ================================================

Primary color customization
For additional color customizations, you can change the color code for the colors below

  ================================================ */
  
  :root {
    --color-primary: #f13029; /*primary-color*/
    --color-primary-hover: #f13029; /*primary-color*/
    --color-secondary: #f13029; /*primary-color*/
    --color-bordercat: #CCCA71; /* Homepage border categories color */
    --font-title: Varela;
    --header-size: 80px;
    --title-font: Varela;
    --text-font:Arial;
    --font-size-ms: 11px; 
    --font-size-xxs: 10px;   
    
    /*--website-width:974px;
    --menu-width: 240px;
    --central-width: 480px;*/
}

body{
    /*overflow: overlay;*/
    font-family: Arial;
    overflow-x: auto;
}

.layout.layout-top .header {
    position: static;
}

/* ================================================================================== */
/* ================================================================================== */
/* ================================ IMPORT FONT FOR TITLES ========================== */

@font-face {
  font-family: 'Varela';
  src: url('/DelhaizeCaddypro_TH/VarelaRound-Regular.eot'), /* IE9 Compat Modes */
       url('/DelhaizeCaddypro_TH/VarelaRound-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/DelhaizeCaddypro_TH/VarelaRound-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/DelhaizeCaddypro_TH/VarelaRound-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('/DelhaizeCaddypro_TH/VarelaRound-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/DelhaizeCaddypro_TH/VarelaRound-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* =================================================== */

.ThemeGrid_Container{
    max-width: 974px;
    min-width: 974px;
}

.layout-top .header .ThemeGrid_Container, .layout-top .content .ThemeGrid_Container{
    padding: 0;
}

.layout .main{
    padding-top: 0;
}

.layout .header{
    background: #EAEDED;
    box-shadow:none;
}

.layout .content{
    background: #EAEDED;
}

/* ===== Disable elements on mobile "disable" resposive elements ===== */

.tablet .menu-icon,.phone .menu-icon{
    display: none;
}

.header-top{
    height: var(--header-size);
    background-color: #FFFFFF;
    border-left: 1px solid var(--color-neutral-4);
    border-right: 1px solid var(--color-neutral-4);
    }
    
.header-content{
    background: rgb(221,8,15);
    background: -moz-linear-gradient(180deg, rgba(221,8,15,1) 0%, rgba(145,0,0,1) 73%);
    background: -webkit-linear-gradient(180deg, rgba(221,8,15,1) 0%, rgba(145,0,0,1) 73%);
    background: linear-gradient(180deg, rgba(221,8,15,1) 0%, rgba(145,0,0,1) 73%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dd080f",endColorstr="#910000",GradientType=1);
    border-left: 1px solid var(--color-neutral-4);
    border-right: 1px solid var(--color-neutral-4);
}

.header .Menu_DropDownButton {
    height: 32px;
}

.header .MenuWrapper{
    margin-left:22px;
}

/* ================================================================================== */
/* ================================================================================== */
/* ========= Forms, input text, comboboxes and radio buttons customization ========== */


.checkbox:before, .radio-button:before{
    background-color:transparent;
    width:16px;
    height:16px;
    cursor:pointer;
    height: 16px;
}

.checkbox:after{
    left: 2px;
    top: 4px;
}

.radio-button span, .checkbox span{
    font-size: var(--font-size-xs);
}

.input.ReadOnly:not(.Not_Valid){
    height:35px;
    font-size: var(--font-size-xs);

}

.layout .Form .input.ReadOnly:not(.Not_Valid){
    height:35px;
    font-size: var(--font-size-xs);
    background-color: #f4f4f4;
}

.layout .Form .input.Not_Valid{
    height:35px;
    font-size: var(--font-size-xs);
}

.Form:not(.ReadOnly) input.ReadOnly span{
    font-size: var(--font-size-xs);
}

.Form:not(.ReadOnly) input.ReadOnly{
    background-color: transparent;
}



.Form.form-top label{
    font-size: var(--font-size-xs);
    display: inline-table;
}

.input:focus, .select:focus{
    font-size: var(--font-size-xs);
    height:35px;
}

.layout .Form .select.ReadOnly:not(.Not_Valid){
    height:35px;
    font-size: var(--font-size-xs);
}

.layout .Form .select.Not_Valid{
    height: 35px;
    font-size: var(--font-size-xs);
}

.radio-button:checked:before {
    background-color: var(--color-neutral-0);
    border: 4px solid var(--color-primary);
    height: 10px;
    width: 10px;
}

.select2-container .select2-choice{
    margin-left: -16px;
    width: calc(100% + 32px);
    height: 33px;
    border: none;
    padding: 4px 0 0 12px;
}

.select2-drop-active{
    border: var(--border-size-s) solid var(--color-neutral-5);
}

.select2-container .select2-choice .select2-arrow{
    display: none;
}

.select2-container .select2-choice .select2-arrow b{
    display: none;
}

.select2-result-label{
    font-size: 12px;
}

.choices[data-type*="select-one"]:after {
    content: unset;
}

.choices__inner {
    height: 35px;
    padding-left: 12px;
    border: var(--border-size-s) solid var(--color-neutral-5);
}

.choices__list--single .choices__item {
    padding-top: 2px;
}

.choices__item {
    font-family: 'Arial';
    font-size: 12px;
}

.choices__list--dropdown .choices__item {
    height: 30px;
}

.choices .search--wrapper {
    padding: 0px;   
}

.FormEditPencil{
    display: none;
}

/* ================================================================================== */
/* ================================================================================== */
/* ================================== HEADER AND MENU =============================== */

/* Menu Top Buttons */
.desktop .header .Menu_TopMenu, .tablet .header .Menu_TopMenu, .phone .header .Menu_TopMenu{
    padding: 0 20px;
    margin-left: 2px;
    height: 30px;
    margin-top: 2px;
}

/*Disabled Top Menu Buttons */
.Menu_TopMenu > div a, .Menu_TopMenu > div a:visited{
    font-family: var(--title-font);
    color: #FFFFFF;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    border: none;
    margin-top: 2px;
    height: 30px;
}


.header .Menu_TopMenu:hover > div a{
    color: #BE0405;
}

/* Selected Button */
.header .Menu_TopMenu.Menu_TopMenuActive > div a{
    color: #BE0405;
    font-weight: normal;
}

/* Active Top Menu Buttons */
.header .Menu_TopMenu.Menu_TopMenuActive{
    font-family: var(--title-font);
    color: #DC0A0F;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    border: none;
    background: linear-gradient(0deg, rgba(200,200,200,1) 0%, rgba(238,238,238,1) 73%);
    margin-top: 2px;
    height: 30px;
}

.desktop .header .Menu_TopMenu:hover, .tablet .header .Menu_TopMenu:hover, .phone .header .Menu_TopMenu:hover{
    font-family: var(--title-font);
    color: #DC0A0F;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    border: none;
    background: linear-gradient(0deg, rgba(200,200,200,1) 0%, rgba(238,238,238,1) 73%);    
    margin-top: 2px;
    height: 30px;
}

.desktop .header .Menu_TopMenu > div, .tablet .header .Menu_TopMenu > div,.phone .header .Menu_TopMenu > div{
    padding: 0;
}

.desktop .header .Menu_DropDownButton:not(:first-child), .tablet .header .Menu_DropDownButton:not(:first-child), .phone .header .Menu_DropDownButton:not(:first-child) {
    margin-left: 0;
}

.layout-top .content .ThemeGrid_Container {
    padding: 0;
}


/* ==================== Remove numeric Steper ==================== */
/* =============================================================== */

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}



/* ========================== INTERNET EXPLORER 11 FIX =============== */
/* =================================================================== */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    .ie10 .Menu_TopMenu > div a, .ie11 .Menu_TopMenu > div a, .ie10 .Menu_TopMenu > div a:visited, .ie11 .Menu_TopMenu > div a:visited {
        color: white;
    }

    .ie11 .header .Menu_TopMenu:hover, .ie11 .header .Menu_TopMenu.Menu_TopMenuActive {
        border-bottom: none;
    }

    .ie10 .is--sticky, .ie11 .is--sticky {
        position: none;
        top: 170px !important;
        width: 280px;
    }

    .ie11 .layout-top .header .ThemeGrid_Container{
        padding: 0;
    }

    .ie10 .layout-top .content .ThemeGrid_Container, .ie11 .layout-top .content .ThemeGrid_Container{
        padding: 0;
    }

    .ie11 .ie10 .Menu_TopMenu > div a, .ie11 .Menu_TopMenu > div a, .ie10 .Menu_TopMenu > div a:visited, .ie11 .Menu_TopMenu > div a:visited{
        color: #FFFFFF;
    }

    .ie11 .header .Menu_TopMenu.Menu_TopMenuActive > div a, .ie10 .header .Menu_TopMenu.Menu_TopMenuActive > div a{
    color: #be0405;
    }

    .ie11 :checked.checkbox:hover::before, .ie11 :checked.radio-button:hover::before, .ie11 .TableRecords .TableRecords_Header[type='checkbox']:checked:hover::before{
            height: 16px;
    }

    .ie11 .layout .header{
        background-color: transparent;
    }

    .ie11 .checkbox, .radio-button, .TableRecords .TableRecords_Header [type="checkbox"] {
        width: 18px;
        height: 18px;
    }

}


/* ========================== Microsoft Edge Fix ==================== */
.edge input[type=radio] {
      width: 16px;
      height: 16px;
    }
    
input[type=checkbox]::-ms-check{
    width: 18px;
    height: 18px;
    background: #ffffff;
    color: red;
    border: 1px solid red;
    border-radius:3px;
}


/* ========================== TITLES AND TEXTS ======================= */


.SectionTitle{
    font-family: var(--title-font);
    font-weight: normal;
    font-size: var(--font-size-h3);
}

.FormTitle{
    font-family: var(--title-font) !important;
    font-weight: normal;
    font-size: var(--font-size-h5) !important;
    color: #000 !important;
}

.normalText{
  font-size: var(--font-size-xs);
  color: var (--color-neutral-8);
}

.smallText{
  font-size: var(--font-size-ms);
  color: var (--color-neutral-7);
}

.faqQuestions{
    font-family: var(--title-font);
    font-size: var(--font-size-h6);
    line-height: 1;
}


.section-title{
    line-height: 1;
}


.TableColumn{
    word-wrap: break-word;
}

.ColumnsTitle{
    font-size: var(--font-size-xs);
    font-weight: normal;
}

.FormWrapper{
    padding: 30px;
    background-color: #fafafa;
    border: 1px solid #BFE09D;
    border-radius: 4px;
    margin-top: 20px
}



/* =============== Website Areas =============== */

.main-content{
    background-color: #FFFFFF;
    border-left: 1px solid var(--color-neutral-4);
    border-right: 1px solid var(--color-neutral-4);
}


.LanguageWrapper{
    display: flex;
}

.UserWrapper{
    padding-right: 8px;;
}

.Categories{
    width: 240px;
    background-color: yellow;
}

.TableColumn{
    word-wrap: break-word;
}

.TableColumn .title{
    font-size: var(--font-size-xs);
    font-weight: normal;
}

.content-breadcrumbs{
    background: linear-gradient(180deg, rgba(200,200,200,1) 0%, rgba(255,255,255,1) 73%);
    height: 30px;
    padding: 8px 0 0 25px;
}

.Central{
    width: 480px;
    background-color: white;
}

.content-middle{
    background-color:#FFFFFF;
    padding: 20px;
}

.FormWrapper{
    padding: 30px;
    background-color: #fafafa;
    border: 1px solid #BFE09D;
    border-radius: 4px;
    margin-top: 20px
}

.footer{
    background-color: #FFFFFF;
    border-left: 1px solid var(--color-neutral-4);
    border-right: 1px solid var(--color-neutral-4);
}

.MyProfileLink {
    color: #000   
}


.breadcrumbs-item{
    font-size: var(--font-size-xs);
}

.breadcrumbs-item .icon{
    color: #30980D;
}

.breadcrumbs-item .icon .fa-fw{
    font-size: var(--font-size-xs);
}

/* ================================================================================ */
/* ================================ BUTTONS ======================================= */

.Button{
    font-family: var(--title-font);
    font-weight: normal;
    font-size: var(--font-size-xs);
    height: 35px;
}

.Button.Success{
    background-color:var(--color-primary);
    color: white;
    font-weight: normal;
    font-size: var(--font-size-xs);
    height: 35px;
}

.Button.Cancel{
    background-color:#cccccc;
    color: #333333;
    border: 1px solid #ccc;
    font-weight: normal;
    font-size: var(--font-size-xs);
    height: 35px;
}

/* ============= NAVIGATION BUTTONS PRODUCT LIST / BASKET ============ */

.NextPrevBtn{
    width: 32px;
    height: 32px;
    border-radius: 4px;
    text-align: center;
    padding-top: 5px;
    background-color: #fafafa;
    border: 1px solid #ccc;
    color: #333;
}


.FilterNav{
    padding: 10px;
    margin-top: 10px;
    background: rgb(242,242,242);
    background: -moz-linear-gradient(180deg, rgba(242,242,242,1) 0%, rgba(255,255,255,1) 68%);
    background: -webkit-linear-gradient(180deg, rgba(242,242,242,1) 0%, rgba(255,255,255,1) 68%);
    background: linear-gradient(180deg, rgba(242,242,242,1) 0%, rgba(255,255,255,1) 68%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2f2f2",endColorstr="#ffffff",GradientType=1);
}

.NotAvailable{
    opacity: .4;
}

.DisplayNone {
    display: none;
    width: 0px;
    height: opx;
}


.TableRecords .TableRecords_OddLine{
    height: 35px;
}

.TableRecords .TableRecords_EvenLine{
    height: 35px;
}

/* Custom Table records css, to "disable" the responsiveness of this element */

.CustomTableRecords tbody tr {
    height:35px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.CustomTableRecords tbody tr td {
    border-bottom: 1px solid #ccc;
}

.TableRecords_Header {
    font-weight: bold;
    height: 30px;
    border-bottom: 1px solid #ccc;
}

/* ============= ProducPicture WB deposit fee overlay ============ */

.ProductPictureWBContainer {
    width: 100%;
    height: 100%;
    position: relative;
}

.ProductPictureWBContainerIcon {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 3;
}