@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');


/*universal style*/
body
{
	font-family: "Inter";
}
h1,h2,h3,h4,h5,h6,p
{
	margin-bottom: 0;
}
.display-1 {
  font-size: calc(1.625rem + 4.5vw);
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-1 {
    font-size: 5rem;
  }
}

.display-2 {
  font-size: calc(1.575rem + 3.9vw);
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-2 {
    font-size: 4.5rem;
  }
}

.display-3 {
  font-size: calc(1.525rem + 3.3vw);
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}

.display-4 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-4 {
    font-size: 3.5rem;
  }
}

.display-5 {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}

.display-6 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}
.fs-1 {
  font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-2 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-3 {
  font-size: calc(1.26rem + 0.12vw) !important;
}

.fs-4 {
  font-size: 1.25rem !important;
}

.fs-5 {
  font-size: 1.15rem !important;
}

.fs-6 {
  font-size: 1.075rem !important;
}

.fs-7 {
  font-size: 0.95rem !important;
}

.fs-8 {
  font-size: 0.85rem !important;
}

.fs-9 {
  font-size: 0.75rem !important;
}

.fs-10 {
  font-size: 0.5rem !important;
}

.fs-sm {
  font-size: 0.95rem !important;
}

.fs-base {
  font-size: 1rem !important;
}

.fs-lg {
  font-size: 1.075rem !important;
}

.fs-fluid {
  font-size: 100% !important;
}

.fs-2x {
  font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-2qx {
  font-size: calc(1.35rem + 1.2vw) !important;
}

.fs-2hx {
  font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2tx {
  font-size: calc(1.4rem + 1.8vw) !important;
}

.fs-3x {
  font-size: calc(1.425rem + 2.1vw) !important;
}

.fs-3qx {
  font-size: calc(1.45rem + 2.4vw) !important;
}

.fs-3hx {
  font-size: calc(1.475rem + 2.7vw) !important;
}

.fs-3tx {
  font-size: calc(1.5rem + 3vw) !important;
}

.fs-4x {
  font-size: calc(1.525rem + 3.3vw) !important;
}

.fs-4qx {
  font-size: calc(1.55rem + 3.6vw) !important;
}

.fs-4hx {
  font-size: calc(1.575rem + 3.9vw) !important;
}

.fs-4tx {
  font-size: calc(1.6rem + 4.2vw) !important;
}

.fs-5x {
  font-size: calc(1.625rem + 4.5vw) !important;
}

.fs-5qx {
  font-size: calc(1.65rem + 4.8vw) !important;
}

.fs-5hx {
  font-size: calc(1.675rem + 5.1vw) !important;
}

.fs-5tx {
  font-size: calc(1.7rem + 5.4vw) !important;
}

.fs-6x {
  font-size: calc(1.725rem + 5.7vw) !important;
}

.fs-6qx {
  font-size: calc(1.75rem + 6vw) !important;
}

.fs-6hx {
  font-size: calc(1.775rem + 6.3vw) !important;
}

.fs-6tx {
  font-size: calc(1.8rem + 6.6vw) !important;
}

.fs-7x {
  font-size: calc(1.825rem + 6.9vw) !important;
}

.fs-7qx {
  font-size: calc(1.85rem + 7.2vw) !important;
}

.fs-7hx {
  font-size: calc(1.875rem + 7.5vw) !important;
}

.fs-7tx {
  font-size: calc(1.9rem + 7.8vw) !important;
}

.fst-italic {
  font-style: italic !important;
}

.fst-normal {
  font-style: normal !important;
}

.fw-lighter {
  font-weight: lighter !important;
}

.fw-light {
  font-weight: 300 !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 500 !important;
}

.fw-bold {
  font-weight: 600 !important;
}

.fw-bolder {
  font-weight: 700 !important;
}



.language_bar {
  position: relative;
  right: 0;
  top: 0px;
}
input#rememberMe {
  width: auto !important;
  margin-right: 10px !important;
}

.m-login__forget-password .m-login__form-action {
  margin: 32px 0px !important;
}

.language-flag-size {
  width: 35px;
}

.registration-form
{
	min-height: 100vh;
	max-width: 100vw;
	overflow: clip !important;
}

/*shapes*/
.shapes-top
{
	position: absolute;
	top: 0;
	right: 0;
}
.shapes-bottom
{
	position: absolute;
	bottom: 0;
	right: 0;
}

.reg-line {
  height: 2px;
  background: #79b906 !important;
}
.reg-primary-color {
  color: #79b906 !important;
}
.duration-box {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 325px;
  width: 300px;
  position: relative;
  border: 2px solid #b4d4e4;
  padding: 20px !important;
}
.duration-option .checkbox-circle-tick {
  position: absolute;
  top: 15px;
  right: 45px;
}

.duration-option .d-checkbox {
  display: none;
}
.duration-option .d-checkbox:checked ~ .duration-box {
  border: 2px solid #01274e;
  -webkit-box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.27);
  box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.27);
}

