/* Modified from http://thecodeplayer.com/experiment/vertical-accordion-menu-using-jquery-css3/3 */

.accordian {
   width: 250px;
   color: white;
   font-size: 15px;
   font-weight: bold;
   line-height: 2em;
   padding: 0px;
   padding-top: 5px;
   overflow-y: auto;
}

/* Although clicking the activating icon, or clicking OFF of nav will close nav,
 * ALSO present a "close" icon - especially useful for customers on a small form factor device */
.nav.accordian .closer {
   display: flex;
   justify-content: flex-end;
   color: #002855;
   cursor: pointer;
   padding: 10px 15px 0;
}

.nav.accordian .closer i {
   font-size: 24px;
}

/* CATEGORY emphasis on hover / focus */
.accordian li h3>a:hover,
.accordian li h3>a:focus {
   background-color: #002855;
   color: #FAFAFA !important;
   /* use !important here to OVERRIDE base_IE_20170517.css line 7 */
}

/* CHILDLESS category emphasis */
.accordian li h3.childless>a:hover,
.accordian li h3>a:focus {
   color: #8FC7FF !important;
   /* use !important here to OVERRIDE base_IE_20170517.css line 7 */
}

/* ACTIVE CATEGORY highlight */
.accordian li.active h3 {
   border-radius: 5px;
}

/* ENLARGE the header text of the active category header */
.accordian li.active h3>a,
.accordian li.active h3>a:focus .accordian li.active h3>a:hover {
   color: #FAFAFA;
   background-color: #002855;
   border-radius: 5px;
   padding: 8px 10px;
}

/* CURRENTLY NOT in use - retained for technique */
/* Embed the image of this category within it's header */
.accordian li.active h3:after {
   content: initial;
   /* set to "" instead to display the image, but lose the ability to close an open category */
   display: block;
   position: relative;
   top: 0;
   left: 0;
   /*  background:url("origin+full-path-to-image-url"); */
   background-size: cover;
   /* or contain - see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size */
   height: 60px;
   margin-top: -40px;
   width: 100%;
   opacity: 0.25;
   z-index: 101;
}

/* ENLARGE the header text of non-active CATEGORies (half of the active header size) */
.accordian h3 a {
   padding: 0 10px;
   line-height: 1.4em;
   display: block;
   color: #002855;
   text-decoration: none;
}

/* don't want the default list styling */
.accordian li {
   list-style-type: none;
   padding: 0px 10px;
   margin-right: 21px;
}

/* Add borders, emphasize CATEGORY level elements */
.accordian>ul>li {
   padding: 10px 10px;
   border-bottom: 1px solid #5353533b;
   margin: 5px 5% 0;
}

/* Make CATEGORY hover highlight larger (taller) */
.accordian>ul>li>h3>a {
   padding: 5px 5px 0;
   border-radius: 5px;
}

/* TOPIC heading styling */
.accordian ul ul li a {
   display: block;
   position: relative;
   text-decoration: none;
   line-height: 1.5em;
   padding-left: 22px;
   width: 100%;
}

/* SIZE emphasis on hover / focus of TOPIC (2nd level) elements */
.accordian ul ul li a:not(:only-child):hover,
.accordian ul ul li a:not(:only-child):focus {}

/* SIZE and COLOR emphasis for the active TOPIC element */
.accordian ul ul li.active a:not(:only-child) {
   color: #379CF4;
}

/*
.accordian ul ul li.active a:not(:only-child):hover, .accordian ul ul li.active a:not(:only-child):focus {
   color: #379CF4 !important;
   font-size: 16px;
}
*/
/* Adjust link indent */
.accordian ul ul ul li a {
   margin-left: -10px;
}

.accordian li.active h3 a:hover,
.accordian li.active h3 a:focus {
   color: #FAFAFA;
}

.accordian li a:focus {
   color: #F2F2F2;
   /* DARK background */
}

/* Highlight the active (hovered) 2nd level menu / item via sidebar */
.accordian ul ul li a:not(:only-child):hover,
.accordian ul ul li a:not(:only-child):focus {
   color: #379CF4 !important;
   /* use !important here to OVERRIDE base_IE_20170517.css line 7 */
   outline: none;
}

/* Highlight the active (hovered) 3rd level menu / item via sidebar */
.accordian li.active li.active li a:hover,
.accordian li.active li.active li a:focus {
   color: #8FC7FF !important;
   /* use !important here to OVERRIDE base_IE_20170517.css line 7 */
   outline: none;
}

/* HIDE non-active categories (and children) */
.accordian ul ul {
   display: none;
}

/* SHOW the active category (and children) */
.accordian li.active>ul {
   display: block;
}

.accordian ul ul ul {
   margin-left: 25px;
   border-left: 1px dotted rgba(0, 0, 0, 0.5);
   outline: none;
   width: 100%;
}

/* TOPIC indicator (collapsed) */
.accordian a:not(:only-child):before {
   content: "chevron_right";
   font-family: 'Material Icons Round';
   position: absolute;
   left: 0px;
   top: 0;
   padding-right: 10px;
}

/* TOPIC indicator (expanded) */
.accordian .active>a:not(:only-child):before {
   content: "expand_more";
}

/* styling for medium devices and smaller */
@media(max-width: 700px) {
   .nav.accordian .closer {
      padding-right: 25px;
   }

   .accordian li {
      margin-right: 30px;
   }
}

/* Modify default class styling for category navigation */
.accordian .info-you-saved {
   color: #B50000;
}

.accordian .info-you-saved:before {
   vertical-align: text-top;
   padding-right: 3px
}

.accordian .info-you-saved:hover:before {
   color: #8FC7FF;
}