/* Reglas generales */
.dark {
	color: white;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
}

body {
	background: #f9f9f9;
	height: 100%;
}

body.noscroll{
  overflow: hidden;
}

h1 {
	background: url(/assets/css/ui/logo.png) no-repeat center center;
	height: 42px;
	font-size: 0;
	display: block;
	background-size: contain;
}

h2, h3 {
	font-family: 'a_regular_bold';
	letter-spacing: .3px;
}

h2, h3, p, a {
	color: #222;
}

h2 {
	font-size: 18px;
}

p, li, td, a, textarea {
	font-size: 13px;
}

p, li, a, th, td, div, textarea {
	font-family: 'a_regular';
}

th {
	font-size: 12px;
}

ul {
	list-style: none;
}

.none {
	display: none !important;
}

/* Grilla */
.contenido {
	width: 90%;
	margin: auto;
	padding: 30px 0;
}

.hola {
	width: 67.5%;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}

.bienvenido {
	padding-bottom: 30px;
	position: relative;
}

.breadcrumbs div {
	width: 100%;
}

.breadcrumbs div span:first-of-type {
	margin: 0 5px;
}

.breadcrumbs div span {
	font-size: 13px;
}

.principal {
	width: 100%;
	overflow: hidden;
}

#grilla {
	float: left;
	padding-right: 30px;
	width: 67.5%;
}

.contenido > aside, .lateral, .principal > aside {
	width: 32.5%;
	float: right;
}

.lateral {
	clear: inline-end;
}

aside:not(.tutor) {
	margin-bottom: 30px;
}

/* Encabezados */
.nombre-profesor {
	font-size: 12px;
	font-family: 'a_regular_semibold';
}

.nombre-materia, .nombre-materia a {
	font-size: 20px;
	font-family: 'a_regular';
}

.encabezado {
	margin-bottom: 8px;
	font-size: 12px;
}

.titulo-hola {
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 10px;
}

/* Tipografías */
.texto-color {
	color: var( --base-color );
}

.texto-bold {
	font-family: 'a_regular_bold';
}

.texto-gris {
	color: #737082;
}

.texto-naranjita {
	color: #f5a623;
}

.texto-rojo {
	color: #d0021b;
}

.texto-naranja {
	color: #f03737;
	font-family: 'a_regular_bold';
}

.parrafo {
	font-size: 15px;
	line-height: 150%;
	font-family: 'a_regular';
	font-weight: normal;
}

.texto-grande {
	font-size: 28px;
}

.hola p {
	font-size: 16px;
}

/* Errores */
#sin-cursos h2, #error-404 h2, #denegado h2, #sin-conexion h2 {
	display: none
}

.no-cursos, .no-cursos .bienvenido {
	padding-bottom: 0;
}

.errores {
	padding: 10px 0 0;
}

.errores .btn-errores {
	background-color: #f9c00b;
	color: white;
	width: max-content;
	font-size: 20px;
	font-weight: bold;
}

#denegado, #error-404, #sin-conexion {
	display: flex;
	align-items: flex-start;
}

#denegado a {
	background-color: #e03c82;
}

#denegado a, #sin-conexion a {
	margin: 5% auto 0 0;
	display: block;
}

#error-404 a {
	margin: 5% 0 0 auto;
	display: block;
}

/* Sin cursos */
#sin-cursos {
	background: url(ui/fondo.png) no-repeat center center;
	width: 100%;
	height: calc( 100vh - 143px );
	display: flex;
	justify-content: center;
	background-size: contain;
}

#sin-cursos p {
	font-size: 24px;
	text-align: center;
	width: 40%;
	margin-top: 155px;
}

/* Error 404 */
#error-404 {
	background: url(ui/404.png) no-repeat top center;
}

/* Acceso Denegado */
#denegado {
	background: url(ui/denegado.png) no-repeat top center;
}

/* Oops */
#sin-conexion {
	background: url(ui/oops.png) no-repeat top center;
}

#error-404, #denegado, #sin-conexion {
	height: calc( 100vh - 10px );
	background-size: contain;
}

/* Listas */
.lista-celeste:before, .completadas:before {
	background: var( --base-color );
}

.lista-celeste:before, .lista-naranja:before, .completadas:before, .proceso:before {
	content: '';
	width: 14px;
	height: 14px;
	display: block;
	margin-right: 10px;
}

