@font-face {
    font-family: 'Gontserrat';
    src: url('/fonts/Gontserrat-Regular.woff2') format('woff2'), url('/fonts/Gontserrat-Regular.woff') format('woff'), url('/fonts/Gontserrat-Regular.ttf') format('truetype'), url('/fonts/Gontserrat-Regular.eot');
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
}

body {
    font-size: 14px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn-eliminar-multi {
    top: -15px;
    right: -15px;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    position: relative;
    font-size: 14px;
}

body,
html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* GENERAL SCROLLBAR */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-button {
    background: #e70318;
    height: 5px;
}

::-webkit-scrollbar-track-piece {
    background: #fff
}

::-webkit-scrollbar-thumb {
    background: #e70318;
}

​
/* Sidebar specific settings */
.main-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}

.main-sidebar .sidebar {
    padding: 0;
    margin: 0;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item .menu-text {
    color: #e70318;
    text-transform: uppercase;
    font-weight: bold;
}

.sidebar-menu .nav-link {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 1.1rem;
    padding: 12px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 18px;
    width: 100% !important;
}

    .sidebar-menu .nav-link svg {
        font-size: 1.5rem;
        margin-right: 10px;
        color: #e70318;
    }

    .sidebar-menu .nav-link:hover, .nav-treeview .nav-link:hover {
        background-color: #e70318d4 !important;
        color: #f0f0f0 !important;
    }

        .sidebar-menu .nav-link:hover i, .sidebar-menu .nav-link:hover span,
        .nav-treeview .nav-link:hover i, .nav-treeview .nav-link:hover span {
            color: #fff !important;
        }

.nav-treeview {
    list-style: none;
    margin: 0;
}

    .nav-treeview .nav-item {
        margin-bottom: 5px;
        width: 100%;
    }

    .nav-treeview .nav-link {
        font-size: 1rem;
        padding: 8px 15px;
    }

.botones-submit {
    margin-top: 15px;
}

.nav-treeview .nav-item a {
    padding-left: 35px;
}

.mm-container {
    height: 100%;
    width: 100%;
    flex: 1;
    position: relative;
}

/*TABLAS DE TODOS LOS LIST*/
.table-action-button {
    width: 150px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

    .table-action-button .btn-editar-custom, .table-action-button .btn-eliminar-custom {
        max-width: 45px;
        width: 100%;
        padding: 0px 0px;
        font-size: 18px;
    }

.action-button {
    width: 100px;
    margin: auto;
}

/* GENERAL */
.bt2red {
    border-top: 2px solid #C60B1E;
    border: 0px;
}

.card-custom .card-header {
    background-color: #e70318;
    color: white;
}

    .card-custom .card-header b {
        color: #ffee90;
    }

.f-row-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.icheck-general input[type=checkbox] {
    accent-color: #C60B1E;
    width: 18px;
    height: 18px;
}

.btn-custom {
    background-color: #e70318;
    text-transform: uppercase;
    border: 1px solid #e70318;
    color: #fff;
}

    .btn-custom svg {
        color: #f9ffc1;
    }

    .btn-custom:hover svg {
        color: #923b43;
    }

    .btn-custom:hover, .btn-custom:active {
        background-color: #fff !important;
        color: #e70318 !important;
        text-transform: uppercase;
        border: 1px solid #e70318 !important;
        font-weight: bold;
    }

.btn-nuevo-custom {
    background-color: #038ce7;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    font-size: 13px;
    border: 2px solid #038ce7;
}

    .btn-nuevo-custom svg {
        color: #f9fff6;
    }

    .btn-nuevo-custom:hover svg {
        color: #198754;
    }

    .btn-nuevo-custom:hover, .btn-nuevo-custom:active {
        background-color: #038ce70f !important;
        color: #00497a !important;
        text-transform: uppercase;
        border: 2px solid #038ce70f !important;
        font-weight: bold;
    }

.btn-editar-custom, .btn-buscar-custom {
    background-color: #0b9b69;
    color: #fff;
    font-weight: bold;
    border: 2px solid #0b9b69;
    text-transform: uppercase;
}

    .btn-editar-custom:hover, .btn-buscar-custom:hover {
        background-color: #fff;
        color: #0b9b69;
    }

    .btn-editar-custom i, .btn-buscar-custom svg {
        color: #fff;
    }

    .btn-editar-custom:hover i, .btn-buscar-custom:hover svg {
        color: #198754;
    }

    .btn-editar-custom:hover, .btn-editar-custom:active,
    .btn-buscar-custom:hover, .btn-buscar-custom:active {
        background-color: #eafff5 !important;
        border: 2px solid #0b9b69 !important;
        text-decoration: none;
        color: #0b9b69 !important;
    }
/* Botón cancelar */
a.btn-cancelar-custom {
    display: inline-block;
    background-color: #f6a4aa;
    color: #7f1318;
    font-weight: bold;
    border: 2px solid #f6a4aa;
    text-transform: uppercase;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

    a.btn-cancelar-custom svg {
        color: #8b0b11;
        margin-right: 5px;
    }

    a.btn-cancelar-custom:hover svg {
        color: #a7131a;
    }

    a.btn-cancelar-custom:hover,
    a.btn-cancelar-custom:active,
    a.btn-cancelar-custom:focus {
        background-color: #ffd0d3 !important;
        color: #a7131a !important;
        border: 2px solid #ffd0d3 !important;
        text-decoration: none;
    }

.btn-eliminar-custom {
    background-color: #e70318;
    color: #fff;
    text-transform: uppercase;
    border: 2px solid #e70318;
    font-weight: bold;
}

    .btn-eliminar-custom svg {
        color: #fff;
    }

    .btn-eliminar-custom:hover svg {
        color: #e70318;
    }

    .btn-eliminar-custom:hover, .btn-eliminar-custom:active {
        background-color: #fff !important;
        color: #e70318 !important;
        text-transform: uppercase;
        border: 2px solid #e70318 !important;
        font-weight: bold;
    }

.btn-guardar-custom {
    background-color: #0b9b69;
    color: #fff;
    font-weight: bold;
    border: 2px solid #0b9b69;
    text-transform: uppercase;
}

    .btn-guardar-custom svg {
        color: #fff;
        padding-right: 4px;
    }

    .btn-guardar-custom:hover svg {
        color: #0b9b69;
    }

    .btn-guardar-custom:hover {
        background-color: #fff;
        color: #0b9b69;
        border: 2px solid #0b9b69;
    }

.btn-danger-custom {
    background-color: #fff;
    color: #0b9b69;
    text-transform: uppercase;
    border: 2px solid #0b9b69;
    font-weight: bold;
    padding: 2px 6px;
}

    .btn-danger-custom svg {
        color: #3b3b3b;
    }

    .btn-danger-custom:hover svg {
        color: #890000;
    }

    .btn-danger-custom:hover, .btn-danger-custom:active {
        background-color: #ffd6d6 !important;
        color: #890000 !important;
        text-transform: uppercase;
        border: 2px solid #ffd6d6 !important;
        font-weight: bold;
    }

.btn-aviso-custom {
    background-color: #ff95a9;
    color: #000000;
    text-transform: uppercase;
    border: 2px solid #ff9292;
    font-weight: bold;
    padding: 2px 6px;
    width: 100%;
    border-radius: 25px;
}

    .btn-aviso-custom svg {
        color: #3b3b3b;
    }

    .btn-aviso-custom:hover svg {
        color: #890000;
    }

    .btn-aviso-custom:hover, .btn-aviso-custom:active {
        background-color: #ffd6d6 !important;
        color: #890000 !important;
        text-transform: uppercase;
        border: 2px solid #ffd6d6 !important;
        font-weight: bold;
    }

.btn-custom-invitado {
    background-color: #fff;
    color: #0087d7;
    text-transform: uppercase;
    border: 2px solid #0087d7;
    padding: 5px 10px;
}

    .btn-custom-invitado:hover, .btn-custom-invitado:active {
        background-color: #0087d7 !important;
        color: #fff !important;
        text-transform: uppercase;
        border: 2px solid #0087d7 !important;
    }

.btn-outline-lightgray {
    border: 1px solid #ccc;
    color: grey;
    background-color: #fff;
    transition: background-color 0.3s;
}

    .btn-outline-lightgray:hover {
        background-color: #dddddd;
    }

.custom-invitado {
    line-height: 16px;
    color: #e70318a8;
    margin-bottom: 5px;
    font-size: 14px;
}

.custom-login-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.custom-post-login {
    width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    .custom-post-login .form-group {
        width: 90%;
    }

    .custom-post-login input[type="text"] {
        /*font-size: 12px !important;*/
    }

.login-separate {
    background-color: #dddddd;
    height: 2px;
    width: 100%;
    margin-top: 10px;
}

.custom-login-card .card-body .input-group {
    width: 90%;
}

.custom-post-login .row {
    width: 100%;
}

.btn-lite {
    padding: 6px 10px !important;
}

.btn-custom-rojo {
    background-color: #e70318;
    color: white;
    align-items: center;
    cursor: pointer;
    padding: 7px 15px;
    gap: 5px;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid #e70318;
    text-decoration: none;
    border-radius: 25px;
}

    .btn-custom-rojo:hover, .btn-custom-rojo:active {
        background-color: #fff !important;
        color: #e70318 !important;
        text-transform: uppercase;
        border: 2px solid #e70318;
    }

.btn-custom-verde {
    background-color: #0b9b69;
    text-transform: uppercase;
    border: 2px solid #0b9b69;
    align-items: center;
    cursor: pointer;
    padding: 7px 15px;
    gap: 5px;
    color: #fff;
    width: auto;
    font-weight: bold;
}

    .btn-custom-verde:hover, .btn-custom-verde:active {
        background-color: #fff !important;
        color: #0b9b69 !important;
        text-transform: uppercase;
        border: 2px solid #0b9b69 !important;
        font-weight: bold;
        text-shadow: none;
    }

.btn-custom-riac {
    background-color: #a7d40ea3;
    text-transform: uppercase;
    border: 2px solid #a7d40ea3;
    align-items: center;
    cursor: pointer;
    padding: 7px 15px;
    gap: 5px;
    color: #000000;
    width: auto;
    font-weight: bold;
    font-size: 16px;
}

    .btn-custom-riac:hover, .btn-custom-riac:active {
        border: 2px solid #a7d40ea3;
        background-color: #fff !important;
        color: #000 !important;
        text-shadow: none;
    }

.btn-custom-negro {
    background-color: #000;
    text-transform: uppercase;
    border: 2px solid #000;
    align-items: center;
    cursor: pointer;
    padding: 7px 15px;
    gap: 5px;
    color: #fff;
    width: auto;
    font-weight: bold;
    border: 2px solid #000;
}

.btn-centro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.btn-custom-negro:hover, .btn-custom-negro:active {
    background-color: #fff;
    color: #000 !important;
    text-transform: uppercase;
    border: 2px solid #000;
}

.btn-iniciar-sesion {
    border-radius: 0px !important;
    padding: 2px 10px !important;
}
/* FINEUPLOADER CUSTOM */
.qq-uploader {
    min-height: 100px !important;
    max-height: 120px !important;
    padding: 20px !important;
    display: flex !important;
    justify-content: center !important;
}

.qq-upload-button {
    padding: 5px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 200px !important;
    font-size: 13px;
    background-color: #0b9b69 !important;
    color: white !important;
    border: 1px solid #0b9b69 !important;
}

.qq-uploader-selector {
    background-color: #cee6de;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    border: 2px dashed #0b9b69;
    border-radius: 10px;
    min-height: 100px;
}

.qq-upload-list-selector {
    display: none;
}

.qq-uploader-selector, .qq-upload-button-selector {
    width: 100%;
    height: 100px;
    text-align: center;
}

    .qq-upload-button-selector:first-child {
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: uppercase;
        font-weight: bold;
        color: #494949;
    }

.uploaded-file-preview {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 15px;
    padding: 5px 0px 5px 10px;
}

    .uploaded-file-preview .far {
        font-size: 17px;
        color: purple;
        padding-right: 4px;
    }

    .uploaded-file-preview span {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .uploaded-file-preview p {
        margin: 0;
        padding: 0;
    }

.fu-content > div:first-of-type {
    padding-bottom: 10px;
}

/* CHAT MENSAJES AVISOS CONVERSACIONES */
.pp-chats-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 10px;
}

.pp-chats {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 90%;
    gap: 10px;
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
}

.pp-chats-title {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #004d00;
}

.pp-chats-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 85%;
    padding: 15px 0px;
    font-size: 15px;
    line-height: 18px;
}

.btn-enter-chat {
    font-size: 20px;
}

.pp-chat-card {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 15px;
    padding: 15px 10px;
    background-color: #d2ffd2;
    border-radius: 4px;
    border: 1px solid #6be96b;
    box-shadow: 1px 2px 3px #d5d5d5;
    cursor: pointer;
    transition: all 0.3s;
}

    .pp-chat-card:hover {
        background-color: #92ff92;
        border: 1px solid #437d43;
    }

.pp-chat-status {
    background-color: green;
    width: 10px;
    height: 10px;
    border-radius: 33px;
}

.pp-chat-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.pp-chat-usuario {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: gray;
}

.pp-chat-last {
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    margin: 0;
    text-align: start;
}

.pp-chat-date {
    color: #ffa706;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
}

.pp-chat-contacto {
    color: #232323;
}

.chat-popup {
    border-radius: 10px;
    padding: 20px 10px;
    width: 100%;
    margin: 0 auto;
    max-width: 90%;
}

.chat-header {
    background-color: #a2a2a2;
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-transform: uppercase;
    font-weight: bold;
    gap: 5px;
    padding: 0px 20px;
    margin-top: 10px;
    color: #fff;
}

    .chat-header svg {
        font-size: 20px;
    }

.chat-messages {
    height: 300px;
    overflow-y: auto;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    background-color: white;
    scroll-behavior: smooth;
    border-left: 1px solid #a2a2a2;
    border-right: 1px solid #a2a2a2;
}

.chat-no-messages {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.chat-bubble {
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 15px;
    display: block;
    max-width: fit-content;
    word-wrap: break-word;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
}

.chat-aviso-titulo {
    padding-top: 20px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

.bubble-emisor {
    background-color: #daf8e3;
    color: #2c5f2d;
    align-self: flex-end;
    margin-left: auto;
    text-align: right;
    align-items: flex-end !important;
}

.bubble-receptor {
    background-color: #f0f0f0;
    color: #555;
    align-self: flex-start;
    margin-right: auto;
    text-align: left;
    align-items: flex-start !important;
}

.bur-name {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    color: #003300;
}

.bur-mes {
    padding: 2px 0px;
    color: black;
}

.bur-date {
    font-size: 10px;
    font-weight: normal;
    color: gray;
    width: 100%;
    text-align: end;
}

.chat-input {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 10px 5px;
    background-color: #c6c6c6;
}

.btnEnviarMensaje {
    width: 50px !important;
    height: 45px;
    box-sizing: border-box;
    padding: 4px 10px;
    margin: 7px;
    background-color: #0b9b69;
    color: #fff;
    font-weight: bold;
    border: 2px solid #0b9b69;
}

    .btnEnviarMensaje:hover {
        background-color: #fff;
        color: #0b9b69;
    }

.chat-input textarea {
    resize: none;
    height: 60px;
}

/* LOGIN/REGISTRO */
.login-mascomad {
    background-color: #e7031833 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh !important;
}

.loginUpperImg {
    max-width: 100px;
}

.caja-login, .caja-registro {
    width: 360px;
}

.caja-login-img {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 90%;
}

.login-border-box {
    border-radius: 10px 0px 0px 10px !important;
}

    .login-border-box .fas {
        color: #e70318;
        font-size: 20px;
    }

.login-form-control {
    border-radius: 0px 10px 10px 0px !important;
}

.login-input-group-text {
    border: 0px;
    background-color: #e7031814;
}

/* BACKOFFICE */
.navbar-nav .fa-bars {
    font-size: 25px;
    margin-left: 15px;
}

.be-navbar {
    background-color: #e70318;
}

    .be-navbar .nav-link, .be-navbar .nav-link svg {
        color: #fff;
    }

.sidebar-collapse .be-user-text {
    font-size: 20px;
}

.sidebar-collapse .be-user-welcome {
    display: none !important;
}

.sidebar-collapse .be-user-div {
    flex-direction: row !important;
    padding: 12px 8px;
    gap: 18px;
    justify-content: flex-start !important;
    align-items: center !important;
}

.be-user-div {
    width: 100%;
    background-color: #e7031833;
    margin-top: 10px;
    height: max-content;
    padding: 10px 30px;
    gap: 2px;
    border-left: 5px solid #e70318;
}

.be-user-icon {
    background-color: white;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 26px;
    border: 3px solid #960a17;
}

    .be-user-icon img {
        width: 35px;
        height: 35px;
        object-fit: contain;
        object-position: center;
    }

    .be-user-icon svg {
        font-size: 20px;
    }

.be-user-welcome {
    font-size: 14px;
    font-weight: normal;
    color: #696969;
}

.be-user-text {
    font-size: 22px;
    text-transform: uppercase;
    font-weight: bold;
    color: black;
}

.be-regular-container {
    padding: 10px 30px;
}

    .be-regular-container h4 {
        text-transform: uppercase;
        font-weight: bold;
        font-size: 24px;
    }

.be-mascomad-bg {
    background-image: url('/images/bg-mascomad.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-color: #d9e3fe;
    position: relative;
}

/* TABLAS GENERAL */
.dataTable {
    width: 100% !important;
}

.table > thead tr th {
    background-color: #e70318;
    vertical-align: middle;
}

.custom-table .dataTables_processing div div {
    background: #E70318 !important;
}

.custom-table tbody tr {
    text-align: center;
}

table.dataTable thead th {
    color: #fff;
}

.dataTables_processing div div {
    background: #e70318 !important;
}

table.dataTable td {
    border-bottom: 0px !important;
}

.be-acciones {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.dt-icon {
    font-size: 22px;
}

svg.fas.fa-check.dt-icon {
    color: green;
}

svg.fas.fa-times.dt-icon {
    color: #e70318;
}

.custom-check {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

    .custom-check input[type=checkbox] {
        width: 20px;
        height: 20px;
        accent-color: #e70318;
    }

.custom-check-center {
    align-items: center;
    margin-bottom: 12px;
}

/* FILTROS */
.card-filters {
    padding: 20px 30px;
}

.filter-buscar {
    padding: 10px;
    margin-top: 10px;
}

/* FIELDS CUSTOMS */
.tinfoa-nombre {
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
}

.tinfoa-tipo {
    font-size: 12px;
    text-transform: uppercase;
    color: #307924;
    font-weight: bold;
}

.tinfoa-prot {
    font-size: 14px;
    color: #038ce7;
}

.fa-venus, .fa-mars {
    font-size: 17px;
    color: #ff00c0;
}

.tam-texto {
    margin-left: 4px;
    font-weight: bold;
    color: #168623;
}

.size-on {
    color: #168623;
}

.size-off {
    color: #c5c5c5;
}

.tinfo-check, .tinfo-ready, .tinfo-ok {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.tinfo-check {
    color: #d06400;
}

.tinfo-ready {
    color: #036505;
}

.tinfo-ok {
    color: #d06400;
}

    .tinfo-check svg, .tinfo-ready svg, .tinfo-ok svg {
        font-size: 18px;
        opacity: 0.8;
    }

.tinfoa-sol {
    font-size: 14px;
    color: #888383;
}

.sol-status {
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.sol-current {
    color: #d06400;
    font-weight: bold;
}

.sol-ok {
    color: green;
    font-weight: bold;
}

.sol-ko {
    color: #e70318;
    font-weight: bold;
}

.reactive-tooltip {
    position: relative;
    cursor: pointer;
    z-index: 1;
}

    .reactive-tooltip::after {
        content: attr(tooltip);
        position: absolute;
        top: 100%;
        left: 5%;
        transform: translateX(0%);
        background-color: #333;
        color: #fff;
        padding: 5px 10px;
        border-radius: 4px;
        white-space: normal;
        font-size: 12px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease-in-out;
        text-transform: initial;
        max-width: 300px;
        word-break: break-word;
        width: max-content;
        text-align: start;
        z-index: 1;
    }

    .reactive-tooltip:hover::after {
        opacity: 1;
    }

.be-entrena {
    font-weight: bold;
    text-transform: uppercase;
    color: #637c8c;
}

    .be-entrena svg {
        font-size: 20px;
        opacity: 0.6;
        color: #042d48;
    }

/* GRID HELPER */
.custom-thead {
    display: none;
}

.custom-tbody .odd td, .custom-tbody .even td {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
}

.custom-tbody .container {
    padding: 0px;
}

.custom-tbody .col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
}

.fichaAnimal {
    padding: 10px;
    border: 2px solid #038ce7;
    gap: 7px;
    background-color: #fff2f2;
}

/******************* 
    ESTILOS FRONT 
********************/
.fa-home {
    color: #e70318;
}

.mm-header {
    width: 100%;
    border-bottom: 4px solid #e7162663;
    display: flex;
    justify-content: center;
}
.mm-header, .mm-header-left, .mm-header-right {
    height: 85px;
}
.mm-header-image, .mm-header-imagemv {
    object-fit: contain;
    object-position: center;
    width: 100%;
    max-width: 170px;
}
.mm-navbar {
    max-width: 1320px;
}
.mm-navbar-mv {
    justify-content: space-between;
    padding: 0px 25px;
}
.mm-navbar-nav {
    width: 100%;
    list-style: none;
    margin: 0;
    gap: 15px;
}
.mm-nav-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.mm-navbar-li {
    text-decoration: none;
    font-size: 15px;
    color: #080707b5;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    line-height: 20px;
}

.mm-item-big {
    font-size: 18px;
}

.mm-navbar-li:hover {
    color: #e70318;
    transform: scale(1.05);
}

.mm-collmenu-btn {
    display: none !important;
}

.mm-collmenu-btn {
    border: 0px;
    font-size: 30px;
    color: #e70318;
    cursor: pointer;
}
/*.mm-title-decorator {
    width: 100%;
    height: 100%;
    --s: 8px;
    --c: #0000, #e70318 0.5deg 119.5deg, #0000 120deg;
    --g1: conic-gradient(from 60deg at 56.25% calc(425% / 6), var(--c));
    --g2: conic-gradient(from 180deg at 43.75% calc(425% / 6), var(--c));
    --g3: conic-gradient(from -60deg at 50% calc(175% / 12), var(--c));
    background: var(--g1), var(--g1) var(--s) calc(1.73* var(--s)), var(--g2), var(--g2) var(--s) calc(1.73* var(--s)), var(--g3) var(--s) 0, var(--g3) 0 calc(1.73* var(--s)) #a10000;
    background-size: calc(2 * var(--s)) calc(3.46 * var(--s));
    padding: 20px 0px;
    color: white;
}*/

.mm-title-decorator {
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    background-size: 100px 100px;
    background: #e70318 url('/images/fondoTitle.png') repeat;
    min-height: 60px;
    color: white;
}

.mm-page-title {
    font-size: clamp(18px, 4vw, 26px);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    margin: auto;
    white-space: nowrap;
    background: #f00a;
    padding: 7px 10px;
    border-radius: 0;
}

.front-grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 50px;
}

    .front-grid .dataTables_paginate {
        width: 100%;
        max-width: 1320px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin-top: 10px;
    }

        .front-grid .dataTables_paginate .previous,
        .front-grid .dataTables_paginate .next {
            text-transform: uppercase;
            font-weight: 550;
        }

        .front-grid .dataTables_paginate .disabled:hover {
            background: transparent !important;
        }

    .front-grid .paginate_button {
        border: none !important;
        border-radius: 20px !important;
        background-color: transparent !important;
    }

        .front-grid .paginate_button.current {
            border-radius: 20px !important;
            /*color: red !important;*/
            border: none !important;
            background-color: #e7031840 !important;
        }

        .front-grid .paginate_button:hover {
            border-radius: 20px;
            background-color: gray !important;
            background: #878787 !important;
            border: none !important;
        }

.custom-grid, .dataTables_wrapper {
    max-width: 1320px;
    width: 100%;
}

.mm-fullRow .odd, .mm-fullRow .even {
    width: 100%;
}

.dataTables_empty {
    margin: 10px 0px 30px 0px;
}

/* HOME COMPONENTES */
.portada {
    /*gap: 30px;*/
}

.mm-component {
    width: 100%;
    /*margin: 30px 0px !important;*/
}

.hua-container, .hun-container {
    width: 100%;
    max-width: 1320px !important;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    grid-auto-rows: minmax(250px, auto);
}

.hua-container {
    margin: 20px 0px 20px 0px !important;
}

.hun-container {
    margin: 30px 0px 30px 0px !important;
}

.hua-component {
    /*background-color: red;*/
    position: relative;
    overflow: hidden;
}

.hun-component {
    /*background-color: green;*/
    position: relative;
    overflow: hidden;
    margin-top: 25px;
}

.hua-component::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 91%);*/
    background-color: #fff0d9;
}

.hun-component::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*clip-path: polygon(0 0%, 100% 10%, 100% 90%, 0 100%);*/
    background-color: #e7031817;
}

.hua-intro {
    padding: 5px 15px;
    margin-bottom: 10px;
}

.hun-container .hua-grid {
    z-index: 1;
    gap: 15px 20px;
    justify-content: center;
    margin-top: 10px;
}

.hua-grid {
    z-index: 1;
}

.hua-item {
    padding: 10px 20px;
    height: max-content;
    position: relative;
}

.hua-body {
    max-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 0px;
    background-color: transparent;
}

.hua-info {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.hua-image {
    border-radius: 15px;
    width: 100%;
    object-position: center;
    object-fit: cover !important;
    height: 300px;
}

.hua-nombre, .hua-edad {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 1;
    text-align: end;
}

.hua-nombre {
    font-size: 2rem !important;
    margin-bottom: 0;
}

.hua-edad {
    font-size: 1rem !important;
}

.mm-notificaciones {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
/* GENERAL: Paw title */
.paw-title {
    font-size: 35px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: max-content;
    text-align: center;
    margin: auto;
    white-space: nowrap;
    padding-top: 13px;
    margin-bottom: -8px;
    position: relative;
}
.paw-title2 {
    font-size: 20px;
    font-weight: 550;
    letter-spacing: 0px;
    text-transform: uppercase;
    width: max-content;
    text-align: center;
    margin: auto;
    white-space: nowrap;
    padding-top: 0px;
    margin-bottom: 10px;
    position: relative;
}

.hun-container .paw-title {
    padding-top: 10px;
    padding-bottom: 10px;
}

.paw-title svg {
    position: absolute;
    top: 0px;
    right: -15px;
    font-size: 22px;
    transform: rotate(325deg);
    color: #e70318;
}

.paw-title2 svg {
    position: absolute;
    top: -8px;
    right: -11px;
    font-size: 15px;
    transform: rotate(325deg);
    color: #e70318;
}

.hun-container .paw-title svg {
    top: -2px !important;
    right: -17px !important;
}

.paw-description {
    margin: 10px 20px !important;
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
    color: #8A3B3B !important;
    z-index: 1;
}

.fe-link-container {
    z-index: 1;
}
/* Accordion */
.mm-accordion {
    width: 100%;
    padding: 20px;
    max-width: 1320px;
}

.accordion-body {
    padding: 10px 10px 5px 10px !important;
}

.mm-accordion .accordion-item {
    border: 0;
}

.mm-accordion .accordion-button {
    border-bottom: 2px solid #97adff36;
    text-transform: uppercase;
    font-weight: bold;
    height: 35px;
    padding: 5px;
}

    .mm-accordion .accordion-button:not(.collapsed) {
        background-color: transparent !important;
    }

.mm-accordion .accordion-collapse {
    background-color: #f2f2f2;
    /*border-left: 1px solid #b1beebab;
        border-right: 1px solid #b1beebab;
        border-bottom: 1px solid #b1beebab;*/
}

.mm-accordion .accordion-button:focus {
    box-shadow: none;
}

.mm-fullRow {
    width: 100%;
}

.page-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 15px 0px 0px 0px;
}

    .page-buttons .btn-buscar-custom {
        max-width: 200px;
    }

.filterApplied {
    padding-left: 10px;
    background-color: #737477;
    color: white;
    padding: 5px 10px;
    border-radius: 25px;
    margin-left: 10px;
}

.page-filters select, .page-filters input {
    margin-bottom: 12px;
}

.page-filters .slider {
    background-color: #f2f2f2;
}

.card {
    cursor: pointer;
}

.blogPostGrid .card, .aprende-posts .card {
    border: 2px solid #ffaeb6;
    text-decoration: none;
}

.blogPostGrid .card-body, .aprende-posts .card-body {
    border-top: 6px solid #e70318;
}

.blogPostGrid .card-blog-title, .aprende-posts .card-blog-title {
    font-size: 18px !important;
    line-height: 18px !important;
}

.blogPostGrid .card-blog-body, .aprende-posts .card-blog-title {
    font-size: 14px !important;
    line-height: 16px !important;
}

.modal-open, .modalnpr {
    padding-right: 0px !important;
}

.modalCookie {
    background-color: #bdbdbda6;
}

.aviso-pills {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 5px;
}

.pill {
    background-color: #a50a0a2b;
    margin: 0px !important;
    padding: 3px 10px;
    border-radius: 0px;
    color: black;
    font-weight: 550;
}
/* HOME: Home Swiper*/
.homeSwiper {
    width: 100%;
    max-height: 540px;
    height: auto;
    overflow: hidden;
    margin: 10px 0px 30px 0px;
    max-width: 1320px;
}

    .homeSwiper .homeSlide {
        width: 100%;
        max-height: 500px;
    }

    .homeSwiper .swiper-slide img {
        width: 100%;
        object-fit: contain;
        object-position: center;
    }

.swiper-over {
    position: relative;
}

.swiper-end {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0px 10px;
    background-color: #e70318b8;
    border-radius: 40px 0px 0px 40px;
    width: 6%;
    height: 100%;
}

.swiper-info {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    padding: 0px 30px;
    background-color: #e70318b8;
    color: white;
    border-radius: 0px 40px 40px 0px;
    align-items: start;
    max-width: 30%;
}

    .swiper-info h1 {
        font-size: 35px;
        color: #ffffff;
        text-shadow: 0px 2px 4px rgb(0 0 0 / 80%);
        margin-bottom: 10px;
        text-align: start;
    }

    .swiper-info p {
        font-size: 18px;
        color: #ffffff;
        text-shadow: 0px 2px 4px rgb(0 0 0 / 80%);
        max-width: 300px;
        margin: 0;
        text-align: start;
    }

.slider-decorator {
    width: 50px !important;
    filter: drop-shadow(1px 1px 1px #000);
    margin-bottom: 5px;
}

.fa-check {
    color: #0b9b69;
}

.btn-custom-negro .fa-xmark {
    color: white;
}

.fa-xmark {
    color: #e70318;
}
/* Home ultimas noticias */
.hun-component {
    gap: 10px;
    max-width: 100%;
    margin-bottom: 25px;
}

.hun-container {
    width: 100%;
    margin-top: 20px;
}

.hun-card {
    width: 30%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background-color: rgb(255, 255, 255);
    height: 320px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    padding: 0px;
}

    .hun-card:hover {
        transform: translateY(-5px) scale(1.03);
        transition: transform 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease;
        box-shadow: 0 6px 15px -2px rgba(0, 0, 0, 0.2), 0 4px 8px -2px rgba(0, 0, 0, 0.1);
        background-color: rgb(245, 245, 245);
    }

        .hun-card:hover .hun-title {
            color: #e70318;
        }

    .hun-card img {
        transition: transform 0.3s ease;
        width: 100%;
        height: auto;
    }

    .hun-card:hover img {
        transform: scale(1.05);
    }

    .hun-card:hover .hun-tag {
        background-color: rgb(255 255 255);
        /*color: #e70318;*/
    }

.hun-content {
    margin-top: 1rem;
}

.hun-header {
    position: relative;
}

.hun-image {
    position: relative;
    overflow: hidden;
    height: 150px;
}

    .hun-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.hun-tag {
    position: absolute;
    top: 15px;
    left: 0;
    text-transform: capitalize;
    background-color: rgb(231 3 24);
    padding: 2px 8px;
    border-radius: 0px 4px 4px 0px;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
}

.hun-date {
    display: flex;
    font-size: 9px;
    line-height: 1rem;
    align-items: center;
    padding: 2px 5px;
    justify-content: flex-end;
    text-transform: uppercase;
}

.hun-card:hover .hun-date {
    padding: 4px 5px 0px 5px;
}

.hun-info {
    padding: 10px;
}

.hun-title {
    display: block;
    font-size: 1.25rem;
    line-height: 1.35rem;
    font-weight: 600;
    padding: 5px 0px;
}

.hun-description {
    line-height: 1.375;
}

.fe-link {
    text-decoration: none;
    background-color: #e70318b5;
    border: 2px solid #e70318b5;
    padding: 7px 25px;
    border-radius: 25px;
    color: white;
    font-weight: bold;
    font-size: 16px;
    margin-top: 5px;
}

    .fe-link:hover {
        color: #e70318b5;
        background-color: white;
    }

/* CARDS */
.custom-tbody {
    padding: 0px 15px;
}

.custom-modal-size {
    height: auto;
}

    .custom-modal-size .modal-content {
        height: max-content;
    }

.custom-modal-header, .custom-modal-footer {
    display: none;
}

.custom-modal-body {
    padding: 0px 0px 20px 0px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    position: relative;
    overflow: auto;
    background-color: #fff;
}

    .custom-modal-body .btn-close {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 22px;
    }

.animal-card {
    max-width: 540px;
    width: 95%;
    text-decoration: none;
}

    .animal-card .card-title {
        font-weight: bold;
        font-size: 22px !important;
        color: #000;
    }

    .animal-card .card-body {
        font-size: 14px;
        line-height: 18px;
        color: #595858;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 10px 10px 10px 0px;
        position: relative;
    }

.animal-card-edad {
    width: 100%;
    text-align: end;
    text-transform: uppercase;
}

    .animal-card-edad small {
        font-weight: bold;
        color: #0b9b69 !important;
        text-align: end;
    }

.animal-card-img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    /*max-height: 210px;*/
    min-height: 245px;
}

.ac-adoptado {
    position: relative;
    background-color: #e7d0f5;
}

.icon-adoptado {
    position: absolute;
    top: 0;
    right: 6px;
    background-color: #ffe4c4;
    padding: 5px;
    box-shadow: 1px 2px 0px #f19e3c;
    cursor: pointer;
    z-index: 1;
}

    .icon-adoptado svg {
        color: #e70318;
        font-size: 20px;
    }

.card-blog-title {
    font-size: 20px;
    line-height: 20px;
    padding-top: 6px;
    font-weight: bold;
    color: #232323;
}

.card-blog-body {
    color: #454545;
    font-size: 15px;
    line-height: 17px;
}

.card-blog-by {
    color: #616161;
    font-size: 12px;
}

.card-blog-tags {
    color: #a7a4a4;
    font-size: 11px;
    text-align: center;
    word-break: break-word;
    line-height: 12px;
    padding: 0;
    margin: 0;
}

.card-blog-byname {
    color: #e70318;
    font-weight: bold;
    text-transform: uppercase;
}

.card-blog-category {
    text-transform: uppercase;
    background-color: #204aa9;
    color: #ffffff;
    padding: 0px 7px;
    font-size: 12px;
    /*border-radius: 4px;*/
}

.card-img-top {
    min-height: 260px;
    object-fit: cover;
    max-height: 260px;
}

.card-img-blogpost {
    object-fit: cover !important;
}

.imgProte {
    position: absolute;
    max-width: 50px;
    max-height: 50px;
    border-radius: 49px;
    top: 2px;
    right: 2px;
    border: 2px solid #b3b3b3;
    overflow: hidden;
    background-color: transparent;
}

.ac-adoptado .imgProte {
    display: none;
}

.imgProte img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.pu-logo-prote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 5px 0px;
}

    .pu-logo-prote img {
        width: 100px;
        height: 100px;
        padding: 0px;
        object-fit: contain;
        object-position: center;
    }

.animal-card-protectora {
    color: #d54956;
    font-weight: bold;
}

    .animal-card-protectora svg {
        color: #e70318;
        font-size: 14px;
        padding-right: 3px;
    }

.proc-card-body {
    min-width: 160px;
}

.proc-card-footer {
    display: none;
}

.animal-grid-ya {
    margin-top: 20px;
}

.pu-blog-image, .pu-animal-image, .pu-clinica-image, .pu-protectora-image {
    width: 100%;
    height: max-content;
    padding-top: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    max-height: 385px;
}

    .pu-blog-image::before, .pu-animal-image::before, .pu-clinica-image::before, .pu-protectora-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 300px;
        clip-path: polygon(0 0, 100% 0, 100% 200px, 0 280px);
    }

    .pu-blog-image::before, .pu-animal-image::before {
        background: #e70318;
    }

    .pu-clinica-image::before {
        background: #e70318;
    }

    .pu-protectora-image::before {
        background: #e70318;
    }

.pu-animalestado-disponible::before {
    background: #0b9b69;
}

.pu-animalestado-adoptado::before {
    background: #4900d9;
}

.pu-animalestado-solicitado::before {
    background: #b35504;
}

.pu-blog-image img, .pu-animal-image img, .pu-clinica-image img, .pu-protectora-image img {
    object-fit: contain;
    position: relative;
    width: 85%;
    height: max-content;
    max-height: 350px;
    filter: drop-shadow(2px 2px 5px #000000);
    padding-bottom: 10px;
}

.pu-blog-title {
    font-weight: bold;
    font-size: 2rem;
    text-align: start;
    width: 95%;
    text-align: center;
    line-height: 30px;
    padding: 15px 0px 10px 0px;
    z-index: 1;
    color: #e70318;
}

.pu-loc-data {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 25px;
    padding-bottom: 10px;
}

.pu-blog-category {
    text-transform: uppercase;
    background-color: #96b100;
    color: #ffffff;
    padding: 1px 7px;
    font-size: 12px;
    border-radius: 4px;
}

.pu-blog-fecha {
    font-size: 12px;
    color: gray;
}

.pu-blog-body {
    width: 85%;
    font-size: 16px;
    padding: 10px 0px 20px 0px;
    text-align: justify;
}

    .pu-blog-body ul {
        list-style: none;
    }

    .pu-blog-body ol {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 28px;
        unicode-bidi: isolate;
        list-style: none;
    }

        .pu-blog-body ol li, .pu-blog-body ul li {
            text-align: start;
            padding-left: 5px;
        }

            .pu-blog-body ul li:before, .pu-blog-body ol li:before {
                content: "\f1b0";
                font-family: FontAwesome;
                display: inline-block;
                margin-right: 5px;
                width: 1rem;
                color: #bf0d0d;
            }

.pu-lista-datos {
    padding-left: 0px;
}

.pu-animal-section, .pu-clinica-section {
    padding: 5px 0px;
    font-size: 18px;
    color: #e70318;
    text-align: left;
    border-bottom: 3px solid #e70318;
    font-weight: bold;
}

.pu-clinica-section {
    width: 90%;
}

.pu-clinica-servicios {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 85%;
    gap: 5px 10px;
    padding-top: 10px;
    margin-bottom: 15px;
}

.pu-clinica-servicio {
    background-color: #60ad19;
    padding: 5px 10px;
    border-radius: 8px;
    color: white;
    text-transform: uppercase;
}

.pu24h {
    color: white;
    font-weight: bold;
    background-color: #730101;
}

    .pu24h svg {
        margin-right: 8px;
        font-size: 16px;
    }

.pu-loc-clinicadata, .pu-blog-direccion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 25px;
}

.pu-clinica-datos {
    width: 85%;
    padding-left: 30px;
}

/*.pu-animal-EA {
    font-weight: bold;
    background-color: #3bd741;
    padding: 5px 100px;
    border-radius: 20px;
    position: fixed;
    top: 55px;
    z-index: 2;
    width: fit-content;
    max-width: 250px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}*/
.pu-animal-EA {
    position: absolute;
    bottom: 15px;
    padding: 5px 12px;
    background: rgba(0,0,0,0.6);
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 4px;
    width: auto;
    text-align: center;
}

.pu-animal-disponible {
    background-color: #0b9b69;
    border: 3px solid #0b9b69;
    color: #fff;
}

.pu-animal-solicitado {
    background-color: #f1ac71;
    border: 3px solid #b35504;
    color: #000000;
}

.pu-animal-adoptado {
    background-color: #ae85ff;
    border: 3px solid #4900d9;
    color: white;
}

.pu-animal-disponible svg {
    padding-right: 5px;
    color: #fff;
}

.pu-animal-solicitado svg {
    padding-right: 5px;
    color: #b35504;
}

.pu-animal-adoptado svg {
    padding-right: 5px;
    color: #4900d9;
}

.pu-animal-title {
    font-size: 30px;
    font-weight: bold;
}

.clinica {
    width: 100%;
    text-decoration: none;
}
.clinica:hover {
    color: initial !important;
}

    .clinica .card-img-top {
        object-fit: contain !important;
    }

.card-protec-title, .card-clinica-title {
    font-size: 20px;
    font-weight: bold;
}

.pu-animalloc-data {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding-bottom: 10px;
}

.pu-animal-datos, .pu-animal-comentarios {
    width: 90%;
    padding: 5px 0px;
}

.pu-animal-datoitem {
    font-size: 17px;
    color: #e70318;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.pu-animal-datotexto {
    text-transform: initial;
    font-weight: normal;
    color: #1c1c1c;
    font-size: 15px;
    text-align: justify;
}

    .pu-animal-datotexto strong {
        font-size: 18px;
        color: #094b0b;
    }

.pu-animal-sols {
    padding: 10px 0px 0px 0px;
    color: #069306;
    font-weight: bold;
    font-size: 17px;
    width: 90%;
    text-align: center;
}

.custom-btn-close {
    position: absolute;
    top: 10px;
    right: 20px;
    background-color: transparent;
    border: none;
    z-index: 1;
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}



.btn {
    border-radius: 25px;
}

.btn-popup-cerrar {
    background-color: #e70318;
    border: 2px solid #e70318;
    color: white;
    text-transform: uppercase;
    padding: 5px 40px;
}

    .btn-popup-cerrar:hover {
        background-color: white;
        border: 2px solid #e70318;
        color: #e70318;
    }

.mapa-direcciones {
    width: 85%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    gap: 16px;
    width: 85%;
    place-items: center;
    margin-top: 10px;
}

.bloqueMapa, .bloqueMapa iframe {
    width: 100% !important;
    height: max-content;
}

.mapa-dir {
    width: 100%;
    text-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 15px;
}

.mapadir-dir {
    font-weight: bold;
    font-size: 16px;
}

.mapadir-loc {
    font-size: 13px;
    color: #6d6d6d;
    padding-bottom: 6px;
}

/* BLOQUE REGISTRO */
.bloque-registro {
    width: 100%;
    max-width: 1320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 2px solid #b6c3eb;
    border-bottom: 2px solid #b6c3eb;
    padding: 10px 0px;
    margin: 10px 0px;
}

.msg-registro {
    color: #e70318;
    font-size: 13px;
}

/* CITA VETERINARIA */
.ct-cita {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1320px;
    padding: 40px 20px;
}

    .ct-cita .modal-title {
        /*font-weight: bold;*/
        font-size: 15px;
        max-width: 800px;
        padding: 10px;
        line-height: 17px;
    }

.pp-form-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 800px;
    gap: 3px;
}

.pp-form-name {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    color: #e70318;
    width: auto;
    text-align: start;
    min-width: 100px;
}

.pp-form-textarea {
    height: 100px;
    width: 100%;
    border: 2px solid #35353547;
    border-radius: 5px;
    padding: 5px;
}

.pp-form-inputtext {
    width: 100%;
    border: 2px solid #35353547;
    border-radius: 5px;
    padding: 5px;
}

.pp-mark {
    text-transform: uppercase;
    color: green;
    font-weight: bold;
}

.pp-sub {
    text-decoration: underline;
    color: #e70318;
}

.pp-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1320px;
    flex-wrap: wrap;
    gap: 20px;
}

/* CREAR AVISO */
.mm-formi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 10px;
    font-size: 14px;
}

.mm-formintro {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1320px;
    padding: 5px;
}

.mm-formtitle {
    font-size: 20px;
    font-weight: bold;
    text-align: start;
}

.mm-formdesc {
    text-align: start;
    color: gray;
    font-weight: 300;
    font-size: 14px;
}

.mm-formbody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1320px;
    background-color: #fff;
    border-top: 4px solid transparent;
}

