﻿@media only screen and (min-width:1025px){
.nav_float {display:block!important;} /* desktop menu wrap */
.menu-wrap {display:none!important;} /* mobile menu wrap */
}

/* keyboard navigation tab focus rules */

/*[role="menuitem"]:focus {
  outline: 1px dashed #003366!important;
  }
*/

/* Default: hide focus outlines */
a:focus {
  outline: none;
}

/* Show focus outlines only when user is navigating with keyboard */
body.user-is-tabbing .csp-menu li a:focus {
  outline: 1px dashed #fff!important;
  outline-offset: -2px; 
  }

body.user-is-tabbing .csp-menu .menu-l1 li a:focus {
  outline: 1px dashed #003366!important;
  outline-offset: -2px; 
  }
  
 body.user-is-tabbing #panelWrap li a:focus {
  outline: 1px dashed #003366!important;
  outline-offset: -2px; 
  }


/* 
.csp-menu li a:focus {
  outline: 1px dashed #fff!important;
  outline-offset: -2px; 

  }

.csp-menu .menu-l1 li a:focus {
  outline: 1px dashed #003366!important;
  outline-offset: -2px; 

  }

#panelWrap li a:focus {
  outline: 1px dashed #003366!important;
  outline-offset: -2px; 
  }
*/
/* end keyboard navigation tab focus rules */

ul.csp-menu {position:relative;}

.main_menu li a {text-decoration:none!important;} /* override of
 reboot.css from bootstrap */

.menu-l1 {position:absolute; z-index: 900 /*Make sure this element does not cover DORA when it is expanded - DORA is set to 999 and 998  */; margin-left: -163px!important; width:100%; background-color: #4cc4bd; display:grid!important; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0px;}
.menu-l1 li {}
.menu-l1 > li > a, .menu-l1 > li > a:visited {background-color: #4cc4bd!important;}
.menu-l1 > li > a.open {background-color: #94dcd7!important; color :#003366!important;}
.menu-l1 > li > a:hover {background-color: #94dcd7!important; color :#003366!important;}

.main_menu .menu-l1 li a {width: 200px; color:#003366;}



.main_menu .menu-l1 > li.menuIcon > a::after  {
 <i class="fa-solid fa-caret-down"></i>
    font-size: 14px;
    color: #003366!important;
    margin-left: 7px; /* Adds spacing between text and arrow */
    text-decoration:none!important;
}
/* level 2 menu */

.menu-l2 {left:0;width:95%; padding: 0 25px 15px 25px!important;}

.menu-l2 li {float:none!important;}


.menu-l2 > li > a, .menu-l2 > li > a:visited {display:block; background-color: #94dcd7
!important; color:#003366!important; line-height:1.25em!important; padding: 10px 0px; font-size: 14.5px;}
.menu-l2 > li > a:hover {color: #006666!important; text-decoration:underline; transition: color 0.3s ease /* Apply transition */}

.menu-l2 li a.menu-title:hover {color: #003366!important; text-decoration:none!important; cursor:default!important;} /* set cursor for a tags that are not links */


ul.menu-l2.show {
	display:grid;       
}

.parents-menu{display:none;position:absolute;background-color: #94dcd7
;!important; grid-template-columns: 10% 18% 22% 16% 25%; gap:25px; width:95%; padding:10px 25px 15px 25px!important;}

.resources-menu{display:none;position:absolute;background-color: #94dcd7
;!important; grid-template-columns: 40% 20%;  gap:90px; width: 80%;padding :10px 0 15px 200px!important;}
.employers-menu{display:none;position:absolute;background-color: #94dcd7
;!important; grid-template-columns: 30% 25% 25%;  gap:50px; width: 88%; padding:10px 0 15px 120px!important;}
.log-in-menu {display:none;position:absolute;background-color: #94dcd7
;!important; grid-template-columns: 30% 25% 30%;  gap:40px; width: 90%; padding:10px 0 15px 100px!important;}

.main_menu .menu-l2 li a {text-transform: none; text-align: left; line-height: 30px; width: auto;}


.menu-l3{}
.menu-l3 > li > a, .menu-l3 > li > a:visited {display:block; background-color: #94dcd7
!important; color:#003366!important; font-weight:normal; font-size: 14.5px;}
.menu-l3 > li > a:hover {color: #006666!important; text-decoration :none;  transition: background-color 0.3s ease-in-out;}



.link-icon {visibility:hidden;}
.menu-l3 > li > a:hover > .link-icon {visibility: visible;
}


/*
.menu-l3 > li > a > span.link-icon, .menu-l3 > li > a:visited > span.link-icon {display:none;}
.menu-l3 > li > a:hover > span.link-icon {display:inline;}
*/