@import url('fonts.css');

html,body {
    margin:0;
    background-color:#999;
	font-family: 'Source Sans Pro', sans-serif;
    font-size:18px;
    width:100%;
    height:100%;
    min-width:1024px;
    line-height:1.35;
    letter-spacing:0.5px;
}

.pageseccolor {
    background-color:#f2f2f2;
}

.pagesectable tr:nth-of-type(odd) {
    background-color:#f2f2f2;
}

a {
    text-decoration:none;
}

a:not(.no-link-color) {
    color:#3B5998;
}

a img {
	border:0;
}

/*label {
    color:#444;
    font-weight: bold;
}*/

#wrapper {
	background-color:#fff;
	width:100%;
	min-height:100%;
    position:relative;
    overflow-x:hidden;
    overflow-y:hidden;
}

#header {
	margin:0;
/*	padding:4px 10px 8px 10px;
	height:30px;*/
    background-color:#3F414B;
}

#navbar {
	margin:0;
	padding:7px 9px 4px 9px;
	min-height:20px;
	font-size:15px;
    background: rgb(0,0,0); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(51,51,51,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(34,34,34,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(34,34,34,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(51,51,51,1) 0%,rgba(34,34,34,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    background-color: rgb(0,0,0);
    z-index:9999;
}

#navbar.vertical {
    min-height:100vh;
    position:fixed;
    width:180px;
    top:0;
    height:100%;
}

#navbar.vertical a {
    display:block;
}

#navbar.vertical.collapsed {
    display:none;
}

#navbar-uncollapse {
    background-color:#000;
    color:#fff;
    width:20px;
    padding:12px 10px;
    position:fixed;
    left:0;
    top:0;
    border-radius:0 10px 10px 0;
    font-size:15pt;
    cursor:pointer;
    opacity:0.15;
}

#navbar-uncollapse:hover {
    animation-duration:0.25s;
    animation-name:navbar-uncollapse-fade-in;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

@keyframes navbar-uncollapse-fade-in {
    0% {opacity:0.15}
    100% {opacity:1}
}

#navbar-collapse {
    color:#fff;
    width:20px;
    padding:12px 10px;
    position:fixed;
    left:0;
    top:0;
    border-radius:0 10px 10px 0;
    font-size:15pt;
    cursor:pointer;
    opacity:0;
}

#navbar-collapse:hover {
    animation-duration:0.25s;
    animation-name:navbar-collapse-fade-in;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

@keyframes navbar-collapse-fade-in {
    0% {opacity:0}
    100% {opacity:1}
}

#navbar:not(.vertical) {
    text-align:center;
    min-height:29px;
}

#navbar.vertical #logo-container {
    margin:5px 0;
    width:100%;
    height:100px;
    background-position:center;
}

#logo-container {
    width:200px;
    height:50px;
    max-height:100%;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:5px 0;
}

#navbar:not(.vertical) #logo-container {
    height:36px;
}

#navbar:not(.vertical) #logo-container {
    position:absolute;
    left:2px;
    top:2px;
}

#navbar:not(.vertical) #navwrapper {
    margin-top:4px;
}

#navbar:not(.vertical) #nav_left a {
    padding:11px 15px;
}

#pagewrapper.vertical {
    margin-left:200px;
    width:initial;
}

#page #avatar-container {
    text-align:right;
    max-width:50%;
    margin:0;
    position:absolute;
    top:3px;
    right:3px;
}

#navwrapper {
	margin:0;
}

#navwrapper img {
    vertical-align:top;
}

#nav_left>a,#nav-links>a,#project_dropdown_container a {
	text-decoration:none;
/*    padding:4px 8px 2px 8px;*/
    padding:7px 8px 5px 7px;
/*    margin-left:-2px;*/
    position:relative;
    vertical-align: top;
}

#nav_left>a,#nav-links>a,#project_dropdown_container>a {
	color:#eee;
}

#nav_left>a:hover,#nav-links>a:hover,#project_dropdown_container>a:hover {
    background-color:#888;
/*    border-radius: 2px;
    border-right:none;*/
}

#nav_left>a:active,#nav-links>a:active {
    position: relative;
    top: 1px;
    left: 1px;
}

#nav_left img {
    width:17px;
    height:17px;
    margin-right:2px;
}

#nav-links>a {
    padding-left:5px;
}


#navbar .selected {
    background-color:#6CC062;
    background-color:#71d8658c;
/*    border-radius:2px;
    border-right:none;*/
}

#navbar.vertical #nav-links a {
    margin-left:-9px;
    margin-right:-9px;
    padding-left:12px;
}

#project_dropdown_arrow {
	font-size:10px;
    padding:0 0 0 4px;
    vertical-align:middle;
}

#nav_right {
	float:right;
    position:relative;
    top:8px;
}

#navbar.vertical #nav_right {
    float:none;
    position:initial;
    top:0;
    display:table-cell;
    white-space:nowrap;
    vertical-align:middle;
    text-align:right;
}

#event-icon {
    margin:0;
    width:15px !important;
}

.event-icon img {
    margin:0;
    width:64px;
}

#nav_project {
    margin-bottom:8px;
    font-size:11pt;
    border-bottom:2px solid #292929;
    padding-bottom:5px;
    margin-top:3px;
    display:table;
    overflow:hidden;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

#alert_off_icon {
    width:18px;
    height:18px;
    background:url('../img/alerts_off.png');
    display:none;
    float:left;
    margin-top:5px;
    margin-right:5px;
}

.alert-badge {
	background-color:#62a9ee;
	padding:0 6px;
	color:#fff;
	opacity:0.8;
	border-radius:10px;
	margin-left:3px;
	vertical-align:top;
    font-size:12.5px;
}

#sessionbar  {
    margin:0;
    padding:5px;
    padding-top:7px;
    padding-left:7px;
    min-height:20px;
    font-size:13px;
    color:#fff;
    background: #b2cc7c; /* Old browsers */
    background: -moz-linear-gradient(top,  #b2cc7c 0%, #7e9941 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2cc7c), color-stop(100%,#7e9941)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b2cc7c 0%,#7e9941 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b2cc7c 0%,#7e9941 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b2cc7c 0%,#7e9941 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b2cc7c 0%,#7e9941 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2cc7c', endColorstr='#7e9941',GradientType=0 ); /* IE6-9 */
}

#sessionbar a {
    color:#fff;
    text-decoration:none;
}

#session_dropdown_box {
    position:relative;
    float:right;
    margin-right:60px;
}

#session_dropdown_box:hover {
    border:1px solid #eee;
    border-radius:2px;
    margin:-1px 59px -1px -1px;
}

#session_dropdown {
    padding:5px;
    min-width:100px;
}

#session_dropdown li {
    white-space:nowrap;
    padding:5px;
}

.header-icon {
    vertical-align:text-bottom;
    margin-right:10px;
    width:48px;
    height:48px;
}

#pagewrapper {
	width: 100%;
    max-width:100%;
	min-height:100%;
	background-color:#fff;
    overflow-x:hidden;
}

#page {
    margin:0;
	padding:0 50px 60px 50px;
	background-color:#fff;
    min-height:60%;
 	overflow:hidden;
}

#page, a {
    color:#000;
}

#content {
	margin:25px auto 25px auto;
    min-height:70vh;
    height:100%;
    position:relative;
    max-width:1650px;
}

#footer {
   position:fixed;
   left:0;
   bottom:0;
	width:100%;
    min-height:36px;
	padding:10px 10px 0 10px;
	margin-top:20px;
	text-align:center;
	color:#eee;
	z-index:10000;
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(51,51,51,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(34,34,34,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(34,34,34,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(51,51,51,1) 0%,rgba(34,34,34,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    background-color: rgb(0,0,0); /* Old browsers */
}

#footer #navwrapper {
    position:absolute;
    left:5px;
    bottom:10px;
}

#footer #storage_wrapper {
    position:absolute;
    right:5px;
    bottom:0;
}

#footer a {
	color:#eee;
	text-decoration:none;
}

#footer_info {
    color:#a7a7a7;
}

#user_dropdown_box {
	height:25px;
	margin-right:10px;
	padding:5px;
	font-size:small;
}

#user_dropdown_box span {
	margin:30px 0 0 0;
    vertical-align:middle;
}

#user_dropdown_box img {
    width: 30px;
    height: 30px;
    margin-top: -3px;
}

a #user_dropdown_box {
	color:#555;
	text-decoration:none;
	padding:5px;
	margin:0;
}

#user_dropdown_link {
	text-decoration:none;
}

#user_dropdown {
    min-width:150px;
    position:absolute;
    right:2px;
}

a:hover #user_dropdown_box  {
	border:1px solid #999;
	border-radius:5px;
	margin: -1px;
}

a:active #user_dropdown_box  {
    margin: 1px -1px 0 0 !important;
}

#project_dropdown_container {
    display:inline-block;
    white-space:nowrap;
}

#navbar.vertical #project_dropdown_container {
    display:table-cell;
    white-space:normal;
}

#project_dropdown_container #project_dropdown {
    margin-top:5px;
}

#project_dropdown_container #project_dropdown {
    white-space:nowrap;
}

#project_dropdown_box {
    display:inline-block;
}

a:active #project_dropdown_box  {
    position: relative;
    top: 1px;
    left: 1px;
}

#event_dropdown {
    display:none;
    min-width:200px;
    max-width:320px;
    right:2px;
    margin-top:5px;
}

#event_dropdown a {
    padding:0;
}

#event_dropdown li {
    padding:7px;
}

#event_dropdown .event-icon {
    width:60px;
    min-width:60px;
    padding-right:10px;
    display:table-cell;
    vertical-align:top;
}

#event_dropdown .event-icon img {
    max-width:100%;
    margin:0 auto 0 auto;
    top:3px;
    position:relative;
}

#event_dropdown .event-text {
    display:table-cell;
    font-size:15px;
    word-break: break-word;
}

#event_dropdown .event-date {
    font-size:12px;
    margin-top:5px;
}

h1,h2,h3 {
	color:#333;
    font-family:'Oxygen', sans-serif;
    letter-spacing: 1.2px;
    font-weight: initial;
}

h1 {
    margin-top:10px;
    margin-bottom:20px;
    font-size: 40px;
}

h1 button,h1 input[type=text],h1 input[type=submit] {
    margin-left:20px;
    vertical-align:middle;
}

h2,h3 {
    margin-top:30px;
}

h2 a {
	margin-top:20px;
	text-decoration:none;
	color:#333;
}

h2 a:hover {
	text-decoration:underline;
	color:#000;
}

#storage {
	border:1px solid #333;
	border-radius:5px;
	margin-right:20px;
	padding:5px;
	position:relative;
	top:-5px;
	color:#fff;
}

#storage.nostorage {
	background-color:#555555;
}

#storage.good {
	background-color:#468847;	
}

#storage.warning {
	background-color:#f89406;
}

#storage.exceeded {
	background-color:#b94a48;
}

