.od-dragable-dialog {
	background-color: #fff;
}

.od-dragable-dialog.draggable {
	position: absolute;
	top: 53px;
	right: 10px;
	border: medium none;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;

    width: 300px;
}



#od-dragable-dialog.fullscreen{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	height: 2000px;
}


#od-dragable-dialog.pinned{
	/*position: static;
	width: 100%;
	box-shadow: none;*/

	margin: 5px 15px 20px 15px;
	max-width: 100%;
}

#od-dragable-dialog.pinned .od-dragable-content{
	max-height: 175px;
	overflow-y: visible;
}


/*help on top of everything, except user menu when open*/
body:not([od-usermenu="open"]) #od-dragable-dialog {
	z-index: 2000; /*od-usermenu .dropdown-menu is 1000*/
}

.od-dragable-header {
	background-color: #DDDDDD;
    padding: 12px;
    position: relative;
    /*z-index: 1;*/
}
/*.od-dragable-header-row {
	height: 56px;
	line-height: 56px;
	position: relative;
}*/
.od-dragable-header-title {
	/*left: 8px;*/
	/*line-height: 32px;*/
	/*max-width: 304px;*/
	overflow: hidden;
	/*position: absolute;*/
	text-overflow: ellipsis;
	/*top: 12px;*/
	white-space: nowrap;
}

/*these are for mobile panel as well as dragable*/
#od-dragable-header-title {
	color: #777 !important;
	font-size: 21px !important;
	font-weight: 400 !important;
	margin: 0 !important;
}


/*.od-dragable-header-closeIcon {
	cursor: pointer;
	height: 24px;
	width: 24px;
	position: absolute;
	right: 4px;
	top: 16px;
}*/

.od-dragable-dialog.draggable .od-dragable-content {
	min-height: 300px;
}

.od-dragable-content {
	position: relative;
	transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;
	width: 100%;
	display: block;
	max-height: 400px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.od-dragable-title {
	color: #757575;
	font: 600 14px Arial, Helvetica, sans-serif;
	cursor: pointer;
}
.od-dragable-error{
	color: red;
	font: 600 14px Arial, Helvetica, sans-serif;
}
ul.od-dragable-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
li.od-dragable-listItem {
	cursor: pointer;
	display: block;
}
li a.od-dragable-iconTextComponent {
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	border: medium none;
	cursor: pointer;
	display: block;
	position: relative;
	text-align: left;
	text-decoration: none;
	width: 100%;
	margin-top: 0;
	padding-top: 16px;
}
li span.od-dragable-iconTextComponent-label {
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: -1px;
	padding: 0 0 16px 20px;
	color: #212121;
	display: block;
	font: 400 16px/24px Arial, Helvetica, sans-serif;
	text-decoration: none;
	word-wrap: break-word;
	cursor: pointer;
	text-align: left;
}
.od-header-searchIcon{
	cursor: pointer;
    left: 14px;
    outline: medium none;
    position: absolute;
    top: 12px;
    transition: transform 0.15s cubic-bezier(0.4, 0, 1, 1) 0s;
    /*z-index: 1;*/
    background-color: transparent;
    border: medium none;
    font-size: 1.5em;
    color: #777;
}
.od-header-searchBox{
	border: 0 none;
    box-sizing: border-box;
    color: #444;
    font: 400 16px Arial, Helvetica, sans-serif;
    height: 48px;
    margin: 0;
    padding: 10px 12px 10px 60px;
    width: 100%;
    border-radius: 2px;
    /*opacity: 0.3;*/
}
.od-header-searchFormContainer{
	border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 5px 0 rgba(0, 0, 0, 0.157);
    position: relative;
    width: 100%;
    cursor: move;
}
.od-header-searchRow{
    padding: 12px 0;
}


/*.od-header-toolbar-btn {
	padding-bottom: 8px;
	height: 42px;
}
.od-header-toolbar-btn a .fa-stack{
	color:#fff;
}
.od-header-toolbar-btn a .fa-stack-1x{
	color:#555;
}*/

/*#od-helpdialog-toolbar {padding-bottom: 8px;}*/

#od-helpdialog-toolbar button {
	padding: 4px 8px 1px 8px;
    margin-right: 2px;
}

/*compensate for last button*/
#od-helpdialog-toolbar {margin-right: -2px;}

#od-helpdialog-toolbar button#od-helpdialog-toolbar-back {margin-right: -3px;}

#od-helpdialog-toolbar i {font-size: 20px; color:#555;}

/*tone down the nav buttons*/
#od-helpdialog-toolbar button.od-help-nav i {font-size: 18px;}
#od-helpdialog-toolbar button.od-help-nav {padding: 5px 6px 2px 6px!important;}


#od-help-inner-content{
	/* max-height: 400px;
    overflow-y: scroll; */
}

.od-dialog-iframe-content{

}

.od-help-inner-content{
    margin: 0 12px;
    padding: 5px 0;
    /*border-bottom: 1px solid #ccc;*/

    /*white-space: pre-wrap;*/
}

#od-help-inner-content h1{
    font-size: 120%;
    font-weight: bold;
    margin-top: 5px;
    border-bottom: solid 1px #eee;
    padding: 5px 0;
}


