/* ---------- General ---------- */

html, body {
    font-family: 'Inter', 'Helvetica', sans-serif;
    background: #000;
    color: white;
    margin: 0;
    font-weight: 300;

    /* Variables */
    --color-primary: #00e2ad;
    --color-primary-dark: #137b63;
    --color-primary-light: #7efcdf;
    --color-secondary: #9a1acd;
    --color-secondary-dark: #530d6f;
    --color-secondary-light: #d584f6;
    --color-tertiary: #60a8ff;
    --color-tertiary-dark: #44629a;
    --color-tertiary-light: #a1bcee;
    --color-red: #e52727;
    --color-green: #27ae60;
    --color-purple: #8e44ad;
}

.display-small,
.display-large {
    display: none;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    font-weight: bold;
}

a:hover {
    color: var(--color-secondary-light);
    text-decoration: none;
}

h1 {
    margin: 0;
    padding: 0;
    line-height: 1.2em;
    display: inline-block;
    vertical-align: middle;
    font-weight: 900;
}

h2 {
    font-size: 2em;
    margin: 1.5em 0 0.8em 0;
    line-height: 1em;
    font-weight: 700;
    padding: 0.1em 0;
    border-bottom: 0.2em solid var(--color-primary);
    width: fit-content;
}

h3 {
    font-size: 1.6em;
    line-height: 1em;
    font-weight: 600;
    margin: 1.5em 0 0.5em 0;
    padding: 0.1em 0;
    border-bottom: 0.2em solid var(--color-primary);
    width: fit-content;
}

h4 {
    font-weight: 600;
    line-height: 1em;
    font-size: 1.3em;
    padding: 1em 0 0.2em 0;
}

h2 a,
h3 a,
h4 a,
h2:hover a,
h3:hover a,
h4:hover a {
    color: black;
    text-decoration: none;
}

hr {
    border-top: 0.4rem solid #121d29;
    width: 9rem;
    margin: 0.2em 0 1.3em 0;
}

dl {
    display: block;
    margin: 0.5em 0;
}

dt {
    display: inline-block;
    font-weight: bold;
}

dt::after {
    content: ': ';
}

dd {
    display: inline-block;
    margin-left: 0.3em;
}

.tablecontainer {
    overflow: auto;
}

table {
    text-overflow: auto;
    width: 100%;
    text-align: center;
}

table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

table.borders {
    border-collapse: collapse;
    border: 1px solid #303030;
}

table.borders td,
table.borders tr,
table.borders th {
    border: 1px solid #303030;
}

table td {
    padding: 0.4em;
}

table thead,
table th {
    font-weight: bold;
    background: #303030;
    text-align: center;
    padding: 0.4em;
}

ul {
    display: block;
    margin: 1em 0;
}

p {
    margin: 0.5em 0;
    line-height: 1.7em;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    padding: 0.3em 1.3em 0.3em 0.3em;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    display: block;
    border: 1px solid #BBB;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 5px;
    background-color: white;
}

select option {
    color: black;
}

strong {
    font-weight: 500;
}

em {
    font-style: italic;
}

.clearfloat {
    clear: both;
}

i.icon {
    margin-right: 0.3em;
    user-select: none;
}

.image-circle {
    border-radius: 100%;
    width: 13em;
    max-width: 90%;
    display: block;
    margin: 1em auto;
}

