.flex-container {
    display: flex;
    flex-wrap: wrap;
    /*gap: 0 10px;  row-gap column gap */
    row-gap: 10px;
    /*column-gap: .5%;*/
}
/* 2 column flex */
.flex-container.cols2>.flex-item {
    width: 49.5% !important;
}
.flex-container.cols2>.flex-item >div {
    padding: 0 5px;
}
/* 3 column flex */
.flex-container.cols3>.flex-item {
    width: 32.5% !important;
}
.flex-container.cols3>.flex-item >div {
    padding: 0 5px;
}
/* 4 column flex */
.flex-container.cols4>.flex-item {
    width: 24.5% !important;
}
.flex-container.cols4>.flex-item >div {
    padding: 0 5px;
}
/* 5 column flex */
.flex-container.cols5>.flex-item {
    width: 19.5%;
}
.flex-container.cols5>.flex-item >div {
    padding: 0;
}
/* General flex-item borders */
.flex-item.flex-border {
    border: 1px solid #ccc !important;
}
.flex-container.cols1 {
    row-gap: 0;
    column-gap: 0;
}
.flex-middle {
    align-content: center;
}
.flex-center {
    justify-content: center;
}
.flex-action-box {
    font-size: 1.5em;
    font-weight: 200;
    padding: 5px;
    text-align: center;
}
.flex-action-box i {
    font-size: 2em;
    display: block;
}
.flex-action-box .stat {
    font-size: .9rem;
}
.flex-action-box>div:hover {
    background-color: #f0f0f0 !important;
    color: #000 !important;
    cursor: pointer;
}