:root {
    --start-pos: 0%;
    --end-pos: 100%;
}

.container-fluid {
    min-width:1245px;
}

.add-new-button {
    margin-top:12px;
}

#editor {
    z-index:100 !important;
}

.mission-group-thumbnail {
    position:relative;
    width:160px;
    height:90px;
    min-width:160px;
    min-height:90px;
}

.mission-group-thumbnail-sm {
    position:relative;
    width:128px;
    height:72px;
    min-width:128px;
    min-height:72px;
}

.mission-thumbnail {
    position: relative;
    width:288px;
    height:162px;
}

.mission-thumbnail, .mission-group-thumbnail {
    background-color:rgba(0, 0, 0, .05);
    background-size:cover;
    background-position:center;
    display:flex;
    justify-content:center;
    align-items:center;
}

.mission-group-thumbnail .thumbnail-placeholder {
    font-size:36px !important;
}

.mission-thumbnail .thumbnail-placeholder {
    font-size:72px !important;
}

.thumbnail-size {
    color:#fff;
    background:rgba(0, 0, 0, .45);
    padding:2px 6px 2px 6px;
    border-radius:.25rem 0 .25rem 0;
    right:0;
    bottom:0;
    display:block;
    position:absolute;
    font-size:90%;
}

.thumbnail-duration {
    color:#fff;
    background:rgba(0, 0, 0, .45);
    padding:2px 6px 2px 6px;
    border-radius:.25rem 0 .25rem 0;
    left:0;
    top:0;
    display:block;
    position:absolute;
    font-size:90%;
}

.thumbnail-properties {
    color:#fff;
    background:rgba(0, 0, 0, .45);
    padding:2px 6px 2px 6px;
    border-radius:0 .25rem 0 .25rem;
    left:0;
    bottom:0;
    display:block;
    position:absolute;
    font-size:85%;
}

.mission-status-info {
    width:288px;
    white-space:nowrap;
}

.measurement-results {
    flex-grow:1;
    overflow-x:auto;
    overflow-y:hidden;
}

.measurement-chart-container {
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    position:relative;
}

.measurement-chart {
    height:162px;
    transition:.3s;
    /*width:100%;*/
    /*background:red;*/
}

.badge-mission-group {
    background:rgba(0, 0, 0, .05);
}

.mission-list-item:hover {
    background:rgba(0, 0, 0, .03) !important;
}

.timeline-thumbnail {
    border-radius:2px;
    position:absolute;
    width:100%;
    height:100%;
    z-index:90;
    top:0;
    left:0;
    background-size:cover;
}

.timeline-thumbnails {
    background:#fff;
    display:none;
    border:2px solid #fff;
    box-shadow:0px 2px 10px rgba(0, 0, 0, .45);
    margin-top:-165px;
    z-index:100;
    border-radius:4px;
    width:192px;
    height:108px;
    position:absolute;
    opacity:0;
    transition:opacity .15s;
    pointer-events:none;
}

/*.timeline-thumbnails.bottom {
    margin-top:-60px;
}*/

.timeline-time {
    position:absolute;
    z-index:110;
    top:0;
    left:0;
    background:rgba(0, 0, 0, .45);
    color:#fff;
    padding:2px 6px 2px 6px;
    border-radius:.125rem 0 .125rem 0;
    font-size:90%;
}

/*.measurement-score-ring {
    position:relative;
    border-radius:50%;
    width:85px;
    height:85px;
    background:linear-gradient(270deg, var(--primary) 50%, transparent 50%), linear-gradient(120deg, var(--primary) 50%, rgba(0, 0, 0, .1) 50%);
    box-shadow:0px 2px 10px rgba(0, 0, 0, .15);
}

.measurement-score {
    top:5px;
    left:5px;
    position:relative;
    justify-content:center;
    text-align:center;
    display:flex;
    flex-direction:column;
    width:75px;
    height:75px;
    border-radius:50%;
    background:var(--light);
    color:var(--gray);
}

.measurement-score .measurement-score-number {
    color:var(--primary);
    margin:0;
    padding:0;
}*/

.focus-chart {
    display:block;
    width:772px;
}

.focus-chart polyline {
    transition:.3s;
    opacity:0;
}

.measurement-score {
    overflow:hidden;
    margin:0;
    border-radius:50%;
}

.measurement-score.disabled, .measurement-chart.disabled {
    filter:grayscale(1);
    opacity:.65;
}

.score-ring {
    width:70px;
    height:70px;
}


.score-ring-small {
    width:60px;
    height:60px;
}

.score-ring .circle {
    fill:none;
    stroke:#e4e4e4;
    stroke-width:4.2;
}

.score-ring .ring {
    stroke:var(--primary);
    fill:none;
    stroke-width:2.4;
    stroke-linecap:round;
}

.score-ring text {
    text-anchor: middle;
}

.score-ring .percentage {
    font-size: 0.75em;
    fill:var(--primary)
}

.score-ring .description {
    font-size:0.4em;
    fill:var(--gray)
}

.score-ring-loading {
    position:absolute;
    animation:spinning-ring 1.2s linear infinite;
    margin-top:-70px;
    z-index:10;
    transition:.3s;
}

.score-ring-small.score-ring-loading {
    margin-top:-60px;
}

