/* 
*/
/* 
    COLOUR REFERENCES:
      FOOTER:   #EFEFEF

    METHODOLOGY:;
    BEM(BLOCKS ELEMENTS MODIFIERS)
*/



body{
    background-color: #ffff!important;
  }
  
  footer{
    background-color: #EFEFEF/*#F8F8F8*/; 
  }

  .footer-app{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
  }

  .logo-footer-width{
    width: 7.5em;
  }

  .hr-footer-app{
    width: 95%;
  }
  
  .btn{
    text-transform: none!important;
  }

  .btn-rounded{
    border-radius: 10rem;
  }

  .text-size-09{
    font-size: 0.9em; 
  }

  .customHeight{

    min-height: 100vh;
  }

  .label-color--tehter{
    font-weight: bolder;
    color: #26A17B;
  }

.half-circle::before {
  height: 100%;
  width: 100%;
  border-radius: 10em 0 0 10em;
  background-color: #26A17B;  
  position: absolute;
  right: 0;
  content: "";
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
  -webkit-box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
  box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);

}

.svg-icon{
  fill:#22a079;
  width: 2em;
}

.btn-effect, .btn-effect:link, .btn-effect:visited {  
  text-decoration: none;
  padding: 1.2em 1.5em;
  display: inline-block;
  border-radius: 10rem;
  transition: all .2s;
  position: relative;  
  border: none;
  cursor: pointer; 
}

.btn-effect--small, .btn-effect--small:link, .btn-effect--small:visited {  
  text-decoration: none;
  padding: 0.8em 1.5em;
  display: inline-block;
  border-radius: 10rem;
  transition: all .2s;
  position: relative;  
  border: none;
  cursor: pointer; 
}

.btn-effect:hover, .btn-effect--small:hover {
  transform: translateY(-0.3rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); 
  
}

.btn-effect:hover::after, .btn-effect--small:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0; }

.btn-effect:active, .btn-effect:focus, .btn-effect--small:active, .btn-effect--small:focus {
  outline: none;
  transform: translateY(-0.1rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }


.btn-effect--tether {
  background-color: #26A17B;
  color: #fff; 
}

.btn-effect--tether:hover {  
  color: #fff; 
}

.btn-effect--tether::after {
    background-color: #26A17B;     
}

.btn-effect--white {
  background-color: #fff;
  color: #777; 
}

.btn-effect--white:hover {  
  color: #777; 
}

.btn-effect--white::after {
    background-color: #fff;     
}

.btn-effect--transparent{
  background-color: transparent;  
  color: #212529;
}

.btn-effect--transparent::after{
  background-color: transparent;    
}

.btn-effect::after, .btn-effect--small::after{
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s; }

.btn-effect--animated {
  animation: moveInBottom .5s ease-out .75s;
  animation-fill-mode: backwards; }

.btn-effect-text:link, .btn-effect-text:visited {
  font-size: 1.6rem;
  color: #55c57a;
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid #55c57a;
  padding: 3px;
  transition: all .2s; }
.logo-header{
    width: 3.8em;
}

.btn-tether{
  background-color: #26A17B;
}

.btn-tether:hover{
  background-color: #26A17B;
  opacity: 0.8;
}

.btn-tether:active{
  background-color: #26A17B;
  opacity: 0.8;
}

.btn-card-icon-action > svg{
  height: 1.2em;
  width: auto;
}

.btn-secondary-custom{
  background-color: #d8d8d8;
}

.btn-secondary-custom-icon{
  fill: #6c757d;
}

.icon-fill-white{
  fill:#fff;
}

.text-tether{
  
  color: #26A17B;
}

.bg-tether-color{
  background-color: #26A17B!important;
}

.icon-white{
  background-image: url(../img/menu.svg)!important;
}

.custom-height{
  height: 100vh;
}

.card-border{
  border-radius: 6px;
}

.border-radius-bottom{
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.mdl-header-border{
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.mdl-confirm-icon{
  width: 4em;
}

#buy_transaction_table > tbody > tr > td{
  vertical-align:middle;
}

.svg-icon-transaction-detail{
  width: 1.3em;
}

.svg-icon-table{
  width: 1.7em;
}

#pagination_withdrawl > ul {
  margin: 0!important;
}



.hero__subtitle__height--50{
  height: 9em;
}

#hero__subtitle__english , #hero__subtitle__spanish{
  display: none;
}
#hero__subtitle__spanish.active{
  display: block;
}

#hero__subtitle__english.active{
  display: block;
}

/*===================== SKELETON =============================*/
.skeleton {
  opacity: .7;
  animation: skeleton-loading 1s linear infinite alternate;
}

.skeleton-text {
  width: 100%;
  height: .5rem;
  margin-bottom: .25rem;
  border-radius: .125rem;
}

.skeleton-text:last-child {
  margin-bottom: 0;
  width: 80%;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 70%);
  }

  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

/*===================== END SKELETON =============================*/
/*===================== PAGINATION =============================*/

.page-item.active .page-link {
  z-index: 1;
  color: #fff!important;
  background-color: #26A17B!important;
  border-color: #26A17B!important;
}

.page-link{
  color: #6c757d!important;
}
/*===================== END PAGINATION =============================*/
/*===================== MODAL =============================*/
.h-65vh{
  height: 65vh;
}

.container-btn-scroll{
  position: absolute;
  display: block;
  width: 100%;
  bottom: 40px;
}
.btn-circle{
  height: 3em;
  width: 3em;
  background-color:#26A17B;
  display: flex;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  cursor:pointer;
  opacity: 1;
  -webkit-transition: opacity 2s ease-in-out .15s;
  -o-transition: opacity 2s ease-in-out .15s;
  transition: opacity 2s ease-in-out .15s;
}
/* @-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.bounce {
  -webkit-animation: bounce;
  animation: bounce 3.5s ease-in-out forwards infinite;
} */

@-webkit-keyframes bounce {
	0%,
	100%,
	20%,
	50%,
	80% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
	40% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px)
	}
	60% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px)
	}
}

@keyframes bounce {
	0%,
	100%,
	20%,
	50%,
	80% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0)
	}
	40% {
		-webkit-transform: translateY(-30px);
		-ms-transform: translateY(-30px);
		transform: translateY(-30px)
	}
	60% {
		-webkit-transform: translateY(-15px);
		-ms-transform: translateY(-15px);
		transform: translateY(-15px)
	}
}

.bounce{
	-webkit-animation-name: bounce;
  animation: bounce 3.5s ease-in-out forwards infinite;	
}

