/* 
    This file is used to hold all static values needed for IE11 where polyfills for CSS variables are not providing coverage.
    These are isolated from the blame.css browser hacks because they are substantial and also likely to rapidly be deprecated as 
    the polyfills become more viable. Instead of sifting through a huge blame file, we just eliminate this one in time. 
*/

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    /* IE10+ CSS styles go here */
    [aurelia-app='main'] a /* anchor */ {
        color: #0377DB;
    }

    [aurelia-app='main'] body /* body */ {
        background: #F6F8F7;
        display: flex;
        flex: 1;
        flex-direction: column;
        font-family: proxima-nova, sans-serif;
        font-weight: 400;
        height: 100%;
    }

    [aurelia-app='main'] button, /* button */
    [aurelia-app='main'] button:hover {
        background: #3BA3FB;
        border-radius: 3px;
        color: white;
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
        padding: 1rem 1.5rem !important;
        margin: 0 !important;
    }

    [aurelia-app='main'] amp-button + amp-button {
        margin-left: 1rem;
    }

    [aurelia-app='main'] compose /* compose */ {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    [aurelia-app='main'] header /* header */ {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 2em;
    }

    [aurelia-app='main'] h1 /* h1 */ {
        color: #484F59;
        font-size: 2.25em;
        font-weight: 900;
        letter-spacing: -0.05em;
    }

    [aurelia-app='main'] input[type="checkbox"],
    [aurelia-app='main'] input[type="radio"] /* input */ {
        background: #ECF1F6;
        color: #25282B;
        padding: 0.75em 1.5em;
        margin: 0;
    }

    [aurelia-app='main'] [ui-type='input-icon'] {
        transform: translate(-1em, -1.75em);
    }

    [aurelia-app='main'] label {
        width: 100%;
        margin: 1em 0 0;
    }

    [aurelia-app='main'] main /* main */ {
        display: block;
        width: 100%;
        padding: 0 2em;
    }

    [aurelia-app='main'] media /* media */ {
        align-items: stretch;
        display: flex;
        flex: 1 1 auto;
        justify-content: space-between;
        margin: 0;
        padding: 0;
    }

    [aurelia-app='main'] media ::slotted([slot="image"]) {
        align-items: flex-start;
        display: flex;
        flex: 0 0 auto;
        margin: 0 1em 0 0;
        padding: 0;
    }

    [aurelia-app='main'] media ::slotted([slot="content"]) {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        margin: 0;
        padding: 0;
    }

    [aurelia-app='main'] menu /* menu */ {
        align-items: center;
        height: 100%;
    }

    [aurelia-app='main'] menu-item /* menu-item */ {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 1.618em;
    }

    [aurelia-app='main'] menu-item a:hover {
        background: #0377DB;
    }

    [aurelia-app='main'] menu-item a:active {
        background: #0377DB;
    }

    [aurelia-app='main'] nav /* nav */ {
        background: #3BA3FB;
        color: #F5FAFF;
        padding: 0;
    }

    [aurelia-app='main'] amp-page /* amp-page */ {
        display: flex;
        flex-direction: row;
        height: 100%;
        width: 100%;
    }

    [aurelia-app='main'] router-view /* router-view */ {
        align-items: flex-start;
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
        width: 100%;
    }

    [aurelia-app='main'] section /* section */ {
        background: white;
        box-shadow: 5px 5px 21px rgba(0, 0, 0, 0.05);
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 1em 2em;
        margin: 0;
        width: 100%;
    }

    [aurelia-app='main'] aside /* aside */ {
        background: white;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    [aurelia-app='main'] aside router-view {
        --default-router-display: flex;
        --default-router-flex-direction: row;
        --default-router-flex-wrap: wrap;
    }

    [aurelia-app='main'] aside h1 {
        font-size: 1.35em;
        font-weight: 700;
        letter-spacing: -0.025em;
        box-shadow: 0 0.25em #EFF1F0;
        display: flex;
        flex: 0 1 auto;
        /* --default-aside-display: block; */
        padding: 1em 1.5em;
    }

    [aurelia-app='main'] aside ui-button[secondary] {
        background: #F5FAFF;
        color: #0377DB;
    }

    [aurelia-app='main'] section h2 {
        background: white;
        color: #899098;
        display: flex;
        font-size: 1.25em;
        padding: 0.5em 0;
    }

    [aurelia-app='main'] [layout="client"] nav ui-menu-item:last-child,
    [aurelia-app='main'] [layout="operations"] nav ui-menu-item:last-child {
        margin: 0 0 0 auto;
    }

    [aurelia-app='main'] [layout="login"] {
        background: white;
        background: white;
        padding: 4em;
        padding: 4em;
        justify-content: center;
        background: url('../images/login-image.svg') no-repeat;
        background-size: cover;
    }

    [aurelia-app='main'] [layout|="widget"] media {
        font-size: 2em;
        flex-direction: row-reverse;
        margin: 3em 0 0;
        margin: 0 0 0 1em;
    }

    [aurelia-app='main'] [layout|="widget"] strong {
        color: #484F59;
        font-size: 2em;
        text-transform: uppercase;
    }

    [aurelia-app='main'] [layout|="widget"] menu {
        height: 2em;
        position: absolute;
        top: 1.25em;
        right: 1.25em;
        width: 2em;
    }

    [aurelia-app='main'] [layout|="widget"] menu-item {
        border-radius: 50%;
        color: #484F59;
        font-size: 1.5em;
        padding: 0 0.5em;
    }

    [aurelia-app='main'] [layout|="widget"] a:hover {
        background: #ECF1F6;
    }

    [aurelia-app='main'] [layout|="widget"] section {
        position: relative;
    }

    /* Form Layouts */
    [aurelia-app='main'] [layout="form-intro"] h2 {
        font-size: 3em;
    }

    [aurelia-app='main'] [layout="form-intro"] amp-page {
        display: flex;
        align-items: center;
    }

    [aurelia-app='main'] [layout="form-intro"] strong {
        font-size: 1.2em;
    }

    [aurelia-app='main'] [layout="form-intro"] {
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        display: block;
    }

    [aurelia-app='main'] [layout="form-intro"] ul {
        border-width: 1px;
        border-radius: 4px;
        border-style: solid;
        border-color: #3BA3FB;
        display: block;
        list-style: disc;
        margin: 1em 0 0;
        padding: 1em 3em;
    }

    [aurelia-app='main'] [layout="form-intro"] li {
        display: list-item;
    }

    [aurelia-app='main'] [ui-type="settings-categories"] a {
        display: block;
        position: relative;
        margin: .5em 0 0 0;
        width: 20em;
        padding: 2em;
    }

    [aurelia-app='main'] [ui-type="settings-categories"] h3 {
        color: #25282B;
        font-size: 1.5em;
        padding: 0 0 .5em 0;
        display: block;
    }

    [aurelia-app='main'] [ui-type="settings-categories"] p {
        display: block;
        color: #484F59;
    }

    [aurelia-app='main'] [ui-type="settings-categories"] a,
    [aurelia-app='main'] [ui-type="settings-categories"] a:visited,
    [aurelia-app='main'] [ui-type="settings-categories"] a:active {
        color: #25282B;
    }

    [aurelia-app='main'] [ui-type="settings-categories"] a h3,
    [aurelia-app='main'] [ui-type="settings-categories"] a:visited h3,
    [aurelia-app='main'] [ui-type="settings-categories"] a:active h3 {
        color: #25282B;
    }

    [aurelia-app='main'] [ui-type="settings-categories"] a p,
    [aurelia-app='main'] [ui-type="settings-categories"] a:visited p,
    [aurelia-app='main'] [ui-type="settings-categories"] a:active p {
        color: #484F59;
    }

    /* settings categories section */
    [aurelia-app='main'] [ui-type="settings-categories"] a.active {
        background: #E1FDFD;
    }

    [aurelia-app='main'] [ui-type="settings-categories"] a.active h3 {
        color: #026272;
    }

    [aurelia-app='main'] [ui-type="settings-categories"] a.active p {
        color: #026272;
    }

    [aurelia-app='main'] [ui-type="settings-categories"]::-webkit-scrollbar {
        width: 14px;
        height: 14px;
    }

    [aurelia-app='main'] [ui-type="settings-categories"]::-webkit-scrollbar-thumb {
        height: 6px;
        border: 4px solid rgba(0, 0, 0, 0);
        background-clip: padding-box;
        -webkit-border-radius: 7px;
        background-color: rgba(0, 0, 0, .3);
        -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
    }

    [aurelia-app='main'] [ui-type="settings-categories"]::-webkit-scrollbar-button {
        width: 0;
        height: 0;
        display: none;
    }

    [aurelia-app='main'] [ui-type="settings-categories"]::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    [aurelia-app='main'] subcategory {
        display: block;
        width: 100%;
    }

    [aurelia-app='main'] subcategory h3 {
        color: #026272;
        font-size: 1.5em;
    }

    [aurelia-app='main'] config-item p, [aurelia-app='main'] config-item p {
        color: #25282B;
    }

    [aurelia-app='main'] config-item a, [aurelia-app='main'] config-item a {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

    [aurelia-app='main'] config-item h4, [aurelia-app='main'] config-item h4 {
        color: #25282B;
        font-weight: bold;
        padding: 0 0 .5em 0;
        display: block;
    }

    ux-dialog.au-target {
        width: auto;
    }

    amp-datalist {
        background: white;
        box-shadow: 1px 1px 38px rgba(0,0,0,0.1), 1px 1px 13px rgba(0,0,0,0.2);
        border-width: 1px;
        background: white;
        color: #767676;
    }

    amp-datepicker.datepicker-grouped {
        display: table-cell;
        width: 100%;
        height: 34px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        z-index: 2;
        float: left;
        margin-bottom: 0;
        border: none !important;
        box-shadow: none !important;
        padding: 0px !important;
    }

    amp-hamburger-menu menu {
        height: auto !important;
        display: block;
    }

    amp-hamburger-menu menu-item {
        height: auto !important;
        display: block !important;
        padding: 1em 0 1em 0 !important;
    }

    amp-hamburger-menu menu-item[amp-event="sortAsc"],
    amp-hamburger-menu menu-item[amp-event="sortDesc"],
    amp-hamburger-menu menu-item[amp-event="groupBy"] {
        padding: 1em 1.5em !important;
    }

    amp-filter input[type="submit"] {
        width: auto;
    }

    amp-date-filter div ul[ui-type="filterDropdown"] {
        margin: 0 !important;
    }

    amp-date-filter div ul[ui-type="filterDropdown"] li a:hover {
        color: #474e58;
        background: #ebeff2;
    }

    amp-date-filter div ul[ui-type="filterDropdown"] li a[ui-state="selected"]:hover {
        color: #fff;
        background: #474e58;
    }

    amp-date-filter div [ui-type="datefilter-button"] {
        height: 3em;
        margin: 0 !important;
    }

    amp-date-filter {
        padding: 0 !important;
        width: 100% !important;
        margin: -2.5em 0 0 0 !important;
    }

    amp-date-filter [ui-type="dateRange"] {
        margin: 1em 0 1em 0 !important;
        padding: 0 1.5em 0 1.5em !important;
    }

    amp-date-filter [ui-type="dateRange"] amp-input {
        width: 100%;
    }
}