/** CSS BELOW OVERRIDES CSS IN COLA, BOOTSTRAP AND OTHER BACKGROUND SOURCES **/

    /* basically positions the dropdown arrow, overrides a background CSS style. */
    /* !important is used here to override the css in the cola and other innate background style sheets */
    .Menu_DropDownArrow {
        top: 0px !important; 
        margin-right: 10px;
    }
    
    /* for the drop-down menu boxes */
    .Menu_DropDownPanel {
        margin-left: 12px !important; /* shifts the menu boxes left */
        margin-top: -5px !important; /* shifts the menu boxes up */
    }

    .Menu_TopMenu a, .Menu_TopMenu a:link, .Menu_TopMenu a:visited {
        display: inline-block !important;
    }
    
    .dropdown-link {
        margin-right: 2px !important;       
    }
    
    .dropdown-link-text {
        margin-bottom: 15px !important;
    }
    

    /* presumably this is for the links */
    .Menu_DropDownPanel a, .Menu_DropDownPanel a:link, .Menu_DropDownPanel a:visited {
        padding: 7px 15px 7px !important; /* aligns the padding around the borders of the menu boxes */
        width: 120px !important; /* decides the width of the drop-down choice boxes */
        height: 40px !important;
        min-width: 205px !important;
        /* margin-left: 10px; */
    }

    /*.bs-docs-nav .navbar-nav>li>a */
    .Menu_TopMenu a,
    .Menu_TopMenu a:link,
    .Menu_TopMenu a:visited {
        font-weight: 500;
        color: #0083be;
    }


    /*.nav > li > a */
    /*.navbar-nav > li > a*/
    .Menu_TopMenu a,
    .Menu_TopMenu a:link,
    .Menu_TopMenu a:visited {
        padding: 15px;
        line-height: 20px;
        display: block;
        text-decoration: none;
        color: :#0083be!important;
    }
    
    /* for hovering over the links */
    .Menu_TopMenu a:hover,
    .Menu_TopMenuActive a,
    .Menu_TopMenuActive a:link {
        color: #FFF;
        background-color: #20487b;
    }
    
  

/** END OF BACKGROUND OVERRIDING **/



.dropdown_top_cover{
    cursor: pointer;

}

.dropdown_mobile_container{
    display: none;
}


/* for the dropdown top box, currently unused */
.dropdown_top{
    margin-left: 16px;
    margin-right: 2px;
    padding-top: 16px;
    display: inline-block !important;
    color: #20487b !important;    
    font-weight: 500 !important;
    
}

.dropdown_top:hover{
    border-bottom: 2px solid #428BCA;
}


/* css for the submenu blocks, please do not delete */
.dropdown_submenu{
    display: block;
    width: 75%;
}

.dropdown_submenu_text{
    text-decoration: none;
    font-size: 14px;
    font-family: "Fira Sans", sans-serif;
    color: #20487b !important;    
    font-weight: 500;
}

.dropdown_submenu_text:hover{
    border-bottom: 2px solid #428BCA;
}



