/* td>div {
    white-space: nowrap;
} */

.admin-card {
  /* background-color: rgb(52, 58, 64, 0.15); */
  background-image: linear-gradient(217deg, #7b7f83 0%, #ffffff 25%) !important
}

.blur-card {
  filter: blur(3px);
  opacity: 0.5;
}

.col-md-12 {
  display: grid;
}

.collapsing {
  -webkit-transition: none;
  transition: none;
  display: none;
}

/* -------Autocomplete--------- */
.autocomplete-subitem {
  font-size: 11px;
  font-style: italic;
}

/*.ui-menu .ui-menu-item:hover, .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
    background-color: #86AADA !important;
    font-weight: bold !important;
}*/
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: #86AADA !important;
  font-weight: bold !important;
  color: #ffffff;
}

/* -------Datatable--------- */
.dataTables_filter input {
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: -internal-light-dark-color(black, white);
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  -webkit-appearance: textfield;

  -webkit-rtl-ordering: logical;
  cursor: text;
  margin: 0em;
  font: 400 14px system-ui;
  padding: 1px;
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

/*.paginate_button.current{
    color: #fff !important;
    background-color: #6c757d !important;;
    border-color: #6c757d !important;;
}*/

.nhr {
  border: 0;
  clear: both;
  display: block;
  width: 100%;
  background-color: #b5b5b5ab;
  height: 1px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* -------Timeline--------- */

.timeline {
  margin-top: 20px;
  position: relative;

}

.timeline:before {
  position: absolute;
  content: '';
  width: 4px;
  height: calc(100% + 50px);
  background: rgb(138, 145, 150);
  background: -moz-linear-gradient(left, rgba(138, 145, 150, 1) 0%, rgba(122, 130, 136, 1) 60%, rgba(98, 105, 109, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(138, 145, 150, 1) 0%, rgba(122, 130, 136, 1) 60%, rgba(98, 105, 109, 1) 100%);
  background: linear-gradient(to right, rgba(138, 145, 150, 1) 0%, rgba(122, 130, 136, 1) 60%, rgba(98, 105, 109, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8a9196', endColorstr='#62696d', GradientType=1);
  left: 14px;
  top: 5px;
  border-radius: 4px;
}

.timeline-month {
  position: relative;
  padding: 4px 15px 4px 35px;
  background-color: #387bd8;
  display: inline-block;
  width: auto;
  border-radius: 40px;
  border: 1px solid #17191B;
  border-right-color: black;
  margin-bottom: 30px;
  color: white;
}

.timeline-month span {
  position: absolute;
  top: -1px;
  left: calc(100% - 10px);
  z-index: -1;
  white-space: nowrap;
  display: inline-block;
  background-color: #111;
  padding: 4px 10px 4px 20px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  border: 1px solid black;
  box-sizing: border-box;
}

.timeline-month:before {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  background: rgb(138, 145, 150);
  background: -moz-linear-gradient(top, rgba(138, 145, 150, 1) 0%, rgba(122, 130, 136, 1) 60%, rgba(112, 120, 125, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(138, 145, 150, 1) 0%, rgba(122, 130, 136, 1) 60%, rgba(112, 120, 125, 1) 100%);
  background: linear-gradient(to bottom, rgba(138, 145, 150, 1) 0%, rgba(122, 130, 136, 1) 60%, rgba(112, 120, 125, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8a9196', endColorstr='#70787d', GradientType=0);
  border-radius: 100%;
  border: 1px solid #17191B;
  left: 5px;
}

.timeline-section {
  padding-left: 35px;
  display: block;
  position: relative;
  margin-bottom: 30px;
}

.timeline-date {
  margin-bottom: 15px;
  padding: 2px 15px;
  background: linear-gradient(#74cae3, #5bc0de 60%, #4ab9db);
  position: relative;
  display: inline-block;
  border-radius: 20px;
  border: 1px solid #17191B;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.timeline-section:before {
  content: '';
  position: absolute;
  width: 30px;
  height: 1px;
  background-color: #444950;
  top: 12px;
  left: 20px;
}

.timeline-section:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: linear-gradient(to bottom, rgba(138, 145, 150, 1) 0%, rgba(122, 130, 136, 1) 60%, rgba(112, 120, 125, 1) 100%);
  top: 7px;
  left: 11px;
  border: 1px solid #17191B;
  border-radius: 100%;
}

.timeline-section .col-sm-4 {
  margin-bottom: 15px;
}

.timeline-box {
  position: relative;
  border-radius: 15px;
  border-top-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border: 1px solid #17191B;
  transition: all 0.3s ease;
  overflow: hidden;
}

.timeline-box-green {
  color: white;
  background-color: #229c20;
}

.timeline-box-blue {
  color: white;
  background-color: #387bd8;
}

.timeline-box-yellow {
  color: black;
  background-color: #dcc41c;
}

.box-icon {
  position: absolute;
  right: 5px;
  top: 0px;
}

.box-title {
  padding: 5px 15px;
  border-bottom: 1px solid #17191B;
}

.box-title i {
  margin-right: 5px;
}

.box-content {
  padding: 5px 15px;
  background-color: #deefff;
  color: #666;
}

.box-content strong {
  color: #666;
  font-style: italic;
  margin-right: 5px;
}

.box-item {
  margin-bottom: 5px;
}

.box-footer {
  padding: 5px 15px;
  border-top: 1px solid #17191B;
  text-align: right;
  font-style: italic;
}

/* ---------------- */

.selected {
  background-color: lightblue !important;
}

.drawingBuffer {
  position: absolute;
}

#camera,
#camera--view,
#camera--sensor,
#camera--output {
  position: fixed;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#camera--view,
#camera--sensor,
#camera--output {
  transform: scaleX(-1);
  filter: FlipH;
}

#camera--trigger {
  width: 200px;
  background-color: black;
  color: white;
  font-size: 16px;
  border-radius: 30px;
  border: none;
  padding: 15px 20px;
  text-align: center;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
  position: fixed;
  bottom: 30px;
  left: calc(50% - 100px);
}

.taken {
  height: 100px !important;
  width: 100px !important;
  transition: all 0.5s ease-in;
  border: solid 3px white;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
  top: 20px;
  right: 20px;
  z-index: 2;
}




.cell-button {
  width: 90px;
}

.subheading-inside {
  width: 45%;
  margin: auto;
  margin-bottom: 30px;
}

.option-text {
  width: 75px
}

.barcode-option {
  display: inherit !important;
  align-items: center;
}

.logo-size-image {
  max-width: 300px;
}

.display-none {
  display: none !important
}

.selected-row {
  background-color: rgb(15, 48, 99, 0.3) !important;
}

.header-order-row {
  background-color: rgb(63, 106, 216, 0.3) !important;
}

.picked-row {
  background-color: rgb(0, 166, 80, 0.3) !important;
}


.display-grid {
  display: grid;
}

.left-margin {
  margin-left: auto;
}

.options-table {
  margin-left: auto;
  display: flex;
}

.cell-text-top {
  vertical-align: top;
}

.qb-editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.vertical-line {
  background-image: linear-gradient(#edeff3, #edeff3);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
  width: 100%;
}

.swatch-holder-md {
  width: 24px;
  display: list-item !important;
}

.vertical-line-blue {
  background-image: linear-gradient(#446dd0, #446dd0);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
  width: 100%;
}

.horizontal-line-fade {
  flex-grow: 1;
  border-bottom: 1px solid lightgrey;
  margin: 5px
}

.horizontal-line-full {
  flex-grow: 1;
  border-bottom: 1px solid rgba(68, 109, 208, 0.6);
  margin: 5px
}

.scrollable {
  position: absolute;
  height: calc(100% - 30px);
  width: 100%;
  overflow-y: auto;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(68, 109, 208, 0.2);
  border-right: 1.1em solid rgba(68, 109, 208, 0.2);
  border-bottom: 1.1em solid rgba(68, 109, 208, 0.2);
  border-left: 1.1em solid #0035b1;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

.small-loader,
.small-loader:after {
  border-radius: 50%;
  width: 2em;
  height: 2em;
}
.small-loader {
  margin: 10px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 0.2em solid rgba(68, 109, 208, 0.2);
  border-right: 0.2em solid rgba(68, 109, 208, 0.2);
  border-bottom: 0.2em solid rgba(68, 109, 208, 0.2);
  border-left: 0.2em solid #0035b1;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.disabled-content {
  pointer-events: none;
  opacity: 0.4;
}

.expand>img:hover {
  transition: 0.2s ease;
  transform: scale(2);
}

.database-connection {
  color: white;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .database-connection {
    font-size: 12px;
    margin: 0px 15px;
    line-height: 15px;
  }

  .header-mobile-open .app-header-right {
    overflow: scroll;
  }
}

/* .expand:hover span {
  display: none;
} */
.mandatory-empty .form-control{
  border-color: red;
  border-width: 2px;
}
.mandatory-empty label{
  color:red;
  font-weight: bold;
}
.label-mandatory::after{
  color:red ;
}
.invalid-input .form-control{
  border-color: red;
  border-width: 2px;
}
.interrogation-icon {
  padding: 15px;
  background-repeat: no-repeat;
  background-position: top;
  background-position-y: 3px;
  background-size: 50%;
  font-size: 0px;
  background-image: url('data:image/svg+xml, <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="93.936px" height="93.936px" viewBox="0 0 93.936 93.936" style="enable-background:new 0 0 93.936 93.936;" xml:space="preserve"><g><path d="M80.179,13.758c-18.342-18.342-48.08-18.342-66.422,0c-18.342,18.341-18.342,48.08,0,66.421 c18.342,18.342,48.08,18.342,66.422,0C98.521,61.837,98.521,32.099,80.179,13.758z M44.144,83.117 c-4.057,0-7.001-3.071-7.001-7.305c0-4.291,2.987-7.404,7.102-7.404c4.123,0,7.001,3.044,7.001,7.404 C51.246,80.113,48.326,83.117,44.144,83.117z M54.73,44.921c-4.15,4.905-5.796,9.117-5.503,14.088l0.097,2.495 c0.011,0.062,0.017,0.125,0.017,0.188c0,0.58-0.47,1.051-1.05,1.051c-0.004-0.001-0.008-0.001-0.012,0h-7.867 c-0.549,0-1.005-0.423-1.047-0.97l-0.202-2.623c-0.676-6.082,1.508-12.218,6.494-18.202c4.319-5.087,6.816-8.865,6.816-13.145 c0-4.829-3.036-7.536-8.548-7.624c-3.403,0-7.242,1.171-9.534,2.913c-0.264,0.201-0.607,0.264-0.925,0.173 s-0.575-0.327-0.693-0.636l-2.42-6.354c-0.169-0.442-0.02-0.943,0.364-1.224c3.538-2.573,9.441-4.235,15.041-4.235 c12.36,0,17.894,7.975,17.894,15.877C63.652,33.765,59.785,38.919,54.73,44.921z"/></g></svg>')
}
.connected-icon-text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 8px;
  width: 85px;
  flex: none;
  order: 0;
  flex-grow: 0;
}
.center-text {
  justify-content: center;
}
.check-icon {
  width: 16px;
  height: 16px;
  flex: none;
  order: 0;
  flex-grow: 0;
  margin-bottom: 16px;
}
.inventory-container .filter-box{
  display: none;
  position: absolute;
  width: 100%;
}

.inventory-container .filter-box div{
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 10px;
  top: 30px;
  box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
  border-radius: 4px;
  z-index: 9;
}
.inventory-container .filter-box div span{
  padding: 10px;
  user-select: none;
}
.inventory-container .filter-box div .title{
  font-weight: bold;
  background: #D9D9D9;
  border-radius: 2px;
  cursor: none;
  padding: 10px;
}
.inventory-container .filter-box div span:hover{
  background: #D9D9D9;
  border-radius: 2px;
  cursor: pointer;
}
.inventory-container .selected-period{
  background-image: url('data:image/svg+xml, <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.43084 2.24334L9.27459 1.39959C9.6407 1.03347 10.2343 1.03347 10.6004 1.39959C10.9665 1.7657 10.9665 2.3593 10.6004 2.72541L3.41609 9.90973C3.15175 10.1741 2.82572 10.3684 2.46745 10.4751L1.125 10.875L1.52489 9.53256C1.63161 9.17429 1.82592 8.84825 2.09026 8.58391L8.43084 2.24334ZM8.43084 2.24334L9.75 3.5625" stroke="%230F172A" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position-x: right;
  background-size: 20px;
  background-position-y: top;
  padding-right: 25px;
  margin: 10px 0;
  font-weight: bold;
  cursor: pointer;
  text-decoration: underline;
  user-select: none;
  font-size:18px;
}
.inventory-container .filter-info-resumed{
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}
.inventory-container .filter-info-resumed span i{
  font-style: normal;
  margin-left:5px;
  font-weight: bold;
}
.inventory-container .filter-info-resumed span i.positive-inventory{
  color:#3AC47D;
}
.inventory-container .filter-info-resumed span i.negative-inventory{
  color:#FF000D;
}
.inventory-container #from-date,.inventory-container #to-date{
  width:1px;
  height:1px;
  border: none;
}
.inventory-container #from-date:focus,.inventory-container #to-date:focus{
  box-shadow: none;
}
.page-title-heading.gray-subtitle{
  color:#787D7C;
}
.page-title-heading.gray-subtitle b{
  color:#000;
}
.integration-background {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0.25);
  visibility: hidden;
}
.integration-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 16px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 530px;
  height: 243.6px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4.8px;
  visibility: hidden;
}
.integration-info-header {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding: 12px 16px;
  gap: 203px;
  width: 528px;
  height: 56px;
  background: #F8F9FA;
  border-bottom: 0.8px solid #E9ECEF;
  border-radius: 4.8px 4.8px 0px 0px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}
.info-header-content{
  width: 278px;
  height: 27px;
  font-family: 'Segoe UI';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  display: flex;
  align-items: center;
  color: #495057;
  flex: none;
  order: 0;
  flex-grow: 0;
}
.x-icon {
  width: 17px;
  height: 32px;
  font-family: 'Segoe UI';
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  display: flex;
  align-items: center;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  flex: none;
  order: 1;
  flex-grow: 1;
}
.x-icon:hover {
  cursor: pointer;
}
.integration-info-content {
  width: 498px;
  height: 90px;
  font-family: 'Segoe UI';
  font-style: normal;
  font-weight: 400;
  font-size: 14.08px;
  line-height: 30px;
  display: flex;
  align-items: center;
  color: #495057;
  flex: none;
  order: 1;
  flex-grow: 0;
}
.integration-info-content span {
  color: #3F6AD8;
}
.integration-info-button {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 16.8px 16px 16px 313.925px;
  gap: 8px;
  width: 528px;
  height: 63px;
  background: #F8F9FA;
  border-top: 0.8px solid #E9ECEF;
  border-radius: 0px 0px 4px 4px;
  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
}
.integration-info-button button {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 7.60001px 12.8125px 8.19999px 13.8px;
  width: 69.61px;
  height: 32.8px;
  background: #3F6AD8;
  border: 1px solid #3F6AD8;
  border-radius: 4px;
  flex: none;
  order: 0;
  flex-grow: 0;
}
.integration-info-button button:hover {
  cursor: pointer;
}
.integration-info-button button p {
  width: 43px;
  height: 17px;
  font-family: 'Segoe UI';
  font-style: normal;
  font-weight: 400;
  font-size: 12.8px;
  line-height: 17px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #FFFFFF;
  flex: none;
  order: 0;
  flex-grow: 0;
}
.explain-delete-modal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px;

  width: 100%;
  height: 57px;

  background: #3F6AD8;
  box-shadow: 0px 7.5px 35px rgba(4, 9, 20, 0.03), 0px 15px 22.5px rgba(4, 9, 20, 0.03), 0px 4px 8.5px rgba(4, 9, 20, 0.05), 0px 2px 3px rgba(4, 9, 20, 0.03);
  border-radius: 4px;

  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}
.explain-text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px;
  gap: 15px;

  width: 1347.2px;
  height: 25px;

  flex: none;
  order: 0;
  flex-grow: 1;
}
.explain-text p {
  width: 608px;
  height: 22px;

  font-family: 'Segoe UI';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;

  display: flex;
  align-items: center;
  text-align: center;

  color: #FFFFFF;

  flex: none;
  order: 0;
  flex-grow: 0;
  margin-bottom: 0;
}

ul.ui-autocomplete{
  z-index: 100000000;
}

.estocker-helper-highlight{
  border-color: #3f6ad8 !important;
  border-width: 0.3rem !important;
}
.estocker-helper-highlight-green{
  border-color: #3fd893 !important;
  border-width: 0.4rem !important;
}

.left-success-border {
  border-left: 5px solid #3ac47d !important
}

.deactivated-svg{
  fill: #c6c6c6 !important;
  stroke: #8d8b8b !important;
}

.empty-svg{
  opacity: 0.85;
  fill: #2b2b2b !important;
}

.deactivated-svg-text{
  fill: #8d8b8b !important;
}

.highlight-svg{
  stroke: #00ff6e !important;
  stroke-width: 5px !important;
}

.preference-drawing-reference{
  border-color: #d83f3f !important;
  border-width: 5px !important;
}

.dev-card {
  background-image: linear-gradient(217deg, #ffffff 0%, #aab8c2 0%) !important
}

.clickable-cell {
  cursor: pointer;
}

.unit-label {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  font-size: 14px;
  pointer-events: none;
}

.chip {
  display: inline-block;
  padding: 0.25em 0.75em;
  margin: 0 0.25em 0.25em 0;
  background: #e9ecef;
  border-radius: 16px;
  font-size: 0.95em;
}
.chip .close {
  margin-left: 0.5em;
  cursor: pointer;
}

.mobile-menu-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 6rem;
  margin: 0rem 0rem 0rem 0.5rem;
  height: 100%;
}

.mobile-menu-grid-item-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 4rem !important;
  opacity: 1 !important;
  font-size: 2rem !important;
  padding-left: 45%;
  padding-bottom: 30%;
}

 /* Calendar container styling */


/* Calendar event styling */
.fc-event {
  border-radius: 3px;
  border: none;
  padding: 2px 4px;
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.fc-event:hover {
  opacity: 0.85;
}

/* Calendar header buttons */
.fc-button {
  background-color: #3f6ad8;
  border-color: #3f6ad8;
  color: #fff;
  text-shadow: none;
  box-shadow: 0 0.125rem 0.625rem rgba(63,106,216,0.4), 0 0.0625rem 0.125rem rgba(63,106,216,0.5);
}

.fc-button:hover {
  background-color: #2f59c8;
  border-color: #2f59c8;
}

.fc-button:active,
.fc-button.fc-state-active {
  background-color: #1f49b8;
  border-color: #1f49b8;
}

.fc-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Calendar table styling */
.fc-view-container {
  background: #fff;
}

.fc-day-header {
  padding: 10px 0;
  font-weight: 600;
  color: #495057;
}

.fc-day-number {
  padding: 5px;
  color: #495057;
}

.fc-today {
  background-color: #f8f9fa !important;
}

.fc-day-grid-event {
  margin: 1px 2px;
}

/* Week view time styling */
.fc-time-grid-event {
  border-radius: 3px;
}

/* Modal styling adjustments */
#event-details-modal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

#event-details-modal .modal-header .close {
  color: #fff;
  opacity: 0.8;
}

#event-details-modal .modal-header .close:hover {
  opacity: 1;
}

#event-details-modal .modal-title {
  font-weight: 600;
}

