:root {
   /* --mdc-theme-primary: #344955;
    --mdc-theme-primary-variant: #232F34;
    --mdc-theme-on-primary: #f3f6f7;
    --mdc-theme-secondary: #ffa502;
    --mdc-theme-secondary-variant: #ffa502;
    --mdc-theme-on-secondary: #070a0c;
    --mdc-theme-surface: #4A6572;
    --mdc-theme-on-surface: #f3f6f7;
    --mdc-theme-background:#b3c5cd ;
    --mdc-theme-on-background:#070a0c ;
    --mdc-theme-card: #f3f6f7;
    --mdc-theme-on-card: #070a0c;
    --mdc-theme-work: #025cff;
    --mdc-theme-on-work: #070a0c;
    --mdc-theme-ok: #02ffa5;
    --mdc-theme-on-ok: #070a0c;
    --mdc-theme-info:#ffa502;
    --mdc-theme-on-info: #070a0c;
    --mdc-theme-error: #ff025c;
    --mdc-theme-on-error: #070a0c;
    */
   /* --mdc-theme-primary: #484e51;
    --mdc-theme-primary-variant: #212629;
    --mdc-theme-on-primary: #ffffff;
    --mdc-theme-secondary: #ffa502;
    --mdc-theme-secondary-variant: #ffa502;
    --mdc-theme-on-secondary: #212629;
    --mdc-theme-surface: #737a7d;
    --mdc-theme-on-surface: #ffffff;
    --mdc-theme-background:#f1f2f6;
    --mdc-theme-on-background:#212629;
    --mdc-theme-card: #ffffff;
    --mdc-theme-on-card: #212629;
    --mdc-theme-work: #025cff;
    --mdc-theme-on-work: #212629;
    --mdc-theme-ok: #02ffa5;
    --mdc-theme-on-ok:#212629;
    --mdc-theme-info:#ffa502;
    --mdc-theme-on-info:#212629;
    --mdc-theme-error: #ff025c;
    --mdc-theme-on-error:#212629;
    */
    --mdc-theme-primary: #f1f2f6;
    --mdc-theme-primary-variant:#ffffff;
    --mdc-theme-on-primary: #212629;
    --mdc-theme-secondary: #ffa502;
    --mdc-theme-secondary-variant: #ffa502;
    --mdc-theme-on-secondary: #212629;
    --mdc-theme-surface: #babfbf;
    --mdc-theme-on-surface:#212629;
    --mdc-theme-background: #484e51;
    --mdc-theme-on-background: #f1f2f6;
    --mdc-theme-card: #ffffff;
    --mdc-theme-on-card: #212629;
    --mdc-theme-work: #679dff;
    --mdc-theme-on-work: #212629;
    --mdc-theme-ok: #02ffa5;
    --mdc-theme-on-ok:#212629;
    --mdc-theme-info:#ffa502;
    --mdc-theme-on-info:#212629;
    --mdc-theme-error: #ff025c;
    --mdc-theme-on-error:#212629;
    --mdc-theme-primary-opacity: 1;
    --zing-grid-color: #212629;
    margin: 0px;
 }
 html {
    margin: 0px;
    width: 100%;
 }

 body {
   color: var(--mdc-theme-on-background);
   margin: 0px;
   padding: 0px;
   width: 100%;
}

.pos-rel {
   position: relative;
}
.fab-main svg circle  {
   stroke: var(--mdc-theme-secondary);
}

.fab-main.box.work svg circle  {
   stroke: var(--mdc-theme-work);
}

.fab-tracking {
   position: absolute;
   left:15px;
  top:20px;
  font-size: 14px;
  color: var(--mdc-theme-on-background);
}

.menu-tracking {
   background-color: var(--mdc-theme-work);
   color: var(--mdc-theme-on-work);
}

.mdc-list-item.tracking {
   background-color: var(--mdc-theme-work);
   color: var(--mdc-theme-on-work);
}
.scroll-y {
   overflow-y: scroll;
}

header {
   opacity: 0.8;
}


/* Tags ----------------------------------*/
a {text-decoration: none;}

zing-grid {
   --zing-grid-border: 1px var(--mdc-theme-card);
   --zg-body-card-background: transparent;
   --zg-head-cell-background:var(--mdc-theme-primary);
   --zg-body-background: transparent;
   --zg-watermark-background: transparent;
   --zg-foot-background: transparent;
   --zg-footer-background: transparent;
   --zg-no-data-background: transparent;
   --zg-no-data-border: 0px;
   --zg-pager-background: transparent;
   --zg-status-background: transparent;
   --zg-cell-vertical-align: top;
   --zg-cell-vertical-align_layout_row: middle;
   --zg-caption-background: var(--mdc-theme-background);
   --zg-caption-color: var(--mdc-theme-on-card);
   --zg-search-color: var(--mdc-theme-on-card);
   --zg-icon-color: var(--mdc-theme-secondary);
   --zg-button-color: var(--mdc-theme-on-card);
   --zg-row-body-background_hover: transparent;
   --zg-dialog-footer-margin: 0 0 0;
   --zg-pager-child-margin: 0px;
   --zg-pager-text-margin: 0px;
   --zg-body-border-right: 0px;
   --zg-body-card-display: block;

}

zing-grid.tour { 
   --zg-caption-background: #ffffff; 
   --zg-caption-color: #000000;
   --zg-search-color: #000000;
   --zg-search-color: #000000;
   --zg-button-color: #000000;
   --zg-icon-color: #000000;
}

zing-grid.admin { 
   --zg-caption-background: var(--mdc-theme-surface); 
}

zing-grid.selectlist {
   --zg-select-background: var(--mdc-theme-secondary);
}

zg-body {
   padding: 0px;
}

zg-card {
   padding: 0px;
}



