/* .fade-enter-active {
    transition: all .5s ease;
}

.fade-leave-active {
transition: all .5s ease;
}

.fade-enter, .fade-leave-to {
transform: translateX(10px);
opacity: 0;
} */

h1 {
    font-size: 24px;
    color: rgb(0, 59, 92);
}

h2 {
    font-size: 20px;
    color: rgb(0, 59, 92);
}

h3 {
    font-size: 16px;
    color: rgb(0, 59, 92);
}

a {
    cursor: pointer;
    color: black;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

html {
    font-family: Inter, sans-serif;
}

body {
    margin: 0;
    font-family: Inter, sans-serif;
}

input, select {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    padding: 6px;
    border: 1px #000 solid;
    border-radius: 4px;
    border-color: #ccc;
    font-family: Inter, sans-serif;
}

input:focus {
    outline: none;
    border-color: #009cde;
}

button {
    padding: 12px 10px;
    background: rgb(0, 74, 97);
    font-size: 16px;
    color: #fff;
    border: none;
    margin: 14px 0;
    border-radius: 6px;
    font-family: Inter, sans-serif;
}

button.disabled {
    background: #bbb;
}

button:active {
    background-color: #009cde;
}

button:focus {
    outline: none;
    box-shadow: none;
    /* for desktop */
    /* box-shadow: inset 0 0 3px 3px #48b8f7; */
}

.buttonContainer {
    display: flex;
}

.buttonContainer button {
    margin-right: 6px;
    flex: 1;
    flex-basis: auto;
}

.buttonContainer button:last-child {
    margin-right: 0;
}

/* FIXED */

.fixed {
    position: fixed;
    margin: 0 0 20px 0;
    bottom: 0;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

.fixed .buttonContainer {
    margin: -14px 0 -20px 0;
    background: #fff;
}

.fixed .buttonContainer button {
    border-radius: 8px;
    border: 1px solid #003b5c;
    margin-right: 8px;
}

.fixed .buttonContainer button:last-child {
    margin-right: 0;
}

.fixed .buttonContainer button.outline {
    background: #ffffff;
    color: #003b5c;
}

.sticky {
    position: sticky;
    background: white;
    bottom: 0;
    padding: 24px 0;
    box-sizing: border-box; 
}

.sticky .buttonContainer button {
    min-width: 50%;
    margin: auto;
    font-size: 18px;
}

section.main, section.profile, section.services {
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

section.profileSettings {
    overflow-y: auto;
    box-sizing: border-box;
    flex-grow: 1;
    max-width: 500px;
}

/* HEADER MAIN */

header.main {
    margin: 12px -4px 12px -4px;
    box-sizing: border-box;
    display: flex;
    font-size: 18px;
}

header.main .menu1 {
	flex: 1;
	text-align: start;
	box-sizing: border-box;
	flex-basis: 0;
	align-self: flex-end;
}

header.main .menu2 {
    flex: 1;
    text-align: end;
    box-sizing: border-box;
    flex-basis: 0;
    align-self: flex-end;
}

header.main .logo img {
    text-align: center;
    max-width: 88px;
    margin: 0;
}

header.main a {
	display: inline-block;
    margin-right: 6px;
    padding: 4px;
}

header.main a:first-child {
    margin-left: 0;
    padding-left: 0;
}

header.main a:last-child {
    margin-right: 0;
    padding-right: 0;
}

header.main a:focus {
    box-shadow: 0 0 3px 1px #009cde;
    outline: none;
}

@media only screen and (max-width: 500px) {
	header.main {
	   flex-wrap: wrap;
	}
	
	header.main div.logo {
	   order: 1;
       width: 100%;
       text-align: center;
	}
	
	header.main nav.menu1 {
	   order: 2;
	   flex: 1 1 auto;
	   text-align: begin;
       margin: 4px 0;
       align-self: flex-start;
	}
	
	header.main nav.menu2 {
	   order: 3;
	   flex: 1 1 auto;
       text-align: end;
       margin: 4px 0;
       align-self: flex-start;
    }

    header.main nav a {
        display: block;
        margin: 0 0 12px 0;
    }

    header.main nav a:last-child {
        margin: 0;
    }

}

/* MAIN CONTENT */

section.content {
    flex: 1 1 auto;
    display: flex;
}

section.content section.listColumn {
    width: 20%;
    display: flex;
    flex-direction: column;
}

section.content section.listColumn header {
    display: flex;
    margin: 0 0 6px 0;
    align-items: center;
}

section.content section.listColumn header h2 {
    margin: 0 6px 0 0;
    font-weight: 500;
    font-size: 20px;
}

section.content section.listColumn header .controls {
    flex: 1 1 auto;
    text-align: right;
    display: flex;
    justify-content: right;
}

section.content section.listColumn header .controls button {
    margin: 0 4px 0 0;
    padding: 4px;
    min-height: 30px;
    min-width: 30px;
}

section.content section.listColumn header .controls button:last-child {
    margin: 0;
}

section.content section.mainColumn {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-left: 1.5vw;
    box-sizing: border-box;
    position: relative;
}

section.content section.mainColumn section.cameras {
    flex: 1 1 auto;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    overflow-y: auto;
}

/* DEVICE LIST */

section.deviceList {
    flex: 0 0 auto;
    max-height: 50%;
    display: flex;
    flex-direction: column;
}

section.deviceList ul {
    margin: 0 -6px;
    padding: 6px;
    list-style-position: inside;
    overflow-y: auto;
}

section.deviceList li {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-bottom: 10px;
    align-items: center;
}

section.deviceList li.selected {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px hsl(194, 100%, 19%);
    outline: none;
}

section.deviceList li:focus {
    border: 1px solid hsl(194, 100%, 19%);
    outline: none;
}

section.deviceList li.selected:focus {
    border: 1px solid hsl(194, 100%, 19%);
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px hsl(194, 100%, 19%);
    outline: none;
}

section.deviceList li:last-child,
section.deviceList li.selected:last-child {
    margin-bottom: 0;
}

section.deviceList li > img {
    width: 30px;
    height: 30px;
}

section.deviceList li .main {
    padding-left: 6px;
    flex: 1 1 auto;
    overflow: hidden;
}

section.deviceList li .main h3 {
    margin: 0 0 3px 0;
    font-size: 16px;
    font-weight: 500;
}

section.deviceList li .main p {
    margin: 0;
    font-size: 11px;
    font-weight: 300;
}

section.deviceList li .main p.eolInfo {
    color: #a00;
}

section.deviceList li > button {
    width: 28px;
    height: 40px;
    color: #222;
    background: transparent;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    font-size: 16px;
    border-radius: 4px;
    text-align: center;
    vertical-align: middle;
    display: block;
}

section.deviceList li > button:focus {
    box-shadow: inset 0 0 0 1px hsl(194, 100%, 19%);
    outline: none;
}

section.deviceList li > div h3 .badge {
    font-size: 13px;
}

section.deviceList .imageContainer {
    height: 60px;
    width: 60px;
    max-height: 60px;
    max-width: 60px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
}

section.deviceList .imageContainer img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    align-self: center;
}

.badge {
    border-radius: 4px;
    padding: 0 3px;
    border: 1px solid #a33;
    color: #a33;
}

/* DEVICE SETTINGS */

section.deviceSettings {
    overflow-y: auto;
    box-sizing: border-box;
    flex-grow: 1;
    max-width: 500px;
}

section.deviceSettings h2 {
    margin-top: 0;
}

section.deviceSettings ol, section.deviceSettings ul {
    margin: 0;
    padding: 0;
}

section.deviceSettings > header {
    display: flex;
    align-items: center;
    padding: 8px;
}

section.deviceSettings > header button {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    background: transparent;
    color: #191919;
    text-align: left;
    padding: 0 0 0 8px;
    margin: 0 0 0 -8px;
}

section.deviceSettings > header button svg {
    width: 24px;
    height: 24px;
}

section.deviceSettings > header h4 {
    color: #191919; 
    margin: 0;
    padding: 0;
    font-weight: 600;
}

.firmware .imageContainer {
    height: 100px;
}

.firmware .deviceImage {
    max-height: 100px;
    display: block;
}

.firmware label {
    display: inline;
    text-transform: uppercase;
}

.firmware .alert {
    color: #a44;
    width: 24px;
    height: 24px;
}

.firmware p {
    display: flex;
    align-items: center;
}

.hardwareInfo {
    display: flex;
    padding: 0 0 12px 0;
}

.hardwareInfo > img {
    flex: 0 1 auto;
    max-width: 100px;
    max-height: 100px;
}

.hardwareInfo > div {
    flex: 3 1 auto;
    padding-left: 16px;
}

.hardwareInfo > div > p:first-child {
    margin-top: 0;
}

.hardwareInfo label {
    display: inline;
}

.hardwareInfo .detail {
    font-size: 13px;
    padding: 0;
    margin: 4px 0 0 0;
}

.hardwareInfo .title {
    font-size: 16px;
    margin: 0;
    padding: 0;
}

.settingsItem {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 1px solid #ccc;
    flex-grow: 1;
}

li:last-child > .settingsItem {
    border-bottom: 1px solid #ccc;
}

.settingsItem:last-child {
    border-bottom: 1px solid #ccc;
}

.settingsItem .title {
    font-size: 16px;
    margin: 0;
    padding: 0;
}

.settingsItem .detail {
    font-size: 13px;
    margin: 0;
    padding: 0;
}

.settingsItem .content {
    display: flex;
    align-items: center;
    cursor: default;
    padding: 12px;
}

.modalContent .settingsItem {
    min-height: 50px;
}

.settingsItem .content .info {
    flex: 10 1 auto;
}

.settingsItem .content .info .detail {
    margin-top: 6px;
}

.settingsItem .content .menu {
    flex: 0 1 auto;
    text-align: right;
    margin-left: 10px;
    color: #000;
}

.settingsItem .content .menu svg {
    height: 24px;
    width:  24px;
}

.settingsItem .content button {
    margin: 0;
}

.settingsItem .content > p {
    margin: 0;
}

.settingsItem.sliderListItem .content {
    flex-direction: column;
}

.settingsItem.sliderListItem .content .info {
    flex: 10 1 auto;
    display: flex;
    width: 100%;
}

.settingsItem.sliderListItem .content .info .title {
    flex: auto;
}

.settingsItem.sliderListItem .content .info .detail {
    flex: auto;
    text-align: right;
}

.settingsItem.sliderListItem .content .control {
    width: 100%;
    position: relative;
    height: 50px;
}

.settingsItem.disabled {
    color: #ddd;
}

.settingsItem.textbox .content {
    display: block;
}

.settingsItem.textbox .content label {
    display: block;
    font-size: 13px;
}

/* Default color of slider controls */
.slider canvas {
    color: #009cde;
}
.slider.disabled canvas {
    color: #f0f0f0;
}

.sliderListItem .slider {
    margin-top: 12px;
    margin-bottom: 6px;
}

/* Default color of switch controls */
canvas.switch {
    color: rgb(46, 76, 94);
}

.inviteMessage {
    width: 100%;
    box-sizing: border-box;
}

.absoluteSpinner {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -18px 0 0 -18px;
}


/* DESKTOP EVENT LIST */

section.events {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-top: 8px;
}

section.events .eventList {
    height: 100%;
    margin: 0 -6px;
}

/* AUTH */

div.auth {
    margin: 1vw;
    text-align: center;
}

div.auth form {
    margin: auto;
    max-width: 300px;
    text-align: center;
}

div.auth form .fieldContainer {
    display: block;
    margin: 8px 0;
    text-align: start;
}

div.auth form .fieldContainer label {
    margin-bottom: 2px;
    display: block;
    text-align: start;
}

div.auth .linkContainer {
    display: grid;
}

.linkContainer a {
    display: block;
    margin: 4px auto;
    padding: 4px;
}

/* CONFIRM */

.confirm {
    padding: 12px;
}

.confirm > h2, .confirm h1 {
    margin: 0 0 12px 0;
}

.confirm p {
    overflow-wrap: break-word;
}

.confirm .buttons {
    display: flex;
}

.confirm .buttons button {
    flex: 1 1 auto;
    margin: 0 4px 0 4px;
    overflow-wrap: anywhere;
}

.confirm .buttons button:first-child {
    margin-left: 0;
}

.confirm .buttons button:last-child {
    margin-right: 0;
}

/* BUTTON ROW */

.deviceSettings .buttonRow {
    display: flex;
}

.deviceSettings .buttonRow button,
.deviceSettings .buttonRow button.selected {
    flex: 1, 1, auto;
    padding: 12px 1px 12px 1px;
    background: #fff;
    border: 1px solid #fff;
    color: #ddd;
}

.deviceSettings .buttonRow.enabled button {
    background: #eee;
    border: 1px solid #eee;
    color: #888;
}

.deviceSettings .buttonRow.enabled button.selected {
    background: rgb(0, 74, 97);
    border: 1px solid rgb(0, 74, 97);
    color: #fff;
}

/* TIME PICKER */

.timePicker button {
    padding: 0;
    margin: 0;
    min-width: 36px;
    min-height: 36px;
    color: rgb(0, 74, 97);
    background-color: transparent;
    font-size: 32px;
}

.timePicker .up button * {
    vertical-align: bottom;
}

.timePicker .down button * {
    vertical-align: top;
}

.timePicker .time {
    font-size: 40px;
    font-family: monospace;
}

.timePicker td {
    padding: 0 6px;
    text-align: center;
}

/* DESKTOP EVENT VIEWER */

section.livePlayer {
    flex: 1 1 auto;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

section.livePlayer video {
    max-height: 100%;
    max-width: 100%;
    box-sizing: border-box;
    object-fit: cover;
}

section.livePlayer .controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
}

/* BADGE LIST */

.badgeList .badgeListItem {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px 4px 10px;
    border-radius: 16px;
    border: 1px solid #000;
    margin: 0 8px 0 0;
    background-color: #fff;
    color: #000;
    min-height: 32px;
}

.badgeList .badgeListItem.disabled {
    background: #eee;
    color: #bbb;
    border: none;
}

.badgeList.compact .badgeListItem {
    padding: 2px 8px 2px 8px;
    min-height: 26px;
    border-radius: 13px;
    font-size: 14px;
    margin: 0 5px 0 0;
}

.badgeList .badgeListItem.selected {
    background-color: rgb(0, 74, 97);
    border: 1px solid rgb(0, 74, 97);
}

.badgeList .badgeListItem:last-child {
    margin-right: 0;
}

.badgeList .badgeListItem .indicator {
    height: 18px;
    width: 18px;
    border-radius: 9px;
    border: 2px solid rgb(0, 74, 97);
    background-color: #fff;
    box-sizing: border-box;
    margin-left: 8px;
    align-self: center;
    color: transparent;
    font-size: 11px;
    padding-top: 1px; /* this moves the icon down slightly */
}

.badgeList.compact .badgeListItem .indicator {
    height: 14px;
    width: 14px;
    border-radius: 7px;
    margin-left: 6px;
    font-size: 10px;
    padding-top: 1px; /* this moves the icon down slightly */
}

.badgeList .badgeListItem.selected {
    color: white;
}

.badgeList.compact .badgeListItem.selected {
    color: white;
}

.badgeList .badgeListItem.selected .indicator {
    background-color: rgb(0, 74, 97);
    color: #fff;
}

.badgeList .exit {
    margin-left: 10px;
    height: 18px;
    width: 18px;
}

.badgeList.compact .exit {
    margin-left: 8px;
    height: 15px;
    width: 15px;
}

.badgeList .badgeListItem .badgeListItemIcon {
    margin-right: 6px;
    width: 20px;
    height: 20px;
    color: #000;
}

.badgeList.compact .badgeListItem .badgeListItemIcon {
    margin-right: 6px;
    width: 18px;
    height: 18px;
}

.badgeList .badgeListItem img {
    width: 32px;
    height: 32px;
    margin-right: 8px;
}

.badgeList.compact .badgeListItem img {
    width: 20px;
    height: 20px;
    margin-right: 6px;
}

.badgeList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: -16px 0 0 0;
}

.badgeList button.badgeListItem {
    margin: 16px 8px 0 0;
}

.badgeList.compact button.badgeListItem {
    margin: 8px 6px 0 0;
}

.badgeList.compact {
    margin: -8px 0 0 0;
    padding: 8px 12px;
    line-height: 40px;
    display: flex;
    align-items: center;
    flex-flow: wrap;
    min-height: 34px;
}

.badgeList label {
    margin-inline-end: 8px;
    margin-top: 16px;
    line-height: 1;
    color: rgb(0, 59, 92);
    font-weight: 400;
    font-size: 16px;
}

.badgeList.compact label {
    margin-top: 8px;
    font-weight: 300;
    font-size: 14px;
}

.badgeList.compact label.moreFilterItems {
    color: #009cde;
}

/* MOBILE HEADER */

section.embedded > header {
    display: flex;
    height: 45px;
    padding: 0 12px;
    background: rgb(46, 76, 94);
    letter-spacing: 2px;
    color: #fff;
    position: relative;
    min-height: 45px;
}

section.embedded > header > main {
    flex-grow: 3;
}

section.embedded > header h1 {
    flex: auto 3;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 45px;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    background: transparent;
    padding: 0 12px;
    margin: 0;
    text-transform: uppercase;
}

section.embedded > header h1.noCaps {
    text-transform: none;
}

section.embedded > header > header {
    flex: auto;
    text-align: start;
    min-width: 50px;
}

section.embedded > header > footer {
    flex: auto;
    text-align: end;
    min-width: 50px;
}

section.embedded > header button {
    flex: auto;
    text-align: start;
    margin: 0;
    height: 100%;
    padding: 0 12px 0 0;
    color: #fff;
    background-color: transparent;
    outline-style: none;
    min-width: 45px;
    box-sizing: content-box;
}

section.embedded > header button svg {
    height: 30px;
}

section.embedded > header > footer button {
    text-align: end;
    padding: 0 0 0 12px;
}

/* MOBILE EVENTS */

section.embedded {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

section.embedded main {
    overflow: auto;
}

section.embedded div.filters {
    padding: 8px 12px;
    line-height: 40px;
    display: flex;
    align-items: center;
    flex-flow: wrap;
}

section.embedded div.filters label {
    margin-inline-end: 8px;
}

section.modalContent section.embedded {
    position: relative;
}

section.embedded > header > header {
    flex: auto;
    text-align: start;
    min-width: 50px;
    max-width: 120px;
}

section.embedded > header > footer {
    flex: auto;
    text-align: end;
    min-width: 50px;
    max-width: 120px;
}

section.embedded > header > footer button {
    text-align: end;
}

section.embedded .eventNavWrapper {
    z-index: 1;
    background: #fff;
    overflow: hidden;
    display: block;
    flex: 1 1 auto;
    position: relative;
}

section.embedded .commands .settingsItem {
    max-height: 60px;
}

.settingsItem .faceIcon,
.settingsItem .deviceIcon {
    width: 40px;
    height: 40px;
    margin-right: 12px;
}

.settingsItem .smartDetectionIcon {
    margin-right: 12px;
    font-size: 30px;
}

.settingsItem.sectionTitle {
    background-color: #000;
    color: #fff;
    border-top: 1px solid #000;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.settingsItem .menuItemButton {
    margin: 0;
    padding: 4px;
    flex: none;
    min-width: 75px;
    border: 1px solid #fff;
    background-color: transparent;
    color: #fff;
}

/* DESKTOP EVENTS */

section.player {
    margin-left: 20px;
    flex: 1 1 auto;
    position: relative;
}

section.content .playerContainer {
    position: relative;
    text-align: left;
    flex: 1 1 auto;
}

section.content .playerContainer video {
    object-fit: cover;
}

/* MOBILE VIEW */

section.embedded .player {
    background: #000;
    position: relative;
}

section.embedded .playerContainer {
    height: 100%;
    margin: 0 auto;
    position: relative;
}

section.embedded .playerContainer video {
    border: none;
    width: 100%;
    height: 100%;
    text-align: center;
    display: block;
    object-fit: cover;
}

.snapshotContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: initial;
    overflow: hidden;
}

.snapshotButton {
    position: absolute;
    z-index: 10000;
    margin: 0;
    text-align: center;
    background: rgba(0,0,0,0.2);
    color: rgba(255,255,255,0.7);
    padding: 0;
    line-height: 1;
    padding: 4px;
}

.snapshotContainer img {
    position: absolute;
    width: 100%;
    height: 100%;
}

section.embedded .dateTime,
section.embedded .faces,
section.embedded .icons,
section.embedded .commands {
    max-width: 768px;
    width: 100%;
    margin: 0 auto;
    padding: 16px;
    text-transform: uppercase;
    box-sizing: border-box;
}

section.embedded .commands {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
}

section.embedded .dateTime {
    display: flex;
    flex-grow: 1;
    max-height: 40px;
    align-items: center;
}

section.embedded .dateTime > div {
    flex: auto;
    font-size: 15px;
    font-weight: 300;
    line-height: 30px;
    vertical-align: middle;
}

section.embedded .dateTime .start {
    text-align: start;
}

section.embedded .dateTime .start > span {
    padding-inline-start: 4px;
}

section.embedded .dateTime .end {
    text-align: end;
}

section.embedded .dateTime .center {
    text-align: center;
}

section.embedded .dateTime .start > *,
section.embedded .dateTime .center > *,
section.embedded .dateTime .end > * {
    vertical-align: middle;
    line-height: 30px;
}

section.embedded .dateTime .start img {
    height: 28px;
    width: 28px;
}

section.embedded .faces > section {
    display: flex;
    margin: 0 -6px;
}

section.embedded .faces > section > div {
    flex: auto;
    margin: 6px;
    padding: 0;
    border: 1px solid #000;
    max-width: 50%;
}

section.embedded .faces > section > div img {
    display: block;
    margin: auto;
    padding: 4px;
}

section.embedded .faces > section > div p {
    display: block;
    margin: auto;
    text-align: center;
    font-size: 14px;
    padding: 0 4px 4px 4px;
    text-transform: none;
}

section.embedded .faces > h3 {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
}

section.embedded .faces > p {
    font-size: 12px;
    font-weight: 300;
    margin: 0 0 10px 0;
    text-transform: none;
}

section.embedded .icons > svg {
    padding-right: 6px;
    height: 26px;
    vertical-align: middle;
}

section.embedded .icons {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    flex-grow: 1;
    max-height: 40px;
    color: #000;
}

section.embedded .commands .command {
    min-width: 40px;
    font-size: 20px;
}

section.embedded .commands .command svg {
    width: 26px;
}

.command img {
    height: 28px;
    width: 28px;
}

.settingsItem .content .noCaps {
    text-transform: none;
}

/* MOBILE INFO */

section.embedded.info main {
    margin: 0 20px;
}

section.embedded.info main h2 {
    margin: 20px 0 0 0;
}

/* FACES */

section.embedded.faces > main {
    margin: 16px;
    max-width: 500px;
    align-self: center;
}

/* VEHICLES */

section.vehicles {
    margin: 1vw;
}

section.vehicles .form {
    max-width: 600px;
}

/* SMALL SCREENS */
@media only screen and (max-width: 500px) {
    section.vehicles {
        margin: 12px;
    }
}

section.vehicles .form div.settingsItem {
    border: none;
}

section.vehicles .form div.settingsItem .content {
    padding: 8px 0;
}

section.vehicles .form p {
    font-size: 14px;
}

section.vehicles .form img {
    width: 320px;
    height: 180px;
}

section.vehicles .form .buttonList {
    display: block;
}

section.vehicles .form .buttonList button {
    display: block;
    margin: 8px 0;
    width: 100%;
}

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

ul.vehicleList li {
    margin: 0;
    list-style: none;
    border: 2px solid #888;
    padding: 16px;
    margin: 20px 0;
    border-radius: 12px;
}

ul.vehicleList li p {
    font-size: 14px;
    margin: 10px 0;
}

ul.vehicleList li button {
    margin: -6px 0 0 -6px;
    padding: 6px;
    font-size: 20px;
    font-weight: 700;
    background-color: transparent;
    color: #000;
    border: 2px solid transparent;
    border-radius: 4px;
}

ul.vehicleList li button h2 {
    margin: 0;
}

ul.vehicleList li button h2 svg {
    height: 24px;
    vertical-align: bottom;
}

ul.vehicleList li button.enabled:hover,
ul.vehicleList li button.enabled:active {
    color: #009cde;
    border: 2px solid #009cde;
}

ul.imageList {
    margin: 0 -10px -10px -10px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    border-radius: 0;
    padding: 0px;
}

ul.imageList li {
    margin: 8px;
    padding: 0;
    border: none;
    border-radius: 0;
}

ul.imageList li img {
    border: none;
    max-width: 320px;
    max-height: 180px;
    width: 40vw;
    height: 22vw;
    border: 2px solid transparent;
    background: transparent;
}

ul.imageList li img:hover {
    border: 2px solid #009cde;
    background: #009cde;
}

/* COLOR PICKER */

.colorPicker {
    padding: 12px;
}

.colorPicker table {
    width: 100%;
    height: 400px;
    border-spacing: 0;
    margin: -3px;
}

.colorPicker table td {
    border: 3px solid white;
    font-size: 12px;
    overflow: hidden;
    border-radius: 7px;
    width: 1%;
    text-align: center;
}

.colorPicker table td.selected {
    border: 3px solid #009cde;
}

.colorPicker table td:hover,
.colorPicker table td:active
{
    border: 3px solid #009cde;
}

/* MOBILE FILTERS */

section.filters nav,
section.info nav,
section.faces nav,
section.dateNav nav {
    padding: 12px 16px;
    display: flex;
    align-items: center;
}

section.filters .filterWrapper {
    margin: 0 16px;
}

section.filters nav button,
section.info nav button,
section.faces nav button,
section.dateNav nav button {
    margin: 0;
    color: rgb(25, 25, 25);
    background: transparent;
    border-color: transparent;
    padding: 12px 16px;
    margin-right: -16px;
    font-size: 14px;
}

section.filters h2,
section.info h2,
section.faces h2 {
    flex: 1 1 auto;
    margin: 0;
    color: rgb(0, 59, 92);
}

section.filters h3,
section.info h3,
section.faces h3,
section.dateNav h3 {
    flex: 1 1 auto;
    margin: 24px 0 12px 0;
    color: rgb(25, 25, 25);
    font-size: 18px;
    font-weight: 400;
}

.dateNav div.settingsItem {
    margin: 0 8px;
}

section.filters .badgeList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: -12px 0 0 0;
}

