/* ************************************************************************************************
// 06.01.2024
// utf-8 üöä
// ***********************************************************************************************/


/* ***********************************************************************************************
// MAIN-STYLE
*************************************************************************************************/
html {
    overflow-y: scroll;
}
body {
    font-family: 'Open Sans', sans-serif, 'FontAwesome';
    font-size: 14px;
    position: relative;
    min-height: 100%;
    padding-right:0px !important;
    margin-right:0px !important;
    background-color:#f7f7f7;
    color:#73879c;
}
a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}
/* ***********************************************************************************************
// sidebar
*************************************************************************************************/
#sidebar {
    min-width: 220px;
    max-width: 220px;
    background-color: #2a3f54;
    color: #fff;
    font-size:1.0em;
    transition: all 0.3s;
}
#sidebar.active {
    margin-left: -220px;
}
#sidebarCollapse {
    background-color:#2a3f54;
    color:#FFFFFF;
    margin-left:-24px;
    border:0;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}
#sidebar .sidebar-header {
    padding: 0;
}
#sidebar .sidebar-header img {
    height:50px;
}
#sidebar .sidebar-headersub {
    margin-top: 20px;
}
#sidebar .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 20px 0;
}
#sidebar a i.fa-solid,
#sidebar a i.fa-brands {
    margin-right:10px;
}
#sidebar a span.fa-solid {
    float: right;
    text-align: center;
    margin-top: 5px;
    min-width: inherit;
    color: #c4cfda;
}
#sidebar ul.firstlevel {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}
#sidebar ul p {
    color: #fff;
    padding: 10px;
}
#sidebar ul li a {
    padding: 10px;
    display: block;
}
#sidebar ul li a:hover {
}
#sidebar ul li.active>a,
#sidebar a[aria-expanded="true"] {
}
#sidebar a[data-toggle="collapse"] {
    position: relative;
}
#sidebar .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
#sidebar ul ul a {
    padding-left: 30px !important;
}
/* ***********************************************************************************************
// sidebar breakpoint
*************************************************************************************************/
@media (max-width: 992px) {
    #sidebar {
        margin-left: -220px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
    #sidebarCollapse {
        margin-left:-25px;
        border:1px;
    }    
    #content_page_holder {
        min-height:0px;
    }
}
/* ***********************************************************************************************
// topbar
*************************************************************************************************/
#topbar.navbar {
    padding: 0px 10px;
    background-color: #ededed;
    border: none;
    border-radius: 0;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
