/* FontFamily Lato */
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v14/S6u8w4BMUTPHjxsAUi-qJCY.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v14/S6u8w4BMUTPHjxsAXC-q.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  
/* FontFamily Raleway */
/* latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwIYqWqhPAMif.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwIYqWqZPAA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: local('Raleway Medium'), local('Raleway-Medium'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwN4rWqhPAMif.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: local('Raleway Medium'), local('Raleway-Medium'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwN4rWqZPAA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwPIsWqhPAMif.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwPIsWqZPAA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwJYtWqhPAMif.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwJYtWqZPAA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 800;
    src: local('Raleway ExtraBold'), local('Raleway-ExtraBold'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwIouWqhPAMif.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 800;
    src: local('Raleway ExtraBold'), local('Raleway-ExtraBold'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwIouWqZPAA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

body, .btn {
    font-family: 'Lato';
}

form {
    margin: 0;
}

.fichajes__subtitle {
    color: #7b7b7c;
}

.btn:hover {
    cursor: pointer;
}

/* Formulario */
.formulario {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.9375rem;
}

.form-actions {
    width: 100%;
    text-align: right;
}

.textos {
    margin-bottom: 3.5rem;
}

.title, .subtitle {
    font-family: 'Raleway';
    text-transform: uppercase;
    color: #046eb1;
}

.title {
    font-size: 3.125rem;
    line-height: 3.375rem;
    font-weight: 600;
}

.subtitle {
    font-size: 2.188rem;
    line-height: 2.438rem;
    font-weight: 100;
}

.form-label {
    color: #343434;
    margin-bottom: 1.5rem;
}

.form-control {
    border-radius: 0;
    border-color: #046eb1;
}

.form-control::placeholder {
    color: #046eb1;
}

.send-button {
    background-color: #046eb1;
    border-color: #046eb1;
    border-radius: 0;
    padding: .375rem 2rem;
    text-transform: uppercase;
}

.send-button:hover {
    -webkit-box-shadow: 0px 0.625rem 1.5rem -0.9375rem rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0.625rem 1.5rem -0.9375rem rgba(0,0,0,0.75);
    box-shadow: 0px 0.625rem 1.5rem -0.9375rem rgba(0,0,0,0.75);
    background-color: #0264a2;
    border-color: #0264a2;
}

.send-button:active, .send-button:focus {
    background-color: #0264a2 !important;
    border-color: #0264a2 !important;
}

/* Banner */
.banner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 700px;
}

.banner-content {
    position: absolute;
    margin: 0;
}

.banner-elements {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 2.813rem 0 0.9375rem;
}

