/* Web template for "VMA Loyalty - Earn, Redeem, Debit/Credit Card" screen */

.container-pages h1 {
  font-family: "Inter", sans-serif;
  font-size: 28px;
  color: #484a50;
  font-weight: 600;
  padding-right: 55px;
  padding-left: 16px;
  letter-spacing: -0.32px;
  line-height: 32px;
  margin-top: 26px;
}

.container-pages p {
  font-size: 15px;
  font-weight: 500;
  color: #6c6e74;
  line-height: 20px;
  text-align: left;
  letter-spacing: -0.12px;
  margin: 10px 0px 30px 0;
  padding-right: 55px;
  padding-left: 16px;
}

b {
  padding-right: 55px;
  padding-left: 16px;
  font-weight: 600 !important;
}


.btn {
  /*background-color: #fff; s*/
  border: none;
  border-radius: 8px;
  padding: 20px 20px;
  cursor: pointer;
  width: 100%;
  outline: none !important;
}

button.btn:active {
  background-color: #d8dae0;
}

.template-content {
  margin: 20px 15px 20px;
  position: absolute;
  bottom: 0 !important;
  left: 0;
  right: 0;
  line-height: 0.6;
  }

.btn-header {
  float: left;
  color: #484a50;
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 4.5px;
  line-height: 20px;
  letter-spacing: -0.12px;
  padding-left: 0;
}

.btn-icon {
  float: right;
  color: #e3303a;
  margin: 0;
  padding: 0;
}

.btn-description {
  float: left;
  font-size: 15px;
  font-weight: 400;
  color: #6c6e74;
  line-height: 1.4;
  width: 82vw;
  text-align: left;
  margin: 0;
  padding-right: 20px;
  padding-left: 0;
}

img {
height:"16px";
width:"16px";
}


 

/* /////// Web template for "VMA Loyalty - Bonus Points/Points to Cash OPTIONS screen ////// */


.template-content-options {
  margin: 20px 15px 32px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 0.6;
}


.btn-options {
  background-color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 19px 20px 19px 20px;
  cursor: pointer;
  width: 100%;
  outline: none !important;
}

button.btn-options:active {
  background-color: #d8dae0;
}

.btn-header-options {
  float: left;
  color: #484a50;
  font-weight: 600;
  font-size: 15px;
  margin: 0;
  line-height: 20px;
  letter-spacing: -0.12px;
  padding-left: 0;
}

.btn-icon-options {
  float: right;
  color: #e3303a;
  margin: 0;
  padding: 0;
  padding-top:3px;
  line-height: 0;
}



/* //////// EVERYDAY PURCHASES FORM - - STEP 0 /////// */


/* button container */
#nav-box-every-day {
  padding: 16px !important;
  position: relative; 
  bottom: -29px;
}

/* disabled button */
#link.btn.btn-primary.btn-lg.disabled
{
  background-image: none;
  background-color: #F2F2F6;
  border: 1px solid #c8c8c8;
  color: #c8c8c8;
  font-family: 'Inter';
  font-weight: 500;
  outline: none !important;
}

/* The container */
.container-vma {
display: block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0;
}

/* Checkbox Label */
label.container-vma.section-title{
color: #484a50;
font-weight: 400;
font-size: 15px;
padding-left: 35px;
letter-spacing: -0.12px;
line-height: 20px;
}

/* Hide the browser's default checkbox */
.container-vma input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 24px;
width: 24px;
background-color: #f2f2f6;
border-radius: 4px;
border: 1px solid #e3303a;
}

/* On mouse-over, add a grey background color */
.container-vma:hover input ~ .checkmark {
background-color: #f2f2f6;
}

/* When the checkbox is checked, add a blue background */
.container-vma input:checked ~ .checkmark {
background-color: #e3303a;
}

.checkmark:hover input ~ .checkmark {
background-color: #f2f2f6;
}

span.checkmark {
background-color: #f2f2f6;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}

/* Show the checkmark when checked */
.container-vma input:checked ~ .checkmark:after {
display: block;
}

/* Style the checkmark/indicator */
.container-vma .checkmark:after {
left: 9px;
top: 2px;
width: 6px;
height: 16px;
border: solid white;
border-width: 0 1.8px 1.8px 0;
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
transform: rotate(35deg);
}

 




/* //////// PARTNERS OFFER FORM - STEP 0 /////// */


/* button container */
  #nav-box-partners-offer {
  padding: 16px !important;
  position: relative; 
  bottom: -51px;
  }





/* ////////  BONUS POINTS FORM - STEP 0 /////// */


 /* button container */
 #nav-box-bonus-points {
  padding: 16px !important;
  position: relative; 
  bottom: -230px;
  }




  /* ////////  POINTS TO CASH FORM - STEP 0 /////// */


 /* button container */
 #nav-box-points-cash {
  padding: 16px !important;
  position: relative; 
  bottom: -217px;
  }






  /* //////// CONFIRMATION PAGE  /////// */


  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 360px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
  }
  
  .modal-content {
    background-color: #fefefe;
    box-shadow: none;
    width: 100%;
    border: none;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    margin-top: 50px;
  }
  .title {
    margin: auto;
    padding: 55px 20px 0px;
    font-size: 28px;
    font-family: "Inter", sans-serif;
  }

  .message-title {
    padding: 0;
  }

  .vma-button-confirmation {
    cursor: pointer;
    border-top: 1px solid #ead8d8;
    background-image: linear-gradient(to right, #e10a0a, #cc0858, #80048c);
    background-color: #682727;
    border-radius: 5px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: white;
    padding: 15px;
    margin: 20px 20px 0px;
  }
  .description {
    margin: auto;
    padding: 20px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    width: 90%;
    color: #6c6e74
  }

  .bg {
  background-image: url(https://marvel-b1-cdn.bc0a.com/f00000000188554/virginmoney.com.au/content/dam/virginmoney/Mobile-App/DeNovo/illustrated-woman-run.png);
  background-color: #f2f2f1;
  height: 100%;
  background-position: top;
  background-repeat: no-repeat;
  background-size: 70%;
  margin-top: 20%;
    }

  .bg-error {
    background-image: url(https://virginmoney.com.au/content/dam/virginmoney/illustrations/bike.png);
    background-color: #f2f2f1;
    height: 100%;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 70%;
    margin-top: 20%;
  }