/** CSS FOR DROPDOWN MENU ON MOBILE **/

    /*remove list style (circles)*/
    .cola-collapsible {    
        list-style: none;
        font-family: "Fira Sans", sans-serif;
        font-size: 14px;
        text-align: center;
        color: #20487b !important;    
        font-weight: 500 !important;
        /*cursor: pointer;*/
     }
    /*set border for every line of menu nad remove top border becouse we dont want double border with header border. */
    .cola-collapsible li { 
        border-top:0;
        margin: 0;
        padding-right: 35px;
     }
     .cola-collapsible ul { 
        /*
        padding-top: 10px;
        padding-bottom: 10px;*/
     }
     
    /*remove decoration from text links and treat it as a block.*/
    .cola-collapsible li a {
        /*text-decoration:none;
        color:#666;
        padding:8px 12px;*/
        /*color: #20487b !important; */
        display:block;
        text-decoration: none;
        
     }
     
     
    /*we dont want text to be underline as regular link*/
    .cola-collapsible li a:hover {
        /*background: #F8F8F8;*/
        text-decoration: none !important;
        /*border-bottom: 2px solid #428BCA !important;*/
        
     }
    /*remove list style (circles) for submenu*/    
    .cola-collapsible li ul {
        list-style: none;
        /*background: #d3d3d3;*/
        display: none;
        margin-right: -83px;
        margin-left: -138px;
     }
    /*remove border and set only bottom border for submenu*/    
    .cola-collapsible li ul li {
        margin:0; 
        border:0; 
        padding-left:35px;
        /*border-bottom:1px solid #bbb;*/
     }
    /*remove bottom border from last element in submenu*/    
    .cola-collapsible li ul li:last-child {
        border-bottom:0;
     }
    /*set padding for submenu to be inline with maimenu*/    
    .cola-collapsible li ul li a {
        /*padding: 5px 10px; 
        padding-left: 33px;*/
        padding-left: 15px !important;
        color: #20487b !important; 
        /*background: #d3d3d3;**/

     }
    /*remove text decoration for links*/
    .cola-collapsible li ul li a:hover {
        
        /*background: #d9d9d9;*/ 
    }
    /*for menu witch have a submenu display some icom*/
    .cola-collapsible .dropdown > a { 
        /*background: url(/images/arrowdown.png) no-repeat right center;*/ 
    }
    /*set some hover color on drop down menu*/
    .cola-collapsible .dropdown > a:hover { 
        /*background: #F8F8F8 url(/images/arrowdown.png) no-repeat right center !important;*/ 
    }
    
    .activeDropdown {
        font-weight: bold;
        border-bottom: 2px solid #428BCA !important;
    }

    /* don't display the mobile form normally */
    .mobilesearch{
        display: none;    
    }
/** END OF CSS FOR DROPDOWN MENU ON MOBILE **/


