:root {
    --timeline-edge-handle-bg: #222;
    --timeline-lane-default-height: 30px;
    --timeline-button-height: 26px;
    --timeline-button-line-height: calc(var(--timeline-button-height) - 4px);

    --timeline-button-img: 18px;

    --timeline-button-bg: #e8e8e8;
    --timeline-button-group-bg: #ccc;
    --timeline-button-group-bg-light: #bbb;
    --timeline-button-bg-hover: #AAA;

    --timeline-button-padding: 2px;

    --timeline-button-icon-color: #222;

    --timeline-button-bg-active: #EEE;
    --timeline-button-bs-active: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.3) 0px 0px 3px 2px;
}

[data-theme="dark"] {
    --timeline-button-bg: #222;
    --timeline-button-group-bg: #333;
    --timeline-button-bg-hover: #555;

    --timeline-button-group-bg-light: #444;
    --timeline-button-icon-color: #DDD;

    --timeline-button-bg-active: #222;
    --timeline-button-bs-active: rgba(255, 255, 255, 0.05) 0px 6px 24px 0px, rgba(255, 255, 255, 0.3) 0px 0px 3px 2px;
}

.timeline-controls-area
{
    display: flex;
    flex-direction: row;

    justify-content: space-between;

    width:100%;
    height: 42px;
    /*background-color: #555; */
    user-select: none;
    padding: 0px;
}

.timeline-controls-table
{
    width: 100%;
}


.timeline-controls-table td.centre
{
    text-align: center;
}

.timeline-contol-column
{
    /*
    width: 33%;
    display: inline-block;
    vertical-align: top;
    */
}

.timeline-button-group
{
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;


    background-color: var(--timeline-button-group-bg);
    /* margin-left: 10px; */
    border-radius: 20px;
    /* width: fit-content; */
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    /* top: 4px; */
    /* display: inline-block; */
    z-index: 2;

    transition: color 0.4s, background-color 0.4s, box-shadow 0.4s;
}

.timeline-button-group.light
{
    background-color: var(--timeline-button-group-bg-light);
}

.timeline-contol-column.centre
{
    width: 222px;
    margin-left: calc(16.5% - 111px);
    margin-right: calc(16.5% - 111px);
}

/*
.timeline-contol-column.right
{
    position: absolute;
    right: 0;
}
*/

.timeline-button-group.right
{
    /*
    position: absolute;
    right: 0;
    top: 0;
    */
    float: right;
}

.timeline-button
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    position: relative;
    /* display: inline-block; */
    margin: 3px;
    background-color: var(--timeline-button-bg);
    border-radius: 15px;
    width: var(--timeline-button-height);
    height: var(--timeline-button-height);
    cursor: pointer;
    /* text-align: center; */
    z-index: 2;

    line-height: var(--timeline-button-line-height);

    padding: var(--timeline-button-padding);

    box-shadow: none;

    transition: color 0.4s, background-color 0.4s, box-shadow 0.4s;
}

.timeline-button:hover
{
    background-color: var(--timeline-button-bg-hover);
}

.timeline-button .button-icon
{
    width: var(--timeline-button-img);
    height: var(--timeline-button-img);
    color: var(--timeline-button-icon-color);
    transition: color 0.4s, background-color 0.4s;
}

.timeline-button .button-icon > svg
{
    width: var(--timeline-button-img);
    height: var(--timeline-button-img);
}

.timeline-button.active
{
    background-color: var(--timeline-button-bg-active);
    box-shadow: var(--timeline-button-bs-active);
}

/*
.timeline-button svg
{
    position: relative;   
    top: 3px;   
}

.timeline-button img
{
    position: relative;   
    top: 3px;
    width: 20px;
    height: 20px;
    pointer-events: none;
}
*/

#timelineButtonsCustomLeft,
#timelineButtonsCustomRight
{
    /* display: inline-block; */

    display: flex;
    flex-direction: row;
    align-items: center;
}

#timeline-period-selector-area
{
    width:100%;
    height: 40px;
    /*background-color: var(--primary);*/
    user-select: none;
    position:relative; 
    overflow-x: hidden;
    cursor: pointer;
}

.timeline-period
{
    color: #FFF;
}

.timeline-period.today
{
    background-color: #FFF;
    color: #000;
}

#timeline-time-indicator-area
{
    width:100%;
    height: 60px;
    /*background-color: #FFF;*/
    position:relative; 
    overflow: hidden;
    cursor: pointer;
}

.timeline-lane
{
    position: absolute;
    top: 0px;
    /*height: 30px;*/
    border-bottom: 1px solid #BBB;
    width: 100%;
}

.timeline-lane.collapsed
{
    background-color: rgba(0,0,0,0.3);
}

#timeline-lanes-area
{
    position: absolute;
    width: 100%/*calc(100% - 30px)*/;
    height: 100%/*calc(100% - 209px)*/;
    background-color: #FFF;
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.14),inset 0 2px 1px -1px rgba(0,0,0,.12);
    overflow-y: hidden; 
    overflow-x: hidden; 
    user-select: none;
}