.lista-celeste:before, .lista-naranja:before {
	border-radius: 1px;
}

.completadas:before, .proceso:before {
	border-radius: 50%;
}

.lista-naranja:before, .proceso:before {
	background-color: #f7b500;
}

.lista, header .navegacion, header .menu {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

/* Botones */
a {
	text-decoration: none;
}

.btn {
	border-radius: 4px;
	padding: 10px 25px;
	border: none;
	cursor: pointer;
	text-align: center;
	width: 145px;
	display: block;
}

.btn:hover:not(button):not(.btn-ver), .circulo:hover {
	box-shadow: 0px 2px 12px 0px rgba(173,173,173,0.8);
}

.btn-color {
	background: var( --base-color );
}

.btn-rojo {
	background-color: #d0021b;
	color: white;
}

.btn-blanco {
	border: 1px solid var( --base-color );
	background: none;
	color: var( --base-color );
}

.btn-negro {
	border: 1px solid #000;
	background: none;
	color: #000;
}

.btn-ver {
	border: 3px solid white;
	background: none;
	color: white;
}

.btn-ver:hover {
	color: black;
	background: white;
}

.ver-mas, .ver-menos {
	display: block;
	font-size: 0;
	width: 12px;
	height: 12px;
	margin-left: 5px;
	position: relative;
}

.ver-mas {
	background: url(/assets/css/icons/mas.svg) no-repeat center center;
}

.ver-menos {
	background: url(/assets/css/icons/menos.svg) no-repeat center center;
}

.btn-cerrar {
	border: none;
	background: url(/assets/css/icons/cerrar.svg) no-repeat;
	font-size: 0;
	display: block;
	width: 20px;
	height: 20px;
}

.descargar-material {
	display: block;
	width: 10px;
	height: 10px;
	margin-left: 6px;
	background: url(/assets/css/icons_color/download.svg) no-repeat;	
	font-size: 0;
}

.descargar {
	display: block;
	width: 10px;
	height: 12px;
	margin-right: 10px;
	background: url(/assets/css/icons/download.png);
	font-size: 0;
}

.regresar-color {
	color: #222222;
}

.subir {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end;
	margin-top: 20px;
}

.subir:before {
	content: attr(data-accion);
	border-radius: 4px;
	padding: 10px 15px;
	border: none;
	cursor: pointer;
	text-align: center;
	width: 125px;
	display: block;
	font-size: 13px;
	background: #dadada;
	text-transform: uppercase;
}

.archivo-seleccionado {
	margin-top: 20px;
	display: flex;
	align-items: center;
}

.archivo-seleccionado:before {
	content: '';
	background: url(/assets/css/icons/file.png);
	background-size: 40px;
	width: 36px;
	height: 47px;
	display: block;
	margin: 0 10px 0 0;
}

p.subir:before {
	content: 'style.css';
}

.subir input {
	display: none;
}

#bottom .regresar:before {
	content: '< ';
}

#bottom {
	margin: 30px 0 0;
}

label.disabled {
	cursor: default;
}

/* Buscador */
#search {
	-webkit-box-align: end;
	    -ms-flex-align: end;
	            -ms-grid-row-align: flex-end;
	        align-items: flex-end;
}

#search form {
	position: relative;
	width: 100%;
}

#buscador {
	border-radius: 4px;
	border: 0;
	background-color: #ffffff;
	padding: 15px;
	width: 100%;
}

#buscar {
	border: none;
	position: absolute;
	right: 10px;
	background: url(/assets/css/icons/buscar.png);
	width: 22px;
	height: 22px;
	font-size: 0;
}

/* Notificaciones */
.barra {
	padding: 15px 0;
	background: var( --base-color );
}

.barra:not(:last-child) {
	margin-bottom: 1px;
}

.barra > div {
	width: 90%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	margin: auto;
}

