/*

Custom CSS

*/


/* 300->400 */
.x-root {
    font: 400 14px/1.25 '-apple-system', 'Helvetica Neue', helvetica, arial, sans-serif;
}

:root {
    --main-dark: #333333;
    --main-yellow: #ff9900;
    --light-gray: #c6c6c6;
    --middle-gray: #6a6a6a;
    --dark-gray: #4a4a4a;

	/* --base-color: #35baf6; moving to ios theme blue */
	--base-color: #007aff;
    --base-gray: #ADB3B8;

	--panel-navigation-background-color: #32404e;
	--panel-navigation-item-line-height: 54px;
	--panel-navigation-item-text-color: #ADB3B8;

	--main-nav-width: 220px;
	--main-nav-width-negative: -220px;
	--main-nav-collapsed-width: 64px;
    --main-toolbar-height: 50px;
	--main-phone-toolbar-height: 50px;

    --bottom-toolbar-height: 40px;

    --tags-filter-width: 250px;
    --tags-filter-negative-width: -250px;
}


.auth-login {
    background-size: cover;
    /* from pixabay */
    background-image: url(images/videowall.jpg);
    background-position: center
}
.auth-login .auth-header {
    color: var(--main-yellow);
    text-align: center;
    padding: 16px;
}
.auth-login .auth-header a {
    color: white;
    text-decoration: none
}
.auth-login .auth-header .title,.auth-login .auth-header .caption {
    white-space: nowrap
}
.auth-login .auth-header .title {
    font-size: 31px;
    font-weight: bold
}
.auth-login .auth-header .caption {
    font-size: 15px;
    text-transform: uppercase
}
.x-panel-auth {
    background-color: transparent
}
.x-panel-auth-body-el {
    padding: 24px;
    background-color: black;
    color: white
}


.main-nav-container {
    width: var(--main-nav-width);
    transition: width 0.3s;
}
.main-nav-collapsed {
    width: var(--main-nav-collapsed-width);
}
.main-nav-floated {
    transition: left 0.3s;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 10;
}
.main-nav-slid-out {
    left: var(--main-nav-width-negative);
}


.main-logo-container {
    /* background-color: var(--base-color); */
    background-color: var(--panel-navigation-background-color);
    height: var(--main-toolbar-height);
}
.phone .main-logo-container, .phone .main-toolbar {
    height: var(--main-phone-toolbar-height);
}
.main-logo {
    width: var(--main-nav-collapsed-width);
    content: " ";
    background-image: url(images/logo.png);
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
}
.phone .main-logo {
    background-size: 50%;
}


.main-appname {
    line-height: var(--main-toolbar-height);

    font-size: 16px;
    color: #fff;

    overflow: hidden;
    white-space: nowrap;
}
.phone .main-appname {
    line-height: var(--main-phone-toolbar-height);
}


.username-version {
    background-color: var(--panel-navigation-background-color);
    padding: 5px 0 5px 5px;
    color: var(--panel-navigation-item-text-color);
    font-size: 70%;
    padding-right: 10px;
}


.version-label {
    text-align: right;
}


.main-toolbar {
    background-color: var(--main-dark);
    color: var(--main-yellow);
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.4);
    z-index: 2;
    height: var(--main-toolbar-height);
    border: none;
    padding: 0 10px 0 0;
}
.main-toolbar > .x-body-el {
    padding: 0;
}


.main-nav-mask > .x-mask-inner {
    display: none;
}


.x-treelist-nav {
    background-color: var(--panel-navigation-background-color);
    background-position: 44px 0%;
    padding: 0 0 0 0
}

.x-treelist-nav .x-treelist-toolstrip {
    background-color: var(--panel-navigation-background-color)
}

.x-treelist-nav .x-treelist-item-selected.x-treelist-item-tool {
    color: var(--panel-navigation-item-text-color);
    background-color: #475360;
}

.x-treelist-nav .x-treelist-item-selected.x-treelist-item-tool:after {
    height: var(--panel-navigation-item-line-height);
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    width: 5px;
    background-color: var(--base-color)
}

.x-treelist-nav .x-treelist-item-selected > .x-treelist-row {
    background-color: #475360
}

.x-treelist-nav .x-treelist-item-tool {
    padding-left: 10px;
    padding-right: 10px
}

.x-treelist-nav .x-treelist-item-tool-floated:after {
    height: var(--panel-navigation-item-line-height);
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    width: 5px;
    background-color: var(--base-color)
}

