body { margin-bottom: 80pt; padding-bottom: 80pt; }

.dt-paging nav {
    background-color: inherit;
    border: inherit;
    color: inherit;
    height: inherit;
    line-height: inherit;
    box-shadow: inherit;
    display: flex; 
    justify-content: center;
    webkit-box-shadow:  inherit; 
} 

.dt-paging nav i {
    height: inherit;
    font-size: inherit;
    line-height: inherit;
} 

@media only screen and (max-height : 759.00px) and (max-width : 600.99px) {
	.dato-banco1 {
		width: 180px !important;
		margin: auto;
	}
	.dato-banco2 {
		width: 150px !important;
		margin: auto;
	}
}


@media only screen and (max-width : 380.00px) {
	.titulo-pag {
		font-size: 1.50rem;
	}
}


/*
para agregar mensaje de muy pronto a los iconos
.icon-val {
	position: relative;
}
.icon-val .icon-text {
	position: absolute; 
	right: 0px; 
	top: -9px; 
	font-size: 10px;
}*/

@media only screen and (max-width : 600.99px) {
	.titulo-menu {
		font-size: 12px;
	}
	
	h4 {
		font-size: 1.92rem;
	}
}

.overlay {
	position: fixed;
    z-index: 999;
    top: -25%;
    left: 0;
    bottom: 0;
    right: 0;
    height: 125%;
    width: 100%;
    background: #000;
    display: none;
    will-change: opacity;
	opacity: 0.5;
}

@media only screen and (min-width : 993px) {
  #toast-container {
    top: 15%;
    right: 5%;
    max-width: 86%;
  }
}

.logo-banco-autogestion {
	width:15% !important; 
	display: block !important; 
	margin:0 auto !important;
	padding-top: 20px !important;
}

.confirmacion {
	background: var(--background-color-confirmacion);
}

.referencia_ban {
	background: white;
	padding: 10px;
}



.confirmacion {
	margin: 0 auto;
  	max-width: 1280px;
	background: var(--background-color-confirmacion);
	width: 90%;
}

@media only screen and (min-width : 601px) {
  .confirmacion {
    width: 85%;
  }
  
}
@media only screen and (min-width : 993px) {
  .confirmacion {
    width: 70%;
  }
  
  .modal_jur {
	width: 650px;
  }
}

.titulo {
	color: var(--primary-color);
}

.sug_obs_ref {
	background-color: #dddde0;
	padding: 10px;
	border-radius:3px;
}

[theme='dark'] .sug_obs_ref {
	background-color: #373737
}
 
.header-icon-text {
	color: var(--font-color-main);
}

.header-title-text {
	color: var(--primary-color);
}

[theme='dark'] .header-icon-text {
	 color: var(--font-color-main);
}

.modal-fixed-footer {
	overflow:hidden !important;
}

.benicon:hover {
	background: transparent;
}

.header-pad {
	margin-left: 15px;
	margin-right: 15px;
}

.tabs .tab a.active, .tabs .tab a:focus, .tabs .tab a:hover {
    color: var(--font-on-primary-color-main);
    background-color: var(--primary-color);
}

[theme='dark'] .tabs .tab a.active, .tabs .tab a:focus, .tabs .tab a:hover {
    color: var(--primary-color);
    background-color: var(--primary-color-focus-opaque);
}

@media only screen and (min-width : 1401px) {
	.container {
	  margin: 0 auto;
	  max-width: 1280px;
	  width: 40%;
	}

	.cg {
		width: 90%;
	}
}

.container-table {
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}

@media only screen and (min-width : 601px) {
  .container-table {
    width: 85%;
  }
}
@media only screen and (min-width : 993px) {
  .container-table {
    width: 70%;
  }
}

.input-field .suffix {
    top: 28px;
}

