/* ================================================= */
/*   2 0 2 2   N E W   S T Y L E   G R A P H I C S   */
/* ================================================= */

/*--------*/
/* BASICS */
/*--------*/

:root {
    --au-color-teal-min8: #E0F5E0;
    --au-color-teal-min7: #CCEEED;
    --au-color-teal-min6: #B2E5E4;
    --au-color-teal-min5: #99DDDC;
    --au-color-teal-min4: #7FD4D3;
    --au-color-teal-min3: #61CAC8;
    --au-color-teal-min2: #45C1BF;
    --au-color-teal-min1: #26B7B4;
    --au-color-teal-base: #00AAA7;
    --au-color-teal-plus1: #009B98;
    --au-color-teal-plus2: #008B89;
    --au-color-teal-plus3: #007E7C;
    --au-color-teal-plus4: #007371;
    --au-color-teal-plus5: #006967;
    --au-color-teal-plus6: #005F5E;
    --au-color-teal-plus7: #005554;
    --au-color-teal-plus8: #004D4B;
    --au-color-teal-plus9: #004645;
    --au-color-teal-plus10: #003F3E;
    --au-color-white: #FFFFFF;
    --au-color-grey-min8: #F7F7F8;
    --au-color-grey-min7: #EEF0F2;
    --au-color-grey-min6: #E6E8EC;
    --au-color-grey-min5: #DEE1E5;
    --au-color-grey-min4: #D5D9DF;
    --au-color-grey-min3: #CCD1D7;
    --au-color-grey-min2: #C2C8D0;
    --au-color-grey-min1: #B8BFC9;
    --au-color-grey-base: #ACB4BF;
    --au-color-grey-plus1: #9FA6B1;
    --au-color-grey-plus2: #9098A2;
    --au-color-grey-plus3: #838A94;
    --au-color-grey-plus4: #757C85;
    --au-color-grey-plus5: #676E77;
    --au-color-grey-plus6: #5B626A;
    --au-color-grey-plus7: #51575F;
    --au-color-grey-plus8: #484E56;
    --au-color-grey-plus9: #3C4249;
    --au-color-grey-plus10: #30363C;
    --au-color-backdrop: rgba(12,13,15,0.25);
    --au-color-popup-shadow: rgba(12,13,15,0.4);
    --au-color-status-red: #DD4931;
    --au-color-status-orange: #DD9730;
    --au-color-status-green: #19CD87;
    --au-title-bar-height: 3rem;
    --au-sidebar-width: 18rem;
    --au-sidebar-collapsed-width: 0.875rem;
    --au-scrollbar-padding-right: 0.125rem;
    --au-corner-radius: 0.375rem;
    --au-main-content-padding: 1.5rem;
}

body {
    font-size: 1rem;
    font-family: "Ubuntu", sans-serif;
    color: var(--au-color-grey-plus9);
}

a, a:hover, a:active, a:focus, a:visited, a:link {
    text-decoration: none;
    color: inherit;
}

/*---------*/
/* GENERAL */
/*---------*/

#au-main-content {
    position: relative;
    padding: var(--au-main-content-padding);
    height: 100vh;
    width: 100%;
}

.container-fluid { /* Bootstrap override */
    padding: 0rem;
    margin: 0rem;
    position: relative;
}

.au-fullwidth {
    width: 100%;
}

#au-main-content main {
    margin: 0rem;
    padding: 0rem;
}

h1 {
    font-size: 3rem;
    font-weight: 400;
    color: var(--au-color-teal-plus2);
    padding: 1rem 0rem;
}

h2 {
    font-size: 1.875rem;
    font-weight: 500;
    color: var(--au-color-teal-plus2);
    padding: 1rem 0rem;
}

h3 {
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--au-color-teal-plus2);
    padding: 1rem 0rem;
}

h4, h5 {
    font-size: 1.625rem;
    font-weight: 500;
    color: var(--au-color-teal-plus1);
    padding: 1rem 0rem;
}

h6 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--au-color-teal-plus1);
    padding: 1rem 0rem;
}

.row { /*alternatively the same can be achieved by using the no-gutters class from bootstrap 4*/
    margin-left: 0px !important;
    padding-left: 0px !important;
    margin-right: 0px !important;
    padding-right: 0px !important;
}

