#cms-helptext:empty, #cms-helptext[data-textlength="0"] {display: none}
#cms-helptext {opacity: 0; clear: both;}
#cms-helptext:not(.alert-dismissible) button.close {display: none;}
#logo-header{display:none;}

.hidden, .hidden0 {display: none !important; visibility: hidden;}

.pointer {cursor: pointer;}

.icon-cog-2x 
{
	background-image: url('/images/icons/cog2x.png?width=15'); 
	background-position: 0 0;
	width: 15px; 
	height: 15px;
}


.col-content {min-height: 150px;}


/*#od-topnav li.starred:before {
	font-family:Font!!Awesome;
	content: "\f005";
	color: orange;
	position: absolute;
    top: 22%;
    left: 5px;
    font-size: 80%;
}*/


/*show stars in topnav + subnav*/
body[od-topnav-show-starred="1"] #od-topnav li.starred {
    background-image: url('/images/icons/star.png');
    background-repeat: no-repeat;
    background-position: 2px center;
    background-size: 12px;
}

body[od-subnav-show-starred="1"] #od-topnav li.starred[data-level="0"] {background-position: left center;}

body[od-subnav-show-starred="1"] #od-subnav li.starred {
    background-image: url('/images/icons/star.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px;
}

body[od-topnav-show-starred="1"] #od-topnav a:hover,
body[od-subnav-show-starred="1"] #od-subnav a:hover 
	{background-color: rgba(0,0,0,.05);}



/*#od-subnav li.starred > a:after {
	font-family:Font!!Awesome;
	content: "\f005";
	color: orange;
	margin-right: 4px;
	float: right;
}*/



/*#od-content-container {margin-left: 15px;}*/

#od-subnav li[data-noshow="1"] {display: none;}

body #od-col-subnav > .panel {padding-bottom: 15px;}

body[od-subnav-docked="1"]:not([od-topnav-position="floating"]) #od-content-container {
	padding-left: 0;
}

body[od-subnav-docked="1"] #od-content-container {
	padding-bottom: 20px !important;
    padding-top: 0;
}

body[od-subnav-height="full"] #od-content-container {
	padding-bottom: 45px;
}



body[od-subnav-docked="1"] #od-subnav,
body[od-subnav-docked="1"] #od-col-content {
	padding-top: 15px;
	margin-top: 0;
	margin-bottom: 0;
}


html,
body[od-subnav-height="full"],
body[od-subnav-height="full"] #od-container,
body[od-subnav-height="full"] #main,
body[od-subnav-height="full"] #od-content-container,
body[od-subnav-height="full"] #od-content-container > .row,
body[od-subnav-height="full"] #od-col-subnav,
body[od-subnav-height="full"] #od-col-subnav > .panel,
body[od-subnav-height="full"] #od-subnav
{height: 100%; }





/*html, body {
  height: 100%;
}

body {
  display: flex;
}

#od-container,
#main,
#od-content-container,
#od-content-container > .row,
#od-col-subnav,
#od-col-subnav > .panel,
#od-subnav
{display: flex; flex: 1;}*/


/*-------------------------------------------------------------*/
/*simpletree\subnav*/
.od-simpletree ul {padding-left: 0px;}
.od-simpletree ul ul {padding-left: 10px;}

.od-simpletree li {
	clear: left;
	padding-left: 10px;
}

.od-simpletree .caret-right {
	position: absolute;
	margin-left: -5px;
	border-width: 6px;
	border-left-width: 10px;
	margin-top: 3px;
	color: #ccc;
	cursor: pointer;
}

.od-simpletree .caret-right:hover {
	color: #999;
}

.od-simpletree li.active > span.caret-right {
	border-top: 10px dashed;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    margin-top: 5px;
}

.od-simpletree li.active > ul > li {display: block}

/*hide all sub-subnav*/
.od-simpletree li li {display:none;}

/*experiment with stopping subnav wrap*/
.od-simpletree a {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-x: hidden;
}

.od-simpletree li.selected > a {/* background-color: rgba(255, 255, 255, .3); */ font-weight: bold;}
/*div.subnav li.selected > a:before {color: #000;}*/