zg-row[layout="card"]  {
   padding-top: 8px;
  padding-bottom: 8px;
border-left: 0px;
border-top: 0px;
border-right: 0px;
   background: var(--mdc-theme-card);
   color: var(--mdc-theme-on-card);
}

zg-checkbox {
   padding-top: 6px;
}



.zing-col-select {  
   --zg-caption-background: #444444;
   --zg-caption-color: #ffffff; 
}

.zing-dashboard {  
      --zg-caption-background: transparent;
      --zg-caption-color: transparent;
      --zg-caption-font-size: 3px;
      --zg-caption-height: 0px;   
}
.zing-back {
   background-color: transparent;
}

.zing-select {
   background-color: var(--mdc-theme-secondary);
}

.zing-edit {
 border-bottom:  1px solid var(--mdc-theme-secondary);
}
.zing-work {
   border-bottom:  1px solid var(--mdc-theme-work);
  }
  .zing-col-hidden {
   display: none;
   visibility: hidden;
  }
/* Id ----------------------------------*/
#logo {
   margin-right: 16px;
   height: "24px";
}

#logoLogin {
   padding-bottom: 15px;
}

#menuFab {
   background: var(--mdc-theme-card);
   color: var(--mdc-theme-on-card);
}




/* Class Display & Container ----------------------------------*/
.view-no {
   display: none;
}

.box {
   display: block;
}

.box500 {
   display: block;
   max-width: 500px;
   margin: auto;
}
.box1200 {
   display: block;

   margin: 16px;
  
}
.box80 {
   display: block;
   width:80%;
   margin: auto;
  
}

.box1200-open {
  margin-top: 8px;
  padding: 0px 16px;
   max-height: 400px;
   overflow-y: scroll;
  background-color: #efefef;
  transition: max-height 1s ease-out;
}

.container {
   overflow: scroll;
 }

 .fixed-x {
    overflow-x:hidden;
 }


 /* Frappe */
 .frappe-red .bar-progress {
   fill: var(--mdc-theme-error) !important;
 }

 .frappe-yellow .bar-progress {
   fill: var(--mdc-theme-info) !important;
 }

 .frappe-blue .bar-progress {
   fill: var(--mdc-theme-work) !important;
 }

 .frappe-blue-light {
   color: #b3ceff;
}

 .back-error {
    background-color: var(--mdc-theme-error);
 }
 .back-info {
   background-color: var(--mdc-theme-info);
}
.back-ok {
   background-color: var(--mdc-theme-ok);
}


.back-surface {
   background-color: var(--mdc-theme-surface);
}
.back-edit {
  background-color: var(--mdc-theme-primary-variant);
}
.back-white {
   background-color: #ffffff;
 }

/* Flexbox */
/* Flexbox */
.flex {
   display: flex; 
   overflow-x: auto;
 }

 .flex-space {
   display: flex; 
   justify-content: space-between;
   overflow-x: auto;
 }
 .flex-center {
   display: flex;
   justify-content: center;
}

.self-end {
   text-align: right;
}
.self-start {
   text-align: left;
}

.align-vert-end {
   align-items: flex-end;
}

.flex-end {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   flex-wrap: wrap;
}
/* Flexbox */


.flex-wrap {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
}
.flex-wrap-left {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
}
.flex-wrap-top {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.flex-top {
   display: flex;
   justify-content: space-between;
}


/* Class Frame & Elements ----------------------------------*/
.frame-out {
   margin: 16px;
}
.frame-out-16-8 {
   margin: 16px 8px;
}
.frame-out-vert {
   margin: 16px 0px;
}
.frame-out-vert-large {
   margin: 32px 0px;
}
.frame-out-top {
   margin-top: 16px;
}
.frame-out-top4 {
   margin-top: 4px;
}

.frame-vert {
   padding: 4px 0px;
}

.frame-vert8 {
   padding: 8px 0px;
}
.frame-in {
   padding: 16px;
}

.frame-in-hor16 {
   padding: 0px 16px;
}

.frame-in4 {
   padding: 4px;
}
.frame-out4 {
   margin: 4px;
}
.frame-in-hor4 {
   padding: 0px 4px;
}
.frame-small-out {
   margin: 8px;
}
.shadow-inset-box {
   box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 1);
}
.cell-right {
   margin:0px 8px 0px 0px;
}
.flexitem {
   flex-basis: auto;
   padding: 16px;
}
.flex-grow {
   flex-grow: 1;
}
.flex-1 {
   margin:0px 8px 0px 0px;
   width: 60px;
   flex-grow: 1;
   word-break: normal;
 }
.flex-2 {
   margin:0px 8px 0px 0px;
   width: 120px;
   flex-grow: 2;
  word-break: normal;

}
.flex-3 {
   margin:0px 8px 0px 0px;
   width: 180px;
   flex-grow: 3;
  word-break: normal;
}

.flex-4 {
   margin:0px 8px 0px 0px;
   width: 240px;
  word-break: normal;
  
}
.flex-5 {
   margin:0px 8px 0px 0px;
   flex-grow: 5;
   width: 300px;
  word-break: normal;
  
}
.flex-6 {
   margin:0px 8px 0px 0px;
   flex-grow: 6;
   width: 360px;
  word-break: normal;
   
}

.table-size-0 {
   display: block; 
   overflow-y: scroll;
}
/* Rahmen --------------------------------------*/
.space-left {
   padding: 0px 16px;
}
.space-top {
   padding: 16px 0px;
}

.record-content {
   padding: 8px 0px;
}

.record-content-small {
   padding: 4px;
   font-size: 75%;
}

.record-content-small2 {
   font-size: 75%;
   background-color: #f9f9f9;
   border-bottom-style: solid;
   border-bottom-width:  thin;
   border-bottom-color: #bbbbbb;
}

