/* Root */
:root {
    --theme-main-color: #f91942;
    --theme-main-color-dark: #e02547;
    --gray: rgb(206 206 206);
}

/* Aux */
.cloned.sticky a.sign-in.popup-with-zoom-anim {
    color: #707070;
}

.mt-4 {
    margin-top: 1.5rem;
}

.d-none {
    display: none !important;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-end {
    justify-content: flex-end;
}

#titlebar {
    margin-top: 80px;
}

@media(max-width:1239px) {
    #titlebar {
        margin-top: 150px;
    }
}

@media(max-width:991px) {
    #titlebar {
        margin-top: 0;
        padding-left: 15px;
        padding-right: 15px;
    }
}

.autocomplete-dropdown {
    position: absolute;
    background: #fff;
    color: rgb(112, 112, 112);
    font-weight: 100;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    z-index: 1000;
    display: none;
}

.autocomplete-item {
    padding: 8px 10px;
    cursor: pointer;
    transition: .25s all ease;
}

.autocomplete-item:hover {
    background-color: #f0f0f0;
}

.autocomplete-item.no-results {
    color: #999;
    /* font-style: italic; */
    cursor: default;
    /* background: none; */
}

span.featured-icon i {
    cursor: pointer;
    transition: .25s all ease;
}

i.fa.fa-star {
    color: #d4d4d4;
}

.featured-icon i.fa.fa-star:hover,
.featured-icon.featured-active i.fa.fa-star {
    color: gold;
}

#titlebar.listing-titlebar span.listing-tag.featured {
    margin-left: 0;
    color: white;
    background: gold;
    border-color: white;
}

input.date-picker:hover {
    color: #444;
}

input.date-picker {
    border: none;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: 600;
    height: auto;
    padding: 10px 16px;
    line-height: 30px;
    margin: 0 0 15px 0;
    position: relative;
    background-color: #fff;
    text-align: left;
    color: #888;
    transition: color 0.3s !important;
}

.pending-booking .inner-booking-list ul li.highlighted.editable-date,
.canceled-booking .inner-booking-list ul li.highlighted.editable-date,
.expired-booking .inner-booking-list ul li.highlighted.editable-date,
.approved-booking .inner-booking-list ul li.highlighted.editable-date {
    cursor: pointer;
    transition: .25s all ease;
}

.pending-booking .inner-booking-list ul li.highlighted.editable-date:hover {
    background-color: #61b2db !important;
    color: white;
}

.canceled-booking .inner-booking-list ul li.highlighted.editable-date:hover {
    background-color: #ee3535 !important;
    color: white;
}

.expired-booking .inner-booking-list ul li.highlighted.editable-date:hover {
    background-color: #b3b3b3 !important;
    color: white;
}

.approved-booking .inner-booking-list ul li.highlighted.editable-date:hover {
    background-color: #64bc36 !important;
    color: white;
}

.chosen-results li.active-result {
    transform: .25s all ease;
}

.chosen-results li.active-result:hover {
    color: var(--theme-main-color);
}

.instagram:hover {
    background-color: #f58529 !important;
}

.fa-brands,
.fab {
    font-weight: 400 !important;
}

.fa-brands,
.fab {
    font-family: "Font Awesome 6 Brands" !important;
}

.twitter:before {
    content: "\e61b";
    top: 0;
    opacity: 1;
    margin-left: 14px;

    font-weight: 400 !important;
    font-family: "Font Awesome 6 Brands" !important;
}

.twitter:hover {
    background-color: #14171a !important;
    border-color: transparent !important;
}

.twitter i.fa-x-twitter {
    margin-left: 14px;
}


.tiktok:before {
    content: "\e07b";
    top: 0;
    opacity: 1;

    font-weight: 400 !important;
    font-family: "Font Awesome 6 Brands" !important;
}

.tiktok:hover {
    background-color: #010101 !important;
}

.chosen-container .chosen-results {
    max-height: 100px;
}

.main-search-inner .chosen-container .chosen-results {
    max-height: 200px;
}

.spot-card>a {
    position: relative;
}

.spot-card-cart {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.spot-card>a:hover .spot-card-cart {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.spot-card-cart span.add-to-cart {
    padding: 10px;
}

.spot-card-cart span.add-to-cart i {
    margin: 0;
}

.support-msg-popup button.mfp-close::before,
#small-dialog-2 button.mfp-close::before {
    top: 3px !important;
}

#prueba-dialog {
    background: #fff;
    padding: 40px;
    padding-top: 0;
    text-align: left;
    max-width: 610px;
    margin: 40px auto;
    position: relative;
    box-sizing: border-box;
    border-radius: 4px;
}

