/**
 * @file
 * Styles for Bootstrap Barrio page.
 */

body.page-user-login, body.page-user-register, body.page-user-password  {
  background: $blue-dark;
  background: linear-gradient(219deg, $blue-dark 25%, $blue-light 100%);
  .user-login.container, .user-register.container, .user-password.container {
    .card {
      border-radius: 10px;
      padding: 30px;
      display: flex;
      align-content: center;
      align-items: center;
      text-align: center;
      box-shadow: 0px 0px 20px 6px $blue-shadow;
      .js-form-item {
        text-align: left;
        &.form-item-persistent-login {
          text-align: center;
        }
      }
      .form-item-persistent-login {
        text-transform: uppercase;
        margin: 25px 0;
        label {
          margin-bottom: 0;
        }
      }
      #edit-extralinkscontainer {
        border-top: 1px solid $gray-200;
        margin-top: 4rem;
        .link1 {
          color: $gray-500;
        }
        .link2 {
          padding-left: 5px;
          color: $gray-600;
        }
      }
      header {
        margin-bottom: 20px;
      }
    }
  }
}

body.path-frontpage {
  .main-content {
    .content {
      .block-region-top {
        height: 540px;
        min-height: 540px;
        background-image: url("../images/banner_image.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        &:after {
          background: rgba(0,0,0,0.8) !important;
          opacity: 0.9;
          width: 100%;
          height: 100%;
          left: 0px;
          top: 0px;
          position: absolute;
          display: block;
          content: "";
        }
        .block-block-content {
          height: 100%;
          position: relative;
          z-index: 100;
          .content {
            color: $primary-white;
            height: 100%;
            .field--name-body {
              height: 100%;
            }
            .container {
              a {
                border: none;
                color: $primary-white;
                padding: 10px 30px;
                border-radius: 25px;
                margin-right: 10px;
                text-transform: uppercase;
                font-size: 12px;
                font-weight: bold;
                outline: none;
                &:hover {
                  background-color: $primary-white;
                  color: $blue-dark;
                }
                &.btn-light {
                  background: $white;
                  color: $primary;
                  &:hover {
                    background: $white;
                    color: $primary;
                  }
                }
                &.btn-dark {
                  background: $primary;
                  color: $white;
                  &:hover {
                    background: $primary;
                   color: $white;
                  }
                }
              }
              &.banner-container {
                display: flex;
                height: 100%;
                align-items: center;
                background-image: url("../images/banner_img.png");
                background-repeat: no-repeat;
                background-position: bottom right;
                background-size: 65%;
                .banner-content {
                  width: 50%;
                  @media (max-width: 767px) {
                    width: 90%;
                  }
                }
              }
            }
          }
        }
      }
      .block-region-bottom {
        padding: 0px 0 30px;
        .block-block-content {
          .content {
            .row {
              margin-bottom: 15px;
              .tile {
                border: 1px solid $gray-200;
                border-radius: 5px 5px 8px 8px;
                border-bottom: 5px solid $gray-200;
                &-image {
                  border-bottom: 1px solid $gray-200;
                  padding: 5px;
                }
                &-content {
                  padding: 15px;
                  .title {
                    font-size: 14px;
                    font-weight: bold;
                    color: $gray-700;
                  }
                  .description {
                    color: $gray-600;
                    font-size: 14px;
                    margin: 10px 0;
                  }
                  .link {
                    font-size: 12px;
                    text-transform: uppercase;
                  }
                }
              }
              &:last-child {
                margin-bottom: inherit;
              }
            }
            .title-section {
              text-align: center;
            }
            ul.icon-sections {
              display: flex;
              align-items: center;
              color: #000;
              justify-content: space-between;
              margin: 0px;
              padding: 0px;
              list-style: none;
              margin-bottom: 0px;
              @media (max-width: 767px) {
                flex-wrap: wrap;
              }
              li {
                padding: 20px 30px;
                @media (max-width: 690px) {
                  margin: auto;
                }
                h3 {
                  color: $secondarycolor;
                  font-weight: bold;
                  font-size: 24px;
                }
                p {
                  margin-bottom: 0px;
                }
                &:nth-child(even) {
                  background: #f1f1f1;
                }
                .fa {
                  background: $secondarycolor;
                  width: 35px;
                  text-align: center;
                  height: 36px;
                  color: #fff;
                  line-height: 36px;
                  margin-bottom: 10px;
                  border-radius: 4px;
                  font-size: 20px;
                  padding-left: 5px;
                }
              }
            }
            .latespost {
              position: relative;
              .container {
                position: relative;
                z-index: 11;
              }
              .postgrid {
                list-style: none;
                padding: 0px;
                margin: 0px;
                display: flex;
                align-items: center;
                justify-content: center;
                @media (max-width: 767px) {
                  flex-wrap: wrap;
                }
                li {
                  padding: 0px;
                  margin: 0px;
                  position: relative;
                  max-width: 277px;
                  @media (max-width: 380px) and (max-width: 767px) {
                    max-width: 50% !important;
                  }
                  .caption {
                    position: relative;
                    img {
                      max-width: 100%;
                    }
                    h4 {
                      color: $white;
                      bottom: 10px;
                      font-size: 24px;
                      position: absolute;
                      padding: 15px;
                      z-index:1111;
                      margin-bottom: 0px;
                      a {
                        color: $white;
                      }
                    }
                    &:after {
                      background: rgba(0,0,0,0.5);
                      content: "";
                      position: absolute;
                      height: 100%;
                      width: 100%;
                      left: 0px;
                      bottom: 0px;
                    }
                 } 
                 &:hover {
                   .caption {
                      &:after {
                        background: rgba(0,0,0,0.7);
                        content: "";
                        position: absolute;
                        height: 100%;
                        width: 100%;
                        left: 0px;
                      }
                   }
                 }
                }
              }
              h2 {
                color: $white;
                font-size: 26px;
                padding-top: 40px;
                padding-bottom: 10px;
                text-transform: uppercase;
              }
              &:after {
                  content: "";
                  width: 100%;
                  height: 85%;
                  background: $primary;
                  display: inline-block;
                  position: absolute;
                  top: 0px;
                  left: 0px;
              }
            }
            .third {
              padding: 50px 0px;
              .row {
                display: flex;
                align-items: center;
                @media (max-width: 767px) {
                  flex-wrap: wrap;
                }
                img {
                  max-width: 100%;
                }
                h3 {
                  color: $secondarycolor;
                  font-size: 28px;
                  line-height: 45px;
                  @media (max-width: 767px) {
                    font-size: 20px;
                    line-height: 32px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.my-apps, .path-developer-apps, .companies, .path-teams {
  .layout-main-wrapper {
    .main-content {
      .block-local-actions-block {
        float: right;
        margin-bottom: 15px;
        padding: 0;
        .nav-link {
          padding: 0;
        }
      }
      table {
        tbody {
          tr {
            td {
              &:nth-child(2) {
                width: 50px;
              }
              &:last-child {
                width: 200px;
              }
            }
          }
        }
      }
    }
  }
}

.developer-app-view {
  .field {
    display: block !important;
    margin: 15px 0;
    &__label {
      margin-right: 10px;
      min-width: 130px;
      font-weight: bold;
    }
  }
  .column > .col-auto {
    border: 1px solid $gray-300;
    height: 100%;
    padding: 0;
    box-shadow: 0px 0px 9px 0 $gray-300;
    border-radius: 5px;
    fieldset {
      legend {
        padding: 10px 15px;
        border-bottom: 1px solid $gray-300;
      }
    }
  }
  .app-credentials {
    .wrapper--secondary {
      width: 100%;
      margin: 0;
      .api-product-list-row {
        .api-product-name {
          margin-right: 10px;
        }
        .wrapper--status {
          float: none;
        }
      }
    }
  }
}

.apigee-edge-developer-app-analytics {
  #edit-since, #edit-until {
    display: flex;
    fieldset {
      &:first-child {
        padding-right: 5px;
      }
      &:last-child {
        padding-left: 5px;
      }
    }
  }
  #edit-since {
    float: left;
  }
  #edit-until {
    clear: right;
    margin-bottom: 15px;
  }
  .date-separator {
    float: left;
  }
}
