@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');


body {
    background: #0A1E43;
}

a, .btn-link {
    color: #0366d6;
}

.mud-alert.latest-version-available {
    font-size:larger;
}

.order-information [type=button] {
    width: 100% !important;
    margin: 0px 0px 4px 0px;
    line-height: 1.15;
}

.order-information .mud-tooltip-root.mud-tooltip-inline {
    display: block;
}

.btn-primary, .btn-primary:hover, .btn-primary:disabled {
    color: white;
    background: #0160EF;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
    padding: 0 16px;
    min-width: 32px;
    width: auto;
    height: 32px;
    float: right;
    border: none;
    transition: border-radius 0.5s;
}

.btn-primary, .btn-primary:enabled {
    font-family: 'Roboto', sans-serif;
    min-width: 78px;
    height: 33px;
    font-size: 12px;
    /*background: #2D4B8C;*/
    background: #2196F3;
    color: #FFFFFF;
    border: none;
    outline: none;
    border-radius: 2px;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12);
}

.btn-primary:hover {
    cursor: pointer;
    border-radius: 15px;
    background: #0B79D0;
    transition: border-radius 0.5s;
}

.btn-primary:disabled {
    font-family: 'Roboto', sans-serif;
    height: 33px;
    min-width: 78px;
    font-size: 12px;
    border: none;
    background: #9E9E9E;
    color: #616161;
    outline: none;
    border-radius: 2px;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12);
}

.btn-secondary, .btn-secondary:hover, .btn-secondary:disabled {
    color: white;
    background: #0160EF;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
    padding: 0 16px;
    min-width: 32px;
    width: auto;
    height: 32px;
    float: right;
    border: none;
    transition: border-radius 0.5s;
}

.btn-secondary:enabled {
    font-family: 'Roboto', sans-serif;
    min-width: 80px;
    height: 33px;
    font-size: 12px;
    /*background: #2D4B8C;*/
    background: transparent;
    color: #FFFFFF;
    border: solid 1px rgba(255, 255, 255, 0.5);
    outline: none;
    border-radius: 2px;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12);
}

.btn-secondary:hover {
    cursor: pointer;
    /*background: #0A1E43;*/
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.08);
    transition: border-radius 0.5s;
}

.btn-secondary:disabled {
    font-family: 'Roboto', sans-serif;
    height: 33px;
    min-width: 80px;
    font-size: 12px;
    border: 1px solid #9E9E9E;
    background-color: transparent;
    color: #616161;
    outline: none;
    border-radius: 2px;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12);
}

.btn-confirmation {
    margin-bottom: 10px
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: none;
}

.invalid {
    outline: 1px solid red;
}

