/*
    Aquí estan los css del tutorial, sin estos no va a funcionar adecuadamente ¡No Olvidar!
    -jj-
*/
.mostOuterDiv {
    margin: 0 auto;
    /*width: 0%;
    /* margin-top: -9em;
    margin-left: 50%;
    transform: translateY(-60%);
       */
  /*  margin: 0 auto;*/
    width: 100%;
   /* background: red;*/
    margin-top: -9em;
    margin-left: 0%;
    transform: translateY(-99%);
    position: absolute;
    min-height: 3px;
}

.OuterGrid, .OuterGridM, .OuterGridL {
    display: grid;
    grid-template-areas: 'Upper Upper Upper Upper Upper Upper' 'TextArea TextArea TextArea TextArea TextArea TextArea' 'TextArea TextArea TextArea TextArea TextArea TextArea' 'TextArea TextArea TextArea TextArea TextArea TextArea' 'TextArea TextArea TextArea TextArea TextArea TextArea' 'TextArea TextArea TextArea TextArea TextArea TextArea' 'TextArea TextArea TextArea TextArea TextArea TextArea';
    grid-gap: .01em;
    width: 40em;
    border: #bbb 0.01em;
    border-style: solid solid none solid;
    border-radius: 1.1em;
    background-color: white;
    border-collapse: collapse;
    bottom: -9em;
    position: absolute;
    border-bottom : 1px solid #bbb;
}

.OuterGrid {
    position : relative;
    height: 14em;
    margin : 0 auto;
    margin-top: 3.39em;
    
}

.OuterGridM {
    position: relative;
    height: 21em;
    margin: 0 auto;
    margin-top: .55em;
}

.OuterGridL {
    position:relative;
    height: 32em;
    margin: 0 auto;
    margin-top: -12.8em;
}

.OuterGrid > div, .OuterGridM > div, .OuterGridL > div {
    text-align: center;
    padding: 20px;
    font-size: 10px;
}

.Upper {
    grid-area: Upper;
    background-color: #808fae;
    border-radius: 1.1em 1.1em 0em 0em;
    height: 2.5em;
    width: 100%;
}

.OuterGridL {
    /*margin-left : 40%*/
}


.UpperLeft {
    display: flex;
    height: 100%;
    width: 10%;
    max-width: 5.25em;
    min-height: 4em;
    border: .1em solid white;
    border-style: none solid none none;
    margin-top: -2em;
    margin-left: -2.5em;
    padding-left: .75em;
}

.UpperRight {
    display: flex;
    position: relative;
    width: 34.5em;
    height: 2.25em;
    float: right;
    bottom: 1em;
    margin-top: -2em;
    margin-right: -1em;
    padding-right: 3.5em;
}