.fix-buttons-to-right {
    /* display: unset; */
}

@media(min-width: 1000px) {
    .fix-buttons-to-right {
        /* display: flex; */
        gap: 5px;
    }
}

/* Header */
#header.cloned {
    z-index: 1001;
}

.header-widget .user-menu .user-name img {
    max-width: 35px;
    max-height: 35px;
}

.cart-icon-div {
    position: relative;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    top: 9px;
    margin: 0 0 0 25px;
}

.cart-icon-div span.cart-amount {
    position: absolute;
    background: red;
    border-radius: 25px;
    color: white;
    font-weight: 600;
    width: 28px;
    top: -22px;
    right: -10px;
}

.cart-icon-div a {
    outline: none;
    border: none;
    color: #444;
    font-weight: 600;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 10px 12px;
    line-height: 24px;
    margin-bottom: 9px;
    transition: 0.3s;
    cursor: pointer;
    transition: .25s all ease;
}

.cart-icon-div a:hover {
    background-color: #fafafa;
    border: 1px solid #ddd;
}

@media (max-width: 480px) {
    .user-menu {
        margin: 10px 0 0 25px;
    }

    .cart-icon-div {
        display: none !important;
    }
}

/* Footer */

img.footer-logo {
    max-height: 90px;
}

/* Home */

.transparent-header .alt-search-box.main-search-container:before {
    /* backdrop-filter: blur(5px); */
}

.custom-temp-div::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    background: rgba(51, 51, 51, 0.25);
    /* backdrop-filter: blur(5px); */
}

section.fullwidth .icon-box-2 {
    min-height: 350px;
}

.custom-categories-boxes img {
    position: unset;
    opacity: 1;
}

.custom-categories-boxes .category-small-box-alt:hover:before {
    opacity: 0;
}

#contactform input[type="text"],
#contactform input[type="email"],
#contactform textarea {
    border: none;
    background-color: #fafafa54;
    box-shadow: none;
}

#contactform input[type="text"]:focus,
#contactform input[type="email"]:focus,
#contactform textarea:focus {
    transition: box-shadow 0.2s !important;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
}

@media(max-width:500px) {
    .main-search-container .main-search-input {
        margin-top: 110px;
    }
}

@media (min-width: 1240px) {
    .custom-categories-boxes .category-small-box-alt {
        width: calc(100%*(1 / 3) - 25px);
    }
}

/* 404 */
.container.m-404 {
    margin-top: 80px;
}

@media(max-width:1239px) {
    .container.m-404 {
        margin-top: 150px;
    }
}

@media(max-width:991px) {
    .container.m-404 {
        margin-top: 0;
    }
}

/* About us */
.taxonomy-gallery-container {
    height: auto;
}

@media(max-width: 1000px) {
    .taxonomy-gallery-container {
        padding-top: 30px !important;
    }

    .taxonomy-gallery-container .container {
        margin-bottom: 20px;
    }
}

/* Userpanel */
.swal2-container {
    z-index: 2002;
}

.dashboard-nav ul li span.nav-tag.red {
    background-color: var(--theme-main-color);
}

.dashboard-nav ul li span.nav-tag.blue {
    background-color: #61b2db;
}

span.obligatory-camp {
    color: red;
    font-size: 17px;
    font-weight: bold;
}

td.input-obligatory>div.pricing-price>input {
    box-shadow: 0 1px 3px 0px rgb(255, 0, 0);
}

.list-box-listing-content .inner {
    top: 0;
}

.button.delete-multiple {
    background: white;
    color: var(--theme-main-color);
    border: solid 1px;
    transition: .25s all ease;
}

.button.delete-multiple:hover {
    color: white;
    background: var(--theme-main-color);
}

.myspots .booking-requests-filter {
    position: unset;
    float: unset;
    top: unset;
    right: unset;
}

.myspots .list-box-listing-checkbox {
    width: 50px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
}

.myspots .list-box-listing-checkbox input {
    box-shadow: none;
    width: 25px;
    margin-top: 27px;
    accent-color: var(--theme-main-color);
}

.myspots img,
.myspots .list-box-listing-img a:before {
    height: 115px;
    max-height: 115px;
}

.myspots .spot-details {
    padding: 0;
}

.myspots .spot-details ul li {
    display: block;
    margin-top: 0;
    margin-bottom: 0;
}

.edit-profile-photo img {
    max-height: 240px;
    object-fit: cover;
}

.edit-about-us .edit-profile-photo img {
    max-height: 150px;
    object-fit: cover;
}

#image-url-container {
    width: 100%;
    margin-top: 10px;
}