.collapsible-header2 {
  -webkit-tap-highlight-color: transparent;
  padding: 1rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.collapsible-body2 {
  max-height: 100%;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 2rem;
  overflow: hidden;
}

.login-autogestion1 {
   text-align: right;
   padding-right: 10px;
}

.login-autogestion2 {
   text-align: left;
   border-left: 2px solid var(--font-color-medium) !important;
}

.field-lg {
	width: 430px;
	margin: 0 auto;
}
  
@media only screen and (max-width : 600.99px) {
  .login-autogestion1 {
    text-align: center;
  }
  
  .field-lg {
		width: 100%;
  }
  
  .login-autogestion2 {
    text-align: center;
    border-left: 0px solid var(--font-color-medium) !important;
    margin-left: 0px;
  }
}

.menuFooterIcon > .active {
  height:4px;
  border-radius:3px;
  background-color: var(--primary-color);
}

.menuFooterIcon > .act {
  color: var(--primary-color);
}


[theme='dark'] .menuFooterIcon > .active {
  background-color: var(--primary-color);
}

.tabs::-webkit-scrollbar {
  height: 5px;
}

/* Track */
.tabs::-webkit-scrollbar-track {
   
}
 
/* Handle */
.tabs::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
.tabs::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.tabs-container {
	position: relative;
}

.tabs-container #tabs-icon-left {
	position: absolute;
	left: -8px;
	z-index: 1;
	cursor: pointer;
	font-size: 25px;
	padding-top: 12px;
	background-color: var(--surface-color);
	height: 100%;
	border-top-left-radius: 10px !important; 
	border-bottom-left-radius: 10px !important; 
}

.tabs-container #tabs-icon-right {
	position: absolute;
	right: -8px;
	z-index: 1;
	cursor: pointer;
	font-size: 25px;
	padding-top: 12px;
	background-color: var(--surface-color);
	height: 100%;
	border-top-right-radius: 10px !important; 
	border-bottom-right-radius: 10px !important; 
}

.tabs-alt {
	height: 50px;
}

.padding-div {
	padding-bottom: 189px !important;
}

:root {
	--md-sys-color-primary-light: #ff5000;  
	--primary-color-raised-focus-solid: #c84a06;
	--primary-color-raised-hover-solid: #c84a06;
	--background-color-confirmacion: var(--background-color-card);
}

:root[theme='dark'] {
	
	--md-sys-color-primary-dark: #ff5000;
    --background-color: #121212;
    --surface-color: #242424;

    --font-color-main: rgba(255, 255, 255, 0.87);
    --font-color-medium: rgba(255, 255, 255, 0.60);
    --font-color-disabled: rgba(255, 255, 255, 0.38);

    --font-on-primary-color-main: rgba(0, 0, 0, 0.87);
    --font-on-primary-color-dark-main: rgba(255, 255, 255, 0.87);
    --font-on-primary-color-dark-medium: rgba(255, 255, 255, 0.60);
    --font-on-primary-color-medium: rgba(0, 0, 0, 0.56);
    --font-on-primary-color-disabled: rgba(0, 0, 0, 0.38);

    --hover-color: rgba(255, 255, 255, 0.04);
    --focus-color: rgba(255, 255, 255, 0.12);
    --focus-color-solid: #424242;

    --background-color-disabled: rgba(255, 255, 255, 0.12);
    --background-color-level-4dp: rgba(255, 255, 255, 0.09);
    --background-color-level-16dp-solid: #262626;
    --background-color-card: var(--surface-color);
    --background-color-slight-emphasis: rgba(255, 255, 255, 0.05);

    --separator-color: #424242; /* borders between components */

    --error-color: #CF6679;

    --slider-track-color: rgba(255, 255, 255, 0.26);
    --switch-thumb-off-color: #bababa;

    --primary-color: #ff5000;
    --primary-color-dark: #9575CD;
    --primary-color-numeric: 179, 157, 219;
    --primary-color-raised-focus-solid: #c64906;

    --secondary-container-color: #c64906;
    --font-on-secondary-container-color: rgba(255, 255, 255, 0.87);

    --md_sys_color_on-surface: 230, 225, 229;
    
    --background-color-confirmacion: var(--surface-color);
    
}