.mm-formbody-trans {
    background-color: transparent !important;
    border-top: 4px solid transparent !important;
    border-radius: 0px !important;
}

.modal-content .mm-formiform {
    width: 88%;
}
.mm-formiform {
    width: 95%;
    margin: 20px 0px;
}
.mm-formiform .fa-paw {
    font-size: 17px;
}
.mm-formiform .accordion {
    margin-bottom: 15px;
}
.mm-formiform .accordion-button {
    font-weight: bold;
    text-transform: uppercase;
    background-color: #a2a2a2;
    color: #fff;
    padding: 10px;
    font-size: 15px;
}
.pp-section {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px;
    border-top: 2px solid #bfbfbf;
    padding: 20px 0px;
    font-weight: bold;
}

.perfil-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 14px 0px;
    background-color: #f0d7ff;
}

.perfil-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: start;
    font-size: 14px;
    color: #535353;
    padding: 20px 10px 10px 10px;
}

    .perfil-info span {
        max-width: 1200px;
        width: 90%;
    }

.perfil-title {
    font-size: 15px;
    font-weight: bold;
    color: black;
    text-transform: uppercase;
}

/* CABECERA PROTECTORA */
.ani-cabecera {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 91%;
    max-width: 1320px;
    gap: 20px;
    padding: 10px 20px;
    border-bottom: 3px solid #d4d3ff;
    border-radius: 10px;
    margin-bottom: 20px;
}