.DownText {
    display: flex;
    grid-area: TextArea;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

    .DownText > span {
        align-items: left;
        justify-content: left;
        /*overflow: hidden;*/
        margin-top: -1.25em;
    }

.tutCard {
    width: 10%;
    height: 10%;
    background-color: #808fae;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6em;
    font-style: normal;
    font-weight: bold;
    margin: auto;
}

.tutText {
    height: 100%;
    width: 100%;
    font-size: 17px;
    text-align: justify;
    text-justify: inter-word;
    color: #666666;
    padding: 5%;
}

/*TODO: FIX*/
div.tooltip::before {
    background-color: #020252 !important;
}
/*END*/

.OuterGridMin {
    display: block;
    width: 40em;
    height: 3em;
    margin-top: 7.8em;
    border: #bbb 0.01em;
    border-style: solid solid none solid;
    border-radius: 1.1em 1.1em 0em 0em;
    background-color: rgba(255, 255, 255, 0.8);
    border-collapse: collapse;
}

    .OuterGridMin > div {
        text-align: center;
        padding: 20px;
        font-size: 10px;
    }

    .OuterGridMin > .Upper {
        display: block;
        background-color: #808fae;
        border-radius: 1.1em 1.1em 0em 0em;
        height: 100%;
        width: 100%;
    }

/*.posLeft {
    margin-left: -40em;
}

.posRight {
    margin-left: 32em;
}*/

.posRight {
    right: 35px;
    float: right
}

.posLeft {
    left: 35px;
    float: left
}
.posCenterRight {
    right: 20%;
    float: right
}
.posCenterLeft {
    left: 20%;
    float: left
}
@media only screen and (max-width: 115em) {
   /* .posRight {
        margin-left: 27em;
    }

    .posLeft {
        margin-left: -30em;
    }*/
}

@media only screen and (max-width: 99em) {
    /*.posRight {
        margin-left: 20em;
    }

    .posLeft {
        margin-left: -25em;
    }*/
}

@media only screen and (max-width: 90em) {
  /*  .posRight {
        margin-left: 15em;
    }*/
}

@media only screen and (max-width: 80em) {
    /*.posRight {
        margin-left: 12.5em;
    }

    .posLeft {
        margin-left: -20em;
    }*/
}

@media only screen and (max-width: 78em) {
    /*.mostOuterDiv {
        margin-left: 45%;
    }

    /*.posLeft {
        margin-left: -15em;
    }*/
}

@media only screen and (max-width: 68em) {
    .mostOuterDiv {
        margin-left: 35%;
    }

    /*.posLeft, .posRight {
        margin-left: 10%;
    }*/
}

@media only screen and (max-width: 40em) {
    .mostOuterDiv {
        margin-left: 25%;
    }
}

.innerDivButton1 {
    background-image: url(../css/images/iconos/video.svg);
    background-size: auto;
    display: inline-flex;
    position: relative;
    min-height: 2.3em;
    min-width: 2.3em;
    margin-left: 5%;
    border-radius: .35em;
    text-align: center;
}

    .innerDivButton1:hover {
        background-image: url(../css/images/iconos/a_video.svg);
        background-size: auto;
        display: inline-flex;
        position: relative;
        min-height: 2.3em;
        min-width: 2.3em;
        border-radius: .35em;
        text-align: center;
    }

.innerDivButton2 {
    background-image: url(../css/images/iconos/sonido.svg);
    background-size: auto;
    display: inline-flex;
    position: relative;
    min-height: 2.3em;
    min-width: 2.3em;
    margin-left: 5%;
    border-radius: .35em;
    text-align: center;
}

    .innerDivButton2:hover {
        background-image: url(../css/images/iconos/a_sonido.svg);
        background-size: auto;
        display: inline-flex;
        position: relative;
        min-height: 2.3em;
        min-width: 2.3em;
        border-radius: .35em;
        text-align: center;
    }

.innerDivButton3 {
    background-image: url(../css/images/iconos/texto.svg);
    background-size: auto;
    display: inline-flex;
    position: relative;
    min-height: 2.3em;
    min-width: 2.3em;
    margin-left: 5%;
    border-radius: .35em;
    text-align: center;
}

    .innerDivButton3:hover {
        background-image: url(../css/images/iconos/a_texto.svg);
        background-size: auto;
        display: inline-flex;
        position: relative;
        min-height: 2.3em;
        min-width: 2.3em;
        border-radius: .35em;
        text-align: center;
    }

.innerDivButton4 {
    background-image: url(../css/images/iconos/minimizar.svg);
    background-size: auto;
    display: inline-flex;
    position: relative;
    min-height: 2.3em;
    min-width: 2.3em;
    margin-left: 5%;
    border-radius: .35em;
    text-align: center;
}

    .innerDivButton4:hover {
        background-image: url(../css/images/iconos/a_minimizar.svg);
        background-size: auto;
        display: inline-flex;
        position: relative;
        min-height: 2.3em;
        min-width: 2.3em;
        border-radius: .35em;
        text-align: center;
    }

.innerDivButton5 {
    background-image: url(../css/images/iconos/cerrar.svg);
    background-size: auto;
    display: inline-flex;
    position: relative;
    min-height: 2.3em;
    min-width: 2.3em;
    margin-left: 5%;
    border-radius: .35em;
    text-align: center;
}

    .innerDivButton5:hover {
        background-image: url(../css/images/iconos/a_cerrar.svg);
        background-size: auto;
        display: inline-flex;
        position: relative;
        min-height: 2.3em;
        min-width: 2.3em;
        border-radius: .35em;
        text-align: center;
    }


.innerDivButton6 {
    background-image: url(../css/images/iconos/tutorial.svg);
    background-size: auto;
    display: inline-flex;
    position: relative;
    min-height: 2.3em;
    min-width: 2.3em;
    margin-left: 5%;
    border-radius: .35em;
    text-align: center;
}

    .innerDivButton6:hover {
        background-image: url(../css/images/iconos/a_tutorial.svg);
        background-size: auto;
        display: inline-flex;
        position: relative;
        min-height: 2.3em;
        min-width: 2.3em;
        border-radius: .35em;
        text-align: center;
    }

.innerDivButton7 {
    background-image: url(../css/images/iconos/atras.svg);
    background-size: auto;
    display: inline-flex;
    position: relative;
    min-height: 2.3em;
    min-width: 2.3em;
    margin-left: 5%;
    border-radius: .35em;
    text-align: center;
}

    .innerDivButton7:hover {
        background-image: url(../css/images/iconos/a_atras.svg);
        background-size: auto;
        display: inline-flex;
        position: relative;
        min-height: 2.3em;
        min-width: 2.3em;
        border-radius: .35em;
        text-align: center;
    }

.innerDivButton8 {
    background-image: url(../css/images/iconos/adelante.svg);
    background-size: auto;
    display: inline-flex;
    position: relative;
    min-height: 2.3em;
    min-width: 2.3em;
    margin-left: 5%;
    border-radius: .35em;
    text-align: center;
}

    .innerDivButton8:hover {
        background-image: url(../css/images/iconos/a_adelante.svg);
        background-size: auto;
        display: inline-flex;
        position: relative;
        min-height: 2.3em;
        min-width: 2.3em;
        border-radius: .35em;
        text-align: center;
    }

.innerDivSpacer1, .innerDivSpacer2 {
    background-color: #808fae;
    border: .125em solid white;
    display: inline-flex;
    position: relative;
    height: 2.5em;
    width: 2.3em;
    margin-left: 5%;
    margin-top: -.2em;
    border-radius: .35em;
    text-align: center;
}

/* Circulo */
.dot {
    height: 2.8em;
    width: 2.8em;
    border: .2em solid #808fae;
    border-radius: 20%;
    background-color: #808fae;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .dot span {
        height: 1.9em;
        width: 1.9em;
        font-size: 2.3em;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        color: white;
    }

/*TODO: Reservado para clases que cambian la ubicación de los circulos*/
.rightDotPosition {
    position: relative;
    /*z-index: 9;*/
    margin: -2.8em 0 0 -3.1em;
}

/* Addiciones para hacer el modal funcionar */
/* The Modal (background) */
ui.modal.tutorial {
    border-radius: 25px 25px 25px 25px !important;
}

.modal.tutorial {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content.tutorial {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close.tutorial {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close.tutorial:hover,
    .close.tutorial:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }