:root {
  --body-background-color: #f9f9fc;
  --main-primary-color: #4d67ff --main-secondary-color: #a6b8fb79;
  --main-contrast-color: #ffffff;
  --main-text-color: #000000;
  --main-navbar-background: #f1f2f5;
  --main-logo-url: url('/static/img/newbluejup.png');
  --titles-color: #000000;
  --main-primary-color-lighter: #000000;
  --main-primary-color-darker: #000000;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  background-color: var(--body-background-color);
}

header,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
li,
p,
a {
  margin: 0;
  padding: 0;
  text-decoration: none !important;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

ul.account-progress li a:hover {
  color: inherit;
}

i.fas {
  font-size: 12px;
  color: #fff;
}

h1 {
  font-size: 30px;
  letter-spacing: 0.51px;
  color: #24262b;
  font-weight: 500;
  line-height: 32px;
}

h2 {
  font-size: 18px;
  font-weight: 200;
  color: #4c4d63;
  line-height: 30px;
}

h3 {
  font-size: 18px;
  font-weight: normal;
  color: var(--main-primary-color-lighter);
  line-height: 25px;
  margin-bottom: 30px;
}

h4 {
  float: left;
  font-size: 18px;
  color: #1c1c1c;
  line-height: 25px;
}

/* CUSTOM CHECKBOX STYLES */
input[type='checkbox'] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  width: 30px !important;
  height: 30px !important;
  color: var(--theme-primary-color);
  border: 2px solid var(--theme-primary-color);
  border-radius: 0.15em;
  display: grid;
  place-content: center;
  padding: 13px !important;
}

input[type='checkbox']::before {
  content: '';
  transform: scale(0);
  width: 20px;
  height: 20px;
  box-shadow: inset 35px 1em var(--theme-primary-color) !important;
  padding: 2px !important;
  clip-path: polygon(28% 40%, 13% 57%, 48% 86%, 94% 29%, 77% 17%, 47% 56%);
}

input[type='checkbox']:checked::before {
  transform: scale(1);
}

input[type='checkbox']:disabled {
  transform: scale(1);
  color: #e9ecef;
  border: 2px solid #e9ecef;
}

input[type='checkbox']:disabled::before {
  transform: scale(1);
  box-shadow: inset 35px 1em #e9ecef !important;
  color: #e9ecef;
  border: 2px solid #e9ecef;
}

/* .form-control {
  height: 48px;
} */

div.page-title {
  display: inline-block;
  padding-top: 23px;
  padding-bottom: 15px;

  /* color: var(--titles-color); */
  color: black;
}
div.page-title .sub-title,
div.page-title .title-detail {
  /* color: var(--titles-color); */
  color: black;
}

span.title-detail {
  font-size: 12px;
  font-weight: 300;
  color: rgba(74, 74, 74, 0.5);
  line-height: 17px;
}

i.optional-field {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #007bff;
  border-radius: 50%;
  vertical-align: middle;
  margin: 7px 10px 0 0;
}

a .disabled:first-of-type {
  pointer-events: none;
  cursor: default;
  color: #acacac !important;
}
a.previous-step {
  font-size: 16px;
  line-height: 23px;
  color: var(--main-text-color) !important;
  padding: 12px 66px !important;
}
a.previous-step:hover {
  color: var(--main-primary-color) !important;
}

button.continue-btn {
  background-color: var(--main-primary-color);
  padding: 12px 80px;
  font-size: 16px;
  font-weight: 300;
  line-height: 23px;
  color: var(--titles-color);
}

button {
  outline: none !important;
  box-shadow: none !important;
}

.el-input,
.el-input__inner,
.mx-input {
  font-size: 16px !important;
}

.el-input__inner {
  padding: 6px 12px !important;
}

label {
  width: 100%;
  font-size: 14px;
  font-weight: 300;
  color: #82879e;
  line-height: 20px;
  margin-bottom: 0;
}

label .sub-label {
  font-size: 12px;
  font-weight: 200;
  line-height: 17px;
  letter-spacing: 0.25px;
  margin-left: 8px;
}

.form-group,
.custom-form-group {
  margin: 0 !important;
  min-height: 70px;
  flex-shrink: 0;
}

.form-group label span b,
.custom-form-group label span b {
  font-size: 12px;
  font-weight: lighter;
  line-height: 17px;
  color: #82879e;
  margin-left: 8px;
}

input {
  padding: 12px 16px;
  border-radius: 4px;
}

input:focus {
  outline: none !important;
  box-shadow: none !important;
}

input[type='email']::-webkit-input-placeholder,
input[type='text']::-webkit-input-placeholder,
input[type='number']::-webkit-input-placeholder,
input[type='date']::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #bec1cd;
  font-size: 16px;
  font-weight: lighter;
  line-height: 23px;
}