.score-ring-loading .ring {
    stroke:url(#grad3);
}

.score-ring-small.score-ring-loading .ring {
    stroke:url(#grad4);
}

.video-mode-container {
    overflow:hidden;
    transition:.3s;
}

.video-layer-container {
    overflow:hidden;
    transition:.3s;
}

.video-mode-button {
    cursor:pointer;
    border:1px solid var(--primary);
    color:var(--primary);
    border-radius:3px;
    background:transparent;
    width:100%;
    display:flex;
    flex-direction:column;
    transition:background-color .2s;
    padding:0;
    position:relative;
    margin-bottom:8px;
}

.video-mode-button.video-mode-button-3rd {
    width:calc(33% - 3px);
}

.video-mode-button-group .video-mode-button {
    border-radius:0;
    border-bottom-width:0;
    margin:0;
}

.video-mode-button-group .video-mode-button:first-child {
    border-radius:3px 3px 0px 0px;
}

.video-mode-button-group .video-mode-button:last-child {
    border-radius:0px 0px 3px 3px;
    border-bottom-width:1px;
}

.video-mode-button:not(.disabled):not(.active):hover .video-mode-button-row {
    background:#d2e7ff;
    color:#0f69c8;
}

.video-mode-button.active .video-mode-button-row {
    color:#fff;
    background:var(--primary);
}

.video-mode-button.active .video-mode-button-row {
    font-weight:bold;
}

.video-mode-button.disabled, .aoi-control-buttons.disabled {
    filter:grayscale(1);
    opacity:.65;
    cursor:not-allowed;
}

.aoi-control-buttons.disabled * {
    pointer-events:none;
}

.video-mode-button.loading {
    cursor:progress;
    
}

.video-mode-button .video-mode-button-row .material-icons {
    font-size:32px;
    margin:0 auto;
}

.video-mode-button-row.icon {
    padding-top:16px !important;
    height:36px;
    overflow:hidden;
}

.video-mode-button .description {
    text-align:center;
    font-size:18px;
    flex-grow:1;
}

.video-mode-button.video-mode-button-3rd .description {
    font-size:14px;
}

.video-mode-button.video-mode-button-3rd .material-icons {
    font-size:24px;
}

.video-mode-button-row {
    pointer-events:none;
    padding:8px 20px;
    width:100%;
    display:flex;
    flex-direction:row;
    align-items:center;
    transition:background-color .2s;
}

.video-mode-button.video-mode-button-3rd .video-mode-button-row {
    pointer-events:none;
    padding:6px 6px;
}

.video-mode-button ul {
    list-style-type:none;
    width:100%;
    /*border-top:1px solid #007bff;*/
    max-height:0px;
    margin:0;
    padding:0;
    background:#fff;
    border-radius:0 0 3px 3px;
    overflow:hidden;
    transition:max-height .2s;
}

.video-mode-button.open ul, .video-mode-button.active ul {
    border-top:1px solid var(--primary) !important;
    max-height:1000px;
}

.video-mode-button ul li {
    cursor:default;
    color:var(--dark);
    border-radius:0 !important;
    font-size:90%;
    padding:16px;
    text-align:left;
    transition:background-color .2s;
}

.video-mode-button ul li * {
    pointer-events:none;
}

.video-mode-button ul li.ready {
    color:var(--primary);
}

.video-mode-button ul li:not(.ready):hover {
    background-color:#fff;
}

.video-mode-button ul li:nth-of-type(odd):not(.ready):hover {
    background-color:rgba(0, 0, 0, .05);
}

/*.video-mode-button ul li:nth-of-type(odd):not(.active):hover {
    background-color:rgba(0, 0, 0, .05);
}*/

.video-mode-button ul li:not(:hover):nth-of-type(odd):not(.active) {
    background-color:rgba(0, 0, 0, .05);
}

.video-mode-button ul li.ready:not(.active):not(.loading):hover {
    cursor:pointer;
    background-color:#d2e7ff;
    color:#0f69c8;
}

.video-mode-button:focus, #video-controls button:focus {
    outline:none;
}

.video-mode-button ul li.active {
    font-weight:bold;
    background:var(--primary);
    color:#fff;
}

.video-mode-button ul li.loading {
    background:var(--primary) !important;
    color:#fff;
}

.video-mode-button-group-horizontal {
    border-radius:3px;
    border:1px solid var(--primary);
    margin-bottom:8px;
}

.video-mode-button-group-horizontal button {
    margin:0 !important;
    border-radius:0 !important;
    border:0 !important;
}

.video-mode-button-group-horizontal .description {
    font-size:16px;
}

.video-mode-button-group-horizontal .material-icons {
    font-size:22px !important;
}

.video-mode-button-group-horizontal button:first-of-type {
    border-radius:3px 0px 0px 3px !important;
}

.video-mode-button-group-horizontal button:last-of-type {
    border-radius:0px 3px 3px 0px !important;
}

.expand-collapse-aoi span, .expand-collapse-focus span {
    pointer-events:none;
}

.aoi-save-button-alert {
    position:absolute;
	width:10px;
	height:10px;
	border-radius:50%;
    background:red;
    pointer-events:none;
    top:50%;
    left:50%;
    transform:translate(calc(-50% + 10px), calc(-50% - 2px));
    display:none;
}

button.alert:not(.disabled) .aoi-save-button-alert {
    display:block;
}

.aoi-count {
    margin-top:-2px;
    margin-bottom:12px;
}

.badge-aoi-count {
    padding:6px 10px 6px 10px;
    font-size:80%;
}

.aois-container {
    position:relative;
}

.aois-container .modal {
    overflow:hidden;
}

.aoi-editor {
    display:none;
}

.aoi-editor-options.modal-open {
    filter:blur(2px) saturate(0.5);
}

.aoi-editor-options {
    transition:.3s;
}

.aoi-editor-options.disabled {
    cursor:not-allowed;
}

.aoi-editor-options.disabled * {
    pointer-events:none;
}

.aoi-list-container {
    min-height:180px;
}

.aoi-list-container, .aoi-list {
    margin-top:-6px;
    padding-top:10px;
    scrollbar-width:none;
    position:relative;
    max-height:400px;
    margin-bottom:2px;
    --scrollbar-width:0px;
    --mask-height:8.5px;
    --mask-image-content: linear-gradient(
        to bottom,
        transparent,
        black var(--mask-height),
        black calc(100% - var(--mask-height)),
        transparent
    );
    --mask-size-content: calc(100% - var(--scrollbar-width)) 100%;
    --mask-image-scrollbar: linear-gradient(black, black);
    --mask-size-scrollbar: var(--scrollbar-width) 100%;

    overflow-y: auto;
    padding-bottom: var(--mask-height);

    -webkit-mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
    -webkit-mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
    -webkit-mask-position: 0 0, 100% 0;
    -webkit-mask-repeat: no-repeat, no-repeat;

    mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
    mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
    mask-position: 0 0, 100% 0;
    mask-repeat: no-repeat, no-repeat;
}

.aoi-list {
    margin-bottom:-6px !important;
    padding-top:8px;
}

.aoi-list-container::-webkit-scrollbar, .aoi-list::-webkit-scrollbar {
	width: var(--scrollbar-width);
}

.aoi-list-container::-webkit-scrollbar-thumb, .aoi-list::-webkit-scrollbar-thumb {
	background-color: var(--gray);
	border-radius: 9999px;
    height:0px !important;
}

.aoi-list-container::-webkit-scrollbar-track, .aoi-list::-webkit-scrollbar-track {
	background-color: transparent;
}

.aoi-list-container ul {
    list-style:none;
    margin:0;
    padding:0;
}

.aoi-list-container .input-group-text, .aoi-list-container button {
    border-radius:0 !important;
    border-bottom-width:0;
}

.aoi-list-container input, .aoi-list-container button {
    border-bottom-width:0;
}

.aoi-list-container.category button {
    width:80px;
}

li.aoi-dummy, li.aoi-static-dummy {
    display:none;
}

.aoi-list-container ul li button, .aoi-list-container ul li input, .aoi-list-container ul li .input-group-append {
    height:40px;
}

.aoi-list-container ul li *, .aoi-list ul li * {
    font-size:14px;
}

.aoi-list-container ul li .material-icons, .aoi-list ul li .material-icons {
    font-size:24px;
    line-height:18px;
}

.aoi-list ul li .material-icons {
    line-height:27px;
}

.aoi-list-container ul li input[type=checkbox] {
    appearance:none;
    width:24px;
    height:24px;
    background:#fff;
    margin:10px;
    border-radius:2px;
    border:2px solid rgba(0, 0, 0, .3);
    transition:.15s;
    cursor:pointer;
    position:relative;
}

.aoi-list-container ul li input[type=checkbox]:hover {
    border:2px solid rgba(0, 0, 0, .5);
}


.aoi-list-container ul li input[type=checkbox]:checked {
    border:2px solid var(--primary);
    background:var(--primary);
}

.aoi-list-container ul li input[type=checkbox]:checked::before {
    content: 'check';
    font-family:"Material Icons";
    display: block;
    text-align: center;
    color:#fff;
    font-size:24px;
    position:absolute;
    top:-8px;
    left:-2px;
}

.aoi-list-container ul li .input-group-text {
    padding:0;
}

.aoi-list-container ul li:first-of-type button:first-of-type {
    border-top-left-radius:3px !important;
}

.aoi-list-container ul li:first-of-type .input-group-text {
    border-top-right-radius:3px !important;
}

.aoi-list-container ul li:last-of-type button:first-of-type {
    border-bottom-left-radius:3px !important;
}

.aoi-list-container ul li:last-of-type button {
    border-bottom-width:1px;
}

.aoi-list-container ul li button span, .aoi-list-container ul li .set-aoi-category span {
    pointer-events:none;
}

.aoi-list-container ul li .set-aoi-category {
    cursor:pointer;
}

.aoi-list-container ul li:last-of-type .input-group-text {
    border-bottom-right-radius:3px !important;
    border-bottom-width:1px;
}

.aoi-list-container ul li:last-of-type input:not([type='checkbox']) {
    border-bottom-width:1px;
}

.aoi-list-container ul li .input-group-text {
    border-color:var(--gray) !important
}

.aoi-list-container ul li input {
    border-color:var(--gray)
}

.aoi-list-container ul li input:focus {
    border-color:var(--gray);
    box-shadow:none;
}

.aoi-list-container ul li.selected {
    position:relative;
    box-shadow: 0px 0px 8px rgba(0, 123, 255, 0.65);
    z-index:30;
}

.aoi-list .loading .lds-ellipsis div {
    background:var(--gray) !important;
}

.aoi-list .loading .lds-ellipsis {
    top:50%;
    left:50%;
    transform:translate(-50%, calc(-50% + 30px));
    transition:.3s;
}

.aoi-list ul {
    list-style:none;
    margin:0;
    padding:0;
}

.aoi-list ul li {
    color:var(--primary) !important;
    margin:0;
    color:var(--dark);
    border-left:1px solid;
    border-right:1px solid;
    border-top:1px solid;
    border-color:var(--primary);
    transition:.3s;
    cursor:pointer;
}

.aoi-list ul li * {
    pointer-events:none;
}

.aoi-list ul li:nth-child(2) {
    border-top:0 !important;
}

.aoi-list ul li:hover {
    color:var(--white) !important;
    background:var(--primary) !important;
}

.aoi-list ul li:first-child {
    border:1px solid var(--primary);
    border-top-left-radius:3px;
    border-top-right-radius:3px;
}

.aoi-list ul li:last-child {
    border:1px solid var(--primary);
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}

.aoi-list ul li span {
    margin:0;
    padding:5px 10px 5px 10px;
}

.aoi-list ul li span:not(:last-child) {
    border-right:1px solid var(--primary);
}

.aoi-list .no-aois {
    display:none;
}

.side-panel {
    min-width:385px;
}

.side-panel h4:last-of-type.collapsed {
    padding-bottom:1px !important;
}

.side-panel h4 *:not(button) {
    pointer-events:none;
}

.side-panel h4:not(:first-child) {
    margin-top:0.65em;
}

.side-panel h4 {
    cursor:pointer;
    padding-bottom:6px;
}

.side-panel h4 {
    cursor:pointer;
    padding-bottom:6px;
}

.side-panel h4:not(:first-child) span {
    pointer-events:none;
}

.side-panel h4::after, .side-panel h4:not(:first-child)::before {
    display:block;
    position:absolute;
    content:"";
    width:calc(100% - 1px);
    margin-left:-0.5rem;
    height:1px;
    margin-top:5px;
    background:#dee2e6;
}

.side-panel h4:not(:first-child)::before {
    margin-top:-6px;
}

.side-panel div.collapsed {
    height:0 !important;
    overflow:hidden;
}

.side-panel h4.collapsed {
    overflow:hidden;
    margin-bottom:-4px !important;
    padding:0 !important;
}

.side-panel h4:not(:last-child).collapsed::after {
    display:none !important;
}

.main-content {
    min-width:860px;
}

#video-player .panelist-video-loading {
    opacity:0;
    display:none;
    position:absolute;
    background:var(--dark);
    width:100%;
    height:100%;
    z-index:50;
    transition:.3s;
}

