thetool/public/assets/css/thetool.css

/* Overrides */

html {
  overflow-y: scroll;
}

body {
  color: #323a36;
  background-color: #e7e7e7 !important;
}
footer {
  background-color: #e7e7e7 !important;
}

hr {
  border-top: 1px solid #e7e7e7 !important;
}

.text-monospace-valign-fix {
  line-height:24px;
}

.table,
.table-hover tbody tr:hover{
  color: #323a36;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.05);
}

.table-hover tbody tr:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, 0.075);
}

.table.view-table th {
  text-align:right;
}
.table.view-table td {
  text-align:left;
}

.table-striped tbody tr.active:nth-of-type(odd) {
  background-color: #e0f5e0;
}

.table-striped tbody tr.active:nth-of-type(even) {
  background-color: #f0fff0;
}

.table-hover tbody tr.active:hover {
  color: #212529;
  background-color: #dbf0db;
}

.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.btn-primary:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0a58ca;
  border-color: #0a53be;
}
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-primary:disabled, .btn-primary.disabled {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

input[type=text].form-control,
select.form-control,
textarea.form-control
{
  color: #323a36;
}


.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  color: #323a36;
}

.text-dark-red {
    color: #c1554c !important;
}

.card {
  border: 1px solid #ced4da;
  /*box-shadow: 3px 3px 2px #a0a0a0;*/
}

.card.no-shadow {
  box-shadow: none;
}

.card.border-top-primary {
  border-top: 2px solid #007bff;
}
.card.border-top-danger {
  border-top: 2px solid #f1556c;
}
.card.border-top-success {
  border-top: 2px solid #25b343;
}
.card.border-top-warning {
  border-top: 2px solid #f7b84b;
}
.card.border-top-info {
  border-top: 2px solid #4b88e4;
}
.card.border-top-purple {
  border-top: 2px solid #6b5eae;
}


/* * Vodia Identity Container * */
#vodia-identity-container .dropdown-menu {
  transition: opacity 0.15s linear, visibility 0.15s linear;
  display: block; opacity: 0; visibility: hidden;
}
#vodia-identity-container.show .dropdown-menu { opacity: 1; visibility: visible; }
#vodia-identity-container .pointer { cursor: pointer; }
.opacity-75 { opacity: 0.75 !important; }

.vodia-list-item-icon {
  font-size: 1.3em;
  vertical-align: middle;
}

#vodia-identity-container * {
  line-height: normal;
  vertical-align: middle;
}

#vodia-identity-container > a {
  line-height: 70px;
  max-height: 70px;
  height: 70px;
}