.ani-cab-image {
    min-width: 125px;
    height: 125px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .ani-cab-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.ani-cab-datos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: start;
}

.ani-cab-nombre {
    font-size: 24px;
    font-weight: bold;
    color: #4b4b4b;
    text-align: start;
}

.ani-cab-desc {
    font-size: 18px;
    color: #717171;
    text-align: start;
}

.btn-allProc {
    border-bottom: 1px solid #e70318;
    padding: 6px 0px 0px 0px;
    font-size: 12px;
    color: #e70318;
}

    .btn-allProc svg {
        margin-right: 5px;
    }

.pu-perretes {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 90%;
    padding-top: 10px;
    gap: 20px;
    flex-wrap: wrap;
}

.pu-item-perrete {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 22%;
    height: auto;
    overflow: hidden;
    cursor: pointer;
    gap: 5px;
    color: black;
    text-decoration: none;
}

.img-perrete {
    object-fit: inherit;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1 / 1;
}

.pu-nombreperrete {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
}

.btn-verprotectora {
    margin-bottom: 15px;
}

/* APRENDE */
.bloque-aprende {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 0px;
}

.aprende-intro {
    padding: 10px 0px 20px 0px;
    max-width: 1320px;
    text-align: center;
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 10px;
    padding: 0px 25px;
}

