@charset "UTF-8";

.waiter-sale-container {
	margin: 10px auto;
	min-height: 300px;
	max-width: 1000px;
	margin-bottom: 50px;
	text-align: center;
}

.waiter-sale-tagdescription {
	margin: 10px auto;
	color: rgb(124, 119, 112);
	font-size: 19px;
}

.waiter-sale-bloc {
	display: inline-block;
	vertical-align: top;
	border: 1px solid #D8D8D8;
	width: calc(140px + 2vw);
	margin: 10px 10px;
	position: relative;
}

.waiter-sale-recup-title {
	border-bottom: 1px solid #D8D8D8;
	padding: 10px;
	text-align: center;
	background: #FF0000;
	cursor: pointer;
}

.waiter-sale-cancel {
	cursor: pointer;
	margin-right: 5px;
	position: absolute;
	top: 60px;
	right: 1px;
}

.navigation-button {
	background: #E6E6E6;
	border-radius: 100%;
	width: 26px;
	cursor: pointer;
	padding: 10px
}

.spot-burger-num {
	background: red;
	color: white;
	padding: 1px 5px;
	font-weight: 600;
	display: inline-block;
	margin: 3px;
}

.special-inc-button {
	font-size: calc(12px);
	background: red;
	color: white;
	border-radius: 100%;
	width: 12px;
	font-weight: 800;
	height: 12px;
	padding: 5px;
	position: absolute;
	cursor: pointer;
}