.border-top {
   border-top-style: solid;
   border-top-width:  thin;
   border-top-color: #000000;
}

.border-aktiv {
   border-left: 5px solid var(--mdc-theme-secondary);
   padding-left: 4px;
}

.border-inaktiv {
   border-left: 0px;
}

/* Table ----------------------------------------------*/
.table-list {
   table-layout: fixed; 
   width: 100%;
   border-collapse: collapse;
  
}
.table-list  tr:nth-child(even){background-color: #f2f2f2;}

.table-drag {
   table-layout: fixed; 
   width: 100%;
   border-collapse: collapse;
  
}
.table-drag  tr {
   background-color: #ffffff;
   margin: 3px 0px;
   border:5pt solid #b3ceff;
  
}
.table-drag td { border: 1px solid #ddd;}



.drag-back {
   background-color: #b3ceff;
   font-size: 80%;
}

.drag-pos {
   font-size: 24px;
   background-color: var(--mdc-theme-secondary);
   color: #ffffff;
   padding: 12px 0px;
   text-align: center;
   border-radius: 2px;
   width: 50px;
   vertical-align: middle;
  
}

.tour-color {
   border-left: 8px solid #333333;
}

/* chart.js Canvas ------------------------------------*/
.chartTicketPlanung {
   position: relative;
 }
 
 .chartTicketPlanung > canvas {
   position: absolute;
   left: 0;
   top: 0;
   pointer-events: none;
 }
 
 .chartPlanungArea {
   overflow-y: scroll;
 }





/* @Media Responsive ----------------------------------*/
@media only screen and (max-width: 1400px) {
   .box1200 {
     width: 100%;
     margin: 0px;
   }
      .box80 {
        width: 100%;
        margin: 0px;
      }
 }

@media only screen and (max-width: 1200px) {
   zing-grid {
      --zg-cell-vertical-align_layout_row: top;
   }
   .flex-wrap {
      align-items:  flex-start
   }

   .flex-1, .flex-2, .flex-3, .flex-4, .flex-5, .flex-6 {
      align-self: stretch;
   }
}

@media only screen and (max-width: 600px) {


   .flex {
      align-items:  flex-start;
   }
   
   .mobile600 {
      display: none;
   }

   zg-cell {
      padding: 4px;
   }
 }

@media only screen and (max-width: 400px) {
   .flex-5, .flex-6 {
      width: 180px;
    }
   
 }

 .print-head {
   visibility: hidden;
 }

 @media print {
   body * {
   visibility: hidden;
   font-family: 'Libre Barcode 39', cursive;
font-family: 'Roboto', sans-serif;
   }
   #printout, #printout * {
     visibility: visible;
   }
   #printout {
     position: absolute;
     left: 0;
     top: 0;
     
   }

   .print-head {
      visibility: visible;
    }


   .barcode {
      font-family: 'Libre Barcode 39', cursive;
      src: url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&display=swap');
      font-size: 36px;
   }


 }

 .zing-icon-top {
   --zg-cell-vertical-align_layout_row: top;

 }

/* Gestaltung --------------------------------------*/
.pdf {
   
   border-style: none;
   padding: 20px;
   font-size: 65%;
   line-height: 100%;
}
.doc {
   
   border-style: solid;
   border-width: medium;
   border-color: #000000;
   padding: 20px;
   font-size: 65%;
   line-height: 100%;
}

.gantt-card {
   padding: 4px;
   background-color: var(--mdc-theme-surface);
   color: var(--mdc-theme-on-surface);
}



.grid-header {
   background-color: #eeeeee;
}
.grid-header-color {
  color: var(--mdc-theme-on-card);
}
.grid-content {
   background-color: #efefef;
   color: var(--mdc-theme-on-surface);
   border-bottom: 2px;
   border-color: #ffffff;
}
.icon-title {
   margin-left: 8px;
}
.svg-back {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
}
.domain-info {
   border-bottom:  6px solid var(--mdc-theme-secondary);
  }
.tourmap {
   width: 500px;
   height: 800px;
}
.size-small {
   zoom: 0.75;
}
.back-from {
   stop-color: var(--mdc-theme-background);
}
.back-to {
   stop-color: var(--mdc-theme-surface);
}

.card-desc {
   text-align: center;
}
.text-disabled {
   color:  var(--mdc-theme-surface);
}
.snackbar-green {
   text-align: center;
   font-weight: bold;
   background: var(--mdc-theme-ok);
   color: var(--mdc-theme-on-ok);
}
.snackbar-yellow {
   text-align: center;
   font-weight: bold;
   background: var(--mdc-theme-info);
   color: var(--mdc-theme-on-info);
}
.snackbar-red {
   text-align: center;
   font-weight: bold;
   background: var(--mdc-theme-error);
   color: var(--mdc-theme-on-error);
}
.snackbar-blue {
   text-align: center;
   font-weight: bold;
   background: var(--mdc-theme-work);
   color: var(--mdc-theme-on-work);
}
.svg-blue-light {
   fill: #b3ceff;
}
.svg-blue {
   fill: var(--mdc-theme-work);
}
.svg-blue-dark {
   fill: #334e7f;
}
.svg-green {
   fill: var(--mdc-theme-ok);
}
.svg-green-dark {
   fill: #017f52;
}
.svg-green-light {
   fill: #c6ffeb;
}
.svg-yellow {
   fill: var(--mdc-theme-info);
}
.svg-red {
   fill: var(--mdc-theme-error);
}
.svg-red-light {
   fill: #ff80ad;
}
.col-grey {
   background-color: whitesmoke;
}
.print-black {
   color: #000000
}
.print-grey {
   color: #333333
}
.header-line {
   border-bottom: 3px solid #333333;
  
}

