/* .card-custom {
    position: relative;
    width: 160px;
}

.card.custom .face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    transition: 0.5s;
}

.card-custom .front {
    transform: perspective(600px) rotateY(180deg);
    box-shadow: 0 5px 10px #000;
}

.card-custom .front img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .card-custom .back {
    transform: perspective(600px) rotateY(180deg);
    background: rgb(3, 35, 54);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
} */

/* .card-custom:hover .front {
    transform: perspective(600px), rotateY(0deg);
} */

/* .card-custom:hover .back {
    transform: perspective(600px), rotateY(360deg);
} */
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 150px;
    border: 1px solid #f1f1f1;
    border-radius: 15px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    margin-bottom: 20px;
    padding: 1rem;
    /* padding: 160px 20px 20px 20px; */
}

.flip-card-lg {
    background-color: transparent;
    width: 300px;
    height: 150px;
    /* border: 1px solid #f1f1f1; */
    border-radius: 15px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    margin-bottom: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    border-radius: 15px;
}

.flip-card-inner-lg {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    border-radius: 15px;
}
.flip-card-inner img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    border-radius: 15px;
}

/* @media (min-width: 200px) {
    .div_flip{
        height: 200vh;
    }
}

@media (min-width: 768px) {
    .div_flip{
        height: 95vh;
    }
}
@media (min-width: 1024px) {
    .div_flip{
        height: 95vh;
    }
} */

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-lg:hover .flip-card-inner-lg {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    border-radius: 15px;
    box-shadow: 0 5px 10px #000;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #bbb;
    color: black;
}

/* Style the back side */
.flip-card-back {
    background-color: black;
    color: white;
    transform: rotateY(180deg);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.plantillas_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.plantillas_container .plantilla_images {
    width: 30%;
}

.p-template {
    display: flex;
    overflow-wrap: break-word;
}

.images-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.images-content .flip-card {
    width: 30%;
}

/* .images-content img {
    width: 30%;
} */
.img_content_two {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.img_content_two .flip-card {
    width: 30%;
}

.contenedor_btn {
    width: 90px;
    height: 240px;
    position: absolute;
    right: 0px;
    bottom: 0px;
}
.botonF1 {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #f44336;
    right: 0;
    bottom: 0;
    position: absolute;
    margin-right: 16px;
    margin-bottom: 16px;
    border: none;
    outline: none;
    color: #fff;
    font-size: 36px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    transition: 0.3s;
}
span .span_float {
    transition: 0.5s;
}
.botonF1:hover span {
    transform: rotate(360deg);
}
.botonF1:active {
    transform: scale(1.1);
}
.btn_float {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: none;
    color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    font-size: 28px;
    outline: none;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 26px;
    transform: scale(0);
}
.botonF2 {
    background: #2196f3;
    margin-bottom: 85px;
    transition: 0.5s;
}
.botonF3 {
    background: #673ab7;
    margin-bottom: 130px;
    transition: 0.7s;
}
.botonF4 {
    background: #009688;
    margin-bottom: 175px;
    transition: 0.9s;
}
.botonF5 {
    background: #ff5722;
    margin-bottom: 220px;
    transition: 0.99s;
}
.animacionVer {
    transform: scale(1);
}

.link-action:checked {
    background-color: rgb(4, 117, 32);
    border-color: rgb(2, 70, 22);
}

.colored-toast.swal2-icon-success {
    background-color: #a5dc86 !important;
}
.colored-toast.swal2-icon-error {
    background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
    background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
    background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
    background-color: #87adbd !important;
}

.colored-toast .swal2-title {
    color: white;
    font-size: 5rem;
}

.colored-toast .swal2-close {
    color: white;
    font-size: 5rem;
}

.colored-toast .swal2-html-container {
    color: white;
    font-size: 5rem;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    place-items: center;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

video {
    display: block;
    max-width: 80rem;
}
.fijar-body {
    overflow: hidden;
}
.btn-cerrar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: azure;
    color: black;
    display: grid;
    place-items: center;
    font-weight: 700;
}
.btn-cerrar:hover {
    cursor: pointer;
}

.overlay_pdf {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    place-items: center;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn-pdf {
    position: absolute;
    bottom: 80%;
    right: 3%;
}
.btn-x {
    border-radius: 100%;
}

.btn-flotante {
    font-size: 10px;
    /* Cambiar el tamaño de la tipografia */
    text-transform: uppercase;
    /* Texto en mayusculas */
    font-weight: bold;
    /* Fuente en negrita o bold */
    color: #ffffff;
    /* Color del texto */
    border-radius: 50%;
    /* Borde del boton */
    letter-spacing: 2px;
    /* Espacio entre letras */
    background-color: #e91e63;
    /* Color de fondo */
    padding: 18px 30px;
    /* Relleno del boton */
    position: fixed;
    bottom: 40px;
    left: 40px;
    transition: all 300ms ease 0ms;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    z-index: 99;
}

.btn-flotante:hover {
    background-color: #2c2fa5;
    /* Color de fondo al pasar el cursor */
    box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-7px);
}

@media only screen and (max-width: 600px) {
    .btn-flotante {
        font-size: 8px;
        padding: 12px 20px;
        bottom: 20px;
        /* right: 0px; */
    }
}

/*--------------------------------------------------------------
            # Preloader
            --------------------------------------------------------------*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #151515;
    /* background-image: url('../../img/fondoloader.png');
    background-size: cover;
    background-repeat: no-repeat; */
}

#preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 0px);
    left: calc(50% - 30px);
    border: 6px solid;
    /* border-image: linear-gradient(14deg, rgba(102,80,241,1) 2%, rgba(13,255,90,1) 100%); */
    border-image: linear-gradient(to bottom, #0dff5a 0%, #6650f1 100%) 1;;
    /* border: 6px solid #6650f1;
    border-top-color: #0dff5a;
    border-bottom-color: #0dff5a; */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -webkit-animation: animate-preloader 1s linear infinite;
    animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

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