@import "../../tempo/ui/sail-client/shared-fonts.nocache.css";

/* We can't just set font-family on everything (*) here because of font awesome icons
   (like the dialog close icon in process modeler) */
.modelerheadertext,
.asiDialog,
.asiFlatTabs li a,
.dialogSection,
.asiForm,
.asiForm textarea,
.asiForm select,
input.Picker,
input.asiFormDate,
table.desGrid th,
.asiGrid th,
table.desGrid td,
.asiGrid td,
.asiGrid tbody td,
td.treeviewNodeContent,
textarea.iText,
input.iText,
input.iFile,
#smartServicesAutocompleteContainer .innerSuggestionDiv a,
#paletteHierarchyWrapper,
#smartServicesAutocomplete,
.toolbarMenu_item,
.toolbarMenu_item_disabled,
.messageWindow,
#toolbar .menubar,
ul.canvasTabs,
#environmentTitlebar #pageTitle,
.quickFilterLabel span.toolbarFilterLabel,
#environmentContent,
.appian-informationPanel,
.popupContent,
.paletteDragItem,
#smartServicesAutocompleteContainer,
#smartServicesAutocompleteContainerInline,
.inlineRecommendation,
#fontFamilyButtonWrapperDiv,
.fontFamilyOptions,
#fontSizeButtonWrapperDiv,
.fontSizeOptions,
.zoomOptions {
  font-family: "Appian Open Sans", sans-serif !important;
}

/* Data tab */
#asi_grid_nodeInputs .name {
  border: 1px solid #a0b6d0 !important;
}

input,
input.iText,
input.iFile,
textarea.iText,
input.Picker {
  font-size: 11px;
  border: 1px solid #c7c7c7;
  border-radius: 2px;
}

input,
input.iText,
textarea.iText,
input.Picker {
  padding: 2px 3px 3px 3px;
}

input.iFile {
  padding: 2px;
}

input.iText,
input.iFile,
textarea.iText {
  border: 1px solid #c7c7c7 !important; /* overwrites asiText.css */
}

#importFromLocalForm .asiForm {
  margin: 4px 4px 0 4px;
}

.asiForm,
.asiForm textarea,
.asiForm select,
input.Picker,
input.asiFormDate {
  font-size: 12px !important;
}

.asiForm .fields label input:not(.eSelectInput),
.asiForm .fields label textarea {
  border: 1px solid #c7c7c7;
  border-radius: 2px;
  padding: 2px 3px 3px 3px;
}

.asiForm .fields select {
  border: 1px solid #c7c7c7;
  height: 19px;
}

input:disabled,
textarea:disabled {
  background-color: #f6f6f6;
}

input::-ms-clear {
  display: none; /* Hide the x on the right of input fields. Needed because the clear is event is not properly being handled. */
}

textarea,
li a,
p,
a {
  font-size: 12px;
}

textarea {
  resize: none;
}

p {
  color: #000;
  font-weight: 400;
}

select {
  font-size: 11px;
}

a {
  cursor: pointer;
  color: #2322f0;
}

a:hover {
  color: #ff9933;
}

img {
  border: 0;
  margin: 0;
}

.nodeMenu {
  font-family: Arial;
  font-size: 12px;
  cursor: default;
  table-layout: fixed;
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  background-color: #c3ddfa;
  filter: alpha(opacity=90);
  border: solid 1px #96c0ee;
}

.nodeMenu_item {
  color: #2322f0;
  height: 20px;
}

.nodeMenu_item_disabled {
  color: graytext;
}

.nodeMenu_item_text {
  width: 180px;
  height: 15px;
  overflow: hidden;
}

.nodeMenu_item_header {
  width: 180px;
  height: 20px;
  overflow: hidden;
  text-align: center;
  font-weight: 700;
}

.nodeMenu_item_noheader {
  width: 180px;
  height: 0;
}

td {
  border: 0;
}

.simpleTable td {
  font-size: 11px;
  padding: 4px;
}

.desInfo {
  border: 1px solid #999;
  background: #fff;
}

.desInfo h5 {
  background: #fff;
  margin: 0;
  padding: 2px 2px 2px 5px;
}

.desInfo a {
  font-size: 11px;
}

.desInfo div.desDlgMain p {
  text-align: left;
  margin: 5px;
}

.meta {
  margin: 7px;
  border: 1px solid #eee !important;
  padding: 10px !important;
  font-weight: 400;
  text-align: left;
}

.meta p {
  margin: 0;
  padding: 0;
  font-weight: 400;
  text-align: left;
}

.dialogSection {
  border: 1px solid #eee !important; /* overwrites dialogSection.css */
}

.dialogSection .asiToolbar {
  background: none;
  padding: 0.5em 1.25em;
}

.desDlgMain .dialogSection h2 {
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 600;
  display: inline-block;
  font-size: 14px !important; /* overwrites dialogSection.css */
  color: #222;
  padding: 0.5714rem 0.8571rem !important; /* overwrites dialogSection.css */
  background-color: #f0f0f0 !important; /* overwrites dialogSection.css */
  color: #222 !important; /* overwrites dialogSection.css */
  max-width: calc(100% - 1.9em);
  width: 100%;
}

.dialogSection .asiGrid {
  width: 100%;
}

.dialogSection.quickFilters {
  height: auto !important; /* overwrites analytics.css */
  width: auto !important; /* overwrites analytics.css */
}

.desDlgMain .i18n-pmProperties {
  width: 100%;
  margin: 5px 10px -11px 10px;
  border-left: 1px solid #94a9b8;
}

.desDlgMain .i18n-nodeProperties,
.desDlgMain .i18n-configureForm {
  width: 100%;
  background: #fff;
}

.desDlgMain div.content {
  margin: 10px;
  border: 1px solid #ccc;
  background: #fff;
  color: #000;
  text-align: left;
  font-weight: 400;
}

.desDlgMain div.content input,
.desDlgMain div.content textarea {
  font-size: 12px;
}

.desDlgMain div.content textarea {
  width: 100%;
}

.desDlgMain div.help {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #e5e5e5;
  padding: 3px;
  margin: 0;
}

.desDlgMain div.help p {
  margin-top: 15px;
}

.desDlgMain div.header {
  font-size: 14px;
  font-weight: 700;
  margin: 10px;
}

.invisible {
  visibility: hidden;
}

table.desGrid {
  margin: 0;
}

/* Using some !important here since asiGrid is used in other
  css files (note: desGrid is only used in this file) */
table.desGrid,
table.asiGrid:not(.server) {
  border-collapse: collapse !important;
  padding: 0 !important;
  border: 1px solid #eee !important;
  width: 100% !important;
}

table.desGrid tr:nth-child(odd),
table.asiGrid:not(.server) tr:nth-child(odd) {
  background-color: #fafafa !important;
}

table.desGrid th,
table.asiGrid th {
  padding: 4px 5px 4px 10px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  border: 1px solid #eee !important;
  background: #ddd !important;
  line-height: 1.9em !important;
}

table.desGrid th {
  text-align: left;
}

