.system-information-link {
    position: fixed;
    top: 0;
    margin: auto;
    display: inline-block;
    border-radius: 0 0 10px 10px;
    padding: 5px 25px;
    font-size: 15px;
    box-shadow: 0 0 10px 0px rgba(0,0,0,0.6);
    z-index: 1010;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0%);
    font-size:17px;
    font-weight:600;
}

    .system-information-link:hover {
        box-shadow: 0 0 10px 0px rgba(0,0,0,0.8);
    }

    .system-information-link span,
    .system-information-link i {
        color: #fff;
    }


    .system-information-link.error,
    .modal-content.error .modal-header {
        background-color: red;
    }

    .system-information-link.warning,
    .modal-content.warning .modal-header {
        background-color: yellow;
    }

        .system-information-link.warning *,
        .modal-content.warning .modal-header *,
        .modal-content.warning .modal-body {
            color: #000;
        }

    .system-information-link.information,
    .modal-content.information .modal-header {
        background-color: #3870b5; /*#2061b2;*/
    }

    .system-information-link i{
        margin-left:5px;
    }

    a.disabled {
        pointer-events: none;
        cursor: default;
        color: #888;
        opacity: 0.5;
    }

.document-function-menu a i {
    color: #000;
}

.quick-link-menu-background {
    background-color: rgb(158, 186, 221, 0.9);
}

.setup-mode .quick-link-menu-background {
    display: none;
}

#QuickLinkMenu {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 10px;
    padding-right: 10px;
}

.setup-mode #QuickLinkMenu {
    background-color: rgba(248, 161, 53, 0.8);
    display: none;
}

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

    .hide-link:hover {
        color: inherit;
    }

.quick-link-menu-background .quickLink {
    display: inline-block;
    padding: 2px 10px;
}

    .quick-link-menu-background .quickLink.active,
    .quick-link-menu-background .quickLink:hover {
        background-color: #5686ba;
    }

        .quick-link-menu-background .quickLink.active a,
        .quick-link-menu-background .quickLink:hover a,
        .quick-link-menu-background .quickLink.active span,
        .quick-link-menu-background .quickLink:hover span {
            background-color: transparent !important;
        }

    .quick-link-menu-background .quickLink .link {
        color: #FFF;
    }

    .quick-link-menu-background .quickLink .delete {
        color: #FFF;
    }

#topMenu2 {
    float: right;
}

    #topMenu2 li {
        float: left;
    }

/* IFRAME */
.main-row .iframe-container {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -10px;
}

    .main-row .iframe-container iframe {
        min-height: var(--total-height-minus-menu);
        max-height: var(--total-height-minus-menu);
        width: 100%;
    }

body.show-quick-links .iframe-container iframe {
    min-height: var(--total-height-minus-menu-with-quicklinks);
    max-height: var(--total-height-minus-menu-with-quicklinks);
}

/*********************************************************/
.error-text,
a.error-text i {
    color: red;
}

.for-debugging-only {
    background-color: rgb(255,254,203);
    color: red;
    margin: 50px 0;
    border: 2px solid red;
    opacity: 0.9;
}

.debug-text {
    background-color: rgb(255,254,203);
    color: red;
    display: inline-block;
    border: 2px solid red;
    padding: 2px;
}

.readonly {
    background-color: var(--color-disabled) !important;
    pointer-events: none;
}

    .readonly.hidden-date {
        background-color: #bbbbbb !important;
    }

