:root {
  --select-bg-color: #ddd;
  --size-medium: 3em;
}


html {
    font-family: "sat-base-font";
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    height: 100vh;
    flex-direction: column;
    box-sizing: border-box;
}

ul {
    padding: 0;
}

#main_side_bar {

}

#main_area {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

#body {
    flex: 1;
    position: relative;
}

footer {
    text-align: center;
    font-size: 0.7em;
    font-weight: bold;
}

.box {
    background-color: #edf2ff;
    border-radius: 0;
    border-color: silver;
}

.box__tools {
    margin: 0;
    padding: 0;
}

.box__tools a {
    text-decoration: none;
    color: inherit;
    padding: 0.2em;
    border-radius: 0.4em;
}

.box__tools a:hover {
    background-color: var(--select-bg-color);
}

.title {
    font-weight: bold;
    text-align: center;
}

.post_confirm {
    text-align: center;
    background-color: lightgreen;
    padding: 1em;
    font-size: 1.2em;
    font-weight: bold;
    width: 60%;
    margin: 1.5em auto;
}

/*** Generic ***/

.button {
    padding: 0.5em 1em;
    background: #333;
    color: #ccc;
    border: 1px solid #555;
    border-radius: 0.8em;
    font-weight: bold;
}


.button:hover {
    background-color: #bc0000;
}

.instructions--head {
    font-size: 1.5em;
    text-align: center;
}

.instructions--alt {
    text-align: center;
    font-style: italic;
}

.items_vert--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*** blocks ***/

.block_separator {
    font-size: 1.4em;
    display: flex;
}

.block_separator__label {
    display: inline-block;
    margin: 0 0.2em;
}

.block_separator__line {
    height: 1px;
    background: #ccc;
    flex: 1;
    margin-top: 0.7em;
}

/*** grids ***/

.grid {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.grid--center {
    justify-content: center;
}

.grid__item>a {
    text-decoration: none;
    color: inherit;
}

.grid__item--medium {
   width: 170px;
   padding: 0.2em;
   text-align: center;
}

.grid__item--selectable {
    cursor: pointer;
}

.grid__item--selectable:hover {
    background-color: var(--select-bg-color);
}

/*** avatars ***/

.avatar {
    height: 2rem;
    width: 2rem;
    display: inline-flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    background: #ccc;
    border-radius: 0.2rem;
}

.avatar__content {

}

.avatar--medium {
    height: var(--size-medium);
    width: var(--size-medium);
    border-radius: 0.5rem;
}

.avatar--generated {
    text-align: center;
    background:  #43d2f6;
}


/*** icons ***/

.icon--medium {
    height: var(--size-medium);
    display: block;
    margin: 0 auto;
}

.icon--small {
    height: 1em;
}

.icon--soft {
    fill: #777;
}

.icon__name {

}

/*** Messages ***/

.message--info {
    max-width: 500px;
    margin: 0 auto;
    padding: 1em;
    text-align: justify;
}

.message--info pre {
    background: #ddd;
    padding: 1em;
}

/*** Menus ***/

.menu ul {
    display: flex;
    margin-top: 8px;
    list-style: none;
}

.menu a {
    display: block;
    color: inherit;
    text-decoration: none;
    font-variant: small-caps;
}

.main_menu {
    min-width: 200px;
    /* background-color: #eaeaea; */
    background-color: #333;
    color: white;
    overflow: auto;
}

.main_menu ul {
    flex-direction: row;
    flex-wrap: wrap;
}

.main_menu li {
    flex: 1;
    padding: 0;
    margin: 0 0.5em;
}

.main_menu a {
    display: inline;
    white-space: nowrap;
}

.main_menu a:hover {
    background-color: initial;
    text-shadow: 1px 1px 2px;
    font-weight: bold;
}

.category_menu ul {
    justify-content: center;
}

.category_menu li {
    margin: 0.5em;
    text-align: center;
}

.category_menu a {
    border: solid 1px;
    padding: 0.5em;
    border-radius: 0.2em;
    background: #eee;
}

/*** containers ***/

/* tabs */

.tab_container {
    max-width: 1000px;
    margin: 0 auto;
}

.tab_header {
    background-color: white;
    border-bottom: 1px solid lightgrey;
}

.tab_header ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: white;
}

