/*Modal*/
.modal-holder-agreement {
    /* This way it could be display flex or grid or whatever also. */
    display: none;
    
    /* Probably need media queries here */
    width: 70%; /*600px;*/
    max-width: 100%;
    
    height: 90%; /*400px;*/
    max-height: 100%;
    
  
    position: fixed;
    
    z-index: 100;
    
    left: 50%;
    top: 5%;
  
    /*margin-top: -20%;*/
    margin-left: -35%;
    
    /* Use this for centering if unknown width/height */
    /*transform: translate(-50%, -50%);*/
    
    /* If known, negative margins are probably better (less chance of blurry text). */
    /* margin: -200px 0 0 -200px; */
    
    background: white;
    /*box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);*/
  }
  
  @media screen and  (max-width: 768px) {
      .modal-holder-agreement {
          width: 90%; /*600px;*/
          margin-left: -45%;
      }
  }
  .modal_closed {
    display: none;
  }
  
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    
    background: rgba(0, 0, 0, 0.3);
    display: block;
  
  }
  .modal-guts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 30px 20px 20px 20px;
  }
  #holder_shipping_address{
      margin-top: 20px;
  }
  #holder_shipping_address .titlePayment{
      font-size: 16px;
      font-weight: bold;
  }
  
  #holder_shipping_address .titleCharge{
      font-size: 16px;
      font-weight: bold;
      margin-top: 8px;
  }
  
  .modal-holder-agreement .close-button {
    position: absolute;
    
    /* don't need to go crazy with z-index here, just sits over .modal-guts */
    z-index: 1;
    
    top: 10px;
    
    /* needs to look OK with or without scrollbar */
    right: 20px;
    
    border: 0;
    background: black;
    color: white;
    padding: 5px 10px;
    font-size: 1.3rem;
    cursor: pointer;
  }
  #modal-body-ctrn{
      padding-bottom: 55px;
  }
  #modal-footer-ctrn{
      padding: 10px;
      padding-right: 20px;
      width: 100%;
      text-align: right;
      color: #fff;
      position: absolute;
      bottom: 0px;
      z-index: 1;
      background: #ccc;
  }
  
  .showPrice{
      height: 20px;
      padding: 3px;
      font-size: 16px;
      text-align: center;
      margin-top: 10px;
      font-weight: 700;
  }
  
  /* Loading */
  #holderLoading{
      position: fixed;
      width: 80px;
      margin-top: -100px;
      top: 50%;
      left: 50%;
      margin-left: -40px;
      z-index: 100;
      display: block;
  }
  .lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(24px, 0);
    }
  }