#od-help-inner-content h2{
    font-size: 100%;
    font-weight: bold;
    margin: 5px 0 2px 0;
}


#od-help-inner-content .od-simpletree > ul{
    margin: 10px 0;
}

#od-help-inner-content a.popout{
    /*position: absolute;
    top: 10px;
    right: 10px;*/
    float: right;
    margin: 2px 0 0 10px;
}

#od-help-inner-content a.popout:hover{
    text-decoration: none;
}

#od-help-inner-content a.popout:before{
	content: "\f08e"; /*glyphicon-new-window*/
	font-weight: bold;
    font-size: 1.3em;
    font-family: FontAwesome;
}


/*copied from img-responsive*/
#od-help-inner-content img {
	display: block;
    max-width: 100%;
    height: auto;
}

/*#od-help-inner-content iframe {
	display: block;
    max-width: 100%;
    height: auto;
}*/



/*not ready yet*/
/*#od-dragable-dialog a.popout {display: none;}*/

.od-dragable-desc img{
	width:100%;
}
.help-loader{   
	top: 50%;
    left: 35%;
    z-index: 9999;
	position:absolute;
	display:none;
}


#od-helpdialog-footer {
	padding: 6px 12px;
	background-color: #eee;
}


#od-dragable-dialog.fullscreen #od-helpdialog-showonstartup {display: none;}


#od-helpdialog-showonstartup {padding-left: 12px;}

#od-helpdialog-showonstartup label {
	font-weight:normal;
	border-top: dotted 1px #ccc;
    width: 100%;
    padding-top: 3px;
    font-size: 90%
}

/*#od-helpdialog-showonstartup input {
	width: 11px;
}*/

/*
#od-dragable-content-container ul {
  list-style: none;
  padding: 0;
}
#od-dragable-content-container li {
  padding-left: 1.3em;
}
#od-dragable-content-container li:before {
  content: "\f0da";
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em;
  width: 1.3em;
  cursor: pointer;
}
#od-dragable-content-container li li {display: none;}
*/


#od-help-inner-content hr {
	margin-top: 10px;
    margin-bottom: 10px;
}

.od-help-suggestions {
    /*position: absolute;
    bottom: 0;*/
    padding: 5px;
    background: #eee;
    /*width: 91%;
    margin-right: 10px;*/
    margin-bottom: 10px;
}

.od-help-suggestions > .title{
	padding: 5px;
	font-weight: bold;
}

.od-help-suggestions > .od-help-suggestion{
	border-top: solid 1px #ddd;
	padding: 5px;
	display: block;
	cursor: pointer;
}


#od-dragable-dialog.loading {cursor: wait;}


.od-single-help-content iframe.od-embed {resize: none;}





/*OV-831 Dock Help Pop Up to the left/right*/
body[od-help-dock="left"] #od-dragable-dialog,
body[od-help-dock="right"] #od-dragable-dialog{
	position: fixed;
	top: 0 !important;
	height:  100%;
	min-width: 20%;
	max-width: 20%;
	left: 0%!important;

	box-shadow: none !important;
}

body[od-help-dock="left"] #od-dragable-dialog{
	border-right: solid 2px #ddd;
}

body[od-help-dock="right"] #od-dragable-dialog{
	left: 80%!important;
	border-left: solid 2px #ddd;
}

body[od-help-dock="right"] #od-container{
 	width:80%
}
/* body[od-help-dock="right"][od-topnav-position="fixed"] #od-navbar,
body[od-help-dock="right"] #footer,
body[od-help-dock="left"] #footer,
body[od-help-dock="right"] .container{
	width: 100%;
} */
body[od-help-dock="right"] #footer,
body[od-help-dock="left"] #footer{
	width: 80%;
}

body[od-help-dock="left"]/* ,body[od-help-dock="left"] #od-navbar */{
	margin-left: 20%;
}

body[od-help-dock="left"] #od-dragable-content-container,
body[od-help-dock="right"] #od-dragable-content-container{
	height: calc(100% - 185px);
    max-height: inherit !important;
    overflow-y: auto;
    background: #fff;
}

body[od-help-dock="left"] #od-helpdialog-showonstartup,
body[od-help-dock="right"] #od-helpdialog-showonstartup{
    position: fixed;
	bottom: 0;
    width: 20%;
}

body[od-help-dock="right"] #od-helpdialog-showonstartup{
	width: 100%!important;
}

body[od-help-dock="right"] #od-helpdialog-showonstartup label{padding-top: 10px;}
body[od-help-dock="right"][od-topnav-position="fixed"] .od-container #od-navbar{width:80%;}


body[od-page-width="full"][od-help-dock="right"] .container{
	width: 100%!important;
}
/*body[od-help-dock="right"] #od-container{overflow-y: scroll;}*/

@media screen and (min-width: 1200px) and (max-width: 1460px) {
body[od-help-dock="right"][od-topnav-position="fixed"] #od-navbar,
body[od-help-dock="right"] .container{
	width: 100%;
}
}

/* Responsive width on small screens for draggabble dialog*/
@media (max-width: 992px){
	.od-dragable-dialog {
	    min-width: 50%;
	    max-width: 50%;
	}
	@media (max-width: 480px){
	.od-dragable-dialog {
	    min-width: 75%;
	    max-width: 75%;
	}
}