



/*Modal body overflow*/
.modal-auto-height .modal-body {
    overflow-y: auto;
}

.bg-grey {
    background-color: #eeeeee;
}

/*Autoexpand textareas*/
textarea.auto-expand {
    width: 100%;
    overflow: hidden;
}

/*Progress bars*/
.table .progress {
    margin-bottom: 0px;
}

/*
.query-progress-bar {
    height: 3px;
    margin-top: -3px;
    position: absolute;
    transform: translate3d(-15px, -15px, 0px);
}
*/

.progress-bar-auto-advance {
    -webkit-animation: advanceprogress 10s infinite cubic-bezier(.05,.1,.2,1), bgPosition 1s infinite linear;
    animation: advanceprogress 10s infinite cubic-bezier(.05,.1,.2,1), bgPosition 1s infinite linear;
}

@keyframes advanceprogress {
    from {
        width: 1%;
    }

    90% {
        margin-left: 0px;
        width: 100%;
    }

    to {
        margin-left: 99%;
        width: 1%;
    }
}

@keyframes bgPosition {
    from {
        background-position-x: 0px;
    }

    to {
        background-position-x: 40px;
    }
}

.blur-loading .progress-bar:not(.ng-hide) + .panel-body {
    filter: blur(5px);
}

.blur-loading .panel-body {
    filter: blur(0px);
    transition: filter 0.2s linear;
}

.loading-overlay {
    overflow: hidden;
}

    .loading-overlay:before {
        content: ' ';
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background-color: rgba(0,0,0,0.2);
        z-index: 4;
    }

    .loading-overlay:after {
        content: "\f110";
        position: absolute;
        top: 90px;
        left: 0px;
        right: 0px;
        font-family: Font Awesome\ 5 Free;
        font-weight: 900;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        font-size: 100px;
        text-align: center;
        z-index: 5;
        -webkit-animation: a 1s infinite steps(9);
        animation: a 1s infinite steps(9);
        color: #337ab7;
    }

/*--- FORM COMPONENTS ---*/
/*Edit and display modes*/
.edit-mode-only {
    display: none !important;
}

.edit-mode .edit-mode-only {
    display: inline-block !important;
}

.display-mode-only {
    display: none !important;
}

.display-mode .display-mode-only {
    display: inline-block !important;
}

.display-mode .display-mode-hide,
.edit-mode .edit-mode-hide {
    display: none !important;
}


.currency-eur .calculated-value:after {
    content: '\20AC';
    margin-left: 5px;
}

.hide-button-text .button-text{
    display:none;
}

/*display sections as table rows*/
.section-as-table {
}

    .section-as-table .panel,
    .section-as-table-row .panel {
        margin-bottom: 0px !important;
    }

    .section-as-table .panel-body,
    .section-as-table-row .panel-body {
        padding: 5px !important;
    }

.section-as-table {
}

.section-as-table {
}

/*Fix some ui-select issues*/
.ui-select-multiple.ui-select-bootstrap {
    padding: 0px !important;
}

.ui-select-container.open .ui-select-choices {
    opacity: 1 !important;
}
/*UI-select*/
.ui-select-clear {
    position: absolute;
    right: 20px;
    z-index: 1;
    top: 10px;
    color: #555;
}

.ui-select-placeholder {
    text-overflow: ellipsis;
    max-width: 100%;
    overflow-x: hidden;
    display: inline-block;
}

.ui-select-container .form-control {
    white-space: initial;
    /*height: auto;
    min-height: 32px;*/
}

.ui-select-container .ui-select-choices-row > span {
    white-space: initial !important;
}

/*Org Chart Basic styling*/
.org-chart {
}

.org-chart-inner {
    display: block;
    text-align: center;
}

.org-chart ul {
    margin:0px;
}

.org-chart li {
    list-style: none;
    list-style-type: none;
    display: inline-block;
    text-align: center;
    position: relative;
    padding: 20px 5px 0 5px;
    vertical-align: top;
}

.org-chart .columnTwo > li > ul > li {
    display: block;
}

.org-chart ul.bottom {
    white-space: nowrap;
    padding-top: 20px;
    position: relative;
    vertical-align: top;
    margin: 0px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.org-chart .box {
    border: 1px solid #ccc;
    padding: 10px;
    display: inline-block;
    background-color: white;
    font-weight: bold;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.10);
    max-width: 150px;
    width: 130px;
    height: 65px;
}

.org-chart-small .box {
    padding: 3px;
    width: 70px;
    height: 30px;
    font-size: 6pt;
}

    .org-chart-small .box:hover {
        padding: 10px;
        width: 130px;
        height: 65px;
        font-size: inherit;
    }

/*We will use ::before and ::after to draw the connectors*/
.org-chart ul.bottom ul.bottom::before,
.org-chart li.bottom::before,
.org-chart li.bottom::after,
.org-chart ul.columnTwo > li:first-child,
.org-chart .columnTwo > li > ul > li:before {
    border-color: #ccc;
}

.org-chart li.bottom::before, .org-chart li.bottom::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top-width: 1px;
    border-top-style: solid;
    width: 50%;
    height: 20px;
}

.org-chart li.bottom::after {
    right: auto;
    left: 50%;
    border-left-width: 1px;
    border-left-style: solid;
}

