#time_controls {
   bottom: 0px;
   height: 0;
   pointer-events: none;
   position: fixed;
   width: 100%;
   z-index: 100;

   transition: height .33s;
}
.casper.tc-closed #time_controls { height: 45px; }
.casper.tc-open #time_controls { height: 125px; }

#time_controls_wrapper {
   align-items: center;
   display: flex;
   flex-direction: column;
   position: absolute;
   width: 100%;
}

#time_controls span.timezone {
   color: var(--grey-light);
   font-style: italic;
   text-transform: uppercase;
}

#play_controller {
   align-items: center;
   display: flex;
   gap: 20px;
   height: 45px;
   pointer-events: all;
   position: relative;
}

#play_controller .button_holder {
   display: flex;
   gap: 5px;
}

#play_controller .playback_holder {
   display: flex;
   gap: 5px;
}

#play_controller .playback_holder .playback_button {
   border-radius: 50%;
   height: 24px;
   width: 24px;
}

#play_controller .close_button {
   border-radius: 50%;
   height: 22px;
   opacity: 0;
   position: absolute;
   right: 0;
   top: 0;
   width: 20px;

   transform: translate(50%,-50%);
   transition: opacity .25s;
}

#play_controller .close_button .icon {
   float: left;
   height: 100%;
   padding: 5px;
   position: relative;
   stroke-width: 10px;
   width: 100%;
}

.tc-open #play_controller .close_button {
   cursor: pointer;
   opacity: 1;
}

.current_time_holder {
   font-size: 10px;
   color: #FFFFFF;
}

.current_time {
   font-weight: bold;
}

.current_period {
}


.time_menu_button {
   border-radius: 4px;
   cursor: pointer;
   display: block;
   font-size: 10px;
   height: 24px;
   line-height: 24px;
   position: relative;
   text-decoration: none;
   text-transform: uppercase;
}

.time_menu_button.live_button {
   float: left;
   padding: 0px 8px 0px 8px;
}

.time_menu_button.open_menu_button,
.time_menu_button.reset_button {
   padding: 0px 8px 0px 22px;
}

.time_menu_button.open_menu_button:after,
.time_menu_button.reset_button:after {
   height: 100%;
   left: 6px;
   position: absolute;
   top: 0;
}

.time_menu_button.open_menu_button:after { content: "\2193"; }
.time_menu_button.reset_button:after {
   content: "\21BA";
   font-size: 12px;
}

.time_menu_button_active:hover {
}

#play_controller .close_button {
}

#play_controller .close_button:hover {
}

.playback_button {
   cursor: pointer;
   float: left;
   position: relative;
}
.playback_button_disabled { cursor: default !important; }

.playback_button:after {
   content: "";
   height: 100%;
   position: absolute;
   width: 100%;
}

.playback_button_disabled { cursor: default !important; }
.playback_button_disabled:after { opacity: .25; }

.rewind_button:after { background: url('../images/timecontroller/playback_sprite.png') no-repeat -6px 1px; }
.rewind_button:hover:after { background: url('../images/timecontroller/playback_sprite.png') no-repeat -6px -20px; }

.play_button:after { background: url('../images/timecontroller/playback_sprite.png') no-repeat -34px 1px; }
.play_button:hover:after { background: url('../images/timecontroller/playback_sprite.png') no-repeat -34px -20px; }

.pause_button:after { background: url('../images/timecontroller/playback_sprite.png') no-repeat -65px 1px; }
.pause_button:hover:after { background: url('../images/timecontroller/playback_sprite.png') no-repeat -65px -20px; }

.forward_button:after { background: url('../images/timecontroller/playback_sprite.png') no-repeat -94px 1px; }
.forward_button:hover:after { background: url('../images/timecontroller/playback_sprite.png') no-repeat -94px -20px; }

.stop_button:after { background: url('../images/timecontroller/playback_sprite.png') no-repeat -123px 1px; }
.stop_button:hover:after { background: url('../images/timecontroller/playback_sprite.png') no-repeat -123px -20px; }

//.stop_button.playback_button_disabled  {
//background: url('../images/timecontroller/playback_sprite.png') no-repeat -122px 0px;
//}

.current_time_holder {
float: left;
}


