@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/*
	
+---------+----------------------------+
| z-index |            item            |
+---------+----------------------------+
|       2 | #credits                   |
|       2 | #config_buttons            |
|       5 | #config_sidebar            |
|      10 | #logo_brand                |
|      10 | #titolo                    |
|      10 | #ar_model_viewer_container |
|      25 | .window                    |
|      50 | #intro_text                |
|     997 | #notifications             |
|     998 | .alertification            |
|     999 | #loader                    |
+---------+----------------------------+

+-------------+-------+---------+-------------------------------+
| background  | color | opacity |             item              |
+-------------+-------+---------+-------------------------------+
| white       | #333  |       1 | body                          |
| #dddddd     | _     |       1 | #configurator                 |
| 127,127,127 | _     |     0.1 | .closex                       |
| 0,0,0       | white |     0.5 | #loader                       |
| white       | #333  |       1 | #config_sidebar               |
| white       | _     |       1 | #config_sidebar .panel p span |
| #dddddd     | _     |       1 | #ar_model_viewer_container    |
+-------------+-------+---------+-------------------------------+

Screen sizes:	
iPad w1080
tablet w1024
smartphone w768
	
*/

:root {
    /* COLORI */
    --maincolor: #fff; /* Rosso primario, usato per evidenziazioni */
    -secondarycolor: #FFF; /* Giallo secondario */
    --color: #fff; /* Colore testo principale (scuro) */
    --background: #545454; /* Sfondo principale neutro */
    --webglbackground: #333; /* Sfondo per canvas/webgl */
    /* FONT */
    --regularsize: 300;
    --boldsize: 500;

    /* ASPETTO & PERSONALIZZAZIONI */
    --borderradius: 3px; /* Modificare (es. 2em) per arrotondare i bordi */
}

/*--------------------------------------------------------------
   RESET DI BASE E UTILITÀ
--------------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box !important;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.hidden {
    display: none;
}

.nobreak {
    white-space: nowrap;
    text-overflow: ellipsis;
}

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

/*--------------------------------------------------------------
   TYPOGRAPHY & BODY
--------------------------------------------------------------*/

html, body {
    height: 100%;
    background-color: var(--background);
    color: var(--color);
    /* Si combinano vari font da diverse iterazioni; è possibile personalizzare l'ordine*/
    font-family:  "Lato", sans-serif;
    font-weight: var(--regularsize);
    font-size: 16px;
    line-height: 1.25em;
}

@media (max-width: 768px) {
    html, body {
        font-size: 10px;
    }
}

/*--------------------------------------------------------------
   PRINCIPALI CONTENITORI PER IL CONFIGURATORE AR
--------------------------------------------------------------*/

#configurator,
#config_graphics,
#config_render,
canvas {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#configurator {
    transition: background 1s ease;
    /* Layout flessibile: eventualmente attivato in modalità configurante */
}

#config_graphics {
    background-color: var(--webglbackground);
    transition: all 1s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Effetto overlay con gradiente radiale (ispirato a una delle versioni) */
#config_graphics::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: radial-gradient(circle, rgba(61,61,61,1) 20%, rgba(28,28,28,0) 80%);*/
    opacity: 1;
    transition: all 1s ease;
}

/* Il canvas di rendering viene centrato e occupa l'intero viewport */
#config_render {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
}

/*--------------------------------------------------------------
   MEDIA QUERIES PER ADATTAMENTI RESPONSIVE
--------------------------------------------------------------*/

@media (max-width: 1024px) {
    /* Modalità tablet: layout in colonna e pannello grafico in parte alta */
    #configurator {
        flex-direction: column;
    }

    .configuring #config_graphics {
        height: 50%;
        top: 0;
    }
}

@media (min-width: 1025px) {
    /* Modalità desktop: possibile riposizionamento per configurazione */
    .configuring #config_graphics {
        width: 75%;
        left: 25%;
    }
}

/*--------------------------------------------------------------
   HEADINGS & PARAGRAFI
--------------------------------------------------------------*/

h1, h2, h3 {
    display: block;
    margin-bottom: 0.75em;
    /*flex-basis: 100%;*/
    font-weight: 600;
}

h1 {
    font-size: 1.6em;
}

h2 {
    /*font-size: 1.4em;*/
    font-size:1.2em;
}

h3 {
    font-size: 1.2em;
}

p {
    margin-bottom: 0.5em;
}

