@charset "UTF-8";
/* here you can put your own css to customize and override the theme */
.ui-notification {
  margin-top: 40px;
}

.killed {
  display: none;
}

.ui-notification.error {
  background: #e26a6a;
  margin-top: 49px;
}

.ui-notification.success {
  background: #45b6af;
  margin-top: 49px;
}

.col1 {
  width: 1%;
  -ms-flex-preferred-size: 1% !important;
  flex-basis: 1% !important;
}

.col1.sticky-left ~ .sticky-left {
  left: 1%;
}

.col2 {
  width: 2%;
  -ms-flex-preferred-size: 2% !important;
  flex-basis: 2% !important;
}

.col2.sticky-left ~ .sticky-left {
  left: 2%;
}

.col3 {
  width: 3%;
  -ms-flex-preferred-size: 3% !important;
  flex-basis: 3% !important;
}

.col3.sticky-left ~ .sticky-left {
  left: 3%;
}

.col4 {
  width: 4%;
  -ms-flex-preferred-size: 4% !important;
  flex-basis: 4% !important;
}

.col4.sticky-left ~ .sticky-left {
  left: 4%;
}

.col5 {
  width: 5%;
  -ms-flex-preferred-size: 5% !important;
  flex-basis: 5% !important;
}

.col5.sticky-left ~ .sticky-left {
  left: 5%;
}

.col6 {
  width: 6%;
  -ms-flex-preferred-size: 6% !important;
  flex-basis: 6% !important;
}

.col6.sticky-left ~ .sticky-left {
  left: 6%;
}

.col7 {
  width: 7%;
  -ms-flex-preferred-size: 7% !important;
  flex-basis: 7% !important;
}

.col7.sticky-left ~ .sticky-left {
  left: 7%;
}

.col8 {
  width: 8%;
  -ms-flex-preferred-size: 8% !important;
  flex-basis: 8% !important;
}

.col8.sticky-left ~ .sticky-left {
  left: 8%;
}

.col9 {
  width: 9%;
  -ms-flex-preferred-size: 9% !important;
  flex-basis: 9% !important;
}

.col9.sticky-left ~ .sticky-left {
  left: 9%;
}

.col10 {
  width: 10%;
  -ms-flex-preferred-size: 10% !important;
  flex-basis: 10% !important;
}

.col10.sticky-left ~ .sticky-left {
  left: 10%;
}

.col11 {
  width: 11%;
  -ms-flex-preferred-size: 11% !important;
  flex-basis: 11% !important;
}

.col11.sticky-left ~ .sticky-left {
  left: 11%;
}

.col12 {
  width: 12%;
  -ms-flex-preferred-size: 12% !important;
  flex-basis: 12% !important;
}

.col12.sticky-left ~ .sticky-left {
  left: 12%;
}

.col13 {
  width: 13%;
  -ms-flex-preferred-size: 13% !important;
  flex-basis: 13% !important;
}

.col13.sticky-left ~ .sticky-left {
  left: 13%;
}

.col14 {
  width: 14%;
  -ms-flex-preferred-size: 14% !important;
  flex-basis: 14% !important;
}

.col14.sticky-left ~ .sticky-left {
  left: 14%;
}

.col15 {
  width: 15%;
  -ms-flex-preferred-size: 15% !important;
  flex-basis: 15% !important;
}

.col15.sticky-left ~ .sticky-left {
  left: 15%;
}

.col16 {
  width: 16%;
  -ms-flex-preferred-size: 16% !important;
  flex-basis: 16% !important;
}

.col16.sticky-left ~ .sticky-left {
  left: 16%;
}

.col17 {
  width: 17%;
  -ms-flex-preferred-size: 17% !important;
  flex-basis: 17% !important;
}

.col17.sticky-left ~ .sticky-left {
  left: 17%;
}

.col18 {
  width: 18%;
  -ms-flex-preferred-size: 18% !important;
  flex-basis: 18% !important;
}

.col18.sticky-left ~ .sticky-left {
  left: 18%;
}

.col19 {
  width: 19%;
  -ms-flex-preferred-size: 19% !important;
  flex-basis: 19% !important;
}

.col19.sticky-left ~ .sticky-left {
  left: 19%;
}

.col20 {
  width: 20%;
  -ms-flex-preferred-size: 20% !important;
  flex-basis: 20% !important;
}

.col20.sticky-left ~ .sticky-left {
  left: 20%;
}

.col21 {
  width: 21%;
  -ms-flex-preferred-size: 21% !important;
  flex-basis: 21% !important;
}

.col21.sticky-left ~ .sticky-left {
  left: 21%;
}

.col22 {
  width: 22%;
  -ms-flex-preferred-size: 22% !important;
  flex-basis: 22% !important;
}

.col22.sticky-left ~ .sticky-left {
  left: 22%;
}

.col23 {
  width: 23%;
  -ms-flex-preferred-size: 23% !important;
  flex-basis: 23% !important;
}

.col23.sticky-left ~ .sticky-left {
  left: 23%;
}

.col24 {
  width: 24%;
  -ms-flex-preferred-size: 24% !important;
  flex-basis: 24% !important;
}

.col24.sticky-left ~ .sticky-left {
  left: 24%;
}

.col25 {
  width: 25%;
  -ms-flex-preferred-size: 25% !important;
  flex-basis: 25% !important;
}

.col25.sticky-left ~ .sticky-left {
  left: 25%;
}

.col26 {
  width: 26%;
  -ms-flex-preferred-size: 26% !important;
  flex-basis: 26% !important;
}

.col26.sticky-left ~ .sticky-left {
  left: 26%;
}

.col27 {
  width: 27%;
  -ms-flex-preferred-size: 27% !important;
  flex-basis: 27% !important;
}

.col27.sticky-left ~ .sticky-left {
  left: 27%;
}

.col28 {
  width: 28%;
  -ms-flex-preferred-size: 28% !important;
  flex-basis: 28% !important;
}

.col28.sticky-left ~ .sticky-left {
  left: 28%;
}

.col29 {
  width: 29%;
  -ms-flex-preferred-size: 29% !important;
  flex-basis: 29% !important;
}

