@font-face {
    font-family: 'Arimo-Regular'; 
    src: url('/vis.0/fonts/Arimo-Regular.ttf'); 
    src: url('/vis.0/fonts/Arimo-Bold.ttf'); 
    src: url('/vis.0/fonts/Arimo-BoldItalic.ttf'); 
    src: url('/vis.0/fonts/Arimo-Italic.ttf'); 
}

@font-face {
    font-family: 'Segoe UI'; 
    src: url('/vis.0/fonts/Segoe UI.ttf'); 
    src: url('/vis.0/fonts/Segoe UI Bold.ttf'); 
    src: url('/vis.0/fonts/Segoe UI Bold Italic.ttf'); 
    src: url('/vis.0/fonts/Segoe UI Italic.ttf'); 
}

@font-face {
    font-family: 'DS-DIGI'; 
    src: url('/vis.0/fonts/DS-DIGI.ttf'); 
    src: url('/vis.0/fonts/DS-DIGIB.ttf'); 
    src: url('/vis.0/fonts/DS-DIGII.ttf'); 
    src: url('/vis.0/fonts/DS-DIGIT.ttf'); 
}

@font-face {
    font-family: 'LibraSans'; 
    src: url('/vis.0/fonts/LibraSans.ttf'); 
    src: url('/vis.0/fonts/LibraSans-Bold.ttf'); 
    src: url('/vis.0/fonts/LibraSans-BoldItalic.ttf'); 
    src: url('/vis.0/fonts/LibraSans-Italic.ttf'); 
}

@font-face {
    font-family: 'CoffeeHouse'; 
    src: url('/vis.0/fonts/CoffeeHouse.ttf');
}

@font-face {
    font-family: 'Chalkboard'; 
    src: url('/vis.0/fonts/chalkboard.ttf');
}

@font-face {
    font-family: 'BadGong'; 
    src: url('/vis.0/fonts/BadGong.ttf');
}

.rotateanimation {
  -webkit-animation: rotation 2s infinite linear;
}
 
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  } to {
     -webkit-transform: rotate(359deg);
  }
}

.blink {
  animation: blinker 2s linear infinite;
}
  
@keyframes blinker {
  40% {
    opacity: 0;
  }
}

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blinkingtext {
  animation: blink 2s step-start 0s infinite;
  -webkit-animation: blink 2s step-start 0s infinite;
}

.mdui-h-flip  { transform: scaleX(-1); }
.mdui-v-flip  { transform: scaleY(-1); }
.mdui-h-flip.mdui-v-flip  { transform: scale(-1); }


/* Hintergrund und Border */
.mdui-h-bargraph,
.mdui-v-bargraph {
  background-position: -1000px !important;
  background-repeat: no-repeat !important;
  box-shadow:0 0 0 1000px rgba(255,255,255,0.1) inset;
  border:none !important;
}

.mdui-h-bargraph>*,
.mdui-v-bargraph>* {
  background-image:inherit !important;
}

.mdui-h-bargraph:after,
.mdui-v-bargraph:after {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-image:inherit !important;
  opacity:0.1;
}

.mdui-h-bargraph.mdui-segment-10 {
    clip-path: polygon(
       0% 100%,  0% 0%,  9% 0%,  9% 100%,
      10% 100%, 10% 0%, 19% 0%, 19% 100%,
      20% 100%, 20% 0%, 29% 0%, 29% 100%,
      30% 100%, 30% 0%, 39% 0%, 39% 100%,
      40% 100%, 40% 0%, 49% 0%, 49% 100%,
      50% 100%, 50% 0%, 59% 0%, 59% 100%,
      60% 100%, 60% 0%, 69% 0%, 69% 100%,
      70% 100%, 70% 0%, 79% 0%, 79% 100%,
      80% 100%, 80% 0%, 89% 0%, 89% 100%,
      90% 100%, 90% 0%, 100% 0%, 100% 100%
    ) ;
}

.mdui-h-bargraph.mdui-triangle  {
    clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 60%);
}
.mdui-h-bargraph.mdui-ramp  {
    clip-path: polygon(0% 80%, 100% 0%, 100% 100%, 0% 100%);
}