.content-line {
   border-bottom: 1px solid #ddd;
   padding: 5px;
}
.content-line-small {
   border-bottom: 1px solid #ddd;
   padding: 3px;
   font-size: 80%;
}

.footer-line {
   border-top: 1px solid #333333;
   margin: 120px 8px 8px 8px;
}
.aright {
   text-align: right;
}
.photo-icon {
   width: 40px;
   height: 40px;
   border-radius: 50%;
}
.icon-list {
   font-size: 36px;
}
.for-delete {
   color: var(--mdc-theme-error);
}

.border-secondary {
   border:1px var(--mdc-theme-secondary) solid;

}
.center {
   text-align: center;
   align-self: center;
}
.icon-base {
   vertical-align: baseline;
}
.icon-top {
   vertical-align: sub;
}
.icon-center {
   vertical-align: middle;
}
.filter-icon {
   vertical-align: middle;
}
.material-icons.icon-text {
   vertical-align: middle;
}
.overlay {
  position: absolute;
}
.overlay-icon {
   position: absolute;
   text-align: center;
   top: 42px;
   left: 0px;
   height: 100%;
   width: 100%;
}
.overlay-i-mobile {
   position: absolute;
   top: 30px;
   left: 30px;
   height: 100%;
   width: 100%;
}
.color-secondary {
   color: var(--mdc-theme-secondary);
}
.color-red {
   color: var(--mdc-theme-error);
}

.color-yellow {
   color: var(--mdc-theme-info);
}

.color-green {
   color: var(--mdc-theme-ok);
}

.color-green-light {
   color: #c6ffeb;
}
.color-green-dark {
   color: #017f52;
}

.color-blue-light {
   color: #b3ceff;
}
.color-blue {
   color: var(--mdc-theme-work);
}
.color-blue-dark {
   color: #334e7f
}
.color-white {
   color: #ffffff;
}



.color-grey {
   color: var(--mdc-theme-surface);
}
.fullwidth {
   width: 100%;
}
.input-color {
   background-color: var(--mdc-theme-card);
   color: var(--mdc-theme-on-card);
}
.back-color {
   color: var(--mdc-theme-on-background);
}
input:-internal-autofill-selected {
   background-color: #ffffff !important;
}

.material-icons.link-color {
   color: var(--mdc-theme-secondary);
}
.material-icons.card-color {
   color: var(--mdc-theme-on-card);
}
.material-icons.primary-color {
   color: var(--mdc-theme-on-primary);
}
.material-icons.error-color {
   color: var(--mdc-theme-error);
}
.material-icons.ok-color {
   color: var(--mdc-theme-ok);
}
.tag-standard {
   font-size: 75%;
}
.tag-important {
   font-size: 75%;
   color: var(--mdc-theme-error);
}
.separator {
   display: flex;
   align-items: center;
   text-align: center;
   color: #484e51;
   font-size: 70%;
}
.separator::before, .separator::after {
   content: '';
   flex: 1;
   border-bottom: 1px solid var(--mdc-theme-surface);
  ;
   color: var(--mdc-theme-surface);
}
.separator::before {
   margin-right: .25em;
}
.separator::after {
   margin-left: .25em;
}

 /*-- print -------------------------------*/
 .print-content {
   width: 100%;
   display: block;
 }
 .print-container {
   display: flex;
   width: 100%;
 }
 
 .details-head {
   flex: 1 1 100%;
   margin: 8px;
   background-color: #ffffff;
   min-height: 100px;
 }

 .details-footer {
   display: flex;
   margin: 8px;
   background-color: #cccccc;
   min-height: 100px;
   align-items: flex-end;
 }

 .details-content {
   flex: 1 1 100%;
   margin: 8px;
   background-color: #ffffff;
   min-height: 100px;
 }
.print-box {
   width: 60%;
  flex-grow: 2;
  flex-shrink: 2;
  margin: 8px;
  justify-content: flex-start;
  min-height: 100px;
}

.print-box2 {
   width: 40%;
  flex-grow: 1;
  flex-shrink: 1 ;
  margin: 8px;
  justify-content: flex-start;
  min-height: 100px;
}

.editHtml {
   background-color: var(--mdc-theme-primary);
   color: var(--mdc-theme-on-primary);
}

 /*--FAB und Menu-------------------------------------------------------------*/
 .bottomright {
   position: fixed;
   right: 0;
   bottom: 0;
   padding: 0px 10px;
   margin-right: 10px;
   margin-bottom: 10px;
   width: 380px;
   background-color: #ffffff;
}
 .fab-main {
   position: fixed;
   bottom: 1px;
   right: 1px;
}
 .fab {
   position: fixed;
   width: 56px;
   left: 50%;
   bottom: 15px;
   margin-left: -28px;
}
.fab:hover .fab-buttons {
   opacity: 1;
   visibility: visible;
}
.fab:hover .fab-buttons__link {
   transform: scaleY(1) scaleX(1) translateY(-16px) translateX(0px);
}