.warning-message {
    color: orange;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    color: black;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.widebar {
    display:flex;
    flex-direction:column;
    align-content:space-between;
    width: 278px;
    background: #0A1E43;
    height: 842px;
}

.NavMenuItem {
    height: 42px;
    width: 256px;
    bottom: 6px;
    background: rgba(46, 76, 135, 0.6);
    border-radius: 0px 5px 5px 0px;
}

:hover.NavMenuItem {
    background: rgba(46, 76, 135, 1);
}

.active .NavMenuItem {
    background: #2E4C87;
}

.NavMenuItemLeftBar {
    height: 42px;
    width: 9.696969985961914px;
    left: 0px;
    top: 0px;
    border-radius: 0px;
    background: rgba(188, 191, 190, 0.1);
    transition: all;
    transition-duration: 300ms;
}

.active .NavMenuItemLeftBar {
    background: rgba(235, 31, 39, 0.7);
}

.NavItemIcon {
    position: relative;
    height: 20px;
    width: 15.51515007019043px;
    left: 13.87890625px;
    top: 11px;
    border-radius: 0px;
}

.NavItemLabel {
    pointer-events: none;
    position: relative;
    height: 14px;
    width: 182px;
    left: 50px;
    top: -6px;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0px;
    text-align: left;
    color: rgba(255, 255, 255, 0.87);
}

.active .NavItemLabel {
    font-weight: 500;
}


.main-body {
    display: block;
    left: 278px;
    width: 1632px;
    height: 842px;
    color: rgba(255, 255, 255, 0.87);
}

.login-bottom {
    color: rgba(255, 255, 255, 0.87);
    /* width: 100%; */
    display: flex;
    margin-left: 0px;
    margin-right: 8px;
    line-height: 56px;
    /* margin: auto; */
    text-align: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.topbar {
    height: 94px;
    padding-top:30px;
    width: 100%;
    vertical-align:middle;
    text-align: center;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.87);
}

.mainlayout {
    min-height: 937px;
    width:100%;
    display: flex;
    flex-direction:column;
    color: rgba(255, 255, 255, 0.87);
}

.sidebar-plus-content {
    min-width:1910px;
    width: 100%;
    height: 843px;
    display:flex;
    flex-direction: row;
}

.content-panel {
    background: #243C6C;
    border: 1px solid rgba(255, 255, 255, 0.28);
    margin: 0 14px 14px 0;
    border-radius: 5px;
    padding: 12px;
}

.action-button {
    background-color: #2E4C87;
    color: white;
    height: 32px;
}

.panel-button {
    background-color: #2E4C87;
    color: white;
    float: right;
    height: 32px;
    margin-left: 12px;
}

.panel-button-nofloat {
    background-color: #2E4C87;
    color: white;
    position: relative;
    top: 7px;
    right: 16px;
    left: 0px;
    height: 32px;
}

.panel-title {
    position: relative;
    left: 16px;
    top: 16px;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
}

.panel-divider {
    margin-top: 40px;
    margin-left: 16px;
    margin-right: 16px;
}

.panel-content {
    margin-left: 16px;
    margin-right: 16px;
    position: relative;
    overflow: auto;
    width: 95%;
    height: 95%;
}

.panel-dashboard-content {
    height: 80%;
}

.panel {
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 10px;
    background-color: #243C6C;
}

.panel-header-container {
    display: grid;
    grid-template-columns: auto auto;
    margin: 15px 15px 0px 15px;
}

tbody tr.mud-table-row:nth-child(2n) {
    background-color: #243C6C;
}

tbody tr.mud-table-row:nth-child(2n+1) {
    background-color: #1D3667;
}

.mud-table {
    line-height: 0.25rem;
}

.mud-table-root .mud-table-head .mud-table-cell {
    font-weight: bold;
}

.mud-simple-table table * tr > td, .mud-simple-table table * tr th {
    font-size: 12px;
}

/**
   By default mudtable td centers text vertically.
   However, that is not what we want:
   Sometimes the table cell contains multiple input fields (e.g. text and checkbox).
   The label than would appear in between them.
   In the css below we make sure the label is always aligned with the top item in the inputItemEditRenderer
*/
.label-align-top {
    vertical-align: top !important;
    padding-top: 20px !important;
}

/* EditRecipeDialog has a distinct field layout,
   hence the vertial offset of labels is different.
*/
.label-align-top:has( + .recipe-input-container) {
    padding-top: 12px !important;
}

.vh-85 {
    height: 85vh;
}

.vh-60 {
    height: 60vh;
}

.vh-65 {
    height: 65vh;
}

.vh-55 {
    height: 55vh;
}

.vh-45 {
    height: 45vh;
}

.vh-40 {
    height: 40vh;
}

.vh-30 {
    height: 30vh;
}

.vh-25 {
    height: 25vh;
}

.vh-bottom {
    height: 25vh;
}

.login-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -350px;
    width: 700px;
    height: 300px;
}

.darkblue {
    background: #0A1E43;
}

.lighterblue {
    background: #243C6C;
}

