.check-prices-form-title {
margin-bottom: 18px;
font-size: 30px;
font-weight: 700;
}
form.default-check-price-form {
position: relative;
display: inline-flex;
}
form.default-check-price-form input {
color: #404040;
border-radius: 8px;
outline: 0;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
line-height: 1em;
height: 60px;
}
form.default-check-price-form label.error-message {
position: absolute;
top: -60px;
left: 0;
color: #D62C20;
font-size: 12px;
background: rgba(255, 255, 255, .9);
border-radius: 4px;
padding: 12px 20px;
line-height: 18px;
opacity: 0;
-webkit-transition: opacity .2s ease-in-out, top .3s ease-in-out;
transition: opacity .3s ease-in-out;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, .4);
}
form.default-check-price-form label.error-message:before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 0;
left: 50%;
box-sizing: border-box;
border: 8px solid #000;
border-color: transparent transparent rgba(255, 255, 255, .9) rgba(255, 255, 255, .9);
transform: rotate(-45deg) translateX(-50%);
box-shadow: -3px 3px 12px -3px rgba(0, 0, 0, .4);
}
form.default-check-price-form label.error-message.visible {
margin: 0;
opacity: 1;
}
form.default-check-price-form .the-serviceselect-wrap {
position: relative;
display: inline-block;
}
form.default-check-price-form .submit-wrapper-with-loader { margin: 0 0 0 10px;
display: inline-block;
}
form.default-check-price-form .submit-wrapper-with-loader.active .load-holder-lds-eclipse {
display: block;
}
form.default-check-price-form .submit-wrapper-with-loader .load-holder-lds-eclipse {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--btn-primary-background);
border-radius: 8px;
display: none;
} form.default-check-price-form .submit-wrapper-with-loader input[type=submit] {
font-size: 18px;
font-weight: 700;
line-height: 1; background-color: var(--button-primary-bkg-color);
color: var(--button-primary-color);
border: 1px solid var(--btn-primary-border-color);
border-radius: 6px;
margin: 0;
width: auto;
height: 50px;
text-transform: capitalize;
position: absolute;
right: 25px;
top: 15px;
}
form.default-check-price-form .submit-wrapper-with-loader input[type=submit]:hover {
background-color: var(--button-primary-bkg-color-hover);
color: var(--button-primary-color-hover);
border: 1px solid var(--btn-primary-border-color-hover);
}
form.default-check-price-form .the-postfield-wrap {
position: relative;
width: 550px;
display: inline-block;
line-height: 18px;
}
form.default-check-price-form .the-postfield-wrap span.icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 15px;
}
form.default-check-price-form .the-postfield-wrap span.icon:before {
color: #000000;
}
form.default-check-price-form .the-postfield-wrap:focus-within span.icon {
opacity: 0;
}
form.default-check-price-form .the-postfield-wrap:hover input[type=text]:not(.error) {
border-color: var(--primary-color);
}
form.default-check-price-form .moving-label {
position: absolute;
top: 2px;
left: 25px;
font-size: 12px;
z-index: 32;
color: var(--primary-color);
line-height: 24px;
pointer-events: none;
}
form.default-check-price-form .the-postfield {
font-size: 16px;
width: 100%;
padding: 12px 45px 12px;
border: 1px solid #BFCCDA;
margin-top: 0;
min-height: 80px;
}
form.default-check-price-form .the-postfield:focus {
border-color: var(--primary-color);
}
.dynamic-helper {
margin-bottom: 16px;
display: block;
position: relative;
z-index: 5;
}
.dynamic-helper .helper-text {
text-align: left;
max-width: 520px;
font-size: 13px;
color: #404040;
margin: 12px auto 0;
}
.dynamic-helper.clicked .typewriter-box {
display: none;
}
.dynamic-helper.clicked .the-postfield-wrap .the-postfield:focus {
border-color: var(--primary-color);
border-width: 2px;
padding: 12px 23px 12px;
}
.dynamic-helper.clicked .the-postfield-wrap .the-postfield.error {
border-width: 1px;
padding: 12px 24px 12px;
border-color: #D62C20;
}
.dynamic-helper.clicked .the-postfield-wrap .the-postfield.error ~ .moving-label {
color: #D62C20;
}
.dynamic-helper.clicked input[type=text].error,
.dynamic-helper.clicked select.error {
border-color: #D62C20;
}
.dynamic-helper.clicked input[type=text].error:hover,
.dynamic-helper.clicked select.error:hover {
border-color: #D62C20;
}
.dynamic-helper.clicked input[type=text].error ~ p,
.dynamic-helper.clicked select.error ~ p {
border-color: #D62C20;
}
.dynamic-helper .typewriter-box {
background: #fff;
position: absolute;
top: 4px;
left: 4px;
text-align: left;
z-index: 41;
height: 90%;
width: 94%;
border-radius: 5px;
cursor: text;
}
.dynamic-helper .typewriter-box .typewriter {
display: inline-block;
height: 100%;
width: 100%;
background: #fff;
color: #000;
background: #fff url(//www.pantherpestcontrol.co.uk/wp-content/themes/panther-gutenberg-theme/assets/images/layout/typewriter.gif) 18px center no-repeat;
}
@media only screen and (max-width:767px) {
form.default-check-price-form {
display: block;
}
form.default-check-price-form .the-postfield-wrap {
margin: 10px 0 0 0;
width: 100%;
}
form.default-check-price-form .the-postfield {
padding: 20px 15px 10px 60px;
min-height: 60px;
}
form.default-check-price-form .submit-wrapper-with-loader {
position: relative;
margin: 15px 0 0 0;
vertical-align: top;
width: 100%;
}
form.default-check-price-form .submit-wrapper-with-loader input[type=submit] {
width: 100%;
margin: 0;
padding: 16.5px 10px;
position: relative;
right: 0;
height: unset;
}
form.default-check-price-form.price-form-with-service label.error-message {
position: relative;
left: auto !important;
top: auto !important;
text-align: left;
padding: 0;
background: 0 0;
box-shadow: none;
line-height: 0;
margin: 0;
font-size: 0;
}
form.default-check-price-form.price-form-with-service label.error-message:before {
display: none;
}
form.default-check-price-form.price-form-with-service label.error-message.visible {
font-size: 12px;
line-height: 18px;
margin-top: 5px;
}
.dynamic-helper .helper-text {
text-align: center;
max-width: 288px;
margin-top: 20px;
}
}
@media only screen and (max-width:767px) and (orientation:landscape) {
form.default-check-price-form .submit-wrapper-with-loader {
margin: 10px 0 0 0;
}
}