html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

html, body {
    margin: 0;
    height: 100%;
}

body,
body .table {
    font-family: 'Lato', sans-serif !important;
    color: #414141 !important;
}

.base-font {
    font-family: 'Lato', sans-serif !important;
}

.base-color {
    color: #414141 !important;
    font-weight: 500 !important;
}

.table-dark {
    color: inherit;
}

.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
    border-color: #eaf2fb;
}

.table .thead-dark th {
    color: inherit;
    border-color: #E6E9EC;
}
.table .thead-custom th {
    background-color: #004b93 !important;
    color: white !IMPORTANT;
}

.table {
    --bs-table-striped-bg: #E6E9EC !IMPORTANT;
}

.table-custom {
    --bs-table-bg: #E6E9EC !IMPORTANT;
}

.navbar-custom {
    background-color: rgba(255, 255, 255, 0.90);
}

.nav-link-tab-custom {
    color: #414141 !important;
}

.nav-link-custom {
    color: #414141 !important;
}

.btn-custom-nav {
    background-color: #E6E9EC !IMPORTANT;
    border-color: #E6E9EC !important;
    color: #0d2745 !IMPORTANT;
}

.btn-custom {
    background-color: #4A4A49 !important;
    color: white !IMPORTANT;
}

.btn-custom-inverse-with-margin {
    border-color: #f36f21 !IMPORTANT;
    color: #f36f21 !IMPORTANT;
    margin: 5px;
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 75, 147, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.footer {
    background-color: #004b93 !important;
}

.login-section-div {
    background-color: #ffffff;
    padding: 50px 50px 70px 50px !important;
    border-radius: 2rem;
    height: 100%;
}

.branded-header {
    background-color: #ffffff !important;
    z-index: 99;
    position: relative;
}

.body-container {
    flex: 1;
    padding: 20px;
}

.white,
.white:hover {
    background-color: #ffffff !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #ffffff !important;
}

.orderTable_info {
    color: #004b93 !important;
}

.footer.text-muted,
.footer .text-muted,
.branded-footer {
    color: #FFFFFF !important;
    text-decoration: none;
}

.container {
    color: #004b93 !important;
}

.buttons-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

:root {
    --brand-blue: #0d2745;
    --brand-orange: #f36f21;
    --brand-muted: #E6E9EC;
    --brand-link: #44697d;
    --brand-secondaryblue: #3C6A83;
    --brand-textmuted: #8898a1;
}


.signature-pad-btn {
    line-height: 1.5 !important;
    font-size: 1rem !important;
    font-weight: 300 !important;
    border: 1px solid transparent !important;
    padding: 0.375rem 0.75rem !important;
}

/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
.task-table table {
    border-collapse: collapse;
}

@media only screen and (max-width: 992px) {
    /* Force table to not be like tables anymore */
    .task-table table, .task-table thead, .task-table tbody, .task-table th, .task-table td, .task-table tr,
    .timerecords-table table, .timerecords-table thead, .timerecords-table tbody, .timerecords-table th, .timerecords-table td, .timerecords-table tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .task-table tbody th, .task-table thead tr,
    .timerecords-table tbody th, .timerecords-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .task-table tr,
    .timerecords-table tr {
        margin: 0 0 1rem 0;
    }

    .task-table tr:nth-child(odd) {
        background: #ccc;
    }

    .task-table td {
        border: none !important;
        position: relative !important;
        padding-left: 50% !important;
        white-space: normal !important;
    }

    .task-table td:before {
        content: attr(data-label);
        position: absolute;
        top: 10px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: normal;
    }

    .timerecords-table .form-control {
        width: 85% !important;
    }

    table.timerecords-table tr td:first-child {
        border-top: none !important;
    }

    .timerecords-table input.picker[type="date"] {
        position: relative;
    }

        .timerecords-table input.picker[type="date"]::-webkit-calendar-picker-indicator {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            padding: 0;
            color: transparent;
            background: transparent;
        }

    .timerecords-table .form-control {
        width: 70%;
    }

    .timerecords-table td {
        border: none !important;
        position: relative !important;
        padding-left: 50% !important;
        white-space: normal !important;
    }

    .timerecords-table-dropdown {
        background-color: #e6e6e6 !important;
    }

    .timerecords-table td:before {
        position: absolute;
        
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: normal;
        margin: auto;
    }

    .timerecords-table td:nth-of-type(1):before {
        content: "Datum";
    }

    .timerecords-table td:first-child:after {
        background-image: url('../images/Icon_date_Picker.svg');
        content: "";
        background-size: 40px 40px;
        position: absolute;
        display: inline-block;
        top: 10px;
        width: 40px;
        height: 40px;
        margin-left: 41%;
        background-repeat: no-repeat;
    }

    @media only screen and (max-width: 768px) {
        .timerecords-table td:first-child:after {
            margin-left: 39%;
        }
    }

    @media (min-width: 992px) {
        .timerecords-table td:first-child:after {
            margin-left: 35%;
        }
    }

    .timerecords-table td:nth-of-type(2):before {
        content: "Zeit in h fakturierbar";
    }

    .timerecords-table td:nth-of-type(3):before {
        content: "Zeit in h nicht fakturierbar";
    }

    .timerecords-table td[attrName="description"]:before {
        content: "Tätigkeitsbeschreibung fakturierbar";
        word-break: break-word;
    }

    .timerecords-table td[attrName="placeOfServices"]:before {
        content: "Leistungsort";
    }

    .timerecords-table td[attrName="duration_fixed_price"]:before {
        content: "Zeit in h fakturierbar";
    }

    .timerecords-table td[attrName="nonBillableDuration"]:before {
        content: "Zeit in h nicht fakturierbar";
    }

    .timerecords-table td[attrName="nonBillableDurationComment"]:before {
        content: "Tätigkeitsbeschreibung n. fakturierbarer Zeit";
    }

    .timerecords-table input.picker[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        color: transparent;
        background: transparent;
    }
}

.timerecords-table input,
.timerecords-table textarea,
.timerecords-table select {
    padding: 0 15px;
    background-color: #e6e6e6 !important;
    border: none;
    border-radius: 2rem;
    font-size: 17px;
    width: 100%;
}

.timerecords-table textarea {
    padding: 6px 15px;
}

.timerecords-table input.picker[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    color: transparent;
    background: transparent;
}

.timerecords-table input.picker[type="date"] {
    position: relative;
    width: 80%;
}

.timerecords-table-dropdown {
    background-color: #e6e6e6 !important;
}

@media only screen and (max-width: 768px) {
    .timerecords-table td:first-child:after {
        margin-left: 39%;
    }
}
@media (min-width: 992px){
    .timerecords-table td:first-child:after {
        margin-left: 35%;
    }

    .timerecords-table td:first-child input:first-child:after {
        background-image: url('../images/Icon_date_Picker.svg');
        content: "";
        background-size: 40px 40px;
        position: absolute;
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-left: 125px;
        margin-top: -36px;
        background-repeat: no-repeat;
    }
}

.custom-modal {
    max-width: 430px !important;
}

.uploadSignatureModal {
    padding-left: 0 !important;
}

.sd-root-modern--mobile .sd-body.sd-body--responsive, .sd-root-modern--mobile .sd-body.sd-body--static {
    padding: 0 !important;
}

.sd-element--with-frame {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    box-shadow: none !important;
    text-align: -webkit-center !important;
}

.sd-body.sd-body--static .sd-body__navigation {
    padding-top: 0 !important;
}

.sd-action-bar.sd-footer.sd-body__navigation.sd-clearfix {
    background-color: #ffffff;
}

@media only screen and (max-width: 470px) {
    .sd-signaturepad.sjs_sp_container {
        width: 331px !important;
    }
}

@media only screen and (min-width: 470px) {
    .sd-signaturepad.sjs_sp_container {
        width: 400px !important;
    }
}

#timeTrackingFormPlaceholder button {
    width: 270px;
}