.x-treelist-nav .x-treelist-item-icon:before,.x-treelist-nav .x-treelist-item-tool:before,.x-treelist-nav .x-treelist-item-expander {
    line-height: var(--panel-navigation-item-line-height)
}

.x-treelist-nav .x-treelist-item-icon,.x-treelist-nav .x-treelist-item-tool,.x-treelist-nav .x-treelist-item-expander {
    text-align: center;
    background-repeat: no-repeat;
    background-position: 0 center
}

.x-treelist-nav .x-treelist-item-loading .x-treelist-item-icon {
    background-image: url(images/tree/loading.gif);
    color: transparent
}

.x-treelist-nav .x-treelist-item-icon,.x-treelist-nav .x-treelist-item-tool {
    color: var(--panel-navigation-item-text-color);
    font-size: 18px;
    width: 44px
}

.x-treelist-nav .x-treelist-item-tool {
    width: var(--panel-navigation-item-line-height)
}

.x-treelist-nav .x-treelist-item-expander {
    color: #fff;
    font-size: 16px;
    width: 24px
}

.x-treelist-nav .x-treelist-item-text {
    color: var(--panel-navigation-item-text-color);
    margin-left: 50px;
    margin-right: 24px;
    font-size: 14px;
    line-height: var(--panel-navigation-item-line-height)
}

.x-treelist-nav .x-treelist-row {
    padding-left: 10px;
    padding-right: 10px
}

.x-treelist-nav .x-treelist-row-over:before,.x-treelist-nav .x-treelist-item-selected > .x-treelist-row:before {
    content: " ";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%
}

.x-treelist-nav .x-treelist-row-over:before {
    background-color: transparent
}

.x-treelist-nav .x-treelist-item-selected > .x-treelist-row-over:before {
    background-color: #57c6f8
}

.x-treelist-nav .x-treelist-item-selected > .x-treelist-row:before {
    background-color: var(--base-color)
}

.x-treelist-nav .x-treelist-item-floated .x-treelist-container {
    width: auto
}

.x-treelist-nav .x-treelist-item-floated > .x-treelist-row {
    background-color: var(--panel-navigation-background-color)
}

.x-treelist-nav .x-treelist-item-floated > .x-treelist-container {
    margin-left: -10px
}

.x-big .x-treelist-nav .x-treelist-item-floated > .x-treelist-container {
    margin-left: -10px
}

.x-treelist-nav .x-treelist-item-floated > * > * > .x-treelist-item-text {
    margin-left: 0
}

.x-treelist-nav .x-treelist-item-floated > * .x-treelist-row {
    cursor: pointer;
    padding-left: 0
}

.x-treelist-nav .x-treelist-item-floated .x-treelist-row:before {
    width: 0
}

.x-treelist-nav .x-treelist-item-floated > .x-treelist-row-over {
    background-color: var(--panel-navigation-background-color)
}

.x-treelist-nav .x-treelist-item-floated > .x-treelist-row-over > * > .x-treelist-item-text {
    color: var(--panel-navigation-item-text-color)
}

.x-treelist-nav .x-treelist-item-expanded {
    background-color: #2c3845
}

.x-treelist-nav .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-icon {
    color: #fff
}

.x-treelist-nav .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-text {
    color: #d6d9dc
}

.x-treelist-nav .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-expander {
    color: #fff
}

.x-treelist-nav .x-treelist-row-over {
    background-color: #3c4a57
}

.x-treelist-nav .x-treelist-row-over > * > .x-treelist-item-icon {
    color: #fff
}

.x-treelist-nav .x-treelist-row-over > * > .x-treelist-item-text {
    color: #d6d9dc
}

.x-treelist-nav .x-treelist-row-over > * > .x-treelist-item-expander {
    color: #fff
}

.x-treelist-nav .x-treelist-expander-first .x-treelist-item-icon {
    left: 24px
}

.x-treelist-nav .x-treelist-expander-first .x-treelist-item-text {
    margin-left: 74px;
    margin-right: 0
}

.x-treelist-nav .x-treelist-expander-first .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
    margin-left: 27px
}

.x-treelist-nav .x-treelist-item-hide-icon > * > * > .x-treelist-item-text {
    margin-left: 3px
}


