html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*================================= FINE RESET CSS ================================================*/
/*=================================================================================================*/

#cookie-bar {background:#000000; height:auto; line-height:24px; color:#ffffff; text-align:center; padding:3px 0;}

#cookie-bar.fixed {position:fixed; top:0; left:0; width:100%;}

#cookie-bar.fixed.bottom {bottom:auto; top:0;}

#cookie-bar p {margin:0; padding:0;}

#cookie-bar a {color:#ffffff; display:inline-block; border-radius:3px; text-decoration:none; padding:0 6px; margin-left:8px;}

#cookie-bar .cb-enable {background:#ffffff; color:#000000;}

#cookie-bar .cb-enable:hover {background:#000000; color:#ffffff;}

#cookie-bar .cb-disable {background:#990000;}

#cookie-bar .cb-disable:hover {background:#bb0000;}

#cookie-bar .cb-policy {background:#ffffff; color:#000000;}

#cookie-bar .cb-policy:hover {background:#000000; color:#ffffff;}

html {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/* ==========================================================================
   MENU MOBILE
   ========================================================================== */

#menu-mobile {display:none; background-color: #000f16; padding: 20px; position: absolute; top: 90px; left: 0; right: 0;}

#header #menu-mobile ul li {float: right; margin-left: 30px;}

#menu-mobile ul {margin-right:10px;}

#menuButton {display:none; font-size:30px; float:right; margin-right:20px;}

#menuButton:hover {cursor:pointer; text-decoration: none;}

#menuButton a:hover {text-decoration: none;}

/* ==========================================================================
   CHIUSURA MOBILE
   ========================================================================== */


/* ==========================================================================
   General styles
   ========================================================================== */

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: subpixel-antialiased;
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 16px;
    -webkit-font-smoothing: antialiased!important;
    -webkit-overflow-scrolling: touch;
    text-rendering: optimizeLegibility !important;
}

.container {
    max-width: 1110px;
    margin-left: auto;
    margin-right: auto;
}

.clearfix {clear: both;}

* {box-sizing: border-box;}

a {text-decoration: none; color:#000;}

a:hover {text-decoration: none; color: #0f3172;}

b {font-weight:bold;}

.active {text-decoration: underline;}

.hideme
{
	display: none;
}

ul li {list-style-type: none;}

#navbar-mobile {display: none;}

.space-150 {height: 150px; width:100%; float:left;}

.space-100 {height: 100px; width:100%; float:left;}

.space-25 {height: 25px; width:100%; float:left;}

.space-15 {height: 15px; width:100%; float:left;}

.space-40 {height: 40px; width:100%; float:left;}

.space-50 {height: 50px; width: 100%; float:left;}

.space-115 {height: 115px; width: 100%; float:left;}

.space-80 {height: 80px; width: 100%; float:left;}

.no-padding-left {padding-left:0px!important;}

.no-padding-bottom {padding-bottom:0px!important;}

.no-padding-top {padding-top:0px!important;}

.no-padding {padding:0px!important;}

.no-padding-horizontal {padding-left:0px!important; padding-right:0px!important;}

.no-padding-vertical {padding-top:0px!important; padding-bottom:0px!important;}

.no-margin-vertical {margin-top:0px!important; margin-bottom:0px!important;}

.no-margin-bottom {margin-bottom:0px!important;}

.text-left {text-align:left!important;}

.text-right {text-align:right!important;}

.text-center {text-align:center!important;}

.float-left {float:left!important;}

.float-right {float:right!important;}

.BLOCK-img {width:100%; display:block;}

.position-relative {position:relative;}

.position-absolute {position:absolute;}

.position-fixed {position:fixed;}

.display-none {display:none!important;}

.display-block {display:block!important;}

h1 {
	font-family: 'Roboto', sans-serif;
	font-size: 48px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 50px;
    color:#ffdc21;
    text-transform: uppercase;
}

h2 {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 36px;
    letter-spacing: normal;
    line-height: 48px;
    color:#000;
}

h3 {
	font-family: 'Roboto', sans-serif;
	font-size: 22px;
    font-weight: 300;
    letter-spacing: normal;
    line-height: 30px;
    color:#333332;
}

h4 {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 22px;
    font-weight: bold;
    color:#000;
}








h5 {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
    font-weight: 700;
}

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

.col, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}

@media (min-width: 768px) {
.col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
}
.col-sm-12 {
    width: 100%;
}
.col-sm-11 {
    width: 91.66666667%;
}
.col-sm-10 {
    width: 83.33333333%;
}
.col-sm-9 {
    width: 75%;
}
.col-sm-8 {
    width: 66.66666667%;
}
.col-sm-7 {
    width: 58.33333333%;
}
.col-sm-6 {
    width: 50%;
}
.col-sm-5 {
    width: 41.66666667%;
}
.col-sm-4 {
    width: 33.33333333%;
}
.col-sm-3 {
    width: 25%;
}
.col-sm-2 {
    width: 16.66666667%;
}
.col-sm-1 {
    width: 8.33333333%;
}
}

