@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    a {
       color: revert;
       text-decoration: revert;
    }
}
  


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

/* For regular style */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/open-sans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
    font-style: normal;
}

/* For italic style */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/open-sans/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
    font-style: italic;
}



body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    background:white;
	font-family: "Poppins";
}
.page{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
	overflow: auto;overflow-x: hidden;
}
.hidden {
    display: none;
}

.medium-zoom-overlay,
.medium-zoom-image--opened {
    z-index: 999;
}

/***ESTILOS GENERALES***/
/* @media(min-width: 600px){
	.mobileonly{ display:none !important; }
}
@media(max-width: 600px){
	.nomobile{ display: none !important; }
} */

.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.white { color: white !important; }
.green {color: green !important;}
.red{color: red !important;}
.blue{color: #364C95 !important;}

.blink{
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/*** TABS DEL DISPLAY DE PROGRESOS EN DASHBOARD***/
.slidee {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
}

/*** CARRUSEL ***/
.slick-list {
    width: 100%;
    overflow: visible;
    box-sizing: border-box;
}
.slick-dots{ /** para cuando hay padding ***/
	left: 0px;
}


/*** FORMS && INPUTS && BUTTONS ***/
.form {
    display: flex;
    flex-direction: column;
    background: white;
    width: 100%;
}
.form .buttons{
    margin-top: 24px;
    display: flex;
    align-items: center;
}
.input-group {
    display: flex;
    align-items: center;
}
@media(max-width:600px){
	.input-group{
		flex-direction: column;
	}
}
.input-container{
	display: flex;
	flex-direction: column;
	position: relative;
	/* min-height: 36px; */
	height: auto;
	box-sizing: border-box;
	flex: 1;
}
.input-container input[type='checkbox'] {
    margin: 8px 2px;
	width: 14px;
}
.input-container input[type='checkbox']+label {
    /* position: absolute; */
    left: 0;
    top: 6px;
    cursor: pointer;
    padding-left: 20px;
    margin-top: -23px;
}
.input-group+.input-group{
    margin-top: 12px;
}
.input-container .dropdown {
    background: #e7ebed;
    border-radius: 4px;
    border: 1px solid #e7ebed;
    width: 200px;
    min-height: 36px;
    box-sizing: border-box;
    display: flex;
}
.input-with-data {
    display: flex;
    width: 100%;
    height: 36px;
    margin: 0;
    border-radius: 4px;
    padding: 0px 12px;
    box-sizing: border-box;
    color: #393355;
    font-size: 12px;
    background: #E7EBED;
    border: 1px solid #E7EBED;
    align-items: center;
}

.input-container .input-with-data input:not([type='checkbox']) {
    width: auto;
    padding: 0;
}

.input-with-data label {
    color: #999;
    font-weight: 500;
}
@media(max-width:600px){
	.input-container .dropdown{
		width: 100%;
	}
    .input-group .input-container+.input-container {
        margin-top: 12px;
    }
}
@media(min-width: 600px){
    .input-group .input-container{
        margin-top: 0px;
    }
    .input-group .input-container+.input-container {
        /* margin-left: 12px; */
    }
}

.input-container .dropdown-label {
    color: #393355;
    font-size: 12px;
    background: #E7EBED;
    font-weight: 700;
    border-radius: 4px;
    overflow: hidden;
    height: 34px;
}
.input-container > label{
    font-weight: 600;
    font-size: 12px;
    padding-bottom: 4px;
    color: #393355;
    padding-left: 4px;
}
.input-container input:not([type='checkbox']) {
	border: none;
	outline: none;
	/* width: 100%; */
	height: 36px;
	margin: 0;
	border-radius: 4px;
	padding: 0px 36px 0px 12px;
	box-sizing: border-box;
	color: #393355;
	font-size: 12px;
	background: #E7EBED;
	border: 1px solid #E7EBED;
}
.input-container input[disabled]{
    color: #999
}
.input-container input.ng-invalid.ng-touched{
    border: 1px solid #EAC3BE;
}
.input-container input:focus{
    border: 1px solid #DDD;
    box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 10%);
}
.input-container textarea{
    outline: none;
    border:none;
    resize: none;
    width: 100%;
    height: 36px;
    margin: 0;
    border-radius: 4px;
    padding: 12px;
    box-sizing: border-box;
    color: #393355;
    font-size: 12px;
    background: #E7EBED;
    min-height: 72px;
    border: 1px solid #E7EBED;
}
.input-container textarea:focus{
    border: 1px solid #DDD;
    box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 10%);
}
.input-container textarea.ng-invalid.ng-touched{
    border: 1px solid #EAC3BE;
}
.input-container .input-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    pointer-events: none;
}
.dropdown {
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
}
.dropdown.active {
    border: 1px solid #DDD;
    box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 10%);
}
.dropdown-label {
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 4px;
    padding: 0px 36px 0px 12px;
    box-sizing: border-box;
    color: #777;
    display: flex;
    align-items: center;
    font-size: 12px;
}
.dropdown-list {
    position: absolute;
    top: 36px;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #EFEFEF;
    padding: 12px 0px;
    box-sizing: border-box;
    border-radius: 4px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: 0.16s ease-in-out all;
}
.dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 28px;
    padding: 0px 12px;
    box-sizing: border-box;
    font-weight: 700;
    color: #383255;
}
.dropdown-item md-icon {
    margin: 0;
    font-size: 14px;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    margin-right: 4px;
}
.dropdown-text {
    font-size: 10px;
}
.dropdown-item:hover {
    background: #ddd;
}
.dropdown.active .dropdown-list {
    opacity: 1;
    transform: translateY(0px);
    pointer-events: all;
    box-shadow: 0px 0px 3px inset rgb(0 0 0 / 30%);border-radius: 4px;
}

@media(max-width: 600px){
	.input-container{
		width: 100%;
	flex: 1;}
	.input-group .input-container+.input-container{
		margin-top: 12px;
		padding: 0px;
		margin-bottom: 12px;
	}
	.input-group+.input-group{
	    margin-top: 12px;
	}
}