dd, dt {
    line-height: 1.25rem !important;
    min-height: 1.25rem !important;
}

.au-tall-cell {
    height: 3.25rem !important;
}

.card {
    border-width: 0px !important;
}

.card-body {
    padding: 0rem !important;
    margin: 0rem !important;
}

/*-------------*/
/* LOGIN STUFF */
/*-------------*/

#au-login-image-foreground {
    content: url("../images/LoginBackground-01.svg");
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 500;
}

#au-login-image-background {
    content: url("../images/LoginBackground-02.svg");
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 300;
}

#au-login-container {
    position: fixed;
    display: block;
    top: 25%;
    right: 5rem;
    height: 10rem;
    width: 20vw;
    min-width: 13rem;
    max-width: 15rem;
    z-index: 600;
}

#au-login-container-logo {
    content: url("../images/polaris_login.svg");
    position: absolute;
    height: 100%;
    width: 129%;
    top: -35%;
    left: -23%;
}

#au-login-container .form-group {
    width: 100%;
}

#au-login-container-username.form-group {
    top: 5rem;
}

#au-login-container-password.form-group {
    top: 9rem;
}

#au-login-container-button.form-group {
    top: 14rem;
}

#au-login-aucxis-logo {
    content: url("../images/aucxis_white.svg");
    position: fixed;
    top: 7vh;
    left: 7vh;
    height: 7%;
    opacity: 0.5;
    z-index: 500;
}

@media screen and (max-width: 1024px) { /* when login page gets too narrow, remove stuff */
    #au-login-image-foreground {
        display: none;
    }

    #au-login-container {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: auto;
        margin-left: auto;
        transform: translate(-100%, -100%);
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }
}

/*---------*/
/* SIDEBAR */
/*---------*/

#au-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--au-sidebar-width);
    background-color: var(--au-color-teal-plus6);
}

#au-sidebar-scrollview {
    padding-right: var(--au-scrollbar-padding-right);
    padding-bottom: 6.5rem; /* brand-region height + 1rem */
}

#au-brand-region {
    background-color: var(--au-color-teal-plus4);
    height: 5.5rem;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    position: relative;
    display: block;
}

    #au-brand-region img {
        height: 100%;
        margin: 0rem 0rem 2rem 0rem;
    }

@-moz-document url-prefix() { /*Firefox special*/
    #au-brand-region > * {
        width: 75%;
    }
}

#au-brand-region > * {
    margin: 0.3rem 3rem;
    margin-left: 2rem;
    padding: 1rem;
}

#au-sidebar-menu {
    font-size: 1.125rem;
    font-family: "Ubuntu";
    min-height: min-content;
}

.au-sidebar-menu-item, .au-sidebar-menu-section-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 1.5rem;
    padding: 1rem;
    color: var(--au-color-white);
    border: 0px;
    width: 100%;
}

.au-sidebar-menu-section-item {
    padding-left: 2rem;
}

    .au-sidebar-menu-item:first-child, .au-sidebar-menu-section-item:first-child {
        margin-top: 1.0rem;
    }

    .au-sidebar-menu-item:hover, .au-sidebar-menu-section-item:hover {
        background-color: var(--au-color-teal-plus7);
        cursor: pointer;
    }

    .au-sidebar-menu-item-active, .au-sidebar-menu-item-active:active, .au-sidebar-menu-item:active, .au-sidebar-menu-section-item:active {
        background-color: var(--au-color-teal-plus8);
    }

.au-sidebar-menu-item-link {
    display: flex;
    position: relative;
    width: 100%;
    height: 2rem;
    padding-top: 1rem;
}

.au-sidebar-menu-item-icon {
    font-size: 1rem;
    padding-right: 0.5rem;
    margin-top: -0.8rem;
}

.au-sidebar-menu-item-icon-fa { /* font awesome special margin */
    margin-top: -0.55rem;
}

.au-sidebar-menu-customicon-reporting {
    width: 1.6rem;
    height: 1.6rem;
    bottom: 0.9rem;
    left: -0.3rem;
    position: relative;
}

.au-sidebar-menu-item-text {
    float: left;
    margin-top: -0.9rem;
    margin-left: 1.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2rem;
    position: absolute;
}

.au-sidebar-menu-divider {
    height: 0.0625rem;
    margin: 0.5rem 2rem;
    opacity: 16%;
    background: black;
}