.col29.sticky-left ~ .sticky-left {
  left: 29%;
}

.col30 {
  width: 30%;
  -ms-flex-preferred-size: 30% !important;
  flex-basis: 30% !important;
}

.col30.sticky-left ~ .sticky-left {
  left: 30%;
}

.col31 {
  width: 31%;
  -ms-flex-preferred-size: 31% !important;
  flex-basis: 31% !important;
}

.col31.sticky-left ~ .sticky-left {
  left: 31%;
}

.col32 {
  width: 32%;
  -ms-flex-preferred-size: 32% !important;
  flex-basis: 32% !important;
}

.col32.sticky-left ~ .sticky-left {
  left: 32%;
}

.col33 {
  width: 33%;
  -ms-flex-preferred-size: 33% !important;
  flex-basis: 33% !important;
}

.col33.sticky-left ~ .sticky-left {
  left: 33%;
}

.col34 {
  width: 34%;
  -ms-flex-preferred-size: 34% !important;
  flex-basis: 34% !important;
}

.col34.sticky-left ~ .sticky-left {
  left: 34%;
}

.col35 {
  width: 35%;
  -ms-flex-preferred-size: 35% !important;
  flex-basis: 35% !important;
}

.col35.sticky-left ~ .sticky-left {
  left: 35%;
}

.col36 {
  width: 36%;
  -ms-flex-preferred-size: 36% !important;
  flex-basis: 36% !important;
}

.col36.sticky-left ~ .sticky-left {
  left: 36%;
}

.col37 {
  width: 37%;
  -ms-flex-preferred-size: 37% !important;
  flex-basis: 37% !important;
}

.col37.sticky-left ~ .sticky-left {
  left: 37%;
}

.col38 {
  width: 38%;
  -ms-flex-preferred-size: 38% !important;
  flex-basis: 38% !important;
}

.col38.sticky-left ~ .sticky-left {
  left: 38%;
}

.col39 {
  width: 39%;
  -ms-flex-preferred-size: 39% !important;
  flex-basis: 39% !important;
}

.col39.sticky-left ~ .sticky-left {
  left: 39%;
}

.col40 {
  width: 40%;
  -ms-flex-preferred-size: 40% !important;
  flex-basis: 40% !important;
}

.col40.sticky-left ~ .sticky-left {
  left: 40%;
}

.col41 {
  width: 41%;
  -ms-flex-preferred-size: 41% !important;
  flex-basis: 41% !important;
}

.col41.sticky-left ~ .sticky-left {
  left: 41%;
}

.col42 {
  width: 42%;
  -ms-flex-preferred-size: 42% !important;
  flex-basis: 42% !important;
}

.col42.sticky-left ~ .sticky-left {
  left: 42%;
}

.col43 {
  width: 43%;
  -ms-flex-preferred-size: 43% !important;
  flex-basis: 43% !important;
}

.col43.sticky-left ~ .sticky-left {
  left: 43%;
}

.col44 {
  width: 44%;
  -ms-flex-preferred-size: 44% !important;
  flex-basis: 44% !important;
}

.col44.sticky-left ~ .sticky-left {
  left: 44%;
}

.col45 {
  width: 45%;
  -ms-flex-preferred-size: 45% !important;
  flex-basis: 45% !important;
}

.col45.sticky-left ~ .sticky-left {
  left: 45%;
}

.col46 {
  width: 46%;
  -ms-flex-preferred-size: 46% !important;
  flex-basis: 46% !important;
}

.col46.sticky-left ~ .sticky-left {
  left: 46%;
}

.col47 {
  width: 47%;
  -ms-flex-preferred-size: 47% !important;
  flex-basis: 47% !important;
}

.col47.sticky-left ~ .sticky-left {
  left: 47%;
}

.col48 {
  width: 48%;
  -ms-flex-preferred-size: 48% !important;
  flex-basis: 48% !important;
}

.col48.sticky-left ~ .sticky-left {
  left: 48%;
}

.col49 {
  width: 49%;
  -ms-flex-preferred-size: 49% !important;
  flex-basis: 49% !important;
}

.col49.sticky-left ~ .sticky-left {
  left: 49%;
}

.col50 {
  width: 50%;
  -ms-flex-preferred-size: 50% !important;
  flex-basis: 50% !important;
}

.col50.sticky-left ~ .sticky-left {
  left: 50%;
}

.col51 {
  width: 51%;
  -ms-flex-preferred-size: 51% !important;
  flex-basis: 51% !important;
}

.col51.sticky-left ~ .sticky-left {
  left: 51%;
}

.col52 {
  width: 52%;
  -ms-flex-preferred-size: 52% !important;
  flex-basis: 52% !important;
}

.col52.sticky-left ~ .sticky-left {
  left: 52%;
}

.col53 {
  width: 53%;
  -ms-flex-preferred-size: 53% !important;
  flex-basis: 53% !important;
}

.col53.sticky-left ~ .sticky-left {
  left: 53%;
}

.col54 {
  width: 54%;
  -ms-flex-preferred-size: 54% !important;
  flex-basis: 54% !important;
}

.col54.sticky-left ~ .sticky-left {
  left: 54%;
}

.col55 {
  width: 55%;
  -ms-flex-preferred-size: 55% !important;
  flex-basis: 55% !important;
}

.col55.sticky-left ~ .sticky-left {
  left: 55%;
}

.col56 {
  width: 56%;
  -ms-flex-preferred-size: 56% !important;
  flex-basis: 56% !important;
}

.col56.sticky-left ~ .sticky-left {
  left: 56%;
}

.col57 {
  width: 57%;
  -ms-flex-preferred-size: 57% !important;
  flex-basis: 57% !important;
}

.col57.sticky-left ~ .sticky-left {
  left: 57%;
}

.col58 {
  width: 58%;
  -ms-flex-preferred-size: 58% !important;
  flex-basis: 58% !important;
}

.col58.sticky-left ~ .sticky-left {
  left: 58%;
}

.col59 {
  width: 59%;
  -ms-flex-preferred-size: 59% !important;
  flex-basis: 59% !important;
}

.col59.sticky-left ~ .sticky-left {
  left: 59%;
}

