/*
 Theme Name:     PA Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Simple Divi Child Theme
 Author:         Projekt:Agentur
 Author URI:     https://www.projektagentur.de/
 Template:       Divi
 Version:        0.1.1
*/

/* =Theme customization starts here
------------------------------------------------------- */

:root {
    --lei-c-caramel: #e07e39;
    --lei-c-caramel-trans: rgba(224, 126, 57, 0.3);
    --lei-c-gluttony: #bc601f;
    --lei-c-white-tech: #f5f5f5;
    --lei-c-black-trans: rgba(0, 0, 0, 0.45);
}

.lei-mulden-service-step-one {
    .lei-mulden-service-step-one__header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .lei-mulden-service-step-one__content {
        width: 100%;
    }
}

.lei-mulden-service-abfall__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;

    .lei-mulden-service-abfall__list-item {
        border: 3px solid var(--lei-c-white-tech);
        border-radius: 8px;
        padding: 1px;
        cursor: pointer;
        position: relative;

        &:hover,
        &.lei-mulden-service-abfall__list-item--active {
            border-color: var(--lei-c-caramel);
        }

        .lei-mulden-service-abfall__list-item-thumbnail {
            overflow: hidden;
            max-height: 150px;

            img {
                width: 100%;
                height: auto;
            }
        }

        .lei-mulden-service-abfall__list-item-content {
            display: flex;
            justify-content: center;
            align-items: center;

            h3 {
                text-align: center;
                margin-top: 1em;
                margin-bottom: 1em;
            }
        }
        
        .lei-mulden-service-abfall__list-item-tooltip {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background-color: var(--lei-c-white-tech);
            border: 1px solid var(--lei-c-white-tech);
            border-radius: 50%;
            cursor: pointer;

            &:hover {
                border-color: var(--lei-c-caramel);
            }

            i {
                font-family: FontAwesome !important;
                font-weight: 900;
                font-size: 14px;
                color: var(--lei-c-caramel);
                font-style: normal !important;
                color: var(--lei-c-caramel);
            }
        }
    }
}

/**------------------------------------------------------------------------
 *                           Divi Breakpoints
 *------------------------------------------------------------------------**/

/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {}

/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {}

/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {}

/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {}

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {}

/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {}