/********** COLORS **********/


/********** UIUC Oranges **********/
.il-orange              {fill: var(--il-orange);            background-color: var(--il-orange)!important;}
.il-altgeld             {fill: var(--il-altgeld);           background-color: var(--il-altgeld)!important;}
.il-altgeld-dark1       {fill: var(--il-altgeld-darker-1);  background-color: var(--il-altgeld-darker-1)!important;}

.il-orange-txt          {color: var(--il-orange);}
.il-altgeld-txt         {color: var(--il-altgeld);}
.il-altgeld-dark1-txt   {color: var(--il-altgeld-darker-1);}

.il-orange-link         {color: var(--il-orange);}
.il-orange-link:hover   {color: var(--il-altgeld);}

.il-altgeld-link        {color: var(--il-altgeld);}
.il-altgeld-link:hover  {color: var(--il-altgeld-darker-1);}

.il-orange-btn          {background-color: var(--il-orange);         color:#FFFFFF;}
.il-orange-btn:hover    {background-color: var(--il-altgeld);        color:#FFFFFF;}
.il-orange-btn-active   {background-color: var(--il-altgeld);        border: 5px solid var(--il-altgeld-darker-1) !important;}

.il-altgeld-btn         {background-color: var(--il-altgeld);         color:#FFFFFF;}
.il-altgeld-btn:hover   {background-color: var(--il-altgeld-darker-1);color:#FFFFFF;}
.il-orange-btn-active   {background-color: var(--il-altgeld);         border: 5px solid #983220 !important;}


/********** UIUC Blues **********/
.il-blue                {fill: var(--il-blue);           background-color: var(--il-blue)!important;}
.il-blue-lite1          {fill: var(--il-blue-lighter-1); background-color: var(--il-blue-lighter-1)!important;}
.il-blue-lite2          {fill: var(--il-blue-lighter-2); background-color: var(--il-blue-lighter-2)!important;}
.il-blue-lite3          {fill: var(--il-blue-lighter-3); background-color: var(--il-blue-lighter-3)!important;}
.il-blue-lite4          {fill: var(--il-blue-lighter-4); background-color: var(--il-blue-lighter-4)!important;}
.il-blue-dark1          {fill: var(--il-blue-darker-1);  background-color: var(--il-blue-darker-1)!important;}
.il-blue-dark2          {fill: var(--il-blue-darker-1);  background-color: var(--il-blue-darker-2)!important;}

.il-blue-txt            {color: var(--il-blue)}
.il-blue-lite1-txt      {color: var(--il-blue-lighter-1)}
.il-blue-lite2-txt      {color: var(--il-blue-lighter-2)}
.il-blue-lite3-txt      {color: var(--il-blue-lighter-3)}
.il-blue-lite4-txt      {color: var(--il-blue-lighter-4)}
.il-blue-dark1-txt      {color: var(--il-blue-darker-1)}
.il-blue-dark2-txt      {color: var(--il-blue-darker-2)}

.il-blue-link        {color: var(--il-blue);}
.il-blue-link:hover  {color: var(--il-blue-lighter-1);}

.il-blue-btn         {background-color: var(--il-blue);           color:#FFFFFF;}
.il-blue-btn:hover   {background-color: var(--il-blue-lighter-1); color:#FFFFFF;}
.il-blue-btn-active  {background-color: var(--il-blue-lighter-1); border: 5px solid var(--il-blue-lighter-2)!important;}


/********** UIUC Grays ("Storms") **********/
.il-storm           {fill: var(--il-storm);           background-color: var(--il-storm)!important;}
.il-storm-lite1     {fill: var(--il-storm-lighter-1); background-color: var(--il-storm-lighter-1)!important;}
.il-storm-lite2     {fill: var(--il-storm-lighter-2); background-color: var(--il-storm-lighter-2)!important;}
.il-storm-lite3     {fill: var(--il-storm-lighter-3); background-color: var(--il-storm-lighter-3)!important;}
.il-storm-lite4     {fill: var(--il-storm-lighter-4); background-color: var(--il-storm-lighter-4)!important;}
.il-storm-dark1     {fill: var(--il-darker-1);        background-color: var(--il-darker-1);}
.il-storm-dark2     {fill: var(--il-darker-2);        background-color: var(--il-darker-2);}

.il-storm-btn       {background-color: var(--il-storm);           color:#FFFFFF;}
.il-storm-btn:hover {background-color: var(--il-storm-lighter-1); color:#FFFFFF;}
.il-storm-btn-active{background-color: var(--il-storm-lighter-1); border: 5px solid var(--il-storm-lighter-2);}

/********** COLORS **********/





/********** BIG PARTS **********/

html {
     position: relative;
     min-height: 100%;
}

body {
   font-family: var(--il-font-source-sans);
   -moz-osx-font-smoothing: grayscale;
   margin-bottom: 60px; /* Margin bottom by footer height */
}

a {
     text-decoration: none !important;
     white-space: nowrap !important;
}

/********** BIG PARTS **********/





/********** SPINNER **********/
/********** https://codepen.io/yic666kr/pen/mxmvbV **********/

#spin_overlay{
     position: fixed;
     top: 0;
     z-index: 100;
     width: 100%;
     height:100%;
     display: none;
     background: rgba(0,0,0,0.6);
}
.spin_wrap {
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;  
}
.spin_span {
     width: 7rem;
     height: 7rem;
     border: .3rem #ddd solid;
     border-top: .3em var(--il-blue) solid;
     border-radius: 50%;
     animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
     100% {
          transform: rotate(360deg);
     }
}

/********** SPINNER **********/





/********** OTHER **********/

.lit{
   background: #ffff99;
}

/********** OTHER **********/