body{
    margin:0;
    font-family: 'Source Sans Pro', sans-serif;
    color: var(--grau);
}
/* VARIABLEN */
:root{
    --hellblau: #0aa6e0;
    --dunkelblau: #214f60;
    --grau: #818181;
}

.full-width {
    width: 100%;
}
/* VARIABLEN END */

/* FONT START */
h1{
    color: var(--hellblau);
}
a{
    text-decoration:none;
    color: #fff;
}
/* FONT END */

/* GRID START */
/*.wrapper{
        display:grid;
        grid-template-columns: 250px auto ;
        grid-template-rows: 75px 80px auto;
        grid-gap: 0px;
        height:100vh;
}*/
input[type="text"]:disabled, input[type="date"]:disabled, input[type="submit"]:disabled, input[type="checkbox"]:disabled, select:disabled {
    -webkit-appearance: none;
}
.wrapper {
    /*    position: absolute;
        top: 0;*/
}

.logo{
    background-color: var(--hellblau);
    padding:1em;
}

.user{
    padding:1em;
}
.sidebar {
    height: 100%;
    width: 15%;
    position: fixed;
    top: 0;
    background-color: var(--dunkelblau);
}

.user h3{
    margin: 0 auto;
}

.menu{
    position:relative;
    text-align:center;
}
.head, .toolbar, .main {
    margin-left: 15%;
    padding: 0 2.5%;
}

/*
.head{
    grid-column:2;
    grid-row: 1;
}

.toolbar{
    grid-column:2;
    grid-row: 2;
}

.main{
    grid-column:2;
    grid-row: 3;
}
 TOGGLE START 
.mini{
    grid-template-columns: 80px auto;
    grid-template-rows: 75px auto auto;
}*/
.mini .sidebar {
    width: 85px;
}
.mini .btn {
    min-width: unset;
}
.mini .logoimg, .mini .role, .mini .navi--link, .mini .navi--sub-tree, .mini .user span, .mini .user h3, .mini .btn-text{
    display:none;
}

.mini .logo{
    text-align:center;
}

.mini .menubutton{
    float:none;
}

.mini .navi--chapter {
    padding: 1em;
    padding-left: calc(1em - 5px);
}
.mini .navi--chapter a span{
    margin: auto;
    display: block;
}


.mini .navi--chapter .fa{
    margin-top:5px;
}

.mini .btn-logout {
    width: 4em;
    height: 3em;
    padding: 10px;
    margin: auto;
}
.mini .btn-logout a {
    padding: 15px 12px 15px 14px;
}

.mini .btn-logout .fa{
    margin-right:0;
    float:none;
    font-size: 22px;
}
.mini div#auftraege_filter {
    float: left;
    margin-left: 15px;
}
.single .mini .main {
    /*grid-row: 2;*/
}

#tabcontent {
    width: 80%;
}
.main.single {
    width: 75%;
}


/* TOGGLE END */

/* GRID END */

/* LOGO START */

.logoimg{
    float:left;
}

.logoimg img{
    width:46px;
}

.role{
    color: #fff;
    font-size:1.3em;
    line-height: 50px;
    margin-left: 10px;
}

.menubutton{
    float:right;
}

.toggle-btn{
    border:none;
    background:none;
    cursor:pointer;
    outline: none;
    padding: 1px 12px;
}

.toggle-btn span{
    color: #fff;
    line-height: 46px;
    margin-right: 0;
}

/* LOGO END */

.user-name{
    float:right;
    margin-top: 5px;
    margin-right: 5px;
}

/* MENU START */

ul{
    list-style-type: none;
}

.navi--tree{
    padding:0;
    margin:0;
    text-align:left;
}

.navi--sub-tree{
    padding-left:3.5em;
    font-size: 0.875em;
    line-height:1.5em;
}

.navi--chapter{
    min-height:35px;
    border-top:1px solid darkgray;
    padding: 1em 0.5em;
    border-left:4px solid var(--dunkelblau);
}

.span--link{
    vertical-align: middle;
}

.navi--chapter:hover > span, .navi--chapter:hover > a, .navi--sub-link:hover{
    color:#fff;
}

