/* IT Matura Exercises
---------------------------------*/

.it_matura_about .about_top {
    height: 214px;
    margin-top: -211px;
    background-image: url(../../img/art_dividers/titleBackground_2560.png);
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: 2560px 214px;
    position: absolute;
    z-index: 2;
}

.it_matura_exercises {
    /*height: 12152px;*/
    margin-top: 550px;
    background-image: url(../../img/background.jpg);
    background-repeat: repeat;
}

.it_matura_exercises h2 {
    font-family: 'Conthrax', serif !important;
    font-size: 28px;
}

@media (min-width: 621px) and (max-width: 1023px) {
    .it_matura_exercises h2 {
        font-size: 24px !important;
    }
}

@media (max-width: 620px) {
    .it_matura_exercises h2 {
        font-size: 23px !important;
    }
}


@media (max-width: 450px) {
    .it_matura_exercises time {
        font-size: 18px;
    }
}


.exercises_content {
    display: flex;
    justify-content: center;
    margin-top: -505px;
}

.exercises_descr {
    text-align: center;
    position: absolute;
}

.exercises_descr .info {
    font-size: 20px;
    margin-top: 40px;
}

.exercises_descr h2 {
    padding-bottom: 40px;
}

.dc_exercises_container h2 {
    margin-top: 75px;
}

.it_exercises_container h2 {
    margin-top: 150px;
}


.responsive-table {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* gap: 2px; */
    width: 56%;
    margin: 100px auto 0 auto;
    border: 2px solid #000;
}

.responsive-table a {
    color: #b5bdfe;
    font-size: 13px;
}

.responsive-table .table_header {
    text-align: center;
    padding: 10px;
    font-weight: bold;
    border: 2px solid #323486;
    color: #FFFFFF;
    background: #1a1d55;
}

.responsive-table .table_row {
    text-align: center;
    padding: 10px;
    border: 2px solid #323486;
    color: #FFFFFF !important;
}
@media (min-width: 769px) and (max-width: 1024px) {
    .responsive-table {
        grid-template-columns: 2fr;
    }

    .responsive-table .table_header, .responsive-table .table_row {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .responsive-table {
        grid-template-columns: 1fr;
    }

    .responsive-table .table_header, .responsive-table .table_row {
        grid-column: span 1;
    }
}


.table_container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    max-width: 80%;
    margin: auto;
}

.h_row {
    grid-column: span 6;
    background: #0e123d;
    background: #1a1d55;
    color: white;
    text-align: center;
    padding: 20px;
    font-weight: bold;
    border: 1px solid #323486;
    font-size: 20px;
}

.h_row a {
    /*color: white;*/
    text-decoration: underline;
}

/* Individual grid items */
.header_item {
    background: #070b2e;
    background: #0e123d;
    padding: 20px;
    padding-top: 15px;
    padding-bottom: 10px;
    text-align: center;
    border: 1px solid #323486;
    color: white;
}

.item {
    color: #b5bdfe;
    background: #070b2e;
    font-size: 13px;
    padding: 20px;
    text-align: center;
    border: 1px solid #323486;
}

.item a {
    color: #b5bdfe;
    font-size: 13px;
    text-decoration: underline;
}

.item p {
    padding-top: 5px;
}

.item .fa-solid {
    padding-right: 5px;
}

.item, .header_item {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.header_icon {
    color: #b5bdfe;
    cursor: pointer;
}

.header_icon_solution {
    color: #2ecc71;
    /*color: #a8e6cf;
    color: #81c784;
    color: #66bb6a;
    color: #388e3c;*/
    cursor: pointer;
}

.left_icon {
    padding: 0 5px 0 10px;
}

.missing {
    display: flex;
    justify-content: center;
    align-items: center;
}
.missing_task {
    font-size: 25px;
    margin-top: -20px;
}


@media (max-width: 579px) {
    .table_container {
        grid-template-columns: repeat(2, 1fr);
        max-width: 90%;
    }

    .header_item {
        display: flex;
        align-items: center;
        min-height: 90px;
    }

    .h_row {
        grid-column: span 2;
    }
}


@media (min-width: 580px) and (max-width: 1023px) {
    .table_container {
        grid-template-columns: repeat(3, 1fr);
        max-width: 570px;
    }

    .h_row {
        grid-column: span 3;
    }

}