body, #main{
    background: url('/static/background_75.jpg') no-repeat center center fixed;
    background-blend-mode: screen;
    background-color: #d0d0d0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body.dialog-open {
    overflow: hidden;
}

#main{
    position:absolute;
    top:0;
    left:0; right:0;
    min-height: 100%;
}

/** form controls **/
.form-control.is-valid{
    background:none !important;
    padding-right: 12px !important;
    border-color: rgb(206,212,218) !important;
}

input{
    color: #333 !important;
    /*box-shadow: inset 2px 0 7px rgb(242,242,242);
    background-color: white;*/
}

/** styling **/
.o-1{ opacity:0.1; }
.o-2{ opacity:0.2; }
.o-3{ opacity:0.3; }
.o-4{ opacity:0.4; }
.o-5{ opacity:0.5; }
.o-6{ opacity:0.6; }
.o-7{ opacity:0.7; }
.o-8{ opacity:0.8; }
.o-9{ opacity:0.9; }

.result-important{
    background-color: rgba(0,50,100,0.8);
    color: white;
    font-weight:bold;
}
.result-important .col-left label {
    font-weight: bold;
    text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 0 2px 1px #fff, 0 -2px 1px #fff, 2px 0 1px #fff, -2px 0 1px #fff;
}
.result-important .col-right label {
    font-weight: bold;
    text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 0 2px 1px #fff, 0 -2px 1px #fff, 2px 0 1px #fff, -2px 0 1px #fff;
}

.warn-before::before {
    content: "⚠";
    color: black;
    background-color: orange;
    border: 1px solid black;
    border-radius: 2px;
    margin-right: 1em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

/**
    cards
 **/
.card{
    background-color: rgba(255,255,255,0.8)
}

.card-header{
    /*box-shadow: inset -30px 39px 29px rgba(255,255,255,0.9);
    background-image: linear-gradient( 90deg, rgba(187,190,190,0), rgba(100,100,100,0.1));*/
}

.card .subtitle-left, .card .subtitle-right {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0.25rem 0;
}
.card .subtitle-left {
    text-align:left;
    margin-left:-20px;
}
.card .subtitle-right {
    text-align:right;
    margin-right:-20px;
}

/**
    cookie popup
 */
.popp{
    position:fixed;
    bottom:0; left:0;
    width:100%;
    z-index:1000;
    background:white;
    display:grid;
    grid-template-columns: auto 5rem;
    align-items:stretch;
}

/** hover buttons hover above the content and are transparent until hovering over them **/
.hover_buttons{
    position: absolute;
    top: -0.5rem;
    right: 0;
    padding: 0.5rem;
    z-index:10;
    opacity:0.4;
}
.hover_buttons:hover{
    opacity:1.0;
}
.hover_buttons > * {
    opacity: 0.4;
}
.hover_buttons > *:hover {
    opacity: 1.0;
}


/** dropdown fix **/

.dropdown-menu {
    overflow-y: scroll;
    max-height: 12em;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(0,0,0,0.05);
    color:black;
}

/** mouse cursor classes **/
.cursor-alias {cursor: alias;}
.cursor-all-scroll {cursor: all-scroll;}
.cursor-auto {cursor: auto;}
.cursor-cell {cursor: cell;}
.cursor-context-menu {cursor: context-menu;}
.cursor-col-resize {cursor: col-resize;}
.cursor-copy {cursor: copy;}
.cursor-crosshair {cursor: crosshair;}
.cursor-default {cursor: default;}
.cursor-e-resize {cursor: e-resize;}
.cursor-ew-resize {cursor: ew-resize;}
.cursor-grab {cursor: grab;}
.cursor-grabbing {cursor: grabbing;}
.cursor-help {cursor: help;}
.cursor-move {cursor: move;}
.cursor-n-resize {cursor: n-resize;}
.cursor-ne-resize {cursor: ne-resize;}
.cursor-nesw-resize {cursor: nesw-resize;}
.cursor-ns-resize {cursor: ns-resize;}
.cursor-nw-resize {cursor: nw-resize;}
.cursor-nwse-resize {cursor: nwse-resize;}
.cursor-no-drop {cursor: no-drop;}
.cursor-none {cursor: none;}
.cursor-not-allowed {cursor: not-allowed;}
.cursor-pointer {cursor: pointer;}
.cursor-progress {cursor: progress;}
.cursor-row-resize {cursor: row-resize;}
.cursor-s-resize {cursor: s-resize;}
.cursor-se-resize {cursor: se-resize;}
.cursor-sw-resize {cursor: sw-resize;}
.cursor-text {cursor: text;}
/*.cursor-url {cursor: url(myBall.cur),auto;}*/
.cursor-w-resize {cursor: w-resize;}
.cursor-wait {cursor: wait;}
.cursor-zoom-in {cursor: zoom-in;}
.cursor-zoom-out {cursor: zoom-out;}

/**
    version-update top-bar
 */
.topbar {
    position:fixed;
    z-index:30;
    bottom:0;
    right:0;
    left:0;
    background-color: white;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5em;
    text-align: center;
}

/**
    dialog stuff
 */
.dialog {
    position:fixed;
    bottom:0; left:0;
    width:100%;
    height:100%;
    z-index:100;
    background:white;
    padding: 2rem;
    background-color: rgba(1,1,1,0.3);
    backdrop-filter: saturate(10%);
}

.dialog > .card {
    position:relative;
    max-width:100%;
    max-height:100%;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(4px 4px 10px #555);
}

.dialog > .card > .card-body {
    overflow-y: auto;
}

/**
    drawer stuff
 */
#drawer{
    position:fixed;
    z-index:40;
    left:-15rem;
    top:0;
    width:17rem;
    height:120%;
    opacity: 0.5;
}
#drawer #drawerButton{
    opacity: 0.5;
    right: 0;
    z-index: 1;
}
#drawer #drawerButton:hover{
    opacity: 1.0;
}
#drawer #drawerContent{
    height:100%;
    opacity:0;
    padding: 1.0rem 0.5rem 0.5rem 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    display:none;
}
#drawer .list{
    margin-bottom: 2em;
}
#drawer .list a {
    margin-left: 1.0rem;
    margin-bottom: 1.0em;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    font-size:105%;
    display: inline-block;
    width:100%;
    color: #0f846d;
}
#drawer .list a:hover {
    color: #18BC9C;
}

