/*
.other-calcs {
    background-color: lightgoldenrodyellow; 
    padding: 20px;
    position: fixed;
    bottom: 20px;
    right: 20px;
}

body {
    font-family: "Work Sans", serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}
*/

/** Elementor sets this to smooth, but that breaks chrome validation messages **/
html.has-bsmith-calc {
    scroll-behavior: auto!important;
}

div, section {
    position: relative;
    box-sizing: border-box;
}

.bscalc-wrapper {
    font-family: "Work Sans", serif;
    width: 100%;
    max-width: 960px;
    margin: 40px auto;
    display: flex;
    gap: 40px;
}

.bscalc-intro {
    text-align: center;
    max-width: 360px;
    margin: 20px auto 40px auto;
    font-size: 1.25rem;
    line-height: 1.5rem;
}

.bscalc-form {
    max-width: 550px;
    width: 100%;
    background-color: #ffffff;
    padding: 10px 5%; 
    border-radius: 12px;
    font-size: 0.875rem;
}

.submit-wrapper {
    padding: 30px 0;
    text-align: center;
}

button.bscalc-submit {
    display: block;
    background-color: #14ae5c;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 8px;
    margin: 0 auto;
}

button.bscalc-submit:hover {
    background-color: #40B450;
}

.error-message,
.form-error-message {
    display: none;
}

.has-error .error-message,
.form-has-error .form-error-message {
    display: block;
    color: #ff0000;
    margin: 10px 0;
}

.bscalc-form .has-error .form-field input[type=text], 
.bscalc-form .has-error .form-field input[type=number], 
.bscalc-form .has-error.form-field input[type=text],
.bscalc-form .has-error.form-field input[type=number],
.bscalc-form .has-error .form-field select,
.bscalc-form .has-error.form-field select {
    background-color: #f4b6b6;
}

.bscalc-form .form-field {
    margin-bottom: 20px;
}

.bscalc-form .form-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.875rem;
}

.bscalc-form .form-field input,
.bscalc-form .form-field input[type=text],
.bscalc-form .form-field input[type=email],
.bscalc-form .form-field input[type=number],
.bscalc-form .form-field select {
    display: block;
    box-sizing: border-box;
    padding: 5px;
    background-color: #eef1f2;
    border: 2px solid #c0c0c0;
    width: 100%;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1.5rem;
    height: 34px;
}

.bscalc-form .form-field select {
    max-width: 245px;
}

.bscalc-form .field-cols-2,
.bscalc-form .field-cols-3 {
    display: flex;
    column-gap: 15px;
}

.bscalc-form .field-cols-2 .form-field {
    width: 50%;
    align-self: flex-end;
}

.bscalc-form .field-cols-3 .form-field {
    width: 33%;
    align-self: flex-end;
}

.bscalc-form .bscalc-currency input[type=number],
.bscalc-form .bscalc-currency input[type=text]{
    padding-left: 25px;
    text-align: left!important;
}

.bscalc-form .js-bscalc-intonly-mask {
    text-align: left!important;
}

.bscalc-form .bscalc-currency:before {
    content: '$';
    font-size: 1rem;
    display: block;
    position: absolute;
    bottom: 5px;
    left: 10px;
}

.bscalc-form .bscalc-percent input[type=number] {
    padding-right: 25px;
}

.bscalc-form .bscalc-percent:before {
    content: '%';
    font-size: 1rem;
    display: block;
    position: absolute;
    bottom: 5px;
    right: 8px;
}

.bscalc-results-wrapper {
    max-width: 300px;
    width: 100%;
    background-color: #ffffff;
    padding: 10px 3%; 
    border-radius: 12px;
    text-align: center;   
}

.bscalc-results-wrapper h2 {
    font-size: 1.25rem;
}

.bscalc-results-wrapper p {
    font-size: 0.875rem;
}

.bscalc-results-panel {
    background-color: #eef1f2;
    border-radius: 4px;
    padding: 10px;
    margin: 3rem 0;
}

.bscalc-results-panel .result-title {
    margin: 0;
    font-weight: normal;
    font-size: 1.375rem;
}

.bscalc-results-panel .result-value {
    margin: 2rem 0;
    font-weight: 600;
    font-size: 2rem;
}

.bscalc-email-form {
    text-align: left;
}

.bscalc-email-form h2 {
    margin-bottom: 10px;
}

.bscalc-email-form label {
    display: block;
    margin-bottom: 15px;
}

.bscalc-email-form input[type=email] {
    display: block;
    box-sizing: border-box;
    padding: 5px;
    background-color: #eef1f2;
    border: 2px solid #c0c0c0;
    width: 100%;
    border-radius: 4px;
}

.bscalc-email-form button.bscalc-email-submit {
    display: block;
    background-color: #14ae5c;
    color: #ffffff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    margin: 5px 0px 5px auto;
}

button.bscalc-email-submit:hover {
    background-color: #40B450;
}

.bscalc-email-form .success-message {
    display: none;
    color: #14ae5c;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    border: solid 1px #14ae5c;
    background-color: #e6fcf1;
    margin-top: 10px;
}

.bscalc-email-form.success .success-message {
    display: block;
}

.bscalc-email-form.success .bscalc-email-submit,
.bscalc-email-form.success #bscalc_email {
    display: none;
}

@media(max-width: 768px){
    .bscalc-wrapper {
        flex-wrap: wrap;
    }

    .bscalc-form, 
    .bscalc-results-wrapper {
        max-width: none;
        margin: 0 6%;
    }
}