/** Service list service name */
.service-name {
    font-weight: bold;
}

.service-description {
    /*font-size: 0.8em;*/
}

/** shows for example last fetch time */
.footnote {
    margin-top: 2em;
    font-style: italic;
}

/** legend shows explanation of services */
.legend-row {
    margin-bottom: 0.5em;
}

.legend-row .icon {
    margin-right: 1em;
}


/* flexbox https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout */

/**
 |--- card-container ---------
 |  --- card  ----------------
 |  |  row: col / icon + col /text
 |  |  row  icon + text
 |  --------------------------
 |
 |  --- card  ----------------
 |  |  row
 |  |  row
 |  --------------------------
*/

.uniolitmonitor-serviceuebersicht .card-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.uniolitmonitor-serviceuebersicht .card .icon {
    width: 40px;
    max-width: 40px;
}

/** ok icon **/
.uniolitmonitor-serviceuebersicht .card .icon-ok {

}

.uniolitmonitor-serviceuebersicht .card {
    display: flex;
    flex-direction: column;

    border: dotted 1px darkgray;
}

.uniolitmonitor-serviceuebersicht .card-50 {
    width: 45%;
    margin: 0.4em;
    padding: 0.2em;
}


.uniolitmonitor-serviceuebersicht .card-33 {
    width: 31%;
    margin: 0.2em;
    padding: 0.2em;
}

@media (max-width: 479px) {
    .uniolitmonitor-serviceuebersicht .card {
        width: 100%;
    }
}

.uniolitmonitor-serviceuebersicht .card .row {
    display: flex;
    flex-direction: row;
    margin: 0em;
    padding: 0px;
}

.uniolitmonitor-serviceuebersicht .card .row .col {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    padding: 5px;
}

.uniolitmonitor-serviceuebersicht .card .row .col a {
    margin-left: 5px;
}


.uniolitmonitor-serviceuebersicht .card .row .icon {
    margin-left: 0px;
    margin-right: 0.5em;
}