#time_controller_container {
   width: 100%;
   height: 80px;
   pointer-events: all;
}

#time_controller_holder {
   display: flex;
   height: 100%;
   justify-content: center;
   width: 100%;
}

.time_controller_preset_buttons {
   float: left;
   display: flex;
   flex-direction: column;
   font-size: 10px;
   text-transform: uppercase;
   white-space: nowrap;
   width: 250px;
}

#time_controller_preset_buttons_left {
   align-self: center;
   flex-direction: row;
   flex-wrap: wrap;
   padding-right: 20px;
   max-height: 56px;
}
#time_controller_preset_buttons_right {
   margin-top: 10px;
   padding-left: 20px;
}

.time_preset_button {
   /color: #b5cbc1;
   cursor: pointer;
   flex: 1 0 50%;
   height: 14px;
   line-height: 14px;
   text-decoration: none;
   text-transform: uppercase;
}

.time_preset_button:hover {
color: #FFFFFF;
}

.block_size_button {
color: #b5cbc1;
text-decoration: none;
cursor: pointer;
text-transform: uppercase;
-moz-user-select: none;
-webkit-user-select: none;
}

.block_size_button:hover {
color: #FFFFFF;
}

.block_size_button_disabled {
color: #CCCCCC !important;
cursor: default !important;
}

#time_controller {
   width: 600px;
   height: 20px;
   font-size: 10px;
   position: relative;
   float: left;
   margin-top: 10px;
}

.time_slider_top {
height: 20px;
margin-bottom: 5px;
}

.time_slider_label_holder {
height: 20px;
float: left;
}

.time_slider_calendar abbr[title],
.time_slider_calendar abbr[data-original-title] {
	text-decoration: none;
}

.time_slider_calendar_button {
   border-radius: 4px;
   height: 20px;
   width: 33px;
   float: left;
   cursor: pointer;
   padding: 2px;
   position: relative;
}

.time_slider_calendar_button .icon {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}



/*
.time_slider_calendar_button:after,
.time_slider_calendar_button:before {
   height: 20px;
   line-height: 20px;
   position: absolute;
   top: 0;
}

.time_slider_calendar_button:after {
   content: "\1F5D3";
   font-size: 14px;
   left: 3px;
}

.time_slider_calendar_button:before {
   content: "\25BC";
   font-size: 10px;
   right: 4px;
}
*/

.time_slider_calendar_button:hover {
   background-color: #c0ccc6;
}

.time_slider_calendar_button_active {
background-image: url('../images/timecontroller/calendar_active.png');
}

.time_slider_calendar_button_right { float: right; }

.time_slider_calendar_button_container_left,
.time_slider_calendar_button_container_right {
	position: relative;
}

.time_slider_calendar_button_container_left { float: left; }
.time_slider_calendar_button_container_right { float: right; }

.time_slider_calendar_button_container .casper-calendar-component {
	bottom: calc(100% + 5px);
	display: none;
	position: absolute;
}
.time_slider_calendar_button_container_left .casper-calendar-component { left: 0; }
.time_slider_calendar_button_container_right .casper-calendar-component { right: 0; }

.time_slider_calendar_button_container.open .casper-calendar-component { display: block; }

.time_slider_calendar_label {
float: left;
padding-left: 10px;
height: 20px;
}

.time_slider_calendar_label_right {
float: right;
padding-right: 10px;
}

.time_slider_timezone_label {
   left: 50%;
   position: absolute;
   transform: translate(-50%, 0);
}


.time_resize_holder {
width: 33px;
height: 100%;
float: left;
}

.time_resize_button {
   cursor: pointer;
   height: 100%;
   float: left;
   position: relative;
   width: 16px;
}

.time_resize_button_left:after,
.time_resize_button_right:after {
   content: "\25C0";
   font-size: 9px;
   height: 20px;
   left: 50%;
   line-height: 20px;
   position: absolute;
   top: 0;
}

.time_resize_button_left {
   border-radius: 4px 0px 0px 4px;
   margin-right: 1px;
}

.time_resize_button_left:after { transform: translate(-50%, 0); }

.time_resize_button_right { border-radius: 0px 4px 4px 0px; }
.time_resize_button_right:after { transform: translate(-50%, 0) rotate(180deg ); }