.fa-blank {
    width: 10px;
    height: 17px;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.icon {
    color: var(--color-icon);
    cursor: pointer;
    font-size: 14px;
}

.icon-large {
    color: var(--color-icon);
    cursor: pointer;
    font-size: 20px;
}

.icon-xl {
    color: var(--color-icon);
    cursor: pointer;
    font-size: 28px;
}

.text-icon {
    font-weight: 500;
    font-family: Calibri;
    font-size: 13px;
    color: #111111;
    background-color: #e5e5e5;
    border-radius: 5px;
    padding: 3px 6px 3px 6px !important;
}

.small-text {
    font-weight: 500;
    font-family: Calibri;
    font-size: 13px;
    color: #111111;
}

.readonly-price, .readonly-metervalue {
    padding: 2px 4px 2px 4px;
    border-radius: 5px;
}

.price-difference {
    font-weight: bold;
    background-color: #a8c1e0;
}

.pointer {
    cursor: pointer;
}

.no-pointer {
    cursor: default !important;
}

.small-header {
    font-weight: 600;
    padding-bottom: 0.5rem !important;
}

.list-header {
    height: 75px;
    padding-bottom: 5px;
}

.main-row {
    min-height: var(--total-height-minus-menu);
    max-height: var(--total-height-minus-menu);
    overflow-y: auto;
    padding-top: 0px;
    /*margin-top: 10px;*/
    padding-top: 10px;
}

.table-total {
    background-color: #bfc0c2;
    font-weight: 500;
    color: black;
}

.dropdown-item:active, .dropdown-item:hover {
    background-color: var(--color-activated);
}

.table-list > thead > tr > th > select,
.table-list > thead > tr > th > select:focus {
    background-color: var(--color-table-header);
    color: white;
}

.table-list > tbody > tr > td,
.table-list > tbody > tr > th,
.table-list > tfoot > tr > td,
.table-list > tfoot > tr > th,
.table-list > thead > tr > td,
.table-list > thead > tr > th {
    vertical-align: middle;
    font-size: 14px;
    padding-left: 5px;
    padding-right: 5px;
    overflow-y: auto;
    font-weight: 500;
    font-family: Calibri;
}

    .table-list > thead > tr > th,
    .table-list > thead > tr > th:after,
    .table-list > tbody > tr > th,
    .table-list > tbody > tr > th:after {
        font-weight: 400;
        background-color: var(--color-table-header);
        color: white;
        position: sticky;
        top: 0;
        z-index: 100;
        border: none;
    }

        .table-list > tbody > tr > td input,
        .table-list > tbody > tr > th input,
        .table-list > tfoot > tr > td input,
        .table-list > tfoot > tr > th input,
        .table-list > thead > tr > td input,
        .table-list > thead > tr > th input {
            max-height: 25px !important;
        }

.table-list tbody .Selected {
    background-color: var(--color-selected-row) !important;
    border: solid 1px var(--color-selected-row);
}

.table-list tfoot {
    display: table-row-group;
}

    .table-list tfoot > tr > th {
        font-weight: 400;
        background-color: var(--color-table-header);
        color: white;
        position: sticky;
        border: none;
    }

.table-list thead > tr > th.text-right {
    background-position: center right !important;
}

    .table-list thead > tr > th.text-right > span {
        padding-left: 0;
        padding-right: 1rem !important;
    }

.table-list .subtable {
    margin-bottom: 0px;
}

.table-list .subline {
    background-color: #aaaaaa !important;
}

    .table-list .subline td {
        padding-top: 2px;
        padding-bottom: 2px;
        border-top: 0px;
    }

.table-sm th,
.table-sm td {
    padding: 0.2rem;
}

.table-multi-line-text {
    font-size: 12px !important;
}

.column-search {
    padding: 3px !important;
}

.column-search-input {
    height: calc(1.5em + 2px);
    border-radius: 0.1rem;
}

.hide-column-search > input {
    display: none
}

.collapsable-table {
}

.collapsable-table-button-padding {
    padding-right: 28px !important;
}

.collapsable-table-container {
}

.collapsable-table-relative-container {
    position: relative;
}

.collapsable-table-button {
    position: absolute;
    right: 17px;
    top: 3px;
    color: white;
    z-index: 999;
}

.collapsable-table-relative-container .collapsable-table-button {
    right: 3px;
}

.collapsable-table thead {
}

.table-filter-container {
    position: absolute;
    right: 30px;
    top: 14px;
    z-index: 999;
}

.table-header {
    position: absolute;
    top: 14px;
    margin-left: 35%;
    margin-right: 35%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    z-index: 999;
}


td > a {
    color: black;
}

    td > a:hover {
        color: black;
    }

ul {
    padding: 0;
    margin: 0;
}

    ul li {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

a {
    cursor: pointer;
}

.multiselect-container {
    max-height: 200px !important;
    overflow-x: auto;
    width: 100% !important;
}

    .multiselect-container > li > a > label {
        padding: 3px 1px 3px 10px;
        width: 100%;
        text-align: left;
        font-size: 13px;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #000;
    }

.multiselect-native-select {
    float: left;
    width: 100%;
    line-height: 1.5;
}

    .multiselect-native-select > .multiselect-native-select {
        height: 100%;
    }

    .multiselect-native-select > .btn-group {
        height: 100%;
    }

.multiselect-selected-text {
    font-size: 14px;
    width: 100%;
}

.multiselect {
    padding: 0px 0px 0px 0px;
}

.multiselect-container > li.active a, .multiselect-container > li.active a:hover {
    background-color: transparent;
}

.period-text {
    font-size: 13px !important;
}

.addon-text {
    font-weight: 300;
}

.addon-bold-text {
    font-weight: 500;
}

.addon-counter,
.item-counter {
    border: none;
    text-align: center;
    height: 100%;
    font-size: 22px;
    font-weight: 400;
    color: var(--primary-color);
    height: 25px;
    background-color: #F5F5F5;
}

.addon-item-container {
    border-radius: 0.2rem;
    border: 1px solid #e5e5e5;
    background-color: #F5F5F5;
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: 5px;
    min-height: 30px;
}

.warning {
    color: red;
}

.invalidSelection {
    box-shadow: 0px 0px 4px 0px #FF0000;
}

.form-control-checkbox {
    width: calc(1.5em + 0.5rem + 1px);
    height: calc(1.5em + 0.5rem + 1px);
}

.form-control-sm-checkbox {
    width: calc(1.5em + 0.25rem + 1px);
    height: calc(1.5em + 0.25rem + 1px);
}

.form-control-empty {
    height: calc(1.5em + 0.75rem + 2px);
    width: 100%;
}

.form-control-compact .form-control {
    padding-left: 5px;
    padding-right: 5px;
}

.boxshadow {
    box-shadow: 3px 3px 10px 0px rgba(150,150,150,0.4);
}

.warning-outline {
    box-shadow: 0px 0px 2px 2px rgba(255, 0, 0, 0.30);
}

.disable-scrollbars::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Chrome/Safari/Webkit */
}

.disable-scrollbars {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

/* Collapsable container */
.collapsable-container {
}

.collapsable-container-button {
    position: absolute;
    right: 10px;
    top: -15px;
    z-index: 999;
    cursor: pointer;
}

.collapsed-text {
    font-weight: 300;
    font-family: Calibri;
    white-space: pre-line;
}

/****************************/
/*         FORM             */
/****************************/
input[type=number] {
    -moz-appearance: textfield;
}

.form-control:disabled, .form-control.readonly {
    background-color: var(--color-disabled) !important;
}

.control-label {
    width: 100%;
}

.checkbox-label {
    line-height: 38px;
}

.form-control-sm {
    width: 100%;
}

.icon-button {
    border: none;
    background-color: transparent;
    font-size: 20px;
    padding: 0;
    line-height: 100%;
}

.headder .row div {
    background-color: black;
    color: white;
    margin-left: 0px;
}

    .headder .row div select {
        background-color: black;
        color: white;
        border: hidden;
    }

.headder div {
    background-color: gray;
    color: white;
}

.legend .row:nth-of-type(odd) div {
    background-color: #f3f3f3;
}

.legend .row:nth-of-type(even) div {
    background: #FFFFFF;
}

.legend .row:hover div,
.legend .row.active div {
    background-color: #E5E5E5;
}

.legend .row.Selected div {
    background-color: #7fa6d5;
}

.legend .row .dragicon div,
.legend .row:hover .dragicon div,
.legend .row:active .dragicon div,
.legend .row:nth-of-type(2n) .dragicon div,
.legend .row:nth-of-type(even) .dragicon div {
    background-color: transparent !important;
}

.legend .row.highlight-error div {
    color: red;
}

.table-compact td {
    padding: 0;
    margin: 0;
}

.table-compact tr.row-with-cell-border td {
    padding: 1px;
}

    .table-compact tr.row-with-cell-border td.cell-with-no-border {
        padding-left: 0;
        padding-right: 0;
    }

    .table-compact tr.row-with-cell-border td.cell-with-no-left-border {
        padding-left: 0;
    }

    .table-compact tr.row-with-cell-border td.cell-with-no-right-border {
        padding-right: 0;
    }


.select {
    /*color:red !important;*/
    background-color: #3870b5;
    /*padding-left: 10px;
    padding-right: 10px;*/
}

.selectSetup {
    /*color:red !important;*/
    background-color: #fc7705;
    /*padding-left: 10px;
    padding-right: 10px;*/
}

.selectsub {
    /*color:red !important;*/
    background-color: #5686ba;
    /*padding-left: 10px;
    padding-right: 10px;*/
}

.selectsubSetup {
    /*color:red !important;*/
    background-color: #dd8212;
    /*padding-left: 10px;
    padding-right: 10px;*/
}


#topMenu {
    list-style: none;
}

    #topMenu li {
        float: left;
        /*margin-right:10px;*/
    }

body {
    font-size: 14px;
}