.aprende-posts {
    width: 100%;
    max-width: 1200px;
    /* background-color: #ecefffa6; */
    display: flex;
    flex-direction: row;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 95%;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 20px;
}
.aprende-posts .card {
    width: 45%;
    text-decoration: none !important;
}
.aprende-post-title {
    padding: 15px;
    text-align: center;
    width: 100%;
    border-top: 3px solid #e7e7e7;
    text-transform: uppercase;
    font-weight: bold;
    font-family: Nunito;
    background-color: #00309b;
    color: white;
    margin: 0px;
    position: sticky;
    top: 0px;
}

.aprende-post {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #ccc;
}

.aprende-post-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: clip-path 0.5s ease-out;
}

.aprende-post-content {
    margin-bottom: 2%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fffede;
}

.aprende-contenido {
    width: 100%;
    max-width: 1000px;
    padding: 10px 30px;
    font-size: 16px;
}

/* AVISOS */
.aviso {
    cursor: auto;
}

.bloque-aviso {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
}

.aviso-usuario {
    max-width: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 50px;
}

.aviso-user {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}

.fawe-resuelto {
    color: #0b9b69 !important;
}

.aviso-done svg {
    color: #0b9b69;
    padding-right: 4px;
}

.pill.aviso-done {
    background-color: #0b9b6921 !important;
    border-left: 3px solid #0b9b69 !important;
}

