img.logo {
    width: 70px;
}

.bg-primary {
    background: #001526 !important;
}

.custom-card {
    border: 1px solid #043252 !important;
    background: #04325245 !important;
}

.custom-card:hover {
    border: 1px solid #084c7d !important;
    background: #084c7d45 !important;
    box-shadow: 0 0 25px #084c7d6d !important;
}

.border-bottom {
    border-bottom: 1px solid #20282e !important;
}

.card-excel {
    border:1px solid #15803d45 !important;
    background: #15803d45 !important;
}

.card-excel:hover, .account-slide {
    border:1px solid #12cd57 !important;
    background: #12cd575c !important;
    box-shadow: 0 0 25px #12cd575c !important;
}

.account-slide {
    box-shadow: none !important;
}

.account-slide:hover {
    box-shadow: 0 0 25px #12cd575c !important;

}

.custom-input {
    background: #012440;
    border: none;
    color: white !important;
}

.sidebar, .custom-bg-blur {
    background: #001f36de !important;
    backdrop-filter: blur(20px);
}

/* Transición suave para el sidebar */
#paymentSidebar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efecto de overlay */
#sidebarOverlay {
    transition: opacity 0.3s ease;
}

.filters-btn {
    display: none !important;
}

@media screen and (max-width:767px) {
    #user-info {
        display: none;
    }

    div#paymentSidebar, #bancoSidebar, #usuariosSidebar {
        width: 90%;
    }

    .filtros-cont {
        display: flex;
    }

    .filters-btn {
        display: flex !important;
    }
}

.view-password {
    top: 2rem;
    right: 1.5rem;
}

.text-yellow {
    color: #F4CE53 !important;
}

.bg-images {
    background: linear-gradient(to left, #012440c1,#012440c1), url('/static/bg-2.jpg');
    background-attachment: fixed;
    background-size: cover;
}

.sidebar {
    min-width: 400px;
}

@media screen and (max-width: 767px) {

    .principal-container {
        gap: 2rem;
    }

    .sidebar {
        min-width: 90%;
    }

    div#empleadosSidebar, div#movimentsSidebar {
        width: 100%;
    }
    
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 12px !important;
    color: black !important;
    font-weight: 700;
}

div#movimentsSidebar {
    width: 500px;
}

.ql-toolbar.ql-snow {
    border: none;
    background: #043252;
    border-radius: 8px;
    margin-bottom: 10px;
}

.custom-modal {
    overflow-y: auto;
    max-height: 80vh;
}

#mobile-header {
    top: 5rem;
}


div#sidebarContent {
    max-height: 80vh;
    overflow-y: auto;
}

.swiper-button-next svg, .swiper-button-prev svg  {
        height: 20px !important;
}