.hidden {
    display: none;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 0;
    height: 0;
    margin: 7em auto;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pdf-viewer-full {
    width: 95%;
    height: calc(100vh - 4em);
    display: block;
    margin: 1em auto;
    overflow: auto;
}

.pdf-viewer-download {
    clear: both;
    background: var(--color-primary);
    color: white;
    padding: 0.5em 1em;
    border-radius: 0.2em;
    display: block;
    width: fit-content;
    margin: 1em auto 2em auto;
}

.pdf-viewer-download:hover {
    color: white;
}

.rtl {
    text-align: right;
}

/* ---------- Forms ---------- */

form.full-form p {
    margin: 1em 0 2em 0;
}

form.full-form label,
form.full-form textarea,
form.full-form input[type=text],
form.full-form input[type=url],
form.full-form input[type=email],
form.full-form input[type=password],
form.full-form input[type=number] {
    display: block;
    width: 100%;
}

form.full-form textarea {
    height: 4em;
}

form.full-form label {
    margin-bottom: 0;
}

form.full-form ul {
    list-style-type: none;
    padding-left: 0;
}

form.full-form .helptext {
    color: #CCC;
    font-size: 0.85em;
    font-style: italic;
    margin: 0.2em;
    display: block;
}

form.full-form .errorlist {
    color: var(--color-red);
}

button {
    border-radius: 0.4em;
}

form.full-form button[type=submit] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: 0.7em;
    margin: 1em auto;
    background: var(--color-primary);
    font-weight: 500;
    width: 100%;
}

form.full-form button[type=submit]:hover {
    opacity: 0.9;
}

.full-form-footer-links a {
    display: block;
    padding: 0.5em;
    margin: 2em auto;
    text-align: center;
    background: #DDD;
    border-radius: 0.4em;
    color: #404040;
}

.full-form-footer-links a:hover {
    opacity: 0.85;
}

form.full-form button[type=submit].button-danger {
    background: var(--color-red);
}

.field-required.field-invalid {
    border: 2px solid var(--color-red);
}

.validationmsg {
    color: var(--color-red);
    font-size: 0.9em;
}

/* ---------- Rotation ---------- */

.rotate-0 {
    transform: rotate(0deg);
}

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.rotate-270 {
    transform: rotate(270deg);
}

/* ---------- Navigation ---------- */

nav.navbar {
    background: var(--color-primary);
    background: linear-gradient(9deg, var(--color-primary), var(--color-secondary));
    vertical-align: middle;
    color: black;
    z-index: 950;
    font-weight: 700;
}

.navbar-brand {
    display: inline-block;
    font-size: 1.4rem;
    background: black;
    color: white;
    padding: 0.2em 0.7em;
    text-align: center;
}

nav ul {
    margin: 0;
}

.nav-link {
    font-size: 1.05rem;
    color: white;
    padding-top: 0.8em;
    padding-bottom: 0.8em;
    padding-left: 0.8em !important;
    padding-right: 0.8em !important;
    opacity: 1;
}

.nav-link:hover {
    opacity: 0.7;
    color: white;
}

.nav-link.active,
.nav-link.active:hover {
    opacity: 1;
    color: white;
    background: black;
}

/* ---------- Main ---------- */

main {
    overflow-x: hidden;
    position: relative;
}

main section {
    padding: 0.5rem 0;
}

/* ---------- Welcome ---------- */

#welcome-banner {
    position: relative;
    background-image: url("../images/welcome-banner-background.624b6b3edfc7.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #101010;
    background-attachment: fixed;
}

#welcome-banner-content {
    color: white;
    font-weight: 700;
    width: fit-content;
    text-align: center;
    margin: 10vh auto;
}

#welcome-banner-content-title {
    line-height: 1em;
    margin: 13vh auto 0.5em auto;
    background: black;
    padding: 0.2em 0.4em;
    width: fit-content;
}

#welcome-banner-content-links {
    margin-top: 5em;
    text-align: center;
}

#welcome-banner-content-links a {
    border-radius: 2em;
    color: black;
    background-color: var(--color-primary);
    padding: 0.6em 1.3em;
    width: fit-content;
    font-size: 1.45em;
    font-weight: 600;
    display: inline-block;
    text-align: center;
}

#welcome-banner-content-links a:hover {
    text-decoration: none;
    background: var(--color-secondary-light);
}