@media (max-width: 1024px) {
    .dropdown_top_cover{
        display: none !important;
    }
    

    .dropdown_top{
        display: none !important;
    } 
    .dropdown_mobile_container{
        display: block !important;
        font-size: 16px;
    }
    
    .dropdown_right_pad{
        margin-top: -20px;
    }
    
    .navbar-toggle {
        display: block !important;
        float: right !important;
        position: relative !important;
    }
        
    .navbar-header {
        float: none !important;
    }
 
    .navbar-nav {
        padding-left: 10px !important;
        padding-right: 20px !important;
        width: 100%;
        margin: 0px !important;
    }
    
    .navbar-collapse.collapse.in { 
        display: block!important;
    }

    /* used exclusively for the spacing between the drop-down menus and the other menu selections in mobile view */
    ul, ol {
        /*margin-top: 3px !important;*/
        margin-bottom: -7px !important; /* used to close the gap between the bottom dropdown menu option and the option that follows after it */
    }
    
    .Menu_TopMenu .activeDropdown {
       /* a lot of this stuff affects the dropdown on mobile */
       font-weight: 600 !important;
       font-size: 18px !important;
       color: #FFFFFF !important;
       background-color: #20487B !important;
       padding-left: 10px !important;
       /* text-align: center !important; */
       margin-left: 0px !important;
        margin-right: 0px !important;
       border-bottom: 2px solid #20487b !important;
       /*margin-top: -3px !important;*/
       width: 100%;
    }
    
    .Menu_TopMenu .mobile_dropdown a:hover {
    /border-bottom: solid 0px #1d8acb !important; 
    }
    
    .Menu_TopMenu.Menu_TopMenuActive a {
        border-bottom: 0px solid #1d8acb;
        background-color: #FFFFFF; /* background of a selected option is white-space: , this can be changed */
        margin-left: -100%; /* stretches the background all the way to the sides */
        margin-right: -100%;
    }
    
    .Menu_TopMenu .notDropdown:hover {
        border-bottom: solid 0px #1d8acb;
        margin-left: -100%; /* same for here */
        margin-right: -100%;
        background-color: #FFFFFF !important; 
    }
    
    
    /* css for highlighting the already chosen page in the dropdown menu, currently unused */
    .chosen_page {
        border-bottom: 2px solid #428BCA;
        margin-bottom: -2px;
        background-color: #FFFFFF !important;
    }
    
    ul.cola-collapsible {
        padding-left: 0px;
    }
    
    .cola-collapsible li { 
        border-top:0;
        margin: 0;
        padding-left: 0px !important;
        padding-right: 0px !important;
     }
     
     .cola-collapsible li ul {
        margin-right: 0px;
        margin-left: 0px;
        padding-left: 0px;
    }
    
    .cola-collapsible li ul li {
        padding-left: 0px;
        padding-right: 0px;
    }
     
/* specific code for the selections in the mobile dropdown, used due to nesting selections no longer working */
   li > .cola-selection {
        width: 100% !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding-right: 12px !important;
        /*background-color: inherit !important;*/
        font-size: 14px !important;
    }
    /* what happens when a selection in the dropdown is clicked on */
   li > .cola-selection:hover{
        border: 0px solid #428BCA !important; /* sort of overrides the default .Menu_TopMenu border-bottom css */
        background-color: #FFFFFF !important;
        font-size: 14px !important;
        margin-left: -100% !important; /* these two stretch the white background all the way top the sides */
        margin-right: -100% !important;

    }
    
    .cola-selection-current{
        background-color: #FFFFFF !important;   
        margin-left: -100% !important; /* same for these two as well */
        margin-right: -100% !important; 
    }
    .Menu_TopMenus.OSInline {
        display: block;
    }
    .Menu_TopMenus .Menu_DropDownButton {
        width: 100%;
    }
    
    .notDropdown {
        width: 100% !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    
    
    /* display the search bar normally on mobile, currently has no effects attached to it */
    .mobilesearch{
        display: inline;
        min-width: 170px;

    }
    
    /* CSS for the sliding search bar found on desktop is below */
    .mobile-container-2 {
        vertical-align: middle;
        white-space: nowrap;
        width: 100%;
        margin-bottom: 10px;
    }

            .mobile-container-2 input#mobile-search-text {
                width: 55%;
                margin-left: -4%;
                height: 50px;
                padding-left: 10px;
                padding-right: 8%;
               
            }
        
         input {
             appearance: none;
            -webkit-appearance: none;
             -moz-appearance: none;
            border: 1px solid #20487b;
         }
        
    input[type='search']::-ms-clear {
        display: none;
    } 
    input[type='search']::-webkit-search-decoration,
    input[type='search']::-webkit-search-cancel-button,
    input[type='search']::-webkit-search-results-button,
    input[type='search']::-webkit-search-results-decoration { display: none; }
            .mobile-container-2 .mobile-search-button {
                margin-left: -8%;
                vertical-align: middle;
            }
            
            
            .mobile-container-2 input#-mobile-search-text:focus, .mobile-container-2 input#search:active {
                outline: none;
                width: 94%;
                border: 1px solid #20487b;
                padding-left: 2px;
            }

            .mobile-container-2:hover input#search-text {
                outline: none;
                width: 94%; 
                border: 1px solid #20487b;
            }
}

@media (min-width: 768px){
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-left: 0px !important;
}
}

/** END OF CSS FOR MOBILE ONLY **/

/** CSS FOR LANDSCAPE MOBILE **/

@media only screen
    and (max-width: 1024px)
    and (orientation: landscape){

        /* used to allow the menu on landscape mobile to be able to scroll down */
        .mobile_landscape_menu{
            height: auto;
            max-height: 330px;
            overflow-x: hidden; /* likely because the menu is rendered from left to right */
        }
}


.mobile-container-2 a.mobile-search-button{
    width: 15px;
    margin-left: -7% !important;
    margin-right: 0 !important;
    display: inline !important;
    padding: 0 !important;
    background-color: white !important;   
}

    /*.bs-docs-nav .navbar-nav>li>a:hover, .bs-docs-nav .navbar-nav>.active>a, .bs-docs-nav .navbar-nav>.active>a:hover*/
.mobile-container-2 a.mobile-search-button{
        border-bottom:0px !important;
    }


.mobile-container-2 a.mobile-search-button:hover{
        border-bottom:0px !important;
    }

.SmartInput_Undo{
    display: none !important;
}

/** END OF CSS FOR LANDSCAPE MOBILE **/