input[type='email']::-moz-placeholder,
input[type='text']::-moz-placeholder,
input[type='number']::-moz-placeholder,
input[type='date']::-moz-placeholder {
  /* Firefox 19+ */
  color: #bec1cd;
  font-size: 16px;
  font-weight: lighter;
  line-height: 23px;
}

input[type='email']:-ms-input-placeholder,
input[type='text']:-ms-input-placeholder,
input[type='number']:-ms-input-placeholder,
input[type='date']:-ms-input-placeholder {
  /* IE 10+ */
  color: #bec1cd;
  font-size: 16px;
  font-weight: lighter;
  line-height: 23px;
}

input[type='email']:-moz-placeholder,
input[type='text']:-moz-placeholder,
input[type='number']:-moz-placeholder,
input[type='date']:-moz-placeholder {
  /* Firefox 18- */
  color: #bec1cd;
  font-size: 16px;
  font-weight: lighter;
  line-height: 23px;
}

input.form-control:focus,
textarea.form-control:focus,
.el-select .el-input.is-focus .el-input__inner,
.el-select .el-input.is-focus .el-input__inner:hover {
  background: rgba(96, 127, 127, 0.07) !important;
  border-color: rgb(103, 103, 103) !important;
  border-width: 1px !important;
}

.select-primary.el-select-dropdown__item.selected,
.select-primary.el-select-dropdown__item.selected.hover {
  background-color: var(--main-contrast-color) !important;
  color: var(--main-primary-color) !important;
}

.mx-calendar-content .cell.actived {
  color: var(--main-contrast-color) !important;
  background-color: var(--main-primary-color) !important;
}

.mx-calendar-content .cell:hover {
  color: var(--main-contrast-color) !important;
  /* color: #ffffff !important; */
  background-color: var(--main-secondary-color) !important;
  /* background-color: #a6b8fb79 !important; */
}

select.form-control:not([size]):not([multiple]) {
  height: calc(2.75rem + 4px) !important;
  text-indent: 11px;
}

input.form-control:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
input.form-control:-ms-autofill,
textarea:-ms-autofill,
select:-ms-autofill,
input.form-control:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill,
input.form-control::-moz-autofill,
textarea::-moz-autofill,
select::-moz-autofill {
  background-color: rgba(96, 127, 255, 0.07);
  border-color: var(--main-primary-color);
}
input.success-brdr {
  background: rgba(249, 249, 252, 0.48);
  border-color: #4fce3e;
}
select.success-brdr {
  background: rgba(249, 249, 252, 0.48);
  border-color: #4fce3e;
}
select.error-brdr {
  background: rgba(249, 249, 252, 0.48);
  border-color: #ff151f;
}

span.success-icon {
  position: absolute;
  top: 34%;
  right: 10px;
  font-size: 10px;
}
span.success-icon i {
  font-style: normal;
  font-size: 16px;
  line-height: 0.8;
  color: #7ed321;
}
input.error-brdr {
  background: rgba(249, 249, 252, 0.48);
  border-color: #ff151f;
}
span.error-icon {
  position: absolute;
  top: 30%;
  right: 10px;
  line-height: 1.1;
}
span.error-icon i {
  font-style: normal;
  font-size: 16px;
  line-height: 0.8;
  color: #ff151f;
}
i.error-msg {
  font-weight: 400;
  font-size: 11px;
  color: #ff1721;
  letter-spacing: 0;
  font-style: normal;
}

.error-msg-wrapper {
  padding: 8px 0;
}

div.input-wrapper {
  position: relative;
}

.form-control:focus {
  background-color: rgba(96, 127, 255, 0.07);
  border-color: var(--main-primary-color);
  border: 2px solid var(--main-primary-color);
  box-shadow: none;
}

/* Header */
header {
  display: inline-block;
  width: 100%;
  background-color: var(--main-navbar-background);
  text-align: center;
}

.account-progress-outer {
  width: 830px;
  max-width: 830px;
  margin: 0 auto;
}

.account-progress-outer ul {
  display: flex;
  justify-content: space-between;
}

.account-progress-outer ul li {
  max-width: unset;
  font-size: 14px;
  color: #101131;
  position: relative;
}

.account-progress-outer ul li:last-child {
  margin-right: 0;
}

.account-progress-outer ul li a {
  color: #101131;
  display: flex;
}

.account-progress-outer ul li a i {
  font-size: 12px;
  line-height: 1;
  font-style: normal;
  color: var(--main-contrast-color);
  /* color: #ffffff; */
  font-weight: 500;
}

.account-progress-outer ul li .progress-list {
  padding: 20px 0 13px;
}

