.flat-container.support-pages,
.flat-container-border.support-pages {
    height: 330px;
}

.support-header h1 {
    color: #FFFFFF;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 49px;
    margin-bottom: 10px;
}

.contact-us,
.terms-conditions,
.pricing,
.security,
.merchant-guide{
    margin: 80px 0 80px;
}

.contact-us .title {
    color: #002C6D;
    font-size: 36px;
    font-weight: 600;
    line-height: 49px;
    font-family: "Nunito";
}

.contact-us p {
	color: #7BA8BB;
	font-size: 16px;
	line-height: 21px;
}

.merchant-guide .title {
    color: #002C6D;
    font-size: 36px;
    font-weight: 600;
    line-height: 49px;
    font-family: "Nunito";
}

.merchant-guide p {
    color: #707780;
}

.merchant-guide .title-guide {
    color: #004AA6;
    font-weight: 700;
}

.tab-pane .title.guide {
    color: #002C6D;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
}

.merchant-guides .nav-link a {
    color: #002C6D;
    font-size: 18px;
    font-weight: 7600;
    line-height: 27px;
}

.merchant-guides .nav-pills {
    display: block;
}

.guide img {
    border-radius: 3%;
    width: 100%;
}

.guide_tabs {
    padding: 0px;
    padding-left: 15px;
}

.nav-pills .nav-link {
    color: grey;
    font-weight: 600;
    padding: 0px;
}

.nav-pills .nav-link::before {
    content:" ";
    margin-right: 22px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    font-weight: 700;
    color: #002C6D;
    background-color: transparent;
}

.nav-pills .nav-link.active:before, .nav-pills .show>.nav-link {
    content:"• ";
    margin-right: 10px;
}

.nav-pills .nav-link {
    border-radius: 0rem;
}

.guide p {
    color: grey;
    font-size: 14px;
}

.contact-us-img{
    margin-bottom: 30px;
}

.contact-us-img img{
    max-width: 660px;
}

.contact-address .title {
    color: #002C6D;
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
}
.contact-address .address .name{
    color: #7BA8BB;
	/* font-family: "Open Sans"; */
	font-size: 16px;
	font-weight: 600;
	line-height: 21px;
    margin-bottom: 10px;
}
.contact-address .address {
	color: #7BA8BB;
	/* font-family: "Open Sans"; */
	font-size: 16px;
	line-height: 21px;
}

.contact-address p.hotline {
    color: #7BA8BB;
    /* font-family: "Open Sans"; */
    font-size: 16px;
    line-height: 21px;
}

.terms-service .title,
.privacy-policy .title,
.terms-conditions .title,
.pricing .title,
.security .title{
    color: #002C6D;
	font-size: 36px;
	font-weight: 600;
	line-height: 49px;
    font-family: "Nunito";
}
.terms-service p,
.terms-conditions p,
.privacy-policy p ,
.pricing p ,
.security p {
    margin-bottom: 5px;
	color: #50565D;
	font-size: 16px;
	line-height: 21px;
}
table.ew-tos {
	text-align: justify;
	margin-left: -15px;
}
table.ew-tos td {
	margin-bottom: 5px;
	color: #607696;
	font-size: 16px;
	line-height: 21px;
	vertical-align: top;
	padding: 15px;
}
#td-number {
	color: #002C6D;
}
ol.ewallet {
    color: #607696;
    padding-inline-start: 25px;
}
ol.ewallet ol.ewallet{
    padding-inline-start: 36px;
}
ol.ewallet {
    counter-reset: item;
}
ol.ewallet li {
    display: block;
    position: relative;
}
ol.ewallet li,
ol.ewallet li ol li {
    padding: 10px;
}
ol.ewallet li ol li::before {
    font-weight:normal;
}
table.ewallet tr td {
    padding-bottom: 10px;
    padding-right: 20px;
}
div.ewallet-address {
    color: #002C6D;
}
ol.ewallet li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    color: #002C6D;
    margin-right: 100%;
    font-weight: 600;
    right: 10px; /* space between number and text */
}
.ewallet td {
    vertical-align: top;
}
.privacy-policy h2.subtitle{
	line-height: 24px;
}
.terms-service .subtitle,
.terms-conditions .subtitle,
.privacy-policy .subtitle,
.pricing .subtitle,
.security .subtitle{
    color: #002C6D;
	font-size: 18px;
	font-weight: 600;
	line-height: 27px;
}

.terms-conditions .list-terms .list-subtitle,
.terms-service .list-terms .list-subtitle{
    color: #002C6D;
	font-size: 16px;
	line-height: 21px;
    margin-bottom: 10px;
}