#topRow {
    background-color: #7fa6d5;
}

    #topRow #topMenu,
    #topRow #userMenu {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    #topRow #topMenu {
        margin-left: -15px;
    }

    #topRow #userMenu {
        float: right;
    }

        #topRow #topMenu li,
        #topRow #userMenu li {
            float: left;
        }

            #topRow #topMenu li a,
            #topRow #userMenu li a {
                display: block;
                padding-left: 20px;
                padding-right: 20px;
            }

            #topRow #topMenu li a,
            #topRow #userMenu li a,
            #topRow #topMenu2 .shortcut-link {
                line-height: 45px;
                height: 40px;
                color: #fff;
                text-decoration: none;
                border-bottom: 4px solid transparent;
            }

                #topRow #topMenu li .navigation-link:hover,
                #topRow #topMenu li .navigation-link.active,
                #topRow #userMenu li a:hover,
                #topRow #userMenu li a.active,
                #topRow #topMenu2 .shortcut-link:hover,
                #topRow #topMenu2 .shortcut-link.active {
                    border-bottom: 4px solid #fff;
                }

    #topRow #topMenu2 .shortcut-link {
        display: block;
        padding-left: 5px;
        padding-right: 5px;
    }

.icon-menu-item,
.icon-menu-item:hover,
.icon-menu-item:active,
.icon-menu-item:focus {
    color: #000;
    font-size: 25px;
}

/* IMAGE CONTROL */
.image-control .image {
    position: relative;
}

    .image-control .image .delete-button {
        position: absolute;
        top: 0px;
        right: 0px;
        background-color: rgba(255,255,255,0.5);
        padding: 5px;
        border-bottom-left-radius: 5px;
    }

/* SIDE MENU */
#sideMenuContainer {
    /*height: calc(100vh - 45px);*/
    border-right: 1px solid #7fa6d5;
    background-color: #9ebadd; /*rgba(0,0,0,0.05);*/
    /*    margin-bottom: 10px;*/
    line-height: 30px;
}




    #sideMenuContainer ul li {
        float: left;
        /*font-size: 16px;*/
        list-style-type: none;
    }


    #sideMenuContainer .navigation-link {
        display: block;
        padding: 0 20px;
        color: white;
    }

.listcontainer {
    line-height: 30px;
    max-height: 700px;
    overflow-y: auto;
    overflow-x: auto;
    margin-right: 0px;
}

.listcontainer_small {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    margin-right: 0px;
    line-height: 30px;
}

.container_small {
    margin-right: -15px;
    line-height: 30px;
}

.listcontainer_dynamic {
    margin-right: -15px;
}

label {
    font-size: 12px;
    margin-left: 4px;
    margin-bottom: 0.0rem;
}

.form-check-label {
    margin-left: 24px;
    font-size: 14px;
    margin-top: 10px;
}

.tab-links:after {
    display: block;
    clear: both;
    content: '';
}

.tab-links li {
    margin: 0px 15px 0px 0px;
    float: left;
    list-style: none;
}

/*.tab-links a {
    padding: 2px 15px;
    display: inline-block;
    border-radius: 3px 3px 0px 0px;
    background: #cfcccc;
    font-weight: bolder;
    color: #989898;
    transition: all linear 0.15s;
    border-right: outset 4px #dddddd;
}*/

/* Test af nyt design */
.tab-links a, .tab-links div, .nav-tabs a.nav-link {
    padding: 2px 15px;
    display: inline-block;
    border-radius: 3px 3px 0px 0px;
    background-color: #e4e4e4;
    color: black;
    font-weight: 500;
    box-shadow: 0px 2px 5px 1px rgba(150,150,150,0.4);
    transition: all linear 0.15s;
}

    .tab-links a:hover, .tab-links div:hover {
        background: #f5f5f5;
        text-decoration: none;
    }

    li.active a, li.active a:hover, li.active div, li.active div:hover,
    .nav-tabs a.nav-link.active {
        background: #f5f5f5; /*Aktiv faneblad*/
        color: black;
    }

.tab-content {
    padding: 15px;
    margin: 0px;
    background-color: #f5f5f5;
    visibility: visible;
    box-shadow: 0px 3px 3px 1px rgba(150,150,150,0.5);
}

.tab-content-box {
    background-color: #e5e5e5;
    border-radius: 5px;
}

.tab {
    display: none;
}

    .tab.active {
        display: block;
    }


/* Datepicker */
.dPicker, .ui-datepicker, .ui-datepicker-header, .ui-datepicker-calendar {
    /*width: 14em;*/
}

button.ui-datepicker-close {
    display: none;
}

button.ui-datepicker-current {
    float: right !important;
    border: 1px solid var(--color-datepicker-dark) !important;
}

.ui-datepicker-week-col {
    background-color: var(--color-datepicker-dark);
    text-align: center !important;
}

    .ui-datepicker-week-col thead {
        background-color: var(--color-datepicker-dark);
    }

.ui-datepicker-buttonpane {
    margin: 0px !important;
    background-color: var(--color-datepicker-dark);
    height: 52px;
}

    .ui-datepicker-buttonpane.ui-widget-content button {
        background-color: var(--color-datepicker-darker) !important;
        border: 2px solid var(--color-datepicker-lighter) !important;
    }

        .ui-datepicker-buttonpane.ui-widget-content button:hover {
            background-color: var(--color-datepicker-lighter) !important;
            border: 2px solid var(--color-datepicker-darker) !important;
        }

.ui-datepicker-calendar {
    margin: 0px !important;
}

    .ui-datepicker-calendar th {
        background-color: var(--color-datepicker-dark);
        width: 12.5%;
    }

    .ui-datepicker-calendar > tbody > tr > td > a:hover {
        background-color: var(--color-datepicker-dark) !important;
    }

.ui-datepicker {
    background: var(--color-datepicker-lighter);
    z-index: 999999 !important;
    border: 3px solid var(--color-datepicker-darker) !important;
    padding: 0px;
}

    .ui-datepicker td a, .ui-datepicker-unselectable span {
        text-align: center !important
    }

.ui-datepicker-header {
    background: var(--color-datepicker-dark);
    border-radius: 0px;
}

.ui-datepicker-month, .ui-datepicker-year {
    background-color: var(--color-datepicker-lighter);
    border: 1px solid var(--color-datepicker-dark);
    outline: none;
    border-radius: 3px;
    padding: 3px;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    color: black;
}

.ui-state-default, .ui-widget-content .ui-state-default {
    background: var(--color-datepicker-medium) !important;
    border-radius: 3px;
    border: 1px solid var(--color-datepicker-medium) !important;
}

.ui-datepicker-current {
    background-color: var(--color-datepicker-dark) !important;
}

    .ui-datepicker-current:hover {
        background-color: var(--color-datepicker-darker) !important;
    }

