.openid-connect-login-form {
    display: none;
    margin-bottom: 40px;
}

.openid-connect-login-form button {
    margin-top: 20px;
}

.user-login-form .form-actions {
    margin-top: 20px;
}


/* FILTERS */

.custom-exposed-filters {
    background-color: #008A90;
    color: #fff;
    padding-bottom: 10px;
    margin-bottom: 1.875rem;

    form {
        flex-wrap: wrap;
    }

    .form-submit.btn-middle-grey {
        display: none;
    }

    .wrap-btn {
        align-items: center;
        display: flex;
    }

    .form-submit {
        color: #fff;
        background-color: transparent;
        padding: 0;
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 1rem;
        text-decoration: underline;
    }

    label {
        display: none;
        color: #fff !important;
    }

    input,
    select {
        padding: 1.0625rem 2.8125rem 1.0625rem 1.25rem;
        max-height: 3.375rem;
        width: 100%;
        font-size: 1rem;
        line-height: 1.3;
        background-color: #fff;
        color: #263C3F;
        border-radius: 0;
        border: 0;
    }

    select {
        cursor: pointer;
    }

    .form-item.form-item-combine {
        width: 40%;
        margin-right: 100%;
        flex-grow: 0;
        min-width: calc(528px + 16px);
    }

    .form-item {
        width: 20%;
        min-width: 264px;
    }

    @media only screen and (max-width: 767px) {
        .form-item.form-item-combine,
        .form-item{
            min-width: 100%;
            width: 100%;
        }
    }

    .js-form-type-entity-autocomplete input.form-autocomplete {
        background-position: 92% center;
    }

    @media only screen and (max-width: 767px) {
        .js-form-type-entity-autocomplete input.form-autocomplete {
            background-position: 96% center;
        }
    }

    .js-form-type-select {
        position: relative;

        select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
        }
    }

    .js-form-type-textfield {
        position: relative;
    }

    .js-form-type-textfield::before {
        content: '';
        height: 1.125rem;
        width: 1.125rem;
        background: url('../images/icon-search-old.svg') no-repeat;
        background-position: center;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        background-size: 1.125rem 1.125rem;
        pointer-events: none;
    }

    .js-form-type-select::before {
        content: '';
        height: 1.25rem;
        width: 1.25rem;
        background: url('../images/arrow.svg') no-repeat;
        background-position: center;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        pointer-events: none;
    }


    @media only screen and (max-width: 767px) {
        .filters-wrapper {
            overflow: hidden;
            max-height: 0;
            transition: max-height 250ms ease-in-out;
            align-items: flex-start;
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 16px;
        }

        .filters-controls {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
            margin-top: 8px;

            .wrapper.js-form-type-search-api-autocomplete {
                display: none;
            }
        }

        .filters-toggle {
            position: relative;
            font-weight: 600;
            font-size: 18px;
            line-height: 24px;
            letter-spacing: 0;
        }

        .filters-toggle:after {
            background-image: url("../images/filters.svg");
            background-repeat: no-repeat;
            background-size: 24px 24px;
            content: '';
            height: 24px;
            right: -32px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
        }

        .filters-toggle.filters-toggle--active:after {
            background-image: url("../images/filters-close.svg");
        }
    }
}

.node--documents_and_tools,
.node--training_courses {
    .banner {
        margin-bottom: 0;
        padding-bottom: 30px;

        .list-form {
            margin-top: 0;
        }
    }
}

.node--documents_and_tools .views-exposed-form form,
.node--training_courses .views-exposed-form form {
    display: flex;
    gap: 16px;
    margin-bottom: 0 !important;
}

.node--documents_and_tools .views-exposed-form,
.node--training_courses .views-exposed-form {
    display: flex;
    margin-bottom: 30px;
}

.node--documents_and_tools .views-exposed-form div.form-item.js-form-item,
.node--training_courses .views-exposed-form div.form-item.js-form-item{
    grid-column: span 3;
}

.node--documents_and_tools .views-exposed-form label,
.node--training_courses .views-exposed-form label {
    color: #000;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.node--documents_and_tools .views-exposed-form .wrap-btn.form-actions,
.node--training_courses .views-exposed-form .wrap-btn.form-actions {
    grid-column: 1 / -1;
}

.node--documents_and_tools .views-exposed-form button.form-submit,
.node--training_courses .views-exposed-form button.form-submit {
    padding: 10px 50px;
    text-transform: uppercase;
    transition: opacity 250ms ease-in-out;
}

.node--documents_and_tools .views-exposed-form button.form-submit:hover,
.node--training_courses .views-exposed-form button.form-submit:hover {
    opacity: .85;
}


@media only screen and (max-width: 1023px) {
    .node--documents_and_tools .views-exposed-form div.form-item.js-form-item,
    .node--training_courses .views-exposed-form div.form-item.js-form-item {
        grid-column: span 4;
    }
}


@media only screen and (max-width: 767px) {
    .node--documents_and_tools .views-exposed-form,
    .node--training_courses .views-exposed-form {
        margin-bottom: 0;
    }

    .node--documents_and_tools .views-exposed-form div.form-item.js-form-item,
    .node--training_courses .views-exposed-form div.form-item.js-form-item {
        grid-column: span 12;
    }
}

#block-vetocontact-local-tasks nav.tabs {
    border-bottom: 1px solid #DCDDDE;
    margin: 0 auto;
    width: 80%;
}

