@import url('dosisfont.css');
html{ height:100%; font-family: 'Dosis' !important;}
body{ margin:0; padding:0; font-family: 'Dosis' !important; width:100%; height:100%;  }
.bbmdiv{ width:100%; height:100%; }

.bbmdiv1{ width:100%; height:10.5%; background:#FFF; border-bottom:1px solid #231f20; }
.bbmdiv12{ width:30%; height:100%; float:left; position: relative; text-align: center; }
.bbmdiv13{ width:60%; color:#231f20; float:left; font-size: 7.0vw;  top: 50%; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left:10%; text-align:center; }

.bbmdiv2{ width:100%; height:9%;}
.bbmdiv21{ width:50%; height:100%; float:left; font-size: 6.5vw; text-align:center; font-weight:500; top: 50%; position: relative;
  -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);  }
.bbmdiv22{ width:50%; height:100%; float:left; font-size: 6.5vw; text-align:center; font-weight:500; top: 50%; position: relative;
  -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);  }
.bbmdiv3{ width:100%; height:65%; }
.bbmdiv8{ width:100%; height:80%; }
.bbmdiv4{ width:100%; height:12.5%; }
.bbmdiv5{ width:100%; height:87.5%; }
.bbmdiv51{ width:100%; font-size:6vw; color:#F00; }
.bbmdiv6{ width:100%; font-size:6vw; height:75%; }
.bbmdiv61{ border-bottom:1px solid #DCDCDC; width:100%; }
.bbmdiv62{ width:20%; float:left; }
.bbmdiv63{ width:80%; float:left; padding:15px 0; }
.tranimg{ height:48px; width:48px; vertical-align:middle; }
.txtarea{ font-size:6.5vw; }
.bbmdiv31{ width:96%; color:#FFF; margin:0 auto; font-size: 5.0vw; top: 8%; position: relative;
  -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); line-height:30px; text-align:center; }
.bbmdiv51{ width:100%; cursor:pointer; font-size:7.0vw; text-align:center; font-weight:500; top: 50%; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.imgnew { display: inline-block; height: 65%; vertical-align: middle; }
.hrimgnew { display: inline-block; max-height: 80px; max-width:80px; height:100%; vertical-align: middle; }
.appimg{ display: inline-block; height: 230px; width:98%; vertical-align: middle; }
.appdwnimg1{ display: inline-block; width:100%; vertical-align: middle; height:100%; }
.appdwnimg{ display: inline-block; width:100%; vertical-align: middle; height:100%; }
.trademark{ font-size:4vw; vertical-align:top; }

.tabber{ width:100%; border-bottom:1px solid #DCDCDC; background: #FFFFFF; z-index: 1000; height:95%; }
.side-2 { width:2%; float:left; }
.side-1{ width:47%; float:left; text-align:left; te }
.hrstyle1{ font-size:5.5vw; width:96%; margin:0 auto; }
.hrstyle2{ font-size:7.0vw; }
.tabs:hover{ cursor:pointer; }
.tab_active { border-bottom: 2px solid #2bb572 !important; }
.tabs { font-size: 6vw; white-space: nowrap; color:#5A5A5A; }
.tabcontentcls{ height:100%; overflow-y:auto; margin:0; }
.tabstext { font-size:7vw; text-align:center;  position: relative; top: 25%; transform: translateY(-20%); }
.pad-8{ padding:8%; }
.mername{ width:100%; font-size:25px !important; text-align:center; font-weight:bold; }
.btn {
	display: inline-block;
	margin-bottom: 0;
	font-size: 6.5vw;
	font-weight: normal;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	font-family: 'Dosis' !important;;
	height:100%; width:100%;
}
.btn1 {
	display: inline-block;
	margin-bottom: 0;
	font-size: 6.5vw;
	font-weight: normal;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	font-family: 'Dosis' !important;;
	height:100%; width:100%;
	background:#6dc8b7;
}
.card-label-no{width:100%; height:90%; text-align:center; font-size:6.5vw; }
.card-img{ height:70%; }

/* Pop up css */
#popup_box {      
	display:none; position:fixed;  max-height:360px; height:90%; max-width:400px; width:90%; background:#FFFFFF; top: 15%; z-index:100; margin-left: 15px; border:2px solid #DCDCDC; font-size:6vw; -moz-box-shadow: 0 0 5px #DCDCDC; -webkit-box-shadow: 0 0 5px #DCDCDC; box-shadow: 0 0 5px #DCDCDC; border-radius: 5px; }  
#popupBoxClose { font-size:20px; line-height:15px; right:5px; top:5px; position:absolute;       color:#6fa5e2; font-weight:500; } 
.popup-1{ width:100%; text-align:center; padding:22px 0; color:#6dc8b7; }
.popup-2{ text-align:center; padding:5px; }
.popup-3{ width:100%; text-align:center; padding:22px 0; }
.bbmdiv61:hover{  background:#e0f5f1; cursor:pointer; }
textarea{ font-family:'Lato' !important; font-size:1.2em; line-height:26px; color:#000; }
@media( min-width:750px) {
	.hrimgnew{ width:100%; height:100%; }
	.card-img{ width:50%; height:70%; }
	.pad-8{ padding:1%; }
	.tabs{ font-size:3vw; }
	.hrstyle1{ font-size:2.5vw; }
	.hrstyle2{ font-size:3.5vw; }
	.btn{ font-size:3.5vw;}
	.btn1{ font-size:3.5vw;}
	.card-label-no{ font-size:3vw; }
	.bbmdiv31{ font-size:2.5vw; }
	.bbmdiv13{ font-size:3.0vw; }
	#popup_box { font-size:3vw; left: 35%; }
	.txtarea{ font-size:2.8vw; }
	.bbmdiv6{ font-size:2.5vw; }
}
@media( min-width:1200px) {
	.hrimgnew{ width:100%; height:100%; }
	.card-img{ width:50%; height:70%; }
	.pad-8{ padding:1% !important; }
	.tabs{ font-size:3vw; }
	.hrstyle1{ font-size:2.5vw; }
	.hrstyle2{ font-size:3.5vw; }
	.btn{ font-size:3.5vw;}
	.btn1{ font-size:3.5vw;}
	.card-label-no{ font-size:3vw; }
	.bbmdiv31{ font-size:2.5vw; }
	.bbmdiv13{ font-size:3.0vw; }
	#popup_box { font-size:3vw; left: 35%; }
	.txtarea{ font-size:2.8vw; }
	.bbmdiv6{ font-size:2.5vw; }
}
@media( max-height:320px) {
	.pad-8{ padding:4% !important; }
}
@media( max-height:400px) {
	.pad-8{ padding:0% !important; }
	.tabs { font-size: 4vw; }
	.card-label-no{ font-size:4.5vw; }
	.hrstyle2{ font-size:5vw; }
}

.logo-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:0px;
    padding-bottom:0px;
    border-bottom:1px solid #231f20;;
}

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

body{
    font-family: 'Dosis' !important;
    background:#f5f5f5;
    font-size:14px;
}

#container{
    width:100%;
    max-width:430px;
    margin:0 auto;
    background:#fff;
    min-height:100vh;
	padding-left: 5px;
	padding-right: 5px;
}

.logo-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:0px;
}

.logo-header img{
    max-width:100%;
    height:auto;
    max-height:45px;
}

.receipt-title{
    font-size:24px;
    font-weight:bold;
}

.merchant-name{
    text-align:center;
    font-size:22px;
    font-weight:bold;
}

.merchant-address{
    text-align:center;
    font-size:14px;
    font-weight:bold;
    margin-top:5px;
}

.row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    margin-bottom:6px;
}

.left{
    font-weight:normal;
}

.right{
    text-align:right;
}

.separator{
	border-top:1px dashed #000;
	margin:5px 0;
}

.center{
    text-align:center;
}

.success{
    text-align:center;
}

.declined{
    background:#000;
    color:#fff;
    text-align:center;
    padding:10px;
    font-size:18px;
    font-weight:bold;
}

.footer{
    text-align:center;
    font-size:11px;
    margin-top:0px;
}

@media(max-width:480px){

    body{
        font-size:12px;
    }

    .merchant-name{
        font-size:18px;
    }

    .receipt-title{
        font-size:20px;
    }
}

.logo-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:0px;
    margin-bottom:0px;
    border-bottom:1px solid #000;
}

.logo-header img{
    height:50px;
    width:auto;
}

.receipt-title{
    font-size:24px;
    font-weight:bold;
    text-align:right;
}