html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit; scrollbar-width: thin;}
#E404{width: 500px; overflow: hidden;}
#E404 .ERobot{display: none;}
body{margin: 0; font-family: d_din;}
a, a:link, a:visited, a:active { color: #aaaaaa; text-decoration: none; font-size: 10px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #aaaaaa; }
img {border: none;}
input[type='button']{border:none;}
.topBar{width:500px; background: #fff; position:fixed; z-index: 9; top:0; left:50%; transform: translateX(-50%); height: 45px; border-bottom: 1px solid #f2f2f2; margin: 0 auto; box-shadow:0 2px 10px -6px silver;}
.topBar img{width:25px; margin:10px 10px 0 20px; float: left;}
.topBar span{margin:0; float:left; font-size: 20px; margin-top: 10px;}
#mainSPA{width:500px;margin: 0 auto 0; overflow-y: auto; position:fixed; left:50%; transform: translateX(-50%); height:calc(100% - 45px);}
.login{width: 100%; margin-top: 40px; padding: 20px;}
.m{width:100%; color:#000000; margin-top: 10px; font-size: 14px;}
.m .b{font-weight: bold; font-size: 20px; margin-top: 10px;}
#L .f{ float: left; width: 100%; padding-bottom: 30px;}
.l-t{margin-top: 20px; font-size: 16px; }
.response{width:100%; border-radius: 3px; margin-top: 5px;}
.response span{margin: 5px;}
.error{color:#000; padding: 10px; font-size: 14px; border-left: 3px solid #d9534f; background: rgba(217, 83, 79, 0.1);}
.error strong{color: #d9534f;}
.success{color:#000; font-size: 14px; border-left: 3px solid #2b542c; background: rgba(43, 84, 44, 0.1);}
.success strong{color:#2b542c;}
.t-reg{font-size: 14px;}
.t-reg a{font-size: 14px; color:#3b3bde;}
input{ color: #000000; margin-top: 15px; background: inherit; padding: 10px 10px;  width: 100%;  border: 1px solid #555555; border-radius: 5px;}
*:focus {outline: none;}
input[type='button']{background: #000; padding: 10px; cursor: pointer; color:#ffffff; margin-top:20px; margin-bottom:20px; border-radius: 5px;}
input[type='button']:hover{background: #fff; border:1px solid #3b3bde; color:#3b3bde;}
.promo-line{padding:10px; scrollbar-width: none; margin-bottom: 20px; white-space:nowrap; overflow-y:hidden; overflow-x: auto; height:160px; border:1px solid transparent;}
.promo-card{width:270px; display: inline-block; margin-right: 8px; height: 100%;background: #2d276b; border-radius: 20px; color:#fff;}
.promo-data{position: sticky; margin-top: -125px; margin-left: 20px;}
.promo-data button{margin-top: 16px; font-size: 10px;}

.curve{position: relative; width: 100%; height: 120px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.curve:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #2d276b; /*background-image: linear-gradient(326deg, #a4508b 0%, #5f0a87 74%);*/ border-radius: 0 0 50% 50%/0 0 100% 100%; transform: scaleX(1.5);}
.acc-bar{top:0; position: absolute; margin-top: 10px;}
.acc-bar img{width:40px; margin:0px 10px 0 20px; float: left; border-radius: 50%; background: #fff; padding: 5px;}
.acc-bar span{margin:0; float:left; font-size: 20px; color:#fff; margin-top: 10px;}
.acc-box{position: absolute; top:0; margin-top: 65px; box-shadow: 3px 4px 2px -2px rgba(0, 0, 0, 0.2); background: #fff; width:86%; margin-left: 7%; border-radius:10px; padding: 10px 20px;}
.acc-box .icn{width:  20%; float: left;}
.acc-box .icn span{width:20px; height: 20px; margin-top: 12px; margin-left:calc((14% - 20px) / 2); position: absolute; border-radius: 50%; }
.acc-box .bdy{width:  80%; float: left;}
.acc-box .phone{color:#2d276b; font-weight: bold; font-size: 20px;}
.acc-box .status{margin-top: 5px;}
.acc-box .d2{margin-top: 15px; float: left; width: 100%;}
.d2 .bal{width:40%; float:left;}
.d2 .exp{width:60%; float:left;}
.d2 .t{ font-size: 14px; color:#383838;}
.d2 .v{color: #2d276b; margin-top: 5px;}
.acc-body{margin-top: 60px;padding: 20px;}
.filter{width:100%; float: left; margin-bottom: 10px; }
.filter .tt{color:rgb(112, 112, 112); margin-bottom: 10px;}
.selector{float:left;}
.filter input[type='radio']{display:none;}
.filter label{font-size: 16px; padding:5px; margin-right:10px; cursor: pointer}
.filter input[type='radio']:checked + label{color:red; border-bottom: 1px solid red;}
.vf{display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; position: fixed;}
.vf  input[type='number']{border:none; border-bottom:1px solid gray; border-radius: 0;}
#modal{position: fixed;z-index: 1; display: none; left: 0;top: 0;width: 100%; height: 100%; overflow: auto;background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
#modal > .content{padding:20px 20px 15px 20px;width: calc(100% - 50px); max-width: 480px; float: left; min-height: 50px; background: #fff; border-radius:10px; position: relative; top: 50%; left:50%; transform: translate(-50%, -50%);}
#modal > .promo{background: #2d276b; color: #fff; overflow: hidden;}
#modal > .promo .ct-tt{color:#fff;}
#modal > .promo .waves {
  position:absolute;
  width: 100%;
  height:48px;
  margin-top: 30px;
  left:0;
  z-index: -1;
}
#modal > .promo .btn-c{background: none; color:#fff; border: 1px solid white; }
#modal > .promo .btn-k{background: #f44336; color:#fff; margin-left: 10px; }

.ct-tt{color:/*#9b3435*/ #2d276b; margin-bottom: 10px;}
.btns{width:100%; margin-top: 20px; float: left;}
.btns div {text-align: center; float: left; padding:10px 20px; border-radius:5px; width:calc((100% / 2) - 5px); cursor: pointer;}
.btn-c{background: #fff; color:#000; border: 1px solid gray; }
.btn-k{background: #2d276b; color:#fff; margin-left: 10px; }
.cMsg{margin-top: 15px;}
.btn-cm{width:100%; border-radius: 6px; display: none; color:#fff; text-align: center; background: #04aa6d;}
#mkPay{display: none;}

.rowData{border: 1px solid #ccc; border-radius: 10px; margin-top:10px; padding:10px;}
.rowData .b2, .rowData .b1{display: flex; align-items: center; min-height: 48px;}
.rowData .b1{justify-content: center; font-size:16px;}
.rowData .b2{justify-content: space-between;}
.rowData .icn1{color: #f44336;}
.rowData .icn2{color: #ffa500;}
.rowData .icn3{color: #4caae4;}
.rowData .icn5{color: #20def2;}
.rowData .icn5 svg{width: 16px;}
.step-marker {border-left: 2px solid silver; min-height: 1px; margin-top: -15px;}
.step-marker:last-child {border-right: 2px solid silver;}
.range-labels {display: flex;justify-content: space-between;top: 25px;width: 100%; }
/*.buy-desc{width: 94%; margin-left: 3%; text-align: center;  margin-top: 10px;  float: left; color:rgb(112, 112, 112);}
.help{width: 94%; margin-left: 3%; cursor: pointer; margin-top: 10px; margin-bottom: 5px; float: left; border:1px solid #f2f2f2;}
.chevron-d{border: solid black; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; transform: rotate(45deg);-webkit-transform: rotate(45deg);}
.chevron-u{border: solid black; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}
#toggle:checked ~ #HC{display: block;}*/




input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield; /* For Firefox */
}

.card-wrap{
  width: 120px;
  background: #fff;
  border-radius: 20px;
  border: 5px solid #fff;
  overflow: hidden;
  color: #616161;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
              rgba(0, 0, 0, 0.23) 0px 6px 6px;
  cursor: pointer;
  transition: all .2s ease-in-out;
  margin: 5px; float: left;
}
.card-wrap:hover{
  transform: scale(1.0);
}
.card-header{
  height: 80px;
  width: 100%;
  background: red;
  border-radius:100% 0% 100% 0% / 0% 50% 50% 100%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 36px;

}

.card-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  margin: 0 auto;
}
.card-title{
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
  
}
.card-text{
  text-align: center;
  font-size: 12px;
  margin-bottom: 10px;
}
.card-btn{
  border: none;
  border-radius: 50px;
  padding: 5px 15px;
  color: #fff;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.card-header.one{
  background: linear-gradient(to bottom left, #f12711, #f5af19);
}
.card-btn.one{
  background: linear-gradient(to left, #f12711, #f5af19);
}
.card-header.two{
  background: linear-gradient(to bottom left, #7F00FF, #E100FF);
}
.card-btn.two{
  background: linear-gradient(to left, #7F00FF, #E100FF);
}
.card-header.three{
  background: linear-gradient(to bottom left, #11998e, #38ef7d);
}
.card-btn.three{
  background: linear-gradient(to left, #11998e, #38ef7d);
}

#toast {
    visibility: hidden;
    max-width: 50px;
    height: 50px;
    /*margin-left: -125px;*/
    margin: auto;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;

    position: fixed;
    z-index: 1;
    left: 0;right:0;
    bottom: 30px;
    font-size: 17px;
    white-space: nowrap;
}
#toast #img{
    width: 50px;
    height: 50px;
    
    float: left;
    
    padding-top: 16px;
    padding-bottom: 16px;
    
    box-sizing: border-box;

    
    background-color: #111;
    color: #fff;
}
#toast #desc{

    
    color: #fff;
   
    padding: 16px;
    
    overflow: hidden;
    white-space: nowrap;
}

#toast.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes expand {
    from {min-width: 50px} 
    to {min-width: 90%}
}

@keyframes expand {
    from {min-width: 50px}
    to {min-width: 90%}
}
@-webkit-keyframes stay {
    from {min-width: 90%} 
    to {min-width: 90%}
}

@keyframes stay {
    from {min-width: 90%}
    to {min-width: 90%}
}
@-webkit-keyframes shrink {
    from {min-width:90%;} 
    to {min-width: 50px;}
}

@keyframes shrink {
    from {min-width: 90%;} 
    to {min-width: 50px;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 60px; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 60px; opacity: 0;}
}
.checkmark {
  display: inline-block;
  width: 30px;
  height: 30px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}

.checkmark_stem {
  position: absolute;
  width: 3px;
  height: 20px;
  background-color: #ccc;
  left: 11px;
  top: 0px;
}

.checkmark_kick {
  position: absolute;
  width: 10px;
  height: 3px;
  background-color: #ccc;
  left: 4px;
  top: 18px;
}

@media screen and (max-width: 768px) {
	.topBar{width: 100%;}
	#mainSPA{width:100%;}

  #modal > .content{width: 90%; bottom: 0; max-width: 480px;}
}

.waves {
  position:relative;
  width: 100%;
  height:48px;
  margin-top: 90px;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}


#payLoader{margin:auto; position: absolute; display: none; top: 0; left: 0; bottom: 0; right: 0;}

.loader-5 {
  height: 32px;
  width: 32px;
  -webkit-animation: loader-5-1 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
          animation: loader-5-1 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
@-webkit-keyframes loader-5-1 {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes loader-5-1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loader-5::before {
  content: "";
  display: block;
  position: absolute;
  top: 0; left: 0;
  bottom: 0; right: auto;
  margin: auto;
  width: 8px;
  height: 8px;
  background: #FFF;
  border-radius: 50%;
  -webkit-animation: loader-5-2 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
          animation: loader-5-2 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
@-webkit-keyframes loader-5-2 {
  0%   { -webkit-transform: translate3d(0, 0, 0) scale(1); }
  50%  { -webkit-transform: translate3d(24px, 0, 0) scale(.5); }
  100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes loader-5-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(24px, 0, 0) scale(.5); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.loader-5::after {
  content: "";
  display: block;
  position: absolute;
  top: 0; left: auto;
  bottom: 0; right: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  background: #FFF;
  border-radius: 50%;
  -webkit-animation: loader-5-3 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
          animation: loader-5-3 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
@-webkit-keyframes loader-5-3 {
  0%   { -webkit-transform: translate3d(0, 0, 0) scale(1); }
  50%  { -webkit-transform: translate3d(-24px, 0, 0) scale(.5); }
  100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes loader-5-3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-24px, 0, 0) scale(.5); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.loader-5 span {
  display: block;
  position: absolute;
  top: 0; left: 0;
  bottom: 0; right: 0;
  margin: auto;
  height: 32px;
  width: 32px;
}
.loader-5 span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0; left: 0;
  bottom: auto; right: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  background: #FFF;
  border-radius: 50%;
  -webkit-animation: loader-5-4 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
          animation: loader-5-4 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
@-webkit-keyframes loader-5-4 {
  0%   { -webkit-transform: translate3d(0, 0, 0) scale(1); }
  50%  { -webkit-transform: translate3d(0, 24px, 0) scale(.5); }
  100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes loader-5-4 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(0, 24px, 0) scale(.5); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.loader-5 span::after {
  content: "";
  display: block;
  position: absolute;
  top: auto; left: 0;
  bottom: 0; right: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  background: #FFF;
  border-radius: 50%;
  -webkit-animation: loader-5-5 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
          animation: loader-5-5 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
@-webkit-keyframes loader-5-5 {
  0%   { -webkit-transform: translate3d(0, 0, 0) scale(1); }
  50%  { -webkit-transform: translate3d(0, -24px, 0) scale(.5); }
  100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes loader-5-5 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(0, -24px, 0) scale(.5); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
   -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    border: none; padding: 0;
    margin-top: 10px;
}

/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
   background-color: #2d276b;
   border-radius: 0.5rem;
   height: 0.5rem;  
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
   appearance: none;
   margin-top: -12px; /* Centers thumb on the track */

   /*custom styles*/
   background-color: #ffa500;
   height: 2rem;
   width: 10px;
}



/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
   background-color: #2d276b;
   border-radius: 0.5rem;
   height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
   border: none; /*Removes extra border that FF applies*/
   border-radius: 0; /*Removes default border-radius that FF applies*/

   /*custom styles*/
   background-color: #ffa500;
   height: 2rem;
   width: 10px;
}