section.filters .badgeList button.badgeListItem {
    margin: 12px 8px 0 0;
}

section.filters .filterGroup footer {
    margin: 12px 0;
    font-size: 13px;
}

/* MOBILE FACES */

section.faces > div {
    padding: 16px;
    max-width: 600px;
}

section.faces input[type="checkbox"] {
    display: inline;
    width: 16px;
    height: 16px;
}

section.faces img {
    max-height: 100px;
}

section.faces h3 {
    margin-top: 0;
}

section.faces ul {
    margin: 0;
    padding: 0;
}

section.faces li {
    margin: 12px 0 0 0;
    list-style: none;
    display: flex;
    align-items: center;
}

section.faces li img {
    margin: 0 12px 0 0;
    height: 36px;
}

section.faces li span {
    flex: 1 1 auto;
}

/* VEHICLE FEEDBACK */

.vehicleFeedback {
    display: flex;
    margin-bottom: 14px;
}

.vehicleFeedback > div {
    min-width: 10%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.vehicleFeedback > div.left {
    padding-right: 4px;
    text-align: left;
}

.vehicleFeedback > div.center {
    padding-right: 4px;
    padding-left: 4px;
    text-align: center;
}

.vehicleFeedback > div.right {
    padding-left: 4px;
    text-align: right;
}

.vehicleFeedback button {
    margin: 4px 0;
    color: rgb(0, 74, 97);
    background-color: #fff;
    border: 2px solid rgb(0, 74, 97);
    padding: 8px;
}

.vehicleFeedback button.selected {
    margin: 4px 0;
    color: #fff;
    background-color: rgb(0, 74, 97);
}

section.vehicles .form img.vehicleFeedbackImage {
    width: 100%;
    height: 100%;
}

button.corrections {
    width: 100%;
}

.vehicles .form nav {
    display: flex;
    align-items: center;
}

.vehicles .form nav h2 {
    flex: 1 1 auto;
    text-align: left;
    margin-top: 0;
}

.vehicles .form nav button {
    width: 40px;
    margin-right: -12px;
    text-align: right;
    color: #000;
    background: transparent;
    border: none;
    margin-top: 0;
    font-size: 24px;
}

.sticky {
    position: sticky;
    background: white;
    bottom: 0;
    padding: 24px 0;
    box-sizing: border-box;
}

/************/
/* OVERLAYS */

.modalOverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1000000;
    background: rgba(0, 0, 0, 0.2);
}
    