.image-url-item td {
    display: flex;
    width: 100%;
    margin-bottom: 5px;
}

.image-url-item td .fm-input,
.image-url-item td .fm-move,
.image-url-item td .fm-close {
    flex: 1;
    position: relative;
}

.image-url-item td .fm-move,
.image-url-item td .fm-close {
    max-width: 40px;
}

.image-url-item td .fm-move {
    cursor: move;
    line-height: 51px;
    color: #666;
    font-size: 17px;
}

.image-url-item td .fm-close {
    text-align: right;
}

.image-url-item td .fm-close a {
    padding: 10px;
    padding-right: 0;
    color: var(--theme-main-color);
    display: inline-block;
}

.image-url-item td .fm-input {
    margin-right: 20px;
}

#image-url-container {
    width: 100%;
    margin-top: 10px;
}

#frozen-date-container {
    width: 100%;
    margin-top: 10px;
}

@media (min-width:500px) {
    .frozen-date-item td {
        display: flex;
    }
}

.frozen-date-item td {
    width: 100%;
    margin-bottom: 5px;
}

.frozen-date-item td .fm-input,
.frozen-date-item td .fm-move,
.frozen-date-item td .fm-close {
    flex: 1;
    position: relative;
}

.frozen-date-item td .fm-move,
.frozen-date-item td .fm-close {
    max-width: 40px;
}

.frozen-date-item td .fm-move {
    cursor: move;
    line-height: 51px;
    color: #666;
    font-size: 17px;
}

.frozen-date-item td .fm-close {
    text-align: right;
}

.frozen-date-item td .fm-close a {
    padding: 10px;
    padding-right: 0;
    color: var(--theme-main-color);
    display: inline-block;
}

.frozen-date-item td .fm-input {
    margin-right: 20px;
}

#frozen-date-container>tbody>tr:nth-child(1)>td>div.fm-close>a {
    display: none;
}

.frozen-date-item .fm-close a {
    padding: 2px 9px;
    width: 30px;
    height: 30px;
    color: white;
    background: var(--theme-main-color);
    border-radius: 40px;
    display: inline-block;
    transition: .25s all ease;
}

.frozen-date-item .fm-close a:hover {
    color: var(--theme-main-color);
    background: white;
}

.frozen-date-item {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 15px 0;
}

.frozen-date-list {
    padding: 10px 0;
}

.pricing-submenu {
    display: block;
    padding-top: 20px;
}

.pricing-submenu input {
    background-color: #fafafa;
}

.pricing-submenu.image-url-item td .fm-input {
    margin-right: 0;
}

#pricing-list-container tbody tr:first-child.image-url-item.pricing-submenu {
    padding-top: 0;
}

.add-image-url-item {
    background-color: #f0f0f0 !important;
    color: #666 !important;
    transition: .25s all ease;
}

.add-image-url-item:hover {
    background-color: var(--theme-main-color) !important;
    color: #fff !important;
}

#image-url-container>tbody>tr:nth-child(1)>td>div.fm-close>a {
    display: none;
}

#dashboard .pagination ul li a.current-page,
#dashboard .pagination .current,
#dashboard .pagination ul li a:hover,
#dashboard .pagination-next-prev ul li a:hover {
    background-color: #e8e8e8;
    color: #333;
}

@media(min-width:1000px) {
    .clean-pdf {
        height: 111px;
        padding-top: 0 !important;
    }
}

.clean-pdf {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 15px !important;
}

.clean-pdf-btn i {
    background: #f91942;
    border-radius: 20px;
    padding: 5px 8px;
    color: white;
    font-size: 25px;
    transition: .25s all ease;
}

.clean-pdf-btn i:hover {
    color: #f91942;
    background: white;
}

/* Spots */
i.fa.fa-heart,
i.fa.fa-heart-o {
    color: var(--theme-main-color);
}

#custom-calendar .drp-calendar.left .next {
    display: none !important;
}

@media(min-width:1300px) {
    #custom-calendar.daterangepicker {
        /* width: 590px !important; */
    }
}

/* Profile */
.titlebar-userprofile {
    margin-top: 80px;
}

.listing-item-container.list-layout span.like-icon.liked-spot {
    background-color: var(--theme-main-color);
    color: #fff;
}

.listing-item-container.list-layout .listing-item img {
    max-height: 340px;
}

@media(max-width:1239px) {
    .titlebar-userprofile {
        margin-top: 150px;
    }
}

@media(max-width:991px) {
    .titlebar-userprofile {
        margin-top: 0;
    }
}