.barra > div div {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.barra > div div p {
	font-size: 18px;
	color: white;
	margin-right: 20px;
}

.barra .btn {
	width: auto;
}

.circulo {
	width: 60px;
	height: 60px;
	box-shadow: 2px 4px 8px 2px rgba(110, 110, 110, 0.5);
	border-radius: 50%;
	position: absolute;
	right: 0;
	cursor: pointer;
	background: var( --base-color ) url(/assets/css/icons/video.svg) no-repeat center center;
	background-size: 30px;
}

.circulo.dark{
	background: var( --base-color ) url(/assets/css/icons/video-b.svg) no-repeat center center;
	background-size: 30px;
}

.circulo + .ver-videollamada{
	display: none;
}

.circulo.abierto + .ver-videollamada{
	display: block;
}

.circulo + .ver-videollamada .btn-color.dark{
	color: white;
}

/* Modales y recuadros */
.fondo-celeste, .fondo-rojo {
	padding: 15px;
	border-radius: 5px;
	position: absolute;
	margin: auto;
	text-align: center;
	top: 55px;
	right: calc(50% - 375px);
	width: 700px;
	opacity: 1; 
	transition: opacity 0.5s 6s;
}

.fondo-celeste.off, .fondo-rojo.off { opacity: 0; }

.fondo-celeste p, .fondo-rojo p {
	color: white;
}

.fondo-celeste {
	background: #4ab8ff;
}

.fondo-rojo {
	background: #d0021b;
}

.fondo-blanco {
	background: white;
}

.fondo-color {
	background: var( --base-color );
}

.fondo-blanco, .fondo-color {
	box-shadow: 0 2px 8px 0 rgba(173, 173, 173, 0.5);
	border-radius: 5px;
}

.fondo-color {
	border-radius: 5px 5px 0 0;
}

.fondo-gris {
	padding: 15px 20px;
	border-radius: 4px;
	background-color: #f5f6f9;
}

div.ver-modal, div.ver-modal-perfil {
	position: absolute;
	background: white;
	box-shadow: 0 2px 8px 4px rgba(193, 193, 193, 0.5);
}

.ver-modal-perfil ul li:last-child {
	border-top: 1px solid #dadada;
}

div.ver-modal, table .ver-modal {
	top: 38px;
	right: 50px;
	padding: 10px 0;
	z-index: 1;
	cursor: pointer;
}

div.ver-modal-perfil {
	top: 38px;
	right: 2px;
	z-index: 1;
	cursor: pointer;
}

div.ver-modal li {
	font-size: 12px;
	font-weight: normal;
}

div.ver-modal li a, div.ver-modal-perfil li a {
	padding: 15px 20px;
	display: block;
}

div.ver-modal li a:hover, div.ver-modal-perfil li a:hover {
	background-color: #f5f6f9;
}

.ver-videollamada ul {
	border-radius: 10px;
	padding: 25px;
	width: 360px;
	text-align: center;
	right: 27px;
	top: 60px;
	z-index: 1;
	position: absolute;
}

.ver-videollamada ul li:not(:first-child) {
	padding-top: 20px;
}

.ver-videollamada ul li:not(:last-child) {
	border-bottom: 1px solid #dadada;
	padding-bottom: 20px;
}

.ver-videollamada ul li p {
	margin-bottom: 15px;
}

.ver-videollamada ul li a {
	margin: auto;
}

table .ver-modal {
	top: 38px;
	left: 15px;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
}

.modal {
    padding: 10px;
    background: #fafafa;
    box-shadow: 0 2px 8px 4px rgba(193, 193, 193, 0.5);
    border-radius: 5px;
    z-index: 1;
    position: absolute;
	max-width: 300px;
	display: none;
}

/* Ver video */
.background-modal, .ver-video {
	position: fixed;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0,0,0,.5);
	z-index: 2;
}

.background-modal > div.cerrar-modal {
    background: #d8d8d8;
    padding: 30px;
    position: relative;
}

.background-modal > div.cerrar-modal > div {
	display: flex;
	align-items: center;
    justify-content: flex-end;
    position: absolute;
    top: 9px;
    right: 30px;
}

.background-modal > div.cerrar-modal > div .descargar, .background-modal > div.cerrar-modal > div .cerrar {
	display: block;
    width: 15px;
    height: 15px;
}

.background-modal > div.cerrar-modal > div .descargar {
    background: url(/assets/css/icons/descargar.svg) no-repeat center center;
    background-size: 15px;
	margin-right: 20px;
}

.background-modal > div.cerrar-modal > div .cerrar {
    background: url(/assets/css/icons/cancelar.svg) no-repeat center center;
    background-size: 15px;
}

.background-modal .archivo-subido {
    max-width: 80vw;
    max-height: 80vh;
}

