﻿.black-button {display: flex; align-items: center; align-self: center; margin: 0px auto; border-radius: 8px; background: #494647; color: #fff; height: 48px; align-content: center; padding: 0px 40px; font-weight: 300;}
.black-button:hover { color: #fff; background-color: #000; }
.form-title { display: flex; width: calc(100%); padding: 0px; flex-direction: row; align-items: center; }
.form-title h3, .form-title h4, .form-title h5, .form-title h6 { font-family: 'basic-sans', sans-serif; }
.form-title h4 { font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; text-transform: uppercase; padding: 0px; margin: 20px 0px 20px 0px; }
.form-title h5 { font-size: 13px; font-style: normal; font-weight: 600; line-height: normal; padding: 0px; color: #494647; margin-left: auto; }
p.spiegone_form { margin: 0px; padding: 0px; display: flex; color: #494647; font-size: 18px; font-style: normal; font-weight: 300; line-height: normal; text-align: left; }
.edit_input { display: none; }
.input_wrapper { display: flex; border: 1px solid #ededed; padding: 30px 20px 0px 20px; flex-direction: column; align-self: stretch; }
.section_wrapper { }
.input-container { display: flex; flex-direction: column; border-radius: 7px; padding: 20px 0px 20px 0px; border: none; width: calc(100%); position: relative; margin-bottom: 0px; background-color: white; }
.input-container textarea::-webkit-input-placeholder { font-weight: 300; }
.input-container input[type="text"]::-webkit-input-placeholder { font-weight: 400; }
.input-container input[type="text"], .input-container input[type="email"], .input-container textarea, .input-container input[type="password"] { padding: 15px 15px; border-radius: 7px; border: 1px solid #CDCDCD; color: #494647; font-size: 16px; font-style: normal; font-weight: 600; line-height: normal; align-self: stretch; flex: 1;}
.input-container input { border: 1px solid #f1f1f1; }
 .input-container:hover input { border: 1px solid #f1f1f1; -webkit-box-shadow: 0px 20px 50px -20px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 20px 50px -20px rgba(0, 0, 0, 0.5); box-shadow: 0px 20px 50px -24px rgba(0, 0, 0, 0.5);}
.input-container span:first-child { color: #494647; font-style: normal; line-height: normal; font-size: 16px; font-weight: 300; text-align: left; position: absolute; top: 0px; }
.input-container input[type="checkbox"] + label::before { content: ''; position: absolute; left: 0; top: 0px; transform: none; width: 20px; height: 20px; border: 1px solid #CDCDCD; border-radius: 4px; background-color: #fff; transition: background-color 0.3s ease, border-color 0.3s ease; }
.input-container input[type="checkbox"]:checked + label::before { background-color: #4CAF50; border-color: #4CAF50; content: '✔'; color: #fff; font-size: 14px; text-align: center; line-height: 20px; }
.input-container input[type="checkbox"] + label { padding: 2px 0px 0px 35px; color: #494647; text-align: justify; font-size: 16px; font-style: normal; font-weight: 300; line-height: 125%; }

    .input-container.check.large input { border: none; }
.input-container.check { padding-bottom: 0px; display: flex; justify-content: flex-start; padding-top: 0px; flex-direction: row; margin-bottom: 20px; }
.input-container label:hover::before { border-color: #888; }
.input-container.error input[type="text"], .input-container.error input[type="email"], .input-container.error textarea, .input-container.error input[type="password"] { border: 1px solid #ff0000; }
 .input-container.error::before { content: "Campo obbligatorio"; color: red; position: absolute; top: 0px; right: 0px; margin-top: 5px; font-size: 12px; font-weight: 300; }
 .input-container.error input[type="checkbox"] + label::before {  }
 .input-container.check.error::before { top: -22px; }

.filter .input-container.check{margin-top:10px; margin-bottom:10px;}
.filter .input-container input[type="checkbox"]:checked + label::before { background-color: #FFF; border-color: #828181; content: '✔'; color: #000; font-size: 16px; text-align: center; line-height: 20px; }

@media screen and (min-width: 990px) { .input_wrapper { align-content: flex-start; display: flex; flex-wrap: wrap; column-gap: 20px; flex-direction: row; flex: 1; }
   .input_wrapper > .input-container:not(.large) { width: calc(50% - 10px); }
}