.slide-out-div {
    padding: 20px;
    width: 320px;
    background: #f2f2f2;
    border: #29216d 1px solid;
    display:none;
}
    
/* Interface Elements */

input,textarea,ul.token-text {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
}

input[type=text].small,input[type=email].small,input[type=url].small,input[type=time].small,input[type=password].small,input[type=search].small,input[type=number].small,textarea.small,ul.token-text.small {
    font-size:9pt;
    padding:3px;
}

input[type=text],input[type=email],input[type=url],input[type=time],input[type=password],input[type=search],input[type=number],textarea,ul.token-text {
    padding:8px;
    border:2px solid #ccc;
    border-radius:3px;
    margin:5px;
    font-size:14px;
    min-height: 22px;
    outline:none;
}

input[type=text]:hover:not(:disabled):not(.knob),input[type=email]:hover:not(:disabled),input[type=url]:hover:not(:disabled),input[type=time]:hover:not(:disabled),input[type=password]:hover:not(:disabled),input[type=search]:hover:not(:disabled),input[type=number]:hover:not(:disabled),textarea:hover:not(:disabled),ul.token-text:hover:not(:disabled) {
    border:2px solid #C6E2FF !important;
}

input[type=text]:focus,input[type=email]:focus,input[type=url]:focus,input[type=time]:focus,input[type=password]:focus,input[type=search]:focus,input[type=number]:focus,textarea:focus,ul.token-text:focus {
    border:2px solid #B8DBFF !important;
}

input[type=search] {
    appearance:textfield;
    -moz-appearance:textfield;
    -webkit-appearance:textfield;
    border-radius:20px;
    padding:4px;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox] + label {
    background-color:transparent;
    border:2px solid #8a8a8a;
    padding:7px;
    border-radius:3px;
    display:inline-block;
    position:relative;
    vertical-align:text-top;
    margin-right:8px;
    font-family:serif;
    font-size:10pt;
    top:3px;
}

input[type=checkbox]:checked + label {
    background-color:transparent;
    border:2px solid #8a8a8a;
    color:#99a1a7;
    background-image:url('../img/Checkbox_Tick.svg');
    background-size:contain;
    background-position:center;
}

input[type=checkbox]:not(:disabled) + label:hover {
    border:2px solid #C6E2FF !important;
}

input[type=checkbox]:not(:disabled) + label:active {
    left:1px;
    top:4px;
}

input[type=checkbox]:not(:disabled) + label.small:active {
    left:1px;
    top:3px;
}

/*input[type=checkbox]:checked + label:after {
    content:'\2713';
    position:absolute;
    top:calc(50% - 0.52em);
    left:calc(50% - 0.4em);
    color:#1b9d1b;
}*/

input[type=checkbox] + label.small {
    padding:5px;
    top:2px;
    font-size:8pt;
    vertical-align:baseline
}

/*input[type=checkbox]:checked + label.small:after {
    top:calc(50% - 0.5em);
    left:calc(50% - 0.4em);
}
 */

input[type=checkbox]:checked:disabled + label {
    background-color: #b0b3b5;
}

input[type=checkbox]:checked:disabled + label:after {
    color:#888;
}

input[type=checkbox]:disabled + label {
    background-color: #b0b3b5;
}

.checkbox-text {
    cursor:default;
}

button,input[type=button],input[type=submit] {
    margin-right:3px;
    font-family: "Oxygen",sans-serif;
    letter-spacing: 0.5pt;
}

button.small,input[type=button].small,input[type=submit].small {
    font-size:13px !important;
    padding:7px 15px !important;
}

input[type=button]:not(.actionbtn),button:not(.ui-button):not(.mejs-button2):not([aria-controls=video_player]):not(.actionbtn) {
    background:transparent;
    border-radius:23px;
    border:2px solid #A4D8D8;
    display:inline-block;
    color:#9CD2D2;
    font-size:14px;
    padding:8px 25px;
    text-decoration:none;
    outline:none;
    background-color: #3f4046;
    color: #dadada;
    border-color: #717171;
}

a input[type=button],button:not(.ui-button):not(.mejs-button2):not(.actionbtn) {
	text-decoration:none;
}

input[type=button]:not(.actionbtn):hover, button:not(.ui-button):not(.mejs-button2):not([aria-controls=video_player]):not(.actionbtn):not(.approve):not(.reject):not(.register):not(.login):not(:disabled):not(.controlbtn):hover {
    border:2px solid #ddd;
	color:#ddd;
    cursor:pointer;
}

input[type=button]:active, button:active:not(:disabled):not(.ui-button):not(.mejs-button2):not([aria-controls=video_player]):not(.controlbtn) {
	position:relative;
	top:1px;
    left:1px;
}

input[type=button]:disabled, button:disabled {
    color:#bbb !important;
    border:2px solid #bbb !important;
    cursor:not-allowed;
    opacity:0.8;
}

input[type=submit],button.actionbtn,input[type=button].actionbtn {
    background: transparent;
    border-radius: 23px;
    border: 2px solid #64AB73;
    display: inline-block;
    color: #84D696;
    font-size: 14px;
    padding: 8px 25px;
    text-decoration: none;
    outline: 0;
}

input[type=submit],button.submitbtn,input[type=button].submitbtn,button.actionbtn,input[type=button].actionbtn {
    background-color:#376140 !important;
    color:#dadada;
    border: 2px solid #5a9659 !important;
}

/*button.actionbtn,input[type=button].actionbtn {
    background-color: #22439061;
    color: #dadada;
    border: 2px solid #6188b1d1;
}*/

a input[type=submit] {
	text-decoration:none;
}

input[type=submit]:hover,input[type=button].actionbtn:hover,button.actionbtn:hover:not(:disabled),button.submitbtn:hover {
    border:2px solid #fff !important;
	color:#fff;
    cursor:pointer;
}

input[type=submit]:active,input[type=button].actionbtn:active,button.actionbtn:active:not(:disabled),button.submitbtn:active {
	position:relative;
	top:1px;
    left:1px;
}

select {
	padding:6px 22px 6px 7px;
	border:2px solid #bbb;
	border-radius:5px;
	margin:5px;
	font-size:14px;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
    background:#494B57 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' height='4' width='20'><polygon points='4 0, 8 4, 12 0' fill='%23eee' /></svg>") right center no-repeat;
    color:#ddd;
}

select option {
    color:initial;
}

select:hover {
    border:2px solid #fff;
    color:#fff;
}

select.medium {
    font-size:13px !important;
    padding:4px;
    margin:2px;
    padding-right:20px;
    border:2px solid #bbb;
}

select.medium:hover {
    border:2px solid #fff;
}

select.small {
	font-size:10px;
	padding:4px;
	margin:2px;
	padding-right:20px;
    border:1px solid #bbb;
}

select.small:hover {
    border:1px solid #fff;
}

select.noborder {
	border:none;
	padding:0;
	padding-right:20px;
	margin:0;
	outline:none;
	background-color:transparent;
}

.segmented-control input[type=radio] + label {
    cursor:pointer;
    padding:10px 15px;
    background-position:center center;
    background-repeat:no-repeat;
}

.segmented-control.small input[type=radio] + label {
    padding:6px 12px;
}

.segmented-control input[type=radio]:checked + label {
    background-color:#9CD2D2;
    color:#eee;
}

.segmented-control input[type=radio] {
    display:none;
}

.segmented-control {
    background:transparent;
    -moz-border-radius:23px;
    -webkit-border-radius:23px;
    border-radius:23px;
    border:2px solid #A4D8D8;
    display:inline-block;
    color:#9CD2D2;
    text-decoration:none;
    outline:none;
    padding:8px 0;
    overflow: hidden;
}

.segmented-control.small {
    background:transparent;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    padding:2px 0;
}

button.export {
	float:right;
	margin-right:10px;
}

button.register {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7dcc7a), color-stop(1, #469940) ) !important;
    background:-moz-linear-gradient( center top, #7dcc7a 5%, #469940 100% ) !important;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7dcc7a', endColorstr='#469940') !important;
    background-color:#7dcc7a !important;
    color:#eee !important;
    text-shadow: none !important;
	border: thin solid #66aa6e !important;
}

button.register:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #72ba70), color-stop(1, #387a33) ) !important;
	background:-moz-linear-gradient( center top, #72ba70 5%, #387a33 100% ) !important;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72ba70', endColorstr='#387a33') !important;
	background-color:#72ba70 !important;
	color:#fff !important;
    cursor:pointer;
}

button.login {
    background:none !important;
    background-color:transparent;
    text-shadow: none !important;
    border:2px solid #b4b4b4 !important;
    border-radius:20px !important;
    font-size:14px !important;
    padding:4px 25px !important;
    margin-top:1px;
}

button.login:hover {
    color:#fff !important;
    border:2px solid #fff !important;
    cursor:pointer;
}

.heatmap {
    background-repeat:no-repeat;
    background-size:100% 100%;
    width:100%;
    position:absolute;
    left:0;
    right:0;
    z-index:9999;
    opacity:0.5;
    display:none;
}

#player-actions-container {
    margin-top:30px;
    margin-bottom:20px;
    color:#d4d4d4 !important;
    border:2px solid #636363;
    border-radius:20px;
    text-align:center;
    background-color:#333;
    background-color:#2727276e;
    overflow:hidden;
}

#player-actions-sizer {
    min-width: 400px;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

#player-actions-container button.player-action {
    background-color:transparent;
    border:none !important;
    margin:0;
    padding:8px 12px;
    border-radius:3px;
    color:#d4d4d4;
}

button.player-action:hover {
    color:#eee !important;
    background-color:#666 !important;
}

button.player-action.subscribed {
    background-color: #445a7f !important;
    color: #ddd !important;
}

button.player-action.subscribed:hover {
    background-color: #5a6d8d !important;
    color: #eee !important;
}

button.player-action img {
    vertical-align: middle;
    margin-right: 5px;
}

#annotation_btn {
    background-color:transparent;
}

.change-alert-banner {
	background-color:#eee;
	padding:2px 10px 2px 10px;
	margin-bottom:10px;
}

.change-alert-item-list {
	display:none;
	margin-left:15px;
}

.new-label {
    font-size:10px;
    background-color:#6335a5;
    padding:1px 5px;
    border-radius:3px;
    margin-left:3px;
    position:relative;
    top:-2px;
    color:#fff;
    vertical-align: middle;
}

.file-unviewed {
    width:12px;
    height:12px;
    display:inline-block;
    vertical-align:middle;
    margin-right:4px;
    border-radius: 10px;
    background-color: #475e9e;
}

.file-tag {
    display:inline-block;
    vertical-align:middle;
    margin-right:4px;
    border-radius:3px;
    background-color: #475e9e;
    color:#aaa;
    font-size:15px;
}

.favoritebtn,.commentfav {
    background:url('../img/Favorite-off.svg');
    background-size: contain;
    display:inline-block;
    cursor:pointer;
    width:26px;
    height:26px;
}

