*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'PT Sans', sans-serif;
    overflow-y: scroll;
}

.noscript {
    font-size: 120%;
    margin-top: 2em;
}

.bold { font-weight: bold; }
.uline { text-decoration: underline; }
.center { text-align: center; }

textarea { resize: none; }

.login {
    margin-top: 2em;
}
.nojs .login { display: none; }

.login .form-control {
    margin-bottom: 1em;
}

.login.neues-passwort > .alert > h1 {
    font-size: 1.8em;
    margin: 0 0 .25em 0;
}

.navbar-default {
    margin-top: 1px;
}

.navbar-nav {
    font-size: 130%;
}

.navbar-default .navbar-nav:first-of-type:not(.navbar-right) > li {
    margin-right: .4em;
}

.navbar-default .navbar-nav > li > a {
    background: rgba(0, 0, 0, 0.07);
    color: black;
    transition: all .1s ease-in-out;
}

.navbar-right .dropdown-toggle .glyphicon {
    font-size: 90%;
    color: rgba(0, 0, 0, 0.5);
}

.navbar-default .navbar-nav > li > a.active,
.navbar-default .navbar-nav > li > a:not(.dropdown-toggle):hover,
.navbar-default .navbar-nav > li.aktiv > a {
    background: #337ab7;
    color: white;
}
.navbar-default .navbar-nav > li > .dropdown-toggle:hover { background: rgba(0, 0, 0, 0.12); }

.navbar-default .navbar-right .switch {
    margin-bottom: .5em;
}

.navbar-default .navbar-right .switch input.hidden {
    position: absolute;
    left: -999em;
    top: -999em;
}

@media screen and (min-width: 768px) {
    .navbar-default .navbar-right {
        display: flex;
        align-items: center;
    }

    .navbar-default .navbar-right .switch {
        margin-right: 1em;
        margin-bottom: 0;
    }
}

.btn[disabled] {
    pointer-events: none;
    opacity: .2;
}

.uhr {
    font-weight: bold;
    font-size: 130%;
    color: rgba(0, 0, 0, 0.45);
    letter-spacing: .03em;
    cursor: default;
    margin-right: 1em;
}
@media screen and (max-width: 55em) {
    .navbar-default .uhr { display: none; }
}

.jumbotron.custom .alert.fehlermeldung { margin-bottom: 1em; }
.fehlermeldung ul {
    color: black;
    margin: .75em 0;
}

.mitarbeiter-auswahl { margin-right: .75em; }

.mitarbeiter-auswahl > .form-group {
    display: flex;
    align-items: center;
    margin: 0;
}

.mitarbeiter-auswahl label {
    font-size: 14px;
    font-weight: normal;
    color: #888;
    margin: 0 .5em 0 0;
}

.mitarbeiter-auswahl select {
    cursor: pointer;
    margin-right: .5em;
}

.brand {
    display: inline-block;
}

.brand > span:first-child {
    background-image: url(../img/Signet.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    font-weight: normal;
    color: #888;
    padding-left: 1.1em;
}

.navbar-default .navbar-brand {
    font-weight: bold;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px 0 0 4px;
    border-right: 2px solid rgba(0, 0, 0, 0.05);
    margin-right: 1em;
}

.jumbotron {
    background-color: #f9f9f9;
}

.jumbotron.custom { padding: 1.5em; margin: 0; }

.jumbotron.custom > h1 {
    font-size: 1.8em;
    letter-spacing: .03em;
    margin: 0 0 .75em 0;
}
.jumbotron.custom > h1.mit-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.von-bis-markieren {
    display: flex;
    align-items: center;
}
.von-bis-markieren em {
    font-style: normal;
    font-size: 55%;
    color: #888;
    margin-right: .5em;
}

.jumbotron.custom .alert {
    font-size: 120%;
    margin: 0;
}

.jumbotron.custom .alert p { font-size: inherit; }

.jumbotron.start .begruessung {
    font-size: 2.7em;
    margin: 1.5em 0 1.1em 0;
}
.jumbotron.start .begruessung > span {
    display: block;
    font-size: 45%;
    font-weight: normal;
}

/* Monatsübersicht */
.monatsuebersicht-container > .filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.75em;
}

