:root {
  --bg-color-0: #003d7b;
  --bg-color-1: #0059b3;
  --bg-color-2: #0073e6;
  --bg-color-3: #2187ED;
  --bg-color-4: #3CAEEB;
  --bg-colore-leggero: #F4FBFE;
  --bg-colore-li-selezionato: #168fd0;
  --bg-col-layout-dark: rgb(163,33,148);
  --bg-col-layout-dark: rgb(186,37,170);
  --bg-col-layout: rgb(208,42,188);
  --col-titolo: rgb(69, 80, 91);
  --col-nero: rgb(33, 37, 41);
  --grigio-hover: #f8f9fa;
    
  /* colore verde backend */
  --bg-backend-tenue: rgb(199,216,222);
  --bg-backend-chiaro: rgb(68,126,146);
  --bg-backend: rgb(53,98,114);
  --bg-backend-scuro: rgb(39,71,83);
    
  --bg-grigio: rgb(230,230,230);
  --bg-grigio-tenue: rgb(240,240,240);
  --bg-giallo-warning: rgb(255,193,7);
    
  /* colore blu */
  --bg-backend:             #0059b3;
  --bg-backend-chiaro:      #0073e6;
  --bg-color-3:             rgb(60,174,235);
  --bg-backend-tenue:       #c9e4ff;
    
  /* colore rosso alert */
  --col-rosso: rgb(220,53,69);
}

@font-face {
    font-family: 'Titillium';
    font-weight: normal;
    src: url("../font/titillium/Titillium-Regular.otf") format("opentype");
}

/*
@font-face {
    font-family: 'Titillium web';
    src: url('../font/titillium-web/TitilliumWeb-Regular.ttf') format('truetype');
}  
*/

/*
@font-face {
    font-family: 'Open Sans';
    src: url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
}
*/