.main-head{
  height: 150px;
  background: #FFF;
 
}

.sidenav {
  height: 100%;
  background-color: #000;
  overflow-x: hidden;
  padding-top: 20px;
}


.main {
  padding: 0px 10px;
}


.login-main-text{
  margin-top: 20%;
  padding: 60px;
  color: #fff;
}


@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
}

@media screen and (max-width: 450px) {
  .login-form{
      margin-top: 10%;
  }

  .register-form{
      margin-top: 10%;
  }
}

@media screen and (min-width: 768px){
  .main{
      margin-left: 40%; 
  }

  .sidenav{
      width: 30%;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: transparent;
background-image: url(/../assets/images/banner.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: contain;
  }

  .login-form{
      margin-top: 20%;
  }

}
.m-wizard.m-wizard--1.m-wizard--success .m-wizard__progress .progress .progress-bar:after {
  background-color: transparent;
}
.m-wizard.m-wizard--1 .m-wizard__head .m-wizard__progress .progress .progress-bar:after {
  content: '';
  display: block;
  position: absolute;
  width: 1.3rem;
  height: 1.3rem;
  right: -0.65rem;
  border-radius: 50%;
  z-index: 1;
  top: -0.3rem;
}
.bg-warning {
  background-color: #00354a !important;
}

.m-wizard.m-wizard--1.m-wizard--success .m-wizard__steps .m-wizard__step.m-wizard__step--done .m-wizard__step-info .m-wizard__step-number>span {
  background-image: radial-gradient(#7cc100, #60a30f) !important;
}
.m-wizard.m-wizard--1.m-wizard--success .m-wizard__steps .m-wizard__step.m-wizard__step--current .m-wizard__step-info a.m-wizard__step-number:hover>span {
  background-image: radial-gradient(#7cc100, #60a30f) !important;
}
/*sidebar*/
.sidebar
{
	background-color: transparent;
	background-image: url({{SIDEBANNER1}});
	background-repeat: no-repeat;
	background-attachment: fixed;
  background-size: contain; 

}
.sidebar-inner
{
	position: sticky;
	top: 0;
	min-height: 100vh;

}
.wrapper
{
	box-sizing: border-box;
	padding: 100px 50px 50px 100px;
	width: 100%;
}

/*sidebar-text*/ 
.sidebar-text h2
{

  font-size: 55px;
  color: rgb(225, 225, 225);
  font-weight: bold;

}
.sidebar-text p
{

  font-size: 18px;
  font-family: "Inter";
  color: rgb(225, 225, 225);
  margin-top: 30px;
  width: 85%;
  font-weight: 300;

}


::-webkit-scrollbar {
    width: 8px;
  }
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  } * {
margin: 0;
padding: 0;
}






.m-wizard.m-wizard--1 .m-wizard__head .m-wizard__nav .m-wizard__steps .m-wizard__step .m-wizard__step-line>span {

  width: 1rem !important;
}

.m-wizard.m-wizard--1.m-wizard--success .m-wizard__steps .m-wizard__step.m-wizard__step--current .m-wizard__step-info .m-wizard__step-number>span {
  background-image: radial-gradient(#7cc100, #60a30f) !important;
}
.m-form .form-control-label, .m-form label {
  font-weight: 500;
  font-size: 15px;
}
.form-control.focus, .form-control:focus {
 border-color: #7dc187 !important;
}
.btn {
  font-family: "Inter";
}
.form-control{
  font-size: 16px !important;
}
input.form-control {
  height: 50px !important;
}
.btn-black{
  background: #111; 
}

.action-btn{
  width: 150px;
 background-image: linear-gradient(93deg, #4b7404, #79b906) !important;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 5px;
  cursor: pointer;
  padding: 20px 5px;
  font-size: 18px !important;
}

.btn-dark{
  width: 150px;
  background-image: linear-gradient(93deg, #4b7404, #79b906) !important;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 5px;
  cursor: pointer;
  padding: 20px 5px;
  font-size: 18px !important;
}













/*FieldSet headings*/
.fs-title {
font-size: 25px;
color: #b79720;
margin-bottom: 15px;
font-weight: normal;
text-align: left;
}

.form-control.m-input--square {
  border-radius: 4px;
  height: 50px !important;
}

.form-control[readonly], .form-control {
  border-color: #cdcdcd;
  color: #575962;
}

input.form-control.m-input {
  height: 50px !important;
}


.input-group {
  height: 50px !important;
}

.purple-text {
color: #b79720;
font-weight: normal;
}

/*Step Count*/
.steps {
font-size: 25px;
color: gray;
margin-bottom: 10px;
font-weight: normal;
text-align: right;
}

/*Field names*/
.fieldlabels {
color: gray;
text-align: left;
}

/*Icon progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
color: lightgrey;
}

#progressbar .active {
color: #b79720;
}

#progressbar li {
list-style-type: none;
font-size: 15px;
width: 25%;
float: left;
position: relative;
font-weight: 400;
}

/*Icons in the ProgressBar*/
#progressbar #account:before {
font-family: FontAwesome;
content: "\f13e";
}

#progressbar #personal:before {
font-family: FontAwesome;
content: "\f007";
}

#progressbar #payment:before {
font-family: FontAwesome;
content: "\f030";
}

#progressbar #confirm:before {
font-family: FontAwesome;
content: "\f00c";
}

/*Icon ProgressBar before any progress*/
#progressbar li:before {
width: 50px;
height: 50px;
line-height: 45px;
display: block;
font-size: 20px;
color: #ffffff;
background: lightgray;
border-radius: 50%;
margin: 0 auto 10px auto;
padding: 2px;
}

