/* Keep this for all project */

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 100;
    src: url(fonts/konnect/KonnectThin.otf);
}
@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 200;
    src: url(fonts/konnect/KonnectLight.otf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 300;
    src: url(fonts/konnect/KonnectRegular.otf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/konnect/KonnectMedium.otf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 500;
    src: url(fonts/konnect/KonnectSemiBold.otf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 600;
    src: url(fonts/konnect/KonnectBold.otf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 700;
    src: url(fonts/konnect/KonnectExtraBold.otf);
}

.body, div, a, button, span, input, section,footer,header {
    font-family: "MainFont", "Konnect", sans-serif;
    color: #000;
    font-size: 17px;
}

.font2 {
    font-family: "SecondFont", sans-serif !important;
}

/* Keep until here */

body {
    background-color: #f8f8f8;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}
.loginPagePadding {
    padding-left: 23px;
    padding-right: 23px;
}

.blackFont {
    font-weight: 300;
    text-transform: none;
    font-size: 16px;
    color: black;
    /*padding: 0px;*/
}

/* Dashboard */
.section {
    padding: 5% 8% 5% 8%;
    background: #f8f8f8;
}

.section1_div {
    border-radius: 8px;
    padding: 25px 20px;
    background: white;
    flex: 1;
    overflow: hidden;
}

.section1_img{
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.dbRankTitle {
    font-size: 18px;
    font-weight: 400;
    color: #000;
}

.dbRankTitle .rankLevel {
    font-weight: 600;
}

.redFont{
    color:red;
    font-size: 17px;
    font-weight: 300 !important;
}

.grayFont{
    color: #90939D;
    /*font-size: 15px;*/
}

.removePromo {
    cursor: pointer;
    text-decoration: underline;
    color: #8cbe44;
}

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

.lightBold {
    font-weight: 500;
}

.bold {
    font-weight: 600;
}

.blackFont2{
    font-size: 16px;
    color: black;
}

.smallLink {
    font-size: 16px;
    color: #5867dd;
}

.smallLink:hover {
    text-decoration: underline !important;
}

.section2_div{
    border-radius: 5px;
    border-left: 2px solid #f8f8f8;
    height: 100%;
}

.section2_Div_p{
    padding: 0 10px;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}

.dbSponsorNum {
    font-size: 22px;
    font-weight: 600;
    color: #fd9f41;
}

.section2_img{
    width: 20%;
    margin-bottom: 5%;
}

.section2_img2{
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.awardText {
    font-size: 22px;
}

.awardLabel {
    font-size: 16px;
}

.dbOrangeText {
    color: #fd9f41;
    font-size: 16px;
    font-weight: 500;

}

a.dbSmallLink {
    color: #fd9f41;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;

}

a.dbSmallLink:hover {
    color: #E99241;
}

.dbBanner {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.dbNews .content {
    font-size: 16px;
}

/* Line Progress bar*/
.progressBar {
    border-radius: 0px; 
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 10px;
    box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
}

.progressBar::-webkit-progress-bar {
    background-color: #f8f8f8;
    border-radius: 0px;
}

.progressBar::-webkit-progress-value {
    background-color: #fd9f41;
    border-radius: 0px;
}

.dbRankDate {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
}

.dbPvDate {
    font-size: 16px;
}

/* Circular Progress Bar */
.circlechart.big .circle-chart {
    width: 180px;
    height: 180px;
}

.circle-wrap {
    margin: 10% 15%;
    width: 150px;
    height: 150px;
    background: #ffbf57;
    border-radius: 50%;
}

.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
    width: 150px;
    height: 150px;
    position: absolute;
    border-radius: 50%;
}

.circle-wrap .circle .mask {
    clip: rect(0px, 150px, 150px, 75px);
}

.circle-wrap .inside-circle {
    width: 122px;
    height: 122px;
    border-radius: 50%;
    background: #fd9f41;
    line-height: 120px;
    text-align: center;
    margin-top: 14px;
    margin-left: 14px;
    color: #1e51dc;
    position: absolute;
    z-index: 100;
    font-weight: 700;
    font-size: calc(2em + 2px);
}

.mask .fill {
    clip: rect(0px, 75px, 150px, 0px);
    background-color: white;
}

.mask.full,
.circle .fill {
    animation: fill ease-in-out 3s;
    transform: rotate(135deg);
}


/* Second Circular Progress Bar */
.circle-wrap2 {
    margin: 10% 15%;
    width: 150px;
    height: 150px;
    background: #85b1f2;
    border-radius: 50%;
}

.circle-wrap2 .circle2 .mask2,
.circle-wrap2 .circle2 .fill2 {
    width: 150px;
    height: 150px;
    position: absolute;
    border-radius: 50%;
}

.circle-wrap2 .circle2 .mask2 {
    clip: rect(0px, 150px, 150px, 75px);
}

.circle-wrap2 .inside-circle2 {
    width: 122px;
    height: 122px;
    border-radius: 50%;
    background: white;
    line-height: 120px;
    text-align: center;
    margin-top: 14px;
    margin-left: 14px;
    color: #1e51dc;
    position: absolute;
    z-index: 100;
    font-weight: 700;
    font-size: calc(2em + 2px);
}

.mask2 .fill2 {
    clip: rect(0px, 75px, 150px, 0px);
    background-color: #2e82ff;
}

.mask2.full2,
.circle2 .fill2 {
    animation: fill ease-in-out 3s;
    transform: rotate(180deg);
}

/* Third Circular Progress Bar */
.circle-wrap3 {
    margin: 10% 15%;
    width: 150px;
    height: 150px;
    background: #9cff9c;
    border-radius: 50%;
}

.circle-wrap3 .circle3 .mask3,
.circle-wrap3 .circle3 .fill3 {
    width: 150px;
    height: 150px;
    position: absolute;
    border-radius: 50%;
}

.circle-wrap3 .circle3 .mask3 {
    clip: rect(0px, 150px, 150px, 75px);
}

.circle-wrap3 .inside-circle3 {
    width: 122px;
    height: 122px;
    border-radius: 50%;
    background: white;
    line-height: 120px;
    text-align: center;
    margin-top: 14px;
    margin-left: 14px;
    color: #1e51dc;
    position: absolute;
    z-index: 100;
    font-weight: 700;
    font-size: calc(2em + 2px);
}

.mask3 .fill3 {
    clip: rect(0px, 75px, 150px, 0px);
    background-color: #24c724;
}

.mask3.full3,
.circle3 .fill3 {
    animation: fill ease-in-out 3s;
    transform: rotate(180deg);
}

/* Fourth Circular Progress Bar */
.circle-wrap4 {
    margin: 20% auto 20% auto;
    width: 150px;
    height: 150px;
    background: #f8f8f8;
    border-radius: 50%;
}

.circle-wrap4 .circle4 .mask4,
.circle-wrap4 .circle4 .fill4 {
    width: 150px;
    height: 150px;
    position: absolute;
    border-radius: 50%;
}

.circle-wrap4 .circle4 .mask4 {
    clip: rect(0px, 150px, 150px, 75px);
}

.circle-wrap4 .inside-circle4 {
    width: 122px;
    height: 122px;
    border-radius: 50%;
    background: white;
    line-height: 120px;
    text-align: center;
    margin-top: 14px;
    margin-left: 14px;
    color: #1e51dc;
    position: absolute;
    z-index: 100;
    font-weight: 700;
    font-size: calc(2em + 2px);
}

.mask4 .fill4 {
    clip: rect(0px, 75px, 150px, 0px);
    background-color: #fd9f41;
}

.mask4.full4,
.circle4 .fill4 {
    animation: fill ease-in-out 3s;
    transform: rotate(90deg);
}

.circle-wrap4 {
    transform: rotate(-90deg) scale(1.25);
}

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

.bold {
    font-weight: 600;
    font-size: 20px;
}

.whiteFont{
    color: white;
    font-size: 17pxpx;
}

.orangeFont{
    color:#fd9f41 !important;
    font-size: 20px;
}

.blueFont{
    color: #27a9e0 !important;
    font-size: 20px;
}

.greenFont{
    color:#8cbe44;
    font-size: 20px;
}

.centerText{
    margin-top: auto;
    margin-bottom: auto;
}

.section3_div{
    background: white;
    border-radius: 5px;
}

.section3_row{
    background: #fd9f41;
    margin:5%;
    border: 2px solid #E5E7ED;
    border-radius: 10px;
}

.section3_row2{
    background: white;
    border: 1.5px solid #E5E7ED;
    border-radius: 10px;
}

.tableHeader {
    background: #f8f8f8;
}

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

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

.monthlySalesTable{
    width:100%;
    height: 85%;
}

.monthlySalesTable tr td{
    padding:4% 2% 0% 2%;
    color:black;
    font-weight: 600;
}

.tableHeader td{
    font-size:17px;
    padding: 2% !important;
}

/*.selection.form-control {
    font-size: 14px;
}*/

.monthSelWrap {
    position: relative;
}

.monthselWrapDisplay {
    border: 1px solid #E0E0E0 !important;
    width: 100%;
    height: calc(1.5em + 1.3rem + 5px);
    border-radius: 3px;
    background: #fff !important;
    color: #000 !important;
    display: flex;
    justify-content: space-between;
}

.monthSelBox {
    position: absolute;
    top: 100%;
    left: 0;
    background: #f8f8f8;
    min-width: 150px;
    box-shadow: 0px 1px 10px rgb(0 0 0 / 20%);
    display: none;
    z-index: 1;
}

.monthSelWrap input:checked + .monthSelBox {
    display: block;
}

.monthSelOption {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.monthSelOption:hover {
    background-color: #ddd;
}

/* News Slides */
.newsSlide {
    display: none;
    height: 100%;
}

.newsPrev, .newsNext {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: black;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.slideLine {
    cursor: pointer;
    height: 5px;
    width: 5px;
    margin-right: 20px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.slideLine.active {
    height: 5px;
    width: 40px;
    border-radius: 5px;
    background-color: #fecfa0;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.slideLine:hover {
    background-color: rgba(255, 128, 0, 0.9);
}

.fading {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

.sideBarList{
    margin-top:15%;
}

/*.sidebarDiv:hover,.sideBarItem:hover, .sideBarItem.active{
    border-left: 5px solid white;
    border-image: linear-gradient(to bottom, white 20%,#fd9f41c7 20%,#fd9f41c7 80%,white 80%);
    border-image-slice: 1;
}*/
/*
.sidebarDiv > div > div:hover{
    background: #fd9f41c7;
    border-image: linear-gradient(to bottom, white 20%,#fd9f41 20%,#fd9f41 80%,white 80%);
    border-radius: 5px;
}

.sidebarDiv > div > div:hover > a > i,
.sidebarDiv > div > div:hover > a > p{
    color: #f8f8f8;
}



.sidebarDiv.active{
    border-left: 5px solid white;
    border-image: linear-gradient(to bottom, white 20%,#fd9f41 20%,#fd9f41 80%,white 80%);
    border-image-slice: 1;
}

.sidebarDiv.active > div > div{
    background: #fd9f41;
    border-radius: 5px;
}

.sidebarDiv.active > div > div > a > i,
.sidebarDiv.active > div > div > a > p{
    color: white;
}

.sidebarDiv{
    padding-left: 2%;
}*/

.dashboardLogo{
    width:50%;
    margin-left: 25%;
    margin-top: 15%;
}

.dashboardIcon{
    width:15%;
    display: inline;
}

.dashboardText{
    display: inline;
    font-size:15px;
    margin-left: 5%;
}

.dashboardFooter {
    margin-left: 15%;
    position: absolute;
    bottom: 1%;
}

.dashboardFooterText{
    font-size: 17px;
    font-weight: 300;
    line-height: 1;
}

.dbPointLabel {
    font-size: 16px;
}

.dbPointNum {
    font-size: 22px;
    font-weight: 600;
    color: #000;
}

.dbGrayBg {
    background: #f8f8f8;
    padding: 20px;
}

.dashboardSection01 {
    background: rgb(63,186,255);
    background: linear-gradient(180deg, rgba(63,186,255,1) 0%, rgba(63,184,255,1) 16%, rgba(60,169,251,1) 46%, rgba(59,161,249,1) 62%, rgba(59,161,249,1) 81%, rgba(140,202,255,1) 90%, rgba(255,255,255,1) 100%);
    padding: 20px 0 30px 0;
    margin-top: 121.5px;
}

.dashboardSection01Title {
    color: #E5F645;
    text-align: center;
    border-right: 1px solid #fff;
}

.dashboardSection01Title:last-child {
    border-right: 1px solid transparent;
}
 
.dashboardSection01Content {
    color: #fff ;
 }

.dashboardSection02 {
    padding-top: 20px;
    background-image: url(/images/project/dashboardBG.jpg);
    background-size: cover;
}

.dashboardSection02Line {
    height: 2px;
    display: block;
    padding-top: 2px;
    background: rgb(150,150,150);
    background: -webkit-linear-gradient(left, rgba(71,109,166,0) 0%, rgba(71,109,166,1) 40%, rgba(71,109,166,1) 60%, rgba(71,109,166,0) 100%);
    background: -o-linear-gradient(left, rgba(71,109,166,0) 0%, rgba(71,109,166,1) 40%, rgba(71,109,166,1) 60%, rgba(71,109,166,0) 100%);
    background: linear-gradient(to right, rgba(71,109,166,0) 0%, rgba(71,109,166,1) 40%, rgba(71,109,166,1) 60%, rgba(71,109,166,0) 100%);
}

.dashboardSection02icon {
    width: 20px;
}

.btn.btn-primary, .btn.btn-default, .btn.btn-default2 {
    font-weight: 500;
    font-size: 16px;
    border: none;
    border-radius: 0;
    padding: 12px 40px;
    cursor: pointer;
    margin: 0;
}

.btn.btn-primary {
    background: linear-gradient(to bottom, #F6746C, #C72D24) !important;
    color: #fff;
}

.btn.btn-primary.blue {
    background: linear-gradient(to bottom, #424e6b, #22293b) !important;
}

.btn.btn-primary.green {
    background: #8cbe44 !important;
}

.btn.btn-primary.grey {
    background: linear-gradient(to bottom, #858585, #5d5d5d) !important;
}

.uploadBtn {
    background: #ff9f45;
    color: #fff;
}

.btn.btn-default2 {
    background: #ffffff;
    border: 1px solid #90939D;
    color: #000000;
}

.btn.btn-default {
    background-color: #90939D;
    border: none;
    color: #fff;
}

/*.btn.btn-primary.active, 
.btn.btn-primary:active, 
.btn.uploadBtn:hover, 
.btn.btn-primary:hover, 
.show>.btn.btn-primary, 
.btn.btnThemeModal:hover,
.btn-primary:not(:disabled):not(.disabled):active{
    filter: brightness(90%);
}*/

.btn.btn-primary.active, 
.btn.btn-primary:active, 
.btn.uploadBtn:hover, 
.btn.btn-primary:hover, 
.show>.btn.btn-primary, 
.btn.btnThemeModal:hover,
.btn-primary:not(:disabled):not(.disabled):active{
    background: linear-gradient(to bottom, #F6746C, #C72D24);
    color: #fff;
}

.btn.btn-primary.blue.active, 
.btn.btn-primary.blue:active, 
.btn.btn-primary.blue:hover, 
.btn.uploadBtn.blue:hover, 
.show>.btn.btn-primary.blue, 
.btn.btnThemeModal.blue:hover,
.btn-primary.blue:not(:disabled):not(.disabled):active{
    background: linear-gradient(to bottom, #424e6b, #22293b);;
}

.btn.btn-primary.green.active, 
.btn.btn-primary.green:active, 
.btn.uploadBtn.green:hover, 
.btn.btn-primary.green:hover, 
.show>.btn.btn-primary.green, 
.btn.btnThemeModal.green:hover,
.btn-primary.green:not(:disabled):not(.disabled):active{
    background: #7AA43D;
}

.btn.btn-primary.grey.active, 
.btn.btn-primary.grey:active, 
.btn.uploadBtn.grey:hover, 
.btn.btn-primary.grey:hover, 
.show>.btn.btn-primary.grey, 
.btn.btnThemeModal.grey:hover,
.btn-primary.grey:not(:disabled):not(.disabled):active{
    background: linear-gradient(to bottom, #858585, #5d5d5d);
}

.btn.btn-default2.active, .btn.btn-default2:active, .btn.btn-default2:hover, .show>.btn.btn-default2, .btn.btnThemeModal:hover ,.btn-default2:not(:disabled):not(.disabled):active{
    border: 1px solid #90939D;
    background: #f4f2f2;
}

.btn.btn-default.active, .btn.btn-default:active, .btn.btn-default:hover, .show>.btn.btn-default, .btn.btnDefaultModal:hover , .btn-default:not(:disabled):not(.disabled):active{
    background-color: #787A82;
    border: none;
    color: #fff;
}

.letterSpace {
    letter-spacing: .1rem;
    text-indent: .1rem;
    text-transform: uppercase;
}

.modal-title {
    font-size: 22px;
    font-weight: 600;
    color: #000;
}

.modal-icon {
    width: 100px;
    font-size: 82px;
}

.modalText {
    font-size: 17px;
    font-weight: 300;
}

.modal .btn-primary, .modal .btn-default {
    min-width: 120px;
}

.walletBox {
    width: 250px;
    background-image: url(/images/project/walletBox.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 100px 50px;
    margin-right: 20px;
}

.walletBoxText1 {
    color: #000;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 3px;
}

.walletBoxText2 {
    color: #000;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 3px;
}

.btn-more {
    font-weight: 400;
    font-size: 17px;
    color: #fff;
    background: rgb(98,186,232);
    background: linear-gradient(90deg, rgba(98,186,232) 0%, rgba(63,104,176) 100%);
    border-top-left-radius: 35px;
    border-bottom-right-radius: 35px;
    border: unset;
    padding-left: 20px;
    padding-right: 20px;
    letter-spacing: 3px;
    padding: 5px 18px;
}

.goldLine {
    height: 3px;
    display: block;
    padding-top: 2px;
    background: rgb(140,96,52);
    background: -webkit-linear-gradient(left, rgba(140,96,52) 0%, rgba(255,231,159) 50%, rgba(166,112,51) 100%);
    background: -o-linear-gradient(left, rgba(140,96,52) 0%, rgba(255,231,159) 50%, rgba(166,112,51) 100%);
    background: linear-gradient(to right, rgba(140,96,52) 0%, rgba(255,231,159) 50%, rgba(166,112,51) 100%); 
}

.dashboardSection03 {
    padding: 20px 0 20px 20px;
}
 
.dashboardSection03Bg {
    background-image: url(../images/project/dashboardBG2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.dashboardSection03Content {
    background-color: #E0EAF0;
    padding-bottom: 30px;
}

.dashboardSection03Padding {
        padding-top: 18px;
}

.dashboardSection03Title {
    width: 230px;
    margin-top: 25px;
    padding: 5px 0px 5px 20px;
    background-color: #fff;
    color: #000;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 3px;
}

.dashboardSection03ContentBlock {
    color: #3F68B0;
    text-align: center;
    border-right: 1px solid #666666;
}

.dashboardSection03ContentBlock:last-child {
    border-right: 1px solid transparent;
}

.dashboardSection03ContentDetail {
    color: #000;
}

.dashboardSection03Padding {
    padding-right: 0;
}

.diagramBtnBox {
    background-color: #fff;
    padding: 3px 3px;
    position: unset;
    display: inline-block;
}

.diagramBtnBoxFloat {
    background-color: #fff;
    padding: 3px 3px;
    border: 1px solid #cacaca;
    border-radius: 8px;
    position: fixed;
    top: 23%;
    left: 55px;
    z-index: 4;
    box-shadow: 5px 5px 10px #00000052;
}

.diagramBtnBoxMobile {
    background-color: #fff;
    padding: 3px 3px;
    border: 1px solid #cacaca;
    border-radius: 8px;
    position: fixed;
    top: 15%;
    left: 27px;
    z-index: 4;
    box-shadow: 5px 5px 10px #00000052;
    display: inline-flex;
    flex-flow: column-reverse;
}

.copiedMsg {
    color: #000;
    font-size: 15px;
    text-align: center;
    /*margin-bottom: 10px;*/
}

.copiedMsg i {
    background-color: #32CD32;
    color: #fff;
    font-size: 17px;
    padding: 2px 3px;
    margin-top: -2px;
    margin-right: 4px;
    border-radius: 50%;
}

.btn.btnSocial {
    padding: 10px 7px;
}

.btnSocial {
    color: #000;
}

.btnSocial:hover {
    color: #CCC;
}

.pageContentWrapper {
    background-color: #f3f3f3;
}

/* .pageContent{
    padding-top: 30px;
    padding-bottom: 0px;
    background-color: #f3f3f3;
} */

.pageTitle{
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 0;
}

.form-control.login.inputPrepend, .form-control.login.inputPrepend:focus {
    border: none;
}

.login-input-group-text.inputAppendText {
    margin: 0 10px;
    color: #2F584F;
    font-weight: 300;
    font-size: 15px;
}

.login-input-group-text i {
    color: #A0A0A0;
    font-size: calc(1.2rem + 2px);
}

.login-input-group-text.inputAppendText.smallLinkBtn:hover {
    color: #121212; 
}

.filter .input-group-text{
    background: #fff;
    border: none;
}

.filter .input-group .form-control {
    border: none;
}

/*.filter .input-group>.form-control:not(:last-child){
    border-right: 0;
}

.filter .input-group>.form-control:not(:first-child){
    border-left: 0;
}*/

.filter .input-group {
    border: 1px solid #E0E0E0;
    border-radius: 4px;
}

.filter .input-group:focus-within, .filter .input-group:hover {
    border: 1px solid #ff9f45;
}

.resetBtnStyle {
    color: #000; 
    font-size: 22px; 
    cursor: pointer;
}

.form-control:hover, .form-control:focus {
    border-bottom: 1px solid #ec655d;
}

.form-control2:hover, .form-control2:focus {
    border: 1px solid #ec655d;
}

.form-control.blue:hover, .form-control.blue:focus {
    border: 1px solid #27A9E0;
}

.form-control.green:hover, .form-control.green:focus {
    border: 1px solid #8cbe44;
}

.homepage_modal_flex_div .form-control:hover, .homepage_modal_flex_div .form-control:focus {
    border: none;
}

/*.input-group-prepend{
    border-left: 1px solid #ececec;
}*/

.input-group>.input-group-prepend>.input-group-text{
    border: 1px solid #E0E0E0;
}

.input-group.greyBtnWrap .input-group-prepend {
    border-right: none;
    background: transparent;
}

.input-group.greyBtnWrap .form-control {
    border-left: none;
}

.input-group.greyBtnWrap .input-group-text {
    padding: 0 10px;
    background-color: transparent;
}

.input-group.greyBtnWrap .btn.greyBtn {
    padding: 3px 10px;
    border-radius: 2px;
    background: #E0E0E0;
    font-weight: 600;
    font-size: 15px;
}

.inputBox{
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 5px;
}

.form-control{
    border: none;
    border-bottom: 2px solid #E0E0E0;
    height: calc(1.5em + 1.3rem + 5px);
    border-radius: 0;
}

.form-control2{
    border: 1px solid #E0E0E0;
    height: calc(1.5em + 1.3rem + 5px);
    border-radius: 0;
}

.input-group-prepend .btn{
    font-weight: 500;
}

/*START ADDRESS LISTING*/
.contentWrapper{
    padding: 2% 2% 2% 2%;
}

.whiteBg{
    background: #ffffff;
}
/*END ADDRESS LISTING*/


/*START CUSTOMIZE TABLE*/
.dataTables_wrapper .dataTable th, .table th{
    color: #000000;
}

.dataTables_wrapper .dataTable{
    border-spacing: 0 10px;
}

.table-striped tbody tr:nth-of-type(odd){
    background-color: #f8f8f8;
}

.table {
    font-size: 17px;
}

.table {
    border-collapse: collapse;
    text-align: left;
}

.table th, .table td {
    border-top: none;
}

.table tr {
    border-bottom: 1px solid #E9EBF2;
}

.table tr.tableHeader {
    border-bottom: none;
}

.table tr:last-child {
    border-bottom: none;
}

.table thead th{
    vertical-align: top;
}

.table thead tr th {
    border-bottom: none;
}

.table tbody tr td {
    border-bottom: 1px solid #ebedf2;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr {
    height: 60px;
}

.whiteBg .table-responsive {
    /*padding-top: 15px;*/
    /*padding: 20px;*/
}

/*END CUSTOMIZE TABLE*/

.checkboxTxt{
    color: #000000;
}

.orangeTxt{
    color: #fdb164;
    font-weight: 500;
    font-size: 15px;
}

/*START SPONSOR DIAGRAM*/
.bgDiv {
    background-image: url('/images/project/blue-map.png');
    background-size: cover;
    background-repeat: no-repeat; 
}

.bgMap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 25px;
    width: 100%;
    height: 100%;
}

.hv-wrapper {
    transform-origin: center;
}

.disgramBox {
    font-weight: 300;
    margin: 0;
    background-color: #FFF;
    color: #000;
    padding: 25px 5px;
    border-radius: 7px;
    width: 200px;
    text-align: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.22);
    font-size: 17px;
}

.disgramBoxTitle {
    font-size: 18px;
}

.disgramBoxSubtitle {
    color: #90939D;
}

.disgramBox hr {
    border: 0;
    clear: both;
    display: block;
    width: 96%;
    background-color: #E8E8E8;
    height: 2px;
}

.disgramBoxBtn {
    background-color: #3cb1e3;
    padding: 10px 15px;
    letter-spacing: 2px;
    color: #FFF;
    text-align: center;
    font-weight: 500;
}

.disgramBoxBtn:hover {
    color: #FFF;
}

.emptyDisgramBox {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    /*height: 258px;*/
    flex: 1;
}

.goToReg p {
    color: #000;
}

.bgFooter {
    background: linear-gradient(to bottom, #e1eff6 0%, #f8f8f8 10%, #f8f8f8 90%, #e1eff6 100%);
    /*padding: 10px 75px;*/
}

.bgFooterDiv {
    margin: 15px;
}

.bgFooterDiv img {
    width: 50px;
    height: 50px;
}

.sponsorBtmIcon {
    width: 50px;
    height: 50px;
    margin-right: 15px;
}

.sponsorBtmText {
    font-size: 17px;
    color: #000;
    font-weight: 400;
}

.bgFooterTxt {
    padding: 0 20px;
    color: #000;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: auto;
}
/*END SPONSOR DIAGRAM*/

.profileBox {
    padding: 40px;
    border: 1px solid #fff;
    background-color: #fff;
}

.profileFont01 {
    font-weight: 600;
    font-size: 20px;
    color: #000;
}

.profileFont02 {
    font-weight: 300;
    font-size: 17px;
    color: #000;
}

.profileFont03 {
    font-weight: 300;
    font-size: 15px;
    color: #90939D;
}

.profileFont04 {
    font-weight: 500;
    font-size: 15px;
    color: #000; 
    border: 1px solid #E0E0E0;
    padding: 10px;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
}

.checkIcon {
    font-size: 17px;
    margin-right: 7px;
    /*width: 19px;*/
}

.checkIcon.red {
    color: #ff0000;
}

.checkIcon.green {
    color: #8CBE44;
}

.profileDetailSection {
    background-color: #F8F8F8;
    padding: 17px 25px;
}

.profileDetailSection:nth-child(even) {
    background-color: #fff;
    padding: 10px 25px;
}

.profileFont05 {
    font-weight: 300;
    font-size: 17px;
    color: #90939D; 
}

.profileFont06 {
    font-weight: 500;
    font-size: 17px;
    color: #000; 
    word-break: break-word;
}

.modal .modal-content .modal-header .modal-title,
.modalText {
    /*font-weight: 600;*/
    /*font-size: 22px;*/
    color: #000;
}

.socialMediaIcon {
    width: 37px;
}

.profileIcon {
    width: 150px;
}

.referralTitle {
    font-weight: 600;
    font-size: 17px;
}

.referralWrap {
    background: #F3F3F3;
    border-radius: 5px;
}

.referralBtn {
    background-color: #8CBE44!important;
    border-color: #8CBE44!important;
    margin-left: -20px!important;
}

.form-control.referralInp {
    background: transparent;
    border: none;
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*START KYC PAGE*/
.stepWrap{
    padding: 30px 15px;
}

.kycDescTxt, .kycIcon{
    color: #90939D;
}

.kycIcon{
    font-size: 18px;
}

.blackTxt{
    color: #000000;
    font-weight: 600;
}

.disabledIcon{
    display: none;
}

.verifyBtn{
    text-decoration: underline;
}

.orangeTxt.verifyBtn:hover{
    color:#f5a759;
}

.kycIntroTxt{
    color: #000000;
    line-height: 2;
    font-size: 17px;
}

.kycIconImg {
    height: 60px;
    width: 100%;
    object-fit: contain;
}

.courierBox {
    padding: 50px 20px;
    background-color: #fff;
    height: 300px;
    cursor: pointer;
}

.courierIcon {
    width: 200px;
    height: 200px;
}

/* Mobile View */
@media (min-width: 320px) and (max-width: 767px) {
    .kycIconImg {
        height: 72px;
        width: 120%;
    }
}

.custom-input-group{
    border: 1px solid #ececec;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.verifyIcon{
    font-size: 26px;
    color: #2fa124;
}

.displayWraper{
    display: none;
}

.displayBtn {
   background: #ffffff;
    padding: 25px;
    border-radius: 8px;
    display: block;
    flex: 1;
    font-size: 17px;
    cursor: pointer;
}

.disabledWrap{
    background: #e6e6e6;
    /*cursor: not-allowed;*/
}

.displayBtn.verifiedWrap .disabledIcon{
    display: block;
}

.displayBtn.verifiedWrap .kycIcon{
    display: none;
}

.displayBtn.verified .verifyIcon{
    display: block;
}

.displayBtn.verified .kycIcon{
    display: none;
}

/*.displayBtn.disabled .verifyIcon{
    display: block;
}*/

.displayBtn.disabled .kycIcon{
    display: none;
}

.displayBtn.normal .verifyIcon{
    display: none;
}

.displayBtn.normal .kycIcon{
    display: block;
}

.checkKYC:checked + .displayWraper {
    display: block;
}

/*END KYC PAGE*/

/* Start of Dashboard Pages */
/* Dashboard > My Wallet Page */
.walletDiv {
    background: white;
    padding: 20px;
    border-radius: 8px;
}

.walletImg {
    width:100%;
    max-width:100%;
}

.walletPgLabel {
    color: #000;
    font-size: 17px;
}

.walletPgAmt {
    color: #000;
    font-size: 28px;
    font-weight: 600;
    word-break: break-word;
}

h5, h2, h4 {
    color:black;
}

/* Dashboard > Cash Award*/
.currentRankTitle {
    color: black;
    font-size: 17px;
}

.currentRankText {
    color: #ff9f45;
    font-weight: 400;
    font-size: 17px;
}

.currentRankImg {
    width: 80px;
}

.caPointLabel {
    font-size: 14px;
    color: #000;
}

.caPointNum {
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.cashAwardSelect {
    padding: 0;
    color: white;
    border: 0;
    outline: 0;
    background: #8CBE44;
    font-size: 14px;
    border-radius: 5px;
    font-weight: 600;
}

.cashAwardSelect > option {
    background: #f8f8f8;
    color:black;
}

.yearSelWrap {
    position: relative;
}

.yearSelBox {
    position: absolute;
    top: 100%;
    left: 0;
    background: #f8f8f8;
    min-width: 150px;
    box-shadow: 0px 1px 10px rgb(0 0 0 / 20%);
    display: none;
    z-index: 1;
}

.yearSelWrap input:checked + .yearSelBox {
    display: block;
}

.yearSelOption {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.yearSelOption:hover {
    background-color: #ddd;
}

.awardContent {
    border:1px solid #E6E6E6;
    color: black;
    font-size: 15px;
}

.awardTitle {
    background: #f8f8f8;
    color: #8CBE44;
    font-size: 17px;
}

.awardTitle.fancy {
    background-image: linear-gradient(0deg, rgba(166,202,56,1) 0%, rgba(142,191,67,1) 35%, rgba(134,177,59,1) 100%);
    color: white;
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.fancyBG {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    min-height: 250px;
}

.fancyRank {
    border: 2px solid #ebebeb;
    border-radius: 20px;
}

.crownImg {
    margin-top: -35px;
    margin-left: -20px;
    width: 35px;
}

.awardContent2 {
    border:1px solid #E6E6E6;
    color: #bcbcbc;
    font-size: 15px;
}

.awardTitle2 {
    background: #f8f8f8;
    color: #bcbcbc;
    font-size: 17px;
}
/* End of Dashboard Pages */

#canvasMessage {
    z-index: 9999;
}


.btnDefaultModal,
.btnThemeModal {
    text-transform: uppercase;
    border: 1px solid transparent;
}

.red{
    color: #ef5350;
}

.yellow{
    color: #fadd60;
}

.table .unavailableItem td {
    color: #c1c1c1;
}
.form-control.imgInpBorder{
    border-top-right-radius: 5px!important;
    border-bottom-right-radius: 5px!important;
}

/* Inbox */
.inboxDiv {
    background: #ffffff;
    padding: 25px;
    border-radius: 5px;
    display: block;
    flex: 1;
    font-size: 17px;
    color: #000;
    cursor: pointer;
}

.inboxDiv .inboxTitle {
    font-size: 17px;
    font-weight: 500;
    color: #000;
}

.inboxDiv .inboxHr {
    height: 1px;
    background: #ccc;
    margin: 15px 0;
}

.inboxDiv .inboxContent {
    font-size: 15px;
    color: #aaa;
}

.inboxDiv .inboxFooter {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 400;
    color: #fd9f41;
}

.inboxChatListTop {
    padding: 10px calc(20px + 1rem) 0 calc(20px + 1rem);
    display: flex;
    align-items: flex-end;
}

.inboxChatList {
    padding: 20px!important;
    border-bottom: 0.5px solid #eee!important;
}

.inboxChatList:hover {
    background-color: #eff0f1!important;
}

.inboxChatList.active {
    background-color: #eff0f1!important;
}

.msgNumber {
    background-color: #fd9f41!important;
}

.kt-bg-light-brand,
.kt-bg-light-success {
    background-color: #fff!important;
    font-weight: normal;
}
/* End of Inbox */

/* Download */
.downloadDiv {
    background: #ffffff;
    padding: 25px;
    border-radius: 5px;
    display: block;
    flex: 1;
    font-size: 17px;
    color: #000;
}

.downloadDiv .downloadTitle {
    font-size: 17px;
    font-weight: 500;
    color: #000;
}

.downloadDiv .downloadHr {
    height: 1px;
    background: #ccc;
    margin: 15px 0;
}

.downloadDiv .downloadContent {
    font-size: 15px;
    color: #aaa;
}

.downloadDiv .downloadFooter {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #000;
}

.downloadDiv .downloadFooter .downloadFileName {
    overflow-wrap: break-word;
}

.downloadDiv .downloadBtn {
    margin-top: 10px;
}
/* End of Download */

/*start star program*/
.progressBarPV {
    border-radius: 0px; 
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 15px;
}

.progressBarPV::-webkit-progress-bar {
    background-color: #f2f2f2;
    border-radius: 0px;
}

.progressBarPV::-webkit-progress-value {
    background-color: #27a9e0;
    border-radius: 0px;
}

.starProgramTitle {
    background: #27a9e0;
    color: #FFFFFF;
    font-size: 17px;
}

.starProgramTitle1 {
    background: #f8f8f8;
    color: #27a9e0;
    font-size: 17px;
}

.starProgramContent {
    border:1px solid #d3e9f3;
    color: black;
    font-size: 15px;
}
/*end star program*/

/* News */
.newsSlides {
    display: none;
    height: 100%;
}

.newsImg {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
}

.newsSlideLines {
    cursor: pointer;
    height: 5px;
    width: 5px;
    margin-right: 10px;
    background-color: #ccc;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.newsSlideLines.active {
    height: 5px;
    width: 15px;
    border-radius: 5px;
    background-color: #fecfa0;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.newsSlideLines:hover {
    background-color: rgba(255, 128, 0, 0.9);
}

.newsArrow {
    color: #fecfa0;
    cursor: pointer;
}

.fading {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

.newsContent .content {
    font-size: 17px;
}
/* End of News */

/*Start Of Checkout Verify*/
.hideRadio [type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  display: none;
}

.hideRadio [type=radio] + label {
  cursor: pointer;
    height: calc(1.5em + 1.3rem + 5px);
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 50px;
    border-radius: 5px;
}

.hideRadio .courierOption [type=radio]:checked{
    background-color: red;
}

.hideRadio [type=radio] + label img {
  filter: grayscale(1);
}

.hideRadio [type=radio] + label {
    border: 1px solid #E0E0E0;
    background: transparent;
    font-weight: 500;
}

.hideRadio [type=radio]:checked + label img  {
  filter: grayscale(0);
}

.hideRadio [type=radio]:checked + label{
    background: #f3fcff;
    border: 1px solid #01a0dd;
    color: #01a0dd;
    font-weight: 500;
    padding: 0 20px;
    height: 50px;
    border-radius: 5px;
}

.homepagePadding.checkoutVerify{
    margin-top: 30px;
}

/*End Of Checkout Verify*/

/* Mobile View */
@media (min-width: 320px) and (max-width: 767px) {
    .centerModal {
        padding-top: 25%;
    }
}

.alignMiddle {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    height: auto;
}

#popUpModal.modal .modal-content {
    border-radius: 0px;
}

#popUpModal.modal .modal-content .modal-header .close {
    outline: 0!important;
    color: #000;
    font-family: LineAwesome;
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-transition: all .3s;
    transition: all .3s;
}

#popUpModal .modal-dialog {
    /*max-height: 90vh;*/
    margin-top: 50px;
}

.w3-btn,
.w3-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}

.w3-btn:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.w3-btn,
.w3-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.w3-disabled,
.w3-btn:disabled,
.w3-button:disabled {
    cursor: not-allowed;
    opacity: 0.3
}

.w3-dropdown-hover:hover>.w3-button:first-child,
.w3-dropdown-click:hover>.w3-button:first-child {
    background-color: #ccc;
    color: #000
}

.w3-display-left {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%)
}

.w3-display-right {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%)
}


.w3-black,
.w3-hover-black:hover {
    color: #fff !important;
    background-color: #000 !important;
}



#popUpModal ::-webkit-scrollbar { 
    display: none; 
} 

#popUpModal .modal-body {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0px;
}

.popUpModalClose,
.popUpModalClose:hover {
    position: absolute;
    z-index: 100;
    color: #fff;
    top: 20px;
    right: 20px;
}

.mySlides {
    height: auto;
    width: auto;
    /*max-height: 85vh;*/
    max-width: 85vw;
    margin: auto;
}

.walletWrapper{
    padding: 15px 20px;
}

.walletWrapper.active{
    background: #f5f5f5;
    border-radius: 7px;
}

.withdrawBalance {
    font-size: 17px;
    font-weight: 400;
    color: #000;
}

.leadershipCashRewardData{
    padding-block: 0.5em;
    font-size: 16px;
    color: #676767;
}

.leadershipCashRewardText{
    font-weight: bold;
    color: #000;
}

/* Navbar */

.seperateLine {
    color: #efefef;
    font-size: 20px;
}

/* Homepage */

.titleText.larger {
    font-size: 37px;
    line-height: 1.2;
}

.titleText.smaller {
    font-size: 27px;
}

.bodyText.larger {
    font-size: 18px;
}

.bodyText.smaller {
    font-size: 15px;
}

.borderBottom.white.light {
    border-bottom: 1px solid #d1d1d1;
}

.borderTop.grey.light {
    border-top: 1px solid #e5e5e5;
}

.borderRight.grey.light {
    border-right: 1px solid #e5e5e5;
}

.borderAll.grey.light {
    border: 1px solid #e5e5e5;
}

.borderAll.red.light {
    border: 1px solid #fc6b64;
}

.borderAll.grey.normal {
    border: 2px solid #e5e5e5;
}

.borderBottom.grey.normal {
    border-bottom: 2px solid #e5e5e5;
}

.borderBottom.darkGrey.normal {
    border-bottom: 2px solid #d7d7d7;
}

.borderTop.none {
    border-top: none;
}

.ourServicesImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-underline {
    text-decoration: underline;
}

.text-grey {
    color: #90939b;
}

.text-green {
    color: #6bcf5b;
}

.form-group label,
.radio-group label {
    color: #000;
    font-size: 15px;
    font-weight: 400;
}

.form-control {
    font-size: 15px;
}

a:hover,
a:focus {
    color: #ec655d;
}

a.text-underline:hover,
a.text-underline:focus {
    text-decoration: underline !important;
}

/* My Cart */

.checkoutBg {
    background-image: url('../images/project/mycart-banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Stepper */

:root {
    /* Cart Stepper */
    --circle-size: clamp(1rem, 2vw, 2rem);
    --spacing: clamp(0.25rem, 0.5vw, 0.5rem);

    /* Order Status Stepper */
    --os-circle-size: clamp(2rem, 2vw, 2rem);
    --os-spacing: clamp(0.5rem, 0.5vw, 0.5rem);
}
  
.c-stepper {
    display: flex;
    padding: 0;
}

.c-stepper__item {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
}

.c-stepper__item::before {
    --size: 3rem;
    content: "";
    display: block;
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    background-color: #e1e1e1;
    margin: 0 auto 1rem;
}

.orderStatus .c-stepper__item::before {
    display: inline-block;
    width: var(--os-circle-size);
    height: var(--os-circle-size);
    background-color: #959595;
    font-family: 'FontAwesome';
    content: '\f00c';
    font-weight: 900;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.c-stepper__item.active::before {
    border: calc(var(--circle-size) / 3) solid #ec4a41;
    background-color: #fff;
}

.orderStatus .c-stepper__item.active::before,
.orderStatus .c-stepper__item.activeNext::before {
    border: none;
    background-color: #ec4a41;
}

.c-stepper__item:not(:last-child)::after {
    content: "";
    position: relative;
    top: calc(var(--circle-size) / 2);
    width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
    left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
    height: 0.15rem;
    background-color: #e1e1e1;
    order: -1;
}

/* .orderStatus .c-stepper__item:not(:last-child)::after {
    width: calc(100% - var(--os-circle-size) - calc(var(--os-spacing) * 2));
    left: calc(50% + calc(var(--os-circle-size) / 2 + var(--os-spacing)));
    background-color: #959595;
} */

.c-stepper__title {
    font-weight: 300;
    font-size: 15px;
    margin-bottom: 0.5rem;
    color: #949494;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orderStatus .c-stepper__title:first-child {
    color: #000;
    font-weight: 500;
}

.orderStatus .c-stepper__item.active .c-stepper__title,
.orderStatus .c-stepper__item.activeNext .c-stepper__title {
    color: #ec4a41;
}

.orderStatus .c-stepper__item:not(:first-child)::after {
    content: unset;
}

.orderStatus {
    position: relative;
}

.orderStatus .c-stepper__item {
    z-index: 9;
}

.orderStatus .c-stepper__item:first-child::after {
    position: absolute;
    width: unset;
    height: 80%;
    left: 12px;
    background-color: unset;
    border-left: 1.5px solid #959595;
    z-index: -1;
}


.orderStatus .c-stepper__item .c-stepper__title:last-child {
    position: relative;
    right: 111%;
}

.orderDetails .seperateLine {
    border-bottom: 1.5px solid #d5d5d5;
}

.orderDetails #orderDetailsTable2 .totalLine {
    border-top: 1.5px solid #d5d5d5;
}

@media (min-width: 768px) {
    .orderStatus .c-stepper__item:not(:last-child)::after {
        content: '';
        position: relative;
        width: calc(100% - var(--os-circle-size) - calc(var(--os-spacing) * 2));
        left: calc(50% + calc(var(--os-circle-size) / 2 + var(--os-spacing)));
        height: 0.15rem;
        background-color: #e1e1e1;
        border-left: unset;
        z-index: unset;
    }

    .orderStatus .c-stepper__item.activeNext::after {
        background-color: #ec4a41;
    }

    .orderStatus.c-stepper {
        left: unset;
    }

    .orderStatus .c-stepper__item .c-stepper__title:last-child {
        position: relative;
        right: unset;
    }

    .orderDetails .seperateLine {
        border-bottom: unset;
    }
}

/* End Stepper */

.greyBg {
    background-color: #f8f8f8;
}

.radio-group {
    cursor: pointer;
}

.radio-control:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #d1d3d1;
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-control:checked:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #fff;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 5px solid #ec4a41;
}

.paymentMethodContainer {
    object-fit: contain;
    background-color: #fff;
    padding: 10px;
}

.paymentMethodImg {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.paymentMethodImg2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    object-fit: contain;
    background-color: #fff;
}

.paymentMethodContainer .qrCodeImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.darkBlueBg {
    background-color: #1c2232;
}

.orderSummaryImg {
    min-width: 100px;
    height: 80px;
/*    width: 120px;*/
    object-fit: cover;
}

.text-red {
    color: #fc6b64;
}

.orderSummary {
    overflow: scroll;
}

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

.removePromoIcon {
    width: 15px;
    position: absolute;
    right: 10px;
    top: 15px;
    cursor: pointer;
}

.removeCartItemIcon {
    cursor: pointer;
}

.checkoutAddressOr {
    border: 2px solid #e5e5e5;
    border-radius: 50%;
    padding: 6px;
    background-color: #fff;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.removeVoucher {
    position: absolute;
    right: 70%;
    cursor: pointer;
}

#guestShippingAddressForm,
#promoInput {
    display: none;
}

.uploadReceipt {
    position: absolute;
    bottom: 10px;
    right: 0;
}

.button {
    cursor: pointer;
}

.myAccountBg {
    background-image: url('../images/project/myaccount-banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}   

.myAccountBottomLine {
    width: 45px;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #ec655d;
}

input:focus + .slider {
    box-shadow: 0 0 1px #ec655d;
}

input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.isDefaultSlider {
    position: absolute;
    top: 3rem;
    right: 3rem;
}

.dropbtn {
    padding: 5px 10px;
    font-size: 17px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-list {
    display: none;
    position: absolute;
    top: 30px;
    right: 0px;
    background-color: #f9f9f9;
    min-width: 150px;
    box-shadow: 2px 2px 12px #ddd;
    z-index: 1;
    text-align: left;
    border-radius: 5px;
}

.dropdown-list a {
    color: black;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
}

.dropdown-list a:hover {
    background-color: #f1f1f1;
    border-radius: 5px;
}

.dropdown:hover .dropdown-list {
    display: block;
}

.form-control:disabled, .form-control[readonly] {
    background-color: transparent;
}

.cartIcon {
    position: relative;
}

.numOfCartItems,
.numOfFavouriteItems,
.numOfWislistItems {
    position: absolute;
    font-size: 13px;
    border-radius: 3px;
    padding: 1px 4px;
    background-color: #C72D24;
    color: #fff;
    height: 18px;
    top: -5px;
    right: -5px;
    opacity: 0.9;
}

#printContent {
    height: 100%;
}

.pageContent {
    min-height: auto;
}

/****** JP Start ******/
/* Mobile View */
@media (max-width: 767px) {
    .jp-page-banner h1 {
        font-size: 39px !important;
        margin-bottom: 25px;
    }
    .jp-page-banner .col-sm-6:last-child {
        font-size: 23px !important;
    }
    .jp-page-banner .img-fluid {
        margin-bottom: 15px;
        
    }
    section.loginPage .kt-container .login-signup-card .col-md-6 {
        /* padding: 0 30px !important; */
    }

    section.loginPage.forgot-password .kt-container .login-signup-card .col-12 {
        /* padding: 45px 30px; */
    }
    /* .resend-otp {
        right: 25px !important;
    } */
    .button-grey {
        padding: 5px 13px !important;
    }
    section.loginPage .kt-container .login-signup-card .col-md-6:first-child,
    section.loginPage .kt-container .login-signup-card.forgot-password .col-12 {
        /* margin-bottom: 40px !important; */
    }
    .categories-filter {
        padding-right: 15px !important;
    }
    .food-detail-title-div {
        padding-left: 10px !important;
        margin-top: 25px;
    }
    .errorPageTextDiv {
        text-align: center;
    }
    .errorPage .col-md-5 {
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .red-notice,
    .red-border-notice {
        width: 321px !important;
    }

    #cookingSuggestion .red-border-notice {
        width: 100% !important;
    }
    
}
/* Ipad View */
@media (max-width: 990px) {
    .food-detail-title-div {
        padding-left: 40px;
    }
}
/* Ipad Pro View */
@media (max-width: 1199px) {
    .food-detail-title-div {
        padding-left: 40px;
    }
    .col-md-6:first-child .col-md-6:nth-child(even) .col-md-6:last-child {
        max-width: 45%;
        max-height: 100%;
        height:auto;
    }
    
}

@media (min-width: 1025px) {
    section.loginPage .kt-container .login-signup-card .col-md-6:last-child {
        margin-top: 70px;
    }
    section.loginPage.forgot-password .kt-container .login-signup-card .col-12 {
        margin-top: 45px;
        margin-bottom: 45px;
    }
    .food-detail-title-div {
        padding-left: 40px;
    }
    
}
::placeholder {
    font-weight: 300 !important;
    color: #d0d0d0 !important;
}
.btn {
    font-size: unset;
}
.jp-page-banner {
    background-size: cover;
    background-repeat: no-repeat;
    /* padding-top: 42px;
    padding-bottom: 42px; */
}
.jp-page-banner h1 {
    font-size: 42px;
    font-weight: 500;
    line-height: 47px;
}
.jp-page-banner .col-sm-6 {
    align-items: center;
    display: inline-grid;
    color: #fff;
}
.jp-page-banner .col-sm-6:last-child {
    text-align: right;
}
.jp-page-banner .call-us,
.jp-page-banner .call-us a {
    font-size: 29px;
    color: #fff;
}

.jp-page-banner .call-us a {
    text-decoration: underline;
}

.jp-page-banner.login-signup {    
    background-image: url('../images/project/signup-banner.png');
}
.jp-page-banner .img-fluid {
    max-height: 35px;
    margin-left: 10px;
    margin-bottom: 10px;
}

.img-fluid2 {
    aspect-ratio: 1/1 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.login-signup-card {
   box-shadow: 2px 2px 12px #ddd;
   margin-top: 80px;
   margin-bottom: 80px;
   padding: 15px;
}
.loginPage {
    background-color: #f8f8f8;
    height: unset !important;
}
section.loginPage .kt-container {
/*    padding: 45px;*/
}
section.loginPage.forgot-password .kt-container .login-signup-card {
    padding: 0;
}
section.loginPage .login-signup-card {
    padding: 45px 0; 
    background-color: #fff;
}
section.loginPage .login-signup-card .col-md-6 {
    padding: 0 70px;
}

section.loginPage.forgot-password .kt-container .login-signup-card .col-12 {
    /* padding: 45px 70px; */
}
.login-signup-card .col-md-6:first-child {
    border-right: solid 2px #ddd;
}

.button-red,
.button-red:focus,
.button-red:hover,
.button-red:active {
    background-image: linear-gradient(to bottom, #F6746C, #C72D24);
    color: #fff;
    width: 100%;
    border-radius: 0px;
}
.button-fix-width {
    width: 150px !important;
}
.button-fix-width-2 {
    width: 120px !important;
}
.button-reset-password {
    width: 150px !important;
}
.button-link,
.button-link:active, 
.button-link:hover,
.button-link:focus {
    background-color: rgba(0,0,0,0);
    text-align: left;
    color: red;
}
.login-signup-card h3,
h3.jp-title {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 15px;
}
.beforeLoginForm {
    margin-bottom: 15px;
    margin-top: 0px !important;
}
.icon-see {
    position: absolute;
    right: 0;
    top: 60px;
    /* margin-top: -40px; */
}
.login-signup-card .phone.row {
    padding-left: 10px;
    padding-right: 10px;
}
.login-signup-card label {
    margin-top: 15px;
    margin-bottom: 0px;
    font-weight: 400;
}
.login-signup-card select.beforeLoginForm:focus-visible,
.login-signup-card .beforeLoginForm {
    border: 0px solid #e8e8e8;
    border-bottom: 2px solid #e8e8e8;
}
select.beforeLoginForm:focus-visible {
    outline: unset !important;
}
.resend-otp {
    position: absolute;
    right: 0;
    top: 45px;
    /* margin-top: -50px; */
}

.button-grey, 
.button-grey:focus, 
.button-grey:active, 
.button-grey:hover {
    background-image: linear-gradient(to bottom, #979797, #5d5d5d);
    border-radius: 0px;
    color: #fff;
/*    padding: 5px 18px;*/
    cursor: not-allowed;
}
.button-green, 
.button-green:focus, 
.button-green:active, 
.button-green:hover {
    background-image: linear-gradient(to bottom, #1fb706, #167f05);
    border-radius: 0px;
    color: #fff;
    padding: 5px 12px;
}
.thumbnail {
    margin-bottom: 20px;
    padding: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    box-shadow: 0 0 5px #eee;
}
.item.list-group-item {
    float: none;
    width: 100%;
    flex: 100%;
    max-width: 100%;
    background-color: #fff;
    margin-bottom: 10px;
}
.item.list-group-item img.list-group-image {
    margin-right: 10px;
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 400px;
}
.item img.list-group-image,
.item.grid-group-item img.list-group-image {
    aspect-ratio: 1/1 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.item.list-group-item .thumbnail {
    margin-bottom: 0px;
}
.item.list-group-item .caption {
    padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(even) .caption,
.item.list-group-item:nth-of-type(odd) .caption {
    border: solid 1px rgba(0,0,0,0);
    box-shadow: 0 0 0 #fff;
}
/*.item.list-group-item:nth-of-type(odd) {
    background: #eeeeee;
}*/
.item.list-group-item:before, .item.list-group-item:after {
    display: table;
    content: " ";
}
.item.list-group-item img {
    float: left;
}
.item.list-group-item:after {
    clear: both;
}
.list-group-item-text {
    margin: 0 0 11px;
}
#breadcrumbs .breadcrumb {
    background-color: rgba(0,0,0,0);
    padding: 0.75rem 0;
    text-transform: uppercase;
}
#breadcrumbs .breadcrumb .breadcrumb-item:last-child a,
#breadcrumbs .breadcrumb .breadcrumb-item:last-child {
    color: #000;
    font-weight: 500;
}
#breadcrumbs .breadcrumb .breadcrumb-item a,
#breadcrumbs .breadcrumb .breadcrumb-item {
    color: #999;
    font-size: 17px;
}
#breadcrumbs .breadcrumb>li+li:before {
    padding: 0 5px 0 0;
    color: #999;
    content: ">";
}
.well .btn.btn-default i {
    padding-right: unset;
    font-size: 17px;
}
.well .btn.btn-default,
.well .btn.btn-default:hover,
.well .btn.btn-default:focus,
.well .btn.btn-default:active {
    background-color: rgba(0,0,0,0);
    padding: 0.5rem 0.6rem;
    text-align: center;
    border-radius: 3px !important;
    margin-left: 5px;
    margin-right: 5px;
    border: solid 1px #c0c0c0;
}
.well .btn.btn-default i,
.well .btn.btn-default:hover i,
.well .btn.btn-default:focus i,
.well .btn.btn-default:active i  {
    color: #333 !important;
}
.well .form-control {
    height: 36px;
    margin-left: 5px;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    font-size: 17px;
    padding: .65rem;
}
.categories-filter hr.grey-line {
    border-bottom: solid 2px #999;
    width: 35px;
    margin-left: 0;
}
.categories-filter ul {
    padding-inline-start: 0px;
}
.categories-filter li li.active,
.categories-filter li.active {
    color: #f06b63;
    font-weight: bold;
}
.categories-filter li.active li {
    font-weight: 300;
}
.categories-filter li {
    list-style-type: none;
    border-bottom: solid 2px #e0e0e0;
    padding: 10px 0;
    font-size: 17px;
    color: #333;
    cursor: pointer;
    padding-left: 15px;
}
.categories-filter {
    padding-right: 4em;
}
.jp-list-group .thumbnail .caption p.lead .price-slash {
    text-decoration: line-through;
    color: #999 !important;
}
.jp-list-group .thumbnail .caption p.lead {
    font-size: 15px;
    color: #f06b63;
    font-weight: 400;
}
.jp-list-group .thumbnail .caption h4 {
    margin-bottom: 0px;
}
.jp-list-group .button-red.button-red-fix-width {
    width: 120px;
}
.jp-list-group .thumbnail .fa-heart.active {
    color: #f06b63;
}
.jp-list-group .thumbnail .fa-heart {
    font-size: 25px;
    color: #999;
    margin-left: 10px;
    cursor: pointer;
}
.jp-list-group .thumbnail .productFavouriteIcon {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
}
.jp-list-group .thumbnail .productFavouriteIcon .fa-heart.active,
.food-detail-div-fix-width .fa-heart.active {
    color: #ec4a41;
}

.jp-list-group .thumbnail .caption {
    padding: 15px;
    border: solid 2px #eee;
    box-shadow: 0 0 5px #eee;
}
.jp-list-group .cart-btn-div {
/*    height: 80px;*/
}
.jp-list-group .cart-btn-div .col-auto {
    display: flex;
    align-items: center;
}
p.list-group-item-text {
    height: 70px;
    overflow: initial;
   text-overflow: ellipsis;
/*   display: contents;*/
   -webkit-line-clamp: 3;
           line-clamp: 3; 
   -webkit-box-orient: vertical;
   line-height: 20px;
}
.thumbnail-img-div {
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-repeat: no-repeat;
}
.section-product-details {
    padding: 5% 8% 5% 8%;
}
#lightSlider li {
    background-color: #f8f8f8;
}
#lightSlider li img {
    width: 100%;
}
.food-detail-title-line {
    width: 35px;
    border-top: 2px solid rgba(0,0,0,0.2);
    display: block;
    margin-top: 15px;
    margin-bottom: 20px;
}

.food-detail-add-minus span {
    cursor:pointer; 
}
.food-detail-add-minus {
    margin: 20px 0;
}
.food-detail-add-minus .minus {
    margin-right: -5px;
} 
.food-detail-add-minus .plus {
    margin-left: -5px;
} 
.food-detail-add-minus .minus, 
.food-detail-add-minus .plus {
/*    width: 20px;*/
/*    height: 20px;*/
    font-size: 23px;
    font-weight: 500;
    padding: 8px 10px 9px 10px;
    border: 2px solid #ddd;
/*    display: inline-block;*/
    vertical-align: middle;
    text-align: center;
    background-color: #fff;
}
.food-detail-add-minus input:focus-visible,
.food-detail-add-minus input {
/*    height: 34px;*/
    line-height: 25px;
    width: 90px;
    padding: 7px 10px;
    font-size: 23px;
    border: 2px solid #ddd;
    outline: none;
/*    display: inline-block;*/
    vertical-align: middle;
    text-align: center;
}
.red-notice {
    background-color: #ec4a41;
    color: #fff;
    padding: 10px 20px;
    font-size: 15px;
}
.red-border-notice {
    background-color: transparent;
    border: solid 2px #ec4a41;
    padding: 9px 20px 5px 20px;
    font-weight: 500;
}
.red-notice,
.red-border-notice {
    width: 365px;
    display: inline-block;
}
.food-detail-div-fix-width {
    width: 321px;
    margin-top: 10px;
}
.button-dark,
.button-dark:focus,
.button-dark:hover,
.button-dark:active {
    background-image: linear-gradient(to bottom, #424e6b, #222838);
    color: #fff;
    width: 100%;
    border-radius: 0px;
}
.food-detail-div-fix-width p {
    color: #999;
    cursor: pointer;
    margin-top: 15px;
}
.food-detail-div-fix-width i {
    margin-right: 5px;
}
.food-detail-description-tab .nav-tabs {
    border-bottom: unset;
    border-top: 1px solid #dee2e6;
}
.food-detail-description-tab .nav-tabs a, 
.food-detail-description-tab .nav-tabs a:hover, 
.food-detail-description-tab .nav-tabs a:focus, 
.food-detail-description-tab .nav-tabs a:active { 
    color: #999;
    font-weight: 500;
    text-transform: uppercase;
}
.food-detail-description-tab .nav-tabs a.active {
    color: #000;
}
.food-detail-description-tab .nav-tabs li {
    margin-right: 25px;
    padding-top: 10px;
}
.food-detail-description-tab .nav-tabs li:has(a.active) {
    border-top: solid 3px #ec4a41;
}
/*.food-detail-description-tab .tab-content iframe,*/
.food-detail-description-tab .tab-content img {
    margin-top: 25px;
}
.food-detail-description-tab .tab-content {
/*    padding-top: 20px;*/
    padding-bottom: 20px;
}
.food-detail-description-tab .tab-content .tab-pane {
    border-bottom: solid 2px #ddd;
    padding-bottom: 50px;
}
.rating-header .fa-star-half-o,
.rating-header .fa-star-o,
.rating-header .fa-star {
    color: #ffbc00;
}
table.rating {
    max-width: 100%;
    width: 100%;
    display: table;
    margin-bottom: 0;
}
table.rating tr td,
table.rating tr {
    border-bottom: solid 0px  #000;
    padding-top: 0px;
    padding-bottom: 5px;
    height: 30px;
}
table.rating tr td:first-child {
    padding-left: 0;
}
table.rating tr td:first-child,
table.rating tr td:last-child {
    width: 60px;
}
table.rating tr td:nth-child(2) {
    width: calc(100% - 200px);
/*    padding-right: 20px;*/
}
table.rating .progress {
    border-radius: 0px;
    height: 15px;
    background-color: rgba(0,0,0,0);
    border: solid 1px #ddd;
}
table.rating .progress-bar {
    background-color: #ec4a41;
}
.food-detail-description-tab iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: 800px;
}
.red-bordered-div {
    height: calc(100% - 4px);
    border: 2px solid #ec4a41;
    padding: 13px 10px;
    align-items: center;
    display: grid;
    text-align: center;
}
.red-bordered-div p {
    margin-bottom: 0px;
}
.profile-round img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
}
.section-review .col-md-3.col-lg-2 {
    text-align: center;
}
.review-header {
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 5px;
}
.review-description {
    margin-bottom: 15px;
}
.review-time {
    color: #999;
}
.review-row {
    border-bottom: solid 2px #ddd;
    padding-bottom: 15px;
    margin-bottom: 30px;
}
.section-career-header {
    background-image: url('../images/project/visions.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 8%;
}
.section-favourite {
    background-image: url('../images/project/favourites-banner.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.section-career-detail {
    background-image: url('../images/project/operation-executive.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.section-favourite .jp-title,
.section-career-detail .jp-title {
    color: #fff;
    display: inline;
    margin-right: 25px;
}
.section-career-detail span i {
    margin-right: 3px;
}
.section-career-detail span {
    padding: 6px 15px;
    background-color: #ec4a41;
    border-radius: 14px;
    color: #fff;
}
.career-ul {
    padding-left: 0px;
    margin-top: 13px;
}
.career-ul li {
    background-image: url('../images/project/tick-icon.png');
    margin: 0;
    padding: 0px 0px 14px 30px;
    list-style: none;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 18px;
}
.section-shadow {
    padding: 8%;
    background: #f8f8f8;
    box-shadow: 0 0 6px #ddd;
} 
.section-shadow label {
    font-weight: 500;
}
.section-shadow input {
    background-color:  rgba(0,0,0,0);
}
.white-div {
    padding: 8%;
    background-color: #fff;
}
.objective-div {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    font-size: 23px;
    font-weight: 500;
    height: 100%;
    min-height : 200px;
    display: flex;
    align-items: flex-end;
    line-height: 23px;
}
.section .col-md-4:first-child .objective-div {
    background-image: url('../images/project/objective1.jpg');
}
.section .col-md-4:nth-child(2) .objective-div {
    background-image: url('../images/project/objective2.jpg');
}
.section .col-md-4:last-child .objective-div {
    background-image: url('../images/project/objective3.jpg');
}
.career-post {
    border: solid 1px #eee;
    box-shadow: 2px 3px 3px #eee;
    margin-bottom: 25px;
}
.career-post .col-9 {
    padding: 30px 25px 30px 15px;
}
.career-post .label i {
    margin-right: 5px;
}
.career-post .label {
    background-color: #eef1f8;
    padding: 5px 15px;
    border: solid 2px #000;
    border-radius: 15px;
    margin-right: 5px;
    width: min-content;
    margin-bottom: 5px;
}
.career-post .col:first-child img {
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
}
.career-post .col:first-child {
    max-width: 180px;
    padding-right: 0px;
}
.career-post .col:last-child {
    padding: 5% 4% 3% 5%;
}
.favourite-counter {
    color: #fff;
    background-color: rgba(0,0,0,0.8);
    padding: 6px 6px 2px 6px;
    position: absolute;
    text-align: center;
    width: 100px;
}
.errorPage a {
    color: #ec4a41;
    text-decoration: underline;
    font-weight: 500;
}
.errorPage .row {
    min-height: 300px;
    align-items: center;
}
.errorPage img {
    max-width:300px;
}
.attribute-radio-div input {
    margin-left: 10px;
}
ul.lSPager.lSGallery li {
    aspect-ratio: 1/1;
}
ul.lSPager.lSGallery li img {
    min-width: 100%;
    min-height: 100%;
}
/****** JP End ******/
.redBg {
    background-color: #ec4a41;
}

.whatWeSellImg {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.mobileSidebar{
    width: 50%;
}
#orderHistoryPrint .invoiceTable thead tr th,
#orderHistoryPrint2 .invoiceTable thead tr th {
    background-color: #fff !important;
    border: 2px solid #000;
    border-left: 2px solid #000 !important;
    border-right: 2px solid #000 !important;
}
#orderHistoryPrint .invoiceTable thead tr th:first-child,
#orderHistoryPrint2 .invoiceTable thead tr th:first-child {
    border-left: 2px solid #000 !important;
    /* border-right: unset !important; */
}
#orderHistoryPrint .invoiceTable thead tr th:last-child,
#orderHistoryPrint2 .invoiceTable thead tr th:last-child {
    border-right: 2px solid #000 !important;
    /* border-left: unset !important; */
}
#orderHistoryPrint .invoiceTable tbody,
#orderHistoryPrint2 .invoiceTable tbody {
    border: 2px solid #000;
}
#orderHistoryPrint .invoiceTable tbody tr,
#orderHistoryPrint2 .invoiceTable tbody tr {
    height: 45px;
}
#orderHistoryPrint .invoiceTable tbody tr,
#orderHistoryPrint .invoiceTable tbody td,
#orderHistoryPrint2 .invoiceTable tbody tr,
#orderHistoryPrint2 .invoiceTable tbody td {
    border-bottom: unset !important;
}
#orderHistoryPrint .invoiceTable.table td:first-child,
#orderHistoryPrint2 .invoiceTable.table td:first-child {
    border-left: 0px solid #000 !important;
}
#orderHistoryPrint .invoiceTable.table td:last-child,
#orderHistoryPrint2 .invoiceTable.table td:last-child {
    border-right: 0px solid #000 !important;
    background-color: #ddd !important;
}
#orderHistoryPrint .invoiceTable.table td,
#orderHistoryPrint2 .invoiceTable.table td {
    border-left: solid 2px #000 !important;
    border-right: solid 2px #000 !important;
}
#orderHistoryPrint .invoiceTable.table td,
#orderHistoryPrint .invoiceTable.table th,
#orderHistoryPrint2 .invoiceTable.table td,
#orderHistoryPrint2 .invoiceTable.table th {
    padding: 10px !important;
}
#orderHistoryPrint .invoiceTable.table #totalRow td:nth-last-child(2),
#orderHistoryPrint .invoiceTable.table #totalRow td:last-child,
#orderHistoryPrint2 .invoiceTable.table #totalRow td:nth-last-child(2),
#orderHistoryPrint2 .invoiceTable.table #totalRow td:last-child {
    background-color: #b65950!important;
    color: #fff !important;
}
#orderHistoryPrint .invoiceTable.table #totalRow td:nth-last-child(2),
#orderHistoryPrint2 .invoiceTable.table #totalRow td:nth-last-child(2) {
    /* border-right: solid 0px #fff!important; */
    border-left: 2px solid #000 !important;
    border-bottom: solid 2px #000!important;
}
#orderHistoryPrint .invoiceTable.table #totalRow td:last-child,
#orderHistoryPrint2 .invoiceTable.table #totalRow td:last-child {
    /* border-left: solid 0px #fff!important; */
    border-right: solid 2px #000!important;
    border-bottom: solid 2px #000!important;
}
@media print{
    #totalRow tr:last-child {
        border-bottom: solid 0px #000!important;
        -webkit-print-color-adjust:exact ;
    }
    #totalRow tr td:first-child {
/*        border-left: solid 0px #000!important;*/
        border-bottom: solid 0px #000!important;
        -webkit-print-color-adjust:exact ;
    }
    #orderHistoryPrint .invoiceTable.table #totalRow td:nth-last-child(2),
    #orderHistoryPrint .invoiceTable.table #totalRow td:last-child,
    #orderHistoryPrint2 .invoiceTable.table #totalRow td:nth-last-child(2),
    #orderHistoryPrint2 .invoiceTable.table #totalRow td:last-child {
        background-color: #b65950!important;
        color: #fff !important;
        -webkit-print-color-adjust:exact ;
    }

    .receiptTable thead {
        background-color: #1c2232 !important;
    }

    .receiptTable tbody tr {
        background-color: #f8f9fa !important;
    }

    .receiptTable tbody tr,
    .receiptTable tbody tr td {
        border-bottom: none !important;
    }

    .receiptTable tbody tr td {
        border-left: 1px solid #e5e5e5 !important;
        border-right: 1px solid #e5e5e5 !important;
    }

    .receiptTable tbody tr:last-child {
        border-top: 1px solid #e5e5e5 !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }
    
}

.receiptTable thead {
    background-color: #1c2232 !important;
}

.receiptTable tbody tr {
    background-color: #f8f9fa !important;
}

.receiptTable tbody tr,
.receiptTable tbody tr td {
    border-bottom: none !important;
}

.receiptTable tbody tr td {
    border-left: 1px solid #e5e5e5 !important;
    border-right: 1px solid #e5e5e5 !important;
}

.receiptTable tbody tr:last-child {
    border-top: 1px solid #e5e5e5 !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

.fw-500 {
    font-weight: 500;
}
#cookingSuggestion .red-border-notice {
    width: 275px !important;
}
.food-suggestion .card-header .title {
    font-size: 17px;
    color: #000;
}
.food-category li:hover {
    background-color: #eee;
}
.food-category li:has(.card-header) li:hover {
    color: #f06b63;
    font-weight: bold;
}
.food-category li:has(.card-header):hover li {
    background-color: white;
}
.food-category.card li:has(.card-header) .card-header {
    padding: 0.75rem 1.25rem;
}
.food-category.card li:has(.card-header) li {
    border-bottom: 0;
    padding-left: 2rem;
    font-size: 0.9em;
}
.food-category.card li:has(.card-header) li:last-child {
    border-bottom: 0;
}
.food-category.card li:has(.card-header) {
    padding: 0;
}
.food-category.card .card-body {
    padding: 0;
}
.food-category.card {
    border: 0;
}
.food-category .card-header {
    padding: 0;
    background-color: unset;
    border-bottom: 0;
}
.food-category .card-header .accicon,
.food-suggestion .card-header .accicon {
    float: right;
    font-size: 20px;  
    width: 1.2em;
}
.food-suggestion .card-header {
    cursor: pointer;
    border: solid 2px #d3d3d3;
    border-bottom: solid 2px #d3d3d3 !important;
    background-color: #fff;
    border: solid 2px #d3d3d3 ;
    padding: 10px 20px !important;
}
.food-suggestion.card {
    border: 1px solid #ddd;
}
.food-suggestion:last-child .card-body {
    border-bottom: 2px solid #d3d3d3;
}
.food-suggestion .card-body {
    border: 2px solid #d3d3d3;
    border-bottom: 0;
    border-top: 0;
    background-color: #f9f9f9;
    padding: 30px 20px !important;
}
.food-suggestion .card-body p {
    font-size: 15px !important;
    font-weight: 500 !important;
}
.food-suggestion .card-header:not(.collapsed) .rotate-icon {
    transform: rotate(180deg);
}
ul.subCat li:last-child {
    border-bottom: 0;
    padding-bottom: unset;
}
ul.subCat li {
    margin-left: 15px;
    border-bottom: solid 2px rgba(224,224,224,0.5);
}

.lSPager.lSGallery {
    margin-bottom: 25px !important;
}
#lightSlider {
    height: unset !important;
}
#lightSlider li {
    align-items: center !important;
    display: flex !important;
    aspect-ratio: 4 / 3;
}
#lightSlider .ytvideoli{
    justify-content: center !important;
    aspect-ratio: 16/9;
}
.lSSlideOuter .lSPager.lSGallery img {
    object-fit: cover !important;
}
.about-this-food {
    background-color: #f7f7f7;
    padding: 20px 25px;
    border-radius: 3px;
}
.about-this-food h3 {
    margin-bottom: 20px;
}
.about-this-food .row .col-md-6 {
    margin-bottom: 5px;
}
@media (min-width: 768px) {
    .about-this-food .row .col-md-6:nth-child(even) {
        text-align: right;
    }
}
.jp-list-group.item {
    padding: 15px;
}

@media (max-width: 767px) {
    .loginPage {
        background-color: #fff;
        padding: 0;
    }

    .login-signup-card.row {
        box-shadow: none;
        margin-top: 0;
    }

    .login-signup-card .col-md-6:first-child {
        border-right: none;
        border-bottom: solid 2px #ddd;
    }
}


/* Mobile View */
@media (min-width: 320px) and (max-width: 767px) {
	.carousel .carousel-item img {
    max-width: unset !important;
    max-height: unset;
     width:100% !important;
     height: 500px;
}

.carousel-image {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
}

.carousel{
    width: 100vw;
    padding-right: -8%;
    /* margin-right: 8%; */
    margin-left: -14%;
}
	h3.jp-title{
		padding-top:100px
	}	

}
.foodMenu-img {
    width: 80%;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #ddd;
}

.carousel {
    display: flex;
    flex-direction: row; 
    overflow: hidden; 
}

.carousel img {
    max-width: 650px; 
    max-height: 350px;
     
}
.carousel img {
    max-width: unset;  
    max-height: unset ;
     width:100%;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
    display: block;
    height: auto;
    max-width: 100%;
    line-height: 1;
    width: 100%; 
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  /* background-color: black;  */
    color: white;
    opacity: 0.2; 
}

.wishlistImg {
    width: 120px;
    height: 90px;
    object-fit: cover;
}

.wishlistIcon,
.favouriteIcon {
    position: relative;
}

#foodDetailsBtns #addCartBtn,
#foodDetailsBtns #addWishlistBtn {
    display: none;
}
button:disabled {
  cursor: not-allowed !important;
  pointer-events: all !important;
}
.map-mask {
/*    background-color: rgba(0,0,0,0.2);*/
    height: 209.3px;
    width: 100%;
    z-index: 1;
    position: absolute;
}
.successModal .modal-title {
    color: #4ea84e;
}
.successModal .modal-content,
.successModal .modal-footer {
    background-color: #e4ffe0;
}
.successModal.submitted .modal-title {
    color: #3574c9;
}
.successModal.submitted .modal-content,
.successModal.submitted .modal-footer {
    background-color: #d5e7ff;
}

.WarningModal .modal-title {
    color: #ff0d00;
}
.WarningModal .modal-content,
.WarningModal .modal-footer {
    background-color: #ffdfdd;
}
.modal-footer {
    padding-bottom: 25px !important;
}
.modal-body {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}
.modal-header button {
    color: #000 !important;
    font-weight: 800 !important;
}
.modal-header {
    padding-bottom: 0px !important;
    padding-top: 5px !important;
}
.modal-title {
    font-weight: bold;
}
.WarningModal button,
.successModal button,
.successModal.submitted button {
    border-radius: 20px !important;
    padding: 8px;
    color: #fff;
}
.WarningModal .modal-footer button {
    background-color: #ff0d00 !important;
}
.successModal .modal-footer button {
    background-color: #4ea84e !important;
}
.successModal.submitted .modal-footer button {
    background-color: #3574c9 !important;
}
#removeConfirmationModal .modal-footer .btn-primary,
#welcomeModal .modal-footer .btn-primary {
    background: #4ea84e;
}
#removeConfirmationModal .modal-footer .btn-primary,
#removeConfirmationModal .modal-footer .btn-default,
#welcomeModal .modal-footer .btn-primary,
#welcomeModal .modal-footer .btn-default {
    font-size: 18px !important;
    padding: 6px !important;
}
#removeConfirmationModal .modal-footer button,
#welcomeModal .modal-footer button {
    border-radius: 0 !important;
    margin-left: 10px;
    margin-right: 10px;
    text-transform: capitalize !important;
}