table.desGrid td,
table.asiGrid td,
table.asiGrid tbody td {
  padding: 4px 5px 4px 10px !important;
  font-size: 12px !important;
  border: 1px solid #eee !important;
  background: none !important;
  vertical-align: middle !important;
}

table.desGrid td {
  cursor: pointer;
}

table.asiGrid.server tbody tr.selected td {
  background-color: #dce8ed !important;
}

.errorField {
  margin-top: 5px;
}

div.alertError {
  border: 1px solid #fff;
}

.errorText,
p.alertError,
div.alertError li,
.exclamation {
  color: red;
}

p.alertOK {
  color: green;
}

p.alertOK,
p.alertError,
div.alertError li {
  font-size: 14px;
}

p.alertError {
  background: url(../img/exclamation.gif) top left no-repeat;
  padding-left: 12px;
}

.exclamation {
  background: url(../img/exclamation.gif) center right no-repeat;
  padding-right: 12px;
}

.asiPicker h1 {
  margin: 0 0 20px;
  padding: 0 10px;
  font-size: 13px;
}

.desDlgMain .asiPicker .asiPickerSelectedCount {
  right: 25px;
}

.desDlgMain .asiPicker .controls {
  display: none;
}

/* **************************************** HEADER & TOOLBARS [Start] **************************************** */
/* Header */
.headerlogoappian {
  max-height: 32px;
  max-width: 100px;
  margin-top: 2px;
  margin-right: 0;
}

.modelerheader {
  background: #020a51;
  height: 60px;
  border-bottom: none;
  box-sizing: border-box;
  display: table;
  table-layout: fixed;
  width: 100%;
}

.modelerheaderleft,
.modelerheaderright,
.modelerheadercenter {
  display: table-cell;
  vertical-align: middle;
}

.modelerheaderleft {
  width: 260px;
  padding-left: 16px;
}

.modelerheaderright {
  text-align: right;
  width: 260px;
  padding: 0 18px 0 5px;
  background: linear-gradient(-45deg, #2322f0 120px, #020a51 120px);
}

.modelerheader.rtlHeader .modelerheaderleft {
  padding-right: 16px;
}

.modelerheader.rtlHeader .modelerheaderright {
  text-align: left;
  padding-left: 18px;
  background: linear-gradient(45deg, #2322f0 120px, #020a51 120px);
}

.modelerheaderlogo {
  height: 36px;
  width: 36px;
  margin: 0;
}

.modelerheadertext {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
  margin: 0 15px;
  max-width: 100%;
}

.modelerheadercenter {
  text-align: center;
}

.previewBanner {
  background-color: #d5d5d5;
  color: #333;
  display: inline-block;
  padding: 5px 10px;
  font-weight: 700;
}

.NavSearch {
  position: absolute;
  right: 16px;
  text-align: right;
  margin: 0;
  padding: 0;
  width: 320px;
}

.NavSearch form {
  margin: 0;
}

.NavSearch label {
  display: none;
}

.NavSearch input,
.NavSearch select {
  width: 128px;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #333;
  border-right: 1px solid #333;
  color: #000;
  font-size: 11px;
  height: 18px;
}

.NavSearch span {
  padding: 0;
  margin: 0;
  vertical-align: middle;
  font-size: 11px;
}

.NavSearch a {
  color: #2322f0;
  text-decoration: none;
  font-size: 12px;
  vertical-align: middle;
}

.toolBar {
  vertical-align: middle;
  position: relative;
  height: auto;
  cursor: default;
}

.toolBar.titleBar {
  background: #3f6d90;
  color: #fff;
  font-size: 12px;
  height: 22px;
  font-weight: 700;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #989898;
}

.messageWindow + span .toolbarMenu {
  top: 28px;
}

.messageWindow .resize_handler_container {
  height: 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: ns-resize;
  margin-bottom: -3px;
}

.resize_handler_container .resize_handler {
  height: 3px;
  width: 100%;
  background-color: #cccbff;
}

.resize_handler_container:hover .resize_handler {
  background-color: #2322f0;
}

/* menuBar class is used for both file toolbar and icon toolbar */
.menuBar {
  color: #000;
  background-color: #fff;
  font-size: 12px;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 4px;
}

/* File toolbar */
.menuBar.textMenu span {
  padding: 2px 4px;
  margin: 2px 4px;
  display: inline-block;
  cursor: pointer;
  flex: 0 0 auto;
}

.menuBar.textMenu span:last-of-type {
  margin-right: auto;
}

/* File toolbar dropdowns */
.toolbarMenu {
  font-size: 12px;
  cursor: default;
  table-layout: fixed;
  position: absolute;
  top: 16px; /* Offset by 16px to avoid the menu popping up directly under the mouse */
  width: 250px;
  background-color: #fff;
  border: solid 1px #ddd;
  padding: 4px 0;
  margin: 0;
  background-size: 100% 20px;
}

.toolbarMenu_item,
.toolbarMenu_item_disabled {
  height: 22px;
  padding: 0;
}

.toolbarMenu_item {
  color: #000;
}

.toolbarMenu_item_disabled {
  color: #767676;
}

.toolbarMenu_item_text {
  width: auto;
  height: 20px;
  overflow: hidden;
  vertical-align: middle;
  padding: 0;
}

/* Icon toolbar */
.switchMode {
  float: right;
  padding: 0;
  border: 0;
  margin-top: -2px;
  margin-bottom: -3px;
}

.newbuttons span {
  padding: 2px;
  margin: 0 2px;
  display: inline-block;
  cursor: pointer;
  flex: 0 0 auto;
  height: 16px;
}

#activityExceptionButton,
#activeprocessesButton,
#processDetailsButton {
  display: flex; /* needed for correct vertical alignment */
}

.newbuttons span.activityExceptionText,
.newbuttons span.processInstancesText,
.newbuttons span.processDetailsText {
  padding: 0;
  margin: 0 0 0 4px;
}

/* Hide text on narrow screen */
@media only screen and (max-width: 1156px) {
  .newbuttons span.activityExceptionText,
  .newbuttons span.processInstancesText {
    display: none;
    margin: 0;
  }
}

.newbuttons img {
  max-height: 16px;
}

#zoomButtonWrapperDiv,
#fontFamilyButtonWrapperDiv,
#fontSizeButtonWrapperDiv {
  flex: 0 0 auto;
  padding-right: 4px;
  margin-left: 1px;
  cursor: pointer;
}

#zoomButton {
  height: 18px !important; /* overwrites ModelerNode.css */
  padding: 1px 2px;
}

/* Percent zoom, font family, font size dropdowns */
#zoomcontrol,
#fontfamilycontrol,
#fontsizecontrol {
  font-size: 12px;
  cursor: pointer;
  z-index: 10;
  position: absolute;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #ddd;
}

.zoomOptions,
.zoomFitOption,
.fontFamilyOptions,
.fontSizeOptions  {
  padding: 4px 5px;
}

.zoomFitOption {
  width: 78px;
}

#fontFamilyButtonWrapperDiv #fontFamilyButton,
#fontSizeButtonWrapperDiv #fontSizeButton {
  height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  padding-right: 0;
}