.modalContainer {
    position: absolute;
    top: 20px;
    bottom: 20px;
    right: 20px;
    left: 20px;
    z-index: 1000001;
    display: flex;
    justify-content: center;
    align-items: center;
}
    
.modalContent {
    background: rgb(255, 255, 255);
    border-radius: 15px;
    box-shadow: 0 20px 60px -2px rgb(27 33 58 / 40%);
    width: 400px;
    overflow: auto;
    max-height: 100%;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
}

.modalContent::-webkit-scrollbar {
    width: 0;
}

.modalContent section.embedded > header {
    height: unset;
    background-color: transparent;
    color: #000;
    align-items: flex-start;
    display: flex;
    align-items: flex-start;
    padding: 16px 22px;
    border-bottom: 1px solid #efefef;
}

.modalContent section.embedded > header img {
    max-height: 100px;
    max-width: 100%;
    margin-top: 6px;
}

.modalContent section.embedded > header button {
    color: #000;
    padding: 0;
    min-width: 36px;
    min-height: 36px;
    background: transparent;
    font-size: 24px;
}

.modalContent section.embedded > header > header {
    overflow: hidden;
    max-width: unset;
    min-width: 32px;
}

.modalContent section.embedded > header > footer {
    /* overflow: hidden; */
    max-width: unset;
    min-width: unset;

}