.line {
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

/* State bars */
.state-information {
    font-size: 14px;
    font-weight: regular;
    height: 26px;
    margin-top: 5px;
    padding-top: 7px;
    padding-left: 5px;
    border-radius: 2px;
}

.state-informational {
    /*background: #0B79D0;*/
    background: #2196F3;
}

.state-succesful {
    background: #219653;
}

.state-alert {
    background: #EB5757;
}

.state-warning {
    background: #F2C94C;
    color: #0A1E43;
}

.subtext {
    font-size: 12px;
    color: lightgray;
}
/*
    For ingredients pages
*/
.mud-select-input {
    color: white;
}

@media (min-width: 600px) {
    .mud-toolbar {
        min-height: 34px;
    }
}

.mud-table-cell {
    border: none;
}

.mud-simple-table table * tr > td, .mud-simple-table table * tr th {
    border: none;
}

.normal-input {
    color: white;
    background: none;
    border: 2px solid #2196F3;
    width: 241px;
    height: 36px;
    box-sizing: border-box;
    border-radius: 5px;
    padding-left: 10px;
}

.critical-input {
    color: white;
    background: none;
    border: 2px solid #FF9800 !important;
    width: 241px;
    height: 36px;
    box-sizing: border-box;
    border-radius: 5px;
    padding-left: 10px;
}

.optional-input {
    color: white;
    background: none;
    border: 2px solid #C8CEDA !important;
    width: 241px;
    height: 36px;
    box-sizing: border-box;
    border-radius: 5px;
    padding-left: 10px;
}

.recipe-input-container input, .recipe-input-container select {
    width: 100%;
    height: 36px;
    border: none !important;
    border-radius: 0;
    padding: 0;
}

.recipe-input-container .mud-input:has(.critical-input,.critical-select-input,.critical-autocomplete-input):before {
    border-bottom: 3px solid #FF9800 !important;
}

.recipe-input-container .validation-message {
    font-size: 12px;
    margin-bottom: -36px;
}

.recipe-input-container .warning-message {
    font-size: 12px;
    margin-bottom: -36px;
}

.recipe-input-container .mud-input:has(.validation-message, .warning-message) {
    /* 
        Room for 2 lines of validation messages here.

        Note that this is a workaround.
        The validation-message should actually be a sibling to the input elements. 
        In that situation both input element and validation messages take up their own space next to each other.

        Currently, the validation-message is INSIDE the mud-input element.
        To compensate for this, the validation-message gets a negative margin-bottom
        and the mud-input reserves some extra space in the margin-bottom to compensate for this. (otherwise overlap with other input elements would occur.

        Getting the validation-message outside the mud-input elemant is a huge refactor of the whole TCC ui.
    */
    margin-bottom: 40px;
    padding-bottom: 6px;
}


.recipe-input-container div  {
    height: 2rem;
}

.recipe-input-container div .read-only-span {
    position: absolute;
    bottom: 5px;
}



.recipe-input-container .mud-select .mud-input-underline::before {
    border: none !important;
}


.recipe-settings-workplace-settings tr td input, .recipe-settings-workplace-settings tr td select {
    width: 100px !important;
}

.recipe-settings-storage-settings tr td input {
    width: 70px !important;
    margin-bottom: 12px;
}

.recipe-settings-storage-settings tr td select {
    width: 143px !important;
    margin-bottom: 12px;
}

.recipe-settings-workplace-settings td, .recipe-settings-storage-settings td {
    vertical-align: middle !important;
    padding-top: 0 !important;
}

.recipe-input-container .critical-autocomplete-input,
.recipe-input-container .optional-autocomplete-input {
    padding: 2px 2px 2px 2px;
}

/* for those selects that are not a mud-select */
.normal-select-input {
    background: #283D6D;
    color: white;
    border: 2px solid #2196F3;
    width: 241px;
    max-width: 241px;
    height: 36px;
    box-sizing: border-box;
    border-radius: 5px;
    padding-left: 10px;
}

/*  aimed ad mud-select */
.critical-select-input {
    width: 241px;
    max-width: 241px;
    padding: 2px 2px 2px 2px;

    border: 2px solid #FF9800;
    border-radius: 5px;
}

/* EditRecipeDialog has a distinct layout for input elements */
.recipe-input-container .critical-select-input {
    width: unset;
    max-width: unset;
    /* 
        unset the border, becuase within EditRecipeDialog, the critical fields get an orange underline by the following global css selector
       .recipe-input-container .mud-input:has(.critical-input,.critical-select-input,.critical-autocomplete-input):before {
    */
    border: unset;
}

/*  aimed ad mud-select */
.optional-select-input {
    width: 241px;
    max-width: 241px;
    padding: 2px 2px 2px 2px;
}

/* EditRecipeDialog has a distinct layout for input elements */
.recipe-input-container .optional-select-input {
    width: unset;
    max-width: unset;
}

.floatRight {
    float: right;
}

.mud-simple-table table {
    table-layout: fixed;
}

.mud-simple-table table * tr > td, .mud-simple-table table * tr th {
    padding: 12px;
}

.mud-simple-table.mud-table-dense * tr td, .mud-simple-table.mud-table-dense * tr th {
    padding: 0;
}

.mud-input.mud-input-outlined.mud-input-adorned-end {
    height: 36px;
    margin-left: 225px;
    width: 133px;
}

.info-block {
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 5px;
}



.block-content {
    margin: 9px;
    position: relative;
    overflow: auto;
    width: 98%;
    height: 95%;
}



.diluents-block-content {
    border: 1px solid #FF9800;
    box-sizing: border-box;
    border-radius: 5px;
    margin: 10px;
}

.diluent-fields-block {
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    margin: 10px;
}

.mud-switch {
    transform: scale(0.8);
    transform-origin: left;
}

body > app > div.mainlayout > div.sidebar-plus-content.darkblue > span.main-body.darkblue > div > div:nth-child(1) > div > div > div > div.mud-table-container > table {
    table-layout: fixed;
}


    body > app > div.mainlayout > div.sidebar-plus-content.darkblue > span.main-body.darkblue > div > div:nth-child(1) > div > div > div > div.mud-table-container > table > tbody > tr > td {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }


        body > app > div.mainlayout > div.sidebar-plus-content.darkblue > span.main-body.darkblue > div > div:nth-child(1) > div > div > div > div.mud-table-container > table > tbody > tr > td:hover {
            text-overflow: clip;
            white-space: normal;
            word-break: break-all;
        }

.right-panel-title {
    position: relative;
    left: 16px;
    top: 16px;
    float: left;
    width: 80%;
}

.warning-container-block {
    width: 100%;
    height: 5vh;
    box-sizing: border-box;
    margin-bottom: 12px;
}

.charge-number-block {
    width: 100%;
    height: 25vh;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 12px;
}

.approvals-block {
    width: 100%;
    height: 18vh;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 12px;
}

.details-block {
    width: 100%;
    height: 25vh;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    border-radius: 5px;
}

.set-entries-block {
    width: 100%;
    height: 38vh;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 12px;
}

.set-details-block {
    width: 100%;
    height: 25vh;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    border-radius: 5px;
}

label {
    margin-bottom: 0; /* Override bootstrap margin */
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0; /* Remove unneeded margin in dropdown */
}

/* Otherwise the dropdown elements in a table will not break out of container*/
.mud-table.has-dropdowns > .mud-table-container {
    overflow-x: unset;
}

.mud-grid-item.has-dropdowns {
    overflow-x: unset;
}

/*
 * Bastiaan's dense table
 */
.dense-table,
.dense-table-not-selectable,
.dense-table-no-hover {
    /*background-color: #243C6C;*/
    border-collapse: collapse;
    width: 100%;
    overflow-x: hidden;
    /*table-layout: fixed;*/
}

    .dense-table thead tr th,
    .dense-table-not-selectable thead tr th,
    .dense-table-no-hover thead tr th {
        font-size: 11px;
        font-weight: bold;
        text-align: left;
        height: 30px;
        padding-top: 10px;
    }

    .dense-table thead tr,
    .dense-table-not-selectable thead tr,
    .dense-table-no-hover thead tr {
        display: table;
        border-bottom: 1px solid rgba(255,255,255, .16);
        height: 32px;
    }

    .dense-table tbody:before,
    .dense-table-not-selectable tbody:before,
    .dense-table-no-hover tbody:before {
        content: "@";
        display: block;
        line-height: 5px;
        text-indent: -99999px;
    }

    .dense-table tbody,
    .dense-table-not-selectable tbody,
    .dense-table-no-hover tbody {
        display: block;
        overflow-x: hidden;
        overflow-y: auto;
    }

        .dense-table tbody tr,
        .dense-table-not-selectable tbody tr,
        .dense-table-no-hover tbody tr {
            height: 32px;
            border: 1px solid #243C6C;
            border-bottom: none;
            transition: background 0.8s;
            transition-timing-function: ease;
        }

            .dense-table tbody tr td,
            .dense-table-not-selectable tbody tr td,
            .dense-table-no-hover tbody tr td {
                font-size: 12px;
                text-align: left;
                overflow-x: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .dense-table tbody tr:nth-child(even),
            .dense-table-not-selectable tbody tr:nth-child(even),
            .dense-table-no-hover tbody tr:nth-child(even) {
                background-color: #173469;
            }

            .dense-table tbody tr td a.image-button img.remove-icon,
            .dense-table-not-selectable tbody tr td a.image-button img.remove-icon,
            .dense-table-no-hover tbody tr td a.image-button img.remove-icon {
                content: url(icons/trash.svg);
            }

            .dense-table tbody tr td a.image-button img.add-icon,
            .dense-table-not-selectable tbody tr td a.image-button img.add-icon,
            .dense-table-no-hover tbody tr td a.image-button img.add-icon {
                content: url(icons/add.svg);
            }

            .dense-table tbody tr.row-selected,
            .dense-table-no-hover tbody tr.row-selected {
                border: 1px solid #FFBC6D;
                color: #FFBC6D;
                z-index: 100;
                /*pointer-events: none;*/
                background: unset !important;
            }

                .dense-table tbody tr.row-selected td a.image-button img.remove-icon,
                .dense-table-not-selectable tbody tr.row-selected td a.image-button img.remove-icon,
                .dense-table-no-hover tbody tr.row-selected td a.image-button img.remove-icon {
                    content: url(icons/trash-selected.svg);
                    width: 18px;
                    height: 18px;
                }

            .dense-table tbody tr td:first-child,
            .dense-table-not-selectable tbody tr td:first-child,
            .dense-table-no-hover tbody tr td:first-child {
                padding-left: 5px;
            }

    .dense-table thead tr th:first-child,
    .dense-table-not-selectable thead tr th:first-child,
    .dense-table-no-hover thead tr th:first-child {
        padding-left: 5px;
    }

    .dense-table tfoot tr td,
    .dense-table-not-selectable tfoot tr td,
    .dense-table-no-hover tfoot tr td {
        height: 15px;
        background-color: #243C6C;
    }

    .dense-table tbody tr.row-disabled,
    .dense-table-not-selectable tbody tr.row-disabled,
    .dense-table-no-hover tbody tr.row-disabled {
        color: #9E9E9E;
    }

    .dense-table tbody tr:hover,
    .dense-table-not-selectable tbody tr:hover {
        background: #606F8F;
    }

.numberCircle {
    width: 20px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    font-size: 16px;
}

.addNoteDialog {
    width: 40vw;
    background: #243C6C;
    border: 2px solid #0A1E43;
    box-sizing: border-box;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.CheckOrderImportDialog {
    width: 100vw;
    background: #243C6C;
    border: 2px solid #0A1E43;
    box-sizing: border-box;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.loginDialog {
    width: 30vw;
    background: #243C6C;
    border: 2px solid #0A1E43;
    box-sizing: border-box;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.normal {
    height: 24px;
    border-radius: 0;
    border: 1px solid #2D4B8C;
    background-color: #2D4B8C;
}

.error {
    height: 24px;
    border: 1px solid #FF1414;
    border-radius: 0;
    background-color: #FF1414;
}

.success {
    height: 24px;
    border: 1px solid #4BB543;
    border-radius: 0;
    background-color: #4BB543;
}

.mud-table > .mud-table-container {
    overflow: visible;
}

.filters-container {
    grid-area: filters-container;
    padding-bottom: 12px;
    width: 90%;
    margin-left: 18px;
}

.title {
    font-size: 14px;
    font-weight: bold;
}

.table-container {
    grid-area: table-container;
    border: 1px solid rgba(255, 255, 255, .16);
    /*height: 100%;*/
    overflow: hidden auto;
}

.table-with-filter-layout {
    display: grid;
    grid-template-areas:
        "filters-container"
        "table-container";
}

/* inputs */

.boxed-input:enabled {
    height: 28px;
    background: transparent;
    border: 1px solid #E0E0E0;
    color: #E0E0E0;
    padding-left: 5px;
    font-size: 12px;
    font-weight: medium;
}

.boxed-input:disabled {
    height: 28px;
    background: transparent;
    border: 1px solid #9E9E9E;
    color: #9E9E9E;
    padding-left: 5px;
    font-size: 12px;
    font-weight: medium;
}

.boxed-input option {
    background: transparent;
    color: #E0E0E0;
}


.custom-tooltip {
    display:none;
    visibility: hidden;
}

.tooltip-container:hover .custom-tooltip {
    display:block;
    visibility: visible;
    opacity: 1;
}

.strikethrough {
    text-decoration: line-through;
    font-weight: bolder !important;
}

tr.strikethrough > td {
    font-weight: bolder !important;
}


.input-item-edit-renderer .smart-text-field{
    width:241px;
}

.mud-dialog-content {
    scrollbar-gutter: stable both-edges;/* prevent horizontal scrollbar from showing up once vertical scrollbar apprears. May be redundant once we have an actual responsive design */
}

/* This is specific to the compounderoverview so normally i would add this as scoped css but ::deep requires a root element for the entire component that would break scrolling for the dialog. */
.compounderoverview button.mud-step:last-of-type {
    margin-right: 15%;
}
.compounderoverview button.mud-step:first-of-type {
    margin-left: 15%;
}