.opacity-loading {
    animation-name:opacity-loading;
    animation-duration:2s;
    animation-iteration-count:infinite;
}
  
@keyframes opacity-loading {
    0% {
        background:rgba(0, 0, 0, .05);
    }
    50% {
        background:rgba(0, 0, 0, .1);
    }
    100% {
        background:rgba(0, 0, 0, .05);
    }
}

@keyframes spinning-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
  
#video-capture {
    display:none;
}

#captures {
    padding:10px;
    display:none;
    text-align:center;
    margin-top:10px;
    margin-bottom:-20px;
    opacity:0;
    transition:.2s;
}

#captures .thumbnail {
    cursor:pointer;
    border-radius:999px;
    margin:10px;
    width:162px;
    height:162px;
    position:relative;
    display:inline-block;
    transition:.2s;
    margin-bottom:60px;
}

#captures .thumbnail-container {
    border:4px solid #fff;
    box-shadow:0px 4px 14px rgba(0, 0, 0, .25);
    border-radius:999px;
    width:160px;
    height:160px;
    position:relative;
    display:inline-block;
    transition:.2s;
    overflow:hidden;
}

#captures .thumbnail .rating {
    color:#fff;
    float:right;
    cursor:pointer;
    box-shadow:0px 5px 8px rgba(0, 0, 0, .15);
    border-radius:999px;
    padding-left:10px;
    padding-right:10px;
    height:30px;
    line-height:30px;
    vertical-align:middle;
    z-index:20;
    background:#fff;
    margin-bottom:-30px;
    text-align:center;
    font-weight:bold;
    position:relative;
}

