json-object-editor/css/joe-styles.css

JOE the Json Object Editor | Platform Edition

@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