@import url(fonts.css?v=260924000032);

:root {
    --themeColor: var(--brandingColor, #e30018); /* default: kw red */
    --themeForegroundColor: var(--brandingForegroundColor, #ffffff); /* default: white */
    
    /* Color to be shown on white background. Branding color is preferred.
       Foreground color (black) is used for light branding colors.
       Default: kw red (if no settings available). */
    --themeResolvedColor: var(--brandingForegroundColor, var(--brandingColor, #e30018));
}

ErrorMessage {
    font-family: 'Open Sans',sans-serif,helvetica,arial,verdana;
    display: block;
}

Message {
    font-size: 16px;
    font-weight: bold;	
    display: block;
	padding-top: 10px;	
    padding-bottom: 10px;
    padding-left: 10px;
    background-color: #e30018;
    color: white;
}

Detail {
    font-size: 14px;
    font-weight: normal;
    padding-left: 25px;
    display: block;
}

.gwt-Label, .gwt-InlineLabel, .gwt-Anchor, .inputAreaFieldLabel {
    font-family: 'Open Sans',sans-serif,helvetica,arial,verdana;
    font-size: 14px;
    
    color: #222222;
}

.gwt-TextBox {
    /* these rules are important because some user agents overrides them with default style */
    font-family: 'Open Sans',sans-serif,helvetica,arial,verdana !important;
    font-size: 14px !important;
    
    color: #222222 !important;
}

.noSelect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari*/
       -khtml-user-select: none; /* Konqueror */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}

#documentPanel {
    position: absolute;
    width: 100%;
}

#documentScrollPanel {
    background-color: rgb(243,243,243);
}

#editor {
    overflow: initial !important;
}

#editorToolbar {
    background-color: var(--themeColor);
    color: var(--themeForegroundColor);
}

.hidden {
    /* mustn't have zero size */
    width: 1px;
    height: 1px;

    position: fixed;
    top: 0;
    left: 0;

    display: block;
    font-size: 1px;
    z-index: -1;
    color: transparent;
    background: transparent;
    overflow: hidden;
    border: none;
    padding: 0;
    resize: none;
    outline: none;
    -webkit-user-select: text;
    user-select: text;
    /* Because for user-select:none, Safari won't allow input */
}

.hiddenByPosition {
    /* this class is used for hidden elements where we don't want
     to inherit some css properties (font, color, etc.) in child elements */
    position: absolute;
    
    width: 1px;
    height: 1px;
    
    top: -9999px;
    left: -9999px;
    
    z-index: -1;
    -webkit-user-select: none;
    user-select: none;
}

.expandAreaButton {
    position: absolute;
    top: 50px;
    width: 12px;
    height: 32px;
    
    transition: width 0.25s;
}

.expandAreaButton:hover {
    width: 40px;
}

.expand-arrow-line {
	display: inline-block;
	width: 100%;
	height: 100%;
	position: relative;
	color: white;
	transition: width 0.25s;
}

.expand-arrow-line::before {
	content: '';
	position: absolute;
	border: solid currentColor;
	border-width: 0 2px 2px 0; /* Thickness of the lines */
	padding: 3.5px; /*size of the arrowhead point */
}

/* RIGHT Arrow */
.expand-arrow-line.expand-arrow-right::before {
	transform: rotate(-45deg); /* Rotates the lines to point right */
	top: 50%;
	left: 50%;
	/* Adjust margins to center the rotated pseudo-element within its container */
	margin-top: -5px;
	margin-left: -7px;
}

/* LEFT Arrow */
.expand-arrow-line.expand-arrow-left::before {
	transform: rotate(135deg); /* Rotates the lines to point left */
	top: 50%;
	left: 50%;
	/* Adjust margins to center the rotated pseudo-element within its container */
	margin-top: -5px;
	margin-left: -2px;
}

.kebabMenuButton {
	cursor: pointer;
	background-color: var(--themeColor);
	background-position: center;
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    transition: width 0.25s;
}

.toolbarMenu{
	background-color: var(--themeColor) !important;
	background-image: initial !important;
}

.editorAreaButton.expandAreaButton{
    background-color:#777777;
}

.editorAreaButton {
    cursor: pointer;
    background-color: white;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 0.75pt #d1d1d1,0 0 3pt 0.75pt #ccc;
}