.commentfav {
    width:18px;
    height:18px;
    margin-right:3px;
    opacity:0;
}

.commentfav.favorite {
    opacity:1;
}

.favoritebtn.favorite,.commentfav.favorite {
    background:url('../img/Favorite-on.svg');
    background-size: contain;
}

.file_dropdown {
    background-image:url('../img/Dropdown.svg');
    background-repeat:no-repeat;
    width:16px;
    height:16px;
    cursor:pointer;
    display:inline-block;
    vertical-align: text-top;
    margin-left: 3px;
}

#new_file_list .file-thumb,#new_comment_list .file-thumb,#approval_list .file-thumb,.file-thumb.small {
	width:40px;
	height:30px;
    display: inline-block;
    margin-right:5px;
    margin-bottom: 5px;
    vertical-align:middle;
}

.file-obj {
    position:relative;
}

li.ui-menu-item .file-thumb {
    margin:0 5px 0 -1px;
}

.file-thumb {
    width:70px;
    height:68px;
    margin:0 24px;
    background-repeat:no-repeat;
    background-position:center;
	background-size:contain;
    position:relative;
    border-radius:5px;
}

.file-thumb.small {
    width:40px;
    height:38px;
    margin:0;
}

.file-thumb.video,.file-thumb.audio,.file-thumb.image {
    width:120px;
    height:68px;
    margin:0;
}

.file-thumb.video.small,.file-thumb.audio.small,.file-thumb.image.small {
    width:40px;
    height:22px;
}

.file-thumb.video {
    background-color: #000;
}

.file-thumb .thumb-playhead {
    width:1px;
    height:68px;
    display:none;
    background-color:#fff;
    position:absolute;
    z-index:5;
}

.file-obj.thumb .file-thumb .thumb-playhead {
    height:135px;
}

.file-thumb.upload {
    text-align:center;
    border-collapse: collapse;
}

.file-thumb.upload div {
    display:inline-block !important;
}

.file-thumb.upload div:first-child {
    vertical-align:middle;
    position:relative;
    top:11px;
}

.file-obj.thumb .file-thumb.upload div:first-child {
    top:19px;
}

.file-spinner {
    width: 100%;
    height: 100%;
    background-image: url('../img/spinner-white.svg');
    background-repeat: no-repeat;
    background-position: center;
    z-index: 9999;
    float: left;
    background-size: 30%;}

.file-icon {
    width:110px;
    position:relative;
}

.file-alias {
    vertical-align:middle;
}

.file-duration {
	position:absolute;
	bottom:5px;
	left:4px;
	background-color:#000;
	color:#fff;
	font-size:11px;
	padding:2px 3px 2px 3px;
}

.file-thumb .has-audio {
    position:absolute;
    bottom:5px;
    right:3px;
    background:url('../img/has_audio.svg');
    background-repeat:no-repeat;
    background-size:contain;
    width:12px;
    height:12px;
    opacity:0.7;
}

.file-obj.thumb .file-thumb .has-audio {
    right:6px;
    width:15px;
    height:15px;
}

.file-icon .file-duration {
	left:7px;
	bottom:3px;
}

.file-title {
    color:#444;
    letter-spacing:1.25px;
	overflow-x:hidden;
  	text-overflow:ellipsis;
  	white-space:nowrap;
  	max-width:calc(100% - 120px);
  	display:inline-block;
    font-size:13pt;
    font-family:'Oxygen', sans-serif;
    vertical-align:middle;
}

.file-title-edit {
    min-width:50%;
    max-width:calc(100% - 120px);
}

.file-revision-name-edit {
    min-width:50%;
    max-width:calc(100% - 120px);
    display:block;
}

.file-obj.thumb .file-title-edit {
    max-width:65%;
}

.file-obj.thumb .file-title {
    max-width:65%;
}

.file-status, .upload-status {
    font-size:15px;
    position:absolute;
    bottom:15px;
    color:#aaa;
    white-space:nowrap;
    overflow:hidden;
    max-width:100%;
}

.file-obj.thumb .file-status, .file-obj.thumb .upload-status {
    display:block;
    height:1.2em;
    position:initial;
    bottom:initial;
    overflow:hidden;
    max-width:250px;
    white-space:nowrap;
}

.file-obj.thumb.info .file-status, .file-obj.thumb.info .upload-status {
    margin: 2px;
}

.file-obj.red {
    background-color:rgba(158, 44, 44, 0.8) !important;
}

.file-obj.red:nth-of-type(odd):not(.selected) {
    background-color:rgba(158, 44, 44, 0.6) !important;
}

.file-obj.orange {
    background-color:rgba(201, 134, 18, 0.65) !important;
}

.file-obj.orange:nth-of-type(odd):not(.selected) {
    background-color:rgba(201, 134, 18, 0.45) !important;
}

.file-obj.green {
    background-color:rgba(38, 102, 34, 0.8) !important;
}

.file-obj.green:nth-of-type(odd):not(.selected) {
    background-color:rgba(38, 102, 34, 0.6) !important;
}

.file-obj.blue {
    background-color:rgba(34, 50, 119, 0.8) !important;
}

.file-obj.blue:nth-of-type(odd):not(.selected) {
    background-color:rgba(34, 50, 119, 0.6) !important;
}

.file-obj.turquoise {
    background-color:rgba(54, 144, 147, 0.7) !important;
}

.file-obj.turquoise:nth-of-type(odd):not(.selected) {
    background-color:rgba(54, 144, 147, 0.5) !important;
}

.file-obj.pink {
    background-color:rgba(210, 126, 126, 0.8) !important;
}

.file-obj.pink:nth-of-type(odd):not(.selected) {
    background-color:rgba(210, 126, 126, 0.6) !important;
}

.file-obj.purple {
    background-color:rgba(141, 59, 146, 0.8) !important;
}

.file-obj.purple:nth-of-type(odd):not(.selected) {
    background-color:rgba(141, 59, 146, 0.6) !important;
}

.file-obj.black {
    background-color:rgba(34, 34, 34, 1) !important;
}

.file-obj.black:nth-of-type(odd):not(.selected) {
    background-color:rgba(34, 34, 34, 0.8) !important;
}

.file-edit-title {
    display:none;
    width:14px;
    height:14px;
    background-image:url('../img/Pencil.svg');
    background-size:contain;
    background-repeat:no-repeat;
    vertical-align:middle;
    margin:0 7px;
}

.revision-title {
    font-size: 15px;
    border-radius: 20px;
    background: #aa7cf8;
    padding: 4px 10px;
    opacity: 0.7;
    margin-left: 5px;
    vertical-align: middle;
    color: #fff;
}

.revision-title.small {
    font-size: 13px;
    border-radius: 20px;
    padding: 3px 7px;
}

.file-error-alert {
    color:indianred;
    font-size: 15px;
    margin-top: 10px;
    opacity:0.7;
    white-space:normal;
}

.file-comments, .file-pin {
    vertical-align:middle;
    margin-left:2px;
    width:16px;
}

.file-controls {
    float: right;
    min-height:30px;
    max-height:30px;
    overflow:hidden;
    text-align:right;
    max-width:100px;
    margin-right:5px;
}

.file-obj.thumb .file-controls {
    float:none;
    margin:0 auto;
    text-align:center;
    clear: both;
}

.file-obj .file-controls a,.file-obj .file-controls div {
    opacity:0;
    margin-left: 1px;
}

.file-obj.upload .file-controls a {
    font-size:15px;
    position: relative;
    top:3px;
    opacity:1;
}

.file-obj.selected .file-controls a,.file-obj.selected .file-controls div {
    opacity:1;
}

.file-obj .file-controls div.favorite {
    opacity:1;
}

.file-obj:not(.selected):hover .file-controls a,.file-obj:not(.selected):hover .file-controls div:not(.favorite) {
    animation-duration:0.25s;
    animation-name:file-control-fade-in;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

@keyframes file-control-fade-in {
    0% {opacity:0}
    100% {opacity:1}
}

.file-search {
	float:right;
}

.prev-page-nav {
	margin-top:15px;
	float:left;
	margin-bottom:20px;
}

.next-page-nav {
	margin-top:15px;
	float:right;
	margin-bottom:20px;
}

.appbox {
    width:200px;
    height:300px;
    text-align:center;
    float:left;
    font-size:small;
    position:relative;
    margin-bottom:30px;
    background-color:#eee;
    margin-right:20px;
    padding:5px;
}

.appbox .download {
    position:absolute;
    bottom:10px;
    width:200px;
    left:50%;
    margin-left:-100px;
}

/* Tables */

table {
    border-collapse:collapse;
    border-spacing: 0;
}

td {
    padding:8px;
}

#filetablecontainer {
	margin-top:25px;
    padding-bottom:20px;
    min-height:300px;
/*    text-align: center;*/
}