.time_slider_container {
   width: 528px;
   height: 20px;
   float: left;
   position: relative;
   margin-left: 3px;
   margin-right: 3px;
   overflow: hidden;
   background: transparent;

   display: flex;
   flex-direction: row;
}

.time_slider_block {
   cursor: pointer;
   flex: 1;
   height: 20px;
   margin-left: 1px;
}

.time_slider_block_first {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
   margin-left: 0;
}

.time_slider_block_last {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
}

.time_slider_block:hover {
}

.time_slider_block_active {
}

.time_controller_indicator {
   width: 21px;
   height: 23px;
   position: absolute;
   top: 10px;
}

.time_slider_bar {
position: absolute;
top: 46px;
background-color: rgba(0,0,0,0);
padding: 0px;
margin: 0px;
border-spacing: 1px 0px;
   left: 36px;
}


.time_slider_bg {
   height: 4px;
   text-align: center;
   vertical-align: bottom;
   width: 100%;
}

.time_slider_zoom_button {
display: inline-block;
width: 12px;
height: 12px;
background: url('../images/timecontroller/zoom.png') rgb(255,255,255);
background: url('../images/timecontroller/zoom.png'), -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%);
background: url('../images/timecontroller/zoom.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(230,230,230,1)));
background: url('../images/timecontroller/zoom.png'), -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%);
background: url('../images/timecontroller/zoom.png'), -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%);
background: url('../images/timecontroller/zoom.png'), -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6d6',GradientType=0 );
background: url('../images/timecontroller/zoom.png'), linear-gradient(top, rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%);
cursor: pointer;
margin-top: -4px;
margin-bottom: 4px;
border-radius: 2px;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=45, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=45, Color='#000000');
-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
}

.time_slider_resize_button {
width: 15px;
height: 12px;
background: url('../images/timecontroller/resize_icon.png') no-repeat center center;
position: absolute;
top: -6px;
}

.time_slider_resize_button_left {
left: -8px;
}

.time_slider_resize_button_right {
right: -8px;
}

.time_slider_resize_button:hover {
background: url('../images/timecontroller/resize_icon.png') no-repeat center center;
}

.time_active_period_label {
padding-top: 3px;
text-align: center;
font-weight: bold;
white-space: nowrap;
display: none;
}

.date_picker {
position: absolute;
z-index: 9999;
}

.time_block_tooltip {
   border-radius: 4px;
   padding: 5px;
   position: absolute;
   top: 0;
   white-space: nowrap;
}


/* ============================================================================================== *
 * ## New Component ##
 * ============================================================================================== */

.timecontroller-component {
   display: flex;
   flex-direction: column;
   position: fixed;
   top: 50vh;
   width: 100%;
}

.timecontroller-component .play-controls,
.timecontroller-component .time-controls {
   align-items: center;
   display: flex;
   flex-direction: row;
   gap: 20px;
   justify-content: center;
   width: 100%;
}

/* ## play controls ## */
.timecontroller-component .play-controls {
   background: var(--black);
   height: 45px;
}

.timecontroller-component .play-controls .ui-button { background: var(--grey-darker); }

.timecontroller-component .play-controls .controller-buttons,
.timecontroller-component .play-controls .play-buttons {
   display: flex;
   flex-direction: row;
   gap: 5px;
}

.timecontroller-component .current-timeperiod-container {
   display: flex;
   flex-direction: column;
}

.timecontroller-component .current-timeperiod-container .role-current-period-display,
.timecontroller-component .current-timeperiod-container .role-current-time-display {
   color: var(--white);
   font-size: 10px;
}

.timecontroller-component .current-timeperiod-container .role-current-time-display { font-weight: bold; }


/* ## time controls ## */
.timecontroller-component .time-controls {
   background: var(--grey-darker);
   height: 80px;
}

.timecontroller-component .time-adjustment-container,
.timecontroller-component .time-presets-container {
   width: 160px;
}

.timecontroller-component .time-presets-container {
   display: grid;
   gap: 0 20px;
}

.timecontroller-component .time-preset-button {
   color: var(--grey-light);
   cursor: pointer;
   height: 14px;
   line-height: 14px;
   text-transform: uppercase;
}

