/*
 * System Designer
 *
 * https://designfirst.io/systemdesigner/
 *
 * Copyright 2026 Erwan Carriou
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

body {
  padding-top: 70px;
  padding-bottom: 30px;
  user-select: none;
}

body,
.navbar-fixed-top,
.navbar-fixed-bottom {
  min-width: 720px;
}

img, a {
  user-select: none;
  -webkit-user-drag: none;
}

.lead {
  font-size: 16px;
}

.page-header {
  margin-bottom: 30px;
}
.page-header .lead {
  margin-bottom: 10px;
}

.container {
  width: 100%;
  max-width: none !important;
}

.col-xs-4 {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86, 61, 124, 0.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86, 61, 124, 0.2);
}

.container .navbar-header,
.container .navbar-collapse {
  margin-right: 0;
  margin-left: 0;
}

.navbar-header {
  float: left;
}

.navbar-collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
  visibility: visible !important;
}

.navbar-toggle {
  display: none;
}
.navbar-collapse {
  border-top: 0;
}

.navbar-brand {
  margin-left: -15px;
}

.navbar-nav {
  float: left;
  margin: 0;
}
.navbar-nav > li {
  float: left;
}
.navbar-nav > li > a {
  padding: 15px;
}

.navbar-nav.navbar-right {
  float: right;
}

.navbar .navbar-nav .open .dropdown-menu {
  position: absolute;
  float: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #333;
}
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #fff !important;
  background-color: #428bca !important;
}
.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
  color: #999 !important;
  background-color: transparent !important;
}

.navbar-form {
  float: left;
  width: auto;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 0;
  margin-left: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.navbar-form .form-group {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
}

.navbar-form .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.navbar-form .form-control-static {
  display: inline-block;
}

.navbar-form .input-group {
  display: inline-table;
  vertical-align: middle;
}

.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn,
.navbar-form .input-group .form-control {
  width: auto;
}

.navbar-form .input-group > .form-control {
  width: 100%;
}

.navbar-form .control-label {
  margin-bottom: 0;
  vertical-align: middle;
}

.navbar-form .radio,
.navbar-form .checkbox {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  vertical-align: middle;
}

.navbar-form .radio label,
.navbar-form .checkbox label {
  padding-left: 0;
}

.navbar-form .radio input[type='radio'],
.navbar-form .checkbox input[type='checkbox'] {
  position: relative;
  margin-left: 0;
}

.navbar-form .has-feedback .form-control-feedback {
  top: 0;
}

.form-inline .form-group {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
}

.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.form-inline .form-control-static {
  display: inline-block;
}

.form-inline .input-group {
  display: inline-table;
  vertical-align: middle;
}
.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn,
.form-inline .input-group .form-control {
  width: auto;
}

.form-inline .input-group > .form-control {
  width: 100%;
}

.form-inline .control-label {
  margin-bottom: 0;
  vertical-align: middle;
}

.form-inline .radio,
.form-inline .checkbox {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  vertical-align: middle;
}
.form-inline .radio label,
.form-inline .checkbox label {
  padding-left: 0;
}

.form-inline .radio input[type='radio'],
.form-inline .checkbox input[type='checkbox'] {
  position: relative;
  margin-left: 0;
}

.form-inline .has-feedback .form-control-feedback {
  top: 0;
}

.sidebar {
  position: fixed;
  width: 50px;
  top: 40px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  padding-top: 11px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #f8f8f8;
  border-right: 1px solid #eee;
}

.spaces {
  position: fixed;
  top: 40px;
  bottom: 0;
  right: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  padding-top: 11px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f8f8f8;
  border-left: 1px solid #eee;
}

.nav-sidebar {
  margin-right: -21px;
  margin-bottom: 20px;
  margin-left: -20px;
}
.nav-sidebar > li {
  padding-top: 0px;
  padding-bottom: 0px;
}
.nav-sidebar > li > button {
  border: 0px;
  background-color: #f8f8f8;
}

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  padding: 10px;
  margin-bottom: 20px;
}

.placeholder img {
  display: inline-block;
  border-radius: 50%;
}

.designer-message-success {
  display: none;
}
.designer-message-info {
  display: none;
}
.designer-message-warning {
  display: none;
}
.designer-message-danger {
  display: none;
}

#designer-message {
  z-index: 1000;
  padding-right: 20px;
  position: fixed;
  right: 0px;
  bottom: 0;
  width: 400px;
}

#designer-menubar-items li:hover {
  background-color: #e7e7e7;
}

.tooltip-inner {
  background-color: #e7e7e7;
  color: black;
}
.tooltip.in {
  opacity: 1;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #e7e7e7 !important;
}
.tooltip.right .tooltip-arrow {
  border-right-color: #e7e7e7 !important;
  border-bottom-color: white !important;
}

#designer-spaces-items li:hover {
  background-color: #e7e7e7;
}

#designer-spaces-items > .active {
  color: #555;
  background-color: #e7e7e7;
}

#designer-spaces-system-items li:hover {
  background-color: hsl(0, 0%, 91%);
}

#designer-spaces-system-items > .active {
  color: #555;
  background-color: #e7e7e7;
}

#designer-spaces-components-items li:hover {
  background-color: #e7e7e7;
}

#designer-spaces-components-items > .active {
  color: #555;
  background-color: #e7e7e7;
}

.placeholder.designer-component > div > .panel-body:hover {
  cursor: pointer;
}

.placeholder.designer-component > div > .panel-body {
  max-height: 300px;
  overflow: auto;
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 5px;
  padding-left: 0px;
  padding-right: 0px;
}

.placeholder.designer-component > div > .panel-body > .table {
  margin-bottom: 0px;
  text-align: left;
}

.placeholder.designer-behavior > div > .panel-body:hover {
  cursor: pointer;
}

.panel {
  border: 2px solid #7f949d;
  border-radius: 10px;
  padding-bottom: 4px;
}

.panel-heading {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.placeholder.designer-component > div > table {
  text-align: left;
}

.table > tbody > tr {
  border: 0px;
}
.table > tbody > tr > td {
  border: 0px;
}

.main {
  margin-left: 35px;
}

.placeholder.designer-model > div > .panel-body:hover {
  cursor: pointer;
}

.placeholder.designer-behavior > div > .panel-body {
  text-align: left;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 5px;
  padding-right: 5px;
}

.placeholder.designer-model > div > .panel-body > table {
  text-align: left;
}

.placeholder.designer-model > div > .panel-body {
  padding: 0px;
}

.placeholder.designer-model > div > .panel-body > .list-group {
  margin-bottom: 5px;
}

.list-group-item-attributes {
  color: black;
  background-color: #f8f8f8;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

.list-group-item-collections {
  color: black;
  background-color: #f8f8f8;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

.list-group-item-methods {
  color: black;
  background-color: #f8f8f8;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

.list-group-item-events {
  color: black;
  background-color: #f8f8f8;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

.list-group-item {
  border-left-width: 0px;
  border-right-width: 0px;

  color: color !important;
  border: 0px;
}

.placeholder.designer-behavior > div > .panel-body {
  max-height: 300px;
  overflow: auto;
}

.placeholder.designer-behavior > div > .panel-body > pre {
  border: 0px;
}

.placeholder.designer-type > div > .panel-body:hover {
  cursor: pointer;
}

.placeholder.designer-type > div > .panel-body > table {
  text-align: left;
}

.placeholder.designer-type > div > .panel-body {
  padding: 0px;
}

.placeholder.designer-type > div > .panel-body > .list-group {
  margin-bottom: 5px;
}

.placeholder.designer-schema > div > .panel-body:hover {
  cursor: pointer;
}

.placeholder.designer-schema > div > .panel-body {
  padding: 0px;
}

.placeholder.designer-schema > div > .panel-body > .table {
  margin-bottom: 5px;
  text-align: left;
}

.placeholder.designer-system > div > .panel-body:hover {
  cursor: pointer;
}

.placeholder.designer-system > div > .panel-body {
  padding: 0px;
  overflow: auto;
}

.placeholder.designer-system > div > .panel-body > .table {
  margin-bottom: 5px;
  text-align: left;
}

#designer-log .panel-body {
  user-select: text;
}

.dropdown-menu-right {
  right: 17px;
  left: auto;
  position: absolute;
  top: 17px;
}

.panel > .panel-heading > .dropdown > button {
  padding: 3px 9px;
  border-radius: 5px;
}

pre[class*='language-'] {
  background-color: #ffffff;
}

.dropdown-menu li {
  cursor: pointer;
}

.list-group.designer-library {
  cursor: pointer;
  margin-bottom: 0px;
}

.modal-dialog .modal-content .modal-footer {
  border: 0px;
}

.designer-system tr:hover {
  background-color: #f5f5f5;
}
.designer-schema tr:hover {
  background-color: #f5f5f5;
}
.designer-model .list-group-item:hover {
  background-color: #f5f5f5;
}
.designer-type .list-group-item:hover {
  background-color: #f5f5f5;
}
.designer-component tr:hover {
  background-color: #f5f5f5;
}

.designer-spaces-header {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #e7e7e7;
}

designer-spaces-system-header {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #e7e7e7;
}

designer-spaces-components-header {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #e7e7e7;
}

.sidebar-module {
  padding-top: 15px;
  padding-bottom: 15px;
  margin: 0 -15px 15px;
}
.sidebar-module-inset {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
  border: 2px solid #e7e7e7;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
  margin-bottom: 0;
}

.designer-spaces-help-text {
  padding: 15px;
  text-align: justify;
}

.btn:focus {
  outline: none !important;
}

.designer-library {
  max-height: 200px;
  overflow: auto;
}

.result-search {
  max-height: 300px;
  overflow: auto;
}

#designer-dialog-import-modal-from-library-form {
  display: none;
}
#designer-dialog-import-modal-from-systems-form {
  display: none;
}

#designer-dialog-export-options-sub-system {
  display: none;
}

#designer-dialog-export-options-log-level {
  display: none;
}

#designer-dialog-export-options-diagram-type {
  display: none;
}

#designer-dialog-sync-options-log-level {
  display: none;
}

#designer-dialog-option:hover {
  cursor: pointer;
}

.badge {
  background-color: #337ab7;
  right: 5px;
  position: absolute;
}

#designer-dialog-extension-modal-extensions-area {
  display: none;
}

#designer-dialog-extension-modal-systems-area {
  display: none;
}

#designer-dialog-extension-modal-remove {
  display: none;
}

#designer-dialog-command-modal .modal-body {
  padding-bottom: 0px;
}

#designer-dialog-command-result-area {
  margin-bottom: 0px;
}

.result-command {
  max-height: 400px;
  overflow: auto;
}

.designer-command-result {
  max-height: 300px;
  overflow: auto;
}

.list-group.designer-command-result {
  cursor: pointer;
  margin-bottom: 0px;
}

@media (max-width: 767px) {
  .form-horizontal .checkbox,
  .form-horizontal .checkbox-inline,
  .form-horizontal .radio,
  .form-horizontal .radio-inline {
    padding-top: 0px;
  }

  .modal-dialog .form-group label {
    margin-top: 6px;
  }
}

.panel-title {
  margin-right: 30px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

.panel-body {
  overflow: auto !important;
  text-overflow: ellipsis !important;
}

#designer-spaces-items li a,
#designer-spaces-system-items li a,
#designer-spaces-components-items li a {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.panel-help {
  width: 200px;
  color: #99999f;
  border-color: #ccc;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20%;
  border-width: 1px;
}

.panel-help:hover {
  cursor: pointer;
}

#designer-spaces-items {
  overflow: auto;
  max-height: 300px;
}

#designer-spaces-components-items {
  overflow: auto;
  max-height: 300px;
}

.row {
  margin-right: 0px !important;
  margin-left: 0px !important;
}

#designer-log-clean:focus {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.placeholder.designer-log > div > .panel-body {
  max-height: 500px;
  overflow: auto;
}

.icon-rotate-left {
  transform: rotate(90deg) !important;
  -webkit-transform: rotate(90deg) !important;
  -moz-transform: rotate(90deg) !important;
  -ms-transform: rotate(90deg) !important;
}

.icon-rotate-right {
  transform: rotate(-90deg) !important;
  -webkit-transform: rotate(-90deg) !important;
  -moz-transform: rotate(-90deg) !important;
  -ms-transform: rotate(-90deg) !important;
}

.log-number {
  margin-left: 10px;
  position: relative;
  right: 0px;
}

#designer-menubar-actions > li:hover {
  cursor: pointer;
  background-color: #e7e7e7;
}

#designer-dialog-config-language {
  display: none;
}