body {
    /*font-family: 'Titillium', sans-serif  !important;
    font-family: 'Titillium web', sans-serif  !important;
    font-family: 'Roboto', sans-serif  !important;
    font-family: 'Open Sans', sans-serif  !important;*/
    font-family: 'Titillium web', sans-serif  !important;
    /* istruzioni per fissare il footer a fondo pagina */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.box-primo-piano {
    z-index: 10000 !important;
}


.container-tab-con-scroll {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    max-height: 500px;
    overflow: auto;
    display: block;
}


.tab-con-scroll thead th { 
    position: sticky; 
    top: 0; 
    z-index: 100;
    background-color: rgb(240,240,240);
}

    .tab-con-scroll, 
    .tab-con-scroll .btn-primary, 
    .tab-con-scroll .badge,
    .btn,
    input, 
    label, 
    select, 
    option{
        font-size: 13px !important;
    }
    

/******************************************/

/* prima imposto il bordo per tutti gli inputbox */
.form-control:active, .form-control:focus {
    border: 2px solid var(--bg-backend) !important;
}

.form-control {
    border: 1px solid var(--bg-backend) !important;
    color: black !important;
}

/* poi vado a mettere in rosso gli inputbox con dato mancante */
.dato-mancante {
    border: 2px solid red !important;
}

.dato-mancante:active, .dato-mancante:focus {
    border: 2px solid red !important;
}

/******************************************/


.badge-primary {
    background-color: var(--bg-color-1);
}

.no-tablet {
    display: block;
}

.si-tablet {
    display: none;
}

.bordo-sotto {
    width: 80px;
    height: 4px;
    background-color: var(--bg-color-4);
    margin-bottom: 10px;
}
.bordo-sotto-fino {
    width: 60px;
    height: 2px;
    background-color: var(--bg-color-4);
}


.img-banner {
    max-width: 1500px !important; 
    height: 500px; 
    position: absolute;  
    z-index: -1;
    object-fit: cover;
}

.btn-banner {
    color: white;
    border: 2px white solid;
    border-radius: 25px;
    padding: 8px 28px;
}

.btn-banner:hover {
    background-color: var(--bg-color-4);
    border-color: var(--bg-color-4);
    color: white;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.link-icone-social:hover {
    opacity: 0.9;
}

.box-icone-social {
    align-items: center;
}

.box-icone-social ul {
    padding-left: 0px;
    margin-bottom: 0px;
}

.icone-social {
    border-radius: 50%;
    background-color: white;
    height: 30px;
    width: 30px;
    margin-left: 8px;
}



/*************************************************
/* MESSAGGIO POP-UP PER L'HELP
/*************************************************

 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 100;
  width: 100%; /* Full width */
  margin: 0 auto;
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-attivato {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  margin: 0 auto;
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}


.modal-new {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 100;
  width: 100%; /* Full width */
  margin: 0 auto;
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 2% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
  width: 90%; /* Could be more or less, depending on screen size */  
  max-width: 600px;
  animation: move 0.5s forwards;
}

.modal-content-attivato {
  background-color: #fefefe;
  margin: 2% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid white;
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
  width: 90%; /* Could be more or less, depending on screen size */  
  max-width: 600px;
  animation: move 0.5s forwards;
}

.modal-content-new {
  background-color: #fefefe;
  margin: 2% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
  width: 60%; /* Could be more or less, depending on screen size */  
  max-width: 600px;
  animation: move 0.5s forwards;
}

@keyframes move {
  0% {
    margin-top: 0;
  }
  100% {
    margin-top: 2%;
  }
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 


/* modifico il cursore del pulsante POP-UP dell'HELP */
.fas {
    cursor: pointer;
}


/*****************************************************************/

.btn-layout {
    color: white;
    background-color: var(--bg-col-layout-dark);
    padding: 10px 20px !important;
}
.btn-layout:hover {
    background-color: var(--bg-col-layout);
    text-decoration: underline !important;
}


.container {
    max-width: 1500px !important;
}



.box-news {
    border-radius: 15px;
}

.card-news {
    border-radius: 15px !important;
}

.card-news-vert {
    border-radius: 15px !important;
}

.card-img-top {
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    height: 200px;
    object-fit: cover;
}

.card-img-piccola {
    height: 150px;
}

.card-img {
    border-radius: 0px !important;
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
}

.box-titolo-card-area {
    height: 50px;
}

.box-icone-aree {
    min-height: 500px;
}

#wrapper-menu {
     background-color: var(--bg-color-1);
}

#wrapper-carousel {
    max-width: 1500px; 
    margin: auto;
    /*background-color: var(--bg-color-0);*/
}

#wrapper-news {
    max-width: 1500px; 
    margin: auto;
    /*background-color: var(--bg-color-0);*/
}

.carousel-box-news {
    height: 200px;
    top: 0% !important;
    right: 50% !important;
    left: 0% !important;
    z-index: 0 !important;
    position: relative;
}

.carousel-box {
    height: 500px;
    top: 0% !important;
    right: 50% !important;
    left: 0% !important;
    z-index: 0 !important;
    position: relative;
}

.box-indagine-nazionale-2020 {
    background-image: url(../img/MANUTENZIONE-SCUOLE-color.webp);
}

.border-box {
    border-bottom: 7px solid white;
    border-right: 7px solid white;
    border-left: 7px solid var(--bg-col-layout);
    border-top: 7px solid var(--bg-col-layout);
    border-radius: 10px;
    padding: 10px;
}

.border-box-1 {
    border-bottom: 7px solid white;
    border-right: 7px solid white;
    padding: 10px;
}

.border-box-2 {
    border-bottom: 7px solid white;
    padding: 10px;
}


.carousel-freccia {
    color: var(--bg-color-1) !important;
    font-size: 20px;
}


.box-img {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.col-box {
    padding: 100px;
}

.badge {
    padding-top: 5px;
    padding-bottom: 5px;
}

.titolo-carousel {
    color: white;
    font-weight: bold;
    font-size: 40px;
}
.titolo-carousel-news {
    font-size: 20px;
}

.card-senza-bordo {
    background-color: white;
    border: 0px !important;
}

.card-bordo-arrotondato {
    border-radius: 15px;
}

.link-card-area {
    color: var(--col-nero);
}
.link-card-area:hover {
    color: var(--col-nero);
    text-decoration: none;
}
.link-card-area:hover .card-title{
    text-decoration: underline;
}

.contorno-immagine {
    overflow: hidden;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

.link-card-area .card-img-top{
    transition: transform .6s;   /* smoother zoom */
}
.link-card-area:hover .card-img-top{
    transform: scale(1.1);
}

.link-card-area:hover .card-area-hover {
    background-color: rgb(240,240,240);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.link-hover {
    cursor: pointer;
}
.link-hover:hover {
    cursor: pointer;
    color: var(--bg-color-4);
    text-decoration: underline;
}

.page-item.active .page-link {
    background-color: var(--bg-color-4);
    border-color: var(--bg-color-4);
}

.page-link, .page-link:hover  {
    color: var(--col-nero);
}

.img-top-bordo {
    border-radius: 10px !important;
    opacity: 0.9;
}

.card-title a {
    color: var(--col-nero);
}

.img-card {
    border-radius: 5px;
    max-height: 250px;   
}

.img-banner-stretto {
    height: 250px;
    object-fit: cover;
}






.row {
    margin: 0;
}


#login {
    color: white;
}






.hover-grigio:hover {
    background-color: #e9ecef;
}

.testo-nero {
    color: rgb(50,50,50);
}

.list-group a:hover .hover-sottolineato {
    text-decoration: underline;
}

/*
li {
    list-style: none;
    float: left;
    color: white;
}
*/

/*
.box-login {
    margin: 0 auto;
    width: 100%;
    border: 1px solid rgb(18,131,108);
    border-radius: 5px;
}
*/

.login-container {
    max-width: 540px;
    padding-top: 80px;
}

/*
.panel-heading {
    background-color: rgb(18,131,108);
    height: 50px;
}


.panel-heading h1 {
    font-size: 24px;
    color: white;  
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
}
*/

.area-pagina {
    min-height: 450px;
}

.container-fluid {
    padding: 30px;
}

.corpo {
    /*
    padding-left: 40px;
    padding-right: 40px;
    */
}


#logo {
    float: left;
    margin-top: 10px;
}

#logo a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 40px;
    color: rgb(18,131,108);
}

/*
#logo a:hover {
    color: #1c7430;
}
*/


/******************************************/
/* pulsanti a fine pagina AVANTI/INDIETRO */
.btn-avanti-indietro {
    display: block;
    width: 100px;
    margin: 0 auto;
    text-align: center;
}

.box-btn-avanti-indietro {
    margin: 0 auto;
    display: block;
    width: 240px;
    height: auto;
    height: 40px;
}

.btn-avanti-indietro button {   
    width: 100px;
}

/******************************************/




/******************************************/
/* dropdown con search all'interno */

.select2-container .select2-selection--single{
    height:34px !important;
}
.select2-container--default .select2-selection--single{
         border: 1px solid #ccc !important; 
     /*border-radius: 0px !important; */
}

/******************************************/


#menu-principale {
    float: right;
    list-style-type: none;
    padding: 0;
    margin: 30px 50px 0 0;
}

#menu-principale li {
    display: inline;
}

#menu-principale a {
    color: rgb(18,131,108);
    text-decoration: none;
    font-size: 18px;
    margin: 5px 25px;
}

#menu-principale a:hover {
    text-decoration: none;
    color: rgb(18,131,108);
}






/********************************************
 Accordion (sezione FAQ)
********************************************/