.form-check-input.rememberMe-input {
    position: relative;
    margin-left: 0;
}

.branded-green-text-color {
    color: #9ec22a !important;
}

.jumbotron {
    background-color: #ffffff !important;
    padding: 0rem 1rem !important;
}

.datatable-cell-border {
    border-top: none !important;
}

#orderTable thead th {
    border-top: none !important;
}

#orderTable > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px white;
}

table.dataTable > thead > tr > th {
    border-bottom: none !important;
}

table.dataTable.no-footer {
    border-bottom: none;
}

.paginate_button.previous {
    transform: rotate(270deg);
}

.paginate_button.next {
    transform: rotate(90deg);
}

table.dataTable.display > tbody > tr.white > td {
    border-top: 3px solid #9ec22a !important;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom: none !important;
}

table.dataTable.no-footer {
    border-bottom: none !important;
}

table.dataTable.row-border > tbody > tr > th, table.dataTable.row-border > tbody > tr > td, table.dataTable.display > tbody > tr > th, table.dataTable.display > tbody > tr > td {
    border-top: none !important;
}

.table th {
    border-top: none !important;
}

.table td {
    border-top: 1px dashed #414141 !important;
}

.task-table {
    position: relative;
    margin-top: -36px;
}

    .task-table th {
        font-weight: 500;
    }

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before {
    position: relative;
    z-index: 1;
}