.account-progress-outer ul li .progress-list-border {
  border-bottom: 2px solid var(--main-primary-color-lighter);
}

.account-progress-outer ul li .check-bg {
  border-radius: 50%;
  margin-right: 10px;
  border: 1px;
  border-style: solid;
  border-color: var(--main-primary-color);
  background-color: var(--main-primary-color);
  margin-top: -4px;
  float: left;
  min-width: 25px !important;
  height: 25px;
  padding-top: 1px;
  font-size: 14px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.account-progress-text {
  margin-top: 4px;
  text-align: start;
}

.account-progress-outer ul li .check-ongoing-bg {
  background-color: var(--main-secondary-color);
  /* background-color: #a6b8fb79; */
}

.progress-done:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 250px;
  background-color: var(--main-primary-color);
  bottom: 0;
  left: 0;
}

.account-progress-outer ul li:last-child .progress-done:after {
  display: none;
}

.account-progress-outer ul li .check-done i {
  color: #fff;
}

.account-progress-outer ul li .check-ongoing-bg i {
  color: var(--main-primary-color);
}

.account-progress-outer ul li .check-remaining {
  background-color: #9297aa;
  border-color: #9297aa;
}

.account-progress .last-li:last-child .progress-done:after {
  content: '';
  width: 35px;
}

/* Header end */

.main-body-wrapper {
  display: inline-block;
  height: 100%;
  width: 100%;
  text-align: center;
  /* background-color: var(--body-background-color); */
}

.main-body-wrapper .initiate-failure-content-outer {
  display: inline-block;
  max-width: 930px;
  width: 100%;
  padding: 100px 120px;
  box-shadow: 0 2px 24px 0 #dcdcdd;
  border-radius: 16px;
  background-color: #fff;
  margin: 100px auto 20px;
}

.main-body-wrapper .welcome-wrapper {
  display: inline-block;
  max-width: 830px;
  width: 100%;
  padding: 35px 50px;
  box-shadow: 0 2px 24px 0 #dcdcdd;
  border-radius: 16px;
  background-color: #fff;
  /* margin: 202px auto 20px; */
}

.initiate-failure-content-outer .initiate-failure {
  display: inline-block;
  width: 100%;
  max-width: 459px;
  height: 342px;
  max-height: 342px;
  background-image: url('/static/img/bg-img/initiate-failure.png');
  filter: grayscale(100%) drop-shadow(0 0 4px var(--theme-primary-color));
  -webkit-filter: grayscale(100%) drop-shadow(0 0 4px var(--theme-primary-color));
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 60px;
}

.main-body-wrapper .form-wrapper {
  display: inline-block;
  /* margin: 0 auto 40px; */
  width: 100%;
  max-width: 480px;
  /* background-color: #fff; */
  /* border-radius: 16px; */
  text-align: left;
  /* box-shadow: 0 2px 24px 0 rgba(220, 220, 221, 0.7); */
  /* padding: 35px 50px; */
}