/*ProgressBar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: lightgray;
position: absolute;
left: 0;
top: 25px;
z-index: -1;
}

/*Color number of the step and the connector before it*/
#progressbar li.active:before, #progressbar li.active:after {
background: #b79720;
}

/*Animated Progress Bar*/
.progress {
height: 10px;
}

.progress-bar {
background-color: #b79720;
}

/*Fit image in bootstrap div*/
.fit-image{
width: 100%;
object-fit: cover;
}


/*contact-info*/
.contact-info
{
	margin: 40px 0px;
}
.contact-info-inner
{
	margin-bottom: 20px;
	display: flex;
}
.contact-info .contact-icon
{
  background-color: rgb(25, 25, 27);
  width: 55px;
  height: 55px;
  text-align: center;
  line-height: 62px;

}
.contact-info .contact-icon i
{
	font-size: 24px;
	color: rgb(255,255,255);
}

/*rotate phone icon*/
.fa-rotate-by
{
	    --fa-rotate-angle: -45deg;
}
.contact-info .contact-details
{
	width: auto;
	margin-left: 20px;
	color: rgb(255, 255, 255);
}
.contact-info .contact-details p
{
  font-size: 19px;
  font-weight: bold;
  margin-bottom: 0;

}
.contact-info .contact-details h6
{
  font-size: 22px;
  font-weight: 300;

}
.contact-info button
{
  margin-top: 20px;
  border-radius: 32px;
  background: transparent;
  font-size: 17px;

      font-weight: bold;
  position: relative;
    transition: all .5s ease;
    background-color: rgb(25, 25, 27);
    border: 0;
  z-index: 0;
  color: rgb(255, 255, 255);
  padding: 15px 30px;
  overflow: hidden;

}
.contact-info button:before
{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-image: linear-gradient(90deg, transparent, #fff, transparent);
    transition: 0.5s ease;
}
.contact-info button:hover:before
{
    left: 100%;
}

/*registration-form*/
.registration-form-inner
{
	background-color: rgb(255, 255, 255);
	position: relative;

}

.registration-inner {
  height: 100vh;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
}
.registration-form-inner .wrapper
{
	padding: 100px;

}

/*main-heading*/
.main-heading
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: rgb(22, 40, 63);
}
.main-heading h1
{
  font-size: 45px;
  font-weight: bold;
}
.main-heading p
{
	margin-bottom: 0;
  font-size: 16px;
  font-weight: bold;
}
.main-heading p a
{
	color: #7650e0;
}


