:root {
	--nav: #202D33;
	--nav-shad: #162025;
	--bg-blue: #0186B9;
	--bg-green: #8fd23c;
	--bg-red: #BA0226;
	--bg-gold: #BAB002;
	--bg-lime: #DBFF5E;
	--bg-blue-1: #0280B2;
	--bg-blue-2: #014F6E;
	--bg-blue-line: #6dabcc;
	--bg-blue-green: #235265;
	--bg-green-line: #02BA8A;
	--bg-green-shad: #1E3B33;
	--bg-blue-shad: #1E333B;
	--bg-brown-line: #9a9240;
    --btn-primary: #196E90;
	--txt-primary: #00506e;
}

@font-face {
	font-family: 'Segoe UI', sans-serif;
	src: 
		url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format("truetype");

}

body {
    font-optical-sizing: auto;
    /* font-weight: 400; */
    font-style: normal;
    font-variation-settings:"wdth" 100, "YTLC" 600;
	background: #f5f5f5;
}
.navbar {
    margin-bottom: 0;
    background-color: var(--nav);
    z-index: 99;
    border: 0;
    font-size: 16px !important;
    line-height: 1.42857143 !important;
    border-radius: 0;
    /* font-family: Lato, sans-serif; */
    padding: 0 !important;
}

.navbar-nav {
	flex-direction: row;
}

/* .menu, .navbar .navbar-brand {
    color: #fff !important;
    letter-spacing: 2px;
    height:65px;
    padding-top: 20px !important;
    padding-left:50px !important;
    padding-right:50px !important;
} */

#myNavbar .nav-link {
	color: white;
	padding: 15px 45px;
	height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
}

#myNavbar .nav-link:hover, .navbar-nav li.active a {
    color: var(--nav);
    background-color: #fff;
}
a{
    cursor: pointer;
}
.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}
/* .espacio{} */
.registro{
  	font-size:20px;
  	padding: 1% 3% 1% ;
}
.style{
  	font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
  	color: #737373;
}

.texto{
  	font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
  	color: #000;
  	font-size: 1.25em;
}

.btn1{
  	background-color: #4A9FD9; 
  	color: white;
  	font-family: Consolas, sans-serif;
  	text-transform: uppercase;
  	font-weight: bold;
  	border-radius: 26px;
}
.btn1:hover{
  	color: white;
}

.encabezado-tabla{
  	background-color: black;
  	color: white;
  	font-family: Calibri, sans-serif;
  	text-align: center;
  	font-size: 2.5em;
  	padding: 0.5% 0 0.5%;
}
.encabezado-tabla p{
  	font-size: 18px !important;
}
.precio{
  	color: #00A6FF;
}

.box{
    font-family: 'Nunito Sans',Helvetica,Arial,Lucida,sans-serif;
    font-size: 16px;
    text-align: center;
    color: #959baf!important;
    background-color: #ffffff;
    border-radius: 4px 4px 4px 4px;
    overflow: hidden;
    border-top-width: 6px;
    border-top-color: #3D72E7;
    padding-top: 28px!important;
    padding-right: 20px!important;
    padding-bottom: 30px!important;
    padding-left: 20px!important;
    box-shadow: 0px 12px 18px -6px rgb(34 56 101 / 20%);
    margin-bottom: 1%;
}

.footer{
	background-color: black;
	padding: 0 7% 0;
}
.redes{
	text-transform: none;
	color: white;
	margin: 0 2% 0;
}
.redes:hover{
	color: gray;
}
.tituloredes{
	font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
  	color: #fff;
  	font-size: 1.2em;
}
.loginSloanDiv {
    height: auto;

    z-index: 2;
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 1px;
    border: solid 1px #e5e1e1;
    background-color: white;
    padding: .5in;
    margin: 5px;
    text-align: center;
    line-height: 50px;
}
.modal{
	z-index: 20000 !important;
	color:black;
}

.modal-header{
	background-color: #4A9FD9;
	color: white !important;
}