.modalContent section.embedded > header > header h3 {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 2px 0;
    font-weight: 500;
}

.modalContent section.embedded > header > headers div {
    font-size: 11px;
    line-height: 1.5;
    font-weight: 300;
}

.modalContent section.embedded .commands {
    margin-top: 10;
    padding: 0 22px 16px 22px;
}

.modalContent section.embedded .commands .settingsItem {
    border-top: none;
    border-bottom: 1px solid #efefef;
}


button.expanderButton {
    width: 20px;
    padding: 0;
    margin: 0;
}

section.fdfr {
    margin: 1vh 2vw;
}

.validationError {
    color:#a33;
}

button.playerButton {
    border-radius: 5px;
    background-color: hsla(0, 0%, 0%, .2);
    color: hsla(0, 0%, 100%, 1);
    line-height: 1;
}

section.guest {
    margin: 1vw;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

section.guest section.livePlayer {
    margin: 0;
}

/**/

.filtersContainer {
    position: relative;
}

/**/

section.modalContent section.modal {
    margin: 16px 20px;
}

section.modalContent section.modal > header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 6px;
}

section.modalContent section.modal > header button {
    background-color: transparent;
    color: rgb(0, 74, 97);
    padding: 0;
    min-width: 32px;
    min-height: 32px;
    margin: 0;
    font-size: 30px;
}