@media (max-width: 767px ) {
    #cartList .img-div img,
    #cartList .img-div {
        width: 100px !important;
    }
    #cartList tr td:first-child .bodyText button {
        width: auto !important;
    }
    #cartList tr td:first-child .bodyText input {
        margin-top: 8px !important;
    }
    #cartList tr td:first-child .bodyText {
        width: calc(100% - 100px);
        padding-left: 10px;
        padding-right: 10px;
    }
}
#cartList tr td:first-child .bodyText input {
    margin-top: 5px;
}
#cartList button {
    margin-top: 15px;
    height: 25px;
}
#cartList tr td:first-child .bodyText button {
    max-width: 25px;
}
#cartList tr td:first-child .bodyText {
    width: calc(100% - 150px);
    padding-left: 10px;
    padding-right: 10px;
}
#cartList .img-div img,
#cartList .img-div {
    width: 150px;
    text-align: center;
}
#cartList input[type="text"] {
    border: 0;
    background-color: transparent;
}

.promoCodeInput {
    height: calc(1.5em + 1.3rem + 5px);
}

.defaultFoodImg {
    object-fit: contain !important;
}

#cartList td:last-child {
    width: 65px;
}
#cart-button button {
    width: 220px;
    margin-bottom: 10px;
}
#applyPromoCode {
    margin-left: auto;
    margin-right: auto;
}

