:root {
  --default-text-color: #4d4d4d; /*#555555;*/
  --vivid-color: #5271A2; /* for white background ok, but not for dashboard light background: #5477B3; /*Non-AA: #567ebc*/
  --unobtrusive-color: #797676;  /*non-wcag: #8d8d8d;*/
  --incomplete-color: #A52753;
 
  --secondary-light-color: white;
  
  --default-table-border-radius: 2px;  
  
  --default-border-color: #a5bede;
  --vivid-border-color: #a3bae9; /*e.g. for the active tab header.*/ 
  --light-border-color: #91b1e6; /*e.g. for an inactive tab header.*/
  
  --toolbar-background-color: #CEDFF5;
  --toolbar-button-pressed-background-color: #84A1CE; /* Currently identical for all themes. Note that a filter is applied as well to saturate and increase brightness. */

  --grid-header-background-color:#F4F4F4;
  --grid-background-color: #bbc7da;
  --grid-border-color: grey;   
  --grid-row-over-background-color: #efefef;
  --grid-row-selected-background-color: #d1dff0;
    
  --dashboard-font-color: #353535;
  --dashboard-link-color: #36639E; /*Non-AA: #568DCF;*/
  
  --dashboard-light-background-color: #f4f4f4;
  --dashboard-darker-background-color: #E1E1E1; /*slightly darker grey for status pie*/
  --dashboard-vivid-background-color: #D2DEF1;
 
  --panel-header-color: #36639E;
  --panel-header-color-slightly-transparent: #36639EAA;
  --panel-header-background-color: #d1dff0;
  --panel-header-border-color: #4e76c3;
  --panel-and-fieldset-border-color: #99BBE8;

  --revision-panel-header-color: #36639E; /*Can be same or different to the normal panel-header-color*/

  --tab-header-text-color: #3d3d3d;
  --tab-strip-closable-background-color: #FF1414;  /* This color is only used with a brightness filter applied to it. */
  --tab-panel-header-and-footer-border-color: #99BBE8; /* Likely to be identical with panel-and-fieldset-border-color in all themes. */

  --window-header-color: #36639E;
  --window-header-background-color: #d1dff0;
  --window-border-color: #36639E;
  
  --btn-border-color: #C2C2C2;
  --btn-normal-font-color: #111111;
  --btn-important-background-color: #696969;
 
  --notes-info-font-color: #ffffff;  
  --notes-info-notice-background-color:#4D77B3; /* non-AA: #537DB7*/
  --success-background-color: #58830A; /* Non-AA: #abca6b; */
  --warning-background-color: #D6430A; /* or #C84C09;  Non-AA: #ff9200;*/
  --error-background-color: #DF2935; /* or #c00000; */
  --instruction-background-color: #757575; /* min for WCAG AA! */
  
  --published-background-color: #92D050; /*AA-with-white: e.g. #4C8508, #1B892F or #4A850B -> try this with #554c4c or #39531F as text color maybe?? */
  --published-text-color: #554c4c; /*text color that works for AA compliance with the published green background.*/
   
  --gwt-toggle-yes-btn-up-background-color: linear-gradient(to top, rgb(87, 136, 67) 0%, rgb(103, 174, 85) 100%);
  --gwt-toggle-default-btn-up-background-color: linear-gradient(to top, #777 0%, #AAA 100%);
  --gwt-toggle-no-btn-up-background-color: linear-gradient(to top, #990012 0%, #C11B17 100%);
  
  --disclosure-panel-header-background-color: #CEDFF5;

  --tag-background-color: #4C71A8; /*non-wcag: #bbc7da; */
  --tag-hover-background-color: #4D74B4; /*non-wcag:#91b1e6;*/

  --labelbox-default-background-color: #5477B3; /* Must be sufficiently different to oi-dashboard-background-vivid */ 
  --keyword-background-color: #5271A2;

  --topbar-background-color: #D2DEF1;  
  --topbar-ckmtext-color: #474747; /*This is for the CKM text in the header and may be overwritten in header themes. */
  --title-below-logo-color: #3f66a0;

  --login-border: #B0B0B0;
  --close-x-window-filter: brightness(100%);
}

html * {font-family:tahoma,arial,helvetica,sans-serif;}

input {text-overflow: ellipsis;}

.oi-font-heading {font-family:tahoma,arial,helvetica,sans-serif; font-size:14px; font-weight:bold; color:var(--default-text-color); margin-bottom:2px;}
.oi-heading {font-family:tahoma,arial,helvetica,sans-serif; font-size:14px; font-weight:bold;}
.oi-font-heading hr {color: var(--default-text-color); background-color: var(--default-text-color); height: 2px; width: 250px; margin-left: 0px;}
.oi-font-heading-resourcepanel {font-family:tahoma,arial,helvetica,sans-serif;font-size:15px;font-weight:bold;color:var(--default-text-color);margin-top: 7px;}
.oi-font-sub-heading {font-family:tahoma,arial,helvetica,sans-serif;font-size:12px;font-weight:bold;color:var(--default-text-color);}
.oi-font-sub-sub-heading {font-family:tahoma,arial,helvetica,sans-serif;font-size:12px;font-weight:bold;font-style:italic;color:var(--default-text-color);}
.oi-font-normal {font-family:tahoma,arial,helvetica,sans-serif;font-size:12px; word-wrap:break-word; overflow-wrap:break-word;} /*word-wrap=legacy but required for some browsers, overflow-wrap=standard*/
.oi-font-smaller {font-size:11px; word-wrap:break-word; overflow-wrap:break-word;} /*word-wrap=legacy but required for some browsers, overflow-wrap=standard*/
.oi-normal-text-color {color:var(--default-text-color);}
.oi-font-italic {font-style:italic; font-size:11px; color:var(--default-text-color); word-wrap:break-word; overflow-wrap:break-word;}
.oi-font-label {font-size:12px; line-height: 14px;}
.oi-font-important-question {font-size:13px; line-height: 18px;}
.oi-font-normal-unobtrusive {font-size:11px; color:var(--unobtrusive-color); word-wrap:break-word; overflow-wrap:break-word;}
.oi-font-strong {font-size:11px;font-weight:bold; color:var(--default-text-color);}
.oi-font-priority {color:red; font-size:12px; font-weight:bold;}
.oi-font-attention {font-size:12px; font-weight:bold; color:#CA4D48;} /*was color:#DB6161 or #D91E1E;*/
.oi-font-ok {font-size:12px; font-weight:bold; color:#118A0F;} /*non-wcag #04B404;*/ 
.oi-font-referenced-resource {font-style:italic;}
.oi-font-black {color:black;}
.oi-font-heading.oi-background-ckmtext {color: var(--topbar-ckmtext-color);}

.oi-bold {font-weight:bold;}
.oi-italic {font-style:italic;}
.oi-italic-bold-important {font-style:italic!important; font-weight:bold!important;}
.oi-bold-important {font-weight:bold!important;}

.oi-normal-font-weight {font-weight:normal;}
.oi-font-uppercase {text-transform: uppercase; font-size:12px; font-weight:bold;}
.oi-font-smallcaps {font-variant: small-caps; font-weight:bold; color:var(--default-text-color);} 

.oi-capitalize {text-transform: capitalize;}
.oi-link{text-decoration:none; background:transparent;}
.oi-link:hover {cursor:pointer; text-decoration:underline;}
.oi-link-inherit-color {color:inherit!important;}
.oi-link-vivid-colour a, a.oi-link-vivid-colour {color:var(--vivid-color);} /*The order to the above vivid-colour is important for e.g. references in archetypes*/
.oi-link-unobtrusive a, a.oi-link-unobtrusive {color:var(--unobtrusive-color);}
.oi-link-vivid-colour a:hover, a.oi-link-vivid-colour:hover,
.oi-link-unobtrusive a:hover, a.oi-link-unobtrusive:hover {filter: brightness(1.2) saturate(2);}

.oi-overflow {overflow:auto;}
.oi-nowrap {white-space:nowrap;} /*Do not allow a line break */
.oi-break-word {overflow-wrap:break-word;}
.oi-break-all {word-break: break-all;}
.oi-vertical-align-top {vertical-align: top;}
.oi-vertical-align-middle {vertical-align: middle;}
.oi-vertical-align-baseline {vertical-align: baseline;}
.oi-text-align-center {text-align: center;}

.oi-background-non-specialised {background-color:#ededed!important;}

.oi-center-image {margin: auto; width: 50%; display: block;} /* Centers an image in a div or similar*/
.desaturate img {filter: grayscale(100%);}
.oi-desaturate {filter: grayscale(100%);} 
.oi-pale {filter: grayscale(65%) brightness(130%);}
.oi-bright {filter: brightness(1000%);}
.oi-brighten-on-hover {transition: all 1s ease-in-out;}
.oi-brighten-on-hover:hover {filter: brightness(115%);}
.oi-desaturate-on-hover {transition: all 1s ease-in-out;}
.oi-desaturate-on-hover:hover {filter: grayscale(100%);}

.oi-openehr-logo-about {margin-top: 19px; margin-right:19px; width: 254px;}

.oi-trunk-or-branches {
	font-size: 12px;
	font-variant: small-caps; 
	color: var(--secondary-light-color);
	text-align: center;
	background-color: var(--vivid-color); 
	padding: 3px;
	border-radius: 2px;	
}
.oi-trunk-or-branches div {background-color:transparent;}

/* The simple version of pure html is used for document reviews to avoid changing too much by default. 
* It is also used for markdown rendering. */
.oi-pure-html ul, .oi-pure-html-simple ul {list-style-type:disc;}
.oi-pure-html ol, .oi-pure-html-simple ol {list-style-type:decimal;}
.oi-pure-html li {display: list-item!important;}
.oi-pure-html-simple li {display: list-item;}

.oi-pure-html ul, .oi-pure-html ol {margin: 5px 0px 5px 20px!important;}
.oi-pure-html-simple ul, .oi-pure-html-simple ol {margin: 5px 0px 5px 20px;}
.oi-pure-html dd {margin: 0px 0px 0px 20px!important;}

.oi-pure-html, .oi-pure-html p, .oi-pure-html-simple p,
.oi-pure-html div, .oi-pure-html-simple div,
.oi-pure-html span, .oi-pure-html-simple span {font-style:normal; color:var(--default-text-color); font-size:12px;}

/*.oi-pure-html p {margin:10px 0px 5px 0px!important;} <- This was used before markdown, not sure if we really require a top margin in other cases for p.*/
.oi-pure-html p, .oi-pure-html ul, .oi-pure-html ol, .oi-pure-html dl, .oi-pure-html table, .oi-pure-html pre, .oi-pure-html details {
	margin:0px 0px 10px 0px;
}

.oi-pure-html em, .oi-pure-html-simple em {font-style:italic;}
.oi-pure-html strong, .oi-pure-html-simple strong {font-weight:bold;}

.oi-pure-html h1, .oi-pure-html-simple h1 {font-style:normal; font-size: 14px; font-weight:bold; color:var(--default-text-color);}
.oi-pure-html h2, .oi-pure-html-simple h2 {font-style:normal; font-size: 12px; font-weight:bold; color:var(--default-text-color);}

.oi-pure-html h3, .oi-pure-html h4, .oi-pure-html h5, .oi-pure-html h6,
.oi-pure-html-simple h3, .oi-pure-html-simple h4, .oi-pure-html-simple h5, .oi-pure-html-simple h6 {
	font-style:normal; 
	font-size: 12px;
	font-weight:bold;
	color:var(--default-text-color);
}

.oi-pure-html h1, .oi-pure-html h2, .oi-pure-html h3, .oi-pure-html h4, .oi-pure-html h5, .oi-pure-html h6{margin:20px 0px 10px 0px!important;}

.oi-pure-html blockquote {
	margin: 0;
	padding: 0 1em;
	color: #636c76;
	border-left: .25em solid #d0d7de;
}

.oi-pure-html table {
	border-spacing: 0;
	border-collapse: collapse;
	display: block;
	width: max-content;
	max-width: 100%;
	overflow: auto;
}

.oi-pure-html table th {
	font-weight: 600;
	background-color: #efefef;
    color: var(--vivid-color);
}

.oi-pure-html table th, .oi-pure-html table td {
  padding: 10px;
  border: 2px solid #ccc; /*Keep consistent with oireport or there will be side-effects if both apply.*/
}

.oi-pure-html pre {
	padding: 16px;
	overflow: auto;
	font-size: 85%;
	line-height: 1.45;
	color: #1f2328;
	background-color: #f6f8fa;
	border-radius: 6px;
}

.oi-pure-html code {
	padding: .2em .4em;
	margin: 0;
	font-size: 85%;
	white-space: break-spaces;
	background-color: #afb8c133;
	border-radius: 6px;
}

.oi-pure-html code, .oi-pure-html pre {
  font-family: monospace;
}

.oi-oid {font-size: small; color: #a0a0c0; margin-left: 3em;}

.oi-unobtrusive, div.oi-unobtrusive, span.oi-unobtrusive {color:var(--unobtrusive-color);}
.oi-incomplete, div.oi-incomplete, span.oi-incomplete {color:var(--incomplete-color);} /* e.g. incomplete review */
.oi-item-disabled-normal-font {cursor:default; opacity:1.0!important;}
.oi-item-disabled-normal-font {cursor:default !important;}

.oi-zero-z {z-index:0!important;} /* used to indicate for added tooltips that they should not be above other stuff (e.g. DatePickers)*/

.oi-rtl {direction:rtl;}
.oi-rtl-padded {direction:rtl; padding-right: 10px;}
.oi-align-right {text-align:right; direction:ltr;}
.oi-align-right-padded {direction:ltr; text-align:right; padding-right: 10px;}
.oi-float-right {float:right;}

/***** Generic Margins and Paddings ************/ 
.oi-bottom-padded {padding-bottom: 4px;}
.oi-top-padded {padding-top: 4px;}
.oi-left-padded {padding-left: 4px;}
.oi-right-padded {padding-right: 4px;}

.oi-bottom-padded-large {padding-bottom: 10px;}
.oi-top-padded-large {padding-top: 10px;}
.oi-left-padded-large {padding-left: 10px;}
.oi-right-padded-large {padding-right: 10px;}

.oi-top-padded-extra-large {padding-top: 20px;}

.oi-no-padding, .oi-no-padding-for-divs, .oi-no-padding-for-divs div {padding: 0px;} /* Also for a div underneath! E.g. for a footer btn panel.*/ 

.oi-bottom-margin {margin-bottom: 4px;}
.oi-top-margin {margin-top: 4px;}
.oi-left-margin {margin-left: 4px;}
.oi-right-margin {margin-right: 4px;}

.oi-bottom-margin-large {margin-bottom: 10px;}
.oi-top-margin-large {margin-top: 10px;}
.oi-left-margin-large {margin-left: 10px;}
.oi-right-margin-large {margin-right: 10px;}

.oi-left-margin-extra-large {margin-left: 20px;}

.oi-minimal-bottom-margin {margin-bottom: 2px;}

.oi-indent-from-second-line {padding-left: 22px; text-indent:-22px;}

.oi-centered-table {margin-left:auto; margin-right:auto; text-align:center;}

.oi-transparent-panel, .oi-transparent-panel .x-panel-body {background: transparent;}

.oi-border-box, .oi-border-box .x-panel-bwrap .x-panel-body {box-sizing: border-box;} /* to not count padding and border as width - prevents firefox right border missing bug for forms in some screensizes*/

/* Could be used for two images on top of each other
.oi-top-image {position:absolute; z-index:2; left:5px; } 
.oi-bottom-image {position:absolute; z-index:1; left:5px; }
*/

.oi-greyed-out {opacity: 0.25;} 

.x-unselectable, .x-unselectable * {
	-webkit-user-select:none; user-select:none; /*Safari still requires the webkit-pefix in 2022.*/
}

.oi-remote-indicator-with-status {
    background-color: #4f81bd;
    border-radius: 9px;
    padding: 0px 2px 1px 1px;
}

.oi-title-no-border-no-background > div.x-panel-header { /* only for panel headers directly underneath, not for those nested.*/
	border: none;
	background: none;
	font-size: 14px;
    font-weight: bold;
    color: var(--default-text-color);	
}

#mainToolbar.x-toolbar {
    border-radius: 7px 7px 0 0;
    border-width: 1px;
    border-color: var(--toolbar-background-color);
}

/**Loading animation related **/
.x-mask-loading div{background:#fbfbfb url( '../pics/other/loading_medium.gif' ) no-repeat 5px 5px/16px 16px;}

.ext-el-mask-msg{border:none; padding:0px;}

.oi-loading-animation {
  animation-duration: 1.0s;
  animation-name: pulsate;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease;
 
  max-width: 700px;
  color: var(--vivid-color);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 11px;
}

@keyframes pulsate {
    0% {opacity:.1;}
  100% {opacity:.99;}
}

.oi-spin {
	animation: spin 1.5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% {  transform: rotate(359deg); }
}

/******************************************************************************
 RichText Toolbar icons - some are increased in size requiring the !important flag. 
/******************************************************************************/
.x-btn button.oi-bold-icon {background-image: url(../pics/rtt/bold.svg);} 
.x-btn button.oi-italic-icon {background-image: url(../pics/rtt/italic.svg);} 
.x-btn button.oi-underline-icon {background-image: url(../pics/rtt/underline.svg);} 
.x-btn button.oi-strikeThrough-icon {background-image: url(../pics/rtt/strikeThrough.svg);} 
.x-btn button.oi-subscript-icon {background-image: url(../pics/rtt/subscript.svg);} 
.x-btn button.oi-superscript-icon {background-image: url(../pics/rtt/superscript.svg);} 

.x-btn button.oi-justifyCenter-icon {background-image: url(../pics/rtt/justifyCenter.gif); background-size: 20px 20px!important; background-position-x: -2px!important;} 
.x-btn button.oi-justifyLeft-icon {background-image: url(../pics/rtt/justifyLeft.gif); background-size: 20px 20px!important; background-position-x: -2px!important;} 
.x-btn button.oi-justifyRight-icon {background-image: url(../pics/rtt/justifyRight.gif); background-size: 20px 20px!important; background-position-x: -2px!important;} 

.x-btn button.oi-indent-icon {background-image: url(../pics/rtt/indent.gif); background-size: 20px 20px!important; background-position-x: -2px!important;} 
.x-btn button.oi-outdent-icon {background-image: url(../pics/rtt/outdent.gif); background-size: 20px 20px!important; background-position-x: -2px!important;} 

.x-btn button.oi-ol-icon {background-image: url(../pics/rtt/ol.gif); background-size: 20px 20px!important; background-position-x: -2px!important;} 
.x-btn button.oi-ul-icon {background-image: url(../pics/rtt/ul.gif); background-size: 20px 20px!important; background-position-x: -2px!important;} 

.x-btn button.oi-insertImage-icon {background-image: url(../pics/rtt/insertImage.png); background-size: 20px 20px!important; background-position-x: -2px!important;} 
.x-btn button.oi-hr-icon {background-image: url(../pics/rtt/hr.gif); background-size: 20px 20px!important; background-position-x: -2px!important;} 

.x-btn button.oi-createLink-icon {background-image: url(../pics/rtt/createLink.svg);} 
.x-btn button.oi-removeLink-icon {background-image: url(../pics/rtt/removeLink.svg);} 
.x-btn button.oi-removeFormat-icon {background-image: url(../pics/rtt/removeFormat.gif); background-size: 20px 20px!important; background-position-x: -2px!important;} 

/******************************************************************************
 Other Icons that require a CSS class 
/******************************************************************************/
.x-btn-text-icon .x-btn-center .x-btn-text.oi-logout {background-image: url(../pics/menu/logoff.svg); padding-bottom:4px;}
.x-btn-text-icon .x-btn-center .x-btn-text.oi-login {background-image: url(../pics/menu/arrow_right_boxed.svg);}

.oi-user-icon {background-image: url(../pics/menu/user.svg); background-size: contain;}
.oi-user-edit-icon {background-image: url(../pics/menu/user_edit.png); background-size: contain;}
.oi-user-add-icon {background-image: url(../pics/menu/user_add.png); background-size: contain;}
.oi-manage-users-icon {background-image: url(../pics/menu/group_edit.png); background-size: contain;}
.oi-users-per-role-icon{background-image: url(../pics/menu/usersPerRole.svg); background-size: contain;}

/*  CodeFormat icon classes */ 
.oi-adl-icon {background-image: url(../pics/menu/adl.svg); background-size: contain;}
.oi-aql-icon {background-image: url(../pics/menu/filetypes/aql.svg); background-size: contain;}
.oi-csv-icon {background-image: url(../pics/menu/filetypes/csv.svg); background-size: contain;}
.oi-markdown-icon {background-image: url(../pics/menu/filetypes/markdown.png); background-size: contain;}
.oi-plaintext-icon {background-image: url(../pics/menu/filetypes/text.png); background-size: contain;}
.oi-json-icon {background-image: url(../pics/menu/filetypes/json.png); background-size: contain;}
.oi-xml-icon {background-image: url(../pics/menu/filetypes/xml.png); background-size: contain;}
.oi-yaml-icon {background-image: url(../pics/menu/filetypes/yaml.svg); background-size: contain;}

.oi-archetype-icon, .x-btn button.oi-archetype-icon {background-image: url(../pics/resourcetypes/archetype-no-circle.svg); background-size: contain;} 
.oi-template-icon, .x-btn button.oi-template-icon {background-image: url(../pics/resourcetypes/template-no-circle.svg); background-size: contain;} 
.oi-termset-icon, .x-btn button.oi-termset-icon {background-image: url(../pics/resourcetypes/termset-no-circle.svg); background-size: contain;} 
.oi-release-set-icon, .x-btn button.oi-release-set-icon {background-image: url(../pics/resourcetypes/release-set-no-circle.svg); background-size: contain;} 
.oi-template-order-item-icon, .x-btn button.oi-order-item-icon {background-image: url(../pics/resourcetypes/template-order-item-no-circle.svg); background-size: contain;} 
.oi-template-order-set-icon, .x-btn button.oi-order-set-icon {background-image: url(../pics/resourcetypes/template-order-set-no-circle.svg); background-size: contain;}
.oi-template-knowledge-topic-icon, .x-btn button.oi-knowledge-topic-icon {background-image: url(../pics/resourcetypes/template-knowledge-topic-no-circle.svg); background-size: contain;}

.oi-operational-template-icon, .x-btn button.oi-operational-template-icon {background-image: url(../pics/resourcetypes/operational-template-no-circle.svg); background-size: contain;}

.oi-archetype-medium-icon {background-image: url(../pics/resourcetypes/archetype.svg); background-size: contain;} 
.oi-template-medium-icon {background-image: url(../pics/resourcetypes/template.svg); background-size: contain;}
.oi-termset-medium-icon {background-image: url(../pics/resourcetypes/termset.svg); background-size: contain;} 
.oi-release-set-medium-icon {background-image: url(../pics/resourcetypes/release-set.svg); background-size: contain;} 
.oi-template-order-item-medium-icon {background-image: url(../pics/resourcetypes/template-order-item.svg); background-size: contain;}
.oi-template-order-set-medium-icon {background-image: url(../pics/resourcetypes/template-order-set.svg); background-size: contain;}
.oi-template-knowledge-topic-medium-icon {background-image: url(../pics/resourcetypes/template-knowledge-topic.svg); background-size: contain;} 

.oi-operational-template-medium-icon {background-image: url(../pics/resourcetypes/operational-template.svg); background-size: contain;} 

.oi-new-resource-icon {background-image: url(../pics/menu/add.svg);}
.oi-update-resource-icon {background-image: url(../pics/menu/update.svg);}

.oi-upload-resource-icon {background-image: url(../pics/menu/import.svg);}
.oi-revise-resource-icon {background-image: url(../pics/menu/revise.svg);}
.oi-checkout-icon {background-image: url(../pics/menu/checkout.png);}
.oi-archetype-translation-submit-icon {background-image: url(../pics/menu/translation_upload.svg);}

.oi-adoptions-icon {background-image: url(../pics/menu/heart_adopted.svg);} 
.oi-adoptionssummary-icon {background-image: url(../pics/menu/heart_summary.svg);} 
.oi-review-round-icon {background-image: url(../pics/other/reviewRound.svg); background-size: contain;}
.x-btn button.oi-team-icon, .oi-team-icon {background-image: url(../pics/menu/group.png);}
.oi-translation-icon {background-image: url(../pics/menu/translation.svg);}
.oi-active-branches-icon {background-image: url(../pics/menu/activebranches.png);}
.oi-transform-engine-icon {background-image: url(../pics/menu/transformEngine.png);}
.oi-release-notes-icon {background-image: url(../pics/other/releaseNotes.svg);}


.x-btn button.oi-search-icon, .oi-search-icon {background-image: url(../pics/menu/magnifier.svg);}
.x-toolbar .x-btn-text.oi-search-icon:hover, .x-toolbar .x-btn-text.oi-search-icon:active,
.oi-button-important-ok .x-btn-text.oi-search-icon:hover, .oi-button-important-ok .x-btn-text.oi-search-icon:active, 
.oi-brighten-btn-icon-on-hover:hover button, .oi-brighten-btn-icon-on-hover:active button,
.x-toolbar .oi-brighten-btn-icon-on-hover .x-btn-text:hover, .x-toolbar .oi-brighten-btn-icon-on-hover .x-btn-text:active,  
.x-toolbar .oi-brighten-btn-icon-on-hover.x-btn-menu-active .x-btn-text {
    filter: brightness(2000%);
}

/* Termset navigation icons */
.oi-go-down-icon {background-image: url(../pics/other/godown.png);}
.oi-go-up-icon {background-image: url(../pics/other/goup.png);}
.oi-find-anywhere-icon {background-image: url(../pics/menu/magnifier.svg);}
.oi-phrase-starts-with-icon {background-image: url(../pics/other/phraseStartsWith.png);}
.oi-any-word-starts-with-icon {background-image: url(../pics/other/anyWordStartsWith.png);}
.oi-find-by-concept-id-icon {background-image: url(../pics/other/ConceptSearch.png);}
.oi-find-by-term-id-icon {background-image: url(../pics/other/TermSearch.png);}

.oi-project-icon, .x-tree-node-icon.oi-project-icon {background-image: url(../pics/menu/project.svg); background-size: contain;} 
.oi-incubator-icon, .x-tree-node-icon.oi-incubator-icon {background-image: url(../pics/menu/incubator.svg); background-size: contain;}
.oi-private-incubator-icon, .x-tree-node-icon.oi-private-incubator-icon {background-image: url(../pics/menu/incubator_private.svg); background-size: contain;} 
.oi-subdomain-icon, .x-tree-node-icon.oi-subdomain-icon {background-image: url(../pics/menu/subdomain.svg); background-size: contain;} 

.oi-project-medium-icon {background-image: url(../pics/other/project.svg); background-size: contain;} 
.oi-incubator-medium-icon {background-image: url(../pics/other/incubator.svg); background-size: contain;}
/* Note: We don't have a better medium icon at present for private incubators.*/
.oi-private-incubator-medium-icon {background-image: url(../pics/menu/incubator_private.png); background-size: contain;} 

.oi-projects-and-incubators-icon {background-image: url(../pics/other/project.svg);}
.oi-projects-and-incubators-overview-icon {background-image: url(../pics/menu/projects_and_incubators.svg);}

.oi-allresources-icon {background-image: url(../pics/other/allResources.svg);} 
.oi-allresources-order-templates-icon {background-image: url(../pics/other/allResources_orderTemplates.svg);} 
.oi-watchlist-icon {background-image: url(../pics/menu/heart_adopted_medium.png);} 
.oi-recentlymodified-icon {background-image: url(../pics/other/calendar-nodate-circle.svg);} 
.oi-checkedout-icon {background-image: url(../pics/other/checked_out_medium.png);} 
.oi-preferredview-icon {background-image: url(../pics/other/preferredview_medium.png);}
.oi-search-icon-medium {background-image: url(../pics/other/magnifier.svg);}

.oi-resource-commit-icon {background-image: url(../pics/menu/commit.png)}
.oi-resource-checkout-icon {background-image: url(../pics/menu/checkout.png);}

.oi-audit-log-icon {background-image: url(../pics/menu/auditLog.svg);}
.oi-dashboard-icon {background-image: url(../pics/menu/dashboard_main.svg);}

.oi-validation-icon {background-image: url(../pics/menu/validation.svg);}
.oi-archetype-proposal-icon {background-image: url(../pics/menu/archetypeproposal.svg);}
.oi-import-remote-icon {background-image: url(../pics/other/remote.svg);}
.oi-bulk-import-icon {background-image: url(../pics/menu/import-bulk.svg);}
.oi-bulk-import-secondarymodels-icon {background-image: url(../pics/menu/import-bulk-secondarymodels.svg);}
.oi-bulk-user-creation-icon {background-image: url(../pics/menu/user_add.png);}
.oi-resource-centre-icon {background-image: url(../pics/menu/resourceCentre.svg);}
.oi-secondary-model-icon {background-image: url(../pics/menu/secondaryModel.svg);}
.oi-export-icon {background-image: url(../pics/menu/export.svg);}
.oi-bulk-export-icon {background-image: url(../pics/menu/export-bulk.svg);}
.oi-options-icon {background-image: url(../pics/menu/wrench.png);}
.oi-discussion-icon {background-image: url(../pics/menu/discussions.svg);}
.oi-search-discussions-icon {background-image: url(../pics/menu/magnifier.svg);}
.oi-login-statistics-icon {background-image: url(../pics/menu/arrow_right_boxed.svg);}
.oi-review-rounds-overview-icon {background-image: url(../pics/menu/summary.png);}
.oi-advanced-template-search-icon {background-image: url(../pics/menu/magnifier_template.svg);}
.oi-user-lookup-icon {background-image: url(../pics/menu/magnifier.svg);}
.oi-mindmap-overview-icon {background-image: url(../pics/menu/mindmap.svg);}
.oi-my-reviews-icon {background-image: url(../pics/menu/reviewtype_generic.svg);}
.oi-initiate-review-round-icon {background-image: url(../pics/menu/reviewRound-no-circle.svg);}
.oi-review-rounds-overview-icon {background-image: url(../pics/menu/summary.png);}
.oi-invitation-add-icon {background-image: url(../pics/menu/invitation_add.svg);}
.oi-invitation-icon {background-image: url(../pics/menu/invitation.svg);}
.oi-review-invitation-template-icon {background-image: url(../pics/menu/invitationTemplate.svg);} 

.oi-email-icon {background-image: url(../pics/other/email.svg);}
.oi-archetypes-per-language-icon {background-image: url(../pics/menu/translation.svg);}
.oi-review-reporting-icon {background-image: url(../pics/states/teamreview.png);}
.oi-change-password-icon {background-image: url(../pics/menu/password.png);}
.oi-manage-classification-icon {background-image: url(../pics/menu/classification.svg);}

.oi-published-state-icon {background-image: url(../pics/states/published.png);}

.oi-statistics-icon {background-image: url(../pics/menu/stats.png);}
.oi-archetype-statistics-icon {background-image: url(../pics/menu/stats_archetypes.png);} 
.oi-template-statistics-icon {background-image: url(../pics/menu/stats_templates.png);} 
.oi-termset-statistics-icon {background-image: url(../pics/menu/stats_termsets.png);} 
.oi-data-points-icon {background-image: url(../pics/rm/cluster.svg);}

.oi-change-requests-icon {background-image: url(../pics/menu/changeRequests.svg); background-size:contain;} 
.oi-change-requests-circle-icon {background-image: url(../pics/other/changeRequests.svg); background-size:contain;}
.oi-tasks-icon {background-image: url(../pics/menu/tasks.svg); background-size:contain;}
.oi-tasks-circle-icon {background-image: url(../pics/other/tasks.svg); background-size:contain;}
.oi-secondary-models-icon {background-image: url(../pics/menu/secondaryModel.svg); background-size:contain;} 


.oi-warning-icon {background-image: url(../pics/other/warning.svg) !important; background-size:16px;} 
.oi-warning-icon-large {background-image: url(../pics/other/warning.svg);} 

.oi-information-icon {background-image: url(../pics/other/information.svg) !important; background-size:16px;}
.oi-information-icon-large {background-image: url(../pics/other/information.svg);}

.oi-menu-item-no-icon-no-space {background-image:none; width:0px; margin:0px;}
.oi-menu-item-selected-icon {background-image:url(../pics/menu/menuItemSelected.svg); background-size:contain;}

.oi-save-icon {background-image: url(../pics/menu/save.svg);}

/* CSV export for GWT CellTables */
.oi-panel .oi-celltable-title-export {
 	border-right:none;
}

.oi-panel .oi-celltable-export {
	cursor:pointer;
	border-left:none;
} 

.oi-celltable-export img {
	filter:saturate(0.0); /* -> grey export icon */
}
.oi-celltable-export:hover img {
	filter: brightness(600%); /* -> white export icon */
}

/*Use for the Tool.ToolType of name "export". Must be !important or it is overwritten by the core gray theme for example. */
.x-tool-export {
	background-image:url(../pics/menu/export.svg)!important; 
	background-size: contain;
	filter: saturate(0.0); 
	margin-left: 5px;
	margin-right: 5px;
    margin-top: 5px;
}
.x-tool-export-over{filter: brightness(600%);}

.oi-chart-export {
    filter: saturate(0.0);
    cursor: pointer;
    margin-left: calc(100% - 27px);
    position: relative;
    margin-top: 10px;
    padding-bottom: 10px;
    z-index: 2; /* Otherwise its click event can not fire*/
}

.oi-chart-export:hover {
	filter: saturate(1.0);	
}

/* Any direct child div other than the one with the chart export icon should be on the same level as the icon */
.oi-chart-with-export > :not(div.oi-chart-export) {
    margin-top: -25px;
}

.oi-chart-export.oi-geo-chart-export {
    margin-top: 20px;
    padding-bottom: 0px;	
}

/******************************************************************************
	Some general info, success, warning, error div styles. 
/*******************************************************************************/
.information, .success, .warning, .error, .instruction, .notice, .draft, .published {
	border: none;
	margin-bottom: 5px;
	margin-right: 5px;
	padding: 10px 10px 10px 50px;
	background-repeat: no-repeat;
	background-position: 10px 10px;
	min-height: 30px;
	font-size: 14px;
	color: var(--notes-info-font-color);
}
div.information, div.success, div.warning, div.error, div.instruction, div.notice, div.draft, div.published {
 /* Repeated here for divs (as is usual) to avoid oi-pure-html to override the color if used (e.g. Known Issues Panel). */ 
 color: var(--notes-info-font-color);
}

.information, .success, .warning, .error, .instruction, .notice { /* Not for draft and published where we want to align directly. */
	margin-top: 5px;
	margin-left: 5px;
}

.oi-smaller-error-or-success {
	background-size: 16px;
	background-position: 2px 2px; 
	min-height: 0px; 
	margin-left: 0; 
	padding: 2px 2px 2px 20px;
}

.oi-medium-round-error-or-success {
	background-size: 16px;
	background-position: 4px 4px; 
	min-height: 0px; 
	margin-left: 7px; 
	padding: 4px 4px 4px 22px;
	border-radius: 4px;
}


/* Important if a button is applied to the respective ErrorOrSuccessPanel*/
.information .x-panel-body, .success .x-panel-body, .warning .x-panel-body, .error .x-panel-body, 
.instruction .x-panel-body, .notice .x-panel-body, .draft .x-panel-body, .published .x-panel-body {
	background-color: transparent;
}

.information {
	background-color: var(--notes-info-notice-background-color);
	background-image: url('../pics/other/information_white.svg');
}
.success {
	background-color: var(--success-background-color);
	background-image: url('../pics/other/success_white.png');
}
.warning {
	background-color: var(--warning-background-color);
	background-image: url('../pics/other/warning_white.svg');
}
.error{
	background-color: var(--error-background-color);
	background-image: url('../pics/other/error_white.svg');
}
.instruction {
	background-color: var(--instruction-background-color);
	background-image: url('../pics/other/instruction_white.png');
}
.notice {
	background-color: #5477B3; /* Non-AA: #567ebc;*/
	background-image: url('../pics/other/notice_white.png');
}
.draft {
	background-color: #757575;
	background-image: url('../pics/other/draft_white.png');
}
.published {
	background-color: var(--published-background-color);
	color: var(--published-text-color);
	background-image: url('../pics/other/published_white.png');
}

.oi-fit-content {
	width: fit-content!important; /*must be important to overwrite the auto-added inline widths including auto */
}

/******************************************************************************
 Hierarchical/non-hierarchical elements in review forms and resource displays
/******************************************************************************/

.oi-non-hierarchical-element, .oi-hierarchical-element, 
.oi-non-hierarchical-special-question-of-type-comment, .oi-hierarchical-special-question-of-type-comment, 
.oi-non-specialised-within-specialised-element,
.oi-standard-review-form-panel {
	padding: 5px 22px 3005px 5px; /* 22px required for the scrollbar*/
    /*3005px bottom padding applies the background-color to the whole table row, not just as far as the content of each element stretches. */
    margin-bottom: -3000px; /* Note the difference of 5px to have an actual visible padding at the bottom. */
    overflow: hidden;	
}

.oi-non-hierarchical-element, .oi-hierarchical-element, .oi-non-specialised-within-specialised-element {
	border-top: 1px solid #D0D0D0;
    border-collapse: collapse;	    
}

.oi-non-hierarchical-element {
    background-color: #FFFFFF;   
}

.oi-hierarchical-element {
	background-color: #F1F1F1;
}

.oi-non-hierarchical-special-question-of-type-comment, .oi-standard-review-form-panel {
    border: none;
    background-color: #FFFFFF;
}

.oi-hierarchical-special-question-of-type-comment {
    border-top-width: 0;
    background-color: #F1F1F1;
}

.oi-non-specialised-within-specialised-element {
    background-color: #EDEDED;   
}

.oi-multi-field-panel .x-panel-body {
	background: transparent;
}

.oi-without-borders-and-padding {
	border: none;
	background-color: #FFFFFF;
	
	padding: 0px 0px 3005px 0px;
    /*3005px bottom padding applies the background-color to the whole table row, not just as far as the content of each element stretches. */
    margin-bottom: -3000px; /* Note the difference of 5px to have an actual visible padding at the bottom. */
	margin-bottom: -3000px!important; /* Note the difference of 5px to have an actual visible padding at the bottom. */
}

.oi-gsq-and-document-review-section-surround {
	border: 1px solid rgb(181, 184, 200); /* Same grey as the text area border. */
	padding: 10px; /* For general SQs especially where less padding looks bad.*/
	font-size: 12px; /* Coincide with the popup content default to keep it consistent.*/
}

.oi-general-special-question-header, .oi-document-review-section-header {
	border: none;
	margin: 5px;
	padding: 5px;
	font-size: 14px;
	color: var(--secondary-light-color); 
	display: inline;
}

.oi-general-special-question-header {
	background-color: #5477B3; /*Non-AA: 567EBC*/
}

.oi-document-review-section-header {
	background-color: #B85B55; /*Non-AA: #DB6161;*/
}

.oi-specific-special-question-header {
	color: #5477B3; /*NOTE: Not the background! Non-AA: 567EBC*/
}

.oi-item-text, .oi-header-label {
	font-weight: bold;
	font-size: 12px;
	color: var(--default-text-color);
}

/******************************************************************************/

.changerequest-header {
	padding: 5px 5px 5px 5px;
	background-color: var(--disclosure-panel-header-background-color);
	color: var(--default-text-color);
}

.changerequest-descriptionandnotes {
	border-top: 1px solid #ccc;
}

.changerequest-notes-surround {
	border: 1px dotted #ccc;
	margin: 10px 20px 10px 10px;
	padding: 3px 10px 10px 10px;
}

.oi-changerequest-priority {color:#ef7c8e;}

.disclosure-panel-header {
	padding: 5px 5px 5px 5px;
	background-color: var(--disclosure-panel-header-background-color);
	color: var(--default-text-color);
}

.x-table-layout td{vertical-align:top;}

table.roundoutsideborder, div.roundoutsideborder {
    border: 2px solid #ccc;
    border-radius: 6px;
    background-color: var(--secondary-light-color);    /* Required for Chrome or it will display print in black!! */
}

table.oi-except-top-border, div.oi-except-top-border {
    border: 2px solid #ccc;
    border-top: none;
    border-radius: 0px;
    background-color: var(--secondary-light-color);    /* Required for Chrome or it will display print in black!! */
}

table.oireport {      
    border-spacing: 0px;
    font-family: Verdana,tahoma,arial,helvetica,sans-serif;
    font-size: 11px;
    word-wrap: break-word;
    vertical-align: top;
    border: none;
    max-width: 100%; 
}

.oireport {
    border: 2px solid #ccc;
    border-radius: var(--default-table-border-radius); 
    background-color: var(--secondary-light-color); /* Required for Chrome or it will display print in black!! */
    color: var(--default-text-color);
}
.oireport tr {
	vertical-align:top;
	background-color: var(--secondary-light-color); /* Required for Chrome or it will display print in black!! */
	border:none;
}
.oireport td {
    background-color: transparent; /* Required for Chrome or it will display print in black!! */
}

table.changerequest:hover, .oireport tr:hover {
    background-color: #e4e4e4!important;
    transition: all 0.1s ease-in-out;
}

.oireport td, .oireport th {
    border: 1px solid #ccc;
    padding: 10px;    
    vertical-align: top;
}

.oireport th, .oireport .oi-table-heading {
    background-color: #efefef;
    color: var(--vivid-color);
    border-top: 2px solid #ccc;
    font-weight: bold;       
    font-size: 14px;  
    font-family: Verdana,tahoma,arial,helvetica,sans-serif;   
}

.oireport th:first-child, .oireport tr:first-child td:first-child {
    border-top-left-radius: var(--default-table-border-radius);
}

.oireport th:last-child, .oireport tr:first-child td:last-child {
    border-top-right-radius: var(--default-table-border-radius);    
}

.oireport th:only-child{
    border-top-left-radius: var(--default-table-border-radius);
    border-top-right-radius: var(--default-table-border-radius);
    border-left: 2px solid #ccc;
    border-right: 2px solid #ccc;
}

.oireport tr:last-child td:first-child {
    border-bottom-left-radius: var(--default-table-border-radius);
}

.oireport tr:last-child td {
    border-bottom: 2px solid #ccc;
}

.oireport tr:first-child td, .oireport th {
    border-top: 2px solid #ccc;
}

.oireport td:first-child, .oireport th:first-child  {
	border-left: 2px solid #ccc;
}

.oireport td:last-child, .oireport th:last-child {
	border-right: 2px solid #ccc;
}

.oireport tr:last-child td:last-child {
   border-bottom-right-radius: var(--default-table-border-radius); /* define like this, so that if it is an only-child, both first-child and last-child border radiuses apply. */
}

h1.oireport {    
    font-size: 16px;
    font-weight: bold;
    padding-top:10px;
    border: none;
    box-shadow: none;
    color:var(--default-text-color);  
}

.oi-resource-display td, .oi-resource-display th { /*ResourceAdvancedDisplayPanel*/
    border: none;
    padding: 3px;    
    vertical-align: top;
}
.oi-resource-display-location { /*location display in ResourceAdvancedDisplayPanel*/
	border: 1px dotted lightgrey;
	padding: 5px;
    margin: 5px 0px 5px 20px;
    width: calc(100% - 40px);
}
div.oi-resource-display-location {
	width: calc(100% - 52px); /* if only one elment, not to exapnd, we have a direct div, not a table and need less width for this to end up at the same*/
} 

.oi-comment, span.oi-comment {
	font-size: 11px;
    font-style: italic;
    color: var(--unobtrusive-color);
}

.oi-entity-description {
	font-style: italic;
	font-size: 12px;
	color: #525252;	
}
        
.oi-no-border-margin-padding, .oi-no-border-margin-padding td, .oi-no-border-margin-padding tr {
	border:none!important; /*Req. to overwrite the oireport borders on td */ 
	margin:0;
	padding:0;
	background-color: transparent!important; /* Req. to overwrite this on oireport tr (on hover)*/
}
        
.oi-user-input-with-linebreaks {white-space: pre-wrap;} /* To preserve the textarea linebreaks. NB: This also needs to be in the table css @ ResourceSimpleHTMLGenerator*/        

.oireport .oitablemiddleheading { /* needs to be specific enough*/
	font-size: 13px; 
	font-weight: bold; 
	color: var(--secondary-light-color); 
	background-color: #888;	
}

.oi-discussion .x-column-layout-ct {
	border-radius: 6px;
}

.truncate {
  min-height: 90px;
  max-height: 155px;
  overflow: hidden;
  position: relative;
}

.truncate:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 35px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
}

/* If this is updated we also need to update the BACKGROUND_STYLE_xxxPANEL in the WestxxxPanel accordingly! */
.oi-template-panel {background-color: #FAF4EE;}
.oi-termset-panel {background-color: #F0FFF7;}
.oi-releaseset-panel {background-color: #F0E8F9;}

.oitermnotpreferred {font-style:italic !important;}
.oitermnotselectable {color: #808080 !important;}

.oi-no-tree-indent-for-invisible-root { margin-left: -14px;}

.oi-justify-end {display:flex; justify-content: flex-end; gap:3px; } /*right justify, gap is of it is more than one, e.g. a nested span.*/

/***********************************************************************************************
 GWT Date-Picker styling
************************************************************************************************/
.oi-all-labels-with-zero-z-index .x-form-item label{z-index:0;} /*This is 2 in the original css, however this then causes the datepicker to render below any such label text */

.gwt-DatePicker {
    border-image: none;
    border-color: #999999 #CCCCCC #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-style: solid;
    border-width: 1px;
    cursor: default;
    font-family: Verdana,tahoma,arial,helvetica,sans-serif;
    font-size: 80%;
}
.gwt-DatePicker td, .datePickerMonthSelector td:focus {
    outline: medium none;
}
.datePickerDays {
    background: none repeat scroll 0 0 var(--secondary-light-color);
    width: 100%;
}
.datePickerDay, .datePickerWeekdayLabel, .datePickerWeekendLabel {
    border-bottom: 1px solid #EDEDED;
    border-right: 1px solid #EDEDED;
    color: #333333;
    font-size: 85%;
    font-weight: bold;
    outline: medium none;
    padding: 4px;
    text-align: center;
}
.datePickerWeekdayLabel, .datePickerWeekendLabel {
    background: none repeat scroll 0 0 var(--secondary-light-color);
    color: #666666;
    cursor: default;
    font-size: 70%;
    font-weight: normal;
    padding: 0 4px 2px;
}
.datePickerDay {
    cursor: pointer;
    padding: 4px 7px;
}
.datePickerDayIsToday {
    background: royalblue;
    color: var(--secondary-light-color);
    padding: 3px;
}
.datePickerDayIsWeekend {
    background: none repeat scroll 0 0 #F7F7F7;
}
.datePickerDayIsFiller {
    color: #999999;
    font-weight: normal;
}
.datePickerDayIsValue {
    background: none repeat scroll 0 0 #D7DFE8;
}
.datePickerDayIsDisabled {
    color: #AAAAAA;
    font-style: italic;
}
.datePickerDayIsHighlighted {
    background: none repeat scroll 0 0 #F0E68C;
}
.datePickerDayIsValueAndHighlighted {
    background: none repeat scroll 0 0 #D7DFE8;
}

.datePickerMonthSelector {
    background: none repeat scroll 0 0 var(--secondary-light-color);
    padding: 1px 0 5px;
    width: 100%;
}
td.datePickerMonth {
    color: #333333;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.datePickerPreviousButton, .datePickerNextButton {
    color: #3A6AAD;
    cursor: pointer;
    font-size: 120%;
    font-weight: bold;
    line-height: 1em;
    outline: medium none;
    padding: 0 4px;
}
.gwt-DateBox {
    border-image: none;
    border-color: #999999 #CCCCCC #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-style: solid;
    border-width: 1px;
    font-size: 80%;    
    padding: 1px;
    width: 80px;
    height: 16px;
}
.gwt-DateBox input {
    width: 5em;
}
.dateBoxFormatError {
    background: none repeat scroll 0 0 #FFCCCC;
}

/**** Combobox styling ****>
/*   For Safari and Chrome to always display the date picker and combobox field on the right */
.ext-safari .x-form-field-wrap .x-form-trigger {right: auto !important;}

/* gwt-ext combobox list style to fit the content of the list up to a max-width. Needs important flag to overwrite the generic gwt-ext behaviour (not css!).*/
.oi-combobox-max-content-list, .oi-combobox-max-content-list .x-combo-list-inner {
    width: max-content!important;
    max-width: 450px!important;
}
.oi-combobox-small-min-width-list .x-combo-list-inner{
	min-width: 158px; /*typical smaller box size*/
}
.oi-combobox-large-min-width-list .x-combo-list-inner{
	min-width: 248px; /*typical larger box size*/
}
.oi-combobox-medium-min-width-list .x-combo-list-inner{
	min-width: 198px; /*typical medium box size*/
}

.x-combo-list-item {
    padding: 3px 5px 3px 3px;
}

.x-form-field-wrap .x-form-text {
	vertical-align: top; /*aligns the select box field with its trigger */
}

.x-form-field-wrap, textarea.x-form-field, .x-form-field-wrap .x-form-text, .x-form-focus, input:focus, textarea:focus, .x-form-element:focus, .x-form-item:focus { 
	outline:none;
	border-radius:0; /*This is not the default on ios and with a trigger on the right looks bad then with rounded corners. */  
}

.x-form-trigger.x-form-arrow-trigger  {
	background: url(../pics/other/expand_single_small.png) no-repeat,
			linear-gradient(to top, #DCDCDC 0%, #FFFFFF 100%);
	background-position: calc(100% - 1px) center; 
	border-right: 1px solid #acacac;
	border-bottom: 1px solid #acacac;
	border-top: 1px solid #acacac;
	border-left: none;
}
.x-form-field-wrap .x-form-trigger, .ext-safari .x-form-field-wrap .x-form-trigger{ /*Note: the ext-safari is required to overwrite from base css!*/
	height: 20px;
}

.x-trigger-wrap-focus .x-form-trigger.x-form-arrow-trigger,  .x-form-trigger.x-form-arrow-trigger.x-form-trigger-over{
	background: url(../pics/other/expand_single_small.png) no-repeat,
			linear-gradient(to top, #FFFFFF 0%, #DCDCDC 100%);
	background-position: calc(100% - 1px) center; 
}

.x-form-trigger.x-form-arrow-trigger.x-form-trigger-click {
	background: url(../pics/other/expand_single_small.png) no-repeat, var(--secondary-light-color); 
	background-position: calc(100% - 1px) center;  
}

.x-trigger-wrap-focus .x-form-trigger {
	border-right: 1px solid #7eadd9;
	border-bottom: 1px solid #7eadd9;
	border-top: 1px solid #7eadd9;
	border-left: none;
}

.x-form-field-wrap .x-form-search-trigger {
	background: url(../pics/menu/magnifier.svg) no-repeat;
	background-position: center center;
	background-size: contain;
	border:none;
}
.x-form-field-wrap .x-form-clear-trigger {
    background: url(../pics/other/closeWindow.png) no-repeat;
	background-position: center center;    
	border:none;
}

.x-form-field-wrap .x-form-search-trigger:active, .x-form-field-wrap .x-form-search-trigger:hover, 
.x-form-field-wrap .x-form-clear-trigger:active, .x-form-field-wrap .x-form-clear-trigger:hover {
    filter: brightness(140%); /* was 600 but this doesn't work well if the background is white already when searching for a user for example */
}

.x-toolbar.x-small-editor .x-form-text.x-form-field {
	height:18px!important; /*In search bar of a grid, e.g. user search*/
}

.x-form-text, textarea.x-form-field {
	background: #fff; 
}

.x-form-empty-field{
	color:#757575; /* WCAG AA minimum requirement. */
}

/***********************************************************************************************
 GWT Listbox, GWT Disclosure Panel, Radio Button styling
************************************************************************************************/

.gwt-ListBox { 
	font-size:12px;
    padding: 3px 0px 0px 3px;
    line-height: 18px;
    vertical-align: middle;
 
   	appearance: none; /* Removes default arrow. */
	
	/* background with the right hand arrow and a right hand gray color of 18px - in contrast to the other combobox, no top-down gradient, but otherwise very similar */
	background: url(../pics/other/expand_single_small.png) no-repeat, 
				linear-gradient(to right, #FFFFFF calc(100% - 18px), #DCDCDC calc(100% - 18px), #DCDCDC 100%);
	background-position: calc(100%) center;
	border: 1px solid #acacac;   
}

.gwt-ListBox-surround {
	margin-bottom: 10px;
}

.gwt-ListBox:hover { 
	border: 1px solid #7eadd9;
}

select.gwt-ListBox option {
	color: var(--default-text-color);
    background: var(--secondary-light-color);
 }

.gwt-DisclosurePanel, .gwt-DisclosurePanel-open, .gwt-DisclosurePanel-closed {}

.gwt-DisclosurePanel .header,
.gwt-DisclosurePanel .header a,
.gwt-DisclosurePanel .header td {
  text-decoration: none;  /* Remove underline from header */
  font-size:12px;
  font-weight:bold;
  color:var(--default-text-color);
  cursor: pointer;
}

.gwt-DisclosurePanel .content {
  padding: 4px 0px 4px 8px;
  /*margin-left: 6px; would stuff up 100% layouts e.g. in a flex table*/
}

.x-form-label-top .x-form-item label { /*labels in forms*/
    color: var(--default-text-color);
}

/********************************
Styling our checkboxes
********************************/

.gwt-CheckBox input, 
.x-tree-node-el input[type="checkbox"],
.x-form-check-wrap input[type="checkbox"] {
	appearance: none; /* Removes default appearance of the checkbox. */ 
	
	background-color: var(--secondary-light-color);
	border: 1px solid rgb(181, 184, 200);
	border-radius: 0px;
	padding: 6px;
	display: inline-block;
	position: relative;
	cursor: pointer;
}

.gwt-CheckBox.left-label label {
	float: left;
	padding: 0 3px 0 0;
}

.gwt-CheckBox.right-label label {
	float: right;
	padding: 0 0px 0 3px;
}

.gwt-CheckBox.auto-width label {
	width: auto;
}

.gwt-CheckBox.fixed-width label {
	width: 120px; /* The only width currently needed and supported. Cannot be set otherwise. */
}

.gwt-CheckBox input:active, .gwt-CheckBox input:checked:active,
.x-tree-node-el input[type="checkbox"]:active, .x-tree-node-el input[type="checkbox"]:checked:active
.x-form-check-wrap input[type="checkbox"]:active, .x-form-check-wrap input[type="checkbox"]:checked:active {
	opacity: 0.75;
}

.gwt-CheckBox input:checked::after,
.x-tree-node-el input[type="checkbox"]:checked::after,
.x-form-check-wrap input[type="checkbox"]:checked::after {
	content: '';
    position: absolute;
    width: 8px;
    height: 4px;
    background: transparent;
    top: 2px;
    left: 1px;
    border: 2px solid #70AD47; /*#567ebc;blue*/ 
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}

.gwt-CheckBox-undecided input:not(:checked)::after {
	content: '';
    position: absolute;
    width: 8px;
    height: 4px;
    background: transparent;
    top: 2px;
    left: 1px;
    border: 2px solid #ddd; /*#567ebc;blue*/ 
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}

.gwt-CheckBox-disabled {
	opacity: 0.5;
}

.x-grid3-body .x-grid3-td-checker {
	background-image: none; /*Or the checkboxes in grids have this weird background*/
}

.x-grid3-hd-row td.x-grid3-td-checker {
    padding-left: 1px;
}

.x-grid3-row .x-grid3-row-checker, .x-grid3-hd-checker {
	background-image: url(../pics/other/unchecked.png);
	background-position: 0px 0px;
	cursor: pointer;
}
.x-grid3-row-selected .x-grid3-row-checker, .x-grid3-hd-checker-on .x-grid3-hd-checker {
    background-image: url(../pics/other/checked.png);
    background-position: 0px 0px;
    cursor: pointer;
}

td.x-grid3-hd-over, td.sort-desc, td.sort-asc, td.x-grid3-hd-menu-open {
	border-color: var(--vivid-border-color);
}

.x-grid-empty {
   color:#757575; /* WCAG AA minimum requirement. */
}

.x-grid3-check-col{background-image:url(../pics/other/unchecked.png);}
.x-grid3-check-col-on{background-image:url(../pics/other/checked.png);}

/***** Checkboxes in menu items and grids ******/
.x-menu-check-item .x-menu-item-icon {background: transparent url(../pics/other/unchecked.png) no-repeat center;} /* As required for e.g. the remember me menu check item */
.x-menu-item-checked .x-menu-item-icon {background-image: url(../pics/other/checked.png);}
.x-menu-group-item .x-menu-item-icon {background: transparent;} /* Otherwise a checkbox is displayed behind the menu check item's icon.*/
/*.x-menu-item-checked .x-menu-group-item .x-menu-item-icon {background: transparent url(../pics/other/checked.png) no-repeat center;}*/
.x-menu-item-checked .x-menu-group-item .x-menu-item-icon {
    background-image: url(../pics/other/group-checked.png);
    /*as an alternative: background-color: #70AD47; box-shadow: inset 0 0 0 3px white;border-radius: 50%; } */  
}
.xg-hmenu-sort-asc .x-menu-item-icon {background-image: url(../pics/menu/sortAscending.png);}
.xg-hmenu-sort-desc .x-menu-item-icon {background-image: url(../pics/menu/sortDescending.png);}

/***** Radio Button styling *********/

.gwt-Label {
	font-size:12px;    
}

.gwt-RadioButton {
	font-size:12px;
    padding: 3px 3px 3px 0px;
    white-space: nowrap; /* Avoids breaks between the radio and its label. */ 
}
.gwt-RadioButton-disabled {
    color: #888;
}
.gwt-RadioButton input {
	vertical-align: text-bottom;
}

.gwt-RadioButton input, 
.x-form-check-wrap input[type="radio"] {
	appearance: none;
	
	background-color: var(--secondary-light-color);
	border: 1px solid rgb(181, 184, 200);
	border-radius: 50%;
	padding: 6px;
	
	display: inline-block;
	position: relative;
	margin-right: 1px;
	cursor:pointer;
}

.gwt-RadioButton input:active, .gwt-RadioButton input:checked:active,
.x-form-check-wrap input[type="radio"]:active, .x-form-check-wrap input[type="radio"]:checked:active {
	opacity: 0.75;
}

.gwt-RadioButton input:checked,
.x-form-check-wrap input[type="radio"]:checked {
  	background-color: #70AD47; /*#567ebc;*/
  	box-shadow: inset 0 0 0 2px var(--secondary-light-color); /* ensure that there is a white inner border in between the grey border and the green inner circle*/
  	transition: background-color 1s ease;
}

.gwt-RadioButton label {
	margin-left: 3px;
}

/* GWT TEXT box styling */
.gwt-TextBox {
	border: 1px solid #B5B8C8;
	color: var(--default-text-color);
}

/***********************************************************************************************
 Popup and temporary notification panels
************************************************************************************************/ 
.gwt-PopupPanel {
    /*border:1px solid #ACACAC; border-radius: 4px; background-color: #E9F2FF; */
    border:2px solid #ACACAC; border-radius: 0px; background:var(--secondary-light-color); 
    z-index:20000; /* needed or icons may be above it */ 
    margin-right: 10px; /* avoid that it stretches to the end of the browser window */
}
.gwt-PopupPanel .popupContent {
    font-size:12px; /* should ideally be the same as for the oi-gsq-and-document-review-section-surround, so that the text displays identically inline and in the popup */
    margin:10px;
}

.temporary-notification-panel {
    border:2px solid #ACACAC;
    border-radius: 0px;
    background:var(--secondary-light-color);    
    z-index:20000; /* needed or icons may be above it */
}
.temporary-notification-panel .popupContent {
    font-weight: bold;
    font-size: 14px;
    margin: 7px;
    padding: 7px;
}

/***********************************************************************************************
 Windows
***********************************************************************************************/

.x-window-tc, .x-window-tl, .x-window-tr, .x-window-bc, .x-window-bl, .x-window-br, .x-window-ml, .x-window-mr, .x-window .x-window-mc {
	background: var(--window-header-background-color); 
}

.x-window .x-window-body {
	background: white;
}

.x-window .x-window-header, .x-window-tl .x-window-header, .x-window-dlg .x-window-header-text {
	background: var(--window-header-background-color); 
	color: var(--window-header-color);
    font-size: 15px;
}

.x-window-dlg .ext-mb-text { /* Body text in the window*/    
    color: var(--default-text-color);
    font-size: 12px;
} 

.x-window {
	border: 1px solid var(--window-border-color);
	min-width: 225px; /*Sometimes the windows seems to be very small, this may help to prevent the worst*/
}

/***********************************************************************************************
 Tooltip Styling
************************************************************************************************/

.x-tip {
    border:2px solid #ACACAC;
    border-radius: 0px;
    background:var(--secondary-light-color); 
    padding: 8px;
}
.x-tip .x-tip-tl {
    background: transparent none no-repeat 0 0;
    padding-left: 0px; 
}
/* The following three are for the little arrow to be able to exist AND have a border on its own.
 * If not desired, can be disabled by adding tip-no-arrow as class to the tooltip. */
.x-tip:not(.tip-no-arrow)::after , .x-tip:not(.tip-no-arrow)::before {
    bottom: 100%;
    left: 15px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.x-tip:not(.tip-no-arrow)::after {
    border-color: transparent;
    border-bottom-color: var(--secondary-light-color);
    border-width: 8px;
    margin-left: -8px;
}	
.x-tip:not(.tip-no-arrow)::before {
    border-color: transparent;
    border-bottom-color: #ACACAC;
    border-width: 11px;
    margin-left: -11px;
}

.x-tip.tip-bottom-arrow::after , .x-tip.tip-bottom-arrow::before {
	bottom: 0%;
	top: 100%;
}
.x-tip.tip-bottom-arrow::after {
    border-color: transparent;
    border-top-color: var(--secondary-light-color);
}
.x-tip.tip-bottom-arrow::before {
    border-color: transparent;
    border-top-color: #ACACAC;
}

.x-tip.tip-top-right-arrow::after , .x-tip.tip-top-right-arrow::before {
	right: 80px;
	left:unset;
}
.x-tip.tip-top-right-arrow::after {
    margin-right: -48px;
    margin-left: unset;
}
.x-tip.tip-top-right-arrow::before {
    margin-right: -51px;
    margin-left: unset;
}

.x-tip .x-tip-tc{background:transparent none no-repeat 0 0;padding-top:3px;}
.x-tip .x-tip-tl{background:transparent none no-repeat 0 0;padding-left:6px;}
.x-tip .x-tip-tr{background:transparent none no-repeat 0 0;padding-right:6px;}
.x-tip .x-tip-bc{background:transparent none no-repeat 0 0;height:3px;}
.x-tip .x-tip-bl{background:transparent none no-repeat 0 0;padding-left:6px;}
.x-tip .x-tip-br{background:transparent none no-repeat 0 0;padding-right:6px;}
.x-tip .x-tip-ml{background:transparent none no-repeat 0 0;padding-left:6px;}
.x-tip .x-tip-mr{background:transparent none no-repeat 0 0;padding-right:6px;}

.x-tip .x-tip-body::first-letter {text-transform: capitalize;}

.x-tip hr, .oi-hr hr {border: 0; height: 1px; background-image:linear-gradient(to right, #555555, #555555, #f2f2f2);}


/** Use oi-tooltip in combination with x-tip where an x-tip cannot directly be applied (server side rendering). 
Usage: <div class="oi-tooltip"><img src="..."><div class="oi-tooltip-text x-tip">The tooltip text, on the sibling img tag.</div></div>
*/
.oi-tooltip {
  position: relative;
  display: inline-block;
}

.oi-tooltip .oi-tooltip-text {
  visibility: hidden;
  top:22px; 
  left: -3px;
  opacity: 0;
  transition: opacity 0.5s;
  min-width: 200px;
  max-width: 400px;
}

.oi-tooltip:hover .oi-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.oi-overflow-visible-descendants * {
	overflow:visible;
}

/* Readonly boxes to not have a border but be simple texts - if a combobox however we need the border. */
:not(.x-combo-noedit).x-form-text[readonly], textarea.x-form-field[readonly], :not(.x-combo-noedit).x-form-focus[readonly], textarea.x-form-focus[readonly] {
    border: none;
    background:#fff;
}
.oi-extra-top-padding-for-fields .x-form-text[readonly], .oi-extra-top-padding-for-fields textarea.x-form-field[readonly], 
.oi-extra-top-padding-for-fields .x-form-focus[readonly], textarea.x-form-focus[readonly] {
    padding-top:5px; /*Due to the border not being displayed it looks too far to the top compared to a label of a textfield otherwise if label is left. This only seems to be required for FieldSets or MultiFieldPanels or so.*/
}

.review-textarea {
	border: 1px solid #B5B8C8 !important; /* Always show a border for the review textarea, even if disabled for example. */
}

.code-textarea {
	font-family: Tahoma, Consolas, Monaco, 'Ubuntu Mono', monospace; /*Tahoma is not monospaced, but looks quite good for this*/
	line-height: 1.5;
	/*color: #263e62;*/
	font-size: 14px;
}

textarea.review-textarea + .x-form-invalid-icon { /* + means the adjacent sibling */ 
	display:none!important; /* To not show the invalid icon which moves behind the scrollbar anyway. Needs to be important as the toolkit is setting styles directly on it.*/
}

.userpic {border-style: solid; border-width: 1px; border-color: grey; border-radius: 6px;}
.userpicsmall {border-width: 0px; border-radius: 6px; padding-top: 1px;} 

.invisible {visibility:hidden!important; height:0px!important; width:0px!important;}
.oi-city {visibility:hidden!important; margin:0px!important; padding:0px!important;}

/***********************************************************************************************
 Some basic styles for annotations in templates, including for special html fragments 
************************************************************************************************/
.annotation-simple {color:#416aa3; margin-top:5px; font-style: italic; border-style: none; font-size:11px; 
    word-break: break-word; /*non-standard, but required to use for webkit*/
    word-wrap: break-word; 
    overflow-wrap:break-word;
}
.annotation-simple img, .annotation-simple table {max-width:100%; vertical-align: top;}
.annotation-simple img {height: auto!important;} /*Otherwise it wouldn't resize the height proportionally if an explicit height is set in the html fragment.*/

.annotation-simple table {border-collapse: collapse;}
.annotation-simple td, .annotation-simple th {border: 1px solid #ccc; padding: 2px; vertical-align: top;}
.annotation-simple th {background-color: #efefef; color: #474747;font-weight: bold;}
.annotation-simple p, .annotation-simple h1, .annotation-simple h2, .annotation-simple h3, .annotation-simple h4, .annotation-simple h5, .annotation-simple h6 {
	color:#416aa3;  margin:0px; /*overwrites parallel applied oi-pure-html setting of this.*/
}
div.annotation-simple {padding-bottom: 8px;}

.annotation-simple.annotation-key {color:var(--secondary-light-color); background-color: #416aa3; font-weight:bold; border-radius:3px; padding: 2px 4px 2px 2px;}

.oi-tooltip-or-window-large{max-height:95%; max-width: 90%; overflow:auto!important;} /*max-width to be overwritten as required by the tooltip*/

/***********************************************************************************************
 Various Button Styling and related 
************************************************************************************************/
.oi-button-normal .x-btn-left, .oi-button-normal .x-btn-right,  .oi-button-normal .x-btn-center,
.x-window-footer .x-btn-left, .x-window-footer .x-btn-right,  .x-window-footer .x-btn-center { /* window footer is for MessageBox buttons. */
    background:none;
}

.oi-button-normal, .x-window-footer .x-btn {
	/* window footer is for MessageBox buttons.*/
	padding: 2px;
	border: solid 1px var(--btn-border-color);
	background: linear-gradient(to top, #DCDCDC 0%, #FFFFFF 100%);
}

.x-window-footer .x-btn { /* window footer is for MessageBox buttons. */
	min-width: 70px;
	padding: 2px;
}

.oi-button-normal .x-btn-text, .oi-button-normal .x-btn-text-icon {	
	background: none;
	font-size: 12px;
	color: var(--btn-normal-font-color);
}

.oi-button-gwt-extra-padding {
	padding: 6px;
	text-decoration: none;
}

.x-window-footer .oi-button-important-ok, .oi-button-important-ok { 
    padding: 2px;
    text-decoration: none;
    letter-spacing: 1px;
    background: #567ebc; 
    background: linear-gradient(to top, #444 0%, #567ebc 100%);
    background-repeat: no-repeat; 
}

.x-toolbar .oi-button-important-ok .x-btn-text, .oi-button-important-ok .x-btn-text {
	font-size: 14px; 
    font-weight:bold;
    color: var(--secondary-light-color); 
}

.oi-button-normal:hover, 
.x-window-footer .x-btn:hover {
	filter: brightness(110%) saturate(2); 
}
.oi-button-normal:active, 
.x-window-footer .x-btn:active {
	filter: brightness(115%) saturate(2);
}

/*The important buttons can get more extra brightness than the normal ones because of the brightness of their original color. */ 
.x-window-footer .oi-button-important-ok:hover, 
.oi-button-important-ok:hover,
.x-window-footer .oi-button-important-ok:hover .x-btn-text, 
.oi-button-important-ok:hover .x-btn-text, 
.oi-button-important-ok:hover .x-btn-text-icon { 
    filter: brightness(115%); /* We used to do sth like background: var(--secondary-light-color);*/ 
}

.x-window-footer .oi-button-important-ok:active, 
.oi-button-important-ok:active,
.x-window-footer .oi-button-important-ok:active .x-btn-text, 
.oi-button-important-ok:active .x-btn-text, 
.oi-button-important-ok:active .x-btn-text-icon {
	filter: brightness(125%);
}

.oi-button-important-ok-disabled {
    cursor:default;
    opacity:.6;
}

.oi-button-quick-task .x-btn-center:before {
	content:">";
	position: relative;
    left: 130px;
}

.oi-button-quick-task .x-btn-center {
    text-align:left;
    padding: 0px;
    position: relative;
    left: -5px; 
}


/******* YES/NO/DEFAULT Toggle Button Group *****/
.gwt-ToggleButton {min-width:20px;}
.gwt-ToggleButton-down {color:var(--secondary-light-color);}
.gwt-ToggleButton-down-hovering, .gwt-ToggleButton-up-hovering {color:var(--secondary-light-color); /*box-shadow: inset 0 0 0 1px var(--secondary-light-color);*/}

/*.oi-yes-btn {background: linear-gradient(to top, rgb(103, 174, 85) 0%, rgb(87, 136, 67) 100%); }*/
.oi-yes-btn {border-radius: 6px 0 0 6px; border-right: 1px rgb(194, 194, 194) dotted;}
.oi-yes-btn.gwt-ToggleButton-down-hovering, .oi-yes-btn.gwt-ToggleButton-up-hovering {background: var(--gwt-toggle-btn-up-background-color); filter: brightness(115%);}
.oi-yes-btn.gwt-ToggleButton-down {background: linear-gradient(to top, rgb(87, 136, 67) 0%, rgb(103, 174, 85) 100%);}

/*.oi-default-btn {background: linear-gradient(to top, #DCDCDC 0%, #FFFFFF 100%); }*/
.oi-default-btn {border-left:0px; border-right:0px;}
.oi-default-btn.gwt-ToggleButton-down-hovering, .oi-default-btn.gwt-ToggleButton-up-hovering  {background: var(--gwt-toggle-default-btn-up-background-color); filter: brightness(115%);}
.oi-default-btn.gwt-ToggleButton-down {background: linear-gradient(to top, #AAA 0%, #777 100%);}

/*.oi-no-btn {background: linear-gradient(to top, #C11B17 0%, #990012 100%);} */
.oi-no-btn {border-radius: 0 6px 6px 0; border-left:1px rgb(194, 194, 194) dotted;}
.oi-no-btn.gwt-ToggleButton-down-hovering, .oi-no-btn.gwt-ToggleButton-up-hovering  {background: var(--gwt-toggle-no-btn-up-background-color); filter: brightness(115%);}
	
.oi-no-btn.gwt-ToggleButton-down {background: linear-gradient(to top, #990012 0%, #C11B17 100%);}

.gwt-ToggleButton-up-disabled, .gwt-ToggleButton-down-disabled {cursor: default; opacity: .6; color:gray; background: linear-gradient(to bottom, #DCDCDC 0%, #FFFFFF 100%);} /* to bottom - this is the hover style already so that it won't change on hover when disabled*/

/* ICON only small buttons styling */
.small-button {width: 15px!important; height:15px!important;}
.small-button .x-btn-left, .small-button .x-btn-right {visibility: hidden!important; width: 1px!important; height:15px!important; background:none no-repeat 0 0!important;}
.small-button .x-btn-center{height:15px!important; background:none no-repeat 0 0!important;}
.small-button .x-btn-icon {height:15px!important; background-repeat:no-repeat!important;}

.oi-round-button{border-radius:15px; margin:3px;}

.smaller-button-bar .x-panel-btns-ct {padding:0px!important;}
.smaller-button-bar td.x-panel-btn-td {padding:0px!important;}

/** Toolbar important button styling */
.x-toolbar .x-btn-over.oi-button-important-ok .x-btn-left, /* Note that there is no space between over and oi-button...!*/
.x-toolbar .x-btn-over.oi-button-important-ok .x-btn-center ,
.x-toolbar .x-btn-over.oi-button-important-ok .x-btn-right {
	background: none;
}

/*AddToAny button */
img.in-a-href-button-align {
	vertical-align: text-bottom;  
}

/* A toggle button in the RTA Toolbar that has been pressed. */
.x-btn-wrap.x-btn.oi-button-normal.x-btn-icon.x-btn-pressed  { 
  background-color: #67910b !important; /*to degrade nicely*/
  background: linear-gradient(to top, #7fb52f 0% ,#67910b 100%)!important;
}


/***********************************************************************************************
 (GWT) File Input/Upload Styling 
************************************************************************************************/

.oi-label-for-fileupload {
   font: normal 12px tahoma,verdana,helvetica,sans-serif;
    padding: 5px 10px 5px 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

/***********************************************************************************************
 To overwrite the ugly messagebox icons
************************************************************************************************/
.x-window-dlg .ext-mb-info{background:transparent url(../pics/other/information.svg) no-repeat top left/32px 32px;}
.x-window-dlg .ext-mb-warning{background:transparent url(../pics/other/warning.svg) no-repeat top left/32px 32px;}
.x-window-dlg .ext-mb-question{background:transparent url(../pics/other/question.svg) no-repeat top left/32px 32px;}
.x-window-dlg .ext-mb-error{background:transparent url(../pics/other/error.svg) no-repeat top left/32px 32px;}

.x-window-dlg .oi-logout{background:transparent url(../pics/menu/logoff.svg) no-repeat top left/32px 32px;}

/* Field Sets. */
.x-fieldset { 
    border-radius: 0px; /* was 6px for all*/
    padding: 10px 10px 5px 10px; /*reduce the bottom padding, this looks better and saves some sometimes vertical space*/
}

/* Field set header*/
.x-fieldset legend {
	font-size: 13px;
	color: var(--default-text-color); 
	font-variant: small-caps;
}

/***********************************************************************************************
 To overwrite the accordion toggles and window/tab close icons
************************************************************************************************/
.x-panel .x-accordion-hd .x-tool.x-tool-toggle, .x-panel .x-tool.x-tool-toggle  {
	background: transparent url(../pics/other/collapse_single.svg) no-repeat top left/contain;
	margin-right: 5px;
    margin-top: 5px;
}
.x-panel-collapsed .x-accordion-hd .x-tool.x-tool-toggle, .x-panel-collapsed .x-tool.x-tool-toggle {
    background: transparent url(../pics/other/expand_single.svg) no-repeat top left/contain;
}

.x-tool-toggle:active, .x-tool-toggle:hover, 
.x-tool-help:active, .x-tool-help:hover, 
.x-tool-refresh:active, .x-tool-refresh:hover {
    filter: brightness(600%);
}

.x-tool.x-tool-help {
    background: transparent url(../pics/other/helpTool.png) no-repeat top left;
}

.x-tool.x-tool-refresh {
    background: transparent url(../pics/other/refreshTool.png) no-repeat top left;
}

.x-tool.x-tool-close {
    background: transparent url(../pics/other/closeWindow.png) no-repeat center center;
    padding: 1px;
    filter: var(--close-x-window-filter); /*config Alert X needs to stand out in all themes. */
}

.x-tool.x-tool-close-over {
    background-color:#FF1414; 
    filter: brightness(600%);
}

.x-tab-strip .x-tab-strip-closable a.x-tab-strip-close,
.x-tab-strip .x-tab-strip-closable a.x-tab-strip-close:hover {
    background: url(../pics/other/closeTab.png) no-repeat center center;
    padding: 1px;
}

.x-tab-strip .x-tab-strip-closable a.x-tab-strip-close:hover {
	background: url(../pics/other/closeTab.png) no-repeat center center;
	background-color: var(--tab-strip-closable-background-color); 
    filter: brightness(600%); /*Also brightens the closeTab.png*/
}

.x-tab-strip .x-tab-strip-closable a.x-tab-strip-close:active {
	background: url(../pics/other/closeTab.png) no-repeat center center;
	background-color: var(--tab-strip-closable-background-color); 
    filter: brightness(700%); /*Also brightens the closeTab.png*/
}

/***********************************************************************************************
 For South Panel collapsing. 
***********************************************************************************************/
.x-layout-split-south .x-layout-mini {
    position: absolute;
	top: 5px;
	left: auto;
	right: 0px;
    height: 20px;
    width: 22px;
    background: transparent url(../pics/other/closeTab.png) no-repeat center center;
}

.oi-temporary-notification ~ div.x-layout-split-south .x-layout-mini  { 
/* ~ selects any subsequent sibling after oi-temporary-notification. If we have a temporary notification, we want top make the X to close the panel more obvious. */
	filter: brightness(600%); /* Also brightens the background color and img. This is why the original background color needs to be black. */
    background-color: black;
}

.x-layout-split-south .x-layout-mini:active, .x-layout-split-south .x-layout-mini:hover,
.oi-temporary-notification ~ div.x-layout-split-south .x-layout-mini:active,
.oi-temporary-notification ~ div.x-layout-split-south .x-layout-mini:hover {
    background-color: var(--tab-strip-closable-background-color); 
    filter: brightness(600%); /* Also brightens the background img, */
}

.x-layout-cmini-south .x-layout-mini:active, .x-layout-cmini-south .x-layout-mini:hover {
    opacity: 1;
    background-color: #444;
    filter: brightness(2);
}


.oi-outage-imminent {
  animation-duration: 1.5s;
  animation-name: oi-slight-expand, oi-slight-blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes oi-slight-expand {
	from {
  		transform: scale(0.9);
    	transition-timing-function: ease-in;
  	}
  	to {
    	transform: scale(1.0);
    	transition-timing-function: ease-in;
	}
}

@keyframes oi-slight-blink {
	from {
		opacity: 0.85;
		transition-timing-function: ease-in;
	}
	to {
		opacity: 1.0;
		transition-timing-function: ease-in;
	}
}

/* Tab overflow scrolling to the left and right. */
.x-tab-scroller-left:before, .x-tab-scroller-right:before{
	font-size: 16px;
	color: white;
	vertical-align: middle;
    left: 3px;
    position: relative;
}
.x-tab-scroller-left:before {
    content: "<";
}
.x-tab-scroller-right:before {
     content: ">";
}
.x-tab-scroller-left, .x-tab-scroller-right {
    background: none;
    background-color: var(--tab-panel-header-and-footer-border-color);
    border-bottom: 1px solid var(--tab-panel-header-and-footer-border-color);
   /* border-bottom: 2px solid var(--vivid-color);*/
}
.x-tab-scroller-left:hover, .x-tab-scroller-right:hover {
	filter: opacity(0.7); /*Works better for all themes than brightness;*/ 
}
.x-tab-scroller-left:active, .x-tab-scroller-right:active {
	filter: opacity(0.5);
}

/***********************************************************************************************
 Google visualisation ORGChart styling - required.
***********************************************************************************************/

 .google-visualization-orgchart-lineleft {
  border-left: 2px solid grey!important;
}

 .google-visualization-orgchart-lineright {
  border-right: 2px solid grey!important;
}
 .google-visualization-orgchart-linebottom {
  border-bottom: 2px solid grey!important;
}

.google-visualization-orgchart-node-small{
    padding:2px!important;
}
.google-visualization-orgchart-table * {
    margin: 0;
    padding: 2px 0px!important; /* removes the horizontal padding on items without content - i.e. only taking up space. */
}



/***********************************************************************************************
The sticky notes styling 
***********************************************************************************************/
.oi-notes li {
    position: relative;
    min-height: 35px;
    min-width: 210px; /* Not more or it will stuff up termset summary view of SQs and comments. */ 
    margin: 0px; /* 5 for .notes*/
    padding: 10px; /* 15 for .notes */
    color: var(--notes-info-font-color);
    background-color:var(--notes-info-notice-background-color);
    /*border: 1px solid #a5bede;*/
    text-align: left;
    font-size: 14px;
    word-break: break-word; 
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.oi-notes li a { /* To ensure it is applied.*/
	color: var(--notes-info-font-color);
}
.oi-notes li p {
    overflow:hidden;
}

.small-bottom li  {
	margin-bottom: 5px!important;
}

.three-lines-min .instruction  {
    min-height:51px!important; /* This is equal to three rows in firefox (chrome only uses 42) - needs to be this way during review round creation to ensure three rows at least. */
}

.oi-white-background .x-window-body { /*e.g. to display the modify classification window background in white*/
    background: none repeat scroll 0% 0% var(--secondary-light-color);
}

.x-btn-text-icon .x-btn-center .x-btn-text, .x-btn-icon .x-btn-center .x-btn-text,
.x-btn-text-icon.small-button.oi-round-button .x-btn-center .x-btn-text, .x-btn-icon.small-butto.noi-round-button .x-btn-center .x-btn-text {
	background-position:left center; /*This is so that user icons that are not high enough when resized are displayed properly in the center, overrides ext-all l. 240*/
	background-size: auto 16px; /*This is required for svg - automatically resizes so that it fits, even if not square, but portrait (for landscape it would need to be the other way round). */
} 

.x-btn-text-icon.small-button .x-btn-center .x-btn-text, .x-btn-icon.small-button .x-btn-center .x-btn-text {
	background-size: auto 10px; /* Req. for the more_info.png as background of a button - but not for oi-round-button */
} 

.oi-userpic-btn button, .oi-center-aligned {
	display: flex;
    align-items: center;
}

.oi-userpic-btn img {
	min-width: 10px; /* To ensure it is not too small AND to ensure there is a minimum width used for calculating the toolbar position before the userpic is loaded. */
	max-width: 18px;
	min-height: 10px;
	max-height:18px;
}

.x-tab-with-icon .x-tab-strip-text {
	background-size: 16px 16px; /* For icons in the ckm tabs, req. for svgs. */
} 
 
.x-tab-strip-text img { /* For icons that are added as img tags in the tab title - e.g. the left hand resources panels.*/
	vertical-align:bottom;
	padding-right: 4px;
}
 
/* The checkbox and label are slightly unaligned by 2px, also if adding something else in the same row it is unaligned by approx. 5px.*/
.x-form-checkbox {
	margin-top:5px;
}
.x-form-check-wrap {
	margin-top:3px;
}

textarea {
	overflow-y: auto; /*This prevents IE from showing unnecessary textarea scrollbars, which it does by default, greyed out.*/
}

.x-dd-drop-nodrop .x-dd-drop-icon{background-image:url(../pics/other/no.svg);background-size:16px;}
.x-dd-drop-ok-add .x-dd-drop-icon{background-image:url(../pics/menu/add.svg);background-size:16px;}


/* This is used for any Grid column that has the columnConfig id of multi-line-1 or multi-line-2 to linebreak automatically.
  Used for the Template Search Report */
.x-grid3-col-multi-line-1, .x-grid3-col-multi-line-2 {
     overflow: visible; white-space: normal !important;
}

.oi-ontology-class-with-options a {
	background-color: #C8C8C8;
}

.x-tree-node-expanded .x-tree-node-icon {background-image:url(../pics/other/folder_open.png);}
.x-tree-node-collapsed .x-tree-node-icon {background-image:url(../pics/other/folder_closed.png);}

.x-tree-node-expanded .x-tree-node-icon.bluefolder {background-image:url(../pics/other/folder_blue_open.png);}
.x-tree-node-collapsed .x-tree-node-icon.bluefolder {background-image:url(../pics/other/folder_blue_closed.png);}

.x-tree-node .x-tree-node-inline-icon {background: transparent;}/*Needs to be here as well!*/
.x-tree-node a span, .x-dd-drag-ghost a span {color: var(--default-text-color);}
.x-tree-root-ct>.x-tree-node>div a span {font-size:12px;} /*This is for the root node text of the classificaiton panels*/

.x-window-dlg .x-window-body {padding:10px;} /*This is to adapt the default padding for e.g. MessageBoxes to conform to other CKM widgets.*/
.x-window-dlg .x-window-mc {background: white!important;} /*This is to adapt the default background color for e.g. MessageBoxes to conform to other CKM widgets.*/

/* Ability to have multiple rows for a TabPanel */
.oi-tabpanel-multirow ul.x-tab-strip {
    width: auto !important;
}

/* Styling for the grids.*/
.x-grid3-header { /* Header Grid Row with solid bottom border*/
	background: var(--grid-header-background-color); 
    padding: 0px; 
    border-bottom: 1px solid grey;
} 

.x-grid3-header-offset {
    padding-left: 0px; /* instead of 1px from the main css*/ 
}

.x-grid3-row td, .x-grid3-summary-row td {
    /*background: default white remains */ 
	padding: 7px 1px;
}

.x-grid3-row-alt td {
	background: var(--secondary-light-color); /* effectively turns the alternate line styling off if the "normal" grid row is white by default as well */ 
}

.x-grid3-row-selected td, .x-grid3-row x-grid3-row-selected,
.x-grid3-body .x-grid3-row-selected .x-grid3-td-numberer, 
.x-grid3-body .x-grid3-row-selected .x-grid3-td-checker, 
.x-grid3-body .x-grid3-row-selected .x-grid3-td-expander {
	background: var(--grid-row-selected-background-color); /* For selected rows, this is more important than the turned off alternate row design */
}

.oi-extra-background .x-grid3-row td, .oi-extra-background .x-grid3-summary-row td, .oi-extra-background .x-grid3-scroller {
    background: #f9f9f9; /* For some grids, such as the news grid, we want a grayish background */
}
.oi-extra-background .x-grid3-row-over td, .oi-extra-background .x-grid3-summary-row-over td {
    background: var(--secondary-light-color); 
}

.x-dd-drag-proxy, td.x-grid3-hd-over .x-grid3-hd-inner, td.x-grid3-hd-over, td.sort-desc .x-grid3-hd-inner, td.sort-asc .x-grid3-hd-inner, td.x-grid3-hd-menu-open .x-grid3-hd-inner {
    background:transparent; /* remove the image overlay when sorted */
}  
.x-grid3-hd-row td {
	padding: 7px 0px 7px 0px; /*grid row header with extra padding */
} 

.x-grid3-row { /* Grid rows with dashed bottom border */
	border-bottom: 1px dotted var(--grid-border-color); 
	border-top: 0px;
	background: var(--secondary-light-color);
}

.x-grid3-row.x-grid3-row-over {
	background: var(--grid-row-over-background-color);
}
 
.x-grid3-hd-row td {
	font-size:13px;
}
.x-grid3-row td, .x-grid3-summary-row td {
	font-size:12px;
}

.x-grid-group-hd {
    padding:0px;
    border-bottom: none;
    border-left: 1px solid #5280c0;
    border-right: 1px solid #5280c0;
    border-top: 1px solid #5280c0;
	border-color: var(--secondary-light-color);
}

.x-grid-group-hd div{
	padding:7px 4px 4px 7px;
    background:var(--grid-background-color);
    color:#111111;
    font-size:12px;
}

.multiple-lines-per-row-grid  .x-grid3-cell-inner { /* Grid will display multiple lines per row if required, an ellipsis is however not possible at the end.*/
    overflow: visible; 
    white-space: normal !important;
 }

.two-lines-per-row-grid  .x-grid3-cell-inner { /* Grid will display two lines per row if required, an ellipsis is not possible however */
    overflow: hidden; 
    white-space: normal !important;
    max-height:5ex;
    line-height: 2.5ex; /* 1ex is the height of x in the font used, and 2.5 is then the usual line-height, reinforced here to be sure. */
}
 
 
 /* Equivalent Style for the gwt CellTable ~ grid*/
.gwt-cell-table-oi.com-google-gwt-user-cellview-client-CellTable-Style-cellTableWidget,
table.gwt-cell-table-oi {
	border: 1px solid var(--default-border-color);
}

.gwt-cell-table-oi .com-google-gwt-user-cellview-client-CellTable-Style-cellTableHeader,
.gwt-cell-table-oi th {
	font-size:13px;
	text-shadow: none;
	/*padding: 7px 0px 7px 0px; grid row header with extra padding */	
	padding: 10px 4px 10px 6px; /*combined*/
	background: #f9f9f9; 
    border-bottom: 1px solid grey;
    line-height: 15px;
    vertical-align: middle;
    border-left: 1px solid #eee;
    border-right: 1px solid #d0d0d0
}
.gwt-cell-table-oi .com-google-gwt-user-cellview-client-CellTable-Style-cellTableEvenRow, 
.gwt-cell-table-oi .com-google-gwt-user-cellview-client-CellTable-Style-cellTableOddRow,
.gwt-cell-table-oi tr {
	background: var(--secondary-light-color);
}
.gwt-cell-table-oi .com-google-gwt-user-cellview-client-CellTable-Style-cellTableHoveredRow {
	background: #d1dff0;
}
.gwt-cell-table-oi .com-google-gwt-user-cellview-client-CellTable-Style-cellTableCell,
.gwt-cell-table-oi td {
	font-size:12px;
	border-bottom: 1px dotted grey; 
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	padding: 10px 4px 10px 6px; /*combined*/
}
.gwt-cell-table-oi tr:last-of-type .com-google-gwt-user-cellview-client-CellTable-Style-cellTableCell {
	border-bottom: 0px; /* no need to have a dotted border after the last row...well true, but only if the height is auto */
}


@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}      

.oi-fade-in {
    animation: fadein 1.2s ease-in;    
}

/* The progress bar */
.x-progress-inner{background:#e0e8f3;}
.x-progress-bar{background:#9CBFEE; border-top: 1px solid #9CBFEE; border-top: 1px solid #9CBFEE; }
.x-progress-text-back{color:var(--vivid-color);}


.x-grid3-hd-btn, a.x-grid3-hd-btn:hover { /*Otherwise the arrow disappears on hover*/
    color: transparent; /* To not show the dummy _ */
    background: transparent url(../pics/other/vertical-ellipsis.svg) no-repeat left 5px/12px 12px;
    animation: fadein 0.7s ease-in;    
}

.x-grid3-hd-inner, /* Just the first-letter on this grid header does not work reliably on hover. */
.x-grid-group-hd div:first-letter,
.x-menu a.x-menu-item::first-letter, 
.x-btn-text::first-letter, 
.x-window-header-text::first-letter,

.oi-font-heading::first-letter, .oi-font-heading .x-panel-body::first-letter,
.oi-font-heading-resourcepanel::first-letter, .oi-font-heading-resourcepanel .x-panel-body::first-letter,
.oi-cap-first {
	text-transform:capitalize; /*Avoids lowercase beginning in grid headers, menu items, buttons, oi-heading. */
}

.x-panel-header { /*This way, normal panel header get a better background as well, e.g. in the rev. history.*/
    background-color:#d2def1;
}

/* This helps to ensure that the grid height's border is always in the exact height for when dashboard is loaded in the background. */ 
.ensure-minimized-space-grid-height .x-grid3 { min-height:298px; max-height:298px; }
.ensure-minimized-space-grid-height-with-control .x-grid3 { min-height:281px; max-height:281px; }

.oi-panel .x-panel-header, .x-panel-header {
	border-color: var(--panel-header-border-color); 
    font-variant: normal;
    background: var(--panel-header-background-color); 
    border-radius: 0; 
}

.oi-panel.oi-invitation-or-request-panel .x-panel-header {
    background: #EB9486; 
    border-style: dashed; 
}

.oi-panel.oi-invitation-or-request-panel .x-panel-body {
   /*background: #fcece9;*/ 
    border-style: dashed; 
}

.x-panel-header {
	color: var(--panel-header-color);
}

.oi-panel .x-panel-header {
    font-size:15px;
    line-height: 26px;     
}

.oi-concertina .x-panel-header {
	font-size: 13px;
    color: var(--default-text-color);
    /*font-wight:bold; font-variant:small-caps;*/
}

.oi-revision-panel .x-panel-header {
	font-size: 12px;
    line-height: 20px;
    color: var(--revision-panel-header-color);
}

.oi-successor {
	border-right: 5px dotted grey!important; /*without important the border-style maybe overwritten internally inline*/ 
	filter: saturate(40%);
	padding-right:16px;
	margin-bottom:10px;
}  

.oi-predecessor {
	border-left: 5px dotted grey!important;
	filter: saturate(40%); 
	margin-left:16px; 
}

.x-panel-inline-icon {
    width: 22px; 
    height: 22px; 
    background-size: contain; /*larger icon in the grid header*/
    vertical-align: sub;
} 

.oi-branch-status-info {
	color: var(--secondary-light-color);
	font-size: 11px;
    padding: 2px 4px 2px 4px;
    border-radius: 6px 6px 0px 0px;
    display: inline-block; /* fit width to text*/
}

.oi-original-revision-panel, .oi-modified-revision-panel {
	border: 2px dotted; 
	border-radius: 5px;
}
.oi-original-revision-panel {border-color:#953250;}
.oi-modified-revision-panel {border-color:#538340;}


.oi-generic-sep {
    border-bottom: 1px dotted var(--grid-border-color); 
	/*must not use pointer-evnts:none here - this is for the whole panel. */
}
.oi-generic-sep:last-child {
	border:none;
}


/*************************************************************************************************
 Some styling for the menus 
*************************************************************************************************/

/*.x-menu-item-icon {width:22px; height:22px;} works only for real icons via setIcon - but not really at the moment in the built in grid menus*/
.x-menu {
    padding:2px;
    /*border: 2px solid #ACACAC;*/ 
    border:2px solid var(--vivid-color); 
    border-radius:0px 6px 6px 6px;
    background:var(--secondary-light-color); /* background-color would NOT overwrite the ext style.*/
    /*background: linear-gradient(to bottom, #E6E6E6 0%,#FFFFFF 100%);*/ 
	border-color: var(--secondary-light-color);
    
}
.x-menu-text { /* For the text only items in a menu - e.g. the archetype name */ 
	font-size:12px; 
	color:#363636!important; 
	padding:2px;
}
.x-menu a.x-menu-item { 
	background:var(--secondary-light-color); 
	color:#707070;
	padding:4px 21px 4px 3px;
}

@media (min-width: 1000px) and (min-height:600px) {
.x-menu a.x-menu-item {
	font-size:12px; 
	} /* Increase the menu font for all not very small screens*/
}
@media (min-width: 1200px) and (min-height:750px) {
.x-menu a.x-menu-item {
	font-size:13px; 
	line-height: 16px;
	} /* Increase the menu font and line height for larger screens*/
}

.x-menu-list {
	background:var(--secondary-light-color); /*background of header etc of context menus and anything else without a different background*/
} 
.x-menu-list-item {
	border-bottom: none;
}
.x-menu-item-active {
    background: none;
    border: 1px solid var(--toolbar-background-color);
    padding: 0;
}
.x-menu a.x-menu-item-arrow {
    background: transparent url(../pics/other/arrow_right_grey.svg) no-repeat right center/8px 8px; 
}
/*To style the menu separator */
.x-menu-sep {
    background-color: var(--secondary-light-color); 
    padding:0px; 
    margin:0px;
}
.x-menu-sep-li span {
    border-bottom: 2px dotted grey;
}

.oi-menu-sep {
    border-bottom: 2px dotted grey; 
    background-color: var(--secondary-light-color); 
    outline:none;
    pointer-events: none;
}

.oi-menu-sep .x-menu-item-icon {
    width: 99%; 
    height: 1px; 
    outline:none; 
}

.x-btn-with-menu .x-btn-center em {
	background: transparent url(../pics/other/arrow_down_black.svg) no-repeat right 6px/5px 4px; 
}

/************************************************************************************************
 Drop area
************************************************************************************************/
.oi-drop-area-surround {
	padding: 4px;
	background-color: #797676; /*was: #A9A9A9 */
 	margin: 5px 5px 5px 0;
 	border-radius: 5px;
 	width:217px; /*could also do without*/
 	/*transition: background-color 1s;*/ 	
}

.oi-drop-area-surround * {pointer-events: none;} /* * -> to all child elements, but not self */

.oi-drop-area {
	height: 50px; 
	line-height: 50px; /*helps to vertically center the text*/
	 	
 	border: 2px dashed var(--secondary-light-color); 
	border-radius: 5px;
 	
	background-color: #797676; /*was: #A9A9A9 */
	text-align: center;
	  	
	font-size: 14px;
	font-weight: bold;
    color: var(--secondary-light-color);
    
    /*transition: background-color 1s;*/
}

.oi-drop-area-surround.oi-drag-over, .oi-drop-area-surround.oi-drop-success {
	padding: 6px;
	background-color: #558ed5; /*#C0C0C0;*/	
}

.oi-drag-over .oi-drop-area, .oi-drop-success .oi-drop-area {
	height: 46px; /*decrease here must correpsond to the increase in padding in the surround area above */ 
	line-height: 46px;
	background-color: #558ed5; /*#C0C0C0;*/
}

.oi-drop-area-surround.oi-drop-success {
	background-color: #7BC950;	
	transition: background-color 1s;
}

.oi-drop-success .oi-drop-area {
    background-image: url('../pics/other/success_white.png');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #7BC950;
    transition: background-color 1s;
 }

.oi-drop-area-surround.oi-drop-failure {
	background-color: #931F1D;	
	transition: background-color 1s;
}

.oi-drop-failure .oi-drop-area {
    background-image: url('../pics/other/error_white.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #931F1D;
    transition: background-color 1s;
 }

 
/*************************************************************************************************
 Username/password Panel, login toolbar styling, especially borders.
*************************************************************************************************/
#usernamePasswordPanel {
	border-radius:7px 0px 0px 7px;
    /*border-width: 3px 0px 3px 3px;*/
    border-width: 1px 0px 1px 1px;
    border-color: #91b1e6; /*overd color.*/
    border-style: solid;
}

#usernamePasswordPanel .oi-background-bwrap, #usernamePasswordPanel .oi-background-body { 
    border-radius:7px 0px 0px 7px;
}

#cred_username {
	border-radius:7px 0px 0px 7px;
	border-width:0px 1px 0px 0px; /* Needs the right border to separate from the password field.*/
	padding:2px 2px 2px 5px; /*Padding is REQUIRED to deal with different browser paddings here causing the total height and thus the border to be different */
}
#cred_password {
    border-width:0px;
    padding:2px 2px 2px 5px;
}

#loginToolbar.x-toolbar {
   border-radius: 0px 7px 7px 0px; 
   border-width: 1px 1px 1px 0px;
   border-color: var(--vivid-border-color); /*Vivid color*/
   border-style: solid;
}
#loginToolbar.x-toolbar.logged-in {
    border-radius: 7px; 
    border-width: 1px;
}

/************************************************************************************************
 And general toolbar  
*************************************************************************************************/

.x-toolbar {
	background: var(--toolbar-background-color);
}

.x-toolbar .ytb-text {
    font-size: 15px;
    color: var(--vivid-color); 
    line-height: 26px;
    border-color: var(--panel-header-border-color);
    font-variant: normal;
    background: var(--toolbar-background-color);	
    border-radius: 0;
    border-width: 0;
}

/** Paging Toolbar **/ 
.x-toolbar.oi-paging-tb .ytb-text, .x-toolbar.oi-paging-tb input.x-tbar-page-number, .x-toolbar.oi-paging-tb .x-paging-info {
	font-size: 12px;
	color:var(--default-text-color);
}

.x-toolbar.oi-paging-tb input.x-tbar-page-number {
	text-align:center;
}

.x-toolbar.oi-paging-tb .x-paging-info {
	padding-top:2px;
}

/****/
.x-panel-tbar .x-toolbar,
.x-panel-tbar-noheader .x-toolbar,
.x-panel-mc .x-panel-tbar .x-toolbar,
.x-tab-panel-bbar .x-toolbar,
.x-panel-bbar .x-toolbar,
.x-panel-noborder .x-panel-header-noborder {
	border-color: var(--tab-panel-header-and-footer-border-color);
}

.oi-secondary-toolbar { /* e.g. Rev history */ 
	margin-bottom: 10px; 
	width: fit-content!important; /* important because otherwise set width set automatically gwt will be honoured (which may be auto, but is always set) */  
	background: #eee;
}

/************************************************************************************************
 Some Tag styling 
*************************************************************************************************/

.tags {
  list-style: none;
  margin: 0;
  overflow: hidden; 
  padding: 0;
}

.tags li {
  float: left; 
}

.tag {
  background-color: var(--tag-background-color);
  border-radius: 3px 0 0 3px;
  color: var(--secondary-light-color);
  display: inline-block;
  height: 22px;
  line-height: 22px;
  padding: 0 15px 0 20px;
  position: relative;
  margin: 0 5px 5px 0;
  text-decoration: none;
  white-space: nowrap;
}

.tag::before {
  background-color: #fff;
  border-radius: 10px;
  content: '';
  height: 6px;
  left: 8px;
  position: absolute;
  width: 6px;
  top: 8px;
}

.tag::after {
  background-color: #fff;
  border-bottom: 11px solid transparent;
  border-left: 8px solid var(--tag-background-color);
  border-top: 11px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tag:hover {
  background-color: var(--tag-hover-background-color);
  color: var(--secondary-light-color);
}

.tag:hover::after {
   border-left-color: var(--tag-hover-background-color);
}

.oi-keyword, span.oi-keyword {
    color: white;
    font-weight: bold;
    background-color: var(--keyword-background-color);
    padding: 3px 5px;
    margin: 0px 5px 7px 0px;
    border-radius: 6px;
    display: inline-block; /* Ensures background covers padding */
}

.oi-labelbox {
  color: var(--secondary-light-color);
  background-color: var(--labelbox-default-background-color);
  border-radius: 3px;
  display: inline-block;
  padding: 4px 7px 4px 7px;
  position: relative;
  text-decoration: none;
  font-size: 10px;
  text-transform: uppercase;
}

.oi-labelbox.oi-labelbox-smaller {
	border-radius: 2px;
	padding: 1px 4px 1px 4px;
} 

.oi-revision-number-tag {
	color:white; 
	font-size: 10px; 
	background-color:#6E7881;
	padding: 0 4px 0 4px;
}

/* For the background in the respective colours. Used for tags where the ::after is required. Can also be used for oi-labelboxes if desired. */
.oi-background-color-archetype {background-color:rgb(81, 121, 169);}
.oi-background-color-archetype::after {border-left-color:rgb(81, 121, 169);}
.oi-background-color-template {background-color:rgb(212,136,44);}
.oi-background-color-template::after {border-left-color:rgb(212,136,44);}
.oi-background-color-termset {background-color:rgb(168,198,109);}
.oi-background-color-termset::after {border-left-color:rgb(168,198,109);}
.oi-background-color-release-set {background-color:rgb(105,102,146);}
.oi-background-color-release-set::after {border-left-color:rgb(105,102,146);}
.oi-background-color-translation {background-color:rgb(184,49,146);}
.oi-background-color-translation::after {border-left-color: rgb(184,49,146);}
.oi-background-color-terminology {background-color:rgb(164,135,195);}
.oi-background-color-terminology::after {border-left-color:rgb(164,135,195);}

.oi-background-latest, .oi-background-this {background-color: #4F7B96;} /*Non-AA: 92C2DD*/
.oi-background-previous {background-color: #C35755;} /*F28482*/
.oi-background-latest-published {background-color: var(--published-background-color); color: var(--published-text-color);}
.oi-background-latest-and-latest-published {background-color: var(--published-background-color); color: var(--published-text-color);}
.oi-background-branch, .oi-background-different {background-color: #757575;} /*#A9A9A9*/
.oi-background-rejected-or-deprecated {background-color: #c62228;}

.oi-background-information{background-color: var(--notes-info-notice-background-color);}
.oi-background-success {background-color: var(--success-background-color);}
.oi-background-warning {background-color: var(--warning-background-color);}
.oi-background-error {background-color:	var(--error-background-color);}
.oi-background-instruction {background-color: var(--instruction-background-color);}
.oi-background-notice {background-color: var(--notes-info-notice-background-color);}

/*************************************************************************************************
 Increase main toolbar size for larger screens 
*************************************************************************************************/
@media (min-width: 1300px) and (max-width: 1399px) {
    .oi-main-toolbar.x-toolbar button {font-size:13px;}
}
@media (min-width: 1400px) and (max-width: 1669px) {
    .oi-main-toolbar.x-toolbar button {font-size:14px;}
}
@media (min-width: 1670px) { /*Chosen so that the login toolbar doesn't overlap*/
    .oi-main-toolbar.x-toolbar button {font-size:15px;}
}

.display-block {
	display:block; /*An image has a 3-4 px margin of some sort underneath if put in a vertical panel, i.e. in a table structure. Display block or setting the appropriate bottom minus margin off 3-4px prevents this. */
} 

.oi-border { /* Use to get a default border. */
	border: 1px solid var(--default-border-color); 
}

.oi-border-vivid { /* Use to get a default border in a vivid colour. */
	border: 1px solid var(--vivid-border-color); 
}

.oi-panel-and-fieldset-border { /* Use to explicitly set the typical (usually dark) border for panels and fieldsets in panels and fieldsets.. */
	border: 1px solid var(--panel-and-fieldset-border-color);
	box-sizing: border-box; /* This includes everything in the set width. */
}

.oi-panel-and-fieldset-border.x-panel-collapsed {border:none;} /* For example for the south notification panel if collapsed. */

.x-panel-body, .x-tab-panel-body, .x-panel-body-noheader, .x-fieldset  {
	border-color:var(--panel-and-fieldset-border-color);
}

.x-panel-noborder .x-panel-body-noborder {
	border-width: 0px;
}

.x-panel-noborder .x-panel-tbar-noborder .x-toolbar {
	border-bottom: white;
}

.oi-no-left-right-bottom-border { /* To be used in addition to a border to remove all except the top. No need to redefine this again for themes. */
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
}

@media (min-width: 1240px) {
    .oi-dashboard .x-panel-body {
	   overflow-x:hidden!important; /*Important is required here because it is inline overwritten by the framework otherwise!*/
    }
}

/* Some colours, some of which could easily be overwritten by themes.*/ 
.oi-dashboard-background {
	background-color: var(--dashboard-light-background-color);
	box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
}
.oi-dashboard-background-darker {
	background-color: var(--dashboard-darker-background-color);
}
.oi-dashboard-background-vivid {
	background-color:var(--dashboard-vivid-background-color);
	box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
}
.oi-font-vivid-heading {
	font-size:18px;
	font-weight:normal;
	color:var(--vivid-color);
}
.oi-font-vivid-color { /*Same colour as above*/
	color:var(--vivid-color); 
} 

.oi-version-color, .x-tree-node a span .oi-version-color {
	color: #797676; /* non WCAG AA: "#C0C0C0"; */ 
}

/*Background colours - might be overwritten in a theme of its own. */
.oi-background, .oi-background-body, .oi-background-ckmtext, .oi-background-body .x-border-layout-ct {
     background-color:var(--topbar-background-color); 
} 

/* OTHER COLORS - bluish, */
.oi-options-background {
	background: var(--toolbar-background-color);
	user-select:none;
} /*For options in the left hand panel*/

/* Tabs Headers */

/*Slightly increasing the font size of the tab headings.*/
.x-tab-strip span.x-tab-strip-text, .x-tab-strip span.x-tab-strip-text h1 {
    font-size: 12px; /*Adding padding here causes the activated tab to look wrong in the tab panel! */
    color: var(--tab-header-text-color);
    font-weight: normal;
}

.x-tab-strip-active span.x-tab-strip-text, .x-tab-strip-active span.x-tab-strip-text h1 {
	font-size: 14px;
	color: var(--vivid-color);
	font-weight: bold;
}

ul.x-tab-strip-top {
	background: var(--toolbar-background-color);  /*  #91b1e6 To remove the ugly gradient picture that is used as a background by default. */ 
    border-bottom: 2px solid var(--vivid-color); 
}

.x-tab-strip-top .x-tab-left {
    background-image: none;
    background-color: transparent;
    border-radius: 6px 6px 0px 0px;
}

.oi-resources-tab-panel .x-tab-strip-top .x-tab-left {
	padding-right:3px; 	/*To save some space, when only the resource type icon is displayed.*/
}
.oi-resources-tab-panel .x-tab-strip-top .x-tab-strip-active .x-tab-left {
	padding-right:10px; /*As is normal for other tab panels as well*/ 	
}

.x-tab-strip-top .x-tab-right {
    background-image: none;
    background-color: var(--secondary-light-color);
    border-radius:6px 6px 0px 0px;
}

.x-tab-strip-top .x-tab-strip-inner {
    background-image: none;
    background: var(--secondary-light-color);
}

.x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner, .x-tab-strip-top .x-tab-strip-active .x-tab-right, .x-tab-strip-top .x-tab-strip-active .x-tab-left {
    background: var(--secondary-light-color); /* active tab background */   
}

ul.x-tab-strip li {
    border-color: var(--light-border-color); 
    border-style: solid;
    border-width: 1px 1px 0px 1px;
    border-radius: 6px 6px 0px 0px;
    margin-top: 1px;
}

ul.x-tab-strip li.x-tab-strip-active {
    border-color: var(--vivid-color); 
    color:var(--default-text-color);
    border-width: 2px 2px 0px 2px;
    margin-bottom: -1px;
    margin-top: 2px;
}

.x-tab-strip-active span.x-tab-strip-text {
	font-size:14px;
	line-height:14px;
}

.x-tab-panel-header {
    background: var(--secondary-light-color); /* This is the little space under the tabs*/
	border-color: var(--tab-panel-header-and-footer-border-color);
	border-bottom: none;
    padding-bottom: 2px; 
}

.x-toolbar {user-select:none;}

/* Overwrites the ugly background images of menu and toolbar buttons.*/ 
.x-toolbar .x-btn-click .x-btn-center, .x-toolbar .x-btn-pressed .x-btn-center, .x-toolbar .x-btn-menu-active .x-btn-center,
.x-toolbar .x-btn-click .x-btn-left, .x-toolbar .x-btn-pressed .x-btn-left, .x-toolbar .x-btn-menu-active .x-btn-left,
.x-toolbar .x-btn-click .x-btn-right, .x-toolbar .x-btn-pressed .x-btn-right, .x-toolbar .x-btn-menu-active .x-btn-right,
.x-toolbar .x-btn-over .x-btn-center, .x-toolbar .x-btn-over .x-btn-left, .x-toolbar .x-btn-over .x-btn-right {
    background: var(--vivid-color);
}

/*A few shades lighter to ensure good visibility of icons in the resource/project/subdomain switch view toolbars.*/
.x-toolbar.switch-view-toolbar .x-btn-click td, .x-toolbar.switch-view-toolbar .x-btn-pressed td, 
.x-toolbar.switch-view-toolbar .x-btn-menu-active td, .x-toolbar.switch-view-toolbar .x-btn-over td {
    background: var(--toolbar-button-pressed-background-color); 
	filter: brightness(105%) saturate(1.15);
}

.x-toolbar .x-btn-over .x-btn-center .x-btn-text,
.x-toolbar .x-btn-click .x-btn-center .x-btn-text,
.x-toolbar .x-btn-menu-active .x-btn-center .x-btn-text,
.x-toolbar .x-btn-over td, .x-toolbar .x-btn-over span, .x-toolbar .x-btn-over div {
    color: var(--secondary-light-color);
}

/* normal toolbar buttons with a border radius on each side(!)*/
.x-toolbar .x-btn-click .x-btn-left, 
.x-toolbar .x-btn-over .x-btn-left, 
.x-toolbar .x-btn-menu-active .x-btn-left {
    border-radius: 6px 0px 0px 6px;
}
.x-toolbar .x-btn-click .x-btn-right, 
.x-toolbar .x-btn-over .x-btn-right, 
.x-toolbar .x-btn-menu-active .x-btn-right {
    border-radius: 0px 6px 6px 0px;
}

/* main toolbar buttons with a border radius only on the top left + top right. */
.x-toolbar .oi-main-toolbar-button.x-btn-click .x-btn-left, 
.x-toolbar .oi-main-toolbar-button.x-btn-over .x-btn-left, 
.x-toolbar .oi-main-toolbar-button.x-btn-menu-active .x-btn-left {
    border-radius: 6px 0px 0px 0px;
}

.x-toolbar .oi-main-toolbar-button.x-btn-click .x-btn-right, 
.x-toolbar .oi-main-toolbar-button.x-btn-over .x-btn-right, 
.x-toolbar .oi-main-toolbar-button.x-btn-menu-active .x-btn-right {
    border-radius: 0px 6px 0px 0px;
}

.x-toolbar td, .x-toolbar span, .x-toolbar div, .x-toolbar .x-btn button {
	color:var(--default-text-color);
}


/* Browser scrollbar. E.g. solves some problems with different scrollbar width in chrome, plus makes it look a little bit nicer. */
::-webkit-scrollbar {
  width: 18px;  /* for vertical scrollbars */
  height: 18px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track {
  background: #f9f9f9;
}

::-webkit-scrollbar-track-piece {
    background-color:#f9f9f9;
    border-radius:0;
}

::-webkit-scrollbar-thumb {
    height:50px;
    background-color:#aaa;
    border-radius:4px;
    outline:2px solid #fff;
    outline-offset:-2px;
    border: 2px solid #f9f9f9;
}
::-webkit-scrollbar-thumb:hover {
    height:50px;
    background-color:#9f9f9f;
    border-radius:4px;
}
::-webkit-scrollbar-corner {
    background-color:#f9f9f9;
}

.link-disabled a { /*.link-disabled a:active, .link-disabled a:focus works mostly to still enable hover, but not always in FF */
   pointer-events: none;
   cursor: default;
   display:inline-block; /* IE and edge 17 and below need this to honour pointer-events */
}

.oi-badge {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    text-align: center;
    background: #e97423;
    color: var(--secondary-light-color);
    margin-top: 3px;
}

.oi-header-badge {
    border-radius: 33%;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 16px;
    min-height: 16px;
    padding: 2px;
    font: 14px tahoma,arial,helvetica,sans-serif;
    font-weight: bold;
    background: var(--panel-header-color-slightly-transparent);
    /*background: lightslategray;*/
    color: var(--secondary-light-color);
}

.oi-green-badge {
    background: #6da030; 
}

.x-border-layout-ct, .x-tab-panel-body {
	background-color: var(--toolbar-background-color);
}

#usernamePasswordPanel, #loginToolbar.x-toolbar {
	border-color: var(--login-border);
}

.x-layout-split {
	background-color: var(--toolbar-background-color);
	border-color: var(--toolbar-background-color);
}

.oi-dashboard-background-vivid .oi-font-heading {
	color: var(--dashboard-font-color); 
}

.oi-dashboard-background-vivid .oi-font-strong {
	color: var(--dashboard-font-color); 
}

.oi-dashboard-background-vivid .oi-font-normal {
	color: var(--dashboard-font-color); 
}

.oi-dashboard-background-vivid .oi-font-vivid-color {
	color: var(--dashboard-link-color);
}

.x-toolbar .x-btn-over .x-btn-center .x-btn-text, .x-toolbar .x-btn-click .x-btn-center .x-btn-text,
	.x-toolbar .x-btn-menu-active .x-btn-center .x-btn-text {
	color: white;
}

.oi-featured-info {
	color: var(--panel-header-color);
	background-color: var(--panel-header-background-color);
	font-size: 12px;
    font-weight: bold;
    overflow: hidden;
    overflow-y: hidden;  
}

.oi-featured-info-inner-circle {
	border-radius: 50%;
	background-color: white;
	overflow: hidden;
}