.monatsuebersicht-container > .filter > p {
    font-size: 1.8em;
    letter-spacing: .03em;
    border-left: 4px solid rgba(0, 0, 0, 0.12);
    padding-left: .25em;
    margin: 0;
}

.monatsuebersicht-container > .filter > .auswahl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: .3em;
    padding: .5em;
}

.monatsuebersicht-container > .filter > .auswahl > ul {
    list-style: none;
    font-size: 1.8em;
    padding: 0;
    margin: 0 .75em 0 0;

    display: flex;
    align-items: center;
}

.monatsuebersicht-container > .filter > .auswahl > ul > .inaktiv { opacity: .2; pointer-events: none; }
.monatsuebersicht-container > .filter > .auswahl > ul > .reset { font-size: 85%; margin-right: 1em; margin-left: .2em; }
.monatsuebersicht-container > .filter > .auswahl > ul > .reset > a { color: #5cb85c; }

.monatsuebersicht-container > .filter > .auswahl > form {
    display: flex;
}

.monatsuebersicht-container > .filter > .auswahl .form-group {
    display: flex;
    align-items: center;
    margin: 0 .5em 0 0;
}

.monatsuebersicht-container > .filter > .auswahl .form-group > label {
    color: #888;
    letter-spacing: .03em;
    margin: 0 .3em 0 0;
}

.monatsuebersicht-container > .filter > .auswahl .form-group > .form-control {
    cursor: pointer;
}

.monatsuebersicht {
    font-size: 120%;
    background-color: white;
}

.table.monatsuebersicht thead th { border-bottom: none; }
.table.monatsuebersicht thead th:nth-child(6) > span { border-bottom: 2px solid; }

.monatsuebersicht th:first-child { text-align: center; width: 7%; }
.monatsuebersicht th:nth-child(2) { width: 14%; }

.monatsuebersicht td[rowspan] {
    border-right: 1px solid #ddd;
    vertical-align: middle;
    text-align: center;
    font-size: 130%;
    color: #777;
}

.monatsuebersicht .kw-start {
    border-top: 2px solid #ddd;
}

.monatsuebersicht tr[data-even] {
    background: #f5f5f5;
}

.monatsuebersicht tr.heute > td:not([rowspan]) {
    background-color: rgba(129, 255, 129, 0.2);
}

.table.monatsuebersicht tfoot td,
.buerozeiten .table tfoot td {
    padding-top: 1.5em;
}

.table.monatsuebersicht tfoot td:nth-child(2) .btn {
    display: block;
    margin-top: 2em;
}

.monatsuebersicht tfoot > tr,
.buerozeiten tfoot > tr {
    border-top: 2px solid #949494;
}

.gruen { color: #5cb85c; }
.rot { color: red; }

.table .frei { color: #999; }
.table .frei.text { font-style: italic; }

/* -> Bearbeitung */
.monatsuebersicht-container > form .monatsuebersicht input,
.buerozeiten input {
    border: none;
    outline: none;
    background: none;
    width: 4.5em;
    padding: 0;
    margin: 0;
}
.buerozeiten input { width: auto; }

.monatsuebersicht th.aendern,
.buerozeiten th.aendern {
    width: 12rem;
    color: #888;
}
.monatsuebersicht .aendern,
.buerozeiten .aendern {
    text-align: center;
}

.monatsuebersicht .edit.off input[type="number"],
.monatsuebersicht .edit.off input[type="time"],
.monatsuebersicht .edit.on > span:not(.glyphicon),
.buerozeiten .edit.off input[type="time"],
.buerozeiten .edit.on > span { display: none; }
.monatsuebersicht .edit.on > .glyphicon { cursor: pointer; }

.slow .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; }
.fast .toggle-group { transition: left 0.1s; -webkit-transition: left 0.1s; }
.quick .toggle-group { transition: none; -webkit-transition: none; }

form button.versteckt { visibility: hidden; }

/* Monatsübersicht alle */
.monatsuebersicht.alle > thead th:not(:first-child) { width: 10%; }

.monatsuebersicht.alle table {
    background: rgba(0,0,0,.05);
    font-size: 90%;
    margin: 0;
}

.monatsuebersicht.alle table th,
.monatsuebersicht.alle table td { padding-top: 0; padding-bottom: 0; }

.monatsuebersicht.alle table thead th { text-align: left; padding-bottom: .3em; }
.monatsuebersicht.alle thead span { border-bottom: 2px solid; }

.monatsuebersicht.alle table th { width: 5em; }

/* Feiertage + OUT-Tage */
.kalender {
    list-style: none;
    font-size: 120%;
    font-weight: bold;
    color: rgba(40, 96, 144, 0.7);
    padding: 0;
    margin: 0;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.625em, 1fr));
    grid-gap: 1em;
}

