body{
    background-color:rgb(255, 255, 255);
    font-family: calibri;
    margin: auto;
    text-align: center;
}
.login-form, .contenedor{
    width: 300px;
    margin: 0 auto;
}
.login-form h1 {
    text-align:left;
    color: rgb(0, 0, 0);
    font-size: 24px;
    /*padding: 70px 0 10px 0;*/
}

.login-form h2 {
    text-align: center;        
    color: rgb(94, 93, 93);
    font-size: 24px;
     /*padding: 70px 0 10px 0;*/
}
.login-form input[type="password"],
.login-form input[type="text"] {
     width: 100%;
     padding: 15px;
     border: 1px solid #ced4da;
     margin-bottom: 10px;
     box-sizing:border-box;
}

/* estilos botones login */
.btn-login{
        width: 100%;
        padding: 15px;
        background-color: #000000;
        border: 0;
        box-sizing: border-box;
        cursor:pointer;
        font-weight: bold;
        font-size: large;
        color:white;
}
.btn-login:hover, .btn-login:active{
    color:#fff;
    background-color: #353535;
    border-color: #353535;;
}
.btn-login:focus{
    box-shadow: 0 0 0 3px rgba(121,82,179, 0,25);
}


/* estilos botones register */
.btn-register{
    width: 100%;
    padding: 15px;
    background-color: #f82121;
    border: 0;
    box-sizing: border-box;
    cursor:pointer;
    font-weight: bold;
    font-size: large;
    color:white;
    margin-top: 20px;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
}
.btn-register:hover, .btn-register:active{
    color:#fff;
    background-color:#f84444;
    border-color:#f84444;
}
.btn-register:focus{
    box-shadow: 0 0 0 3px rgba(121,82,179, 0,25);
}

/* estilos de link para ir a login */
.a-login:link, .a-login:visited {
    background-color:white;
    color:black;
    border:2px solid #10B981;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;  

}

.a-login:hover, .a-login:active {
    background-color: #10B981;
    color:white;
}

/* estilos de link para realizar el logout */
.a-logout:link, .a-logout:visited {
    background-color: rgb(194, 1, 1);
    color:rgb(255, 255, 255);
   /*  border:2px solid #F87171;*/
  /*   padding: 10px 20px;*/
    text-align: center;
    text-decoration: none;
    display: inline-block; 
}

.a-logout:hover, .a-logout:active {
    background-color: rgb(209, 45, 45);
    color:white;
}

/* estilos del boton cancelar */
.btn-cancel {
width: 50%;
padding: 15px;
background-color: #9f9fa0;
border: 0;
box-sizing: border-box;
cursor: pointer;
font-weight: bold;
font-size: medium;
color:#ffffff;
text-align: center;
margin-top: 20px;
/* para dar la apariencia de un boton */
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
}

.btn-cancel:hover, .btn-cancel:active {
    background-color:#c0c0c5;
    color:#fff;
    border-color:#c0c0c5;
}
.btn-cancel:focus{
    box-shadow: 0 0 0 3px #c0c0c5;
}

/* estilos del boton guardar */
.btn-save {
    width: 50%;
    padding: 15px;
    background-color: #000000;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: bold;
    font-size: medium;
    color:#ffffff;
    text-align: center;
    margin-top: 20px;
    /* para dar la apariencia de un boton */
        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button;
        text-decoration: none;
    }
    
    .btn-save:hover, .btn-save:active {
        background-color:#353535;
        color:#fff;
        border-color: #353535;
    }
    .btn-save:focus{
        box-shadow: 0 0 0 3px #353535;
    }

    /*form User Registration */

    .register-form{
        width: 400px;
        margin: 0 auto;
        padding: 0px 20px 60px 20px;
        margin-top: 10px;
        font-family: calibri;
        text-align: center;
        box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
    }

    .register-form h1 {
       
            text-align: left;
            color: rgb(0, 0, 0);
            font-size: 22px;
           /* padding: 70px 0 10px 0;*/
        }
        .register-form input[type="password"],
        .register-form input[type="text"] {
             width: 100%;
             padding: 15px;
             border: 1px solid #ced4da;
             margin-bottom: 10px;
             box-sizing:border-box;
        }

        .register-form h2 {
            text-align: center;
            color: rgb(94, 93, 93);
            font-size: 14px;
             /*padding: 70px 0 10px 0;*/
        }



        .select-css {

            display:block;
            font-size: 16px;
            font-weight: 400;
            line-height: 1.3;
            padding: .4em 1.4em .3em .8em;
            width: 400px;
            max-width: 100%;
            box-sizing: border-box;
            margin:0;
            background-color: #f5f5f5;
        }


        .select-css::-ms-expand{
            display:none;
        }

        .select-css:hover{
            border-color: #888;
        }
        .select-css:focus {

            border-color: #aaa;
            box-shadow: 0 0 1px 3px  rgba(59, 153, 252, .7);
            box-shadow: 0 0 0 3px  -moz-mac-focusring;
            color: #222;
            outline:none;
        }

        .select-css option{
            font-weight: normal;
        }
        


        .principal-form{
            width: 90%;
            margin: 0 auto;
            padding: 0px 20px 60px 20px;
            margin-top: 10px;
            font-family: calibri;
            text-align: center;
            box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
        }
    
        .principal-form h1 {
           
                text-align: center;
                color: rgb(0, 0, 0);
                font-size: 22px;
               /* padding: 70px 0 10px 0;*/
            }
         
        .principal-form h2 {
                text-align: center;
                color: rgb(94, 93, 93);
                font-size: 14px;
                 /*padding: 70px 0 10px 0;*/
            }
    
      
            .div_centrado_jugadores{
                background: rgb(255, 255, 255);
                width: 500px;       
                height: 700px;
                position: absolute;
                top:70%;
                left: 50%;           
                margin-top: -300px;
                margin-left: -300px;
            }

            .div_contenedor{
                background: rgb(255, 255, 255);
                height: 100vh;       
            }

            .div_centrado_jugadores_contratos{
                background: rgb(255, 255, 255);
                width: 500px;       
                height: 100px;
                position: absolute;
                top:70%;
                left: 50%;           
                margin-top: -300px;
                margin-left: -300px;
            }