body {
    padding-left: 10px
  }
  span.title {
    font-size: 18px;
    height: 1.4rem;
  }
  .menu.menu-main {
    background-color: rgba(0, 111, 191, 0.1);
    padding-right: 0px;
    transform: none;
    position: fixed;
    height: 100%;
    left: 0;
    width: inherit;
  }
  .menu-button {
    position: fixed;
    height: 100%;
    left: 0;
    width: 20px;
    min-width: 20px;
    z-index: 600;
    cursor: pointer;
  }
  .menu-button:hover {
    background: linear-gradient(90deg, #006EBF70, #006EBF00);
  }
  .menu.menu-main ul {
    margin: 0px;
  }
  .menu.menu-main ul#rootGroup > li {
    padding-left: 0;
  }
  .menu ul li {
    list-style-type: none;
    padding-left: 1.4rem;
    font-size: 18px;
  }
  .menu.menu-main ul li#settings {
    padding-top: 0.5em;
    border-top:rgba(0, 111, 191, 0.336) dotted 1px;
  }
  .container {
    margin: 0 auto
  }
  #config-handler {
    position: fixed; 
    right: 10px; 
    float: right; 
    z-index: 100;
    padding: 3px 15px 10px 15px;
    background-color: rgb(0,110,191);
    border-radius: 0px 0px 5px 5px;
  }    
  .btn.btn-main {
      border-color: white;
      font-weight: bold;
  }
  .table.editable .btn.btn-sm {
      margin: 0 3px;
  }
  .editable-item {
    cursor: pointer;
    padding: 1px 10px 1px 10px;
    border-radius: 3px;
    }
    .menu .editable-item {
        padding: 1px 0px 1px 10px;
        border-radius: 3px 0px 0px 3px;
    }
    .editable-item:hover {
        cursor: pointer;
        background-color: #006EBF40;
    }
    .editable-item.selected {
        background-color: #006EBF;
        color: #fff;
    }
  .editable-part {
    float: left;
    margin-right: 5px;
  }
  td div.form-group.has-error {
    padding-top: 1.2em;
  }
  td div.form-group p {
    margin: 0;
  }

  .table tfoot td {
      border-bottom: none;
  }
  .label.label-relative-location {
      background:rgba(0, 111, 191, 0.336);
  }
  .label.label-playlist-name {
      background:rgba(0, 191, 102, 0.336);
  }

  .table.editable tbody tr {
      cursor: pointer;
  }
  .table.editable td.action button {
    float: right;
  }
  .table.table-striped tbody tr:nth-of-type(2n) {
    background: #ffffff;
  }
  .table.table-hover tbody tr:hover {
    background: #eef0f3;
  }

  .table.table-json {
    border-left: .05rem solid #dadee4;
  }

  .table.table-json td {
    padding:0;
    background: #eef4;
  }
  .table.table-json td:nth-child(1) {
    width: 20px;
    background: #eef8;
    color: #5595; 
    text-align:center;
    vertical-align: middle;
    /* display: none; */
  }

  .table.table-json ul li {
    margin-top: 0;
  }
  .table.table-json ul {
    margin: .1rem 0 .1rem .8rem;
  }

  span.field {
    margin: 0 3px;
  }
  span.field::after {
    content: " : ";
  }
  span.value {
    margin: 0 3px;
    color: #006EBF;
  }
  .text-secondary {
    color: #93939c !important;
  }
  
  div.errors {
    max-height: 150px;
    overflow-y: scroll;
  }

  .title button {
    margin: 0 10px;
  }

  .btn {
    border-color: #006EBF10;
  }

  .endpoints {
    max-height: 300px;
    overflow-y: auto;
    /* border: #006EBF 1px dotted; */
    /* margin: .6em; */
  }

  table.table td .endpoints {
    margin: -.6rem .4rem;
    overflow-y: auto;
  }

  .endpoints ul {
    margin-top: 0;
  }

  /* accordion layout */

  .menu.menu-card {
    width: 100%;
    position: inherit;
    z-index: 10;
    transform: none;
  }

  .menu.menu-card .menu-item {
    overflow: hidden;
    /* text-overflow: ellipsis; */
  }

  .menu.menu-card .menu-item button {
    margin: 0 3px;
  }

  #listAccordion {
    margin-left: 15px;
  }

  #listAccordion .accordion {
    margin: 10px 0 0 0;
  }

  .accordion-header > button {
    margin: 0 5px;
  }

  .accordion-body .row {
    margin: 5px 0 5px 30px;
  }

  .col-0 {
    width: auto;
    flex: none;
  }

  .accordion input:checked ~ .accordion-body, .accordion[open] .accordion-body {
    max-height: inherit;
  }

  .menu.menu-card > .menu-item:first-child {
    /* background: beige; */
    background-color: rgba(0, 111, 191, 0.1);
    padding: .4em;
    margin: -.4rem;
    font-size: 18px;
  }  
  .menu.menu-card .tile.tile-centered .tile-content {
    overflow: inherit;
  }
  .row .empty {
    padding: .4em 0em;
    margin: 0rem 0;
    width: 100%;
    display: block;
  }
  .row tr .empty {
    display: revert;
  }
  .popover .popover-container.summary {
    width: 500px;
    padding: 10px;
    margin: 0;
  }
  .menu-item .popover {
    width: 100%;
    margin: 0 -.4rem;
    padding: .2rem .4rem;
  }
  .menu .menu-item > div.popover > a:focus, .menu .menu-item > div.popover > a:hover {
    background: #f1f1fc;
    color: #006EBF;
  }
  .menu .menu-item > div.popover > a {
    border-radius: .1rem;
    color: inherit;
    display: block;
    text-decoration: none;
  }

  .menu .menu-item.attribute, .menu .menu-item.decision {
    border-radius: 16px;
    min-height: 30px;
    position: relative;
    background: linear-gradient(179deg, rgba(0, 111, 191, 0.02), rgba(0, 111, 191, 0.1));
    white-space: nowrap;
    align-items: center;
    display: flex;
  }

  .variable-name.required::after {
    content: "*";
    font-weight: 900;
    margin-left: 4px;
  }

  .variable-name.must-be-saved {
    font-weight: 600;
  }

  .attribute-icon {
    color: #006EBF;
    margin-right: 5px;
  }

  .label.attribute {
    font-size: 14px;
    width: 25px;
    min-width: 25px;
    align-content: center;
    text-align: center;
    overflow: hidden;
    padding: 3px 0px;
    margin-right: 8px;
  }
  .label.attribute.constant {
    background-color: #C0C0C055;
  } 
  .label.attribute.environment {
    background-color: #C0C0C055;
  } 
  .label.attribute.queryParams {
    background-color: #006EBF55;
  } 
  .label.attribute.httpHeaders {
    background-color: #0C7C5955;
  } 
  .label.attribute.url {
    background-color: #BAA5FF55;
  } 
  .label.attribute.sessionData {
    background-color: #AFFC4155;
  } 

  button.edit-item {
    border-radius: 20px;
    float: right;
  }
  .menu-item button.edit-item {
    display: none;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .menu-item:hover button.edit-item {
    display: inline-block;
  }

  .variable-name {
    color: rgb(0, 110, 191);
  }
  .variable-name.selectable {
    border-radius: 4px;
    padding: 0px 3px;
    background: #006EBF10;
    cursor: pointer;
  }
  .variable-name.selectable:hover {
    background: #006fbf3a;
  }
  .variable-name.selectable.selected {
    background: #006EBFA0;
    color: #fff;
  }
  .variable-operator {
    color: rgb(130, 130, 130);
  }

  .label.label-rounded.conditions {
    background: #006EBFA0;
  }

  .menu-item .label.label-rounded.conditions {
    font-size: 0.8em;
    border-radius: 16px;
    text-align: center;
    margin: 1px;
    width: 90%;
  }
  .menu-item > .label.label-rounded.conditions {
    width: 50%;
  }

  .menu-item .label.label-rounded.condition {
    margin: 1px;
    width: 90%;
    border-radius: 10px;
    overflow: hidden;
  }

  .menu-item .event {
    font-size: 0.8em;
  }

  ul.summary {
    padding: 0;
    margin: 0;
  }
  ul.summary li {
    padding: 0;
    margin: 0;
    font-size: 12px;
  }


  #processingFilterResult {
    color: #bcc3ce;
    font-style: italic;
  }

  .unsaved {
    background-color: #ff000010;
  }

  .modal.modal-large > .modal-container {
    max-width: 1100px;
  }
  
  pre.body-response {
    background-color: #f1f1fc;
    padding: 10px;
    border-radius: 5px;
    margin: 0 20px 0 0;
  }

  .menu-item pre.body-response {
    padding: 5px;
    border-radius: 5px;
    margin: 0;
    font-size: 0.7em;
    /* white-space: break-spaces; */
    overflow: hidden;
  }

  .modal-body .columns .column.col-2 .btn.btn-block {
    overflow: hidden;
    text-overflow: ellipsis;
  }

