/* GRUNDLEGENDE EINSTELLUNGEN */
html {height:100%}
body {
    position: relative;
    background: #eaeaea;
    min-height: 45rem;
}
h1 {
    color:#00a6ff;
}
p {
    color:#999;
}
#content {
    width: 80%;
    margin: 0 auto;
}
#body-wrapper {
    background-color: #fff;
    padding: 20px;
}
#body-wrapper > form.login {
    width: 50%;
    max-width: 300px;
    margin: 0 auto;
}
#body-wrapper > form.login > .btn {
    margin-top:10px;
    width:100%;
}
.fg-danger {
    color:#f00;
}
.fg-success {
    color:#0f0;
}
/* NAVIGATION */
.navheader a {
    color:#00a6ff;
}
.navheader {
    height:auto;
}
.navbar-nav,
.blockZusatzmodule {
    list-style: none;
    display:flex;
}
.navbar-brand.space-brand {
    margin-left:75px;
}
.navbar.navbar-main {
    padding:0;
}
.dropdown-menu, .dropdown-menu.show {
    right: 0;
}

.space-brand {
    color: #fff;
    font-weight: bold;
}

.nav-profile-img {
    width: 50px;
    border: 1px solid #fff;
}
.dropdown-menu {
    box-shadow: 0px 0px 12px 0px #acaaaa;
}
#navbarNavDropdown a,
.navbar > a {
    color:#00a6ff;
}
.nav-tabs {
    border: none;
}
.dropdown-menu li {
    display: flex;
}
ul.dropdown-menu > li {
    padding-right:10px;
}
.nav-item.dropdown:hover .dropdown-menu {
    display: inline;
}
.nav-link.active {
    font-weight: bold;
}
.navbar.navbar-expand-lg.navbar-main.navbar-bg {
    background-color: #cdcdcd;
}
.navbar.navbar-expand-lg.navbar-main.navbar-bg #navbarNavDropdown a {
    color: #9d9d9d;
    font-size: 150%;
}
.navbar.navbar-expand-lg.navbar-main.navbar-bg #navbarNavDropdown .dropdown-menu a {
    font-size:100%;
}
.navbar.navbar-expand-lg.navbar-main.navbar-bg #navbarNavDropdown a:hover,
.navbar.navbar-expand-lg.navbar-main.navbar-bg #navbarNavDropdown a:active {
    color:#00a6ff;
}
.menuname {
    color: #00a6ff;
    padding-left: 10px;
}
.nav.nav-tabs {
    flex: 37;
}
.nav-tabs .nav-link {
    border:none;
}
.nav-tabs .nav-item {
    margin: 0;
}
.nav.nav-tabs.ganzrechts {
    flex: 1;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    border: none;
}
.dropdown-menu.large {
    width: 12rem;
}
.btn-primary a {
    color: #fff;
}
.btn-primary a:hover {
    text-decoration: none;
}
#content .navbar .dropdown-item.active,
#content .navbar .dropdown-item:active,
#content .navbar .addendum.active,
#content .navbar .addendum:active {
    color: #007bff !important;
    text-decoration: none;
    background-color: transparent;
}
/* DIVERSE */
.progress {
    margin-top:6px;
    background-color:#c9d1d5;
}
.progress-bar {
    overflow:visible;
    color:#000;
}
a.isbilled {
    color: #f00;
}
.text-right {
    width:100px;
    text-align: right;
}
.counter {
    font-size:80%;
    color:#999;
}
.active > .page-link {
    background: #b7b5fd;;
}
.sorted > a.asc::after {
    content: " \f0de";
    font-family: "Font Awesome 5 Free";
}
.sorted > a.desc::after {
    content: " \f0dd";
    font-family: "Font Awesome 5 Free";
}
/* LISTEN */
.listenkopf {
    display: flex;
}
.funktion {
    flex: 3;
}
.suchformular {
    flex: 3;
}
.changeSortOrder {
    flex: 1;
    padding-top: 2px;
    text-align: right;
}
.changeSortOrder button {
    padding: 10px 15px;
}

/* FORMS */
#customers_form label {
    width: 200px;
    text-align: right;
    padding: 5px;
}
#customers_form_ratevalidfrom,
#shipments_form_date {
    ddisplay: contents;
}
#projects_form label {
    width:190px;
    text-align: right;
    padding: 5px;
}
#periodicals_complete_form label,
#periodicals_form label {
    width:160px;
}
#shipments_form label {
    width:120px;
}
.datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-top,
.datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-right.datepicker-orient-top {
    width:203px;
}
#timeperiods_form label {
    width:125px;
}
#customer_form > div {
    margin-top: 5px;
}
#customer_form ul {
    margin-top: -25px;
    font-size: 80%;
    position: absolute;
    margin-left: 350px;
    color: red;
    list-style-type: none;
}