.au-sidebar-menu-item-indent {
    padding-left: 1.5rem;
}

.au-sidebar-menu-section-title {
    font-weight: 500;
    color: var(--au-color-teal-min2);
    padding-top: 1.25rem;
    padding-left: 2rem;
    margin-bottom: -0.0rem;
}

/*---------------------*/
/* COLLAPSIBLE SIDEBAR */
/*---------------------*/

.aucxis .navbar {
    width: 18rem; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    bottom: 0;
    background-color: #0C343D; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y: hidden; /* Disable vertical scroll */
    height: auto;
    padding-bottom: 60px;
    padding: 0px;
}

    .aucxis .navbar .navbar-nav {
        display: list-item;
    }

    .aucxis .navbar .navbar-brand {
        position: absolute;
        top: 10px;
    }

    .aucxis .navbar .dx-scrollview {
        width: 100%;
        padding-top: 52px;
        padding: 0px;
    }

    .aucxis .navbar .nav-toggle {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--au-sidebar-collapsed-width);
        color: var(--au-color-teal-min2);
        display: flex;
        align-items: center;
        cursor: pointer;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

        .aucxis .navbar .nav-toggle:hover {
            background-color: var(--au-color-teal-plus8);
            opacity: 0.50;
            color: var(--au-color-teal-min8);
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

        .aucxis .navbar .nav-toggle:before {
            display: inline-block;
            font-family: "Material Icons";
            /* commenting and splitting in multple parts, see: https://github.com/angular/angular-cli/issues/11679#issuecomment-409727121 */
            /* font: normal normal normal 24px/1 "Material Design Icons"!important; */
            font-size: 1rem;
            text-rendering: auto;
            line-height: inherit;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content: '\e314';
        }

.aucxis.nav-collapsed .navbar .nav-toggle:before {
    content: '\e315';
}

.aucxis.nav-collapsed .navbar, .aucxis.nav-collapsed #au-sidebar {
    width: var(--au-sidebar-collapsed-width);
    padding-left: 0px;
}

    .aucxis.nav-collapsed .navbar .dx-scrollview,
    .aucxis.nav-collapsed .navbar .navbar-brand,
    .aucxis.nav-collapsed .navbar #au-brand-region {
        opacity: 0;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

.aucxis.nav-collapsed .navbar,
.aucxis.nav-collapsed h1:first-of-type,
.aucxis.nav-collapsed .container-body,
.aucxis.nav-collapsed #au-brand-region,
.aucxis.nav-collapsed #au-not-sidebar,
.aucxis.nav-expanded #au-not-sidebar,
.aucxis.nav-expanded #au-brand-region,
.aucxis.nav-expanded .container-body,
.aucxis.nav-expanded h1:first-of-type,
.aucxis.nav-expanded .navbar {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.aucxis.nav-collapsed #au-not-sidebar {
    left: var(--au-sidebar-collapsed-width);
    width: calc(100vw - var(--au-sidebar-collapsed-width));
}

/*-------------*/
/* NOT SIDEBAR */
/*-------------*/

#au-not-sidebar {
    position: fixed;
    top: 0;
    left: var(--au-sidebar-width);
    width: calc(100vw - var(--au-sidebar-width));
    font-family: "Ubuntu";
}

#au-not-sidebar-scrollview {
    padding-right: var(--au-scrollbar-padding-right);
}


/*-----------*/
/* TITLE BAR */
/*-----------*/

#au-title-bar {
    height: var(--au-title-bar-height);
    background-color: var(--au-color-teal-base);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem 1.45rem;
    color: var(--au-color-white);
    border: 0px;
    font-size: 1.375rem;
}

.au-title-bar-text {
    float: left;
    margin: 1rem 0rem;
    margin-left: -0.5rem;
    padding: 1rem;
    font-weight: 500;
}

.au-title-bar-text-hoverable {
    float: left;
    margin: 1rem 0rem;
    margin-left: -0.5rem;
    padding: 1rem;
    font-weight: 500;
}

    .au-title-bar-text-hoverable:hover {
        color: var(--au-color-teal-plus4);
        cursor: pointer;
    }

.au-title-bar-icon {
    float: left;
    font-size: 1.125rem;
    margin-top: 0.125rem;
}

