:root {
    --primary: #327984;
	--primary-dark: #245860;
	--primary-darker: #1d474e;
	--primary-light: #409caa;
	--primary-lighter: #5cb4c1;
	--primary-ds: rgba(50, 121, 132, 0.25);
	--secondary: #ccd524;
	--secondary-dark: #a3aa1d;
	--secondary-darker: #797f15;
	--secondary-light: #d9e14c;
	--secondary-lighter: #e2e878;
	--secondary-ds: rgba(199, 228, 103, 0.25);
    
    --timeline-active-col: rgba(15, 78, 113, 0.2);
    --process-step-bg: #eee;

    --status-active: #add525;
    --status-calibration: #3f99a6;
    --status-maintenance: #ffc107;
    --status-repair: #990000;
    --status-decommissioned: #000000;

    --status-prev-val: #aaaaaa;
    --status-new-val: #add525;

    --paid: #28a745;
    --unpaid: #990000;

    /* --component-background: #222; */
    --marker-selected: #888;
    --syntax-field-color: #7abee6;
    --syntax-value-color: #ffc107;
    --syntax-number-color: #add525;
    --syntax-bool-color: #0f4e71;
    --syntax-null-color: #9966ff;

    --proc-step-col: #111;
    --proc-step-help-col: #333;

    --notification-sel: #BBB;
    --notification-unread: var(--primary-light);
}

[data-theme="dark"] {
   --timeline-active-col: rgba(15, 78, 113, 0.5);
   --process-step-bg: #222;
   --proc-step-col: #EEE;
   --proc-step-help-col: #CCC;

   --notification-sel: #444;
   --notification-unread: var(--primary-dark);
}

.logo-image
{
    height: 30px;
}


/* Map */


.map-marker
{
    color: #000;
    border-radius: 0px;
    padding: 0px;
}

.map-marker-line
{
    border-bottom: 3px solid #FFF;
    width: 50px;
    height: 46px;
    margin-left: 10px;
    box-sizing: border-box;
}

.map-marker-container
{
    background-color: #333;
    border-radius: 15px;
    padding: 0px 2px 2px 6px;
    margin-left:50px;
    margin-top:-20px;
}

.map-marker-container
{
    border-top: none;
    border-bottom: none;
    border-right: none;
    border-left: 3px solid #888;
    width: fit-content;
    padding-right: 20px;
}

.map-marker-container.selected
{
    border-top: 1px solid var(--marker-selected);
    border-bottom: 1px solid var(--marker-selected);
    border-right: 1px solid var(--marker-selected);
}

.map-marker-container.booking-position
{
    border-left: 3px solid var(--secondary);
}

.map-marker-container.field-position
{
    border-left: 3px solid var(--primary-light);
}

.map-marker-label
{
    font-family: "MuseoSans-300";
    font-size: 12px;
    color: #FFF;
    border-left: none;
}

.map-marker-details
{
    display: none;
    max-height: 250px;
    overflow-y: auto;
}

.map-marker-details.active
{
    display: block;
}

.map-marker-line
{
    border-bottom: 3px solid #888;
}

.map-marker-container.alert-status-clear
{
    border-left: 3px solid var(--status-success);
}

.map-marker-line.alert-status-clear
{
    border-bottom: 3px solid var(--status-success);
}

.map-marker-container.alert-status-warning
{
    border-left: 3px solid var(--status-warning);
}

.map-marker-line.alert-status-warning
{
    border-bottom: 3px solid var(--status-warning);
}

.map-marker-container.alert-status-danger
{
    border-left: 3px solid var(--status-danger);
}

.map-marker-line.alert-status-danger
{
    border-bottom: 3px solid var(--status-danger);
}

.map-marker-line.booking-position
{
    border-bottom: 3px solid var(--secondary);
}

.map-marker-line.field-position
{
    border-bottom: 3px solid var(--primary-light);
}


.map-marker-deselect
{
    float: right;
    padding-right: 5px;
    cursor: pointer;
    display: none;
}

.map-marker-deselect img
{
    width: 15px;
    height: 15px;
}

.map-marker-deselect.active
{
    display: inline-block;
}

.leaflet-bar a 
{
    background-color: var(--input-bg);
    transition: background-color 0.4s;
}

.leaflet-control-zoom a 
{
    color: var(--input-icon-color);
    transition: color 0.4s, background-color 0.4s;
}

.leaflet-control-attribution.leaflet-control
{
    /* background-color: #000 !important; */
    color: var(--text-color);
    background-color: var(--input-bg);
    transition: color 0.4s, background-color 0.4s;

    border-radius: 15px;
    padding: 2px 8px;
}

.leaflet-bar a.leaflet-disabled
{
    background-color: var(--input-bg);
    color: var(--input-icon-color);
    transition: color 0.4s, background-color 0.4s;
}

.leaflet-control-attribution.leaflet-control a:first-of-type
{
    display: none !important;
}

.leaflet-control-attribution.leaflet-control span {
  display: none !important;
}

.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 15px !important;
  border-top-right-radius: 15px !important;
}

.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-left-radius: 15px !important;
  border-bottom-right-radius: 15px !important;
}


.leaflet-touch .leaflet-bar {
  border: none !important;
}