#fontFamilyButtonWrapperDiv #fontFamilyButton {
  width: 65px;
}

#fontSizeButtonWrapperDiv #fontSizeButton {
  width: 50px;
}

.toolbarDropdownImg {
  max-height: 16px;
  margin: 2px;
}

.modelerViewDropdownField {
  color: #333;
  border-radius: 0;
  border: 1px solid #ddd;
  background-color: #fff;
  margin-top: 1px;
}

.toolbarDropdown {
  position: relative;
  border: 1px solid transparent;
}

.toolbarDropdownDisabled {
  cursor: default;
}

.toolbarDropdown img,
.toolbarDropdownSelected img,
.toolbarDropdownDisabled img {
  margin-top: 6px; /* needed for correct vertical alignment */
}

.toolbarDropdown:hover,
#zoomButtonWrapperDiv:hover,
#fontFamilyButtonWrapperDiv:hover,
#fontSizeButtonWrapperDiv:hover,
.fontButton:hover {
  border: 1px solid transparent;
  background-color: #eee;
}

.zoomOptions:hover,
.zoomFitOption:hover,
.modelerDropdown div:hover,
.fontFamilyOptions:hover,
.fontSizeOptions:hover {
  background-color: #eee;
}

div.modelerDropdown {
  z-index: 12;
  position: absolute;
  padding: 0;
  background: #fff;
  border: 1px solid #ddd;
  display: none;
}

.modelerDropdown div {
  z-index: 13;
  padding: 2px;
  cursor: pointer;
}

/* Icon toolbar button default, hover, selected & disabled styling */
.menuButtonMouseOut, 
.fontButton {
  border: 1px solid transparent;
}

.color_select {
  position: relative;
  width: 16px;
  height: 16px;
  margin: 0 2px 0 5px;
  flex: 0 0 auto;
  cursor: pointer;
  border-radius: 2px;
}

.menuButtonMouseOver {
  border: 1px solid transparent;
  background-color: #eee;
}

.menuButtonMouseDown,
.toolbarDropdownSelected,
.zoomButtonWrapperDivSelected,
.fontFamilyButtonWrapperDivSelected,
.fontSizeButtonWrapperDivSelected,
.fontButtonSelected {
  border: 1px solid transparent;
  background-color: #cccbff;
}

#connectButton,
#laneButton {
  margin-right: 0;
}

#connectorToolbarDropdown,
#laneToolbarDropdown {
  margin-left: 0;
}

/* Analyst & designer view buttons */
.buttonGroup {
  margin-left: auto;
  display: flex; /* needed to prevent buttons from stacking on narrow screen */
  padding-left: 4px;
  min-width: 0; /* needed to allow buttons to shrink on narrow screen */
}

.buttonGroup button.selected {
  cursor: default !important;
}

.buttonGroup button:not(.selected):hover {
  box-shadow: 0 0 4px #2322f0 inset !important;
}

.menuButtonDisabled {
  opacity: 0.33;
  pointer-events: none;
  border: 1px solid transparent;
}
/* **************************************** HEADER & TOOLBARS [End] **************************************** */

/* ****************************************** LEFT PALETTE [Start] ****************************************** */
#asi_hierarchy_component_process_palette_menu > ul.asiHierarchy {
  margin: 0;
  font-size: 10px;
}

.paletteItem,
.paletteDragItem {
  padding: 0 4px;
  font-size: 10px;
  text-transform: uppercase;
  background-color: #fff;
  color: #333;
  height: 26px;
  line-height: 24px; /* purposely different from height for correct vertical alignment */
  box-sizing: border-box;
}

.paletteItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #cccbff;
  width: 100%;
}

.paletteItem:hover {
  border-color: #2322f0;
  cursor: pointer;
}

.paletteItem img, .paletteDragItem img {
  max-width: 18px;
  max-height: 18px;
}

.paletteItem div, .paletteDragItem div {
  overflow: hidden;
  text-overflow: ellipsis;
}

.palette_item_icon {
  margin-right: 4px;
}

.palette_item_plugin {
  margin-left: auto;
  padding-left: 4px
}

.paletteItem strong {
  background: unset; /* needed to override yellow in asiAutocomplete.css */
}

.paletteDragItemContainer {
  position: relative;
  top: -40px;
  left: -72px;
  border: 1px solid #cccbff;
  width: 207px;
  background-color: #fff;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
}

.paletteDragItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
}

#asi_hierarchy_component_process_palette_menu a.expand_collapse_toggle {
  display: inline-block;
}

/* Top level category specific styling */
#asi_hierarchy_component_process_palette_menu .asiHierarchy li.palette_category_modern > a {
  background-color: #1e3184;
  padding: 3px 0;
  font-size: 11px;
  display: inline-block;
  height: 15px;
}

#asi_hierarchy_component_process_palette_menu .asiHierarchy li.palette_category_modern > a.palette_name {
  font-weight: 800;
  color: #fff;
  width: calc(100% - 12px); /* subtract width of toggle icon */
}

#asi_hierarchy_component_process_palette_menu li.palette_category_modern > .expand_collapse_toggle,
#asi_hierarchy_component_process_palette_menu li.palette_category_modern > .expand_collapse_toggle > span > img {
  vertical-align: top;
}

#asi_hierarchy_component_process_palette_menu li.palette_category_modern > .expand_collapse_toggle > span img {
  margin-top: 2px;
}

/* Sub category specific styling */
#asi_hierarchy_component_process_palette_menu .asiHierarchy li.palette_category_modern > ul {
  margin: 0 6px 0 0;
}

#asi_hierarchy_component_process_palette_menu .asiHierarchy li.palette_modern {
  padding: 4px 0;
  margin: 0 0 0 6px;
  font-size: 0;
}

#asi_hierarchy_component_process_palette_menu .asiHierarchy li.palette_modern > a {
  font-size: 11px;
  font-weight: 800;
  color: #555;
  display: inline-block;
}

#asi_hierarchy_component_process_palette_menu .asiHierarchy li.palette_modern > a.palette_name {
  width: calc(100% - 12px); /* subtract width of toggle icon */
}

#asi_hierarchy_component_process_palette_menu li.palette_modern > .expand_collapse_toggle > span img,
#asi_hierarchy_component_process_palette_menu li.palette_modern > .expand_collapse_toggle > img {
  margin-top: -2px;
}

/* End node specifc styles */
#asi_hierarchy_component_process_palette_menu .asiHierarchy li.palette_modern > ul,
#asi_hierarchy_component_process_palette_menu li.palette_item_modern {
  margin: 3px 0 0 0;
}

/* Hide blank image from end nodes and folder image from sub categories */
#asi_hierarchy_component_process_palette_menu li.palette_modern > a.palette_name > img,
#asi_hierarchy_component_process_palette_menu li.palette_item_modern > img {
  display: none;
}

.asiHierarchyContainer {
  overflow-y: visible;
  overflow: visible;
}