.label-in-border-wrapper {
  position: relative;
}
.label-in-border {
  	position: absolute;
  	top: -1.5ex;
  	left: -0.9em;
  	-webkit-transform: scale(0.75);
    transform: scale(0.75);
  	/*background-color: #ffffff;*/
}
[theme='dark'] .label-in-border  {
	/*background-color: #242424;*/
}

.modal {
	border-radius: 25px !important;
}

@media (prefers-color-scheme: dark) { 
    .highcharts-background {
	    fill-opacity: 0
	}
}

.highcharts-background {
    fill-opacity: 0
}


.outlined_coll {
	padding: 0px;
    /*background-color: var(--background-color);*/
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 1px solid var(--font-color-medium) !important;
    /*border-radius: 4px !important;*/
}

.cuenta-padding {
	padding-right: 5px !important;
}

.cuenta-icon-down {
	position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 0;
}

.item-text {
	color: var(--primary-color);
	font-weight:normal !important;
}

.dropdown-content {
	background-color: var(--background-color);
    border: 1px solid var(--font-color-medium) !important;
    border-radius: 4px !important;
}


/*color de titulos de la tabla de movimientos*/
th {
    color: var(--primary-color);
}

.dt-layout-table tbody tr {
	cursor: pointer;
}

.dt-search {
    display: none;
}

blockquote {
	margin-top:0px;
}


/*switch*/
.switch {
    --track-height: 32px;
    --track-width: 52px;
    --border-width: 2px;
    --size-off: 16px;
    --size-on: 24px;
    --icon-size: 16px;
    --gap-on: calc(((var(--track-height) - var(--size-on)) / 2) - var(--border-width));
    --gap-off: calc(((var(--track-height) - var(--size-off)) / 2) - var(--border-width));
}

.switch label input[type=checkbox]:checked+.lever {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.switch label input[type=checkbox]:checked+.lever:before,.switch label input[type=checkbox]:checked+.lever:after {
    top: var(--gap-on);
    left: calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2 * var(--border-width));
    width: var(--size-on);
    height: var(--size-on)
}

.switch label .lever {
    content: "";
    display: inline-block;
    position: relative;
    width: var(--track-width);
    height: var(--track-height);
    border-style: solid;
    border-width: 2px;
    border-radius: 15px;
    transition: background .3s ease;
    vertical-align: middle;
    margin: 0 16px;
	
}

.switch label .lever:before,.switch label .lever:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: var(--size-off);
    height: var(--size-off);
    border-radius: 50%;
    left: var(--gap-off);
    top: var(--gap-off);
    transition: left .3s ease,background .3s ease,box-shadow .1s ease,transform .1s ease
}

.switch label input[type=checkbox]:checked+.lever:after {
    background-color: var(--switch-thumb-off-color);
}
/*switch*/

.main {
	padding-top: 20px;
}

/*icono de progreso*/
.loading {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

.preloader-wrapper.big2 {
	width: 85px;
	height: 85px;
}

/*menu de pie de pagina iconografico*/
#btn-nav-previous {
    position: absolute;
	cursor: pointer;
	font-size: 25px;
	background-color: var(--surface-color);
	height: 100%;
	padding: 40px 12px;
	border-top-left-radius: 20px !important;
	color: var(--font-color-main);
}

#btn-nav-next {
	position: absolute;
	cursor: pointer;
	font-size: 25px;
	background-color: var(--surface-color);
	height: 100%;
	padding: 40px 12px;
	border-top-right-radius: 20px !important; 
	right: 0px;
	color: var(--font-color-main);		    
}
.menu-inner-box
{ 
    width: 100%;
    white-space: nowrap;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}
.menu
{  
    padding:0;
    margin: 0;
    list-style-type: none;
    display:block;
    text-align: center;
}
.menu-item
{
    height:100%;
    padding: 0px 25px;
    display:inline;
    margin:0 auto;
    text-decoration:none;
    text-align:center;
    white-space:no-wrap;
}

.last-item{
  margin-right: 50px;
}

.footerbar {
	width: 100%;
	min-height: 2.5rem;
	background: var(--surface-color);
		
}