.map-key
{
    margin-top: 10px;
    margin-right: 10px;
    background: rgba(28,28,28,0.8);
    height: 20px;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.map-key-item
{
    height: 50px;
    display: inline-block;
    margin-right: 10px;
    margin-top: 2px;

}

.map-key-icon
{
    display: inline-block;
    height: 10px;
    width: 10px;
    /*background-color: #555;*/
    margin-right: 10px;
    border-radius: 50%;
}


.map-tile-providers
{
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    margin-left: 10px;
    background-color: var(--input-bg);
    height: 30px;
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 0px;
    padding-top: 5px;

    transition: background-color 0.4s;
    box-sizing: border-box;
}

.map-tile-provider
{
    /* display: inline-block; */
    height: 20px;
    width: 20px;
    background-color: var(--text-color);
    margin-right: 10px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transition: background-color 0.4s;
}

.map-tile-provider img
{
    height: 18px;
    width: 18px;
    border-radius: 50%;
    pointer-events: none;
    margin-top: 1px;
    margin-left: 1px;
}

/*
.map-search
{
    margin-top: 10px;
    margin-right: 10px;
    background: rgba(28,28,28,0.8);
    height: 30px;
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 0px;
    padding-top: 5px;
    pointer-events: all;
    width: fit-content;
    margin-left: auto;
    margin-bottom: 3px;
}
*/
/*
.map-search img
{
    height: 20px;
    width: 20px;
    pointer-events: none;
    position: relative;
    top: -2px;
}

.map-search-input
{
    background-color: rgba(0, 0, 0, 0.3);
    border: none;
    width: 250px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 5px;
    padding-left: 10px;
    position: relative;
    top: -2px;
    outline: none;
}

.map-search-input:focus
{
    outline: none;
    border: none;
}

.map-search-button
{
    position: relative;
    display: inline-block;
    margin: 3px;
    background-color: #555;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    text-align: center;
    z-index: 2;
    top: -5px;
    right: 2px;
}

.map-search-button:hover
{
    background-color: #888;
}

.map-search-button svg
{
    position: relative;   
    top: 3px;   
}

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

.map-search-results-area
{
    margin-right: 10px;
    pointer-events: all;
}

.map-search-results-container
{
    background-color: var(--content-pane-bg);

    border-radius: 5px;
    padding-bottom: 5px;

    transition: background-color 0.4s; 
}

.map-search-results-close
{
    height: 20px;
    width: 100%;
    background-color: var(--background-color);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    transition: background-color 0.4s;   
}

.map-search-results-close svg
{
    width: 20px;
    height: 20px;
    float: right;
    cursor: pointer;
    pointer-events: all;
    /* background-color: #333; */
    border-top-right-radius: 5px;
}

.map-search-result
{
    padding: 3px 5px;
    cursor: pointer;
}

.map-search-result:nth-of-type(2n+1) 
{
    background-color: rgba(255,255,255,.05);
}

.map-pan-to-me
{
    position: absolute;
    right: 0px;
    bottom: 25px;
    background: rgba(28,28,28,0);
}

.map-pan-to-me .map-search-button
{
    background: var(--input-bg);
    width: 30px;
    height: 30px;
    padding: 3px;
    transition: color 0.4s, background-color 0.4s;

    border-radius: 50%;
}

.map-pan-to-me .map-search-button svg
{
    width: 30px;
    height: 30px;
}

.map-key-label
{
    font-family: "MuseoSans-300";
    font-size: 12px;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
}

.map-marker-data-types-area
{
    float: right;
    padding-top: 2px;
    padding-right: 5px;
    /* height: 20px; */
}

.map-marker-data-icon
{
    display: inline-block;
    height: 10px;
    width: 10px;
    /*background-color: #555;*/
    margin-right: 2px;
    border-radius: 50%;
    float: right;
    position: relative;
    top: 2px;
}

.map-marker-selector
{
    /*margin-left: 40px;*/
    margin: 5px;
    padding: 0px;
    background: #111;
    border-radius: 5px;
    border-left: 3px solid #888;
    cursor: pointer;
}

.map-marker-selector.active
{
    border-left: 3px solid var(--noise-data);
}

.map-marker-selector.active.alert-status-warning
{
    border-left: 3px solid var(--status-warning);
}

.map-marker-selector.active.alert-status-danger
{
    border-left: 3px solid var(--status-danger);
}

.map-booking-selector, .map-equipment-selector
{
    /*margin-left: 40px;*/
    margin: 5px;
    padding: 5px 0px;
    border-radius: 5px;
    border-left: 3px solid #888;
    cursor: pointer;

    background: var(--background-color);
    transition: color 0.4s, background-color 0.4s;
    color: var(--text-color);
}

.map-booking-selector.active, .map-equipment-selector.active
{
    background: var(--notification-sel);

    animation-name: map-prompt-flash;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
}

.map-search
{
    margin-top: 10px;
    right: 10px;
    pointer-events: all;
}

.form-search-button
{
    margin-left: 292px;

}

