.flex-menu {
    align-items: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    padding: 0 0;
}
.flex-menu>div {
    flex: 25%;
    max-width: 200px;
    padding: 0 2px;
    margin: 0px 0px;
}
@media (max-width: 800px) {
    .flex-menu>div {
        flex: 50%;
        max-width: calc(50% - 6px);
    }
}
.flex-menu>div>a {
    width: 100%;
}

/* Table style: no borders + different header color */
.table.table-unruled>tbody>tr>td,
.table.table-unruled>thead>tr>th {
    border-top: 0 none transparent;
    border-bottom: 0 none transparent;
}
.table>thead>tr>th {
    background-color: #404040;
}

.btn-primary{
    margin-bottom: 1em;
}

.panel{
    padding: 2px;
}

.panel-header{
    text-align: center;
    font-size: 180%;
}
.panel-header>a{
    width: 100%;
    margin-top: 5px;
    font-size: 75%;
}
.panel-body>.panel>.panel-header{
    text-align: center;
    font-size: 160%;
}

.panel-body{
    padding: 1px;
}


/* Make 2nd level items more visible */
ul ul li {
    list-style-type: square;
}

ol ul li {
    list-style-type: square;
}

.gridcell {
    padding: 1rem;
}

/* Flex-container for large texts */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0;
}

.flex-container>div {
    flex: 50%;
    max-width: calc(50% - 6px);
    padding: 0 4px;
    margin: 3px 3px;
}
@media (max-width: 900px) {
    .flex-container>div {
        flex: 100%;
        max-width: 100%;
    }
}
/* Flex-container for minimal texts */
.flex-container-sm {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0;
}

.flex-container-sm>div {
    align: "center";
    flex: 25%;
    max-width: calc(25% - 6px);
    padding: 0 4px;
    margin: 3px 3px;
}
@media (max-width: 1200px) {
    .flex-container-sm>div {
        flex: 50%;
        max-width: calc(50% - 6px);
        padding: 0 4px;
        margin: 3px 3px;
    }
}
@media (max-width: 600px) {
    .flex-container-sm>div {
        flex: 100%;
        max-width: 100%;
    }
}
.flex-container-sm>div>table {
    max-width: 350px;
}

/* Handling a list of buttons with same size */
.btn-list{
    display: flex;
    flex-direction: column;
}
.btn-list>div>a{
    width: calc(100% - 20px);
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 10px;
    margin-right: 10px;
}
.btn-grid-4{
    display: flex;
    flex-wrap: wrap;
    padding: 0 0;
}
.btn-grid-4>div {
    align: "center";
    flex: 25%;
    max-width: calc(25% - 4px);
    padding: 0 2px;
    margin: 0px 2px 0px 2px;
}
.btn-grid-4>div>a{
    width: 100%
}

.panel-body{
    text-align: justify;
}