body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;

}

/*
 * ──────────────────────────────────────────────────────────────── PRELOADER ─────
 */

 .lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}

.lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
}

.lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
}

.lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
}

.lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}

.lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
}

.lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
}

.lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
}

.lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
}

.hidd{
    overflow: hidden;
}

.centrado{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

div {
    display: block;
}

.upper {
    text-transform: uppercase;
}


.header {
    width: 100%;
    height: 100vh;
    background: url(../img/Banner\ Header.png);
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.container2 {
    margin: 0 auto;
    max-width: 1400px;
    width: 90%;
}

.container3 {
    margin: 0 auto;
    max-width: 350px;
}

.centrar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.separar {
    display: flex;
    margin-top: 1rem;
    justify-content: space-between;
}

.separarRecuadro {
    padding-top: 40px;
}

.separador {
    margin-top: 20px;
}

.separador2 {
    padding-bottom: 30px;
}

.separado {
    padding: 1.3rem;
}

h1,
h2,
h3,
h4,
h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

p {
    font-size: 1.1rem;
    margin-top: 0;
}

.negrita {
    font-weight: 700;
}


.texoIntex {
    font-size: 10rem;
    color: #fff;
    text-align: center;
}

.color {
    color: #fff;
    text-align: center;
}

.fina {
    font-weight: 200;
}

.mediana {
    font-weight: 400;
}

.grande {
    font-size: 1.3rem;
    font-weight: 600;
}

.chiquita {
    font-size: 0.9rem;
}

.chiquitica {
    font-size: 0.75rem;
}

.tamañoMediano {
    font-size: 0.8rem;
    font-weight: 400;
}

.todo {
    width: 100%;
    height: 80vh;
}

.espacioSuperior {
    margin-top: 8rem;
}

.tamañoLogo {
    width: 8rem;
}

.tamañoLogoLogin {
    width: 17rem;
}

.headerLogin {
    width: 100%;
    height: 100vh;
    background-image: url(../img/Banner\ Header.png);
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.login {
    padding-top: 35px;
}

.login label {
    font-size: 14px;
}

.divNav {
    display: flex;
    padding-top: 1rem;
    justify-content: space-between;
    align-items: center;
}

.action-btn-wrapper {
    position: absolute;

}



@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }

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



/*Inicio estilo boton editar*/
@media all and (max-width: 323px) and (min-width: 283px) {

    .editmode {
        display: flex;

        position: absolute;
        top: 2em;
        left: 0;
        width: 30em;
        height: 20em;
        margin-left: 200px;

    }



}


@media all and (max-width: 282px) {

    .editmode {
        display: flex;

        position: absolute;
        top: 2em;
        left: 0;
        width: 30em;
        height: 20em;
        margin-left: 170px;

    }

}


@media all and (max-width: 540px) and (min-width: 325px) {

    .editmode {
        display: flex;

        position: absolute;
        top: 2em;
        left: 0;
        width: 30em;
        height: 20em;
        margin-left: 250px;

    }

}

@media all and (min-width: 541px) and (max-width: 545px) {

    .editmode {
        display: flex;

        position: absolute;
        top: 2em;
        left: 0;
        width: 30em;
        height: 20em;
        margin-left: 93%;



    }

}


@media all and (min-width: 50px) and (max-width: 120px) {

    .editmode {
        display: flex;

        position: absolute;
        top: 2em;
        left: 0;
        width: 30em;
        height: 20em;
        margin-left: 19%;



    }
}


@media all and (min-width: 120px) and (max-width: 282px) {

    .editmode {
        display: flex;

        position: absolute;
        top: 2em;
        left: 0;
        width: 30em;
        height: 20em;
        margin-left: 19%;



    }
}


@media all and (min-width: 540px) and (max-width: 759px) {

    .editmode {
        display: flex;

        position: absolute;
        top: 2em;
        left: 0;
        width: 30em;
        height: 20em;
        margin-left: 80%;



    }
}

@media all and (min-width: 460px) and (max-width: 539px) {

    .editmode {
        display: flex;

        position: absolute;
        top: 2em;
        left: 0;
        width: 30em;
        height: 20em;
        margin-left: 80%;



    }
}


@media all and (min-width: 760px) and (max-width: 1080px) {

    .editmode {
        display: flex;

        position: absolute;
        top: 2em;
        left: 0;
        width: 30em;
        height: 20em;
        margin-left: 89%;



    }
}

@media all and (min-width: 1081px) {

    .editmode {
        display: flex;

        position: absolute;
        top: 2em;
        left: 0;
        width: 30em;
        height: 20em;
        margin-left: 93%;



    }
}




/*Fin estilo boton editar*/



/*Inicio estilo pasos*/
@media all and (max-width: 600px) {
    .imge {
        display: flex;
        position: relative;
        height: 40px;
        max-width: 40%;
        margin-right: 60%;





    }

    .text-blanco {
        display: flex;
        margin: 0;
        width: 47px;
        height: 60px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;


    }

    .responsives {
        font-size: 0px;

        position: relative;
    }

    .pasos {
        width: 60px;
        display: flex;
        justify-content: center;
        margin-left: 40%;

    }






    .paso1 {
        width: 100px;
        height: 60px;
        background: #407352;
        border-radius: 50%;
        transition: 0.3s;
        margin-top: 8px;

    }

    .paso1:last-of-type {
        margin: 0;
    }

    .paso1:hover {
        transform: scale(1.2);
        background: #407352ea;
    }



    .paso2 {
        width: 100px;
        height: 60px;
        background: #939598;
        border-radius: 50%;
        transition: 0.3s;
    }

    .paso2:hover {
        transform: scale(1.2);
        background: #939598;
    }

    .paso2:last-of-type {
        margin: 0;
    }



}



@media all and (min-width: 601px) {
    .text-blanco {
        display: flex;
        margin: 0;
        width: 90px;
        height: 90px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;

    }

    .responsives {
        font-size: 0px;

        position: relative;
    }

    .pasos {
        display: flex;
        justify-content: center;
    }


    .paso1 {
        width: 90px;
        height: 90px;
        background: #407352;
        border-radius: 50%;
        transition: 0.3s;
    }

    .paso1:last-of-type {
        margin: 0;
    }

    .paso1:hover {
        transform: scale(1.2);
        background: #407352ea;
    }



    .paso2 {
        width: 90px;
        height: 90px;
        background: #939598;
        border-radius: 50%;
        transition: 0.3s;
    }


    .paso2:last-of-type {
        margin: 0;
    }

    .paso2:hover {
        transform: scale(1.2);
        background: #939598;
    }


}


/*Fin estilo pasos*/

.fixed-action-btn.my-custom-btn {
    position: relative;
    right: 10px;
    top: 1px;
    padding-top: 1px;
    margin-bottom: 0;
}

.cuadroHome {
    height: 600px;
}

.colorBoton {
    color: #407352;

}

#dvOculto {

    display: none;
}

#dvOcultar {

    display: none;
}