.domanda-faq {
    text-align: left;
}
.icona-faq {
    font-size: 24px;
    color: var(--bg-color-4);
}

.btn-link {
    line-height: 24px;
    color: var(--col-nero);
}

.btn-link:hover {
    color: var(--col-nero);
}

.btn-link:active {
    background-color: transparent!important;
    border-color: transparent!important;
}

/*
.card-header {
    background-color: var(--bg-colore-leggero) !important;
}
*/

.domanda-faq {
    background-color: var(--bg-colore-leggero) !important;
}

.btn-link:focus, .list-group-item:focus {
    box-shadow: none;
    text-decoration: none;
}
/*******************************************/


.btn-home {
    color: black;
    border: none;
}

.btn-home:hover {
    color: white;
    background-color: rgb(24,180,149);
}

.btn-trattino {
    border: none;
}


.btn-light:hover {
    color: white;
    text-decoration: underline !important;
}


.btn-light:active {
    background-color: var(--bg-color-2) !important;
    color: white !important;
}

.btn-light-danger:hover,
.btn-light-danger:active {
    background-color: rgb(220,53,69) !important;
    border-color: rgb(220,53,69) !important;
}

.btn-light-success:hover,
.btn-light-success:active  {
    background-color: rgb(40,167,69) !important;
    border-color: rgb(40,167,69) !important;
}

/* pulsanti modificati per sembrare delle etichette sulla tabella */
div .btn-outline-success:hover, 
div .btn-outline-success:active {
    cursor: default !important;
    background-color: white !important;
    color: rgb(48,170,76) !important;
}

div .btn-outline-dark {
    border: 0px;
}

div .btn-outline-dark:hover, 
div .btn-outline-dark:active {
    cursor: default !important;
    background-color: white !important;
    color: rgb(40,40,40) !important;
}

div .btn-outline-warning:hover, 
div .btn-outline-warning:active {
    cursor: default !important;
    background-color: white !important;
    color: rgb(255,193,72) !important;
}


div .btn-outline-info:hover, 
div .btn-outline-info:active {
    cursor: default !important;
    background-color: white !important;
    color: rgb(23,162,184) !important;
}




div .btn-outline-danger:hover, 
div .btn-outline-danger:active {
    cursor: default !important;
    background-color: white !important;
    color: rgb(220,53,69) !important;
}




option, 
.custom-radio,
.custom-checkbox
{
    font-size: 14px;
    border-radius: 5px;
}


.custom-checkbox:hover, .custom-radio:hover {
    background-color: rgb(220,220,220);
}

#link_sito {
    color: rgb(50,50,50);
}


.domanda {
    font-size: 16px; 
    font-weight: 600; 
    margin-bottom: 5px;
}

.font-14 {
    font-size: 14px;
}
.font-13 {
    font-size: 13px;
}

.form-group {
    margin-bottom: 20px;
}

#logout {
    color: rgb(255,255,255);
    border: none;
}

#logout:hover {
    opacity: 0.8;
}

.btn-xl {
    height: 200px;
    width: 200px;
    border-radius: 30px;
    margin: 0 auto;
}


.btn {
    font-size: 16px;
    font-size: 14px;
}

.nome-utente {
    font-size: 14px;
}

button i {
    font-size: 60px;
}

button[type=submit] i {
    font-size: 14px;
}

.centrato {
    margin: 0 auto;
}


input {
    box-shadow: none !important;
    border: 1px solid rgb(200,200,200) !important;
}

/* tolgo il bordo agli input box per farlo verde */
select {
    box-shadow: none !important;
    border: 1px solid rgb(200,200,200) !important;
}

/*
#username:focus, #password:focus {
    box-shadow: 0px 0px 1px 1px rgb(18,131,108) !important;
    border: 1px solid rgb(200,200,200) !important;
}
*/