.fab-action-button:hover + .fab-buttons .fab-buttons__link:before {
   visibility: visible;
   opacity: 1;
   transform: scale(1);
   transform-origin: right center 0;
   transition-delay: 0.3s;
}
.fab-buttons {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 50px;
   list-style: none;
   margin: 0;
   padding: 0;
   opacity: 0;
   visibility: hidden;
   transition: 0.2s;
}
.fab-action-button__icon {
   display: inline-block;
   width: 56px;
   height: 56px;
   background: url("data:image/svg+xml; base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik0xOCAxNi4wOGMtLjc2IDAtMS40NC4zLTEuOTYuNzdMOC45MSAxMi43Yy4wNS0uMjMuMDktLjQ2LjA5LS43cy0uMDQtLjQ3LS4wOS0uN2w3LjA1LTQuMTFjLjU0LjUgMS4yNS44MSAyLjA0LjgxIDEuNjYgMCAzLTEuMzQgMy0zcy0xLjM0LTMtMy0zLTMgMS4zNC0zIDNjMCAuMjQuMDQuNDcuMDkuN0w4LjA0IDkuODFDNy41IDkuMzEgNi43OSA5IDYgOWMtMS42NiAwLTMgMS4zNC0zIDNzMS4zNCAzIDMgM2MuNzkgMCAxLjUtLjMxIDIuMDQtLjgxbDcuMTIgNC4xNmMtLjA1LjIxLS4wOC40My0uMDguNjUgMCAxLjYxIDEuMzEgMi45MiAyLjkyIDIuOTIgMS42MSAwIDIuOTItMS4zMSAyLjkyLTIuOTJzLTEuMzEtMi45Mi0yLjkyLTIuOTJ6Ii8+Cjwvc3ZnPg==") center no-repeat;
}
.fab-buttons__item {
   display: block;
   text-align: center;
   margin: 12px 0;
}
.fab-buttons__link {
   display: inline-block;
   width: 40px;
   height: 40px;
   text-decoration: none;
   background-color: #ffffff;
   border-radius: 50%;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
   transform: scaleY(0.5) scaleX(0.5) translateY(0px) translateX(0px);
   -moz-transition: .3s;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s;
}

