@import url("font.css");

html:lang(en) .malay {
    display: none;
}
html:lang(ms) .english {
    display: none;
}
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    position: relative;
    margin: 0 auto;
    font-family: 'Barlow', Arial;
    background-color: #000;
    color: #000;
    width: 100%;
    max-width: 600px;
    min-width: 360px;
    height: 100%;
    overflow: hidden;
    display: block;
}

div.content {
    overflow: hidden ;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
a {
    color: #000;
}
.clearfix{
    clear: both;
}
strong,
.strong {
    font-family: 'winston_boldregular', Arial;
}

input::placeholder {
  color: #000 !important; /* Firefox */
}
input::-ms-input-placeholder {
  color: #000 !important; /* Firefox */
}
input[type=date] {
    -webkit-appearance: none;
    -moz-appearance: none;
}
select {
    color: #000;
    /* Reset Select */
    appearance: none;
    outline: 0;
    box-shadow: none;
    flex: 1;
    padding: 6px 12px;
    background-color: #fff;
    border-radius: 15px;
    cursor: pointer;
    /* font-family: 'winston_mediumregular'; */
    -moz-appearance: none;
    -webkit-appearance: none;
    height: 67px;
}
select:invalid{ color: #555 };
select::-ms-expand {
    display: none;
}
/* Custom Select wrapper */
.select {
    position: relative;
    display: flex;
    /* overflow: hidden; */
    font-size: 24px;
}
/* Arrow */
.select::after {
    content: '';
    background: url('../img/select-arrow.png') no-repeat center;
    background-size: contain;
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 1em;
    transition: .25s all ease;
    pointer-events: none;
    font-size: 15px;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}
.text-shadow {
    color: #fff;
    /* -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #f78f1e;
    text-shadow: 0px 3px 4px rgba(0,0,0,1); */
    text-shadow:
        -3px -3px 0 #f78f1e,
        0 -3px 0 #f78f1e,
        3px -3px 0 #f78f1e,
        3px 0 0 #f78f1e,
        3px 3px 0 #f78f1e,
        0 3px 0 #f78f1e,
        -3px 3px 0 #f78f1e,
        3px 0 0 #f78f1e,
        0px 8px 4px rgba(0,0,0,0.5)
}
.text-shadow-s {
    color: #fff;
    text-shadow:
        -1px -1px 0 #f78f1e,
        0 -1px 0 #f78f1e,
        1px -1px 0 #f78f1e,
        1px 0 0 #f78f1e,
        1px 1px 0 #f78f1e,
        0 1px 0 #f78f1e,
        -1px 1px 0 #f78f1e,
        1px 0 0 #f78f1e,
        0px 4px 3px rgba(0,0,0,0.5)
}
.text-shadow2 {
    color: #000;
    text-shadow:
        -3px -3px 0 #f78f1e,
        0 -3px 0 #f78f1e,
        3px -3px 0 #f78f1e,
        3px 0 0 #f78f1e,
        3px 3px 0 #f78f1e,
        0 3px 0 #f78f1e,
        -3px 3px 0 #f78f1e,
        3px 0 0 #f78f1e,
        0px 8px 4px rgba(0,0,0,0.5)
}


.hide {
    display: none;
    animation: fadeout ease-in 1s;
}
.show {
    display: block;
    animation: fadein ease-in 1s;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
label {
    color: inherit;
    font-size: 44px;
    margin-bottom: 31px;
    /* font-family: 'DIN 2014'; */
}


.wrapper {
    /* background-color: #b407c1; */
}

.menu-container {
    position: absolute;
    top: 0;
    left: 0;
    color: #000;
    font-size: 24px;
    padding: 15px;
    z-index: 9999;
}
.menu-container button {
    background-color: transparent;
    border: none;
}

.btn-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    margin-bottom: 10%;
    z-index: 100;
    padding: 0 12%;
}
.btn {
    color: #000;
    text-align: center;
    cursor: pointer;
    font-size: 25px;
    line-height: 45px;
    background-color: transparent;
    padding: 0 30px;
}
.btn-shadow {
    content: ' ';
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    background: #000;
    border-radius: 50px;
}
.btn-container .btn-shadow {
    width: 100%;
    min-width: 120px;
}
.btn-spacer {
    width: 12%;
}
.btn-spacer.center {
    width: 20%;
}
.btn-cta {
    color: #fff;
    background: #fb002c;
}

.btn-container-center {
    display: flex;
    justify-content: center;
    /* margin-top: 185px; */
    width: calc(100% - 80px);
    position: absolute;
    bottom: 39px;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;

}

.btn-container-2 {
    justify-content: space-between;
}
.btn-next,
.btn-back {
/*    text-align: center;
    cursor: pointer;
    font-size: 20px;
    width: 270px;
    line-height: 40px;
    height: 145px;
    text-transform: capitalize;
    padding-top: 41px;
    background: url('../img/btn-bg.png') no-repeat top center;
    background-size: contain;*/
}

section {
    position: relative;
}

/* Common style for pseudo-elements */
/*section::before,
section::after {
  position: absolute;
  content: '';
  pointer-events: none;
  overflow: hidden;
}*/

#main-container {
    max-width: 640px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    /*background-image: url('../img/bg.jpg');*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
    background-color: #000;
}
.bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    /*  position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 0;*/
    /*  position: relative;
      background-image: url('../img/bg.jpg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: top center;
      height: 500px;*/
}
.bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Containers */
.main-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%; 
    overflow: hidden; 
}
.full-screen-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%; 
    overflow: hidden; 
}
.content-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    margin: 0 auto;
    width: 100%;
    height: 80%; 
    overflow: scroll; 
}