/*We need to remove left-right connectors from elements without any siblings*/
.org-chart li.bottom.root::after,
.org-chart li.bottom:only-child::after,
.org-chart li.bottom:only-child::before {
    display: none;
}

/*Remove space from the top of single children*/
.org-chart li.bottom:only-child {
    padding-top: 0;
}

/*Remove left connector from first child and right connector from last child*/
.org-chart li.bottom:first-child::before,
.org-chart li.bottom:last-child::after {
    border: 0 none;
}

/*Adding back the vertical connector to the last nodes*/
.org-chart li.bottom:last-child::before {
    border-right-width: 1px;
    border-right-style: solid;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}

.org-chart li.bottom:first-child::after {
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.org-chart ul.bottom ul.bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left-width: 1px;
    border-left-style: solid;
    width: 0;
    height: 20px;
}




.org-chart ul.columnTwo:before {
    content: "";
    display: block;
    position: relative;
    width: 80%;
    height: 10px;
    margin: 0 auto;
    top: 40px;
}

.org-chart li.columnTwo {
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
    position: absolute;
    width: 88%;
    top: 35%;
}

    .org-chart li.columnTwo:before {
        left: 59%;
    }

    .org-chart li.columnTwo:after {
        right: 59%;
    }


.org-chart ul.columnTwo {
    position: relative;
    width: 100%;
    clear: both;
}

    .org-chart ul.columnTwo > li {
        width: 50%;
        list-style: none;
        margin: 0px;
        padding:0px;
        float: left;
    }

        .org-chart ul.columnTwo > li:first-child {
            border-right-width: 1px;
            border-right-style: solid;
            margin-right: -1px;
        }

    .org-chart ul.columnTwo:after {
        display: table;
        clear: both;
        content: '';
    }

.org-chart .columnTwo > li > ul > li {
    position: relative;
    text-align: left;
    margin-bottom: 8px;
    margin-top: 7px;
    padding: 5px 15px 5px 15px;
    z-index: 1;
}

.org-chart .columnTwo > li:first-child > ul > li {
    text-align: right;
}

.org-chart .columnTwo > li > ul > li a {
    margin-left: 25px;
    margin-right: 25px;
}


.org-chart .columnTwo > li > ul > li:before {
    content: '';
    width: 25px;
    height: 50%;
    position: absolute;
    left: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    z-index: -1;
}

.org-chart .columnTwo > li:first-child > ul > li:before {
    right: 0px;
    left: auto;
}








.org-chart li a {
    text-decoration: none;
    white-space: normal;
}

/*Time for some hover effects and transitions*/
.org-chart ul,
.org-chart li,
.org-chart li a {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}


    /*We will apply the hover effect the the lineage of the element also*/
    .org-chart li.bottom a:hover,
    .org-chart li.bottom a:hover + ul.bottom li.bottom a,
    .org-chart label:hover:before {
        background: #003143;
        color: white;
    }

    /*Selection Styles*/
    .org-chart li.selected > div > .box {
        border: 1px solid #003143;
    }


/*Expand and collapse*/
.org-chart label {
    display: block;
    width: 100%;
    cursor: pointer;
    position: relative;
    margin-top: -9px;
}

    .org-chart label:before {
        content: '+';
        width: 20px;
        height: 20px;
        position: absolute;
        z-index: 1;
        margin-left: -10px;
        border-bottom: 1px solid #CCC;
        border-radius: 50%;
        background-color: white;
        font-weight: bold;
        box-shadow: 0px 4px 10px rgba(0,0,0,0.10);
    }

.org-chart input[type="checkbox"]:checked + label:before {
    content: '-';
}


.org-chart input[type="checkbox"] {
    display: none;
}

    .org-chart input[type="checkbox"] ~ ul {
        display: none;
    }

    .org-chart input[type="checkbox"]:checked ~ ul {
        display: block;
    }


/*Magnifier*/
.magnifier {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

/*selected cards (for DND)*/
.card.selected {
    background-color: rgba(79,205,0,0.3);
}

tr.selected td {
    background-color: #87bddb;
}

th.table-row-selection .tooltip {
    transform: translate3d(-31%, -83%,0);
}

th.table-row-selection .tooltip-inner {
    padding: 5px 10px;
}

/*Popover toolbars*/
.hover-toolbar {
    top: 10px;
    display: none;
    position: absolute;
    z-index: 1;
    left: 0px;
    background-color: rgba(0,0,0,0.5);
    padding: 5px;
    box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.2);
    transform: translate(0, -95%);
}

.hover-toolbar-right {
    left: unset;
    right: 0px;
}

.hover-toolbar > * {
    color: #EEE;
    cursor: pointer;
}

    .hover-toolbar > *:hover {
        color: #FFF;
    }

*:hover > .hover-toolbar {
    display: inline-block;
}

.hover-visible {
    display: none;
}
.hover-container:hover .hover-visible {
    display: inline-block;
}

.hover-opacity {
    opacity: 0;
    transition: all 0.2s ease;
}

.hover-opacity-semi {
    opacity: 0.2;
}

.hover-container:hover .hover-opacity {
    opacity:1;
}



.no-img img {
    display: none;
}

