:root {
    --newsletter-pop-title: #327d42;
    --newsletter-pop-input-border-color: #ccc;
    --newsletter-pop-close-color: #333;
    --newsletter-pop-close-hover-color: #FF0000;
    
    --newsletter-pop-btn-backgroud-color:#327d42;
    --newsletter-pop-btn-border-color:#327d42;
    --newsletter-pop-btn-hover-border-color:#327d42;
    --newsletter-pop-btn-hover-color:#327d42;
    --newsletter-pop-btn-active-color:#327d42;
    --newsletter-pop-btn-color:#ffffff;
    --newsletter-pop-btn-backgroud-hover-color:#ffffff;
    
    --newsletter-checkbox-colore:#ffffff;
    --newsletter-checkbox-border-colore:#e1e1e1;
    --newsletter-checkbox-spunta-colore:#000000;

    --newsletter-colore-testo:#000000;
}



 .newsletter-holder{
                    background-color: var(--newsletter-colore-sfondo);
                    border: 1px solid var(--newsletter-colore-bordo );
                    color: var(--newsletter-colore-testo);
                    display: flex;
                    align-items: center;
                    align-content: flex-start;
                    margin-top: 20px;
                    padding: 10px; 
                    height: 600px;
                    gap:20px;
                    
}
 

.newsletter-holder .item{
    align-self: flex-start
}   

.newsletter-holder .item-sx{
    width: 50%;
}   
.newsletter-holder .item-dx{
    width: 50%;
}

.entry-title{
  text-align: center;
}


.newsletter-holder .form-control {
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.1;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;
  }


.newsletter-holder input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
     appearance: none;
    background-color: var(--newsletter-checkbox-colore);
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid var(--newsletter-checkbox-border-colore);
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
  }
  
  .newsletter-holder input[type=checkbox]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var( --newsletter-checkbox-spunta-colore );
    background-color: CanvasText;
  }
  
  input[type=checkbox]:checked::before {
    transform: scale(1);
  }


.emotional-image{
    border-radius: 10px;
}   
  

   /*
  input[type=checkbox]:focus {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
  }
  
  input[type=checkbox]:disabled {
    --form-control-color: var(--form-control-disabled);
    color: var(--form-control-disabled);
    cursor: not-allowed;
  } */


  .newsletter-holder input[type=text],
  .newsletter-holder input[type=email] {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    /* margin: 0 0 26px; */
    margin: 0;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 16px;
    line-height: 28px;
    font-weight: inherit;
    color: #a8a7a7;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 0;
    box-sizing: border-box;
    outline: 0;
    cursor: pointer;
    transition: color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out
}
 
#newsletter-form div{
    margin-bottom: 26px;
}

.newsletter-holder input[type=text]:focus,
.newsletter-holder input[type=email]:focus{
    color: #1e1e1e;
    background-color: #fff;
    border-color: #1e1e1e
}

.newsletter-holder input[type=text]:-ms-input-placeholder, 
.newsletter-holder input[type=email]:-ms-input-placeholder{
    color: inherit;
    opacity: 1
}

.newsletter-holder input[type=text]::placeholder, 
.newsletter-holder input[type=email]::placeholder {
    color: inherit;
    opacity: 1
}




.newsletter-holder input[type=submit]
{
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 20px 0 0 0;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 16px;
    line-height: 28px;
    font-weight: inherit;
    color: var( --newsletter-submit-colore-testo );
    background-color: var( --newsletter-submit-colore-sfondo );
    /* border: 1px solid var( --newsletter-submit-colore-bordo ); */
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    outline: 0;
    cursor: pointer;
    transition: color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out
}

.newsletter-holder input[type=submit]:focus,
.newsletter-holder input[type=submit]:hover {
    color: var( --newsletter-submit-hover-colore-testo );
    background-color: var( --newsletter-submit-hover-colore );
}

.newsletter-holder a{
    display: contents;
    text-decoration: underline;
}


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

      .newsletter-holder
      {
        display: initial;
      }

      .newsletter-holder .item-sx,
      .newsletter-holder .item-dx {
        width: 100%;
      }

      .emotional-image{
          width: 100%;
      }

}














/* .modal input {
    padding: 10px;
    border: 1px solid var(--newsletter-pop-input-border-color);
    border-radius: 5px;
    font-size: 20px;
} */


#newsletter-form div{
    margin-bottom: 16px;
}
 
input[name="first_name"],
input[name="last_name"],
input[name="email"] {
     height: 50px;
     width: 60%;
     padding: 7px;
     font-size: 20px;
}


#bottone {
    background-color: var(--newsletter-pop-btn-backgroud-color);
    color: var(--newsletter-pop-btn-color);
    padding: 10px 20px;
    border: 2px var(--newsletter-pop-btn-border-color) solid;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-size: 18px;
    text-transform: uppercase;
    width: 95%;
}

/* Stato hover: quando il mouse passa sopra il pulsante */
#bottone:hover {
    background-color: var(--newsletter-pop-btn-backgroud-hover-color);
    border: 2px var(--newsletter-pop-btn-hover-border-color) solid;
    cursor: pointer;
    color: var(--newsletter-pop-btn-hover-color);
    /* transform: scale(1.05); */
}

/* Stato active: quando il pulsante viene premuto */
#bottone:active {
    background-color: var(--newsletter-pop-btn-active-color);
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


#bottone{
    margin-bottom: 12px;
}

 
#email-form-holder span,
#privacy-form-holder span{
    display: inline-block;
    color: red;
    font-size: 20px;
}

#privacy-form-holder span{
    margin-bottom: 10px;
}

.privacy-holder{
    font-size: 16px;
    line-height: 1.3rem;
    margin-bottom: 20px;
}
/*
#send-form{
	font-size: 29px;
	padding: 3px;
    
} */


@media (max-width: 700px) {
    
        #newsletter-form{
            padding:10px
        }

        input[name="first_name"],
        input[name="last_name"],
        input[name="email"] {
            width: 95%;
        }

        #bottone {
            width: 95%;
        }
}