/*Modal body overflow*/
.modal-auto-height .modal-body {
    overflow-y: auto;
}

/*fix jqueryUI modal vertical positioning*/
/*.ui-dialog {
    top: 0px !important;
    margin-top:20px !important;
    bottom: 20px !important;
    height:auto !important;
}

.ui-dialog-content {
    height: 90% !important;
    overflow-y: auto;
    overflow-x: hidden;
}*/


/*Progress bars*/
.table .progress {
    margin-bottom: 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;
}

/*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 {
}

.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 ul.bottom {
    white-space: nowrap;
    padding-top: 20px;
    position: relative;
    vertical-align: top;
    margin: 0px;
}

.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 li:first-child {
    width: 30%;
    float: left;
}


.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;
    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;
}

.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;
}

.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);
}

/*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;
}

.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;
}

/*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:90px;
}
.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 {
    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 {
}

/*Vis.js timeline infinite loop fix:*/
.timeline-placeholder {
    border: 1px solid #bfbfbf;
}
.vis-timeline {
    border:unset !important;
}

/*TinyMce styles - From mention plugin*/
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;
}

.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;}

/*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;
}