.od-simpletree li {list-style-type: none;}
.od-simpletree li a {padding: 0px 5px; margin-left: 10px; overflow: hidden;}
/*div.subnav li a:before {content: "\e080"; font-family: 'Glyphicons Halflings'; color: #ebebeb; margin-right: 4px;}*/
.od-simpletree li a:hover {text-decoration: none; color: #000;}

/*make subnav hover more obvious and short names easier to click*/
.od-simpletree li a {display: block;}
.od-simpletree li a:hover {background-color: rgba(255, 255, 255, .3);font-weight: bold;}

/*unclickable nodes*/
.od-simpletree a:not([href]),
.od-simpletree a:not([href]):hover {color: #777;}


/*-------------------------------------------------------------*/
/*OV-1672 new TD option : Side Nav > Options > Show Icons*/
body:not([od-subnav-options-showicons="1"]) #od-subnav-menu span.od-page-icon {display: none;}

/*.od-simpletree span.od-page-icon {   sp-538 */
	/* float: left; */
	/* color: white; */
	/* padding: 0; */
	/* line-height: 0; */
	/*margin-right: 5px;*/
	/* opacity: .7; */
	/* color: #ccc; */
/*}*/

/*-------------------------------------------------------------*/

button > span.od-page-icon {margin-right: 5px;}


/*div.subnav li a:before {display: none;}*/
/*.navbar .nav > li > a:hover {text-decoration: underline;}*/



/*adjust subnav ul padding to suit the width*/
body[od-subnav="wide"] div.subnav ul ul {padding-left: 20px;}
body[od-subnav="narrow"] div.subnav ul ul {padding-left: 0px;}
body[od-subnav="auto"] div.subnav ul ul {padding-left: 5px;}



body[od-subnav-position="right"] #od-col-subnav {float: right;}
body[od-subnav-position="off"] #od-col-subnav {display: none;}


/*dashboard*/
div.subnav.well li a:before {
	color: inherit;
	margin-left: -3px;
}

/*div.subnav > li:first-child > a:first-child {display: none;}
div.subnav span.caret {display: none;}*/


/*#pageid-1219 div.subnav li.depth-level-1 {display:list-item;}*/

div.col-content {min-height:300px;}


.form-horizontal .control-group {margin-bottom: 8px;}
#dialog-pagesettings {overflow:hidden;}

.navbar .navbar-search .search-query {width:80px;}

iframe.od-embed {
	border: solid 1px #ddd; 
	/*border-radius: 4px;*/
	box-sizing: border-box;
	width: 100%; 
	/*max-height: 1000px;*/
	/*background-color: #ccc;*/
	resize: vertical;
}

/*if this was for gdocs file menu it should be in drive plugin, if anywhere*/
/*tall enough for gdocs file menu*/
/*main#main iframe.od-embed {
	min-height: 575px; 
}*/

/*if this was for videos it should be in that plugin, if anywhere*/
/*OV-1546 Embedded youtube videos added via page type should show full thumbnail.*/
/*main#main iframe.od-embed.type-video {
	height: auto!important;
	min-height: 525px;
}*/

/*2.9 - disable these for newly responsive videos, in case they cause problems - like videos won't play in help dialog!?*/
iframe.od-embed.embed-responsive-item {
	box-sizing: inherit;
	border-radius: 0px;

	/* these disabled for zd#12792 - where iframes and drive embeds were too short on mobile*/
	/* min-height: inherit; */
	/* resize: none; */
}


/*.od-iframe-container.loading {
	background: url(/images/icons/loading.gif) no-repeat;
}

.od-iframe-container.loading iframe {
	opacity: 0;
}

.od-contenttype-group:not(.iframe-loaded) {background: url(/images/icons/loading.gif) no-repeat;}
.od-contenttype-group:not(.iframe-loaded) iframe {opacity: 0;}*/

/* commented out for OV-1594*/
/*.od-iframe-loader:not(.loaded) iframe {opacity: 0;}
:not(.od-iframe-loader) > iframe.od-iframe-useloader { opacity: 0; }
*/
iframe.od-iframe-useloader:not([src]) {display: none;}

.od-iframe-loader:not(.loaded):before {

    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
    content: "\f021";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 40px;
    
    position: absolute;
    
    top: 50%;
    left: 50%;
}


/*iframe[pre-src]:not([src]) {visibility: hidden;}*/


div.attach-crumbtrail{
	margin-top: 5px;
	margin-right: 5px;
	/*width: 100%;*/
	float: right;
	/*background-color: #ccc;
	border-radius: 5px 5px 0 0;*/
}


/*remove padding from crumbtrail when there's no border*/
body:not([od-theme-borders-border-width]) div.attach-crumbtrail,
body[od-theme-borders-border-width="0"] div.attach-crumbtrail 
{margin-right: 0px !important;}

body:not([od-theme-borders-border-width]) #od-breadcrumb,
body[od-theme-borders-border-width="0"] #od-breadcrumb
{padding-left: 0px;}


div.attach-crumbtrail li {display: list-item;}

/*hide items destined for crumbtrail until they get there*/
.attach-crumbtrail {display: none;}
.od-breadcrumb-container > .attach-crumbtrail, #od-page-toolbar > .attach-crumbtrail
	{display: inline-block;}


/*body.od-loading {opacity: 0;}*/
/*body.od-loading .cms-contentauto {opacity: 0;}*/
body.od-loading .breadcrumb .btn-group {opacity: 0;}

/*some content types need hiding until rendered*/
/*body:not(.plugin-ready) .od-contenttype-dashboard {opacity: 0;}*/


/*switchtoedit*/
.breadcrumb .btn-lg {
	padding: 3px 16px;
	margin-top: -2px;
	height: 34px;
}

/*where glyphicon used, keep same as fa*/
.breadcrumb .attach-crumbtrail button > i.glyphicon {
    font-size: 16px;
    position: relative;
}

.breadcrumb .attach-crumbtrail button > b.caret {
	/*float: right;
    margin-top: 8px;*/
    margin-left: 5px;
}

.breadcrumb > .attach-crumbtrail > a.btn {margin-top: -2px;}


#od-breadcrumb > .badge {
    padding: 8px 12px;
    margin-top: -4px;
    margin-right: -8px;
    font-weight: normal;
}


.od-icon-drive:before {
	content: url('/images/icons/drive_icon_gray_18.png');
	line-height: 1.8;
}


/*where foundation used keep same size as fa*/
.btn i.fi {font-size: 20px;}


/*editors*/
/*.cms-content:not(:empty) {margin-bottom: 8px;}*/

/*stop pencil icon appearing 1/3rd from right*/
.cms-content {clear: both;}


div#cms-content:empty {display: none;}


/*div.cms-content, div.editable {min-height: 10px;}*/ /*enough height to be hoverable*/
div.editable {
	cursor: pointer; 
	border: dotted 1px transparent;
    min-height: 32px;
}

div.editable > *:last-child {margin-bottom: 0;}

div.editable:not(.loading):empty:after {
	content: attr(data-placeholder);
}

div.editable[data-placeholder]:empty, div.editable:hover, div.editable.loading {
	/*border-radius: 4px; */
	/*min-height: 25px; */
	
	/*background-color: #eee; */
	border-color: #ccc;

	/*
	padding: 5px 5px 0 5px; 
	margin: -5px 0 10px -5px;*/

	/*make room for border but prevent any shift of other elements*/
	margin-left: -5px;
	padding-left: 5px;

	margin-top: -5px;
    padding-top: 5px;
    margin-bottom: 5px;

}

div.editable.loading:before {
	animation: fa-spin 2s infinite linear;
	content: "\f021";
	font:normal normal normal 16px FontAwesome;
	display: inline-block;
	float: right;
    margin-top: 2px;
    margin-right: 5px;
}

div.editable:not(.loading):hover:before {

	content: "\f044"; /*edit*/
	font: normal normal normal 16px/1 FontAwesome;

	float:right; 
	/*position: absolute;
    right: 15px;*/

    /*position: relative;
    top: -5px;*/

    background-color: rgba(230,230,230,.75);
    border-radius: 4px;
    border: solid 1px #ccc;
    padding: 5px;
    margin: -4px 1px 0 0;
}

/*summernote's placeholder are too dark*/
.note-editor .note-placeholder {color: #999;}
.note-editor.note-frame {margin-bottom: 0;}


/* v4-sp-896 hide current font name to preserve space ... */
span.note-current-fontname {display: none;}

/* instead inject our own icon... */
.note-btn-group.note-fontname button:before {
	/*fas-font*/
	content: '\f031' !important;
	font-family: 'Font Awesome 5 Free';
  	font-weight: 900; 
}


/*reduce up dropdown button width ...*/
.note-btn.dropdown-toggle {padding-right: 6px;}

/*v4-sp-890 specialchars button...*/
.note-specialchar-node button {
    font-size: 1.5em;
    padding: 0px 5px;
}


/* sp-571 summernote upgrade - mostly for paste cleaner */
.note-status-output {display: none !important;}
.note-statusbar.locked {display: none !important;}

/* for forums tile 21-03 */
.note-editable {min-height: 100px;}



/* v4-sp-705 hacky way of fixing summernote-image-title's OK button  */
/*.note-image-title-btn {font-size: 0;}
.note-image-title-btn:after {
	content: 'OK';
	font-size: initial;
}
*/

/*make subnav indent*/
ul.nav-list ul {margin-left: 5px;}
.subnav > .nav-list li {text-indent: -18px; margin-left: 16px;}



/*scaling icons*/
/*td.star {vertical-align: middle !important;}*/
body[od-theme-body-font-size="large"] td.star div {width: 18px; height: 18px; margin-top: 3px;}
body[od-theme-body-font-size="xlarge"] td.star div {width: 20px; height: 20px; margin-top: 6px;}

body[od-theme-body-font-size="large"] .attach-crumbtrail .btn-default {font-size: 18px;}
body[od-theme-body-font-size="large"] .od-datatable-refresh {font-size: 18px;}
body[od-theme-body-font-size="large"] .dataTables_filter .input-sm {height: 32px; right: 8px;}

body[od-theme-body-font-size="xlarge"] .attach-crumbtrail .btn-default {font-size: 24px;}
body[od-theme-body-font-size="xlarge"] .od-datatable-refresh {font-size: 24px;}
body[od-theme-body-font-size="xlarge"] .dataTables_filter .input-sm {height: 38px; right: 10px;}


body[od-theme-body-font-size="large"] td.iconlink img {min-width: 18px; width: 18px;}
body[od-theme-body-font-size="xlarge"] td.iconlink img {min-width: 20px; width: 20px;}


/*in case we want to switch to Font!!Awesome on folder view too*/
/*td.star div:before {font-family:Font!!Awesome; content: "\f006";}
td.star.starred1 div:before, td.star > div[data-starred="1"]:before {color: orange; content: "\f005";}*/



/*breadcrumb & folderv2 stars*/
.od-btn-star.starred i, .od-btn-star[data-starred="1"] {color: orange;}
.od-btn-star i:before {content: "\f006"; /*fa-star-o*/}
.od-btn-star.starred i:before, .od-btn-star[data-starred="1"] i:before {content: "\f005"; /*fa-star*/}
/*breadcrumb star looks a little small*/
button.od-btn-star i:before {font-size: 16px;}


/*file published label*/
div.label.published {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	padding: 5px 10px;
	display: none;
}

/*hide on home*/
/*body.root-page-home.page-home div.label.published {display: none;}*/

/*only display on gdocview*/
.cms-contentauto.od-contenttype-gdocview div.label.published {
	display:inline-block;
	background-color: #aaa;
}

div.label.published .word2,
div.label.published .author {display: none;}


/*stop blog articles from showing their parent page's content*/
body[od-contenttype="gdocview"] .cms-content {display: none;}


/*where doc html injected, stop published from squashing up first line*/
.gdoccontents {clear: right;}

/*some sites will want to override this*/
a.popped-view {display: none;}


.navbar-search {display:none;}
/*.navbar .nav {margin-right: 0px;}*/



#od-pageheader, #od-pageheader-alt.page-header {
	/* background-position: right; */
	background-position: 99% 0;
	padding-right: 0px;
	padding-bottom: 0;

	/*vain attempt to make header image responsive*/
	background-size: auto 88%;

	margin-top: -15px;
	background-repeat: no-repeat;
}

body[od-searchbox-position="banner-right"] .page-header {background-position: right 50px top 0;}

body:not([od-banner-height="off"]):not([od-pageheader-position="content"]) #od-pageheader-alt {display: none;}

#od-pageheader-alt {margin-top: 2px;}

/* body[od-pageheader-position="off"] #od-pageheader,
body[od-pageheader-position="off"] #od-pageheader-alt,
body[od-pageheader-position="banner"] #od-pageheader-alt,
body[od-pageheader-position="content"] #od-pageheader {display: none;} */



/*not sure what this was for, but messed up http://overdrive.refractiv.net/home/
.CMSgoogledocembed {float: left;}*/

/*make title class roughly bigger than h1, as in gdocs*/
.CMSgoogledocembed .title {
	/*display:none;*/
	font-weight: 500;
  	line-height: 1.1;
  	font-size: 40px;
  }

.CMSgoogledocembed p {font-family:inherit;}


/*-------------------------------------------------
dialogs
-------------------------------------------------*/

.no-close .ui-dialog-titlebar-close {
  display: none;
}


/*frmPageOptions*/
span.cms-checkboxgroup-spn {
	float: left;
	margin-right: 20px;
	margin-bottom: 5px;
}

span.cms-checkboxgroup-spn label {
	margin-left:3px; 
	display: inline-block;
}

#frmPageOptions legend {font-size: 14px; margin-bottom: 5px; line-height: inherit;}


/*settings dialogs - override jquery ui's gray to make set values look different from placeholders*/
.controls input, .controls textarea {color: #000000 !important;}


.btnDialogLeft {float:left; /*display: none;*/}
.ui-dialog-buttonset {width: 100%; text-align: right;}

.ui-dialog .btn {min-width: 60px;}

.form-vertical textarea {
	width:100%;
	box-sizing:border-box;
}

/*where we link a label e.g. Google Analytics make it obvious*/
.ui-widget-content .control-label a {color:#0088cc;}


.alert-neutral, .alert-neutral .alert-heading {
	color: #444;
}
.alert-neutral {
	background-color: #eee;
	border-color: #ddd;
}

.alert a:not(.btn), .alert a:not(.btn) i {text-decoration: underline;}

/*site settings > theme - maximise vertical space*/
.alert:empty[data-tag] {display: none;}


textarea#dialog-textarea-value {
	height:90px; 
	width:100%; 
	box-sizing:border-box; 
	font-family:courier;
	resize:none;
}


/*checkbox groups - neater with right not left margin (calendar)*/
label.checkbox-inline.od-fc-checkbox,
/* v4-sp-535 "Link" jumps when "Lightbox" is hovered over */
label.radio-inline.od-fc-checkbox {
	margin-left: 0; 
	margin-right: 15px;
	min-height: 27px;
}



/* chrome doesn't use pointer, but material does... */
label.checkbox-inline > input[type="checkbox"],
label.radio-inline > input[type="radio"],
.checkbox > label > input[type="checkbox"],
.radio label > input[type="checkbox"] {cursor: pointer;}

.od-fc-checkbox-stacked {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.od-fc-checkbox input[type="checkbox"], .od-fc-checkbox input[type="radio"] {
	/* margin-left: -15px; */
	/*width:20px !important; 
	height:20px !important; 
	-webkit-box-shadow:none;
	margin-right: 5px;
	font-weight: normal;*/
}

textarea#txaHelpText {
	resize: vertical;
	height: 50px;
	font-family: courier;
	padding: 4px;
}

textarea#txaContent {
	resize:none;
	height: 140px;
	font-family: courier;
}


button.multiselect {white-space: normal;}
ul.multiselect-container .od-tight {font-size: 10px;}
ul.multiselect-container .od-tight label.checkbox {padding-top:0; min-height: inherit;}
ul.multiselect-container .od-tight input {margin:0;}

.od-multiselect-wide {width: 100%;}
.od-multiselect-wide > button {width: 100%;text-align: left;/* min-height: 34px; */}
.od-multiselect-wide > button > b {position: absolute; top: 14px; right: 8px;}
.od-multiselect-wide > button > b.fa {top: 8px;}


.od-multiselect-wide .multiselect-selected-text {
    margin-right: 11px;
}

.od-multiselect-wide ul.multiselect-container {max-width: 300px;}

/*vertical alignment tweak*/
.multiselect-container > li label.checkbox input[type="checkbox"] {float: left; margin-top: 4px;}
.multiselect-container li label i {line-height: 0; font-size: inherit;}


/*make sure MS not obscured by tooltip*/
.open > ul.multiselect-container {
    z-index: 1071;
}

button.multiselect > .caret {margin-left: 4px;}


/*hide unselected radios to keep it clean*/
.multiselect-container li:not(.active) input[type="radio"] {visibility: hidden;}

/*normally handled by bootstrap*/
.multiselect-native-select.has-error > .btn-group > button {
	border: solid 1px #a94442;
}

ul.multiselect-container.dropdown-menu {
	box-sizing: content-box;
	border-radius: 0;
}


/* v4-sp-405 folder locations multiselect has BS bug 'cos inside form-horizontal */
.form-horizontal ul.multiselect-container > li > a > label {
	min-height: 26px !important;
 	padding-top: 3px !important; 
 	padding-bottom: 3px !important; 
}

/* same as above - this is for line 2587 */
.form-horizontal ul.multiselect-container > li.active > a,
.form-horizontal ul.multiselect-container > li.active {
 	margin-bottom: 0 !important;
}

/* while we're here stop long folder names from overflowing... */
.form-horizontal ul.multiselect-container {
	width: 100%;
}

.form-horizontal ul.multiselect-container > li > a > label > span {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	display: block;
}

/*--------------------------------------------------------------
	OV-1821 folder navigator - horizontal layout
--------------------------------------------------------------*/
.od-ms-horizontal .od-ms-group {
    display: table-cell;
	width: 155px;
}

.od-ms-horizontal.open .od-ms-group li > a > label {
    margin: 0;
    cursor: pointer;

	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
    
    padding: 3px 0px 3px 10px;
}


.od-ms-horizontal.open li.multiselect-all label {
	padding-left: 30px;
}

.od-ms-horizontal.open .od-ms-group li:not(.multiselect-group) > a > label {
    padding-left: 40px;
}

.od-ms-horizontal.open ul.multiselect-container {
   display: flex;
   flex-wrap: wrap;
   max-width: 500px;
}


/*less space in options*/
#od-embed-options .od-ms-group {width: 120px;}
#od-embed-options .od-ms-horizontal ul.multiselect-container {max-width: 100%;}

/*--------------------------------------------------------------*/


/*pickers input[type=text] are readonly, but we don't want them to look disabled*/
.pickername[readonly]:not([disabled]) {
	cursor: pointer !important;
	background-color: #ffffff !important;
}



input[type="text"].pickerdata {
	width: 700px;
	font-size: 10px;
	font-family: monospace;
}

/*#calendar-list label {
	margin-left: 20px;
	margin-right: 10px;
	text-indent: 5px;
	font-weight: normal;
	font-size: 90%;
	padding-top: 4px;
}*/

input[type="color"] {
	border:none; 
	width:50px; 
	/*height:27px; */
	/* increased for forms-od TS */
	height:34px; 
	padding:0; 
	background:none; 
	box-shadow: none;
	float: left; 
	margin-right:10px;
}


.od-formsectionwithlabel {white-space: nowrap; margin-bottom: 10px;}
.od-formsectionwithlabel label {font-weight: normal; width: 33%;}
.od-formsectionwithlabel .form-control {
	width:66%;
	display: inline-block;
}

/*rt#42785 - site settings has cropped options with some themes*/
.od-formsectionwithlabel select.form-control {
	padding-left: 8px!important;
	padding-right: 0px!important;
}


.od-formsection-label-over > label {
  margin-bottom: 0; 
  margin-top: 5px; 
  font-weight: normal;
  white-space: nowrap;
  font-size: 80%;
}



#tab-settings-site-reset div {margin-bottom: 5px;}
#tab-settings-site-reset a {min-width: 125px; margin-right: 5px;}


/*tried in vain to get layout label "Search Button" to not wrap
body:not([od-bs-width="xs"]) #tab-settings-site-layout {margin-left: -15px;}
body:not([od-bs-width="xs"]) #tab-settings-site-theme {margin-left: -15px;}*/



/*.od-drive-tree {clear: both;}*/

/*.od-drive-tree .fancytree-container {
  height: 200px;
  overflow-y: scroll;
  position: relative;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.075);
}


div.od-dt-overflow {
	margin-top: 6px;
	margin-bottom: 6px;
	overflow-x: hidden;
	overflow-y: auto;
	padding-right: 2px;
}


/*div.od-dt-overflow::-webkit-scrollbar {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
	border: solid 1px #f00;
}*/

/*div.od-dt-overflow > table.dataTable {
    margin-top: 0px !important;
}*/

/*#od-modal-file-details .od-drive-tree .fancytree-container {
  height: 360px;
}*/

/*compensate for using fa rather than glyphicons*/
/*.treeview .icon {font-size: large; min-width: 17px; top: 2px; position: relative;}*/

/*remove borders*/
.treeview .list-group {box-shadow: none;}
.treeview .list-group-item {border: none; padding: 3px 15px;}

/*change fa-square to fa-check when tree node selected*/
/*.node-selected .icon:before {content: "\f14a"}*/
/*change fa-square-o to fa-check-o when tree node selected*/
/*.treeview .node-selected .icon:before {content: "\f046"}*/



.od-node-read:before {font:normal normal normal 17px/1 FontAwesome; content:"\f06e"; width:24px; display: inline-block;}
.od-node-write:before {font:normal normal normal 17px/1 FontAwesome; content:"\f040"; width:24px; display: inline-block;}


/*i don't like italics*/
.ui-fancytree .fancytree-title {font-style: normal;}

/*remove some ft arbitrary styling*/
.ui-fancytree.fancytree-container {
	border: none;
	outline: none;
	font-family: inherit;
}



/*.od-modal-dialog-prompt-clone .fancytree-container {
	max-height: 400px; 
	overflow-y: scroll;
}
*/

/*.fancytree-expander  ,*/
.fancytree-checkbox {
	font-size: 1.2em;
}


.fancytree-selected:focus {outline: unset;}
.fancytree-selected > .fancytree-title {font-weight: bold;}

/*v4-sp-302 locations "self" bug*/
.fancytree-unselectable > .fancytree-expander {
	cursor: not-allowed;
	color: #ccc;
}



/* pickSitePage - allow to see original value */
.fancytree-od-originalvalue > .fancytree-node  > .fancytree-title {
	border: dotted 1px #999 !important;
}


/*jstree bootstrap theme uses titllium which we don't want http://www.orangehilldev.com/jstree-bootstrap-theme/demo/ */
.jstree-proton {font-family: inherit !important;}





#modals textarea {resize:none;}

#modals textarea#textarea-markup, #modals-pre textarea#textarea-markup {min-height: 100px;}

.resize-v, #modals textarea.resize-v, #modals-pre textarea.resize-v {resize: vertical;}
.overflow-v {overflow-x: hidden; overflow-y: auto;}

/*#site-settings .modal-dialog {width:800px;}*/

/*#modals .nav-tabs {margin-bottom: 15px;}*/


.modal-prompt {
	/*white-space: pre-line;*/
	margin-bottom: 10px;
}


#od-modal-dialog-prompt i.modal-icon {
	float: left;
	margin-top: -5px;
	margin-left: 2px;
	margin-right: 20px;
	font-size: 2em;
}

