/*bs start*/
input.displayInvisible{
    width:1px !important;
    height:1px !important;
    display: inline-block !important;
    opacity: 0;
    margin-left: -2px;
}
.message-error{
    color: var(--red);
}
.mb-pm{
    margin-bottom: var(--padding-m);
}
.mt-pm{
    margin-top: var(--padding-m);
}
input::placeholder {
    color: var(--black);
}
/*bs end*/


.form {
    --color: var(--yellow);
}

.form {
    margin-bottom: var(--padding-m);
    text-align: left;
}
.form fieldset {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
    background: var(--white);
    /*border: 0;*/
    /*border-radius: var(--border-radius-big);*/
    /*font-size: var(--font-size-large);*/
    height: 2.75rem;
    /*margin-bottom: var(--padding-m);*/
    /*padding: var(--padding-xs) var(--padding-s);*/
    position: relative;
    border-radius: 0;
    border: 1px solid black;
}
.form fieldset.submit-inline {
    padding-right: var(--padding-l);
}
.form fieldset.submit-inline .label {
    text-overflow: ellipsis;
    /*padding-right: var(--padding-l);*/
    overflow: hidden;
    white-space: nowrap;
}
.form fieldset.submit-inline [type=submit] {
    background: transparent;
    border: 0;
    border-radius: 0;
    height: var(--padding-s);
    max-width: 100%;
    padding: 0;
    position: absolute;
    right: var(--padding-s);
    top: 50%;
    transform: translate3d(0, -50%, 0);
    width: var(--padding-s);
}
.form fieldset.submit-inline [type=submit] svg,
.form fieldset.submit-inline [type=submit] img{ /*BS*/
    height: 100%;
    width: 100%;
}

.form [type=submit].search-form{
    color: white;
    background-color: var(--mapa);
    border-radius: var(--border-radius-big);
    width: auto;
    justify-content: center;
    align-items: center;
    left: 0;
    padding-left: var(--padding-m);
    padding-right: var(--padding-m);
    border: none;
    height: 2.75rem;
    font-size: inherit;
}

.form .label {
    align-items: center;
    display: flex;
    height: 100%;
    left: 0;
    margin-top: calc(-1 * var(--padding-xxxs));
    padding: var(--padding-xs) var(--padding-s);
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: opacity 0.1s ease-out;
    width: 100%;
}
.form .input:focus + .label,
.form .input.filled + .label {
    opacity: 0;
}
.form .input {
    background: transparent;
    /*border-bottom: 1px solid var(--black);*/
    height: 100%;
    padding: 0;
    width: 100%;
}
.form .checkbox {
    background: var(--white);
    border-radius: var(--border-radius-small);
    padding: var(--padding-xxs) var(--padding-l);
}
.form .select {
    position: relative;
    font-size: var(--font-size-large);
    width: 100%;
}
.form .select.--blue select {
    background: var(--blue);
}
.form .select.--orange select {
    background: var(--orange);
}
.form .select.--green select {
    background: var(--green);
}
.form .select.--mapa select {
    background: var(--mapa-light);
}
.form .select select {
    -webkit-appearance: none;
    background: var(--white);
    border: none;
    border-radius: var(--border-radius-big);
    cursor: pointer;
    height: 3.75rem;
    padding: 0 var(--padding-m) 0 var(--padding-s);
    width: 100%;
}
.form .select svg,
.form .select img { /*BS*/
    height: 0.625rem;
    right: var(--padding-xs);
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    width: 1.25rem;
}
.form [type=submit] {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
    border: 1px solid var(--color);
    border-radius: var(--border-radius-big);
    color: var(--black);
    font-size: var(--font-size-mid);
    max-width: 100%;
    padding: var(--padding-xs) var(--padding-m);
    text-align: left;
    width: 26.25rem;
}
@media (hover: hover) {
    .form [type=submit]:hover {
        /*background: var(--color);*/
    }
}
@media (max-width: 480px) {
    .form fieldset {
        margin-bottom: var(--padding-xs);
    }
    .form [type=submit] {
        background: var(--color);
    }
}
@media (min-width: 480px) {
    .form fieldset .label, .form fieldset {
        padding: var(--padding-xs) var(--padding-m);
    }
    .form fieldset.submit-inline {
        padding: 0 var(--padding-m);
        margin-right: var(--padding-m);
    }
    /*.form fieldset.submit-inline .label {*/
        /*padding-right: var(--padding-lg);*/
    /*}*/
    .form fieldset.submit-inline [type=submit] {
        right: var(--padding-m);
    }
    .form fieldset .select select {
        padding: 0 var(--padding-lg) 0 var(--padding-m);
    }
    .form fieldset .select svg,
    .form fieldset .select img{
        right: var(--padding-m);
    }
}

.disabled {
    color: var(--black);
    opacity: 0.5;
}
.disabled select[disabled] {
    cursor: not-allowed;
    opacity: 1;
}

.alphabet {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.alphabet .letter-wrapper {
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    margin-bottom: var(--padding-m);
    min-height: 1.875rem;
    min-width: 7.1%;
    padding: 0.25rem;
    text-align: center;
    color: var(--black);
}
.alphabet .letter-wrapper.active{  /*BS*/
    font-weight: bold;
    border-color: var(--mapa-light);
    color: var(--mapa-light);
}
.alphabet .letter-wrapper--double {
    min-width: 14.28%;
}
@media (hover: hover) {
    .alphabet .letter-wrapper:hover {
        border-color: var(--mapa-light);
        background-color: var(--mapa-light);
    }
}
.alphabet .letter-wrapper input[type=checkbox] {
    cursor: pointer;
}
.alphabet .letter-wrapper input[type=checkbox] + label {
    cursor: pointer;
    display: inline-block;
}
.alphabet .letter-wrapper input[type=checkbox] + label::before {
    display: none;
}
.alphabet .letter-wrapper input[type=checkbox]:checked + label {
    font-weight: 600;
}
@media (max-width: 480px) {
    .alphabet {
        font-size: var(--font-size-small);
        margin-bottom: var(--padding-xs);
    }
    .alphabet .letter-wrapper {
        margin-bottom: var(--padding-xxs);
        min-height: 1.375rem;
    }
}

input[type=checkbox] {
    display: none;
}
input[type=checkbox] + label::before {
    content: "";
    -webkit-appearance: none;
    background-color: var(--white);
    border: 1px solid var(--black);
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    height: 0.625rem;
    margin-right: var(--padding-xxxs);
    position: relative;
    vertical-align: baseline;
    min-width: 0.625rem;
}
input[type=checkbox]:checked + label::before {
    background: var(--black);
}
@media (max-width: 480px) {
    input[type=checkbox] + label::before {
        height: 1.25rem;
        margin-right: var(--padding-xxxs);
        position: relative;
        vertical-align: middle;
        min-width: 1.25rem;
    }
}