.wrapper {
   position: relative;
   width: 400px;
   height: 200px;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
   border: 1px solid grey;
   border-radius: 5px;
 }

 /*-- Icons -------------------------------*/
 /* Rules for sizing the icon. */
 .material-icons.md-18 {
   font-size: 18px;
}
.material-icons.md-24 {
   font-size: 24px;
}
.material-icons.md-36 {
   font-size: 36px;
}
.material-icons.md-48 {
   font-size: 48px;
}
/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
   color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive {
   color: rgba(0, 0, 0, 0.26);
}
/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
   color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive {
   color: rgba(255, 255, 255, 0.3);
}
.icon-material {
   display: inline-block;
   width: 40px;
   height: 40px;
}
.icon-material_fb {
   background: url("data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMCA1MTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMCA1MTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0icG9zdC1mYWNlYm9vayI+CgkJPHBhdGggZD0iTTQ1OSwwSDUxQzIyLjk1LDAsMCwyMi45NSwwLDUxdjQwOGMwLDI4LjA1LDIyLjk1LDUxLDUxLDUxaDQwOGMyOC4wNSwwLDUxLTIyLjk1LDUxLTUxVjUxQzUxMCwyMi45NSw0ODcuMDUsMCw0NTksMHogICAgIE00MzMuNSw1MXY3Ni41aC01MWMtMTUuMywwLTI1LjUsMTAuMi0yNS41LDI1LjV2NTFoNzYuNXY3Ni41SDM1N1Y0NTloLTc2LjVWMjgwLjVoLTUxVjIwNGg1MXYtNjMuNzUgICAgQzI4MC41LDkxLjgsMzIxLjMsNTEsMzY5Ljc1LDUxSDQzMy41eiIgZmlsbD0iIzc1NzU3NSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=") center no-repeat;
}
.icon-material_gp {
   background: url("data:image/svg+xml;  base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMCA1MTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMCA1MTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0icG9zdC1ncGx1cyI+CgkJPHBhdGggZD0iTTIzNC42LDE3NS45NWMwLTI1LjUtMTUuMy03Ni41LTUzLjU1LTc2LjVjLTE1LjMsMC0zMy4xNSwxMC4yLTMzLjE1LDQzLjM1YzAsMzAuNiwxNS4zLDczLjk1LDUxLDczLjk1ICAgIEMxOTguOSwyMTYuNzUsMjM0LjYsMjE0LjIsMjM0LjYsMTc1Ljk1eiBNMjE5LjMsMzAwLjljLTIuNTUsMC01LjEsMC03LjY1LDBsMCwwYy03LjY1LDAtMzAuNiwyLjU1LTQ1LjksNy42NDkgICAgQzE0Ny45LDMxMy42NSwxMjcuNSwzMjYuNCwxMjcuNSwzNTEuOWMwLDI4LjA1LDI1LjUsNTYuMSw3Ni41LDU2LjFjMzguMjUsMCw2MS4yLTI1LjUsNjEuMi01MSAgICBDMjY1LjIsMzM5LjE1LDI1Mi40NSwzMjYuNCwyMTkuMywzMDAuOXogTTQ1OSwwSDUxQzIyLjk1LDAsMCwyMi45NSwwLDUxdjQwOGMwLDI4LjA1LDIyLjk1LDUxLDUxLDUxaDQwOGMyOC4wNSwwLDUxLTIyLjk1LDUxLTUxICAgIFY1MUM1MTAsMjIuOTUsNDg3LjA1LDAsNDU5LDB6IE0xODEuMDUsNDM4LjZjLTcxLjQsMC0xMDQuNTUtNDAuOC0xMDQuNTUtNzYuNWMwLTEyLjc1LDIuNTUtNDAuOCwzOC4yNS02MS4xOTkgICAgYzIwLjQtMTIuNzUsNDUuOS0yMC40LDc5LjA1LTIyLjk1Yy01LjEtNS4xMDEtNy42NS0xMi43NS03LjY1LTI1LjVjMC01LjEsMC03LjY1LDIuNTUtMTIuNzVoLTEwLjJjLTUxLDAtODEuNi0zOC4yNS04MS42LTc2LjUgICAgYzAtNDMuMzUsMzMuMTUtOTEuOCwxMDQuNTUtOTEuOGgxMDcuMWwtNy42NDksNy42NUwyODMuMDUsOTYuOWwtMi41NSwyLjU1aC0xNy44NWMxMC4xOTksMTAuMiwyMi45NDksMjguMDUsMjIuOTQ5LDU2LjEgICAgYzAsMzUuNy0xNy44NSw1My41NS00MC44LDY4Ljg1Yy01LjEsMi41NS0xMC4yLDEwLjItMTAuMiwxNy44NXM1LjEsMTIuNzUsMTAuMiwxNS4zYzIuNTUsMi41NSw3LjY1LDUuMTAxLDEyLjc1LDcuNjUgICAgYzIwLjQsMTUuMyw0OC40NSwzMy4xNDksNDguNDUsNzMuOTVDMzA2LDM4NS4wNSwyNzIuODUsNDM4LjYsMTgxLjA1LDQzOC42eiBNNDMzLjUsMjU1aC01MXY1MUgzNTd2LTUxaC01MXYtMjUuNWg1MXYtNTFoMjUuNXY1MSAgICBoNTFWMjU1eiIgZmlsbD0iIzc1NzU3NSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=") center no-repeat;
}
.icon-material_tw {
   background: url("data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMCA1MTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMCA1MTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0icG9zdC10d2l0dGVyIj4KCQk8cGF0aCBkPSJNNDU5LDBINTFDMjIuOTUsMCwwLDIyLjk1LDAsNTF2NDA4YzAsMjguMDUsMjIuOTUsNTEsNTEsNTFoNDA4YzI4LjA1LDAsNTEtMjIuOTUsNTEtNTFWNTFDNTEwLDIyLjk1LDQ4Ny4wNSwwLDQ1OSwweiAgICAgTTQwMC4zNSwxODYuMTVjLTIuNTUsMTE3LjMtNzYuNSwxOTguOS0xODguNywyMDRDMTY1Ljc1LDM5Mi43LDEzMi42LDM3Ny40LDEwMiwzNTkuNTVjMzMuMTUsNS4xMDEsNzYuNS03LjY0OSw5OS40NS0yOC4wNSAgICBjLTMzLjE1LTIuNTUtNTMuNTUtMjAuNC02My43NS00OC40NWMxMC4yLDIuNTUsMjAuNCwwLDI4LjA1LDBjLTMwLjYtMTAuMi01MS0yOC4wNS01My41NS02OC44NWM3LjY1LDUuMSwxNy44NSw3LjY1LDI4LjA1LDcuNjUgICAgYy0yMi45NS0xMi43NS0zOC4yNS02MS4yLTIwLjQtOTEuOGMzMy4xNSwzNS43LDczLjk1LDY2LjMsMTQwLjI1LDcxLjRjLTE3Ljg1LTcxLjQsNzkuMDUxLTEwOS42NSwxMTcuMzAxLTYxLjIgICAgYzE3Ljg1LTIuNTUsMzAuNi0xMC4yLDQzLjM1LTE1LjNjLTUuMSwxNy44NS0xNS4zLDI4LjA1LTI4LjA1LDM4LjI1YzEyLjc1LTIuNTUsMjUuNS01LjEsMzUuNy0xMC4yICAgIEM0MjUuODUsMTY1Ljc1LDQxMy4xLDE3NS45NSw0MDAuMzUsMTg2LjE1eiIgZmlsbD0iIzc1NzU3NSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=") center no-repeat;
}
.icon-material_li {
   background: url("data:image/svg+xml;  base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMCA1MTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMCA1MTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0icG9zdC1saW5rZWRpbiI+CgkJPHBhdGggZD0iTTQ1OSwwSDUxQzIyLjk1LDAsMCwyMi45NSwwLDUxdjQwOGMwLDI4LjA1LDIyLjk1LDUxLDUxLDUxaDQwOGMyOC4wNSwwLDUxLTIyLjk1LDUxLTUxVjUxQzUxMCwyMi45NSw0ODcuMDUsMCw0NTksMHogICAgIE0xNTMsNDMzLjVINzYuNVYyMDRIMTUzVjQzMy41eiBNMTE0Ljc1LDE2MC42NWMtMjUuNSwwLTQ1LjktMjAuNC00NS45LTQ1LjlzMjAuNC00NS45LDQ1LjktNDUuOXM0NS45LDIwLjQsNDUuOSw0NS45ICAgIFMxNDAuMjUsMTYwLjY1LDExNC43NSwxNjAuNjV6IE00MzMuNSw0MzMuNUgzNTdWMjk4LjM1YzAtMjAuMzk5LTE3Ljg1LTM4LjI1LTM4LjI1LTM4LjI1cy0zOC4yNSwxNy44NTEtMzguMjUsMzguMjVWNDMzLjVIMjA0ICAgIFYyMDRoNzYuNXYzMC42YzEyLjc1LTIwLjQsNDAuOC0zNS43LDYzLjc1LTM1LjdjNDguNDUsMCw4OS4yNSw0MC44LDg5LjI1LDg5LjI1VjQzMy41eiIgZmlsbD0iIzc1NzU3NSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=") center no-repeat;
}
.barcode22 {
   font-family: 'Libre Barcode 39', cursive;
   src: url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&display=swap');
   font-size: 36px;
  visibility: hidden;
}
/* Material Design CSS -MDC-------------------------------------*/



.view-search {
   color:var(--mdc-theme-on-card);
   outline: none;
   padding: 8px;
   width: 200px;
}

.view-search:focus {
outline: none;
}

.view-records {
   color:var(--mdc-theme-on-card);
   outline: none;
   padding: 8px;
   width: 80px;
}

.view-select {
   border: 2px solid #eee;
   padding:12px;
}

.view-select-small {
   border: 2px solid #eee;
   padding: 6px;
}

.mdc-text-field--outlined.mdc-text-field--with-leading-icon 