.editorPage {
    background-color: white;
    
    box-shadow: 0 0 0 0.75pt #d1d1d1,0 0 3pt 0.75pt #ccc;
    
    cursor: text;
}

/* Editor content is positioned, so ::before paints below it without isolating overlays. */
.editorRoundedBackground::before {
    content: "";
    position: absolute;
    z-index: auto; /* Paint before the positioned content that follows it, without creating a stacking context. */
    pointer-events: none;
    left: var(--tonic-rounded-background-left);
    top: var(--tonic-rounded-background-top);
    width: var(--tonic-rounded-background-width);
    height: var(--tonic-rounded-background-height);
    background-image: var(--tonic-rounded-background-image);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#editorCaret {
    border-left-width: 2px;
    border-left-style: solid;
    width: 2px;
}

#editorCaretContainer {
    cursor: text;
    position: absolute !important;
    z-index: 3; /* has to be bigger than contentEditorElement z-index to avoid line blinking in chrome */
}

.editorSpan {
    white-space: pre;
    font-feature-settings: "kern" 0, "liga" 0;
    unicode-bidi: isolate-override;
    direction: ltr;
 }

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

.textSelection {
    position: absolute !important;
    top: 0px;
    
    height: 100%;
    
    background-color: rgb(118,167,250);
    opacity: 0.6;
    
    white-space: pre;
    font-feature-settings: "kern" 0, "liga" 0;
}

.textSelection.blured {
    background-color: rgb(173,192,192);
}

.imageSelection {
    position: absolute !important;
    width: 100%;
    height: 100%;
    
    background-color: rgba(118,167,250,0.6);
    z-index: 20;
    
    border: 2px solid rgb(102,102,255);
    box-sizing: border-box;
    
    cursor: default;
}

.imageSelection.blured {
    background-color: rgba(173,192,192,0.6);
    border-color: rgb(165,165,165);
}

.resizingHandle {
    position: absolute;
    
    background-color: rgb(102,102,255);
    z-index: 20;
}

.imageSelection.blured .resizingHandle {
    background-color: rgb(165,165,165);
}

.hyperlinkActive {
	cursor: pointer !important;
	z-index: 15 !important;
}
.misspelled.inclusionRequested{
	border-bottom: 1px dashed rgb(51, 204, 204) !important;
}
.misspelled {
    position: absolute !important;

    box-sizing: border-box;
    border-bottom: 1px dashed red;
    
    /* has to be bigger than border box z-index (10) to be visible on elements with a background
       and also greater than text analysis suggestion marking (21) to be on top of it */
    z-index: 22;
}

.thumbPageNumber {
    position: relative;
    bottom: 20px;
    font-weight: bold;
    cursor: default;
    
    color: rgb(153,153,153);
}

.thumbSelected .thumbPageNumber {
    color: rgb(255,255,255);
}

.thumb {
    position: relative; /* because of children positioning */
    
    border-width: 3px;
    border-style: solid;
    
    border-bottom: none;
    border-top: none;
    
    border-color: #ffffff;
}

.thumb.thumbSelected {
    background-color: #bbbbbb;
}

.thumbInner {
    margin: 5px auto;
    text-align: right;
    overflow: visible !important; /* because of page number label */
}

.thumbImage {
    box-shadow: 0 0 0 0.1pt #d1d1d1,0 0 3pt 0.1pt #ccc;
}

.thumbSelected .thumbImage {
    box-shadow: 0 0 0 2px var(--themeColor);
}

.thumbSectionSelected {
    border-color: var(--themeColor);
}

.thumb.sectionStart {
    border-top-width: 3px;
    border-top-style: solid;
}

.thumb.sectionEnd {
    border-bottom-width: 3px;
    border-bottom-style: solid;
}

.dropTarget {
    position: absolute;
    box-sizing: border-box;
    border: 4px dashed var(--themeColor);
}

.dropTargetThin {
    position: absolute;
    box-sizing: border-box;
    border: 1px dashed var(--themeColor);
}

.guideEntryLabel {
    cursor: pointer;
}

.guideEntryLabel.guideEntryChild {
    font-size: 13px;
}

.guideEntryLabel:hover {
    font-weight: bold;
}