.icon-modal{
  color:#fff!important;
  margin: auto;
  height: 1.3em;
}
.btns-modal-hidden{
  opacity: 0;
  visibility: hidden;
}
.btns-modal{
  padding:0.3em 0em;
  opacity: 1;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: opacity 1s ease-in-out .15s;
  -o-transition: opacity 1s ease-in-out .15s;
  transition: opacity 1s ease-in-out .15s;
}
.btn-circle-hidden {
  opacity: 0;
  visibility: hidden;
}
.container-close{
  float:right;			
  cursor: pointer;
}
.textCenter{
  text-align:center;
}

.padding-pdf{

  padding:0em 6em;
}
/*===================== ENDS MODAL =============================*/
/*========================== Body scroll ===========================================*/
.body-scroll{
  overflow-y:scroll;
}
.body-scroll::-webkit-scrollbar{
  width:0.5em;background-color:#f1f1f1;
}
.body-scroll::-webkit-scrollbar-track{
  /* -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); */
}
.body-scroll::-webkit-scrollbar-thumb{
  background-color:#26A17B!important;
  /* outline:1px solid slategrey; */
}
/*========================== End Body scroll ===========================================*/
  
  #loading-view{
      position: fixed;
      width: 100%;
      z-index: 10000000;
      height: 100%;
      background-color:#f7f7f7;    
  }
  
  
  
  .loading-view__crypto > svg {
    width: 2em;
    animation-name: loader;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    position :absolute;
  }
  
  .loading-view__crypto > svg:first-child {
    animation-delay: 0.5s;
  }
  
  .loading-view__crypto > svg:nth-child(2) {
    animation-delay: 0.4s;
  }
  
  .loading-view__crypto > svg:nth-child(3) {
    animation-delay: 0.3s;
  }
  
  .loading-view__crypto > svg:nth-child(4) {  
    animation-delay: 0.2s;
  }
  
  .loading-view__crypto > svg:nth-child(5) {
    animation-delay: 0.1s;
  }
  
  .cookies{
    height: auto;
    bottom:-100%;
    background-color: #fff;  
    opacity: 0;  
    z-index: 100;
    transition: bottom 3s, opacity 3s cubic-bezier(.25,.8,.25,1);
  }
  
  .cookies--active{
    bottom: 0%;
    opacity: 1;  
  }
  
  .header-landing{
    position: relative;
  }
  

  
  .bg-image-hero{
      height: 110%;
      width: 100%;
      background-size: cover;
      background-image: url(../img/bg-image-1.jpg);
      background-position: 40% 50%;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);
      opacity: 0;
      /* -moz-transform: translateY(15%);
      -webkit-transform: translateY(15%);
      transform: translateY(20%);
      transition: transform 3s cubic-bezier(.25,.8,.25,1), opacity 3s cubic-bezier(.25,.8,.25,1); */
      position: relative;
  }
  
  .bg-image-hero.is-visible{
    /* -webkit-transform: translateX(0%);
    transform: translateX(0%); */ 
    -moz-animation: slideRight--15 6s cubic-bezier(.25,.8,.25,1) 0.8s 1 normal both;
    -webkit-animation: slideRight--15 6s cubic-bezier(.25,.8,.25,1) 0.8s 1 normal both;
      animation: slideRight--15 6s cubic-bezier(.25,.8,.25,1) 0.8s 1 normal both;
  
  
  }
  
  .section-padding{
      height: 8em;
      padding: 3rem;
  }
  
  .section-padding--1{
      
      padding: 1.5rem;
  }

  .section-padding--2{
      
    padding: 3.5rem;
}
  
  .section-padding-x2{
       height: 14em;
      padding: 3rem; 
  }
  
  .overlay-form{
    height: 112%;
    width: 90%;
    opacity: .62;
    position: absolute;
    top: 0;
    content: "";
    -moz-transform: skewY(6deg);
    -webkit-transform: skewY(6deg);
    transform: skewY(6deg);      
  }
  
  .overlay-form-color--register{
    background-color: #B7F2F0;
  }
  
  .overlay-form-color--contact-us{
    background-color: #F0F3FA;
  }
  
  .overlay-form__secondary{
    height: 112%;
    width: 90%;    
    position: absolute;
    top: 0;
    content: "";      
  }

  #registration-section{
    background-color: #26A17B;
  }
  
  #register-card{
    border-radius: 2em;
  }

  .card-padding {
    padding: 2em 1em;
  }
  .card-shadow {
      box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
  }

  .card-panel-modal {
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  }

  .hover-action {
      transition: -webkit-transform .3s;
      transition: transform .3s;
      transition: transform .3s, -webkit-transform .3s;
      cursor: pointer;
  }

  .z-100{
    z-index:100;
  }
 
  .registration-section-form__container{
      padding-bottom: 2em;
  }
  
  .contact_us-section-form__container{
    padding-bottom: 2em;
  }
  
  .box-shadow{
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);    
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);    
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);    
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  }
  
  .box-shadow:hover{
    -moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);   
    -webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);   
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);   
    
  }
  
  .font-size-1em{
    font-size: 1.2em!important;
    top: 0.8em!important;
  }
  
  
  .dots-cellphone{
    width: 14.5em;
    position: absolute;
    -moz-transform:  rotate(90deg)  translateX(10%);
    -webkit-transform: rotate(90deg)  translateX(10%);
    transform: rotate(90deg)  translateX(10%);
    opacity: 0;
    right: 0%;
    transition: transform 3s cubic-bezier(.25,.8,.25,1) 0.8s, opacity 3s cubic-bezier(.25,.8,.25,1) 0.8s;
  }
  
  
  .dots-cellphone.is-visible{
    opacity: 1;
    -moz-transform: rotate(90deg) translateX(0%);
    -webkit-transform: rotate(90deg)  translateX(0%);
    transform: rotate(90deg)  translateX(0%);
  }
  
  .orange-cajero-dots {
      width: 18em;
      right: 0%;
      /*right: 20%;*/
      opacity: 0;
      top: -5.3em;
      -moz-transform: translateX(-10%);
      -webkit-transform: translateX(-10%);
      transform: translateX(-10%);
      transition: transform 6s cubic-bezier(.25,.8,.25,1) 0.8s, opacity 3s cubic-bezier(.25,.8,.25,1) 0.8s;
      /* transition: right 6s, opacity 3s cubic-bezier(.25,.8,.25,1); */
  }
  
  .orange-cajero-dots.is-visible {
    opacity: 1;
    /*right: 0%;*/
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  
  .orange-propia-dots{
    width: 18em;
  }
  
/*   .scroll-right{
    opacity: 0;
    -moz-transform: translateX(-15%);
    -webkit-transform: translateX(-15%);
    transform: translateX(-15%);
    transition: transform 6s cubic-bezier(.25,.8,.25,1) 0.8s, opacity 3s cubic-bezier(.25,.8,.25,1) 0.8s;
  }
  
  .scroll-right.is-visible{
    opacity: 1;
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  
  } */

  .scroll-right{        
    opacity: 0;
  }

  .scroll-right.is-visible{ 
  -moz-animation: slideLeft--15 6s cubic-bezier(.25,.8,.25,1) 0.8s 1 normal both;
  -webkit-animation: slideLeft--15 6s cubic-bezier(.25,.8,.25,1) 0.8s 1 normal both;
    animation: slideLeft--15 6s cubic-bezier(.25,.8,.25,1) 0.8s 1 normal both;

  }

  .scroll-up{
    opacity: 0;
    -moz-transform: translateY(15%);
    -webkit-transform: translateY(15%);
    transform: translateY(15%);
    transition: transform 6s cubic-bezier(.25,.8,.25,1) 0.8s, opacity 3s cubic-bezier(.25,.8,.25,1) 0.8s;
  }
  
  .scroll-up.is-visible{
    opacity: 1;
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  
  }

  
  
  .scroll-down{
    opacity: 0;
    -moz-transform: translateY(-15%);
    -webkit-transform: translateY(-15%);
    transform: translateY(-15%);
    transition: transform 6s cubic-bezier(.25,.8,.25,1) 0.8s, opacity 3s cubic-bezier(.25,.8,.25,1) 0.8s;
  }
  
  .scroll-down.is-visible{
    opacity: 1;
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  
  }
  .light-blue-propia-dots{
    width:18em;
    left: 0%;
    top: -5.3em;
  }
  
  .scroll-left{        
       opacity: 0;
      /* -moz-transform: translateX(15%);
      -webkit-transform: translateX(15%);
      transform: translateX(15%); */
      /* transition: transform 6s cubic-bezier(.25,.8,.25,1) 0.8s, opacity 3s cubic-bezier(.25,.8,.25,1) 0.8s; */
  }
  
  .scroll-left.is-visible{
    /* opacity: 1; */
    /* -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%); */
    -moz-animation: slideRight--15 6s cubic-bezier(.25,.8,.25,1) 0.8s 1 normal both;
    -webkit-animation: slideRight--15 6s cubic-bezier(.25,.8,.25,1) 0.8s 1 normal both;
    animation: slideRight--15 6s cubic-bezier(.25,.8,.25,1) 0.8s 1 normal both;
  
  }

  .scroll-left-x2{        
    opacity: 0;
    -moz-transform: translateX(15%);
    -webkit-transform: translateX(15%);
    transform: translateX(15%);
    transition: transform 3s cubic-bezier(.25,.8,.25,1) 0.4s, opacity 2s cubic-bezier(.25,.8,.25,1) 0.4s; 
  }

  .scroll-left-x2.is-visible{ 
    opacity: 1;
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  .scroll-right-x2{        
    opacity: 0;
    -moz-transform: translateX(-15%);
    -webkit-transform: translateX(-15%);
    transform: translateX(-15%);
    transition: transform 3s cubic-bezier(.25,.8,.25,1) 0.4s, opacity 2s cubic-bezier(.25,.8,.25,1) 0.4s; 
  }

  .scroll-right-x2.is-visible{ 
    opacity: 1;
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  
  @-webkit-keyframes slideRight--15 {
      0% {
      opacity: 0;
      -moz-transform: translateX(15%);
      -webkit-transform: translateX(15%);
      transform: translateX(15%);
          
      }
      to {
      opacity: 1;
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
      }
  }
  
  @keyframes slideRight--15 {
      0% {
      opacity: 0;
      -moz-transform: translateX(15%);
      -webkit-transform: translateX(15%);
      transform: translateX(15%);
          
      }
      to {
      opacity: 1;
      -moz-transform: translateX(0%);
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
      
    }
  }

  @-webkit-keyframes slideLeft--15 {
    0% {
    opacity: 0;
    -moz-transform: translateX(-15%);
    -webkit-transform: translateX(-15%);
    transform: translateX(-15%);
        
    }
    to {
    opacity: 1;
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    }
}

@keyframes slideLeft--15 {
    0% {
    opacity: 0;
    -moz-transform: translateX(-15%);
    -webkit-transform: translateX(-15%);
    transform: translateX(-15%);
        
    }
    to {
    opacity: 1;
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    
  }
}
  
  .light-blue-hero-dots{
      width: 15.2em;
      right: 0;
      bottom: -10%;
      opacity: 0;
      -moz-transform: translateX(10%);
      -webkit-transform: translateX(10%);
      transform: translateX(10%);
      transition: transform 6s cubic-bezier(.25,.8,.25,1) 0.8s, opacity 3s cubic-bezier(.25,.8,.25,1) 0.8s;
  }
  
  .light-blue-hero-dots.is-visible{
    opacity: 1;
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  
  }
  
  
  .wrapper-password > .bmd-form-group{
    width: 100%;
  }

  .btn-password > svg{
    width: 1.3em;
  }

  .bmd-label-floating-wrapper > span > div> label{
    top: 0.5em!important;
  }

  .bmd-label-floating-wrapper  > .is-filled > div > label{
    top: -0.9em!important;
  }
  
  .bmd-label-floating-wrapper  > .is-focused > div > label{
    top: -0.9em!important;
  }
  
  .bg-color-grey{
    background-color: #E1E1E1!important;
  }

  .wrapper_password{
    margin-top:1em;
    color: #6c757d;
  }

  .wrapper_password > span > svg{
    height:0.5em;
  }

  .icon_password_invalid > span {
    fill:#f44336!important;
    color:#f44336!important;
  }

  .icon_password_success > span {
    fill:#28a745!important;
    color: #28a745!important;
  }
  

  .icon_password_invalid > span > svg, .icon_password_success > span > svg{
    height:1.5em;
  }
  
  .progress-height--2{
    height: 2em;
  }
  .blue-dots-right{
      width: 7em;
      right: 13%;
      top: -2em;
  }
  
  .puprle-arrows-left{
      width: 5em;
      left: 10%;
      top: -2em;
  }
  
  .puprle-arrows-right{
      width: 5em;
      right:  0%;    
  }
  
  .yellow-box-right-middle {
    width: 7em;
    right: -3%;
    top: 50%;
    fill: #EFCD4A;
  }
  
  .red-box-middle{
      width: 9.5em;
      top: 50%;
      right: -5%;
  }
  
  .yellow-box-right{
      width: 6em;
      right: 20%;
      bottom: -4%;
      fill: #EFCD4A;
  }
  
  .red-box-left-middle{
      width: 6em;
      left: 0%;
      top: 45%;
      fill: #C2694E; 
  }
  
  .red-box-top-middle {
    width: 9em;
    left: 0%;
    top: -5%;  
  }
  
  .orange-dots-bottom-left{
     width: 15em;
      bottom: -4%;
      right: 0%;
      z-index: 10;
  }
  
  .blue-dots-bottom-left{
    width: 15em;
      bottom: -4%;
      right: 0%;
      z-index: 10;
  }
  
  .red-dots-left {
      width: 7em;
      left: 10%;
      bottom: -9%;
  }
  
  .bullet-list{
      list-style: none
  }
  
  .bullet-list--blue > li::before{
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #598EC8; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
  }
  
  .bullet-list--blue > li {
      line-height: 1.3em;
  }
  
  .is-invalid-svg{
    fill: #f44336!important;
  }
  
  .is-invalid-input{
    background-image: linear-gradient(0deg,#d50000 2px,rgba(213,0,0,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0)!important;
  }
  
  .invalid-feedback-input{
    color: #f44336!important;
  }
  
  .icon-register{
    width: 3.5em;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 100%;
  }
  .lang-icon{
    width: 1.5em;
  }
  
  /* .registration-section-form__container{
    padding-top: 2em;
  } */
  
  .contact_us-section-form__container{
    padding-bottom: 2em;
  }
  
  .no-shadow{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  
  .cellPhone-w > .iti{
    width: 100%;
  }
  
  .breakline{    
      border-top: 2px #212529 solid;
      width: 8%;
      margin: 0 0 1em;
  }
  
  .breakline--width-x2{
    width: 27%!important;
    margin: 1em 1em 1em 0em!important;  
  }
  
  .breakline--width-x1{
    width: 4%!important;
    margin: 0.5em 0.2em 0em 0em!important;  
  }
  
  .cellphone__currency{
    font-size:0.7em;
  }
  
  .img-cajero{
    height: auto;
    width: 85%;
    
  }
  
  .sm-show{
    display: none;
  }

  .sm-show-visible{
    visibility: hidden;
  }

  #txtExchange_rate_fractional{
    color: rgb(161, 166, 176)!important;
  }

  .onfido-sdk-ui-Theme-modalOverlay{
    z-index: 100;
  }
  
  .hover-action{
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;  
    cursor: pointer;
  }
  
  .hover-action:hover{
    -moz-transform: translateY(-0.3rem) scale(1.03);
    -webkit-transform: translateY(-0.3rem) scale(1.03);
    transform: translateY(-0.3rem) scale(1.03);
  }
  
  .hover-row{
      transition: -webkit-transform .3s;
      transition: transform .3s;
      transition: transform .3s, -webkit-transform .3s;
  }
  
  .hover-row:hover{
      -moz-transform: translateY(-1.5rem) scale(1.03);
      -webkit-transform: translateY(-1.5rem) scale(1.03);
      transform: translateY(-1.5rem) scale(1.03);
  }
  
  .callbell-iframe{
    right:0!important;
  }
  
  
  .sticky-bar {
    left: 0;
    margin: auto;
    position: fixed;
    top: 0;
    width: 100%;
    -moz-box-shadow: 0 10px 15px rgba(25,25,25,0.1);
    -webkit-box-shadow: 0 10px 15px rgba(25,25,25,0.1);
    box-shadow: 0 10px 15px rgba(25,25,25,0.1);
    z-index: 20;
    -moz-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;  
    background-color: #fff!important;
  }
  
  .floating{    
      -webkit-animation-name: Floatingx;
      -webkit-animation-duration: 3s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
      -moz-animation-name: Floating;
      -moz-animation-duration: 3s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: ease-in-out;    
  }
  
  .scaling{
      -webkit-animation-name: scalex;
      -webkit-animation-duration:3s;
      -webkit-animation-iteration-count:infinite;
      -webkit-animation-timing-function:ease-in-out;
      -moz-animation-name: scale;
      -moz-animation-duration:3s;
      -moz-animation-iteration-count:infinite;
      -moz-animation-timing-function:ease-in-out;    
  }

  
      
  @-webkit-keyframes scalex{
      from {-webkit-transform: scale(0.9);}
      65% {-webkit-transform: scale(1.0);}
      to {-webkit-transform: scale(0.9);}    
  }
      
  @-moz-keyframes scale{
      from {-moz-transform: scale(0.9);}
      65% {-moz-transform: scale(1.0);}
      to {-moz-transform: scale(0.9);}    
  }
  
  
  
  @-webkit-keyframes Floatingx{
      from {-webkit-transform:translate(0, 0px);}
      65% {-webkit-transform:translate(0, 15px);}
      to {-webkit-transform: translate(0, -0px);    }    
  }
      
  @-moz-keyframes Floating{
      from {-moz-transform:translate(0, 0px);}
      65% {-moz-transform:translate(0, 15px);}
      to {-moz-transform: translate(0, -0px);}    
  }
  
  @keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
  }
  

  
  @-webkit-keyframes slideSkrew {
    from {
      -webkit-transform: skewY(0deg) translateX(-100%);
    }
    80%{
      -webkit-transform: translateX(0%);
    }
    to {
      -webkit-transform: skewY(6deg);
    }
  }
  
  @-moz-keyframes slideSkrew {
    from {
      -moz-transform: skewY(0deg) translateX(-100%);
    }
    80%{
      -moz-transform: translateX(0%);
    }
    to {
      -moz-transform: skewY(6deg);
    }
  }
  
  
  @-webkit-keyframes slideRegistration {
    from {
      -webkit-transform: skewY(0deg) translateX(-100%);
    }
    80%{
      -webkit-transform: translateX(0%);
    }
    to {
      -webkit-transform: skewY(2deg);
    }
  }
  
  @-moz-keyframes slideRegistration {
    from {
      -moz-transform: skewY(0deg) translateX(-100%);
    }
    80%{
      -moz-transform: translateX(0%);
    }
    to {
      -moz-transform: skewY(2deg);
    }
  }
  
  
  @keyframes loader {
    15% {
      transform: translateX(0);
    }
    45% {
      transform: translateX(230px);
    }
    65% {
      transform: translateX(230px);
    }
    95% {
      transform: translateX(0);
    }
  }

  @-webkit-keyframes moveInBottom {
    0% {
      opacity: 0;
      -webkit-transform: translateY(3rem);
              transform: translateY(3rem); }
    100% {
      opacity: 1;
      -webkit-transform: translate(0);
              transform: translate(0); } 
  }

  @keyframes moveInBottom{
		0% {
		    opacity: 0;
		    -webkit-transform: translateY(3rem);
		    transform: translateY(3rem);
		}
		100% {
		    opacity: 1;
		    -webkit-transform: translate(0);
		    transform: translate(0);
		}
  }

  
  
  .footer__copyright > p{
    font-size: .7em;
    padding:0 10em;
  }

  /*======================== Snackbar ==================================*/
  /* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
  border-radius: 6px;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show_snackbar {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

.svg-icon-copy{
  width: 1.5em;
}

/* Animations to fade the snackbar in and out */
@-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 fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
/*======================== ENDS Snackbar ==================================*/
  /*Extra small devices (portrait phones, less than 320px)*/
  @media (max-width: 320px) {
  
    .bg-image-hero{    
      background-image: url(../img/bg-image-1-320.jpg);
    }
  }
  
  /*Extra small devices (portrait phones, less than 375px)*/
  /* Small devices*/
  @media (min-width: 321px) and (max-width: 375px) {  
  
    .bg-image-hero{    
      background-image: url(../img/bg-image-1-375.jpg);
    }
  }
  
  /* Small devices*/
  @media (min-width: 376px) and (max-width: 425px) {  
    .bg-image-hero{    
      background-image: url(../img/bg-image-1-425.jpg);
    }
  
  }
  
  
  /*Extra small devices (portrait phones, less than 576px)*/
  @media (max-width: 575.98px) {
  
    .overlay-registration > svg{
      width: 5em;
    }
  
  }
  /* Small devices*/
  @media (min-width: 426px) and (max-width: 576px) {  
    .bg-image-hero{    
      background-image: url(../img/bg-image-1-576.jpg);
    }
  } 
  
  @media (max-width: 576px) { 
    
  
    .breakline--width-x1{
      margin: 1.5em .2em 0 0!important;
    }
  
    footer{
      font-size: 1.3em;
    }
  }
  
  /* Small devices (landscape phones, 576px and up)*/
  @media (min-width: 576px) and (max-width: 767.98px) {  }
  
  /* Medium devices (tablets, 768px and less)*/
  @media (max-width: 767px) { 
     
    .sm-tether-container{
      text-align: center;
    }

    .sm-tether{
      width: 11em;
    }

    .header-landing::before {
      height: 100%;
      width: 100%;    
      opacity: .62;
      position: absolute;
      top: 0%;
      content: "";
    } 
  
    #cajeros-section::before{
      height: 100%;
      width: 100%;
    }
    

  
    .overlay-registration{
      width: 100%;
    }
  
    .img-cajero{
      width: 100%;
      margin-bottom: 4em;
    }
  
    .footer__copyright > p {
      
      padding: 0 1em;
    }
  
    .center-small{
      text-align: center;
    }
  
    .app-icon-width{
      width: 100%
    }
    .app-icon-width:first-child{
        margin-bottom: 2em; 
    }
    .red-box-middle{
      display: none;
    }
  
    .light-blue-hero-dots {
      width: 12.2em;
      left: 0%;
      bottom: -9%;
      top: unset;
    }
    .bg-image-hero{
      height: 23em;
    }
  
    .orange-cajero-dots {
      width: 14em;
      right: 0%;
      top: -4.3em;
    }
  
    .dots-cellphone {
      width: 12.5em;
     
    }
  
    .light-blue-propia-dots {
      width: 13em;
      top: -6.3em;        
    }
  
    .orange-propia-dots {
      width: 13em;      
    }
  
    .lang-icon {
      width: 1.7em;
    }
  
    .section-padding--1 {
      padding: 1rem;
    }

    .section-padding--2 {
      padding: 2.5rem;
    }
  
    .overlay-form, .overlay-form__secondary{
      width: 100%;
    }
  
    .orange-dots-bottom-left{
      width:13em;
    }
  
    .blue-dots-bottom-left{
      width:13em;
    }
  
    .puprle-arrows-right {
      width: 4em;    
    }
    .yellow-box-right-middle {
      width: 4em;    
      top:0%;
    }
  
    .red-box-left-middle {
      width: 6em;
      left: 0%;
      top: -4%;
  
    }
  
    .red-box-top-middle {
      width: 6em;
      left: 0%;
      top: -4%;
  
    }
  
    .cellphone__tryme{
      font-size:0.7em;
    } 

    .pagination > .page-item{
        float: left;
    }
    table > thead {
        display: none;
    }

    table > tbody, tbody > tr {
      display: block;
    }

    .table tr:nth-child(odd){
      background-color: #f8f9fa;
      box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%);
    }

    tr > td {
      display: flex;
    }

    td > .col-custom-6 {
      flex: 0 0 40%;
      max-width: 40%;
    }
    td > .col-custom-6:nth-of-type(2) {
      flex: 0 0 60%!important;
      max-width: 60%!important;
      text-align: right;
    }


  /*   #withdrawal_table tr > td:nth-child(odd){
      background-color: #f8f9fa;
    } */

    #withdrawal_table tr > td > .header-movil::before{
        font-weight:bold
    }

    #withdrawal_table tr > td:nth-of-type(1) > .header-movil--spanish::before{
      content:"Fecha";    
    }

    #withdrawal_table tr > td:nth-of-type(1) > .header-movil--english::before{
      content:"Date";    
    }

    #withdrawal_table tr > td:nth-of-type(2) > .header-movil--spanish::before{
      content:"Wallet";    
    }

    #withdrawal_table tr > td:nth-of-type(2) > .header-movil--english::before{
      content:"Wallet";    
    }

    #withdrawal_table tr > td:nth-of-type(3) > .header-movil--spanish::before{
      content:"Cantidad";    
    }

    #withdrawal_table tr > td:nth-of-type(3) > .header-movil--english::before{
      content:"Amount";    
    }


    #transaction_history_table tr > td:nth-child(odd),#second_table tr > td:nth-child(odd){
        background-color:#f8f9fa
    }
    #transaction_history_table tr > td:nth-of-type(1) > .header-movil::before{
        content:"TC";
        font-weight:bold
    }

    #transaction_history_table tr > td:nth-of-type(2) > .header-movil::before{
        content:"Comisión";
        font-weight:bold
    }
    #transaction_history_table tr > td:nth-of-type(3) > .header-movil::before{
        content:"Cantidad de USD";
        font-weight:bold
    }
    #transaction_history_table tr > td:nth-of-type(4) > .header-movil-mxn::before{
        content:"Cantidad de MXN";
        font-weight:bold
    }
    #transaction_history_table tr > td:nth-of-type(4) > .header-movil-cop::before{
        content:"Cantidad de COP";
        font-weight:bold
    }
    #transaction_history_table tr > td:nth-of-type(4) > .header-movil-ars::before{
        content:"Cantidad de ARS";
        font-weight:bold
    }
    #transaction_history_table tr > td:nth-of-type(4) > .header-movil-cny::before{
        content:"Cantidad de CNY";
        font-weight:bold
    }

    #hero__title{
      font-size: 1.5em;
    }

    .hero__subtitle__height--50{
      height: 6em;
    }

    #hero__subtitle__spanish, #hero__subtitle__english{
      font-size: 1.6em;
    }

    .btn-effect, .btn-effect--small {
      transform: translateY(-0.3rem);
      box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 20%);
  }
    
  
  }
  
  
  /* Medium devices (tablets, 768px and less)*/
  @media (min-width: 577px) and (max-width: 768px) { 
    .bg-image-hero{    
      background-image: url(../img/bg-image-1-769.jpg);
    }
  }
  
  
  
  /* Medium devices (tablets, 768px and up)*/
  @media (min-width: 768px) and (max-width: 991.98px) { 
    .red-box-middle {
      width: 7.5em;
    }
  }
  
  /* Medium devices (tablets, 768px and up)*/
  @media (max-width: 991px) { 
    .wrapper-secondary-menu {
      /* display: block; */
      /* width: 100%; */
    } 
  
    .sm-show{
      display: block;
    }

    .sm-show-visible{
      visibility: visible;
    }
  
    .md-show{
      display: none;
    }

    .lg-show{
      display: none;
    }
  
    .flag-wrapper{
      float: right;
    }
    .wrapper-cookie-btn{
      width: 100%;
    }
  }
  
  /* Large devices (desktops, 992px and up)*/
  @media (min-width: 769px) and (max-width: 992px){
    .bg-image-hero{    
      background-image: url(../img/bg-image-1-997.jpg);
    }
  }
  /* Large devices (desktops, 992px and up)*/
  @media (min-width: 992px) and (max-width: 1199.98px) {  }
  
  /* Extra large devices (large desktops, 1200px and up)*/
  @media (min-width: 1200px) {  }
  
  
  /* Extra large devices (large desktops, 1200px and up)*/
  @media (min-width: 993px) and (max-width: 1200px) { 
    .bg-image-hero{    
      background-image: url(../img/bg-image-1-1200.jpg);
    }
   }


   /*=============================================================
                  OXXO PAY
===============================================================*/
.opps-h3 {
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
}

