// Custom

// Body
body {
  background: #fff;
  padding-top: 140px;

  @media (max-width: $medium) {
    padding-top: 60px;
  }

  &.site-ventanilla {
    padding-top: 100px;
  }

  &.proceso-compra {
    padding: 80px 0 20px 0;
  }

  @media (max-width: $medium) {
    padding-top: 110px;
    padding-top: 60px;

    &.bodyMovil {
      padding: 10px 0 20px;
      #form-box {
        margin: 0;
        .pt-5 {
          padding-top: 0 !important;
        }
      }
      .bg-white {
        min-height: 100vh !important;
      }
    }
  }
}


body.bodyMovil {
  padding: 10px 0 20px;
}

.statelessPage {
  main {
    margin: 20px 0;

    .info-box {
      margin-bottom: 20px;
    }
  }

  @media (max-width: $medium) {
    padding-top: 70px;
    .site-header {
      height: 70px;
    }
  }
}

.section-header-content {
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;

  h1,
  h2,
  p {
    margin: 0;
  }

  small {
    margin-bottom: 5px;
  }

  @media (max-width: $medium) {
    flex-direction: column;
    align-items: flex-start;
  }
}

.maps {
  margin-top: 40px;

  h2,
  h2 span {
    color: $grey;
    font-size: 16px;
    margin-bottom: 20px;
  }

  .maps-content {
    .maps-canvas {
      @include border-radius(10px);
      height: 350px !important;
      overflow: hidden;
      @media (max-width: $medium) {
        height: 200px !important;
      }
    }
  }
}

.page-login {
  height: 85vh;
  display: flex;
  justify-content: center;

  .page-login__content {
    width: 400px;
  }

  @media (max-width: $small) {
    height: auto;
    .page-login__content {
      width: 100%;
    }
  }
}

.box-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;

  iframe {
    position: absolute;
    top: -2%;
    left: -2%;
    bottom: 0;
    right: 0;
    width: 103%;
    height: 103%;
  }
}


// Mi cuenta - Tabs ----------------------------------------------

.nav-tabs {
  flex-wrap: nowrap;
  max-width: 500px;
  border: none!important;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -webkit-border-radius: 0;
  li {
    border: 2px solid #0078db70;
    border-bottom: none;
    min-width: 110px;
    margin-right: 10px;
    &.active {
      background: #ffffff!important;
      border-color: #ffffff!important;
      color: #0078db!important;
      a span {
        color: #0078db;
        font-weight: 600;
      }
    }
  a {
    border-radius: 0 !important;
    cursor: pointer;
    display: block;
    padding: 10px 20px;
    border-bottom: 0;
    text-align: center;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    }
    &:hover {
      background: #ffffff;
      border-color: #ffffff;
      color: #0078db;
      a span {
        color: #0078db;
        font-weight: 600;
        }
      }
    &.active {
      background: #ffffff;
      border-color: #ffffff;
      color: #0078db;
      a {
        &:hover {
        background: #ffffff!important;
        border-color: #ffffff;
        color: #0078db;
        }
      }
    }
  }
  @media only screen and (max-width: $medium) {
    li {
        min-width: 90px;
        margin-right: 5px;
        a {
          padding: 6px;
          span {
            font-size: 12px;
        }
      }
    }
  }
}

// Sala espera ----------------------------------------------

.box-prefila {
  background: #eff7fd;
  width: 100%;
  padding: 2rem;

  .txt-prefila {
    max-width: 100%;
    margin-right: 1rem;
    font-size: 14px;
  }

  .txt-prefila b {
    font-size: 14px;
  }

  .time_circles {
    position: relative;
    max-width: 360px !important;
    width: 100%;
    min-width: 330px;
    height: 100px;
    display: flex;
    align-items: center;

    > div {
      position: static;
      height: auto;
      max-width: 33%;
      width: 100%;
      display: block;
      text-align: center;

      > h4 {
        margin: 0px;
        padding: 0px;
        text-align: center;
        text-transform: uppercase;
        font-family: "Open Sans", sans-serif;
        font-size: 8px;
        letter-spacing: 1px;
        line-height: 12px;
        color: #000;
      }

      > span {
        margin: -12px 0 0 0;
        padding: 0px;
        display: block;
        width: 100%;
        text-align: center;
        font-family: "Open Sans", sans-serif;
        font-size: 36px;
        line-height: 38px;
        font-weight: 600;
        color: #000;
      }
    }

    .countdown {
      min-width: 40%;
      max-width: 40%;
    }

    canvas {
      position: absolute;
    }
  }
  .with-days {
    .time_circles {
      > div {
        max-width: 25%;

        > h4 {
          font-size: 7px;
          letter-spacing: 1px;
          line-height: 9px;
        }

        > span {
          margin: -24px 0 0 0;
          font-size: 32px;
          line-height: 33px;
        }
      }
    }
  }
}

@media only screen and (max-width: $medium) {
  .box-prefila {
    padding: 1rem;
    margin: -1rem;
    box-sizing: content-box;

    .txt-prefila {
      margin-right: 0;
    }

    .time_circles {
      div {
        > span {
          font-size: 32px;
          line-height: 34px;
        }
      }
      .countdown {
        min-width: 100%;
        max-width: 100%;
      }
    }

    .with-days {
      .time_circles {
        max-width: 280px !important;
        min-width: 280px;

        > div {
          max-width: 25%;

          > h4 {
            font-size: 6px;
            letter-spacing: 1px;
            line-height: 7px;
          }

          > span {
            font-size: 30px;
            line-height: 30px;
          }
        }
      }
    }
  }
}

// Información adicional ----------------------------------------------

iframe {
  margin: 2rem auto;
  display: block;

  @media (max-width: $small) {
    width: 100%;
  }
}

// Abono - Detalle compra ---------------------------------------------

h4 {
  &.title {
    margin-bottom: 0;

    strong {
      font-size: 16px;
      letter-spacing: 0.5px;
      color: #006cd8;
    }
  }
}

p {
  &.subtitle {
    color: #000 !important;
    font-size: 11px;
    letter-spacing: 0.5px !important;
    font-weight: 400 !important;
  }
}