json-object-editor/css/joe.css

JOE the Json Object Editor | Platform Edition

/* --------------------------------------------------------
 *
 *  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;
    backgr