/* --------------------------------------------------------
 *
 *  json-object-editor - v0.10.443
 *  Created by: Corey Hadden
 *
 * -------------------------------------------------------- */
/* required styles */

.leaflet-map-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-pane,
.leaflet-tile-container,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane,
.leaflet-popup-pane,
.leaflet-overlay-pane svg,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	-ms-touch-action: none;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	-webkit-user-drag: none;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container img {
	max-width: none !important;
	}
/* stupid Android 2 doesn't understand "max-width: none" properly */
.leaflet-container img.leaflet-image-layer {
	max-width: 15000px !important;
	}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-tile-pane    { z-index: 2; }
.leaflet-objects-pane { z-index: 3; }
.leaflet-overlay-pane { z-index: 4; }
.leaflet-shadow-pane  { z-index: 5; }
.leaflet-marker-pane  { z-index: 6; }
.leaflet-popup-pane   { z-index: 7; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 7;
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-tile,
.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	     -o-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-tile-loaded,
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	     -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile,
.leaflet-touching .leaflet-zoom-animated {
	-webkit-transition: none;
	   -moz-transition: none;
	     -o-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-clickable {
	cursor: pointer;
	}
.leaflet-container {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-container,
.leaflet-dragging .leaflet-clickable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	}


/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline: 0;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-container a.leaflet-active {
	outline: 2px solid orange;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}


/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}
.leaflet-control-zoom-out {
	font-size: 20px;
	}

.leaflet-touch .leaflet-control-zoom-in {
	font-size: 22px;
	}
.leaflet-touch .leaflet-control-zoom-out {
	font-size: 24px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.7);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover {
	text-decoration: underline;
	}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
	font-size: 11px;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	-moz-box-sizing: content-box;
	     box-sizing: content-box;

	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 19px;
	line-height: 1.4;
	}
.leaflet-popup-content p {
	margin: 18px 0;
	}
