/* ---- Impostazioni di carattere generale   ---  */
* {
    box-sizing: border-box;
}

html, body {
    font-family: "Lucida Sans", sans-serif;
    font-size: 14px;
    color: white;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* ---- Header Login   ---  */
.ReseArchHome {
    position: absolute;
    top: 5px;
    left: 10px;
}

.ReseArchHome:hover {
        font-weight: bold;
}

.ReseArchLogin {
    position: absolute;
    right: 10px;
    top:4px;
    font-size:10px;
}

.LoginB {
    width: 22px;
    height:22px;
}

/* ---- CONTROLLARE QUESTA   ---  */

.FooterHome {
    width: 50%;
    margin: 6px auto;
    text-align:center;
    font-size:12px;
}

.Register {
    color: #ff4f4f;
}

    .Register:hover {
        font-weight: bold;
    }


/* ---- DIV GENERALI Questi dovrebbe essere i DIV base per l'interfaccia responsiva.   ---  */
/* ---- Header   ---  */
#DivHeader {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 30px;
    background-color: #822433;
}
/* ---- Questo penso si poosa uniformare con il DivBody   ---  */
#DivMain {
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: gainsboro;
}

/* ---- Questo è il DIV centrale della Research Master Page   ---  */
#DivBody {
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: gainsboro;
}

/* ---- Questo penso sia inutilizzato   ---  */
#DivSubmenu {
}


/* ---- CONTROLLARE QUESTA   ---  */

/* ---- DIV Dialogo centrale   ---  */
#DivDia {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    height: auto;
    width: auto;
    background-color: black;
    background-color: rgba(0,0,0,.7);
    transform: translate(-50%, -50%);
}


/* ---- DIV Dialogo centrale   ---  */
#DivFooter {
    position: absolute;
    z-index: 1;
    bottom: 10px;
    height: 30px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
    line-height: 30px;
    transition: opacity 0.3s ease;
    opacity: 1;
    pointer-events: auto;
}

    /* Stato nascosto */
    #DivFooter.hidden {
        opacity: 0.1;
        /* pointer-events: none; */
    }


/* ---- FINE DIV GENERALI.   ---  */


/* ---- CONTROLLARE QUESTA   ---  */

/* ---- DIV SELEZIONE RICERCHE nella  Research Master Page   ---  */
#Slidemain {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
    border:3px;
}

#SlideButton {
    padding-bottom: 10px;
}

#SlideStrip {
    display: flex;
    justify-content: space-between;
}

#SlideDot {
    text-align: center;
    padding: 20px;
}

#SlideBigImage {
    width: 100%;
    height: auto;
}

#SlideBigImg {
    width: 100%;
    height: auto;
}
.SlideImg:hover {
    border: 3px;
    border-color:blue;
}




/* The dots/bullets/indicators */
.dotA {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #822433;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.active, .dotA:hover {
        background-color: #717171;
    }

.dotB {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color:darkgray;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dotB:hover {
    background-color: #717171;
}


/* The grid: Four equal columns that floats next to each other */
.ImgColumn {
    float: left;
}

    .ImgColumn:hover {
        box-shadow: 2px 2px 4px #000000;
    }


/* ---- Dati ricerche Landing Page   ---  */

.ResTitle {
    font-size: 40px;
    font-variant: small-caps;
    padding: 5px;
    text-shadow: 2px 2px 4px #000000;
}
.ResSubTitle {
    font-size: 20px;
    height: 100%;
    width: 100%;
    padding: 5px;
    text-shadow: 2px 2px 4px #000000;
}
.ResMember {
    font-size: 16px;
    font-style: italic;
    height: 100%;
    width: 100%;
    padding: 5px;
    text-shadow: 2px 2px 4px #000000;
}
.ResAbstract {
    font-size: 14px;
    height: 100%;
    width: 100%;
    padding: 5px;
    text-shadow: 2px 2px 4px #000000;
}







/* ---- MApplication Maswter Page   ---  */

#MnuHeader {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 30px;
    background-color: #822433;
}

/* ---- CONTROLLARE QUESTA   ---  */

/* ---- Menù sinstro a scomparsa, DIV nel Master   ---  */
#MenuSX {
    position: absolute;
    z-index: 1;
    top: 50px;
    left: 0; /* adesso è "ancorato" al bordo sinistro */
    width: 290px;
    height: auto;
    transform: translateX(-250px); /* lo spinge visivamente fuori */
    transition: transform 1s;
    transition-delay: 2s;
    /*background-color: rgba(0, 0, 0, 0.7);  fallback già incluso */
}

    #MenuSX:hover {
        transform: translateX(0); /* lo fa rientrare in posizione */
        transition-delay: 0s;
    }

/* ---- Sub Menù sinstro 1 e 2  a scomparsa, DIV nel Master   ---  */
#MenuSX1, #MenuSX2, #MenuSX3 {
    margin: 0px;
    padding: 10px;
    background-color: black;
    background-color: rgba(0,0,0,.7);
    width: 250px;
}
#MenuSX2 > * {
        align-items:center;
}

div.menuSX2, div.menuSX3 {
    padding: 10px;
    background-color: black;
    background-color: rgba(0,0,0,.7);
    width: 250px;
    align-items: center;
}
/* ---- Sub Menù sinstro 12  - Icone divisione finestre   ---  */
/* ---- la clsse per ora è vuota perchè serve solo per trovarli e applicarli gli eventi drag&drop  ---  */
.ico-msx1 {
    height: 32px;
    width: 32px;
}