/**
 * A wrapper container is needed around the palette hierarchy because
 * when the hierarchy is expanded and the scrollbars are shown, if we expand it
 * again, since the hierarchy re-renders, the scrollbars would go all the way to the top.
 * If we have a container wrapped, the scrollbars stay in their position.
 */
#paletteHierarchyWrapper {
  overflow: visible;
  height: calc(100% - 130px);
  width: 100%;
}

#recommenderContainer,
.inlineRecommendation {
  white-space: nowrap;
  overflow: hidden;
}

#recommenderContainer {
  margin: 0 0 0 6px;
}

.inlineRecommendation {
  padding-left: 6px;
}

#recommenderHierarchy {
  padding-bottom: 2px;
}

#recommenderHierarchy a,
#paletteHierarchyWrapper a,
.predictiveNode a,
.toolbarMenu a {
  color: #333;
}

#recommenderHierarchy li a {
  font-weight: 700;
}

#asi_hierarchy_component_process_palette_menu {
  overflow: visible;
  height: calc(100% - 42px);
}

#container .search {
  padding: 5px 0;
}

#AppianProcess .search {
  border: none;
  padding: 6px;
  background: #f8f8f8;
}

#paletteHierarchyWrapper .suggestedLabel {
  font-weight: 800;
  font-size: 11px;
  color: #fff;
  margin-bottom: 4px;
  padding: 3px 0 3px 2px;
  background-color: #1e3184;
}

#paletteHierarchyWrapper .category_expand_collapse_arrows {
  filter: brightness(0) invert(1);
}

#paletteHierarchyWrapper .suggestedLabel img {
  margin-top: -3px;
}

#smartServicesAutocomplete {
  font-size: 14px;
  padding: 3px 3px 3px 20px;
  width: 100%;
  background: url('../designer/img/palettesearch/fa-search.svg') no-repeat 50% 50%;
  background-color: #fff;
  background-position: 3px;
  border-radius: 0;
}

#smartServicesAutocomplete::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

#smartServicesAutocomplete:focus::-webkit-search-cancel-button,
#smartServicesAutocomplete:hover::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: inline-block;
  height: 12px;
  width: 12px;
  background: url('../designer/img/palettesearch/fa-times-circle.svg') no-repeat 50% 50%;
  background-color: #fff;
}

#smartServicesAutocomplete::-webkit-search-cancel-button:hover {
  transform: scale(1.1);
  cursor: pointer;
}

#smartServicesAutocomplete:focus {
  border-color: #2322f0;
  outline: none;
}

#smartServicesAutocomplete::-webkit-input-placeholder {
  color: #767676;
  -webkit-text-fill-color: #767676; /* needed so disabled placeholder text color is correct in Safari */
  font-style: italic;
  font-weight: 300;
}

#smartServicesAutocomplete::-ms-input-placeholder {
  color: #767676;
  font-style: italic !important;
  font-weight: 300;
}

#smartServicesAutocomplete::-moz-placeholder {
  color: #767676;
  font-style: italic;
  font-weight: 300;
  opacity: 1;
}

#smartServicesAutocompleteContainer {
  height: calc(100% - 31px);
  overflow: auto;
  padding-left: 5px;
}

#smartServicesAutocompleteContainer div {
  font-size: 11px;
  color: #555;
}

#smartServicesAutocompleteContainer .paleteSearchHeader,
#smartServicesAutocompleteContainerInline .paleteSearchHeader {
  background-color: #1e3184;
  font-weight: 800;
  color: #fff;
  font-size: 11px;
  padding: 3px 0px 3px 6px;
  margin: 0px 0px 3px -5px;
  cursor: default;
}

.paletteItem.recommendedNode {
  /* Subtracting 6px to account for margin */
  width: calc(100% - 6px);
  margin-bottom: 3px;
}

#smartServicesAutocompleteInline {
  width: 97%;
  margin: 5px;
}

.inlineSearch .innerSuggestionDiv {
  margin: 5px 0 0 6px;
}

#smartServicesAutocompleteContainerInline {
  overflow: hidden;
}

#smartServicesAutocompleteContainer .innerSuggestionDiv > div,
#smartServicesAutocompleteContainerInline .innerSuggestionDiv > div {
  font-size: 10px;
  color: #333;
  margin-bottom: 3px;
  width: calc(100% - 6px);
}

#smartServicesAutocompleteContainerInline .paleteSearchHeader {
  margin: 0;
}

.inlineSearch a,
.inlineRecommendation a {
  display: block;
}

/* Only the anchor tag is draggable and nothing inside it. We want to allow the drag
  event to bubble up, therefore, we use this magic pointer-events attribute. */
.innerSuggestionDiv a * {
  pointer-events: none;
}

.innerSuggestionDiv .paletteItem {
  margin-left: 0;
  padding-top: 0;
}
/* ****************************************** LEFT PALETTE [End] ****************************************** */

/* Canvas tabs - Display below the icon toolbar */
ul.canvasTabs {
  background: none;
  overflow-y: hidden;
  border-bottom: 1px solid #ddd;
  height: 25px !important; /* overwrites asiTabs.css */
  display: flex;
  flex-wrap: nowrap;
}

.canvasTabs li {
  border: none;
  width: auto;
  border-right: 1px solid #ddd;
  padding-left: 3px;
  padding-right: 3px;
}

.canvasTabs li div.tabDiv {
  border-bottom-color: #fff;
  border-width: 3px 0 3px 0;
}

.canvasTabs li.current {
  border: none;
  border-bottom: none;
  border-left: none;
  background-color: #2322f0;
}

.canvasTabs li img.closeTab {
  margin-top: 4px !important; /* overwrites asiTabs.css */
  margin-right: 5px !important; /* overwrites asiTabs.css */
}

.canvasTabs li.current div.tabDiv {
  background: none;
  border-top-color: #2322f0;
  border-bottom-color: #2322f0;
  color: #fff;
}

.canvasTabs .tabMode {
  font-style: italic;
  color: #999;
  margin-right: 4px;
  font-size: 10px;
  vertical-align: -12px;
  font-weight: 400;
}

.canvasTabs .current .tabMode {
  color: #ddd;
}

.canvasTabs li div.tabName {
  text-overflow: ellipsis;
  margin-right: 4px;
  padding-left: 5px !important; /* overwrites asiTabs.css */
  vertical-align: 13px !important; /* overwrites asiTabs.css */
}

img.pageArrow {
  display: block;
  max-height: 11px;
  max-width: 16px;
}

div.arrows {
  background-color: #eee;
}

.jsxspyglass {
  background-color: #c3ddfa;
  filter: alpha(opacity=80);
  border: solid 1px #96c0ee;
  width: 100px;
}

label.simulation {
  width: 140px;
  text-align: right;
  font-weight: 700;
}

.variance {
  margin: 2px;
}

.paths th,
.variance2 th,
.variance th {
  font-size: 10px;
  font-weight: 400;
}

table.simulation tr td {
  text-align: center;
  vertical-align: middle;
}

#asi_grid_simulation_scenarios .asiGridTD0,
#asi_grid_simulation_scenarios .asiGridTH0 {
  display: none;
}