/* stop prompt from wrapping under icon */
#od-modal-dialog-prompt.has-icon .modal-body {
	display: flex;
}


/*stop the icon's float from overlapping the footer*/
.od-modal-dialog-prompt-clone .modal-footer,
#od-modal-dialog-prompt .modal-footer {
	clear: both;

	display: flex;
}

.od-modal-dialog-prompt-clone .od-modal-dialog-prompt-morebuttons,
#od-modal-dialog-prompt .od-modal-dialog-prompt-morebuttons {
	flex-grow: 1;
	padding: 0 5px;
	text-align: center;
}


/*form#dialog-list-form {*/
#od-treeview-pagepicker {
	overflow-y: auto;
	height: calc(100vh - 350px);
	border: 1px solid #eee;
	padding: 10px;
}

#od-modal-dialog-prompt #dialog-list-form-inner {
	max-height: 306px; /*avoid cropping last item*/
	overflow-y: auto;
	margin-bottom: 0;
	/*display: none;*/
	border-bottom: 1px solid #ddd;
}

/*.modal-body[data-odmode="list"] form#dialog-list-form {display: block !important;}*/

#od-dlgs-paste-other {
	margin-top: 20px;
	line-height: 2;
	font-weight: normal; 
}

.dialog-list-item-image-before > img {
	margin-top: -10px;
	margin-bottom: -10px;
	height: 25px;
	width: 50px;
	object-fit: cover;
}

#od-modal-dialog-prompt .modal-prompt:empty {display: none;}

#od-modal-dialog-prompt .list-group-item_ {
	border-radius: 0;
	/*position: relative;*/
    display: block;
    padding: 6px;
    margin-bottom: 0px;
    /*background-color: #eee;*/
    border: 1px solid #ddd;
    border-bottom: none;
    display: flex;
    align-items: center;
}

#od-modal-dialog-prompt .list-group-item_ input {
	margin: 0 6px 0 0;
	height: 18px;
	width: 20px;
}

#od-modal-dialog-prompt .list-group-item_ > input,
#od-modal-dialog-prompt .list-group-item_ > span.fa {
	flex-shrink: 0;
}


/*center screen*/
.modal.od-modal-centered{
    display: inline-flex;
    align-items: center;
}



.od-picker-mimetype{
	background-color: transparent;  
	background-repeat: no-repeat;
	width: 32px;
}


#od-modal-new-file h4.modal-title {
	background-repeat: no-repeat;
	padding-left: 32px;
	background-position: -5px -5px;
}


/*ODv32-sp-66 TD dialog on dev not closing issue on Android phone*/
/* commented out on v4 */
/*.modal-header button.close span:first-child,
.od-dragable-header-row button.close span:first-child {
	margin-right: 4px;
	display: inline-block;
}*/



.modal .ui-draggable-handle {cursor: move;}


.type-new-document{background-image: url(/images/google/apps/docs-32.png);}
.type-new-spreadsheet{background-image: url(/images/google/apps/spreadsheets-32.png);}
.type-new-presentation{background-image: url(/images/google/apps/presentations-32.png);}
.type-new-drawing{background-image: url(/images/google/apps/drawings-32.png);}
.type-new-folder{background-image: url(/images/icons/folder.png?width=32);}


/*used for new breadcrumb bar create menu*/
[data-imgicon]:before {position: relative; top: 2px; margin-right: 5px;}
[data-imgicon="gapps-folder-16"]:before {content: url('/images/google/gstatic/docs/doclist/images/icon_11_collection_list.png');}
[data-imgicon="gapps-drawings-16"]:before {content: url('/images/google/apps/drawings-16.png');}
[data-imgicon="gapps-forms-16"]:before {content: url('/images/google/apps/forms-16.png');}
[data-imgicon="gapps-sheets-16"]:before {content: url('/images/google/apps/spreadsheets-16.png');}
[data-imgicon="gapps-docs-16"]:before {content: url('/images/google/apps/docs-16.png');}
[data-imgicon="gapps-slides-16"]:before {content: url('/images/google/apps/presentations-16.png');}



/*i'm sure 'ive tweaked a menu icon font somewhere else - relocate this when you find it*/
ul.dropdown-menu:not(.multiselect-container) i {font-size: 1.2em;}

/*create - make icons line up*/
ul.dropdown-menu > li > a > i {min-width: 22px;}



/*--------------------------------------------------------------*/
/*validation - see dialogs.js*/
.has-error[od-error-msg]:not([od-error-msg=""]):after {
	position: absolute;
	right: 0px;
	top: -15px;
	text-align: right;
	/*width: 100%;*/
	font-size: 0.75em;
	color: #a94442;
	z-index: 2;
	background-color: #fff;

	content: attr(od-error-msg);
}

.form-group > .has-error:after {
	margin-right: 15px;
}

/* fix alignment in PB options */
.has-error[od-error-msg]:not([od-error-msg=""]) {
	position: relative;
}




/* for forums tile 21-03 */
.od-error-inside.has-error:after,
.note-editor .has-error[od-error-msg]:not([od-error-msg=""]):after {
    top: 5px !important;
    right: 5px !important;
    background-color: transparent;
}

.note-editable.has-error {border: solid 1px #a94442 !important;}

/*make sure still visible when error is showing*/
.note-placeholder {z-index: 1;}





/*.input-group.has-error[od-error-msg]:not([od-error-msg=""]):after {
	margin-top: 2px; 
	z-index: 3; 
	border: solid 1px; 
	padding: 0px 4px;
	margin-right: 0px;
}*/

/*.has-error-required:after {content: "a value is required" !important;}
.has-error-invalid-url:after {content: "not a valid URL" !important;}
.has-error-invalid-email:after {content: "not a valid email address" !important;}*/


/*--------------------------------------------------------------*/
/*new od*/


/*disabled cos didn't look right with floating navbar
.navbar>.container .navbar-brand {margin-left: 0px;}*/



.page-header {border-bottom: none;}


/*36,30,24,18,14,12
http://getbootstrap.com/css/#type
*/
/*h1 {font-size: 30px;}
h2 {font-size: 24px;}
h3 {font-size: 18px;}
h4 {font-size: 14px;}
h5 {font-size: 12px;}
h6 {font-size: 10px;}*/


/*make breadcrumb look more like subnav header*/
/*.od-breadcrumb-container{margin-bottom:20px;}*/
.breadcrumb {padding: 10px 15px; margin-bottom: 5px;}

/* body:not(.od-theme-slate) .breadcrumb {border: solid 1px #ddd;} */

.attach-crumbtrail button, .attach-crumbtrail a.btn {
	/* background-color: #f5f5f5; */
	/* color: #666; */
	min-width: 25px;
    box-sizing: content-box;
    font-size: 1.1em;
}

/*prevent individual li overflow with long folder/file names*/

#od-breadcrumb > li > a{
	line-height: 1.2;
	margin-bottom: -2px;
	overflow: hidden;
	display: inline-block; 
/*}
was limiting this to all except rightmost li, but can't because of issue below re dropmenu
#od-breadcrumb > li:not(:last-child) > a {*/
	max-width: 200px; 
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*this allows the overall breadcrumb to not wrap*/
/*however it stops tools dropmenu from working 
.od-breadcrumb-container {
	overflow: hidden;
 	white-space: nowrap;
}*/





/*#pageid-1 .breadcrumb {display: none;}*/


#footer {
	border-top: solid 1px #ddd;
	margin-top:5px;
	/*padding-top:5px;*/

	/*not sure what this was for
	display: flex;
    flex-direction: column;*/
}