a, .link {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

a:hover, .link:hover {
    color: var(--maincolor);
}

small, .small {
    font-size: 0.75em;
}

/*--------------------------------------------------------------
   PULSANTI, INPUT E CONTROLLI
--------------------------------------------------------------*/
[disabled], .disabled {
    opacity: 0.25 !important;
    display: none !important;
}

.veil {
    position: relative;
}

.veil:after {
    content: '';
    display: block;
    background-color: rgba(0, 0, 0, 0);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
}

.button,
button,
input[type="submit"] {
    cursor: pointer;
    text-transform: uppercase;
    display: inline-block;
    padding: 0.5em 1em;
    margin: 0.2em;
    background-color: transparent;
    border: solid 1px currentColor;
    transition: all 0.25s ease;
    text-decoration: none;
    text-align: center;
    border-radius: var(--borderradius);
    flex-grow: 1;

}

.button:hover,
button:hover,
input[type="submit"]:hover {
    opacity: 1;
    background-color: var(--maincolor);
    color: var(--secondarycolor);
    border-color: var(--maincolor);
}

.button .button_text {
    margin-right: 0.5em;
    margin: 0 0 0.5em;
}

label {
    display: block;
    margin: 1em 0 0.5em;
    text-transform: uppercase;
}

input[type="text"],
textarea,
input[type="number"],
select {
    font: inherit;
    display: inline-block;
    padding: 0.5em 1em;
    margin: 0.2em 0 1em 0;
    background-color: rgba(127, 127, 127, 0.1);
    border: 1px solid rgba(127, 127, 127, 0.25);
    transition: all 0.25s ease;
    border-radius: var(--borderradius);
}

input[type="text"]:focus,
textarea:focus,
input[type="number"]:focus,
select:focus {
    border: solid 1px rgba(127, 127, 127, 0.5);
}

form, form input[type="text"], form input[type="number"], form select, form textarea {
    width: 100%;
}

/* FORM */

#contact_us {
    width: auto;
    overflow: hidden;
}


#contact_us .input-area {
    display: flex;
    align-items: flex-start;
    text-align: justify;
    align-items: center;
    justify-content: space-evenly;

    flex-direction: column;

}

.input-area .flex-divider,
.input-area .bottom-div {
    display: flex;
    justify-content: space-between;

    align-items: flex-start;
}

.input-area .flex-divider {
    flex-direction: row;
}

.input-area .bottom-div {
    flex-direction: column;
}

.input-area .flex-divider div,
.input-area .bottom-div div {
    margin: 0.5em;
    width: 100%;
}

#contact_us #form_info {
    padding: 2vh;
}

#contact_us .privacy p {
    margin: 5px 15px 5px 0;
    vertical-align: top;
    text-align: left;
}

#contact_us input,
#contact_us textarea {
    padding: 5px;
    font-size: 16px;
    line-height: 1.5;
    border-color: #eee;
    border-style: groove;
}

#contact_us .center {
    text-align: center;
}

#contact_us .privacy {
    font-size: 12px;
    display: block;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1;
    margin: 5px 0;
    line-height: 1.5;
}


#contact_us #prodotto p {
    padding-left: 0.5em;
    text-align: left;
}


@media (max-width: 1023px) {
    #contact_us {
        overflow-y: auto;
        max-height: 100%;
    }

    #contact_us .input-area {
        flex-direction: column;
        align-items: center;
    }
}


@media (max-height: 767px) {

    #contact_us {
        overflow-y: scroll;
        max-height: 100%;
    }


}


.input-area input:not([type=checkbox]),
.input-area textarea {
    display: block;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    border: 0;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 12px 20px;
    color: rgba(0, 0, 0, 0.6);
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
    transition: 0.3s ease;
}

.form h2 {
    color: #212121;
    padding: 4px 0;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
}


.input-area label:not(.privacy) {
    display: block;
    margin: 0 0 10px;
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: left;

}


