/* CSS Document */
:root {

	--dark-pink: #bb3784;
	--light-pink: #bb3784;
	--blue: #75c5c1;
	--dark-blue: #263e50;
	--light-blue: #75c5c1;
	--green: #75c5c1;
	--dark-green: #75c5c1;
	--dark-yellow: #e5b52f;
	--grey: #555458;
	--inner-width: 1245px;
	--narrow: 855px;
		
	/* 2024 */
	--pale-grey: #eaeaea;
	--pink: #bb3784;
	--navy: #263e50;
	--orange: #e47e4c;
	--teal: #75c5c1;
	--yellow: #e5b52f;
	--gradient-navy: linear-gradient(90deg, #bb3784, #263e50);
	--gradient-teal: linear-gradient(90deg, #75c5c1, #ffffff);
	--gradient-orange: linear-gradient(90deg, #e47e4c, #ffffff);
	--gradient-yellow: linear-gradient(90deg, #e5b52f, #ffffff);		
--gradient-pink: linear-gradient(90deg, #bb3784, #ffffff);
}

/* main nav */
#mainnav{text-align: right; font-size:1rem; color:var(--navy)}
#mainnav > ul{list-style: none; margin: 0px; padding: 0px}
#mainnav > ul > li{margin: 0px; padding-left: 5px; display: inline-block; position: relative}
#mainnav > ul > li > a{display:block; cursor:pointer; transition:all 300ms ease; padding: 12px 20px 12px 15px; color:var(--navy); margin: 0}
#mainnav > ul > li:first-of-type > a{margin:0}
#mainnav > ul > li > a:hover{color: var(--pink)}


/* sub nav */
#sub-menu-loader{width:100%; padding:0; display: none; position: absolute; top: 117px; left 0; z-index:1000}

#sub-menu-loader .sub-nav-flex{background:#fff; color:var(--navy); max-width:760px; margin:0 auto; border:1px solid #f8f8f8; padding:30px}
#sub-menu-loader .sub-nav-flex > div{width:100%}
#sub-menu-loader .sub-nav-flex h2{font-size:30px; padding:0; margin:0 0 30px}


#sub-menu-loader .sub-menu{list-style:none; padding:0; margin:0; display:flex; justify-content:flex-start; align-items:stretch; flex-wrap:wrap; column-gap:30px; grid-row-gap: 15px; box-sizing:border-box}
#sub-menu-loader .sub-menu li{width:100%; max-width:231px; min-width:231px; box-sizing:border-box; border-radius:10px}

#sub-menu-loader .sub-menu li > a{display:block; width:100%;  color:var(--navy); box-sizing:border-box}
#sub-menu-loader .sub-menu .sub-menu-item{padding:0px; width:100%; min-width:231px; max-width:231px; height:100%; min-height:101px; border-radius:10px; box-sizing:border-box; display:flex; justify-content:flex-start; align-items:center; position:relative}
#sub-menu-loader .sub-menu .sub-menu-item > div{padding:30px 0 30px 10px; width:100%; max-width:50%; box-sizing:border-box; background:transparent; line-height:1.4; font-size:1rem; font-weight:700}

#sub-menu-loader .sub-menu .sub-menu-item .menu-grad{background: linear-gradient(to right, white, white 25%, transparent); position:absolute; top:0; left:0; width:100%; height:100%; display:block}

.sub-menu-title{position:relative}
.sub-menu-floater{font-size:1rem; font-weight:500; position:absolute; right: 0; top:10px}

#mainnav .sub-menu{display: none}
#mainnav > ul > li > .current-menu-item a{border-bottom:2px solid #ACACAC; color: #000}
#mainnav .menu-item-has-children::after { content: '\f107';font-family: 'Font Awesome 5 Free';font-weight: 900; padding-left: 8px; position:absolute; top:16px; right:5px; color:var(--pink) !important}
#mainnav .activeNav{background: #fff; border-left:4px solid var(--pink) !important}


#topLoginBar{background:var(--gradient-navy); color: #fff; position: relative; z-index: 101; padding: 0}
#topLoginBar > div{max-width:var(--inner-width); margin: 0 auto; text-align: right; position: relative}
#topLoginBar a{color: #fff; font-size:1rem; letter-spacing: 1px; display:inline-block; padding: 0 35px 0 0; margin: 0px; transition:all 300ms ease; position: relative; font-weight:600}
#topLoginBar a:hover{opacity: 0.6}

#topLoginMenu{list-style:none; padding: 3px 0 5px; margin: 0}
#topLoginMenu > li{display: inline-block; padding-left: 15px}
#topLoginMenu > li:last-of-type a{padding-right: 0}




#mobnav{background-color: #fff; color: var(--navy); position: fixed; top:74px; left:0px; z-index: 105; display: none; width:100%; height: calc(100vh - 72px); overflow: auto}
#mobnav a{color: #fff}


#mobnavfloat{display:none; position: fixed; transition:all 100ms ease; top:0; left:0; align-items: center; justify-content: space-between; column-gap: 5px; background: #fff; width:100vw; z-index: 102}
#mobnavfloat > div{width:100%; padding: 0; box-sizing: border-box}
#mobnavfloat > div:first-of-type{padding: 5px 0 5px 20px}
#mobnavfloat > div:first-of-type img{min-height: 57px; max-height: 57px; margin: 5px 0 0}

#mobnavfloat .mob-nav-button{border-radius:10px; font-size: 0.8rem; background: var(--pink); color: #fff; display: flex; justify-content: center; align-items: center; height: 50px}
#mobnavfloat .mob-nav-button > div{text-align: center}



#mobnavbutton{cursor:pointer; z-index: 50; width:32px; margin: 0 auto; transform:translate(1px, -2px)}
#mobnavbutton > div{margin: 6px 0; border:0px; border:2px solid var(--dark-blue)}

#mobNavClose{display:none; min-width:24px; max-width:24px; min-height:24px; max-height: 24px; box-sizing:border-box; margin: 0 auto; position: relative}
#mobNavClose img{object-fit: contain; object-position: center; width:100%; height: 100%; display: block; position: absolute; left:0px; top:-4px; cursor: pointer}

@media (max-width: 1199px) {
	body{padding-top:66px}
	#mainnav{display:none}
	#mobnavfloat{display: flex}
	#topLoginBar, #hospitalTopBar{display:none}
	header{display:none}
}

.menu-item-has-children.active a{background-color: var(--pale-grey) !important}







/* Mob nav */
#mobnavmenu{border-top: 1px solid var(--dark-yellow); padding-top: 15px; background: #fff}
#mobnavmenu ul{list-style:none; padding: 0; margin: 0; background: #fff; color: var(--dark-blue); max-height: calc(100vh - 320px); overflow: auto}
#mobnavmenu ul > li{display:block; position: relative; padding: 0; margin: 0; background:#fff; color:var(--navy)}
#mobnavmenu .fa-angle-right{color:var(--pink); position: absolute; top:12px; right:40px; font-size:1.4rem}
#mobnavmenu a{display:block; padding: 9px 10px 9px 15px; color: var(--dark-blue) }
#mobnavmenu a:hover{color: var(--pink)}

#mobnavmenu .sub-menu{display:none; background: #fff; list-style: none; padding: 60px 0 0; margin: 0; position: fixed; top:60px; left:0; width:100vw; min-height:calc(100vh - 60px); z-index: 2000; overflow: auto}
#mobnavmenu .sub-menu li{display: block; padding: 0; margin: 0}

#mobnavmenu .sub-menu .has-children ul{margin-left: 30px; display:none}

#mobnavmenu .menu-grad{display:none !important}
#mobnavmenu .sub-menu-item{background-image:none !important; background-color:#fff !important}
#mobnavmenu > a{color: var(--navy)}
#mobnavmenu div{color:var(--navy); background: #fff !important}
#mobnavmenu .sub-menu{padding-top:30px}

#mob-sub-back{display: none; justify-content: space-between; align-items: center; z-index: 2006; background-color: var(--navy)}
#mob-sub-back > div{flex-grow:1; color: #fff}
#mob-sub-back > div:first-of-type{background: var(--pink); padding: 6px 0; max-width: 60px; font-size:2rem; text-align: center; cursor: pointer}
#mob-sub-back > div:last-of-type{ text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; padding: 0 0 0 15px}


#mob-nav-footer{position: fixed; bottom:0; left:0; width:100vw; z-index: 1800; box-sizing: border-box}
#mob-nav-footer .button{margin: 0 10px 10px; display: block; border-radius:10px}


.mob-nav-footer-flex{display: flex; justify-content: space-between; align-items: center; color: #fff; margin: 15px; column-gap: 15px}
.mob-nav-footer-flex > div{width:100%; max-width: 50%}
.mob-nav-footer-flex > div:first-of-type{cursor: pointer}
.mob-nav-footer-flex > div:nth-of-type(2){max-width:50%; text-align: right}
.mob-nav-footer-flex > div img{height:34px; max-height: 34px; min-height: 34px; width: auto}



/* Account page nav */
.account-page{display: flex; justify-content: flex-start; align-items: stretch; margin: 0 auto}
.account-page > div{flex-grow: 1; padding: 30px}
.account-page > div > div{max-width:900px; margin: 0 auto}
.account-page > div:nth-of-type(1){background: linear-gradient(0deg, #263e50, #bb3784); min-width:320px; max-width: 320px}
.account-page > div:nth-of-type(2){max-width:1200px}
.account-page h1{margin:0; padding:0 0 15px; font-size:2rem}
.account-page .show-all{text-align:right; position: relative}
.account-page .show-all a{position:absolute; top:7px; right:0; text-decoration: underline; color: #000}

.account-page.training-setup{}
.account-page.training-setup > div{max-width: 100%; padding: 0}
.account-page.training-setup > div:first-of-type{display: none; max-width:100%}
.account-page.training-setup > div:last-of-type{max-width: 100% !important}
.account-page.training-setup > div > div{max-width: 100%}

.account-nav h3{font-size:1rem; font-weight:500}
.account-nav h3 span{border-bottom:3px solid var(--teal)}
.account-nav{color:#fff; font-weight:500; font-size:1.1rem}
.account-nav a{display:block; color: #fff; padding: 5px 0}
.account-nav ul{list-style: none; padding: 0; margin: 0}
.account-nav ul ul{font-size:0.9rem; margin:0 0 0 30px; display:none}

.account-nav .has-children{position: relative}
.account-nav .has-children:after{content: '\f107'; font-family: 'Font Awesome 5 Free'; display: inline-block; font-weight: 600; position: absolute; right:0; top:3px}

.account-home-welcome{border:4px solid var(--pink); padding:30px; margin: 0 auto 30px}
.account-home-welcome h2{padding:0; margin:0}


@media (max-width: 1200px) {
	.account-page{justify-content: space-around}
	#portalloader > h1:first-of-type{text-align: center !important}
	#portalloader > h2:first-of-type{text-align: center !important}
	.account-page > div:nth-of-type(1){display:none}
	.account-page > div:nth-of-type(2){max-width: 100% !important; padding: 10px !important; overflow-x: hidden;}
}



/* Filter boxes */
.filter-box{border:2px solid var(--navy); border-radius:5px; padding: 22px 5px; position: relative; box-sizing: border-box; width:100%; min-width: 300px; font-size:0.8rem; line-height:1rem; font-weight:600; z-index: 100; background: #fff; color: var(--navy)}

.filter-box input{}

.filter-box .filter-options{background: #fff; position:absolute; top:-2px; left: -2px; width: calc(100% - 40px); border:1px solid #ccc; box-shadow:1px 1px 5px rgb(0,0,0,0.5); z-index: 101; display: none; border-radius:5px; border:2px solid var(--navy)}
.filter-box .default-item{padding: 0; position: absolute; top:0; left:0; text-align: left; cursor:pointer; width:100%; height: 100%; display: flex; justify-content: center; align-items: center}

.filter-box .default-item > div{padding: 0 40px 0 10px; text-align: left; flex-grow:1; color: var(--navy) !important; border-radius:4px}

.filter-box .fas{position: absolute; top:6px; right:10px; font-size:2rem; color:var(--pink)}

.filter-box .no-icon{display: none}

.filter-item{text-align: left; width:100%}

.filter-item-flex{display: flex; justify-content: space-between; align-items: center; width: 100%; transition:all 300ms ease-in-out; cursor:pointer}
.filter-item-flex:hover div{background:#f8f8f8}
.filter-item-flex > div{width:100%; flex-grow:1}
.filter-item-flex > div:first-of-type{max-width:50px; min-width: 40px; height: 40px; margin: 5px 0 5px 5px}
.filter-item-flex > div:first-of-type img{object-fit:contain; object-position: center; width:100%; height: 100%}
.filter-item-flex > div:last-of-type{padding: 10px 0 10px 10px; text-align: left}
.filter-item-flex.selected{background:#f8f8f8}