.filetable {
	border:0;
	width:100%;
    padding-bottom:10px;
	max-width:100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.filetable th {
    padding: 5px;
    min-width:70px;
}

.filetable td {
    padding: 2px 8px 2px 8px;
    font-size:17px;
    min-width:70px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.filetable td.small {
    font-size:15px;
}

.file-obj:nth-of-type(odd) {
    background-color: #f2f2f2;
}

.file-obj.focused {
/*    -webkit-box-shadow:inset 0 0 0 1px #eee;
    -moz-box-shadow:inset 0 0 0 1px #eee;
    box-shadow:inset 0 0 0 1px #eee;*/
}

.file-obj.selected {
    animation-duration:0.25s;
    animation-name:selected-file-fade-in;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

@keyframes selected-file-fade-in {
    0% { background-color:inherit;}
    100% {background-color:#284eaa;}
}

.file-obj.selected .file-title {
    color:#ddd !important;
}

.file-obj.selected .file-thumb {
    animation-duration:0.25s;
    animation-name:selected-thumb-fade-in;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

@keyframes selected-thumb-fade-in {
    0% {box-shadow:none;}
    50% {box-shadow: 0 0 0 1px #aaa inset;}
    100% {box-shadow: 0 0 0 2px #aaa inset;}
}


.file-obj.thumb {
    max-width:260px;
    width:100%;
    max-height:228px;
    display:inline-block;
    padding:0 0 6px;
    text-align:center;
    box-sizing:border-box;
}

.file-obj.thumb.info {
    max-width:350px;
    text-align:left;
    margin-right: 5px;
}

.file-obj.thumb .file-thumb {
    width:240px;
    height:135px;
    background-position:center;
    border-radius:8px;
    margin:5px auto;
}

.file-obj.thumb .file-title > a {
    text-align: center;
}

.file-obj.thumb.info .file-title {
    max-width:70%;
}

.file-obj.thumb.info .file-thumb {
    margin:0;
    width:120px;
    max-height:80px;
}

.file-obj.thumb.info .info-title {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:130px;
    padding:5px 0;
}

.file-obj.thumb.info.folder .info-title {
    padding-top:25px;
}

.file-obj.thumb.info .info-controls {
    margin-top:0;
}

.file-obj.thumb.info .info-control {
/*    width:35%;*/
    float:left;
    margin-left:10%;
    cursor:pointer;
}

.file-obj.thumb.info .info-control button {
    padding: 2px 6px;
}

.file-obj.thumb.info .file-controls {
    position:absolute;
    bottom:13px;
    left: calc(50% - 60px);
}

.filetablerowdrop {
    background-color:#0099FF !important;
    color: #fff;
}

.filedropzone:not(#filetablecontainer) {
    font-size: 22px;
    padding:80px;
    text-align:center;
    border:3px dotted #ddd;
    color:#aaa;
}

.filedropzone.dragover {
    background-color: #2B2E3E !important;
    color:#fff;
}

.filedropzone.dragover tr {
    background-color: #2B2E3E !important;
    color:#fff;
}

.filedropzone.dragover:not(#filetablecontainer) {
    border:3px dotted #ccc;
}

.filetable-dropzone {
    border:3px dashed #888;
    font-size:21px;
    padding:40px;
    text-align:center;
    color:#aaa;
    opacity:0.6;
    position:relative;
}

.filetable-dropzone.tall {
    font-size:24px;
    padding:110px;
}

.drag-badge {
    font-size:13pt;
    color:#fff;
    background-color:red;
    border-radius:30px;
    position:absolute;
    top:2px;
    left:2px;
    padding:3px 10px;
    text-align:center;
}

#more-items {
    display:none;
    opacity:0.2;
    background-color:#eee !important;
    text-align:center;
    cursor:pointer;
}

#more-items td {
    text-align:center;
    color:#000;
}

#item-load-spinner {
    display:none;
    text-align: center;
}

#item-load-spinner td {
    text-align: center;
}

.projecttable {
    width:100%;
}

.projecttable h3 {
    max-width:500px;
    overflow-wrap:break-word;
    margin:5px 0;
}

.projecttable td {
    padding:10px;
    position:relative;
}

.project-controls {
    margin-right:25px;
    position:absolute;
    top:50%;
    right:20px;
}

.project-control {
    float:right;
    margin-left:10px;
}

.project-controls .project-control {
    opacity: 0.5;
    display: none;
}

.project-mute:not(.unmuted) {
    opacity:1.0;
    display:block;
}

.projecttable tr:hover .project-controls .project-control {
    display:block;
}

.project-controls:hover {
    opacity:1;
}

.project-thumb {
    width:120px;
    height:68px;
    background-color:#000;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    border-radius:8px;
    border:2px solid #444;
    -webkit-filter:saturate(50%);
    filter:saturate(50%);
}

.projecttable tr:hover h3 > a {
    animation-duration:0.35s;
    animation-name:project-title-fade-up;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

@keyframes project-title-fade-up {
    100% {color:#eee}
}

.projecttable tr:hover .project-thumb {
    animation-duration:0.35s;
    animation-name:project-thumb-fade-up;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

@keyframes project-thumb-fade-up {
    0% {
        -webkit-filter:saturate(50%);
        filter:saturate(50%);
    }
    100% {
        border:2px solid #656262;
        -webkit-filter:saturate(100%);
        filter:saturate(100%);
    }
}

.usertable {
	width:90%;
}

table th {
	color:#eee;
	text-align:left;
    padding: 9px 3px 9px 13px;
    font-size:15px;
    word-break: initial;
}

.subscriptiontable {
	width:100%;
	max-width:400px;
	margin:0 10px 25px 10px;
	border:thin solid #ddd;
	background:#efefff;
    color:#555;
}

.subscriptiontable th {
    font-size:18px;
}

.subscriptiontable td {
	padding:5px 10px 5px 10px;
}

#price_wrapper {
    clear:both;
}

#price_wrapper .package {
    max-width:400px;
    width:90%;
    margin:0 10px 25px 10px;
    padding:10px;
    border:thin solid #ccc;
    background:#F3F3F3;
    color:#444;
    float:left;
    overflow-x:hidden;
    line-height:1.5;
    font-size:18px;
}

#price_wrapper .package h3 {
    margin:-10px -10px 10px -10px;
    width:120%;
    background-color:#4378c7;
    padding:6px 15px;
    color:#fff;
}

#price_wrapper .package:nth-child(4n+3) h3  {
    background-color:#2CA29E;
}

#price_wrapper .package:nth-child(4n+4) h3  {
    background-color:#2CA29E;
}

#price_wrapper .package input[type=radio] {
    vertical-align:middle;
    position:relative;
    top:-2px;
}

#price_wrapper.subscription .package:not(.checked) {
    opacity:0.7;
}

#price_wrapper .package .package-price {
    font-weight:bold;
    font-size:13pt;
}

.subscription-box {
    width:300px;
    background-color:#6a45a5;
    padding:0 25px;
    float:left;
    color:#fff;
    margin:10px;
    height:300px;
    position:relative;
}

.subscription-box:nth-of-type(odd) {
    background-color:#4548a5;
}

.subscription-box button {
    position:absolute;
    bottom:25px;
}

.subscription-box button:active {
    position:absolute !important;
    bottom:24px !important;
    left:26px !important;
    top:initial !important;
}

.subscription-box .failure {
    color:#ec5555;
}

#payment-dropin {
    width:100%;
}

.braintree-heading {
    color:#fff;
}

/* Sorting */

.sort-asc {
	width:10px;
	height:2px;
	padding:3px;
    margin:0;
	background:url('../img/sort_asc.png');
    background-repeat: no-repeat;
    background-position: center;
    display:none;
}

.sort-desc {
	width:10px;
	height:2px;
	padding:3px;
    margin:0;
	background:url('../img/sort_desc.png');
    background-repeat: no-repeat;
    background-position: center;
    display:none;
}

/* Menus */

.menu {
    z-index:100000;
	position:absolute;
	box-shadow: 3px 5px 10px #333;
	clear:both;
	overflow:visible;
/*    max-height:70vh;
    overflow-y:auto;*/
}

.menu .icon {
    max-width:22px;
    max-height:22px;
    vertical-align:sub;
    margin-right:5px;
}

/* File Browser */

.file-browser-container {
    border:thin solid #777;
    border-radius:5px;
    font-size:16px;
    width:100%;
    max-width:500px;
    min-height:120px;
    margin-bottom:20px;
    overflow-y:auto
}

#file-browser-project {
    max-width:100%;
}

.browse-dept, .browse-folder, .browse-file {
	margin-left:8px;
	max-height:26px;
	cursor:pointer;
    font-size: 16px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
	padding:4px;
}

#browser {
    margin: 0;
    padding: 20px;
}

/*#browser ul:not(:last-of-type) {
	margin:0;
	background: url("../img/vline.png") repeat-y;
}*/

#browser li {
 	margin:0;
 	padding:0;
    background: url("../img/node.png") repeat-y;
    list-style-type:none;
}

.browse-dept img, .browse-folder img, .browse-file img  {
	width:25px;
    max-height:25px;
    min-height:18px;
	vertical-align:text-bottom;
	margin-right:7px;
    margin-left: 2px;
}

#browser li:first-child {
	background: url("../img/firstnode.png") no-repeat;
}

#browser li:last-child {
     background: url("../img/lastnode.png") no-repeat;
}

.file-path-icon {
    height:32px;
    margin-right:10px;
    vertical-align:top;
}

.file-path-icon.small {
    height:18px;
    margin-right:5px;
}

ul.file-path-selector {
    list-style-type:none;
    list-style-position:outside;
    padding:0;
}

ul.file-path-selector a:first-child:before {
    content: "";
    margin:0;
}

ul.file-path-selector a:before {
    content: "\25B6";
    margin-left:4px;
    margin-right:5px;
    font-size:9pt;
}

ul.file-path-selector li {
    display:inline-block;
    font-size:12px;
    padding:3px;
}

ul.file-path-selector a {
    color: #c3c2c2 !important;
}

ul.file-path-selector .file-path-icon {
    height:15px;
    vertical-align:middle;
    margin-right:6px;
    opacity:0.7;
}

ul.file-path-selector li:hover {
    border:1px solid #ccc;
    margin:-1px -1px -1px -1px;
/*    border-radius:5px;*/
}

ul.file-path-selector a:hover {
    color:#eee;
}

ul.file-path-selector li:active {
    left:1px;
    top:1px;
}

/* Projects */

.project-bubble {
	margin:10px;
	padding:8px;
	border:thin solid #bbb;
	background-color:#ddd;
	font-size:14px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	max-width:600px;
}

/* Dashboard */

.dashboard-box {
    display:inline-block;
    overflow-x:hidden;
    overflow-y:auto;
    margin:0 30px 30px 20px;
    padding:0 10px 10px;
    vertical-align:top;
    height:325px;
}

.dashboard-box.big {
    width:calc(40% + 80px);
    min-width:300px;
}

.dashboard-box.small {
    width:20%;
    overflow-y:hidden;
    min-width:200px;
}

.dashboard-box h2 {
    margin-top:5px;
}

.dashboard-box table {
    width:100%;
}

.dashboard-box .file-thumb {
    width:100%;
    height:100%;
    min-width:60px;
    min-height:34px;
    background-repeat:no-repeat;
    background-position:center;
    margin:0;
}

.dashboard-box .file-title {
    font-weight:normal;
    max-width:100%;
    white-space:normal;
    font-size:12pt;
    letter-spacing:0.9px;
}

.dashboard-box .task-title {
    white-space:nowrap;
    text-overflow:ellipsis;
}

.dashboard-box .task-status {
    background-position:center;
    background-repeat:no-repeat;
    width:100%;
    min-width:20px;
}

/* Avatars */
img.avatar-large {
	width:64px;
	height:64px;
	float:left;
	margin-right:5px;
    border-radius:40px;
    vertical-align:middle;
}

img.avatar {
	width:32px;
	height:32px;
	float:left;
	margin-right:5px;
    border-radius:30px;
    vertical-align:middle;
}

span.avatar {
	position:relative;
    left:5px;
    vertical-align:middle;
}

span.avatar-large {
	position:relative;
	top:12px;
}

.avatar.noborder, .avatar-large.noborder {
    border:none;
    border-radius:0;
}

table .avatar
{
    float:none;
    text-align:center;
    top: -2px;
    position: relative;
}

/* Player */

#player {
	min-width:300px;
}

#player_container {
	width:65%;
	min-width:250px;
	position:relative;
    cursor:default;
    outline: none;
}

#player_container svg {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:10000;
/*    width:100%;*/
    margin:0 auto;
}

#video_player {
	z-index:9998;
	min-width:250px;
	max-width:100%;
	background-color:#000;
    object-fit:contain;
}

#player_dropdown_box {
	display:inline;
	position:relative;
	top:-3px;
}

.spinner {
    background-image:url('../img/spinner-white.svg');
    background-size:auto 100%;
    background-repeat:no-repeat;
    width:32px;
    height:32px;
    display:inline-block;
    vertical-align:middle;
    margin:5px;
}

