:root {
    --ddm-color-blue: #147586;
    --ddm-color-blue-dark: #0f4e59;
    --ddm-color-green: #6ba170;
    --ddm-color-green-dark: #24652a;
    --ddm-color-orange: #fa7e5c;
    --ddm-color-orange-dark: #cc4d2a;
}


/* -------------------------------- */
/* btn-week                         */
/* -------------------------------- */
.btn-week {
    color: white;
    background-color: var(--ddm-color-green);
    border-color: var(--ddm-color-green);
}

    .btn-week:hover {
        color: var(--ddm-color-green-dark);
    }


/* -------------------------------- */
/* btn-infoicon                     */
/* -------------------------------- */
.btn-infoicon {
    color: white;
    background-color: var(--ddm-color-green);
    border-color: var(--ddm-color-green);
}

    .btn-infoicon:hover {
        color: var(--ddm-color-green-dark);
    }


/* -------------------------------- */
/* btn-category                     */
/* -------------------------------- */
.btn-category {
    color: var(--ddm-color-green);
    border-color: var(--ddm-color-green);
}

    .btn-category:hover {
        color: var(--ddm-color-green-dark);
    }

.btn-check:checked + .btn-category {
    color: white;
    background-color: var(--ddm-color-green);
    border-color: var(--ddm-color-green);
}


/* -------------------------------- */
/* btn-dietform                     */
/* -------------------------------- */
.btn-dietform {
    color: var(--ddm-color-green);
    border-color: var(--ddm-color-green);
}

    .btn-dietform:hover {
        color: var(--ddm-color-green-dark);
    }

.btn-check:checked + .btn-dietform {
    color: white;
    background-color: var(--ddm-color-green);
    border-color: var(--ddm-color-green);
}



/* -------------------------------- */
/* btn-action                       */
/* -------------------------------- */
.btn-action {
    color: white;
    background-color: var(--ddm-color-green);
    border-color: var(--ddm-color-green);
}

    .btn-action:hover {
        color: var(--ddm-color-green-dark);
        background-color: white;
    }



/* -------------------------------- */
/* dish image                       */
/* -------------------------------- */
.dish-image-box {
    margin-bottom: 10px;
    /*height: 200px;*/
    /*width: 300px;*/ 
    height: 220px;
    width: 420px;
    border-radius: 5%;
    display: inline-block;
    box-shadow: 2px 2px 2px 2px hsl(0, 0%, 66%);
    text-align: center;
    overflow: hidden;
}

.dish-image-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dish-image-box i {
    transition: transform 1s ease-in-out;
    -moz-transition: transform 1s ease-in-out;
    -webkit-transition: transform 1s ease-in-out;
    -o-transition: transform 1s ease-in-out;
}

.dish-image-box:hover i {
    transform: scale(1.2) rotate(-10deg);
}

.dish-image-box img {
    transition: transform 1s ease;
    -moz-transition: transform 1s ease;
    -webkit-transition: transform 1s ease;
    -o-transition: transform 1s ease;
}

.dish-image-box:hover img {
    transform: scale(1.2) rotate(-10deg);
}

.dish-image-color {
    background: var(--ddm-color-green);
    color: white;
}

/* MOBILE */
/* @media only screen and (min-device-width: 390px) and (max-device-width: 428px) */
/* @media only screen and (min-device-width: 300px) and (max-device-width: 1200px) { */
@media only screen and (min-width: 300px) and (max-width: 1200px) {
    .dish-image-box {
        width: 100%;
    }
}



/* -------------------------------- */
/* dish accordion                   */
/* -------------------------------- */
.accordion-button:not(.collapsed) {
    color: white;
    background-color: var(--ddm-color-green);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

.accordion-button.collapsed {
    color: white;
    background-color: var(--ddm-color-green);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

.accordion-button::after {
    filter: invert(1);
}



/* -------------------------------- */
/* course-number                    */
/* -------------------------------- */
.course-number {
    width: 30px;
    display: inline-table;
}


/* -------------------------------- */
/* btn focus/active                 */
/* -------------------------------- */
.btn-check:focus + .btn, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(150,126,92,.50);
}

.btn:focus, .btn:active:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(150,126,92,.75);
}




/* -------------------------------- */
/* varoius                          */
/* -------------------------------- */
.font-style-italic {
    font-style: italic;
}