.btn-register-attendees,
.btn-register-participation,
.btn-register-participation>div>div>svg {
    display: none;
}

.btn-register-attendees{
    font-size: initial;
    outline: 2px solid !important;
    outline-color: #fff !important;
    outline-offset: -3px !important;
    background-color: black;
    color: white;
    padding: .25rem 1rem !important;
    border: 0px;
}

.btn-register-attendees:hover {
    outline-color: rgba(255, 255, 255, 0) !important;
    outline-offset: 5px !important;
    background-color: var(--main-color) !important;
}

#form-generate-certificate, .form-generate-certificate{
    float: left;
}

#btn-generate-certificate{
    border: none !important;
    display: inline-block;
    background-color: transparent;
    padding: 0;
    font-size: initial;
}

.btn-add-to-list .svg_button svg.minus_svg {
   display: none !important;
}

.btn-remove-from-list .svg_button svg.plus_svg {
  display: none !important;
}

.course_card {
    outline: 1px solid var(--base-color);
    overflow: hidden;
}

.course_tab, .course_tab_movil {
    top: 0;
    left: 100%;
}

.course_tab_movil {
    padding-bottom: 30px;
    padding-right: 30px;
    overflow-y: auto;
    overflow-x: hidden;
}

.course_tab {
    overflow-y: auto;
    overflow-x: hidden;
}

.course_tab:not(#description, #temary, #guide) {
    width: calc(100% - 260px) !important;
    transform: translateX(260px);
    background-color: rgba(0,0,0,0.7);
}

.course_tab.activate, .course_tab_movil.activate{
    left: 0;
}

.course_card , div[id^='tab_']{
    transition: 0.2s all ease;
}

.course_card p {
    font-size: calc(8px + 0.8vmin);
}

#description{
    overflow-x: hidden;
    overflow-y: auto;
}

#description > div:last-child {
    padding-bottom: 3rem;
}

.expert_photo{
  height: 60px;
  width: 60px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

.exam_globes{
    display: grid;
    grid-template-columns: 160px 225px 260px 330px;
    grid-template-rows: repeat(2, 110px) repeat(2, 130px);
    line-height: 20px;
}

.exam_globes svg path {
    stroke: white;
    fill: white;
}
.exam_globes p {
    font-family: 'Barlow Semi Condensed';
    font-weight: 500;
}
.exam_globes span {
    font-family: 'Barlow Condensed';
    font-weight: bold;
}
.exam_svg_circle svg {
    height: 60%;
    width: 60%;
}
.exam_globes > div {
    position: relative;
}
.exam_globes > div > div {
    position: absolute;
    z-index: 1;
}

.exam_globes svg > path{
    stroke-width: 0px;
}

.exam_globes .marks_speech_bubble_corner{
    height: 30%;
    width: 100%;
    top: 29%;
    right: 1px;
}
.exam_globes .marks_speech_bubble_corner > svg {
    height: 100%;
    transform: rotate(90deg);
    position: absolute;
    top: 0;
    right: -1%;
}
.exam_globes .marks_speech_bubble_corner > svg > path {
    fill: #ffc624;
    stroke: #ffc624;
}

.exam_globes .exam_time_speech_bubble_corner {
    height: 50%;
    bottom: -50%;
    left: 0;
    width: 100%;
}

.exam_globes .exam_time_speech_bubble_corner > svg {
    height: 100%;
    position: absolute;
    left: 0;
}

.exam_globes .exam_time_speech_bubble_corner > svg > path {
    stroke: #ef6914;
    fill: #ef6914;
}

.exam_globes .graduate_bubble svg, .exam_globes .three_dots_bubble svg{
    height: 100%;
    width: 100%;
}

.exam_globes .graduate_speech_bubble_corner{
    height: 25%;
    width: 100%;
    z-index: 0;
    right: -1px;
}

.exam_globes .graduate_speech_bubble_corner > svg {
    height: 100%;
    transform: rotate(90deg);
    position: absolute;
    right: 0px;
    z-index: 0;
}

.exam_globes .graduate_speech_bubble_corner > svg > path {
    stroke: #0895be;
    fill: #0895be;
}

.exam_globes .result_speech_bubble_corner svg{
    height: 100%;
    float: right;
    transform: rotate(90deg);
}

.exam_globes .result_speech_bubble_corner svg path{
    stroke: #ef6914;
    fill: #ef6914;
}

.tabs {
    z-index: 20;
    position: absolute;
    bottom: 0;
    height: 35px;
    right: 0;
    width: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.7987570028011204) 53%, rgba(0,0,0,0.6026785714285714) 65%, rgba(0,0,0,0.4009978991596639) 74%, rgba(0,0,0,0.2049194677871149) 83%, rgba(0,0,0,0) 91%);
}

.tabs .disabled, .tabs_movil .disabled{
    cursor: not-allowed;
    background: var(--disable-color);
    opacity: 0.6;
}

