/*
.h_container {
  border: 0px solid rgba(202, 202, 202, 0.73);
  background-color: #ffffff;
  border-radius: 2px;
  padding: 16px;
  margin: 16px 0;
}


.h_container::after {
  content: "";
  clear: both;
  display: table;
}


.h_container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}


.h_container span {
  font-size: 20px;
  margin-right: 15px;
}

@media (max-width: 500px) {
  .h_container {
    text-align: center;
  }

  .h_container img {
    margin: auto;
    float: none;
    display: block;
  }
}
*/
.text-muted {
  font-size: x-small;
}

.h_container {
  padding: 16px;
}

.form-check-input {
  margin-left: 0;
}


.form-col {
    font-size: smaller;
}

.fa-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

table.blueTable {
  border: 3px solid #000000;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
  border: 1px solid #000000;
  padding: 5px 4px;
}
table.blueTable tbody td {
  font-size: 13px;
}
table.blueTable thead {
  background: #CFCFCF;
  background: -moz-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
  background: -webkit-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
  background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
  border-bottom: 3px solid #000000;
}
table.blueTable thead th {
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  text-align: left;
}

table.blueTable tbody tr:hover {background-color: #eaeaea;}

table.blueTable tfoot {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  border-top: 3px solid #000000;
}
table.blueTable tfoot td {
  font-size: 14px;
}

.breadcrumb {
  font-size: 0.75rem;
  margin: 0.15rem;
  padding-left: 1rem;
}

.container {position: relative; margin: 0; width:20%; background: #f4f5f4; min-height: 600px; }

.white-box { width: 100%; height: 20%; margin-top: 50px; margin-right: auto;

background: rgba(255,255,255,0.9);
padding: 30px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

.featured:before {
content: '+';
font-weight: 400;
display: inline-block;
margin-right: 5px;
color: #4CB1FF;
}

.field {
border-color: #007bff;
}

.vertical-text {width:50px; height:50px; margin: 30px 0 auto auto; background: #4CB1FF;}
.vertical-text span {
width: 50px;
display: inline-block;
text-align: center;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.add_button
{
    height: 40px;
    width: 40px;
    margin-left: 40px;
}
.width_cm
{
    width: 50px;
}

.loading
{

    width: auto;
    height: auto;
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin
{
        from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.space
{
margin-left: 0.5%;
}
.space2
{
margin-left: -2.0%;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 5px !important;
}



.max_width
{
    width: 100%;
}

.readonly
{
    background: #8080802b;
}

.eingabe
{
    width: 80%;
}

[data-tip] {
	position:relative;
	/*multiline: true;*/

}
[data-tip]:before {
	content:'';
	/* hides the tooltip when not hovered */
	display:none;
	content:'';
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #1a1a1a;
	position:absolute;
	top:30px;
	left:35px;
	z-index:8;
	font-size:0;
	line-height:0;
	width:0;
	height:0;
}
[data-tip]:after {
	display:none;
	content:attr(data-tip);
	position:absolute;
	top:0px;
	left:200px;
	padding:5px 8px;
	background:#fff;
	color:rgb(238,127,0);
	z-index:9;
	font-size: 0.75em;
	height:30px;
	line-height:18px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	white-space:nowrap;
	word-wrap:normal;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
	display:block;
}
/*----------------------------*/

summary {
  list-style: none;
}
.alert-success {
    /* width: fit-content; */
    height: fit-content;
}
.tabelle{
margin-bottom: 1rem;
color: #212529;
width: 25%;
}
.container_custom {
  display: grid;
  grid-template-columns: 20% 20%;
  gap: 0px 5%;
  grid-auto-flow: row;
  grid-template-areas:
    "Bestand Auftrag";
  min-width: 100%;
  min-height: 1080px;
  padding-left: 0px !important;

}

.Header_custom
{
background-color: rgba(238,127,0);
/*align-items: center;*/
}

.header_content
{
font-size: 35px;
font-weight: bold;
color: white;
padding-left: 2%;
width: auto;
}

h1 {
    font-size: 28px;
    text-transform: uppercase;
}

.sideHeader{
    font-weight: bold;
    color: black;
    font-size: 20px;
}
@media (max-width: 768px) {
    .sideHeader{
        font-size: 16px;
    }
    h1 {
        font-size: 22px;
    }
}


.Bestand { grid-area: Bestand;}


.Auftrag { grid-area: Auftrag;}

.Bestand_content{margin-left: 10%;}

.image {
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container_img:hover .image {
  opacity: 0.1;
}

.container_img:hover .middle {
  opacity: 1;
}

.text {
  background-color: #04AA6D;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
.header_detail
{
font-size: 15px;
font-weight: bold;
color: white;
width: auto;
}
.white_color{
color: white;}



.back {
  background: #e2e2e2;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}

.div-center {
  width: 400px;
  height: 400px;
  background-color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 1em 2em;
  border-bottom: 2px solid #ccc;
  display: table;
}

div.content {
  display: table-cell;
  vertical-align: middle;
}
.header_container {
display: grid;
  grid-template-columns: 0% 20% 60% 20%;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "logo left-box middle-box right-box";
  width: 100%;
  height: 100%;
  align-items: center;
  align-content: center;
}
.logo { grid-area: logo; }
.left-box { grid-area: left-box;}
.middle-box { grid-area: middle-box; }
.right-box { grid-area: right-box; }

.skeleton{
    animation: skeleton-loading 1s linear infinite alternate;
}
.skeleton-text {
    width: 100%;
    height: .5rem;
    margin-bottom: .25rem;
    border-radius: .125rem;
}
.skeleton-text:last-child {
    margin-bottom: 0;
    width:80%;
}

@keyframes skeleton-loading
{
    0%
    {
        background-color: hsl(200, 20%, 70%);
    }
    100%
    {
        background-color: hsl(200, 20%, 95%);
    }
}
.flex-box-item
{
min-width: 250px;
width: 15%;
}

.img_quadrat
{
min-height: 250px;
max-height: 15%;
}

.flex-box-item_N_Prod
{
min-width: 250px;
width: 50%;
padding: 1em;
}
.flex-box-container
{
margin-left: 2%;
margin-right: 10%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.select_container_custom
{
background: rgb(238,127,0);
color: white;
outline: none;
border: none;
}
.text_color_header
{
color: rgb(238,127,0);
}
.flex-box-item_N_Prod
{
min-width: 250px;
width: 50%;
padding: 0.2em;
}

.label_N_Prod
{
min-width: 250px;
width: 20%;
}

.input_N_Prod
{
min-width: 250px;
width: 20%;
}
.jsdragtable-contents {
    background: #fff;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    box-shadow: 2px 2px 5px #aaa;
    padding: 0;
}

.jsdragtable-contents table {
    margin-bottom: 0;
}
.margin_items{
    min-width:8%;
}
.hover_cursor
{
    cursor: move;
}
 /* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  /*min-width: 250px;*/ /* Set a default minimum width */
  background-color: #0070B8; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */

  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  left: 35%;
  right: 35%;
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation: fadein 0.5s;
  animation-fill-mode: forwards;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
.loader {
  border: 6px solid white;
  border-radius: 50%;
  border-top: 6px solid #0070B8;
  width: 40px;
  height: 40px;
  -webkit-animation: spin .7s linear infinite; /* Safari */
  animation: spin .7s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Erweiterungen Patrick Michels */
    body {
        box-sizing: border-box;
        background: #FFFFFFCC;
        font-family: "Roboto", Sans-serif;
    }
/* Header */
    header {
        padding: 30px 0;
        background-position: top;
        background-size: cover;
    }

    nav.navbar {
        background-color: #FFFFFFCC;
    }

    .navbar-brand {
        margin-top: -25px;
        margin-bottom: -25px;
        margin-left: -20px;
    }

    .sitelogo {
        height: 75px;
        width: auto;
    }

    .navbar-collapse {
        font-family: "Roboto", Sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        font-style: normal;
        text-decoration: none;
    }

    a.nav-link:hover {
        color: #0070B8 !important;
    }


    @media (max-width: 991px) {
        .navbar-collapse {
            margin-top: 30px;
            margin-left: 15px;
        }
    }

    @media (min-width: 992px) {
        .navbar-collapse .nav-item {
            margin-right: 30px;
        }
    }

    @media (min-width: 768px) {
        header {
            padding: 50px 0 65px;
        }

        .navbar-brand {
            margin-top: -25px;
            margin-bottom: -25px;
            margin-left: -20px;
        }

        .sitelogo {
            height: 100px;
        }
    }



/* Footer  */
    footer {
        margin-top: 100px;
        padding: 40px 10px;
        background-color: #133D58;
    }

    footer .social-icons a {
        margin-right: 20px;
    }

    footer .copyright {
        font-size: 15px;
        color: #FFFFFF75;
    }

    footer .links a {
        font-size: 15px;
        color: white;
        text-decoration: none;
        text-transform: uppercase;
    }

/* form field styling */
    input[type=text],
    input[type=number],
    input[type=email],
    input[type=date],
    input[type=password],
    select,
    textarea {
        background-color: #F0F6FB;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        margin: 0;
        padding: 12px 0 12px 12px;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
    }
    input[type=date] {
        padding: 12px;
    }


    /* disable number spin */
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }

/* button styling */
    .btn-primary,
    .btn-success {
        border: 0;
        outline: 0;
        padding: 12px 30px;
        transform: skewX(-15deg);
    }
    .btn-primary,
    .btn-primary:active,
    .btn-primary:focus {
        background-color: #006FB9;
    }
    .btn-primary:hover {
        background-color: #3aa0ef;
    }
    .btn-success,
    .btn-success:active,
    .btn-success:focus {
        background-color: #EE7F00;
    }
    .btn-success:hover {
        background-color: #fc9023;
    }



/* general stuff */
    .s1x-flexgap {
        gap: 20px;
    }

    .s1x-flexgap-40 {
        gap: 40px;
    }

    .s1x-mainmaxwidth {
        margin: auto;
        max-width: 1400px;
    }

    .s1x-tableparent {
        margin-top: 30px;
    }
    .s1x-table {
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
    }
    .s1x-table:nth-of-type(odd) {
        background-color: #d9e2e8 !important;
    }
    .s1x-table:nth-of-type(even) {
        background-color: #d3d4d7 !important;
    }

    @media (max-width: 768px) {
        .s1x-table {
            margin-bottom: 20px;
        }
    }


  /* changes */

  .s1x-tableparent .delete-line {
    font-weight: 500;
    margin-left: auto;
    width: fit-content;
    margin-bottom: -10px;
    line-height: 100%;
    color: rgb(201, 27, 27);
    cursor: pointer;
  }