/* import css files */
@import url(./assets/css/_variabili.css);

/* include other css */
@import url(./assets/css/_menu_desktop.css);
@import url(./assets/css/_menu_mobile.css);

* {
    box-sizing: border-box;
}

.resize-animation-stopper * {
    animation: none !important;
    transition: none !important;
  }

  
html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    
}


#canvas {
    width: 100%;
    height: 100%;
    touch-action: none;
}

.noselect{
                -webkit-touch-callout: none; 
/* iOS Safari */ 
-webkit-user-select: none; 
/* Chrome/Safari/Opera */ 
-khtml-user-select: none; 
/* Konqueror */ 
-moz-user-select: none; 
/* Firefox */ 
-ms-user-select: none; 
/* Internet Explorer/Edge */ 
user-select: none; 
/* Non-prefixed version, currently not supported by any browser */  
            }

.desktop {
    display: flex;
}

.mobile {
    display: none;
}

/* ---------------------- LOADING PAGE --------------------- */
#loadingPage {

    position: fixed;
    height: 100%;
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: visible;
    opacity: 1;
    z-index: 2;
}

.loadingPage>img {
    opacity: 1;
    height: 6em;
    
}

#loadingPage.hidden {
    opacity: 0%;
    width: 0%;
    z-index: -1;
    transition: all 0.5s linear;
}


#loadingLogo {

    position: fixed;
    height: 100%;
    width: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 1;
    z-index: 2;
    
}


/* ------------X---------- LOADING PAGE -----------X---------- */



/* ---------------------- MAIN --------------------- */

main{
    height: 100%;
    width: 100%;
}

.colonna {
    float: left;
    height: 100%;
}

.app_container {
    height: 100%;
}

.app_container:after {
    content: "";
    display: table;
    clear: both;
}

.configuratore {
    background-color: var(--grigio_chiaro);
    width: 100%;
    transition: width var(--transition_menu) linear;
}

.configuratore.chiuso {
    width:100%;
    transition: width var(--transition_menu) linear;
}

#superresolution {
    background-color: transparent;
    padding: 0px 10px 20px 10px;
    margin: 0px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 2.5em;
    box-sizing: border-box;
    user-select: none;
}

.superresolution {
    background-color: transparent;
    display: flex;
    align-items: center;
    margin: 0px;
    padding: 0px;
    border-top: 0.05em solid rgb(235, 235, 235);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.superresolution>h2 {
    right: 10px;
    position: absolute;
    font-family: M_thin;
    color: rgb(235, 235, 235);
    font-size: 1em;
}

.superresolution>h2>span {
    font-size: 0.5em;
}

.pointTexture_tappeto {
    width: 70px;
    height: 70px;
    top: -25px;
    left: -25px;
    position: absolute;
    background-color: transparent;
    cursor: pointer;
    /* display: none; */
}

.pulse {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgb(255, 255, 255);
    transform: scale(1);
    animation: pulse 2s infinite;
}

.pointTexture_img {
   
    width: 100%;
    height: 100%;
    opacity: 0.9;
}

#img_pavimento, #img_tappeto {
    content: url("./assets/images/info_unactive.PNG") ;
}

#img_pavimento:hover, #img_tappeto:hover {
   content: url("./assets/images/info_active.PNG") ;
}

.scheda_info {
    background-color: rgb(0, 0, 0, 0.3);
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    padding: 20px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -webkit-box-align: start;
    align-items:center;
    justify-content:center ;
    flex-direction: row;
    flex-grow: 1;
    opacity: 0;
    display: none;
    position: fixed;
}

.scheda_img {
    position: relative;
    width: 40em;
    height: 0%;
}

.scheda_esc {
    cursor: pointer;
    position: absolute;
    width: 6em;
    height: 6em;
    right: 0px;
    margin: 0.5em;
    opacity: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 20px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -webkit-box-align: start;
    align-items:center;
    justify-content:center ;
    flex-direction: row;
    flex-grow: 1;
}

.scheda_esc:hover {
    opacity: 0.5;
}

.scheda_img>img {
    width: 100%;
    height: 100%;
}

.scheda_esc>img {
    width: 90%;
    height: 90%;
}


@keyframes pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
	}

	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}


/* ------------X---------- MAIN -----------X---------- */



@media only screen and (max-width:1024px) {

  
    .configuratore {
        width: 100%;
        transition: width var(--transition_menu) linear;
    }

    .configuratore.chiuso {
        width: 100%;
        transition: width var(--transition_menu) linear;
    }

    #superresolution {
        height: 4em;
    }

    .superresolution>h2 {
        font-size: 1.5em;
    }

}