.thumbnail .deselect {
    background:var(--primary);
    color:#fff;
    float:left;
    cursor:pointer;
    box-shadow:0px 5px 8px rgba(0, 0, 0, .15);
    border-radius:999px;
    height:30px;
    width:30px;
    line-height:26px;
    vertical-align:middle;
    z-index:20;
    margin-bottom:-30px;
    text-align:center;
    font-weight:bold;
    position:relative;
    opacity:0;
}

.selected .deselect {
    opacity:1;
}

#captures .thumbnail:hover .thumbnail-container {
    border:4px solid var(--blue);
    box-shadow: 0px 4px 16px rgba(0, 0, 0, .25);
}

#captures .thumbnail:hover .timestamp span {
    color:#fff;
    background:var(--blue);
}

#captures .timestamp {
    margin:10px auto;
    width:150px;
    text-align:center;
}

#captures .timestamp span {
    transition:.2s;
    font-size:14px;
    font-family:monospace;
    background:var(--gray);
    color:#fff;
    padding:6px;
    border-radius:999px;
}

#captures-table {
    opacity:0;
    transition:.3s;
    table-layout:fixed;
    margin:0;
}

#captures-table tbody {
    display:none;
}

#captures-table td {
    position:relative;
    border:0 !important;
}

#captures-table canvas {
    margin:0;
    float:left;
    width:100px;
    height:100px;
    border-radius:999px;
    box-shadow:0px 2px 6px rgba(0, 0, 0, .15);
}

