@import url("box.css");
@import url("bopz.css");
@import url("table.css");

 html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

body {
    font-family: FontAwesome,Bahn,Verdana,Arial;
    font-size: 1rem;
    color: #06b38d;
    display: flex;
    flex-direction: column;
    max-width: 950px;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    box-sizing: border-box;
    /* background: #212321; */
    /* box-shadow: 0px 0px 10px #010101; */
    background: url(../img/sfondo02.jpg) #020301 50% 50%;
    background-size: cover;
}


.scrollmax1 {
    height: 100%;
}

.scrollmax1::-webkit-scrollbar {
    width: 10px;
}

.scrollmax1::-webkit-scrollbar-track {
    background: #04b2b2;
    border: 1px solid black;
    border-radius: 3px;
    box-shadow: 1px 0px 3px #030201 inset;
}

.scrollmax1::-webkit-scrollbar-thumb {
    background-color: #75fff8;
    border-radius: 3px;
    border: 2px solid #01261f;
    box-shadow: 0px 0px 2px #333 inset;
}

.scrollmax1::-webkit-scrollbar-thumb:hover {
    background-color: #ffeb00;
    cursor: pointer;
    /* box-shadow: 0px 0px 2px #333 inset; */
}



  /* Area superiore */
.top {
    max-height: 100px;
    height: auto;
    min-height: 0;
    /* background-color: #f8b400; */
    flex-shrink: 0;
    /* width: 100%; */
}

  /* Area inferiore */
  .bottom {
    max-height: 100px;
    height: auto;
    min-height: 0;
    flex-shrink: 0;
    width: 100%;
  }

  /* Area centrale */
.center {
    /* display: flex; */
    flex: 1;
    width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    background: #00000070;
}

.caricovoci, .loading {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    font-family: fontawesome, verdana, arial;
    font-size: 1.0rem;
    background: #0e0e0e7d;
    color: #b3b00c;
    text-shadow: 0px 1px 3px #030102;
    border: 2px solid #0e0e0e;
    padding: 5px 10px;
    border-radius: 10px;
}

.titleBarIcona {
    display: inline-block;
    font-family: fontawesome, arial;
    font-size: 1rem;
    padding-left: 2px;
    color: darkcyan;
}
.titleBarTitolo {
    display: inline-block;
    font-size: 0.9rem;
    padding-left: 4px;
    color: darkolivegreen;
    font-weight: bold;
    font-family: verdana,arial;
}
.titleBarContainer {
    display: flex;
    position: relative;
    background: beige;
    padding: 2px;
    border: 1px solid antiquewhite;
    flex-direction: row;
    align-items: center;
    align-content: center;
}

.tbar_close {
    background: red;
    color: rgb(218, 213, 213);
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 12px;
    padding: 1px 5px 0px 5px;
    border: 1px solid #000000;
    box-shadow: 0px 1px 3px greenyellow;
}
.tbar_close:hover {
    color: white;
    border: 1px solid #d79494;
    box-shadow: 0px 1px 3px #ffd4d4;
}

.uno {
	color:darkblue;
	border: 2px solid blue;
	padding: 4px 8px;
}

.inputEl_container {
    display: inline-block;
    margin: 1px;
    position: relative;
    border: 3px double #025c5f;
    border-radius: 5px;
    padding: 0px 3px 3px 3px;
    background: cadetblue;
    margin: 2px;
}

.inputEl_promptCont {
    display: flex;
    flex-direction: row;
    align-items: center;
 }
.inputEl_promptIcon {
    font-family: fontawesome, verdana;
    font-size: 0.8rem;
    margin: 0 3px;
    color: #013737;
    text-shadow: 0px 1px 3px #ffffff;
}
.inputEl_prompt {
    font-family: bahn,verdana,arial;
    font-weight: bold;
    font-size: 0.8rem;
    color: aliceblue;
    text-shadow: 0px 1px 2px #020102;
    margin-right: 30px;
}
.inputEl_inputCont {
    text-align: center;
}

.inputEl_clear {
    display: flex;
    position: absolute;
    right: 17px;
    top: 2px;
    font-family: fontawesome,verdana;
    font-size: 0.9rem;
    color: #a2e1ff;
    cursor: pointer;
    border: 1px solid #337509;
    border-radius: 50%;
    box-shadow: 0px 0px 3px #54d253;
    width: 12px;
    height: 12px;
    align-items: center;
    justify-content: center;
}