.opps {
	width: 496px; 
	border-radius: 4px;
	box-sizing: border-box;
	padding: 0 45px;
	margin: 40px auto;
	overflow: hidden;
	border: 1px solid #b0afb5;
	font-family: 'Open Sans', sans-serif;
	color: #4f5365;
}

.opps-reminder {
	position: relative;
	top: -1px;
	padding: 9px 0 10px;
	font-size: 11px;
	text-transform: uppercase;
	text-align: center;
	color: #ffffff;
	background: #000000;
}

.opps-info {
	margin-top: 26px;
	position: relative;
}

.opps-info:after {
	visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;

}

.opps-brand {
	width: 45%;
	float: left;
}

.opps-brand img {
	max-width: 150px;
	margin-top: 2px;
}

.opps-ammount {
	width: 55%;
	float: right;
}

.opps-ammount h2 {
	font-size: 36px;
	color: #000000;
	line-height: 24px;
	margin-bottom: 15px;
}

.opps-ammount h2 sup {
	font-size: 16px;
	position: relative;
	top: -2px
}

.opps-ammount p {
	font-size: 10px;
	line-height: 14px;
}

.opps-reference {
	margin-top: 14px;
}

.opps-h1 {
	font-size: 27px;
	color: #000000;
	text-align: center;
	margin-top: -1px;
	padding: 6px 0 7px;
	border: 1px solid #b0afb5;
	border-radius: 4px;
	background: #f8f9fa;
}