.col60 {
  width: 60%;
  -ms-flex-preferred-size: 60% !important;
  flex-basis: 60% !important;
}

.col60.sticky-left ~ .sticky-left {
  left: 60%;
}

@media (min-width: 768px) {
  .page-bar {
    position: fixed !important;
    z-index: 100;
    width: 100%;
    top: 75px;
  }
  .page-sidebar-fixed, .navbar-collapse.collapse {
    position: fixed;
    overflow: auto !important;
    overflow-y: hidden !important;
    z-index: 16;
  }
}
@media (min-width: 992px) {
  .page-content-wrapper .page-content {
    margin-left: 235px;
    margin-top: 0;
    min-height: 600px;
    padding: 44px 20px 10px;
  }
  .page-sidebar .page-sidebar-menu {
    width: 235px !important;
  }
  .page-sidebar-wrapper.sticky .page-sidebar {
    position: fixed;
    top: 41px;
  }
}
@media (max-width: 991px) {
  .page-sidebar-wrapper.sticky ~ .jumping-prevent-div {
    display: none;
  }
}
.page-sidebar-wrapper {
  position: relative;
}

.page-sidebar.navbar-collapse.collapse {
  z-index: 16;
}

.breakLine {
  white-space: normal;
}

.input-xs {
  height: 22px;
  padding: 2px 5px;
  font-size: 12px;
  line-height: 1.5;
  /* If Placeholder of the input is moved up, rem/modify this. */
  border-radius: 3px;
}

select.input-xs {
  height: 22px;
  padding: 1px 10px;
}

select.input-sm {
  /* Metronic (in components-rounded.css) set height of select (and line-height too) to 28px. I don't think that this is a good idea :) */
  /* Test this */
  line-height: 14px;
}

.input-group-xs > .form-control,
.input-group-xs > .input-group-addon,
.input-group-xs > .input-group-btn > .btn {
  font-size: 12px;
  line-height: 1.5;
  padding: 3px;
  height: 25px;
}

.input-group.input-group-xs .input-group-addon {
  min-width: 0;
}

.btn-add-file input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

table {
  width: 100%;
  border-collapse: collapse;
  /* table-layout: fixed; */
}

.table-scroll-thead {
  position: relative;
}

.table-fixed-layout {
  table-layout: fixed;
}

.colDate {
  width: 85px;
  min-width: 85px;
  max-width: 85px;
}

.users-orders-table {
  table-layout: fixed;
  width: 100%;
  /* min-width: 1200px; */
  min-width: 1140px;
}

.table-sticky-column .sticky-left {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
}

.table.table-smaller-font td {
  text-overflow: ellipsis;
  font-size: 12px;
}

.table.table-smaller-font td button {
  font-size: 12px;
}

.table-smaller-font td small,
.table-smaller-font td .small,
.table-smaller-font td.small {
  font-size: 11px !important;
}

.table-smaller-font td small .ng-svg-icon svg,
.table-smaller-font td small.ng-svg-icon svg,
.table-smaller-font td .small .ng-svg-icon svg,
.table-smaller-font td.small .ng-svg-icon svg {
  width: 11px;
}

.fixedPositionSave {
  position: fixed;
  top: 54px;
  right: 20px;
  z-index: 9999;
}

.table-scroll-thead {
  position: relative;
}

@media only screen {
  .tools.sticky {
    position: fixed !important;
    width: auto;
    z-index: 16;
    right: 11px;
    top: 46px;
    z-index: 100;
  }
  .sticky:not(.navbar-collapse):not(.page-sidebar-menu) {
    position: fixed !important;
    width: auto;
    z-index: 100;
  }
  .table-scroll-thead .heading.sticky {
    position: absolute !important;
    /*position: sticky !important;*/
    background-color: #ffffff;
    z-index: 100;
    /* make th the same width (with flexbox): */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    ms-grid-row-align: stretch;
    align-items: stretch;
    will-change: top;
  }
  .table-scroll-thead .heading.sticky th {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    border-right: 1px solid #dddddd;
    max-height: 70px;
    overflow: hidden;
    /*transition: all 1s linear;*/
    /*jest tu animacja na "border-right-width", "border-right-color" oraz "flex-grow"*/
  }
  .table-scroll-thead .heading.sticky th:last-of-type {
    border-right: none;
  }
  /* fix for .col-prices class (text-align: right;) */
  .table-scroll-thead .heading.sticky th.col-prices {
    justify-content: flex-end;
  }
}
/* edytor tekstow na stronie*/
.danger-info-bar {
  top: 56px;
  background-color: #ffffff;
  color: red;
  padding: 10px;
  border: 1px solid;
  display: flex;
  justify-content: space-between;
}

custom-data-edit-component details {
  padding-left: 2rem;
  position: relative;
}

custom-data-edit-component details summary {
  cursor: pointer;
  display: list-item;
}

custom-data-edit-component form label {
  font-weight: bold !important;
}

custom-data-edit-component form textarea {
  width: 100%;
}

custom-data-edit-component form label + div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

custom-data-edit-component form label + div.current-text > * {
  align-self: flex-end;
  margin-bottom: 0;
}

custom-data-edit-component form label::after {
  content: " :";
  right: 0;
}

custom-data-edit-component details > span,
custom-data-edit-component details > div {
  margin: 1rem 0;
}

custom-data-edit-component details form button.btn.btn-success {
  align-self: flex-end;
  margin-top: 1rem;
  margin-left: 1rem;
}

custom-data-edit-component details details::before {
  position: absolute;
  content: "";
  border-left: 1px solid #999999;
  bottom: 80px;
  height: 100%;
  top: 0;
  width: 1px;
  left: 0.4rem;
}

custom-data-edit-component details details:after {
  content: "";
  border-top: 1px solid #999999;
  position: absolute;
  top: 8px;
  width: 12px;
  left: 5px;
}

custom-data-edit-component details details:last-child::before {
  height: 9px;
}

.btn-file {
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  border: 2px dashed #999999;
}

.btn-file > input {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 23px;
  cursor: pointer;
  filter: alpha(opacity=0);
  opacity: 0;
  direction: ltr;
}