@media (min-width: 992px) {
.col, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
}
.col-md-12 {
    width: 100%;
  	}
.col-md-11 {
    width: 91.66666667%;
}
.col-md-10 {
    width: 83.33333333%;
}
.col-md-9 {
    width: 75%;
}
.col-md-8 {
    width: 66.66666667%;
}
.col-md-7 {
    width: 58.33333333%;
}
.col-md-6 {
    width: 50%;
}
.col-md-5 {
    width: 41.66666667%;
}
.col-md-4 {
    width: 33.33333333%;
}
.col-md-3 {
    width: 25%;
}
.col-md-2 {
    width: 16.66666667%;
}
.col-md-1 {
  	width: 8.33333333%;
}
}

@media (min-width: 1200px) {
  
.col, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
	float: left;
}
.col-lg-12 {
    width: 100%;
}
.col-lg-11 {
    width: 91.66666667%;
}
.col-lg-10 {
    width: 83.33333333%;
}
.col-lg-9 {
    width: 75%;
}
.col-lg-8 {
    width: 66.66666667%;
}
.col-lg-7 {
    width: 58.33333333%;
}
.col-lg-6 {
    width: 50%;
}
.col-lg-5 {
    width: 41.66666667%;
}
.col-lg-4 {
    width: 33.33333333%;
}
.col-lg-3 {
    width: 25%;
}
.col-lg-2 {
    width: 16.66666667%;
}
.col-lg-1 {
    width: 8.33333333%;
} 	
}
	
@-ms-viewport {
  width: device-width;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	position: relative;
	padding: 10px;
}

.row {
  	float:left;
  	clear: both;
  	width: 100%;
}

.dark-row {background-color:#0f3172;}

.small {font-size:12px;}

.display-mobile {display:none;}

.display-desktop {display:block;}

.txt-black {color:#000000!important;}

.txt-grey {color:#5a5959!important;}

.txt-blue {color:#1c4ebf!important;}

.txt-red {color:#ff0e0e!important;}

.border-white {border:1px solid #ffffff;}

.font-weight-light {font-weight:100!important;}

.opacity-0 {opacity: 0!important;}

.opacity-1 {opacity: 1!important;}

/* ==========================================================================
   HEADER 
   ========================================================================== */

.header {
	background: #373532;
	padding:0px;
}

#navbar {
	margin-top:0px;
}

.header-logo {
	float:left;
	height:90px;
}

#img-Profilo {
	float:right;
	height:90px;
	margin-left:50px;
}

#menu { 
	font-family: 'Roboto', sans-serif;
	float:right; 
	text-align:right; 
	font-size:18px;
	font-weight:300; 
}

#header .col-50 ul {
	margin-left:100px;
	margin-top: 0;
}

#header .col-50 ul li {
    color: #ffffff;
    float: left;
    margin-right: 20px;
    padding-top: 30px;
    text-align: center;
    width: 100px;
    min-height: 90px;
}

#header .col-50 ul li:hover {
	background-color:#0b2049;
	cursor:pointer;
}

