.jbm_mainContainer {
    background-color: lightgray;
    padding: 0px;
    margin: 0px;
    border-color: black;
    border-style: solid;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    overflow: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.jbm_mainContainer:empty {
    display:none;
}

.jbm_mainContainer > div {
    width:100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    display: block;
    position: static;
}

.jbm_preview {
	width:auto;
	max-width:80%;
	height:auto;
	border-width:medium;
	border-color:#000;
	position:absolute;
	z-index:1;
	top:0px;
	left:0px;
    border-style: solid;
    background-color: lightsalmon;
	padding:0px;
	margin:0px;
	overflow:auto;
    background:#eee;

    display:flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
}

.jbm_preview > .jbm_floatingContainer {
    /*
    display:flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    */
    width:100%;
    max-height: auto;

    flex-grow:1;
    align-items: stretch;
}

.jbm_preview .jbm_EditorFrame {
    flex-grow:1;
    align-items: stretch;
    resize: both;
}

.jbm_preview_button {
	font-size:10px;
	color: black;
}
/*=====================================================================
    image prompt
======================================================================*/
.jbm_ImageDimensionPrompt {
    top:100px;
    left:100px;
    width:200px;
    height:auto;
    background-color: azure;
    border-style: solid;
    border-width: 2px;
    opacity:1;
    position:absolute;
    box-shadow: 5px 5px 10 8px lightgrey;
	padding:.4em;
}

.jbm_ImageDimensionPrompt > div {
	margin:0px;
	padding:.2em;
}

.jbm_ImageDimensionPrompt label {
	width:80px;
	display:inline-block;
}

.jbm_ImageDimensionPrompt input {
	width:100px;
}
/*=====================================================================
    set the element to be invisible
======================================================================*/
.jbm_invisible {
    opacity: 0;
    /* complient browsers 0 -> 1 */
    -moz-opacity: 0;
    filter: alpha(opacity=0);
    /* IE 7 or lower 0 -> 100 */
    display: inline-block;
}
/*=====================================================================
    conversation toolbar
======================================================================*/
.jbm_toolbar {
    position: static;
    width: 100%;
    height: auto;
    margin: 0px;
    padding: .4em;
}

.jbm_toolbarSet {
    padding: 0px;
    margin: 0px;
    margin-left: .1em;
    margin-right: .1em;
    float: left;
    border-radius: .3em;
    border-width: 1px;
    border-style: groove;
    border-color: brown;
}

.jbm_toolbarItem {
    position: relative;
    width: 1.2em;
    height: 1.2em;
    margin: .1em;
    padding: .1em;
    border-radius: .1em;
    float: left;
    cursor: pointer;
}

.jbm_toolbarItem img {
    position: static;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

.jbm_toolbarItem input[type='file'] {
    position: static;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 600px) {
    .jbm_toolbarItem {
        width: 2em;
        height: 2em;
    }
}
/*=====================================================================
    conversation container
======================================================================*/
.jbm_editorContainer {
    overflow: auto;
    position: static;
    margin: 0px;
    padding: 0px;
    padding-left: 2px;      /* chrome, force to show cursor */
    padding-right: 2px;     /* */
    border: 0px;
    /* background-color: antiquewhite; */
    background-color: transparent;
    /* display: inline-block; */
    display: block;

	/* vertical-align:text-top; */

    width: 100%;
    max-width: 100%;
    height: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
}
/*==================================================================
    address the problem with contentEditable in IPad
===================================================================*/
.jbm_EditableContent {
    -webkit-user-modify:read-write;
    -webkit-user-select: text;
    user-select: text;
    background-color: lightgray;
    border-top: 2px solid;
}

.jbm_EditableContent:focus {
    background-color: whitesmoke;
}


.jbm_EditableContent img {
    cursor:context-menu;
}

.jbm_editorContainer:focus {
    background-color: whitesmoke;
}

.jbm_EditorFrame {
    width: 100%;
    height: 360px;
    max-width: 100%;
    display: block;
    padding:0px;
    margin:0px;
    position:relative;
    overflow:auto;
}

/* used by Chapp to make the fonts common. see id='messages' in __chat.html  */

.jbm_EditorFrame_fonts {
    /* font-family: Arial, Helvetica, sans-serif; */
    font-size: 1em;
}

.jbm_editorContainer img,
video {
    vertical-align: text-top;
    max-width: 100%;
	image-orientation: from-image;	/* orientation. flipped */

}

/* --- standard panel  see plugins.js for use --*/

.jbm_StandardPanel {
    width: 250px;
    max-width: 90%;
    margin: 0px;
    padding: .4em;
    height: auto;
    max-height: 14em;
    background-color: azure;
    border-style: double;
    overflow: auto;
}


.jbm_StandardPanelTitle {
    margin: 0px;
    width: 100%;
    padding: 0px;
    height: auto;
    font-size: 1em;
    border-bottom: solid;
    border-bottom-width: 1px;
}

.jbm_StandardPanelTitle img {
    width: 1.2em;
    height: 1.2em;
    padding: 0px;
    margin: 0px;
    float: left;
}

.jbm_StandardPanelTitle span {
    position: relative;
    margin-left: 0px;
    margin-right: 0px;
    width: auto;
    height: auto;
    float: left;
    margin-left: .4em;
    text-align: center;
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
}

.jbm_StandardPanelMenus {
    width: 100%;
    height: auto;
    display: block;
    padding: 0px;
    margin: 0px;
    font-size: 1em;
}

.jbm_StandardPanelMenus:empty {
    display: none;
}

.jbm_StandardPanelMenus p {
    width: 100%;
    height: 1.5em;
    font-size: 1em;
    text-align: center;
	margin: .3em 0px .3em 0;
    padding:0px;    
}

.jbm_StandardPanelMenus textarea {
    width: 100%;
    height: 1.5em;
	margin: .3em 0px .3em 0;
    padding:0px;    
}

.jbm_StandardPanelMenus button {
    position: static;
	display: block;
	background-color: blanchedalmond;
	height: 2em;
    font-size: 1em;
	padding: 0px;
	padding-top: .3em;	
	padding-bottom: .3em;
	width: 100%;
	margin: 0px;
	cursor: pointer;
	overflow:hidden;
	/* border-radius: .4em; */
	white-space: nowrap;
}

.jbm_StandardPanelIMG {
    width: 1.5em;
    height: 1.5em;
    padding: 0px;
    margin: 1px;
    float: left;
}

.jbm_StandardPanelDiv {
    width: 1.5em;
    height: 1.5em;
    padding: 0px;
    font-size: 1em;
    margin: 1px;
    float: left;
}

@media only screen and (max-width: 800px) {

    .jbm_StandardPanel {
        max-width: 600px; /* 80%; */
        width: 70%;
    }

    .jbm_StandardPanelIMG {
        width: 2em;
        height: 2em;
    }

    .jbm_StandardPanelDiv {
        width: 2em;
        height: 2em;
    }
}

/* --- link */

.jbm_linkPanel {
    border-style: double;
    width: 300px;
    margin: 0px;
    padding: 2px;
    height: auto;
    background-color: azure;
}

.jbm_linkPanel_input {
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5%;
    margin-right: 5%px;
    width: 90%;
    height: auto;
}

.jbm_linkPanel_button {
    margin-top: 0px;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5px;
    width: 90%;
    height: auto;
}

.jbm_hoverDiv {
    position: absolute;
    padding: 20px 15px 8px 15px;
    margin: 0px;
    background-image: url("../img/bubble.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: auto;
    height: auto;
    z-index: 10000100;
    opacity: 1;
    /* see jmeditor - coverBody */
}

.jbm_hoverDiv p {
    font-size: .8em;
    position: static;
    color: white;
    padding: 0px;
    margin: 4px;
    margin-right:8px;
    text-align: center;
}

.jbm_standard_footing {
	background-color:#CCC;
	padding: .2em;
}

.jbm_standard_footing button {
	font-size:1em;
	margin-left: .4em;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 2px;
    padding: 5px;
}

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

.jme_msgbox {
    width: auto; /* 250px; */
    height: auto;
    position: absolute;
    left: -500px;
    top: 0px;
    display: block;
    border-width: 2px;
    border-style: solid;
    text-align: center;
    margin:0px;
    padding:0px;
}