.guideEntryHint {
  font-weight: normal;
  font-size: smaller;
  color: rgb(141, 141, 141) !important;
  
  word-break: break-word;
}

.validationPopup {
    position: relative;
    background-color: rgb(255, 250, 250);
    border: 2px solid #e30018; /* error indicator (not affected by the branding color) */
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.validationPopup:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.validationPopup:before {
    border-color: rgba(217, 78, 55, 0);
    border-bottom-color: #e30018; /* error indicator (not affected by the branding color) */
    border-width: 12px;
    margin-left: -40%;
}

.validationLabel{
    cursor: pointer;
    color: rgb(227,0,24);
}

.validationLabelPanel{
    cursor: pointer;
}

.validationErrorLabel {
    font-size: 12px;
}

.validationErrorLabelSelectable {
    cursor: pointer;
}

.validationErrorLabelSelectable:hover {
    font-weight: bold;
}

.validationErrorLabelInInputArea {
    font-size: smaller;
    color: #e30018; /* error indicator (not affected by the branding color) */
}

.validationErrorTextArea {
    outline: 1px solid #e30018; /* error indicator (not affected by the branding color) */
}

.validationErrorInlineField {
    border-color: #e30018 !important; /* error indicator (not affected by the branding color) */
}

.provisioningPendingLabel {
    cursor: pointer;
    color: rgb(255,136,17);
}

.provisioningPendingLabel:hover {
    font-weight: bold;
}

.provisioningPendingLabelPanel{
    cursor: pointer;
}

.inputAreaField input {
    padding-left: 0;    
}

.inputAreaField.inputAreaFieldFocused > div {
    border-bottom: 1px solid rgb(157,157,157);
}

.inputAreaSearchField input[type=text] {
    height: 16px;
    
    background-color: #777777;
    font-size: 14px;
    color: white;
}

.inputAreaSearchFieldContainer{
    border-bottom: 1px solid #d1d1d1;
    
    overflow: hidden;
}

.inputAreaComputedFieldButton{
    border-color: #dddddd;
    border-width: 1px;
    border-style: none;
    border-bottom-style: solid;
    cursor: pointer;
}

.inputAreaSearchField {	
    border: transparent;
    height: 16px;
    overflow: hidden;
}

.inputAreaSearchFieldOpen{
  border-bottom: 1px solid #d1d1d1;
    
    animation: slide 0.2s;
    overflow: hidden;
}

.inputAreaSearchFieldClose{
    overflow: hidden;
    animation: slide 0.5s reverse;
}

.inputFieldInError .inputAreaField > div {
    border-bottom: 1px solid #e30018; /* error indicator (not affected by the branding color) */
}
.inputAreaHeaderButtons{
    background: transparent; 
    cursor: pointer;
}

.selectedInGuide {
  position: relative;
  overflow: visible;
}

.selectedInGuide::after {
  z-index: 100;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  position: absolute;
  box-sizing: content-box;
  border-width: 0px;
  border-color: var(--themeColor);
  border-style: solid;
  animation: sonar 1s;
}

.selectedInGuide.selectedInGuide-reset::after {
  animation: none;
  content: none;
}

@keyframes sonar {
  from {
    padding: 2px;
    opacity: 1;
    border-width: 3px;
    margin: -3px;
  }
  to {
    padding: 10px;
    opacity: 0;
    top: -10px;
    left: -10px;
    border-width: 1px;
  }
}

@-webkit-keyframes slide {
      from {
    width: 0px;
  }
  to {
    width: 168px;
    }
}

@keyframes slide {
      from {
    width: 0px;
  }
  to {
    width: 168px;
    
  }
}
/** Most GWT widgets already have a style name defined */
.gwt-DialogBox {
  width: 400px;
}

.leftAlignedStatus {
    /* overriding default GXT positioning properties */
    left: 0px !important;
    width: 1px !important;
    overflow: visible !important;
}

.statusLabelError span {
  color: red !important;
}

.mandatoryGuideEntryLabelError span {
  color: rgb(227,0,24) !important;
}

.inputAreaGroupHeader {
    border-bottom: solid;
    border-width: 1px;
}

.inputAreaGroupHeaderButton {
    float: right;
    
    font-size: 10px;
    cursor: pointer;
    user-select: none;
}

.guideAreaGroupHeaderButton {
    float: right !important;
    
    font-size: 10px;
    cursor: pointer;
    user-select: none;
    
    font-weight: normal;
    position: relative;
    top: 2px;
}

.inputAreaGroupTitle {
    font-weight: bold;
    font-size: smaller;
}

.inputAreaFieldLabel {
    font-size: smaller;
    color: rgb(141, 141, 141);
}

.inputAreaFieldLabel.inputAreaFieldFocused {
    color: rgb(70,70,70);
}

.inputFieldInError .inputAreaFieldLabel {
    color: #e30018 !important; /* error indicator (not affected by the branding color) */
}

.clickableResourceName {
    cursor: pointer;
    
    position: relative;
    top: -6px;
    padding: 0px 10px;
}

.clickableResourceName:HOVER {
    text-decoration: underline;
}

.propertyAreaLabel {
    font-size: 13px;
    overflow-wrap: break-word;
}

.thumbAreaLabel {
    font-size: 13px;
    font-weight: bold;
}

.separatorLine {
    height: 1px;
    background-color: #222222;
}

.propertyGroupTitle {
    font-weight: bold;
    float: left;
}

.twoColumnToolbarLeft {
    float: left;
}

.twoColumnToolbarRight {
    float: right;
}

.moreLessLabel {
    cursor: pointer;
    user-select: none;
    font-size: 8pt;
    float: right;
}

#tableInsertionTool {
    background-color: rgb(215,215,215);
}

