/* 
    This file is used to hold all generic element CSS variable assignments. Elements like h1-h6, p, a, ul, 
    li need to be able to fall within our theming framework, so this handles those for now. 
    If we want to eliminate this one, we should create built-ins for all generic elements and wire it that way instead.  
*/

[aurelia-app='main'] html,
[aurelia-app='main'] body {
    height: var(--body-height);
}
[aurelia-app='main'] body {
    background: var(--body-background);
    color: var(--body-color);
    display: var(--body-display);
    flex: var(--body-flex);
    flex-direction: var(--body-flex-direction);
    font-size: var(--body-font-size);
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    margin: var(--body-margin);
    padding: var(--body-padding);
    line-height: var(--body-line-height);
}
[aurelia-app='main'] header {
    align-items: var(--header-align-items);
    background: var(--header-background);
    border-color: var(--header-border-color);
    border-style: var(--header-border-style);
    border-width: var(--header-border-width);
    box-shadow: var(--header-box-shadow);
    color: var(--header-color);
    display: var(--header-display);
    flex: var(--header-flex);
    flex-direction: var(--header-flex-direction);
    font-size: var(--header-font-size);
    font-family: var(--header-font-family);
    grid-area: var(--header-grid-area);
    height: var(--header-height);
    justify-content: var(--header-justify-content);
    margin: var(--header-margin);
    max-height: var(--header-max-height);
    max-width: var(--header-max-width);
    min-height: var(--header-min-height);
    min-width: var(--header-min-width);
    padding: var(--header-padding);
    text-align: var(--header-text-align);
    width: var(--header-width);
}
[aurelia-app='main'] nav {
    align-items: var(--nav-align-items);
    background: var(--nav-background);
    border-color: var(--nav-border-color);
    border-style: var(--nav-border-style);
    border-width: var(--nav-border-width);
    box-shadow: var(--nav-box-shadow);
    color: var(--nav-color);
    display: var(--nav-display);
    flex: var(--nav-flex);
    flex-direction: var(--nav-flex-direction);
    font-size: var(--nav-font-size);
    font-family: var(--nav-font-family);
    grid-area: var(--nav-grid-area);
    height: var(--nav-height);
    justify-content: var(--nav-justify-content);
    margin: var(--nav-margin);
    max-height: var(--nav-max-height);
    max-width: var(--nav-max-width);
    min-height: var(--nav-min-height);
    min-width: var(--nav-min-width);
    padding: var(--nav-padding);
    text-align: var(--nav-text-align);
    width: var(--nav-width);
}
[aurelia-app='main'] main {
    align-items: var(--main-align-items);
    background: var(--main-background);
    background-size: var(--main-background-size);
    border-color: var(--main-border-color);
    border-style: var(--main-border-style);
    border-width: var(--main-border-width);
    box-shadow: var(--main-box-shadow);
    color: var(--main-color);
    display: var(--main-display);
    flex: var(--main-flex);
    flex-direction: var(--main-flex-direction);
    font-size: var(--main-font-size);
    font-family: var(--main-font-family);
    grid-area: var(--main-grid-area);
    height: var(--main-height);
    justify-content: var(--main-justify-content);
    margin: var(--main-margin);
    max-height: var(--main-max-height);
    max-width: var(--main-max-width);
    min-height: var(--main-min-height);
    min-width: var(--main-min-width);
    padding: var(--main-padding);
    text-align: var(--main-text-align);
    width: var(--main-width);
}
[aurelia-app='main'] aside {
    align-items: var(--aside-align-items);
    background: var(--aside-background);
    border-color: var(--aside-border-color);
    border-style: var(--aside-border-style);
    border-width: var(--aside-border-width);
    box-shadow: var(--aside-box-shadow);
    color: var(--aside-color);
    display: var(--aside-display);
    flex: var(--aside-flex);
    flex-direction: var(--aside-flex-direction);
    flex-wrap: var(--aside-flex-wrap);
    font-size: var(--aside-font-size);
    font-family: var(--aside-font-family);
    grid-area: var(--aside-grid-area);
    justify-content: var(--aside-justify-content);
    margin: var(--aside-margin);
    max-height: var(--aside-max-height);
    max-width: var(--aside-max-width);
    min-height: var(--aside-min-height);
    min-width: var(--aside-min-width);
    overflow-y: var(--aside-overflow-y);
    overflow-x: var(--aside-overflow-x);
    padding: var(--aside-padding);
    position: var(--aside-position);
    text-align: var(--aside-text-align);
    width: var(--aside-width);
}
[aurelia-app='main'] section {
    align-items: var(--section-align-items);
    background: var(--section-background);
    border-color: var(--section-border-color);
    border-style: var(--section-border-style);
    border-width: var(--section-border-width);
    box-shadow: var(--section-box-shadow);
    color: var(--section-color);
    display: var(--section-display);
    flex: var(--section-flex);
    flex-direction: var(--section-flex-direction);
    font-size: var(--section-font-size);
    font-family: var(--section-font-family);
    height: var(--section-height);
    justify-content: var(--section-justify-content);
    margin: var(--section-margin);
    max-height: var(--section-max-height);
    max-width: var(--section-max-width);
    min-height: var(--section-min-height);
    min-width: var(--section-min-width);
    padding: var(--section-padding);
    position: var(--section-position);
    text-align: var(--section-text-align);
    width: var(--section-width);
}
[aurelia-app='main'] footer {
    align-items: var(--footer-align-items);
    background: var(--footer-background);
    border-color: var(--footer-border-color);
    border-style: var(--footer-border-style);
    border-width: var(--footer-border-width);
    box-shadow: var(--footer-box-shadow);
    color: var(--footer-color);
    display: var(--footer-display);
    flex: var(--footer-flex);
    flex-direction: var(--footer-flex-direction);
    font-size: var(--footer-font-size);
    font-family: var(--footer-font-family);
    grid-area: var(--footer-grid-area);
    height: var(--footer-height);
    justify-content: var(--footer-justify-content);
    margin: var(--footer-margin);
    max-height: var(--footer-max-height);
    max-width: var(--footer-max-width);
    min-height: var(--footer-min-height);
    min-width: var(--footer-min-width);
    padding: var(--footer-padding);
    text-align: var(--footer-text-align);
    width: var(--footer-width);
}
[aurelia-app='main'] router-view {
    align-items: var(--router-align-items);
    background: var(--router-background);
    border-color: var(--router-border-color);
    border-style: var(--router-border-style);
    border-width: var(--router-border-width);
    box-shadow: var(--router-box-shadow);
    color: var(--router-color);
    display: var(--router-display);
    flex: var(--router-flex);
    flex-direction: var(--router-flex-direction);
    flex-wrap: var(--router-flex-wrap);
    font-size: var(--router-font-size);
    font-family: var(--router-font-family);
    grid-area: var(--router-grid-area);
    height: var(--router-height);
    justify-content: var(--router-justify-content);
    margin: var(--router-margin);
    max-height: var(--router-max-height);
    max-width: var(--router-max-width);
    min-height: var(--router-min-height);
    min-width: var(--router-min-width);
    padding: var(--router-padding);
    text-align: var(--router-text-align);
    width: var(--router-width);
}
[aurelia-app='main'] compose {
    align-items: var(--compose-align-items);
    background: var(--compose-background);
    border-color: var(--compose-border-color);
    border-style: var(--compose-border-style);
    border-width: var(--compose-border-width);
    box-shadow: var(--compose-box-shadow);
    color: var(--compose-color);
    display: var(--compose-display);
    flex: var(--compose-flex);
    flex-direction: var(--compose-flex-direction);
    font-size: var(--compose-font-size);
    font-family: var(--compose-font-family);
    grid-area: var(--compose-grid-area);
    height: var(--compose-height);
    justify-content: var(--compose-justify-content);
    margin: var(--compose-margin);
    max-height: var(--compose-max-height);
    max-width: var(--compose-max-width);
    min-height: var(--compose-min-height);
    min-width: var(--compose-min-width);
    padding: var(--compose-padding);
    text-align: var(--compose-text-align);
    width: var(--compose-width);
}
[aurelia-app='main'] h1 {
    background: var(--h1-background, var(--headings-background));
    border-width: var(--h1-border-width, var(--headings-border-width));
    border-style: var(--h1-border-style, var(--headings-border-style));
    border-color: var(--h1-border-color, var(--headings-border-color));
    box-shadow: var(--h1-box-shadow, var(--headings-box-shadow));
    color: var(--h1-color, var(--headings-color));
    display: var(--h1-display, var(--headings-display));
    flex: var(--h1-flex, var(--heading-flex));
    font-family: var(--h1-font-family, var(--headings-font-family));
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight, var(--headings-font-weight));
    left: var(--h1-left, var(--headings-left));
    letter-spacing: var(--h1-letter-spacing, var(--headings-letter-spacing));
    line-height: var(--h1-line-height, var(--headings-line-height));
    margin: var(--h1-margin, var(--headings-margin));
    padding: var(--h1-padding, var(--headings-padding));
    position: var(--h1-position, var(--headings-h1-position));
    text-align: var(--h1-text-align, var(--headings-text-align));
    text-transform: var(--h1-text-transform, var(--headings-text-transform));
    width: var(--h1-width, var(--headings-width));
}
[aurelia-app='main'] h2 {
    background: var(--h2-background, var(--headings-background));
    border-width: var(--h2-border-width, var(--headings-border-width));
    border-style: var(--h2-border-style, var(--headings-border-style));
    border-color: var(--h2-border-color, var(--headings-border-color));
    box-shadow: var(--h2-box-shadow, var(--headings-box-shadow));
    color: var(--h2-color, var(--headings-color));
    display: var(--h2-display, var(--headings-display));
    font-family: var(--h2-font-family, var(--headings-font-family));
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight, var(--headings-font-weight));
    letter-spacing: var(--h2-letter-spacing, var(--headings-letter-spacing));
    line-height: var(--h2-line-height, var(--headings-line-height));
    margin: var(--h2-margin, var(--headings-margin));
    padding: var(--h2-padding, var(--headings-padding));
    position: var(--h2-position, var(--headings-position));
    text-align: var(--h2-text-align, var(--headings-text-align));
    text-transform: var(--h2-text-transform, var(--headings-text-transform));  
}
[aurelia-app='main'] h2:before {
    content: '';
    background: var(--h2-before-background);
    display: var(--h2-before-display);
    height: var(--h2-before-height);
    position: var(--h2-before-position);
    top: var(--h2-before-top);
    right: var(--h2-before-right);
    bottom: var(--h2-before-bottom);
    left: var(--h2-before-left);
}
[aurelia-app='main'] h2:after {
    content: '';
    background: var(--h2-after-background);
    display: var(--h2-after-display);
    height: var(--h2-after-height);
    position: var(--h2-after-position);
    top: var(--h2-after-top);
    right: var(--h2-after-right);
    bottom: var(--h2-after-bottom);
    left: var(--h2-after-left);
}
[aurelia-app='main'] h3 {
    background: var(--h3-background, var(--headings-background));
    border-width: var(--h3-border-width, var(--headings-border-width));
    border-style: var(--h3-border-style, var(--headings-border-style));
    border-color: var(--h3-border-color, var(--headings-border-color));
    box-shadow: var(--h3-box-shadow, var(--headings-box-shadow));
    color: var(--h3-color, var(--headings-color));
    display: var(--h3-display, var(--headings-display));
    font-family: var(--h3-font-family, var(--headings-font-family));
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight, var(--headings-font-weight));
    letter-spacing: var(--h3-letter-spacing, var(--headings-letter-spacing));
    line-height: var(--h3-line-height, var(--headings-line-height));
    margin: var(--h3-margin, var(--headings-margin));
    padding: var(--h3-padding, var(--headings-padding));
    text-align: var(--h3-text-align, var(--headings-text-align));
    text-transform: var(--h3-text-transform, var(--headings-text-transform));  
}
[aurelia-app='main'] h4 {
    background: var(--h4-background, var(--headings-background));
    border-width: var(--h4-border-width, var(--headings-border-width));
    border-style: var(--h4-border-style, var(--headings-border-style));
    border-color: var(--h4-border-color, var(--headings-border-color));
    box-shadow: var(--h4-box-shadow, var(--headings-box-shadow));
    color: var(--h4-color, var(--headings-color));
    display: var(--h4-display, var(--headings-display));
    font-family: var(--h4-font-family, var(--headings-font-family));
    font-size: var(--h4-font-size);
    font-weight: var(--h4-font-weight, var(--headings-font-weight));
    letter-spacing: var(--h4-letter-spacing, var(--headings-letter-spacing));
    line-height: var(--h4-line-height, var(--headings-line-height));
    margin: var(--h4-margin, var(--headings-margin));
    padding: var(--h4-padding, var(--headings-padding));
    text-align: var(--h4-text-align, var(--headings-text-align));
    text-transform: var(--h4-text-transform, var(--headings-text-transform));
}
[aurelia-app='main'] h5 {
    background: var(--h5-background, var(--headings-background));
    border-width: var(--h5-border-width, var(--headings-border-width));
    border-style: var(--h5-border-style, var(--headings-border-style));
    border-color: var(--h5-border-color, var(--headings-border-color));
    box-shadow: var(--h5-box-shadow, var(--headings-box-shadow));
    color: var(--h5-color, var(--headings-color));
    display: var(--h5-display, var(--headings-display));
    font-family: var(--h5-font-family, var(--headings-font-family));
    font-size: var(--h5-font-size);
    font-weight: var(--h5-font-weight, var(--headings-font-weight));
    letter-spacing: var(--h5-letter-spacing, var(--headings-letter-spacing));
    line-height: var(--h5-line-height, var(--headings-line-height));
    margin: var(--h5-margin, var(--headings-margin));
    padding: var(--h5-padding, var(--headings-padding));
    text-align: var(--h5-text-align, var(--headings-text-align));
    text-transform: var(--h5-text-transform, var(--headings-text-transform));
}
[aurelia-app='main'] h6 {
    background: var(--h6-background, var(--headings-background));
    border-width: var(--h6-border-width, var(--headings-border-width));
    border-style: var(--h6-border-style, var(--headings-border-style));
    border-color: var(--h6-border-color, var(--headings-border-color));
    box-shadow: var(--h6-box-shadow, var(--headings-box-shadow));
    color: var(--h6-color, var(--headings-color));
    display: var(--h6-display, var(--headings-display));
    font-family: var(--h6-font-family, var(--headings-font-family));
    font-size: var(--h6-font-size);
    font-weight: var(--h6-font-weight, var(--headings-font-weight));
    letter-spacing: var(--h6-letter-spacing, var(--headings-letter-spacing));
    line-height: var(--h6-line-height, var(--headings-line-height));
    margin: var(--h6-margin, var(--headings-margin));
    padding: var(--h6-padding, var(--headings-padding));
    text-align: var(--h6-text-align, var(--headings-text-align));
    text-transform: var(--h6-text-transform, var(--headings-text-transform));
}
[aurelia-app='main'] p {
    background: var(--p-background);
    color: var(--p-color);
    font-family: var(--p-font-family);
    font-size: var(--p-font-size);
    letter-spacing: var(--p-letter-spacing);
    line-height: var(--p-line-height);
    margin: var(--p-margin);
    padding: var(--p-padding);
    text-align: var(--p-text-align);
    text-transform: var(--p-text-transform);
}
[aurelia-app='main'] strong {
    background: var(--strong-background);
    color: var(--strong-color);
    font-family: var(--strong-font-family);
    font-size: var(--strong-font-size);
    letter-spacing: var(--strong-letter-spacing);
    line-height: var(--strong-line-height);
    margin: var(--strong-margin);
    padding: var(--strong-padding);
    text-align: var(--strong-text-align);
    text-transform: var(--strong-text-transform);
}
[aurelia-app='main'] em {
    background: var(--em-background);
    color: var(--em-color);
    font-family: var(--em-font-family);
    font-size: var(--em-font-size);
    letter-spacing: var(--em-letter-spacing);
    line-height: var(--em-line-height);
    margin: var(--em-margin);
    padding: var(--em-padding);
    text-align: var(--em-text-align);
    text-transform: var(--em-text-transform);
}
[aurelia-app='main'] small {
    background: var(--small-background);
    color: var(--small-color);
    font-family: var(--small-font-family);
    font-size: var(--small-font-size);
    letter-spacing: var(--small-letter-spacing);
    text-transform: var(--small-text-transform);
}
[aurelia-app='main'] a {
    align-items: var(--a-align-items);
    background: var(--a-background);
    border-width: var(--a-border-width);
    border-radius: var(--a-border-radius);
    border-style: var(--a-border-style);
    border-color: var(--a-border-color);
    color: var(--a-color);
    display: var(--a-display);
    flex: var(--a-flex);
    font-family: var(--a-font-family);
    font-size: var(--a-font-size);
    font-weight: var(--a-font-weight);
    height: var(--a-height);
    justify-content: var(--a-justify-content);
    left: var(--a-left);
    letter-spacing: var(--a-letter-spacing);
    line-height: var(--a-line-height);
    margin: var(--a-margin);
    padding: var(--a-padding);
    position: var(--a-position);
    text-align: var(--a-text-align);
    text-decoration: var(--a-text-decoration);
    text-transform: var(--a-text-transform);
    transition: var(--a-transition);
    width: var(--a-width);
}
[aurelia-app='main'] a:hover {
    align-items: var(--a-hover-align-items, var(--a-align-items));
    background: var(--a-hover-background, var(--a-background));
    border-width: var(--a-hover-border-width, var(--a-border-width));
    border-style: var(--a-hover-border-style, var(--a-border-style));
    border-color: var(--a-hover-border-color, var(--a-border-color));
    color: var(--a-hover-color, var(--a-color));
    display: var(--a-hover-display, var(--a-display));
    flex: var(--a-hover-flex, var(--a-flex));
    font-family: var(--a-hover-font-family, var(--a-font-family));
    font-size: var(--a-hover-font-size, var(--a-font-size));
    font-weight: var(--a-hover-font-weight, var(--a-font-weight));
    height: var(--a-hover-height, var(--a-height));
    justify-content: var(--a-hover-justify-content, var(--a-justify-content));
    letter-spacing: var(--a-hover-letter-spacing, var(--a-letter-spacing));
    line-height: var(--a-hover-line-height, var(--a-line-height));
    margin: var(--a-hover-margin, var(--a-margin));
    padding: var(--a-hover-padding, var(--a-padding));
    text-align: var(--a-hover-text-align, var(--a-text-align));
    text-decoration: var(--a-hover-text-decoration, var(--a-text-decoration));
    text-transform: var(--a-hover-text-transform, var(--a-text-transform));
    transition: var(--a-hover-transition, var(--a-transition));
}
/* a:active {
    align-items: var(--a-active-align-items, var(--a-align-items));
    background: var(--a-active-background, var(--a-background));
    border-width: var(--a-active-border-width, var(--a-border-width));
    border-style: var(--a-active-border-style, var(--a-border-style));
    border-color: var(--a-active-border-color, var(--a-border-color));
    color: var(--a-active-color, var(--a-color));
    display: var(--a-active-display, var(--a-display));
    flex: var(--a-active-flex, var(--a-flex));
    font-family: var(--a-active-font-family, var(--a-font-family));
    font-size: var(--a-active-font-size, var(--a-font-size));
    font-weight: var(--a-active-font-weight, var(--a-font-weight));
    height: var(--a-active-height, var(--a-height));
    justify-content: var(--a-active-justify-content, var(--a-justify-content));
    letter-spacing: var(--a-active-letter-spacing, var(--a-letter-spacing));
    line-height: var(--a-active-line-height, var(--a-line-height));
    margin: var(--a-active-margin, var(--a-margin));
    padding: var(--a-active-padding, var(--a-padding));
    text-align: var(--a-active-text-align, var(--a-text-align));
    text-decoration: var(--a-active-text-decoration, var(--a-text-decoration));
    text-transform: var(--a-active-text-transform, var(--a-text-transform));
    transition: var(--a-active-transition, var(--a-transition));
} */