.welcome {
    padding: 0;
    margin-top: 150px;
    /* bottom: 290px;
    top: auto; */
    overflow: scroll;
}

.landing-heading {
    text-align: center;
    font-weight: 600;
    font-size: 50px;
    line-height: 78px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.landing-subheading {
    font-weight: bold;
    font-style: italic;
}

.landing-cta {
    position: absolute;
    bottom: 20%;
    text-align: center;
    font-size: 34px;
    font-weight: 500;
    margin-top: 54px;
    width: 100%;
}
.landing-btn-container {
    /*width: 570px;*/
    /*margin: 30px auto;*/
/*    display: flex;
    justify-content: space-between;*/
}



/* Selection */
.selection {
    /*margin: 295px 50px;*/
    margin: 175px 50px;
    width: auto;
}

.btn-selection {
    border: 5px solid #fff;
    color: #fff;
    margin-bottom: 35px;
    text-align: center;
    font-size: 78px;
    height: 162px;
    align-items: center;
    display: flex;
    justify-content: center;
    line-height: 64px;
    cursor: pointer;
    text-transform: uppercase;
}
a.btn-selection,
a.btn-selection:hover {
    text-decoration: none;
    color: #fff;
}
/* YOUTUBE modal */
.modal-header {
    min-height: 16.43px;
    padding: 7px 17px;
    border-bottom: none;
}


/* PDPA */
.bg-img img {
    /*margin-left: 11px;*/
}
.pdpa {
    /*margin: 59px 51px 0;*/
    /*height: 100vh;*/
}
.pdpa-container .title {
    text-align: center;
    margin-top: 66px;
    font-size: 36px;
    font-weight: 500;
}
.pdpa-container .subtitle {
    text-align: center;
    font-size: 27px;
    line-height: 34px;
    margin-bottom: 27px;
    font-weight: 500;
}
.btn-container-pdpa {
    justify-content: space-around;
    padding-bottom: 30px;
    margin-bottom: 10px;
    margin-top: 36px;
    margin-left: auto;
    margin-right: auto;
}
.btn-pdpa,
.btn-pdpa-decline {
/*    text-align: center;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    width: 100%;
    height: 140px;
    padding-top: 37px;*/
}
.btn-pdpa.malay,
.btn-pdpa-decline.malay {
    font-size: 23px;
}
.pdpa-container{
    /* margin: 45px 38px 0; */
    /* background-color: RGBA(0,0,0,0.1); */
    /* padding: 45px 14px; */
    padding: 0;
    /*font-size: 20px;*/
    /*height: 85vh;*/
    height: 100%;
    width: auto;
}
.pdpa-content {
    margin: 0;
}
.pdpa-body-copy {
    margin: 5px 88px 0px 88px;
}
.pdpa-body-copy .english, .pdpa-body-copy .malay  {
    height: 400px;
    overflow: scroll;
}
/* .pdpa-container .title {
  font-size: 66px;
  line-height: 62px;
  margin-bottom: 17px;
  text-align: center;
  letter-spacing: 4px;
  font-weight: bold;
}
.pdpa-container .subtitle {
  font-size: 30px;
  line-height: 33px;
  margin-bottom: 15px;
  text-align: center;
  margin-bottom: 28px;
  -webkit-text-stroke-width: 2px;
} */
.pdpa-container p {
    text-align: justify;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 18.4px;
    line-height: 17.5px;
    letter-spacing: -0.2px;
    /* text-transform: uppercase; */
    background-color: rgba(255,255,255,0.4);
}
.pdpa-agree {
    position: relative;
    margin: 3% 0px;
}
.pdpa-agree [type="checkbox"]+label {
    margin: 0 105px;
    font-size: 13px;
}

.pdpa-agree [type="checkbox"]+label>span {
    font-size: 17px;
    font-weight: normal;
}
.pdpa-agree [type="checkbox"]+label::before {
    min-width: 32px;
    min-height: 32px;
    left: -39px;
    border: 3px solid #ffffff;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.btn-pdpa.disable {
    opacity: 0.3 !important;
}

/* OTP */

.otp-verification {
    padding: 120px 63px 0 68px;
    width: 100%;
}
.otp-verification label {
    font-size: 34px;
    margin-bottom: 5px;
    font-weight: 500;
    /* font-family: 'winston_mediumregular'; */
}
.otp-verification ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ffffff;
    opacity: 0.5; /* Firefox */
    font-family: 'winstonthin';
}