/*form*/
.form-inner
{
	margin-top: 60px;
}
.form-inner h3
{
  font-size: 30px;
  color: rgb(22, 40, 63);
  font-weight: bold;
  position: relative;
  margin-left: 30px;
  margin-bottom: 40px;
}
.end_border
{
	border-bottom: solid 1px rgb(218, 218, 218);
	margin-top: 30px;
	padding-bottom: 30px;
}
.form-inner h3::before
{
	content: "*";
	position: absolute;
	top: 0;
	left: -30px;
	color: inherit;
}

/*form label*/
.form-inner label
{
	display: block;
	margin-bottom: 5px;
	margin-left: 40px;
	transition: 0.5s ease;
	top: 0;
	width: fit-content;
  font-size: 16px;
  color: rgb(114, 114, 114);
  font-weight: bold;
}


/*form input-field*/
.input-field
{
	width: 100%;
		transition: 0.5s;
  height: 65px;
  position: relative;
  margin-bottom: 20px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

/*form field style*/
.input-field input, .input-field select
{
  border-radius: 30px;
  border: solid 2px rgb(229, 229, 229);
  background-color: rgb(255, 255, 255);
  display: block;
  padding-left: 40px;
 	transition: 0.5s ease;
  width: inherit;
  height: inherit;
  font-size: 15px;
  font-family: "Inter";
  color: rgb(178, 178, 178);
  margin-bottom: 15px;
  position: relative;
}
.input-field select
{
	-webkit-appearance: none;
	  position: relative;
	  cursor: pointer;
	  z-index: 0;
	  background: transparent;
}


/*form select field dropdown button*/
.input-field select+span::after
{

  font-family: "Font Awesome 5 Free";
  font-size: 12px;
  font-weight: bold;
  color: rgb(178, 178, 178);
  line-height: 30px;
  content: "\f107";
  text-align: center;
  border-radius: 50%;
  background-color: rgb(236, 236, 236);
  pointer-events: none;
  width: 30px;
  height: 30px;
  position: absolute;
  right: calc(0px + 15px);
  top: 26%;
  cursor: pointer;
  z-index: 0;
}
.input-field input[type=number]
{
	  	-webkit-appearance: none;
}


/*on focus style*/
.focused label
{
	color: rgb(255,255,255);
	background-color: rgb(118, 80, 224);
	padding-left: 15px;
	padding-right: 15px;
  border-radius: 12px;
  width: fit-content;
  position: relative;
  top: 12px;
  z-index: 1;
}
.focused input:focus,.focused select:focus
{
  border: solid 2px rgb(118, 80, 224);
  box-shadow: 0px 1px 29px 0px rgba(1, 1, 1, 0.09);
  outline: none;

}

.focused .input-field input+span:before, .focused .input-field select+span:before
{
	font-family: "Font Awesome 5 Free";
	font-size: 12px;
	font-weight: bold;
  color: rgb(255, 255, 255);
  line-height: 33px;
  text-align: center;
  border-radius: 50%;
  background-color: rgb(118, 80, 224);
  width: 33px;
  height: 33px;
	position: absolute;
	left: -16.5px;
	top: 25%;
	z-index: 10;
}
.focused select+span::after
{
	background-color: rgb(118, 80, 224);
	color: rgb(255,255,255);
}


/*password-field eye-icon*/
.input-field .toggle-icon
{
	position: absolute;
	top: 40%;
	cursor: pointer;
	right: 20px;
  font-size: 16px;
  color: rgb(104, 104, 104);

}

/*password meter*/
.pass-strength
{
	line-height: 0;
	text-align: center;
	background-color: rgb(241, 241, 241);
  width: 300px;
  margin: 0px auto;
  transition: 0.5s  ease;
  height: 3px;
}
.pass-strength span
{
	background-color: rgb(120, 197, 115);
	height: inherit;
	z-index: 1;
	display: inherit;
	transition: 0.5s  ease;
	width: 0;
}

/*pass-strength*/
.pass-check 
{
	margin-top: 20px;
	margin-bottom: 20px;
}
.pass-check span
{
	display: block;
  font-size: 15px;
  color: rgb(114, 114, 114);
  font-weight: bold;
  margin: 10px 0;
}
.pass-check span i
{
	margin-right: 20px;
}
.pass-check .fa-check
{
	color: #78c573;
}
.pass-check .fa-xmark
{
	color: #ff4444;
}

/*on focus before icons*/
.focused .input-field input[type=text]+span:before
{
		content: "\f007";
}
.focused .input-field input[type=email]+span:before
{
	content: "\f0e0";
}
.focused .input-field input[type=tel]+span:before
{
	content: "\f095";
}
.focused .input-field input[name=reg-num]+span:before
{
	content: "\f02a";
}
.focused .input-field select+span:before
{
	content: "\f57d";
}
.focused .input-field input[type=number]+span:before
{
	content: "\23";
}
.focused .input-field input[type=password]+span:before
{
	content: "\f084";
}


/*registration button/terms notification*/
.register-field
{
	margin-top: 30px;

}
.register-field label
{
  font-size: 16px;
  color: rgb(22, 40, 63);
  cursor: pointer;
  font-weight: bold;
  display: flex;
  width: 50%;
  margin-left: 40px;

}
.register-field .label-text
{
	margin-left: 10px;
}
.register-field .label-input
{
	margin-top: 5px;
}
.register-field .label-input input[type=checkbox]
{
  -webkit-appearance: none;
  border: solid 2px rgb(231, 231, 231);
  background-color: rgb(255, 255, 255);
  height: 20px;
  cursor: pointer;
  position: relative;
  width: 20px;
}
.register-field .label-input input[type=checkbox]:checked
{

	border:  solid 2px rgb(118, 80, 224);
}
.register-field .label-input input[type=checkbox]:checked::before
{
	position: absolute;
	content: "\f00c";
	background-color: rgb(118, 80, 224);
	width: 100%;
	height: 100%;
		font-family: "Font Awesome 5 Free";
	font-size: 12px;
	text-align: center;
	font-weight: bold;
	color: #fff;
}

.register-field label a
{
	text-decoration: none;
	color: rgb(118, 80, 224);
}
.btn-reg
{
border-radius: 0px;
  background: #b79720;
  border: 0;
  padding: 15px 40px;
  margin-left: 18px;
  font-size: 18px;
  color: #fff;
  height: 55px;
}
.reg-btn button
{
	border-radius: 33px;
  background-color: rgb(118, 80, 224);
  width: 100%;
  height: 100%;
  font-size: 20px;
  position: relative;
  overflow: hidden;
  color: rgb(255, 255, 255);
  border: solid 2px transparent;
  font-weight: bold;
}
.btn-reg:hover{
  background: #111 !important;
  color: #fff !important;
}
.sticky-xl-top {
  top: 30px !important;
}

.form-check-input:checked {
  background-color: #111;
  border-color: transparent !important;
}
.form-check-input[type=checkbox] {
  border-radius: 0px !important;
}
input.form-check-input {
  border: 2px solid #01274e !important;
}

.rounded-pill{
  border-radius: 100rem !important;
}

label {
  font-size: 15px;
  font-weight: 500;
}




.testimonial-carousel .owl-dots {
  position: absolute;
  bottom: -50px;
  right: 0;
}
.testimonial-carousel .owl-dots .owl-dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  margin-left: 10px;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  outline: none;
}
.testimonial-carousel .owl-dots .owl-dot.active {
  background: #ffffff;
}
img.q-img {
  width: 50px !important;
}
.copyright{
  bottom: 10px;
  margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}