.ui-datepicker-current-day .ui-state-active {
    border-radius: 3px;
    background-color: var(--color-datepicker-dark) !important;
    border: 1px solid var(--color-datepicker-darkest) !important;
}

.holiday .ui-state-default {
    color: red;
    font-weight: bold;
}


.closed .ui-state-default {
    /*color:green;*/
    font-weight: 100;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid red;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tooggleSideBar {
    position: absolute;
    top: 0;
    right: 100%;
    /*left:-10%;*/
    width: 30px;
    height: 30px;
    background-color: black;
}

    .tooggleSideBar i {
        color: white;
        font-size: 30px;
    }


#SidebarContainer {
    position: absolute;
    top: 0;
    right: 0;
    /*background-color: #eeeded;*/
}

    #SidebarContainer .SideBarBlock {
        background-color: #eeeded;
        margin-bottom: 20px;
        padding-left: 0px;
    }


    #SidebarContainer.notvisible .tabs {
        display: none;
    }

.col-1 {
}


@media (min-width:576px) {
    .rotateScreen {
        display: none;
    }

    .normalScreen {
        display: normal;
    }
}

@media (min-width:1200px) {
    .SideBarContent {
        width: 250px;
    }

    body {
        font-size: 16px;
    }
}

@media (min-width:992px) AND (max-width:1199px) {
    .SideBarContent {
        width: 250px;
    }

    body {
        font-size: 15px;
    }
}

@media (min-width:768px) AND (max-width:991px) {
    .SideBarContent {
        width: 250px;
    }

    body {
        font-size: 14px;
    }
}

@media (min-width:576px) AND (max-width:767px) {
    .SideBarContent {
        width: 200px;
    }

    body {
        font-size: 13px;
    }
}

@media (min-width:10px) AND (max-width:575px) {
    .SideBarContent {
        width: 180px;
    }

    .normalScreen {
        display: none;
    }

    .rotateScreen {
        display: normal;
    }

    body {
        font-size: 12px;
    }
}

.fa-plus-circle {
    color: #3cd99b; /* grøn*/
}

.fa-times-circle {
    color: #e44c4c; /* rød */
}




.fa-s-red {
    font-size: 120%;
}

.fa-l-red {
    color: #e44c4c;
    font-size: 150%;
}

/* Remove arrows from number inputs */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


/* Calender */
.calender .day-cell {
}

    .calender .day-cell .day {
        position: relative;
        width: 100%;
        height: 25px;
    }

        .calender .day-cell .day .day-right {
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            z-index: 1;
        }

        .calender .day-cell .day .day-left {
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            z-index: 1;
        }

        .calender .day-cell .day .day-number {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 2;
        }

        .calender .day-cell .day .startday,
        .calender .day-cell .day .stopday {
            z-index: 3;
        }

.NoDisplay {
    display: none;
}

.displayNone {
    display: none;
}

.autocomplete-container {
    /* relative position for at de absolut positionerede forslag får korrekt placering.*/
    position: relative;
    width: 100%;
    max-width: 30em;
}

    .autocomplete-container input {
        /* Både input og forslag får samme bredde som omkringliggende DIV */
        width: 100%;
        box-sizing: border-box;
    }


.dawa-autocomplete-suggestions {
    margin: 0.3em 0 0 0;
    padding: 0;
    text-align: left;
    border-radius: 0.3125em;
    background: #fcfcfc;
    box-shadow: 0 0.0625em 0.15625em rgba(0,0,0,.15);
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9999999999;
    overflow-y: auto;
    box-sizing: border-box;
}

    .dawa-autocomplete-suggestions .dawa-autocomplete-suggestion {
        margin: 0;
        list-style: none;
        cursor: pointer;
        padding: 0.4em 0.6em;
        color: #333;
        border: 0.0625em solid #ddd;
        border-bottom-width: 0;
    }

        .dawa-autocomplete-suggestions .dawa-autocomplete-suggestion:first-child {
            border-top-left-radius: inherit;
            border-top-right-radius: inherit;
        }

        .dawa-autocomplete-suggestions .dawa-autocomplete-suggestion:last-child {
            border-bottom-left-radius: inherit;
            border-bottom-right-radius: inherit;
            border-bottom-width: 0.0625em;
        }

        .dawa-autocomplete-suggestions .dawa-autocomplete-suggestion.dawa-selected,
        .dawa-autocomplete-suggestions .dawa-autocomplete-suggestion:hover {
            background: #f0f0f0;
        }


.hideElement {
    display: none;
}

.hideMenu {
    display: none !important;
}


.popuperr {
    background: #5c556aeb;
    border: 6px solid #c6c198;
    border-radius: 20px;
    width: 600px;
    min-height: 100px;
    position: absolute;
    top: 200px;
    left: 1000px;
    z-index: 10000;
    padding: 15px;
    display: none;
    color: white;
}

.alert-warning {
    color: #483707;
    background-color: #e9cd9d;
    border-color: #ffeeba;
}

.alert-info {
    color: #23535a;
    background-color: #cbddf3;
    border-color: #aecaed;
}

.send_mail {
    background-image: url('../images/icon/ikon-send-mail.png');
}

.send_sms {
    background-image: url('../images/icon/ikon-send-sms.png');
}

.send_std_sms {
    background-image: url('../images/icon/ikon-send-standard-sms.png');
}

.send_std_mail {
    background-image: url('../images/icon/ikon-send-standard-mail.png');
}

.ui-menu {
    min-width: 500px;
    font-size: 13px;
    line-height: 20px;
    border: solid 2px grey;
}

.ui-menu-item {
    background-color: #fdfdfd;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: none;
    background: lightgrey;
    color: black;
}



.ui-autocomplete-category {
    background-color: lightgrey;
    font-weight: 800;
    width: 100%;
}



.listCol1,
.listCol1.ui-state-active {
    width: 40%;
    display: inline-block;
    border-right: 1px solid black;
    padding-left: 5px;
    margin: 0 !important;
    vertical-align: top;
}

.listCol2,
.listCol2.ui-state-active {
    width: 22%;
    display: inline-block;
    border-right: 1px solid black;
    padding-left: 5px;
    margin: 0 !important;
    vertical-align: top;
}

.listCol3,
.listCol3.ui-state-active {
    width: 22%;
    margin: 0 !important;
    display: inline-block;
    padding-left: 5px;
    white-space: nowrap;
    text-overflow: clip;
    overflow: hidden;
    border-right: 1px solid black;
    vertical-align: top;
}

.listCol4,
.listCol4.ui-state-active {
    width: 16%;
    display: inline-block;
    margin: 0 !important;
    padding-left: 5px;
    text-align: left;
    vertical-align: top;
}

.x2 {
    width: 100%;
    background-color: #fdfde9;
}

