.container_content {
    width: 100%;
    height: auto;
    padding: 0 40px 40px 300px;
}

.content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: auto;
}

.card {
    width: 100%;
    height: auto;
    background-color: var(--background-color-default);
    border-radius: var(--border-radius);
}

.overflow_hidden {
    overflow: hidden;
}

.shadow { 
    box-shadow: var(--box-shadow); 
}

.line {
    border: var(--border-width) var(--border-style) var(--border-color);
}

.line_top {
    border-top: var(--border-width) var(--border-style) var(--border-color);
}

.line_down {
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
}

 
.grid_container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
    width: 100%; 
}

.col {
    box-sizing: border-box;
    overflow-x: auto;
}

/* Define a largura das colunas de acordo com a classe */
.col_1  { flex: 1 1 calc(8.333% - 20px); }
.col_2  { flex: 1 1 calc(16.666% - 20px); }
.col_3  { flex: 1 1 calc(25% - 20px); }
.col_4  { flex: 1 1 calc(33.333% - 20px); }
.col_5  { flex: 1 1 calc(41.666% - 20px); }
.col_6  { flex: 1 1 calc(50% - 20px); }
.col_7  { flex: 1 1 calc(58.333% - 20px); }
.col_8  { flex: 1 1 calc(66.666% - 20px); }
.col_9  { flex: 1 1 calc(75% - 20px); }
.col_10 { flex: 1 1 calc(83.333% - 20px); }
.col_11 { flex: 1 1 calc(91.666% - 20px); }
.col_12 { flex: 1 1 calc(100% - 20px); }

/* Ajusta a responsividade para telas menores */
@media (max-width: 768px) {
    .col {
        flex: 1 1 calc(100% - 20px); /* Cada coluna ocupa 100% da largura do container em telas menores */
    }
}

.flex {
    display: flex;
}

.gap_10 {
    gap: 10px;
}

/* Classes para align-items */
.align_center { align-items: center; }
.align_start { align-items: flex-start; }
.align_end { align-items: flex-end; }
.align_stretch { align-items: stretch; }
.align_baseline { align-items: baseline; }

/* Classes para justify-content */
.justify_start { justify-content: flex-start; }
.justify_end { justify-content: flex-end; }
.justify_center { justify-content: center; }
.justify_between { justify-content: space-between; }
.justify_around { justify-content: space-around; }
.justify_evenly { justify-content: space-evenly; }

/* Outras classes para Flexbox */
.flex_row { flex-direction: row; }
.flex_column { flex-direction: column; }
.flex_wrap { flex-wrap: wrap; }
.flex_no_wrap { flex-wrap: nowrap; }
.flex_reverse { flex-direction: row-reverse; }


/* Classes utilitárias para margens */
.m_0 { margin: 0; }
.m_1 { margin: 10px; }
.m_2 { margin: 20px; }
.m_3 { margin: 30px; }
.m_4 { margin: 40px; }
.m_5 { margin: 50px; }

.m_t_0 { margin-top: 0; }
.m_t_1 { margin-top: 10px; }
.m_t_2 { margin-top: 20px; }
.m_t_3 { margin-top: 30px; }
.m_t_4 { margin-top: 40px; }
.m_t_5 { margin-top: 50px; }

.m_r_0 { margin-right: 0; }
.m_r_1 { margin-right: 10px; }
.m_r_2 { margin-right: 20px; }
.m_r_3 { margin-right: 30px; }
.m_r_4 { margin-right: 40px; }
.m_r_5 { margin-right: 50px; }

.m_b_0 { margin-bottom: 0; }
.m_b_1 { margin-bottom: 10px; }
.m_b_2 { margin-bottom: 20px; }
.m_b_3 { margin-bottom: 30px; }
.m_b_4 { margin-bottom: 40px; }
.m_b_5 { margin-bottom: 50px; }

.m_l_0 { margin-left: 0; }
.m_l_1 { margin-left: 10px; }
.m_l_2 { margin-left: 20px; }
.m_l_3 { margin-left: 30px; }
.m_l_4 { margin-left: 40px; }
.m_l_5 { margin-left: 50px; }

/* Classes utilitárias para padding */
.p_0 { padding: 0; }
.p_1 { padding: 10px; }
.p_2 { padding: 20px; }
.p_3 { padding: 30px; }
.p_4 { padding: 40px; }
.p_5 { padding: 50px; }

.p_t_0 { padding-top: 0; }
.p_t_1 { padding-top: 10px; }
.p_t_2 { padding-top: 20px; }
.p_t_3 { padding-top: 30px; }
.p_t_4 { padding-top: 40px; }
.p_t_5 { padding-top: 50px; }

.p_r_0 { padding-right: 0; }
.p_r_1 { padding-right: 10px; }
.p_r_2 { padding-right: 20px; }
.p_r_3 { padding-right: 30px; }
.p_r_4 { padding-right: 40px; }
.p_r_5 { padding-right: 50px; }

.p_b_0 { padding-bottom: 0; }
.p_b_1 { padding-bottom: 10px; }
.p_b_2 { padding-bottom: 20px; }
.p_b_3 { padding-bottom: 30px; }
.p_b_4 { padding-bottom: 40px; }
.p_b_5 { padding-bottom: 50px; }

.p_l_0 { padding-left: 0; }
.p_l_1 { padding-left: 10px; }
.p_l_2 { padding-left: 20px; }
.p_l_3 { padding-left: 30px; }
.p_l_4 { padding-left: 40px; }
.p_l_5 { padding-left: 50px; }



@media (max-width: 900px)  {
    .container_content {
        width: 100%;
        max-width: 92%;
        margin: 0 auto;
        height: auto;
        padding: 0 0 30px 0;
    }
    
    .content {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        height: auto;
    }
    
}