/* This file is for your main application css. It is imported in the layout */

@import "./reset.css";
@import "./page/index.css";

@import "./instruments/components/button.css";
@import "./instruments/components/tags.css";

@import "./live/csv_upload.css";

:root{
  --text-color: #646569;
  --text-color-blue: #355DA3;
  
  --bg-color-blue-light: #f4f8ff;


  /* LA TASA COLORS */
  --negro: #333333;
  --gris-oscuro: #646569;
  --rojo: #c26464;

  --azul-0: #264273;
  --azul-1: #355DA3;
  --azul-2: #3863ab;
  --azul-3: #467acd;
  --azul-4: #5391ee;
  --azul-5: #6eb0ff;
  --azul-6: #8ac8fd;

  
  --azul-7:  #5b91e1;
  --azul-8:  #6b9fe6;
  --azul-9:  #8abaf0;
  --azul-10: #9acefc;
  --azul-11: #b1ddfc;
  --azul-12: #cae6f9;

  --gris-1: #c9d1da;
  --gris-2: #d9e1e9;
  --gris-3: #e8edf4;
  --gris-4: #f3f7f8;
  --blanco: #ffffff;

  --gris-5: #636e72;
  --gris-6: #b2bec3;
  --gris-7: #dfe6e9;

  --verde-1: #00ad69;
  --verde-2: #6ece9b;
  --verde-3: #a8e2c5;

  --naranja-1: #ffa138;
  --naranja-2: #ffb81d;
  --naranja-3: #ffcd5f;

  --amarillo-1: #fcd947;
  --amarillo-2: #ffe888;

  --space-sm: 4px;
  --space-md: 12px;
  --space-lg: 18px;
  --space-xl: 24px;
  --space-xxl: 48px;


  --xs-rem: 0.4rem;
  --sm-rem: 1rem;
  --md-rem: 2rem;
  --lg-rem: 3rem;

}

body{
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  
  overflow-y: scroll;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  color: var(--negro);
  background-color: var(--azul-0);

  font-family: 'Rubik', sans-serif;
}

i{
  --color: inherit;
  color: var(--color)
}


.rojo{ --color: var(--rojo) !important }
.bg-rojo{ --bg-color: var(--rojo) !important }
.verde-1{ --color: var(--verde-1) !important }
.bg-verde-1{ --bg-color: var(--verde-1) !important }
.verde-2{ --color: var(--verde-2) !important }
.bg-verde-2{ --bg-color: var(--verde-2) !important }
.verde-3{ --color: var(--verde-3) !important }
.bg-verde-3{ --bg-color: var(--verde-3) !important }
.azul-3{  --color: var(--azul-3) !important }
.bg-azul-3{  --bg-color: var(--azul-3) !important }
.azul-12{  --color: var(--azul-12) !important }
.bg-azul-12{  --bg-color: var(--azul-12) !important }
.gris-3{  --color: var(--gris-3) !important }
.bg-gris-3{  --bg-color: var(--gris-3) !important }
.gris-5{  --color: var(--gris-5) !important }
.bg-gris-5{  --bg-color: var(--gris-5) !important }


.text-xs{	font-size: 0.75rem; }
.text-sm{	font-size: 0.875rem; }
.text-base{	font-size: 1rem; }
.text-lg{	font-size: 1.125rem; }
.text-xl{	font-size: 1.25rem; }
.text-2xl{	font-size: 1.5rem; }
.text-3xl{	font-size: 1.875rem; }
.text-4xl{	font-size: 2.25rem; }
.text-5xl{	font-size: 3rem; }
.text-6xl{	font-size: 4rem; }


.spacer-sm{ 
  --space: 1rem;
}
.spacer-md{ 
  --space: 2rem;
}
.spacer-lg{ 
  --space: 5rem;
}

/* SCROLL BAR CONFIG */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
::-webkit-scrollbar:hover {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: var(--gris-3);
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--azul-3); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--azul-1); 
}

input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus, 
  input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}