.vodia-identity-color-blue { color: #4b88e4; }
.vodia-identity-color-green { color: #25b343; }
.vodia-identity-color-pink { color: #f672a7; }
.vodia-identity-color-black { color: #000; }
.vodia-identity-color-grey { color: #6c757d; }
/* * Vodia Identity Container * */



#topnav {
  box-shadow: 2px 2px 1px #a0a0a0;
}

.nav-tabs > li > a {
  color: #0d6efd;
}

.opacity-5 {
  opacity: 0.5;
}
.opacity-3 {
  opacity: 0.3;
}

.loader-big {
  position: absolute; width: 100%; height: 100%; text-align: center; z-index: 1
}

.contract-link {
  
}

.canceled {
  text-decoration: line-through;
}

.not-finished {
  opacity: 0.7;
}

/* tinymce */
.tox-editor-header,
.tox-menubar,
.tox-toolbar-overlord,
.tox-toolbar__primary
{
  background: none;
  background-color: #eee !important;
}

/* allow icons in custom-file label */
.custom-file-label::before {
  /*noinspection CssNoGenericFontName*/
  font-family: "Font Awesome 6 Pro";
  content: "\f56f";
  padding-right: 6px;
}

/**************************
 * custom styles
 *************************/


.navigation-menu a i {
  width: 20px;
}

.container-fluid {
  max-width:98%;
}

.hidden {
  display:none;
}

.has-sub-submenu {
  border-bottom: 1px solid #eee;
}

.submenu .border-top {
  border-top: 1px solid #eee !important;
}

.sub-submenu {
  padding-left: 12px !important;
}

.select2-container .select2-selection .select2-selection__choice {
  background-color: #007bff !important;
  color: #fff !important;
  border: none !important;
}

.select2-container .select2-selection .select2-selection__choice__remove {
    color: #fff !important;
    margin-right: 5px !important;
}

.select2-results > .select2-results__options {
  max-height: 400px !important;
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 400px !important;
}

#banned_rimo_fcp + .select2-container .select2-selection .select2-selection__choice {
  background-color: var(--red) !important;
}

.network-list-tr {
  cursor: pointer;
}

.network-list-tr .controls {
  
}

.building-list-tr {
  cursor: pointer;
}

.order-list-tr {
  cursor: pointer;
  padding-bottom: 0;
}

.order-list-tr td {
  padding-bottom: 4px;
}

.table-bg-even {
  /*background-color: #f1f5f7;*/
  background-color: rgba(0,0,0,.05);
}

.table-bg-odd {
  /*background-color: #eceff5;*/
  background-color: rgba(255,171,0,.05);
}

.workflow-table {
  margin-bottom:4px;
  max-width: 100% !important;
  overflow: scroll;
}

.workflow-table label {
  white-space: nowrap;
}

.workflow-table .workflow-item {
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-top: none;
  min-width: 138px;
  max-width: 138px;
}

.workflow-table tr {
  max-width:100%;
}

.workflow-table .workflow-item.wfitem-width-2 {
  max-width: 276px;
}
.workflow-table .workflow-item.wfitem-width-2 {
  max-width: 414px;
}
.workflow-table .workflow-item.wfitem-width-2 {
  max-width: 552px;
}
.workflow-header {
  
}

.workflow-header th {
  padding-top: 4px;
  padding-bottom: 4px;
  
}

.workflow-table .workflow-item select {
  padding-left: 4px;
  min-width: 138px;
  max-width: 138px;
}

.workflow-item input[type=text] {
  width: 138px;
}


@media (min-width: 2560px) {
  .workflow-table .workflow-item {
    min-width: 138px;
    width: auto;
  }
  
  .workflow-table .workflow-item select {
    min-width: 100%;
    width: 100%;
  }
  .workflow-item input[type=text] {
    min-width: 100%;
    width: 100%;
  }

}


.color-shadow-b {
  text-shadow: 1px 1px 2px black;
}
.color-shadow-2 {
  text-shadow: 1px 1px 2px white;
}


.pagination a {
  color: #007bff;
}



.padding-left-2 {
  padding-left: 2px;
}

.padding-right-2 {
  padding-right: 2px;
}

td.controls {
  cursor: default;
  text-align: left; letter-spacing: 4px; font-size: 1.1em;
}

.product-container {
  padding-top: 4px;
  padding-bottom: 4px;
  border-top: 2px solid #dee2e6;
}

.product-container:hover {
  background-color: rgba(0,0,0,.075);
}

.product-container:last-child {
  border-bottom: 2px solid #dee2e6;
}

.product-container:nth-child(even) {
  background-color: rgba(0,0,0,.05);
}

.product-container:nth-child(even):hover {
  background-color: rgba(0,0,0,.075);
}

.product-container.deleted,
.product-container.deleted:hover {
  background-color: #aaa;
}

.status {
  border-radius: 8px;
}

.not-connected {
  color: red;
}
.bg-not-conntected {
  background-color: red;
}

.building-connected {
  color: orange;
}
.bg-building-connected {
  background-color: orange;
}

.bg-lightblue {
  background-color: #f4faff;
}

.connected {
  color: limegreen;
}
.bg-connected {
  background-color: limegreen;
}
.invalid {
  border-color: red !important;
}

.invalid:focus {
  border-color: red !important;
}


#iban_error {
  color: red;
}

.flash-bg {
  background-color: yellow !important;
  color: yellow;
}

.btn-outline-rot {
  color: #FF0000;
  border-color: #FF0000;
}

.btn-outline-gruen {
  color: #00FF00;
  border-color: #00FF00;
  background-color: #555;
}

.btn-outline-blau {
  color: #0000FF;
  border-color: #0000FF;
}

.btn-outline-gelb {
  color: #FFFF00;
  border-color: #FFFF00;
  background-color: #555;
}

.btn-outline-weiss {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background-color: #555;
}

.btn-outline-grau {
  color: #888888;
  border-color: #888888;
}

.btn-outline-braun {
  color: #A52A2A;
  border-color: #A52A2A;
}

.btn-outline-violett {
  color: #8800FF;
  border-color: #8800FF;
}

.btn-outline-tuerkis {
  color: #00FFFF;
  border-color: #00FFFF;
  background-color: #555;
}

.btn-outline-schwarz {
  color: #000000;
  border-color: #000000;
}

.btn-outline-orange {
  color: #FF8800;
  border-color: #FF8800;
}

.btn-outline-rosa {
  color: #FF0088;
  border-color: #FF0088;
}

.btn-outline-natur {
  color: #000000;
  background-color: #FFFFCC;
}

.btn-outline-Rot-Gelb {
  color: #FFFFFF;
  border-left-color: #FF0000;
  border-top-color: #FF0000;
  border-right-color: #FFFF00;
  border-bottom-color: #FFFF00;
  background: linear-gradient(90deg, rgba(255,0,0,.5) 0%, rgba(255,0,0,.5) 50%, rgba(255,255,0,.5) 50%, rgba(255,255,0,.5) 100%);
}

.btn-outline-Rot-Gruen {
  color: #FFFFFF;
  border-left-color: #FF0000;
  border-top-color: #FF0000;
  border-right-color: #00FF00;
  border-bottom-color: #00FF00;
  background: linear-gradient(90deg, rgba(255,0,0,.5) 0%, rgba(255,0,0,.5) 50%, rgba(0,255,0,.5) 50%, rgba(0,255,0,.5) 100%);
}

.btn-outline-Rot-Blau {
  color: #FFFFFF;
  border-left-color: #FF0000;
  border-top-color: #FF0000;
  border-right-color: #0000FF;
  border-bottom-color: #0000FF;
  background: linear-gradient(90deg, rgba(255,0,0,.5) 0%, rgba(255,0,0,.5) 50%, rgba(0,0,255,.5) 50%, rgba(0,0,255,.5) 100%);
}

.btn-outline-Rot-Violett {
  color: #FFFFFF;
  border-left-color: #FF0000;
  border-top-color: #FF0000;
  border-right-color: #8800FF;
  border-bottom-color: #8800FF;
  background: linear-gradient(90deg, rgba(255,0,0,.5) 0%, rgba(255,0,0,.5) 50%, rgba(136,0,255,.5) 50%, rgba(136,0,255,.5) 100%);
}

.btn-outline-Rot-Grau {
  color: #FFFFFF;
  border-left-color: #FF0000;
  border-top-color: #FF0000;
  border-right-color: #888888;
  border-bottom-color: #888888;
  background: linear-gradient(90deg, rgba(255,0,0,.5) 0%, rgba(255,0,0,.5) 50%, rgba(136,136,136,.5) 50%, rgba(136,136,136,.5) 100%);
}

.btn-outline-Gelb-Blau {
  color: #000000;
  border-left-color: #FFFF00;
  border-top-color: #FFFF00;
  border-right-color: #0000FF;
  border-bottom-color: #0000FF;
  background: linear-gradient(90deg, rgba(255,255,0,.5) 0%, rgba(255,255,0,.5) 50%, rgba(0,0,255,.5) 50%, rgba(0,0,255,.5) 100%);
}

.btn-outline-Gelb-Violett {
  color: #000000;
  border-left-color: #FFFF00;
  border-top-color: #FFFF00;
  border-right-color: #8800FF;
  border-bottom-color: #8800FF;
  background: linear-gradient(90deg, rgba(255,255,0,.5) 0%, rgba(255,255,0,.5) 50%, rgba(136,0,255,.5) 50%, rgba(136,0,255,.5) 100%);
}

.btn-outline-Gelb-Grau {
  color: #000000;
  border-left-color: #FFFF00;
  border-top-color: #FFFF00;
  border-right-color: #888888;
  border-bottom-color: #888888;
  background: linear-gradient(90deg, rgba(255,255,0,.5) 0%, rgba(255,255,0,.5) 50%, rgba(136,136,136,.5) 50%, rgba(136,136,136,.5) 100%);
}

.btn-outline-Gruen-Blau {
  color: #000000;
  border-left-color: #00FF00;
  border-top-color: #00FF00;
  border-right-color: #0000FF;
  border-bottom-color: #0000FF;
  background: linear-gradient(90deg, rgba(0,255,0,.5) 0%, rgba(0,255,0,.5) 50%, rgba(0,0,255,.5) 50%, rgba(0,0,255,.5) 100%);
}

.btn-outline-Gruen-Violett {
  color: #000000;
  border-left-color: #00FF00;
  border-top-color: #00FF00;
  border-right-color: #8800FF;
  border-bottom-color: #8800FF;
  background: linear-gradient(90deg, rgba(0,255,0,.5) 0%, rgba(0,255,0,.5) 50%, rgba(136,0,255,.5) 50%, rgba(136,0,255,.5) 100%);
}

.btn-outline-Gruen-Grau {
  color: #000000;
  border-left-color: #00FF00;
  border-top-color: #00FF00;
  border-right-color: #888888;
  border-bottom-color: #888888;
  background: linear-gradient(90deg, rgba(0,255,0,.5) 0%, rgba(0,255,0,.5) 50%, rgba(136,136,136,.5) 50%, rgba(136,136,136,.5) 100%);
}

.btn-outline-Braun-Blau {
  color: #FFFFFF;
  border-left-color: #A52A2A;
  border-top-color: #A52A2A;
  border-right-color: #0000FF;
  border-bottom-color: #0000FF;
  background: linear-gradient(90deg, rgba(165,42,42,.5) 0%, rgba(165,42,42,.5) 50%, rgba(0,0,255,.5) 50%, rgba(0,0,255,.5) 100%);
}

.btn-outline-Braun-Violett {
  color: #FFFFFF;
  border-left-color: #A52A2A;
  border-top-color: #A52A2A;
  border-right-color: #8800FF;
  border-bottom-color: #8800FF;
  background: linear-gradient(90deg, rgba(165,42,42,.5) 0%, rgba(165,42,42,.5) 50%, rgba(136,0,255,.5) 50%, rgba(136,0,255,.5) 100%);
}

.btn-outline-Braun-Grau {
  color: #FFFFFF;
  border-left-color: #A52A2A;
  border-top-color: #A52A2A;
  border-right-color: #888888;
  border-bottom-color: #888888;
  background: linear-gradient(90deg, rgba(165,42,42,.5) 0%, rgba(165,42,42,.5) 50%, rgba(136,136,136,.5) 50%, rgba(136,136,136,.5) 100%);
}

.btn-outline-Braun-Gruen {
  color: #FFFFFF;
  border-left-color: #A52A2A;
  border-top-color: #A52A2A;
  border-right-color: #00FF00;
  border-bottom-color: #00FF00;
  background: linear-gradient(90deg, rgba(165,42,42,.5) 0%, rgba(165,42,42,.5) 50%, rgba(0,255,0,.5) 50%, rgba(0,255,0,.5) 100%);
}

.btn-outline-Braun-Gelb {
  color: #FFFFFF;
  border-left-color: #A52A2A;
  border-top-color: #A52A2A;
  border-right-color: #FFFF00;
  border-bottom-color: #FFFF00;
  background: linear-gradient(90deg, rgba(165,42,42,.5) 0%, rgba(165,42,42,.5) 50%, rgba(255,255,0,.5) 50%, rgba(255,255,0,.5) 100%);
}

.btn-outline-Braun-Rot {
  color: #FFFFFF;
  border-left-color: #A52A2A;
  border-top-color: #A52A2A;
  border-right-color: #FF0000;
  border-bottom-color: #FF0000;
  background: linear-gradient(90deg, rgba(165,42,42,.5) 0%, rgba(165,42,42,.5) 50%, rgba(255,0,0,.5) 50%, rgba(255,0,0,.5) 100%);
}

.btn-outline-Schwarz-Rot {
  color: #FFFFFF;
  border-left-color: #000000;
  border-top-color: #000000;
  border-right-color: #FF0000;
  border-bottom-color: #FF0000;
  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 50%, rgba(255,0,0,.5) 50%, rgba(255,0,0,.5) 100%);
}

.btn-outline-Schwarz-Gelb {
  color: #FFFFFF;
  border-left-color: #000000;
  border-top-color: #000000;
  border-right-color: #FFFF00;
  border-bottom-color: #FFFF00;
  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 50%, rgba(255,255,0,.5) 50%, rgba(255,255,0,.5) 100%);
}

