@import url('../fonts/gliker/stylesheet.css');

body {
    text-justify: auto;
    font-family: 'Lucida Sans';
    background-image: url('/public/images/patron_patitas\ 70x70.png');
    background-repeat: repeat; 
    padding-top: 80px;
}

#main {
    background-color: #FFED9C !important;
    max-width: none !important;
    width: 80% !important;
}


.navbar {
    margin: 0;
    border-radius: 0;
}

footer {
    background-color: #f2f2f2;
    padding: 25px;
}

.card {
    width: 45% !important;
    max-width: 600px !important;
    background-color: #F4A894 !important;
    border-radius: 15px !important;
    box-shadow: 2px 2px 2px rgb(83, 83, 83), 3px 3px 3px rgb(83, 83, 83), 4px 4px 5px rgb(83, 83, 83), 5px 5px 7px rgb(83, 83, 83) !important;

    .title {
        font-size: 2rem !important;
    }

    .description {
        font-family: Verdana, Geneva, Tahoma, sans-serif !important;
        font-size: 1.3rem !important;
        color: #9b0158 !important;
    }

    .buttons {

        a button, button {
            box-shadow: 2px 2px 2px rgb(83, 83, 83), 3px 3px 3px rgb(83, 83, 83), 4px 4px 5px rgb(83, 83, 83), 5px 5px 7px rgb(83, 83, 83) !important;

            &:active {
                box-shadow: 0px 0px 5px black inset !important;
            }
        }

        .boton_eliminar {
            background-color: #ff4457 !important;
            text-shadow: 0px 0px 5px rgb(0, 0, 0) !important;
        }

        
        .boton_editar:hover {
            background-color: #ffdb6e !important;
            text-shadow: 0px 0px 5px yellow !important;
        }

        .boton_habilitar:hover {
            background-color: #5ee4ff !important;
            text-shadow: 0px 0px 5px #c0f4ff !important;
        }
        
            
    }
}

.selected_card {
    /* box-shadow: 2px 2px 2px rgb(255, 174, 0), 3px 3px 3px rgb(255, 174, 0), 4px 4px 5px rgb(255, 174, 0), 5px 5px 7px rgb(255, 174, 0) !important; */
    background: linear-gradient(220deg, rgba(131,0,199,1) 0%, rgba(201,169,218,1) 60%, rgba(131,0,199,1) 100%) !important;
}

.page-link{
    background-color: #fdcf00 !important;
    color: #DA0E83 !important;
    border-color: #DA0E83 !important;

    &:hover {
        background-color: #DA0E83 !important;
        color: #fdcf00 !important;
    }

    &:active {
        background-color: #f594cb !important;
        color: #fdcf00 !important;
    }

    &.active {
        background-color: #ff0090 !important;
        color: #fdcf00 !important;
    }

    &.disabled {
        background-color: #d3c58a !important;
        color: #79714d !important;
        border-color: #79714d !important;
    }
}

@media (max-width: 800px) {
    #main {
        width: 100% !important;

        .card-responsive {
        width: 90% !important;
        }

    }
}


/* Estilos específicos para el slider */
img-comparison-slider {
width: 100%;
max-width: 600px; /* Ajusta esto según tus necesidades */
margin: 0 auto; /* Centra el slider */
display: block;
background: none; /* Elimina el recuadro negro */
}

img-comparison-slider img {
display: block;
max-width: 100%;
height: auto;
}









/* Loader */

@keyframes ldio-4j5ay0xf86g {
    0% {
     opacity: 1
    }
   
    100% {
     opacity: 0
    }
}

.ldio-4j5ay0xf86g div {
left: 94px;
top: 48px;
position: absolute;
animation: ldio-4j5ay0xf86g linear 1s infinite;
background: #fe718d;
width: 12px;
height: 24px;
border-radius: 6px / 12px;
transform-origin: 6px 52px;
}

.ldio-4j5ay0xf86g div:nth-child(1) {
transform: rotate(0deg);
animation-delay: -0.9166666666666666s;
background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(2) {
transform: rotate(30deg);
animation-delay: -0.8333333333333334s;
background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(3) {
transform: rotate(60deg);
animation-delay: -0.75s;
background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(4) {
transform: rotate(90deg);
animation-delay: -0.6666666666666666s;
background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(5) {
transform: rotate(120deg);
animation-delay: -0.5833333333333334s;
background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(6) {
transform: rotate(150deg);
animation-delay: -0.5s;
background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(7) {
transform: rotate(180deg);
animation-delay: -0.4166666666666667s;
background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(8) {
transform: rotate(210deg);
animation-delay: -0.3333333333333333s;
background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(9) {
transform: rotate(240deg);
animation-delay: -0.25s;
background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(10) {
transform: rotate(270deg);
animation-delay: -0.16666666666666666s;
background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(11) {
transform: rotate(300deg);
animation-delay: -0.08333333333333333s;
background: #fe718d;
}

.ldio-4j5ay0xf86g div:nth-child(12) {
transform: rotate(330deg);
animation-delay: 0s;
background: #fe718d;
}

.loadingio-spinner-spinner-977el9wwy2v {
width: 200px;
height: 200px;
display: inline-block;
overflow: hidden;
}

.ldio-4j5ay0xf86g {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0;
/* see note above */
}

.ldio-4j5ay0xf86g div {
box-sizing: content-box;
}