#zone-appareils {
    min-height: 450px;
}
:is(#zone-appareils .frame_wrapper) iframe {
            zoom: 85%;
            border-radius: var(--default-radius);
        }
#zone-appareils .legend {
        display: flex;
        text-align: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
@media (max-width: 900px) {
    #zone-appareils {
        min-height: unset;
    }
            :is(#zone-appareils .frame_wrapper) iframe {
                min-height: 450px;
            }
        #zone-appareils .legend {
            margin-top: 2vh;
        }
}
#zone-tableau .frame_wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
:is(#zone-tableau .frame_wrapper) #dashboard_charts_wrapper {
            border-radius: var(--default-radius);
            background-color: white;
            padding: 10px;
            display: grid;
            grid-auto-flow: row dense;
            grid-gap: 10px;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }
:is(:is(#zone-tableau .frame_wrapper) #dashboard_charts_wrapper)  > .chart {
                height: 300px;
                border: 1px solid var(--lof-COLORS-gray300);
                border-radius: 5px;
                background-color: var(--lof-COLORS-gray100);
                position: relative;
                display: flex;
                flex-direction: column;
                width: 100%;
            }
#zone-tableau .legend {
        display: flex;
        text-align: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

.simulator-wrapper {
    /*border: 1px solid var(--lof-COLORS-dark_blue);*/
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 2vh;
    padding-bottom: 2vh;
    border-radius: var(--default-radius);
    color: var(--lof-COLORS-dark_blue);
    display: flex;
    flex-direction: row-reverse;
    gap: 5vw;
}

.simulator-wrapper #prix-wrapper {
        width: calc(100% / 3);
    }

.simulator-wrapper .sim {
        width: calc(100% / 3 * 2);
        display: flex; flex-direction: column;
        gap: 1.5vh;
        padding-top: 1.5vh;
    }

.simulator-wrapper .prix {
        border-radius: 25px;
        background: #ffffff50;
        border: none;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.1), -5px -5px 10px var(--lof-COLORS-primary), inset 5px 5px 10px color-mix(in srgb, var(--lof-COLORS-dark_blue) 10%, transparent), inset -5px -5px 5px rgba(255,255,255,0.25);
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 2vh 2vw;
        color: var(--lof-COLORS-dark_blue);
    }

:is(.simulator-wrapper .prix) #p {
            font-size: 150%;
        }

@media (max-width: 900px) {
    .simulator-wrapper {
        flex-direction: column-reverse;
    }
        .simulator-wrapper #prix-wrapper {
            width: 100%;
        }
        .simulator-wrapper .sim {
            width: 100%;
        }
        .simulator-wrapper .prix {
            width: 100%;
        }
}
.sim-slider {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 15px 20px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--lof-COLORS-dark_blue) 10%, transparent), var(--lof-COLORS-primary));
    border-radius: 200px;
    box-shadow: 10px 10px 15px color-mix(in srgb, var(--lof-COLORS-dark_blue) 20%, transparent), -10px -10px 15px rgba(255,255,255,0.2);
}
#ep_count_range {
    flex: 1;
    min-width: 0;
    height: 15px;
    appearance: none;
    background: linear-gradient(to right,
        var(--lof-COLORS-primary_hover) 0%,
        var(--lof-COLORS-dark_blue) var(--ep-range-progress, 0%),
        #f4eded var(--ep-range-progress, 0%),
        #ffffff50 100%);
    outline: none;
    border-radius: 15px;
    box-shadow: 5px 5px 5px color-mix(in srgb, var(--lof-COLORS-dark_blue) 10%, transparent), -5px -5px 10px rgba(255, 255, 255, 0.4), inset 5px 5px 5px color-mix(in srgb, var(--lof-COLORS-dark_blue) 10%, transparent);
}
#ep_count_range::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--lof-COLORS-primary);
    border-radius: 50%;
    border: 2px solid var(--lof-COLORS-dark_blue);
    cursor: pointer;
}
#ep_count_range::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    border: 2px solid var(--lof-COLORS-primary_hover);
    cursor: pointer;
}
#ep_count_range::-moz-range-progress {
    height: 15px;
    background: var(--lof-COLORS-primary_hover);
    border-radius: 15px 0 0 15px;
}
#ep_count_range::-moz-range-track {
    height: 15px;
    background: #f4eded;
    border-radius: 15px;
}
#ep_count_range_value {
    position: relative;
    text-align: center;
    width: 60px;
    font-size: 1.25em;
    color: var(--lof-COLORS-dark_blue);
    background: #ffffff50;
    margin-left: 15px;
    border: none;
    border-radius: 25px;
    font-weight: 500;
    font-family: inherit;
    flex-shrink: 0;
    appearance: textfield;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1), -5px -5px 10px var(--lof-COLORS-primary), inset 5px 5px 10px color-mix(in srgb, var(--lof-COLORS-dark_blue) 10%, transparent), inset -5px -5px 5px rgba(255,255,255,0.25);
}
#ep_count_range_value::-webkit-inner-spin-button,
#ep_count_range_value::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}
.cout_estime {
        font-size: 1.25em;
        color: var(--lof-COLORS-dark_blue);
        padding-bottom: 2vh;
        display: block;
}
/* TOASTS */
.lof_toasts_container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 101;
}

.lof_toasts_container .lof_toast {
    padding: 8px 12px;
    border-radius: 8px;
    background-color: white;
    margin-bottom: 20px;
    background-repeat: no-repeat;
    background-position-y: 22px;
    background-position-x: 12px;
    background-size: 16px 16px;
    padding-left: 36px;
    padding-right: 44px;
    position: relative;
    color: black;
    font-size: 85%;
}

.lof_toast[data-lof_toast_type="error"] {
    background-color: var(--lof-COLORS-toast_type_error_bg);
    border: 1px solid var(--lof-COLORS-toast_type_error_border);
    background-image: url("/assets/img/toast/toast_error.svg");
}
.lof_toast[data-lof_toast_type="success"] {
    background-color: var(--lof-COLORS-toast_type_success_bg);
    border: 1px solid var(--lof-COLORS-toast_type_success_border);
    background-image: url("/assets/img/toast/toast_success.svg");
}
.lof_toast[data-lof_toast_type="warning"] {
    background-color: var(--lof-COLORS-toast_type_warning_bg);
    border: 1px solid var(--lof-COLORS-toast_type_warning_border);
    background-image: url("/assets/img/toast/toast_warning.svg");
}
.lof_toast[data-lof_toast_type="notice"] {
    background-color: var(--lof-COLORS-primary_hover_light);
    border: 1px solid var(--lof-COLORS-primary);
    background-image: url("/assets/img/toast/toast_notice.svg");
}

.lof_toast_close_btn {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 12px;
    top: 22px;
    background-image: url("/assets/img/toast/close_btn.svg");
    background-size: 16px 16px;
    cursor: pointer;
}

@keyframes toastFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/*FIN TOASTS*/

.emoji {
    font-size: 150%;
}