.popover.popover-lg {
    max-width: unset;
}
/*JQUERY UI Resizable styles*/
.ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
    -ms-touch-action: none;
    touch-action: none;
}

    .ui-resizable-handle:hover {
        background-color: rgba(0,0,0,0.2);
    }

.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -2px;
    left: 0;
}

.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -2px;
    left: 0;
}

.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%;
}

.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%;
}

.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px;
}

.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px;
}

.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px;
}

.ui-resizable-ne {
    cursor: ne-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px;
}

.ui-resizable-helper {
    border: 2px dotted #00F;
}

.ui-draggable-dragging {
    z-index: 1;
}

.ui-draggable-handle {
    cursor: move;
}


.table-handle-cell {
    padding: 10px 5px;
}
.table-handle-cell i {
    cursor:ns-resize;
}

.resizable-height .ui-resizable-handle {
    background-color: rgba(0,0,0,0.1);
}

    .resizable-height .ui-resizable-handle.ui-resizable-s:before {
        content: "";
        position: absolute;
        border-top: 1px solid #888;
        border-bottom: 1px solid #888;
        width: 30px;
        height: 3px;
        top: 2px;
        left: 50%;
        transform: translateX(-50%)
    }


/*year heatmap styles*/
.year-heatmap {
}

    .year-heatmap .year-heatmap-left-column {
        position: absolute;
        width: 20px;
    }

    .year-heatmap .year-heatmap-main-area {
        position: relative;
        margin-left: 20px;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .year-heatmap .year-heatmap-head {
        height: 15px;
        overflow: hidden;
    }

    .year-heatmap .year-heatmap-body {
        position: relative;
        min-height: 75px;
    }

    .year-heatmap .year-heatmap-cell {
        height: 10px;
        font-size: 9px;
    }

    .year-heatmap .year-heatmap-main-area .year-heatmap-cell {
        position: absolute;
    }

    .year-heatmap .year-heatmap-main-area .year-heatmap-body .year-heatmap-cell,
    .year-heatmap .year-heatmap-main-area .year-heatmap-weeks .year-heatmap-cell {
        border: 1px solid rgba(255,255,255,0.6);
        background-color: rgba(0,0,0,0.1);
        width: 10px;
    }

    .year-heatmap .last-day-of-month {
        border-bottom-color: rgba(0,0,0,0.4) !important;
    }

    .year-heatmap .last-week-of-month {
        border-right-color: rgba(0,0,0,0.4) !important;
    }

    .year-heatmap .last-day-of-month.last-month-of-year {
        border-bottom-width: 2px !important;
        border-bottom-color: rgba(0,0,0,0.6) !important;
    }

    .year-heatmap .last-week-of-month.last-month-of-year {
        border-right-width: 2px !important;
        border-right-color: rgba(0,0,0,0.6) !important;
    }

    .year-heatmap .year-heatmap-cell.has-data {
    }


.year-heatmap-big .year-heatmap .year-heatmap-left-column {
    width: 40px;
}

.year-heatmap-big .year-heatmap .year-heatmap-main-area {
    margin-left: 40px;
}

.year-heatmap-big .year-heatmap .year-heatmap-head {
    height: 20px;
}

.year-heatmap-big .year-heatmap .year-heatmap-body {
    min-height: 750px;
}

.year-heatmap-big .year-heatmap .year-heatmap-cell {
    height: 15px;
    font-size: 11px;
}


.year-heatmap-big .year-heatmap .year-heatmap-main-area .year-heatmap-body .year-heatmap-cell,
.year-heatmap-big .year-heatmap .year-heatmap-main-area .year-heatmap-weeks .year-heatmap-cell {
    width: 15px;
}

/*Monthly heatmap*/

.month-heatmap {
    --left-column-width: 30px;
    font-size: 9px;
    margin-left: var(--left-column-width);
    position: relative;
}

.month-heatmap .month-heatmap-month {
    float: left;
    padding-bottom:15px;
}

.month-heatmap .month-header {
    text-align:center;
}

.month-heatmap .month-heatmap-left-column {
    position: absolute;
    left: calc(var(--left-column-width)*-1);
    width: var(--left-column-width);
    background-color: #FFF;
}

    .month-heatmap .month-heatmap-month .month-heatmap-left-column .month-heatmap-cell {
        width: var(--left-column-width);
    }

.month-heatmap .month-heatmap-month-body {
    float: left;
    position: relative;
}

.month-heatmap .month-heatmap-cell {
    width: 30px;
    height: 25px;
    position: absolute;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.6);
}

.month-heatmap .month-heatmap-month .month-heatmap-cell {
    padding:3px;
}

.month-heatmap .month-heatmap-month-body .month-heatmap-cell {
    background-color: rgba(0,0,0,0.1);
    z-index:1;
}

.month-heatmap .last-day-of-month {
    border-bottom-color: rgba(0,0,0,0.4) !important;
}

.month-heatmap .last-week-of-month {
    border-right-color: rgba(0,0,0,0.4) !important;
}

.month-heatmap .last-day-of-month.last-month-of-year {
    border-bottom-width: 2px !important;
    border-bottom-color: rgba(0,0,0,0.6) !important;
}

.month-heatmap .last-week-of-month.last-month-of-year {
    border-right-width: 2px !important;
    border-right-color: rgba(0,0,0,0.6) !important;
}