#captures-table tr, #captures-table td {
    text-align:center;
    font-size:110%;
    cursor:pointer;
    height:90px;
    line-height:90px;
    vertical-align:middle;
}

#captures-table tr.skeleton {
    display:none;
    opacity:0.2;
}

#captures-table tr.skeleton td div {
    background:var(--gray);
    border-radius:999px;
    width:100px;
    height:100px;
}

#captures-table tr.skeleton .duration {
    padding:10px;
    margin:0 auto;
    margin-bottom:14px;
    margin-top:11px;
    height:10px;
    width:100px;
    background:var(--gray);
    border-radius:999px;
}

#captures-table tr.skeleton .time {
    padding:10px;
    margin:0 auto;
    margin-bottom:11px;
    margin-top:16px;
    height:10px;
    width:100px;
    background:var(--gray);
    border-radius:999px;
}

#captures-table tr.skeleton .score {
    color:var(--gray);
    background-color: var(--gray);
}

td:last-child {
    text-align:right !important;
    padding-right:7%;
}

td:last-child span {
    font-weight:bold;
    padding:10px;
    padding-left:14px;
    padding-right:14px;
    border-radius:999px;
    background:#fff;
    color:#fff;
    box-shadow:0px 2px 5px rgba(0, 0, 0, .08);
}

tr {
    transition:.1s;
}

td:first-child {
    padding-top:0;
    padding-bottom:0;
    padding-left:10px;
}

#captures-table .playing {
    background:var(--primary);
    color:#fff;
}

#captures .playing .thumbnail-container {
    border:4px solid var(--blue);
    box-shadow: 0px 4px 14px rgba(0, 117, 255, .4);
}

#captures .playing .timestamp span {
    color:#fff;
    background:var(--blue);
}

#captures canvas {
    float:left;
    width:100%;
}

#video-container {
    background:var(--dark);
    position:relative;
    float:left;
    margin:0;
    width:100%;
    z-index:-2;
    display:flex;
    justify-content:center;
}

#video, #video-heatmap, #video-pathways, #video-panelist {
    z-index:1;
    position:absolute;
    transition:opacity .3s;
}

#video-heatmap, #video-pathways, #video-panelist {
    z-index:-1;
    opacity:0;
    display:none;
}

#video-overlay-attr {
    pointer-events:none;
    display:none;
    float:left;
    position:relative;
}

#video-overlay-focus {
    left:50%;
    transform:translateX(-50%);
    pointer-events:none;
    display:none;
    float:left;
    position:relative;
}

#video-overlay-gaze {
    left:50%;
    transform:translateX(-50%);
    pointer-events:none;
    display:none;
    float:left;
    position:relative;
}

#video-overlay-selected-areas {
    left:50%;
    transform:translateX(-50%);
    display:none;
    float:left;
    position:relative;
}

#progress-bar {
    position:relative;
    margin-left:-20px;
    width:calc(100% - 10px - 150px - 115px - 35px - 60px - 10px - 30px - 12px - 20px - 40px - 50px);
}

#playback-speed {
    width:60px;
}

#current-speed {
    display:inline-block;
    width:10px;
}

#volume {
    z-index:-10;
    box-sizing:content-box;
    border:12px solid var(--dark);
    border-radius:3px;
    background-color:white !important;
    position:absolute;
    width:70px;
    transform:rotate(-90deg) translateX(50px) translateY(6px);
    box-shadow:none !important;
    right:0px;
    transition:.3s;
}

#video-controls #current-time {
    width:115px;
}

#video-controls #current-scene {
    margin:0;
    padding:0;
    display:none;
}

#pause {
    display:none;
}

#video-player video {
    margin:0;
    padding:0;
    opacity:0;
    transition:opacity .3s;
}

#video-player .loading {
    text-align:center;
    position:absolute;
    color:#fff;
    transition:.3s;
    top:50%;
    left:50%;
    transform:translate(-50%, calc(-50% + 30px));
}

#video-player .not-selected {
    text-align:center;
    position:absolute;
    color:#fff;
    transition:.3s;
    top:50%;
    left:50%;
    transform:translate(-50%, calc(-50% + 30px));
}

#video-player .lds-ellipsis div {
    background:#fff;
}

.measurement-chart .loading {
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    position:absolute;
    transition:.3s;
}

.measurement-chart .loading .lds-ellipsis div {
    background:var(--primary);
}


#attractions .loading {
    width:calc(100% - 30px);
    text-align:center;
    position:absolute;
    color:var(--gray);
    transition:.3s;
    top:calc(50% - 15px);
    transform:translateY(calc(50% - 15px));
}

#attractions .no-data {
    display:none;
    width:calc(100% - 30px);
    text-align:center;
    position:absolute;
    color:var(--gray);
    transition:.3s;
    top:calc(50% - 15px);
    transform:translateY(calc(50% - 15px));
}

#attractions .lds-ellipsis div {
    background:var(--gray);
}

#video-player {
    bottom:0;
    top:0;
}

#video-controls i {
    font-size:24px;
    margin-right:8px;
}

