/**
 * Template settings
 */

/** Overall layout. */
html {
    overflow-y: hidden;
    height: 100%;
}

body {
    color: black;
    font-family: "Times New Roman", Times, serif;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#template-header, #template-menu {
    flex: 0 0 auto;
}

#template-main {
    flex: 1 1 auto;;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#template-title {
    padding: 0 1ex 0 1ex;
}

/** Menu style. */

#template-menu {
    background-color: #f9f9f0;
    text-align: center;
    border-style: solid;
    border-color: #325a9a;
    border-width: 0.15ex 0 0.15ex 0;
    padding: 0.15ex 0;
}

#template-menu * {
    display: inline-block;
}

#template-menu a {
    color: #325a9a;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-variant: small-caps;
    font-weight: bold;
    text-decoration: none;
    padding: 0 0.5em;
}

#template-menu a:hover {
    color: #f9f9f0;
    background-color: #325a9a;
}

/** Errors and success. */

.template-error, #template-success {
    border-radius: 1ex;
    margin: 1ex;
    padding: 1ex;
    width: fit-content;
}

.template-error   { background-color: lightcoral; }
#template-success { background-color: lightgreen; }

/** Padded. */
.template-padded {
    padding: 1ex;
    display: flex;
    flex-direction: column;
}


/** Common settings. */

p {
    text-align: justify;
}

.head {
    text-align: center;
}

img.head {
    display: block;
    margin: auto auto;
}

.guide {
    position: absolute;
    top: 0;
    left: 0;
}

.locale {
    position: absolute;
    top: 0;
    right: 0;
}

.w100 { width: 100%; }
.w-fit { width: fit-content; }

.pre {
    white-space: pre-wrap;
}

ul, ol {
    margin-top: 0;
    margin-bottom: 0;
}

/* Headers */

h1, h2, h3, h4 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: start;
    color: #325A9A;
    margin: 0.5em 0 0.1em 0;
}

h1:empty, h2:empty, h3:empty, h4:empty {
    display: none;
}

h1 { font-size: x-large; }
h2 { font-size: large; }
h3 { font-size: medium; }
h4 { font-size: medium; font-weight: normal; }

/* Links style  */

a {
    color: #325A9A;
}

a:hover {
    background-color: #E2EAFA;
}

img {
    border: none;
}

/* Information table */

table.list,
table.properties {
    border-collapse: collapse;
    margin: 1ex 0;
    border: none;
    border-collapse: collapse;
}

table.list td,
table.properties td {
    vertical-align: top;
}

table.properties > * > tr > td, table.properties > * > tr > th {
    padding-right: 1ex;
}

/* Not needed once text-align: start is fully supported for TH elements */
[dir="ltr"] .properties th { text-align: left; }
[dir="rtl"] .properties th { text-align: right; }

.key {
    font-weight: bold;
    vertical-align: top;
    white-space: pre;
}

.value {
    vertical-align: top;
}

table.properties input[type='text'],
table.properties select {
    width: 100%;
    height: 3ex;
    box-sizing: border-box;
}

/** List tables */

table.list thead {
    border-bottom: solid 0.5ex lightsteelblue;
}

table.list > * > tr > td {
    padding-left: 0.2em;
    padding-right: 0.2em;
    border: solid 0.15ex lightsteelblue;
}

table.list th {
    padding: 0;
    border: solid 0.15ex lightsteelblue;
}

.list tr[onclick]:hover > td {
    background-color: rgba(0, 0, 0, 0.2);
}

/** Properties tables */

/*table.properties {*/
    /*width: 100%;*/
/*}*/

/*table.properties td:last-child {*/
    /*width: 100%;*/
/*}*/

table.properties th {
    vertical-align: top;
    text-align: start;
}

table.properties th,
table.properties td {
    border: none;
}

table.properties input[type = 'submit'] {
    margin-right: 0.2em;
}

table.properties textarea {
    font-family: inherit;
}

/**
 * Common properties.
 */
.hidden {
    display: none;
}

/** Navigation and actions. */

.action {
    margin-right: 0.2em;
}

.navigation {
    margin: 0.5ex 0;
}

.navigation > * {
    margin-right: 1em;
    display: inline-block;
    height: 2.8ex;
}

.navigation > * > label {
    margin-right: 0.2em;
    border: none;
}

.navigation > * > img {
    margin-left: 0.2em;
    height: fit-content;
    border: none;
}

.navigation > * > * {
    padding: 0;
    height: 100%;
    /*display: inline-block;*/
    vertical-align: top;
    box-sizing: border-box;
}

.navigation > .pager > a,
.navigation > .pager > span,
.navigation > .pager > input {
    border: solid 0.15ex lightsteelblue;
}


.navigation > .pager > a,
.navigation > .pager > span {
    text-align: center;
    text-decoration: none;
    width: 2em;
}

.navigation > .pager > input {
    margin: 0 0 0 0.2em;
    text-align: end;
}

.navigation > .pager > span {
    color: lightgray;
}

/** Refresher. */
form.refresher.frozen {
    background-color: rgba(0, 0, 255, 0.10);
}

/** Debug. */
table {
    border: solid 2ex red;
}

/** Select column in tables. */
td.select,
th.select {
    width: 3em;
    max-width: 3em;
}
td.select > label,
th.select > label {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
}

tr.selected > td {
    background: repeating-linear-gradient(
            -45deg,
            rgba(0, 0, 255, 0.0),
            rgba(0, 0, 255, 0.0) 0.5em,
            rgba(0, 0, 255, 0.15) 0.5em,
            rgba(0, 0, 255, 0.15) 1em
    );
}

/** Filters. */

table.list .filter {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 3ex;
    border-style: solid;
    border-color: lightsteelblue;
    border-width: 0.15ex 0 0 0;
}

table.list .filter.active {
    background: #d8ffd8;
}

/** Two-column info. */
div.two-column {
    display: flex;
    flex-direction: row;
}

div.two-column > *:first-child { flex: 1 1 auto; }
div.two-column >  *:last-child { flex: 1 1 auto; }

table.two-column > tbody > tr > td {
    vertical-align: top;
    width: 50%;
    max-width: 50%;
}

table.two-column {
    width: 100%;
    border: none;
}