.opps-instructions {
	margin: 32px -45px 0;
	padding: 32px 45px 45px;
	border-top: 1px solid #b0afb5;
	background: #f8f9fa;
}

.opps-ol {
	margin: 17px 0 0 16px;
}

.opps-li + .opps-li {
	margin-top: 10px;
	color: #000000;
}

.opps-a {
	color: #1155cc;
}

.opps-footnote {
	margin-top: 22px;
	padding: 22px 20 24px;
	color: #108f30;
	text-align: center;
	border: 1px solid #108f30;
	border-radius: 4px;
	background: #ffffff;
}

.img-barcode{
  text-align: center;
  margin-top: 2em;
}

.modal {
  overflow: scroll!important;
}
/*=============================================================
                  OXXO PAY
===============================================================*/

/*=============================================================
                  APP ADMIN
===============================================================*/
.app-user{
  background-color: #EEEEEE!important;
}

.btn-app{
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%);
}

.btn-app:hover{
    box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
}

.btn-app--tether{
  background-color: #26A17B;
}

.btn-app--tether:hover{
  background-color: #26A17B!important;
}

.menu-icon-principal{
  height: auto;
  width:1.5em;
  fill:#555555;
}
#btn-user::after{
  display:none;
}

.min-height-45{
  min-height: 45vh;
}