#player_container .spinner {
    z-index:10000;
    position:absolute;
    top:calc(50% - 30px);
    left:calc(50% - 30px);
    opacity:0.8;
}

#play_banner {
    z-index:10000;
    position:absolute;
    top:calc(50% - 22px - 32px);
    left:calc(50% - 32px);
    opacity: 0.2;
}

.player-audio-poster {
    width:100%;
    max-width:960px;
    height:300px;
    background-repeat:no-repeat;
    background-size:100% 100%;
    position:relative;
}

.tc_hover {
    display:none;
    z-index:100000;
    position:absolute;
    background-color:#333;
    color:#fff;
    padding:4px;
    opacity:0.9;
    border-radius:2px;
    text-align:center;
}

.tc_hover::after {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7px;
    content: '';
    width: 0;
    height: 0;
    border-top: solid 5px #333;
    border-left: solid 7px transparent;
    border-right: solid 7px transparent;
    opacity: 0.9;
}

.audio-playhead,.audio-playhead-user {
    width:2px;
    height:100%;
    background-color:#fff;
    position:absolute;
}

.audio-playhead-user {
    display:none;
    opacity:0.5;
}

.player-hoverscrub {
    width:120px;
    height:70px;
    background-size:initial;
    background-repeat:no-repeat;
/*    position:absolute;*/
    left:0;
}

.marker-bar {
	background-color:#000;
	position:relative;
    height:16px;
    z-index:10000;
    float:left;
    clear:both;
    width:100%;
    padding:2px 0;
}

.marker {
    width:12px;
    height:14px;
    position:absolute;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    margin-top:2px;
}

.player-nav {
    position:fixed;
    top:calc(50% - 47px);
}

.player-nav button.player-nav-button {
    border:0 !important;
    font-size:50px !important;
    padding:0 !important;
    margin:0 !important;
    background-color:transparent !important;
}

.player-nav button.auto-advance {
    border:0 !important;
    margin:0 auto !important;
    font-size:15px !important;
    font-size-adjust:0.7;
    display:block !important;
    padding:4px 8px !important;
    background-color:transparent !important;
}

.player-nav .auto-advance.on {
    color:#fff !important;
    background-color:#04933d !important;
}

.player-nav .auto-advance.countdown {
    background-color:red !important;
    background-image:linear-gradient(180deg, transparent 50%, #04933d 50%),linear-gradient(90deg, #04933d 50%, transparent 50%) !important;
}

.player-nav-popover {
    width:140px;
    background-color:#333;
    color:#eee;
    padding:5px;
    border-radius:3px;
    position:fixed;
    z-index:110000;
    display:none;
    word-break: break-all;
}

.player-nav-popover::after {
    position:absolute;
    top:calc(50% - 3.5px);
    content:'';
    width:0;
    height:0;
    border-top:solid 7px transparent;
    border-bottom:solid 7px transparent;
}

.player-nav-popover.left::after {
    left:0;
    margin-left:-7px;
    border-right:solid 7px #333;
}

.player-nav-popover.right::after {
    right:0;
    margin-right:-7px;
    border-left:solid 7px #333;
}

.player-nav-popover h3 {
    margin:0;
    font-size:14px;
    text-align:center;
}

.player-nav-popover .file-thumb {
    width:120px;
    height:68px;
    margin:3px auto;
}

.acorn-caption {
    z-index:10000;
}

.acorn-player.access .acorn-buffer {
    background:#b9b8b8 !important;
    border-radius:10px !important;
}

.acorn-player.access .acorn-seek-slider .ui-slider-range :not(.acorn-buffer) {
    background:#3f4e9c !important;
}

#info-table {
	width:65%;
	max-width:960px;
	margin-top:20px;
	clear:left;
}

.optimize-status {
    margin-right:10px;
    width:50px;
    height:50px;
    background-image:url('../img/Optimizing.svg');
    background-size:51%;
    background-repeat:no-repeat;
    background-position:center;
    vertical-align:bottom;
}

.optimize-status:not(.done) {
    mix-blend-mode:difference;
}

.download-file-icon {
    display:inline-block;
    background:url('../img/Unknown_Doc.svg') no-repeat;
    background-size:contain;
    width:22px;
    height:22px;
    margin-right:5px;
    vertical-align:text-bottom;
}

/* Image Controls */
#image-control-container, #doc-control-container {
	padding:0 5px;
	width:65%;
	max-width:960px;
    background-color:#1b1b1b;
    height:40px;
    position:relative;
}

#doc-control-container {
    text-align:center;
}

#image-control-container button, #doc-control-container button {
    border:none;
    background-color:transparent;
    padding:3px;
    border-radius: 0;
}

#image-zoom-fit {
    position:absolute;
    left:5px;
    top:0;
    bottom:0;
    z-index:999;
}

#image-zoom-button-container {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    text-align:center;
}

#doc-zoom-button-container {
    display:inline-block;
    text-align:center;
}

#image-zoom-button-container button, #doc-page-button-container button {
    height:100%;
}

#image-expand {
	background:#323131 url('../img/Image_Full_Screen.svg');
	width:20px;
	height:20px;
	background-repeat:no-repeat;
	background-position:center;
    position:absolute;
    right:5px;
    top:0;
    bottom:0;
    margin:auto;
    z-index:999;
    cursor:pointer;
}

#fullscreen-image-background {
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:rgba(0,0,0,0.85);
    backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -ms-backdrop-filter: blur(5px);
    z-index:99999;
}

#fullscreen-image {
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:100000;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    margin:20px;
}

#fullscreen-image:focus {
    outline:none;
}

#pdf-canvas {
    margin:0 auto;
}

#doc-zoom-in, #doc-zoom-out, #doc-zoom-100 {
    float:left;
    height:100%;
}

#doc-page-current {
    width:40px;
    height:25px;
    text-align:center;
}

#doc-page-total {
    font-size: 12pt;
}

#doc-next-page, #doc-prev-page {
    margin:0 10px;
}

button.controlbtn {
    cursor:pointer;
}

/* Viewers */

.user-watch {
	width:25px;
	height:25px;
	background-image:url('../img/watch_user.svg');
	background-repeat:no-repeat;
	background-position:center;
    background-size:25px;
	cursor:pointer;
}

.user-watch.unwatch {
	background-image:url('../img/watch_user_active.svg');
}

.nudge {
	width:24px;
	height:24px;
	background-image:url('../img/Nudge.svg');
	background-repeat:no-repeat;
	background-position:center;
    background-size:24px;
	cursor:pointer;
	display:inline-block;
	vertical-align:text-bottom;
}

.nudge-sent {
	width:30px;
	height:30px;
	background-image:url('../img/success.svg');
	background-repeat:no-repeat;
	background-position:center;
	background-size:30px;
	display:inline-block;
	vertical-align:middle;
}

/* A class used by the jQuery UI CSS framework for their dialogs. */
.ui-front {
    z-index:1000000 !important;
}

.ui-dialog .ui-dialog-content {
    padding:25px !important;
    font-size:14pt;
}

.ui-dialog {
    padding: 0 !important;
}

.ui-autocomplete {
    z-index:1000001 !important;
}

.ui-button-icon-only .ui-icon {
    margin-left:-8px !important;
}

/* Submenu width */
.ui-menu .ui-menu {
    min-width:25px;
	max-width:200px;
}

.ui-menu .ui-menu li {
    white-space:nowrap;
}

.ui-menu .ui-menu-item a {
    font-size: 17px !important;
    overflow: hidden;
    padding:4px 9px 4px 16px !important
}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active,
.ui-menu .ui-menu-item .ui-state-active {
    margin:0 !important;
    border:0 !important;
}

.ui-menu-item:nth-of-type(even) {
    background-color: rgba(0,0,0,0.1);
}

.ui-menu-icon.ui-icon.ui-icon-carat-1-e {
    background-image:none !important;
    text-indent:0 !important;
    margin:0 0 0 5px !important;
    width:inherit !important;
    height:inherit !important;
}

.ui-menu-icon.ui-icon.ui-icon-carat-1-e:after {
    content:"\25B6";
}

.ui-menu-item.ui-checked a:before {
    content:"\2713";
    margin:4px 3px 4px -14px;
    font-size:12pt;
}

/* Tasks */

.task-table td {
    padding-top:10px;
    padding-bottom:10px;
}

.task-status {
    width:15px;
    height:15px;
    display:inline-block;
    margin-right:5px;
    background-repeat:no-repeat;
    background-size:contain;
    vertical-align:middle;
}

.task-status.pending {
    background-image:url("../img/task-red.svg");
}

.task-status.progress {
    background-image:url("../img/task-orange.svg");
}

.task-status.completed {
    background-image:url("../img/task-green.svg");
}

.task-status-label {
    vertical-align:middle;
    display:inline-block;
    margin-left:3px;
}

.task-table .overdue {
	background-color:rgba(209,79,79,0.7) !important;
}

.task-table .overdue:nth-of-type(odd) {
	background-color:rgba(209,79,79,0.8) !important;
}

.task-table .soon {
	background-color:rgba(230,138,46,0.7) !important;
}

.task-table .soon:nth-of-type(odd) {
	background-color:rgba(230,138,46,0.8) !important;
}

.task-table .priority {
	background-color:rgba(103,132,181,0.5) !important;
}

.task-table .priority:nth-of-type(odd) {
	background-color:rgba(103,132,181,0.6) !important;
}

button.task-action.subscribed {
    color: #ddd !important;
    background-color: #445a7f !important;
}

button.task-action.subscribed:hover {
    background-color: #5a6d8d !important;
    color: #eee !important;
}

button.task-action img {
    vertical-align: middle;
    margin-right: 5px;
    width:16px;
}

.task-event {
    border:2px solid #6f6f6f;;
    border-collapse:collapsed;
    padding:15px;
    margin:5px;
    display:table;
    margin-bottom:10px;
    width:80%;
    min-width:30%;
    border-radius:10px;
}

.task-event.event-status {
    margin:5px auto;
    width:auto;
    min-width:30%;
    font-size:12pt;
    border:none;
    padding:2px;
}

.task-event .task-avatar {
    display:table-cell;
    vertical-align:middle;
    padding-right:10px;
    width:30%;
}

.task-event .task-avatar img {
    max-width:48px;
    vertical-align:middle;
    margin-right:5px;
}

.task-event.event-status .task-avatar {
    width:5px;
}

.task-event.event-status .task-avatar img {
    max-width:24px;
}

.task-event .task-text {
    display: table-cell;
    vertical-align:middle;
    text-align:left;
}

.task-comment-container {
    display:table;
    width:100%;
}

.task-comment-container .user-avatar {
    display:table-cell;
    width:10%;
    min-width:20px;
    vertical-align:middle;
}

.task-comment-container #comment-field {
    width:100%;
    min-height:50px;
    height:100px;
    overflow:auto;
}

