/*******************************************************************************
 * Copyright 2011-2023 Tim Stephenson and contributors
 *
 * 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.
 ******************************************************************************/
/* FONTS */
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400italic,400,700');
@import url('https://fonts.googleapis.com/css?family=Signika');
@import url('https://cloud.knowprocess.com/knowprocess-icons/3.1.0/style.css ');

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Signika', sans-serif;
  font-weight: 500;
}

/* END FONTS */

/*
 * COLOURS
 *   pink-purple: #da72ae
 *   green:       #779C95
 *   green-grey:  #9ebfb9
 *   grey 1:      #6f6f71
 *   grey 2:      #939598
 *   grey 3:      #b7b7b7
 *   charcoal:    #515151
 */

/* LIGHT / DARK */

aside,
nav,
footer {
  background-color: #cdcdcd;
}
body,
main {
  background-color: #efefef;
  color: #666666;
}

@media (prefers-color-scheme: dark) {
  nav {
    background-color: #222222;
  }
  body,
  main,
  .table {
    background-color: #4f4f4f;
    color: #cdcdcd;
  }
  aside,
  footer {
    background-color: #444444;
  }
}

/* END LIGHT / DARK */

/* START ACCESSIBILITY */
.a11y {
  display: none;
}
/* END ACCESSIBILITY */

a,
.nav-link {
  color: #9e3472;
}
a .inverted,
.nav-link .inverted {
  background-color: #9e3472;
  color: white;
}
a:active,
.nav-link:active,
a:focus,
.nav-link:focus,
a:hover,
.nav-link:hover {
  color: #cc86c4 /*#a86994*/ /*#7ba19a*/;
}
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
  font-family: 'Signika', sans-serif;
  font-weight: 500;
}
body,
text {
  font-family: 'Ubuntu', sans-serif;
}
table.table-borderless thead {
  border-bottom: solid 1px #779c95;
}
.bpmnProperties dl,
ol,
ul {
  line-height: 1rem;
  list-style: none;
  padding-left: 0;
}
aside a.kp-icon-remove {
  position: relative;
  top: 0px;
}
.bpmnToolbarSect .dropdown-menu {
  min-width: 12rem;
}
.navbar {
  font-size: 2rem;
}
.navbar-brand img {
  height: 48px;
}
.draggable {
  cursor: move;
}
text.link:active,
text.link:hover {
  text-decoration: underline;
}

/* RESPONSIVE OVERRIDES */

@media (min-width: 920px) {
  .min-md-180 {
    min-width: 180px;
  }
}

/* START BOOTSTRAP OVERRIDES */

body,
text {
  color: #6f6f71;
  font-family: Ubuntu;
}
h1 {
  color: #779c95;
}
h4 {
  border-bottom: 3px double #939598;
}
input.field-error:invalid,
select.field-error:invalid,
textarea.field-error:invalid {
  border: solid 3px #f33;
}

/* TODO not used ? */
input:focus:invalid,
select:focus:invalid,
textarea:focus:invalid {
  border: solid 3px #f33;
}

