/* global comments */
/*@lrflex-dir
@rlflex-dir*/
/*Refer a Friend - Rewards Statuses & Design Changes*/
.raf-status-btn {
  position: relative;
  display: inline;
  margin-bottom: 30px;
  white-space: normal;
  width: 100% !important;
  padding: 9px;
}
.refer-page .raf-status-btn {
  max-width: 300px;
  margin: 0px;
}
.raf-rewards {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
@media (max-width: 768px) {
  .raf-rewards {
    flex-direction: column;
  }
}
.refer-a-friend .total-summary {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
}
@media (max-width: 768px) {
  .refer-a-friend .total-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
}
.raf-align-items-flex {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
@media (max-width: 768px) {
  .raf-align-items-flex {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
  }
}
.big-text-size {
  font-size: 18px;
  color: #002857;
}
.raf-item {
  padding: 14px 0;
}
.the-friend {
  position: relative;
  display: grid;
  align-items: start;
  grid-template-columns: 180px 1fr 50px;
  grid-template-areas: "friend status arrow" "border border border" ". payments .";
  border-top: 1px solid #d0d8e1;
}
@media (max-width: 1200px) {
  .the-friend {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "friend arrow" "status status" "border border" "payments payments";
  }
}
.grid1 {
  grid-area: friend;
}
.grid2 {
  grid-area: status;
}
.grid3 {
  grid-area: arrow;
}
.friend-payments {
  grid-area: payments;
}
.the-friend .hr {
  background: transparent;
  grid-area: border;
  margin: 0;
  transition: background 0.2s linear;
}
.expanded .the-friend .hr {
  background: #d0d8e1;
}
.raf-crown-icon {
  width: 18px;
  height: 18px;
  /*!!! defined to be rtl/ltr !!!*/
  margin-left: 7px;
}
.crown-status-icon-type1 {
  background: url("../../images/raf/friend-1.svg") no-repeat center center;
}
.crown-status-icon-type2 {
  background: url("../../images/raf/friend-2.svg") no-repeat center center;
}
.crown-status-icon-type3 {
  background: url("../../images/raf/friend-3.svg") no-repeat center center;
}
.crown-status-icon-me {
  background: url("../../images/raf/me.svg") no-repeat center center;
}
.friend-name {
  position: relative;
  top: 3px;
  color: #002857;
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
}
.the-friend .status-value {
  color: #002857;
}
.raf-item-7 label {
  position: relative;
  top: 3px;
  font-size: 18px;
  font-weight: bold;
  color: #002857;
  white-space: nowrap;
  margin: 0;
}
.raf-item-7 i.toggle-accordion-arrow:after {
  content: "";
  position: absolute;
  left: 10px !important;
  right: auto !important;
  top: -16px;
  display: inline-block;
  width: 17px;
  height: 17px;
  border-bottom: 2px solid #002857;
  border-right: 2px solid #002857;
  transform: rotate(45deg);
  transition: transform 0.2s linear;
  cursor: pointer;
}
.expanded .raf-item-7 i.toggle-accordion-arrow:after {
  content: "";
  width: 17px;
  height: 17px;
  top: -10px;
  border-bottom: 2px solid #002857;
  border-right: 2px solid #002857;
  transform: rotate(225deg);
  transition: transform 0.2s linear;
}
.refer-a-friend .flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}
.refer-a-friend .flex-container .raf-item {
  padding: 10px 25px;
  min-width: 160px;
}
.raf-item-1 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.refer-a-friend .grid3 {
  justify-self: end;
  align-self: center;
}
.refer-a-friend .pa-table {
  width: auto;
}
.refer-a-friend .pa-table td,
.refer-a-friend .pa-table th {
  font-size: 14px;
  border: 1px solid transparent;
  /*!!! defined to be rtl/ltr !!!*/
  padding: 7px 25px 7px 0px;
  width: 160px;
}
.refer-a-friend .lab1 {
  display: block;
  position: relative;
}
.refer-a-friend .friend-status-result {
  max-height: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
.refer-a-friend input:checked + .friend-status-result {
  visibility: visible;
  opacity: 1;
  max-height: 10000px;
}
.refer-a-friend .raf-status-btn.loading {
  opacity: 0.6;
}
.refer-a-friend .loading .button-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../../images/blue-loader.gif") no-repeat 0 0;
  vertical-align: middle;
}
.raf-send-lnk-btn {
  position: relative;
  min-width: 300px;
  margin-top: 20px;
  margin-bottom: 35px;
}
/* RAF accordion and crown icon statuses 

    Available = 0  
    Generated = 1     //When the link/code is generated, but the referred customer has not yet become a live customer
    Redeemed = 2      //When the link/code is generated, and the referred customer has become a live customer
    Qualified = 3     //When the link/code is generated, the referred customer has become a live customer and made his first deal
    Active = 4        //When the link/code is generated, the referred customer has become a live customer, made his first deal and the potential rewards start accumulating 
    Completed = 5     // When the 90 days period of the code expired, but the last payment was not done yet
    Paid = 6          //When the 90 days period of the code expired, and the last payment was done

*/