.fawe-aviso {
    font-size: 30px;
    color: #696969;
}

.aviso-time {
    font-weight: bold;
    margin-top: 5px;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #a50a0a;
}

.red {
    color: #e70318 !important;
    font-weight: bold;
    padding: 0px 2px;
}

.aviso-time svg {
    margin-right: 5px;
}

.aviso-aviso {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    padding: 8px 0px 2px 0px;
}

.aviso-guest {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
}

.aviso-nombre {
    font-size: 13px;
    color: gray;
}

.aviso-cuerpo {
    font-size: 15px;
    /* font-weight: bold; */
    color: black;
    line-height: 20px;
    font-style: italic;
    width: 90%;
}

.aviso-raza svg {
    margin-right: 5px;
}

.aviso-lugar svg {
    margin-right: 5px;
}

.aviso-contacto svg {
    margin-right: 5px;
}

.aviso-actions {
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 5px;
}

.aviso-encontrado svg {
    color: #a50a0a;
}

.aviso-encontrado .pill {
    background-color: #a50a0a1a;
    border-left: 3px solid #a50a0a;
}

.aviso-encontrado .aviso-time {
    background-color: #a50a0a !important;
    border-left: 0px;
}

.aviso-desaparecido svg {
    color: #ef7701;
}

.aviso-desaparecido .pill {
    background-color: #ef77012b;
    border-left: 3px solid #ef7701;
}

.aviso-desaparecido .aviso-time {
    background-color: #ef7701 !important;
    border-left: 0px;
}

    .aviso-desaparecido .aviso-time svg, .aviso-encontrado .aviso-time svg {
        color: white;
    }

.aviso-images {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 10px;
    margin-bottom: 5px;
}

.images-header {
    padding: 5px 0px 2px 2px;
    color: #898989;
    font-size: 12px;
    text-transform: uppercase;
}

.img-aviso {
    height: auto;
    width: max-content;
    object-fit: contain;
    object-position: center;
    max-height: 150px;
    width: max-content;
    max-width: 100%;
}

.custom-carrusel {
    background-color: #00aac621;
    padding: 13px 0px;
}

    .custom-carrusel img {
        object-fit: contain;
    }

a.btn-aviso-custom {
    display: inline-block;
    background-color: #0b9b69;
    color: #fff;
    font-weight: bold;
    border: 2px solid #0b9b69;
    text-transform: uppercase;
    padding: 3px 10px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    width: max-content;
    font-size: 13px;
    border-radius: 25px;
}

    a.btn-aviso-custom svg {
        color: #fff;
        margin-right: 5px;
    }

    a.btn-aviso-custom:hover svg {
        color: #0b9b69;
        background: #fff;
    }

    a.btn-aviso-custom:hover, a.btn-aviso-custom:active, a.btn-aviso-custom:focus {
        background-color: #eafff5 !important;
        border: 2px solid #0b9b69 !important;
        text-decoration: none;
        color: #0b9b69 !important;
    }

.aviso-desaparecido {
    border-left: 10px solid #ef7701;
    background-color: #fcedde; /*#fefefe;*/
    border-radius: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: max-content;
    position: relative;
    min-height: max-content !important;
    padding: 10px 10px 5px 15px;
}

.aviso-resuelto {
    border-left: 10px solid #bdbdbd;
    background-color: #0000000a;
    border-radius: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: max-content;
    position: relative;
    min-height: max-content !important;
    padding: 10px 10px 5px 15px;
}

.aviso-encontrado {
    border-left: 10px solid #a50a0a;
    background-color: #fae9e9; /*#fefefe;*/
    border-radius: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: max-content;
    position: relative;
    padding: 10px 10px 5px 15px;
    min-height: max-content !important;
}

.aviso-resuelto .pill {
    background-color: #d1d1d1;
    border-left: 3px solid #999999;
}

.aviso-resuelto .aviso-time {
    display: none;
}

.chat-resuelto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    font-weight: normal;
    font-size: 13px;
}

.aviso-general {
    border-left: 10px solid #0c9d0c;
    border-radius: 0px 0px 0px 0px;
    background-color: #ecffec;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: max-content;
    position: relative;
    padding: 10px 10px 5px 15px;
    min-height: max-content !important;
}

.aviso-resolver {
    padding: 2px 10px;
}

.btn-resuelto {
    background-color: #d7d6ff !important;
    color: #4242ff !important;
    border: 2px solid #4242ff !important;
}

    .btn-resuelto svg {
        font-size: 16px;
        color: #000000 !important;
    }

.tag-aviso {
    position: absolute;
    top: 8px;
    right: 12px;
    text-transform: uppercase;
    font-size: 14px;
    background-color: transparent;
    padding: 2px 7px;
    border-radius: 5px;
    font-weight: bold;
    padding-right: 60px;
}

.icoAvisos {
    display: block;
    position: absolute;
    top: 0px;
    right: 10px;
}

.tag-desaparecido {
    color: #ef7701;
}

.tag-encontrado {
    color: #a50a0a;
}



/* IMAGEN GALLERY */
.custom-gallery img {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1002;
}

    .gallery-overlay img {
        max-width: 90%;
        max-height: 90%;
        border-radius: 5px;
    }

    .gallery-overlay.active {
        opacity: 1;
        pointer-events: all;
    }

.gallery-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 5px;
}

    .gallery-nav-button:hover {
        background: rgba(255, 255, 255, 0.8);
    }

.g-prev {
    left: 10%;
}

.g-next {
    right: 10%;
}

.gallery-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 25px;
    color: white;
    cursor: pointer;
}

/* FLOATING BUTTON AVISOS */
.floating-button-avisos, .fbuttondisable {
    background-color: #e70318;
    color: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    cursor: pointer;
    padding: 7px 15px;
    border-radius: 5px;
    gap: 5px;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid #e70318;
    text-decoration: none;
    border-radius: 25px;
}

    .floating-button-avisos svg {
        font-size: 18px;
    }

    .floating-button-avisos:hover {
        background-color: #fff6f6;
        color: #e70318;
    }

.fbuttondisabled {
    pointer-events: none;
    opacity: 0.6;
    border: 2px solid #e7031875;
}

.list-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1320px;
    padding: 0px 25px;
}

/* PATTERNS BACKGROUND */
.mm-block-separator {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 20px 0px;
}

.bs-home {
    z-index: 1;
}

/* LOADER */
.overlay-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #e8e6ff80;
    z-index: 1050;
    display: none;
    justify-content: center;
    align-items: center;
}

.content-center {
    text-align: center;
}

.spinner {
    --s: 9px;
    width: 56px;
    height: 56px;
    /*background: #e70000a3;
    border-radius: 20%;
    border: 2px solid #ffd7108c;*/
    animation: spinner-ehcge9 1.5s infinite linear;
    /*clip-path: polygon(0 0,calc(50% - var(--s)) 0,50% var(--s),calc(50% + var(--s)) 0,100% 0,100% calc(50% - var(--s)),calc(100% - var(--s)) 50%,100% calc(50% + var(--s)),100% 100%,calc(50% + var(--s)) 100%, 50% calc(100% - var(--s)),calc(50% - var(--s)) 100%,0 100%,0 calc(50% + var(--s)), var(--s) 50%, 0 calc(50% - var(--s)));*/
}
.spinner img {
    width: 50px;
    height: 50px;
}

@keyframes spinner-ehcge9 {
    100% {
        transform: rotate(1turn);
    }
}

/*  BACK TO TOP BUTTON  */
.bttButton {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #e70318;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    border-radius: 30px;
    font-size: 10px;
    text-decoration: none;
}

    .bttButton svg {
        color: #fff;
    }

    .bttButton:hover {
        cursor: pointer;
        background-color: #333;
    }

    .bttButton:active {
        background-color: #555;
    }

    .bttButton.show {
        opacity: 1;
        visibility: visible;
    }

/* TOPIC */
.topic-body {
    max-width: 1320px;
    margin: 40px 0px;
    font-size: 16px;
    /*gap: 12px;*/
    width: 90%;
}
.topic-body h3 {
    color: #d02e26;
}
.topic-body h4 {
    color: #0b9b69;
}
.topic-body p {
    padding-left: 15px;
}
.lblRegistrate {
    font-weight: normal;
    color: gray;
    font-size: 12px;
}

    .lblRegistrate a {
        padding: 0px 3px;
    }

.lblIniciarSesion {
    color: #0077f1 !important;
}
/* FOOTER */
.footer-container {
    background-color: #000000;
    width: 100%;
}

    .footer-container .list-unstyled a {
        text-decoration: none;
        font-weight: 600;
        color: #efefef !important;
    }

.footer-image {
    height: 100px;
}

    .footer-image img {
        width: 95%;
        height: auto;
        object-fit: contain;
        max-width: 250px;
    }

.text-luminous {
    color: #fff4d4;
}

/* BOTTOM BAR */
.bottombar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    z-index: 1000;
}

.bb-content {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    background-color: #e70318;
    height: 50px;
    z-index: 2;
}

.bb-item {
    width: 18%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.bb-item-selected {
    background-color: #eb6464;
}

.bb-item-home img {
    background-color: #FA8D87;
    border-radius: 60px;
    padding: 0px !important;
    width: 33% !important;
    min-width: 45px;
    min-height: 45px;
}

.bb-item img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    padding: 3px;
}