.side-menu-principal{
  /* height: 100vh; */
  height: 100%;
  z-index: 5;
  box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
  /* background-color:#F2F5F7; */
  background-color:#fff;
}

.side-menu-principal--left {  
  transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}

.side-menu{
  /*height: 100vh;*/
  height: 100%;
  z-index: 30;
  box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
  /* background-color:#F2F5F7; */
  background-color:#fff;
}

.side-menu--left{
  left:-100%;
  transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}

.side-menu--left.active{
  left: 0;
}

.side-menu--right{
  right:-200%;
  transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}

.side-menu--right.active{
  right: 0;
}

.side-menu > .container-content, .side-menu-principal > .container-content{
  height: inherit;
}

.nav-link-principal--item{

  text-transform: capitalize!important;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  color:#6c757d;
  border-radius: 6px;
}

.nav-link-principal--item  > svg{
  height: auto;
  width: 1.3em;
}

.nav-link-principal .active{
  background-color:#26A17B;
  color:#fff!important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}


.nav-link-principal--item:hover{
  background-color:#26A17B!important;
  color:#fff!important;
  
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.guides-id{
  margin-top: 3em;
  margin-bottom: 3em;
}

#notificationExample{
  position: absolute;
  z-index: -4;
  opacity: 0;
}
.menu-desktop--btn{
  height: 5em;
  width: inherit;
}
.side-menu--header{
    background-color: #26A17B;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    color: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.side-menu--header--sub-title{
  font-size:0.5em;
}

.nav-link-container-scroll{
  width:85%; margin:1em 1em; height: 70vh;
}

.footer-app{
  background-color: transparent!important;
}

.footer-app  p{
  font-size: 0.7em;
}

.movil-menu{
  
  visibility: hidden;
  height: auto;
  bottom: 0%;
  background-color: #26A17B;  
  z-index: 20;
  position: fixed;
  
}

.movil-menu button{
  color:#fff;
}

.card-app-container{  
  border-radius: 6px;
}

.card-app{
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  border-radius: 6px;
}

.card-app:hover{
  box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
}

.card-app.active{
  -moz-transform: translateY(-0.3rem) scale(1.03);
  -webkit-transform: translateY(-0.3rem) scale(1.03);
  transform: translateY(-0.3rem) scale(1.03);
  box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
}

.card-secondary{
    width: 5em;
    /* width: 30%; */
    height: 5em;
    background-color: #26A17B;
    top: -1.5em;
    border-radius: 6px;
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%);
}