.form-lat-long-wrapper
{
    margin-left: 0px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.form-lat-long-coord
{
    background-color: #111;
    border-radius: 5px;
    margin-left: 3px;
    margin-right: 3px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 5px;
    line-height: 1;
}

.form-lat-long-coord > *
{
    vertical-align: middle;
}

.form-lat-long-coord .icon
{
    display: inline-block;
}

.form-lat-long-coord .icon img
{
    width: 15px;
    height: 15px;
}

.form-lat-long-coord .label
{
    font-family: "MuseoSans-300";
    font-size: 12px;
    color: #AAA;
    display: inline-block;
    width: 35px;
    margin-left: 5px;
}

.form-lat-long-coord .val
{
    font-family: "MuseoSans-300";
    font-size: 12px;
    color: #FFF;
    display: inline-block;
}

.map-prompt
{
    background: var(--primary);
    position: absolute;
    left: 50px;
    top: 45px;
    border-radius: 5px;
    width: 300px;
    padding: 5px;
    font-size: 12px;
    font-family: "Museo-500";
    animation-name: map-prompt-flash;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
}

.no-label-icon-margin
{
    margin-left: 140px;
}

.field-position-summary
{
    background-color: transparent;
}

.field-position-summary.selected
{
    animation-duration: 750ms;
    animation-iteration-count: 3;
    animation-name: field-position-summary-flash;
    /*animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);*/
}

.field-position-summary-title
{
    font-family: "Museo-500";
    /*margin-left: 5px;*/
    color: var(--primary-light);
}

.field-position-summary-latlong
{
    display: inline-block;
}

.field-position-summary-latlong.field-position-summary-label
{
    color: #AAA;
    width: 50px;
    margin-left: 5px;
}

.field-position-comment
{
    margin-bottom: 5px;
    color: #AAA;
    font-family: "MuseoSans-300";
    margin-left: 5px;
}

.field-position-heading
{
    margin-bottom: 0px;
    color: #FFF;
    font-family: "Museo-500";
    margin-left: 5px;
}


.field-position-summary-datetime.field-position-summary-label
{
    color: #AAA;
    margin-left: 5px;
    font-size: 12px;
    padding-right: 10px;
}

.field-position-forms-table td
{
    padding-left: 5px;

    color: #AAA;
    font-family: "MuseoSans-300";
}

.field-position-summary-spacer
{
    height: 10px;
}

.field-position-summary-separator
{
    margin-top: 10px;
    border-bottom: 3px solid #333;
    margin-bottom: 10px;
    margin-left: 5px;
    width: 250px;
}

.field-position-summary-expander
{
    width: 16px;
    height: 16px;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    top: -2px;
}

.field-position-header-table
{
    margin-bottom: 5px;
}

.field-position-header-table td
{
    padding-left: 5px;
    height: 30px;
    line-height: 1;
    vertical-align: middle;
}

/* Map End */

/* Calendar */

.timeline-period
{
    font-family: "Museo-700";
}

.timeline-group-time-indicator
{
    font-family: "Museo-700";
}

.timeline-block-time-indicator
{
    font-family: "MuseoSans-500";
}

#timeline-overlays-area
{
    z-index: 4;
}

.timeline-item-overlay,
.timeline-group-overlay
{
    z-index: 5;
    background-color: var(--background-color);
    transition: color 0.4s, background-color 0.4s;    
}

.timeline-group-overlay-label
{
    font-family: "MuseoSans-500";
    font-size: 12px;
    color: var(--text-color);
    transition: color 0.4s;
}

.timeline-item-overlay-label
{
    font-family: "MuseoSans-500";
    font-size: 13px;
    pointer-events: none;
    color: var(--text-color);
    transition: color 0.4s;
}

.timeline-overlay-content.danger .timeline-item-overlay-label,
.timeline-overlay-content.warning .timeline-item-overlay-label,
.timeline-overlay-content.danger .timeline-group-overlay-label,
.timeline-overlay-content.warning .timeline-group-overlay-label
{
    color: #FFF;
}

.timeline-item-overlay-status-label
{
    font-family: "MuseoSans-300";
    font-size: 12px;
    display: none;
    left: 5px !important;
    top: 18px !important;
    color: var(--text-color);
    transition: color 0.4s;
}

.timeline-overlay-content.danger .timeline-item-overlay-status-label,
.timeline-overlay-content.warning .timeline-item-overlay-status-label
{
    color: #FFF;
}

.timeline-item-overlay-status-label.detail-view
{
    display: block;
}

.timeline-item-overlay.warning
{
    background-color: var(--status-warning-dark);
}

.timeline-item-overlay.danger
{
    background-color: var(--status-danger-dark);
}

.check-cal-text.warning
{
    color: var(--status-warning);
}

.check-cal-text.danger
{
    color: var(--status-danger-light);
}

.timeline-block
{
    border-radius: 10px;
    z-index: 3;
}

.timeline-block.watcher
{
  border-radius: 0px;
  z-index: 1;
  opacity: 50%;
}

.timeline-block.downtime
{
  border-radius: 0px 10px 10px 0px;
  z-index: 2;
  opacity: 50%;
}

.timeline-block.watcher.showing
{
    z-index: 4;
    opacity: 80%;
}

.timeline-block.selected
{
    animation-duration: 750ms;
    animation-iteration-count: 3;
    animation-name: flash;
    /*animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);*/
}

.timeline-end-block.warn,
.timeline-start-block.warn
{
    animation-duration: 750ms;
    animation-iteration-count: 3;
    animation-name: warn-flash;
}

.timeline-block-content
{
    /*padding-left: 40px;*/
    overflow-y: hidden
}

.timeline-block.use-indicator
{
    border-radius: 0px;
    z-index: 4;
    /*height: 5px !important;*/
    /*top: 30px !important;*/
    opacity: 0.6;
    line-height: 8px;
}

.use-type-1
{
    background-color: var(--status-success) !important;
}

.use-type-2
{
    background-color: var(--status-warning) !important;
}

.use-type-3
{
    background-color: var(--status-danger) !important;
}

.use-type-4
{
    background-color: var(--status-warning) !important;
}


.use-indicator-booking-ref
{
    color: #000;
    font-size: 10px;
    margin-left: 5px;
}

.use-indicator.use-type-3 > .use-indicator-booking-ref
{
    color: #FFF;
}


.block-status-marker
{
    pointer-events: none; 
    position:absolute; 
    right: 15px; 
    top: 5px; 
    width:12px; 
    height:12px; 
    border-radius:50%;
    border: 1px solid #333;
    white-space: nowrap;
}

.block-content-text-line-1
{
    user-select: none; 
    pointer-events: none; 
    color:#FFF; 
    position:absolute; 
    left: 15px; 
    top: 2px;
    font-size: 13px;
    font-family: "MuseoSans-500";
    white-space: nowrap;
}

.block-content-text-line-2
{
    display: none;
    user-select: none; 
    pointer-events: none; 
    color:#FFF; 
    position:absolute; 
    left: 15px; 
    top: 18px;
    font-family: "MuseoSans-300";
    font-size: 12px;
    white-space: nowrap;
}

.block-content-text-line-2.detail-view
{
    display: block;
}

.timeline-group-time-indicator-prefix
{
    user-select: none; 
    font-size: 16px; 
    color:#555;
}

.timeline-group-time-indicator-group-1
{
    user-select: none; 
    font-size: 16px; 
    color:#000;
}

.timeline-group-time-indicator-group-2
{
    user-select: none; 
    font-size: 12px; 
    color:#555;
}

.timeline-block-time-indicator-1
{
    font-size:11px; 
    padding-left:3px; 
    user-select: none;
    color:#000;
}

.timeline-block-time-indicator-2
{
    font-size:9px; 
    user-select: none;
    color:#000;
}

.timeline-button img 
{
    top: 1px !important;
}

.timeline-button.active
{
    background-color: var(--timeline-active-col);
}

#timeline-period-selector-area {
    background-color: var(--primary-darker);
}