.footerbar_bottom {
	position: relative;
	display: grid;
	width: 100%;
	color: white;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border: 2px solid #000000;
	border-bottom: 0px;
	/*box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.65);*/
}

[theme='dark'] .footerbar_bottom {
	border: 0px;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.65);
}

.footerbar_bottom--fab {
	top: -460%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: -50px;
}

/*posicionar elemento al pie de la pagina*/
.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 96%;
	text-align: center;
	margin: 0 auto;
	left: 0;
	right: 0;
	padding-left: 5px;
	padding-right: 5px;
}

@media only screen and (max-width : 600.99px) {
	.footer {
		width: 100%;
	}
}



/*estilo a los iconos y titulos del menu de pie de pagina iconografico*/
.footer-icon > button {
	border: 0px;
	background-color: transparent;
	touch-action: manipulation;
	padding: 0px; 
	margin: 0px;
	cursor: pointer;
	color: #1a1c1e;
}

[theme='dark'] .footer-icon > button {
	color: var(--font-color-main);
}



.footer-icon:hover  {
	cursor: pointer;
}

.footer-icon:focus  {
	outline:0;
}

.footer-icon button:focus  {
	outline:0;
}

.footer-icon > button >i {
	margin-top: 3px;
	margin-bottom: 8px;
	font-size: 35pt;
	color: #323131;
	background-color: transparent;
	cursor: pointer;
}

[theme='dark'] .footer-icon > button >i {
	color: #ff5000;
}

@media (max-width: 460px) {
	.footer-icon > button >i {
		font-size: 20pt;
		background-color: transparent;
	}
}

@media (pointer:coarse) {
	.footer-icon {
		cursor: default;
	}
	
    .footer-icon > button {
		cursor: default;
	}
	.footer-icon:hover  {
		cursor: default;
	}
	.footer-icon > button >i {
		cursor: default;
	}
}

#dropup_menu_icons {
	display: none;
	padding-top: 10px;
	padding-bottom:  20px;
}

#dropup_menu_icons_principal {
	padding-top: 10px; 
	margin-bottom: 20px;
}

/*banner*/
.banner-row {
	display: block;    
	margin-block-start: 1em;   
	margin-block-end: 1em;   
	margin-inline-start: 0px;    
	margin-inline-end: 0px;
}

.banner-row-icon {
	text-align: right;
	padding-top: 6px;
}

.banner-radius {
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	width: 96%;
	margin: 0 auto;
	left: 0;
	right: 0;
}

@media only screen and (max-width : 600.99px) {
	.banner-radius {
		width: 100%;
	}
}


/*notificaciones*/
.notification-container{
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0px;
}

.notification-container2{
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0px;
}

.notification-circle2{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    color: white;
    box-shadow: white 0px 0px 0px 2px;
    font-size: 30%;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 999px;
    min-width: 10px;
    min-height: 12px;
    padding: 1px 5px;
    position: absolute;
    z-index: 1;
    animation-name: pop;
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-fill-mode: forwards;
}

.notification-circle{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    color: white;
    box-shadow: white 0px 0px 0px 2px;
    font-size: 70%;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 999px;
    min-width: 10px;
    min-height: 12px;
    padding: 3px 5px;
    position: absolute;
    z-index: 1;
    animation-name: pop;
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-fill-mode: forwards;
}

.circle-shrink{
    animation-name: shrink;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-fill-mode: forwards;
}

.notification-circle::selection{
    background: none;   
}

@keyframes pop {
    from{
        transform: scale(0.4);
    }
    to{
        transform: scale(1);
    }
}

@keyframes shrink {
    from{
    }
    to{
        transform: scale(0);
        opacity: 0;
    }
}

.cursor-pointer {
	cursor: pointer;
}

@media (pointer:coarse) {
	.notification-circle{
		cursor: default;
	}
	.notification-container {
		cursor: default;
	}
	.cursor-pointer {
		cursor: default;
	}
}



small {
	font-size: 80%;
}

.monto {
	color: #ff5000;
}

.saldo-card {
	cursor: pointer;
	margin: 0px;
}