.tabs_movil .disabled {
    border: 1px solid var(--disable-color);
}

.tabs_movil {
    scrollbar-width: thin;
    height: 30px;
    overflow-x: auto;
    background: transparent;
    bottom: 30px;
}

/* Tamaño del scroll */
.tabs_movil::-webkit-scrollbar {
    width: 0;
    height: 0;
    scrollbar-width: thin;
}

/* Tamaño del scroll */

/* Estilos barra (thumb) de scroll */
.tabs_movil::-webkit-scrollbar-thumb {
    background: transparent;
}

.tabs_movil::-webkit-scrollbar-thumb:active {
    background-color: transparent;
}

.tabs_movil::-webkit-scrollbar-thumb:hover {
    background: transparent;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0);
}

/* Estilos track de scroll */
.tabs_movil::-webkit-scrollbar-track {
    background: transparent;
}

.tabs_movil::-webkit-scrollbar-track:hover,
.tabs_movil::-webkit-scrollbar-track:active {
    background: transparent;
}

.course_progress {
    width: 55%;
}

.course_progress_movil{
    display: flex;
    flex: wrap;
}

.course_progress_movil, .course_extra_info, .course_info_movil, .course_btns_movil, .course_keywords_movil {
    width: 100%;
}

.course_title, .course_info, .course_keywords {
    width: 40%;
}

.course_btns {
    width: 60%;
}

.course_btns_movil {
    display: flex;
    flex-wrap: wrap;
}

.course_extra_info svg path,
.course_next_meetings svg,
.course_next_meetings svg path,
.course_extra_info div.thumbs > svg {
    stroke: orange;
    fill: orange;
    stroke-width: 0px;
}
.course_next_meetings a{
    font-size: initial;
}

.course_progress_text {
    line-height: 1.2;
    text-transform: uppercase;
}

.tooltip {
    visibility: hidden;
    opacity: 0;
    width: auto;
    min-width: 200px;
    padding: 10px;
    line-height: 2.2;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 2px;
    border: 2px solid white;
    color: white;
}

.tooltip_progress {
    top: calc(100% + 10px);
    right: calc(0% - 200px);
}

.tooltip_access {
    bottom: 115%;
    right: 10%;
}

.tooltip p {
    font-size: 12px !important;
    margin: 0;
}

.tabs .disabled:hover .tooltip, .tabs_movil .disabled:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.card_progress_bar_movil, .card_progress_text{
    width: 50%;
}

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

@media (max-width: 991.98px){
    .card_progress_bar{
        width: 50%;
    }
}
.card_description {
    margin-top: 2rem;
}

.gradient_background_image {
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 37%, rgba(0,0,0,0.5494572829131652) 64%, rgba(0,0,0,0) 100%);
}

.gradient_background_video {
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 49%, rgba(0,0,0,0.7987570028011204) 59%, rgba(0,0,0,0.6026785714285714) 69%, rgba(0,0,0,0.4009978991596639) 79%, rgba(0,0,0,0.2049194677871149) 89%, rgba(0,0,0,0) 99%);
}