section.modalContent section.modal > header > header {
    margin: 0;
    font-weight: 500;
    font-size: 20px;
    color: rgb(41, 41, 41);
}

section.modalContent section.modal > header > footer {
    flex: 1 1 auto;
    text-align: right;
}

section.modalContent section.modal > main {
    margin: 12px 0;
}

section.modalContent section.modal > footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 4px 0 0 0;
    border-top: 1px solid #ddd;
}

section.modalContent section.modal > footer button {
    margin: 12px 0 0 8px;
}

.modalContent.large {
    width: 800px;
}

.filterWrapper h3 {
    margin: 16px 0 4px 0;
}

.playerColumn {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

@keyframes swipeRightKey {
    from {
        left: 0;
        width: 100%;
        opacity: 1;
    }
    to {
        left: 100%;
        width: 0;
        opacity: 0;
    }
}

.swipeRight {
    animation-duration: .3s;
    animation-name: swipeRightKey;
    animation-fill-mode: forwards;
    transition-timing-function: ease-in;
}

@keyframes swipeLeftKey {
    from {
        right: 0;
        width: 100%;
        opacity: 1;
    }
    to {
        right: 100%;
        width: 0;
        opacity: 0;
    }
}

.swipeLeft {
    animation-duration: .3s;
    animation-name: swipeLeftKey;
    animation-fill-mode: forwards;
    transition-timing-function: ease-in;
}

.playerColumn .dateTime,
.playerColumn .faces,
.playerColumn .icons,
.playerColumn .commands {
    width: 100%;
    padding: 0 0 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.playerColumn .dateTime img {
    height: 28px;
    width: 28px;
}

.playerColumn .dateTime .space {
    width: 10px;
}

.playerColumn .icons svg {
    width: 26px;
    margin: 0 6px 0 0;
}

.videoProgressBar {
    color: hsl(194, 0%, 90%); /* unloaded time range */
    accent-color: hsl(194, 100%, 30%); /* loaded time range */
    caret-color: hsl(194, 100%, 60%); /* cursor */
    position: absolute;
    margin-top: 3px;
}

.playerContainer .controls {
    position: absolute;
    background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    padding: 6px 6px 4px 6px;
    box-sizing: border-box;
}

.playerContainer .controls .buttons {
    display: flex;
}

.playerContainer .controls .buttons .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: auto;
}

.playerContainer .controls .buttons .left button {
    margin-right: 6px;
}

.playerContainer .controls .buttons .left .time {
    color: white;
    font-size: 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: hsla(0, 0%, 100%, .8);
}

.playerContainer .controls .buttons .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: auto;
}