/*  this was used for the menu in the aurelia app but it is conflicting with the styles in the date picker
    I am commenting them out for now but would like to retain them for when we add the menu back
[aurelia-app='main'] ul {
    align-items: var(--ul-align-items);
    background: var(--ul-background);
    border-width: var(--ul-border-width);
    border-radius: var(--ul-border-radius);
    border-style: var(--ul-border-style);
    border-color: var(--ul-border-color);
    color: var(--ul-color);
    display: var(--ul-display);
    flex: var(--ul-flex);
    flex-direction: var(--ul-flex-direction);
    height: var(--ul-height);
    justify-content: var(--ul-justify-content);
    list-style: var(--ul-list-style);
    margin: var(--ul-margin);
    padding: var(--ul-padding);
} */
[aurelia-app='main'] li {
    align-items: var(--li-align-items);
    background: var(--li-background);
    border-width: var(--li-border-width);
    border-radius: var(--li-border-radius);
    border-style: var(--li-border-style);
    border-color: var(--li-border-color);
    color: var(--li-color);
    display: var(--li-display);
    flex: var(--li-flex);
    flex-direction: var(--li-flex-direction);
    font-size: var(--li-font-size);
    justify-content: var(--li-justify-content);
    line-height: var(--li-line-height);
    margin: var(--li-margin);
    padding: var(--li-padding);
}