.drop_zone {
    background-color: rgba(127, 127, 127, 0.1);
    border: dashed 1px rgba(127, 127, 127, 0.25);
    border-radius: var(--borderradius);
    width: 100%;
    height: 100px;
    display: block;
    box-sizing: border-box;
    background-image: url(images/editor/upload.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    margin: 1em 0;
}

.drop_zone:hover {
    opacity: 0.8;
}

/*
@media (max-width: 768px) {
	.button .button_text {
		display:none;
	}
}
*/

/*--------------------------------------------------------------
   TOGGLE SWITCH
--------------------------------------------------------------*/
.toggle {
    display: block;
    position: relative;
    cursor: pointer;
    padding-left: 3em;
    margin: 0.2em;
    text-transform: uppercase;
}

.toggle::before {
    content: '';
    display: block;
    width: 2.2em;
    height: 1.2em;
    margin-right: 1em;
    background-color: rgba(127, 127, 127, 0.1);
    border: 1px solid currentColor;
    transition: all 0.25s ease;
    border-radius: calc(0.6em + 2px);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.toggle::after {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    opacity: 0.8;
    transition: all 0.25s ease;
    border-radius: 0.5em;
    position: absolute;
    top: 50%;
    left: 0.2em;
    transform: translateY(-50%);
}

.toggle:hover::before {
    background-color: rgba(127, 127, 127, 0.25);
}

.toggle:hover::after {
    opacity: 1;
}

.toggle.active::before {
    background-color: rgba(127, 127, 127, 0.5);
}

.toggle.active::after {
    left: calc(2.2em - 1em);
    opacity: 1;
}

/*--------------------------------------------------------------
   PULSANTI DI CHIUSURA
--------------------------------------------------------------*/

.closex, .closen {
    top: 0;
    right: 0;
    position: absolute;
    font-size: 20px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 1;
}

.closex:hover, .closen:hover {
    background-color: rgba(127, 127, 127, 0.1);
}

.button .fas, .button .far, .button .fal, .button .fad, .button .fab {
    margin: 0 0.5em 0 0;
}


/*--------------------------------------------------------------
   OVERLAY INFORMAZIONI (LOGO, TITOLO, CREDITS, ANGOLI)
--------------------------------------------------------------*/

#logo_brand {
    position: absolute;
    top: 2vh;
    left: 2vh;
    z-index: 10;
}

#logo_brand img {
    max-width: 20vw;
    max-height: 3vh;
}

@media (max-width: 768px) {

    #logo_brand img {
        max-width: 40vw;
        max-height: 3vh;
    }
}

#titolo {
    position: absolute;
    top: 2vh;
    right: 50%;
    z-index: 10;
    transform: translateX(50%);
    text-align: center;
    transition: all 1s ease;
    max-width: 40vw;
}

#titolo img {
    max-width: 20vw;
    max-height: 3vh;
}

@media (max-width: 768px) {

    #titolo {
        right: 2vh;
        transform: translate(0, 0);
        text-align: right;
        max-width: 45vw;
        font-size: 12px;
    }

}

#credits {
    position: absolute;
    bottom: 2vh;
    right: 2vh;
    z-index: 2;
    text-align: right;
    font-size: 12px;
    opacity: 0.5;
    transition: all 0.25s ease;
    max-width: 25vw;
}

#credits:hover {
    opacity: 1;
}

@media (max-width: 768px) {

    #credits {
        display: none;
    }

}

#corner_info {
    position: absolute;
    top: 2vh;
    right: 2vh;
    z-index: 2;
    text-align: right;
    transition: all 0.25s ease;
    max-width: 50vw;
}

/*
#intro_text {
	position:absolute;
	top:50%;
	left:50%;
	width:80%;
	max-width: 1024px;
	z-index: 50;
	transform: translate(-50%,-50%);
	text-align: center;
	font-size: 4vh;
	line-height: 1em;
	font-weight:600;
}
*/

/*--------------------------------------------------------------
   PULSANTI DI CONTROLLO E AZIONE
--------------------------------------------------------------*/

#config_buttons {
    position: absolute;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    width: 80%;
}

#steps {
    border-top: solid 1px var(--maincolor);
    display: flex;
    justify-content: space-between;
}

#steps .step {
    position: relative;
    display: block;
    width: 9px;
    height: 9px;
    border: solid 1px var(--maincolor);
    background-color: var(--background);
    border-radius: 6px;
    transform: translateY(-50%);
    cursor: pointer;
}

#steps .step.selected {
    background-color: var(--maincolor);
    color: var(--maincolor);
}

#steps .step span {
    display: block;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 400;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    /* padding: 0.4em 0.8em;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); */
}

#action_buttons {
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