.otp-verification :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ffffff;
    font-family: 'winstonthin';
}

.otp-verification ::-ms-input-placeholder { /* Microsoft Edge */
    color: #ffffff;
    font-family: 'winstonthin';
}
.form-group.contact-field {
    margin-bottom: 10px;
}
.input-group-addon {
    position: absolute;
    z-index: 2;
    display: block;
    width: 77px;
    line-height: 24px;
    font-size: 24px;
    padding: 6px;
    text-align: center;
    pointer-events: none;
    color: #ddd;
    border: none;
    background-color: #000;
    padding: 22px 15px;
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
    overflow: hidden;
}
.prefix {
    padding-left: 90px;
}
.prefix::placeholder {
    color: #aaa;
    font-family: inherit;
}
.btn-container-otp {
    margin-top: 200px;
}
.btn-otp {
    
}


.password-field { 
    position: relative; 
    display: inline-block;
    width: 100%;
} 

.password-field input { 
    padding-right: 50px; 
} 

.toggle-password { 
    position: absolute; 
    top: 50%; 
    right: 10px; 
    transform: translateY(-50%); 
    border: none; 
    background: none; 
    cursor: pointer;
    font-size: 24px;
}

/* Profile */
.profile {
    padding: 10% 12% 0 12%;
    width: 100%;
    height: 100%;
}
.profile .form-group {
    margin-bottom: 50px;
}
.profile .title {
    color: inherit;
    font-size: 33px;
    margin-bottom: 5px;
    font-weight: 500;
}
input#mobile {
    padding-top: 9px;
}
.btn-container-personal-info {
    position: absolute;
    width: 100%;
    margin-top: 95px;
    margin-bottom: 50px;
    bottom: 0;
    left: 0;
}
.form-control {
    background-color: #fff;
    height: 67px;
    color: #000;
    font-size: 24px;
    border-radius: 15px;
}
.form-group {
    margin-bottom: 32px;
}
.contact-field ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #4e4e4e;
    opacity: 0.5; /* Firefox */
}