.iconos {
    font-size: 0;
    display: block;
}

.ver-video div {
	padding: 40px;
}

/* Chat */
#chat {
    padding: 30px;
	border-radius: 0 5px 5px 5px;
}

#lista-mensajes {
	max-height: 189px;
	overflow-y: auto;
}

#lista-mensajes ul li {
    padding: 10px;
    margin-bottom: 5px;
	margin-bottom: 0;
}

#lista-mensajes ul li.owner {
    background-color: #fafafa;
}

#lista-mensajes ul li div span {
    font-size: 10px;
}

#lista-mensajes ul li h3 {
	margin-bottom: 0;
	font-size: 12px;
	font-family: 'a_regular';
}

#lista-mensajes .comment-tools {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
    position: relative;
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end;
}

.chat form {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 20px 10px 0;
}

.chat .img {
	display: block;
	width: 32px;
	height: 32px;
	background: grey;
	border-radius: 50%;
	margin-right: 8px;
	background-size: contain;
}

.chat form > div {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	border: 2px solid #d3d6db;
	padding: 6px 10px;
	border-radius: 6px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.chat textarea {
    border: none;
    box-sizing: content-box;
    border-bottom: 2px solid white;
    margin: 5px 0;
    width: 100%;
    overflow: auto;
	height: 50px;
}

.chat .adjuntar input {
	display: none;
}

.chat .adjuntar:after {
	content: '';
	display: block;
	width: 10px;
	height: 20px;
	background: url(/assets/css/icons/adjuntar.png);
	margin-right: 8px;
	cursor: pointer;
}

.chat .enviar {
	width: 20px;
	height: 17px;
	background: url(/assets/css/icons/enviar.png);
	border: none;
	font-size: 0;
	cursor: pointer;
}

/* /* Chat privado */ 
/* #chat-privado { */
	/* padding: 30px; */
/* } */

/* #chat-privado h2 { */
	/* font-weight: 300; */
	/* font-size: 15px; */
	/* padding-bottom: 20px; */
	/* border-bottom: 1px solid #e7ebed; */
	/* font-family: 'a_light'; */
/* } */

/* .btn-mensaje { */
	/* background: none; */
	/* border: none; */
/* } */

/* #chat-privado h2:before, .btn-mensaje:before { */
	/* content: ''; */
	/* width: 25px; */
	/* height: 25px; */
	/* display: block; */
	/* background: var( --base-color ) url(/assets/css/icons/privado.svg) no-repeat center center; */
	/* border-radius: 50%; */
	/* margin-right: 5px; */
	/* background-size: 10px; */
/* } */

/* #chat-privado #lista-privado { */
	/* padding-top: 20px; */
/* } */

/* Archivos cargando */
li.chat-bubble > div.flex-iconos {
	margin-top: 5px;
}

.archivo-adjunto {
	font-size: 0;
}

.archivo-adjunto::after {
	content: '';
	display: block;
	background: url(/assets/css/icons/download.png);
	width: 10px;
	height: 12px;
	margin-left: 5px;
}

#archivos-cargados {
	margin: 5px 0 15px;
	width: 100%;
}

#archivos-cargados li {
	margin-bottom: 10px;
}

.archivo-adjuntandose {
	font-size: 0;
}

.archivo-adjuntandose::after {
	content: '';
	display: block;
	background: url(/assets/css/icons/cerrar-negro.svg);
	width: 10px;
	height: 10px;
	margin-left: 5px;
}

.barra-carga {
	height: 14px;
	border-radius: 5px;
	background-color: rgba(211, 214, 219, 0.5);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.progreso {
	height: 14px;
	border-radius: 5px;
	background-color: #d3d6db;
	position: absolute;
	width: 60%;
	left: 0;
}

.carga {
	position: absolute;
	font-size: 10px;
}

/* Temas y foro: botones */
#video-tools-switcher {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

#video-tools-switcher a {
    display: block;
    padding: 15px 28px;
    margin-right: 5px;
    color: #000000;
    background: white;
    border-radius: 10px 10px 0 0;
}

#video-tools-switcher a.active {
    font-family: 'a_regular_bold';
}

#chat h2, #temario > h2 {
	display: none;
}

#video-tools-switcher a:nth-child(2) {
	display: none;
}

