@import 'Variables.css';

body {
}

.LoginWrapper {
    background-image: url(/images/PencilSuppliesBG.jpg);
    background-size: contain;
    text-align: center;
}

    .LoginWrapper .Logo-ODE {
        margin-bottom: 2rem;
    }

.stepper-actions {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.menu-activator-content-text {
    display: inline;
    top: -10px;
    left: 5px;
}

.relative-fab-button {
    top: -22px;
    left: 94%;
}

.center-flex {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
}

footer {
    margin-top: 10px;
}

.footer-links {
    margin-left: 0px !important;
    width: 100% !important;
    z-index: 1099;
}

/* positioning and layout */
.mt--50 {
    top: -50px;
}

.mw-315 {
    min-width: 315px;
}

@media screen and (min-width: 550px), (max-width:1024px) {
    .menu-activator-content-text {
    }
}

.bg-dark {
    background-color: var(--gray-800);
}

/* MudBlazor Overrides */
.mud-fab:disabled {
    background-color: var(--gray-100)
}

.mud-input.mud-input-filled {
    background-color: var(--blue-100);
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 25px;
}

.mud-nav-link .mud-nav-link-expand-icon.mud-transform {
    fill: var(--red-800) !important;
}

.mud-card-actions {
    padding-right: 20px;
}

.mud-timeline-vertical::before {
    width: 0px;
}

.mud-timeline-vertical.mud-timeline-align-start .mud-timeline-item-divider {
    margin-right: 20px;
    min-width: 40px;
}

.mud-timeline-vertical .mud-timeline-item .mud-timeline-item-content {
    margin-top: 12px;
    max-width: 100%;
}

.mud-timeline-item {
    display: flex;
    justify-content: flex-end;
}

.mud-primary-text-active {
    background-color: var(--mud-palette-action-default-hover);
    transition: background-color 150ms cubic-bezier(.4,0,.2,1) 0ms;
}

.mud-drawer.mud-drawer-responsive.mud-drawer-pos-right.mud-drawer--open, .mud-drawer.mud-drawer-persistent.mud-drawer-pos-right.mud-drawer--open {
    padding: 20px;
    width: var(--mud-drawer-width-right);
}

.mud-drawer.mud-drawer-responsive.mud-drawer-pos-right, .mud-drawer.mud-drawer-persistent.mud-drawer-pos-right {
    right: 0px !important;
}

    .mud-drawer.mud-drawer-mini.mud-drawer-pos-right.mud-drawer--open ~ div:not(.mud-main-content), .mud-drawer.mud-drawer-persistent.mud-drawer-pos-right.mud-drawer--open ~ div:not(.mud-main-content) {
        margin-right: auto;
    }

    .mud-drawer.mud-drawer-responsive.mud-drawer-pos-right.mud-drawer--closed, .mud-drawer.mud-drawer-persistent.mud-drawer-pos-right.mud-drawer--closed {
        box-shadow: none;
        right: calc(-1*var(--mud-drawer-width,var(--mud-drawer-width-right))) !important;
    }

.mud-drawer-footer {
    bottom: 0px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.mud-expand-panel .mud-expand-panel-header {
    flex-direction: row-reverse;
    align-items: center;
}

.mud-nav-group > .mud-collapse-container > .mud-collapse-wrapper {
    background-color: #222;
}

.expand-close-button {
    text-transform: none;
    position: absolute;
    right: -20px;
}

.reference-view-header {
    display: block;
}

.reference-view-header--sub-title {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    display: -webkit-box;
}

.reference-view > .mud-drawer-content > .mud-drawer-header {
    min-height: unset;
}

.reference-list-title, .reference-list-count {
    font-weight: 600;
}

.reference-list-count {
    text-align: center;
}

.mud-drawer-side-menu-content > .mud-drawer-content {
    justify-content: space-between;
}

.action-type-title {
    font-weight: 900;
}

.action-type-text {
    width: 80px;
    margin-top: -6px;
    font-size: 24px;
    font-weight: bold;
}

/*.mud-input.mud-input-underline:before, .mud-input.mud-input-underline:hover:not(.mud-disabled):before, .mud-input.mud-input-underline:after {
    border-bottom: 0px;
}*/

/* IOP OVERRIDES */
.step-wizard-sidebar {
    max-width: 310px;
}

.step-wizard-content-divider-cnt--vr {
    display: flex;
    justify-content: center;
}

.step-wizard-content-divider-cnt--hr {
    display: flex;
    text-align: center;
    top: -30px;
    position: relative;
}

.step-wizard-content-divider--hr {
    position: relative;
    top: 64px;
    height: 1px;
}

.horizontal-list-container {
    flex-wrap: nowrap;
    overflow: auto;
    height: 500px;
}

.step-wizard-content-divider--vr {
    position: relative;
    left: 28px;
}

.dropdown-menu {
    flex-shrink: 0;
}

.dropdown-menu__nested-list {
    background-color: white;
    padding: 10px;
    margin: 0px 10px 10px 10px;
}

.dropdown-menu .mud-list.mud-list-padding {
    padding: 0;
}

.dropdown-menu--header {
    background-color: #2c2c2c !important;
    color: white !important;
}

    .dropdown-menu--header .mud-icon-root.mud-svg-icon {
        color: white;
    }

.dropdown-menu .mud-collapse-wrapper-inner {
    background-color: #f2f2f2;
}

.dropdown-menu__item--lvl-1.mud-list-item {
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
    flex-direction: row-reverse;
    width: unset;
}

.mud-list.mud-nested-list > div:nth-child(2).dropdown-menu__item--lvl-1 {
    margin: 10px 10px 10px 10px;
}

.mud-list.mud-nested-list > div.dropdown-menu__item--lvl-1 {
    margin: 0px 10px 10px 10px;
}

.dropdown-menu .dropdown-menu__item--lvl-2.dropdown-menu__add-item-closed {
    background-color: #ebedf9;
    padding-left: 5px;
}

.dropdown-menu__item--lvl-1 .mud-icon-root.mud-svg-icon, .dropdown-menu .dropdown-menu__item--lvl-2 .mud-icon-root.mud-svg-icon {
    fill: #8c8c8c;
}

.dropdown-menu__item--lvl-1 .dropdown-menu__item--lvl-1 .mud-list-item-text {
    padding-left: 10px;
}

.dropdown-menu__item--lvl-1 button.mud-icon-button, .dropdown-menu__item--lvl-2 button.mud-icon-button {
    padding-left: 0px;
    padding-right: 0px;
}

.dropdown-menu .dropdown-menu__item--lvl-2 {
    padding-left: 35px;
    padding-right: 0px;
    width: unset;
}

.dropdown-menu--autocomplete-container.mud-list-item {
    background-color: #4b4c4e;
    padding-left: 20px;
    padding-right: 20px;
}


.dropdown-menu--autocomplete, .dropdown-menu--autocomplete .mud-select-input {
    background-color: #4b4c4e;
    color: white;
}


    .dropdown-menu--autocomplete .mud-input.mud-input-filled.mud-input-underline:after,
    .dropdown-menu--autocomplete .mud-input ~ label.mud-input-label,
    .dropdown-menu--autocomplete .mud-icon-root.mud-svg-icon.mud-dark-text,
    .dropdown-menu--autocomplete-container p.mud-input-helper-text {
        color: white !important;
    }

    .dropdown-menu--autocomplete .mud-input.mud-input-filled.mud-input-underline:after,
    .dropdown-menu__add-item .mud-input.mud-input-filled.mud-input-underline:after {
        border-bottom: 2px solid white;
    }

.dropdown-menu__add-item {
    align-items: baseline;
}

    .dropdown-menu__add-item, .dropdown-menu__add-item .mud-input.mud-input-filled, .dropdown-menu__add-item-button {
        background-color: #7b7c7e;
        color: white !important;
    }

        .dropdown-menu__add-item p.mud-input-helper-text,
        .dropdown-menu__add-item .mud-input ~ label.mud-input-label {
            color: white !important;
        }

        .dropdown-menu__add-item .mud-input.mud-input-filled:hover {
            background-color: rgba(0,0,0,.13);
        }

.dropdown-menu__add-item-button {
    border: 1px solid white;
}

    .dropdown-menu__add-item-button.mud-button-root:disabled {
        color: #aaa !important;
        border: 1px solid #aaa;
    }

.add-group-skeleton {
    margin-bottom: 6px;
    height: 56px;
    width: 100%;
}

.group-list-item-skeleton {
    margin-bottom: 12px;
    width: 100%;
    height: 52px;
}

.mud-main-content {
    min-height: calc(92vh);
}

@media (min-width: 600px) {
    .mud-container {
        min-height: 92vh;
    }
}

@media screen and (max-width: 599px) {
}

@media screen and (min-width: 600px), (max-width:959px) {
}

@media screen and (min-width: 960px), (max-width:1279px) {
}

@media screen and (min-width: 1280px), (max-width:1919px) {
}

@media screen and (min-width: 1920px), (max-width:2559px) {
    .horizontal-list-container {
        height: 500px;
    }
}