/*stop footer collapsing inwards at xs*/
body[od-bs-width="xs"] #footer > .container {margin:0;}


#footer-inner {
	display: flex;
    flex-wrap: nowrap;
}

.credit.poweredby {
	white-space: nowrap;
	/*align-self: flex-end;*/
	margin-left: auto;
}

.credit.copyright {
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 5px;
}


body[od-footer-valign="top"] 	#footer {justify-content: flex-start;}
body[od-footer-valign="middle"] #footer {justify-content: center;}
body[od-footer-valign="bottom"] #footer {justify-content: flex-end;}

#footer p {color: #999;} /*was .text-muted*/


body[od-footer-position="off"] #footer {display: none;}
body:not([od-footer-position="floating"]) footer {
	position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999; /*more than most, but less than modals*/
	background: #fff; /*has to be something solid else stuff shows through*/
}

#footer {
	height: 30px;
	display: flex;
	align-items: center;
}

body[od-footer-height="medium"] #footer {height: 75px;}
body[od-footer-height="tall"] #footer {height: 100px;}



.footer-version-button {
	margin-left: 10px;
	opacity: .3;
}

#footer:hover .footer-version-button {opacity: 1;}

#main > .content {
	/*margin-top: 20px;
	margin-bottom: 35px;*/
	/* padding-top: 20px; */
	/* V4-SP-883 Page spacing at the top */
	padding-top: 15px;
	padding-bottom: 35px;
}




#od-brand {
	/*background: url(/images/logos/overdrive_h100.png) no-repeat left center;
	width: 150px;
	background-size: 110px;*/
	/*margin-right: 15px;*/

	padding: 0;
	margin-left: 0;

	/*quick stop clatter - only effective with small logos?*/
	/*min-width: 60px;*/

	height: inherit;
	display: flex;
	align-items: center;
}


#od-brand #logo-header-box{
	/*height: 35px;*/
	overflow: hidden;
	margin-right: 15px;
}

#od-brand img {
	/*height: 35px;*/

	/*better on xs?*/
	height: auto;
	/*max-height: 35px;*/

	/*margin-right: 15px;*/

	float: left;  /*for sitebadge in firefox*/
}


#od-brand img {max-height: 35px; max-width: 30vw;}
/*this was experimental for v3, and prob not needed now we have cropper?*/
/*body[od-topnav-height="medium"] #od-brand img {max-height: 60px;}
body[od-topnav-height="tall"] #od-brand img {max-height: 85px;}*/


#od-brand img:not([src]) {
	display: none;
}


#od-brand #your-logo-here {
	/*padding: 6px 15px; */
	/*height: 34px;*/
	/*margin-left: -15px;*/
	margin-right: 10px;
	/*min-width: 100px;*/
	/*font-size: 70%;*/
    vertical-align: middle;
    display: table-cell;
    padding: 0px 10px;
    white-space: nowrap;

	/*border-radius:0px;*/
	padding: 15px 0;
	font-size: 14px;
	color: #2a2f43;
	background-color: #fff;
	
	max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis
}


a#od-brand[data-length="0"] #logo-header-box {display: none;}
/*OV-1945 Logo > Site Text option*/
a#od-brand:not([data-length="0"]) #your-logo-here {display: none;}
body[od-sitetext-text]:not([od-sitetext-text=""]) a#od-brand #your-logo-here {
	line-height: 1.3em !important;
	max-height: calc(3.6em);
	padding-top: 0;
	padding-bottom: 0;
	white-space: inherit;
	display: block;
}
body[od-sitetext-text]:not([od-sitetext-text=""]) #your-logo-here.multiline:before {
   content: "....";
   position: absolute;
   bottom: 0px;
   right: 0px;
}
body[od-sitetext-text]:not([od-sitetext-text=""]) a#od-brand #your-logo-here .fa-image{display: none;}

/*.navbar-brand #your-logo-here:after {
	content: 'Click to change...';
	font-size: 60%;
}*/



/*--------------------------------------------------------------*/
/*site badge													*/
/*--------------------------------------------------------------*/

/*vertical align*/
body[od-sitebadge]:not([od-logo-position="off"]):not([od-sitebadge=""]) #od-brand {
	display: inline-flex;
	align-items: center;
  	justify-content: center;
}


body[od-logo-position="off"] #od-brand {display: none;}
body[od-logo-position="topbar-right"] #od-brand {float: right;}


#od-sitebadge {display: none;}

body[od-sitebadge]:not([od-sitebadge=""]) #od-sitebadge {
	display: flex;
	/*background-color: white;*/
	/*font-size: 1.0em;*/ /*1.8em for stacked?*/
	font-size: 1.8em; /*help http://local.site12003/ */
	/*border-radius: 100px;*/
	/*padding: 6px;*/
	margin-right: 5px;
	/*margin-top: -2px;*/
	/*border: dotted 2px #ccc;*/
	/*float: left;*/
	/*text-align: center;*/
	/*min-width: 40px;*/
	align-items: center;
}

#od-sitebadge[data-stack]:not([data-stack=""]) {
	font-size: 1.2em !important;
}


/*OV-1021 Help Site Badge on Mobile*/
/*@media(max-width:400px){
	
	body[od-sitebadge]:not([od-sitebadge=""]) #od-brand {
	  max-width: 200px;
	  width: 100%;
	  position:absolute;
	}

	#od-sitebadge {
	  margin-right: 6px;
	  min-width: 34px;
	  font-size: 1.0em;
	}

	body[od-sitebadge]:not([od-sitebadge=""]) #od-brand img {
	  max-width: 70%;
	  min-width: 100px;
	}
}*/



#od-pagebadge {
    margin-right: 10px;
    float: left;
    /*margin-top: -3px;*/
}

#od-pagebadge.stacked{
    /*margin-top: 1px;*/
    font-size: 20px;
}



/*.od-container > .navbar {padding-top: 25px;}
.navbar-header {margin-bottom: 20px;}*/


/*--------------------------------------------------------------*/
/*for showLoading												*/
/*--------------------------------------------------------------*/
#myLoader {
	top: 50%; 
	left: 60%; /*60% is to compensate for subnav*/
	z-index:9999;
	/*background: url('/images/icons/loading.gif') no-repeat center center;
	min-width: 40px;
	min-height: 40px;*/

	/*line up with datatables processing*/
	/*margin-top: 10px;*/
	
	display: flex;
}

body[od-subnav-visible="0"] #myLoader {left: 50%;}

#myLoader i {font-size: 40px !important;}

#myLoader[mode="backdrop"]{
    background-color: rgba(0,0,0,.3);
	
	position: fixed;
    z-index: 999999;
    
    top: 0 !important;
    left: 0 !important;
	
    height: 100%;
    width: 100%;

    align-items: center;
    justify-content: center;
}

#myLoader[mode="backdrop"] i {color: black;}


/*--------------------------------------------------------------*/
/*general purpose loading spinner for inside initialising divs	*/
/*--------------------------------------------------------------*/
.show-loading > * {display: none;}

.show-loading:before {
	animation: fa-spin 2s infinite linear;
	content: "\f021";
	/*font:normal normal normal 3em FontAwesome;*/
	font:normal normal 900 3em "Font Awesome 5 Free";

	display: inline-block;
	/*position: relative;*/
    left: calc(50% - 25px);
	/* top: 50%; */

	/*for photos albums picker refresh*/
	position: absolute;
	z-index: 1;

	/*v4.1 tone it down (rhb notify)*/
	opacity: 0.5;
}

/* some of these should apply to all uses, not just tabs.... */
.tab-pane.show-loading:before{
    color: #999;
    position: sticky;
	margin: 20px 0;
}


/* used for e.g. during resync ...*/
body[show-working="1"],
body[show-working="1"] input,
body[show-working="1"] .pickername
	{cursor: wait !important;}

body[show-working="1"] #user-menu-button i {
	/*color: orange !important;*/
	-webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}
/* color not overriding td's... */
body[show-working="1"] #user-menu-button i:before {color: orange !important;}

.button-busy i {
	color: orange !important;
	-webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}



/*--------------------------------------------------------------*/



.od-comments > div > iframe {
	margin-top: 10px;
	padding-top: 10px;
	border-top: solid 1px #eee;
}



.od-table-noborders td {border : none !important;}

/*keep h2 v aligned with image to the left 
	http://overdrive.refractiv.net/examples/project-workspaces/
*/
.od-table td h2:first-child {margin-top: 0;}
.panel h2:first-child {margin-top: 0;}