/* Approval */

#approval-container {
    padding: 8px 0 15px;
    z-index: 11000;
    position: relative;
    text-align: center;
}

#approval-container h3 {
    margin: 3px 0 9px 0;
}

#approval-container button {
    margin-right:10px;
    max-width:45%;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

#approval-list {
    max-height: 350px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 10px;
    border: 2px solid #535353;
    border-radius: 5px;
}

#approval_comment {
    height:75px;
    width:80%;
    margin-bottom:13px;
}

/*button.approve,input.approve {
    border:2px solid #64AB73 !important;
    color:#84D696 !important;
}*/

button.approve:hover, button.reject:hover,input.approve:hover, input.reject:hover {
    border:2px solid #fff !important;
    color:#fff !important;
}

button.reject,input.reject {
    border: 2px solid #965959 !important;
    background-color: #6d343c !important;
}

#approval-list > div:not(:first-child) {
    border-top: 2px solid #535353;
    padding-top: 3px;
}

.approval-history {
    padding: 6px 17px;
    margin: 0 auto;
    font-size: 17px;
}

.approval-history .avatar {
    width:28px;
    height:28px;
}

.approval-history .approval-comment {
    font-style:italic;
    padding: 2px 0 0 60px;
}

.approval-history .approval-date {
    font-size:small;
}

.approval-history.approved {
    background-color:rgba(42, 167, 64, 0.5) !important;
}

.approval-history.rejected {
    background-color:rgba(167, 46, 42, 0.5) !important;
}

.approval-history.approved:only-child, .approval-history.rejected:only-child {
    padding:20px;
}

/* Comments */

#player-rightbar {
    clear:both;
    float:right;
    min-width:250px;
    max-height:100%;
    min-height:600px;
    width:30%;
    overflow-x:hidden;
    overflow-y:auto;
    position:relative;
    top:-18px;
}

#player-rightbar.fullscreen, #comment-tabs.fullscreen {
  z-index:11000 !important;
}

#comment-tabs {
    margin-top:10px;
}

.tab-view {
    background-color:transparent;
    border:none;
}

.tab-view .ui-tabs-panel {
    background-color:#435377 !important;
    background-color:#43537738 !important;
    border:3px solid #b1b1b1 !important;
    border:3px solid #cccccc26 !important;
    padding:15px;
}

.tab-view .ui-tabs-nav {
    padding-left:0;
}

.tab-view.ui-widget-content {
    border:none;
}

.tab-view .ui-tabs-nav li {
    border-color:#b1b1b1 !important;
    border-color:#cccccc26 !important;
    border-width:3px;
    font-size:initial;
    border-radius: 10px 10px 0 0;
}

.tab-view .ui-tabs-nav li a {
    outline:none;
}

.tab-view .ui-tabs-nav li.ui-state-default {
    background-color:#3b3c42 !important;
    background-color:#3b3c426b !important;
}

.tab-view .ui-tabs-nav li.ui-state-default a {
    color:#ccc !important;
}

.tab-view .ui-tabs-nav li.ui-state-active {
    background-color:#5DAB54 !important;
    background-color:#63bf598c !important;
}

.tab-view .ui-tabs-nav li.ui-state-active a {
    color: #eee !important;
}

.small .ui-tabs-nav {
    font-size:13px;
}

#info-tabs .ui-helper-clearfix:after {
    clear: none;
}

.info-tab {
    margin-top:40px;
}

#transcription-container {
    font-size:13pt;
}

#transcription-container button {
    background-color:transparent;
}

#transcript-box {
    padding-top:10px;
    padding-bottom:55px;
    overflow-y:auto;
    overflow-x:hidden;
    max-height:60vh;
    max-width:100%;
    border-top:1px solid #ccc;
    margin-top:10px;
}

.transcript {
    margin:5px;
    padding:10px;
    font-size:14pt;
    cursor:pointer;
    position:relative;
}

.transcript.highlighted {
    background-color:#4f88ff;
    color:#fff;
}

.transcript:hover {
    background-color:#ccc;
    color:#000;
}

.transcript-time-start {
    font-size:13pt;
    font-weight:bold;
    margin-bottom:2px;
}

.transcript-time-duration {
    font-size:11pt;
    float:right;
}

.transcript-edit {
    width:100%;
    height:4em;
}

.transcript-time-edit {
    width:90px;
    text-align:center;
}

.transcript-dropdown {
    width:18px;
    height:18px;
    background:url('../img/Dropdown.svg') no-repeat;
    position:absolute;
    right:3px;
    bottom:3px;
}

#comment-container {
	position:relative;
}

#player_container #comment-tabs {
	position:absolute;
	right:0;
	top:0;
	height:100%;
	width:30%;
    max-width:500px;
	background-color:#eee;
	padding:0 10px;
}

#hold_label {
	float:right;
	font-weight:bold;
	text-align:right;
}

#comment-field {
	width:100%;
	min-height:20px;
	height:100px;
	overflow:auto;
    margin:0 10px 6px 0
}

#comment-box {
	padding-top:10px;
	padding-bottom:55px;
	overflow-y:auto;
	overflow-x:hidden;
	max-height:60vh;
	max-width:100%;
    width:100%;
    border-top: 1px solid #ccc;
    margin-top: 10px;
}

#comment-submit-controls button, #comment-submit-controls input {
    margin-right:5px;
}

#comment-filter-box {
	display:none;
	font-size:small;
	clear:both;
}

#comment-filter-box .filter-label {
	margin:2px 5px 4px 8px;
}

#comment-filter-toggle img {
    width:15px;
    vertical-align:baseline;
}

#comment-box-attachments {
    font-size:13pt;
    vertical-align:middle;
    margin-bottom:3px;
}

#comment-box-attachments img {
    vertical-align:middle;
}

#comment-box-attachments .icon {
    width:32px;
    height:32px;
    margin-right:3px;
    position:relative;
    vertical-align:middle;
    display:inline-block;
}

#comment-box-attachments .icon .file-thumb {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width:32px;
    height:30px;
}

#comment-box-attachments .icon canvas {
    position:absolute;
    z-index:999;
}

#comment-color {
	width:10px;
}

#comment-color .dd-select {
    background: transparent !important;
    border: none !important;
}

.comment, .comment-new {
	padding:18px 10px;
	background-color:#bbbbbb0a;
	font-size:16px;
	max-width:600px;
	min-height:32px;
	margin: 0 5px 8px 0;
	position:relative;
    cursor:pointer;
    border-radius: 10px;
}

.comment-new {
	background-color:#B8DBFF;
}

.comment:hover {
	background-color:#F9F9F9;
    color:#000;
}

.comment-avatar {
	float:left;
    padding: 3px 5px 0 2px;
    width:25%;
}

.comment-avatar .avatar {
    width:35px;
    height:35px;
    padding-right:2px;
}

.comment-author {
    margin-top: 3px;
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height:1.1;
}

.comment-spacer {
    height:8px;
}

.comment-text {
	margin:6px 0;
    word-break: break-word;
}

.comment-dropdown {
	float:right;
	position:relative;
	margin-top:5px;
    opacity:0;
}

.comment .reply-label a {
    opacity:0;
}

.comment-todo-btn {
    float:left;
    position:relative;
    top:-12px;
    background-image:url('../img/Comment-No-ToDo.svg');
    width:18px;
    height:18px;
    background-size:contain;
    opacity:0;
}

.comment-todo-btn.todo {
    background-image: url('../img/Comment-ToDo.svg');
    opacity:1;
}

.comment-todo-btn.done {
    background-image: url('../img/Comment-Done.svg');
    opacity:1;
}

