/*****
  original color themes by Kay McKelly
  all blame for changes goes to Tanja Lange
 
  HEX: #3B1D59, #2EA656, #E6E7F0, #5D2E8C, #008577
  RGBA: rgba(59, 29, 89, 1), rgba(46, 166, 86, 1), rgba(230, 231, 240, 1), rgba(93, 46, 14
0, 1), rgba(0, 133, 119, 1)
  HSLA: hsla(270, 50, 23, 1), hsla(140, 56, 41, 1), hsla(234, 24, 92, 1), hsla(270, 50, 36
, 1), hsla(173, 100, 26, 1) ->
HEX: #0b0b31, #191970, #E6E7F0, #480092, #441970
  RGBA: rgba(11, 11, 49, 1), rgba(25, 25, 112, 1), rgba(230, 231, 240, 1), rgba(72, 0, 146, 1), rgba(68, 25, 112, 1)
  HSLA: hsla(240, 64, 27,1), hsla(240, 64, 27, 1), hsla(234, 24, 92, 1), hsla(270, 100, 230, 1), hsla(270, 64, 27, 1)

dark puple, bright green (only used in title background), light grey (in background), intense puple (highlights), teal (titles) ->
dark midnight #0b0b31 RGBA(11, 11, 49, 1) HSL(240, 63%, 12%)
dark midnight 
keep light grey
radiant blue tw violet #480092 RGBA (72, 0, 146, 1) HSL(270, 100%, 29%)
violet #441970 RGBA(68, 25, 112, 1) HSL(270, 64%, 27%)

used after all (in one warm option)
orchid #DA70D6 RGBA(218, 112, 214, 1) HSL(302, 59%, 65%)

skipping (for now)
purple #480052 RGBA(72, 0, 82, 1) HSL(293, 100%, 16%)

*****/


/***** General styling *****/
body {
  background-color: #FEFDFB;
}

/***** Header (in /includes/nav.php) *****/
.headerImg {
  background: #0b0b31;
  background-image: url("../images/banners/ein-city-night-banner.jpg");
  height: 490px;
  background-position: center 60%;
  background-repeat: no-repeat;
}

@media (min-width: 786px) {
  .headerImg {
    height: 440px;
  }
}

.headerTitle {
  color: #F2F3F7;
  text-shadow: 3px 3px 3px #0b0b31;
  font-size: 3.4rem;
}

.headerInfoTop, .headerInfoBottom {
  color: #F2F3F7;
  text-shadow: 2px 2px 2px #0b0b31;
}

@media (max-width: 1073px) {
  .headerInfoTop, .headerInfoBottom {
    font-size: 1.8rem;
  }
}

#titlesLogoDiv {
  /* imitate .flex-column sans !important */
  flex-direction: column;
  padding-top: 3rem;
}

@media (min-width: 992px) {
  #titlesLogoDiv {
    /* imitate .flex-column sans !important in sizes smaller than lg */
    flex-direction: row;
    /* different styling for header contents at different sizes */
    padding-top: 6.7rem;
  }
}

img#logo {
  border-radius: 50%;
  box-shadow: 0 0 20px 0 rgba(242, 243, 247, 0.6);
}


/***** Nav (in /includes/nav.php) *****/
div.dropdown-menu {
  color: black;
  background-color: #0b0b31;
}

#mainNavRow {
  background-color: #0b0b31;
}

ul#nav-ul a.nav-link:hover {
  color: #E6E7F0;
}
 
footer {
  background-color: #E6E7F0;
  padding: 1rem 0;
  margin-bottom: 0 !important;
}
 


/***** Main Content (e.g. h1-h6, a, text, etc) *****/
.indPageTitle {
  color: #441970;
}

.pageSubtitle {
  color: #441970;
  /* paler option of the bg gray */
  /* color: #6F6FA5; */
  font-weight: normal;
}

.subSubtitle {
  /* midnight option */
  /* color: #0b0b31; */

  /* radiant purplish blue option */
  color: #480092;
}

a {
  color: #441970;
}

a:hover {
  color: #480092;
}

/* NOTE: custom button colors typically derived from the two most common colors in a given theme */
/* wasn't listed above, but changed to reddish puple*/
.customBtn-warm {
  background-color: rgba(245, 132, 150, 0.4);
}

.customBtn-warm:hover {
  background-color: rgba(239, 58, 88, 0.8);
  color: #FEFDFB;
}

.customBtn-cool {
  background-color: rgba(72, 0, 146, 0.2);
}

.customBtn-cool:hover {
  background-color: rgba(72, 0, 146, 0.8);
  color: #FEFDFB;
}

code {
  color: #8C3585;
}



/***** Main Content: cards & alerts *****/
.customCard {
  border: 1px solid #480092;
}

.customCardHeader {
  background-color: #480092;
  color: #FEFDFB;
}

.dateTitle {
  color: #441970;
}

.icon {
  filter: brightness(0) saturate(100%) invert(43%) sepia(78%) saturate(4995%) hue-rotate(329deg) brightness(96%) contrast(95%);
}

.customAlert-warm {
/* not changed, wasn't listed above */
  background-color: rgba(140, 53, 133, 0.2);
  border-color: rgba(140, 53, 133, 0.5);
}

.customAlert-cool {
  /* NOTE (from Kay): this may be slightly duller than you want/too close to cool button color; you probably don't want buttons and alerts to be very similar colors */
  background-color: rgba(68, 25, 112, 0.2);
  border-color: rgba(68, 25, 112, 0.5);
}

.customCardFooter {
  background-color: #E6E7F0;
}


/**** Program specific colors ********/
div.trackMenu a.nav-link {
  color: #441970;
}

div.trackMenu .nav-link.active {
/* not changed, wasn't listed above */
  background-color: rgba(177, 181, 231, 0.2) !important;
  color: #480092 !important;
}

div.sessionList div.session {
  background-color: rgba(177, 181, 231, 0.2);
}