@media(max-width:769px) {
    .listing-item-container.list-layout .listing-item img {
        max-height: 240px;
    }
}

/* Reservas */
.list-box-listing-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    min-height: 70px;
}

.expired-booking .bookings .inner h3 span.booking-status {
    background-color: #b3b3b3;
}

.clear-ranges-div {
    float: right;
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
    padding: 6px;
    display: inline-block;
    position: relative;
    margin: 0;
    box-sizing: border-box;
    color: #666;
    font-weight: 600;
    transition: 0.3s;
    background-color: #fff;
    top: -2px;
}

.input-text-custom-filter {
    display: flex;
    align-items: center;
    position: relative;
    width: 120px;
    height: 34px;
}

.input-text-custom-filter .main-search-input-item {
    margin: 0;
    padding: 0;
}

.input-text-custom-filter input[type="text"] {
    margin: 0;
    height: 34px;
    padding-left: 10px;
}

.input-text-custom-filter button {
    position: absolute;
    right: 0;
    top: 0;
    height: 34px;
    background: none;
    color: red;
    padding: 5px 5px !important;
}

.dashboard-list-box .button.gray.pending:hover {
    background-color: #61b2db;
}

.sort-by input[type="text"]::placeholder {
    font-size: 10px;
}

.reservation-dashboard>h4 {
    min-height: 70px;
}

.reservation-dashboard.dashboard-list-box .button i {
    top: 0;
}

@media(max-width: 1250px) {
    .reservation-dashboard>h4 span {
        display: none;
    }

    .reservation-dashboard #booking-date-range span,
    .reservation-dashboard .chosen-single.chosen-default {
        font-size: 13px;
    }

    .input-text-custom-filter {
        width: 80px;
    }
}

@media(max-width: 845px) {
    .reservation-dashboard>h4 {
        display: none;
    }
}

/* Search */
.spot-card-price {
    padding: 5px;
    display: flex;
    justify-content: space-between;
}

.search-button-div button {
    transition: .25s all ease;
}

.search-button-div button:hover {
    background-color: var(--theme-main-color-dark);
}

.search-button-div button#limpiar {
    background-color: var(--gray);
}

.search-button-div button#limpiar:hover {
    background-color: rgb(161, 161, 161);
}

.range-catorcena .range-output:after {
    content: "";
}

.range-catorcena .range-output:before {
    content: " $";
}

.range-mensual .range-output:after {
    content: "";
}

.range-mensual .range-output:before {
    content: " $";
}

.range-width .range-output:after {
    content: " m";
}

.range-width .range-output:before {
    content: "";
}

.range-height .range-output:after {
    content: " m";
}

.range-height .range-output:before {
    content: "";
}

.range-square_meters .range-output:after {
    content: " m²";
}

.range-square_meters .range-output:before {
    content: "";
}

.range-above_ground .range-output:after {
    content: " m";
}

.range-above_ground .range-output:before {
    content: "";
}

.range-views_per_month .range-output:after {
    content: "";
}

.range-views_per_month .range-output:before {
    content: "";
}

.map-box .listing-img-container img {
    max-height: 270px;
    object-fit: cover;
}

.panel-dropdown-content.checkboxes.categories,
.panel-dropdown-content.checkboxes.tags {
    padding: 10px;
}

.panel-dropdown-content.checkboxes.categories .tipos-container,
.panel-dropdown-content.checkboxes.tags .tags-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px 0;
}

@media (max-width: 425px) {

    .panel-dropdown-content.checkboxes.categories .tipos-container,
    .panel-dropdown-content.checkboxes.tags .tags-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Chat */
.messages-inbox {
    overflow-y: auto !important;
    padding-right: 10px;
}

.messages-inbox,
.message-content {
    max-height: 750px;
}

.messages-list {
    max-height: 475px;
    overflow: auto;
    padding-right: 10px;
}

.messages-list .message-text ul li a {
    font-weight: 500;
    transition: .25s all ease;
}

.messages-list .message-text ul li a:hover {
    opacity: .8;
}

#sendMessageForm .submit-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

#sendMessageForm .submit-container button,
#sendMessageForm .submit-container input {
    margin: 0;
}

#sendMessageForm .submit-container button {
    min-width: 100px;
}

@media(max-width:769px) {
    .message-by-headline {
        display: flex;
        flex-direction: column;
    }
}

/* Olvido su pw */
.forgot-pw {
    margin-top: 80px;
    padding: 70px 0;
}

#forgot-pw-section {
    text-align: center;
}

@media(max-width:1239px) {
    .forgot-pw {
        margin-top: 150px;
    }
}

