/*  
    This CSS file is to override or add new styles to existing Mud Blazor themes 

    Guidelines:

    - Use this for specific MudBlazor issues only

    - The item you are overriding, should be set as !important

    - Prefix with "v-" (vitas override)

*/


/* Make chip borders less pronounced (except for Yes/No buttons) */
.mud-chip-outlined {
    border: 1px solid rgb(0,0,0,0.08) !important;
}
.mud-chip .mud-chip-icon {
    opacity: 0.5;
}

.bool-button {
    border: solid 1px rgb(201 201 201) !important;
    background-color: rgba(227, 227, 227, 0.3);
}

/* Override thead striped rows input DataGrid */
.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: rgb(0,0,0,0.03) !important;
}

/* Toolbars */

.sub-toolbar {
    background-color: transparent !important;
    padding-top: 18px;
    padding-left: 18px;
    padding-right: 18px;
    width: 100%;
    display: flex;    
}


/* Filled Text Boxes */
.mud-input.mud-input-filled
{
    background-color: rgba(0,0,0,.05);
}

/* Mud Input Fields*/
.mud-input.mud-input-underline:after {
    border-color: var(--mud-palette-text-primary) !important;
}

.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-width: 2px;
    border-color: var(--mud-palette-text-primary) !important;
}

.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--mud-palette-text-primary) !important;
}




/* V-Colors */
.v-c-text-primary {
    color: var(--mud-palette-text-primary) !important;
}
.v-c-text-secondary {
    color: var(--mud-palette-text-secondary) !important;
}
.v-c-text-tertiary {
    color: var(--mud-palette-text-tertiary) !important;
}

.v-c-primary {
    color: var(--mud-palette-primary) !important;
}

.v-b-primary {
    background-color: var(--mud-palette-primary) !important;
}
.v-b-secondary {
    background-color: var(--mud-palette-secondary) !important;
}
.v-b-bar-background {
    background-color: var(--mud-palette-appbar-background) !important;
}

.v-b-background {
    background-color: var(--mud-palette-background) !important;
}

.v-b-background-info-hover {
    background-color: var(--mud-palette-info-hover) !important;
}

.v-b-background-success-hover {
    background-color: var(--mud-palette-success-hover) !important;
}

.v-b-background-primary-hover {
    background-color: var(--mud-palette-primary-hover) !important;
}

.v-b-background-dirty {
    background-color: var(--mud-palette-info-hover) !important;
}

.v-b-text-dirty {
    font-style: italic;
    font-weight: 200;
}

.v-b-background2 {
    background-color: color-mix(in srgb, var(--mud-palette-dark) 20%, transparent) !important;
}

.v-c-bar-text {
    color: var(--mud-palette-appbar-text) !important;
}

.v-c-secondary {
    color: var(--mud-palette-secondary) !important;
}
.v-c-info {
    color: var(--mud-palette-info) !important;
}
.v-c-error {
    color: var(--mud-palette-error) !important;
}
.v-c-warning {
    color: var(--mud-palette-warning) !important;
}
.v-c-success {
    color: var(--mud-palette-success) !important;
}
/* caption */
.v-caption-s {
    font-size: 0.7em !important;
}
.v-caption {
    font-size: 0.8em !important;
}
.v-caption-l {
    font-size: 0.9em !important;
}

/* regular link */
.v-link {
    color: var(--mud-palette-info) !important;
    text-decoration: underline dotted 1px !important;
    font-weight: 500 !important;
}
.v-link:hover {
    color: var(--mud-palette-info-darken) !important;
    text-decoration: underline 2px !important;
    font-weight: 600 !important;
}

/* fonts */
.v-h7 {
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    font-family: var(--mud-typography-h6-family);
    line-height: var(--mud-typography-h6-lineheight);
    letter-spacing: var(--mud-typography-h6-letterspacing);
    text-transform: var(--mud-typography-h6-text-transform);
}

.v-h8 {
    font-size: 0.95rem !important;
    font-weight: bolder !important;
    font-family: var(--mud-typography-h6-family);
    line-height: var(--mud-typography-h6-lineheight);
    letter-spacing: var(--mud-typography-h6-letterspacing);
    text-transform: var(--mud-typography-h6-text-transform);
}

.v-bold {
    font-weight: bold !important;
}

.v-underline {
    text-decoration: underline !important;
}

.v-dimmed {
    opacity: 0.4 !important;
}


/*  avatar */

.v-avatar-hidden {
    background-color: transparent !important;
    display: flex;
    overflow: hidden;
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
    border-radius: 50%;
    justify-content: center;
    color: var(--mud-palette-white);
}

.v-drawer-open {
    width: 200px !important;
}

.v-drawer-info {
    background-color: var(--mud-palette-drawer-background) !important;
}




/* Main Toolbar */

.v-mud-main-content {
    padding-top: 80px !important;
}

.v-mud-drawer {
    height: calc(100% - 0px) !important;
    top: 0px !important;
}

.v-main-app-bar {
    height: 80px !important;
}

.v-toolbar-button-wrapper {
    /*height: 80px;*/
    min-width: 65px;
    max-width: 65px;
    padding: 4px;
    display: block;
    color: var(--mud-palette-text-primary);
}

.v-toolbar-button-wrapper:hover {
    background-color: var(--mud-palette-secondary);
    cursor: pointer;
    color: var(--mud-palette-appbar-text);
}

.v-toolbar-button-wrapper-disabled {    
    min-width: 65px;
    max-width: 65px;
    padding: 5px;
    display: block;
    color: var(--mud-palette-text-primary);
    opacity: 0.5;
}

.v-toolbar-button-wrapper-disabled:hover {    
    cursor: not-allowed;    
}

.v-toolbar-button-content {
    width: 100%;
    margin-top: 10px;
}

.v-toolbar-button-text {
    margin-top: 4px;
    font-size: 12px !important;
    /*word-wrap: break-word; <-- this is making issues with the word "Medications" */
}

/* Some Borders */

.v-border-top {
    border-top: 1px solid #e9e9e9;
}
.v-border-bottom {
    border-bottom: 1px solid gray1px solid #e9e9e9 !important;
}
.v-border-right {
    border-right: 1px solid #e9e9e9 !important;
}
.v-border-left {
    border-left: 1px solid #e9e9e9 !important;
}

/* Chips */

.mud-chip-size-xsmall {
    border-radius: 12px !important;
    font-size: 10px !important;
    height: 20px !important;
    padding: 0 6px !important;
}


.backdrop-filter-blur-4 {
    backdrop-filter: blur(4px) !important;
}

.v-spin {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

.v-spin-slow {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 5000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
.mud-alert-text-warning {
    color: black !important;
}
/*
.mud-overlay.mud-overlay-dialog {
    z-index: 30000 !important;
}

.mud-dialog {
    z-index: 30001 !important;
}

.mud-dialog-container {
    z-index: 30001 !important;
}*/



.mud-input-control.mud-input-required.mud-input-control-full-width.mud-select {
    margin-top: 0 !important;
}



/* filled dropdown */
.mud-input.mud-input-filled {
    background-color: #27379e08;
    border: solid 1px #a4a4a41a;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

    .mud-input.mud-input-filled.mud-disabled {
        background-color: #cdcdcd75 !important;
        border: none;
    }

/* #1977 - Fix: This is needed because the dropdowns text overflows on iPad or smaller screens */
.mud-select {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* used by the async encounter save */
.custom-encounter-async-snackbar-success {
    background-color: green !important;
    color: white !important;
}