.inputEl_clear:hover {
    color: #ff0000;
    text-shadow: 0px 0px 6px #fefefe;
}

.inputEl_title {
    display: block;
    position: absolute;
    right: 2px;
    font-family: fontawesome,verdana;
    font-size: 0.9rem;
    top: 2px;
    cursor: help;
    color: #e7e32d;
}
.inputEl_title:hover {
	color: darkcyan	;
    background: #ffffff;
    border-radius: 9px;
}

input[type="text"] {
    border: 1px solid #066d6d;
    border-radius: 3px;
    box-shadow: 0px 1px 3px inset#433223;
}

.selectdblist {
    display: block;
    position: absolute;
    top: 38px;
    left: 5px;
    right: 5px;
    z-index: 3;
    border: 1px solid gray;
}

.infoicondescr {
    display: inline-flex;
    position: relative;
    margin: 2px;
    flex-direction: row;
    align-items: center;
    background: #001c0be6;
    padding: 5px;
    border-radius: 45px;
    border: 2px solid green;
    box-shadow: 0px 0px 2px 4px #000000d9;
    margin: 2px 5px;
}
.infoicon {
    font-family: fontawesome,bahn,arial;
    font-size: 1.5rem;
    border: 1px solid gold;
    padding: 3px;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    background: black;
    display: flex;
    justify-content: center;
}
.infodescr {
    font-family: fontawesome,bahn,arial;
    font-size: 0.9rem;
    color: #03ff03;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 0.9rem;
}
div#bContanti, 
div#sostBon,
div#sostPaypal {
    color: aquamarine;
    text-align: center;
}

.int2 {
    line-height: 2rem;
}

.notifiche {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 650px;
    width: 90%;
    box-sizing: border-box;
    padding: 10px 15px;
    background-color: #022716eb;
    font-family: fontawesome,bahn,arial;
    font-size:1.2rem;
    color: #e7e32d;
    border: 4px solid #1dbb09;
    border-radius: 9px;
    display: none;
    text-align: center;
    box-shadow: 0px 0px 15px #010101;
    z-index:100;
}

div#titbar {
    background: transparent;
    color: #cbffbe;
    padding: 1px 5px 0px 5px;
    font-family: axettac;
    font-size: 1.4rem;
    text-shadow: 0px 1px 3px #030201;
    text-align: left;
    display: block;
    position: relative;
}

div#userInfo {
    display: flex;
    position: absolute;
    right: 2px;
    top: 1px;
    /* background: #f0f8ff94; */
    color: navy;
    /* bottom: 0px; */
    min-width: 60px;
    text-shadow: 0px 0px 6px #fefefe;
    flex-direction: row;
    align-content: center;
    align-items: center;
}

#msg, #online {
    display: inline-block;
    position: relative;
    color: goldenrod;
    font-family: 'FontAwesome',bahn,arial;
    font-size: 0.9rem;
    padding: 4px 9px 4px 4px;
    text-shadow: 0px 0px 6px #010101;
    background: darkgreen;
    border-radius: 3px;
    margin-right: 2px;
}

#nummsg, #numonline {
    display: flex;
    position: absolute;
    top: 0px;
    right: -2px;
    height: 10px;
    font-family: swiss,arial;
    font-size: 0.7rem;
    text-align: center;
    min-width: 10px;
    background: #07cb07bf;
    border: 1px solid #006400c2;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    color: #fff4b9;
}

#username {
    font-weight: bold;
    color: #124900;
    font-family: 'FontAwesome',bahn,arial;
    font-size: 0.9rem;
    padding: 2px 3px 0px;
    text-shadow: 0px 1px 4px #fefefe;
    background: #fbfff3b0;
    border: 2px solid darkgoldenrod;
    border-radius: 5px;
    display: flex;
    align-items: center;
    box-shadow: 0px 1px 5px #434543 inset;
}

div#menubar {
    background: #034718ad;
    color: antiquewhite;
    padding: 2px 5px;
    border-radius: 9px 9px 0 0;
    box-shadow: 1px 2px 3px #16891f inset;
}

div#indicazioni {
    background: darkgreen;
    color: #1ef9b0;
    padding: 2px 3px 0px 3px;
    font-family: fontawesome,bahn,verdana;
    font-size: 1rem;
    text-align: center;
    overflow: hidden;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    box-shadow: 0px 2px 5px #010201 inset;
    text-shadow: 0px 1px 2px #030102;
}

