/***************** Ids **************/
#social_container {
    margin-top: auto;
}

#related_resources {
    margin-left: 1rem;
}

#presentation_section {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#development_section {
    border-radius: 0;
}

#bibliography_section {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#system_container {
    margin-bottom: 2rem;
    margin-top: 0.5rem;
}

#save_note {
    border: none;
}

#note_indication {
    font-weight: 600;
}

/***************** Class **************/
.h5_title {
    margin-top: 0.5rem;
}

.section_title {
    margin-top: 1.5rem;
}

.section_number {
    padding: 0.5rem;
    margin-bottom: 0;
}

.section_text {
    margin-left: 3rem;
}

.section_title_container {
    background-repeat: no-repeat;
    background-size: auto;
    padding: 1rem 0;
}

.feactured_section_text {
    margin-left: 1.5rem;
    border-left: 0.1875rem solid var(--primary_5);
}

.feactured_section_text p {
    padding-left: 1rem;
}

.section_text ul {
    overflow: hidden;
    text-overflow: ellipsis;

}

.section_text ul li a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    max-width: 550px;
    margin-bottom: 1rem;
}

.bg_stain_one {
    background-image: url(/static/flex/images/background/stain_one.svg);
}

.bg_stain_two {
    background-image: url(/static/flex/images/background/stain_two.svg);
}

.bg_stain_three {
    background-image: url(/static/flex/images/background/stain_three.svg);
}

.btn_section_active {
    background: var(--primary_1);
    color: var(--secondary_1);
}

.btn_section_active:hover, .btn_section_inactive:hover {
    background-color: var(--primary_1);
    color: var(--secondary_1);
}

.btn_section_active:focus {
    box-shadow: 0 0 0 .2rem var(--primary_1);
}

.btn_section_inactive {
    background: var(--secondary_3_7);
    color: var(--primary_1);
}

.btn_section_inactive:focus {
    box-shadow: 0 0 0 .2rem var(--secondary_3_7);
}

.note_saved {
    background: var(--secondary_1);
    padding: 0.5rem;
}

iframe {
    width: 100%;
    min-height: 500px;
    margin: 0 0;
}


@media (min-width: 1400px) {
    #tab_container {
        display: flex;
    }
}


@media (max-width: 1399px) {
    #tab_container {
        display: flex;
    }
}

@media (max-width: 1024px) {
    #tab_container {
        display: grid;
    }

    #presentation_section, #development_section, #bibliography_section {
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
    }

    iframe {
        width: 100%;
        height: 100%;
        margin: 0 0;
    }
}

textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    border-radius: 8px;
}

video {
    width: 100%;
    height: 400px;
}

.border_chicos {
    width: auto;
    height: auto;
}

.title_not_collapsed {
    border-radius: 8px;
}

.title_collapsed {
    border-radius: 8px 8px 0 0;
}

.simulation_box_shadow {
    box-shadow: 0 8px 16px 0 #00000033;
}

.titlearea_simulation {
    cursor: pointer;
    padding: 15px;
    background-color: var(--primary_1_4);
    /*border-left: 6px solid var(--primary_1);*/
    /*margin-bottom: 10px;*/
    /*-webkit-box-shadow: 0 5px 8px -6px var(--secondary_2_9_6);*/
    /*-moz-box-shadow: 0 5px 8px -6px var(--secondary_2_9_6);*/
    /*box-shadow: 0 5px 8px -6px var(--secondary_2_9_6);*/
}

.hr_student {
    margin-top: 40px;
    margin-bottom: 20px;
    border: 2px solid var(--primary_1);
}

.richtext_block_content > hr {
    border-color: var(--primary_1) !important;
}

.richtext_block_content > p > b {
    /*color: var(--primary_1);*/
    /*margin-left: 40px;*/
}

::marker {
    font-weight: bold;
}

.dark_text > p {
    font-weight: bold;
}

.richtext_block_content > ul {
    list-style: unset;
    margin-left: 40px;
}

h5 + ul {
    list-style: disc !important;
}

h3 + ul {
    list-style: lower-alpha !important;
}

ul + p {
    margin-left: 60px;
}

ul > ul + p {
    margin-left: 60px;
}

ul > li {
    margin-bottom: 30px;
}

code {
    font-family: var(--font_primary_1);
    color: var(--primary_1);
    font-size: 100%;
}

