/*
  Theme Name: Name - NWG APPS HTML Template
  Description: Creative  HTML5 template.
  Version: 1.0.10
*/

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/roboto/roboto-light.ttf);
    font-weight: 100;
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/roboto/roboto-regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/roboto/roboto-medium.ttf);
    font-weight: 500;
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/roboto/roboto-bold.ttf);
    font-weight: 700;
}

/*15-11-22 ADDED*/
@font-face {
  font-family: FontAwesome;
  src: url('../fonts/fontawesome-webfont.ttf'); 
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-style: normal;
    background-color: #ffffff;
    color: #808080;   
}

.bdr-none {
    border: none !important;
}

.bdr-tp {
    border-top: 1px solid #D1D1D1;
}

.bdr-tp-thick {
    border-top: 10px solid #F0F3F5;
}

.bdr-bottom-thick {
    border-bottom: 10px solid #F0F3F5;
}

a {
    text-decoration: none;
}
button {
    cursor: pointer;
    /* CHG - all button border none */
    border: none;
}
/* CHG - all button border none */
input[type='submit'] {
    border: none;
}

input{
    font-family: 'Roboto', sans-serif;
}


/*--===== safari browser input fields remove the inner shadow and safari button =====*/
    input.text,
    input[type="text"],
    input[type="button"],
    input[type="submit"],
    input[type="password"],
    input[type="tel"],
    .input-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

