@import url("tokens.css");

#menu_top,
#container_menu .menu,
#qs-container,
#innerfooter,
#customsearch {
  max-width: 100%;
}

#menu_top,
#apptitle a,
#dashboardheader,
#header_top {
  display: none;
}


#pull {
    display: flex;
	align-items: center;
	font-size: 24px;
    text-decoration: none;
    color: var(--txtcolor);
	gap: 10px;
	white-space: nowrap;
	font-family: "Bolder regular", sans-serif;

    &:after {
        font-family: "Font Awesome 6 Pro";
        font-size: 24px;
        font-weight: 400;
        content: "\f0c9";

        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        color: var(--txtcolor);
        justify-content: center;
    }

    &[aria-expanded="true"]::after {
        content: "\f00d";
        color: var(--txtcolor);
    }


    &:focus {
        outline-offset: -1px;
    }
}

#container_menu {
    overflow: visible;
}

.b_menu-search-wrapper {
  display: flex;
  align-items: center;
}

.b_header-wrapper {
    display: flex;
    max-width: 1308px;
    padding: 0 var(--pad-obj-xl);
    justify-content: space-between;
    margin: auto;
    max-height: 1308px;
    height: 95px;
    align-items: center;
    position: relative;
    


    .b_menu-search-wrapper,
    #container_menu {
        position: unset;
        
    }
}

#innercontainer header {
	background-color: var(--white);
	border-bottom: var(--border) 1px solid;

	* {
		box-sizing: border-box;
	}

	.logo {
		min-height: 34px;
	}
}


#innerheader {
	p {
		margin: 0;
	}
}

.menu {
	display: none;
	gap: var(--gap-obj-mdl);
	list-style-type: none;
	padding-left: unset;
	margin: 0;

	&.b_menu-open {
		display: block;
        position: absolute;
        background-color: var(--white);
        top: 60px;
        left: 0px;
        width: 100%;
        z-index: 81;
		padding-bottom: 10px;
		

		li.active a {
			border-left: 4px solid var(--primary);
			border-bottom: 0;
		}

		a {
			padding: 20px var(--pad-obj-xl);
			height: auto;
			font-size: 18px;
		}
		
	}


	a {
		display: flex;
		align-items: center;
		text-decoration: none;
		color: var(--txtcolor);
		height: 95px;
		font-size: var(--font-menu-item);
		font-family: "Bolder regular", sans-serif;

		
	}


	li :hover, .active {
		a {
			border-bottom: 4px solid var(--primary);
		}
	}
}

#footer {
	background: var(--primary);
	margin-top: auto;

	#innerfooter {
		max-width: 1308px;
		margin: 0 auto;
		width: 100%;
		padding: var(--pad-obj-xl);
	}

	.footer {
		margin: 0 auto;
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding-bottom: 24px;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		flex-direction: column;
	}

	.footer__links {
		display: flex;
        width: 100%;
        gap: var(--gap-obj-mdl);
        border-bottom: 3px solid var(--white);
		flex-wrap: wrap;
	}

	a {
		color: var(--white);
		text-decoration: underline;
		text-decoration-color: var(--white);
	}

	.footer__logo a {
		text-decoration: none;
	}

	.footer__logo {
	width: 100%;
	text-align: right;
	}
}

/* search header */
 .search-header .b_header-wrapper {
	#innerheader p {
		height: 63px;
		box-sizing: border-box;
	}
} 





@media screen and (min-width: 1360px) {
	#innercontainer header {
		padding: 0;
	}
}


@media screen and (min-width: 1200px) {

	.mosaic-top-header.custom-layout,
	/* #mainwrapper, */
	#search-header {
		li#p15 {
				line-height: 144%;
		}

		#ctl00_menu {
			position: relative;
			top: 1px;

			#p15 a{
				position: relative;
				bottom: 1px;
			}
		}
	}


    #innercontainer {

        .b_menu-open,
        #pull {
            display: none;
        }

        .b_menu-search-wrapper,
        #container_menu {
            position: relative;
        }

        #ctl00_menu {
            display: flex;
            align-items: center;
            margin: unset;

				#p15 {
				margin-left: unset;
			}

			li:not(#p15) a {
				padding-left: unset;
			}
        }

		
    }

	#innercontainer header .logo {
		    height: 48px;
			position: absolute;
			left: 19px;
			top: 50%;
			transform: translateY(-50%);
	}

	#p15 {
		
		a {
			background-color: var(--magenta);
			display: block;
			padding: var(--gap-obj-xs);
			color: var(--white);
			height: fit-content;
			font-family: "Bolder bold", sans-serif;
            font-size: var(--font-size-md);

			&::before {
				content: "\f002";
				font-family: 'Font Awesome 6 Pro';
				margin-right: 4px;
			}
		}


	}

	#p15:hover a {
		background-color: var(--hover);
	}

	#footer {


		.footer {
			flex-direction: row;
			border-top: 3px solid var(--white);
			padding-top: 24px;
		}

		.footer__links {
			 border-bottom: none;
		}

		.footer__logo {
			width: auto;
			
		}
	}
}



@media screen and (min-width: 480px) {
	#innercontainer header .logo {
		min-height: 40px;
	}

		
}