/*COLORES*/
    .creamApp{color: #fcf8e8}
    .creamBApp {background-color: #fcf8e8}
    .greenApp {color: #8fad99;}
    .greenBApp {background-color: #8fad99;}
    .colorBFood {background-color: #4b6755;}
    .colorBDrink {background-color: #554b67;}
    .colorBSnack {background-color: #c07a78;}
    .colorBDessert {background-color: #675e40;}
    .colorFood {color: #4b6755;}
    .colorDrink {color: #554b67;}
    .colorSnack {color: #c07a78;}
    .colorDessert {color: #675e40;}
    .borderColorFood{border-color:#4b6755 !important;}
    .borderColorDrink{border-color:#554b67 !important;}
    .borderColorSnack{border-color:#c07a78 !important;}
    .borderColorDessert{border-color:#675e40 !important;}
    
/*GENERALES*/
    .pdt1{padding-top: 1em !important;}
    .pdt1-5{padding-top: 1.5em !important;}
    .pdt05{padding-top: 0.5em !important;}
    .pdl2{padding-left: 2rem !important;}
    .pdr2{padding-right: 2rem !important;}
    .mb0{margin-bottom: 0em !important;}
    .pdb1{padding-bottom: 1em !important;}
    .w100{width: 100%;}
    .pdl0{padding-left: 0 !important;}

/*MATERIALIZE*/
    .card {border-radius: 1em !important;padding: 1em;}
    .card-panel{padding: 1em; border-radius: 1em !important;margin: .5rem 0 0rem 0;}
    @media only screen and (min-width: 993px) {
        .container {
            width: 50%;
        }
    }

    .input-field input[type=text]:focus + label {color: #8fad99;}
    .input-field input,.input-field label,
    textarea,textarea:not(.browser-default):not([readonly]) {color: #f8f4e5;}
    .input-field input[type=text]:focus {
        border-bottom: 1px solid #8fad99;
        box-shadow: 0 1px 0 0 #8fad99;
    }
    [type="checkbox"].filled-in:checked + span:not(.lever)::after {
        top: 0;
        width: 20px;
        height: 20px;
        border: 2px solid #8fad99;
        background-color: #8fad99;
        z-index: 0;
    }
    .input-field .prefix.active {color: #8fad99;}
    #slideMyData .input-field .prefix.active {color: #f8f4e5;}
    input[type="text"]:not(.browser-default):focus:not([readonly]),
    input[type="email"]:not(.browser-default):focus:not([readonly]),
    input[type="password"]:not(.browser-default):focus:not([readonly]),
    textarea:not(.browser-default):focus:not([readonly]){
        border-bottom: 1px solid #8fad99;
        box-shadow: 0 1px 0 0 #8fad99;
    }
    #slideMyData input[type="text"]:not(.browser-default):focus:not([readonly]),
    #slideMyData input[type="email"]:not(.browser-default):focus:not([readonly]),
    #slideMyData input[type="password"]:not(.browser-default):focus:not([readonly]),
    #slideMyData textarea:not(.browser-default):focus:not([readonly]){
        border-bottom: 1px solid #f8f4e5;
        box-shadow: 0 1px 0 0 #f8f4e5;
    }
    input[type="text"]:not(.browser-default):focus:not([readonly]) + label,
    input[type="email"]:not(.browser-default):focus:not([readonly]) + label,
    input[type="password"]:not(.browser-default):focus:not([readonly]) + label,
    textarea:not(.browser-default):focus:not([readonly]) + label{
        color: #8fad99;
    }
    .input-field .prefix ~ select {width: calc(100% - 3rem); margin-left: 3rem;}
    .datepicker-day-button {color: #343434;}
    .is-disabled .datepicker-day-button {color: #b0b0b0;}
    .datepicker-date-display {background-color: #8fad99;}
    .btn:not(.btn-floating), .btn-large:not(.btn-floating), .btn-small:not(.btn-floating) {border-radius: 1em;}
    a {color: inherit}
    .btn-floating:hover {
        background-color: #8fad99;
    } 
    .btn:hover{background-color: #ffab40;}


/*HEADER*/
    #header{ 
        padding-bottom: 5px;
        position: fixed;
        width: 100%;
        z-index: 2;
        height: 7.5em;
        border-radius: 0 0 1em 1em;
    }
    .avatar{width: 3.5em; position: relative;top: 0.5em;}
    .logo {width: 3.5em; position: relative;top: 0.8em;}
    #buscador{margin: 0em 2em;border-radius: 1em;height: 4em;background-color: #fcf8e8 !important;border: 0.01em solid #8fad99;}

/*FOOTER*/
    footer { position: fixed; bottom: 0px; z-index: 999; padding: 0.25em; width: 100%; color: whitesmoke; line-height: 1em;border-radius: 1em 1em 0 0;}
    footer a { color: whitesmoke;}
    /*.footerStyle{border-radius: 1em; padding: 0.5em;}**/
    /* NIGHT / DAY */
        .night-light-label #night-light-checkbox {
            position: absolute;
            visibility: hidden;
        }
        
        .night-light-label {
            display: block;
            margin-top: 3px;
            height: 31px;
            width: 60px;
            border: 2px solid #fcf8e8;
            border-radius: 30px;
            position: relative;
            cursor: pointer;
            transform: scale(0.7);
        }
        
        .night-light-label .night-light-ball {
            position: absolute;
            width: 25px;
            height: 25px;
            top: 1px;
            left: 1px;
            border-radius: 50%;
            background: #fcf8e8;
            z-index: 99;
            transition: 300ms;
        }
        
        .night-light-label #night-light-checkbox:checked + .night-light-ball {transform: translateX(28px);}
        
        .moon-svg,
        .sun-svg {
            width: 16px;
            height: 16px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .moon-svg {right: 5px;}      
        .sun-svg {left: 5px;}

/*BODY*/
    body {font-size: 1em;}

/*CONTAINER*/
    .container {
        padding: 140px 0px;
        max-width: 1280px;
        width: 100%;
        margin: 0 auto;
    }

/*FILTER*/
    #sectionFilter{padding-top: 1em;padding-left: 1rem;padding-right: 1rem;}
    #sectionFilter .btn-floating {width: 4em;height: 4em;}
    #sectionFilter .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        padding: 0.8em;
    }
    .btnIcons { width: 2.5em;padding-top: 0.6em;}
    .btnBorderText{
        width: 4em;
        margin: -1.6em auto 0 auto;
        border-bottom: 1px solid;
        border-left: 1px solid;
        border-right: 1px solid;
        border-radius: 0em 0em 1.8em 1.8em;
        height: 4.5em;
        padding-top: 1.8em;
    }
    .btnText{font-size: 0.9em;}

/*DESTACADOS*/
    #sectionDestacados{padding-left: 1.3rem;padding-right: 1.3rem;}
    #btnDestacados{
        width: 100%;
        background-color: #8fad99;
        background-size: cover;
        object-fit: contain;
        border-radius: 1em;
        max-height: 250px;
    }
    #btnDestacados.card{
        min-height: 140px !important;
    }

/*RECOMENDADOS*/
    #sectionRecomendados{padding-left: 1.3rem;padding-right: 1.3rem;}
    .swiperRecomendados .card{min-height: 100px !important;}   
    .swiperRecomendados img{
        width: 100%;
        background-color: #8fad99;
        background-size: cover;
        object-fit: contain;
        border-radius: 1em;
    }
    .slideInRecomendados{padding-left: 1.3rem;padding-right: 1.3rem;}
    .slideInRecomendados .imgMeal{
        width: 100%;
        background-color: #cccccc;
        background-size: cover;
        object-fit: contain;
        border-radius: 1em;
    }
    .slideInRecomendados .title-meal{font-size: 1.2em;font-weight: bold;}
    .slideInRecomendados .imgMealStore{width: 100%; border-radius: 2em;}
    .slideInRecomendados .store-meal{font-size: 1.1em;font-weight: bold;}
    .slideInRecomendados .price-meal{font-size: 1.1em;font-weight: bold}
    .addOrder{width: 100%;}
    .swiperToppings .cardTopping{padding: 0.5em;border-radius: 1em; background-color: transparent; border: 1px solid #8fad99;cursor: pointer;}
    .swiperToppings .cardTopping img {width: 100%;}
    .swiperToppings .cardTopping.active{border: none;background-color: #8fad99;}
    .swiperToppings .cardTopping.active .toppingText{color: #fcf8e8}
    .swiperToppings .toppingText{color: #8fad99; padding-bottom: 0.5em; font-size: 0.7em; text-align: center;}
/*COMERCIOS*/
    #sectionComercios{padding-left: 1.3rem;padding-right: 1.3rem;}
    .swiperComercios .card{min-height: 80px !important;}   
    .swiperComercios img{
        width: 100%;
        background-color: #cccccc;
        background-size: cover;
        object-fit: contain;
        border-radius: 1em;
    }

/*MYDATA*/
    #newLocationBtn{
        background-color: transparent;
        border: 1px solid #fcf8e8;
        color: #fcf8e8;
    }

/*COMERCIOS - MENU*/
    .swiperMenuBtn{background-color: transparent;border: 1px solid #8fad99; color: #8fad99;padding: 0.5em;}
    .swiperMenuBtn.active{background-color: #8fad99;border: none; color: #fcf8e8;padding: 0.5em;}
    .swiperMenuBtn img {width: 100%;}
    .menuCard .menuTitle{font-weight: 600; font-size: 1.2em;}
    .menuCard .menuPrice{font-weight: 600; font-size: 1.2em;}
    .menuCard.card {padding: 0 !important; margin-bottom: 3em; /*max-height: 99px;*/}
    .menuCard.card .menu-content{padding: 0.5em 1em 0 0.5em;;}
    .menuCard.card img{
        border-radius: 1em 0 0 1em;
        width: 100%;
        background-color: #cccccc;
        background-size: cover;
        object-fit: contain;
    }
    .menuCard.card .menuDescription{font-size: 0.9em;}