@media(max-width:991px) {
    .forgot-pw {
        margin-top: 0;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Dashboard */

.totals-card>div {
    cursor: pointer;
}

/* Wallet */
.wallet-dashboard .booking-requests-filter {
    position: unset;
    float: unset;

    display: flex;
    flex-wrap: wrap;
    padding: 20px 20px;
    justify-content: flex-start;
    gap: 5px;
}

.reservation-dashboard.dashboard-list-box.invoices .sort-status li {
    padding: 9px 10px !important;
}

@media(min-width:1300px) {
    #custom-calendar2.daterangepicker {
        width: 650px !important;
    }
}

@media (max-width: 1250px) {
    .wallet-dashboard .input-text-custom-filter {
        width: auto;
    }
}

@media(max-width: 845px) {
    .wallet-dashboard .booking-requests-filter {
        display: none;
    }
}

/* Mis spots */
.dashboard-list-box h4.myspots-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Import spots */
.dashboard-list-box.import-list-box ul.import-details li a {
    font-weight: 500;
}

@media(max-width: 500px) {
    .dashboard-list-box h4.myspots-title {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .dashboard-list-box h4.myspots-title>div {
        margin-top: 15px;
    }
}

/* Single spot page */
.single-spot-single-image {
    display: block;
    width: 100%;
    height: 40vh;
    min-height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.spot-calculated-price {
    font-weight: 700;
    font-size: x-large;
}

.add-to-cart-button {
    outline: none;
    border: none;
    color: #444;
    font-weight: 600;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 10px 25px;
    line-height: 24px;
    margin-bottom: 9px;
    transition: 0.3s;
    cursor: pointer;
    transition: .25s all ease;
}

.add-to-cart-button:hover {
    background-color: #fafafa;
    border: 1px solid #ddd;
}

.add-to-cart-button i {
    margin-right: 5px;
}

.add-to-cart-button i.active {
    color: var(--theme-main-color);
}

/* Position relative para poder ubicar el botón encima */
.listing-slider.mfp-gallery-container,
.mfp-gallery-container {
    position: relative;
}

/* Botón flotante “Expandir foto” */
.expandir-foto-btn {
    position: absolute;
    right: 16px;
    top: 85%;
    top: 360px;
    transform: translateY(-50%);
    z-index: 5;
    padding: 8px 14px;
    border-radius: 3px;
    border: 1px solid var(--theme-main-color);
    background: #fff;
    color: var(--theme-main-color-dark);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    transition: .25s all ease;
}


/* Hover simple */
.expandir-foto-btn:hover {
    background: var(--theme-main-color);
    color: #fff;
}

/* Opción 2: dejar pasar el click al elemento de atrás */
.expandir-foto-btn.passthrough {
    pointer-events: none;
}

/* Carrito */
.carrito-list li {
    display: flex;
    justify-content: space-between;
}

.carrito-list li .individual-spot {
    width: 95%;
}

.dashboard-list-box .button.solicitar-renta {
    width: fit-content;
}

.date-picker-disabled {
    background-color: #f9f9f9 !important;
    cursor: not-allowed !important;
}

.carrito-list .cart-delete-div {
    margin-top: 10px;
    margin-left: 15px;
    width: auto;
}

.delete-cart-button {
    outline: none;
    border: none;
    color: #444;
    font-weight: 600;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 10px 13px;
    line-height: 24px;
    margin-bottom: 9px;
    transition: 0.3s;
    cursor: pointer;
    transition: .25s all ease;
}

.delete-cart-button:hover {
    background-color: #fafafa;
    border: 1px solid #ddd;
}

@media (max-width: 767px) {
    .carrito-list li {
        /* flex-direction: column-reverse; */
        flex-direction: column;
    }

    .cart-delete-div {
        margin-top: 15px;
        /* margin-bottom: 15px; */
        margin-left: 0;
    }
}

input#date-picker-general,
input.date-range-input {
    border: none;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: 600;
    height: auto;
    padding: 10px 16px;
    line-height: 30px;
    margin: 0 0 15px 0;
    position: relative;
    background-color: #fff;
    text-align: left;
    color: #888;
    transition: color 0.3s !important;
}

/* Registro page */
.registro-cards .icons-container .icon-box-2 {
    background-color: #f9f9f9;
}

.registro-cards .icons-container .icon-box-2.select-role {
    cursor: pointer;
}

@media(min-width: 1025px) {
    .select-role {
        height: 400px;
    }
}

/* aux */
#sign-in-dialog .mfp-close::after {
    height: 13px;
}

.mfp-gallery .mfp-close::after,
.mfp-gallery .mfp-close::before {
    top: -3px;
    height: 20px;
}