/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 25.5.2018, 17:55:38
    Author     : Joosef
*/

body {
    color: #fff;
    overflow-x: hidden;
    min-height: 100%;
    height: auto;
    padding-bottom: 4em;
}

#top, footer {
    background-color: #222;
    border: 1px solid #000;
    box-shadow: inset 0 -0.5em 50px 0 rgba(255,255,255,0.1);
    padding: 0.5em;
}

footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    padding: 0;
}

#main .module {
    padding: 1em;
}

h1 {
    background-color: #444;
    border: 1px solid #000;
    padding: 0.5rem 1rem;
    margin: 0;
    border-top: 1px;
}

button.shift {
    display: block;
    border: 2px solid rgba(0, 0, 0, 0.6);
    position: relative;
    height: auto;
    min-height: 35px;
}

button.shift + button.shift {
    margin-top: 0.5em;
}

button.shift .title {
    display: flex;
    color: rgba(0, 0, 0, 0.75);
}

button.shift .title > span {
    padding: 1em;
}

button[disabled] {
    opacity: 0.5;
}

.shift .active {
    display: inline-block;
    width: 4.5em;
    color: #fff;
    padding: 1em;
}

.shift .active i {
    animation-name: fadeInOut;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    width: 0.25em;
    display: inline-block;
}

.shift .active i + i,
.shift .active:last-child i + i {
    animation-delay: 0.25s;
}

.shift .active i + i + i,
.shift .active:last-child i {
    animation-delay: 0.5s;
}

.shift .active:last-child i + i + i {
    animation-delay: 0s;
}

footer ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

footer label {
    padding: 0.5rem 1rem;
    font-size: initial;
    cursor: pointer;
    text-align: center;
}

footer input:checked + label {
    background-color: rgba(0, 0, 0, 0.5);
}

footer label span {
    display: block;
    font-size: x-small;
}

footer input {
    display: none;
}

footer li {
    flex: 1 1 100%;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.storefront .shift,
.storefront .event,
.storefront .events {
    background-color: #fff;
    border: 2px solid rgba(0, 0, 0, 0.75);
    border-radius: 0.5em;
    overflow: hidden;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e4e4e4+50,d1d1d1+51,d0d0d0+100 */
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(228,228,228,1) 50%, rgba(209,209,209,1) 51%, rgba(208,208,208,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(228,228,228,1) 50%,rgba(209,209,209,1) 51%,rgba(208,208,208,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(228,228,228,1) 50%,rgba(209,209,209,1) 51%,rgba(208,208,208,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d0d0d0',GradientType=0 ); /* IE6-9 */
    color: rgba(0, 0, 0, 0.75);
}

.storefront .events {
    font-size: x-small;
    background: none;

}

.storefront .event {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 0;
    text-align: left;
    display: flex;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feffff+0,d2ebf9+100;Blue+3D+%2312 */
    background: rgb(254,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(254,255,255,1) 0%, rgba(210,235,249,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#d2ebf9',GradientType=0 ); /* IE6-9 */
}

.storefront .event.delegation {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fffef2+0,ffffa3+100 */
    background: rgb(255,254,242); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,254,242,1) 0%, rgba(255,255,163,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,254,242,1) 0%,rgba(255,255,163,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,254,242,1) 0%,rgba(255,255,163,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef2', endColorstr='#ffffa3',GradientType=0 ); /* IE6-9 */
}

.storefront .event.delegation.denied {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fff2f2+0,ffa4a3+100 */
    background: rgb(255,242,242); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,242,242,1) 0%, rgba(255,164,163,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,242,242,1) 0%,rgba(255,164,163,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,242,242,1) 0%,rgba(255,164,163,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff2f2', endColorstr='#ffa4a3',GradientType=0 ); /* IE6-9 */
}

.storefront .event.delegation.accepted {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2fff2+0,a3ffa9+100 */
    background: rgb(242,255,242); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(242,255,242,1) 0%, rgba(163,255,169,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(242,255,242,1) 0%,rgba(163,255,169,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(242,255,242,1) 0%,rgba(163,255,169,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2fff2', endColorstr='#a3ffa9',GradientType=0 ); /* IE6-9 */
}

.storefront .event span {
    width: 50%;
    padding: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    border-right: 1px solid rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(0, 0, 0, 0.5);
}

.storefront .travel-events .event span {
    width: auto;
    font-size: small;
}

.storefront .travel-events form {
    flex-wrap: wrap;
}

.storefront .travel-events .event {
    justify-content: space-between;
}

.storefront .travel-events .event + .event {
    border-top: 1px solid rgba(0, 0, 0, 0.5);
}

.storefront .travel-events .event span {
    border: 0;
}

.storefront .shift,
.storefront .work-type {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.storefront .shift + .shift,
.storefront .events + .shift {
    margin-top: 0.5em;
}

.storefront .shift + .events {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.storefront .shift.has-events {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


.time-block .explanation {
    font-size: initial;
}

.storefront .work-type .explanation {
    padding: 1em;
}

.storefront .shift span.buttons {
    margin-left: auto;
    display: flex;
}
.storefront .shift button,
.storefront .shift a.button {
    border-radius: 0;
    border: 0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
    background: rgb(69,72,77); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    color: #fff;
    text-decoration: none;
}

.storefront .shift button,
.storefront .shift a.button,
.storefront .shift .work-type > span {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.module.storefront.form_container + .module.messages {
    display: none;
}

#top a#logo {
    display: block;
    height: 34px;
    background-image: url(../img/humanlinkbaltic2.png);
    background-color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    flex: 0 0 150px;
    border-radius: .5em;
}

#top nav {
    justify-content: space-between;
}

#close {
    position: absolute;
    right: 0;
    top: 0;
}

form {
    position: relative;
}

.ui-dialog .ui-dialog-content {
    overflow: visible;
}

.voimafront .messages .message {
    background-color: darkgreen;
    color: #fff;
}

.myshifts .time-block {
    position: initial;
    display: block;
    margin-bottom: 1em;

}

.myshifts .time-block .piece {
    border-color: rgba(0, 0, 0, 0.75);
    flex: 1 1 50%;
}

.time-block .piece:first-child {
    border-radius: 0.5em 0 0 0;
}

.time-block .piece:last-child {
    border-radius: 0 0.5em 0 0;
}

.time-block .events {
    border-top: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.75);
    border-radius: 0;
}

.time-block.active .pieces {
    animation:blink normal 1s infinite ease-in-out;
}

.time-block .piece.flex {
    flex-direction: column;
}

.time-block .piece.quick-login .explanation {
    padding: 0;
}

.time-block .piece.quick-login .explanation > span {
    padding-left: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-block .piece.quick-login a {
    flex: initial;
}

.voimafront [name="message"] {
    min-height: 200px;
}

a {
    pointer-events: auto;
}

a.disabled {
    pointer-events: none;
}

.time-block .buttons a.disabled {
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(69, 72, 77, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
    color: rgba(255, 255, 255, 0.5);
    border-left-color: rgba(255, 255, 255, 0.1);
    border-right-color: rgba(0, 0, 0, 0.1);
}

.icon-emo-happy,
.icon-emo-unhappy {
    color: lime;
    background-color: green;
    border: 2px solid;
    border-radius: 50%;
    padding: 3px 2px;
    font-size: small;
}

.icon-emo-unhappy {
    color: red;
    background-color: antiquewhite;
}

.modal-window {
    color: #666;
}