#action_buttons .button {
    padding: 0;
    width: 50px;
    height: 50px;
    font-size: 25px;
    line-height: 50px;
    border-radius: 25px;
    vertical-align: middle;
    text-align: center;
    background-color: var(--background);
    border-color: var(--background);
    border: var(--maincolor);
    color: var(--maincolor);
}

#action_buttons .button * {
    margin: 0;
}

.configuring #panel_open {
    display: none;
}

/*--------------------------------------------------------------
   FINITURE DELLE FINESTRE MODALI
--------------------------------------------------------------*/

.window {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 2vh;
    transform: translate(-50%, -50%);
    z-index: 25;
    text-align: center;
    background-color: white;
    color: var(--color);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    width: 50%;
    border-radius: var(--borderradius);
}

@media (max-width: 768px) {

    .window {
        width: 80%;
    }

}

.window.open {
    display: block;
}

.guide_row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    text-align: left;
}

.guide_row img {
    width: 8em;
    margin-right: 1em;
}

.guide_row p {
    flex-grow: 1;
}

@media (max-width: 680px) {

    .guide_row img {
        width: 5em;
    }

}

/*--------------------------------------------------------------
   LOADER & ANIMAZIONE ROTAZIONE
--------------------------------------------------------------*/

#loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    z-index: 999;
    text-align: center;
    cursor: wait;
}

#loader:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10vh;
    height: 10vh;
    transform: translate(-50%, -50%);
    background-image: url(images/sprite_loading.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#loader #bytes {
    position: absolute;
    top: calc(50% + 10vh);
    left: 50%;
    width: 50vw;
    transform: translate(-50%, -50%);
}

.loading #loader {
    display: block;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
    }
}


/*--------------------------------------------------------------
   SIDEBAR & HANDLE DI APERTURA/CHIUSURA
--------------------------------------------------------------*/

#config_sidebar_handle {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    background-color: white;
    color: var(--color);
    text-align: center;
    line-height: 32px;
    font-size: 20px;
    vertical-align: middle;
    transition: all 1s ease;
    z-index: 6;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    transform: translate(-50%, 50%);
}

#config_sidebar_handle:hover {
    transform: translate(-50%, 50%) scale(1.2);
}

body:not(.configuring) #config_sidebar_handle .fa-minus {
    display: none;
}

.configuring #config_sidebar_handle .fa-plus {
    display: none;
}

@media (max-width: 1024px) {

    #config_sidebar_handle {
        left: calc(2vh + 15px);
        bottom: calc(2vh + 15px);
    }

    .configuring #config_sidebar_handle {
        left: 50%;
        bottom: 50%;
    }

}

@media (min-width: 1025px) {

    #config_sidebar_handle {
        left: calc(2vh + 15px);
    }

    .configuring #config_sidebar_handle {
        left: 25%;
    }

}

#config_sidebar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    color: var(--color);
    text-align: left;
    transition: all 1s ease;
    z-index: 5;
    overflow: hidden;
    opacity: 0;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.configuring #config_sidebar {
    transform: none;
    opacity: 1;
}

@media (max-width: 1024px) {

    #config_sidebar {
        transform: translateY(100%);
        height: 50%;
    }

}

@media (min-width: 1025px) {

    #config_sidebar {
        transform: translateX(-100%);
        width: 25%;
    }

}


#panel_actions{
    display: flex;
    flex-wrap: wrap;
}

/*--------------------------------------------------------------
   PANNELLI, SCROLL E STRUTTURA DEL MENU
--------------------------------------------------------------*/


.scroll {
    overflow-y: scroll;
    height: 100%;
    margin-right: -17px;
    /*padding:2vh;*/
}

.panel,
.fixed_panel {
    /* padding:2vh;
    border-bottom: solid 1px rgba(127,127,127,0.25); */
    /* margin-bottom:2vh; */
    border-radius: 5px;
    border-bottom: solid 1px rgba(127, 127, 127, 0.5);
}

/*
body.isIframe:not(.fullscreen) .panel,
body.isIframe:not(.fullscreen) .fixed_panel {
	padding-left:0;
}
*/

.fixed_panel {
    padding: 2vh 4vh calc(2vh - 0.5em);
    background-color: #F4F4F4;
}

.panel:last-child,
.fixed_panel:last-child {
    border-bottom: none;
}

.panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;

}

.panel h2 {
    display: block;
    margin: 0;
    flex-basis: 100%;
}

