body {
/*
	background-color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.0em;
	border:0.0em;
	margin:0.0em;*/
    font-size: 14px;
    /*background-color: white !important;*/
    background-color: #fefefe !important;
}

body, html, div  {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: #0000FF; letter-spacing:0.07em;}
a:visited { text-decoration: none; color: #0000FF; }
a:hover {
	text-decoration: none;
	color: #C60;
	cursor:pointer;
}
a.black { color: #000000; font-weight:normal; }

.content {
  padding: 20px;
  font-size: 14px;
}

.page {
  /*background-color: #ffffff;*/
}

h1 {
  font-family: 'Inter', sans-serif;
  font-weight: normal;
  font-size: 40px;
}

h2 {
  font-family:'Inter', sans-serif;
  font-weight: normal;
  font-size: 28px;
}

h3 {
  font-family: 'Inter', sans-serif;
  font-weight: normal;
  font-size: 22px;
}



/**************************************************************************/
/*  */

#flash {
font-size:120%;
font-weight:bolder;
margin:0pt auto 0.5em;
width:680px;
}
#flash div {
padding:5px 15px 15px 55px;
}
#flash .ok {
background:#EEEEFF url(/core/images/ok.png) no-repeat scroll left center;
border:1px solid #CCCCEE;
}
#flash .warning {
background:#FF9999 url(/core/images/error.png) no-repeat scroll left center;
border:1px solid #FF3333;
}
#flash .alert {
background:#FFFF99 url(/core/images/info.png) no-repeat scroll left center;
border:1px solid #FFFF00;
}

/**************************************************************************/
/*  */
/**************************************************************************/

.toolbar-main {
    background-color: transparent;
    border: 0px;
    background: -moz-linear-gradient(top,  rgba(233,243,255,1) 0%, rgba(136,185,234,0.92) 50%, rgba(119,168,226,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(233,243,255,1)), color-stop(50%,rgba(136,185,234,0.92)), color-stop(100%,rgba(119,168,226,0)));
    background: -webkit-linear-gradient(top,  rgba(233,243,255,1) 0%,rgba(136,185,234,0.92) 50%,rgba(119,168,226,0) 100%);
    background: -o-linear-gradient(top,  rgba(233,243,255,1) 0%,rgba(136,185,234,0.92) 50%,rgba(119,168,226,0) 100%);
    background: -ms-linear-gradient(top,  rgba(233,243,255,1) 0%,rgba(136,185,234,0.92) 50%,rgba(119,168,226,0) 100%);
    background: linear-gradient(to bottom,  #fafafa 0%,#fafafa 50%,#fafafa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9f3ff', endColorstr='#0077a8e2',GradientType=0 );
}

.toolbar-main h3 {
  font-size: 20px;
  font-weight: normal;
  /*font-stretch: condensed;
  font-family: 'Varela Round', sans-serif;*/
  /*font-family: tahoma,arial,verdana,sans-serif;*/
  font-family: 'Inter', tahoma, arial, verdana, sans-serif;
}

.toolbar-main a {
  color: #666666;
}

.toolbar-main a:hover {
	color: #C60;
}

.x-menu-body .menu-heading {
    padding: 5px 5px 3px 5px;
    font-size: 16px;
    font-family: 'Inter', tahoma, arial, verdana, sans-serif;
}

.toolbar-main .x-box-menu-right {
    /*height: 32px;  */
}

.toolbar-main .x-btn-default-toolbar-large .x-btn-inner {
    font-size: 16px;
    font-family: 'Inter', tahoma, arial, verdana, sans-serif;
}

/*******************************************************************/

.loginmenu {
    padding: 5px 10px 5px 10px;
}

.loginmenu .x-panel-body-default {
    background: transparent;
}

/******************************************************************
 Menus
******************************************************************/

.toolbar-menu .x-menu-body {
    background-color: rgba(201, 213, 224, 0.92) !important;
}

.toolbar-menu .x-menu-body .x-menu-item-separator {
    background-color: #B3CBE0;
    border-top-width: 0px;
}

/******************************************************************
 Buttons
******************************************************************/

.toolbar-menu .x-btn-default-medium .x-btn-inner {
    font-size: 16px;
}

.toolbar-menu .icon-user {
    background-image: url('/core/images/toolbar/user.png');
}

/******************************************************************
 Images
******************************************************************/

.toolbar-menu .image-about-bisque {
    width: 200px;
    height: 56px;
    margin: 10px 10px 10px 10px;
    background-image: url('/core/images/bisque_logo_gray.svg');
    background-repeat: no-repeat;
    background-size: 200px;
    background-position: 0px 0px;
}

.toolbar-main .main-logo {
    width: 90px;
    height: 25px;
    margin: 0px 10px 0px 5px;
    background-image: url('/core/images/bisque_logo_gray.svg');
    background-repeat: no-repeat;
    background-size: 90px;
    background-position: 0px 0px;
    display: block;
}


/******************************************************************
 Icons
******************************************************************/

.toolbar-main .icon-help {
    width: 32px;
    background-image: url('/core/images/icons_toolbar.svg') !important;
    background-repeat: no-repeat;
    background-size: 160px;
    background-position: 0px -195px;
}

.toolbar-main .icon-user {
    width: 32px;
    background-image: url('/core/images/icons_toolbar.svg#icon_user') !important;
    background-repeat: no-repeat;
    background-size: 160px;
    background-position: 0px -162px;
}

.toolbar-main .icon-browse {
    width: 32px;
    background-image: url('/core/images/icons_toolbar.svg') !important;
    background-repeat: no-repeat;
    background-size: 160px;
    background-position: 0px -130px;
}

.toolbar-main .icon-export {
    width: 32px;
    background-image: url('/core/images/icons_toolbar.svg') !important;
    background-repeat: no-repeat;
    background-size: 160px;
    background-position: 0px -65px;
}

.toolbar-main .icon-import {
    width: 32px;
    background-image: url('/core/images/icons_toolbar.svg') !important;
    background-repeat: no-repeat;
    background-size: 160px;
    background-position: 0px -33px;
}

.toolbar-main .icon-analysis {
    width: 32px;
    background-image: url('/core/images/icons_toolbar.svg') !important;
    background-repeat: no-repeat;
    background-size: 160px;
    background-position: 0px -98px;
}

.toolbar-main .icon-create {
    width: 32px;
    background-image: url('/core/images/icons_toolbar.svg');
    background-repeat: no-repeat;
    background-size: 160px;
    background-position: 0px -1px;
}

.toolbar-menu img {
    background-size: 16px;
}

.toolbar-menu .icon-import {
    background-image: url('/core/images/toolbar/upload.png') !important;
}

.toolbar-menu .icon-export {
    background-image: url('/core/images/toolbar/download.png') !important;
}

.toolbar-menu .bq-help-video {
	width: 290px;
	height: 240px;
	margin: 10px 0px 10px 0px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.toolbar-menu .bq-help-video iframe {
    width: 100%;
    height: 100%;
}

/* search bar */

.toolbar-main .search_field input {
    padding: 4px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    height: 26px;
    background: rgb(211, 225, 241);
}

.toolbar-main .search_field input:hover {
    -webkit-transition: border-color 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
    -moz-transition: border-color 0.3s ease-out, -moz-box-shadow 0.3s ease-out;
    -o-transition: border-color 0.3s ease-out, -o-box-shadow 0.3s ease-out;
    transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;
    border-color: #0099FF;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
    box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
}

/* CLean cache icon */
.icon-clean-cache {
    width: 24px;
    background-image: url('/core/images/data-cleaning.png') !important;
    background-repeat: no-repeat;
    background-size: 20px;
}

.msg .x-box-mc {
    font-size: 12px;
}

#messagepopup {
    position:absolute;
    left:35%;
    top:45px;
    width:300px;
    z-index:20000;
}

#messagepopup .msg {
    border-radius: 8px;
    -moz-border-radius: 8px;
    background: #F6F6F6;
    border: 2px solid #ccc;
    margin-top: 2px;
    padding: 10px 15px;
    color: #555;
}

#messagepopup .msg h3 {
    margin: 0 0 8px;
    font-weight: bold;
    font-size: 15px;
}

#messagepopup .msg p {
    margin: 0;
    overflow: auto;
    font-size: 12px;
}

#messagepopup .msg img {
    float: right;
    width: 20px;
    opacity: 0.7;
}

#messagepopup .warning {
    width: 450px;
    font-size: 18px;
    background: #FFFF99;
    color: #CC0000;
    border-color: #CC0000;
}

#messagepopup .warning h3 {
    font-size: 20px;
}

#messagepopup .error {
    width: 450px;
    font-size: 18px;
    background: #CC0000;
    color: #FFFFFF !important;
    border-color: #000000 !important;
}

#messagepopup .error h3 {
    font-size: 20px;
}

#messagepopup .notification {
    width: 450px;
    font-size: 18px;
    background: #FFFF99;
    color: #006633;
    border-color: #006633;
}

#messagepopup .notification h3 {
    font-size: 20px;
}

.highlight {
    background-color: rgba(255,255,255,0.6);
    border-width: 0px;
    padding: 10px;
    text-align:center;
}

.highlight .x-tip-anchor-top {
    border-bottom-color: rgba(255,255,255,0.6);
}

.highlight h3 {
    color: #000000;
    font-size: 2em;
}


.bq-prompt .x-window-body {
    padding: 10px;
}



.bq-highlight {
    background-color: rgba(255,210,50,0.6);
    border-width: 0px;
    padding: 10px;
    text-align:center;
}

.bq-highlight .x-tip-anchor-top {
    border-bottom-color: rgba(255,210,50,0.6);
}

.bq-highlight .x-tip-anchor-bottom {
    border-top-color: rgba(255,210,50,0.6);
}

.bq-highlight .x-tip-anchor-left {
    border-right-color: rgba(255,210,50,0.6);
}

.bq-highlight .x-tip-anchor-right {
    border-left-color: rgba(255,210,50,0.6);
}

.bq-highlight h3 {
    color: #000000;
    font-size: 2em;
}

.bq-highlight p {
    margin: 0.5em 0px 0px 0px;
    color: #000000;
    font-size: 16px;
    font-family: 'Inter', tahoma, arial, verdana, sans-serif;
}


/* CSS settings for resource container */
.resource-view-over {
    /*-moz-box-shadow: 1px 1px 6px 2px #999;
    -webkit-box-shadow: 1px 1px 6px 2px #999;
    box-shadow: 1px 1px 6px 2px #999;*/
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
    box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
}

.resource-view-selected {
    -moz-box-shadow: 0px 0px 8px 3px hsl(210, 75%, 70%) !important;
    -webkit-box-shadow: 0px 0px 8px 3px hsl(210, 75%, 70%) !important;
    box-shadow: 0px 0px 8px 3px hsl(210, 75%, 70%) !important;
}