#header .col-50 .fa {
	color:#ffdc21;
	margin-right:10px;
} 

#navbar p {
	text-align:left;
	float:left;
	margin-top:30px;
}

#navbar a:hover {
	color:#ffdc21;
}

#header .col-50.col-dx ul li {
	margin-right: 0;
	background-color: #1e4ca4;
}

#header .col-50.col-dx ul li:hover {
	background-color:#0b2049;
}

#header .col-50.col-dx ul li:first-child {
	border-right: 1px solid #373532;
}

#header .fas {
	font-size: 26px;
}

#header .fab {
	font-size: 26px;
}

/* ==========================================================================
   MARGIN BOTTOM
   ========================================================================== */
   
.margin-bottom-60 {
	margin-bottom: 60px!important;
}
 
.margin-bottom-40 {
	margin-bottom: 40px!important;
}

.margin-bottom-80 {
	margin-bottom: 80px!important;
}

/* ==========================================================================
   PULSANTI PRINCIPALI
   ========================================================================== */

.border-main-button {
	border: 5px solid #7b7c7c;
}   



/* ==========================================================================
   HOME 
   ========================================================================== */
   
.border-main-button .box-icon img {
	width: 100%;
	float: left;
}

.border-main-button .box-title-button {
	color: #000;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
font-size: 50px;
line-height: 100px;
padding-left: 20px;
}

/* ==========================================================================
   OPEN PAGE
   ========================================================================== */
   
.top-open-page {
	margin-bottom: 60px;
}

/* ==========================================================================
   COMANDI
   ========================================================================== */

#comandi .col-33 {
}

#comandi .col-33 p {
	color:#ffffff;
}

#comandi .col-33 img {
	width:150px;
}