.x1 {
    width: 100%;
    background-color: #ffffe0;
}

/* CSS SPINNER */
.spinner {
    display: flex;
    height: 100%;
}

.sk-fading-circle {
    margin: 100px auto;
    width: 40px;
    height: 40px;
    position: relative;
    -ms-flex-item-align: center !important;
    align-self: center !important;
}

.sk-fading-circle.tiny {
    margin: 10px auto;
    width: 25px;
    height: 25px;
}

    .sk-fading-circle .sk-circle {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

        .sk-fading-circle .sk-circle:before {
            content: '';
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background-color: #333;
            border-radius: 100%;
            -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
        }

    .sk-fading-circle .sk-circle2 {
        -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    .sk-fading-circle .sk-circle3 {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .sk-fading-circle .sk-circle4 {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .sk-fading-circle .sk-circle5 {
        -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        transform: rotate(120deg);
    }

    .sk-fading-circle .sk-circle6 {
        -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
        transform: rotate(150deg);
    }

    .sk-fading-circle .sk-circle7 {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .sk-fading-circle .sk-circle8 {
        -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
        transform: rotate(210deg);
    }

    .sk-fading-circle .sk-circle9 {
        -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
        transform: rotate(240deg);
    }

    .sk-fading-circle .sk-circle10 {
        -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .sk-fading-circle .sk-circle11 {
        -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
        transform: rotate(300deg);
    }

    .sk-fading-circle .sk-circle12 {
        -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
        transform: rotate(330deg);
    }

    .sk-fading-circle .sk-circle2:before {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .sk-fading-circle .sk-circle3:before {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
    }

    .sk-fading-circle .sk-circle4:before {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .sk-fading-circle .sk-circle5:before {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

    .sk-fading-circle .sk-circle6:before {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
    }

    .sk-fading-circle .sk-circle7:before {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
    }

    .sk-fading-circle .sk-circle8:before {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
    }

    .sk-fading-circle .sk-circle9:before {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
    }

    .sk-fading-circle .sk-circle10:before {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
    }

    .sk-fading-circle .sk-circle11:before {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
    }

    .sk-fading-circle .sk-circle12:before {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
    }

.search-field-container .sk-fading-circle {
    margin: auto;
    width: 25px;
    height: 25px;
}

.search-field-container-sm .sk-fading-circle {
    margin: auto;
    width: 20px;
    height: 20px;
}

.spinner.spinner-sm {
    display: inline-block;
}

    .spinner.spinner-sm .sk-fading-circle {
        display: inline-block;
        margin: auto;
        width: 20px;
        height: 20px;
    }


@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}

@keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}

/* Option list styling */
.optionlist .header-row {
    color: #fff;
    background-color: #000;
    font-weight: bold;
}

.optionlist .option-rows .option-row {
    background-color: #fff;
    padding: 2px;
}

    .optionlist .option-rows .option-row:nth-of-type(2n+1) {
        background-color: #f3f3f3;
    }

.legend {
    border: solid 1px lightgrey;
}

    .legend .row {
        margin: 0 !important;
    }

.headder .row {
    margin: 0 !important;
}

.customer-precense {
    min-width: 80px;
    max-width: 80px;
    overflow-x: hidden;
}

.selected-customer-presence {
    background-color: var(--color-selected-row);
}

.show-pdf-btn {
    padding: 5px;
    color: black;
    background-color: rgba(130, 30, 30, 0.10);
    border: 2px solid rgba(130, 30, 30, 0.50);
    border-radius: 5px;
    font-size: 14px;
}

    .show-pdf-btn:hover {
        background-color: rgba(150, 0, 0, 0.20);
        color: black;
        text-decoration: none;
    }

.statistics_resource {
    display: inline-block;
    min-height: 20px;
    padding: 0px;
    margin: 0px;
}

.statistics_resource_border {
    border-right: 1px solid #fdfdfd7a;
}

.statistics_resource_available {
    background-color: #b8cccc;
}

.statistics_resource_occupied {
    background-color: #5b8686;
}

/* Buttons */
.btn-positive {
    color: #fff;
    background-color: var(--color-positive);
    border-color: var(--color-positive-border);
}

    .btn-positive:hover, .btn-positive:active, .btn-positive:focus,
    .btn-positive.active {
        color: #fff !important;
        background-color: var(--color-positive-hover) !important;
        border-color: var(--color-positive-border) !important;
    }

    .btn-positive.disabled, .btn-positive:disabled {
        color: #fff;
        background-color: var(--color-positive-disabled) !important;
        border-color: var(--color-positive-border) !important;
    }

    .btn-positive:not(:disabled):not(.disabled):active, .btn-positive:not(:disabled):not(.disabled).active,
    .show > .btn-positive.dropdown-toggle {
        color: #fff;
        background-color: var(--color-positive) !important;
        border-color: var(--color-positive-border) !important;
    }

.btn-neutral {
    color: #fff !important;
    background-color: var(--color-neutral);
    border-color: var(--color-neutral-border);
}

    .btn-neutral:hover, .btn-neutral:active, .btn-neutral:focus {
        color: #fff !important;
        background-color: var(--color-neutral-hover) !important;
        border-color: var(--color-neutral-border) !important;
    }


.btn-highlight {
    color: #fff;
    background-color: var(--color-highlight);
    border-color: var(--color-highlight-border);
}

    .btn-highlight:hover, .btn-highlight:active, .btn-highlight:focus {
        color: #fff !important;
        background-color: var(--color-highlight-hover) !important;
        border-color: var(--color-highlight-border) !important;
    }


.btn-negative {
    color: #fff;
    background-color: var(--color-negative);
    border-color: var(--color-negative-border);
}

    .btn-negative:hover, .btn-negative:active, .btn-negative:focus {
        color: #fff !important;
        background-color: var(--color-negative-hover) !important;
        border-color: var(--color-negative-border) !important;
    }


    .btn-negative.disabled, .btn-negative:disabled {
        color: #fff;
        background-color: var(--color-negative) !important;
        border-color: var(--color-negative-border) !important;
    }

    .btn-negative:not(:disabled):not(.disabled):active, .btn-negative:not(:disabled):not(.disabled).active,
    .show > .btn-negative.dropdown-toggle {
        color: #fff;
        background-color: var(--color-negative) !important;
        border-color: var(--color-negative-border) !important;
    }

.btn-outline {
    color: var(--color-positive) !important;
    background-color: #ffffff;
    border-color: var(--color-positive-border);
}

    .btn-outline:hover, .btn-outline:active, .btn-outline:focus {
        color: #ffffff !important;
        background-color: var(--color-positive-hover) !important;
        border-color: var(--color-positive-border) !important;
    }

    .btn-outline.disabled, .btn-outline:disabled {
        color: var(--color-positive) !important;
        background-color: #ffffff !important;
        border-color: var(--color-positive-border) !important;
    }

    .btn-outline:not(:disabled):not(.disabled):active, .btn-outline:not(:disabled):not(.disabled).active,
    .show > .btn-outline.dropdown-toggle {
        color: #ffffff !important;
        background-color: var(--color-positive) !important;
        border-color: var(--color-positive-border) !important;
    }

.btn-language {
    color: var(--color-positive) !important;
    background-color: #ffffff;
    border-color: var(--color-positive-border);
}

    .btn-language:hover, .btn-language:active, .btn-language:focus {
        color: #ffffff !important;
        background-color: var(--color-positive-hover) !important;
        border-color: var(--color-positive-border) !important;
    }

    .btn-language.disabled, .btn-language:disabled {
        color: var(--color-positive) !important;
        background-color: #ffffff !important;
        border-color: var(--color-positive-border) !important;
    }

    .btn-language:not(:disabled):not(.disabled):active, .btn-language:not(:disabled):not(.disabled).active,
    .show > .btn-language.dropdown-toggle {
        color: #ffffff !important;
        background-color: var(--color-positive) !important;
        border-color: var(--color-positive-border) !important;
    }

    .btn-language.active {
        color: #ffffff !important;
        background-color: var(--color-positive) !important;
        border-color: var(--color-positive-border) !important;
    }

/* Autocomplete search list */
.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-top: none;
    z-index: 9999;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 275px;
    overflow-y: auto;
    margin-bottom: 1px;
    -webkit-box-shadow: 2px 2px 5px 1px rgba(153,153,153,1);
    -moz-box-shadow: 2px 2px 5px 1px rgba(153,153,153,1);
    box-shadow: 2px 2px 5px 1px rgba(153,153,153,1);
}

.autocomplete-item {
    font-size: 14px;
    padding: 5px;
    cursor: pointer;
    background-color: #f8f8f8;
    border-bottom: 1px solid #d4d4d4;
}

    .autocomplete-item > div {
        padding-left: 0px;
    }

    .autocomplete-item:hover {
        background-color: #e9e9e9;
    }

.remaining-payment {
    background-color: var(--color-error);
}

.no-remaining-payment {
    background-color: var(--color-success);
}

.checked-out {
    background-color: #5686ba !important;
}

.checked-in {
    background-color: var(--color-success) !important;
}

.overdue {
    color: var(--color-alert);
    font-weight: 500;
}

.resource-not-checked-out {
    background-color: #bbbbbb;
}

/* Toast */
.toast {
    min-width: 200px;
    max-width: 300px;
    background-color: #ffffff;
    box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.1);
}

.toast-header {
    background-color: rgb(127, 166, 213);
    color: white;
}

.toast-header-success {
    background-color: rgb(127, 166, 213);
}

.toast-header-error {
    background-color: var(--color-error);
}

.toast-header-text {
    font-size: 15px;
    font-weight: 600;
}

.toast-header-time {
    font-size: 15px;
    font-weight: 300;
}

.toast-close, .quickLink-close {
    color: #ffffff;
}

    .toast-close:hover, .toast-close:focus, .quickLink-close:hover, .quickLink-close:focus {
        color: #ffffff;
        opacity: 0.75;
        outline: none;
    }

/* Payment and Invoice Modals */

select.payment {
    background-color: rgb(0, 255, 0, 0.20);
}

select.refund {
    background-color: rgb(255, 141, 0, 0.20);
}

/* Modal */
.modal-content {
    border-radius: 1rem;
    border: 0;
    box-shadow: 3px 3px 10px 0px rgba(150,150,150,0.5);
}

.modal-header {
    background-color: rgb(127, 166, 213);
    color: white;
}

.modal-body {
    max-height: calc(100vh - 200px);
    overflow: auto;
}

.modal-footer {
    background-color: #f1f1f1;
}

.modal-close {
    color: #ffffff;
}

    .modal-close:hover, .modal-close:focus, .modal-header > button:focus {
        color: #ffffff !important;
        opacity: 0.75 !important;
        outline: none !important;
    }

/* Custom Labels*/
.button-label {
    background-color: var(--color-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Custom Widths */
.w-date {
    width: 92px !important;
}

.w-period {
    width: 170px !important;
}

.w-tofrom {
    width: 115px !important;
}

.w-datetime {
    width: 180px !important;
}

.w-datetime-small {
    width: 120px !important;
}

.w-amount {
    width: 110px !important;
}

.w-quantity {
    width: 80px !important;
}

.w-phone {
    width: 125px !important;
}

.w-icon {
    width: 45px !important;
}

.w-xs {
    width: 40px !important;
}

.w-xxs {
    width: 30px !important;
}

.w-small {
    width: 75px !important;
}

.w-medium {
    width: 100px !important;
}

.w-large {
    width: 150px !important;
}

.w-xl {
    width: 200px !important;
}

.w-xxl {
    width: 250px !important;
}

.w-xxxl {
    width: 300px !important;
}

.w-xxxxl {
    width: 400px !important;
}

.w-xxxxxl {
    width: 600px !important;
}

.w-110px {
    width: 110px;
}

.w-130px {
    width: 130px;
}

.mw-80px {
    min-width: 80px;
}

.mw-120px {
    min-width: 120px;
}

.table-vh-dashboard-100 {
    height: calc(100vh - 125px)
}

.table-vh-dashboard-50 {
    height: calc(50vh - 137px)
}

.modal-full-height {
    min-height: 300px;
    max-height: calc(80vh - 150px);
}

.list-view-container {
    height: calc(-200px + 100vh);
}

body.show-quick-links .list-view-container {
    height: calc(-225px + 100vh);
}

.view-container {
    height: calc(-95px + 100vh);
}

body.show-quick-links .view-container {
    height: calc(-120px + 100vh);
}

.external-posting-list-view {
    height: calc(-220px + 100vh);
    overflow-x: hidden;
    overflow-y: auto;
}

.register-settlement-list-view {
    height: calc(-220px + 100vh);
    overflow-x: hidden;
    overflow-y: auto;
}

.register-advanced-settlement-view {
    height: calc(-340px + 100vh);
    overflow-x: hidden;
    overflow-y: auto;
}

.register-advanced-settlement-list-view {
    height: calc(-320px + 100vh);
    overflow-x: hidden;
    overflow-y: auto;
}

body.show-quick-links .register-settlement-list-view {
    height: calc(-245px + 100vh);
}

.register-settlement-sumline {
    background-color: #cccccc;
}

    .register-settlement-sumline > td {
        border-top: 1px solid #cccccc;
    }


body.show-quick-links .external-posting-list-view {
    height: calc(-245px + 100vh);
}

body.show-quick-links .main-row {
    min-height: var(--total-height-minus-menu-with-quicklinks);
    max-height: var(--total-height-minus-menu-with-quicklinks);
}

body.show-quick-links .table-vh-dashboard-100 {
    height: calc(100vh - 150px)
}

body.show-quick-links .table-vh-dashboard-50 {
    height: calc(50vh - 149.5px)
}

/* VARIABLES */
:root {
    --color-positive: #7fa0a0;
    --color-positive-border: #768989;
    --color-positive-hover: #709090;
    --color-positive-disabled: rgba(0,0,0,0.5); /*#879696;*/
    --color-highlight: #c4a549;
    --color-highlight-border: #ae8b21;
    --color-highlight-hover: #ae8b21;
    --color-negative: #b77f70;
    --color-negative-border: #825950;
    --color-negative-hover: #96675d;
    --color-table-header: #40494f;
    --color-disabled: #eeeeee;
    --color-activated: #eeeeee;
    --color-selected-row: #abbccd;
    --color-primaryproduct-price: #dcdcdc;
    --color-icon: #888888;
    --color-alert: #e25858;
    --color-error: #ea8989;
    --color-success: #8ed183;
    --color-datepicker-lighter: #f7f7f7;
    --color-datepicker-light: #e0e0e0;
    --color-datepicker-medium: #eeeeee;
    --color-datepicker-dark: #dddddd;
    --color-datepicker-darker: #cccccc;
    --color-datepicker-darkest: #bbbbbb;
    --total-height-minus-menu: calc(100vh - 80px);
    --total-height-minus-menu-with-quicklinks: calc(100vh - 105px);
    --color-neutral: #888;
    --color-neutral-border: #000;
    --color-neutral-hover: #666;
}

.booking-status-Reserved, .booking-status-RequiresPayment {
    opacity: 0.4;
}

.single-day-booking-link {
    position: absolute;
    display: block;
    top: 0px;
    width: 100%;
    left: -120%;
    color: #fff;
}

#toolbar {
}

#iotToolbarContainer ul {
    float: right;
}


.toolbar-button {
    border: 1px solid #979797;
    background: linear-gradient(to bottom, white 0%, #dcdcdc 100%);
}

.vat-warning {
    font-weight: 500;
    color: red;
}

.step-sequence-modal .modal-body {
    padding: 0px 15px 0px 15px !important;
}

.step-sequence-modal .modal-header {
    border-bottom: 0px;
}

.step-sequence-header {
    background-color: #bfd2ea;
    height: 32px;
}

    .step-sequence-header .currentStep {
        font-weight: 700;
    }

.step-sequence-content {
    padding-top: 10px;
    height: 400px;
}

.step-sequence-footer {
    background-color: #eeeeee;
    height: 51px;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

.step-sequence-modal .shiftet-check-out-btn, .step-sequence-modal .partial-check-out-btn, .step-sequence-modal .shiftet-check-in-btn {
    width: 100%;
    height: 150px;
}

.step-sequence-modal .check-out-flow-customer {
    position: absolute;
    width: 96%;
    text-align: center;
    padding-top: 3px;
}

/* Customize the label (the container) */
.checkmark-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .checkmark-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 38px;
    width: 38px;
    background-color: #eee;
}

    .checkmark.form-control-sm {
        position: absolute;
        top: 0;
        left: 0;
        height: 31px;
        width: 31px;
        background-color: #eee;
    }

/* When the checkbox is checked, add a blue background */
.checkmark-container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkmark-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkmark-container .checkmark:after {
    left: 12px;
    top: 5px;
    width: 13px;
    height: 21px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkmark-container .checkmark.form-control-sm:after {
    left: 10px;
    top: 3px;
    width: 10px;
    height: 19px;
}

/* Resource Booking Table */

.resource-booking-table {
    background-color: var(--color-datepicker-darkest) !important;
    user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    /*background-color: #f3eee0 !important;*/
}

.resource-booking-header {
    background-color: var(--color-datepicker-darker) !important;
    font-weight: 600 !important;
    /*background-color: #ece0b6 !important;*/
}

.resource-booking-header-weekend {
    background-color: var(--color-datepicker-dark) !important;
    font-weight: 400 !important;
    /*background-color: #f3eee0 !important;*/
}

.resource-booking-header-day {
    background-color: var(--color-datepicker-dark) !important;
    font-weight: 400 !important;
    /*background-color: #f3eee0 !important;*/
}

.resource-booking-day {
    background-color: var(--color-datepicker-medium) !important;
    user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    /*background-color: #ffffe0 !important;*/
}

.resource-booking-weekend {
    background-color: var(--color-datepicker-light) !important;
    user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    /*background-color: #fdfde9 !important;*/
}

.resource-booking-today {
    background-color: #c7d3e5 !important;
    /*background-color: #f1e0e0 !important;*/
}

.resource-booking-selected-day {
    background-color: #99b2ca !important;
}

.resource-booking-right {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.resource-booking-left {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

/*****************CHECKBOXES (NORMAL-LARGE)******************/
/*checkbox container*/
.large-check-container,
.normal-check-container,
.small-check-container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*checkbox*/
.large-check-input,
.normal-check-input,
.small-check-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/*On mouse-over*/
.large-check-container:hover .large-check-input ~ .large-checkmark,
.normal-check-container:hover .normal-check-input ~ .normal-checkmark,
.small-check-container:hover .small-check-input ~ .small-checkmark {
    background-color: #abbccdbd;
    transition: .1s;
}

/*When the checkbox is checked*/
.large-check-input:checked ~ .large-checkmark,
.normal-check-input:checked ~ .normal-checkmark,
.small-check-input:checked ~ .small-checkmark {
    background-color: #abbccd;
}

/*Create the checkmark/indicator*/
.large-checkmark:after,
.normal-checkmark:after,
.small-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/*Show the checkmark when checked*/
.large-check-input:checked ~ .large-checkmark:after,
.normal-check-input:checked ~ .normal-checkmark:after,
.small-check-input:checked ~ .small-checkmark:after {
    display: block;
}

/*****************SMALL CHECKBOX******************/
/*checkbox container*/
.small-check-container {
    line-height: 25px;
    padding-left: 25px;
    margin-bottom: 25px;
}

/*checkmark/indicator*/
.small-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    transition: .1s;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

    /*Style the checkmark/indicator*/
    .small-checkmark:after {
        left: 7px;
        top: 0px;
        width: 9px;
        height: 19px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

.small-check-desc {
    padding-left: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

.small-checkmark.text-center {
    left: calc(50% - 14px);
}

.text-right .small-checkmark {
    left: 12.5px;
}

/*****************NORMAL CHECKBOX******************/
/*checkbox container*/
.normal-check-container {
    line-height: 31px;
    padding-left: 31px;
    margin-bottom: 31px;
}

/*checkmark/indicator*/
.normal-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 31px;
    width: 31px;
    background-color: #fff;
    transition: .1s;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

    /*Style the checkmark/indicator*/
    .normal-checkmark:after {
        left: 9px;
        top: 0px;
        width: 11px;
        height: 24px;
        border: solid white;
        border-width: 0 4px 4px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

.normal-check-desc {
    padding-left: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

.normal-checkmark.text-center {
    left: calc(50% - 15.5px);
}

/*****************LARGE CHECKBOX******************/
/*checkbox container*/
.large-check-container {
    line-height: 38px;
    padding-left: 38px;
    margin-bottom: 38px;
}

/*checkmark/indicator*/
.large-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 38px;
    width: 38px;
    background-color: #fff;
    transition: .1s;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

    /*Style the checkmark/indicator*/
    .large-checkmark:after {
        left: 11px;
        top: 0px;
        width: 13px;
        height: 30px;
        border: solid white;
        border-width: 0 5px 5px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .large-checkmark.text-center {
        left: calc(50% - 19px);
    }

/**********RESOURCETYPES*************/
#resourceTypeEdit-container .tab-content-box {
    margin-bottom: 15px;
    padding: 0 15px 15px 15px;
}

    #resourceTypeEdit-container .tab-content-box:last-child {
        margin-bottom: 0;
    }


/****************HELPERS******************/
.lh-16 {
    line-height: 16px;
}

.lh-22 {
    line-height: 22px;
}

/*REMOVE INPUT GLOW*/
.form-control:focus, .btn:focus {
    border-color: #ced4da !important;
    box-shadow: none !important;
}




/***********************************************/
/*                  PRINT MAP                  */
/***********************************************/
#printContainer .eo-pdf-a4-page {
    width: 1586px;
    height: 2244px;
    background-color: #fff;
}

    #printContainer .eo-pdf-a4-page.landscape {
        height: 1586px;
        width: 2244px;
    }


.strikethrough {
    text-decoration: line-through !important;
}



/* FORM LAYOUT IN TABLE */
.form-layout-table .form-control {
    width: 100% !important;
}

.form-layout-table.table-list > tbody > tr > td input {
    max-height: none !important;
}


.color-dark {
    color: #212529;
}


/***********************************************/
/*                  DATA TABLE                 */
/***********************************************/


.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.15rem 0.75rem !important;
}

.dataTables_wrapper .dataTables_filter input {
    width: 250px !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter label {
    margin-left: 0;
}

.dataTables_filter > label > div > input {
    outline: none !important;
}

.table-nonfluid {
    width: auto !important;
}

.notification {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dddddd;
}

.notification-counter {
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    color: #fff;
    font-size: 8px;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    text-align: center;
    line-height: 12px;
    font-weight: bold;
}

.notification-header {
    background-color: rgb(127, 166, 213);
    border-top-right-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
}

#notificationBox {
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    min-width: 300px;
    border-radius: 0.25rem;
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.4);
    z-index: 0;
}

    #notificationBox .notification-header {
        color: #fff;
    }

    #notificationBox .notification-box-list {
        max-height: calc(95vh - 150px);
        overflow-y: auto;
        overflow-x: hidden;
        font-size: 14px;
    }

        #notificationBox .notification-box-list .accept-check-box.readonly {
            opacity: 0.5;
        }

        #notificationBox .notification-box-list .title {
            font-weight: bold;
        }

        #notificationBox .notification-box-list a {
            color: black;
        }

#toastContainer {
    position: fixed;
    top: 82px;
    right: 25px;
    z-index: 2000;
}

body.show-quick-links #toastContainer {
    top: 110px;
}


#QBmap,
#sbMap {
    height: calc(100vh - 330px);
}

