/*** BEGIN HELPERS ***/
@font-face{
        font-family:eloquent-jf-pro;
        src:url(https://use.typekit.net/af/51a7cb/00000000000000003b9ada89/27/l?fvd=n4&primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&v=3) format("woff2"),url(https://use.typekit.net/af/51a7cb/00000000000000003b9ada89/27/d?fvd=n4&primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&v=3) format("woff"),url(https://use.typekit.net/af/51a7cb/00000000000000003b9ada89/27/a?fvd=n4&primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&v=3) format("opentype");
        font-display:auto;
        font-style:normal;
        font-weight:400
}

:root {
	--na-red: #E20037;
	--na-light-red: #E2003755;
	--na-lighter-red: #E2003730;
	--na-grey: #0000000D;
	--na-dark-grey: #0000004D;
	--na-darker-grey: #707070;
	--header-thickness: 75px;
}

.valign {
*/position: absolute;*/
	top: 0; bottom: 0; left: 0; right: 0;
	margin: auto;
	height: -moz-fit-content;
	width: -moz-fit-content;
	height: fit-content;
	width: fit-content;
}

/*** END HELPERS ***/

body { 
        margin: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
}
body {
	background: url(../img/background.svg) no-repeat center;
	background-size: cover;
	background-attachment: fixed;
	font-family: roboto;
}

h1, h2, h3, h4, h5, h6 { color: var(--na-red); }
h1 {
	font-family: eloquent-jf-pro, serif;
	font-weight: 400;
	font-size: 60px;
	line-height: 62px;
	color: var(--na-red)
}
h3 {
	font-family: roboto;
	font-weight: bold;
	font-size: 20px;
	line-height: 32px;
	color: black;
}

#header {
        margin-bottom: auto;
	background: #EEEEEE;
	width: 100%;
	height: var(--header-thickness);
        display: inline-flex;
        flex-direction: row;
}
#header p { 
        margin-left: 2%;
        align-self: center;
        font-weight: bold;
}
#header img { height: var(--header-thickness); }

#sidebar a { text-decoration: none; color: black; }
#sidebar {
	z-index: 100;
	position: fixed;
	right: 0;
	background: var(--na-grey);
	height: 100%;
	width: var(--header-thickness);
}

#aide-btn > img { height: 25px; margin-top: 10px; }
#aide-btn a { text-decoration: none; }
#aide-btn {
	border-left: solid 3px var(--na-red);
	width: var(--header-thickness);
	height: var(--header-thickness);
	text-align: center;
	font-size: 12px;
}


.panel > div { display: inline-flex; }
.panel a { text-decoration: none; }
.panel form { margin: 0; }
.panel {
        -webkit-box-shadow: 0px 0px 5px 0px rgba(150, 150, 150, 0.75);
        -moz-box-shadow:    0px 0px 5px 0px rgba(150, 150, 150, 0.75);
        box-shadow:         0px 0px 5px 0px rgba(150, 150, 150, 0.75);
        border-radius: 10px;
        background: white;
        padding: 30px 50px;
        margin: 10px;
        max-height: 600px;
        height: -webkit-fill-available;
        overflow-y: auto;
        z-index: 1;
}
.panel .input-wrapper { margin-top: 0; }

.panel-side-pic {
        max-width: 400px;
        display: block;
}

.panel-side-title {
        color: var(--na-red);
        max-width: 230px;
        margin: auto;
}

.panel-side-button {
        margin-top: 15px;
        background-color: white;
        border: solid 2px var(--na-red);
        border-radius: 4px;
        color: var(--na-red);
        width: 200px;
        height: 50px;
        font-family: roboto;
        font-size: 14px;
}

.provider-hbar {
        display: none;
}

.provider-separator { justify-content: center; }

.provider-separator > div {
        height: 40%;
        border: solid 1px var(--na-darker-grey);
        margin: 0 40px;
}

.provider-separator > p {
        text-align: center;
        height: 20px;
        margin: 20px 0;
        color: var(--na-darker-grey);
}

.provider  {
        max-inline-size: min-content;
        text-align: -webkit-center;
        font-size: smaller;
}

.id-provider {
        margin-bottom: 5%;
}

.providerLink {
        margin-top: -5%;
        text-align: center;
        margin-bottom: 5%;
}

.providerLink a {
        color: #034EA2;
}

.providerLink a:hover {
        text-decoration: underline;
}

#footer * { padding: 1% 1%; margin: 0; }
#footer > p { float: left; }
#footer {
        margin-right: var(--header-thickness);
        background: #EEEEEE;
        font-size: 12px;
        margin-top: auto;
}
#footerLink > a { float: right; color: var(--na-red); }