.button {
    font-size: 14px;
    background: #333387;
    border-radius: 8px;
    padding: 6px 24px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.button > md-icon{
	color: white;
	font-size:17px;
	width:17px;
	min-width:17px;
	height:17px;
	min-height:17px;
	margin-left: 7px;
}
.button.outline-button{
    background: transparent;
    border: 1px solid;
    color: #333387;
}
.button.outline-button:hover{
	background: rgba(0, 0, 0, 0.07)
}
.button-large{
    height:36px;
    padding: 0px 44px;
}
.button-icon {
    font-size: 16px;
    color: inherit;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
}
.button-icon:first-child {
    margin-right: 8px;
}
.button-icon:last-child {
    margin-left: 4px;
}
.button-group {
    position: relative;
}
.dropdown-icon {
    color: white;
    /* position: absolute; */
    right: 0px;
    margin-right: -8px;
}
.button.disabled {
    opacity: 0.3;
    pointer-events: none;
}
.button:hover {
    background: #8b89dd;
}
.button.light-button:hover{
    background: blue;
}
.button.logout-button {
    margin-top: 12px;
}
.button.green-button {
    background: #36A02E;
}
.button.green-button:hover {
    background: #197213;
}
.button-xl {
    height: 44px;
}
.button.plan-button{height: 44px;font-size: 17px;font-weight: 800;background: #31026C;border: 1px solid white;width: 100%; text-transform: uppercase;}
.button.plan-button:hover {background: #8b89dd;}
.button.red-button {background: #DE3C4B;}
.button.red-button:hover {background: #f1717d;}

@media(max-width: 600px){
    .button.plan-button{
        font-size: 14px;
        height: 36px;
        width: 150px;
    }
}


/***WEB **/
.web {
	width: 100%;
	/* height: 100%; */
	display: flex;
	flex-direction: column;
}
.web > .header-placeholder{}
@media(max-width:600px){
	.web > .header-placeholder{
		position: sticky;
		top: -48px;
		z-index: 3;
	}
}

/***HEADER ***/
.header.page-header {
    width: 100%;
    display: flex;
    align-items: center;
    /* height: 100px; */
    justify-content: center;
    z-index: 3;
    position: sticky;
	top: 0px;
}
.header.page-header .header-top {
    width: 100%;
    display: flex;
    height: 48px;
    align-items: center;
    padding: 12px 12px 12px 4px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
}
.header.page-header .header-top .phone {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #303486;
}
.header.page-header .header-top .phone .icon {
    font-size: 21px;
    color: inherit;
    width: 21px;
    min-width: 21px;
    height: 21px;
    min-height: 21px;
    margin-right: 4px;
}
.header.page-header .header-top .phone .text {
    font-size: 11px;
    font-weight: 500;
    color: inherit;
}
.header.page-header .header-top .whatsapp {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.header.page-header .header-top .whatsapp .icon {
    font-size: 21px;
    color: #3FAB34;
    width: 21px;
    min-width: 21px;
    height: 21px;
    min-height: 21px;
    margin-right: 4px;
}
.header.page-header .header-top .whatsapp .text {
    font-size: 11px;
    font-weight: 500;
    color: black;
    line-height: 1;
}
.header.page-header .header-top .separator {
    height: 100%;
    width: 1px;
    background: #ddd;
    margin: 0px 18px;
}
.header.page-header .header-top .contact-us {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-left: auto;
}
.header.page-header .header-top .contact-us .icon {
    color: #264B9B;
    font-size: 21px;
    width: 21px;
    min-width: 21px;
    height: 21px;
    min-height: 21px;
    margin-right: 4px;
}
.header.page-header .header-top .contact-us .text {
    font-size: 12px;
    font-weight: 500;
    color: black;
}
.header.page-header .header-top .access {
    font-size: 12px;
    font-weight: 500;
    color: #264B9B;
    cursor: pointer;
}
.header.page-header .header-bottom {
    width: 100%;
    display: flex;
    height: 100px;
    align-items: center;
    box-sizing: border-box;
padding: 19px 0px;}
.header.page-header .header-content {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
}
.header.page-header .header-logo-placeholder {
    /* width: 120px; */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 32px;
}
.header.page-header .logo-link{
    height:100%;
display: flex;align-items: center;}
.header.page-header .logo-img {
    width: auto;
    height: 100%;
}
.header.page-header .header-nav {
    flex: 1;
    display: flex;
    align-items: center;
    height: 72px;
}
.header.page-header .nav-link-placeholder {
    padding: 0px 32px;
    position: relative;
    box-sizing: border-box;
    display:flex;
    height: 100%;
    align-items: center;
}
.header.page-header .nav-link {
    text-decoration: none;
    color: #3a5288;
    width:100%;
    cursor:pointer;
    color: black;
    font-weight: 500;
}
.header.page-header .nav-link:hover {
    text-decoration: underline;
}
.header.page-header .nav-link.nav-link-outline {
    border: 1px solid #333387;
    border-radius: 8px;
    padding: 6px 24px;
    color: #333387;
    text-decoration: none;
}
.header.page-header .nav-link.nav-link-red {
    background: #DE3C4B;
    text-decoration: none;
    font-size: 14px;
    border-radius: 8px;
    padding: 6px 24px;
    color: white !important;
}

.header.page-header .nav-link.nav-link-outline:hover {
    background: #f7f7f7;
}
.header.page-header .nav-link.active {
    color: #264B9B;
}
.header.page-header .nav-dropdown {
    position: absolute;
    padding: 12px 0px 16px 0px;
    min-width: 250px;
    left: 0px;
    background: white;
    border-radius: 4px;
    display: none;
    flex-direction: column;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 30%);
    border-left: 1px solid #eee;
    top: 64px;
}
.header.page-header .nav-dropdown .nav-link-placeholder {
    width: 100%;
    padding: 0px;
}
.header.page-header .nav-dropdown .nav-link {
    font-size: 14px;
    width: 100%;
    padding: 12px;
}
.header.page-header .nav-dropdown .nav-link:hover {
    background: #eee;
    text-decoration: none;
}
.header.page-header .nav-link-placeholder:hover .nav-dropdown {
    display: flex;
}
.header.page-header .nav-link-dropdown-icon {
    width: 21px;
    height: 21px;
    min-width: 21px;
    min-height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 4px;
    font-size: 24px;
    transform: translateY(1px);
    color: #3b558d;
}
.header.page-header .menu-button {width: 64px;height: 64px;display: flex;align-items: center;justify-content: center;}
.header.page-header .menu-button md-icon {color: #333387;font-size: 36px;height: 36px;width: 36px;}
.header.page-header .login-button {width: 64px;height: 64px;display: flex;align-items: center;justify-content: center;margin-left: auto;}
.header.page-header .login-button md-icon {color: #333387;font-size: 36px;height: 36px;width: 36px;}
@media(max-width:600px){
	.header.page-header .header-bottom .subscribe-button {display: none;}
		.header.page-header .header-bottom .presale-button {display: none;}
}
@media(min-width: 1200px){
	.header.page-header .login-button { display:none; }
	.header.page-header .menu-button { display:none; }
}


/*** MENU HEADER MOBILE ***/
.web .page-menu {position: fixed;top: 0px;right: 0px;height: 100%;display: flex;flex-direction: column;width: 100%;pointer-events: none;}
.web .page-menu .header {display: flex;align-items: center;height: 48px;}
.web .page-menu .header .close-button {margin-left: auto;height: 48px;width: 48px;display: flex;align-items: center;justify-content: center;}
.web .page-menu .header .close-button md-icon {color: white;font-size: 32px;width: 32px;height: 32px;}
.web .page-menu .body {display: flex;flex-direction: column;}
.web .page-menu .body .nav-link {color: white;font-size: 18px;display: flex;align-items: center;padding: 8px 24px;box-sizing: border-box;border-bottom: 2px solid black;}
.web .page-menu .backdrop {position: absolute;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);opacity: 0;transition: 0.1618s ease-in-out all;}
.web .page-menu .content {position: relative;z-index: 1;background: #252C68;width: 50%;min-width: 240px;margin-left: auto;height: 100%;box-shadow: -1px 0px 6px;transform: translateX(105%);transition: 0.1618s ease-in-out all;}
.web .page-menu.open {pointer-events: all;}
.web .page-menu.open .backdrop {opacity: 1;}
.web .page-menu.open .content {transform: translateX(0px);}
.web .page-menu .presale-button{margin: 12px;font-size: 16px; white-space: nowrap;}
.web .page-menu .subscribe-button {background: #2456A6;margin: 12px;font-size: 16px;}

.subscribe-button {
    margin-left: 10px;
}

.presale-button {}

.courses .container {margin: 50px auto;}
@media(max-width:600px){
	.courses .container {margin: 0px auto;}
}

.learning-path-contents-placeholder {
	width: 100%;display: flex;background: #E9F0F0;
}
.certificate-link {
    height: 20px;
    margin-left: 20px;
    background: #8B89DD;
    border-radius: 5px;
    padding: 2px 6px;
    box-sizing: border-box;
    text-decoration: none;
    display: flex;
    align-items: center;
    color: white;
}
.certificate-link:hover{
	background: #7598c5;
}
.certificate-link md-icon {
    font-size: 14px;
    width: 14px;
    min-width: 14px;
    height: 14px;
    min-height: 14px;
    margin-right: 4px;
    color: inherit;
}
.certificate-link span {
    color: inherit;
    font-size: 10px;
}

















.dashboard .courses-finished{
	margin-top: 44px;
}




/*** COMPONENTES ***/

/*** PROGRESS TRACKER: ejemplo en dashboard/curso ***/
.progress-tracker {
    width: 250px;
    position: relative;
    box-sizing: border-box;
}
.progress-tracker > label{
	font-size: 14px;
    font-weight: 600;
    color: #34609F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.progress-tracker .rail {
    box-shadow: 0px 0px 3px inset rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 17px;
    background: #EBE9EB;
    border-radius: 4px;
    padding: 2px;
    box-sizing: border-box;
    position: relative;
}
.progress-tracker .fill {
    height: 100%;
    background: #364C95;
    transition: 0.3s ease-in-out all;
    border-radius: 5px;
}
.progress-tracker .label {
    position: absolute;
    right: 8px;
    top: 1px;
    font-size: 10px;
    font-weight: 700;
    color: #a1a1a1;
}

/*** CONTAINER: ejemplo en dashboard/cursos ***/
.container-placeholder {
  max-width: 100%;
  margin-top: 20px;
}
.container {
	border-radius: 8px;
	background: white;
	max-width: calc(100vw - 40px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 250px;
	flex: 1;
	margin: auto;
	width: 100%;
}
.container > .header {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0px 12px;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    flex: none;
    }
.container > .header .title {
    color: #3E3885;
    font-weight: 600;
    font-size: 15px;
    margin-right: auto;
}
.container > .header > .toggle-filter-button{
	display: flex;
	align-items: center;
	margin-left: auto;
	color: #153595;
	padding: 12px;
}
.container > .header .toggle-filter-button span{
	color: inherit;
	font-weight: 700;font-size: 14px;margin-right: 8px;
}
.container > .header .toggle-filter-button md-icon{
	color: inherit;
	font-size: 16px;width: 16px;min-width: 16px;height: 16px;min-height: 16px;
}
.container > .header .input-group {
	margin-left: auto;
}
.container > .footer {
    padding: 0px 24px 24px 24px;
    display: flex;
    align-content: center;
}
.container .content > .footer{
    padding: 24px 0px 24px 0px;
    display: flex;
    align-content: center;
}

@media(max-width:600px){
	.container > .header{
		flex-wrap: wrap;
		height: auto;
		min-height: 44px;
	}
	.container > .header .input-group{
		display: flex;
		flex-direction: column;
		width: 100%;
		max-height: 0px;
		overflow: hidden;
		align-items: stretch;
		box-sizing: border-box;
	}
	.container > .header .input-group.open{
		max-height: initial;
		overflow: visible;
	}
}

.container > .content {
    padding: 12px;width: 100%;box-sizing: border-box;
}
.container > .footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
}


/*** NO CONTENT ***/
.no-content {
    width: 100%;
    height: 100%;
    align-items: center;
    padding: 12px;
    box-sizing: border-box;
}
.no-content .text {
    font-weight: 300;
    color: black;
    font-size: 19px;
}



/*** UI-DROP-UP ***/
.ui-drop-up-menu-backdrop {
    position: fixed;
    bottom: 0px;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: 0.3s ease-in-out all;
    z-index: 999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.ui-drop-up-menu-backdrop.active  {
    opacity: 1;
}
.ui-drop-up-menu-content {
    bottom: 0px;
    padding: 20px 0px;
    background: white;
    border-radius: 12px 12px 0px 0px;
    width: 100%;
    box-sizing: border-box;
    transition: 0.3s ease-in-out all;
    transform: translateY(100%);
    max-width: 800px;
    overflow: hidden;
}
.ui-drop-up-menu-backdrop.active .ui-drop-up-menu-content {
    transform: translateY(0px);
}
.ui-drop-up-menu-content .menu-item {
    display: flex;
    align-items: flex-start;
    min-height: 64px;
    overflow: hidden;
    position: relative;
    padding: 14px 20px;
    cursor: pointer;
    overflow: visible;
    box-sizing: border-box;
}
.ui-drop-up-menu-content .menu-item.disabled {
    opacity: 0.3;
    pointer-events: none;
}
.ui-drop-up-menu-content .menu-item-icon {
    margin: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    color: #333387;
}
.ui-drop-up-menu-content .menu-item-text {
    color: #48526e;
    font-weight: 500;
    font-size: 14px;
    text-shadow: 0px 0px 1px;
    flex: 1;
    display: flex;
    align-items: flex-start;
    min-height: 36px;
}

/*** ANIMACIÓN COHETE**/
.rocket-placeholder {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width:100%;
  position: absolute;
  z-index: 999;
   background-image: linear-gradient(60.7320047851deg, #264783 -0.8616071429%, #1b1a3c 47.8883928571%);
}
.rocket {
  width: 200px;
}
.rocket-flame {
  transform-origin: 20% 20%;
}
@-webkit-keyframes fe30-anime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fe30-anime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



/*** LISTADO DE FICHAS DE UN CURSO ***/
.courses-list {
    display: flex;
    justify-content: flex-start;
	width: 100%;
    box-sizing: border-box;
}
.courses-list .course-placeholder{
	display: flex;
	flex: 1;
}
.courses-list .course-placeholder:not(:last-child) .course{
	margin-right: 20px;
}
.courses-list .course{
    width: 236px;
	flex: none;
    height: 320px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}
.courses-list .course .title {
    color: #3E3885;
    font-weight: 600;
}
.courses-list .course .course-image-placeholder {
    height: 50%;
    border-radius: 8px 8px 0px 0px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
}
.courses-list .course .course-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #eee;
}
.courses-list .course-image-placeholder .tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #364E94;
    color: white;
    padding: 4px 12px;
    box-sizing: border-box;
    border-radius: 4px;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.courses-list .course .tag .tag-icon {
    color: inherit;
    margin-right: 4px;
    font-size: 16px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin-left: -4px;
}
.courses-list .course .tag .tag-text {
    font-size: 12px;
    font-weight: 500;
    margin-top: -2px;
}
.courses-list .course .tag-list {
	width: 100%;display: flex;align-items: center;margin-top: 8px;
}
.courses-list .course .tag-list .tag {
    width: 20px;
    height: 20px;
    overflow: hidden;
}
.courses-list .course .tag-list .tag+.tag {
    margin-left: 12px;
}
.courses-list .course .tag-list .tag .tag-image {
    width: 100%;
    height: 100%;
}
.courses-list .course .title {
    color: black;
    line-height: 1.25;
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: none;
    font-size: 16px;
    margin: 0;
}
.courses-list .course .content {
    padding: 12px;
    height: 50%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1;
}
.courses-list .course .hidden-button {
    background: #3E58A7;
    color: white;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 12px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    transform: translateY(100%);
    transition: 0.16s ease-in-out all;
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-decoration: none;
}
.courses-list .course:hover .hidden-button {
    transform: translateY(0px);
}
.courses-list .course .teachers-info {
    display: flex;
    height: 32px;
    width: 100%;
    align-items: center;
    /* margin-bottom: 12px; */
    margin-top: auto;
}
.courses-list .course .teacher-display-name {
    font-size: 10px;
    font-weight: 600;
    color: #333;
}
.courses-list .course .teacher-picture {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 12px;
}
.courses-list .course .description {
    color: #777;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    height: 24px;
    margin-top: 8px;
}

@media(min-width:600px){
	/* .courses-list{
		flex-wrap: wrap;
        align-items: baseline;
	}
	.courses-list .course-placeholder {
        width: 25%;
        padding: 8px;
	} */
	.courses-list .course-placeholder:nth-child(4n+4) {
		margin-right: 0;
		flex: none;
		width: 236px;
	}
    .courses-list .course-placeholder:nth-child(n+5) .course{
       /* margin-left: 20px; */
    }
    .courses-list .course-placeholder:last-child:nth-child(4n+3){
        width: calc(50% - 10px);
        flex: none;
    }
    .courses-list .course-placeholder:last-child:nth-child(4n+2){
        width: calc(75% - 5px);
        flex: none;
    }
}
@media(max-width:600px){
}

















/*** ESTRUCTURA DEL DASHBOARD ***/
.dashboard {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dashboard .viewport {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/*** MENU **/
.dashboard .menu {
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 100%;
    align-items: flex-start;
    /*! transition: 0.2s ease-in-out all; */
    width: 250px;
}
.dashboard .menu .content{
    position:
    relative;
    z-index: 1;
    width: 100%;
    background: #3B3885;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    }
.dashboard .menu .header{
    position:relative;
    z-index: 1;
    height: 68px;
    display:flex;
    width: 100%;
    align-items: center;
    padding: 12px;
    box-sizing: border-box;
}
.dashboard .menu .logo {
    object-fit: cover;
    object-position: left;
    transform: translateX(-18px);
    flex: none;
    height: 100%;
    width: auto;
}
.dashboard .menu .close-button {
    margin-left: auto;
    width:44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dashboard .menu .close-button md-icon{
    color:white;
}
.dashboard .menu-items-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 44px;
}
.dashboard .menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 40px;
    color: white;
    padding: 0px 16px;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.dashboard .menu-item .item-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    background: #e61e28;
    border-radius: 4px;
    padding: 2px 4px;
}
.dashboard .menu-item .item-icon {
    color: #7598C5;
    margin: 0;
    font-size: 24px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin-right: 16px;
}
.dashboard .menu-item .item-text {
    font-size: 13px;
    font-weight: 500;
    line-height: 0;
}
.dashboard .menu-item:hover {
    background: #315E9F;
}
.dashboard .menu-item:hover .item-icon {
    color: white;
}
.dashboard .menu-item.active {
    background: #315E9F;
}
.dashboard .menu-item.active .item-icon {
    color: white;
}
.dashboard .menu-items-group .group-header {
    padding: 0px 20px;
    box-sizing: border-box;
    width: 100%;
    font-size: 10px;
    color: #7598C5;
    font-weight: 600;
    margin: 0;
    padding-bottom: 8px;
}
.dashboard .menu.collapsed:not(.open) {
    width: 56px;
    overflow: hidden;
}
.dashboard .menu.collapsed .logo {
    width: 52px;
    max-width: initial;
}
.dashboard .menu.collapsed .group-header {
	height: 0px;
	overflow: hidden;
	padding: 0px;
	border-bottom: 1px solid #7598C5;
	width: 24px;
	margin: 0 auto;
	margin-bottom: 21px;
}
.dashboard .menu .backdrop {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	transition: 0.1618s ease-in-out all;
}
/*
.dashboard .menu .content {
	position: relative;
	z-index: 1;
	background: #252C68;
	width: 50%;
	min-width: 240px;
	margin-left: auto;
	height: 100%;
	box-shadow: -1px 0px 6px;
	transform: translateX(105%);
	transition: 0.1618s ease-in-out all;
}
.dashboard .menu.open {pointer-events: all;}
.dashboard .menu.open .backdrop {opacity: 1;}
.dashboard .menu.open .content {transform: translateX(0px);}
*/


@media(max-width: 600px){
    .dashboard .menu{
        position: absolute;
        z-index: 99;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    .dashboard .menu.open .content{
         pointer-events: all;
    }
    .dashboard .menu .content{
        width: 50%;
        min-width: 240px;
        transform: translateX(-100%);
        transition: 0.2s ease-in-out all;
    }
    .dashboard .menu.open .content{
         transform: translateX(0px);
    }
	 .dashboard .menu.open .backdrop{
         opacity: 1;
    }
}



/*** CABECERA **/
.dashboard .header.dashboard-header {
    width: 100%;
    display: flex;
    height: 44px;
    z-index: 2;
    position: relative;
    box-shadow: 0px 2px 9px #ccc;
}
.dashboard .header.no-shadow {
    box-shadow: none;
}
.dashboard .header .profile {
    flex: none;
    display: flex;
    align-items: center;
    margin-left: auto;
}
.dashboard .header .profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F4F5F3;
}
.dashboard .header .profile-display-name {
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    padding: 0px 12px;
    text-decoration: none;
}
.dashboard .header .profile-button {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #ccc;
    cursor: pointer;
    text-decoration: none;
}
.dashboard .header .profile-button:hover {
    background: #fafafa;
}
.dashboard .header .profile-button md-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    color: black;
}
.dashboard .header .menu-button {
	width: 44px;height: 44px;display: flex;align-items: center;justify-content: center;
}
.dashboard .header .menu-button md-icon {
	color: #333387;font-size: 24px;height: 24px;width: 24px;
}
/* @media(min-width:600px){
	.dashboard .header .menu-button {
		display: none;
	}
} */

/*** BUSCADOR ***/
.dashboard .header .searcher {
    flex: 1;
    position: relative;
    padding: 0px 16px;
    box-sizing: border-box;
    height: 100%;
}
.dashboard .header .searcher .searcher-icon {
    position: absolute;
    top: 10px;
    left: 26px;
    color: #777;
}
.dashboard .header .searcher input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-left: 44px;
    font-size: 12px;
    /* font-weight: 700; */
    /* font-family: SegoeUi; */
    color: #999;
    outline: none;
    border: none;
    background: transparent;
}
.dashboard .header .search-results {
    position: absolute;
    top: 100%;
    margin: 24px;
    display: flex;
    flex-direction: column;
    background: white;
    overflow: auto;
    border-radius: 6px;
    left: 0px;
    right: 50%;
    box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.1);
    min-width: 720px;
}
.dashboard .header .search-result {
    width: 100%;
    display: flex;
    padding: 24px;
    box-sizing: border-box;
    cursor: pointer;
}
.dashboard .header .search-result .picture-placeholder {
    width: 72px;
    height: 72px;
    overflow: hidden;
    margin-right: 24px;
}
.dashboard .header .search-result .picture-placeholder .picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.dashboard .header .search-result:hover {
    background: #f7f7f7;
}
.dashboard .header .search-result .body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.dashboard .header .search-result .body .title {
    font-size: 18px;
    font-weight: 700;
}
.dashboard .header .search-result .body .description {
    font-size: 13px;
    font-weight: 500;
    max-width: 320px;
    color: #777;
    margin-top: 8px;
}
@media(max-width:600px){
	.dashboard .header .searcher{
		display: none;
	}
}


/*** CONTENIDO ***/
.dashboard .viewport > .content-placeholder{
	flex:1;
	display:flex;
	align-items: center;
	flex-direction: column;
	overflow: hidden;
	/*background: #E5EBED;*/
	z-index: 1;
	/* box-shadow: 0px 2px 9px inset #ccc; */
	overflow: auto;
}
.dashboard .viewport > .content-placeholder > * {
    width: 100%;
    flex-basis: 100%;
}
.dashboard .viewport > .content-placeholder > .content{
	width: 1024px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
	box-sizing: border-box;
	padding: 50px 0px;
}
.dashboard .viewport > .content-placeholder > .content.full-page-content{
    margin: 0;
    width:100%;
	padding: 0px;
    flex: 1;
}
.dashboard .viewport > .content-placeholder > .content.full-page-content > iframe {width: 100%;height: 100%;box-sizing: border-box;}
.dashboard .viewport > .content-placeholder > .content > .header{
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	display: flex;
	flex-direction: column;
	padding: 0px 12px 20px 12px;
}
.dashboard .viewport > .content-placeholder > .content > .header .title{
	margin: 0;
    color: #383255;
    font-size: 24px;
    font-weight: 600;
    width: 100%;
    line-height: 44px;
}
.dashboard .viewport > .content-placeholder > .content > .header > .description{
    margin: 0;
    margin-top: 5px;
    line-height: 1.5;
}
.dashboard .viewport > .content-placeholder > .content > .header .header-top {
    display: flex;
    align-items: center;
}

@media(max-width: 600px){
    .dashboard .viewport > .content-placeholder > .content{
        padding: 20px 0px;
    }
    .dashboard .viewport > .content-placeholder > .content > .header{
        padding: 0px 20px 20px 20px;
    }
    .dashboard .viewport > .content-placeholder > .content > .header > .title{
        line-height: 32px;   
    }
}


/*** HOME ***/
.dashboard .alert {
    width: 100%;
    display: flex;
    padding: 24px 12px;
    box-sizing: border-box;
    background: white;
    border-radius: 8px;
    max-width: 100%;
    flex: none;
    flex-direction: column;
    margin-bottom: 20px;
}
.dashboard .alert > .title {
    color: #3E3885;
    font-weight: 600;
    font-size: 20px;
}
.dashboard .alert > .description {
    color: #777;
    font-weight: 300;
    font-size: 15px;
    margin-top: 10px;
}


.dashboard .briefing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  flex: none;
}
.briefing-item {
  width: 220px;
  display: flex;
  padding: 24px 12px;
  box-sizing: border-box;
  height: 120px;
  background: white;
  border-radius: 8px;
  max-width: 100%;
  flex: none;
}
a.briefing-item{
	
cursor: pointer;
	
text-decoration: none;
}
a.briefing-item:hover{
	
box-shadow: 0px 0px 0px 2px inset #364c95;
}
.briefing-item .icon {
  color: #7396C4;
  font-size: 72px;
  width: 72px;
  height: 72px;
  margin: 0;
  flex: none;
}
.briefing-item .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-left: 12px;
}
.briefing-item .title {
  font-size: 44px;
  font-weight: 600;
  line-height: 44px;
  color: #3E3885;
  text-align: left;
}
.briefing-item .description {
  color: #3E3885;
  font-weight: 700;
}

.progresses {
	/* margin-top: 20px; */
}
.progresses > .content {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0px;
}
.tabset {
	display: flex;
	align-items: stretch;
	padding: 12px;
	background: white;
}
.tabset .prev-button, .tabset .next-button {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1;
    color: black;
}
.tabset .prev-button.disabled, .tabset .next-button.disabled {
    opacity: 0.3;
    cursor: initial;
}
.tabset .prev-button md-icon, .tabset .next-button md-icon {
    font-size: 17px;
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
    color: inherit;
    user-select: none;
}

.tabset .tabs .tab {
    user-select: none;
    font-size: 11px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    padding: 4px 8px;
    cursor: pointer;
    white-space: nowrap;
}
.tabset .tabs .tab.selected {
    font-weight: 600;
    position: relative;
}
.tabset .tabs .tab.selected:after {
	content: "";position: absolute;bottom: 0px;width: 100%;background: #3e3885;left: 0px;border-radius: 4px;height: 2px;
}
.tabset .tabs .tab:hover {
    background: #eee;
}
.tab-content {
    width: 100%;
    flex: 1;
    overflow: auto;
    padding: 0px 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    padding: 32px 40px;
}
.tab-content .footer {
    padding: 24px 0px;
}

.progresses .view-more-button {
    display: flex;
    align-items: center;
    color: #A7A9A6;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    margin: 12px auto;
}
.progresses .view-more-button .button-text {
    font-size: 11px;
    color: inherit;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
}
.progresses .view-more-button .button-icon {
    color: inherit;
    height: 16px;
    min-height: 16px;
    width: 16px;
    min-width: 16px;
    font-size: 16px;
}
.progresses .view-less-button {
    display: flex;
    align-items: center;
    color: #A7A9A6;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    margin: 12px auto;
}
.progresses .view-less-button .button-text {
    font-size: 11px;
    color: inherit;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
}
.progresses .view-less-button .button-icon {
    color: inherit;
    height: 16px;
    min-height: 16px;
    width: 16px;
    min-width: 16px;
    font-size: 16px;
}

.progresses .course-progress{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 18px;
}
.progresses .course-progress .progress-tracker{
	width: 100%;
}
.progresses .course-progress .info {
    display: flex;
    align-items: center;
}
.progresses .course-progress .info .name {
    font-size: 14px;
    font-weight: 600;
    color: #34609F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.progresses .course-progress .info .continue-button {
    display: flex;
    align-items: center;
    margin-left: 12px;
    color: #A7A9A6;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}
.progresses .course-progress .info .continue-button .button-text {
    font-size: 11px;
    color: inherit;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
}
.progresses .course-progress .info .continue-button .button-icon {
    color: inherit; 
    height: 16px;
    min-height: 16px;
    width:16px;
    min-width:16px;
    font-size:16px;
}


.events-placeholder {
  margin-right: auto;
  width: 100%;
}
.events-and-news {
  display: flex;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  margin-top: 20px;
}
.events-and-news .events{
    width: 500px;
}
.events-and-news .news{
    width: 500px;
}
.suggested-courses {
    margin-top: 20px;
}


@media(min-width: 600px){
    .events-and-news{
        flex-direction: row;
    }
    .events-and-news .events{
        margin: 0 auto 0 0;
    }
    .events-and-news .news{
        margin: 0 0 0 auto;
    }
}
@media(max-width: 600px){
    .events-and-news .news {
        margin-top: 20px;
    }
}


@media(max-width: 600px){
    .dashboard .briefing-item-placeholder{
        padding-left:20px;
    }
}





/*** PAGO CONFIRMADO ***/
.payment-confirmed {
	display: flex;
	flex-direction: column;
}
.payment-confirmed > .content {
    width: 810px;
    margin: 0 auto;
    max-width: 100%;
    display: flex;
    padding: 72px 0px;
    box-sizing: border-box;
    flex-direction: column;
}
.payment-confirmed .welcome {width: 100%;background: #E9EEF1;border-radius: 15px;padding: 15px;display: flex;min-height: 126px;box-sizing: border-box;}
.payment-confirmed .welcome  .image {height: 96px;width: auto;flex: none;}
.payment-confirmed .welcome  .content {flex: 1;display: flex;flex-direction: column;margin-left: 30px;}
.payment-confirmed .welcome  .content .title {font-size: 20px;font-weight: 800;color: black;margin: 0;line-height: 1;}
.payment-confirmed .welcome  .content .description {margin: 8px 0 0 0;font-size: 14px;color: black;font-weight: 500;padding-bottom: 20px;}


.checkmark{
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: block;
	stroke-width: 2;
	stroke: #fff;
	stroke-miterlimit: 10;
	box-shadow: inset 0px 0px 0px #7ac142;
	animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}
.checkmark .checkmark__circle{
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	stroke-width: 2;
	stroke-miterlimit: 10;
	stroke: #7ac142;
	fill: none;
	animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}
.checkmark .checkmark__check{
	transform-origin: 50% 50%;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
}
.account-data {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 50px 0px;
    padding: 0px 10px;
    box-sizing: border-box;
}
.account-data .header{
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
	display: flex;
	align-items: center;
}
.account-data .header .button {
    margin-left: auto;
}
.account-data .title {
    font-size: 18px;
    font-weight: 700;
    margin-top: auto;
}

.data-group {
    display: flex;
    margin: 10px 0px;
}
.data-cotnainer {
    display: flex;
}
.data-container {
    display: flex;
    width: 50%;
    height: 24px;
}

.data-container label {
    font-size: 12px;
    width: 120px;
    font-weight: 300;
    color: #777;
    display: flex;
    align-items: center;
}
.data-container > span {
    font-size: 12px;
    white-space: nowrap;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.data-container > span .icon {
    font-size: 15px;
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
    margin: 0;
    margin-right: 5px;
}
.data-container:nth-child(2n+1) {
    width: 61.8%;
}
.data-container:nth-child(2n+2) {
    width: 38.2%;
}
.data-container > span .icon:last-child {
    margin: 0;
    margin-left: 5px;
}
.data-container > .data.clickable {
    cursor: pointer;
}
.data-container > .data.clickable.disabled {
    pointer-events: none;
}

@keyframes stroke{100%{stroke-dashoffset: 0}}
@keyframes scale{0%, 100%{transform: none} 50%{transform: scale3d(1.1, 1.1, 1)}}
@keyframes fill{100%{box-shadow: inset 0px 0px 0px 50px #7ac142}}


@media(max-width:600px){
    .payment-confirmed .welcome {
        flex-direction: column;
        align-items: center;
        margin: 0 20px;
        width: auto;
    }
    .payment-confirmed .welcome .content .title{
        margin-top: 20px;
    }
    .payment-confirmed .welcome .content .description{
        padding-bottom: 0px;
    }
    .account-data{
        padding: 20px;
    }
    .data-group {
        flex-wrap: wrap;
    }
    .data-container:nth-child(2n+1){
        width: 100%;
        flex-direction: column;
        height: auto;
    }
    .data-container:nth-child(2n+2){
        width: 100%;
        margin-top: 20px;
        height: auto;
        flex-direction: column;
    }
    .data-container label{
        margin-left: 0 !important;
        font-size: 15px;
    }
    .data-container > span{
        /* margin-left: auto; */
        font-size:15px;
    }
}

/*** PAGO DENEGADO O CANCELADO ***/
.payment-denied {
	display: flex;
	flex-direction: column;
}
.payment-denied > .content {
    width: 810px;
    margin: 0 auto;
    max-width: 100%;
    display: flex;
	padding: 72px 0px;
	box-sizing: border-box;
}
.payment-denied .message {width: 100%;background: #E9EEF1;border-radius: 15px;padding: 15px;display: flex;min-height: 126px;box-sizing: border-box;}
.payment-denied .message  .image {height: 96px;width: auto;flex: none;}
.payment-denied .message  .content {flex: 1;display: flex;flex-direction: column;margin-left: 30px;}
.payment-denied .message  .content .title {font-size: 20px;font-weight: 800;color: black;margin: 0;line-height: 1;}
.payment-denied .message  .content .description {margin: 8px 0 0 0;font-size: 14px;color: black;font-weight: 500;padding-bottom: 20px;}


.checkmark_denied{
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: block;
	stroke-width: 2;
	stroke: #fff;
	stroke-miterlimit: 10;
	box-shadow: inset 0px 0px 0px #d14d4d;
	animation: fill_red .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}
.checkmark_denied .checkmark__circle{
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	stroke-width: 2;
	stroke-miterlimit: 10;
	stroke: #d14d4d;
	fill: none;
	animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}
.checkmark_denied .checkmark__check{
	transform-origin: 50% 50%;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
}
@keyframes fill_red{100%{box-shadow: inset 0px 0px 0px 50px #d14d4d}}


@media(max-width:600px){
	.payment-denied .message {
		margin: 20px;
		flex-direction: column;
		align-items: center;
	}

	.checkmark_denied {
		margin-bottom: 20px;
	}

	.payment-denied .message .content .title {
		text-align: center;
		margin-bottom: 10px;
	}

	.payment-denied .message .content {
		margin: 0;
	}

	.payment-denied .message .content .description {
		text-align: center;
	}
}



/*** TODO: renombrar; ejemplo en pago_confirmado ***/
.secret {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.secret-button {
    font-size: 10px;
    border-radius: 4px;
    color: #777;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    border: 1px solid #ccc;
    z-index: 1;
    height: 20px;
    background: white;
    line-height: 1.6;
    width: auto;
    padding: 0px 12px;
    margin-top: 4px;
}
.secret .hidden {
    width: 100%;
    filter: blur(3px);
}
.secret-button:hover {
    background: #f0f0f0;
}






/*** VISOR DEL CURSO ***/
.dashboard .player {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.dashboard .player .progress-tracker{
    width: 100%;
    position: relative;
    box-sizing: border-box;
    margin-top: 12px;
}
.dashboard .player .index {
    width: 320px;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #DDDFDF;
    background: white;
    position: relative;
}
.dashboard .player .index-header {
    width: 100%;
    padding: 24px 32px;
    box-sizing: border-box;
    background: #365093;
    color: white;
    position: relative;
    z-index: 12;
    font-size: 18px;
    font-weight: 700;
}
.dashboard .player .index-body {
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex: 1;
    box-shadow: -1px 0px 1px inset rgb(0 0 0 / 10%);
    /* padding: 24px 0px; */
    background: #f7f7f7;
    color: #f7f7f7;
    background: #fff;
	padding-right: 1px;
}
.dashboard .player .index-footer {
    padding: 10px 20px;
    flex: none;
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dashboard .player .index-item {
    width: 100%;
    display: flex;
    padding: 8px 24px 8px 36px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    text-decoration: none;
    color: #777;
    position: relative;
}
.dashboard .player .index-item.active{
	font-weight: 600;
	color: black;
}
.dashboard .player .index-item-icon-placeholder {
    width: 16px;
    height: 16px;
    display: flex;
    margin-top: 3px;
}
.dashboard .player .index-item-icon {
    color: #b1b1b1;
    font-size: 16px;
    height: 16px;
    min-height: 16px;
    width: 16px;
    min-width: 16px;
    color: inherit;
}
.dashboard .player .index-item-body {
    /* font-size: 14px; */
}
.dashboard .player .index-item-body {
    padding: 0px 8px;
    box-sizing: border-box;
    font-size: 10px;
    display: flex;
    align-items: center;
    flex: 1;
    color: inherit;
}
.dashboard .player .index-item:hover {
    background: rgba(0, 0, 0, 0.03);
}
.dashboard .index-item-duration {
    font-size: 10px;
    padding: 0px 4px;
    color: black;
    font-weight: 600;
    display: flex;
    align-items: flex-start;
    margin-top: 4px;
}
.dashboard .player .index-item .bookmark-icon-placeholder {
    width: 16px;
    height: 16px;
    display: flex;
    margin-top: 2px;
    position: absolute;
    left: 12px;
}
.dashboard .player .index-item .bookmark-icon-placeholder md-icon {
    font-size: 18px;
    color: #d7d7d7;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
}
.dashboard .player .index-item .bookmark-icon-placeholder md-icon.fill {
    color: #f7cb4d;
}
.dashboard .player .index-item .quiz-status-icon-placeholder {
    width: 16px;
    height: 16px;
    display: flex;
    margin-top: 2px;
    position: absolute;
    left: 12px;
}
.dashboard .player .index-item .quiz-status-icon-placeholder md-icon {
    font-size: 15px;
    color: #d7d7d7;
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
}

.dashboard .player .index-item .certificate-icon-placeholder {
    width: 16px;
    height: 16px;
    display: flex;
    margin-top: 2px;
    position: absolute;
    left: 12px;
}
.dashboard .player .index-item .certificate-icon-placeholder md-icon {
    font-size: 15px;
    color: #d7d7d7;
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
}


.dashboard .player .index-item .tooltip {
  position: absolute;
  top: -12px;
  font-size: 10px;
  background: #ddd;
  border-radius: 4px;
  z-index: 9;
  padding: 4px 8px;
  color: #333;
  font-weight: 500;
  opacity: 0;
  right: 12px;
  transition: 0.1s ease-in-out all;
  max-width: 80%;
  line-height: 1.3;
  font-size: 9px;
}
.dashboard .player .index-item:hover .tooltip {
	opacity: 1;
}
.dashboard .player .accordion {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 44px;
    flex: none;
}
.dashboard .player .accordion.open {
    max-height: initial;
}
.dashboard .player .accordion-content {
    padding: 12px 0px;
    box-shadow: 0px -1px 1px inset rgba(0, 0, 0, 0.1);
    background: white;
}
.dashboard .player .accordion-toggle-button {
    width: 100%;
    height: 44px;
    display: flex;
    flex: none;
    padding: 12px 18px 12px 24px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 12px;
    /* font-weight: 700; */
    align-items: center;
    background: rgb(247, 247, 247);
    box-shadow: 0px -1px 1px inset rgba(0, 0, 0, 0.1);
    color:#000;
    position: relative;
}
.dashboard .player .accordion-toggle-button.disabled{
    opacity: 1;
    /*! pointer-events: none; */
	cursor: not-allowed;
}
.dashboard .player a.accordion-toggle-button{
    color:#000;
    text-decoration: none;
}
.dashboard .player a.accordion-toggle-button:hover{
    color:#000;
    background: rgba(0, 0, 0, 0.2);
}
.dashboard .player .section-title {
	left: 16px;
	font-size: 12px;
	font-weight: 600;
	background: #365093;
	box-sizing: border-box;
	border-bottom: 1px solid #ccc;
	position: absolute;
	top: -8px;
	color: white;
	padding: 2px 8px;
	font-size: 8px;
	border-radius: 6px;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 61.8%;
	z-index: 1;
}
.dashboard .player .section {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    /* margin-top: 16px; */
    /* border-top: 1px solid #ddd; */
    align-items: center;
}
.dashboard .player .accordion-toggle-button .text {
    flex: 1;
    display: flex;
}
.dashboard .player .accordion.open .accordion-toggle-button {
    font-weight: 500;
}
.dashboard .player .accordion-toggle-button .tooltip {
  position: absolute;
  top: -12px;
  font-size: 10px;
  background: #ddd;
  border-radius: 4px;
  z-index: 9;
  padding: 4px 8px;
  color: #333;
  font-weight: 500;
  opacity: 0;
  right: 12px;
  transition: 0.1s ease-in-out all;
  max-width: 200px;
  line-height: 1.3;
  font-size: 9px;
}
.dashboard .player .accordion-toggle-button:hover .tooltip {
  opacity: 1;
}
.dashboard .player .course-page-placeholder {
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
    position: relative;
}
.dashboard .player .course-page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dashboard .player .chat .message-placeholder {
    width: 100%;
    display: flex;
    margin: 12px 0px;
    padding: 0px 12px;
    box-sizing: border-box;
}
.dashboard .player .chat .author {
    font-size: 11px;
    font-weight: 600;
    margin-right: 12px;
    color: blue;
}
.dashboard .player .chat .text {
    font-size: 11px;
}
.dashboard .player .course-page .toolbar {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    background: #2C3050;
    padding: 0px 24px;
    box-sizing: border-box;
    position: relative;
    flex: none;
    color:#fff;
    z-index: 2;
}
.dashboard .player .course-page .toolbar .title {
    margin: 0 auto;
    color: inherit;
    line-height: 1;
    display: flex;
    font-size: 14px;
    font-weight: 600;

}
.dashboard .player .course-page .toolbar-left {
    position: absolute;
    left: 24px;
    display: flex;
    align-items: center;
}
.dashboard .player .course-page .toolbar-right {
    position: absolute;
    right: 24px;
    display: flex;
}
.dashboard .player .course-page .toolbar .page-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    height: 100%;
}
.dashboard .player .course-page .toolbar .back-button {
    display:flex;
    align-items: center;
    color: white;
    background: #404664;
    padding: 1px 8px 1px 4px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    height: 24px;
    box-sizing: border-box;
}
.dashboard .player .course-page .toolbar .back-button:hover{
    background: #365093;
}
.dashboard .player .course-page .toolbar .back-button .icon{
    color: white;font-size: 21px;width: 21px;height: 21px;min-width: 21px;min-height: 21px;
}
.dashboard .player .course-page .toolbar .back-button .text{
    line-height: 1;
    font-size: 11px;
    font-weight: 500;
}
.dashboard .player .course-page .toolbar .index-toggle-button {
    position: absolute;
    display: flex;
    align-items: center;
    background: #404664;
    width: 44px;
    height: 44px;
    justify-content: center;
    right: 0px;
    z-index: 1;
    flex: none;
}
.dashboard .player .course-page .toolbar .index-toggle-button:hover {
    background: #365093;
}
.dashboard .player .course-page .toolbar .index-toggle-button .icon {
    color: white;
    font-size: 24px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}

.dashboard .player .course-page .toolbar .resources-button {
    margin-left: 12px;
    display: flex;
    align-items: center;
    color: white;
    background: #404664;
    padding: 1px 8px 1px 4px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    height: 24px;
    box-sizing: border-box;
    min-width: auto;
    min-height: 24px;
}


.resources-dropdown {position: absolute;top: 36px;display: flex;flex-direction: column;background: #7884bd;padding: 4px 0px;box-sizing: border-box;border-radius: 5px;}
.resources-dropdown .resource {display: flex;align-items: center;font-size: 11px;color: white;text-decoration: none;padding: 0px 12px;}
.resources-dropdown:before {content: "";width: 12px;height: 12px;background: #7884bd;position: absolute;bottom: 16px;transform: rotate(45deg);z-index: -1;left: 7px;}
.resources-dropdown {position: absolute;top: 36px;display: flex;flex-direction: column;background: #7884bd;padding: 4px 0px;box-sizing: border-box;border-radius: 5px;opacity: 0;pointer-events: none;transition: 0.1618s ease-in-out all;}
.resources-dropdown .resource {display: flex;align-items: center;font-size: 10px;color: white;text-decoration: none;padding: 0px 12px;line-height: 15px;border-bottom: 1px solid rgba(255, 255, 255, 0.7);padding: 4px 12px;}
.resources-dropdown .resource:hover{
    
}
.resources-dropdown .resource:last-child{border-bottom: 0px; }
.resources-dropdown:before {content: "";width: 12px;height: 12px; background: #7884bd; position: absolute;bottom: 16px;transform: rotate(45deg);z-index: -1;left: 7px;}
.resources-dropdown.visible {opacity: 1;pointer-events: all;}

.resources-dropdown .resource:hover {text-decoration: underline;}
.dashboard .player .course-page .toolbar .resources-button:hover {
    background: #365093;
}
.dashboard .player .course-page .toolbar .resources-button .icon {
    color: white;
    font-size: 16px;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin-right: 4px;
}
.dashboard .player .course-page .toolbar .resources-button .text {
    line-height: 1;
    font-size: 11px;
    font-weight: 700;
}
.dashboard .player .course-page .toolbar .mark-readed-button {
    display: flex;
    align-items: center;
    color: white;
    background: #404664;
    padding: 1px 8px 1px 8px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    height: 24px;
    box-sizing: border-box;
}
.dashboard .player .course-page .toolbar .mark-readed-button .icon {
    color: white;
    font-size: 15px;
    width: 15px;
    height: 15px;
    min-width: 15px;
    min-height: 15px;
    margin-right: 5px;
}
.dashboard .player .course-page .toolbar .mark-readed-button .text {
    line-height: 1;
    font-size: 11px;
    font-weight: 500;
}
.dashboard .player .course-page .toolbar .mark-readed-button:hover {
    background: #365093;
}


.dashboard .player .course-page .toolbar .bookmarks-menu-button {
    display: flex;
    align-items: center;
    color: white;
    background: #404664;
    padding: 1px 8px 1px 8px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    height: 24px;
    box-sizing: border-box;
	margin-left: 10px;
}
.dashboard .player .course-page .toolbar .bookmarks-menu-button.filled{
    color: #ffd700;
}

.dashboard .player .course-page .toolbar .bookmarks-menu-button .icon {
    color: inherit;
    font-size: 15px;
    width: 15px;
    height: 15px;
    min-width: 15px;
    min-height: 15px;
    /* margin-right: 5px; */
}
.dashboard .player .course-page .toolbar .bookmarks-menu-button .text {
    line-height: 1;
    font-size: 11px;
    font-weight: 500;
    margin-left: 7px;
}
.dashboard .player .course-page .toolbar .bookmarks-menu-button:hover {
    background: #365093;
}


.bookmarks-menu .button.view-all-button {
    background: #404664;
    color: white;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 8px;
    position: relative;
    left: 50%;
    margin: 10px 0;
    display: inline-block;
    transform: translate(-50%);
}


.dashboard .player .course-page .toolbar .download-button {
    display: flex;
    align-items: center;
    color: white;
    background: #404664;
    padding: 1px 8px 1px 8px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    height: 24px;
    box-sizing: border-box;
}
.dashboard .player .course-page .toolbar .download-button .icon {
	color: white;
    font-size: 15px;
    width: 15px;
    height: 15px;
    min-width: 15px;
    min-height: 15px;
}
.dashboard .player .course-page .toolbar .download-button .text {
    line-height: 1;
    font-size: 11px;
    font-weight: 500;
}
.dashboard .player .course-page .toolbar .download-button:hover {
    background: #365093;
}
.dashboard .player .course-page .toolbar .share-button {
    display: flex;
    align-items: center;
    color: white;
    background: #404664;
    padding: 1px 8px 1px 8px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    height: 24px;
    box-sizing: border-box;
	margin-left: 8px;
}
.dashboard .player .course-page .toolbar .share-button .icon {
	color: white;
    font-size: 15px;
    width: 15px;
    height: 15px;
    min-width: 15px;
    min-height: 15px;
}
.dashboard .player .course-page .toolbar .share-button .text {
    line-height: 1;
    font-size: 11px;
    font-weight: 500;
}
.dashboard .player .course-page .toolbar .share-button:hover {
    background: #365093;
}
.dashboard .player .course-page .toolbar .page-nav-button {
    color: white;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0px 24px;
    cursor: pointer;
}
.dashboard .player .course-page .toolbar .page-nav-button[disabled] {
    pointer-events: none;
    color:#cacaca;
}
.dashboard .player .course-page .toolbar .page-nav-button .icon {
    color: inherit;
}
.dashboard .player .course-page .toolbar .page-nav-button .icon:first-child{
    margin-right: 4px;
}
.dashboard .player .course-page .toolbar .page-nav-button .text {
    color: inherit;
    line-height: 1;
    display: flex;
    font-size: 14px;
    font-weight: 600;
}
.dashboard .player .course-page .toolbar .page-nav-button .icon+.text, .course-page .toolbar .page-nav-button .text+.icon {
    margin-left: 4px;
}
.dashboard .player .course-page .toolbar .page-nav-button:hover {
    background: #404664;
}
.dashboard .player .course-page .content-placeholder {
    width: 100%;
    flex: 1;
    display:
    flex;
    height: 100%;
    flex-direction: column;
    background: white;
}
.dashboard .player .course-page > .content {
	border: 0px;
	width: 100%;
	height: 100%;
	position: relative;
	overflow-y: auto;
    overflow-x: hidden;
}
.dashboard .player .chat-placeholder{
	width: 100%;
	height: 150px;
	flex: none;
	position: relative;
	overflow: hidden;
	border-top: 1px solid #ccc;
}
.dashboard .player .index .evaluation {
	width: 100%;
	display: flex;
	padding: 12px;
	background: white;
	justify-content: space-around;
	box-sizing: border-box;
	box-shadow: 0px -1px 1px inset rgba(0, 0, 0, 0.1);
	position: relative;
}

.dashboard .player .index .evaluation .exam {
	padding: 12px;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	border-radius: 4px;
	width: 72px;
	box-sizing: border-box;
	align-items: center;
}
.dashboard .player .index .evaluation .exam .icon {
	font-size: 18px;
	color: #404664;
	width: 18px;
	min-width: 18px;
	height: 18px;
	min-height: 18px;
}
.dashboard .player .index .evaluation .exam .text {
	font-size: 10px;
	color: #505364;
	font-weight: 600;
	margin-top: 4px;
}
.dashboard .player .index .evaluation .exam:not(.disabled):hover {
  background: #eee;
}
.dashboard .player .index .evaluation .title {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  color: blue;
}




.dashboard .player .index .evaluation .exam.disabled{
	cursor: not-allowed;
}
.dashboard .player .index .evaluation .exam.disabled .icon{
	opacity: 0.5;
}
.dashboard .player .index .evaluation .exam .badge {
  position: absolute;
  font-size: 14px;
  min-width: 14px;
  width: 14px;
  height: 14px;
  min-height: 14px;
  margin-top: -4px;
  margin-left: 24px;
  background: white;
  border-radius: 50%;
}
.dashboard .player .index .achievements {
	width: 100%;
	display: flex;
	position: relative;
	margin-top: 12px;
}
.dashboard .player .index .achievements .achievement {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	box-sizing: border-box;
	align-items: center;
	cursor: pointer;
}
.dashboard .player .index .achievements .achievement .icon {
	font-size: 18px;
	color: #404664;
	width: 18px;
	min-width: 18px;
	height: 18px;
	min-height: 18px;
	color: white;
}
.dashboard .player .index .achievements .achievement .text {
	font-size: 9px;
	color: white;
	font-weight: 600;
	margin-top: 0px;
	max-width: 40px;
	white-space: nowrap;
	overflow: hidden;
	/*! text-overflow: ellipsis; */
}
.dashboard .player .index .achievements .achievement:not(.disabled):hover {
	/*background: rgba(255, 255, 255, 0.1);*/
}
.dashboard .player .index .achievements .title {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  color: blue;
}
.dashboard .player .index .achievements .tooltip {
  position: absolute;
  top: -12px;
  font-size: 10px;
  background: #ddd;
  border-radius: 4px;
  z-index: 9;
  padding: 4px 8px;
  color: #333;
  font-weight: 500;
  opacity: 0;
  left: 100%;
  transition: 0.1s ease-in-out all;
  width: 200px;
  line-height: 1.3;
  font-size: 9px;
}
.dashboard .player .index .achievements :hover .tooltip {
	opacity: 1;
}
.dashboard .player .index .achievements .achievement.disabled{
	cursor: not-allowed;
}
.dashboard .player .index .achievements .achievement.disabled .icon{
	opacity: 0.5;
}
.dashboard .player .index .achievements .achievement.disabled .text{
	opacity: 0.5;
}
.dashboard .player .index .achievements .achievement .badge {
  position: absolute;
  font-size: 14px;
  min-width: 14px;
  width: 14px;
  height: 14px;
  min-height: 14px;
  margin-top: -4px;
  margin-left: 24px;
  background: white;
  border-radius: 50%;
}

@media(max-width: 600px){
	.dashboard .player .index {
		position: absolute;
		width: auto;
		transition: 0.1618s ease-in-out all;
		border-radius: 12px;
		top: 50px;
		left: 20px;
		right: 20px;
		bottom: 64px;
		box-shadow: 0px 0px 3px black;
		height: auto;
		z-index: 2;
		opacity: 0;
		pointer-events: none;
	}
    .dashboard .player .index.open{
        opacity: 1;
        pointer-events: all;
    }
}


@media(max-width:600px){
    .dashboard .player .course-page .toolbar{
    }
    .dashboard .player .course-page .toolbar-left{
        left: 10px;
    }
    .dashboard .player .course-page .toolbar-right{
        right: 10px;
    }
    .dashboard .player .course-page .toolbar .page-nav{
        width:100%;
        position: fixed;
        bottom: 0px;
        left: 0px;
        background: #2c3050;
        height: 44px;
        transform: none;
    }
    .dashboard .player .course-page .toolbar .page-nav-button{
        width:50%;
    }
    .dashboard .player .course-page .content-placeholder {
        padding-bottom: 44px;
        box-sizing: border-box;
    }
}



/*** MAILBOX ***/
.mailbox .list {
    flex: none;
    border-right: 1px solid #eee;
    overflow: auto;
    width: 405px;
    box-sizing: border-box;
}
.mailbox {
    display: flex;
    height: calc(100vh - 268px);
    overflow: hidden;
    flex-direction: row;
}
.mailbox .content {
    flex: 1;
    overflow: auto;
}



/*** BANNER ***/
.banner {
    width: 100%;
    padding: 32px;
    flex: none;
    position: relative;
    height: 350px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #425d9c; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #425d9c 0%, #322d56 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  #425d9c 0%,#322d56 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  #425d9c 0%,#322d56 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#425d9c', endColorstr='#322d56',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    box-sizing: border-box;
}
.banner.banner-thin{
   height:150px;
}
.dashboard .banner{
    height:250px;
}
.banner.banner-plain {background: #333387;}
.banner.banner-plain .body {align-items: center;}
.banner.banner-plain .button {margin-top: 44px;}
.banner .body {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-width: 1200px;
    z-index: 1;
}
.banner .title {
    color: white;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;margin: 0;
}
.banner .description {
    color: white;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    margin: 0;
	margin-top: 12px;
}
.banner .body .description a {
    color: powderblue;
}
.banner .text {
    color: white;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin: 0 auto;width: 660px;line-height: 32px;max-width: 100%;
}
.banner+.toolbar {
    width: 100%;
    display: flex;
    background: #27314F;
    height: auto;
    flex: none;
    flex-wrap: wrap;
}
.banner+.toolbar .progress-tracker {
    margin-left: auto;
}
.banner+.toolbar > .content {
    width: 800px;
    height: auto;
    max-width:100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 44px;
    position: relative;
    justify-content: center;
}
.banner + .toolbar > .content + .content{
    background-color: #2e4367;
    background-image: url(../assets/banner.png);
    background-size: auto 90%;
    background-position: center top 20px;
    background-repeat: no-repeat;
    height: 120px;
}
.banner + .toolbar > .content + .content .buttons{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    background: #27314f;
    height: 20px;
}
.banner + .toolbar > .content .buttons{
    display:flex;
    align-items: flex-start;
    flex: none;
    justify-content: center;
    /*! margin: auto; */
}
.banner+.toolbar .text{
    color: white;
    font-size:12px;
    margin-left: 24px;
    font-weight: 700;
}
.banner+.toolbar .tag-list {
    display: flex;
    align-items: center;
    margin: 0px 10px;
}
.banner+.toolbar .tag {
    width: 18px;
    height: 18px;
    margin: 0px 4px;
}
.banner+.toolbar .tag-image {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}
.banner+.toolbar .button {
}
.banner+.toolbar .feature-list {
    display: flex;
    align-items: center;
    overflow: hidden;
}
.banner+.toolbar .feature-list .feature{
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}
.banner+.toolbar .feature-list .feature-icon {
    color: white;
    font-size: 16px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin-right: 4px;
}
.banner+.toolbar .feature-list .feature-text {
    color: white;
    font-size: 12px;
    font-weight: 500;
}

@media(max-width:600px){
	.banner{
		height: auto;padding: 20px;
	}
	.banner .title{
		font-size: 20px;
	}
    .banner + .toolbar > .content {
        padding: 0px;
    }
	.banner .description{
		font-size: 12px;
	}
    .banner .text{
        font-size: 13px;
        line-height: 19px;
    }
    .dashboard .banner{
        height: auto;
    }
}




/*** FOOTER ***/
.footer.page-footer {
    width: 100%;
    display: flex;
    align-items: center;
    background: #322D56;
    flex-direction: column;
}
@media(max-width: 600px){
	.footer.page-footer{
		/* display: none; */
	}
}
.footer.page-footer .footer-content {
    width: 100%;
    max-width: 1200px;
}
.footer.page-footer .footer-top {
    width: 100%;
    padding: 24px 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
}
.footer.page-footer .footer-top .logo-lms{
    width: 210px;
    margin-right: 24px;
    height: 54px;
    object-fit: contain;
}
.footer.page-footer .footer-top .lema{
    font-size: 14px;
    color: white;
}
.footer.page-footer .footer-bottom{
    width: 100%;
    display: flex;
    padding: 24px 0px 24px 234px;
    box-sizing: border-box;
}
.footer.page-footer .footer-bottom .titulo{
    margin: 0;
    color: white;
    padding-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
}
.footer.page-footer .legal{
    width: 100%;
    background-color: #171717;
    color:white;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer.page-footer .legal > .content{
    width: 100%;
    max-width: 1200px;
    font-size: 10px;
    display: flex;
    align-items: center;
}
.footer.page-footer .social {
    margin-left: auto;
}
.footer.page-footer .legal > .content a{
    text-decoration: none;
    color:inherit;
    margin: 0px 4px;
}
.footer.page-footer .legal > .content md-icon {
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
    border:1px solid white;
    border-radius: 50%;
    padding:3px;
    margin:2px;
}
.footer.page-footer .contact {
    width: 100%;
    display: flex;
    flex-direction: column;
    
    
}
.footer.page-footer .copyright {
    /* width: 100%; */
    /* text-align: center; */
    font-size: 12px;
    color: white;
}
.footer.page-footer .certifications{
    width: 200px;
    overflow: hidden;
    /* display: flex; */
    /* padding-right: 50px; */
}
.footer.page-footer .certifications img{}
.footer.page-footer .contact-block {
    display: flex;
    flex-direction: column;
    width: 50%;
    flex: 1;
    margin-left: 50px;
}
.footer.page-footer .courses-block {
    display: flex;
    flex-direction: column;
    width: 50%;
    flex: 1;
}
.footer.page-footer .legal > .content .copyright {
    font-size: 10px;
    color: #777;
    margin-right: 4px;
    flex: none;
}
.footer.page-footer .legal > .content a {
    cursor: pointer;
}
.footer.page-footer .legal > .content a:hover {
    text-decoration: underline;
}
.footer.page-footer .footer-bottom .link {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-top: 12px;
    min-height: 24px;
    font-size: 12px;
    cursor: pointer;
}
.footer.page-footer .footer-bottom .link .icon {
	width:26px;
	height: 26px;
	object-fit: contain;
    margin-right: 12px;
}
.footer.page-footer .footer-bottom .link span {
    color: white;
    text-decoration: none;
}
.footer.page-footer .footer-bottom .link:hover span {
    text-decoration: underline;
}

@media(max-width:600px){
	.footer.page-footer .footer-top {flex-direction: column;padding: 24px 24px 32px 24px;box-sizing: border-box;border: none;box-shadow: none;}
	.footer.page-footer .footer-top .lema {margin-top: 20px;text-align: center;font-size: 14px;line-height: 18px;}
	.footer.page-footer .footer-bottom {padding: 0px 24px 24px 24px;flex-wrap: wrap;align-items: center;justify-content: center;}
	.footer.page-footer .courses-block {display: none;}
	.footer.page-footer .contact-block {flex-direction: row;flex-wrap: wrap;border-top: 1px solid white;padding-top: 24px;min-width: 100%;margin-left: 0px;}
	.footer.page-footer .footer-bottom .titulo {width: 100%;text-align: center;font-size: 20px;}
	.footer.page-footer .footer-bottom .link {width: 50%;overflow: hidden;text-overflow: ellipsis;line-height: 1;}
	.footer.page-footer .legal > .content {display: flex;flex-wrap: wrap;padding: 12px;}
	.footer.page-footer .social {width: 100%;display: flex;align-items: center;justify-content: center;padding-top: 44px;}
	.footer.page-footer .legal > .content .copyright {font-size: 12px;}
	.footer.page-footer .legal > .content {font-size: 12px;font-weight: 700;}
    .footer.page-footer .footer-bottom .link .icon {
        margin-right: 4px;
    }
}


/***PAGINA CURSO***/
.course .course-contents-placeholder{
	padding: 100px;
}
.toolbar+.course-contents-placeholder {
    padding: 50px;
}
@media(max-width:600px){
	.toolbar+.course-contents-placeholder {
		padding: 10px;
	}
}



/*** BLOG ***/
.blog-entries-list {
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 1024px;
    margin: 24px auto;
    max-width: 100%;
}
.blog-entries-list .blog-entry-placeholder{
	display: flex;
	flex: 1;
}
.blog-entries-list .blog-entry-placeholder:not(:last-child) .blog-entry{
	margin-right: 20px;
}
.blog-entries-list .blog-entry{
    width: 320px;
    flex: none;
    height: 400px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}
.blog-entries-list .blog-entry .title {
    color: #3E3885;
    font-weight: 600;
}
.blog-entries-list .blog-entry .description {
    color: #777;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    height: 56px;
    margin: 8px 0px 0px 0px;
    flex: none;
}
.blog-entries-list .blog-entry .blog-entry-image-placeholder {
    height: 40%;
    border-radius: 8px 8px 0px 0px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    flex: none;
}
.blog-entries-list .blog-entry .picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #eee;
}
.blog-entries-list .blog-entry-image-placeholder .tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #364E94;
    color: white;
    padding: 4px 12px;
    box-sizing: border-box;
    border-radius: 4px;
    display: flex;
    align-items: center;
}
.blog-entries-list .blog-entry .tag .tag-icon {
    color: inherit;
    margin-right: 4px;
    font-size: 16px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin-left: -4px;
}
.blog-entries-list .blog-entry .tag .tag-text {
    font-size: 12px;
    font-weight: 500;
    margin-top: -2px;
}
.blog-entries-list .blog-entry .tag-list {
	width: 100%;display: flex;align-items: center;margin-top: 8px;
}
.blog-entries-list .blog-entry .tag-list .tag {
    width: 20px;
    height: 20px;
    overflow: hidden;
}
.blog-entries-list .blog-entry .tag-list .tag+.tag {
    margin-left: 12px;
}
.blog-entries-list .blog-entry .tag-list .tag .tag-image {
    width: 100%;
    height: 100%;
}
.blog-entries-list .blog-entry .link {
  font-size: 13px;
  text-decoration: none;
  font-weight: 600;
  color: #1750B2;
  margin-top: 4px;
}
.blog-entries-list .blog-entry .title {
    color: black;
    line-height: 1.25;
    height: 41px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: none;
    margin: 0;
    font-size: 15px;
}
.blog-entries-list .blog-entry .content {
    padding: 20px;
    height: 50%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1;
}
.blog-entries-list .blog-entry .hidden-button {
    background: #3E58A7;
    color: white;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 12px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    transform: translateY(100%);
    transition: 0.16s ease-in-out all;
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-decoration: none;
}
.blog-entries-list .blog-entry:hover .hidden-button {
    transform: translateY(0px);
}
.blog-entries-list .blog-entry .author {
    width: 100%;
    display: flex;
    overflow: hidden;
    align-items: center;
    height: 44px;
    flex: none;
    margin-top: auto;
    margin-bottom: 10px;
}
.blog-entries-list .blog-entry .author > .picture {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 12px;
    align-items: center;
    justify-content: center;
}
.blog-entries-list .blog-entry .author > .data {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.blog-entries-list .blog-entry .author .name {
    margin: 0;
    font-size: 12px;
}
.blog-entries-list .blog-entry .author .date {
    font-size: 10px;
    margin: 0;
    color: #75A3B8;
    font-weight: 500;
    margin-top: 0px;
}

@media(min-width:600px){
	.blog-entries-list{
		flex-wrap: wrap;
	}
	.blog-entries-list .blog-entry-placeholder {
        width: 33%;
	}
	.blog-entries-list .blog-entry-placeholder:nth-child(3n+3){
		width: 320px;
		flex: none;
	}
	.blog-entries-list .blog-entry-placeholder:nth-child(3n+3) .blog-entry {
		margin-right: 0;
		width: 320px;
	}
    .blog-entries-list .blog-entry-placeholder:nth-child(n+4) .blog-entry{
       margin-top: 20px;
    }
    .blog-entries-list .blog-entry-placeholder:last-child:nth-child(3n+2){
        width: calc(66% - 5px);
        flex: none;
    }
}
@media(max-width: 600px){
    .blog-entries-list {
      padding: 0px 20px;
  }
}









.blog-entry-contents {
    max-width: 100%;
    display: flex;
    overflow: hidden;
    margin: 50px auto;
    width: 1200px;
    box-sizing: border-box;
}
.blog-entry-contents > .content {
    /*! flex: 1; */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 900px;
    max-width: 100%;
}
.blog-entry-contents > .content > .picture {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0px;
    max-height: 400px;
}
.blog-entry-contents > .content > .title {
    width: 100%;
    font-weight: 700;
    font-size: 28px;
    box-sizing: border-box;
    margin: 20px 0px 0px 0px;
}
.blog-entry-contents > .content > .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}
.blog-entry-contents > .content .author {
    width: 100%;
    display: flex;
    overflow: hidden;
    align-items: center;
}
.blog-entry-contents > .content .author > .picture {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-right: 12px;
    align-items: center;
    justify-content: center;
}
.blog-entry-contents > .content .author > .data {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.blog-entry-contents > .content .author .name {
    margin: 0;
    font-size: 12px;
}
.blog-entry-contents > .content .author .date {
    font-size: 10px;
    margin: 0;
    color: #75A3B8;
    font-weight: 500;
    margin-top: 0px;
}
.blog-entry-contents .comments-link {
    display: flex;
    align-items: center;
    color: #777;
    text-decoration: none;
}
.blog-entry-contents .comments-link md-icon {
    font-size: 16px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    text-decoration: none;
}
.blog-entry-contents .comments-link span {
    font-size: 11px;
    margin-left: 4px;
    text-decoration: none;
    white-space: nowrap;
}
.blog-entry-contents .comments-link:hover span {
    text-decoration: underline;
}
.blog-entry-contents .blog-content-placeholder {
    margin-top: 20px;
}
.blog-entry-contents > .content > .description {
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color: #777;
    font-weight: 500;
    margin: 20px 0px 0px 0px;
}

.blog-entry-contents > .menu {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 250px;
    margin-left: auto;
}
.blog-entry-contents > .menu .searcher {
  position: relative;
  width: 100%;
  height: 44px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.blog-entry-contents > .menu .searcher input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0px 44px 0px 12px;
  border: none;
  font-size: 12px;
}
.blog-entry-contents > .menu .searcher md-icon {
  position: absolute;
  width: 44px;
  height: 44px;
  right: 0px;
  top: 0px;
  display: flex;
  /* align-content: ; */
  align-items: center;
  justify-content: center;
  font-size: 21px;
}
.blog-entry-contents > .menu .categories {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  padding: 0px 10px;
  box-sizing: border-box;
}
.blog-entry-contents > .menu .categories .title {
    margin: 0;
    font-size: 18px;
}
.blog-entry-contents > .menu .categories .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}


.blog-entry-contents > .menu .other-posts {width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    padding: 0px 10px;
    box-sizing: border-box;}
.blog-entry-contents > .menu .other-posts > .title {margin: 0;
    font-size: 18px;}
.blog-entry-contents > .menu .other-posts > .content {width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 20px;}
.blog-entry-contents > .menu .other-posts .blog-entry {width: 100%;display: flex;cursor: pointer;text-decoration: none;}
.blog-entry-contents > .menu .other-posts .blog-entry > img {width: 72px;height: 72px;object-fit: cover;}
.blog-entry-contents > .menu .other-posts .blog-entry > .content {display: flex;flex-direction: column;flex: 1;overflow: hidden;padding-left: 10px;box-sizing: border-box;}
.blog-entry-contents > .menu .other-posts .blog-entry .title {font-size: 11px;margin: 0;}
.blog-entry-contents > .menu .other-posts .blog-entry .created_at {font-size: 10px;font-weight: 500;margin-top: 10px;color: #777;}
.blog-entry-contents > .menu .other-posts .blog-entry:hover .title {text-decoration: underline;}
.blog-entry-contents > .menu .other-posts .blog-entry:not(:first-child) {margin-top: 5px;}

.blog-entry-contents > .menu .link {
    font-size: 14px;
    text-decoration: none;
    color: #6c8c9b;
    font-weight: 500;
    cursor: pointer;
}
.blog-entry-contents > .menu .link:hover {
    text-decoration: underline;
}
.blog-entry-contents > .menu .link:not(:first-child) {
  margin-top: 5px;
}

@media(max-width: 600px){
    .blog-entry-contents {
      flex-direction: column;
      margin: 0;
      padding: 20px;
    }
    .blog-entry-contents > .menu {
      width: 100%;
      margin: 0;
      /* align-content: ; */
      align-items: center;
    }
}







/*** VIEW EXAMEN ***/
.course-page .exam {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 50px;
	box-sizing: border-box;
	overflow: auto;
}

.course-page > .content-placeholder > .progress{
	width: 100%;
	height: 6px;
	overflow: hidden;
	flex: none;
	z-index: 1;
	position: relative;
}
.course-page > .content-placeholder > .progress .rail {
    box-shadow: 0px 0px 3px inset rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    background: #EBE9EB;
    padding: 0px 1px;
    box-sizing: border-box;
    position: relative;
}
.course-page > .content-placeholder > .progress .fill {
    height: 100%;
    background: #364C95;
    transition: 0.3s ease-in-out all;
    width: 0;
}


.course-page .exam > .buttons{
	margin-top: auto;
}
.course-page .exam > .content{
	max-width: 100%;
	width: 800px;
	background: #f6f8fa;
	display: flex;
	border: 1px solid #ebeef1;
	border-radius: 6px;
	max-width: 100%;
	margin-bottom: 50px;
	flex: none;
	min-height: 400px;
	overflow: hidden;
	box-sizing: border-box;
}
.course-page .exam > .content > .main{
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
}
.course-page .exam > .content > .options{
	width: 300px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background: white;
	box-shadow: 2px 0px 2px 0px inset rgba(0, 0, 0, 0.07);
}
.course-page .exam > .content > .options > .content{
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: center;
}
.course-page .exam > .content > .options > .content .button{
	height: 44px;
	border-radius: 0px;
	font-weight: 300;
	font-size: 15px;
	margin-bottom: 15px;
}
.course-page .exam > .content > .options > .header{
	padding: 0px 20px;
	width: 100%;
	box-sizing: border-box;
	font-size: 28px;
	text-align: center;
}

.course-page .exam .quiz-status{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.course-page .exam .quiz-status > .header{
	padding: 0px 20px;
    width: 100%;
    box-sizing: border-box;
    font-size: 28px;
}
.course-page .exam .quiz-status > .header > .title{
	margin: 10px 0px;
	font-size: 19px;
	font-weight: bold;
	color: #333387;
}
.course-page .exam .attempt{
	display: flex;
	flex-direction: column;
	background: #f6f8fa;
}
.course-page .exam > .content > .main > .title {
	padding: 0px 20px;
	width: 100%;
	box-sizing: border-box;
	font-size: 28px;
}
.course-page .exam > .content > .main > .description {
	padding: 0px 20px;
    width: 100%;
    box-sizing: border-box;
}
.course-page .exam .questions {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 0px;
}
.course-page .exam .question {
    overflow: hidden;
    position: relative;
    background: #f6f8fa;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
}
.course-page .exam .question > .title{
	min-height: 44px;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	color: #555;
	width: 100%;
	flex: none;
	box-sizing: border-box;
	padding: 10px 0px;
}
.course-page .exam .question > .description{
	padding: 0 0 20px 0;
	width: 100%;
	box-sizing: border-box;
	font-size: 12px;
	color: #777;
}
.course-page .exam .question .answers-list{
	padding: 0px 20px 20px 10px;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.course-page .exam .question .answers-list .answer{
	display: flex;
	max-width: 100%;
	height: 36px;
	align-items: center;
	cursor: pointer;
	width: auto;
}
.course-page .exam .question .answers-list .answer:focus {
	outline: none;
	text-decoration: underline;
}
.course-page .exam .question .answers-list .answer input{
	margin:0 10px 0 0;
	pointer-events: none;
}
.course-page .exam .question .answers-list .answer:hover{
	
}
.course-page .exam .question .answers-list .answer label{
	font-size: 13px;
	pointer-events: none;
	line-height: 1;
}
.course-page .exam .question .answer-textarea textarea {
    max-width: 100%;
    width: 500px;
    border: none;
    height: 32px;
    box-sizing: border-box;
    outline: none;
    font-size: 12px;
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 12%) 0px 1px 1px 0px, rgb(64 68 82 / 16%) 0px 0px 0px 1px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(64 68 82 / 8%) 0px 2px 5px 0px;
}

.course-page .exam .timer {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: system-ui;
  font-size: 20px;
  font-weight: bold;
  padding: 5px 40px;
  box-sizing: border-box;
  border: 1px solid #eee;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 1px 4px inset rgba(0, 0, 0, 0.1);
  margin: 0 20px;
  color: #777;
}
.course-page .exam .timer .clock {
  font-size: 72px;
  width: 72px;
  height: 72px;
  color: #3b3885;
  margin: 0;
}
.course-page .exam .timer .text {
  font-size: 20px;
  margin-top: 24px;
}
.course-page .exam .timer .link {
  margin-top: 44px;
  color: #365093;
  cursor: pointer;
}
.course-page .exam .timer .link:hover {
  text-decoration: underline;
}
.course-page .exam .result{
	width:100%;
	padding: 4px 24px;
	box-sizing: border-box;
	font-size: 24px;
	margin: 20px 0px;
	font-weight: bold;
}
.course-page .exam .pass{
	width:100%;
	padding: 20px;
	box-sizing: border-box;
	font-size: 14px;
	color: #333;
}


@media(max-width:600px){
	.course-page .exam {
		padding: 20px;
	}
	.course-page .exam .question .answer-textarea textarea {
	    height: 44px;
	}
}




/*** PÁGINA MI CUENTA ***/
.dashboard-content.my-account {
    padding: 0;
    min-width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dashboard-content.my-account .banner {
    width: 100%;
    position: relative;
    height: 300px;
    overflow: hidden;
}
.dashboard-content.my-account .banner .banner-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dashboard-content.my-account .banner .banner-fg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
    align-items: flex-end;
    display: flex;
}
.dashboard-content.my-account .banner .banner-content {
    display: flex;
    width: 100%;
    padding: 50px;
    box-sizing: border-box;
}
.dashboard-content.my-account .banner .banner-content .picture {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.4);
	object-fit: cover;
}
.dashboard-content.my-account .banner .banner-content .body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 44px;
}
.dashboard-content.my-account .banner .banner-content .body .title {
    color: white;
    font-size: 44px;
    line-height: 1;
}
.dashboard-content.my-account .banner .banner-content .body .description {
    color: white;
    font-size: 20px;
    margin-top: 4px;
}
@media(max-width:600px){
	.dashboard-content.my-account .banner .banner-content .body{
		padding: 0px;
		margin-top: 24px;
	}
	.dashboard-content.my-account .banner .banner-content {
	    display: flex;
	    width: 100%;
	    margin-bottom: auto;
	    margin-top: 20px;
	    padding: 24px;
	    box-sizing: border-box;
	    flex-direction: column;
	    align-items: center;
	}
	.dashboard-content.my-account .banner .banner-content .body .title {
	    color: white;
	    font-size: 24px;
	    line-height: 1;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	.dashboard-content.my-account .banner .banner-content .body .description {
	    color: white;
	    font-size: 16px;
	    margin-top: 10px;
	}
}



.account-form {
    width: 800px;
    margin: 44px auto 0px auto;
    background: white;
    border-radius: 8px;
    max-width: calc(100% - 40px);
}
.account-form .title {
    color: #3E3885;
    font-weight: 600;
    padding: 12px 24px;
    width: 100%;
    box-sizing: border-box;
}
.account-form .content {
    display: flex;
    flex-direction: column;
    padding: 12px 24px 24px 24px;
    box-sizing: border-box;
}





.change-password-form {
    width: 800px;
    margin: 44px auto;
    background: white;
    border-radius: 8px;
    max-width: calc(100% - 40px);
}
.change-password-form .title {
    color: #3E3885;
    font-weight: 600;
    padding: 12px 24px;
    width: 100%;
    box-sizing: border-box;
}
.change-password-form .content {
    display: flex;
    flex-direction: column;
    padding: 12px 24px 24px 24px;
    box-sizing: border-box;
}
.change-password-form .footer {
  padding: 0px 24px 24px 24px;
  display: flex;
  align-content: center;
}




.course-landing .page-content{
	background: #EEF1F2;
}

.comments h2 {
    color: #334394;
}

.comments-list {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.comments-list .comment {
    max-width: 100%;
    display: flex;
    width: 700px;
    margin-bottom: 12px;
}

.comments-list .comment .picture-placeholder {
    width: 44px;
    height: 44px;
    padding: 0px;
    border-radius: 50%;
    margin-right: 24px;
}

.comments-list .comment .picture-placeholder img {
    width: 100%;
    height: 100%;
}

.comments-list .comment .body {
    background: white;
    flex: 1;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding: 24px;
    box-sizing: border-box;
}

.comments-list .comment .body .title {
    margin: 0;
}

.comments-list .comment .body .age {
    margin: 0;
    color: #aaa;
    font-size: 12px;
}

.comments-list .comment .body .content {
    font-size: 13px;
}

.comments-list .comment .body .footer {
    display: flex;
    align-items: center;
    margin-top: 12px;
}

.comments-list .comment .body .footer .votes {
    display: flex;
    align-items: center;
    flex: 1;
}

.comments-list .comment .body .footer .votes .vote {
    color: #777;
    display: flex;
    align-items: center;
    margin-right: 12px;
    cursor: pointer;
}

.comments-list .comment .body .footer .votes .vote md-icon {
    color: inherit;
    font-size: 16px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin-right: 4px;
}

.comments-list .comment .body .footer .votes .vote span {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.comments-list .comment .body .footer .votes .vote:hover {
    color: #333;
}

.comments-list .comment .body .footer .reply-button {
    color: #777;
    cursor: pointer;
}

.comments-list .comment .body .footer .reply-button md-icon {
    color: inherit;
    font-size: 16px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
}

.comments-list .comment .body .footer .reply-button span {
    font-size: 12px;
}

.comments-list .comment .body .footer .reply-button:hover {
    color: #333;
}
.comments-placeholder {
    width: 100%;
}
.comments .comments-list-header{
	color: black;
	font-size:32px;
}
.section.comments {
    padding: 44px 0px;
}










/*FICHA CURSO*/
.course-contents-placeholder { /*página del curso en el dash*/
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}
@media(max-width:600px){
	.course .course-contents-placeholder {
		padding: 0px;
	box-sizing: border-box;}
}
.course-contents{
    background: white;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    
width: 800px;max-width: 100%;}

.course-contents .header {
    width: 100%;
    display: flex;
    min-height: 64px;
    padding: 0px 24px;
    box-sizing: border-box;
    align-items: flex-start;
}
.course-contents .header.clickable{
    cursor: pointer;
}
.course-contents .header .icon-placeholder {
    width: 32px;
    height: 32px;
    margin-right: 24px;
    flex: none;
    position: relative;
    margin-top: 16px;
}
@media(max-width:600px){
	.course-contents .header .icon-placeholder{
		/* display: none; */
	}
}
.course-contents .header .badge {
    position: absolute;
    font-size: 8px;
    background: rgba(0, 0, 0, 0.618);
    color: white;
    width: 24px;
    height: 12px;
    text-align: center;
    border-radius: 12px;
    line-height: 13px;
    right: -12px;
    top: -2px;
}
.course-contents .header .icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-contents .header .title{
    width: auto;
    display: flex;
    align-items: flex-start;
    font-weight: 700;
    font-size: 20px;
    padding: 16px 0px;
    flex: 1;
}
@media(max-width:600px){
	.course-contents .header .title{
		text-align: left;
	padding: 16px 0px 0px 0px;}
}
.course-contents .header .title .text{
    min-height: 32px;
    display: flex;
    align-items: center;
    line-height: 1.1;
    color: #131313;
    font-size: 20px;
    margin: 0;
}
.course-contents .header .title .expand-icon{
    font-size: 32px;
    width: 32px;
    height: 32px;
    margin: 0px 24px 0px 4px;
}
.course-contents .status{
    margin-left: auto;
    padding: 0px 12px;
    height: 18px;
    background: #ccc;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 300;
    white-space: nowrap;
    margin-top: 24px;
    flex: none;
}
.course-contents .status a{
	color: white;
	text-decoration: none;
}
.course-contents .status.completed{
    background: #00a94c;
}
.course-contents .status.in-progress{
    background: #365093;
}
.course-contents .content{
    display: flex;
    flex-direction: column;
    /* padding: 0px 24px 0px 80px; */
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    height: 0;
}
@media(min-width:600px){
	.course-contents.open{
	    box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.1);
	}
}

.course-contents.open .content{
    height: auto;
}
.course-contents .description{
    color: black;
    margin: 0;
    font-size: 13px;
    margin-right: 124px;
    margin-left: 80px;
    font-weight: 500;
    line-height: 1.5;
}
.course-contents .technologies{
    padding: 12px 0px;
    display: flex;
    align-items: center;
    margin-left: 80px;
}
.course-contents .technologies label{
    font-weight: 500;
    color: #aaa;
    font-size: 12px;
}
.course-contents .technologies .technology{
    width: 20px;
    height: 20px;
    overflow: hidden;
    margin: 0px 8px;
}
.course-contents .technologies .technology .icon {
    width: 100%;
    height: 100%;
}
.course-contents .units{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 12px 0px 12px 0px;
}
.course-contents .unit{
    display: flex;
    align-items: flex-start;
    padding: 6px 24px 6px 80px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    position: relative;
    min-height: 44px;
    box-sizing: border-box;
}
.course-contents .unit:last-child{
    border-bottom: none;
}
.course-contents .unit.clickable{
    cursor: pointer
}
.course-contents .unit.clickable:hover{
    background: #eee;
}
.course-contents .unit-index {
    display: flex;
    color: #aaa;
    font-size: 20px;
    width: 36px;
flex: none;}
.course-contents .unit-content {
    flex: 1;
    display: flex;
    align-items: flex-start;
    padding-right: 100px;
    padding-top: 6px;
justify-content: flex-start;}
.course-contents .unit-name {
    color: black;
    font-weight: 500;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 20px;
}
.course-contents .unit .has-attachments-icon {
    color: #aaa;
    font-size: 20px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    transform: rotate(-45deg);
    margin: 0px 12px;
}
.course-contents .unit .unit-duration {
    display: flex;
    align-items: center;
    padding-top: 5px;
}
.course-contents .unit .duration-icon {
    font-size: 21px;
    width: 21px;
    min-width: 21px;
    height: 21px;
    min-height: 21px;
    margin-right: 12px;
    color: #aaa;
}
.course-contents .unit .duration-text {
    color: #aaa;
    width: 60px;
    font-size: 14px;
    text-align: right;
    line-height: 1;
}
.course-contents .unit .unit-finished-icon {
    position: absolute;
    left: 44px;
    top: 8px;
    color: #00a94c;
}

@media(max-width: 600px){
	.course-contents .description {margin: 0px 0px 0px 68px;padding: 0px 12px 0px 0px;line-height: 13px;font-size: 11px;color: #555;}
	.course-contents .units {box-sizing: border-box;margin: 0;}
	.course-contents .unit {padding: 4px 12px 4px 68px;margin: 0px;background: white;flex-wrap: wrap;border-radius: 4px;}
	.course-contents .unit-content {padding-right: 4px;padding-top: 3px;}
	.course-contents .unit .unit-duration {padding-top: 7px;width: 50px;white-space: nowrap;}
	.course-contents .unit .duration-icon {margin: 0;font-size: 16px;width: 16px;min-width: 16px;height: 16PX;min-height: 16px;}
	.course-contents .unit .duration-text {width: auto;margin-left: 4px;font-size: 9px;}
	.course-contents .technologies{ margin-left: 68px; padding: 4px 0px;}
    .course-contents .technologies label{
        font-size: 10px;
    }
	.course-contents .header .title .text {font-size: 12px;}
	.course-contents .header .title .expand-icon {margin-right: 0px;font-size: 24px;width: 24px;height: 24px;margin-top: 0px;}
	.course-contents .header {padding: 0px 12px 12px 12px;min-height: 24px;}
	.course-contents .unit-name {font-size: 12px;flex: 1;}
	.course-contents .unit-index {font-size: 12px;font-weight: 700;padding-top: 4px;width: 20px;}
	.course-contents .unit .has-attachments-icon {
        width:16px;
        padding:0;
        box-sizing: border-box;
        text-align: center;
        font-weight: 600;
        font-size: 16px;
        height: 16px;
        margin: 0;
        margin-top: 3px;
    }
    .course-contents .status{
        width:36px;
        padding:0;
        box-sizing: border-box;
        text-align: center;
        font-weight: 600;
        font-size: 10px;
        height: 16px;
        margin-left: 8px;
    }
    .course-contents .unit .unit-finished-icon{
        font-size: 16px;
        width: 16px;
        min-width: 16px;
        height: 16px;
        min-height: 16px;
    }
}



/*FICHA CURSO DENTRO DE RUTA*/
.learning-path-contents {
	width: 100%;display: flex;align-items: center;flex-direction: column;padding: 44px 0px;
	box-sizing: border-box;
}
.learning-path-contents .course-contents{margin: 12px;}
@media(max-width: 600px){
	.learning-path-contents{
		padding: 0px;
	}
	.learning-path-contents .course-contents{
		margin: 0 12px;
		border-radius: 0px;
		overflow: hidden;
	}
	.learning-path-contents .course-contents-placeholder:first-child .course-contents{
		margin-top: 24px;
		border-radius: 12px 12px 0px 0px;
	}
	.learning-path-contents .course-contents-placeholder:last-child .course-contents{
		margin-bottom: 24px;
		border-radius: 0px 0px 12px 12px;
	}
}







/*** PÁGINA INICIO ***/
.poster {width: 100%;position: relative;background: #333387;}
.poster-background {position: absolute;top: 0px;left: 0px;z-index: 1;width: 100%;height: 650px;opacity: 0.3;}
.poster-background img {width: 100%;height: 100%;object-fit: cover;}
.poster-content {width: 1200px;margin: 0 auto;display: flex;flex-direction: column;padding: 72px 0px;align-items: center;position: relative;z-index: 2;max-width: 100%;}
.poster-main {width: 700px;display: flex;flex-direction: column;padding-left: 100px;margin-right: auto;max-width: 100%;box-sizing: border-box;}
.poster-main .title {margin: 0;color: white;font-size: 44px;line-height: 60px;}
.poster-main .description {color: white;font-size: 26px;font-weight: 600;margin: 0;margin-top: 26px;}
.button.poster-button {font-size: 16px;background: #333387;border: 1px solid white;height: 56px;color: white;}
.button.light-button {background: #8B89DD;color: white;}
.poster-main .buttons {display: flex;margin-top: 26px;}
.poster-main .buttons .button {margin-right: 24px;}
.poster .technologies {display: flex;margin-top: 72px;flex-direction: row;width: 100%;overflow: hidden;justify-content: space-between;box-sizing: border-box;}

.technology-card {
    width:280px;
    background: white;
    overflow: hidden;
    border-radius: 12px;
    padding: 12px 24px;
    height: 214px;
    text-decoration: none;
    color: initial;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
}
@media(max-width:600px){
	.technology-card {
	flex: none;}
}

.technology-card:hover{
    background: #f4f8ff;
}
.technology-card .header {display: flex;align-items: center;width: 100%;}
.technology-card .picture {width: 52px;height: 52px;object-fit: contain;margin-right: 12px;}
.technology-card .title {line-height: 20px;font-size: 16px;text-decoration: none;}
.technology-card:not(:last-child) {margin-right: 20px;}
.technology-card .description {font-size: 11px;color: #777;line-height: 15px;margin-top: 10px;}
.button.poster-button:first-child {padding: 0px 44px;}
.button.poster-button:hover{
    background: blue;
}
.technology-card .link {margin-top: auto;display: block;color: blue;font-weight: 700;font-size: 12px;}
.mission {display: flex;width: 100%;padding: 0px 124px;box-sizing: border-box;margin-top: 44px;align-items: flex-start;position: relative;}
.mission .picture {width: 300px;height: auto;}
.mission .content {width: 50%;margin-left: auto;display: flex;flex-direction: column;padding: 56px 68px 0px 32px;box-sizing: border-box;position: relative;z-index: 1;}
.mission .heading {color: white;margin: 0;font-size: 14px;font-weight: 500;}
.mission .title {
	color: white;
    margin: 0;    
    font-size: 22px;line-height: 28px;margin-top: 4px;
}
.mission .description {color: white;margin: 0;margin-top: 44px;font-size: 15px;line-height: 30px;font-weight: 300;}
.methodology {width: 1050px;margin: 0 auto;display: flex;flex-direction: column;margin-top: 100px;max-width: 100%;box-sizing: border-box;}
.methodology .title {text-align: center;color: white;margin: 0;font-weight: 600;font-size: 26px;}
.methodology .description {color: white;text-align: center;width: 650px;margin: 12px auto 0px;font-size: 15px;
    line-height: 30px;
    font-weight: 300;max-width: 100%;}
.methodology .learning-path {margin-top: 0;width: 100%;}
.poster-content > .button {margin-top: 44px;}
	
.learning-paths .learning-paths-list {
	width: 1024px;
	margin-top: 68px;
}
.learning-paths .heading {font-size: 14px;color: blue;margin: 0;}
.learning-paths > .title {
	margin: 0;
    color: black;
    font-size: 36px;
    line-height: 44px;
    width: 800px;
    text-align: center;
    margin-top: 7px;
	max-width: 100%;
}
.learning-paths > .button {
    margin-top: 50px;
}
.learning-paths {display: flex;flex-direction: column;align-items: center;padding: 72px 0px;box-sizing: border-box;overflow: hidden;}

.showcase {width: 100%;/* margin-top: 44px; */background: #333387;position: relative;}
.showcase-background {position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 1;}
.showcase .content {position: relative;top: 0px;left: 0px;z-index: 2;display: flex;flex-direction: column;width: 650px;margin: 0 auto;padding: 72px 0px;align-items: center;max-width: 100%;box-sizing: border-box;}
.showcase .title {
    margin: 0;
    color: white;
    font-size: 28px;
    line-height: 36px;
    width: 100%;
    text-align: center;
    font-weight: 800;}
.showcase .description {margin: 0;
    color: white;
    font-size: 16px;
    line-height: 20px;
    width: 100%;
    text-align: center;
    font-weight: 400;margin-top: 24px;}
.showcase .button {margin-top: 44px;}
.showcase-background img {width: 100%;height: 100%;object-fit: cover;opacity: 0.1;}

@media(max-width:600px){
	.header.page-header .header-top {display: flex;padding: 0px 12px;justify-content: center;}
	.header.page-header .header-top .contact-us {display: none;}
	.header.page-header .header-top .access {display: none;}
	.header.page-header .header-top .separator {display: none;}
	.header.page-header .header-top .phone {margin-right: 12px;}
	.header.page-header .header-top .whatsapp {/* width: 50%; */}
	.header.page-header .header-bottom {height: 72px;background: #F1F3F2;position: sticky;top: 0px;padding: 6px 0px 6px 18px;width: 100%;box-sizing: border-box;box-shadow: 0px 1px 1px #ccc;}
	.header.page-header .header-nav {display: none;}
	.header.page-header .nav-link-placeholder {width: 100%;height: 44px;padding: 12px 24px;}
	.header.page-header .header-nav:before {position: fixed;top: 0px;left: 0px;background: rgba(0, 0, 0, 0.3);content: "";width: 100%;height: 100%;overflow: visible;z-index: -1;display: none;}
	.header.page-header .header-nav .nav-link-placeholder {text-align: right;}
	.poster-content {padding: 0px 0px 24px;}
	.poster-main {padding: 24px;}
	.poster-main .title {font-size: 20px;line-height: 28px;}
	.poster-main .description {font-size: 14px;margin-top: 12px;font-weight: 700;}
	.poster-main .buttons {margin-top: 12px;}
	.button.poster-button {font-size: 12px;padding: 0px 12px;height: 24px;border-radius: 8px;white-space: nowrap;}
	.button.poster-button:first-child {padding: 0px 14px;margin-right: 12px;white-space: nowrap;}
	.poster .technologies {margin-top: 0px;padding: 0px 20px;}
	.mission {padding: 24px;margin: 0;}
	.mission .picture {position: absolute;bottom: 24px;left: 0px;opacity: 0.3;z-index: 0;width: 100%;height: 100%;object-fit: contain;}
	.mission .content {width: 100%;padding: 0;}
	.mission .description {margin-top: 12px;font-size: 15px;line-height: 24px;}
	.methodology {margin-top: 0px;padding: 24px;}
	.methodology .title {font-size: 20px;font-weight: 800;color: #C1D4E4;}
	.methodology .description {line-height: 20px;}
	.poster-background {width: 100%;height: 100%;background: #153595;}
	.poster-background img {object-fit: contain;object-position: top;}
	.showcase .content {padding: 24px;}
	.showcase .title {font-size: 20px;line-height: 24px;}
	.showcase .description {margin-top: 12px;font-size: 14px;}
	.showcase .button {margin-top: 24px;}
	
	.learning-paths {padding: 32px;}
	.learning-paths > .title {font-size: 19px;line-height: 24px;}
	.learning-paths .learning-paths-list {margin-top: 24px;padding: 20px;}
}




/*** VIEW TESTIMONIALS ***/
.testimonials .heading {
    font-size: 14px;
    color: blue;
    margin: 0;
    font-weight: bold;
}
.testimonials {/*! width: 1024px; */display: flex;flex-direction: column;align-items: center;overflow: hidden;margin: 0 auto;padding: 100px 0px;background: #F4F8FF;}
.testimonials-placeholder {width: 100%;background: #F4F8FF;display: flex;align-items: center;justify-content: center;}
.testimonials > .title {margin: 12px 0px 0px 0px;line-height: 44px;font-size: 32px;font-weight: bold;}
.testimonial {width: 317px;display: flex;flex-direction: column;margin: auto;/* height: 400px; */}
.testimonial .word-bubble {background: white;display: flex;flex-direction: column;border-radius: 12px;position: relative;padding-bottom: 24px;/*! flex: 1; */margin-top: auto;}
.testimonial .word-bubble .header {display: flex;align-items: center;padding: 24px 24px 0px;box-sizing: border-box;width: 100%;}
.testimonial .word-bubble .title {margin: 0;font-size: 15px;flex: 1;font-weight: bold;}
.testimonial .icon {color: blue;border-radius: 50%;background: #E8E3FF;padding: 3px;}
.testimonial .word-bubble .content {font-size: 14px;padding: 0px 24px;margin: 0;margin-top: 24px;color: #555;line-height: 24px;}
.testimonial .rating {display: flex;align-items: center;padding: 0px 24px;margin-top: 12px;}
.testimonial .rating .star {margin: 0;font-size: 16px;width: 16px;min-width: 16px;height: 16px;min-height: 16px;color: #ddd;}
.testimonial .rating .star.fill {color: #F2C12F;}
.testimonial .word-bubble:after {content: "";background: white;position: absolute;width: 32px;height: 32px;z-index: 1;bottom: -15px;left: 44px;transform: rotate(45deg);}
.testimonial .author {margin-top: 44px;display: flex;align-items: center;overflow: hidden;padding: 0px 34px;width: 100%;box-sizing: border-box;}
.testimonials .carousel {width: 1024px;display: flex;flex-direction: column;margin-top: 44px;overflow: hidden;max-width: 100%;}
.testimonials .carousel-list {display: flex;width: 100%;}
.testimonials .carousel .slick-track{
	display: flex;
}
.testimonials .carousel .carousel-item{
	margin-top: auto;
}
.testimonial .author img {width: 56px;height: 56px;border-radius: 50%;margin-right: 12px;}
.testimonial .author .title {margin: 0;font-size: 14px;font-weight: bold;}
.testimonial .author .subtitle {color: #777;font-size: 10px;margin-top: 4px;}
.testimonial .author .content {display: flex;flex-direction: column;}
.testimonials .carousel-controls {margin-top: 44px;display: flex;align-items: center;justify-content: center;width: 100%;}
.testimonials .carousel-controls .prev-button {border: 1px solid #ddd;border-radius: 50%;padding: 12px;cursor: pointer;display: flex;margin-right: 4px;}
.testimonials .carousel-controls .next-button {border: 1px solid #ddd;
    border-radius: 50%;
    padding: 12px;cursor: pointer;display: flex;margin-left: 4px;
	}
.testimonials .carousel-controls .next-button md-icon {font-size: 15px;text-shadow: 0px 0px 1px;color: blue;width: 15px;min-width: 15px;height: 15px;min-height: 15px;}
.testimonials .carousel-controls .prev-button md-icon {font-size: 15px;
    text-shadow: 0px 0px 1px;
    color: blue;
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;}
.testimonials .carousel-controls .prev-button:hover {background: #ddd;}
.testimonials .carousel-controls .next-button:hover {background: #ddd;}
.testimonials .carousel-controls .next-button.slick-disabled {pointer-events: none;}
.testimonials .carousel-controls .next-button.slick-disabled md-icon{color: #ddd; }
.testimonials .carousel-controls .prev-button.slick-disabled {pointer-events: none;}
.testimonials .carousel-controls .prev-button.slick-disabled md-icon{color: #ddd; }
@media(max-width:600px){
    .testimonials > .title {font-size: 19px; line-height: 24px;margin: 0;margin-top: 7px; text-align: center;}
}

/*** PAGINA CURSOS ***/
.list-toolbar {width: 1024px;display: flex;position: relative;z-index: 1;max-width: 100%; box-sizing: border-box;}
.list-toolbar .input-group {margin-left: auto;}
.list-toolbar .toggle-filter-button{
	display: none;
}
@media(max-width:600px){
	.list-toolbar { 
		flex-direction: column;
		padding: 0px 20px 20px 20px;
	}
	.list-toolbar .input-group {
		flex-direction: column;
		width: 100%;
		max-height: 0px;overflow: hidden;
	   align-items: stretch;
    }
	.list-toolbar .input-group.open{
		max-height:400px;
	   margin: 12px 0px;overflow: visible;
    }
	.list-toolbar .toggle-filter-button{
		display: flex;
		align-items: center;
		margin-left: auto;
		color: #153595;
        padding: 12px;
    }
	.list-toolbar .toggle-filter-button span{
        color: inherit;
        font-weight: 700;font-size: 14px;margin-right: 8px;
    }
	.list-toolbar .toggle-filter-button md-icon{
        color: inherit;
        font-size: 16px;width: 16px;min-width: 16px;height: 16px;min-height: 16px;
    }
}
.courses-list-placeholder {
    width: 1024px;
    margin-top: 24px;
    max-width: 100%;
}
.courses > .content {
  padding: 50px 0px;
  width: 1024px;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 auto;
}
@media(max-width: 600px){
	.courses-list-placeholder{margin-top: 0px;}
    .courses .courses-list {
        padding: 0px 20px;
      }
}

/*** VIEW CAREERS (EN SOBRE NOSOTROS) ***/
.career {display: flex;width: 100%;background: #f3f8fe;align-items: flex-end;box-sizing: border-box;position: relative;}
.career > img {width: 50%;height: auto;flex: none;padding-right: 150px;box-sizing: border-box;}
.career .content {display: flex;flex-direction: column;align-items: flex-start;flex: 1;max-width: 600px;padding: 64px 0px;width: 100%;position: relative;z-index: 1;}
.career .heading {font-size: 15px;color: blue;margin: 0;}
.career > .content > .title {width: 400px;margin: 0;margin-top: 4px;font-size: 38px;line-height: 44px;}
.career-features {width: 100%;display: flex;flex-wrap: wrap;margin-top: 50px;}
.career-feature {display: flex;flex-direction: column;width: 250px;align-items: flex-start;margin-right: 44px;}
.career-feature img {height: 44px;}
.career-feature .title {margin: 0;margin-top: 8px;color: black;font-weight: 800;}
.career-feature .description {margin-top: 4px;color: #777;font-size: 15px;line-height: 25px;margin: 5px 0px 0px 0px;}
.career-feature:nth-child(2n) {margin-right: 0px;}
.career-feature:nth-child(n+3) {margin-top: 44px;}
.career .content .button {margin-top: 44px;}

@media(max-width: 600px){
    .career{
        padding: 20px;
    }
    .career > img{
        /*! display: none; */
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom center;
        padding: 0px;
        opacity: 0.618;
    }
    .career .content{
        padding: 0px;
        align-items: center;
    }
    .career .heading{
        font-size: 13px;
        color: #333387;
        text-align: center;
        width: 100%;
        text-transform: uppercase;
    }
    .career > .content > .title{
        font-size: 24px;
        line-height: 30px;
        margin-top: 4px;
        width: 100%;
        text-align: center;
    }
    .career-feature{
        width: 50%;
        margin: 0;
        align-items: flex-start;
        padding-right: 10px;
        box-sizing: border-box;
    }
    .career-feature:nth-child(n+3){
        margin-top: 20px;
    }
    
    .career-feature:nth-child(2n) {
        padding-right:0px;
        padding-left: 10px;
    }
    .career-feature .title{
        font-size: 15px;
        text-align: left;
        line-height: 20px;
    }
    .career-feature .description{
        font-size: 12px;
        text-align: left;
        line-height: 17px;
    }
    .career .content .button{
        margin-top: 20px;
    }
}

/*** VIEW TEACHERS (EN SOBRE NOSOTROS) ***/
.teachers {width: 100%;display: flex;flex-direction: column;padding: 72px 0px;}
.teachers > .heading {text-align: center;font-size: 14px;color: blue;margin: 0;}
.teachers > .title {text-align: center;font-size: 36px;color: black;margin: 0;line-height: 36px;margin-top: 12px;}
.teachers-list {width: 1024px;display: flex;flex-wrap: wrap;margin: 0 auto;margin-top: 72px;max-width: 100%;}
.teachers-list .teacher {
    width: 236px;
    height: 350px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    margin-bottom: 24px;
    margin-left: auto;
}
.teachers-list .teacher:nth-child(4n+1){
	margin-left:0px;
}
.teachers-list .teacher:last-child:nth-child(4n+2){
	margin-left: 26px;
}
.teachers-list .teacher:last-child:nth-child(4n+3){
	margin-left: 26px;
}
.teachers-list .teacher > img {width: 124px;border-radius: 50%;margin: 20px auto;}
.teachers-list .teacher > .title {padding: 0px 24px;width: 100%;box-sizing: border-box;text-align: center;color: black;line-height: 1.25;height: 41px;overflow: hidden;text-overflow: ellipsis;flex: none;margin: 0;font-size: 15px;}
.teachers-list .teacher > .subtitle{
	color: #333;
	line-height: 1.25;
	overflow: hidden;
	flex: none;
	font-size: 9px;
	margin: 0 20px;
	text-align: center;
	font-weight: 500;
	margin-top: 5px;
}
.teacher > .heading {margin: 0;text-align: center;color: blue;font-weight: 400;margin-top: 2px;}
.teacher .description {padding: 0px 20px;width: 100%;box-sizing: border-box;text-align: center;color: #777;line-height: 1.25;overflow: hidden;text-overflow: ellipsis;font-size: 11px;height: 56px;margin: 8px 0px 0px 0px;flex: none;}
.teachers-list .teacher .status {width: 200px;margin: 12px auto 24px auto;height: 32px;display: flex;align-items: center;overflow: hidden;background: #F1F2F6;margin-top: auto;border-radius: 6px;flex: none;padding: 5px 10px;box-sizing: border-box;}
.teachers-list .teacher .status .technologies {display: flex;align-items: center;height: 100%;overflow: hidden;}
.teachers-list .teacher .status .technologies .technology {width: 20px;height: 20px;margin-right: 5px;}
.teachers-list .teacher .status .technologies .technology img {width: 100%;height: 100%;object-fit: cover;}
.teachers-list .teacher .status .social {margin-left: auto;display: flex;align-items: center;}
.teachers-list .teacher .status .social md-icon {font-size: 15px;width: 15px;min-width: 15px;height: 15px;min-height: 15px;}
.teachers-list .teacher .status .social a {display: flex;text-decoration: none;}

@media(max-width: 600px){
    .teachers{
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
    }
    .teachers .heading{
        font-size: 10px;
        color: #333387;
        text-align: center;
        width: 100%;
        margin: 0;
    }
    .teachers > .title{
        font-size: 20px;
        line-height: 24px;
        margin-top: 4px;
        width: 100%;
        text-align: center;
    }
    .teachers-list{
        margin-top: 20px;
    }
    .teachers-list .teacher:last-child{
        margin-right: 0px;
    }
	.teachers-list .teacher{
        margin-left: 20px !important;
    }
}
@media(min-width: 600px){
    .teachers-list .teacher:nth-child(4n){
        margin-right: 0px;
    }
}



/*** CHECKOUT ***/
.checkout {width: 100%;display: flex;flex-direction: column;}
.checkout > .content {width: 810px;max-width: 100%;margin: 0 auto;;padding: 72px 0px;box-sizing: border-box;}
.checkout .payment {width: 100%;background: #E9EEF1;border-radius: 15px;padding: 15px;display: flex;min-height: 126px;box-sizing: border-box;}
.checkout .payment .image {height: 96px;width: auto;flex: none;}
.checkout .payment .content {flex: 1;display: flex;flex-direction: column;margin-left: 30px;}
.checkout .payment .content .title {font-size: 20px;font-weight: 800;color: black;margin: 0;line-height: 1;}
.checkout .payment .content > .description {margin: 8px 0 0 0;font-size: 14px;color: black;font-weight: 500;padding-bottom: 20px;}
.checkout .payment .content .buy {display: flex;align-items: center;margin-top: auto;}
.checkout .payment .content .buy .button {margin-right: 20px;}
.checkout .payment .content .buy .price {
    color: #333387;
    font-size: 13px;
    font-weight: 800;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.checkout .contents {margin-top: 50px;display: flex;flex-direction: column;}
.checkout .contents > .title {margin: 0;font-size: 18px;color: black;font-weight: 700;}

.checkout .list-of-contents {margin-top: 20px;display: flex;flex-wrap: wrap;}
.checkout .list-of-contents > div {width: 50%;font-size: 12px;margin-bottom: 4px;}
.checkout .list-of-contents > div:nth-child(2n) {padding-left: 40px;box-sizing: border-box;}


.checkout .coupon {
    align-items: center;
    font-weight: 500;
    padding: 10px 10px 10px 20px;
    box-sizing: border-box;
    margin-bottom: 10px;
    border-radius: 6px;
    height: 50px;
    display: flex;
    background: #de3c4b;
    overflow: hidden;
    width: 100%;
}
.checkout .coupon > .title {
    color: white;
    margin-right: auto;
}
.checkout .coupon .description {
    margin: 0;
    font-size: 12px;
    margin-right: auto;
    color: blue;
}
.checkout .coupon .code {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* color: white; */
}
.checkout .coupon .code md-icon {
    font-size: 14px;
    color: #333387;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
}
.checkout .coupon .code span {
    font-size: 12px;
    margin-right: 4px;
    font-family: 'Roboto';
    color: #333387;
    font-weight: 600;
}


@media(max-width:600px){
    .checkout .payment{
        margin: 20px 0px 50px 0px;
        border-radius: 0px;
        padding: 40px 20px;
        flex-direction: column;
        align-items: center;
    }
    .checkout .payment .content .buy{
        flex-direction: column;
        align-items: flex-start;
    }
    .checkout .payment .content .buy .button{
        margin: 0;
    }
    .checkout .payment .content .buy .price{
        margin-top: 10px;
    }
    .checkout .contents{
        padding: 20px;
    }
    .checkout .list-of-contents > div{
        width: 100%;
    }
    .checkout .list-of-contents > div:nth-child(2n){
        margin-left: 0px;
        padding-left:0px;
    }

	.checkout .coupon {
	    flex-direction: column;
	    height: auto;
	    margin: 20px;
	    box-sizing: border-box;
	    width: auto;
	}
	
	.checkout .coupon > .title {
	    font-size: 16px;
	    text-align: center;
	    margin-bottom: 10px;
	    line-height: 20px;
	}
	
	.checkout .payment .image {
	    margin-bottom: 20px;
	    border-radius: 12px;
	}
}



/*** VIEW SIGNUP ***/
.signup{
    padding-bottom: 20px;
}
.signup > .header {display: flex;align-items: center;}

.signup > .header .button {
    margin-left: auto;
}
.input-container .error {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.input-container .error md-icon {
    color: rgb(239 72 72);
    font-size: 21px;
    width: 21px;
    min-width: 21px;
    height: 21px;
    min-height: 21px;
    transform: rotate(0.003deg);
}
.input-container .error .floating-message {
    position: absolute;
    right: 36px;
    width: auto;
    height: 36px;
    font-size: 11px;
    color: rgb(239 72 72);
    white-space: nowrap;
    line-height: 36px;
    font-weight: 500;
}

@media(max-width:600px){
    .signup {
        padding: 0 20px;
        width:100%;
        box-sizing: border-box;
    }
    .signup > .header{
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 32px;
    }
    .signup > .header .button{
        margin: 0;
    }
}



/*** PÁGINA PLANES ***/
.plans {background: #F1F2F6;display: flex;flex-direction: column;}
.plans-list {
	display: flex;
	width: 1200px;
	max-width: 100%;
	margin: 44px auto 72px auto;
	box-sizing: border-box;
	justify-content: center;
}
.plans-list .plan {
    width: 280px;
    height: 720px;
    background: white;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    margin-right: 12px;
    flex: 1;
    flex-basis: 21%;
    padding: 24px 48px;
    box-sizing: border-box;
    flex: none;
}
.plans-list .plan img {width: 72px;height: 72px;margin: 8px auto;}
.plans-list .plan .title {font-size: 22px;width: 100%;text-align: center;color: inherit;font-weight: 800;margin: 16px 0 0 0;line-height: 24px;}
.plans-list .plan .description {font-size: 14px;color: inherit;text-align: center;line-height: 20px;font-weight: 400;margin: 0;margin-top: 8px;min-height: 120px;}
.plan-items-list {width: 100%;display: flex;flex-direction: column;margin-top: 20px;padding: 0px 0px 12px 12px;box-sizing: border-box;letter-spacing: -0.1px;line-height: 20px;}
.plan-item {font-size: 12px;list-style-type: disclosure-closed;display: list-item;/* letter-spacing: -0.4px; */}
.plans-list .plan .buttons {width: 100%;margin-top: auto;display: flex;flex-direction: column;align-items: center;}
.plans-list .plan.highlight {background: #333387;color: white;/* margin-left: auto; */margin-right: 0px;}
.plans-list .plan .buttons .button+.button {margin-top: 8px;}
.plans > .heading {color: blue;text-align: center;font-size: 15px;margin: 0px;margin-top: 50px;}
.plans > .title {text-align: center;margin: 0;font-size: 36px;color: black;line-height: 40px;}

@media(min-width: 600px){
	.plans-list .plan{
		width: 320px;
	}
}
@media(max-width: 1024px){
	.plans-list{
		padding: 0 20px;
		margin-top: 20px;
	}
}
@media(max-width: 600px){
    .plans > .heading{ 
        font-size: 10px;
        color: #333387;
        margin-top: 20px;
    }
    .plans > .title{
        font-size: 20px;
        line-height: 24px;
        margin-top: 4px;
    }
    .plans-list .plan{
        padding: 10px 20px 20px 20px;
        height: 500px;
    }
    .plans-list .plan .description{
        font-size: 10px;
        line-height: 15px;
        min-height: initial;
    }
    .plan-item {
        font-size: 10px;
        line-height: 18px;
    }
}






/*** VIEW FAQS (en planes) ***/
.faqs {background: white;display: flex;flex-direction: column;padding: 100px 0px;}
.faqs .heading {margin: 0;color: blue;text-align: center;font-size: 14px;}
.faqs .title {width: 100%;color: black;text-align: center;margin: 0;font-size: 35px;line-height: 44px;}
.faqs .faqs-list {width: 688px;margin: 88px auto;display: flex;flex-direction: column;max-width: 100%;}
.faqs-list .faq {display: flex;flex-direction: column;margin-bottom: 15px;}
.faqs-list .faq .question {display: flex;cursor: pointer;padding: 0px 32px;border-bottom: 2px solid #B6B2FE;align-items: center;height: 55px;}
.faqs-list .faq .answer {padding: 24px 32px;}
.faqs-list .faq .question .text {flex: 1;font-size: 15px;color: black;}
.faqs-list .faq .question md-icon {color: blue;font-size: 32px;width: 32px;height: 32px;}
.faqs-list .faq.selected {}
.faqs-list .faq.selected .answer {/* max-height: 500px; *//* opacity: 1; */}
.faqs-list .faq .answer-placeholder {max-height: 0px;overflow: hidden;opacity: 0;transition: 0.3s ease-in-out all;}
.faqs-list .faq.selected .answer-placeholder {max-height: 500px;opacity: 1;}
.faqs-list .faq:last-child {margin-bottom: 0px;}
@media(max-width: 600px){
    .faqs{
        margin: 0;
        padding: 50px 20px;
        width: 100%;
        box-sizing: border-box;
        margin-top: 20px;
    }
    .faqs .heading{
        font-size: 10px;
        color: #333387;
    }
    .faqs .title{
        font-size: 20px;
        line-height: 24px;
        margin-top: 4px;
    }
    .faqs .faqs-list{
        margin: 12px 0 0 0;
    }
    
    
    .faqs-list .faq {margin-bottom: 12px;}
    .faqs-list .faq .question{ height: auto; }
    .faqs-list .faq .question .text {font-size: 11px; font-weight: 600; line-height: 13px; }
    .faqs-list .faq .question { padding: 0px; }
    .faqs-list .faq .question md-icon { font-size: 24px; width: 24px; height: 24px;  margin-left: 4px;}
    .faqs-list .faq .answer { padding: 10px 0px; font-size: 11px; line-height: 15px; color: #333; }
    
}




/*** VIEW LISTA RUTAS APRENDIZAJE ***/
.learning-paths-list{
	max-width: 100vw;
	width: 1024px;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	justify-content: space-around;
}
/* .learning-paths-list .learning-path-placeholder {
	display: flex;
	flex: 1;
} */
.learning-paths-list .learning-path {
	width: 490px;
	max-width: 100%;
	height: 398px;
	border: 1px solid #ccc;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	border-radius: 12px;
}
.learning-path-image-placeholder {
	height: 145px;
    border-radius: 8px 8px 0px 0px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;flex: none;
}
.learning-path-image{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.learning-path-image-placeholder .tag {
	position: absolute;
    top: 12px;
    left: 12px;
    background: #364E94;
    color: white;
    padding: 4px 12px;
    box-sizing: border-box;
    border-radius: 4px;
    display: flex;
    align-items: center;
}
.learning-path-image-placeholder .tag .tag-icon {
    color: inherit;
    margin-right: 4px;
    font-size: 16px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin-left: -4px;
}
.learning-path-image-placeholder .tag .tag-text {
    font-size: 12px;
    font-weight: 500;
    margin-top: -2px;
}
.learning-paths-list .learning-path .content {
    width: 100%;flex: 1;overflow: hidden;display: flex;flex-direction: column;padding: 16px;box-sizing: border-box;
}
.learning-paths-list .learning-path .title {
    color: black;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: none;
    font-weight: 800;
    font-size: 18px;
    height: 44px;
    margin: 0;
}
.learning-paths-list .learning-path .description {margin-top: 12px;font-size: 13px;color: #777;line-height: 17px;font-weight: 400;}
.learning-paths-list .learning-path .features {width: 100%;display: flex;align-items: center;margin-top: auto;}
.learning-paths-list .learning-path .technologies {display: flex;align-items: center;margin-left: auto;}
.learning-paths-list .learning-path .technologies .technology {
    width: 20px;
    height: 20px;
    overflow: hidden;margin-left: 4px;
}
.learning-paths-list .learning-path .technologies .technology img {width: 100%;height: 100%;object-fit: cover;}
.learning-paths-list .learning-path .feature {display: flex;align-items: center;margin-right: 12px;}
.learning-paths-list .learning-path .feature-icon {
    color: #88AAC8;
    font-size: 16px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin-right: 4px;
}
.learning-paths-list .learning-path .feature-text {
    font-size: 12px;
    font-weight: 500;
    color: #333;
}
.learning-paths-list .learning-path .button {
    background: #3E58A7;
    color: white;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 12px;
    width: 100%;
    cursor: pointer;
    font-size: 18px;
    border-radius: 0px;
}

@media(max-width: 600px){
    .learning-paths-list .learning-path-placeholder{
		width: 100% !important;
	}
	.learning-paths-list .learning-path-placeholder:not(:last-child) .learning-path{
		margin-bottom: 20px;
	}
}
@media(min-width: 600px){
    .learning-paths-list .learning-path-placeholder{
        width: 40%;
        padding: 10px;
    }
    .learning-paths-list .learning-path-placeholder:nth-child(2n + 2){
        /*width: 490px;
        flex: none; */
    }
    .learning-paths-list .learning-path-placeholder:nth-child(n+3){
        margin-top: 20px;
    }
}




/*** PÁGINA CONTACTO ***/
.contact > .content {margin: 0 auto;width: 1024px;display: flex;padding: 100px 0px;max-width: 100%;box-sizing: border-box;}
.contact-text {width: 40%;margin-right: 100px;flex: none;}
.contact-form {width: 100%;}
.contact-form .input-container+.input-container{
    margin-top: 10px;
}
.contact-text .title {
	font-size: 28px;
    font-weight: 600;line-height: 36px;
}
.contact-text .description {font-size: 14px;
    margin: 0;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 44px;
}
@media(max-width: 600px){
    .contact > .content{
        padding: 24px;
        flex-direction: column;
    }
    .contact .contact-text{
        width: 100%;
        margin: 0;
    }
    .contact-text .title{
        font-size: 24px;
        text-align: center;
        line-height: 30px;
    }
    .contact-text .description{
        font-size: 14px;
        text-align: center;
    }
}


/*** PÁGINA ESPACIO DE TRABAJO ***/
.configure-workspace {width: 100%;height: 100%;display: flex;background: white;padding: 100px;box-sizing: border-box;}
.configure-workspace .content {display: flex;flex-direction: column;width: 500px;margin-right: 100px;}
.configure-workspace .picture-placeholder {width: 400px;}
.configure-workspace .picture-placeholder .picture {width: 100%;}
.configure-workspace .title {font-size: 24px;color: black;font-weight: 800;}
.configure-workspace .description {margin-top: 12px;font-size: 16px;line-height: 20px;color: #777;}
.configure-workspace .button {margin-top: 44px;margin-right: auto;}

/* DIALOGS */
md-dialog.md-default-theme,
md-dialog {
    border-radius: 4px;
}
md-dialog.md-default-theme.lms-dialog,
md-dialog.lms-dialog {
    border-radius: 0px;
    width: 80%; min-height: 80%;
    max-height: calc(100vh - 52px);
    overflow: initial;
    /* display: block; */
    margin: auto;
    top: 25px;
}
md-dialog.lms-dialog.md-default-theme,
md-dialog.lms-dialog {
    border-radius: 0px;
}
md-dialog.lms-dialog .nav {
    position: absolute;
    top: 50%;
    margin-top: -27px;
}
md-dialog.lms-dialog .nav.next {
    right: -73px;
}
md-dialog.lms-dialog .nav.prev {
    left: -73px;
}
ui-view {
    height: calc(100vh - 50px);
    overflow: auto;
}
ui-view md-dialog.md-default-theme.lms-dialog,
ui-view md-dialog.lms-dialog {
    opacity: 1;
    max-width: 100%;
    min-width: 100%;
    min-height: 100%;
    box-shadow: none;
    width: 100%;
    top: 0;
}
ui-view md-dialog.lms-dialog md-toolbar {
    display: none;
}
md-dialog.lms-dialog md-toolbar,
md-dialog.lms-dialog md-toolbar .md-toolbar-tools {
    min-height: 85px !important;
    height: 85px;
}
md-dialog.lms-dialog .md-toolbar-tools {
    padding-top: 19px;
}
md-dialog.lms-dialog md-toolbar.md-default-theme:not(.md-menu-toolbar),
md-dialog.lms-dialog md-toolbar:not(.md-menu-toolbar) {
    background-color: #3B3885;
    color: white;
}
md-dialog.lms-dialog md-dialog-content {
    overflow-y: auto;
    height: calc(100vh - 138px);
    padding-top: 36px;
}
md-dialog.lms-dialog.md-dialog-fullscreen,
md-dialog.lms-dialog.fullscreen {
    min-height: calc(100% - 50px);
    min-width: 100%;
    border-radius: 0;
    max-height: calc(100vh - 50px);
    bottom: 0;
}

/** CARD COMPONENTES POWER BI */
.card-componente {height: auto; min-height: 235px; cursor:pointer}
.card-componente md-card-header {}
.card-componente md-card-header md-card-avatar {}
.card-componente md-card-header md-card-header-text {}
.card-componente md-card-title {padding-top:0; flex:0;}
.card-componente md-card-title md-card-title-text .md-headline{font-size:16px; line-height: 18px;}
.card-componente md-card-content {font-size: 12px; line-height: 14px;}
.card-componente md-card-actions {}


.page-content .legal > .content {
    width: 1200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
    padding: 50px 0px;
}
.page-content .legal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 auto;
    background: #F4F8FF;
}


.learning-path{
	display: flex;
	flex-direction: column;
}
.learning-path-anticipated-sale {
    width: 100%;
    height: 50px;
    display: flex;
    background: #de3c4b;
    position: sticky;
    top: 0px;
    z-index: 3;
    overflow: hidden;
}
.learning-path-anticipated-sale.ng-enter {
	transition: 0.7s ease-in-out all 0.7s;
	height: 0px;
}
.learning-path-anticipated-sale.ng-enter-active {
	height: 50px;
}
.learning-path-anticipated-sale.ng-leave {
	transition: 0.7s ease-in-out all;
	height: 50px;
}
.learning-path-anticipated-sale.ng-leave-active {
	height: 0px;
}

.learning-path-anticipated-sale > .content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    height: 50px;
}

.learning-path-anticipated-sale > .content > .title {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    color: white;
    margin-right: 10px;
}

.learning-path-anticipated-sale > .content > .description {
    font-size: 16px;
    color: white;
    margin-left: auto;
}

.learning-path-anticipated-sale .time-remaining {
    display: flex;
    align-items: center;
    padding: 12px 24px;
}

.learning-path-anticipated-sale .time-remaining > .description {
    font-size: 20px;
    margin-left: 20px;
    width: 80px;
}

.learning-path-anticipated-sale .time-remaining > .title {
    font-size: 14px;
}
.learning-path-anticipated-sale > .content > .button {/* width: 228px; */}
.learning-path-anticipated-sale .time-remaining .time-card{
    font-size: 18px;
    background: #F1F1F1;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    box-sizing: border-box;
    flex-direction: column;
    overflow: hidden;
}
.learning-path-anticipated-sale .time-remaining .time-card+.time-card{
	margin-left: 10px;
}
.learning-path-anticipated-sale .time-remaining .time-card > .label{
	font-size: 8px;
	background: #ccc;
	width:100%;
	text-align: center;
	overflow: hidden;
	font-weight: bold;
	height: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.learning-path-anticipated-sale .time-remaining > span {
    width: 20px;
    font-size: 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.learning-path-anticipated-sale > .content > .close-button {
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
}
.learning-path-anticipated-sale > .content > .close-button md-icon{
	color: white;
}


@media(max-width:600px){
	.learning-path-anticipated-sale {
		height: auto;
	}
	.learning-path-anticipated-sale > .content {
		height: auto;
		flex-wrap: wrap;
		flex-direction: column;
	}
	.learning-path-anticipated-sale > .content > .title {
		margin: 0;
		line-height: 1.2;
		padding: 10px 40px 10px 20px;
		box-sizing: border-box;
		text-align: left;
		box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2);
		font-size: 16px;
		width: 100%;
	}
	.learning-path-anticipated-sale > .content > .description {
		margin: 0;
	}
	.learning-path-anticipated-sale > .content > .button {
		margin-top: 12px;
	}
	.learning-path-anticipated-sale > .content {
		padding-bottom: 10px;
	}

	.learning-path-anticipated-sale.ng-enter {
		transition: 0.7s ease-in-out all 0.7s;
		height: 0px;
	}
	.learning-path-anticipated-sale.ng-enter-active {
		height: 250px;
	}
	.learning-path-anticipated-sale.ng-leave {
		transition: 0.7s ease-in-out all;
		height: 250px;
	}
	.learning-path-anticipated-sale.ng-leave-active {
		height: 0px;
	}
}

.related-buyables-placeholder {
    width: 100%;
    display: flex;
    background: white;
    padding: 50px 0px;
}
.related-buyables {
    max-width: 800px;
    margin: 0 auto;
    flex-direction: column;
    width: 100%;
    background: #E9EEF1;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    min-height: 126px;
    box-sizing: border-box;
}
.related-buyables > .title {
    font-size: 20px;
    font-weight: 800;
    color: black;
    margin: 0;
    line-height: 1;
}
.related-buyables > p {
    margin: 8px 0 0 0;
    font-size: 14px;
    color: black;
    font-weight: 500;
    padding-bottom: 20px;
}
.related-buyables > .buy {
    display: flex;
    align-items: center;
    margin-top: auto;
}
.related-buyables > .buy > .price {
    color: #333387;
    font-size: 13px;
    font-weight: 800;
    margin: 0;
    margin-left: 20px;
}

@media(max-width:600px){
	.related-buyables-placeholder {
	    padding: 0;
	}
	
	.related-buyables {
	    border-radius: 0;
	    padding: 20px;
	    box-sizing: border-box;
	}
}


.list {
    display: flex;
    flex-direction: column;
}

.list-item {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: stretch;
    border-top: 1px solid #eee;
    min-height: 32px;
    box-sizing: border-box;
    padding: 10px;
}

.list-item .actions {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.list-item .actions .button:not(:first-child) {
    margin-left: 4px;
}

.list-item-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.list-item-body > .text-1 {
    font-weight: 600;
    font-size: 11px;
    color: #333387;
    margin: 0;
}

.list-item-body > .text-2 {
    font-weight: 400;
    font-size: 10px;
    margin: 0;
    color: #777;
    padding-top: 10px;
    box-sizing: border-box;
}

.list > .list-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}

.list > .list-toolbar .searcher {
    position: relative;
}

.list > .list-toolbar .searcher > input {
    border: none;
    outline: none;
    /* width: 100%; */
    height: 36px;
    margin: 0;
    border-radius: 4px;
    padding: 0px 36px 0px 12px;
    box-sizing: border-box;
    color: #393355;
    font-size: 12px;
    background: #E7EBED;
    border: 1px solid #E7EBED;
    min-width: 300px;
}

.list > .list-toolbar .searcher > md-icon {
    position: absolute;
    right: 5px;
    top: 5px;
}
.list  .share-container {
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
    margin-top: -10px;
}

.button.icon-button {
    background: none;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button.icon-button md-icon {
    color: #333387;
    width: 17px;
    height: 17px;
    margin: 0;
}

.card {
    border-radius: 8px;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* min-height: 250px; */
    /* width: 220px; */
    /* margin-right: 50px; */
    position: relative;
}

.card-header {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0px 12px;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.card-header > .title {
    color: #3E3885;
    font-weight: 600;
    font-size: 15px;
}

.card-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: none;
    background: #364c95;
}

.card-bg .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-fg {
    background: #364c95;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* background: rgba(0, 0, 0, 0.2); */
    display: flex;
    flex-direction: column;
}

.card.continue-where-you-left {
    width: 220px;
    margin-right: 50px;
    height: 120px;
    cursor: pointer;
    text-decoration: none;
}

.card.continue-where-you-left .title {
    color: white;
    font-size: 12px;
    padding: 10px 20px 0px 20px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    box-sizing: border-box;
    white-space: nowrap;
}

.continue-where-you-left .description {
    color: white;
    font-size: 14px;
    padding: 0px 20px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    box-sizing: border-box;
    margin-top: 10px;
    line-height: 1.4;
}

.continue-where-you-left:hover .continue-button{
    color: white;
}
.continue-where-you-left:hover .card-fg{
    background: #364c95c9;
}
.continue-where-you-left .continue-button {
    /* width: 100%; */
    margin-top: auto;
    margin-left: auto;
    color: white;
    font-size: 10px;
    padding: 10px;
    box-sizing: border-box;
    font-weight: bold;
    /* color: #364c95; */
}

.dashboard .home > .main {
    display: flex;
    margin-top: 20px;
}
@media(max-width:600px){
    .dashboard .home > .main {
        flex-direction: column;
        padding: 0px 20px;
        box-sizing: border-box;
    }
    .card.continue-where-you-left{
        width: 100%;
        margin-bottom: 10px;
        height: 140px;
    }
}

.dashboard .home .onboarding {
    display: flex;
    width: 100%;
    justify-content: stretch;
}

.dashboard .home .onboarding .card {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.clickable {
    cursor: pointer;
}

.card > .header {
    display: flex;
    align-items: center;
    min-height: 44px;
    display: flex;
    align-items: flex-start;
    padding: 0px 12px;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.card > .header > .title {
    flex: 1;
}

.dashboard .home .onboarding .progress-tracker {
    width: 100%;
}

.dashboard .home .onboarding-wizard {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* border-top: 1px solid #ccc; */
    max-height: 0px;
    overflow: hidden;
    transition: 0.3s ease-in-out all;
}

.dashboard .home .onboarding-wizard .step {
    display: flex;
    position: relative;
    padding-bottom: 44px;
    /* overflow: hidden; */
}

.dashboard .home .onboarding-wizard .step >.content > .title {
    height: min-28px;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #aaa;
    font-weight: 500;
}
.dashboard .home .onboarding-wizard .step.open >.content > .title {
    color: #000;
}

.dashboard .home .onboarding-wizard .step > .content > .description {
    margin-top: 12px;
    font-size: 14px;
}

.dashboard .home .onboarding-wizard .step .button {
    margin-top: 32px;
}

.noborder{
    border: 0px !important;
}
.onboarding > .card > .body {
    width: 100%;
    display: flex;
    padding: 10px 10px 20px;
    box-sizing: border-box;
    overflow: hidden;
}

.dashboard .home .onboarding-wizard > .steps {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
}

.dashboard .home .onboarding-wizard .step .bullet {
    width: 24px;
    height: 24px;
    border: 2px dashed #ccc;
    border-radius: 50%;
    /* position: relative; */
    margin: 0;
    margin-right: 24px;
}

.dashboard .home .onboarding-wizard .step:not(:last-child) .bullet:after {
    content: "";
    width: 1px;
    top: 32px;
    bottom: 4px;
    background: #ddd;
    position: absolute;
    left: 14px;
}

.dashboard .home .onboarding-wizard .step .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.dashboard .home .onboarding-wizard .step .action {
    /* flex: 1; */
    padding: 0 10px 0 50px;
    display: flex;
    align-items: flex-start;
    /* justify-content: flex-end; */
    /* max-width: 350px; */
    box-sizing: border-box;
    /* overflow: hidden; */
    max-width: 550px;
}

.dashboard .home .onboarding .card.open > .onboarding-wizard {
    max-height: 1000px;
}

.checklist {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.card-checkbox {
    display: flex;
    position: relative;
    /* min-height: 100px; */
    border-radius: 8px;
    margin-bottom: 10px;
    background: #f1f1f1;
    padding: 10px;
    box-sizing: border-box;
}
.card-checkbox > .body > .buttons {
    display: flex;
    align-items: center;
    padding-top: 10px;
    flex-wrap: wrap;
}

.card-checkbox > .body > .buttons .radio-button {
    font-size: 10px;
    border-radius: 5px;
    background: #ddd;
    padding: 5px 10px;
    color: black;
    margin-right: 10px;
    line-height: 1.2;
}
.card-checkbox > .body > .buttons .radio-button > * {
    pointer-events: none;
}
.card-checkbox > .body > .buttons .radio-button.checked {
    outline: 2px solid #364c95;
}
.card-checkbox input {
    display: none;
}

.card-checkbox img {
    width: 32px;
    height: 32px;
}
.card-checkbox > .body {
    flex: 1;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
}

.card-checkbox > .body > .title {
    font-weight: 500;
    color: #000;
    height: 32px;
    align-items: center;
    display: flex;
    flex: none;
}

.card-checkbox > .body > .description {
    font-size: 12px;
    line-height: 1.3;
    color: #777;
}

.dashboard .home .onboarding-wizard .step.finished .bullet:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background: #42e542;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.dashboard .home .onboarding-wizard .step.finished .bullet {
    border: 2px solid #42e542;
}
.dashboard .home .onboarding-wizard .step.open .bullet {
    border: 2px solid #444;
}
.card-checkbox.checked {
    outline: 2px solid #333387;
}
.dashboard .home .onboarding-wizard .step.disabled {
    pointer-events: none;
    opacity: 0.6;
}

@media(max-width:600px){
	.dashboard .home .onboarding {
	    padding: 0px 20px;
	    box-sizing: border-box;
	}
	
	.dashboard .home .onboarding-wizard .step {
	    flex-wrap: wrap;
	}
	
	.dashboard .home .onboarding-wizard .step .action {
	    margin-top: 20px;
	}
}

.dashboard .home .onboarding-wizard .step .action iframe {
    max-width: 100%;
    width: 350px;
}

.add-bookmark-form {
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.add-bookmark-form .button {
    margin-top: 20px;
    align-self: end;
    justify-self: flex-end;
}

.ui-drop-up-menu-content .separator {
    height: 1px;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
}
.add-bookmark-form .title {
    font-size: 24px;
    margin: 0;
    padding-bottom: 32px;
}


.ui-drop-up-menu-content .menu-item {
    /* transform: translateX(8px); */
    transition: .3s ease-in-out all;
}

.ui-drop-up-menu-content .menu-item .delete-button {
    position: absolute;
    top: 0px;
    left: -64px;
    width: 64px;
    height: 64px;
    background: #db2727;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in-out all;
}

.ui-drop-up-menu-content .menu-item .delete-button md-icon {
    color: white;
}
.ui-drop-up-menu-content .menu-item.swiped {
    transform: translateX(64px);
}

.ui-drop-up-menu-content .menu-item-text .body {
    display: flex;
    flex-direction: column;
}

.ui-drop-up-menu-content .menu-item-text .body .title {
    /* min-height: 32px; */
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.3;
    padding-top: 6px;
}

.ui-drop-up-menu-content .menu-item-text .body .description {
    font-size: 11px;
    color: #666;
    font-weight: 400;
}

@media(min-width: 1024px){
    .bookmarks-menu.ui-drop-up-menu-content {
        left: 44px;
        position: absolute;
        max-width: 330px;
    }
}

.bookmarks-menu .menu-item {
    transform: translateX(8px);
}


.folder-tree {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    min-height: 100%;
    user-select: none;
    padding-left: 10px;
}

.folder-tree .folder-tree-item {
    display: flex;
    flex-direction: column;
    /* padding: 4px 0px; */
    min-height: 44px;
}

.folder-tree .folder {
    display: flex;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0 12px;
    position: relative;
    height: 44px;
    width: 100%;
    flex: 1;
    min-height: 44px;
}

.folder-tree .dropdown-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    position: absolute;
    left: -16px;
}

.folder-tree .dropdown-button .dropdown-icon {
    color: #777;
    margin: 0;
}

.folder-tree .folder .icon {
    margin: 0;
    width: 24px;
    height: 24px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.folder-tree .folder .title {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 12px;
    padding: 0px 12px;
    color: inherit;
    font-weight: 500;
    line-height: 1;
    height: 100%;
}

.folder-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    box-sizing: border-box;
}

.folder-item {
    display: flex;
    align-items: flex-start;
    min-height: 44px;
    text-decoration: none;
    color: #333;
    border-radius: 5px;
    display: flex;
    /* flex-direction: column; */
    position: relative;
    overflow: visible;
    width: 100%;
    width: 100%;
    flex-wrap: wrap;
}

.folder-item .icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.folder-item > .title {
    text-decoration: none;
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 12px;
    padding: 0px 12px;
    color: #333;
    font-weight: 400;
    line-height: 1;
    height: 100%;
}

.folder-item .bookmark {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 12px;
    height: 100%;
    text-decoration: none;
    padding: 0 10px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    min-height: 44px;
}

.folder-item .bookmark .title {
    padding: 0px 12px;
    color: inherit;
    font-weight: 500;
    line-height: 1;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 31.8%;
}

.dialog {
    /* padding: 20px; */
    display: flex;
    flex-direction: column;
    width: 400px;
    max-width: 100%;
}

.dialog .header {
    display: flex;
    align-items: center;
    padding: 20px;
}

.dialog .header .title {
    font-size: 15px;
    margin: 0;
    font-weight: 400;
    line-height: 1;
}

.dialog .content {
    padding: 0px 20px;
    box-sizing: border-box;
}

.dialog .footer {
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.dialog .footer .button {
    margin-left: 10px;
}



.folder-root {
    padding-left: 20px;
}
.folder.ui-droppable-hover {
    background: rgb(232, 240, 254);
}

.folder-item .icon {
    border-radius: 50%;
    background: white;
    width: 28px;
    height: 28px;
    padding: 2px;
    box-sizing: border-box;
}
folder-tree-item {
    width: 100%;
    display: block;
}


.ui-sortable-placeholder{
    height: 0px !important;
    min-height: 0px !important;
    visibility: visible !important;
}
.ui-sortable-placeholder::after {
    content: "";
    background-clip: padding-box;
    background-color: #7598c5;
    border: 3px solid #7598c5;
    border-bottom-color: transparent;
    border-radius: 0;
    border-top-color: transparent;
    box-sizing: border-box;
    display: block;
    height: 8px;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 1;
    transform: translateY(-50%);
}
folder-content {
    width: 100%;
}
folder-content.drag-over-folder .ui-sortable-placeholder::after{
    display:none;
}

.folder-item.ui-sortable-helper md-menu{
    display: none;
}
.folder-item.ui-sortable-helper folder-content{
    display: none;
}
.folder-item.ui-sortable-helper .description{
    display: none;
}
/*
.folder-item:before {
    content: "";
    border-left: 1px dotted #757575;
    position: absolute;
    width: 23px;
    height: 44px;
    top: -23px;
    border-bottom: 1px dotted #757575;
    left: -25px;
}
*/
.folder-item.selected {
    background: #edf2f9;
}

.folder-item.ui-sortable-helper {
    max-width: 200px;
    border-radius: 46px;
    overflow: hidden;
    text-overflow: ellipsis;
    background: white;
    white-space: nowrap;
    box-shadow: 0px 0px 3px 1px #7598c5;
    box-sizing: border-box;
    /* pointer-events: none; */
    opacity: 0.8;
    background: #333387;
    color: white;
    pointer-events: none;
    height: 44px;
    max-height: 44px;
}
.folder-item .description{
    visibility: hidden;
}
.folder-item.selected .description{
    visibility: visible;
    color: #777;
    font-weight: 500;
    font-size: 11px;
}










.app-menu-content {
    position: absolute;
    top: 0px;
    background: white;
    width: 364px;
    height: 100vh;
    right: 0px;
    box-shadow: -2px 1px 3px rgba(0, 0, 0, 0.3);
     /* Two columns with equal width */
     /* Minimum height of 44px for each row */
     /* Gap between grid items */
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    display: block;
    /* flex-direction: column; */
    /* justify-content: flex-start; */
}

.app-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 40px;
    color: #3b3885;
    padding: 0px 16px;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    /* white-space: nowrap; */
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    line-height: 1.2;
}

.app-menu-item {}

.app-menu-item:hover {
    background: rgb(59 56 133);
    color: white;
}

.app-menu-item md-icon {
    transform: rotateZ(0.02deg);
	color: inherit;
    margin: 0;
    font-size: 24px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin-right: 16px;
}

.app-menu-header {
    font-size: 20px;
    padding-bottom: 10px;
    text-align: left;
}

.app-menu-body {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 10px;
    align-items: start;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
}

.app-menu-trigger-clone {
    width: auto;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 10px;
    color: #3b3885;
}

.app-menu-content {
    transform:scale(1);
    opacity: 1;
    transition: all 0.1s ease-in-out;
    transform-origin: top left;
}
.app-menu-container.right .app-menu-content{
    transform-origin: top right;
}
  
.app-menu-content.ng-hide {
    transform:scale(0.8);
    opacity: 0;
}

.app-menu-content .subtitle{
    grid-column: 1 / -1;
    text-align: left;
    margin: 0;
}

.badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    background: #e61e28;
    border-radius: 4px;
    padding: 2px 4px;
    color: white;
}

.app-menu-trigger-clone md-icon {
    color: inherit;
}

.prompter {
    width: 100%;
    height: 44px;
    background: #F8DF70;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 2px 1px rgb(51 51 135 / 30%);
    position: relative;
    z-index: 1;
    gap: 10px;
}
.dashboard-placeholder {
    display: flex;
    overflow: hidden;
    flex: 1;
}
.prompter-message {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
}
.prompter .close-button {margin-left: auto;border-radius: 50%;background: black;color: white;width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;fill: white;cursor: pointer;}

.prompter .close-button md-icon {
    color: white;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    font-size: 20px;
}

.h-100{
    height: 100px;
}

body > .cookies {
    z-index: 999;
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

body > .cookies > .aviso-cookies {
    width: 800px;
    background: white;
    /* padding: 40px 40px 20px; */
    box-sizing: border-box;
    max-width: 95%;
    display: flex;
    box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.3);
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    max-height: 90%;
    overflow: hidden;
}
.aviso-cookies > .content {
    font-size: 14px;
}

.aviso-cookies > .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-top: 40px; */
    padding: 32px 40px;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid #eee;
}
.aviso-cookies > .buttons .button{
	flex:1;
}

.aviso-cookies > .tabs {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.aviso-cookies .tab {
    font-weight: 500;
    font-size: 15px;
    padding: 12px 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.aviso-cookies > .tabs > .tabset {
    padding: 0px;
    width: 100%;
    box-shadow: 0px -1px 0px 0px inset #eee;
}

.aviso-cookies .tab.selected {
    border-bottom: 2px solid #333387;
    color: #333387;
}

.aviso-cookies > .tabs > .tabset > .tab-content {
    padding: 0px;
}

.aviso-cookies .tab-content.consent {
    padding: 0px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0;
    /* margin-top: 20px; */
    border-radius: 10px;
    padding: 32px 40px;
}


.aviso-cookies .tab-content > .header {
    margin: 0;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0px 24px 0px;
}

.aviso-cookies .tab-content > .header > .title {
    font-size: 24px;
    margin: 0;
}


.aviso-cookies .tab-content.consent .cookie-checkbox {
    display: flex;
    align-items: center;
    padding: 20px;
    flex-direction: column;
    flex: 1;
    cursor: pointer;
    border-right: 1px solid #eee;
}
.aviso-cookies .tab-content.consent .cookie-checkbox:hover{
    background: #fafafa;
}
.aviso-cookies .tab-content.consent .cookie-checkbox > * {
    pointer-events: none;
}
.aviso-cookies .tab-content.consent .cookie-checkbox:last-child {
    border-right: 0px;
}

.aviso-cookies .tab-content.consent .cookie-checkbox input {
    width: 20px;
    height: 20px;
}

.aviso-cookies .tab-content.consent .cookie-checkbox label {
    font-size: 15px;
    margin-top: 5px;
    font-weight: 600;
}

.consent-checkboxes {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    border: 1px solid #eaeaea;
    box-sizing: border-box;
    border-radius: 5px;
}

.aviso-cookies .tab-content > .description {
    line-height: 30px;
    font-size: 14px;
}

.aviso-cookies .tab-content.details {
    display: flex;
    flex-direction: column;
}

.aviso-cookies .tab-content.details .accordion {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    flex: none;
    padding-top: 5px;
}

.aviso-cookies .tab-content.details .accordion-visible {}

.aviso-cookies .tab-content.details .accordion-hidden {
    /* display: none; */
    padding-left: 32px;
}

.aviso-cookies .tab-content.details .accordion-visible > .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0px;
}

.aviso-cookies .tab-content.details .accordion-visible > .header > .title {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.aviso-cookies .tab-content.details .accordion-visible > .header > .title md-icon {
    margin: 0;
    margin-right: 10px;
}

.aviso-cookies .tab-content.details .accordion-visible > .header h1 {
    font-size: 16px;
    margin: 0;
}

.aviso-cookies .tab-content.details .accordion-visible > .content {
    font-size: 12px;
    padding: 0px 50px 12px 32px;
}

.aviso-cookies .tab-content.details .accordion-visible > .header > .title .badge {
    background: #bbbbff;
    margin-left: 8px;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aviso-cookies .tab-content.details .accordion-hidden table {
    text-align: left;
    font-size: 11px;
    margin: 20px 0px;
    border-collapse: collapse;
}

.aviso-cookies .tab-content.details .accordion-hidden table th, td {
    /* font-size: 14px; */
    padding: 10px;
    vertical-align: initial;
    border: 1px solid #eee;
}

.aviso-cookies .tab-content.details .accordion-hidden table tr {
    border-bottom: 1px solid #eee;
}
.cookie-checkbox {
    cursor: pointer;
}

.cookies-button {
    position: absolute;
    bottom: 24px;
    left: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #333387;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    z-index: 9;
}

.cookies-button md-icon {
    color: white;
}

.informative-statement {
    /* background: #f7f7f7; */
    /* padding: 20px; */
    box-sizing: border-box;
    margin: 20px 0px;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
}

.informative-statement H1 {
    margin: 0;
    font-size: 12px;
    /* padding: 4px 0px 12px 0px; */
}

.informative-statement p {
    font-size: 10px;
    /* white-space: pre-line; */
    line-height: 13px;
    margin: 0;
}

.dashboard-popup {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-popup .content {
    border-radius: 10px;
    width: 600px;
    box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.07);
    background: white;
    padding: 32px;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    align-items: center;
}
.dashboard-popup .content .input-group{
    width: auto;
    white-space: nowrap;
}
.dashboard-popup .button {
    margin-top: 20px;
}

.footer.page-footer .certifications img {
    width: 150px;
    flex: none;
    border-radius: 10px;
    border: 1px solid #ccc;
}

.footer.page-footer .certifications img+img {
    /* top: -62px; */
    /* right: -44px; */
    position: relative;
}

.footer .stamps {
    width: 100%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    box-shadow: 0px 2px 4px -1px inset;
}