.border-reg {
  border: 2px solid #79b906 !important;
}


.m-form__section a {
    color: #406877!important;
}




#sub img
{
    width: 60px;
}

.highlight
{
    border-top: solid 3px var(--primary-color) !important;
    border-bottom: solid 3px var(--primary-color) !important;

}


#error
{
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 20;
}


.invalid
{
  border: solid 2px #ff4444 !important;
  position: relative;
}
#m_wizard {
    width: 100% !important;
}
.m-dropdown .m-dropdown__wrapper.languageflag .m-dropdown__body {
    overflow: auto;
    height: 435px !important;
}
.container-1 {
    width: 100%;
    max-width: 400px;
    max-height: 251px;
    height: 54vw;
    padding: 20px;
}

/* reg header css */
.payment-title {
  width: 100%;
  text-align: center
}

#m_wizard {
width: 100% !important;
}
.mlm_package {
text-align: center;
border: 3px solid #b79720;
margin-top: 30px;
padding: 20px !important;
border-radius: 4px
}

.mlm_package img {
margin-bottom: 15px
}

.mlm_package h2 {
color: #0e1e39;
font-weight: 500;
margin-bottom: 10px;
text-transform: uppercase
}

.mlm_package p {
color: #0e1e39;
font-size: 14px;
font-weight: 500;
padding-bottom: 0
}