/* ZEITERFASSUNG */
.zeiterfassung {
    display:none;
    position: absolute;
    left: 900px;
    z-index: 100;
    background: #fff;
    width: 500px;
    box-shadow: 0px 0px 12px 0px #acaaaa;
}
.zeiterfassung .heading {
    background: #006aff;
    padding: 5px;
    color: #fff;
}
.zeiterfassung > .zeiterfassung_content {
    padding:5px;
}
.zeiterfassung label.breit {
    width: 110px;
    text-align: right;
}
.zeiterfassung input.breit {
    width:325px;
}
.zeiterfassung input#rate {
    width: 100px;
}
.zeiterfassung .checkblock,
.zeiterfassung .durationblock,
.zeiterfassung .rate {
    clear:both;
}
.zeiterfassung .zeitblock,
.zeiterfassung .checkblock {
    display: flex;
}
.zeiterfassung .zeitblock .date {
    flex: 2;
}
.zeiterfassung .zeitblock .start,
.zeiterfassung .zeitblock .ende {
    flex:1;
}
.zeiterfassung .duration {
    float: left;
    margin-right: 10px;
    margin-left: 114px;
    font-size: 200%;
    margin-top: -6px;
    color:#00a6ff;
    display: flex;
}
.zeiterfassung .duration input {
    width: 40px;
    border: none;
    color:#00a6ff;
}
.zeiterfassung .sekunden {
    color:#cdcdcd;
}
.zeiterfassung .durationblock {
    display: flex;
    margin-top: 10px;
}
.zeiterfassung .zeitblock .zeitlabel {
    flex-basis: 110px;
}
.zeiterfassung .checkbox input[type="checkbox"]:checked + label {
    left: 15px;
    background: #0f0;
}
.zeiterfassung .text {
    margin-left: -110px;
    margin-top: -8px;
    position: absolute;
}
.zeiterfassung .schalter .btn-danger {
    margin-left: 300px;
}
.durationblock button a {
    color:#fff;
}
.zeiterfassung .schalter {
    display: flex;
    margin-top: 15px;
}
.btn-danger a,
.btn-warning a {
    text-decoration: none;
    color: #000;
}
.btn-danger,
.btn-warning,
.btn-primary {
    color:#000;
}
form .buttons {
    margin-top: 20px;
}
#stopuhr {
    font-size: 1.5rem;
    margin-top: -10px;
}
.switch {
    display: inline-block;
    height: 24px;
    margin-bottom: 0;
    margin-top: 5px;
    position: relative;
    width: 60px;
}
.switch input {
    display: none;
}
input:checked + .slider {
    background-color: #218838;
}
.slider.round {
    border-radius: 34px;
}
.slider,
.slider::before {
    position: absolute;
    transition: .4s;
}
.slider {
    background-color: #b00020;
    bottom: 0;
    content: "ON";
    cursor: pointer;
    height: 24px;
    left: 0;
    right: 0;
    top: 3px;
}
input:checked + .slider .on {
    display: block;
}
.on {
    left: 35%;
}
.off {
    left: 66%;
}
.off,
.on {
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}
input:checked + .slider::before {
    transform: translateX(32px);
}
.slider.round::before {
    border-radius: 50%;
}
.slider::before {
    background-color: #fff;
    bottom: 2px;
    content: "";
    height: 20px;
    left: 4px;
    width: 20px;
}
.slider,
.slider::before {
    position: absolute;
    transition: .4s;
}
.label.onsite {
    margin: 0 10px;
}
.label.billable {
    margin:0 10px 10px 17px;
}