.navi--chapter.is-active, .navi--chapter.is-active:hover, .navi--chapter:hover{
    border-left: 4px solid var(--hellblau);
}

.navi--link, .navi--sub-link, .navi--chapter a{
    text-decoration:none;
    color: var(--grau);
}

.navi--link{
    font-size: 1.125em;
    font-weight: 600;
}
.navi--chapter .fa{
    margin-right:0.25em;
}

.is-active, .user h3, a.is-active{
    color: #fff;
}

/* MENU END */

/* RIGHT START */
/*.head, .toolbar, .main{
    margin-left: 15%;
}*/


/* FUNCTIONS START */

h4{
    margin: 0 0 10px 0;
}

.func--datepicker{
    float:left;
}

.func--datepicker .btn .fa{
    padding-right: 5px;
}



.form-date > .btn{
    margin-left:1em;
}

.form-date > input[type=date]{
    border-style: groove;
    height: 35px;
    width:120px;
    padding-left:10px;
    margin: 0 auto;
    font-size:1em;
    font-family:'Source Sans Pro', sans-serif;
    text-transform:uppercase;
    border: 1px solid var(--hellblau);
}
.form-date > select,#example_wrapper select {
    border-style: groove;
    height: 35px;
    width:auto;
    padding:0 5px;
    margin: 0 auto;
    font-size:1em;
    border: 1px solid var(--hellblau);
}

.form-date > input[type=date]::-webkit-inner-spin-button{ 
    display: none; 
}

.form-date > input:nth-child(2){
    border-radius: 6px 0 0 6px;
}

.form-date > input:nth-child(3){
    border-radius: 0 6px 6px 0;
    margin-left: -6px;
}

.btn {
    min-width: 130px;
    padding: 0 25px;
    height:39px;
    background-color: var(--hellblau);
    color: #fff;
    font-size:1em;
    border-radius: 6px;
    border:none;
    margin-right: 15px;
}
.btn span {
    margin-left: 5px;
}
.btn--rnd{
    width: 40px;
    height: 40px;
    border-radius:50px;
    background-color: var(--hellblau);
    color: #fff;
    border: none;
    font-size: 1.3em;
    display: inline-block;
    margin-right: 10px;
}

.btn--rnd span{
    margin: 0;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    display: table-cell;
}

.btn:hover, .btn--rnd:hover{
    cursor: pointer;
    background: #056082;
}

.btn.style_0, .btn--rnd.style_0 {
    background-color: var(--dunkelblau);
}
.func--datepicker select.date {
    height: 36px;
    margin-right: 20px;
    width: 125px;
} 

.dataTables_length select {
    height: 36px;
    margin-right: 20px;
    width: 125px;
    border-radius: 6px;
} 
table.dataTable thead th, table.dataTable thead td , table.dataTable tfoot th, table.dataTable tfoot td {
    padding: 10px;
}

.func--filter{
    float:left;
    width: 75%;
}

.func--functions{
    float: left;
    width: 25%;
    right: 0;
    z-index: 10000;
}

.func--functions ul{
    margin-top:0;
    padding:0;
}

.func--functions li{
    float: left;
    margin-right: 3px;
}

/* FUNCTIONS END */
/* MAIN START*/
.main{
    overflow-x: auto;
    margin-bottom: 1em;
    padding: 2.5%;
    position: relative;
    width: 80%;
}

.main li a {
    color: #000;
}

.main input[type=checkbox]{
    float:left;
}

.main table{
    text-align:left;
    white-space:nowrap;
}

.main table {
    display: inline-table;
    padding: 0;
    width: 100%;
}

.mini .head, .mini .toolbar, .mini .main {
    margin-left: 85px;
    width: calc(100% - 5% - 85px);
}


#changeData table[aria-describedby="example_info"] {
    border: 2px solid var(--hellblau);
}
.zugeordnet table#auftraege tbody:hover,
.inArbeit table#auftraege tbody:hover {
    cursor: copy;
}

table#auftraege tbody tr:hover {
    filter: brightness(125%);
}
.dataTables_filter ::-webkit-input-placeholder, .dataTables_filter ::-moz-placeholder, .dataTables_filter :-ms-input-placeholder{
    color: #929292;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    border-color: #eee;
}

