/*-
 * #%L
 * Pollen :: UI RiotJs
 * %%
 * Copyright (C) 2009 - 2025 Code Lutin
 * %%
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 * #L%
 */
@font-face {
font-family: 'pacifico';
src: url('Pacifico.ttf');
}

html {
    -webkit-text-size-adjust:none;
}

body {
   font-size: 14px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

input, textarea {
    -webkit-user-select: text;  /* Chrome all / Safari all */
    -moz-user-select: text;     /* Firefox all */
    -ms-user-select: text;      /* IE 10+ */
    user-select: text;
}

.body-wrapper {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
}

.body-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    margin-bottom: 30px;
}

.instance-title::before {
    content: var(--logo);
    margin-right: 10px;
}

.instance-title::after {
    content: var(--title);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.body-content {
    flex-grow: 1;
    overflow: hidden;
    background-color: var(--body-content-background);
}

.main-content {
    padding: 20px 2%;
}

@media (orientation: portrait) {
    .body-content {
        width: 100%;
        flex-direction: row;
    }
}

@media (orientation: landscape) {
    .body-content {
        height: 100%;
        flex-direction: column;
    }
}

@media print{@page {size: portrait}}

a {
    text-decoration: none;
    color: var(--main);
    cursor: pointer;
}

.container {
    height: 100%;
    background-color: var(--background);
}

.actions {
    padding: 10px 0;
    display: flex;
    justify-content: center;
}

.actions .c-button,
.actions-left .c-button,
.actions-right .c-button  {
    margin: 2px;
}

.actions.c-input-group .c-button,
.actions-left.c-input-group .c-button,
.actions-right.c-input-group .c-button  {
    margin: 0;
}

.actions-left {
    padding: 5px 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap-reverse;
}

.actions-right {
    padding: 5px 0;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.actions .actions-left,
.actions .actions-right {
    padding: 0;
}

a.c-button,
input.c-button,
button.c-button {
    display: inline-block;
}

ul {
    margin-left: .5em;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-help {
    cursor: help;
}

.c-overlay, .o-modal {
    position: fixed;
}

.colors-main,
.colors-main input,
.colors-main textarea,
.colors-main select {
    background-color: var(--background);
    color: var(--main);
}

.colors-main-invers,
.colors-main-invers a  {
    background-color: var(--main);
    color: var(--background);
}

.colors-default,
.colors-default input,
.colors-default textarea,
.colors-default select {
    background-color: var(--background);
    color: var(--default);
}

.colors-default-invers,
.colors-default-invers a  {
    background-color: var(--default);
    color: var(--background);
}

.border-main {
    border-color: var(--main);
}

.border-main-invers {
    border-color: var(--background);
}

.list-card {
    background-color: var(--favorit-list)
}

.member-card {
    background-color: var(--favorit-member)
}

.poll-created {
    background-color: var(--poll-created);
}

.poll-adding_choices {
    background-color: var(--poll-adding_choices);
}

.poll-voting {
    background-color: var(--poll-voting);
}

.poll-closed {
    background-color: var(--poll-closed);
}

.choice-tile {
    background-color: var(--choice-tile);
}

.choicesScale,
.choicesStash {
    background-color: var(--h1-background);
    color: var(--h1);
    opacity: 0.4;
    border-radius: 10px;
}

.info-label {
    font-size: 0.8em;
    color: var(--info);
    cursor: pointer;
}

.error-label {
    font-size: 0.8em;
    color: var(--error);
    cursor: pointer;
}

/* Steps */
.tabs {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    margin: 0 auto;
    padding: 0 2%;
}

.tabs.below-h1 {
    background-color: var(--tabs-background);
    border-bottom: 1px solid var(--separator);
}

.tab-container {
    display: flex;
    position: relative;
    top: 1px;
    padding: 0 10px;
}

.tab {
    padding: 0.5em 1.5em 0.75em;
    text-align: center;
}

.tab,
.tab button,
.tab a {
    border: none;
    font-size: 1em;
    color: var(--tab-color);
    background: transparent;
}

.tab span {
    font-style: italic;
}

.tab.selected span {
    font-style: normal;
}

.tab.selected {
    background: var(--tab-selected-background);
    border: 1px solid var(--separator);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
}

.tab.selected,
.tab.selected a,
.tab.selected button {
    color: var(--main);
    font-weight: bold;
}

.tab a:hover,
.tab button:hover {
    color: var(--main);
}

@media (max-width: 640px) {

    .tabs.tabs-one-small .tab-container {
        flex-grow: 1;
    }

    .tabs.tabs-one-small .tab {
        display: none;
    }

    .tabs.tabs-one-small .tab.selected {
        display: block;
        flex-grow: 1;
    }
}

time-picker .next,
time-picker .prev {
    border-color: var(--brand);
}

time-picker .prev:hover,
time-picker .next:hover {
    background-color: var(--brand);
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 188px;
    background-color: var(--dropdown);
    box-shadow: 0 2px 2px 0 var(--dropdown-shadow);
}

.dropdown-content.right {
    right: 10px;
}

/* Links inside the dropdown */
.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    background-color: var(--dropdown);
    color: var(--dropdown-text);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
    z-index: 1;
}

.dropdown-content a:hover {
    background-color: var(--dropdown-hover);
}

.separator {
    border: 1px solid var(--separator);
}

.separator-top {
    border-top: 1px solid var(--separator);
}

.separator-bottom {
    border-bottom: 1px solid var(--separator);
}

.separator-left {
    border-left: 1px solid var(--separator);
}

.separator-right {
    border-right: 1px solid var(--separator);
}

.winner {
    color: var(--winner);
}

.anonymous-voter {
    color: var(--anonymous);
    font-style: italic;
}

qrcodebutton .o-modal,
qrcode {
    background-color: var(--qrcode);
}

pollenheader {
    background-color: var(--header);
}

pollenheader .header-home {
    font-family: var(--title-font);
    color: var(--header-title);
}

pollenheader .header-actions {
    background-color: var(--header-actions);
}

pollenheader .header-link {
    color: var(--header-link);
}

pollenheader .header-link:hover {
    color: var(--header-link-hover);
}

h1, .h1-like {
    color: var(--h1);
    background-color: var(--h1-background);
    padding: 30px 2% 15px 2%;
    border-bottom: 1px solid var(--separator);
}

h4 {
    color: var(--h4);
}

pollenfooter,
pollenfooter a {
    background-color: var(--footer);
    color: var(--footer-text);
}

pollenfooter a:hover {
    color: var(--footer-text-hover);
}

.brand {
    color: var(--brand);
}

.info {
    color: var(--info);
}

.warning {
    color: var(--warning);
}

.success {
    color: var(--success);
}

.error {
    color: var(--error);
}

.c-field {
    border-color: var(--field-border);
}

.no-border {
    border: 0;
}

.align-right {
    text-align: right;
}

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

 .italic {
    font-style: italic;
 }

.u-higher {
    z-index: 50;
}

.u-highest {
    z-index: 100;
}

/* Tooltips */

.tooltip {
    position: absolute;
    background: #343A40;
    color: #FFFFFF;
    width: 300px;
    border-radius: 4px;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    padding: 10px;
    text-align: center;
    font-size: .9em;
}
.style5 .tooltip {
    background: #1E252B;
    color: #FFFFFF;
    max-width: 200px;
    width: auto;
    font-size: .8rem;
    padding: .5em 1em;
}
.tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
    border-color: #343A40;
}
.style5 .tooltip .tooltip-arrow {
    border-color: #1E252B;
}
.tooltip[x-placement^="top"] {
    margin-bottom: 5px;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] {
    margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
}
.tooltip[x-placement^="right"] {
    margin-left: 5px;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
}
.tooltip[x-placement^="left"] {
    margin-right: 5px;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
}