@import '../../../assets/scss/variables';

.grid-container {
  display: grid;
  grid-column-gap: 1vh;
}

.grid-container-fix-width-last-col {
  display: grid;
  grid-template-columns: auto;
  padding-top: 7px;
}

.process-span {
  color: $hima-color-red;
  font-weight: bold;
}

.process-grid-container {
  white-space: nowrap;
  padding-top: 13px;
  padding-right: 25px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  display: block;
}

.adding {
  padding-right: 200px;
}

.add-process-label {
  position: absolute;
  top: 99px;
  right: 63px;
  cursor: pointer;
}

.back-arrow-container {
  width: 118px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 50;
  top: 83px;
  cursor: pointer;
  transform: rotate(180deg);
}

.foward-arrow-container {
  width: 118px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 50;
  top: 87px;
  cursor: pointer;
}

.placeholder-tab {
  width: 300px;
  height: 42px;
  display: inline-block;
  height: 100%;
}

/*
  ##Device = Big Desktops
*/
@media (min-width: 1281px) {
  .grid-container {
    grid-template-columns: 93% auto;
  }

  .foward-arrow-container {
    right: 80px;
  }
}

/*
  ##Device = Laptops, Desktops, Ipad pro
*/
@media (min-width: 1025px) and (max-width: 1280px) {
  .grid-container {
    grid-template-columns: 93% auto;
  }

  .foward-arrow-container {
    right: 80px;
  }
}

/*
  ##Device = Tablets, Ipads
*/
@media (min-width: 768px) and (max-width: 1024px) {
  .grid-container {
    grid-template-columns: 685px auto;
  }

  .foward-arrow-container {
    right: 68px;
  }
}