#block-vetocontact-local-tasks ul.tabs {
    margin-top: 25px;
    border: 1px solid #DCDDDE;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    padding: 0;
}

#block-vetocontact-local-tasks ul.tabs li {
    margin: 0;
}

#block-vetocontact-local-tasks ul.tabs li:not(:last-of-type) {
    border-right: 1px solid #DCDDDE;
}

#block-vetocontact-local-tasks ul.tabs li a {
    border: 0;
    border-radius: 0;
    background-color: #fff;
    padding: 8px 12px;
    height: 100%;
    font-family: Roboto;
}

#block-vetocontact-local-tasks ul.tabs li a.is-active {
    background-color: #7FB83F;
    color: #fff;
}

.user-form:not(.user-register-form) .form-item-select-user-role {
    display: none;
}

.group-user-info,
.group-address,
.group-about-user,
.group-identifier {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
}

.user-form {
    .form-actions {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 1350px) {
    .group-user-info,
    .group-address,
    .group-identifier,
    #edit-language,
    .field--name-field-newsletter,
    .field--name-field-newsletter + #edit-actions{
        padding-left: 15px;
        padding-right: 15px;
    }

    .field--name-field-newsletter + #edit-actions {
        margin: 15px 0;
    }

    .user-form {
        .group-login,
        .group-about-user,
        .form-actions {
            padding: 16px;
        }

        .group-login,
        .group-about-user {
            width: 100%;
        }
    }
}

.group-user-info,
.group-address,
.group-about-user,
.group-login {

    h3 {
        width: 100%;
        padding: 0 0 10px 0;
        border-bottom: 1px solid #2E2E2E;
        font-size: 20px;
        text-transform: uppercase;
        margin-bottom: 0 !important;
    }

    span,
    a {
        font-weight: 400 !important;
    }

    .field-group-div div:not(.group-left-block) {
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;
        margin-bottom: 8px;
        color: #4B686C;
        display: inline-block;
        width: 100%;
        margin-top: 20px;
    }
}

.group-user-info,
.group-address {
    .group-left-block {
        padding-left: 0 !important;
    }
}

.group-about-user,
.group-login {
    display: inline-block;
    font-weight: 400;

    div {
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;
        margin-bottom: 8px;
        color: #4B686C;
        display: inline-block;
        width: 100%;
        margin-top: 20px;
    }
}

.group-user-info,
.group-address {
    display: flex;
    flex-direction: column;
    margin: 0 auto 30px;
    position: relative;
    max-width: 82.5rem;
}

@media only screen and (max-width: 767px) {
    .group-identifier,
    .group-user-info,
    .group-address{
        flex-direction: column !important;
    }
}

.group-left-block,
.group-right-block,
.group-login,
.group-about-user {
    width: 50%;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
}

.group-right-block {
    padding-left: 10px;
}

#edit-field-user-address-0-address {
    margin-top: 0;
}

#edit-field-user-address-0-address .js-form-item-field-user-address-0-address-address-line1 {
    margin-top: 0;
}

@media only screen and (max-width: 767px) {
    .group-right-block {
        padding-left: 0;
        width: 100%;
    }
}

.group-user-hide {
    display: none !important;
}

@media only screen and (max-width: 599px) {
    #block-vetocontact-local-tasks nav.tabs {
        width: 100%;
    }

    #block-vetocontact-local-tasks ul.tabs {
        width: 100%;
    }

    #block-vetocontact-local-tasks ul.tabs li:not(:last-of-type) {
        border-bottom: 1px solid #DCDDDE;
        border-right: 0;
    }
}

#edit-account {
    .js-form-type-email {
        display: none;
    }
}

/* User Registration Form Validation Styles */
.form-item--error input {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.form-item--error input:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.form-item--error label {
  color: #dc3545 !important;
}

/* Ensure form elements are focusable */
form input[type="email"],
form input[type="text"],
form input[type="password"] {
  outline: none;
}

form input[type="email"]:focus,
form input[type="text"]:focus,
form input[type="password"]:focus {
  outline: 2px solid #007cba;
  outline-offset: 2px;
}

/* Error message styling */
.messages--error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
}

.messages--error .messages__content {
  margin: 0;
}