:root {

    /* Used for text color */
    --primary--color:                               #505050;

    /* Used for window background color */
    --primary--background-color:                    #ffffff;

    /*Used for text color for items of lesser importance*/
    --secondary--color:                             #707070;

    /*Used for text color for items of lesser importance*/
    --tertiary--color:                      #9a9a9a;

    /* Used for the color of separator lines and borders */
    --separator--color:                     #f0f0f0;

    /* Used for the color of placeholder text */
    --placeholder--color:                   rgba(200, 200, 200, 1.0);

    --alternate--background-color:          #fafafa;
    --alternate--separator--color:          #e0e0e0;
    --alternate--separator-strong--color:   #d0d0d0;

    --accent--color:                        #116cd6;

    --tooltip--color:                       #ffffff;
    --tooltip--background-color:            #686868;

    --header-footer--box-shadow:            0 0 10px 0 #e0e0e0;

    --item--hover--background-color:        #f0f0f0;

    --selected-item--background-color:      var(--accent--color);
    --selected-item--color:                 white;

    --selected-menu-item--background-color: var(--accent--color);
    --selected-menu-item--color:            white;

    --tab--background-color:                #e4e4e4;
    --tab--hover--background-color:         #d8d8d8;
    --selected-tab--color:                  var(--accent--color);
    --selected-tab--background-color:       #ffffff;


    --btn--hover--color:                    var(--accent--color);

    --wp-topbar--color:                     var(--primary--color);
    --topbar--background-color:                     var(--alternate--background-color);

    --inlay-panel--background-color:                var(--alternate--background-color);

    --inlay-panel--border:                          1px solid var(--alternate--separator--color);

    --inlay-panel--border-radius:                   3px;

    --inlay-panel--alternate-background-color:      #f0f0f0;

    --view-toolbar--background-color:               var(--alternate--background-color);
    --view-toolbar--hover--background-color             :#e0e0e0;

    --card--box-shadow:                1px 2px 3px #c0c0c0;

    --error--color:                                 #af0002;

    --outline:                                      #94c0ed solid 2px;

    --widgetmap-view-border-color:                  var(--separator--color);
    --widgetmap-view-header-background-color:       #808080;
    --widgetmap-view-header-font-weight:            400;
    --widgetmap-view-header-padding-left:           3px;

    --gt-tree__row--selected--background-color:     var(--selected-item--background-color);
    --gt-tree__row--selected--color:                var(--selected-item--color);
    --gt-tree__row--hover--background-color:        var(--item--hover--background-color);

    -webkit-font-smoothing:                         subpixel-antialiased;
    text-rendering:                                 optimizeLegibility;

    --input--line-height:                           16px;
    --lang-field--width:                            45px;

    --property-value-editor-property-column--width: 130px;

    --link--color:                                  blue;
    --warning--color:                               var(--primary--color);
    --warning--background-color:                    #faf6c3;
    --warning--border-color:                        #ffe884;

    --create--color:                           #00A60E;
    --create--background-color:                 mintcream;
    --delete--color:                           #d10c00;
    --delete--background-color:                #fff5fa;
}



