* {
  box-sizing: border-box;
}

body{
    background-image: url(https://live.staticflickr.com/65535/52291340905_5e7d37dc90_o.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


.titulos_principales {
  text-align: center;
  margin: 3%;
  color:white;
}

.titulos_secundarios{
    text-align: center;
    margin: 3%;
    color:white;
}

.login_form, .contenedor{
  width: 30%;
  margin: 0 auto;
}

.login_form h1{
    text-align: left;
    color: #0444bf;
    font-size: 28px;
    padding: 70px 0 10px 0;
}

.login_form input[type="number"]{
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
    box-sizing: border-box; 
    border-radius: 4px;
    border: 0px;


}

/*estilos boton login*/

.btn_login{
    width: 100%;
    padding: 15px;
    background-color: #fb8500;
    border: 0;
    box-sizing: border-box;  
    cursor: pointer;  
    font-weight: bold;
    font-size: large;
    color: white;
    border-radius: 8px;
}

.btn_login:hover,.btn_login:active{
    color:black;
    background-color: #ffb703;
    border-color: #ffb703   ;
}

.btn_register{
    width: 100%;
    padding: 15px;
    background-color: #219ebc;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: bold;
    font-size: large;
    color: white;
    margin-top: 20px;
    /* Para dar la apariencia de un boton */
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
    border-radius: 8px;

  }
  .btn_register:hover,.btn_register:active{
    color:black;
    background-color: #ffb703;
    border-color:#ffb703;
  }

/*CAMBIOS COPIAR - PEGAR */

  
  /* Estilos boton CANCELAR*/
  .btn-cancel{
    padding:15px;
    flex: 50%;
    background-color: #219ebc;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: bold;
    font-size:medium;
    color: white;
    text-align: center;
    margin-top: 20px;
    /* Para dar la apariencia de un boton */
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
    border-radius: 6px;
  }
  .btn-cancel:hover,.btn-cancel:active{
    color:black;
    background-color: #ffb703;
    border-color:#ffb703;
  }

  
  /* Estilos boton GUARDAR*/
  .btn-save{
    padding:15px;
    flex: 50%;
    background-color: #fb8500;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: bold;
    font-size:medium;
    color: white;
    margin-top: 20px;
    /* Para dar la apariencia de un boton */
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;  
    border-radius: 6px;

  }
  .btn-save:hover,.btn-save:active{
    color:black;
    background-color: #ffb703;
    border-color:#ffb703;
  }
  
  
  /* form User Registration */
  .register-form{
    width: 30%;
    margin: 0 auto;
    color:white;
    background-color: #023047;
    padding: 0px 20px 60px 20px;
    margin-top: 35px;
    text-align: left !important;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    border: 0;
    border-radius: 8px;
  }
  
  .register-form h1 {
    text-align: left;
    color:white ;
    text-align: center;
    padding: 50px 0 10px 0;
  }

  .register-form input[type="text"],
  .register-form input[type="number"]{
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
    box-sizing:border-box;
    border: 0;
    border-radius: 4px;
  }

  .select-css {
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    padding: .4em 1.4em .3em .8em;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin:0;
    background-color: white;
    border: 0;
    border-radius: 4px;
  }
  .select-css::-ms-expand {
    display: none;
   }
   .select-css:hover {
    border-color: #888;
   }
   .select-css:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px #0584f2(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222; 
    outline: none;
   }
   .select-css option {
    font-weight:normal;
   }


   /* DASHBOARD */

   .flex-container {
    display: flex;
    flex-direction: row;
    font-size: 15px;
    text-align: center;
  }
  
  .flex-item-left {
    background-color: #fb8500;
    color:white;
    padding: 10px;
    flex: 50%;
    border-radius: 2px;

  }
  
  .flex-item-right {
    background-color: #ffb703;
    color:black;
    padding: 10px;
    flex: 50%;
    border-radius: 2px;

  }

  .btn_logout{
    width: 100%;
    padding: 15px;
    background-color: #023047;
    border: 0;
    box-sizing: border-box;  
    cursor: pointer;  
    font-weight: bold;
    font-size: large;
    color: white;
    border-radius: 2px;

}

.btn_logout:hover,.btn_login:active{
    color:white;
    background-color: #219ebc;
    border-color: #219ebc;
}
  
  /* Responsive layout - makes a one column-layout instead of two-column layout */
  @media (max-width: 900px) {
    .flex-container {
      flex-direction: column;
    }
    .register-form {
      width: 85%;
    }
    .login_form{
      width: 85%;
    }
  }