.modal-content{
	box-shadow: 0px 12px 18px -6px rgb(34 56 101 / 50%);
}
.contenidoBody {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.imagenIconoSloan{width: 50px;height: 50px;border-radius: 50%}
.iconoBotonSloan{
	background: transparent;
	border: 2px solid #ddd;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 12px;
	border-radius: 5px;
	text-decoration: none;
    color: #3d3d3d;
	transition: 0.3s all;
}
.iconoBotonSloan:hover{
	color: var(--bg-blue-green);
	border-color: #d6eea0;
	background: #f5ffd7;
}
.my-button {padding: 10px 20px;background-color: #4CAF50;color: white;border: none;border-radius: 5px;cursor: pointer;}

.container-options-footer {
	padding: 7% 0 7%;
	text-align: center;
}
.container-options-footer > a {
	text-decoration: none;
	color: #808080;
}
.sub-brand {
	text-align: center;
	color: #727272;
	padding: 3rem;
}

.listai
	{
		display: none;
	}
.listam:hover > .listai{
	cursor: pointer;
	display: block;
}

/* Spinners */
body.spinner-active {
	overflow: hidden;
}
	/* 1 */
    .container-spinner-bar {
		width: -webkit-fill-available;
		height: 100%;
		position: absolute;
		z-index: 100;
	}
    .container-spinner-bar-content-loading {
        margin: 0px;
        color: #266093;
        width: 100%;
        height: 100%;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: fixed;
        background-color: rgb(0 0 0 / 45%);
        /*z-index: 1;*/
        transition: all 0.3s;
    }
	.spinner-bar-loader {
  		width: 45px;
  		height: 40px;
  		background: linear-gradient(#0000 calc(1*100%/6),#fff 0 calc(3*100%/6),#0000 0),
        linear-gradient(#0000 calc(2*100%/6),#fff 0 calc(4*100%/6),#0000 0),
        linear-gradient(#0000 calc(3*100%/6),#fff 0 calc(5*100%/6),#0000 0);
  		background-size: 10px 400%;
  		background-repeat: no-repeat;
	}
	.spinner-bar-loader.active {
		animation: matrix 1s infinite linear;
	}
	/* 2 */
	.container-spinner-words {
	  	display: flex;
	  	flex-direction: column;
	  	align-items: center;
		width: 100%;
    	height: 100%;
    	justify-content: center;
	}
	.spinner-words {
	  	width: 56px;
	  	height: 56px;
	  	display: grid;
	  	border: 4px solid #0000;
	  	border-radius: 50%;
	  	border-right-color: var(--bg-blue);
	  	animation: tri-spinner 1s infinite linear;
	}
	.spinner-words::before,
	.spinner-words::after {
	  	content: "";
	  	grid-area: 1/1;
	  	margin: 2px;
	  	border: inherit;
	  	border-radius: 50%;
	  	animation: tri-spinner 2s infinite;
	}
	.spinner-words::before {
		border-right-color: var(--bg-green);
	}
	.spinner-words::after {
	  	margin: 8px;
		border-right-color: var(--nav);
	  	animation-duration: 3s;
	}
	.container-spinner-words .loader {
	  	color: #4a4a4a;
	  	font-family: "Poppins",sans-serif;
	  	font-weight: 500;
	  	font-size: 25px;
		text-align: center;
	  	-webkit-box-sizing: content-box;
	  	box-sizing: content-box;
	  	height: 40px;
	  	padding: 10px 10px;
	  	display: -webkit-box;
	  	display: -ms-flexbox;
	  	display: flex;
	  	border-radius: 8px;
	}
	.container-spinner-words .words {
	  	overflow: hidden;
	}
	.container-spinner-words .word {
	  	display: block;
	  	height: 100%;
	  	padding-left: 6px;
	  	color: var(--bg-blue-2);
	  	animation: cycle-words 5s infinite;
	}

/*Keyframes*/
	@keyframes matrix {
  		0% {
  		  	background-position: 0% 100%, 50% 100%, 100% 100%
  		}
  		100% {
  		  	background-position: 0% 0%, 50% 0%, 100% 0%
  		}
	}
	@keyframes tri-spinner {
  		100% {
  		  	transform: rotate(1turn);
  		}
	}
	@keyframes cycle-words {
  		10% {
  		  	-webkit-transform: translateY(-105%);
  		  	transform: translateY(-105%);
  		}
  		25% {
  		  	-webkit-transform: translateY(-100%);
  		  	transform: translateY(-100%);
  		}
  		35% {
  		  	-webkit-transform: translateY(-205%);
  		  	transform: translateY(-205%);
  		}
  		50% {
  		  	-webkit-transform: translateY(-200%);
  		  	transform: translateY(-200%);
  		}
  		60% {
  		  	-webkit-transform: translateY(-305%);
  		  	transform: translateY(-305%);
  		}
  		75% {
  		  	-webkit-transform: translateY(-300%);
  		  	transform: translateY(-300%);
  		}
  		85% {
  		  	-webkit-transform: translateY(-405%);
  		  	transform: translateY(-405%);
  		}
  		100% {
  		  	-webkit-transform: translateY(-400%);
  		  	transform: translateY(-400%);
  		}
	}


/* Navbar */
	#myNavbar {
		display: none !important;
	}
	#myNavbar ul.navbar-nav > li.nav-item.dropdown > ul.dropdown-menu {
		border-radius: 0rem;
	}
	#myNavbar .navbar-nav .dropdown-menu {
    	position: absolute;
	}
	.subtitle-rsp {
		font-size: 1.2rem;
		font-weight: 600;
	}
	.dashboard-brand {
		color: white;
		font-weight: 500;
	    width: auto;
	    max-width: 11.5rem;
		display: flex;
    	align-items: center;
	}
	.dashboard-brand:hover, .dashboard-brand:active, .dashboard-brand:focus {
		text-decoration: none;
		color: white;
		outline: 0;
	}
	.img-logo-navbar {
		width: 25%;
	}
	.drop-item-disabled {
		cursor: default;
		pointer-events: none;
	}
	.sign-out {
		color: var(--bg-red);
	}
	.container-sign-in {
		display: flex;
		align-items: center;
	}
	.container-sign-in > a {
		min-width: 100px;
		padding: 6px;
		text-align: center;
    	text-decoration: none;
	}
	.btn-log-in {
		color: white;
    	background: transparent;
    	border: 2px solid white;
		transition: 0.3s all;
	}
	.btn-sign-up {
		color: var(--nav);
		background: white;
		border: 2px solid white;
		transition: 0.3s all;
	}
	.btn-log-in.hvr-sweep-to-right::before {
		background: var(--bg-blue);
	}
	.btn-sign-up.hvr-sweep-to-left::before {
		background: var(--bg-green);
		border-color: var(--bg-green);
	}
	.btn-log-in.hvr-sweep-to-right:hover {
		border-color: var(--bg-blue);
	}
	.btn-sign-up.hvr-sweep-to-left:hover {
		color: var(--nav);
		border-color: var(--bg-green);
	}

/* Menu */
	#menuSeguimiento.activated::before {
		content: "✓";
		color: white;
		background-color: #459b93;
		border-radius: 50%;
		padding: 0 .3rem;
		margin-right: .2rem;
	}
	#menuVentas.activated::before {
		content: "✓";
		color: white;
		background-color: #459b93;
		border-radius: 50%;
		padding: 0 .3rem;
		margin-right: .2rem;
	}
	.dropdown-extended {
		min-width: 15rem;
		font-size: 0.9rem;
	}
	.menu-name-user {
		font-size: 0.9rem;
		font-weight: 500;
		text-align: center;
		padding: 0rem .9rem;
	}
	.menu-email-user {
		font-size: 0.9rem;
		font-weight: 400;
		text-align: center;
	}
	.container-tooltip-one {
		display: flex;
		justify-content: center;
		align-items: center;  		
  		position: absolute;
  		width: auto;
		height: auto;
		/* top: 50%; */
  		right: 100%;
		/* transform: translateY(-50%); */
  		/* margin-right: 15px; */
  		z-index: 1;
  		visibility: hidden;
  		bottom: 10px;
  		opacity: 0;
  		transition: all .2s;
	}
	.tooltip-one {
		padding: 10px 20px;
  		background: #fff;
  		border-radius: 5px;
  		text-align: center;
  		filter: drop-shadow(0 0px 2px #ccc);
  		line-height: 1.5;
	}
	.container-arrow {
		display: flex;
		justify-content: center;
		margin-right: 6px;
	}
	.arrow {
  		margin-left: -9px;
  		width: 18px;
  		height: 18px;
  		background: white;
  		transform: rotate(45deg);
		box-shadow: 2px -2px 3px -1px rgba(0, 0, 0, 0.15);
	}
	.tooltip-container {
	  	position: relative;
	}
	/* .tooltip-container .container-tooltip-one {
	  	display: none;
	} */
	.tooltip-trigger {
  		position: relative;
  		z-index: 2;
	}
	.tooltip-trigger + .container-tooltip-one.is-active {
  		visibility: visible;
  		opacity: 1;
  		transition: all .2s;
	  	/* display: flex; */
	}
	.container-plans-acquired {
		display: grid;
    	grid-template-columns: repeat(2, 1fr);
    	justify-items: center;
	}
	.container-plans-acquired .container-btn-plans-acquired {
		padding: 10px;
	}
	.img-user-menu {
		width: 80px;
		height: 80px;
	}

/* Sidebar */
	#sidebar {
		width: 300px;
		left: -300px;
		position: fixed;
		top: 0;
		height: 100vh;
		z-index: 999;
		background: var(--nav);
		color: #fff;
		transition: all 0.3s;
		overflow-y: auto;
	}
	#sidebar.active {
		left: 0;
		box-shadow: 4px 0px 6px rgba(0, 0, 0, 0.5);
	}
	#dismiss {
		width: 35px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		color: white;
		background: var(--bg-brown-line); /*#edaa00*/
		/*position: absolute;
		top: 10px;
		right: 10px;*/
		cursor: pointer;
		display: flex;
		-webkit-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		font-size: 18px;
	}
	#dismiss:hover {
		background: #beb661;
	}
	.overlay {
		display: none;
		position: fixed;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		z-index: 998;
		opacity: 0;
		transition: all 0.5s ease-in-out;
	}
	.overlay.active {
		display: block;
		opacity: 1;
	}

	.blink_me {
	animation: blinker 1s linear infinite;
	}

	@keyframes blinker {
	50% {
		opacity: 0;
	}
	}

	#sidebar .sidebar-header {
		padding: 10px;
		background: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	/* #sidebar ul.components {
		padding: 20px 0;
		border-bottom: 1px solid #4fa9cc;
	} */
	#sidebar ul p {
		color: #fff;
		padding: 10px;
	}
	#sidebar ul > li > a {
		padding: 10px 15px;
		font-size: 1.1em;
		/* display: block; */
		color: white;
		transition: 0.3s all;
	}
	#sidebar ul > li > a:active {
		background: #264a5d;
	}
	#sidebar ul > li > a > i {
		margin-right: 5px; 
	}
	#sidebar ul > li > div > a > i {
		margin-right: 5px; 
	}
	/* #sidebar ul li a:hover {
		color: white;
		background: #40629a;
		transition: 0.3s all;
	} */
	#sidebar ul li.active>a,
	#sidebar a[aria-expanded="true"] {
		color: #fff;
		background: #264a5d;
	}
	#sidebar a[data-toggle="collapse"] {
		position: relative;
	}
	/*.dropdown-toggle::after {
		display: block;
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
	}*/
	#sidebar ul ul a {
		font-size: 0.9em !important;
		padding-left: 30px !important;
		background: #6d7fcc;
	}
	#sidebar ul.CTAs {
		padding: 20px;
	}
	#sidebar ul.CTAs a {
		text-align: center;
		font-size: 0.9em !important;
		display: block;
		border-radius: 5px;
		margin-bottom: 5px;
	}
	#sidebar a.download {
		background: #fff;
		color: #7386D5;
	}
	#sidebar a.article,
	#sidebar a.article:hover {
		background: #6d7fcc !important;
		color: #fff !important;
	}
	.container-img-uer {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.img-logo-sidebar {
		background: white;
		width: 60%;
	}
	.sidebar-img-user-circle {
		border-radius: 50%;
		width: 80px;
		height: 80px;
		margin: 10px;
	}
	.sidebar-user {
		width: 100%;
		padding: 1rem;
		display: grid;
		align-items: center;
    	/* grid-template-columns: 1fr 3fr;
		gap: .4rem; */
	}
	.container-img-user {
		text-align: center;
	}
	.container-img-user > i {
		font-size: 4.0rem;
	}
	.container-info-user {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* max-width: 80%; */
	}
	.container-btn-user {
		text-align: center;
		/* grid-row: 2 / 1; */
		/* grid-column: 1 / 3; */
		padding-top: .8rem;
	}
	.list-unstyled.components {
		margin: 0;
	}
	/* .list-unstyled.components > .nav-item {
		border-bottom: 1px solid white;
	} */
	/* .list-unstyled.components > .nav-item:first-child i {
		font-size: 1.4rem;
	} */
	.list-unstyled.components > .nav-item:last-child {
		border-bottom: none;
	}
	.list-unstyled.components a {
		text-decoration: none;
		display: grid;
    	grid-template-columns: 40px 1fr;
    	align-items: center;
	}
	.list-unstyled.components a > i {
		width: 25px;
    	text-align: center;
	}
	/* Sidebar Navbar */
	#sidebar .sidebar-collapse {
		background-color: var(--nav-shad);
		opacity: 0.9;
	}
	#sidebar .collapse-link-sidebar {
		font-size: 1.1em;
		color: white;
		padding: 6px 10px 6px 25px;
		display: flex;
		align-items: center;
		width: 100%;
		background: transparent;
    	border: 0;
	}
	.container-btn-sidebar {
		padding: 20px;
		position: fixed;
		z-index: 100;
		display: block;
	}
	.btn-sidebar {
		background: var(--bg-blue-green);
		color: white;
		font-size: 1.5rem;
		padding: 6px 8px;
		border: 1px solid var(--bg-blue-green);
		border-radius: 4px;
		transition: 0.3s all;
	}
	.btn-login {
		width: 90%;
		background: var(--bg-blue-2);
		color: white;
		font-size: 1.0rem;
		padding: 6px 8px;
		border: 1px solid var(--bg-blue-2);
		border-radius: 4px;
		text-decoration: none;
		display: inline-block;
		transition: 0.3s all;
	}
	.btn-login:active, .btn-login:focus, .btn-login:hover {
        text-decoration: none;
		color: white;
    }
	.btn-sidebar:hover {
		background: var(--bg-blue-1);
	}
	.divider-menu-sidebar {
		margin: 0;
	}
	.profile-info {
		padding: .4rem;
		margin: 0;
	}