.comment:hover .comment-todo-btn, .comment:hover .comment-dropdown, .comment:hover .commentfav, .comment:hover .reply-label a,
.comment-new:hover .comment-todo-btn, .comment-new:hover .comment-dropdown, .comment-new:hover .commentfav, .comment-new:hover .reply-label a
{
    animation-duration:0.25s;
    animation-name:comment-control-fade-in;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

@keyframes comment-control-fade-in {
    0% {opacity:0}
    100% {opacity:1}
}

.comment-banner {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:12px;
    border-bottom:1px solid #595959;
    border-radius: 5px 5px 0 0;
}

.comment-banner.red {
    background: #ff6554;
    background: -moz-linear-gradient(top,  #ff6554 0%, #ff6554 50%, #ff1a00 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6554), color-stop(50%,#ff6554), color-stop(100%,#ff1a00));
    background: -webkit-linear-gradient(top,  #ff6554 0%,#ff6554 50%,#ff1a00 100%);
    background: -o-linear-gradient(top,  #ff6554 0%,#ff6554 50%,#ff1a00 100%);
    background: -ms-linear-gradient(top,  #ff6554 0%,#ff6554 50%,#ff1a00 100%);
    background: linear-gradient(to bottom,  #ff6554 0%,#ff6554 50%,#ff1a00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6554', endColorstr='#ff1a00',GradientType=0 );
}

.comment-banner.orange {
    background: #ffa255;
    background: -moz-linear-gradient(top,  #ffa255 0%, #ffa255 50%, #ff7301 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa255), color-stop(50%,#ffa255), color-stop(100%,#ff7301));
    background: -webkit-linear-gradient(top,  #ffa255 0%,#ffa255 50%,#ff7301 100%);
    background: -o-linear-gradient(top,  #ffa255 0%,#ffa255 50%,#ff7301 100%);
    background: -ms-linear-gradient(top,  #ffa255 0%,#ffa255 50%,#ff7301 100%);
    background: linear-gradient(to bottom,  #ffa255 0%,#ffa255 50%,#ff7301 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa255', endColorstr='#ff7301',GradientType=0 );
}

.comment-banner.blue {
    background: #5585ff;
    background: -moz-linear-gradient(top,  #5585ff 0%, #5585ff 50%, #0149ff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5585ff), color-stop(50%,#5585ff), color-stop(100%,#0149ff));
    background: -webkit-linear-gradient(top,  #5585ff 0%,#5585ff 50%,#0149ff 100%);
    background: -o-linear-gradient(top,  #5585ff 0%,#5585ff 50%,#0149ff 100%);
    background: -ms-linear-gradient(top,  #5585ff 0%,#5585ff 50%,#0149ff 100%);
    background: linear-gradient(to bottom,  #5585ff 0%,#5585ff 50%,#0149ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5585ff', endColorstr='#0149ff',GradientType=0 );
}

.comment-banner.cyan {
    background: #55daff;
    background: -moz-linear-gradient(top,  #55daff 0%, #55daff 50%, #01c8ff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#55daff), color-stop(50%,#55daff), color-stop(100%,#01c8ff));
    background: -webkit-linear-gradient(top,  #55daff 0%,#55daff 50%,#01c8ff 100%);
    background: -o-linear-gradient(top,  #55daff 0%,#55daff 50%,#01c8ff 100%);
    background: -ms-linear-gradient(top,  #55daff 0%,#55daff 50%,#01c8ff 100%);
    background: linear-gradient(to bottom,  #55daff 0%,#55daff 50%,#01c8ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55daff', endColorstr='#01c8ff',GradientType=0 );
}

.comment-banner.green {
    background: #58ff55;
    background: -moz-linear-gradient(top,  #58ff55 0%, #58ff55 50%, #05ff01 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58ff55), color-stop(50%,#58ff55), color-stop(100%,#05ff01));
    background: -webkit-linear-gradient(top,  #58ff55 0%,#58ff55 50%,#05ff01 100%);
    background: -o-linear-gradient(top,  #58ff55 0%,#58ff55 50%,#05ff01 100%);
    background: -ms-linear-gradient(top,  #58ff55 0%,#58ff55 50%,#05ff01 100%);
    background: linear-gradient(to bottom,  #58ff55 0%,#58ff55 50%,#05ff01 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58ff55', endColorstr='#05ff01',GradientType=0 );
}

.comment-banner.purple {
    background: #c455ff;
    background: -moz-linear-gradient(top,  #c455ff 0%, #c455ff 50%, #a601ff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c455ff), color-stop(50%,#c455ff), color-stop(100%,#a601ff));
    background: -webkit-linear-gradient(top,  #c455ff 0%,#c455ff 50%,#a601ff 100%);
    background: -o-linear-gradient(top,  #c455ff 0%,#c455ff 50%,#a601ff 100%);
    background: -ms-linear-gradient(top,  #c455ff 0%,#c455ff 50%,#a601ff 100%);
    background: linear-gradient(to bottom,  #c455ff 0%,#c455ff 50%,#a601ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c455ff', endColorstr='#a601ff',GradientType=0 );
}

.comment-banner.pink {
    background: #ffa1c5;
    background: -moz-linear-gradient(top,  #ffa1c5 0%, #ffa1c5 50%, #ff73a9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa1c5), color-stop(50%,#ffa1c5), color-stop(100%,#ff73a9));
    background: -webkit-linear-gradient(top,  #ffa1c5 0%,#ffa1c5 50%,#ff73a9 100%);
    background: -o-linear-gradient(top,  #ffa1c5 0%,#ffa1c5 50%,#ff73a9 100%);
    background: -ms-linear-gradient(top,  #ffa1c5 0%,#ffa1c5 50%,#ff73a9 100%);
    background: linear-gradient(to bottom,  #ffa1c5 0%,#ffa1c5 50%,#ff73a9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa1c5', endColorstr='#ff73a9',GradientType=0 );
}

.comment-banner.yellow {
    background: #f8f876;
    background: -moz-linear-gradient(top,  #f8f876 0%, #f8f876 50%, #f4f432 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f876), color-stop(50%,#f8f876), color-stop(100%,#f4f432));
    background: -webkit-linear-gradient(top,  #f8f876 0%,#f8f876 50%,#f4f432 100%);
    background: -o-linear-gradient(top,  #f8f876 0%,#f8f876 50%,#f4f432 100%);
    background: -ms-linear-gradient(top,  #f8f876 0%,#f8f876 50%,#f4f432 100%);
    background: linear-gradient(to bottom,  #f8f876 0%,#f8f876 50%,#f4f432 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f876', endColorstr='#f4f432',GradientType=0 );
}

.comment-banner.black {
    background: #383838;
    background: -moz-linear-gradient(top,  #383838 0%, #383838 50%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#383838), color-stop(50%,#383838), color-stop(100%,#000000));
    background: -webkit-linear-gradient(top,  #383838 0%,#383838 50%,#000000 100%);
    background: -o-linear-gradient(top,  #383838 0%,#383838 50%,#000000 100%);
    background: -ms-linear-gradient(top,  #383838 0%,#383838 50%,#000000 100%);
    background: linear-gradient(to bottom,  #383838 0%,#383838 50%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#383838', endColorstr='#000000',GradientType=0 );
}

.comment-banner.white {
    background: #fbfbfb;
    background: -moz-linear-gradient(top,  #fbfbfb 0%, #fbfbfb 50%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(50%,#fbfbfb), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #fbfbfb 0%,#fbfbfb 50%,#ffffff 100%);
    background: -o-linear-gradient(top,  #fbfbfb 0%,#fbfbfb 50%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #fbfbfb 0%,#fbfbfb 50%,#ffffff 100%);
    background: linear-gradient(to bottom,  #fbfbfb 0%,#fbfbfb 50%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#ffffff',GradientType=0 );
}

.comment-body {
	display:table-cell;
    padding-left: 9px;
}

.comment-body b {
    font-size:11pt;
}

.comment-date {
	font-size:12px;
	margin-top:8px;
    position:relative;
    top:5px;
}

.comment-reply {
    border-left: 10px solid #ccc;
	margin: -4px 0 8px 18px;
}

.comment-link {
    padding:5px 10px 5px 10px;
    border:thin solid #bbb;
    background-color:#F9F9F9;
    font-size:14px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    max-width:600px;
    margin: 0 20px 10px 20px;
    position:relative;
    top:-5px;
}

.comment-link a {
    text-decoration: none;
/*    vertical-align: top;*/
}

.comment-link-title {
    vertical-align:middle;
}

.dd-select {
    height:30px;
	border:2px solid #bbb !important;
	border-radius:5px !important;
}

.dd-select input {
    height:25px;
}

a.dd-selected {
    padding:5px;
}

a .dd-selected-image {
    padding:0;
}

a .dd-selected-text {
    position:relative;
}

.dd-container {
    display:inline-block;
    vertical-align:middle;
    height:30px;
    top:-2px;
}

.reply-label {
    float:right;
    position:relative;
    top:-12px;
    font-size: 12px;
}

.ann_icon {
    width:14px;
    height:14px;
    background:url('../img/Pencil.svg') no-repeat;
    background-size:contain;
    display:inline-block;
    padding-right:8px;
    vertical-align:middle;
}

.ann_delete {
    width:14px;
    height:14px;
    padding-left:8px;
    position:absolute;
    right:5px;
    top:calc(50% - 11px);
}

.delete-btn {
    width:16px;
    height:16px;
    margin:3px;
    vertical-align:middle;
    background:url('../img/Delete.svg') no-repeat;
    background-size:contain;
    mix-blend-mode:difference;
    display:inline-block;
    cursor:pointer;
}

.edit-btn {
    width:16px;
    height:16px;
    margin:3px;
    vertical-align:middle;
    background:url('../img/Pencil.svg') no-repeat;
    background-size:contain;
    mix-blend-mode:difference;
    display:inline-block;
    cursor:pointer;
}

#link_username_overlay {
	padding:5px;
	width:100%;
}

#link_username {
	width:85%;
}

/* Downloads */

.download-container {
    width: 100%;
    height: 100%;
}

.download-box {
	width:100%;
	height:100%;
	text-align:center;
	background-color:#eee;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#eee));
	background: -webkit-linear-gradient(top, #ccc, #eee);
	background: -moz-linear-gradient(top, #ccc, #eee);
	background: -ms-linear-gradient(top, #ccc, #eee);
	background: -o-linear-gradient(top, #ccc, #eee);
}

.download-box:hover {
	background-color:#ddd;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#fff));
	background: -webkit-linear-gradient(top, #ddd, #fff);
	background: -moz-linear-gradient(top, #ddd, #fff);
	background: -ms-linear-gradient(top, #ddd, #fff);
	background: -o-linear-gradient(top, #ddd, #fff);
	background: linear-gradient(top, #ddd, #fff);
}

.download-box:active {
	background-color:#ccc;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#aaa), to(#ccc));
	background: -webkit-linear-gradient(top, #aaa, #ccc);
	background: -moz-linear-gradient(top, #aaa, #ccc);
	background: -ms-linear-gradient(top, #aaa, #ccc);
	background: -o-linear-gradient(top, #aaa, #ccc);
	background: linear-gradient(top, #aaa, #ccc);
}

.download-box:hover .download-box .info-container {
	background-color:#555;
	color:#fff;
}

.download-box:active .download-box .info-container {
	background-color:#000;
	color:#999;
}

.download-box .info-container {
	position:absolute;
	bottom:25%;
	left:10%;
	width:80%;
	background-color:#333;
	color:#bbb;
	border-radius:20px;
	overflow:hidden
}

.download-box .info-container h1 {
	color:#eee;
	margin:20px 10px 0 10px;
	width:100%;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden
}

.download-box .logo {
	position:absolute;
	left:10%;
	top:8%;
	width:80%;
	height:80px;
    background:url('../img/Kollab_Logo_Black.svg') center no-repeat;
	background-size:contain;
}

.download-label {
	text-align:center;
	font-size:30px;
	color:#444;
	position:absolute;
	left:10%;
	bottom:12%;
	width:80%
}

.download-box.dark {
    background-color:#000;
    background:linear-gradient(to top, #222, #000);
}

.download-box .logo.white {
    background:url('../img/Kollab_Logo_White.svg') center no-repeat;
    background-size: contain;
}

/* Alerts */

.info-alert,.error-alert {
	border:thin solid #555;
	border-radius: 3px;
	padding:10px 20px;
	margin-top:10px;
	margin-bottom:20px;
    color:#000;
    opacity:0.7;
}

.info-alert {
    background-color:#C1F2FF;
}

.info-alert button {
    background-color:#273f97 !important; /* Edge */
    background-color:#273f97db !important;
    border:2px solid #204367 !important; /* Edge */
    border:2px solid #2043677a !important;
    color:#ddd !important;
    font-size:10pt !important;
    margin-left:20px;
    padding:4px 14px !important;
}

.info-alert button:hover {
    border:2px solid #fff !important;
    color:#fff !important;
}

.error-alert {
    background-color:indianred;
    font-weight: bold;
}

.error-alert button {
/*    border:2px solid #3E55B9 !important;
    color:#1C358A !important;
    margin-left:20px;*/
}

.error-alert button:hover {
/*    border:2px solid #000 !important;
    color:#000 !important;*/
}

/* Sharing */
#sharelinktable td, #shareuploadstable td {
    font-size:13pt;
}

#sharelinktable textarea, #shareuploadstable textarea {
    min-height:60px;
}

.share-stat-header {
    position:relative;
}

.share-stat-header:not(.expandable) {
    padding: .5em .5em .5em .7em;
}

.share-stat-header h3 a {
    color:#555555;
    text-decoration:none;
    font-weight:normal;
    font-size:18px;
}

.share-stat-header .ui-accordion,.share-stat-header .ui-accordion-header, .share-stat-header .ui-accordion-content {
    background: none;
    border:none;
}

.share-stat-header .ui-corner-bottom {
    border:none;
}

.share-stat-header td {
    padding-top:0;
}

.share-stats td {
    padding-left:45px;
    padding-top:0;
}

.share-stats h3 {
    margin: 5px 0;
}

/* Browser */

#file-browser-toggle {
	display:inline-block;
	width:16px;
	height:12px;
	position:relative;
	top:3px;
	left:5px;
}

#file-browser-toggle:hover {
	cursor:pointer;
}

#file-browser {
	overflow-x:auto;
	overflow-y:hidden;
	height:110px;
	white-space:nowrap;
	margin:5px;
}

.file-browser-item {
	display:inline-block;
	min-width:80px;
	max-width:100px;
	height:110px;
	padding-right:20px;
	overflow:hidden;
	text-overflow:ellipsis;
	text-align:center
}

.file-browser-icon {
	width:80px;
	height:60px;
	margin-left:auto;
	margin-right:auto;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center; 
}

/* Feedback */

#feedback-slide-out {
    z-index: 10000;
    background-color: #eee;
    padding: 10px 20px 10px 20px;
    position: relative;
    color:#555;
}

#feedback-slide-out h2 {
    color:#555;
}

#feedback-slide-out textarea {
    margin:10px;
    position:relative;
    left:-10px;
    background-color:#fff;
    color:#555;
    width:300px;
    height:150px
}

#feedback-slide-out input[type=button] {
    color:#fff;;
    border-color:#7a7a7a;
}

.slide-out-div:hover {
    cursor:pointer;
}

/* Tooltips */

.tipsy {
    font-size:15px !important;
}

/* Resources */

.app-table td {
    padding:10px 20px 20px 10px;
    vertical-align:top;
}

/* Preloading */
.preload {
    display:none;
}

/* Events */

.event-thumb {
    width:120px;
    height:70px;
    background-repeat:no-repeat;
    background-position:center;
}

#event_dropdown a:nth-child(even) {
    background-color: #f2f2f2;
}

/* Previews */

.modal-overlay {
    position:fixed;
    z-index:99999;
    padding:30px;
    background-color:rgba(0, 0, 0, 0.4);
    border-radius:30px;
    overflow:hidden;
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    -moz-backdrop-filter:blur(3px);
}

#shortcut-key-button {
    background:url('../img/Key_Shortcuts.svg') no-repeat center/contain;
    width:40px;
    height:20px;
    cursor:pointer;
    display:inline-block;
    vertical-align:text-bottom;
    margin-left:5px;
}

#keyboard-shortcut-overlay {
    width:100%;
    max-width:500px;
    background-color: rgba(0, 0, 0, 0.7);
}

#keyboard-shortcut-overlay table {
    width:100%;
}

#keyboard-shortcut-overlay table td {
    padding:2px 10px;
}

#keyboard-shortcut-overlay table td:nth-of-type(odd) {
    text-align:right;
    width: 45%;
}

#keyboard-shortcut-overlay .key {
    background-color:#eee;
    padding:1px 4px;
    border-radius:3px;
    color:black;
    font-weight:bold;
}

#file-preview.image {
    text-align:center;
}

.preview-folder {
    color: #fff;
    height:100%;
    width:100%;
}

.preview-folder a {
    color: #fff;
}

.preview-folder img {
    max-width:120px;
    max-height:80px;
    min-height:68px;
}

.preview-folder tr:hover {
    cursor:pointer;
    animation-duration:0.1s;
    animation-name:selected-file-fade-in;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

#file-preview .file-controls {
    opacity:1;
    float:none;
    margin:10px auto;
    text-align:center;
    max-width:none;
}

#file-preview .file-controls a, #file-preview .file-controls div {
    margin:0 5px;
}

#file-preview #open-player {
    width:60px;
    height:32px;
    background-image:url('../img/Preview_Open_Player.svg');
    background-size:contain;
    background-repeat:no-repeat;
    position:absolute;
    right:14px;
    top:20px;
}

/* Workflows */
.workflow-item {
    background-color:#39507e;
    width:100%;
    max-width:750px;
    border-radius: 20px;
    padding:20px;
    margin:15px 0;
}

.workflow-item h3 {
    margin-top:0;
/*    vertical-align:middle;*/
}

.workflow-item h3 label {
    top:5px;
}

.workflow-item.collapsed {
    height:30px;
    overflow:hidden;
}

.workflow-item textarea {
    width:100%;
    min-height:80px;
}

.workflow-item .workflow-item-inner {
    margin-left: 32px;
    margin-right: 20px;
}

/* Users */

tr.add-user-row {
    opacity:0.8;
    border:2px solid #555;
}

tr.add-user-row td {
    padding:20px 10px;
}

#user-dept-container {
    clear:both;
    margin-top:70px;
}

/* Profile */

.profile-container .avatar-large {
    margin-right:20px;
}

.profile-container {
    width:100%;
    max-width:500px;
    margin:55px auto;
    background-color:rgba(75, 75, 75, 0.5);
    padding:15px 50px 30px;
    border-radius:30px;
}

/* Centered Content */

.centered-dialog {
    border:none;
    max-width:800px;
    margin:30px auto;
    padding:40px 50px;
    overflow:auto;
}

.centered-content {
    width:100%;
    max-width:700px;
    margin:30px auto;
    padding:40px 50px;
    background-color:#435377; /* For Edge */
    background-color:#43537773;
    border:3px solid #b1b1b1; /* For Edge */
    border:3px solid #cccccc26;
    overflow:auto;
}

.centered-content .centered-form {
    width:300px;
    margin:30px auto;
}

.centered-content .centered-form input {
    width:100%;
}

.centered-content h1 {
    margin-top:5px;
}

@media (min-width:1000px) {
    .centered-content.absolute-center {
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%, -50%);
        margin:0;
    }
}

@media (max-width:999px) {
    #page {
        margin:15px;
        padding:0;
    }

    .centered-content.absolute-center {
        margin:0;
        width:unset;
    }
}

/* Forms */

form td {
    padding:10px;
}

/* Help */

.hover-help {
    border: 2px solid #ccc;
    display: inline;
    padding: 0 7px;
    border-radius: 20px;
    margin: 0 10px;
    font-size: 16px;
    background-color: #414684;
    color: #ccc;
    vertical-align: middle;
}

.hover-help:after {
    content: "?";
}

/* Misc */

.generic-icon {
    vertical-align:text-bottom;
    margin-right: 10px;
    width: 54px;
    height: 54px;
    position:relative;
    top:4px;
}

.generic-icon.small {
    width:24px;
    height:24px;
    margin-right:5px;
    top:1px;
}

.inline-viewers {
    margin-left:10px;
}

/* Tabs */

.ui-tabs-nav.ui-widget-header {
    background:transparent !important;
}

.ui-tabs-active.ui-state-active {
    background:transparent !important;
}

.ui-state-default {
    background:#e6e6e6 !important;
}

/* Archives */

.archive-box {
    width:90%;
    background-color:#101a3eb3;
    padding:20px 40px;
    border-radius:20px;
    margin-bottom:30px;
}

.archive-box .controls {
    float:right;
    display:inline;
}

.archive-box table {
    width:100%;
}

.archive-size {
    margin-left:20px;
    font-size:15px;
    color:#ccc;
}

/* Subtitles */

#player_container .acorn-player.access .acorn-caption {
    font-size:1.1vw;
}

#player_container.fullscreen-video .acorn-player.access .acorn-caption {
    font-size:1.9vw;
}

/* Resizable table columns */

th.resizable {
    position:relative;
}

th.resizable .resizer {
    position:absolute;
    right:3px;
    width:5px;
    height:100%;
    left:auto;
    top:0;
    bottom:0;
    border-right:2px dotted #eeeeee73;
    cursor:ew-resize;
}

/* Major alerts */

#session-timeout-alert {
    position:fixed;
    top:0;
    left:0;
    right:0;
    opacity:1;
    z-index:99999;
}

/* Advanced Search */

#search-dialog h2 {
    margin: 20px 0 6px 0;
}

#search-dialog h2:first-of-type {
    margin: 0 0 6px 0;
}

.search-match-type {
    font-size:10pt;
    width:100%;
}

#search-match-table td {
    padding:8px 4px;
}

.search-match-subkey {
    max-width:130px;
}

/* Popups */

.popup {
    border:2px solid #aaa;
    position:absolute;
    height:0;
    width:0;
    padding:10px 20px;
    border-radius:3px;
    box-shadow:3px 3px 20px #000;
    overflow-style:auto;
    z-index: 99999;
}

.popup > div {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.popup:after, .popup:before {
    bottom: 100%;
    left: calc(50% - 14px);
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.popup:after {
    border-color: transparent;
    border-width: 7px;
    margin-left: -10px;
}

.popup:before {
    border-color: transparent;
    border-bottom-color: #aaa;
    border-width: 10px;
    margin-left: -13px;
}

.popup.above:after, .popup.above:before {
    top: 100%;
}

.popup.above:after {
    border-color: transparent;
    border-width: 7px;
    margin-left: -10px;
}

.popup.above:before {
    border-color: transparent;
    border-top-color: #aaa;
    border-width: 10px;
    margin-left: -13px;
}

.popup h1, .popup h2, .popup h3 {
    margin-top:10px;
    margin-bottom:10px;
}

.popup .success-banner {
    background-color: rgba(48, 135, 27, 0.69);
    padding: 5px;
    color: #eee;
    vertical-align: middle;
    text-align: center;
}

.popup .success-banner img {
    width:24px;
    vertical-align:text-bottom;
}

.popup textarea {
    width:90%;
}

/* Tags */

.token-text {
    border:1px solid #000;
    list-style:none;
    display:inline-block;
}

.token-text li {
    display:inline-block;
}

.token-text .token {
    background-color:#378cdf;
    margin-right:3px;
    padding:5px 8px;
    border-radius:5px;
    color:#fff;
    font-size:11pt;
    margin-bottom:2px;
}

.token-text .token .delete {
    width:12px;
    height:12px;
    vertical-align:middle;
    background-image:url('../img/Delete.svg');
    background-repeat:no-repeat;
    background-size:contain;
    display:inline-block;
    cursor:pointer;
    margin-left:4px;
}

.token-text input[type=text] {
    border:0;
    background-color:transparent;
    padding:0;
    margin:0;
    min-width:220px;
}

.token-text input[type=text].no-style:hover, .token-text input[type=text].no-style:active, .token-text input[type=text].no-style:focus {
    border:0 !important;
}

.tag-view .tag {
    display:inline-block;
    background-color:#378cdf;
    margin-right:3px;
    padding:3px 8px;
    border-radius:5px;
    color:#fff;
    font-size:12pt;
}

.tag-view.small .tag {
    padding:1px 5px;
    font-size:11pt;
}

.img-button {
    border:none !important;
    background-color:transparent !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:contain !important;
    cursor:pointer;
    padding: 0;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    border-radius: 0;
}

.expired {
    color:#b93a3a;
}
.mfa-enabled {
    color: #ddd;
    display: inline-block;
    font-size: 9pt;
    margin: 0 10px;
    opacity: 0.9;
    padding: 3px;
    vertical-align: text-bottom;
}

.mfa-enabled:after {
    content: "\1F512";
}