@import url("stylesheet.css");
@import url("https://api-apishop-v2.web-caisse.com/v2/css/stylesheet");

/* ============ */
/* MODULE SALES */
/* ============ */
.salesGrid .saleGrid_container {
  border: 1px solid #eee;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding: 5px;
  margin: 15px;
  background-color: #3a3a3a;
  overflow: auto;
}

.salesGrid .saleGrid_container .saleGrid_title {
  margin-bottom: 5px;
  padding: 0px;
  margin: 0px;
}

.salesGrid .saleGrid_container .saleGrid_title .saleAlias {
  color: #ee5346;
}

.salesGrid .saleGrid_container .saleGrid_title .saleGrid_number {
  display: inline-block;
  width: 50%;
  text-align: left;
  vertical-align: middle;
  padding: 0px;
  margin: 0px;
}

.saleGrid_number {
  overflow: auto !important;
}

.salesGrid .saleGrid_container .saleGrid_title .saleGrid_time {
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 10px;
  text-align: right;
  vertical-align: middle;
  padding: 0px;
  margin: 0px;
}

.salesGrid .saleGrid_container .saleGrid_customerNumber {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 5px;
  margin-left: 20px;
  color: #FF80E4;
  border: 1px solid #FF80E4;
  border-radius: 3px;
  width: auto;
}

.salesGrid .saleGrid_container .saleGrid_productsList,
.salesGrid .saleGrid_container .saleGrid_composedProduct,
.salesGrid .saleGrid_container .saleGrid_composedProduct .productsListGrid {
  margin-left: 0px;
}

.salesGrid .saleGrid_container .saleGrid_productsList .saleGrid_product .saleGrid_product_quantity,
.salesGrid .saleGrid_container .saleGrid_composedProduct .saleGrid_composedProduct_quantity {
  display: inline-block;
  text-align: right;
  vertical-align: middle;
  width: 60px;
}

.salesGrid .saleGrid_container .saleGrid_productsList .saleGrid_product .saleGrid_product_x,
.salesGrid .saleGrid_container .saleGrid_composedProduct .saleGrid_composedProduct_x {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  width: 20px;
}

