@import 'datepicker.css';

/* ----- 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:Arial, sans-serif; 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 {font-family:Arial, sans-serif; font-size:14px;}
textarea {overflow:auto; resize:none;}

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

::placeholder {color:#707070; font-family:'Comfortaa', Arial, sans-serif;}
:-ms-placeholder {color:#707070; font-family:'Comfortaa', Arial, sans-serif;}

.content-form fieldset {min-width:0;}
.content-form .info {margin:0 0 15px 0; font-size:12px; line-height:1.4em;}
.content-form .field .info {clear:both; margin: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(.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:50px; margin:0; padding:10px 20px; line-height:30px; font-size:15px; color:#000; border:1px solid #FFF; border-radius:25px; background:#FFF; box-sizing:border-box; transition:border-color 0.3s ease;}
.content-form .textarea textarea {height:auto; padding:20px; line-height:normal;}

.content-form .select select {display:block; width:100%!important; height:50px; line-height:20px; cursor:pointer;}
.content-form .select .customSelect {position:static!important; display:block!important; width:100%!important; max-width:100%; padding-right:50px; line-height:30px; color:#666; background-image:url('../images/bg-custom-select.svg'); background-position:right 0; background-repeat:no-repeat; background-size:50px 50px; overflow:hidden;}
.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:#000;}

.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:#00AAD2!important;}

.content-form .checkbox,
.content-form .multicheckbox,
.content-form .multiradio {padding:10px; background:#FFF;}

.content-form .multicheckbox .label,
.content-form .multiradio .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 {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; 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 #000; background:center center no-repeat #FFF; box-sizing:border-box;}
.content-form .multiradio .options .option label::before {border-radius:50%;}

.content-form .checkbox input:checked + label::before,
.content-form .multicheckbox .options .option input:checked + label::before,
.content-form .multiradio .options .option input:checked + label::before {background-image:url('../images/bg-input-checked.svg'); background-size:14px;}

.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; margin:0 0 5px 0; overflow:hidden; cursor:pointer;}
.content-form .file .custom-upload .file-name {display:block; width:100%; height:50px; padding:10px 90px 10px 20px; line-height:30px; font-size:15px; color:#666; text-overflow:ellipsis; border:1px solid #FFF; border-radius:25px; background:#FFF; box-sizing:border-box; white-space:nowrap; overflow:hidden;}
.content-form .file .custom-upload .file-name.selected {color:#000;}
.content-form .file .custom-upload .file-select {position:absolute; top:0; right:0; bottom:0; left:auto; width:90px; font-size:14px; text-align:center; line-height:50px; color:#FFF; border-radius:0 25px 25px 0; background:#00AAD2; transition:all 0.3s ease;}
.content-form .file:hover .custom-upload .file-select {background:#514F9D;}

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

.content-form .controls {margin:0;}
.content-form .controls .info {float:left;}
.content-form .controls .button {float:right;}

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

.validate-form .error-field div.error {position:absolute; top:0; left:0; width:20px; height:20px; text-indent:-9999px; border-radius:50%; background:url('../images/bg-error.svg') center center no-repeat #ff5c5c; background-size:10px;}
.validate-form .error-field p.info {color:#ff5c5c;}
.validate-form .controls p.error {margin:0 0 10px 0; padding:5px 10px; color:#FFF; font-size:14px; background:#ff5c5c;}
.validate-form p.success {display:none; color:#00AAD2; font-weight:700; font-size:24px; line-height:30px;}

/* ----- Newsletter Form ----- */

.newsletter-section .content-form .wrap {display:-ms-flexbox; -ms-flex-flow:row wrap; display:flex; flex-flow:row wrap; margin:0 -10px;}
.newsletter-section .content-form .wrap .field {width:25%; padding:0 10px; box-sizing:border-box;}
.newsletter-section .content-form .info {padding:20px 0;}
.newsletter-section .content-form .controls .button {float:none;}

#content section.theme-a .content-form .text input,
#content section.theme-a .content-form .email input,
#content section.theme-a .content-form .tel input,
#content section.theme-a .content-form .date input,
#content section.theme-a .content-form .textarea textarea,
#content section.theme-a .content-form .select .customSelect {border-color:#F4F4F4; background-color:#F4F4F4;}

/* Hubspot */

.hs-form .hs-form-field {position:relative; margin:0 0 15px 0;}
.hs-form .hs-form-field::after {clear:both; display:block; content:'';}
.hs-form .hs-form-field {position:relative; margin:0 0 15px 0;}
.hs-form .hs-form-field label {display:block; margin:20px 0 10px 0; padding:0 20px;}
.hs-form .hs-form-field input,
.hs-form .hs-form-field textarea,
.hs-form .hs-form-field .customSelect {float:left; width:100%; height:50px; margin:0; padding:10px 20px; line-height:30px; font-size:15px; color:#000; border:1px solid #FFF; border-radius:25px; background:#FFF; box-sizing:border-box; transition:border-color 0.3s ease;}
.hs-form .hs-form-field textarea {height:140px; padding:20px; line-height:normal;}
.hs-form .hs-form-field select {display:block; width:100%!important; height:50px; line-height:20px; cursor:pointer;}
.hs-form .hs-form-field .customSelect {position:static!important; display:block!important; width:100%!important; max-width:100%; padding-right:50px; line-height:30px; color:#666; background-image:url('../images/bg-custom-select.svg'); background-position:right 0; background-repeat:no-repeat; background-size:50px 50px; overflow:hidden;}
.hs-form .hs-form-field .customSelectInner {display:inline-block!important; width:100%!important; text-align:left; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.hs-form .hs-form-field .customSelectChanged {color:#000;}
.hs-form .hs-form-field input:focus,
.hs-form .hs-form-field textarea:focus,
.hs-form .hs-form-field .customSelectFocus {border-color:#00AAD2!important;}
.hs-form .hs-submit {text-align:right;}
.hs-form .hs-submit input {display:inline-block; height:38px; margin:0; padding:0 20px; font-family:'Comfortaa', Arial, sans-serif; font-size:16px; line-height:38px; color:#00AAD2!important; border-color:#00AAD2; text-decoration:none!important; border:1px solid; border-radius:20px; background:transparent; transition:all 0.3s ease !important; overflow:hidden;}
.hs-form .hs-submit input:hover,
.hs-form .hs-submit input:active,
.hs-form .hs-submit input:focus {color:#FFF!important; background:#00AAD2;}
.hs-form .hs_error_rollup {width:100%; padding:20px 0 20px 0; text-align:center;}
.hs-form .hs-form-field .hs-error-msg {position:absolute; top:20px; left:0; width:20px; height:20px; margin:0; padding:0; text-indent:-9999px; border-radius:50%; background:url('../images/bg-error.svg') center center no-repeat #ff5c5c; background-size:10px;}

.newsletter-section .hs-form {display:flex; flex-flow:row wrap; margin:0 -10px;justify-content: center;}
.newsletter-section .hs-form .hs-form-field {margin:0; padding:0 10px; text-align:left; box-sizing:border-box;}
.newsletter-section .hs-form .hs-submit {width:100%; padding-top:20px; text-align:center;}

#content section.theme-a .hs-form .hs-form-field input,
#content section.theme-a .hs-form .hs-form-field textarea,
#content section.theme-a .hs-form .hs-form-field .customSelect {border-color:#F4F4F4; background-color:#F4F4F4;}