:root {
  --primary_color: #6abcb9;
  --white: #ffffff;
}

#App {
  background-color: #f7f7f7;
  height: auto;
  min-height: 100%;
  padding-bottom: 0px !important;
}

.nav-color{
  color: red;
}

.nav-link-shop {
  font-size: 16px;
  font-family: poppins;
  letter-spacing: 1px;
}

.myshopfloor-btn {
  background-color: #524C42 !important;
  color: #E2DFD0 !important;
  transition: all 0.5s ease-out;
  &:hover {
     background-color: #FF5F1F !important;
  }
}


.login-content-center {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
 
.login-padding {
  margin: 120px 0px 120px 80px;
  /*background-color: #e7f6f2;*/
  background: rgba(30, 30, 30, 0.30);
  border-radius: 20px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(9.9px);
  -webkit-backdrop-filter: blur(9.9px);
  border: 1px solid rgba(255, 95, 31, 0.58);
}

.login-txt {
  color: #E2DFD0 !important;
}

.login-flex {
  min-width: 150px;
  width: 430px;
}

.font-lighter {
  font-weight: 100;
  color: #8bb3b4;
}

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

.login-space {
  margin-top: 80px;
}

.login-background {
  background-size: cover;
}

.progress-bar {
  background-color: "#6ABCB9";
  height: "7px";
}

table.product-cat-mv tr th {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

table.product-cat-mv tbody {
  padding-top: 10px;
}

table.table-inner-extruder tr th {
  min-width: 80px;
}

table.table-inner-extruder tbody {
  padding-top: 10px;
}

.prod-mon-dash {
  margin: 0px 0.5rem 0px 0.5rem;
  padding: 20px;
  border-radius: 1rem;
  background: #E7E6E1;
  -webkit-box-shadow: 4px 5px 13px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 4px 5px 13px -3px rgba(0,0,0,0.75);
  box-shadow: 4px 5px 13px -3px rgba(0,0,0,0.75);
}

.prod-box-shad {
  -webkit-box-shadow: 4px 5px 13px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 4px 5px 13px -3px rgba(0,0,0,0.75);
  box-shadow: 4px 5px 13px -3px rgba(0,0,0,0.75);
}

.prod-mon-hd {
  background: #FF5F1F;
  color: beige;
  padding: 10px;
  border-radius: 0.5rem;
}

.prod-mon-txt {
  background: #FF5F1F;
  color: beige;
  padding: 5px;
  border-radius: 0.5rem;
}

.prod-mon-txtg {
  background: #008000;
  color: beige;
  padding: 5px;
  border-radius: 0.5rem;
}

.prod-mon-paga {
  background-color: #1e1e1e !important;
  color: beige !important;
  border-radius: 50% !important;
}

.prod-mon-pagi {
  border-radius: 50% !important;
}

.prod-mon-txtr {
  background: #D90429;
  color: beige;
  padding: 5px;
  border-radius: 0.5rem;
}

table.prod-mon-tb {
  border-collapse: collapse;
  border-top: 2px solid #FF5F1F;
  font-size: 0.6rem;
  margin-top: 10px;
  width: 100%;
}

table.prod-mon-tb th, td {
  border: 1px solid white;
  padding: 1px 3px;
}

table.prod-mon-tb tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

table.prod-mon-tb tbody > tr:nth-of-type(odd) {
  background-color: #ffffff;
}

.dash-three-menu {
  overflow-x: auto;
  overflow-y: scroll;
  &::-webkit-scrollbar:vertical {
    display: none;
  }
  &::-webkit-scrollbar:horizontal {
    display: block;
    height: 3px;
  }
}

.prod-mondash-over {
  overflow-y: scroll;
  &::-webkit-scrollbar:vertical {
    display: block;
    width: 5px;
    border-radius: 1rem;
  }
  &::-webkit-scrollbar:horizontal {
    display: none;
  }
}

.product-assemblies-comp {
  background-color: white;
  padding: 20px;
  border-radius: 0.5rem;
  -webkit-box-shadow: 4px 5px 13px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 4px 5px 13px -3px rgba(0,0,0,0.75);
  box-shadow: 4px 5px 13px -3px rgba(0,0,0,0.75);
  overflow-x: auto;
  overflow-y: auto;
  &::-webkit-scrollbar:vertical {
    display: none;
  }
  &::-webkit-scrollbar:horizontal {
    display: block;
    width: 5px;
    border-radius: 1rem;
  }
}

.product-sub-asemblies {
  height: 500px;
  overflow-y: scroll;
  &::-webkit-scrollbar:vertical {
    display: block;
    width: 5px;
    border-radius: 1rem;
  }
  &::-webkit-scrollbar:horizontal {
    display: none;
  }
}


.prod-mon-producthover {
  cursor: pointer;
  transition: all 0.3s ease-in;
  padding: 10px !important;
  &:hover {
    background-color: #ddd !important;
    border-radius: 0.5rem !important;
  }
}

.prod-mon-select {
  background-color: #ddd !important;
  border-radius: 0.5rem !important;
  padding: 10px !important;
}

.prod-plan-form {
  width: 100%;
  transition: all 0.5s ease-in !important;
}

.opform-field-hide {
  height: 100% !important;
  transition: all 0.5s ease-in !important;
}

.prod-plan-mess {
  width: 20%;
  transition: all 0.5s ease-in !important;
}

.prod-mon-hide {
  transition: all 0.3s linear !important;
  transform: translateX(200px);
  opacity: 0%;
}

.prod-mon-vis {
  transition: all 0.3s linear !important;
  transform: translateX(0px);
  opacity: 100%;
}

.prod-monandon-visible {
  border: 1px solid  #00264D;
  border-radius: 0.5rem;
  padding: 10px;
  width: 300px;
  position: absolute;
  right: 2%;
  z-index: 10;
  background: #fff;
}

.app-notifiction-visible {
  border: 1px solid  #00264D;
  border-radius: 0.5rem;
  padding: 45px 10px 10px 10px;
  width: 350px;
  position: fixed;
  top: 40px;
  right: 5px;
  z-index: 500;
  background: #fff;
  max-height: 500px !important;
  overflow-y: auto !important;
  &::-webkit-scrollbar:vertical {
    display: block;
    width: 5px;
    border-radius: 1rem;
  }
  &::-webkit-scrollbar:horizontal {
    display: none;
  }
}

.prod-monandon-btn {
  position: absolute;
  right: 1%;
  top: 3%;
  z-index: 20;
}

.profile-item-wrap {
    padding: 10px 15px 10px 15px;
    border-radius: 0.5rem;
    transition: all 0.3s ease 0s;
    font-weight: 600;
    margin: 10px;
    &:hover {
        background-color: #ececec;
        color: #00264D;
        font-weight: 900;
        min-width: 100px;
        cursor: pointer;
        transform: translateY(-5px);
        .delete-button {
            display: block;
            cursor: pointer;
            transform: translateY(-5px);
        }
    }
}

.profile-delete-button {
  height: 13px;
  display: none;
  width: 13px;
  border-radius: 50%;
  background-color: #BF3131;
  left: 100px;
  top: 10px;
  position: absolute;
  &:hover {
      background-color: #7D0A0A;
  }
}

.profile-access-button {
  padding-right: 15px;
  color: grey;
  font-weight: 900;
  transition: all 0.3s ease 0s;
  &:hover {
      cursor: pointer;
      color: #00264D;
      font-weight: 900;
      font-size: 14px;
  }
}

.maintenance-report-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 0.5rem;
  grid-auto-rows: minmax(160px, auto);
}

.six-col-display {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 0.5rem;
  grid-auto-rows: minmax(160px, auto);
}

.seven-col-display {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 0.5rem;
  grid-auto-rows: minmax(160px, auto);
}

.three-col-display {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  grid-auto-columns: auto;
  grid-auto-rows: minmax(auto, 330px);
}

.three-col-display-mold {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  grid-auto-columns: auto;
  grid-auto-rows: minmax(100px, auto);
}

.two-col-display {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  grid-auto-columns: auto;
  grid-auto-rows: minmax(auto, 330px);
}


.two-coldrm-displaymachineoutput {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  grid-auto-columns: auto;
  grid-auto-rows: minmax(auto, auto);
}

.one-coldrm-displaymachineoutput {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  grid-auto-columns: auto;
  grid-auto-rows: minmax(auto, auto);
}

.three-coldrm-displaymachineoutput {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  grid-auto-columns: auto;
  grid-auto-rows: minmax(auto, auto);
}

.kpi-dash-display {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
  grid-auto-columns: auto;
  grid-auto-rows: minmax(auto, auto);
}

.production-daily-output {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  grid-auto-columns: auto;
  grid-auto-rows: minmax(100px, auto);
}

.ui.statistic+.ui.statistic {
    margin: 0 !important;
}

.ui.statistic {
    display: inline-flex;
    flex-direction: column;
    margin: 0 !important;
    max-width: auto;
}


.form-field-disabled {
  pointer-events: none;
  opacity: 70%;
}

.hover-blue {
  color: #0b60B0;
  &:hover {
    background-color: #0b60B0;
    color: beige;
  }
}

.toolmanagement-btn {
  background-image: linear-gradient(to right, #000428 0%, #004e92  100%) !important;
  transition: 0.5 s !important;
  color: white !important;
  box-shadow: 0 0 20px #eee;
  display: block;
}

.toolmanagement-btn-g {
  background-image: linear-gradient(to right, #000428 0%, #4caf50  100%) !important;
  transition: 0.5 s !important;
  color: white !important;
  box-shadow: 0 0 20px #eee;
  display: block;
}

.toolmanagement-btn-r {
  background-image: linear-gradient(to right, #000428 0%, red  100%) !important;
  transition: 0.5 s !important;
  color: white !important;
  box-shadow: 0 0 20px #eee;
  display: block;
}

.toolmanagement-btn-disabled {
  background-image: linear-gradient(to right, #555 0%, #aaa 100%) !important;
  transition: 0.5s !important;
  color: #f0f0f0 !important;
  box-shadow: 0 0 15px #ccc;
  display: block;
  cursor: not-allowed;
  opacity: 0.8;
}

.gradient-btn {
  background-image: linear-gradient(to right, #000428 0%, #004e92  100%) !important;
  transition: 0.5 s !important;
  color: white !important;
  box-shadow: 0 0 20px #eee;
  display: block;
}

.gradient-btn-g {
  background-image: linear-gradient(to right, #000428 0%, #4caf50  100%) !important;
  transition: 0.5 s !important;
  color: white !important;
  box-shadow: 0 0 20px #eee;
  display: block;
}

.gradient-btn-r {
  background-image: linear-gradient(to right, #000428 0%, red  100%) !important;
  transition: 0.5 s !important;
  color: white !important;
  box-shadow: 0 0 20px #eee;
  display: block;
}

.menuactiveitembordercolor {
  &:active {
    background-color: transparent !important;
    box-shadow: none !important;
    border-color: blue !important;
    font-weight: 700 !important;
    color: rgba(0, 0, 0, .95) !important;
  }
}

.formbuilder-checkpoints {
  max-height: 300px !important;
  overflow-y: auto !important;
  &::-webkit-scrollbar:vertical {
    display: block;
    width: 5px;
    border-radius: 1rem;
  }
  &::-webkit-scrollbar:horizontal {
    display: none;
  }
}

.formbuilder-list {
  max-height: 150px !important;
  overflow-y: auto !important;
  &::-webkit-scrollbar:vertical {
    display: block;
    width: 5px;
    border-radius: 1rem;
  }
  &::-webkit-scrollbar:horizontal {
    display: none;
  }
}

.media-select-digitalsignage {
  max-height: calc(100vh - 100px) !important;
  overflow-y: scroll !important;
  display: grid;
  grid-row-gap: 0.5rem;
  border-radius: 0.5rem;
  position: absolute;
  right: 10px;
  &::-webkit-scrollbar:vertical {
    display: block;
    width: 5px;
    border-radius: 1rem;
  }
  &::-webkit-scrollbar:horizontal {
    display: none;
  }
}

.table-scroll {
  max-width: 1200px !important;
  overflow-x: auto !important;
  &::-webkit-scrollbar:vertical {
    display: none;
  }
  &::-webkit-scrollbar:horizontal {
     display: block;
     height: 5px;
     border-radius: 1rem;
  }
}

.vertical-scroll {
  max-width: 1200px !important;
  overflow-x: auto !important;
  &::-webkit-scrollbar:vertical {
    display: none;
  }
  &::-webkit-scrollbar:horizontal {
     display: block;
     height: 5px;
     border-radius: 1rem;
  }
}



.integrations-api-list {
  display: flex;
  gap: 1rem;
  max-width: 1200px !important;
  overflow-x: auto !important;
  margin: 0px !important;
  &::-webkit-scrollbar:vertical {
    display: none;
  }
  &::-webkit-scrollbar:horizontal {
     display: block !important;
     height: 5px !important;
     border-radius: 1rem !important;
  }
}

.album-remote-control {
  max-width: 100% !important;
  overflow-x: auto !important;
  margin: 0px !important;
  &::-webkit-scrollbar:vertical {
    display: none;
  }
  &::-webkit-scrollbar:horizontal {
     display: block !important;
     height: 5px !important;
     border-radius: 1rem !important;
  }
}

.album-remotecontrol-mediadisabled {
  filter: opacity(0.4);
}

.signage-remotecontrol-imagepreview {
  transform: scale(2);
  transition: all 0.3s ease-in;
  position: absolute;
  z-index: 999;
  top: 0;
}

.integrations-api-item {
  border-radius: 0.5rem;
  padding: 10px;
  margin: 0px !important;
  border: 2px solid #ddd;
  &:hover {
    background: #ddd !important;
  }
}

.loader {
  position: fixed;
  z-index: 3;
  bottom: 50%;
  left: 50%;
  color: black;
}

.album-pos-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.signage-album-p {
  position: relative;
  width: 100%;
  height: calc(100vh - 20px);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.signage-album-l {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.control-p {
  position: absolute;
  width: 100vh;
  z-index: 100;
  bottom: 0px;
  opacity: 100;
  transform: rotate(-90deg);
  transform-origin: 40px 40px;
  transition: all 0.5s ease-in-out;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(8px);
  border-radius: 0.5rem;
}

.control-l {
  position: absolute;
  width: 100%;
  z-index: 100;
  opacity: 100;
  transition: all 0.5s ease-in-out;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(8px);
  border-radius: 0.5rem;
}

.controls-invisible {
  position: absolute;
  width: 100%;
  z-index: 100;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.carousel-p {
  transition: transform 0.5s ease-in-out;
  transform: rotate(-90deg);
  transform-origin: center;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #E5E1DA;
  border-radius: 0.5rem;
}

.carousel-l {
  transition: transform 0.5s ease-in-out;
  transform: rotate(0deg);
  transform-origin: center;
  width: 100%;
  height: calc(100vh - 20px);
  object-fit: contain;
  background: #E5E1DA;
  border-radius: 0.5rem;
}

.carousel-slide {
  display: none;
}

.carousel-slide.active {
  display: block;
}

.carousel-button-l {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1;
}

.carousel-button-p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1;
}

.carousel-button-l.prev {
  left: 10px;
}

.carousel-button-l.next {
  right: 10px;
}

.carousel-button-p.top {
  top: 10px;
}

.carousel-button-p.bottom {
  bottom: 10px;
}

.loader-style {
  position: fixed !important;
  z-index: 3 !important;
  bottom: 50% !important;
  left: 50% !important;
  color: black !important;
}


.profile-disabled {
  display: none;
}

.text-link {
  color: blue !important; 
  textDecoration: underline !important;
  cursor: pointer !important;
}

.ui.search > .results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  transform-origin: center top;
  white-space: normal;
  text-align: left;
  text-transform: none;
  background: #fff;
  margin-top: .5em;
  width: 18em;
  border-radius: .28571429rem;
  box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);
  border: 1px solid #d4d4d5;
  z-index: 998;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}


.add-button {
  position: fixed;
  right: 20px;
  bottom: 40px;
  z-index: 4;
}