/* MUDBLAZOR OVERRIDES: loaded after MudBlazor.min.css. The variables used here are in tms-tokens.css,
   sizes are in rem so they follow the density tiers (16px = 1rem in the default tier). */

/* FORMS & INPUTS */
/* These need to be change and manage with input containers components */

/* This removes margin that works differently for some controls that when are wrapped for another mudblazor component act differently and disalign inputs */
.mud-input-control.mud-input-outlined-with-label {
    margin-top: 0px;
    margin-bottom: 0px;
}

/* for now add variable for these inputs and some tms using the variable. */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    color: var(--mud-palette-text-secondary);
    padding: 0;
    font-size: var(--tms-input-placeholder-font-size);  /*ORIGINAL : font-size: 1rem; */
    font-weight: 400;
    line-height: 1;
    letter-spacing: .00938em;
    z-index: 0;
    pointer-events: none;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    line-height: 0.875rem;
}

.mud-input-label-outlined {
    transform: translate(0.875rem, 0.75rem) scale(1);
    max-width: calc(100% - 0.875rem);
    pointer-events: none;
    background-color: var(--mud-palette-surface);
    padding: 0px 5px !important;
}

/* overrides input icons */
.mud-icon-button {
    flex: 0 0 auto;
    padding: 1px 10px 3px 4px;
    overflow: visible;
    font-size: 1.5rem;
    text-align: center;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 50%;
    color: var(--mud-palette-action-default);
}

.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding: 0.75rem 0.125rem 0.4375rem 0.6875rem;
}

/* TEXT AREA */
.mud-input > textarea.mud-input-root-outlined {
    box-sizing: border-box;
    margin-top: 0.8125rem;
    margin-bottom: 0;
    padding: 0.25rem 0.875rem 0.375rem;
    min-height: 4.0625rem;
}

/* INPUT ICONS */
.mud-icon-button {
    padding: 0px 0px 0px 0px;
}

/* ORIGINAL
.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding: 18.5px 14px;
}*/

/*todo:after cleamn a bit more*/

/*.mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    font: inherit;
    color: currentColor;
    width: 100%;
    border: 0;
    margin: 0;
    display: block;
    padding: 6px 0 7px;
    min-width: 0;
    background: none;
    position: relative;
    box-sizing: content-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    color: var(--mud-palette-text-secondary);
    padding: 0;
    font-size: var(--tms-normal-font-size);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .00938em;
    z-index: 0;
    pointer-events: none;
}

.mud-input-label-outlined {
    transform: translate(12px, 8px) scale(1);
    max-width: calc(100% - 14px);
    pointer-events: none;
    padding: 0px 5px !important;
}*/

/*ERROR MESSAGE INPUT*/

/*.mud-input-helper-text {
    color: var(--mud-palette-error);
    margin: 0;
    font-size: .7rem;
    text-align: start;
    font-weight: 400;
    line-height: 1.66;
    letter-spacing: .03333em;
}

.validation-message {
    color: var(--mud-palette-error);
    margin: 0;
    font-size: .7rem;
    text-align: start;
    font-weight: 400;
    line-height: 1.66;
    letter-spacing: .03333em;
}*/




/* this will change the padding of outlined controls and the padding, this  is overriding the heigh so forms can be more dense for TMS */
/*.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding: 10.5px 14px;
}*/

/* when shrinking inputs with the previous override the label or placeholder text gets disalign, this is meant to fix that */
/*.mud-input-label-outlined {
    transform: translate(12px, 8px) scale(1);
    max-width: calc(100% - 14px);
    pointer-events: none;
    padding: 0px 5px !important;
}*/

/* change size placeholder */
/*.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: 0.8rem;
}*/

/* overrides radio group */
/*.mud-icon-button {
    flex: 0 0 auto;
    padding: 7px;
    overflow: visible;
    font-size: 1.5rem;
    text-align: center;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 50%;
    color: var(--mud-palette-action-default);
}*/

/* we can manage the height */
/*.mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    font: inherit;
    color: currentColor;
    width: 100%;
    border: 0;
    height: 1lh; 
    margin: 0;
    display: block;
    padding: 6px 0 7px;
    min-width: 0;
    background: none;
    position: relative;
    box-sizing: content-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}*/

/* ORIGINAL : height: 1lh; */





/*.mud-input-control {*/
    /*    border: 0;
    padding: 0;
    display: flex;
    width: 100%;
    max-width: 200px;
    min-width: 140px;
    position: relative;
    flex-direction: column;
    vertical-align: top;
    margin: 0;
    box-sizing: border-box;*/
/*}*/

/*    .mud-input-control.mud-input-outlined-with-label {
        margin-top: 3px;
        margin-bottom: 4px;
    }

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

.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding: 12px 2px 7px 11px;
}*/


/*.mud-select {
    display: flex;
    flex-grow: 0;
    width: 100%;
    max-width: 200px;
    min-width: 140px;
    position: relative;
    box-sizing: border-box;
}

.mud-picker-inline {
    display: flex;
    flex-grow: 0;
    position: relative;
    width: 100%;
    max-width: 200px;
    min-width: 140px;
    box-sizing: border-box;
}*/

/*.mud-input-control.mud-field .mud-input-slot {
    height: auto;
    min-height: 15px;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    line-height: 14px;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    padding: 0;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .00938em;
    z-index: 0;
    pointer-events: none;
}

.mud-input-label-outlined {
    transform: translate(9px, 12px) scale(1);
    max-width: calc(100% - 14px);
    pointer-events: none;
    padding: 0px 5px !important;
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(6px, -2px) scale(0.78);
    max-width: calc(100% - 14px);
}*/

/* MUDBLAZOR TABLE */

/*.mud-table-cell {
    font-size: .75rem;
}*/

/*.selected_table_row {
    background-color: var(--primary-color);
    opacity: 0.4;
}

    .selected_table_row > td {
        color: white !important;
    }

        .selected_table_row > td .mud-input {
            color: white !important;
        }*/

/* MUD BUTTON */

/*.mud-button {
    padding: 6px 16px 4px 16px;
    margin-top: 2px;
    font-size: 0.75rem;
    min-width: 86px;
}*/