.au-title-bar-arrow {
    float: left;
    font-size: 0.75rem;
    margin-top: 0.125rem;
    margin-right: 0.5rem;
    opacity: 0.66;
}

#au-account-region {
    position: fixed;
    right: 0px;
    top: 0px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 3rem;
    padding: 1rem 1.5rem;
    z-index: 3000;
}

#au-account-region-text {
    float: right;
    margin: 1rem 0rem;
    padding: 1rem 0.75rem 1rem 0rem;
    font-family: "Ubuntu";
    font-weight: 300;
}

#au-account-region-icon {
    float: left;
    margin-right: -0.5rem;
}

#au-account-region:hover {
    background-color: var(--au-color-teal-plus2);
    cursor: pointer;
}

    #au-account-region:hover .au-account-dropdown-content {
        right: 0rem;
    }

.au-account-dropdown-content {
    font-family: "Ubuntu";
    font-size: 0.875rem;
    color: var(--au-color-grey-plus9);
    position: absolute;
    right: -15rem;
    top: 3rem;
    background-color: var(--au-color-white);
    min-width: 12rem;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.25);
    z-index: 500;
    border-bottom-right-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem;
    transition: all 0.25s ease;
}

.au-account-dropdown-item {
    margin: 0rem;
    padding: 0.25rem 1rem;
}

    .au-account-dropdown-item:hover {
        background-color: var(--au-color-grey-min7);
    }

    .au-account-dropdown-item:active {
        background-color: var(--au-color-grey-min6);
    }

        .au-account-dropdown-item:hover:last-child, .au-account-dropdown-item:active:last-child {
            border-bottom-right-radius: 0.3125rem;
            border-bottom-left-radius: 0.3125rem;
        }


.dx-popup-title {
    color: white;
    background-color: var(--au-color-teal-base);
    font-family: "Ubuntu";
    font-weight: 500;
}

.dx-field-item-label-location-top {
    padding: 0 !important;
}

    .dx-field-item-label-location-top .dx-field-item-label-text {
        color: var(--au-color-grey-plus7) !important;
    }

/*----------*/
/* TABS BAR */
/*----------*/
.au-tabs-bar {
    z-index: 500;
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 2.5rem;
    color: #3C4249;
    background-color: var(--au-color-grey-min7);
    border: 0px;
    font-size: 1rem;
    padding-left: 0.5rem;
    /* following rules offset the inclusion of the tabs bar into #au-main-content */
    transform: translate(calc(-1 * var(--au-main-content-padding)), calc(-1 * var(--au-main-content-padding)));
    width: calc(100% + var(--au-main-content-padding) * 2);
}

.au-sub-tabs-bar {
    z-index: 500;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 2.5rem;
    color: #3C4249;
    background-color: transparent;
    border: 0px;
    font-size: 1rem;
    padding-left: 0.5rem;
    /* following rules offset the inclusion of the tabs bar into #au-main-content */
    transform: translate(calc(-1 * var(--au-main-content-padding)), calc(-1 * var(--au-main-content-padding)));
    width: calc(100% + var(--au-main-content-padding) * 2);
}


#au-post-tabs-bar { /* exists to add padding between au-tabs-bar and container-fluid */
    position: static;
    padding: 1.5rem;
}

.au-tab-with-icon {
    margin: 0rem;
    padding: 1.25rem 1rem;
    height: 100%;
    transform: translate(-0.0625rem,-0.0625rem);
    border: none;
}

    .au-tab-with-icon:hover {
        background-color: var(--au-color-grey-min5);
        cursor: pointer;
    }

    .au-sub-tabs-bar.nav-tabs .au-tab-with-icon:hover {
        background-color: transparent;
    }

    .au-tab-with-icon:active {
        transition: all 0.1s ease;
        border-bottom: none;
    }

.au-tab-icon {
    float: left;
    font-size: 1rem;
    margin: 0rem 0rem 0rem 0rem;
    margin-right: -0.75rem;
}

.au-tabs-bar.nav-tabs .nav-link, .au-tabs-bar.nav-tabs .nav-link:hover,
.au-sub-tabs-bar.nav-tabs .nav-link, .au-sub-tabs-bar.nav-tabs .nav-link:hover {
    border-radius: 0rem;
}

.au-tabs-bar.nav-tabs .nav-link, .au-tabs-bar.nav-tabs .nav-link:hover {
    border-radius: 0rem;
}