.company-tnc-box {
  display: inline-block;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.company-tnc-box input {
  float: left;
}

.company-tnc-box .company-tnc-checkbox {
  float: left;
  padding: 16px 10px 10px 0px;
}

.company-tnc-box .company-tnc-links {
  display: inline-block;
  width: 85%;
  padding-top: 14px;
}

.company-tnc-box .company-tnc-links p,
.company-tnc-box .company-tnc-links p span {
  display: inline-block;
  font-size: 14px;
  color: #82879e;
  line-height: 20px;
  font-weight: lighter;
  text-align: left;
}

.company-tnc-box .company-tnc-links p a {
  font-weight: 400;
  color: #82879e;
  border-bottom: 1px solid #82879e;
}

.submit-btn {
  padding-bottom: 0px;
}

.submit-btn button {
  padding: 12px 66px !important;
  background-color: var(--main-primary-color);
  color: var(--main-contrast-color);
  font-size: 16px;
  line-height: 23px;
  font-weight: normal;
}

/* Mobile Varification page */
.mobile-varification {
  display: inline-block;
  width: 100%;
  max-width: 178px;
  height: 117px;
  max-height: 117px;
  background-image: url('/static/img/bg-img/mobile-varification-img.png');
  filter: grayscale(100%) drop-shadow(0 0 4px var(--main-primary-color));
  -webkit-filter: grayscale(100%) drop-shadow(0 0 4px var(--main-primary-color));
  background-size: cover;
  background-repeat: no-repeat;
}

.otp-box-wrapper {
  min-width: 252px !important;
  /* max-width: 440px !important; */
  padding: 16px 0 6px 0;
  margin: 0 auto;
  display: inline-block;
}
.otp-box-wrapper input {
  height: 64px;
  width: 100%;
  font-size: 25px;
  text-align: center;
  border: 1px solid rgba(130, 135, 158, 0.28);
  color: #000 !important;
  letter-spacing: 5px;
  background-color: transparent;
}

.otp-box-wrapper-error input {
  border: 1px solid red !important;
}

.otp-box-wrapper input::-webkit-inner-spin-button,
.otp-box-wrapper input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.otp-box-wrapper input::-ms-inner-spin-button,
.otp-box-wrapper input::-ms-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.otp-box-wrapper input::-moz-inner-spin-button,
.otp-box-wrapper input::-moz-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.otp-box-wrapper input:-moz-inner-spin-button,
.otp-box-wrapper input:-moz-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.otp-box-wrapper a {
  display: block;
  width: 100%;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  color: var(--main-primary-color);
  padding: 8px 0;
}
.varification-title {
  font-size: 16px;
  line-height: 23px;
  color: #4c4d63;
  font-weight: 200;
}
.varification-title span i {
  font-style: normal;
}
.previous-step-wrap {
  text-align: left;
  padding: 12px 0;
  margin-right: 12px;
}
.continue-btn-wrap {
  text-align: right;
}
/* Mobile Varification page end */

/* Merchent Selector page */
/* style the images */
div.merchant-wrap img {
  display: block;
  margin: 0;
  padding: 0;
  transition-duration: 300ms;
  transform: scale(1);
  filter: none;
  -webkit-filter: grayscale(1);
  cursor: pointer;
}
span.merchant-wrap.checked img {
  filter: gray;
  filter: grayscale(1);
  -webkit-filter: grayscale(0);
}

/* style the parent spans */
div.merchant-wrap {
  padding: 0;
  margin: 5px;
  display: inline-block;
  width: 100%;
  border: 1px solid transparent;
  transition-duration: 300ms;
  font-family: 'Font Awesome 5 Free';
  font-size: 12px;
}
div.merchant-wrap.checked {
  border-color: #ccc;
}

output.output,
span.output-text {
  display: inline-block;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  color: var(--main-primary-color);
}

.on-hover {
  height: 100%;
  display: block;
  background: white;
  border: 4px;
  border-style: solid;
  border-color: rgba(130, 135, 158, 0.14);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  position: relative;
  filter: grayscale(100%);
  color: #82879e;
  cursor: pointer;
}

.on-hover::after {
  color: #fff;
  font-size: 16px;
  position: absolute;
  top: -22px;
  right: -22px;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background: var(--main-primary-color);
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f00c';
  opacity: 0;
}

.on-hover:hover {
  border-color: var(--main-primary-color);
  border-radius: 8px;
  filter: grayscale(0);
  color: var(--main-primary-color);
}

.on-hover:hover img {
  filter: brightness(1) drop-shadow(0 0 2px var(--main-primary-color)) contrast(1.7);
  -webkit-filter: brightness(1) drop-shadow(0 0 2px var(--main-primary-color))
    contrast(1.7);
}

.on-hover:hover:after {
  opacity: 1;
}

.on-hover p {
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  padding: 12px 0 0;
}

.on-hover.selected {
  border-color: var(--main-primary-color);
  border-radius: 8px;
  filter: grayscale(0);
  color: var(--main-primary-color);
}
.on-hover.selected::after {
  opacity: 1;
}
.on-hover.selected img {
  filter: drop-shadow(0 0 4px var(--main-primary-color));
  -webkit-filter: drop-shadow(0 0 4px var(--main-primary-color));
}
/* Merchent selector page end */

/* Individual Information page */
.form-group .calendar-input-wrapper,
.custom-form-group .calendar-input-wrapper {
  position: relative;
  width: 100%;
}
.form-group .calendar-input-wrapper:after,
.custom-form-group .calendar-input-wrapper:after {
  content: '';
  position: absolute;
  top: 12px;
  right: 15px;
  width: 22px;
  height: 24px;
  background-image: url('/static/img/cal-icon.png');
  filter: grayscale(100%) drop-shadow(0 0 4px var(--main-primary-color));
  -webkit-filter: grayscale(100%) drop-shadow(0 0 4px var(--main-primary-color));
  background-repeat: no-repeat;
}
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('/static/img/down-arrow.svg') !important;
  filter: grayscale(100%) drop-shadow(0 0 4px var(--main-primary-color));
  -webkit-filter: grayscale(100%) drop-shadow(0 0 4px var(--main-primary-color));
  background-position: 95% center;
  background-repeat: no-repeat;
  color: #495057;
  font-size: 16px;
  line-height: 23px;
}
input.form-control {
  background-color: transparent;
}

/* css for plan select input in BankAccountSelection */
select.plan-select {
  background-position: 97% center;
}
/*Individual Information page end */