.vl-viewport .x-button {
    color: var(--main-yellow);
}
.vl-viewport .x-button .x-icon-el {
    color: var(--main-yellow);
}
.vl-viewport .x-button .x-arrow-el {
    color: var(--main-yellow);
}
.vl-viewport .x-field > .x-label-el {
    color: var(--main-yellow);
}
.vl-viewport .x-checkboxfield .x-icon-el {
    color: var(--middle-gray);
}
.vl-viewport .x-checkboxfield.x-checked .x-icon-el {
    color: var(--main-yellow);
}
.vl-viewport .x-checkboxfield .x-box-label-el {
    color: var(--main-yellow);
}
.vl-viewport .x-dataview {
    background-color: var(--main-dark);
}
.vl-viewport .x-gridcolumn > .x-header-el {
    color: var(--main-yellow);
    border-color: var(--main-yellow);
    background-color: var(--main-dark);
}
.vl-viewport .x-headercontainer {
    border-color: var(--main-yellow);
}
.vl-viewport .x-listitem {
    color: var(--main-yellow);
    border-color: var(--main-yellow);
    background-color: var(--main-dark);
}
.vl-viewport .x-listitem.x-selected {
    background-color: var(--dark-gray);
}
.vl-viewport .x-gridcolumn > .x-header-el .x-trigger-el {
    color: var(--main-yellow);
    border-color: var(--main-yellow);
    background-color: var(--main-dark);
}
.vl-viewport .x-textfield .x-input-wrap-el {
    border: 1px solid var(--main-yellow);
    background-color: var(--main-dark);
    color: var(--main-yellow);
}
.vl-viewport .x-trigger .x-icon-el {
    color: var(--middle-gray);
}
.vl-viewport .x-trigger.x-interactive:hover .x-icon-el {
    color: var(--light-gray);
}
.vl-viewport .admin {
    background-color: var(--main-dark);
}

.bottom-toolbar {
    background-color: var(--main-dark);
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.4);
    z-index: 1;
    height: var(--bottom-toolbar-height);
}
.bottom-toolbar .x-button .x-icon-el {
    width: 22px;
    height: 22px;
}
.bottom-toolbar .x-button .x-icon-el:before {
    font-size: 20px;
}


.video-dataview {
    background-color: var(--main-dark);
    padding: 20px 0 0 20px;
}
.video-dataview.thumbnail-small {
    padding: 15px 0 0 15px;
}
/* items in row according to viewport width */
@media (max-width: 380px) {
    /* iphone vert */
    .video-dataview .x-dataview-item {
        width: 100%;
    }
    .video-dataview.thumbnail-small .x-dataview-item {
        width: 50%;
    }
}
@media (min-width: 381px) and (max-width: 770px) {
    /* iphone horz and ipad vert */
    .video-dataview .x-dataview-item {
        width: 50%;
    }
    .video-dataview.thumbnail-small .x-dataview-item {
        width: 25%;
    }
}
@media (min-width: 771px) and (max-width: 1024px) {
    /* ipad horz and narrow desktop */
    .video-dataview .x-dataview-item {
        width: 33.33%;
    }
    .video-dataview.thumbnail-small .x-dataview-item {
        width: 16.66%;
    }
}
@media (min-width: 1025px) {
    /* wide desktop */
    .video-dataview .x-dataview-item {
        width: 25%;
    }
    .video-dataview.thumbnail-small .x-dataview-item {
        width: 12.5%;
    }
}
.video-dataview .videoitem {
    display: flex;
    flex-direction: column;
    margin: 0 20px 20px 0;
    border-radius: 3px;
    box-shadow: 0px 8px 10px -6px black;
}
.video-dataview .x-dataview-item.vl-transcoding {
    pointer-events: none;
}
.video-dataview .videoitem .vl-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background-color: rgba(255, 255, 255, .2);
    display: none;
}
.video-dataview .x-dataview-item.vl-transcoding .videoitem .vl-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-yellow);
    font-size: 40px;
}
.video-dataview.thumbnail-small .videoitem {
    margin: 0 15px 15px 0;
}
.video-dataview.thumbnail-small .videoitem .vl-overlay {
    width: calc(100% - 15px);
    height: calc(100% - 15px);
    font-size: 25px;
}