.au-sub-tabs-bar.nav-tabs .nav-item:has(.nav-link.no-link),
.au-sub-tabs-bar.nav-tabs .nav-item:has(.nav-link.no-link):hover,
.au-sub-tabs-bar.nav-tabs .nav-link.no-link,
.au-sub-tabs-bar.nav-tabs .nav-link.no-link:hover {
    cursor: default;
}

.au-sub-tabs-bar.nav-tabs .nav-item:has(.nav-link.disabled),
.au-sub-tabs-bar.nav-tabs .nav-item:has(.nav-link.disabled):hover {
    cursor: not-allowed;
}

.au-tab-link {
    height: 2.5rem;
    transform: translate(-1rem,-1.21875rem);
    width: calc(100% + 2rem);
    position: relative;
    border: none;
}

.au-tab-text {
    float: left;
    border-radius: 0rem;
    border: none;
    transform: translate(1.6rem,-1.5rem);
    width: calc(100%);
}

.au-tab-link.nav-link {
    border-radius: 0px;
    border: none;
}

    .au-tab-link.nav-link.active {
        border-radius: 0px;
        border: none;
        background-color: var(--au-color-grey-min4);
        border-bottom: 0.125rem solid var(--au-color-teal-base);
        transform: translate(-1rem,-1.21875rem);
    }

    .au-tab-link.nav-link.active {
        background-color: transparent;
    }


/*---------------*/
/* MAIN ELEMENTS */
/*---------------*/

.au-text {
    font-size: 0.875rem;
}

.au-text-info {
    font-size: 0.875rem;
    color: var(--au-color-grey-plus5);
    font-style: italic;
    font-weight: 400;
    font-size: 0.75rem;
}

.au-text-error {
    font-size: 0.875rem;
    color: var(--au-color-status-red);
    font-style: italic;
    font-weight: 400;
    font-size: 0.75rem;
}

.au-input-label {
    font-size: 0.75rem;
    margin-bottom: -0.5rem;
    color: var(--au-color-grey-plus5);
}

.au-button-icon {
    font-size: 1.5rem !important;
}

.au-input-field, .dx-texteditor-container, .dx-dropdowneditor {
    border-radius: var(--au-corner-radius);
    background-color: var(--au-color-grey-min7);
    border: none;
}

.dx-form .dx-dropdowneditor {
    background-color: var(--au-color-grey-min7) !important;
}

input.au-input-field {
    font-size: 0.75rem;
    color: var(--au-color-grey-plus5);
    outline: none !important;
}

    input.au-input-field:hover, input.au-input-field:focus, input.au-input-field:active,
    .dx-texteditor-container:hover, .dx-texteditor-container:focus, .dx-texteditor-container:active {
        background-color: var(--au-color-grey-min6);
    }

.form-control:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.au-input-field-validation-label {
    padding-top: 0.25rem;
    font-size: 0.625rem;
    text-align: right;
    float: right;
    width: 100%;
    color: var(--au-color-status-red);
    background-color: none;
}

.au-header {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--au-color-teal-plus4);
}

.au-chart text {
    font-size: 1rem;
    font-family: "Ubuntu", sans-serif !important;
    color: var(--au-color-grey-plus9);
}

#au-version-number {
    color: var(--au-color-teal-plus3);
    font-style: italic;
    padding-top: 2rem;
    padding-left: 2rem;
}

/*---------*/
/* BUTTONS */
/*---------*/

/* I know this :not stuff is empty and not the way to go but I have no time to fix this properly now */
.au-button, .au-button.dx-button, .dx-button-has-text:not(.dx-datagrid-column-chooser-button):not(.dx-dialog-button):not(.dx-datagrid-addrow-button) {
    font-size: 0.875rem;
    font-family: "Ubuntu";
    font-weight: 700;
    color: white;
    background-color: var(--au-color-teal-base);
    border: none;
    letter-spacing: 0.0625rem;
    height: 2rem;
    border-radius: var(--au-corner-radius);
    outline: none;
    box-shadow: none;
    padding-inline-start: 8px;
    padding-inline-end: 8px;
}

    .au-button, .au-button.dx-button, .dx-button-has-text:not(.dx-datagrid-column-chooser-button):not(.dx-dialog-button):not(.dx-datagrid-addrow-button):not(.dx-button-has-icon) {
        padding-block-start: 3px;
    }

        .au-button:hover, .dx-button-has-text:not(.dx-datagrid-column-chooser-button):not(.dx-dialog-button):not(.dx-datagrid-addrow-button):hover {
            background-color: var(--au-color-teal-plus2);
        }

        .au-button:active, .dx-button-has-text:not(.dx-datagrid-column-chooser-button):not(.dx-dialog-button):not(.dx-datagrid-addrow-button):active {
            background-color: var(--au-color-teal-plus3);
            transition: all 0.1s ease;
        }

        .au-button:focus, .dx-button-has-text:not(.dx-datagrid-column-chooser-button):not(.dx-dialog-button):not(.dx-datagrid-addrow-button):focus {
            outline: none;
        }