/*
DARK MODE

This is an apple specific media query that works if Dark Mode is enabled in macOS Mojave.
There's going to be something in Media Queries Level 5, but that is some way off.
*/
@media (prefers-color-scheme: dark) {
    :root {
        /* Used for text color */
        --primary--color:                               #d0d0d0;
        /* Used for window background color */
        --primary--background-color:                    #303030;
        /*Used for text color for items of lesser importance*/
        --secondary--color:                             #a0a0a0;
        /*Used for text color for items of lesser importance*/
        --tertiary--color:                              #707070;
        /* Used for the color of separator lines and borders */

        --separator--color:                             #707070;

        /* Used for the color of placeholder text */
        --placeholder--color:                           rgba(100, 100, 100, 1.0);
        --alternate--background-color:                  #505050;
        --alternate--separator--color:                  #505050;
        --alternate--separator-strong--color:           #686868;
        --item--hover--background-color:                #707070;
        --accent--color:                                #408BF9;

        --tooltip--background-color:                    #707070;

        --header-footer--box-shadow:                    none;

        --selected-item--background-color:              var(--accent--color);
        --selected-item--color:                         white;
        --selected-menu-item--background-color:         var(--accent--color);
        --selected-menu-item--color:                    white;

        --btn--hover--color:                            var(--accent--color);
        --wp-topbar--color:                             var(--primary--color);
        --topbar--background-color:                     var(--alternate--background-color);
        --topbar--border:                               1px solid var(--alternate--separator--color);

        --tab--background-color:                #404040;
        --tab--hover--background-color:         #4c4c4c;
        --selected-tab--color:                  var(--accent--color);
        --selected-tab--background-color:       #2d2d2d;

        --inlay-panel--background-color:                var(--alternate--background-color);
        --inlay-panel--border:                          1px solid var(--alternate--separator--color);
        --inlay-panel--border-radius:                   3px;
        --inlay-panel--alternate-background-color:      #fafaff;
        --view-toolbar--background-color:               var(--alternate--background-color);
        --view-toolbar--hover--background-color:        #707070;
        --error--color:                                 #af0002;
        --outline:                                      #94c0ed solid 2px;
        --card--box-shadow:                none;

        --widgetmap-view-border-color:                  #454545;
        --widgetmap-view-header-background-color:       #454545;
        --widgetmap-view-header-font-weight:            400;
        --widgetmap-view-header-padding-left:           5px;
        --gt-tree__row--selected--background-color:     var(--selected-item--background-color);
        --gt-tree__row--selected--color:                var(--selected-item--color);
        --gt-tree__row--hover--background-color:        var(--item--hover--background-color);
        -webkit-font-smoothing:                         subpixel-antialiased;
        text-rendering:                                 optimizeLegibility;
        --input--line-height:                           16px;
        --lang-field--width:                            45px;
        --property-value-editor-property-column--width: 130px;
        --link--color:                                  orange;
        --warning--color:                               #ffe205;
        --warning--background-color:                    none;
        --warning--border-color:                        #ffe205;


        --create--color:                                #00A60E;
        --create--background-color:                     #2d2d2d;
        --delete--color:                                #d10c00;
        --delete--background-color:                     #2d2d2d;

    }

}

body, input, textarea, keygen, select, button {
    font-family:      "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:      400;
    color:            var(--primary--color);
    background-color: var(--primary--background-color);
    font-size:        12px;
    margin:           0;
    padding:          0;
}

input:matches([type="radio"], [type="checkbox"]) {
    margin-top:    3px;
    margin-left:   2px;
    margin-right:  2px;
    margin-bottom: 3px;
}

hr {
    border:        none;
    border-top:    1px solid var(--separator--color);
    margin:        0;
    margin-top:    10px;
    margin-bottom: 10px;
}

h1 {
    font-size:             2em;
    margin-bottom:         0.67em;
    font-weight:           bold;
    -webkit-margin-before: 0;
    -webkit-margin-after:  0;
    -webkit-margin-start:  0;
    -webkit-margin-end:    0;
}

em {
    font-style:  normal;
    font-weight: 600;
}

input, textarea {
    margin: 0;
    border: none;
}

textarea {
    resize: none;
}

button {
    border: none;
    margin: 0;
}

a {
    color:           var(--link--color);
    cursor:          pointer;
    text-decoration: underline;
}

.widget-holder {
    border-color: var(--widgetmap-view-border-color) !important;
}

.widget-holder-label {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 500;
}

.widget-holder-header {
    padding-left: 4px !important;
    background-color: var(--widgetmap-view-header-background-color) !important;
    line-height: 1.4em;
}

