.popup-overlay {
  background: rgba(0, 0, 0, 0.62);
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;

  > section {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    max-height: 92%;
    background: $oa-white;
    border-radius: 3px;

    .popup-title {
      display: block;
      padding: 16px 2em;

      &.padding-bottom-z {
        padding-bottom: 0;
      }
      
      text-align: left;
      width: 100%;
      position: relative;
      font-weight: 600;

      > h2 {
        font-size: 16px;
        line-height: 20px;
        margin: 0;
        font-weight: 600;
        i {
          vertical-align: middle;
        }
      }


      > .close-link {
        background: none;
        border: none;
        color: $oa-gray;
        line-height: 20px;
        padding: 4px 8px;
        position: absolute;
        right: 0.5em;
        top: 0.5em;
        vertical-align: middle;
        cursor: pointer;

        &:hover {
          border-radius: 0.375em;
          background: #ddd;
        }
      }
    }

    .popup-content {
      padding: 1em 2em;
      overflow: auto;
      position: relative;
    }
  }

  &.big {
    > section {
      overflow-y: auto;
      max-height: 80%;
      background: $oa-white;

      .popup-title > .close-link:hover {
        background: $oa-gray-lighter;
      }
    }
  }

  @media (min-width: 768px) {
    >section {
      width: 38.2%;
    }
  }
}

.popup-content {
  .warning-block {
    padding: 1em 2em;
    border-bottom: 1px solid $state-warning-border;
    border-top: 1px solid $state-warning-border;
    margin: 1em -2em;
    background-color: $oa-gray-lightest;

    &.top {
      border-top: 0;
      margin: -1em -2em 2em -2em;
    }
  }
}

/*
 if modal appears in erroring form, error should not propagate inside modal
*/
.has-error .popup-content {
  .form-group {
    &.has-error {
      .form-control {
        border-color: $oa-red;
      }
      .control-label {
        color: $oa-red;
      }
    }

    .form-control {
      border-color: $oa-gray-light;
      -webkit-box-shadow: inherit;
      box-shadow: inherit;

      &:focus {
        border-color: inherit;
        -webkit-box-shadow: inherit;
        box-shadow: inherit;
      }
    }

    .control-label {
      color: $oa-black;
    }
  
  }

  .checkbox {
    color: $oa-black;
  }

  .input-group-addon {
    color: inherit;
    border-color: inherit;
    background-color: inherit;
  }

  .form-control-feedback {
    color: inherit;
  }
}