@font-face{
font-family: 'Samton';
font-style: normal;
font-weight: normal;
src: url('../font/Samton.eot');
src: local(''),
url('../font/Samton.eot?#iefix') format('embedded-opentype'),
url('../font/Samton.woff2') format('woff2'),
url('../font/Samton.woff') format('woff'),
url('../font/Samton.ttf') format('truetype'),
url('../font/Samton.svg#Samton') format('svg');
}
html, body{
height: 100%;
background: #F8F0FF;
color: #000000;
font-family: 'Samton';
font-size: 14px;
overflow-x: hidden;
}
.menu{
position: fixed;
left: 0px;
width: 200px;
height: 100%;
padding: 20px;
background: #303030;
color: #FFFFFF;
text-align: left;
margin: -10px;
}
.menu .testo{
text-transform: uppercase;
margin: 10px;
color: #F8F0FF;
cursor: pointer;
}
.menu .testo:hover{
color: #FFFFFF;
}
.logo{
margin: 10px 25px;
max-width: 150px;
max-height: 100px;
}
.contenuto{
position: absolute;
top: 0px;
left: 230px;
padding: 20px;
text-align: left;
width: calc(100% - 280px);
}
.titolo{
background: #FFFFFF;
padding: 10px 50px;
border: 1px solid #DCDCDC;
border-radius: 10px; 
color: #000000;
width: calc(100% - 132px);
}
.titolo .testo{
text-transform: uppercase;
font-size: 20px;
}
.campagna{
float: left;
margin: 5px;
padding: 20px;
width: 250px;
height: 100px;
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
cursor: pointer;
}
.campagna:hover{
background: #F9F9F9;
}
.campagna .nome{
width: 290px; 
margin: -20px; 
height: 40px; 
background: #D8FFDB; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px;
}
.campagna .testo{
position: relative; 
top: 10px; 
left: 20px;
text-transform: uppercase;
}
.campagna .testo_piccolo{
text-transform: uppercase;
font-size: 10px;
}
.campagna .timer{
text-transform: uppercase;
font-size: 20px;
}
.campagna .rimanenti{
float: left;
position: relative;
top: 10px;
left: -20px;
width: 250px;
height: 20px;
padding: 5px 20px;
background: transparent;
color: #000000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-transform: uppercase;
}
.campagna .importo{
float: right;
position: relative;
bottom: 4px;
left: 20px;
padding: 5px 15px;
width: 50px;
height: 18px;
background: #216477;
color: #FEF0FF;
text-align: right;
border: 1px solid #216477;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
text-transform: uppercase;
}
.resoconto{
float: left;
margin: 5px;
padding: 20px;
width: calc(25% - 58px);
height: 100px;
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
}
.resoconto .testo{
text-transform: uppercase;
}
.resoconto .testo_grande{
text-transform: uppercase;
font-size: 20px;
}
.profilo_info{
float: left;
margin: 5px;
padding: 20px;
width: calc(50% - 65px);
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
}
.profilo_info .testo{
text-transform: uppercase;
font-size: 14px;
}
.profilo_info .campo{
width: 100%;
height: 30px;
font-family: 'Samton';
font-size: 14px;
background: #F9F9F9;
color: #000000;
padding: 5px 10px;
border: 1px solid #DEDEDE;
border-radius: 5px;
cursor: text;
}
.profilo_info .select{
width: 100%;
height: 30px;
font-family: 'Samton';
font-size: 14px;
background: #F9F9F9;
color: #000000;
padding: 5px 10px;
border: 1px solid #DEDEDE;
border-radius: 5px;
cursor: default;
}
.profilo_info .pulsante{
float: right;
background: #C9D2FF;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #89A7FF;
border-radius: 10px;
padding: 5px 10px;
cursor: pointer;
}
.profilo_info .pulsante:hover{
background: #E4E8FF;
}
.campagna_info{
float: left;
margin: 5px;
padding: 20px;
width: calc(50% - 65px);
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
}
.campagna_info .testo{
text-transform: uppercase;
font-size: 14px;
}
.campagna_info .pulsante{
background: #C9D2FF;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #89A7FF;
border-radius: 10px;
padding: 5px 10px;
cursor: pointer;
}
.campagna_info .pulsante:hover{
background: #E4E8FF;
}
.campagna_info .pulsante_sinistro{
float: left;
margin-left: 5%;
background: #A9FF77;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #66FF00;
border-radius: 10px;
padding: 5px 10px;
cursor: pointer;
}
.campagna_info .pulsante_sinistro:hover{
background: #D8FFBD;
}
.campagna_info .pulsante_destro{
float: right;
margin-right: 5%;
background: #FFBFAA;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #FF9E81;
border-radius: 10px;
padding: 5px 10px;
cursor: pointer;
}
.campagna_info .pulsante_destro:hover{
background: #FFDFD4;
}
.cronologia_info{
float: left;
margin: 5px;
padding: 20px;
width: calc(100% - 78px);
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
}
.cronologia_info .campo{
margin: 5px 0px;
width: 100%;
height: 30px;
font-family: 'Samton';
font-size: 14px;
background: #F9F9F9;
color: #000000;
padding: 5px 10px;
border: 1px solid #DEDEDE;
border-radius: 5px;
cursor: text;
}
.cronologia_info .testo{
text-transform: uppercase;
font-size: 14px;
}
.cronologia_info .pulsante_ricerca{
float: right;
background: #C9D2FF;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #89A7FF;
border-radius: 10px;
padding: 5px 10px;
cursor: pointer;
}
.cronologia_info .pulsante_ricerca:hover{
background: #E4E8FF;
}
.cronologia_info .pulsante{
float: left;
background: #C9D2FF;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #89A7FF;
border-radius: 5px;
padding: 0px 10px;
cursor: pointer;
}
.cronologia_info .pulsante:hover{
background: #E4E8FF;
}
.cronologia_info .pulsante_sinistro{
margin: 0px 2px;
background: #A9FF77;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #66FF00;
border-radius: 5px;
padding: 0px 10px;
cursor: pointer;
}
.cronologia_info .pulsante_sinistro:hover{
background: #D8FFBD;
}
.cronologia_info .pulsante_destro{
margin: 0px 2px;
background: #FFBFAA;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #FF9E81;
border-radius: 5px;
padding: 0px 10px;
cursor: pointer;
}
.cronologia_info .pulsante_destro:hover{
background: #FFDFD4;
}
.pulsante_ricerca{
float: left;
background: #C9D2FF;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #89A7FF;
border-radius: 10px;
margin: 0px 10px;
padding: 5px 10px;
cursor: pointer;
}
.pulsante_ricerca:hover{
background: #E4E8FF;
}
.richiedi_info{
float: left;
margin: 5px;
padding: 20px;
width: calc(50% - 65px);
min-height: 360px;
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
}
.richiedi_info .testo{
text-transform: uppercase;
font-size: 14px;
}
.richiedi_info .campo_piccolo{
width: 30%;
height: 30px;
font-family: 'Samton';
font-size: 14px;
background: #F9F9F9;
color: #000000;
padding: 5px 10px;
border: 1px solid #DEDEDE;
border-radius: 5px;
cursor: text;
}
.richiedi_info .campo{
width: 100%;
height: 30px;
font-family: 'Samton';
font-size: 14px;
background: #F9F9F9;
color: #000000;
padding: 5px 10px;
border: 1px solid #DEDEDE;
border-radius: 5px;
cursor: text;
}
.richiedi_info .pulsante_pagamento{
float: right;
background: #C9D2FF;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #89A7FF;
border-radius: 10px;
padding: 5px 10px;
cursor: pointer;
}
.richiedi_info .pulsante_pagamento:hover{
background: #E4E8FF;
}
.richiedi_info .pulsante{
float: left;
background: #C9D2FF;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #89A7FF;
border-radius: 10px;
padding: 5px 10px;
cursor: pointer;
}
.richiedi_info .pulsante:hover{
background: #E4E8FF;
}
.richiedi_info .pulsante_sinistro{
margin: 0px 2px;
background: #A9FF77;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #66FF00;
border-radius: 5px;
padding: 0px 10px;
cursor: pointer;
}
.richiedi_info .pulsante_sinistro:hover{
background: #D8FFBD;
}
.richiedi_info .pulsante_destro{
margin: 0px 2px;
background: #FFBFAA;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #FF9E81;
border-radius: 5px;
padding: 0px 10px;
cursor: pointer;
}
.richiedi_info .pulsante_destro:hover{
background: #FFDFD4;
}
.messaggi_info{
float: left;
margin: 5px;
padding: 20px;
width: calc(100% - 78px);
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
}
.messaggi_info .campo{
margin: 5px 0px;
width: 100%;
height: 30px;
font-family: 'Samton';
font-size: 14px;
background: #F9F9F9;
color: #000000;
padding: 5px 10px;
border: 1px solid #DEDEDE;
border-radius: 5px;
cursor: text;
}
.messaggi_info .testo{
text-transform: uppercase;
font-size: 14px;
}
.messaggi_info .pulsante{
float: right;
background: #C9D2FF;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #89A7FF;
border-radius: 10px;
padding: 5px 10px;
cursor: pointer;
}
.messaggi_info .pulsante:hover{
background: #E4E8FF;
}
.messaggi{
float: left;
padding-right: 10px;
width: 82%;
height: calc(100vh - 330px);
background: #FFFFFF;
overflow: auto;
border-right: 1px solid #DEDEDE;
}
.online{
float: right;
padding-left: 10px;
width: 15%;
height: calc(100vh - 350px);
background: #FFFFFF;
overflow: auto;
}
.classifica_info{
float: left;
margin: 5px;
padding: 20px;
width: calc(50% - 65px);
min-height: calc(100vh - 180px);
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
}
.classifica_info .testo{
text-transform: uppercase;
font-size: 20px;
}
.lista_membri{
float: left;
margin: 5px;
padding: 20px;
width: calc(100% - 78px);
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
}
.lista_membri .testo{
text-transform: uppercase;
font-size: 14px;
}
.lista_membri .pulsante{
float: left;
background: #C9D2FF;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #89A7FF;
border-radius: 5px;
padding: 0px 10px;
cursor: pointer;
}
.lista_membri .pulsante:hover{
background: #E4E8FF;
}
.membri_info{
float: left;
margin: 5px;
padding: 20px;
width: calc(50% - 65px);
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
}
.membri_info .testo{
text-transform: uppercase;
font-size: 14px;
}
.membri_info .campo_piccolo{
width: 30%;
height: 30px;
font-family: 'Samton';
font-size: 14px;
background: #F9F9F9;
color: #000000;
padding: 5px 10px;
border: 1px solid #DEDEDE;
border-radius: 5px;
cursor: text;
}
.membri_info .campo{
width: 100%;
height: 30px;
font-family: 'Samton';
font-size: 14px;
background: #F9F9F9;
color: #000000;
padding: 5px 10px;
border: 1px solid #DEDEDE;
border-radius: 5px;
cursor: text;
}
.membri_info .pulsante{
float: left;
background: #C9D2FF;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #89A7FF;
border-radius: 10px;
padding: 5px 10px;
cursor: pointer;
}
.membri_info .pulsante:hover{
background: #E4E8FF;
}
.membri_cronologia{
float: left;
margin: 5px;
padding: 20px;
width: calc(100% - 78px);
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
}
.richiesta{
float: left;
margin: 5px;
padding: 20px;
width: 250px;
height: 126px;
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
cursor: pointer;
}
.richiesta:hover{
background: #F9F9F9;
}
.richiesta .nome{
width: 290px; 
margin: -20px; 
height: 40px; 
background: #D8FFDB; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px;
}
.richiesta .importo{
float: right;
position: relative;
bottom: 15px;
left: 20px;
padding: 5px 15px;
width: 50px;
height: 18px;
background: #216477;
color: #FEF0FF;
text-align: right;
border: 1px solid #216477;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
text-transform: uppercase;
}
.richiesta .pulsante_sinistro{
float: left;
background: #A9FF77;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #66FF00;
border-radius: 10px;
padding: 5px 10px;
cursor: pointer;
}
.richiesta .pulsante_sinistro:hover{
background: #D8FFBD;
}
.richiesta .pulsante_destro{
float: right;
background: #FFBFAA;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #FF9E81;
border-radius: 10px;
padding: 5px 10px;
cursor: pointer;
}
.richiesta .pulsante_destro:hover{
background: #FFDFD4;
}
.richiesta .testo{
position: relative; 
top: 10px; 
left: 20px;
text-transform: uppercase;
}
.richiesta .testo_piccolo{
text-transform: uppercase;
font-size: 10px;
}
.richiesta .informazioni{
text-transform: uppercase;
font-size: 14px;
}
.richiesta .data{
float: left;
position: relative;
top: 10px;
left: -20px;
width: 250px;
height: 20px;
padding: 5px 20px;
background: transparent;
color: #000000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-transform: uppercase;
}
.gestisci_campagne_info{
float: left;
margin: 5px;
padding: 20px;
width: calc(100% - 78px);
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
}
.gestisci_campagne_info .testo{
text-transform: uppercase;
font-size: 14px;
}
.gestisci_campagne_info .campo_piccolo{
width: 30%;
height: 30px;
font-family: 'Samton';
font-size: 14px;
background: #F9F9F9;
color: #000000;
padding: 5px 10px;
border: 1px solid #DEDEDE;
border-radius: 5px;
cursor: text;
}
.gestisci_campagne_info .campo{
width: 100%;
height: 30px;
font-family: 'Samton';
font-size: 14px;
background: #F9F9F9;
color: #000000;
padding: 5px 10px;
border: 1px solid #DEDEDE;
border-radius: 5px;
cursor: text;
}
.gestisci_campagne_info .pulsante{
float: right;
background: #C9D2FF;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #89A7FF;
border-radius: 10px;
padding: 5px 10px;
margin: 0px 5px;
cursor: pointer;
}
.gestisci_campagne_info .pulsante:hover{
background: #E4E8FF;
}
.gestisci_campagne_info .pulsante_modifica{
float: left;
background: #C9D2FF;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #89A7FF;
border-radius: 5px;
padding: 0px 10px;
cursor: pointer;
}
.gestisci_campagne_info .pulsante_modifica:hover{
background: #E4E8FF;
}
.gestisci_campagne .pulsante{
float: left;
background: #C9D2FF;
color: #000000;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
border: 1px solid #89A7FF;
border-radius: 10px;
padding: 5px 10px;
margin: 0px 10px;
cursor: pointer;
}
.gestisci_campagne .pulsante:hover{
background: #E4E8FF;
}
.campagne_cronologia{
float: left;
margin: 5px;
padding: 20px;
width: calc(100% - 78px);
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
}