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{

        float:left;
        width:49%;
    }
}

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

        float:left;
        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;
}


.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"] {
        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) {
    .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) {
    .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
  
    }
  }
  
  
  
    
  .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 2
    }
  }
  
  
  
    
  .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
    }
  }