.contact-field :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #4e4e4e;
}

.contact-field ::-ms-input-placeholder { /* Microsoft Edge */
    color: #4e4e4e;
}

/* for IE10 */
select::-ms-expand {
    display: none;
}

option {
    color: #000000;
}
option:checked {
    color: #555555;
}

/* Remove IE arrow */

/* Transition */
/*.select:hover::after {
  color: #f39c12;
}
*/
.brand {
    /* padding-top: 14px; */
    margin-top: 20px;
}
.brand .selected {

}
.brand-name,
.other-brand-name {
    /* color: #fff; */
    font-size: 28px;
    font-weight: normal;
    /* margin-left: 25px; */
}
.brand-name img {
    width: 29px;
    margin-left: 12px;
    margin-top: 5px;
}
/*.brand-name:after {
    content: '';
    background: url(../img/select-arrow.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 8px;
    padding: 1em;
    transition: .25s all ease;
    pointer-events: none;
}*/
.brand-selection {
    margin-left: 3px;
    display: none;

}
.brand-selection [type="radio"]+label>span,
.brand-selection [type="radio"]+label {
    font-size: 28px;
    line-height: 31px;
    font-weight: 500;
}

/*.brand-selection. [type="radio"]+label>span,
 {
    font-size: 32px;
    margin-bottom: 15px;
}*/

/*[type="radio"]+label>span, 
[type="radio"]+label {
    font-size: 44px;
}*/

[type="checkbox"], [type="radio"] {
    margin: 0 8px 0 0;
    box-sizing: border-box;
    min-width: 18px;
    min-height: 18px;
}

/*hide the original checkbox and radio button*/

[type="checkbox"] , [type="radio"] {
    opacity: 0;
    pointer-events: none;
}


.radio-group, .checkbox-group {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-bottom: 12px;
}


[type="radio"]+label,
[type="checkbox"]+label {
    margin: 0 5px 0 21px;
    font-size: 44px;
    position: relative;
    cursor: pointer;
}
.brand [type="radio"]+label {
    margin: 0px 5px 0 27px;
    font-size: 38px;
    text-transform: uppercase;
}
.brand .checkbox-group {
    margin-bottom: 7px;
}



/* this is the custom box for the checkbox*/

[type="checkbox"]+label::before {
    content: '';
    min-width: 30px;
    min-height: 30px;
    position: absolute;
    left: -36px;
    border: 4px solid #f78f1e;
    border-radius: 50%;
    top: -2px;
    background-color: #fff;
    transition: all 0.4s;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.6);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.6);
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.6);



}

/* custom checkmark made using only css*/

/* 
[type="checkbox"]+label::after {
    content: '';
    min-width: 0px;
    min-height: 0px;
    position: absolute;
    left: -20px;
    top: 2px;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    background-color:red; 
    transform: rotateZ(40deg);
    transition:  all 0.4s;

}  
*/

/* this will unhide the custom checkmark */

/* [type="checkbox"]:checked +label::after {
    min-width: 5px;
    min-height: 10px;
} */

/* this is the svg for the checkmark */

[type="checkbox"]+label svg {
    position: absolute;
    width: 28px;
    left: -43px;
    top: 7px;
}

/* this is the polyline for the checkmark svg */

[type="checkbox"]+label svg polyline {
    stroke: white;
    stroke-width: 8;
    fill: none;
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    transition: stroke-dashoffset 0.4s;
}

/* change the color of custom checkbox when the original checkbox is in checked state */

[type="checkbox"]:checked+label::before {
    background-color: #000;
    border-color: #fff;
}

/* setting stroke-dashoffset to 0 will reveal the hidden checkmark */

[type="checkbox"]:checked+label svg polyline {
    stroke-dashoffset: 0;
}

/*textarea {
    width: 100%;
    box-sizing: border-box;
    height: 200px;
    resize: none;
    padding: 4px;
    font-size: 16px;
}
*/