.card-secondary-main-view{
  width: 95%;
  height: 1.5em;
  background-color: #26A17B;
  top: -0.5em;
  border-radius: 6px;
  box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%);
}

.card-secondary-icon{
  width: 2em;
  fill: #fff;
}

.movil-desktop-text{
  width: 100%;
  text-align: center;
}

.text-color-grey-app{
  color: #6c757d!important;
  text-decoration: none!important;
}

.text-decoration-none{
  text-decoration: none!important;
}

.close-layer {
  height: 100%;
  width: 100%;
  content: " ";
  position: fixed;
  top: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 25;
  background-color: rgba(0,0,0,.6);
  transition: all 0.7s cubic-bezier(.25,.8,.25,1);
  cursor: pointer;
}

.close-layer.active{
  visibility: visible;
  opacity: 1;
}

.close-layer--x{
  fill: #fff;
  width: 3em;
}
.close-layer--x--right{
  float: right;
}

.close-layer--x--left{
  float: left;
}

.side-menu--header--icon{
  width: 3.5em;
  fill: #fff;
}

.side-menu-notification--header--icon{
  width: 2.5em;
  fill: #fff;
}

.notification-badge{
  position: absolute;
  top: 0;
  left: 55%;
}
.notifcation-size-p{
  font-size: 0.8em;
}

