/* Container positioning */
.nav-row {
    display: inline-flex;
    width: 100%;
    background: #e1f3f5;
}

#navigationPrimary {
    display: flex;
    margin-top: 24px;
    margin-left: 24px;
}

#navigationSecondary {
    display: flex;
    margin-top: 24px;
    margin-left: auto;
    margin-right: 24px;
}

.fund-details-row {
    background-color: #fff;
    padding-top: 24px;
    padding-left: 18px;
    /*position: absolute;*/
    z-index: 1;
    font-size: initial;
}

/* Resets */
.mega-menu,
.mega-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 10;
}

.mega-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: 0;
}

/* Icons */
.mega-menu > li > a .fa {
    margin-right: 0px;
}

.fa.fa-angle-down {
    margin-left: 5px;
    font-size: 10px;
}


/* Generic Focus Style */
.mega-menu *:focus {
  outline-color: #019ce0;
  outline-style: auto;
  outline-width: 5px;
}

/* Top Level Nav */
.mega-menu > li {
    list-style-type: none;
    display: inline-block;
    margin-right: 4px;
}

.mega-menu > li > a {
    position: relative;
    display: block;
    font: 400 14px/45px 'Signika', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    padding: 4px 12px;
    background-color: none;
    color: #102345;
}

.mega-menu > li > a:focus,
.mega-menu > li > a:hover {
    color: #0F3C86;
    background-color: #fff;
    border-radius: 16px 16px 0 0;
    tex-decoration: underline;
}

.mega-menu > li.selected > a,
.mega-menu > li.active > a,
.mega-menu > li.has-drop.active > a {
    background-color: #fff;
    color: #104BA9;
    border-radius: 16px 16px 0 0;
}

/* custom positioning for icon nav */
.mega-menu > li > a > img {
    position: relative;
    top: 8px;
}
/* end custom columns */

/* Second Level Nav */

#navigation-right .mega-menu > li {
    margin-left: 4px;
    margin-right: 0;
}

.mega-menu .droplet {
    display: none;
    z-index: 99;
    position: absolute;
    font-size: 14px;
    background-color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
        0 8px 10px 1px rgba(0, 0, 0, 0.14),
        0 3px 14px 2px rgba(0, 0, 0, 0.12);
    margin-left: -4px;
    margin-top: -4px;
}

.mega-menu .droplet.open {
    display: block;
}

.mega-menu .droplet.drop-left {
    min-width: 170px;
}

.mega-menu .droplet h2 {
    margin: 1px;
    padding: 0;
    margin: 4px 0 16px 0;
    font: 600 18px/42px 'Signika', Tahoma, Geneva, Verdana, sans-serif;
    text-transform: uppercase;
    border-bottom: 1px solid #ccc;
}

.mega-menu .droplet h3 {
    margin: 0 0 8px 0;
    color: #102345;
    font: 300 13px/24px 'Signika', Tahoma, Geneva, Verdana, sans-serif;
    text-transform: uppercase;
    display: inline-block;
}

.mega-menu .droplet hr {
    height: 1px;
    background: 0;
    border: 0 none;
    margin: 0 0 12px 0;
    border-bottom: 1px solid #ccc;
}

.mega-menu .droplet li h3 {
    margin: 0 0 0 0;
    line-height: 18px;
}

.mega-menu .droplet li hr {
    margin: 0 0 12px 0;
}

.mega-menu .droplet .col {
    display: inline-block;
    background-color:#fff;
    vertical-align: top;
    margin: 0;
    width: 90%;
    /*padding: 0 10px 8px 10px;*/
}

/* custom styles for report menu */
#nav-reports .droplet {
    width: 650px;
}

.mega-menu .droplet .report {
    display: inline-block;
    background-color:#fff;
    vertical-align: top;
    margin: 0 auto;
    column-count: 3;
    column-fill: auto;
    height: 365px;
    column-rule: 1px solid #ccc;
}

.mega-menu .droplet .report .col > * {
    width: 100%;
}

.mega-menu .droplet .report .col ul,
.mega-menu .droplet .report .col hr {
    margin: 0 8px 16px 8px;
}

.mega-menu .droplet .report .col h3 {
    margin: 0 8px 12px 8px;
}

.menu-header a#reports-pack-button {
    float: right;
    color: #b7e5f9 !important;
    border-radius: 6px !important;
    width: 200px;
    margin: -55px 6px 12px 0px !important;
}

/*
hacks to not display the hr for bottom of rows
this will require changes if more reports are added and the layout changes
*/

.mega-menu .droplet .report div:nth-child(1) ul,
.mega-menu .droplet .report div:nth-child(2) ul,
.mega-menu .droplet .report div:nth-child(1) h3,
.mega-menu .droplet .report div:nth-child(2) h3,
.mega-menu .droplet .report div:nth-child(1) hr,
.mega-menu .droplet .report div:nth-child(2) hr {
    /*width: 280px;*/
    /*margin-left: 0;*/
}

.mega-menu .droplet .report div:nth-child(1) ul,
.mega-menu .droplet .report div:nth-child(3) ul/*,
.mega-menu .droplet .report div:nth-child(5) ul*/ {
   height: 125px;
}

.mega-menu .droplet .report div:nth-child(2) hr,
.mega-menu .droplet .report div:nth-child(4) hr/*,
.mega-menu .droplet .report div:nth-child(6) hr*/ {
    display: none;
}

/* end custom styles */

.mega-menu .droplet .col {
    break-inside: avoid;
}

.mega-menu .droplet ul {
    padding: 0px;
    margin: 0;
    list-style-type: none;
}

.mega-menu .droplet li {
    font: 400 14px/18px 'Signika', Tahoma, Geneva, Verdana, sans-serif;
    margin-bottom: 10px;
    padding: 4px 0 2px 0;
}

.mega-menu .droplet a {
    display: block;
    color: #102345;
    margin: 0;
    padding: 0;
    white-space: no-wrap;
}

.mega-menu .droplet a.non-paid {
    color: #0F3C86;
}

.mega-menu .droplet a.disabled {
    color: currentColor !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    text-decoration: none !important;
}


.mega-menu .droplet .col a:hover {
}

.mega-menu .droplet .col a:focus,
.mega-menu .droplet .col a:active {
    /*outline: 2px solid #ccc;*/
}

/* Tweaks for smallest screen size */

@media (max-width: 1210px) {
    .mega-menu > li > a {
        padding: 4px
    }
}

/* Fund Details Row */
.fund-details-row {
    display: flex;
    justify-content: space-between;
    margin: 0 10px;
}

.fund-details-row a:link,
.fund-details-row a:visited {
    display: flex-item;
    line-height: 21px;
    margin-right: 20px;
    color: #102345;
    font-family: 'Signika', Tahoma, Geneva, Verdana, sans-serif;
}