#video-controls {
    padding-left:10px;
    padding-right:10px;
    width:100%;
    display:inline-block;
    text-align:center;
    font-family:monospace;
    font-size:14px;
    margin:0;
    background:var(--dark);
    color:#fff;
    height:42px;
    padding-top:1px;
    line-height:40px;
    text-shadow:0px 1px 2px rgba(0,0,0,.45);
}

#video-controls * {
    height:40px;
}

#video-controls button {
    text-align:center;
    float:left;
    width:50px;
    cursor:pointer;
    color:#fff;
    background:none;
    border:0;
    transition:.2s;
}

#video-controls button i, #video-controls label i {
    color:var(--light);
    line-height:34px;
    vertical-align:middle;
    text-shadow:0px 1px 3px rgba(0, 0, 0, .45);
    margin:0;
    transition:.2s;
}

#video-controls input[type=range] {
    margin-right:6px;
    -webkit-appearance:none;
    height:2px;
    vertical-align:middle;
    margin-top:-4px;
    box-shadow:0px 1px 3px rgba(0, 0, 0, .45);
    background:#fff;
}

input#progress-bar {
    cursor:pointer;
    box-shadow:none !important;
    background:none !important;
}

#video-controls input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background:#ffffff;
    cursor:pointer;
    width:12px;
    height:12px;
    border-radius:999px;
    border:0;
    box-shadow:0px 1px 3px rgba(0,0,0,.45);
    transition:.1s;
}

#video-controls input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    background:#ffffff;
    cursor:pointer;
    width:12px;
    height:12px;
    border-radius:999px;
    border:0;
    box-shadow:0px 1px 3px rgba(0,0,0,.45);
    transition:.1s;
}

#video-controls #progress-bar[type=range]::-webkit-slider-thumb {
    border:2px solid var(--primary);
    width:10px;
    height:10px;
    opacity:0;
}

#video-controls #progress-bar[type=range]::-moz-range-thumb {
    border:2px solid var(--primary);
    width:10px;
    height:10px;
    opacity:0;
}

#video-controls #progress-bar[type=range]:hover::-webkit-slider-thumb {
    margin-left:-1px;
    border:3px solid var(--primary);
    width:20px;
    height:20px;
    opacity:1;
}

#video-controls #progress-bar[type=range]:hover::-moz-range-thumb {
    margin-left:-1px;
    border:3px solid var(--primary);
    width:20px;
    height:20px;
    opacity:1;
}

#video-controls span {
    font-size:14px;
    display:inline-block;
    position:relative;
    top:-1px;
}

#clear {
    height:24px;
    padding-top:10px;
    display:inline-block;
    background:transparent;
    border:0;
    transition:.2s;
    color:gray;
    line-height:20px;
}

#clear i {
    cursor:pointer;
    font-size:48px;
}

#video-controls label {
    margin-left:6px;
    width:35px;
}

label.disabled {
    cursor:not-allowed;
}

label.loading {
    cursor:progress;
}

#video-controls label[for='volume'] {
    margin-left:20px !important;
    margin-right:-15px !important;
    cursor:pointer;
}

#video-controls label[for='volume']:hover #volume {
    z-index:10;
}


.cuts {
    overflow:hidden;
    -webkit-mask-image:-webkit-radial-gradient(white, black);
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    cursor:pointer;
    margin-top:13px;
    border-radius:5px;
    height:12px !important;
    background:var(--light);
    float:left;
    position:relative;
    margin-left:5px;
    transition:.1s;
}

.cuts-section {
	pointer-events:none !important;
	z-index:10;
	position:absolute !important;
	width:100% !important;
	background:linear-gradient(to right, rgba(0, 0, 0, .3) var(--start-pos), transparent var(--start-pos), transparent var(--end-pos), rgba(0, 0, 0, .3) var(--end-pos)) !important;
}

.cuts div {
	pointer-events:none;
	position:absolute;
	width:3px;
	background:var(--dark);
	height:100% !important;
	opacity:0.7;
}

.cuts .fill {
	opacity:1;
	width:0px;
	background:var(--primary);
}

.cuts:hover .fill {
	opacity:0.3;
}

.cuts .fill-temp {
	opacity:1;
	width:0px;
	background:var(--primary);
}

.grab {
	border:3px solid var(--primary);
	width:20px !important;
	height:20px !important;
	border-radius:999px;
	background:#fff;
	left:0;
	margin-top:9px;
	margin-left:219px;
	z-index:10;
	position:absolute;
	pointer-events:none;
	opacity:0;
	transition:width .1s, height .1s, opacity .1s;
}

.grab-hover {
	margin-top:9px;
	border:3px solid var(--primary);
	opacity:1 !important;
	width:20px !important;
	height:20px !important;
}

#attractions-controls, #aoi-controls {
	height:48px;
	display:flex;
	justify-content:space-between;
}

#attractions-controls > div {
	display:inline-block;
}

#attractions-controls span {
	padding-left:8px;
	padding-right:8px;
}

#attractions-controls .material-icons {
	margin-top:-2px;
	font-size:18px;
	line-height:12px;
}

#attractions-controls label {
	overflow:hidden;
	vertical-align:middle;
}

#focus-switch, #attractions-switch, #sample-switch, #pathways-switch, #heatmap-switch, #aois-switch {
	display:table-cell;
    vertical-align:middle;
	margin-left:10px;
	margin-right:10px;
	margin-top:3px;
}

