body {
    background-image: url('/images/bg.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.gradient_img {
    -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
    padding: 0;
}

.cal {
    width: 4em;
    background-color: white;
    height: 5em;
    border-radius: 10px;
    border: 2px solid black;
    color:black;
}
.cal_month {
    line-height: 1.5em;
    text-align: center;
    border-radius: 10px 10px 0 0;
    font-weight: bold;
    color: white;
    background: rgb(255,0,0);
    background: linear-gradient(180deg, rgba(255,0,0,1) 0%, rgba(119,8,8,0.8) 50%, rgba(255,0,0,1) 100%);
}
.cal_day{
    height: 100%;
    font-size: 250%;
    font-weight: bolder;
    text-align: center;
}

.card {
    background: #07182E;
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
}

.card h2 {
    z-index: 1;
    color: white;
    font-size: 2em;
}

.card::before {
    content: '';
    position: absolute;
    width: 130%;
    background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
    height: 50%;
    animation: rotBGimg 3s linear infinite;
    transition: all 0.2s linear;
}

@keyframes rotBGimg {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.card::after {
    content: '';
    position: absolute;
    background: var(--primary-container)!important;
    inset: 5px;
    border-radius: 15px;
}

.title {
    position: fixed;
    left: calc(50% - 75px);
    top: 0.6em;
    width: 300px;
}

.autosave_pending {
    border: 2px dashed white !important;
}
.autosave_done {
    border: 2px solid green !important;
}
.autosave_error {
    border: 2px solid red !important;
    background-color: firebrick !important;
}
* > .fa-hover-show,
*:hover > .fa-hover-hidden {
    border-radius: 0!important;
    display: none;
}
*:hover > .fa-hover-show {
    border-radius: 0!important;
    display: inline-block;
}

.tr_sum {
    font-weight: 600;
    background-color: rgba(255,255,255,.5) !important;
    color: black;
}
.tr_blank{
    background-color: rgba(0,0,0,0.3) !important;
    line-height: 10px !important;
}

.rangeslider,
.rangeslider__fill {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-clip: padding-box;
    /* stops bg color from leaking outside the border: */
}

.rangeslider {
    background: var(--primary);
    position: relative;
    height: 20px;
    width: 100%;
    display: inline-block;
}
@media only screen and (max-width: 520px) {
    .rangeslider {
        height: 13.3333333333px;
    }
}

.rangeslider__fill {
    background: var(--inverse-primary);
    position: absolute;
    top: 0;
    height: 100%;
    display: block;
}

.rangeslider__handle {
    cursor: pointer;
    display: inline-block;
    width: 60px;
    height: 60px;
    position: absolute;
    background: var(--inverse-primary);
    border: 5px solid var(--primary);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-clip: padding-box;
    /* stops bg color from leaking outside the border: */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: -20px;
    touch-action: pan-y;
    -ms-touch-action: pan-y;
}
@media only screen and (max-width: 520px) {
    .rangeslider__handle {
        width: 40px;
        height: 40px;
        top: -13.3333333333px;
    }
}
.rangeslider__handle:active {
    background: orange;
}
.rangeslider__handle:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #FFF;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-clip: padding-box;
    /* stops bg color from leaking outside the border: */
}
@media only screen and (max-width: 520px) {
    .rangeslider__handle:after {
        display: none;
    }
}

.rangeslider__holder {
    position: relative;
    margin: 2em 0;
}
input[type=text], input[type=number]{
    font-size: 200%;
}

.print th {
    font-weight: bold;
    font-variant: all-petite-caps;
}
.print .tr_sum {
    background-color: lightgray !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

sup {
    vertical-align: top !important;
    font-size: x-small;
    margin-top: -1em;
}

tr:nth-child(even of :not(.hidden)) {
 background-color: rgba(255,255,255,0.1);
}
tr:nth-child(even of :not(.hidden)).wenig{
    background-color: rgba(255,125,125,0.33);
}
tr:nth-child(odd of :not(.hidden)).wenig{
    background-color: rgba(255,50,50,0.33);
}
tr:nth-child(even of :not(.hidden)).leer{
    background-color: rgba(255,75,75,0.7);
}
tr:nth-child(odd of :not(.hidden)).leer{
    background-color: rgba(255,25,25,0.7);
}
.hidden{
    display: none;
}
th {
    background: var(--surface-container-high);
    z-index: 99;
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    /*box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);*/
}
.input-error{
    border: 2px solid red;
    color: lightsalmon;
    background-color: rgba(255,0,0,.1);
}