.background {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.background-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.mobile {
    width: 65%;
    text-align: center;
    margin: 0 auto;
}

.mobile .img-fluid {
    object-fit: cover;
}

.text-img {
    margin-bottom: 3rem;
    text-align: center;
}

.header {
    height: 7.5rem;
}

.logo {
    max-width: 20rem;
    width: 100%;
    margin: 0 auto;
}

.logout-button {
    position: absolute;
    top: 2rem;
    right: 6rem;
    color: #616161 !important;
}
.shifts-button {
    position: absolute;
    top: 2rem;
    right: 15rem;
    color: #616161 !important;
}


.logout-img {
    margin-bottom: 0.625rem;
    width: 1.688rem;
}

.btn-img {
    width: 6.125rem;
    display: block;
    margin: 0 auto 1.5rem;
}

.logout-button:focus, .logout-button:active {
    background-color: white;
    border: none;
    box-shadow: none;
    outline: none;
}

.main-container {
    height: 31.25rem;
    margin-top: 65px;
}

.action-date {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.action-button .btn-link {       
    text-transform: uppercase;
    color: #046eb1;
    font-weight: 600;
    border-radius: 0;
    width: 11.25rem;
    height: 11.25rem;
}

.action-button .btn-link--left {
    margin-left: 20%;
}

.action-button .btn-link--right {
    margin-right: 20%;
}

.action-button .btn-link:hover {
    box-shadow: 0 0 5px 0.2rem rgba(4, 110, 177, 0.5);
}

.btn-link:hover, .btn-link:focus {   
    text-decoration: none;
}

.validation-summary-errors ul {
    list-style: none;
    padding: 0;
}

.filtro-fechas, .filtro-fechas .form-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.filtro-fechas {
    margin: 0 0 4rem 0;
}

.filtro-fechas .action-date {
    margin-right: 1.75rem;
}

.filtro-fechas .fecha-desde {
    margin: 0 2.5rem 0 0;
}

.filtro-fechas .action-button-list {
    margin: -0.1rem 0 0 0;
}


.filtro-fechas .action-button-list .btn-link {
    width: 6rem;
    height: 4.5rem;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.4375rem 1rem 0 0;
}

.filtro-fechas .action-button-list .btn-img {
    margin: 0 auto 0.4375rem;
    width: 2rem;
}

.action-button-menu .btn-link {
    width: 8.5rem;
    height: 4.5rem;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.4375rem 1rem 0 0;
}

.action-button-menu .btn-link:hover {
    box-shadow: 0 0 5px 0.2rem rgba(234,234,234,.5);
}

.action-button-menu .btn-img {
    margin: 0 auto 0.4375rem;
    width: 2rem;
}

.input-group-text {
    border-radius: 0;
    border-color: #046eb1;
    color: #046eb1;
    background: white;
}

/* RESPONSIVE */
@media (min-width: 768px) {
    .flex-md-equal > * {
        flex: 1;
    }

    .table-responsive {
        display: table;
    }
}

@media (max-width: 1199px) {
    .mobile {
        width: 40%;
        margin: -5rem auto 3rem;
    }

    .banner-elements {
        padding: 0 0.9375rem;
    }

    .title {
        font-size: 2.813rem;
        line-height: 3.063rem;
    }

    .subtitle {
        font-size: 1.875rem;
        line-height: 2.125rem;
    }

    .textos {
        margin-bottom: 2rem;
    }

    .logout-button {
        right: 6%;
    }
}

@media (max-width: 991px) {    
    .mobile {
        width: 55%;
    }

    .text-img {
        width: 85%;
    }
    
    .action-button .btn-link--left, .action-button .btn-link--right {
        margin: 0;
    }
}

@media (max-width: 767px) {    
    .formulario {
        padding: 1.875rem 0.9375rem;
    }

    .background {
        max-height: 25rem;
    }

    .banner {
        min-height: 25rem;
    }

    .banner-elements {
        padding: 0 2.5rem 0 0;
    }

    .mobile {
        margin: 0 auto;
    }

    .text-img {
        width: 100%;
    }

    .main-container {
        height: auto;
        margin-top: 45px;
    }

    .action-button {
        height: 180px;
        margin: 2rem 0 0;
    }

    .filtro-fechas, .filtro-fechas .form-group {
        flex-direction: column;
        justify-content: center;
    }

    .filtro-fechas .action-date, .filtro-fechas .fecha-desde {
        margin: 0;
    }

    .filtro-fechas .fecha-desde {
        margin-bottom: 1.5rem;
    }

    .filtro-fechas .action-button-list {
        margin: 0;
        height: auto;
    }

    .filtro-fechas .action-button-list .btn-link {
        margin: 0.4375rem 1.5rem 0;
    }
}

@media (max-width: 575px) {
    .main-container {
        margin-top: 0;
    }
    
    .title {
        font-size: 2.375rem;
        line-height: 2.625rem;
    }

    .subtitle {
        font-size: 1.5rem;
        line-height: 1.75rem;
    }

    .form-label {
        font-size: 0.9375rem;
    }

    .form-actions {
        text-align: center;
        margin: 1.5rem 0 0;
    }

    .textos {
        text-align: center;
        margin-bottom: 1rem;
    }

    .form-label {
        margin-bottom: 0.5rem;
    }

    .mobile {
        width: 7.25rem;
    }

    .banner-elements {
        padding: 0 0.9375rem;
        margin-top: 1rem;
    }

    .text-img {
        width: 14.5rem;
        margin-bottom: 1.5rem;
    }

    .header {
        height: 6.5rem;
    }

    .logo {
        top: 0;
        position: absolute;
        left: 15px;
        padding: 0 15px;
    }

    .logout-button {
        top: 27px;
    }

    .action-button {
        margin: 0;
    }

    .action-button .btn-link {
        width: 9.25rem;
        height: 9.25rem;
    }

    .btn-img {
        width: 5.125rem;
        margin: 0 auto 1rem;
    }
}

@media (max-width: 470px) {
    .logo {
        top: 6px;
        width: 79%;
    }
}

@media (max-width: 400px) {
    .button__text {
        display: none;
    }

    .logout-button {
        top: 31px;
    }
}