@use 'sass:math';

.is-invalid {
    .form-control, .ts-control {
        border-color: $evap-dark-red;
    }

    .form-control:focus, .ts-control:focus {
        box-shadow: 0 0 0 0.2rem rgba($evap-dark-red, 0.25);
    }
}

select[multiple='multiple'] {
    height: 200px;
}

select[multiple] {
    min-height: 40px;
}

.email-form {
    .form-label {
        float: left;
        width: 15%;
        padding-top: 7px;
        padding-right: 15px;
        font-weight: bold;
        text-align: right;
    }

    .form-field {
        float: left;
        width: 85%;
    }
}

.filter-form {
    @include media-breakpoint-down(sm) {
        margin: $spacer math.div($grid-gutter-width, 2) 0;
        padding-top: $spacer;
        border-top: $border-width solid $border-color;
    }

    @include media-breakpoint-up(md) {
        border-left: $border-width solid $border-color;
    }
}

.form-label {
    font-weight: bold;
    padding-top: 0.3rem;

    @include media-breakpoint-up(md) {
        text-align: right;
    }

    &.is-invalid {
        color: $evap-dark-red;
    }
}
.form-static-text {
    padding-top: 0.3rem;
}

.form-submit-btn {
    min-width: 200px;
}

.form-submit-btn-divider {
    width: 5px;
    height: auto;
    display: inline-block;
}
