@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}

.basic-input {
  & label {
    font-family: var(--font-family-2);
    white-space: inherit !important;
  }
}

html {
	width: 100%;
	height: 100%;
	/* padding: 10px; */
	scroll-behavior: smooth;
	background-color: var(--background-S360);
  transition: background-color var(--time-transition-S360);
}

body {
	overflow: hidden;
	/* height: 100%; */
  padding: var(--padding);

  & .select-menu {
    & .sBtn-title {
      cursor: pointer;
    }
    & .options {
      & .scroll {
        & .container-options {
          max-height: 145px;
        }
      }
    }
  }
}

.swalOPC {
  & .swalOPC-header {
    & .swalOPC-title {
      align-items: center;
      display: flex;
      gap: var(--spacing-S360-2);
    }
  }
}

.popover-opc {
  & .popover-body {
    color: var(--color-text-S360);
  }
}

/* Estilos para poner la flecha en los popover */
.popoverLimits .arrow::after, .popoverLimits .arrow::before,
.popoverCantidad .arrow::after, .popoverCantidad .arrow::before {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}
.bs-popover-auto[x-placement^=left], .bs-popover-left {
  margin-right: .5rem;
}
.bs-popover-auto[x-placement^=left]>.arrow, .bs-popover-left>.arrow {
  right: calc(-.5rem - 1px);
  width: .5rem;
  height: 1rem;
  margin: .3rem 0;
}
.bs-popover-auto[x-placement^=right]>.arrow::before, .bs-popover-right>.arrow::before {
  left: 0;
  border-width: .5rem .5rem .5rem 0;
  border-right-color: rgba(0, 0, 0, .25);
}
.bs-popover-auto[x-placement^=left]>.arrow::before, .bs-popover-left>.arrow::before {
  right: 0;
  border-width: .5rem 0 .5rem .5rem;
  border-left-color: rgba(0, 0, 0, .25);
}
.bs-popover-auto[x-placement^=right]>.arrow::after, .bs-popover-right>.arrow::after {
  left: 1px;
  border-width: .5rem .5rem .5rem 0;
  border-right-color: #fff;
}
.bs-popover-auto[x-placement^=left]>.arrow::after, .bs-popover-left>.arrow::after {
  right: 1px;
  border-width: .5rem 0 .5rem .5rem;
  border-left-color: #fff;
}

/* Estilos para poner la flecha en los tooltip */
.bs-tooltip-auto[x-placement^=right], .bs-tooltip-right {
  padding: 0 .4rem;
}
.bs-tooltip-auto[x-placement^=left], .bs-tooltip-left {
  padding: 0 .4rem;
}
.bs-tooltip-auto[x-placement^=right] .arrow, .bs-tooltip-right .arrow {
  left: 0;
  width: .4rem;
  height: .8rem;
}
.bs-tooltip-auto[x-placement^=left] .arrow, .bs-tooltip-left .arrow {
  right: 0;
  width: .4rem;
  height: .8rem;
}
.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}
.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
  right: 0;
  border-width: .4rem .4rem .4rem 0;
  border-right-color: #000;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
  left: 0;
  border-width: .4rem 0 .4rem .4rem;
  border-left-color: #000;
}

.container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto calc(100% - 33px);
  gap: var(--spacing-S360-2);
  grid-template-areas:
    "header"
    "main";
  height: calc(100vh - var(--padding)* 2);
}

#report_container {
  width: 100%;
  height: 100%;

  & .table-wrapper {
    height: 100%;
  }
}

.ContainerTable {
  & tbody {
    & .CumplimientoCell {
      text-align: center;
      &[data_value="OK"] {
        background-color: var(--color-btn-limit-ok);
        color: var(--color-btn-limit-text-ok);
      }
      &[data_value="NOK"] {
        background-color: var(--color-btn-limit-nok);
        color: var(--color-btn-limit-text-nok);
      }
    }
  }
}