.timecontroller-component .time-preset-button:hover { color: var(--white); }

.timecontroller-component .time-controller-container {
   display: flex;
   flex-direction: column;
   gap: 5px;
   width: 600px;
}

.timecontroller-component .row-date {
   display: flex;
   flex-direction: row;
   gap: 10px;
   width: 100%;
}

.timecontroller-component .row-date .calendar-button,
.timecontroller-component .row-date .calendar-label {
   height: 20px;
}

.timecontroller-component .row-date .calendar-button {
   background: var(--grey-light);
   border-radius: 4px;
   cursor: pointer;
   flex: 0 0 33px;
   padding: 2px;
}
.timecontroller-component .row-date .calendar-button:hover { background: var(--primary); }

.timecontroller-component .row-date .calendar-label {
   color: var(--white);
   flex: 1;
   font-size: 10px;
   line-height: 20px;
}
.timecontroller-component .row-date .calendar-label + .calendar-label { text-align: right; }


.timecontroller-component .row-time {
   display: flex;
   flex-direction: row;
   height: 20px;
   gap: 5px;
   width: 100%;
}

.timecontroller-component .row-time .time-resize-container {
   display: flex;
   flex-direction: row;
   flex: 0 0 33px;
   gap: 1px;
}

.timecontroller-component .row-time .time-resize-container .time-resize-button {
   background: var(--grey-light);
   border-radius: 4px 0px 0px 4px;
   cursor: pointer;
   flex: 1;
}
.timecontroller-component .row-time .time-resize-container .time-resize-button + .time-resize-button { border-radius: 0px 4px 4px 0px; }
.timecontroller-component .row-time .time-resize-container .time-resize-button:hover { background: var(--primary); }

.timecontroller-component .row-time .time-slider-container {
   flex: 1;
   height: 100%;
   position: relative;
}

.timecontroller-component .row-time .time-slider-container .bar-container {
   height: 4px;
   position: absolute;
   top: 100%;
   width: 100%;
}

.timecontroller-component .row-time .time-slider-container .bar-container .background {
   background: var(--grey-dark);
   height: 100%;
   width: 100%;
}

.timecontroller-component .row-time .slider-blocks-container {
   height: 100%;
   position: relative;
   width: 100%;
}

.timecontroller-component .row-time .slider-blocks-container .role-slider-blocks-tooltip {
   background: var(--black);
   border-radius: 4px;
   color: var(--white);
   font-size: 10px;
   opacity: 0;
   padding: 5px;
   position: absolute;
   top: -30px;
   white-space: nowrap;

   transform: translate(-50%, 0);
   transition: opacity .25s;
}
.timecontroller-component .row-time .slider-blocks-container .role-slider-blocks-tooltip.show { opacity: 1; }

/* ## indicators ## */
.timecontroller-component .row-time .time-slider-container .bar-container .indicator,
.timecontroller-component .row-time .role-slider-blocks-indicator {
   cursor: ew-resize;
   left: 0;
   position: absolute;
}

.timecontroller-component .row-time .time-slider-container .bar-container .indicator {
   width: 11px;
   transform: translate(-50%, -4px);
}

.timecontroller-component .row-time .role-slider-blocks-indicator {
   width: 13px;
   transform: translate(-50%, -11px);
}

.timecontroller-component .row-time .time-slider-container .bar-container .indicator .icon,
.timecontroller-component .row-time .role-slider-blocks-indicator .icon {
   display: block;
   fill: var(--grey-light);
   height: 100%;
   overflow: visible;
   width: 100%;

   filter: drop-shadow(0px 0px 1px rgb(0 0 0 / .9))
}

.timecontroller-component .row-time .blocks-container {
   display: flex;
   flex-direction: row;
   gap: 1px;
   height: 100%;
   width: 100%;
}

.timecontroller-component .row-time .blocks-container .block {
   background: var(--grey-light);
   cursor: pointer;
   flex: 1;
}
.timecontroller-component .row-time .blocks-container .block:first-child { border-radius: 4px 0px 0px 4px; }
.timecontroller-component .row-time .blocks-container .block:last-child { border-radius: 0px 4px 4px 0px; }

.timecontroller-component .row-time .blocks-container .block:hover { background: var(--primary); }