/*soften icons used in panel titles e.g. comments wall*/
.panel-title > i.fa {color: #666;}





select.autogrow:not([size="1"]){
	overflow-y: hidden;
}

select.autogrow:not([size="1"]) option:empty{
	display: none;
}

/*OV-82*/
body[od-theme="paper"] .navbar-nav>li>.dropdown-menu {
margin-top: 0px;
}

.page-header.hasbg {/* min-height: 50px; */}
.page-header.hasbg .header-image {
	float: right;
    max-height: 35px;
    text-align: right;
    display: inline;
    max-width: min-content;
	padding-left: 5px;
}


/*https://github.com/thomaspark/bootswatch/issues/429*/
/*.modal-backdrop {z-index: auto !important;}*/


.modal-debug{
	float: left;
    font-family: monospace;
    width: 600px;
    font-size: 11px;
}


/*todo - move to plugin.css*/




.btn-wide {min-width: 80px;}


/*simple grey button*/
.btn-grey {
	background-color: #eee;
	border-color: #ddd;
    color: #333;
}

.btn-grey:hover {background-color: #ccc;}


.ss-q-help, .ss-secondary-text {font-weight: normal;}
.od-contenttype-form li label {font-weight: normal;}
.od-contenttype-form li {list-style-type: none;}
.ss-form-entry {margin-top:10px; margin-bottom: 20px;}
.ss-password-warning, .required-message {display: none;}
.ss-secondary-text {color: #999;}
ul.ss-choices {margin-top: 5px;}



/*picker's LH add-on - show drive icon before anything picked*/
/*.od-picker-mimetype {
	background-image: url(/images/google/apps/drive-32.png);
}

*[data-odpickerpicked_mimetypeshort="google-apps.document"] .input-group-addon.od-picker-mimetype {
	background-image: url(/images/google/apps/docs-32.png);
}

*[data-odpickerpicked_mimetypeshort="google-apps.spreadsheet"] .input-group-addon.od-picker-mimetype {
	background-image: url(/images/google/apps/spreadsheets-32.png);
}*/



/*------------------------------------------*/

body.od-loading #od-sitepickers {visibility: hidden;}

.od-site-pickers {margin: 0px 15px; white-space: nowrap; min-width: 90px;}
.od-site-pickers select {padding: 2px 4px;}


/*multiselect*/
.od-site-pickers .od-multiselect-wide {width: 200px;}

.navbar .od-site-pickers > label {display: none;}
.navbar .od-multiselect-wide {float:left; width: inherit; padding-top: 10px;}

/*remove rounded corners when used in input group*/
.input-group > .btn-group.od-multiselect-wide > button {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/*OV-1457 allows tooltips to be triggered on disabled elements*/
[od-hastooltip="1"] [disabled] {pointer-events: none;} 

/*------------------------------------------*/
/*helper classes*/
.line-through {text-decoration: line-through;}
.od-lowercase {text-transform: lowercase;}
.od-uppercase {text-transform: uppercase;}

.od-propercase, 
.od-propercase select:not(.od-notransform), 
.od-propercase button:not(.od-notransform) {text-transform: capitalize;}
/*but don't let it propagate to options*/
/*.od-propercase select option {text-transform: initial;}*/

.od-align-self-start {align-self: start;}

.od-text-vertical {writing-mode: vertical-rl;}

.od-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.od-flex-center-v {
	display: flex;
	align-items: center;
}

.od-flex-top {
	display: flex;
	align-items: flex-start;
}

.od-flex-center-v-inline {
    display: inline-flex;
    align-items: center;
}

.od-flex-start {
	display: flex !important;
	align-items: flex-start;
}

.od-flex-end {
	display: flex !important;
	align-items: flex-end;
	justify-content: flex-end;
}

.od-flex-column {
	display: flex !important;
	flex-direction: column;
}

.od-ellipsis {
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

span.panel-title-text {
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
    text-overflow: unset !important;
}

.od-nowrap {white-space: nowrap !important;}
.od-pre-wrap {white-space: pre-wrap;}
.od-pre-line {white-space: pre-line;}

.hide-empty:empty {display: none;}
.p15 {padding: 15px !important;}
.pl0 {padding-left: 0px !important;}
.pl5 {padding-left: 5px !important;}
.pr0 {padding-right: 0px !important;}
.pr10 {padding-right: 10px !important;}
.pr15 {padding-right: 15px !important;}
.pt0 {padding-top: 0px !important;}
.pt5 {padding-top: 5px !important;}
.pt10 {padding-top: 10px !important;}
.pt20 {padding-top: 20px !important;}
.pt30 {padding-top: 30px !important;}
.pb0 {padding-bottom: 0px !important;}
.ml5 {margin-left: 5px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml30 {margin-left: 30px !important;}
.ml-5 {margin-left: -5px !important;}
.ml-10 {margin-left: -10px !important;}
.ml-15 {margin-left: -15px !important;}
.mt-5 {margin-top: -5px !important;}
.mt-10 {margin-top: -10px !important;}
.mt-20 {margin-top: -20px !important;}
.mt5 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mr5 {margin-right: 5px !important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px !important;}
.mr10 {margin-right: 10px !important;}
.mt0 {margin-top: 0px !important;}
.mb0 {margin-bottom: 0px !important;}
.mb5 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb-5 {margin-bottom: -5px !important;}
.mb-10 {margin-bottom: -10px !important;}

/* intended for sp-838 but not used. could be useful one day... */
@media (max-width: 767px){
	.ml10-xs {margin-left: 10px !important;}
}


.width1pc {width: 1% !important;}
.width100pc {width: 100% !important;}

.w25 {width: 25px !important;}
.w50 {width: 50px !important;}
.w75 {width: 75px !important;}
.w100 {width: 100px !important;}
.w150 {width: 150px !important;}
.w175 {width: 175px !important;}
.w200 {width: 200px !important;}
.w300 {width: 300px !important;}


.height50 {height: 50px !important;}

.display-block {display: block;}

.font-bold {font-weight: bold;}
.no-bold, .notbold {font-weight: normal !important;}

.no-border {border: none !important;}
.no-border-radius {border-radius: 0 !important;}

.font-size-0 {font-size: 0;}


.od-placeholder-normal [placeholder]::placeholder {color: unset;}

.od-translucent {opacity: 0;}
.od-position-absolute {position: absolute;}
.od-valign-middle,
tr.od-valign-middle > * {vertical-align: middle !important;}
.od-pointer-events-none {pointer-events: none !important;}

/*------------------------------------------*/

.od-pagehelper {
    margin: 50px 0;
    text-align: center;
}

.od-pagehelper > div {
    padding: 15px 0;
    opacity: .6;
    background-color: #f8f8f8;
    border-radius: 5px;
    border: solid 1px #e7e7e7;
    cursor: pointer;
    white-space: nowrap;
}

.od-pagehelper span {
	border-radius: 5px;
    border: solid 1px #ccc;
    margin: 0 5px;
    padding: 5px 8px;
}


/*hide empty images for firefox/ie*/
img[src=""] {display: none;}


.od-menu-chk {display: none;}

.nav .dropdown-header {text-transform: uppercase;}


.od-always-open > .dropdown-menu {
    display: block;
}

.modal#data-view td {text-align: left !important; display: table-cell;}



/*rt#37334,33061 settings dialog - reduce tab wrapping*/
/*@media (max-width: 767px){

	.modal-lg .nav-tabs>li>a{
		padding: 6px 9px!important;
		margin-right:0px!important;
		font-size: 85%;
	}
	
	#od-modal-site-settings .form-horizontal > .form-group > .od-label.control-label{
		font-size: 85%;
		padding-right: 0;
	}

}*/


/*rt#33061 keep modal-lg large on smaller screens (default stops at 992)*/
@media (max-width: 992px){
	.modal-lg {
	    width: auto;
	    margin: 10px;
	}
}


/*body {
    background-image: url("e:\scraps\images\chicago.png");
    background-size: 100%;
    background-repeat: no-repeat;
}*/


/*scale banner down at xs ?*/
@media (max-width: 768px){
	/*.page-header h1 {font-size: 20px!important;}*/
	.page-header {background-size: auto 70%!important;}
}


/*.attach-crumbtrail{
	position: absolute;
}*/








/*
body.template-sbadmin nav.navbar {margin-bottom: 0;}
body.template-sbadmin a.navbar-brand {padding: 7px 15px;}



.subnav li:hover > ul,
	.subnav li:hover > ul.collapse{
	  display: block !important;
	  height: auto !important;
	  z-index: 1000;
	  background: #444;
    visibility: visible;
	}*/

/*this prob needs to apply just to floating nav*/
body[od-topnav-position="floating"] .od-banner {margin-top:20px;}


/*.od-banner {margin-bottom: 20px;}*/ /*padding-top: 10px;}
.od-banner h1 {margin:0 15px;}*/
#od-pageheader.page-header {margin:0;}


body[od-banner-position="off"] .od-banner {display: none;}

/*these are min-height to allow long titles to wrap*/
body[od-banner-height="short"] .od-banner {min-height: 60px;}
body[od-banner-height="medium"] .od-banner {min-height: 100px; /*padding-top: 30px;*/}
body[od-banner-height="tall"] .od-banner {min-height: 200px; /*padding-top: 80px;*/}
/*body[theme-bannersize="very-tall"] .od-banner {min-height: 250px; padding-top: 100px;}*/




/*body[od-topnav-halign="off"] #od-topnav {display: none;}*/
body[od-topnav-halign="right"] #od-topnav {float: right; margin-right: 20px;}

body[od-topnav-halign="off"] #od-nav-collapse,
body[od-topnav-halign="off"] #od-topnav {display: none;}


/*body[theme-topnav-height="medium"] #od-navbar {padding: 35px 0;}
body[theme-topnav-height="tall"] #od-navbar {padding-top: 120px;}*/



/*body[od-topnav-height="medium"][od-topnav-valign="top"] #od-navbar > * {margin-top: 0px; margin-bottom: 50px;}
body[od-topnav-height="medium"][od-topnav-valign="middle"] #od-navbar > * {margin-top: 25px; margin-bottom: 25px;}
body[od-topnav-height="medium"][od-topnav-valign="bottom"] #od-navbar > * {margin-top: 50px; margin-bottom: 0px;}

body[od-topnav-height="tall"][od-topnav-valign="top"] #od-navbar > * {margin-top: 0px; margin-bottom: 100px;}
body[od-topnav-height="tall"][od-topnav-valign="middle"] #od-navbar > * {margin-top: 50px; margin-bottom: 50px;}
body[od-topnav-height="tall"][od-topnav-valign="bottom"] #od-navbar > * {margin-top: 100px; margin-bottom: 0px;}*/

.od-nav-flex-v {
    display: flex;
    flex-direction: column;
    /*z-index: 1;*/ /*this causes od-usermenu to sit behind footer and folder pagination*/
}

body[od-topnav-valign="top"] .od-nav-flex-v {justify-content: flex-start;}
body[od-topnav-valign="middle"] .od-nav-flex-v {justify-content: center;}
body[od-topnav-valign="bottom"] .od-nav-flex-v {justify-content: flex-end;}


/*adjust body top padding to suit topnav position setting*/
/* body {padding-top: 20px;} */ /*floating*/
body[od-topnav-position="static"] {padding-top: 0px;}

/*allow banner to just touch static nav*/
body[od-topnav-position="static"] .navbar {margin-bottom: 0;}
/*nav equidistant between page top and banner*/
body[od-topnav-position="floating"] .navbar {margin-bottom: 0;}


/* body[od-topnav-position="fixed"] 							{padding-top: 50px;}
body[od-topnav-position="fixed"][od-topnav-height="medium"] {padding-top: 100px;}
body[od-topnav-position="fixed"][od-topnav-height="tall"] 	{padding-top: 150px;} */

/*body[od-banner-height="off"][od-topnav-position="fixed"] 							{padding-top: 70px;}
body[od-banner-height="off"][od-topnav-position="fixed"][od-topnav-height="medium"] {padding-top: 120px;}
body[od-banner-height="off"][od-topnav-position="fixed"][od-topnav-height="tall"] 	{padding-top: 170px;}*/


/*just for site settings interactivity, hide TOP nav levels according to setting*/
body[od-topnav-depth="0"] #od-topnav li[data-level="0"] > ul {display: none;}
body[od-topnav-depth="0"] #od-topnav li[data-level="0"] a:before {display: none;}
body[od-topnav-depth="1"] #od-topnav li[data-level="1"] > ul {display: none;}
body[od-topnav-depth="1"] #od-topnav li[data-level="1"] a:before {display: none;}
body[od-topnav-depth="2"] #od-topnav li[data-level="2"] > ul {display: none;}
body[od-topnav-depth="2"] #od-topnav li[data-level="2"] a:before {display: none;}
body[od-topnav-depth="3"] #od-topnav li[data-level="3"] > ul {display: none;}
body[od-topnav-depth="3"] #od-topnav li[data-level="3"] a:before {display: none;}


/*just for site settings interactivity, hide SUB nav levels according to setting*/
body[od-subnav-depth="0"] #od-subnav li[data-level="0"] > ul {display: none;}
body[od-subnav-depth="0"] #od-subnav li[data-level="0"] .caret-right {display: none;}
body[od-subnav-depth="1"] #od-subnav li[data-level="1"] > ul {display: none;}
body[od-subnav-depth="1"] #od-subnav li[data-level="1"] .caret-right {display: none;}
body[od-subnav-depth="2"] #od-subnav li[data-level="2"] > ul {display: none;}
body[od-subnav-depth="2"] #od-subnav li[data-level="2"] .caret-right {display: none;}
body[od-subnav-depth="3"] #od-subnav li[data-level="3"] > ul {display: none;}
body[od-subnav-depth="4"] #od-subnav li[data-level="3"] .caret-right {display: none;}



/*OV-970 Site layout : full width*/
body[od-page-width="full"] .container {width: 100%;}


/*OV-1006 - this approach would get too complex so sticking with js (subnavHeight)
body[od-footer-position="fixed"][od-topnav-height="short"] #od-subnav {height: calc(100vh - 240px);}*/

/*don't show home in subnav when on home itself, unless from root*/
body#pageid-1:not([od-subnav-options-toplevel="1"]) #od-subnav-menu #drop-node-1 {/* display: none; */}


/*not sure why this is needed, now that we've got containers supposedly correct*/
/*body[od-topnav-position="fixed"] #od-nav-container-inner {padding-left: 7px; padding-right: 23px;}*/

/*stop bootstrap modals from making page jump when rh scrollbars visible*/
/*body.modal-open {overflow: auto !important;}*/

 
/*vertical align*/
.od-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#od-pageheader.page-header h1 {margin:0;}

/*this needed to keep h1 on left, and search on right at xs*/
/*body[od-bs-width="xs"] .od-banner > .container {margin: initial;}*/
@media (max-width: 768px) {.od-banner > .container {margin: initial;}}

/*same as above - stop centering at sm/xs*/
/*body[od-bs-width="xs"] #od-nav-container-inner {margin: initial;}*/
@media (max-width: 768px) {#od-nav-container-inner {margin: initial; width: 100%;}}



/*this seems to stop floating navbar touching sides on mobile*/
/*body[od-navbar="floating"][od-bs-width="xs"] #od-navbar {margin: 0 15px;}*/

/*related to above*/
/*#od-navbar {padding: 0;}*/

/*this stops cog floating off the RH end of navbar*/
/*body[od-navbar="floating"] #od-navbar > div.container {width:auto;}*/


/*counter the removal of class navbar-nav from od-nav-account-body, which was let it expand outside of #od-navbar*/
#od-nav-account-body > ul {right:0; left:auto;}

/*hide any orphaned divider, e.g. when folder is readonly*/
#od-nav-account-body > ul > li.divider:first-child {display: none;}


.sidenav {margin-top: -20px;}


/*site settings > social > hdr/ftr*/
.input-group-addon > input[type="checkbox"] {width:17px; height: 17px;}

/*user settings > edit user*/
.has-odicon input {float: left; margin-right: 7px; position: relative; /* top: -1px;*/}

/*2/1/18 commented out - couldn't find any occurrences*/
/*label.radio-inline input[type="checkbox"] {
	width: 17px; 
	height: 17px;
    position: relative;
    top: 2px;
}*/


/*subnav docked left*/
body[od-layout-subnav-position="docked-left"] .col-secondary {
	border-right: 1px solid #e7e7e7;
	min-height: 500px;
	padding-right: 0;
}

body[od-layout-subnav-position="docked-left"] .col-primary {padding-right: 30px;}

body[od-layout-subnav-position="docked-left"] div.sidenav > ul:first-child > li {
	border-bottom: 1px solid #e7e7e7;
	padding: 8px;
}



body[od-page-show-breadcrumb="0"] #od-breadcrumb {display: none;}
/*commented out for OV-814*/
/*body[od-page-show-breadcrumb="0"] .od-breadcrumb-container {display: none;}*/

body[od-page-show-subnav="0"] #od-col-subnav {display: none;}

/* v4-sp-??? */
/*body[od-staticpage]:not([od-staticpage=""]) #od-col-subnav {display: none;}*/

body[od-page-show-h1="0"] #od-pagebadge,
body[od-page-show-h1="0"] #od-pageheader h1,
body[od-page-show-h1="0"] #od-pageheader-alt h1 {display: none;}


#tab-settings-site-developers textarea {font-family: monospace;}

/* v4-sp-926 hide cog from viewers */
a#user-menu-button {display: none;}
 
/*a#user-menu-button i {font-size: 2em; line-height: 20px !important;}*/
body[od-ur-ed="1"] a#user-menu-button {
    /*margin-top: 4px;*/
    /*display: inline-block;*/
    display: flex;
    /*padding:2px; */
    /*color: #777;*/
	/*margin-right: 1px;*/
    padding-right: 0px;
    margin-right: 0px;
    /* float: right; */
    /*text-align: right;*/
    /* margin-left: 10px; */
	/* v4-SP-1383 Logo should not be too big for mobile */
}

/*a#user-menu-button:hover {background-color: rgba(0,0,0,0.075)!important;}*/




#od-search-button i {font-size: 1.2em;}


/*#od-nav-collapse li {clear: left;}
#od-nav-collapse #od-topnav {float: none; margin-right: 0px;}*/


/*#navbar-collapse.in #od-topnav a {color: #777 !important;}

#navbar-collapse.collapsing #od-topnav {display: none;}
#navbar-collapse {border: none;}*/

/*#navbar-collapse.in #od-topnav {*/




.od-navbar-button {
    border: 1px solid transparent;
    border-radius: 4px;
    height: 34px;
    width: 34px;
    background-color: rgba(0,0,0,.1);
    text-align: center;
    padding: 6px 6px;
    cursor: pointer;

    /* v4-sp-416 social icons alignment */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .od-navbar-button:hover {background-color: rgba(0,0,0,0.075)!important;} */

.od-navbar-button i {
    /*color: #444444;*/
    font-size: 1.4em;
    background-color: transparent;
}


#user-signin-button {width: inherit;}

/*OV-1147 Hide top right Sign In on new OD sites*/
#od-usermenu #user-signin-button {display: none;}



.od-dt-controls .form-control {z-index: inherit;}


/*moved from login-required.html - hide all nav when logged out*/
body.pg-0:not([od-ss-pa="1"]) #od-searchform,
body.pg-0:not([od-ss-pa="1"]) .od-breadcrumb-container, 
body.pg-0:not([od-ss-pa="1"]) .cms-helptext, 
body.pg-0:not([od-ss-pa="1"]) .cms-content, 
body.pg-0:not([od-ss-pa="1"]) #od-nav-collapse, 
body.pg-0:not([od-ss-pa="1"]) #od-nav-collapse-body, 
body.pg-0:not([od-ss-pa="1"]) .col-subnav,
body.pg-0:not([od-ss-pa="1"]) #od-navbar button.navbar-toggle 
{display: none !important;}

/*body.pg-0 h1 {visibility: hidden;}*/





/* a#user-menu-button {width: 26px;} */
/* body[od-bs-width="xs"] #od-usermenu {padding-left: 7px;} */
/* v4-SP-1383 Logo should not be too big for mobile */


/*#od-usermenu > ul {margin-right: 0 !important;}*/



/*OV-1003 make Search Results page look different to normal folder pages*/
/*body[od-staticpage="search"] #od-breadcrumb,*/
/*body[od-staticpage="search"] #od-dt-table-tc,
body[od-staticpage="search"] #od-searchform:not(.open) input
	{display: none !important;}*/
/* above commented out on v4-sp-421 */

/*body[od-staticpage="search"] .dataTables_filter {margin-top: -40px;}*/


/*hide things on static pages*/
/*body:not([od-staticpage=""]):not([od-staticpage="pages"]) #od-menu-create-page, ?? sp-1176 */
body:not([od-staticpage=""]) #od-menu-openfolderindrive,
body:not([od-staticpage=""]) #od-mnu-settings-page,
body:not([od-staticpage=""]) #od-mnu-resync,
body:not([od-staticpage=""]) #od-plgn-create-tb-button_container,
body:not([od-staticpage=""]):not([od-staticpage="search"]) #od-page-toolbar,
body:not([od-staticpage=""]) #od-btn-pagedropmore-openindrive,
body:not([od-staticpage=""]) #od-btn-toolbar-star
	{display: none !important;}


/*------------------------------------------*/
/*live search form							*/
/*------------------------------------------*/

#od-searchform {display: none; position: relative;}
body[od-searchbox-position="topnav-right"] #od-searchform-navbar #od-searchform {
	display: table; /*this needed to keep inline when opened*/
	float: right;
}

/* body[od-searchbox-position="banner-right"] #od-pageheader #od-searchform {
	display: flex;
	display: table; 
	float: right;
	margin-top: 5px;
}*/


body[od-searchbox-position="header-right"] #od-header #od-searchform {
	/*display: flex;*/
	display: table; /*this needed to keep inline when opened*/
	float: right;
}

body[od-searchbox-position="header-left"] #od-header #od-searchform {
	/*display: flex;*/
	display: table; /*this needed to keep inline when opened*/
	float: left;
}

/*stop clatter before search box appears*/
/* body[od-searchbox-position^="header-"] #od-header {min-height: 44px;} */


#od-searchform input.form-control {width: 115px !important; display: none;}
#od-searchform.open input {display: inline-block; /*margin-left: -114px;*/}

body:not([od-searchbox-width="off"]) #od-searchform input {display: inline-block;}
body[od-searchbox-width="wide"] #od-searchform input {width: 250px !important;}


#od-searchform:not(.open) #od-searchform-results, 
#od-searchform-results[data-results="0"] 
	{display: none;}


body:not([od-searchbox-width="off"]) #od-searchform-results:not([data-results="0"]) {
	display: inline-block !important;
	width: 100%;
}


#od-searchform-results {
	right: 0;
	left: auto;
	padding: 10px 7px;
    line-height: 2;
    min-width: 200px;    
    max-width: 300px;    
}

#od-searchform-results a {
	display: block;
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}



#od-searchform-results-more {
	font-weight: bold;
    border-top: dotted 1px #ccc;
    text-align: right;
    margin-top: 5px;
    padding-top: 5px;
}