div#bottbar {
    background: #02552fab;
    color: aliceblue;
    padding: 2px 0px;
    text-align: center;
    font-size: 0.7rem;
    border-top: 2px solid darkgreen;
    box-shadow: 0px -11px 13px 0px #020202ba;
}


.fixed-width {
    width: 150px;
    background-color: lightblue;
    height: 100%;
  }
  .flex-grow {
    flex: 1;
    background-color: lightcoral;
    height: 100%;
  }

.contatore {
    display: inline-block;
    position: absolute;
    right: 10px;
    background: #02010299;
    padding: 2px 5px;
    border-radius: 7px;
    border: 1px solid #010101;
    font-family: fontawesome,bahn,arial;
    font-size: 0.9rem;
    color: aliceblue;
    z-index: -1;
    margin: 10px 0px;
}

input.buttonMini {
    background: #7fffd4;
    border-radius: 5px;
    padding: 4px 7px;
    font-weight: bold;
    color: navy;
}
input.buttonMini:hover {
    background: beige;
    color: blue;
}

input.buttonNormal {
    font-family: 'FontAwesome','bahn';
    background: #7fffd4;
    border-radius: 5px;
    padding: 4px 6px;
    cursor: pointer;
}
input.buttonNormal:hover {
    background: beige;
}

.button02 {
    font-family: bahn,verdana,arial;
    font-weight: bold;
    font-size: 1.1em;
    color: #fddc2b;
    background: #0c9f19;
    border-radius: 10px;
    padding: 5px 10px;
    border: 2px solid darkgreen;
    box-shadow: 0px 1px 4px #111 inset;
    cursor: pointer;
    text-shadow: 0px 1px 0px #1a2902;
}
input.button02:hover {
    background: aliceblue;
    color: #0f5f02;
    border: 2px solid yellow;
    text-shadow: 0px 1px 0px #94eb07;
}

/* ICONA CERCHIATA CON OMBRA */
ic {
    padding: 3px;
    font-family: fontawesome, bahn;
    font-size: 1.2em;
    font-weight: normal;
    color: #c5d38d;
    border: 1px solid #6d6d00;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    box-shadow: 0px 0px 2px 3px #1b5100;
    vertical-align: text-bottom;
}

.buttonpay {
    font-family: fontawesome,bahn,arial;
    font-size: 1.2em;
    font-weight: bold;
    background: gold;
    color: blue;
    cursor: pointer;
    border: 2px solid goldenrod;
    border-radius: 28px;
    display: inline-block;
    padding: 3px 15px;
    box-shadow: 0px 0px 2px 3px #877003 inset;
    text-shadow: 0px 1px #fefefe;
    line-height: 1.5rem;
    margin: 4px;
}
.buttonpay:hover {
	background: #f0f8f1;
}

hr.hr50 {
    border: 2px #065151 outset;
    height: 1px;
}

.inbox_std {
    padding: 5px;
    font-family: 'FontAwesome',verdana,arial;
}

.left { text-align: left;}
.center { text-align: center;}
.right { text-align: right;}

.borderboxdouble {
    border: 4px solid #076561;
    border-radius: 7px;
    box-shadow: 0px 0px 5px black;
    border-style: double;
}

.button26, .button26red {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 5px 10px;
    margin: 3px;
    border: 2px solid #095f47;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.button26 {
    background-color: #0a56596e;
    color: #fff;
    border-radius: 32px;
    padding-left: 5px;
}
.button26red {
    background-color: #7b0101;
    color: palegoldenrod;
    border: 2px solid #ad0808e3;
    border-radius: 30px;
    padding-left: 4px;
}
.button26:hover {
    background-color: #108487;
    transform: scale(1.10);
    box-shadow: 0px 0px 10px inset #bdbebc;
}
.button26red:hover {
    background-color: #ba1e1e;
    transform: scale(1.10);
    box-shadow: 0px 0px 10px inset #fca2a2;
}

.button26icona, .button26redicona {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: fontawesome,'bahn',verdana,arial;
    font-size: 1.6rem;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    margin-right: 10px;
}
.button26icona {
    background: #f0f8ff26;
    border: 2px solid #09bb09;
}
.button26redicona {
    background: #f0f8ff26;
    border: 2px solid #bb0909;
}