div.saveAs {
  margin: 0;
  padding: 0;
  height: 18px;
}

.saveAsToolbar a {
  font-size: 11px;
}

.asiGrid.hideHeader .asiGridOuterContainer {
  margin: 0 !important;
  width: 100% !important;
}

.asiGrid.hideHeader th {
  color: #333 !important;
}

.lookin {
  margin-top: 4px;
  margin-left: 10px;
}

.lookin a {
  color: #333;
  font-size: 12px;
}

.lookin a:hover {
  color: #49779c;
}

#asi_gridMain_apGetProcessModelsFolder a {
  color: #2322f0;
}

#asi_gridMain_apGetProcessModelVersions a {
  color: #000;
}

#asi_gridMain_apGetProcessModelsFolder .asiGridHeaders th,
#asi_gridMain_apGetProcessesModels .asiGridHeaders th a,
#asi_gridMain_apGetProcessModelVersions .asiGridHeaders th {
  color: #49779c;
}

#asi_gridMain_apGetProcessModelsFolder .asiGridRowSpacer,
#asi_gridMain_apGetProcessModelsFolder .asiGridTD0,
#asi_gridMain_apGetProcessModelsFolder .asiGridTH0,
#asi_gridMain_apGetProcessModelVersions .asiGridRowSpacer,
#asi_gridMain_apGetProcessModelVersions .asiGridTD0,
#asi_gridMain_apGetProcessModelVersions .asiGridTH0,
#asi_gridMain_ProcessSpawnedNodes .asiGridTD0,
#asi_gridMain_ProcessSpawnedNodes .asiGridTH0,
div.warningRelationship .asiGridTD0 {
  display: none;
}

div.warningRelationship .asiGrid {
  width: 100%;
}

/* Buttons syles are also defined in iButton.css, asiToolbar, asiExpressionEditor.css,
   layout.css, login.css, custom_branding.css */
input.iBlueButton,
input.iOrangeButton,
.buttonGroup button {
  cursor: pointer !important;
  text-transform: uppercase !important;
  text-align: center !important;
  font-family: inherit !important;
  color: #2322f0 !important;
  fill: #2322f0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 2.5em !important;
  vertical-align: middle !important;
  padding: 0 0.7143em !important;
  margin: 1px 0 !important; /* 0 margin left/right needed for correct spacing on Safari */
  max-width: 28em !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  background-color: #fff !important;
  border: 1px solid #2322f0 !important;
  border-radius: 0 !important; /* needed to prevent rounded corners on Mac Chrome v62 */
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-transition-duration: 0.2s !important;
  transition-duration: 0.2s !important;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-font-smoothing: antialiased; /* Safari-only: smooth transform */
}

/* Overwrites styles in the ruleset directly above */
.buttonGroup button {
  font-size: 12px !important;
  font-weight: 600 !important;
  height: 25px !important;
  flex: 0 1 auto;
}

.designerButtonDiv {
  padding: 6px 12px;
  position: absolute;
  bottom: 0;
  text-align: right;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  border-top: 1px solid #d4d4d4 !important;
  background-color: #fff;
}

.designerButtonDiv input.iBlueButton {
  width: auto;
  border: 1px solid #ddd;
  background-color: #fff;
  padding: 8px 12px;
  color: #666;
  font-weight: 400;
}

.designerButtonsLeft {
  float: left;
}

.designerButtonsRight {
  float: right;
}

.designerButtonsRight input.iBlueButton:first-child {
  font-weight: 700;
}

.designerButtonsRight input.iBlueButton:first-child,
.buttonGroup button.selected {
  background-color: #2322f0 !important;
  border-color: #2322f0 !important;
  color: #fff !important;
  fill: #fff !important;
}

.designerButtonsRight input.iBlueButton:first-child:not(:disabled):hover,
.designerButtonsRight input.iBlueButton:first-child:not(:disabled):focus {
  background-color: #2322f0 !important;
  outline-color: #2322f0 !important;
}

input.iBlueButton:not(:disabled):active,
input.iBlueButton:not(:disabled):hover {
  box-shadow: 0 0px 5px #2322f0 !important;
}

.saveintoInput select {
  width: 110px;
}

.typeInput select {
  width: 120px;
}

/* record props */
.leaf {
  padding: 1px;
  color: #000;
}

#selected.leaf {
  background: #0a246a;
  color: #fff;
}

#printmeta,
.printmetaimg {
  display: none;
}

.asiForm p {
  font-weight: 400;
  font-size: 10.5px;
  text-align: left;
  width: 37%;
  margin: 3px 1.25% 7px;
  float: left;
  letter-spacing: 0.04em;
}

.asiForm .legend {
  min-height: 1px;
}

.asiHeader {
  padding: 0 5px;
  background: #bdd3e7;
  text-align: left;
  color: #333;
  font-size: 13px;
  font-weight: 700 !important;
  height: 21px;
  overflow: hidden;
  line-height: 21px;
  border: 0;
  margin: 0;
  position: relative;
}

.normalAnnotation {
  position: absolute;
  border: 0;
  margin: 1px;
  z-index: 15;
}

.normalAnnotation textarea {
  position: absolute;
  overflow: auto;
  border: 2px solid #cccbf8;
  padding: 2px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .10);
}

.normalAnnotation div.handle {
  display: none;
}

.normalAnnotation div.anchor {
  z-index: 7;
  position: absolute;
  overflow: hidden;
  border: 0;
  padding: 0;
  width: 5px;
  height: 5px;
}

.normalAnnotation div.anchor img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.selectedAnnotation {
  position: absolute;
  border: 1px solid #fcb858;
  cursor: move;
  z-index: 100;
}

.selectedAnnotation textarea {
  position: absolute;
  overflow: auto;
  outline: none;
  border: 2px solid #cccbf8;
  padding: 2px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .10);
}

.selectedAnnotation div.handle {
  position: absolute;
  overflow: hidden;
  border: 0;
  width: 5px;
  height: 5px;
  background: #fcb858;
}

.selectedAnnotation div.anchor {
  display: none;
}

.selectedAnnotation.resizing {
  border-style: dashed;
}

.selectedAnnotation.resizing textarea {
  filter: alpha(opacity: 40);
}

.selectedAnnotation.resizing div {
  display: none;
}

.booleanExpression {
  white-space: nowrap;
}

.booleanExpression .editableSelect,
.booleanExpression select,
#eventOutputExpressions select {
  margin: 2px 5px 2px 0;
  display: inline;
  height: 23px;
}

.booleanExpression .editableSelect,
.booleanExpression .editableSelect select,
.booleanExpression.editableSelect,
.booleanExpression.editableSelect select {
  width: 173px;
}

.editableSelect select::-ms-value {
  opacity: 0; /* removes blue background on IE11 when selected */
}

.booleanExpression div.editableSelect input,
.booleanExpression .editableSelect div {
  width: 150px;
}

.booleanExpression img {
  vertical-align: middle;
}

.booleanExpression div.editableSelect input,
.booleanExpression .editableSelect div {
  position: absolute;
  top: 2px;
  left: 0;
}

