.fa-solid {
    margin-right: 0.5em;
}

#config_graphics .fa-solid {
    margin: 0;
}

.button svg {
    width: 0.8em;
    margin-right: 0.5em;
    display: inline;
    vertical-align: bottom;
}

#logo_brand img {
    max-height: 1.5vh;

}

.intro.open {
    /*background-color: #fafafa;*/
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    color: #fafafa;
    gap: 4em;
    /*justify-content: space-evenly*/
}

.intro .back-button {
    position: absolute;
    top: 2vh;
    left: 2vh;
    cursor: pointer;
    font-weight: 300;
    transition: all 0.3s ease-in-out;
}

.intro .back-button:hover {
    font-weight: 500;
}

#intro_window {
    /*gap: ;*/
    background-color: #000000;
}

.intro .img-container {
    width: 300px;
    margin: 2em;
}

.intro .container {
    display: flex;
    gap: 1em;
    justify-content: center;
    align-items: center;
}

.intro .item-container {
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    opacity: 0.7;
    /*flex-basis: 10%;*/
    flex-wrap: wrap;
    /*transition: all 0.3s ease;*/
    transition: transform 0.4s cubic-bezier(.2, .75, .5, 1), opacity 0.4s cubic-bezier(.2, .75, .5, 1);
}

#composition_window {
    background-color: #000000;
}

#composition_window .item-container img {
    scale: 1.05;
}


.intro .item-container:hover {
    font-weight: bold;
    opacity: 1;


}


.intro .item-container p {
    font-size: 1.5em;
    padding: 1em;
    transition: 0.4s all ease;
}

#composition_window .item-container p {

    padding: 2em 0;
}

.intro .item-container img.ambient {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(.2, .75, .5, 1), opacity 0.4s cubic-bezier(.2, .75, .5, 1);
}

.intro .item-container:hover img.ambient {
    opacity: 1;

}


#config_sidebar, .fixed_panel, .subtitle.selected + .subpanel, .window, .button, button, input[type="submit"] {
    background: #111;
    border: unset;
    /*545454;*/
}


#panel_modello {
    display: none;

}


#panel_modello.open {
    display: block;
}


.scroll {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fixed_panel {
    padding: 2vh 2vh calc(2vh - 0.5em);
}

#panel_ottica h2 {
    padding-top: 1em;
}

#panel_ottica .subpanel h3 {
    padding-top: 1em;
}

#panel_ottica .item-container-custom {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    /*gap: 1em;*/
    flex-wrap: wrap;
    margin: 1em 0;

}

#panel_ottica .item-container-custom .item {
    flex-basis: 33.3%;
    /*flex-basis: 20%;*/

}

.items_list .item {
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.items_list .item:not(#panel_ottica .item) {
    gap: 1em;
}

.items_list .item .item-image {
    background-color: transparent;
    border-radius: unset;
    margin: 0;
}

#panel_lunghezza .subpanel, #panel_luce .subpanel, #panel_mounting .subpanel, #panel_dimmerazione .subpanel {
    gap: 5px;
}

#panel_lunghezza .item, #panel_luce .item, #panel_mounting .item, #panel_dimmerazione .item {
    /*margin: 0.25em;*/
    padding: 2em 0.25em;
    font-weight: bold;
    opacity: 0.6;
    border: 1px solid #767676;
    /*aspect-ratio: 3 / 4;*/
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    min-width: 100px;
}

#panel_dimmerazione .item {
    flex-direction: column;
}

#panel_lunghezza .item:hover, #panel_lunghezza .item.selected,
#panel_luce .item:hover, #panel_luce .item.selected,
#panel_mounting .item:hover, #panel_mounting .item.selected,
#panel_dimmerazione .item:hover, #panel_dimmerazione .item.selected {
    opacity: 1;
    border: 2px solid #fff;
}


#panel_finitura .item, #panel_finitura .selected .item-image {
    border-radius: unset;

    border: unset;

}


#panel_finitura .item-image {
    background-color: transparent;

}

.panel, .fixed_panel {

    border-bottom: solid 1px rgba(90, 176, 184, 0.5)
}


.button:hover, button:hover, input[type="submit"]:hover {
    color: #333;
}


#config_buttons {
    user-select: none;
}


.tabs {
    display: flex;
    /*flex-direction: column; !* Cambia da flex-wrap: wrap a flex-direction: column *!*/
    width: 100%; /* Imposta la larghezza desiderata per la sidebar */
    flex-wrap: wrap;

}

.tabs #parete_custom .panel {
    margin: 1vh;
}

.tabs #parete_custom h2 {
    margin: 1em;
}

.tabs label {
    display: inline-block; /* Imposta i label come elementi inline-block */
    flex-basis: 50%;
    order: 1;
    padding: 1em 0.3em;
    text-align: center;
    cursor: pointer;
    background: inherit;
    transition: background ease 0.2s;
    /*margin: 0 auto;*/
    margin: 0;
    font-weight: var(--boldsize);
    font-size: 1.1em;

    line-height: 1.25em;
}

.tabs .tab {
    order: 99;
    flex-grow: 1;
    width: 100%;
    display: none;

    /*background: Rgba(127,127,127,0.1);*/
}

.tabs input[type=radio] {
    display: none;
}