.mdc-text-field.mdc-text-field__input {
   caret-color: #212629 !important;
   cursor: #212629 !important;
}

.mdc-text-field__input:focus {
   caret-color: #212629 !important;
   cursor: #212629 !important;
}

.mdc-text-field.main {
   background-color: #b3ceff;
}
.mdc-dialog__surface.mdc-dialog-width {
   max-width: 800px;
}
.mdc-dialog__title.mdc--theme-primary {
   background-color: var(--mdc-theme-primary);
   color: var(--mdc-theme-on-primary);
}
.mdc-dialog__actions.mdc--theme-primary {
   background-color: var(--mdc-theme-primary);
   color: var(--mdc-theme-on-primary);
}
.mdc-button.mdc--theme-secondary {
   color: var(--mdc-theme-secondary) ;
}
.mdc-button.mdc-button--raised.mdc--theme-secondary {
   background-color: var(--mdc-theme-secondary);
   color: var(--mdc-theme-on-secondary) ;
}
.mdc-button.mdc-button--outlined.mdc--theme-secondary {
   border-color:  var(--mdc-theme-secondary);
color:var(--mdc-theme-on-secondary);
font-size: 90%;
}
.mdc-button.mdc--theme-primary {
   color:  var(--mdc-theme-on-primary);
   font-size: 90%;
}
.mdc-button.smallsize {
   color:  var(--mdc-theme-on-card);
   font-size: 75%;
   margin: 5px;
   border-radius: 24px;
}
.mdc-button.smallsize:hover {
   background-color: #efefef;
   opacity: 0.8;
 }
.mdc-dialog__content.mdc-dialog__content-card {
   background-color: var(--mdc-theme-card) !important;
   color: var(--mdc-theme-on-card) !important;
}
.mdc-button.mdc--theme-primary {
   background-color: var(--mdc-theme-primary);
   color: var(--mdc-theme-on-primary);
}
.mdc-card {
   padding: 0px 10px;
}
.mdc-card__color {
   background-color: var(--mdc-theme-card);
   color: var(--mdc-theme-on-card);
}
.mdc-card__color-surface {
   background-color:  var(--mdc-theme-background);
}
.mdc-card__menu {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 16px;
}
.mdc-card__menu-mobile {
   display: flex;
   padding: 16px;
}
.mdc-tab--active .mdc-tab__content .mdc-tab__text-label {
   color: #ffffff;
}
.mdc-tab__content .mdc-tab__text-label {
   color: var(--mdc-theme-surface);
}
.mdc-tab-indicator__content.mdc-tab-indicator__content--underline {
   border-color:var(--mdc-theme-secondary);
   border-width: 4px;
}
.mdc-typography--overline-small {
   font-size: 9px;
   margin: 5px 0px 0px 0px;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: var(--mdc-theme-surface);
   background-color: transparent;
}
.mdc-typography--overline-small2 {
   text-transform: uppercase;
   letter-spacing: 2px;
   color: var(--mdc-theme-background);
   border-bottom-style: solid;
   border-bottom-width: thin;
   border-bottom-color: #000000;
}
.mdc-typography--overline-small3 {
   text-transform: uppercase;
   letter-spacing: 2px;
   background-color: #d9d9d9;
   color: var(--mdc-theme-background);
   border-bottom-style: solid;
   border-bottom-width:medium;
   border-bottom-color: #444444;
   font-size: 75%;
   padding: 0px;
   margin: 0px;
}
.print-overline {
   text-transform: uppercase;
   font-size: 65%;
   color: var(--mdc-theme-background);
   line-height: normal;

}
.mdc-typography--caption.small {
  font-size: 75%;
}

.mdc-list {
   background: var(--mdc-theme-card);
   color: var(--mdc-theme-on-card);
}
.mdc-list-divider {
   color: #484e51;
}
.mdc-floating-label{
   color: #212629 !important;
}
.mdc-floating-label--float-above{
   color: #212629 !important;
}
.mdc-floating-label--shake{
   color: #212629 !important;
}
.mdc-linear-progress{
   width: 100%;
   position: fixed; 
   top: 100;
   background-color: var(--mdc-theme-secondary);
}
.mdc-fab {
   background-color: var(--mdc-theme-work);
}
.mdc-fab__icon {
   color: #000000;
   top: 20px;
}

