@import url('../loaders/loaderEllipsis.css');

.content_container {
    padding: 0 3.3rem;
    gap: 2rem;
} 

/* ======== Stats ========*/
.select_time_container {
    width: 100%;    
}

.select_time_vertical_item {
    display: grid;
    place-items: center;
}

.reports__cards__container {
    width: 100%;
    gap: 1rem;
}

.select_time__input__container {
    max-width: 90px;
}

.search_stats_btn,
.report__card,
.option__icon__container {
    background-color: #F5F5F5;
}

.report__card {
    font-size: 1.6rem;
    padding: .5em 0em;
    border-radius: 15px;
    text-align: center;
    flex: 1 1 300px;
}

.report__card__title {
    font-weight: 600;
}

.report__card__result {
    font-weight: bolder;
    font-size: 2.8rem;
}
/**/

/* ======== Content Links container ========*/
.content__links__container {
    gap: 2rem 2rem;
}

.content__info {
	box-shadow: 0 0 1rem -0.3rem rgba(0,0,0,0.35); 
    flex: 1 1 432px;
    width: 100%;
}
/**/

/* ======== Options on each group ========*/
.content__info__body {
    gap: 2rem 1.2rem;
}

.option__card {
    flex: 0 1 calc(100% / 3 - 1.2rem);
    text-align: center;
}

.option__icon__container {
    border-radius: 15px;
    
    padding: 2rem;
    margin-bottom: 10px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.option__icon__container  img {
    width: 3.5rem;
}

.option__title p {
    color: #2F79B1;
}

.option__card:hover .option__title p{
    color: #3fa0eb;
}

.option__card:hover .option__icon__container {
    transform: scale(1.1);
}

.option__icon__container i {
	font-size: 3em; color: #2e79cf;
}


/*=================== Media Querys ===================*/
@media screen and (min-width: 1550px) {
    .content__info {
        flex: 1 1 0;
    }
}

@media screen and (max-width: 1050px) {
    .content__links__container {
        justify-content: center;
    }

    .content__info {
        flex: 1 1 auto;
    }
}

@media screen and (max-width: 600px) {
    .option__card {
        flex: 1 1 calc(100% / 2 - 1.2rem);
    }

    .content_container {
        padding: 0 1.3rem;
    }
}

@media screen and (max-width: 450px) {
    .option__card {
        flex: 1 1 100%;
    }
}