.aggiungi .box .fa {font-size: 35px; color:#ffdc21; padding-top:5px; padding-bottom:10px;}

.aggiungi .box {color:#ffdc21;}

.aggiungi .box .small {line-height:18px;}

.box {
	background-color:#373532;
	position:relative;
	text-align: center;
	color:#ffffff;
}

.box .fa {
	font-size:90px;
	text-align: center;
	display: block;
	color:#ffffff;
}

.box h2 {
	color:#ffdc21;
	padding-bottom:10px;
}

.box:hover {
	background-color:#87888a;
	cursor:pointer;
} 

.border-box {
	border:1px solid #373532;
}

.active-box {
	background-color:#87888a;
	position:relative;
}

.active-arrow {
	border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #87888a;
    bottom: -30px;
    height: 0;
    left: 42%;
    position: absolute;
    width: 0;
}

.upload .small i {text-align: right; font-style: italic; float: right;}

/* ==========================================================================
   LISTA CORSI
   ========================================================================== */
   
.button-right img {
	width: 100%;
}

.input-search {
	position: relative;
}

.input-search .fas {
	font-size: 23px;
	position: absolute;
right: 20px;
top: 8px;
color: #7b7c7c;
}

.button-list {
	float: right;
	width: 40px;
	height: 40px;
	text-align: center;
}

.button-list .fas {
	font-size: 20px;
	color: #7b7c7c;
	line-height: 38px;
}

.button-edit-course {
	border: 1px solid #7b7c7c;
	background-color: #fff;
}

.button-edit-course:hover {
	background-color: #0f3172;
	border-color: #0f3172;
	cursor: pointer;
}

.button-edit-course:hover .fas {
	color: #fff;
}

.button-list-user {
	background-color: #0f3172;
	border: 1px solid #0f3172;
}

.button-list-user .fas {
	color: #fff;
}

.button-list-user:hover {
	background-color: #1e4ca4;
	border-color: #1e4ca4;
	cursor: pointer;
}

.row-list-course .col-md-10 {
	line-height: 40px;
}

.row-list-course {}

/* ==========================================================================
   NOTE
   ========================================================================== */

.note p {
	line-height: 30px;
	font-weight: 400;
}

/* ==========================================================================
   LISTA CORSO UTENTI
   ========================================================================== */
   
.no-users {
	float: left;
	width: 100%;
	background-color: #e8e8e8;
	padding: 20px;
	text-align: center;
}
   
.button-statistic .border-main-button {
	height: 70px;
}

.button-statistic .col-md-6 {
	padding-right: 0;
	padding-top: 0;
}
   
.button-statistic span {
	font-size: 16px;
	float: left;
	width: 100%;
	line-height: 40px;
	color: #7b7c7c;
}

.button-statistic span b {
	font-size: 36px;
	font-weight: 800;
	color: #000;
	float: right;
	font-family: 'Barlow Condensed', sans-serif;
}

.button-add-user .button-hover {
	width: 40px;
	height: 40px;
	border: 1px solid #7b7c7c;
	text-align: center;
	float: left;
}

.button-add-user p {
	float: left;
	height: 40px;
line-height: 40px;
color: #7b7c7c;
padding-left: 15px;
text-align: center;
}

.button-add-user .button-hover:hover {
	background-color: #0f3172;
	border-color: #0f3172;
	cursor: pointer;
}

.button-add-user .button-hover:hover .fas {
	color: #fff;
}

.button-add-user .button-hover .fas {
	font-size: 20px;
	color: #7b7c7c;
	line-height: 40px;
}

.filtri .col-md-5 .filter-alphabetic-button {
	float: right;
	height: 40px;
	width: 65px;
	border: 1px solid #7b7c7c;
	text-align: center;
	margin-left: 30px;
	line-height: 40px;
}

.filtri .custom-select::before {
	top: 10px;
}

.filtri .col-md-5 .filter-alphabetic-button:hover {
	background-color: #0f3172;
	border-color: #0f3172;
	cursor: pointer;
}

.filtri .col-md-5 .filter-alphabetic-button:hover span {
	color: #fff;
}

.filtri .col-md-5 p {
	float: left;
	line-height: 40px;
}

.row-list-course-user .col-md-1 .fas {
	font-size: 26px;
	color: #7b7c7c;
	line-height: 20px;
}

.row-list-course-user .col-md-1 .fas:hover {
	color: #0f3172;
	cursor: pointer;
}

.row-list-course-user {
	margin-bottom: 0;
	border-bottom: 1px solid #e8e8e8;
	padding-bottom: 0;
	font-size: 14px;
	line-height: 20px;
	margin-top: -1px;
}

/* ==========================================================================
   DETTAGLIO UTENTE
   ========================================================================== */
   
.corsi-effettuati .border-main-button {
	width: 65px;
	height: 65px;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 36px;
	text-align: center;
line-height: 50px;
float: left;
}
   
.corsi-effettuati p {
	line-height: 65px;
	padding-left: 15px;
float: left;
}

.border-button {
	border: 1px solid #7b7c7c;
}

.button-detail-user .border-button {
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-weight: 800;
	color: #7b7c7c;
	float: none;
}

.button-detail-user .button-add-user .border-button p {
	float: none;
	margin-left: 0;
	padding-left: 0;
	
}

.button-detail-user .border-button:hover {
	background-color: #0f3172;
	border-color: #0f3172;
	color: #fff;
	cursor: pointer;
}

.button-detail-user .border-button:hover p {
	color: #fff;
}

.corsi-effettuati {
	float: left;
	width: 100%;
	padding: 0 10px;
}

.title-online {
	margin-bottom: 30px;
}


/* ==========================================================================
   TABELLE
   ========================================================================== */
   
table {
	width:100%;
}

table .col-10 {
	text-align: center;
	display: block;
}

table thead {
	font-weight: 700;
}

table tbody tr td {
	font-size:14px;
	min-height: 50px;
	line-height: 30px;
}

table tbody tr {
	border-bottom: 1px solid #ebebeb;
}

table tbody tr:hover {
	background-color: #ebebeb;
}

table tbody tr td a {
	color:#373532;
}

table tbody tr td a:hover {
	color:#ffdc21;
} 

/* ==========================================================================
   BOTTONI
   ========================================================================== */
   
.black-button {
	background-color:#373532;
	width:100%;
	padding:10px;
	color:#ffffff;
}

.black-button h4 {color:#ffffff; text-transform: uppercase;}

.black-button:hover h4 {color:#373532; text-transform: uppercase;}

.black-button:hover {background-color:#ffdc21; color:#373532; cursor:pointer;}

.yellow-button {
	background-color:#ffdc21;
	width:100%;
	padding:10px;
	color:#373532;
}

.yellow-button:hover {background-color:#373532; color:#ffdc21; cursor:pointer;}

.yellow-button:hover h4 {color:#ffdc21;}

.yellow-button h4 {text-transform: uppercase;}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
	float:left;
	width: 100%; 
	background: #373532;
	padding:0px;
	position: fixed;
	bottom: 0;
}

.footer .dark-row {
	background-color: #e8e8e8;
}

.footer .col-100 ul {
	margin-left:260px;
	margin-top: 0;
}

.footer .col-100 ul li {
    color: #000;
    float: left;
    margin-right: 60px;
    padding-bottom: 37px;
    padding-top: 32px;
}

.footer .col-100 .fa {
	color:#ffdc21;
	margin-right:10px;
}  

.footer .col-100 ul .fas {
	font-size: 26px;
	margin-right: 10px;
	position: relative;
	top: 3px;
}

.footer-logo {
	width: 240px;
	float: left;
}

/* ==========================================================================
   DETTAGLIO PRODOTTI
   ========================================================================== */
   
.dettaglio-prodotto p {line-height: 53px; padding-left: 40px;}

/* ==========================================================================
   IMG DETTAGLIO PRODOTTI
   ========================================================================== */
     
#divImg li {
    float: left;
    list-style: outside none none;
    padding:10px;
    text-align: center;
}

#divImg {
	margin-left:-10px;
	margin-right:-10px;
}

#divImg img {
    height:80px;
    width:80px;
    opacity: 0.5;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
   
.breadcrumbs {
	float: left;
	width: 100%;
	border-bottom: 1px solid #e8e8e8;
	padding-bottom: 10px;
	margin-bottom: 10px;
	font-size: 12px;
}

.breadcrumbs span {
	font-weight: 800;
}

/* ==========================================================================
   POPUP
   ========================================================================== */
   
 
   
.background-popup-utente {
	position: fixed;
	background-color: rgba(0,0,0,0.6);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: none;
}

.popup-utente {
	background-color: #fff;
	width: 1110px;
	margin-left: -555px;
	position: absolute;
	left: 50%;
	padding: 60px;
	top: 110px;
}

.popup-utente label {
	float: left;
	width: 100%;
	font-size: 18px;
	font-weight: 800;
	margin-bottom: 15px;
	font-family: 'Roboto', sans-serif;
}

.popup-utente input {
	float: left;
	width: 100%;
}

.filtri .popup-utente .custom-select::before {
	top: 43px;
}

.close-popup {
	width: 45px;
	height: 45px;
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
	z-index: 40;
}

.close-popup:hover {
	cursor: pointer;
}

.close-popup .fas {
	font-size: 30px;
	color: #0f3172;
	line-height: 45px;
}

.row-list-course-user .popup-utente {
	top: 110px!important;
	bottom: auto!important;
}

   
/* ==========================================================================
   CAMPI DI TESTO
   ========================================================================== */

form col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {position:relative;}

.dettaglio-prodotto input[type="checkbox"] {width:auto; float:left;}

.dettaglio-prodotto input {border:1px solid #f2f2f2; width:100%; padding-left:10px;}

fieldset select {background-color:#ffffff;}

.close {background-color:#f3f3f3; font-style:italic; color:#959595;}

button {border: 0; height: 40px; text-align: center; background-color: #0f3172; color: #fff; font-family: 'Roboto', sans-serif; font-size: 16px; float: left; width: 100%;}

button:hover {background-color: #1e4ca4; cursor: pointer;}

.styled-select {height: 60px; overflow: hidden; width: 240px;}

.select-style select {background: transparent; border: none; width:100%; height:60px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

select {width:100%; height:60px; border:1px solid #f2f2f2; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 14px; color:#777777; padding-left:20px;}

.select-style select {width:100%; height:60px; border:1px solid #f2f2f2; background: url(../img/arrow-down.jpg) no-repeat right;}

textarea {width:100%; border:1px solid #7b7c7c; height:200px; padding:10px 20px; font-size: 14px; font-family: 'Roboto', sans-serif; font-weight: 300;}

input[type="search"] {height:40px; border:1px solid #7b7c7c; width:100%; -webkit-appearance: none;}

.box-search button[type="submit"] {background-color:rgba(0,0,0,0); border:none; width:60px; height: 60px; position: absolute; top:50%; right: 0; margin-top:-30px; z-index: 10;}

.box-search button[type="submit"]:hover {cursor: pointer;}

.box-search .fa-search {font-size:30px; color:#373532; position: absolute; margin-top:-17px; top:50%; right:18px; z-index: 5;}

input {height:40px; width:100%; font-size: 14px; font-family: 'Roboto', sans-serif; border:0; padding:10px 20px; font-weight: 300; border: 1px solid #7b7c7c;}

#success {border: 1px solid #ffffff; color: #ffffff; margin-top: 20px; padding: 10px; display: none;}

.error {background-color: rgba(255,0,0,0.7); color:#ffffff;}

.domanda input {height:auto;}



/* ==========================================================================
   CUSTOM CHECKBOX
   ========================================================================== */
   
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  padding-top: 4px;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 25px; height: 25px;
  background: #e8e8e8;
  border-radius: 100%;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '\2713\0020';
  position: absolute;
  top: 0; left: 0;
  font-size: 16px;
  line-height: 25px;
  width: 25px; height: 25px;
  color: #fff;
  border-radius: 100%;
  text-align: center;
  background-color: #00b67a;
  transition: all .2s;
  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}

#storico [type="checkbox"]:not(:checked) + label::after, #storico [type="checkbox"]:checked + label::after {
	background-color: #444444;
}

/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 2px dotted blue;
}

/* ==========================================================================
   CUSTOM SELECT
   ========================================================================== */
   


.custom-select select {
  background-color: #fff;
  border: 1px solid #7b7c7c;
  color: #7b7c7c;
  font-size: 14px;
font-family: 'Roboto', sans-serif;
  line-height: 15px;
  width: 100%;
  -webkit-appearance: button;
  appearance: button;
  outline: none;
  height: 40px;
}

.custom-select {
	font-family: "Font Awesome 5 Pro";
  display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
width: 100%;
font-weight: 800;
}

.custom-select::before {
  content: "\f107";
  position: absolute;
 top: 43px;
right: 10px;
width: 40px;
height: 40px;
  text-align: center;
  font-size: 28px;
  line-height: 45px;
  color:#fff;
  background-color: #0f3172;
  pointer-events: none;
  
}

.custom-select:hover::before {
  color: #fff;
  background-color: #0f3172;
}

.custom-select select option {
  padding: 7px;
}


/* ==========================================================================
   CUSTOM INPUT FILE
   ========================================================================== */

.file-upload {
	display:block;
	text-align:center;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
}

.file-upload .file-select {
	display:block;
	border: 1px solid #0f3172;
	color: #000;
	cursor:pointer;
	height:40px;
	line-height:40px;
	text-align:left;
	background:#FFFFFF;
	overflow:hidden;
	position:relative;
}

.file-upload .file-select .file-select-button {
	background:#0f3172;
	color: #fff;
	padding:0 10px;
	display:inline-block;
	height:40px;
	line-height:40px;
	font-weight: 800;
}

.file-upload .file-select .file-select-name {
	line-height:40px;
	display:inline-block;
	padding:0 10px;
}

.file-upload .file-select:hover {
	border-color:#1e4ca4;
	transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
}

.file-upload .file-select:hover .file-select-button {
	background:#1e4ca4;
	color:#FFFFFF;
	transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
}

.file-upload.active .file-select {
	border-color:#3fa46a;
	transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
}

.file-upload.active .file-select .file-select-button{
	background:#3fa46a;
	color:#FFFFFF;
	transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
}

.file-upload .file-select input[type=file]{
	z-index:100;
	cursor:pointer;
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	opacity:0;
	filter:alpha(opacity=0);
}

.file-upload .file-select.file-select-disabled{
	opacity:0.65;
}

.file-upload .file-select.file-select-disabled:hover{
	cursor:default;
	display:block;
	border: 1px solid #dce4ec;
	color: #34495e;
	cursor:pointer;
	height:40px;
	line-height:40px;
	margin-top:5px;
	text-align:left;
	background:#FFFFFF;
	overflow:hidden;
	position:relative;
}

.file-upload .file-select.file-select-disabled:hover .file-select-button {
	background:#dce4ec;
	color:#666666;
	padding:0 10px;
	display:inline-block;
	height:40px;
	line-height:40px;
}

.file-upload .file-select.file-select-disabled:hover .file-select-name{
	line-height:40px;
	display:inline-block;
	padding:0 10px;
}


/* ==========================================================================
   CUSTOM INPUT FILE 02
   ========================================================================== */
   
#importFrm .btn {
	float: left;
	width: 50%;
	background-color: #0f3172;
	border-color: #0f3172;
	color: #fff;
	padding-left: 10px;
}

#importFrm .input-file-custom {
	float: left;
	width: 50%;
	height: 40px;
	border: 1px solid #fe5900;
}

#importFrm .btn:hover {
background-color: #1e4ca4;
cursor: pointer;
border-color: #1e4ca4;
}

#importFrm .input-file-custom span {
	text-align: center;
	line-height: 38px;
	float: left;
	color: #fe5900;
	font-size: 14px;
	font-weight: 800;
	width: 100%;
}

.input-file-custom .caricato {
	display: none;
}

.input-file-custom .vuoto {
	display: block;
}

#importFrm .input-file-custom.upload-complete .caricato {
	display: block;
}

#importFrm .input-file-custom.upload-complete .vuoto {
	display: none;
}

#importFrm .input-file-custom.upload-complete span {
	color: #fff;
}

#importFrm .input-file-custom.upload-complete {
	background-color: #00b67a;
	border-color: #00b67a;
}

#importFrm .input-file-custom.upload-complete:hover {
	border: 1px solid #00b67a;
	background-color: #00b67a;
	cursor: pointer;
}

#importFrm .input-file-custom:hover {
	border: 1px solid #fe5900;
	background-color: #fe5900;
	cursor: pointer;
}

#importFrm .input-file-custom:hover span {
	color: #fff;
}

#importFrm input[type=file] {
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 20;
}

.input-file-custom {
	position: relative;
	float: left;
	z-index: 10;
}


/* ==========================================================================
   LOGIN
   ========================================================================== */
   
.login-background {
	background-color: #0f3172;
}

#flogin {
	width: 500px;
	padding: 20px;
	margin: 0 auto;
}

#flogin .logo-login {
	width: 100px;
	margin: 0 auto 20px auto;
}