/* se si vuole modificare l'intestazione di qualche tabella utilizzare l'id altrimenti si 
modificano anche quelle del questionario
*/
th {
    /*
    background-color: rgb(18,131,108);
    color: #ffffff;
    */
    font-weight: normal;
    text-align: center;
}

.titolo-film {
    font-size: 30px;
}




.ac_results {
	padding: 0px;
    margin-top: 1px;
	border: 1px solid rgb(220,220,220);
	overflow: hidden;
    /*border-radius: 5px;*/
}

.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
    cursor: default;
}

.ac_results li {
	margin: 0px;
    width: 100%;
    height: 30px;
	padding: 5px 5px;
	display: block;
	/* 
	if width will be 100% horizontal scrollbar will apear 
	when scroll mode will be used
	*/
	/*width: 100%;*/
	font-size: 16px;
	/* 
	it is very important, if line-height not setted or setted 
	in relative units scroll will be broken in firefox
	*/
	line-height: 16px;
	overflow: hidden;
    background-color: rgb(255,255,255);
}

.ac_results li:hover {
    background-color: rgb(230,230,230);
}


.input_text{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	border:1px solid #84a10b;
	padding:2px;
	width:150px;
	color:#000;
	background:white url(../images/search.png) no-repeat 3px 2px;
	padding-left:17px;
}


.selectTag {
    background-color: red;
}


#tabella-credenziali-smartphone {
    display: none;
}
#tabella-credenziali {
    visibility: visible;
}



#nav-mobile {
    position: relative;
    min-height: 45px;
    width: 100%;
    z-index: 10000;
    background-color: orange;
}

#nav-mobile img {
    display: block;
    float: right;
    width: 30px;
    height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 10px;
    cursor: pointer;
    box-sizing: border-box;
}

#nav-mobile ul { 
    /*border-bottom: 1px solid rgb(180,180,180);*/
    margin-bottom: 0px;
    padding: 0;
}

#nav-mobile ul li {
    list-style-type: none;
}

#nav-mobile ul li a {
    min-width: 319px;
    height: 40px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: white !important;
    line-height: 40px;
    font-size: 14px;
}

#nav-mobile a#current {
    background-color: slategray;
    border-radius: 5px;
    color: white;
}

#nav-mobile ul li a:hover {
    background-color: slategray;
    border-radius: 5px;
    color: white;
}

.card {
    border-radius: 5px !important;
}

/* layout dei pulsanti della home e delle altre pagine */

.pulsante-home {
    min-height: 200px;
    border-radius: 5px;
    background-color: var(--bg-grigio-tenue);
}
.pulsante-home-mini {
    border-radius: 5px;
    background-color: var(--bg-grigio-tenue);
}
.pulsante-home-mini-selezionato {
    border-radius: 5px;
    background-color: var(--bg-backend-chiaro);
    color: white;
}
.pulsante-home-mini-selezionato:hover {
    color: white !important;
}

.pulsante-home:hover, .pulsante-home-mini:hover {   
    background-color: var(--bg-backend-chiaro) !important;
    transition-duration: 0.2s;
    color: white !important;
    transition-duration: 0.2s;
}

.link-pulsante-home {
    color: rgb(50,50,50);
}
.link-pulsante-home:hover, .link-pulsante-home:hover p {
    color: white !important;
    transition-duration: 0.2s;
}

/*******************************************************/

.btn-elimina {
    min-height: 200px;
    border-radius: 5px;
    background-color: rgb(220,53,69) !important;
}

.btn-elimina:hover {   
    background-color: rgb(200,35,51) !important;
}



#nav-mobile #dropdown-mobile-division {
    display: none;
    background-color: white;
    border-top: 1px solid rgb(180,180,180);
    border-bottom: 1px solid rgb(180,180,180);
}

#nav-mobile #dropdown-mobile-division a {
    font-size: 14px;
    color: rgb(80,80,80);
}

#nav-mobile #dropdown-mobile-division a:hover {
    color: rgb(255,255,255);
}