/*jumbo search - most often on home*/
body[od-search-jumbo="1"] #od-help-home-sitesearch .jumbotron{
	padding: 0;
	background-color: transparent;
}


#od-help-home-sitesearch #od-searchform-results:not(:empty) {
	right: inherit;
	width: 100%;
	display: block !important;
}

.search-jumbo-title:empty {display: none;}

body[od-search-jumbo="1"] #od-searchform,
body[od-search-jumbo="1"] #od-searchform-navbar {display: none !important;}


/*body[od-topnav-position="floating"] #od-navbar-header-group-3 {padding-right: 8px; width: 95px;}*/


/*#od-navbar-header-group-3 > * {float: right;}*/



/*#od-topnav {height: 50px; overflow: hidden; white-space: nowrap;}*/





/*when drag dialog to left or right edge of screen, make it slide off rather than squash up...*/
/*2.10 realised not worked for ages since .od-draggable moved down to .modal-dialog, so disabling
.modal.od-draggable {right: inherit;}
*/

/*scrollbar visible on edituser*/
/*2.10 realised not worked for ages since .od-draggable moved down to .modal-dialog, so disabling
.modal.od-draggable {overflow: hidden;}
*/

/*remove default 30px margin*/
.modal-dialog.od-draggable {
	margin: 0 auto;
	position: relative;
}

/*OV-1104 User Settings too tall/off screen*/
.modal-dialog.od-draggable .modal-body {
    /*max-height: calc(100vh - 150px);*/
    min-height: 300px;
    overflow-y: auto;
}

.modal.fullscreen {
	/* position: initial; */
	/* right: initial; */
	/* bottom: initial; */
	display: initial;
}


.modal.fullscreen .modal-body {max-height: unset !important;}


/*xs devices - modals go full screen*/
.fullscreen .modal-content{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* min-height: 100%; */
	z-index: 1099;
	/* border-radius: 0; */
	box-shadow: none;
	border: none;
}
/*ok to be same size as cancel, in english at least*/
.modal .modal-footer button.btn-primary {
	min-width: 65px;
}


/*V4-SP-441	Adjust space between save and cancel button*/
/*body[od-bs4-width="xs"] .modal-footer .btn+.btn {*/
body[od-bs4-width="xs"] .modal-footer .btn {
    margin-bottom: 5px;
}

