@charset "UTF-8";
/* Common styles across all my.premier.ca pages */
/* Common element tag styles */
/*
PREMIER ORANGE - #F05323;
PREMIER YELLOW - #FFC42C
PREMIER BLACK - #202324;
DARK GREY - #A9A9A9
MEDIUM GREY - #E2E2E2
LIGHT GREY - #E9E9E9
ERROR BOX DARK RED - #950E29
ERROR BOX LIGHT RED - #F9BECA
CLASS .green - #168A0D;
CLASS .amber - #F2AE0C;
CLASS .red - #D62727;
*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    height: 100%; /* Make sure body fills the viewport */
    margin: 0;    /* Remove default spacing */
    font-size: 16px;         /* 1rem = 16px */
}
body {
    /* height: 100%;  Make sure body fills the viewport */
    background: #E2E2E2 url("/images/background-P.svg") no-repeat right -340px bottom;
    background-size: 1000px auto; /* Or contain/cover if needed */
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 400;       /* Regular */
    font-style: normal;     /* Normal (not italic) */
    font-size: 16px;        /* Base size */
    color: #202324;         /* Dark gray text color */
}
h1.page-title {
    font-size: 2rem;
    line-height: 2rem;
    color: #202324;
    padding-bottom: 12px;
}
h2 {
    font-size: 1.6rem;
    line-height: 1.8rem;
}
h3 {
    font-size: 1.3rem;
    line-height: 1.4rem;
}
h4 {
    font-size: 1.125rem;
    line-height: 1.3rem;
}
p {

}
a {
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #F05323;
    text-decoration: none;
}
a:hover {
    color: #202324;
    text-decoration: underline;
}
button {
    cursor: pointer;
    font-size: 12px;
    text-align: left;
    text-transform: uppercase;
    color: white;
    background-color: #202324;
    width: 180px;
    margin-bottom: 12px;
    padding: 12px 20px;
    border: 0 !important;
    border-radius: 24px;
    display: block;
}
button:hover {
    color: white;
    background-color: #F05323;
}
/* Common class tag styles */
.p-orange {
    color: #F05323;
}
.p-yellow {
    color: #FFC42C;
}
.p-black {
    color: #202324;
}
.green {
    color: #168A0D;
}
.amber {
    color: #F2AE0C;
}
.red {
    color: #D62727;
}
/* Common black-out styles */
div#black-out {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease; /* only here */
}
div#black-out.hide {
    opacity: 0;                  /* start hidden */
}
div#black-out.show {
    opacity: 1;
    pointer-events: auto;
}
/* Start error box styles */
#error-box {
    width: 560px;
    height: 200px;
    position: absolute;
    inset: 0;
    margin: 160px auto;
    padding: 24px;
    background-color: #F9BECA;
    border: 4px solid #950E29;
    color: #950E29;
    border-radius: 24px;
    z-index: 99;
    transition: opacity 1s ease; /* only here */
}
#error-box.show {
    pointer-events: auto !important;
    /*visibility: visible important;*/
    opacity: 1;
}
#error-box.hide {
    pointer-events: none !important;
    /*visibility: hidden !important;*/
    opacity: 0;
}
/* End error box styles */
.container {
    display: grid;
    /* 2 column container */
    grid-template-areas:
        "header header"
        "nav main"
        "footer footer";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    /* stick footer to bottom of browser */
    min-height: 100vh;
}
header {
    grid-area: header;
    color: white;
    background-color: #202324;
    padding: 1.2rem 1.2rem .9rem 1.2rem;
}
#header-logo {
    max-width: 120px;
}
header div {
    float: right;
}
header div p {
    margin-left: 30px;
    padding-top: 3px;
    color: white;
}
header div img {
    height: 24px;
    float: left;
}

nav {
    font-size: .8rem;
    grid-area: nav;
    background-color: white;
    color: #202324;
    padding: 0;
    border-right: 1px solid #202324;
    /*border-top: 1px solid white;*/
}

nav ul {
    list-style: none;
    padding: 0;
}
nav ul li {
    list-style: none;
    border-radius: 3px;
}
nav ul li a {
    display: block;
    font-size: .8rem;
    list-style: none;
    padding: .75rem 6rem .75rem 1.5rem;
    margin: 4px;
    border-radius: 3px;
}
nav ul li a:hover {
    background-color: #202324;
    color: white;
}
nav ul li a {
    color: #202324;
    font-weight: normal;
    text-transform: capitalize;
}
nav ul li a:hover {
    background-color: #202324;
    color: white;
    text-decoration: none;
}
/* active-page class gets applied with page script */
.active-page a {
    margin: 4px;
    border-radius: 3px;
    background-color: #F05323;
    color: white;
}
.active-page a:hover {
    background-color: #F05323;
    color: white;
}
main {
    height: 100%; /* Make sure body fills the viewport */
    background: #E2E2E2 url("/images/background-P.svg") no-repeat right -340px bottom;
    background-size: 1000px auto; /* Or contain/cover if needed */
    grid-area: main;
    padding:  0 0 2rem 0;
    background-color: #E2E2E2;
}

div#page-name-body {
display: grid;
/* Align items vertically centered 
align-items: center; */
grid-template-columns: 1fr;
 /* 2 column container */
grid-template-areas: "white-container";
background-color: #EFEFEF;
padding: 24px;
border-top: 1px solid #202324;
}
#white-container {
display: grid;
/* Align items vertically centered */
grid-area: white-container;
align-items: center;
margin: 24px 24px 24px 0;
border-radius: 10px;
padding: 24px 0;
background-color: white;
width: 480px;
}

footer {
    display: grid;
    grid-area: footer;
    background: #202324;
    color: white;
    text-align: center;
    padding: 1rem;
    /* 3 column, 1 row container */
    grid-template-areas:
        "footer-block-1 footer-block-2 footer-block-3";
    grid-template-columns: 1fr 1fr 1fr;
}
#footer-block-1 {
    grid-area: footer-block-1;
}
#footer-block-2 {
    grid-area: footer-block-2;
}
#footer-block-3 {
    grid-area: footer-block-3;
}
.footer-block {
    padding: 12px;
    text-align: left;
    line-height: 1.4rem;
}
.footer-block hr {
    margin-bottom: 12px;
    border: none;
    height: 2px;
    background-color: #FFC42C;
    color: #FFC42C;
}
.footer-block a {
   font-size: 1.2rem;;
}
.footer-block a:hover {
    color: #FFC42C;
}


@media (max-width: 1100px) {
h1.page-title {
    font-size: 1.5rem;
    line-height: 1.5rem;
    }
footer {
    /* 1 column, 3 row container */
    grid-template-areas:
        "footer-block-1" "footer-block-2" "footer-block-3";
    grid-template-columns: 100%;
}
}


@media (max-width: 700px) {
nav ul li a {
        max-width: 90px;
    }
}