/********** 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 **********/



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

/********** UIUC Oranges **********/
.il-orange           {background-color: var(--il-orange);}
.il-altgeld          {background-color: var(--il-altgeld);}
.il-altgeld-dark1    {background-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-link      {color: var(--il-orange);}
.il-orange-link:hover{color: var(--il-altgeld);}

.il-orange-txt      {color: var(--il-orange);}


/********** 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-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;}

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


/********** UIUC Grays ("Storms") **********/
.il-storm           {background-color: var(--il-storm);}
.il-storm-lite1     {background-color: var(--il-storm-lighter-1);}
.il-storm-lite2     {background-color: var(--il-storm-lighter-2);}
.il-storm-lite3     {background-color: var(--il-storm-lighter-3);}
.il-storm-lite4     {background-color: var(--il-storm-lighter-4);}
.il-storm-dark1     {background-color: var(--il-darker-1);}
.il-storm-dark2     {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 **********/



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

.lit{background: #ffff99;}

/********** OTHER **********/
/********** MAIN NAV **********/
#head_dev_strip {
     font-size: 12px;
     line-height: 12px ;
     height: 15px;
}
#head_title_strip {
     font-size: 1.3em;
     line-height: .9em;
}
.nav_unitext{        /* 'UIUC' stripe at top */
     font-family: 'Montserrat', sans-serif;
     font-weight: bold;
     font-size: .8em;
     letter-spacing: .1em;
}
.nav_wordmark{
     align-items: center;
     display: flex;
     flex-direction: row;
     flex-grow: 1;
     position: relative;
     line-height: 1.5rem;
}
.nav_wordmark a,
.nav_wordmark a:hover,
.nav_wordmark a:focus{
     text-decoration: none;
     color:#13294B !important;
}
.nav_logowrap{
     flex: 0 0 65px;
     position: relative;
}
.nav_logo{
     display: block;
     height: 43px;
     width: 30px;
     border-right: solid;
     border-width: 1px;
     padding-right:3.4rem;
}
.nav_schname{
     font-size: 1rem;
     font-weight: 400;
}
.nav_cfrcname{
     font-size: calc(16px + 6 * ((100vw - 320px) / 680));
     font-weight: 500;

}
.nav_cfrcname_smaller{
     font-size: .9rem;
     font-weight: 500;
}





/* BEGIN FORM CONTROLS */

.my_form{
     font-size: 1.1em;
}

.section_header{
     background-color: #e7e9eb;
     margin:2em 0 0 0;
     padding:0 0 0 .5em;
     font-size: 1.2em;
     border-radius: 1em
}
.control_container p, ul{
     font-size: .85em;
     color: #76787a;
     margin-bottom: .15em;
}
.control_container{
     padding: .3rem .75rem .3rem .75rem;
     background-color:#FFFFFF !important;
}

.my_check {
     font-size: .85em;
}

.rank_table{
     font-size: .85em;
}

.rankdot{
     text-align: center !important;
     vertical-align: middle !important;
}

.dotlbl{
     font-size: .75em;
}

.specfield{
     font-size: .75em;
}

textarea:-moz-placeholder, /* Firefox 18- */
textarea::-moz-placeholder, /* Firefox 19+ */
textarea:-ms-input-placeholder, /* IE 10+ */
textarea::-webkit-input-placeholder, /* Webkit based */
textarea::placeholder { /* Modern browsers */
  color: #000000 !important;  
}


.bg-plainwhite {
     background-color:#FFFFFF !important;
}


.hidden-input{
   opacity: 0;
   width: 0;
   height: 0;
   margin: 0;
   padding: 0;
}

/* END FORM CONTROLS */



/********** WIDTHS **********/

.w-5{width: 5%;}
.w-10{width: 10%;}
.w-15{width: 15%;}
.w-20{width: 20%;}
.w-25{width: 25%;}
.w-30{width: 30%;}
.w-35{width: 35%;}
.w-40{width: 40%;}
.w-45{width: 45%;}
.w-50{width: 50%;}
.w-55{width: 55%;}
.w-60{width: 60%;}
.w-65{width: 65%;}
.w-70{width: 70%;}
.w-75{width: 75%;}
.w-80{width: 80%;}
.w-85{width: 85%;}
.w-90{width: 90%;}
.w-95{width: 95%;}


/********** WIDTHS **********/






/********** FOOTER **********/

/********* sticky footer from: https://getbootstrap.com/docs/4.0/examples/sticky-footer/ **********/
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  display:flex;
  background-color:#DDDEDE !important;
}
.wmark-foot{
     line-height: 1rem;
}
.wmark-foot a,
.wmark-foot a:hover,
.wmark-foot a:focus{
     text-decoration: none;
     color:#13294B !important;
}
.cfrc-name-foot{
     font-size: 1rem;
     font-weight: 600;
}
.cfrc-addy-foot{
     font-size: .9rem;
     font-weight: 400;
}