.au-button-primary-activated, .au-button-primary-activated:hover {
    background-color: var(--au-color-teal-plus4);
    transition: all 1s ease;
}

.au-button-secondary {
    border: 0.1rem solid var(--au-color-grey-min5);
    background-color: var(--au-color-white);
    color: var(--au-color-grey-plus4);
}

    .au-button-secondary:hover {
        background-color: var(--au-color-grey-min7);
    }

    .au-button-secondary:active {
        background-color: var(--au-color-grey-min6);
    }

.buttons-bar > .au-button:last-child {
    margin-left: 0.75rem;
}

.buttons-bar {
    float: right;
}

.au-button-icon-only {
    border: none;
    background-color: transparent;
    border-radius: var(--au-corner-radius);
    color: var(--au-color-grey-plus4);
    width: 2rem;
    height: 2rem;
    margin-right: -0.5rem;
}

    .au-button-icon-only:hover {
        background-color: var(--au-color-grey-min7);
        color: var(--au-color-grey-plus7);
    }

    .au-button-icon-only:active {
        background-color: var(--au-color-grey-min6);
        color: var(--au-color-grey-plus8);
    }

    .au-button-icon-only:focus, .au-button-icon-only-light:focus {
        outline: none;
    }

.au-button-icon-only-light {
    color: white;
}

    .au-button-icon-only-light:hover {
        background-color: var(--au-color-teal-plus2);
        color: white;
    }

    .au-button-icon-only-light:active {
        background-color: var(--au-color-teal-plus3);
        color: white;
    }

/*--------------*/
/* CUSTOM ICONS */
/*--------------*/

.au-icon-aucxis-stripes.au-title-bar-icon {
    content: url("../images/aucxis_stripes.svg");
    width: 1.125rem;
}

#au-sidebar-background-icon {
    content: url("../images/aucxis_stripes.svg");
    width: 20rem;
    position: fixed;
    bottom: 1rem;
    z-index: -1000;
    left: -8rem;
    opacity: 0;
}

/*-------------------*/
/* GENERAL OVERRIDES */
/*-------------------*/

button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.btn-primary {
    background-color: var(--au-color-teal-base);
    border-color: var(--au-color-teal-base);
}

/* remove table borders */
td {
    border: none !important;
}

#map {
    margin-bottom: 3rem;
}

/*---------------*/
/* PAGE-SPECIFIC */
/*---------------*/

/* Asset Details */

#assetDetails .col-md-4,
#assetDetails .col-lg-4 {
    padding-left: 0px !important;
}


#assetDetails #qrcode img {
    float: left;
}

#assetDetails #qrcode {
    width: 120px;
    margin: auto;
    margin-left: 0px !important;
}

    #assetDetails #qrcode.col-lg-12.col-md-12 {
        padding: 0px;
    }

/*----------------------*/
/* DEVEXTREME OVERRIDES */
/*----------------------*/

/* alternating row background color */
.dx-datagrid .dx-row-alt.dx-row:not(.dx-row-removed) {
    background-color: var(--au-color-grey-min8);
}

/* "no data" in table */
.dx-datagrid-nodata {
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 0.0625rem;
}

/* don't change background color for in-data-grid input fields */
.dx-datagrid .dx-texteditor-container {
    background-color: transparent;
}

/* don't change background color for in-data-grid input fields except when they're in a form */
.dx-datagrid .dx-datagrid-edit-form .dx-texteditor-container {
    background-color: var(--au-color-grey-min7);
}