.btn-outline-Schwarz-Gruen {
  color: #FFFFFF;
  border-left-color: #000000;
  border-top-color: #000000;
  border-right-color: #00FF00;
  border-bottom-color: #00FF00;
  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 50%, rgba(0,255,0,.5) 50%, rgba(0,255,0,.5) 100%);
}

.btn-outline-Schwarz-Blau {
  color: #FFFFFF;
  border-left-color: #000000;
  border-top-color: #000000;
  border-right-color: #0000FF;
  border-bottom-color: #0000FF;
  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,255,.5) 50%, rgba(0,0,255,.5) 100%);
}

.btn-outline-Schwarz-Violett {
  color: #FFFFFF;
  border-left-color: #000000;
  border-top-color: #000000;
  border-right-color: #8800FF;
  border-bottom-color: #8800FF;
  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 50%, rgba(136,0,255,.5) 50%, rgba(136,0,255,.5) 100%);
}

.btn-outline-Schwarz-Grau {
  color: #FFFFFF;
  border-left-color: #000000;
  border-top-color: #000000;
  border-right-color: #888888;
  border-bottom-color: #888888;
  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 50%, rgba(136,136,136,.5) 50%, rgba(136,136,136,.5) 100%);
}

.btn-outline-Schwarz-Braun {
  color: #FFFFFF;
  border-left-color: #000000;
  border-top-color: #000000;
  border-right-color: #A52A2A;
  border-bottom-color: #A52A2A;
  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 50%, rgba(165,42,42,.5) 50%, rgba(165,42,42,.5) 100%);
}






.text-white {
  color: #f00;
}







.order-date-pill {
  border: 1px dashed #999;
  border-radius: 4px;
  padding-left: 4px;
  padding-right: 4px;
}

.order-date-pill.active {
  border-color: #25b343;
  background-color: #f0fff0;
}

.top-no-border > td,
.top-no-border > th {
  border-top: none;
  padding-top: 2px;
}

.bottom-no-border > td,
.bottom-no-border > th {
  border-bottom: none;
  padding-bottom: 2px;
}

.pointer {
  cursor: pointer;
}


.counter {
  vertical-align: super;
  font-size: .75em;
  color: #fff;
  background-color: tomato;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 1px;
  padding-bottom: 1px;
  border-radius: 4px;
}

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

.bookstack-integration-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.bookstack-integration-modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
  height: 80%;
  position: relative;
  transition: opacity 0.3s ease;
}

.bookstack-integration-close-btn {
  position: absolute;
  right: -10px;
  top: -10px;
  background: red;
  border: none;
  color: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.bookstack-integration-iframe {
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}