@media screen and (min-width: 480px) {
	#sidebar ul > li > a, #sidebar .collapse-link-sidebar {
		font-size: 0.9rem;
	}
	.container-img-user > i {
		font-size: 3.0rem;
	}
	.subtitle-rsp {
		font-size: 0.9rem;
	}
	.btn-login {
		width: 95%;
		font-size: 0.9rem;
	}
	.text-p {
		font-size: 0.8rem;
	}
	.ds{
		padding-left: 3px;
		padding-right: 3px;
	}
	.listam{
		padding-left: 1rem;
	}
	/* .list-unstyled.components > .nav-item:first-child i {
		font-size: 1.0rem;
	} */
}

@media screen and (min-width: 768px) {
	#myNavbar {
		display: flex !important;
	}
	#myNavbar .nav-link {
		padding: 15px;
	}
	.container-btn-sidebar {
		display: none;
	}
	.ds{
		padding-left: 20px;
		padding-right: 20px;
	}
	.listam{
		padding-left: 1rem;
	}
}

@media screen and (min-width: 992px) {
	#myNavbar .nav-link {
		padding: 15px 20px;
	}
	.ds{
		padding-left: 30px;
		padding-right: 30px;
	}
	.listam{
		padding-left: 1rem;
	}
}

@media screen and (min-width: 1270px) {
	#myNavbar .nav-link {
		font-size: 1.0rem;
		padding: 15px 30px;
	}
	.btn-log-in, .btn-sign-up {
		font-size: 1.0rem;
	}
	.ds{
		padding-left: 40px;
		padding-right: 40px;
	}
	.listam{
		padding-left: 1rem;
	}
}

@media screen and (min-width: 1440px) {
	#myNavbar .nav-link {
		padding: 15px 40px;
	}
	.ds{
		padding-left: 50px;
		padding-right: 50px;
	}
}