html {
    font-size: 14px;
}

html, body, #app, #canvas {
    font-family: 'IBM Plex Sans', sans-serif;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.petrel-code-editor textarea, .petrel-code-editor pre {
    left: 0;
    top: 0;
    padding-left: 20px;
    padding-top: 15px;
}

/* screen interaction helpers & modal */

#io-dialog-main{
    display:none; /*default*/
}

#io-editing-tools-buttons {
    display: block;
    position:fixed;
    top:0px;
    right: 80px;
    list-style: none;
    padding: 5px;
    margin: 0;
}

#io-editing-tools-buttons button:hover {
    color: #333333;
}

.icon-keyboard {
    box-sizing: border-box;
    cursor: pointer;
    font-size: 18px;
    line-height: 1.2em;
}

.icon-keyboard::before {
    content: '\f11c';
    display: inline-block;
    line-height: 1.2em;
}

.icon-resize-full {
    box-sizing: border-box;
    cursor: pointer;
    font-size: 18px;
    line-height: 1.2em;
}

.icon-resize-full::before {
    content: '\f31e';
    display: inline-block;
}

.keybindings-dialog .binding {
    padding: 5px 10px;
    font-family: monospace;
}

.pacPanel {
    background: rgb(247, 247, 248);
    border: solid 1px rgb(185, 188, 198);
    border-radius: 2px;
    padding: 10px;
}
.entryTitle {
    font-weight: 900;
    font-size: 20px;
}

.djs-context-pad .entry.active {
    color: rgb(0, 149, 255);
}

*::-webkit-scrollbar {
    width: 6px;
}
*::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(0,0,0,0.2);
}
*::-webkit-scrollbar-track {
    box-shadow: none;
    margin: 0;
    padding: 5px;
}
.activityString {
    font-weight: bold;
}
.pacKeyword {
    color: #0400ff;
}
.actionString {
    color: #008800;
}
img[alt=firstLastExample] {
    max-width: 100%;
}

.pi-smaller {
    font-size: 18px !important;
}

.blink {
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}

@-webkit-keyframes glowing {
    0% { box-shadow: 0 0 3px #B20000; }
  50% { box-shadow: 0 0 10px #FF0000; }
  50% { box-shadow: 0 0 20px #FF0000; }
  50% { box-shadow: 0 0 10px #FF0000; }
  100% { box-shadow: 0 0 3px #B20000; }
}

@-moz-keyframes glowing {
    0% { box-shadow: 0 0 3px #B20000; }
  50% {  box-shadow: 0 0 10px #FF0000; }
  50% {  box-shadow: 0 0 20px #FF0000; }
  50% {  box-shadow: 0 0 10px #FF0000; }
  100% { box-shadow: 0 0 3px #B20000; }
}

@-o-keyframes glowing {
  0% { box-shadow: 0 0 3px #B20000; }
  50% {  box-shadow: 0 0 10px #FF0000; }
  50% {  box-shadow: 0 0 20px #FF0000; }
  50% {  box-shadow: 0 0 10px #FF0000; }
  100% { box-shadow: 0 0 3px #B20000; }
}

@keyframes glowing {
  0% { box-shadow: 0 0 3px #B20000; }
  50% {  box-shadow: 0 0 10px #FF0000; }
  50% {  box-shadow: 0 0 20px #FF0000; }
  50% {  box-shadow: 0 0 10px #FF0000; }
  100% { box-shadow: 0 0 3px #B20000; }
}

.success-shadow {
    box-shadow: 0 0 10px #00B200;
}

#jsd-widget {
    z-index: 1000 !important;
}

blockquote {
    color: rgba(0,0,0,.7);
    color: var(--palette-black-alpha-70,rgba(0, 0, 0, .7));
    border-left: 2px solid rgba(234,234,234,1);
    border-left: 2px solid var(--component-grid-cell-bottom-border-color,rgba(234, 234, 234, 1));
    padding-left: 16px;
}

.tooltipHorizontal.p-tooltip .p-tooltip-text {
    width: 350px;
}

.smooth-transition {
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
}

/** probably an issue with version 11 of diagram js */
.djs-selection-outline {
    fill: transparent;
}

/** fixes visibility of primeicons in business rule editor */
.petrel-code-editor .pi {
    font-family: 'primeicons';
}

/** the relative position caused issues in internal components **/
.p-tabview-nav-container {
    position: unset !important;
}