.poly-split-panel-movable-splitter,.poly-split-panel-fixed-splitter {
    background-color: var(--alternate--separator--color);
}


pre {
    margin:  0;
    padding: 0;
}

::-webkit-input-placeholder {
    color: var(--placeholder--color);
}

::-moz-placeholder {
    color: var(--placeholder--color);
}

:-moz-placeholder {
    color: var(--placeholder--color);
}

:focus {
    outline:        var(--outline);
    outline-offset: -1px;
}

*.web-protege-no-focus :focus {
    border: none;
}

.gwt-TextBox, textarea, .gwt-PasswordTextBox {
    line-height:      var(--input--line-height);
    background-color: var(--primary--background-color);
    padding:          2px;
}

.gwt-SuggestBox, .gwt-SuggestBox [disabled] {
    font-size:   12px;
    padding:     2px;
    line-height: var(--input--line-height);
    background:  transparent;
    box-sizing:  border-box;
}

.gwt-SuggestBoxPopup {
    font-size:   12px;
    background:  var(--primary--background-color);
    box-shadow:  0 4px 16px rgba(0, 0, 0, .2);
    border:      1px solid #acacac;
    line-height: 15px;
    z-index:     10;
}

.gwt-SuggestBoxPopup .item {
    background: var(--primary--background-color);
}

.gwt-SuggestBoxPopup .item-selected {
    color:      var(--selected-menu-item--color);
    background: var(--selected-menu-item--background-color);
}

.gwt-SuggestBoxPopup .item .new-keyword {
    color:       #0669eb;
    background:  var(--primary--background-color);
    font-weight: bold;
}

.gwt-SuggestBoxPopup .item-selected .new-keyword {
    color:       var(--selected-menu-item--color);
    background:  var(--selected-menu-item--background-color);
    font-weight: bold;
}

.web-protege-entity-match-substring {
    font-weight: bold;
}

* .web-protege-error-label > * a:link {
    text-decoration: underline;
    color:           #0055aa;
    padding:         2px;
}

select {
    border:      1px solid silver;
    box-shadow:  0 0 3px 1px var(--separator--color) inset;
    font-size:   12px;
    line-height: 16px;
    padding:     1px;
}

select:disabled {
    color: #c0c0c0;
}