.button26testo {
    font-family: fontawesome,'bahn',verdana,arial;
    font-size: 1rem;
    font-weight: bold;
}
.button26redtesto {
    font-family: fontawesome,'bahn',verdana,arial;
    font-size: 1rem;
    font-weight: bold;
}

.errorlog {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 20px;
    margin: 20px;
    border: 3px solid red;
    border-radius: 15px;
    background: darkred;
    font-family: fontawesome,'bahn';
    font-size: 1.2rem;
    color: gold;
    text-shadow: 0px 1px 3px #030102;
    box-shadow: 0px 0px 10px palevioletred;
    text-align: center;
}

.border_default {
    border: 2px solid green;
    border-radius: 5px;
    box-shadow: 0px 2px 8px inset;
    padding: 1px;
    box-sizing: border-box;
    overflow-y: hidden;
    background: darkgreen;
}
.right {
	text-align: right;
}
.center {
	text-align: center;
}

button.btn-icon {
    font-size: 1.0rem;
    font-family: 'FontAwesome','bahn';
    background: antiquewhite;
    border: 1px outset white;
    border-radius: 5px;
    margin: 2px 1px;
    width: 30px;
    cursor: pointer;
    color: #474747;
}
button.btn-icon:hover {
    border: 1px outset #ffffff;
    color: #000000;
    background: aquamarine;
}
.txtedit_cont {
    background: darkcyan;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid cyan;
    border-radius: 9px;
    box-shadow: 0px 0px 4px 1px inset #010203;
    padding: 2px;
    width: 95%;
    margin: 4px;
}
.txtedit_tit {
    color: aquamarine;
    font-family: 'FontAwesome',bahn,arial;
    font-size: 0.9rem;
}
.txtedit_area {
    font-family: 'FontAwesome',bahn,arial;
    font-size: 1rem;
    border-radius: 7px;
    padding: 1px 4px;
}

textarea#mio-input {
    font-weight: normal;
    font-family: 'FontAwesome','bahn';
    font-size: 1rem;
    height: 200px;
    width: 80%;
    border-radius: 5px;
    /*letter-spacing: 2px;*/
}

.infobox {
    display: flex;
    border: 3px double #5b8306;
    /* border-style: double; */
    border-radius: 7px;
    background: #005000ed;
    color: #005800;
    width: fit-content;
    align-items: center;
    margin: auto;
    padding: 4px;
}
.infoboxmsg {
    color: limegreen;
    padding: 5px;
}
.infobox .zIcon {
    margin-top: 2px;
    display: inline-flex;
    font-family: 'FontAwesome','bahn';
    font-size: 2rem;
    background: #3afebfa1;
    box-shadow: 0px 0px 6px #030201 inset;
    line-height: 28px;
    border: 1px solid;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    align-items: center;
    justify-content: center;
    color: #033e03;
}



/* ANIMAZIONE: DURATA */
.anim10 { animation-duration:1.0s;}
.anim12 { animation-duration:1.2s;}
.anim14 { animation-duration:1.4s;}
.anim16 { animation-duration:1.6s;}
.anim18 { animation-duration:1.8s;}
.anim20 { animation-duration:2.0s;}
.anim22 { animation-duration:2.2s;}
.anim25 { animation-duration:2.5s;}
.anim30 { animation-duration:3.0s;}
.anim35 { animation-duration:3.5s;}
.anim40 { animation-duration:4.0s;}
.anim45 { animation-duration:4.5s;}

/* ANIMAZIONE LAMPEGGIO */
.lampeggio {
    animation-name:flash;
    animation-iteration-count: infinite;
}
@keyframes flash {
    0% {
        color: transparent;
        text-shadow: 0px 1px 2px transparent;
    }
    30% {
        color: gold;
        text-shadow: 0px 1px 3px #111;
    }
    50% {
        color: white;
        text-shadow: 0px 1px 3px #111;
    }
    80% {
        color: gold;
        text-shadow: 0px 1px 2px #111;
    }
    100% {
        color: transparent;
        text-shadow: 0px 1px 2px transparent;
    }
}
/* ANIMAZIONE LAMPEGGIO2 */
.lampeggio2 {
    animation-name:flash2;
    animation-iteration-count: infinite;
}
@keyframes flash2 {
    0% {
        color: transparent;
        text-shadow: 0px 1px 2px transparent;
    }
    25% {
        color: rgb(2, 2, 66);
        text-shadow: 0px 1px 3px #111;
    }
    45% {
        color: rgb(0, 0, 255);
        text-shadow: 0px 1px 3px #111;
    }
    65% {
        color: rgb(0, 0, 255);
        text-shadow: 0px 1px 3px #111;
    }
    85% {
        color: rgb(3, 3, 77);
        text-shadow: 0px 1px 2px #111;
    }
    100% {
        color: transparent;
        text-shadow: 0px 1px 2px transparent;
    }
}