.dataTables_wrapper .dataTables_filter input {
    border-style: groove;
    border-radius: 6px;
    height: 35px;
    width:auto;
    padding:0 5px;    
    font-size:1em;
    border: 1px solid var(--hellblau);
}
.dataTables_wrapper {
    padding-bottom: 40px;    
}
#example_wrapper select {
    margin: 0 5px;  
}
.dataTables_wrapper .dataTables_info {
    float: right;
}

.dataTables_wrapper .dataTables_paginate {
    float: left;
}
.clickable {
    cursor: pointer;
}
table.dataTable.display tbody tr.darkred {
    background: darkred;
    color: #fff;
}
table.dataTable.display tbody tr.red {
    background: red;
    color: #fff;
}
table.dataTable.display tbody tr.orangered {
    background: orangered;
    color: #fff;
}
table.dataTable.display tbody tr.yellow {
    background: yellow;
}
table.dataTable.display tbody tr.greenyellow {
    background: greenyellow;
}

.dataTables_wrapper .dataTables_filter {
    float: right;

}

.main.pdf a.btn {
    padding: 8px 6px;
    display: inline-block;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
}
.main.pdf a {
    float: left;
    color: #000;
}
.main.pdf a.label {
    min-width: 250px;
}
.main.pdf table {
    width: auto;
}

.main.pdf table tr {
    height: 60px;
}
.main.pdf li {
    margin-bottom: 20px;
}
/* Modal */
.assign-employee, .change-status {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    padding: 12.5% 25%;
    z-index: 1001;
}
.assign-employee span.content, .change-status span.content {
    background-color: var(--hellblau);
    width: 50%;
    display: inherit;
    padding: 25%;
    text-align: center;
}
.assign-employee span.close, .change-status span.close {
    float: right;
    color: #fff;
    margin-right: 15px;
    margin-top: 10px;
    z-index: 1000;

}
.assign-employee span.close::before, .change-status span.close::before {
    content: "\f00d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;    
    font-size: 25px;
}
.assign-employee select, .change-status select {
    height: 40px;
    margin-right: 15px;
    min-width: 200px;
}

.assign-employee input[type="submit"], button.btn-status {
    background: #fff;
    border: 0;
    height: 40px;
    border-radius: 5px;
    background-color: var(--dunkelblau);
    padding: 0 15px;
    color: #fff;
}
.modal-bg {
    width: 100%;
    background: rgba(0,0,0,0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    height: 100%;
}
#changeData table th:nth-child(1){
    padding: 8px 10px;
}

#changeData .btn-pdf, #changeData .btn-csv, #changeData .btn-delete, #changeData .btn-edit {
    display: none;
}
/* MAP START */
.map-box{
    position:relative;
}

.map, .map-info, .map-info--detail, .map-info--detail p, .map-info--link{
    float:left;
}

.map-info{
    float:right;
    position:absolute;
    right:0;
}

.map svg{
    width:60vw;
}
.map-info--detail{
    border: 2px solid var(--hellblau);
    padding: 0.5em;
}

.map-info--header{
    color:#fff;
    background: var(--hellblau);
    font-size: 1.5em;
    padding: 0.3em;
}

.map-info--link{
    background-color: var(--hellblau);
    color: #fff;
    font-size: 1em;
    border-radius: 4px;
    border: none;
    padding: 0.5em;
}

.state{
    fill: var(--dunkelblau);
    stroke: var(--hellblau);
}

.state:hover, .state:active{
    fill: var(--hellblau);
    cursor: pointer;
}

/* MAP END */
.login {
    background-color: var(--hellblau);
}
.login .wrapper {
    display: block;    
    height: auto;
    color: #000;
}
.login .main {
    overflow-x: auto;  
    padding: 5%;
}
.login .main img {
    margin: auto;
    display: block;
    margin-bottom: 70px;
}
.login form {

    font-size: 26px;
    width: 500px;
    margin: auto;
}
.login form > label {
    display: block;
    margin-left: 5px;
    position: absolute;
    border-bottom: 1px solid;
    color: var(--hellblau);
    width: 490px;
    font-size: 18px;
}