body[od-bs4-width="xs"] .modal-footer {
    padding-bottom: 10px;
}



/*email login/change pass - make them easier to read*/
input.form-control[type="password"] {
	font-family: monospace !important;
}




/*--------------------------------------------------------------------------------
 TD on mobile - fix .modal-footer to the bottom of the screen
--------------------------------------------------------------------------------*/
/*body[od-bs-width="xs"]*/ #modals > .fullscreen .modal-content{
	display: flex;
	flex-direction: column;
	height: 100%;
}

/*body[od-bs-width="xs"]*/ #modals > .fullscreen .modal-footer {
	flex: 0 0 auto;
}
/*body[od-bs-width="xs"]*/ #modals > .fullscreen .modal-body {
	height: auto;
	flex: 1 1 auto;
	position: relative;
	overflow-y: auto;
}

/*make room for left tabs*/
/*body[od-bs-width="xs"] #od-modal-site-settings.fullscreen .modal-body{
	padding: 15px 0;
}


body[od-bs-width="xs"] #od-modal-site-settings.fullscreen .modal-body > .od-settings-navtabs-container,
body[od-bs-width="xs"] #od-modal-site-settings.fullscreen .modal-body > .od-settings-tabcontents-container
{
	padding-left: 0;
}*/


/*left tabs*/
.modal-body.modal-tabs-left {padding: 0; display: flex;}
.modal-body.modal-tabs-left .tab-content {padding: 15px 15px 15px 0;}

.nav-tabs.tabs-left {padding: 15px 0; height: 100%;}
.nav-tabs.tabs-left .tab-pane,
.nav-tabs.tabs-left .tab-content {height: 100%;}



/*------------------------------------------------*/
/*usman changes originally in theme/plugin.css	  */
/*------------------------------------------------*/

/* Transparent background for selcted/focused/hovered menu item  */
/*.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    color: #555;
    background-color: rgba(0,0,0,0.075)!important;
}*/

/* Transparent background for active table cell to use selected color  */
/*.table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active
{
	background-color:transparent!important;
}*/



/* Change all inputs placeholder color for all vendor prefixes  */
/*.od-container .form-control::-webkit-input-placeholder {color: #222!important;}*/ /* Chrome */
/*.od-container .form-control:-ms-input-placeholder {color: #222!important;}*/ /* IE 10+ */
/*.od-container .form-control::-moz-placeholder {color: #222!important; opacity: 1;}*/ /* Firefox 19+ */
/*.od-container .form-control:-moz-placeholder {color: #222!important; opacity: 1;}*/ /* Firefox 4 - 18 */
  
/*------------------------------------------------*/

.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: pointer;
    display: block;
}



/*bs disabled doesn't look obvious enough imho*/
label.disabled {color: #aaa; cursor: not-allowed !important;}





/*our language string tooltips have line breaks in them*/
.tooltip-inner {white-space: pre-line;}







/*#od-plugin-options-header {
	font-size: 130%;
	font-weight: bold;
    box-shadow: #666 2px 2px 8px;
    padding: 6px 10px;
    margin-bottom: 15px;
    color: #fff;
    background-color: #666;
}

#od-plugin-options-icon {
	float: right;
    height: 27px;
    width: 50px;
    margin: 4px 8px 0 0;
    
    background-position: center right;
    background-repeat: no-repeat;
    background-size: contain;
}


#od-plugin-options-icon span.od-page-icon{
    font-size: 1.8em;
    margin-top: -2px;
    margin-right: 2px;
    float: right;
    color: white;
}


#input-contenttype {border-radius: 0; margin-bottom: 10px;}*/


/*while on OV-1072 - Site Setting - more draggable area - decided to lock button to bottom of screen*/
/*#od-modal-site-settings.fullscreen .modal-footer {
	position: fixed;
    bottom: 0;
    width: 100%;
}*/


/*Apply default values for theme*/
.od-theme-inherit-borders-border-width, body:not(.od-theme-slate) .breadcrumb {
	border:0px;
}
.od-theme-inherit-borders-border-radius{
	border-radius:0px;
}
.od-theme-inherit-borders-background-color, .od-theme-inherit-borders-background-color.panel-default>.panel-heading {
	background-color: transparent;
}
/*Remove border top for top nav position fixed*/
body[od-topnav-position="fixed"] .od-container #od-navbar,
body[od-topnav-position="static"] .od-container #od-navbar{
	border-top:0px!important;
}
.od-container .col-subnav .panel > .panel-heading {
    border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}


/*OV-1136 new "Default" theme*/
/*body {visibility: hidden;}*/



/*OV-1156 breadcrumb buttons jump on hover*/
/*https://github.com/twbs/bootstrap/issues/5687*/
.btn-group > .tooltip + .btn,
.btn-group > .popover + .btn{
	margin-left:-1px;
}




.multiselect-group > a {display: flex !important;}
.multiselect-group label {flex-grow: 2;}

.multiselect-group span.caret-container {padding: 3px 15px 3px 15px; }

/*.multiselect-group:not(.active) b.caret {
	border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-right: 4px dashed;
}*/

.multiselect-collapsible-hidden {display: none;}

/*override bs active/focus/hover styling for navigator multiselect*/
.multiselect-container.dropdown-menu a {
	color: #262626 !important;
}

/* NB this also caters for li.fas */
.multiselect-container.dropdown-menu li.active a,
.multiselect-container.dropdown-menu li.active {
	background-color: #ddd !important;
}

/* put a divider between consecutive selected items */
/*.multiselect-container.dropdown-menu li.active {*/
/* 21-03 changed so inactives are same height as actives... */
.multiselect-container.dropdown-menu li {
	margin-top: 1px;
	/*margin-bottom: 1px;*/
}
/* avoid overflow (seen at see PS > Images > BB > Options) */
.multiselect-container.dropdown-menu li.active > a > label {
	padding-top: 2px;
	padding-bottom: 2px;
}



/*options can't contain <i> but can have font classes (folder options columns)*/
/*changes according to fontawesome 5 */
option.fa, ul.multiselect-container > li.fa
,option.fas, ul.multiselect-container > li.fas
,option.fab, ul.multiselect-container > li.fab
,option.far, ul.multiselect-container > li.far {
    top: inherit;
    font-family: inherit;
    display: block;
    position: relative;
    padding-left: 7px;
}

option.fa::before {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 20px;
    width: 30px;
}

ul.multiselect-container > li.fa:before {
    /* position: absolute; */
    /* top: 10px; */
    /* display: inline-block; */
    font-family: 'FontAwesome';
    width: 20px;
}

ul.multiselect-container > li.fas:before, ul.multiselect-container > li.far:before {
    font-family: 'Font Awesome 5 Free';
}

/*"none" option*/
ul.multiselect-container > li[class="fa"]:before {
	content: '';
}

ul.multiselect-container > li.fa.active {
	background-color: #ddd;
} 

ul.multiselect-container > li.fa, 
ul.multiselect-container > li.fas,
ul.multiselect-container > li.fab,
ul.multiselect-container > li.far {
	display: flex;
	align-items: center;
}

ul.multiselect-container > li.fa > a,
ul.multiselect-container > li.fas > a,
ul.multiselect-container > li.fab > a,
ul.multiselect-container > li.far > a {
	flex-grow: 1;
}

ul.multiselect-container > li.fa label,
ul.multiselect-container > li.fas label,
ul.multiselect-container > li.fab label,
ul.multiselect-container > li.far label {
	padding-left: 25px;
}


/*or a background*/
option.od-option-with-bg {
	background-size: 20px;
    background-repeat: no-repeat;
	background-position: 5px center;
    padding-left: 37px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}




/*don't show anything until plugin ready*/
/*body:not([plugin-active]) #cms-contentauto {display: none;}*/




#od-page-toolbar {float: right; /*margin: 8px;*/ margin-right: 0;}
/*#od-page-toolbar > .btn-group {margin-left: 10px;}*/
/*ODv32-sp-17 the icons are not centered within the boxes*/
#od-page-toolbar button, #od-page-toolbar > a.btn {
	/*background-color: #f5f5f5;
    color: #666;*/
    min-width: 25px;
    box-sizing: content-box;
    /* font-size: 1.1em; */
    margin-left: 5px;
	display: flex;
	justify-content: center;
	align-items: center;	
}
#od-page-toolbar button i.fa, #od-page-toolbar > a.btn i.fa {
	position: absolute;	
	font-size: 1.1em;
}



/*logo position OV-731*/
body[od-logo-halign="off"] #od-brand {display: none;}

body[od-logo-valign="top"] #od-brand {float: none;}
body[od-logo-valign="top"] .od-navbar-header {clear: both;}

body[od-logo-halign="right"] #od-brand {float: right;}

body[od-logo-valign="middle"][od-logo-halign="right"] #od-brand {
	position: absolute;
    right: 0;
    top: 15px;
    right: 15px;
}


/*OV-1017 Square logo distorted*/
#od-brand img {min-width: inherit !important;}


body[od-logo-position="header-right"] a#od-brand {float: right;}
body[od-logo-position="topnav-right"] a#od-brand {align-self: flex-end;}



/*this is used by folder plugin and page settings dialog*/
/*.mimetypeslug-google-apps-spreadsheet .actions_download a,
[class^="mimetypeslug-google-apps-"] .actions_download a,
:not([class^="mimetypeslug-google-apps-"]) .actions_copy a,
.mimetypeslug-google-apps-folder .actions_download a*/

/*.od-fldr-action-btn.actions_download.gappsnative-1,
.od-fldr-action-btn.actions_copy.gappsnative-0,
.od-fldr-action-btn.actions_copy.mimetypeslug-google-apps-folder*/
.action-allowed-0
	{cursor: not-allowed; /*color: #ccc !important;*/ opacity: 0.3;}


#od-context-menu .action-allowed-0 {display: none;}



/*[OV-1376] remove all rounded corners from OD dialogs (to match default theme)*/
.modal .nav-tabs>li.active>a,
.modal .tabs-left>li>a,
.modal .input-group-addon,
.modal .form-control,
.modal .btn,
.modal .panel,
.modal .popover,
.modal .alert,
.modal .thumbnail,
.modal .modal-content
	{border-radius: 0 !important}


/* class disabled deactivates all tabs... */
.nav-tabs.disabled > li > a {
	pointer-events: none;
}

/*boxed layout like inspinia*/

/*body[od-page-width="auto"] #od-container {
	margin: 0 auto;
    padding: 6px;
    background-color: #fff;
    min-height: 100vh;
    max-width: 1200px;

    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
}


#od-nav-container {
	border-bottom: solid 1px #e7eaec;
    padding-bottom: 7px;
}*/

/*h1 {color: rgb(103, 106, 108) !important;}*/

/*body {background-image: url(/html/template/templates/inspinia/v2.7.1/css/patterns/shattered.png);}*/


/*body[od-rootfoldertype="gtd"] #od-menu-create-linkfiles,
body[od-rootfoldertype="gtd"] #od-menu-create-linkfolders,
body[od-rootfoldertype="gtd"] #od-menu-create-upload,
body[od-rootfoldertype="gtd"] #od-btn-toolbar-star
	{display: none;}*/



/*OV-52 Who am I logged in as?*/
#od-mnu-userstatus img {
	height: 30px;
	width: 30px;
    float: left;
    margin: 0 8px 2px 7px;
}

#od-mnu-userstatus-name {
	/*width: 110px;*/
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

#od-mnu-userstatus span {
	display: inline-block;
	margin-top: 2px;
}