/** left-right containers **/
.col-left label {
    color: rgb(120,60,50);
}
.col-right label {
    color: rgb(40,60,150);
}
.calculation {
    position:relative;
}
.calculation .marker{
    width:1.5em;
    height:1.5em;
    position: absolute;
    right: -0.8em;
    top: -0.8em;
    display: block;
    content: ".";
    color: rgba(0,0,0,0);
}
@media (max-width: 767.98px) {
    /** small screens **/

    .card .subtitle-left {
        color: rgb(120,60,50);
    }
    .card .subtitle-right {
        color: rgb(40,60,150);
    }

    .col-left .calculation .marker {
        border-top: 2px solid rgb(120,60,50);
        border-right: 2px solid rgb(120,60,50);
    }
    .col-right .calculation .marker {
        border-top: 2px solid rgb(40,60,150);
        border-right: 2px solid rgb(40,60,150);
    }
    .col-left .calculation, .col-right .calculation {
        margin-bottom: 1em;
        margin-top: 0.5em;
    }

}



/** navigation tabs **/

.nav-tabs .nav-link.active {
    /*box-shadow: inset 1px -6px 14px #fff;
    background-image: linear-gradient(rgba(250,250,250,50), rgba(100,255,255,0));*/
}




/** planner */

.planningTable td.time {
    font-size: 75%;
    height: 1.3rem;
    position: relative;
    top: -1em;
}

.planningTable td.timeslotA {
    background: rgba(198,127,127);
    border-bottom: 1px solid rgba(255,255,255,0.25);
    border-right: 1px solid rgba(255,255,255,0.25);
}

.planningTable td.timeslotB {
    background: rgba(127,158,238);
    border-bottom: 1px solid rgba(255,255,255,0.25);
    border-right: 1px solid rgba(255,255,255,0.25);
}