@media (pointer:coarse) {
    .saldo-card {
		cursor: default;
		margin: 0px;
	}
}

.saldo-card:active,
.saldo-card.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0px 0px 8px 200px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0px 0px 8px 200px rgba(0,0,0,0.05);
  box-shadow: inset 0px 0px 8px 200px rgba(0,0,0,0.05);
}


.content {
  margin: 20px 0 10px;
}
.content p {
  
}
.content .requirement-list {
  margin-top: 20px;
}
.requirement-list li {
  list-style: none;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.requirement-list li i {
  width: 20px;
  color: #aaa;
  font-size: 0.6rem;
}
.requirement-list li.valid i {
  font-size: 1.2rem;
  color: #4285F4;
}
.requirement-list li span {
  margin-left: 12px;
}
.requirement-list li.valid span {
  color: #999;
}

@media screen and (max-width: 500px) {
  .content p  {
    font-size: 1.15rem;
  }
  .requirement-list li {
    font-size: 1.0rem;
  }
  .requirement-list li span {
    margin-left: 7px;
  }
}

.container-modal-small {
	
}

@media only screen and (min-width : 601px) {
  .container-modal-small {
    width: 30%;
  }
}
@media only screen and (min-width : 993px) {
  .container-modal-small {
    width: 30%;
  }
}

table.dataTable thead .dt-column-order::after {
	font-family: "Font Awesome 6 Pro";
    content: "\f0d7" !important;
}
table.dataTable thead .dt-column-order::before {
	font-family: "Font Awesome 6 Pro";
    content: "\f0de" !important;
}

.login {
	margin-top: 10px;
	position: absolute;
	left: 0px;
  	right: 0px;
}

/*
#banner-movil {
	background-color: #dbdbdb;
}
*/
.container-login {
  margin: 0 auto;
  max-width: 1280px;
  width: 100%;
}

[theme='dark'] #banner-movil {
	background-color: transparent;
}

.card-login {
	  background-color: transparent;
	  border-radius: 0px;
	  -webkit-box-shadow: none;
	  box-shadow: none;
}

.logo-banco-login {
	width: 120.00px !important;
	padding-top: 10px;
}

.logo-r4-login {
	padding-left: 10px;	
	width: 70.5px !important;
	padding-bottom: 16px;
}
	
#banner-movil {
	background-image: none;
	background-position: left;
	background-repeat: no-repeat;
}

@media only screen and (max-width : 992.99px) {
	
	#banner-movil {
		/*
		background-image: none;
		background-position: left;
		background-repeat: no-repeat;
		*/
		
		background: url("../../images/fondo-l.png") no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	[theme='dark'] #banner-movil {
		background: url("../../images/fondo-d.png") no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

}

body {
	background: url("../../images/fondo-l.png") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

[theme='dark'] body {
	background: url("../../images/fondo-d.png") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
	
@media (min-width: 790px) {
	#banner-movil {
		background: url("../../images/fondo-login.png") no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	.logo-banco-login {
		width: 120.00px !important;
	}
	
	.logo-r4-login {
		padding-left: 10px;
		width: 77.5px !important;
		padding-bottom: 25px;
	}
	
	#banner-movil {
		background-color: transparent;
	}
	
	.container-login {
	  margin: 0 auto;
	  max-width: 1280px;
	  width: 50%;
	}
	
	.login {
		margin-top: 100px;
		position: absolute;
		left: 0px;
	  	right: 0px;
	}
	
	.card-login {
	  	overflow: hidden;
		position: relative;
		background-color: var(--background-color-card);
		-webkit-transition: -webkit-box-shadow 0.25s;
		transition: -webkit-box-shadow 0.25s;
		transition: box-shadow 0.25s;
		transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
		border-radius: 12px;
		-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);
	    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);
	}
	
}

.icon-top i {
	padding-top: 6px;
}


