.loginbg {
    background-image: url('/images/loginBg.jpg');
    background-size: cover;
    height: 100vh;
    width: 100%;
}

.user-details {
    line-height: 1.0;
}

.appbar-brand-text {
    letter-spacing: .5rem;
    font-weight: 300;
    margin-left: 12px;
    font-size: 24px;
    user-select: none;
}

button.no-focus:focus {
    outline: none;
    box-shadow: none;
}

.no-wrap {
    white-space: nowrap;
}

/* BEGIN FONT SIZE FIDDLING */
body {
    font-size: .75rem
}

/* Use icon-button class for MudButtons with icon only. */
.mud-button-root.icon-button {
    min-width: initial;
}

    .mud-button-root.icon-button .mud-button-icon-start {
        margin: 0px;
    }

.mud-card-header {
    padding-bottom: 0px;
}

.mud-table-root .mud-table-head .mud-table-cell {
    line-height: initial;
}

.mud-table-cell,
.mud-input-control > .mud-input-label,
.mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    font-size: .75rem;
}

.mud-input-control > .mud-input-label {
    line-height: .75rem !important;
    padding: 0px !important;
}

.mud-input:focus-within + label.mud-input-label.mud-input-label-inputcontrol,
.mud-shrink + label.mud-input-label {
    font-size: 1rem !important;
    padding: 0px !important;
}

.mud-button-filled-size-small {
    font-size: .75rem;
}
/* END FONT SIZE FIDDLING */

.mudbutton-fa-icon .mud-button-icon-start {
    margin-right: 12px;
}

.mud-picker.mud-picker-inline.mud-input-control-margin-dense .mud-input-root-outlined {
    padding: 10.5px 14px;
}

.mud-picker.mud-picker-inline.mud-input-control-margin-dense .mud-input-label-outlined {
    transform: translate(14px,12px) scale(1);
}

.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 2px;
}

    .mud-table-dense * .mud-table-row .mud-table-cell:first-child {
        padding-left: 12px;
    }

    .mud-table-dense * .mud-table-row .mud-table-cell:last-child {
        padding-right: 12px;
    }

.mud-table-cell .mud-input-control-margin-dense .mud-input .mud-input-slot {
    padding: 4px;
}

.very-dense.mud-input-control-margin-dense .mud-input .mud-input-slot {
    padding: 4px 4px;
}

.very-dense.mud-picker .mud-input-control-margin-dense .mud-input {
    padding: 0px 4px;
    margin-top: 0px !important;
}

.very-dense.mud-checkbox .mud-button-root {
    padding: 0px 4px;
    margin-top: 0px !important;
}

.input-success .mud-input .mud-input-slot {
    border-radius: 6px;
    background-color: #F0FCF5;
}

.input-success .mud-input-label-outlined {
    background-color: #F0FCF5;
}

.input-error .mud-input .mud-input-slot {
    border-radius: 6px;
    background-color: #FEF4F3;
}

.input-error .mud-input-label-outlined.mud-input-label-inputcontrol {
    background-color: #FEF4F3;
}

.input-readonly .mud-input .mud-input-slot {
    border-radius: 6px;
    background-color: whitesmoke;
    pointer-events: none;
}

.input-readonly .mud-input-label-outlined {
    background-color: whitesmoke;
    pointer-events: none;
}

/* Inserting this collapsed row between two flex items will make 
 * the flex item that comes after it break to a new row 
 * https://tobiasahlin.com/blog/flexbox-break-to-new-row/
 */
.d-break {
    flex-basis: 100%;
    height: 0;
}

.uppercase {
    text-transform: uppercase;
} 

.bold {
    font-weight: bold;
}

.scrollable {
    white-space: nowrap;
}

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

.customer-table.mud-table .mud-toolbar {
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 8px;
}

    .customer-table.mud-table .mud-toolbar .mud-input-control .mud-input {
        margin-top: 0px;
    }


.customer-table.mud-table .mud-table-row:last-child .mud-table-cell {
    padding-top: 8px;
    padding-bottom: 8px;
}

.mud-table.employee-table .mud-toolbar {
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 8px;
}

    .mud-table.employee-table .mud-toolbar .mud-input-control .mud-input {
        margin-top: 0px;
    }

.mud-table.training-table > .mud-table-container {
    /* overflow-x: auto causes some strange issues.
       See here for more details https://stackoverflow.com/questions/23529369/why-does-x-overflowhidden-cause-extra-space-below 
    */
    overflow-x: initial;
}

.text-right,
.text-right input {
    text-align: right;
}

.fix-first-column table {
    overflow: auto;
    width: 100%;
    white-space: nowrap;
    z-index: 1;
}

    .fix-first-column table .fix {
        position: sticky;
        left: 0;
        background: white;
        z-index: 3 !important;
    }

    .fix-first-column table th.fix {
        z-index: 4 !important;
    }

@media print {
    #__ybug-launcher {
        visibility: hidden;
    }
}