.svg-container-notification{
  height: 3em;
  width: 3em;
  text-align: center;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.svg-container-notification--new{
  background: #26A17B;
}

.svg-container-notification--old{
  background: #EEEEEE;
}

.svg-icon-nav{
  width: 1.7em;
 
}


.svg-icon-nav--new{  
  color:#fff;
}

.nav-link-principal--color{
  background-color: #EEEEEE;
}

.side-menu--footer{
  width: 100%;
}

.side-menu--footer img{
    width: 45%;
    margin: 0 auto;
    display: block;
}

.price-sidebar-close{
  top: -100%;
  transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}

.price-sidebar-close.active-secondary{
  top:0;
}

.nav-link-pills{
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%);
    background-color: #fff;
    border-radius: 6px;
    color: #6c757d;  
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.nav-link-pills:hover{
  background-color: #26A17B;
  color: #fff!important;
  box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
}
.nav-link-pills.active{
  background-color: #26A17B!important;
  color: #fff!important;
  box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%); 
}

.svg-icon-pills{
  height: auto;
  width: 1.3em;
}

.card-profile-main-view{    
    height: 9em;
    width: 9em;
    margin: -6em auto 0;
    background-color: #26A17B;
    top: -3.5em;
    border-radius: 50%;
    box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
    /* box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%); */
}

.card-profile-main-view > svg{
  fill: #fff;
  width: 4em;
}

.profile-card{
  width: 1em;
}

.icon-device{
  width: 2em;
}
.card-device{
  color: #6c757d;
}
.card-device:hover{
  background-color: #26A17B;
    color: #fff!important;
    box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
}


.security-icon{
  width: 0.8em;
  fill:#6c757d;
}

.price-currency{
  font-size: 0.6em;
}

.price-currency--color{
  color: #999;
}

.card-body-app-price-container{
  /* height: 8em; */
  height: 11em;
  background-color: #EEEEEE;
}

.card-app-price.active .card-body-app-price-container{
  background-color: #26A17B;
}

.card-app-price.active .price-currency--color ,.card-app-price.active .price-app-color{
  color: #fff!important;
}

.mdl-confirm-close{
  position: absolute;
  right: 1em;
}

.mdl-confirm-btn{
  width: 10em;
}

.confirm-warning-icon{
  height: 1.5em;
}

.card-secondary-chart{
    width: 100%;
    background-color: #26A17B;
    top: -1.5em;
    border-radius: 6px;
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%);
    margin-top: -3em;
}
.ct-chart-white .ct-line,
.ct-chart-white .ct-point {
  stroke: #fff;
}
.ct-chart-white .ct-label {
  color: hsla(0,0%,100%,.7);
}

.ct-chart-white .ct-grid {
  stroke: hsla(0,0%,100%,.2);
}

.ct-chart-white  .ct-bar, .ct-chart-white  .ct-line, .ct-chart-white  .ct-point, .ct-chart-white .ct-slice-donut {
  stroke: hsla(0,0%,100%,.8);
}

.btn-radio-buttons{
    border-color: currentColor;
    color: #4caf50;
    background-color: transparent;
    border: 1px solid #4caf50;
}

.btn-radio-buttons:hover, .btn-radio-buttons:active, .btn-radio-buttons:focus{
  color: #fff;
  background-color: #26A17B;
}


.btn-radio-buttons.active{
  color: #fff;
  background-color: #26A17B;
}

.copy-icon{
  height: 3em;
  width: 3em;
  
}

.copy-icon:hover{
  box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
}
.copy-icon-svg{
  fill:#6c757d;
  width:1.5em;
  height: auto;
}

.tooltip-inner{
  background-color: #63727C;
  border-radius: 6px;
}

.svg-grey-color{
  fill:#6c757d;
}

.ellipsis_box {
  max-width: 40%;
  display: inline-flex;
  flex-wrap: nowrap;
}



