/*
 * PAGE STRUCTURE
 */
* {
    box-sizing: border-box;
}
html {
    min-height: 100%;
    height: 100%;
}

body {
    font-size: 16px;
    font-family: Montserrat, "Helvetica Neue", sans-serif;
    color: #004876;
    line-height: 1.4em;
    min-height: 100%;
    height: 100%;
    margin: 0;
}

#site-wrapper {
    padding: 10px;
    height: 100%;
    min-height: 100%;
}

#content-wrapper {
    margin: 0 auto;
    min-width: 900px;
    max-width: 1200px;
    width: 50%;
    min-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

@media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) {
    #content-wrapper {
        min-width: 0;
        width: 900px;
        max-width: 100%;
    }
}

@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
    #content-wrapper {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
    }
}

#content {
    flex-grow: 1;
}

/*
 * BASE
 */
/* subscript and superscript */
sup {
    vertical-align: top;
    position: relative;
    font-size: 0.6em;
    top: -0.6em;
}

sub {
    vertical-align: bottom;
    position: relative;
    font-size: 0.6em;
    bottom: -0.6em;
}

/* links */
a:active, a:visited, a:link:hover, a:link {
    color: #c01f50;
}

a, a:active, a:visited, a:link {
    text-decoration: none;
}

a:link:hover {
    text-decoration: underline;
}

.delete-button {
    font-weight: bold;
    font-size: 1.5em;
}

/* headings */
h2 {
    border-bottom: #c01f50 2px solid;
    margin-bottom: 0.5em;
}

h2, h3, h4 {
    clear: both;
}

h3, h4, h5, h6 {
    margin-bottom: 0.3em;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2em;
}

/* some other elements */
p, li {
    text-align: justify;
}

p {margin-top: 0;}

p:not(:last-child) {
    margin-bottom: 1em;
}

.caption {
    margin-bottom: 0;
    text-align: justify;
}

.warning {
    color: #c01f50;
    font-weight: bold;
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 2em !important;
}

.note {
    margin: 1em 0;
    color: #8d8d8d;
}

.note:last-child {
    margin-bottom: 0;
}

.note.center {
    text-align: center;
}

.subtitle {
    margin-bottom: 2em;
}

/*
 * INPUT
 */
/* general styling of input fields, selectors,... */
/* set the style of the wide input elements */
input[type=email], input[type=text], select, textarea, option {
    width: 100%;
    /* space around the input field */
    padding: 0.4em;
    /* border styling */
    border: 2px solid #8d8d8d;
    border-radius: 3px;
    /* text styling */
    color: #8d8d8d;
    font-size: 0.8em;
    /* remove the weird middle grey background of FireFox select fields */
    background-color: transparent;
}

input[type=text] {
    padding: 0.45em;
}

/* options inside a dropdown menu (= select) */
option {
    /* reset the font size to that of the surrounding select, since the option font size is relative to it */
    font-size: 1em;
}

/* set the style of the small input elements */
input[type=number] {
    width: 100%;
    /* space around the input field */
    padding: 0.4em;
    /* border styling */
    border: 2px solid #8d8d8d;
    border-radius: 3px;
    /* text styling */
    color: #8d8d8d;
    font-size: 0.8em;
    /* remove the weird middle grey background of FireFox select fields */
    background-color: transparent;
}

input[type=checkbox] {
    /* removing the current appearance is the only way of styling the checkbox */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    /* make the checkbox square */
    width: 1.5em;
    height: 1.5em;
    /* border style */
    border: 2px solid #8d8d8d;
    border-radius: 3px;
    /* remove the margin for proper placement in the row */
    margin: 0;
    /* general tick settings */
    text-align: center;
    font-size: 0.8em;
}

/* general styling of the checked checkbox */
input[type=checkbox]:checked {
    /* removing the current appearance is the only way of styling the checkbox */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    /* change the border colour and background colour */
    border: 2px solid #9BBB59;
    background-color: #9BBB59;
}