/*** convertJsonToHtml ***/
  .field {
    font-weight: bold;
    margin-right: 5px;
}

.value {
    font-weight: normal;
    margin-left: 5px;
    color: #006EBF;
}

.value.true {
    color: #28a745;
}

.value.false {
    color: #dc3545;
}

.text-undefined {
    color: #6c757d;
}

 /*** try a new layout to display label and input in a single row  ***/
 /** DEBUG
  .form-group .form-label, .je-label, .form-group .je-desc {
    width: 30%;
    text-align: right;
    padding-right: 10px;
  }
  .form-group .form-input, .je-switcher, .form-group .form-input-hint{
    width: 70%;
  }
  .form-group .form-input-hint {
    position: relative;
    left: 30%;
  }
  .je-desc + .form-input-hint {
    left: 0;
  }
  .je-label, .je-switcher {
    display: inline-block;
  }

  table .form-group .form-label, table .form-group .je-desc {
    width: 100%;
    text-align: left;
    padding-right: 0;
  }
  table .form-group .form-input, table .form-group .form-input-hint{
    width: 100%;
  }
END **/

.je-desc,
div[data-schematype="array"] p,
div[data-schematype="object"] p {
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 22px;
    overflow: hidden;
    transition: max-height 0.5s linear 2s;
}
/* The following style allows to expand the description when the input is focused, but it is not user-friendly. 
 .form-input:focus + .je-desc,
.form-input:focus + * + .je-desc,
.form-select:focus + .je-desc,
.form-select:focus + * + .je-desc,
div[data-schematype="array"]:has(.form-select:focus) p,
div[data-schematype="array"]:has(.form-input:focus) p {
    max-height: 100em;
    transition: max-height 2s linear 1s;
} */

