@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700&display=swap&subset=latin-ext');


body.vcom_index {
	background-color: #101010;
	background-repeat: no-repeat;
	color: #d0d0d0;
	font-family: 'Titillium Web', sans-serif;
	font-size: 13px;
	margin: 0px;
	overflow:hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
        margin-top: 48px;
}

body.vcom_imageindex {
	background-color: #404040;
	background-image: url('../images/imgback.png');
	color: #d0d0d0;
	font-family: 'Titillium Web', sans-serif;
	font-size: 13px;
	margin: 0px;
	overflow:hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
        margin-top: 48px;
}

body.vcom_audioindex {
	background-color: #ffffff;
	color: #404040;
	font-family: 'Titillium Web', sans-serif;
	font-size: 13px;
	margin: 0px;
        overflow: auto;
        overflow-y: scroll;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
        margin-top: 300px;
}

body.vcom_imageindex_embed,body.vcom_pdfindex_embed {
    margin-top: 0px !important;
}

body.vcom_pdfindex {
	background-color: #404040;
	color: #d0d0d0;
	font-family: 'Titillium Web', sans-serif;
	font-size: 13px;
	margin: 0px;
        overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
        margin-top: 48px;
}


body.vcom_embed {
	background-color: #202028;
	background-repeat: no-repeat;
	color: #d0d0d0;
	font-family: 'Titillium Web', sans-serif;
	font-size: 13px;
	margin: 0px;
	overflow:hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body.vcom_story {
	font-family: 'Titillium Web', sans-serif;
	font-size: 13px;
	margin: 0px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body.vcom_settings {
	font-family: 'Titillium Web', sans-serif;
	font-size: 13px;
	margin: 0px;
}

body.vcom_mgmt {
	font-family: 'Titillium Web', sans-serif;
	font-size: 13px;
	margin: 0px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


.vcom_audio_player {
    margin-top:48px;
    display:flex;
    flex-flow: row;
    align-items:stretch;
    align-content:stretch;
    background-color: #d0d0d0;
}
.vcom_audio_timeslider {
    height:32px;
    border-bottom: 1px solid #c0c0c0;
}
.vcom_audio_waveform {
    flex-grow: 1; 
    flex-shrink: 1; 
    position: relative; 
    overflow: hidden; 
    background-color: #f0f0f0;
}
.vcom_audio_player_controls {
    height:48px;
    border-top: 1px solid #606060;
    display: flex;
}
.vcom_audio_player_timedisplay {
    font-size:1.5rem;
    padding:5px;
    color:#606060;
    text-align: center;
    background-color: #c0c0c0;
    flex-basis: 200px;
}
.vcom_audio_player_vu {
    background-color: #b0b0b0;
    width: 100px;
}

.uploadprogresslist {
    position: fixed;
    bottom: 0px;
    left: 10%;
    width: 80%;
    overflow-x: hidden;
    padding: 10px;
    border: 1px solid #000000;
    background-color: #ffffff;
    border-bottom: 0px;
}

div.vcom_mgmt_container {
    width:80%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:50px;
    margin-top:100px;
}


#videobox a {
	color: #0080ff;
}

a {
	color: #ff8000;
}

.vcom_timeSlider {
	width: 100%;
	height: 20px;
	position:absolute;
	left:0px;
	top:0px;
	position:relative;
	cursor: pointer;
}

.vcom_cursor {
	position:absolute;
	left: 0px;
	top: 3px;
	background: url('../images/cursor.png');
	width:19px;
	height:19px;
	display:none;
}

.vcom_cursorline {
	position:absolute;
	left: 0px;
	top: 10px;
	width: 1px;
	height: 5px;
	display:none;
	background-color: #0080a0;
	overflow: hidden;
}

.vcom_cursorline2 {
	position:absolute;
	left: 0px;
	top: 10px;
	width: 100%;
	height: 5px;
	display:none;
	background-color: #535966;
	overflow: hidden;
}


.vcom_commentbox {
	background-color: rgba( 255, 255, 255, 0.8 );
	position:absolute;
	width:300px;
	box-shadow: 0px 0px 8px rgba( 0,0,0, 0.5);
	cursor: hand;
	z-index: 100;
	user-select: yes;
}

.vcom_part {
	padding: 5px;
	color: #000000; 
	font-size: 14px;

}

.vcom_part textarea {
	background: transparent;
	border: 0px solid #d0d0d0;
	width:100%;
	resize: none;
	overflow:hidden;
	font-family: 'Titillium Web', sans-serif, helvetica;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.3em;
	padding:0px;
	
}

.vcom_divlayer {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	cursor: crosshair;
        overflow: hidden;
}

.vcom_userdiv {
	margin-bottom: 1px;
	padding: 5px;
	text-align:right;
	overflow:hidden;
	display:block;
}

.vcom_slidercontrol {
	width:100%;
	height:48px;
	background-image: url('../images/sliderback.png');
}

.vcom_addnewbutton {
    background: #a00000;
    border: 0px;
    border-radius: 3px;
    padding: 8px;
    padding-top:2px;
    padding-bottom: 2px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    transition: 0.1s;
}

.vcom_addnewbutton:hover {
    background: #d00000;
    color: #ffffff;
    transition: 0.1s;
}


.vcom_button {
	display: inline-block;
	margin-right: 1px;
	width: 47px;
	height: 47px;
	cursor: pointer;
	position:relative;
	text-align: center;
}

.vcom_button div { position:absolute; left:0px; top:0px; width:47px; height:47px; }
.vcom_button img { position:absolute; left:0px; top:13px; width: 47px; height: 21px; }

.vcom_button .vcom_bgdiv      { /* background-image: url('../images/btn_bgdiv.png'); */ }
.vcom_button .vcom_bgdivhover { background-image: url('../images/btn_bgdiv_hover.png'); display:none; }

.vcom_playbtn .vcom_bgdiv      { /* background-image: url('../images/btn_bgdiv2.png'); */ }
.vcom_playbtn .vcom_bgdivhover { background-image: url('../images/btn_bgdiv2_hover.png'); display:none; }

.vcom_pause   { background-image: url('../images/btn_pause_off.png');    }

.vcom_mute    { background-image: url('../images/btn_mute_off.png');     }
.vcom_unmute  { background-image: url('../images/btn_mute_off.png');     }

.vcom_overlay   { background-image: url('../images/btn_overlays_off.png'); }
.vcom_nooverlay { background-image: url('../images/btn_overlays_off.png'); }

.vcom_goleft  { background-image: url('../images/btn_goleft_off.png');   }
.vcom_goright { background-image: url('../images/btn_goright_off.png');  }


.vcom_timecell { /* background-image: url('../images/btn_bgdiv.png'); */ padding-left: 5px; }

.vcom_author { color: #808080; font-size: 11px; text-align:right; opacity: 1; }

.vcom_framehead { background-color: #f0f0f0; padding: 5px; font-weight: bold; font-size: 16px; margin-bottom: 1px; margin-top: 24px; }

.vcom_bubble { display: inline-block; vertical-align: top; width: 320px; padding-top: 2px; margin-right: 10px; } 

.vcom_bubble textarea { 
	border: 1px solid #d0d0d0; 
	margin-left: 5px; 
	margin-right: 5px; 
	border-radius: 3px; 
	width:300px;
	font-family: 'Titillium Web', sans-serif, helvetica;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.3em;
}

.vcom_point { position: absolute; left: 0px; top: 0px; width: 14px; height: 14px; background: #d00000; color: #ffffff; text-align: center; border: 1px solid #ffffff; margin-left: -8px; margin-top:-8px; }

.vcom_commentlisth { background-color: #f0f0f0; font-weight: bold; text-align: center; padding: 2px; }


.vcom_versionitem {
	height: 32px;
	border-left: 10px solid #303050;
	background-color: rgba( 48, 48, 80, 0.3 );
	margin-bottom: 1px;
	padding: 5px;
}


.vcom_versionitem a {
	text-decoration: none;
	color: #e0e0e0;
	font-size:11px;
	overflow:hidden;
}

.vcom_selectedversion {
	border-left: 10px solid rgb( 220, 0, 0);
	background-color: rgba( 220, 0, 0, 0.2 );
}


.userlist_name {
    font-weight:bold;
}


.userlist_mail {
    font-size:0.8em;
    color:#a0a0a0;
}


.vcom_currenttime {
    display: inline-block;
}


.vcom_fulltime {
    display: inline-block;
}

.vcom_banner_statusbar > div {
    padding: 4px;
    padding-top: 8px;
    padding-bottom: 10px;
    border-left: 1px solid #808080;
    text-align: center;
}

.vcom_banner_statusbar {
    background-color: #000000;
    height: 32px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    border-top: 1px solid #808080;
    color: #ffffff;
    white-space: nowrap;
    text-align: right;
    z-index: 100;
    overflow: hidden;
    position: fixed;
    display: flex;
}

.vcom_audio_statusbar {
    background-color: #000000;
    height: 32px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    border-top: 1px solid #808080;
    color: #ffffff;
    white-space: nowrap;
    text-align: right;
    z-index: 100;
    overflow: hidden;
    display: flex;
}
.vcom_audio_statusbar > div {
    padding: 4px;
    padding-top: 8px;
    padding-bottom: 10px;
    border-left: 1px solid #808080;
    text-align: center;
}

.vcom_image_statusbar {
    position: absolute;
    background-color: #000000;
    height: 32px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    border-top: 1px solid #808080;
    color: #ffffff;
    white-space: nowrap;
    text-align: right;
    z-index: 100;
    overflow: hidden;
}


.vcom_image_statusbar > div {
    padding: 4px;
    padding-top: 8px;
    padding-bottom: 10px;
    border-left: 1px solid #808080;
    display: inline-block;
    text-align: center;
    vertical-align: top;
}

div.vcom_image_statusbar_leftitem {
    border-left: 0px;
    border-right: 1px solid #808080;
    float:left;
}

div.vcom_image_versionlistbox {
    position:absolute;
    left:247px;
    width:249px;
    bottom:32px;
    background-color: rgba( 0, 0, 0, 0.7 );
    border-left: 1px solid #808080;
    border-top: 1px solid #808080;
    border-right: 1px solid #808080;
    display: none;
}

div.vcom_image_versionlistbox > div {
    padding: 10px;
}

div.vcom_image_versionlistbox .vcom_versionitem {
    height: 32px;
    background-color: rgba( 0, 0, 0, 0.7 );
    margin-bottom: 1px;
    padding: 5px;
}

div.vcom_image_versionlistbox .vcom_selectedversion {
    background-color: #800000;
    border: 0px;
}

div.vcom_image_userlistbox {
    position:absolute;
    left:0px;
    width:247px;
    bottom:32px;
    background-color: rgba( 0, 0, 0, 0.7 );
    border-left: 1px solid #808080;
    border-top: 1px solid #808080;
    border-right: 1px solid #808080;
    display:none;
}

div.vcom_image_userlistbox .vcom_userdiv {
    margin-bottom: 1px;
    padding: 5px;
    text-align:left;
    overflow:hidden;
    z-index: 100;
}

.vcom_pdfcanvas_toc {
    margin: 2px;
    margin-bottom: 10px;
    -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
}

div.vcom_image_userlistbox > div {
    padding: 10px;
}


.vcom_bluebtn {
    border: 0px;
    background-color: #006080;
    border-radius: 3px;
    cursor: pointer;
    height: 32px;
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
    color: #ffffff;
}

.vcom_bluebtn:hover {
    background-color: #0080a0;
}

.vcom_image_sharedialog {
    background-color: #f8f8f8;
    color:#000000;
    box-shadow: 0px 0px 8px rgba( 0,0,0, 0.5);
    border-radius:3px;
    position:fixed;
    top:-420px;
    height:370px;
    width:500px;
    left:50%;
    margin-left:-250px;
    z-index:1000;
}

.vcom_bottomslider {
    position: absolute;
    bottom: 1px;
    height: 8px;
    border-radius: 4px;
    background: rgba(0,0,0,0.8);
    cursor: pointer;
    left: 0px;
    width: 50px;
    z-index: 200;
    border: 1px solid #ffffff;
}

.vcom_rightslider {
    position: absolute;
    right: 1px;
    width: 8px;
    border-radius: 4px;
    background: rgba(0,0,0,0.8);
    cursor: pointer;
    top: 100px;
    height: 50px;    
    z-index: 200;
    border: 1px solid #ffffff;
}

.button {
    display: inline-block;
    vertical-align: baseline;
    color: #ffffff;
    text-align: center;
    font-family: 'Titillium Web', sans-serif,helvetica,helv;
    font-size: 13px;
    background-color: #0060a0;
    padding-top: 6px;
    padding-left: 10px;
    padding-bottom: 6px;
    padding-right: 10px;
    border-radius: 3px;
    border: 0px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    color: #ffffff;
    text-align: center;
    font-family: 'Titillium Web', sans-serif,helvetica,helv;
    font-size: 13px;
    background-color: #2080c0;
}

.button:active {
    color: #ffffff;
    text-align: center;
    font-family: 'Titillium Web', sans-serif,helvetica,helv;
    font-size: 13px;
    background-color: #40a0f0;
}

textarea {
    font-family: 'Titillium Web', sans-serif,helvetica,helv;
}


canvas.vcom_pdfcanvas {
    position: absolute;
    width: 1200px;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.75);
}

.vcom_selected {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 8px;
    border: 2px solid #d00000;
}

.vcom_pdfannotation {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    /* border: 1px dotted #d00000; */
}

.vcom_pdfannotation:hover {
    background-color: rgba( 192, 164, 128, 0.5 );
}

h1 {
    font-size: 64px;
    font-weight: 300;
    margin: 0px;
}

.vcom_login {
    border: 0px;
    background-color: rgba( 255, 255, 255, 0.8 );
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 3px;
    color: #000000;
    font-family: Titillium Web;
    font-size: 1rem;
    height: 32px;
    width:100%;
}

.vcom_signup {
    border: 1px solid #000000;
    background-color: transparent;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 3px;
    color: #000000;
    font-family: Titillium Web;
    font-size: 1rem;
    height: 32px;
    width:100%;
}

.vcom_loginbutton {
    background: transparent;
    border: 1px solid #ffffff;
    font-size: 1rem;
    padding: 12px;
    border-radius: 3px;
    color: #ffffff;
}

.vcom_signupbutton {
    background: transparent;
    border: 1px solid #000000;
    font-size: 1rem;
    padding: 12px;
    border-radius: 3px;
    color: #000000;
}

.vcom_loginbutton:hover {
    background-color: rgba( 255,255,255,0.5 );
    border: 1px solid #ffffff;
    font-size: 1rem;
    padding: 12px;
    border-radius: 3px;
    color: #ffffff;
}

.vcom_topline {
    background-color: #000000;
    color: #ffffff;
    height: 48px;
    position: fixed;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 100%;
}

.vcom_popupmenu {
    position: absolute;
    z-index: 10000;
    background-color: #ffffff;
    color: #000000;
    border-radius: 0px 0px 3px 3px;
    display: none;
    border: 1px solid #000000;
}

.vcom_popupmenu div {
    padding: 10px;
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    cursor: pointer;
}


.vcom_popupmenu div:hover {
    background-color: #e0e0e0;
}

.vcom_popupmenu div div[rel=icon] { flex-basis: 16px; flex-grow: 0; flex-shrink: 0;}

.vcom_message {
    padding: 15px;
    border: 1px dotted #d00000;
    background-color: #fff0f0;
    text-align: center;
    font-weight: 700;
    margin-bottom: 24px;
}


.vcom_infomsg {
    padding: 15px;
    border: 1px dotted #d0d0d0;
    background-color: #f0f0f0;
    font-weight: 700;
    margin-bottom: 24px;    
}

.vcom_whitelink {
    color: #ffffff;
}

.vcom_listitem {
    border-bottom: 1px dotted #d0d0d0;
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    align-content: stretch;
    align-items: center;
    transition: 0.2s;
}

.vcom_listitem:hover {
    background-color: #f8f8f8;
    transition: 0.2s;
}

.vcom_listitem > div {
    text-overflow: ellipsis;
    margin: 8px;
}

.vcom_grey {
    color: #d0d0d0;
}

.vcom_listitem div[rel=thumb]   { flex-shrink: 0; flex-grow: 0; width: 64px; height: 64px; padding: 3px; padding: 3px; margin: 0px; cursor: pointer; }
.vcom_listitem div[rel=params]  { flex-shrink: 0; flex-grow: 0; width: 64px; text-align:center; }
.vcom_listitem div[rel=ready]   { flex-shrink: 0; flex-grow: 0; width: 32px; text-align:center; }
.vcom_listitem div[rel=created] { flex-grow: 0; flex-shrink: 0; width: 130px; }
.vcom_listitem div[rel=link]    { flex-grow: 0; flex-shrink: 0; width: 390px; overflow: hidden; text-overflow: ellipsis; white-space: wrap; }
.vcom_listitem div[rel=title]   { flex-grow: 1; min-width: 4em; }

.vcom_listhead {
    font-weight: bold;
    background-color: #f0f0f0 !important;
}


tr.listhead {
    background-color: #40a0e0;
    color: #ffffff;
}

tr.list {
    background-color: #f8f8f8;
}

.vcom_filedrop > div {
    padding: 20px;
    text-align:center;
    border: 2px dashed #d0d0d0;
    position: relative;
}

.vcom_disclaimer {
    margin-bottom: 24px;
}


.vcom_filedrop .progress {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 0%;
    height: 100%;
    background-color:#40a0e0;
    z-index: -1;
}

.vcom_filedrop .dragTargetHover {
    background-color: #f0f0f0;
}


@media only screen and (max-width: 810px) {
    div.vcom_mgmt_container {
        width: auto;
        margin-left: 1rem;
        margin-right: 1rem;
    }
        
    div.vcom_listitem div[rel=created] {
        display: none;
    }
    
    div.vcom_listitem div[rel=link] {
        display: none;
    }
    div.vcom_listitem div[rel=ready] {
        display: none;
    }
 
    div.mobile-hidden { display: none; }
}