/* the actual tick in the checked checkbox */
input[type=checkbox]:checked:after {
    /* tick symbol styling */
    content: "✔";
    color: white;
    /* symbol positioning in the centre of the checkbox */
    bottom: 10%;
    position: relative;
}

/* change the cursor style of the dropdown menu */
select {
    cursor: pointer;
}

/* remove the black outline when elements are selected */
input[type=email]:focus, input[type=number]:focus, input[type=text]:focus, input[type=checkbox]:focus, option:focus,
select:focus, a:focus {
    outline-color: #F79646;
}

input[type=button], input[type=submit], input[type=reset] {
    cursor: pointer;
    color: white;
    border-radius: 3px;
    border: 2px solid #8ba135;
    background-color: #8ba135;
    padding: 0.5em 1em;
}

/*
 * MENU BASE
 */
.menu {
    width: 100%;
    background-color: #004876;
    padding: 0.75em 1em;
}

.menu a, .menu a:link, .menu a:hover, .menu a:active, .menu a:visited, .menu a:focus {
    color: white;
    font-weight: bold;
}

.menu ul {
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    list-style-type: none;
    padding-inline-start: 0;
}

.menu ul li {
    padding: 0.2em 1em;
}

/*
 * HEADER
 */
header {
    margin-bottom: 2em;
}

header h1 {
    text-align: center;
    color: #c01f50;
    margin: 1em 0;
}

/*
 * FIGURES
 */
.figure {
    max-width: 100%;
    min-width: 180px;
    margin-bottom: 2em;
    border: 2px solid #8ba135;
    padding: 1em;
    border-radius: 1em;
}

.figure.left, .figure.right {
    max-width: 50%;
}

.figure.right {
    float: right;
    margin-left: 2em;
}

.figure.left {
    float: left;
    margin-right: 2em;
}

.figure.center {
    margin: 0 auto 2em auto;
}

.figure img {
    width: 100%;
    max-width: 100%;
}

#figure-home-1 {
    max-width: 200px;
}

#figure-home-2 {
    max-width: 400px;
}

@media only screen and (max-width: 500px) {
    .figure, .figure.center, .figure.right, .figure.left {
        width: 100%;
        max-width: 100%;
        float: none;
        margin: 0 auto 2em auto;
    }
}

/*
 * CODE
 */
.code {
    margin: 1em auto;
    text-align: center;
    font-size: 1.2em;
}

/*
 * TABLE
 */
.table-wrapper {
    clear: both;
    max-width: 100%;
    margin: 2em auto;
}

.table-wrapper .caption {
    margin-top: 1em;
}

table {
    margin: 0 auto;
    max-width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #8ba135;
    border-bottom: 2px solid #8ba135;
    table-layout: fixed;
}

table th, table td {
    padding: 0.5em 0.75em;
}

table td {
    vertical-align: top;
}

table thead tr {
    border-bottom: 2px solid #8ba135;
}

/* specific tables */
#table-help-1 th, #table-help-1 td,
#table-help-2 th, #table-help-2 td {
    text-align: right;
    min-width: 120px;
}

#table-help-1 th:last-child,
#table-help-2 th:last-child {
    text-align: right;
    min-width: 135px;
}

#table-help-1 th:first-child, #table-help-1 td:first-child,
#table-help-2 th:first-child, #table-help-2 td:first-child {
    text-align: center;
    width: 70px;
    min-width: 0;
}

#table-help-1 th:nth-child(3),
#table-help-2 th:nth-child(3){
    min-width: 150px;
}

#table-help-1 th:nth-child(2), #table-help-1 td:nth-child(2),
#table-help-2 th:nth-child(2), #table-help-2 td:nth-child(2){
    text-align: left;
    width: auto;
}

#table-configuration-pool {
    width: 575px;
}

#table-configuration-pool td {
    vertical-align: middle;
}

#table-configuration-pool th,
#table-configuration-pool td {
    text-align: left;
}

#table-configuration-pool th:first-child,
#table-configuration-pool td:first-child {
    text-align: left;
    width: auto;
    min-width: 50px;
}

#table-configuration-pool th:last-child,
#table-configuration-pool td:last-child {
    text-align: center;
}

