body {
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #fff;
    border: #343a40;
}

.full-height {
    height: 100vh;
    max-height: 100vh;
    /* Establece la altura al 100% de la altura de la ventana. */
}

.minibox {
    width: 50px;
    height: 55px;
    display: inline-block;
    margin: 0 0;
    margin-right: -6px;
    visibility: hidden;
}

.cont-mosaico-main {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    transform: scale(1.4);
    transform-origin: top left;
}

.cont-mini {
    margin-bottom: -10px;
}

.cm1 {
    background-color: #4e555c;
}

.cm2 {
    background-color: #222b33;
}

.cm3 {
    background-color: #fff;
}

.cm4 {
    background-color: #656b71;
}

.cm5 {
    background-color: #101720;
}

.cm6 {
    background-color: #353f47;
}

.cm7 {
    background-color: #94989d;
}

.cm8 {
    background-color: #7b8187;
}

.cm9 {
    background-color: #63696f;
}

.cm10 {
    background-color: #7a8086;
}

.cm11 {
    background-color: #646a70;
}

.cm12 {
    background-color: #111821;
}

.fade-in {
    opacity: 0;
    /* Inicialmente, oculta el elemento */
    transform: translateY(-20px);
    /* Desplaza el elemento hacia arriba */
    animation: fadeInAnimation 0.5s ease-in-out forwards;
    /* Aplica la animación */
}

.shadow-g {
    z-index: 2;
    box-shadow: 1px 1px 1px 1px #646a70;
    position: relative;
}

.c1-1 {
    position: absolute;
    margin: 20px;
    z-index: 2;
}

.c1-2 {
    position: absolute;
    margin-left: 20px;
    z-index: 2;
    width: 55px;
    height: 60px;
}

.c1-3 {
    position: absolute;
    margin: 20px;
    z-index: 2;
    width: 65px;
    height: 65px;
}

.c2-1 {
    position: absolute;
    z-index: 2;
    width: 35px;
    height: 65px;
}

.c2-2 {
    margin-left: 35px;
    z-index: 2;
    width: 35px;
}

.c2-3 {
    position: absolute;
    margin: 12px;
    z-index: 2;
    width: 25px;
    height: 25px;
}

.c3-1 {
    position: absolute;
    margin: 20px;
}

.c4-1 {
    z-index: 3;
    position: absolute;
}

.c4-2 {
    position: absolute;
    margin: 10px 20px;
    z-index: 2;
    width: 80px;
    height: 80px;
}

.c4-3 {
    position: absolute;
    margin: 24px 14px;
    z-index: 2;
    width: 55px;
    height: 55px;
}

.c4-4 {
    position: absolute;
    margin: 20px 200px;
    z-index: 2;
    width: 30px;
    height: 30px;
}

.c5-1 {
    position: absolute;
    margin: -2px -2px;
    z-index: 2;
    width: 34px;
    height: 34px;
}

.c7-1 {
    width: 48px;
    margin: 0px 2px;
    z-index: 2;
    position: absolute;
}

.c7-2 {
    width: 60px;
    height: 60px;
    margin: 16px 20px;
    z-index: 2;
}

.c7-3 {
    position: absolute;
    width: 28px;
    height: 28px;
    margin-left: -1px;
    z-index: 2;
}

.c8-1 {
    position: absolute;
    width: 32px;
    height: 32px;
    margin: 40px 30px;
    z-index: 2;
}

.cont-mosaico {
    position: absolute;
    transform: scale(0.8);
    transform-origin: top left;
}

.fade-in {
    opacity: 0;
    /* Inicialmente, oculta el elemento */
    transform: translateY(-20px);
    /* Desplaza el elemento hacia arriba */
    animation: fadeInAnimation 0.5s ease-in-out forwards;
    /* Aplica la animación */
}

.fade-in:hover {
    /* Puedes aplicar estilos adicionales aquí, por ejemplo, cambiar el color de fondo */
    background-color: #f0f0f0;
    cursor: pointer;
    /* Cambia el cursor a una mano */
}

/* Define la animación */
@keyframes fadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 800px) {
    .minibox {
        width: 30px;
        height: 30px;
        display: inline-block;
        visibility: hidden;
    }

    .img-login-satori {
        height: 80px;
    }

    .minibox.cm7.t14.c4-4 {
        display: none !important;
    }
}

@media screen and (max-width: 670px) {
    .cont-mosaico {
        transform: scale(0.5);
    }
}