#dvOcultar2 {

    display: none;
}

#dvOcultar3 {

    display: none;
}


#dvOcultar4 {

    display: none;
}

#dvOcultar5 {

    display: none;
}

.tr:hover td {

    background-color: #c4ccd9;
    cursor: pointer;
    transition: 0.2s;
}

.posicionGrafico {
    padding-right: 10rem;
}

.posicionTitulo {
    padding-right: 13.3rem;
    padding-bottom: 2rem;
    color: #407352;
    font-weight: 700;
}

.containerGrafico {
    margin-bottom: 5rem;
    text-align: center;
    font-weight: 600;
    color: #407352;
}

.containerPasos {
    width: 100%;
    max-width: 1200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}







.flecha img {
    width: 40px;
    margin: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#players {

    display: block;


}


#players:hover {

    cursor: pointer;


}

#players:focus {

    border-bottom: 1px solid #26a69a;
    -webkit-box-shadow: 0 1px 0 0 #26a69a;
    box-shadow: 0 1px 0 0 #26a69a;
    outline: 1px solid #26a69a;
    border-bottom: 1px solid #26a69a;
    outline: 0;
    border: none;


}



select #First-Option {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

}

select #First-Option:disabled {
    color: rgba(0, 0, 0, 0.3);
    background-color: transparent;
}

select #First-Option:hover {
    cursor: pointer;
    background-color: #26a69a;
}

select #Options {
    color: #26a69a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

}

select #Options:hover {
    cursor: pointer;
    background-color: #26a69a;
}

.btn-floating:hover {
    transform: scale(0.9);
}

.btnn2:hover {
    transform: scale(0.9);
}

.selecth {

    display: none !important;
}