.login-header-mobile {
    font-weight: 400;
    text-decoration: underline;
}

.filterDropdownContent:before,
.filterDropdownContent:after {
    content: unset;
}

.filterDropdownContent {
    right: unset;
    left: 5px;
    margin-top: 10px;
    border-radius: 3px;
}

.filterDropdownContent a {
    border-bottom: none;
    padding-top: 8px;
    padding-bottom: 8px;
}

.filterDropdownContent a:first-child:hover {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.filterDropdownContent a:last-child:hover {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.voucherAppliedWidth {
    min-width: 100px;
}

select {
    -webkit-appearance: none !important;
}
button#checkoutBtn:disabled .text-white,
button#checkoutBtn[disabled] .text-white {
    color: #929292 !important;
}
button#checkoutBtn:disabled,
button#checkoutBtn[disabled] {
    background: #ccc !important;
}

/* START Order Status  */
.orderDetails {
    background-color: #f5f5f5;
    border-radius: 10px;
}

.orderDetails table {
    font-size: 15px;
    border-collapse: collapse;
}

.orderDetails table thead td {
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: 500;
    border-top: 1.5px solid #d5d5d5;
    border-bottom: 1.5px solid #d5d5d5;
}

.orderDetails table tbody tr.orderContent td {
    padding-top: 25px;
    padding-bottom: 25px;
    border-bottom: 1.5px solid #d5d5d5;
}

