$grey: #F5F5F5;
$dark-grey: #323B40;

$light-blue: #E0F5FF;
$blue: #B9E5FE;
$dark-blue: #00A5FA;

$green: #B7E0DC;
$dark-green: #019888;

$lime: #C7E8C8;
$dark-lime: #42B045;

$yellow: #FFEEBA;
$dark-yellow: #FF9901;

$pink: #FABAD0;
$dark-pink: #EF075F;

$red: #FEC9C6;
$dark-red: #FD3D08;

@mixin color-div($color1, $color2) {
    background-color: $color1;
    color: $color2;
}

.container {
    padding: 2rem 0rem;
}

h4 {
    margin: 2rem 0rem;
}

.panel {
    border-radius: 4px;
    padding: 1rem;
    margin-top: 0.2rem;

    @include color-div($grey, $dark-grey);
    &.panel-blue

{
    @include color-div($light-blue, $dark-blue);
}

&.panel-big-height {
    min-height: 150px;
}

}

.item {
    border-radius: 4px;
    padding: 0.5rem;
    margin: 0.2rem;
    &.item-blue

{
    @include color-div($blue, $dark-blue);
}

&.item-green {
    @include color-div($green, $dark-green);
}

&.item-lime {
    @include color-div($lime, $dark-lime);
}

&.item-yellow {
    @include color-div($yellow, $dark-yellow);
}

&.item-pink {
    @include color-div($pink, $dark-pink);
}

&.item-red {
    @include color-div($red, $dark-red);
}

&.item-big-width {
    min-width: 380px;
}

}





.img-container {
    /*margin-top: 12px;*/
}

    .img-container h1 {
        position: absolute;
        color: white;
        margin: 39px;
    }

@media(max-width:500px) {
    .img-container h1 {
        position: absolute;
        color: white;
        margin: 30px;
        line-height: 39px;
    }

    #pricenav {
        display: contents;
    }

    #divcat {
        row-gap: 20PX !important;
    }
}

.bgactiveclass {
    background-color: #bbf34d !important;
}

.bgdeactiveactiveclass {
    background-color: lightgray !important;
}

.buttoncssss {
    background-color: #bbf34d;
    color: black;
    border: 0;
    margin-bottom: 25px;
    padding: 0 00px;
    width: 120px;
    text-align: center;
}

.buttoncssss1 {
    background-color: lightgray;
    color: black;
    border: 0;
    margin-bottom: 25px;
    padding: 0 47px;
    text-align: center;
}

* {
    box-sizing: border-box;
}



.calendar-box {
    text-align: center;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

.calendar-title {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
}

.calendar {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    position: absolute;
    z-index: 1;
    display: none;
}

.header {
    background-color: #3498db;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#prevBtn,
#nextBtn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 12px;
}

#monthYear {
    font-size: 12px;
    font-weight: bold;
}

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    padding: 5px;
}

.day {
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

    .day.current {
        background-color: #3498db;
        color: white;
    }

    .day.selected {
        background-color: #2ecc71;
        color: white;
    }

#dateInput {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}

#NoteInput, #intAddress, #txtHouse, #txtRoad, #txtLocality, #txtPincode, #txtState, #txtCountry, #txtcity, #intAddressOffice, #intAddressHome, #txtContactName, #txtContactMobileNo, #txtCarbsBREAKFAST, #txtProteinBREAKFAST, #txtFatsBREAKFAST, #txtCarbsLUNCH, #txtProteinLUNCH, #txtFatsLUNCH, #txtCarbsDINNER, #txtProteinDINNER, #txtFatsDINNER, #pincodeInput {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}

input[type=radio] {
    vertical-align: baseline !important;
}
.food-image figure {
    padding-left: 00px !important;
    height: auto !important;
}

#hoverimgcat:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transform: scale(1.1);
}

#hoverimgcat1:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transform: scale(1.1);
}

.img-container:hover img {
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

@media (max-width: 600px) {
    input[type=radio] {
        vertical-align: baseline !important;
    }

    .food-listing-row > div {
        display: flex;
        justify-content: center;
    }

    #SubMenuDiv {
        display: flex;
        justify-content: center;
    }

    #pricenav {
        display: contents;
    }

    #form {
        padding-right: 00px !important;
    }

    .buttoncssss {
        background-color: #bbf34d;
        color: black;
        border: 0;
        margin-bottom: 25px;
        padding: 0 00px;
        width: 120px;
        text-align: center;
    }

    .container {
        padding: 1rem 0rem !important;
    }

    #totalok {
        margin-left: -100px !important;
    }

    .food-listing-row {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .food-listing-group .food-listing-row:nth-child(2n) {
        margin-left: 00px !important;
    }

    .Secondcarbs {
        margin-left: 00px !important;
    }

    .innerdiv_foodtype {
        display: flex;
        margin-left: 0% !important;
        text-align: center;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .Non_vegtxt {
        width: 100px !important;
    }

    .mainfoodtype {
        margin-top: 20px;
    }

    .food-tab .nav li {
        text-align: center;
    }

    #Allfinishing {
        float: left !important;
    }

    .food-image figure {
        display: flex;
        justify-content: center;
    }

    #btnProcess {
        float: left !important;
        margin-top: 55% !important;
    }

    #modal-body-ID {
        height: auto !important;
    }
}