#flogin .logo-login img {
	width: 100%;
}

.box-login input {
	border: 1px solid #fff;
	float: left;
	width: 100%;
	margin-bottom:10px;
	background-color: #fff;
	color: #000;
	height: 50px;
}

.box-login input[type=submit] {
	text-transform: uppercase;
	font-size: 18px;
	background-color: #2047bb;
	color: #fff;
	border: 1px solid #2047bb;
}

.box-login input[type=submit]:hover {
	background-color: #0f3172;
	cursor: pointer;
}

.title-login {
	text-align: center;
	float: left;
	width: 100%;
	color: #fff;
	margin-bottom: 20px;
}

.title-login h2 {
	color: #fff;
	font-weight: 600;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
   
@media screen and ( max-height: 1120px ) { 
	
	.popup-utente {top: 20px; bottom: 20px; overflow-x: scroll;}
	
}

@media screen and ( max-height: 780px ) { }

@media screen and ( max-height: 700px ) { }

@media screen and ( max-height: 680px ) { }

@media screen and ( max-height: 850px ) { 
	
	.top-open-page {margin-bottom: 30px;}
	
	.space-100 {height: 50px;}
	
	.footer-logo {width: 180px;}
	
	.footer .col-100 ul li {    padding-bottom: 25px;  padding-top: 20px;}
	
	.space-50 {height: 30px;}
	
}

@media screen and ( max-height: 650px ) { 
	
	.header-logo {height: 70px;}
	
	#header .col-50 ul li {padding-top: 20px;}
	
	.top-open-page {margin-bottom: 20px;}
	
	.space-100 {height: 10px;}
	
	.border-main-button .box-title-button {line-height: 70px;}
	
	.border-main-button .box-icon img {width: 70%;}
	
	#header .col-50 ul li {min-height: 70px;}
	
}

@media screen and (max-width:1050px), screen and (max-device-width:1050px){}

@media only screen and (min-device-width:768px) and (max-device-width : 1024px) and (orientation : portrait){}

@media screen and (max-width: 1450px) { }

@media screen and (max-width: 1310px) { }

@media screen and (max-width: 1255px) { }

@media screen and (max-width: 1185px) { }

@media screen and (max-width: 1150px) { 
	
	.popup-utente {margin-left: auto; left: 10px; right: 10px; width: auto;}
	
}

@media screen and (max-width: 1090px) { }

@media screen and (max-width: 992px) { }

@media screen and (max-width: 990px) { }

@media screen and (max-width: 940px) { }

@media screen and (max-width: 922px) { }

@media screen and (max-width: 903px) { }

@media screen and (max-width:895px) { }

@media screen and (max-width:870px) { }

@media screen and (max-width:820px) { }

@media screen and (max-width:780px) { 
	
	.popup-utente {padding: 30px;}
	
	.background-popup-utente {overflow-x: scroll;}
	
}

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

	#header #list-menu {display:none;}
	
	#header #list-flag {display:none;}
	
	#menu-mobile {display:none;}
	
	#menuButton {display:block;}
	
}

@media screen and (max-width:790px) { }

@media screen and (max-width: 720px) { 
	
	.top-open-page {margin-bottom: 40px;}
	
	.space-100 {height: 50px;}
	
	.top-open-page .button-right {width: 150px; float: right;}
	
	.space-50 {height: 30px;}
	
	.row-list-course-user {margin-bottom: 20px;}
	
	.popup-list-course .row-list-course-user {border-bottom: none;}
	
	.button-statistic .col-md-6:first-child {padding-left: 0;}
	
	.no-padding-left-mobile {padding-left: 0!important;}
	
	body {    line-height: 27px;}
	
}

@media screen and (max-width: 630px) { 
	
	.footer-logo {display: none;}
	
	.border-main-button .box-title-button {font-size: 30px;}
	
	.footer .col-100 ul {margin-left: 10px;}
	
	.footer .col-100 ul li {    padding-bottom: 15px; padding-top: 12px;}
	
	.footer {position: static;     margin-top: 60px;}
	
}

@media screen and (max-width: 590px) { }
	
@media screen and (max-width: 540px) { 
	
	#header .col-50 ul {margin-left: 0;}
	
}

@media screen and (max-width: 420px) { }