/* Custom Styles */

div.appearance {
    margin: 1em 0em;
}

div.appearance table {
    /* this is set to inline-block by the custom CSS theme, override it */
    display: table !important;
    margin: 0.5em 0em;
    width: 100%;
    text-align: center;
}

div.appearance img {
    margin: 0.5em;
    filter: none !important;
}

div.appearance .caption {
    font-style: italic;
    font-weight: normal;
    font-size: 90%;
}

div.appearance_brief table {
    width: 100%;
    table-layout: fixed;
    text-align: center;
    border-collapse: collapse;
}

div.appearance_brief table td:first-child {
    width: 20em;
    text-align: left;
    padding-left: 2em;
}

div.appearance_brief table td {
    border-style: none solid solid none;
    border-width: 1px;
    border-color: lightblue;
}


td.green {
    color: green;
}

td.orange {
    color: #ff8000;
}

td.red {
    color: red;
}

span.literal {
    text-decoration: none;
    font-weight: bold;
    font-family: monospace, fixed;
}

/* we make all the following <span> tags render the text just like
  the standard Doxygen @remarks, @see tags do, to obtain a uniform
  look and feel */
span.itemdef, span.lib, span.category, span.stdobj, span.styles,
span.events, span.flags, span.appearance, span.impl, span.avail {
    font-weight: bold;
    line-height: 130%;
}

span.style, span.event, span.flag {
    font-weight: bold;
}

div.styleDesc, div.eventDesc, div.flagDesc {
    margin-left: 3%;
    margin-bottom: 1ex;
}

div.eventHandler {
    margin: 1em;
    text-indent: 3%;
}

div.eventHandler span {
    padding: 5px;
    font-family: monospace, fixed;
}

.img-with-text {
    text-align: center;
    width: 50%;
    margin: 10px;
}

.img-with-text img {
    display: block;
    height: auto;
    max-width: 100%;
}

.img-with-text p {
    font-weight: bold;
}

.sample-images {
    display: flex;
    justify-content: center;
    align-content: center;
    margin: auto 0;
}

@media screen and (max-width: 768px) {
    .sample-images {
        flex-direction: column;
        padding: 0;
    }
}