.mlm_package button {
background: #0e1e39;
width: 80%;
border: none;
color: #fff;
border-radius: 4px;
padding: 12px 10px;
margin-top: 20px;
transition: .5s all
}

.mlm_package button:hover {
background: #b79720
}

.mlm_package img {
margin-bottom: 15px;
width: 90px;
display: inline-block;
vertical-align: middle
}
.mlm_package h2 {
color: #0e1e39;
font-weight: 500
}

.form-container .field-container:first-of-type {
  grid-area: name
}

.form-container .field-container:nth-of-type(2) {
  grid-area: number
}

.form-container .field-container:nth-of-type(3) {
  grid-area: expiration
}

.form-container .field-container:nth-of-type(4) {
  grid-area: security
}

.field-container input {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.field-container {
  position: relative
}

.form-container {
  grid-column-gap: 10px;
  grid-template-columns: auto auto;
  grid-template-rows: 90px 90px 90px;
  grid-template-areas: "name name" "number number" "expiration security";
  max-width: 400px;
  padding: 20px;
  color: #707070
}

label {
  padding-bottom: 5px;
  font-size: 13px
}

input {
  margin-top: 0px !important;
  padding: 7px;
  font-size: 16px;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #dcdcdc
}

input#rememberMe {
  width: auto !important;
  margin-right: 10px !important;
}


select.form-control.m-input {
  height: 50px !important;
}

select {
  height: 50px !important;
}

.ccicon {
  height: 38px;
  position: absolute;
  right: 1px;
  top: calc(50% - 1px);
  width: 60px
}

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important
}


#ccsingle {
  position: absolute;
  right: 15px;
  top: 20px
}

#ccsingle svg {
  width: 100px;
  max-height: 60px
}

.creditcard svg#cardback,
.creditcard svg#cardfront {
  width: 100%;
  -webkit-box-shadow: 1px 5px 6px 0 #000;
  box-shadow: 1px 5px 6px 0 #000;
  border-radius: 22px
}