/* Zeitbuchungen */
.auswahlblock form {
    display: flex;
    margin-bottom: 10px;
}
.auswahlblock .projekte,
.auswahlblock .stati,
.auswahlblock .zeitraum {
    flex: 10;
}
.auswahlblock .button {
    flex: 1;
    margin-top: -5px;
}
.aktionsblock .loeschen,
.aktionsblock .rechnung {
    float: left;
    padding-right: 20px;
    margin-bottom: 20px;
}
.aktionsblock .loeschen {
    margin-left: 100px;
}
.aktionsblock > .statistics {
    float: right;
    text-align: right;
}
.table-responsive .bemerkung {
    color:#aaa;
}
/* Rechnung */
.rechnung #company {
    width: 300px;
}
.rechnung .date {
    float:right;
    text-align: right;
}.rechnung #salutation {
    width: 70px;
}
.rechnung #country {
    width: 40px;
}
.rechnung #retextbetr {
    width: 800px;
    margin-bottom:50px;
}
.rechnung #dear {
    width: 300px;
    margin-bottom:20px;
}
.rechnung .reno {
    margin-top: 50px;
}
.rechnung #retext {
    width: 800px;
    margin-bottom:20px;
}
.rechnung #retextafter {
    width: 1000px;
}
.rechnung input[id*="duration-"] {
    width: 80px;
}
.rechnung input[id*="value-"] {
    width: 80px;
}
.rechnung #onsitetimes {
    width: 80px;
}
.rechnung [id*=onsiterate] {
    width: 80px;
}
.rechnung [class*="result-"] {
    width: 100px;
    text-align: right;
    display: inline-block;
    float:right;
}
.rechnung .result2 {
    display: inline-block;
    text-align: right;
    width: 275px;
    float:right;
}
.rechnung .result3 {
    display: inline-block;
    text-align: right;
    width: 478px;
    float:right;
}
.rechnung .result4 {
    display: inline-block;
    text-align: right;
    width: 556px;
    float:right;
}
.rechnung .result5 {
    display: inline-block;
    text-align: right;
    width: 522px;
    margin-bottom:20px;
    float:right;
}
.rechnung input {
    margin-bottom:4px;
}
.rechnung input {
    border: none;
    background-color:#0069d921;
}
.rechnung input[id*="quant"] {
    width: 50px;
}
.rechnung input[id*="bez-"] {
    width: 400px;
}
.rechnung input[id*="text-"] {
    width: 400px;
}
.rechnung input[id*="bem"] {
    width: 110px;
}
.rechnung input[id*="name-"] {
    width: 280px;
}
.rechnung input[id*="preis"] {
    width: 80px;
    text-align: right;
}
.rechnung input#emailtext {
    width:300px;
}
form.rechnung {
    width: 80%;
}
.filter {
    width: 30%;
}
.newTimeentry {
    margin-bottom: 15px;
    display: flex;
}
.newTimeentry > form {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}
#admin_new_timeentry_form {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}
#admin_new_timeentry_form label {
    margin-right: 5px;
}
.newEntryForm {
    margin-right: 10px;
    font-size: 150%;
}
.navigation > nav {
    display: flex;
    justify-content: center;
}
#new_incoming_invoice_form label {
    width: 150px;
    text-align: right;
    padding-right: 10px;
}
#user_form label {
    width: 100px;
    text-align: right;
    padding-right: 10px;
}
#new_password_form label {
    width: 50px;
    text-align: right;
    padding-right: 10px;
    margin-bottom: 20px;
}
#new_password label {
    width: 160px;
    text-align: right;
    padding-right: 10px;
}
#customer_form label {
    width: 160px;
    text-align: right;
    padding-right: 10px;
}
.btn.btn-primary,
.btn.btn-danger,
.btn.btn-warning {
    margin-top: 20px;
}
.seller {
    font-size: 90%;
    text-decoration: underline;
    margin-bottom: 5px;
    left: -5px;
    position: relative;
}
.date {
    text-align: right;
}
.subject {
    font-weight: bold;
    padding-bottom: 10px;
}
.invoice th, .invoice td {
    padding-right: 5px;
}
.paymentterms {
    margin-top: 10px;
}
.invoice {
    width: fit-content;
}
.dropdown-menu, .dropdown-menu.show {
    right: 0;
}
.space-brand {
    color: #fff;
    font-weight: bold;
}
.nav-profile-img {
    width: 50px;
    border: 1px solid #fff;
}
.dropdown-menu {
    box-shadow: 0px 0px 12px 0px #acaaaa;
}
#navbarNavDropdown a,
.navbar > a {
    color:#00a6ff;
}
.nav-tabs {
    border: none;
}
.dropdown-menu li {
    display: flex;
}
ul.dropdown-menu > li {
    padding-right:10px;
}
.nav-item.dropdown:hover .dropdown-menu {
    display: inline;
}
.nav-link.active {
    font-weight: bold;
}
.navbar.navbar-expand-lg.navbar-main.navbar-bg {
    background-color: #cdcdcd;
}
.navbar.navbar-expand-lg.navbar-main.navbar-bg #navbarNavDropdown a {
    color: #9d9d9d;
    font-size: 150%;
}
.navbar.navbar-expand-lg.navbar-main.navbar-bg #navbarNavDropdown .dropdown-menu a {
    font-size:100%;
}
.navbar.navbar-expand-lg.navbar-main.navbar-bg #navbarNavDropdown a:hover,
.navbar.navbar-expand-lg.navbar-main.navbar-bg #navbarNavDropdown a:active {
    color:#00a6ff;
}
.singleLine {
    display: block;
    margin-bottom:10px;
}
input#mail_to_consultant_form_valid {
    float: left;
    margin-top: 5px;
    margin-right: 10px;
}
.big {
    font-size: 200%;
}
.align-right {
    text-align: right;
}
.accordion-body > ul {
    color: #999;
}
.hidden {
    display: none;
}