#attractions {
	padding:0px;
	height:calc(100% - 64px);
	overflow-y:scroll;
}

#aoi-controls {
	text-align:left;
	transition:.2s;
}

#aoi-controls label {
	margin-bottom:-1px;
}

#aoi-controls.disabled {
	opacity:.75;
	pointer-events:none;
}

.deselect-attraction {
	opacity:0;
	position:absolute;
	right:0;
	top:0;
	width:60px;
	height:60px;
}

tr.selected .deselect-attraction {
	opacity:1;
	background:linear-gradient(45deg, rgba(0, 0, 0, 0) 49%, #fff 50%);
}

.deselect-attraction {
	line-height:30px;
	color:var(--primary);
}

.deselect-attraction i {
	padding-top:6px;
	padding-right:4px;
}

.controls-vr {
	margin-top:0px;
	height:30px;
	width:1px;
	border-left:1px solid LightGray;
	margin-left:20px;
	margin-right:20px;
}

#video-overlay-controls .controls-vr {
	margin-right:10px;
}

.aoi-save {
	margin-left:-8px;
	margin-top:-3px;
}

.aoi-control-buttons {
	margin-top:-5px;
    text-align:center;
    padding:3px;
}

.aoi-control-buttons button {
	width:38px;
    height:32px;
    line-height:16px;
	padding-left:0;
	padding-right:0;
	text-align:center;
    margin:4px;
}

.aoi-controls {
	display:flex;
}

.aoi-select {
	text-overflow:ellipsis;
	margin-top:0px;
	width:228px;
}

.stop-tracking {
	font-size:18px;
	height:24px;
	margin:0;
	padding:0;
	line-height:18px;
	margin-left:4px;
	margin-top:-2px;
	color:var(--primary);
	display:none;
}

.col-sm-6 {
	min-width:685px;
}

.col-sm-4 {
	min-width:510px;
	padding:0;
}

.timestamp-cell {
	line-height:45px !important;
}

.timestamp-cell hr {
	border:0;
	border-top:1px solid rgba(0, 0, 0, .2);
	margin:0;
	padding:0;
}

.timestamp-cell span {
	opacity:.85;
	font-family:monospace;
	font-size:80%;
}

.playing .timestamp-cell hr {
	border-color:rgba(255, 255, 255, .5);
}

.seconds {
	color:#fff;
	background:rgba(0, 0, 0, .4);
	width:100px;
	height:100px;
	border-radius:999px;
	text-align:center;
	z-index:20;
	position:absolute;
	margin-left:28px;
	margin-top:121px;
	padding-top:4px;
	font-weight:bold;
}

body {
    padding:0 !important;
}

.modal-backdrop {
    display:none;
}

.modal-open {
    overflow:auto;
}

.modal-dialog {
    position:relative;
    top:50%;
    transform:translateY(calc(-50% - 25px)) !important;
}

#edit-confirmation, #edit-error {
    padding-right:0 !important;
	position:absolute;
}

.aoi-controls span {
	line-height:42px;
}

#video-overlay-selected-areas-input-container, #video-overlay-selected-areas-category-container {
	position:absolute;
	z-index:10;
}

#video-overlay-selected-areas-input-container input {
	font-family:Arial;
	font-size:14px;
	display:none;
	position:absolute;
	height:16px;
	padding:5px;
	padding-left:0px;
	padding-top:12px;
	padding-bottom:8px;
	border:0;
	border-left:4px solid #fff;
	width:#fff;
	color:#000;
	overflow:hidden;
}

#video-overlay-selected-areas-input-container input.bottom {
	padding-top:11px;
	padding-bottom:10px;
}

#video-overlay-selected-areas-input-container input:focus-visible {
	outline:0 !important;
}

#video-overlay-selected-areas-input-container .button-tooltip {
	cursor:pointer;
	opacity:0;
	position:absolute;
}

#video-overlay-selected-areas-input-container .button-tooltip:active {
	pointer-events:none;
}

#video-overlay-selected-areas-category-container {
	margin:0;
	padding:0;
	overflow:hidden;
	transition:max-height .2s;
	max-height:0;
	opacity:.9;
}

#video-overlay-selected-areas-category-container label {
	border-radius:0 !important;
}

#video-overlay-selected-areas-category-container label:not(.active):not(:hover) {
	background:#fff
}

.aoi-controls :disabled {
	cursor:default;
	pointer-events:none;
}

.recordings {
	height:calc(100% - 16px);
	overflow-y:auto;
}

.recordings ul li.ready {
	color:var(--primary);
}

.recordings ul li.active, .recordings ul li.active:hover {
	background:var(--primary);
	color:#fff;
}

.recordings ul li:not(:first-of-type) {
	border-radius:0;
}

.recordings ul li:not(:last-of-type) {
	border-radius:0;
}

.recordings li:not(:hover):nth-of-type(even):not(.active) {
    background-color: var(--light);
}

.recordings li:nth-of-type(even):not(.ready):hover {
    background-color: var(--light);
}

.lds-ellipsis {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 50px;
}

.lds-ellipsis div {
	position: absolute;
	top: 13px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
	left: 8px;
	animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
	left: 8px;
	animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
	left: 32px;
	animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
	left: 56px;
	animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
	0% {
	transform: scale(0);
	}

	100% {
	transform: scale(1);
	}
}