.leaflet-popup-tip-container {
	margin: 0 auto;
	width: 40px;
	height: 20px;
	position: relative;
	overflow: hidden;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;

	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4px 4px 0 0;
	text-align: center;
	width: 18px;
	height: 14px;
	font: 16px/14px Tahoma, Verdana, sans-serif;
	color: #c3c3c3;
	text-decoration: none;
	font-weight: bold;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover {
	color: #999;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}
.leaflet-oldie .leaflet-popup-tip-container {
	margin-top: -1px;
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}

/*! esri-leaflet-geocoder - v0.0.1-beta.3 - 2014-02-27
*   Copyright (c) 2014 Environmental Systems Research Institute, Inc.
*   Apache 2.0 License */.geocoder-control-input{position:absolute;left:0;top:0;background-color:#fff;background-repeat:no-repeat;background-image:url(../img/search.png);background-size:26px;border:0;padding:0;text-indent:6px;font-size:13px;height:26px;width:100%;line-height:26px;background-position:right center;cursor:pointer}.geocoder-control{width:26px;height:26px;-webkit-transition:width .175s ease-in;-moz-transition:width .175s ease-in;-ms-transition:width .175s ease-in;-o-transition:width .175s ease-in;transition:width .175s ease-in}.geocoder-control-expanded,.leaflet-touch .geocoder-control-expanded{width:275px}.geocoder-control-input.geocoder-control-loading{background-image:url(../img/loading.gif);background-size:26px}@media only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2){.geocoder-control-input{background-image:url(../img/search@2x.png)}.geocoder-control-input.geocoder-control-loading{background-image:url(../img/loading@2x.gif)}}.geocoder-control-input:focus{outline:0;cursor:text}.geocoder-control-input::-ms-clear{display:none}.geocoder-control-suggestions{width:100%;position:absolute;top:26px;left:0;list-style:none;padding:0;margin:10px 0 0;overflow:hidden;display:none}.geocoder-control-suggestions .geocoder-control-suggestion{font-size:13px;padding:7px;background:#fff;border-top:1px solid #f1f1f1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.geocoder-control-suggestions .geocoder-control-suggestion:first-child{border:0}.geocoder-control-suggestions .geocoder-control-suggestion.geocoder-control-selected,.geocoder-control-suggestions .geocoder-control-suggestion:hover{background:#00c0ff;border-color:#00c0ff}.leaflet-right .geocoder-control-suggestions{left:auto;right:0}.leaflet-right .geocoder-control-input{left:auto;right:0}.leaflet-touch .geocoder-control{width:30px;height:30px}.leaflet-touch .geocoder-control.geocoder-control-expanded{width:275px}.leaflet-touch .geocoder-control-input{height:30px;line-height:30px;background-size:30px}.leaflet-touch .geocoder-control-suggestions{top:30px}.leaflet-oldie .geocoder-control-input,.leaflet-oldie .geocoder-control-suggestions{border:1px solid #999}
@charset "utf-8";
/* JOE UI Styles */
/* theme: #006688, 0,102,136*/

:root {
    --tinymce-offset: 55px;
}
.clear{
    clear:both;
}
.joe-strike{
    text-decoration: line-through;
}
.joe-no-select,
.joe-panel-submenu,
.joe-panel-footer
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.joe-selectable{
    -webkit-touch-callout: all;
    -webkit-user-select: all;
    -khtml-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}
.joe-overlay,joe-overlay{
    font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    /* font-family:'Segoe UI', 'Segoe UI Web Regular', 'Segoe UI Symbol', 'Helvetica Neue', 'BBAlpha Sans', 'S60 Sans', Arial, sans-serif;*/
    color: #068;
    letter-spacing: .05em;
    background-color: rgba(0,0,0,.7);
    z-index: 2000;
    display:none;
    position: fixed;
    transition: .25s;
    opacity:1;
    fill:#068;
}
.joe-block,.joe-overlay{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

.joe-overlay.sans {
    font-family:'Segoe UI', 'Segoe UI Web Regular', 'Segoe UI Symbol', 'Helvetica Neue', 'BBAlpha Sans', 'S60 Sans', Arial, sans-serif;
   /* font-family: "Trebuchet MS", Helvetica, sans-serif;*/
}
@-webkit-keyframes fadeOut {
    0%   {background-color: rgba(0,0,0,.7);}
    100% {background-color: rgba(0,0,0,0);}
}

/* Standard syntax */
@keyframes fadeOut {
    0%   {background-color: rgba(0,0,0,.7);}
    100% {background-color: rgba(0,0,0,0);}
}

.joe-overlay.fade-out{
    -webkit-animation: fadeOut .25s linear ; /* Chrome, Safari, Opera */
    animation: fadeOut .25s linear ;

    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

.joe-overlay.fade-in{
    -webkit-animation: fadeOut .25s linear; /* Chrome, Safari, Opera */
    animation: fadeOut .25s linear;

    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
    -webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
    animation-direction: reverse;
}

.non-link{
    color: inherit;
    text-decoration: none;
}

.hidden{
    transition-delay: .25s;
    opacity:0;
}

.joe-icon,joe-icon{
    background-position:center center;
    background-repeat:no-repeat;
}
joe-icon{

    display:block;
    position: relative;
}

.icon-80{
    width:80px;
    height:80px;
}

.icon-50{
    width:50px;
    height:50px;
}

.icon-40{
    width:40px;
    height:40px;
}
.icon-30{
    width:30px;
    height:30px;
}
.icon-grey > svg{
    fill:#666;
}

.icon-faded{
    opacity:.5;
}
.no-padding{
    padding:0;
}

.lh-30{line-height:30px;}
.lh-40{line-height:40px;}

.clickable{
    cursor:pointer;
    transition:.2s;
}

html.no-touch .clickable:hover{
    background-color:rgba(0,0,0,.15);
    transition:.2s;
}

.joe-half-col{
    width:50%;
    float:left;
    box-sizing: border-box;
}

joe-bigger,.bigger{font-size:1.2em;}
joe-smaller,.smaller{font-size:.8em;}

.margin-10{
    margin:10px;
}

/* ------------------------- BEGin joe-user-cube ---------------------*/
joe-user-cube{
    padding: 2px;
    position:relative;
    font-size: 12px;
    margin: 2px 0px 2px 0;
    width: 22px;
    overflow: hidden;
    height: 22px;
    line-height: 22px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    /* text-shadow: 0 -1px 2px rgba(0,0,0,.4);
    box-shadow: 0 1px 2px rgba(0,0,0,.3); */
    border-radius: 50%;
}
joe-user-cube > span{display:none;}
joe-user-cube.fright{margin-left:5px;}
joe-user-cube.fleft{margin-right:5px;}

/* ------------------------- BEGin JOE-TEXT ---------------------*/

.joe-title, joe-title{
    font-family: 'Segoe UI Semibold','Helvetica Neue', sans-serif;
    font-size: 1em;
    display:block;

}
.joe-title.striped, joe-title.striped{
    background: rgba(0,0,0,.05);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    font-size:1.2em;
}
.joe-subtitle, joe-subtitle{
    font-size:.9em;
    padding:2px 0;
    color: #606060;
}

joe-content{
    display:block;
    font-weight:normal;
    font-size:.9em;
}
.joe-subtext, joe-subtext{
    font-size:.7em;
    font-weight: normal;
    opacity: .7;
    color:#024;

}

joe-subtext{
    display:block;
}
.joe-inline{
    display: inline;
}

joe-boxed,.joe-boxed{
    display: block;
    padding: 8px;
    /* box-shadow: 0 0 5px 0px rgba(0,0,0,.2); */
    margin: 4px 2px;
    border: 1px solid rgba(0,0,0,.1);
}
/* ------------------------- end JOE TEXT ---------------------*/

.joe-fright,joe-fright{  float:right;  }
.joe-fleft,joe-fleft{  float:left;  }
.joe-nofloat{  float:none;  }
.joe-clear,joe-clear{
    clear:both; display:block;
}
.joe-full-right,joe-full-right{float:right;text-align:right;}

.joe-absolute{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.joe-vcenter{
    display: flex;
    align-items: center;
}

/*-------------------------
	BG Color transition
-------------------------*/
.trans-bgcol {
    transition: .2s background-color;
}
/*-------------------------
SVG shadows
-------------------------*/
.svg-shadow > svg{
    -webkit-filter: drop-shadow( 0px 1px 1px rgba(0,0,0,.6) );
            filter: drop-shadow( 0px 1px 1px rgba(0,0,0,.6) ); /* Same syntax as box-shadow */
}


/*-------------------------
	JOE Button
-------------------------*/
#joeDebugMode{
    margin:5px;
    background: rgba(0,0,0,.6);
    z-index: 2001;
    color:#fff;
}
.debug-div{
    float:left;
    height:100%;
    width:50%;
    background:rgba(200,50,0,.5);
    text-align: center;
    /*padding:20px 0;*/
}
html.no-touch .debug-div.ok,.debug-div:hover{
    background:rgba(50,200,0,.5);
}

/* ------------------------- BEGin JOE-BUTTON ---------------------*/
.joe-panel-menu {
    padding: 0 1px 2px 1px;
}
joe-button{
    display:block;
}
.joe-button {
    padding: 8px 16px;
    margin: 5px;
    background-color:#fcfcfc;
    box-shadow: 0 0px 2px 0px rgba(0,0,0,.1);
    cursor: pointer;
    transition: .2s;
    color: #444;
    background-repeat:no-repeat;
    background-position: center center;
    box-sizing:border-box;
    border: 1px solid #fff;
    position: relative;
    font-variant: small-caps;
    line-height:24px;
}
.joe-object-field .joe-button.margined,
 .joe-button.margined {
    margin:10px;
}
html.no-touch joe-button:hover,
html.no-touch .joe-button:hover{
    background-color:#ddd;
    box-shadow: 0 0px 2px 0px rgba(0,0,0,.3);
}

.joe-button.tight{
    font-size:14px;
    padding:2px 5px;
}
.joe-button.center{text-align:center;}
.joe-button.right{text-align:right;}
.joe-button.light{color:#eee;}

.green-text{color:green;}
.red-text{color:red;}
.faded-text{opacity:.5;}

.joe-confirm-button,.joe-green-button{background-color:#6BB476 !important;}
html.no-touch .joe-button.joe-confirm-button:hover, html.no-touch .joe-button.joe-green-button:hover{background-color:#5BD16D !important;color: #fff;} 

.joe-orange-button{background-color:#ff8804 !important;}
html.no-touch .joe-button.joe-orange-button:hover{background-color:#F93 !important;color: #fff;}

.joe-orangegrey-button{background-color:#cb9c6f !important;}
html.no-touch .joe-button.joe-orangegrey-button:hover{background-color:#ff8804 !important; color: #fff;}

.joe-blue-button, .joe-preview-button{background-color:#336699; color:#ddd;}
html.no-touch .joe-button.joe-blue-button:hover,html.no-touch .joe-button.joe-preview-button:hover{background-color:#447799;color: #fff;}

.joe-ai-button{background-color:#88aaff; color:#ddd;}

.joe-red-button{background-color:#Bb6655;}
html.no-touch .joe-button.joe-red-button:hover{background-color:#ff7755;color: #fff;}

.joe-purple-button{background-color:#a3a;}
html.no-touch .joe-button.joe-purple-button:hover{background-color:#e646e6;color: #fff;}

.joe-grey-button{
    background-color: #ccc;
    color: #444;
}

.joe-footer-button {
    float: right;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    min-width: 40px;
    margin: 4px 5px;
    /*border: 1px solid #fff;*/
}


.joe-right-button {  float: right;  }


.joe-left-button{
    float: left;
}


.joe-iconed-button{
    padding-left: 42px;
    background-position: left center;
}

.joe-left-plus-button{
    padding-left: 42px;
    background:url('../img/btns/plus.png') no-repeat left center;

}

.joe-duplicate-button{background-image: url("../img/svgs/__duplicate.svg");background-size: 30px;background-position: 5px;background-color: #fff;}
.joe-history-button{background-image: url("../img/btns/history.png");  }
.joe-comments-button{background-image: url("../img/btns/comment.png");  }
.joe-object-button{background-image: url("../img/btns/object.png");  }
.joe-close-button{background-image: url("../img/btns/close.png"); }
.joe-delete-button{background-image: url("../img/btns/delete.png");     background-size: 30px;
    background-position: 5px center;}
.joe-add-button{background-image: url("../img/btns/add.png");  }
.joe-plus-button{background-image: url("../img/btns/plus.png");  }
.joe-minus-button{background-image: url("../img/btns/minus.png");  }
.joe-submit-button{background-image: url("../img/btns/submit.png");  }
.joe-thumbs_up-button{background-image: url("../img/btns/thumbs-up.png");  }
.joe-thumbs_down-button{background-image: url("../img/btns/thumbs-down.png");  }
.joe-save-button{background-image: url("../img/btns/save_go.png");  }
.joe-quicksave-button{background-image: url("../img/btns/save_stay.png");  }
.joe-list_add-button{background-image: url("../img/btns/list-add.png");  }
.joe-list_delete-button{background-image: url("../img/btns/list-remove.png");  }
.joe-reload-button{background-image: url("../img/btns/reload.png");  }
.joe-view-button{background-image: url("../img/btns/view.png");      background-size: 30px;
    }
.joe-preview-button{background-image: url("../img/btns/view.png");  background-position: 5px center;}
.joe-export-button {
    font-size: 21px;
    line-height: 36px;
    padding: 0;
    text-align: center;
}

/* SVG icon */
.joe-button > svg,
joe-button > svg {
    /* float:left;
    width: 40px;
    margin-left: -10px; */
    fill: #404040;

}



.joe-iconed-button > svg {
    margin-left: 0;
    float:left;
    width: 40px;
    margin-left: -10px;
}
.joe-svg-button{
    padding-left: 40px ;
}
.joe-svg-button > svg{
    position: absolute;
    left:0;
    width: 40px;
    top:0;
}
joe-button > svg {
    position: absolute;
    left:0;
    width: 40px;
    top:0;
}

.joe-iconed-button.joe-svg-button{
    background-size: 30px;
    background-position: 5px center;
    padding-left:60px;
}

.joe-iconed-button.joe-svg-button > svg{
    left: 30px;
}

.small-size .joe-svg-button{
    width:auto;
}

.small-size .joe-button.joe-footer-button.joe-svg-button {
    width: 40px;
    padding: 0;
}
.small-size .joe-button.joe-footer-button.joe-svg-button button-text {
    display:none;
}
.small-size .joe-footer-button.joe-iconed-button.joe-svg-button{
    background-size: 30px;
    background-position: 5px center;
    padding-left: 0;
    width: 64px;
}

.joe-footer-button {
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,.4);
    border-radius: 4px;
}

joe-button-wrapper.bottom joe-button.joe-button {
    border-radius: 0;
    margin: 10px -10px -10px -10px;
    box-shadow:none;
}
/*.joe-sidebar_right-button{background-image: url("../img/btns/sidebar-right.png");  }
.joe-sidebar_left-button{background-image: url("../img/btns/sidebar-left.png");  }*/
/* ------------------------- END JOE-BUTTON ---------------------*/

/* ------------------------- BEGin JOE-BLOCK-BUTTON ---------------------*/
.joe-block-button {
    background-color: rgba(0,0,0,.1);
    width: 40px;
    text-align: center;
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    cursor: pointer;
    line-height: 2;
    color: #fff;
    background-position:center center;
    background-repeat:no-repeat;
    opacity:.4;
}
.joe-block-button.left{
    left:0;
    right:auto;
}

html.no-touch .joe-block-button:hover{
    opacity:.9;
}
/* ------------------------- END JOE-BLOCK-BUTTON ---------------------*/

.goto-icon{
    background-image:url("../img/goto-arrow.png");
}
html.no-touch .goto-icon:hover{
    background-image:url("../img/goto-arrow.png");

}

.joe-selection-indicator {
    float: left;
    height: 35px;
    line-height: 35px;
    padding: 5px;
}


/*-------------------------
	UI Overlays
-------------------------*/

.joe-overlay.active{
    display:block;
}
.joe-overlay.compact{
    text-align:center;
}

.joe-overlay.mini-active{
	display:block;
}
/*-------------------------
	UI Panels
-------------------------*/
joe-panel{
    display:block;
}
.joe-overlay-panel {
    background: #f7f7f7;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    transition: .25s;
}

.mini-active .joe-overlay-panel{
display:none;
}
.active .joe-overlay-panel{
display:block;
}


.joe-overlay-panel.offscreen-bottom{
    top:110%;
    bottom:-100px;
}
.joe-overlay-panel.centerscreen-collapse{
    top:50%;
    bottom:50%;
    overflow:hidden;
}

body >.joe-overlay-panel,
.joe-overlay-panel.shadowed{
    box-shadow:0 0 4px 0 rgba(0,0,0,.7);
    margin:10px;
}

.joe-panel{
    position:relative;
}

/*-------------------------
	Mini Panel
-------------------------*/
.joe-mini-panel {
    margin: 100px auto;
    box-shadow: 0 4px 8px 0px rgba(0,0,0,.4);
    position: relative;
    min-height: 250px;
    background: #eee;
    width: 60%;
    min-width:300px;
    display:none;
    z-index:10;
}
.joe-mini-panel.active{
    display:block;
}

.joe-mini-panel .joe-panel-content {
    top: 40px;
}
.joe-mini-editing{
border: 1px inset #007ac2;
}

.joe-mini-panel .joe-field-list-item {
    padding: 10px;
    line-height: 16px;
}
.joe-mini-panel .joe-field-list-item::after{
    display:block;
    height:0;
    width:100%;
    clear:both;
    content:'';
}
/*-------------------------
	UI Panels Floating
-------------------------*/

.compact .joe-overlay-panel {
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
    position: relative;
    width: 50%;
    margin: 20px auto;
    height: 80%;
    text-align: left;
    min-width: 340px;
}


/*-------------------------------------------------------------------->
	UI Panel Header
<--------------------------------------------------------------------*/
joe-panel-header{
    height:40px;
    position:relative;
    background-color: rgba(0,0,0,.1);
    display:block;
/*    border-bottom: 1px solid #eee;
    box-shadow: 0 0 2px 0 rgba(0,0,0,.3);*/
}



joe-panel-header svg{
    height: 40px;
    width:36px;
    fill:#777;
    /* padding: 0 10px; */
    /*margin-right: -5px;*/
}
html.no-touch joe-panel-header svg:hover{

    fill:#222;
    /* padding: 0 10px; */
    /*margin-right: -5px;*/
}

.joe-panel-unsaved{
    display:none;
}
.unsaved-changes .joe-panel-unsaved{
    display:block;
}
html.no-touch joe-panel-header .joe-panel-unsaved svg:hover{
    background:#6BB476;
}

joe-schema-icon svg{
    fill: #068 !important;
}
joe-schema-icon{
    width: 40px;
    height: 40px;
    display: block;
    float: left;
    box-sizing:border-box;
    
}
joe-panel-header joe-schema-icon{
    float: left;
    padding-left:2px;
    box-sizing:border-box;
}

.joe-field-list-item joe-schema-icon {
    margin-top: -6px;
    margin-left: -10px;
    margin-right: 5px;
}
.joe-panel-header-button{
    position: absolute;
    top: 0;
    right: 0;
    line-height: 40px;
    font-size: 14px;
    width: 30px;
    text-align: center;
    cursor: pointer;
    height: 28px;
    background-image: url(../img/joe-sprite.png);
    background-color: #DDD;
    background-color: rgba(0, 0, 0, 0.1);
    background-repeat:no-repeat;
    margin: 5px;
    border: 1px solid #AAA;
}
html.no-touch .joe-panel-header-button:hover{
    background-color: #ccc;
}
.jif-panel-header-button,
.jif-panel-submenu-button,
.jif-panel-button,
joe-panel-button{
    position:relative;
    line-height: 40px !important;
    font-size: 14px;
    width: 40px;
    text-align: center;
    cursor: pointer;
    height: 40px;
    background-repeat:no-repeat;
    background-position: center;
/*    background-color: #DDD;
    background-color: rgba(0, 0, 0, 0.1);*/

    font-size: 32px;
    color:#444;
    transition: .1s;
}
joe-panel-button{
    font-size:16px;
}
joe-panel-button svg{
    color:#444;
}
html.no-touch .jif-panel-header-button:hover,
html.no-touch .jif-panel-submenu-button:hover,
html.no-touch .jif-panel-button:hover,
html.no-touch joe-panel-button:hover{
    background-color: #ccc;
    color:#007ac2
}
joe-panel-button:hover svg{
    fill:#007ac2;
}
html.no-touch .joe-panel-header-button:active,
html.no-touch .jif-panel-header-button:active,
html.no-touch .jif-panel-submenu-button:active,
html.no-touch .jif-panel-button:active{
    background-color: #007ac2;
    color:#eee;
}
.jif-panel-header-button{
    position: absolute;
    top: 0;
    right: 0;
}

.joe-panel-close{
    right: 0;
    background-position: -110px -11px;
}

.joe-panel-close{
    right: 40px;
    background-position: -110px -11px;
}

.joe-panel-speech{
    right: 80px;
    background-position: -210px -11px;
}
.joe-panel-speech.recording{
    color:red;
    right: 80px;
    background-position: -210px -11px;
}

.joe-panel-reload{
    right: 40px;
    background-position: -210px -11px;
    display:none;
}

.joe-panel-title-holder{
    padding-right: 80px;
    height:40px;
}
.joe-panel-title{
    padding: 5px;
    color: #066;
    line-height: 30px;
    overflow: hidden;
    font-size: 1.1em;
    font-family: 'Segoe UI Semibold','Helvetica Neue', sans-serif;
}

.joe-panel-title.subtitled {
    line-height: 16px;
    font-size: 1.0em;
}

.joe-header-back-btn{
    background-position: -261px -11px;
    float: left;

    margin-right: 10px;
    color: #888;
    position:relative;
}
.jif-header-back-btn{
    float: left;
    color:#666;
    position:relative;
    font-size:16px;
}


joe-panel-header-buttons{
    position: absolute;
    top:0;
    height:40px;
}
joe-panel-header-buttons.right-side > *,
joe-panel-header-buttons.left-side > *{
    position: relative;
    right:auto;
    left:auto;
}
joe-panel-header-buttons.right-side > *{
    float:right;
}
joe-panel-header-buttons.left-side > *{
    float:left;
}
/*-------------------------
Subset Selector
-------------------------*/
.joe-subset-selector {
    line-height: 40px;
    padding: 0 8px;

    cursor: pointer;
    z-index: 10;
    position: absolute;
    right: 75px;
    min-width: 100px;
}

.joe-subset-selector .selector-option{
    background-color: #ddd;

    padding: 0 7px;
}
html.no-touch .joe-subset-selector .selector-option:hover{
 /*   background: rgba(0,0,0,.4);*/
    background-color:#bbb;
}
.joe-subset-selector .selector-label{
    background: rgba(0,0,0,.2);

    /* padding-right: 30px; */
}

.joe-subset-selector .selector-options{
    display:none;
}
.joe-subset-selector.active .selector-options{
    display:block;
}


/*---------------------------------------
	Filter and Search
---------------------------------------*/
.jif-panel-submenu-button{
    float:left;
}
.joe-submenu-search {
    float: left;
}

/*---------------------------------------
  Speech Recognition
---------------------------------------*/
.joe-panel-speech .wit-microphone{
  
}

/*------------------------------------------------------------------
	JOE GRID
------------------------------------------------------------------*/


table.joe-grid-table {
    min-width: 100%;
    min-height: 100%;
}
.joe-grid-checkbox{
    width: 40px;
    min-height: 40px;
    text-align: center;
}
td.joe-grid-cell {
    vertical-align: top;
    border-right:1px solid rgba(255,255,255,.9);
        font-size: 12px;
    border-top: 1px solid rgba(255,255,255,.9);
    min-width: 240px;
}

.joe-grid-cell .joe-content-option{
    position:relative;
    display:block;
    margin:4px 2px;
}
/*------------------------------------------------------------------
	JOE TABLE VIEW
------------------------------------------------------------------*/
.joe-table-head th {
    padding:5px;
    text-align:left
}

table.joe-item-table {
    width: 100%;
}

/* table TH */
.joe-table-head th {
    text-align: left;
    padding: 10px 5px;
}

/* table TR */
tr.joe-panel-content-option{
    height:40px;
}
html.no-touch tr.joe-panel-content-option:hover{
background-color:#eee;
}

.joe-table-checkbox{
    width: 40px;
    min-height: 40px;
    text-align: center;
}

.joe-item-table td{
    padding:5px;
    border-bottom:1px solid #eee;
}


/*------------------------------------------------------------------
	UI Panel Content
------------------------------------------------------------------*/

.joe-panel-content,joe-panel-content {
    display:block;
    min-height:50px;
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 5px;
    right: 5px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 5px 0;
    transition: .2s ease;
}
.joe-panel-content.joe-style-inset{
    background:#fff;
    box-shadow:inset 0 0 2px 0 rgba(0,0,0,.3);
    border:1px solid #fefefe;
    border-right:0px;
}

.no-footer-menu .joe-panel-content{
bottom:5px;
}
.joe-overlay-panel.show-filters .joe-panel-content{
    left:260px;
}
.joe-overlay-panel.show-aggregator .joe-panel-content{
    right:260px;
}


/*---------------------------------------
	JOE TABBED CONTENT
---------------------------------------*/
.joe-tabbed-content .joe-field-container {
    display: none;
}
.joe-tabbed-content .joe-content-label {
    display: none;
}
.joe-tabbed-content .joe-content-section {
    display: none;
}

.joe-tabbed-content .joe-content-section.active,
.joe-tabbed-content .joe-content-section.active .joe-field-container
{
display:block;
}

/*---------------------------------------
	Panel Submenu
---------------------------------------*/
.joe-panel-content.with-submenu{
    top:80px;
}

.joe-panel-submenu {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
   /* height: 30px;
    margin: 4px 5px;*/
    height: 40px;
    margin: 0px 5px;
    line-height: 30px;
}

.joe-submenu-buttons{
    text-align: center;
}

.joe-submenu-buttons > div {
    display: inline-block;
}

.joe-button.joe-submenu-button {
    background-color: transparent;
    padding: 5px 10px;
    margin: 0;
    /* border: none; */
    box-shadow: none;
}

html.no-touch .joe-button.joe-submenu-button:hover {
    background: rgba(0,0,0,.1);
}

/*-------------------------
	Aggregate
-------------------------*/
.jif-panel-submenu-button.joe-aggregator-toggle {
    background-repeat:no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("../img/btns/aggregator.png");
    background-size:27px;
    float:right;
    background-size: 75%;

}
.joe-aggregator-holder {
    background: #fff;
    position: absolute;
    right: 5px;
    top: 80px;
    bottom: 50px;
    width: 254px;
    border-right: 1px solid #ccc;
    display:none;
    overflow:auto;
    font-size:14px;
}

.joe-overlay-panel.show-aggregator .joe-aggregator-holder{
    display:block;
}
/*-------------------------
	Filters
-------------------------*/

.jif-panel-submenu-button.joe-filters-toggle {
    margin-right: 5px;
    background-repeat:no-repeat;
    background-position: center center;
    background-image: url("../img/btns/filter.png");
    background-size:27px;

}

.joe-filters-holder {
    background: #fff;
    position: absolute;
    left: 5px;
    top: 80px;
    bottom: 50px;
    width: 254px;
    border-left: 1px solid #ccc;
    display:none;
    overflow:auto;
    font-size:14px;
}

joe-count-indicator {
    position: absolute;
    display: block;
    font-size: 8px;
    color: #fff;
    background: #666;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    margin: 4px;

    width: 10px;
    height: 10px;
    line-height: 15px;
    font-family: sans-serif;
}
joe-count-indicator.active{
    background-color: #066;
}

joe-count-indicator.count{
    margin: 2px;

    width: 14px;
    height: 14px;
    background-color: #066;
}
.joe-overlay-panel.show-filters .joe-filters-holder{
    display:block;
}
/*.joe-filters-holder h4 {
    padding: 5px 6px;
    padding-bottom: 0px;
}*/

joe-menu-label {
    padding: 5px;
    background-color: rgba(0,0,0,.1);
    display:block;

    /* -webkit-user-select: none; */
}

joe-stripe-color{
    display:block;
    position:absolute;
    top:2px;
    left:1px;
    width:4px;
    bottom:2px;
    opacity:.8;
    transition:.2s;
}

html.no-touch joe-stripe-color:hover{
    width:7px;

}
joe-bg-color{
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0;
    opacity:.5;
}

joe-border-color {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 2px;
}

option-count {
    float: right;
    opacity: .5;
}
/*subset option */
joe-subset-option,
joe-filter-option{
    display:block;
    position:relative;
}

.joe-subset-option,
.joe-filter-option{
    padding: 6px 10px;
    cursor: pointer;
}
.joe-subset-option.active{
    background-color:#bbb;
}

.joe-subset-option.clear-filters{
    border-top:1px solid #eee;
}
/*filter options */

.joe-filter-option {
    padding: 5px 5px 5px 0px;
    cursor: pointer;
    line-height:21px;
}

html.no-touch .joe-subset-option:hover,
html.no-touch .joe-filter-option:hover{
    background-color:rgba(0,0,0,.1);
}


.joe-filter-option.active .joe-option-checkbox,
.active.joe-option-checkbox{
    background-color: #5599cc;
}
.joe-option-checkbox {
    position: relative;
    background-color: #eee;
    width: 10px;
    height: 10px;
    float: left;
    margin: 5px;
    margin-left:10px;
    border: 1px solid #bbb;
}


input.joe-submenu-search-field {
    padding: 0 5px;
    width: 25%;
    min-width: 200px;
    margin: 5px;
    border: none;
    height: 30px;
    box-shadow: inset 0 0 2px 0px rgba(0,0,0,.5);
    margin-left:0;
    /*padding-left:30px;*/
    box-sizing: border-box;
}
input.joe-submenu-search-field:focus{
    /*padding-left:5px;*/
}
.joe-submenu-itemcount {
    float: left;
    padding-right: 1px;
    padding-top: 9px;
    font-size: 12px;
    color:#999;
}
joe-option-group{
    display:block;
    box-sizing: border-box;
    background:rgba(0,0,0,.05);
    border-bottom:1px solid #ddd;
    border-top:1px solid #ddd;
}
joe-option-group joe-option-group{
    padding-left:10px;
}
joe-option-group.collapsed{
    border:none;
}
joe-option-group > joe-menu-label{
    display:block;
    cursor:pointer;
    background:none;
    padding-left:30px;
    background: url(../img/btns/minus.png) 2px 6px no-repeat;
    background-size: 24px;
    line-height: 24px;
}
joe-option-group.collapsed > *{
    display:none;

}
joe-option-group.collapsed > joe-menu-label{
    display:block;
    background: url(../img/btns/plus.png) 2px 6px no-repeat;
    background-size: 24px;

}

joe-subset-option.joe-group-option,
joe-filter-option.joe-group-option {
    margin: -5px -5px -5px -2px;
}

/*-------------------------
	Submenu selectors
-------------------------*/
.joe-submenu-selector {
    float: right;
    height: 40px;
    /* line-height: 250%; */
    width: 40px;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-transition: width .2s;
    font-size: 20px;
}
.joe-submenu-selector.expanded {
    width: 100%;
    background:#eee;
}
.joe-submenu-selector.expanded {
    width: 100%;
    background: #eee;
    position: absolute;
    top: 0;
    z-index: 2;
}
.small-size .joe-submenu-selector.expanded {
    /*width:40px*/
    
}

/*label*/

/*joe-submenu-selector-options*/
joe-submenu-selector-options{
    display:none;
}
.joe-submenu-selector.expanded  joe-submenu-selector-options{
    display:block;
    position: absolute;
    right: 40px;
    z-index:100;
    background:#eee;

}
.small-size .joe-submenu-selector.expanded  joe-submenu-selector-options{
        min-width: 50%;

}
/*button */
.joe-selector-button{
    float:right;
    position: relative;
    font-size:20px;
    height: 40px;
    width: 40px;
    cursor: pointer;
    background-position:center;

}

.joe-selector-button.selector-label{
    line-height: 38px;
    font-size: .9em;
}
/*.joe-submenu-selector:hover .selector-label,*/
.joe-submenu-selector.expanded .selector-label{
        float: left;
}

.joe-submenu-selector .selection-label{
    position:absolute;
    text-align:center;
    font-size:12px;
    line-height:16px !important;
    top:0;
    left:0;right:0;
}
/*-------------------------
	viewmode selector
-------------------------*/

.joe-viewmode-selector{
    padding-left: 5px;
    box-sizing: content-box;
}
/*-------------------------
	list sorter
-------------------------*/
.joe-list-sorter {
    float: right;
    height: 40px;
    line-height: 40px;
    display:block;
    
}
.joe-list-sorter-icon{
    height: 40px;
    width: 40px;
    height: 40px;
    float: left;
    fill: #999;
    cursor:pointer;
}
html.no-touch .joe-list-sorter-icon:hover{
    background-color: #ccc;
    fill: #444;
}
.joe-list-sorter select{
    font-size: 16px;
    cursor:pointer;
    margin-right:10px;
}

/*.small-size .joe-list-sorter{
    padding-left:0
}*/
/*-------------------------
	keyword=link
-------------------------*/
joe-keyword-link{
    padding:8px;
    cursor:pointer;
    display:inline-block;
    transition:.2s;
    border:1px solid #ddd;
    margin: 4px 4px 6px 0px;
}

html.no-touch joe-keyword-link:hover{
    background:#ddd;
    color:#222;
}

/*-------------------------
	View Modes
-------------------------*/
/*.joe-submenu-viewmodes {
    float: right;
    height: 40px;
    /!* line-height: 250%; *!/
    width: 40px;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-transition: width .2s;
}
.joe-submenu-viewmodes:hover{
    width:120px;
}
.joe-submenu-viewmodes.expanded{
    width:80px;
}*/

.joe-viewmode-button {

    background-image: url(".././img/btns/view-list.png");
    background-repeat:no-repeat;
    background-position: center center;
}
.joe-viewmode-button.grid-button{
    background-image: url(".././img/btns/view-grid.png");
}
.joe-viewmode-button.table-button{
    background-image: url(".././img/btns/view-table.png");
}
/*-------------------------
	Column Counts
-------------------------*/

/*-------------------------
	List Options
-------------------------*/
.joe-list-right{
    float:right;
    text-align:right;
}
joe-option{
    display:block;
    box-sizing: border-box;
}
.joe-panel-content-option {
    /* height: 40px; */
    /* line-height: 40px; */
    /*padding: 10px 10px 10px 10px;*/
    position: relative;
    /* min-height: 30px; */
    font-size: 14px;
    clear:both;
    border-bottom: 1px solid #e1e1e1;
    box-sizing: border-box;
}

/*-------------------------
	// MULTI COLS
-------------------------*/
.multi-col .joe-panel-content-option{
    float:left;
    clear: none;
}
.multi-col .joe-panel-content-option-content {
    min-height: 120px !important;
}

.multi-col .joe-panel-content-option.item-menu{
    padding-bottom:55px;
}

/*.cols-2 .joe-panel-content-option,.cols-3 .joe-panel-content-option,.cols-4 .joe-panel-content-option,.cols-5 .joe-panel-content-option{
    float:left;
    clear: none;
}*/
/*.cols-2 .joe-panel-content-option-content ,.cols-3 .joe-panel-content-option-content,.cols-4 .joe-panel-content-option-content,.cols-5 .joe-panel-content-option-content {
    min-height: 60px;
}*/
.cols-2 .joe-panel-content-option{  width:49%;  }
/*
.cols-2 .joe-panel-content-option-content {  min-height: 60px;  }
*/

.cols-3 .joe-panel-content-option{  width:32%;  }
/*
.cols-3 .joe-panel-content-option-content {  min-height: 60px;  }
*/

.cols-4 .joe-panel-content-option{  width:24%;  }
/*
.cols-4 .joe-panel-content-option-content {  min-height: 60px;  }
*/

.cols-5 .joe-panel-content-option{  width:19%;  }
/*
.cols-5 .joe-panel-content-option-content {  min-height: 60px;  }
*/
/*-------------------------
	//STRIPE
-------------------------*/

.joe-panel-content-option.striped{
    /*padding-left:10px;*/
}
/*.joe-panel-content-option:hover {
    background-color: rgba(0,0,0,.1);
}*/
.joe-panel-content-option.selected{
    background-color: rgba(0,0,0,.3) !important;
}
html.no-touch .joe-panel-content-option.selected:active{
    background-color: #007ac2 !important;
}
.joe-panel-content-option-stripe {
    position: absolute;
    left: 1px;
    width: 4px;
    top: 3px;
    bottom: 3px;
    opacity: .8;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    transition:.2s;
}
html.no-touch .joe-panel-content-option-stripe.titled:hover {
    width: 8px;
}
.striped .joe-panel-content-option-content{
    margin-left:8px;
}
/*BG*/
.joe-panel-content-option-bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right:0;
    opacity: .5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}
.selected .joe-panel-content-option-bg{
    opacity: .2;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
}

/*-------------------------
	Numbering
-------------------------*/
.numbered .joe-panel-content-option-content {
    padding-left: 30px;
}
.numbered.expander .joe-panel-content-option-content {
    margin-left: 50px;
    padding-left: 10px;
}

.numbered .joe-panel-content-option-icon,
.numbered .joe-panel-content-option-svg{
    margin-left:40px;
}

.joe-panel-content-option-number {
        position: absolute;
    left: 10px;
    padding-top: 8px;
    font-size: 10px;
    color: rgba(0,0,0,.5);
    /*position: absolute;
    left: 10px;
    padding-top: 10px;
    font-size:12px;*/
}


/*-------------------------
	List Item Icon 
-------------------------*/
joe-listitem-icon {
    float: left;
    position: relative;
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    margin-right: 10px;
}


/*-------------------------
	List Item Protected Icon 
-------------------------*/
svg.protected-icon {
    fill: #bbb;
    width: 20px;
    float: right;
    margin: 5px;
}
/*-------------------------
	List Option content
-------------------------*/
.joe-panel-content-option-content {
    padding: 10px 10px 10px 10px;
    position:relative;
    transition:.2s;
    cursor:pointer;
}
.joe-panel-content-option-content::after{
    display:table;
    content:'';
    clear:both;
}

html.no-touch .joe-panel-content-option-content:hover,
.joe-panel-content-option.keyboard-selected .joe-panel-content-option-content{
    background-color: rgba(0,0,0,.1) !important;
}
html.no-touch .joe-panel-content-option-content:active{
    background-color: #007ac2 !important;
    color:#fff;
}
html.no-touch .joe-panel-content-option-content:active h5,
html.no-touch .joe-panel-content-option-content:active h4,
html.no-touch .joe-panel-content-option-content:active h3,
html.no-touch .joe-field-list-item:active h5,
html.no-touch .joe-field-list-item:active h4,
html.no-touch .joe-field-list-item:active h3{

    color:#fff;
}

html.no-touch .joe-panel-content-option-content:active .joe-subtext,
html.no-touch .joe-panel-content-option-content:active joe-subtext{
    color:#ddd;
}

.joe-panel-content-option-icon{
    height:100%;
    min-height:50px; text-align:center; min-width:50px;
    background-position:center center;
    background-repeat:no-repeat;
    margin: 10px;
    margin-bottom: 0;
    border:1px solid #f2f2f2;
    position: relative;
    z-index: 30;
}
html.no-touch .joe-panel-content-option-icon:hover{
    background-color: #333;
}

.joe-panel-content-option-icon img{
    padding:5px;
    opacity:0;
}

.joe-panel-content-option-svg{
    height:100%;
    min-height:50px;
    text-align:center;
    min-width:50px;
    margin: 10px;
    margin-bottom: 0;
    position: relative;
    z-index: 30;
}


/*-------------------------
	Item Menu
-------------------------*/
.joe-panel-content-option-menu {
    float: right;
    z-index: 2;
    position: relative;
    border-left: 1px solid #eee;
    top: 4px;
    margin-left: 4px;
    /* display: table-row; */
    /* height: 100%; */
}
.multi-col .joe-panel-content-option-menu {

    float: none;
    position: absolute;
    bottom: 0;
    top: auto;
    margin:0;
    border:none;
    border-top:1px solid #eee;
    padding:5px;
}
/* .small-size .joe-panel-content-option-menu {
    float: none;
    display: block;
    border: none;
    padding-left:20px;
} */
.small-size .joe-panel-content-option-menu {
    /*float: none;*/
    display: block;
    border: none;
    /* padding-left:20px; */
}
.small-size .expander .joe-panel-content-option-menu {
    /* margin-left:50px; */
}

.joe-field-list-item > .joe-panel-content-option-menu {
    top: 0;
}
.joe-field-list-item.deletable > .joe-panel-content-option-menu {
    right:40px;
}

.joe-option-menu-indicator, joe-om-indicator{
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    border-radius: 25px;
    width: 50px;
    white-space: nowrap;
    height: 50px;
    box-sizing: border-box;
    display: block;
    line-height:1;
}
.joe-option-menu-button{
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    border-radius: 25px;
    width: 50px;
    /*line-height: 30px;*/
    transition: .2s;
    white-space: nowrap;
    height: 50px;
    box-sizing: border-box;
}
.joe-option-menu-button svg {
    width: 40px;
    height: 40px;
    line-height: 0px;
    margin: -10px;
    fill:#068;
}
.joe-option-menu-button svg {
    width: 40px;
    height: 40px;
    line-height: 0px;
    margin: -10px;
}

.joe-option-menu-button.multi-line{
	line-height:1.3em
}

.multi-col .joe-option-menu-button{
    padding:5px 10px;
}
html.no-touch .joe-option-menu-button:hover{
    background:rgba(0,0,0,.1);
}

.joe-field-item .joe-panel-content-option-menu{
    top:-3px;
}

/*-------------------------
	Item Expander
-------------------------*/
.joe-panel-content-option-expander-button {
    width: 40px;
    height: 40px;
    /* display: inline-block; */
    position: absolute;
    left: 5px;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:80%;
    top: 15px;
    opacity:.75;
    border-radius:50%;
    transition:.2s;
    cursor:pointer;
}
/*-------------------------
	Field LIST ITEM CONTENT
-------------------------*/
.joe-field-list-item > .joe-panel-content-option-expander-button {
    top: 4px;
}

.joe-field-item-content > svg {
    float: left;
    width: 40px;
    height: 40px;
    margin: -2px 5px 0px -5px;
    fill: #707070;
    border-right: 1px solid rgba(0,0,0,.1);
}
.joe-field-item.deletable > .joe-panel-content-option-expander-button {
    margin-left: 37px;
    top: 5px;
}

.joe-field-list-item.deletable > .joe-field-item-content {
    margin-right: 40px;
}
.joe-field-list-item.expander.deletable > .joe-field-item-content {
    margin-left: 40px;
}

.joe-field-list-item.deletable > .joe-panel-content-option-expander-button {
    left: 4px;
}

.joe-field-item-content.ui-sortable-handle.nonclickable {
    margin-left: 10px !important;
}

.numbered .joe-panel-content-option-expander-button{
    left:10px;
}
html.no-touch .joe-panel-content-option-expander-button:hover{
    background-color: rgba(0,0,0,.1);
}
.expander-collapsed > .joe-panel-content-option-expander-button,
.expander-collapsed > div > .joe-panel-content-option-expander-button {
    background-image: url("../img/btns/plus.png");
}
.expander-expanded > .joe-panel-content-option-expander-button,
.expander-expanded > div > .joe-panel-content-option-expander-button {
    background-image: url("../img/btns/minus.png");
}

.expander .joe-panel-content-option-content {
    margin-left: 40px;
    min-height: 30px;
}

/*expander content*/
.joe-panel-content-option-expander {
    display:none;
    position:relative;
    height:0;
    overflow:hidden;
    padding: 5px 5px;
    border-top: 1px solid #eee;
    background-color: #f6f6f6;
}
.expander-expanded > .joe-panel-content-option-expander{
    display:block;
    height:auto;
}
.joe-panel-content-option-expander table{
    width:100%;
}
.deletable > .joe-panel-content-option-expander {
    margin-left: 33px;
}
joe-itemmenu-section{
    display: block;
    position: relative;
    margin:5px 0;
}

joe-itemmenu-section{
    display: block;
    position: relative;
    margin:5px 0;
}
joe-itemmenu-section.padded{
    padding:0 10px;
}
joe-itemmenu-section p {
    margin: 2px 0;
    /* padding: 0; */
}
joe-content-section {
    font-size: .9em;
    padding: 10px;
    display: block;
    position: relative;
}
joe-card{

}

.joe-content-sidebar .joe-field-item-content {
    padding:5px;
    font-size:16px;
    line-height: 1.1em;
}
/* .joe-content-sidebar .joe-field-item-content {
    padding:6px;
    font-size: 16px;
    line-height: 1.1em;
	border: 1px solid #00666644;
    box-shadow:0 1px 4px #0002;
    margin:5px;
} */
/*-------------------------
	List Option Buttons
-------------------------*/
.joe-panel-content-option-button {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;

}
html.no-touch .joe-panel-content-option-button:hover{
    background-color: rgba(0,0,0,.1);
}

.joe-option-view-button{
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    padding:5px;
    line-height: 2;
    color: #007ac2;
}
html.no-touch .joe-option-view-button:hover{
    cursor:pointer;
    background-color:rgba(0,0,0,.2);
}
.joe-panel-content-option .joe-button{
    margin:0;
    margin-left:5px;
}


/*-------------------------
	UI Panel Content Types
-------------------------*/
.joe-text-content{
    padding:20px;
}

/*-------------------------
	Boolean field
-------------------------*/
input.joe-boolean-field {
    float: left;
    margin: 5px;
}
.boolean-field small {
    padding: 5px;
    color: #667;
}
.joe-boolean-label{
    display: block;
    cursor: pointer;
    margin: 0 -5px -5px -5px;
    padding: 5px;
}
html.no-touch .joe-boolean-label:hover{

    background: rgba(0,0,0,.1);
}
/*-------------------------
	UI Panel Object Content
-------------------------*/
/*.joe-field-label {
	padding: 5px 10px;
	display: inline-block;
	width: 100px;
}*/

/*-------------------------
    JOE Field list item
-------------------------*/
joe-list-item{
    display:block;
    background: #fff;
}
joe-list-item.deletable {
    padding-right: 32px;
}
.joe-field-list-item {
    padding:0px;
    cursor:pointer;
    position: relative;
    border-bottom:1px solid #eee;
}
.joe-panel-content-option-expander joe-list-item.custom-item {
    padding: 10px;
    margin: 10px 0;
}
.joe-content-sidebar joe-list-item {
    padding: 5px;
    margin: 5px 0;
    border: 1px solid #00666633;
    box-shadow: 0 1px 4px #0002;
}
swipe-option{
    position:absolute;
    top:0;
    width:100px;
    bottom:0;
    box-sizing: border-box;
    padding: 20px 20px 20px 20px;
    display:none;
  }
  swipe-option.left-side{
      left:-100px;
      text-align:right;

  }
  swipe-option.right-side{
    right:-100px;
    text-align:left;
}
  .ui-draggable-dragging swipe-option{
    display:block;
    opacity:.5;
  }
  .ui-draggable-dragging.swiping swipe-option{
    opacity:1;
  }
/*.joe-field-list-item:hover > .joe-field-item-content{
    background-color:rgba(0,0,0,.1);
}*/
html.no-touch .joe-field-item-content:active{
    color:#fff;
    background-color: #007ac2;

}
.joe-field-list-item joe-icon{
    float:left;
}
.joe-field-list-item joe-icon svg{
    width: 32px;
    height: 32px;
    fill:#999
}

/*-------------------------------------------------------------------->
	Editor Form
<--------------------------------------------------------------------*/
.joe-object-content {
    padding-top: 10px;
}

/*----------------------------- Begin Field Container -----------------------------*/
.joe-field-container,
joe-field-container{
    min-width:240px;
    padding: 1px 0;
    display:block;
}

joe-field-container p {
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
}
/*----------------------------- End Field Container -----------------------------*/



/*.joe-object-field{
	margin: 5px;
	border: 1px solid #f2f2f2;
	padding: 5px 0;
}*/
joe-field{
    display: block;
}
.joe-object-field{
    margin: 10px 4px;
    border-top: 1px solid #f2f2f2;
    padding: 10px 5px;
    position: relative;
/*    padding-top: 15px;*/
}
.joe-object-field.hide-label {
    margin-top: 0;
}
.joe-object-field input,
.joe-object-field select{
    color:#424242;
}
/*----------------------------- Begin joe-field-label -----------------------------*/
.joe-field-label {
    padding: 0 4px;
    display: inline-block;
    position: absolute;
    top: -10px;
    background-color: #fff;
    /*  left: 5px;*/
    left: 2px;
    font-size:12px;
    font-weight:700;
    box-sizing: border-box;
    letter-spacing: .1em;
}
.joe-field-label.iconed {
    width: 100%;
    display: block;
    /* position: relative; */
    /* height: 50px; */
    padding-left: 30px;
}
.joe-field-label > svg {
    position: absolute;
    width: 30px;
    height: 30px;
    top: -4px;
    left: 0;
}
.joe-highlighted .joe-field-label {
    color: #DA8D01 !important;
}
.hide-label > .joe-field-label {
    display: none;
}
.joe-field-label .joe-reload-icon {
    font-size: 16px;
    margin: 0 10px;
    cursor: pointer;
    line-height: 14px;
}
/*----------------------------- End joe-field-label -----------------------------*/

/*----------------------------- Begin joe-field-comment -----------------------------*/
.joe-field-comment {
    font-size: 13px;
    padding: 5px 1px;
    letter-spacing: .8px;
    line-height: 16px;
}

.joe-overlay.sans .joe-field-comment {
    font-size: 12px;
    padding: 5px 1px;
    letter-spacing: .8px;
    line-height: 16px;
    padding-top: 0;
    padding-bottom: 8px;
}

.joe-field-comment .joe-button{
    z-index:10;
}
/*----------------------------- End joe-field-comment -----------------------------*/
.joe-tooltip{
    padding: 8px;
    color: #999;
    font-size:12px;
}




/*-------------------------
	Required
-------------------------*/
.joe-object-field.joe-required {
    border-color: #bbb;
    border-color: rgb(218, 141, 1);
}
.joe-overlay-panel.show-required .joe-object-field.joe-required,
.joe-highlighted{
 border-color: #DA8D01;
    border-color: rgb(218, 141, 1);
    background: rgba(218, 141, 1,.2);
}



/*----------------------------- Begin joe-field-attribute -----------------------------*/
joe-field-attribute{
    display:block;
}
joe-field-attribute::after{
    display:table;
    content:'';
    clear:both;
}
/*----------------------------- End joe-field-attribute -----------------------------*/

/*-------------------------
	Label
-------------------------*/
.joe-content-label,joe-content-label {
    display:block;
    position: relative;
    background-color: rgba(0,40,80,.15);
    padding: 4px 10px;
    margin: 12px 0 8px 0px;
    font-weight: bold;
    clear: both;
    /*font-size: 1.1em;*/
    /* padding: 0 10px; */
}

/*-------------------------
	Field Item
-------------------------*/


.joe-field-item{
    position:relative;
    min-height: 30px;
    padding: 5px;
    background: #eee;
    border-bottom: 1px solid #fff;
}

.joe-panel-content-option .joe-field-item {
    background-color: transparent;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
}

.deletable.joe-field-item{
    padding-left:40px;
}
.gotobutton.joe-field-item{
    padding-right:40px;
}
.joe-field-item-content {
    position: relative;
    padding: 5px;
    transition:.2s;
    padding-left:9px;
}
html.no-touch .clickable > .joe-field-item-content:hover {
    background:rgba(0,0,0,.1);
}

/*
FIeld Item Content
*/
.expander  > .joe-field-item-content{
    margin-left: 40px;
    padding-bottom: 0px;
    min-height:54px;
}
    /*-------------------------
        OBJECTREFERENCE
    -------------------------*/
.joe-references-container{
    position: relative;
}

.joe-references-container .joe-text-field.skip-prop {
    min-width: 226px;
    padding-left: 30px !important;
    background: url(../img/search.png) center left no-repeat;
}

.joe-text-input-button.joe-reference-add-button {
    display: none;
}

.joe-object-references-holder {
    padding: 10px 0;
}


.joe-object-references-holder.disabled .joe-field-item .joe-delete-button{
    display:none;
}
.joe-object-references-holder.disabled .joe-field-item{
    padding-left:5px;
}

.joe-field-item-delete-button {
    position: absolute;
    left: 0;
    width:40px;
    top:0;
    left:0;
    bottom:0;
    background-position:center center;
    background-repeat: no-repeat;
}
.joe-field-item.btn-right{  padding-right:50px;  }
.joe-field-item.btn-left{  padding-left:50px;  }
.joe-field-item.btn-both{  padding-left:50px; padding-right:50px;  }


/*-------------------------
	UPLOADER
-------------------------*/
.joe-uploader-dropzone{
    padding: 10px;
    background: #eee;
    min-height: 100px;
    border: 2px dashed #ccc;
    text-align: center;
    position:relative;
}
.joe-uploader-dropzone img {
    margin: 10px auto;
    max-width:100%;
}
.joe-uploader-preview {
    display:block;
    position:relative;
}

.joe-uploader-preview img{
    margin:10px auto;
}

.joe-uploader-dropzone input[type="file"] {
    display: block;
    text-align: center;
    margin: 0 auto;
}
joe-uploader-files{
    display: block;
    position:relative;
}

joe-uploader-file{
    display:block;
    position: relative;
    float:left;
    margin:10px;
    width:200px;
    height:200px;
        background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    border:2px solid #fff;
}

.small-size joe-uploader-file {
    margin: 20px auto;
    float: none;
}

joe-uploader-file.uploaded{
    border-color:#5BD16D;
}

joe-uploader-file-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: rgba(255,255,255,.8);
    font-size: 12px;
    word-break:break-word;
}
joe-uploader-file-size {
    position: absolute;
    font-size: 12px;
    left: 0;
    right: 0;
    bottom: 75px;
}
joe-uploader-file-delete-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
    height: 32px;
    cursor: pointer;
    fill:#ccc;
    
}
joe-uploader-file-extension {
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    bottom: 30px;
    font-size: 40px;
    color: #666;
}
joe-uploader-file >a.file-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
}
/*-------------------------
	COMMENTS
-------------------------*/
joe-comments-add,joe-comments-view{
    display:block;
    position:relative;
    box-sizing: border-box;
        margin-top: 7px;
}

joe-comments-add textarea {
    width: 100%;
    height: 60px;
    padding: 5px;
    box-sizing: border-box;
}

joe-comments-entry{
    display:block;
    position:relative;
    line-height: .8em;
    border-top: 1px solid #eee;
    padding: 5px 0px 10px 0;

}

joe-comments-entry joe-comments-user{
float: left;
    height: 40px;
    font-size: .7em;
    font-weight: bold;
    line-height: 30px;
    padding-right: 6px;
}
joe-comments-entry joe-content{
    margin: 2px 0 5px 0;
    font-size: 12px;
    line-height: 16px;
}
/*-------------------------
	Section
-------------------------*/
.joe-content-section{
    clear: both;
    border-bottom: 1px solid #fff;
    /* border-bottom: 1px solid rgba(0,40,80,.5);
        margin-bottom:5px; */
}
joe-panel-content .joe-content-section:first-child {
    margin-top:-5px;
}
.joe-content-section.collapsed{

}
.joe-content-section.no-section{
display:none;
}

.joe-content-section.collapsed .joe-content-section-content{
    display:none;
}

.joe-content-section-content{
    /*margin-top:8px;*/
}
joe-content-section-label, .joe-content-section-label {
    background-color: rgba(0, 102, 136, 0.5);
    background-image: url("../img/white-arrow-down.png");
    background-position:3px center;
    background-repeat: no-repeat;
/*    padding: 10px 10px 10px 30px;
    margin: 15px 0 15px 0px;*/
    padding: 0px 10px 5px 30px;
    margin: 0px 0 10px 0px;
    font-weight: 500;
    clear: both;
    font-size: 1em;
    color: #fff;
    cursor:pointer;
    display: block;
    transition:.2s;
    background-size: 15px;
    text-transform: lowercase;
    font-variant: small-caps;
    line-height: 30px;
    user-select: none;
}
.collapsed .joe-content-section-label,
.collapsed joe-content-section-label{
    background-image: url("../img/white-arrow-right.png");
    margin:0;
    background-color:#40404080;
}
html.no-touch .joe-content-section-label:hover,
html.no-touch joe-content-section-label:hover{
    background-color: rgba(0,102,136,.8);
}

.joe-submenu-section-anchors,joe-submenu-section-anchors {
    height: 38px;
    line-height: 38px;
    display:block;
    /*margin-right:40px;*/
}
joe-submenu-section-anchors joe-panel-button.sections-toggle{
    display:none;
}
.right-sidebar .joe-submenu-section-anchors{  margin-right:0;}
.left-sidebar .joe-submenu-section-anchors{  margin-left:0;}

/*small SIZE ANCHORS */
.small-size joe-submenu-section-anchors{
    position: relative;
    z-index: 9999;
    background: #eee;
    float: left;
    height: auto;
    left: -5px;
    border: 1px solid #eee;
}
.small-size joe-submenu-section-anchors.expanded {
    border: 1px solid #fff;
    box-shadow: 0 0 3px 0 rgba(0,0,0,.4);
}
.small-size joe-submenu-section-anchors joe-panel-button.sections-toggle{
    display:block;
    width: auto;
    padding-right: 10px;
}
.sections-toggle svg {
    float: left;
    width:30px;
    height:40px;
}
.small-size joe-submenu-section-anchors .joe-submenu-section {
    display: none;
    float: none;
    position: relative;

}
.small-size joe-submenu-section-anchors.expanded .joe-submenu-section {
    display: block;
}
.joe-submenu-section {
    cursor: pointer;
    height: 100%;
    float: left;
    padding: 1px 8px;
    user-select: none;
    display:block;
    position: relative;
    text-transform: lowercase;
    font-variant: small-caps;
}
.joe-submenu-section.fright{
    float:right;
}
.joe-submenu-section.active {
    background:#fff;
    border-bottom: 3px solid rgba(0,40,80,.5);
    box-sizing: border-box;
    /* box-shadow: 0 0 3px 0 rgba(0,0,0,.2); */
}
/*.small-size .joe-submenu-section{
    font-size:12px;
    padding:1px 4px;
}*/
html.no-touch .joe-submenu-section:hover{
    background:rgba(0,0,0,.1);
}

/*-------------------------
	CONTENT-SIDEBAR
-------------------------*/
.joe-content-sidebar {
    width: 0;
    z-index: 10;
    background-color: #ddd;
    top: 52px;
    bottom: 51px;
    overflow:hidden;
    overflow-y:auto;
    transition: width .2s ease;
    /* position: absolute; */
}
.joe-content-sidebar.with-submenu {
    top: 82px;
}
.joe-overlay-panel.right-sidebar .joe-content-sidebar.right-side,
.joe-overlay-panel.left-sidebar .joe-content-sidebar.left-side{
    width:305px;
}

.joe-overlay-panel.right-sidebar.small-size .joe-content-sidebar.right-side,
.joe-overlay-panel.left-sidebar.small-size .joe-content-sidebar.left-side{
    width:100%;
}
/*.joe-content-sidebar.expanded{
    width:300px;
}*/
.joe-content-sidebar.left-side {  right: auto;  }
.joe-content-sidebar.right-side {  left: auto;  }

.joe-overlay-panel.right-sidebar .joe-panel-content{
    margin-right: 300px;
}
.joe-overlay-panel.left-sidebar .joe-panel-content {
    margin-left: 300px;
}

/*joe-title*/
.joe-content-sidebar joe-title,
.joe-content-sidebar .joe-title
{
    font-size: 1em;
}
/*submenu*/
/*.right-sidebar .joe-panel-submenu {
    padding-right: 50px;
}
.left-sidebar .joe-panel-submenu {
    padding-left: 50px;
}*/
/*button*/
.joe-sidebar-button{
    top:0;
    bottom:0;
    /*position:absolute;*/
    display:none;
    transition:.2s;
}
.joe-sidebar-button.active{
    display:block;
}
.joe-sidebar-button svg {
    fill: #444;
}

.joe-sidebar_right-button {  right: -5px; left: auto;  float:right;}
.joe-sidebar_left-button {  left: -5px; right: auto;  float:left;}

/*.joe-leftsidebar-toggle{background-image: url("../img/btns/sidebar-left.png");  }*/

.right-sidebar .joe-sidebar_right-button,
.left-sidebar .joe-sidebar_left-button{
    background-color: rgba(0,40,80,.5);
}
.right-sidebar .joe-sidebar_right-button svg,
.left-sidebar .joe-sidebar_left-button svg{
    fill:  #f2f2f2;
}

/*labels*/
.joe-content-sidebar .joe-content-label {
    margin-top: 0;
}

/*sections */
.joe-content-sidebar .joe-content-section {
    background-color: #fff;
    margin-bottom: 0px;
}
.joe-content-sidebar .joe-content-section-label,
.joe-content-sidebar joe-content-section-label {
    margin-top: 0;
}
.joe-content-sidebar .joe-content-section-content{
    margin-top:0;
}
/*field container*/

.joe-content-sidebar .joe-field-container,
.joe-content-sidebar joe-field-container {
    width: 100% !important;
    float: none;


}

.joe-content-sidebar > joe-field-container{
        background:#fff;
        border-top:1px solid #eee;
        padding-top: 10px;
}

/*object fields */
.joe-content-sidebar .joe-object-field {
    /*background-color: #fff;*/
    border-top: none;
    margin: 0px 5px 10px 5px;
    padding-bottom: 2px;
    padding-top: 20px;
}

.joe-content-sidebar .joe-field-label {
    /* left: 0px; */
    top: -2px;
    background-color: transparent;
}
.joe-content-sidebar .joe-reference-add-button {
    right: 0;
    left: auto;
}

/*text fields*/
.joe-content-sidebar .joe-object-field input[type=text],
.joe-content-sidebar .joe-object-field input[type=password]
{
   /* min-width: 260px !important;*/
    width:100%;
    /*width: 240px;*/

}
/*select fields*/
.joe-content-sidebar select.joe-select-field.joe-field {
   /* width: 240px;*/
    width: 100%;
    min-width: auto;
}
.joe-content-sidebar .select-field .joe-iconed-button {
    display: block;
    position: absolute;
    right: 0px;
   /* top: 15px;*/
   bottom:-4px;
    font-size: 0;
    padding: 0px 0 0px 40px;
    height: 40px;
    background-position: center;
}
/*-------------------------
	Field Tooltip
-------------------------*/
.joe-field-tooltip {
    border: 1px solid #007ac2;
    border-radius: 50%;

    display: inline-block;

    text-align: center;
    margin: 0 10px;
    font-size: 13px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    cursor: help;
    font-weight: bold;
}
html.no-touch .joe-field-tooltip:hover{
    background-color:#007ac2;
    color:#fff;
}
/*-------------------------
	Multiedit
-------------------------*/

.joe-field-multiedit-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    border: 1px solid #DDD;
    margin: 8px;
    cursor: pointer;
    background: #EFEFEF;

}
.joe-object-field.multi-selected{
    border-color:#007ac2;
}

.multi-selected .joe-field-multiedit-toggle{
    background:rgba(0,100,200,.4)
}

.joe-object-field.hidden{
    display:none;
}
/*
.joe-object-field input[type=text],
.joe-object-field input[type=number],
.joe-object-field input[type=password] {
    padding: 5px;
    font-size:16px;
    border: 1px solid #ddd;
    box-sizing:border-box;
    letter-spacing: .5px;
    width:100%;
    border:1px solid rgba(0,0,0,.1);
}

.joe-object-field input[type=text]:focus,
.joe-object-field input[type=password]:focus,
.joe-object-field input[type=number]:focus {
    outline: none;
    border: 1px solid #007ac2;
    outline-offset: 0;
    background-color: #f2f9ff;
    transition: .2s;
}*/

.joe-object-field input[type=text],
.joe-object-field input[type=number],
.joe-object-field input[type=password] {
    padding: 6px;
    /*    width: 300px;*/
    /*    min-width:300px;*/
    /*    min-width:240px;
    width:70%;*/
    font-size:16px;
    box-sizing:border-box;
    letter-spacing: .5px;
    width:100%;
    outline: none;
    outline-offset: 0;
    /*border:1px solid rgba(0,0,0,.1);*/
    border:none;
    /*    max-width:800px;*/
    border-bottom: 1px solid #ddd;
    border-bottom:1px solid rgba(0, 102, 136, 0.2);
    padding-bottom:5px;

}
html.no-touch .joe-object-field input[type=text]:not([disabled]):hover,
html.no-touch .joe-object-field input[type=password]:not([disabled]):hover,
html.no-touch .joe-object-field input[type=number]:not([disabled]):hover {
background-color: #f2f9ff;
}
.joe-object-field input[type=text]:focus,
.joe-object-field input[type=password]:focus,
.joe-object-field input[type=number]:focus {
    
    border: 1px solid #007ac2;
    /* padding: 1px; */
    
    background-color: #f2f9ff;

    padding:5px;
    /*padding: 4px;*/
}

.joe-field-container.joe-fleft input[type=text] {
    min-width: initial;
}

.joe-object-field input[type=text].joe-url-field {
    width: 100%;
    max-width:100%;
    margin: 5px 0 0 0;
    padding-right: 75px;
    box-sizing: border-box;
}


.joe-object-field input[type=text].joe-date-field {
    width:200px;
}
.joe-object-field .joe-objectlist-row input[type=text].joe-date-field{
        width: 100%;
        max-width:130px;
}
joe-datepicker-holder{
    display:block;
    position:relative;
}
.Zebra_DatePicker.dp_visible{
    z-index:2000;
}
.joesmall-size .Zebra_DatePicker.dp_visible{
    left: 100px !important;
    top: 100px !important;
}

joe-datepicker-holder > .Zebra_DatePicker.dp_visible {
    position: relative;
    display: inline-block;
    margin-top: 10px;
    z-index: 1;
}


.joe-object-field .joe-button {
    position:relative;
    /* max-width: 200px; */
    /* margin: 5px auto; */
    /*color: blue;*/
    color:rgba(0,0,0,.7);
    background-color: #ddd;
    float: right;
/*    margin: 10px 0;*/
    margin:0;
    line-height: 24px;
}
.joe-object-field.button-field .joe-button {
    float:none;
}
.joe-object-field .joe-button,
capp-card joe-button {
    border-radius: 20px;
    margin-top: 5px;
}

.objectReference-field .joe-left-plus-button {
    /*margin-top: -30px;*/
    margin-bottom: 10px;
    float: none;
    font-size: 16px;
}

.joe-button.multiline {
    line-height: 16px;
}
html.no-touch .joe-object-field .joe-button:hover{
    background-color:#ccc;
}
.url-field .joe-button {
    position: absolute;
    right:5px;
    top:5px;
    
/*    margin:5px;*/
}
.joe-object-field .joe-button.fleft {
    float: left;
}
.joe-object-field .joe-button.inline {
    float: none;
    display: inline-block;
    margin-left: 10px;
    margin-right:10px;
}
.joe-object-field .joe-button.full-width {
    width: 100%;
    margin: 5px auto;
    max-width: 300px;
    text-align: center;
    float: none;
    display:block;
}

.joe-content-sidebar joe-button.joe-button {
    float: none;
}

.joe-object-field .joe-iconed-button.full-width{
    text-align:left;
}
.joe-object-field input[type=text].joe-number-field {
    width: 200px;
}
input.joe-number-field.joe-field {
    padding: 4px 6px;
}
.joe-object-field input[type=text].joe-int-field {
    width: 100px;
}

.joe-object-field input[type=text].joe-guid-field {
    max-width: 350px !important;
}
.joe-object-field.hide-label {
    padding-top: 0px;
}

.joe-select-field {
/*    min-width: 280px;*/
    min-width:240px;
    padding: 4px;
    border-color:#ddd;
    border-color: rgba(0, 102, 136, 0.2);
/*    margin-left: 1%;*/
}

/* Rendering |Textarea */
.joe-object-field.rendering-field {
/*    min-height: 100px;*/
    font-size: 14px;
}

/*textarea.joe-rendering-field{
    margin-top: 10px;
    padding: 1%;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 98%;
    min-width: 304px;
    height: 200px;
}*/
textarea.joe-rendering-field{
    margin-top: 10px;
    padding: 5px;
    position: relative;
    width: 100%;
    height: 200px;
    box-sizing: border-box;
}
/* Geo */
.joe-geo-map {
    height: 250px;
    margin-bottom: 10px;
    width: 100%;
    position: relative;

}
textarea.joe-geo-field {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    height: 50px;
}

/* Autocomplete */
.joe-text-autocomplete {
    position: absolute;
    z-index: 1001;
    background: #eee;
    /*width: 312px;*/
    /* display:none; */
    /*max-height: 300px;*/
    max-height:240px;
    overflow: auto;
    min-width: 210px;
    max-width: 100%;
    width:100%;
}
.joe-text-autocomplete.active{
    display:block;
}
.joe-content-sidebar .joe-text-autocomplete.active {

    width: 100%;
}

.joe-text-autocomplete-option {
    padding: 5px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}
.joe-text-autocomplete-option::after{
    display:block;
    height:0;
    width:100%;
    clear:both;
    content:'';
}
.joe-text-autocomplete-option.visible{
    display:block;
}
html.no-touch .joe-text-autocomplete-option:hover {
    background: #ccc;
}
.joe-text-autocomplete-option.keyboard-selected {
    background: #ccc;
}
.joe-text-autocomplete-option svg {
    width: 40px;
    float: left;
    border-right: 1px solid #bbb;
    margin-right: 5px;
}
/*-------------------------
	J | MultiSorter
-------------------------*/



.joe-multisorter-bin{
    width: 48%;
    background: #EEE;
    min-height: 100px;
    float: left;
    margin: 0 1%;
    list-style: none;
    max-height: 500px;
    overflow: auto;
}
.joe-multisorter-bin li,
.joe-buckets-bin li {
    /*line-height: 30px;*/
    min-height: 30px;
    padding: 5px;
    cursor: move;
    position:relative;
    margin: 1px 0;
    transition: background .1s;
    background:#f9f9f9;
}
html.no-touch .joe-multisorter-bin li:hover,
html.no-touch .joe-buckets-bin li:hover{
    background:rgba(0,0,0,.1);
}




/*-------------------------
	k | Buckets
-------------------------*/
.joe-buckets-field-holder{
    float:left;
}

.joe-buckets-bin{
    background: #EEE;
    min-height: 100px;
    margin: 0 0 0 1%;
    list-style: none;
    max-height: 500px;
    overflow: auto;
}

.joe-buckets-bin.selections-bin{
    float: left;
    width: 31%;
    margin-bottom: 10px;
    padding-bottom: 4px;
}

.joe-bucket-delete {
    left:auto;
    width: 30px;

    background-image: url(../img/close-x.png);
    display:none;
    margin: 5px;
    cursor: pointer;
}
html.no-touch .joe-bucket-delete:hover{
    background-color: #DDD;
    background-color: rgba(0,0,0,.1);
}
.joe-buckets-bin.selections-bin .joe-bucket-delete{
    display:block;
    left:auto;
    background-size: 20px;
}

.joe-bucket-label {
    font-size: 14px;
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
}
.joe-sortable-highlight {
    margin:2px;
    background: #ccc;
    border:1px dashed #fff;
}
/*-------------------------
	i | Image
-------------------------*/
/*input.joe-image-field{
    width: 90% !important;
}*/
.joe-image-field-image {
    margin: 15px 0 10px 0;
    display: block;
    max-width: 100%;
}
.joe-image-field-size {
    margin: 10px 0;
    opacity: .5;
    display: block;
}
/*-------------------------
	i | QR code
-------------------------*/
img.joe-qrcode-image {
    width: 100%;
}

/*----------------------------->
 P | Checkbox Group
 <-----------------------------*/
/*.joe-group-item {
    cursor: pointer;
    background: #eee;
    margin: 2px 0;
    padding-left:50px;
    position: relative;
}*/
.joe-group-item {
    cursor: pointer;
    background: #eee;
    margin: 2px .5%;
    padding-left: 40px;
    position: relative;
    width: 49%;
    box-sizing: border-box;
    float: left;
    /*min-width: 300px;*/
        min-width: 240px;

}

.joe-group-item.cols-1{
    width:98%;
}
.joe-group-item.cols-3{
    width:32%;
    min-width: 200px;
}
.joe-group-item.cols-4{
    width:24%;
    min-width: 200px;
}
.small-size .joe-group-item {
    min-width: 98%;
}

html.no-touch .joe-group-item:hover{
   background-color:#ddd;
}
html.no-touch .joe-group-item.disabled:hover{
    background-color:#eee;
}

.joe-group-item-checkbox {
    position: absolute;
    left: 0;
    top:0;
    bottom:0;
    width: 40px;
    border-right: 1px solid #bbb;
    padding: 10px 0 ;
    text-align:center;
    /* height: 100%; */
}
.joe-group-item-checkbox input {
    float: none;
    margin: auto;
}
.joe-group-item label {
    display: block;
    padding: 10px 0;
    padding-left: 10px;
    cursor:pointer;
}
.joe-content-sidebar .joe-group-item {
    width: 100%;
    float: none;
}
/*-------------------------
    Object List
-------------------------*/
table.joe-objectlist-table {
    width: 100%;
    border-collapse:collapse;
    border:1px solid #eee;
}
.joe-objectlist-table .joe-delete-button {
    background-size: 24px;
}

.joe-objectlist-table thead {
    background-color: #eee;
}
/*.joe-objectlist-table.hidden-heading thead {
    display:none;
}*/
.joe-objectlist-table.hidden-heading thead tr th {
height: 0;
padding: 0;
border-top: 0;
overflow: hidden;
line-height: 0;
}
.joe-objectlist-table th {
    padding: 5px;
    font-weight:normal;
    text-align:left;
    border-left: 1px solid #eee;
}
html.no-touch table.sortable.joe-objectlist-table th {
    cursor:pointer;
}
html.no-touch table.sortable.joe-objectlist-table th:hover {
    background:rgba(0,0,0,.1);
    
}

.joe-objectlist-table td {
    /*padding: 5px;*/
}


.joe-objectlist-row{
    border-bottom: 1px solid #f2f2f2;
}




/*
joe-objectlist-item{
    display:table-row-group;
    vetical-align:middle;
    border-color:inherit;
}*/
.joe-objectlist-object-row-handle-header,
.joe-objectlist-delete-header
{
/*    background: #fff;*/
    width:30px;
}
.joe-objectlist-object-row-handle{
    cursor: ns-resize;
    width: 40px;
    line-height: 40px;
    text-align: center;
    -ms-transform: rotate(7deg);/* IE 9 */
    -webkit-transform: rotate(7deg);/* Chrome, Safari, Opera */
    transform: rotate(90deg);
    color: #bbb;
    letter-spacing: 1.5px;
/*    background-color: #f2f2f2;
    border: 5px solid #fff;*/
}
/*.joe-objectlist-table .sort-handle{
    display:none;
}
.joe-objectlist-table.sortable .sort-handle{
    display:initial;
}*/
html.no-touch .joe-objectlist-object-row-handle:hover{
    background-color:#eaeaea;
}
.ui-sortable-helper {
    background: #fff;
    box-shadow:0 0 3px rgba(0,0,0,.5);
}
.joe-objectlist-table select {
/*    padding: 5px;
    min-width: 90px;
    width:98%;
    box-sizing: border-box;*/
        padding: 5px 0px;
    min-width: 35px;
    box-sizing: border-box;
    width:90%;
}
.joe-objectlist-table input[type=text],
.joe-objectlist-table input[type=password] {
    padding: 4px;
    min-width: 20px;
    width: 98%;
    box-sizing: border-box;
}

.objectList-field .joe-button.joe-plus-button {
    margin: 10px auto;
    float: none;
    display:inline-block;
}
.objectList-field .joe-button.joe-done-button {
    margin-top:10px; position: absolute;
}
.joe-objectlist-table textarea {
    height: 100px;
}

.joe-objectlist-table .joe-boolean-field {
    float:none;
    margin:5px auto;
    display:block;
}

.small-size .joe-objectlist-table input[type=text]:focus,
.small-size .joe-objectlist-table input[type=number]:focus{
    position: fixed !important;
    top: 50% !important;
    left: 15% !important;
    /* right: 5%; */
    border: 2px solid #ff8804;
    box-sizing: border-box;
    width: 75%;
    padding: 10px;
    background: #fff;
    z-index: 10000;
    display: block;
    box-shadow: 0 1px 10px rgba(0,0,0,.5);
}

html.touch .small-size .joe-objectlist-table input[type=text]:focus,
html.touch .small-size .joe-objectlist-table input[type=number]:focus{
    top: 200px;
}

/*templating in objectlistrows */
.joe-objectlist-row.templated .row-template{
    cursor:pointer;
    transition:.2s background-color;
    padding:10px;
    line-height: 1.1em;
    font-size:.8em;
}
html.no-touch .joe-objectlist-row.templated .row-template:hover{
    background-color:rgba(0,0,0,.2);
}
th.joe-objectlist-object-row-template-header {
    padding: 0;
    width:0;
    display: block;
}
.joe-objectlist-row.editing .row-template,
.joe-objectlist-row:not(.templated) .row-template,
.joe-objectlist-row.ui-sortable-helper .row-template{
    width:0;
    overflow:hidden;
    display: block;
    height: 0;
    
    padding:0;
}
.joe-objectlist-row.templated:not(.editing) td:not(.template-visible){
       display: none;
}
/*.joe-objectlist-row.templated .template-visible{
    background-color:#ddd;
}*/
/*
.joe-objectlist-row.templated .row-template{
    cursor:pointer;
    width:auto;
}

.joe-objectlist-row.templated td:not(.template-visible){
    width:0;
    overflow:hidden;
}
.joe-objectlist-row.templated.editing td {
    display: table-cell;
}
.joe-objectlist-row.templated.editing .row-template{
    display:none;
}*/





/*-------------------------
    T: Tags
-------------------------*/
    .joe-tags-container{
        display: inline-block;
        position: relative;
    }
    joe-tags{
        display:block;
        position:relative;
        font-size:12px;
        /* padding:3px; */
    }
    joe-tag{
        display: inline-block;
        padding:2px 4px;
        background: #eee;
        color:#202020;
        margin:3px;
    }
/*-------------------------
    T2: Chips
-------------------------*/

    joe-chips{
        display:block;
        position:relative;
        font-size:12px;
        /* padding:3px; */
    }
    joe-chip{
        display: inline-block;
        padding:2px 4px;
        background: #eee;
        color:#202020;
        margin:3px;
    }
/*-------------------------
    V: Preview
-------------------------*/
iframe.joe-preview-iframe {
    border: 1px solid #ccc;
}
.preview-field .joe-button.joe-reload-button {
    margin-bottom: 10px;
}

.joe-preview-iframe-holder{
    position:relative;
    background: #fefefe;
    padding-bottom:20px;
    margin-bottom:10px;
    clear:both;
}

/*-------------------------
    Y: SUBOBJECT
-------------------------*/
joe-subobject-output {
    border: 1px solid #eee;
    display: block;
    padding: 5px;
}
/*----------------------------->
	Text Input Button
<-----------------------------*/
.joe-text-input-button {
    position: absolute;
 /*   right: 0;*/
    background: #ccc;
    top: 0;
    padding: 4px 5px;
    cursor: pointer;
    left:70%;
}


/*-------------------------
	 Filter Field
-------------------------*/
.joe-filter-field-holder {
    padding: 5px 1%;
}
.joe-filter-field-holder input {
    max-width: 200px !important;
    padding-left: 30px !important;
    background: url(../img/search.png) center left no-repeat;

}
/*-------------------------
	 Buckets
-------------------------*/
.joe-buckets-field .joe-buckets-bin {
    padding-left: 2px;
}
.joe-buckets-field .joe-filter-field-holder {
    padding: 5px 3px;
}
.joe-buckets-field .joe-filter-field-holder input {
    max-width: 24% !important;
}

.joe-bucket-label.ui-sortable-handle {
    font-size: 12px;
    padding: 5px 10px;
    background-color: rgba(255,255,255,.4);
}

/*----------------------> JOE-CHECKBOX <----------------------*/
joe-checkbox {
    display: block;
    margin: 5px;
    box-sizing: border-box;
    border: 2px solid #0099aa;
    border-radius:25px;
    width: 50px;
    height: 50px;
    float: right;
    opacity:.5;
    z-index: 20;
    position: relative;
    background-size: 42px;
    background-repeat: no-repeat;
    background-position: center;

}
html.no-touch joe-checkbox:hover{
    background-color:rgba(0, 153, 170,.5);
    opacity:1;
        transition:.2s;
}
joe-checkbox.checked {
    border: none;
    background-image: url('../img/svgs/check-button.svg');
    opacity:.9;
}
joe-checkbox-percentage {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 46px;
}

joe-checkbox.checked joe-checkbox-percentage{
    display: none;
}

.deletable joe-checkbox{
    margin-right:50px;
}


.joe-field[type=checkbox] {
    cursor:pointer;
	-webkit-appearance: none;
	appearance: none;
	background-color: rgba(250, 250, 250, .5);
	border: 2px solid #bbb;
	width:30px;
	height:30px;
	box-sizing:border-box;
	border-radius: 50%;
	display: inline-block;
	position: relative;
	margin-top:-5px;
	background-image: url('../img/svgs/check-button-disabled.svg');
	background-position: center;
	background-size: contain;
}
.joe-field[type=checkbox]:checked {
    border: 2px solid #09a;
	background-image: url('../img/svgs/check-button-teal.svg');
}

.joe-objectlist-row > td > .joe-boolean-label{
    text-align: center;
    padding-top: 10px;
}
/*----------------------> end JOE-CHECKBOX <----------------------*/
/*----------------------> JOE-TABLE <----------------------*/
.joe-table{
    width:100%;
        border-collapse: collapse;
}
.small-size .joe-table {
    font-size: 12px;
    line-height: 18px;
}

.joe-table.fixed {
    table-layout: fixed;
}

table.joe-table td,
table.joe-table th
 {
    padding: 5px;
    min-height: 30px;
        border-bottom: 1px solid rgba(0,0,0,.07);
}
table.joe-table th{
    background-color: #eaeaea;
}
.joe-table-button {
    font-size: 12px;
    text-align: center;
    cursor:pointer; 
    background-position:center;
    background-repeat:no-repeat;
    opacity: .5;
    background-size: 60%;
    min-width:30px;
}

.joe-table-button:hover {
    background-color: rgba(0,0,0,.1);
    opacity:.9;
}

.joe-table td input{
    width: 30px;
    padding: 4px;
    display:inline;
}
.joe-table .row-divider{
    background: rgba(0,0,0,.03);
}
.joe-table .left-border{
    border-left: 1px solid rgba(0,0,0,.02);
}

/*----------------------> end JOE-TABLE <----------------------*/

/*----------------------> JOE-TRANSACTION <----------------------*/
/*.transaction-title.clickable{
    cursor:pointer;
    transition:.2s;
}*/
/*html.no-touch .transaction-title.clickable:hover{
    background:rgba(0,0,0,.1);
}*/

input.joe-money-variable {
    border: none !important;
    border-bottom: 1px solid #007ac2 !important;
    background: none;
    cursor:pointer;
    transition:.2s;
    width: 64px !important;
    font-size: 14px !important;
    /* width: auto !important; */
    padding: 4px !important;
}
.small-size input.joe-money-variable {
    font-size:12px !important;
    /*padding-left:0px !important;*/
}
tr.row-divider input.joe-money-variable {
    width: 54px !important;
}

input.joe-money-variable:focus {
    border: 1px solid #ccc;
    background: #fff !important;
    outline: none;
}

input.joe-money-variable::-webkit-inner-spin-button, 
input.joe-money-variable::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
/*----------------------> end JOE-TRANSACTION <----------------------*/

/*-------------------------------------------------------------------->
	4 | Footer
<--------------------------------------------------------------------*/
.joe-panel-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.joe-multi-only,
.multi-edit .joe-overlay-panel .joe-footer-button
{
    display:none;
}

.multi-edit .joe-multi-only{
    display:block;
}

.joe-multi-always {
display:block !important;
}

/*-------------------------------------------------------------------->
	5 | Message
<--------------------------------------------------------------------*/
joe-message-holder {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    /* background: #fff; */
    overflow: hidden;
    display:none;
    z-index:10000;
    /* opacity: 1; */
}
joe-message-holder.active{
    display:block;
}
.joe-message-container {
    position: absolute;
    background: rgba(0,25,50,.7);
    height: 50px;
    left: 0;
    bottom: 0;
    width:100%;
    border-top: 5px solid #f88004;
    transition: width .4s;
    display:none;
   /* -webkit-transition: width 1s;*/
}
.joe-message-container.active{
    display:block;
    min-height:50px;
    height:auto;
}
.joe-message-container.left {
    width: 0;
    height:50px;
}

.joe-message-container.right {
    width: 0;
    left:auto;
    right:0;
    height:50px;
}

.joe-message-content {
    color: #fff;
    padding: 10px;
    font-size: 16px;
    opacity:0;
    transition: opacity .25s;
}
.show-message .joe-message-content{
    opacity:1;
}

/*-------------------------------------------------------------------->
	6 | OVERLAY
<--------------------------------------------------------------------*/
joe-overlay-control{
    position:absolute;
    display:block;
    text-align:center;
    background:rgba(0,0,0,.2);
    cursor:pointer;
    color:#fff;
    line-height: 100px;
    font-size: 48px;
    width: 50px;
    top: 40%;
}
.right-side{
    right:0;
}
.left-side{
    left:0;
}


/*-------------------------------------------------------------------->
	7 | CHAT
<--------------------------------------------------------------------*/
joe-video-holder{
    display:block;
    position: relative;
    margin:-4px;
}
video.joe-connect-video {
    width: 100%;
    background: rgba(0,50,100,.5);
}

video.joe-connect-myvideo {
    width: 25%;
    background: #000;
    position: absolute;
    bottom: 10px;
    left: 5px;
}
/*-------------------------------------------------------------------->
	8 | STYLES
<--------------------------------------------------------------------*/

/*---------------------------------------
	JOE STYLES CARDS
---------------------------------------*/
.joe-panel-content.joe-style-cards{
    background: #ccc;
    padding:0;
}
.joe-style-cards
.joe-content-section{
    margin: 4px;
    background: #fff;
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,.1);
    border: 1px solid #fff;
}
.joe-style-cards
.joe-content-section.collapsed{
    border: 1px solid #ccc;
}

.joe-style-cards joe-field-container,.joe-style-cards .joe-field-container{
    padding: 5px 0 1px 0;
    background: #fff;
}
.joe-style-cards joe-field-container:first-child,.joe-style-cards .joe-field-container:first-child{
    padding-top:10px;
}

.joe-style-cards joe-content-section-label, .joe-style-cards .joe-content-section-label{
    font-size:1em;
}

.joe-style-cards .joe-content-label {
    background: #EEE;
    margin-bottom: 0px;
    margin-top: 5px;
    padding:5px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
}
/*-------------------------------------------------------------------->
	ACE EDITOR
<--------------------------------------------------------------------*/
.joe-ace-holder{
    margin:5px;
    height:300px;
}
.ace_editor{
    font-size: 13px;
    height:100%;
}


/*-------------------------------------------------------------------->
	TINY MCE
<--------------------------------------------------------------------*/
div.mce-fullscreen{
    position: fixed;
    top: 50px !important;
    left: 50px !important;
    right: 0px !important;
    width: auto !important;
}
.tox-statusbar__branding,
.tox-promotion {
  display: none !important;
}

/* .tox {
    --tox-bg-color: #f2f2f2;
    --tox-toolbar-bg: #f2f2f2;
    --tox-sidebar-bg: #f2f2f2;
    --tox-dialog-bg: #f2f2f2;
} */

/* Make sure TinyMCE UI always floats above other parts of the UI */
.tox {
    z-index: 10000 !important;
  }
  
  .tox-editor-container {
    position: relative !important;
    z-index: 10000 !important;
  }
  
  /* Also ensure the panel or overlay doesn't clip dropdowns */
  .joe-overlay-panel,
  .joe-tinymce-holder {
    overflow: visible !important;
  }
  .tox.tox-tinymce.tox-fullscreen {
    left: var(--tinymce-offset) !important;
    top: var(--tinymce-offset) !important;

    width: calc(100vw - var(--tinymce-offset) - 5px) !important;
    height: calc(100vh - var(--tinymce-offset) - 5px) !important;
    position: fixed !important;
    z-index: 20000 !important; /* stay above most UI, but still under your header/sidebar if needed */
  }

  /* Remove rounded corners and apply gold border to TinyMCE wrapper */
.tox.tox-tinymce {
    border: 1px solid #dca042 !important;
    border-radius: 0 !important;
  }
  
  /* Remove radius inside the editor area */
  .tox .tox-editor-container {
    border-radius: 0 !important;
  }
  
  /* Optional: remove radius from content iframe too */
  .tox .tox-edit-area iframe {
    border-radius: 0 !important;
  }
/*-------------------------------------------------------------------->
	From the Datepicker file, thanks zebra
<--------------------------------------------------------------------*/
/*
    Zebra_DatePicker: a lightweight jQuery date picker plugin
    Default theme
    copyright (c) 2011 - 2014 Stefan Gabos
    http://stefangabos.ro/jquery/zebra-datepicker/
*/

.Zebra_DatePicker *,
.Zebra_DatePicker *:after,
.Zebra_DatePicker *:before  { -moz-box-sizing: content-box !important; -webkit-box-sizing: content-box !important; box-sizing: content-box !important }

.Zebra_DatePicker           { position: absolute; 
background: rgba(0,40,80,.6); 
padding:4px;
/*border: 3px solid #666; */
z-index: 1200; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; top: 0 }

.Zebra_DatePicker *         { margin: 0; padding: 0; 
/*color: #000; */
background: transparent; border: none }

/* = GLOBALS
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker table                      { border-collapse: collapse; border-spacing: 0; width: auto; table-layout: auto; }

.Zebra_DatePicker td,
.Zebra_DatePicker th                         { text-align: center; padding: 5px 0 }

.Zebra_DatePicker td                         { cursor: pointer }

.Zebra_DatePicker .dp_daypicker,
.Zebra_DatePicker .dp_monthpicker,
.Zebra_DatePicker .dp_yearpicker             { margin-top: 3px }

.Zebra_DatePicker .dp_daypicker td,
.Zebra_DatePicker .dp_daypicker th,
.Zebra_DatePicker .dp_monthpicker td,
.Zebra_DatePicker .dp_yearpicker td         { background: #E8E8E8; width: 30px; border: 1px solid #7BACD2 }

.Zebra_DatePicker,
.Zebra_DatePicker .dp_header .dp_hover,
.Zebra_DatePicker .dp_footer .dp_hover { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px }

/* = VISIBLE/HIDDEN STATES (USE TRANSITIONS FOR EFFECTS)
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker.dp_visible               { visibility: visible; filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; transition: opacity 0.2s ease-in-out }
.Zebra_DatePicker.dp_hidden                { visibility: hidden; filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; opacity: 0 }

/* = HEADER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_header td             { color: #FFF }

.Zebra_DatePicker .dp_header .dp_previous,
.Zebra_DatePicker .dp_header .dp_next       { width: 30px }

.Zebra_DatePicker .dp_header .dp_caption    { font-weight: bold }
.Zebra_DatePicker .dp_header .dp_hover      { background: #222; color: #FFF }

/* = DATEPICKER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_daypicker th              { background: #FFCC33 }
.Zebra_DatePicker td.dp_not_in_month            { background: #F3F3F3; color: #CDCDCD; cursor: default }
.Zebra_DatePicker td.dp_not_in_month_selectable { background: #F3F3F3; color: #CDCDCD; cursor: pointer }
.Zebra_DatePicker td.dp_weekend                 { background: #D8D8D8 }
.Zebra_DatePicker td.dp_weekend_disabled        { color: #CCC; cursor: default }
.Zebra_DatePicker td.dp_selected                { background: #5A4B4B; color: #FFF !important }
.Zebra_DatePicker td.dp_week_number             { background: #FFCC33; color: #555; cursor: text; font-style: italic }

/* = MONTHPICKER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_monthpicker td    { width: 33% }

/* = YEARPICKER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_yearpicker td     { width: 33% }

/* = FOOTER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_footer            { margin-top: 3px }
.Zebra_DatePicker .dp_footer .dp_hover  { background: #222; color: #FFF }

/* = SELECT CURRENT DAY
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_today { color: #FFF; padding: 3px }

/* = CLEAR DATE
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_clear { color: #FFF; padding: 3px }

/* = SOME MORE GLOBALS (MUST BE LAST IN ORDER TO OVERWRITE PREVIOUS PROPERTIES)
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker td.dp_current             { color: #C40000 }
.Zebra_DatePicker td.dp_disabled_current    { color: #E38585 }
.Zebra_DatePicker td.dp_disabled            { background: #F3F3F3; color: #CDCDCD; cursor: default }
.Zebra_DatePicker td.dp_hover               { background: #482424; color: #FFF }

/* = ICON
----------------------------------------------------------------------------------------------------------------------*/
button.Zebra_DatePicker_Icon                { display: block; position: absolute; width: 32px; height: 24px; background: url('../img/calendar.png') no-repeat right top; text-indent: -9000px; border: none; cursor: pointer; padding: 0; line-height: 0; vertical-align: top }
button.Zebra_DatePicker_Icon_Disabled       { background-image: url('../img/calendar-disabled.png') }

/* don't set vertical margins! */
button.Zebra_DatePicker_Icon                { margin: 0 0 0 3px }
button.Zebra_DatePicker_Icon_Inside_Right   { margin: 0 3px 0 0; top:0 !important; }
button.Zebra_DatePicker_Icon_Inside_Left    { margin: 0 0 0 3px }


.joe-subset-selector{
    display:none;
}
/* For phones and small tablets */
@media only screen and (max-width: 600px),
screen and (max-height:400px) and (orientation:landscape){

    .joe-overlay-panel {
        margin: 0px;
    }

    .joe-subset-selector{
        display:none;
    }
    .joe-panel-menu .joe-iconed-button {
        width: 40px;
        padding: 0;
        font-size: 0;
    }

    .joe-panel-content {
        left: 0;
        right: 0;
        border-left: 0px;
        border-right: 0px;
    }
    .joe-field-container.joe-fleft {
        width: 100% !important;
    }
/*    .joe-button {
        padding: 8px 8px !important;
        min-width: 40px;
        text-align: center;
    }*/
}

/* = SMALL-SIZE
----------------------------------------------------------------------------------------------------------------------*/
.small-size .joe-panel-title {
    line-height: 16px;
    font-size: 14px;
    padding: 0;
    padding-left: 4px;
    padding-top: 3px;
}

.small-size .joe-submenu-search-field {  
    min-width: 50px; 
    transition: .25s;
}
.small-size .joe-submenu-search-field:focus {
    position: absolute;
    left: 1%;
    top: 0px;
    right: 1%;
    width:98%;
    box-sizing: border-box;
}
.small-size .joe-submenu-search {  
    width: 55px; 
    position: initial;
}

.small-size .joe-object-field {
    margin: 8px 0px;
    padding-left: 4px;
    padding-right: 4px; 
}

.small-size joe-panel-content joe-field-container{
    padding-top:10px;
}
joe-content-sidebar
.small-size .joe-object-field .joe-plus-button,
.small-size .joe-object-field .joe-comments-button,
capp-dashboard.mobile .joe-iconed-button {
    width:100%;
    font-size:1em;
    box-sizing: border-box;
    padding-left: 40px;
    margin: 10px 0;
    background-position-x: 5px;
    text-align: right;
    padding-right: 10px;
    line-height: 26px;
    height: 40px;
    
}
/*removed to fix svg icon w/ plus btn
.small-size .joe-object-field .joe-iconed-button{
    line-height:40px;
}
*/
/*removed to fix view icon falling down to next line
.small-size .joe-content-sidebar .select-field .joe-iconed-button {
    display: block;
    position: absolute;
    right: -5px;
    top: 15px;
    font-size: 0px;
    padding: 0px 5px 0px 40px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    
}*/
.small-size .joe-buckets-bin{
    width: 100% !important;
    margin: 0px 0px 5px 0px;
}
.small-size .joe-buckets-field .joe-filter-field-holder input {
    max-width: 100% !important;
}
.small-size .joe-buckets-field-holder {
    width: 100% !important;
}

.small-size .joe-buckets-bin.options-bin {
    height: 120px;
}



/*joe-autocomplete component */
joe-autocomplete{
    display:block;
}
autocomplete-options{
    display:none;
}
joe-autocomplete.active autocomplete-options{
    display: block;
}
/*! jQuery UI - v1.11.4 - 2016-03-28
* http://jqueryui.com
* Includes: core.css, draggable.css, resizable.css, selectable.css, sortable.css, autocomplete.css, menu.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/
* Copyright jQuery Foundation and other contributors; Licensed MIT */

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-draggable-handle{-ms-touch-action:none;touch-action:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-selectable{-ms-touch-action:none;touch-action:none}.ui-selectable-helper{position:absolute;z-index:100;border:1px dotted black}.ui-sortable-handle{-ms-touch-action:none;touch-action:none}.ui-autocomplete{position:absolute;top:0;left:0;cursor:default}.ui-menu{list-style:none;padding:0;margin:0;display:block;outline:none}.ui-menu .ui-menu{position:absolute}.ui-menu .ui-menu-item{position:relative;margin:0;padding:3px 1em 3px .4em;cursor:pointer;min-height:0;list-style-image:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")}.ui-menu .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:-1px}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item{padding-left:2em}.ui-menu .ui-icon{position:absolute;top:0;bottom:0;left:.2em;margin:auto 0}.ui-menu .ui-menu-icon{left:auto;right:0}.ui-widget{font-family:Verdana,Arial,sans-serif;font-size:1.1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Verdana,Arial,sans-serif;font-size:1em}.ui-widget-content{border:1px solid #aaa;background:#fff;color:#222}.ui-widget-content a{color:#222}.ui-widget-header{border:1px solid #aaa;background:#ccc url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;color:#222;font-weight:bold}.ui-widget-header a{color:#222}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #d3d3d3;background:#e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#555}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#555;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #999;background:#dadada url("images/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#212121}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited{color:#212121;text-decoration:none}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #aaa;background:#fff url("images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#212121}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#212121;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fcefa1;background:#fbf9ee url("images/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x;color:#363636}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#363636}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#fef1ec url("images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;color:#cd0a0a}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#cd0a0a}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#cd0a0a}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("images/ui-icons_222222_256x240.png")}.ui-widget-header .ui-icon{background-image:url("images/ui-icons_222222_256x240.png")}.ui-state-default .ui-icon{background-image:url("images/ui-icons_888888_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url("images/ui-icons_454545_256x240.png")}.ui-state-active .ui-icon{background-image:url("images/ui-icons_454545_256x240.png")}.ui-state-highlight .ui-icon{background-image:url("images/ui-icons_2e83ff_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("images/ui-icons_cd0a0a_256x240.png")}.ui-icon-blank{background-position:16px 16px}.ui-icon-carat-1-n{background-position:0 0}.ui-icon-carat-1-ne{background-position:-16px 0}.ui-icon-carat-1-e{background-position:-32px 0}.ui-icon-carat-1-se{background-position:-48px 0}.ui-icon-carat-1-s{background-position:-64px 0}.ui-icon-carat-1-sw{background-position:-80px 0}.ui-icon-carat-1-w{background-position:-96px 0}.ui-icon-carat-1-nw{background-position:-112px 0}.ui-icon-carat-2-n-s{background-position:-128px 0}.ui-icon-carat-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-64px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-64px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:0 -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:4px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:4px}.ui-widget-overlay{background:#aaa;opacity:.3;filter:Alpha(Opacity=30)}.ui-widget-shadow{margin:-8px 0 0 -8px;padding:8px;background:#aaa;opacity:.3;filter:Alpha(Opacity=30);border-radius:8px}
.ui-timepicker-container{position:absolute;overflow:hidden;box-sizing:border-box}.ui-timepicker,.ui-timepicker-viewport{box-sizing:content-box;height:205px;display:block;margin:0}.ui-timepicker{list-style:none;padding:0 1px;text-align:center}.ui-timepicker-viewport{padding:0;overflow:auto;overflow-x:hidden}.ui-timepicker-standard{font-family:Verdana,Arial,sans-serif;font-size:1.1em;background-color:#FFF;border:1px solid #AAA;color:#222;margin:0;padding:2px}.ui-timepicker-standard a{border:1px solid transparent;color:#222;display:block;padding:.2em .4em;text-decoration:none}.ui-timepicker-standard .ui-state-hover{background-color:#DADADA;border:1px solid #999;font-weight:400;color:#212121}.ui-timepicker-standard .ui-menu-item{margin:0;padding:0}.ui-timepicker-corners,.ui-timepicker-corners .ui-corner-all{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}.ui-timepicker-hidden{display:none}.ui-timepicker-no-scrollbar .ui-timepicker{border:none}/*# sourceMappingURL=jquery.timepicker.min.css.map */
/*-------------------------------------------------------------------->
	STYLE: Variant1
<--------------------------------------------------------------------*/
.style-variant1 .joe-panel-content-option {
    border: 1px solid #e1e1e1;
    margin: .4% .3% .1% .3%;
    background-color: #fff;
}

.style-variant1 .list-mode .joe-panel-content{
    padding:0;
    background: #eee;
}
print-joe{
    display:none;
}
@media print
{    
    capp-wrapper
    {
        display: none !important;
    }

    print-joe {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        min-height: 100%;
        background: #fff;
        z-index: 10000;
    }
    print-joe joe-panel-content.joe-panel-content {
        bottom: auto !important;
        overflow: auto !important;
        position: relative;
        top: 0px !important;
        left: 0;
        right: 0;
    }

}


    body.test-print capp-wrapper
    {
        display: none !important;
    }

    body.test-print print-joe {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        min-height: 100%;
        background: #fff;
        z-index: 10000;
    }
    body.test-print print-joe joe-panel-content.joe-panel-content {
        bottom: auto !important;
        overflow: auto !important;
        position: relative;
        top: 0px !important;
        left: 0;
        right: 0;
    }