.tableInsertionToolGrid {
    background-color: black;
}

.tableInsertionToolCell {
    background-color: rgb(215,215,215);
}

.tableInsertionToolCell.selected {
    background-color: rgb(160, 160, 160);
}

.insertSymbolCell {
    text-align: center;
    vertical-align: middle;
    cursor: default;
}

.modelSelectionTool {
    border-style: solid;
    border-color: #777777;
}

.modelSelectionTool.modelResolved {
    border-style: dashed;
}

#modelSelectionToolBar {
    background-color: #777777;
    cursor: pointer;
}

.modelSelectionTool.modelResolved #modelSelectionToolBar {
    background-color: #ffffff;
    border: 1px dashed #777777;
}

#modelSelectionToolLabel {
    color: #ffffff;
    font-size: 13px;
    
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
}

.modelSelectionTool.modelResolved #modelSelectionToolLabel {
    color: #777777;
}

.modelPreviewLabel {
    color: #ffffff;    
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
}

.modelPreviewLabelSmall {
    font-size: 11px;
}

.modelPreviewLabelBig {
    font-size: 13px;
}

.editorElementSelectionTool {
    border-style: dashed;
    border-color: var(--themeColor);
    border-width: 1px;
    box-sizing: border-box;
}

#selectedResourceDetailsHeader div {
    font-size: 14px !important;
    font-weight: normal !important;
    
    color: white !important;
}

.resourceDetailFieldLabel {
    font-size: 13px;
}

.resourceDetailFieldLabel > label {
    font-weight: bold;
}

.resourceDetailValue {
    padding-top: 5px !important;
}

.resourceDetailValueError {
    color: red;
    font-weight: bold;
}

.breadCrumbItem {
    font-size: 16px;
    color: var(--themeResolvedColor) !important;
    cursor: pointer;
    
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadCrumbItem:hover {
    text-decoration: underline;
}

.breadCrumbSeparator {
    width: 25px;
    font-size: 13px;
    text-align: center;
    
    color: var(--themeResolvedColor);
}

.resourcePanelButtons {
    border-right: 1px solid rgb(243,243,243);
}

#menuComponent {
    height: 45px;
    
    background-color: var(--themeColor);
}

#menuButtonContainer {
    width: 60px;
    height: 45px;
    
    border-right: 1px solid var(--themeForegroundColor);
    
    cursor: pointer;
}

#menuButtonContainer:HOVER {
    background-color: #777777;
}

#menuHeading {
    color: var(--themeForegroundColor);
    font-size: 21px;
}

#menuUser div {
    font-size: 16px !important;
}

.menuButton {
    background-color: var(--themeColor);
    
    border: 2px solid white;
    cursor: pointer;
}

