@import "clock.css";

html,
body,
.main-container {
  font-family: Manrope;
}

body {
  background-color: rgb(47, 135, 209);
}

.main {
  width: 20%;
}

/*
** FORM
*/
#form_fichaje #user,
#form_fichaje #pass {
  height: 70px;
  width: 90%;
  margin: auto;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.1);
  font-size: 2.2rem;
  text-align: center;
}

#form_fichaje #user:focus,
#form_fichaje #pass:focus {
  background: rgba(0, 250, 250, 0.1);
}

#user_submit {
  width: 80%;
  margin-left: 10%;
  height: 60px;
  line-height: 40px;
  font-size: 2.7rem;
  border-radius: 15px;
  color: #000;
  background-color: rgb(244, 243, 243);
}

.hoverCSSClass:hover {
  background: linear-gradient(#777, #aaa);
}

::-webkit-input-placeholder {
  text-align: center;
  color: white;
}

:-moz-placeholder {
  /* Firefox 18- */
  text-align: center;
  color: white;
}

::-moz-placeholder {
  /* Firefox 19+ */
  text-align: center;
  color: white;
}

:-ms-input-placeholder {
  text-align: center;
  color: white;
}

@media (max-width: 1200px) {
  .main {
    width: 30%;
  }
}

@media (max-width: 992px) {
  .main {
    width: 50%;
  }
  #user,
  #user_submit {
    width: 80%;
    margin-left: 10%;
  }
}

@media (max-width: 768px) {
  .main {
    width: 80%;
  }
}

/*
/********************************************************************* ADMIN STYLES
*/
.main-cont {
  background-color: white;
  margin-top: 8rem;
  padding: 3rem;
}

.error-mod {
  color: hsla(0, 100%, 50%, 1);
  border-color: hsla(0, 100%, 50%, 1);
}

.success-mod {
  color: hsla(120, 100%, 25%, 1);
  border-color: hsla(120, 100%, 25%, 1);
}

.btn:not([disabled]) {
  cursor: pointer;
}

.navbar-dark .navbar-nav .nav-link,
ul.dropdown-menu.show li a {
  color: hsla(0, 0%, 100%, 0.8);
}

.navbar-dark .navbar-nav .nav-link:hover,
ul.dropdown-menu.show li a:hover {
  color: hsla(0, 0%, 100%, 1);
  text-decoration: underline;
}

/*
** BOTONES INFORME
*/

.button-container {
  padding-top: 28px;
}

input[type="checkbox"] {
  /* Double-sized Checkboxes */
  -ms-transform: scale(3); /* IE */
  -moz-transform: scale(3); /* FF */
  -webkit-transform: scale(3); /* Safari and Chrome */
  -o-transform: scale(3); /* Opera */
  transform: scale(3);
  margin-top: 15px;
}

.error {
  padding: 0.25em;
  color: rgb(202, 19, 19);
  text-align: center;
  font-weight: 600;
  font-size: 18px;
}

.navbar {
  background-color: rgba(255, 255, 255, 0.774);
  color: #2641a6 !important;
}

.navbar a {
  color: #2641a6 !important;
  font-weight: 600;
}

.navbar-nav {
  gap: 2em;
  align-items: center;
}

.navbar-brand {
  width: 7rem;
}

.dropdown-menu {
  background-color: rgba(255, 255, 255, 0.774);
}

.nav-link,
.dropdown {
  text-align: center;
}

.navbar-brand img {
  width: 100%;
  object-fit: contain;
}

table {
  border: 2px solid #e9ecef;
}

table tr:nth-child(odd) {
  background-color: #f2f2f277; /* Color gris claro */
}

table tr:nth-child(even) {
  background-color: white;
}
