/* Container globale */
#content #grav_wrapper{
    float: left;
    margin: auto;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Container form */
#grav_form{
    display: block;    
    padding: 0;
    float: left;
    width: 100%;
    box-sizing: border-box;   
}

/* Container risultato */
#content #content_result {
    background-color: #d7e8e9; /* azzurrino */
    border: 0 solid #cccccc;    
    min-height: 300px;    
    padding-left: 10px;
    padding-right: 10px;
    float: left;
    width: 100%;
    box-sizing: border-box;
}

/* Campi obbligatori */
#content #grav_mandatory {
    /*background: none repeat scroll 0 0 #f4f4f4;
    border: 0 dotted #cccccc;*/
    margin: 0 auto;  
    clear: both;  
    float: left;    
    width: 100%;
    box-sizing: border-box;
}

/* Campi facoltativi */
#content #grav_optional {
    margin: 5px auto;
    padding: 5px;    
    float: left;    
    width: 100%;
    box-sizing: border-box;
}

/* Container date-picker */
#content .grav_left {
    width: 100%;
    float: left;
    text-align: center;
    box-sizing: border-box;
}

#content #datepicker {
  background-color: #f7d1e5;
  border: 0 none;
  display: inline-block;
  margin: 0 auto 18px;
  padding: 8px 0;
  text-align: center;
  border: 1px solid #bbb;
  background: white;
  border-radius: 2px;
  font-size: 15px !important;
}

/* Mostra campi facoltativi */
#content .grav_right {
    width: 100%;
    float: left;
    box-sizing: border-box;
}

#content .grav_center {
  background: #f0f0f0 none repeat scroll 0 0;
  box-sizing: border-box;
  display: block;
  float: left;
  height: 55px;
  margin: 0 auto 10px;
  text-align: center;
  width: 100%;
}
/*#content .grav_center {
  background: #f4f4f4 none repeat scroll 0 0;
  box-sizing: border-box;
  display: block;
  float: left;
  height: 50px;
  margin: 0 auto 10px;
  text-align: center;
  width: 100%;
}*/


#content .grav_label {
    font-size: 15px;    
    text-align: center;
    float: left;    
    width: 100%;
    box-sizing: border-box;
}

#content .grav_title {
    font-size: 15px;    
    text-align: center;
    float: left;    
    width: 100%;
    box-sizing: border-box;
}

#content .grav_explain {    
    border: 0px #cccccc solid;
    margin: 5px auto 10px auto;    
    background-color: #EEEEEE;
    float: left;    
    width: 100%;
    box-sizing: border-box;
}

/* pulsante mostra */
#content #grav_show {
    display: block;
    margin: 0 auto;
    background: #aaa;
    border: 0 solid #666;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    padding: 1px 3px 3px;
    text-align: center;
    text-decoration: none;
    width: 180px;
}

/* pulsante Calcola */
#content #grav_btn {
  background: #1480cc none repeat scroll 0 0;
  border: 0 solid #666;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-size: 16pt;
  margin: 0 auto;
  padding: 0.6em 2em;
  text-align: center;
  text-decoration: none;
  width: auto;
}
/*#content #grav_btn {
  background: #1480cc none repeat scroll 0 0;
  border: 0 solid #666;
  color: #fff;
  display: inline-block;
  font-size: 10pt;
  margin: 0 auto;
  padding: 7px 0;
  text-align: center;
  text-decoration: none;
}*/


#content #grav_show:hover, #grav_btn:hover {
    text-decoration: bold;
    border: 0px solid #aaa;
    background: #777;
}

/*#content_result .pf_gsett, #content_result .pf_giorno{
    float: left;
    margin-right: 5px;
}*/

/* Periodo fertile ***********************************************************/

#pf_wrapper {
    float:left;
    width: 100%;
    /*padding: 10px 0 10px 20px;*/
}

#pf_calendario {
    margin-right: 20px;
    float:left;
}

#pf_calendario h3{
    text-align: center;
}

#pf_legenda {
    float:left;
    margin-left: 0;
    text-align: center;
}

.pf_01{
    background-color: #D2056E;
    color: #FFFFFF;
    clear: both;
    float: left;
    width:220px;
}
.pf_02{
    background-color: #BBDEE2;
    clear: both;
    float: left;
    width:220px;
}
.pf_03{
    background-color: #62C1DD;
    clear: both;
    float: left;
    width:220px;
}
.pf_04{
    background-color: #07CA54;
    clear: both;
    float: left;
    width:220px;
    font-weight: bold;
}
.pf_gsett{
    width:90px;
    float:left;
    padding-left:10px;
}
.pf_giorno{
    width:40px;
    float:left;
}
.pf_mese{
    width:80px;
    float:left;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}