/* BEGIN: Tree (and tree-collapsed) */
/* Thin lines on the left and a small gap to show the structure of the parent -> childs elements. */
.tree {
  margin-bottom: 20px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.tree li {
  list-style-type: none;
  margin: 0;
  padding: 25px 10px 0 24px;
  position: relative;
}

.tree li::before,
.tree li::after {
  content: "";
  left: -20px;
  position: absolute;
  right: auto;
}

.tree li::before {
  border-left: 1px solid #999999;
  bottom: 80px;
  height: 100%;
  top: 8px;
  width: 1px;
}

.tree li::after {
  border-top: 1px solid #999999;
  height: 23px;
  top: 38px;
  width: 36px;
}

.tree li span {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #999999;
  border-radius: 5px;
  display: inline-block;
  padding: 3px 8px;
  text-decoration: none;
}

.tree li.parent_li > span {
  cursor: pointer;
}

.tree > ul > li::before,
.tree > ul > li::after {
  border: 0;
}

.tree li:last-child::before {
  height: 30px;
}

.tree li.parent_li > span:hover,
.tree li.parent_li > span:hover + ul li span {
  background: #eee;
  border: 1px solid #94a0b4;
  color: #000000;
}

div.tree > ul > ul > li:first-child:before {
  border: 0px;
}

div.tree > ul > ul > li:after {
  border: 0px;
}

.tree > ul > ul > li:before {
  border-left: 0px !important;
}

.tree > ul,
.tree > ul > ul,
.tree > ul > ul > li {
  padding-left: 0;
}

.tree-collapsed {
  left: 45px;
  width: calc(100% - 45px);
  position: relative;
}

.tree-collapsed.tree-light {
  left: 15px;
  width: calc(100% - 15px);
}

.tree-collapsed .tree-div {
  position: relative;
}

.tree-collapsed .tree-div:before {
  content: "";
  position: absolute;
  display: block;
  bottom: 80px;
  left: -30px;
  top: 0;
  width: 1px;
  height: calc(100% + 10px);
  border-left: 1px solid #999999;
}

.tree-collapsed .tree-light:before {
  left: -15px;
}

.tree-collapsed .tree-div:after {
  content: "";
  position: absolute;
  left: -30px;
  right: auto;
  top: 50%;
  width: 15px;
  border-top: 1px solid #999999;
  /* nadpisanie Metronicowych klass od flip-scroll table: */
  visibility: visible;
}

.tree-collapsed .tree-light:after {
  left: -15px;
  width: 10px;
}

.tree-collapsed .tree-div.last:before {
  height: 50%;
}

.bg-blue-soft .tree-collapsed .tree-div.tree-light::before,
.bg-blue-soft .tree-collapsed .tree-div.tree-light::after,
.bg-green-dark .tree-collapsed .tree-div.tree-light::before,
.bg-green-dark .tree-collapsed .tree-div.tree-light::after {
  border-color: #ffffff;
}

/* END: Tree (and tree-collapsed) */
.tile-dropdown ul.dropdown-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 10px;
  max-height: 50vh;
  max-width: 90vw;
  overflow-y: scroll;
  margin-top: 0;
}

.tile-dropdown ul.dropdown-menu .uib-typeahead-match {
  padding: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 50%;
  margin-bottom: 10px;
}

.tile-dropdown ul.dropdown-menu .uib-typeahead-match a {
  display: block;
  max-width: 100%;
  white-space: normal;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tile-dropdown ul.dropdown-menu .uib-typeahead-match a:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.findUserTpl-tooltip .tooltip-inner {
  max-width: none;
}

.container-scrollbox_h_new {
  transform: scale(1);
}

.scrollbox_h_new {
  position: relative;
  background-repeat: no-repeat;
  background-image: -webkit-radial-gradient(100% 50%, farthest-side, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)), -webkit-radial-gradient(0% 50%, farthest-side, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
  background-image: radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
  background-position: 100% 50%, 0% 50%;
  background-size: 1rem 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.scrollbox_h_new > *:first-child {
  color: inherit;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, right top, left top, from(rgb(255, 255, 255)), color-stop(30%, rgb(255, 255, 255)), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, left top, right top, from(rgb(255, 255, 255)), color-stop(30%, rgb(255, 255, 255)), to(rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0) 100%), -webkit-linear-gradient(left, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to left, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0) 100%), linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0) 100%);
  background-position: 100% 50%, 0% 50%;
  background-size: 2rem 100%;
}

/* BEGIN: SET EVERY CHILD IN COLUMN (based on grid column)*/
/*
  This method will automatically create a given number of columns (with childs inside)
  Instead of "flex-columns-[...]" this method sets children in columns (from top to bottom, later next column).
  "flex-columns-[...]" sets children in rows (from left to right, then next line).
  1. The height of the container is automatic (based of children).
  2. We only select how many columns we wan't to.
  "columns-clearfix" - give this class to element, with souldn't be moved to new column
*/
.columns-2 {
  -webkit-columns: 2;
  -moz-columns: 2;
  -ms-columns: 4;
  columns: 2;
  column-gap: 25px;
}

.columns-3 {
  -webkit-columns: 3;
  -moz-columns: 3;
  -ms-columns: 4;
  columns: 3;
  column-gap: 25px;
}

.columns-4 {
  -webkit-columns: 4;
  -moz-columns: 4;
  -ms-columns: 4;
  columns: 4;
  column-gap: 25px;
}