a:hover {
    text-decoration: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*,
::after,
::before {
    box-sizing: border-box;
}

.scroll::-webkit-scrollbar {
    display: none;
}

*::-moz-placeholder {
    color: #797979;
    font-size: 15px;
    font-weight: 400 !important;
    opacity: 1;
}

*::placeholder {
    color: #797979;
    font-size: 15px;
    font-weight: 400 !important;
    opacity: 1;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scroll {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

/* CHG - REMOVE THE BLUE TAP */
input, textarea, button, select, a, span, div {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a,
button {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

a:hover {
    text-decoration: none;
}

a:focus,
button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
    outline: 0;
    outline: none !important;
    box-shadow: none !important;
    border-style: none;
}

/*Change all the focus input to blue outline*/
/*input:focus {
    border: 1px solid #80baff !important;
    box-shadow: 0 0 0px 3px #bbdeff !important; 
}*/
/*box-shadow: 0 0 0px 3px #bbdeff !important;*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    color: #4A4A4A;
    margin-top: 0px;
    font-style: normal;
    font-weight: 400;
    text-transform: normal;
}


h1 {
    font-size: 48px;
    font-weight: 500;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 26px;
}

h5 {
    font-size: 24px;
}


ul {
    margin: 0px;
    padding: 0px;
    list-style: none
}


p {
    font-size: 11px;
    font-weight: normal;
    line-height: 24px;
    color: #7e7e7e;
    margin-bottom: 15px;
}


button,
input {
    overflow: visible;
}

/* -- New Template UI -- */

.white-bg-section{
    background: #fff;
}

.black-bg-section{
    background: #000;
}

.grey-bg-section{
    background: #f8f8f8;
}

.grey-bg-section-v2{
    background: #F1F2EF;
}

.grey-bg-section-v3{
    background: #F7F8F8;
}

.grey-bg-section-v4{
    background: #F7F6F3;
}

.darkgrey-bg-section{
    background: #ebecec;
}

.darkgrey-v2-bg-section{
    background: #ebebeb;
}

.darkgrey-v3-bg-section{
    background: #adb7c1;
}

.darkgrey-v4-bg-section{
    background: #494949;
}

.darkgrey-v5-bg-section{
    background: #444C51;
}

.darkgrey-v6-bg-section{
    background: #454545;
}

.darkgrey-bg-section-v7{
    background: #7C7C7C;
}

.darkgrey-bg-section-v8{
    background: #8E8E8E;
}

.light-grey-bg-section{
    background: #DADDE0;
}

.light-grey-bg-section-v2{
    background: #F6F6F6;
}

.light-grey-bg-section-v3{
    background: #FAFBFC;
}

.light-grey-bg-section-v4{
    background: #F4F4F4;
}

.light-grey-bg-section-v5{
    background: #EFEFEF;
}

.light-grey-bg-section-v6{
    background: #F7F7F7;
}

.light-red-bg-section{
    background: #FFFAFA;
}

.red-bg-section{
    background: #E54646;
}

.red-bg-section-v2{
    background: #D84C4C;
}


.dark-red-bg-section{
    background: #750F0F;
}

.dark-red-bg-section-v2{
    background: #A51616;
}

.dark-red-bg-section-v3{
    background: #CB1E1E
}


.light-green-bg-section{
    background-color: #1BD741;
}

.light-green-bg-section-v2{
    background-color: #F5FDF4;
}

.light-green-bg-section-v3{
    background-color: #e5f7f1;
}

.light-green-bg-section-v4{
    background-color: #F8FDFB;
}

.light-green-bg-section-v5{
    background-color: #E3FFEE;
}

.light-green-bg-section-v6{
    background-color: #ECF2F0;
}

.light-green-bg-section-v7{
    background-color: #F8FDFB;
}

.green-bg-section{
    background-color: #15A432;
}

.green-bg-section-v2{
    background-color: #16A533;
}

.green-bg-section-v3{
    background-color: #15A483;
}

.green-bg-section-v4{
    background-color: #50CA80;
}

.green-bg-section-v5{
    background-color: #17B4AE;
}

.dark-green-bg-section{
    background-color: #0F7524;
}

.dark-green-bg-section-v2{
    background-color: #1C6F61;
}

.dark-green-bg-section-v3{
    background-color: #254541;
}

.dark-green-bg-section-v4{
    background-color: #0E8D72;
}

.dark-green-bg-section-v5{
    background-color: #4A5A5F;
}

.dark-orange-bg-section {
    background-color: #f39305;
}

.dark-orange-bg-section-v2 {
    background-color: #EF841A;
}

.light-orange-bg-section {
    background-color: #FFBB33;
}

.light-orange-bg-section-v2 {
    background-color: #FFF4E3;
}

.light-orange-bg-section-v3 {
    background-color: #FFFCF4;
}

.teal-bg-section{
    background-color: #8CB4B7;
}

.navy-blue-bg-section{
    background-color: #547DA0;
}

.dark-navy-blue-bg-section{
    background-color: #0B4370;
}

.dark-navy-blue-bg-section-v2{
    background-color: #215C96;
}

.dark-navy-blue-bg-section-v3{
    background-color: #030251;
}

.dark-navy-blue-bg-section-v4{
    background-color: #0A3D5D;
}

.dark-navy-blue-bg-section-v5{
    background-color: #416778;
}

.light-teal-bg-section{
    background-color: #F3F9FA;
}

.blue-bg-section{
    background-color: #1D9AFA;
}

.blue-bg-section-v2{
    background-color: #0055CA;
}

.blue-bg-section-v3{
    background-color: #718A96;
}

.light-blue-bg-section{
    background-color: #F2FAFF;
}

.light-blue-bg-section-v2{
    status-containerbackground-color: #FAFCFF;
}

.light-blue-bg-section-v3{
    background-color: #56c1f2 ;
}

.light-blue-bg-section-v4{
    background-color: #EDF3FC ;
}

.light-blue-bg-section-v5{
    background-color: #4AB8F7;
}

.light-blue-bg-section-v6{
    background-color: #E3F4FF;
}

.light-blue-bg-section-v7{
    background-color: #E3F9FF;
}

.light-blue-bg-section-v8{
    background-color: #e3faff;
}

.light-blue-bg-section-v9{
    background-color: #e7f8fe;
}

.light-blue-bg-section-v10{
    background-color: #f1f8ff;
}


/*12-05-22*/
.orange-bg-section{
    background-color: #EF841A;
}

.orange-bg-section-v2{
    background-color: #D86003;
}

.orange-bg-section-v3{
    background-color: #E37955;
}

.orange-bg-section-v4{
    background-color: #F6C00B;
}

.orange-bg-section-v5{
    background-color: #E88564;
}

/*12-11-21*/
.light-blue-bg-section-v4{
    background-color: #F3F6F9 ;
}

.light-blue-bg-section-v5{
    background-color: #4AB8F7;
}

/*21-02-23*/
.light-blue-bg-section-v6{
    background-color: #E8F8FF;
}

.light-blue-bg-section-v7{
    background-color: #EDF9FF;
}

.light-blue-bg-section-v8{
    background-color: #27A5E8;
}

.light-blue-bg-section-v9{
  background-color: #F8FCFD;
}

.biege-bg-section{
    background-color: #F7F4EC;
}

.biege-bg-section-v2{
    background-color: #F6F4F1;
}

.biege-bg-section-v3{
    background-color: #FFFCF7;
}

.biege-bg-section-v4{
    background-color: #F5F1EC;
}

.biege-bg-section-v5{
    background-color: #F6F4F1;
}

.brown-bg-section{
    background-color: #4D4737;
}

.brown-bg-section-v2{
    background-color: #744F13;
}

.brown-bg-section-v3{
    background-color: #F4F2ED;
}

.gradient-blue-teal-section{
    background: transparent linear-gradient(271deg, #35C9AD 0%, #2B468A 100%) 0% 0% no-repeat padding-box;
}

.gradient-orange-section{
    background: transparent linear-gradient(271deg, #e5ac40 0%, #c76823 100%) 0% 0% no-repeat padding-box;
}

/* border style */

.border-top-1px{
    border-top: 1px solid #EFF1F0;
}

.border-top-2px-green{
    border-top: 2px solid #57B289;
}

.border-bottom-1px{
    border-bottom: 1px solid #EFF1F0;
}

.border-bottom-1px-v2{
    border-bottom: 1px solid #E8E5E2;
}

.border-bottom-10px{
    border-bottom: 10px solid #edeff1;
}

.border-bottom-1px-short{
    border-bottom: 1px solid #EFF1F0;
    margin: 0 25px;
}

.border-bottom-1px-short-20{
    border-bottom: 1px solid #EFF1F0;
    margin: 0 20px;
}

.border-1px-short{
    border-bottom: 1px solid #D4D4D4;
    margin: 0 25px;
}

.grey-radius-1px{
    border: 1px solid #b0b0b0;
    border-radius: 24px;
}

.red-radius24-1px{
    border: 1px solid #FF6D6B;
    border-radius: 24px;
}

.grey-border-1px{
    border: 1px solid #cacaca;
}

.light-grey-border-v2{
    border: 1px solid #DADDE0;
}

.light-grey-border-v3{
    border: 1px solid #E1E1E1;
}

.light-grey-border-v4{
    border: 1px solid #EFF1F0;
}

.teal-border-1px{
    border: 1px solid #8cb4b7;
}

.light-blue-border-1px{
    border: 1px solid #A2CFFF;
}

.light-grey-border-1px{
    border-bottom: 1px solid #D4D4D4;
}

.light-grey-border-1px-v2{
    border-bottom: 1px solid #F2F2F2;
}

.light-grey-border-bottom-1px{
    border-bottom: 1px solid #EEECE7;
}

.green-border-1px{
    border: 1px solid #E9F0E9;
}
.radius2{
    border-radius: 2px;
}

.radius5{
    border-radius: 5px;
}

.radius10{
    border-radius: 10px;
}

.radius20{
    border-radius: 20px;
}

.radius24{
    border-radius: 24px;
}

.radius25{
    border-radius: 25px;
}

/*-------- Margin style start ---------*/

.margin-bottom-0{
    margin-bottom: 0px !important; 
}

.margin-bottom-10{
   margin-bottom: 10px !important; 
}

.margin-bottom-20{
   margin-bottom: 20px !important; 
}

.margin-20{
   margin: 20px !important;
}

.margin-tb20{
    margin-bottom: 20px !important;
    margin-top: 20px !important;    
}

.margin-15{
   margin: 15px !important;
}

.margin-auto{
    margin: auto;
}

.mb-0{
    margin-bottom: 0px !Important;
}

.mb-5{
    margin-bottom: 5px;
}

.mb-10{
    margin-bottom: 10px;
}

.mb-20{
    margin-bottom: 20px;
}

.mb-30{
    margin-bottom: 30px;
}

.mb-40{
    margin-bottom: 40px;
}

.mt-5{
    margin-top: 5px;
}

.mt-3{
    margin-top: 3px;
}

.mt-10{
    margin-top: 10px;
}

.mt-20{
    margin-top: 20px;
}

.mt-25{
    margin-top: 25px;
}

.mt-30{
    margin-top: 30px;
}

.margin-top-10{
    margin-top: 10px;
}

.mt-20{
    margin-top: 20px;
}

.mt-30{
    margin-top: 30px;
}

.mr-5{
    margin-right: 5px;
}

.mr-10{
    margin-right: 10px;
}

.mr-15{
    margin-right: 15px;
}

.mr-20{
    margin-right: 20px;
}

.ml-5{
    margin-left: 5px;
}

.ml-10{
    margin-left: 10px;
}

.ml-20{
    margin-left: 20px;
}

/*-------- Margin style end ---------*/

.padding-bottom-10{
   padding-bottom: 10px !important; 
}

.padding-bottom-20{
   padding-bottom: 20px !important; 
}

.radius-5{
    border-radius: 5px;
}

.radius-8{
    border-radius: 8px !important; 
}

.radius-10{
    border-radius: 10px;
}

.radius-15{
    border-radius: 15px;
}

.radius-20{
    border-radius: 20px;
}

.radius-24{
    border-radius: 24px;
}

.shadow-s1{
    box-shadow: 0px 0px 6px rgba(175, 175, 175, 0.68);
}

.shadow-s2 {
    box-shadow: 0px 0px 12px rgb(175 175 175 / 90%);
}

.shadow-s3{
    box-shadow: 0px 0px 20px #00000029;
}

.p-5{
    padding: 5px;
}

.p-5-l22{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right:0px;
    padding-left: 5%;
}

.p-10{
    padding: 10px;

}

.p-10-5{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right:5px;
    padding-left: 5px;
}

.p-20-5{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right:5px;
    padding-left: 5px;
}

.p-10-l15{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right:0px;
    padding-left: 15px;
}

.p-10-r15{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right:15px;
    padding-left: 0px;
}

.pt0-r15-b10{
    padding-top: 0px;
    padding-bottom: 10px;
    padding-right:15px;
    padding-left: 0px;
}

.pt15-b5-15{
    padding-top: 15px;
    padding-bottom: 5px;
    padding-right:15px;
    padding-left: 15px;
}

.p-15-10{
    padding: 15px 10px 15px 10px;
}

.p-15{
    padding: 15px;
}

.p-20{
    padding: 20px;
}

.pt-2{
    padding-top: 2px;
}

.pt-5{
    padding-top: 5px;
}

.pt-8{
    padding-top: 8px;
}

.pt-10{
    padding-top: 10px;
}

.pt-12{
    padding-top: 12px;
}

.pt-15{
    padding-top: 15px;
}

.pt-20{
    padding-top: 20px;
}

.pt-30{
    padding-top: 30px;
}

.pb-2{
    padding-bottom: 2px;
}

.pb-4{
    padding-bottom: 4px;
}

.pb-5{
    padding-bottom: 5px;
}

.pb-8{
    padding-bottom: 8px;
}

.pb-10{
    padding-bottom: 10px;
}

.pb-15{
    padding-bottom: 15px;
}

.pb-20{
    padding-bottom: 20px;
}

.pb-30{
    padding-bottom: 30px;
}

.pl-2{
    padding-left: 2px;
}

.pl-5{
    padding-left: 5px;
}

.pl-10{
    padding-left: 10px;
}

.pl-15{
    padding-left: 15px;
}

.pl-20{
    padding-left: 20px;
}

.pl-30{
    padding-left: 30px;
}

.pl-35{
    padding-left: 35px;
}

.pr-5{
    padding-right: 5px;
}

.pr-10{
    padding-right: 10px;
}

.pr-15{
    padding-right: 15px;
}

.pr-20{
    padding-right: 20px;
}

.pr-30{
    padding-right: 30px;
}

.pside-5{
    padding-left: 5px;
    padding-right: 5px;
}

.pside-10{
    padding-left: 10px;
    padding-right: 10px;
}

.pside-15{
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.pside-20{
    padding-left: 20px;
    padding-right: 20px;
}

.pside-25{
    padding-left: 25px;
    padding-right: 25px;
}

.pside-15-40{
    padding-left: 15px;
    padding-right: 30px;
}

.p20-section-padding{
     padding: 20px 25px 0px 25px;
}

.p20-20-section-padding{
     padding: 20px 20px 0px 20px;
}

.p20-15-section-padding{
     padding: 20px 15px 0px 15px;
}

.p15-15-section-padding{
     padding: 15px 15px 0px 15px;
}

.p10-10-section-padding{
     padding: 10px 10px 0px 10px;
}

.p10-section-padding{
     padding: 10px 25px 0px 25px;
}

.pos-rel{
    position: relative;
}

.pos-ab{
    position: absolute;
}

/*Height & Width Style*/

.hi-50{
    height: 50px;
}


.shadow-style-v1{
    box-shadow: 0px 0px 5px #0000001A;
}

.tb-round-corner{
    border-collapse: collapse;
    overflow: hidden;
}

.tb-1010 td,.tb-1010 th{
    padding: 10px;
}

/* CHG - Font-color */
.text-dark-grey {
    color: #4a4a4a !important;
}

.section-divider{
    background: #F3F6F9;
    height: 10px;
}


.blue-btn-long{
    width: 100%;
    height: 50px;
    display: block;
    /*margin: 10px auto 0 auto;*/
    border-radius: 0px;
    background: #4AB8F7;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 50px;
    cursor: pointer;

    /* CHG add border none - submit input can clear the black border */
    /* CHG test if no need this.*/
    /* border: none; */
}

.submit-button{
    border-radius: 8px;
    height: 50px;
    width: 100%;
    display: block;
}

.blue-5radius-button{
    background: #2680EB 0% 0% no-repeat padding-box;
    border-radius: 5px;
    width: 100%;
    color: #fff; 
    height: 40px;
    line-height: 25px;
}

.blue-5radius-button:focus,.blue-5radius-button:active,.blue-5radius-button:hover{
     color: #fff !important;
}

.rad-btn-col a{
    border-radius: 10px;
    color: #fff;
    height: 50px;
    line-height: 50px;
    display: block;
    text-align: center;
    font-size: 14px;
}

.rad-btn-col a.blue-btn{
    background-color: #4AB8F7;
    color: #fff;
}

.rad-btn-col a.white-btn{
    background-color: #f2f2f2;
    color: #707070;
}


.rad-btn-col a.fwbutton{
    width: 100%;
}

.rad-btn-col a.hwbutton{
    width: 48%;
}

.flex-2col-txt13-sidetoside li{
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
    font-size: 13px;
    color: #afafaf;
}

.flex-2col-sidetoside li{
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
    font-size: 14px;
    color: #808080;
    text-align: left;
    align-items:  center;
}

.flex-2col-sidetoside li div:nth-child(2){
    color: #606060;
    font-weight: 500;
    text-align: right;
}

.flex-2col-sidetoside2 li{
    display: flex;
    justify-content: space-between;
    margin: 20px 0px;
    font-size: 16px;
    color: #808080;
    text-align: left;
    align-items:  center;
}

.flex-2col-sidetoside2 li div:nth-child(2){
    color: #606060;
    font-weight: 500;
    text-align: right;
}

/*-------- Flex Style Start--------*/

.flex2center{
   display: flex;
    justify-content: center; 
}

.flex2left{
    display: flex;
    justify-content: flex-start;
}

.flex2right{
    display: flex;
    justify-content: flex-end;
}

.flex-sb{
    display: flex;
    justify-content: space-between;
}

.flex-ar{
    display: flex;
    justify-content: space-around;
}

.al-itm-center{
    align-items: center;
}

.al-itm-top{
    align-items: flex-start;
}

.al-itm-bottom{
    align-items: flex-end;
}

.al-itm-stretch{
    align-items: stretch;
}


/*-------- Flex Style End --------*/

.font-force-red{
    color: #ff6d6b !important;
}

.font-force-red-v2{
    color: #EF6165 !important;
}

.font-force-red-v3{
    color: #D84C4C !important;
}

.font-force-darkred{
    color:#e54646 !important;
}

.font-force-darkred-v2{
    color:#B9332B !important;
}

.font-force-maroon{
    color:#7B1C1D !important;
}

.font-force-green{
    color: #28B469 !important;
}

.font-force-green-v2{
    color: #76b13e !important;
}

.font-force-green-v3{
    color: #10a298 !important;
}

.font-force-green-v4{
    color: #56B429 !important;
}

.font-force-green-v5{
    color: #4BAE4F !important;
}

.font-force-green-v6{
    color: #009185 !important;
}

.font-force-green-v7{
    color: #65C989 !important;
}

.font-force-green-v8{
    color: #348F42 !important;
}

.font-force-green-v9{
    color: #50CA80 !important;
}

.font-force-green-v10{
    color: #21A946 !important;
}

.font-force-green-v11{
    color: #52A383 !important;
}

.font-force-green-v12{
    color: #17B4AE !important;
}

.font-force-green-v13{
    color: #19b48b !important;
}

.font-force-darkgreen{
    color: #0B4956 !important;
}

.font-force-darkgreen-v2{
    color: #254541 !important;
}

.font-force-darkgreen-v3{
    color: #074D52 !important;
}

.font-force-darkgreen-v4{
    color: #254541 !important;
}

.font-force-darkgreen-v5{
    color: #364E3C !important;
}

.font-force-darkgreen-v6{
    color: #476553 !important;
}

.font-force-light-green{
    color: #1BD741 !important;
}

.font-force-lightblue{
     color: #86b8e9 !important;
}

.font-force-lightblue-v2{
     color: #08B7FC !important;
}

.font-force-lightblue-v3{
     color: #91B7E5 !important;
}

.font-force-lightblue-v4{
     color: #11A1ED !important;
}


.font-force-blue{
     color: #1D9AFA !important;
}

.font-force-blue-v2{
     color: #28A9E2 !important;
}

.font-force-blue-v3{
     color: #1856C4 !important;
}

.font-force-blue-v4{
     color: #1293CC !important;
}

.font-force-blue-v5{
    color: #6afdff !important;
}

.font-force-navyblue{
     color: #0B4370 !important;
}

.font-force-dark-navyblue{
     color: #547DA0 !important;
}

.font-force-navyblue-v2{
     color: #0D4A71 !important;
}

.font-force-dark-navyblue-v2{
     color: #0B4370 !important;
}

.font-force-dark-navyblue-v3{
     color: #144189 !important;
}

.font-force-dark-navyblue-v4{
     color: #253945 !important;
}

.font-force-purple{
    color: #35115d;
}

.font-force-black{
     color: #000 !important;
}

.font-force-white{
     color: #fff !important;
}

.font-force-lightgrey{
     color: #ABABAB !important;
}

.font-force-lightgrey-v2{
     color: #CECECE !important;
}

.font-force-grey{
     color: #cfcfcf !important;
}

.font-force-grey-v2{
     color: #8A8A8A !important;
}

.font-force-grey-v3{
     color: #83918B !important;
}

.font-force-grey-v4{
     color: #83817C !important;
}

.font-force-grey-v5{
     color: #A2A2A2 !important;
}

.font-force-grey-v6{
     color: #747881 !important;
}

.font-force-grey-v7{
     color: #5C616F !important;
}

.font-force-grey-v8{
     color: #909090 !important;
}

.font-force-grey-v9{
     color: #A09A98 !important;
}

.font-force-grey-v10{
     color: #8B8B8B !important;
}

.font-force-grey-v11{
     color: #868686 !important;
}


.font-force-darkgrey{
    color: #606060;
}

.font-force-darkgrey-v2{
    color: #454545;
}

.font-force-darkgrey-v3{
    color: #69737D;
}

.font-force-darkgrey-v4{
    color: #626262;
}

.font-force-darkgrey-v5{
    color: #808080;
}

.font-force-darkgrey-v6{
    color: #444555;
}

.font-force-darkgrey-v7{
    color:#4D4F51;
}

.font-force-darkgrey-v7{
    color:#4a4a4a !important;
}

.font-force-darkgrey-v8{
    color:#4B4B4B !important;
}

.font-force-darkgrey-v9{
    color:#363D4E !important;
}

.font-force-darkgrey-v10{
    color:#0D2748 !important;
}

.font-force-teal{
    color: #25F2A0 !important; 
}

.font-force-yellow{
    color: #FFDA2D !important;
}

.font-force-yellow-v2{
    color: #FFCE00 !important; 
}

.font-force-orange{
    color: #eeae3e !important;
}

.font-force-orange-v2{
    color: #d6a53d !important;
}

.font-force-orange-v3{
    color: #D86003 !important;
}

.font-force-orange-v4{
    color: #E37955 !important;
}

.font-force-orange-v5{
    color: #E34F1D !important;
}

.font-force-orange-v6{
    color: #EF713F !important;
}

.font-force-orange-v7{
    color: #EA9713 !important;
}

.font-force-orange-v8{
    color: #E6AF12 !important;
}

.font-force-orange-v9{
    color: #F58400 !important;
}

.font-force-orange-v10{
    color: #F04419!important;
}

.font-force-orange-v11{
    color: #E88564!important;
}

.font-force-brown{
    color: #B2893A;
}

.font-force-brown-v2{
    color: #7C6A29;
}

.font-force-brown-v3{
    color: #AA8B51;
}

.font-force-brown-v4{
    color: #A37752;
}

.font-force-brown-v5{
    color: #817B71;
}

.font-force-dark-brown{
    color: #645F53;
}

.font-force-dark-brown-v2{
    color: #5F4600;
}

.lh-ini{
    line-height: initial !important;
}

.lh-16{
    line-height: 16px !important;
}

.lh-20{
    line-height: 20px !important;
}

.lh-22{
    line-height: 22px !important;
}

.lh-18{
    line-height: 18px !important;
}

.bg-force-white{
    background-color: #fff !important;
}

.bg-force-red{
    background-color: #ff6d6b !important;
}

.bg-force-grey{
    background-color: #828282 !important;
}

.bg-force-lightgrey{
    background-color: #ededed !important;
}

.absolute-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
}

/*-------- Font Style --------*/

.text-capital{
    text-transform: uppercase;
}

.text-first-capital{
    text-transform: capitalize;
}

.ft-36{
    font-size: 36px !important;
}

.ft-32{
    font-size: 32px !important;
}

.ft-28{
    font-size: 28px !important;
}

.ft-24{
    font-size: 24px !important;
}

.ft-22{
    font-size: 22px !important;
}

.ft-20{
    font-size: 20px !important;
}

.ft-18{
    font-size: 18px !important;
}

.ft-16{
    font-size: 16px !important;
}

.ft-15{
    font-size: 15px !important;
}


.ft-14{
    font-size: 14px !important;
}

.ft-13{
    font-size: 13px !important;
}

.ft-12{
    font-size: 12px !important;
}

.ft-11{
    font-size: 11px !important;
}
    
.ft-10{
    font-size: 10px !important;
}

.ft-9{
    font-size: 9px;
}

.ft-8{
    font-size: 8px;
}

.fw-100{
    font-weight:100 !important;
}

.fw-300{
    font-weight:300 !important;
}

.fw-400{
    font-weight:400 !important;
}

.fw-500{
    font-weight:500 !important;
}

.fw-700{
    font-weight:700 !important;
}

.tx-center{
 text-align: center !important;
}

.tx-left{
 text-align: left !important;
}

.tx-right{
 text-align: right !important;
}

.float-right{
 float: right !important;
}

.d-inline{
    display: inline-block;
}

.d-block{
    display: block;
}

.d-grid{
    display: grid;
}

.opac-50{
    opacity: 0.5;
}

.opac-75{
    opacity: 0.75;
}


.max-h10{
    max-height: 10px;
}

.col-2-eq{
    width: 50%;
}

.col-child-eq-2 > div,.col-child-eq-2 > td{
    width: 50%;
}

.col-3-eq{
    width: 33.3333%;
}

.col-child-eq-3 > div,.col-child-eq-3 > td{
    width: 33.3333%;
}

.col-4-eq{
    width: 25%;
}

.col-child-eq-4 > div,.col-child-eq-4 > td{
    width: 25%;
}

.radio-red{
    align-items: center;
    flex-wrap: wrap;
}

.radio-red li {
    text-align: left;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.radio-red li span {
    height: 24px;
    width: 24px;
    margin-right: 15px;
    border: 1px solid #EE2121;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    color: transparent;
    border-radius: 50%;
}

.radio-red li input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 1;
}

.radio-red li p {
    margin: 0;
    font-size: 12px;
    color: #4A4A4A;
    font-weight: 400;
}

.radio-red li.active span {
    background: #E94C4B;
    color: #fff;
}


.app-wrapper-area {
    /* Prev width was in XD max-width 600 */
    max-width: 100%;
    margin: 0 auto;
}

.hidediv{
    display: none;
}

.w-20{
    width: 20%;
}

.w-25{
    width: 25%;
}

.w-30{
    width: 30%;
}

.w-35{
    width: 35%;
}

.w-40{
    width: 40%;
}

.w-50{
    width: 50%;
}

.w-60{
    width: 60%;
}

.w-65{
    width: 65%;
}

.w-70{
    width: 70%;
}

.w-100{
    width: 100%;
}

/*--===== start app header and footer area =====*/


.app-header-blk {
    background: #254541;
    padding: 0 50px;
    position: fixed;
    width: 100%;
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center; 
    justify-content: center;
    z-index: 1;
}

.left-navigator {
    position: absolute;
    left: 20px;
    text-align: center;
    line-height: 30px;
    font-size: 30px;
    color: #ffffff;
    border-radius: 50%;
    display: block;
    top: 50%;
    transform: translateY(-50%);
}

.app-header-blk h2 {
    /* CHG - change 18px-16px , smaller as per request by calvin. */
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}

.app-wrapper-area {
    position: relative;
}

.app-footer-blk {
    padding: 8px 0;   
    background: #F6F4F1;
}

.app-footer-blk ul {
    display: flex;
    justify-content: space-between;
    align-items: center;   
    width: 80%;

}

.app-footer-blk li{
    min-width: 20%;
}

.app-footer-blk li a {
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.app-footer-blk li a span{
    color: #4A4A4A;
    font-size: 10px;
}

.app-footer-blk img {
    display: block;
    text-align: center;
}

.app-footer-blk li img.active {
    display: none;
}

.app-footer-blk li.active img.active {
    display: block !important;
}

.app-footer-blk li.active img.inactive {
    display: none !important;
}

.app-footer-blk {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
}

.app-footer-blk a {
    font-size: 10px;
    color: #4A4A4A;
}

.app-footer-blk a img {
    margin-bottom: 6px;
    width: 22px;
}

.shopping-cart {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 0 10px 0 0;
    font-style: normal;
    font-weight: 500;
    color: #ffffff;
}

.cnt {
    position: absolute;
    top: 2px;
    left: 17px;
    height: 14px;
    width: 22px;
    line-height: 15px;
    color: #fff;
    font-weight: 400;
    border-radius: 10px;
    font-size: 9px;
}

.app-footer-blk li:last-child {
   
}

.app-footer-blk {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

.app-wrapper-area {
    height: 100%;
}

.app-body-blk {
    height: 100%;
    overflow-y: scroll;
    position: relative;
    padding-top: 60px;
    z-index: 0;
    margin-bottom: 55px;
}

.app-body-blk.login-pg {
    padding-top: 0px;
    min-height: 90vh;
    margin-bottom: 0px;
}


/*--===== completed app header and footer area =====*/

/*--===== start cart area =====*/

.cart-itm {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #D4D4D4;
    background: #fff;
}

.crt img {
    flex: 0 0 90px;
    margin-right: 5px;
    max-width: 90px;
    display: block;
    border: 1px solid #F0EEE6;
}

.crt-content {
    display: flex;
    flex: 1;
}

.crt-action {
    text-align: right;
}

.crt-meta-txt h3 {
    font-size: 12px;
    color: #4A4A4A;
    font-weight: 500;
    margin-bottom: 15px;
}

.crt-meta-txt h4 {
    margin: 0;
    line-height: 1.5;
    font-size: 10px;
    text-transform: capitalize;
    color: #7e7e7e;
    margin-bottom: 10px;
}

.crt-meta-txt h4 p {
    margin: 0;
    line-height: 1;
    font-size: 11px;
    text-transform: capitalize;
    color: #7e7e7e;
    color: #4A4A4A;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 0;
}

.crt-meta-txt h4 p span {
    color: #7e7e7e;
}

.crt-action h3 {
    font-size: 11px;
    border: 1px solid #D0D0D0;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 30px;
    margin-bottom: 15px;
}

.crt-meta-txt {
    flex: 1;
}

.txt-red {
    color: #E54646 !important;
}

.crt-action h3 span {
    font-weight: 500;
}

.crt-action h4 {
    font-size: 12px;
    color: #4A4A4A;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

.crt-action h4 span {
    display: block;
    color: #ADADAD;
}

.crt-action h2 {
    font-size: 14px;
    font-weight: 500;
    color: #EF713F;
    font-weight: 500;
}

.crt-calc-blk {
    background: #FDFBF2;
    padding: 15px;
}

.crt-calc-blk ul {
    max-width: 350px;
    margin-left: auto;
}

.crt-calc-blk li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.crt-calc-blk li p {
    flex: 0 0;
}

.crt-calc-blk li h4 {
    font-size: 15px;
    font-weight: 500;
    flex: 1;
    text-align: right;
    margin: 0;
}

.crt-calc-blk {
    border-bottom: 1px solid #D4D4D4;
}

.crt-calc-blk li p {
    margin: 0;
    flex: 0 0 150px;
    text-align: right;
    font-size: 15px;
    line-height: initial;
}

/*.crt-calc-blk li:last-child h4 {
    font-size: 14px;
    color: #E54646;
}
*/
.crt-calc-blk li:last-child {
    margin: 0;
}

/*--===== completed cart area =====*/
/*--===== start info area =====*/

.info-txt-blk {
    padding: 25px;
    border-bottom: 1px solid #D4D4D4;
}

.info-txt-blk h3 {
    font-size: 16px;
    color: #E54646;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    margin-bottom: 25px;
}

.info-txt h4 {
    margin: 0;
    font-size: 14px;
    color: #707070;
    margin-top: 10px;
    font-weight: 400;
}

.info-txt h5 {
    font-size: 14px;
    color: #3B3B3B;
    font-weight: 500;
    margin: 0;
    line-height:1.8;
}

.info-txt {
    margin-bottom: 10px;
}

.info-txt:last-child {
    margin: 0;
}

/* INFO TEXT Version 2 */

.info-txt-blk-v2{
    padding: 25px 25px 0 20px;
}

.info-txt-blk-v2 h3 {
    font-size: 16px;
    color: #E54646;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 20px;
}

.info-txt-v2 h4 {
    margin: 0;
    font-size: 16px;
    color: #8A8A8A;
    font-weight: 400;
    line-height:1.8;

}

.info-txt-v2 h5 {
    font-size: 16px;
    color: #000000;
    font-weight: 400;
    margin: 0;
    line-height:1.8;
    display: inline-block;
}

.info-txt-v2 {
    margin-bottom: 10px;
}

.info-txt-v2:last-child {
    margin: 0;
}

.info-txt-v2 p.txt-red{
    line-height: 10px;
}



/*--===== completed info area =====*/
/*--===== start card area =====*/

.crd-actions-blk {
    padding: 20px;
    /*border-bottom: 1px solid #D4D4D4;*/
}

.crd-actions-blk .blk-title h4 {
    margin-bottom: 5px;
}

.crd-actions-blk .blk-title {
    margin-bottom: 20px;
}

.blk-title h4 {
    font-size: 18px;
    color: #464D49;
    font-weight: 500;
    line-height: 1;
    margin: 0;
}

.blk-title p {
    margin: 0;
    font-size: 16px;
    color: #8A8A8A;
    margin-bottom: 10px;
    font-weight: 400;
}

.crd-actions {
    border-radius: 6px;
    background: #F6F4F1;
    border: 1px solid #E6E6E6;
    padding: 20px;
    position: relative;
    margin-bottom: 20px;
}

.crd-actions:last-child {
    margin-bottom: 10px;
}

.crd-actions h4 {
    margin: 0;
    font-size: 15px;
    color: #000000;
    font-weight: 700;
    margin-bottom: 15px;
}

.crd-action-title input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.crd-action-txt h4 {
    font-size: 15px;
    font-weight: 500;
    color: #4A4A4A;
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.crd-action-content .info-txt h4,
.crd-action-content .info-txt h5 {
    font-size: 14px;
    display: flex;
    align-items: center;
}

.crd-action-content .info-txt h5 img{
    margin: 0 5px;
    width: 16px;
    height: 16px;
}

.crd-action-txt h4 span {
    display: inline-block;
    height: 24px;
    width: 24px;
    min-width: 24px;
/*    border: 1px solid #FF6D6B;*/
    border-radius:5px;
    cursor: pointer;
    margin-right: 10px;
    line-height: 23px;
    font-size: 10px;
    text-align: center;
    background: #E2E2E2;
}

.crd-action-txt {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.crd-action-txt img{
    height: 30px;
}

.crd-action.active h4 span {
    background: #EF713F;
    color: #fff;
}

.crd-action-title h4 span i {
/*    color: #ffff;*/
    /* CHG - Fixed order payment -> add line-height */
    line-height: 20px;
    color: #E2E2E2;
}

.crd-action.active h4 span i{
    color: #fff;
}

.crd-action-content {
    background: #FFFFFF;
    padding: 15px;
    border-radius: 7px;
    margin-left: 30px;
    border: 1px solid #E6E6E6;
}

.crd-action-content h4 {
    color: #8A8A8A;
    font-weight: 500;
    margin: 0;
    line-height: 1;
}

.crd-action-content p {
    margin: 0;
    line-height: 1.4;
}

.crd-action-content img {
    height: 32px;
    width: 32px;
    display: inline;
    float: left;
    margin: 5px 10px 0 5px;
}

.crd-action-txt img {
/*    flex: 0 0 100px;*/
}

.crd-action-title {
    padding: 10px 0px;
}

/*--===== completed card area =====*/
/*--===== start frm area =====*/

.btm-frm-inpt {
    margin-bottom: 20px;
}

/* Warning Text Box */

.wrn-txt {
    background: #F8E8E8;
    padding: 15px;
    border-radius: 7px;
    border: 1px solid #FFA19F;
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.wrn-txt p {
    margin: 0;
    line-height: 1.4;
    font-size: 11px;
    color: #8A8A8A;
    font-weight: 400;
    margin-left: 15px;
}

.wrn-txt img {
    flex: 0 0 30px;
}

/* Warning Text Box V2 */

.wrn-txt-2 {
    background: #F8E8E8;
    padding: 15px;
    border-radius: 7px;
    border: 1px solid #FFA19F;
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.wrn-txt-2 p {
    margin: 0;
    line-height: 1.4;
    font-size: 11px;
    color: #8A8A8A;
    font-weight: 400;
    margin-left: 15px;
}

.wrn-txt-2 h4 {
    margin: 0;
    line-height: 1.4;
    font-size: 15px;
    color: #626262;
    font-weight: 400;
    margin-left: 10px;
}

.wrn-txt-2 img {
    flex: 0 0 20px;
    margin-left: 14px;
}

.btm-frm-inpt input {
    width: 100%;
    resize: none;
    height: 50px;
    border-radius: 7px;
    border: 1px solid #DADDE0;
    padding: 15px;
    font-size: 16px;
    color: #000;
    font-weight: 400;
}
.btm-frm-inpt input::-moz-placeholder {
    color: #cecdd2;
    font-size: 16px;    
    font-weight: 400;
}

.btm-frm-inpt input::placeholder {
    color: #cecdd2;
    font-size: 16px;
    font-weight: 400;
}


.btm-frm-inpt span {
    font-size: 11px;
    margin-top: 10px;
    display: block;
}
.btm-frm-inpt span.t-right {
    text-align: right;
}
.btm-trms-checkmrk {
    padding: 25px;
    background: #F8F8F8;
    border-top: 1px solid #D4D4D4;
    display: flex;
    align-items: center;
}

.btm-trms-checkmrk p {
    margin: 0;
    line-height: 1.4;
    font-size: 12px;

    color: #8A8A8A;
    font-weight: 400;
}

.btm-trms-checkmrk p a {
    color: #4AB8F7;
}

.btm-trms-checkmrk span {
    display: inline-block;
    height: 24px;
    width: 24px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 15px;
    line-height: 30px;
    font-size: 10px;
    text-align: center;
    flex: 0 0 30px;
    color: #EBECEC;
}

.btm-trms-checkmrk.active span {
    color: #fff;
    background: #E50019;
}

.btm-btn-actions {
    background: #fff;
    text-align: center;
}


.btm-btn-actions input[type=submit], .btm-btn-actions button, .btm-btn-actions a {
    background: #fff;
    color: #28a9e2;
    font-size: 18px;
    font-weight: 500;
    height: 50px;
    border-radius: 0px;
    width: 100%;
    display: inline-block;
    line-height: 50px;
    margin: 0px;
}


.btm-btn-actions a:nth-child(1) {
    background: #28a9e2;
    border-bottom: 1px solid #D9D9D9;
    color: #fff;
}


.btm-btn-actions-2 {
    background: #fff;
    padding: 15px 0px 0px 0px;
    text-align: center;
}

.btm-btn-actions-2 a {
    background: #fff;
    color: #28a9e2;
    font-size: 16px;
    font-weight: 500;
    height: 50px;
    border-radius: 5px;
    width: 100%;
    display: inline-block;
    line-height: 50px;
    margin: 0px;
}

.btm-btn-actions-2 a:nth-child(1) {
    background: #28a9e2;
    border-bottom: 1px solid #D9D9D9;
    color: #fff;
}

.btm-trms-checkmrk input {
    width: 100%;
    opacity: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
}

.btm-trms-checkmrk {
    position: relative;
}

.btm-frm-blk {
    padding: 20px;
}

.btm-frm-inpt h4 {
    font-size: 16px;
    color: #8a8a8a;
    margin-bottom: 8px;
    font-weight: 400;
}

.btm-frm-blk .blk-title h4 {
    margin: 0;
    margin-bottom: 10px;
}

/* .btm-frm-blk input {
    ! width: 100%;
} */

.btm-frm-inpt textarea {
    width: 100%;
    resize: none;
    height: 130px;
    border-radius: 7px;
    border: 1px solid #dadde0;
    padding: 15px;
    font-size: 16px;
    color: #000000;
    font-weight: 400;
    font-family: 'Roboto','Arial';
}

.crd-action-title {
    position: relative;
}

.crd-action-content {
    display: none;
}

.crd-action.active .crd-action-content {
    display: block;
}

/*--===== completed frm area =====*/
/*--===== start login area =====*/

.login-blk img {
    width: 100%;
    padding: 15px;

}

.login-blk h4 {
    font-size: 16px;
    color: #8C8C8C;
    font-weight: 500;
    text-transform: unset;
    text-align: center;
}

.login-blk h4 span {
    color: #E54646;
}

.auth-login-itm {
    margin: 25px;
    position: relative;
    height: 70px;
}

.auth-login-itm input {
    width: 100%;
    height: 70px;
    border: none;
    background: none;
    border-bottom: 1px solid #b8b8b8;
    font-size: 18px;
    color: #8A8A8A;
    font-weight: 300;
    padding: 10px 15px;
}

.auth-login-itm input::placeholder {
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #8A8A8A;
}

.auth-login-itm input:focus {
    border-bottom: 1px solid #b8b8b8!important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;  
    outline: none !important;
    box-shadow: none !important;
}

.auth-login-itm img {
    position: absolute;
    left: 18px;
    height: auto;
    z-index: 9999;
    width: auto;
    padding: 0;
    top: 50%;
    transform: translateY(-50%);
}

.auth-login-itm span {
    font-size: 10px;
    color: #8A8A8A;
    font-weight: 500;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.auth-login-itm button {
    display: block;
    height: 50px;
    display: block;
    text-align: center;
    font-size: 16px;
    color: #8A8A8A;
    font-weight: 500;
    width: 100%;
    border: none;
    border-radius: 5px;
    background: rgb(181, 13, 13);
    background: linear-gradient(319deg, rgba(181, 13, 13, 1) 10%, rgba(245, 36, 36, 0.9948179955575981) 94%);
    color: #fff;
    text-transform: capitalize;
    /*max-width: 375px;*/
    margin-right: auto !important;
    margin-left: auto !important;
}

.auth-login-itm a {
    font-size: 12px;
    color: #858585;
    font-weight: 400;
    text-align: center;
    margin-top: 25px;
    display: block;
    color: #2FC9F8;
}


.auth-login-itm {
    text-align: center;
}

.login-blk {
    padding-bottom: 10px;
    min-height: 97vh;
}



.btm-frm-inpt textarea::placeholder,
.btm-frm-inpt input::placeholder,
.auth-login-itm input::placeholder {
    font-weight: 400;
    font-family: Roboto;
    font-size: 16px;
    color: #8A8A8A;
}

/*--===== completed login area =====*/


/*--===== start shipping info area =====*/

.sip-info-navigator ul {
    background: #4ab8f7;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sip-info-navigator ul li {
    flex: 0 0 50%;
    text-align: center;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sip-info-navigator ul li.active {
    border-bottom: 2px solid #dadde0;
    background: #f7feff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    color: #0e89bf;
}

.sip-content-bx {
    padding: 20px;
    border-bottom: 10px solid #F0F3F5;
}

.sip-content-bx-wl {
    padding: 20px;
}

/*--===== NEW PATTERN start shipping info area =====*/

.sip-info-navigator-v2 {
    padding: 20px;
}

.sip-info-navigator-v2 ul {
    background: #fff;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.sip-info-navigator-v2 ul li {
    flex: 0 0 47%;
    text-align: center;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    /*height: 100%;*/
    display: flex;
    align-items: center;
    justify-content: left;
   
}

.sip-info-navigator-v2 ul li .icon{
    padding: 10px;
    background: #D1D3D4;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid #D3D3D3;
    color: #fff;
    font-size: 14px;
    height: 38px;
}

.sip-info-navigator-v2 ul li .s-label{
   color: #909090;
   background: #fff;
   text-align: center;
   width: 100%;
   border: 1px solid #D3D3D3;
   padding: 10px;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   font-weight: 400;
   font-size: 14px;
   height: 38px;
}

.sip-info-navigator-v2 ul li.active .icon{
    background: #17648D;
    border: 1px solid #17648D;

}

.sip-info-navigator-v2 ul li.active .s-label{
    background: #209FE5;
    border: 1px solid #209FE5;
    color: #fff;
}


.sip-info-navigator-v2 ul li i{
    opacity: 0;

}

.sip-info-navigator-v2 ul li.active i{
    opacity: 1;
}


.ct-checkbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
/*      */
    padding: 15px 15px 0px 15px;
    border-radius: 5px;
}

.ct-checkbox li {
    flex: 0 0 50%;
    text-align: left;
    position: relative;
    display: flex;
    align-items: center;
    width: 50%;
    margin-bottom: 15px;
}

.ct-checkbox li span {
    height: 24px;
    width: 24px;
    min-width: 24px;
    margin-right: 5px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    color: transparent;
    border-radius: 3px;
    background-color: #E2E2E2;
    justify-content: center;
    align-items: center;
    display: flex;
}

.ct-checkbox li input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 1;
}

.ct-checkbox li p {
    margin: 0;
    font-size: 13px;
    color: #4A4A4A;
    font-weight: 400;
}


.sip-inpt-blk {
    padding: 30px 20px 10px 20px; 
    border-bottom: 10px solid #F0F3F5;
}

.sip-inpt-blk2 {
    padding: 30px 20px 10px 20px;
}

.input-itm label {
    display: block;
    font-size: 16px;
    color: #8a8a8a;
    font-weight: 400;
    margin-bottom: 10px;
}

.input-itm input {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #DADDE0;
    font-size: 16px;
    /*color: #d1d1d1;*/
    font-weight: 400;
    padding: 0 20px;
}

.input-itm input::-webkit-input-placeholder {
    color: #cecdd2;
    font-size: 16px;
    font-weight: 400;
}
.input-itm input:-ms-input-placeholder{
    color: #cecdd2;
    font-size: 16px;    
    font-weight: 400;
}
.input-itm input::placeholder {
    color: #cecdd2;
    font-size: 16px;    
    font-weight: 400;
}

.input-itm {
    margin-bottom: 25px;
}

.txt-itm p {
    font-size: 16px;
    color: #8a8a8a;
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
    margin-bottom: 5px;
}

.txt-itm h4 {
text-transform: uppercase;
    font-size: 18px;
    color: #4D4F51;
    font-weight: 400;
    background-color: #F3F6F9;
    border-radius: 8px;
    height: 50px;
    padding: 15px;
}

/*New inner placeholder for edit profile*/

.input-itm2 label {
    display: block;
    font-size: 16px;
    color: #8a8a8a;
    font-weight: 400;
    margin-bottom: 10px;
}

.input-itm2 input {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #DADDE0;
    font-size: 16px;
    /*color: #d1d1d1;*/
    font-weight: 400;
    padding: 0 20px;
}

.input-itm2 input::-webkit-input-placeholder {
    color: #cecdd2;
    font-size: 16px;
    font-weight: 400;
}
.input-itm2 input:-ms-input-placeholder{
    color: #cecdd2;
    font-size: 16px;    
    font-weight: 400;
}
.input-itm2 input::placeholder {
    color: #cecdd2;
    font-size: 16px;    
    font-weight: 400;
}

.input-itm2 {
    margin-bottom: 25px;
}

.txt-itm2 p {
    font-size: 16px;
    color: #8a8a8a;
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
    margin-bottom: 5px;
}

.txt-itm2 h4 {
text-transform: uppercase;
    font-size: 16px;
    color: #4D4F51;
    font-weight: 400;
    background-color: #F3F6F9;
    border-radius: 8px;
    height: 50px;
    padding: 15px;
}



.select-itm .nice-select {
    height: 60px;
    width: 100%;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    border: 1px solid #B8B8B8;
    font-size: 14px;
    color: #707070;
    font-weight: 400;
}

.select-itm .nice-select .current p {
    display: block;
    margin: 0;
    line-height: 1.5;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
}

.select-itm .nice-select p {
    display: block;
    margin: 0;
    line-height: 1.5;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
}

.select-itm label {
    display: block;
    font-size: 14px;
    color: #BCBBBC;
    font-weight: 400;
    margin-bottom: 5px;
}

.select-itm .ico-arrow-down {
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px;
}

.select-itm .rolldate-select{
    color: #000;
    font-weight: 500;
  
}

.select-itm p {
    font-size: 14px;
    color: #707070 !important;
    font-weight: 400 !important;
    position: absolute;
    top: 0;
}

.txt-itm {
    margin-bottom: 15px;
}

.select-itm .nice-select .current {
    line-height: 1;
}

.blk-title {
    margin-bottom: 20px;
}

.red-timer-alert{
    display: none;
}

/*--===== completed shipping info area =====*/

/*--===== start checkbox area =====*/
.inpt-checkbx-itm-container {
    display: block;
    position: relative;
    padding-left: 35px;
    padding-top: 4px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.inpt-checkbx-itm-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


.inpt-checkbx-itm-checkmark {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 25px;
    width: 25px;
    background-color: transparent;
}





.inpt-checkbx-itm-container input:checked~.inpt-checkbx-itm-checkmark {
    background-color: #2196F3;
}


.inpt-checkbx-itm-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


.inpt-checkbx-itm-container input:checked~.inpt-checkbx-itm-checkmark:after {
    display: block;
}

.inpt-checkbx-itm-container .inpt-checkbx-itm-checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.inpt-checkbx-itm-checkmark {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    color: transparent;
    background: #E2E2E2;
}

.inpt-checkbx-itm-container input:checked~.inpt-checkbx-itm-checkmark {
    background: #E2E2E2;
}

/*--===== completed checkbox area =====*/

.inpt-checkbx-itm p {
    margin: 0;
    line-height: 1.4;
    color: #4A4A4A;
    font-weight: 400;
    font-size: 12px;

}

/* .inpt-checkbx-itm {
   margin-bottom: 30px;
} */

.shipping-content,
.self-pick-up-content,
.shipping-content-v2,
.self-pick-up-content-v2,
.fourinone-self-pick-up-content,
.fourinone-shipping-content
 {
    display: none;
}

.shipping-content.active,
.self-pick-up-content.active,
.shipping-content-v2.active,
.self-pick-up-content-v2.active,
.fourinone-self-pick-up-content.active,
.fourinone-shipping-content.active {
    display: block;
}

.fixed-btm {
    /* position: absolute; */
    left: 0;
    bottom: 0;
    width: 100%;
}

.ct-checkbox li.active span {
    background: #E37955;
    color: #fff;
}

/*--===== start mycart area =====*/
.right-action {
    position: absolute;
    right: 25px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.my-crt-itm {
    padding: 15px;
    border-bottom: 1px solid #e4e5e5;
    display: flex;
    align-items: flex-start;
    background: #FFFFFF;
    padding-left: 70px;
    position: relative;
}

.my-crt-itm_v2 {
    padding-left: 15px !important;
/*    padding-right: 55px !important;*/
}

.my-crt-itm img {
    flex: 0 0 80px;
    margin-right: 10px;
    max-width: 80px;
    border: 1px solid #F0EEE6;
}

.my-crt-content {
    flex: 1;
}

.my-crt-content .top-part,.my-crt-content .lower-part{
    display: flex;
    justify-content: space-between;
}

.my-crt-content .top-part{
    width: 100%;
}

.my-crt-content .top-part .left .title{
    font-size: 14px;
    color: #4A4A4A;
    font-weight: 500;
}

.my-crt-content .top-part .left .description{
     font-size: 10px;
      color: #4A4A4A;
}

.my-crt-content .top-part .right{
    text-align: right;
}

.my-crt-content .top-part .right .price{
    color: #EF713F;
    font-size: 16px;
    font-weight: 500;
}

.my-crt-content .top-part .right .bv{
    color: #254541;
    font-size: 14px;
}



.my-crt-content h4 {
    font-size: 14px;
    color: #4A4A4A;
    font-weight: 500;
    line-height: 14px;
}
/*
.my-crt-content h4 {
    font-size: 10px;
    color: #4A4A4A;
    font-weight: 500;
    height: 40px;
    overflow: hidden;
    line-height: 1.2;
}
*/
.my-crt-content h3 {
    font-size: 14px;
    color: #E54646;
    font-weight: 400;
}

.my-crt-itm-counter {
    width: 100px;
    margin-top: 5px;
}

.my-crt-itm-counter .nice-number {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #EFEFEF;
    padding: 0 5px;
    border-radius: 5px;
    height: 30px;
    border: 1px solid #8AD4F6;
}

.my-crt-itm-counter .nice-number button {
    border: none;
    background: none;
    font-size: 17px;
    text-align: center;
    flex: 1;
}

.my-crt-itm-counter .nice-number input {
    flex: 0 0 50px;
    max-width: 50px;
    height: 100%;
    border: none;
    font-size: 12px;
    color: #000;
    font-weight: 400;
}

.my-crt-itm .btn-trash img{
    position: absolute;
    width: 30px;
    left: 20px;
    top: 50px;
}

.my-crt-itm .btn-trash-right img{
    position: absolute;
    width: 25px;
    right: 5px;
    bottom: 18px;
}

.my-crt-itm span {
    position: absolute;
    left: 20px;
    height: 24px;
    width: 24px;
    display: inline-block;
    border: 1px solid #FF7F7D;
    text-align: center;
    font-size: 14px;
    border-radius: 50px;
    line-height: 24px;
    color: transparent;
}

.my-crt-itm.active span {
    background: #ED5352;
    color: #ffff;
    border: 1px solid #ED5352;
}

.my-crt-itm input[type="radio"] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 1;
}

.my-crt-itm-counter {
    position: relative;
    z-index: 2;
}

.mycrt-sub-total {
    padding: 15px;
}

.mycrt-sub-total-v2 {
    padding: 20px;
}

.mycrt-sub-total-v2 .mycrt-summary-v2 {
    box-shadow: 0px 0px 10px rgb(175 175 175 / 58%);
    border-radius: 10px;
}

.mycrt-sub-total-v2 .title{
    background-color: #F8F8F8;
    color: #4A4A4A;
    font-size: 16px;
   
    padding: 20px 20px 15px 20px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    align-items: center;
}

.mycrt-sub-total-v2 .title img{
    margin-right: 5px;
}

.mycrt-sub-total-v2 .total-bv,.mycrt-sub-total-v2 .cart-total{
    display: flex;
    justify-content: space-between;

 }

 .mycrt-sub-total-v2 .cart-total{   
    color: #4A4A4A;
    font-size: 20px;
    font-weight: 500;
    padding: 20px 20px 0 20px;
 }

 .mycrt-sub-total-v2 .total-bv{
    font-size: 14px;
    padding: 5px 20px 30px 20px;
 }

.mycrt-total-amnt h4 {
    font-size: 16px;
    color: #939393;
    font-weight: 500;
}

.mycrt-total-amnt h4 span {
    display: block;
    color: #E54646;
    font-size: 18px;
    font-weight: 400;
}

.mycrt-total-amnt h4 b {
    display: block;
    font-size: 22px;
    color: #E54646;
    font-weight: 500;
}

.chkout-btn {
    display: inline-block;
    width: 100px;
    height: 50px;
    background: linear-gradient(319deg, rgba(181, 13, 13, 1) 10%, rgba(245, 36, 36, 0.9948179955575981) 94%);
    color: #ffff;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
}

.chkout-btn-v2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: #BD1010;
    color: #ffff;
    line-height: 50px;
    text-align: center;
    font-size: 16px;

    border-radius: 5px;
    cursor: pointer;
}

.chkout-btn-v2 img{
    margin-right: 10px;
    height: 18px;

}


.mycrt-sub-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
}

.mycrt-total-amnt {
    display: flex;
    align-items: center;
}


.mycrt-total-amnt .inpt-checkbx-itm {
    margin: 0;
    margin-right: 20px;
}

/*--===== completed mycart area =====*/
/*--===== start product redemption area =====*/

.rmp-tp-blk {
    margin: 15px;

}

.rmp-txt {
    height: 100%;
    background-repeat: no-repeat !important;
    width: 100%;
    background-size: cover !important;
    background-position: center right !important;
    border-radius: 7px;
    padding: 15px 25px;
}

.rmp-txt h4 {
    margin: 0;
    line-height: 1;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: 400;
    margin-bottom: 2px;
}

.rmp-txt h3 {
    font-size: 38px;
    color: #FFFFFF;
    font-weight: 500;
}

.rmp-filter-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    margin-bottom: 25px;
}

.rmp-src-btn {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    background: #BD1010;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #ffff;
    font-size: 9px;
}

.rmp-filter {
    flex: 1;
    margin-right: 10px;
    /*! border: 1px solid #B8B8B8; */
    /*! border-radius: 7px; */
}


.rmp-filter .nice-select {
    width: 100%;
    min-height: 60px;
    line-height: 60px;
    border: 1px solid #B8B8B8;
    border-radius: 7px;
}


.list {
    color: #000;
}

.rmp-filter .current p {
    margin: 0;
    position: absolute;
    top: 7px;
    color: #707070;
    font-weight: 400;
}


.rmp-filter .current {
    color: #000;
    font-size: 10px;
    font-weight: 500;
}

.rmp-src-btn img {
    margin-bottom: 5px;
}

.rmp-src-btn {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    background: #BD1010;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #ffff;
    font-size: 9px;
    display: flex;
    flex-direction: column;
}

.rmp-product {
    padding: 10px;
    display: flex;
    background: #fff;
    align-items: flex-start;
    position: relative;
    border-top: 1px solid #F0EEE6;
}

.rmp-product .left-container {
    
    margin-right: 10px;
}

.rmp-product .product-picture{
    height: 90px;
    border: 1px solid #d4d4d4;
}

.rmp-product .product-picture img{
    width: 90px;
    height: 90px;
}

.rmp-product .left-container .plus-btn {
    cursor: pointer;
    text-align: center;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #479EE3;
    color: #ffffff;
    font-size: 10px;
    padding: 5px;
}

.rmp-product .left-container .plus-btn i{
    color: #ffffff;
    border: 1px solid #ffffff; 
    border-radius: 50%;
    width: 10px;
    height: 10px;
    font-size: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 3px;
}

.rmp-product .right-container {

}

.rmp-product .right-container .product-title{
    font-size: 14px;
    font-weight: 500;
    color: #000000;
}

.rmp-product .right-container .product-description{
    font-size: 10px;
    color: #888D90;
}

.rmp-product .right-container .top-part{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.rmp-product .right-container .top-part .left{
    min-height: 48px;
    width: 65%;
}

.rmp-product .right-container .top-part .left .product-title{
    font-size: 14px;
    font-weight: 500;
    color: #000000;
}

.rmp-product .right-container .top-part .left .product-description{
    font-size: 10px;
    line-height: 14px;
    color: #888D90;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    padding-top: 3px;
}

.rmp-product .right-container .top-part .right{
    text-align: right;
    width: 35%;
}

.rmp-product .right-container .top-part .right .points{
    border: 0.5px solid #479EE3;
    border-radius: 3px;
    font-size: 10px;
    color: #479EE3;
    text-align: right;
    margin-bottom: 5px;
    display: inline-block;
    padding: 2px;
}

.rmp-product .right-container .top-part .right .price{
    color: #EF713F;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
    text-align: right;
}   

.rmp-product .right-container .top-part .right .bv{
    color: #254541;
    font-size: 14px;
    margin-bottom: 5px;
    text-align: right;
}

.rmp-product .right-container .lower-part{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;

}

.rmp-product .right-container .lower-part .rp-bv-container{
    text-align: right;
}

.rmp-product .right-container .lower-part .rp{
    font-size: 14px;
    font-weight: 700;
    color: #000000;
}

.rmp-product .right-container .lower-part .bv{
    font-size: 12px;
    color: #FF8E00;
}

.rmp-product .right-container .lower-part .icon{
    margin-right: 5px;
}

.rmp-product .right-container .lower-part .icon img{
    width: 20px;
    display: flex;
    justify-content: right;
    align-items: center;
}

.rmp-product .right-container .lower-part .ip-cash{
    font-size: 16px;
    font-weight: 500;
    color: #007781;
}

.rmp-product .right-container .lower-part .ip-product{
    font-size: 16px;
    font-weight: 500;
    color: #9B0A43;
}

.rmp-product .right-container .lower-part .ip-token{
    font-size: 16px;
    font-weight: 500;
    color: #814A00;
}

.rmp-product .right-container .add-to-cart-button{
    
    padding: 7px 7px;
    background: #E37955;
    color: #ffffff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.rmp-product .add-to-cart-button img{
    margin-right: 5px;
}

.rmp-product-number .nice-number {
    width: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #EEEEEE;
    border-radius: 5px;
    height: 30px;
    border: 1px solid #479EE3;
}

.rmp-product-number .nice-number button {
    border: none;
    background: none;
    font-size: 17px;
    text-align: center;
    flex: 1;
}

.rmp-product-number .nice-number input {
    background: #fff;
    height: 100%;
    border: none;
    flex: 0 0 35px;
    max-width: 35px;
}


/*.rmp-product {
    padding: 15px;
    border-top: 1px solid #D4D4D4;
    display: flex;
    background: #fff;
    align-items: center;
    position: relative;
}

.rmp-product img {
    flex: 0 0 120px;
    margin-right: 5px;
    max-width: 120px;
    display: block;
}

.rmp-product-txt h4 {
    font-size: 12px;
    color: #4A4A4A;
    font-weight: 400;
    line-height: 1.4;
}

.rmp-product-txt h4 span {
    display: block;
    margin-top: 10px;
}

.rmp-product-txt h3 {
    font-size: 14px;
    color: #E54646;
    font-weight: 500;
    margin: 5px 0;
}


.rmp-product-number .nice-number {
    width: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #EEEEEE;
    border-radius: 5px;
    height: 30px;
    border: 1px solid #AAE0F9;
}

.rmp-product-number .nice-number button {
    border: none;
    background: none;
    font-size: 17px;
    text-align: center;
    flex: 1;
}

.rmp-product-number .nice-number input {
    background: #fff;
    height: 100%;
    border: none;
    flex: 0 0 40px;
    max-width: 40px;
}



.rmp-product {
    position: relative;
}

.add-crt-btn img {
    margin: 0;
    flex: 0 0 20px;
    margin: 0 5px;
    text-align: center;
}

.rmp-product-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
}

.rmp-product-txt {
    flex: 1;
}

.plus-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    cursor: pointer;
    text-align: center;
    margin: 0;
}

.plus-btn img {
    margin: 0;
}

.add-crt-btn {
    width: 110px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    background: #FF7977;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 0 7px;
    font-size: 12px;
}

.plus-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    text-align: center;
    margin: 0;

}

.add-crt-btn img {
    margin: 0px 5px 0px 0px;
}

*/
/*--===== completed product redemption area =====*/
/*--===== start popup area =====*/

.popup,.popup2,.popup3,.myinfo-popup,.mypairing-popup,.currency-popup,.shareqr-popup,.popup-top10-sponsor,.dber-popup,.popup-gold-reward,.popup-dsh-news, 
.unilevel-bonus-statement-sponsor-bonus-level-popup, .popup-reward, .popup-enlarge-ic, .popup-birthday-event, .ninja-elite-popup, .popup-msg-error, 
.leadership-popup, .popup-tnc {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transition: .3s;
}

.popup-crt-added {
    text-align: center;
    height: auto;
    width: 90vw;
    background: #F6F4F1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-radius: 10px;
    padding: 25px;

}

.popup-crt-added img {
    height: 150px;
    margin-top: -100px;
    padding-bottom: 8px;
}

.popup-crt-added h4 {
    font-size: 16px;
    color: #254541;
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
}

.popup.active {
    z-index: 99999;
    visibility: visible;
    opacity: 1;
    top: 50%;
    bottom: auto;
    transition: .3s;
}

.overlay.active-drk.active, .overlayProduct.active-drk.active, .overlayServletError.active-drk.active, .overlayTnc.active-drk.active {
    background: rgba(0, 0, 0, 0.5);
}

.overlay.active, .overlayProduct.active, .overlayServletError.active, .overlayTnc.active {
    opacity: 1;
    visibility: visible;
    z-index: 99999;
}

.overlay, .overlayProduct, .overlayServletError, .overlayTnc {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transition: .3s;
}


.popup.activee,.popup2.activee.activee,.popup3.activee,.myinfo-popup.activee,.mypairing-popup.activee,.currency-popup.activee,.shareqr-popup.activee,.popup-top10-sponsor.activee,
.dber-popup.activee,.popup-gold-reward.activee,.popup-dsh-news.activee,.unilevel-bonus-statement-sponsor-bonus-level-popup.activee,.popup-reward.activee,.popup-enlarge-ic.activee, 
.popup-birthday-event.activee, .ninja-elite-popup.activee, .popup-msg-error.activee, .leadership-popup.activee, .popup-tnc.activee
{
    z-index: 99999;
    visibility: visible;
    opacity: 1;
    top: 50%;
    bottom: auto;
    transition: .3s;
    width: 90vw;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transition: .3s;
}

.overlay.activee, .overlayProduct.activee, .overlayServletError.activee, .overlayTnc.activee {
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
    visibility: visible;
    z-index: 99999;

}

/*--===== completed popup area =====*/

/*--===== start product detail popup      area =====*/
.rmp-detail-product-txt:last-child {
    border: none;
    padding-bottom: 0;

}

.rmp-product-details-popup {
    margin-top: 0px;
    width: 90vw;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    overflow-y: scroll;
}

.rmp-product-img img {
    width: 100%;
    border: 1px solid #C7C7C7;
}

.rmp-product-details-popup h2 {
    font-size: 18px;
    color: #2A2A2A;
    font-weight: 500;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
}

.rmp-product-details-popup ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 13px;
}

.rmp-product-details-popup li p {
    font-size: 12px;
    color: #8B8B8B;
    font-weight: 500;
    margin: 0;
    line-height: 1;
    flex: 0 0 75px;
}

.rmp-product-details-popup li h4 {
    margin: 0;
    flex: 2;
    text-align: right;
    font-size: 22px;
    color: #8B8B8B;
    font-weight: 500;
}

.rmp-product-details-popup li:nth-child(1) h4 {
    font-size: 12px;
    font-weight: 400;
    color: #56C1F2;
}

.txt-blue {
    color: #56C1F2 !important;
}

.txt-orange {
    color: #ED9400 !important;
}

.rmp-product-details-popup ul li:last-child {
    font-size: 28px;
    font-weight: 500;
}

.rmp-product-details-popup ul {
    border-bottom: 1px solid #E3E3E3;
}

.rmp-detail-product-txt {
    padding: 20px 0px;
    border-bottom: 1px solid #E3E3E3;
}

.rmp-detail-product-txt h4 {
    font-size: 16px;
    color: #2A2A2A;
    font-weight: 500;
}

.rmp-detail-product-txt p {
    font-size: 12px;
    color: #656565;
    font-weight: 400;
    line-height: 1.7;
}

.rmp-detail-product-txt a {
    font-size: 14px;
    color: #FF6D6B;
    font-weight: 500;
}

/*--===== completed product detail popup area =====*/


/*--===== start dashboard area =====*/

.dashboard-header-blk {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    padding: 15px;
}

.dashboard-header-blk {
    display: flex;
    justify-content: space-between;
    padding-bottom: 70px;
    padding-top: 20px;
}

.dsh-tp-info, .dsh-top-right-action-button{
    display: none;
}

.dsh-tp-info.active, .dsh-top-right-action-button.active{
    display: block;
}

.dsh-tp-info h4 {
    font-size: 12px;
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: 500;
}

.dsh-tp-info h2 {
    font-size: 30px;
    color: #fff;
    font-weight: 500;
    line-height: 30px;
    margin-top: 10px;
}

.dsh-tp-info h2 span{
    font-size: 17px;
    color: #fff;
    font-weight: 500;
    line-height: initial;
}

.dsh-tp-info p {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    line-height: 1;
    margin: 0;
}

/* CHG - add message for 12px */
.dsh-tp-info .p-message {
    font-size: 12px;
}

.dsh-tp-info a {
    display: inline-block;
    background: #ffff;
    font-size: 12px;
    color: #000;
    font-weight: 600;
    width: 125px;
    text-align: center;
    height: 36px;
    line-height: 36px;
    border-radius: 30px;
    margin-top: 15px;
}

.dsh-tp-info a i {
    color: #FF0000;
    margin-right: 5px;
}

.dsh-tp-rside {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dsh-tp-rside .white-box{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 24px;
    background: #fff;
    opacity: 0.8;
}

.dsh-r-actions .date{
    font-size: 12px;
    color: #fff;
    margin-top: 5px;
}

.dsh-username-and-account-name{
    display: flex;
    justify-content: space-between;
}

.dsh-username,.dsh-account-name{
    width: 48%;
    border-radius: 24px;
    position: relative;

}

.dsh-username img,.dsh-account-name img{
    width: 100%;
    border-radius: 10%;
}

.dsh-username .detail, .dsh-account-name .detail{
    position: absolute;
    padding: 10px;
    font-size: 12px;
    color: #02181F;
    word-break: break-word;
}

.app-body-blk.scroll.pg-dsh {
    height: 100%;
    padding-top: 0;
    overflow-y: unset;
}

.dsh-tp-actions ul {
    display: flex;
    background: #fff;
    margin: 0 15px;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 0px 12px rgba(175, 175, 175, 0.38);
    -webkit-box-shadow: 0px 0px 12px rgba(175, 175, 175, 0.38);
    -moz-box-shadow: 0px 0px 12px rgba(175, 175, 175, 0.38);
    /*filter: drop-shadow(0px 0px 12px rgba(175, 175, 175, 0.28));*/
    margin-top: -45px;
    position: relative;
    z-index: 99;
}

.dsh-tp-actions li {
    flex: 1;
    text-align: center;

}

.dsh-tp-actions li a img {
    display: block;
}

.dsh-tp-actions li a {
    display: flex;
    flex-direction: column;
}

.dsh-tp-actions li a span {
    font-size: 11px;
    color: #444555;
    font-weight: 500;
    margin-top: 7px;
}

.dsh-tp-actions li a img {
    flex: 0 0 55px;
    max-width: 55px;
    margin: 0 auto;
}

.dsh-shortcuts {
    padding: 25px 15px 10px 15px;
    padding-top: 0;
}

.dsh-shortcuts h4 {
    font-size: 14px;
    color: #444555;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 10px;
}

.dsh-shortcuts ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.dsh-shortcuts li {
    flex: 0 0 25%; 
    text-align: center; 
}

.dsh-shortcuts li img {
    max-width: 60px;
}

.dsh-shortcuts li p {
    font-size: 12px;
    text-align: center;
    color: #444555;
    font-weight: 500;
}

.dsh-rw-acions {
   padding: 0 15px 1px 15px;
    
}

.dsh-rw-acions h4{
   font-size: 14px;
    color: #444555;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 10px;
    
}

/*dashboard reminder box style*/

.dsh-rw-acions .reminder-box {
    border-radius: 8px;
    background: rgb(222,248,255);
    background: linear-gradient(180deg, rgba(222,248,255,1) 0%, rgba(255,255,255,1) 100%);
    padding-left: 4vw;
    padding-bottom: 15px;
    min-height: 70px;
    margin-bottom: 15px;
    box-shadow: 0px 0px 20px #00000029;

}

.dsh-rw-acions .reminder-box .top-section {
    display: flex;
    justify-content: left;
    align-items: flex-start; 
    border-bottom: solid #F0F2F4 1px;
}


.dsh-rw-acions .reminder-box .top-section img {
    flex: 0 0 50px;
    max-width: 50px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-top: 17px;
}

.dsh-rw-acions .reminder-box-title{
    font-size: 14px;
    color: #444555;
    font-weight: 500;
    padding-top: 15px;
    padding-bottom: 15px;
    width: 100%
}

.dsh-rw-acions .reminder-box-description{
    font-size: 13px;
    font-weight: 400;
    color: #8A8A8A;
    margin-top: 5px;
    margin-right: 15px;
}

.dsh-rw-acions .reminder-box-button{
    font-size: 15px;
    color: #000000;
    background-color: #F0F2F4;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px auto 0 auto;
    width: 70%;
    height: 44px;
    text-align: center;
    font-weight: 400;

}

.dsh-rw-acions .reminder-box-button img{
    width: 20px;
    margin-right: 5px;
}

/*dashboard trip style*/

.dsh-rw-acions .trip-box {
    border-radius: 8px;
/*  border: 1px solid #FFC0C0; */
    background: url('../img/tl_bg_dashboard2.jpg') no-repeat center center;
    background-size: 100%;
    box-shadow: 0px 0px 6px rgba(175, 175, 175, 0.28);
    display: flex;
    justify-content: left;
    align-items: center;
    min-height: 100px;
    margin-bottom: 15px;
}

.dsh-rw-acions .trip-box img {
    flex: 0 0 35px;
    max-width: 35px;
    margin-left: 3vw;
    margin-right: 5px;
    margin-bottom: 40px;
    margin-top: 0px;
}

.dsh-rw-acions .trip-title{
    font-size: 14px;
    color: #444555;
    font-weight: 500;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%
}

.dsh-rw-acions .trip-description{
    font-size: 12px;
    font-weight: 400;
    color: #666869;
    margin-top: 5px;
    margin-right: 60px;
}

.dsh-rw-acions .trip-button{
    border-radius: 25px;
    font-size: 13px;
    color: #ffffff;
    font-weight: 500;
    display: inline-block;
    /* float: left; */
    margin-right: 15px;
    margin-top: 5px;
    background-color: #4aba2a;
    padding: 5px 10px 5px 10px;
}


.dsh-rw-acions-v2{
    padding: 0 15px 1px 15px;
    display: inline-block;
    width: 100%;
}

.dsh-rw-acions-v2 h4{
   font-size: 14px;
    color: #444555;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 10px;
    
}


.dsh-rw-acions-v2 a{
    display: flex;
    width: 48%;
    position: relative;
    height: 75px;
    box-shadow: 0px 0px 6px #AFAFAF47;
    border: 1px solid #B7D8F2;
    border-radius: 8px;
    justify-content: center;
    padding: 30px 0 0 0;
    
}

.dsh-rw-acions-v2 a.green-success{
     border: 1px solid #96DC2E;
}

.dsh-rw-acions-v2 a.green-success .date-top{
     background-color: #4ABA2A;
}

.dsh-rw-acions-v2 a.red-fail{
     border: 1px solid #f44336;
}

.dsh-rw-acions-v2 a.red-fail .date-top{
      background-color: #f44336;
}

.dsh-rw-acions-v2 a:nth-child(odd){
    float: right;
}

.dsh-rw-acions-v2 a:nth-child(even){
    float: left;
}

.dsh-rw-acions-v2 a img{
    display: block;
    width: 28px;
    height: 28px;
    margin-right: 5px;
}

.dsh-rw-acions-v2 a h5{
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

.dsh-rw-acions-v2 a h5 span{
   color:#62727d;
   font-weight: 400;
}

.dsh-rw-acions-v2 .date-left{
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    font-size: 10px;
    background-color: #8698A6;
    padding: 3px 4px;
    color: #fff;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-bottomright: 6px;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 6px;

}

.dsh-rw-acions-v2 .date-top{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 2px;
    color: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    text-align: center;
    background-color: #3AAAFF;

}

/* dubai ticket section */

.dsh-rw-acions-v3{
    padding: 20px 20px 1px 20px;
    display: inline-block;
    width: 100%;
}

.dsh-rw-acions-v3 h4{
    font-size: 14px;
    color: #7790D5;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 10px;
    
}

.dsh-rw-acions-v3 a{
    display: flex;
    width: 48%;
    position: relative;
    height: 75px;
    border: 1px solid #DDC874;
    border-radius: 8px;
    justify-content: center;
    padding: 30px 0 0 0;
    
}

.dsh-rw-acions-v3 a.brown{
     border: 1px solid #DCA395;
}

.dsh-rw-acions-v3 a.brown .date-top{
     background-color: #A7410D;
}

.dsh-rw-acions-v3 a:nth-child(odd){
    float: left;
}

.dsh-rw-acions-v3 a:nth-child(even){
    float: right;
}

.dsh-rw-acions-v3 a img{
    display: block;
    width: 28px;
    height: 28px;
    margin-right: 5px;
}

.dsh-rw-acions-v3 a h5{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

.dsh-rw-acions-v3 a h5 span{
    font-size: 12px;    
    color:#606060;
    font-weight: 400;
}

.dsh-rw-acions-v3 .date-left{
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    font-size: 10px;
    background-color: #8698A6;
    padding: 3px 4px;
    color: #fff;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-bottomright: 6px;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 6px;

}

.dsh-rw-acions-v3 .date-top{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 2px;
    color: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    text-align: center;
    background-color: #A7790D;

}

/* Turkey ticket section */

.dsh-rw-acions-v4{
    padding: 20px 20px 1px 20px;
    display: inline-block;
    width: 100%;
}

.dsh-rw-acions-v4 h4{
    font-size: 14px;
    color: #7790D5;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 10px;
    
}

.dsh-rw-acions-v4 a{
    display: flex;
    width: 100%;
    position: relative;
    height: 85px;
    border: 1px solid #DDC874;
    border-radius: 8px;
    justify-content: center;
    padding: 30px 0 0 0;
    
}

.dsh-rw-acions-v4 a.brown{
     border: 1px solid #DCA395;
}

.dsh-rw-acions-v4 a.brown .date-top{
     background-color: #A7410D;
}


.dsh-rw-acions-v4 a img{
    display: block;
    width: 28px;
    height: 28px;
    margin-right: 5px;
}

.dsh-rw-acions-v4 a h5{
    font-size: 22px;
    font-weight: 500;
    line-height: 0.9;
    text-align: center;
}

.dsh-rw-acions-v4 a h5 span{
    font-size: 12px;    
    color:#606060;
    font-weight: 400;
}

.dsh-rw-acions-v4 .date-top{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 2px;
    color: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    text-align: center;
    background-color: #A7790D;

}

/* CHG - this is the success color for qualified in home page */
.dsh-rw-acions .atag p.success {
    color: green !important;
}

.dsh-latest-news {
    padding: 0px 15px 30px 15px;
}

.dsh-latest-news h4 {
    font-size: 14px;
    color: #444555;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.dsh-latest-news h4 a {
    color: #47BCF1;
    font-weight: 500;
    font-size: 14px;
}

.dsh-nesws {
    height: 190px;
    display: flex;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}

.dsh-nws {
    height: 180px;
    width: 300px;
    background: #F8F8F8;
    border-radius: 10px;
    margin-right: 18px;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    flex: 0 0 300px;
}

.dsh-nws.no-text {
    height: 100px;
   
}

.dsh-nws img {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


.dsh-nws.no-text img {
 
    border-radius: 10px;
}

.dsh-nws a {
    font-size: 14px;
    color: #2E2E2E;
    font-weight: 500;
    padding: 10px 15px;
    margin: 0;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 40px;
    align-items: center;
}

.dsh-nws:last-child {
    margin: 0;
}

.lst-nws {
    height: auto;
    width: calc(100vw - 40px);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
    background: #f8f8f8;
    border-radius: 10px;
   
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    flex: 0 0 300px;
}

.lst-nws img {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.lst-nws a {
    font-size: 14px;
    color: #2E2E2E;
    font-weight: 500;
    padding: 10px 15px;
    margin: 0;
    line-height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 50px;
    align-items: center;
}

.mb-100 {
    margin-bottom: 100px;
}

.mb-70 {
    margin-bottom: 70px;
}

/*--===== completed dashboard area =====*/

/*--===== start prodile area =====*/
.app-header-blk.bg-none {
    background: none;
}

.pro-tp-title {
    text-align: center;
}

.pro-tp-title h4 {
    font-size: 18px;
    color: #000;
    font-weight: 500;
    margin-top: 10px;
}

.pro-tp-title h5 {
    font-size: 14px;
    color: #4A4A4A;
    font-weight: 100;
    margin-top: 10px;
}


.pro-tp-actions {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    margin: 0 auto;
    justify-content: space-between;
    margin: 40px auto;
}

.pro-tp-action p {
    margin: 0;
    font-size: 10px;
    color: #000;
    font-weight: 500;
}

.pro-ct-action {
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin: 25px;
    padding: 14px 20px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pro-ct-action h4 {
    font-size: 14px;
    color: #8A8A8A;
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* CHG - add a for profile  */
.pro-ct-action a {
    font-size: 14px;
    color: #8A8A8A;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.pro-ct-action i {
    color: #54BCF7;
}

.pro-ct-action h4 img {
    width: 35px;
    margin-right: 10px;
}

.pro-ct-btm-btn a {
    font-size: 16px;
    color: #31BAFD;
    font-weight: 500;
    line-height: 1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin: 25px;
    padding: 14px 20px;
    display: block;
    text-align: center;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pro-ct-btm-btn a img {
    margin-left: 15px;
}

.qr-popup-content {
    text-align: center;
    background: #ffff;
    border-radius: 8px;
    padding: 20px;
}


.qr-popup-content h4 {
    font-size: 16px;
    color: #E54646;
    font-weight: 500;
    padding: 18px;
    margin: 0;
    line-height: 1;
    border-bottom: 1px solid #EAEAEA;
}

.qr-popup-content img {
    margin: 15px 0px;
}

.qr-popup-content a {
    font-size: 14px;
    color: #8A8A8A;
    font-weight: 400;
    background: #F3F3F3;
    padding: 10px 10px;
    display: inline-block;
    border-radius: 7px;
}

/* .qu-code-popup {
    ! padding-bottom: 20px;
} */

.qr-popup-btm-actins {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*! padding: 0 15px; */
    /*! background: #F3F3F3; */
}

.qr-popup-btm-actins a {
    height: 50px;
    text-align: center;
    line-height: 50px;
    flex: 1;
    border-radius: 30px;
    background: #EF534B;
    color: #fff;
    margin-right: 10px;
    font-weight: 500;
}

.qr-popup-btm-actins a:last-child {
    background: #4AB8F7;
    margin-right: 0;
}

.pro-ct-action-inr-content {
    padding: 0 25px;
}

.txt-success {
    background: #E8F5F8;
    border: 1px solid #8FD4E9;
}

.pro-ct-inr-inpt {
    border: 1px solid #CCCCCC;
    border-radius: 8px;
    padding: 20px;
    padding-bottom: 0;
}

.pro-ct-inr-inpt h4 {
    font-size: 16px;
    color: #E54646;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 20px;
}

.pro-ct-inr-inpt p {
    font-size: 14px;
    color: #707070;
    font-weight: 400;
}

.input-itm p {
    text-align: left;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 400;
}

.site-btn{
    background: #BD1010;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 0px;
    border-radius: 5px;
}

.pro-ct-inr-inpt .site-btn {
    text-align: center;
    /* CHG - change width from 130px to 150px to solved continue in the middle */
    /* width: 130px; */
    width: 150px;
    margin: 0 auto;
    display: block;
}

.pro-ct-action-inr-content .site-btn {
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-top: 20px;
}

.pro-ct-action-inr-content .site-btn-long {
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-top: 20px;
}

.pro-ct-action-inr-content {
    display: none;
}


.pro-ct-action-itm.active .pro-ct-action-inr-content {
    display: block;
}

/*--===== completed prodile area =====*/

/*--===== start edit profile area =====*/

.edit-profile {
    padding: 20px;
    border-bottom: 10px solid #f5f6f5;
}

.edit-profile input {
    /*color: #000;
    font-size: 16px;
    font-weight: 400;
    opacity: 1;*/
}

.edit-profile input::placeholder {
    color: #8A8A8A;
    font-weight: 400;
}

.edit-profile-btm {
    padding: 20px;
    margin-top: 0px;
}

.select-itm {
    position: relative;
    display: flex;
}

/*custom select style*/
.select-pack {
    display: inherit;
    /* CHG - hide margin bottom */
    margin-bottom: 20px;
}
.select-pack h4,.input-itm h4 {
    font-size: 16px;
    color: #8a8a8a;
    margin-bottom: 8px;
}

.select-pack h3 {
    font-size: 16px;
    font-weight: 500;
    color: #F45B7E;
    margin-bottom: 5px;
}

.select-pack h5 {
    font-size: 13px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 20px;
    line-height: 1.4;
}

.select-pack .select-fields {
    position: relative;
    background: #fff;
}
.select-pack .select-fields:before {
    position: absolute;
    content: '\f078';
    font-size: 14px;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    color: #28A9E2;
    font-family: "Font Awesome 5 Pro";
    cursor: pointer;
    z-index: 1;
}
.select-pack .select-fields select {
    font-size: 16px;
    color: #000;
    font-weight: 500;
    border: none;
    background: none;
    width: 100%;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #DADDE0;
    padding: 0 20px;
    line-height: 42px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
.select-pack .select-fields select::-ms-expand {    display: none; }
.select-pack .select-fields select{
    -webkit-appearance: none;
    appearance: none;
}
/*custom select style*/

.select-itm.select-pack span {
    margin-top: 0px;
}
.select-itm .current {
    color: #000;
    font-weight: 500;
    margin-top: 10px;
}

.select-itm .current p {
    font-size: 14px;
    color: #707070 !important;
    font-weight: 400 !important;
    position: absolute;
    top: 0;
}

/*--===== completed edit profile area =====*/
/*--===== start registration area =====*/
.edit-ch-option>li {
    margin-right: 30px;
    vertical-align: middle;
}

.edit-ch-option>li:last-child {
    margin-right: 0px;
}

.edit-ch-option .edit-ch-switch-inpt {
    visibility: hidden;
    margin-left: -9999px;
    position: absolute;
}

.edit-ch-option label {
    margin-bottom: 0;
}

.edit-ch-option .edit-ch-switch-inpt+label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    border-radius: 80px;
    border: 1px solid #ddd;
    user-select: none;
}

.edit-ch-option .edit-ch-switch-inpt+label:before {
    right: 0px;
    background: #F1F1F1;
    border-radius: 75px;
}

.edit-ch-option .edit-ch-switch-inpt+label:after {
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.edit-ch-option .edit-ch-switch-inpt+label:before,
.edit-ch-option .edit-ch-switch-inpt+label:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    left: 0;
    position: absolute;
    top: 0;
}

.edit-ch-option .edit-ch-switch-inpt:checked+label:before {
    background-color: #D51818;
}

.edit-ch-option .edit-ch-switch-inpt:checked+label {
    border-color: #D51818;
}

.edit-ch-option-itm .edit-ch-switch-inpt+label {
    height: 30px;
    width: 60px;
}

.edit-ch-option-itm .edit-ch-switch-inpt+label:after {
    width: 28px;
    height: 28px;
}

.edit-ch-option-itm .edit-ch-switch-inpt:checked+label:after {
    margin-left: 18px;
}

.edit-ch-option-itm .edit-ch-switch-inpt+label {
    width: 40px;
    height: 24px;
}

.edit-ch-option-itm .edit-ch-switch-inpt+label::after {
    width: 20px;
    height: 22px;
}


.edit-ch-options {
    display: flex;
    flex-wrap: wrap;
}

.edit-ch-option {
    width: 50%;
    flex: 0 0 50%;
    margin-bottom: 25px;
}

.edit-ch-option-blk h4 {
    font-size: 16px;
    color: #707070;
    font-weight: 500;
    margin-bottom: 20px;
}

.edit-ch-option-blk {
    padding: 25px;
}

.edit-ch-option p {
    font-size: 12px;
    color: #707070;
    font-weight: 400;
    margin: 0;
    margin-left: 10px;
}

.edit-ch-option {
    display: flex;
    align-items: center;
}

/*--===== completed registration area =====*/
/*--===== start profile popup area =====*/

.p-myinfo-inr {
    background: #ffff;
    width: 330px;
    border-radius: 8px;
}

.p-myinfo-inr h4 {
    font-size: 16px;
    color: #E54646;
    font-weight: 500;
    text-align: center;
    padding: 18px 0;
    border-bottom: 1px solid #EBEBEB;
}

.p-myinfo-inr ul {
    padding: 10px 15px;
    padding-bottom: 30px;
}

.p-myinfo-inr li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}


.p-myinfo-inr li p {
    font-size: 14px;
    color: #AFAFAF;
    font-weight: 400;
    margin: 0;
}

.p-myinfo-inr li span {
    font-size: 14px;
    color: #626262;
    font-weight: 500;
}

.btm-trms-checkmrk .inpt-checkbx-itm-container .inpt-checkbx-itm-checkmark::after {
    top: 5px;
    left: 9px;
}

/*--===== completed profile popup area =====*/

/*--===== start dashboard popup area =====*/

/* TOP10 SPONSOR */

.popup-top10-sponsor-inr {
    width: 90vw;
    background: #fff;
    border-radius: 7px;
}

.popup-top10-sponsor-inr .rank-list{
    position: absolute;
    top: 95px;
    font-weight: 300;
    color: #fff;
    width: 310px;
    margin: auto;
    display: block;
    left: 0;
    right: 0;
}

.popup-top10-sponsor-inr .your-rank{
    position: absolute;
    top: 27px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    left: 0;
    right: 0;
    width: 310px;
    text-indent: 193px;
    display: block;
    margin: auto;
}

.popup-top10-sponsor-inr .rank-row{
    display: flex;
    height: 20px;
}

.popup-top10-sponsor-inr .rank-row div{
    font-size: 11px;
    text-align: center;
}

.popup-top10-sponsor-inr .rank-row div:first-child{
    width: 40px;
    margin-left: 35px;
}

.popup-top10-sponsor-inr .rank-row div:nth-child(2){
    width: 140px;
}

.popup-top10-sponsor-inr .rank-row div:nth-child(3){
    width: 60px;
}



.popup-top10-sponsor-inr h4 {
    padding: 15px 15px;
    text-align: center;
    color: #E54646;
    font-size: 16px;
    border-bottom: 1px solid #E3E3E3;
    font-weight: 500;
}

.popup-top10-sponsor-inr h4 span {
    display: block;
    text-align: center;
    color: #8B8B8B;
    font-size: 12px;
    margin-top: 3px;
}



.popup-top10-sponsor-inr li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.popup-top10-sponsor-inr li p {
    font-size: 12px;
    color: #808080;
    font-weight: 400;
    margin: 0;
    flex: 0 0 150px;
    line-height: 1.4;
}

.popup-top10-sponsor-inr ul {
    padding: 15px;
}

.popup-top10-sponsor-inr li h4 {
    border: none;
    text-align: right;
    font-size: 14px;
    color: #626262;
    font-weight: 500;
    flex: 1;
    margin: 0;
    padding: 0;
}

.popup-top10-sponsor-inr li:last-child {
    margin: 0;
}

.popup-top10-sponsor-inr li a {
    font-size: 14px;
    color: #fff;
    background: #FF6D6B;
    padding: 3px 10px;
    border-radius: 4px;
}

.popup-top10-sponsor-inr img {
    height:310px;
    display: block;
    width: 100%;
    max-width: 414px;
    margin: auto;
}

/* dubai sponsor*/

.popup-promosi-tur-dubai {
    width: 90vw;
    background: #fff;
    border-radius: 7px;
}

.popup-promosi-tur-dubai-inr h4 {
    padding: 15px 15px;
    text-align: center;
    color: #E54646;
    font-size: 16px;
    border-bottom: 1px solid #E3E3E3;
    font-weight: 500;
}

.popup-promosi-tur-dubai-inr h4 span {
    display: block;
    text-align: center;
    color: #8B8B8B;
    font-size: 12px;
    margin-top: 3px;
}

.popup-promosi-tur-dubai-inr img {
    width: 100%;
    max-width: 414px;
    height: 100%;
    margin:auto;
    display: block;
}

.popup-promosi-tur-dubai-inr li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.popup-promosi-tur-dubai-inr li p {
    font-size: 14px;
    color: #808080;
    font-weight: 300;
    margin: 0;
    flex: 0 0 170px;
    line-height: 1.4;
}

.popup-promosi-tur-dubai-inr ul {
    padding: 15px;
}

.popup-promosi-tur-dubai-inr li h4 {
    border: none;
    text-align: right;
    font-size: 14px;
    color: #626262;
    font-weight: 500;
    flex: 1;
    margin: 0;
    padding: 0;
}

.popup-promosi-tur-dubai-inr li:last-child {
    margin: 0;
}

.popup-promosi-tur-dubai-inr li a {
    font-size: 14px;
    color: #fff;
    background: #108de7;
    padding: 3px 10px;
    border-radius: 4px;
}

/* gold reward sponsor*/

.popup-gold-reward {
    width: 90vw;
    background: #fff;
    border-radius: 7px;
}

.popup-gold-reward-inr .your-name{
    font-size: 18px;
    font-weight: 400;
    color: #ffe000;
    position: absolute;
    top: 26%;
    transform: translate(-50%,-50%);
    left: 50%;
    display: inline-block;
    text-align: center;
    width: 300px;
}

.popup-gold-reward-inr .your-gold{
    font-size: 15px;
    font-weight: 400;
    color: #ffe000;
    position: absolute;
    top: 46%;
    transform: translate(-50%,-50%);
    left: 50%;
    display: inline-block;
    text-align: center;
    width: 300px;
}

.popup-gold-reward-inr h4 {
    padding: 15px 15px;
    text-align: center;
    color: #E54646;
    font-size: 16px;
    border-bottom: 1px solid #E3E3E3;
    font-weight: 500;
}

.popup-gold-reward-inr h4 span {
    display: block;
    text-align: center;
    color: #8B8B8B;
    font-size: 12px;
    margin-top: 3px;
}

.popup-gold-reward-inr img {
    width: 100%;
    max-width: 414px;
    height: 100%;
    margin:auto;
    display: block;
}

.popup-gold-reward-inr li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.popup-gold-reward-inr li p {
    font-size: 12px;
    color: #808080;
    font-weight: 400;
    margin: 0;
    flex: 0 0 150px;
    line-height: 1.4;
}

.popup-gold-reward-inr ul {
    padding: 15px;
}

.popup-gold-reward-inr li h4 {
    border: none;
    text-align: right;
    font-size: 14px;
    color: #626262;
    font-weight: 500;
    flex: 1;
    margin: 0;
    padding: 0;
}

.popup-gold-reward-inr li:last-child {
    margin: 0;
}

.popup-gold-reward-inr li a {
    font-size: 14px;
    color: #fff;
    background: #FF6D6B;
    padding: 3px 10px;
    border-radius: 4px;
}


/* Labuan reward sponsor*/

.popup-reward {
    width: 90vw;
    background: #fff;
    border-radius: 7px;
}

.popup-reward-inr .your-name{
    font-size: 18px;
    font-weight: 400;
    color: #0b45ab;
    position: absolute;
    top: 26%;
    transform: translate(-50%,-50%);
    left: 50%;
    display: inline-block;
    text-align: center;
    width: 300px;
}

.popup-reward-inr h4 {
    padding: 15px 15px;
    text-align: center;
    color: #E54646;
    font-size: 16px;
    border-bottom: 1px solid #E3E3E3;
    font-weight: 500;
}

.popup-reward-inr h4 span {
    display: block;
    text-align: center;
    color: #8B8B8B;
    font-size: 12px;
    margin-top: 3px;
}

.popup-reward-inr img {
    width: 100%;
    max-width: 414px;
    height: 100%;
    margin:auto;
    display: block;
}

.popup-reward-inr li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.popup-reward-inr li p {
    font-size: 12px;
    color: #808080;
    font-weight: 400;
    margin: 0;
    flex: 0 0 150px;
    line-height: 1.4;
}

.popup-reward-inr ul {
    padding: 15px;
}

.popup-reward-inr li h4 {
    border: none;
    text-align: right;
    font-size: 14px;
    color: #626262;
    font-weight: 500;
    flex: 1;
    margin: 0;
    padding: 0;
}

.popup-reward-inr li:last-child {
    margin: 0;
}

.popup-reward-inr li a {
    font-size: 14px;
    color: #fff;
    background: #FF6D6B;
    padding: 3px 10px;
    border-radius: 4px;
}



.popup-email {
    width: 330px;
    /*! background: #fff; */
}


.popup-email-tp-blk {
    background: #ffff;
    border-radius: 8px;
}

.popup-email-tp-blk h4 span {
    font-weight: 400;
}

.popup-email-tp-blk h4 {
    padding: 17px 24px;
    text-align: center;
    font-size: 16px;
    color: #E54646;
    font-weight: 500;
    border-bottom: 1px solid #D4D4D4;
}

.email-rdo-btn.chekcmark-boxs {
    padding: 25px;
}

.email-rdo-btn.chekcmark-boxs li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.email-rdo-btn.chekcmark-boxs li h4 {
    border: none;
    font-size: 12px;
    color: #4A4A4A;
    font-weight: 400;
    display: flex;
    align-items: center;
    padding: 0;
}

.email-rdo-btn.chekcmark-boxs li h4 img {
    margin-right: 15px;
    width: 25px;
}

.email-rdo-btn.chekcmark-boxs li input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
}

.email-rdo-btn.chekcmark-boxs li span {
    height: 24px;
    font-size: 14px;
    width: 24px;
    border: 1px solid #E54646;
    text-align: center;
    line-height: 24px;
    color: transparent;
    border-radius: 50%;
}

.email-rdo-btn.chekcmark-boxs li span i {
    line-height: 24px;

}

.email-rdo-btn.chekcmark-boxs li.active span {
    background: #EF5655;
    color: #fff;
}

.popup-email-btm-blk {
    margin-top: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.popup-email-btm-blk a {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    flex: 1;
    text-align: center;
    height: 50px;
    border: 1px solid #fff;
    line-height: 50px;
    border-radius: 30px;
    margin-right: 15px;
}

.popup-email-btm-blk a:last-child {
    background: #4AB8F7;
    border-color: #4AB8F7;
}

/*--===== completed dashboard popup area =====*/
/*--===== start pin payment  area =====*/

.rmp-filter-pin-actions {
    /*background: #fff;
    border: 1px solid #DADDE0;
    border-radius: 8px;
    padding: 0 15px;*/
    /* CHG - hide margin top/bottom and add margin15px */
/*    margin:15px;*/
    /* margin-top: 15px;
    margin-bottom: 20px; */
}

.rmp-filter-pin-actions.rmp-filter-pin-actions2 {
    margin-left: 0px;
    margin-right: 0px;
}
.rmp-filter-pin-actions2 .rmp-filter-pin-action {
    padding: 10px 0px;
}
.rmp-filter-pin-actions2 .rmp-filter-pin-action > input {
    padding-left: 0px;
}
input.f-500::-moz-placeholder {
    color: #000 !important;
    font-weight: 500 !important;
}

input.f-500::placeholder {
    color: #000 !important;
    font-weight: 500 !important;
}
/*.rmp-filter-pin-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #DADDE0;
    padding: 15px 0;
}*/

.rmp-filter-pin-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #DADDE0;
    padding: 15px 0;
    position: relative;
}

.rmp-filter-pin-action .title {
    position: absolute;
/*    font-family: Roboto;*/
    font-size: 13px;
    top: 10px;
    left: 20px;
    font-weight: 500;
}

.rmp-filter-pin-action img {
    width: 20px;
    height: auto;
}

.rmp-filter-pin-action h4 {
    font-size: 15px;
    color: #797979;
    display: flex;
    align-items: center;
    font-weight: 400;
}

.rmp-filter-pin-action h4 img {
    margin-right: 10px;
}

.rmp-filter-pin-action i {
    color: #51BFF1;
    font-size: 24px;
}

/*.rmp-filter-pin-action:last-child {
    border: none;
}
*/
.rmp-filter-pin-action>* {
    flex: 1;
}

.rmp-filter-pin-action>i {
    text-align: right;
}

/*.rmp-filter-pin-action>input {
    font-size: 18px;
    padding: 0 20px;
    border: none;
    color: #000;
    text-align: left;
    width: 100%;
    max-width: 100px;
    max-width: 100%;
    left: 0;
    text-align: left;
    background: transparent;
    z-index: 2;
    margin-top: 15px;
}*/

.rmp-filter-pin-action>input {
    font-size: 18px;
    padding: 0 20px;
    border: none;
    color: #000;
    text-align: left;
    width: 100%;
    max-width: 100px;
    max-width: 100%;
    left: 0;
    text-align: left;
    background: transparent;
    z-index: 2;
    margin-top: 15px;
    line-height: 1.4;
}

.rmp-filter-pin-action .calender-icon{
    position: absolute;
    right: 20px;
    width: 20px;
    z-index: 1;
}

.rmp-filter-pin-action .transfer-label{
    font-size: 14px;
    color: #797979;
    display: flex;
    align-items: center;
    font-weight: 400;
    width: 40px;
    flex: 0 0 80px;  
     margin-left: 10px;
}

.rmp-filter-pin-action  .transfer-input{
    width: 100%;
    height: 40px;  
    border: 1px solid #B8B8B8;
    font-size: 14px;
    color: #707070;
    font-weight: 400;
    padding: 0 20px;
    margin-left: 10px;
}


.rmp-filter-pin-action h4 {
    font-size: 15px;
    color: #797979;
    display: flex;
    align-items: center;
    font-weight: 400;
    /*flex: 0 0 120px;*/
    width: 40px;
    flex: 0 0 150px;
    /*padding-left: 4;*/
    margin: 0px;
}

.ct-pin-action .nice-select {
    border: none;
    flex: 1;
    padding: 0;
    width: 100%;
    flex-grow: 1;
    line-height: 1;
    height: auto;
    z-index: 99;
    background: transparent;
}




.rmp-filter {
    position: relative;
}

.rmp-filter p {
    position: absolute;
    top: 0;
    display: block;
    margin: 0;
    margin-top: 0px;
    line-height: 1.5;
    color: #707070;
    font-size: 10px;
    font-weight: 500;
    margin-top: 5px;
}

.ct-pin-action i {
    position: absolute;
    right: 0;
}

.ct-pin-action {
    position: relative;
}

.ct-pin-action .current {
    font-size: 14px;
    color: #000;
    font-weight: 500;
}

.ct-pin-action .nice-select:after {
    display: none;
}

.rmp-filter-pin-action-btm {
    text-align: center;
    /*padding-bottom: 20px;*/
}

/* CHG - submit input and button */
.rmp-filter-pin-action-btm a,
.rmp-filter-pin-action-btm input[type=submit],
.rmp-filter-pin-action-btm button {
    display: block;
    /*width: 320px;*/
    height: 50px;
    margin: 0 auto;
    border-radius: 5px;
    background: #BD1010;
    line-height: 50px;
    color: #ffff;
    font-size: 16px;
    font-weight: 500;
    /*max-width: 375px;*/
    
    /* CHG -> For button and input submit */
    /* margin-right: 15px !important;
    margin-left: 15px !important; */
    width: 100%
}

.rmp-filter-pin-action-btm a i {
    margin-right: 5px;
}

.rmp-filter-results {
    border-top: .1px solid #D4D4D4;
}

.rmp-filter-results h3 {
    padding: 10px 25px;
    font-size: 14px;
    color: #1C89FD;
    font-weight: 400;
}

.rmp-filter-result {
    background: #FFFF;
    padding: 15px 25px 25px 25px;
}

.rmp-filter-rsult-content p {
    font-size: 12px;
    color: #808080;
    font-weight: 400;
    margin: 0;
    margin-bottom: 12px;
}

.rmp-filter-rsult-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.rmp-filter-rsult-content h4 {
    font-size: 14px;
    color: #000;
    font-weight: 500;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.rmp-filter-rsult-content h3 {
    font-size: 12px;
    color: #28A9E2;
    font-weight: 400;
    padding: 0 0 5px 0;
}

.rmp-filter-rsult-content h4:last-child {
    margin: 0;
}

.rmp-filter-rsult-content a {
    font-size: 9px;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    border: 1px solid #D0D0D0;
    padding: 3px 11px;
    border-radius: 30px;
    margin-left: 10px;
}

.rmp-filter-rit-side {
    text-align: right;
}

.txt-green {
    color: #00C569;
}

.txt-tomato {
    color: #F45B7E !important;
}

.rmp-filter-result-bmt-txt {
    background: #F8F8F8;
}

.rmp-filter-result-bmt-txt {
    padding: 15px 15px;
    border-radius: 8px;
    margin-top: 5px;
}

.rmp-filter-result-bmt-txt p {
    margin: 0;
    font-size: 10px;
    color: #8A8A8A;
    font-weight: 400;
    margin: 0;
    line-height: 1;
}

.rmp-filter-result-bmt-txt h4 {
    font-size: 12px;
    color: #000;
    font-weight: 400;
    line-height: 1.4;
}

.rmp-filter-pin-action-btm.w-100 a {
    width: auto;
    margin: 0 15px;
    margin-bottom: 20px;
}

.rmp-filter-result {

    border-bottom: 1px solid #E8E8E8;
}

.txt-green {
    color: #00C569 !important;
}

.rmp-filter-results-btm-blk {
    padding: 15px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
}

.rmp-filter-results-btm-blk p {
    font-size: 12px;
    font-weight: 400;
    margin: 0;
    display: flex;
    align-items: center;
}

.rmp-filter-results-btm-blk p img {
    margin-right: 5px;
}

.rmp-filter-results-btm-blk h4 {
    font-size: 16px;
    font-weight: 500;
}

.rmp-filter-results-btm-blk h4 span {
    margin-left: 15px;
}

/* New Total bar */

.rmp-filter-results-btm-blk2 {
    padding: 15px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
}

.rmp-filter-results-btm-blk2 p {
    font-size: 12px;
    font-weight: 400;
    margin: 0;
    display: flex;
    align-items: center;
}

.rmp-filter-results-btm-blk2 p img {
    margin-right: 5px;
}

.rmp-filter-results-btm-blk2 h4 {
    font-size: 16px;
    font-weight: 500;
}

.rmp-filter-results-btm-blk2 h4 span {
    margin-left: 15px;
}


/* CHG - Hide it because its double use already */
/* .ps-actions-blk {
    padding: 25px;
} */

/*--===== completed pin payment  area =====*/
/*--===== start  area =====*/

.ps-actions-blk {
    padding: 25px;
    border-bottom: 1px solid #E8E8E8;
}

.ps-actions-blk .select-itm {
    height: 60px;
    margin-bottom: 25px;
}


.px-inpt .input-itm {
    position: relative;
}

.px-inpt .input-itm label {
    position: absolute;
    left: 20px;
    top: 8px;
}

.px-inpt .input-itm input {
    padding-top: 16px;
}

.rnd-btn {
    display: block;
    width: 100%;
    height: 50px;
    margin: 0 auto;
    border-radius: 5px;
    background: #BD1010;
    line-height: 50px;
    color: #ffff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    /* CHG : extra attribute, comment this to allow the button can full width in report */
    /* width: auto; */
    /*max-width: 375px;*/
    /*margin-right: 15px !important;*/
    /*margin-left: 15px !important;*/
}

.blue-btn {
    display: block;
    width: 100%;
    height: 50px;
    margin: 0 auto;
    border-radius: 5px;
    background: #28a9e2;
    line-height: 50px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    
}

.px-inpt {
    margin-bottom: 25px;
}


.px-info-txt p {
    font-size: 14px;
    color: #1C89FD;
    font-weight: 400;
    display: flex;
    align-items: center;
}

.px-info-txt {
    padding: 10px 15px;
}

.px-info-txt p img {
    margin: 0 5px;
}

.ps-navigator-btn ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    background: #f8f8f8;
    text-align: center;
}

.ps-navigator-btn li a {
    display: flex;
    flex-direction: column;
    width: 36px;
}

.ps-navigator-btn li a span {
    font-size: 12px;
    color: #808080;
    font-weight: 400;
    margin-top: 10px;
}

.ps-navigator-btn {
    border-bottom: 1px solid #E2E2E2;
}

.ps-lagenda-lists ul {
    display: flex;
    justify-content: left;
    align-items: flex-start;
    text-align: center;
}

.ps-lagenda-lists {
    padding: 20px 0px 40px 0px;
    background-color: #F8F8F8;
}

.ps-lagenda-lists h4 {
    font-size: 16px;
    font-weight: 500;
    color: #8F8F8F;
    margin-bottom: 15px;
    padding-left: 15px;
}

.ps-lagenda-lists li {
    display: flex;
    flex-direction: column;
    width: 20%;
}

.ps-lagenda-lists li span {
    font-size: 10.5px;
    font-weight: 400;
    color: #555555;
    margin-top: 10px;
}

.ps-lagenda-lists li img {
    height: 32px;
    width: 32px;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

.ps-lagenda-lists h4 {
    font-size: 16px;
    font-weight: 500;
    color: #8F8F8F;
    margin-bottom: 15px;
}

.px-grap-ground img {
    width: 100%;
}

.px-grap-ground {
    /*padding-bottom: 20px;*/
    background: #fff;
}

.popup-email-inr {
    width: 330px;
}

/*--===== completed  area =====*/

/*--===== start lavel area =====*/

.app-header-blk h2 span {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
}

.rmp-filter-level-acions {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
}

.rmp-filter-level-acions .select-itm {
    flex: 1;
}

.rmp-filter-level-acions .select-itm .nice-select {
    margin: 0;
}

.rmp-filter-level-acions .px-inpt {
    margin: 0;
    flex: 2;
    margin-left: 20px;
}

.rmp-filter-level-acions .px-inpt .input-itm {
    margin: 0;
}

.rmp-lavel-slider p {
    text-align: center;
    font-size: 14px;
    color: #B8B8B8;
    font-weight: 400;
}

.rmp-lavel-slider {
    padding: 15px;
}

.rmp-lavel-slider ul {
    display: flex;
    overflow-x: scroll;
    min-height: 40px;
}

.rmp-lavel-slider li {
    flex: 0 0 70px;
    border: 1px solid #B8B8B8;
    border-radius: 3px;
    margin-right: 10px;
    text-align: center;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
}

/* CHG - add a tag for inactive color */
.rmp-lavel-slider li a{
    color: #B8B8B8;
}

.rmp-lavel-slider li.active {
    border-color: #1C89FD;
    color: #1C89FD;
}

/* CHG - add active a tag */
.rmp-lavel-slider li.active a {
    border-color: #1C89FD !important;
    color: #1C89FD !important;
}

.rmp-level-info {
    padding: 0 25px;
    background: #fff;

}

.rmp-level-info ul {
    padding: 25px 0;
    border-bottom: 1px solid #D1D1D1;
}

.rmp-level-info li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.rmp-level-info p {
    font-size: 12px;
    color: #808080;
    font-weight: 400;
    margin: 0;
}

.rmp-level-info a {
    font-size: 12px;
    color: #808080;
    font-weight: 400;
    border: 1px solid #808080;
    display: inline-block;
    padding: 3px 14px;
    border-radius: 30px;
}
.rmp-level-info h4 {
    font-size: 14px;
    color: #000000;
    font-weight: 500;
    margin: 0;
    line-height: 1;
}

.rmp-level-info h4 span {
    margin-right: 10px;
    font-size: 9px;
    font-weight: 400;
}

.txt-notify {
    text-align: center;
    padding: 20px 0;
}

.txt-notify p {
    font-size: 16px;
    color: #8E8E8E;
    font-weight: 400;
}

.px-number-bxs {
    padding: 15px 15px;
    background: #fff;
}

.px-number-bxs ul {
    padding: 25px 0;
    border-bottom: 1px solid #D4D4D4;
    display: flex;
    flex-wrap: wrap;
}

.px-number-bxs h3 {
    font-size: 12px;
    color: #808080;
    font-weight: 400;
    border: 1px solid #D0D0D0;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 30px;
    line-height: 1;
    margin: 0;
}

.px-number-bxs h4 {
    font-size: 14px;
    color: #4a4a4a;
    font-weight: 400;
    margin-bottom: 5px;
}

.px-number-bxs p {
    margin: 0;

    line-height: 1;
    font-size: 10px;
    color: #ABABAB;
    font-weight: 400;
}

.px-number-bxs li {
    width: 25%;
    margin-bottom: 20px;
}

/* 
 * CHG - make 4 column into 3 column 
 */
.px-number-bxs3 {
    padding: 15px 15px;
    background: #fff;
}

.px-number-bxs3 ul {
    padding: 25px 0;
    border-bottom: 1px solid #D4D4D4;
    display: flex;
    flex-wrap: wrap;
}

.px-number-bxs3 h3 {
    font-size: 12px;
    color: #808080;
    font-weight: 400;
    border: 1px solid #D0D0D0;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 30px;
    line-height: 1;
    margin: 0;
}

.px-number-bxs3 h4 {
    font-size: 14px;
    color: #28A9E2;
    font-weight: 500;
    margin-bottom: 5px;
}

.px-number-bxs3 p {
    margin: 0;
    line-height: 1;
    font-size: 10px;
    color: #ABABAB;
    font-weight: 400;
}

.px-number-bxs3 li {
    width: 33%;
    margin-bottom: 20px;
}

/* CHG - 50% Column */
.px-number-bxs3 li.li2 {
    width: 50% !important;
    margin-bottom: 20px;
}

/* 
 * END CHG- make 4 column into 3 column 
 */

.lst-child ul {
    margin-bottom: 0;
    padding-bottom: 0;
    border: none;
}

.px-number-btm-blk ul {
    padding: 0 25px;
    display: flex;
    flex-wrap: wrap;
}

.px-number-btm-blk li h4 {
    font-size: 14px;
    color: #000;
    font-weight: 500;
    text-align: center;
}

.px-number-btm-blk li p {
    font-size: 10px;
    color: #ABABAB;
    font-weight: 400;
}

.px-number-btm-blk ul li {
    width: 25%;
}

.px-number-btm-blk {
    border-top: 1px solid #D4D4D4;
    background-color: #F8F8F8;
}

/* 
 * Total - 3 Column with Total Icon at left 
 */

.px-number-btm-blk2 ul {
    padding: 10px 25px 0px 25px;
    display: flex;
    flex-wrap: wrap;
}

.px-number-btm-blk2 li h4 {
    font-size: 14px;
    color: #000;
    font-weight: 500;
    text-align: center;
}

.px-number-btm-blk2 li p {
    font-size: 10px;
    color: #ABABAB;
    font-weight: 400;
}

.px-number-btm-blk2 ul li {
    width: 25%;
}

.px-number-btm-blk2 {
    border-top: 1px solid #D4D4D4;
    background-color: #FBFBFB;
}


/* 
 * Total - 3 Column with Total Icon at left and bottom line added
 */

.px-number-btm-blk4 ul {
    padding: 10px 25px 0px 25px;
    display: flex;
    flex-wrap: wrap;
}

.px-number-btm-blk4 li h4 {
    font-size: 14px;
    color: #000;
    font-weight: 500;
    text-align: center;
}

.px-number-btm-blk4 li p {
    font-size: 10px;
    color: #ABABAB;
    font-weight: 400;
}

.px-number-btm-blk4 ul li {
    width: 25%;
}

.px-number-btm-blk4 {
    border-top: 10px solid #F0F3F5;
    background-color: #ffffff;
    border-bottom: 10px solid #F0F3F5;
}



/* 
 * CHG - make 4 column into 3 column 
 */
 .px-number-btm-blk3 ul {
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
}

.px-number-btm-blk3 li h4 {
    font-size: 14px;
    color: #000;
    font-weight: 500;
}

.px-number-btm-blk3 li p {
    font-size: 10px;
    color: #ABABAB;
    font-weight: 400;
}

.px-number-btm-blk3 ul li {
    width: 33%;
}

/* CHG - 50% Column */
.px-number-btm-blk3 li.li2 {
    width: 50% !important;
}

.px-number-btm-blk3 {
    border-top: 1px solid #D4D4D4;
}
 /* 
 * END CHG - make 4 column into 3 column 
 */

.rmp-inpt-select-actions {
    margin: 0 15px;
    padding-bottom: 25px;
}

.select-itm.status {
    height: 60px;
    margin-bottom: 25px;
}

.rmp-btm-numb-bx {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rmp-btm-numbes-boxs {
    background: #fff;
    padding: 0 15px;
}

.rmp-btm-numb-bx h6 {
    font-size: 12px;
    color: #3c3c3c;
    font-weight: 400;
    text-align: center;
    border: 1px solid #D0D0D0;
    border-radius: 30px;
    padding: 3px 15px;
    font-weight: 500;
    margin-bottom: 15px;
    width: 70px;
    

}

.rmp-btm-numb-bx p {
    font-size: 12px;
    color: #3c3c3c;
    font-weight: 400;
    margin: 0;
    line-height: 22px;
    height: 22px;
    margin-bottom: 15px;
    

}

.rmp-btm-numb-bx h4 {
    font-size: 12px;
    color: #3c3c3c;
    font-weight: 400;
    white-space: nowrap;
    /*max-width: 80px;
    min-width: 74px;*/
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    text-align: center;

}

.rmp-btm-numb-bx h4 span {
    display: block;
    font-size: 10px;
    color: #8A8A8A;
    font-weight: 400;
    margin-top: 3px;

}

.rmp-nmb-itms {
    padding: 25px 0;
    border-bottom: 1px solid #D4D4D4;
}

.rmp-btm-numb-bx {
    padding-bottom: 15px;
}

.rmp-btm-numb-bx:last-child {
    padding-bottom: 0;
}

.rmp-btm-numb-bx a {
    font-size: 12px;
    color: #FF6D6B;
    font-weight: 500;
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 15px;

}

.rmp-btm-numb-bx div:last-child a {
    justify-content:flex-end;
}

.rmp-btm-numb-bx a img {
    margin-left: 5px;
}

.rmp-filter-actions {
    padding: 0 15px;
}

.rmp-filter.merchant {
    margin-right: 5px;
}

.rmp-filter.sub-category {
    margin-right: 5px;
}

.rmp-src-btn {
    width: 50px;
    height: 60px;
    flex: 0 0 50px;
}

/*--===== completed lavel area =====*/
.rmp-nmb-itms:last-child {
    border: none;
}

.app-footer-blk {
    position: fixed;
    z-index: 9999;
}


/*To prevent auto-zoom in Safari*/
.safari input[type='text'] {
  font-size: 16px;
}

.px-lgn-img{
    height: 47vh;
    background: url(../img/lg-bg.svg);
    background-size: cover;
    background-position: center bottom;
}

.px-lgn-img img {
    width: 100%;
    padding: 0;
}

.popup-promosi-tur-dubai-inr {
    height: auto;
}

.popup-promosi-tur-dubai-inr ul {
    overflow-y: scroll;
    height: auto;
    background: #ffff;
    padding-bottom: 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

}

.rmp-product-details-popup {
    height: 90vh;

}

.px-more-content-details {
    overflow-y: scroll;
    height: 100px;
    background: #ffff;
    padding-bottom: 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

}


.rmp-filter-pin-action.ct-pin-action h4 {
    flex: 0 0 150px;
}

@media (min-width: 500px) and (max-width: 1024px) {

.dsh-username,.dsh-account-name{
    width: 49%;
    }

.dsh-username img,.dsh-account-name img{
    width: 100%;
    border-radius: 5%;
    }    

.dsh-username .detail, .dsh-account-name .detail{
    position: absolute;
    padding: 25px;
    font-size: 16px;
    color: #02181F;
    word-break: break-word;
    line-height: 1.5;
    }

}


@media (max-width:992px) {

    .login-pg {
        height: auto;
        overflow: hidden;
    }

    .px-lgn-img {
        /**height: 185px;**/
        margin-bottom: 20px;
    }

    .auth-login-itm {
        margin: 20px 25px;
    }

    .px-lgn-img img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: 0 0;
    }
}

@media (min-width: 350px) and (max-width: 375px) {
    .px-lgn-img{
        height: 40vh;
    
    }

    .rmp-product-number .nice-number {
        width: 90px;
    }
    
    .add-crt-btn {
        width: 90px;
        font-size: 11px;
    }

    .plus-btn{
        top: 10px;
    }


}

@media (min-width: 320px) and (max-width: 349px) {
    .px-lgn-img{
        height: 40vh;
    
    }

    .rmp-product-number .nice-number {
        width: 80px;
    }
    
    .add-crt-btn {
        width: 80px;
        font-size: 11px;
    }

    .plus-btn{
        top: 10px;
    }


}


.lapora-lists {
  justify-content: space-between;
}
.lapora-lists li {
  width: auto !important;
}


.dashboard-header-blk.sticky {
  padding-bottom: 0;
}
.dashboard-header-blk {
  transition: .8s;
}.sub-menu {
    display: none;
}

.dsh-tp-info h2.font-smaller{
    font-size: 28px;
}

.dsh-tp-info h2{
    transition: .8s;
}

/*--===== start sidbeabr area =====*/
    
.sidebar-logo{
}

.sidebar-logo img{
    margin: auto;
    display: block;
    width: 150px;
    padding: 20px;
}

.sidebar-area.active {
/*    right: 0;*/
    left: 0;
}
.sidebar-area {
  position: fixed;
  top: 0;
  /*  right: -100%;*/
  left: -100%;
  height: 100%;
  width: 300px;
  background: #0B6B71;
  z-index: 99999;
  transition: .5s;
  overflow: auto;
}

.off-canvas-menu-overlay {
  height: 100%;
  width: 100%;
  background: #0000008a;
  position: fixed;
  z-index: 99999;
  cursor: pointer;
  transition: .3s;
  opacity: 0;
  visibility: hidden;
}
.off-canvas-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.sid-mnu li a {
  display: flex;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  padding: 20px 0;
  align-items: center;
}

.sid-mnu .sub-menu {
    padding-left: 25px;
    padding-right: 10px;
}

.logout-text {
    /*border-top: 1px solid rgba(255, 255, 255,0.5);
    margin-top: 20px;
    padding-top: 10px;*/
}
.logout-text a {
    display: flex;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    padding: 20px 0;
    align-items: center;
}
.logout-text a img {
    margin-right: 8px;
    color: #fff;
    width: 16px;
    height: 16px;
}
.sid-mnu .menu li > a {
  text-transform: uppercase;
  position: relative;
}

.sid-mnu .menu li > a .expand-button{
    position: absolute;
    right: 25px;
}

.sid-mnu .menu li > a .expand-button i{
     transform: rotate(270deg);
}

.sid-mnu .menu li > a.rotate-arrow .expand-button i{
    transform: rotate(0deg);
}

.sid-mnu li a img {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.sid-mnu li .sub-menu a {
  text-transform: capitalize;
  opacity: .6;
}
.sid-mnu li .sub-menu a:hover, .sid-mnu li.acitve  a {
  opacity: 1;
}.sid-mnu ul li.active li a {
    opacity: 1;
}
.sidebar-menu.hide-scroll {
  overflow-y: scroll;
  height: 100%;
}
.sid-mnu {
  padding-bottom: 50px;
  padding-left: 30px;
}

.menu-close {
  position: absolute;
    left: 0;
    top: 10px;
    height: 25px;
    width: 25px;
    background: #AE0909;
    text-align: center;
    line-height: 25px;
    font-size: 18px;
    cursor: pointer;
    color: #fff;
   
    opacity: 1;
    transition: .3s;
}



/* Modal Bootstrap Dialog */

.modal-open {
  overflow: hidden;
}

.modal-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  display: none;
  overflow: hidden;
  outline: 0;
  background:rgba(0,0,0,0.5);
}

.modal-open .modal-container {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-container .modal-dialog {
  position: relative;
  width: auto;
  /* margin: 0.5rem auto; */
  pointer-events: none;
   margin: 140px auto;
}

/*.modal-full-width .modal-dialog {
    max-width: 90%;
    width: 100%;
    overflow-x: auto;
}*/

.modal-full-width .modal-dialog {
    max-width: 90%;
    width: 100%;
    overflow-x: auto;
    height: auto;
    max-height: 90vh;
    min-height: 50vh;
    overflow: scroll;
    display: flex;
    align-items: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.modal-container.fade .modal-dialog {
 transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: translate(0,-25%);
    transform: translate(0,-25%);
}

.modal-container.fade.in .modal-dialog {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}

.modal-container.show .modal-dialog {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.modal-container .modal-dialog-centered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - (0.5rem * 2));
}

.modal-container .modal-content {
    position: relative;
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 15px;
    outline: 0;
    max-height: 90vh;
    overflow: auto;
}


/*
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}
*/
.modal-container .modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  background: #fff;
    color: #222;
    padding: 15px 25px;
}

.modal-container .modal-header .close {
  padding: 1rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-container .modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-container .modal-body {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-container .modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid #e9ecef;
}

.modal-container .modal-footer > :not(:first-child) {
  margin-left: .25rem;
}

.modal-container .modal-footer > :not(:last-child) {
  margin-right: .25rem;
}

.modal-container .modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-container .modal-dialog {
    max-width: 600px;
    margin: 4.75rem auto;
  }
  
  .modal-container .modal-dialog-centered {
    min-height: calc(100% - (1.75rem * 2));
  }
  .modal-container .modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {
  .modal-container  .modal-lg {
    max-width: 800px;
  }
}

/* .modal-container .modal-content {
    
    background-color:rgba(249,214,214,1);
    padding:20px;
   
} */
.modal-container .modal-header {
    border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;    
    background: #F5F5F5;
    color:#222;
    padding: 15px 25px;
}
.modal-container .modal-header button { color:#222;}
.modal-container .modal-footer {
    border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    background: #F5F5F5;
}

.modal-container .modal-header .modal-title {
    color:#333; 
    font-size:16px; 
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
}

.modal-container .modal-body {
    padding: 0px;
    /*background-color:#fff;  */
}
.modal-xlg {
    width: 1000px;
}

@media only screen and (max-width: 1024px) {
    .modal-xlg {
        width: auto;
        margin-left: 15px;
        margin-right: 15px;
    }
}

.modal-container .btn
{
    display: inline-block;
     font-weight: 400; 
     text-align: center; 
     white-space: nowrap; 
    vertical-align: middle; 
     -webkit-user-select: none; 
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none; 
     border: 1px solid transparent; 
     padding: .375rem .75rem; 
     font-size: 12px; 
     line-height: 1.5; 
     border-radius: .25rem; 
     transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; 
}

.btn-danger {
    background-color: #b64645;
    border-color: #b64645;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
    background-color: #a43f3e;
    border-color: #a43f3e;
}

.modal-container .label {
    display: inline;
    padding: .3em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    align-self:center;
}

.modal-container .label-success{
background-color: #95b75d;
}

#myModalLabel span:first-child{
    line-height:16px;
    align-self:center;
}

.modal-container button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    cursor: pointer;
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}
    
.bg_f2{
background-color:#f2f2f2;
}

.modal-container table.footable, .modal-container table.footable-details {
    position: relative;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

.modal-container .table-bordered {
    border: 1px solid #ddd;
}

.modal-container .footable-header {
    background: #f1f5f9;
    color: #56688A;
    font-size: 12px;
}

/* CHG- REMOVE footable-header-th from this style coz color hide the text */
.modal-container tbody td,
.modal-container tfoot th { 
    color: #313131;
    font-size: 12px;
    padding: 8px;
    line-height: 1.42857143;
    border :1px solid #ddd;
}

/* CHG- duplicate from above style but didnt include the color. */
.modal-container tfoot th,
.footable-header th {
    color: #313131;
}

.modal-container .table-striped > tbody > tr:nth-child(odd) > td, 
.modal-container .table-striped > tbody > tr:nth-child(odd) > th {
    background: #F8FAFC;
}

.btn2 {
    color: #fff;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn-info2 {
    background-color: #3fbae4 !Important;
    border-color: #3fbae4 !Important;
    cursor:pointer;
}
.text-left {
    text-align:left;
}
.show-mobile { display:none; }
@media (max-width:991px) {
    .text-right-md {
        text-align:right !Important;
    }
}


@media (max-width:767px) {
    .text-right-xs {
        text-align:right !Important;
    }
    
    .show-mobile { display:block; }
}



  /*--===== completed sidbeabr area =====*/



/*View Stockist User Page Css Start*/
.view-user {
    background: #fff;
    padding: 30px 30px 10px 30px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.16);
    box-shadow: 0px 0px 6px rgba(0,0,0,0.16);
    margin-bottom: 40px;
}
.view-user .view-user-single {
    margin-bottom: 20px;
    position: relative;
}
.view-user .view-user-single a {
    font-size: 10px;
    color: #D51818;
    display: inline-block;
    position: absolute;
    bottom: 2px;
    right: 0px;
}
.view-user .view-user-single p {
    font-size: 14px;
    color: #707070;
    margin-bottom: 5px;
}
.view-user .view-user-single span {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    display: block;
}
.view-user .view-user-single span.c-green {
    color: #00C569;
}
.view-user.view-user-2 {
    padding: 0px;
    background: none;
    box-shadow: none;
    margin-bottom: 10px;
}
/*View Stockist User Page Css End*/


/* Stockist User Listing Page Start */

.px-number-bxs2 .bxs-flx {
    display: flex;
    justify-content: space-between;
    align-items: center;    
}

.px-number-bxs2 .bxs-flx a {
    font-size: 12px;
    font-weight: 500;
    color: #FF6D6B;
    /*
    flex: 0;
    */
}
.px-number-bxs.px-number-bxs2 ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0px;
    border: 0px;
}
.px-number-bxs.px-number-bxs2 ul li {
    width: inherit;
}
.px-number-bxs.px-number-bxs2 ul.reset-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0px;
    border-bottom: 1px solid #D4D4D4;
}
.px-number-bxs.px-number-bxs2 ul.reset-btn li {
    width: 48%;
}
.px-number-bxs.px-number-bxs2 ul.reset-btn li a {
    font-size: 14px;
    color: #fff;
    height: 40px;
    width: 100%;
    display: block;
    line-height: 40px;
    background: #AEAEAE;
    border-radius: 5px;
    text-align: center;
}
.px-number-bxs-wrapper {
    background: #fff;
    padding-bottom: 80px;
}
.px-number-bxs-wrapper .pt-0 {
    padding-top: 0px !important;
}
@media only screen and (max-width: 767px) {
    .px-number-bxs.px-number-bxs2 ul.reset-btn li a {
        font-size: 12px;
        height: 30px;
        line-height: 30px;
    } 
}
/* Stockist User Listing Page End */


/* Daily Bonus Statement Page Start */
.bonus .select-itm .current {
    margin-top: 0px;
}
.bonus h4 {
    font-size: 14px;
    color: #707070;
    margin-bottom: 5px;
}

.bonus-profile {
    text-align: center;
}
.bonus-profile h4 {
    font-size: 16px;
    font-weight: 500;
    color: #E54646;
    display: inline-block;
    text-align: center;
    padding: 25px 0px;
    margin: 0px;
}
.bonus-profile h4 img {
    margin-right: 5px;
}
.daly-text {
    text-align: center;
    padding: 25px 0px;
    border-top: 1px solid #d4d4d4;
}
.daly-text span {
    font-size: 16px;
    font-weight: 400;
    color: #28A9E2;
    display: block;
}
.daly-text span.date {
    margin-top: 15px;
    font-weight: 500;
}
.common-bonus-title h3 {
    font-size: 14px;
    font-weight: 500;
    color: #626262;
    padding: 25px;
    margin: 0px;
    background: #F8F8F8;
    text-transform: uppercase;
    text-align: left;
}
.bonus-summery li.net {
    position: relative;
    margin-bottom: 34px;
}
.bonus-summery li.net:before {
    position: absolute;
    content: '';
    height: 1px;
    width: 100%;
    background: #d4d4d4;
    left: 0px;
    bottom: -17px;
}
.bonus-summery li .f-500 {
    font-weight: 500;
}
.flex-2col-sidetoside li div:nth-child(3) {
    font-weight: 500;
    color: #606060;
}
.flex-2col-sidetoside.volume {
    text-align: center;
}

.flex-2col-sidetoside.volume li {
    display: inherit;
}
.flex-2col-sidetoside.volume li div {
    display: inline-block;
    font-size: 12px;
    font-weight: 400 !important;
    color: #28A9E2;
    text-align: center;
}
.flex-2col-sidetoside.volume li div:last-child {
    border-right: 0px;
    padding-right: 0px;
    float: right;
}
.flex-2col-sidetoside.volume li div:first-child {
    padding-left: 70px;
}
.sponsor-bonus .px-number-bxs.px-number-bxs2 ul li {
    text-align: center;
}
.sponsor-bonus .px-number-bxs.px-number-bxs2 {
    border-bottom: 1px solid #d4d4d4;
    padding-top: 15px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}
.sponsor-bonus {
    padding-bottom: 0px;
}
.sponsor-bonus .px-number-bxs.px-number-bxs2.no-border-b {
    border-bottom: 0px;
}
.bonus-summary-main .rmp-filter-results-btm-blk {
    padding-top: 10px;
    padding-left: 0px;
}
.bonus-summary-main .px-number-btm-blk ul {
    align-items: center;
    padding: 0px 25px;
}
.bonus-summary-main .px-number-btm-blk ul li {
    padding-top: 5px;
    text-align: center;
}
.bonus-summary-main .px-number-btm-blk li p {
    margin-bottom: 0px;
}


/* Daily Bonus Statement Page End */


/* Unilevel Bonus Statement Page Start */
.sponsor-bonus a.level {
    text-decoration: underline;
    font-size: 12px;
    color: #808080;
    font-weight: 400;
    flex: 1;
    text-align: center;
}
.sponsor-bonus a.level.pl-35 {
    padding-left: 35px;
}
.sponsor-bonus a.level.pl-25 {
    padding-left: 25px;
}
.sponsor-bonus a.level.pl-20 {
    padding-left: 20px;
}
.sponsor-bonus a.level.ml--45 {
    margin-left: -45px;
}
.ml--45 {
    margin-left: -35px; 
}
.sponsor-bonus a.level.ml--20 {
    margin-left: -20px;
}
.no-bb {
    border-bottom: 0px !important;
}
/* Unilevel Bonus Statement Page End */


/* Stock Movement Report Page Start */
.movement-report .rmp-filter-pin-action h4 {
    min-width: 100px;
}
.border-double {
    border-top: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
}
.rmp-level-info .remark-txt {
    background: #f8f8f8;
    border-radius: 5px;
    padding: 10px 15px;
    width: 100%;
    margin-top: 5px;
}
.rmp-level-info .remark-txt span {
    font-size: 10px;
    color: #AFAFAF;
    display: block;
    margin-bottom: 5px;
}
.rmp-level-info .remark-txt span h6 {
    font-size: 12px;
    font-weight: 400;
    color: #000;
    margin: 0px;
}
.nice-select::after,
.select-itm .ico-arrow-down {
    height: 10px;
    width: 10px;
    border-color: #47BCF1;
    margin-top: -8px;
}
/* Stock Movement Report Page End */


/* Stock Summery Page Start */
.rmp-btm-numbes-boxs.stock-summery-boxs {
    padding: 0px;
    border-top: 1px solid #d4d4d4;
}
.px-number-btm-blk.stock-summery-number {
    padding: 0px 10px;
    border-top: 0px;
}
/* Stock Summery Page End */

.img-boxs-popup {
    position: relative;
}
.img-boxs-popup span {
    font-size: 20px;
    font-weight: 500;
    color: #ffe480;
    position: absolute;
    top: 45%;
    transform: translate(-50%,-50%);
    left: 50%;
    display: inline-block;
    text-align: center;
    width: 300px;
}


/* CHG - added for annual rank name */
.img-boxs-popup span.annual-rank-name {
    font-size: 14px;
    font-weight: 300;
    /* left: 15%; */
    text-align: left;
    width: 80%;
}

/* CHG - added for rusia name */
.img-boxs-popup span.rusia-name {
    font-size: 14px;
    font-weight: 300;
}

.country-main {
    position: relative;
    z-index: 2;
}
.country-main span.country {
    position: relative;
    z-index: 2;
    padding-left: 15px;
    padding-top: 10px;
}
.country-main:before {
    position: absolute;
    content: '';
    top: -8px;
    left: 0px;
    height: 68px;
    width: 100%;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #DADDE0;
    z-index: 1;
}
.country-main:focus:before {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.niceCountryInputSelector span {
    color: #000;
    font-weight: 500;
    font-size: 14px;
}
    @media only screen and (max-width: 2560px) {
        .niceCountryInputMenuDropdown {
            margin-top: -15px;
            margin-right: -4px;
    }
}
.t-right {
    text-align: right;
}
.rmp-filter-pin-actions.movement-report {
    margin-top: 25px;
}

.tree-legend{
     padding-top: 20px;
    padding-bottom: 10px;
    display: inline-block;
}

.tree-legend div{
    width: 16.6%;
    float: left;
    text-align: center;
}

.tree-legend div img{
    max-width: 50%;
    height: auto;
}

.tree-legend div span{
    font-size: 10px;
    font-weight: normal;
    line-height: 12px;
    color: #7e7e7e;
    display: block;
    margin-top: 5px;
    margin-bottom: 15px;
}

/* loading ball animation */

.rmp-products-container{
    margin: 0 auto;
}

.loading {
    opacity: 0;
    display: flex;
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity .3s ease-in;
    /* CHG : add z-index to make the loading always on top, solve shopping cart */
    z-index: 999;
}

.loading.show {
    opacity: 1;
}

.ball {
    background-color: #777;
    border-radius: 50%;
    margin: 5px;
    height: 10px;
    width: 10px;
    animation: jump .5s ease-in infinite;
}

.ball:nth-of-type(2) {
    animation-delay: 0.1s;
}

.ball:nth-of-type(3) {
    animation-delay: 0.2s;
}

@keyframes jump {
    0%, 100% {
        transform: translateY(0);
    }
    
    50% {
        transform: translateY(-10px);
    }
}

.rmp-filter-pin-action>input[type="date"]::-webkit-calendar-picker-indicator {
  right: 10px;
  opacity: 0.5;
  position: absolute;
  right: 70px;
}


.rmp-filter-pin-actions .ct-pin-action select{ 
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    position: relative;
    background: transparent;
    z-index: 2;
    font-family: 'Roboto', sans-serif;
      } 

select:focus {
  outline: none;
}




/* css added 7/2 */
.txt-black{
    color: #000;
}
.srch-rslt p {
    font-size: 14px;
    margin-bottom: 10px;
}
.srch-rslt p:last-child {
    margin-bottom: 0;
}
.srch-rslt {
    padding: 10px;
    text-align: center;
    margin-top: 20px;
}
.srch-rslt a,
.px-number-bxs li a{
    color: #20ACEA;
    text-decoration: underline;
}

.ntk-rmp-numbes-bx .rmp-btm-numb-bx h6{
    font-weight: 400;
}
.rmp-btm-numb-bx h3,
.lapora-lists h3{
    font-size: 14px;
    font-weight: 500;
    color: #848484;
}
.ntk-rmp-numbes-bx .rmp-nmb-itms{
    border-bottom: 1px solid #D4D4D4;
}
.ntk-rmp-numbes-bx .rmp-nmb-itms:last-child{
    border: 0;
}
.ntk-px-btn-blk {
    padding-bottom: 20px;
}
.report-summary-main .px-number-bxs.px-number-bxs2 ul li{
    width: 33.33%;
    margin-bottom: 18px;
}
.report-summary-main .px-number-bxs h4,
.product-report-summary-main .px-number-bxs h4{
    color: #000000;
}
.product-report-summary-main .px-number-bxs.px-number-bxs2 ul li:first-child,
.product-report-summary-main .px-number-bxs.px-number-bxs2 ul li:nth-child(2),
.report-summary-main .px-number-bxs.px-number-bxs2 ul li:first-child{
    text-align: left;
}
.product-report-summary-main .px-number-bxs.px-number-bxs2 ul li:last-child,
.report-summary-main .px-number-bxs.px-number-bxs2 ul li:last-child{
    text-align: right;
}

.report-summary-main .px-number-bxs ul {
    padding-top: 15px;
}
.report-summary-main .px-number-bxs:last-child {
    border-bottom: 0;
}

.appointment-summary-wrap .px-number-bxs.px-number-bxs2 ul li{
    margin-bottom: 8px;
}
.appointment-summary-wrap .px-number-bxs.px-number-bxs2{
    padding-bottom: 10px;
}
.appointment-summary-wrap .px-number-bxs h3{
    margin-bottom: 0px;
}


/* wallet */
.wllt-box > img{
    margin-bottom: 20px;
}
.wllt-box {
    text-align: center;
    margin: 18px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,.16);
    padding: 20px;
  }
  .wllt-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    align-items: center;
    text-align: left;
  }
  .wllt-item h4 {
    margin: 0;
    color: #AFAFAF;
    font-size: 22px;
  }
  .wllt-item h3 {
    font-weight: 500;
    font-size: 38px;
    color: #FF5656;
  }
  .wllt-item p {
    font-size: 14px;
    color: #AAAAAA;
  }
  .wllt-item b {
    font-size: 16px;
    color: #626262;
  }

  /* verify */
  .verify-bx {
    padding: 20px;
    background: #fff;
    border-bottom: 10px solid #F0F3F5;
}
  .verify-bx h5 {
    font-size: 16px;
    color: #000000;
    font-weight: 500;
    border-bottom: 1px solid #D4D4D4;
    padding-bottom: 15px;
  }
  .verify-bx h5 span {
    display: block;
    font-size: 12px;
    color: #FF5656;
    margin-top: 5px;
  }
  .verify-bx > p {
    color: #8F8F8F;
    line-height: 1.8;
    font-size: 12px;
    border-bottom: 1px solid #D4D4D4;
    padding-bottom: 18px;
    margin: 0;
  }
  .verify-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .verify-input h5 {
    margin: 0;
    font-size: 14px;
    color: #000000;
    font-weight: 500;
    padding: 0;
  }
  
   .verify-input h6 {
    margin: 0;
    font-size: 14px;
    color: #000000;
    font-weight: 500;
    padding: 0;
  } 
  
  .verify-input input {
    height: 40px;
    border: 1px solid #B8B8B8;
    border-radius: 5px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500
}
  .verify-input button {
    background: #50E063;
    height: 40px;
    padding: 0 20px;
    border-radius: 5px;
    border: 0;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}
  .verify-input {
    padding: 20px 0;
  }

  .wllt-register-wrap .bxs-flx h2 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
}
.px-number-bxs li a.trash-btn {
    color: #CCCCCC;
    font-size: 22px;
}

.wllt-register-wrap .px-number-bxs.px-number-bxs2 ul li:first-child{
    width: 40%;
}
.wllt-register-wrap .px-number-bxs.px-number-bxs2 ul li:nth-child(2){
width: 50%;
}
.wllt-register-wrap .px-number-bxs.px-number-bxs2 ul li:last-child{
width: 10%;
}
.wllt-register-wrap {
    margin-bottom: 20px;
}
.wllt-register-wrap .sponsor-bonus .px-number-bxs.px-number-bxs2 ul{
    padding-top: 0px;
}
.wllt-register-wrap .sponsor-bonus .px-number-bxs.px-number-bxs2:last-child{
    border: 0;
}

.lst-news-inner h4{
    font-size: 16px;
    color: #444555;
    font-weight: 500;
    margin-bottom: 10px;
}

.lst-news-inner .cal-container{
    display: flex;
}

.lst-news-inner .cal-container img{
    width: 18px;
    margin-right: 10px;
}


.lst-news-inner .cal-container span{
   
    font-size: 14px;
}

.lst-news-inner img{
    width: 100%;
}

.lst-news-inner p{
     font-size: 14px;
     line-height: 24px;
     margin-bottom: 20px;
}

.lst-news-inner li{
     font-size: 14px;
     line-height: 25px;
}

.px-number-bxs .add-right-icon{
    width: 20px;
    margin-left: 10px;
}

.custom-extra-expand-height-break{
   width: 100%;
    min-height: 30px;
    line-height: 14px;
    margin-left: 10%;
    border-radius: 5px;
    font-size: 12px;
    padding: 10px 10px;
    word-break: break-all;
}
@media only screen and (max-width: 320px) and (min-width: 0px)  {
    .p20-15-section-padding{
     padding: 20px 10px 0px 10px;
}
/*--===== disable =====
    .margin-20{
     margin: 10px !important;
}
*/
}

/*--===== start currency popup area =====*/

.p-currency-inr {
    background: #ffffff;
    width: 300px;
    border-radius: 8px;
    height: 580px;
    overflow-y: scroll;
}

.p-currency-inr img {
    box-shadow: 0px 0px 5px rgb(50 50 50 / 38%);
    max-width: 16px;
}

.p-currency-inr h4 {
    font-size: 16px;
    color: #E54646;
    font-weight: 500;
    text-align: center;
    padding: 18px 0;
    border-bottom: 1px solid #EBEBEB;
}

.p-currency-inr ul {
    padding: 0px 15px;
    padding-bottom: 30px;
}

.p-currency-inr li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}


.p-currency-inr li p {
    font-size: 14px;
    color: #AFAFAF;
    font-weight: 400;
    margin: 0;
}

.p-currency-inr li span {
    font-size: 14px;
    color: #626262;
    font-weight: 500;
}

.btm-border {
    border-bottom: 1px solid #D4D4D4;
    padding: 10px;
}

.top-border {
    border-top: 1px solid #D4D4D4;
    padding: 10px;
}

/*--===== completed currency popup area =====*/

/*--===== start new dark grey background header popup area =====*/

.darkgrey-header-popup-template{
    background: #454545;
    width: 90vw;
    border-radius: 8px;
    overflow-y: scroll;
}

.darkgrey-header-popup-template .header{
    width: 100%;
}

.darkgrey-header-popup-template .header .title{
    color: #CECECE;
    text-align: center;
    font-size: 20px;
    padding: 15px;
}

.darkgrey-header-popup-template .content-container{
    padding: 0 15px 20px 15px;
}

/*--===== start new gradient background header popup area =====*/

.gradient-header-popup-template {
    background: #ffffff;
    width: 90vw;
    border-radius: 8px;
    max-height: 500px;
    overflow-y: scroll;
}

.gradient-header-popup-template .header{
    width: 100%;
    height: 140px;
    background: linear-gradient(180deg, rgba(111,88,233,1) 0%, rgba(76,198,206,1) 100%) repeat-x center center;
}

.gradient-header-popup-template .header .title{
    color: #CECECE;
    text-align: center;
    font-size: 20px;
    padding: 15px;
}

.gradient-header-popup-template .header img{
    display: block;
    margin: auto;
}

.gradient-header-popup-template .flex-2col-sidetoside{
    padding: 15px ;
}

.gradient-header-popup-template .flex-2col-sidetoside li{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 12px;
    color: #808080;
}

.gradient-header-popup-template .flex-2col-sidetoside li div:nth-child(2){
    color: #606060;
    font-weight: 500;
}

.gradient-header-popup-template .flex-2col-sidetoside .cr-flag-col{
    display: flex;
}

.gradient-header-popup-template .flex-2col-sidetoside .cr-flag-col img{
    margin: 0 10px; 
    height: 12px;
    box-shadow: 0px 0px 5px rgb(50 50 50 / 38%);
}

.gradient-header-popup-template .qr-image{
    display: block;
    width: 200px;
    height: 200px;
    padding: 10px; 
    margin: auto;
}

.gradient-header-popup-template .qr-code-input{
    background-color: #F3F3F3;
    color: #8A8A8A;
    border: 1px solid #CCCCCC;
    height: 50px;
    display: block;
    font-size: 14px;
    line-height: 50px;
    margin: 0 15px;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
}

.gradient-header-popup-template .qr-code-input span{
    word-break: break-all;
}


/*--===== New Update 200521 =====*/
.txt-maxwidth {
    max-width: 120px !important;
    min-width: 120px !important;
}

.label {
  color: white !important;
  padding: 4px;
  border-radius: 5px;
  text-align: center;
  font-size: 12px;
  margin-left: 0px;
}

.success {background-color: #4A821B;} /* Green */
.info {background-color: #2196F3;} /* Blue */
.warning {background-color: #ff9800;} /* Orange */
.danger {background-color: #f44336;} /* Red */
.other {background-color: #e7e7e7; color: black;} /* Gray */

.rmp-btm-numb-bx2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rmp-btm-numb-bx2 h4 {
    font-size: 14px;
    color: #3c3c3c;
    font-weight: 400;
    max-width: 90px;
    text-align: center;
}

.rmp-btm-numb-bx2 h4 span {
    display: flex;
    font-size: 10px;
    color: #ABABAB;
    font-weight: 400;
    margin-top: 3px;
}

.rmp-nmb-itms2 {
    padding: 25px 0;
}

.security-code {
    width: 100%;
    resize: none;
    border-radius: 10px;
    padding: 15px;
    font-size: 30px;
    color: #E34F1D;
    font-weight: 400;
    background-color: #F4F4F4;
    text-align: center;
}

/*--===== new check box style without white bg box (special on self pick up) =====*/

.ct-checkbox2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    padding: 15px 15px 0px 15px;
    border-radius: 5px;
}

.ct-checkbox2 li {
    flex: 0 0 50%;
    text-align: left;
    position: relative;
    display: flex;
    align-items: center;
    width: 50%;
    margin-bottom: 15px;
}

.ct-checkbox2 li span {
    height: 24px;
    width: 24px;
    min-width: 24px;
    margin-right: 5px;
    border: 1px solid #EE2121;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    color: transparent;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.ct-checkbox2 li img {
    height: 24px;
    width: 24px;
    min-width: 24px;
    margin-right: 5px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.ct-checkbox2 li input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 1;
}

.ct-checkbox2 li p {
    margin: 0;
    font-size: 12px;
    color: #4A4A4A;
    font-weight: 400;
}

.ct-checkbox2 li.active span {
    background: #E94C4B;
    color: #fff;
}

/*  ct-checkbox3  */

.ct-checkbox3 {
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    border-radius: 5px;
}

.ct-checkbox3 li {
    text-align: left;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 6px rgb(175 175 175 / 28%);
    background-color: #d9fbff;
}

.ct-checkbox3 li span {
    height: 24px;
    width: 24px;
    min-width: 24px;
    margin-right: 10px;
    display: inline-block;
    text-align: center;    
    line-height: 24px;
    font-size: 12px;
    color: transparent;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    border: 1px solid #75C2DE !important;
}

.ct-checkbox3 li input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 1;
}

.ct-checkbox3 li h4 {
    margin: 0;
    font-size: 13px;
    color: #4A4A4A;
    font-weight: 500;
}

.ct-checkbox3 li p {
    margin: 0;
    font-size: 11px;
    color: #A4A4A4;
    font-weight: 400;
    line-height: 14px;
}

.ct-checkbox3 li.active {
    background-color: #E4FCF8;
}

.ct-checkbox3 .active span {
    background: #75DEC9;
    color: #fff;
    border: 1px solid #75DEC9 !important;
}

/*  ct-checkbox4  */

.ct-checkbox4 {
    align-items: center;
    flex-wrap: wrap;
    border-radius: 5px;
}

.ct-checkbox4 li {
    text-align: left;
    position: relative;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 20px;
}

.ct-checkbox4 li span {
    height: 24px;
    width: 24px;
    margin-right: 10px;
    display: inline-block;
    text-align: center;    
    line-height: 24px;
    font-size: 12px;
    color: transparent;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    display: flex;
/*    border: 1px solid #ff6d6b;*/
    padding: 8px;
    background: #E2E2E2;
}

.ct-checkbox4 li input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 1;
    padding-left: 10px;
}

.ct-checkbox4 li h4 {
    margin: 0;
    font-size: 13px;
    color: #4A4A4A;
    font-weight: 500;
}

.ct-checkbox4 li p {
    font-size: 14px;
    color: #0B4370;
    margin: 0px;
}

.ct-checkbox4 .active span {
    background: #EF713F;
    color: #fff;
}

.ct-checkbox4 .disable span {
    background: #828282;
    color: #fff;
    border-radius: 8px;
}

.ct-checkbox4 .disable p {
    font-size: 14px;
    color: #E54646;
    margin: 0px;
    line-height: 16px;
}

.dsh-nws2 img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: block;
}

/* MEMBER VERIFICATION */

.custom-radius-card-style02 {
    background: #F4F6FC 0% 0% no-repeat;
    border: 2px dashed #2680EB;
    border-radius: 10px;
}

.custom-file-input-wrapper {
    position: relative;
}

.custom-file-input-wrapper .custom-file-input-button {
    position: relative;
    overflow: hidden;
}

.custom-file-input-wrapper .custom-file-input-button input[type="file"] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    opacity: 0;
}

.custom-radius-card-style01 {
    
    align-self: stretch;
    background-color: #fff;
}

.custom-radius-card-style01 .flex-sb {
   padding: 25px; 
}

.custom-radius-card-style01 .flex-sb div:first-child {
    color: #b9b9b9;

    font-size: 14px;
    width: 40%;
   
}

.custom-radius-card-style01 .flex-sb div:nth-child(2) {
    text-align: left;
    color: #6C6C6C;
    font-weight: 500;
     font-size: 14px;
     width: 40%;
}

.custom-radius-card-style01 .flex-sb div:nth-child(3) {
    width: 20%;
}

.custom-radius-card-style01 .flex-sb div:nth-child(3) img {
    float: right;
    height: 20px;
    
}

.vefify-content{
    display: none;
}

.custom-circle-shape-outer{
    background: #f6f6f6;
    border-radius: 50%;
    width: 20px;   
}

.custom-circle-shape-inner{
    background-color: #ffffff;
    border: 5px solid #F6F4F1;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    margin-top: 0px;
    margin-left: 5px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: -70px;
    text-align: center;
}

.popup-crt-added .for-header{
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.4em;
}

.popup-crt-added .for-content{
    color: #cecece;
    font-size: 14px;
}


/* No Print */

@media print {
  .noPrint{
    display:none;
  }
}

.body-print {
    background-color: #FFFFFF;
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
    

}

/* New 3 Column box 1 Personal Sales Report */

.box-flex-3col-sidetoside{
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
}

.box-flex-3col-sidetoside .col div{
    margin-bottom: 10px;
}

.box-flex-3col-sidetoside .col div:nth-child(1){
    font-size: 13px;
}

.box-flex-3col-sidetoside .col div:nth-child(2){
    font-size: 13px;
}

.box-flex-3col-sidetoside .col div:nth-child(3){
    font-size: 10px;
}
.box-flex-3col-sidetoside .col-v3 div{
    margin-bottom: 20px;
}


.box-flex-3col-sidetoside .col-v3 .custom-pill{
    font-size: 12px;
    color: #3c3c3c;
    font-weight: 400;
    text-align: center;
    border: 1px solid #D0D0D0;
    border-radius: 30px;
    padding: 3px 15px;
    font-weight: 500;
    display: inline-block;
}

.box-flex-3col-sidetoside .col-v3 .btn-more{
    font-size: 12px;
    color: #FF6D6B;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.box-flex-3col-sidetoside .col-v3 .btn-more img{
    margin-left: 5px;
}

.box-flex-3col-sidetoside .col-v3 h5{
    font-size: 12px;
    white-space: nowrap;
    max-width: 83px;
    min-width: 80px;
    min-height: 24px;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 500;
}

.box-flex-3col-sidetoside .col-v3 a{
     color: #3c3c3c;
}

.box-flex-3col-sidetoside .col-v3 span{
    font-size: 10px;
    color: #ABABAB;
    font-weight: 400;
    margin-top: 3px;
}

.box-flex-3col-sidetoside .col-v4 div{
    margin-bottom: 20px;
}

.box-flex-3col-sidetoside .col-v4 h5{
    font-size: 14px;
    white-space: nowrap;
    min-height: 24px;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 400;
    
}
.box-flex-3col-sidetoside .col-v4 .title h5{
    font-size: 14px;
    white-space: nowrap;
    min-height: 24px;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #afafaf;
    font-weight: 400;
}

/* Shipping Insurance label */

.shipping-insurance-require-icon{
    border-radius: 6px;
    padding: 0 5px;
    border: 1px solid #6d0019;
    background-color: #a90329;
    display: inline-block;
    position: absolute;
    left: 140px;
    top: 8px;
}

.shipping-insurance-require-icon img{
     display: inline-block;
     margin-right: 5px;
     width: 16px;
}

.shipping-insurance-require-icon span{
     display: inline-block;
     font-size: 10px;
     color: #ffffff;
     height: 18px;
     line-height: 18px;
}




.box-flex-3col-sidetoside .blue-side-button{
  position: absolute;
  right: -12px;
  width: 28px;
  height: 28px;
  padding-top: 4px;
}

.box-flex-3col-sidetoside .blue-side-button img{
  width: 100%;
}

/*new style for Daily and Yearly earning repot*/
/*custom-curvebox-design-v1*/
@media (max-width: 1920px) and (min-width: 375px) {
.custom-curvebox-design-v1{
    border-radius: 10px;
    border: 1px solid #cacaca;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

.custom-curvebox-design-v1 .header-flexsb{
   display: flex;
   justify-content: space-between;
   height: 36px;
}

.custom-curvebox-design-v1 .cal-ico{
  background:url('../img/calendar.svg') ;
  background-size: contain;
  width: 28px;
  height: 28px;
}

.custom-curvebox-design-v1 .cal-ico .cal-day{
  padding-top: 10px;
  text-align: center;
  font-size: 14px;
  color: #415A6B;
  font-weight: 500;
}

.custom-curvebox-design-v1 .red-pill-button{
    border-radius: 24px;
    border: 1px solid #FF6D6B;
    color: #FF6D6B;
    padding: 3px 10px;
}

.custom-curvebox-design-v1 .content-flexsb{
   display: flex;
   justify-content: space-between;
   
}

.custom-curvebox-design-v1 .content-flexsb>div:nth-child(odd){
    color: #808080;
}

.custom-curvebox-design-v1 .content-flexsb>div:nth-child(even){
    color: #000000;
}

.custom-curvebox-design-v1 .content-flexsb div>div{
    margin-bottom: 10px;
    min-width: 70px;
    font-size: 12px;
}
}

/*custom-curvebox-design-v1 screen 350*/
@media (max-width: 374px) and (min-width: 320px) {
.custom-curvebox-design-v1{
    border-radius: 10px;
    border: 1px solid #cacaca;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

.custom-curvebox-design-v1 .header-flexsb{
   display: flex;
   justify-content: space-between;
   height: 36px;
}

.custom-curvebox-design-v1 .cal-ico{
  background:url('../img/calendar.svg') ;
  background-size: contain;
  width: 28px;
  height: 28px;
}

.custom-curvebox-design-v1 .cal-ico .cal-day{
  padding-top: 10px;
  text-align: center;
  font-size: 14px;
  color: #415A6B;
  font-weight: 500;
}

.custom-curvebox-design-v1 .red-pill-button{
    border-radius: 24px;
    border: 1px solid #FF6D6B;
    color: #FF6D6B;
    padding: 3px 10px;
}

.custom-curvebox-design-v1 .content-flexsb{
   display: flex;
   justify-content: space-between;
   white-space: nowrap;
   
}

.custom-curvebox-design-v1 .content-flexsb>div:nth-child(odd){
    color: #808080;
}

.custom-curvebox-design-v1 .content-flexsb>div:nth-child(even){
    color: #000000;
}

.custom-curvebox-design-v1 .content-flexsb div>div{
    margin-bottom: 10px;
    min-width: 70px;
    font-size: 11px;
}
}

/*custom-curvebox-design-v2*/
@media (max-width: 1920px) and (min-width: 375px) {
.custom-curvebox-design-v2{
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #F0F0F0;
}

.custom-curvebox-design-v2 .header-flexsb{
   display: flex;
   justify-content: space-between;
   height: 36px;
   background-color: #F0F0F0;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   padding-left: 10px;
   padding-right: 10px;
}

.custom-curvebox-design-v2 .cal-ico{
  background:url('../img/calendar_2.svg') ;
  background-size: contain;
  width: 28px;
  height: 28px;
}

.custom-curvebox-design-v2 .cal-ico .cal-month{
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #415A6B;
  font-weight: 500;
}

.custom-curvebox-design-v2 .content-flexsb{
   display: flex;
   justify-content: space-between;
   padding-left: 10px;
   padding-right: 10px;
   white-space: nowrap;
}

.custom-curvebox-design-v2 .content-flexsb>div:nth-child(odd){
    color: #808080;
}

.custom-curvebox-design-v2 .content-flexsb>div:nth-child(even){
    color: #000000;
}

.custom-curvebox-design-v2 .content-flexsb div>div{
    margin-bottom: 10px;
    min-width: 70px;
    font-size: 12px;
}
}

/*custom-curvebox-design-v2 Mobile 350 */
@media (max-width: 374px) and (min-width: 320px) {
.custom-curvebox-design-v2{
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #F8F8F8;
}

.custom-curvebox-design-v2 .header-flexsb{
   display: flex;
   justify-content: space-between;
   height: 36px;
   background-color: #F0F0F0;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   padding-left: 10px;
   padding-right: 10px;
}

.custom-curvebox-design-v2 .cal-ico{
  background:url('../img/calendar_2.svg') ;
  background-size: contain;
  width: 28px;
  height: 28px;
}

.custom-curvebox-design-v2 .cal-ico .cal-month{
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #415A6B;
  font-weight: 500;
}

.custom-curvebox-design-v2 .content-flexsb{
   display: flex;
   justify-content: space-between;
   padding-left: 10px;
   padding-right: 10px;
}

.custom-curvebox-design-v2 .content-flexsb>div:nth-child(odd){
    color: #808080;
}

.custom-curvebox-design-v2 .content-flexsb>div:nth-child(even){
    color: #626262;
}

.custom-curvebox-design-v2 .content-flexsb div>div{
    margin-bottom: 10px;
    min-width: 70px;
    font-size: 11px;
}
}

/*custom-curvebox-design-v3*/
@media (max-width: 1920px) and (min-width: 375px) {
.custom-curvebox-design-v3{
    border-radius: 8px;
    border: 1px solid #E1E1E1;
}

.custom-curvebox-design-v3 .header-flexsb{
   display: flex;
   justify-content: space-between;
   height: 36px;
   background-color: #848E97;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   padding-left: 10px;
   padding-right: 10px;
}

.custom-curvebox-design-v3 .total-ico{
  background: url(../img/i39.svg) no-repeat top center;
  background-size: contain;
  width: 25px;
  height: 25px;
}

.custom-curvebox-design-v3 .total-ico>div{
  margin-bottom: 0px;
  font-size: 10px;
  padding-top: 16px;
  text-align: center;
}

.custom-curvebox-design-v3 .content-flexsb{
   display: flex;
   justify-content: space-between;
   padding-top: 10px;
   padding-left: 10px;
   padding-right: 10px;
   background-color: #fff;
   border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.custom-curvebox-design-v3 .content-flexsb>div:nth-child(odd){
    color: #808080;
}

.custom-curvebox-design-v3 .content-flexsb>div:nth-child(even){
    color: #000000;
}

.custom-curvebox-design-v3 .content-flexsb div>div{
    margin-bottom: 10px;
    min-width: 70px;
    font-size: 12px;
}
}

/*custom-curvebox-design-v3 Mobile 350*/
@media (max-width: 374px) and (min-width: 320px) {
.custom-curvebox-design-v3{
    border-radius: 8px;
    border: 1px solid #E1E1E1;
}

.custom-curvebox-design-v3 .header-flexsb{
   display: flex;
   justify-content: space-between;
   height: 36px;
   background-color: #848E97;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   padding-left: 10px;
   padding-right: 10px;
}

.custom-curvebox-design-v3 .total-ico{
  background: url(../img/i39.svg) no-repeat top center;
  background-size: contain;
  width: 25px;
  height: 25px;
}

.custom-curvebox-design-v3 .total-ico>div{
  margin-bottom: 0px;
  font-size: 10px;
  padding-top: 16px;
  text-align: center;
}

.custom-curvebox-design-v3 .content-flexsb{
   display: flex;
   justify-content: space-between;
   padding-top: 10px;
   padding-left: 10px;
   padding-right: 10px;
   background-color: #fff;
   border-bottom-right-radius: 10px;
   border-bottom-left-radius: 10px;
   white-space: nowrap;
}

.custom-curvebox-design-v3 .content-flexsb>div:nth-child(odd){
    color: #808080;
}

.custom-curvebox-design-v3 .content-flexsb>div:nth-child(even){
    color: #000000;
}

.custom-curvebox-design-v3 .content-flexsb div>div{
    margin-bottom: 10px;
    min-width: 70px;
    font-size: 11px;
}
}

/*--===== start Light Blue background header popup area =====*/

.lightblue-header-popup-template {
    background: #ffffff;
    width: 90vw;
    border-radius: 10px;
    max-height: 500px;
    overflow-y: scroll;
}

.lightblue-header-popup-template .header{
    width: 100%;
    padding: 14px; 
    color: #fff;
    background-color: #42afef;
    text-align: center;
    font-size: 14px;
}

.lightblue-header-popup-template .header .title-with-round-border{
    border: 1px solid #ABDFF7;
    border-radius: 20px;
    display: inline-block;
    padding: 5px 10px;
    font-weight: 500;
    margin-bottom: 5px;
}

.lightblue-header-popup-template .content{
    padding: 0 20px;
    font-size: 14px;
}

.lightblue-header-popup-template .content .flex-sb{
    margin-top: 20px;
    margin-bottom: 20px;
}

.lightblue-header-popup-template .content .flex-sb div:nth-child(2){
    color: #626262;
}

.yearly-bonus-earning-section .box-flex-3col-sidetoside{
    padding-top: 10px;
    padding-bottom: 10px;
}

.double-layer-scroll-disable{
    position: fixed;
    overflow: hidden;
    margin: 0;
}

.special-dynamic-banner .banner-container{
    max-width: 400px; 
    height: 176px; 
    padding: 10px 10px 0 10px; 
    display: flex; 
    justify-content: center;
    align-items: center;
    margin: auto;
}

 @media only screen and (min-width: 376px)  {
    
   .special-dynamic-banner .custom-dialogbox-text-padding{
    padding: 5px 0 0 8px;
    }
}


 @media only screen and (min-width: 351px) and (max-width: 375px)  {
    
   .special-dynamic-banner .custom-dialogbox-text-padding{
    padding: 5px 0 0 4px;
    }
}

 @media only screen and (min-width: 320px) and (max-width: 350px)  {
    
   .special-dynamic-banner .custom-dialogbox-text-padding{
    padding: 5px 0 0 2px
    }
}


/*custom radius shadow box */

.custom-radius-shadow-card{
    padding: 10px;
    box-shadow: 0px 2px 3px #00000029; 
    margin-bottom: 10px;
    border-radius: 8px;
}

.custom-radius-shadow-card .banner-icon{
    display: block;
    margin: 0 auto 10px auto;
}

.auto-placement-msg-box{
    display: none;
}

/* Custom Input number type */

.custom-input-2side-phone-number-type-container{
    display: flex;
}

.custom-input-2side-phone-number-type-container .area-code{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 15px;
    border: 1px solid #DADDE0;
    background-color: #F3F6F9;
    color: #000;
    border-right: 0px;
}

.custom-input-2side-phone-number-type-container .phone-number{
   border: 1px solid #DADDE0;
   width: 100%;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   text-indent: 20px; 
   padding: 10px 0; 
   font-size: 16px; 
}


/*another new warnig message box*/

.warning-msg-box{
    display: flex;
}

.warning-msg-box .icon-area{

    background: #E54646 url('../img/yellow_alert_ico.svg') no-repeat center center;
    min-width: 25px;
    min-height: 100%;
    display: block;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.warning-msg-box .description{
    line-height: 16px;
    border: 1px solid #E18E8E;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 0px;
    width: 100%;
    /*background-color: #fffcfc;*/
}

/*another new warnig message box2*/

.warning-msg-box2{
    display: flex;
}

.warning-msg-box2 .icon-area{

    background: #E54646 url('../img/bank_alert_ico.svg') no-repeat center center;
    min-width: 50px;
    min-height: 100%;
    display: block;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.warning-msg-box2 .description{
    line-height: 16px;
    border: 1px solid #E18E8E;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 0px;
    width: 100%;
    background-color: #fff6f6;
}

/*another new warnig message box - for password - green*/

.warning-msg-box-password{
    display: flex;
}

.warning-msg-box-password .icon-area{

    background: #16b363 url('../img/password_alert_ico.svg') no-repeat center center;
    min-width: 50px;
    min-height: 100%;
    display: block;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.warning-msg-box-password .description{
    line-height: 16px;
    border: 1px solid #16b363;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 0px;
    width: 100%;
    background-color: #f7fff8;
}

/*another new positive message box*/

.positive-msg-box-blue{
    display: flex;
}

.positive-msg-box-blue .icon-area{

    background: #4AB8F7 url('../img/yellow_alert_ico.svg') no-repeat center center;
    min-width: 25px;
    min-height: 100%;
    display: block;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.positive-msg-box-blue .description{
    line-height: 16px;
    border: 1px solid #94D9FF;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 0px;
    width: 100%;
    /*background-color: #f7fdff;*/
}

/*another new positive message box but blue*/

.positive-msg-box{
    display: flex;
}

.positive-msg-box .icon-area{

    background: #1BD741 url('../img/check_alert_ico.svg') no-repeat center center;
    min-width: 25px;
    min-height: 100%;
    display: block;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.positive-msg-box .description{
    line-height: 16px;
    border: 1px solid #1BD741;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 0px;
    width: 100%;
}


/*new total col*/

.total-col{
  font-size: 12px;
  font-weight: 400;
  margin: 0;
  display: flex;
  align-items: center;
}

.total-col img{
  margin-right: 5px;
}

.custom-total-container2>div>div{
  min-height: 40px;
}

.custom-total-container2>div>div h5{
  font-size: 14px;
  white-space: nowrap;
  max-width: 90px;
  min-width: 90px;
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
}

.custom-total-container2>div>div p{
  font-size: 10px;
  color: #8E8E8E;
  font-weight: 400;
}


/*moscow trip exchange*/

.moscow-trip-exchange-page-container .banner{
    background: url('../img/ms_bg_inner.jpg');
    height: 100px;
    background-size: 100%;
}

.moscow-trip-exchange-page-container .content-container{
    height: auto;
    width: 100%;
    top: 160px;
}

.moscow-trip-exchange-page-container .profile-icon{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 120px;
}

.moscow-trip-exchange-page-container .package-selection-container{
   /* border-radius: 5px;*/
   border-top-left-radius: 5px;
  border-top-right-radius: 5px;

}

.moscow-trip-exchange-page-container .package-selection-container .header{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.moscow-trip-exchange-page-container .package-selection-container .content{
    border: 1px solid #DADDE0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

/* Samurai Event */

.samurai-event-page-container .banner img{
   width: 100%;
   display: block;
}

.samurai-event-page-container .content-container{
    height: auto;
    width: 100%;
    top: 0;
    position: relative;
}

.samurai-event-page-container .profile-icon{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: -40px;
    width: 80px;
}


/*dubai trip exchange*/

.db-trip-exchange-page-container .content-container{
    height: auto;
    width: 100%;
    top: 160px;
}

.db-trip-exchange-page-container .profile-icon{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 120px;
}

.db-trip-exchange-page-container .package-selection-container{
   /* border-radius: 5px;*/
   border-top-left-radius: 5px;
  border-top-right-radius: 5px;

}

.db-trip-exchange-page-container .package-selection-container .header{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.db-trip-exchange-page-container .package-selection-container .content{
    border: 1px solid #DADDE0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

/*turkey trip exchange*/

.tk-trip-exchange-page-container .banner{
    height: 100px;
    background-size: 100% !important;
}

.tk-trip-exchange-page-container .content-container{
    height: auto;
    width: 100%;
    top: 160px;
}

.tk-trip-exchange-page-container .profile-icon{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 120px;
}

.tk-trip-exchange-page-container .package-selection-container{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;

}

.tk-trip-exchange-page-container .package-selection-container .header{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.tk-trip-exchange-page-container .package-selection-container .content{
    border: 1px solid #DADDE0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}


/* Tracking-app-version-container START */

.Tracking-app-version-container .banner{
    background: url(../img/jne_bg.jpg) no-repeat;
    height: 120px;
    width: 100%;
    background-size: 100%;
    position: absolute;
    top: 70px;
    z-index: -1;
}

.Tracking-app-version-container .content-container{
    height: auto;
    width: 100%;
    margin-top: 80px;
}

.Tracking-app-version-container .profile-icon-container{
    height: 74px;
    width: 74px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 120px;
    box-shadow: 0px 0px 6px #00000029;
}

.Tracking-app-version-container .profile-icon-container img{
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/*Another new type of cart item*/

.special-custom-selection-cart{
   padding: 10px 0;   
   border-top: 1px solid #DADDE0;
}

.special-custom-selection-cart:nth-of-type(1){
    border-top: 0px;
}

.special-custom-selection-cart .cart-select-button{
    min-width: 24px;
    height: 24px;
    border: 1px solid #DADDE0;
    border-radius: 50%;
    top: 0;
    bottom: 0;
    margin: auto 10px auto 10px;
}

.special-custom-selection-cart .cart-select-button.active{
    width: 24px;
    height: 24px;
    background: url('../img/check.svg');
    background-size: contain;
}

.special-custom-selection-cart .cart-img{
     position: relative;
      margin-right: 10px;
}

.special-custom-selection-cart .cart-img img{
    width: 90px;
    display: block;
}

.special-custom-selection-cart .cart-img .extra-text-container{
    width: 100%;
    position: absolute;
    bottom: 0;
    font-size: 12px;
    color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #223446;
}

.special-custom-selection-cart .cart-img .extra-text-container img{
   width: 15px;
   margin-right: 5px;
   margin: 5px; 
}

.special-custom-selection-cart .cart-detail{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 10px;
}

.special-custom-selection-cart .cart-description{
    line-height: 16px;
}

.special-custom-selection-cart .nice-number{
    width: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #EEEEEE;
    border-radius: 5px;
    height: 30px;
    border: 1px solid #AAE0F9;
}

.special-custom-selection-cart .nice-number button{
    border: none;
    background: none;
    font-size: 17px;
    text-align: center;
    flex: 1;
}
.special-custom-selection-cart .nice-number input{
    background: #fff;
    height: 100%;
    border: none;
    flex: 0 0 40px;
    max-width: 40px;
}

.special-custom-selection-cart .cart-action-button{
    font-size: 12px;
    line-height: 24px;
    width: 20vw;
    text-align: center;
    background-color: #1BD741;
    border-radius: 5px;
    padding: 3px 4px;
    color: #fff;
}

.red-radio-button-v1 span{
    height: 24px;
    width: 24px;
    min-width: 24px;
    margin-right: 10px;
    border: 1px solid #ff6d6b;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    color: transparent;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.red-radio-button-v1 input{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 1;
}

.red-radio-button-v1.active span{
    background: #E94C4B;
    color: #fff;
}

.custom-tab .header{
    display: flex;
    overflow: auto;
    background-color: #EBF0F2;
    color: #000000;
}

.custom-tab .header .item{
    padding: 10px 25px;
    white-space: nowrap;
    font-size: 14px;
    line-height: 20px;
}

.custom-tab .header .item.active{
    border-top: 4px solid #29B791;
    background: #ffffff;
    padding-top: 6px;
}

.unilevel-sales-report-by-level-tab .content-container .item,.pairing-sales-report-by-level-tab .content-container .item{
    display: none;
}

.unilevel-sales-report-by-level-tab .content-container .item.active,.pairing-sales-report-by-level-tab .content-container .item.active{
    display: block;
}

.total-header {
    background: linear-gradient(180deg, rgb(160 176 197) 0%, rgb(84 88 98) 100%);
    color: #ffffff;
}

@media (min-width:768px){
    .special-fixed75-textoverflow-ellipsis{
    max-width: 35ch;
    }
}

.special-fixed11ch-textoverflow-ellipsis{
    max-width: 11ch;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

@media (min-width:768px){
    .special-fixed11ch-textoverflow-ellipsis{
    max-width: 35ch;
    }
}

.special-fixed75-textoverflow-ellipsis.changetoredbecauseellipsis{
   color: #65778E;
}

.popover-title{
    padding: 8px 8px 2px 8px !important;
    color: #fff;
    font-size: 14px;
    background-color: #254541 !important;
    border: none !important;
    outline: none !important;
    font-family: 'Roboto', sans-serif;
}

.popover-content{
    padding: 4px 8px 8px 8px !important;
    margin: 0 !important;
    color: #D3D3D3;
    font-size: 13px;
    background-color: #254541 !important;
    border: none !important;
    outline: none !important;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    font-family: 'Roboto', sans-serif;

}

.popover{
    border: none !important;
    box-shadow: none;
    max-width: 150px !important;
    padding: 0px !important;
    left: 15px !important;
    outline: none !important;
    background-color: #254541 !important;
    font-size: 0;
    min-width: 150px !important;
}

.popover-custom-left-35pc .popover{
    left: 35% !important;
}

.popover.top>.arrow{
    border: none;
}

.popover.top>.arrow:after {
    bottom: 1px;
    margin-left: -25px;
    content: " ";
    border-top-color: #254541 !important;
    border-bottom-width: 1px;
}

.greentxt{
    vertical-align: top;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #19b48b;
    text-align: right;
}

.greentxt .greenicon {
    font-size: 14px;
    color: #ffffff;
    background-color: #17B48A;
    height: 16px;
    width: 16px;
    line-height: 16px;
    display: inline-block;
    border-radius: 50px;
    margin-left: 5px;
    text-align: center;
}

.bluetxt{
    vertical-align: top;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #1293CC;
    text-align: right;
}

.bluetxt .blueicon {
    font-size: 14px;
    color: #ffffff;
    background-color: #1293CC;
    height: 16px;
    width: 16px;
    line-height: 16px;
    display: inline-block;
    border-radius: 50px;
    margin-left: 5px;
    text-align: center;
}

.subtxt {
    font-size: 11px;
    font-weight: 400;
    padding-right: 22px;
    color: #69737D;
}

.va-top {
    vertical-align: top;
}

.w100px {
    width: 100px;
}

.w150px {
    width: 150px;
}

.acd-arrow{
    background: url('../img/arrow_down_ico.svg');
    width: 24px;
    height: 24px;
    display: block;
}

.acd-arrow.active{
    background: url('../img/arrow_up_ico.svg');
}

.acd-arrow-content{
    display: none;
}

.acd-arrow-content.active{
    display: block;
}

/* CUSTOM CHECKBOX */

.custom-checkbox-container {
  display: block;
  position: relative;
  /*padding-left: 35px;*/
  /*margin-bottom: 12px;*/
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* Group Payment Page Create a custom checkbox */
.custom-checkbox-container .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}

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

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

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

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

/* Style the checkmark/indicator */
.custom-checkbox-container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 8px;
  height: 13px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* completed page button */
.go-to-grouppay-btn {
    border: 2px solid #08B7FC;
    line-height: 45px;
    background-color: #fff;
    color: #343434;
    margin-bottom: 20px;
    font-size: 16px;
    border-radius: 5px;
    width: 100%;
    height: 50px;
    display: block;

}

/* group payment summary total */

.right-total-1 {
    font-weight:  500;
    text-align: right;
    color: #000000;
    padding-right:  5%;
}

.right-total-2 {
    font-weight:  500;
    text-align: right;
    color: #808080;
    padding-top:  5px;
    padding-right:  5%;
    padding-bottom:  10px;
}

 .darkblue-20x20-number-circle-container {
    margin-top: 2px;
    height: 20px; 
    min-width: 20px; 
    border-radius: 50%; 
    background: #2B468A; 
    line-height: 20px;
}

 .white-20x20-number-circle-container {
    margin-top: 2px;
    height: 20px; 
    min-width: 20px; 
    border-radius: 50%; 
    background: #ffffff; 
    line-height: 20px;
}

 .darkblue-20x20-number-square-container {
    margin-top: 5px;
    height: 20px; 
    min-width: 20px; 
    background: #2B468A; 
    line-height: 20px;
}

.order-completed-receipt .top-bg{
    background: url(../img/receipt-bg-top.png) no-repeat bottom center;
    height: 50px;
    width: 100%;
    background-size: contain;
}

.order-completed-receipt .content-bg{
    background: url(../img/receipt-bg-middle.png) repeat bottom center;
    height: auto;
    width: 100%;
    background-size: contain;
}

.order-completed-receipt .bottom-bg{
    background: url(../img/receipt-bg-bottom.png) no-repeat top center;
    height: 50px;
    width: 100%;
    background-size: contain;
}

.sales-downpayment-order-completed-round-corner-blue-border-button{
    border: 2px solid #08B7FC;
    line-height: 45px;
    background-color: #fff;
    color: #343434;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.sales-downpayment-order-completed-round-corner-blue-border-button .icon,.sales-downpayment-order-completed-round-corner-red-button .icon{ 
    width: 18px ;
    height: 18px;
    display: block;
    margin-right: 5px;
}

.sales-downpayment-order-completed-round-corner-red-button{
    line-height: 45px;
    background-color: #BD1010;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.blue-btn-long-v2-icon{
    width: 16px ;
    height: 16px;
    display: block;
    margin-right: 5px;    
}

.blue-btn-long-v2{
    line-height: 45px;
    background-color: #08B7FC;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.blue-outline-btn-icon{
    width: 22px ;
    height: 28px;
    display: block;
    margin-right: 10px; 
    align-items: center;     

}

.blue-outline-btn{
    width: 47%; 
    border: 2px solid #08B7FC;
    line-height: 15px;
    font-size:  14px;
    font-weight:  500;
    text-align: left;
    color: #000000;
}

.payment-channel-icon{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 138px; 
}

.payment-channel-icon-180{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto; 
  height: 40px;
}

.copy-btn {
    width: 70px;
    margin: 10px auto 0 auto;
    padding: 5px;
}

.dsh-trip-exchange {
    padding: 15px;
}

.payment-summary-box{
    border-radius: 6px;
    background: #fff;
    box-shadow: 0px 0px 6px rgb(0 0 0 / 16%);
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
}

.border-curve-left-5px-front{
    border: none;
    outline: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    width: calc(100% - 2px);
    height: 100%;
}

.border-curve-left-5px-back{
    border: solid 1px #DEDEDE; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px;  
    border-right-style: none;
}

.border-curve-right-5px{
    border: solid 1px #DEDEDE; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    background: #F8F8F8;
}

.completed-bg {
    background: url(../img/completed-bg00.png) no-repeat top center;
    height: auto;
    width: 100%;
    background-size: contain;
}

.completed-bg2 {
    background: url(../img/completed-bg01.png) no-repeat top center;
    height: auto;
    width: 100%;
    background-size: contain;
}

.new-green-box{
    background: #0B4956; 
    position: relative;
}

.green-box-text{
    text-indent: 14px;
    min-width:  100px;
}

.green-box-label{
    position: absolute; 
    top: 0; 
    left:0;
}


/* gif class */

.success-animation{
    background: url(../img/sspin_anime.gif) no-repeat top center;
    height: 80px;
    width: 100%;
    background-size: contain;

}

.error-animation{
    background: url(../img/espin_anime.gif) no-repeat top center;
    height: 90px;
    width: 100%;
    background-size: contain;

}

/*11 MAY 2022 added*/

.receipt-background-3col-container {
    padding: 15px 0;
    display: flex;
    justify-content: space-evenly;
}

.receipt-background-3col-container .box-3col{
    border-radius: 10px; 
    border: 1px solid #E6E6E6; 
    padding: 10px; width: 30%; 
    display: flex; 
    flex-direction: column; 
    justify-content: start; 
    align-items: center;
}

.receipt-background-3col-container .box-3col .box-text{
    font-size: 14px;
    color: #626262;
    font-weight: 500;
    margin-top: 10px;
}

.receipt-center-padding{
    font-size: 14px;
    padding: 0 10px;
}

.receipt-installment{
    font-size: 12px;
    color: #999999;
}

 @media only screen and (min-width: 768px)  {
    
    .receipt-center-padding{
    font-size: 14px;
    padding: 0 25px;
}

    .order-completed-receipt .top-bg {
    height: 65px;
}

    .order-completed-receipt .bottom-bg {
    height: 65px;

}
}

.max135{
    max-width: 135px;
}

/*19 MAY 2022 added*/

.max72{
    max-width: 72px;
}

.max165{
    max-width: 165px;
}

.new-darkblue-box{
    background: #005ea9; 
    position: relative;
}

/*23 MAY 2022 added*/

.total-purple-circle-bonus-label{
    font-size: 13px;
    color: #332668;
    border-radius: 15px;
    background-color: #f2f2ff;
    padding: 3px;
    text-align: center;
    margin: auto;
    width: 60%;
    line-height: 16px;
}

.font-force-purple-v1{
    color: #4A2673;
}

.purple-bg-section{
    background-color: #56449B !important;
}

.pt5-lr15-b25{
    padding-top: 5px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 25px;
}

.txt-itm3 h4 {
    font-size: 16px;
    color: #8a8a8a;
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
    margin-bottom: 5px;
}

.txt-itm3 h5 {
    font-size: 16px;
    color: #4D4F51;
    font-weight: 400;
    background-color: #F3F6F9;
    border-radius: 8px;
    padding: 15px;
    line-height: 18px;
}

.txt-itm3 h5 .red {
    font-size: 11px;
    color: #E54646 ;
    font-weight: 400;
    line-height: 14px;
    padding: 3px 0px 3px 0px;
    display: block;
}

.txt-itm3 h5 .title {
    color: #000000 ;
    font-weight: 500;
    display: block;
}

/*25 MAY ADDED*/

.new-input-with-icon-at-the-left{
    width: 100%;
    resize: none;
    height: 50px;
    font-size: 16px;
    color: #000;
    font-weight: 400;
    display: flex;
    justify-content: left;
}

.new-input-with-icon-at-the-left .icon{
    background: #f7f7f6;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    border: 1px solid #DADDE0;
    color: #bebebd;
}

.new-input-with-icon-at-the-left .input-container{
    border: none;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    border: 1px solid #DADDE0;
    border-left: 0;
    width: 100%;
}

.new-input-with-icon-at-the-left .input-container input{
    border: none;
}

.new-input-with-icon-at-the-left .input-container::placeholder {
    color:#797979
}

.bonus-rank-box{
    text-align: center !important;
    margin-right: 20px;
    background: #FAFBFC;
}

.bonus-rank-box .header {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid #56449B;
    background-color: #56449B !important;
    font-size: 13px !important;
    color: #fff !important;
    padding: 5px 10px 5px 10px;
}

.bonus-rank-box .content {
    border: 1px solid #D9D9F4;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 5px;
}

.fast-start-banner-bg{
    background:url('../img/purple_bg_v1.jpg') no-repeat top center;
    background-size: contain;
}


@media (min-width:480px) and (max-width: 2560px){

.fast-start-banner-bg{
    background:url('../img/purple_bg_v2.jpg') no-repeat top center;
    background-size: contain;

}
}

/*another new warning message box - for password - light blue*/

.warning-msg-box-password2{
    display: flex;
    border: 1px solid #C0D2DE;
    background-color: #EDF3FC;
    border-radius:  5px;
}

.warning-msg-box-password2 .icon-area{

    background: url('../img/warning2_ico.svg') no-repeat center center;
    min-width: 55px;
    min-height: 100%;
    display: block;
}

.warning-msg-box-password2 .description{
    line-height: 18px;
    border-left: 0px;
    width: 100%;
    color: #122643;
    padding: 15px 15px 15px 0px;

}

/*Dashboard blinking expired style on box*/

      @keyframes blinking {
        0% {
          background-color: red;
        }
        50% {
          background-color: orange;
        }       
        100% {
          background-color: red;
        }
      }
      #blink {
        
        font-size:12px;
        font-weight: 500;
        color: #FFFFFF;
        padding:3px;
        animation: blinking 1.2s infinite;
        display: inline;
        border-radius:3px;
        vertical-align: top;
        margin-right: 2px;
      }

.fast-start-label{
        font-size:14px;
        font-weight: 500;
        color: #FF0000;
        display: block;
        align-items: center;
        text-align: right;
        padding-bottom:  20px;
        white-space: nowrap;
}

.fast-start-label-normal{
        font-size:14px;
        font-weight: 500;
        color: #000000;
        display: block;
        align-items: center;
        text-align: right;
        padding-bottom:  20px;
        white-space: nowrap;
}


.qualify-ico{

    position: absolute;
    right: -12px;
    width: 25px;

}

/* 09-06-22 Added */

.flex1{
    flex: 1;
}

.flex40{
    flex: 0 0 40%;
}

.pside-l0r5{
    padding-left: 0px;
    padding-right: 5px;
}

.pside-l0r15{
    padding-left: 0px;
    padding-right: 15px;
}

.width-33{
    width: 33.33%;
}

.width-50{
    width: 50%;
}

/*22-07-22 added*/
/*STEP VERTICAL LINE*/

.gradient-lightgray-section{
    background: transparent linear-gradient(180deg, #D5DBE6 10%, #ffffff 50%) 0% 0% no-repeat padding-box;
}

.gradient-purple-blue-section{
    background: transparent linear-gradient(180deg, #7A007D 0%, #16125E 100%) 0% 0% no-repeat padding-box;
}

.step-vertical-line-item {
  position: relative;
}

.step-vertical-line-item:after {
  content: ' ';
  position: absolute;
  display: block;
  top: 16px;
  right: 50%;
  bottom: 1px;
  left: 10px;
  height: 100%;
  width: 1px;
  background-color: rgb(255 255 255 / 100%);
  z-index: 0;
}

.grey-bottom-action{
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    margin: 1px;
    background-color: #f8f8f8;
    padding:  10px 10px 0px 10px;
}
   
/*030822 ADDED  */  
/*SHOP NOW*/

.shop-now-option{
    display: flex;
    justify-content: space-between;
}

.shop-now-option .radio-button{
    position: relative;
    padding: 20px 8px 20px 8px;
    border-radius:  10px;
    border: 2px solid #4AB8F7;
}

.shop-now-option label input[type="radio"]{
    opacity: 0;
}

.shop-now-option .top-correct-icon{
    position: absolute; 
    top: -25px; 
    left: 50%; 
    transform: translate(-50%,0);
    opacity: 0;
}

.shop-now-option .radio-button .cart-icon .grey-cart{
    display: block;
    margin: auto;
}

.shop-now-option .radio-button .cart-icon .white-cart{
    display: none;
}

.shop-now-option .description-title{
    font-size: 12.5px;
    color: #383b41;
    margin-top: 10px;
    margin-bottom: 5px;
}

.shop-now-option .description-content{
    font-size: 12px;
    color: #797E86;
}

.shop-now-option .radio-button.active {
    background-color: #030251;
}

/*SHOP NOW ACTIVE*/

.shop-now-option .radio-button.active .top-correct-icon{
    opacity: 1;
}

.shop-now-option .radio-button.active .cart-icon .white-cart{
    display: block;
    margin: auto;
}

.shop-now-option .radio-button.active .cart-icon .grey-cart{ 
    display: none;
}

.shop-now-option .radio-button.active .description-title{
    color: #5CD3FF;
}

.shop-now-option .radio-button.active .description-content{
    color: #fff;
}

.custom-placeholder-fs24-bold::-webkit-input-placeholder{
    font-size:  24px;
    font-weight: bold;
    color: #000000;
}

/*Combo package*/

.combo-title{
    width: 100px;
    color: #ED9400;
    margin-bottom: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qty-box{
    background-color: #fdf2e4;
    height: 15px; 
    width: 24px;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.combo-center-section{
    flex-direction: column;
    display: inline-block;
    text-align: left !important;
    justify-content: center;

}

/*Product Browsing Register blinking expired style on box*/

      @keyframes blinking {
        0% {
          background-color: red;
        }
        50% {
          background-color: orange;
        }       
        100% {
          background-color: red;
        }
      }

      #blink {
        
        font-size:14px;
        font-weight: 400;
        color: #FFFFFF;
        padding:3px 6px 3px 6px;
        animation: blinking 1.2s infinite;
        display: inline;
        border-radius:3px;
        vertical-align: top;
        margin-right: 5px;
      }

/* 18/10/22 */
/*--===== Choose Payment Option Checkbox Style =====*/

.choose-payment-option {
    padding: 20px;
}

.choose-payment-option ul {
    background: #fff;
}

/*11-11-22 added*/
/*must change to radio button*/
/*keep input in container*/
/*style to hide ori radio button*/

.choose-payment-option ul li {
   
    text-align: center;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: left;
    position:relative;
}

.choose-payment-option ul li input{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.choose-payment-option ul li .icon{
    padding: 10px;
    background: #D1D3D4;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid #D3D3D3;
    color: #fff;
    font-size: 14px;
    height: 70px;
}

.choose-payment-option ul li .s-label{
   color: #909090;
   background: #fff;
   text-align: left;
   width: 100%;
   border: 1px solid #D3D3D3;
   padding: 10px;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   font-weight: 400;
   font-size: 14px;
   height: 70px;
}

.choose-payment-option ul li.active .icon{
    background: #153D5F;
    border: 1px solid #153D5F;
    display: flex;
    align-items: center;
}

.choose-payment-option ul li.active .s-label{
    background: #2E83CC;
    border: 1px solid  #2E83CC;
    color: #fff;
}


.choose-payment-option ul li i{
    opacity: 0;
}

.choose-payment-option ul li.active i{
    opacity: 1;
}

/*26-10-22 added*/

.popup-birthday-event {
    background: #fff;
    border-radius: 7px;
    padding: 10px;
}

/* 15-11-22 added */

.pagination-container {
    padding: 10px 10px 20px 10px;
}
.pagination {
     overflow: hidden;
     background: #fff;
     border-radius: 5px;
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
     font-size: 1em;
     display: flex;
     position: relative;
     user-select: none;
     margin: auto;
}
.pagination .nav-btn {
     font-family: 'FontAwesome';
     font-weight: 900;
     background: linear-gradient(45deg, #00aaed, #3ac8ff);
     display: inline-block;
     padding: 12px;
     color: #fff;
     z-index: 2;
     cursor: pointer;
     text-shadow: 0 0 0 rgba(0, 0, 0, 0);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
     transition: all 300ms ease;
}
 .pagination .nav-btn:hover {
     background: linear-gradient(45deg, #07baff, #3ac8ff);
     text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
 .pagination .nav-btn.next {
     position: absolute;
     right: 0;
}

 .pagination .nav-btn.prev::before {
     content: "\f053";
      font-family: 'FontAwesome';
}
 .pagination .nav-btn.next::before {
     content: "\f054";
      font-family: 'FontAwesome';
}

 .pagination .nav-pages {
     margin: 0;
     padding: 0;
     left: 0;
     transition: left 300ms ease;
     position: absolute;
     width: max-content;
}
 .pagination .nav-pages li {
     list-style: none;
     display: inline-block;
     padding: 12px 10px;
     border-right: 1px solid #eee;
     color: rgba(0, 0, 0, 0.25);
     text-align: center;
     cursor: pointer;
}
 .pagination .nav-pages li.active, .pagination .nav-pages li:hover {
     color: rgba(0, 0, 0, 0.9);
}

.border-top-radius-left-right-10{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.border-bottom-radius-left-right-10{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.new-blue-box-heading{
    font-size: 15px;
    padding: 4px 16px 4px 16px;
    font-weight: 400;
    color: #2680EB;
    border-radius: 24px;
    border: 1px solid #0093FF;

}

/* 20-02-23 added */

.ct-transfer-balance-quantity-box{
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: flex-start;
}

.ct-transfer-view-details-box{
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: flex-end;
    border-radius:  20px;
    border: 1px solid #C4CBD5;
    padding: 5px 10px 5px 10px;
    font-size: 13px;
}

.ct-transfer-view-details-box a{
    color: #3D495A;
}

.ct-transfer-date-with-icon{
    background-color: #0072BA;
    color: #fff;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    font-size: 16px;
    border-radius: 10px;
}

.ct-transfer-date-with-icon .icon{
    margin-right: 5px;
}

.ct-transfer-field{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #DADDE0;
    padding: 15px 0;
}

.ct-transfer-field img{
    width: 38px;
    height: auto;
}

.ct-filter-pin-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.ct-filter-pin-action img {
    width: 38px;
    height: auto;
}

.ct-filter-pin-action h4 {
    font-size: 15px;
    color: #797979;
    display: flex;
    align-items: center;
    font-weight: 400;
}

.ct-filter-pin-action h4 img {
    margin-right: 10px;
}

.ct-filter-pin-action>input {
    border: none;
    font-size: 16px;
    color: #000;
    font-weight: 600;
    text-align: left;
}
.ct-filter-pin-action .transfer-label{
    font-size: 14px;
    color: #797979;
    display: flex;
    align-items: center;
    font-weight: 400;
    width: 40px;
    flex: 0 0 80px;  
     margin-left: 10px;
}

.ct-filter-pin-action .transfer-input{
    width: 100%;
    height: 40px;  
    border: 1px solid #D9E0E8;
    font-size: 16px;
    color: #505050;
    font-weight: 400;
    padding: 0 15px;
    margin-left: 5px;
    border-radius: 5px;
}

.ct-filter-pin-action h4 {
    font-size: 15px;
    color: #797979;
    display: flex;
    align-items: center;
    font-weight: 400;
    width: 40px;
    flex: 0 0 150px;
    margin: 0px;
}

.ct-filter-pin-actions {
    background: #fff;
    border-radius: 8px;
    padding: 0 12px;
    margin:15px;

}

.focus-input100 {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;

}  

/* 01-03-23  top 10 king sponsor added */

.d-top10-btn-alert {
    background: #db3b39!important;
}

.d-top10-btn-qualify {
    background: #33a118!important;
}

/*Another new type of cart item - trip exchange*/

.tx-cart-itm{
    display: flex;
    padding: 20px;
    background: #fff;
}

.tx-custom-selection-cart{  
    padding: 0px;
}

.tx-custom-selection-cart .cart-img{
    position: relative;
    margin-right: 10px;
    border: 1px solid #DADDE0;
}

.tx-custom-selection-cart .cart-img img{
    width: 90px;
    display: block;
    
}

.tx-custom-selection-cart .cart-img .extra-text-container{
    width: 100%;
    position: absolute;
    bottom: 0;
    font-size: 12px;
    color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #223446;
}

.tx-custom-selection-cart .cart-img .extra-text-container img{
   width: 15px;
   margin-right: 5px;
   margin: 5px; 
}

.txt-itm4 h4 {
    font-size: 14px;
    color: #8a8a8a;
    font-weight: 400;
    margin: 0;
    line-height: 18px;
    margin-bottom: 10px;
}

.txt-itm4 h5 {
    font-size: 14px;
    color: #4D4F51;
    font-weight: 400;
    background-color: #F3F6F9;
    border-radius: 8px;
    padding: 15px;
    line-height: 18px;
}

.tx-edit-address{
    border: 2px solid #08B7FC;
    line-height: 45px;
    background-color: #fff;
    color: #343434;
    font-size: 16px;
    text-align: center;
    border-radius: 5px;
    width: 100%;
    height: 50px;
    display: block;
}

.tx-box{
    display: none;
}

.tx-inpt-blk {
    padding: 30px 20px 10px 20px;
    border-top: 10px solid #F0F3F5;
    border-bottom: 10px solid #F0F3F5;
}


/* 15-07-23  ninja elite member */

.ninja-elite-member-list-container .list-item{
    background: url('../img/ninja_f2_center_bg.jpg') repeat;
    background-size: 100%;
    padding: 0 10%;
}

/*dashboard change 090823*/

.dsh-tp-rside .login-username{
    display: flex;
    justify-content: flex-end;
    align-items: center;

}

.dsh-tp-rside .login-username .text-section{
    color: #ffffff;
    font-size: 10px;
    margin-right: 5px;
}

.dsh-tp-rside .login-username .text-section .username{
    font-weight: 500;
    font-size: 14px;
}

.dsh-tp-rside .transaction{
    color: #ffffff;
    font-size: 12px;
}

.dsh-my-qualification{
    background: #FFF8F0;
    padding: 15px;
}

.dsh-my-qualification .header-section{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 15px;
}

.dsh-my-qualification .header-section .title{
    color: #444554;
    font-size:  14px;
    font-weight: 500;
}

.dsh-my-qualification .header-section .date{
    color: #795B27;
    font-size: 12px;
}

.dsh-my-qualification .content-section{
    border-radius: 15px;
    box-shadow: 0px 0px 20px #00000029;
    
}

.dsh-my-qualification .content-section .top-section{
    display: flex;
}

.dsh-my-qualification .content-section .expiring-date{
    background: transparent linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%) 0% 0% no-repeat;
    border-top-left-radius: 15px;
    padding: 15px;
    min-width: 55%;
}

.dsh-my-qualification .content-section .expiring-date .title{
    font-size: 14px;
    color: #000000;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 10px;
    font-weight: 500;
}

.dsh-my-qualification .content-section .expiring-date .date-highlight-container{
    display: table;
    margin: auto;
}

.dsh-my-qualification .content-section .expiring-date .date-highlight-container .date-highlight{
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 25px;
    margin-bottom: 10px;
}

/*Not Expired*/
.dsh-my-qualification .content-section .expiring-date.no-expired .date-highlight-container .date-highlight{
    background-color: #15A483;
}

/*Expired*/
.dsh-my-qualification .content-section .expiring-date.expired .date-highlight-container .date-highlight{
    background-color: #D62F2F;
}

.dsh-my-qualification .content-section .expiring-date .date-highlight-container .date-highlight .icon{
    margin-right: 5px;
    display: flex;
    align-items: center;
}

.dsh-my-qualification .content-section .expiring-date .date-highlight-container .date-highlight .date{
    color: #FFFFFF;
}

.dsh-my-qualification .content-section .expiring-date .dot-divider{
    border-bottom: dotted 1px #C9C9C9;
    margin-bottom: 10px;
}

.dsh-my-qualification .content-section .expiring-date .description{
    text-align: center;
    font-size: 13px;
    line-height: 16px;
    color: #385671;
    padding-bottom: 3px;
}

.dsh-my-qualification .content-section .expiring-date .shopnow-btn{
    background-color: #FDF4F4;
    color: #C43B3B;
    font-size: 11px;
    font-weight: 400;
    border-radius: 25px;
    padding: 5px 8px;
    display: table;
    margin: auto;
}

.dsh-my-qualification .content-section .center-divider{
    border-right: solid 5px #ECEEF2;
}

.dsh-my-qualification .content-section .your-period{
    padding: 15px;
    background-color: #ffffff;
    border-top-right-radius: 15px;
    width: 100%;
}

.dsh-my-qualification .content-section .your-period .title{
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #000000;
    text-align: center;
    white-space: nowrap;
    font-weight: 500;
}   

.dsh-my-qualification .bottom-divider{
     border-top: solid 5px #ECEEF2;
}

.dsh-my-qualification .bottom-section{
    padding: 15px;
    background-color: #ffffff;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: transparent linear-gradient(180deg, #FFFFFF 0%, #F7F9FA 100%) 0% 0% no-repeat;
}

.dsh-my-qualification .bonus-unilevel{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;

}

.dsh-my-qualification .bonus-unilevel .left-section{
    display: flex;
    align-items: center;
}

.dsh-my-qualification .bonus-unilevel .left-section .qualification{
    font-size: 11px; 
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-right: 5px;
    max-width: 85px;
}

.dsh-my-qualification .bonus-unilevel .left-section .qualification .icon{
    width: 30px;

}

.dsh-my-qualification .bonus-unilevel .left-section .qualification .icon img{
    width: 100%;
}

.dsh-my-qualification .bonus-unilevel .center-divider{
    border-right: solid 1px #ECEEF2;
   
}

.dsh-my-qualification .bonus-unilevel .right-section{
    padding-left: 10px;
    width: 100%;
}

.dsh-my-qualification .bonus-unilevel .right-section .header{
    display: flex;
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 5px;
}

.dsh-my-qualification .bonus-unilevel .right-section .header .title{
    font-size: 13px;
    color: #000000;
    font-weight: 500;
}

.dsh-my-qualification .bonus-unilevel .right-section .header .button{
    font-size: 11px;
    font-weight: 400;
    border-radius: 25px;
    padding: 5px 8px;
}

.dsh-my-qualification .bonus-unilevel .right-section .progress-bar{
    width: 100%;
    height: 6px;
    background-color: #E94236;
    border-radius: 5px;
    margin-bottom: 10px;
}

.dsh-my-qualification .bonus-unilevel .right-section .progress-bar .reading{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.dsh-my-qualification .bonus-unilevel .right-section .description{
    color: #8B8D8E;
    font-size: 12px;
    line-height: 16px;
}

/*QUALIFIED*/

.dsh-my-qualification .bonus-unilevel.qualified .right-section .progress-bar .reading{
    background-color: #12B694;
    width: 100%;
}

.dsh-my-qualification .bonus-unilevel.qualified .left-section .qualification{
    color: #12B694;
}

.dsh-my-qualification .bonus-unilevel.qualified .right-section .header .button{
    background-color: #F5FDF4;
    color: #0B6B71;
}

/*NOT QUALIFIED*/

.dsh-my-qualification .bonus-unilevel.not-qualified-a .right-section .progress-bar .reading{
    background-color: #E94236;
    width: 100%;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-a .left-section .qualification, .dsh-my-qualification .bonus-unilevel.not-qualified-b .left-section .qualification{
    color: #E94236;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-a .right-section .header .button, .dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .header .button{
    background-color: #FDF4F4;
    color: #C43B3B;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .progress-bar .reading-0{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #36E989;
    width: 0%;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .progress-bar .reading-5{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #36E989;
    width: 5%;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .progress-bar .reading-10{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #36E989;
    width: 10%;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .progress-bar .reading-20{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #36E989;
    width: 20%;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .progress-bar .reading-25{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #36E989;
    width: 25%;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .progress-bar .reading-30{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #36E989;
    width: 30%;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .progress-bar .reading-40{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #36E989;
    width: 40%;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .progress-bar .reading-50{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #36E989;
    width: 50%;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .progress-bar .reading-60{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #36E989;
    width: 60%;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .progress-bar .reading-70{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #36E989;
    width: 70%;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .progress-bar .reading-75{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #36E989;
    width: 75%;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .progress-bar .reading-80{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #36E989;
    width: 75%;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .progress-bar .reading-90{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #36E989;
    width: 90%;
}

.dsh-my-qualification .bonus-unilevel.not-qualified-b .right-section .progress-bar .reading-100{
    height: 6px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #36E989;
    width: 100%;
}

/*My Team Volumes*/

.dsh-my-team-volumes{
    background: #E5F5F8;
    padding: 15px;
}

.dsh-my-team-volumes .header-section{
    color: #000;
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 15px;
}

.dsh-my-team-volumes .content-section-top{
    padding: 15px 15px 0px 15px;
    background: #fff;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

.dsh-my-team-volumes .content-section-ctr{
    padding: 15px 5px 5px 5px;
    background: #fff;
}

.dsh-my-team-volumes .content-section-ctr .greyblock{
    padding: 10px;
    background: #F6F4F1;
    border-radius: 8px;
}

.dsh-my-team-volumes .content-section-btm{
    padding: 15px;
    background: #fff;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.dsh-my-team-volumes .left-right-team{
    display: flex;
    justify-content: space-between;
}

.dsh-my-team-volumes .left-right-team .box-container{ 
    width: 48%;
    color: #ffffff;
    text-align: center;
    border-radius: 20px;
}

.dsh-my-team-volumes .left-right-team .box-container .top-part{
    background: #0B6B71;
    padding: 10px 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}


.dsh-my-team-volumes .left-right-team .box-container .lower-part{
    background: #000000;
    padding: 10px 15px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

/* RANK VIP */

.dsh-my-team-volumes.rank-vip .rank-block, .dsh-my-team-volumes.rank-10 .rank-block{
    background-color: #0B6B71 !important;
    font-weight: 500 !important;
    color: #fff !important;
    padding: 5px 10px;
    border-radius: 5px;
}

.dsh-my-team-volumes.rank-vip .left-right-team .top-part, .dsh-my-team-volumes.rank-10 .left-right-team .top-part{
    background: #0B6B71;
}

/* RANK GOLD */

.dsh-my-team-volumes.rank-gold .rank-block, .dsh-my-team-volumes.rank-20 .rank-block{
    background-color: #D39D0A !important;
    font-weight: 500 !important;
    color: #fff !important;
    padding: 5px 10px;
    border-radius: 5px;    
}

.dsh-my-team-volumes.rank-gold .left-right-team .top-part, .dsh-my-team-volumes.rank-20 .left-right-team .top-part{
    background: #D39D0A;
}

/* RANK DIAMOND */

.dsh-my-team-volumes.rank-diamond .rank-block, .dsh-my-team-volumes.rank-30 .rank-block{
    background-color: #C0C0C0 !important;
    font-weight: 500 !important;
    color: #fff !important;
    padding: 5px 10px;
    border-radius: 5px;     
}

.dsh-my-team-volumes.rank-diamond .left-right-team .top-part, .dsh-my-team-volumes.rank-30 .left-right-team .top-part{
    background: #939393;
}


/*Gauge Meter*/

.GaugeMeter {
  position: Relative;
  text-align: Center;
  overflow: Hidden;
  cursor: Default;
  display: inline-block;
}

.GaugeMeter SPAN{
    top: -5px;
}

.GaugeMeter SPAN, .GaugeMeter B {
  width: 54%;
  position: Absolute;
  text-align: Center;
  display: Inline-Block;
  color: RGBa(0,0,0,.8);
  font-weight: 500;
  font-family: "Roboto", Arial;
  overflow: Hidden;
  white-space: NoWrap;
  text-overflow: Ellipsis;
  margin: 0 23%;
}

.GaugeMeter[data-style="Semi"] B {
  width: 80%;
  margin: 0 10%;
}

.GaugeMeter S, .GaugeMeter U {
  text-decoration: None;
  font-size: .60em;
  font-weight: 200;
  opacity: .6;
}

.GaugeMeter B {
  color: #000;
  font-size: 10px;
  font-weight: 200;
  top: -8px;
  opacity: .8;
}

/*Responsive Dashboard Unilevel Bonus title*/

@media (max-width: 350px) {

    .dsh-my-qualification .bonus-unilevel .right-section .header .title{
    font-size: 12px;
    color: #000000;
    font-weight: 500;
    }

.dsh-my-qualification .bonus-unilevel .right-section .header .button{
    font-size: 9px;
    border-radius: 25px;
    padding: 5px 4px;
    }


.dsh-my-qualification .bonus-unilevel .right-section .description {
    font-size: 11.5px;
    }

.dsh-my-qualification .bottom-section{
    padding: 12px;
}

.dsh-my-qualification .content-section .expiring-date {
    padding: 15px 5px;
    }

}

 @media only screen and (min-width: 351px) and (max-width: 375px){

    .dsh-my-qualification .bonus-unilevel .right-section .header .title{
    font-size: 12px;
    color: #000000;
    font-weight: 500;
    }

.dsh-my-qualification .bonus-unilevel .right-section .header .button{
    font-size: 10px;
    border-radius: 25px;
    padding: 5px 4px;
    }


.dsh-my-qualification .bonus-unilevel .right-section .description {
    font-size: 11.5px;
    }

.dsh-my-qualification .content-section .expiring-date {
    padding: 15px 10px;
    }

}

/* New material select option style */

/* select starting stylings ------------------------------*/
.select {
    font-family:
    'Roboto',sans-serif;
    position: relative;
    width: 100%;
    background: #F8F8F8;
    color: #000000;
}

.select-text {
    position: relative;
    font-family: inherit;
    background-color: transparent;
    width: 100%;
    padding: 25px 20px 10px 20px;
    font-size: 18px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #909090;
    color: #000000;
    line-height: 1.3;
}

/* Remove focus */
.select-text:focus {
    outline: none;
    border-bottom: 1px solid rgba(0,0,0, 0);
}

    /* Use custom arrow */
.select .select-text {
    appearance: none;
    -webkit-appearance:none
}

.select:after {
    position: absolute;
    top: 30px;
    right: 15px;
    /* Styling the down arrow */
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.12);
    pointer-events: none;
    color: #000000;
}


/* LABEL ======================================= */
.select-label {
    color: #747881;
    font-size: 18px;
    font-weight: 400;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 19px;
    transition: 0.2s ease all;
    width:100%;
    text-indent: 20px;
    background: #F8F8F8;
}

/* active state */
.select-text:valid ~ .select-label {
    top: 0px;
    transition: 0.2s ease all;
    font-size: 13px;
    font-weight: 500;
    background: #F8F8F8;
    text-indent: 20px;
    padding-top: 10px;
}

.select-text:focus ~ .select-label {
    color: #4098F0;
    top: 0px;
    transition: 0.2s ease all;
    font-size: 13px;
    background: #F8F8F8;
    text-indent: 20px;
    padding-top: 10px;
}


/* BOTTOM BARS ================================= */
.select-bar {
    position: relative;
    display: block;
    width: 100%;
}

.select-bar:before, .select-bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #4098F0;
    transition: 0.2s ease all;
}

.select-bar:before {
    left: 50%;
}

.select-bar:after {
    right: 50%;
}

/* active state */
.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
    width: 50%;
}

/* HIGHLIGHTER ================================== */
.select-highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

/* added on 14 March 2023 new material text field*/


.form__group {
  position: relative;
  padding: 0px 0px 0px 0px;
  /* margin-top: 10px;*/
  background: #F8F8F8;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #909090;
  outline: 0;
  font-size: 18px;
  color: #000000;
  padding: 26px 20px 10px 20px;
  background: #F8F8F8;
  transition: border-color 0.2s;
  line-height: 1.3;
}

.form__field::placeholder {
  color: transparent !important;
}

.form__field:placeholder-shown ~ .form__label {
  font-size: 18px;
  font-weight: 400;
  cursor: text;
  top: 19px;
  text-indent:20px;
}

.form__group label,
.form__field:focus ~ .form__label {
  position: absolute;
  display: block;
  transition: 0.2s;
  font-size: 13px;
  font-weight: 500;
  color: #747881;
  top: 10px;
  text-indent:20px;
}

.form__field:focus ~ .form__label {
  color: #4098F0;
}

.form__field:focus {
  padding-bottom: 10px;
  border-bottom: 2px solid #4098F0;
}

.form__group input[type="text"]:disabled, .form__group input[type="text"]:read-only {
    border-bottom: none;
    color: #000000;
    -webkit-text-fill-color: #000000;
    opacity: 1; /* required on iOS */
}

.form__group textarea[id="text"]:disabled, .form__group input[type="text"]:read-only {
    border-bottom: none;
    color: #000000;
    -webkit-text-fill-color: #000000;
    opacity: 1; /* required on iOS */
}

.form__group .warning-text{
    position: absolute;
    top: 64px;
    width: 100%;
    font-size: 10px;
    color: #E37955;
    text-align: right;
}

/* New fancy label will move up input text field */




/* Input Type=text version 1 */


.input-text-type-v1{
    height: 61px;
    background-color: #F8F8F8;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 1px solid #909090;
    font-family: Roboto; 
    font-size: 20px;
}

.input-text-type-v1::placeholder{
    font-size: 18px;
}

.new-number-input-style-big{
    width: 100%; 
    resize: none; 
    height: 80px; 
    border: none; 
    background: transparent; 
    padding: 20px 10px 0 10px; 
    font-family: Roboto; 
    font-size: 40px;
}

.new-number-input-style-big-label{
    position:  absolute;
    font-family: Roboto; 
    font-size: 13px; 
    top: 10px; 
    left: 20px;
    color: #747881;
}

.new-number-input-style-big-remark{
    width: 100%;
    resize: none; 
    border: none; 
    background: transparent; 
    padding: 30px 10px 10px 10px; 
    font-family: Roboto; 
    font-size: 13px;
}


/* Input Type=text version 2 - without bottom line */


.input-text-type-v2{
    height: 58px;
    background-color: #F8F8F8;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: none;
    font-family: Roboto; 
    font-size: 18px;
    width: 100%;
}

.input-text-type-v2::placeholder{
    font-size: 18px;
}

.placement-green-label{
    border-radius: 8px;
    background-color: #0F7524;
    margin-top: 5px;
    padding: 5px 10px;
    color: #ffffff;
    font-size: 15px;
    display: inline-block;
}

/*--===== start checkbox area =====*/
.inpt-checkbx-itm-container {
    display: block;
    position: relative;
    padding-left: 35px;
    padding-top: 2px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.inpt-checkbx-itm-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


.inpt-checkbx-itm-container input:checked~.inpt-checkbx-itm-checkmark {
    background-color: #FD6930;
}


.inpt-checkbx-itm-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


.inpt-checkbx-itm-container input:checked~.inpt-checkbx-itm-checkmark:after {
    display: block;
}

.inpt-checkbx-itm-container .inpt-checkbx-itm-checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.inpt-checkbx-itm-checkmark {
    height: 24px;
    width: 24px;
    border-radius: 5px;
    color: transparent;
    background: transparent;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 25px;
    width: 25px;
    background-color: #E2E2E2;
}

.inpt-checkbx-itm-container input:checked~.inpt-checkbx-itm-checkmark {
    background: #EF713F;
    border-radius: 5px;
}

/*--===== completed checkbox area =====*/

.inpt-checkbx-itm p {
    margin: 0;
    line-height: 1.4;
    color: #4A4A4A;
    font-weight: 400;
    font-size: 12px;

}


/* Product browsing categories button */
.product-browsing-categories-filter-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

.product-browsing-categories-filter-container .long-scroll-button-container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-x: scroll; 
}

.product-browsing-categories-filter-container .long-scroll-button-container::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

.product-browsing-categories-filter-container .long-scroll-button-container a{
    color: #a7adac;
    font-size: 18px;
    font-weight: 700;
    margin-right: 10px;
}

.product-browsing-categories-filter-container .long-scroll-button-container a.active{
    color: #000000;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 2px solid #FD7541;
}

.product-browsing-categories-filter-container .fixed-button-container{
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #9FA7B2;

}

.product-browsing-categories-filter-container .fixed-button-container a{
    color: #ED5252;
    font-size: 18px;
    font-weight: 700;
}

/* Any Board table 2 column - Direct Downline */

.modal-gen-tree .detail-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    color: #000;
}

.modal-gen-tree .detail-row div:first-child{
    color: #525A5D;
}


.modal-gen-tree .detail-row-v2{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 0;
    font-weight: 500;
    border-top: 1px solid #E5E5E5;
}

.modal-gen-tree .detail-row-v2 div{
    width: 50%;
    color: #0D2748;
}

/* Gold Board table 4 column - Direct Downline */

.modal-gen-tree .detail-row-v3{
    display: flex;
    justify-content: flex-start;
    padding: 15px 0;
    font-weight: 500;
    border-top: 1px solid #E5E5E5;
    font-size: 12px;
}

.modal-gen-tree .detail-row-v3 div{
    color: #0D2748;
}

.modal-gen-tree .detail-row-v3 div:nth-child(1){
    width: 35%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 35%;
    padding-right: 5px;
}

.modal-gen-tree .detail-row-v3 div:nth-child(2){
    width: 35%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 35%;
    padding-right: 5px;
}

.modal-gen-tree .detail-row-v3 div:nth-child(3){
    width: 15%;
    text-align: center;
}

.modal-gen-tree .detail-row-v3 div:nth-child(3)img{
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-gen-tree .detail-row-v3 div:nth-child(4){
    width: 15%;
    text-align: center;
}

.modal-gen-tree .detail-row-v3 div:nth-child(4)img{
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Silver Board table 3 column - Direct Downline */

.modal-gen-tree .detail-row-v4{
    display: flex;
    justify-content: flex-start;
    padding: 15px 0;
    font-weight: 500;
    border-top: 1px solid #E5E5E5;
    font-size: 12px;
}

.modal-gen-tree .detail-row-v4 div{
    color: #0D2748;
}

.modal-gen-tree .detail-row-v4 div:nth-child(1){
    width: 40%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 40%;
    padding-right: 5px;
}

.modal-gen-tree .detail-row-v4 div:nth-child(2){
    width: 40%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 40%;
    padding-right: 5px;
}

.modal-gen-tree .detail-row-v4 div:nth-child(3){
    width: 20%;
    text-align: center;
}

.modal-gen-tree .detail-row-v4 div:nth-child(3)img{
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Gold Board table 3 column - Direct Silver */

.modal-gen-tree .detail-row-v5{
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    font-weight: 500;
    border-top: 1px solid #E5E5E5;
    font-size: 12px;
}

.modal-gen-tree .detail-row-v5 div{
    color: #000000;
}

.modal-gen-tree .detail-row-v5 div:nth-child(1){
    
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 40%;
    padding-right: 5px;
}

.modal-gen-tree .detail-row-v5 div:nth-child(2){
    width: 30%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 35%;
    padding-right: 5px;
}

.modal-gen-tree .detail-row-v5 div:nth-child(3){
    width: 30%;
    text-align: center;
}

.modal-gen-tree .detail-row-v5 div:nth-child(3)img{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Button */

.primary-orange-btn{
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    height: 56px;
    width: 100%;
    background-color: #E37955;
    color: #ffffff;
}

.primary-orange-btn .icon{
    margin-right: 5px;
}

.primary-orange-btn-oneclick{
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    height: 56px;
    width: 100%;
    background-color: #E37955;
    color: #ffffff;
}

.primary-orange-btn-oneclick .icon{
    margin-right: 5px;
}

.secondary-white-btn{
    border-radius: 8px;
    border: 1px solid #c1c4c6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    height: 56px;
    width: 100%;
    background-color: #ffffff;
    color: #040C22;
}

.secondary-white-btn .icon{
    margin-right: 5px;
}

.secondary-green-btn{
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    height: 56px;
    width: 100%;
    background-color: #0B6B71;
    color: #ffffff;
}

.secondary-green-btn .icon{
    margin-right: 5px;
}

.primary-orange-btn-oneclick:disabled {
    pointer-events: none;
}

/* product browsing ranking display */

.shopping-bonus-rank-top{
    font-size: 13px;
    color: #ffffff;
    background: #4A5A5F;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid #475695;
    padding: 5px 10px 5px 10px;
}

.shopping-bonus-rank-content{
    border: 1px solid #dbdde0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 5px;
    background: #F7F8F8;
}

.shopping-bonus-rank-content .inner{
    display: flex;
    justify-content: center;
}

.shopping-bonus-rank-content .inner img{
    margin: auto;
    height: 40px;
}

.shopping-bonus-rank-content .btm{
    text-align: center;
    color: #000;
    padding-top: 5px
}

.green-qualify-label{
    color: #fff;
    display: flex;
    justify-content: center;
    padding: 5px;
    border-radius: 5px;
    background: #15A483;
}

.green-qualify-label .content{
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-right: 5px;
}

.red-not-qualify-label{
    color: #fff;
    display: flex;
    justify-content: center;
    padding: 5px;
    border-radius: 5px;
    background: #DD4444;
}

.red-not-qualify-label .content{
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-right: 5px;
}

/*Iframe news*/

.iframe-news-container .header{
    background-color: #FFFFFF;
    padding: 10px 15px 10px 15px;
    background-size: cover;
    font-size: 18px;
    font-weight: 500;
    color: #000000;
}

.iframe-news-container .date{
    background: url('../img/news_date_bar.svg') no-repeat center center;
    background-size: cover;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 14px;
}

.iframe-news-container .banner{
    padding: 15px;
}

.iframe-news-container .banner img{
    width: 100%;
}

.iframe-news-container .content{
    padding: 15px 15px 25px 15px;
    font-size: 16px;
    color: #000000;
}

.iframe-news-container .content img{
    width: 100%;
}

.iframe-news-container .content p{
    font-size: 16px;
    color: #000000;
}

.iframe-news-container .content p img{
    width: 100%;
}

.iframe-news-container .content a{
    color: #eb7e26;
}

/*div footer expand - for android keyboard*/

.h-150p{
    height: 150px;
}

.h-100p{
    height: 100px;
}

.h-75p{
    height: 75px;
}

.h-50p{
    height: 50px;
}

/*wallet report*/

.wr-new-remark{
    margin: 0;
    font-size: 12px;
    color: #acacb4;
    line-height: 14px;
}


/*account setting*/

#ProfilePic{   
    margin-right:5px;
}

.flex2left .box01 {
    width: 64px;
}

.flex2left .box02 {
    width: auto;
}

.beige-border-bottom-1px{
    border-bottom: 1px solid #EAE6E1;
}

.as-small-label{
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    padding-top: 15px;
    padding-bottom: 5px;
}

.as-contact-direction-column{
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: flex-start;
}

.account-setting-edit-profile-btn a{
    display: flex;
    background: #EAF4F5;
    font-size: 12px;
    color: #0E181A;
    font-weight: 500;
    text-align: center;
    border-radius: 30px;
    padding: 10px 10px;
    margin-right: 4px;
}

.account-setting-edit-profile-btn a img{
    margin-right: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/*Transfer bonus point*/

.transfer-filter-pin-box {
    background: #fff;
    border-radius: 10px;
    padding: 0 12px;
    margin-top: 20px;

}

/*rotate menu icon*/

.rotate {
    -moz-transition: all .5s linear;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}
.rotate.down {
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}

/*Security Password Sent*/

.password-sent{
    padding-top:  10px;
}

.password-sent p{
    font-size: 14px;
    line-height: 20px;
    color: #254541;
    word-break: break-word;
}

.password-sent p a{
    font-weight: 500;
    color: #1D80DE;
    
}

/*hide eye password*/

.eye-position{
    margin-top: 20px; 
    margin-left: -40px; 
    cursor: pointer; 
    position: absolute;
}

/*blue message box*/

.blue-message-box{
    background-color: #f1f8ff;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    border: 1px #cfe7fc solid;
}

.blue-message-box .icon{
    margin-right: 5px;
}

.blue-message-box .icon img{
    width: 30px;
}

.blue-message-box .content{
    font-size: 12px;
    color: #2c79c6;
    line-height: 16px;
}

/*teal message box*/

.teal-message-box{
    background-color: #f1feff;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    border: 1px #d6ebec solid;
}

.teal-message-box .icon{
    margin-right: 5px;
}

.teal-message-box .icon img{
    width: 30px;
}

.teal-message-box .content{
    font-size: 12px;
    color: #26928a;
    line-height: 16px;
}

/* 031023 ADDED */
/* PRELOAD BG IMG */
.preload-bg-img-avoid-flash{
    position: absolute;
    top:-99999px;
    opacity: 0;
}

/* daily bonus statement matching payout */

.daily-bonus-statement .unit-container{
    border-top: 3px solid #FF7E26;
    border-bottom: 1px solid #e5e5e5;
    border-left:1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    margin-bottom: 10px;
}

.daily-bonus-statement .unit-container .lower-part{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.daily-bonus-statement .unit-container .lower-part .level{
    width: 29%;
    text-align: center;
    border-right: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 50px;
}

.daily-bonus-statement .unit-container .lower-part .level .title{
    font-size: 11px;
    color: #78838D;
    margin-bottom: 5px;
}

.daily-bonus-statement .unit-container .lower-part .level .amount{
    font-size: 16px;
    font-weight: 500;
    color: #254541;   
}

.daily-bonus-statement .unit-container .lower-part .mb{
    width: 30%;
    text-align: center;
    border-right: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 50px;

}

.daily-bonus-statement .unit-container .lower-part .mb .title{
    font-size: 11px;
    color: #78838D;
    margin-bottom: 5px;
}

.daily-bonus-statement .unit-container .lower-part .mb .amount{
    font-size: 16px;
    font-weight: 500;
    color: #28B469;
    
}

.daily-bonus-statement .unit-container .lower-part .view-tree{
    width: 12%;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 50px;
}

.daily-bonus-statement .unit-container .lower-part .view-tree .title{
    font-size: 25px;
    color: #083348;
    height: 18px;
    display: flex;
    align-items: flex-end;
}

.daily-bonus-statement .unit-container .lower-part .view-tree .amount{
    font-size: 12px;
    color: #254541;
}


.daily-bonus-statement .unit-container2{
    background-color: #ffffff;
}

.daily-bonus-statement .unit-container2 .lower-part{
    display: flex;
    justify-content: space-between;
    margin: 10px 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e5e5e5;
}

.daily-bonus-statement .unit-container2 .lower-part .left{
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50px;
}

.daily-bonus-statement .unit-container2 .lower-part .left .title{
    font-size: 11px;
    color: #78838D;
    margin-bottom: 5px;
}

.daily-bonus-statement .unit-container2 .lower-part .left .amount{
    font-size: 16px;
    font-weight: 500;
    color: #28B469;   
}

.daily-bonus-statement .unit-container2 .lower-part .right{
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50px;
}

.daily-bonus-statement .unit-container2 .lower-part .right .title{
    font-size: 11px;
    color: #78838D;
    margin-bottom: 5px;
}

.daily-bonus-statement .unit-container2 .lower-part .right .amount{
    font-size: 16px;
    font-weight: 500;
    color: #493ECE;
    
}

.daily-bonus-statement .total-container-b {
    border-top: 5px solid #1169ad;
    border-radius: 0 0 10px 10px;
    margin-bottom: 10px;
    background-color:#F3F6F9;
}

.daily-bonus-statement .total-container-b .lower-part {
    display: flex;
}

.daily-bonus-statement .total-container-b .lower-part .block{
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0px 15px;
}

.daily-bonus-statement .total-container-b .lower-part .block .title{
    font-size: 18px;
    color: #0B4370;
    font-weight: 500;
}

.daily-bonus-statement .total-container-b .lower-part .block .value{
    font-size: 18px;
    font-weight: 700;
    color: #1856C4;
    
}

.daily-bonus-statement .total-container-g {
    border-top: 5px solid #25B24F;
    border-radius: 0 0 10px 10px;
    margin-bottom: 10px;
    background-color:#F8FDFB;
}

.daily-bonus-statement .total-container-g .lower-part {
    display: flex;
}

.daily-bonus-statement .total-container-g .lower-part .block{
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0px 15px;
}

.daily-bonus-statement .total-container-g .lower-part .block .title{
    font-size: 18px;
    color: #254541;
    font-weight: 500;
}

.daily-bonus-statement .total-container-g .lower-part .block .value{
    font-size: 18px;
    font-weight: 700;
    
}

.daily-bonus-statement .total-container-p {
    border-top: 5px solid #493ECE;
    border-radius: 0 0 10px 10px;
    margin-bottom: 10px;
    background-color:#FAF8FD;
}

.daily-bonus-statement .total-container-p .lower-part {
    display: flex;
}

.daily-bonus-statement .total-container-p .lower-part .block{
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0px 15px;
}

.daily-bonus-statement .total-container-p .lower-part .block .title{
    font-size: 18px;
    color: #191036;
    font-weight: 500;
}

.daily-bonus-statement .total-container-p .lower-part .block .value{
    font-size: 18px;
    font-weight: 700;
    color: #493ECE;
    
}

.border-bottom-0{
    border-bottom: 0px !important;
}

/* daily bonus statement Team Bonus */
/* white */
.white-bg-pside-15{
    background: #ffffff;
    padding: 0px 15px;   
}

.white-bg-pside-15 .three-column{
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 0px;
    border-bottom: 1px solid #EFF1F0;
}

.white-bg-pside-15 .three-column .left{
    width: 40%;
}

.white-bg-pside-15 .three-column .center,.white-bg-pside-15 .three-column .right{
    width: 30%;
    text-align: right;
    font-weight: 500;
    color: #254541;
}

/* light-blue */
.light-blue-bg-pside-15{
    background: #FAFCFF;
    padding: 0px 15px;   
}

.light-blue-bg-pside-15 .three-column{
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 0px;
    border-bottom: 1px solid #EFF1F0;
}

.light-blue-bg-pside-15 .three-column .left{
    width: 40%;
}

.light-blue-bg-pside-15 .three-column .center,.light-blue-bg-pside-15 .three-column .right{
    width: 30%;
    text-align: right;
    font-weight: 500;
    color: #254541;
}

/* orange */
.light-orange-bg-pside-15{
    background: #FFFCF4;
    padding: 0px 15px;   
}

.light-orange-bg-pside-15 .three-column{
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 0px;
    border-bottom: 1px solid #EFF1F0;
}

.light-orange-bg-pside-15 .three-column .left{
    width: 40%;
}

.light-orange-bg-pside-15 .three-column .center,.light-orange-bg-pside-15 .three-column .right{
    width: 30%;
    text-align: right;
    font-weight: 500;
    color: #254541;
}

/* green */
.light-green-bg-pside-15{
    background: #F5FDF4;
    padding: 0px 15px;
    border-top: 2px solid #57B289; 
}

.light-green-bg-pside-15 .three-column{
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 0px;
    border-bottom: 1px solid #EFF1F0;
}

.light-green-bg-pside-15 .three-column .left{
    width: 40%;
}

.light-green-bg-pside-15 .three-column .center,.light-green-bg-pside-15 .three-column .right{
    width: 30%;
    text-align: right;
    font-size: 16px;
    font-weight: 500;
    color: #57B289;
}


/* Personal Purchase Report table */

.pp-report .unit-container{
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px #00000029;
    margin-bottom: 20px;
    margin-top: 20px;
}

.pp-report .unit-container .top-part{
    display: flex;
    padding: 10px 0px;
}

.pp-report .unit-container .top-part .level{
    width: 27%;
    text-align: center;
    border-right: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.pp-report .unit-container .top-part .level .lvl-no{
    font-size: 12px;
    color: #254541;
    margin-bottom: 5px;
}

.pp-report .unit-container .top-part .level .sp{
    font-size: 14px;
    color: #254541;
    
}

.pp-report .unit-container .top-part .table{
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 5px;
}

.pp-report .unit-container .top-part .half-block{
    width: 100%;
    text-align: left;
    padding: 0px 0px 0px 8px;  
}

.pp-report .unit-container .top-part .half-block .content{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    font-size: 10.5px;
}

.pp-report .unit-container .top-part .half-block .content .title{
    color: #254541;
    width: 55%;
    word-break: break-word;
}

.pp-report .unit-container .top-part .half-block .content .center{
    color: #6d6d6d;
    width: 3%;
    word-break: break-word;
}

.pp-report .unit-container .top-part .half-block .content .value{
    color: #6d6d6d;
    width: 42%;
    word-break: break-word;
}


.pp-report .unit-container .top-part .amount{
    width: 32%;
    text-align: center;
    border-right: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.pp-report .unit-container .top-part .amount .lvl-no{
    font-size: 12px;
    color: #254541;
    margin-bottom: 5px;
}

.pp-report .unit-container .top-part .amount .vp{
    font-size: 14px;
    font-weight: 500;
    color: #254541;
    margin-bottom: 3px;
    
}

.pp-report .unit-container .top-part .amount .sp{
    font-size: 14px;
    color: #254541;
    
}

.pp-report .unit-container .top-part .view-tree{
    width: 14%;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.pp-report .unit-container .top-part .view-tree .icon{
    font-size: 25px;
    color: #254541;
    height: 25px;
    display: flex;
    align-items: flex-end;
}

.pp-report .unit-container .top-part .view-tree .title{
    font-size: 12px;
    color: #78838D;
}

.pp-report .unit-container .lower-part{
    padding: 10px;
}

.pp-report .unit-container .lower-part .block{
    width: 49%;
    text-align: left;
    background-color: #eff7f4;
    padding: 8px 10px 8px 10px;
    border-radius: 8px;
}

.pp-report .unit-container .lower-part .block .title{
    font-size: 12px;
    color: #78838D;
    margin-bottom: 2px;
}

.pp-report .unit-container .lower-part .block .value{
    font-size: 14px;
    font-weight: 500;
    color: #254541;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;   
}

.pp-report .unit-container .bottom-part{
    padding: 0 10px 10px 10px;
}

.pp-report .unit-container .bottom-part .full-block{
    width: 100%;
    text-align: left;
    background-color: #eff7f4;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pp-report .unit-container .bottom-part .full-block .left{
    font-size: 12px;
    color: #78838D;
    margin-bottom: 2px;
}

.pp-report .unit-container .bottom-part .full-block .left .title{
    font-size: 12px;
    color: #78838D;
    margin-bottom: 2px;
}

.pp-report .unit-container .bottom-part .full-block .left .value{
    font-size: 14px;
    font-weight: 500;
    color: #254541;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    display: inline-flex;
}

.pp-report .unit-container .bottom-part .full-block .left .bca{
    font-size: 11.5px;
    font-weight: 500;
    color: #083348;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    display: inline-flex;
}

.pp-report .unit-container .bottom-part .full-block .left .status{
    font-size: 11px;
    font-weight: 400;
    color: #ffffff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    margin-left: 2px;
    background-color: #2BCE82;
    padding: 3px 5px;
    border-radius: 5px;  
    display: inline-flex;
}

.pp-report .unit-container .bottom-part .full-block .right{
    font-size: 11px;
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    margin-top: 16px;
    background-color: #2BCE82;
    padding: 3px 4px;
    border-radius: 5px;
}


.pp-report .unit-container .bottom-part .half-block{
    width: 49%;
    text-align: left;
    background-color: #eff7f4;
    padding: 8px 10px 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    color: #78838D;
    height: 50px;
}

.pp-report .unit-container .bottom-part .half-block .title{
    font-size: 12px;
    color: #78838D;
    margin-bottom: 2px;
}

.pp-report .unit-container .bottom-part .half-block .value{
    font-size: 14px;
    font-weight: 500;
    color: #254541;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;  
}

.pp-report .unit-container .bottom-part .half-block .left {
    font-size: 12px;
    color: #78838D;
    margin-bottom: 2px;
}

.pp-report .unit-container .bottom-part .half-block .left .title{
    font-size: 12px;
    color: #78838D;
    margin-bottom: 2px;
}

.pp-report .unit-container .bottom-part .half-block .left .value{
    font-size: 12px;
    font-weight: 500;
    color: #254541;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;  
}

.pp-report .unit-container .bottom-part .half-block .left .balance{
    font-size: 11px;
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: #56B429;
    padding: 3px 4px;
    border-radius: 5px;
    margin-left: 3px;
}



/* shopping no product */
.shopping-no-product{
    display: flex;
    align-items: top;
    position: relative;
}

.shopping-no-product img{
    width: 100%;
}

/* 101023 ADDED */
/* BANNER RESIZE */
.hide-owl-carousel-banner{
/*    display: none;*/
    overflow: hidden;
    min-height:145px;
}

.no-js .owl-carousel{
    opacity:0;
    overflow: hidden;
}

/* 191023 ADDED */
/* Group Revenue Rerport by level total section */

.group-revenue .total-container {
    border-top: 5px solid #1166D1;
    background-color: #F8FAFD;
    padding-bottom: 20px;
}

.group-revenue .total-container .lower-part {
    display: flex;
}

.group-revenue .total-container .lower-part .block{
    width: 50%;
    text-align: center;
    border-right: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 10px 10px 30px 10px;
}

.group-revenue .total-container .lower-part .block .title{
    font-size: 13px;
    color: #0D2748;
    font-weight: 500;
    margin-bottom: 5px;
}

.group-revenue .total-container .lower-part .block .value{
    font-size: 18px;
    font-weight: 700;   
}

/*Unilevel expired blinking*/

      @keyframes blinking {
        0% {
          background-color: red;
        }
        50% {
          background-color: orange;
        }       
        100% {
          background-color: red;
        }
      }
      #blink2 {
        
        font-size:14px;
        font-weight: 500;
        color: #FFFFFF;
        padding:5px 10px ;
        animation: blinking 1.2s infinite;
        display: inline;
        border-radius:5px;
        vertical-align: top;
      }


/*Unilevel Sales Report Qualification for 5, 6 and 10 Levels*/
/* 5 Levels */

.five-levels .top{
    padding: 15px 15px 5px 15px;
    background-color: #ECF2F0;;
}

.five-levels .total-container{
    padding: 15px;
    border-top: 5px solid #21A946;
    background-color: #F8FDFB;
}

.five-levels .total-container .amount{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    padding-bottom: 15px;
}

.five-levels .total-container .amount .left{
    color: #808080;
}

.five-levels .total-container .amount .left span{
    font-weight: 500;
    color: #254541;
}

.five-levels .total-container .amount .right{
    font-size: 18px;
    font-weight: 700;
    color:  #254541;
}

.five-levels .total-container .line{
    border-bottom: 1px solid #E1EDE8;
}

.five-levels .total-container .description{
    font-size: 14px;
    color: #52A383 !important;
    padding-top: 15px;
    padding-bottom: 5px;
}

.five-levels .bottom{
    padding: 15px 15px 30px 15px;
    background-color: #F8F8F8;
}

/* 6 Levels */

.six-levels .top{
    padding: 15px 15px 5px 15px;
    background-color: #F4F2ED;
}

.six-levels .total-container{
    padding: 15px;
    border-top: 5px solid #AA8B51;
    background-color: #FFFCF7;
}

.six-levels .total-container .amount{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    padding-bottom: 15px;
}

.six-levels .total-container .amount .left{
    color: #808080;
}

.six-levels .total-container .amount .left span{
    font-weight: 500;
    color: #254541;
}

.six-levels .total-container .amount .right{
    font-size: 18px;
    font-weight: 700;
    color:  #254541;
}

.six-levels .total-container .line{
    border-bottom: 1px solid #EDE9E1;
}

.six-levels .total-container .description{
    font-size: 14px;
    color: #A37752;
    padding-top: 15px;
    padding-bottom: 5px;
}

.six-levels .bottom{
    padding: 15px 15px 30px 15px;
    background-color: #F8F8F8;
}


/* 10 Levels */

.ten-levels .top{
    padding: 15px 15px 5px 15px;
    background-color: #EFEFEF;
}

.ten-levels .total-container{
    padding: 15px;
    border-top: 5px solid #A2A2A2;
    background-color: #F7F7F7;
}

.ten-levels .total-container .amount{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    padding-bottom: 15px;
}

.ten-levels .total-container .amount .left{
    color: #808080;
}

.ten-levels .total-container .amount .left span{
    font-weight: 500;
    color: #254541;
}

.ten-levels .total-container .amount .right{
    font-size: 18px;
    font-weight: 700;
    color:  #254541;
}

.ten-levels .total-container .line{
    border-bottom: 1px solid #E0E0E0;
}

.ten-levels .total-container .description{
    font-size: 14px;
    color: #868686 ;
    padding-top: 15px;
    padding-bottom: 5px;
}

.ten-levels .bottom{
    padding: 15px 15px 30px 15px;
    background-color: #F8F8F8;
}

.qualify-green-box{
        font-size:14px;
        font-weight: 500;
        color: #FFFFFF;
        padding:5px 10px ;
        display: inline;
        border-radius:5px;
        vertical-align: top;
        background-color: #15A483;
}


/* Levels Block - qualify */

.qualify-block{
    text-align: center;
    color: #606060;
    align-items: center;
    display: flex;
    justify-content: flex-start;
    position: relative;
    padding: 10px 0px;
    border-radius: 10px;
    margin-bottom: 20px;
    background: #fff;
}

.qualify-block .ico{
    background:url('../img/green_qualify_ico.svg') ;
    background-size: contain;
    width: 30px;
    height: 30px;
    right: -8px; 
    position: absolute;
}

.qualify-block .level{
    border-right: 1px solid #DADDE0;
    font-size: 12px;
    padding: 0px 15px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.qualify-block .level span{
    font-size: 24px;
    font-weight: 500;
    color: #254541;
}

.qualify-block .three-column{
    width: 100%;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    padding:  0px 25px 0px 10px;
}

.qualify-block .three-column .c-left{
    text-align: left;
    width: 32%;
}

.qualify-block .three-column .c-left .amount, .c-center .amount, .c-right .amount{
    font-weight: 700;
    font-size: 14px;
    color: #254541;
}

.qualify-block .three-column .c-left .title, .c-center .title, .c-right .title{
    font-size: 10px;
    color: #606060;
}

.qualify-block .three-column .c-center{
    text-align: center;
    width: 30%;
}

.qualify-block .three-column .c-right{
    text-align: right;
    width: 38%;
}


/* Levels Block - no qualify */

.no-qualify-block{
    text-align: center;
    color: #606060;
    align-items: center;
    display: flex;
    justify-content: flex-start;
    position: relative;
    padding: 10px 0px;
    border-radius: 10px;
    margin-bottom: 20px;
    background: #fff;
}

.no-qualify-block .ico{
    background:url('../img/red_not_qualify_ico.svg') ;
    background-size: contain;
    width: 30px;
    height: 30px;
    right: -8px; 
    position: absolute;
}


.no-qualify-block .level{
    border-right: 1px solid #DADDE0;
    font-size: 12px;
    padding: 0px 15px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.no-qualify-block .level span{
    font-size: 24px;
    font-weight: 500;
    color: #254541;
}

.no-qualify-block .three-column{
    width: 100%;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    padding:  0px 25px 0px 10px;
}

.no-qualify-block .three-column .c-left{
    text-align: left;
    width: 32%;
}

.no-qualify-block .three-column .c-left .amount, .c-center .amount, .c-right .amount{
    font-weight: 700;
    font-size: 14px;
    color: #254541;
}

.no-qualify-block .three-column .c-left .title, .c-center .title, .c-right .title{
    font-size: 10px;
    color: #606060;
}

.no-qualify-block .three-column .c-center{
    text-align: center;
    width: 30%;
}

.no-qualify-block .three-column .c-right{
    text-align: right;
    width: 38%;
}


/* Unilevel bonus summary */

.unilevel-bonus-statement .unit-container{
    border-top: 3px solid #FF7E26;
    border-bottom: 1px solid #e5e5e5;
    border-left:1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    margin-bottom: 10px;
}

.unilevel-bonus-statement .unit-container .lower-part{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.unilevel-bonus-statement .unit-container .lower-part .level{
    width: 10%;
    text-align: center;
    border-right: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 50px;
}

.unilevel-bonus-statement .unit-container .lower-part .level .title{
    font-size: 11px;
    color: #78838D;
    margin-bottom: 5px;
}

.unilevel-bonus-statement .unit-container .lower-part .level .amount{
    font-size: 14px;
    font-weight: 700;
    color: #254541;   
}

.unilevel-bonus-statement .unit-container .lower-part .c-block{
    width: 26%;
    text-align: center;
    border-right: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 50px;

}

.unilevel-bonus-statement .unit-container .lower-part .c-block .title{
    font-size: 11px;
    color: #78838D;
    margin-bottom: 5px;
}

.unilevel-bonus-statement .unit-container .lower-part .c-block .amount{
    font-size: 14px;
    font-weight: 700;
    color: #254541;
    
}

.unilevel-bonus-statement .unit-container .lower-part .view-tree{
    width: 12%;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 50px;
}

.unilevel-bonus-statement .unit-container .lower-part .view-tree .title{
    font-size: 25px;
    color: #083348;
    height: 18px;
    display: flex;
    align-items: flex-end;
}

.unilevel-bonus-statement .unit-container .lower-part .view-tree .amount{
    font-size: 12px;
    color: #254541;
}

/* currency popup - dashboard */

.dashboard-radius{
    border-radius: 8px;
    overflow-y: scroll;
}

.dashboard-radius .nwg-popup-header{
    background: url('../img/d_currency_popup_header.jpg') no-repeat center center;
    background-size: cover;
    height: 50px;
}

/* new total style - 3 block */

.total-container-3-blocks-full{
    justify-content: flex-start;
    align-items: center;
    position: relative;
    text-align: center;
    width: 100%;
    display: flex;
    color: #fff;
}

.total-container-3-blocks-full .block1{
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    min-height: 100px;
    background-color:#66777C; 
    border-top: solid 5px #8D999D;
}

.total-container-3-blocks-full .block3{
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    min-height: 100px;
    background-color:#17B48A; 
    border-top: solid 5px #51C7A8;
}

.total-container-3-blocks{
    justify-content: flex-start;
    align-items: center;
    position: relative;
    text-align: center;
    width: 100%;
    display: flex;
    color: #fff;
    padding: 0px 20px;
    border-radius: 5px;
}

.total-container-3-blocks .block1{
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    min-height: 100px;
    background-color:#66777C; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    border-top: solid 5px #8D999D;
}

.total-container-3-blocks-full .block1 .value, .total-container-3-blocks .block1 .value{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap   
}

.total-container-3-blocks-full .block1 .text, .total-container-3-blocks .block1 .text{
    font-size: 12px;
    font-weight: 300;
}

.total-container-3-blocks-full .block2, .total-container-3-blocks .block2{
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    min-height: 100px;
    background-color:#1293CC; 
    border-top: solid 5px #4EAED9;
}

.total-container-3-blocks-full .block2 .value, .total-container-3-blocks .block2 .value{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap
}

.total-container-3-blocks-full .block2 .text, .total-container-3-blocks .block2 .text{
    font-size: 12px;
    font-weight: 300;
}

.total-container-3-blocks .block3{
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    min-height: 100px;
    background-color:#17B48A; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    border-top: solid 5px #51C7A8;
}

.total-container-3-blocks-full .block3 .value,.total-container-3-blocks .block3 .value{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;  
    white-space: nowrap  
}

.total-container-3-blocks-full .block3 .text,.total-container-3-blocks .block3 .text{
    font-size: 12px;
    font-weight: 300;

}

/* Total left and Total right small icon */
.content-container .total-left-blue-ico{
    color: #fff;
    text-align: center;
    background: #1293CC;
    height: 14px;
    width: 14px;
    line-height: 14px;
    display: inline-block;
    border-radius: 50%;
}

.content-container .total-right-green-ico{
    color: #fff;
    text-align: center;
    background: #17B48A;
    height: 14px;
    width: 14px;
    line-height: 14px;
    display: inline-block;
    border-radius: 50%;
}

.pbvtxt {
    vertical-align: top;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #1293CC;
    text-align: right;
}

.pbvtxt .blueicon {
    font-size: 14px;
    color: #ffffff;
    background-color: #1293CC;
    height: 16px;
    width: 16px;
    line-height: 16px;
    display: inline-block;
    border-radius: 50px;
    margin-left: 3px;
    text-align: center;
}

.pbvtxt .greenicon {
    font-size: 14px;
    color: #ffffff;
    background-color: #17B48A;
    height: 16px;
    width: 16px;
    line-height: 16px;
    display: inline-block;
    border-radius: 50px;
    margin-left: 3px;
    text-align: center;
}

.pbvtxt .gbvtxt {
    font-size: 12px;
    font-weight: 400;
    padding-right: 22px;
    color: #B2893A;
}


/* Promo-trip-popup */
.promo-trip-details-btn{
    padding: 10px;
    display: flex;
    justify-content: center;
    background: #E37955;
    border-radius: 5px;
    margin: 5px 0px;
    color: #ffffff;
}

.promo-trip-second-page{
    display: none;
}

.promo-trip-history{
    max-height: 90vh;
    min-height:68vh;
    overflow: auto;
    border-radius: 8px;
    background: url('../img/past_achievement_bg.jpg') repeat-y center center;
    background-size: 100%;
}

.promo-trip-history .header{
    background: #254541;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #ffffff;
}

.promo-trip-history .button-back{
    position: absolute;
    left: 10px;
    height: 20px;
    width: 20px;
    background: #FFFFFF;
    text-align: center;
    line-height: 20px;
    font-size: 20px;
    color: #254441;
    border-radius: 50%;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 0px 10px rgb(0 0 0 / 15%);
}

.promo-trip-history .trip-cat{
   margin-bottom: 10px; 
}

.promo-trip-history .trip-cat .title{
    font-size: 16px;
    color: #646162;
    font-weight: 500;
}

.promo-trip-history .content{
    padding: 20px;
    height: auto;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.promo-trip-history .trip-selection-container{
    background-color: #ffffff;
    box-shadow: 0px 0px 6px 0px #00000030;
    border-radius: 5px;
    padding: 10px 10px;
    margin-bottom: 20px;
}

.promo-trip-history .trip-selection{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px 0px;

}

.promo-trip-history .trip-selection .trip-icon{
    margin-right: 5px;
}

.promo-trip-history .trip-selection .trip-name{
    color: #254541;
    font-size: 14px;
    font-weight: 700;
}

.promo-trip-history .trip-selection .trip-period{
    color: #9F9F9F;
    font-size: 12px;
}

/* Define a rotated state for the arrow icon */
.arrow-rotated {
    transform: rotate(90deg);
    transition: transform 0.3s ease; /* Add a smooth transition for the rotation */
}

.promo-trip-history .trip-banner img{
    border-radius: 10px;
} 

.promo-trip-history .trip-info{
    font-size: 14px;
}

.promo-trip-history .direct-bv-info .title{
    font-size: 14px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding-top: 15px;
    color: #000000;
    margin-bottom: 10px;
}

.promo-trip-history .direct-bv-info .title .icon{
    width: 20px;
    margin-right: 5px;
}

.promo-trip-history .direct-bv-info .content{
    background: #ffffff;
    padding: 0;
    border-radius: 5px;
    box-shadow: 0px 0px 1px 1px rgba(234,241,242,1);
}


/* 07-12-23 */
/* fixed scrolling */
.fix-body-when-lightbox-on {
  position: static;
  max-height: 100vh;
  overflow-x:hidden;
  overflow-y:hidden;
  top: 0;
  left: 0;
  width: 100%;
}

/* leadership popup - dashboard */

.popup-annual-rank {
    width: 90vw;
    background: #F6F4F1;
    border-radius: 8px;
    overflow-y: scroll;
}

.popup-annual-rank-inr h4 {
    padding: 15px 15px;
    text-align: center;
    color: #2c735c;
    font-size: 18px;
    font-weight: 500;
}

.popup-annual-rank-inr h4 span {
    display: block;
    text-align: center;
    color: #254541;
    font-size: 13px;
    margin-top: 2px;
}

.popup-annual-rank-inr h4 .last-update {
    display: block;
    text-align: center;
    color: #8A8A8A;
    font-size: 12px;
    margin-top: 5px;
}

.popup-annual-rank-inr img {
    width: 100%;
    max-width: 425px;
    height: 100%;
    margin: auto;
    display: block;
}

.popup-annual-rank-inr li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.popup-annual-rank-inr li p {
    font-size: 13px;
    color: #808080;
    font-weight: 400;
    margin: 0;
    flex: 0 0 180px;
    line-height: 1.3;
}

.popup-annual-rank-inr ul {
    padding: 15px;
}

.popup-annual-rank-inr li h4 {
    border: none;
    text-align: right;
    font-size: 14px;
    color: #254541;
    font-weight: 500;
    flex: 1;
    margin: 0;
    padding: 0;
}

.popup-annual-rank-inr li:last-child {
    margin: 0;
}

.popup-annual-rank-inr li a {
    font-size: 14px;
    color: #ffffff;
    background: #E37955;
    padding: 3px 10px;
    border-radius: 5px;
}

.border-bottom-1px-m15{
    margin:0px 15px; 
    border-top: 1px solid #dcd7d1;
}

/* great-world-label-tortoise */

.great-world-label{
    display: flex;
    justify-content: left;
    align-items: center;
}

.great-world-label .ico{
    background: url('../img/rank_great_world_ico.svg') no-repeat;
    width: 14px;
    height: 14px;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
}

.great-world-label .content{
    color: #2ca9bf;
    text-align: right;
    display: block;
    font-size: 14px;
    font-weight:500;
    padding-left:5px;
}

/* hero-label-red */

.hero-label{
    display: flex;
    justify-content: left;
    align-items: center;
}

.hero-label .ico{
    background: url('../img/rank_hero_ico.svg') no-repeat;
    width: 14px;
    height: 14px;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
}

.hero-label .content{
    color: #C41717;
    text-align: right;
    display: block;
    font-size: 14px;
    font-weight:500;
    padding-left:5px;
}

/* prestige-label-lightblue */

.prestige-label{
    display: flex;
    justify-content: left;
    align-items: center;
}

.prestige-label .ico{
    background: url('../img/rank_prestige_ico.svg') no-repeat;
    width: 14px;
    height: 14px;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
}

.prestige-label .content{
    color: #4688ED;
    text-align: right;
    display: block;
    font-size: 14px;
    font-weight:500;
    padding-left:5px;
}

/* honor-label-green*/

.honor-label{
    display: flex;
    justify-content: left;
    align-items: center;
}

.honor-label .ico{
    background: url('../img/rank_honor_ico.svg') no-repeat;
    width: 14px;
    height: 14px;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
}

.honor .content{
    color: #12776B;;
    text-align: right;
    display: block;
    font-size: 14px;
    font-weight:500;
    padding-left:5px;
}

/* honor-optimiser-brown*/

.optimiser-label{
    display: flex;
    justify-content: left;
    align-items: center;
}

.optimiser-label .ico{
    background: url('../img/rank_optimiser_ico.svg') no-repeat;
    width: 14px;
    height: 14px;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
}

.optimiser .content{
    color: #5B4933;;
    text-align: right;
    display: block;
    font-size: 14px;
    font-weight:500;
    padding-left:5px;
}

/* 040124 Product Popup Information */

.product-information-content p{
    color: #7e7e7e;
    font-size: 15px;
    line-height: 22px;
}


/* 200424 bank logo */

.order-completed-wallet-icon{
    display: flex;
    align-items: end;
    padding-bottom: 13px;
    padding-right: 15px;
}

.order-completed-wallet-icon img{
    height: 36px;
}

/* 020524 payment loadidng */
.bg-milk{
    height: 100%;
    overflow: hidden;
    background-color: #fcfcfb;
}

.bg-loading{
    height: 100%;
    overflow: hidden;
    background: url(../img/loader_bg1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #FFFFFF;
}

.loader h2{
    color: #254541;
    font-size: 26px;
    line-height: 32px;
    margin-top: 20px;
    font-weight: 600;
}

.loader .animation{
    position: relative;
    z-index: 100;
    pointer-events: none;
    width:40%;
}

.central-body{
        padding: 15% 5%;
        text-align: center;
    }

@media only screen and (max-width: 600px){   
    .central-body{
        padding-top: 50%;
    }

    .loader .animation{
        width:65%;
    }
}

.width-48{
    width:48%;
}

/* order completed adjustment */

.word-b{
    word-break: break-word;
}

/* 11-12-23 */
/* dashboard shortcut new label */
/*  
.d-new-label {
    position: absolute;
    z-index: 1;
    margin-top: 2px;
}

/* Responsibe Tablet ready Added

@media only screen and (max-width: 768px) {

    .sidebar-mobile{
        display: block;
    }

     .sidebar-desktop{
        display: none;
    }

 }

@media only screen and (min-width: 769px) {

    .sidebar-mobile{
        display: none;
    }

     .sidebar-desktop{
        display: block;
        left: 0px;
    }

    .app-wrapper-area{
        padding-left: 300px ;
    }

    .app-footer-blk{
        width: calc(100% - 300px);
        left: 300px;
    }

    .app-footer-blk ul{
        width: 70%;
    }

    .menu-open-btn{
        display: none;
    }

 }
*/