#od-mnu-userstatus span.caret-container {
	float: right;
	margin: 4px 15px 4px 0;
	cursor: pointer;
}

#od-mnu-userstatus-name.hasbg {
	background-color: transparent;

	background-size: contain;
	background-repeat: no-repeat;  
    background-position: left center;

    padding-left: 35px;
    margin-left: 15px;
}

/*#od-mnu-userstatus-a {
	background-color: transparent;

	background-size: contain;
	background-repeat: no-repeat;  
    background-position: center center;

    margin-left: 20px;
}

#od-mnu-userstatus-a.hasbg i {display: none;}*/

/*border in case image doesn't work*/
/*#od-mnu-userstatus-a.hasbg {border: solid 1px #ccc;}*/

#od-mnu-userstatus {
	cursor: pointer; 
	white-space: nowrap;
	/* margin-left: 15px; */
	/* v4-SP-1383 Logo should not be too big for mobile */
}

#od-mnu-userstatus:not(.open) + li,
#od-mnu-userstatus:not(.open) + li + li {display: none;}
#od-mnu-userstatus.open {margin-bottom: 8px;}


#od-editpage {
    margin-left: 20px;
}


body.pg-0 .hidepublic,
body:not(.pg-0) .showpublic,
body:not(.pg-0) #od-btn-signin {display: none;}


/*--------------------------------------------------------------*/
/*OV-1414 topnav auto-collapse doesn't work well in IE11*/
/*--------------------------------------------------------------*/
@media all and (-ms-high-contrast:none){
	#od-searchform .input-group-addon, #od-searchform .input-group-btn{
		width: auto;
	}
}


/*--------------------------------------------------------------*/

/*make some a without href look like real links*/
a[data-toggle="od-modal"],
a[onclick] {cursor: pointer;}


a[data-toggle="od-help"] {cursor: help;}



.od-nav-flex-h {display: flex; height: 100%;}
.h100pc {height: 100%;}

.od-flex-grow-v {display: flex; flex-direction: column; height: 100%;}
/*.od-flex-grow-active:active {flex-grow: 2;}
.od-flex-grow-active:active {flex-grow: 2;}
.od-flex-grow-focus:focus {flex-grow: 2;}*/
.od-flex-filler,
.od-flex-grow-1 {flex-grow: 1;}


/* nicely align icon at /help/errors/ */
.alert.has-odicon {display: flex; align-items: center;}
.alert.has-odicon > i {margin-right: 5px;}
.alert.has-odicon > i.fa-2x {margin-right: 10px;}


/*Unchecking Breadcrumb option shows thin line when border on from TD - make sure no empty box when BC off and no buttons visible (e.g. page is readonly)*/
body[od-page-show-breadcrumb="0"] .od-breadcrumb-container #od-breadcrumb{
	display:none!important;
}
/*V4-SP-BW-19 Navigation Buttons are not working*/
body[od-page-show-breadcrumb="0"] .od-breadcrumb-container{
	border:none!important;
	/* overflow: hidden; */
}

/*V4-SP-495	Menubar off - cog stops working*/
body[od-page-show-breadcrumb="0"] #cms-contentauto{ clear: both; }

body[od-page-show-breadcrumb="0"] div#od-page-toolbar > [class*="btn-"] {
    margin-top: 0px!important;
    margin-bottom: 6px!important;
}
.od-container .table.table-hover:not(.table-striped)>tbody>tr:hover, .table-hover>tbody>tr:hover {
    background-color: #f5f5f5!important;
}
/*OV-1570 Originaly in bootstrap but we need to make it important*/
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9!important;
}
table.dataTable.table-condensed > thead > tr > th{
	padding-right: 5px!important;
}


/*hide buttons/labels/etc until they get their text*/
[data-language-append]:not([data-language-append=""]):not([data-language-missing]),
[data-language-prepend]:not([data-language-prepend=""]):not([data-language-missing]),
[data-language-replace]:not([data-language-replace=""]):not([data-language-missing])
{visibility: hidden;}


/*OV-1565 - Mobile: Cookie Notice - Manage Cookie Start*/
.cc-window.cc-floating{
	padding: 1em 1.8em !important;
    width: 100% !important;
    max-width: 100% !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    bottom: 0px !important;
    align-items: center;
}
.cc-floating .cc-message{
	flex: 5 !important;
	display: inline-block !important;
	margin-bottom: 0px !important
}
.cc-window.cc-floating .cc-compliance{
	flex: 1 !Important;
}
/*Manage Cookie End*/

/*OV-1913*/
.cc-window .extra-content {font-size: 14px;}


/*OV-1567 ios Fixes - Youtube video not showing full thumbnail - Image is going out of container*/
/* @media (max-width: 480px){ */
	body[od-bs-width="xs"] main#main iframe.od-embed.type-video {
		height: 100%!important;
		min-height: inherit;
	}
	body[od-bs-width="xs"] .CMSgoogledocembed p span, body[od-bs-width="xs"] .CMSgoogledocembed p span img, body[od-bs-width="xs"] .CMSgoogledocembed h3 span img{
		max-width: 100%;
		height: auto!important;
	}
/* } */




#od-btn-toolbar-watch.watched i {color: green;}
/*change from bell-o to bell*/
#od-btn-toolbar-watch.watched i:before {content: '\f0f3';}


/*stop TD Save buttons jumping around with inline tooltips*/
.modal-footer .btn+.tooltip+.btn {
    margin-left: 5px
}




.od-searchicon-before {
    position: relative;
}

.od-searchicon-before:before {
    content: "\f002";
    font-family: FontAwesome;
    color: #ddd;
    position: absolute;
 	font-size: 1.2em;
    top: 5px;
    left: 14px;
}

.od-searchicon-before > input.form-control {
	padding-left: 40px;
}




/*make "select all" stand out more*/
.multiselect-container li.multiselect-all label {
    border-bottom: solid 1px #ccc;
}

.multiselect-container li.multiselect-all label:after {
	margin-left: 5px;
	margin-top: 3px; /*needed on sched during OV-1858*/
	color: #666;
	content: "\f309"; /*long arrow down*/
	font-family: FontAwesome;
	/*font-size: .85em;*/
}

.multiselect-container li.multiselect-all {
	position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
    width: 100%;
}




.od-colorpicker > input[type="text"],
input.form-control[type="number"],
input[type="number"] {
	font-family: monospace !important;
}




/*https://github.com/victor-valencia/bootstrap-iconpicker/issues/83*/
/*revert back to BS original...*/
body .popover {
    max-width: 276px !important;
}



/* stop TD from changing colour of links in dropdowns */
ul.dropdown-menu > li:not(.active):not(.disabled) > a {color: #333 !important;}
/* handle subtle BS glitch where active+disabled items still look vaguely active */
ul.dropdown-menu > li.active.disabled {opacity: 0.5;}
/*V4-SP-442 Pemission text is overlapped by border of panel*/
[od-bs4-width="xs"] .od-settings-navtabs-container{ padding: 0 5px; }

/*------------------------------------------------------------------------------------
v4-sp-514 latest chrome update seems to have introduced a bug with drop menus
------------------------------------------------------------------------------------*/
/* v4.1 - no longer needed, and causing multiselect to have narrow clickable area */
/*.dropdown-menu > li > a {
	display: flex;
}*/



/*------------------------------------------------------------------------------------
v4-sp-654 maw
------------------------------------------------------------------------------------*/
table.table-no-stripes > tbody > tr:nth-of-type(2n+1) {background-color: transparent !important;}
table.table-no-borders > tbody > tr > * {border: none;}
table.od-valign-middle > tbody > tr > * {vertical-align: middle;}


table.od-form-table {margin-bottom: 0;}

table.od-form-table > tbody > tr:nth-of-type(2n+1) {background-color: transparent !important;}


table.od-form-table > tbody > tr > th {
	text-align: right;
	padding-top: 6px;
	padding-right: 20px;
	white-space: nowrap;
	min-width: 100px;
	width: 1%;
}

table.od-form-table td > .form-control {margin-bottom: 6px;}

table.od-form-table > tbody > tr > * {
	border: none;
	vertical-align: top;
}

table.od-form-table > tbody > tr > * > label {
	width: 100%;
	margin-bottom: 0;
}

table.od-form-table > tbody > tr > td.checkbox {
	padding: 12px 0 12px 8px;
	min-height: unset;
	min-width: 80px;
	display: table-cell;
}




/* OV-1934 allowing non-Google users to upload files*/
.file-upload {
    position: relative;
    overflow: hidden
}

.file-upload input[type=file] {
    position: absolute;
    top: 0;
    /* right: 0; */
    left: 0;
    /* min-width: 100%; */
    /* width: 200px; */
    /* min-height: 100%; */
    /* min-height: 200px; */
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: 0;
    background: #fff;
    cursor: inherit;
    display: block;
    cursor: pointer;
}


/*space to align with building/home*/
.od-phones-icons i {
	min-width: 16px;
	display: inline-block;
	text-align: center;
	margin-left: -3px;
}

.od-phones-icons {white-space: nowrap;}


.fb-required, .formbuilder-required {
    color: #c10000;
    font-weight: bold;
    padding-left: 2px;
    font-size: 1.2em;
    line-height: 0;
}

/* on your profile keep multiselect basically looking like other selects */
.rendered-form .btn.multiselect {
    text-align: left;
    color: #555;
}

.rendered-form select.form-control {
    padding-left: 8px;
}

/*moved from /plugins/forms-od/plugin.css:280 */
.rendered-form > .form-group > label {
	padding-top: 6px;
}





/* editable title in form designer */
.od-modal-dialog-prompt-clone .modal-header .modal-icon {
	float: left;
	margin-right: 5px;
	margin-top: 5px;
	font-size: 1.2em;
}

.od-modal-dialog-prompt-clone .modal-header form {
	float: left;
}

.od-modal-dialog-prompt-clone .modal-header input.form-control {
	height: 30px;
	margin-left: 5px;
	padding-left: 10px;
}




/*------------------------------------------------------------------------------------
v4-sp-663 Icon dialog remove PS scroll
------------------------------------------------------------------------------------*/
body[od-modal-open="1"]{ overflow: hidden; }
[od-modal-open="1"] .modal.in {
    overflow-x: hidden;
    overflow-y: auto;
}



/*------------------------------------------------------------------------------------
	sp-722 Color pickers - recently used / custom colours
------------------------------------------------------------------------------------*/
.colorpicker-selectors i {
	height: 14px;
	width: 14px;
	border: dotted 1px #ccc;
}

/* wrap td colours onto new row*/
/*.colorpicker-selectors i:nth-child(5) {clear: both; margin-left: 0;}
.colorpicker-selectors i:nth-child(n+5) {margin-top: 3px;}*/

/* transparent - checkerboard */
.colorpicker-selectors i:nth-child(1) {
	background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
	background-size: 10px 10px;
	background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}



/*------------------------------------------------------------------------------------
	fancybox mods here
------------------------------------------------------------------------------------*/
.grid-stack-item .fancybox-button.fancybox-button--thumbs {margin-right: 6px;}

.fancybox-is-open .fancybox-bg {opacity: 1;}



/*sp-1123*/
.form-control:focus,
.form-control {box-shadow: none;}

/* v4-SP-1213 bwcompat - dashboard broken when v3's PS Content has been used */
#cms-helptext,
#cms-content{
	display: none;
}





/* ODC may '21 */
a.popout-icon-external:after{
	content: "\f360"; /* fa-external-link-square-alt:before */
	font-family: "FontAwesome";
	margin-left: 5px;
}


.file-opt-heading {
    padding-top: 7px;
    font-weight: 600;
}