#shippingRatesModal {
  position: fixed;
}
#mainContent #shippingRatesModal table {
  width:100%;
}
#shippingRatesModal {
  table 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;
  }
  table td,
  table th {
    text-align:right;
    padding:5px;
  }
  /* Align numbers columns right and string columsn left */
  table td:nth-child(2),
  table th:nth-child(2) {
    text-align:left;
  }
  table {
    margin-top:1em;
  }
  @media (min-width:768px) {
    table td:nth-child(1) span {
      display:block;
      margin: 10px 0;
    }
    table {
        border: rgb(237, 237, 237) solid 1px;
    }
    table tr:nth-child(1) {
        border-bottom: rgb(237, 237, 237) solid 1px;
    }
  }//END @media (min-width:768px)


  @media (max-width:449px) {
    // Force the item to jump back to the first column
    #shippingRatesModal table 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*/
    #shippingRatesModal table td:nth-child(3) {
      margin-left:125px;
    }
  }// END @media (min-width:450px) and (max-width:767px)

}




@media (max-width:767px) {
  #shippingRatesModal .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;
  }

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

  #shippingRatesModal .ng-modal-dialog-content {
    padding:0;
  }

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

    table {
      border:none;
    }

    table label {
      display: inline !important;
      visibility: visible;
    }

    subtitle {
      margin-left:1.1em;
    }

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

     tabletable th {
      display: none;
    }

    // Probably don't need this section anymore, since content contribution is unpredictable
    // Remove after 6/30/2016 if still here.
    /* Shrink the labels for the first two columns */
    // table td:nth-child(1) label, #checkout-edit-shipping table td:nth-child(2) label {
    //   clear:right;
    //   float:left;
    //   font-size:12px;
    // }

    // table td:nth-child(2) label {
    //   float:left;
    // }
    //
    //  table td:nth-child(2) i {
    //   clear:right;
    //   float:left;
    //   font-size:12px;
    // }
    table tr:nth-child(1) {
      border-bottom:solid gray 2px;
    }

    table tr:nth-child(even) {
      background-color:gainsboro;
    }

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

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

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

    table tr {
      padding:20px 5px;
    }

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

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