.privacy-policy .list-roman li{
    color: #7BA8BB;
}
.privacy-policy .list-roman li p{
    margin: 0;
    margin-left: 20px;
}
.privacy-policy .dl-horizontal dt{
    color: #002C6D;
	font-size: 16px;
	font-weight: 600;
}
.privacy-policy .dl-horizontal dd {
	color: #607696;
	font-size: 14px;
	line-height: 21px;
    margin-bottom: 1rem;
}
.pricing .table{
    border: none;
}
.pricing .table th,
.pricing .table td{
    border: 1px solid #ABD7E3;
}
.pricing .table .thead th{
    color: #607696;
	font-size: 16px;
	font-weight: 600;
	line-height: 34px;
}
.pricing .table th,
.pricing .table td{
    padding: 20px 40px;
    text-align: center;
}
.pricing .table th:first-child,
.pricing .table td:first-child{
    text-align: left;
}
.pricing .table p {
	color: #607696;
	font-size: 16px;
	line-height: 34px;
}
.pricing .table .bold td{
	color: #002C6D;
	font-size: 16px;
	font-weight: 600;
	line-height: 34px;
}
.pricing .mdr .thead th,
.pricing .mdr td p{
	color: #002C6D;
	font-size: 14px;
	font-weight: 600;
}
.pricing .mdr th:first-child,
.pricing .mdr td:first-child,
.pricing .mdr td:first-child p{
    text-align: left;
    color: #607696;
	font-size: 16px;
}

.security ul li{
    color: #607696;
	font-size: 16px;
	line-height: 21px;
}
.security ul li p{
    margin-bottom: 20px;
}


