:root {

/* Tonos rojos */
--color-rojo1: #ff0000;
--color-rojo2: #ff4500;
--color-rojo3: #ff6347;
--color-rojo4: #ff7f50;
--color-rojo5: #ff8c69;
--color-rojo6: #ff9f80;
--color-rojo7: #ffb3ba;
--color-rojo8: #ffcccb;
--color-rojo9: #ffe4e1;
--color-rojo10: #fff0f0;

/* tonos azules */
--color-azul1: #0000ff;
--color-azul2: #191970;
--color-azul3: #4169e1;
--color-azul4: #6495ed;
--color-azul5: #87ceeb;
--color-azul6: #add8e6;
--color-azul7: #bfefff;
--color-azul8: #e6f2ff;
--color-azul9: #c6e2ff;
--color-azul10: #f0f8ff;

/* tonos amarillos */
--color-amarillo1: #ffff00;
--color-amarillo2: #ffd700;
--color-amarillo3: #ffef96;
--color-amarillo4: #fff68f;
--color-amarillo5: #fffacd;
--color-amarillo6: #fff8dc;
--color-amarillo7: #fff4e6;
--color-amarillo8: #fff0f5;
--color-amarillo9: #f5deb3;
--color-amarillo10: #fafad2;

/* tonos verdes */
--color-verde1: #008000;
--color-verde2: #228b22;
--color-verde3: #32cd32;
--color-verde4: #7fff00;
--color-verde5: #90ee90;
--color-verde6: #98fb98;
--color-verde7: #c1ffc1;
--color-verde8: #e0ffe0;
--color-verde9: #dcedc8;
--color-verde10: #f5fffa;

/* tonos morados */
--color-morado1: #800080;
--color-morado2: #9932cc;
--color-morado3: #8a2be2;
--color-morado4: #9400d3;
--color-morado5: #a020f0;
--color-morado6: #ba55d3;
--color-morado7: #d8bfd8;
--color-morado8: #dda0dd;
--color-morado9: #e6e6fa;
--color-morado10: #f5f0ff;

/* tonos rosas */
--color-rosa1: #ff69b4;
--color-rosa2: #ffb6c1;
--color-rosa3: #ffc0cb;
--color-rosa4: #ffc6d5;
--color-rosa5: #ffccd5;
--color-rosa6: #ffd1dc;
--color-rosa7: #ffd9e6;
--color-rosa8: #ffe4f0;
--color-rosa9: #ffe4e1;
--color-rosa10: #fff0f5;

/* tonos marrones */
--color-marron1: #8b4513;
--color-marron2: #a0522d;
--color-marron3: #cd853f;
--color-marron4: #d2691e;
--color-marron5: #daa520;
--color-marron6: #deb887;
--color-marron7: #f4a460;
--color-marron8: #f5deb3;
--color-marron9: #d2b48c;
--color-marron10: #faf0e6;

/* tonos grises */

--color-gris1: #808080;
--color-gris2: #a9a9a9;
--color-gris3: #c0c0c0;
--color-gris4: #d3d3d3;
--color-gris5: #e0e0e0;
--color-gris6: #f5f5f5;
--color-gris7: #fafafa;
--color-gris8: #f8f8f8;
--color-gris9: #f0f0f0;
--color-gris10: #ffffff;
--color-gris11: #666666;
--color-gris12: #555555;
--color-gris13: #444444;
--color-gris14: #333333;
--color-gris15: #222222;

/* tonos violeta */
--color-violeta1: #4b0082;
--color-violeta2: #6a5acd;
--color-violeta3: #7b68ee;
--color-violeta4: #8a2be2;
--color-violeta5: #9370db;
--color-violeta6: #a020f0;
--color-violeta7: #ba55d3;
--color-violeta8: #d8bfd8;
--color-violeta9: #dda0dd;
--color-violeta10: #e6e6fa;

/* tonos naranja */
--color-naranja1: #ffa500;
--color-naranja2: #ff8c00;
--color-naranja3: #ff7f50;
--color-naranja4: #ff6347;
--color-naranja5: #ff4500;
--color-naranja6: #ff8c69;
--color-naranja7: #ffad99;
--color-naranja8: #ffdab9;
--color-naranja9: #ffefd5;
--color-naranja10: #fff8dc;

/* Paleta 1: Tonos cálidos */
--color-calido1: #ff9f80;
--color-calido2: #ffcc80;
--color-calido3: #ffb3ba;
--color-calido4: #ffad60;
--color-calido5: #ffcc99;
--color-calido6: #ffaf7a;
--color-calido7: #ffbb99;
--color-calido8: #ff9966;
--color-calido9: #ff884d;
--color-calido10: #ffaa80;

/* Paleta 2: Colores naturales */
--color-natural1: #8a5a44;
--color-natural2: #b38d78;
--color-natural3: #c4a77d;
--color-natural4: #9b7865;
--color-natural5: #a68e7e;
--color-natural6: #7a5a4d;
--color-natural7: #957963;
--color-natural8: #b0a29e;
--color-natural9: #6d4c41;
--color-natural10: #826c5a;

/* Paleta 2: Colores vivos */
--color-vibrante1: #ff7f7f;
--color-vibrante2: #ffcc5c;
--color-vibrante3: #84dcc6;

--text-sagu-primary1: #542404;
--text-sagu-primary2: #542404;
--text-sagu-secondary: #C7924D;

--font-family-sans-serif: "figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}

body{
  font-family: 'Figtree';
}

.text-sagu-primary {
  /* color: var(--primary) !important; */
  color:var(--text-sagu-primary1) !important;
}

.text-sagu-secondary {
  color:var(--text-sagu-secondary) !important;
}

a.text-sagu-primary:hover, a.text-sagu-primary:focus {
  /* color: var(--primaryHover) !important; */
  color: var(--text-sagu-primary2) !important;
}

/* Utilización de variables en las paletas de colores */
/* Tono de rojo 1 */
.bg-rojo1 {
    background-color: var(--color-rojo1);
}
  .text-rojo1 {
    color: var(--color-rojo1);
  }
  
  /* Tono de rojo 2 */
  .bg-rojo2 {
    background-color: var(--color-rojo2);
  }
  .text-rojo2 {
    color: var(--color-rojo2);
  }
  
  /* Tono de rojo 3 */
  .bg-rojo3 {
    background-color: var(--color-rojo3);
  }
  .text-rojo3 {
    color: var(--color-rojo3);
  }
  
  /* Tono de rojo 4 */
  .bg-rojo4 {
    background-color: var(--color-rojo4);
  }
  .text-rojo4 {
    color: var(--color-rojo4);
  }
  
  /* Tono de rojo 5 */
  .bg-rojo5 {
    background-color: var(--color-rojo5);
  }
  .text-rojo5 {
    color: var(--color-rojo5);
  }

  .bg-rojo6 {
    background-color: var(--color-rojo6);
  }
  .text-rojo6 {
    color: var(--color-rojo6);
  }
  
  /* Tono de rojo 7 */
  .bg-rojo7 {
    background-color: var(--color-rojo7);
  }
  .text-rojo7 {
    color: var(--color-rojo7);
  }
  
  /* Tono de rojo 8 */
  .bg-rojo8 {
    background-color: var(--color-rojo8);
  }
  .text-rojo8 {
    color: var(--color-rojo8);
  }
  
  /* Tono de rojo 9 */
  .bg-rojo9 {
    background-color: var(--color-rojo9);
  }
  .text-rojo9 {
    color: var(--color-rojo9);
  }
  
  /* Tono de rojo 10 */
  .bg-rojo10 {
    background-color: var(--color-rojo10);
  }
  .text-rojo10 {
    color: var(--color-rojo10);
  }

  /* Tono de azul 1 */
.bg-azul1 {
    background-color: var(--color-azul1);
  }
  .text-azul1 {
    color: var(--color-azul1);
  }
  
  /* Tono de azul 2 */
  .bg-azul2 {
    background-color: var(--color-azul2);
  }
  .text-azul2 {
    color: var(--color-azul2);
  }
  
  /* Tono de azul 3 */
  .bg-azul3 {
    background-color: var(--color-azul3);
  }
  .text-azul3 {
    color: var(--color-azul3);
  }
  
  /* Tono de azul 4 */
  .bg-azul4 {
    background-color: var(--color-azul4);
  }
  .text-azul4 {
    color: var(--color-azul4);
  }
  
  /* Tono de azul 5 */
  .bg-azul5 {
    background-color: var(--color-azul5);
  }
  .text-azul5 {
    color: var(--color-azul5);
  }
  
  /* Tono de azul 6 */
  .bg-azul6 {
    background-color: var(--color-azul6);
  }
  .text-azul6 {
    color: var(--color-azul6);
  }
  
  /* Tono de azul 7 */
  .bg-azul7 {
    background-color: var(--color-azul7);
  }
  .text-azul7 {
    color: var(--color-azul7);
  }
  
  /* Tono de azul 8 */
  .bg-azul8 {
    background-color: var(--color-azul8);
  }
  .text-azul8 {
    color: var(--color-azul8);
  }
  
  /* Tono de azul 9 */
  .bg-azul9 {
    background-color: var(--color-azul9);
  }
  .text-azul9 {
    color: var(--color-azul9);
  }
  
  /* Tono de azul 10 */
  .bg-azul10 {
    background-color: var(--color-azul10);
  }
  .text-azul10 {
    color: var(--color-azul10);
  }

/* Tono de amarillo 1 */
.bg-amarillo1 {
  background-color: var(--color-amarillo1);
}
.text-amarillo1 {
  color: var(--color-amarillo1);
}

/* Tono de amarillo 2 */
.bg-amarillo2 {
  background-color: var(--color-amarillo2);
}
.text-amarillo2 {
  color: var(--color-amarillo2);
}

/* Tono de amarillo 3 */
.bg-amarillo3 {
  background-color: var(--color-amarillo3);
}
.text-amarillo3 {
  color: var(--color-amarillo3);
}

/* Tono de amarillo 4 */
.bg-amarillo4 {
  background-color: var(--color-amarillo4);
}
.text-amarillo4 {
  color: var(--color-amarillo4);
}

/* Tono de amarillo 5 */
.bg-amarillo5 {
  background-color: var(--color-amarillo5);
}
.text-amarillo5 {
  color: var(--color-amarillo5);
}

/* Tono de amarillo 6 */
.bg-amarillo6 {
  background-color: var(--color-amarillo6);
}
.text-amarillo6 {
  color: var(--color-amarillo6);
}

/* Tono de amarillo 7 */
.bg-amarillo7 {
  background-color: var(--color-amarillo7);
}
.text-amarillo7 {
  color: var(--color-amarillo7);
}

/* Tono de amarillo 8 */
.bg-amarillo8 {
  background-color: var(--color-amarillo8);
}
.text-amarillo8 {
  color: var(--color-amarillo8);
}

/* Tono de amarillo 9 */
.bg-amarillo9 {
  background-color: var(--color-amarillo9);
}
.text-amarillo9 {
  color: var(--color-amarillo9);
}

/* Tono de amarillo 10 */
.bg-amarillo10 {
  background-color: var(--color-amarillo10);
}
.text-amarillo10 {
  color: var(--color-amarillo10);
}

/* Tono de verde 1 */
.bg-verde1 {
  background-color: var(--color-verde1);
}
.text-verde1 {
  color: var(--color-verde1);
}

/* Tono de verde 2 */
.bg-verde2 {
  background-color: var(--color-verde2);
}
.text-verde2 {
  color: var(--color-verde2);
}

/* Tono de verde 3 */
.bg-verde3 {
  background-color: var(--color-verde3);
}
.text-verde3 {
  color: var(--color-verde3);
}

/* Tono de verde 4 */
.bg-verde4 {
  background-color: var(--color-verde4);
}
.text-verde4 {
  color: var(--color-verde4);
}

/* Tono de verde 5 */
.bg-verde5 {
  background-color: var(--color-verde5);
}
.text-verde5 {
  color: var(--color-verde5);
}

/* Tono de verde 6 */
.bg-verde6 {
  background-color: var(--color-verde6);
}
.text-verde6 {
  color: var(--color-verde6);
}

/* Tono de verde 7 */
.bg-verde7 {
  background-color: var(--color-verde7);
}
.text-verde7 {
  color: var(--color-verde7);
}

/* Tono de verde 8 */
.bg-verde8 {
  background-color: var(--color-verde8);
}
.text-verde8 {
  color: var(--color-verde8);
}

/* Tono de verde 9 */
.bg-verde9 {
  background-color: var(--color-verde9);
}
.text-verde9 {
  color: var(--color-verde9);
}

/* Tono de verde 10 */
.bg-verde10 {
  background-color: var(--color-verde10);
}
.text-verde10 {
  color: var(--color-verde10);
}

/* Tono de morado 1 */
.bg-morado1 {
  background-color: var(--color-morado1);
}
.text-morado1 {
  color: var(--color-morado1);
}

/* Tono de morado 2 */
.bg-morado2 {
  background-color: var(--color-morado2);
}
.text-morado2 {
  color: var(--color-morado2);
}

/* Tono de morado 3 */
.bg-morado3 {
  background-color: var(--color-morado3);
}
.text-morado3 {
  color: var(--color-morado3);
}

/* Tono de morado 4 */
.bg-morado4 {
  background-color: var(--color-morado4);
}
.text-morado4 {
  color: var(--color-morado4);
}

/* Tono de morado 5 */
.bg-morado5 {
  background-color: var(--color-morado5);
}
.text-morado5 {
  color: var(--color-morado5);
}

/* Tono de morado 6 */
.bg-morado6 {
  background-color: var(--color-morado6);
}
.text-morado6 {
  color: var(--color-morado6);
}

/* Tono de morado 7 */
.bg-morado7 {
  background-color: var(--color-morado7);
}
.text-morado7 {
  color: var(--color-morado7);
}

/* Tono de morado 8 */
.bg-morado8 {
  background-color: var(--color-morado8);
}
.text-morado8 {
  color: var(--color-morado8);
}

/* Tono de morado 9 */
.bg-morado9 {
  background-color: var(--color-morado9);
}
.text-morado9 {
  color: var(--color-morado9);
}

/* Tono de morado 10 */
.bg-morado10 {
  background-color: var(--color-morado10);
}
.text-morado10 {
  color: var(--color-morado10);
}

/* Tono de rosa 1 */
.bg-rosa1 {
  background-color: var(--color-rosa1);
}
.text-rosa1 {
  color: var(--color-rosa1);
}

/* Tono de rosa 2 */
.bg-rosa2 {
  background-color: var(--color-rosa2);
}
.text-rosa2 {
  color: var(--color-rosa2);
}

/* Tono de rosa 3 */
.bg-rosa3 {
  background-color: var(--color-rosa3);
}
.text-rosa3 {
  color: var(--color-rosa3);
}

/* Tono de rosa 4 */
.bg-rosa4 {
  background-color: var(--color-rosa4);
}
.text-rosa4 {
  color: var(--color-rosa4);
}

/* Tono de rosa 5 */
.bg-rosa5 {
  background-color: var(--color-rosa5);
}
.text-rosa5 {
  color: var(--color-rosa5);
}

/* Tono de rosa 6 */
.bg-rosa6 {
  background-color: var(--color-rosa6);
}
.text-rosa6 {
  color: var(--color-rosa6);
}

/* Tono de rosa 7 */
.bg-rosa7 {
  background-color: var(--color-rosa7);
}
.text-rosa7 {
  color: var(--color-rosa7);
}

/* Tono de rosa 8 */
.bg-rosa8 {
  background-color: var(--color-rosa8);
}
.text-rosa8 {
  color: var(--color-rosa8);
}

/* Tono de rosa 9 */
.bg-rosa9 {
  background-color: var(--color-rosa9);
}
.text-rosa9 {
  color: var(--color-rosa9);
}

/* Tono de rosa 10 */
.bg-rosa10 {
  background-color: var(--color-rosa10);
}
.text-rosa10 {
  color: var(--color-rosa10);
}

/* Tono de marrón 1 */
.bg-marron1 {
  background-color: var(--color-marron1);
}
.text-marron1 {
  color: var(--color-marron1);
}

/* Tono de marrón 2 */
.bg-marron2 {
  background-color: var(--color-marron2);
}
.text-marron2 {
  color: var(--color-marron2);
}

/* Tono de marrón 3 */
.bg-marron3 {
  background-color: var(--color-marron3);
}
.text-marron3 {
  color: var(--color-marron3);
}

/* Tono de marrón 4 */
.bg-marron4 {
  background-color: var(--color-marron4);
}
.text-marron4 {
  color: var(--color-marron4);
}

/* Tono de marrón 5 */
.bg-marron5 {
  background-color: var(--color-marron5);
}
.text-marron5 {
  color: var(--color-marron5);
}

/* Tono de marrón 6 */
.bg-marron6 {
  background-color: var(--color-marron6);
}
.text-marron6 {
  color: var(--color-marron6);
}

/* Tono de marrón 7 */
.bg-marron7 {
  background-color: var(--color-marron7);
}
.text-marron7 {
  color: var(--color-marron7);
}

/* Tono de marrón 8 */
.bg-marron8 {
  background-color: var(--color-marron8);
}
.text-marron8 {
  color: var(--color-marron8);
}

/* Tono de marrón 9 */
.bg-marron9 {
  background-color: var(--color-marron9);
}
.text-marron9 {
  color: var(--color-marron9);
}

/* Tono de marrón 10 */
.bg-marron10 {
  background-color: var(--color-marron10);
}
.text-marron10 {
  color: var(--color-marron10);
}

/* Tono de gris 1 */
.bg-gris1 {
  background-color: var(--color-gris1);
}
.text-gris1 {
  color: var(--color-gris1);
}

/* Tono de gris 2 */
.bg-gris2 {
  background-color: var(--color-gris2);
}
.text-gris2 {
  color: var(--color-gris2);
}

/* Tono de gris 3 */
.bg-gris3 {
  background-color: var(--color-gris3);
}
.text-gris3 {
  color: var(--color-gris3);
}

/* Tono de gris 4 */
.bg-gris4 {
  background-color: var(--color-gris4);
}
.text-gris4 {
  color: var(--color-gris4);
}

/* Tono de gris 5 */
.bg-gris5 {
  background-color: var(--color-gris5);
}
.text-gris5 {
  color: var(--color-gris5);
}

/* Tono de gris 6 */
.bg-gris6 {
  background-color: var(--color-gris6);
}
.text-gris6 {
  color: var(--color-gris6);
}

/* Tono de gris 7 */
.bg-gris7 {
  background-color: var(--color-gris7);
}
.text-gris7 {
  color: var(--color-gris7);
}

/* Tono de gris 8 */
.bg-gris8 {
  background-color: var(--color-gris8);
}
.text-gris8 {
  color: var(--color-gris8);
}

/* Tono de gris 9 */
.bg-gris9 {
  background-color: var(--color-gris9);
}
.text-gris9 {
  color: var(--color-gris9);
}

/* Tono de gris 10 */
.bg-gris10 {
  background-color: var(--color-gris10);
}
.text-gris10 {
  color: var(--color-gris10);
}

/* Tono de gris 11 */
.bg-gris11 {
  background-color: var(--color-gris11);
}
.text-gris11 {
  color: var(--color-gris11);
}

/* Tono de gris 12 */
.bg-gris12 {
  background-color: var(--color-gris12);
}
.text-gris12 {
  color: var(--color-gris12);
}

/* Tono de gris 13 */
.bg-gris13 {
  background-color: var(--color-gris13);
}
.text-gris13 {
  color: var(--color-gris13);
}

/* Tono de gris 14 */
.bg-gris14 {
  background-color: var(--color-gris14);
}
.text-gris14 {
  color: var(--color-gris14);
}

/* Tono de gris 15 */
.bg-gris15 {
  background-color: var(--color-gris15);
}
.text-gris15 {
  color: var(--color-gris15);
}

/* Tono de violeta 1 */
.bg-violeta1 {
  background-color: var(--color-violeta1);
}
.text-violeta1 {
  color: var(--color-violeta1);
}

/* Tono de violeta 2 */
.bg-violeta2 {
  background-color: var(--color-violeta2);
}
.text-violeta2 {
  color: var(--color-violeta2);
}

/* Tono de violeta 3 */
.bg-violeta3 {
  background-color: var(--color-violeta3);
}
.text-violeta3 {
  color: var(--color-violeta3);
}

/* Tono de violeta 4 */
.bg-violeta4 {
  background-color: var(--color-violeta4);
}
.text-violeta4 {
  color: var(--color-violeta4);
}

/* Tono de violeta 5 */
.bg-violeta5 {
  background-color: var(--color-violeta5);
}
.text-violeta5 {
  color: var(--color-violeta5);
}

/* Tono de violeta 6 */
.bg-violeta6 {
  background-color: var(--color-violeta6);
}
.text-violeta6 {
  color: var(--color-violeta6);
}

/* Tono de violeta 7 */
.bg-violeta7 {
  background-color: var(--color-violeta7);
}
.text-violeta7 {
  color: var(--color-violeta7);
}

/* Tono de violeta 8 */
.bg-violeta8 {
  background-color: var(--color-violeta8);
}
.text-violeta8 {
  color: var(--color-violeta8);
}

/* Tono de violeta 9 */
.bg-violeta9 {
  background-color: var(--color-violeta9);
}
.text-violeta9 {
  color: var(--color-violeta9);
}

/* Tono de violeta 10 */
.bg-violeta10 {
  background-color: var(--color-violeta10);
}
.text-violeta10 {
  color: var(--color-violeta10);
}

/* Tono de naranja 1 */
.bg-naranja1 {
  background-color: #ffa500;
}
.text-naranja1 {
  color: #ffa500;
}

/* Tono de naranja 2 */
.bg-naranja2 {
  background-color: #ff8c00;
}
.text-naranja2 {
  color: #ff8c00;
}

/* Tono de naranja 3 */
.bg-naranja3 {
  background-color: #ff7f50;
}
.text-naranja3 {
  color: #ff7f50;
}

/* Tono de naranja 4 */
.bg-naranja4 {
  background-color: #ff6347;
}
.text-naranja4 {
  color: #ff6347;
}

/* Tono de naranja 5 */
.bg-naranja5 {
  background-color: #ff4500;
}
.text-naranja5 {
  color: #ff4500;
}

/* Tono de naranja 6 */
.bg-naranja6 {
  background-color: #ff8c69;
}
.text-naranja6 {
  color: #ff8c69;
}

/* Tono de naranja 7 */
.bg-naranja7 {
  background-color: #ffad99;
}
.text-naranja7 {
  color: #ffad99;
}

/* Tono de naranja 8 */
.bg-naranja8 {
  background-color: #ffdab9;
}
.text-naranja8 {
  color: #ffdab9;
}

/* Tono de naranja 9 */
.bg-naranja9 {
  background-color: #ffefd5;
}
.text-naranja9 {
  color: #ffefd5;
}

/* Tono de naranja 10 */
.bg-naranja10 {
  background-color: #fff8dc;
}
.text-naranja10 {
  color: #fff8dc;
}

/* Tono cálido 1 */
.bg-calido1 {
  background-color: #ff9f80;
}
.text-calido1 {
  color: #ff9f80;
}

/* Tono cálido 2 */
.bg-calido2 {
  background-color: #ffcc80;
}
.text-calido2 {
  color: #ffcc80;
}

/* Tono cálido 3 */
.bg-calido3 {
  background-color: #ffb3ba;
}
.text-calido3 {
  color: #ffb3ba;
}

/* Tono cálido 4 */
.bg-calido4 {
  background-color: #ffad60;
}
.text-calido4 {
  color: #ffad60;
}

/* Tono cálido 5 */
.bg-calido5 {
  background-color: #ffcc99;
}
.text-calido5 {
  color: #ffcc99;
}

/* Tono cálido 6 */
.bg-calido6 {
  background-color: #ffaf7a;
}
.text-calido6 {
  color: #ffaf7a;
}

/* Tono cálido 7 */
.bg-calido7 {
  background-color: #ffbb99;
}
.text-calido7 {
  color: #ffbb99;
}

/* Tono cálido 8 */
.bg-calido8 {
  background-color: #ff9966;
}
.text-calido8 {
  color: #ff9966;
}

/* Tono cálido 9 */
.bg-calido9 {
  background-color: #ff884d;
}
.text-calido9 {
  color: #ff884d;
}

/* Tono cálido 10 */
.bg-calido10 {
  background-color: #ffaa80;
}
.text-calido10 {
  color: #ffaa80;
}

/* Color natural 1 */
.bg-natural1 {
  background-color: #8a5a44;
}
.text-natural1 {
  color: #8a5a44;
}

/* Color natural 2 */
.bg-natural2 {
  background-color: #b38d78;
}
.text-natural2 {
  color: #b38d78;
}

/* Color natural 3 */
.bg-natural3 {
  background-color: #c4a77d;
}
.text-natural3 {
  color: #c4a77d;
}

/* Color natural 4 */
.bg-natural4 {
  background-color: #9b7865;
}
.text-natural4 {
  color: #9b7865;
}

/* Color natural 5 */
.bg-natural5 {
  background-color: #a68e7e;
}
.text-natural5 {
  color: #a68e7e;
}

/* Color natural 6 */
.bg-natural6 {
  background-color: #7a5a4d;
}
.text-natural6 {
  color: #7a5a4d;
}

/* Color natural 7 */
.bg-natural7 {
  background-color: #957963;
}
.text-natural7 {
  color: #957963;
}

/* Color natural 8 */
.bg-natural8 {
  background-color: #b0a29e;
}
.text-natural8 {
  color: #b0a29e;
}

/* Color natural 9 */
.bg-natural9 {
  background-color: #6d4c41;
}
.text-natural9 {
  color: #6d4c41;
}

/* Color natural 10 */
.bg-natural10 {
  background-color: #826c5a;
}
.text-natural10 {
  color: #826c5a;
}

/* Color vibrante 1 */
.bg-vibrante1 {
  background-color: #ff7f7f;
}
.text-vibrante1 {
  color: #ff7f7f;
}

/* Color vibrante 2 */
.bg-vibrante2 {
  background-color: #ffcc5c;
}
.text-vibrante2 {
  color: #ffcc5c;
}

/* Color vibrante 3 */
.bg-vibrante3 {
  background-color: #84dcc6;
}
.text-vibrante3 {
  color: #84dcc6;
}

.btn-sagu-primary { 
  color: #ffffff; 
  background-color: #542404; 
  border-color: #542404;
  border-radius: 50px;
  font-weight: bold;
} 
 
.btn-sagu-primary:hover, 
.btn-sagu-primary:focus, 
.btn-sagu-primary:active, 
.btn-sagu-primary.active, 
.open .dropdown-toggle.btn-sagu-primary { 
  color: #ffffff; 
  background-color: #7A3100; 
  border-color: #542404; 
} 
 
.btn-sagu-primary:active, 
.btn-sagu-primary.active, 
.open .dropdown-toggle.btn-sagu-primary { 
  background-image: none; 
} 
 
.btn-sagu-primary.disabled, 
.btn-sagu-primary[disabled], 
fieldset[disabled] .btn-sagu-primary, 
.btn-sagu-primary.disabled:hover, 
.btn-sagu-primary[disabled]:hover, 
fieldset[disabled] .btn-sagu-primary:hover, 
.btn-sagu-primary.disabled:focus, 
.btn-sagu-primary[disabled]:focus, 
fieldset[disabled] .btn-sagu-primary:focus, 
.btn-sagu-primary.disabled:active, 
.btn-sagu-primary[disabled]:active, 
fieldset[disabled] .btn-sagu-primary:active, 
.btn-sagu-primary.disabled.active, 
.btn-sagu-primary[disabled].active, 
fieldset[disabled] .btn-sagu-primary.active { 
  background-color: #542404; 
  border-color: #542404; 
} 
 
.btn-sagu-primary .badge { 
  color: #542404; 
  background-color: #ffffff; 
}

.btn-sagu-secondary { 
  color: #ffffff; 
  background-color: #C7924D; 
  border-color: #C7924D; 
  border-radius: 50px;
  font-weight: bold;
} 
 
.btn-sagu-secondary:hover, 
.btn-sagu-secondary:focus, 
.btn-sagu-secondary:active, 
.btn-sagu-secondary.active, 
.open .dropdown-toggle.btn-sagu-secondary { 
  color: #ffffff; 
  background-color: #BF7A1F; 
  border-color: #C7924D; 
} 
 
.btn-sagu-secondary:active, 
.btn-sagu-secondary.active, 
.open .dropdown-toggle.btn-sagu-secondary { 
  background-image: none; 
} 
 
.btn-sagu-secondary.disabled, 
.btn-sagu-secondary[disabled], 
fieldset[disabled] .btn-sagu-secondary, 
.btn-sagu-secondary.disabled:hover, 
.btn-sagu-secondary[disabled]:hover, 
fieldset[disabled] .btn-sagu-secondary:hover, 
.btn-sagu-secondary.disabled:focus, 
.btn-sagu-secondary[disabled]:focus, 
fieldset[disabled] .btn-sagu-secondary:focus, 
.btn-sagu-secondary.disabled:active, 
.btn-sagu-secondary[disabled]:active, 
fieldset[disabled] .btn-sagu-secondary:active, 
.btn-sagu-secondary.disabled.active, 
.btn-sagu-secondary[disabled].active, 
fieldset[disabled] .btn-sagu-secondary.active { 
  background-color: #C7924D; 
  border-color: #C7924D; 
} 
 
.btn-sagu-secondary .badge { 
  color: #C7924D; 
  background-color: #ffffff; 
}

.btn-yellow { 
    color: #FFFFFF; 
    background-color: #E6AF4B; 
    border-color: #E6AF4B; 
  } 
   
  .btn-yellow:hover, 
  .btn-yellow:focus, 
  .btn-yellow:active, 
  .btn-yellow.active, 
  .open .dropdown-toggle.btn-yellow { 
    color: #FFFFFF; 
    background-color: #EB9F12; 
    border-color: #E6AF4B; 
  } 
   
  .btn-yellow:active, 
  .btn-yellow.active, 
  .open .dropdown-toggle.btn-yellow { 
    background-image: none; 
  } 
   
  .btn-yellow.disabled, 
  .btn-yellow[disabled], 
  fieldset[disabled] .btn-yellow, 
  .btn-yellow.disabled:hover, 
  .btn-yellow[disabled]:hover, 
  fieldset[disabled] .btn-yellow:hover, 
  .btn-yellow.disabled:focus, 
  .btn-yellow[disabled]:focus, 
  fieldset[disabled] .btn-yellow:focus, 
  .btn-yellow.disabled:active, 
  .btn-yellow[disabled]:active, 
  fieldset[disabled] .btn-yellow:active, 
  .btn-yellow.disabled.active, 
  .btn-yellow[disabled].active, 
  fieldset[disabled] .btn-yellow.active { 
    background-color: #E6AF4B; 
    border-color: #E6AF4B; 
  } 
   
  .btn-yellow .badge { 
    color: #E6AF4B; 
    background-color: #FFFFFF; 
  }

  .btn-orange { 
    color: #FFFFFF; 
    background-color: #F0783C; 
    border-color: #F0783C; 
  } 
   
  .btn-orange:hover, 
  .btn-orange:focus, 
  .btn-orange:active, 
  .btn-orange.active, 
  .open .dropdown-toggle.btn-orange { 
    color: #FFFFFF; 
    background-color: #DB662C; 
    border-color: #F0783C; 
  } 
   
  .btn-orange:active, 
  .btn-orange.active, 
  .open .dropdown-toggle.btn-orange { 
    background-image: none; 
  } 
   
  .btn-orange.disabled, 
  .btn-orange[disabled], 
  fieldset[disabled] .btn-orange, 
  .btn-orange.disabled:hover, 
  .btn-orange[disabled]:hover, 
  fieldset[disabled] .btn-orange:hover, 
  .btn-orange.disabled:focus, 
  .btn-orange[disabled]:focus, 
  fieldset[disabled] .btn-orange:focus, 
  .btn-orange.disabled:active, 
  .btn-orange[disabled]:active, 
  fieldset[disabled] .btn-orange:active, 
  .btn-orange.disabled.active, 
  .btn-orange[disabled].active, 
  fieldset[disabled] .btn-orange.active { 
    background-color: #F0783C; 
    border-color: #F0783C; 
  } 
   
  .btn-orange .badge { 
    color: #F0783C; 
    background-color: #FFFFFF; 
  }

  .btn-navy { 
    color: #FFFFFF; 
    background-color: #2B2A4C; 
    border-color: #2B2A4C; 
  } 
   
  .btn-navy:hover, 
  .btn-navy:focus, 
  .btn-navy:active, 
  .btn-navy.active, 
  .open .dropdown-toggle.btn-navy { 
    color: #FFFFFF; 
    background-color: #3F3E6E; 
    border-color: #2B2A4C; 
  } 
   
  .btn-navy:active, 
  .btn-navy.active, 
  .open .dropdown-toggle.btn-navy { 
    background-image: none; 
  } 
   
  .btn-navy.disabled, 
  .btn-navy[disabled], 
  fieldset[disabled] .btn-navy, 
  .btn-navy.disabled:hover, 
  .btn-navy[disabled]:hover, 
  fieldset[disabled] .btn-navy:hover, 
  .btn-navy.disabled:focus, 
  .btn-navy[disabled]:focus, 
  fieldset[disabled] .btn-navy:focus, 
  .btn-navy.disabled:active, 
  .btn-navy[disabled]:active, 
  fieldset[disabled] .btn-navy:active, 
  .btn-navy.disabled.active, 
  .btn-navy[disabled].active, 
  fieldset[disabled] .btn-navy.active { 
    background-color: #2B2A4C; 
    border-color: #2B2A4C; 
  } 
   
  .btn-navy .badge { 
    color: #2B2A4C; 
    background-color: #FFFFFF; 
  }

  .btn-purple { 
    color: #FFFFFF; 
    background-color: #8000FF; 
    border-color: #8000FF; 
  } 
   
  .btn-purple:hover, 
  .btn-purple:focus, 
  .btn-purple:active, 
  .btn-purple.active, 
  .open .dropdown-toggle.btn-purple { 
    color: #FFFFFF; 
    background-color: #6A08CC; 
    border-color: #8000FF; 
  } 
   
  .btn-purple:active, 
  .btn-purple.active, 
  .open .dropdown-toggle.btn-purple { 
    background-image: none; 
  } 
   
  .btn-purple.disabled, 
  .btn-purple[disabled], 
  fieldset[disabled] .btn-purple, 
  .btn-purple.disabled:hover, 
  .btn-purple[disabled]:hover, 
  fieldset[disabled] .btn-purple:hover, 
  .btn-purple.disabled:focus, 
  .btn-purple[disabled]:focus, 
  fieldset[disabled] .btn-purple:focus, 
  .btn-purple.disabled:active, 
  .btn-purple[disabled]:active, 
  fieldset[disabled] .btn-purple:active, 
  .btn-purple.disabled.active, 
  .btn-purple[disabled].active, 
  fieldset[disabled] .btn-purple.active { 
    background-color: #8000FF; 
    border-color: #8000FF; 
  } 
   
  .btn-purple .badge { 
    color: #8000FF; 
    background-color: #FFFFFF; 
  }

.new-custom-control{
    background-color: rgba(237,242,247)!important;
    /* border: 1px solid #ccc !important; */
    /* border:0 !important; */
    border-radius: 50px !important;
    color: #000;
}