.search-box{
        width: 600px;
        position: relative;
        display: inline-block;
        font-size: 16px;
    }
    .search-box input[type="text"]{
        height: 28px;
        padding: 5px 5px;
        border: 1px solid #CCCCCC;
        font-size: 16px;
    }
    .result{
        position: absolute;        
        z-index: 999;
        top: 100%;
        left: 0;
    }
    .search-box input[type="text"], .result{
        width: 100%;
        box-sizing: border-box;
    }
    /* Formatting result items */
    .result p{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        background: #ffffff;
		color: #1841A5;
        cursor: pointer;
    }
    .result p:hover{
        background: #f2f2f2;
    }

  .big-checkbox {
  width: 1.5rem; height: 1.5rem;top:0.5rem
  }
  .sidenav {
   height: 100%;
   width: 0;
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0;
   background-color: #111;
   overflow-x: hidden;
   transition: 0.5s;
   padding-top: 60px;
  }

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}
.sidenav ul{
  padding: 4px 4px 0px 32px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  transition: 0.3s;
  list-style: none;
}
.sidenav ul.a{
  list-style: none;
  padding-left:32px;
  text-decoration: none;
  font-size: 10px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav ul.a:hover {
  color: #f1f1f1;
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  background: lightblue;
}

  .card_trasp{
   background: ghostwhite;
  }


/*colore delta*/
.bg-delta{
  background-color:#8E1D40;
}
.text-delta{
  color:#8E1D40;
}
.btn-delta{
  background-color:#8E1D40;
  color:white;
}
.btn-delta:hover{
  color:white;
}
.btn-outline-delta{
  color: #8E1D40;
  border-color: #8E1D40;
}
.btn-outline-delta:hover{
  background-color: #8E1D40;
  border-color: white;
  color:white;
}
/*colore delta-success*/
.bg-delta-success{
  background-color:#568E2D;
}
.text-delta-success{
  color:#568E2D;
}
.btn-delta-success{
  background-color:#568E2D;
  color:white;
}
.btn-delta-success:hover{
  color:white;
}
.btn-outline-delta-success{
  color: #568E2D;
  border-color: #568E2D;
}
.btn-outline-delta-success:hover{
  background-color: #568E2D;
  border-color: white;
  color:white;
}
/*colori data Table*/

.dataTables_info,
.dataTables_length label,
.dataTables_filter label {
color: #8E1D40;
}
.page-link {
    color: #8E1D40 !important;
	background-color: white !important;
}
.page-link:hover{
        color: white !important;
		background-color: #8E1D40 !important;
 }
.page-item.active .page-link{
        color: white !important;
		background-color: #8E1D40 !important;
 }



 /* Telefono */
@media (max-width: 700px){
 .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
  .main_phone{
   visibility: visible;
  }
  .menu_navigation_bar{
  display: none;
  }
  .tasti_intestazione{
  display:none;
  }
  .tasti_intestazione_phone{
  visibility: visible;
  }
  .button_home_page{
  font-size: 20px;
  width: 100%;
  margin-top:5px;
  }
  .container_home{
  margin-top:50px;
  }
  .col_card_home{
  width:100px;
  margin-bottom:2px;
  margin-top:10px;
  padding-left:2px;
  padding-right:2px;
  width:100px;
  }
  .card_body_home h5{
  font-size: 10px;
  height: 10px;
  }
  .card_body_home p{
  display:none;
  }
  .seleziona_filtro{
  min-width:370px;
  }
  .div_colonna{
  min-width:320px;
  }
 .div_colonna_search_box{ 
   min-width: 100%;
  }
  .div_colonna_search_box2{ 
   min-width: 100%;
  }
  .div_colonna_search_box input[type="text"]{
	width: 100%;
	box-sizing: border-box;
   }
 .div_select{
  width:290px;
  }
  .div_ipad{
  min-width:250px;
  margin-top:10px;
  }
  .div_week{
  padding-left: initial;
  min-inline-size: fit-content;
  }
 .bottone_centro{
  margin-inline: auto;
  margin-bottom:10px;
  margin-top:10px;
  }
  .div_textarea_2{
    margin: 5px;
    width: 270px;
  }
 .div_calendario{
  min-width:250px;
  margin-top:10px;
  }
 .div_calendario_attivita{
  width:100%;
  margin-top:10px;
  }
  .div_risorsa{
  min-width:-webkit-fill-available; 
  }
   .div_risorsa_55{
  min-width:-webkit-fill-available; 
  }
 .div_risorsa_desc{
  min-width:-webkit-fill-available; 
  }
  .div_foto{
  min-width: 75%; 
  }
  .div_ep{
   min-width: -webkit-fill-available;
  }
 /*contenitore per drag and drop*/
 .col_file{
  background-color: #DCF5FB; 
  outline: 2px dashed #B3D7DF; 
  outline-offset: -10px; 
  width: 285px; 
  height: 90px; 
  text-align:center; 
  }

 .div_file{
  text-align:center; color: gray;
  border-radius: 7px; 
  height: -webkit-fill-available;
  }
 .label_file{
  height: -webkit-fill-available; 
  width: -webkit-fill-available; 
  padding:28px;  
  }
 .box__file{
  text-align-last: center; 
  height: -webkit-fill-available; 
  width: -webkit-fill-available;
  }
  .div_anag {
   min-width: -webkit-fill-available;
  }
  .div_anag_box{
  min-width: fit-content;
  margin:auto;
  padding-bottom:10px;
  }
  .row_risorsa{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap; 
   margin-right: -15px;
   margin-left: -15px;
  }
  .div_textarea_ep{
    min-width: -webkit-fill-available;
  }
  .div_episodio{
   min-width: -webkit-fill-available;
   margin-left: inherit;
  }
  .div_prev_desc{
  min-width:250px;
  margin:10px;
  }
  .div_pian_desc{
   min-width: -webkit-fill-available;
  }
  .div_data_esec{
   min-width: min-content;
  }
  .div_durata_esec{
   min-width: 62%;
  }
   .div_new_ep{
    min-width: 96%;
    margin: 8px;
  }
  .div_cal_att{
    align-self: flex-end;
    min-width: -webkit-fill-available;
    text-align: center !important;
  }
  .div_gest_att{
   min-width: 75%; 
  }
  .div_desc_cal_att{
    margin: auto;
    margin-top: 10px;
    width: 110px;
  }
  .div_desc_cal_att2{
    margin: auto;
    width: 110px;
  }
  .select_aree{
  width:110%;
  }
  .div_colonna_prev{
  min-width:320px;
  }
  .div_colonna_prev_note{
  min-width:320px;
  }
  .div_align_bottom{
  align-self: flex-end;
  }
  .div_colonna_attivita{
   min-width:320px;
   text-align-last: center;
   margin-top:10px;
  }
  .row_colonna_attivita{
  margin-bottom:15px;
  }
  .div_radio_filtro{
    margin-left: 15px;
    margin-right: 15px;
    min-width: -webkit-fill-available;
  }
  .div_cal_filtro{
   margin-left: 15px;
   margin-right: 15px;
   min-width: -webkit-fill-available;
  }
  .div_button_filtro{
   min-width: -webkit-fill-available;
   text-align: -webkit-center;
  }
  .div_pian{
   min-width: -webkit-fill-available;
   padding: 5px;
   padding-left: 20px;
  }
  .div_pian_cal{
   min-width: -webkit-fill-available;
   padding: 5px;
   padding-left: 20px;
  }
  .col_index_img{
   min-width: -webkit-fill-available;
   text-align:left !important;
  }
  .col_index_text
  {
   width:100%;
   padding:10px;
   text-align:center !important;
  }
 .col_prezzo{
   min-width: -webkit-fill-available;
 }
}
 /* Tablet */
@media only screen and (min-width: 701px) and (max-width: 1029px){

 .sidenav {padding-top: 15px;}
 .sidenav a {font-size: 18px;}
 .main_phone{
   visibility: visible;
  }
 .menu_navigation_bar{
  display: none;
  }
 .tasti_intestazione{
  display:none;
  }
 .tasti_intestazione_phone{
  visibility: visible;
  }
 .card_body_home{
  margin:2px;
  }
 .card_body_home h5{
  font-size:15px;
  }
 .card_body_home p{
  display:none;
  }
 .button_home_page{
  font-size: 20px;
  width: 230px;
  margin-top:5px;
  }
 .col_card_home{
  width:100px;
  margin:2px;
  margin-top:10px;
  }
 .container_home{
  margin-top:50px;
  }
 .seleziona_filtro{
  min-width:300px;
  }
 .div_colonna{
  min-width:300px;
  }
 .div_colonna_search_box{ 
  min-width: -webkit-fill-available;
  }
  .div_colonna_search_box2{ 
  min-width: -webkit-fill-available;
  }
  .div_desc{
  margin-left:20px;
  min-width:180px;
  }
  .div_ipad{
   min-width: 410px;
   margin-top: 20px;
  }
  .div_ipad_3{
  margin-left:20px;
  min-width:180px;
  }
 .div_week{
  min-inline-size: fit-content;
  margin-inline: auto;
  }
 .div_ep{
  min-width:240px;
  min-inline-size: fit-content;
  }
 .bottone_centro{
  margin-inline: auto;
  margin-bottom:10px;
  }
  .div_textarea_2{
    width: 400px;
  }
 .div_calendario{
  min-width: 410px;
   margin-top: 20px;
  }
 .div_calendario_attivita{
  min-width: 310px;
   margin-top: 20px;
  }
 .div_ipad_2{
   width: 450px;
   margin-top: 20px;
  }
/*contenitore per drag and drop*/
 .col_file{
  background-color: #DCF5FB; 
  outline: 2px dashed #B3D7DF; 
  outline-offset: -10px; 
  width: auto; height: 90px; 
  text-align:center; 
  }
 .div_file{
  text-align:center; color: gray;
  border-radius: 7px; 
  height: -webkit-fill-available;
  }
 .label_file{
  height: -webkit-fill-available; 
  width: -webkit-fill-available; 
  padding:28px;  
  }
 .box__file{
  text-align-last: center; 
  height: -webkit-fill-available; 
  width: -webkit-fill-available;
  }
  .div_anag{
  min-width: fit-content;
  }
  .div_anag_box{
  min-width: -webkit-fill-available;
  }
  .div_risorsa{
   min-width:40%; 
  }
  .div_risorsa_55{
   min-width:55%; 
  }
  .div_risorsa_desc{
   min-width:24%; 
  }
  .div_foto{
   min-width: 30%; 
  }
  .row_risorsa{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   margin-right: -15px;
   margin-left: -15px;
  }
  .div_ep{
   min-width: -webkit-fill-available;
  }
  .div_episodio{
   width: 500px;
  }
  .div_textarea_ep{
   min-width:  -webkit-fill-available;
  }
  .div_pian_desc{
   min-width:26%; 
  }
  .div_pian_esec{
    min-width: 100%;
    margin: 8px;
  }
  .div_new_ep{
    min-width: 98%;
    margin: 8px;
  }
  .div_cal_att{
   align-self: flex-end;
   width: -webkit-fill-available;
   justify-content: space-evenly;
  }
  .div_gest_att1{
   min-width: 75%; 
  }
  .div_cal_att2{
   align-self: flex-end;
   text-align: center !important;
  }
  .div_desc_cal_att{
  widht:70%;
  }
  .div_row_cal_att{
   justify-content: space-evenly;
  }
 .select_aree{
  width:50%;
  }
  .div_colonna_prev{
  min-width:320px;
  }
  .div_colonna_prev_note{
  min-width:fit-content;
  }
  .div_align_bottom{
  align-self: flex-end;
  }
  .div_attivita{
   margin-top: 30px;
   min-width: 55%;
  }
  .div_calendario_attivita_2{
   min-width: 180px;
   margin-top: 20px;
  }
  .row_attivita_filtro{
   min-width: max-content;
  }
  .div_button_filtro{
  min-width: -webkit-fill-available;
  }
  .row_pian{
   padding:20px;
  }
  .div_pian_cal{
   min-width: fit-content;
   padding: 5px;
   padding-left: 20px;
  }
    .div_radio_filtro{
    margin-left: 15px;
    margin-right: 15px;
    min-width: -webkit-fill-available;
  }
  .div_cal_filtro{
   margin-left: 15px;
   margin-right: 15px;
   min-width: -webkit-fill-available;
  }
  .col_index_img{
   text-align:left !important;
  }
  .col_index_text
  {
   width:100%;
   padding:10px;
   text-align:right !important;
  }
 
}

@media (min-width: 1030px) and  (ax-width: 2410px) {
 .div_ipad{	
   position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }

  .div_anag{  
  min-width: fit-content;
  }
  .div_anag_box{
   min-width: fit-content;
   margin: 15px;
  }

}
 
 /* Computer */
@media only screen and (min-width: 1030px) {
 	
 .main_phone{
  display: none;
  }
  .menu_navigation_bar{
  visibility: visible;
  }
  .tasti_intestazione{
  visibility: visible;
  }
  .tasti_intestazione_phone{
  display: none;
  }
 .button_home_page{
  font-size: 20px;
  width:300px;
  }
  .col_card_home{
  width:200px;
  margin:20px;
  }
 .card_body_home{
  margin:3px;
  }
 .card_home p{
  padding-bottom:3px;
  height:50px;
  }
  .drop_menu{
  min-width: 11rem;
  margin:0px;
  }
  .seleziona_filtro{
  min-width:300px;
  }
  .div_colonna{
  margin-left:20px;
  min-width:180px;
  }
  .div_ipad_3{
  margin-left:35px;
  }

 .div_ep{
  min-width:240px;
  min-inline-size: fit-content;
  }
 .div_week{
  margin: 10px;
  min-inline-size: fit-content;
  }
 .bottone_centro{
  margin-inline: auto;
  margin-bottom:10px;
  }
 .div_ipad{	
    min-width: 500px;
  }
 .div_ipad_2{	
    width: 480px;
  }
 .div_calendario{
  max-width: fit-content;
  }
 .div_calendario_attivita{
  max-width: fit-content;
  }

/*contenitore per drag and drop*/
 .col_file{
  background-color: #DCF5FB; 
  outline: 2px dashed #B3D7DF; 
  outline-offset: -10px; 
  width: auto; height: 90px; 
  text-align:center; 
  }
 .div_file{
  text-align:center; color: gray;
  border-radius: 7px; 
  height: -webkit-fill-available;
  }
 .label_file{
  height: -webkit-fill-available; 
  width: -webkit-fill-available; 
  }
 .box__file{
  text-align-last: center; 
  height: -webkit-fill-available; 
  width: -webkit-fill-available;
  padding-top:30px;
/* background: green;*/
  }
  .box__input{
/* background: violet;*/
   height: -webkit-fill-available;
  }

  .div_anag{  
  min-width: revert;
  }
  .div_anag_box{
  min-width: fit-content;
  }
  .row_risorsa{
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; 
    margin-right: -15px;
    margin-left: -15px;
  }
  .div_foto{
   min-width: 15%; 
  }
  .div_textarea_ep{
   min-width: -webkit-fill-available;
  }
  .div_pian_esec{
   min-width: 37%;
   margin: 10px;
  }
 .div_new_ep{
    min-width: 31%;
    margin: 8px;
  }
  .div_cal_att{
    align-self: flex-end;
	margin-left:10px;
  }
  .div_cal_att2{
    align-self: flex-end;
    min-width: -webkit-fill-available;
  }
  .div_gest_att{
   min-width: 19%; 
  }
  .select_aree{
  width:30%;
  }
  .div_colonna_prev{
  min-width:320px;
  }
  .div_colonna_prev_note{
  min-width:320px;
  }
 .div_align_bottom{
  align-self: flex-end;
  }
  .row_new_ep{
  justify-content: space-between;
  }
  .row_pian{
   padding:20px;
  }
 .row_attivita_filtro{
  margin: auto;
  }
  .col_index_img{
   text-align:left !important;
  }
  .col_index_text
  {
   margin-top:10px;
   text-align:right !important;
  }
 

}


@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);

