@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');


body{font-family: 'Roboto', sans-serif; margin: 0px; padding: 0px;}
.main{width: 600px; margin: 0 auto; overflow: hidden;}
.header-area{background:url(https://universal.mybmr.com/assets/img/agreement/img-1.jpg) left top no-repeat; height: 140px; margin-bottom: 46px; overflow: hidden; background-size: 100% 100%; }

.header-area-left{width: 251px; float: left; padding: 15px 0 0 49px;}
.header-area-left h2{font-size: 35px; line-height: 30px; margin: 0px 0px 6px 0px; padding: 0px; color: #fff;}
.header-area-left p{font-size: 14px; line-height: 14px; margin: 0px 0px 6px 0px; padding: 0px; color: #fff;}
.header-area-right {width: 180px; float: right; padding: 30px 30px 0 0; text-align: center;}

.services-area {margin-bottom: 40px;}
.services-heading {background:url(https://universal.mybmr.com/assets/img/agreement/img-3.jpg) left top no-repeat; height: 41px; padding:15px 0px 0px 49px; color: #fff; font-size: 24px; font-weight: bold;}
.services-txt-area {overflow: hidden; padding: 27px 49px; background:linear-gradient(68deg, #0079c0 0%, #00b0c5 100%);}
.services-txt1 {width: 60%; float: left; margin: 0px; padding: 0px; list-style-type: none;}
.services-txt2 {width: 40%; float: left; margin: 0px; padding: 0px; list-style-type: none;}
.services-txt-area table{width: 100%; color: #fff; font-size: 14px; letter-spacing: 1px;}
.services-left-table {width: 60%; vertical-align: baseline; border-spacing: 0px;}
.services-left-table img, .services-right-table img {margin-right: 10px;}
.services-left-table tr td:nth-child(1) {width: 50%;}
.services-left-table tr td:nth-child(2) {width: 4%;}
.services-left-table tr td:nth-child(3) {width: 46%;}
.services-right-table {width: 40%; vertical-align: baseline;}
.services-right-table tr td:nth-child(1) {width: 50%;}
.services-right-table tr td:nth-child(2) {width: 4%;}
.services-right-table tr td:nth-child(3) {width: 46%;}
.services-left-table tr td, .services-right-table tr td {padding: 12px 0px}

.amount-area {font-size: 12px; padding: 0px 80px; overflow: hidden;}
.amount-area table {width: 100%; vertical-align: baseline; border-spacing: 0px;}
.amount-lft-heading {background:#daddde; font-weight: bold; text-transform: uppercase; color: #000; padding: 19px 15px;}
.amount-rgt-heading {background:#0099ad; font-weight: bold; text-transform: uppercase; color: #fff; padding: 19px 15px;}
.amount-lft-txt {background: #f1f2f2; border-bottom: 1px solid #daddde; color: #4c4c4c; font-weight: 500; padding: 19px 15px;}
.amount-rgt-txt {background: #00b1c5; border-bottom: 1px solid #ffffff; color: #fff; font-weight: 500; padding: 19px 15px;}
.border-bottom-0 {border-bottom: 0px;}
.amount-button-area {padding: 30px 0; overflow: hidden;}
.amount-button-area a {background:linear-gradient(68deg, #0079c0 0%, #00b0c5 100%); height:32px; line-height: 32px; text-decoration: none; outline: none; display: block; text-align: center; font-size: 10px; color: #fff; text-transform: uppercase; letter-spacing: 1px; float: right; padding: 0px 30px; margin-left: 12px;}

.bodytxt-area {padding:0px 49px; margin-bottom: 35px;}
.bodytxt-area h2 {font-size: 24px; font-weight: 500; line-height: 24px; color: #444444; padding: 0px; margin: 0px 0px 36px 0px; }
.bodytxt-area p {font-size: 12px; font-weight: normal; line-height: 18px; color: #666666; margin: 0px; padding: 0px; }

.message-area { overflow: hidden; padding: 0 49px; }
.message-heading {font-size: 14px; font-weight: bold; color: #00aeef; letter-spacing: 1px; float: left; width: 50%; margin-bottom: 35px;}
.message-date {font-size: 12px; font-weight: normal; color: #000; text-align: right; float: left; width: 50%; margin-bottom: 35px;}

.message-upload-area {overflow: hidden; padding: 0 30px;}
.message-upload {width: 33.333%; float: left; text-align: center;}
.message-upload-area h4 {font-weight: bold; font-size: 14px; text-transform: uppercase; color: #00aeef; margin: 20px 0 0 0; padding: 0px;}

.footer-area {padding: 15px 49px; margin-top: 35px; overflow: hidden; background:url(https://universal.mybmr.com/assets/img/agreement/6.jpg) left top no-repeat #f1f1f1; height: auto;}
.footer-left {width: 50%; float: left;}
.footer-left table { font-size: 10px; color: #000;}
.footer-left table tr td{padding: 5px 0;}
.footer-left table tr td:first-child {width: 150px;}
.footer-right {width: 50%; float: right; text-align: right;}
.foot-text img { height: 18px;}
.footer-pay-now {
  padding-top: 0;
  padding-bottom: 10px;
  margin-right: 45px;
}

.merchant-address {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*responsive start*/
@media only screen and (max-width: 414px) {
  .main {width: 414px;}
  .header-area {height: auto; margin-bottom: 0px; background-size: 630px;}
  .header-area-left {width: 100%; padding: 15px;}
  .header-area-right {width: 100%; padding: 10px; text-align: center;}
  .services-heading{height: auto; padding: 0px 0px 0px 15px; line-height: 55px;}
  .services-txt-area {padding: 15px;}
  .services-txt-area table {width: 100%;}
  .services-left-table {width: 100%; display: inline-block;}
  .services-right-table {width: 100%; display: inline-block;}
  .amount-area {padding: 0px 15px;}
  .amount-button-area {text-align: center;}
  .amount-button-area a {float: none; display: inline-block; margin:0px 5px;}
  .bodytxt-area {padding: 0px 15px;}
  .bodytxt-area h2 {line-height: 30px;}
  .message-area {padding: 0px 15px;}
  .message-upload-area {padding: 0px 15px;}
  .message-upload {width: 100%; margin-bottom: 20px;}
  .footer-area {height: auto; padding: 15px 15px;}
  .footer-left {width: 100%;}
  .footer-left table {width: 100%; margin-bottom: 20px;}
  .footer-right {width: 100%; text-align: center;}
  .sign-footer {float: none !important; margin-left: auto; margin-right: auto;}
  .header-area-left h2 { font-size: 28px;}
  .services-heading {  font-size: 20px;}
  .bodytxt-area h2 {  font-size: 20px;  margin: 0 0 16px 0;}
}
@media only screen and (max-width: 375px) {
  .main {width: 375px;}
  .header-area {height: auto; margin-bottom: 0px; background-size: 630px;}
  .header-area-left {width: 100%; padding: 15px 0 0  15px;}
  .header-area-right {width: 100%; padding: 15px; text-align: center;}
  .services-heading{height: auto; padding: 0px 0px 0px 15px; line-height: 55px;}
  .services-txt-area {padding: 15px;}
  .services-txt-area table {width: 100%;}
  .services-left-table {width: 100%; display: inline-block;}
  .services-right-table {width: 100%; display: inline-block;}
  .amount-area {padding: 0px 15px;}
  .amount-button-area {text-align: center;}
  .amount-button-area a {float: none; display: inline-block; margin:0px 5px;}
  .bodytxt-area {padding: 0px 15px;}
  .bodytxt-area h2 {line-height: 30px;}
  .message-area {padding: 0px 15px;}
  .message-upload-area {padding: 0px 15px;}
  .message-upload {width: 100%; margin-bottom: 20px;}
  .footer-area {height: auto; padding: 15px 15px;}
  .footer-left {width: 100%;}
  .footer-left table {width: 100%; margin-bottom: 20px;}
  .footer-right {width: 100%; text-align: center;}
  .foot-text {font-size: 14px;}
  .foot-text img {height: 15px;}
}

@media only screen and (max-width: 320px) {
  .main {width: 320px;}
  .header-area {height: auto; margin-bottom: 0px;}
  .header-area-left {width: 100%; padding: 15px;}
  .header-area-right {width: 100%; padding: 15px; text-align: center;}
  .services-heading{height: auto; padding: 0px 0px 0px 15px; line-height: 55px;}
  .services-txt-area {padding: 15px;}
  .services-txt-area table {width: 100%;}
  .services-left-table {width: 100%; display: inline-block;}
  .services-right-table {width: 100%; display: inline-block;}
  .amount-area {padding: 0px 15px;}
  .amount-button-area {text-align: center;}
  .amount-button-area a {float: none; display: inline-block; margin:0px 5px;}
  .bodytxt-area {padding: 0px 15px;}
  .bodytxt-area h2 {line-height: 30px;}
  .message-area {padding: 0px 15px;}
  .message-upload-area {padding: 0px 15px;}
  .message-upload {width: 100%; margin-bottom: 20px;}
  .footer-area {height: auto; padding: 15px 15px;}
  .footer-left {width: 100%;}
  .footer-left table {width: 100%; margin-bottom: 20px;}
  .footer-right {width: 100%; text-align: center;}
}



.bodytxt-desc {
  max-height: 150px;
  overflow-y: auto;
  padding-right: 15px;
}

.message-upload label {
  cursor: pointer;
}
.upload-btn {
  font-size: 13px;
  color: #444444;
  font-weight: 700;
  display: block;
  margin-top: 5px;
}
.kbw-signature {
  background-color: #f1f1f1;
  width: 145px;
  height: 119px;
  border-radius: 5px;
  margin: 0 auto 5px auto;
}
.sign-btn .btn {
  font-size: 13px;
  color: #fff;
  padding: 5px 8px;
  border: none;
  cursor: pointer;
}
.sign-btn .btn-submit {
  background:linear-gradient(68deg, #0079c0 0%, #00b0c5 100%);
}
.sign-btn .btn-clear {
  background:#6c757d;
}

.foot-text {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}
.foot-text img {
  margin-left: 15px;
  margin-right: 15px;
}
.foot-link {
  font-size: 13px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0;
}
.foot-link a {
  color: #444444;
  word-break: break-word;
}


.message-upload a {
  display: inline-block;
  border:#444444 1px solid;
  border-radius: 10px;
  line-height: 0;
}
.message-upload a img {
  width: 180px;
  height: 180px;
  border-radius: 10px;
 padding: 5px;
}


.lb-data {
  margin-top: -250px;
}

.services-desc-table { width: 100%;}
.services-desc-table tr td:nth-child(1) {width: 30%;}
.services-desc-table tr td:nth-child(2) {width: 2%;}
.services-desc-table tr td:nth-child(3) {width: 68%;}
.message-upload-view .message-upload {
  width: 50%;
}
@media only screen and (max-width: 414px) {
.services-desc-table tr td:nth-child(1) {width: 40%;}
.services-desc-table tr td:nth-child(2) {width: 3%;}
.services-desc-table tr td:nth-child(3) {width: 57%;}
.message-upload-view .message-upload { width: 100%; }
.footer-pay-now { margin-right: 0px; }
}
@media only screen and (max-width: 375px) {
.services-desc-table tr td:nth-child(1) {width: 44%;}
.services-desc-table tr td:nth-child(2) {width: 3%;}
.services-desc-table tr td:nth-child(3) {width: 53%;}
}