.kalender .monatsname {
    font-size: 1.85em;
    color: #286090;
    margin: 0 0 .5em 0;
    border-left: 3px solid rgba(40, 96, 144, 0.25);
    padding-left: .2em;
}

.kalender > li {
    border: 1px solid rgba(51, 122, 183, 0.5);
    border-radius: .3em;
    background: rgba(51, 122, 183, 0.1);
    padding: .75em;
}

.kalender ul {
    list-style: disc;
    line-height: 1.2;
    padding-left: 1.3em;
}

.kalender ul > li:not(:last-child) {
    margin-bottom: .75em;
    padding-bottom: .5em;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
}

.kalender ul > li {
    position: relative;
    padding-right: 1.5em;
}

.kalender ul > li > span {
    color: #333;
}

.kalender ul > li .bezeichnung {
    display: block;
    font-weight: normal;
    font-style: italic;
    letter-spacing: .03em;
}

.kalender ul > li > .delete {
    position: absolute;
    top: .1em;
    right: 0;
    margin: 0;
}

.kalender ul > li > .delete > input { cursor: pointer; }

form.loeschen {
    display: flex;
    flex-direction: column;
}

form.loeschen > button {
    align-self: flex-end;
    margin-top: 1em;
}

.abwesenheiten > h1 {
    background: rgba(51, 122, 183, 0.1);
    border-radius: .2em .2em 0 0;
    color: #888;
    letter-spacing: .03em;
    font-size: 120%;
    font-weight: bold;
    line-height: inherit;
    padding: .3em .3em .3em .9em;
    margin: 0 0 .5em 0;
}

/* Aktionen (links) */
.aktionen .form-label {
    display: block;
    background: rgba(51, 122, 183, 0.1);
    border-radius: .2em .2em 0 0;
    color: #888;
    letter-spacing: .03em;
    font-weight: bold;
    cursor: default;
    padding: .3em .3em .3em 1em;
    margin-bottom: .3em;
}
.aktionen .add .form-label { font-weight: normal; color: black; }

.aktionen select { cursor: pointer; }
.aktionen .jahr select {
    font-weight: bold;
    font-size: 115%;
    height: auto;
}

.aktionen:not(.abwesenheitsbezeichnungen) .add {
    margin-top: 2.5em;
}

.aktionen .add > h1 {
    font-size: 1.1em;
    color: #777;
    margin: 0 0 .75em 0;
}

.alert-warning { font-size: 120%; }

.aktionen.abwesenheiten .add fieldset.form-group > .checkbox:first-of-type { margin-bottom: .75em; }
.aktionen.abwesenheiten .add fieldset.form-group > .checkbox:first-of-type > label {
    font-weight: bold;
    letter-spacing: .05em;
}

.aktionen {
    font-size: 120%;
}

.aktionen .form-group { margin-bottom: .9em; }

.aktionen legend {
    margin: 0;
    font-size: inherit;
    border: none;
}

.aktionen .checkbox { margin: 0; }

.input-group.date input[readonly] { background: inherit; font-weight: bold; }

.aktionen.abwesenheiten .add .verwalten {
    display: block;
    margin-top: 1em;
}

.aktionen .add button { width: 100%; }

/* Bürozeiten */
.buerozeiten .table {
    background: white;
    font-size: 120%;
    margin: 2em 0 0 0;
}

@media screen and (min-width: 56.250em) {
    .buerozeiten .table { width: 50%; }
}

.buerozeiten .table th:first-child {
    width: 30%;
}
.buerozeiten .table th:nth-child(2) { width: 20%; }

