/* Variable Globales*/
:root {
  --background-body: #eee;
  --background-th: #363c43;
  --background-hover: linear-gradient(to bottom right, #227c8a, #0a171b);
  --color-primary: linear-gradient(to bottom right, #13444b, #193b45);
  --text-size-button: 12px;
  --text-size-title-primary: 25px;
  --text-size-title-secundary: 14px;
  --text-size-table-title: 12px;
  --text-size-table-title-secundary: 12px;
  --text-size-table-secundary: 12px;
  --text-size-table-content: 10px;
  --inputs-text-size: 12px
  
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: var(--background-body);
}

.form-signin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
  
}

.form-signin img{
  margin: 0;
}

.form-floating{
  width: 100%;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="text"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-control{
  font-size: var(--inputs-text-size);
}

.btn-primary{
    font-size: var(--text-size-button);
    background: var(--color-primary);
    border: none;
}

.btn-primary:hover{
  background: var(--background-hover);
}


.error-message {
  display: flex;
  animation: blink 1s infinite alternate;
  width: 100%;
  justify-content: center;
  align-items: center;
  color: red;
}

.error-message p{
  margin: 0;
}

.error-message-none{
  display: none;
}

@keyframes blink {
  from { opacity: 1; }
  to { opacity: 0; }
}