.content_info {
    width: 100%;
    min-height: 44.7vh;
    padding: 2rem;
}

.content_modules {
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding: 2%;
}

.content_modules .line {
    width: 100%;
    height: 3px;
    margin-top: 1rem;
    background-color: var(--hovers_buttons_color);
}

.content_modules .cont_modules {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 2rem;
}

.content_modules .cont_modules .card_module {
    width: 220px;
    height: 100px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    position: relative;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.content_modules .cont_modules .card_module:hover {
    cursor: pointer;
}

/* cards colors */

.card_black {
    background-color: var(--background_btn_black);
    color: var(--back_nav_color);
    border: 5px var(--border_btn_black) solid;
}

.card_black:hover {
    background-color: var(--border_btn_black);
}

.card_black:active {
    background-color: var(--background_btn_black);
}

.card_green {
    background-color: var(--background_btn_green);
    color: #fff;
    border: 5px var(--border_btn_green) solid;
}

.card_green:hover {
    background-color: var(--border_btn_green);
}

.card_green:active {
    background-color: var(--background_btn_green);
}

.card_monitoring {
    background-color: var(--background_btn_monitoring);
    border: 5px var(--border_btn_monitoring) solid;
    color: #fff;
}

.card_monitoring:hover {
    background-color: var(--border_btn_monitoring);
}

.card_monitoring:active {
    background-color: var(--background_btn_monitoring);
}

.card_blue {
    background-color: var(--hovers_buttons_color);
    color: #fff;
    border: 5px var(--border_btn_blue) solid;
}

.card_blue:hover {
    background-color: var(--border_btn_blue);
}

.card_blue:active {
    background-color: var(--hovers_buttons_color);
}

.card_cian {
    background-color: var(--orange);
    color: #fff;
    border: 5px var(--orange_hover) solid;
}

.card_cian:hover {
    background-color: var(--orange_hover);
}

.card_cian:active {
    background-color: var(--orange);
}

.card_red {
    background-color: var(--red);
    color: #fff;
    border: 5px var(--red_hover) solid;
}

.card_red:hover {
    background-color: var(--red_hover);
}

.card_red:active {
    background-color: var(--red);
}

.card_surveillance {
    background-color: var(--module_surveillance);
    border: 5px var(--module_surveillance_hover) solid;
    color: #fff;
}

.card_surveillance:hover {
    background-color: var(--module_surveillance_hover);
}

.card_surveillance:active {
    background-color: var(--module_surveillance);
}

@media (max-width: 710px) { 
    .content_modules .cont_modules {
        justify-content: center;
    }
}

@media (max-width: 520px) { 

    main section {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}