/* custom circle for radio button*/
[type="radio"]+label::before {
    content: '';
    position: absolute;
    border: 4px solid #fff;
    left: -36px;
    /* top: 6px; */
    top: -7px;
    width: 30px;
    height: 30px;
    transition: all 0.4s;
}
.brand [type="radio"]+label::before {
    top: 3px;
}

/* fill circle with inset shadow when it is selected*/
[type="radio"]:checked+label::before {
    box-shadow: inset 0 0 0 13px #3e75e5;
    border-color: #fff;
}
.others-brand-group {
    font-size: 44px;
    margin-bottom: 31px;
    line-height: 1;
}
.others-brand-group input {
    margin-top: 15px;
}


/* Profile 2*/
.profile-2 {
    /* margin: 63px 63px 0 36px;
    width: auto; */
    padding: 10% 12% 0 12%;
    width: 100%;
}
.profile-2 .title {
    /* color: #fff; */
    font-size: 33px;
    margin-bottom: 9px;
    line-height: 140%;
}
.profile-2 .title.gender {
    margin-bottom: 16px;
}
.answer-container {
    /*margin-bottom: 67px;*/
}
/*.two-column-between {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.btn-answer {
  border: 4px solid #fff;
  text-align: center;
  color: #fff;
  font-size: 32px;
  width: 132px;
  cursor: pointer;

}
.btn-answer.active {
  background-color: #de7602;
}*/

.option-wrapper{
    /*display: inline-flex;*/
    /*background: #fff;
    height: 100px;
    width: 400px;*/
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px !important;
    /*justify-content: space-evenly;*/
}
.option-wrapper.question{
    display: inline-flex;
    margin-bottom: 15px;
}
.option-wrapper .option{
    background: #fff;
    transition: all 0.3s ease;
    text-align: center;
    font-size: 26px;
    line-height: 60px;
    height: 68px;
    line-height: 68px;
    width: 45%;
    cursor: pointer;
    font-weight: 500;
    border-radius: 15px;
}
.option-wrapper.question .option {
    width: 90px;
    display: block;
    margin-right: 15px;
}
.option-wrapper input[type="radio"]{
    display: none;
}
#a1:checked:checked ~ .option-1,
#a2:checked:checked ~ .option-2,
#a3:checked:checked ~ .option-3,
#a4:checked:checked ~ .option-4,
#a5:checked:checked ~ .option-5,
#a6:checked:checked ~ .option-6,
#male:checked:checked ~ .male,
#female:checked:checked ~ .female,
#smokerYes:checked:checked ~ .smokerYes,
#smokerNo:checked:checked ~ .smokerNo,
#q1Yes:checked:checked ~ .q1Yes,
#q1No:checked:checked ~ .q1No,
#q2Yes:checked:checked ~ .q2Yes,
#q2No:checked:checked ~ .q2No{
    background: #000;
    color: #ffffff;
    border-color: #fff;
}
.option-wrapper [type="radio"]+label,
.option-wrapper label {
    margin: 0;
}

.option-wrapper [type="radio"]+label::before {
    display: none;
}

/*.btn-container-profile-2 {
  margin-top: 191px;
}*/

/* Question 1*/
.question-1 , .question-2, .question-3, .question-4, .question-5{
    /* margin: 121px 63px 0 68px; */
    padding: 10% 12% 0 12%;
    width: 100%;
}

.question-1  .title,
.question-2  .title,
.question-3  .title,
.question-4  .title,
.question-5  .title  {
    font-size: 31px;
    line-height: 42px;
    font-weight: 500;
    margin-bottom: 15px;
}

.question-1 textarea.form-control,
.question-2 textarea.form-control {
    width: 460px;
    min-height: 170px;
}
.question-1 .form-group,
.question-2 .form-group,
.question-3 .form-group,
.question-4 .form-group,
.question-5 .form-group  {
    margin-right: 40px;
    margin-top: 290px;
}
.question-1 label,
.question-2 label,
.question-3 label,
.question-4 label,
.question-5 label {
    line-height: 30px;
    font-size: 27px;
    font-weight: 500;
    text-transform: uppercase;
    /* margin-bottom: 24px; */
}