.subtitle {
    position: relative;
    cursor: pointer;
    margin: 0;
    /*padding: 2vh 4vh;*/
    padding: 1em;
}

.subtitle:hover, .subtitle.selected {
    color: var(--maincolor);
    transition: all 0.5s ease;
}

.subtitle.selected {
    /*border-bottom: solid 1px rgba(127, 127, 127, 0.25);*/
}

.subtitle:before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    display: inline-block;
    content: '‣';
    margin-right: 0.5em;
    transition: transform 0.5s ease;
}

.subtitle.selected:before {
    transform: rotate(90deg);
}

.subtitle + .subpanel {
    display: none;

}

.subtitle.selected + .subpanel {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    /* margin: 0 0 1em; */
    padding: 2vh 4vh calc(2vh - 0.5em);
    background-color: #F4F4F4;
}

/* .subtitle.selected + .subpanel:last-child {
	margin-bottom:-1vh;
} */

.divider {
    display: block;
    flex-basis: 100%;
    width: 100%;
    padding: 0.5em 0;
    margin: 1em 0 0.5em;
    border-top: solid 1px rgba(127, 127, 127, 0.5);
    border-bottom: solid 1px rgba(127, 127, 127, 0.5);
}

/*--------------------------------------------------------------
   ELEMENTI INTERATTIVI – ITEM, LISTE E THUMBNAILS
--------------------------------------------------------------*/

.item {
    display: block;
    cursor: pointer;
    text-align: center;
    flex-basis: 33.3%;
    width: 50%;
    padding: 0.5em;
    transition: all 0.25s ease;
    opacity: 0.8;
    position: relative;
}

.item:hover {
    opacity: 1;
}

.item.selected {
    opacity: 1;
    font-weight: 600;
}

.item .item-image {
    display: block;
    width: 100%;
    max-width: 75px;
    /*padding-bottom:100%;*/
    aspect-ratio: 1/1;
    transition: all 0.25s ease;
    border: solid 1px black;
    border-radius: 50%;
    border: solid 3px var(--webglbackround);
    background-color: rgba(255, 255, 255, 0.1);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto 5px;
}

@media (max-width: 1080px) {

    .item .item-image {
        max-width: 50px;
    }

}

.item.selected .item-image {
    border: solid 3px var(--maincolor);
}

#panel_finitura .item .item-image {
    background-size: cover;
}

/* item list */

.items_list .item {
    /*flex-basis: 250px;
    width:250px;*/
    flex-basis: 100%;
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.items_list .item .item-image {
    width: 75px;
    min-width: 75px;
    height: 75px;
    padding: 0;
    margin: 0 10px 0 0;
}

@media (min-width: 1920px) {

    /* in tablet tutti i toggle hanno span più piccolino */
    @media (max-width: 1080px) {

        .items_list .item .item-image {
            width: 50px;
            min-width: 50px;
            height: 50px;
        }

    }

    @media (max-width: 768px) {

        .items_list .item {
            flex-basis: 50%;
            width: 50%;
            text-align: left;
        }

    }
}

/* item thumbs */

@media (min-width: 1024px) {

    .items_grid .item {
        flex-basis: 33%;
        width: 33%;
    }

    /* in tablet tutti i toggle hanno span più piccolino */
    @media (min-width: 1920px) {

        .items_grid .item {
            flex-basis: 25%;
            width: 25%;
        }

    }
}

/*--------------------------------------------------------------
   PANNELLO EDITORE E VISUALIZZAZIONE 3D
--------------------------------------------------------------*/

#panel_editor {
    padding: 0 !important;
}

#panel_credits {
    font-size: 10px;
}

/******************************* GOOGLE MODEL VIEWER */

#ar_model_viewer_container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #dddddd;
    z-index: 10;
}

model-viewer {
    width: 100%;
    height: 100%;
}

/******************************* NOTIFICATIONS & ALTERTIFICATIONS */

#notifications {
    position: absolute;
    bottom: 1vh;
    right: 1vh;
    z-index: 997;
    max-width: 33vw;
    max-height: 33vh;
    overflow: auto;
}

@media (max-width: 767px) {

    #notifications {
        max-width: 66vw;
    }

}

.notification {
    position: relative;
    background-color: white;
    color: var(--color);
    padding: 1em 2em;
    margin-top: 0.5em;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    border-radius: var(--borderradius);
}
.alertification{
    z-index: 26;
}