/*-----------------------------------------------------------------------------------*/
/*  0.  Colors
/*-----------------------------------------------------------------------------------*/
:root {
  --white: #fff;
  --black: #000;
  --dark-grey: #637280;
  --black-opaque: rgba(0, 0, 0, 0.125);
  --turquoise: #4ba797;
  --light-turquoise: #a0d8ce;
  --dt-row-selected: var(--turquoise);
  --dt-row-selected-link: var(--white);
  --badge-primary: #007bff;
}

/* General */
a {
  color: var(--turquoise);
}

.badge-primary {
  background-color: var(--badge-primary);
}

/* Pagination */
.pagination .page-link {
  color: var(--turquoise);
}

/* Buttons */
.btn-primary {
  background-color: var(--turquoise);
  border-color: var(--turquoise);
}

.btn-primary:hover {
  color: var(--white);
  background-color: var(--light-turquoise);
  border-color: var(--light-turquoise);
}

.btn-primary:active {
  background-color: var(--light-turquoise);
  border-color: var(--light-turquoise);
}

.btn-primary.nav-link:hover {
  color: var(--white) !important;
  background-color: var(--light-turquoise);
  border-color: var(--light-turquoise);
}

.btn-primary:visited {
  background-color: var(--turquoise);
  border-color: var(--turquoise);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: var(--white);
  background-color: var(--light-turquoise);
  border-color: var(--light-turquoise);
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
  color: var(--white);
  background-color: var(--light-turquoise);
  border-color: var(--light-turquoise);
}

.btn-outline-primary {
  color: var(--light-turquoise);
  border-color: var(--light-turquoise);
}

.btn-outline-primary:hover {
  color: var(--turquoise);
  background-color: var(--light-turquoise);
  border-color: var(--light-turquoise);
}

.btn-outline-primary:active, .btn-outline-primary:focus {
  color: var(--white) !important;
  background-color: var(--turquoise) !important;
  border-color: var(--turquoise) !important;
}

.large-button.active {
  border: 2px solid var(--turquoise);
  background-color: var(--black-opaque);
  color: var(--turquoise);
}

.large-button ion-icon {
  color: var(--turquoise);
}

.large-button:hover {
  background-color: var(--light-turquoise);
}

.fullwidth-button {
  background: var(--turquoise);
  border: solid 1px var(--turquoise);
}

.simple-transparent-button {
  color: var(--turquoise);
}

.simple-transparent-button:hover {
  color: var(--dark-grey);
}

.paginate_button:hover {
  background: none !important;
  background-color: var(--light-turquoise) !important;
}

.dropdown-item.active, .dropdown-item:active {
  color: var(--white);
  text-decoration: none;
  background-color: var(--turquoise);
}

/* Searchbar */
.search-bar {
  border-bottom: 2px solid var(--turquoise);
}

.search-bar:focus {
  border-color: var(--light-turquoise);
}

/* DataTables */
table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected {
  background-color: var(--turquoise);
}

/* Card */
.card-app:hover .card-body {
  color: var(--light-turquoise);
}

.card-app:hover .card-footer {
  background-color: var(--light-turquoise);
}

.card-document:hover .card-body {
  color: var(--light-turquoise);
}

.card-document:hover .card-footer {
  background-color: var(--light-turquoise);
}

.card-document .card-body {
  color: var(--turquoise);
}

.card-app .card-body {
  background-color: var(--turquoise);
}

/* Message overview */
#message-overview tbody tr.selected {
  color: var(--black);
  background-color: var(--light-turquoise);
}

.page-item.active .page-link {
  color: var(--white);
  background-color: var(--turquoise);
  border-color: var(--turquoise);
}

.page-link {
  color: var(--turquoise);
  background-color: var(--white);
  border: 1px solid var(--black-opaque);
}

.unread-message {
  background-color: var(--turquoise) !important;
  color: var(--white) !important;
}

/* Logos & Images */
.sidebar-top-image {
  background: url(/img/sidebar-qp.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 195px;
}

#logo {
  height: 22px;
  background: url(/img/logo_4x.png);
  width: 77px;
  background-size: contain;
  background-repeat: no-repeat;
}

.credential-logo {
  width: 40%;
  height: 71px;
  margin-top: 47px;
  margin-bottom: 25px;
  background: url(/img/logo_4x.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
}

.bg-splashscreen {
  background: url(/img/login-qp.jpg);
}

.sidebar-bottom-image {
  background: url(/img/sidebar-qp.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Doc */
.card-ct-app-tab-active {
  background: var(--turquoise);
}

/* Other */
.credential-title {
  color: var(--turquoise);
}

.user-img-round-sm-wrapper, .user-img-round-md-wrapper {
  border: solid 1.5px var(--turquoise);
}

.user-img-round-sm-wrapper:hover {
  border: solid 1.5px var(--dark-grey);
}

.header-dropdown {
  color: var(--turquoise);
}

.coreprocess-weitereanweisungen {
  background: var(--turquoise);
  border: 1px solid var(--turquoise);
}

/* Date picker */
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
  color: var(--white) !important;
  background-color: var(--light-turquoise) !important;
  border-color: var(--light-turquoise) !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
  background-color: var(--turquoise) !important;
}

/* Scrollfix */
#docBody {
  overflow-y: auto;
  border: none !important;
  min-height: 61vh;
  height: 69vh;
}

/* scrollbar */
/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: none;
  border: solid 1px var(--black-opaque);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--light-turquoise);
  border: solid 1px var(--black-opaque);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--turquoise);
}

body {
  counter-reset: h1counter;
}

/* H1 */
h1.doc-header-numbered {
  counter-increment: h1counter;
  counter-reset: h2counter;
}

h1.doc-header-numbered::before {
  content: counter(h1counter) ". ";
}

/* H2 */
h2.doc-header-numbered {
  counter-increment: h2counter;
  counter-reset: h3counter;
}

h2.doc-header-numbered::before {
  content: counter(h1counter) "." counter(h2counter) ". ";
}

/* H3 */
h3.doc-header-numbered {
  counter-increment: h3counter;
  counter-reset: h4counter;
}

h3.doc-header-numbered::before {
  content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) ". ";
}

/* H4 */
h4.doc-header-numbered {
  counter-increment: h4counter;
}

h4.doc-header-numbered::before {
  content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) ". ";
}

#pmCreateEditFolder .modal-body {
  height: 65vh;
}