.mdc-data-table {
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
     0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 .mdc-data-table{
   background-color: #f1f2f6;
 }
 
/* Animation --------------------------------------*/
.animate {
   display: none;
   opacity: 0;
}
.animate-view {
   display: block;
   opacity: 1;
   transition: ease 2s;
   color: var(--mdc-theme-on-primary);
}
.dropdown-open {
   transform: rotate(180deg);
   transition: transform 0.5s linear;
 }
 .dropdown-closed {
   transform: rotate(0deg);
   transition: transform 0.5s linear;
 }
 .dropdown-open90 {
   transform: rotate(90deg);
   transition: transform 0.3s linear;
 }
 .dropdown-closed90 {
   transform: rotate(0deg);
   transition: transform 0.3s linear;
 }
 .zoomIn {
   -webkit-animation-name: zoomIn;
   animation-name: zoomIn;
   -webkit-animation-duration: 0.5s;
   animation-duration: 0.5s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
@-webkit-keyframes zoomIn {
   0% {
       opacity: 0;
       -webkit-transform: scale3d(.3, .3, .3);
       transform: scale3d(.3, .3, .3);
  }
   50% {
       opacity: 1;
  }
}
@keyframes zoomIn {
   0% {
       opacity: 0;
       -webkit-transform: scale3d(.3, .3, .3);
       transform: scale3d(.3, .3, .3);
  }
   50% {
       opacity: 1;
  }
}
.spin360 {
   animation-name: spin;
   animation-duration: 3000ms;
   animation-iteration-count: infinite;
   animation-timing-function: linear; 
}
@keyframes spin {
   from {
       transform:rotate(0deg);
   }
   to {
       transform:rotate(360deg);
   }
}
.zoomOut {
   -webkit-animation-name: zoomOut;
   animation-name: zoomOut;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
@-webkit-keyframes zoomOut {
   0% {
       opacity: 1;
  }
   50% {
       opacity: 0;
       -webkit-transform: scale3d(.3, .3, .3);
       transform: scale3d(.3, .3, .3);
  }
   100% {
       opacity: 0;
  }
}
@keyframes zoomOut {
   0% {
       opacity: 1;
  }
   50% {
       opacity: 0;
       -webkit-transform: scale3d(.3, .3, .3);
       transform: scale3d(.3, .3, .3);
  }
   100% {
       opacity: 0;
  }
}
.ease-mobile {
  transition: ease-out 0.3s;
}

.collapse-container {
   overflow: hidden;
}

.collapse-close {
   margin-top: -100%;
   transition: all 0.2s ease-out;
}

.collapse-open {
   margin-top: 0;
   transition: all 0.4s ease-in;
}

.slideInRight {
   -webkit-animation-name: slideInRight;
   animation-name: slideInRight;
   -webkit-animation-duration: 0.5s;
   animation-duration: 0.5s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
@-webkit-keyframes slideInRight {
   0% {
       -webkit-transform: translateX(100%);
       transform: translateX(100%);
       visibility: visible;
  }
   100% {
       -webkit-transform: translateX(0);
       transform: translateX(0);
  }
}
@keyframes slideInRight {
   0% {
       -webkit-transform: translateX(100%);
       transform: translateX(100%);
       visibility: visible;
  }
   100% {
       -webkit-transform: translateX(0);
       transform: translateX(0);
  }
}
.slideInLeft {
   -webkit-animation-name: slideInLeft;
   animation-name: slideInLeft;
   -webkit-animation-duration: 0.5s;
   animation-duration: 0.5s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
@-webkit-keyframes slideInLeft {
   0% {
       -webkit-transform: translateX(-100%);
       transform: translateX(-100%);
       visibility: visible;
  }
   100% {
       -webkit-transform: translateX(0);
       transform: translateX(0);
  }
}
@keyframes slideInLeft {
   0% {
       -webkit-transform: translateX(-100%);
       transform: translateX(-100%);
       visibility: visible;
  }
   100% {
       -webkit-transform: translateX(0);
       transform: translateX(0);
  }
}

 /*---Linearprogress ----------------------------------*/
 .pure-material-progress-linear {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: none;
   width: 100%;
   height: 0.25em;
   color: #cd4900;
   background-color: #cccccc;
   font-size: 16px;
}
.pure-material-progress-linear::-webkit-progress-bar {
   background-color: transparent;
}
/* Determinate */
.pure-material-progress-linear::-webkit-progress-value {
   background-color: currentColor;
   transition: all 0.2s;
}
.pure-material-progress-linear::-moz-progress-bar {
   background-color: currentColor;
   transition: all 0.2s;
}
.pure-material-progress-linear::-ms-fill {
   border: none;
   background-color: currentColor;
   transition: all 0.2s;
}
/* Indeterminate */
.pure-material-progress-linear:indeterminate {
   background-size: 200% 100%;
   background-image: linear-gradient(to right, transparent 50%, currentColor 50%, currentColor 60%, transparent 60%, transparent 71.5%, currentColor 71.5%, currentColor 84%, transparent 84%);
   animation: pure-material-progress-linear 2s infinite linear;
}
.pure-material-progress-linear:indeterminate::-moz-progress-bar {
   background-color: transparent;
}
.pure-material-progress-linear:indeterminate::-ms-fill {
   animation-name: none;
}
@keyframes pure-material-progress-linear {
   0% {
       background-size: 200% 100%;
       background-position: left -31.25% top 0%;
  }
   50% {
       background-size: 800% 100%;
       background-position: left -49% top 0%;
  }
   100% {
       background-size: 400% 100%;
       background-position: left -102% top 0%;
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInDown {
  0% {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInDown {
  0% {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }

  /*-------------- Drag Drop -----------------------------*/
  /*
  .table {
   border: 1px solid #ccc;
   border-collapse: collapse;
}
.table th,
.table td {
   border: 1px solid #ccc;
}
.table th,
.table td {
   padding: 0.5rem;
}
*/
.draggable {
   cursor: move;
   user-select: none;
}
.placeholder {
   background-color: #edf2f7;
   border: 2px dashed #cbd5e0;
}
.clone-list {
   border-top: 1px solid #ccc;
}
.clone-table {
   border-collapse: collapse;
   border: none;
}
.clone-table th,
.clone-table td {
   border: 1px solid #ccc;
   border-top: none;
   padding: 0.5rem;
}
.dragging {
   background: #fff;
   border-top: 1px solid #ccc;
   z-index: 999;
}


.tour-map {
   width: 100%;
   height: 850px;
}

.bold {
   font-weight: bold
}


/*--Google Sign In --*/


.google-btn {
  width: 184px;
  height: 42px;
  background-color: #4285f4;
  border-radius: 2px;
  box-shadow: 0 3px 4px 0 rgba(0,0,0,.25);
}
  .google-icon-wrapper {
    position: absolute;
    margin-top: 1px;
    margin-left: 1px;
    width: 40px;
    height: 40px;
    border-radius: 2px;
    background-color: #ffffff;
  }
  .google-icon {
    position: absolute;
    margin-top: 11px;
    margin-left: 11px;
    width: 18px;
    height: 18px;
  }
  .btn-text {
    float: right;
    margin: 11px 11px 0 0;
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 0.2px;
    font-family: "Roboto";
  }