.menuButton div {
    color: var(--themeForegroundColor);
}

.menuButton:HOVER {
    border-color: var(--themeColor);
}

.menuIconButton {
    border-left: 1px solid var(--themeForegroundColor);
    cursor: pointer;
}

.menuIconButton div {
    color: var(--themeForegroundColor);
    font-size: 16px;
}

.menuIconButtonSelected {
    background: white;
}

.menuIconButtonSelected div {
    color: var(--themeResolvedColor);
}

.menuIconButtonSelected img {
    background: var(--themeResolvedColor);
}

.menuIconButtonLast {
    border-right: 1px solid var(--themeForegroundColor);
}

.dialog {
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.noColorPicker {
    background-color: white;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
     linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
    background-size: 10px 10px;
    background-position: 0px 0px, 5px 5px;
}

.iconColorPicker img {
    border-bottom: 4px solid rgb(0,0,0);
}

.resizeGuideline {
    background-color: rgb(0,0,255);
}

#loginDialogImagePanel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image: url(../images/keyvisual_seriem.png?v=260924000032);
    background-repeat: no-repeat;
    background-size: 100%;
}

#loadingOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    
    z-index: 100;    
    
    background-color: rgba(0,0,0,0.2);
}

#loadingLabel {
    height: 160px;
    
    font-family: 'Open Sans',sans-serif,helvetica,arial,verdana;
    font-size: 22px;
    text-align: center;
    
    color: #222;
}

.centered {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    margin: auto;
}

.keyboard-focus {
    outline: 2px solid var(--themeColor) !important;
    outline-offset: -2px;
}
#editorToolbar .keyboard-focus,
#menuComponent .keyboard-focus {
    outline: 2px solid var(--themeForegroundColor) !important;
}

.editorAreaLine {
    position: absolute;
    left: 0px;
    width: 4px;
    
    background-color: #777777;
}

.editorAreaLine.editorAreaActive {
    background-color: var(--themeColor);
    z-index: 1; /* lines can overlap themselves (in columns); active should be on top */
}

.editorTable.selectionApplied .editorSpan,
.editorTableCell.selectionApplied .editorSpan {
    background-color: transparent !important;
}

.horizontalRulerContainer {
    position: sticky;
    top: 0px;
    
    height: 24px;
    width: 100%;
    background-color: rgb(243,243,243);
}

.horizontalRuler {
    position: relative;
    top: 5px;
    
    height: 14px;
    margin: auto;
    background-color: #dddddd;
    box-shadow: 0 0 0 0.5pt #d1d1d1, 0 0 1pt 0.5pt #ccc;
}

.horizontalRulerRegion {
    position: absolute;
    height: 100%;
    background-color: white;
}

.rulerInner {
    position: absolute;
    height: 100%;
    width: 100%;
    user-select: none;
}

.horizontalDivider {
    position: absolute;
    width: 1px;
    border-left: 1px solid #222222;
}

.horizontalMajorDivider {
    height: 8px;
    margin-top: 3px;
}

.horizontalMinorDivider {
    height: 4px;
    margin-top: 5px;
}

.horizontalNumberDivider {
    position: absolute;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    transform: translateX(-50%);
}

.horizontalRulerIndent {
    position: absolute;
    width: 12px;
    transform: translateX(-50%);
}

.horizontalRulerFirstIndent {
    top: 2px;
    border-top: 4px solid #777777;
}

.horizontalRulerParIndent {
    top: 7px;
    height: 7px;
    background-position: -6px -10px;
    background-repeat: no-repeat;
}

.horizontalRulerGuideLine {
    position: absolute;
    left: 6px;
    width: 1px;
    height: 100%;
    cursor: default;
    background-color: #777777;
}

.horizontalRulerColumnResize {
    position: absolute;
    transform: translateX(-50%);
    width: 10px;
    height: 14px;
    cursor: col-resize;
    
    background-position-x: -2px;
    background-repeat: no-repeat;
}

.horizontalRulerColumnResize > .horizontalRulerGuideLine {
    left: 5px;
    top: 14px;
}

.horizontalRulerTab {
    position: absolute;
    top: 8px;
    width: 10px;
    height: 10px;
    background-repeat: no-repeat;
}

