body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    align-content: flex-start;
    background-color: #b9fff4a8;
}

.pageBack {
    top: 15px;
    z-index: 1;
    left: 15px;
    right: 60px;
    bottom: 15px;
    position: absolute;
    border: 1px solid #000;
    background-color: #fff;
    box-shadow: 0px 5px 15px 5px #a7a3a3;
}

.pageHole {
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    position: absolute;
    border-radius: 26px;
    border: 1px solid #000;
    background-color: #b9fff4a8;
    box-shadow: inset 6px 0px 0px 0px #818080;
}

.botoPadlock {
    top: 13px;
    right: -60px;
    width: 100px;
    height: 100px;
    cursor: pointer;
    position: absolute;
    background-size: 100px;
    background-image: url("../images/candado.png");
}

.botoLabel {
    top: 13px;
    right: -60px;
    width: 100px;
    display: none;
    height: 153px;
    cursor: pointer;
    position: absolute;
    background-size: 100px;
    background-image: url("../images/etiqueta.png");
}

.textLabel {
    top: 84px;
    right: 10px;
    width: 80px;
    cursor: pointer;
    font-size: 25px;
    overflow: hidden;
    font-weight: bold;
    position: absolute;
    text-align: center;
    transform: rotate(67deg);
    text-overflow: ellipsis;
}

.pageFront {
    top: 15px;
    left: 15px;
    z-index: 2;
    right: 85px;
    bottom: 15px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    flex-direction: row;
}

.divIcon {
    width: 10%;
    height: 10%;
}

.divTitu {
    width: 90%;
    height: 10%;
}

.firstTitle {
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-size: 30px;
}

.seconTitle {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

.thirdTitle {
    margin: 0;
    padding: 0;
    font-size: 10px;
}

.divBody {
    width: 100%;
    height: 80%;
    overflow: auto;
}

.divMenu {
    width: 25%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menuIcon {
    width: 60px;
    cursor: pointer;
    filter: grayscale(100%);
    opacity: 0.5;
}

.menuIcon:hover {
    width: 70px;
    filter: grayscale(0%);
    opacity: 1;
}

.mBases {
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    z-index: 1000;
    position: absolute;
    background-color: #eeeeeebb;
}

.mCurso {
    right: 1px;
    bottom: 1px;
    width: 1px;
    height: 1px;
    border: none;
    outline: none;
    z-index: 1001;
    position: absolute;
    text-decoration: none;
    caret-color: transparent;
    background-color: transparent;
}

.mBorde {
    top: 200px;
    left: 350px;
    width: 800px;
    height: 450px;
    z-index: 1002;
    position: absolute;
    border-radius: 10px;
    border: 1px solid #ade8f1;
    background-color: #7ac7c740;
}

.mTitle {
    top: 4%;
    left: 2%;
    right: 3%;
    bottom: 88%;
    padding: 8px;
    z-index: 1003;
    font-weight: bold;
    border-radius: 8px;
    position: absolute;
    border: 1px solid #cecece;
    background: linear-gradient(90deg, rgba(204, 204, 204, 1) 50%, rgba(255, 255, 255, 1) 91%);
}

.mClose {
    top: 2.5%;
    right: 2%;
    width: 6%;
    height: 10%;
    z-index: 1003;
    cursor: pointer;
    font-weight: bold;
    border-radius: 50%;
    position: absolute;
    align-items: center;
    justify-content: center;
    border: 1px solid #b10000;
    background-color: #fd8e8e;
}

.mClose:hover {
    color: #ffffff;
    background-color: #df4040;
    box-shadow: 2px 2px #cbcbcb;
}

.mFrame {
    top: 13%;
    left: 2%;
    right: 2%;
    bottom: 3%;
    padding: 8px;
    z-index: 1003;
    position: absolute;
    border-radius: 10px;
    border: 1px solid #a5a5a5;
    background-color: #ffffff;

}

/* Ajsutes de pantalla */
@media (max-width: 1200px) {
    .divIcon {
        width: 15%;
    }

    .divTitu {
        width: 85%;
    }

    .mBorde {
        left: 5vw;
        width: 80vw;
    }

    .mClose {
        width: 5%;
    }
}

@media (max-width: 980px) {
    .divIcon {
        width: 15%;
    }

    .divTitu {
        width: 85%;
    }

    .mBorde {
        left: 5vw;
        width: 80vw;
    }

    .mClose {
        width: 6%;
    }
}

@media (max-width: 700px) {
    .divIcon {
        width: 20%;
    }

    .divTitu {
        width: 80%;
    }

    .mClose {
        width: 8%;
    }
}

@media (max-width: 600px) {
    .divIcon {
        width: 30%;
    }

    .divTitu {
        width: 70%;
    }

    .mBorde {
        left: 4vw;
        width: 81vw;
    }

    .mClose {
        width: 13%;
    }
}

@media (max-width: 400px) {
    .divIcon {
        width: 40%;
    }

    .divTitu {
        width: 60%;
    }

    .mBorde {
        width: 75vw;
    }

    .mClose {
        width: 14%;
    }
}

/* Pendientes por validar y probar */

.mButto {
    width: 5vw;
    bottom: -2.5vh;
    border-radius: 0.5vw;
    font-weight: bold;
    text-align: center;
    padding: 0.5vw;
    position: absolute;
    cursor: pointer;
    z-index: 1004;
}

.mButto1 {
    right: 1vw;
}

.mButto2 {
    right: 7.4vw;
}

.mBGreen {
    border: 1px solid #117d37;
    background: #51d981;
}

.mBGreen:hover {
    border: 1px solid #22e567;
    background: #21a54f;
    color: #ffffff;
    box-shadow: 2px 2px #cbcbcb;
}

.mBRed {
    border: 1px solid #851518;
    background: #f1a1a4;
}

.mBRed:hover {
    border: 1px solid #fd292f;
    background: #a73a3f;
    color: #ffffff;
    box-shadow: 2px 2px #cbcbcb;
}