/* Company Information page */
.form-outer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 40px;
  width: 100%;
  max-width: 480px;
  text-align: left;
  /* overflow-x: hidden; */
}
/* .form-group div .input-group-text {
  border-radius: 4px 0 0 4px !important;
  font-size: 16px;
  font-weight: 200;
  line-height: 23px;
  color: #bec1cd;
  border-right: 0;
  background-color: #f5f5f7;
  background-image: linear-gradient(
    -180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.06) 100%
  );
  padding: 11px 30px;
} */
.web-link input {
  border-radius: 0 4px 4px 0 !important;
}
.main-body-wrapper .form-company-info {
  padding-bottom: 0;
  margin-bottom: 0;
  box-shadow: none;
}
#form-border {
  position: relative;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(
    90deg,
    rgba(130, 135, 158, 0.29),
    rgba(130, 135, 158, 0.29) 50%,
    transparent 75%,
    transparent 100%
  );
  background-size: 15px 1px;
  border: none;
  left: -75px;
  top: 0px;
}

.plus-btn {
  display: inline-block;
  width: 100%;
}
.add-owner-wrap {
  display: inline-block;
  width: 100%;
  text-align: right;
}
.add-owner-wrap .add-owner {
  padding: 10px 20px;
  text-align: center;
  border: 2px solid green;
  border-radius: 0.25rem;
  background-color: white;
  margin: 0px; /*decreased 30px*/
  display: inline-block;
}

.add-owner {
  padding: 12px 54px;
  text-align: center;
  border: 2px solid green;
  border-radius: 0.25rem;
  background-color: green;
}

.add-owner span {
  font-size: 15px;
  color: black;
  line-height: 23px;
  font-weight: 300;
}
.add-owner span i {
  font-size: 15px;
  margin-right: 15px;
  color: black;
}

div.remove-icon a {
  display: inline-block;
}
span.details-title {
  font-size: 14px;
  color: #82879e;
  line-height: 35px;
}
span.details-text {
  font-size: 16px;
  color: #24262b;
  letter-spacing: 0;
  line-height: 35px;
}
div.owner-detail {
  display: inline-block;
  width: 100%;
}
div.owner-detail h3 {
  float: left;
  width: auto;
  padding-top: 2px;
}
div.owner-detail .remove-icon {
  float: right;
  width: auto;
}
div.remove-icon a i {
  font-style: normal;
  font-size: 1.2rem;
  color: #82879e;
  line-height: unset;
}
.remove-icon a i:hover {
  /* color: red; */
  color: var(--main-contrast-color);
  border-width: 2px;
}

.verify-button:hover {
  background-color: var(--main-primary-color);
  color: var(--main-contrast-color);
  border-width: 2px;
}

/* Company Information page end */

/* Connect Bank Account page */
.connect-bank {
  display: inline-block;
  width: 100%;
  max-width: 194px;
  height: 193px;
  max-height: 193px;
  position: relative;
  background-image: url('/static/img/bg-img/bank-img.png');
  filter: grayscale(100%) drop-shadow(0 0 4px var(--main-primary-color));
  -webkit-filter: grayscale(100%) drop-shadow(0 0 4px var(--main-primary-color));
  margin-bottom: 15px;
}
/* Connect Bank Account page end */

/* Connected Bank Account */
.connected-accounts-wrapper {
  width: 100%;
  max-width: 630px;
  height: auto;
}
.connected-accounts-inner-wrapp {
  background: rgba(96, 127, 255, 0.05);
  margin: 25px 0;
  padding: 15px 25px 10px;
  border-radius: 8px;
  border: 1px solid;
  border-color: #f1f1f1;
  display: inline-block;
  width: 100%;
}
div.connected-accounts-inner-wrapp table {
  display: inline-block;
  width: 100%;
  padding: 10px 0;
}
div.connected-accounts-inner-wrapp div.connected-account-list-item {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  margin: 5px 0 0;
  background-color: #fcffff;
  border-radius: 5px;
}
div.connected-accounts-inner-wrapp td.connected-account-details {
  float: left;
  width: auto;
}
div.connected-accounts-inner-wrapp td.remove-account {
  float: right;
  font-size: 10px;
}
/* Connected Bank Account page end */

/* Select Payout page */
ul.payout-list {
  display: inline-block;
  width: 100%;
  height: auto;
}
ul li.payout-list-item {
  color: #fff;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  background: #f3f4f5;
  border-radius: 8px;
  margin: 0 0 16px;
  cursor: pointer;
}
ul li.payout-list-item:last-child {
  margin: 0;
}
ul.payout-list li input[type='radio'] {
  position: absolute;
  visibility: hidden;
}