@media (min-width: 576px) {
    .jumbotron {
        padding: 0rem 2rem;
    }
}

.row-border.datatable-cell-border.sorting {
    font-weight: 500;
}

#orderTable_wrapper .paginate_button {
    color: #004b93 !important;
    border: none;
    background: none;
}

    #orderTable_wrapper .paginate_button:active {
        box-shadow: none;
        border: none;
        background: none;
    }

#orderTable_wrapper .dtr-title {
    font-weight: 500;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.row-border.datatable-cell-border.align-middle.dtr-control:before {
    content: "";
    display: block;
    height: 30px;
    width: 30px;
    background-size: 30px 30px;
    background-image: url(../images/Icon_arrows.svg);
    background-repeat: no-repeat;
}

.title {
    font-weight: 600;
    font-size: 2.5rem;
    word-wrap: break-word;
}

@media (max-width: 576px) {
    .title {
        font-size: 2.0rem;
    }
}

.erp-button {
    background-color: #004b93 !important;
    border-radius: 2.5rem !important;
    width: 270px;
    font-family: 'Lato', sans-serif !important;
    color: #ffffff !important;
    box-sizing: border-box;
}

.erp-button:hover {
    color: #9ec22a !important;
    border: 3px solid #9ec22a !important;
}

.erp-button,
.erp-button:active,
.erp-button:focus {
    border: 3px solid transparent !important;
}

table.dataTable thead > tr > th.sorting:before {
    bottom: 12% !important;
    content: "" !important;
    display: block;
    height: 30px;
    width: 30px;
    background-size: 30px 30px;
    background-image: url(../images/Icon_arrows.svg);
    background-repeat: no-repeat;
    right: 0 !important;
}

table.dataTable thead > tr > th.sorting:after {
    content: "" !important;
}

.picker-image {
    background: none !important;
    padding: 0px;
    right: 130px;
    pointer-events: none;
    width: 35px;
    height: 35px;
    cursor: pointer;
    position: absolute;
    right: 11%;
    transform: translateY(-108%);
}

@media (max-width: 768px) {
    .row.add-save-buttons-container {
        display: block;
    }
}

footer.footer {
    text-align: center;
    padding: 2rem 1rem !important;
}

.project-task-row {
    vertical-align: middle !important;
}

.erp-button.cancel-button {
    background-color: #e1574c !important;
    color: #ffffff !important;
}

.erp-button.yes-button {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

.filter-container {
    margin: 20px;
    display: flex;
    gap: 20px;
}

.no-booking {
    border: 2px solid #000;
}

.select2-selection__choice {
    display: none !important;
}

.colfilter.multi button.btn.dropdown-toggle.btn-light {
    color: #495057;
    background-color: #fff !important;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .colfilter.multi button.btn.dropdown-toggle.btn-light:focus {
        outline: 0 !important;
        box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    }

.card-body {
    padding-bottom: 0;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
}

.text-link-closed {
    color: inherit;
    text-decoration: none;
}

    .text-link-closed:hover,
    .text-link-closed:active {
        color: white;
        text-decoration: none;
    }
.text-link-open {
    color: inherit;
    text-decoration: none;
}

    .text-link-open:hover,
    .text-link-open:active {
        color: black;
        text-decoration: none;
    }

.weekend {
    background-color: lightgray;
}

.holiday {
    background-color: black;
    color: white;
}

.closed {
    background-color: #95c11f;
    color: black;
}

.open {
    background-color: #004b93;
    color: white;
}

.fixed-width-date {
    width: 120px;
    min-width: 120px; 
    max-width: 120px;
}

.personioBooking {
    background-color: #b2d633;
    color: black;
}