#welcome-banner-proceed {
    font-size: 3em;
    position: absolute;
    bottom: 0.8em;
    left: calc(50% - 40px);
    border-radius: 100%;
    width: 80px;
    height: 80px;
    text-align: center;
    color: black;
    padding-top: 0.1em;
    cursor: pointer;
    line-height: 80px;
    background: var(--color-primary);
}

#welcome-banner-proceed:hover {
    background: var(--color-secondary-light);
}

/* ---------- Experiments ---------- */

/* Index */

#experiments-index-instance-create-warning {
    background: var(--color-primary);
    color: black;
    font-weight: 500;
    text-align: center;
    padding: 1.4em;
    border-radius: 0.5em;
    font-size: 1.1em;
}

#experiments-index-instance-create-list {
    padding: 0;
}

.experiments-index-instance-create-list-item {
    width: calc(100% - 2em);
    list-style: none;
    margin: 1em 1em 3em 1em;
    background: #202020;
    border-radius: 0.8em;
    padding: 1em 1em 5em 1em;
    display: inline-block;
    position: relative;
    user-select: none;
}

.experiments-index-instance-create-list-item-title {
    font-weight: 600;
    font-size: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1em;
}

.experiments-index-instance-create-list-item-description {
    font-size: 0.9em;
    color: #AAA;
    margin-bottom: 1em;
}

.experiments-index-instance-create-list-item-instructions-title {
    font-size: 1.05em;
    font-weight: 500;
    padding: 1em 0 0.5em 0;
}

.experiments-index-instance-create-list-item-instructions-content {
    font-size: 0.9em;
}

.experiments-index-instance-create-list-item-start {
    position: absolute;
    bottom: 1em;
    left: 5em;
    width: calc(100% - 10em);
    background: var(--color-primary);
    color: black;
    border: none;
    padding: 0.8em;
    font-weight: 500;
    font-size: 1.1em;
}

.experiment-instances-table-nodata {
    color: #AAA;
    font-style: italic;
}

#experiments-index-instance-history-header {
    padding-bottom: 1rem;
}

#experiments-index-instance-history-header-search {
    border: none;
    display: inline-block;
}

#experiments-index-instance-history-header-search input {
    border: none;
    display: inline-block;
    vertical-align: middle;
    padding: 0.4em;
    border-radius: 0.3em 0 0 0.3em;
    background: #303030;
    color: white;
}

#experiments-index-instance-history-header-search input:focus {
    border: none;
    outline: none;
}

#experiments-index-instance-history-header-search input:focus {
    background: #404040;
}

#experiments-index-instance-history-header-search button {
    display: inline-block;
    vertical-align: middle;
    border: none;
    background: var(--color-primary);
    color: black;
    font-size: 1.1em;
    padding: 0.3em 0.5em;
    border-radius: 0 0.3em 0.3em 0;
}

#experiments-index-instance-history-header-show {
    border: none;
    border-radius: 0.3em;
}

#experiments-index-instance-history-header-showingcounts {
    text-align: right;
    margin-top: 1em;
    font-size: 0.9em;
    color: #909090;
}

#experiments-index-instance-history-header-exportdata {
    text-align: right;
    margin-top: 1em;
    margin-bottom: -1.5em;
    font-size: 0.9em;
}

#experiments-index-instance-history-data {
    clear: both;
    font-size: 0.9em;
    margin: 2em auto 4em auto;
}

#experiments-index .active-status {
    background: red;
    padding: 0.1em;
    border-radius: 0.2em;
    font-size: 0.8em;
    color: black;
    font-weight: bold;
    width: 100%;
    display: inline-block;
    user-select: none;
}

#experiments-index .active-status.active {
    background: var(--color-green);
}

#experiments-index .active-status.completed {
    background: var(--color-secondary-light);
    opacity: 0.7;
}

/* Text Chat */

#experiments-textchat-header {
    background: #202020;
    border-bottom: 5pt solid var(--color-primary);
    padding: 0.8em;
    margin-top: 1.3em;
    height: fit-content;
}

