@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,900;1,400;1,500;1,700;1,900&display=swap');

:root {
	--color-primary: #275099;
	--color-primary-hover: #0c3784;
	--color-secondary: #565656;
	--color-white: #FFF;
	--color-gray: #EEE;
	--color-blue: #009afc;
	--color-red: #f00;
	--color-dark: #000;
	--color-gray-dark: #666;
}

body, html {margin: 0;padding: 0;width: 100%;color: var(--color-secondary);font-size: 15px;height: 100%;min-height: 100%;background-color: var(--color-white);font-weight: 400;}
* {font-family: 'Roboto', sans-serif;box-sizing: border-box;line-height: 1;}
h1, h2, h3, h4, h5 {font-weight: 700;margin: 5px 0}
ul {padding-left: 17px;}
p {line-height: 1.6;}
a {color: var(--color-blue);text-decoration: none;}
strong {font-weight: 700;}
section {width: 100%;max-width: 1100px;margin: 0 auto;position: relative;}

#preloader {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: var(--color-white);z-index: 100000;display: none;}
#loader {width: 32px;height: 32px;position: absolute;left: 50%;top: 50%;background: url(../images/loader.gif) no-repeat center 0;margin: -16px 0 0 -16px;}

.wrapper {width: 100%;min-height: 100%;overflow-x: hidden;padding-bottom: 50px;padding-top: 93px;}
.wrapper.login {display: flex;padding: 20px;gap: 20px;}
.wrapper.exercises {padding: 0 0 20px;}

/* estilos del login */
.login-cont {position: relative;padding: 50px;display: flex;align-items: center;background-color: var(--color-white);width: 100%;max-width: 700px;flex-grow: 1;text-align: center;justify-content: center;}
.login-cont .logo {margin-bottom: 30px;}
.login-cont h1 {font-size: 2rem;margin: 20px 0 40px;font-weight: 900;}
.login-cont .form-control {position: relative;margin: 0 0 20px;}
.login-cont .form-control input {border-radius: 50px;background-color: var(--color-white);padding: 12px 10px 12px 40px;width: 95%;font-size: 1.1rem;color: var(--color-secondary);}
.login-cont .form-control svg {width: 20px;position: absolute;top: 12px;left: 24px;fill: var(--color-secondary);}
.login-cont .login-extra {width: 90%;position: relative;margin: 0 auto 30px;padding: 15px 10px 0;}
.login-cont .login-extra a {color: var(--color-blue);}
.login-cont .alert-login {border-radius: 50px;padding: 10px;background-color: #fce8e6;color: var(--color-red);width: 100%; margin: 0 auto 10px;display: none;}
.login-cont .btn {width: 100%;}
.login-cont form {width: 100%;max-width: 400px;}

.login_column_left {background-color: var(--color-gray); background: url(../images/bg-login.webp) no-repeat center;background-size: cover;flex-grow: 1;border-radius: 10px;box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);}


/* head */
.head {position: fixed;top: 0;left: 0;right: 0;background-color: var(--color-primary);z-index: 4;}
.head .logo {float: left;padding: 15px;width: 300px;}
.head .logo img {width: 100%;}

.head .btn {float: right;padding: 21px 15px 17px;border-radius: 0;background: none;min-width: 60px;}
.head .btn img {width: 24px;}

.head .tabs-cont {float: right;padding: 0;margin: 0;position: relative;}
.head .tab {padding: 6px 15px 7px;border: 1px solid var(--color-white);color: var(--color-white);border-radius: 20px;margin: 16px 5px 0;transition: .3s;position: relative;align-items: center;display: inline-flex;gap: 10px;cursor: pointer;}
.head .tab:first-child {display: inline-flex;}
.head .tab:hover, .head .tab.active {background: rgba(255,255,255,.2);}
.head .tab.active::after {content: " ";position: absolute;top: 100%;left: 50%;margin-left: -10px;margin-top: -5px;border-width: 10px;border-style: solid;border-color: transparent transparent var(--color-white) transparent;}
.head .tab img {width: 20px;}


/* breadcrumb */