/* Mini Bottom Bar */
.mini-bottom-bar {
    position: absolute;
    bottom: -100px;
    width: 96%;
    background: #FA8D87;
    padding: 0px 6px;
    /*display: flex;
    justify-content: space-around;
    align-items: center;*/
    transition: bottom 0.3s ease-in-out;
    max-width: 500px;
    border-radius: 50px;
    height: 75px;
    z-index: 1;
}
.btncloseavi, .btncloseani {
    background-color: red;
    border: none;
    border-radius: 41px;
    width: 55px;
    height: 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.btncloseavi img, .btncloseani img {
    widtH: 45px !important;
    height: 45px !important;
    padding: 4px;
}
.tableBottom img {
    width: 52px;
    height: 52px;
}
.minibb-item {
    /* flex: 1; */
    padding: 0px 2px;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 14px;
    /*max-width: 95px;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    line-height: 12px;
    text-align: center;
    gap: 2px;
    height: 100%;
    /*position: relative;*/
    font-size: 12px;
}
    .minibb-item a {
        border: none;
        color: white;
        cursor: pointer;
        font-size: 10px;
        text-decoration: none;
        line-height: 12px;
        text-align: center;
        height: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        z-index: 10;
        width: 100%;
    }

    .minibb-item img {
        width: max-content;
        height: 55px;
        object-fit: contain;
    }

    .minibb-item:hover {
        text-decoration: none !important;
        color: #e70318 !important;
        font-weight: bold;
    }

        .minibb-item:hover img {
            /*filter: invert(17%) sepia(100%) saturate(6080%) hue-rotate(349deg) brightness(88%) contrast(108%);*/
        }

.notiRel {
    position:relative;
}
.btnbottomRel {
    background-color: transparent;
    border: none;
    color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.notiball {
    position: absolute;
    color: white;
    background: #e70318;
    padding: 5px;
    border-radius: 30px;
    font-size: 11px;
    top: 5px;
    right: 11px;
    min-width: 22px;
}

.bb-close {
    background: transparent !important;
    width: 19% !important;
    width: 70px;
    justify-content: center !important;
}

.bb-close img {
    background-color: #E70318;
    border-radius: 33px;
    padding: 10px;
    height: 55px;
    max-width: 55px;
    max-height: 55px;
}

.bb-close:hover {
    background: transparent !important;
}

.mini-bottom-bar.show {
    bottom: 60px;
}

/* LOGINBOX */
.login-box, .register-box {
    /*width: 360px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    min-width: 320px;
}

.custom-login-card {
    width: 90%;
    max-width: 360px;
    border-bottom: 5px solid #e70318;
}

.custom-register-card {
    width: 90%;
    max-width: 600px;
    border-bottom: 5px solid #e70318;
    max-height: 700px;
    height: max-content;
    max-height: 90%;
}

.all-start {
    text-align: start;
}

.custom-register-card .card-body {
    overflow: auto;
}

.custom-login-header, .custom-login-register, .custom-login-verificar {
    background-color: white !important;
    border-bottom: 0px;
    border-top: 5px solid #e70318;
    padding-top: 15px;
}

.custom-post-login .col {
    padding: 5px;
}

.custom-login-header img {
    width: 100%;
    max-width: 200px;
}

.custom-login-register img, .custom-login-verificar img {
    width: 100%;
    max-width: 175px;
}

.custom-register-card .card-body {
    padding-top: 5px;
}

.custom-login-box-msg {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
    cursor: default;
}

.login-separator {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: gray;
    padding-top: 15px;
    cursor: default;
}

.custom-invitado {
    line-height: 18px;
    color: #ef6774;
}

.custom-register {
    border-bottom: 0px;
    background-color: #e70318;
    color: white;
    font-size: 20px;
    text-transform: uppercase;
}

.register-separator {
    width: 100%;
    padding-top: 10px;
    text-align: center;
    border-bottom: 3px solid #e70318;
    margin-bottom: 16px;
    color: #e70318;
    font-weight: bold;
    font-size: 17px;
}

.register-datos {
    padding-bottom: 4px;
    margin: 0;
}

.register-terms {
    text-align: center;
    padding: 5px 0px 20px 0px;
}

.pagina-logueo {
    /*height: 100%;*/
    margin: 0;
    display: grid;
    place-items: center;
    min-height: unset !important;
}

.form-subray {
    text-decoration: underline;
    cursor: pointer;
    text-decoration-color: #e70318;
    text-decoration-thickness: 3px;
    line-height: 23px;
    text-align: center;
}

.form-subrayperfil {
    cursor: pointer;
    font-weight: bold;
    line-height: 20px;
    text-align: start;
    color: #373737;
    font-size: 14px;
    text-transform: uppercase;
}

.padleft10 {
    padding-left: 25px;
}

.i-subrayperfil {
    color: #038ce7;
    font-size: 18px;
}

.topic-popup {
    padding: 20px;
}

.topic-pp-titulo {
    padding-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #e70318;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
}

.topic-pp-cuerpo {
    width: 100%;
    font-size: 16px;
    padding: 5px 5px;
    line-height: 22px;
    text-align: left;
}
.topic-pp-cuerpo h3 {
    color: #e70318;
}
.topic-pp-cuerpo h4 {
    color: #0b9b69;
}

.verification-container {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70px;
    margin-bottom: 15px;
}
.verification-container input[type="text"] {
    width: 42px;
    height: 100%;
    margin: 0 5px;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    -webkit-appearance: none;
    border-radius: 6px;
    border: 2px solid #b3b3b3;
}
.val-verificar {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* LISTADO DE NOTIFICACIONES */
.mapp .list-notif {
    margin-top: 40px;
}
.list-notif {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 10px;
    max-width: 1320px;
}

.list-notif-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 5px 0px 5px 15px;
}

.list-notif-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0px 10px;
    height: max-content;
}

.list-notificaciones {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    .list-notificaciones #flagObserver {
        background-color: #d9d9d9;
        width: 20px;
        height: 5px;
    }

    .list-notificaciones #loadingText {
        text-transform: uppercase;
        color: #e70318;
        font-size: 12px;
    }

    .list-notificaciones #notiList {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        /* gap: 10px; */
        padding: 0px 10px;
        margin: 0px 0px 10px 0px;
    }

        .list-notificaciones #notiList li {
            list-style: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            /*border: 2px solid #6c6c9d;*/
            width: 100%;
            padding: 5px 15px;
        }

.notiItem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: #f3f3f3;
    border-left: 5px solid #e70318;
    padding: 6px 10px;
}

.notiItem-red {
    border-left: 5px solid #c71d1d;
}

    .notiItem-red b {
        color: #c71d1d;
    }

    .notiItem-red .cita {
        border-left: 2px solid #c71d1d !important;
        background-color: #ffe5e5 !important;
    }

.notiItem-green {
    border-left: 5px solid #2ec912;
}

    .notiItem-green b {
        color: #008000;
    }

    .notiItem-green .cita {
        border-left: 2px solid #008000 !important;
        background-color: #ecffec !important;
    }

.notiItem-blue {
    border-left: 5px solid #3a40ff;
}

    .notiItem-blue b {
        color: #3a40ff;
    }

    .notiItem-blue .cita {
        border-left: 2px solid #3a40ff !important;
        background-color: #f5f5ff !important;
    }

.cita {
    border-left: 2px solid gray;
    padding: 5px 10px 5px 8px;
    height: 100%;
    margin: 5px 0px;
    background-color: #e1e1e1;
}

.notiImg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80px;
    position: relative;
    height: 55px;
}

    .notiImg img {
        width: 100%;
        height: 55px;
        object-fit: contain;
    }

.notiAdopcion .notiImg svg {
    bottom: 13px;
    top: initial;
    right: initial;
    font-size: 14px;
}

.notiImg svg {
    position: absolute;
    top: 7px;
    right: 10px;
    font-size: 15px;
    color: green;
}

.notiEliminar {
    width: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .notiEliminar img {
        width: 100%;
        height: 100%;
        max-width: 35px;
        object-fit: contain;
    }

.notiBody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    text-align: start;
    padding: 0px 10px;
    font-size: 13px;
}

    .notiBody strong {
        font-size: 16px;
    }

.list-notif-title {
    font-size: 21px;
    font-weight: bold;
    text-align: start;
    line-height: 22px;
    margin-bottom: 10px;
}

.list-notif-desc {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 10px;
}

.li-nomore {
    display: flex;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    text-align: center !important;
    margin: 0;
    padding: 0;
    color: gray;
    font-size: 12px;
    text-transform: uppercase;
}

.li-full {
    display: flex;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    text-align: center !important;
    margin: 0;
    padding: 0;
    min-height: 250px;
}

    .li-full svg {
        color: #d9d9d9;
        font-size: 80px;
        margin-bottom: 10px;
    }

    .li-full span {
        color: gray;
        font-size: 14px;
        text-align: center;
        width: 90%;
    }

.notiFecha {
    color: #045704ba;
    font-size: 11px;
}

.hidenoti {
    display: none !important;
    padding: 0px !important;
}

    .hidenoti .notiEliminar {
        display: none;
        pointer-events: none;
    }

.adop-nombre {
    font-weight: bold;
    color: green;
    font-size: 14px;
}

/* custom alerts */
.custom-alert-mm .alert {
    border-radius: 0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-transform: uppercase;
}

    .custom-alert-mm .alert svg {
        font-size: 20px;
    }

.custom-alert-mm .alert-success {
    border-left: 5px solid #008000;
    background-color: #e6ffe6;
    color: #008000;
}

.custom-alert-mm .alert-warning {
    border-left: 5px solid #ff6c00;
    background-color: #ffeecf;
    color: #ff6c00;
}

.custom-alert-mm .alert-info {
    border-left: 5px solid #bb9f0b;
    background-color: #fff5e1;
    color: #bb9f0b;
}

.custom-alert-mm .alert-error {
    border-left: 5px solid #ff0000;
    background-color: #ffe4e4;
    color: #ff0000;
}

.custom-alert-mm .alert-success svg {
    color: #008000;
}

.custom-alert-mm .alert-warning svg {
    color: #ff6c00;
}

.custom-alert-mm .alert-info svg {
    color: #bb9f0b;
}

.custom-alert-mm .alert-error svg {
    color: #ff0000;
}

.info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 0;
}

.card-title, .text-muted {
    display: block;
    text-align: center;
    margin-bottom: 2px;
}

/* TIMELINE ADOPCIONES */
.timeline-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    padding: 10px 0;
}

.timeline-step {
    position: relative;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    z-index: 2;
    position: relative;
}

.timeline-line {
    position: absolute;
    width: calc(100% - 20px);
    height: 4px;
    background-color: #ccc;
    top: 15%;
    left: 10px;
    z-index: 1;
}

.timeline-step:first-child .timeline-line {
    left: 56%;
}

.timeline-step:last-child .timeline-line {
    width: 50%;
}

.card-footer {
    padding: 8px 15px;
    font-size: 14px;
}

/* MENU DESPLEGABLE */
.dropbtn {
    color: #e70318;
    padding: 4px 9px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 40px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

    .dropdown .fa-bars {
        font-size: 18px;
    }

.ddc-left {
    left: -8px;
    right: initial;
}

.ddc-right {
    left: initial;
    right: -7px !important;
}

.ddc-right a {
    text-align: right !important;
}

.ddc-right a svg {
    margin-right: 0px !important;
    margin-left: 6px;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0px;
    background-color: #f9f9f9;
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 6;
}

.mapp .dropdown-content {
    height: 90vh;
    padding-top: 15px;
}

.dropdown-content a {
    color: #000;
    text-transform: uppercase;
    font-size: 14px;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-weight: normal;
}

    .dropdown-content a svg {
        color: #e70318;
        margin-right: 5px;
    }

    .dropdown-content a:hover {
        background-color: #e7061b2e;
    }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #f9bfbf;
}

/* MENU MOVIL */
.menumov {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    padding: 10px 20px;
    margin-top: 45px;
}

.menumov-container {
    display: flex;
    gap: 10px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 90%;
    flex-wrap: wrap;
}

.menumov-item {
    padding: 5px;
    width: 150px;
    background-color: #F8F8F8;
    min-width: 165px;
    max-width: 165px;
}

.menumov-item-doble {
    grid-column: span 2;
}

    .menumov-item-doble a img {
        max-height: 125px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

.menumov-item a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 16px;
    text-decoration: none !important;
    color: #777777;
    letter-spacing: -1px;
    text-align: center;
    line-height: 23px;
}

    .menumov-item a img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

.menu-card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px 0px;
    padding: 0px 15px;
}

    .menu-card-info h3 {
        text-align: center;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        margin-top: 10px;
        font-size: 22px;
    }

