body {
    overflow-y: scroll; /* Show vertical scrollbar */
}

/************* MudBlazor Overrides *************/


.mud-container {
    padding: 18px 10px 18px 18px;
}

.mud-icon-size-medium {
    font-size: 1rem;
    margin-top: 3px;
}




/* Reduce text size of Mud Input controls */
.mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    font-size: 12px;
    font-weight: 100; /*bold;*/
    color: var(--mud-palette-dark-lighten);
}

/* Reduce text size of Input Labels */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: 13px; 
    color: #a6a6a6;
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: #a6a6a6; /*var(--mud-palette-text-primary);*/
    font-size:14px;
}


/* Reduce height of mud buttons */
.mud-button {
    height: 30px;
    font-size: 12px;
}

/* MudBlazor button icon size */
.mud-button-icon-size-small > *:first-child {
    font-size: 13px;
}

/* MudBlazor Toolbar */
.mud-toolbar-dense {
    height: 36px;
}

.mud-icon-size-small {
    font-size: 1rem;
}

.mud-icon-size-medium {
    font-size: 1.3rem;
}


.mud-input>textarea.mud-input-root {
    font-size: 13px;
}

div {
    font-family: "Roboto", "Helvetica", "Arial", "sans-serif";
    font-size: var(--mud-typography-body1-size);
}

select, input[type=text] {
    border: 1px solid var(--mud-palette-grey-lighter);
    padding: 2px;
    font-family: "Roboto", "Helvetica", "Arial", "sans-serif";
    /* font-size: var(--mud-typography-body1-size); */
    /* color: #535151; */
}

/* Reduce Out-Lined input controls overall size */
.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    /*padding: 10px 14px;*/
}

.mud-icon-button {
    padding: 2px;
}

.mud-radio-content-placement-end {
    margin-left: 0; /*-11px;*/
    margin-right: 0; /* 16px; */
    margin-inline-start: 0; /*-11px; */
    margin-inline-end: 0; /*16px; */
    flex-direction: row;
}

p {
    font-size: 12px;/* var(--mud-typography-body2-size);*/
    font-family: var(--mud-typography-body2-family);
    font-weight: var(--mud-typography-body2-weight);
    line-height: var(--mud-typography-body2-lineheight);
    letter-spacing: var(--mud-typography-body2-letterspacing);
}

/* Reduce text size checkbox label*/ 
.mud-typography-body1 {
    font-size: 13px; /*var(--mud-typography-body1-size);*/
    font-family: var(--mud-typography-body1-family);
    font-weight: var(--mud-typography-body1-weight);
    line-height: var(--mud-typography-body1-lineheight);
    letter-spacing: var(--mud-typography-body1-letterspacing);
}

.mud-table-cell {
    padding: 4px;
}

.mud-simple-table.mud-table-dense * tr td, .mud-simple-table.mud-table-dense * tr th {
    padding: 4px 24px 4px 16px;
}

.mud-simple-table.mud-table-sticky-header * table thead * th {
    background-color: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
    background-color: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
    font-size:12px;
}

.mud-simple-table.mud-table-sticky-footer * table tfoot * td {
    background-color: #ededeb;
    position: sticky;
    z-index: 1;
    bottom: -3px;
}

.mud-table-root .mud-table-body .mud-table-cell {
    font-size: 12px;
}


.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 10px;
}

.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding: 11.5px 14px;
}

.mud-input-label-outlined {
    transform: translate(14px,10px) scale(1);
    pointer-events: none;
    background-color: var(--mud-palette-surface);
    padding: 0 5px !important;
}

/* Simple table font size */
.mud-simple-table table * tr > td, .mud-simple-table table * tr th {
    font-size: var(--mud-typography-body2-size);
}


/*TabSet Component*/
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link:hover {
    background-color: var(--mud-palette-table-hover);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    /*font-weight: bold;*/
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}

.nav-tabs .nav-link {
    color: var(--mud-palette-grey-light);
    background-color: var(--mud-palette-white);
    border:none;
}

.nav-tabs .nav-item {
    margin: 0 0 0 4px;
}

.nav-tabs {
    border-bottom:none;
}

/* Close Tab (X) button */
.close-tab {
    color: #a6a6a6;
    margin-left: 8px;
}

/* Close Tab (X) button */
.close-tab:hover {
    color: var(--mud-palette-error-darken);
    margin-left: 8px;
}

/* Close Tab (X) button */
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active .close-tab:hover {
    color: var(--mud-palette-error-darken);
    margin-left: 8px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active .close-tab {
    font-weight: bold;
    color: var(--mud-palette-primary-text);
}


table {
    width: 100%;
    background: var(--mud-palette-white);
    font-size: 12px;
}

.sub-tab-height {
    display:grid;
    grid-template-rows:auto 1fr;
    height:400px;
}

.sub-tab-height-with-commands {
    height: 183px;
}

.sub-tab-panel {
    margin-bottom: 12px;
    display: grid;
    grid-template-rows: auto 1fr;
    /*height: 397px;*/
}


/*.add-new-product-td {
    color: black;*//*var(--mud-palette-text-primary);*/
/*}*/

.order-by-display {
    font-size:9px;
}

/* Status background color values */

.Default {
    background-color: var(--mud-palette-action-disabled-background); /* grey */
}

.Error {
    background-color: var(--mud-palette-error); /* red */
}

.Warning {
    background-color: var(--mud-palette-warning); /* orange */
}

.Info {
    background-color: var(--mud-palette-primary); /* blue */
}

.Success {
    background-color: var(--mud-palette-success); /* green */
}



.mud-card-header {
    background-color: var(--mud-palette-secondary-darken);
}


/* Changes the height of the mudchip displayed within a simple table */
.simple-table-mud-chip .mud-chip {
    margin: 1px;
    height: 18px;
}

.filter-add-record-button {
    font-size: 11px;
    text-transform: none;
    margin:0;
    padding: 2px 7px;
    height: 24px;
}


/* Rise and shake - Wobble and shake */ 
.wobble-element {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(-2px, 0, 0);
    }

    10%, 90% {
        transform: translate3d(1px, 0, 0);
    }
}


.rise-shake {
    animation: jump-shaking 1s; /*infinite;*/
}

@@keyframes jump-shaking {
    0% {
        transform: translateX(0)
    }

    25% {
        transform: translateY(-9px)
    }

    35% {
        transform: translateY(-9px) rotate(17deg)
    }

    55% {
        transform: translateY(-9px) rotate(-17deg)
    }

    65% {
        transform: translateY(-9px) rotate(17deg)
    }

    75% {
        transform: translateY(-9px) rotate(-17deg)
    }

    100% {
        transform: translateY(0) rotate(0)
    }
}

.edit-role-dialog-table-header {
    background-color: #f2f2f2;
    border: #f2f2f2;
}