input.ro{
  cursor:pointer;
  border:0px;
}
.bold{
  font-weight:bold;
}
.fl{
  float:left;
}

tr.isStornoCell td{
  background-color: #a9e7ff;
}
.fr{
  float:right;
}
.cb{
  color: #000;
}

.bt2{
  border-top: 2px solid #000;
}

.bl2{
  border-left: 2px solid #000;
}
/* Add this CSS to your stylesheet */
.my-custom-popup {
  max-width: 600px; /* Set your desired width */
  margin: auto;
}

.my-custom-popup .popup {
  width: 90%; /* Adjust the width if needed */
  margin: auto;
}
.online_indicator_green{
  height:10px;
  width: 10px;
  background-color: #00ce00;
  border-radius: 5px;

}

.online_indicator_red{
  height:10px;
  width: 10px;
  background-color: #FF0000;
  border-radius: 5px;

}
.online_indicator_gray{
  height:10px;
  width: 10px;
  background-color: #929292;
  border-radius: 5px;

}
#footermenu{
  transition: all 0.2s ease;
  position: fixed;
  padding:5px;
  /* bottom:0px; */
  z-index:9;
  bottom:95px;
  background-color:#cecece;
  border-top:1px solid #868686;
overflow:hidden;
  width:100%;
  height:318px;
  -webkit-box-shadow: 1px -8px 16px 0px rgba(0,0,0,0.48);
  box-shadow: 1px -8px 16px 0px rgba(0,0,0,0.48);
  opacity:1;
}

tr.verlauf_gruen td{
  background-color:#a3ffab;
}
tr.verlauf_rot td{
  background-color:#e48080;
}
#footermenu.hidden{
  height: 0px;
  overflow: hidden;
  opacity:0;
}

.w100{
  width:100%
}
.wichtig{
  border:1px solid red  !important;
}
h4{
  margin-top:50px;
  border-bottom: 1px solid #cecece;

}
div.greenBG{

  background-color: #33cd5f;
}
.small{
  font-size: 10px;
}
.notification{
  margin:3px;
  width:100%;
  border-radius: 5px;
  text-align: center;
  background-color: #FF0000;
  border:2px solid white;
  color:#fff;
  padding:10px;
  font-size: 18px;


}
.notification_red{
  background-color: #FF0000;

}
.notification_green{
  background-color: #00ce00;
}
.keypad{
  background-color: #000000;
  position:fixed;
  bottom:10px;
  height:100%;
  width:100%;
  z-index:200;
}
.grid3-keypad {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr 1fr ;
}
.g3-keypad {
    grid-column: span 3
}


.numberbutton{
  border:1px solid #303030;
  cursor:pointer;
  color:#FFF;
  height:110px;
  line-height:110px;
  text-align:center;
  font-weight: bold;
  font-size: 20pt;
}


/* Notify */
.ng-enter,
.ng-leave,
.ng-move {
  /* -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  transition: 0.5s linear all; */
}

.ng-enter,
.ng-move {
  opacity: 0;
  /*height: 0;*/
  /*overflow: hidden;*/
}

.ng-move.ng-move-active,
.ng-enter.ng-enter-active {
  opacity: 1;
  /*height: 60px;*/
}

.ng-leave {
  opacity: 1;
  overflow: hidden;
}

.ng-leave.ng-leave-active {
  opacity: 0;
  /*height: 0;*/
  /*padding-top: 0;*/
  /*padding-bottom: 0;*/
}


/* ENDE Notify */


table.selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    }
/*
    * {
        -webkit-user-select: auto;
        -moz-user-select: auto;
        -ms-user-select: auto;
        user-select: auto;
        } */


.widefield{
    border:1px solid #cecece;
}


textarea.widefield{
  height:5em;
}

.mt10{  margin-top:10px}
.mt20{  margin-top:20px}
.mt30{  margin-top:30px}
.mt40{  margin-top:40px}
.mt50{  margin-top:50px}
.mt100{  margin-top:100px}
.mt150{  margin-top:150px}
.tar{
  text-align: right;
}
.tal{
  text-align: left;
}

.scroll{
    height:100%
}

@media screen  {

    .chartDiv{

        border:1px solid #cecece;
        padding:10px;
    }
}

@media print
{
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */

   .chartDiv{

        width:100%;
    }


}