/* switch toggle */
.privacy-tab-switch .tabsw-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
.privacy-tab-switch .tabsw-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
}
.privacy-tab-switch input.tabsw-toggle-pill + label {
    padding: 2px;
    width: 400px;
    height: 44px;
    background-color: #002C6D;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}
.privacy-tab-switch input.tabsw-toggle-pill + label:before,
.privacy-tab-switch input.tabsw-toggle-pill + label:after {
    display: block;
    position: absolute;
    content: "";
}
.privacy-tab-switch input.tabsw-toggle-pill + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: #fff;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}
.privacy-tab-switch input.tabsw-toggle-pill + label:after {
    top: 0;
    left: 0;
    bottom: 0;
    width: 208px;
    background-color: #002C6D;
    -webkit-border-radius: 52px;
    -moz-border-radius: 52px;
    -ms-border-radius: 52px;
    -o-border-radius: 52px;
    border-radius: 52px;
    -webkit-transition: margin 0.4s, background 0.4s;
    -moz-transition: margin 0.4s, background 0.4s;
    -o-transition: margin 0.4s, background 0.4s;
    transition: margin 0.4s, background 0.4s;
}
.privacy-tab-switch input.tabsw-toggle-pill:checked + label {
    background-color: #002C6D;
}
.privacy-tab-switch input.tabsw-toggle-pill:checked + label:after {
    margin-left: 192px;
    background-color: #002C6D;
}
.privacy-tab-switch .txt-english{
    position: absolute;
    z-index: 1;
    top: 12px;
    text-align: center;
    width: 200px;
    font-size: 14px;
	font-weight: 600;
	line-height: 21px;
    color: #fff;
    -webkit-transition: color 1s
    -moz-transition: color 1s;
    -o-transition: color 1s;
    transition: color 1s;
}
.privacy-tab-switch .txt-bahasa{
    position: absolute;
    z-index: 1;
    top: 12px;
    text-align: center;
    width: 200px;
    left: 200px;
    font-size: 14px;
	font-weight: 600;
	line-height: 21px;
    color: #002C6D;
    -webkit-transition: color 1s
    -moz-transition: color 1s;
    -o-transition: color 1s;
    transition: color 1s;
}
.privacy-tab-switch input.tabsw-toggle-pill:checked + label .txt-english{
    color: #002C6D;
}
.privacy-tab-switch input.tabsw-toggle-pill:checked + label .txt-bahasa{
    color: #fff;
}
/* switch toggle end */

.privacy-policy-header,
.terms-conditions-header,
.terms-service-header,
.security-header,
.contact-us-header {
    color: #ffffff;
}

.privacy-policy-header .featured-image,
.terms-conditions-header .featured-image,
.terms-service-header .featured-image,
.security-header .featured-image,
.contact-us-header .featured-image{
    position: absolute;
    right: -220px;
    top: 45%;
}

.privacy-policy-header .featured-image img,
.terms-conditions-header .featured-image img,
.terms-service-header .featured-image img,
.security-header .featured-image img,
.contact-us-header .featured-image img{
    width: 100%;
    top: -150px;
    position: relative;
    max-width: none;
}


/* form */
.contact-us .form-input .form-group{
    position: relative;
}
.contact-us .form-input .form-group .error{
    position: absolute;
    color: #ff0000;
    top: 64px;
    left: 12px;
    font-size: 12px;
}
.contact-us .form-input .form-group input.form-control {
    display: block;
    text-align: left;
    margin: 15px auto;
    color: #002C6D;
    font-family: Nunito;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    padding-bottom: 15px;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    width: 100%;
    margin-bottom: 20px;
    background: transparent;
}

.contact-us .form-input .form-group input.form-control::placeholder {
    color: transparent;
}

.contact-us .form-input .form-group input.form-control [placeholder]:focus::-webkit-input-placeholder {
    color: transparent;
}

.contact-us .form-input .form-group select.form-control {
    border-radius: 0;
    display: block;
    text-align: left;
    margin: 15px auto;
    color: #7BA8BB;
    font-family: Nunito;
    font-size: 17px;
    font-weight: 600;
    line-height: 19px;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    width: 100%;
    margin-bottom: 20px;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
}
.font-blue {
    background: linear-gradient(to right, #496AD5, #1F91DE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.contact-us .subject-field{
    position: relative;
}
.contact-us .subject-arrow{
    position: absolute;
    top: 8px;
    right: 30px;
}
.contact-us .subject-arrow::after{
    content: "\f105";
    font-family: 'icomoon' !important;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    border: 0;
    position: absolute;
    top: 12px;
    right: -20px;
}

.contact-us .form-input .form-group input.form-control.hasError,
.contact-us .form-input .form-group select.form-control.hasError{
    border-bottom: 1px solid #ff0000;
}

.contact-us .form-input .form-group input.form-control:focus {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    box-shadow: none;
    border-bottom-color: #002C6D;
}

.contact-us .form-input .form-group select.form-control:focus {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    box-shadow: none;
}

.contact-us .contact-sent{
    display: none;
    font-size: 12px;
    margin-top: 15px;
    color: #7BA8BB;
}

.contact-us .spinner{
    display: none;
    width: 40px;
    height: auto;
    margin-left: 15px;
    margin-bottom: 5px;
}

.field {
  display: flex;
  flex-flow: column-reverse;
  margin-bottom: 0em;
}
/**
* Add a transition to the label and input.
* I'm not even sure that touch-action: manipulation works on
* inputs, but hey, it's new and cool and could remove the
* pesky delay.
*/
label, input {
  transition: all 0.2s;
  touch-action: manipulation;
}

input {
  font-size: 1.5em;
  border: 0;
  border-bottom: 1px solid #ccc;
  font-family: inherit;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 0;
  cursor: text;
}

input:focus {
  outline: 0;
  border-bottom: 1px solid #666;
}

label {
    font-size: 0.7em;
    margin-bottom: -9px;
    margin-left: 12px;
    z-index: -1;
}
/**
* Translate down and scale the label up to cover the placeholder,
* when following an input (with placeholder-shown support).
* Also make sure the label is only on one row, at max 2/3rds of the
* field—to make sure it scales properly and doesn't wrap.
*/
input:placeholder-shown + label {
  cursor: text;
  max-width: 66.66%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left bottom;
  transform: translate(0, 2.125rem) scale(1.5);
  color: #7BA8BB;
}
input.ipadOnly:placeholder-shown + label {
    display: none;
}
input.ipadOnly:focus + label{
    display: block;
}
/**
* By default, the placeholder should be transparent. Also, it should
* inherit the transition.
*/
::-webkit-input-placeholder {
  opacity: 0;
  transition: inherit;
  color: rgba(255,255,255,0);
}
/**
* Show the placeholder when the input is focused.
*/
input:focus::-webkit-input-placeholder {
  opacity: 1;
}
/**
* When the element is focused, remove the label transform.
* Also, do this when the placeholder is _not_ shown, i.e. when
* there's something in the input at all.
*/
input:not(:placeholder-shown) + label,
input:focus + label {
  transform: translate(0, 0) scale(1);
  cursor: pointer;
  color: #7BA8BB;
}

::placeholder {
  transition: 0.25s color ease-in-out;
  color: rgba(255,255,255,0);
}

[placeholder]:focus::-webkit-input-placeholder {
  color: transparent;
}

.ewallet-header-tos-tab {
    width:300px;
    border: 2px solid #00458D;
    border-radius: 5px;
}

.ewallet-header-tos-item{
   width:50%;
   float:left;
   text-align:center;
   color:#00458D;
   background-color:#ffffff;
}

.ewallet-header-tos-item.active, .ewallet-header-tos-item.active a{
   color: white;
   background-color:#00458D;
}

.ewallet-clear-float{
   clear: both;
}