/* Mensajes */
.mensaje {
	margin-top: 15px;
}

.mention {
	color: var( --base-color );
}

.mensaje-borrado {
	font-style: italic;
	color: grey;
	margin-top: 15px;
}

button.btn-mensaje {
	display: none;
}

/* Main */
main video {
	width: 100%;
}

/* Elementos con flex */
.flex, .flex-column {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

.flex, .flex-ancho, .flex-largo {
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

.flex, .flex-ancho, .flex-largo, .flex-iconos, .flex-column, .flexbox, .flex-end {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.flex-ancho, .flex-iconos {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	            -ms-grid-row-align: center;
	        align-items: center;
}

.flex-end {
	-webkit-box-align: end;
	    -ms-flex-align: end;
	            -ms-grid-row-align: flex-end;
	        align-items: flex-end;
}

.flex-start {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}

/* Header y nav */
header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 55px;
	box-shadow: 0 2px 4px 0 rgba(217, 217, 217, 0.5);
	background: white;
}

.navegacion {
	width: 90%;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	margin: auto;
	position: relative;
}

nav ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

header .menu h1, nav ul li a {
	margin-right: 40px;
}

nav ul li a {
	font-size: 15px;
	color: #424242;
	font-weight: 300;
}

nav ul li a.activo {
	font-family: 'a_regular_bold';
	color: var( --base-color );
}

nav ul li a.perfil.activo {
	width: 38px;
	height: 38px;
	border: 1px solid var( --base-color );
}

.info-usuario {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	position: relative;
	margin-right: 50px;
}

.perfil {
	background: var(--profile);
	background-size:  cover;
	background-position: center center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	margin-left: 15px;
	font-size: 0;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
}

/* Tareas del mes: tabla */
.tareas-mes {
	padding: 30px;
	width: 100%;
}

.tareas-mes > div {
	margin-bottom: 20px;
}

.tareas-mes div span:before {
	content: '';
	background: url(/assets/css/icons/calendar.png);
	width: 20px;
	height: 20px;
	display: block;
	margin-right: 10px;
}

.tareas-mes table {
	width: 100%;
	border-collapse: collapse;
}

.tareas-mes table tr {
	text-align: left;
	background: white;
	border-radius: 4px;
	border: 1px solid #f3f3f3;
}

div.ver-modal li:hover {
	background: #f5f6f9;
}

.tareas-mes table td:last-child {
	text-align: center;
}

.tareas-mes table th, main .tareas-mes table td {
	padding: 15px;
}

/* Número de páginas */
.numeracion {
	-ms-flex-item-align: end;
	    align-self: flex-end;
	margin-top: 20px;
}

.numeracion li {
	margin-right: 10px;
}

.numeracion li a {
	padding: 5px;
	border: 1px solid #e1e1e1;
	font-family: 'a_regular_bold';
	width: 27px;
	height: 27px;
	display: block;
	text-align: center;
}

.numeracion li a.seleccionado {
	background: #f5f6f9;
}

.numeracion li:first-child a, .numeracion li:last-child a {
	font-size: 0;
}

.numeracion li:first-child a:before, .numeracion li:last-child a:after {
	margin: 0 0 0 3px;
}

.anterior:before {
	background: url(/assets/css/icons/left.png) no-repeat;
	margin-right: 10px;
}

.siguiente:after {
	background: url(/assets/css/icons/right.png) no-repeat;
	margin-left: 10px;
}

.anterior:before, .siguiente:after {
	content: '';
	width: 10px;
	height: 15px;
	display: block;
}

/* Tareas de la semana */
/* Se muestra cuando no hay tareas en la semana */
.tareas-semana {
	padding: 30px;
}

.tareas-semana > p  {
	font-size: 16px;
	font-family: 'a_regular_bold';
	text-align: center;
}

.tareas-semana > p:before {
	content: '';
	display: block;
	background: url(/assets/css/icons/chica-mini.png) no-repeat center left !important;
	width: 30px;
	height: 70px !important;
	padding-right: 55px;
	margin: 0 auto 5px;
}

.tareas-semana p {
	font-size: 15px !important;
}

/* Se muestra cuando hay tareas en la semana */
.tareas-semana h2 {
	margin-bottom: 15px;
}

.tareas-semana ul li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

.tareas-semana ul li {
	margin-bottom: 30px;
}

.tareas-semana ul li:last-child {
	margin-bottom: 0;
}

/* Ayuda extra: tutor */
.tutor {
	padding: 30px;
}

.tutor p {
	margin: 15px 0;
}

.tutor h2:before {
	content: '';
	background: url(/assets/css/icons/tutor.png) no-repeat center;
	height: 140px;
	display: block;
	margin-bottom: 15px;
}

/* #chat-privado { */
	/* display: none; */
/* } */

/* Formulario */
textarea {
    resize: none;
}

.checkbox {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    cursor: pointer;
    height: 0;
    width: 0;
}

.check {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background: url(/assets/css/icons/no-check.png);
}

.checkbox input:checked ~ .check {
    background: url(/assets/css/icons/check.png);
}

/* TABLET */
@media ( max-width: 1000px ) {
	/* General */
	.descargar-material {
		margin-left: 4px;
	}
	
	.circulo {
		top: -20px;
	}
	
	.info-usuario p {
		width: 75px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.fondo-celeste, .fondo-rojo {
		right: calc(50% - 225px);
		width: 450px;
	}
	
	/* Grilla */
	.contenido {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	
	.principal {
		width: 100%;
	}
	
	.contenido > aside, .principal > aside {
		width: 55%;
	}
	
	.principal > aside {
		float: none;
	}
	
	.breadcrumbs div span:first-of-type {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		max-width: 125px;
	}
	
	#grilla {
		width: 100%;
		padding-right: 0;
	}
	
	.lateral {
		float: none;
	}
	
	.lateral:first-child {
		width: 55%;
	}
	
	.lateral:last-child {
		width: 100%;
		overflow: hidden;
	}
	
	.tutor {
		margin-top: 30px;
	}
	
	.inscripcion {
		margin-top: 0;
	}
	
	#bottom {
		margin: 30px 0 0;
	}
	
	/* Sin cursos */
	#sin-cursos {
		background-size: cover;
	}
	
	#sin-cursos p {
		width: 67%;
		margin-top: 140px;
	}
	
	.contenido.no-cursos {
		padding-bottom: 0;
	}
	
	/* Errores */
	.contenido.errores {
		padding: 0;
	}
	
	#error-404, #denegado, #sin-conexion {
		background-position: center;
	}
	
	/* Chat */
	#video-tools {
		margin-top: 0;
	}
	
	#video-tools-switcher a:nth-child(2) {
		display: block;
	}
	
	#video-tools a:first-child {
		display: block;
	}
	
	#video-tools-switcher {
		margin-bottom: 20px;
	}
	
	#video-tools-switcher a {
		padding: 0 20px;
		background: none;
		margin-right: 0;
	}
	
	#video-tools-switcher a.active {
		color: var( --base-color );
	}
	
	#video-tools-switcher a:first-child {
		padding-left: 0;
	}
	
	.chat .adjuntar:after {
		margin-right: 15px;
	}
	
	/* #chat-privado { */
		/* margin-bottom: 0 !important; */
	/* } */
	
	#chat {
		margin-bottom: 0 !important;
	}
	
	/* Modales */
	div.ver-modal, div.ver-modal-perfil {
		top: 30px;
	}
	
	/* Videollamada */
	.ver-videollamada ul {
		top: 40px;
	}
	
	/* Video */
	.ver-video div {
		padding: 30px;
	}
	
	/* Notificaciones */
	.barra > div div p {
		font-size: 17px;
		margin-right: 40px;
		line-height: 150%;
	}
	
	/* Header */
	header .menu h1, nav ul li a {
		margin-right: 20px;
	}
	
	header .menu h1 {
		background: url(ui/logo-mini.png) no-repeat;
		height: 27px;
		background-size: contain;
		background-repeat: none;
	}
	
	.perfil {
		top: -5px;
	}
	
	.dashboard .tareas-semana > p:before {
		margin-bottom: 5px;
	}
}