.mod-cat {
    font-weight: bold;
    cursor: pointer;
    margin: 5px 0;
}
/* ---- Sub Menù sinstro 2  - Lista Oggetti   ---  */

.mod-list {
    display: none;
    margin-left: 20px;
}

.mod-mod {
    display: flex;
    align-items: center;
    margin: 5px 0;
    cursor: grab;
}

.mod-img {
        width: 32px;
        height: 32px;
        margin-right: 10px;
}

/* ---- CONTROLLARE QUESTA   ---  */

.gui-tjs {
    position: relative;
    bottom: 100px;
    left: 30px;
    width:300px;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
}
/* ---- CONTROLLARE QUESTA   ---  */

#MenuDX {
    position: absolute;
    z-index: 1;
    top: 50px;
    right: 0; /* ora è attaccato al bordo destro */
    width: 290px;
    height: auto;
    transform: translateX(250px); /* completamente fuori dallo schermo */
    transition: transform 1s;
    transition-delay: 2s;
}

    #MenuDX:hover {
        transform: translateX(0px); /* rientra in posizione visibile */
        transition-delay: 0s;
    }

/* ---- Titoli destra  sinistra  ---  */



#MenuDX1 {
    float: right;
    padding: 10px;
    align-content: center;
    background-color: black;
    background-color: rgba(0,0,0,.7);
    width: 250px;
}


.MenuTitleSX {
    width: 290px;
    float: left;
    background-color: #822433;
    padding: 10px;
}

.MenuTitleDX {
    width:290px;
    float: right;
    background-color: #822433;
    padding: 10px;
    text-align:right;
}

/* ---- Progress Bar Caricamento ThreeJS File Multipli  ---  */
/* ---- CONTROLLARE QUESTA   ---  */

#progress-container {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    background: #ccc;
    border-radius: 5px;
    overflow: hidden;
    display: none;
}

#progress-bar {
    height: 10px;
    width: 0%;
    background: #4caf50;
    transition: width 0.3s ease;
}

#progress-text {
    text-align: center;
    font-size: 14px;
    margin-top: 5px;
}






/* ---- Classi funzionali alla suddivisione dei DIV per la configurazione della multiview  ---  */

.DivCV2,
.DivCH2,
.DivCV3,
.DivCH3,
.DivCV6,
.DivCH6 {
    box-sizing: border-box;
    margin: 0;
    background-color: #111111;
    border: solid 1px #222222; /* Imposto subito il bordo trasparente */
    transition: border-color 0.3s, box-shadow 0.3s;
    position: relative;
    outline: none;
    cursor: pointer;
}

/* --- Specifiche di layout --- */
.DivCV2 { width:  50%; height:100%; float: left;}
.DivCH2 { width: 100%; height: 50%;}

.DivCV3 { width: 33.3%; height: 100%; float:  left;}
.DivCH3 { width: 100%;  height:33.3%;}

.DivCV6 { width: 66.6%; height: 100%; float: left;}
.DivCH6 { width: 100% ; height: 66.6%;}

    /* --- Stato attivo, comune --- */
    .DivCV2.active,
    .DivCH2.active,
    .DivCV3.active,
    .DivCH3.active,
    .DivCV6.active,
    .DivCH6.active {
        border-color: #822433;
        box-shadow: inset 0 0 20px #822433;
        cursor: default;
    }

    /* --- Hover comune --- */
    .DivCV2:hover,
    .DivCH2:hover,
    .DivCV3:hover,
    .DivCH3:hover,
    .DivCV6:hover,
    .DivCH6:hover {
        border-color: #777777;
    }

/* ---- Fine - Classi funzionali alla suddivisione dei DIV per la configurazione della multiview  ---  */




/* Dialog Windows */


#UP_LogONOFF {
    position: absolute;
    left: 170px;
    width: 200px;
    top: 40px;
    height: 500px;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,.7);
    z-index: 1;
}

#UP_ListDwgBoxONOFF {
    position: relative;
    padding: 10px;
    margin: auto;
    top: 300px;
    width: 600px;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,.7);
    z-index: 1;
}

#ListDwgTable {
    padding: 10px;
}

#UP_FileNameONOFF {
    position: relative;
    padding: 10px;
    margin: auto;
    width: 308px;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,.7);
    z-index: 1;
    top: 300px;
}

#UP_LayNameONOFF {
    position: relative;
    padding: 10px;
    margin: auto;
    width: 308px;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,.7);
    z-index: 1;
    top: 300px;
}


#UP_ColorONOFF {
    position: relative;
    padding: 10px;
    margin: auto;
    width: 200px;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,.7);
    z-index: 1;
    top: 300px;
}



    /* Style the images inside the grid */
.ImgBig  {
    width: 100%;
    height: auto;
}


.Butt_Filter {
    font-size: 12px;
    width: 19%;
}

/* ---- CONTROLLARE QUESTA   ---  */

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
    position: relative;
    display: none;
}



/* Closable button inside the image */
.closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 35px;
    cursor: pointer;
}

* {
    box-sizing: border-box
}

/* Container needed to position the overlay. Adjust the width as needed */
.container {
    position: relative;
    width: 50%;
    max-width: 300px;
}

/* Make the image to responsive */
.image {
    display: block;
    width: 100%;
    height: auto;
}

/* The overlay effect - lays on top of the container and over the image */
.overlay {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 0;
    font-size: 20px;
    padding: 20px;
    text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.container:hover .overlay {
    opacity: 1;
}


.slideup, .slidedown {
    overflow: hidden;
    width: 0;
    transition: width 0.5s;
}

.slidedown {
    width: 30px;
}