@prim: #53e3a6;

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	
	font-weight: 300;
}

body{
	font-family: 'Source Sans Pro', sans-serif;
	color: white;
	font-weight: 300;
	
	::-webkit-input-placeholder { /* WebKit browsers */
		font-family: 'Source Sans Pro', sans-serif;
			color:    white;
		font-weight: 300;
	}
	:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
		font-family: 'Source Sans Pro', sans-serif;
		 color:    white;
		 opacity:  1;
		font-weight: 300;
	}
	::-moz-placeholder { /* Mozilla Firefox 19+ */
		font-family: 'Source Sans Pro', sans-serif;
		 color:    white;
		 opacity:  1;
		font-weight: 300;
	}
	:-ms-input-placeholder { /* Internet Explorer 10+ */
		font-family: 'Source Sans Pro', sans-serif;
		 color:    white;
		font-weight: 300;
	}
}

.wrapper{
	background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
	
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 400px;
	margin-top: -200px;
	overflow: hidden;
	
	&.form-success{
		.container{
			h1{
				transform: translateY(85px);
			}
		}
	}
}

.container{
	max-width: 600px;
	margin: 0 auto;
	padding: 80px 0;
	height: 400px;
	text-align: center;
	
	h1{
		font-size: 40px;
		transition-duration: 1s;
		transition-timing-function: ease-in-put;
		font-weight: 200;
	}
}