.imageCenterHoz {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.gridCellIcon {
    display: table-cell;
    vertical-align: middle;
    height: 40px
}

.background-transparent {
    background: transparent;
}

.browser {
    width: 100% !important;
    height: 100% !important;
}

.browser-main {
    background: white;
    width: 100% !important;
    height: 100% !important;
}

.browser .x-toolbar {
    width: 100% !important;
}

.browser_toolbar_menu {
    z-index: 2147483648 !important;
}

.organizer-tabs {
    margin: 4px 0px 4px 4px;
    padding: 0px;
    border-color: transparent;
    background-color: transparent;
}

.organizer-filter {
    margin: 4px;
}

.alignLeft {
    float: left;
    margin: 0;
    padding: 0;
}

.alignRightTag {
    float: right;
    margin: 0;
    padding: 0px 5px 0px 0px;
    color: #99E;
}

.alignRightGobject {
    float: right;
    margin: 0;
    padding: 0px 5px 0px 0px;
    color: #9C9;
}

/* ResourceLayout settings: */

.bq_resource {
    background-color: #eeeeee;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.bq_resource .mex_status {
    padding-top: 0px;
    padding-left: 5px;
}

.bq_resource .mex_status.FINISHED {
    color: green;
}

.bq_resource .mex_status.FAILED {
    color: red;
}

.bq_resource .date {
    padding-top: 10px;
    padding-left: 5px;
}

.bq_resource .title {
    color: #555;
    font-size: 14px;
    font-family: Inter, arial, verdana, sans-serif !important;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bq_resource .thumbnail {
    background-image: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 0px 0px;
    width : 30px;
    height : 30px;
    padding: 0px 0px 0px 0px;
}

/* ResourceLayout settings: */
.ImageCompact {
    margin: 15px;
    padding: 0px;
    padding-top: 5px;
    width: 160px;
    height: 160px;
    border: solid 0px #F00 !important;	/* FBFBFB */
    position: relative;

    background-color: #eeeeee;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.ImageCompact .thumbnail {
    background-size: 35px;
    background-position: 0px 0px;
    width : 35px;
    height : 35px;
}

.ImageCard {
    margin: 10px;
    padding: 2px;
    width: 270px;
    height: 310px;
    background-color: #F9F9F9;
    border: solid 4px #E0E0E0 !important;
}

.ImageFull {
    margin: 10px;
    padding: 5px;
    height: 280px;
    width: 99%;
    background-color: #F9F9F9;
    border: solid 1px #EEE !important;
}

.ResourceList {
    margin: 4px;
    height: 34px;
    width: 98%;
    background-color: #EEEEEE;
    border: solid 0px #E0E0E0 !important;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -moz-box-shadow: 0px 0px 5px #ffcccc;
}

.ResourceList.LightShadow {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ResourceIconList {
    margin: 4px;
    height: 90px;
    width: 98%;
    background-color: #eeeeee;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 0px !important;
}

.ResourceIconList.LightShadow {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bq_browser_grid .thumbnail {
    background-image: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 0px 0px;
    width : 30px;
    height : 30px;
    padding: 0px 0px 0px 0px;
}

.LightShadow {
    /*-moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
    box-shadow: 1px 1px 5px #999;*/
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.Res-ImgMed {
    border: 3px solid #000;
    padding: 3px;
    height: 175px;
    background-color: #fff;
    width: 210px;
}

.LoadingMask {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
}

.TagStyle {
    font-size: 110%;
    font-weight: bold;
}

.Org-Tools {
    float: right;
    font-weight: normal;
    margin-left: 6px;
}

.Org-Header {
    cursor: move;
}

.Browser-Panel {
    overflow-y: auto;
}

.DS-Tbar {
    border-color: #b9bfc3;
    background-color: #E1E1E8;
    background-image: url("/core/js/ResourceBrowser/Images/blank.gif");
}

.DS-Tbar-HLite {
    background-color: #E8F1FA;
}

/*
 dima: Global mask style is defined and overriden in bisquik_extjs_fixes in js and css, no specific changes are needed
 */

/* fix for overwritten x-mask style */
/*
 .x-masked>.x-mask {
 opacity: 0.6;
 background-color: #F0F0F0;
 }
 */
/*
 .x-mask {
 z-index: 100;
 position: absolute;
 top: 0;
 left: 0;
 }

 .x-mask-msg {
 z-index: 20001;
 position: absolute;
 top: 0;
 left: 0;
 padding: 0px;
 border: 0px;
 background-image: none;
 background-color: #f0f0f0;
 }

 .x-mask-msg div {
 width: 16px;
 height: 16px;
 padding: 0px;
 background-image: url('/core/js/ResourceBrowser/Images/loading.gif');
 background-repeat: no-repeat;
 opacity: 1;
 background-position: 0px center;
 cursor: wait;
 border: 0px;
 background-color: #f0f0f0;
 }
 */

/* Align certain buttons left */
.button-alignleft .x-btn-text {
    text-align: left;
}

/* Customized resourceQueue slider */

/* dima: extjs 4.1 version */
/*
.sliderBackground .x-slider-horz, .sliderBackground .x-slider-horz .x-slider-end, .sliderBackground .x-slider-horz .x-slider-inner {
    background-image: url('/core/js/ResourceBrowser/Images/res-slider-bg.png') !important;
}

.sliderLeftButton .x-slider-horz {
    padding-left: 12px;
    background: transparent no-repeat 0 -61px;
}

.sliderRightButton .x-slider-horz .x-slider-end {
    margin-right: -5px;
    background: transparent no-repeat right -61px;
}

.sliderBothButtons .x-slider-horz .x-slider-end {
    margin-right: -10px;
    background: transparent no-repeat right -61px;
}

.sliderBothButtons .x-slider-horz {
    padding-left: 12px;
    background: transparent no-repeat 0 -61px;
}
/* End: extjs 4.1 version */

/* dima: extjs 4.2.1+ version */
.sliderBackground .x-slider-horz,.sliderBackground .x-slider-horz .x-slider-end,.sliderBackground .x-slider-horz .x-slider-inner {
    /*z-index : -1;*/
    background-image:url('/core/js/ResourceBrowser/Images/res-slider-bg.png') !important;
}

.sliderLeftButton .x-slider-horz {
    padding-left:12px;
    background:transparent no-repeat 0 -62px;
}

.sliderRightButton .x-slider-horz .x-slider-end {
    margin-right:-5px;
    background:transparent no-repeat right -62px;
}

.sliderBothButtons .x-slider-horz .x-slider-end {
    margin-right:-10px;
    background:transparent no-repeat right -62px;
}

.sliderBothButtons .x-slider-horz {
    padding-left:12px;
    background:transparent no-repeat 0 -62px;
}

/* End: extjs 4.2.1+ version */

.fieldSet {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.lblModuleName {
    color: #555;
    font-size: 14px;
    font-family: 'Inter', arial, verdana, sans-serif !important;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact .lblModuleName {
    padding: 5px;
}

.icon-list .lblModuleName {
    padding: 0px 0px 1px 3px;
    text-shadow: none;
    font-weight: normal;
    font-size: 18px;
    font-family: 'Inter', tahoma, arial, verdana, sans-serif !important;
}

.lblModuleOwner {
    color: #4B85BF;
    text-shadow: 0px 1px 1px #DDD;
    font-size: 11px;
    font-family: Inter, arial, verdana, sans-serif !important;
    padding: 5px;
}

.compact .lblModuleOwner {
    padding: 0px 0px 0px 5px;
}

.icon-list .lblModuleOwner {
    padding: 0px 0px 0px 3px;
}

.lblModuleOwnerFin {
    color: #07AD0C !important;
    text-shadow: 0px 1px 1px #DDD;
    font-size: 11px;
    font-family: 'Inter', arial, verdana, sans-serif !important;
}

.lblModuleOwnerFail {
    color: #BF1B1B !important;
    text-shadow: 0px 1px 1px #DDD;
    font-size: 11px;
    font-family: 'Inter', arial, verdana, sans-serif !important;
}

.rbFontFamily .lblModuleName .lblModuleOwner {
    font-family: 'Inter', arial, verdana, sans-serif !important;
}

.lblModuleDate {
    padding: 8px 8px 8px 5px;
    color: #444;
    font-size: 11px;
    text-align: right;
}

.lblBig {
    color: #BABABA;
    font-size: 36px;
    font-family: 'Inter', arial, verdana, sans-serif !important;
}

.compact .lblModuleDate {
    padding: 8px 8px 8px 5px;
}

.list .lblModuleDate {
    padding: 0px 0px 0px 8px;
    font-family: 'Inter', arial, verdana, sans-serif !important;
}

.lblHeading1 {
    color: #555;
    background: #f4f4f4;
    text-shadow: 1px 1px 1px #CCC;
    font-weight: bold;
    font-family: 'Inter', arial, verdana, sans-serif !important;
    word-wrap: break-word;
    padding: 3px;
}

.lblHeading2 {
    color: #07AD0C;
    background: #f4f4f4;
    text-shadow: 1px 1px 1px #CCC;
    font-family: 'Inter', arial, verdana, sans-serif !important;
    word-wrap: break-word;
    padding: 3px;
}

.lblContent {
    padding: 5px;
    word-wrap: break-word;
}

.textOnImage {
    color: #FFF;
    position: absolute;
    text-shadow: 1px 1px 3px rgba(0,0,0,1);
    margin-top: 137px;
    font-size: 10px;
    background-color: rgba(10,10,10,.05);
    font-weight: bold;
    text-align: center;
    z-index: 1;
}

.labelOnImage {
    color: #FFF;
    position: absolute;
    text-shadow: 1px 1px 3px rgba(0,0,0,1);
    margin-top: 15px;
    padding: 2px 5px 5px 7px;
    font-size: 13px;
    background-color: rgba(10,10,10,.3);
    font-weight: bold;
    z-index: 1;
}

.smallLabelOnImage {
    font-size: 9px;
}

.white {
    background-color: #FFF;
}

.align {
    vertical-align: middle;
}

.icon-lightning {
    background-image: url('/core/js/ResourceBrowser/Images/lightning.png') !important;
}

.icon-cog {
    background-image: url('/core/js/ResourceBrowser/Images/cog.png') !important;
}

.icon-eye {
    background-image: url('/core/js/ResourceBrowser/Images/eye.png') !important;
}

.icon-eye-close {
    background-image: url('/core/js/ResourceBrowser/Images/eye-close.png') !important;
}

.icon-group {
    background-image: url('/core/js/ResourceBrowser/Images/group.png') !important;
}

.icon-owner {
    background-image: url('/core/js/ResourceBrowser/Images/owner.png') !important;
}

.icon-download-small {
    background-image: url('/core/js/ResourceBrowser/Images/download-small.png') !important;
}

.x-grid-checkheader {
    height: 14px;
    background-image: url('/core/js/ResourceBrowser/Images/unchecked.gif');
    background-position: 50% -2px;
    background-repeat: no-repeat;
    background-color: transparent;
}

.x-grid-checkheader-checked {
    background-image: url('/core/js/ResourceBrowser/Images/checked.gif');
}

.x-grid-checkheader-editor .x-form-cb-wrap {
    text-align: center;
}

.heading {
    font-size: 14px !important;
}

.heading .x-btn-inner {
    font-size: 14px !important;
}


.bq-btn-edit .x-btn-inner {
    font-weight: bold;
    color: #666666;
}

.bq-btn-edit.active .x-btn-inner {
    color: #009900;
}

.mex_preview {
    margin: 10px;
}

.mex_preview h2 {
    margin: 0px 0px 4px 0px;
}

.mex_preview h3 {
    margin: 4px 0px 2px 0px;
}

.mex_preview p {
    margin: 2px 0px 2px 5px;
}

/*****************************************************************
  Browser grid
*****************************************************************/

.bq_browser_grid .bq_sorted .x-column-header-text {
    font-weight: bold;
    color: #666666;
}

.bq_browser_grid .sorted_asc .x-column-header-text {
    font-weight: bold;
    color: #666666;
}

.bq_browser_grid .sorted_desc .x-column-header-text {
    font-weight: bold;
    color: #666666;
}

/*****************************************************************
  Resource renderers
  .ImageCompact
*****************************************************************/


.resicon {
    position: relative;
    background-position: 0px 0px;
    background-size: 160px;
    background-repeat: no-repeat;
    background-color: transparent;

    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 10px;
    border: 0px !important;
}

.resicon.ImageCard, .resicon.ImageFull {
    background-size: 270px;
    padding: 30px;
}

.resicon.gridIcon {
    width: 42px;
    height: 40px;
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    margin-left: 0px;
}

.resicon .format {
    font-size: 16px;
    text-overflow: ellipsis;
}

.resicon .lblHeading1 {
    margin-top: 40px;
    background: transparent;
    font-weight: 400;
    font-size: 14px;
    text-shadow: none;
    max-height: 40px;
    overflow: hidden;
}

.resicon .lblHeading1>span>div {
    display: inline;
    text-overflow: ellipsis;
    height: 1em;
}

.resicon.ImageCard .lblHeading1, .resicon.ImageFull .lblHeading1  {
    margin-top: 60px;
}

.resicon .lblHeading2 {
    visibility: hidden;
    height: 0px;
}

.ImageCompact .status_icon {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 10px;
    left: 10px;

    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: 30px 30px;
}

.ImageCompact .status_icon.started {
    background-position: -100px -163px;
}

.ImageCompact .status_icon.finished {
    background-position: -134px -163px;
}

.ImageCompact .status_icon.validated {
    background-position: -165px -163px;
}

/* store */

.resicon.store {
    background-image: url('/core/js/ResourceBrowser/Images/store_512.png');
    background-position: 15px 0px;
    background-size: 130px;
}

.resicon.store.ImageCard, .resicon.store.ImageFull {
}

.resicon.gridIcon.store {
    background-image: url('/core/js/ResourceBrowser/Images/store.png');
    background-size: 40px;
}

.resicon.store .lblHeading1 {
    margin-top: 115px;
    font-size: 16px;
    text-align: center;
    color: #666666;
}

.resicon.store.ImageCard .lblHeading1, .resicon.store.ImageFull .lblHeading1  {
    margin-top: 110px;
}

/* folder */

.resicon.folder {
    background-image: url('/core/js/ResourceBrowser/Images/folder.svg');
    background-position: 0px 10px;
    background-size: 185px;
}

.resicon.folder.ImageCard, .resicon.folder.ImageFull {
    background-size: 300px;
}

.resicon.gridIcon.folder {
    background-image: url('/core/js/ResourceBrowser/Images/folder.svg');
    background-size: 45px;
    background-position: 0px 0px;
}

/* file */

.file {
    background-image: url('/core/js/ResourceBrowser/Images/file.svg');
    background-position: 10px 40px;
    background-size: 230px;
    background-repeat: no-repeat;
}

.file .x-panel {
    opacity: 0.8;
}

.resicon.file {
    background-image: url('/core/js/ResourceBrowser/Images/file.svg');
    background-position: 0px 0px;
    background-size: 160px;
    /*padding: 15px 20px 10px 20px;*/
}

.resicon.file.ImageCard, .resicon.file.ImageFull {
    /*background-size: 270px;*/
}

.resicon.gridIcon.file {
    background-image: url('/core/js/ResourceBrowser/Images/file.svg');
    background-size: 35px;
    background-position: 2px 3px;
}

.resicon.file .lblHeading1 {
    margin-top: 20px;
    background: transparent;
    font-weight: 400;
    font-size: 14px;
    text-shadow: none;
    max-height: 50px;
    overflow: hidden;
}

.resicon.file.ImageCard .lblHeading1, .resicon.file.ImageFull .lblHeading1  {
    margin-top: 60px;
}

/*****************************************************************
  .icon-list
*****************************************************************/

.icon-list.mex .thumbnail {
    background-image: none;
    width : 65px;
    height : 65px;
    padding: 0px 0px 0px 4px;
    top: 10px !important;
}

.ResourceIconList.disabled {
    opacity: 0.5;
}

/*****************************************************************
  module
*****************************************************************/

.resicon.module {
    /*background-image: url('icons.svg');*/
    background-position: center top;
    background-size: 100px;
    background-repeat: no-repeat;
}

.resicon.module.ImageCard, .resicon.module.ImageFull {
    /*background-size: 270px;*/
}

.resicon.gridIcon.module {
    /*background-image: url('icons.svg');*/
    background-size: 35px;
    background-position: 2px 3px;
}

.resicon.module .lblHeading1 {
    margin-top: 95px;
    background: transparent;
    font-weight: 400;
    font-size: 14px;
    text-shadow: none;
    max-height: 50px;
    overflow: hidden;
    text-align: center;
}

.resicon.module .lblHeading2, .resicon.module .lblContent {
    display: none;
}

.resicon.module.ImageCard .lblHeading1, .resicon.module.ImageFull .lblHeading1  {
    margin-top: 60px;
}

/*****************************************************************
  module organizer
*****************************************************************/

.browser-main .organizer-modules {
    margin: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #eeeeee;
}

/*****************************************************************
  annotator
*****************************************************************/

.bq-annotator {
    padding: 5px;
}

.bq-annotator .bq_resource_page {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #bbbbbb;
}
/* CSS settings for resource tagger */
.tab-arrow {
    width: 11px !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
}

.tab-add {
    width: 24px !important;
}

.icon-tag {
    background-image: url('/core/js/ResourceTagger/Images/text.png') !important;
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

.icon-gobject {
    background-image: url('/core/js/ResourceTagger/Images/pencil.png') !important;
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

.icon-tab-add {
    background-image: url('/core/js/ResourceTagger/Images/add.png') !important;
    left: -6px !important;
}

.icon-arrow {
    background-image: url('/core/js/ResourceTagger/Images/arrow.png') !important;
    left: -12px !important;
    opacity: 1 !important;
}

.icon-folder {
    background-image: url('/core/js/ResourceTagger/Images/folder.png') !important;
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

.icon-add-folder {
    background-image: url('/core/js/ResourceTagger/Images/add_folder.png') !important;
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

.icon-trash {
    background-image: url('/core/js/ResourceTagger/Images/trash.png') !important;
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

.icon-color-picker {
    background-image: url('/core/js/ResourceTagger/Images/color_picker.png') !important;
    background-size: 20px 20px;
    background-repeat: no-repeat;
}

.icon-stats {
    background-image: url('/core/js/ResourceTagger/Images/stats.png') !important;
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

.icon-file {
    background-image: url('/core/js/ResourceTagger/Images/file.png') !important;
}

.icon-grid {
    background-image: url('/core/js/ResourceTagger/Images/grid.png') !important;
}

.icon-add {
    background-image: url('/core/js/ResourceTagger/Images/add.png') !important;
}

.icon-delete {
    background-image: url('/core/js/ResourceTagger/Images/delete.gif') !important;
}

.icon-refresh {
    background-image: url('/core/js/ResourceTagger/Images/refresh.png') !important;
}

.icon-save {
    background-image: url('/core/js/ResourceTagger/Images/save.png') !important;
}

.icon-check {
    background-image: url('/core/js/ResourceTagger/Images/check.png') !important;
}

.icon-uncheck {
    background-image: url('/core/js/ResourceTagger/Images/uncheck.png') !important;
}

.icon-import {
    background-image: url('/core/js/ResourceTagger/Images/import.png') !important;
}

.icon-export {
    background-image: url('/core/js/ResourceTagger/Images/export.png') !important;
}

.icon-add-large {
    background-image: url('/core/js/ResourceTagger/Images/add.png') !important;
}

.icon-delete-large {
    background-image: url('/core/js/ResourceTagger/Images/delete.gif') !important;
}

.icon-save-large {
    background-image: url('/core/js/ResourceTagger/Images/save.png') !important;
}

.editGrid {
    color: #444;
    font-size: 11px;
}

.x-grid-row-checker {
    margin-left: 5px;
    margin-top: 2px;
}

/* This is to block the tag name validation message box, since there's no way to configure this
 */
.x-grid-row-editor-errors {
    display: none;
}

.bq-row-gob-custom {
    color: #00AA00;
}

.bq_tagger_progress {
    text-align: right;
    padding: 0px 20px 0px 0px !important;
}

.bq_inprogress {
    background-image: url('/core/images/progress_circles.gif') !important;
    background-size: 15px 15px;
    background-position: right center;
    background-repeat: no-repeat;
}

.bq-gob-tagger .x-grid-tree-loading .x-tree-elbow-img {
    background-image: url('/core/images/progress_circles.gif') !important;
    background-size: 12px 12px;
    background-position: left center;
    background-repeat: no-repeat;
}

.bq-gob-tagger .icon-navigate {
    background-image: url('/core/js/ResourceTagger/Images/compass.png') !important;
    background-size: 15px 15px;
    background-position: left center;
    background-repeat: no-repeat;
}

.bq-gob-tagger .icon-select {
    background-image: url('/core/js/ResourceTagger/Images/select.png') !important;
    background-size: 15px 15px;
    background-position: left center;
    background-repeat: no-repeat;
}

.bq-gob-tagger .x-btn-toolbar .x-btn-inner {
    padding-left: 20px !important;
}

/* CSS settings for dataset browser */
.icon-select {
    background-image: url('/core/js/DatasetBrowser/Images/accept.png') !important;
}

.icon-cancel {
    background-image: url('/core/js/DatasetBrowser/Images/cancel.png') !important;
}

.icon-select24 {
    background-image: url('/core/js/DatasetBrowser/Images/accept24.png') !important;
}

.icon-cancel24 {
    background-image: url('/core/js/DatasetBrowser/Images/cancel24.png') !important;
}

/*******************************************************************************

  Styles for BQ.share.Dialog.js

  Author: Dima Fedorov

  Version: 1

  History:
    2014-05-02 13:57:30 - first creation

*******************************************************************************/

.bq-share-dialog {
    padding: 0px 10px 10px 10px;
    background-color: #ffffff;
}

.bq-share-panel h2 {
    margin: 20px 0px 12px 0px;
}

.bq-share-panel p {
    margin: 5px 0px 8px 0px;
}

.bq-share-bar {
    margin: 5px 0px 10px 0px;
}

.bq-share-bar .x-btn {
    margin-left: 5px;
}

.bq-visibility-bar {
}

.bq-visibility-bar h3 {
    margin-top: 12px;
    margin-right: 10px;
}

.bq-visibility-bar p {
    margin: 2px 0px 5px 10px;
}


.bq-button-visibility {
    padding: 4px 8px 4px 8px;
}

.bq-button-visibility .x-btn-inner {
    font-weight: bold;
}

.published .x-btn-inner {
    color: #008000;
}

.bq-icon-visibility {
    background-image: url('/core/js/Share/images/lock.png');
    background-size: 64px 32px;
    background-repeat: no-repeat;
}

.published .bq-icon-visibility {
    background-position: -32px 0px;
}

.x-btn-default-toolbar-medium .bq-icon-visibility {
    background-image: url('/core/js/Share/images/lock.png');
    background-size: 46px 24px;
    background-repeat:no-repeat;
}

.x-btn-default-toolbar-medium.published .bq-icon-visibility {
    background-position: -23px 0px;
}

.bq-btn-highlight .x-btn-inner {
    font-weight: bold;
}

.bq-share-panel .bq-user-picker {
    margin: 0px 5px 0px 5px;
}

.bq-share-panel .bq-user-picker input.x-form-field {
    padding-left: 6px;
    font-size: 14px;
    border: solid 1px #bbbbbb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 28px;
    margin-top: 2px;
}

.bq-share-bar .x-form-type-checkbox {
    margin: 0px 5px 0px 0px !important;
}

.bq-share-panel .bq-user-picker input[type=text]:hover {
    -webkit-transition: border-color 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
    -moz-transition: border-color 0.3s ease-out, -moz-box-shadow 0.3s ease-out;
    -o-transition: border-color 0.3s ease-out, -o-box-shadow 0.3s ease-out;
    transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;
    border-color: #0099FF;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
    box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
}

.bq-share-panel .users {
    border: solid 1px #bbbbbb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.bq-share-panel .users .x-grid-header-ct, .bq-share-panel .users .x-grid-header-ct {
    border: solid 0px #bbbbbb;
}

.bq-share-panel .bq_row {
    height: 32px;
    font-size: 16px;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
}

.bq-share-panel .bq_row .x-grid-cell-inner, .bq-share-panel .bq_row .x-column-header-inner {
    height: 32px;
    padding-top: 10px;
}

.bq-share-panel .bq_row .x-grid-cell-inner-action-col {
    padding: 0px;
    margin-top: 4px;
}

.bq-share-panel .icon_add .x-grid-cell-inner {
    margin: 4px 10px 1px 10px;
    height: 27px;
    background-image: url(/core/images/icons_toolbar.svg);
    background-repeat: no-repeat;
    background-size: 140px;
    background-position: 15px 0px;
    cursor: pointer;
}

.bq-share-panel .icon_number {
    background-image: none;
    font-size: 18px;
    font-weight: 300;
    cursor: pointer;
}

.bq-share-panel .icon_sharing {
    background-image: none;
    font-size: 18px;
    font-weight: 300;
    cursor: pointer;
    color: #AAAA00;
}

.bq-share-panel .icon_remove {
    width: 27px;
    height: 27px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(/core/images/viewer/icons_viewer.svg);
    background-size: 180px;
    background-position: -90px -58px;
}

.bq-share-panel .permission {
    cursor: pointer;
}

.bq_settings_panel {
    margin-top: 10px;
}

.bq_cache_manager {
    padding: 10px;
}

.bq_preferences_manager {
    padding: 10px;
}

.bq_preferences_manager .x-btn {
    margin: 6px;
}

.bq_preferences_manager .icon-upload {
    width: 32px;
    background-image: url(/core/images/icons_toolbar.svg) !important;
    background-repeat: no-repeat;
    background-size: 160px;
    background-position: 0px -33px;
}

.bq_preferences_manager .icon-download {
    width: 32px;
    background-image: url(/core/images/icons_toolbar.svg) !important;
    background-repeat: no-repeat;
    background-size: 160px;
    background-position: 0px -65px;
}

.bq_preferences_manager .icon-reset {
    width: 32px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: 1px -261px;
}

.bq_users_manager .search_field input {
    padding: 4px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    height: 26px;
    background: rgb(211, 225, 241);
    margin-right: 10px;
}

.bq_users_manager .search_field input:hover {
    -webkit-transition: border-color 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
    -moz-transition: border-color 0.3s ease-out, -moz-box-shadow 0.3s ease-out;
    -o-transition: border-color 0.3s ease-out, -o-box-shadow 0.3s ease-out;
    transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;
    border-color: #0099FF;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
    box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
}

.bq_users_manager .icon {
    width: 32px;
    height: 32px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: 0px 0px;
}

.bq_users_manager .icon.user {
    background-image: url('/core/images/icons_toolbar.svg#icon_user') !important;
    background-size: 160px;
    background-position: 0px -162px;
}

.bq_users_manager .icon.add {
    background-image: url('/core/images/icons_toolbar.svg') !important;
    background-size: 160px;
    background-position: 0px -1px;
}

.bq_users_manager .icon.remove {
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: -100px -32px;
}

.bq_users_manager .icon.clear {
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: -100px -65px;
}

.bq_users_manager .icon.login {
    background-image: url('/core/images/icons_toolbar.svg#icon_user') !important;
    background-size: 160px;
    background-position: 0px -162px;
}

.bq_users_manager .icon.refresh {
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: -0px -262px;
}

.bq_notifications {
    margin: 10px !important;
}

.bq_notifications .button {
    margin: 5px !important;
}

.bq_notifications .block {
    margin-bottom: 10px !important;
}


/* Loggers */

.bq_loggers .bq_row {
    padding-top: 6px;
    height: 32px;
    font-size: 16px;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
}

.bq_loggers .notset {
    color: #666666;
}

.bq_loggers .debug {
    color: #0000aa;
}

.bq_loggers .info {
    color: #00aa00;
}

.bq_loggers .warning {
    color: #aaaa00;
}

.bq_loggers .error {
    color: #ff0000;
    border-color: #ededed #d0d0d0 #ededed #d0d0d0 !important;
}

.bq_loggers .icon.refresh {
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: -0px -262px;
}

.bq_loggers .search_field input {
    padding: 4px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    height: 26px;
    background: rgb(211, 225, 241);
    margin-right: 10px;
}

.bq_loggers .search_field input:hover {
    -webkit-transition: border-color 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
    -moz-transition: border-color 0.3s ease-out, -moz-box-shadow 0.3s ease-out;
    -o-transition: border-color 0.3s ease-out, -o-box-shadow 0.3s ease-out;
    transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;
    border-color: #0099FF;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
    box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
}

/* Logs */

.bq_logs .editor {
    font-family: monospace;
    white-space: pre;
    border: 0px;
    padding: 15px;
}

.bq_logs .icon.refresh {
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: -0px -262px;
}

/* Groups */

.bq_groups .bq_row {
    padding-top: 6px;
    height: 32px;
    font-size: 16px;
    font-weight: 300;
    font-family: 'Inter', sans-serif;
}

.bq_groups .notset {
    color: #666666;
}

.bq_groups .debug {
    color: #0000aa;
}

.bq_groups .info {
    color: #00aa00;
}

.bq_groups .warning {
    color: #aaaa00;
}

.bq_groups .error {
    color: #ff0000;
    border-color: #ededed #d0d0d0 #ededed #d0d0d0 !important;
}

.bq_groups .icon.refresh {
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: -0px -262px;
}

.bq_groups .search_field input {
    padding: 4px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    height: 26px;
    background: rgb(211, 225, 241);
    margin-right: 10px;
}

.bq_groups .search_field input:hover {
    -webkit-transition: border-color 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
    -moz-transition: border-color 0.3s ease-out, -moz-box-shadow 0.3s ease-out;
    -o-transition: border-color 0.3s ease-out, -o-box-shadow 0.3s ease-out;
    transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;
    border-color: #0099FF;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
    box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
}

.bq_groups .icon {
    width: 32px;
    height: 32px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: 0px 0px;
}

.bq_groups .icon.add {
    background-image: url('/core/images/icons_toolbar.svg') !important;
    background-size: 160px;
    background-position: 0px -1px;
}

.bq_groups .icon.remove {
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: -100px -32px;
}

.bq-picker-path {
    padding: 5px;
    background-color: #cccccc;
}

.bq-picker-path .prefix {
    cursor: pointer;
    margin: 0px 15px 0px 23px;
    padding: 4px 4px 2px 4px;
    font-size: 18px;
    font-weight: 500;
    font-family: Inter, arial, verdana, sans-serif;
    border-radius: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.bq-picker-path .prefix:hover {
    background-color: #FF9900;
    color: #000000;
}

.bq-picker-path .path {
    cursor: pointer;
    padding: 4px 3px 4px 0px;
    font-size: 14px;
    font-weight: 600;
    font-family: Inter, arial, verdana, sans-serif;
    border-radius: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.bq-picker-path .path:hover {
    background-color: #99bce8;
    color: #000000;
}

.bq-picker-path .path:after {
    padding-left: 3px;
    content: "/";
    color: #999999;
}

.bq-picker-path .stream .x-box-inner .x-box-target {
    left: auto;
    right: 0px;
    overflow: visible;
    height: 100%;
    width: auto !important;
    display: inline-block;
    min-width: 100%;
    white-space: nowrap;
}

.bq-picker-path .stream .x-box-inner .x-box-target>div {
    position: static !important;
    left: auto !important;
    right: auto !important;
    display: inline-block;
}


.icon-store {
    background-image: url('/core/js/tree/images/store.png') !important;
    background-size: 16px 16px;
    background-repeat: no-repeat;
}

.icon-folder {
    background-image: url('/core/js/tree/images/folder.svg') !important;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: -4px -2px;
    /*height: 32px;
    width: 32px;
    background-size: 44px;
    background-position: -4px -2px;*/
}

/*-------------------------------------------------------
  scrollbars
-------------------------------------------------------*/

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-track:hover {
    border-radius: 6px;
    background-color: rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb {
    /*background-color: transparent;*/
    /*-webkit-box-shadow: none;*/
    border-radius: 6px;
    background-color: rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb:hover {
    border-radius: 6px;
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);*/
    background-color: rgba(0,0,0,0.4);
}

/*-------------------------------------------------------
  organizer
-------------------------------------------------------*/

.organizer .btn-pressable {
    border-width: 0px;
    border-style: hidden;
    background-image: none;
    background-color: transparent;
}

.organizer .counts, .organizer .counts div {
    text-align: right !important;
    color: #666;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 11px;
    line-height: 13px;
    position: relative;
    padding-right: 5px;
}

.organizer .counts img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.organizer .negated {
    text-decoration: line-through;
    color: #990000;
}

/*.organizer .counts::before {
    content: "(";
}
.organizer .counts::after {
    content: ")";
}*/

.organizer .btn-pressable.x-btn-pressed {
    /*border-width: 1px;
    border-style: solid;*/
    background-image: none;
    background-color: #bccfe5;
}

.organizer .icon-tag-name .x-tree-icon-parent {
    background-image: url('/core/js/tree/images/organizer_icons.svg');
    background-repeat: no-repeat;
    background-size: 70px;
    background-position: 0px 2px;
}

.organizer .icon-tag-value .x-tree-icon {
    background-image: url('/core/js/tree/images/organizer_icons.svg');
    background-repeat: no-repeat;
    background-size: 70px;
    background-position: -18px 2px;
}

.organizer .icon-gob-type .x-tree-icon {
    background-image: url('/core/js/tree/images/organizer_icons.svg');
    background-repeat: no-repeat;
    background-size: 70px;
    background-position: 0px -16px;
}

.organizer .icon-gob-name .x-tree-icon {
    background-image: url('/core/js/tree/images/organizer_icons.svg');
    background-repeat: no-repeat;
    background-size: 70px;
    background-position: -18px -16px;
}

/* need to restore overriden loading icon by our specialized row icons */
.x-grid-tree-loading .x-tree-icon {
    background-image: url('/core/extjs/resources/ext-theme-classic/images/tree/loading.gif') !important;
    background-size: 16px 16px !important;
    background-position: 0 center !important;
}

.organizer .icon-tags {
    background-image: url('/core/js/tree/images/organizer_icons.svg');
    background-repeat: no-repeat;
    background-size: 100px;
    background-position: -0px -52px !important;
}

.organizer .icon-gobs {
    background-image: url('/core/js/tree/images/organizer_icons.svg');
    background-repeat: no-repeat;
    background-size: 100px;
    background-position: -26px -52px !important;
}

.organizer .icon-types {
    background-image: url('/core/js/tree/images/organizer_icons.svg');
    background-repeat: no-repeat;
    background-size: 100px;
    background-position: 0px -79px !important;
}

.organizer .icon-names {
    background-image: url('/core/js/tree/images/organizer_icons.svg');
    background-repeat: no-repeat;
    background-size: 100px;
    background-position: -26px -79px !important;
}

.organizer .icon-values {
    background-image: url('/core/js/tree/images/organizer_icons.svg');
    background-repeat: no-repeat;
    background-size: 100px;
    background-position: -52px -79px !important;
}


.organizer .icon-sorting {
    background-image: url('/core/js/tree/images/organizer_icons.svg');
    background-repeat: no-repeat;
    background-size: 100px;
    background-position: 0px -106px !important;
    width: 24px;
    height: 24px;
    margin-top: 4px;
}

.organizer .menu-heading {
    margin: 4px 0px 4px 0px;
    display: block;
}

.organizer .icon-sort {
    background-image: url('/core/js/tree/images/organizer_icons.svg');
    background-repeat: no-repeat;
    background-size: 75px;
    background-position: -20px -80px !important;
}

.organizer .DESC .icon-sort {
    background-position: -40px -80px !important;
}

.organizer .x-menu-item-unchecked .icon-sort {
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.organizer .sort_bar {
    background-color: #cccccc;
}

.organizer .sort_button {
    border-width: 0px;
    border-style: hidden;
    background-image: none;
    background-color: transparent;
}


.iconverter {

}

.iconverter .converterbuttons {
    padding: 20px 10px 10px 10px;
    border-top: solid 1px #aaaaaa;
}

.iconverter .service .x-panel-header-text {
    margin-left: 20px;
}

.iconverter .service .x-tool {
    right: 0px !important;
    left: auto !important;
}

.iconverter .service .checkbox {
    left: 0px !important;
    right: auto !important;
}

.iconverter .service .surface {
    padding: 5px;
}

.iconverter .service .surface label {
    margin-left: 10px;
}

.convert {
    margin-top: 15px;
}

.convert span {
    font-size: 16px !important;
    /*color: green !important;*/
}

.iconverter .service .checkbox img {
    background-image: url('/core/images/viewer/tool-checkbox.png');
    background-size: 15px 30px;
}


.iconverter .service .checkbox .x-tool-pin {
    background-position: 0 -15px;
}

.iconverter .service .checkbox .x-tool-unpin {
    background-position: 0 0;
}

.iconverter .service .x-form-color input[type="button"] {
    border: 1px solid #000000;
}
/*******************************************************************************
 viewer
*******************************************************************************/

.viewer {
  position: relative;
  top: 0;
  left: 0;
  background-color: #434343;
  overflow: hidden;

  /* NOTE: the size and width should be set dynamically when initialized */
  width: 0;
  height: 0;
}

.viewer img {
  margin: 0px;
  float: none;
}

.viewer .well, .viewer .surface {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  /* FIXME: let's apply this in GSV.js */
  cursor: grab;
  cursor: -moz-grab;
  _cursor: url(/panjos3/images/grab.cur);
}

.viewer .surface {
  z-index: 20;
  /* background: url(../gfx/center.gif) no-repeat center center; */
  _background: url(/panojs3/images/blank.gif) no-repeat center center; /* NOTE: required for IE to"see" the surface */
}

.viewer .well {
  overflow: visible; /*hidden*/
  z-index: 10;
}

.viewer .well .tile {
  border: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
}

/*******************************************************************************
 thumbnail
*******************************************************************************/

.viewer .thumbnail {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 130px;
  height: 130px;
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  vertical-align: middle;
  font-weight: bold;

  overflow: hidden;
  z-index: 30;

  border: 4px solid #000000;
  border-radius: 5px;
  -moz-border-radius: 5px;

  opacity:0.8;
  filter:alpha(opacity=80);
}

.viewer .thumbnail img {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 30;
  overflow: hidden;
}

.viewer .thumbnail_scale {
  position: absolute;
  bottom: -2px;
  left: 5px;
  margin: 0;
  padding: 0px;
  z-index: 45;
  color: #FFFFFF;
}

.viewer .thumbnail_roi {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0px;
  border: 2px solid #FF0000;
  z-index: 40;
}

.viewer .thumbnail_roi_preview {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0px;
  border: 2px solid #FFFF00;
  z-index: 39;
}

.viewer .thumbnail_surface {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 50;
  width: 100%;
  height: 100%;
}

/*******************************************************************************
 info
*******************************************************************************/
/*
.viewer .info {
  position: absolute;
  z-index: 25;
  width: 100%;
  text-align: center;
  left: 0px;
  padding: 5px;
  bottom: 0px;
  color: #FFFFFF;
  text-shadow: 1px 1px 1px #000000;
  font-size: 12px;
  text-overflow: ellipsis;
}
*/
.viewer .osd {
  position: absolute;
  z-index: 15;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0px;
  left: 0px;
  padding-top: 25px;
  color: #FFFFFF;
  text-shadow: 1px 1px 1px #000000;
  font-size: 50px;
  text-overflow: ellipsis;
}

/*******************************************************************************
 controls
*******************************************************************************/

.viewer .control {
    width: 32px;
    height: 32px;

    position: absolute;
    z-index: 30;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: -34px 0px;
    background-image: url('/core/panojs3/images/icons_viewer.svg');
    background-size: 200px;
}

.viewer .zoomIn {
    top: 10px;
    left: 10px;
    background-position: -34px 0px;
}

.viewer .zoomOut {
    top: 90px;
    left: 10px;
    background-position: -34px -31px;
}

.viewer .zoom11 {
    top: 50px;
    left: 10px;
    background-position: -34px -64px;
}

.viewer .maximize {
    top: 10px;
    right: 10px;
    background-position: -34px -162px;
}

/*
  Slider styles for BQ.slider.Slider

  Author: Dima Fedorov <dimin@dimin.net> <http://www.dimin.net/>
  Copyright (C) Center for BioImage Informatics <www.bioimage.ucsb.edu>
  GNU General Public License Usage

  History:
    2011-08-17 15:40:08 - first creation

  Ver: 1
*/

.slider {
    position:absolute;
    z-index: 30;
}

.tslider {
    right: 150px;
    bottom: 25px;
}

.zslider {
    right: 15px;
    bottom: 150px;
}

.slider .button {
    background-image: none;
    background-color: transparent;
    border: 0 none;
    padding: 0px;
}

.slider .button .x-btn-icon-el {
    background-image: url('/core/js/slider/images/icons_slider.svg');
    background-size: 100px;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 0 none;
    background-position: -35px 0px;
}

.slider .play .x-btn-icon-el {
    background-position: -35px 0px;
}

.slider .play-vertical .x-btn-icon-el {
    background-position: -35px -100px;
}

.slider .x-play-selected .x-btn-icon-el, .slider .x-btn-play-selected .x-btn-icon-el {
    background-position: -70px 0px;
}

.slider .x-play-vertical-selected .x-btn-icon-el, .slider .x-btn-play-vertical-selected .x-btn-icon-el {
    background-position: -70px -100px;
}

.slider .next .x-btn-icon-el {
    background-position: -35px -67px;
}

.slider .next-vertical .x-btn-icon-el {
    background-position: -35px -168px;
}

.slider .x-next-selected .x-btn-icon-el, .slider .x-btn-next-selected .x-btn-icon-el {
    background-position: -70px -67px;
}

.slider .x-next-vertical-selected .x-btn-icon-el, .slider .x-btn-next-vertical-selected .x-btn-icon-el {
    background-position: -70px -168px;
}

.slider .prev .x-btn-icon-el {
    background-position: -35px -33.5px;
}

.slider .prev-vertical .x-btn-icon-el {
    background-position: -35px -135px;
}

.slider .x-prev-selected .x-btn-icon-el, .slider .x-btn-prev-selected .x-btn-icon-el {
    background-position: -70px -33.5px;
}

.slider .x-prev-vertical-selected .x-btn-icon-el, .slider .x-btn-prev-vertical-selected .x-btn-icon-el {
    background-position: -70px -135px;
}

.bq-color-picker {
  cursor: pointer; 
  font-size: 0px;
}

.bq-color-picker a {
  border: 1px solid rgba(0,0,0,0);
  float: left;
  padding: 2px;
  text-decoration: none;
  -moz-outline: 0 none;
  outline: 0 none;
  cursor: pointer; 
}

.bq-color-picker a:hover,
.bq-color-picker a.x-color-picker-selected {
  background-color: #ffffff;
  /*width: 60px;*/
  color: #000000 !important; 
  font-size: 12px;
  font-style: normal;    
  text-align: center;
  border-radius: 3px;
}

.bq-color-picker em {
  display: block;
  border: 1px solid #aca899; 
}

.bq-color-picker em span {
  cursor: pointer;
  display: block;
  height: 50px;
  width: 50px;
  line-height: 50px; 
} 
.x-form-color input[type="button"] {
    width: 180px;
    height: 20px;
    border: 1px solid #ffffff;
    border-radius: 5px;
    margin-right: 15px;    
}

.x-form-color input[type="checkbox"] {
    margin-right: 8px;
    padding-top: 10px;    
}

.image_viewer {
  margin: 0px 20px 0px 10px;

  /* relative position is a key for using absolute in the children elements */
  position: relative;
  top: 0px;
  left: 0px;

}

.viewer .well, .viewer .surface {
    color: transparent;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.viewer .well::selection, .viewer .surface::selection, .viewer .well::moz-selection, .viewer .surface::moz-selection {
    color: transparent;
    background: transparent;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.viewer .well .tile {
    color: transparent;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.viewer .well .tile::selection, .viewer .well .tile::moz-selection {
    color: transparent;
    background: transparent;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.image_viewer_display {
  /*max-width: 80%; */

  /*height: 450px;*/

  height: 100%;
  padding-bottom: 0px;

  /* relative position is a key for using absolute in the children elements */
  position: relative;
  top: 0px;
  left: 0px;
}

.image_viewer_option {
  width:auto;
  /*overflow:auto;*/
  float:right;
  max-width: 40%;
  min-width: 20%;
  clear:none;
  display:inline;

  position: relative;
  top: 0px;
  left: 0px;
}

.image_viewer_option .tag_viewer_display {
  width: auto;
  min-width: auto;
}

.bq-gob-tagger .x-panel-body {
    background: transparent;
}

.bq-gob-header {
    background-color: #d3e1f1;
    margin: 0px !important;
    padding: 0px !important;
    /*border-top: 1px solid #99bce8 !important;*/
}

.bq-gob-header h3 {
    margin: 0px !important;
    padding: 8px 10px 8px 10px !important;
}

.bq-gob-tagger h3 {
    padding-left: 5px;
}



/***********************************************************/

.imgview_button {
  border-color: #333333;
  border-width:0px;
  font-size: 14px;
  color: #CCCCCC;
  background-color: #666666;
  font-weight: bold;
  padding: 2px 2px 2px 2px;
  margin: 10px 0px 0px 5px;
/*  height:20px;
  width:60px;
*/

/*
   font-family: Verdana;
   font-size: 12px;
  color: black;
  height:20px;
  width:100px;
*/
}

.image_viewer_slicer {
  clear:none;
  width:auto;

  height: 100%;

  /* relative position is a key for using absolute in the children elements */
  position: relative;
  top: 0px;
  left: 0px;
}

.imgview_scroller {
  overflow: auto;
  background-color: #999999;
  /*vertical-align: middle;
  text-align: center;
  background-color: #EEEEEE;*/
  /*width: 100%;*/
  /*width:auto;*/
  /*max-width: 90%; */
  max-height: 600px;
  clear:none;

  /* relative position is a key for using absolute in the children elements */
  position: relative;
  top: 0px;
  left: 0px;
}


/***********************************************************/

.imgview_statsdiv {
  font-size:80%;
  padding: 4px;
  position: absolute;
  z-index: 2;
  visibility: visible;
  background-color: rgb(170, 170, 170);
  opacity: 0.8;
  left: 10px; top: 209px;
}

.imgview_statsel {
  clear:both;
}

/***********************************************************/

.imgview_opdiv {
  font-size:12px;
  padding: 4px;
  z-index: 2;
  visibility: visible;
  background-color: #222222;
  opacity:0.9;
  filter:alpha(opacity=90);

  min-width: 300px;
  color: #FFFFFF;
  font-weight: bold;
  border-color: #444444;
  border-style: solid;
  border-width: 1px;

  border-radius: 5px;
  -moz-border-radius: 5px;

  position:absolute;
  left: 5px;
  top: 5px;
  z-index: 30;
}

.imgview_opdiv div {
  margin: 5px 10px 5px 10px;
  padding: 0px 0px 2px 0px;
  border-bottom-style: dashed;
  border-bottom-width: 1px;
  border-bottom-color: #666666;
}

.imgview_opdiv div#group {
  margin: 15px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
  border-bottom-style: none;
  border-bottom-width: 0px;
}

.imgview_opdiv div#group h3 {
  margin: 5px 0px 5px 2px;
  padding: 0px 0px 0px 0px;
  font-size: 120%;
  /*font-weight: bold;*/
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.imgview_opdiv label {
  min-width: 150px;
  display:block;
  float:left;
}

.imgview_opdiv select, .imgview_opdiv input {
  border: 1px solid #666666;
  clear:none;
  background-color:#333333;
  color:#FFFFFF;
  font-weight: bold;
  font-size:12px;
}

.imgview_opdiv button {
  clear:none;
  background-color:#333333;
  color:#FFFFFF;
  font-weight: bold;
  font-size:12px;
  margin: 2px 2px 0px 0px;
  padding: 2px 5px 2px 5px;

  border-color: #666666;
  border-width: 1px;
  border-style: solid;
}


/***********************************************************/

.buttonbar {
    font-size: 1em;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    background-repeat: repeat-x;
    /*background-color:*/
}

.buttonbar form { display:inline; }

.buttonbar input {
    color:#FFFFFF;
    border-color: #333333;
    color: #CCCCCC;
    background-color:#666666;
    padding: 2px 2px 2px 2px;
    margin: 5px 0px 0px 0px;
}

.buttonbar input[type="checkbox"] {
    border-color: #FFFFFF;
    border-width:0px;
    background-color: inherit;
}

.buttonbar input[type="text"], .commandbar input[type="submit"] { background-color: #666666; }

.buttonbar input[type="text"] { padding: 3px 5px 3px 5px; }

.buttonbar input[type="submit"] {
    padding: 2px 5px 2px 5px;
    font-weight: bold;
}

.buttonbar button {
    color: #CCCCCC;
    background-color:#666666;
    margin: 2px 2px 0px 0px;
    padding: 2px 5px 2px 5px;
    font-weight: bold;

    border-color: #333333;
    border-width: 1px;
    border-style: solid;
}
.buttonbar button#selected {
    background-color:#FF6600;
    color: #333333;
}

.buttonbar .group {
  margin-left: 8px;
}

/***********************************************************/

.optionsbar {
  overflow: auto;
  float: left;
  /*max-width: 50%;*/
  max-height: 600px;
  /*width: 500px;
  height: 300px;
  /*background-color: #FF0000;*/
  /*padding: 10px 10px 10px 10px;*/
  /*margin: 20px 10px 10px 10px;*/
  margin: 19px 0px 0px 40px;
  padding: 0px 0px 0px 0px; /*border: #999999 solid 1px;*/
}

/***********************************************************/

.optionswidget, .optionswidget div, div .optionswidget {
  padding: 0px 0px 0px 0px;
  margin: 25px 0px 0px 0px;
  border: 0px solid #ccc;
  background: none;
  overflow: auto;
  max-height: 550px;
  border-bottom: 0px solid;
}

/***********************************************************/

.imgcnv_s, .imgcnv_s div, div .imgcnv_s {
  background: #333333;
  margin: 5px 5px 5px 5px;
  padding: 5px 5px 5px 5px;
  border-bottom: 0px solid;}

.imgcnv_clear, .imgcnv_clear div {
  background: none;
  background-color: none;
  border-bottom: 0px solid;
}

.imgcnv_s input[disabled=''] {
  color: #666666;
}

.imgcnv_s select[disabled=''] {
  color: #666666;
}

/***********************************************************/

.viewer .thumbnail {
  bottom: 10px;
}

/***********************************************************/

.scalebar {
  position : absolute;
  left: 6px;
  bottom: 10px;
  width: 100px;
  height: 38px;
  background-color: #222222;
  color: #FFFFFF;
  font-size: 12px;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  z-index: 30;

  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.scalebar div#scalebar_bar {
  width: 100%;
  height: 30%;
  position:relative;
  background-color: #FFFFFF;
  color: #FFFFFF;
  background: #FFFFFF;
  opacity: 1;
  z-index: 29;
}

.scalebar div#scalebar_caption {
  white-space: nowrap;
  height: 100%;
  position:relative;
  overflow: hidden;
  margin-top: 2px;
  z-index: 28;
}

.scalebar div#scalebar_selectionPanel {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 31;
}

.scalebar div#scalebar_editButton {
    /*background-color: transparent;*/
    position: absolute;
    top: 2px;
    height: 2px;
    width: 31px;
    height: 31px;
    z-index: 32;
    background-repeat: no-repeat;
    background-position: -34px -131px;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
}

.scalebar div#scalebar_rescaleButton {
    /*background-color: transparent;*/
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 20px;
    height: 20px;
    z-index: 32;
    cursor: 'se-resize';
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/resize-handle.png');
}

/********************************************************************
 *
 * image meta editor
 *
 ********************************************************************/

.imgmetaeditor p{
    /*text-indent: 15px;*/
    font: Consolas, Arial, san-serif;
    font-size: 12px;
    /*padding-right: 5px;*/
    /*padding-left: 5px;*/
    /*padding-top: 5px;*/
    /*padding: 15px;*/
}

.imgmetaeditor h2{
    /*margin-left: 15px;*/
}
/*
.imgmetaeditor_channel_grid_colorpicker div#imgmetaeidtor_colorpicker {
    height: 25px;
    width: 100%;
}


.imgmetaeditor_channel_grid .x-grid-cell-inner {
    height: 33px;
    overflow: hidden;
    padding: 3px 6px;
    white-space: nowrap;
}

.imgmetaeditor_channel_grid .x-grid-row-editor .x-panel-body{
    height: 38px !important;
}

.imgmetaeditor_channel_grid .x-grid-editor .x-form-text,
.imgmetaeditor_channel_grid .x-panel-body .x-box-inner{
    height: 30px !important;
}

.imgmetaeditor_channel_grid .x-grid-row-editor-buttons-default-bottom{
    top: 39px !important;
}

.imgmetaeditor_channel_grid .x-grid-row-editor-buttons-default-top{
    bottom: 39px !important;
}

*/

/******************************************************************************/

.imgview_button_selected {
  border-color: #333333;
  border-width:0px;
  font-size: 14px;
  color: #CCCCCC;
  background-color: #FF0000;
  font-weight: bold;
  padding: 2px 2px 2px 2px;
  margin: 10px 0px 0px 5px;
}

/*******************************************************************************
 viewer surface
*******************************************************************************/

.viewer .ol-viewport {
    z-index: 20;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: auto;
}

/*******************************************************************************
 gobjects_surface
*******************************************************************************/

.gobjects_surface {
  z-index: 15;
  position: absolute;
  top: 0px;
  left: 0px;
}

.gobjects_overlay {
  z-index: 16;
  position: absolute;
  top: 0px;
  left: 0px;
}

.viewer .canvas_renderer_wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    /*z-index: 19;*/
}

/*******************************************************************************
 info
*******************************************************************************/

.viewer .info {
  position: absolute;
  z-index: 25;
  width: 100%;
  height: 20px;
  text-align: center;
  left: 0px;
  top: 0px;
  padding: 5px;
  bottom: none;
  color: #FFFFFF;
  text-shadow: 1px 1px 1px #000000;
  font-size: 12px;
  text-overflow: ellipsis;
    pointer-events: none;
}

.viewer .info.tablet {
    text-shadow: 2px 2px 2px #000000;
    font-size: 18px;
}

.viewer .info.phone {
    text-shadow: 6px 6px 6px #000000; font-size: 40px;
    font-size: 18px;
}

.viewer .name {
    left: auto;
    width: auto;
    height: auto;
    right: 160px;
    bottom: 10px;
    top: initial;
    text-decoration: underline;
    z-index: 30;
    padding: 0px;
}

.viewer .name.logo {
    width: 90px;
    height: 24px !important;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/bisque_logo_gray.svg');
    background-size: 90px;
    background-position: 0px 0px;
}

.viewer .position {
    height: 20px;
    left: 130px;
    bottom: 10px;
    top: initial;
    text-decoration: none;
    text-align: left;
    pointer-events: none;
}

.bq-image-viewer .viewoptions {
    position: absolute;
    z-index: 30;
    width: 32px;
    height: 32px;
    left: 80px;
    top: 10px;
    bottom: none;
    right: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: -34px -97px;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    color: transparent;
    cursor: default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.viewer .control {
    cursor: default;
    color: transparent;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/*
.viewer .viewoptions-phone {
    width: 96px;
    height: 96px;
    left: 100px;
    top: 30px;
    background-size: 96px;
}

.viewer .viewoptions-touch {
    width: 36px;
    height: 36px;
    left: 85px;
    top: 15px;
    background-size: 36px;
}
*/
.viewer .editmenu, .viewer .bq-editor-selector {
    position: absolute;
    z-index: 30;
    width: 31px !important;
    height: 31px !important;
    right: 60px;
    top: 10px;
    bottom: none;
    right: none;

    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: -134px -163px;
    color: transparent;
    cursor: default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.viewer .editmenu.phone {
    width: 96px;
    height: 96px;
    right: 100px;
    top: 30px;
    background-size: 96px;
}

.viewer .editmenu.touch {
    width: 36px;
    height: 36px;
    right: 85px;
    top: 15px;
    background-size: 36px;
}

.contrast .x-form-item-body {
    background-image: url('/core/images/viewer/slider_contrast.svg');
    background-repeat: no-repeat;
    background-size: 96.5%;
    padding-top: 5px;
    background-position: 4px 0px;
}

/*******************************************************************************
  edit control buttons
*******************************************************************************/

.viewer .editcontrol {
    position: absolute;
    z-index: 30;
    width: 31px;
    height: 31px;
    right: 80px;
    top: 10px;
    bottom: none;
    right: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: -134px 0px;
    color: transparent;
    cursor: default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.viewer .btn-navigate {
    right: 190px;
    background-position: -134px -131px;
}

.viewer .btn-navigate.selected {
    background-position: -168px -131px;
}

.viewer .btn-select {
    right: 150px;
    background-position: -134px -98px;
}

.viewer .btn-select.selected {
    background-position: -168px -98px;
}

.viewer .btn-delete {
    right: 110px;
    background-position: -134px -65px;
}

.viewer .btn-delete.selected {
    background-position: -168px -65px;
}

/*******************************************************************************
 progress
*******************************************************************************/

.viewer .progress {
  position: absolute;
  z-index: 15;
  width: 120px;
  height: 120px;
  right: 60px;
  top: 10px;
  display: none;
}

/*******************************************************************************
 channels
*******************************************************************************/

table.x-form-color {
    min-width: 340px;
    margin: 5px 10px 5px 10px;
}

.bq-viewer-tip {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0.8;
    border-color: rgba(255,255,255,0.3);
    z-index: 2147483647 !important;
}

.bq-viewer-tip .x-tip-anchor {
    border-right-color: rgba(255,255,255,0.3);
}

/*******************************************************************************
 menu
*******************************************************************************/

.bq-viewer-menu {
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0.8;
    border-color: rgba(255,255,255,0.2);
    border-radius: 5px;
    padding: 0px 0px 5px 10px;
    z-index: 2147483647 !important;
}

.x-boundlist-floating {
    z-index: 2147483647 !important;
}

.bq-viewer-menu .x-tip-anchor {
    border-bottom-color: rgba(255,255,255,0.2);
}


.bq-viewer-menu .x-field {
    margin-left: 15px;
}

.bq-viewer-menu label {
    color: #ffffff;
}

.bq-viewer-menu .heading {
    /*width: 100%;*/
    margin: 5px 0px 10px 0px;
}

.bq-viewer-menu .heading td {
    width: 100% !important;
}

.bq-viewer-menu .heading label {
    width: 100% !important;
    font-size: 16px !important;
}

.bq-viewer-menu .x-tool img {
    margin: 4px 4px 0px 0px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 72px;
    background-position: -47px -12px;
    width: 13px;
}

/*******************************************************************************
 viewer_tooltip
*******************************************************************************/

.viewer_tooltip {
    z-index: 2147483647 !important;
    background-color: rgba(0, 0, 0, 0.85);
    border-color: rgba(100,100,100,0.8);
    border-radius: 5px;
    padding: 5px;
    pointer-events: none;
}

.viewer_tooltip .x-toolbar-text {
    color: white;
}

.viewer_tooltip .x-tip-anchor {
    border-color: rgba(100,100,100,0.8);
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.viewer_tooltip p {
    color: #999999;
    margin: 0px;
    padding: 0px;
}

.viewer_tooltip p.emph {
    color: #ffffff;
}

.viewer_tooltip p.tags {
    color: #666666;
}

.viewer_tooltip p.tags.warning {
    color: #FFFF00;
}

.viewer_tooltip p.tags.error {
    color: #FF0000;
    font-size: 120%;
}

.viewer_tooltip a {
    color: #49c7f4;
    pointer-events: all;
    text-decoration: underline;
}

/*******************************************************************************
 edit menu
*******************************************************************************/

.x-tip {
    z-index: 2147483647 !important;
}

.bq-editor-menu {
    z-index: 2147483647 !important;
}

.bq-editor-menu .x-tool img {
    margin: 4px 4px 0px 0px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 75px;
    background-position: -36px -12px;
    width: 14px;
}

.bq-editor-menu .bq-gob-header {
    font-size: 14px;
    padding: 0px 0px 5px 5px !important;
    background-color: transparent;
}

.bq-editor-menu .x-toolbar {
    background-color: transparent;
    background-image: none;
}

.bq-editor-menu .primitives {
  height: 40px !important;
}

.bq-editor-menu .x-btn .add {
    height: 31px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: 0px 0px;
    border-color: transparent !important;
}

.bq-editor-menu .primitives .x-btn {
    width: 31px;
    height: 31px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
    background-position: -101px -163px;
    border-color: transparent !important;
}

.bq-editor-menu .x-btn.point {
    background-position: -101px -198px;
}

.bq-editor-menu .x-btn.line {
    background-position: -101px -230px;
}

.bq-editor-menu .x-btn.polygon {
    background-position: -101px -296px;
}

.bq-editor-menu .x-btn.polyline {
    background-position: -101px -263px;
}

.bq-editor-menu .x-btn.freehand_line {
    background-position: -101px -329px;
}

.bq-editor-menu .x-btn.freehand_shape {
    background-position: -101px -362px;
}

.bq-editor-menu .x-btn.circle {
    background-position: -101px -395px;
}

.bq-editor-menu .x-btn.ellipse {
    background-position: -101px -427px;
}

.bq-editor-menu .x-btn.rectangle {
    background-position: -101px -460px;
}

.bq-editor-menu .x-btn.square {
    background-position: -101px -492px;
}

.bq-editor-menu .x-btn.label {
    background-position: -101px -525px;
}

/* pressed */

.bq-editor-menu .x-btn.point.x-pressed {
    background-position: -168px -198px;
}

.bq-editor-menu .x-btn.line.x-pressed {
    background-position: -168px -230px;
}

.bq-editor-menu .x-btn.polygon.x-pressed {
    background-position: -168px -296px;
}

.bq-editor-menu .x-btn.polyline.x-pressed {
    background-position: -168px -263px;
}

.bq-editor-menu .x-btn.freehand_line.x-pressed {
    background-position: -168px -329px;
}

.bq-editor-menu .x-btn.freehand_shape.x-pressed {
    background-position: -168px -362px;
}

.bq-editor-menu .x-btn.circle.x-pressed {
    background-position: -168px -395px;
}

.bq-editor-menu .x-btn.ellipse.x-pressed {
    background-position: -168px -427px;
}

.bq-editor-menu .x-btn.rectangle.x-pressed {
    background-position: -168px -460px;
}

.bq-editor-menu .x-btn.square.x-pressed {
    background-position: -168px -492px;
}

.bq-editor-menu .x-btn.label.x-pressed {
    background-position: -168px -525px;
}

/* main button */

.viewer .bq-editor-selector.point {
    background-position: -134px -197px;
}

.viewer .bq-editor-selector.line {
    background-position: -134px -229px;
}

.viewer .bq-editor-selector.polygon {
    background-position: -134px -295px;
}

.viewer .bq-editor-selector.polyline {
    background-position: -134px -262px;
}

.viewer .bq-editor-selector.freehand_line {
    background-position: -134px -328px;
}

.viewer .bq-editor-selector.freehand_shape {
    background-position: -134px -361px;
}

.viewer .bq-editor-selector.circle {
    background-position: -134px -394px;
}

.viewer .bq-editor-selector.ellipse {
    background-position: -134px -426px;
}

.viewer .bq-editor-selector.rectangle {
    background-position: -134px -459px;
}

.viewer .bq-editor-selector.square {
    background-position: -134px -491px;
}

.viewer .bq-editor-selector.label {
    background-position: -134px -524px;
}

/* main button selected */

.viewer .bq-editor-selector.point.selected {
    background-position: -168px -197px;
}

.viewer .bq-editor-selector.line.selected {
    background-position: -168px -229px;
}

.viewer .bq-editor-selector.polygon.selected {
    background-position: -168px -295px;
}

.viewer .bq-editor-selector.polyline.selected {
    background-position: -168px -262px;
}

.viewer .bq-editor-selector.freehand_line.selected {
    background-position: -168px -328px;
}

.viewer .bq-editor-selector.freehand_shape.selected {
    background-position: -168px -361px;
}

.viewer .bq-editor-selector.circle.selected {
    background-position: -168px -394px;
}

.viewer .bq-editor-selector.ellipse.selected {
    background-position: -168px -426px;
}

.viewer .bq-editor-selector.rectangle.selected {
    background-position: -168px -459px;
}

.viewer .bq-editor-selector.square.selected {
    background-position: -168px -491px;
}

.viewer .bq-editor-selector.label.selected {
    background-position: -168px -524px;
}

/*******************************************************************************
 toolbar
*******************************************************************************/

.bq_resource_page .view2d {
    background-image: url(/core/images/viewer/icons_viewers.svg);
    background-size: 65px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 5px 1px;
}

.bq_resource_page .view3d {
    background-image: url(/core/images/viewer/icons_viewers.svg);
    background-size: 65px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: -17px 2px;
}

.bq_resource_page .movie {
    background-image: url(/core/images/viewer/icons_viewers.svg);
    background-size: 65px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: -41px 2px;
}

.external {
    background-image: url('/core/images/viewer/external.png');
    background-size: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
}

.converter {
    background-image: url('/core/images/viewer/converter.png');
    background-size: 16px;
    background-color: transparent;
    background-repeat: no-repeat;
}

/*******************************************************************************
 toolbar
*******************************************************************************/

.bq-viewer-menu .icon-navigate {
    background-image: url('/core/js/ResourceTagger/Images/compass.png') !important;
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

.bq-viewer-menu .icon-select {
    background-image: url('/core/js/ResourceTagger/Images/select.png') !important;
    background-size: 15px 15px;
    background-repeat: no-repeat;
}


/*******************************************************************************
 pixel counter
*******************************************************************************/

.threshold table{
    margin-left: 30px;
}

.threshold th{
    padding-right: 15px;
    padding-top: 25px;
}

.threshold p{
    text-indent: 30px;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 15px;
    /*padding: 15px;*/
}

.threshold td{
    text-align: right;
    padding-right: 15px;
}

.threshold h2{
    margin-left: 15px;
}

.thresholdelements td{
    /*text-indent: 15px;*/
    padding-left: 15px;
}

.icon-pipette {
    background-image: url('/core/images/viewer/pipette.png');
    background-size: 24px 24px;
    background-repeat: no-repeat;
}

.icon-close {
    background-image: url('/core/images/viewer/32px_close.png');
    background-size: 24px 24px;
    background-repeat: no-repeat;
}

.preview_button {
    position: absolute;
    z-index: 30;
    width: 64px;
    height: 32px;
    left: none;
    right: 10px;
    top: 80px;
    bottom: none;
    background-color: rgb(0,0,0,0.5);
    background-repeat: no-repeat;
    background-position: center center;
    /*background-image: url(/core/images/viewer/icons_viewer.svg);*/
    background-size: contain;
    color: transparent;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    border: 1px solid white !important;
}

.preview_button.preview {
    top: 80px;
}

.preview_button.label {
    top: 120px;
}

.preview_image {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}


.bq-viewer-menu.label {
    background-color: rgba(0,0,0,1.0);
    opacity: 1.0;
}

.bq-viewer-menu.label .x-tip-anchor {
    border-left-color: rgba(0,0,0,0.8);
    border-bottom-color: transparent;
}

.bq-viewer-movie {
    background: #000000;
}

.bq-viewer-movie video {
    width: 100%;
    height: 100%;
    z-index: 20;
}

.bq-viewer-movie .viewoptions {
    position: absolute;
    z-index: 25 !important;
    width: 32px !important;
    height: 32px !important;
    left: 80px !important;
    top: 10px !important;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;

    background-position: -34px -97px;
}

.bq-viewer-movie .fullscreen {
    position: absolute;
    z-index: 25 !important;
    width: 32px !important;
    height: 32px !important;
    right: 10px !important;
    top: 10px !important;
    bottom: auto !important;
    left: auto !important;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;

    background-position: -34px -162px;
}

.bq-viewer-movie .logo {
    position: absolute;
    z-index: 25 !important;
    width: 90px !important;
    height: 24px !important;
    right: 10px !important;
    bottom: 6px !important;
    top: auto !important;
    left: auto !important;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/bisque_logo_gray.svg');
    background-size: 90px;
    background-position: 0px 0px;
}

.datasets-form {
    padding: 10px;  
}

.datasets-form .radio-published b {
    color: #009900;
}

.datasets-form .radio-private b {
    
}


/*******************************************************************************

  Styles for BQ.renderers.dataset

  Author: Dima Fedorov

  Version: 1

  History:
    2011-09-29 13:57:30 - first creation

*******************************************************************************/
.bq-dataset .x-splitter {
    border-left: 1px solid #98C8FF;
    border-right: 1px solid #98C8FF;
}


.heading {
    font-size: 14px !important;
}

.heading .x-btn-inner {
    font-size: 14px !important;
}

.final {
    width: 100%;
    height: 100%;
    background-color: rgba(33, 33, 33, 0.8) !important;
    background-image: none;
    cursor: default;
}

.final div {
    color: white;
    font-size: 20px;
    cursor: default;
}

.icon_plus {
    background-image: url('/core/images/button_plus.png');
    background-size: 20px 20px;
    background-position: center center;
}

.icon_minus {
    background-image: url('/core/images/button_minus.png');
    background-size: 20px 20px;
    background-position: center center;
}

.icon_x {
    background-image: url('/core/images/button_x.png');
    background-size: 20px 20px;
    background-position: center center;
}
/*******************************************************************************

@author John Delaney


*******************************************************************************/

/*
LICENSE

Center for Bio-Image Informatics, University of California at Santa Barbara

Copyright (c) 2007-2014 by the Regents of the University of California
All rights reserved

Redistribution and use in source and binary forms, in whole or in parts, with or without
modification, are permitted provided that the following conditions are met:

    Redistributions of source code must retain the above copyright
    notice, this list of conditions, and the following disclaimer.

    Redistributions in binary form must reproduce the above copyright
    notice, this list of conditions, and the following disclaimer in
    the documentation and/or other materials provided with the
    distribution.

    Use or redistribution must display the attribution with the logo
    or project name and the project URL link in a location commonly
    visible by the end users, unless specifically permitted by the
    license holders.

THIS SOFTWARE IS PROVIDED BY THE REGENTS OF THE UNIVERSITY OF CALIFORNIA ''AS IS'' AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE REGENTS OF THE UNIVERSITY OF CALIFORNIA OR
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/


/*dagre*/

/* This sets the color for "TK" nodes to a light blue green. */
g.type-TK > rect {
  fill: #00ffd0;
}

text {
  font-weight: 300;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
  font-size: 14px;
}

.node {
  opacity: 0.25 !important;
}

.watershed  {
  opacity: 0.75 !important;
}

.selected  {
  opacity: 1.0 !important;
}


.node rect {
  fill: #E6E6E6;

}

.watershed rect {
    stroke-width: 1.5px;
}

.selected rect  {
    stroke: #333333;
    stroke-width: 0.5px;
    box-shadow: 0 0 7px #53BE12;
}

.mex rect {
    fill: #99C299;
}

.pipeline_step rect {
    fill: #A9D2C9;
}

.pipeline_step_bisque rect {
    fill: #A9D2FF;
}

.pipeline_step_ignored rect {
    fill: #A9D2C9;
    opacity: 0.25 !important;
}

.pipeline_step_incompatible rect {
    fill: #F9D2C9;
}

.image rect {
    fill: #ADC2FF;
}

.dataset rect {
    fill: #FFE0C2;
}
.edgePath path {
  stroke: #B2B2B2;
  fill: #
  stroke-width: 2.0px;
}

.edgePathHighlighted path {
  stroke: #997A5C;
  fill: #997A5C;
  stroke-width: 2.0px;
}

.edgePathSelectedOut path {
  stroke: #FF0000;
  fill: #FF0000;
  stroke-width: 2.0px;
}

.edgePathSelectedIn path {
  stroke: #0066FF;
  fill: #0066FF;
  stroke-width: 2.0px;
}

.bq-graph-panel .control  {
    position: absolute;
    z-index: 30;
    width: 32px !important;
    height: 32px !important;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;

}

.bq-graph-panel .zoomextents {
    right: 10px !important;
    left: auto !important;
    top: 10px !important;
    background-position: -34px -196px;
}


.bq-graph-panel .zoomtocurrent {
    right: 10px !important;
    left: auto !important;
    top: 44px !important;
    background-position: -34px -228px;
}


g div span
{
    display: block;

    padding-left: 3px;
    padding-right: 3px;
}

 g div {
    /*width: 200px;
    height: 40px;*/
     /*margin-left: 2px;
     margin-right: 2px;
     margin-top: 2px;
     margin-bottom: 2px;*/
     color: #fff;
}

.bq-graph-panel .resource {
    background: rgba(0,0,0,0.3);
    /*height: 100%;*/
    /*width: 15px;*/
    display: block;
    /*float: left;*/
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: 2px;

    padding: 2px;
}

.bq-graph-panel .name {
    color: #555;
    border-width: 2px
    text-shadow: 1px 1px 1px #CCC;
    font-size: 11px;
    font-weight: bold;
    font-family: Inter, arial, verdana, sans-serif;
    padding-left: 1px;
    padding-right: 1px;
}


.bq-graph-panel .value {
    color: #07AD0C !important;
    text-shadow: 0px 1px 1px #DDD;
    font-size: 9px;
    font-family: Inter, arial, verdana, sans-serif !important;

    padding-left: 1px;
    padding-right: 1px;
}

.bq-graph-panel .date {
    color: #444;
    font-size: 9px;
    font-family: Inter, arial, verdana, sans-serif !important;

    padding-left: 1px;
    padding-right: 1px;
}

/*******************************************************************************

@author John Delaney


*******************************************************************************/

/*
LICENSE

Center for Bio-Image Informatics, University of California at Santa Barbara

Copyright (c) 2007-2014 by the Regents of the University of California
All rights reserved

Redistribution and use in source and binary forms, in whole or in parts, with or without
modification, are permitted provided that the following conditions are met:

    Redistributions of source code must retain the above copyright
    notice, this list of conditions, and the following disclaimer.

    Redistributions in binary form must reproduce the above copyright
    notice, this list of conditions, and the following disclaimer in
    the documentation and/or other materials provided with the
    distribution.

    Use or redistribution must display the attribution with the logo
    or project name and the project URL link in a location commonly
    visible by the end users, unless specifically permitted by the
    license holders.

THIS SOFTWARE IS PROVIDED BY THE REGENTS OF THE UNIVERSITY OF CALIFORNIA ''AS IS'' AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE REGENTS OF THE UNIVERSITY OF CALIFORNIA OR
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/

/*******************************************************************************
 menu
*******************************************************************************/

.bq-volume-menu {
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0.7;
    border-color: rgba(255,255,255,0.2);
    border-radius: 5px;
    padding: 0px 10px 5px 10px;
    z-index: 100 !important;

}

.bq-volume-menu .x-tool img {
    margin: 4px 4px 0px 0px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 72px;
    background-position: -47px -12px;
    width: 13px;
}

.bq-volume-toolbar .x-tool-collapse-right {
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 85px;
    background-position: -14px -13px;
    width: 13px;
}

.bq-volume-toolbar .x-tool-expand-left {
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 85px;
    background-position: -14px 1px;
    width: 13px;
}

.bq-volume-transfer .x-tool-collapse-bottom {
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 85px;
    background-position: -14px -13px;
    width: 13px;
}

.bq-volume-transfer .x-tool-expand-top {
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 85px;
    background-position: -14px 1px;
    width: 13px;
}


.threejsComponent {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.threejsBack {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(67,67,67, 1.0);
}


.x-boundlist-floating {
    z-index: 2147483647 !important;
}

.bq-volume-menu .x-tip-anchor {
    border-bottom-color: rgba(255,255,255,0.2);
}

.bq-volume-menu .x-field {
    margin-left: 15px;
}

.bq-volume-menu label {
    color: #ffffff;
}

.bq-volume-menu .heading {
    /*width: 100%;*/
    margin: 5px 0px 10px 0px;
}

.bq-volume-menu .heading td{
    width: 100% !important;
}

.bq-volume-menu .heading label {
    width: 100% !important;
    font-size: 16px !important;
}



/*******************************************************************************
 control buttons
*******************************************************************************/

.bq-three-container .control  {
    position: absolute;
    z-index: 30;
    width: 32px !important;
    height: 32px !important;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;
}

.bq-three-container .viewoptions {
    left: 80px !important;
    top: 10px !important;
    background-position: -34px -97px;
}

.bq-three-container .tooloptions {
    left: 122px !important;
    top: 10px !important;
    background-position: -135px 1px;
}

.bq-three-container .fullscreen {
    right: 10px !important;
    left: auto !important;
    top: 10px !important;
    background-position: -34px 0px;
    background-position-y: -162px;

}

.bq-three-container .logo {
    width: 90px !important;
    height: 24px !important;
    right: 10px !important;
    bottom: 6px !important;
    top: auto !important;
    left: auto !important;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/bisque_logo_gray.svg');
    background-size: 90px;
    background-position: 0px 0px;
}

/*******************************************************************************
 toolbar selecter
*******************************************************************************/

.bq-volume-toolbar-menu {
    position: absolute;
    left: 72px;
    top: 10px;
    width: 120px;
    height: 20px;
    z-index: 100 !important;
    opacity: 0.8;
}

.bq-volume-toolbar-menu .x-btn{
    height: 20px;
}

/*******************************************************************************
toolbar
*******************************************************************************/

.bq-volume-toolbar {
    position: absolute;
    z-index: 0 !important;
    border: 0px;
    border-width: 0px;
    top: 80px;
    right: 10px;
    width: 220px;
    padding: 0px 0px 0px 0px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.bq-volume-toolbar .x-header-text {
    color: white;
}

.bq-volume-toolbar .x-btn-inner {
    color: white;
}

.bq-volume-toolbar .x-toolbar {
    color: white;
    background-color: rgba(20, 20, 20, 0.5);
    background-image: none;
    border-color: #333333;
    box-shadow: none;
}

.bq-volume-toolbar .x-header {
    color: white;
    background-color: rgba(0, 0, 0, 1.0);
    background-image: none;
    border-color: #333333;
    box-shadow: none;
}

.bq-volume-toolbar .x-panel-body {
    background-color: transparent; /*background-color: rgba(0, 0, 0, 0.1);*/
    padding: 0px;
    border: 0px; /*border: 2px solid #333333;*/
    height: 80% !important;
    border-radius: 0px 0px 5px 5px;
    vertical-align: middle;;
}


.bq-volume-toolbar label {
    color: #ffffff;
}

/*******************************************************************************
  control panels
*******************************************************************************/

.bq-volume-adjustment-control {
    background-color: rgba(20, 20, 20, 0.5);
    /*-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;*/
    padding: 10px 10px 10px 10px;
}

.bq-volume-adjustment-control .bq-heading {
    font-size: 16px;
    font-family: 'Abel', tahoma, arial, verdana, sans-serif;
    font-weight: normal;
    margin: 0px 0px 8px 0px;
}

.bq-volume-adjustment-control .bq-heading:first-letter {
    text-transform: capitalize;
}

.bq-volume-adjustment-control .bq-histogram {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
}

/*******************************************************************************
transfer
*******************************************************************************/

.bq-volume-transfer {
    position: absolute;
    z-index: 999 !important;
    border: 0px;
    border-width: 0px;
    padding: 0px 0px 0px 0px;
}

.bq-volume-transfer .x-header-text {
    color: white;
}

.bq-volume-transfer .x-btn-inner {
    color: white;
}

.bq-volume-transfer .x-toolbar {
    color: white;
    background-color: rgba(50, 50, 50, 1.0);
    background-image: none;
    border-color: #333333;
    box-shadow: none;
    padding-left: 240px;
}

.bq-volume-transfer .x-toolbar .x-btn {
    margin-right: 5px;
}

.bq-volume-transfer .x-toolbar .x-field {
    margin: 0px 10px 0px 10px;
}

.bq-volume-transfer .x-header {
    color: white;
    background-color: rgba(0, 0, 0, 1.0);
    background-image: none;
    border-color: #333333;
    box-shadow: none;
}

.bq-volume-transfer .x-panel-body {
    background-color: rgba(0, 0, 0, 1.0);
    padding: 5px;
    border: 2px solid;
    border-radius: 0px 0px 5px 5px;
    border-color: #333333;
    vertical-align: middle;
}

.bq-volume-transfer .x-field {
    margin-left: 15px;
}

.bq-volume-transfer label {
    color: #ffffff;
}

.bq-volume-transfer .x-toolbar-spacer.record-spacer {
    width: 50px;
}

.bq-volume-transfer .x-btn-focus {
    background: transparent;
    border: 1px solid transparent;
    background-image: none;
}

.bq-volume-transfer .x-btn-over {
    color: #CC6600 !important;
    background: #000000;
    border: 1px solid #000000;
    background-image: none;
}

.bq-volume-transfer .x-btn-pressed {
    color: #CC6600 !important;
    background: #000000;
    border: 1px solid #CC6600;
    background-image: none;
}


/*******************************************************************************
 playback
*******************************************************************************/

.bq-volume-playback {
    margin-left:auto;
    margin-right:auto;

    bottom: 100px;
    width: 60%;
    opacity: 0.2;
    z-index: 100 !important;
}

.bq-volume-playback .x-panel-header-text {
    color: white;
}


.bq-volume-playback .x-panel-header {
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    background-image: none;
    border: 2px solid;
    border-radius: 5px 5px 0px 0px;
    border-color: #333333;
}

.bq-volume-playback .x-panel-body {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px;
    border: 2px solid;
    border-radius: 5px 5px 5px 5px;
    border-color: #333333;
    vertical-align: middle;
}

.bq-volume-playback .x-slider-horz .x-slider-thumb{
    background-image: url(/core/js/volume/icons/movieSlider-thumb.svg) !important;
    background: no-repeat;
    height: 14px;
    width: 18px;
    margin-left: -9px;
    top: -1px;
}

.bq-volume-playback .x-slider-horz .x-slider-thumb-over{
    background-image: url(/core/js/volume/icons/movieSlider-thumb.svg) !important;
    background: no-repeat 0px -14px;
    height: 14px;
    width: 18px;
    margin-left: -9px;
    top: -1px;
}

.bq-volume-playback .x-slider-horz{
    background-image: url(/core/js/volume/icons/movieSlider-bg.svg) !important;
    background: no-repeat left -12px;
    height: 12px;
}

.bq-volume-playback .x-slider-horz .x-slider-inner{
    background-image: url(/core/js/volume/icons/movieSlider-bg.svg) !important;
    background: 0px -0px;
    height: 12px;
}

.bq-volume-playback .x-slider-horz .x-slider-end{
    background-image: url(/core/js/volume/icons/movieSlider-bg.svg) !important;
    background: no-repeat right -24px;
    height: 12px;
}


.bq-volume-playback .x-field {
    margin-left: 15px;
}

.bq-volume-playback label {
    color: #ffffff;
}

.bq-volume-playback .heading {
    /*width: 100%;*/
    margin: 5px 0px 10px 0px;
}

.bq-volume-playback .heading td {
    width: 100% !important;
}

.bq-volume-playback .heading label {
    width: 100% !important;
    font-size: 16px !important;
}

.bq-volume-playback .x-box-inner {
    border-style: none;
    background-image: none;
    background-color: rgba(0, 0, 0, 0.0);
}

.bq-volume-playback .x-toolbar {
    border-style: none;
    background-image: none;
    background-color: rgba(0, 0, 0, 0.0);
    vertical-align: middle;
}

/*
.bq-volume-playback .x-btn {
    background-image: none;
    border-style: none;
    color: white;
    background-color: rgba(0, 0, 0, 0.0);
    vertical-align: middle;
}
*/


.bq-volume-playback .tool-2 .x-btn {
    background-image: none;
    border-style: none;
    color: white;
    background-color: rgba(0, 0, 0, 0.0);
    vertical-align: middle;
}


.bq-volume-playback .x-btn-inner {
    color: white;
}

.bq-volume-playback .x-toolbar-text-default {
    color: white;
    width: 40px;

    margin: 4px;
    left:auto;
    right:auto;
    background-color: transparent;
}

.bq-volume-playback .x-tool img {
    background-image: url('/core/js/volume/icons/viewer/16px_close.png');
    background-repeat: no-repeat;
    background-size: 10px;
    margin: 4px 4px 0px 0px;
    background-color: transparent;
    background-position: 0px 0px;
}


.bq-volume-playback .x-toolbar-spacer.record-spacer {
    width: 50px;
}

.bq-volume-playback .x-btn-focus {
    background: transparent;
    border: 1px solid transparent;
    background-image: none;
}

.bq-volume-playback .x-btn-over {
    color: #CC6600 !important;
    background: #000000;
    border: 1px solid #000000;
    background-image: none;
}

.bq-volume-playback .x-btn-pressed {
    color: #CC6600 !important;
    background: #000000;
    border: 1px solid #CC6600;
    background-image: none;
}

.x-btn-icon .addbutton {
    background-image: url(/core/js/volume/icons/iadd16.png) !important;
    width:16px!important;
    height:16px!important;
}
/*
.x-btn-icon .loopbutton {
    background-image: url(/core/js/volume/icons/iLoop.png) !important;
    width:16px!important;
    height:16px!important;
}
*/
.x-btn-icon .deletebutton {
background-image: url(/core/js/volume/icons/idelete16.png) !important;
width:16px!important;
height:16px!important;
}

.bq-btn-play {
background-image: url(/core/js/volume/icons/playbutton.svg) !important;
background-color: none;
background-size: cover;
width:32px!important;
height:32px!important;
}

.bq-btn-play.x-over {
background-image: url(/core/js/volume/icons/playbutton.svg) !important;
background: no-repeat -32px 0px;
background-size: cover;
width:32px!important;
height:32px!important;
}

.bq-btn-play.x-pressed {
background-image: url(/core/js/volume/icons/playbutton.svg) !important;
background: no-repeat -64px 0px;
background-size: cover;
width:32px!important;
height:32px!important;
}


.x-btn-pressed .playbutton {
background-image: url(/core/js/volume/icons/ipause16.png) !important;
background-color: none;
width:16px!important;
height:16px!important;
}

.x-btn-disabled .playbutton {
background-image: url(/core/js/volume/icons/ipause16.png) !important;
background-color: none;
width:16px!important;
height:16px!important;
}



.x-btn-icon .pausebutton {
background-image: url(/core/js/volume/icons/ipause16.png) !important;
width:16px!important;
height:16px!important;
}

.bq-volume-playback .recordbutton {
    background-image: url("/core/js/volume/icons/tool-icons.svg") !important;
    background-repeat: no-repeat;
    background-size: 260px;
    background-position: -183px -40px;
    width: 16px !important;
    height: 16px !important;
}

.x-btn-icon .redbutton {
background-image: url(/core/js/volume/icons/ired16.png) !important;
width:16px!important;
height:16px!important;
}

.x-btn-icon .greenbutton {
background-image: url(/core/js/volume/icons/igreen16.png) !important;
width:16px!important;
height:16px!important;
}

.x-btn-icon .bluebutton {
background-image: url(/core/js/volume/icons/iblue16.png) !important;
width:16px!important;
height:16px!important;
}

/*.key-slider {
    padding-top:6px;
    background-image:url(/core/js/volume/icons/ticks.gif);
}*/

.time-slider .x-slider-thumb {
    background-image:url(/core/js/volume/icons/slider-thumb.png);
}

.time-slider .x-slider-horz .x-slider-inner  {
    background-image:url(/core/js/volume/icons/slider-bg.png);
}

.time-slider .x-slider-end {
    background-image:url(/core/js/volume/icons/slider-bg.png);
}

.time-slider .x-slider-horz {
    background-image:url(/core/js/volume/icons/slider-bg.png);
}

.key-slider {
    z-index: 1000;
}

.key-slider .x-slider-horz  {
    background-image:none !important;
}

.key-slider .x-slider-horz .x-slider-inner  {
    background-image:none !important;
}

.key-slider .x-slider-horz .x-slider-end  {
    background-image:none !important;
}

.key-slider .x-slider-head {
    z-index: 1000;
    position: absolute;

    margin-left: -8px;
    top: -14px;
    opacity: 1.0;

    background-image:url("/core/js/volume/icons/keySlider.svg") !important;
    background-size: cover !important;
    background: no-repeat;
    width:  16px !important;
    height: 40px !important;

}

.key-slider .x-slider-horz .x-slider-head.x-slider-thumb-over{
    z-index: 1000;
    position: absolute;

    margin-left: -8px;
    top: -14px;
    opacity: 1.0;

    background-image:url("/core/js/volume/icons/keySlider.svg") !important;
    background-size: cover !important;
    background: no-repeat -16px 0px;
    width:  32px !important;
    height: 40px !important;

}

.key-slider .x-slider-horz .x-slider-thumb {
    z-index: 1000;
    background-image:url(/core/js/volume/icons/keyFrame.svg)  !important;
    height: 24px;
    width: 16px;
    margin-left: -8px;
    top: -6px;
}

.key-slider .x-slider-horz .x-slider-thumb-over {
    z-index: 1000;
    background-image:url(/core/js/volume/icons/keyFrame.svg)  !important;
    background: no-repeat -16px 0px;
    margin-left: -8px;
    top: -6px;
}



.key-slider .tick-slider{
z-index: 900;
position: absolute;
width:  100%;
height: 100%;
top: 0px;
left: 0px;
}

.key-slider .time-slider{
z-index: 1100;
position: absolute;
width:  1%;
height: 100%;
top: 0px;
left: 0px;
}

h3 {
    padding:15px 0 5px;
}

.grad-slider{
z-index: 900;
position: absolute;
background-image: none !important;
width:  100%;
height: 100%;
top: 0px;
left: 0px;
}

.val-slider-back{
z-index: 900;
background-image: none !important;
position: absolute;
width:  100%;
height: 100%;
top: 0px;
left: 0px;
}

.val-slider .x-slider-vert .x-slider-thumb{
/*
  background-image:url(/core/js/volume/icons/keyFrame.svg)  !important;
*/
z-index: 1000
}

/*******************************************************************************
scale bar
*******************************************************************************/

.vol-scalebar {
    opacity: 0.6;
    position: absolute;
    left: 6px;
    bottom: 10px;
    width: 100px;
    height: 38px !important;

    background-color: #222222;
    background : #222222;
    color: #FFFFFF;

    font-size: 12px;
    /* border: 1px solid #666666; */
    padding: 8px 8px 8px 8px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    z-index: 30;
}

.vol-scalebar .x-panel-body {
    border-width: 0px;
}


/*******************************************************************************
3D axis componentax
*******************************************************************************/


.vol-axis  {
    position: absolute;
    z-index: 30;
    width: 100px !important;
    height: 100px !important;
    background-color: transparent;
    left: 6px !important;
    bottom: 52px;
}

/*******************************************************************************
3D spinner component
*******************************************************************************/

.vol-spinner {
    opacity: 0.6;
    position: absolute;
    right: 6px;
    bottom: 10px;
    width: 24px;
    height: 24px;

    background-color: #222222;
    background : #222222;
    color: #FFFFFF;

    font-size: 12px;
    /* border: 1px solid #666666; */
    padding: 8px 8px 8px 8px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    z-index: 30;
}

.vol-spinner .x-panel-body {
    width: 100% !important;
    height: 100% !important;
    border-width: 0px;
}



/*******************************************************************************
zoom slider
*******************************************************************************/

.bq-zoom-slider .x-slider-vert .x-slider-thumb{
    background-image: url(/core/js/volume/icons/zoomSlider-thumb.svg) !important;
    background-size: cover;
    background: no-repeat;
    margin-left: -3px;
    height: 10px;
    width: 20px;
}

.bq-zoom-slider .x-slider-vert .x-slider-thumb-over{
    background-image: url(/core/js/volume/icons/zoomSlider-thumb.svg) !important;
    background-size: cover;
    background: no-repeat 0px -10px;
    margin-left: -3px;
    height: 10px;
    width: 20px;
}

.bq-zoom-slider .x-slider-vert{
    background-image: url(/core/js/volume/icons/zoomSlider-bg.svg) !important;
    background: no-repeat -28px 0px;
    width: 14px;
}

.bq-zoom-slider .x-slider-vert .x-slider-inner{
    background-image: url(/core/js/volume/icons/zoomSlider-bg.svg) !important;
    background: 0px -0px;
    width: 14px;
}
.bq-zoom-slider .x-slider-vert .x-slider-end{
    background-image: url(/core/js/volume/icons/zoomSlider-bg.svg) !important;
    background: no-repeat -14px bottom;
    width: 14px;
}

/*******************************************************************************
 clip slider
*******************************************************************************/

.bq-clip-slider  {
    position: relative !important;
    margin-left:auto !important;
    margin-right:auto !important;

    bottom: 86px !important;
    width: 60%;
    z-index: 2147483647 !important;
}

.color-field{
	width: 100%;
	height: 100%;
	position:absolute;
	background-color: transparent;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}


.bq-vol-toolbar .x-btn-pressed .x-btn-icon-el {
    background-position-y: -96px !important;
}



.clipButton {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -48px 0px;
}

.transferButton {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -96px 0px;
}

.histoButton {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -144px 0px;
}

.materialButton {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -192px 0px;
}

.resizeButton {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position:  -288px 0px;
}

.gButton {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -336px 0px;
}

.deepButton {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -384px 0px;
}

.phongButton {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -432px 0px;
}

.lightButton {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -480px 0px;
}

.ditherButton {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -528px -0px;
}

.animateButton {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -0px -0px;
}

.downloadButton {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -576px -0px;
}




.clipButton-pressed {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -48px -48px;
}

.transferButton-pressed {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -96px -48px;
}

.histoButton-pressed {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -144px -48px;
}

.materialButton-pressed {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -192px -48px;
}

.resizeButton-pressed {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position:  -288px -48px;
}

.gButton-pressed {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -336px -48px;
}

.deepButton-pressed {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -384px -48px;
}

.phongButton-pressed {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -432px -48px;
}

.lightButton-pressed {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -480px -48px;
}

.ditherButton-pressed {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -528px -48px;
}

.animateButton-pressed {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -0px -48px;
}

.downloadButton-pressed {
    background-image: url(/core/js/volume/icons/tool-icons.svg) !important;
    background-position: -576px -48px;
}


/*
.bq-volume-toolbar .x-btn {
    background-image: -webkit-linear-gradient(top,#AFAFAF,#838383 48%,#575757 52%,#2E2E2E) !important;
    border-color: #383838;
}
*/

.bq-volume-toolbar .x-btn-icon-el {
    width:  32px !important;
    height: 32px !important;
    background-size: 608px;
    background-repeat: no-repeat;

}


.bq-volume-toolbar .x-btn {

    background: none !important;
    border-color: rgba(0, 0, 0, 0.0);
}


/*
.bq-volume-toolbar .x-btn-pressed {

    background: none !important;
    border-color: #E6B85C;
}
*/

.bq-volume-toolbar .x-btn-inner {
    /*color: rgba(0, 0, 0, 0.0);*/
    color: none !important;
/*color: #FDFDFD;*/
}

/*************************************************************************
  BQ.upload.Panel
*************************************************************************/

.upload {
    /*background-image: url('images/drop_background.png');*/
    /*background-image: url(flower.png), url(ball.png), url(grass.png);*/
    background-position: center center;
    background-repeat: no-repeat;
    background-color: white;
    z-index: 1;
}

.header {
    background-color: white;
    padding: 0px 15px 15px 30px;
}

.background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    color: #EEEEEE;
    overflow: hidden;
    padding: 10px;
    line-height: 3em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.background .good {
    font-size: 16px;
    padding-right: 2.5em;
    color: #eeeeee;
}

.background .uncertain {
    padding-right: 2.5em;
    font-size: 12px;
}

.dropzone {
    padding-top: 20%;
    font-size: 60px;
    text-align: center;
    color: #aaaaaa;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
    font-family:"Times New Roman", Times, serif;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.bq-upload-panel .icon {
    width: 34px;
    background-image: url('/import/icons.svg');
    background-repeat: no-repeat;
    background-size: 200px;
    background-position: 0px 0px;
    background-color: transparent;
}

.tools {
    /*background-color: white;*/
    padding: 10px 10px 10px 15px;
}

.tools .x-btn-default-large {
    border-color: #CCCCCC;
    padding: 6px;
}

.tools .x-btn-inner {
    font-size: 14px;
}

.tools .browse {
    background-position: 0px -97px;
}

.tools .browse-folders {
    background-position: 0px -130px;
}

.tools .annotate {
    background-position: 0px 0px;
}

.tools .formats {
    background-position: 0px -163px;
}

.tools .help {
    background-position: 0px -66px;
}

.tools .x-toolbar-text h1 {
   font-size: 30px;
   margin: 0px;
}


.footer {
    padding: 10px 10px 10px 15px;
}

/*.footer .x-btn-default-large {
    border-color: #CCCCCC;
    padding: 6px;
}*/

.footer .x-btn-inner {
    font-size: 14px;
}

.footer .upload {
    background-position: 0px 0px;
}

.footer .cancel {
    background-position: 0px -33px;
}

.dragging {
   border-radius: 5px;
   border: dashed 3px red;
   /*-moz-box-shadow: inset 0 0 15px #FF6600, 0 0 15px #FF6600;
   -webkit-box-shadow: inset 0 0 15px #FF6600, 0 0 15px #FF6600;
   box-shadow: inset 0 0 15px #FF6600, 0 0 15px #FF6600;*/
   background-color: #FFFFCC;
   z-index: 1000;
   overflow:hidden;
}

.waiting {
    cursor: wait;
}

.bq-tooltip {
    background-color: #dfe9f6;
}

.bq-tooltip .x-tip-body {
    padding: 0px;
}

.bq-tooltip>.x-tip-body>.x-panel {
    border: 0px;
    padding: 2px;
}

.bq-upload-panel .x-toolbar .x-btn {
    border: 1px solid transparent;
    /*background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fff),color-stop(48%,#f9f9f9),color-stop(52%,#e2e2e2),color-stop(100%,#e7e7e7));
    background: -webkit-linear-gradient(top,#fff,#f9f9f9 48%,#e2e2e2 52%,#e7e7e7);
    background: -moz-linear-gradient(top,#fff,#f9f9f9 48%,#e2e2e2 52%,#e7e7e7);
    background: -o-linear-gradient(top,#fff,#f9f9f9 48%,#e2e2e2 52%,#e7e7e7);
    background: linear-gradient(top,#fff,#f9f9f9 48%,#e2e2e2 52%,#e7e7e7);*/
}

.bq-upload-panel .x-toolbar .x-btn-over {
    border: 1px solid #bbd5f1;
}

/*************************************************************************
  upload button
*************************************************************************/

.bq-upload-file {
   overflow: hidden;
}


/*************************************************************************
  BQ.upload.Item
*************************************************************************/

.uploaditem {
    margin: 10px;
    padding: 10px;
    background: #eeeeee;
    position: relative;
    border: solid 0px #dddddd !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    z-index: 10;
}

.uploaditem .title {
    /*margin: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    padding: 6px;
    padding-left: 15px;*/
    font-size: 14px;
    font-weight: normal;
    display: block;
    width: 100%;
    border-top: solid 1px #dddddd;
    border-bottom: solid 1px #dddddd;
    /*background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(50%, #e5e5e5), color-stop(51%, #e0e0e0), color-stop(100%, #eeeeee));
    background-image: -moz-linear-gradient(top, #eeeeee,#e5e5e5 50%,#e0e0e0 51%,#eeeeee);
    background-image: linear-gradient(top, #eeeeee,#e5e5e5 50%,#e0e0e0 51%,#eeeeee);*/
}

.uploaditem .filename {
    max-width: 50%;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
}

.uploaditem .info {
    margin: 15px 10px 0px 5px;
    font-size: 14px;
    font-weight: normal;
    width: 40%;
    float: left;
}

.uploaditem .info .good {
    color: #006600;
}

.uploaditem .info .uncertain {
    color: #FF6600;
}

.uploaditem .x-progress {
    margin: 15px 0px 0px 0px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 0px solid #6594CF !important;
}

.uploaditem .close {
    background-image: url('images/cancel.png');
    background-color: transparent;
    background-size: 16px 16px;
}

.uploaditem .flatbutton {
    background-color: transparent;
    background-image: none;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}

.uploaditem .button-close {
    position: absolute;
    top: 10px;
    right: 10px;
    border-width: 0px !important;
}

.uploaditem .button-permission {
    position: absolute;
    top: 10px;
    right: 50px;
    color: white;
    background-color: #666666;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 75px;
}

.uploaditem .published {
    background-color: #006600;
}

.uploaditem .button-permission .x-btn-inner {
    color: white;
    font-size: 13px;
}


.uploaditem .over {
    background-color: orange;
}

.error, .error>.x-progress-text-back {
    color: red !important;
    border-color: red !important;
}

.error>.x-progress-bar {
    background-color: red !important;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffc7c7), color-stop(50%, #e58888), color-stop(51%, #e07373), color-stop(100%, #ff3535));
    background-image: -moz-linear-gradient(top, #ffc7c7,#e58888 50%,#e07373 51%,#ff3535);
    background-image: linear-gradient(top, #ffc7c7,#e58888 50%,#e07373 51%,#ff3535);
}

.done, .done>.x-progress-text-back {
    color: green !important;
    border-color: green !important;
}

.done>.x-progress-bar {
    background-color: green !important;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a3d39c), color-stop(50%, #66b85d), color-stop(51%, #4fb248), color-stop(100%, #00d100));
    background-image: -moz-linear-gradient(top, #a3d39c,#66b85d 50%,#4fb248 51%,#00d100);
    background-image: linear-gradient(top, #a3d39c,#66b85d 50%,#4fb248 51%,#00d100);
}

.question {
    margin-bottom: 15px;
    margin-top: 10px;
    font-size: 14px;
    display: block;
}

.annotator {
    margin: 0px;
    background-color: #FFCC66;
    border: 0px;
}

.annotator .x-panel-body {
    background-color: transparent;
}

/*
.tabs .x-panel-header-text {
    font-size: 16px;
}
*/

.tools {
    /*background-color: white;*/
    padding: 10px 10px 10px 15px;
}

/*.tools .x-btn-default-large {
    border-color: #CCCCCC;
    padding: 6px;
}*/

.tools .x-btn-inner {
    font-size: 14px;
}

.footer {
    padding: 10px 10px 10px 15px;
}

/*.footer .x-btn-default-large {
    border-color: #CCCCCC;
    padding: 6px;
}*/

.footer .x-btn-inner {
    font-size: 14px;
}

.footer .checkbox {
    margin-left: 30px;
}

.thumbnail {
    margin: 0px 10px 0px 10px;
    width: 40px;
    height: 40px;
    background-image: url('/core/js/ResourceBrowser/Images/file.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.thumbnail.dataset {
    background-image: url('/core/js/ResourceBrowser/Images/folder.svg');
}

.thumbnail.dir {
    background-image: url('/core/js/ResourceBrowser/Images/folder.svg');
}

.thumbnail.image {
    background-image: initial;
}

/* Icons */

.bq-download-panel .icon {
    width: 34px;
    background-image: url('/export/css/icons.svg');
    background-repeat: no-repeat;
    background-size: 200px;
    background-position: 0px 0px;
    background-color: transparent;
}

.bq-download-panel .icon.select-images {
    background-position: 0px -97px;
}

.bq-download-panel .icon.select-dataset {
    background-position: 0px -129px;
}

.bq-download-panel .icon.download {
    background-position: 0px 0px;
}

.icon-gdocs {
    background-image: url('/export/images/gdocs.png') !important;
}

.icon-delete-cross {
    background-image: url('/export/images/delete.png') !important;
}

.align {
    vertical-align: middle;
}

/*********************************************************************
  Changes to ExtJS styles
*********************************************************************/

/*
  Mask
*/
.x-mask {
    opacity: .5;
    background: #000000;
}

.x-css-shadow {
    box-shadow: none !important;
}

.x-mask-msg {
    background-color: transparent;
    border: 0px;

    background-image: url('/core/images/progress_circles.gif');
    background-size: 40px 40px;
    background-position: center 15px;
    background-repeat: no-repeat;
    cursor: wait;

    min-width: 40px;
    min-height: 40px;
}

.x-mask-msg .x-mask-msg-text {
    color: #000;
    font-size: 24px;
    font-weight: 300;
    font-family: 'Inter', tahoma, arial, verdana, sans-serif;
}

.x-mask-msg div {
    background-color: transparent;
    background-image: none;
    margin: 70px 15px 10px 15px;
    padding: 0px;

    opacity: 1;
    cursor: wait;
    border: 0px;
}

/*

*/

.x-toolbar-text { padding-right: 10px; }


/*
  Fixes to normal HTML style after extjs css import
*/

h1 {
  font-size: 2em;
  margin: 0.67em 0px;
}

h2 {
  font-size: 1.6em;
  margin: 0.5em 0px;
}

h3 {
  font-size: 1.2em;
  margin: 0.5em 0px;
}


p {
  margin: 1em 0px;
}

input:not([type]), input[type="text"], input[type="password"] {
  padding: 1px 0px;
}

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
  padding: 1px 6px;
}

ul, ol {
  padding-left: 2em;
}

li {
  list-style: disc;
}

.x-boundlist-item {
    list-style: none;
}

.x-boundlist ul, .x-boundlist ol {
    padding-left: 0px;
}

i, cite, em, var, address {
  font-style: italic;
}

strong, b {
  font-weight: bolder;
}


/* take up the whole page and match bisque image viewer background color */
#drawing_canvas_background {
  width: 100%;
  height: 100%;
  background-color: #434343;
}

/* Circular cursor that follows mouse.
   Make it a circle with radius matching brush diameter */
#drawing_cursor1, #drawing_cursor2 {
  position: fixed;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: transparent;
  height: 30px;
  width: 30px;
  left: 0px;
  top: 0px;
  pointer-events: none;
}

/* One cursor layer is a dotted circle with color matching label color */
#drawing_cursor1 {
  border: 5px dotted;
}

/* The other cursor layer is a negative of what is below it. This will always
   be visible. */
#drawing_cursor2 {
  border: 2px #f7f8fa solid;
  mix-blend-mode: difference;
}

/* Set origin for all images and canvas as the center of the image (-50%).
   image-rendering: pixelated uses nearest neighbor interpolation, instead
   of bilinear. This is important for pixel-level mask editing, so no blurring
   occurs when rendering */
#drawing_img_seg, #drawing_img_orig, #drawing_canvas {
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
  position: absolute;
}

/* Prevents clicking on an image from having any action. Pointer events
   are captured in JS code for drawing. */
#drawing_img_orig {
  pointer-events: none;
}

 

/*************************************************************************
  BQ.selectors.Resource
*************************************************************************/

.units label {
    margin: 2px 0px 0px 10px;
}

div.units {
    margin: 3px 0px 0px 0px !important;
    top: 0px !important;
}

.numberlabel {
    margin: 0px 0px 0px 10px;
}

.invalid {
    background: #ffcccc;
    /*border: #FF0000 solid 1px;*/
    border-radius: 5px;
    -moz-border-radius: 5px;

    -moz-box-shadow: 0px 0px 5px #ffcccc;
    -webkit-box-shadow: 0px 0px 5px #ffcccc;
    box-shadow: 0px 0px 5px #ffcccc;
}

.autoloaded {
    background: rgba(73, 199, 244, 0.2);
    border-radius: 5px;
    -moz-border-radius: 5px;

    -moz-box-shadow: 0px 0px 5px rgba(73, 199, 244, 0.2);
    -webkit-box-shadow: 0px 0px 5px rgba(73, 199, 244, 0.2);
    box-shadow: 0px 0px 5px rgba(73, 199, 244, 0.2);
}

/*
resourcerenderer
*/

.resourcerenderer {
    margin: 5px 0px 0px 0px;
    padding: 6px;
}

.resourcerenderer label {
    /*margin: 10px 10px 5px 2px;
    padding: 4px 0px 0px 0px; */
    margin-bottom: 5px;
    display: block;
    /*float: left;*/
}

.resourcerenderer .x-toolbar-text {
    display: inline;
    padding: 4px 5px 0px 5px;
}

.resourcerenderer .bq-image-viewer {
    margin-top: 15px;
}

.resourcerenderer .ImageCompact {
    margin: 5px 5px 0px 1px !important;
    float: none !important;
}

/*
selectors
*/

.selector {
    margin: 2px 2px 0px 4px;
    padding: 4px 4px 4px 4px;
}

.selector .number {
    margin-right: 5px;
}

/*
renderer
*/

.renderer {
    margin-top: 15px;
}

.renderer label {
    font-size: 16px;
    font-family: Georgia, serif;
    font-weight: normal;
    margin: 0px 0px 5px 0px;
}

.renderer .tagger {
    border: 1px solid #CCCCCC;
}

/*
file renderer
*/

.download {
    background-image: url('/core/images/toolbar/download.png');
    background-position: center center;
    background-repeat: no-repeat;
    padding: 4px;
}

.selector .group {
    border: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    /*padding: 4px;*/
}

.selector .group .x-panel-header {
    background: transparent;
    border: none;
    box-shadow: none;
}

.selector .group .x-panel-header .x-header-text {
    font-family: Georgia, serif;
    font-weight: normal;
    font-size: 14px;
    color: #333333;
    background: #eeeeee;
    padding: 0px 5px 0px 5px;
    margin-left: 10px;
}

.selector .group .x-panel-body {
    background: transparent;
    border: none;
    box-shadow: none;

    border: #dddddd solid 1px;
    border-radius: 5px;
    -moz-border-radius: 5px;

    position: relative !important;
    top: 10px !important;
    padding-right: 5px;
}

.selector .header {
    padding: 6px 0px 0px 0px;
    background: transparent;
}

.selector .h_heading {
    height: 30px;
    padding-top: 8px;
    vertical-align: middle;
    text-align: right;
    margin: 0px 5px 0px 5px;
    font: normal 12px/14px Inter,arial,verdana,sans-serif;
    color: black;

}

.selector .v_heading {
    text-align: left;
    margin: 8px 5px 0px 12px;
    font: normal 12px/14px Inter,arial,verdana,sans-serif;
    color: black;
}

.dataset .x-box-target {
    height: 100%;
}


/*-------------------------------------------------------
  extjs fixes
-------------------------------------------------------*/

.webapp .x-btn-group-default-framed {
    background-color: #DDDDDD;
    border-color: #BBBBBB;
}

.webapp .x-menu-body {
    background-color: #f0f0f0 !important;
}

/*.x-btn-icon-text-left .x-btn-icon-el {
    background-position: center center;
}*/

/*-------------------------------------------------------
  html styles
-------------------------------------------------------*/

body#webapp {
    background-color: white !important;
}

.webapp h2 {
  clear: left;
}

.webapp h3 {
    font-size: 18px;
}

.webapp .content {
  margin: 0px 20px 0px 20px;
}

.webapp .content p {
  text-align: left;
}

.bordered {
  /*border-radius: 5px;
  -moz-border-radius: 5px;*/
  border: 1px solid #CCCCCC; /* #006699;*/
}

ol.method-steps {
    padding-left: 0;
}

ol li {
    list-style-type: decimal;
    list-style-position: inside;
}

.heading-2 {
    font-family: Georgia, serif;
    font-weight: normal;
    font-size: 28px;
    clear: left;
    margin: 0.5em 0px;
}

/*-------------------------------------------------------
  scrollbars
-------------------------------------------------------*/

.webapp ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.webapp ::-webkit-scrollbar-track {
    background-color: transparent;
}

.webapp ::-webkit-scrollbar-track:hover {
    border-radius: 6px;
    background-color: rgba(0,0,0,0.2);
}

.webapp ::-webkit-scrollbar-thumb {
    /*background-color: transparent;*/
    /*-webkit-box-shadow: none;*/
    border-radius: 6px;
    background-color: rgba(0,0,0,0.05);
}

.webapp ::-webkit-scrollbar-thumb:hover {
    border-radius: 6px;
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);*/
    background-color: rgba(0,0,0,0.4);
}


/*-------------------------------------------------------
  MAIN
-------------------------------------------------------*/

.webapp .main {
  /*margin-right: 340px;*/
}

.webapp img#thumbnail {
    float: right;
    margin: 0px 30px 10px 30px;
}

/*-------------------------------------------------------
  HELP
-------------------------------------------------------*/

.help {
    padding: 20px 10px 10px 0px;
    background-color: white;
}

.help .x-panel-header {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.x-splitter {
    background-color: white;
    /*
    margin: 22px 0px 20px 0px;
    background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FFFFFF), to(#DDDDDD));
    background-image: -moz-linear-gradient(right, #FFFFFF,#DDDDDD);
    background-image: linear-gradient(right, #FFFFFF,#DDDDDD); */
}

.help .help-container {
    float: right;
    width: 320px;
    height: 95%;
    /*margin: 0px 10px 10px 10px;*/
    padding: 10px;
    background-color: #E1FFE9;
    border: #CCCCCC solid 1px;
    border-top: none;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.help .help-container img {
  border: solid 1px #999999;
  width: 250px;
}

.help .help-container p {
  text-align: left;
}

.webapp .box {
  background-color: #EEEEEE;
  border-color: #CCCCCC;
  border-style: solid;
  border-width: 1px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  -moz-border-radius: 5px;
}

/*-------------------------------------------------------
  NOTIFICATION
-------------------------------------------------------*/

.webapp .notification {
  padding: 5px 5px 5px 5px;
  background-color: #FFCC66;
  border: #FF6600 solid 2px;
  border-radius: 5px;
  -moz-border-radius: 5px;
}

/*-------------------------------------------------------
  LICENSE
-------------------------------------------------------*/

.license {
    font-style: italic;
    padding: 5px 5px 5px 5px;
    background-color: rgba(255, 204, 102, 0.5);
    border: #FF6600 dotted 1px;
    border-radius: 5px;
    -moz-border-radius: 5px;
}

/*-------------------------------------------------------
  INPUT
-------------------------------------------------------*/

.webapp .input {
}

.webapp .input h3 {
    font-size: 120%;
    margin: 1em 0px 0.6em 0px;
}

/*-------------------------------------------------------
  PARAMETERS
-------------------------------------------------------*/

.webapp .parameters {
}

.webapp .parameters form {
  margin: 0px 0px 0px 0px;
}

.webapp .parameters label {
  width: 15em;
  display: inline-block;
}

.webapp .parameters p {
  margin: 0px 0px 0.4em 0px;
  border-bottom-color: #BBBBBB;
  border-bottom-width: 1px;
}

.webapp .parameters em {
  font-size: 75%;
}

.webapp .parameters .thumbnail {
  height: 180px;
}

.webapp .parameters .viewer {
  position: relative; top: 0px; left: 0px;
}


/*-------------------------------------------------------
  RUN
-------------------------------------------------------*/

.webapp .run {

}

.webapp .run p {
    margin: 0px;
}

.webapp .run button {
    padding: 6px;
    min-height: 30px;
    min-width: 90px;
}

.webapp .run-status {
    margin-top: 15px;
}

/*-------------------------------------------------------
  RESULTS
-------------------------------------------------------*/

.webapp .results {

}

.webapp .results h3 {
    font-size: 140%;
}

.webapp .results .error {
    color: red;
}

.webapp .results .good {
    color: green;
}

.webapp .imageviewer {
  margin-top: 15px;
  position: relative;
  top: 0px;
  left: 0px;
  height: 400px;
  width: 100%;
}

.webapp .results .image_viewer_display {
  /*height: 440px;*/
}

.webapp .plotter {
  margin-top: 15px;
  position: relative;
  top: 0px;
  left: 0px;
}

.webapp .plotter>div {
  margin-top: 15px;
}

/*******************************************************************************
Author: Dmitry Fedorov
Copyright: 2015 (C) Center for Bio-Image Informatics, University of California at Santa Barbara
*******************************************************************************/

/* ctyles for browser */

.table {
    background-image: url('/core/plugins/table/icons.svg');
    background-position: center center;
    background-size: 220px;
    background-repeat: no-repeat;
}

.table .x-panel {
    opacity: 0.8;
}

.resicon.table {
    background-image: url('/core/plugins/table/icons.svg');
    background-position: center top;
    background-size: 100px;
    background-repeat: no-repeat;
}

.resicon.table.ImageCard, .resicon.table.ImageFull {
    /*background-size: 270px;*/
}

.resicon.gridIcon.table {
    background-image: url('/core/plugins/table/icons.svg');
    background-size: 35px;
    background-position: 2px 3px;
}

.resicon.table .lblHeading1 {
    margin-top: 95px;
    background: transparent;
    font-weight: 400;
    font-size: 14px;
    text-shadow: none;
    max-height: 50px;
    overflow: hidden;
    text-align: center;
}

.resicon.table .lblHeading2, .resicon.table .lblContent {
    display: none;
}

.resicon.table.ImageCard .lblHeading1, .resicon.table.ImageFull .lblHeading1  {
    margin-top: 60px;
}

/*
menu styles
*/

.tableio .viewoptions {
    position: absolute;
    z-index: 25 !important;
    width: 32px !important;
    height: 32px !important;
    left: 80px !important;
    top: 10px !important;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;

    background-position: -34px -97px;
}

.tableio .fullscreen {
    position: absolute;
    z-index: 25 !important;
    width: 32px !important;
    height: 32px !important;
    right: 10px !important;
    top: 10px !important;
    bottom: auto !important;
    left: auto !important;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/core/images/viewer/icons_viewer.svg');
    background-size: 200px;

    background-position: -34px -162px;
}

/*
tree styles

    //group:    'icon-group', use default icons
    table:    'icon-table',
    matrix:   'icon-matrix',
    vector:   'icon-vector',
    image:    'icon-image', // not sure how we will identify this
*/

.tableio .table_main .tabs .x-tab-bar {
    margin-top: 5px;
}

.tableio .bq_table_panel {
    background-color: white;
}

.tableio .bq_table_panel .tabs {
    margin-top: 5px;
}

.tableio .bq_table_panel .icon-group .x-tree-icon {
    background-image: url('/core/plugins/table/icons_tree.svg');
    background-repeat: no-repeat;
    background-size: 70px;
    background-position: -18px 2px;
}

.tableio .bq_table_panel .table_tree {
    margin: 5px;
}

/*************************************************************
Icons
*************************************************************/

.bq_table_panel .icon_table {
    background-image: url(/core/plugins/table/icons_toolbar.svg);
    background-size: 22px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 1px 1px;
}

/* search bar */

.bq_table_panel .search_field input {
    padding: 4px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    height: 26px;
    background: rgb(211, 225, 241);
}

.bq_table_panel .search_field input:hover {
    -webkit-transition: border-color 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
    -moz-transition: border-color 0.3s ease-out, -moz-box-shadow 0.3s ease-out;
    -o-transition: border-color 0.3s ease-out, -o-box-shadow 0.3s ease-out;
    transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;
    border-color: #0099FF;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
    box-shadow: 0px 0px 8px 0px rgba(0, 153, 255, 1);
}



/*******************************************************************************
 Author: Dima Fedorov <dima@dimin.net>
 Copyright Center for Bio-Image Informatics, UCSB
*******************************************************************************/

.textio .editor {
    font-family: monospace;
    white-space: pre;
    border: 0px;
    padding: 15px;
}

/* ctyles for browser */

.LightShadow.text {
    background-image: url('/core/plugins/text/text.svg');
    background-position: center center;
    background-size: 150px;
    background-repeat: no-repeat;
}

.LightShadow.text .x-panel {
    opacity: 0.8;
}

.resicon.text {
    background-image: url('/core/plugins/text/text.svg');
    background-position: center top;
    background-size: 100px;
}

.resicon.text.ImageCard, .resicon.text.ImageFull {
    /*background-size: 270px;*/
}

.resicon.gridIcon.text {
    background-image: url('/core/plugins/text/text.svg');
    background-size: 29px;
    background-position: 6px 0px;
}

.resicon.text .lblHeading1 {
    margin-top: 125px;
    background: transparent;
    font-weight: 400;
    font-size: 14px;
    text-shadow: none;
    max-height: 50px;
    overflow: hidden;
    text-align: center;
}

.resicon.text .lblHeading2, .resicon.text .lblContent {
    display: none;
}

.resicon.text.ImageCard .lblHeading1, .resicon.text.ImageFull .lblHeading1  {
    margin-top: 60px;
}



.pipelineio .editor {
    font-family: monospace;
    white-space: pre;
    border: 0px;
    padding: 15px;
}

/* ctyles for browser */

.LightShadow.pipeline {
    background-image: url('/core/plugins/pipeline/text.svg');
    background-position: center center;
    background-size: 150px;
    background-repeat: no-repeat;
}

.LightShadow.pipeline .x-panel {
    opacity: 0.8;
}

.resicon.pipeline {
    background-image: url('/core/plugins/pipeline/text.svg');
    background-position: center top;
    background-size: 100px;
}

.resicon.pipeline.ImageCard, .resicon.pipeline.ImageFull {
    /*background-size: 270px;*/
}

.resicon.gridIcon.pipeline {
    background-image: url('/core/plugins/pipeline/text.svg');
    background-size: 29px;
    background-position: 6px 0px;
}

.resicon.pipeline .lblHeading1 {
    margin-top: 125px;
    background: transparent;
    font-weight: 400;
    font-size: 14px;
    text-shadow: none;
    max-height: 50px;
    overflow: hidden;
    text-align: center;
}

.resicon.pipeline .lblHeading2, .resicon.pipeline .lblContent {
    display: none;
}

.resicon.pipeline.ImageCard .lblHeading1, .resicon.pipeline.ImageFull .lblHeading1  {
    margin-top: 60px;
}

/*******************************************************************************
 Author: Dima Fedorov <dima@dimin.net>
 Copyright Center for Bio-Image Informatics, UCSB
*******************************************************************************/

.systemio .editor {

}

/* ctyles for browser */

.LightShadow.system {
    background-image: url('/core/plugins/system/system.svg');
    background-position: center center;
    background-size: 150px;
    background-repeat: no-repeat;
}

.LightShadow.system .x-panel {
    opacity: 0.8;
}

.resicon.system {
    background-image: url('/core/plugins/system/system.svg');
    background-position: center top;
    background-size: 100px;
}

.resicon.system.ImageCard, .resicon.system.ImageFull {
    /*background-size: 270px;*/
}

.resicon.gridIcon.system {
    background-image: url('/core/plugins/system/system.svg');
    background-size: 29px;
    background-position: 6px 0px;
}

.resicon.system .lblHeading1 {
    margin-top: 125px;
    background: transparent;
    font-weight: 400;
    font-size: 14px;
    text-shadow: none;
    max-height: 50px;
    overflow: hidden;
    text-align: center;
}

.resicon.system .lblHeading2, .resicon.system .lblContent {
    display: none;
}

.resicon.system.ImageCard .lblHeading1, .resicon.system.ImageFull .lblHeading1  {
    margin-top: 60px;
}



/*******************************************************************************
  BisQue branding plug-in, store your logo here
*******************************************************************************/

.toolbar-main .main-logo {
    height: 30px;
    background-image: url('/core/images/bisque_logo_gray.svg');
    background-size: 90px;
}

.viewer .name.logo {
    height: 30px !important;
    background-image: url('/core/images/bisque_logo_gray.svg');
    background-size: 90px;
}

.bq-viewer-movie .logo {
    height: 30px !important;
    background-image: url('/core/images/bisque_logo_gray.svg');
    background-size: 90px;
}

.bq-three-container .logo {
    height: 30px !important;
    background-image: url('/core/images/bisque_logo_gray.svg');
    background-size: 90px;
}