/* ANIMAZIONE CON MOVIMENTO ORIZZONTALE E CAMBIO COLORE */
.animazione {
    font-size: 2.2em;
    position: relative;
    animation: muovi 4s infinite;
    display: inline-block;
    color: yellow;
    margin-right: 9px;
    font-family: fontawesome,arial;
}
@keyframes muovi {
0% {
    left: 0;
    text-shadow: none;
    color: transparent;
    text-shadow: 0px 1px 2px transparent;
}
40% {
    left: 15px;
    color: #edd083;
    text-shadow: 0px 1px 2px #111;
}
50% {
    left: 20px;
    color: #edd083;
    text-shadow: 0px 1px 2px #111;
}
60% {
    left: 15px;
    color: #edd083;
    text-shadow: 0px 1px 2px #111;
}
100% {
    left: 0;
    text-shadow: none;
    color: transparent;
    text-shadow: 0px 1px 2px transparent;
}
}
/* ANIMAZIONE CON GIRO DI 360° E LAMPEGGIO */
.anim_rot_down {
    animation: rot_down 3s infinite;
    display: inline-block;
}
@keyframes rot_down {
0% {
	color: transparent;
    text-shadow: none;
	transform: rotate(0deg);
}
50% {
	color: darkgreen;
	transform: rotate(360deg);
}
60% {
	color: white;
	transform: rotate(360deg);
}
70% {
	color: #67f300;
	transform: rotate(360deg);
}
80% {
	color: white;
	transform: rotate(360deg);
}
90% {
	color: #67f300;
	transform: rotate(360deg);
}
100% {
	color: transparent;
    text-shadow: none;
	transform: rotate(360deg);
}
}
/*
	================
	FONT DEFINITIONS 
	================
*/
@font-face {
	font-family: 'Axettac';
	src: url('font/Axettac Demo.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}	
@font-face {
	font-family: 'GeoSlab';
	src: url('font/tt1019m_.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}	
@font-face {
	font-family: 'GeoSlab';
	src: url('font/tt1020m_.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}	
@font-face {
	font-family: 'Swiss';
	src: url('font/tt0009m_.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}	
@font-face {
	font-family: 'Swiss';
	src: url('font/tt0172m_.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}	
@font-face {
	font-family: 'Swiss';
	src: url('font/tt0010m_.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}	
@font-face {
	font-family: 'Swiss';
	src: url('font/tt0172m_.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}	
@font-face {
	font-family: 'Impact';
	src: url('font/impact.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}	
@font-face {
	font-family: 'Rave';
	src: url('font/rave.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}	
@font-face {
	font-family: 'FontAwesome';
	/*src: url('font/fontawesome-webfont.ttf?v=4.5.0') format('truetype');
	src: url('font/FontAwesomeNormale.ttf?v=4.5.0') format('truetype');
    */
	src: url('font/FontAwesomeRegular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}	
@font-face {
	font-family: 'FAsolid';
	src: url('font/fa-solid.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}	
@font-face {
	font-family: 'lcd';
	src: url('font/lcd-bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}	
@font-face {
	font-family: 'bahn';
	src: url('font/bahn.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}	
@font-face {
	font-family: 'bahn';
	src: url('font/bahn.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}	
@font-face {
	font-family: 'dominican';
	src: url('font/DOMIN___.TTF') format('truetype');
	font-weight: normal;
	font-style: normal;
}	
@font-face {
	font-family: 'carnevalee';
	src: url('font/carnevalee.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}	
@font-face {
	font-family: 'Offen';
	src: url('font/offenbacher.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}	
@font-face {
	font-family: 'Exotic';
	src: url('font/Exotc350 DmBd BT Demi-Bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}	
@font-face {
	font-family: 'Exotic';
	src: url('font/Exotc350 Bd BT Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}	
@font-face {
	font-family: 'Bronice';
	src: url('font/BroniceRegular.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
}	
@font-face {
	font-family: 'Bronice';
	src: url('font/BroniceBold.otf') format('truetype');
	font-weight: bold;
	font-style: normal;
}