#topbar.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}
#topbar .user-profile img {
    height:50px;
}
#topbar ul,
#topbar li {
    list-style-type:none;
}
#topbar .dropdown-menu {
    padding:15px;
}
#topbar .dropdown-menu i.fa-solid {
    margin-right:15px;
}
/* ***********************************************************************************************
// content
*************************************************************************************************/
#content {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
}
#content_page {
    width: 100%;
}
#content_page_holder {
    width: 100%;
    padding: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: 90vh;
}
/* ***********************************************************************************************
// footer
*************************************************************************************************/
footer {
    padding-left:20px;
    padding-top:15px;
    width:100%;
    height:50px;
    border-top:1px solid #C0C0C0;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 10%);
}
/* ************************************************************************************************
// Bootstrap Anpassungen
**************************************************************************************************/
.btn-light {
    color:#73879c;
    border:1px solid #C0C0C0;
}
.btn-group .btn-outline-secondary {
    border: 1px solid #ced4da
}
.btn-group > .btn-check:checked+.btn {
    background-color: #e6e6e6;
    color: #6c757d;
}
.form-label {
    margin-bottom: 0rem;
}
.btn-group {
    flex-wrap:wrap;
}
.btn-group label {
    margin:0;
}
/* ***********************************************************************************************
// cards
*************************************************************************************************/
.card.white .card-header,
.card.white .card-footer {
    background-color: white;
}
/* ************************************************************************************************
// widgets
**************************************************************************************************/
.widget_visitors {
    background-color:#FFFFFF;
    padding-top:15px;
    padding-bottom:15px;
}
.widget_visitors .col-xs-6:not(:last-of-type)  {
    border-right:2px solid #A0A0A0;
}
.widget_visitors .count {
    background-color:#FFFFFF;
    font-size:3em;
}
/* ************************************************************************************************
// card pageheader
**************************************************************************************************/
.card.pageheader {
    margin-bottom: 15px;
}
.card.pageheader .row > .col > h2 > i.fa-solid {
    margin-right: 15px;
}
.card.pageheader ul.levelone {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}
.card.pageheader ul.levelone,
.card.pageheader ul.levelone > li { 
    display: inline; 
}
.card.pageheader ul.levelone > li:not(:last-of-type) { 
    margin-right:($spacer * .5);
}
.card.pageheader ul.levelone .dropdown-menu {
    min-width:300px;
    padding:15px 15px 7px 15px;
}
.card.pageheader ul.levelone .dropdown-menu li {
    padding-bottom:7px;
}
.card.pageheader ul.levelone .dropdown-menu li a {
    color:#73879c;
    margin-right:5px;
}
.card.pageheader ul.levelone .dropdown-menu .divider {
    border-top:1px dashed #212529;
}
.card.pageheader a:not(.disabled) .fa-plus {
    color: #0d6efd;
}
.card.pageheader a:not(.disabled) .fa-star,
.card.pageheader a:not(.disabled) .fa-comment {
    color: #e2b007;
}
.card.pageheader a:not(.disabled) .fa-trash {
    color: #dc3545;
}
.card.pageheader a:not(.disabled) .fa-trash-can-arrow-up {
    color: #fd7e14;
}
.card.pageheader a:not(.disabled) .fa-clone {
    color: #0dcaf0;
}
.card.pageheader a:not(.disabled) .fa-cog,
.card.pageheader a:not(.disabled) .fa-retweet,
.card.pageheader a:not(.disabled) .fa-file-export {
    color: #6610f2;
}
.card.pageheader a .fa-xmark,
.card.pageheader a .fa-xmark-square {
    color: #dc3545;
}
.card.pageheader .state_saved {
    margin-left:20px;
    padding:2px 5px 2px 5px;
    background-color:#198754;
    color:white;
    opacity:0;
    float:left;
}
.card.pageheader .state_copied {
    margin-left:20px;
    padding:2px 5px 2px 5px;
    background-color:#0dcaf0;
    color:white;
    opacity:0;
    float:left;
}
.card.pageheader .state_restored {
    margin-left:20px;
    padding:2px 5px 2px 5px;
    background-color:#6610f2;
    color:white;
    opacity:0;
    float:left;
}
.card.pageheader .state_saved.show,
.card.pageheader .state_copied.show,
.card.pageheader .state_restored.show {
    opacity:1;
}
/* ************************************************************************************************
// nav-tabs
**************************************************************************************************/
.nav-tabs .nav-item button {
    font-size:1.25rem;
    padding-left:2.0rem;
    padding-right:2.0rem;   
}
/* ***********************************************************************************************
// datatable table
*************************************************************************************************/
table.isDataTable>tbody>tr:hover>* {
    background-color:rgba(13, 110, 253, 0.100);
}
table.isDataTable>tbody>tr.inaktiv td,
.card .card-header.inaktiv {
    text-decoration:line-through;
}
/* ***********************************************************************************************
// card pagecontent
*************************************************************************************************/
.card.pagecontent {
    margin-bottom: 15px;
}
.card.pagecontent .card-header {
    background-color:#FFFFFF;
}
/* ***********************************************************************************************
// card pagecontent table
*************************************************************************************************/
.card.pagecontent table td {
    color:#73879c;
}
.card.pagecontent table a.btn {
    margin-left:5px;
}
.card.pagecontent table a.BTN_vermieterwaehlen {
    margin-left:10px;
}
.card.pagecontent table a.btn:not(.disabled) .fa-solid {
    color:#0d6efd;
}
.card.pagecontent table a.btn:not(.disabled) .fa-solid.fa-trash {
    color: #dc3545;
}
.card.pagecontent .table > tbody > tr.deleted td,
.card.pagecontent .table > tbody > tr.deleted td > i {
    text-decoration: line-through;
    color:#dc3545 !important;
}
/* ***********************************************************************************************
// placeholder
*************************************************************************************************/
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #FDFDFD;
    opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #FDFDFD;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: #FDFDFD;
}
select option.placeholder {
      color: #FDFDFD;
}
/* ***********************************************************************************************
// is-valid/is-invalid/feeback/warning (erweiterung zu bootstrap)
*************************************************************************************************/
.input-bereich.is-valid {
    border: 1px solid green;
}
.input-bereich.is-valid:focus {
    border:0;
}
.btn-group.has-validation.is-valid,
.btn-group.has-validation label.is-valid,
.input-group.has-validation.is-valid,
.input-group.has-validation label.is-valid {
    border-color: green;
    /*
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    */
}
.btn-group.has-validation.is-valid:focus,
.btn-group.has-validation label.is-valid:focus,
.input-group.has-validation.is-valid:focus,
.input-group.has-validation label.is-valid:focus {
    border-color: green;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.input-bereich.is-invalid {
    border: 1px solid #dc3545;
}
.input-bereich.is-invalid:focus {
    border:0;
}
.btn-group.has-validation.is-invalid,
.btn-group.has-validation label.is-invalid,
.input-group.has-validation.is-invalid,
.input-group.has-validation label.is-invalid {
    border-color: #dc3545;
    /*
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    */
}
.btn-group.has-validation.is-invalid:focus,
.btn-group.has-validation label.is-invalid:focus,
.input-group.has-validation.is-invalid:focus,
.input-group.has-validation label.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.invalid-feedback {
    margin:0;
    display:block;
}
.info-feedback {
    font-style:italic;
    font-size:0.9em;
    margin-bottom:0;
}
.warning-feedback {
    border:1px solid #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    font-style:italic;
    font-size:0.9em;
    margin-bottom:0;
}
.error-feedback {
    color:#dc3545;
    font-style:italic;
    font-size:0.9em;
    margin-bottom:0;
}
/* ***********************************************************************************************
// input & label
*************************************************************************************************/
a.disabled,
.btn.disabled,
a:disabled,
.btn:disabled {
    cursor:inherit;
}
label {
    font-weight:bolder;
    margin-top:15px;
}
p.labelsub {
    margin-bottom:0;
    font-style: italic;    
}
.btn-light.disabled {
    color: #C0c0C0;
    border:1px solid #C0C0C0;
}
select option:disabled {
    font-style: italic;
}
.form-control.is-info {
    border-color: #bee5eb !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%230c5460'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%230c5460' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
/* ***********************************************************************************************
// checkbox
<div class="form-check checkbox-xl">
<input class="form-check-input" type="checkbox"
*************************************************************************************************/
.form-check .checkbox-xl .form-check-input {
    scale: 2.5;
}
.form-check .checkbox-xl .form-check-label {
    padding-left: 25px;
}
/* ***********************************************************************************************
// input-fake
*************************************************************************************************/
.input-fake {
    background-color:transparent;
    border-color:transparent;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	cursor: default !important;
    padding-left:0;
    color: #212529;
}
.input-fake::placeholder {
    color:transparent;
}
/* ***********************************************************************************************
// PRINT STYLES
*************************************************************************************************/
@media print {
    .col-print-none {
        display:hidden;
    }    
    .col-print-1 {
        flex: 0 0 8.33333333%;
        max-width: 8.33333333%;
    }    
    .col-print-2 {
        flex: 0 0 16.6666666%;
        max-width: 16.6666666%; 
    } 
    .col-print-3 {
        flex: 0 0 25%;
        max-width: 25%; 
    } 
    .col-print-4 {
        flex: 0 0 33.33333333%;
        max-width: 33.33333333%;
    } 
    .col-print-5 {
        flex: 0 0 41.66666666%;
        max-width: 41.66666666%;
    } 
    .col-print-6 {
      flex: 0 0 50%;
      max-width: 50%;
    } 
    .col-print-7 {
      flex: 0 0 58.33333%;
      max-width: 58.33333%; 
    }
    .col-print-8 {
      flex: 0 0 66.66667%;
      max-width: 66.66667%; 
    }
    .col-print-9 {
      flex: 0 0 75%;
      max-width: 75%; 
    }
    .col-print-10 {
      flex: 0 0 83.33333%;
      max-width: 83.33333%; 
    }
    .col-print-11 {
      flex: 0 0 91.66667%;
      max-width: 91.66667%;
    }
    .col-print-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
}