#table-configuration-pool th:nth-child(2) {
    width: 100px;
}

#table-configuration-pool input[type=text] {
    width: 100%;
}

#table-configuration-pool th:nth-child(3) {
    width: 140px;
}

#table-configuration-pool td:nth-child(3) input[type=text] {
    width: 80px;
}

#table-configuration-pool tr.top-sep {
    border-top: 1px solid #8ba135;
}

@media only screen and (max-width: 600px) {
    #table-configuration-pool td, #table-configuration-pool th {
        vertical-align: top;
        font-size: 12px;
    }

    #table-configuration-pool td:last-child input[type=checkbox] {
        margin-top: 4px;
    }
}

#table-my-simulations {
    width: 100%;
    max-width: 100%;
}

#table-my-simulations table {
    width: 100%;
}

#table-my-simulations td, #table-my-simulations th {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

#table-my-simulations .overlay-button {
    margin-top: 0.5em;
    width: 100%;
    text-align: right;
}

#table-my-simulations th, #table-my-simulations td {
    text-align: center;
}

#table-my-simulations .delete-button {
    display: inline-block;
    padding-top: 0.1em;
}

#table-my-simulations th:nth-child(2), #table-my-simulations td:nth-child(2),
#table-my-simulations th:nth-child(9), #table-my-simulations td:nth-child(9) {
    text-align: left;
}

#table-my-simulations th:first-child {
    width: 35px;
}
#table-my-simulations th:nth-child(2) {
    width: 110px;
}
#table-my-simulations th:nth-child(3) {
    width: 70px;
}
#table-my-simulations th:nth-child(4) {
    width: 70px;
}
#table-my-simulations th:nth-child(5) {
    width: 77px;
}
#table-my-simulations th:nth-child(6) {
    width: 86px;
}
#table-my-simulations th:nth-child(7) {
    width: 112px;
}
#table-my-simulations th:nth-child(8) {
    width: 121px;
}
#table-my-simulations th:nth-child(9) {
    width: auto;
}
#table-my-simulations th:nth-child(10) {
    width: 40px;
}

#table-my-simulations tr.last-simulation td:nth-child(2) {
    color: #c01f50;
    font-weight: bold;
}

@media only screen and (max-width: 900px) {
    #table-my-simulations {
        overflow-x: scroll;
    }
    #table-my-simulations table {
        min-width: 850px;
    }
    #table-my-simulations .overlay-button {
        text-align: left;
    }
}

@media only screen and (max-width: 600px) {
    #table-help-1, #table-help-2 {
        overflow-x: scroll;
    }
    #table-help-1 table, #table-help-2 table {
        min-width: 600px;
    }
}

/*
 * SETTINGS
 */
.setting-cols {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.col {
    display: flex;
    width: 31.3%;
    margin-bottom: 0.5em;
    align-items: center;
}

.col .value {
    width: 80px;
}

.col .value select {
    width: 100%;
}

.col .label {
    flex-grow: 1;
    margin-right: 1em;
}

.col .label::after {
    content: ":";
}

#comment-col {
    width: 65.6%;
}

#comment-col .value {
    width: 90%;
}

#comment-col input[type=text] {
    width: 100%;
}

@media only screen and (max-width: 860px) {
    .col {
        width: 48%;
    }
}

@media only screen and (max-width: 550px) {
    .col {
        width: 100%;
    }
}

/*
 * ILLUMINATION
 */
.illumination-settings {
    width: 100%;
}

.illumination-settings .buttons {
    width: 100%;
    margin-bottom: 1em;
}

.illumination-settings .buttons input[type=button].rest-button {
    background-color: #c01f50;
    border: 2px solid #c01f50;
}

.illumination-settings .two-cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.illumination-settings .input, .illumination-settings .view {
    width: 48%;
}

.illumination-settings .input .col {
    width: 100%;
    align-items: flex-start;
}

.illumination-settings .input .label {
    width: auto;
    flex-grow: 0;
}

.illumination-settings .input .value {
    flex-grow: 1;
    display: grid;
    max-width: 150px;
}