.breadcrumb {padding: 10px;position: fixed;top: 62px;left: 0;right: 0;background-color: var(--color-white);z-index: 3;box-shadow: 0px 2px 5px rgba(0,0,0,0.2);font-size: .8rem;}
.breadcrumb span {font-weight: 500;}
.breadcrumb a {transition: .3s;color: var(--color-secondary);}
.breadcrumb a:hover {text-decoration: underline;}
.breadcrumb.line {border-bottom: 1px solid #eee;}
.breadcrumb .goal-name {float: right;color: #bc1544;font-size: 1.5rem;margin-top: -5px;margin-right: 10px;}


/* indice usuario cursos */

.courses-cont {position: relative;max-width: 800px;}
.courses-cont a {width: 100%;position: relative;transition: .3s;cursor: pointer;overflow: hidden;display: flex;padding: 10px;border: #f1f1f1;}
.courses-cont a img {width: 180px;margin-right: 20px;}
.courses-cont .name {width: calc(100% - 200px);color: var(--color-secondary);padding: 20px 10px;}
.courses-cont .name h1 {font-size: 1.6rem;}

.courses-cont a .over {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.7);display: flex;justify-content: center;align-items: center;color: var(--color-white);opacity: 0;transition: .2s;transform: scale(0);text-shadow: 2px 2px 3px rgba(0,0,0,0.5);}
.courses-cont a:hover {background-color: #f1f1f1;}

.process {position: relative;height: 5px;background-color: #666;max-width: 300px;margin: 20px 0;}
.process .bar {height: 5px;width: 20%;background-color: var(--color-primary);}

.slider {width: 100%;height: 200px;display: flex;align-items: center;justify-content: center;text-align: center;flex-direction: column;color: var(--color-white);text-shadow: 2px 2px 5px #000;margin-bottom: 30px;background: url(../images/bg-lessons.jpg) no-repeat center;background-size: cover;}
.slider h1 {font-size: 3.5rem;font-weight: 900;margin: 0;line-height: 1;}
.slider h2 {font-size: 2rem;margin: 0;}
.slider.vocabulary {background-image: url(../images/bg-vocabulary.jpg);height: 150px;margin: 0;}


/* Wizard */

.wizard-cont {position: relative;width: 100%;height: 40px;background-color: #f1f1f1;text-align: center;display: flex;align-items: center;justify-content: center;}
.wizard-cont .wizard {position: relative;margin-top: -40px;width: 100%;font-size: 0;}
.wizard-cont .icon {display: inline-flex;align-items: center;justify-content: center;width: 50px;height: 50px;vertical-align: middle;background-color: #b7b7b7;padding: 5px;border-radius: 50px;margin: 0 30px;position: relative;transition: .3s;}
.wizard-cont .icon img {width: 65%;}
.wizard-cont .icon:hover {background-color: #9f9b9b;}
.wizard-cont .icon:before, .wizard-cont .icon:after {content: '';height: 6px;width: 30px;background-color: #b7b7b7;position: absolute;top: 50%;margin-top: -3px;}
.wizard-cont .icon:before {right: 100%;}
.wizard-cont .icon:after {left: 100%;}
.wizard-cont .icon:first-child::before {display: none;}
.wizard-cont .icon:last-child:after {display: none;}
.wizard-cont .icon.actual, .wizard-cont .icon.actual:before, .wizard-cont .icon.actual:after {background-color: var(--color-primary);}
.wizard-cont .icon.done, .wizard-cont .icon.done:before, .wizard-cont .icon.done:after {background-color: #00b8c8;}

.instructions-gen {position: relative;margin: 30px 0 20px;}
.instructions-gen h1 {font-weight: 700;color: var(--color-primary);font-size: 1.7rem;}
.instructions-gen p {font-size: 1.3rem;font-weight: 500;margin: 0;}

.boxes-cont {position: relative;text-align: center;margin-bottom: 20px;}

.boxes {display: inline-block;margin: 10px 20px;width: 280px;border: 5px solid var(--color-white);box-shadow: 2px 2px 5px rgba(0,0,0,0.3);position: relative;}
.boxes img {width: 100%;}
.boxes .over {position: absolute;display: flex;align-items: center;flex-direction: column;top: 0;bottom: 0;left: 0;right: 0;background-color: var(--color-primary);transition: .3s;opacity: 0;color: var(--color-white);padding: 20px;text-align: left;justify-content: flex-start;}
.boxes:hover .over {opacity: 1;}
.boxes .over h1 {text-align: left;width: 100%;}
.boxes .over p {margin: 0;text-align: left;width: 100%;}
.boxes .over .audio-btn {width: 50px;padding: 10px;border-radius: 50px;cursor: pointer;transition: .3s;}
.boxes .over .audio-btn:hover {background: rgba(255,255,255,0.2);}
.boxes .over .audio-btn img {width: 100%;}

.iframe-cont {width: 100%;position: absolute;top: 283px;bottom: 49px;}


/*   footer styles   */

.footer {position: relative;width: 100%;padding: 0;margin-top: -63px;background-color: var(--color-secondary);}
.footer p {text-align: center;font-size: .9em;color: var(--color-white);padding: 14px}
.footer .logo {padding: 0;background-color: #eee;float: left;width: 165px;}
.footer .logo img {width: 100%;}

.switchBtn {position: relative;display: inline-block;width: 15px;height: 15px;margin: -4px 0px 0;cursor: pointer;vertical-align: middle;border: 1px solid var(--color-white);border-radius: 3px;margin-right: 5px;}

.checkbox-mark {position: absolute;cursor: pointer;top: 2px;left: 2px;right: 2px;bottom: 2px;-webkit-transition: .4s;transition: .4s;color: var(--color-white);border-radius: 34px;}
.checkbox-mark .mark {color: var(--color-white);transition: .4s;opacity: 0;font-size: .7rem;}

input:checked + .checkbox-mark .mark {opacity: 1;}
input:checked + .checkbox-mark {background-color: var(--color-white);}
input:disabled {background-color: var(--color-white);}

.checkbox-mark.box, .checkbox-mark.box:before {border-radius: 2px;}

input[type='file'], input[type='checkbox'], input[type='radio'] {display: none;}

.boxtool {position: relative;}

.tooltip {position: absolute;left: 0;right: 0;background-color: var(--color-white);visibility: hidden;opacity: 0;transition: .3s;padding: 10px;text-align: left;font-size: 1rem;z-index: 9;white-space: normal;color: var(--color-secondary);box-shadow: 0 0 5px rgba(0,0,0,0.1);}

.boxtool:hover .tooltip {visibility: visible;opacity: 1;}

.tooltip.down {top: 100%;margin-top: -10px;}

.boxtool:hover .tooltip.down {margin-top: 0;}

.tooltip.up {bottom: 100%;margin-bottom: -10px;}

.boxtool:hover .tooltip.up {margin-bottom: 0;}

.tooltip.up::after {content: " ";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: var(--color-white) transparent transparent transparent;}

.tooltip.menu-user {box-shadow: 2px 2px 5px rgba(0,0,0,.05);padding: 0;left: unset;width: 150px;}
.tooltip.menu-user a {padding: 15px;color: var(--color-secondary);border-bottom: 1px solid #eee;display: block;transition: .3s;}
.tooltip.menu-user a:hover {background-color: #eee;}
.tooltip.menu-user a:last-child {border-bottom: none;}
.tooltip.menu-user .name-user {cursor: default;font-weight: 500;background-color: #e0e0e0;}
.tooltip.menu-user .name-user:hover {background-color: #e0e0e0;}

.tooltip.audios {left: 50%;margin-left: -50px;width: 100px;box-shadow: 0 0 5px rgba(0,0,0,0.5);text-align: center;}
.tooltip.audios::after {content: " ";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: var(--color-white) transparent transparent transparent;}

.tooltip-audio {position: absolute;bottom: 100%;left: 50%;margin-left: -125px;width: 250px;background-color: var(--color-white);transition: .3s;padding: 4px;text-align: center;font-size: 1rem;z-index: 9;white-space: normal;box-shadow: 0 0 5px rgba(0,0,0,0.5);border-radius: 50px;}
.tooltip-audio::after {content: " ";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: var(--color-white) transparent transparent transparent;}

.tooltip-audio.close {visibility: hidden;opacity: 0;transform: scale(0.5);margin-bottom: -10px;}

.tooltip-audio audio {width: 100%;height: 35px;}
.tooltip-audio audio:focus {box-shadow: none;outline: none;border: none;}


/*  accordeon styles    */

.accordion {position: relative;width: 100%;margin: 0 auto;font-size: 1.1rem;}
.accordion .options {margin: 0 0 20px;}
.accordion .options .name {cursor: pointer;padding: 10px 75px 10px 30px;font-weight: 700;transition: .3s;font-size: 1.3rem;position: relative;color: var(--color-white);background-color: var(--color-primary);border-radius: 100px;height: 90px;z-index: 2;display: flex;flex-direction: column;align-items: flex-start;justify-content: center;}
.accordion .options .name:hover {background-color: var(--color-primary-hover);}
.accordion .options .name svg {position: absolute;top: 20px;right: 20px;transition: .3s;background-color: var(--color-white);width: 50px;height: 50px;padding: 10px 10px 5px;border-radius: 100px;}
.accordion .options .name .st0 {fill: var(--color-primary);}
.accordion .options .name.open svg {background-color: #00b8c8;transform: rotate(180deg);}
.accordion .options .name.open .st0 {fill: var(--color-white);}
.accordion .options .name h1 {margin: 0;line-height: 1;}
.accordion .options .name h2 {font-size: 1.1rem;margin: 0;font-weight: 300;}
.accordion .options .info {display: none;padding: 75px 0 0;position: relative;background-color: #f1f1f1;margin-top: -50px;text-align: center;}
.accordion .options .info.intro {padding: 80px 30px 20px;text-align: left;}
.accordion .options .info .module-cont {width: 120px;display: inline-block;text-align: center;color: #b7b7b7;transition: .3s;margin: 10px 20px;vertical-align: top;}
.accordion .options .info .module-cont .module {width: 120px;height: 120px;display: flex;align-items: center;justify-content: center;border-radius: 100px; /*border: 5px solid #b7b7b7;*/padding: 15px;}
.accordion .options .info .module-cont .module svg {width: 90%;}
.accordion .options .info .module-cont .module path {fill: #b7b7b7;transition: .3s;}
.accordion .options .info .module-cont h2 {padding: 10px;text-align: center;position: relative;font-size: 1.3rem;}
.accordion .options .info .module-cont:hover {color: #868686;}
.accordion .options .info .module-cont:hover path {fill: #868686;}
.accordion .options .info .module-cont:hover .module {border-color: #868686;}

.accordion .options .info .module-cont .module.vocabulary {background: url(../images/bg-icon-vocabulary.svg) no-repeat left top;background-size: cover;}
.accordion .options .info .module-cont .module.video {background: url(../images/bg-icon-video.svg) no-repeat left top;background-size: cover;}

.accordion .options .info .module-cont .module.goal {background: url(../images/bg-icon-goal.svg) no-repeat left top;background-size: cover;}
.accordion .options .info .module-cont .module.homework {background: url(../images/bg-icon-homework.svg) no-repeat left top;background-size: cover;}
.accordion .options .info .module-cont .module.evaluation {background: url(../images/bg-icon-evaluation.svg) no-repeat left top;background-size: cover;}
.accordion .options .info .module-cont:hover .module {background-position: left -120px;}

.accordion .options .info .module-cont.done .module {background-position: left bottom;}
.accordion .options .info .module-cont.done h2 {color: #00b8c8;}

.accordion .options .info .module-cont._2 .st0 {fill: none;stroke: #b7b7b7;stroke-width: 10;stroke-linecap: round;stroke-linejoin: round;stroke-miterlimit: 10;transition: .3s;}
.accordion .options .info .module-cont._2 .st1 {fill: #b7b7b7;transition: .3s;}
.accordion .options .info .module-cont._2 .st2 {fill: #b7b7b7;stroke: #b7b7b7;stroke-width: 6;stroke-linecap: round;stroke-linejoin: round;stroke-miterlimit: 10;transition: .3s;}
.accordion .options .info .module-cont._2:hover .st0 {stroke: #868686;}
.accordion .options .info .module-cont._2:hover .st1 {fill: #868686;}
.accordion .options .info .module-cont._2:hover .st2 {fill: #868686;stroke: #868686;}

.accordion .options .info .extra-content {padding: 10px 35px;background-color: #464646;color: var(--color-white);font-weight: 700;margin-top: 30px;text-align: left;cursor: pointer;transition: .3s;}
.accordion .options .info .extra-content:hover {background-color: #1a1a1a;}
.accordion .options .info .extra-content svg {padding: 5px;height: 30px;width: 30px;background-color: var(--color-primary);border-radius: 30px;margin-right: 15px;vertical-align: bottom;}
.accordion .options .info .extra-content polygon {fill: var(--color-white);}
.accordion .options .info .extra-content h1 {display: inline-block;font-size: 1.5rem;margin: 0;line-height: 1;}
.accordion .options .info .extra-content + .inf {position: relative;padding: 15px 20px;display: none;}
.accordion .options .info .extra-content + .inf .button {padding: 10px;margin: 10px;display: inline-block;color: var(--color-secondary);width: 150px;vertical-align: top;}
.accordion .options .info .extra-content + .inf .button .image {padding: 10px;background-color: #00b8c8;border-radius: 80px;width: 80px;height: 80px;cursor: pointer;display: flex;align-items: center;justify-content: center;margin: 0 auto 10px;transition: .3s;}
.accordion .options .info .extra-content + .inf .button:hover .image{background-color: #068b8e;}
.accordion .options .info .extra-content + .inf .button .image img {width: 60%;}
.accordion .options .info .extra-content + .inf .button h3 {font-weight: 300;font-size: 1rem;line-height: 1.1;}


.accordion.mini {margin: 0 auto;max-width: 500px;}
.accordion.mini .options .name {background-color: #666;height: 50px;font-size: 1.1rem;font-weight: 400;color: var(--color-white);}
.accordion.mini .options .name:hover, .accordion.mini .options .name.open {background: #444;}
.accordion.mini .options .name svg {width: 30px;height: 30px;padding: 5px;top: 10px;background-color: var(--color-white);}
.accordion.mini .options .name .st0 {fill: #666;}
.accordion.mini .options .info {text-align: left;padding: 50px 30px 20px;line-height: 1.4;}
.accordion.mini .options .info li {line-height: 1.4;}
.accordion.mini .options .name.open svg {background-color: var(--color-white);}
.accordion.mini .options .name.open .st0 {fill: #666;}


/* videos */

.video-container {position: relative;padding-bottom: 49%;height: 0;margin: 0 auto 50px;z-index: 2;width: 90%;}

.video-container iframe,.video-container object,.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}



/* evaluation styles */

.evaluation-cont {max-width: 800px;margin-bottom: 50px;}

.question-cont {position: relative;margin: 20px 0;}

.question-cont .num {display: inline-flex;width: 30px;height: 30px;background-color: var(--color-primary);color: var(--color-white);margin-right: 15px;align-items: center;justify-content: center;font-size: 1.2rem;font-weight: 700;border-radius: 30px;}

.question-cont .question {display: inline-block;width: calc(100% - 55px);font-weight: 500;font-size: 1.2rem;}

.question-cont .answers {position: relative;padding: 10px 20px;margin-left: 15px;}

.question-cont .answers .lock {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: #000;opacity: 0;display: none;z-index: 2}

.option {position: relative;margin: 5px 0;cursor: pointer;vertical-align: middle;display: block;padding: 7px 15px;max-width: 550px;font-size: 1.1rem;font-weight: 500;border-radius: 3px;border: 1px solid #eee;transition: .3s;}

.option:hover {background-color: #f4f4f4;}

.option.select {border-color: #00b8c8;color: #00b8c8;}

.option i {position: absolute;top: 7px;right: 15px;font-size: 1.3rem;}

.option .correct-ans {position: absolute;top: 7px;right: 15px;font-size: .9rem;color: #333;}

.option.ok.correct-ans {background-color: #99cbf7 ;color: var(--color-white);border-color: #e2f4ea; }

.option img {position: absolute;top: 13px;right: 15px;width: 16px;}

.option.correct, .option.correct:hover {background-color: #e2f4ea;color: #008f33;border-color: #e2f4ea;}

.option.incorrect, .option.incorrect:hover {background-color: #ffe9e8;color: #fb2c1f;border-color: #ffe9e8;}


/* overlay styles */

.overlay {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.5);display: none;z-index: 9}
.overlay .popup {position: relative;width: 90%;max-width: 400px;background-color: var(--color-white);text-align: center;padding: 20px 20px 30px;margin: 10% auto 0;}
.overlay .popup .icon {text-align: center;margin: 10px auto;width: 90px;}
.overlay .popup p {margin: 25px 0;}
.overlay .popup.success .icon {border-color: #039046;}



/* Calendar styles */

.calendar-cont {display: flex;width: 100%;}
.calendar-cont .col-left {width: 250px;padding: 10px;}
.calendar-cont .col-right {width: calc(100% - 250px);padding: 10px;}
.calendar-month {padding: 10px 0;font-weight: 600;font-size: 2.2rem;display: flex;gap: 10px;align-items: center;}
.calendar-month svg {width: 50%;fill: var(--color-secondary);}
.calendar-month a {width: 25px;height: 25px;display: flex;align-items: center;justify-content: center;border-radius: 50%;cursor: pointer;transition: .3s;}
.calendar-month a:hover {background-color: var(--color-gray);}

.calendar {position: relative;border: 1px solid #eee;margin: 10px 0 30px;}
.calendar .row {position: relative;display: flex;}
.calendar .row.days {background-color: #eee;}
.calendar .row.days .item {border-right: 1px solid var(--color-white);font-weight: 600;padding: 5px 10px;min-height: 1px;}
.calendar .row.days .item:las-child {border-right: none;}
.calendar .row .item {width: calc(100%/7);height: auto;border-bottom: 1px solid #eee;border-right: 1px solid #eee;padding: 5px;min-height: 130px;}
.calendar .row .item:last-child {border-right: none;}
.calendar .row:last-child .item {border-bottom: none;}
.calendar .row .item .num {position: relative;font-weight: 600;padding: 5px 10px;}
.calendar .row .item .num.last {color: #ccc;}

.class-item {margin: 5px 0;border-radius: 2px;padding: 5px;width: 100%;background-color: var(--color-primary);color: var(--color-white);transition: .3s;cursor: pointer;font-size: .9rem;position: relative;}
.class-item:hover {background-color: var(--color-primary-hover);}
.class-item h3 {margin: 0;font-weight: 300;font-size: 1rem;}
.class-item p {margin: 0;line-height: 1.5;}
.class-item .delete {position: absolute;top: 50%;right: 5px;width: 30px;padding: 7px;transition: .3s;cursor: pointer;border-radius: 20px;margin-top: -15px;}
.class-item .delete:hover {background: rgba(255,255,255,.2);}
.class-item .delete img {width: 100%;}
.class-item .tooltip {font-weight: 500;font-size: .9rem;text-align: center;}
.class-item.full {background-color: #ccc;cursor: default;}
.class-item.select {background-color: #039046;cursor: default;}

.calendar-cont .col-left h2 {background-color: var(--color-secondary);color: var(--color-white);padding: 5px 10px;margin-top: 30px;}



/* lectura */

.popup-lateral {position: fixed;padding: 0;top: 0;bottom: 0;right: -100%;max-width: 900px;background-color: var(--color-white);z-index: 7;transition: .3s;overflow-y: auto;}
.popup-lateral.open {right: 0;box-shadow: -3px -2px 5px rgba(0,0,0,.3);}
.overlay-lec {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.7);z-index: 4;display: none;}
.btn-close {position: absolute;left: 20px;top: 20px;width: 35px;cursor: pointer;z-index: 9;}
.popup-lateral.reading1 {background: url(../images/img1.jpg) no-repeat center left;background-size: cover;}
.popup-lateral.reading1 .title {position: absolute;top: 20px;padding: 15px 30px;font-size: 1.8rem;background-color: #629578;color: var(--color-white);line-height: 1;z-index: 3;width: 65%;right: 0}
.popup-lateral.reading1 .title strong {font-size: 2.2rem;}
.popup-lateral.reading1 .title span {font-weight: 900;font-size: 3.1rem;}
.popup-lateral.reading1 .text {position: absolute;top: 0;padding: 170px 20px 10px;background: rgba(59,101,93,.8);color: var(--color-white);width: 60%;right: 0;bottom: 0;text-align: justify;}


/* paginacion */

.cont-pagination {position: relative;text-align: center;margin: 20px auto;max-width: 800px; display: flex;justify-content: space-between;}


/* upload slyles */

.upload-cont {margin: 20px auto;max-width: 400px;height: 200px;border: 3px dashed #ccc;display: flex;align-items: center;justify-content: center;text-align: center;flex-direction: column;}
.upload-cont img {width: 120px;}

.link-cont {position: relative;padding: 10px;display: flex;flex-wrap: wrap;}
.link-cont img {width: 20px;margin-right: 10px;}
.link-cont input {width: calc(100% - 30px);padding: 7px 10px;border: 1px solid #eee;border-radius: 5px;font-size: 1.1rem;}
.link-cont .btn {margin: 10px auto;}


/* botones select lessons */

.lessons-button {position: relative;background-color: var(--color-white);border: none;font-size: 1.5rem;display: flex;cursor: pointer;color: var(--color-secondary);align-items: center;}
.lessons-button .name {font-weight: 600;}
.lessons-button img {margin-left: 10px;width: 16px;}
.units-options {padding: 0;position: absolute;top: 100%;left: 0;width: 150px;padding: 10px;background-color: var(--color-white);z-index: 4;box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);border: 1px solid #eee;transition: .3s;opacity: 0;visibility: hidden;}
.units-options a {display: block;padding: 10px 20px;color: var(--color-secondary);transition: .3s;font-size: 1rem;font-weight: 500;text-align: left;}
.units-options a.active, .units-options a:hover {color: #00b8c8;}

.lessons-button:hover .units-options {opacity: 1;visibility: visible;margin-top: 10px;}


/* estilos para pagina de calificaciones */

.detail-head {position: relative;border: 1px solid #eee;border-radius: 5px;padding: 10px 20px 0 20px;display: flex;flex-wrap: wrap;font-size: 14px;}
.detail-head .picture {width: 60px;height: 60px;border-radius: 50%;overflow: hidden;margin-right: 20px;}
.detail-head .picture img {width: 100%;}
.detail-head .info {padding-top: 5px;}
.detail-head .info div {line-height: 1.3;margin: 4px 0;}
.detail-head .info span {font-weight: 400;}
.detail-head .controls {width: 100%;margin-top: 20px;}

.detail-head .controls .lessons-button {font-size: 1rem;display: inline-flex;background-color: #eee;padding: 10px 20px;margin: 0;}
.detail-head .controls .lessons-button .name {font-weight: 500;}
.detail-head .controls .lessons-button img {width: 12px;margin-left: 5px;}

.detail-head .controls .lessons-button.bg-button {background-color: #666;color: var(--color-white);}


/* tablas */

.table-cont {position: relative;overflow: hidden;overflow-x: auto; overflow-y:auto;margin: 30px auto 20px; max-width: 1000px;border: 1px solid #eee;}
.table-cont table {width: 100%;}
.table-cont table tr th {white-space: nowrap;font-weight: 500;padding: 10px 15px;border-bottom: 2px solid #eee;text-align: left;}
.table-cont table tr td {border-bottom: 1px solid #eee;padding: 15px;white-space: nowrap;text-align: left;}
.table-cont table tr td:last-child, .table-cont table tr th:last-child {text-align: center;}
.table-cont table tr:last-child td {border-bottom: none;}
.table-cont table tr:last-child td:first-child {text-align: right;font-weight: 600;}
.table-cont a {cursor:pointer;}
.table-cont a:hover {text-decoration: underline;}

.table-cont .calif-act {padding-top: 0;}
.table-cont .calif-act span {width: 20px;height: 20px;margin-left: 0;}

/* popup */
.popup-container {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background:rgba(0,0,0,0.7);display: none;z-index: 7;}
.popup-container .popup {position: relative;margin:5% auto;width: 96%;max-width: 500px;transition: .3s;padding: 50px 10px;text-align: center;background-color: var(--color-white);}
.popup-container .popup.close {margin-top: -300px;opacity: 0;pointer-events: none;}
.popup-container .popup .form-control {width: 100%;max-width: 300px;}
.popup-container .popup .icon {font-size: 4.5rem;padding: 20px;display: inline-block;border-radius: 100px;border:3px solid #3faf6c;color: #3faf6c;}

.popup-container .popup .icon-alert {font-size: 4.5rem;padding: 20px;display: inline-block;border-radius: 100px;border:3px solid #1e5f92;color: #1e5f92;}

.popup-container .popup .instructions .icon {display: inline-block;font-weight: 700;color: #666;font-size: 1.5rem;margin-left: 5px;transition: .3s;padding: 0;border:none;}

.popup-container.exercise .popup {max-width: 1000px;padding: 20px;text-align: left;}
.calificar {width: 70px;padding:6px;text-align: center;border:1px solid #ccc!important;font-weight: 700;font-size: 1.3rem;vertical-align: top;border-radius: 5px;margin-right: 10px;}
.calificar.border-red {border-color: #f00;}

.popup-container .popup .btn-accept {min-width: 150px;}
.popup-container .popup.error .icon {font-size: 8rem; border: none; color: #ee2026; padding: 20px 45px; }
.popup-container .popup.error .btn-accept { background-color: #ee2026; }


/* formularios */
.form {width: 100%;margin: 30px auto;max-width: 600px;position: relative;}
.cont-form {padding: 10px 5px;position: relative;display: inline-block;width: calc((100%/2) - 10px);margin: 0;}
.cont-form .form-control {border-radius: 10px;width: 100%;border:1px solid var(--color-gray);color: var(--color-secondary);padding: 12px 15px;}
.cont-form .form-control:disabled {background-color: var(--color-white);}
.cont-form label {padding: 5px;position: relative;font-size: .8rem;text-align: left;font-weight: 600;width: 100%;}

.form.change-pass {padding: 30px 40px;}
.form.change-pass .cont-form {width: 100%;display: block;margin: 10px 0;max-width: 100%;text-align: left;}
.form.change-pass .cont-form .btn {margin: 0 10px;}


/* calificaciones homeworks-exams */

.calif-act {padding-top: 20px;font-size: 1.2rem;display: flex;align-items: center;}
.calif-act span {background-color: var(--color-primary);color: var(--color-white);display: inline-flex;width: 35px;height: 35px;text-align: center;justify-content: center;align-items: center;border-radius: 50%;font-size: 1.2rem;margin-left: 5px;font-weight: 700;}
.calif-act span img {width: 80%;}
.calif-act span .tooltip {width: 80px;margin-left: -40px;text-align: center;left: 50%;right: unset;}
.calif-act p {display: inline-flex;margin-left: 10px;}
.calif-act .icon-date {width: 20px;margin-right: 5px;}

/* notificacion chat */
.new-chat {position: absolute;top: 17px;left: 15px;background-color: #314ef4;width: 10px;height: 10px;border-radius: 10px;}


/* comun styles */

.col {display: inline-block;font-size: 1rem;}
.col.x2 {width: calc(100%/2);}

.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}

input {border: none;transition: .3s;border: 1px solid #eee;}

input:focus {outline: none;box-shadow: none;border-color: var(--color-primary);}

input::placeholder {color: #b1b1b1;}

.btn {padding: 15px 25px;cursor: pointer;transition: .3s;display: inline-flex;font-size: 1.1rem;transition: .3s;text-decoration: none;text-align: center;position: relative;border: none;border-radius: 50px;font-weight: 500;align-items: center;justify-content: center;}
.btn:focus {outline: none;box-shadow: none;}

.btn.primary {background-color: var(--color-primary);color: var(--color-white);}
.btn.primary:hover {background-color: var(--color-primary-hover);}

.btn.secondary {background-color: var(--color-gray-dark);color: var(--color-white);}
.btn.secondary:hover {background-color: var(--color-dark);}

.btn.outline {background-color: var(--color-white);color: var(--color-primary);border: 1px solid var(--color-primary);}
.btn.outline:hover {background-color: var(--color-gray);}
.btn.outline svg path {fill: var(--color-primary)}

.btn.pag {padding: 12px 20px;font-size: 1.4rem;min-width: 140px;margin: 10px;}
.btn.pag img {width: 15px;}
.btn.pag.prev img {transform: rotate(180deg);}

.btn .icon-img {width: 20px;margin-right: 5px;display: inline-block;vertical-align: text-bottom;}