.login form > input {  
    width: 96%;
    border-radius: 6px;
    margin-bottom: 50px;
    height: 40px;
    border: 0;
    font-size: 30px;
    padding: 30px 2% 10px;
    -webkit-box-shadow: 5px 5px 10px 0px rgba(33,79,96,.5);
    -moz-box-shadow: 5px 5px 10px 0px rgba(33,79,96,.5);
    box-shadow: 5px 5px 10px 0px rgba(33,79,96,.5);  
}
.login form > input[type=submit] {
    width: 100%;
    background-color: var(--dunkelblau);
    color: #fff;
    height: 60px;
    margin-top: 30px;
    font-size: 25px;
    color: var(--hellblau);
    padding-top: 10px;
    cursor: pointer;
}

.login form strong {
    color: red;
    text-align: center;
    display: block;
}
.login .head, .login .main {
    margin-left: 0; 
}
.login .main {
    width: 100%;
    padding: 0;
}

.logout{
    margin-top:20px;
}

.logout span.fa{
    float:left;
}


/* Import */

.import .row.hinweis-import {
    margin-top: 30px;
    display: block;
    font-style: italic;
}

.import .main .row {
    margin-bottom: 10px;
    display: inline-block;
}

.row.importantNote{
    border: 1px solid var(--dunkelblau);
    display: inline-block;
    border-radius: 1em;
    margin-bottom: 10px;
}

.row.importantNote p,h3{
    padding-left: 20px;
}

/* MAIN END*/

/* RIGHT END */

@media screen and (max-width: 800px){
    .func--datepicker{
        display:none;
    }
}

/* Startseite */

.greeting{
    margin-bottom: 2em;
}

.greeting h2{
    margin:0;
}

/* Aufträge - Single Page */
label.key {
    width: 20%;
    display: inline-block;
}

/* Tabs */
#tablist {
    list-style: none;
    margin: 0;
    padding: 0;
}

#tablist li {
    background-color: var(--dunkelblau);
    border: 1px solid var(--dunkelblau);
    border-bottom: none;
    border-radius: 0.5em 0.5em 0 0;
    display: inline;
    font-weight: bold;
    height: 1em;
    padding: 0.5em 0.5em 10px;
    color:#ccc;
    font-size: 15px;
}

#tablist li:focus,
#tablist li:hover {
    background-color: var(--hellblau);
    border: 1px solid var(--hellblau);
    cursor: pointer;
    color:#fff;
}

#tablist li[aria-selected="true"] {
    background-color: var(--hellblau);
    border: 1px solid var(--hellblau);
    padding: 0.5em 0.5em 11px;
    color:#fff;
}

#tabcontent, .main.single {
    background-color: #eee;
    border: 1px solid var(--dunkelblau);
    margin-top: 10px;
    padding: 2em 3em 4em;
    display: inline-block;
}
.main.single { 
    margin-left: calc(15% + 3em);
}

[aria-hidden="true"] {
    display: none !important;
}

[aria-hidden="false"] {
    display: block;
}

#tabcontent table{
    font-size: 1.2em;
}
#tabcontent thead th{
    text-align:center;
}

#tabcontent tbody td{
    min-width:2em;

    height: 2em;
    padding:.2em;
}

#tabcontent tbody a{
    background: var(--dunkelblau);
    padding: .5em;
    border-radius:5px;
    width: 2em;
    display: block;
    text-align: center;
}

#tabcontent tbody a:hover{
    background: var(--hellblau);
}
#tabcontent fieldset span {
    width: 150px;
    display: inline-block;
}

/* Formulare */
form label {
    height: 36px;
    float: left;
    font-size: 1.2em;
}
.row {
    width: 100%;
    display: table-row;
}
span.formfield-flex {
    display: inline-table;
    float: left;
}
span.formfield-half {
    width: 48%;
    display: block;
    float: left;
    margin-right: 2%;
}
span.formfield-full {
    width: 100%;
    display: block;
}
.formular form > div,
.formular form .sperrversuche > div {
    margin: 25px 0;
    display: table;
    width: 100%;
}
.formular form > div[aria-hidden="true"],.formular form .row[aria-hidden="true"], span.formfield-full[aria-hidden="true"] {
    display: none;
}
.formular input[type=submit] {
    margin-top: 20px;
}
.formular input[type=text], .formular input[type=email], .formular input[type=password],.formular input[type=date], .formular input[type=time], .formular input[type=file], .formular select {
    border: 1px solid #ddd;
    height: 40px;
    width: 98.5%;
    width: -webkit-fill-available;
    padding: 0 10px;   
    margin-bottom: 25px;
}
input:disabled {
    background: #ddd;
    cursor: not-allowed;
}
.disabletermin {
    user-select: none;
    background: #ddd;
    cursor: not-allowed;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}