.ellipsis_box_start {
  flex: 0 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.ellipsis_box_end {
  flex: 1 0 auto;
  white-space: nowrap;
  margin-left: -1px;
}

/*=============================================================
                  Onfido
===============================================================*/
.ods-button.-action--primary{
  background-color: #26A17B !important;
  color: #fff!important;
  border-color: #26A17B!important;

  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;  
  cursor: pointer
}
.ods-button.-action--primary:hover {
  background-color: #4ab396!important;

  -moz-transform: translateY(-0.3rem) scale(1.03);
  -webkit-transform: translateY(-0.3rem) scale(1.03);
  transform: translateY(-0.3rem) scale(1.03);
}

.ods-button.-action--primary:focus, .ods-button.-action--secondary:focus, .ods-button.-action--tertiary:focus {
  -webkit-box-shadow: inset 0 0 0 2px rgba(38 161 123),inset 0 0 0 3px rgba(38 161 123)!important;
  box-shadow: inset 0 0 0 2px rgba(38 161 123),inset 0 0 0 3px rgba(38 161 123)!important;
  border-color: rgba(38 161 123)!important;
}

.onfido-sdk-ui-PageTitle-title, .onfido-sdk-ui-PageTitle-subTitle{
  color: #6c757d!important;
}

.onfido-sdk-ui-Welcome-instructions > ol{
  margin-top: 1.3em!important;

}

.onfido-sdk-ui-DocumentSelector-option{
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;  
  cursor: pointer
}

.onfido-sdk-ui-DocumentSelector-option:hover{
  -moz-transform: translateY(-0.3rem) scale(1.03);
  -webkit-transform: translateY(-0.3rem) scale(1.03);
  transform: translateY(-0.3rem) scale(1.03);
}

.onfido-sdk-ui-DocumentSelector-option.onfido-sdk-ui-DocumentSelector-optionHoverDesktop:hover {
  -webkit-box-shadow: 0 0 0 2px #26A17B!important;
  box-shadow: 0 0 0 2px #26A17B!important;
}

.onfido-sdk-ui-Theme-link, .onfido-sdk-ui-Theme-textButton {  
  border-bottom-color: #26A17B!important;

  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;  
  cursor: pointer  
}

.onfido-sdk-ui-Theme-link:not(:disabled):hover, .onfido-sdk-ui-Theme-textButton:not(:disabled):hover {
  background-color: #26A17B!important;
  
  -moz-transform: translateY(-0.3rem) scale(1.03);
  -webkit-transform: translateY(-0.3rem) scale(1.03);
  transform: translateY(-0.3rem) scale(1.03);
}

.onfido-sdk-ui-Theme-header{
  background-color: #26A17B!important;
}
/*=============================================================
                 End Onfido
===============================================================*/
/*=============================================================
                 Drag & Drop
===============================================================*/
.drag-area {
  border: 2px dashed #6c757d;
  height: 12em;
  width: 100%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.drag-area.active{
  border: 2px solid #fff;
}
.drag-area .icon > svg{
  height: auto;
  fill: #6c757d;
  width: 4em;
}
.drag-area header{
  font-size: 30px;
  font-weight: 500;
  color: #fff;
}
.drag-area span{
  font-size: 25px;
  font-weight: 500;
  color: #fff;
  margin: 10px 0 15px 0;
}
.drag-area button{
  padding: 10px 25px;
  font-size: 20px;
  font-weight: 500;
  border: none;
  outline: none;
  background: #fff;
  color: #5256ad;
  border-radius: 5px;
  cursor: pointer;
}
.drag-area img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
}



/*=============================================================
                 End Drag & Drop
===============================================================*/

@media  (max-width: 576px) and (max-height: 600px) {
  .nav-link-container-scroll{
    width:85%; 
    margin:1em 1em; 
    height: 60vh;
  }
}
/* Small devices (tablets, 576px and down)*/
@media (max-width: 576px) {
  .img-mobile-nav{
    width: 3.5em;
  }

  .mdl-confirm-usdt-text{
    font-size:1.5em;
  }

  .col-xs-10 {
    -ms-flex: 0 0 83.333333%!important;
    flex: 0 0 83.333333%!important;
    max-width: 83.333333%!important;
  }

  
}

/* Medium devices (tablets, 768px and down)*/
@media (min-width: 577px) and (max-width: 768px) {
  .img-mobile-nav{
    width: 7.5em;
  }

}

/* Medium devices (tablets, 768px and down)*/
@media (min-width: 767px) and (max-width: 991px) {
  .img-mobile-nav{
    width: 8.5em;
  }

}

/* Medium devices (tablets, 991px and down)*/
@media (max-width: 991px) {
  .footer-app  .nav-link{
    width: 100%;
  }
  .side-menu{    
    background-color: #fff;    
    height: 100%;
    
  }
  .side-menu-principal{
    background-color: #fff;    
    height: 100%;
    z-index: 30;
  }

  .side-menu-principal--left
  {
    left:-70%;    
  }

  .side-menu-principal--left.active
  {
    left: 0;    
  }
  
  .movil-menu{
    visibility: visible;
  }
  .min-height-80{
    min-height: 20vh;
  }
  .movil-desktop{
    display: none;
  }

  .side-menu--header--icon, .side-menu-notification--header--icon{
    width: 2em;
  }

  .side-menu--header > p, .side-menu--header > h4 {
    font-size:0.9em;
  }

  .text-welcome{
    display: none;
  }

  .price-sidebar-close{
    display:none;
  }
  #main-view{
    padding: 0!important;
  }
  .card-device{
    width: 100%;
  }

  .p-custom-0{
    padding: 0!important;
  }

  .mdl-confirm-detail-text{
    font-size: 0.8em;
  }

  .mdl-confirm-detail-small{
    font-size:0.5em;
  }

  .mdl-confirm-btn{
    width: 100%;
  }
  .footer-app{
    position: relative;
    padding-bottom: 2em;
  }

  .v-pills-tab-container{
    overflow: scroll;
  }
  
  #v-pills-tab{
    flex-direction: row!important;    
    flex-wrap: nowrap;
  }
  

}

/* Large devices (desktops, 992px and 1200px)*/
@media (min-width: 991px) and (max-width: 1200px) {
  .card-secondary {
    width: 4em;
    height: 4em;
  }

  .card-secondary-icon {
    width: 1.7em;
  }

  .side-menu--header--icon{
    width:2.5em;
  }

}

@media (min-width: 769px){
  .footer-app .copyright{
    text-align: right;
  }
}

@media (min-width: 992px){
  .side-menu-principal--left {  
    left:0;
  }
  .side-menu-principal--left.active-secondary
  {
    left: -100%;    
  }

  .main-content-container{
    transition: all 0.5s cubic-bezier(.25,.8,.25,1);
  }
  .card-device{
    width: 32em;
  }
}

/*=============================================================
                  APP ADMIN
===============================================================*/