li.payout-list-item label {
  padding: 25px 25px 25px 60px;
}
label div#selected-account-details {
  text-align: left;
}
div#account-number {
  /* margin: 0 0 8px; */
  display: inline-block;
}
#account-number p {
  font-size: 14px;
  color: #535a72;
  font-weight: 200;
  line-height: 20px;
}
#account-number span {
  font-size: 24px;
  color: #535a72;
  font-weight: 500;
  line-height: 28px;
}
#account-number i {
  font-size: 14px;
  color: var(--main-primary-color);
  line-height: 20px;
  font-weight: 300;
  font-style: normal;
  float: left;
}
#account-holder-details {
  padding-top: 20px;
  display: inline-block;
  width: 100%;
  word-break: break-all;
}
#account-holder-details span.account-holder-name {
  font-size: 18px;
  color: #535a72;
  line-height: 25px;
  font-weight: 400;
  margin: 5px 0 3px;
  display: inline-block;
  width: 100%;
  word-break: break-word;
}
#account-holder-details i {
  font-size: 14px;
  color: #535a72;
  line-height: 20px;
  font-weight: 200;
  font-style: normal;
  display: block;
}

.check {
  display: inline-block;
  border: 1px solid #bdc0cb;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  position: absolute;
  top: 28px;
  left: 20px;
}

.check::before {
  display: block;
  position: absolute;
  content: '';
  border-radius: 50%;
  height: 11px;
  width: 11px;
  top: 6px;
  left: 6px;
}

ul.payout-list li input[type='radio']:checked ~ .check::before {
  background: var(--main-primary-color);
}
/* Select Payout page end */

/* Provide Payout page */
div.ppa-radio-wrap {
  height: 50px;
  position: relative;
}
i.success-radio {
  top: 5px;
}
span.custom-control {
  display: inline-block;
  padding-left: 30px;
  cursor: pointer;
  margin-right: 15px;
}
span.custom-control:last-child {
  margin: 0;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  background-color: transparent;
}
.custom-control-label::before {
  height: 25px;
  width: 25px;
  background-color: #fff;
  border: 1px solid #bdc0cb;
  top: 0;
  left: 0;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: none;
  background-color: var(--main-primary-color);
  height: 11px;
  width: 11px;
  top: 7px;
  left: 7px;
  position: absolute;
  border-radius: 50%;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none;
}
span.custom-control label {
  font-size: 16px;
  color: #82879e;
  line-height: 23px;
  font-weight: 300;
  cursor: pointer;
}
/* Provide Payout page end */

/* Running Check page (Loading page) */
.main-body-wrapper .review-account.form-wrapper {
  max-width: 480px;
  margin: 100px auto 40px;
  padding: 60px 50px;
  color: #535a72;
  font-weight: 300;
  text-align: center;
  font-size: 18px;
}

.spinner {
  margin: 50px auto;
  text-align: center;
}
.spinner > div {
  width: 50px;
  height: 50px;
  background-color: var(--main-primary-color);
  border: 1px solid var(--main-primary-color-lighter);
  display: inline-block;
  -webkit-animation: sk-bouncedelay 2s infinite ease-in-out both;
  animation: sk-bouncedelay 2s infinite ease-in-out both;
  margin-right: 5px;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.spinner .bounce3 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.spinner .bounce4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.spinner .bounce4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  20% {
    opacity: 0.7;
  }
  40% {
    opacity: 0.8;
  }
  60% {
    opacity: 0.9;
  }
}

.main-body-wrapper .form-wrapper.congrats-content {
  text-align: center;
  font-size: 18px;
  color: #535a72;
  font-weight: 300;
  margin: 100px auto 40px;
}
.main-body-wrapper .form-wrapper.congrats-content {
  padding: 48px 40px;
}
.main-body-wrapper .form-wrapper.congrats-content h1 {
  margin: 0 0 10px 0;
}
.congrats-content .congrats-image {
  margin: 0 0 45px 0;
}
.congrats-content .congrats-image img {
  width: auto;
}
/* Running Check page (Loading page) end */

/* Privecy page */
.privacy-content {
  /* padding: 60px 0; */
  background: #ffffff;
}
.privacy-content h1 {
  margin: 0 0 45px 0;
}
.privacy-content h3 {
  color: #24262b;
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 16px 0;
  line-height: 1.3;
}
.privacy-content p {
  color: #82879e;
  font-size: 16px;
  line-height: 32px;
  padding: 0 0 30px 0;
  font-weight: 400;
  text-indent: 10px;
}
.privacy-content .count-span {
  color: #1c1c1c;
  font-size: 18px;
  font-weight: normal;
  float: left;
  text-indent: 0;
}
/* Privecy page end */

.vdatetime-input {
  color: #495057;
  border: none;
  width: 100%;
  padding: 5px 10px !important;
}