.formular p {
    font-size: 1.2em;
}
.userData {
    font-style: italic;
    color: var(--dunkelblau);
}
#tabcontent input[type=checkbox] {
    width: 3%;
    height: 30px;
}
.rueckmeldung-zustellung label, .rm-rueckmeldung-zustellung label, .abrechnungsgrund label {
    width: 96%;
    line-height: 36px;
    height: 40px;
    white-space: nowrap;
}
.zustellung-an-dritten-zusatz {
    margin-top: 40px;
}

.zustellung-an-dritten-zusatz[aria-hidden="true"] {
    display: none !important;
}
.zustellung-an-kunden[aria-hidden="true"] {
    display: none !important;
}
.zustellung-an-dritten-zusatz .row {
    display: unset;
}
.forderungseinzug th {
    width: 300px;
    font-weight: normal;
}
.termine .btn--rnd.fa {
    margin-top: 35px;
}
.termine .btn--rnd.fa:before{
    padding: 10px;
    line-height: 40px;
}
/*Unterschrift*/
.sigPad {
    position: relative;
    width: auto;
}
.sigWrapper {
    height: 150px; /* Change the height */
    width: 400px;
    position: relative;
}
.sigNav li.drawIt { display: none; }
.sigWrapper a {
    position: absolute;
    z-index: 1000;
    bottom: 5px;
    right: 5px;
    color: var(--dunkelgrau);
}

.sigWrapper.sig {
    display: block;    
}
.sigWrapper img, .sigWrapper canvas {
    width: 399px;
    margin-left: 1px;
	background-color: #fff;
}
.sigWrapper.current {
    border-color: #ddd;
}
.sigPad label {
    color: var(--grau);
}

@media screen and (max-width: 1600px){
    .sidebar {
        width: 20%;  
    }
    .head, .toolbar, .main {
        margin-left: 20%;
    }
    .main {
        width: 75%;
    }
}


@media screen and (max-width: 1199px){
    .sidebar {
        width: 220px;
    }
    .logoimg img {
        width: 40px;
    }
    .head, .toolbar, .main {
        margin-left: 220px;
        width: calc(100% - 5% - 220px);
    }
    .dataTables_wrapper .dataTables_filter#user_filter {
        margin-left: 15px;

    }
    .dataTables_wrapper .dataTables_filter {
        float: left;

    }
    #tabcontent, .main.single {
        width: 85%;
    } 
    button.btn.filter {

        margin-bottom: 10px;
    }
    .func--filter {
        margin-bottom: 10px;
    }
    .func--functions {
        position: initial;
        width: 100%;
    }

    .menu li .fa {
        font-size: 1.4em;
    }
    .menubutton .fa {
        font-size: 1.8em;
    }

    .navi--sub-tree {
        padding-left: 2.4em;  
    }
}
@media screen and (max-width: 991px){
    #tabcontent, .main.single {
        width: auto;
        display: block;
    }

}
@media screen and (max-width: 767px){
#tablist li {
 
    font-size: 16px;
}
    .func--filter form {
        width: 100%;
    }
    button.btn.filter {
        width: 100%;
    }
    .func--functions {
        float: left;        
    }
    .dataTables_wrapper .dataTables_length {
        margin-bottom: 10px;
    }
    .mini div#auftraege_filter {

        margin-left: 0;
        width: 100%;
    }
    .dataTables_wrapper .dataTables_info {
        float: left;
        margin-bottom: 10px;
    }
    .main table {
        margin-top: 0px; 
        margin-bottom: 0px; 
    }

    .single .mini ul#tablist li {
        display: block;
        width: auto;
        margin-bottom: 5px;
        border-radius: 0.5em;
    }
    h1 {
        font-size: 1.7em;
    }
}