.mdui-h-bargraph.mdui-segment-10.mdui-ramp {
    clip-path: polygon(
       9% 100%,  9% 71%,  0% 80%,  0% 100%,
      19% 100%, 19% 63%, 10% 72%, 10% 100%,
      29% 100%, 29% 55%, 20% 64%, 20% 100%,
      39% 100%, 39% 47%, 30% 56%, 30% 100%,
      49% 100%, 49% 39%, 40% 48%, 40% 100%,
      59% 100%, 59% 31%, 50% 40%, 50% 100%,
      69% 100%, 69% 23%, 60% 32%, 60% 100%,
      79% 100%, 79% 15%, 70% 24%, 70% 100%,
      89% 100%, 89%  7%, 80% 16%, 80% 100%,
     100% 100%,100%  0%, 90%  8%, 90% 100%
    );
}
.mdui-h-bargraph.mdui-segment-10.mdui-triangle {
    clip-path: polygon(
       9% 37%,  9% 63%,  0% 60%,  0% 40%,
      19% 33%, 19% 67%, 10% 64%, 10% 36%,
      29% 29%, 29% 71%, 20% 68%, 20% 32%,
      39% 25%, 39% 75%, 30% 72%, 30% 28%,
      49% 21%, 49% 79%, 40% 76%, 40% 24%,
      59% 17%, 59% 83%, 50% 80%, 50% 20%,
      69% 13%, 69% 87%, 60% 84%, 60% 16%,
      79%  9%, 79% 91%, 70% 88%, 70% 12%,
      89%  5%, 89% 95%, 80% 92%, 80% 8%,
      100% 0%, 100% 100%, 90% 96%, 90% 4%
    );
}

.vis-owl-parcel-container{
    background-color: #222222; 
    z-index: 10;
    align-items: center;
    justify-content: center;
    display: flex;
}

.vis-owl-parcel-name{
    color:#292929;
    z-index: 14;
    width: 460px;
    height: 20px;
    top: 5px;
    left: 315px;
}
 
.vis-owl-parcel-status{
    color:#292929;
    z-index: 14;
    width: 660px;
    height: 20px;
    top: 30px;
    left: 110px;
}

.vis-owl-parcel-id-inDelievery{
    color:#195721;
    z-index: 14;
    width: 200px;
    height: 20px;
    top: 5px;
    left: 10px;
}
 
.vis-owl-parcel-name-inDelievery{
    color:#195721;
    z-index: 14;
    width: 460px;
    height: 20px;
    top: 5px;
    left: 315px;
}
 
.vis-owl-parcel-status-inDelievery {
    color: #195721;
    z-index: 14;
    width: 660px;
    height: 20px;
    top: 30px;
    left: 110px;
}

.gray-compact-buchi.vis-owl-parcel-container {
    top: 0px;
    left: 0px;
    width: 355px;
    background-color: transparent;
    overflow: hidden;
}

.gray-compact-buchi.vis-owl-parcel{
    background-color: rgb(166,67,67); 
    z-index: 13;
    width: 95%;
    align-self: center;
}

.gray-compact-buchi.vis-owl-parcel-id{
    left: 90px;
    top: 2px;
    width: 250px;
    height: 35px;
    color: white;
    font-size: 14px;
}

.gray-compact-buchi.vis-owl-parcel-name{
    z-index: 14;
    width: 460px;
    height: 20px;
    top: 19px;
    left: 90px;
    font-size: 13px;
    /*font-style: italic;*/
    font-weight: bold;
    color: white;
}

.gray-compact-buchi.vis-owl-parcel-status{
    z-index: 14;
    width: 355px;
    height: 20px;
    top: 35px;
    left: 5px;
    font-size: 13px;
    color: white;
}


.gray-compact-buchi.vis-owl-parcel-id-inDelivery{
    /*visibility: hidden;*/
    left: 90px;
    top: 2px;
    width: 250px;
    height: 35px;
    font-size: 14px;
    color: black;
}
 
.gray-compact-buchi.vis-owl-parcel-name-inDelivery{
    /*visibility: hidden;*/
    left: 90px;
    top: 19px;
    font-size: 13px;
    /*font-style: italic;*/
    font-weight: bold;
    width: 260px;
    height: 20px;
    color: black;
}
 
.gray-compact-buchi.vis-owl-parcel-status-inDelivery{
    left: 5px;
    top: 35px;
    width: 360px;
    height: 30px;
    font-size: 13px;
    color: black;
}

.gray-compact-buchi.vis-owl-parcel-DeliveryToday{
    background-color: white; 
    z-index: 13;
    width: 95%;
    align-self: center;
}

.gray-compact-buchi.vis-owl-parcel-id-DeliveryToday{
    z-index: 14;
    width: 200px;
    height: 20px;
    top: 1px;
    left: 90px;
    color: black;
    font-size: 14px;
}

.gray-compact-buchi.vis-owl-parcel-name-DeliveryToday{
    /*visibility: hidden;*/
    left: 90px;
    top: 19px;
    font-size: 13px;
    /*font-style: italic;*/
    font-weight: bold;
    width: 260px;
    height: 20px;
    color: black;
}

.gray-compact-buchi.vis-owl-parcel-status-DeliveryToday{
    left: 5px;
    top: 35px;
    width: 360px;
    height: 30px;
    font-size: 13px;
    color: black;
}

::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
  background: rgba(20,69,120,0.65); /*#468bc8;        /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
  background-color: #696363;    /* color of the scroll thumb */
  border-radius: 0px;       /* roundness of the scroll thumb */
  border: transparent; /*3px solid orange;   creates padding around scroll thumb */
}