#experiments-textchat-header-title {
    font-weight: bold;
    font-size: 1.5em;
    display: inline-block;
    width: calc(100% - 17rem);
}

#experiments-textchat-header-actions {
    display: inline-block;
    text-align: right;
    color: var(--color-primary);
    width: 5em;
    margin-right: 0.5em;
}

#experiments-textchat-header-actions span {
    font-size: 1.5em;
    margin-left: 1em;
    cursor: pointer;
}

#experiments-textchat-header-actions span:hover {
    opacity: 0.8;
}

#experiments-textchat-header-actions a {
    color: var(--color-primary);
}

#experiments-textchat-header-timer {
    display: inline-block;
    width: 10em;
    text-align: right;
    font-weight: bold;
}

#experiments-textchat-chat-messages {
    padding: 1em;
    height: calc(90vh - 16em);
    overflow: auto;
}

#experiments-textchat-chat-messages-waiting {
    background: #202020;
    clear: both;
    float: left;
    font-size: 1em;
    padding: 0.5em 1em;
    border-radius: 0.4rem;
    width: fit-content;
    margin-top: 2em;
}

#experiments-textchat-chat-messages-waiting span {
    content: "";
    animation: blink 1.5s infinite;
    animation-fill-mode: both;
    height: 8pt;
    width: 8pt;
    background: white;
    border-radius: 50%;
    display: inline-block;
}

#experiments-textchat-chat-messages-waiting span:nth-child(2) {
    animation-delay: 0.2s;
    margin-left: 5pt;
}

#experiments-textchat-chat-messages-waiting span:nth-child(3) {
    animation-delay: 0.4s;
    margin-left: 5pt;
}

@keyframes blink {
    0% { opacity: 0.1; }
    20% { opacity: 1; }
    100% { opacity: 0.1; }
}

.experiments-textchat-chat-messages-message {
    position: relative;
    border-radius: 0.4rem;
    margin: 2em 0;
    padding: 0.6em 0.8em 0.4em 0.8em;
    width: 70%;
    color: white;
}

.experiments-textchat-chat-messages-message.sender {
    background: var(--color-secondary);
    float: right;
}

.experiments-textchat-chat-messages-message.receiver {
    background: #454545;
    float: left;
}

.experiments-textchat-chat-messages-message:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
}

.experiments-textchat-chat-messages-message.sender:after {
    right: 3rem;
    border: 1.625em solid transparent;
    border-top-color: var(--color-secondary);
    border-bottom: 0;
    margin-left: -0.812em;
    margin-bottom: -1.625em;
    border-right: 0;
}

.experiments-textchat-chat-messages-message.receiver:after {
    left: 3rem;
    border: 1.625em solid transparent;
    border-top-color: #454545;
    border-bottom: 0;
    margin-left: -0.812em;
    margin-bottom: -1.625em;
    border-left: 0;
}

.experiments-textchat-chat-messages-message .message-text {
    font-weight: 500;
}

.experiments-textchat-chat-messages-message .message-time {
    font-size: 0.7em;
    text-align: right;
    user-select: none;
    float: right;
}

#experiments-textchat-chat-userinput {
    margin: 1.5em 0 0.5em 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1em;
    padding: 0.5em;
}

#experiments-textchat-chat-userinput textarea {
    width: calc(100% - 60pt - 2rem);
    height: 5em;
    border: none;
    background: transparent;
    color: white;
    display: inline-block;
    vertical-align: middle;
    padding: 0.8em;
    resize: none;
}

#experiments-textchat-chat-userinput textarea:focus {
    border: none;
    outline: none;
}

#experiments-textchat-chat-userinput button {
    display: inline-block;
    vertical-align: middle;
    background: var(--color-primary);
    color: black;
    border: none;
    font-size: 1.8em;
    width: 50pt;
    height: 40pt;
    border-radius: 0.4rem;
    margin-left: 2rem;
    opacity: 0.8;
}

