: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: black;
    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: black;
    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: 420px;
    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-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) {
    .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;
}