.pop-up { width: 100vw; height: 100vh; position: fixed; background: rgba(0, 0, 0, 0.75); display: flex; /* Por encima del header v2 (sticky, z-index 1000) y del drawer mobile (z-index 2000), para que los modales (login/registro/etc.) no queden tapados por la cabecera ni detrás del menú abierto. */ z-index: 3000; overflow-y: scroll; display: none; } /* Select2 inserta su lista de opciones como hijo de , fuera del modal, con su propio z-index (1051, ver select2.min.css). Al subir `.pop-up` a 3000 arriba, esa lista quedaba detrás del fondo oscuro del modal: el dropdown "abría" (la flechita cambiaba) pero las opciones no se veían. Lo subimos por encima de cualquier `.pop-up` abierto. */ .select2-container--open .select2-dropdown { z-index: 3100; } .pop-up-content { margin: auto; position: relative; background-color: var(--white); /*background-image: url(../img/pictures/popup-bg.png);*/ background-repeat: no-repeat; background-position: top right; border-radius: 20px; width: 80%; max-width: 960px; padding: 60px; display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden; z-index: -2; } .pop-up::-webkit-scrollbar { width: 5px; } .pop-up::-webkit-scrollbar-track { background: var(--grey-dark); } .pop-up::-webkit-scrollbar-thumb { background-color: var(--grey); border-radius: 20px; border: none; } .pop-up::-webkit-scrollbar-thumb:hover { background: #a1a1a1; box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2); } .pop-up::-webkit-scrollbar-thumb:active { background-color: #bdbdbd; } .pop-up-content .close { position: absolute; right: 30px; top: 20px; } /* Login / registro: solo tienen la columna `.info` (sin `.sign-up` al lado), así que el 67% heredado dejaba un hueco a la derecha. Acá la info ocupa el ancho completo y se angosta el contenedor a una sola columna de formulario. */ .login-modal .pop-up-content, .register-modal .pop-up-content { max-width: 560px; } .login-modal .pop-up-content .info, .register-modal .pop-up-content .info { width: 100%; } .open-object { display: flex; } .close-object { display: none; } .pop-up-content video { width: 100%; margin-bottom: 45px; position: relative; } /* info */ .pop-up-info { display: flex; flex-direction: row; justify-content: space-between; } /* course-info */ .pop-up-content .info { width: 67%; position: relative; } .pop-up-content .sign-up { width: 31%; } .pop-up-content .course-info span { font-size: 16px; font-weight: 500; line-height: 22px; } .pop-up-content .course-info span, .pop-up-content .course-info h1, .pop-up-content .topics, .pop-up-content .course-info p { margin-bottom: 14px; } .pop-up-content .topics { display: flex; } .pop-up-content .topics button { font-size: 12px; height: 30px; margin-right: 10px; padding: 10px; } .pop-up-content .topics button:last-of-type { margin-right: 0; } .pop-up-content button { height: 60px; } .pop-up-content .more-info-btn { margin-top: 40px; background-color: var(--white); } .pop-up-content .more-info-btn:hover { background-color: var(--black); } .pop-up-content button .arrow-icon { content: url("../img/icons/icono_flecha_black.svg"); } .pop-up-content button:hover .arrow-icon { content: url("../img/icons/icono_flecha_white.svg"); } /* more-info */ .pop-up-content .more-info { margin-top: 20px; padding-top: 30px; } .pop-up-content .more-info h2 { margin-bottom: 14px; } .pop-up-content nav { display: block; margin: 35px 0; } .pop-up-content nav a { align-items: center; border-radius: 5px; border: 1px solid var(--black); background-color: var(--white); color: var(--black); cursor: pointer; font-size: 16px; display: flex; justify-content: center; height: 50px; width: 100%; padding: 0 28px; margin-bottom: 20px; transition: all 0.3s ease 0s; } .pop-up-content nav a > img { margin-right: 25px; } .pop-up-content .form-data { display: flex; flex-direction: column; justify-content: center; text-align: center; } .pop-up-content h4 { font-size: 20px; font-weight: 400; margin-bottom: 30px; text-align: center; display: flex; justify-content: space-between; align-items: center; width: 100%; } h4.personal-data-title { flex-direction: column; } h4.personal-data-title hr { width: 100%; background-color: var(--grey); height: 1px; border: none; } .pop-up-content .hr-line { height: 1px; width: 25%; margin-bottom: 0; } .pop-up-content form { display: flex; flex-direction: column; align-items: center; } .pop-up-content .custom-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("../img/icons/icono_flecha_desplegable_black.svg"); background-size: 22px; background-position: right center; background-repeat: no-repeat; background-position-x: 96%; background-position-y: 55%; } .pop-up-content input, .pop-up-content select { border: 1px solid black; height: 60px; width: 100%; margin-bottom: 20px; } .pop-up-content input:last-of-type { margin-bottom: 35px; } .pop-up-content input { margin-right: 0; } .pop-up-content select { border-radius: 5px; color: rgb(118, 118, 118); font-family: "Work Sans", sans-serif; font-size: 17px; padding: 10px; } .pop-up-content form button { background-color: var(--white); max-height: 70px; max-width: 230px; width: 100%; justify-content: center; margin-bottom: 48px; } /* sign-up */ .sign-up { display: flex; flex-flow: column; align-items: center; } .sign-up button { justify-content: center; width: 100%; height: 70px; } .sign-up .ayfp { color: var(--black); font-weight: 500; justify-self: center; margin: 10px 0 14px; } .sign-up .timer { display: flex; margin-bottom: 28px; } .sign-up .timer p { color: var(--red); font-weight: 400; } .sign-up img { margin-right: 9px; } .sign-up p { font-weight: 500; } .sign-up .p-secondary { margin-bottom: 18px; padding-left: 40px; } .sign-up ul { display: block; margin-top: 14px; } .sign-up ul li { display: flex; align-items: center; list-style: none; margin-bottom: 14px; } .sign-up ul li p { font-size: 16px; } /* send-data-modal */ .send-data-modal > .pop-up-content { background-image: none; max-width: 870px; max-height: 400px; height: 100%; justify-content: center; } .send-data-modal .info { display: flex; flex-flow: column; justify-content: space-between; text-align: center; } .send-data-modal .info img { margin-bottom: 20px; } .send-data-modal .info h2 { margin-bottom: 14px; } /* teacher-data-modal */ .teacher-data-modal .social-links a { display: inline-block; width: 30px; height: 30px; margin: 4px; } .teacher-data-modal > .pop-up-content .info { width: 80%; } .teacher-data-modal > .pop-up-content .sign-up { width: 16%; } .teacher-data-modal > .pop-up-content { background-image: none; } .teacher-data-modal .topics a { height: 24px; margin-right: 10px; padding: 0; } .teacher-data-modal .info h2 { margin-bottom: 14px; } .teacher-data-modal .sign-up { align-items: flex-start; } .teacher-data-modal .tb-pic { width: 125px; margin-bottom: 20px; } .teacher-data-modal .tb-pic img { margin-right: 0; } /* banner-video */ .banner-video-modal .pop-up-content video { margin-bottom: 0; } /* diplo-banner */ .banner-diplo-modal .more-info { margin-top: 0; } .banner-diplo-modal hr { height: 1px; margin-bottom: 30px; } #gradient-canvas .banner-modal .pop-up-content { max-height: 100%; } /* course-banner */ .video-el { width: 100%; height: auto; } .pop-up.diplo #gradient-canvas, .pop-up.course #gradient-canvas, .pop-up.openclass #gradient-canvas { left: auto; right: -60px; top: -60px; width: calc(100% + 120px); height: calc(100% + 35px); } .pop-up.diplo img.canvas-mask, .pop-up.course img.canvas-mask, .pop-up.openclass img.canvas-mask { left: auto; right: -60px; top: -60px; } .banner-modal.diplo .form-data, .banner-modal.course .form-data, .banner-modal.openclass .form-data, .banner-diplo-modal .form-data { margin-top: 40px; } .banner-diplo-modal .info h2 { margin-bottom: 14px; } /* create new message */ .pop-up.create-new-mge, .pop-up.new-mge-confirm { background: none; padding: 100px 0; } .create-new-mge .pop-up-content, .new-mge-confirm .pop-up-content { border: 1px solid var(--black); box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1); } .create-new-mge .modal-header, .terms-conditions-modal .modal-header { display: flex; align-items: center; } .create-new-mge .modal-header img, .terms-conditions-modal .modal-header img { margin-right: 15px; } .create-new-mge hr, .terms-conditions-modal hr { background-color: #ababab; margin-top: 30px; margin-bottom: 10px; } .create-new-mge .pop-up-content .info, .terms-conditions-modal .pop-up-content .info { width: 100%; } .create-new-mge .pop-up-content form { align-items: start; } .create-new-mge .pop-up-content form label { font-size: 18px; margin: 15px 0; margin-left: 20px; } .create-new-mge .pop-up-content .add-group { display: flex; flex-direction: row; } .create-new-mge .pop-up-content select { height: 50px; width: 100%; min-width: 200px; } .create-new-mge .pop-up-content input { margin-bottom: 30px; } .create-new-mge .pop-up-content form .field { width: 100%; margin-top: 0; } .create-new-mge .pop-up-content form textarea { background-color: var(--white); border: 1px solid var(--black); border-radius: 5px; font-family: "Work Sans", sans-serif; width: 100%; height: 100%; min-height: 150px; margin-bottom: 10px; padding: 20px; } .create-new-mge .pop-up-content form p, .terms-conditions-modal .pop-up-content form p { margin-left: 20px; text-align: left; } .create-new-mge .pop-up-content form .btns, .terms-conditions-modal .pop-up-content .btns { margin-top: 50px; display: flex; justify-content: end; width: 100%; } .create-new-mge .pop-up-content form button:last-of-type { margin-left: 20px; max-width: 150px; } .create-new-mge .pop-up-content form button { padding: 0 40px; max-width: 180px; } .terms-conditions-modal .pop-up-content ul { margin-left: 20px; padding-left: 20px; } .terms-conditions-modal .pop-up-content ul li { margin-bottom: 5px; margin-left: 10px; list-style: disc; } .terms-conditions-modal .pop-up-content .terms-content { padding-top: 10px; max-width: 90%; } .new-mge-confirm .pop-up-content { max-width: 600px; justify-content: center; padding: 60px 60px 100px 60px; } .new-mge-confirm .pop-up-content .info { text-align: center; } .new-mge-confirm .pop-up-content .info img { margin-bottom: 20px; }