.tabs input[type=radio]:checked + label {
    background: rgba(127, 127, 127, 0.1);
    flex-grow: 1;
}

.tabs input[type=radio]:checked + label + .tab {
    background-color: rgba(127, 127, 127, 0.1);
    display: flex;
    flex-wrap: wrap;
}

#panel_ottica .tabs .panel {
    margin: 1vh;
}

#panel_ottica .tabs label {
    font-size: 0.9em;
}

#panel_ottica .subtitle.selected + .subpanel {
    padding: 0;
}


#container_monoemissione, #container_biemissione {
    padding: 2vh 2vh calc(2vh - 0.5em);

}


.panel {
    flex-grow: 1;
    flex-basis: 100%;
    width: 100%;
}

#move_down_button, #move_up_button, #move_left_button, #move_right_button, #remove_3d, #insert_3d {
    display: none;
}

#move_down_button.active, #move_up_button.active, #move_left_button.active, #move_right_button.active, #remove_3d.active, #insert_3d.active {
    display: inline-block;
}


h1.title {
    padding: 1vh 0;
    /* font-size: clamp(16px, 2em, 36px); */
    font-size: clamp(16px, 1.8em, 36px);
    line-height: 1em;
    text-transform: uppercase;
    font-weight: 200;
}

@media (max-width: 1024px) {
    /* Modalità tablet: layout in colonna e pannello grafico in parte alta */
    .intro .item-container {
        flex-basis: 31%;
        flex-grow: 0.5
    }

    #composition_window.intro .item-container {
        flex-basis: 33%;

        flex-wrap: nowrap;
        flex-grow: 0;
    }

    #composition_window.intro .container {


        /*flex-wrap: nowrap;*/

    }


    .container {
        gap: 0;
        flex-wrap: wrap;
    }


    #panel_lunghezza .item, #panel_luce .item, #panel_mounting .item, #panel_dimmerazione .item {
        aspect-ratio: unset !important;
        padding: 3em 0.5em;
        flex-basis: 15%;
    }

    #applica_tutti_panel .button {
        padding: 1.5em;
    }
}

.subtitle.selected + .subpanel {
    padding: 2vh 2vh calc(2vh - 0.5em);
    background: #292929;
}


@media (min-width: 1024px) {
    .items_grid .item:not(#panel_finitura .item) {
        flex-basis: 30%;
        width: 30%;
    }


}


#panel_info {
    display: flex;
    padding: 1.5vh 2vh calc(2vh - 0.5em);
    justify-content: space-between;
}

#panel_info h2 {
    margin-bottom: 0;
}

#panel_info #back_text {
    cursor: pointer;
    opacity: 0.6;
    transition: all ease 0.6s;
    text-transform: capitalize;
    margin-bottom: 0;
}

#panel_info #back_text:hover {
    cursor: pointer;
    opacity: 1;
}

#panel_finitura .item .item-image, #panel_finitura_parete .item .item-image {
    border-radius: unset;
    background-size: contain;
    background-color: unset !important;
    border: unset !important;

}


#applica_tutti_panel {
    padding: 0;
    flex-grow: 1;
    flex-basis: 100%;
    width: 100%;
    background-color: #1c1c1c;
}

#applica_tutti_panel .subpanel {
    gap: 1.5em;
}

#applica_tutti_panel .button {
    font-size: 0.9em;

    /*background-color: rgba(127, 127, 127, 0.1);*/
    border: 1px solid #767676;
    /*aspect-ratio: 3 / 4;*/
    background: transparent;
    flex-grow: 1;
    margin: 0.25em;
    padding: 0.5em;
}

#applica_tutti_panel .button:hover {
    color: white;
    opacity: 1;
    border: 2px solid #fff;
    font-weight: bold;
}

[config].muted, [data-dir="down"] .item.disabled[config*="none"], [data-dir="up"] .item.disabled[config*="none"] {
    opacity: 0.25 !important;
    user-select: none !important;
    pointer-events: none !important;


}

[data-dir="down"] .item.disabled[config="down_ottica.none"], [data-dir="up"] .item.disabled[config*="none"] {
    display: flex !important;
}


#composition_window .item-container, .back-button {
    text-transform: capitalize;
}


.container-flags {
    display: flex;
    position: absolute;
    z-index: 100;
    right: 1em;
    top: 2vh;
    gap: 1.2em;
    justify-content: flex-end;

}


.container-flags *{
    transition: all 0.3s ease-in-out;

}

.container-flags a {
    opacity: 0.4;
}

.container-flags a:hover {
    opacity: 1;
}

.container-flags a.active {
    opacity: 1;
}

.container-flags a img {
    max-width: 30px;
}



.container-international,  .container-america{
    display: flex;
    gap: .8rem;
    /*flex-direction: column;*/
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.8;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.15);
    padding: .5rem .8rem;
    /*border-radius: 6px;*/
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #11111124;

}

.container-international a{
    text-decoration: none;
}

.container-international::before{
    content: "International";
    font-size: .78rem;
    font-weight: 600;
    opacity: .8;
    margin-right: .4rem;
}
.container-america::before{
    content: "U.S.";
    font-size: .78rem;
    font-weight: 600;
    opacity: .8;
    margin-right: .4rem;

}