a {
  cursor: pointer;
}
#border-space {
  padding: 80px 0 0;
  position: relative;
}
#loading {
  width: 100%;
  display: inline-block;
  margin-top: 100px;
}
.otp-input {
  padding: 10px 10px !important;
}
.resendcode {
  color: black;
  font-size: 14px;
  font-weight: 300;
}

/* Anchor tag disable css */

a.disabled {
  pointer-events: none;
  cursor: default;
  color: #6c757d;
}

/* Modal css */

/* .modal-open .custom-modal{
    overflow-y: hidden;
} */
.custom-modal {
  margin: 0 15px;
  /* display: block; */
}
/* .custom-modal .modal-dialog{
    height: 100%;
    margin: 0 auto;
    padding: 30px 0;
}
.custom-modal .modal-dialog .modal-content{
    height: 100%;
}
.custom-modal .modal-body{
    height: 100%;
    overflow: auto;
    text-align: left;
}
.modal-content .close-custom{
    padding: 8px 10px 0;
}
.modal-content .close-custom span{
    font-size: 45px;
    line-height: 1;
    font-weight: 200;
} */
.custom-modal.show {
  display: flex !important;
  justify-content: center;
  align-items: center;
  align-items: center;
}
.custom-modal .modal-body {
  overflow-y: scroll;
  height: 60vh;
}
#form-border-wrap {
  display: inline-block;
  width: calc(150px + 100%);
  position: relative;
  margin: 0 0 50px;
}
.hello {
  margin-top: -40px !important;
}
.connect-btn-wrap {
  text-align: center;
}
.connect-btn-wrap .add-owner {
  padding: 10px 0;
  width: 265px;
}
#captcha-wrapper {
  min-height: 88px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-top: 20px;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  margin: 0;
}
input[type='number']::-ms-inner-spin-button,
input[type='number']::-ms-outer-spin-button {
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  margin: 0;
}
input[type='number']::-moz-inner-spin-button,
input[type='number']::-moz-outer-spin-button {
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  margin: 0;
}
input[type='number']:-moz-inner-spin-button,
input[type='number']:-moz-outer-spin-button {
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
}
.range-wrap {
  height: 110px;
}
.vue-slider-horizontal {
  padding: 11px 0 !important;
}
.alert-danger i {
  color: red;
}

.diy-tooltip {
  position: relative;
}
/* .diy-tooltip b{position: absolute;left: 3px;top: 0;background-color:#ABABAB;width: 6px;height: 6px;} */
.diy-tooltip span {
  position: absolute;
  left: 0px;
  top: -30px;
  font-size: 12px;
}