.buerozeiten .table tbody tr:nth-child(odd) { background: #f5f5f5; }

.buerozeiten .table tbody tr.frei {
    background: rgba(173,216,230,.3);
}

.buerozeiten .table tbody td:first-child {
    font-weight: bold;
    color: #666;
    letter-spacing: .03em;
}

.buerozeiten .table tfoot { color: #888; }

input[type=time]::-webkit-clear-button,
input[type=time]::-webkit-outer-spin-button,
input[type=time]::-webkit-inner-spin-button {
    display:none;
}

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
    .buerozeiten input[type=time] {
        height: 1em;
    }
}

/* Abwesenheitsarten */
.abwesenheitsarten {
    background: white;
    font-size: 120%;
}
@media screen and (min-width: 81.250em) {
    .abwesenheitsarten,
    .abwesenheitsarten-container .alert { width: 60%; }
}

.abwesenheitsarten th:nth-child(2) {
    width: 12em;
}

.abwesenheitsarten tbody tr:nth-child(odd) {
    background: #f5f5f5;
}

.table.abwesenheitsarten tbody td:first-child { padding-top: .85em; }
.table.abwesenheitsarten td {
    border: none;
}

.abwesenheitsarten .form-group {
    margin: 0;
}

.abwesenheitsarten .form-control:not(textarea) {
    font-size: inherit;
}

.abwesenheitsarten .delete { color: #d9534f; }

.table.abwesenheitsarten tfoot td { padding-top: 1.5em; }
.table.abwesenheitsarten tfoot button { width: 100%; }

/* Jahresübersicht */
.jahresuebersicht {
    list-style: none;
    font-size: 90%;
    cursor: default;
    padding: 0;
    margin: 2em 0 0 0;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    grid-gap: 1em;
}

.jahresuebersicht .table-wrapper {
    flex: 1;
    margin-bottom: 1.5em;
}

.jahresuebersicht .table-wrapper > .table {
    height: 100%;
    margin: 0;
    background: rgba(255, 255, 0, 0.07);
}

.jahresuebersicht > li {
    background: white;
    border: 1px solid rgba(51, 122, 183, 0.5);
    border-radius: .3em;
    padding: .5em;
    display: flex;
    flex-direction: column;
}

.jahresuebersicht .monatsname {
    font-size: 2.2em;
    color: #286090;
    margin: 0 0 .35em 0;
    border-left: 3px solid rgba(40, 96, 144, 0.25);
    padding-left: .2em;
}

.jahresuebersicht .table thead th:nth-child(3) > span {
    border-bottom: 2px solid;
}

.jahresuebersicht .table th,
.jahresuebersicht .table td {
    padding: .1em; /* .3em */
    vertical-align: middle;
}
.jahresuebersicht .table th { padding-bottom: .3em; }
.jahresuebersicht .table tfoot td { padding-top: .3em; }
.jahresuebersicht .table tfoot td:first-child span {
    font-weight: normal;
    margin-right: .3em;
}

.jahresuebersicht .table tfoot > tr {
    border-top: 2px solid #949494;
}

.jahresuebersicht .auswertung {
    background: none; /*linear-gradient(to bottom, #f9f9f9 40%,#e2f9e1 100%);*/
    border: none;
    font-size: 120%;
    justify-content: flex-end;
    padding: 0;
}

.jahresuebersicht .auswertung dl {
    background: linear-gradient(to right, rgba(255, 255, 0, 0.07) 0%,#f9f9f9 100%);
    border-left: 2px solid rgba(51, 122, 183, 0.5);
    padding: 1em;
    margin: 0;
    position: relative;
}

.jahresuebersicht .auswertung dt { font-weight: normal; }

.jahresuebersicht .auswertung dd {
    font-weight: bold;
    font-size: 130%;
}

.jahresuebersicht .auswertung dd:not(:last-child) {
    margin-bottom: .5em;
}

.jahresuebersicht .auswertung .proz {
    font-size: 70%;
    font-weight: normal;
    letter-spacing: .03em;
    color: #555;
}

.jahresuebersicht .auswertung dl .glyphicon {
    position: absolute;
    right: 1em;
    top: 0;
    font-size: 200%;
    color: rgba(51, 122, 183, 0.5);
}

@-moz-document url-prefix() {
    .jahresuebersicht .table thead,
    .jahresuebersicht .table tfoot { height: 1em; }

    .jahresuebersicht .table tbody { height: calc(100% - 1em); }
}