#timeline-time-indicator-area
{
    background-color: #FFF;
}

.timeline-lane
{
    /*background-color: #333;*/
}

#timeline-lanes-area
{
    background-color: #FFF !important;
}

.timeline-item-overlay-marker
{
    pointer-events: none; 
    position:absolute; 
    right: 5px; 
    top: 5px; 
    width:12px; 
    height:12px; 
    border-radius:50%;
    border: 1px solid #333;
}

.equipment-use-status-available
{
    background-color: var(--status-success);
}

.equipment-use-status-booked
{
    background-color: var(--status-warning);
}

.equipment-use-status-in-use
{
    background-color: var(--status-danger);
}

.timeline-key
{
    position: relative;
    top: 11px;
    margin-left: 10px;
}

.timeline-key-marker
{
    pointer-events: none; 
    /*position:absolute; 
    right: 15px; 
    top: 5px; */
    width:12px; 
    height:12px; 
    border-radius:50%;
    border: 1px solid #333;
    display: inline-block;
    margin-left: 3px;
    margin-right: 6px;
    position: relative;
    top: 2px;
}

.timeline-key-label
{
    font-family: "MuseoSans-300";
    font-size: 12px;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
}

.booking-view-dot
{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.calendar-booking-selector
{
    /*margin-left: 40px;*/
    margin: 5px;
    padding: 5px 0px;
    background: var(--background-color);
    border-radius: 5px;
    border-left: 3px solid #888;
    cursor: pointer;
    transition: color 0.4s, background-color 0.4s;
    color: var(--text-color);
}

.calendar-booking-selector.active
{
    background: var(--notification-sel);
    
    animation-name: map-prompt-flash;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
}

.section-title
{
    padding-left: 10px;
    color: var(--text-color);
    font-size: 12px;
    font-family: "MuseoSans-500";
    margin-bottom: 3px;
    transition: color 0.4s;
}

.section-text
{
    padding-left: 10px;
    color: var(--text-color-soft);
    font-size: 12px;
    font-family: "MuseoSans-300";
    transition: color 0.4s;
}

.clickable-booking
{
    color: var(--primary-light);
    cursor: pointer;
}

.timeline-contol-column
{
    white-space: nowrap;
}

.calendar-select-label
{
    font-size: 12px !important;
    font-family: "MuseoSans-300" !important;
    vertical-align: sub !important;
}

.calendar-select .select-wrapper input.select-dropdown
{
    font-size: 11px !important;
    font-family: "MuseoSans-500" !important;
}

.calendar-select .dropdown-content.select-dropdown li span
{
    font-size: 11px !important;
    font-family: "MuseoSans-500" !important;
}

/*
#calendarLocationFilterWrapDiv
{
    position: relative;
    top: 4px;
    left: 4px;
}
*/
.calendar-list-button
{
    margin-top: 5px;
    margin-right: 3px;
}

#timeline-period-selector-area {
    border-radius: 20px 20px 0px 0px;
}
/* Calendar End */


/*Dashboard*/

/*
.dash-booking-selector
{
    margin: 5px;
    padding: 0px;
    background: #000;
    border-radius: 5px;
    border-left: 3px solid #888;
    cursor: pointer;
}
*/

