body.guest {
    background: #000 url('../img/bg.jpg') no-repeat 50% 50%;
    background-size: cover;
}
body.logged {
    background: #000;
}
body.logged::after {
    content: "";
    background: url('../img/bg.jpg') no-repeat 50% 50%;
    background-size: cover;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: -1;    
}
body.error {
    background: #000 url('../img/error.gif') no-repeat 50% 50%;
    background-size: cover;
}
div.alert {
    position: relative;
    min-height: 1em;
    margin: 1em 0;
    background: #F8F8F9;
    padding: 1em 1.5em;
    line-height: 1.4285em;
    color: rgba(0,0,0,.87);
    -webkit-transition: opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;
    transition: opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;
    border-radius: .28571429rem;
    box-shadow: 0 0 0 1px rgba(34,36,38,.22) inset,0 0 0 0 transparent;
}
div.alert-danger {
    background-color: #FFE8E6;
    color: #DB2828;
    box-shadow: 0 0 0 1px #DB2828 inset,0 0 0 0 transparent;
}
div.alert-success {
    background-color: #E5F9E7;
    color: #1EBC30;
    box-shadow: 0 0 0 1px #1EBC30 inset,0 0 0 0 transparent;
}

.ui.toggle.checkbox input:focus:checked~.box, .ui.toggle.checkbox input:focus:checked~label,
.ui.toggle.checkbox input:checked~.box, .ui.toggle.checkbox input:checked~label {
    color: #fff !important;
}

a.event-link { 
    display: none; 
}
tr.event-used {
    display: none;
}
.menu.footer {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    flex-wrap: wrap;
}
.menu.footer .item {
    display: inline-block;
    flex: 1 1 auto;
    text-align: center;
    margin: 0 0.3em;
}
.menu.footer .item .button {
    display: block;
    width: 100%;
}
.menu.footer .paginator {
    flex: 0 0 100%;
    text-align: left;
    min-width: 100%;
    padding-bottom: 1em;
}

.flex {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    flex-wrap: nowrap;
    margin: 0 -0.5em 0.5em -0.5em;
}

.flex > .item {
    flex: 1 1 auto;
    padding: 0 0.5em;
}

th.row-skip, th.row-free, th.row-band, th.row-vip {
    width: 80px;
}

.no-desktop {
    display: none !important;
}

@media only screen and (max-width: 767px) {
    
    .ui.column.grid>[class*="eight wide"].column.mobile-one,
    .ui.grid>.column.row>[class*="eight wide"].column.mobile-one,
    .ui.grid>.row>[class*="eight wide"].column.mobile-one,
    .ui.grid>[class*="eight wide"].column.mobile-one {
        width: 100% !important;
    }
    
    .table-scroll-x {
        max-width: 100%;
        overflow-x: auto;
    }

    .ui.form .two-and-two.fields > .field.mobile-two {
        width: 100% !important;
    }

    .ui.form .two-and-two.fields > .field {
        width: 50% !important;
    }

    .ui.form .three.fields > .field {
        width: 33.333333% !important;
    }

    .no-desktop {
        display: inherit !important;
    }
    tfoot.no-desktop {
        display: block !important;
    }
    
    .flex {
        flex-wrap: wrap;
    }

    .flex > .item {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .flex > .button {
        flex: 1 1 20%;
    }

    body.guest.dimmed .content .description img {
        max-width: 100%;
        max-height: 100%;
        width: auto !important;
        height: auto !important;
    }
    
    .ui.button {
        display: block !important;
        width: 100% !important;
        height: 64px !important;
        line-height: 64px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0.5em !important;        
    }
    
    .no-mobile {
        display: none !important;
    }
    tr.events-event {
        display: block;
        position: relative;
        overflow: hidden;
        border-bottom: 5px solid #222;
    }
    a.pax-link {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 50px !important;
        height: 50px !important;
        border: 2px solid #555;
        z-index: 1000;
        text-align: center;
    }
    a.event-link {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 500;
    }
    td.event-name {
        float: left !important;
    }
    td.event-date {
        float: right !important;
    }
    td.event-extra {
        clear: both !important;
        display: block !important;
        overflow: hidden !important;
    }
    td.event-pax {
        float: left;
    }
    td.event-pax:before {
        content: 'Pax: ';
    }
    td.event-tbl {
        float: right;
    }
    td.event-tbl:before {
        content: 'Tbl: ';
    }
    
    .ui.two.statistics .statistic {
        width: 100% !important;
    }
    
    tr.event-row {
        display: block;
        position: relative;
        overflow: hidden;
        border-bottom: 5px solid #222;
    }
    a.row-link {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    td.row-pax {
        float: left;
    }
    td.row-pax:before {
        content: 'Pax: ';
    }
    td.row-tbl {
        float: left;
    }
    td.row-tbl:before {
        content: 'Tbl: ';
    }
    
    td.row-vip, td.row-free, td.row-skip, td.row-band {
        float: left;
        width: 25%;
    }
    td.row-skip {
        clear: both;
    }
    td.row-vip:before {
        content: 'Vip: ';
    }
    td.row-free:before {
        content: 'Free: ';
    }
    td.row-skip:before {
        content: 'Ohi: ';
    }
    td.row-band:before {
        content: 'Keikalle: ';
    }
    td.row-extra {
        display: block !important;
        clear: both !important;
    }

    .ui.top.inverted.menu .item {
        height: 50px;
        font-size: 0px;
    }
    .ui.top.inverted.menu .item .icon {
        font-size: 32px;
        margin: 0 .35714286em !important;
    }

    .menu.footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;

        display: flex;
        align-items: center;
        align-content: center;
        background: rgba(0, 0, 0, 0.75);
        z-index: 2000;
    }

    .menu.footer .item {
        flex: 1 1 auto;
        text-align: center;
        margin: 0 0.3em;
    }

    .menu.footer .paginator {
        display: flex;
        max-width: 100vw;
        overflow-x: auto;
    }
    
    .menu.footer .paginator .page {
        flex: 1 1 auto;
    }

    #container {
        padding-bottom: 150px;
    }
}

.visitorcount .item .flex {
    display: flex;
}
.visitorcount .item .flex .item.mobile-third {
    flex: 0 0 33%;
    min-width: auto;
    align-self: center;
    text-align: left;
}   
.visitorcount .item .flex .item.mobile-third:last-of-type {
    text-align: right;
}
.event-row.is-expired {
    opacity: 0.2 !important;
    background-color: #600 !important;
}

th.dim, td.dim {
    opacity: 0.75;
}