.salesGrid .saleGrid_container .saleGrid_productsList .saleGrid_product .saleGrid_product_name,
.salesGrid .saleGrid_container .saleGrid_composedProduct .saleGrid_composedProduct_name {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.salesGrid .saleGrid_container .saleGrid_productsList .saleGrid_product .saleGrid_subproductsList {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.saleGrid_subproductsList {
  color: fuchsia;
}

.salesGrid .saleGrid_container .saleGrid_productsList .saleGrid_supplementsList {
  text-align: left;
  vertical-align: middle;
}

.salesGrid .saleGrid_container .saleGrid_productsList .saleGrid_supplementsList .add_grid {
  padding-left: 20px;
  background: url("../images/add_16x16.svg") no-repeat 0px 4px;
  padding-top: 0.15em;
}

.salesGrid .saleGrid_container .saleGrid_productsList .saleGrid_supplementsList .del_grid {
  padding-left: 20px;
  background: url("../images/close_16x16.svg") no-repeat 0px 4px;
  padding-top: 0.15em;
}

.salesGrid .saleGrid_container .saleGrid_productsList .saleGrid_product_comment {
  margin-left: 70px;
  text-align: left;
  vertical-align: middle;
}

.salesGrid .saleGrid_container .saleGrid_productsList .saleGrid_product_comment .comment_grid {
  padding-left: 20px;
  background: url("../images/info_32x32.png") no-repeat 0px 4px;
  background-size: 16px 16px;
}

.salesGrid .saleGrid_container .buttonsContainerGrid {
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.buttonsContainerNewGrid
{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.salesGrid .saleGrid_container .buttonStateGrid {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  border-width: 0px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #eee;
  font-size: 18px;
  text-decoration: none;
  background-color: #999;
  cursor: pointer;
}

.buttonNewStateGrid {
  display: inline-block;
  border-width: 0px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #eee;
  font-size: 18px;
  text-decoration: none;
  background-color: #999;
  cursor: pointer;
  margin:10px;
  padding:10px;
}

.salesGrid .saleGrid_container .buttonStateGrid.min .buttonNewStateGrid.min {
    font-size: 10px;
    padding: 4px;
    margin: 4px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.buttonDisplay {
  display: inline-block;
  padding: 5px;
  border-width: 0px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #eee;
  font-size: 18px;
  text-decoration: none;
  background-color: #999;
  background: -webkit-linear-gradient(top, #ff4081, #c60055);
  background: linear-gradient(to bottom, #ff4081, #c60055);
  cursor: pointer;
}

.buttonDisplay:hover {
  background: -webkit-linear-gradient(bottom, #ff4081, #c60055);
  background: linear-gradient(to top, #ff4081, #c60055);
}

.verticalLine {
  width: 100%;
}

.state {
  border: 1px solid;
  text-align: center;
  z-index: 100;
}

.stateFollow {
  border: 1px solid #323233;
  text-align: center;
  min-height: 16vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.textTabFollow {
  color: rgb(240, 240, 240);
  height: 90%;
  padding: 1vh;
  display: inline-flex;
  align-items: center;
}

p {
  margin: 10px !important;
}

#inPreparationFor {
  border: 1px solid grey;
  border-bottom: 3px solid orange;
  text-align: center;
  color: orange;
  z-index: 100;
}

.flexContainer {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: calc(100vh - 40px);
}

.flexContainerFollow {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.flexWeightFollow {
  flex: 1 1 auto;
  display: block;
  width: 100vw;
}

.flexWeight {
  flex: 1 1 auto;
  display: flex;
  width: calc(100vw / 3);
}
.styleNumber {
  background : black;
  color :  #fff;
  width : 3vw;
  padding :  8px 0px;
  border-radius : 50%;
  font-weight :  bold;
  text-align : center;
  letter-spacing: -0.35rem;
}

@media (orientation: portrait) {
  .flexContainer {
    flex-direction: column;
  }

  .flexWeight {
    width: 100%;
  }
}

@media (orientation: landscape) {

  .flexContainer {
    flex-direction: row;
  }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  .logoFollow {
    width: 15vw;
  }
}

.salesNumber {
  color: white;
  border-radius: 5px;
  padding: 3px 5px 3px 5px;
}

#tsInitTrackingScreen {
  font-family: "Verdana", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.hour {
  display: inline-block;
  text-align: left;
  margin-left: 5px;
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.wrapper {
  display: block;
  flex-flow: row wrap;
  justify-content: space-between;
}

.saleGrid_composedProduct_sub {
  padding-left: 90px;
  color: fuchsia !important;
}

.columnTitleFollow {
  font-size: 2.2em;
  font-weight: bolder;
  max-height: 2.50em;
}

@media screen and (display-mode: fullscreen) {
  .columnTitleFollow {
    font-size: 3.1em;
  }
}

.countSalesFollow {
  font-size: 1.50em;
  padding: 1vh;
  max-height: 2.50em;
}

.columnTitle {
  font-size: 24px;
}

.tsSaleStateContainer {
  max-height: 85vh;
}

.saleState {
  padding-top: 3vh;
  font-size: 145%;
  width: 85%;
  size: 200%;
  z-index: 20;
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.vue-up {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 111;
  pointer-events: none;
}

.vue-up.show_el {
  opacity: 1;
}



.vue-up .text {
  color: #fff;
  font-family: 'Arial', sans-serif;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  box-sizing: content-box;
  width: min-content;
  padding: 0.2em;
  border: solid white 25px;
  border-radius: 20%;
}

p.countSalesFollow {
  margin-top: -0.25vh !important;
}

.cellsGlobal {
  display: flex;
  margin-right: 0.5vw;
}

.testContent {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.cellRight {
  text-align: right;
}

.mycellFollow {
  align-self: center;
  width: auto;
  min-width: 4vw;
  max-width: auto;
  white-space: nowrap;
}

.mytableFollow {
  border-width: 0.5vh;
  border-style: solid;
  padding: 1.25vh 0 1.5vh 0.9vw;
  box-shadow: 3px 3px 3px rgba(94, 93, 93, 0.7);
  border-radius: 20px;
  z-index: 100;
}

.myrowFollow {
  display: flex;
  justify-content: space-between;
}

.saleType {
  justify-content: flex-start;
  min-width: 10vw;
}

.saleType2
{
    padding: 0 6px !important;
    background-color: black !important;
    color: white !important;
    font-size: 29px !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
}

.saleTypeEnd {
  justify-content: flex-end;
}

.logoContainer {
  position: absolute;
  width: 100%;
  height: 12vh;
  background-color: rgba(117, 190, 218,0.0);
}

.logoFollow {
  display: flex;
  width: 12vw;
  position: absolute;
  min-height: 6vh;
  left: 50%;
  margin-left: -6vw;
  top: 50%;
  margin-top: -1vh;
  z-index: 110;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 5s !important;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active below version 2.1.8 */
  {
  opacity: 0 !important;
}


.cellLeft {
  text-align: center;
}

.cellCenter {
  text-align: center;

}

.cellRight {
  text-align: right;
}




.list-complete-item {
  transition: all 1s;
  display: inline-block;
}

.test {
  max-height: 80vh;
}

.list-complete-enter,
.list-complete-leave-to

/* .list-complete-leave-active below version 2.1.8 */
  {
  opacity: 0;
  transform: translateY(30px);
}

.list-complete-leave-active {
  position: relative;
  left: 50%;
}

.clock {
  border-width: 15px;
  border-style: solid;
  box-shadow: 3px 3px 3px rgba(94, 93, 93, 0.7);
  width: 11%;
  border-radius: 50%;
  margin-top: 20%;
  margin-left: 44.5%;
  position: absolute;
  z-index: 100 !important;
}

.clock::after {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
}

.clockTxt {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  font-size: 2.3vw;
  font-weight: bolder;
}

@media (orientation: portrait) {

  .cellsGlobal,
  .clock {
    display: none;
  }


  #saleTime,
  #saleNumberAlias {
    display: flex;
  }

  #saleTime {
    margin-right: 1.5vw;
  }

  .saleState {
    width: 95%;
  }

  .logoFollow {
    width: 17vw;
    min-height:2vh;
    margin-left: -8.5vw;
    top:75%;
  }

  .stateFollow {
    min-height: 12vh;
  }

  .styleNumber {
    width: 3vw;
    padding: 0.5vw 0.5vw;
    text-align:center;
  }
}