input ~ .field-hint,
select ~ .field-hint,
textarea ~ .field-hint {
  visibility: hidden;
  line-height: 0em;
}
input[type='checkbox'].form-control {
  box-shadow: none;
  -webkit-box-shadow: none;
}
input[type='checkbox'] ~ .secondary-label {
  left: 0.2em;
  position: relative;
  top: -0.7em;
}
input[type='checkbox'] ~ .help-block {
  margin-top: -1em;
}
td[contenteditable].form-control {
  width: 16.7%; /* eq col-xx-2 */
}
td[contenteditable].form-control:active {
  background-color: white;
  border: solid 1px #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
td ul {
  list-style: none;
  padding-inline-start: 0px;
}
/* help-block is the bootstrap terminology, field-hint is deprecated */
input:invalid ~ .help-block,
select:invalid ~ .help-block,
textarea:invalid ~ .help-block {
  color: #f33;
}
input:focus:invalid ~ .help-block,
select:focus:invalid ~ .help-block,
textarea:focus:invalid ~ .help-block,
input:focus:invalid ~ .field-hint,
select:focus:invalid ~ .field-hint,
textarea:focus:invalid ~ .field-hint {
  color: #f33;
  visibility: visible;
  line-height: 1.5em;
}
input:readonly,
select:readonly,
textarea:readonly {
  background-color: #cbcbcb;
}
.inline-form textarea.form-control {
  margin-left: 5px;
}
label.required::after {
  color: red;
  content: '*';
}
section {
  clear: both;
}
/* This causes a problem with tables when tenant stages include 'active'
not sure if anything requires it
section .active {
  display: inline;
}*/
section h2 {
  border-bottom: solid 1px #da72ae;
  color: #779c95;
  padding-bottom: 2px;
  padding-top: 2px;
  padding-left: 20px;
  padding-right: 20px;
}
@media (max-width: 767px) {
  section:nth-of-type(1) h2 {
    height: 85px;
  }
  section h2 div {
    height: 40px;
  }
}
@media (min-width: 768px) {
  section:nth-of-type(1) h2 {
    height: 45px;
  }
}
section h2 .search {
  /*margin-bottom: 10px;*/
  margin-right: 0;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
  border-color: #779c95;
}
@media (min-width: 992px) {
  section h2 .search {
    min-width: 15em;
  }
}
section h2 .glyphicon,
section h3 .glyphicon {
  height: 34px;
  margin: -6px 0px 2px 0px;
}
section h3 a.glyphicon {
  margin-right: 2px;
}
section h2 .glyphicon-search,
section h2 .kp-icon-search {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 0;
  border-top-right-radius: 15px;
  font-size: 20px;
  margin-left: 0px;
  position: relative;
  left: -7px;
  top: 2px;
}
section h2 .file {
  border-radius: 0 !important;
  border-color: #779c95;
  /*margin-bottom: 10px;*/
  margin-left: 0;
  margin-right: 0;
  margin-top: -5px;
  width: 110px;
}
section h3 {
  border-bottom: solid 1px #da72ae;
  padding-left: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd).overdue {
  background-color: rgba(255, 0, 0, 0.4);
}
.table-striped > tbody > tr:nth-of-type(even).overdue {
  background-color: rgba(255, 0, 0, 0.3);
}
.table-striped > tbody > tr:nth-of-type(odd).due {
  background-color: rgba(255, 100, 0, 0.4);
}
.table-striped > tbody > tr:nth-of-type(even).due {
  background-color: rgba(255, 100, 0, 0.3);
}
th {
  font-weight: bold;
}
tfoot th {
  font-style: italic;
  font-weight: normal;
  text-align: center;
}
.a-primary-label {
  font-weight: bold;
  text-decoration: underline;
}

.a-secondary-label {
  font-weight: bold;
}

.admin,
.super-admin,
.user {
  display: none;
  font-size: 16px;
}
.dropdown {
  text-decoration: none !important;
}
.btn-default,
.btn-primary {
  background-image: none;
}
.container-fluid {
  padding-right: 35px;
  padding-left: 35px;
}
.container-fluid .search {
  bottom: 2px;
}
.form-control {
  border-radius: 0;
}
input[type='checkbox'].form-control:focus {
  -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
  -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
}
.btn-group .glyphicon {
  margin: 0px;
  min-height: 36px;
}
.btn-group .glyphicon:nth-child(1) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group .glyphicon:nth-child(2) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  left: -4px;
  top: 2px;
}
.glyphicon.disabled,
.glyphicon.disabled:active,
.glyphicon.disabled:hover,
.glyphicon.disabled:visited {
  color: #6f6f71;
  background-color: #b7b7b7;
}
.btn,
.glyphicon-btn,
.icon-btn {
  border: solid 1px;
}
.txt-btn {
  font-family: Ubuntu, sans-serif;
  padding: 6px;
}
.glyphicon-sm,
.icon-sm {
  padding: 2px;
  border-radius: 2px;
  color: #779c95;
  text-align: center;
}
.glyphicon,
.icon {
  display: inline-block;
  font-size: 20px;
  padding: 6px;
  margin: 2px 1px;
  border-radius: 5px;
  color: #779c95;
  min-width: 34px;
  width: 34px;
  text-align: center;
}

a.glyphicon,
a.glyphicon:visited,
h2 a.glyphicon,
h2 a.glyphicon:visited {
  color: #939598;
  text-decoration: none;
}
.btn-group > a.btn {
  color: #939598;
  line-height: 1.3rem;
  padding: 0.3rem 0.5rem;
}
.input-group-addon .glyphicon {
  font-size: 16px;
  border: none;
  padding: 0px;
  margin: 0px;
  border-radius: 0px !important;
}
.clickable:focus,
.clickable:hover,
a.glyphicon:focus,
a.glyphicon:hover,
h2 a.glyphicon:focus,
h2 a.glyphicon:hover {
  color: #da72ae;
  /*color: #646669;*/
}
.sort-asc,
.sort-desc {
  border: none;
  font-size: 0.7em;
  font-family: 'knowprocess';
}

.help-block {
  clear: both;
  font-size: 0.65em;
  font-style: italic;
  line-height: 1em;
  margin-top: 2px;
  padding-left: 5px;
}
.modal .help-block {
  margin-top: -0.1em;
}
.help-block-lg {
  line-height: 1.2em;
  font-size: 0.8em;
}
.navbar-brand {
  padding: 0;
  position: relative;
}
.navbar-brand + span {
  position: relative;
  top: -3px;
}
.navbar-brand img {
  max-height: 80px;
  min-height: 55px;
}
.navbar-top {
  background-color: white;
  z-index: 200;
  position: relative;
  margin-top: 0;
  padding-top: 23px;
}
@media print {
  .screen {
    display: none;
  }
}
@media screen {
  .print {
    display: none;
  }
}
.criteria,
.search {
  display: inline;
  position: relative;
  bottom: 3px;
  width: 25%; /* This is a problem for data explorer, consider .inline-form instead */
}
.search {
  border-radius: 15px;
}
@media (min-width: 480px) {
  .search {
    width: 30%;
  }
}
@media (min-width: 768px) {
  .search {
    width: 40%;
  }
}
/* END BOOTSTRAP OVERRIDES */

