#pay-plans {
  display: flex;
  flex-direction: column;
}

.pay-plan-row {
  display: flex;
  flex-direction: row;
}

div.pay-plan-row div span {
  display: grid;
  text-align:center;
}

div.pay-plan-row div:nth-child(1) span {
  text-align: right;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px dotted;
}

div.pay-plan-row div:nth-child(1) span:nth-child(1) {
  /*line-height: 2.5;*/
  height: 48px;
  /*border-bottom: 1px dotted;*/
}

div.pay-plan-row .pay-plan {
  position: relative;
  width: 100%;
  margin: 3% 1%;
  /* padding-top: 10px; */
  /*padding-bottom: 30px;*/
  border: 1px solid #b6b6b6;
  border-radius: 5px;
  background: transparent;
}

.pay-plan-labels {
  width: 100%;
  margin: 3% 0;
}

.last-pay-plan {
  width: 32%!important;
}

div#pay-plans div:nth-child(1){
  border: none;
  color: #494949;
  letter-spacing: 1px;
}

span.pay-plan-name {
  font-size:2.33rem;
  line-height: 46px;
}


span.pay-plan-premium,
span.pay-plan-dwnpmt,
span.pay-plan-instamt {
  font-size: 1.66rem;
}

/* margin bottom on down payment span to fix height issue caused by absolute positioned .pay-plan-button */
span.pay-plan-instamt {
  margin-bottom: 64px;
}

/* select button */
.pay-plan-button {
  /*position: absolute;*/
  /*bottom: 0;*/
  font-size: 2rem;
  width: 100%;
  padding: 5px 20px;
  text-transform: uppercase;
}

@media (min-width: 768px){
  .pay-plan-button{
    position: absolute;
    bottom: 5px;
  }
}

/* pay plan hover */
/*div#pay-plans div:hover {*/
/*background: #e9e9e9;*/
/*transition: .2s all ease-in-out;*/
/*cursor: pointer;*/
/*box-shadow: 1px 1px 0px rgba(0,0,0,.5);*/
/*top: 2px;*/
/*}*/

.pay-plan-button .submit {
  position: relative;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  border-color: #2f5a7d;
  box-shadow-color: #333;
  /*width: 175px;*/
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-style: solid;
  border-width: 1px;
  background-color: rgba(47, 90, 125, 1);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.pay-plan-button .submit:hover {
  border-color: #2f5a7d;
  color: #2f5a7d;
  background-color: rgba(255, 255, 255, 1);
}

/* RESPONSIVE STYLING */

@media (max-width: 767px){

  .pay-plan-name {
    padding-bottom: 1rem;
  }

  .pay-plan-button {
    position: absolute;
    bottom: 0;
  }

  .pay-plan {
    min-height: 200px;
  }

  /*   .pay-plan-button {
      margin-top: 1em;
    } */

  .pay-plan-labels {
    display:none;
  }
  .last-pay-plan {
    width:100%!important;
  }
  .pay-plan-row {
    flex-direction: column;
  }

  .pay-plan-premium,
  .pay-plan-instamt,
  .pay-plan-dwnpmt {
    text-align: right!important;
    padding-right: 10%;
  }

  div.pay-plan span {
    border-bottom: 1px dotted;
  }
  .pay-plan-button,.pay-plan-name {
    border: none!important;
  }
  div.pay-plan-row div:nth-child(1) span {
    border: none!important;
  }

  span.pay-plan-premium:before { content: 'Estimated Premium';position: absolute;left: 1%; }
  span.pay-plan-instamt:before { content: 'Installment Amt.';position: absolute;left: 1%; }
  span.pay-plan-dwnpmt:before { content: 'Down Payment';position: absolute;left: 1%; }

}


@media (max-width: 600px) {
  .pay-plan-premium,
  .pay-plan-instamt,
  .pay-plan-dwnpmt {
    padding-right: 1%!important;
  }
}


/* HIDE IF EMPTY */
/*span.pay-plan-dwnpmt:empty { display: none; }*/
span.pay-plan-instamt:empty { display: none; }


/* when selected, color .pay-plan different */
.pay-plan.active {
  opacity: 1;
  position: relative;
  top: -10px;
}
.pay-plan.inactive {
  opacity: 0.5;
}