#experiments-textchat-chat-userinput button:hover {
    opacity: 1;
}

#experiments-textchat-chat-withdraw,
#experiments-survey-withdraw {
    background: var(--color-primary);
    color: black;
    width: fit-content;
    padding: 0.3em 1em;
    border-radius: 1em;
    font-weight: 500;
    cursor: pointer;
    margin: 1.5em auto;
    font-size: 0.95em;
    opacity: 0.8;
}

#experiments-textchat-chat-withdraw:hover,
#experiments-survey-withdraw:hover {
    opacity: 1;
}

.experiments-textchat-chat-alert {
    text-align: center;
    color: var(--color-primary);
    font-style: italic;
    padding: 2em;
    margin-top: 1em;
    font-weight: 500;
}

.experiments-textchat-chat-alert button {
    display: inline-block;
    vertical-align: middle;
    background: var(--color-primary);
    color: black;
    border: none;
    font-size: 1.2em;
    padding: 0.8em 1em;
    border-radius: 0.4rem;
    margin: 1rem 2rem;
    font-weight: 600;
}

#experiments-textchat-lobby {
    position: absolute;
    top: 17vh;
    left: 20vw;
    width: 60vw;
    height: 50vh;
    background: rgba(0, 0, 0, 0.8);
    text-align: center;
    padding: 1em;
    display: none;
}

#experiments-textchat-lobby-title {
    font-size: 1.3em;
    font-weight: 500;
    margin-bottom: 2em;
}

#experiments-textchat-lobby-loader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 8rem;
    margin: 7rem auto;
}

#experiments-textchat-lobby-loader:before,
#experiments-textchat-lobby-loader:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    animation: pulsOut 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
}

#experiments-textchat-lobby-loader:before {
    width: 100%;
    padding-bottom: 100%;
    box-shadow: inset 0 0 0 1rem var(--color-primary);
    animation-name: pulsIn;
}

#experiments-textchat-lobby-loader:after {
    width: calc(100% - 2rem);
    padding-bottom: calc(100% - 2rem);
    box-shadow: 0 0 0 0 var(--color-primary);
}

@keyframes pulsIn {
    0% {
        box-shadow: inset 0 0 0 1rem var(--color-primary);
        opacity: 1;
    }
    50%, 100% {
        box-shadow: inset 0 0 0 0 var(--color-primary);
        opacity: 0;
    }
}

@keyframes pulsOut {
    0%, 50% {
        box-shadow: 0 0 0 0 var(--color-primary-light);
        opacity: 0;
    }
    100% {
        box-shadow: 0 0 0 1rem var(--color-primary-light);
        opacity: 1;
    }
}

#experiments-textchat-lobby-text {
    color: #AAA;    
}

.button-primary {
    font-size: 1.2em;
    font-weight: bold;
    border: 0;
    border-radius: 0.3em;
    padding: 0.7em 1.3em;
    background: var(--color-primary);
    color: black;
    display: block;
    width: fit-content;
    margin: 3em auto;
}

/* Survey */

#experiments-survey-instructions {
    margin: 2em auto;
    font-size: 0.9em;
    color: #AAA;
}

#experiments-survey-iframe {
    margin-top: 1em;
    width: 100%;
    height: 65vh;
}

/* ---------- Footer ---------- */

footer {
    padding: 4em 0;
    margin-top: 5em;
    text-align: center;
}

#footer-content-logos img {
    height: 4em;
    margin: 1em;
}

#footer-content-text {
    margin-top: 2em;
}

footer p {
    margin-top: 2em;
    display: block;
}

/* ---------- Error Pages ---------- */

.errorpage-path {
    font-weight: 500;
}

.errorpage-code {
    margin-top: 3em;
    font-size: 0.8em;
}