.menu-card-container {
    background-color: #f7414f;
    border-radius: 8px;
    padding: 15px 20px;
    width: 100%;
    max-width: 500px;
    color: #fff;
}

.bloqueDatosGeneralesHome {
    width: 100%;
}

    .bloqueDatosGeneralesHome .menu-card-container {
        max-width: 1200px;
    }

    .bloqueDatosGeneralesHome .mensajeAdopcion {
        text-align: center;
    }

    .bloqueDatosGeneralesHome .kpiAdopcionPerro {
        max-width: 200px;
        justify-content: center;
        align-items: center;
    }

.menu-card-title {
    font-weight: bold;
    font-size: 17px;
    text-align: center;
    margin: 2px auto;
    display: block;
}

.menu-card-body {
    padding: 5px;
}

.menu-card-body-kpis {
    padding: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px; /* Espaciado entre KPIs opcional */
}

    .menu-card-body-kpis .kpiAdopcionPerro {
        width: 30%;
        flex: 0 0 30%;
        border-radius: 10px;
        text-align: center;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

.bloqueDatosGeneralesHome .kpiAdopcionPerro {
    max-width: 100%;
    justify-content: center;
    align-items: center;
}

.bloqueDatosGeneralesHome .menu-card-body-kpis {
    justify-content: center;
    align-items: center;
}

.menu-card-dato {
    font-size: 1.2rem;
    width: 90px;
    min-height: 83px;
    font-weight: bold;
    background: transparent url(/images/bc-huella.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: #e70318;
    display: flex;
    flex-direction: column;
    justify-items: flex-end;
}

.menu-card-dato span {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.1rem;
}

.menu-card-titulo {
    font-size: 0.9rem;
    margin-top: 5px;
    text-transform: uppercase;
    min-height: 45px;
}

.menu-card-center {
    text-align: center;
}
.menubloquestore {
    margin: 30px 0px 0px 0px;
    display: none;
}
.menubloquestore h2 {
    color: #e70318 !important;
    text-align: center !important;
    padding-bottom: 10px !important;
}

/* MODO MOVIL */
.mapp .mm-header, .mapp .mm-container {
    max-width: 1000px;
    background-color: white;
}
.mapp .mm-container {
    margin-bottom: 30px;
    margin-top: 40px;
}
.mapp .bttButton {
    bottom: 70px;
    display: none;
}
/*.mapp .custom-modal-size {
    max-width: 900px;
    height: 85%;*/
    /*margin: 10px;*/
/*}*/
.mapp .mm-header {
    position: fixed !important;
    top: 0 !important;
    z-index: 1000 !important;
}
.mapp .mm-header .dropdown {
    z-index: 10001 !important;
}

/* PREFERENCIAS DE USUARIO */
.row-preferencia {
    background-color: #0b9b6930;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-left: 5px solid #0b9b69;
    padding: 5px 5px 5px 12px;
    margin-bottom: 5px;
}

.pref-datos {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px 5px;
    padding-bottom: 5px;
}

.pref-pref {
    background-color: #eefff9;
    color: #373737;
    padding: 2px 9px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    border-left: 3px solid #0b9b69;
    border-radius: 0px 8px 8px 0px;
}

.pref-activa {
    background-color: #f7f785;
    border-left: 3px solid #939313;
}

.pref-desactiva {
    background-color: #dfdfdf;
    border-left: 3px solid gray;
}

#preferenciasGrid {
    border-bottom: 0px;
}

.pref-intro {
    padding: 3px 0px 5px 0px;
    font-size: 15px;
}

    .pref-intro svg {
        margin-right: 5px;
        font-size: 13px;
        color: #858585;
    }

    .pref-intro strong {
        color: #12630d;
        font-weight: bold;
    }

.preferencias-title {
    font-weight: bold;
    font-size: 15px;
    text-align: start;
}

.pref-acciones {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    gap: 5px;
    flex-wrap: wrap;
    padding: 5px 5px;
}

.btn-custom-pref {
    color: #737373;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px;
}

.btn-custom-pref-borrar {
    color: #ff4242 !important;
}

.btn-custom-pref-activar {
    color: #3b3b3b !important;
}

.btn-custom-pref-desactivar {
    color: #3b3b3b !important;
}

.btn-custom-pref svg {
    padding-right: 5px;
}

/* SLIDER KMS */
.slider-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

    .slider-container span, .slider-container input {
        width: 98%;
    }

    .slider-container span {
        font-size: 13px;
        text-align: center;
        text-transform: uppercase;
        font-weight: bold;
        color: #d9505d;
    }

    .slider-container input {
        accent-color: #e70318;
    }

.custom-range {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: #ffffff;
    border-radius: 4px;
    outline: none;
    transition: background 0.3s;
    padding: 10px 0px;
}

    .custom-range::-webkit-slider-runnable-track {
        width: 100%;
        height: 10px;
        background: linear-gradient(to right, #e70318a8, #e70318a8);
        border-radius: 4px;
    }

    .custom-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: #f2f2f2;
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.2s;
        margin-top: -6px;
        border: 1px solid #e70318;
    }

    .custom-range::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: #ff5733;
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .custom-range:active::-webkit-slider-thumb {
        transform: scale(1.2);
    }

.item-ppp {
    padding: 8px 0px;
}

    .item-ppp strong {
        text-align: start;
        line-height: 19px;
    }

.limited-text {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 110px;
    width: 100%;
}

.title-start-animal {
    text-align: start;
    padding-bottom: 8px;
}



/* ACCESS DENIED PAGE */
.denied {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    /*height: calc(100vh - 100px);*/
}

.denied-content {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 14px;
    box-shadow: 5px 5px 12px 0px #cfcfcf;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.denied-image {
    max-width: 150px;
    padding: 20px 0px 30px 0px;
}

.denied-title {
    padding-bottom: 6px !important;
    font-weight: bold;
    text-transform: uppercase;
    color: #e70318c2;
    font-size: 24px !important;
}

.denied-intro, .denied-title {
    text-align: center;
    font-size: 21px;
    line-height: 20px;
    padding-bottom: 20px;
}

.denied-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #8080804f;
}

    .denied-links a {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 7px;
        text-decoration: none !important;
    }

        .denied-links a:hover i, .denied-links a:hover span {
            color: #e70318;
        }

        .denied-links a svg {
            font-size: 14px;
            color: gray;
        }

        .denied-links a span {
            text-align: center;
            text-decoration: dotted !important;
            color: #716f6f;
            line-height: 15px;
            font-size: 14px;
            padding-top: 2px;
        }




/* CAPTCHA */
.dntCaptcha-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px;
    background-color: #e5e5e578;
    border-radius: 10px;
    border: 1px solid #b9b9b978;
}

.dntCaptcha-text {
    margin: 0;
    width: 100%;
    text-align: start;
}

.dntCaptcha-container .dntCaptcha {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap;
}

    .dntCaptcha-container .dntCaptcha img {
        width: auto !important;
        height: 50px !important;
        margin-top: 4px !important;
    }

    .dntCaptcha-container .dntCaptcha .input-group {
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 5px;
    }

.dntCaptchaRefreshButton {
    padding: 5px 10px;
}

#DNTCaptchaInputText {
    width: 100%;
    max-width: 100% !important;
}

.validation-summary-errors ul {
    padding-top: 5px;
}

.validation-summary-errors {
    color: #ff4141;
    font-weight: bold;
    text-transform: uppercase;
}

#dntCaptchaRefreshButton {
    padding: 0px 10px;
    font-size: 18px;
    text-decoration: none;
}

/************MIS MASCOTAS***************/
.mapp .cont-mascotas {
    margin-top: 45px;
}
.container-mascotas, .form-mascotas {
    margin: 0px auto;
    width: 95%;
    max-width: 1200px;
}

.card-mascota h5 {
    color: #000;
}

.card-mascota .info {
    font-style: italic;
    color: gray;
    font-size: 12px;
}

.card-mascota .card-body {
    padding: 10px 10px 5px 10px;
}

.card-mascota .card-title {
    text-align: start;
    font-weight: bold;
    font-size: 20px;
    padding: 0px 0px 0px 5px;
}

.container-mascotas .subTtitle {
    color: #e70318;
    font-weight: 300;
    font-size: 20px;
    border-bottom: 5px solid #e70318;
    padding-bottom: .25rem;
    margin: 1.5rem 0 1rem;
}

.container-mascotas label {
    font-weight: 500;
    font-size: 15px;
    color: #000;
}

.container-mascotas span {
    font-weight: 500;
    font-size: 14px;
    color: gray;
    font-style: italic;
}

.container-mascotas .form-group {
    margin: 3px auto;
}

.btn-borrar-imagen {
    top: -15px;
    right: 0px;
    position: absolute !important;
}

.multimedia-item {
    width: 49%;
}

.container-mascotas .btn-group-sm > .btn, .btn-sm {
    --bs-btn-padding-y: 0.15rem !important;
}

.container-mascotas .sortable {
    cursor: move;
}

.nombre-doc {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
/*SWIPER*/
.swiper-container {
    width: 100%;
    max-width: 600px; /* opcional, para controlar el ancho */
    height: 300px; /* define una altura fija o adaptable */
    margin: 0 auto;
    position: relative;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide content vertically */
    display: flex;
    justify-content: center;
    align-items: center;
}

    .swiper-slide img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.swiper-button-next,
.swiper-button-prev {
    color: #e70318; /* o el color que uses */
    top: 50%;
    transform: translateY(-50%);
}

.swiper-pagination {
    bottom: 10px;
    text-align: center;
}

/* ANIMACIONES CSS */
@keyframes parpadeo {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.parpadeo {
    animation: parpadeo 1.5s infinite;
}

/* PRELOAD DE IMAGENES */
.wrapLoadImage:not(.loading) img {
    opacity: 1;
}
/* Spinner centrado */
.imgSpin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #ccc;
    border-top: 4px solid #333;
    border-radius: 50%;
    animation: imgSpin 0.8s linear infinite;
}

@keyframes imgSpin {
    to {
        transform: rotate(360deg);
    }
}

.wrapLoadImage:not(.loading) .imgSpin {
    display: none;
}

/* POPUP COOKIES */
.cookie-body {
    padding: 5px 20px 20px 20px;
    gap: 5px 0px;
}

.cookies-btns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px;
    margin-top: 11px;
}

.btn-cookies {
    background-color: #e70318;
    width: 100%;
    color: white;
    font-weight: normal;
    border: 1px solid #e70318;
}

    .btn-cookies:hover {
        border: 1px solid black;
        background-color: transparent;
        font-weight: bold;
    }

.cookies-title {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.cookie_headimg {
    width: 100px;
    height: auto;
    display: inline-block;
    transform-origin: center bottom;
    animation: swing 2s ease-in-out infinite;
}

@keyframes swing {
    0% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(-5deg);
    }
}

.perfil-dirs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.perfil-dir-nombre {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    color: #0b9b69;
}

.perfil-dir-calle {
    color: #3d3c3c;
    line-height: 16px;
}

.perfil-dir-main {
    color: black;
    font-size: 11px;
    font-weight: bold;
    padding-top: 3px;
}

.mainDir {
    font-weight: bold;
    color: #0b9b69;
}

    .mainDir svg {
        color: #0b9b69;
        font-weight: bold;
        font-size: 16px;
    }

.reg-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0px 20px 0px 10px;
}

.rowPerfilDirs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.riac-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 50px;
}

.riac-bloque {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-top: 3px solid #a7d40e;
    margin-top: 30px;
    padding-top: 10px;
    max-width: 1200px;
    gap: 10px;
}

.riac-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 95%;
    max-width: 1200px;
    gap: 5px;
    flex-wrap: wrap;
}

.riac-img {
    width: auto;
    max-width: 200px;
}

.riac-title {
    text-align: start;
    width: 95%;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.riac-desc {
    color: #000000;
    font-weight: bold;
    font-size: 16px;
}

.riac-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 95%;
}

