:root
{
 --vip-pageheader-height:100px;
}

.mud-main-content
{
    height: calc(100vh);
    overflow-y: scroll;
    overflow-x: hidden;
}

.mud-appbar .mud-toolbar-appbar {
    padding-left: 24px;
    padding-right: 24px;
}

.vip-nav-dark
{
    background-color: #000000 !important;
}

.vip-nav-link {
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.vip-nav-dark .vip-nav-link {
    color: var(--mud-palette-primary-text);
}

.vip-nav-dark .mud-typography{
    color: var(--mud-palette-primary-text);
}


.vip-nav-link.active{
    background-color: var(--vip-neutral-50);
    font-weight: bold;
    border-bottom-color: var(--vip-red-500);
    border-bottom-style: solid;
    padding-top: 24px;
    border-bottom-width: 2px;
}

.vip-nav-dark .vip-nav-link.active {
    background-color: var(--mud-palette-secondary-lighten);
    border-bottom-color: #ffffff;
}

.vip-nav-dark .mud-icon-root.mud-svg-icon
{
    fill: var(--mud-palette-primary-text);
}

.vip-nav-link:hover {
    background-color: var(--vip-neutral-50);
}

.vip-nav-dark .vip-nav-link:hover {
    background-color: var(--mud-palette-secondary-lighten);
}


.vip-nav-page-header{
    background-color: var(--vip-red-50);
    width: 100vw;
    height: var(--vip-pageheader-height);
    position: relative;
    left: calc(-50vw + 50%);
}

.vip-dialog .mud-dialog-content
{
    padding: 0px !important;
}

.vip-dialog .mud-dialog-title {
    padding: 16px 16px !important;
}

.mud-list-item-icon {
    color: var(--vip-neutral-600) !important;
}

.mud-table-root {
    border-width: 1px;
    border-color: var(--vip-neutral-200);
    border-style: solid;
    border-radius: 4px;
}

.mud-table-head
{
    background-color: var(--vip-neutral-50);
}

.mud-table-root .mud-table-head .mud-table-cell
{
    background-color: var(--vip-neutral-50) !important;
}

.vip-radio 
{
    padding-left: 11px;
}

.inactive-text
{
    color: var(--mud-palette-text-secondary) !important;
}

.mud-typography-subtitle1
{
    color: var(--vip-neutral-700) !important;
}

.mud-typography-subtitle2
{
    color: var(--vip-neutral-700) !important;
}

.mud-button-outlined.mud-button-outlined-secondary {
    border: 1px solid var(--vip-neutral-400) !important;
    color: var(--vip-neutral-700) !important;
    background-color: #FFFFFF;
}

.row-clickable-table .mud-table-body .mud-table-row {
    cursor: pointer;
}

.vip-hide-helper .mud-input-control-helper-container {
    display: none;
}

.mud-input-underline:after {
    transition: none !important;
}

.mud-list-item-disabled
.mud-list-item-text {
    margin-top: 0px;
    margin-bottom: 0px;
}

.mud-list
.mud-list-item-disabled {
    padding-left: 8px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    background-color: var(--vip-neutral-100) !important;
}

.mud-list-item-disabled
.mud-typography-overline {
    text-transform: uppercase !important;
    
    letter-spacing: 1.2px;
}

/*TODO MOVE THIS BACK INTO ASSESSMENT BUTTONS COMPONENT LEVEL CSS*/
/*JUST NEEDED TO GET THE POC OUT THE DOOR*/
.assessment-button
{
    width: 100%;
    height: 100%;
    cursor:pointer;
    border: 1px solid var(--vip-neutral-300);
    border-radius: 8px;
}

.assessment-button.selected
{
    border: 2px solid var(--vip-blue-500);
    background-color: var(--vip-blue-50);
}

.assessment-button.disabled
{
    cursor:default;
    border: 1px solid var(--vip-neutral-100);
}

.assessment-icon.disabled
{
    fill: var(--vip-blue-300) !important;
}

.assessment-header.disabled
{
    color: var(--vip-neutral-300) !important;
}

.assessment-details.disabled
{
    color: var(--vip-neutral-300) !important;
}

.mud-data-grid-root table {
    table-layout: fixed !important;
    width: auto !important;
}

.mud-data-grid-header .mud-data-grid-cell,
.mud-data-grid-body .mud-data-grid-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mud-data-grid-resize-handle {
    cursor: col-resize;
    user-select: none;
    width: 4px;
    background-color: transparent;
    transition: background-color 0.2s;
}

    .mud-data-grid-resize-handle:hover {
        background-color: var(--vip-neutral-200);
    }

.mud-data-grid-root.resizable table {
    table-layout: fixed;
    width: 100%;
}

.mud-resizer {
    cursor: col-resize !important;
    user-select: none;
    width: 6px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
}