@media screen and (min-width: 980px) /* Desktop */ {

    .onlyprint{
        display:none
    }

div.scroll{
    margin:15px;
    }
}

.button{
    border:1px solid #cecece;
    margin:1px;
}
/* Empty. Add your own CSS if you like */
button.ticketButton{
    width:48%;
    height:95px;
    border-radius:10px;
    border:0px;
    margin:2px;
    line-height:20px;
    border:1px solid #333;
}

button.ticketButton.half{
  width:23.75%;
}

.button-blue{
    background-color:#4a8bfc;
    color:#FFF;
}

.button-green{
    background-color:#33cd5f;
    color:#FFF;
}

.tac{
  text-align: center;
}
.cp{
    cursor:pointer;
}

td{
    border:1px solid #cecece;
    padding:5px;
}

.wrapper.connected{
    background-color:#00ce00;
}

th{
    text-align:left
}
.activeCurrentUser{
    /* font-weight:bold; */
    background-color:#00ce00;
}
tr.storno > td{
    background-color:#999;
    color:#FFF;
}
tr.storniert > td{
    background-color:#bbbbbb;
    color:#FF0000;
}


.lightgray{
    color:#666
}
.lightred{
    color:rgb(255, 119, 119)
}
.paypalblue{
    color:#0070ba;
}

tr:nth-child(even) {
    background-color: #f2f2f2
}

.detected{
    color:#FF0000;
    font-weight: bold;
}

.tablesp td,.tablesp th{
  padding:10px !important
}

.table > td{
/*        border-bottom:1px solid #cecece;*/
}

.ccform  input{
  width:100%;
}

.reddot{
    border-radius:20px;
    line-height:35px;
    font-weight:bold;
    height:40px;
    width:40px;
    background-color:#FF0000;
    display:block;
    float:right;
    border:1px solid #FFF;
    color:#FFF;
    font-size:16pt;
    text-align:center;
}

@media print {
    body {
    position: static;
    overflow: initial;
    }
    ion-nav {
    overflow: initial !important;
    }
    .scroll-content {
    position: relative;
    overflow:visible!important;
    }
    ion-header {
    display: none !important;
    }
    header nav, footer {
    display: none;
    }
    button {
    display: none !important;
    }
    ion-fab {
    display: none;
    }
    .pane {
    position: initial;
    }
    p a {
    word-wrap: break-word;
    }

    .menu.menu-left{
        display:none;
    }

    table tr td, table tr th {
        page-break-inside: avoid;
    }

    .noprint{
        display:none
    }
    }

    input[type="text"],input[type="number"],input[type="password"],select {
        border: 1px solid #cecece;
        border-radius: 5px;
        padding: 7px;
        /* line-height:42px; */
        vertical-align:top;
    }

    .redBackground{
        background-color:#FF0000;
    }


    #popupBox{
        position: absolute;
        background-color: #FFF;
        border: 1px solid black;
        width: 90%;
        margin: 5%;
        top: 0px;
        max-height: 80%;
        z-index: 10;
        overflow: auto;
    }

    .red{
        color:#FF0000
    }

    .online{
        background-color:#00ce00 !important;
    }
    .offline{
        background-color:#FF0000 !important;
        color:#FFF;
    }



    #myProductForm label{
        float:left;
        /* margin-left:20px; */
    }


    .liveview_gruen{
        background-color: #00ce00;
    }
    .liveview_rot{
        background-color: #FF0000;
        color:#FFFFFF;
    }

    .fehlt{
      color:#FF0000;
    }
    .fehlt{
      color:#FF0000;
    }