form{
	padding: 20px 0;
	position: relative;
	z-index: 2;
	
	input{
		display: block;
		appearance: none;
		outline: 0;
		border: 1px solid fade(white, 40%);
		background-color: fade(white, 20%);
		width: 250px;
		
		border-radius: 3px;
		padding: 10px 15px;
		margin: 0 auto 10px auto;
		display: block;
		text-align: center;
		font-size: 18px;
		
		color: white;
		
		transition-duration: 0.25s;
		font-weight: 300;
		
		&:hover{
			background-color: fade(white, 40%);
		}
		
		&:focus{
			background-color: white;
			width: 300px;
			
			color: @prim;
		}
	}
	
	button{
		appearance: none;
		outline: 0;
		background-color: white;
		border: 0;
		padding: 10px 15px;
		color: @prim;
		border-radius: 3px;
		width: 250px;
		cursor: pointer;
		font-size: 18px;
		transition-duration: 0.25s;
		
		&:hover{
			background-color: rgb(245, 247, 249);
		}
	}
}

.bg-bubbles{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	z-index: 1;
	
	li{
		position: absolute;
		list-style: none;
		display: block;
		width: 40px;
		height: 40px;
		background-color: fade(white, 15%);
		bottom: -160px;
		
		-webkit-animation: square 25s infinite;
		animation:         square 25s infinite;
		
		-webkit-transition-timing-function: linear;
		transition-timing-function: linear;
		
		&:nth-child(1){
			left: 10%;
		}
		
		&:nth-child(2){
			left: 20%;
			
			width: 80px;
			height: 80px;
			
			animation-delay: 2s;
			animation-duration: 17s;
		}
		
		&:nth-child(3){
			left: 25%;
			animation-delay: 4s;
		}
		
		&:nth-child(4){
			left: 40%;
			width: 60px;
			height: 60px;
			
			animation-duration: 22s;
			
			background-color: fade(white, 25%);
		}
		
		&:nth-child(5){
			left: 70%;
		}
		
		&:nth-child(6){
			left: 80%;
			width: 120px;
			height: 120px;
			
			animation-delay: 3s;
			background-color: fade(white, 20%);
		}
		
		&:nth-child(7){
			left: 32%;
			width: 160px;
			height: 160px;
			
			animation-delay: 7s;
		}
		
		&:nth-child(8){
			left: 55%;
			width: 20px;
			height: 20px;
			
			animation-delay: 15s;
			animation-duration: 40s;
		}
		
		&:nth-child(9){
			left: 25%;
			width: 10px;
			height: 10px;
			
			animation-delay: 2s;
			animation-duration: 40s;
			background-color: fade(white, 30%);
		}
		
		&:nth-child(10){
			left: 90%;
			width: 160px;
			height: 160px;
			
			animation-delay: 11s;
		}
	}
}

@-webkit-keyframes square {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-700px) rotate(600deg); }
}
@keyframes square {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-700px) rotate(600deg); }
}