h4 + ul > li {
    margin-bottom: 0 !important;
}

div[class="card follow-scroll"] > ul > li {
    margin-bottom: 0 !important;
}

span + ul > li {
    margin-bottom: 0 !important;
}

.richtext_block_content > ol > li {
    color: var(--primary_1);
}


/* Todos los h2, h3, h4 que esten en negrita tendran el color principal */
.richtext_block_content > h2 > b {
    color: var(--primary_1);
}

.richtext_block_content > h3 > b {
    color: var(--primary_1);
    display: flex;
    justify-content: center;
}

.richtext_block_content > h4 > b {
    color: var(--primary_1);
    font-size: 1.5rem;
}

.richtext_block_content > h5 {
    /*color: var(--primary_1);*/
    margin-left: 20px;
}

/*ul {*/
/*    list-style: lower-alpha !important;*/
/*    font-size: 1.2rem;*/
/*}*/

ul > li > ul {
    list-style: disc !important;
    /*list-style-type: circle;*/
    /*list-style: inside;*/
}

.richtext_block_content > h5 > b {
    display: flex;
    justify-content: center;
}

.richtext_block_content > h6 {
    display: flex;
    justify-content: center;
}

.richtext_block_content > p > i {
    color: var(--primary_1);
}

.reference_text {
    color: var(--secondary_2_9_5) !important;
}

.reference_text > div > div > div > div > div > p > b {
    color: var(--secondary_2_9_5) !important;
}

.reference_text > div > div > div > div > div > p {
    margin: 0;
!important;
}

@media (max-width: 360px) and (min-width: 280px) {
    .size_image {
        max-width: 100%;
    }

    .section_text {
        margin-left: 0;
    }
}

@media (max-width: 390px)  and (min-width: 361px) {

    /*.card {*/
    /*    display: table-cell;*/
    /*}*/
    /*.btn_primary {*/
    /*    margin-top: 4rem;*/
    /*}*/
    /*.img-fluid {*/
    /*    flex-grow: 0;*/
    /*    flex-shrink: 0;*/
    /*    flex-basis: 100%;*/
    /*    !*max-width: 100%;*!*/
    /*}*/
    /*#button_start {*/
    /*    text-align: center;*/
    /*}*/
}

@media (max-width: 500px) {
    .richtext_block_content > ul {
        margin-left: 20px;
    }
}

@media (max-width: 414px) and (min-width: 391px) {

    .card {
        display: table-cell;
    }

    .btn_primary {
        margin-top: 4rem;
    }

    .img-fluid {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 100%;
        /*max-width: 100%;*/
    }

    #button_start {
        text-align: center;
    }
}

@media (max-width: 460px) and (min-width: 415px) {

    .card {
        display: table-cell;
    }

    .btn_primary {
        margin-top: 4rem;
    }

    .img-fluid {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 100%;
        /*max-width: 100%;*/
    }

    #button_start {
        text-align: center;
    }
}

@media (max-width: 500px) and (min-width: 461px) {

    .card {
        display: table-cell;
    }

    .btn_primary {
        margin-top: 4rem;
    }

    .img-fluid {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 100%;
        /*max-width: 100%;*/
    }

    #button_start {
        text-align: center;
    }
}

@media (max-width: 568px) and (min-width: 501px) {

    .card {
        display: table-cell;
        left: 50px;
    }

    .btn_primary {
        margin-top: 4rem;
    }

    .img-fluid {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 100%;
        /*max-width: 100%;*/
    }

    #button_start {
        text-align: center;
    }
}

@media (max-width: 768px) and (min-width: 569px) {

    .card {
        display: table-cell;
        left: 30px;
        top: 100px;
    }

    .btn_primary {
        margin-top: 4rem;
    }

    .img-fluid {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 100%;
        /*max-width: 100%;*/
    }

    #button_start {
        text-align: center;
    }
}

@media (max-width: 1199px) and (min-width: 769px) {
    .size_image {
        max-width: 60%;
    }

    .card {
        display: table-cell;
        left: 50px;
        top: 100px;
    }

    /*.btn_primary {*/
    /*    margin-top: 4rem;*/
    /*}*/
    .img-fluid {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 100%;
        /*max-width: 100%;*/
    }

    #button_start {
        text-align: center;
    }
}

@media (min-width: 1200px) {
    .size_image {
        max-width: 60%;
    }
}