18F/culper

.mobile-visible {
  display: none;
  visibility: hidden;
}

@media only screen and (max-width: 1000px) {
  .mobile-visible {
    display: block !important;
    visibility: visible;
  }

  .section-view {
    max-width: 100% !important;
  }

  .mobile-hidden {
    display: none !important;
    visibility: hidden;
  }

  // Consent form
  .consent-modal {
    display: none;
    z-index: -1;
  }

  .modal-open .consent-modal {
    display: block;
    z-index: 9999;

    .modal {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

      .modal-content {
        width: 100% !important;
        min-width: unset !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;

        .consent-legal {
          height: 70vh;
        }

        .consent-acceptance {
          width: 90%;
        }
      }
    }
  }

  // Form introduction
  .modal-open .introduction-modal {
    display: block;
    position: unset;
    background-color: rgba(255, 255, 255, 1) !important;
    z-index: 9999;

    .modal {
      overflow-y: auto;
      overflow-x: hidden;
      background-color: rgba(255, 255, 255, 1) !important;

      .modal-wrap {
        display: block;
      }

      .introduction-content {
        width: 100%;
        min-width: 100%;
        height: auto;
        margin: 0 !important;
        padding-bottom: 15rem; // padding for ipad and iphone
        border: none;
        box-shadow: none;

        .modal-close {
          position: fixed;
          top: 1rem;
          right: 2rem;
        }

        .introduction-legal {
          overflow-y: visible;
          max-height: none;
          border: none;
          padding: 0;
        }

        .introduction-acceptance {
          max-height: auto;

          .block label {
            width: 11rem;
            min-width: 11rem;
          }
        }
      }
    }
  }

  // Log in form
  .login {
    .content {
      width: 100% !important;
      padding: 3rem 2rem 2rem 2rem;
    }

    .table.zero,
    .table.one,
    .table.two,
    .table.three {
      display: block;

      .auth {
        display: block !important;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        border-right: none;
        border-bottom: 1px #eee solid;

        &:last-of-type {
          border-bottom: none;
        }
      }
    }
  }

  // General header information
  .usa-header {
    min-height: 5rem;

    > .eapp-header {
      display: block;
      min-height: 5rem;

      > .eapp-structure-row {
        display: block;

        > .eapp-logo {
          display: block;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 5.5rem;
          z-index: 100;

          .eapp-logo-icon {
            width: 3.2rem;
            height: auto;
            margin-left: 0;
            margin-right: 2%;
          }

          .eapp-logo-text {
            font-size: 3rem;
          }
        }

        > .eapp-title {
          padding: 1rem;
          display: block;
          height: auto;
          margin-top: 5.5rem;

          > .eapp-logout {
            position: fixed;
            top: 0;
            right: 0;

            > a {
              padding: 1.7rem;
            }
          }

          > .title {
            margin: 0;
          }
        }
      }

      &.mobile-navigation {
        > .eapp-structure-row {
          > .eapp-title {
            padding: 0;
            margin-top: 0.5rem;
          }
        }
      }
    }
  }

  // Navigation
  .eapp-structure-wrap > .eapp-structure-row > .eapp-navigation {
    width: 100%;

    .form-navigation {

      .section-name {
        max-width: 88%;
      }
    }

    &.mobile-visible {
      padding-left: 1.6rem;
      padding-right: 1.6rem;

      .score-card {
        font-size: 2.8rem;
        padding-bottom: 1rem;
        padding-left: 2.1rem;
        text-align: left;

        > .score-card-done,
        > .score-card-total,
        > .score-card-text {
          display: inline-block;
          line-height: normal;
        }

        > .score-card-done,
        > .score-card-total {
          font-size: 2.6rem;
        }

        > .score-card-text {
          font-size: 1.9rem;
          margin-left: 1rem;
        }
      }

      .form-navigation {
        -webkit-animation: slide-out 0.5s forwards;
        animation: slide-out 0.5s forwards;

        @-webkit-keyframes slide-out {
          0% {
            -webkit-transform: translateX(-100%);
          }
          100% {
            -webkit-transform: translateX(0%);
          }
        }

        @keyframes slide-out {
          0% {
            transform: translateX(-100%);
          }
          100% {
            transform: translateX(0%);
          }
        }
      }

      .instructions {
        margin-top: 3rem;
        margin-bottom: 4rem;
        margin-left: 2rem;
        width: auto;
        text-align: left;
        background: none;
        font-weight: initial;
        font-size: 1.6rem;

        > span {
          color: $eapp-blue;
          text-decoration: underline;
        }
      }
    }
  }

  // Main content
  .eapp-structure-wrap {
    display: block;

    .eapp-structure-row {
      display: block;
    }
  }

  .eapp-structure-wrap > .eapp-structure-row > .eapp-core {
    display: block;
    padding: 1rem !important;
    width: 100%;

    .eapp-form {
      width: 100% !important;
      max-width: auto;
      min-width: auto;
    }

    .block > label {
      min-width: 11rem;
    }

    .flags .block > label {
      width: 100%;
    }

    .daterange {
      .from-present {
        display: block;
        margin-right: 1rem;
      }
    }

    label,
    input,
    textarea,
    select,
    .block > label {
      max-width: 100%;
    }

    .field {
      > .title,
      > .table > .content > .component,
      > .table > .content > .component > div,
      > .table > .messages > .message {
        max-width: 100%;
      }
    }

    .section-view {
      padding-left: 0;
      padding-right: 0;
    }

    .btn-wrap {
      .btn-cell {
        width: 50%;

        .icon {
          padding-left: 0.5rem;
        }
      }

      .btn-spacer {
        width: 1%;
      }
    }
  }
}

@media only screen and (max-width: 452px) {
  .daterange {
    .from-label {
      text-align: left;
    }

    .arrow {
      img {
        margin-top: -3rem;
        margin-left: 10.25rem;
      }
    }
  }
}