.illumination-settings .input .value::after {
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
}

.illumination-settings .input textarea {
    resize: none;
    overflow: hidden;
}

.illumination-settings .input .value::after,
.illumination-settings .input textarea {
    grid-area: 1 / 1 / 2 / 2;
}

.illumination-settings .view {
    text-align: left;
}

.illumination-settings .view iframe {
    /* border styling */
    border: 2px solid #8d8d8d;
    border-radius: 3px;
}

@media only screen and (max-width: 860px) {
    .illumination-settings .view {
        width: 100%;
        text-align: center;
        margin-bottom: 1em;
    }

    .illumination-settings .input {
        margin: 0 auto;
        width: 416px;
        max-width: 100%;
    }

    .illumination-settings .buttons {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .illumination-settings .buttons input[type=button] {
        margin-bottom: 0.5em;
        display: inline-block;
        width: 23%;
    }
}

@media only screen and (max-width: 500px) {
    .illumination-settings .view {
        width: 100%;
        text-align: center;
        margin-bottom: 1em;
    }

    .illumination-settings .view iframe {
        max-width: 100%;
    }

    .illumination-settings .buttons input[type=button] {
        width: 32%;
    }
}

/*
 * SUBMISSION BUTTONS
 */
.submit-section {
    width: 100%;
    margin: 1em 0 2em 0;
    padding-top: 1em;
}

.submit-section .submit-button-row {
    display: flex;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
}

.submit-section .submit-button-row input[type=submit],
.submit-section .submit-button-row input[type=reset],
.submit-section .submit-button-row input[type=button]{
    padding: 1em 1em;
    margin: 0 1em;
    font-weight: bold;
    text-transform: uppercase;
    width: 120px
}

/*
 * CONFIG FILE
 */

pre.file {
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, post millennium */
    white-space: pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

input[type=submit].start-simulation, input[type=button].start-simulation {
    text-transform: uppercase;
    font-weight: bold;
    padding: 1em 2em;
}

/*
 * PROGRESS BAR
 */
.progress-bar-wrapper {
    width: 100%;
    text-align: center;
}

.progress-bar-wrapper p {
    text-align: center;
}

.progress-bar-wrapper p:last-child {
    margin-top: 1em;
}

.progress-bar img {
    max-width: 100%;
}

/*
 * PLOTS
 */
.plot-container .figure {
    margin: 1em auto 2em auto;
    width: 500px;
    max-width: 100%;
}

/*
 * VESIWEBLETS
 */

.applet {
    margin: 2em auto;
}

.applet input[type=button] {
    background-color: #8ba135 !important;
}

/*
 * FOOTER
 */
footer {
    width: 100%;
    text-align: center;
    background-color: #004876;
    padding: 0 2em 1em 2em;
    color: white;
    margin-top: 2em;
}

footer a, footer a:link, footer a:active, footer a:hover, footer a:focus, footer a:visited {
    color: white;
}

footer .menu {
    border-bottom: 2px solid white;
    margin-bottom: 1em;
}

footer .row {
    margin-top: 0.5em;
}

footer .row.legal {
    font-weight: bold;
    margin-bottom: 1em;
    display: flex;
    justify-content: center;
}

footer .row.legal a {
    padding: 0 1em;
    display: inline-block;
}

@media only screen and (max-width: 560px) {
    .menu ul, footer .row.legal {
        justify-content: space-between;
        padding-left: 1em;
        padding-right: 1em;
    }

    .menu ul li, footer .row.legal a {
        width: 48%;
        padding-left: 0;
        padding-right: 0;
        text-align: left;
    }

    footer .menu, footer .menu ul, footer .row.legal {
        padding-left: 0;
        padding-right: 0;
    }

    footer .row.chair span {
        display: inline-block;
        width: 100%;
        text-align: left;
        font-weight: bold;
    }

    footer .row.chair, footer .row.copyright {
        border-top: 2px solid white;
        padding-top: 1em;
        margin-top: 0;
    }

    footer .row.chair {
        padding-bottom: 1em;
        margin-bottom: 0;
    }
}