@keyframes lds-ellipsis3 {
	0% {
	transform: scale(1);
	}

	100% {
	transform: scale(0);
	}
}

@keyframes lds-ellipsis2 {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(24px, 0);
	}
}

#video-player .tracking {
	cursor:progress;
	opacity:0;
	display:none;
	color:#fff;
	z-index:10;
	position:absolute;
	transition:.3s;
}

#video-player .after {
	cursor:default;
	pointer-events:none;
}

#video-player .tracking p {
	display:inline-block;
	margin-left:5px;
	margin-bottom:0;
    margin-bottom:-50%;
}

#video-player .tracking button {
	height:30px;
    margin-right:5px;
    margin-left:5px;
}

#video-player .tracking .tracking-box, #video-player .tracking .tracking-confirm-box {
	pointer-events:auto;
	display:none;
	background:rgba(0, 0, 0, .85);
	padding:5px;
    height:50px;
}

#video-player .tracking .tracking-box {
    border-radius:5px;
    margin:0 auto;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

#video-player .tracking .tracking-box p {
    transform:translateY(-50%);
}

#video-player .tracking .tracking-confirm-box p {
    margin-top:5px;
}

#video-player .tracking .tracking-confirm-box {
    position:absolute;
	border-radius:0px 0px 5px 0px;
	opacity:.75;
	transition:.3s;
}

#video-player .tracking .tracking-confirm-box:hover {
	opacity:1;
}

#aoi-timeline, #audience-focus-timeline {
	color:#fff;
	padding:10px;
	background:linear-gradient(#24282d 0%, #2c3237 25px);
	width:100%;
	padding-bottom:42px;
	position:relative;
}

#aoi-timeline h6, #audience-focus-timeline h6 {
	font-weight:bold;
	padding:8px;
	color:#fff;
	display:block;
	height:38px;
	margin:0;
    margin-left:-6px;
    margin-top:-6px;
    margin-bottom:2px;
    cursor:pointer;
}

#aoi-timeline.collapsed, #audience-focus-timeline.collapsed {
    height:49px;
    padding-bottom:0;
    overflow:hidden;
}

#aoi-timeline.collapsed #aoi-timeline-clear-range, #audience-focus-timeline.collapsed #audience-focus-timeline-clear-range {
    display:none;
}

#aoi-timeline h6 span.material-icons, #audience-focus-timeline h6 span.material-icons {
    margin-right:8px;
    font-weight:bold;
    font-size:150%;
}

.aoi-target-order {
	color:#fff;
	pointer-events:none;
}

.aoi-attention-average, .audience-focus-average {
	color:var(--yellow);
}

#aoi-timeline .timeline, #audience-focus-timeline .timeline {
	padding:2px;
	margin-top:6px;
	display:block;
}

#aoi-timeline .timeline polyline, #audience-focus-timeline .timeline polyline {
	transition:.3s;
    opacity:0;
}

#aoi-timeline .labels, #audience-focus-timeline .labels {
	user-select:none;
}

#aoi-timeline .timeline-target-aoi {
	height:33px;
	float:left;
}

#aoi-timeline .timeline-target-list {
	height:33px;
	float:right;
}

#aoi-timeline .target-list-container {
	width:100%;
	float:left;
	max-height:0;
	transition:.3s;
	overflow-y:hidden;
}

#aoi-timeline #aoi-timeline-clear-range, #audience-focus-timeline #audience-focus-timeline-clear-range {
	user-select:none;
	cursor:pointer;
	position:absolute;
	width:25px;
	height:25px;
	border-radius:50%;
	background:var(--light);
	color:var(--dark);
	right:10px;
	top:15px;
	transition:.3s;
}

#aoi-timeline #aoi-timeline-clear-range i, #audience-focus-timeline #audience-focus-timeline-clear-range i {
	cursor:pointer;
	font-size:18px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}

#aoi-timeline .loading-timeline, #audience-focus-timeline .loading-timeline {
	opacity:1;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(33, 33, 33, .5);
	z-index:20;
	transition:.3s;
}

.loading-timeline .lds-ellipsis, .loading-timeline p {
	color:#fff;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}

.loading-timeline .lds-ellipsis div {
	background:#fff;
}

.target-list-container hr {
	border-color:rgba(255, 255, 255, .2)
}

.target-list-container button {
    transition:.3s;
}

#aoi-timeline .target-list-container label:not(.btn-group-vertical label):not(.btn-group-toggle label) {
	border-radius:3px;
}

#aoi-timeline .btn-group-vertical label:not(.active):not(:hover) {
	background:#fff;
}

.timeline-hovered-aoi-list {
    opacity:0;
    color:#fff;
    font-size:14px;
    position:absolute;
    display:none;
    background:var(--primary);
    z-index:20;
    border-radius:3px;
    padding:4px 6px;
    transition:opacity .3s;
    transition-delay:.4s;
    margin-top:-2px;
}

.timeline-hovered-aoi-list ul {
    text-align:center;
    list-style:none;
    margin:0;
    padding:0;
}

.timeline-hovered-aoi-glow {
    filter:brightness(1.4);
}

.lds-dual-ring {
	display: inline-block;
	width: 40px;
	height: 40px;
}

.lds-dual-ring:after {
	content: " ";
	display: block;
	width: 32px;
	height: 32px;
	margin: 4px;
	border-radius: 50%;
	border: 4px solid #fff;
	border-color: #fff transparent #fff transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}