/* to have thumbs at 16:9 aspect ratio https://www.w3schools.com/howto/howto_css_aspect_ratio.asp */
.video-dataview .thumb-video-outer {
    padding-top: 56.25%;
    height: 0;
    overflow: hidden;
    position: relative;
}
.video-dataview .thumb-video-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-dataview .thumb-video-wrapper {
    width: 100%;
    height: 100%;
}
.video-dataview .thumb {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.video-dataview .textbox {
    margin: 0px 3px 3px 3px;
    overflow: hidden;
}
.video-dataview .text {
    margin-top: 5px;
    overflow: hidden;
    height: 17px;
}
.video-dataview.thumbnail-small .text {
    font-size: 10px;
    height: 12px;
}
.video-dataview .filename {
    color: var(--light-gray);
    text-align: center;
}
.video-dataview .x-selected .filename {
    color: var(--main-yellow);
}
.video-dataview .info {
    color: var(--middle-gray);
    text-align: center;
}
.video-dataview .x-selected .info {
    color: var(--light-gray);
}
.video-dataview .info-content {
    color: var(--light-gray);
    text-align: center;
}
.video-dataview .x-selected .info-content {
    color: var(--main-yellow);
}


.x-progress.vl-progress {
    background-color: var(--middle-gray);
}
.x-progress.vl-progress .x-progress-bar {
    background-color: var(--main-yellow);
    white-space: nowrap;
}
.x-progress.vl-progress .x-progress-text-back {
    color: var(--main-dark);
    white-space: nowrap;
}


.vl-play-staging-video .vl-video-player {
    margin: 10px;
}

.vl-external-video {
    display: flex;
    flex-direction: row;
    width: 220px;
    margin: 0px 0px 5px 0px;
    border: 1px solid var(--middle-gray);
}
.vl-external-video-text {
    margin: 0px 2px 0px 2px;
    color: var(--middle-gray);
}
.vl-external-video video {
    width: 30px;
    height: 18px;
}

.vl-popup-panel .x-panel-body-el {
    background-color: var(--main-dark);
}
.vl-popup-panel .x-panelheader {
    background-color: var(--main-dark);
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.4);
    z-index: 1;
    height: var(--main-toolbar-height);
}
.vl-popup-panel .x-toolbar {
    background-color: var(--main-dark);
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.vl-popup-panel .x-paneltitle {
    color: var(--main-yellow);
}
.vl-popup-panel .x-paneltool .x-icon-el {
    color: var(--main-yellow);
}


.vl-libraries-menu {
    margin: 0px 0px 0px 10px;
}


.vl-video-player {
    display: flex;
}
.vl-video-player .x-innerhtml {
    flex: 1 1;
}
.vl-video-player .video-js {
    background-color: unset;
}
.vl-video-player .vjs-poster {
    background-color: unset;
}
.vl-video-player .video-js .vjs-current-time {
    display: block;
}


.vl-thumb-img {
    width: 100%;
    background-size: cover;
}
.vl-thumb-img-inner {
    padding-top: 56%;
}
.vl-thumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.vl-thumb-time {
    color: var(--main-yellow);
    font-size: 14px;
    margin: 5px;
}


.vl-show-video .vl-video-player {
    margin: 10px;
    box-shadow: 0px 8px 10px -6px black;
    z-index: 1;
}
.vl-show-video .vl-info {
    margin: 10px;
}
.vl-show-video .vl-info .vl-info-text {
    color: var(--main-yellow);
    text-align: center;
}
.vl-show-video .vl-info .vl-info-text-content {
    color: var(--light-gray);
}
.vl-show-video .vl-info .vl-info-tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.vl-show-video .vl-info .vl-info-tags-title {
    color: var(--main-yellow);
    margin-right: 10px;
}
.vl-show-video .vl-info .vl-info-tag {
    color: var(--light-gray);
    margin-right: 10px;
}
.vl-show-video .vl-thumbs-show {
    background-color: var(--main-dark);
    padding: 10px;
}
.vl-show-video .vl-thumbs-show .x-dataview-item {
    margin: 0px 10px 10px 0px;
    box-shadow: 0px 8px 10px -6px black;
    z-index: 1;
    display: flex; /* for some reasons it removes an extraneous bottom margin */
}


.vl-edit-video .vl-video-player {
    margin: 10px;
    box-shadow: 0px 8px 10px -6px black;
    z-index: 1;
}
.vl-edit-video .vl-thumb-wrapper {
    display: flex;
}
.vl-edit-video .vl-thumb-wrapper .x-innerhtml {
    flex: 1 1;
    display: flex;
}
.vl-edit-video .vl-thumb {
    margin: 3%;
    flex: 1 1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.vl-edit-video .vl-thumb-gallery {
    margin: 0px 10px 10px 10px;
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.4);
    z-index: 1;
    background-color: var(--main-dark);
}
.vl-edit-video .vl-thumb-gallery .x-dataview-body-el {
    display: flex;

    /*flex-wrap: wrap;*/
    flex-wrap: nowrap;
    overflow-x: auto;
}
.vl-edit-video .vl-thumb-gallery .x-dataview-item {
    margin: 1px 0px 1px 1px;
    width: calc(14.2857% - 1px); /* 7 thumbnails per row */
    display: flex; /* for some reasons it removes an extraneous bottom margin */

    flex-shrink: 0; /* for nowrap case */
}
.vl-edit-video .vl-thumb-gallery .x-dataview-item.x-selected {
    outline: var(--main-yellow) solid 1px;
    outline-offset: -1px; /* as the last item when selected would have the right-hand outline hidden */
}

.vl-tags {
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.vl-tags-edit {
    margin: 10px 10px 10px 0px;
}
.vl-tags-filter {
    width: var(--tags-filter-width);
}
.vl-tags-floated {
    transition: left 0.3s;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 10;
}
.vl-tags-slid-out {
    left: var(--tags-filter-negative-width);
}
.vl-tags-filter-mask > .x-mask-inner {
    display: none;
}
.vl-tags-filter .x-headercontainer {
    border-color: var(--main-dark);
    background-color: var(--main-dark);
    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.vl-tags-filter .x-gridcolumn > .x-header-el {
    color: var(--main-yellow);
    border-color: var(--main-dark);
    background-color: var(--main-dark);
}
.x-gridcolumn.x-sorted .x-sort-icon-el {
    color: var(--middle-gray);
}
.vl-tags .x-list .x-list-body-el {
    margin-top: 10px;
}
.vl-tags .x-dataview, .vl-tags .x-listitem {
    background-color: var(--main-dark);
    color: var(--main-yellow);
}
.vl-tags .x-dataview, .vl-tags .x-listitem {
    background-color: var(--main-dark);
    color: var(--main-yellow);
}
.vl-tags .x-listitem.x-selected {
    background-color: var(--dark-gray);
}
.vl-tags .x-listitem.x-selected .x-gridrow .x-cells-el {
    /* seems a bug, this required */
    background-color: var(--dark-gray);
}
.vl-tags .x-treecell-body-el {
    padding: 2px 0px 2px 5px;
}
.vl-tags .x-treecell .x-icon-el {
    display: none;
}
.vl-tags .x-treecell .x-expander-el {
    color: var(--middle-gray);
}
.vl-tags .x-listitem.x-selected .x-treecell .x-expander-el {
    color: var(--light-gray);
}
.vl-tags .x-treecell.x-leaf .x-expander-el + .x-check-el:before {
    /* padding-left: 5px; */
    padding-left: 0px;
}
.vl-tags .x-treecell.x-treecell-checkable.x-treecell-unchecked .x-check-el {
    color: var(--middle-gray);
}
.vl-tags .x-listitem.x-selected .x-treecell.x-treecell-checkable.x-treecell-unchecked .x-check-el {
    color: var(--light-gray);
}
.vl-tags .x-treecell.x-treecell-checkable.x-treecell-checked .x-check-el, .vl-tags .x-treecell.x-treecell-checkable.x-treecell-trimode .x-check-el {
    color: var(--main-yellow);
}
.vl-tags .x-field > .x-label-el {
    color: var(--main-yellow);
}
.vl-tags .x-checkboxfield .x-icon-el {
    color: var(--middle-gray);
}
.vl-tags .x-checkboxfield.x-checked .x-icon-el {
    color: var(--main-yellow);
}
.vl-tags .x-button .x-icon-el {
    color: var(--main-yellow);
}


.vl-selectvideo-list .x-listitem .x-innerhtml {
    flex: auto;
}
.vl-selectvideo-list-container {
    flex: auto;
    display: flex;
}
.vl-selectvideo-list .thumb-wrapper {
    width: 150px;
}
.vl-selectvideo-list .thumb {
    padding-bottom: 56.25%;
    background-repeat: no-repeat;
    background-size: 104%;
    background-position: 50%;
}
.vl-selectvideo-list .filename {
    flex: auto;
    margin: 0px 0px 0px 10px;
    display: flex;
    align-items: center;
}

.vl-transcoding-inactive .x-icon-el {
    color: red !important;
}