/* MOBILE */
@media ( max-width: 767px ) {
	/* Grilla */
	.contenido {
		padding-bottom: 70px;
		padding: 30px 0 80px;
	}
	
	.hola {
		width: 100%;
	}
	
	.contenido > aside, .lateral .tareas-semana, .lateral:first-child {
		width: 100%;
	}
	
	/* General */
	header .menu h1 {
		margin-right: 0;
	}
	
	.fondo-celeste, .fondo-rojo {
		right: calc(50% - 125px);
		width: 250px;
	}
	
	/* Modales */
	div.ver-modal, div.ver-modal-perfil {
		top: auto;
		right: 0;
		left: 0;
		bottom: 50px;
		position: fixed;
		border-radius: 20px 20px 0 0;
	}
	
	div.ver-modal ul, div.ver-modal-perfil ul {
		text-align: center;
	}
	
	div.ver-modal li,div.ver-modal-perfil li {
		width: 100%;
	}
	
	/* Sin cursos */
	#sin-cursos p {
		width: 100%;
		margin-top: 125px;
	}
	
	#denegado a, #sin-conexion a, #error-404 a {
		margin: 20vh auto 0;
	}
	
	.errores .btn-errores {
		font-size: 16px;
	}
	
	/* Ir a mensaje privado */
	/* #volver-comun, #volver-privado { */
		/* display: none; */
		/* margin: 30px 0 0 auto; */
		/* -webkit-box-pack: end; */
		    /* -ms-flex-pack: end; */
		        /* justify-content: flex-end; */
		/* clear: both; */
		/* cursor: pointer; */
	/* } */
	
	/* Ver video */
	.ver-videollamada {
		position: fixed;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0,0,0,.5);
		z-index: 2;
	}
	
	.ver-videollamada ul {
		top: auto;
		left: 0;
		bottom: 50px;
		border-radius: 5px 5px 0 0;
		width: 100%;
	}
	
	.ver-video div {
		padding: 20px;
		width: 90%;
	}
	
	.ver-video video {
		width: 100%;
	}
	
	/* Notificaciones */
	.barra > div div {
		flex-direction: column;
		margin: auto;
	}
	
	.barra > div div p {
		margin-right: 0;
	}
	
	.barra .btn {
		margin-top: 15px;
	}
	
	.barra .btn-cerrar {
		display: none;
	}
	
	nav {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		background: white;
		border-top: 1px solid #f9f9f9;
		z-index: 5;
		height: 50px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	
	nav ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: distribute;
		    justify-content: space-around;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		margin: 10px auto;
		width: 85%;
	}

	nav ul li a {
		font-size: 0;
		display: block;
		margin-right: 0;
		height: 18px;
		width: 36px;
		background-size: 18px;
	}
	
	nav ul li a.resumen {
		background: url(/assets/css/icons_color_originales/resumen.svg) no-repeat center center;
	}
	
	nav ul li a.resumen.activo {
		background: url(/assets/css/icons_color/resumen.svg) no-repeat center center;
	}
	
	nav ul li a.materias {
		background: url(/assets/css/icons_color_originales/materias.svg) no-repeat center center;
	}
	
	nav ul li a.materias.activo {
		background: url(/assets/css/icons_color/materias.svg) no-repeat center center;
	}
	
	nav ul li a.tareas {
		background: url(/assets/css/icons_color_originales/tareas.svg) no-repeat center center;
	}
	
	nav ul li a.tareas.activo {
		background: url(/assets/css/icons_color/tareas.svg) no-repeat center center;
	}
	
	nav ul li a.examenes {
		background: url(/assets/css/icons_color_originales/examenes.svg) no-repeat center center;
	}
	
	nav ul li a.examenes.activo {
		background: url(/assets/css/icons_color/examenes.svg) no-repeat center center;
	}
	
	nav ul li a.certificados {
		background: url(/assets/css/icons_color_originales/certificados.svg) no-repeat center center;
	}

	nav ul li a.certificados.activo {
		background: url(/assets/css/icons_color/certificados.svg) no-repeat center center;
	}
	
	nav ul li a.perfil {
		display: block;
		position: relative;
		background: url(/assets/css/icons_color_originales/perfil.svg) no-repeat center center;
		margin: 0;
		top: auto;
		height: 18px;
		width: 36px;
	}
	
	nav ul li a.perfil.activo {
		background: url(/assets/css/icons_color/perfil.svg) no-repeat center center;
		height: 18px;
		width: 36px;
		border: none !important;
	}
	
	.info-usuario {
		margin: 0;
	}
	
	.dashboard .tareas-semana > p:before {
		margin-bottom: 15px;
	}
	
	.descargar-material:after {
		width: 10px;
		height: 10px;
	}
}