.orderDetails table thead td:first-child,
.orderDetails table tbody tr.orderContent td:first-child {
    width: 50%;
}

.orderDetails table thead td:nth-child(2),
.orderDetails table tbody tr.orderContent td:nth-child(2) {
    width: 8%;
    text-align: center;
}

.orderDetails table thead td:nth-child(3),
.orderDetails table tbody tr.orderContent td:nth-child(3) {
    width: 20%;
    text-align: right;
}

.orderDetails table thead td:last-child,
.orderDetails table tbody tr.orderContent td:last-child {
    width: 20%;
    text-align: right;
}

.orderDetails table tbody tr.orderSummary td:nth-child(2),
.orderDetails table tbody tr.orderSummary td:last-child {
    text-align: right;
}

.orderDetails table tbody tr.orderSummary td:nth-child(2) {
    font-weight: 500;
}

.orderDetails .orderSummary.total {
    font-size: 18px;
    font-weight: 500;
}

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

.totalOrderAmt span {
    width: 20%;
    text-align: right;
}

#preOrderStatusPage,
#orderStatusPage {
    display: none;
}
/* END Order Status */

#welcomeModal.modal.show,
#removeConfirmationModal .modal.show {
    display: flex !important;
    align-items: center !important;
}

.invoiceTitle {
    text-transform: uppercase;
}

#loginToReview .profile-round img,
#purchaseToReview .profile-round img,
#leaveReview .profile-round img {
    width: 60px;
    height: 60px;
}
#reviewTextarea {
    width: 100%;
    border: 1px solid #dbdbdb;
    padding: 15px;
}









/* Ratings widget */
.rate {
    display: inline-block;
    border: 0;
}
/* Hide radio */
.rate > input {
    display: none;
}
/* Order correctly by floating highest to the right */
.rate > label {
    float: right;
}
/* The star of the show */
.rate > label:before {
    display: inline-block;
    font-size: 1.1rem;
    padding: .3rem .2rem;
    margin-right:0;
    cursor: pointer;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f005"; /* full star */
}

/* Half star trick */
.rate .half:before {
    content: "\f005"; /* half star no outline */
    position: absolute;
    padding-right: 0;
    width: 0.6rem;
    overflow: hidden;
    margin-right: 0.4rem;
}

/* Click + hover color */
input:checked ~ label, /* color current and previous stars on checked */
label:hover, 
label:hover ~ label { 
    color: #ffbc00;  
} /* color previous stars on hover */

/* Hover highlights */
input:checked + label:hover, 
input:checked ~ label:hover, /* highlight current and previous stars */
input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
label:hover ~ input:checked ~ label /* highlight previous selected stars */ { 
    color: #ffbc00;  
}

.priceGrp {
    margin-bottom: 25px;
    height: 40px;
}

.oriPrice {
    font-weight: 300;
    color: gray;
    text-decoration: line-through;
}

.kt-container {
    max-width: 1000px;
    margin: auto;
    padding: 0;
}

.play-button {
    z-index: 9999;
  }
  
  .play-button {
    position: absolute;
    top: 10px; /* Adjust the top position as needed */
    left: 10px; /* Adjust the left position as needed */
  }
  
.equal{
    display: flex;
    flex-wrap:wrap;
}