.gwt-MenuBar-vertical {
    background: var(--primary--background-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    border:     1px solid #acacac;
    padding:    20px;
}

.gwt-MenuItem-selected {
    color:      var(--selected-menu-item--color);
    background: var(--selected-menu-item--background-color);
}

.gwt-PopupPanel {
    background: var(--primary--background-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    border:     1px solid #acacac;
    /** This z-index is needed because our dialogs appear below the text in the codemirror text area without it **/
    z-index:    10;

}

.glass {
    background: #808080;
    opacity:    0.5;
}

.glass-popup-shadow {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important;
}

.progress-popup {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

[asserted=false] textarea {
    color: #9d3600;
}

.gwt-DialogBox {
    background: var(--primary--background-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
    border:     1px solid #acacac;
    /** This z-index is needed because our dialogs appear below the text in the codemirror text area without it **/
    z-index:    10;
}

.gwt-DialogBox .dialogTop {
    background-color:      var(--alternate--background-color);
    background-image:      url(../images/protege-blender.svg);
    background-repeat:     no-repeat;
    background-size:       30px;
    background-position-y: 2px;
    background-position-x: 1px;
    border-bottom:         1px solid var(--alternate--separator--color);
}

.gwt-DialogBox .Caption {
    padding-left:   35px;
    color:          #505050;
    padding-bottom: 5px;
    padding-top:    5px;
    padding-right:  10px;
    cursor:         default;
    font-size:      18px;
    font-weight:    600;
    line-height:    24px;
    min-width:      400px;
    min-height:     1.4em;
}

.gwt-DialogBox .dialogMiddleCenter {
    padding: 20px;
}

.gwt-DialogBox .gwt-TextBox {
    border: var(--inlay-panel--border);
}

.gwt-DialogBox .gwt-PasswordTextBox {
    border: var(--inlay-panel--border);
}

.gwt-DialogBox .gwt-TextArea {
    border: var(--inlay-panel--border);
}

.gwt-DialogBox .gwt-SuggestBox {
    border: var(--inlay-panel--border);
}

.wp-modal .dialogMiddleCenter {
    padding: 20px;
}

.wp-modal .gwt-TextBox {
    border: var(--inlay-panel--border);
}

.wp-modal .gwt-PasswordTextBox {
    border: var(--inlay-panel--border);
}

.wp-modal .gwt-TextArea {
    border: var(--inlay-panel--border);
}

.wp-modal .gwt-SuggestBox {
    border: var(--inlay-panel--border);
}

.web-protege-form-layout-editor-input pre {
    min-height: 22px;
}

.gwt-PopupPanelGlass {
    background-color: black;
    opacity:          0.4;
}

.web-protege-dialog-main-panel {
    font-size: 12px;
}

.web-protege-dialog-button-bar {
    display:         flex;
    flex-direction:  row;
    justify-content: flex-end;
    padding-top:     20px;
}

.web-protege-dialog-button-bar button + button {
    margin-left: 5px;
}

.gwt-RadioButton > label {
    padding-left: 5px;
    white-space:  nowrap;
}

.web-protege-form-layout-editor table {
    width: 100%;
}

.web-protege-form-layout-editor * table td + td {
    padding-left: 1px;
    padding-top:  1px;
}

.web-protege-term-editor * table td + td {
    padding-left: 1px;
    padding-top:  1px;
}

.web-protege-term-editor * table td {
    padding-left: 1px;
    padding-top:  1px;
}

.web-protege-form-layout-margin {
    margin: 1px;
}

.wp-configuration-error-banner {
    color:            #901c28;
    background-color: #f8d7da;
    text-align:       center;
    font-size:        13px;
    line-height:      1.1em;
    margin:           2px;
    border:           2px solid #e8b9be;
    border-radius:    4px;
    padding:          4px;
    position:         relative;
    width:            300px;
    margin-left:      auto;
    margin-right:     auto;
    z-index:          1;
}

.cm-s-manchester-syntax span.cm-quantifier {
    color:       #c528eb;
    font-weight: bold;
    font-size:   12px;
}

.cm-s-manchester-syntax span.cm-boolean-connective {
    color:       #0669eb;
    font-weight: bold;
    font-size:   12px;
}

.cm-s-manchester-syntax span.cm-string {
    font-size: 12px;
}

.CodeMirror pre {
    line-height: 16px;
}

.CodeMirror-focused {
    outline: var(--outline);
}

.ms-axiom-kw {
    font-weight: bold;
    color:       #0a5ea8;
}

.section-kw {
    font-weight: bold;
    color:       #0a5ea8;
}

.quantifier-kw {
    font-weight: bold;
    color:       #b200b2;
}

.connective-kw {
    font-weight: bold;
    color:       #00b2b2;
}

.deprecated {
    opacity:         0.5;
    text-decoration: line-through;
}

.highlight {
    font-weight: bold;
    background:  #ffeb7f;
}

.iri {
    color:           #0000ff;
    text-decoration: underline;
}

.literal {
    color: #a0522d;
}

.l-par {
    padding-right: 2px;
    color:         #a9a9a9;
}

.r-par {
    padding-left: 2px;
    color:        #a9a9a9;
}

.exp-block {
    display:        inline-block;
    vertical-align: top;
}

td {
    font-size:      12px;
    vertical-align: top;
}

.ms-frame {
    margin-bottom:  30px;
    /*border-bottom: 1px solid #f3f3f3;*/
    padding-bottom: 5px;
    font-size:      12px;

}

.ms-frame ul {
    list-style:     disc inside;
    padding-left:   10px;
    padding-top:    2px;
    padding-bottom: 2px;
}

.ms-frame-subject {
    font-weight: bold;
}

.ms-frame-kw {
    color:       #07589f;
    font-weight: bold;
}

.ms-frame-block {
    margin-left: 30px;
}

.ms-section {
    margin-top: 10px;
}

.ms-section-block {
    margin-top:  10px;
    margin-left: 30px;
}

.ms-section-item {
    line-height:    1.3em;
    padding-bottom: 3px;
    padding-top:    3px;
    border-bottom:  1px solid var(--separator--color);
}

.ms-section-item:hover {
    background: var(--item--hover--background-color);
}

.ms-section-kw {
    color:       #07589f;
    font-weight: bold;
}

.ms-quantifier-kw {
    color:       #c600c6;
    font-weight: bold;
}

.cm-quantifier {
    color:       #c600c6;
    font-weight: bold;
}

.ms-connective-kw {
    color:       cornflowerblue;
    font-weight: bold;
}

.ms-literal {
    color: #bb7200;
}

.ms-expr-block {
    display:        inline-block;
    vertical-align: top;
}

.ms-lang-tag {
    color: #a9a9a9;
}

.ms-literal-datatype {
    color: #a9a9a9;
}

.ms-sep {
    color:          #a9a9a9;
    display:        inline-block;
    vertical-align: bottom;
}

.ms-l-par {
    color: #a9a9a9;
}

.ms-r-par {
    color:          #a9a9a9;
    display:        inline-block;
    vertical-align: bottom;
}

.ms-img {
    display:        inline-block;
    vertical-align: top;
    border:         1px solid #f5f5f5;
    margin-left:    10px;
    margin-bottom:  10px;
    margin-top:     5px;
}

.ms-img img {
    max-width: 150px;
}

.ms-ont-id {
    color: #bca7a8;
}

.ms-item-ce {
}

.ms-item-ind {
}

.ms-item-anno {
}

.ms-item-prop {
}

.ms-item-dr {
}

.ms-literal p:only-child {
    display: inline;
    margin:  0;
    padding: 0;
}

.ms-annotations {
    border-left:   solid 4px literal("var(--separator--color)");
    margin-bottom: 4px;
    margin-left:   22px;
    padding-left:  5px;
    margin-top:    4px;
}

.ms-annotations-block {
    padding-left: 20px;
}

.ms-nested-annotation {
    /*	border-top: 1px dotted #f4f4f4;*/
}

.gwt-CheckBox {
    display:     flex;
    overflow:    hidden;
    align-items: center;
    align-self:  baseline;
    flex-wrap:   nowrap;
}

.gwt-RadioButton {
    display:     flex;
    overflow:    hidden;
    align-items: center;
    align-self:  baseline;
    flex-wrap:   nowrap;
    flex-grow:   0;
    flex-shrink: 0;
}

.gwt-CheckBox > label {
    padding-left: 3px;
    white-space:  nowrap;
}

.CodeMirror {
    background: var(--primary--background-color) !important;
    color:      var(--primary--color) !important;
}

div.CodeMirror-linenumber.CodeMirror-gutter-elt {
    background-color: var(--alternate--background-color) !important;
}

.CodeMirror div.CodeMirror-cursor {
    border-left: 1px solid var(--primary--color) !important;
}

/** Animation of Busy Indicator **/

@-webkit-keyframes busy-ind-anim {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes busy-ind-anim {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.busy-indicator {
    position: relative;
    overflow: hidden;
    width:    82px;
    height:   80px;
}

.busy-indicator > div:nth-of-type(1) {
    -webkit-animation:       busy-ind-anim 1s linear infinite;
    animation:               busy-ind-anim 1s linear infinite;
    -webkit-animation-delay: -0.5s;
    animation-delay:         -0.5s;
}

.busy-indicator > div:nth-of-type(2) {
    -webkit-animation:       busy-ind-anim 1s linear infinite;
    animation:               busy-ind-anim 1s linear infinite;
    -webkit-animation-delay: -0.4166666666666667s;
    animation-delay:         -0.4166666666666667s;
}

.busy-indicator > div:nth-of-type(3) {
    -webkit-animation:       busy-ind-anim 1s linear infinite;
    animation:               busy-ind-anim 1s linear infinite;
    -webkit-animation-delay: -0.33333333333333337s;
    animation-delay:         -0.33333333333333337s;
}

.busy-indicator > div:nth-of-type(4) {
    -webkit-animation:       busy-ind-anim 1s linear infinite;
    animation:               busy-ind-anim 1s linear infinite;
    -webkit-animation-delay: -0.25s;
    animation-delay:         -0.25s;
}

.busy-indicator > div:nth-of-type(5) {
    -webkit-animation:       busy-ind-anim 1s linear infinite;
    animation:               busy-ind-anim 1s linear infinite;
    -webkit-animation-delay: -0.16666666666666669s;
    animation-delay:         -0.16666666666666669s;
}

.busy-indicator > div:nth-of-type(6) {
    -webkit-animation:       busy-ind-anim 1s linear infinite;
    animation:               busy-ind-anim 1s linear infinite;
    -webkit-animation-delay: -0.08333333333333331s;
    animation-delay:         -0.08333333333333331s;
}

.busy-indicator > div:nth-of-type(7) {
    -webkit-animation:       busy-ind-anim 1s linear infinite;
    animation:               busy-ind-anim 1s linear infinite;
    -webkit-animation-delay: 0s;
    animation-delay:         0s;
}

.busy-indicator > div:nth-of-type(8) {
    -webkit-animation:       busy-ind-anim 1s linear infinite;
    animation:               busy-ind-anim 1s linear infinite;
    -webkit-animation-delay: 0.08333333333333337s;
    animation-delay:         0.08333333333333337s;
}

.busy-indicator > div:nth-of-type(9) {
    -webkit-animation:       busy-ind-anim 1s linear infinite;
    animation:               busy-ind-anim 1s linear infinite;
    -webkit-animation-delay: 0.16666666666666663s;
    animation-delay:         0.16666666666666663s;
}

.busy-indicator > div:nth-of-type(10) {
    -webkit-animation:       busy-ind-anim 1s linear infinite;
    animation:               busy-ind-anim 1s linear infinite;
    -webkit-animation-delay: 0.25s;
    animation-delay:         0.25s;
}

.busy-indicator > div:nth-of-type(11) {
    -webkit-animation:       busy-ind-anim 1s linear infinite;
    animation:               busy-ind-anim 1s linear infinite;
    -webkit-animation-delay: 0.33333333333333337s;
    animation-delay:         0.33333333333333337s;
}

.busy-indicator > div:nth-of-type(12) {
    -webkit-animation:       busy-ind-anim 1s linear infinite;
    animation:               busy-ind-anim 1s linear infinite;
    -webkit-animation-delay: 0.41666666666666663s;
    animation-delay:         0.41666666666666663s;
}

.wp-graph {
    user-select: none;
    -webkit-user-select: none;
}

.wp-graph g {
    transition-property: opacity;
    transition-duration: 300ms;
}

.wp-graph__g--muted {
    opacity: 0.1;
}

.wp-graph__node {
    stroke-width: 2.5;
}

.wp-graph__node--root-node {

}

.wp_graph__node__shape {
    fill: none;
    padding: 5px;
}


.wp-graph__node__shape--class {
    fill: none;
    stroke: #6195cc;
}

.wp-graph__node__shape--individual {
    fill: none;
    stroke: #a16dd9;
}

.wp-graph__node--root-node .wp-graph__node__shape--class {
    fill: var(--selected-item--background-color);
}


.wp-graph__node--root-node .wp-graph__node__shape--individual {
    fill: var(--selected-item--background-color);
}


.wp-graph__node__label {
    pointer-events: none;
}

.wp-graph__node--root-node .wp-graph__node__label {
    fill: var(--selected-item--color);
}


.wp-graph__edge {
    fill: none;
    stroke-width: 1.6px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wp-graph__edge--is-a {
    stroke: #f8ba2c;
}
.wp-graph__edge--ind-cls {
    stroke-dasharray: 3 3;
}
.wp-graph__edge--rel {
    stroke: #6195cc;
}

.wp-graph__edge__label {
    fill: var(--primary--background-color);
    font-size: 0.8em;
}

.wp-graph__edge__label + text {
    fill: #6195cc;
    font-size: 0.8em;
    cursor: default;
}

.wp-graph__edge__arrow-head {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: context-stroke;
    stroke-dasharray: 100%;
}

.wp-graph__edge__arrow-head--is-a {
    fill: #f8ba2c;
}

.wp-graph__edge__arrow-head--rel {
    stroke: #6195cc;
    fill: none;
}

.tooltip {
    position: absolute;
    color: var(--tooltip--color);
    background: var(--tooltip--background-color);
    border-radius: 3px;
    padding: 5px;
    text-align: center;
    max-width: 500px;
    min-width: 20px;
}
.tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 7px;
}

.tooltip .tooltip-arrow {
    border-color: var(--tooltip--background-color);
}

.tooltip[x-placement^="top"] {
    margin-bottom: 8px;
}

/* Down Arrow */
.tooltip[x-placement^="top"] .tooltip-arrow {
    border-top-width:    8px;
    border-right-width:  8px;
    border-left-width:   8px;
    border-bottom-width: 0;
    border-left-color:   transparent;
    border-right-color:  transparent;
    border-bottom-color: transparent;
    bottom:              -8px;
    left:                calc(50% - 8px);
    margin-top:          0;
    margin-bottom:       0;
}

.tooltip[x-placement^="bottom"] {
    margin-top: 8px;
}

/* Up Arrow */
.tooltip[x-placement^="bottom"] .tooltip-arrow {
    border-top-width:    0;
    border-right-width:  8px;
    border-left-width:   8px;
    border-bottom-width: 8px;
    border-left-color:   transparent;
    border-right-color:  transparent;
    border-top-color:    transparent;
    top:                 -8px;
    left:                calc(50% - 8px);
    margin-top:          0;
    margin-bottom:       0;
}
.tooltip[x-placement^="right"] {
    margin-left: 8px;
}

/* Text align for tooltips that are aligned left */
.tooltip[x-placement*="-start"] {
    text-align:          left;
}

/* Arrow placement for arrows that are on tooltips that are aligned left */
.tooltip[x-placement*="-start"] .tooltip-arrow {
    left:                10px !important;
    text-align:          left;
}

/* Left Arrow */
.tooltip[x-placement^="right"] .tooltip-arrow {
    border-top-width:    8px;
    border-right-width:  8px;
    border-left-width:   0;
    border-bottom-width: 8px;
    border-left-color:   transparent;
    border-top-color:    transparent;
    border-bottom-color: transparent;
    left:                -8px;
    top:                 calc(50% - 8px);
    margin-left:         0;
    margin-right:        0;
}
.tooltip[x-placement^="left"] {
    margin-right: 8px;
}

/* Right Arrow */
.tooltip[x-placement^="left"] .tooltip-arrow {
    border-top-width:    8px;
    border-right-width:  0;
    border-left-width:   8px;
    border-bottom-width: 8px;
    border-top-color:    transparent;
    border-right-color:  transparent;
    border-bottom-color: transparent;
    right:               -8px;
    top:                 calc(50% - 8px);
    margin-left:         0;
    margin-right:        0;
}