.playerContainer .controls .buttons .right button {
    margin-left: 6px;
}

.playerContainer .controls .buttons button {
    margin: 0;
    padding: 0;
    height: 100%;
    border-radius: 0;
    background-color: transparent;
    color: hsla(0, 0%, 100%, .8);
}

@keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
.playerControlsFadeIn {
    animation: fade-in 0.3s ease both;
}

@keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
.playerControlsFadeOut {
    animation: fade-out 0.3s ease both;
}

.eolInfo {
    color: #a00;
}

.eventInfo {
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    height: 10px;
    overflow-y: scroll;
}

.eventInfo > div {
    margin-top: 20px;
}

.eventInfo > div:first-child, .eventInfo h2 {
    margin-top: 0;
}

section.services div.services a {
    color: blue;
    text-decoration: underline;
}

div.treeView {
    margin: 5px 0;
}

div.treeView .title {
    display: flex;
    align-items: center;    
}

div.treeView .title button {
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0 5px 0 0;
    color: #000;
    border: none;
    background: none;
}

div.treeView .title button:hover {
    background: #ddd;
}

div.treeView .title button.hidden {
    color: transparent;
    background: transparent;
    border-color: transparent;
}

div.treeView .title button.hidden {
    background: transparent;
}

div.treeView .child {
    margin: 0 0 0 25px;
}