#timeline-overlays-area
{
    width: 100%/*calc(100% - 30px)*/;
    height: 100%/*calc(100% - 209px)*/;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    user-select: none;
}

#timeline-lane-markers-area
{
    width:100%;
    height: calc(100% - 209px);
    position: absolute;
    overflow: hidden;
    user-select: none;
}

.timeline-group-overlay
{
    position: absolute;
    background-color: #333; 
    border-radius: 2px; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
    color:#FFF; 
    text-align: left; 
}

.timeline-group-overlay-label
{
    pointer-events: none;
}

.timeline-edge-handle
{
    background-color: var(--timeline-edge-handle-bg);
    cursor:ew-resize;
    top:0px;
    position:absolute;
}

.timeline-start-block
{
    left: 0px; 
}

.timeline-end-block
{
    right: 0px; 
}

.timeline-group-overlay-label.expanded
{
    user-select: none; 
    text-align: center; 
    writing-mode: tb-rl; 
    transform: translateX(-50%) translateY(-50%) rotate(-180deg); 
    text-orientation: sideways; 
    position:absolute; 
    top:50%; 
    left:50%; 
    height:100%;
    white-space: nowrap;
    overflow: clip;
}

.timeline-group-overlay-label.collapsed
{
    user-select: none; 
    padding-left: 5px;
    /*text-align: center; */
    /*writing-mode: tb-rl; 
    transform: translateX(-50%) translateY(-50%) rotate(-180deg); 
    text-orientation: sideways; */
    /*position:absolute; 
    top:50%; */
    /*left:50%; */
    /*vertical-align: middle;
    height:100%;*/
}

.timeline-item-overlay
{
    position: absolute;
    background-color: #333; 
    border-radius: 2px; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
}

.timeline-item-overlay-label
{
    user-select: none; 
    color:#FFF; 
    position: absolute; 
    left: 5px; 
    top: 4px;
}

.timeline-item-overlay-status-label
{
    user-select: none; 
    color:#FFF;  
    position: absolute; 
    left: 22px; 
    top: 20px;
}

.timeline-item-overlay-status-indicator
{
    position: absolute; 
    left: 5px; 
    top: 22px; 
    user-select: none; 
    background-color:#28a745; 
    width: 12px; 
    height: 12px; 
    border-radius: 50%;
}

.laSelArea
{
    position:absolute;
    background-color:rgba(0,0,0,0.1); 
    border-radius:6px;
}

#timeline-group-controls
{
    position: absolute;
    pointer-events: none;
    z-index: 10;
}

.timeline-group-overlay-label .timeline-button 
{
    position: relative;
    top: 4px;
    margin-right: 5px;
    width:14px;
    height:14px;
}

.timeline-group-overlay-label.collapsed .timeline-button svg
{
    position: absolute;
    top: 1px;
    left: 2px;
}

#timeline-group-controls .timeline-overlay-controls #timelineExpandGroup svg 
{
    position: relative;
    top: -5px;
}

#timelineExpandGroup
{
    width:14px;
    height:14px;
}

.datepicker-native-button {
    position: relative;
}

.datepicker-native-button-input {
    position: absolute;
    overflow: hidden;
    cursor: pointer;
    width: 52px;
    height: 26px;
    left: 0;
    top: 0;
    opacity: 0;
    background-color: #000;
    z-index: 1;
}

/*
.datepicker-native-button-input::-webkit-calendar-picker-indicator {
    
    position: absolute;
    right: 0;
    width: 0px;
    height: 0px;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    
    display: none;
    -webkit-appearance: none;
}
*/

.timeline-now-line
{
    width: 2px;
    background-color: var(--primary);
    top: 0px;
    position: absolute;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    pointer-events:none;
}

.timeline-group-time-indicator
{
    position: absolute; 
    text-align: center; 
    padding-top: 4px;
}

.timeline-group-line
{
    position: absolute;
    top: 0px;
    border-left: 1px solid #888; 
    width:1px;
}

.timeline-block-time-indicator
{
    position:absolute;
    height: 30px;
    text-align: left;
    padding-top: 4px; 
    border-top: 1px solid #CCC; 
}

.timeline-block-time-indicator-line
{
    position: absolute; 
    top: 0px; 
}

.timeline-block
{
    position: absolute;
    /*height: var(--timeline-lane-default-height);*/
    overflow: hidden;
}

#timelineControlAreaCustomLeft
{
    display: inline-block;
}

.group-control-button
{
    display: inline-block;
    margin: 3px;
    background-color: #555;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    z-index: 2;

    line-height: 1;
    width: 12px;
    height: 12px;
    padding: 2px;
}

.group-control-button svg
{
    position: relative;
    top: -1px;
    left: 0px;
}