.question-1 .answer-container,
.question-2 .answer-container  {
    margin-top: 18px;
    margin-left: 0;
}
.question-3 .answer-container {
    margin-left: 0;
}

.question-3 label {
    margin-bottom: 0;
}
.small-text {
    color: #fff;
    font-size: 20px;
    margin-bottom: 10px;
    /* font-family: 'winston_mediumregular'; */
}
.btn-container-q-1,
.btn-container-q-2,
.btn-container-q-3 {
    /* margin-top: 541px; */
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 35px;
    margin-left: 4%;
    justify-content: space-between;
    width: 92%;
    
    /* border: 2px solid red; */

}
button#submit {
    border: none;
    margin-top: 0;
}
button#submit span {
    margin-top: -20px;
}
/* .btn-container-q-3 {
    margin-top: 338px;
} */
.thankyou-end {
    margin: 20% auto;
    text-align: center;
}
.thankyou-end .heading {
    font-size: 75px;
    font-weight: 600;
}
.thankyou-end .subhead {
    margin-top: 0px;
    font-size: 30px;
    font-weight: normal;
    padding: 0 10%;
}

.share {
    text-align: center;
    color: #fff;
    margin-top: 72px;
}
.share .heading {
    font-size: 59px;
    font-weight: 600;
}
.share .subhead {
    margin-top: 13px;
    font-size: 26.6px;
    font-weight: normal;
    line-height: 32px;
}
.share-btn-container {
    width: 300px;
    gap: 22px;
    bottom: 192px;
}

.download-text {
    text-align: center;
    color: #fff;
    margin-top: 745px;
}
.download-text .subhead {
    margin-top: 13px;
    font-size: 35px;
    font-weight: normal;
    line-height: 41px;
    padding: 0 70px;
}
.btn-download, .btn-download:hover {
    text-decoration: none;
    color: #fff;
}

/* modal css */
.video-dialog .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-width: 1200px) {
    .video-dialog,
    .text-dialog {
        max-width: 640px;
        width: 60% !important;
    }
}

.video-dialog,
.text-dialog {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: table;
    width: 90%;
    max-width: 550px;
    margin: auto;
}
.video-dialog button.close,
.text-dialog button.close  {
    position: absolute;
    padding: 4px 8px;
    z-index: 2;
    opacity: 1;
    color: #fff;
    outline: 0;
    right: -14px;
    top: -14px;
    border-radius: 400px;
    background-color: dimgray;
    outline:0;
}
.video-dialog .modal-content,
.text-dialog .modal-content {
    display: table-cell;
    vertical-align: middle;
    height: auto;
    background-color: dimgrey;
    border-radius: 10px;
    box-shadow: none;
    border:1px solid rgba(0,0,0,0);
}
.text-dialog .modal-content {
    background-color: #fff;
    color: #555555;
    font-size: 20px;
    text-align: center;
}
.text-dialog .modal-footer {
    display: flex;
    justify-content: center;
}
.hl {
    display: block;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 34px;
}
a.hl,
a.hl:hover,
a.hl:visited {
    color: #fff;
    text-decoration: none;
}
.hl.whatsapp {
    background-color: #25D366;
}
.hl.call {
    background-color: #e28121;
}
.hl img {
    width: 70px;
    padding-right: 20px;
}

.modal-code-container {
    width: 80%;
    margin: 0 auto;
}

.modal-code-container p,
.modal-code-container img {
    width: 100%
}

.modal-code-container input {
    text-align: center;
    width: 85%;
    margin: 0 auto;
    margin-bottom: 20px;
    background-color: #E5E7E8;
    border-radius: 20px;
    border: none;
    color: #000;
}

.btn-modal-code {
    display: block;
    position: relative;    
}
.btn-modal-code img {
    
}
.btn-modal-code p {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0;
    height: 71.43%;
    vertical-align: middle;
    /* margin-top: 50%; */
    line-height: 100%;
    color: #FFF;
    font-size: 22px;
    line-height: 75px;
}

.each-receipt {
    padding: 0 30px;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 400px;
}