#event-details-modal .table {
  margin-bottom: 0;
}

#event-details-modal .table thead th {
  border-top: none;
  background-color: #f8f9fa;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Calendar responsiveness */
@media (max-width: 768px) {
  #calendar-container {
      padding: 10px;
  }

  .fc-toolbar {
      font-size: 12px;
  }

  .fc-button {
      padding: 4px 8px;
      font-size: 12px;
  }

  .fc-event {
      font-size: 10px;
  }
}

/* Event limit popover */
.fc-more-popover {
  z-index: 1050;
}

.fc-more-popover .fc-event-container {
  padding: 10px;
}

.fc-today {
  background-color: rgba(255, 109, 1, 0.3) !important;
}

.fc-past-day {
  background-color: #4b4b4b50 !important;
  opacity: 0.3 !important;
}

/* ── TV Dashboard Mode ─────────────────────────────────── */
#tv-dashboard {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(145deg, #0b1622 0%, #111d30 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #ffffff;
  font-family: inherit;
}
.tv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  gap: 16px;
}
.tv-header-title    { font-size: 50px; font-weight: 700; color: #fff; margin: 0; line-height: 1.2; }
.tv-header-subtitle { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.tv-header-date     { font-size: 50px; font-weight: 700; color: #fff; white-space: nowrap; }
.tv-active-filters  { margin-top: 4px; min-height: 20px; text-align: center; }
.tv-filter-badge {
  display: inline-block;
  background: rgba(255,255,255,0.13);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  color: #fff;
  margin: 2px 2px;
}
.tv-total-label { font-size: 11px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 1px; text-align: right; }
.tv-total-count { font-size: 50px; font-weight: 800; color: #fff; line-height: 1.1; text-align: right; }
/* ── Body ── */
.tv-body {
  display: flex;
  flex: 1;
  padding: 14px;
  gap: 14px;
  overflow: hidden;
  min-height: 0;
}
/* ── Filters sidebar (hidden in TV mode) ── */
.tv-sidebar { display: none; }
.tv-tag-hidden { display: none !important; }
/* ── Cards grid ── */
.tv-cards-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 14px;
  min-width: 0;
  min-height: 0;
}
.tv-card {
  background: rgb(30, 30, 30);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 12px 18px 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  margin: 3rem;
}
.tv-card:hover { background: rgba(255,255,255,0.09); transform: translateY(-2px); }
.tv-card-accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 12px 12px 0 0; }
.tv-card-label    { font-size: 35px; font-weight: 700; margin-top: 4px; line-height: 1.2; }
.tv-card-sublabel { font-size: 10px; color: rgba(255,255,255,0.38); margin-bottom: 4px; }
.tv-card-count {
  font-size: clamp(42px, 5.5vw, 100px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  flex: 1;
  display: flex;
  align-items: center;
}
.tv-card-footer { margin-top: auto; }
.tv-card-pct  { font-size: clamp(14px, 1.6vw, 22px); font-weight: 600; margin-bottom: 5px; line-height: 1; opacity: 0.85; }
.tv-card-bar-track { height: 4px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.tv-card-bar-fill  { height: 100%; border-radius: 3px; transition: width 0.55s ease; }


#product-dimensions-card .dimension-illustration {
    max-width: 500px;
    margin: auto;
    min-height: 340px;
}
#product-dimensions-card svg {
    width: 100%;
    height: 320px;
}
#product-dimensions-card .box-face {
    fill: #f5f7fb;
    stroke: #d6d9e3;
    stroke-width: 2;
}
#product-dimensions-card .box-face.box-top {
    fill: #eef3ff;
}
#product-dimensions-card .box-face.box-side {
    fill: #e2e8fa;
}
#product-dimensions-card .box-face.box-base {
    fill: #f0f3fb;
}
#product-dimensions-card .dimension-arrow line,
#product-dimensions-card .dimension-arrow polyline {
    stroke: #6c757d;
    stroke-width: 2;
}
#product-dimensions-card .dimension-arrow polygon {
    fill: #6c757d;
}
#product-dimensions-card .dimension-arrow text {
    fill: #495057;
    font-size: 12px;
    font-weight: 600;
}
#product-dimensions-card .dimension-arrow:hover line,
#product-dimensions-card .dimension-arrow:hover polyline,
#product-dimensions-card .dimension-arrow:hover text {
    stroke: #007bff;
    fill: #007bff;
    cursor: pointer;
}
#product-dimensions-card .metric-chip {
    width: 100%;
    text-align: left;
    border: 1px solid #e0e5ec;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: #f8f9fa;
    transition: all 0.2s ease;
}
#product-dimensions-card .metric-chip:hover {
    background: #eef5ff;
    border-color: #4e88ff;
}
#product-dimensions-card .metric-label {
    display: block;
    font-size: 0.85rem;
    color: #6c757d;
}
#product-dimensions-card .metric-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: #212529;
}
#product-dimensions-card .dimension-hint {
    font-size: 0.85rem;
}
.info-card .section-label,
.parameters-card .section-label {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 0.75rem;
    font-weight: 600;
    color: #8891a4;
}
.info-card {
    background: transparent;
    border: none;
    box-shadow: none;
}
.info-card .card-body {
    padding: 1rem 0 0.5rem;
}
.info-card .info-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: #1f2432;
}
.info-card .info-header {
    gap: 0.75rem;
}
.info-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.info-pill {
    background: #f3f5fa;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    color: #4a5365;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.info-pill .pill-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: .06em;
    margin-right: 0.25rem;
    color: #6c757d;
}
.pill-copy {
    border: none;
    background: transparent;
    color: #6e78c4;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pill-copy:hover {
    color: #3747a0;
}
.info-pill a {
    color: #2b4bb5;
    font-weight: 600;
}
.info-grid .info-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 0.7rem;
    color: #9aa2b1;
    margin-bottom: 0.25rem;
}
.info-grid .info-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2b2f3b;
    margin: 0;
}
.info-description {
    padding: 0.5rem 0.75rem;
    background: #fbfcfe;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #4f5566;
    margin-top: 0.25rem;
}
.parameters-card {
    background: transparent;
    border: none;
    box-shadow: none;
}
.parameters-card .card-body {
    padding: 1rem 0 0;
}
.parameters-card .button-stack .btn {
    margin-bottom: 0.45rem;
    font-size: 0.85rem;
    border-radius: 8px;
}
.parameters-card .parameter-item {
    margin-bottom: 1rem;
}
.parameters-card .parameter-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #97a0b4;
    margin-bottom: 0.25rem;
}