.columns-clearfix {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* minified responsive classes (ex. columns-xs-2): */
/* @UPDATE: Czemu dałeś wersję minified, skoro less skompiluje to do nie-minified? :D :D :D :D*/
@media (max-width: 767px) {
  .columns-xs-2 {
    -webkit-columns: 2;
    -moz-columns: 2;
    -ms-columns: 2;
    columns: 2;
    column-gap: 25px;
  }
  .columns-xs-3 {
    -webkit-columns: 3;
    -moz-columns: 3;
    -ms-columns: 3;
    columns: 3;
    column-gap: 25px;
  }
  .columns-xs-4 {
    -webkit-columns: 4;
    -moz-columns: 4;
    -ms-columns: 4;
    columns: 4;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .columns-sm-2 {
    -webkit-columns: 2;
    -moz-columns: 2;
    -ms-columns: 2;
    columns: 2;
    column-gap: 25px;
  }
  .columns-sm-3 {
    -webkit-columns: 3;
    -moz-columns: 3;
    -ms-columns: 3;
    columns: 3;
    column-gap: 25px;
  }
  .columns-sm-4 {
    -webkit-columns: 4;
    -moz-columns: 4;
    -ms-columns: 4;
    columns: 4;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .columns-md-2 {
    -webkit-columns: 2;
    -moz-columns: 2;
    -ms-columns: 2;
    columns: 2;
    column-gap: 25px;
  }
  .columns-md-3 {
    -webkit-columns: 3;
    -moz-columns: 3;
    -ms-columns: 3;
    columns: 3;
    column-gap: 25px;
  }
  .columns-md-4 {
    -webkit-columns: 4;
    -moz-columns: 4;
    -ms-columns: 4;
    columns: 4;
  }
}
@media (min-width: 1200px) {
  .columns-lg-2 {
    -webkit-columns: 2;
    -moz-columns: 2;
    -ms-columns: 2;
    columns: 2;
    column-gap: 25px;
  }
  .columns-lg-3 {
    -webkit-columns: 3;
    -moz-columns: 3;
    -ms-columns: 3;
    columns: 3;
    column-gap: 25px;
  }
  .columns-lg-4 {
    -webkit-columns: 4;
    -moz-columns: 4;
    -ms-columns: 4;
    columns: 4;
    column-gap: 25px;
  }
}
.columns-50px {
  columns: 50px;
  column-gap: 5px;
}

/* END: SET EVERY CHILD IN COLUMN (based on grid column)*/
.first-elem-ellips-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
}

.first-elem-ellips-wrapper.btn-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.first-elem-ellips-wrapper .ellipsis {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-right: 5px;
}

.ellipsis {
  display: inline-block;
  /* width: 100%; */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis100 {
  max-width: 100px;
}

.ellipsis150 {
  max-width: 150px;
}

.ellipsis200 {
  max-width: 200px;
}

.ellipsis250 {
  max-width: 250px;
}

.ellipsis300 {
  max-width: 300px;
}

.ellipsisHoverExpand:not(.text-nowrap):hover,
.ellipsisHoverExpand:not(.text-nowrap):focus {
  white-space: initial;
  text-overflow: unset;
  word-wrap: break-word;
  word-break: break-all;
  /* cursor: nesw-resize; */
}

.ellipsis-two-lines {
  /* Fallback for non-webkit */
  display: block;
  display: -webkit-box;
  /* Fallback for non-webkit */
  margin: 0 auto;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.ellipsis-block {
  display: block;
}

.card {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border-radius: 0.3rem !important;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #ffffff;
  background-clip: border-box;
  margin-bottom: 14.4px;
  margin-bottom: 0.9rem;
  margin-top: 0.9rem;
}

.clickable {
  cursor: pointer;
}

.vertical-center {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.space-between {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.space-around {
  justify-content: space-around;
}

.marginedBtn {
  margin-bottom: 10px;
  margin-right: 8px;
}

/* some of tables are using this to be respnsive */
.overflowContainer {
  overflow: visible !important;
}

div.overflowContainer {
  overflow-x: auto;
}

.nav-tabs.nav-justified > li.active {
  border-top: 2px solid #67809f;
}

.nav-tabs.nav-justified > li.active a {
  color: #67809f;
}

.list-group.clickable {
  margin-top: 6px;
}

.list-group-item {
  background: white;
  border: none;
  cursor: pointer;
}

.list-group-item.active {
  background: #67809f;
  border: #67809f;
}

.list-group-item.active:hover {
  background: #566c88;
  color: white;
  border: none;
}

.bg-transparent {
  background-color: transparent !important;
}

a[role=button].mark {
  color: #0125ff;
  width: 100%;
  display: block;
  line-height: 1;
}

.modal-xl {
  width: 95vw;
  max-width: 95vw;
  margin-left: 2.5vw;
  margin-right: 2.5vw;
}

@media (max-width: 767px) {
  .modal-xl {
    /* make modal not bigger than viewport and scroll his body */
    display: flex;
    flex-wrap: wrap;
    /* margin from top + margin from bottom = 50px */
    height: calc(100vh - 50px);
    min-height: 400px;
    margin-top: 40px !important;
  }
  .modal-xl .modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .modal-xl .modal-body {
    height: 100%;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    /* w "production -> products -> akceptacja plików" na telefonie modal wyglądał okropnie. */
    /* Nie możemy do obsługi specyficznych rzeczy używać takich łańcuchów. Jbc to zmienić gdzieś, gdzie jest źle. */
  }
}
.row-files-list {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
}

.products-tile {
  position: relative;
  border: 1px solid #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  padding: 5px;
}

.products-tile::before {
  content: attr(data-verification-info);
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  white-space: nowrap;
  padding: 0 3px;
  z-index: 2;
  background-color: #fff;
}

.products-tile.waiting {
  border-color: #dfba49;
  box-shadow: 0 2px 5px 0 rgba(223, 186, 73, 0.16), 0 2px 10px 0 rgba(223, 186, 73, 0.12);
}

.products-tile.waiting::before {
  color: #fff;
  background-color: #dfba49;
}

.products-tile.rejected {
  border-color: #e26a6a;
  box-shadow: 0 2px 5px 0 rgba(226, 106, 106, 0.16), 0 2px 10px 0 rgba(226, 106, 106, 0.12);
}

.products-tile.rejected::before {
  color: #fff;
  background-color: #e26a6a;
}

.products-tile.accepted {
  border-color: #45B6AF;
  box-shadow: 0 2px 5px 0 rgba(69, 182, 175, 0.16), 0 2px 10px 0 rgba(69, 182, 175, 0.12);
}

.products-tile.accepted::before {
  color: #fff;
  background-color: #45B6AF;
}

.products-tile.proof.waiting {
  border-color: #d9edf7;
  box-shadow: 0 2px 5px 0 rgba(217, 237, 247, 0.16), 0 2px 10px 0 rgba(217, 237, 247, 0.12);
}

.products-tile.proof.waiting::before {
  background-color: #d9edf7;
  color: #000;
}

/*.products-tile.accepted {
  border-color: #45b7af; // rgb: 69, 183, 175
  box-shadow: 0 2px 5px 0 rgba(69, 183, 175, 0.16),
              0 2px 10px 0 rgba(69, 183, 175, 0.12);
}
.products-tile.accepted::before {
  background-color: #45b7af;
}*/
.products-tile .image {
  position: relative;
  display: block;
  height: 130px; /* czy to jest potrzebne? A jeśli tak to gdzie / kiedy? */
  /* @UPDATE: to jest potrzebne np. w modalu do akceptacji plików - żeby okienko na miniaturkę miało zawsze tą samą wysokość w każdym przypadku */
  /* Chciałem dać coś takiego z max-height, ale to po prostu anuluje mi to co powyżej :) */
  /* max-height: fit-content; */
}

.products-tile .image > img {
  max-width: 100%;
  max-height: 100%;
}

/* po refactoringu modala do akceptacji plików trochę się rozjechały inne miejsca - np. lista plików w podalu z produktami */
/* zachowuję w ten sposób kompatybilność wsteczną */
.products-tile .image > img:not(.img-responsive.center-block) {
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.products-tile .image > .file-size {
  position: absolute;
  right: 0px;
  bottom: 5px;
  padding: 3px;
  background-color: rgba(255, 255, 255, 0.93);
}

/* to jest tekst "Brak dodanych plików" */
product-files-list-component > p {
  margin-bottom: 0;
}

.product-repeat {
  border: 1px solid #44b6ae;
  margin-bottom: 15px;
}

.product-repeat .product-name {
  background-color: #44b6ae;
  margin: 0;
  color: #ffffff;
  padding: 20px 15px;
}

.product-repeat .product-name h3 {
  float: left;
  margin: 0;
}

.product-repeat .product-name .product-repeat-buttons {
  float: right;
  background-color: #ffffff;
}

.product-repeat .product-name .product-repeat-buttons button {
  margin: 3px;
}

.portlet > .portlet-title > .tools > a.btn, .portlet > .portlet-title > .tools > a.btn.reload {
  width: auto;
  height: auto;
}

/*
  Stylowanie Raportu Produktu
*/
.dd-list.collapsing,
.dd-list.collapse.in {
  display: block;
}

/*
  Trochę to skacze jak się robi collapse, ale nie wiem dlaczego.
  Chyba Ci od Bootstrapa coś zmaścili. No albo ja. Ale raczej oni.
*/
.dd-list.collapse:not(.in) {
  height: 0;
}

/* we can generate it via less */
.dd-list.schedule ~ .dd-list.job tr {
  /*border-left: solid rgba(255,255,255,0) 30px;*/
  border-left: 30px solid #ffffff;
}

.dd-list.job {
  position: relative;
}

.dd-list.schedule ~ .dd-list.job:before {
  content: "";
  border-left: 1px solid #999999;
  height: "calc(100% + 10px)";
  display: inline-block;
  position: absolute;
  left: 10px;
}

.dd-list.schedule ~ .dd-list.job:after {
  content: "";
  left: 10px;
  position: absolute;
  right: auto;
  border-top: 1px solid #999999;
  top: 60%;
  width: 15px;
  background-color: #999999;
  height: 1px;
}

.dd-list.schedule ~ .dd-list.job.last:before {
  height: 60%;
}

.dd-item,
.dd-empty,
.dd-placeholder {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #fafafa;
  margin: 5px 0;
}

.dd-item:first-child th:first-child,
.dd-item:first-child td:first-child {
  -webkit-border-top-left-radius: 3px;
  border-top-left-radius: 3px;
}

.dd-item:first-child th:last-child,
.dd-item:first-child td:last-child {
  -webkit-border-top-right-radius: 3px;
  border-top-right-radius: 3px;
}

.dd-item:last-child th:first-child,
.dd-item:last-child td:first-child {
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.dd-item:last-child th:last-child,
.dd-item:last-child td:last-child {
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.dd-item th,
.dd-item td {
  border: 1px solid #cccccc;
}

.dd-item th:not(:first-child),
.dd-item td:not(:first-child) {
  border-left: 0;
}

.dd-table tr th.name,
.dd-table tr td.name {
  width: auto;
  min-width: 200px;
}

/* Fix for IE/Edge: */
@supports (-ms-ime-align: auto) {
  .dd-table tr th.name,
  .dd-table tr td.name {
    width: 100%;
  }
}
.dd-table tr th.date,
.dd-table tr td.date {
  width: 150px;
  max-width: 150px;
  min-width: 150px;
}

/* Target all Firefox browsers to fix width issuse */
@supports (-moz-appearance: none) {
  .dd-table tr th.date,
  .dd-table tr td.date {
    --nameWidth:160px;
    width: var(--nameWidth);
    max-width: var(--nameWidth);
    min-width: var(--nameWidth);
  }
}
.dd-table tr th.hour,
.dd-table tr td.hour {
  width: 100px;
  max-width: 100px;
  min-width: 100px;
}

.dd-table tr th.overtime-hours,
.dd-table tr td.overtime-hours {
  width: 100px;
  max-width: 100px;
  min-width: 100px;
}

.dd-table tr th.additional-info,
.dd-table tr td.additional-info {
  width: 180px;
  max-width: 180px;
  min-width: 180px;
}

.dd-table tr th.collapse-button,
.dd-table tr td.collapse-button {
  float: left;
  margin-right: 5px;
}

.dd-handle {
  padding: 5px 10px;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

/* Microsoft Edge: Fixes for align-items: flex-start; */
@supports (-ms-ime-align: auto) {
  .dd-handle {
    vertical-align: top;
  }
}
/* because we've got vertical-center class (basen od flexbox) on .dd-handle*/
.dd-handle .pull-right {
  color: #777777;
  /* see: "thead tr th" rule in this css file */
  margin-left: auto;
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}

/* this causes the text to be truncated after two lines and adding three dots (only on webkit based browsers */
/* I don't known it is a good idea */
.dd-handle .operation-name {
  max-height: 2.24em;
  line-height: 1.1;
  overflow: hidden;
  padding-right: 6px;
  width: 100%;
}

.dd-handle .operation-name .wrapall {
  display: inline-block;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.dd-handle .report {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

/* BEGIN: Drukowanie raportu */
@media print {
  html {
    background-color: #ffffff !important;
  }
  div.report-wrapper .bg-font-blue-oleo {
    color: #000000 !important;
  }
  div.report-wrapper .btn {
    border: 1px solid #000000;
  }
  div.report-wrapper .text-with-icon {
    white-space: nowrap;
  }
  div.report-wrapper .font-green-sharp {
    color: #000000 !important;
  }
  div.report-wrapper .panel.panel-info {
    border: 1px solid #000000 !important;
  }
  div.report-wrapper .panel-info > .panel-heading {
    border-bottom: 1px solid #000000 !important;
  }
  div.report-wrapper .prod-report-title {
    margin-top: 0 !important;
  }
  div.report-wrapper .panel-info .panel-body {
    /*padding: 0;*/
  }
  div.report-wrapper .panel-info .panel-body > .bordered {
    border: 0 !important;
  }
  div.report-wrapper .visible.portlet.light {
    padding: 12px 20px 15px 20px !important;
  }
  div.report-wrapper .visible.portlet.light.bordered > .portlet-title {
    border-bottom: 0;
    margin-bottom: 0;
  }
  div.report-wrapper .table-legend {
    width: auto;
  }
  div.report-wrapper .table > thead > tr > th,
  div.report-wrapper .table > tbody > tr > th,
  div.report-wrapper .table > tfoot > tr > th,
  div.report-wrapper .table > thead > tr > td,
  div.report-wrapper .table > tbody > tr > td,
  div.report-wrapper .table > tfoot > tr > td {
    padding: 5px !important;
    border: 1px solid #000000 !important;
  }
  div.report-wrapper .table > thead > tr > th:not(:first-child),
  div.report-wrapper .table > tbody > tr > th:not(:first-child),
  div.report-wrapper .table > tfoot > tr > th:not(:first-child),
  div.report-wrapper .table > thead > tr > td:not(:first-child),
  div.report-wrapper .table > tbody > tr > td:not(:first-child),
  div.report-wrapper .table > tfoot > tr > td:not(:first-child) {
    border-left: 0 !important;
  }
  div.report-wrapper .table > thead > tr > th {
    white-space: normal;
  }
  div.report-wrapper {
    visibility: visible;
    height: auto;
    min-height: auto;
    background-color: #ffffff;
  }
  div.report-wrapper .report.container-fluid {
    position: absolute;
    left: 0;
    top: 0;
  }
  div.report-wrapper .badge {
    border: 1px solid #000;
  }
  div.report-wrapper .card {
    display: block;
  }
  div.report-wrapper [uib-tooltip]:not([uib-tooltip=""]),
  div.report-wrapper [uib-tooltip-html-css]:not([uib-tooltip-html-css=""]) {
    position: relative;
  }
  div.report-wrapper [uib-tooltip]:not([uib-tooltip=""]):after,
  div.report-wrapper [uib-tooltip-html-css]:not([uib-tooltip-html-css=""]):after {
    content: "";
    display: block;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px;
    white-space: nowrap;
    font-size: 11px !important;
    font-weight: 300;
    font-family: "Open Sans", sans-serif;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid #000000;
  }
  /* W printapp.css jest ustawiony selektor "a[href]:after" z wlasciwoscia "content" ustawiona na "none" oraz ma dodana flage "!important". Staram sie go tutaj nadpisac */
  div.report-wrapper [uib-tooltip]:not([uib-tooltip=""]):after {
    content: attr(uib-tooltip) !important;
  }
  div.report-wrapper [uib-tooltip-html-css]:not([uib-tooltip-html-css=""]):after {
    content: attr(uib-tooltip-html-css) !important;
  }
  div.report-wrapper [uib-tooltip-html-css]:not([uib-tooltip-html-css=""]):after {
    white-space: pre;
    top: -30px;
  }
  div.report-wrapper [uib-tooltip].badge-production-id:after {
    content: attr(uib-tooltip) !important;
    left: 50px;
    /*transform: translateX(-40%);*/
  }
  /*div.report-wrapper [uib-tooltip].custom-name:after {
    content: attr(uib-tooltip) !important;
    top: -12px;
    left: -10px;
    transform: none;
  }*/
  div.report-wrapper .visible.card > .col-xs-12 {
    padding: 0;
  }
  div.report-wrapper .dd-list.schedule ~ .dd-list.job::before,
  div.report-wrapper .dd-list.schedule ~ .dd-list.job::after {
    border-color: #000000 !important;
    background-color: #000000 !important;
  }
  div.report-wrapper .dd-handle {
    padding: 3px 5px;
  }
  div.report-wrapper .dd-handle .operation-name {
    overflow: visible;
  }
  div.report-wrapper .dd-handle .operation-name .wrapall {
    display: flex;
  }
  div.report-wrapper .dd-item .date {
    width: 140px;
    max-width: 140px;
    min-width: 140px;
  }
  div.report-wrapper .dd-item .hour {
    width: 90px;
    max-width: 90px;
    min-width: 90px;
  }
  div.report-wrapper [uib-tooltip].flips:after,
  div.report-wrapper [uib-tooltip].custom-name:after,
  div.report-wrapper [uib-tooltip].material-name:after,
  div.report-wrapper [uib-tooltip].station-prod-name:after,
  div.report-wrapper [uib-tooltip].ng-svg-icon-planned:after {
    content: none !important;
    border: none !important;
  }
  div.report-wrapper [uib-tooltip].custom-name {
    display: none;
  }
  div.report-wrapper .btn-print,
  div.report-wrapper .btn-history,
  div.report-wrapper .btn-collapse {
    display: none;
  }
  div.report-wrapper.products-tile {
    background-color: #ffffff;
  }
  div.report-wrapper table.dd-table {
    border: none !important;
  }
  div.report-wrapper table.dd-table .dd-item th,
  div.report-wrapper table.dd-table .dd-item td {
    border-width: 1px !important;
  }
  div.report-wrapper table.dd-table .dd-item th:not(:first-child),
  div.report-wrapper table.dd-table .dd-item td:not(:first-child) {
    border-left: 0 !important;
  }
  /* BEGIN: Station report */
  /* Styles for form */
  div.report-wrapper.station-report select[multiple] option:checked {
    border: 1px solid #000000;
  }
  div.report-wrapper.station-report button.selected {
    position: relative;
  }
  div.report-wrapper.station-report button.selected:after {
    content: "✔"; /* heavy check icon in UNICODE */
    position: absolute;
    top: 1px;
    left: 1px;
    line-height: 1;
    font-size: 20px;
  }
  /* Styles for tables and other (sometimes unecessary) elements */
  div.report-wrapper.station-report .table td {
    text-align: left !important;
  }
  /* usuwam dziwne, niechciane border-top'y: */
  div.report-wrapper.station-report .table .card .table,
  div.report-wrapper.station-report .table .card .table td {
    border-top: none !important;
  }
  div.report-wrapper.station-report .table > tbody + tbody {
    border-top-color: #000000;
  }
  /* dodaje tylko tam gdzie bym chciał: */
  div.report-wrapper.station-report .table .card .third-group:not(:first-of-type) > .table > tbody > tr > td {
    border-top: 1px solid #000000 !important;
  }
  div.report-wrapper.station-report .btn-production-stations::after {
    top: unset;
    bottom: -20px;
    left: -60px;
    transform: none;
  }
  div.report-wrapper.station-report .operation-status::after {
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  div.report-wrapper.station-report td > abbr:first-of-type::after {
    left: 30px !important;
    top: 50% !important;
    transform: none !important;
  }
  div.report-wrapper.station-report td > abbr:last-of-type::after {
    content: none !important;
    display: none;
  }
  /* END: Station report */
}
/* END: Drukowanie raportu */
job-production-panel-component {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(281px, 1fr));
  grid-gap: 15px;
  width: 100%;
  overflow: hidden;
  /* Jeśli mamy border zrobiony poniższą techniką, to każdy div na końcu (po prawej stronie) będzie wystawać o 9px.
  Żeby nie było tego widać robimy overflow: hidden; */
}

job-production-panel-component > .card {
  /* na .card jest grid-gap 15px */
  /* robimy czarny box-shadow na 8px, a na niego nakładamy biały box-shadow na 7px (oba po stronie prawej) */
  /* dzięki temu niemal na środku grid-gapa otrzymujemy piękny, czarny border 1px */
  box-shadow: 7px 0 0 #fff, 8px 0 0 #95a4a6;
  border-radius: 0 !important;
}

.btn-default > i[class^=icon-], .btn-default > i[class*=icon-] {
  color: #8c8c8c;
}

.ng-svg-icon svg {
  background-color: transparent;
  fill: currentColor;
  width: 14px;
  height: auto;
  margin-bottom: -3px;
}

.btn-recurency {
  position: relative;
}

.btn-recurency .btn-outside {
  padding-left: 35px;
}

.btn-recurency .btn-inside {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  max-width: 25px;
  margin: 0;
  padding: 0;
}

.checkbox-metro {
  display: inline-block;
  padding: 10px 20px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.checkbox-metro label {
  cursor: pointer;
  padding-left: 0;
}

.checkbox-metro input[type=checkbox] {
  opacity: 0;
  position: absolute;
  margin: 0;
  z-index: -1;
  width: 0;
  height: 0;
  overflow: hidden;
  left: 0;
  pointer-events: none;
}

.checkbox-metro .checkbox-material {
  vertical-align: middle;
  position: relative;
  top: 3px;
}

.checkbox-metro .checkbox-material:before {
  position: absolute;
  left: 8px;
  top: 2px;
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  height: 4px;
  width: 4px;
  border-radius: 100%;
  z-index: 1;
  opacity: 0;
  margin: 0;
}

.checkbox-metro .checkbox-material .check {
  position: relative;
  display: block;
  width: 20px;
  height: 21px;
  border: 2px solid;
  background-color: #dfdfdf;
  border-radius: 2px;
  overflow: hidden;
  z-index: 1;
}

.checkbox-metro .checkbox-material .check:before {
  position: absolute;
  content: "";
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  display: block;
  margin-top: -4px;
  margin-left: 6px;
  width: 0;
  height: 0;
  -webkit-box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset;
  box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset;
  -webkit-animation: checkbox-off 0.3s forwards ease-out;
  animation: checkbox-off 0.3s forwards ease-out;
}

.checkbox-metro input[type=checkbox]:focus + .checkbox-material .check:after {
  opacity: 0.2;
}

.checkbox-metro input[type=checkbox]:focus + .checkbox-material .check {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  box-shadow: 0 0 5px #fb0000 !important;
  outline: 2px solid #fb0000 !important;
}

.checkbox-metro input[type=checkbox]:checked + .checkbox-material .check:before {
  -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
  box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
  -webkit-animation: checkbox-on 0.3s forwards ease-out;
  animation: checkbox-on 0.3s forwards ease-out;
}

.checkbox-metro input[type=checkbox]:not(:checked) + .checkbox-material:before {
  -webkit-animation: rippleOff 700ms forwards ease-out;
  animation: rippleOff 700ms forwards ease-out;
}

.checkbox-metro input[type=checkbox]:checked + .checkbox-material:before {
  -webkit-animation: rippleOn 700ms forwards ease-out;
  animation: rippleOn 700ms forwards ease-out;
}

.checkbox-metro input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
  -webkit-animation: rippleOff 700ms forwards ease-out;
  animation: rippleOff 700ms forwards ease-out;
}

.checkbox-metro input[type=checkbox]:checked + .checkbox-material .check:after {
  -webkit-animation: rippleOn 700ms forwards ease-out;
  animation: rippleOn 700ms forwards ease-out;
}

.checkbox-metro input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
.checkbox-metro input[type=checkbox][disabled] + .circle {
  opacity: 0.5;
}

.checkbox-metro input[type=checkbox][disabled] + .checkbox-material .check:after {
  background-color: rgba(0, 0, 0, 0.84);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}