div.editableSelect input {
  top: 0 !important; /* editableSelect.css has 3px !important*/
}

.editableSelect input {
  outline: none;
}

.asiGrid input.expText {
  border: 1px solid #a0b6d0 !important;
  font-family: Arial;
  width: inherit;
  height: 19px;
}

.asiGrid input.expText.full {
  width: 90%;
  padding-top: 2px;
}

.initialText {
  color: #ccc;
}

.unsaved {
  vertical-align: 0;
  font-weight: 700;
}

.configEventEsc {
  display: block;
  margin: 3px 0 7px 15px;
}

.configEventEsc img {
  margin-right: 3px;
}

.configEventEsc a {
  margin-left: 20px;
}

#paletteHotspot {
  position: absolute;
  height: 20px;
  width: 300px;
  border: 1px solid blue;
  top: 55px;
  left: 850px;
}

.paletteHotspot {
  background: transparent;
}

.paletteHotspot.onTarget {
  background: #000;
}

.flowDecorator {
  position: absolute;
  text-align: center;
  /* Setting this to 2 so that it's always above annotation lines, which have a max z-index of 1 when active */
  z-index: 2 !important;
}

.chainIndicator {
  /* need to specify a relative height and width so that zooming and centering works correctly */
  width: 1.333em;
  height: 1.333em;
  text-align: center;
  margin: 1px 2px;
  font-size: 1em;
}

.verticalText {
  writing-mode: tb-rl;
  filter: fliph flipv;
}

div.lane {
  position: absolute;
  z-index: -2;
}

div.lane div {
  position: relative !important;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

div.dialog {
  padding: 10px;
}

div.dialog .label {
  font-weight: 700;
  width: 45%;
  padding: 4px 0 5px 5px;
  display: inline-block;
  min-height: 25px;
  height: auto !important;
  height: 25px;
}

div.dialog .input {
  width: 45%;
  display: inline-block;
}

div.dialog .header {
  height: 20px;
  padding-top: 2px;
}

div.dialog .headerText {
  font-weight: 400;
  display: inline;
  margin-left: 22px;
}

div.dialog .helpText {
  position: absolute;
  font-weight: 400;
  right: 6px;
}

div.dialog .colorselect {
  height: 16px;
  width: 51px;
  margin: 1px 0;
  border: 1px solid #000;
  background: #000;
  cursor: pointer;
  display: inline-block;
}

#AppianProcess .asiExpressionEditor {
  height: auto !important;
}

.asiExpressionEditor p,
.asiExpressionEditor li a,
.asiExpressionEditor label,
.asiExpressionEditor li {
  font-size: 11px !important;
  font-family: Arial, Verdana, Tahoma, Helvetica;
}

.asiExpressionEditor .asiHierarchy .hToggle {
  margin-right: 3px;
}

#eventsGridContainer .asiGridTH2,
#eventsGridContainer .asiGridTD2 {
  width: 300px;
}

#eventsGridContainer .asiGridTH3,
#eventsGridContainer .asiGridTD3 {
  width: 150px;
}

#eventsGridContainer .asiGridTH4,
#eventsGridContainer .asiGridTD4 {
  width: 60px;
}

#eventsGridContainer .asiGridTD4 {
  width: 35px;
  padding-left: 25px;
}

.inline .inputMode,
.inline .inputMode label {
  display: inline !important;
}

/* Expression Editor - Overwrites asiExpressionEditor.css, expressionEditor.css */
#functionsAutocompleteContainer,
#functionsHierarchyContainer,
#asi_hierarchy_component_rules_expression_editor_hierarchy {
  height: 350px !important;
}

/* !important overwrites asiExpressionEditor.css, layout.css */
.infoArea {
  height: 243px !important;
}

.infoArea .details {
  height: 196px;
}

.expTextArea,
.infoArea,
#paletteArea {
  border: 1px solid #d4d4d4 !important;
}

.expTextArea {
  padding: 5px !important;
}

#paletteArea {
  float: left;
  margin: 7px;
  padding: 0;
  width: 290px !important;
  height: 445px !important;
  max-height: 453px;
}

.asiExpressionEditor {
  width: 750px !important;
}

.asiExpressionEditorWithVariablePane {
  width: 1200px !important;
  position: absolute;
  margin: 0;
  font-size: 11px !important;
  color: black;
  border: 1px solid #2f2f2f;
  padding: 0px 0px 45px 0px;
}

.palette {
  margin: 1px 0px !important;
  height: 400px !important;
}

/* Template and Email SNs Setup Tab */
#SNSetupTab .asiForm li {
  padding-bottom: 0;
}

#SNSetupTab .asiForm input.Picker,
#SNSetupTab .asiForm textarea.Picker {
  width: 77% !important;
}

/* This affects all pickers rendered with ap.forms.picker3.render() */
.pmPicker3 .Picker {
  width: 65%;
  min-height: 15px;
  height: auto !important;
  height: 15px;
}

.asiForm input.Picker {
  min-height: 15px;
  height: auto !important;
  height: 15px;
}

.asiPicker.v3.asiSinglePicker .asiPickerSelected textarea {
  height: 19px;
  font-size: 11px;
  border: 1px solid;
  border-radius: 2px;
  padding: 2px;
}

.asiPicker.v3 div.asiPickerSelected textarea {
  float: left;
}

.asiPicker.v3 .asiBrowseDropdown,
.asiPicker.v3 .createElements {
  display: flex;
  align-items: center;
}

/* !important overwrites asiBrowse.css, asiForm.css, asiPicker.css, layout.css */
.asiPicker.v3 .asiPickerButtons {
  bottom: 3px !important;
}

.asiPicker.v3 .asiSearchBox,
.asiPicker.v3 .asiPickerSelector,
.asiPicker.v3 .asiPickerPreview {
  border: 1px solid #eee !important;
}

#SNSetupTab .rightHeaderLinks {
  color: #4271c6;
  float: right;
}

#SNSetupTab .rightHeaderLinks strong {
  color: #000;
  font-weight: 700;
  vertical-align: middle;
}

#SNSetupTab .rightHeaderLinks a {
  padding: 0 4px 0 3px !important;
  margin: 0;
}

#SNSetupTab .asiForm {
  width: 100%;
  margin: 0;
}

.templateMergeGrid .asiGrid .asiGridTD1 input {
  width: 94%;
}

.templateMergeGrid .asiGrid .asiGridTD0,
.templateMergeGrid .asiGrid .asiGridTH0 {
  width: 300px;
  word-wrap: break-word;
}

.templateMergeGrid .asiGrid .asiGridTD1,
.templateMergeGrid .asiGrid .asiGridTH1 {
  width: 400px;
}

/* Webservices setup tab */
.WSSetupTab .fieldButton input {
  margin-left: 155px;
}

.WSSetupTab .dlgScnBdyButton input {
  margin: 15px;
}

.WSSetupTab .dialogSection h3 {
  font-size: 11px;
}

.WSSetupTab .booleanCheckbox input {
  margin-left: -4px;
}

