* {
  box-sizing: border-box;
  color: var( --color-text-contraste);
  font-family: var(--font-family);

  &::-webkit-scrollbar {
    width: 3px;
  }

  &::-webkit-scrollbar-track {
      background: #f1f1f1;
      width: 6px;
  }

  &::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 10px;
      width: 6px;
  }

  &::-webkit-scrollbar-thumb:hover {
      background: #555;
      width: 6px;
  }
}

html {
	width: 100%;
	height: 100%;
	padding: 10px;
	scroll-behavior: smooth;
	background-color: var(--background-theme-S360);
  transition: background-color .3s;
}

#root{
  /* overflow: hidden; */
  height: calc(100vh - 20px);
  width: 100%;
}

.Container_View{
  gap: 4px;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template:
    "rowSelectors rowTurn rowSummary" 100px
    "rowAnalysisView rowAnalysisView rowAnalysisView" auto
    "rowParams rowParams rowParams" 38% / 20% 17% calc(63% - 10px)
  ;

  .rowSelectors{
    width: 100%;
    height: 100%;
    grid-area: rowSelectors;

    &.returnSeg{
      & .return-btn{
        font-size: var(--font-size-normal-S360);
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 2;
        width: 100%;
        height: calc(100% - 10px);
        border: none;
        color: var(--color-light-S360);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px;
      }
      & .newMeasureBtn{
        font-size: var(--font-size-normal-S360);
        height: calc(100% - 10px);
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 2;
        grid-column-end: 3;
      }
    }
  }

  .rowTurn{
    width: 100%;
    height: 100%;
    grid-area: rowTurn;
  }

  .rowSummary{
    width: 100%;
    height: 100%;
    grid-area: rowSummary;
  }

  .rowAnalysisView{
    width: 100%;
    height: 100%;
    grid-area: rowAnalysisView;
  }

  .rowParams{
    width: 100%;
    height: 100%;
    grid-area: rowParams;
  }



  @media only screen and (max-width: 1280px){
    grid-template:
    "rowSelectors rowTurn" 130px
    "rowSummary rowSummary" 130px
    "rowAnalysisView rowAnalysisView" 800px
    "rowParams rowParams" 320px / 352px auto;
  }

  @media only screen and (max-width: 500px){
    grid-template:
    "rowSelectors" 130px
    "rowTurn" 130px
    "rowSummary" auto
    "rowAnalysisView" 100%
    "rowParams" 580px /100%;
  }
}

.return-btn{
  background-color: #1B9FB6;
  color: white;
  border-radius: var(--border-radius-S360);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  /* width: 180px; */
  border: none;
  font-weight: 600;
  padding: 4px;
  & span.return-icon{
    font-size: var(--font-size-normal-S360);
  }
  &:hover{
    opacity: 0.75;
  }
}


.basic-input--disabled .block-icon{
  font-family: 'Material Symbols Outlined' !important;
}


.statusHolderValue{
  position: relative;
  text-align: left;
  padding-left: 50px;

  .status-label{
    position: absolute;
    top: -7px;
    right: 0;
    width: 78px;
  }

  @media only screen and (max-width: 500px){
    top: 12px;
    .status-label{
      top: -24px;
    }
  }

}


.icon {
  margin-right: 10px !important;
  padding-right: 0 !important;
}

.spinner {
  color: #3498db !important;
  animation: spin 2s ease infinite;
  transform-origin: center;
  text-transform: capitalize !important;
  font-size: calc(var(--font-size-normal-S360) + 1px) !important;
  font-weight: bold !important;
}

.swal2-popup.swal2-loading {
  color: var(--color-text-S360);
  padding: 20px !important;
  background-color: var(--color-primary) !important;

  & .swal2-loading {
    background-color: var(--color-primary) !important;
  }

	& .swal2-contentwrapper {
		& h2 {
			color: var(--color-text);
		}
		& div {
			color: var(--color-text);
		}
	}

  & .swal2-buttonswrapper {
    background: var(--color-primary);
  }
}

[aria-describedby="swal2-content"] {
  background-color: var(--background-S360) !important;
  .swal2-contentwrapper{
    >*{
      color: var(--color-text-S360) !important;
    }
  }
}

/** Dropdown Fonts**/
.select-menu{
  font-size: var(--font-size-normal-S360);
  & .options, .select-btn, .sBtn-title, .sBtn-text{
    font-size: var(--font-size-normal-S360);
  }

  & .sBtn-title.smaller{
    font-size: var(--font-size-small-S360);
  }

  & .option .option-text{
    font-size: var(--font-size-normal-S360);
  }
}

/** DateRangePicker Fonts**/
.daterangepicker{
  font-size: var(--font-size-normal-S360);
  & .ranges li{
    font-size: var(--font-size-normal-S360);
  }

  & .calendar-table th, .calendar-table td {
    font-size: var(--font-size-normal-S360);
  }

  & select.monthselect, select.yearselect {
    font-size: var(--font-size-normal-S360);
  }

}

/*** Styles to change the font-size in low resolutions ***/
@media (max-height: 720px ) and (max-width: 1370px) {
  :root{
    --font-size-normal-S360: 10px;
    --font-size-small-S360: 8px;
    --font-size-large-S360: 12px;
    --font-size-extra-large-S360: 14px;
  }
 }


@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}