#cbMap,
#staysContainer {
    height: calc(100vh - 500px);
}


.is-invalid {
    box-shadow: 0 0 10px 1px rgba(255,0,0,50);
}

#staysContainer {
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 20px;
}

.scroll-y-container {
    overflow-y: scroll;
    overflow-x: hidden;
}

.dashboard-section-header {
    font-size: 17px;
    text-align: center;
    font-weight: bold;
}

.financePrimoPostingEditContainer {
    height: calc(100vh - 120px);
}

.financePrimoPostingEditAccountContainer {
    height: calc(100% - 30px);
    overflow-y: scroll;
    padding: 0px 15px 0px 0px;
}

.financePrimoPostingSummaryBar {
    height: 30px;
    padding-right: 32px;
}

.bookingItem.active-duration-switch {
    font-style: italic;
}

.ml-neg15px {
    margin-left: -15px !important;
}

.mr-neg15px {
    margin-right: -15px !important;
}

#registerInvoiceGroupPaymentModal > .modal-dialog,
#registerManualInvoiceGroupPaymentModal > .modal-dialog,
{
    max-width: 600px;
}

#deletePowerConsumptionBPLConfirmationModal > .modal-dialog > .modal-content {
    width: 600px;
}

.changelog-description a {
    color: #000;
    text-decoration: underline;
}