/* add margin in texteditor */
.dx-texteditor.dx-editor-underlined .dx-texteditor-input,
.dx-texteditor.dx-editor-underlined .dx-placeholder {
    margin-left: 0.625rem;
}

/* remove underline in texteditor */
.dx-texteditor.dx-state-active::before,
.dx-texteditor.dx-state-focused::before,
.dx-texteditor.dx-editor-underlined::after,
.dx-texteditor.dx-editor-underlined.dx-invalid::after,
.dx-texteditor.dx-editor-underlined.dx-state-disabled::after,
.dx-texteditor.dx-editor-underlined.dx-state-hover::after,
.dx-texteditor.dx-editor-underlined.dx-state-readonly.dx-state-hover::after,
.dx-texteditor.dx-editor-underlined.dx-state-readonly.dx-state-focused::after,
.dx-texteditor.dx-editor-underlined.dx-state-readonly::after,
.dx-texteditor.dx-editor-underline.dx-state-focused::after,
.dx-texteditor.dx-editor-underlined.dx-state-hover::after,
.dx-editor.dx-editor-underlined::after {
    border-bottom: none !important;
}

/* make shader behind overlay span entire screen*/
.dx-overlay-shader {
    width: 100vw;
    height: 100vw;
}

/* scrollbar color */
#au-sidebar .dx-scrollable-scroll-content {
    background-color: var(--au-color-teal-plus2);
    opacity: 0.85;
}

#au-not-sidebar .dx-scrollable-scroll-content {
    background-color: var(--au-color-grey-base);
    opacity: 0.6;
}

/* scrollbar no-color when not hover */
#au-sidebar .dx-state-invisible .dx-scrollable-scroll-content, #au-not-sidebar .dx-state-invisible .dx-scrollable-scroll-content {
    background-color: rgba(0,0,0,0);
    opacity: 0;
}

/* scrollbar width */
.dx-scrollable-scroll {
    min-width: 0.5rem;
}

/* no underline in input fields */
.dx-texteditor.dx-editor-underlined::after {
    border: none;
}

/* checkbox background color (only icon, not label) */
.dx-checkbox-checked .dx-checkbox-icon {
    background-color: var(--au-color-teal-base);
    border-radius: var(--au-corner-radius);
}

/* input field placeholder */
.dx-placeholder {
    color: var(--au-color-grey-plus1);
}

/* remove shadow from buttons */
.dx-button.dx-state-hover,
.dx-button.dx-state-focused,
.dx-button.dx-state-active,
.dx-button {
    box-shadow: none !important;
}

    /* focused/active/hover button background color */
    .dx-button.dx-button-has-text.dx-state-active:not(.dx-datagrid-column-chooser-button):not(.dx-dialog-button):not(.dx-datagrid-addrow-button),
    .dx-button.dx-button-has-text.dx-state-focused:not(.dx-datagrid-column-chooser-button):not(.dx-dialog-button):not(.dx-datagrid-addrow-button) {
        background-color: var(--au-color-teal-base) !important;
    }

    .dx-button.dx-button-has-text.dx-state-hover:not(.dx-datagrid-column-chooser-button):not(.dx-dialog-button):not(.dx-datagrid-addrow-button) {
        background-color: var(--au-color-teal-plus2) !important;
    }

    /* white icon in primary buttons with text */
    .dx-button.dx-button-normal.dx-button-has-text:not(.dx-datagrid-column-chooser-button):not(.dx-datagrid-addrow-button) .dx-icon {
        color: white;
    }

/* closebutton*/
.dx-closebutton{
    background-color: transparent;
}

    .dx-closebutton.dx-state-hover {
        background-color: var(--au-color-grey-plus2);
    }

.dx-icon.dx-icon-close{
    color: white;
}



/* datagrid header button with text positioning */
.dx-datagrid-header-panel .dx-button.dx-button-normal.dx-button-has-text .dx-button-content {
    padding: 0.4rem 0rem 0.4rem 0rem;
}

/* icons */
.dx-icon-column-chooser::before {
    content: "\efe8" !important;
}

.dx-datagrid-rowsview .dx-master-detail-row:not(.dx-datagrid-edit-form) .dx-master-detail-cell, .dx-datagrid-rowsview .dx-master-detail-row:not(.dx-datagrid-edit-form) > .dx-datagrid-group-space {
    background: white;
}