.grid2 {
    display: grid;
    grid-gap: 1em;
  }


  /** DESKTOP */
  @media only screen and (min-width: 551px) {

    h3.produktAdminHeader{
      margin-top:0px;
    }
    .hideOnDesktop{
      display:none;
    }
    .showOnDesktop{
      display:block;
    }


    .hideOnMobile{
      display:table-cell;
    }
    .grid2 {
      grid-template-columns: 1fr 1fr ;
    }

    .grid2 .g1 {
      grid-column: span 1
    }
    .grid2 .g2 {
      grid-column: span 2
    }
    .grid2.g3 {
      grid-column: span 1
    }
    .grid2.g4 {
      grid-column: span 1

    }

  }

  /** MOBILE  */
  @media only screen and (max-width: 550px) {
    h3.produktAdminHeader{
      margin-top:150px;
    }

    .showOnDesktop{
      display:none;
    }
    .hideOnDesktop{
      display:block;
    }

    .hideOnMobile{
      display:none;
    }
    .grid2  {
      grid-template-columns: 1fr;
    }

    .grid2 .g1 {
      grid-column: span 1
    }
    .grid2 .g2 {
      grid-column: span 1
      }
    .grid2.g3 {
      grid-column: span 1
    }
    .grid2.g4 {
      grid-column: span 1

    }
  }




  .grid3 {
    display: grid;
    grid-gap: 1em;
  }


  /** DESKTOP */
  @media only screen and (min-width: 551px)  {



    .grid3 {
      grid-template-columns: 1fr 1fr 1fr ;
    }


    .grid3 .g2 {
      grid-column: span 2
    }
    .grid3 .g3 {
      grid-column: span 3
    }
  }

  /** MOBILE  */
  @media only screen and (min-width: 351px) and (max-width: 550px) {
    .grid3 {
      grid-template-columns: 1fr 1fr;
    }


    .grid3 .g2 {
      grid-column: span 2
    }
    .grid3 .g3 {
      grid-column: span 2
    }
  }

  @media only screen and  (max-width: 350px) {
    .grid3 {
      grid-template-columns: 1fr
    }


    .grid3 .g2 {
      grid-column: span 1
    }
    .grid3 .g3 {
      grid-column: span 1
    }
  }




  .grid4 {
    display: grid;
    grid-gap: 1em;
  }


  /** DESKTOP */
  @media only screen and (min-width: 551px) {
    .grid4 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }


    .grid4 .g2 {
      grid-column: span 2
    }
    .grid4 .g3 {
      grid-column: span 3
    }
    .grid4 .g4 {
      grid-column: span 4
    }
  }

  /** MOBILE  */
  @media only screen and (max-width: 550px) {
    .grid4 {
      grid-template-columns: 1fr 1fr;
    }


    .grid4 .g2 {
      grid-column: span 2
    }
    .grid4 .g3 {
      grid-column: span 2
    }
    .grid4 .g4 {
      grid-column: span 2
    }
  }




  .grid6 {
    display: grid;
    grid-gap: 1em;
  }


  /** DESKTOP */
  @media only screen and (min-width: 551px) {
    .grid6 {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }


    .grid6 .g2 {
      grid-column: span 2
    }
    .grid6 .g3 {
      grid-column: span 3
    }
    .grid6 .g4 {
      grid-column: span 4
    }
    .grid6 .g5 {
      grid-column: span 5
    }
    .grid6 .g6 {
      grid-column: span 6
    }
  }

  /** MOBILE  */
  @media only screen and (max-width: 550px) {
    .grid6 {
      grid-template-columns: 1fr 1fr 1fr;
    }


    .grid6 .g2 {
      grid-column: span 2
    }
    .grid6 .g3 {
      grid-column: span 2
    }
    .grid6 .g4 {
      grid-column: span 2
    }
    .grid6 .g5 {
      grid-column: span 2
    }
    .grid6 .g6 {
      grid-column: span 3
    }
  }




  .grid7 {
    display: grid;
    grid-gap: 1em;
  }


  /** DESKTOP */
  @media only screen and (min-width: 551px) {
    .grid7 {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }


    .grid7 .g2 {
      grid-column: span 2
    }
    .grid7 .g3 {
      grid-column: span 3
    }
    .grid7 .g4 {
      grid-column: span 4
    }
    .grid7 .g5 {
      grid-column: span 5
    }
    .grid7 .g6 {
      grid-column: span 6
    }
    .grid7 .g7 {
      grid-column: span 7
    }
  }


  /** MOBILE  */
  @media only screen and (max-width: 550px) {
    .grid7 {
      grid-template-columns: 1fr 1fr 1fr;
    }


    .grid7 .g2 {
      grid-column: span 2
    }
    .grid7 .g3 {
      grid-column: span 2
    }
    .grid7 .g4 {
      grid-column: span 2
    }
    .grid7 .g5 {
      grid-column: span 2
    }
    .grid7 .g6 {
      grid-column: span 2
    }
    .grid7 .g7 {
      grid-column: span 2
    }
  }