.WSSetupTab .dialogSection h3 {
  font-weight: 400;
}

.WSSetupTab table.dynamicTblForm {
  width: 100%;
}

.WSSetupTab table.dynamicTblForm td {
  font-size: 11px;
  padding: 4px;
}

.WSSetupTab table.dynamicTblForm td.label {
  text-align: right;
  font-weight: 700;
  width: 18%;
}

.WSSetupTab table.dynamicTblForm td.value {
  padding: 0 10px;
}

.WSSetupTab table.dynamicTblForm td.value input {
  width: 68.5%;
  margin-right: 6px;
}

.WSSetupTab .inputWithLink {
  position: relative;
}

.WSSetupTab .inputWithLink a {
  position: absolute;
  top: 3px;
}

.WSSetupTab fieldset {
  width: 95%;
}

.WSSetupTab .inputWithLink fieldset,
.WSSetupTab .inputWithLink li {
  display: inline; /* Convert to inline and adjust widths to place the image buttons to the right of the fields */
}

.WSSetupTab .inputWithLink .fields {
  width: 72%;
}

.WSSetupTab .inputWithLink .fields label input {
  width: 100%;
}

.WSSetupTab .inputWithLink.withExpression .fields label input {
  width: 96%;
}

.WSSetupTab .warning {
  background-color: #ffffe1;
  background-image: url("../../components/toolbar/img/blueinfo.gif");
  background-repeat: no-repeat;
  background-position: 10px center;
  padding: 6px 10px 6px 30px;
}

.WSWarningsDlg .warningsInfo {
  background-color: #e9eff3;
  background-image: url("../../components/toolbar/img/info.gif");
  background-repeat: no-repeat;
  background-position: 10px center;
  padding: 6px 10px 6px 40px;
  border: 1px dotted #a2a2a2;
  margin: 5px;
}

.WSWarningsDlg .warnings {
  height: 160px;
  overflow: auto;
}

.WSWarningsDlg .warning {
  background-image: url("../../components/toolbar/img/blueinfo.gif");
  background-repeat: no-repeat;
  background-position: 10px center;
  padding: 6px 10px 6px 40px;
  border-bottom: 1px dotted #a2a2a2;
}

.unattendedFormTabMessage {
  font-weight: 700;
  text-align: center;
  margin-top: 30px;
}

#FormTabAttended .existingForm {
  border: 1px solid red;
}

#FormTabAttended .aVTabContentContainer {
  width: 450px;
  min-height: 90px;
  height: auto !important;
  height: 90px;
}

/*Active when dynamicui.modeler.forms feature toggle is ON*/
#FormTabAttended .aVTabContentContainer.tempoFormEnabled {
  min-height: 160px;
  height: auto !important;
  height: 160px;
}

#FormTabAttended .aVTabContentContainer .fields {
  width: 80%;
}

#FormTabAttended {
  min-height: 380px;
  height: auto !important;
  height: 380px;
}

#FormTabAttended .existingFormTabs .aVTabs li.current a {
  color: #000;
}

#FormTabAttended .existingFormTabs div.legend {
  width: 100%;
  display: block;
  text-align: left;
  padding-left: 15px;
  padding-bottom: 4px;
}

#FormTabAttended .existingFormTabs input {
  padding-left: 3px;
}

#attachmentDialog .aVTabs li img {
  width: 15px;
}

/* Loading splash screen */
#modelerViewSplash {
  position: relative;
  width: 500px;
  height: 350px;
  background: url(../designer/img/view_splash.gif);
}

#modelerViewSplash div {
  position: absolute;
  width: 380px;
  height: 60px;
  left: 50px;
  border: 1px dashed #fff;
  padding: 10px;
}

#modelerViewSplash div.modelerViewSplashOnHover {
  border-color: #97a9b4;
  background-color: #e9eef2;
  cursor: pointer;
}

#modelerViewSplash div img {
  float: left;
  margin-right: 10px;
}

#modelerViewSplash .modelerViewSplashTitle {
  padding-top: 10px;
  display: block;
  font-weight: 700;
}

#modelerViewSplash .modelerViewSplashDescription {
  font-size: 0.9em;
}

#modelerViewSplash div.simpleView {
  top: 100px;
}

#modelerViewSplash div.expertView {
  top: 190px;
}

#modelerViewSplash span.savePreference {
  position: absolute;
  bottom: 25px;
  left: 15px;
  font-size: 0.9em;
}

#AppianProcess .es .es_text {
  height: 19px;
  border: 1px solid #c7c7c7;
  border-radius: 2px;
}

#AppianProcess .es .es_hidden {
  display: none;
}

/* Diablo data tab */
#dataTab_tabs {
  margin-top: 10px;
}

.dataTabTreePane,
.dataTabDetailsPane {
  border: 1px solid #d4d4d4;
  height: 330px;
  margin-left: 6px;
  margin-top: 6px;
  width: 48%;
  display: inline-block;
  vertical-align: top;
}

.dataTabDetailsPane .paneHeader {
  border: none;
  background-color: #f0f0f0;
  padding: 9px;
}

.dataTabTreePane .paneContents,
.dataTabDetailsPane .paneContents {
  height: 290px;
  width: 99%; /* #35368: If set to 100%, some strange jumping of fields presents itself in the right pane when clicking on the right pane pickers.*/
  overflow: auto;
}

.dataTabTreePane .paneContents #outputMessage,
.dataTabTreePane .paneContents #propertyMessage {
  height: 21px;
}

#fieldProperties a {
  font-size: 11px;
}

.autoFillPlaceholder {
  opacity: 0;
  position: absolute;
  z-index: -20;
}

#operatorContainer select {
  margin-bottom: 4px;
}

.dataTabDetailsPane .paneHeader {
  border-bottom: 1.1px dotted #a2a2a2; /* BUG: ie 6 shows dashed instead of dotted for 1px borders*/
  background-color: #efefef;
  padding: 4px;
  font-size: 12px;
  font-weight: 700;
}

.dataTabNodeInputs {
  padding-bottom: 6px;
}

.emptyPropertiesMessage {
  margin-top: 120px;
  text-align: center;
}

/* Data tab (old style) outputs */
.dataTabNodeOutputs .asiGridTH0 {
  width: 5%;
}

.dataTabNodeOutputs .asiGridTH1 {
  width: 30%;
}

.dataTabNodeOutputs .asiGridTH3 {
  width: 35%;
}

.dataTabNodeOutputs .atIndexOf {
  width: 40px;
}

.quirksMode .asiToolbar {
  font-size: 12px;
}

.quirksMode .asiToolbar a {
  margin: 4px 10px 6px 0;
}

.quirksMode .asiToolbar .asiGridPageCtrls a,
.quirksMode .asiToolbar .asiGridPageCtrls span {
  margin: 3px;
}

.sendMessage img {
  vertical-align: bottom;
}

/*Queries is the ID for the container that holds the "Query" table in the RDBMS node. Without the width being fixed
  typing in the query textarea resized the table after each keypress. */
#queries .asiGridTH0 {
  width: 5%;
}