.overflow-visible {
    overflow: visible !important;
}

.bg-red {
    background-color: red;
}


/* QR Scanning */
#QRReader video {
    height: 100%;
}



.resource-booking .resource-booking-information-hover {
    position: absolute;
    top: 25px;
    left: 15px;
    text-align: left;
    font-size: 0.7em;
    padding: 5px 10px;
    display: none;
    opacity: 0;
    box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.4);
    transition: all ease-in-out 0.5s;
    z-index: 1000;
    white-space: nowrap;
    border-radius: 5px;
    line-height: 130%;
}

.resource-booking:hover .resource-booking-information-hover {
    display: block;
    opacity: 1;
}



.validate-new-code-message-icon {
    position: absolute;
    right: 25px;
    top: 12px;
}


.font-size-14 {
    font-size: 14px;
}

#creditVoucherSideBarsContainer {
    height: calc(100vh - 120px);
    overflow-y: auto;
}

.transaction-logs-container {
    height: calc(100vh - 400px);
    overflow-y: auto;
}

.transaction-log-console-container {
    height: calc(100vh - 400px);
}

textarea#terminalConsole {
    resize: none;
    height: calc(100vh - 370px);
}

.nowrap {
    white-space: nowrap;
}

.input-error {
    box-shadow: 0 0 5px 0px rgba(255,0,0,0.6);
}

.inactive-row td {
    background-color:#ccc;
    color:#777;
    font-style:italic;
}

.opacity-50 {
    opacity: 0.5 !important;
}

.product-warning {
    position:absolute;
    top:9px;
    left:20px;
}
.product-summary-warning {
    position: absolute;
    top: 9px;
    left: 20px;
}