.btn-card-concave {
    color: #fff;
    display: flex;
    align-items: center;
    padding: 1.25rem 4rem;
    cursor: pointer;
    outline: 2px solid;
    outline-color: var(--main-color);
    outline-offset: -3px;
    -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.exam_review .btn-card-concave {
    padding: 1.25rem;
    margin-top: 4.5rem !important;
    background-color: var(--main-color);
    outline: unset;
}

.btn-card-convex {
    background-color: var(--main-color);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 1.25rem 4rem;
    cursor: pointer;
}

.btn-card-concave:hover {
    outline-color: rgba(255, 255, 255, 0);
    outline-offset: 5px;
    background-color: var(--main-color);
}

.btn-card-convex:hover {
    background-color: transparent;
}

.btn-card-convex rect {
    fill: none;
    stroke: transparent;
    stroke-width: 2;
    stroke-dasharray: 422, 0;
    -webkit-transition: all 0.35s linear;
    transition: all 0.35s linear;
}

.btn-card-convex .btn-border-effect {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.btn-card-convex:hover rect {
    stroke: #fff;
    stroke-width: 5;
    stroke-dasharray: 15, 310;
    stroke-dashoffset: 48;
    -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-card-convex:hover rect.continue {
    stroke: #fff;
    stroke-width: 5;
    stroke-dasharray: 15, 310;
    stroke-dashoffset: 43;
    -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-card-convex:hover rect.course {
    stroke: #fff;
    stroke-width: 5;
    stroke-dasharray: 15, 310;
    stroke-dashoffset: 113;
    -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.like,
.dislike {
    color: #fff;
    flex-direction: column;
    display: flex;
    align-content: center;
    justify-content: center;
    cursor: pointer;
}

.like svg,
.dislike svg {
    width: 40px;
    height: 40px;
    top: 50%;
    fill: #fff;
}

.dislike svg {
    transform: rotate(-180deg) scaleX(-1);
}

.like svg:hover,
.dislike svg:hover {
    fill: var(--main-color);
}

#progressBar {
    height: 3px;
    border-radius: 10px;
}

#myProgress {
    background-color: var(--main-color);
    border-radius: 10px;
}

#myProgress::before {
    content: attr(data-content) '%';
    color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: 10px;
}

.progress_circles {
    background-color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.card_sections_title {
    border-style: solid;
    border-color: var(--main-color);
    border-left: none;
    width: max-content;
}

.card_tabs {
    min-width: 115px;
    bottom: 0;
    background-color: var(--base-color);
    cursor: pointer;
}

.card_tabs.active {
    background-color: var(--main-color);
    padding-bottom: 10px !important;
}

.card_tabs:not(.disabled):hover {
    background-color: var(--main-color);
    padding-bottom: 15px !important;
}

.card_tabs_movil {
    min-width: max-content;
    bottom: 0;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    cursor: pointer;
}

.card_tabs_movil.active {
    background-color: var(--base-color);
    border: 1px solid var(--base-color);
}

.course_next_meetings svg, .course_extra_info svg {
    height: 20px;
    width: 20px;
}

.course_sheet_buttons_container {
    z-index: 3;
}

.course_keywords > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.course_sheet_keyword {
    height: min-content;
    background-color: var(--secondary-color);
    border-radius: 10px;
    font-size: calc(2px + 0.5vmax) !important;
    line-height: 1.5 !important;
}

#share_course_sheet_modal .modal-content {
    background-color: black !important;
}

#share_course_sheet_modal .svg_button,
.course_sheet_buttons_container .svg_button{
    background-color: var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    margin: 10px;
    cursor: pointer;
    border-radius: 50%;
}

#share_course_sheet_modal .close{
    color: white;
    opacity: 1;
}

#share_course_sheet_modal .svg_button svg{
    height: 100%;
    width: 100%;
    stroke-width: unset;
    fill: unset;
    stroke: unset;
}

.svg_button svg {
    fill: #fff;
    stroke: #fff;
    stroke-width: 21px;
    height: 15px;
    width: 15px;
}

.thumbs_button_course_sheet{
    transition: opacity 0.5s ease, height 0.5s ease;
}

.card_video {
    top: 0;
    right: 0;
    z-index: 0;
    cursor: pointer;
}

.fill_module {
    background-color: var(--main-color);
}

.social_experts a:first-child i {
    margin-left: 0 !important;
}

.social_experts i {
    background: var(--main-color);
    color: var(--base-color);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    padding: 7px;
    text-align: center;
}

.social_experts i:hover {
    opacity: 0.7;
    color: #fff;
}

.read_more {
    cursor: pointer;
}

.read_more:hover {
    color: var(--main-color);
}

.test-btn {
    max-width: max-content;
    height: max-content;
}

.test-btn-done {
    cursor: default;
}

.course_sheet_trainers{
    cursor: pointer;
}

.punctuation-test {
    font-size: 3.5vw !important;
    line-height: 1.8;
}

.punctuation-test-number {
    font-size: 8vw !important;
}
.punctuation-test-number span {
    font-size: 3vw !important;
}

.centerXY-absolute {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.centerXY-relative {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
}

.course_title h3{
    font-size: calc(18px + 0.8vmin) !important;
    line-height: calc(22px + 1.4vmin) !important;
}

.veil {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    opacity: 0.2;
}

.veil > video {
    object-fit: cover;
    object-position: center;
}


.btn-add-to-list,
.btn-remove-from-list,
.ask-info-button {
    position: relative;
    width: max-content;
}

.btn-add-to-list:after,
.btn-remove-from-list:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    color: #fff;
    transition: all .5s ease;
}

.btn-remove-from-list.clicked:after {
    content: '¡ELIMINADO!';
    top: -70%;
}

.btn-add-to-list.clicked:after {
    content: '¡AÑADIDO!';
    top: -70%;
}

@media (max-width: 991.98px) {
    .course_extra_info >div {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
    }

    .exam_globes{
        grid-template-columns: 130px 195px 230px 300px;
    }
}

@media (max-width: 1366px) {
    .course_card h3 {
        font-size: calc(10px + 1vmin);
        line-height: 1.5;
    }

    .like svg,
    .dislike svg {
        width: 30px !important;
        height: 30px !important;
    }

    .course_card p {
        font-size: initial;
    }

    .card_description {
        margin-top: 0 !important;
    }
}

.white-icon, .white-icon:hover, .white-icon:visited{
    color:white !important;
}

.select_video > div{
    overflow: auto hidden;
}

@media (max-width: 575.98px){
    .exam_globes{
        grid-template-columns: 130px 150px;
    }

    .exam_globes div.justify-content-start, .exam_globes div.d-flex > p{
        align-items: center;
    }

    .exam_globes p{
        font-size: calc(5px + 1.8vmin);
        line-height: 15px;
    }
}