.je-desc.multiple-lines:hover,
div[data-schematype="array"] p.multiple-lines:hover,
div[data-schematype="object"] p.multiple-lines:hover {
    cursor: pointer;
    color: #006EBF;
}

.je-desc.multiple-lines::before,
div[data-schematype="array"] p.multiple-lines::before,
div[data-schematype="object"] p.multiple-lines::before {
    content: "ℹ";
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;

    margin-right: 8px;

    color: #fff;
    background: #006EBF;
}

#helpModal p {
    white-space: pre-line;
    word-wrap: break-word;
}

.code {
    font-family: Consolas, "Courier New", monospace;
    background-color: #f1f1fc;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    font-size: 0.9em;
}
.code > .code {
    margin: 0;
}

/*** Compact layout of json-editor modals ***/
div[data-theme="spectre"] .je-panel .je-object__container > .je-panel {
  padding: 0.2rem 0.2rem 0.2rem 0.4em;
  margin: 0.1rem;
  background-color: rgba(218, 222, 228, 0.2);
  /* border-left: 1px #006EBF60 dashed; */
}

.columns .col-12 {
  -ms-flex: 1;
  flex: 1;
  max-width: 100%;
  padding-left: .4rem;
  padding-right: .4rem;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.2em;
  margin-top: 0.5em;
}

.je-object__container p {
  color: #00000090;
  margin-bottom: 0.1em;
  font-size: 90%;
}

div[data-theme="spectre"] .form-label {
  display: block;
  line-height: 1.2rem;
  padding: .3rem 0 0 0;
}