/*
 * (c) 2022 Jens Heidrich <info@tulix.de>
 *
 */

:root {
  --esl_gray: #535353;
  --esl_yellow: #ffab0b;
}

body {
  font-family: 'Roboto', 'sans-serif';
}

.jens_is_in_da_house {
    position: fixed;
    top: 0;
    left: 0;
    width: 0px;
    height: 0px;
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    border-style: solid;
    border-width: 1rem 1rem 0 0;
    border-color: #eb1d36 transparent transparent transparent;
    z-index: 2000;
    cursor: help;
}

.pointer {
    cursor: pointer;
}

.columns-500 {
  column-width: 500px;
}

.columns {
  column-gap: 4rem;
  column-rule-width: 0.5rem;
  column-rule-style: dashed;
  column-rule-color: var(--bs-gray-400);
}

.bg-gradient-gray-600-to-gray-400 {
  background-color: var(--bs-gray-600) !important;
  background-image: linear-gradient(135deg, var(--bs-gray-600), var(--bs-gray-400) 100%) !important;
}

.bg-success-opacity {
  background-color: rgba(0, 172, 105, 0.5);
}

.topnav {
  height: 3rem;
}

.topnav .navbar-brand {
  font-size: 2rem;
  width: 13rem;
}

.sidenav .sidenav-menu .nav .nav-esl-link.active {
  /* TODO: lieber leichter Verlauf oder Border oder Icon rechts */
  /*color: var(--esl_gray); */
  /* background-color: var(--esl_yellow); */
}

/* sidenav off by Jens Heidrich 2024-12-03 */
.sidenav-off #layoutSidenav #layoutSidenav_nav {
  transform: translateX(-15rem);
}

.sidenav-off #layoutSidenav #layoutSidenav_content:before {
    content: None;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1037;
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}

@media (min-width: 992px) {
 .sidenav-off #layoutSidenav #layoutSidenav_content {
    margin-left: -15rem;
 }
}

.text-esl{
  color: var(--esl_gray);
}

.text-esl-light{
  color: var(--esl_yellow);
}

.bg-esl{
  background-color: var(--esl_gray);
}

.bg-esl-yellow{
  background-color: var(--esl_yellow) !important;
}

.topnav.navbar-esl .navbar-brand {
  color: #535353;
  background-color: #ffab0b;
  margin-top: 0.3125rem;
  margin-bottom: 0.3125rem;
  padding-top: 0;
  padding-bottom: 0;
}

.topnav .navbar-brand img {
  height: 1.8rem;
}
.pageheader-icon {
  vertical-align: baseline;
}

option.pieces-in-stock {
  background-color: wheat;
}

.dataTable-wrapper .dataTable-container {
  font-size: 1rem;
}

.dataTable-selector,
.dataTable-input,
.form-select,
.form-control {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}

.dataTable-input,
.form-control {
  padding-right: 0.5rem;
}

/* TODO: für andere Klassen neben primary definieren */
.btn-outline-primary.no-hover:hover {
  color: #0d6efd;
  background-color: transparent;
}

.btn-outline-primary.no-hover:hover label,
.btn-outline-primary.no-hover:hover input {
  cursor: pointer;
}

table.esl-list tr {
    border-bottom: none;
    border-top: none;
}

.dataTable-table > tbody > tr > td,
.dataTable-table > tbody > tr > th,
.dataTable-table > tfoot > tr > td,
.dataTable-table > tfoot > tr > th,
.dataTable-table > thead > tr > td,
.dataTable-table > thead > tr > th {
    padding: .25rem .25rem;
    vertical-align: middle;
}

/* https://stackoverflow.com/a/55769993 */

.toggler {
  border-color: #e0e5ec;
}

.toggler ~tr.collapseContainingDiv > td {
  border-width: 1px;
}

.toggler.collapsed ~tr.collapseContainingDiv {
  border-width: 0;
}

.toggler.collapsed ~tr.collapseContainingDiv > td {
  border-width: 0;
}

.collapseContainingDiv {
  border-collapse: collapse;
}

.collapseContainingDiv td {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* redefine bs collapse */
.collapse {
  display: block !important;
  visibility: visible;
  overflow: hidden;
  height: 0px;
}

.collapse.show {
    height: auto;
}

p.lightbox-caption {
  position: absolute;
  bottom: 0;
  right: 0;
}

p.lightbox-caption a {
  color: red;
}

.footer-admin {
  height: 3rem;
  padding-top: 3rem;
  align-items: end;
}

/* autocomplete classes */

.auto-results-wrapper.auto-is-active {
  max-width: 100%;
  width: auto;
}
.auto-results-wrapper > ul {
  list-style-type: none;
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: pointer;
}

div#messages {
    position: fixed;
    top: 30%;
    right: 1rem;
    z-index: 1000;
    width: 450px;
    max-width: 100%;
}

div#messages > div.alert {
    position: absolute;
    right: 0px;
    top: 0;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
    animation: movein 2s forwards, moveout 1s 10s forwards;
    webkit-animation: movin 2s forwards, moveout 1s 10s forwards;
}

/* animations */

@keyframes movein {
  from { right: -2000px; }
  to   { right: 0; }
}

@keyframes moveout {
  from { right: 0px; }
  to   { right: -2000px; }
}