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

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


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

.Container_View{
  gap: 10px;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template:
    "rowSelectors" 68px
    "rowAnalysisView" calc(100% - 68px - 10px)/ 100%
  ;

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

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

  @media only screen and (max-width: 1280px){
    grid-template:
    "rowSelectors" 110px
    "rowAnalysisView" auto / 100%;
  }

  @media only screen and (max-width: 700px){
    grid-template:
    "rowSelectors" 225px
    "rowAnalysisView" auto / 100%;
  }

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

#returnSeg{
  display: flex;
  align-items: center;
  gap: 4px;
  color: white;
  border: none;
  padding: 10px 15px;
  height: 28px;
  background-color: #1B9FB6;
  border-radius: var(--border-radius-S360);
  cursor: pointer;
  gap: 4px;
  & span{
    font-size: var(--font-size-normal-S360);
  }
  &:hover{
    opacity: 0.75;
  }
}


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

.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: var(--font-size-normal-S360) !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;
    }
  }
}

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

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

/** Input Fonts **/
.basic-input{
  & span {
    font-family: 'Material Symbols Outlined';
    font-size: calc(var(--font-size-normal-S360) + 2px) !important;
  }
  overflow: hidden;
}