.riac-ventaja {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 10px 10px 20px;
    margin: 0px;
}

.riac-negrita {
    padding: 0;
    margin: 0;
}

    .riac-negrita svg {
        color: #a7d40e;
        padding-right: 5px;
        font-size: 10px;
    }

.modal-logo {
    max-width: 110px;
    padding-bottom: 10px;
}

.modal-solicitar {
    font-size: 20px;
    color: #000000;
    padding-bottom: 5px;
    font-weight: lighter;
    letter-spacing: 0.5px;
}

#download-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center; 
    align-items: center;
    display: none;
}
.download-spinner-box {
    background-color: white;
    padding: 15px 45px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.download-spinner-text {
    color: #333; 
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: 5px; 
}
.download-loader {
    /*border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%; 
    width: 30px;
    height: 30px;*/
    animation: downloadspin 1s linear infinite;
}

@keyframes downloadspin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.btn-eye {
    position: absolute;
    top: 15px;
    right: 5%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    color: #555;
    z-index: 5;
}
.btn-eye:hover {
    color: #000;
}
.regcorreoerror {
    font-size: 14px;
}
.cookies-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.cookies-table thead th {
    background-color: #d02e26;
    color: #ffffff;
    padding: 10px;
    border: 1px solid #ffffff;
    text-align: center;
}
.cookies-table td {
    padding: 10px;
    border: 1px solid #dddddd;
}

/* Add responsiveness */
@media (max-width: 1040px) {
    .mm-navbar-nav {
        gap: 10px;
    }

    .mm-navbar-li {
        font-size: 14px;
    }
}
@media (max-width: 992px) {
    .mm-container {
        max-width: 100% !important;
        padding: 0px;
    }

    .homeSwiper {
        width: 100% !important;
    }

    .hua-container, .hun-container {
        width: 90% !important;
        max-width: initial !important;
    }

    .hua-component::before {
        /*clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 94%)*/;
    }

    .hun-component::before {
        /*clip-path: polygon(0 0%, 100% 5%, 100% 94%, 0 100%);*/
    }

    .swiper-info {
        padding: 0px 20px;
    }

        .swiper-info h1 {
            font-size: 30px;
        }

        .swiper-info p {
            font-size: 16px;
            max-width: 215px;
        }

    .footer-container .list-unstyled .fa-paw {
        display: none;
    }

    .custom-btn-close {
        right: 5px;
    }

    .pu-item-perrete {
        width: 44%;
    }

    /* 992992 */
}

@media (max-width: 950px) {
    .mm-navbar-nav {
        gap: 8px;
    }

    .mm-navbar-li {
        font-size: 13px;
    }
    /* 930930 */
}

@media (max-width: 930px) {
    .mm-navbar-nav {
        gap: 8px;
    }

    .mm-navbar-li {
        font-size: 12px;
    }
    /* 930930 */
}

@media (max-width: 900px) {
    .mm-header-image {
        max-width: 140px;
    }

    .hun-card {
        width: 48%;
        height: max-content;
        flex-grow: 1;
    }

    .hun-title {
        display: block;
        font-size: 1rem;
        line-height: 1.15rem;
    }
    /* 900900 */
}

@media (max-width: 820px) {
    .mm-navbar-li {
        font-size: 11px;
    }
    /* 930930 */
}

@media (max-width: 775px) {
    html {
        font-size: 16px;
    }

    .main-sidebar {
        width: 200px;
    }

    .sidebar-menu .nav-link {
        font-size: 1rem;
    }

        .sidebar-menu .nav-link svg {
            font-size: 1.2rem;
        }

    .mm-collmenu-btn {
        display: inline-block !important;
    }

    .mm-header-image {
        max-width: 120px;
    }

    .mm-hide {
        display: none;
    }

    .mm-navbar {
        padding: 0px 30px;
    }

    .mm-header-left, .mm-header-right {
        width: max-content !important;
    }

    .btn-iniciar-sesion {
        background: #e70318 !important;
        border: 0px;
    }

    .slider-decorator {
        width: 40px !important;
    }

    .swiper-info {
        padding: 0px 15px;
    }

        .swiper-info h1 {
            font-size: 25px;
        }

        .swiper-info p {
            font-size: 14px;
            max-width: 180px;
        }

    .mm-formbody .custom-check-center {
        align-items: end;
    }

    .container, .container-sm {
        max-width: 95% !important;
    }

    .animal-card-img {
        max-height: 250px;
    }

    .animal-card .card-body {
        padding: 10px 20px 5px 20px;
    }

    .imgProte {
        top: 7px;
        right: 10px;
    }

    .aprende-posts .card {
        width: 95%;
    }

    .ddc-right {
        right: -38px !important;
    }

    .ddc-left {
        left: -38px !important;
    }
    /* 775775 */
}

@media (max-width: 768px) {

    .cookies-table thead {
        display: none;
    }
    .cookies-table,
    .cookies-table tbody,
    .cookies-table tr,
    .cookies-table td {
        display: block;
        width: 100%;
    }
    .cookies-table tr {
        margin-bottom: 15px;
        background-color: #fafafa;
        border: 1px solid #cccccc;
        padding: 10px;
        border-radius: 4px;
    }
    .cookies-table td {
        position: relative;
        padding-left: 50%;
        text-align: left;
        border: none;
        border-bottom: 1px solid #eeeeee;
    }
    .cookies-table td:last-child {
        border-bottom: none;
    }
    .cookies-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 10px;
        font-weight: bold;
        color: #d02e26;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .hua-component::before {
        /*clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 98%)*/;
    }

    .hun-component::before {
        /*clip-path: polygon(0 0%, 100% 2%, 100% 98%, 0 100%);*/
    }

    .aviso-cuerpo {
        font-size: 15px;
        line-height: 18px;
    }

    a.btn-aviso-custom {
        font-size: 12px !important;
    }
    /* 600600 */
}

@media (max-width: 576px) {
    .caja-login, .caja-registro {
        width: 100%;
        max-width: 360px;
    }

    .hua-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .hua-item {
        padding: 5px 10px;
    }

    .slider-decorator {
        width: 40px !important;
    }

    .swiper-info {
        padding: 0px 15px;
    }

        .swiper-info h1 {
            font-size: 24px;
        }

        .swiper-info p {
            font-size: 12px;
            max-width: 150px;
        }

    .paw-title {
        font-size: 30px;
    }

    .paw-description {
        font-size: 14px;
    }

    .paw-title svg {
        top: -7px;
    }

    .hun-card {
        width: 100%;
        height: max-content;
        flex-grow: 1;
    }

    .hun-title {
        display: block;
        font-size: 1.25rem;
        line-height: 1.35rem;
    }

    .custom-modal-size {
        padding: 0px 5px;
    }

    .list-notificaciones #notiList li {
        padding: 5px 5px;
    }

    .front-grid .dataTables_paginate .previous, .front-grid .dataTables_paginate .next {
        font-size: 13px;
    }

    .front-grid .dataTables_paginate {
        gap: 5px;
    }

    .tag-aviso {
        right: 3px;
    }

    .bloque-aviso {
        margin-top: 25px;
    }

    .pref-acciones {
        justify-content: center;
        align-items: center;
    }
    /* 576576 */
}

@media (max-width: 550px) {

    .cookies-table td {
        padding-left: 10px;
        /*padding-top: 30px;*/
        text-align: left;
    }
    .cookies-table td::before {
        position: relative;
        display: block;
        left: 0;
        top: 0;
        margin-bottom: 0px;
        white-space: normal;
    }
    /* 550550 */
}

@media (max-width: 515px) {
    .front-grid .dataTables_paginate {
        flex-direction: column;
        gap: 0px;
    }

    .swiper-info {
        max-width: 40%;
    }
    /* 515515 */
}

@media (max-width: 500px) {
    .pu-blog-title, .pu-blog-body, .pu-loc-clinicadata, .pu-perretes {
        width: 90%;
    }

    .pu-blog-title {
        font-size: 1.3rem;
        line-height: 30px;
        margin-top: 10px;
        width: 90% !important;
    }

    .pu-clinica-section, .pu-clinica-datos {
        width: 100%;
    }

    .pp-chat-usuario {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .chat-header {
        font-size: 14px;
    }

    .bur-mes {
        font-size: 14px;
        line-height: 16px;
    }

    .chat-popup {
        padding: 10px 0px;
        margin-top: 20px;
    }

    .btn {
        font-size: 14px !important;
    }

    .pp-buttons {
        width: 100%;
        gap: 10px;
    }

    .minibb-item {
        font-size: 10px;
        width: 30%;
        line-height: 10px;
    }

    .aviso-usuario {
        min-width: initial;
    }

    .pu-loc-clinicadata, .pu-blog-direccion {
        width: 95%;
    }

    .mapa-direcciones {
        width: 100%;
    }

    .pp-buttons .btn {
        font-size: 14px !important;
        padding: 5px 15px;
    }

    /*.pu-item-perrete {
        width: 85%;
    }*/

    .paw-title {
        font-size: 25px;
    }
    /* 500500 */
}

@media (max-width: 440px) {
    .pu-blog-image {
        min-height: initial;
    }

        .pu-blog-image::before {
            height: 240px;
            background: #e70318;
            clip-path: polygon(0 0, 100% 0, 100% 140px, 0 220px);
        }

    .custom-btn-close {
        right: 0px;
        z-index: 10;
        top: 0px;
        padding: 2px 11px;
    }

    .reactive-tooltip::after {
        max-width: 190px;
    }

    .rowPerfilDirs {
        flex-direction: column;
        gap: 12px;
    }

    .perfil-dirs {
        align-items: flex-start;
    }

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

    .menumov-container {
        width: 100%;
    }
    /* 440440 */
}

@media (max-width: 420px) {
    .mm-navbar {
        padding: 0px !important;
        justify-content: space-between; /*space-around !important;*/
    }

    .slider-decorator {
        display: none;
    }

    .swiper-info {
        padding: 0px 10px;
    }

        .swiper-info h1 {
            font-size: 20px;
        }

        .swiper-info p {
            font-size: 10px;
            max-width: 120px;
        }

    .reactive-tooltip::after {
        max-width: 180px;
    }

    .list-notificaciones #notiList {
        padding: 0px;
    }

    .custom-tbody {
        padding: 0px 8px;
    }

    .verification-container {
        height: 55px;
        /*gap: 12px;*/
    }
    .verification-container input[type="text"] {
        width: 36px;
        font-size: 35px;
    }
    .ddc-right {
        right: -8px !important;
    }

    .ddc-left {
        left: -8px !important;
    }
    /* 420420 */
}

@media (max-width: 400px) {
    .pu-blog-image::before, .pu-animal-image::before, .pu-clinica-image::before, .pu-protectora-image::before {
        height: 220px;
        clip-path: polygon(0 0, 100% 0, 100% 160px, 0 220px);
    }
}

@media (max-width: 380px) {
    .menumov-container {
        /*grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));*/
        gap: 10px;
    }
    .menumov-item {
        width: 46%;
        background-color: #F8F8F8;
        min-width: initial;
        max-width: initial;
    }
}

@media (max-width: 370px) {
    .caja-login, .caja-registro {
        width: 95%;
        max-width: 300px;
    }

    .hua-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .aviso-desaparecido {
        padding: 5px 5px 5px 10px;
    }
    .btnbottomRel {
        font-size: 12px;
    }
    .tableBottom img {
        width: 50px;
        height: 50px;
    }
    .paw-title2 {
        font-size: 17px;
    }
    .paw-title2 svg {
        top: -11px;
        right: -13px;
        font-size: 16px;
    }
    /* 370370 */
}

@media (max-width: 340px) {
    .custom-login-card .card-body {
        padding: 5px 3px;
    }

    .reactive-tooltip::after {
        max-width: 170px;
    }
    /* 340340 */
}