@media print {
	@page{
	  margin-top: 70px;
	}
   
	.not-print {
		visibility:hidden;
		display: none !important;
        height: 0;
	}
	
	footer {
		visibility:hidden;
		display: none !important;
        height: 0;
	}
	
	header {
		visibility:hidden;
		display: none !important;
        height: 0;
	}
	
	.print {
		display: unset !important;
	}
	
	.print:last-child {
	     page-break-after: auto;
	}
	
	html, body {
        height: 98%; 
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
        background-image: none;
    }
	
}


[theme='dark'] .strong {
  font-weight: bolder;
}

.only-on-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .only-on-dark {
    display: block;
  }
  
  .only-on-light {
    display: none;
  }
}
/*
.responsive-img {
  width: 100%;
  height: auto;
}*/

i.semaforo-abrir-cuenta {
  display: inline-block;
  background-color: #ff5000;
  border-radius: 50%;
  width: 110px;
  height: 110px;
}

i.semaforo-soporte {
  display: inline-block;
  background-color: #1ba553;
  border-radius: 50%;
  width: 110px;
  height: 110px;
}

i.semaforo-login {
  display: inline-block;
  background-color: #737373;
  border-radius: 50%;
  width: 110px;
  height: 110px;
}

.semaforo-center {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.semaforo-center-redes {
	padding-left:10px;
	padding-right:10px;
}

.semaforo-center-redes-icon {
	font-size: 20px;
	color: #898586;
}

.semaforo-center-abre-cuenta {
	width: 220px;
	background-color:#6a2aac
}

.semaforo-center-soporte {
	width: 220px;
	background-color:#323131
}

.semaforo-center-inicio {
	width: 220px;
}  

[theme='dark'] .semaforo-center-abre-cuenta {
	width: 220px;
	color: #ffffff
} 

[theme='dark'] .semaforo-center-soporte {
	width: 220px;
	color: #ffffff
} 

[theme='dark'] .semaforo-center-inicio {
	width: 220px;
	color: #ffffff
}

.semaforo-center-middle {
  display: table-cell;
  vertical-align: middle;
}

.fingerprint-style {
	margin-left: 20px;
	vertical-align: middle;
	padding: 6px;
}

.fingerprint-style i {
	font-size: 25pt;
	cursor: pointer;
	color: var(--primary-color);
}

input[type='range'] {
  height: 30px;
  overflow: hidden;
  cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
  width: 200px;
  height: 10px;
  background: #cdcdcd;
}
input[type='range']::-webkit-slider-thumb {
  position: relative;
  height: 30px;
  width: 30px;
  margin-top: -10px;
  background: var(--primary-color);
  border-radius: 50%;
  border: 2px solid white;
}

@font-face{
    font-family: "Gotham";
    src: url("GothamBold/5d6f50ed2dde0e4ad455448f896c09f0.eot");
    src: url("GothamBold/5d6f50ed2dde0e4ad455448f896c09f0.eot?#iefix")format("embedded-opentype"),
        url("GothamBold/5d6f50ed2dde0e4ad455448f896c09f0.woff")format("woff"),
        url("GothamBold/5d6f50ed2dde0e4ad455448f896c09f0.woff2")format("woff2"),
        url("GothamBold/5d6f50ed2dde0e4ad455448f896c09f0.ttf")format("truetype"),
        url("GothamBold/5d6f50ed2dde0e4ad455448f896c09f0.svg#Gotham Bold")format("svg");
    font-weight: 500;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family: "Gotham";
    src: url("GothamMedium/3a47f5f06b5484abfeee9eac90348a9c.eot");
    src: url("GothamMedium/3a47f5f06b5484abfeee9eac90348a9c.eot?#iefix")format("embedded-opentype"),
        url("GothamMedium/3a47f5f06b5484abfeee9eac90348a9c.woff")format("woff"),
        url("GothamMedium/3a47f5f06b5484abfeee9eac90348a9c.woff2")format("woff2"),
        url("GothamMedium/3a47f5f06b5484abfeee9eac90348a9c.ttf")format("truetype"),
        url("GothamMedium/3a47f5f06b5484abfeee9eac90348a9c.svg#Gotham-Medium")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}
 
html,
button, input, optgroup, select, textarea {
  font-family: "Gotham",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}