.month-heatmap .month-heatmap-cell.has-data {
}

.show-values .month-heatmap .month-heatmap-cell.has-data:before {
    content: attr(data-value);
}

    /*Vis.js timeline infinite loop fix:*/
    .timeline-placeholder {
        border: 1px solid #bfbfbf;
    }

.vis-timeline {
    border: unset !important;
}

/*TinyMce styles*/
.tox.tox-tinymce.tox-fullscreen {
    width: 100% !important;
    height: 100% !important;
}

span#autocomplete {
    font-weight: bold;
}

.rte-autocomplete {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    z-index: 2000 !important;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.2);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
}

    .rte-autocomplete:before {
        content: '';
        display: inline-block;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #ccc;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: -7px;
        left: 9px;
    }

    .rte-autocomplete:after {
        content: '';
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid white;
        position: absolute;
        top: -6px;
        left: 10px;
    }

    .rte-autocomplete > li.loading {
        background: url("https://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif") center no-repeat;
        height: 16px;
    }

    .rte-autocomplete > li > a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: normal;
        line-height: 20px;
        color: #333;
        white-space: nowrap;
        text-decoration: none;
    }

        .rte-autocomplete > li > a:hover, .rte-autocomplete > li > a:focus, .rte-autocomplete:hover > a, .rte-autocomplete:focus > a {
            color: #fff;
            text-decoration: none;
            background-color: #0081c2;
            background-image: -moz-linear-gradient(top,#08c,#0077b3);
            background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));
            background-image: -webkit-linear-gradient(top,#08c,#0077b3);
            background-image: -o-linear-gradient(top,#08c,#0077b3);
            background-image: linear-gradient(to bottom,#08c,#0077b3);
            background-repeat: repeat-x;
            filter: progid:DXImageTransform.Microsoft;
        }

    .rte-autocomplete > .active > a, .rte-autocomplete > .active > a:hover, .rte-autocomplete > .active > a:focus {
        color: #fff;
        text-decoration: none;
        background-color: #0081c2;
        background-image: -moz-linear-gradient(top,#08c,#0077b3);
        background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));
        background-image: -webkit-linear-gradient(top,#08c,#0077b3);
        background-image: -o-linear-gradient(top,#08c,#0077b3);
        background-image: linear-gradient(to bottom,#08c,#0077b3);
        background-repeat: repeat-x;
        outline: 0;
        filter: progid:DXImageTransform.Microsoft;
    }

/*Year maps*/
.calendar-map-row {
    height: 20px;
    min-width: 100%;
    white-space: nowrap;
}

.calendar-map-cell-placeholder {
    display: inline-block;
    white-space: nowrap;
}

.calendar-map-cell {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    width: 20px !important;
    height: 15px;
    border: 1px solid rgba(0,0,0,.4);
    text-align: center;
    font-size: 10px;
}

    .calendar-map-cell.active {
        color: white;
        background-color: #337ab7;
        text-shadow: -1px 1px 1px black;
    }

    .calendar-map-cell > span {
        z-index: 3;
        position: absolute;
        left: 0px;
        right: 0px;
    }

    .calendar-map-cell.start, .calendar-map-cell.end,
    .calendar-map-cell .selection-start, .calendar-map-cell .selection-end {
        background-color: transparent !important;
    }

        .calendar-map-cell.end:before,
        .calendar-map-cell .selection-end:before {
            content: "";
            position: absolute;
            height: 0px;
            width: 0px;
            border: 7px solid #337ab7;
            border-right-color: transparent !important;
            border-bottom-color: transparent !important;
            left: 0px;
            top: -1px;
        }

        .calendar-map-cell.start:after,
        .calendar-map-cell .selection-start:after {
            content: "";
            position: absolute;
            height: 0px;
            width: 0px;
            border: 7px solid #337ab7;
            border-left-color: transparent !important;
            border-top-color: transparent !important;
            right: -1px;
            top: 0px;
        }
    /*Contextual colors:*/
    .calendar-map-cell.default {
        background-color: #AAAAAA;
    }

    .calendar-map-cell.default-end:before {
        border-top-color: #AAAAAA;
        border-left-color: #AAAAAA;
    }

    .calendar-map-cell.default-start:after {
        border-bottom-color: #AAAAAA;
        border-right-color: #AAAAAA;
    }

    .calendar-map-cell.primary {
        background-color: #337ab7;
    }

    .calendar-map-cell.primary-end:before {
        border-top-color: #337ab7;
        border-left-color: #337ab7;
    }

    .calendar-map-cell.primary-start:after {
        border-bottom-color: #337ab7;
        border-right-color: #337ab7;
    }

    .calendar-map-cell.success {
        background-color: #5cb85c;
    }

    .calendar-map-cell.success-end:before {
        border-top-color: #5cb85c;
        border-left-color: #5cb85c;
    }

    .calendar-map-cell.success-start:after {
        border-bottom-color: #5cb85c;
        border-right-color: #5cb85c;
    }

    .calendar-map-cell.info {
        background-color: #5bc0de;
    }

    .calendar-map-cell.info-end:before {
        border-top-color: #5bc0de;
        border-left-color: #5bc0de;
    }

    .calendar-map-cell.info-start:after {
        border-bottom-color: #5bc0de;
        border-right-color: #5bc0de;
    }

    .calendar-map-cell.warning {
        background-color: #f0ad4e;
    }

    .calendar-map-cell.warning-end:before {
        border-top-color: #f0ad4e;
        border-left-color: #f0ad4e;
    }

    .calendar-map-cell.warning-start:after {
        border-bottom-color: #f0ad4e;
        border-right-color: #f0ad4e;
    }

    .calendar-map-cell.danger {
        background-color: #d9534f;
    }

    .calendar-map-cell.danger-end:before {
        border-top-color: #d9534f;
        border-left-color: #d9534f;
    }

    .calendar-map-cell.danger-start:after {
        border-bottom-color: #d9534f;
        border-right-color: #d9534f;
    }

    .calendar-map-cell .selection {
        position: absolute;
        z-index: 1;
        opacity: 0.7;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: -1px;
        background-color: #d9d900;
    }

    .calendar-map-cell .selection-end:before {
        border-top-color: #d9d900;
        border-left-color: #d9d900;
    }

    .calendar-map-cell .selection-start:after {
        border-bottom-color: #d9d900;
        border-right-color: #d9d900;
    }

    .calendar-map-cell.active:not(.end) .selection {
        -webkit-animation-name: blink;
        -moz-animation-name: blink;
        -o-animation-name: blink;
        animation-name: blink;
        -webktit-animation-timing-function: linear;
        -moz-animation-timing-function: linear;
        -o-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-duration: 1s;
        -moz-animation-duration: 1s;
        -o-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-iteration-count: 3;
        -moz-animation-iteration-count: 3;
        -o-animation-iteration-count: 3;
        animation-iteration-count: 3;
    }

/*CHarts fullscreen mode*/
.full-screen {
    position: fixed !important;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 20000;
    background-color: white;
    margin: 15px;
    box-shadow: 0px 0px 20px rgba(0,0,0,.5);
    padding: 15px;
}

.chart-toolbar {
    position: absolute;
    right: 15px;
    top: -15px;
    display: none;
}

[ui-chart]:hover .chart-toolbar,
[ui-chart].full-screen {
    display: inline-block;
}

[ui-chart].full-screen {
    width: 100%;
    margin: 0px;
}

[ui-chart].full-screen .chart-toolbar {
    top: 15px;
    right: 15px;
}


.chart-toolbar .maximize {
    display: inline-block;
}

.chart-toolbar .restore {
    display: none;
}

.full-screen .chart-toolbar .maximize {
    display: none;
}

.full-screen .chart-toolbar .restore {
    display: inline-block;
}


/*Files drop area*/
.file-drag-hover {
    border: 2px dashed rgb(2,139,255);
}

.file-drop-zone {
    display: none;
    font-size: 20px;
    font-weight: bold;
}

    .file-drop-zone .drop-text {
        position: absolute;
        top: 50%;
        left: 0px;
        right: 0px;
    }

.file-drag-hover .file-drop-zone {
    display: initial;
    text-align: center;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border: 1px solid black;
    z-index: 1;
    background-color: rgba(255,255,255,0.5);
}

/*Positioning helpers*/
.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative;
}

.position-fixed {
    position: fixed;
}

.position-sticky {
    position: sticky;
}

.position-left {
    left: 0px;
}

.position-left-15 {
    left: 15px;
}

.position-right {
    right: 0px;
}

.position-right-15 {
    right: 15px;
}

.position-top {
    top: 0px;
}

.position-top-15 {
    top: 15px;
}

.position-bottom {
    bottom: 0px;
}

.position-bottom-15 {
    bottom: 15px;
}

/*Z-index utils*/
.z-1 {
    z-index: 1;
}

.z-1001 {
    z-index: 1001;
}

.z-2000 {
    z-index: 2000;
}

.z-10000 {
    z-index: 10000;
}

/*Height utils*/
.h-50 {
    height: 50px;
}

.h-100 {
    height: 100px;
}

.h-150 {
    height: 150px;
}

.h-200 {
    height: 200px;
}

.h-300 {
    height: 300px;
}

.h-450 {
    height: 450px;
}

.h-full {
    height: 100%;
}

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.flex-col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.flex-col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

/*Scrol table default minimum styles*/
.scroll-table {
}

.scroll-table-left-column {
    position: absolute;
    width: 200px;
    border-right: 1px solid rgba(0,0,0,.4);
}

.scroll-table-main-area {
    margin-left: 200px;
    border-right: 1px solid rgba(0,0,0,.4);
}

.scroll-table-main-area-inner {
}

.scroll-table .events-placeholder {
    position: absolute;
    z-index: 3;
}

    .scroll-table .events-placeholder .event {
        position: absolute;
        white-space: nowrap;
    }

.scroll-table-head {
    height: 50px;
    border-bottom: 1px solid rgba(0,0,0,.4);
    text-align: center;
    white-space: nowrap;
    width: 100%;
    overflow-x: hidden;
}

.scroll-table-head-group {
    display: inline-block;
    vertical-align: bottom;
    white-space: nowrap;
    border-right: 1px solid #ddd;
    margin-right: -1px;
}

.scroll-table-body {
    transform: translateZ(0);
    width: 100%;
    max-height: 60vh;
    overflow-x: auto;
    overflow-y: auto;
}

.scroll-table-main-area .scroll-table-body {
    background-color: rgba(0,0,0,0.05);
}

    .scroll-table-main-area .scroll-table-body .data-mask {
        position: absolute;
        background-color: rgba(255,255,255,0.7);
        z-index: 1;
    }

.scroll-table-row {
    height: 20px;
    min-width: 100%;
    border-bottom: 1px solid rgba(0,0,0,.4);
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.scroll-table-main-area .scroll-table-row,
.scroll-table-main-area .scroll-table-head {
    display: inline-block;
    vertical-align: bottom;
    overflow-y: hidden;
}

    .scroll-table-main-area .scroll-table-row:hover {
        background-color: rgba(0,0,0,.1);
    }

.scroll-table-cell {
    position: relative;
    display: inline-block;
    width: 20px !important;
    height: 20px;
    overflow: hidden;
    text-align: center;
}

.scroll-table-head {
    border-bottom: 1px solid rgba(0,0,0,.4);
    font-size: 0.8em;
}

    .scroll-table-head .scroll-table-cell {
        height: 15px;
        border: 1px solid rgba(0,0,0,.4);
    }

    .scroll-table-head h5 {
        height: 15px;
        padding: 2px;
        margin: 0px;
    }

.legend-item .scroll-table-cell {
    width: 10px;
    height: 10px;
}

    .legend-item .scroll-table-cell .day-label {
        width: 10px;
        height: 10px;
        font-size: 8px;
    }

.scroll-table-cell.day {
    border-left: 1px solid rgba(0,0,0,.4);
}

.scroll-table-head .month-days .scroll-table-cell.day {
    background-color: rgba(0,0,0,0.05);
}

.scroll-table-cell.day:last-child {
    border-right: 1px solid rgba(0,0,0,.4);
}

.scroll-table-cell .day-label {
    text-align: center;
    height: 20px;
    vertical-align: middle;
    display: table-cell;
    width: 20px;
    position: relative;
    z-index: 1;
}

/*Days status*/
.scroll-table-cell span {
    z-index: 1;
    position: relative;
}

.scroll-table-cell.active {
    color: white;
    background-color: #337ab7;
    text-shadow: -1px 1px 1px black;
}

.scroll-table-cell.start, .scroll-table-cell.end {
    background-color: transparent;
}

    .scroll-table-cell.end:before {
        content: "";
        position: absolute;
        height: 0px;
        width: 0px;
        border: 10px solid #337ab7;
        border-right-color: transparent;
        border-bottom-color: transparent;
        left: 0px;
        top: -2px;
    }

    .scroll-table-cell.start:after {
        content: "";
        position: absolute;
        height: 0px;
        width: 0px;
        border: 10px solid #337ab7;
        border-left-color: transparent;
        border-top-color: transparent;
        right: -2px;
        top: 0px;
    }

/*Filter styling as a search box*/
.search-box {
    position: relative;
}

    .search-box:before {
        position: absolute;
        right: 20px;
        top: 5px;
        font-family: Font Awesome\ 5 Free;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        content: "\f002";
        font-weight: 900;
    }

/*Todo: Move to skin*/
.auto-slideshow > * {
    position: absolute;
    left: 0;
    right: 0;
}

    .auto-slideshow > *:not(:nth-child(1)) {
        opacity: 0;
        animation-name: fade;
        animation-duration: 9s;
        animation-iteration-count: infinite;
    }

    .auto-slideshow > *:nth-child(1) {
        animation-delay: 0s;
    }

    .auto-slideshow > *:nth-child(2) {
        animation-delay: 3s;
    }

    .auto-slideshow > *:nth-child(3) {
        animation-delay: 6s;
    }

    .auto-slideshow > *:nth-child(4) {
        animation-delay: 9s;
    }

    .auto-slideshow > *:nth-child(5) {
        animation-delay: 12s;
    }

    .auto-slideshow > *:nth-child(6) {
        animation-delay: 15s;
    }

    .auto-slideshow > *:nth-child(7) {
        animation-delay: 18s;
    }

    .auto-slideshow > *:nth-child(8) {
        animation-delay: 21s;
    }

    .auto-slideshow > *:nth-child(9) {
        animation-delay: 24s;
    }

    .auto-slideshow > *:nth-child(10) {
        animation-delay: 27s;
    }

@keyframes fade {
    0% {
        opacity: 0;
    }

    11.11% {
        opacity: 1;
    }

    33.33% {
        opacity: 1;
    }

    44.44% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.nested-list li {
    list-style: none;
    position: relative;
    margin-top: -1px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.nested-list .list-group-item {
    padding: 3px 15px;
}

    .nested-list .list-group-item[ng-click] {
        cursor: pointer;
    }

.nested-list .expand-collapse {
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: inline-block;
    padding: 6px;
}

.nested-list .expand-collapse {
    position: absolute;
    top: 6px;
    right: 0px;
    z-index: 3;
}

.nested-list ul.collapse + .expand-collapse:before {
    content: "\f078";
}

.nested-list ul.collapse.in + .expand-collapse:before {
    content: "\f077";
}

.nested-list li a {
    padding-right: 15px;
    display: inline-block;
}

/*Cursor Helpers*/
.cursor-pointer,
.fake-link {
    cursor: pointer;
}

/*Overlay mask utilities*/
.mask-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 640px;
    height: 480px;
    transform: translate3d(-50%, -50%,0);
}

.mask-element {
    position: absolute;
    z-index: 1;
    background-color: #000;
    opacity: 0.6;
}

.capture-zone {
    position: absolute;
    z-index: 2;
    border: 1px solid #d9534f;
}

/*File browser styles*/

.file-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.file-card-thumb {
    width: 100%;
    height: 100%;
}

    .file-card-thumb > * {
        width: 100%;
        height: 100%;
        display: inline-block;
    }

    .file-card-thumb img {
        max-width: 100%;
        max-height: 100%;
        min-width: 32px;
        min-height: 32px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%,-50%,0);
    }

.file-card-name {
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    background-color: rgba(255,255,255,0.9);
    padding: 5px;
    word-break: break-word;
}


.file-card-inner:hover {
    width: 160%;
    height: 160%;
    position: absolute;
    z-index: 5;
    transform: translate3d(-25%, -25%, 0);
    background: white;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
}

.over-tinymce {
    z-index: 65537 !important;
}

.breadcrumb > li {
    cursor: pointer;
}


.folder-navigation {
}

    .folder-navigation ul {
    }

    .folder-navigation li {
        list-style: none;
    }

    .folder-navigation .expand-collapse {
        position: absolute;
        background-color: white;
        border: 1px solid #888;
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-left: -15px;
        margin-top: 4px;
        text-align: center;
    }

    .folder-navigation .expand-collapse a {
        margin-top: -5px;
        display: block;
    }

    .folder-navigation .folder-node.selected,
    .folder-navigation .folder-node.selected a.folder-name {
        background-color: #337ab7;
        color: white;
    }


/*Styles for Month Matrix*/
.month-matrix {
    position: relative;
    z-index: 1;
    background-color: rgba(0,0,0,0.1);
    display: inline-block;
    font-size: 0;
}

.month-matrix-body > *, .month-matrix-ruler, .month-matrix-x-headers, .month-matrix-y-headers {
    font-size: 1rem;
}

.month-matrix-corner-area, .month-matrix-x-headers, .month-matrix-y-headers {
    position: absolute;
    z-index:-1;
}
.month-matrix-axis-title {
    position: absolute;
    background-color: rgba(0,0,0,0.1);
}
.month-matrix-x-headers .month-matrix-axis-title {
    height: 20px;
    line-height: 20px;
    width: 100%;
    text-align: center;
}
.month-matrix-y-headers .month-matrix-axis-title {
    transform: rotate( -90deg ) translate3d(-50%,0,0);
    transform-origin: top left;
    left: 0px;
    top: 50%;
    width: 360px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    z-index: 1;
}
.month-matrix-corner-area .month-matrix-cell, .month-matrix-x-headers .month-matrix-cell, .month-matrix-y-headers .month-matrix-cell {
    position: absolute;
}
.month-matrix-x-headers .month-matrix-cell {
    top: 20px;
    height: 20px;
    line-height: 20px;
}

.month-matrix-y-headers .month-matrix-cell {
    margin-left: 20px;
    width: 40px;
}


.month-matrix-ruler {
    position: absolute;
    background-color: rgba(255,255,255,0.4);
    z-index: -2;
}
.month-matrix-x-headers, .month-matrix-ruler-x {
    left: 60px;
    right: 0px;
    top: 0px;
    height: 30px;
}
.month-matrix-ruler-x {
    margin-top:10px;
}
.month-matrix-y-headers, .month-matrix-ruler-y {
        left: 0px;
        top: 40px;
        bottom: 0px;
        width: 60px;
    }
    .month-matrix-ruler-x, .month-matrix-ruler-y {
        top: 0px;
        left: 0px;
    }
.month-matrix-main-area {
    position: relative;
    display: inline-block;
    padding: 40px 0px 0px 60px;
}

.month-matrix-body {
    position: relative;
    display: inline-block;
}
.month-matrix-cell {
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    margin: -1px;
    border: 1px solid #FFF;
    overflow: hidden;
    text-align: center;
}
.month-matrix-main-area .month-matrix-body .month-matrix-cell {
position:absolute;
}


.inline-form {
}

.inline-form .ui-field:before,
.inline-form .ui-field:after {
content: " ";
display: table;
clear: both;
}

.inline-form .ui-field label {
    float: left;
    margin-right: 1ch;
}

.inline-form .ui-field label + * {
}

.line-clamp {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-1 {-webkit-line-clamp: 1;}
.line-clamp-2 {-webkit-line-clamp: 2;}
.line-clamp-3 {-webkit-line-clamp: 3;}
.line-clamp-4 {-webkit-line-clamp: 4;}
.line-clamp-5 {-webkit-line-clamp: 5;}
.line-clamp-6 {-webkit-line-clamp: 6;}
.line-clamp-7 {-webkit-line-clamp: 7;}
.line-clamp-8 {-webkit-line-clamp: 8;}

.pivot {
    border-collapse:collapse;
}
.pivot.sticky thead{
        
        position: sticky;
        top: 0px;
        z-index:3;
    }
    .pivot th, .pivot td {
        border: 1px solid #DDD;
        z-index: 1
    }
    .pivot th {
        background-color: #EEE;
        text-align: center;
    }
.pivot td{text-align:right;}
    .pivot .totals th, .pivot .totals td {
        background-color: #DDD;
        font-weight: bold;
    }
    .pivot .pivot-corner {
        z-index: 2;
        position: sticky;
        left: 0px;
        top: 0px;
    }
.pivot {}

/*Fix dialogs printing*/
@media print {
    body {
        min-width: 600px;
    }

    .modal-open .modal {
        position: absolute;
        overflow: auto;
        bottom: auto;
        right: auto;
    }

    body.modal-open > form {
        display: none;
    }

    .modal-dialog, .modal-full .modal-dialog, body.modal-open .modal-dialog {
        margin: 0px !important;
    }

    .modal-body {
        width: auto;
        height: auto;
        overflow: visible !important;
        min-width: 600px;
        margin: 0px !important;
    }


    body.modal-open .modal .modal-body {
        visibility: visible;
    }

    body.modal-open .modal .modal-footer {
        visibility: hidden;
    }

    body.modal-open .modal .modal-header {
        visibility: hidden;
    }
}

a.action-in-progress {
    position: relative;
}

    a.action-in-progress:before {
        content: "";
        position: absolute;
        background-color: rgba(0,0,0,0.1);
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        transition: width 0.6s ease;
        animation: advanceprogress 10s infinite cubic-bezier(.05,.1,.2,1), bgPosition 1s infinite linear
    }

.tags-list .tag + .tag:before {
    content: ", ";
}
.tags-list > div {
    display: inline-block;
}

span.tag {
    border: 1px solid #CCC;
    margin: 1px 3px 1px 10px;
    padding: 3px;
    line-height: 2;
    background-color: #EEE;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    position: relative;
    height: 2em;
    display: inline-block;
    border-radius: 4px;
    max-width: 200px;
    
    white-space: nowrap;
    text-overflow: ellipsis;
}

    span.tag.tags-xs {
        font-size: 11px;
        line-height: 1.5;
    }

    span.tag:hover {
        /*
    border: 1px solid rgba(0,0,0,0.2);
    background-color: rgba(0,0,0,0.1);
    box-shadow:0px 0px 3px 2px rgba(0,0,0,0.1);
    */
    }

    span.tag:before {
        content: "";
        position: absolute;
        z-index: 2;
        left: -0.72em;
        top: 0px;
        border-width: 0.92em;
        border-style: solid;
        border-left-width: 0px;
        border-color: transparent;
        border-right-color: #eee;
    }

    span.tag:after {
        content: "";
        position: absolute;
        z-index: 1;
        left: -0.85em;
        top: 0px;
        border-width: 0.92em;
        border-style: solid;
        border-left-width: 0px;
        border-color: transparent;
        border-right-color: #CCC;
    }

/*Linear processes*/
.linear-process{
    position:relative;
}

    .linear-process .linear-process-item {
        position: relative;
        display: inline-block;
        padding: 10px 5px 10px 25px;
        margin-right: 10px;
        height:37px;
        margin-bottom:0px;
        
    }

    .linear-process .linear-process-item {
        background-color: #ddd;
        color: #444;
    }

        .linear-process .linear-process-item.active {
            background-color: #439b43;
            color: #fff;
        }


            /*.linear-process .linear-process-item.active ~ .linear-process-item {
                background-color: #ddd;
                color: #444;
            }*/


        .linear-process .linear-process-item:not(:last-child):after {
            content: "";
            position: absolute;
            width: 0px;
            height: 0px;
            border: 19px solid transparent;
            border-left-color: #ddd;
            margin-top: -10px;
            margin-left: 5px;
            z-index: 2;
        }


        .linear-process .linear-process-item.active:after {
            border-left-color: #439b43;
        }

        /*.linear-process .linear-process-item.active ~ .linear-process-item:after {
            border-left-color: #ddd;
        }*/

        .linear-process .linear-process-item:not(:first-child):before {
            content: "";
            position: absolute;
            width: 0px;
            height: 0px;
            border: 19px solid transparent;
            border-left-color: #FFF;
            margin-top: -10px;
            margin-left: -25px;
            z-index: 1;
        }

        .linear-process .linear-process-item:first-child {
            padding-left: 15px;
        }
        .linear-process .linear-process-item:last-child {
            padding-right: 15px;
        }


        .linear-process .linear-process-item.invalid-status {
            background-color: #eee;
            color: #444;
        }

            .linear-process .linear-process-item.invalid-status:after {
                border-left-color: #eee;
            }

            .linear-process .linear-process-item.invalid-status ~ .linear-process-item:after {
                border-left-color: #eee;
            }

.date-range-addon .button-text {
    display: none;
}

.date-range-addon {
    float: left;
}

/*Rotate icon on expand-colapse*/
[aria-expanded="true"] + div .fas {
    transform: rotate(180deg);
}

/*Styles for table fields*/
.field-table .table-row-addbefore {
    display: none;
    position: absolute;
    left: 50%;
    top: -9px;
}

.field-table tr:hover > td > a.table-row-addbefore {
    display: inline-block;
    animation: addbefore-fade-in 50s;
}
.field-table tr {
    position: relative;
}

@keyframes addbefore-fade-in {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}