#queries .asiGridTH1 {
  width: 10%;
}

#queries .asiGridTH2 {
  width: 85%;
}

.headerOuter {
  display: flex;
  width: 100%;
}

.headerInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  width: 100%;
}

.rotatedHeaderInner {
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: center;
  transform: rotate(270deg);
}

.headerLabelContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* Overwrite "middle" vertical alignment for editor links adjacent to textareas. "initial" works in all browsers except
   IE, which ignores it and keeps using "middle", which works for it. */
.fieldContainer label textarea + .eeLink,
.fieldContainer label textarea.Picker ~ a img {
  vertical-align: initial;
}

.notificationCheckboxes .usersandgroupsCheckboxParent .asiForm {
  display: inline-block;
  width: auto !important;
  margin: 0 0 0 5px;
  vertical-align: middle;
}

.notificationCheckboxes .legend {
  display: none;
}

.notificationCheckboxes .displayLabel .label {
  display: none;
}

.notificationCheckboxes #usersandgroupsPicker {
  display: inline-block;
  width: 250px !important;
  position: inherit;
  padding: 0;
}

.notificationCheckboxes .asiForm .fields {
  padding-left: 0;
  float: none;
  width: auto;
}

.hiddenHeaderLabel {
  display: none;
}

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

.rotatedHeaderLabelText {
  cursor: vertical-text;
}

.messages .messageElement {
  display: table-cell;
  vertical-align: middle;
}

.messageLine {
  padding: 2px;
}

/* !important overwrites asiDialogs.css, layout.css */
.asiDialog {
  border: 1px solid #bbb !important;
  font-size: 12px !important;
}

.asiDialog h1 {
  background: white !important;
  font-weight: 600 !important;
  font-size: 21px !important;
  padding: 18px !important;
  border-bottom: 1px solid #d4d4d4 !important;
  color: #000 !important;
  margin-bottom: 5px !important;
}

.asiDialog_header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 18px !important;
  border-bottom: 1px solid #d4d4d4 !important;
  margin-bottom: 5px !important;
}

.asiDialog_header h1 {
  font-weight: 600 !important;
  font-size: 21px !important;
  background: white !important;
  color: #000 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  border-bottom: none !important;
}

.asiDialog_header .plugin_badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0 12px 0 12px;
  background-color: #dbdbdb;
  color: #2d2d2d;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
}

.asiDialog_header .plugin_badge img {
  height: 20px;
}

.asiDialog_header .plugin_badge span {
  padding: 3px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  text-transform: uppercase;
}

.asiDialog_header .close_btn {
  margin-left: auto;
}

.asiDialog .controls {
  position: unset !important;
}

/* Color Picker */
.asiColorpicker {
  width: 112px;
}

.asiColorpicker a {
  width: 10px;
  height: 10px;
  margin: 1px;
  border: 1px solid transparent;
}

.asiColorpicker a:hover {
  outline: 2px solid red;
  border: 1px solid transparent;
}

.unselectable {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/* PMX uses a toolbar which, now, has more options on one line (rather than split into two lines).
  Because of this the toolbar is sometimes wider than the html area and so we need to compensate.
  The !important is needed because the HTMLArea.js will set the width at a higher level so that
  the width of the html area and toolbar are the same - but in PMX we need an additional 8px... */
#htmlAreaToolbarDesigner.asiToolbar + iframe {
  width: calc(90% + 8px) !important;
}

.selectBox {
  position: absolute;
  line-height: 0; /*otherwise the div will not shrink to its minimum size, probably an IE bug*/
  z-index: 15;
  border: 2px dashed #ef9f0f;
}

.gridButtonCol {
  width: 22px;
  text-align: center;
}

.gridButtonColCell {
  text-align: center;
}

.nameInputColumn {
  width: 100%;
}

.createInterfaceBox {
  padding-left: 5px;
  cursor: pointer;
}

.createInterfaceLabel {
  padding-left: 2px;
  vertical-align: middle;
}

#interfaceInfo .requiredMessage {
  display: none;
}

.interfaceGrid {
  border: 1px solid #7c7c7c;
  margin: 10px;
}

.messageBox {
  margin: 10px;
}

.messageBox ul {
  margin: auto;
  padding: auto;
}

.messageBox ul > li {
  list-style: circle inside;
  margin-left: 1em;
}

/* Tabs within dialogs */
ul.asiFlatTabs {
  border-bottom: 1px solid #eee;
  margin: 0;
  background: none !important; /* overwrites asiTabs.css */
}

.asiFlatTabs li {
  border: none !important; /* overwrites asiTabs.css */
  margin-top: 2px;
}

.asiFlatTabs li.current a {
  border-top: none !important; /* overwrites asiTabs.css */
  border-color: #eee;
  border-bottom-color: #fff;
  background-color: #fff;
  font-weight: 400 !important; /* overwrites asiTabs.css */
}

.asiFlatTabs li.current a:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  width: calc(100% + 2px);
  height: 5px;
  top: -1px;
  left: -1px;
  background-color: #2322f0;
}

.asiFlatTabs li.current a:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  bottom: -1px;
  left: 0;
  background-color: #fff;
}

.asiFlatTabs li a {
  font-size: 14px;
  font-weight: normal;
  line-height: 2.7143em;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  box-sizing: border-box;
  bottom: 0;
  height: 2.5714em;
  padding: 0 1em !important; /* overwrites asiTabs.css */
  text-align: center;
  border: 1px solid transparent;
  border-bottom-width: 0;
  color: #222 !important; /* overwrites asiTabs.css */
  max-width: 100%;
}

#asiExpressionEditor_content .asiFlatTabs li a {
  font-size: 13px;
}

/* Used for process report icon in process report designer header */
.nochromeheaderlogo {
  margin: 0;
  height: 36px;
  width: 36px;
}

#environmentTitlebar {
  background: none !important;
  background-color: #d6d6d6 !important;
}

.asiReportPalette input.iBlueButton,
#asiAlert .iBlueButton {
  font-size: 12px;
  margin-right: 5px !important;
}

.appian-informationBar {
  font-weight: normal !important;
  color: #2c5791 !important;
}

.appian-informationPanel {
  padding: 15px !important;
  font-size: 14px !important;
}

.appian-informationPanel img {
  display: none !important;
}

#environmentContent {
  border-left: 0px !important;
  border-right: 0px !important;
}

.popupContent {
  padding: 15px !important;
}

.sailDialogSection {
  margin: 10px;
}

.sailDialogSection a {
  font-size: 14px;
}

.sailDialogSection h1 {
  cursor: auto;
  border-bottom: none !important;
}

.formBanner {
  font-size: 13px;
  background-color: #ecf4ff;
  border: solid 1px #ccced1;
}

.formBanner i {
  font-size: 18px;
  color: #2c5791;
  display: table-cell;
  padding: 0px 15px;
  vertical-align: middle;
}

.formBanner span {
  display: table-cell;
}

#bannerDescription_elasticScaleInfo {
  padding: 7px 8px 8px 0px;
}

.formBanner a {
  font-size: 13px;
}