{% load static %}
:root {
    /* paleta principal */
    --azul-1: rgb(13, 52, 134);
    --rojo-1: rgb(239, 46, 50);
    --celeste: rgb(80, 173, 229);
    --naranja: rgb(246, 135, 18);
    --verde-1: rgb(204, 227, 16);
    --gris-1: rgb(101, 98, 99);
    /* paleta secundaria */
    --verde-2: rgb(131, 205, 39);
    --aqua: rgb(103, 202, 168);
    --azul-2: rgb(52, 84, 173);
    --amarillo: rgb(228, 157, 27);
    /* neutros complementarios */
    --azul-3: rgb(20, 28, 50);
    --gris-2: rgb(167, 165, 166);
    /* fuente */
    --fuente-primaria: "ITCAvantGardeStd-Bold";
    --fuente-secundaria: "Asenine";

    
}
.ra-color-1{
    color:var(--verde-2) !important;
}
.ra-color-2{
    color:var(--verde-1) !important;
}
.ra-color-3{
    color:var(--amarillo) !important;
}
.ra-color-4{
    color:var(--rojo-1) !important;
}
.ra-color-5{
    color:var(--naranja) !important;
}
.ra-color-6{
    color:var(--aqua) !important;
}

.ra-bg-color-1 {

    background-color: var(--azul-1);
    color: whitesmoke;
}



.ra-bg-color-2 {

    background-color: var(--verde-1);
    color: white;

}

.ra-bg-color-3 {

    background-color: var(--azul-2);
    color: whitesmoke;
}

.ra-bg-color-4 {

    background-color: var(--rojo-1);
    color: whitesmoke;
}

.ra-bg-color-5 {

    background-color: var(--naranja);
    color: whitesmoke;
}

.ra-bg-color-6{
        background-color: var(--aqua);
    color: white;
}

#ra-navbar{


    background-color: var(--azul-1);
    color: white;
}

#ra-navbar.navbar-default .navbar-nav>li>a {
    color: white;
}

#ra-navbar.navbar-default .navbar-brand {
 color: white;
}
#ra-navbar.navbar.navbar-default ul li {

    color: white;

}
#jumbotron-rodam {
    padding: 5px 0;
    margin-top: 50px;
    background-color:  var(--azul-2);
    	color: white;
}
#jumbotron-rodam h1 {
    font-size: 21px;
    
}

#jumbotron-rodam h2 {
    font-size: 21px;
}


btn{
    font-family: var(--fuente-primaria);
}
.btn-primary{
   background-color: var(--azul-1);
   color: white;
   border-color:  var(--azul-1);
   font-family: var(--fuente-primaria);
}

.btn-danger{
   background-color: var(--rojo-1);
   color: white;
   border-color:  var(--rojo-1);
   font-family: var(--fuente-primaria);
}
.panel-primary>.panel-heading {
   background-color: var(--azul-1);
   color: white;
   border-color:  var(--azul-1);
   font-family: "ITCAvantGardeStd-Bold";
}

.panel-primary{
    border-color: var(--azul-1);
    
}

legend{
    font-family: var(--fuente-primaria);
}

label{
    font-family: var(--fuente-primaria);
}