/* ==================================================
    Portal Subnav Bar
    - inc. right aligned dropdown item
    - inc. dropdown item for login menu
    - inc. masquerade banner
================================================== */

/* light gray nav bar to navigate intervention portals */
.action-bar { background: #ede8ef; margin-bottom: 2rem; font-size: 0.9375rem; }
.action-bar a { display: inline-block; padding: .5rem 1.5rem; border-right: 1px solid #ccc; text-decoration: none; font-weight: normal; }

/* masquerade banner */
.masquerade-bar { background: #fdc8b3; margin-bottom: 1rem; border-radius: 3px; }
.masquerade-bar-text { color: #000000; text-align: center; padding: .5rem; font-size: 1rem; }

.session-info .login { display: inline-block; padding: .25rem 1rem; border: 1px solid #ccc; color: #07458A; text-decoration: none; border-radius: 3px; background: #fbfbfb; }
.session-info .login:hover, .session-info .login:focus { background: #f6f6f6;}
/* drop used in login and far right of navbar */
.drop { position: relative; display: inline-block; }
.drop button { border: none; background: none;  }
    .action-bar .drop button { padding: .5em 1.5em; border-left: 1px solid #ccc; color: #07458A; }        
        .action-bar .drop button:hover, .drop button:focus { color: #0670c9; }

    .session-info .drop button { padding: .25rem 1rem; border: 1px solid #ccc; border-radius: 3px; color: #07458A; background: #fbfbfb; }
    .session-info .drop button svg { color: #f5d044; }
        .session-info .drop button:hover, .session-info .drop button:focus { background: #f6f6f6; }
    
    .session-info { float: right; margin-top: 2rem; margin-right: 2rem; } /* float the login container since it's added with js */
    .grayBar .container:after {  content: ""; display: table; clear: both; }
    .text-yellow { color: yellow; } /* icon on name when masquerading */
    
.drop button span { padding-right: 1.15em; position: relative; }
.drop button span:before { content: ""; display: block; height: 0; width: 0; border: 5px solid transparent; border-top-color: rgb(156, 20, 102); position: absolute; right: 0; top: 50%; margin-top: -2px; }
    .session-info .drop button span:before { border-top-color: #07458A; }

/* dropdown menu lists for both */
.drop ul { padding: 0; margin: 0; list-style: none; position: absolute; top: 100%; right: 0; background: #eee8ef; z-index: 99999; border: 1px solid #ccc; border-bottom: none; box-shadow: 0 1px 2px 1px rgba(0,0,0,.2); font-size: .875rem; }
    #session-list { background: #eee; }
.drop ul[aria-hidden="true"] { display: none; }
.drop ul li { margin: 0; padding: 0;  }
.drop ul a { border-left: none; border-bottom: 1px solid #ccc; display: block; padding: .5rem; width: 15rem; margin-left: 0; background: rgba(0,0,0,0);  transition: all .2s linear; text-decoration: none; }
.drop ul .btn-sm { border-left: none; border-bottom: 1px solid #ccc; display: block; padding: .5rem; width: 15rem; margin-left: 0; background: rgba(0,0,0,0);  transition: all .2s linear; }
/*.drop ul a svg { color: #9c1466; }*/

/* login custom styles */
#session-list, #session-list a { border-color: #ccc; background: #fbfbfb; }
#session-list, #session-list .btn-sm { border-color: #ccc; }
#session-list a:hover, #session-list a:focus { background: #eee; text-decoration: none; transition: all .2s linear; }
#session-list .btn-sm:hover, #session-list .btn-sm:focus { background: #eee; text-decoration: none; transition: all .2s linear; }

@media (max-width: 61.99em) {
    .action-bar { border: 1px solid #ccc; border-bottom: none; }
    .action-bar a { display: block; border-left: none; border-right: none; border-bottom: 1px solid #ccc; }
    .action-bar > a:first-child { border-right: none; }
    .action-bar .drop { display: block; }
    .action-bar .drop button { border: none; border-bottom: 1px solid #ccc; width: 100%; text-align: left; }
    #actions-list { padding: 0; position: static; top: 0; box-shadow: none; border-left: none; border-right: none; }
    #actions-list a { width: 100%; padding-left: 3em; }
}
@media (max-width: 575px) {
    .session-info { float: none; margin: 0 0 1rem 0; }
    #session-list { left: 0; right: auto; }
    .session-info .drop button { padding: .5rem .8rem; }
    .session-info .drop button span { display: inline-block; width: 100%; }
    .session-info .drop { display: block; }
    .session-info .drop button { width: 100%; text-align: left; }
    #session-list { padding: 0; width: 100%; }
    #session-list a { width: 100%; padding-left: 1rem; }
}