/* Number border on hover */
#listingPager .pageLink.paginationStyle:hover{
    border-radius: 10%;
    width: 32px;
    height: 32px;
} 
/* Left Right Icon on hover */
#listingPager .link .page-link.paginationStyle:hover{
    border: 0px !important;
} 
#listingPager .link .page-link.paginationStyle i:hover{
    background:-moz-linear-gradient(top, #f37067 0%, #c82f26 100%);
    background: -webkit-linear-gradient(top, #f37067 0%, #c82f26 100%);
    background-image: linear-gradient(to bottom, #f37067 0%, #c82f26 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;  
    -webkit-text-fill-color:transparent;
} 
#listingPager .link .page-link.paginationStyle.noLink i:hover{
    background:-moz-linear-gradient(top, #979797 0%, #5d5d5d 100%);
    background: -webkit-linear-gradient(top, #979797 0%, #5d5d5d 100%);
    background-image: linear-gradient(to bottom, #979797 0%, #5d5d5d 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;  
    -webkit-text-fill-color:transparent;
} 
/* Overall size */
#listingPager .page-item{
    border-radius: 10%;
    width: 32px;
    height: 32px;
} 
/* Selected Page Number Colour */
#listingPager .page-item.active{
    background-image: linear-gradient(to bottom, #f37067, #c82f26);
} 

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


/*facebook share*/
.fb-share-button {
    background: #3b5998;
    border-radius: 3px;
    font-weight: 600;
    padding: 10px 40px;
    display: inline-block;
    position: static;
}

.fb-share-button:hover {
    cursor: pointer;
    background: #213A6F
}

.fb-share-button svg {
    width: 18px;
    fill: white;
    vertical-align: middle;
    border-radius: 2px
}

.fb-share-button span {
    vertical-align: middle;
    color: white;
    font-size: 14px;
    padding: 0 3px
}

.lSPager li a:before, .lSPager li a:after {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.lSPager li a.isVideoUrl:before, .lSPager li a.isVideoUrl:after {
    content: "\25B6"; /* Unicode play symbol */
    font-size: 1.5em;
    color: #676767;
    position: absolute; 
    opacity: 0.8;
    /* top: 0%; 
    left: 0%; */
    transform: translate(225%, 100%);
}

* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
/* input[type=text] {
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
} */
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 27%;
  right: 11%;
  text-align: left;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}
.centered-text {
    text-align: center;
}

/* Payment Detail Table  */
.paymentDetailTable {
    width: 100%;
    
}

.paymentDetailTable tbody tr th {
    border: 1.5px solid black;
    padding: 10px;
}

.paymentDetailTable tbody tr td {
    border: 1.5px solid black;
    vertical-align: top;
    padding: 10px;
    width: 50%;
}

.paymentDetailTable tbody tr td p {
    margin-bottom: 0;
}

.payment-qr-code {
    width: 150px;
}
.qr-code-container {
    display: flex;
    gap: 20px;
}
/* End of Payment Detail Table  */

/* New Home Page */

.main-hp-section {
    padding-top: 50px;
}


.main-bg-container {
    background-image: url("/images/project/newhp-main-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    padding-block: 100px;
}

.main-bg-container p {
    font-size: 25px;
    font-weight: 100;
    font-weight: 200;
    margin: 0;
}

.main-bg-container .title {
    font-size: 40px;
    font-weight: bold;
}

.main-bg-container a button {
    padding: 10px 25px;
    background: #FFB719;
    color: white;
    border-radius: 5px;
    font-weight: 200;
    outline: none;
    border: none;
}

.intro-container{

}

.intro-container p, .intro-container span {
    margin: 0;
    color: white;
}

.intro-container span {
    display: block;
}

.intro-container .top-section {
    background-color: #800000;
    padding-block: 100px;
    position: relative;
}

.intro-container .top-section img {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(32%, 28%);
    z-index: 1;
    width: 500px;
}

.intro-container .top-section .title {
    background-image: url("/images/project/gold-box-2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 370px;
    height: 100px;
    margin-inline: auto;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-container .top-section .title p {
    color: black;
}

.intro-container .top-section .description {
    line-height: 1.5;
    font-weight: 200;
    font-size: 18px;
    margin-bottom: 100px;
}

.intro-container .bottom-section .title {
    background-image: url("/images/project/gold-box-2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 373px;
    height: 50px;
    margin-inline: auto;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-container .bottom-section .title p {
    color: black;
}

.intro-container .bottom-section .description p{
    line-height: 1.5;
    font-weight: 300;
    color: black;
    font-size: 18px;
}

.intro-container .bottom-section {
    background-color: #FFFFFF;
    padding-block: 100px;
    position: relative;
    overflow-x: clip;
}

.top-section.wavy-container {
    background-color: #800000;
    position: relative;
    overflow-x: clip;
}

.top-section.wavy-container::before {   
    content: "";
    width: 100%;
    height: 133px;
    position: absolute;
    bottom: -0.3%;
    left: 0;
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 78vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  117' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 86L50 81C100 76 200 65 300 44C400 23 500 -9 600 2C700 12 800 65 900 86C1000 107 1100 97 1150 91L1200 86V118H1150C1100 118 1000 118 900 118C800 118 700 118 600 118C500 118 400 118 300 118C200 118 100 118 50 118H0V86Z' fill='%23ffffff'/></svg>");
}



.intro-container .bottom-section img {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-20%, 41%);
    z-index: 1;
    width: 500px;
}

.features-container {
    background-image: url("/images/project/feature-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    padding-block: 100px;
}

.features-container p {
    margin: 0;
}

.features-container .title {
    background-image: url("/images/project/gold-box-2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 300px;
    height: 50px;
    margin-inline: auto;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-strikethrough {
    text-decoration: line-through;
}

.product-listing .img-container img{
    width: 100%;
}

.product-container .product-wrapper {
    background-color: white;
}

.product-container .product-wrapper .product-description {
    font-size: 20px;
}

.product-container .product-wrapper .promo-price {
    font-size: 25px;
    font-weight: bold;
}

.product-container .product-wrapper .ori-price {
    font-size: 20px;
    color: #535353;
}

.product-container .product-wrapper .add-cart-btn a button {
    border: none;
    outline: none;
    background: linear-gradient(180deg, #F6746C 0%, #C72D24 100%);
    color: white;
    font-weight: 200;
    font-size: 16px;
    padding: 10px 20px;
}

.product-container .bottom-wrapper {
    padding: 25px
}

.product-container {
    padding-inline: 20px;
    margin-bottom: 40px;
}

.new-label {
    display: inline-block;
    background-color: #ff0000; 
    color: #ffffff; 
    padding: 0px 5px;
    border-radius: 3px;
    margin-right: 5px;
    font-size: 10px;
    position : absolute;
    margin-left : 8px;
    top : -15%;
}

.new-label-mobile {
    display: inline-block;
    background-color: #ff0000; 
    color: #ffffff; 
    padding: 0px 5px;
    border-radius: 3px;
    margin-right: 5px;
    font-size: 10px;
    position : absolute;
    margin-left : 8px;
    top : -20%;
}


/* End of New Home Page */

.otp-label {
    margin-left : 8px;
    margin-top : 10px;
    margin-right : 8px;
}

.share-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    margin-left: 1px;
    outline: none;
}

#copyButton {
    background-color: #4CAF50;
    color: white;
}

#facebookButton {
    background-color: #3b5998;
    color: white;
}


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

.p-t-10{
padding-top : 10px !important;
}

.p-0{
padding : 0 0 !important;
}

.m-0{
margin : 0 0 !important;
}

.mx-0{
    margin-right : 0 !important;
    margin-left : 0 !important;
}

.text-muted{
    color : #999999;
}

.asteriks{
    color : red;
}


/* Dashoard CSS */

.drippingBg{
    background-image: url("/images/project/drippingBg.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.dashboardText{
    font-size: 16px; 
    color: hsl(0, 0%, 0%);
}

.dashboardDate{
    color: hsl(0, 100%, 50%);
    font-size: 16px;
    font-weight: bold;
}

.dashboardActiveID{
    font-size: 16px;
    font-weight: bold;
}

.dashboardTimer{
    color: hsl(0, 0%, 0%);
}

.dashboardTimerText{
    margin-left: 10px;
    font-size: 36px; 
    font-weight: bold;
}

@media only screen and (max-width: 414px) {
    .drippingBg {
        background-image: url("/images/project/drippingBgOnly.png");
    }

    .dashboardText{
        margin-left: 12px;
    }

    .dashboardTimerText{
        font-size: 24px; 
    }
}

@media only screen and (min-width: 375px) and (max-width: 414px) {
    .dashboardTimerText{
        font-size: 16px; 
    }
}

/* End of Dashboard CSS */

/* Header CSS */
.homepageHeader {
    background-color: #fff;
    width: 100%;
    position: fixed;
    z-index: 9999;
}

.sidebarLogo{
    /*left: 50%;*/
    /*transform: translateX(50px);*/
    margin:15px auto;
}

/*.homepageHeader.scrolled {
    background-color: #f5f5f5;
}*/

.headerMenu {
    width: 100%;
}

.headerMenuItem {
  padding: 0px 2px;
    position: relative;
}

.dropbtn {
    background-color: #fff;
    background: #fff;
    color: black;
    border: none;
    display: inline;
    letter-spacing: 0;
    font-size: 14px;
    cursor: pointer;
}

.dropdownIcon {
    display: inline;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    /*margin-right: -30px;*/
    margin-top: 20px;
    min-width: 200px;
    background: #f8f8f8;
    display: none;
    position: absolute;
    z-index: 1;
    right: 0;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.2)
}

.showDropdown.open ~ .dropdownContent {
    display: block;
}


.dropdown-content2:after, .dropdown-content2:before,
.dropdown-content:after, .dropdown-content:before {
    bottom: 100%;
    right: 15px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.dropdown-content2:after,
.dropdown-content:after {
    border-color: rgba(238, 238, 238, 0);
    border-bottom-color: #f8f8f8;
    border-width: 15px;
    margin-left: -15px;
}

.dropdown-content2 {
    /*margin-right: -30px;*/
    margin-top: 20px;
    min-width: 200px;
    background: #f8f8f8;
    display: none;
    position: absolute;
    z-index: 1;
    right: 0;
}

.dropdown-content p {
    margin-bottom: 0;
}

.dropdown-content2 a,
.dropdown-content a,
.dropdown-content p {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #ddd;
}

.dropdown-content2 a:last-child,
.dropdown-content a:last-child,
.dropdown-content p:last-child {
    border-bottom: none;
}

.dropdown-content2 a:hover ,
.dropdown-content a:hover,
.dropdown-content p:hover {
    background-color: #ddd;
}

.menuBtn {
    /*padding: 5px 10px;*/
    font-weight: 300;
    font-size: 14px;
    color: #6c6e86;
    text-transform: none;
}

.sidebarDetail{
    padding-top: 8px;
    padding-bottom: 8px;
}

.btn.menuBtn {
    padding: 0.4rem 1rem;
}

.menuBtn i.la.la-angle-right {
    display: none;
}

.menuBtn i.la.la-angle-down {
  font-size: 10px;
  margin-top: -3px;
}

.menuBtn:hover {
    color: #1b75bb;
    /*background-color: #dedede;*/
    border-radius: 0px;
}

.menuBtn.active {
    /*background-color: #dedede;*/
    border-radius: 0px;
}

.menuActive.active, a.menuActive.active .fa, a.menuActive:hover .fa {
    color: #27a9e0;
}

.sideItemSpace .sideBarText {
    font-size: 13px;
}

.menuSettingBtn {
  padding: 5px 0px;
}

.menuSettingBtn i {
  font-size: 25px;
  color: #000;
  line-height: 25px;
}

.sidebarMenuWrapper {
    background-color: #ffffff;
}

.sideBarIcon{
    display: inline;
    color: #90939D;
}

.sidebarImg{
    width: 10%;
}

.sidebarImg2{
    width: 90%;
}

.sideBarItem:hover, .sideBarItem.active{
    background: transparent;
}

.sideBarText{
    color: #90939D;
    vertical-align: middle;
}

.sideBarItem.active span,
.sideBarItem:hover span, 
.sideBarItem.active div,
.sideBarItem:hover div {
    color:white;
}

.sideBarItem {
    border-left: 4px solid transparent;
}

.sideBarItem:hover,.sideBarItem.active, .sideBarItem.active:target, .sideBarItem.active {
    border-left: 4px solid white;
    border-image:linear-gradient(to bottom, white 20%,#fd9f41 20%,#fd9f41 80%,white 80%);
    border-image-slice: 1;
}

.sideBarItem.active .sidebarDetail , .sideBarItem:hover .sidebarDetail, .sideBarItem.active:target .sidebarDetail, .sideBarItem.active .sidebarDetail{
    background: #fd9f41;
    border-radius: 3px;
    color: #ffffff;
    font-weight: 500;
}

.sideBarItem.blue:hover, .sideBarItem.blue.active, .sideBarItem.blue.active:target, .sideBarItem.blue.active {
    border-left: 4px solid white;
    border-image:linear-gradient(to bottom, white 20%,#27a9e0 20%,#27a9e0 80%,white 80%);
    border-image-slice: 1;
}

.sideBarItem.blue.active .sidebarDetail, .sideBarItem.blue:hover .sidebarDetail, .sideBarItem.blue.active:target .sidebarDetail, .sideBarItem.blue.active .sidebarDetail{
    background: #27a9e0;
    color: #ffffff;
}

.sideBarItem.green:hover, .sideBarItem.green.active, .sideBarItem.green.active:target, .sideBarItem.green.active {
    border-left: 4px solid white;
    border-image:linear-gradient(to bottom, white 20%,#8cbe44 20%,#8cbe44 80%,white 80%);
    border-image-slice: 1;
}

.sideBarItem.green.active .sidebarDetail , .sideBarItem.green:hover .sidebarDetail, .sideBarItem.green.active:target .sidebarDetail, .sideBarItem.green.active .sidebarDetail{
    background: #8cbe44;
    color: #ffffff;
}

.sideBarItem:hover .sidebarImg, .sideBarItem.active .sidebarImg, .sideBarItem:hover .sidebarImg2, .sideBarItem.active .sidebarImg2 {
    filter: grayscale(100%) brightness(100) saturate(0);
}

.sideBarMenuDropdownItem:hover .sideBarText {
    /*font-weight: 500;*/
}

.sideBarMenuDropdownItem.active {
    /*background-color: #efefef;*/
}

.sideBarMenuDropdownItem.active .sideBarText{
    color: #000000;
    font-weight: 500;
}

.headerMenuDropdown.active ~ .headerMenuDropdownBox {
    display: block;
    background: #f9f9f9;
}
.headerMenuDropdown.active >  .headerMenuIcon{
    transform: rotate(-90deg);
}
.headerMenuIcon{
    font-size: 20px;
    transform: rotate(90deg);
}  
.headerMenuDropdownBox {
    display: none;
    position: absolute;
    background-color: #fff;
    top: 100%;
    right: 0;
    width: 250px;
    animation: headerDropdownBoxFadeIn ease 0.3s;
    z-index: 1;
}

.pageContentWrapper, .sideMenuWrapper {
    padding-top: 59px;
}
.pageContentWrapper, .sideMenuWrapper {
    padding-top: 0;
}

.menuWrap{
    background: #ffffff;
}

.footer{
    background: #f3f3f3;
    padding: 10px auto;
}

.footerCopy{
    text-align: left;
    color: #303030;
    font-weight: 300;
    font-size: 12px;
}

.sideBarMenuDropdownItem {
    padding: 10px 25px 10px 69px;
    font-size: 14px;
    font-weight: 300;
    animation: headerDropdownBoxFadeIn ease 1s forwards;
}

.languageFont{
    color: #000;
}

@keyframes headerDropdownBoxFadeIn {
    0% {
        opacity:0;
        top: 200%;
    }
    100% {
        opacity:1;
        top: 100%;
    }
}

.headerMenuDropdown2.active ~ .headerMenuDropdownBox2 {
    display: block;
}

.headerMenuDropdownBox2 {
    display: none;
    position: absolute;
    background-color: #fff;
    top: 0;
    left: -250px;
    width: 250px;
    animation: headerDropdownBoxFadeIn2 ease 0.3s;
    z-index: 1;
}

@keyframes headerDropdownBoxFadeIn2 {
    0% {
        opacity:0;
        left: 0;
    }
    100% {
        opacity:1;
        left: -250px;
    }
}

.headerMenuDropdownItem {
    width: 100%;
    position: relative;
}

.menuDropdownBtn {
    font-weight: 300;
    font-size: 13px;
    color: black;
    padding: 0;
    width: 100%;
    text-align: left;
    padding: 5px 10px;
}

.menuDropdownBtn:hover {
    background-color: #ddd;
    border-radius: unset;
}

.headerMenuClose {
    display: none;
}

.headerBurgerBtn {
    display: none;
}

.homepageHeaderBlackBG {
    display: none;
}

.homepageHeaderMobile {
    display: none;
    position: fixed;
    z-index: 9999;
}
/* Dashboard Header */
.headerDiv {
    background: white;
}

.centerText {
    margin-top: auto;
    margin-bottom: auto;
}

.boldBlack {
    color:black;
    font-weight: 600;
}

.thinBlack {
    color:black;
    font-weight: 100;
}

.borderLeft{
    border-left: 5px solid #f9f9fc;
}

.headerImg {
    width: 75%;
}

.mobileNone{
    display: inline-block;
}

.smallIconBtn {
    border: 1px solid #E0E0E0;
    padding: 10px;
}

.smallIconBtn .fa {
    color: #FD9F41;
}

.menuUsername {
    font-size: 16px;
}

/* Ipad Pro View */
@media (max-width: 1199px) {

}

/* Ipad View */
@media (max-width: 990px) {
    .menuBtn {
        width: 100%;
        text-align: left;
    }

    /*.menuBtn i {
        font-size: 10px!important;
        margin-left: 5px;
        vertical-align: middle;
        display: inline-flex;
        transition: all .5s ease;
    }*/

    .menuBtn.active {
        color: #1b75bb;
    }

    .menuBtn.active i {
        transform: rotate(90deg);
    }


    .headerMenuDropdown2 i {
        font-size: 10px!important;
        margin-left: 5px;
        vertical-align: middle;
        display: inline-flex;
        transition: all .5s ease;
    }

    .headerMenuDropdown2.active {
        color: #1b75bb;
    }

    .headerMenuDropdown2.active i {
        transform: rotate(90deg);
    }


    .headerMobileDisplayNone {
        display: none;
    }

    .headerMenuItem {
        width: 100%;
    }

    .headerMenuDropdown ~ .headerMenuDropdownBox {
        animation: unset;
        display: block;
        position: relative;
        background-color: transparent;
        top: unset;
        right: unset;
        width: 100%;
        overflow: hidden;
        transition: all .5s ease;
        max-height: 0;
    }  

    .headerMenuDropdown.active ~ .headerMenuDropdownBox {
        transition: all .5s ease;
        max-height: 100vh;
    }

    .headerMenuDropdown2 ~ .headerMenuDropdownBox2 {
        animation: unset;
        display: block;
        position: relative;
        background-color: transparent;
        top: unset;
        left: unset;
        width: 100%;
        overflow: hidden;
        transition: all .5s ease;
        max-height: 0;
    }  

    .headerMenuDropdown2.active ~ .headerMenuDropdownBox2 {
        transition: all .5s ease;
        max-height: 100vh;
    }

    

    .headerMenuClose {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        color: #ffffff;
        font-size:25px;
    }

    .headerBurgerBtn,
    .headerBurgerBtn:hover,
    .headerBurgerBtn:focus {
        display: inline-block;
        right: 20px;
        bottom: 25px;
        border-radius: 100%;
        text-align: center;
        font-size: 20px;
        line-height: 20px;
        color: #000000; 
    }

    .loginMenuIcon.fas, .loginMenuIcon.fas:hover, .loginMenuIcon.fas:focus {
        display: inline-block;
        font-size: 20px;
        line-height: 20px;
        color: #000000;
    }

    .headerBurgerBtn i {
        font-size: 25px!important;
        line-height: 25px;
        padding: 0;
        color: #1b75bb;
    }

    .headerBurgerBtn i::before {
        font-weight: 600!important;
    }

    .headerBurgerBtn.active ~ .homepageHeader {
        top: 0;
    }

    .sidebarMenuWrapper {
        position: fixed;
        left: -250px;
        top: 0;
        bottom: 0;
        transition: right .3s;
        z-index: 101;
        overflow-y: scroll;
        width: 250px;
    }

    .sidebarMenuWrapper.active{
        left: 0;
    }

    .homepageHeaderBlackBG {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0,0,0,0.5);
        z-index: 99;
    }

    .headerBurgerBtn.active ~ .homepageHeaderBlackBG {
        display: block;
    }

    .homepageHeaderMobile {
        display: block;
        background-color: #fff;
        padding: 10px 0px;
        /* position: relative; */
        border-bottom: 1px solid #E6E6E6;
    }

    .mobileNone{
        display: none;
    }

    .mobileSidebar .dropdown-content {
        position: relative;
        margin-top: 15px;
        background: transparent;
        display: none;
        box-shadow: none;
    }

    .mobileSidebar .dropdown-content:after, 
    .mobileSidebar .dropdown-content:before {
        display: none;
    }

    .dropdown-content2 a,
    .dropdown-content a,
    .dropdown-content p {
        padding: 12px 25px;
        border-bottom: none;
    }
}


/* Mobile View */
@media (max-width: 767px) {
    .homepageHeader {
        width: 100%;
        position: fixed;
        top: 100%;
        left: 0;
        height: 100vh;
        background: unset;
        background-color: #fff;
        padding-top: 50px;
        overflow-y: auto;
        transition: all .5s ease;
    }
}

/* Sidebar Ipad Pro View, keep this at last */
@media (min-width: 991px) and (max-width: 1199px) {
    .col-lg-2.ipadproOnly {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .col-lg-10.ipadproOnly {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 80%;
        flex: 0 0 80%;
        max-width: 80%;
    }
}

/* End of Header CSS */

/* Homepage CSS */
/* Header */

.homepageHeader {
    /*    padding: 10px 0;*/
        background-color: #fff;
        border-bottom: 1px solid #E6E6E6;
        box-shadow: 0px 0px 10px #ddd;
    }
    
    .header_menu_div {
        margin: auto 10px;
        text-align: center;
    }
    
    .header_menu_div:focus-visible {
        outline: none;
    }
    
    .blackFont {
        font-weight: 300;
        text-transform: none;
        font-size: 14px;
        color: black;
        /*padding: 0px;*/
    }
    
    .currentRankFont {
        color: #fed9b3;
        font-size: 18px;
    }
    
    /*.dropbtn {
        background-color: #fff;
        background: #fff;
        color: black;
        border: none;
        display: inline;
        letter-spacing: 0;
        font-size: 14px;
    }*/
    
    .cartBtn {
        position: relative;
    }
    
    .cartNo {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #000;
        color: #fff;
        font-size: 10px;
        padding: 2px;
        border-radius: 50%;
        right: -8px;
        top: -8px;
        text-align: center;
    }
    
    .productButton3:hover {
        background: rgba(0,0,0,0.5) !important;
        border:0;
    }
    
    /*.dropdownIcon {
        display: inline;
    }*/
    
    /* .showDropdown.open {
        border-bottom: 2px solid #27a9e0;
        margin-bottom: -2px;
    } */
    
    /*.dropdown {
        position: relative;
        display: inline-block;
    }*/
    
    /*.dropdown-content {
        margin-top: 20px;
        min-width: 200px;
        background: #f8f8f8;
        display: none;
        position: absolute;
        z-index: 1;
        right: 0;
        box-shadow: 0px 1px 10px rgba(0,0,0,0.2)
    }
    
    .showDropdown.open ~ .dropdownContent {
        display: block;
    }
    
    
    .dropdown-content2:after, .dropdown-content2:before,
    .dropdown-content:after, .dropdown-content:before {
        bottom: 100%;
        right: 15px;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    
    .dropdown-content2:after,
    .dropdown-content:after {
        border-color: rgba(238, 238, 238, 0);
        border-bottom-color: #f8f8f8;
        border-width: 15px;
        margin-left: -15px;
    }
    
    .dropdown-content2 {
        margin-top: 20px;
        min-width: 200px;
        background: #f8f8f8;
        display: none;
        position: absolute;
        z-index: 1;
        right: 0;
    }
    
    .dropdown-content p {
        margin-bottom: 0;
    }
    
    .dropdown-content2 a,
    .dropdown-content a,
    .dropdown-content p {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        border-bottom: 1px solid #ddd;
    }
    
    .dropdown-content2 a:last-child,
    .dropdown-content a:last-child,
    .dropdown-content p:last-child {
        border-bottom: none;
    }
    
    .dropdown-content2 a:hover ,
    .dropdown-content a:hover,
    .dropdown-content p:hover {
        background-color: #ddd;
    }*/
    
    .menuActive.active, a.menuActive.active .fa, a.menuActive:hover .fa {
        color: #27a9e0;
    }
    
    /* Modal */
    .homepage_modal {
        width:60%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .homepage_modal_logo {
        display: block;
        margin: 0% auto;
        width: 25%;
    }
    
    .homepage_modal_title {
        color: black;
        margin: 2.5% auto 5% auto;
        font-size: 30px;
        font-weight: 600;
        text-align: center;
    }
    
    .contentPadding {
        padding-left: 5%;
        padding-right: 5%;
    }
    
    .homepage_modal_div {
        color: black;
        text-align: center;
    }
    
    
    .homepage_modal_div2 {
        color: black;
        margin: 10px 0;
        padding: 10px 15px;
        text-align: center;
    }
    
    .homepage_modal_flex_div {
        display: flex;
        flex-direction: row;
        align-items: left;
        border: 1px solid #E5E5E5;
        background: white;
        padding: 1%;
        width:100%;
    }
    
    .homepage_modal_flex_input {
        border: 0px;
        outline: none;
        background: inherit;
        padding-left: 15px;
        width:100%;
    }
    
    .homepage_modal_flex_div:focus-within {
        border: 1px solid #8cbe44;
    }
    
    .homepage_modal_flex_icon{
        margin-top: auto;
        margin-bottom: auto;
        padding-left: 15px;
        height: 50%;
        color: #90939D;
        font-size: 16px;
    }
    
    .homepage_modal_flex_icon2{
        margin-top: auto;
        margin-bottom: auto;
        padding-left: 15px;
        padding-right: 15px;
        color: #90939D;
        float: right;
        font-size: 16px;
    }
    
    .cursorPointer{
        cursor: pointer;
    }
    
    .homepage_modal_button {
        color: #fff;    
        background: #8cbe44 !important;
        margin-top: 2.5%;;
        padding: 13px 18% !important;
        border: 0px !important;
        width: 100%;
        letter-spacing: 0;
        font-size: 15px;
    }
    
    .homepage_modal_disabled {
        background: #E0E0E0 !important;
        background-color: #E0E0E0 !important;
        color: black !important;
        border: 0 !important;
    }
    
    .btn.disabled, .btn:disabled {
        opacity: 1;
    }
    
    ::placeholder {
        font-weight: 100 !important;
        color: #90939D !important;
    }
    
    .backIcon {
        font-size: 35px;
        color: #90939D;
    }
    
    .hidden {
        display: none;
    }
    
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    
    .closeBtn {
        background: inherit !important;
        border: 0 !important;
    }
    
    .closeBtn:hover {
        background: inherit !important;
        color:black !important;
        border:0 !important;
    }
    
    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
    
    /* Section 1 */
    .homepage_section01 {
        background-color: #fff;
        padding: 5% 7.5%;
    }
    
    
    .homepage_section01_title {
        line-height: normal;
        font-size: 50px;
        font-weight: 300;
        color: black;
        font-family: "SecondFont", sans-serif !important;
    }
    
    .homepage_section01_content {
        text-align: justify;
        font-size: 18px;
        color: #90939D;
    }
    
    .homepage_section01_button .btn{
        /*text-transform: uppercase;*/
        /*color: #fff;*/
        /*background: #ff9f45;*/
        padding: 15px 50px !important;
        /*border: 0px;*/
        /*letter-spacing: 0;*/
        /*font-size: 15px;*/
    }
    
    /*.homepage_modal_button:hover {
        background: #7AA43D !important;
        background-color: #7AA43D !important;
    }*/
    
    .homepage_modal_disabled:hover input,
    .homepage_modal_disabled:hover input::placeholder,
    .homepage_modal_disabled:hover {
        background: #90939D !important;
        background-color: #90939D !important;
        color: white !important;
    }
    
    .homepage_section01_image {
        display: block;
        margin-left: auto;
        margin-right: auto;
        /*border-top-right-radius: 50%;*/
        /*border-top-left-radius: 50%;*/
        width: 100%;
        height: 400px;
        object-fit: contain;
    }
    
    /* Slideshow */
    .homepage_slide {
        display: none;
        height: 100%;
        padding: 0 1.5rem;
    }
    
    .slideshow-container {
        position: relative;
    }
    
    .slidePrev, .slideNext {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        color: black;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
    }
    
    .slidePrev {
        left: 0%;
        border-radius: 3px 0 0 3px;
    }
    
    .slideNext {
        right: 0%;
        border-radius: 3px 0 0 3px;
    }
    
    .slidePrev:hover, .slideNext:hover {
        background-color: rgba(0,0,0,0.1);
    }
    
    .dot {
        cursor: pointer;
        height: 12px;
        width: 12px;
        margin: 0 5px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }
    
    .dot.active {
        background-color: orange;
    }
    
    .dot:hover {
        background-color: orange;
    }
    
    .fading {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s;
    }
    
    @-webkit-keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
    }
    
    @keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
    }
    
    .homepagePadding {
        padding: 0 50px;
        margin-top: 70px;
    }
    
    /* Section 2 */
    .homepage_section02 {
        background-color: #fff;
    }
    
    
    .homepage_section02_title {
        line-height: normal;
        font-size: 35px;
        font-weight: 600;
        color: black;
        font-family: "SecondFont", sans-serif !important;
    }
    
    .homepage_product > img {
        margin-left: auto;
        margin-right: auto;
        height: 300px;
    }
    
    .homepage_product2 {
        height: 90%;
    }
    
    .homepage_product2 > img {
        margin-left: auto;
        margin-right: auto;
        height: 100%;
    }
    
    .homepage_section02_content {
        padding: 0% 5%;
        text-align: center;
        font-size: 18px;
        color: black;
    }
    
    .homepage_section02_image {
        display: block;
        margin-bottom: 15px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .homepage_product_div {
        width:100%;
    }
    
    /* Section 3 */
    .homepage_section03 {
        background-color: #fff;
    }
    
    .homepage_section03_title {
        font-size:  16px;
        font-weight: 600;
        color: white;
        font-family: "SecondFont", sans-serif !important;
    }
    
    .homepage_section03_content {
        line-height: normal;
        text-align: left;
        font-size: 17px;
        color: white;
        text-align: justify;
    }
    
    .homepage_section03_date {
        font-size: 14px;
        color: black;
    }
    
    .homepage_section03_video {
        width: 100%;
    }
    
    .homepage_section03_video_div {
        transform: translateY(-20px);
        background: #ff9f45;
    }
    
    .homepage_section03_content_div {
        background: #ff9f45;
    }
    
    /* Section 4 */
    .homepage_section04_list{
        list-style: none;
    }
    
    .homepage_section04_list li:before {
        background-image: url('/images/project/listStyleChecked.png');
        background-size: 20px 20px;
        display: inline-block;
        width: 20px; 
        height: 20px;
        content: " ";
        margin-right: 10px;
        transform: translateY(4px);
    }
    
    .homepage_section04_list li {
        padding: 2.5% 0 2.5% 0;
        font-size: 15px;
        color: rgba(0,0,0,0.75);
    }
    
    .homepage_section04 {
        background-color: #fff;
    }
    
    .homepage_section04_title {
        margin-bottom: 3%;
        font-size:  40px;
        font-weight: 600;
        color: black;
    }
    
    .homepage_section04_content {
        line-height: normal;
        padding: 10% 10% 5% 50%;
        text-align: left;
        font-size: 25px;
        color: black;
    }
    
    .homepage_section04_list_div {
        margin:0% 2% 0% 2%;
    }
    
    /* Section 5 */
    .homepage_section05 {
        background-color: #f8f8f8;
    }
    
    .homepage_section05_title {
        padding: 0 25% 0 25%;
        text-align: center;
        margin-bottom: 3%;
        font-size:  30px;
        font-weight: 600;
        color: black;
    }
    
    .homepage_section05_margin_bottom {
        margin-bottom: 2.5rem;
    }
    
    .homepage_section05_email_div {
        display: flex;
        flex-direction: row;
        justify-content: center;
        border: 1px solid white;
        background: white;
        padding: 5px 5px 5px 0;
        margin-right: auto;
        margin-left: auto;
        box-shadow: 0px 5px 20px rgb(0 0 0 / 10%);
    }
    
    .homepage_section05_input {
        border: 0px;
        outline: none;
        background: inherit;
        padding: 0 3% 0 1%;
        flex:1;
    }
    
    .homepage_section05_icon{
        margin-top: auto;
        margin-bottom: auto;
        padding-left: 1%;
        height: 50%;
        color: black;
    }
    
    .homepage_section05_button {
        text-transform: uppercase;
        color: #fff;    
        background: #8cbe44 !important;
        padding: 3% 8% 3% 8% !important;
        border: 0px !important;
    }
    
    .contactButton:hover {
        background: blue !important;
    }
    
    .homepage_section05_button:hover {
      background: #7AA43D !important;
    }
    
    /* Footer */
    .homepage_footer {
        padding: 0 8%;
        background-color: #1c2232;
        flex: 1;
    }
    
    .borderline {
        height: 1px;
        width: 100%;
        background-color: #d5d5d5;
    }
    
    .homepage_footer_text {
        text-align: center;
        font-size: 14px;
        color: black;
        font-weight: 500;
    }
    
    .homepage_footer_text:hover, .homepage_footer_text:focus, .homepage_footer_text:active, .homepage_footer_text.active {
        color: #ff9f45;
    }
    
    .homepage_footer_copyright {
        text-align: center;
        font-size: 12px;
        color: #90939D;
    }
    
    .homepage_footer_btn {
        color: #000;
        font-size: 13px;
        font-weight: 600;
    }
    
    .homepage_footer_btn:hover {
        color: #20B3EB;
    }
    
    /* Company Profile */
    .aboutImageDiv {
        text-align: right;
    }
    .aboutImage {
        width:100%;
    }
    
    .aboutTitle {
        /* padding-left: 5%; */
        /* padding-top: 10%; */
        font-size: 28px;
        font-weight: 600;
        color: black;
        font-family: "SecondFont", sans-serif !important;
    }
    
    
    .aboutTitle2 {
        /* padding-left: 15%; */
        /* padding-top: 10%; */
        font-size: 28px;
        font-weight: 600;
        color: black;
        font-family: "SecondFont", sans-serif !important;
    }
    
    
    .aboutContent {
        /* padding-left: 5%; */
        padding-top: 5%;
        font-size: 15px;
        color: #90939D;
        text-align: left;
        line-height: 2;
        text-align: justify;
        /* padding-right: 15%; */
    }
    
    
    .aboutContent2 {
        /* padding-right: 5%; */
        padding-top: 5%;
        font-size: 15px;
        color: #90939D;
        text-align: left;
        line-height: 2;
        text-align: justify;
        /* padding-left: 15%; */
    }
    
    
    .aboutDiv{
        padding-top: 5%;
    }
    
    .compDiv{
        width: auto;
        background:#f9f9f9;
        padding: 7.5% 5% 7.5% 5%;
    }
    
    .blockWrapper {
      height: 100%;
      display: flex;
      flex-flow: column;
    }
    
    .lastBlock {
        flex:1;
    }
    
    .compImage {
        width: 75%;
    }
    
    .compTitle{
        color:black;
        font-weight: 500;
        font-size: 20px;
    }
    .compContent{
        padding-top: 2%;
        color: #90939D;
        font-size: 15px;
    }
    
    .compVideo{
        width: 100%;
    }
    
    /* Member Benefits */
    .aboutImage2{
        width: 100%;
    }
    
    /* Prodcut Portfolio */
    .banner {
        position: relative;
        height: auto;
        width: 100%;
    }
    
    .bannerImg {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
    
    .bannerImg.compProf {
        height: unset;
    }
    
    .bannerImg.second {
        height: auto;
    }
    
    .bannerImg2 {
        width: 100%;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        overflow: hidden;
    }
    
    .productListingPortfolioBanner {
        position: relative;
    }
    
    .productListingPortfolioBanner:after {
        position: absolute;
        content: "";
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.5);
        filter: brightness(0);
    }
    
    .productListingPortfolioBanner .bannerText {
        z-index: 2;
    }
    
    .bannerText {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width:90%;
    }
    
    .bannerImg.second .bannerText {
        position: relative;
    }
    
    .bannerImg3 {
        height: 100px;
        position: absolute;
        left: 50%; top: 25%;
        transform: translate(-50%, -25%);
        background: rgba(255, 255, 255, 0.8);
        padding: 10px;
        border-radius: 50%;
    }
    
    .productPortfolio_section06.banner {
        background-image: url("/images/project/products2.jpg");
        background-size: cover;
        width: 100%;
        height: auto;
        padding-top: 70px;
        padding-bottom: 70px;
        position: relative;
    }
    
    .productPortfolio_section06.banner:after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.5);
        filter: brightness(0);
    }
    .productPortfolio_section06.banner .contactUs {
        position: relative;
        z-index: 2;
    }
    
    .bannerTitle {
        color: #fff;
        font-size: 75px;
        font-family: "SecondFont", sans-serif !important;
    }
    
    .bannerSubtitle {
        text-transform: uppercase;
    }
    
    .bannerSubtitle span {
        padding: 0 5px;
    }
    
    .bannerSubtitle01 {
        color: #27a9e0;
        font-size:20px;
    }
    
    .bannerSubtitle02 {
        color: #fff;
        font-size:20px;
    }
    
    .productPortfolio_title_special {
        color: #27a9e0;
        font-family: "SecondFont", sans-serif !important;
    }
    
    /* Prodcut Portfolio Section 1 */
    .productPortfolio_section01 {
        text-align: center;
        color: #000;
        padding: 4em 0;
    }
    
    .productPortfolio_section01_Div {
        margin: auto;
        padding: 50px;
        /*display: flex;*/
        /*justify-content: space-around;*/
    }
    
    .productPortfolio_section01_title {
        font-size: 30px;
        font-weight: 700;
        /*margin: 1.5em 0 0.5em 0;*/
        /*max-width: 70%;*/
        font-family: "SecondFont", sans-serif !important;
    }
    
    .productPortfolio_section01_Desc {
        text-align: left;
        padding: 20px 30px;
        font-size: 14px;
        min-height: 155px;
    }
    
    .portfolioContentText {
        font-size: 15px;
        line-height: 26px;
        color: #90939D;
    }
    
    .productPortfolio_section01_Img {
        width: 40px;
        height: 40px;
    }
    
    .productPortfolio_section01_Img.light {
        width: 30px;
        height: 40px;
    }
    
    .productPortfolio_section01_Desc_Title {
        font-size: 15px;
        font-weight: 500;
        margin: 10px 0;
    }
    
    .productBenefitImg {
        width: 100%;
    }
    
    /* Prodcut Portfolio Section 2 */
    .productPortfolio_section02 {
        background-color: #F5F8FA;
        color: #000;
        padding: 3em 100px;
        text-align: left;
    }
    
    .productPortfolio_section02_title {
        font-size: 36px;
        font-weight: 600;
        /*margin: 1.5em 0 0.5em 0;*/
        font-family: "SecondFont", sans-serif !important;
    }
    
    .btn.btn-primary.btn_section02 {
        border-radius: 0px;
        /*border: none;*/
        /*letter-spacing: 0.2em;*/
        /*text-transform: uppercase;*/
    }
    
    .btn.btn-primary.btn_section02.primary {
        background: #27a9e0;
        color: #fff;
    }
    
    .btn.btn-primary.btn_section02.secondary {
        background: #fff;
        color: #000;
    }
    
    .btn.btn-primary.btn_section02.primary:hover {
        background: #2696C6;
        color: #fff;
    }
    
    .btn.btn-primary.btn_section02.secondary:hover {
        background: #eee;
        color: #000;
    }
    
    /* Product Portfolio Section 3 */
    .productPortfolio_section03 {
        text-align: center;
        color: #000;
        /*padding: 7em 0;*/
        text-align: left;
    }
    
    .productPortfolio_section03_title {
        font-size: 40px;
        margin: 1.5em 0 0.5em 0;
    }
    
    .productRow {
        min-height: 200px;
    }
    
    .productDiv {
        width: 100%;
        border: 1px solid #DFDFDF;
        color: #000;
    }
    
    .productDiv img {
        width: 100%;
        height: 250px;
        object-fit: contain;
        cursor: pointer;
    }
    
    .productList {
        color: #000;
        text-align: center;
        border-bottom: 1px solid #E0E0E0;
        padding: 30px 0;
    }
    
    .sortStyle {
        margin-bottom: 0;
    }
    
    /*.productDiv:hover,
    .productList:hover {
        cursor: pointer;
    }*/
    
    .alignMiddle {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        height: auto;
    }
    
    .productList img {
        max-height: 200px;
        max-width: 100%;
    }
    
    .productText {
        padding: 15px;
    }
    
    .productTitle {
        font-size: 15px;
        font-weight: 600;
        padding: 10px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .productDesc {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
    }
    
    .productPrice {
        color: #27a9e0;
        font-weight: 500;
    }
    
    .promoSlash {
        position: relative;
        color: #27a9e08c;
    }
    
    .promoSlash:after {
        content: '';
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 2px;
        background-color: #ff0000;
    }
    
    .productInputBox {
        /*width: 60%;*/
        border-radius: 1px;
        border: 1px solid #E0E0E0;
        flex-wrap: nowrap;
        position: relative;
        align-items: center;
    }
    
    .productInputBox .form-control {
        border-top: none;
        border-bottom: none;
    }
    
    .productInputBox:focus-within,
    .productInputBox .form-control:focus,
    .productInputBox .form-control:hover {
        border-color: #27A9E0;
    }
    
    .inputGroupBtn:hover {
        cursor: pointer;
    }
    
    .inputAppendIcon {
        margin: 5px 15px;
        color: #2F584F;
        font-weight: 300;
        font-size: 12px;
    }
    
    .removeBtn:hover {
        cursor: pointer;
    }
    
    .btn.btn-primary.btnAddToCart {
        background: #27A9E0;
    }
    
    .btn.btn-primary.btnAddToCart:hover {
        background: #2696C6;
    }
    
    .btn.btn-primary.btnAddToCart img {
        width: 20px;
        height: 20px;
    }
    
    /* Prodcut Portfolio Section 4 */
    .productPortfolio_section04 {
        background-color: #F5F8FA;
        text-align: center;
        color: #000;
        padding: 4.5em 0;
        text-align: left;
    }
    
    .productPortfolio_section04_title {
        font-size: 40px;
        margin: 1.5em 0 0.5em 0;
    }
    
    .productPortfolio_section04_subtitle {
        font-size: 1.2em;
        color: #6D6D6F;
        margin-bottom: 1.2em;
    }
    
    .productPortfolio_section04_list {
        list-style: none;
        padding-left: 0;
    }
    
    .productPortfolio_section04_list li:before {
        background-image: url('/images/project/listStyleChecked.png');
        background-size: 20px 20px;
        display: inline-block;
        width: 20px;
        height: 20px;
        content: '';
        margin-right: 10px;
        vertical-align: middle;
    }
    
    .productPortfolio_section04_list.blue li:before {
        background-image: url('/images/project/listStyleCheckedBlue.png');
    }
    
    .productPortfolio_section04_list li {
        padding: 2% 0;
        font-size: 15px;
        color: rgba(0,0,0,0.75);
    }
    
    /* Prodcut Portfolio Section 5 */
    .productPortfolio_section05 {
        text-align: center;
        color: #000;
        padding: 7em 20px;
        background-image: url('/images/project/reviewBg.png');
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    .productPortfolio_section05_title {
        margin-bottom: 3em;
        font-size: 30px;
        font-weight: 500;
    }
    
    .client {
        width: 90%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .clientImg {
        position: relative;
    }
    
    .clientImg img {
        width: 50%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .clientSlideWrap {
        position: relative; 
        margin: 7em 0;
    }
    
    blockquote.reviewText {
        /*padding: 0 20em;*/
        font-size: 14px;
        line-height: 24px;
    }
    
    blockquote:before {
        font-family: Georgia, "times New Roman" , serif; 
        display: block;
        content: "\201C";
        font-size: 30px;
        position: absolute;
        left: 0;
        top: -20px;
        color: #CFCFCF;
    }
    
    blockquote:after {
        font-family: Georgia, "times New Roman" , serif; 
        display: block;
        content: "\201D";
        font-size: 30px;
        position: absolute;
        right: 0;
        bottom: -20px;
        color: #CFCFCF;
    }
    
    /* Prodcut Portfolio Section 6 */
    
    .contactUs .title {
        font-size: 18px;
    }
    
    .contactUs .hpNo {
        font-size: 36px;
        font-family: "SecondFont", sans-serif !important;
    }
    
    /*.contactUs button {
        background-color: #fd9f41;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.25em;
        padding: 15px 30px;
        margin-top: 40px;
        border: none;
    }*/
    
    /*.contactBtn {
        text-transform: uppercase;
        color: #fff;
        background: #27a9e0 !important;
        padding: 15px 50px !important;
        border: 0px !important;
        letter-spacing: 0;
        font-size: 15px;
    }
    
    .contactBtn:hover{
        background: blue !important;
    }*/
    
    /* Product Listing Page */
    .sidebar {
        border-right: 2px solid #E0E0E0;
        padding: 30px;
        color: #000;
    }
    
    .productSearchBox {
        position: relative;
        z-index: 2;
    }
    
    .productSearchBox .productAutocompleted {
        border: 1px solid #E0E0E0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
    }
    
    .productSearchBox .productAutocompleted .productItem {
        padding: 5px 15px;
        border-bottom: 1px solid #efefef;
    }
    
    .productSearchBox .productAutocompleted .productItem:hover, .productSearchBox .productAutocompleted .productItem.selected {
        color: #fff;
        background: #27a9e0;
    }
    
    .productSearchBox .productAutocompleted .productItem:last-child {
        border-bottom: none;
    }
    
    .pSearchBtn {
        cursor: pointer;
    }
    
    .login-input-group-text.inputAppendText {
        margin: 0 20px;
        color: #fd9f41;
        font-weight: 300;
        font-size: 12px;
    }
    
    .login-input-group-text i {
        color: #fd9f41;
        font-size: 1.2rem;
    }
    
    .inputBox {
        width:100%;
        border: 1px solid #E0E0E0;
        border-radius: 2px; 
        flex-wrap: nowrap;
        position: relative;
        align-items: center;
        background-color: #fff;
        height: 48px;
    }
    
    .form-control.inputPrepend, .form-control.inputPrepend:focus {
        border: none;
    }
    
    .filterTitle {
        border-bottom: 1px solid #E0E0E0;
    }
    
    .filterTitle label {
        font-size: 18px;
        font-weight: 500;
    }
    
    .productCat .catItem {
        display: block;
        width: 100%;
        margin: 2px auto;
        cursor: pointer;
        padding: 8px 15px 8px 15px;
        border-radius: 3px;
        font-size: 14px;
    }
    
    .productCat .catItem:hover, .productCat .catItem.active {
        background-color: #27a9e0;
        color: #fff;
        /*text-decoration: underline;*/
        font-weight: 600;
    }
    
    .productFilterPrice div {
        margin: 5px auto;
    }
    
    #priceSlider .ui-state-default, .ui-widget-content .ui-state-default {
        border: 2px solid #27a9e0;
    }
    #priceSlider .ui-slider-range {
        background-color: #27a9e0;
    }
    
    .btnFilter {
        border-radius: 2px;
        border: none !important;
        background: #27a9e0 !important;
        background-color: #27a9e0 !important;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        padding: 10px 40px;
        margin: 0 10px 10px 0;
    }
    
    .btnFilter:hover {
        background: #1F94C5 !important;
        background-color: #1F94C5 !important;
    }
    
    .productTag ul {
        list-style: none;
        padding-left: 0;
    }
    
    .productTag li {
        margin: 5px auto;
    }
    
    .productTag li::before {
        content: '#';
        display: inline-block;
        margin-right: 10px;
    }
    
    .productTag li:hover {
        background-color: #fd9f41;
        border-radius: 2px;
    }
    
    .productListDiv {
        padding: 30px;
        color: #000;
    }
    
    .filterHeader {
        border-radius: 2px;
        border: none;
        background: #F5F8FA;
        margin: auto;
        padding: 10px;
        display: inline-flex;
        justify-content: space-between;
    }
    
    .filterLeft {
        display: inline-flex;
        vertical-align: middle;
        align-items: center;
    }
    
    .filterLeft span i {
        color: #000;
        background-color: transparent;
        transform: rotateZ(90deg);
        padding: 3px;
    }
    
    .filterLeft span i:hover {
        cursor: pointer;
    }
    
    .filterLeft button {
        border-radius: 2px;
        border: none;
        background-color: transparent;
        padding: 5px 10px;
        margin: auto 5px;
    }
    
    .filterLeft button.selected,
    .filterLeft button:hover {
        color: #fff;
        background-color: #27a9e0;
    }
    
    .filterRight span i {
        border: 1px solid #E0E0E0;
        border-radius: 2px;
        padding: 3px;
        margin: 3px;
        color: #E0E0E0;
    }
    
    .filterRight span i:hover {
        cursor: pointer;
    }
    
    .filterRight span i.active {
        color: #000;
        background-color: transparent;
    }
    
    .greyBackdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0,0,0,0.5);
        z-index: 99;
    }
    
    .page-item {
        width: 32px;
        height: 32px;
        border-radius: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .pagination .page-item:first-child {
        border-radius: 3px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        display: none;
    }
    .pagination .page-item:last-child {
        border-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        display: none;
    }
    
    .page-item.active {
        background: #1B75BB;
    }
    
    .page-item.active .page-link {
        border-radius: 100%;
        color: #fff;
    }
    
    .paginationStyle:hover {
        color: #000 !important;
        border-radius: 100%;
    }
    
    .page-item.active .page-link:hover {
        border-radius: 100%;
        color: #fff !important;
        border: none !important;
    }
    
    
    /* Product Detail */
    .productDetail_section01{
        /*margin-top: 5%;*/
    }
    
    .imageDiv{
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    .activeImage{
        width:100%;
        height: 370px;
        object-fit: contain;
    }
    
    .iconsDiv{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    .altImg {
        cursor: pointer;
    }
    
    .iconActive{
        width:25%;
        margin-left: 5%;
    }
    
    .iconInactive{
        margin-top: 9%;
        margin-left: 5%;
        width:20%;
    }
    
    .productDetailTitleDiv{
        margin-bottom: 30px;
    }
    
    .productDetailTitle{
        font-size:28px;
        color: #000;
        font-weight: 600;
        font-family: "SecondFont", sans-serif !important;
    }
    
    .productDetailContent{
        font-size: 17px;
    }
    
    .buttonsDiv{
        display:flex;
        flex-direction:row;
        justify-content: flex-end;
        margin-top: 100px;
    }
    
    .productButton1{
        padding: 10px 30px !important;
        border :0px;
        border-radius: 5px;
        background: #8cbe44;
        text-transform: uppercase;
        letter-spacing: 3px;
    }
    
    .productButton2{
        padding: 10px 30px !important;
        border: 0px !important;
        border-radius: 5px;
        background: #27a9e0 !important;
        margin-left: 20px;
        text-transform: uppercase;
        letter-spacing: 3px;
    }
    
    .productButton2:hover{
        background: blue !important;
    }
    
    .productButton3{
        padding: 10px 30px !important;
        border: 2px solid #f8f8f8 !important;
        border-radius: 5px;
        background: white !important;
        margin-left: 20px;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: black !important;
    }
    
    .productButton3:hover{
        color: white !important;
    }
    
    .productDetail_section02{
        /*margin-top: 10%;*/
    }
    
    .descriptionTitleText{
        cursor: pointer;
        font-size: 16px;
        border-bottom: 0px;
        border-radius: 0;
        padding-bottom: 10px;
        /*margin-left: 15px;*/
        color:#c0c2c8;
        display: inline;
        font-weight: 500;
    }
    
    /*.descriptionTitleText:hover {
        color: rgba(0,0,0,0.5);
        border-bottom: 3px solid #ff9d3fba;
    }*/
    
    .activeText{
        font-size: 16px;
        display: inline;
        border-bottom: 3px solid #27A9E0;
        padding-bottom: 10px;
        /*margin-left: 15px;*/
        border-radius: 0;
        color:black;
    }
    
    /*.activeText:hover {
        border-bottom: 3px solid #27A9E0;
        color: black;
    }*/
    
    .descriptionContentDiv{
        margin-top: 50px;
        /*margin-bottom: 50px;*/
    }
    
    .descriptionContentTextActive{
        color: black;
        line-height: 2;
    }
    
    .descriptionContentTextInactive{
        display: none;
    }
    
    .tableHeader2{
        background: #f8f8f8;
    }
    
    .tableContent td,
    .tableHeader2 td{
        border:1px solid #EBEBEB;
        /*padding: 20px 30px;*/
    }
    
    .tableContent .removeBtn {
        color: #EB0000;
    }
    
    .smallText {
        color: #000;
        font-size: 12px;
    }
    
    .table td {
        color: #303030;
    }
    
    .cartTable{
        width:100%;
        border:1px solid #EBEBEB;
        margin-bottom: 50px;
    }
    
    .shoppingCartSection{
        margin-top: 5%;
        margin-bottom: 5%;
        padding-left: 5%;
        padding-right: 5%;
    }
    
    /* Contact Us */
    .contactDetailsDiv {
        position: relative;
        height: auto;
        width: 100%;
        background-image: url('/images/project/contactDetails2.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        padding: 5% 0;
    }
    
    .contactDetailsDesc {
        position: relative;
        /*top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;*/
        padding: 0 70px;
    }
    
    .contactTitle {
        font-weight: 600;
        font-size: 30px;
        font-family: "SecondFont", sans-serif !important;
    }
    
    .contactSubtitle1 {
        width: 70%;
        font-size: 14px;
    }
    
    .contactSubtitle2 {
        font-size: 14px;
    }
    
    .contactDiv {
        /*width: 70%;*/
        margin: 40px auto;
    }
    
    .contactText {
        font-weight: 500;
        font-size: 15px;
        /*width: 70%;*/
    }
    
    .contactIco {
        max-width: 25px;
        max-height: 25px;
        /*margin: 10px;*/
    }
    
    .contactForm {
        background: white;
        padding-top: 5%;
        padding-bottom: 5%;
    }
    
    .contactButton {
        border-radius: 5px;
        text-transform: uppercase;
        color: #fff;
        background: #27a9e0 !important;
        padding: 10px 30px !important;
        border: none !important;
    }
    
    /* Checkout */
    .checkoutTitle {
        font-size: 30px;
        font-weight: 600;
        font-family: "SecondFont", sans-serif !important;
    }
    
    .shippingOption {
        padding: 10px 15px;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        height: auto;
    }
    
    .shippingOption label {
        margin: 0;
    }
    
    .shippingOption > select {
        width: 100%;
        outline: none;
        border: none;
    }
    
    .shippingOption > select > option {
        width: 100%;
    }
    
    .shippingIco {
        max-width: 50px;
        max-height: 30px;
        margin: auto 10px auto 15px;
    }
    
    .formTitle {
        font-size: 18px;
        font-weight: 500;
    }
    
    .control-label {
        font-size: 14px;
    }
    
    .summaryDiv {
        border: 1px solid #E0E0E0;
        border-radius: 5px;
        padding: 0 20px;
    }
    
    .cartItem {
        border-radius: 0;
        border-top: 1px solid #E0E0E0;
        margin: 0;
        padding: 1em 0;
        /*display: inline-flex;*/
        /*justify-content: space-around;*/
        text-align: center;
        align-content: center;
        align-items: center;
    }
    
    .cartItem:first-child {
        border-top: none;
    }
    
    .cartItem span {
        padding: 15px 8px;
    }
    
    .cartImgDiv {
        width: 60px;
        height: 60px;
        text-align: center;
    }
    
    .cartImgDiv img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    .shopCartImg {
        width: 100px;
        height: 100px;
        object-fit: contain;;
    }
    
    .promocodeTitle {
        font-size: 16px;
    }
    
    .promocodeItem {
        margin: 0 !important;
    }
    
    .promocodeItem button {
        border: none;
        border-radius: 3px;
        background: #8CBE44;
        color: #fff;
        padding: 10px 20px;
        margin: 0 5px 0 20px;
    }
    
    .promocodeItem i {
        color: #8CBE44;
        margin: 0 20px;
    }
    
    .feeCalc {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        margin-bottom: 15px;
        font-size: 14px;
    }
    
    .feeTotal {
        font-size: 17px;
        padding: 20px 10px 0 10px;
        margin-bottom: 0;
        border-radius: 0;
        border-top: 1px solid #E0E0E0;
    }
    
    .checkoutBtn {
        padding: 20px 0;
    }
    
    .checkoutBtn a {
        color: #fff;
        background: #8CBE44;
        letter-spacing: 2px;
        text-transform: uppercase;
        border: none;
        border-radius: 3px;
        padding: 10px 30px;
    }
    
    .checkoutBtn button {
        color: #fff;
        background: #8CBE44;
        letter-spacing: 2px;
        text-transform: uppercase;
        border: none;
        border-radius: 3px;
        padding: 10px 30px;
    }
    
    .checkoutBtn button i {
        font-size: 0.5em;
    }
    
    /* Pickup Details */
    .pickupDiv{
        border: 1px solid #E0E0E0;
    }
    
    .pickUpSelectionDiv{
        border-bottom: 1px solid #E0E0E0;
        padding: 25px;
        padding-right: 20%;
    }
    
    .pickUpSelectionDiv:nth-last-child(1){
        border-bottom: none;
    }
    
    .radioStyle {
        -webkit-appearance:none;
        width:20px;
        height:20px;
        border:1px solid #E6E6E6;
        border-radius:50%;
        outline:none;
        margin-right: 5px;
        position: relative;
    }
    
    .radioStyle:before {
        content:'';
        display:block;
        width:50%;
        height:50%;
        border-radius:50%;
        background-color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .radioDiv{
        margin-top: 25px;
    }
    
    .radioStyle:checked {
        box-shadow:0 0 10px 10px #00db49 inset;
    }
    
    .borderline3 {
        border-top: 1px solid #d5d5d5;
        padding-top: 20px;
    }
    
    /* Shipping Details */
    .shippingSelectionDiv{
        border: 1px solid #E0E0E0;
        padding: 30px;
        margin-left: 20px;
    }
    
    .shippingIcon{
        width: 35px;
    }
    
    /* Payment Method */
    .paymentDiv{
        border: 1px solid #E0E0E0;
        padding: 30px;
    }
    
    .paymentIcon{
        width: 100%;
    }
    
    .modal .modal-content {
        border-radius: 0px;
    }
    
    .noResultIcon {
        width: 100px;
    }
    
    .cartPVDisplay {
        color: #000;
        font-size: 25px;
    }
    
    .cartRPDisplay {
        color: #000;
        font-size: 18px;
    }
    
    .cartPVDisplay span,
    .cartRPDisplay span {
        font-weight: 600;
    }
    
    .deliverySection table, .deliverySection td, .deliverySection th {
        border-bottom: none; 
        padding: 3px 0;
        word-break: break-word;
    }
    
    .form-group.forgot{
        border: 1px solid #E0E0E0;
    }
    
    .modal.forgotModal{
        overflow: auto;
    }
    
    .form-control.date {
        border-right: none;
    }
    
    .input-group-append.date{
        border: 1px solid #E0E0E0;
        border-left: none;
    }
    
    .modalSmallText {
        font-size: 14px;
        color: #000;
    }
    
    .forgotRadioText {
        font-size: 14px;
        color: #000;
    }
    
    .paymentSelectWrap {
        position: relative;
    }
    
    .customDropdown {
        border: 1px solid #E0E0E0 !important;
        width: 100%;
        border-radius: 3px;
        background: #fff !important;
        color: #000 !important;
        padding: 10px;
        cursor: pointer;
    }
    
    .customDropdown-content {
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        min-width: 150px;
        width: 100%;
        border: 1px solid #E0E0E0;
        display: none;
        z-index: 100;
    }
    
    .customDropdown-content a {
        color: #6c6e86;
        padding: 12px;
        text-decoration: none;
        display: block;
        outline: none;
        border: none;
        word-break: break-all;
        text-align: left;
    }
    
    .customDropdown a:hover:not(.dropbtn){
        background-color: #ececec;
        color: #6c6e86;
    }
    
    .downIcon {
        float: right;
        margin-top: 5px;
    }
    
    .termFont {
        font-size: 14px;
        color: black;
    }
    
    .termRemark {
        font-size:11px;
    }
    
    /* Payment Complete */
    .paymentCompleteDiv {
        background-color: #f8f8f8;
        margin: 50px 80px;
        padding: 80px;
    }
    
    .btn-default.white {
        color: black;
        border: 1px solid #ececec;
        background-color: white;
    }
    
    /* Homepage */
    .homepageBg1 {
        background-image: url(../images/project/GT1Banner.webp);
        background-size: cover;
        background-position: left;
        background-repeat: no-repeat;
        width: 100%;
        aspect-ratio: 16 / 9;
        cursor: pointer;
    }
    
    .homepageBg2 {
        background-image: url('../images/project/what-we-sell-banner-2.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .homepageBgEng2 {
        background-image: url('../images/project/moonFestival1048x380.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .menuIcon.fa, .menuIcon.fas {
        font-size: 24px;
    }
    
    /* Ipad Pro View */
    @media (max-width: 1199px) {
        .homepage_modal {
            width:100%;
        }
    
        /*.homepage_section01_content,
        .homepage_section02_content,
        .homepage_section04_content,
        .homepage_section05_content,
        .homepage_section04_list li,
        .blackFont {
            font-size: 21px;
        }*/
    
        .homepage_section03_date,
        .homepage_section03_title{
            font-size: 24px;
        }
    
        .homepage_section03_date,
        .homepage_section03_title{
            font-size: 22px;
        }
        
        .homepage_modal_logo {
            width:25%;
            margin: 0 auto;
        }
    
        .homepage_modal_title, .homepage_modal_content {
            margin: 0 auto;
            padding: 0;
        }
    
        .homepage_modal_content {
            margin-top: 2.5%;;
            padding: 2.5%;
            width: 80%;
            min-height: 0;
        }
    
        .compImage{
            width:100%;
        }
    
        /*.blackFont{
            font-size: 18px;
        }*/
    
        .productPortfolio_section01_Desc {
            padding: 25px 20px;
            min-height: 0;
            height: auto;
        }
    
        /*blockquote {
            font-size: 1.1em;
            padding: 0 5em;
        }
    
        blockquote:before {
            left: 15px;
        }
    
        blockquote:after {
            right: 15px;
        }*/
    }
    
    /* Ipad View */
    @media (max-width: 990px) {
    
        .showDropdown.open {
            border-bottom: none;
            margin-bottom: 0;
        }
    
        .transparentBG{
            background: rgba(0,0,0,0.7);
            top: 0;
            left: 0%;
            right: 0;
            position: fixed;
            z-index: 50;
            height: 100%;
            width: 100%;
            display: none;
        }
    
        .mobileSidebar.open ~ .transparentBG{
            display: block;
        }
    
        .mobileSidebar{
            bottom: 0;
            top: 0;
            left: -80%;
            z-index: 100;
            position: fixed;
            height: 100%;
            background: white;
            flex-direction: column;
            display: flex;
            justify-content: flex-start;
            padding: 0 15px;
            overflow-y: auto;
        }
    
        .mobileSidebar.open {
            left: 0;
            transition: 0.3s ease;
        }
    
        .sidebarFont{
            font-size: 12px;
        }
    
        .sidebarFooter{
            position: absolute;
            bottom: 1%;
            width: 100%;
        }
    
        .borderline2 {
            height: 2px;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            background-color: #d5d5d5;
        }
    
        .closeSidebar{
            position: absolute;
            right: 20px;
            top: 20px;
            color: #fff;
        }
    
        .homepagePadding {
            padding: 0 30px;
            margin-top: 50px;
        }
    
        .homepage_modal {
            width:100%;
        }
    
        .homepage_modal_title {
            text-align: center;
            padding: 5% 0 2.5% 0;
        }
    
        .homepage_section01_title,
        .homepage_section02_title,
        .homepage_section04_title,
        .homepage_section05_title {
            font-size: 28px;
        }
    
        /*.homepage_section01_content,
        .homepage_section02_content,
        .homepage_section04_content,
        .homepage_section05_content,
        .homepage_section04_list li,
        .blackFont {
            font-size: 15px;
        }*/
        .homepage_section03_date,
        .homepage_section03_title{
            font-size: 18px;
        }
    
        .homepage_section01_button {
            display:block;
        }
        .header_menu_div2{
            width:100%;
            text-align: center;
        }
    
        .homepage_modal_logo {
            width:25%;
            margin: 0 auto;
        }
        .homepage_modal_title, .homepage_modal_content {
            margin: 0 auto;
            padding: 0;
        }
    
        .homepage_modal_content {
            width: 80%;
            min-height: 0;
        }
    
        .homepage_section04_list{
            padding: 0;
        }
    
        .bannerTitle {
            font-size: 65px;
        }
    
        .productPortfolio_section01_Desc {
            padding: 25px 20px;
        }
    
        /*blockquote {
            font-size: 1.1em;
            padding: 0 5em;
        }
    
        blockquote:before {
            left: 15px;
        }
    
        blockquote:after {
            right: 15px;
        }*/
    
        .contactDetailsDesc {
            /*padding: 20px 10% 20px 10%;*/
        }
    
        .contactTitle {
            font-size: 22px;
        }
    
        .contactSubtitle1 {
            width: 85%;
        }
    
        /*.contactText {
            width: 85%;
        }*/
        .productDetailTitle{
            font-size:20px;
        }
        .productDetailTitleDiv{
            margin-bottom: 5px;
            margin-top: 20px;
            padding-left:20px;
        }
        .buttonsDiv{
            margin-top: 20px;
        }
        .productButton1{
            padding: 5px 15px;
        }
        .productButton2{
            padding: 5px 15px;
        }
        .productButton3{
            padding: 5px 15px;
        }
    
        .homepage_section01_image {
            height: 300px;
        }
    
        .homepage_section03_video_div {
            transform: translateY(0px);
        }
    
        .productPortfolio_section02 {
            padding: 3em 50px;
        }
    
        .productPortfolio_section02_title {
            font-size: 28px;
        }
    
        .sidebar {
            position: fixed;
            z-index: 999;
            height: 100%;
            width: 40%;
            left: -100%;
            top: 0;
            border: 0;
            border-radius: 0;
            background-color: #fff;
            /*transition: all .5s ease;*/
            overflow-y: auto;
        }
    
        .sidebar.show {
            left: 0;
        }
    
        .greyBackdrop.show {
            display: block;
        }
    
        .bannerImg {
            height: 200px;
        }
    
        .cartPVDisplay {
            font-size: 22px;
        }
    }
    
    
    /* Mobile View */
    @media (min-width: 320px) and (max-width: 767px) {
        .homepage_modal {
            width: 100%;
        }
    
        .homepage_modal_title {
            text-align: center;
            font-size: 20px;
            padding: 5% 0 2.5% 0;
        }
    
        .homepage_section01_title,
        .homepage_section02_title,
        .homepage_section04_title,
        .homepage_section05_title {
            font-size: 20px;
        }
    
        /*.homepage_section01_content,
        .homepage_section02_content,
        .homepage_section04_content,
        .homepage_section05_content,
        .homepage_section04_list li,
        .blackFont {
            padding: 1% 0 1% 0;
            font-size: 15px;
        }*/
    
        .homepage_section01_content {
            /*text-align: center;*/
        }
    
        .homepage_section03_title {
            font-size: 11px;
        }
    
        .homepage_section03_date {
            font-size: 9px;
        }
        .homepage_section03_content {
            font-size: 14px;
        }
    
        .homepage_slide {
            padding: 0;
        }
    
        .homepage_slide > div > div {
            height: 50%;
        }
    
        .header_menu_div2{
            width:100%;
            text-align: center;
        }
    
        .homepage_modal_logo {
            width:40%;
        }
    
        .homepage_modal_content {
            margin: 0;
            padding: 5%;
            width: 100%;
        }
    
        .backIcon {
            font-size: 25px;
        }
        
        .homepage_section04_list{
            padding: 0;
        }
    
        .dashboardFooter {
          position: relative;
        }
    
        .bannerTitle {
            font-size: 25px;
        }
    
        .bannerSubtitle01 {
            font-size:13px;
        }
    
        .bannerSubtitle02 {
            color: #fff;
            font-size:13px;
        }
    
        .homepage_footer_text{
            font-size: 11px;
            font-weight: 600;
        }
    
        .aboutTitle2 {
            font-size:20px;
        }
    
        .aboutTitle {
            font-size:20px;
        }
    
        .productPortfolio_section01_Div {
            flex-direction: column-reverse;
        }
    
        .productPortfolio_section01_title {
            font-size: 20px;
        }
    
        .productPortfolio_section02_title {
            font-size: 20px;
        }
    
        .productPortfolio_section03_title {
            font-size: 20px;
        }
    
        .productPortfolio_section04_title {
            font-size: 20px;
        }
    
        .productPortfolio_section05_title {
            font-size: 20px;
        }
    
        blockquote {
            padding: 0 15px;
        }
    
        blockquote:before {
            left: 5px;
        }
    
        blockquote:after {
            right: 5px;
        }
    
        .contactUs label {
            font-size: 18px;
        }
    
        .contactUs span {
            font-size: 20px;
        }
    
        .contactUs button {
            font-size: 10px;
            padding: 10px 20px;
            margin-top: 15px;
        }
    
        .filterLeft button {
            padding: 5px 8px;
            margin: 6px 5px;
            font-size: 12px;
        }
    
        .contactDetailsDesc {
            padding: 0 25px;
        }
    
        .contactTitle {
            font-size: 23px;
        }
    
        .contactSubtitle1 {
            width: 85%;
        }
    
        /*.contactText {
            width: 85%;
        }*/
    
        .feeCalc {
            font-size: 13px;
        }
    
        .feeTotal {
            font-size: 15px;
        }
        .pickUpSelectionDiv{
            padding: 15px;
        }
    
        .homepage_product > img {
            margin-left: auto;
            margin-right: auto;
            /*height: 200px;*/
        }
    
        .homepage_product2 {
            height: 90%;
        }
    
        .homepage_product2 > img {
            margin-left: auto;
            margin-right: auto;
            height: 100%;
        }
    
        .homepagePadding {
            padding: 0 20px;
            margin-top: 30px;
        }
    
        .homepage_section01_image {
            height: 250px;
        }
    
        .compTitle {
            font-size: 16px;
        }
    
        .bannerImg {
            height: 150px;
        }
    
        .bannerImg.second {
            height: auto;
        }
    
        .productPortfolio_section02 {
            padding: 3em 15px;
        }
    
        .productPortfolio_section05 {
            padding: 2em 20px;
        }
    
        .clientSlideWrap {
            margin: 2em 0;
        }
    
        .productPortfolio_section04 {
            padding: 3em 0;
        }
    
        .portfolioContentText {
            font-size: 12px;
        }
    
        .productPortfolio_section01_Div {
            padding: 30px;
        }
    
        .productBenefitImg {
           padding: 20px 0;
        }
    
        .sortBox {
            display: none;
            position: absolute;
            top: calc(100% + 5px);
            z-index: 3;
            background-color: #ececec;
        }
    
        .sortStyle {
            color: black;
        }
    
        .sortBtn:checked ~ .sortStyle {
            color: #27A9E0;
        }
    
        .sortBtn:checked ~ .sortBox {
            display: block;
        }
    
        .sortBox {
            width: 180px;
            padding: 20px;
        }
    
        .topFilter {
            display: block;
            margin: 5px 0;
            text-align: left;
        }
    
        .sidebar {
            width: 80%;
        }
    
        .cartPVDisplay {
            font-size: 20px;
        }
    
        .cartRPDisplay {
            font-size: 16px;
        }
    
        .descriptionContentDiv {
            margin-top: 35px;
        }
    
        .loginModal {
            margin-top: 50%;
            transform: translateY(-25%);
        }
    
        .paddingTopTenMobile {
            padding-top: 10px;
        }
    }
    
    @media (max-width: 575px) {
        .homepageBgGrp1 {
            padding: 0;
            padding-top: 73px;
        }
    }
    
    .kt-container {
        max-width: 1168px !important;
    }
/* End of Homepage CSS */

/* Invoice css */

#printContent {
    display: none;
}

.invoiceOuterWrapper {
    background-color: #fff;
    padding: 10px;
    position: relative;
}

.default-half {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
}

.invoiceFooterImg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 350px;
    z-index: 1;
}

.invoiceWrapper {
    max-width: 1400px;
    margin: auto;
    padding: 30px 50px 100px 30px;
    color: #000;
    z-index: 100;
}

.invoiceCompanyName {
    color: #27A9E0;
    font-size: 20px;
    font-weight: 600;
}

.invoiceBold {
    font-weight: 600;
    font-size: 14px;
}

.invoiceThin {
    font-size: 14px;
    font-weight: 200;
}

.invoiceBoldLarge {
    font-weight: 600;
    font-size: 16px;
}

.invoiceThinLarge {
    font-weight: 200;
    font-size: 16px;
}

.invoiceLogo {
    width: 250px;
    max-width: 90%;
}

.invoiceTable thead tr th:first-child {
    border-left: 1px solid #f8f8f8 !important;
}

.invoiceTable thead tr th:last-child {
    border-right: 1px solid #f8f8f8 !important;    
}


.invoiceTable thead tr th {
    background-color: #f8f8f8 !important;
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
}

.invoiceTable tbody td:first-child {
    border-left: 1px solid #f8f8f8 !important;
}

.invoiceTable tbody td:last-child {
    border-right: 1px solid #f8f8f8 !important;
}

.invoiceTable tbody td {
    background-color:  #fff !important;
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
}

.totalRow {
    border: 1px solid transparent !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.grandTotalBox {
    background-color: #27A9E0;
    color: #fff;
    font-size: 20px;
    display: inline-block;
    padding: 5px 10px;
}

.invoiceTotalAmount {
    font-weight: 600;
    width: 150px;
    display: inline-block;
}

.remarksBox {
    background-color: #F2FAFE;
    padding: 10px;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
  .chargesTitle {
    display: none;
  }

  .mobileReverse {
    flex-direction: column-reverse;
  }

  .mobile-full {
    width: 100%;
    margin: 15px 0;
  }

  .invoiceWrapper {
    padding: 30px 20px;
  }

  .invoiceFooterImg {
    width: 150px;
  }

  .invoiceTotalAmount {
      width: unset;
  }

  .remarksBox {
    margin-bottom: 10px;
  }

}


@media print {

    @page {
      size: auto;
    }

    * {
        font-family: Arial;
        line-height: unset;
    }

    .invoiceCompanyName {
        font-size: 25px;
    }

    .invoiceBold, .invoiceThin {
        font-size: 18px;
    }

    .invoiceBoldLarge, .invoiceThinLarge {
        font-size: 20px;
    }


    .headerMenu, .sidebarMenuWrapper, .sideMenuWrapper,.pageContent,.footer, .modal, .modal-backdrop {
        display: none !important;
    }

    #printContent {
        display: block !important;
    }

    .invoiceOuterWrapper {
        width: 100%;
    }
    
    .invoiceWrapper {
        padding: 45px;
    }

    .invoiceCompanyName {
        color: #23beff !important;
    }

    .invoiceLogo {
        width: 350px !important;
        max-width: 350px !important;
    }

    .table-bordered .totalRow {
        border: 1px solid transparent !important;
    }

    .invoiceFooterImg {
        position: fixed;
        width: 40%;
        max-width: 40%;
    }

    .grandTotalBox {
        background-color: #23beff !important;
        color: #fff !important;
    }

    #grandTotal {
        color: #fff !important;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        color: #000 !important;
    }

    .table td {
        color: #000 !important;
        font-size: 18px !important;
    }



}
/* End of invoice css */

/* landing CSS */
.landingSection01 {
    background-color: #192e57;
    padding-top: 0px;
    height: 500px;
    min-height: 500px;
    max-height: 500px;
}

.landingSection01Img {
    background-image: url(../images/alpharoc/landing/landingSection01.jpg);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-top: 50px;
    padding-bottom: 300px;
    padding-left: 30px;
    padding-right: 30px;
    position: absolute;
    width: 100%;
    -webkit-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
}

.landingSection01Title {
    font-weight: 600;
    color: #2a3957;
    font-size: 35px;
}

.landingMoreBtn {
    font-weight: 300;
    color: #fff;
    font-size: 17px;
    background-color: #46a6bc;
    padding: 10px 20px;
    border-radius: unset;
    border: unset;
}

.landingSection02 {
    background-color: #f4f8ff;
    padding-bottom: 30px;
    padding-top: 230px;
}

.landingTitleLine {
    width: 50px;
    height: 5px;
    background-color: #8bddc9;
    border-radius: 20px;
    margin: 0 auto;
}

.landingTitleLine2 {
    width: 50px;
    height: 5px;
    background-color: #8bddc9;
    border-radius: 20px;
}

.landingSection02Title {
    font-weight: 600;
    font-size: 25px;
    color: #2a3957;
}

.landingSection02Desc {
    font-weight: 300;
    font-size: 15px;
    color: #808080;
    word-break: break-all;
}

.userImgSize {
    width: 200px;
    margin: 0 auto;
}

.userImg {
    height: 200px;
    width: 200px;
    border-radius: 100%;
}

.userCircle {
    height: 50px;
    width: 50px;
    background-color: #46a6bc;
    position: absolute;
    bottom: 0;
    border-radius: 100%;
    z-index: 1;
}

.companyVideoWidth {
    width: 500px;
    height: 300px;
}

.landingSection04 {
    background-color: #f4f8ff;
    padding-bottom: 100px;
}

.personalVideoWidth {
    height: 200px;
}

.landingSection05 {
    margin-top: -50px;
}

.landingSection05Box {
    background-color: #fff;
    padding: 20px 50px;
    text-align: center;
    -webkit-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
}

.landingSection07Box {
    background-color: #e4faff;
    padding: 20px 50px;
    text-align: center;
    -webkit-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
}

@media (min-width: 320px) and (max-width: 767px) {
    .landingSection07Box {
        background-color: #e4faff;
        padding: 10px 20px;
        text-align: center;
        -webkit-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
    }
}

.landingSection05Link {
    font-weight: 600;
    font-size: 20px;
    color: #000;
}

.landingSection05LinkText {
    color: #46a6bc;
    text-decoration: underline;
    cursor: pointer;
}

.landingSection06 {
    margin-top: 80px;
    padding-bottom: 80px;
}



.landingIcon {
    width: 70px;
}

.landingIine {
    width: 100px;
}

.landingSection06Box1 {
    width: 15%;
    text-align: center;
    font-size: 15px;
}

.landingSection06Box2 {
    width: 13.333%;
    text-align: center;
    margin-top: 50px;
}

.landingSection06Box3 {
    width: 15%;
    text-align: center;
    margin-top: 20px;
    font-size: 15px;
}

.landingSection06Box4 {
    width: 13.333%;
    text-align: center;
    margin-top: 20px;
}

.landingSection06Box5 {
    width: 15%;
    text-align: center;
    font-size: 15px;
}

.landingSection06Box6 {
    width: 13.333%;
    text-align: center;
    margin-top: 50px;
}

.landingSection06Box7 {
    width: 15%;
    text-align: center;
    margin-top: 20px;
    font-size: 15px;
}

.landingSection07 {
     margin-top: -50px;
}

.landingSection07SignUp {
    font-weight: 600;
    color: #46a6bc;
    font-size: 25px;
    text-decoration: underline;
    cursor: pointer;
    vertical-align: middle;
}

.landingSignUpIcon {
    height: 50px;
    margin-right: 10px;
}

.landingSection08 {
    background-color: #2a3957;
    padding-top: 100px;
    margin-top: -30px;
}

.landingSection09 {
    background-color: #000;
    padding: 5px;
}

.landingFooter {
    font-weight: 300;
    color: #fff;
    font-size: 15px;
    text-align: center;
}

@media (min-width: 991px) and (max-width: 1199px) {

    .landingSection01Img {
        background-image: url(../images/alpharoc/landing/landingSection01.jpg);
        background-size: cover;
        background-position: left;
        background-repeat: no-repeat;
        padding-top: 20px;
        padding-bottom: 300px;
        padding-left: 30px;
        padding-right: 30px;
        position: unset;
        width: 100%;
        -webkit-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
    }

    .landingSection06Box2 {
        display: none;
    }

    .landingSection06Box4 {
        display: none;
    }

    .landingSection06Box6 {
        display: none;
    }



    .landingSection06Box1 {
        width: 25%;
        text-align: center;
    }

   

    .landingSection06Box3 {
        width: 25%;
        text-align: center;
        margin-top: 0px;
    }


    .landingSection06Box5 {
        width: 25%;
        text-align: center;
    }


    .landingSection06Box7 {
        width: 25%;
        text-align: center;
        margin-top: 0px;
    }

}

@media (min-width: 768px) and (max-width: 990px) {

    .landingSection06Box2 {
        display: none;
    }

    .landingSection06Box4 {
        display: none;
    }

    .landingSection06Box6 {
        display: none;
    }



    .landingSection06Box1 {
        width: 25%;
        text-align: center;
    }

    

    .landingSection06Box3 {
        width: 25%;
        text-align: center;
        margin-top: 0px;
    }


    .landingSection06Box5 {
        width: 25%;
        text-align: center;
    }


    .landingSection06Box7 {
        width: 25%;
        text-align: center;
        margin-top: 0px;
    }

    .landingSection02 {
        padding-top: 200px;
    }
    .landingSection01Img {
        background-image: url(../images/alpharoc/landing/landingSection01_mobile.jpg);
        background-size: cover;
        background-position: left;
        background-repeat: no-repeat;
        padding-top: 20px;
        padding-bottom: 300px;
        padding-left: 30px;
        padding-right: 30px;
        position: unset;
        width: 100%;
        -webkit-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
    }

    .userImg {
        position: unset;
    }

    .landingTitleLine2 {
        margin: 0 auto;
    }

    .textalignSection04 {
        text-align: center;
    }

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


@media (min-width: 320px) and (max-width: 767px) {

    .companyVideoWidth {
        width: 100%;
        height: auto;
    }

    .landingSection06Box2 {
        display: none;
    }

    .landingSection06Box4 {
        display: none;
    }

    .landingSection06Box6 {
        display: none;
    }



    .landingSection06Box1 {
        width: 50%;
        text-align: center;
    }

    

    .landingSection06Box3 {
        width: 50%;
        text-align: center;
        margin-top: 0px;
    }


    .landingSection06Box5 {
        width: 50%;
        text-align: center;
        margin-top: 20px;
    }


    .landingSection06Box7 {
        width: 50%;
        text-align: center;
        margin-top: 20px;
    }
    
    .landingSection02 {
        padding-top: 200px;
    }
    .landingSection01Img {
        background-image: url(../images/alpharoc/landing/landingSection01_mobile.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding-top: 20px;
        padding-bottom: 100px;
        padding-left: 20px;
        padding-right: 20px;
        position: unset;
        width: 100%;
        -webkit-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 6px 18px 0px rgba(0,0,0,0.3);
    }

    .userImg {
        position: unset;
    }

    .landingTitleLine2 {
        margin: 0 auto;
    }

    .textalignSection04 {
        text-align: center;
    }

    .personalVideoWidth {
        margin-top: 20px;
    }

    .landingSection01Title {
        font-size: 20px;
    }

    .landingSection02 {
        padding-top: 50px;
    }

    .personalVideoWidth {
        height: auto;
        width: 100%;
    }

    .landingSection02Title {
        font-size: 20px;
    }

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

    .landingSection06 {
        margin-top: 40px;
    }

    .landingSection07SignUp {
        font-size: 20px;
    }
}

.landingLanguageSection {
    background-color: #192e57;
    padding: 10px;
}

.languageFont {
    font-weight: 300;
    color: #fff;
    text-transform: capitalize;
    font-size: 15px;
}

.languageBox {
    text-align: right;
}

.landingSignUpBtn {
    border: unset;
    background-color: transparent;
    padding: 0;

}

/* End of landing CSS */
/* Login css */
.kt-login.kt-login--v6 {
    background: #fff;
}

.kt-login.kt-login--v6 .kt-login__aside {
    padding: 2rem;
    background: #fff;
    width: 600px;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0px 26px;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 400px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 5rem;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__body {
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__logo {
    text-align: center;
    margin: 0px auto 10px auto;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__head {
    margin-top: 20px;
    text-align: left;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__head .kt-login__title {
    text-align: center;
    font-size: 1.5rem;
    color: #595d6e;
    font-weight: 300;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__head .kt-login__desc {
    text-align: center;
    font-size: 1rem;
    color: #74788d;
    font-weight: 400;
    margin-top: 1rem;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__form {
    margin-top: 4rem;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__form .form-group {
    margin: 0;
    padding: 0;
    position: relative;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__form .form-control {
    height: 46px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(235, 237, 242, 0.8);
    padding: 1rem 0;
    margin-top: 0.1rem;
    color: #595d6e;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__form .form-control::-moz-placeholder {
    color: #74788d;
    opacity: 1;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__form .form-control:-ms-input-placeholder {
    color: #74788d;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__form .form-control::-webkit-input-placeholder {
    color: #74788d;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__form .form-control.form-control-last {
    border: 0;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__actions {
    margin: 3rem 0;
    text-align: center;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__extra {
    margin-top: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__extra label {
    margin: 0;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__extra a {
    font-weight: 500;
    color: #595d6e;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
    display: inline-block;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__extra a:hover {
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
    color: #1b75bb;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__account {
    text-align: center;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__account .kt-login__account-msg {
    font-size: 1rem;
    font-weight: 300;
    color: #74788d;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__account .kt-login__account-link {
    font-size: 1rem;
    font-weight: 300;
    color: #595d6e;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__account .kt-login__account-link:hover {
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
    color: #1b75bb;
}

.kt-login.kt-login--v6 .btn {
    height: 46px;
    padding-left: 3rem;
    padding-right: 3rem;
}

.kt-login.kt-login--v6 .btn ~ .btn {
    margin-left: 0.5rem;
}

.kt-login.kt-login--v6 .kt-login__content {
    background-size: cover;
    background-repeat: no-repeat;
}

.kt-login.kt-login--v6 .kt-login__content .kt-login__section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.kt-login.kt-login--v6 .kt-login__content .kt-login__section .kt-login__title {
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 500;
    margin-bottom: 2rem;
}

.kt-login.kt-login--v6 .kt-login__content .kt-login__section .kt-login__desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    font-weight: 400;
}


.kt-login.kt-login--v6.kt-login--signin .kt-login__signup {
    display: none;
}

.kt-login.kt-login--v6.kt-login--signin .kt-login__signin {
    display: block;
}

.kt-login.kt-login--v6.kt-login--signin .kt-login__forgot {
    display: none;
}

.kt-login.kt-login--v6.kt-login--signup .kt-login__signup {
    display: block;
}

.kt-login.kt-login--v6.kt-login--signup .kt-login__signin {
    display: none;
}

.kt-login.kt-login--v6.kt-login--signup .kt-login__forgot {
    display: none;
}

.kt-login.kt-login--v6.kt-login--signup .kt-login__account {
    display: none;
}

.kt-login.kt-login--v6.kt-login--forgot .kt-login__signup {
    display: none;
}

.kt-login.kt-login--v6.kt-login--forgot .kt-login__signin {
    display: none;
}

.kt-login.kt-login--v6.kt-login--forgot .kt-login__forgot {
    display: block;
}

@media (max-width: 991px) {
    .kt-login.kt-login--v6 {
        height: 100%;
    }

    .kt-login.kt-login--v6 .kt-login__aside {
        padding: 20px 15px;
        width: 100%;
    }

    .kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper {
        width: 100%;
        margin: 0 auto;
        padding: 15px;
    }

    .kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container {
        width: 100%;
        padding-bottom: 20px;
    }

    .kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__form {
        margin-top: 20px;
    }

    .kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__actions {
        margin: 20px 0;
    }

    .kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__logo {
        margin: 20px auto;
    }

    .kt-login.kt-login--v6 .kt-login__aside .kt-login__account {
        margin-top: 1.5rem;
    }

    .kt-login.kt-login--v6 .kt-login__content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 20px 15px;
    }

    .kt-login.kt-login--v6 .kt-login__content .kt-login__section .kt-login__title {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    .kt-login.kt-login--v6 .kt-login__content .kt-login__section .kt-login__desc {
        font-size: 1rem;
        margin: 0;
    }
}


.kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .input-group-append {
    height: 46px;
    border: none;
    padding-left: 1.5rem;
    margin-top: 1.5rem;
    background: rgba(235, 237, 242, 0.4);
}

.kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .input-group-append .input-group-text {
    border: none;
}

.iconCongratz {
    font-size: 50px;
    color: #00AB66;
}

.successText {
    font-size: 20px;
}

.kt-grid.kt-grid--hor:not(.kt-grid--desktop):not(.kt-grid--desktop-and-tablet):not(.kt-grid--tablet):not(.kt-grid--tablet-and-mobile):not(.kt-grid--mobile)>.kt-grid__item.kt-grid__item--fluid {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

.kt-login.kt-login--v6 .kt-login__aside {
   background: -moz-radial-gradient(center, ellipse cover, rgba(25,44,75,1) 0%, rgba(25,44,75,1) 13%, rgba(3,5,17,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(25,44,75,1)), color-stop(13%, rgba(25,44,75,1)), color-stop(100%, rgba(3,5,17,1))); /* safari4+,chrome */
    background:-webkit-radial-gradient(center, ellipse cover, rgba(25,44,75,1) 0%, rgba(25,44,75,1) 13%, rgba(3,5,17,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(25,44,75,1) 0%, rgba(25,44,75,1) 13%, rgba(3,5,17,1) 100%); /* opera 11.10+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(25,44,75,1) 0%, rgba(25,44,75,1) 13%, rgba(3,5,17,1) 100%); /* ie10+ */
    background:radial-gradient(ellipse at center, rgba(25,44,75,1) 0%, rgba(25,44,75,1) 13%, rgba(3,5,17,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#192c4b', endColorstr='#030511',GradientType=1 ); /* ie6-9 */
}

@media (min-width: 768px) {
    .kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container {
        width: 450px;
    }
}

@media (min-width: 1200px) {
    .kt-login.kt-login--v6 .kt-login__aside {
        width: 35%;
    }

    .kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container {
        width: 90%;
    }
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container {
    padding-bottom: 0rem;
}

.kt-login.kt-login--v6 .btn.loginBtn {
    height: 25px;
    border-radius: 5px;
    letter-spacing: 0;
    border: none;
    background-position-x: center;
    background-size: cover;
    width: 100%;
    padding: 0.65rem 0;

    background: -moz-linear-gradient(270deg, rgba(41,171,226,1) 0%, rgba(41,171,226,1) 34%, rgba(0,113,188,1) 100%),url(../images/qtn/button/qtnButtonBg.png); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(41,171,226,1)), color-stop(34%, rgba(41,171,226,1)), color-stop(100%, rgba(0,113,188,1))),url(../images/qtn/button/qtnButtonBg.png); /* safari4+,chrome */
    background: -webkit-linear-gradient(270deg, rgba(41,171,226,1) 0%, rgba(41,171,226,1) 34%, rgba(0,113,188,1) 100%),url(../images/qtn/button/qtnButtonBg.png); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(270deg, rgba(41,171,226,1) 0%, rgba(41,171,226,1) 34%, rgba(0,113,188,1) 100%),url(../images/qtn/button/qtnButtonBg.png); /* opera 11.10+ */
    background: -ms-linear-gradient(270deg, rgba(41,171,226,1) 0%, rgba(41,171,226,1) 34%, rgba(0,113,188,1) 100%),url(../images/qtn/button/qtnButtonBg.png); /* ie10+ */
    background: linear-gradient(180deg, rgba(41,171,226,1) 0%, rgba(41,171,226,1) 34%, rgba(0,113,188,1) 100%),url(../images/qtn/button/qtnButtonBg.png); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29abe2', endColorstr='#0071bc',GradientType=0 ); /* ie6-9 */
    background-image: url(../images/qtn/button/qtnButtonBg.png);
}



.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__account .kt-login__account-link {
    color: #ffffff;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__account .kt-login__account-msg {
    color: #ffffff;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__extra a {
    color: #ffffff;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__head .kt-login__title {
    font-size: 2rem;
    color: #fff;
}

/* .form-group label {
    font-size: 1.1rem;
    font-weight: 300;
    color: #e6e6e6;
} */

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__form .form-control {
    height: 40px;
    padding: 10px 10px;
    color: #d8d8d8;
    border-radius: 7px;
    border: 1.5px solid white;
    background: unset;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__form .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #90939D!important;
    opacity: 1; /* Firefox */
    font-weight: 100;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__form .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #90939D!important;
    font-weight: 100;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: #90939D!important;
    font-weight: 100;
}

::placeholder {
    font-weight: 100 !important;
    color: #90939D !important;
}

.login_negative_spacing_18 {
    margin-top: -192px;
}

@media (min-width: 320px) and (max-width: 767px) {
    .login_negative_spacing_18 {
        margin-top: -162px;
    }
}

.login_negative_spacing_7{
    margin-top: -42px;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__form .form-control.inputCustom{
    border-radius: 7px 0px 0px 7px;
    border-right: unset;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__form .input-group .input-group-append{
    height: 40px;
    margin-top: 0.1rem;
}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__form .input-group .input-group-append .input-group-text{
    background: unset;
    border: 1.5px solid white;
    border-left: unset;
    border-radius: 0px 7px 7px 0px;
}

.inputError{
    border-color: #fd397a!important;
}


.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: #ff0000;
    font-size: 13px;
    color: #000;
}


.form-group .invalid-feedback, .form-group .valid-feedback {
    font-weight: 300;
    font-size: 100%;
}

.input-group .form-control.is-invalid~.invalid-feedback{
    display: block;
}

.btn-brand {
    color: #fff;
    background-color: #a67c52;
    border-color: #a67c52;
}

.btn-brand:hover {
    color: #fff;
    background-color: #a67c52;
    border-color: #a67c52;
}

.imgTopLeft {
    width:80%;
    height: 20%;
}

.imgBottomRight {
    width:100%;
    height: 15%;
}

.signinTitleFont {
    margin-bottom: .5rem;
    line-height: 1.2;
    margin-top: 0;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.signinLanguageFont {
    font-weight: 300;
    font-size: 15px;
    color: #fff;
    margin-top: 10px;
    float: right;
}

.imgTopLeftReg {
    width:80%;
    height: 10%;
}

.imgBottomRightReg {
    width:100%;
    height: 10%;
}

.login_negative_spacing_18_req {
    margin-top: -143px;
}

.signupMobileForm {
    border-left: unset!important;
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
}

.phoneCodeStyle {
    background: #fff!important;
    border: 1.5px solid white!important;
    border-right: unset!important;
    border-top-right-radius: unset!important;
    border-bottom-right-radius: unset!important;
    border-top-left-radius: 7px!important;
    border-bottom-left-radius: 7px!important;
    color: #d8d8d8!important;
}

.kt-login.kt-login--v6 .btn ~ .btn.backLogin {
    margin-left: 0;
}



.kt-login.kt-login--v6 .btn.backBtn {
    background-image: url(/images/qtn/signupBtnBG.png), linear-gradient(to bottom, #cccccc, #999999);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    padding: unset;
    border: none;
    width: 100%;
    height: 40px;
    color: #1b75bb;
    font-weight: 600;
    font-size: 13px;
}

.kt-login.kt-login--v6 .btn.backBtn:hover {
     box-shadow: 0 4px 16px 0 rgba(204,204,204,0.8)!important;
}

.signupSuccessFont {
    font-weight: 300;
    font-size: 20px;
    color: #000;
}

.successIcon {
    color: #1de500;
    font-size: 50px;
}

.login_negative_spacing_18_success {
    margin-top: -80px;
}

.login_negative_spacing_7_success{
    margin-top: -70px;
}

@media (min-width: 320px) and (max-width: 767px) {

    .login_negative_spacing_18_success {
        margin-top: -26px;
    }

    .login_negative_spacing_7_success{
        margin-top: 0px;
    }



}

.kt-login.kt-login--v6 .kt-login__aside .kt-login__wrapper .kt-login__container .kt-login__head .kt-login__title.successCongratzFont {
    font-size: 34px;
    color: #fff;
}

.kt-login.kt-login--v6 .btn {
    height: 46px;
    padding-left: 3rem;
    padding-right: 3rem;
}


@media (min-width: 991px){
.kt-grid.kt-grid--ver-desktop.kt-grid--desktop>.kt-grid__item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.kt-grid.kt-grid--ver-desktop.kt-grid--desktop>.kt-grid__item.kt-grid__item--fluid,
.kt-grid.kt-grid--ver-desktop.kt-grid--desktop>.kt-grid__item.kt-grid__item--fluid-desktop {
    -webkit-box-flex: 1;
    flex: 1 auto;
    -ms-flex: 1 0 0px;
    min-width: 0;
}

.kt-grid.kt-grid--ver-desktop.kt-grid--desktop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}
}

.kt-login.kt-login--v6 .btn.resendBtn {
    height: 20px;
    border-radius: 5px;
    background-image: url(/images/qtn/signupBtnBG.png), linear-gradient(to bottom, #29abe2, #0071bc);
    background-position-x: center;
    background-size: cover;
    padding: 10px 10px;
    border: unset;
}

.signupBG {
    background-image: url(/images/qtn/qtnSignupBG.jpg);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.loginRadio .kt-radio>span {
    background: 0 0;
    position: absolute;
    top: -1px;
    left: 0;
    height: 18px;
    width: 18px;
    border-radius: 5px!important;
    border: 1px solid #3f68b0;
}

.loginRadio .kt-radio>input:checked~span {
    border: 1px solid #3f68b0;
    border-radius: 5px!important;

}

.kt-radio>span:after {
    content: '';
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    margin-left: -5px;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 2px!important;
}

.dropdown-item.active, .dropdown-item:hover {
    color: #000000;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #e6e6e6;
    color: #000000;
}

.registrationBG {
      background: -moz-radial-gradient(center, ellipse cover, rgba(25,44,75,1) 0%, rgba(25,44,75,1) 13%, rgba(3,5,17,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(25,44,75,1)), color-stop(13%, rgba(25,44,75,1)), color-stop(100%, rgba(3,5,17,1))); /* safari4+,chrome */
    background:-webkit-radial-gradient(center, ellipse cover, rgba(25,44,75,1) 0%, rgba(25,44,75,1) 13%, rgba(3,5,17,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(25,44,75,1) 0%, rgba(25,44,75,1) 13%, rgba(3,5,17,1) 100%); /* opera 11.10+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(25,44,75,1) 0%, rgba(25,44,75,1) 13%, rgba(3,5,17,1) 100%); /* ie10+ */
    background:radial-gradient(ellipse at center, rgba(25,44,75,1) 0%, rgba(25,44,75,1) 13%, rgba(3,5,17,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#192c4b', endColorstr='#030511',GradientType=1 ); /* ie6-9 */
}

.imgTopLeftSignUp {
    width: 50%;
    height: 70%;
}

.imgBottomRightSignUp {
    width: 100%;
    height: 40%;
}

.signUpNegativeSpace {
    margin-top: -350px;
}

.signUpNegativeSpaceBottom {
    margin-top: -160px;
}

.signUpTitle {
    font-size: 2rem;
    color: #fff;
}

.signupFormDesign,
.signupFormDesign:focus {
    height: 40px;
    padding: 10px 10px;
    color: #d8d8d8;
    border-radius: 7px;
    border: 1.5px solid white;
    background-color: transparent;
}

.signupBtnBG {
    background-image: url(/images/qtn/signupBtnBG.png), linear-gradient(to bottom, #29abe2, #0071bc);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    padding: unset;
    border: none;
    width: 250px;
    height: 40px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.signupBtnBGBack {
    background-image: url(/images/qtn/signupBtnBG.png), linear-gradient(to bottom, #cccccc, #999999);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    padding: unset;
    border: none;
    width: 250px;
    height: 40px;
    color: #1b75bb;
    font-weight: 600;
    font-size: 13px;
}


.signupBtnBG:hover {
    color: #fff;
    transition: 0.3s;
    box-shadow: 0 4px 16px 0 rgba(41,171,226,0.8);
}

.signupBtnBGBack:hover {
    color: #1b75bb;
    transition: 0.3s;
    box-shadow: 0 4px 16px 0 rgba(204,204,204,0.8);
}

.dropdown_language.signupDropdown .dropdown-item {
    border: none;
    width: 100%;
    clear: both;
    font-weight: 400;
    color: #000;
    text-align: inherit;
    white-space: nowrap;
    border: 0;
}

.dropdown_language.signupDropdown .dropdown-item:hover {
    background-color: #e4e4e4;
}

@media (min-width: 991px) and (max-width: 1199px) {
    .signupBtnBG {
    width: 250px;
}

.signupBtnBGBack {
    width: 250px;
}
}

@media (min-width: 768px) and (max-width: 990px) {
    .signupBtnBG {
    width: 200px;
}

.signupBtnBGBack {
    width: 200px;
}
}

@media (min-width: 320px) and (max-width: 767px) {

    .imgTopLeftSignUp {
    width: 100%;
    height: 40%;
}

.imgBottomRightSignUp {
    width: 100%;
    height: 40%;
}

.signUpNegativeSpace {
    margin-top: -150px;
}

.signUpNegativeSpaceBottom {
    margin-top: -160px;
}

    .signupBtnBG {
    width: 100%;
    height: 50px;
}

.signupBtnBGBack {
    width: 100%;
    height: 50px;
    margin-top: 20px;
}
}

.signUpSuccessNegativeSpace {
    margin-top: -350px;
}

.signUpSuccessNegativeSpaceBottom {
    margin-top: -120px;
}

@media (min-width: 991px) and (max-width: 1199px) {

.logoSpecial {
    position: absolute;
    top: 50px;
    right: 50px;
}

    .signUpSuccessNegativeSpace {
    margin-top: -380px;
}

.signUpSuccessNegativeSpaceBottom {
    margin-top: 0px;
}
}

@media (min-width: 768px) and (max-width: 990px) {

.logoSpecial {
    position: absolute;
    top: 50px;
    right: 50px;
}

    .signUpSuccessNegativeSpace {
    margin-top: -380px;
}

.signUpSuccessNegativeSpaceBottom {
    margin-top: 0px;
}
}

@media (min-width: 320px) and (max-width: 767px) {

.logoSpecial {
    position: unset;
    top: unset;
    right: unset;
}

    .signUpSuccessNegativeSpace {
    margin-top: -180px;
}

.signUpSuccessNegativeSpaceBottom {
    margin-top: -70px;
}
}

.registrationSection .form-group label {
    font-size: 17px;
    color: #E6E6E6;
    letter-spacing: 1px;
}
.kt-login.kt-login--v6 .btn.resendCodeBtn {
    height: 20px;
    border-radius: 5px;
    background-color: #fff;
    color: #29abe2;
    padding: 10px 10px;
    border: unset;
}
.btn.resendCodeBtn.btn-brand.btn-elevate:hover{
  -webkit-box-shadow: 0 4px 16px 0 rgba(41,171,226,0.8)!important;
  box-shadow: 0 4px 16px 0 rgba(41,171,226,0.8)!important;
  color: #29abe2;
}

.checkBtn{
    border: 1.5px solid white;
    background-color: #1B75BB;
}

.checkBtn:hover{
    border: 1.5px solid white;
    background-color: #1166a8;
}

.checkBtn:not(:disabled):not(.disabled):active{
    border: 1.5px solid white;
    background-color: #1B75BB;
}

.btn-brand.disabled, .btn-brand:disabled {
    cursor: not-allowed;
}

.placementBox {
   /* background-image: linear-gradient(to right, #1B75BB , transparent);*/
    padding: 10px 10px 5px 10px;
    border-radius: 5px;
    margin-left: 88px;
    border: 1px solid #fff;
}

.placePadding {
    padding-top: 20px;
    padding-bottom: 20px;
}

@media (min-width: 320px) and (max-width: 990px) {
    .placePadding {
    padding-top: unset;
    padding-bottom: unset;
}
}

.kt-radio>span.placementRadio {
    border: 1px solid #fff;
}

.loginRadio .kt-radio>input:checked~span.placementRadio {
    border: 1px solid #fff;
    border-radius: 5px!important;
}

.kt-radio>span.placementRadio:after {
    border: solid #fff;
    background: #fff;
}




@media (min-width: 320px) and (max-width: 767px) {

    .loginRadio {
    margin-top: 4px;
}


.form-group label, .radio-group label {
    color: #000;
    font-size: 15px;
    font-weight: 400;
}



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



.signupFormDesign,
.signupFormDesign:focus {
    height: 40px;
    padding: 0px 10px;
    color: #d8d8d8;
    border-radius: 7px;
    border: 1.5px solid white;
    background-color: transparent;
}


.signupBtnBG,
.signupBtnBGBack,
.backBtn {
    font-size: 18px!important;
}
.signupSuccessFont {
   font-size: 18px;
}

}


.loginSection {
    background-color: #f8f8f8;
}

.cardWrapper {
    background-color: #fff;
    padding: 50px;
}

.loginTitle {
    font-weight: 600;
    font-size: 20px;
    color: #000;
    line-height: 33px;
    letter-spacing: 0;
}

.formLabel {
    font-weight: 300;
    font-size: 12px;
    color: #000;
}

label {
    /*margin-bottom: 3px;*/
}

.labelTitle {
    font-weight: 500;
    font-size: 14px;
}

.progressBarDesc {
  padding: 3em 0 0 0;
  align-content: center;
  align-items: center;
  vertical-align: top;
  counter-reset: stepCount;
  display: flex;
  justify-content: space-between;
}

.progressBarDesc li {
  text-align: center;
  vertical-align: top;
  height: 2em;
  line-height: 1.5em;
  width: 20%;
  color: #FD9F41;
  font-weight: 500;
  margin: 0 1em;
  display: inline-block;
  position: relative;
  font-size: 13px;
}

.progressBarDesc li::before {
  background: #FD9F41;
  content: '';
  position: absolute;
  top: -100%;
  right: 60%;
  width: 100%;
  height: 1px;
}

.progressBarDesc li:first-child::before {
  display: none;
}

.progressBarDesc li::after {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  counter-increment: stepCount;
  content: counter(stepCount);
  border-radius: 100%;
  color: #fff;
  background: #FD9F41;
  margin: auto;
  padding: auto;
  display: block;
  position: absolute;
  top: -150%;
  right: 0;
  left: 0;
}

.progressBarDesc .active {
  color: #FD9F41;
}

.progressBarDesc .active ~ li {
  color: #A9AEBE;
}

.progressBarDesc .active ~ li::before {
  color: #A9AEBE;
  background: #A9AEBE;
}

.progressBarDesc .active ~ li::after {
  color: #A9AEBE;
  background: #fff;
  border: 1px solid #A9AEBE;
}

/* Mobile View */
@media (min-width: 320px) and (max-width: 767px) {
    .progressBarDesc {
        padding: 0;
        margin-bottom: 0;
    }

    .progressBarDesc li span {
        display: none;
    }

    .progressBarDesc li::before {
        top: -50%;
    }

    .progressBarDesc li::after {
        bottom: 1em;
    }

    .cardWrapper {
        padding: 15px;
    }

    .progressBarDesc li {
        margin: 0em;
    }

    .progressBarDesc li::before {
        /*display: none;*/
    }
}

.beforeLoginForm {
    background-color: #fff;
    color: #000;
    border: 1px solid #E8E8E8;
    border-radius: 0px;
    font-size: 14px;
    margin: 10px 0;
}

.form-control {
    /* height: calc(1.5em + 1.6rem + 5px); */
}

.form-control:focus,
.form-control.beforeLoginForm:focus-within {
    border-color: #FD9F41;
}

.eyeIco.active, .eyeIco1.active, .calIco.active {
    display: block;
}

.eyeIco, .eyeIco1, .calIco {
    display: none;
/*    position: absolute;*/
    right: 15px;
    top: calc((1.5em + 1.6rem + 5px) * 0.5);
/*    transform: translateY(-50%);*/
    color: #848E9C;
    cursor: pointer;
}

#password.is-invalid ~ .eyeIco,
#checkPassword.is-invalid ~ .eyeIco1,
#dateOfBirth.is-invalid ~ .calIco {
    /*right: 33px;*/
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: none;
}

.reviewTableHeader {
    border-bottom: 2px dotted #E8E8E8;
    display: inline-flex;
    justify-content: space-between;
}

.reviewTableEdit {
    color: #FD9F41;
    cursor: pointer;
}

table.reviewTable, table.reviewTable td, table.reviewTable th {
     border-bottom: 1px solid transparent; 
}

.reviewTable {
    width: 100%;
}

.reviewTable td {
    word-break: break-word;
    vertical-align: top;
    padding: 5px;
}

.reviewTable td:nth-child(1) {
    color: #848E9C;
    width: 35%;
}
.reviewTable td:nth-child(3) {
    color: #000;
    font-weight: 400;
}

.captchaIcon {
    background-color: transparent;
    border: unset;
}

.noteText {
    font-weight: 300;
    font-size: 13px;
    color: #000;
    margin-top: 5px;
}

.beforeLoginBtn {
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    letter-spacing: 10px;
    border: unset;
    border-radius: unset;
    padding-left: 30px;
    padding-right: 22px;
    background: rgb(98,186,232);
    background: linear-gradient(90deg, rgba(98,186,232,1) 0%, rgba(63,104,176,1) 100%);
}

.forgotPasswordBtn {
    background-color: transparent;
    border: unset;
    padding: unset;
    margin: unset;
    font-weight: 600;
    font-size: 13px;
    color: #000;
}

.loginIMG {
    position: absolute;
    top: 0;
    right: 0;
    height: 550px;
}



.loginFont {
    font-weight: 300;
    font-size: 15px;
    color: #fff;
}

.languageFont {
    font-weight: 300;
    font-size: 15px;
    color: #fff;
    text-transform: capitalize;
}

.languageFontRegister {
    font-weight: 300;
    font-size: 14px;
    color: #000;
}

.signupFontLink {
    color: #fff;
    font-weight: 600;
}

.signupFontLink:hover {
    color: #000;
}

.ageTag {
    border-radius: 5px;
    margin: 5px;
    padding: 5px 10px;
    background-color: #E99241;
    color: #fff;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    height: auto;
}

/*ipad view*/
@media (min-width: 768px) and (max-width: 990px) {
    .loginIMG {
        height: 400px;
    }

    .cardWrapper {
        padding: 25px;
    }

    .progressBarDesc li span {
        display: none;
    }

    .reviewTable td:nth-child(1) {
        /*width: 100px;*/
    }
}

@media (min-width: 320px) and (max-width: 767px) {
    .loginIMG {
        height: auto;
        width: 100%;
        opacity: 0.1;
    }

    .languageFont {
        color: #000;
    }
}

.registrationLogo {
    height: 80px;
}

.beforeLoginTitle {
    font-weight: 300;
    color: #46a6bc;
    font-size: 25px;
}

.registrationBG {
    background-image: url(../images/alpharoc/registrationBG.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px;
    margin-top: 10px;
}

.inputDesign,
.inputDesign:focus {
    background-color: #fff;
    border: 1px solid #e9eef2;
    border-radius: 5px;
}

.registrationLabel {
    font-weight: 300;
    color: #000;
    font-size: 13px;
    margin-top: 10px;
}

.registrationTitle {
    font-weight: 300;
    font-size: 20px;
    color: #000;
}

/*.registrationSection02 {
    margin-top: 20px;
    padding: 20px;
}*/

.smallNotice {
    font-weight: 300;
    font-size: 12px;
    color: #000;
}

.smallNoticeIcon {
    font-size: 10px;
    color: #22d190;
    margin-right: 5px;
}

/*.btn-default {
    font-weight: 300;
    font-size: 15px;
    color: #fff;
    letter-spacing: 10px;
    background-color: transparent!important;
    border: 1px solid transparent!important;
    border-radius: unset;
    padding-left: 30px;
    padding-right: 20px;
}

.btn-default:hover {
    color: #000!important;
}*/

@media (min-width: 320px) and (max-width: 767px) {
    .registrationBtnPosition {
        text-align: center;
    }
}

.successSection {
    padding-top: 20px;
    padding-bottom: 20px;
}

body {
    background-color: #fff;
}


/*select.form-control:hover, 
select.form-control:focus, 
select.form-control:active {
    background-color: #fff;
    border: unset;
    border-radius: unset;
    font-size: 15px;
    height: 34px;
    color: #000;
    font-weight: 300;
}*/

.registerBox {
    width: 300px;
    background: rgb(63,185,255);
    background: linear-gradient(90deg, rgba(63,185,255,0.1) 0%, rgba(37,147,247,0.9) 30%, rgba(63,185,255,1) 88%);
    padding: 10px 10px 10px 30px;
    position: absolute;
    top: 20px;
    right: 0;
}

.forgotPasswordPage {
    background-image: url('../images/project/loginBG1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.footerLogin {
    background: rgb(140,96,52);
    background: linear-gradient(90deg, rgba(140,96,52,1) 0%, rgba(255,231,159,1) 50%, rgba(166,112,51,1) 100%);
    font-weight: 300;
    font-size: 13px;
    color: #000;
    text-align: center;
    padding: 2px;
}

@media (min-height: 600px) {
    .loginPage {
        height: 100vh;
    }
}


.logoBlock img {
    cursor: pointer;
}

.loginBtn {
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0;
    border: none;
    border-radius: 2px;
    padding-left: 10px auto;
}

.nextBtn {
    font-weight: normal;
    background: #FD9F41;
}

.cancelBtn {
    font-weight: normal;
    background: #A9AEBE;
}

.flexUploadDiv {
    display: flex;
    flex-direction: row;
    padding: 5px;
}

.uploadBtn {
    padding: 2px 20px;
    margin-right: 15px;
    color: #000;
    background: #E8E8E8;
    border-radius: 2px;
    border: none;
    font-size: 13px;
}

.flexUploadInput {
    flex-grow: 2;
    border: none;
    border-radius: 0;
    padding: 2px 0;
    outline: none;
    font-size: 13px;
}

.kt-radio-inline .kt-radio {
    color: #3f68b0;
}


.forgotPasswordPage {
    background-image: url('../images/project/loginBG1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 10px;
}

.registerPage {
    background-image: url('../images/project/loginBG1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /*padding-bottom: 10px;*/
}

@media (min-height: 489px) {
    .forgotPasswordPage {
        height: 100vh;
    }
}
@media (min-height: 1300px) {
    .registerPage {
        height: 100vh;
    }
}



@media (min-width: 320px) and (max-width: 767px) {

    .forgotPasswordPage {
        background-position: left;
    }

    .loginPage {
        background-position: left;
    }

    .forgotPasswordPage {
        background-position: left;
    }

    .registerBox {
        display: none;
    }

    .languageFont {
        color: #000;
    }
}

.kt-radio>span:after {
    border: solid #3f68b0;
    background: #3f68b0;
}

.kt-radio>input:disabled~span:after {
    border-color: #3f68b0;
}
/* End of login css */

/* Overrides KT class to hide Settings in Menu @ PC media */

@media (min-width: 1025px) {
    .kt-header-menu .kt-menu__nav>.kt-menu__item.mobileMenuViewSettings {
        display: none;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 .15rem;
    }
}

/* Ipad Pro View */
@media (max-width: 1199px) {
    /*START SPONSOR DIAGRAM*/
    .emptyDisgramBox {
        height: 240px;
    }

    .bgFooter {
        padding: 10px 15px;
    }

    .bgFooterDiv {
        margin: 10px;
    }

    .bgFooterDiv img {
        width: 100%;
        height: auto;
    }
    /*END SPONSOR DIAGRAM*/

    .profileBox {
        padding: 20px;
    }

    .profileFont04 {
        font-size: 12px;
    }
    
    .profileFont05 {
        font-size: 13px;
    }

    .profileFont06 {
        font-size: 13px;
    }

    /*.profileGreySection {
        padding: 10px;
    }

    .profileWhiteSection {
        padding: 10px;
    }*/

    .referralBtn {
        margin-left: unset;
    }

    .dashboardText{
        font-size:11px;
    }

    .blackFont{
        font-size: 18px;
    }

    .intro-container .top-section img, .intro-container .bottom-section img {
        width: 450px!important;
    }

    /* New Homepage - Ipad Pro View */

    .features-container {
        overflow: hidden;
    }

    /* End of New Homepage - Ipad Pro View */
}

/* Ipad View */
@media (max-width: 990px) {
    /*START SPONSOR DIAGRAM*/
    .emptyDisgramBox {
        height: 240px;
    }

    .bgFooter {
        padding: 10px 15px;
    }

    .bgFooterDiv {
        margin: 10px;
    }

    .bgFooterDiv img {
        width: 100%;
        height: auto;
    }
    /*END SPONSOR DIAGRAM*/

    .profileDetailSection {
        padding: 15px 20px;
    }

    .dashboardText{
        font-size:11px;
    }

    /* New HomePage - Ipad View */

    .intro-container .bottom-section img {
        width: 350px!important;
    }

    .top-section.wavy-container {
        padding-inline: 20px;
    }

    .intro-container span {
        display: inline!important;
    }

    .features-container {
        overflow: hidden;
    }

    /* End of New HomePage - Ipad View */
}

/* Mobile View */
@media (max-width: 767px) {
	.order-status-table--mobile {
		display: flex;
		flex-direction: column;
	}
	.mt-30 {
		margin-top: 30px;
	}
	#foodMenuTopSection {
		margin-top: 15px;	
	}

	.carousel img {
		max-width: 295px !important;
	}

    /*START SPONSOR DIAGRAM*/
    .emptyDisgramBox {
        height: 240px;
    }

    .bgFooter {
        padding: 10px 15px;
    }

    .bgFooterDiv {
        margin: 10px;
    }

    .bgFooterDiv img {
        width: 100%;
        height: auto;
    }

    /*END SPONSOR DIAGRAM*/

    .bgFooterTxt {
        padding: 0;
        text-align: center;
        -webkit-justify-content: center;
        justify-content: center;
        font-size: 10px;
    }

    .pageTitle{
        font-size: 18px;
    }

    .walletPgAmt {
        font-size: 20px;
    }

    .profileIcon {
        width: 120px;
    }
    
    .profileBox {
        padding: 20px;
    }

    .profileFont04 {
        font-size: 12px;
    }

    .profileFont05 {
        font-size: 12px;
    }

    .profileFont06 {
        font-size: 12px;
    }

    .circle-wrap,
    .circle-wrap2,
    .circle-wrap3 {
        margin: 12.5% 25%;
    }

    .dashboardFooter2 {
        margin-left: 15%;
        position: absolute;
        bottom: 1%;
    }

    .circle-chart {
        width: 80px !important;
        height: 80px !important;
    }

    .circlechart.big .circle-chart {
        width: 150px !important;
        height: 150px !important;
    }

    .dbBanner {
        height: 200px;
    }

    .awardText {
        font-size: 18px;
    }

    .dbSponsorNum {
        font-size: 18px;
        font-weight: 600;
        color: #fd9f41;
    }

    .mobileSidebar{
        width: 50%;
    }

    .isDefaultSlider {
        top: 1.5rem;
        right: 1.5rem;
    }

    /* Payment Detail QR - Mobile View */
    .paymentDetailTable {
        overflow-x: auto;
        display: block;
        width: 100%;
    }

    

    /* End of Payment Detail QR - Mobile View */

    /* New HomePage - Mobile View */

    .main-bg-container .title {
        font-size: 30px!important;
    }

    .intro-container .bottom-section .title {
        width: unset!important;
    }

    .intro-container .top-section .description {
        margin-bottom: 0;
    }

    .intro-container .top-section {
        padding-block: 60px!important;
        padding-bottom: 0!important;
        padding-inline: 20px;
    }

    .intro-container .top-section .description {
        margin-bottom: 0!important;
    }

    .intro-container .top-section img {
        position: unset!important;
        width: 300px!important;
        transform: unset!important;
    }

    .top-section.wavy-container::before {
        content: unset!important;
    }

    .intro-container .bottom-section img {
        position: unset!important;
        transform: unset!important;
        width: 300px!important;
        margin-top: 60px;
    }

    .intro-container .bottom-section {
        padding-block: 60px!important;
        padding-inline: 20px;
    }

    .features-container {
        padding-block: 60px!important;
    }

    .intro-container .top-section .title {
        width: unset!important;
    }

    .intro-container .top-section .title p, .intro-container .bottom-section .title p, .features-container p {
        font-size: 22px;
    }

    /* End of New HomePage - Mobile View */
}

@media (max-width: 576px) {
    .titleText.larger {
        font-size: 30px;
    }
    
    .titleText.smaller {
        font-size: 20px;
    }

    .bodyText.larger {
        font-size: 16px;
    }

    .mobileSidebar{
        width: 80% !important;
    }

    .isDefaultSlider {
        position: static;
    }
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 100px auto !important;
    }
}

/* light slider CSS */
/*! lightslider - v1.1.5 - 2015-10-31
* https://github.com/sachinchoolur/lightslider
* Copyright (c) 2015 Sachin N; Licensed MIT */
/*! lightslider - v1.1.3 - 2015-04-14
* https://github.com/sachinchoolur/lightslider
* Copyright (c) 2015 Sachin N; Licensed MIT */
/** /!!! core css Should not edit !!!/**/ 

.lSSlideOuter {
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.lightSlider:before, .lightSlider:after {
    content: " ";
    display: table;
}
.lightSlider {
    overflow: hidden;
    margin: 0;
    
}
.lSSlideWrapper {
    max-width: 100%;
    overflow: hidden;
    position: relative;
}
.lSSlideWrapper > .lightSlider:after {
    clear: both;
}
.lSSlideWrapper .lSSlide {
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: all 1s;
    -webkit-transition-property: -webkit-transform,height;
    -moz-transition-property: -moz-transform,height;
    transition-property: transform,height;
    -webkit-transition-duration: inherit !important;
    transition-duration: inherit !important;
    -webkit-transition-timing-function: inherit !important;
    transition-timing-function: inherit !important;
}
.lSSlideWrapper .lSFade {
    position: relative;
}
.lSSlideWrapper .lSFade > * {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 9;
    margin-right: 1;
    width: 100%;
}
.lSSlideWrapper.usingCss .lSFade > * {
    opacity: 0;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transition-duration: inherit !important;
    transition-duration: inherit !important;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-timing-function: inherit !important;
    transition-timing-function: inherit !important;
}
.lSSlideWrapper .lSFade > *.active {
    z-index: 10;
}
.lSSlideWrapper.usingCss .lSFade > *.active {
    opacity: 1;
}
/** /!!! End of core css Should not edit !!!/**/

/* Pager */
.lSSlideOuter .lSPager.lSpg {
    margin: 10px 0 0;
    padding: 0;
    text-align: center;
}
.lSSlideOuter .lSPager.lSpg > li {
    cursor: pointer;
    display: inline-block;
    padding: 0 5px;
}
.lSSlideOuter .lSPager.lSpg > li a {
    background-color: #222222;
    border-radius: 30px;
    display: inline-block;
    height: 8px;
    overflow: hidden;
    text-indent: -999em;
    width: 8px;
    position: relative;
    z-index: 99;
    -webkit-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
}
.lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a {
    background-color: #428bca;
}
.lSSlideOuter .media {
    opacity: 0.8;
}
.lSSlideOuter .media.active {
    opacity: 1;
}
/* End of pager */

/** Gallery */
.lSSlideOuter .lSPager.lSGallery {
    list-style: none outside none;
    padding-left: 0;
    margin: 0;
    overflow: hidden;
    transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate3d(0px, 0px, 0px);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.lSSlideOuter .lSPager.lSGallery li {
    overflow: hidden;
    -webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s;
    transition: border-radius 0.12s linear 0s 0.35s linear 0s;
    border-radius: 2px;
}
.lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover {
    border-radius: 2px;
    border: solid 2px #ec4a41;
}
.lSSlideOuter .lSPager.lSGallery img {
    display: block;
    height: auto;
    max-width: 100%;
}
.lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter .lSPager.lSGallery:after {
    content: " ";
    display: table;
}
.lSSlideOuter .lSPager.lSGallery:after {
    clear: both;
}
/* End of Gallery*/

/* slider actions */
.lSAction > a {
    width: 32px;
    display: block;
    top: 50%;
    height: 32px;
    background-image: url('../images/project/controls.png');
    cursor: pointer;
    position: absolute;
    z-index: 99;
    margin-top: -16px;
    opacity: 0.5;
    -webkit-transition: opacity 0.35s linear 0s;
    transition: opacity 0.35s linear 0s;
}
.lSAction > a:hover {
    opacity: 1;
}
.lSAction > .lSPrev {
    background-position: 0 0;
    left: 10px;
}
.lSAction > .lSNext {
    background-position: -32px 0;
    right: 10px;
}
.lSAction > a.disabled {
    pointer-events: none;
}
.cS-hidden {
    height: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
}


/* vertical */
.lSSlideOuter.vertical {
    position: relative;
}
.lSSlideOuter.vertical.noPager {
    padding-right: 0px !important;
}
.lSSlideOuter.vertical .lSGallery {
    position: absolute !important;
    right: 0;
    top: 0;
}
.lSSlideOuter.vertical .lightSlider > * {
    width: 100% !important;
    max-width: none !important;
}

/* vertical controlls */
.lSSlideOuter.vertical .lSAction > a {
    left: 50%;
    margin-left: -14px;
    margin-top: 0;
}
.lSSlideOuter.vertical .lSAction > .lSNext {
    background-position: 31px -31px;
    bottom: 10px;
    top: auto;
}
.lSSlideOuter.vertical .lSAction > .lSPrev {
    background-position: 0 -31px;
    bottom: auto;
    top: 10px;
}
/* vertical */


/* Rtl */
.lSSlideOuter.lSrtl {
    direction: rtl;
}
.lSSlideOuter .lightSlider, .lSSlideOuter .lSPager {
    padding-left: 0;
    list-style: none outside none;
}
.lSSlideOuter.lSrtl .lightSlider, .lSSlideOuter.lSrtl .lSPager {
    padding-right: 0;
}
.lSSlideOuter .lightSlider > *,  .lSSlideOuter .lSGallery li {
    float: left;
}
.lSSlideOuter.lSrtl .lightSlider > *,  .lSSlideOuter.lSrtl .lSGallery li {
    float: right !important;
}
/* Rtl */

@-webkit-keyframes rightEnd {
    0% {
        left: 0;
    }

    50% {
        left: -15px;
    }

    100% {
        left: 0;
    }
}
@keyframes rightEnd {
    0% {
        left: 0;
    }

    50% {
        left: -15px;
    }

    100% {
        left: 0;
    }
}
@-webkit-keyframes topEnd {
    0% {
        top: 0;
    }

    50% {
        top: -15px;
    }

    100% {
        top: 0;
    }
}
@keyframes topEnd {
    0% {
        top: 0;
    }

    50% {
        top: -15px;
    }

    100% {
        top: 0;
    }
}
@-webkit-keyframes leftEnd {
    0% {
        left: 0;
    }

    50% {
        left: 15px;
    }

    100% {
        left: 0;
    }
}
@keyframes leftEnd {
    0% {
        left: 0;
    }

    50% {
        left: 15px;
    }

    100% {
        left: 0;
    }
}
@-webkit-keyframes bottomEnd {
    0% {
        bottom: 0;
    }

    50% {
        bottom: -15px;
    }

    100% {
        bottom: 0;
    }
}
@keyframes bottomEnd {
    0% {
        bottom: 0;
    }

    50% {
        bottom: -15px;
    }

    100% {
        bottom: 0;
    }
}
.lSSlideOuter .rightEnd {
    -webkit-animation: rightEnd 0.3s;
    animation: rightEnd 0.3s;
    position: relative;
}
.lSSlideOuter .leftEnd {
    -webkit-animation: leftEnd 0.3s;
    animation: leftEnd 0.3s;
    position: relative;
}
.lSSlideOuter.vertical .rightEnd {
    -webkit-animation: topEnd 0.3s;
    animation: topEnd 0.3s;
    position: relative;
}
.lSSlideOuter.vertical .leftEnd {
    -webkit-animation: bottomEnd 0.3s;
    animation: bottomEnd 0.3s;
    position: relative;
}
.lSSlideOuter.lSrtl .rightEnd {
    -webkit-animation: leftEnd 0.3s;
    animation: leftEnd 0.3s;
    position: relative;
}
.lSSlideOuter.lSrtl .leftEnd {
    -webkit-animation: rightEnd 0.3s;
    animation: rightEnd 0.3s;
    position: relative;
}
/*/  GRab cursor */
.lightSlider.lsGrab > * {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.lightSlider.lsGrabbing > * {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}


video {
    margin: auto;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}