.morph  {

  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
.morph:hover  {
  -webkit-transform: scale(1.5); 
  transform: scale(1.5);
}

.slide-img-right {
  animation-duration: 5s;
  animation-name: slideright;
}

.slide-img-left {
  animation-duration: 1s;
  animation-name: slideleft;
}

.delay-animation-5s {
     -webkit-animation-delay: 5000ms;
        -moz-animation-delay: 5000ms;
         -ms-animation-delay: 5000ms;
          -o-animation-delay: 5000ms;
             animation-delay: 5000ms;
}

.increase-height {
	
	-webkit-animation-duration: 4000ms;
        -moz-animation-duration: 4000ms;
         -ms-animation-duration: 4000ms;
          -o-animation-duration: 4000ms;
             animation-duration: 4000ms;
  animation-name: increaseheight;
}

@keyframes increaseheight {
  0% {
   max-height: 10px;
  }
  
   20% {
   max-height: 10px;
  }
  
  50% {
   max-height: 10px;
  }
  
  80% {
   max-height: 10px;
  }
  
   90% {
   max-height: 10px;
  }

  100% {
     max-height:100%;
     -webkit-transform: rotate(360deg); /* rotation de l'image */
     transform: rotate(360deg);
  }
}


@keyframes slideleft {
  0% {
     margin-left: -20%;
  }

  100% {
    margin-left: 0%;
  }
}

@keyframes slideright {
   0% {
    margin-left: 100%;
  }

  100% {
    margin-left: 0%;
  }
}

@keyframes slideleftrotate {
  0% {
    margin-right: 100%;
    width: 300%; 
  }

  20% {
    margin-right: 80%;
    width: 200%;
 
  }

  60% {
    margin-right: 60%;
    width: 200%; 
 -webkit-transform: rotate(360deg); /* rotation de l'image */
  transform: rotate(360deg);
  }

  

  100% {
    margin-right: 0%;
    width: 100%;
  }
}

.pos-keyboard-button {
    height: 35px;
    min-width: 50px;
    margin: 1px 3px;
    cursor: pointer;
    overflow: hidden;
    text-rendering: auto;
    font: 400 13.3333px Arial;
    font-weight: bold;
    font-size: 1em;
    color: #eeeeee;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    border-radius : 6px;
    border: 1px solid #666666;
    background: #555555 url(../images/poshelper/ui-bg_glass_20_555555_1x400.png) 50% 50% repeat-x;
    line-height: 2em;
}

.pos-keyboard-button.pos-enter {
	 min-width: 3em;
    border: 1px solid #ffaf0f;
    background: #f58400 url(../images/ui-bg_inset-soft_30_f58400_1x100.png) 50% 50% repeat-x;
}

.pos-keyboard-button.pos-space {
	 min-width: 18em;
}

.pos-keyboard-button.pos-bkspace {
	 min-width: 5em;
}

.rotate-45 {

  transform: rotate(-45deg);


  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(-45deg);

  /* Firefox */
  -moz-transform: rotate(-45deg);

  /* IE */
  -ms-transform: rotate(-45deg);

  /* Opera */
  -o-transform: rotate(-45deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

}

.special-edit-button {
	font-size: calc(10px);
	background: rgb(22, 53, 9);
	color: white;
	border-radius: 5px;
	width: 100px;
	font-weight: 800;
	padding: 5px;
	cursor: pointer;
	margin:auto;
}

.zoom-img-rounded {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;

        border-radius:100%;
}
.zoom-img-rounded:hover {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
border-radius:0%;
}

.zoom-hover:hover {
        -webkit-animation: zoomhover 3s infinite;
   -moz-animation: zoomhover 3s infinite;
   -o-animation: zoomhover 3s infinite;
   animation: zoomhover 3s infinite;
}

@keyframes zoomhover {
  0% {
    -webkit-transform: scale(3);
        transform: scale(3);
border-radius:0%;
  }
  100% {
     -webkit-transform: scale(1);
        transform: scale(1);
  }
}

@keyframes slidebg{
  0%{
    transform: translate3d(-50%, 0, 0);
  }
  100%{
    transform: translate3d(0, 0, 0);
  }
}




.posslider {
  display: flex;
  overflow-y: auto;
  scroll-snap-type: y mandatory; 
  
}
.posslides {
  flex-shrink: 0;
  height: 100%;
  scroll-behavior: smooth;
}

.posslides1 > div {
  /* CURRENT way. */
  scroll-snap-align: start;
}

.detail-skew {
    border-right: 8px solid transparent;
    border-top: 24px solid #9a4d12;
    float: left;
}

.detail-box {
   font-size: 11px;
    color: #FFF;
    font-weight: 700;
    background: #9a4d12;
    height: 18px;
    max-width: 90%;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    padding: 5px 5px 2px 5px;
    float: left;
}

.empty-image-text {
	text-shadow:1px 1px 1px black;
	text-transform:uppercase;
	font-weight:800;
	color:#de4f4f;
}

.bank-image-item {
	display : inline-block;
	width : 70px;
	vertical-align:top;
	padding : 10px;
	cursor:pointer;
}
.bank-image-item :hover{
	box-shadow: 0 0 5px 5px #D8D8D8;
}

.offline-screen {
	bottom: 3px;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	position: fixed;
	width: 100%;
	height : 50px;
	max-width: 1400px;
	z-index: 99;
	background: rgba(191,20,20,0.7);
	border-radius : 50px;
	padding-top : 3px;
	
	box-shadow: 0 0 2px 3px red;
}



.onlinechatbutton-bg {
	background: #9a4d12 url(../images/poshelper/online/chat3.png);
	background-size : cover;
	box-shadow: 0 0 3px 3px #bd590d;
}

.onlinechatbutton-alarm {
	background: red url(../images/poshelper/online/chat3.png);
	background-size : cover;
	box-shadow: 0 0 8px 9px #bd0d1d;
}


.chat-panel textarea.x-form-field {
    border-radius: 20px;
    padding-left: 10px;
    border-color: #4f79d6;
    box-shadow: 0 0 5px 2px #4f79d6;
}

.gwt-Button.chat-send {
	border: 2px solid #9c2222;
    border-bottom: 2px solid #9c2222;
    border-radius: 10px;
}

.slot-button {
	
	padding:15px;
	border-radius:5px;
	background-color:#524949;
	border:1px solid red;
	width:65px;
	font-weight:800;
	height:40px;
	color:white;
	margin:3px ;
	vertical-align:top ;
	display:inline-block;
	box-shadow:0px 2px 2px rgb(207, 216, 74);
	cursor:pointer;
	
}

.kpi-box {
    width: 70px;
    font-size: 12px;
    color: black;
    display: inline-block;
    text-align: center;
   
    padding-right: 5px;
}

@media only screen and (min-width: 501px) and (max-width: 2500px) { 
				.largeForBigScreen {
				font-size : larger;
				
				}
				
				.paddingForBorneSlider {
				padding : 80px 1px;
				}
				
				.text-simple-font {
	               font-size: x-large;
                   color: rgb(218, 9, 9);
                   display: inline-block;
                   margin: 7px;
                   vertical-align: top;
                   text-shadow: 1px 1px 1px black;
                   border-bottom: 1px solid rgb(224, 134, 134);
               }
               
               .text-large-onbigscreen {
               font-size:x-large;
               }
               
               .onlinechatbutton {
	
                   position : fixed;
	               bottom : 20px;
	               right : 70px;
	               width : 50px;
	               height : 50px;
	               border-radius : 100%;
	
	               cursor : pointer;
               }
				
			}
@media only screen and (min-width: 1px) and (max-width: 500px) {
				.largeForBigScreen {
				font-size : medium;
				}	
				.paddingForBorneSlider {
				padding : 30px 1px;
				}
				
				.text-simple-font {
	               font-size: small;
                   color: rgb(218, 9, 9);
                   display: inline-block;
                   margin: 7px;
                   vertical-align: top;
                   text-shadow: 1px 1px 1px black;
                   border-bottom: 1px solid rgb(224, 134, 134);
               }
               
               .text-large-onbigscreen {
               font-size:medium;
               }
               
                .onlinechatbutton {
	
                   position : fixed;
	               bottom : 20px;
	               right : 20px;
	               width : 50px;
	               height : 50px;
	               border-radius : 100%;
	
	               cursor : pointer;
               }
				
               
			}