.range-dvdr {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.range-dvdr span {
  font-size: 14px;
  color: var(--main-primary-color);
  line-height: 1;
}

input[type='date']:before {
  content: attr(placeholder) !important;
  color: #aaa;
}

.hyper input {
  border: 1px;
  border-style: solid;
  border-color: #ced4da;
  border-right: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 30px;
  font-size: 14px;
  border-radius: 4px 0 0 4px !important;
  color: #495057;
}
select.hyper:focus {
  outline: none;
}

.custom-date-input input::-webkit-clear-button,
.custom-date-input input::-ms-clear-button,
.custom-date-input input::-moz-clear-button,
.custom-date-input input:-moz-clear-button {
  display: none;
}
.custom-date-input::-webkit-calendar-picker-indicator,
.custom-date-input::-ms-calendar-picker-indicator,
.custom-date-input::-moz-calendar-picker-indicator,
.custom-date-input:-moz-calendar-picker-indicator {
  font-size: 12px;
}

.custom-date-input input[type='date']::-webkit-inner-spin-button,
.custom-date-input input[type='date']::-ms-inner-spin-button,
.custom-date-input input[type='date']::-moz-inner-spin-button,
.custom-date-input input[type='date']:-moz-inner-spin-button {
  display: none;
}

.edit-button {
  height: 32px;
  width: 44px;
  font-size: 13px;
  padding: 0;
}
.terms-section-title {
  text-align: initial;
  margin-bottom: 10px;
}
.terms-section-item {
  margin-bottom: 7px;
}
.terms-sub-section-title {
  margin-left: 14px;
  font-weight: bold;
}
.terms-li {
  margin-left: 30px;
  list-style: disc;
  text-indent: 0;
  color: #82879e;
}

.save-and-exit {
  margin-top: 4px;
  font-size: 13px;
  text-decoration: underline !important;
  font-weight: 300;
}

/* .select-primary.el-select .el-input input {
    height: 48px;
} */
.select-primary .el-input.is-disabled .el-input__inner {
  color: #474a52;
}
.select-primary.el-select.error-brdr .el-input input {
  background: rgba(249, 249, 252, 0.48);
  border-color: #ff151f !important;
}
.select-primary.el-select.error-brdr .el-input i::after,
.select-primary.el-select.error-brdr .el-input i::before {
  content: none;
}

.select-primary.el-select.success-brdr .el-input input {
  background: rgba(249, 249, 252, 0.48);
  border-color: #4fce3e !important;
}
.select-primary.el-select.success-brdr .el-input i::after,
.select-primary.el-select.success-brdr .el-input i::before {
  content: none;
}

.mx-input {
  height: 40px !important;
  border-color: rgba(29, 37, 59, 0.5);
  border-radius: 4px !important;
  background-color: transparent;
}

.iti {
  width: 100%;
}

/* weelcome page */

.continue-p-btn button {
  padding: 11px 30px !important;
  background-color: var(--main-contrast-color);
  border: 2px solid var(--main-primary-color);
  color: var(--main-primary-color);
  font-size: 16px;
  line-height: 23px;
  font-weight: normal;
}

.sendsms-btn button {
  padding: 12px 55px !important;
  background-color: var(--main-primary-color);
  color: #fff;
  font-size: 16px;
  line-height: 23px;
  font-weight: normal;
}

.few-m {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 30px;
  color: #82879e;
}

.continue-button {
  max-width: 480px;
  width: 100%;
  background-color: var(--main-primary-color, unset);
  border-color: var(--main-primary-color-lighter, unset);
  color: var(--titles-color);
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 4px;
  box-shadow: none;
  margin-top: 20px;
  position: relative;
}

.continue-button::before {
  content: '\f061';
  font-family: 'Font Awesome 5 Free';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 900;
  color: var(--titles-color);
}

.continue-button:hover,
.continue-button:focus,
.continue-button:active,
.continue-button.active {
  background-color: var(--main-primary-color-darker, unset) !important;
  border-color: var(--main-primary-color-darker, unset) !important;
  color: var(--titles-color) !important;
}

.continue-button:disabled {
  background-color: var(--main-primary-color-darker, unset) !important;
  border-color: var(--main-primary-color-darker, unset) !important;
  color: var(--titles-color);
}

.prev-app-button {
  background-color: #fff;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 100px;
  max-height: 36px;
  padding: 12px 10%;
  font-size: 14px;
  line-height: 12px;
  margin-top: 15px;
  cursor: pointer;
  outline: none;
}

.prev-app-button:hover {
  background-color: #f2f2f2;
  color: #333;
}

.prev-app-button:disabled {
  background-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}

.form-content {
  position: relative;
  overflow: hidden;
  flex-wrap: nowrap;
  max-height: calc(100vh - 435px);
  padding-right: 66px;
  width: calc(100% + 65px);
  margin-bottom: -7px !important;
}
.form-content::after {
  content: '';
  position: sticky;
  bottom: 0;
  width: 100%;
  min-height: 100px;
  margin-top: -100px;
  background: linear-gradient(to bottom, transparent, #fdfcfc);
  pointer-events: none;
}

/* Refined Perfect Scrollbar Styles for Cupertino Appearance */

.ps__rail-y,
.ps__rail-x {
  width: 8px !important;
  /* height: 8px !important; */
  /* background: transparent; */
  opacity: 1 !important;
  border-radius: 4px;
  overflow: visible;
}

.ps__rail-y {
  z-index: 2;
  right: 0px;
}
/* .ps__rail-y:hover,
.ps__rail-y:focus,
.ps__rail-y.ps--clicking {
  /* background-color: transparent !important; */
/* }  */

.ps__rail-x {
  bottom: 2px;
}

.ps__thumb {
  z-index: 2;
  background: rgba(100, 100, 100, 0.5);
  border-radius: 4px;
  opacity: 1 !important;
  transition:
    transform 0.1s ease,
    right 0.1s ease,
    background-color 0.3s ease,
    bottom 0.1s ease;
}

.ps__thumb-y {
  width: 6px; /* Slightly narrower than the rail */
  right: 0px !important; /* Center in the rail */
}

.ps__thumb-x {
  height: 6px; /* Slightly narrower than the rail */
  bottom: 1px; /* Center in the rail */
}

/* .ps__rail-y:focus > .ps__thumb-y */

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking > .ps__thumb-y {
  background: rgba(100, 100, 100, 0.7);
  width: 8px !important;
}

.ps__thumb-y:hover {
  background: rgba(100, 100, 100, 0.7);
  /* right: 0; */
}

.ps__rail-x:hover > .ps__thumb-x {
  background: rgba(100, 100, 100, 0.7);
}

.ps__thumb-x:hover {
  background: rgba(100, 100, 100, 0.7);
  /* bottom: 0; */
}