/* ----- CSS Reset ----- */

button, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="submit"], textarea, select {font-family:var(--font-a); font-weight:normal; border-radius:0; -webkit-appearance:none; appearance:none;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {margin:0; -webkit-appearance:none;}		
input[type="date"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-inner-spin-button {display:none; -webkit-appearance:none;}
input[type="number"] {-moz-appearance:textfield;}
input {font-family:var(--font-a); font-size:var(--body-font-size);}
textarea {overflow:auto; resize:none;}
fieldset {min-width:0;}

/* ----- Template Styles ----- */

:root {
  --input-color-a:var(--color-theme-b);
  --input-border-a:var(--color-theme-b);
  --input-focus-a:var(--color-theme-c);
  --input-background-a:transparent;
  --input-placeholder:var(--color-theme-b);
  --input-font-size-sml:16px;
  --input-error-a:#EF3232;
  --input-padding:5px 0;
}

.content-form {margin-bottom:var(--def-margin); font-size:var(--body-font-size); text-align:left;}
.content-form ::placeholder {color:var(--input-placeholder); font-size:var(--body-font-size); font-weight:var(--font-weight-normal);}

.content-form .text-block {font-size:var(--input-font-size-sml);}

.content-form .intro {margin:0 0 30px 0;}
.content-form .info {margin:0 0 15px 0; font-size:var(--input-font-size-sml); line-height:1.4;}
.content-form .field .info {clear:both; margin:0; padding:5px 0 0 0; line-height:20px; text-align:right;}

.content-form .field {position:relative; margin:0 0 15px 0;}
.content-form .field::after {clear:both; display:block; content:'';}
.content-form .field:not(.checkbox):not(.multicheckbox):not(.multiradio):not(.rating):not(.file) label {position:absolute; left:-9999px;}

.content-form .text input,
.content-form .email input,
.content-form .tel input,
.content-form .date input,
.content-form .textarea textarea,
.content-form .select .customSelect {float:left; width:100%; height:40px; margin:0; padding:var(--input-padding); line-height:28px; font-size:var(--body-font-size); color:var(--input-color-a); font-weight:var(--font-weight-semi-bold); border-bottom:1px solid var(--input-border-a); background:var(--input-background-a); box-sizing:border-box; transition:border-color 0.3s ease;}
.content-form .textarea textarea {height:auto; line-height:1.4;}

.content-form .select select {z-index:1; display:block; width:100%!important; height:40px; font-size:15px!important; line-height:20px; opacity:0; cursor:pointer;}
.content-form .select .customSelect {position:static!important; display:block!important; width:100%!important; max-width:100%; padding-right:40px; color:var(--input-placeholder); font-weight:var(--font-weight-normal); overflow:hidden; box-sizing:border-box;}
.content-form .select .customSelect::before {position:absolute; top:10px; right:10px; display:block; width:10px; height:10px; content:''; border:solid var(--input-border-a); border-width:0 1px 1px 0; transform:rotate(45deg);}
.content-form .select .customSelectInner {display:inline-block!important; width:100%!important; text-align:left; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.content-form .select .customSelectChanged {color:var(--input-color-a); font-weight:var(--font-weight-semi-bold);}

.content-form .checkbox,
.content-form .multicheckbox,
.content-form .multiradio,
.content-form .rating {padding:10px 0; border-bottom:1px solid var(--input-border-a); background:var(--input-background-a);}

.content-form .multicheckbox .label,
.content-form .multiradio .label,
.content-form .rating .label {margin:0 0 10px 0; line-height:1.4em;}

.content-form .multicheckbox .options .option,
.content-form .multiradio .options .option {margin:0 0 10px 0;}

.content-form .multicheckbox .options .option:last-child,
.content-form .multiradio .options .option:last-child {margin:0;}

.content-form .checkbox input,
.content-form .multicheckbox .options .option input,
.content-form .multiradio .options .option input,
.content-form .rating .options .option input {position:absolute; left:-9999px;}

.content-form .checkbox label,
.content-form .multicheckbox .options .option label,
.content-form .multiradio .options .option label {position:relative; display:block; padding:0 0 0 25px; font-size:var(--input-font-size-sml); line-height:20px; cursor:pointer;}

.content-form .checkbox label::before,
.content-form .multicheckbox .options .option label::before,
.content-form .multiradio .options .option label::before {position:absolute; top:3px; left:0; display:block; width:14px; height:14px; content:''; border:1px solid var(--input-border-a); box-sizing:border-box;}
.content-form .multiradio .options .option label::before {border-radius:50%;}

.content-form .checkbox input:checked + label::after,
.content-form .multicheckbox .options .option input:checked + label::after,
.content-form .multiradio .options .option input:checked + label::after {position:absolute; top:6px; left:3px; display:block; width:8px; height:8px; content:''; background:var(--input-border-a); box-sizing:border-box;}
.content-form .multiradio .options .option input:checked + label::after {border-radius:50%;}

.content-form .rating .options {display:flex; margin:0 0 10px 0;}
.content-form .rating .options .option {margin:0 10px 0 0;}
.content-form .rating .options .option label {position:relative; display:block; width:50px; height:50px; text-indent:-9999px; background:url('../../images/icon-rating.svg') center center no-repeat; background-size:50px; cursor:pointer; transition:transform 0.3s ease; overflow:hidden;}
.content-form .rating .options .option.active label {background:none;}
.content-form .rating .options .option label:hover {transform:scale(1.1);}
.content-form .rating .options .option label::before {z-index:1; position:absolute; top:0; left:-50px; display:block; width:50px; height:50px; content:''; background:url('../../images/icon-rating-checked.svg') center center no-repeat; background-size:50px;}
.content-form .rating .options .option.active label::before {left:0;}

.content-form .file {text-align:left;}
.content-form .file input {position:absolute; top:0; right:0; bottom:20px; left:0; width:100%; opacity:0; cursor:pointer;}
.content-form .file .custom-upload {position:relative; display:block; overflow:hidden; cursor:pointer;}
.content-form .file .custom-upload .file-name {display:block; width:100%; height:40px; padding:var(--input-padding); padding-right:70px; line-height:18px; font-size:var(--body-font-size); color:var(--input-placeholder); text-overflow:ellipsis; border-bottom:1px solid var(--input-border-a); background:var(--input-background-a); box-sizing:border-box; white-space:nowrap; overflow:hidden;}
.content-form .file .custom-upload .file-name.selected {color:var(--input-color-a);}
.content-form .file .custom-upload .file-select {position:absolute; top:0; right:0; bottom:0; left:auto; width:70px; font-size:var(--input-font-size-sml); text-align:center; line-height:38px; color:#FFF; border-radius:5px 5px 0 0; background:var(--input-border-a); transition:all 0.3s ease;}
.content-form .file:hover .custom-upload .file-select {color:var(--color-theme-b); background:var(--input-focus-a);}
.layout-section.theme-c .content-form .file:hover .custom-upload .file-select {background:var(--color-theme-a);}

.content-form .text input:focus,
.content-form .email input:focus,
.content-form .tel input:focus,
.content-form .date input:focus,
.content-form .textarea textarea:focus,
.content-form .select .customSelectFocus {border-color:var(--input-focus-a);}

.layout-section.theme-c .content-form .text input:focus,
.layout-section.theme-c .content-form .email input:focus,
.layout-section.theme-c .content-form .tel input:focus,
.layout-section.theme-c .content-form .date input:focus,
.layout-section.theme-c .content-form .textarea textarea:focus,
.layout-section.theme-c .content-form .select .customSelectFocus {border-color:var(--color-theme-a);}

.content-form .honeypot {display:none;}

.content-form .controls {display:flex; flex-wrap:wrap; align-items:center;}
.content-form .controls .info {padding:0;}
.content-form .controls .button {margin:0 0 0 auto;}

.content-form p.back {padding-top:20px; border-top:1px solid var(--input-border-a);}

/* ----- Validation ----- */

.validate-form .error-field label,
.validate-form .error-field .label,
.validate-form .error-field .customSelect,
.validate-form .error-field .custom-upload .file-name,
.validate-form .error-field ::placeholder {color:var(--input-error-a);}

.validate-form .error-field div.error {position:absolute; top:-5px; left:-15px; width:16px; height:16px; text-indent:-9999px; border-radius:50%; background:var(--input-error-a); overflow:hidden;}
.validate-form .error-field div.error::before,
.validate-form .error-field div.error::after {position:absolute; display:block; top:50%; left:50%; width:75%; height:2px; content:''; background:#FFF;}
.validate-form .error-field div.error::before {transform:translate(-50%, -50%) rotate(45deg);}
.validate-form .error-field div.error::after {transform:translate(-50%, -50%) rotate(-45deg);}
.validate-form .error-field p.info {color:var(--input-error-a);}

.validate-form p.error {margin:0 0 10px 0; padding:3px 10px 7px 10px; color:#FFF; font-size:var(--input-font-size-sml); background:var(--input-error-a); box-sizing:border-box;}
.validate-form p.success {display:none; margin:0 0 20px 0; font-weight:var(--font-weight-semi-bold);}