@import "../../global_components/sticky_toolbar/sticky_toolbar";

#sideBarTemplate {
  @media(max-width: $screen-md-max) {
    // Override inline sticky styles set from the JS code
    position: static !important;
    transform: none !important;
    width: 100% !important;

    .btn-half-container {
      border-bottom: none;
    }
  }

  .side-bar-section {
    @include margin(0 0 12px 0);
  }

  .side-bar-header {
    padding: 14px 15px;
  }

  @media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
    .section-divider {
      input.btn.med-txt {
        @include font-size(12px);
      }
    }
  }

  .section-divider {
    border-bottom: 1px solid $gray-medium;
    @include margin(0 0 15px);
    @include padding(0 0 15px);
  }

  .border-top-lg {
    border-top: 4px solid $gray-medium;
  }

  .side-bar-vertical-padding {
    @include padding(15px 0);
  }

  .side-bar-horizontal-padding {
    @include padding(0 15px);
  }

  @media(min-width: $screen-sm-min) and (max-width: $screen-md-max) {
    .content-divider {
      border-left: 1px solid $gray-medium;
    }
    .section-divider {
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 0;
    }
  }

  h3{
    @include font-size(18px);
    font-weight: 400;
  }

  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max){
    .btn-half-container {
      justify-content: center;
      .btn {
        display: block;
        flex-grow: 0;
      }
    }
  }
  .budget-indicator{
    font-size: 14px;
    color: $gray;

    .budget-total{
      display: block;
      width: 100%;
      position: relative;
      float: left;
      margin-bottom: 10px;
      font-size: 16px;

      .budget-label{
        float: left;
      }
      .budget-amount{
        float:right;
      }
    }
    .budget-period{
      font-size: 12px;
      margin-bottom: 15px;
    }
  }
}

.modal {
  .order-header{
    color: $gray;
  }
  .width-half {
    width: 50%;
  }
  table {
    @include font-size(14px);
  }
}