#checkout-edit-shipping .ng-modal-dialog {
  position: fixed;
}

// #checkout-edit-shipping .ng-modal-dialog-content .ng-scope
// Replaces:  .shippingRatesModalBody
// Didn't want to rely on content contributions working
#checkout-edit-shipping .ng-modal-dialog-content .ng-scope {
  .responsiveTable caption {
    font-size:16px;
    font-weight:bold;
    background-color:#008AB0;
    color:white;
    padding:0.5em;
  }
  subtitle {
    margin-top:0;
    margin-bottom:1em;
  }
  h3 {
    margin-top:1em !important;
    margin-bottom:0 !important;
  }
  .responsiveTable td,
  .responsiveTable th {
    text-align:right;
  }
  /* Align numbers columns right and string columsn left */
  .responsiveTable td:nth-child(2),
  .responsiveTable th:nth-child(2) {
    text-align:left;
  }
  .responsiveTable {
    margin-top:1em;
  }

  @media (min-width:768px) {
    .responsiveTable {
      border: rgb(237, 237, 237) solid 1px;
    }

    .responsiveTable tr:nth-child(1) {
      border-bottom: rgb(237, 237, 237) solid 1px;
    }
    .responsiveTable td:nth-child(1) span {
      display:block;
      margin: 10px 0;
    }
  }//END @media (min-width:768px)


  @media (max-width:449px) {
    // Force the item to jump back to the first column
    .shippingRatesModalBody .responsiveTable td:nth-child(3) {
      margin-left:0;
    }
  }//END @media (max-width:449px)


  @media (min-width:450px) and (max-width:767px) {
    /* Keeps the prices aligned with the service type */
    /* Should switch to "single column" at <450px*/
    .shippingRatesModalBody .responsiveTable td:nth-child(3) {
      margin-left:125px;
    }
  }// END @media (min-width:450px) and (max-width:767px)

}


















@media (max-width:767px) {
  #checkout-edit-shipping .ng-modal-dialog {
    width: 90%;
    top: 500px;
    left: 50%;
    right:0;
    bottom:0;
    position: relative;
    height: auto!important;
    overflow-y: visible;
    overflow-x: hidden;
    display:block;
  }

  .ng-modal.ng-isolate-scope {
    position:fixed;
    overflow:auto;
    z-index:1000;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height:auto;
    width:100%;
    margin: 0;

    // Hide the scrollbar in webkit
    &::-webkit-scrollbar {
      width: 0!important;
    }
  }

  #checkout-edit-shipping .ng-modal-overlay {
    position:fixed;
    top:0;
    right:0;
    left:0;
    bottom:0;
    height:2200px!important;
    width:100%;
  }

  #checkout-edit-shipping .ng-modal-dialog-content {
    padding:0;
  }

  // #checkout-edit-shipping .ng-modal-dialog-content .ng-scope
  // Replaces:  .shippingRatesModalBody
  // Didn't want to rely on content contributions working
  #checkout-edit-shipping .ng-modal-dialog-content .ng-scope {
    position: static;
    overflow:auto;
    width:100%;
    display:block;
    height:auto;

    .responsiveTable label {
      display: inline !important;
      visibility: visible;
    }

    subtitle {
      margin-left:1.1em;
    }

    h3 {
      margin-top:1em !important;
      margin-left:1em !important;
      margin-bottom:0 !important;
    }

     table.responsiveTable th {
      display: none;
    }

    .responsiveTable tr:nth-child(1) {
      display: none;
    }

    /* Shrink the labels for the first two columns */
    .responsiveTable td:nth-child(1) label, #checkout-edit-shipping .responsiveTable td:nth-child(2) label {
      clear:right;
      float:left;
      font-size:12px;
    }

    .responsiveTable td:nth-child(2) label {
      float:left;
    }

     .responsiveTable td:nth-child(2) i {
      clear:right;
      float:left;
      font-size:12px;
    }

    .responsiveTable td:nth-child(1),
    .responsiveTable td:nth-child(2) {
      margin-bottom:1em;
    }

     .responsiveTable td:nth-child(1) {
      width:125px;
    }

    .responsiveTable td:nth-child(1) span,
    .responsiveTable td:nth-child(2) span {
      font-size:16px;
      float:left;
      clear:left;
    }

    .responsiveTable tr {
      padding:20px 5px;
    }

    .responsiveTable td:nth-child(3),
    .responsiveTable td:nth-child(4),
    .responsiveTable td:nth-child(5) {
      font-size:12px;
    }

    table.responsiveTable {
      margin-top:1em;
      border-bottom:#D2D2D2 solid 1px;
    }
  }
}// END @media (max-width:767px)

// Bootstrap inspired solution for preventing scrolling through a modal
body.modal-open {
  overflow:hidden;
  position:fixed;
  display:block;
  width:100%;
}