@charset "UTF-8";

.header-page {
      background-color: hsl(220, 100%, 30%);
      color:	#fff;
      padding: 15px 20px;
      font-size: 1.0em;
      font-weight: bold;
      text-align: center;
      height: 25px;
      margin: 10px 0px 20px 0px; /* Top, Right, Bottom, Left (clockwise) */
    }

#header-column-container h4{
	color: 					#474545;
	font-size: 				12px;
	line-height: 			15px;
	font-family: 			Arial, Helvetica, Sans-serif;
	font-weight: 			bold;
	margin: 				0 0 10px 0;
	padding: 				7px 10px 7px 6px;
	text-transform: 		uppercase;
}

/*GENERAL BUTTON*/

.login-button {
	display:				flex;
	margin-left:		-30px;
	align-items:			center;
	justify-content:		center;
	line-height: 			1;
	text-decoration: 		none;
	font-family: 			"Titillium Web", sans-serif;
	font-size: 				15px;
	text-transform: 		uppercase;
	width: 					80px;
	height: 					30px;
	border: 				1px solid #687589;
	position: 				relative;
    background-color: hsl(220, 100%, 30%);
    border-color: hsl(220, 100%, 10%);
    color:#fff;
}

.search-result-title {
    background-color: hsl(220, 100%, 30%);
    color:	#fff;
    padding: 				5px 5px 20px 5px;
    font-size: 				16px;
    font-weight: 			bold;
	font-family: 			"Titillium Web", sans-serif;
    text-align: 				center;
    height: 					10px;
}

    .form-container {
      display: 				grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 					16px;
      max-width: 			1000px;
      margin: 				20px 10px 15px 50px; /* Top, Right, Bottom, Left (clockwise) */
    }

    .form-container_5 {
      display: 				grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 					16px;
      max-width: 			1300px;
      margin: 				20 20 100 0;
    }

    .form-container_3 {
      display: 				grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 					16px;
      max-width: 			40%;
      margin: 				-5px 0px 15px 100px;
    }

    .form-group {
      display: 				flex;
      flex-direction: 		column;
      align-items: 			flex-start; /* Align label and input to the left */
    }

    label {
      font-weight: 			bold;
      margin-bottom: 	4px;
    }

    input[type="text"], input[type="email"], input[type="number"] {
      width: 					100%;
      padding: 				6px;
      text-transform: 		uppercase;
      box-sizing: 			border-box;
      border-radius:		3;
    }

    input[name="data_nascita"], input[name="prov_nascita"] , input[name="prov_residenza"], input[name="data_inizio_carica"], input[name="data_fine_carica"] {
      width: 				60%;
      padding: 			6px;
      text-transform: uppercase;
      box-sizing: 		border-box;
      border-radius:	3;
    }

    input[name="nome_tit"], input[name="cognome_tit"], input[name="comune_nascita"], input[name="indirizzo_residenza"] , input[name="comune_residenza"] {
      width: 					100%;
      padding: 				6px;
      text-transform: 		uppercase;
      box-sizing: 			border-box;
      border-radius:		3;
    }
	table.titolare {
		width:				70%;
      	margin: 			20px 0px 20px 0px;
	}
	table.titolare, table.titolare td{
	    vertical-align:		middle;
	    text-align:			left;
	    border-collapse:	collapse;
	    border:				0px solid #a9a9a9;
	    padding:			2px;
	    font-family:		serif;
	    font-style:			normal;
	    font-size:			12px;
	    font-weight:		bold;
	    margin-bottom: 30px;
	} 
	table.titolare th {
	    vertical-align:		middle;
	    border-collapse:	collapse;
	    border:				0px dotted #a9a9a9;
	    padding:			2px;
	    font-family:		serif;
	    font-style:			normal;
	    font-size:			13px;
	    font-weight:		bold;
	    color:			hsl(220, 100%, 30%);
    	background-color:	#fff;
	}
	table.titolare tr.odd{
	    background-color:	transparent; /*#ebfbea; /* #e3fbe2; #d4fbd3;   */
	}
	table.titolare tr.even {
	    background-color:	rgb(229, 238, 218);  /*#e9fbfa; #ffffe9; #f0fbfb;*/
	}

.input-search-titolare {
	font-size: 				13px;
	line-height: 			15px;
	font-weight: 			400px;
	font-family: 			"Titillium Web", sans-serif;
	text-transform: 		uppercase;
	background-color: #fff;
	color:				#364760;
}

.input-nuovo-titolare {
	font-size: 				13px;
	line-height: 			15px;
	font-weight: 			400px;
	font-family: 			"Titillium Web", sans-serif;
	text-transform: 		uppercase;
	background-color: #fff;
	color:				#364760;
	margin-top: 			-8px;
}

.input-titolare {
  	height: 					40px;
	width: 					30%;
  	border-radius:		4px;
	text-transform: 		uppercase;
	background-color: #fff;
	color:				#364760;
}

/* Styles for the input WHEN IT IS FOCUSED */
input:focus {
	background-color: rgb(229, 238, 218); 
	/* #e8f0fe  A light blue color  rgb(229, 238, 218)    rgb(175, 203, 144) light green 
											rgb(230, 230, 235) 
		*/
    border-color: rgb(175, 203, 144);   /*  #4a90e2 A darker blue for the border */
    
    /* Optional: Remove the default browser outline if you have a custom border/shadow */
    outline: none;
}

.readonly-style {
  background-color:	#f0f0f0;
  color:						#555;
}