p {
    padding: 2pt;
}

div.error-msg {
    color: white;
    background-color: red;
    text-align: center;
    font-size: 1.5em;
}

div.warning-msg {
    color: white;
    background-color: darkorange;
    text-align: center;
    font-size: 1.5em;
}

div.notice-msg {
    color: white;
    background-color: darkblue;
    text-align: center;
    font-size: 1.5em;
}

nav {
    background-color: darkgrey;
    padding: 5px;
}
nav > a {
    color: pink;
    background-color: black;
    text-align: center;
    font-size: 1.5em;
    text-decoration: none;
    padding: 5px;
}
nav > a:hover {
    color: white;
}

nav > form#template-search-requirements,
nav > form#template-search {
    float: right;
    font-size: 1.5em;
}

img.link-icon {
    height: 1em;
}


#d_actions {
    background-color: #444;
    color: pink;
}
#d_actions > ul {
      list-style: none; /* Remove HTML bullets */
      padding: 0;
      margin: 0;
}
#d_actions > ul > li::before {
    content: "\25ba";
    padding-right: 8px;
    padding-left: 16px;
}
#d_actions > ul > li {
    padding-top: 5px;
    padding-bottom: 5px;
}
#d_actions a {
    background-color: black;
    color: pink;
    text-decoration: none;
    padding: 4px;
}
#d_actions a:hover {
    color: white;
}

/* Tooltip definition
 * In order to use it, please see the following example:
 *      <div class="phink-tooltip">
 *          Some text underlined. When the user will hover this part, the
 *          second portion of text will appear.
 *          <div class="phink-tooltiptext">
 *              When the user hoover the parent div, this text is shown.
 *          </div>
 *      </div>
 */

.phink-tooltiptext {
    all: initial;
}

.phink-tooltip {
    position: relative;
    border-bottom: 1px dotted;
}

div.phink-tooltip {
    display: inline-block;
}

.phink-tooltip .phink-tooltiptext {
    visibility: hidden;
    background-color: #555;
    min-width: 240px;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 60%;
    margin-left: -60%;
    opacity: 0;
    transition: opacity 0.5s;
}

.phink-tooltip:hover .phink-tooltiptext {
    visibility: visible;
    opacity: 1;
}


/**
 * See function on_img_click in phink.js.
 */
span.phpchart-resizable form.template {
    display: none;
}
span.phpchart-resizable-popup {
    position: relative;
    display: inline-block;
}
span.phpchart-resizable-popup div {
    all: initial;
}
span.phpchart-resizable-popup div {
    min-width: 460px;
    min-height: 100px;
    background-color: #AAA;
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: -0px;
    border: solid 2px black;
}
span.phpchart-resizable-popup div form {
    display: flex;
    flex-direction: column;
}
span.phpchart-resizable-popup div form span {
    align-self: flex-end;
}


/* SQL table definition */
table.sql tr {
    vertical-align: top;
}

table.sql th {
    color: white;
    background-color: blue;
    position: sticky;
    top: 0px;
    z-index: 10;
}

table.sql tr.row-even {
    background-color: lightgray;
}

table.sql tr.row-odd {
    background-color: lightblue;
}

table.sql tr.static_row_stat {
    background-color: lightyellow;
}

table.sql td.spanned {
    color: #AAAAAA;
}


table.table td, table.table th {
    max-width: 12em;
}

table.table td.large, table.table th.large {
    width: 24em;
    max-width: 24em;
}
table.table td.small-column, table.table th.small-column {
    max-width: 6em;
}

/** We don't need to limit the size of the last column. */
table.table td:last-child, table.table th:last-child {
    max-width: none;
}

table.table td {
    /* With max-width defined, it's better to break word rather than overlap
     * with the next cell. */
    overflow-wrap: break-word;
}

table.table input {
    width: 100%;
    min-width: 3em;
    padding-left: 0px;
    padding-right: 0px;
}

.rawCR {
    white-space: pre-line;
}

span.comment {
    color: #AAA;
}


form a.button {
    padding: 10px 15px;
}