.tab_page {
    box-sizing: border-box;
    padding-top: 2em;
    border: 1px solid lightgrey;
    border-top: none;
    display: None;
}

.tab_page.clicked {
    display: block;
}

.tab_button {
    display: inline;
    color: grey;
    background-color: white;
    border-top: 1px solid lightgrey;
    border-left: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
    padding: 0 1em;
    cursor: pointer;
    /* we go down by 1px to remove bottom border from .tab_header */
    margin-bottom: -1px;
}

.tab_button.clicked {
    /* background: lightgrey; */
    color: inherit;
    border-bottom: none;
}

li.tab_button:last-child {
    border-right: 1px solid lightgrey;
}

.tab_button input {
    display: None;
}

.tab_button label {
    margin: 1em;
}

.tab_button input:checked + label {
    font-weight: bold;
}

/*** Forms ***/

/* a form with only one field */

.form_single {
    text-align: center;
}

.form_single input:not([type="submit"]) {
    margin: 0 1em;
    width: 15em;
    border-radius: 0.7em;
    outline: none;
    border: 1px solid black;
    padding: 0.4em;
    box-shadow: none;
}


.form_submit {
    margin: 1em auto 0;
    display: block;
}

.form_jid {
    text-align: center;
}

/* Textboxes */

form.textbox>* {
    display: block;
    margin: 1em auto;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
}

form.textbox>textarea {
    text-align: left;
}

.log_request {
    text-align: center;
}

/*** Navigation ***/

.prev_next_links ul {
    list-style: none;
    display: flex;
    padding: 0 2em;
    margin: 0;
}

.prev_next_links li {
    flex: 1;
}

.prev_next_links li.older_items {
    text-align: right;
}

.prev_next_links img {
    display: block;
}

.prev_next_links .older_items img {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

.prev_next_links a {
    display: inline-block;
    margin-top: 1em;
    padding: 0.2em;
    text-decoration: None;
    color: inherit;
    font-variant: small-caps;
    background: rgba(200,200,200,0.6);
    border-radius: 0.5em;
}

.prev_next_links a:hover {
    background-color: #ddd;
}

/*** XMLUI ***/

.xmlui_cont_vertical>* {
    display: block;
    box-sizing: border-box;
}

.xmlui_cont_vertical>.xmlui_widget {
    width: 100%;
    min-height: 1em;
    min-width: 1px;
}

label.xmlui_label {
    font-weight: bold;
}

td a {
  /* we use <a> for non JS links in table
   * so we don't want specific color/text-decoration by default
   */
  color: inherit;
  text-decoration: inherit;
}


/*** Notifications ***/

.notification.retry {
    position: fixed;
    top: 1rem;
    margin: auto;
    width: 80%;
    background: #DB1616;
    border: 3px solid silver;
    left: 10%;
    text-align: center;
}

#retry_counter {
    font-weight: bold;
}

#retry_now {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

@media (min-width: 800px) {
    html {
        background-size: auto;
    }

    body {
        flex-direction: row;
    }

    #main_area {
        overflow: auto;
    }

    .box {
        border-radius: 1em;
        box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5);
    }

    .main_menu a {
        display: block;
        padding: 2em 0;
    }

    .main_menu ul {
        flex-direction: column;
        padding-left: 2em;
    }

    .prev_next_links ul {
        padding: 0 6em;
    }

    .instructions--alt {
        padding-top: 3rem;
    }

    /*** forms ***/

    .form_single .form_submit.button {
        display: inline;
    }
}