#generatecard {
  cursor: pointer;
  float: right;
  font-size: 12px;
  color: #fff;
  padding: 2px 4px;
  background-color: #909090;
  border-radius: 4px;
  cursor: pointer;
  float: right
}

.creditcard .darkcolor,
.creditcard .lightcolor {
  -webkit-transition: fill .5s;
  transition: fill .5s
}

.creditcard .lightblue {
  fill: #03a9f4
}

.creditcard .lightbluedark {
  fill: #0288d1
}

.creditcard .red {
  fill: #ef5350
}

.creditcard .reddark {
  fill: #d32f2f
}

.creditcard .purple {
  fill: #ab47bc
}

.creditcard .purpledark {
  fill: #7b1fa2
}

.creditcard .cyan {
  fill: #26c6da
}

.creditcard .cyandark {
  fill: #0097a7
}

.creditcard .green {
  fill: #66bb6a
}

.creditcard .greendark {
  fill: #388e3c
}

.creditcard .lime {
  fill: #d4e157
}

.creditcard .limedark {
  fill: #afb42b
}

.creditcard .yellow {
  fill: #ffeb3b
}

.creditcard .yellowdark {
  fill: #f9a825
}

.creditcard .orange {
  fill: #ff9800
}

.creditcard .orangedark {
  fill: #ef6c00
}

.creditcard .grey {
  fill: #bdbdbd
}

.creditcard .greydark {
  fill: #616161
}

#svgname {
  text-transform: uppercase
}

#cardfront .st2 {
  fill: #fff
}

#cardfront .st3 {
  font-family: 'Source Code Pro', monospace;
  font-weight: 600
}

#cardfront .st4 {
  font-size: 54.7817px
}

#cardfront .st5 {
  font-family: 'Source Code Pro', monospace;
  font-weight: 400
}

#cardfront .st6 {
  font-size: 33.1112px
}

#cardfront .st7 {
  opacity: .6;
  fill: #fff
}

#cardfront .st8 {
  font-size: 24px
}

#cardfront .st9 {
  font-size: 36.5498px
}

#cardfront .st10 {
  font-family: 'Source Code Pro', monospace;
  font-weight: 300
}

#cardfront .st11 {
  font-size: 16.1716px
}

#cardfront .st12 {
  fill: #4c4c4c
}

#cardback .st0 {
  fill: none;
  stroke: #0f0f0f;
  stroke-miterlimit: 10
}

#cardback .st2 {
  fill: #111
}

#cardback .st3 {
  fill: #f2f2f2
}

#cardback .st4 {
  fill: #d8d2db
}

#cardback .st5 {
  fill: #c4c4c4
}

#cardback .st6 {
  font-family: 'Source Code Pro', monospace;
  font-weight: 400
}

#cardback .st7 {
  font-size: 27px
}

#cardback .st8 {
  opacity: .6
}

#cardback .st9 {
  fill: #fff
}

#cardback .st10 {
  font-size: 24px
}

#cardback .st11 {
  fill: #eaeaea
}

#cardback .st12 {
  font-family: 'Rock Salt', cursive
}

#cardback .st13 {
  font-size: 37.769px
}

.container {
  perspective: 1000px
}

.creditcard {
  width: 100%;
  max-width: 400px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: -webkit-transform .6s;
  -webkit-transition: -webkit-transform .6s;
  transition: transform .6s;
  transition: transform .6s, -webkit-transform .6s;
  cursor: pointer
}

.creditcard .back,
.creditcard .front {
  position: absolute;
  width: 100%;
  max-width: 400px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  color: #47525d
}

.creditcard .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg)
}

.creditcard.flipped {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg)
}

.form-container label {
  padding-top: 11px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.form-container input {
  background: #f5f7f9;
}

.exp-date {
  width: 48%;
  float: left;
}

.sec-code {
  width: 48%;
  float: right;
}

.m-form .form-control-feedback {
  color: #f4516c;
}

img.brand-logo-new {
padding-top: 45px !important;
padding-left: 30px !important;
}

button#m_login_forget_password_cancel {
  font-size: 18px !important;
  border-radius: 0px !important;
}