.horizontalRulerCenteredTab {
    width: 13px;
    transform: translateX(-6px);
}

.verticalRulerContainer {
    position: absolute;
    top: 0px;
    
    width: 24px;
    height: 100%;
    background-color: rgb(243,243,243);
}

.verticalRuler {
    position: relative;
    left: 5px;
    
    width: 14px;
    background-color: #dddddd;
    box-shadow: 0 0 0 0.5pt #d1d1d1, 0 0 1pt 0.5pt #ccc;
}

.verticalRulerRegion {
    position: absolute;
    width: 100%;
    background-color: white;
}

.verticalDivider {
    position: absolute;
    height: 1px;
    border-top: 1px solid #222222;
}

.verticalMajorDivider {
    width: 8px;
    margin-left: 3px;
}

.verticalMinorDivider {
    width: 4px;
    margin-left: 5px;
}

.verticalNumberDivider {
    position: absolute;
    width: 12px;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    transform: translateY(-50%) rotate(-90deg);
}

#tabTypeButton {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 16px;
    height: 16px;
    
    background-color: #dddddd;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 0.5pt #d1d1d1, 0 0 1pt 0.5pt #ccc;
}

/* Speech panel properties. */
.suggestionContainer {
    border-left-width: 5px;
    border-left-style: solid;
    
    background-color: #f8f8f8;
    box-shadow: 0 0 0 0.1pt #d1d1d1, 0 0 3pt 0.1pt #ccc;
    
    /* transition when the container is shown after a click on the text in the editor */
    -webkit-transition: background-color 0.5s ease-out;
       -moz-transition: background-color 0.5s ease-out;
         -o-transition: background-color 0.5s ease-out;
            transition: background-color 0.5s ease-out;
    
    cursor: default;
}

.suggestionContainer.suggestionIgnored:before {
    /* Pseudo element used because opacity on the root element cannot be overridden by its children.
       Child elements can use z-index to go out of the opaque overlay made by this pseudo element. */
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    opacity: 0.5;
}

.suggestionCollapseExpandButton {
    position: absolute;
    top: 13px;
    right: 13px;
}

.highlightText {
    color: #0971ae;
    border-bottom: 1px dashed #0971ae;
}

.highlightEditorText {
    background-color: #0971ae33; /* 0.2 alpha */
}

.suggestionEditorText {
    position: absolute;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    
    /* has to be bigger than border box z-index (10) to be visible on elements with a background
       and bigger than inline field z-index (20) which can cover it (e.g. in case of above inline field label) */
    z-index: 21;
}

.suggestionButton {
    font-size: 12px;
    padding: 3px 5px !important;
    border-radius: 2px;
    cursor: pointer;
}

.suggestionReplacement {
    min-height: 17px;
    background-color: #d9e5f3;
}

.suggestionIgnoreButton {
    position: relative;
    z-index: 1; /* to keep the button look enabled if showing ignored suggestion */
    
    background-color: #dddddd;
}

.suggestionProposal {
    clear: both;
}

.scoreLabel {
    text-align: center;
    overflow-wrap: break-word;
    
    width: auto !important;
}

.scoreValue {
    font-size: 18px;
    font-weight: bold;
    
    margin: 5px 0;
}

.analyzeButtonHighlighted {
    outline: 2px solid rgb(255,136,17) !important; /* same color as in provisioning (.provisioningPendingLabel) */
    outline-offset: -2px;
}

/* Annotation properties. */
.annotatedElement {
    background-color: rgba(255,219,83,0.5);
}

.annotatedElement.selected {
    background-color: rgba(255,219,83,1);
}

.annotationPanel {
    position: absolute;
    width: 100%;
    height: 100%;
    
    background-color: rgba(255,219,83,0.5);
}

.annotationPanel.selected {
    background-color: rgba(255,202,0,0.6745); /* equal to rgb(255,219,83) */
}

/* Search panel properties. */
.searchMatch {
    background-color: #d9e5f3;
    margin: 5px 0px 5px 41px !important;
    padding: 4px 6px !important;
}

.searchTextLabel {
    font-size: 12px;
}

.searchHighlightLabel {
    background-color: yellow;
}

.searchLanguageLabel {
    font-weight: bold;
    color: gray;
}

.searchNewLineLabel {
    color: gray;
}