.dash-booking-selector
{
    margin: 5px;
    padding: 5px 0px;
    border-radius: 5px;
    border-left: 3px solid #888;
    cursor: pointer;

    background: var(--background-color);
    transition: color 0.4s, background-color 0.4s;
    color: var(--text-color);
}

.dash-booking-selector.active
{
    background: var(--notification-sel);

    animation-name: map-prompt-flash;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
}

/*
.dash-notice-selector
{
    margin: 5px;
    padding: 0px;
    background: #000;
    border-radius: 5px;
    border-left: 3px solid #888;
    cursor: pointer;
}
*/

.dash-notice-selector
{
    margin: 5px;
    padding: 5px 0px;
    border-radius: 5px;
    border-left: 3px solid #888;
    cursor: pointer;

    background: var(--background-color);
    transition: color 0.4s, background-color 0.4s;
    color: var(--text-color);
}

.dash-notice-divider
{
    margin-top: 0px !important;
    border-top: 1px solid rgba(255,255,255,.3) !important;
    margin-bottom: 8px;
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

.welcome-user
{
    color: var(--text-color);
    font-family: "Museo-500";
    font-size: 20px;
}

.welcome-company
{
    color: #888;
    text-transform: uppercase;
    font-family: "MuseoSans-300";
    font-size: 12px;
    margin-bottom: 4px;
}

.role-badge
{
    display: flex;
    flex-direction: row;
    align-items: center;

    border-radius: 5px;
    background: var(--background-color);
    /* border-left: 3px solid #888; */
    padding: 6px;
    margin-right: 5px;
    margin-bottom: 5px;

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

.badge-icon
{
    color: var(--input-icon-color);
    transition: color 0.4s, background-color 0.4s; 
    
    width: var(--pane-label-img);
    height: var(--pane-label-img);

    padding-left: 2px;
    padding-right: 6px;
    border-right: 2px solid var(--pane-label-image-div-line);
    margin-right: 5px;
}

.badge-icon > svg
{
    width: var(--pane-label-img);
    height: var(--pane-label-img);
}

.badge-label
{
    font-family: "MuseoSans-300";
    font-size: 12px;
    color: var(--text-color);
    /* text-transform: uppercase; */
    padding-right: 10px;
}

/*
.role-badges
{

}

.role-badge
{
    border-radius: 5px;
    background: #000;
    border-left: 3px solid #888;
    padding: 3px;
    margin-right: 5px;
    margin-bottom: 5px;
    display: table;
}

.role-badge > img
{
    display: table-cell;
    vertical-align: middle;
    width: 29px;
    height: 24px;
    padding-right: 6px;
    padding-left: 3px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.badge-label
{
    display: table-cell;
    vertical-align: middle;

    font-family: "MuseoSans-300";
    font-size: 12px;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    padding-right: 10px;
}
*/

/*Dashboard End*/

/*Migrate*/

.process-table
{
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.process-table tr
{
    height: max-content;
}

.process-table td
{
    vertical-align: top;
}

.process-step
{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    text-align: center;
    line-height: 36px;
    font-family: "Museo-500";
    background-color: var(--process-step-bg);
    color: var(--text-color);
    font-size: 20px;
    border: 2px solid #FFF;
    transition: color 0.4s, background-color 0.4s;
    box-sizing: border-box;
    margin-top: -4px;
}

.process-step-icon
{
    width: 20px;
    height: 20px;

    margin-top: 6px;
    margin-bottom: 14px;
    margin-left: 5px;
    margin-right: 5px;

}

.process-step-label
{
    font-family: "Museo-300";
    font-size: 14px;
    color: var(--text-color);
    padding-right: 10px;
    transition: color 0.4s;
    white-space: nowrap;
    margin-top: 10px;
}

.process-step-instruction
{
    font-family: "MuseoSans-300";
    font-size: 14px;
    color: var(--proc-step-col);
    padding-left: 0px;
    padding-right: 10px;
    transition: color 0.4s;
    margin-top: 7px;
}

.process-step-help
{
    font-family: "MuseoSans-300";
    font-size: 14px;
    color: var(--proc-step-help-col);
    padding-left: 0px;
    padding-right: 10px;
    transition: color 0.4s;
}

.process-step-help-cell
{
    vertical-align: top;
}

.process-line
{
    min-height: 60px;
    border-left: 2px solid #FFF;
    margin-left: 20px; 
    margin-top: -10px;
    /* margin-bottom: -2px; */
    /* height: 100%; */
}

.process-line-spacer
{
    min-height: 40px;
    height: 100%;
}

.process-line-cell
{
    height: 100%;
}

.server-response-success
{
    color: var(--status-success);
}

.server-response-error
{
    color: var(--status-danger-light);
}




.details-field > input
{
    width: 300px !important;
}

.details-field p
{
    width: 150px;
}

.details-field p
{
    width: 150px;
}

.details-field > .select-wrapper
{
    width: 300px;
}

.select-wrapper.html5-qrcode-element
{
    display: inline-block;
}

.scan-form-area
{
    width: 100%;
}

.scan-form-controls
{
    margin-top: 20px;
    width: 100%;
}

/*
.scan-code
{
    background-color: #FFF;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 10px;
    width: fit-content;
    min-width: 100px;
    min-height: 100px;
}

.scan-code.no-code
{
    background-color: #555;
}

.scan-code-text
{
    color: var(--secondary);

    background-color: #222;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 10px;
    width: fit-content;
    min-width: 100px;
    text-align: center;

    font-family: "anonymous_proregular";
    font-size: 14px;
    display: block;
}

.scan-code-text.no-code
{
    display: none;
}
*/

.scan-code
{
    background-color: #FFF !important;
    /*padding: 5px;
    margin-bottom: 10px;
    border-radius: 10px;*/
    width: fit-content;
    min-width: 100px;
    min-height: 100px;
}

.scan-code svg
{
    min-height: 100px;
    min-width: 100px;
}

.kitrackr-tag
{
    background-color: #000;
    /*padding: 5px;*/
    margin-bottom: 10px;
    border-radius: 10px;
    width: fit-content;
    min-width: 100px;
    min-height: 100px;
}

.scan-form-feedback
{
    font-family: "MuseoSans-300";
    font-size: 14px;
}

.scan-form-feedback.error
{
    color: var(--status-error-text);
}

.scan-form-feedback.success
{
    color: var(--status-success-text);
}

.image-file-selector
{
    display: none;
}


/*Booking Calendar*/

#checkFormAllItemsSwitchWrapDiv
{
    margin-left: 85px;
}

#checkFormAllItemsSwitchWrapDiv .tight-field-label
{
    vertical-align: middle;
}

#checkFormAllItemsSwitchWrapDiv .form-check
{
    height: 25px;
    vertical-align: middle;
}

#checkFormAllItemsSwitchWrapDiv .form-check .form-check-label
{
    margin-top: 3px;
}

#checkFormAllItemsSwitch
{
    width: 25px;
    margin-top: 0px;
}

.check-form-location-controls
{
    /*margin-left: 140px;*/
}

/*Booking Calendar End*/

/*Notifications*/


.notifications-area .badge
{
    box-shadow:none; 
    background-color:var(--tertiary); 
    position: relative; 
    top: -6px; 
    left: -6px; 
    font-size: 10px; 
    font-family: 'Museo-700';
    color: #000 !important;
}


.notification-item
{
    /* margin: 3px 10px 5px 10px; */
    /* border-bottom-width: 1px; */
    /* border-bottom-color: #333; */
    /* border-bottom-style: solid; */
    /* cursor: pointer; */

    margin-top: 5px;
    padding: 5px;
    border-radius: 5px;
    border-left: 3px solid #888;
    cursor: pointer;

    background: var(--background-color);
    transition: color 0.4s, background-color 0.4s;
    color: var(--text-color);
}

.notification-item.unread
{
    border-left: 3px solid var(--notification-unread);
}

.notification-item.selected
{
    background-color: var(--notification-sel);
}

.notification-heading
{
    font-family: "MuseoSans-500";
    color: var(--text-color);
    font-size: 14px;
    transition: color 0.4s, background-color 0.4s;
    margin-bottom: 5px;
}

.notification-heading.unread
{
    font-family: "MuseoSans-700";
    color: var(--text-color);
    transition: color 0.4s, background-color 0.4s;
}

.notification-heading img
{
    width:14px; 
    height:14px; 
    display:inline; 
    margin-top:-5px;
    margin-right:5px;
}

.notification-details
{
    font-family: "MuseoSans-500";
    color: var(--text-color-soft);
    font-size: 12px;
    /* margin-bottom: 5px; */

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

.notification-details.unread
{
    font-family: "MuseoSans-700";
    color: var(--text-color);

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

.notification-datetime
{
    font-family: "MuseoSans-500";
    color: var(--text-color);
    font-size: 12px;
    float: right;

    margin-right: 5px;
    margin-top: 3px;

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

.notification-action
{
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin-right: 5px;
    vertical-align: top;
    margin-top: 2px;

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

.notification-highlight
{
    /*font-family: "MuseoSans-700";
    color: #FFF;*/
    color: var(--primary-light);
    font-family: "MuseoSans-500";

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

.notification-details-pane
{
    margin: 2px 10px 2px 10px;
}

.notification-field-label
{
    color: var(--text-color);
    font-size: 14px;
    margin-right: 20px;

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

.notification-field-value
{
    color: var(--text-color);
    font-size: 14px;

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

.notification-message
{
    color: var(--text-color);
    font-size: 16px;
    margin: 2px 10px;
    font-family: "MuseoSans-300";

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

.notification-button
{
    /*
    margin-top: 10px;
    margin-right: 10px;
    */
    margin-left: 2px;
}

.notification-list-info
{
    color: var(--text-color);
    font-size: 14px;
    margin: 2px 10px;
    font-family: "MuseoSans-300";
}

.notifications-unread-count
{
    /* color: #000; */
    background-color: var(--primary);
    /* padding: 1px 5px; */
    border-radius: 10px;
    /* font-size: 11px; */
    /* font-family: "Museo-500"; */
    position: absolute;
    top: 0px;
    right: 0px;

    width: 10px;
    height: 10px;
}

.notification-unread-label
{
    font-family: "MuseoSans-500";
    color: var(--secondary);
    font-size: 14px;
}

.notification-body-line
{
    line-height: 1.5;
    min-height: 10px;
    font-size: 14px;
}

.notification-body-heading
{
    font-family: "MuseoSans-500";
}


/*Notifications End*/

/*Front End End*/

@keyframes flash {
    0%   {
        filter: brightness(1);
    }
    50%  {
        filter: brightness(2);
    }
    100% {
        filter: brightness(1);
    }
}

@keyframes warn-flash {
    0%   {
        background-color: var(--timeline-edge-handle-bg);
    }
    50%  {
        background-color: #F00;
    }
    100% {
        background-color: var(--timeline-edge-handle-bg);
    }
}

@keyframes map-prompt-flash {
    0%   {
        filter: brightness(1);
    }
    50%  {
        filter: brightness(1.5);
    }
    100% {
        filter: brightness(1);
    }
}

@keyframes field-position-summary-flash {
    0%   {
        background-color: transparent;
    }
    50%  {
        background-color: #AAA;
    }
    100% {
        background-color: transparent;
    }
}

.overlay-detail-info
{
    pointer-events: none;
}

#mapBookingList
{
    overflow-y:auto;
}

/*graph*/

.graph-content
{
    height: 100%;
    width: 100%;
}

.analysis-table-content
{
    height: 100%;
}

.graph-button-group
{
    background-color: #333;
    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;
}

.graph-button
{
    position: relative;
    display: inline-block;
    margin: 3px;
    background-color: #555;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    cursor: pointer;
    text-align: center;
    z-index: 2;
}

.graph-button-label
{
    font-family: "museo-700";
    position: relative;
    top: 3px;
    font-size: 14px;
    color: var(--secondary);
}

.graph-button:hover
{
    background-color: #888;
}

.graph-button svg
{
    position: relative;   
    /*left: 4px;*/
    top: 3px;   
}

.graph-button img
{
    position: relative;   
    /*left: 2px;*/
    top: 1px;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.graph-button.active
{
    background-color: var(--primary-dark);
}


/*graph end*/

.fixed-top-box
{
    display: flex;
    flex-flow: column;
    height: 100%;
}

.fixed-top-box .top-content
{
    flex: 0 1 auto;
}

.fixed-top-box .rest-content
{
    flex: 1 1 auto;
}

.import-modal
{
    max-width: fit-content;
}

.import-results-table
{
    overflow-y: auto;
}

.equipment-import-table
{
    width: 2500px;
}

.import-result-feedback.error
{
    color: var(--status-danger-light);
    border-bottom: 1px solid var(--status-danger-light);
}

.no-wrap
{
    white-space: nowrap;
}

.form-head-button
{
    position: relative;
    top: -8px;
}

.analysis-print-button
{
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.admin-button > .button-label
{
    width: 100px;
}

.im-logo
{
    width: 200px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.im-migrate-text
{
    margin-bottom: 20px;
}

#migrateImportResultsTable
{
    padding-bottom: 10px;
}

.booking-list-width
{
    min-width: 300px;
    max-width: 550px;
}

#calendarBookingTabsContent
{
    width: 400px;
}

#mapDetailsContent
{
    width: 400px;
}

.cell-value ul
{
    margin: 2px;
    padding: 0px 0px 0px 15px;
    font-size: 12px;
}

.equipment-tree
{
    height: 100%;
    overflow: auto;
    width: 100%;
    min-height: 500px;
}

.equipment-tree.inline-tree
{
    min-height: unset;
    overflow: hidden;
}

.modal .equipment-tree
{
    max-height: 70vh;
}

.equipment-col
{
    width: 300px;
}

.booking-col
{
    width: 500px;
}

.collapsed .hide-on-collapse
{
    display:  none;
}

.log-details-text
{
    font-size: 12px;
    font-family: "MuseoSans-300";
}

.log-label
{
    /* color: #FFF !important; */
    font-family: "MuseoSans-300";
}


.status-text-active
{   
    color: var(--status-active);
}

.status-text-calibration
{   
    color: var(--status-calibration);
}

.status-text-maintenance
{   
    color: var(--status-maintenance);
}

.status-text-repair
{   
    color: var(--status-repair);
}

.status-text-decommissioned
{   
    color: var(--status-decommissioned);
}

.status-active
{   
    background-color: var(--status-active);
}

.status-calibration
{   
    background-color: var(--status-calibration);
}

.status-maintenance
{   
    background-color: var(--status-maintenance);
}

.status-repair
{   
    background-color: var(--status-repair);
}

.status-decommissioned
{   
    background-color: var(--status-decommissioned);
}

.status-text-prev-val
{   
    color: var(--status-prev-val);
}

.status-text-new-val
{   
    color: var(--status-new-val);
}

.item-view-link
{
    font-family: "MuseoSans-500";
    color: var(--link-col);
    cursor: pointer;
    transition: color 0.4s;
}

.password-view-link
{
    font-family: "MuseoSans-500";
    color: var(--text-color);
    cursor: pointer;
    transition: color 0.4s;
}

.password-view-link.unretrieved
{
    font-family: "MuseoSans-300";
    color: #888;
}

.billing-value-label
{
    width: 100px;
}

.rp-input
{
    flex-direction: column !important;
    align-items: center;
    background: unset;
}

.realperson-challenge
{
    color: var(--text-color) !important; 
    transition: color 0.4s, background-color 0.4s;
}

#registerFormRP
{
    width: 150px;
    background-color: var(--slider-bg);
    margin-top: 10px;
    border-radius: 15px;
    
    color: var(--input-text);
    text-align: center;

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

.message-form-text
{
    text-align: center;
    padding: 5px;
}

.migrate-help-div
{
    margin-bottom: 5px;
}

.payment-table-bill-item-label
{
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
}

.payment-table-bill-item
{
    padding-bottom: 15px;
    font-size: 16px;
}

#mapContentArea, #mapMobileContentArea, #mainMapContainer
{
    height: 100%;
}

.graph-content-col
{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    width: 75%;
}

.graph-legend-col
{
    width: fit-content;
}

.graph-legend
{
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.graph-legend-list
{
    display: flex;
    flex-direction: column;
    margin: 10px 0px 0px 20px;
    padding: 0px;
    /*
    height: 100%;
    overflow-y: auto;
    */
}

.graph-legend-item
{
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
    white-space: nowrap;
}

.graph-legend-marker
{
      height: 14px;
      margin-right: 10px;
      width: 14px;
}

.graph-legend-text
{
    color: var(--text-color);
    font-size: 14px;
}

.graph-legend-title
{
    margin-bottom: 10px;
    padding: 0px;
}

#analysisDataTable .cell-value
{
    font-size: 14px;
    padding: 3px 5px;
}

td:has(.notification-field-label)
{
    width: 100px;
}

.item-view-tab.tab-panel-content.modal-view
{
    padding: 0px !important;
}

.roux-input:has(.ro-cal-mon-sel),
.roux-input:has(.ro-cal-year-sel)
{
    padding-left: 15px;
}

/*
#calendarBookingListSearch
{
    height: fit-content;
    flex-grow: 0;
    flex-shrink: 0;
}
*/

#calendarBookingList
{
    flex-grow: 1;
    flex-shrink: 1;
    overflow-y: auto;
    height: 300px;
    margin-bottom: 5px;
}

#timelineCalendarArea
{
    height: fit-content;
    flex-grow: 0;
    flex-shrink: 0;
    max-height: 50%;
}

#calendarTabBookings-content
{
    overflow-y: hidden;
}

#scanFormCodePreview
{
    background-color: #FFF;
    padding: 5px;
    border-radius: 10px;
}

.help-pane
{
    min-height: 500px;
}

.help-topic-link
{
    color: var(--primary);
    font-family: "MuseoSans-500";
    transition: color 0.4s;
    cursor: pointer;
}

.hc-sub
{
    font-size: 18px;
    font-family: "MuseoSans-500";
    color: var(--text-color);
    transition: color 0.4s;
    margin-top: 20px;
}

.hc-sub.first
{
    margin-top: 5px;
}

.hc-para
{
    margin-top: 10px;
    font-size: 15px;
    font-family: "MuseoSans-300";
    color: var(--text-color);
    transition: color 0.4s;
}

.hc-vid
{
    max-width: 100%;
}

.hc-vid-gap
{
    height: 10px;
}

.calendar-search
{
    min-width: 200px;
    flex-grow: 0;
    margin-right: 3px !important;
}

.calendar-select
{
    max-width: 250px;
    flex-grow: 0;
}

#generalServerFeedback
{
    margin-bottom: 10px;
}

.forgot-pw-area
{
    margin-top: 10px;
    font-size: 14px;
    margin-left: 5px;
}

.t-and-c-area
{
    margin-top: 20px;
    font-size: 12px;
    color: #888;
    margin-left: 5px;
}

.pw-reset-link
{
    text-decoration: none !important;
    color: var(--primary);
}

.help-vid-container
{
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    margin-bottom: 10px;
}

.help-vid-sections
{
    display: flex;
    flex-direction: column;
    width: 150px;
    flex-shrink: 0;
    margin-right: 7px;
}

.help-vid-section
{
    height: fit-content;
    border-radius: 5px;
    padding: 7px 5px;
    margin-bottom: 5px;
    cursor: pointer;

    font-size: 15px;
    font-family: "MuseoSans-300";

    background: var(--background-color);
    transition: color 0.4s, background-color 0.4s;
    color: var(--text-color);
}

.help-logo
{
    margin-bottom: 10px;
    height: 50px;
}

.help-version
{
    font-family: var(--code-font-family);
}


.version-history-area
{
  /* height: 450px; */
  overflow-y: auto;
  margin-top: 10px;
}

.log-entry-bullet
{
    background-color: var(--primary-darker);
    display: inline-block;
    width: 10px;
    height: 10px;
    /*margin: 10px;*/
    margin-right: 10px;
    position: relative;
    border-radius: 50%;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.version-history-entry
{
  background: var(--background-color);
    transition: color 0.4s, background-color 0.4s;
    color: var(--text-color);

  border-radius: 5px;
  padding: 6px 5px 6px 5px;

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */

  margin-bottom: 5px;
}

.version-history-summary
{
    display: flex;
    flex-direction: row;
}

.version-history-date
{
  /* display: inline-block; */
    margin-right: 20px;

    transition: color 0.4s, background-color 0.4s;
    color: var(--text-color);
    font-family: var(--code-font-family);
}

.version-history-number
{
  /* display: inline-block; */
  margin-right: 20px;
  font-family: var(--code-font-family);
}

.version-history-breadcrumbs
{
  /* display: inline-block; */

  display: flex;
  flex-direction: row;
  font-family: var(--code-font-family);
}

.log-breadcrumb,
.log-breadcrumb-divider
{
    margin-right: 7px;
}

.version-history-description
{
    display: block;
    padding-left: 20px;
    transition: color 0.4s, background-color 0.4s;
    color: var(--text-color);
    margin-top: 5px;
}

.breadcrumb-highlighted
{
    color: var(--primary);
}

#helpCentreTabsAbout-content
{
    overflow-y: auto !important;
}