.clickable:active,
.clickable:focus,
.clickable:hover {
  cursor: pointer;
}
.dropdown.dropdown-menu li {
  height: 25px;
  padding-left: 10px;
  text-transform: none;
}
.dropdown.dropdown-menu li.selected::after {
  float: right;
  margin-right: 10px;
}
.dropdown.dropdown-menu li.divider {
  background-color: #da72ae;
  height: 1px;
  margin: 0 10px 10px 10px;
}
.form {
  display: block;
  list-style: none;
}

.form label,
.form input {
  display: inline-block;
}
.form label {
  line-height: 2.5em;
  margin-right: 5px;
  padding: 0 0 0 0;
  text-align: right;
}
.form .col-md-6 label {
  margin-bottom: 0px;
}
.form label.textarea {
  vertical-align: top;
  line-height: 1.2em;
}
.form .col-md-6 label.textarea {
  /*width: 17%;*/
}
.form label.checkbox,
.form label.radio {
  width: 10%;
}
.form input,
.form select,
.form textarea {
  width: 60%;
}
@media (min-width: 920px) {
  .form .col-md-12 textarea {
    width: 80%;
  }
}
.form input[type='checkbox'],
.form input[type='radio'] {
  position: relative;
  margin-left: 10px;
  width: 20px;
}
.form input.year {
  width: 80px;
}
.form input.create-field {
  border-width: 1px;
  margin: 5px;
}
.form input#curTitle {
  border-radius: 0;
  line-height: normal;
  width: 70px;
}
.form input#curFirstName,
.form input#curLastName {
  line-height: normal;
  width: 40%;
}
.form input.edit-field {
  border-width: 1px;
}
ul.form,
.form ul {
  padding-left: 0px;
}
h4 a.kp-icon-remove {
  position: relative;
  top: -12px;
}
@media only screen {
  #connectivityMessages {
    position: fixed;
    top: 5px;
    margin-left: 35%;
    margin-right: 35%;
    text-align: center;
    width: 30%;
    z-index: 500;
  }
  #messages,
  .messages {
    line-height: 2em;
    padding: 0 10px 0 10px;
  }
  #messages {
    position: fixed;
    top: 45px;
    margin-left: 25%;
    margin-right: 25%;
    width: 50%;
    z-index: 500;
  }
  #messages.text-danger {
    font-style: italic;
  }
}

/* SVG DIAGRAMS */

div.bpmnDiagram {
  /*border: 1px solid #ccc;*/
  overflow: auto;
  resize: both;
}

div.bpmnProperties {
  background: #efefef;
  border-radius: 10px;
  left: 20%;
  padding: 10px;
  position: fixed;
  right: 20%;
  bottom: 20px;
}

div.bpmndi.bpmnshape ul > li {
  display: inline;
}
div.bpmndi ul > li > label {
  font-weight: bold;
}
path.association,
path.flow,
rect.dataStoreReference {
  fill: transparent;
}

text {
  stroke-width: 0px;
}
text.endEvent,
text.intermediateCatchEvent,
text.intermediateThrowEvent,
text.startEvent {
  stroke-width: 0px;
}

text.callActivity,
text.businessRuleTask,
text.manualTask,
text.receiveTask,
text.scriptTask,
text.sendTask,
text.serviceTask,
text.task,
text.userTask {
  stroke-width: 0px;
}
text.textAnnotation {
  fill: #666;
  font-size: 75%;
  stroke-width: 0px;
}

#funnel g:nth-of-type(even) text {
  fill: #6f6f71;
}

#funnel g:nth-of-type(odd) text {
  fill: #f9f9f9;
}

#propertySectMin {
  background-color: #fcf8e3;
  border: #da72ae double 3px;
  bottom: 0;
  display: none;
  position: fixed;
  right: 5%;
}
#propertySectMin .glyphicon {
  border: none;
}

#propertySect {
  background-color: #fcf8e3;
  border: #da72ae double 3px;
  display: 'inline';
  padding: 20px;
  position: fixed;
  z-index: '100';
  bottom: 0;
  left: auto;
  right: auto;
  height: 150px;
  width: 90%;
}
#propertySect .close {
  top: -20px;
  right: -20px;
  border: none;
}

.selected {
  stroke: #da72ae;
  stroke-width: 3px;
}

/* END SVG DIAGRAMS */

/* PRINT */
@media print {
  .toolbar {
    display: none;
  }
}