/* General Site Styles */
html {
    height: 100%;
    max-height: 100%;
    overflow: auto;
    font-size: .9em !important;
}

body {
    height: 100%;
    width: 100%;
}

.tc-side-nav {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.tc-loading {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 15px;
    font-size: 2em;
    text-align: center;
    margin-top: 15px;
}

.tc-loading-icon {
    width: 100px;
}

.tc-dashboard-container {
    display: flex;
    flex-wrap: wrap;
}

.tc-dashboard-section-2 {
    padding: 5px;
    margin: 10px;
    border: solid thin rgb(237, 237, 237);
    flex-grow: 2;
    flex-basis: calc(50% - 40px);
}

.tc-dashboard-section-4 {
    padding: 5px;
    margin: 10px;
    border: solid thin rgb(237, 237, 237);
    flex-grow: 4;
}

.tc-dashboard-cards {
    justify-content: space-evenly;
}

    .tc-dashboard-cards div {
        margin: 5px !important;
        text-align: center;
    }

.tc-dashboard-header {
    width: 100%;
}

    .tc-dashboard-header td {
        width: 20%;
    }

.tc-dashboard-icon {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.tc-align-right {
    text-align: right;
}

.tc-page-stat {
    min-width: 230px !important;
}

.tc-admin-section-sm {
    padding: 10px;
    margin: 10px;
    border: solid thin rgb(237, 237, 237);
    flex-grow: 2;
    flex-basis: calc(33% - 40px);
}

.tc-admin-page {
    display: flex;
    flex-wrap: wrap;
    margin: 10px !important;
}

.tc-tenant-select-popover {
    z-index: calc(var(--mud-zindex-appbar) + 3) !important;
}

.tc-popover-link {
    z-index: 9999;
}

    .tc-popover-link:hover {
        color: rgb(232, 49, 37) !important;
    }

.tc-breadcrumbs {
    padding: 0px !important;
}

.tc-link a {
    text-decoration: underline !important;
    color: rgb(40, 125, 173) !important;
}

.tc-width-1 {
    width: 1%;
    white-space: nowrap;
}

.tc-cursor-move {
    cursor: grab;
}

/* Form Inputs */
.tc-form-container {
}

    .tc-form-container .mud-input > input.mud-input-root-outlined, .tc-form-container div.mud-input-slot.mud-input-root-outlined {
        padding: 16px 12px 12px 12px !important;
    }

    .tc-form-container .mud-input .mud-input-adornment.mud-text p {
        padding: 16px 0px 12px 0px !important;
        font-size: .9rem !important;
    }

    .tc-form-container .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
        font-size: .9rem !important;
    }

    .tc-form-container .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
        line-height: 15px !important;
    }

    .tc-form-container .warning-custom-helper-text .mud-input-helper-text {
        color: orange !important;
    }

    .tc-form-container .excessive-weight-custom-helper-text .mud-input-helper-text {
        color: red !important;
    }

    .tc-form-container .mud-input-outlined-border {
        border-radius: 0px !important;
    }

    .tc-form-container .mud-input-control .mud-input.mud-disabled {
    }

        .tc-form-container .mud-input-control .mud-input.mud-disabled .mud-input-slot {
            cursor: text !important;
        }

        .tc-form-container .mud-input-control .mud-input.mud-disabled + label {
            transform: translate(14px, -6px) scale(0.75);
            transform-origin: top left;
        }

/* Grids */
.tc-hide-grid-footer {
    display: none;
}

/* 
    Grid Filter Popover
        Unfortunately we can't encapsulate with a custom class without building our own template, 
        however there are some empty classes provided for us to latch onto such as remove-filter-button
*/
.remove-filter-button {
    margin-bottom: 4px;
}

.mud-grid-item:has(.remove-filter-button) {
    order: 4;
    justify-content: center;
}

/* Grid text */
.grid-col-sm {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 25ch;
    white-space: nowrap;
}

.grid-col-md {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 75ch;
    white-space: nowrap;
}

.grid-col-lg {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 150ch;
    white-space: nowrap;
}

.tc-draggable-grid {
}

    .tc-draggable-grid .mud-table-row {
        height: 0px; /* Ignored but necessary */
    }

        .tc-draggable-grid .mud-table-row .tc-drag-cell, .tc-data-grid.mud-table-dense * .mud-table-row .mud-table-cell.tc-drag-cell {
            padding: 0px !important;
            height: inherit;
            border: none;
        }

            .tc-draggable-grid .mud-table-row .tc-drag-cell .tc-drag-cell-content {
                padding: 3px 6px 3px 6px !important;
                height: 100%;
                width: 100%;
            }

@supports (-moz-appearance: none) { /* Tweak to work in Firefox */

    .tc-draggable-grid .mud-table-row {
        height: 100%;
    }

        .tc-draggable-grid .mud-table-row .tc-drag-cell, .tc-draggable-grid.mud-table-dense * .mud-table-row .mud-table-cell.tc-drag-cell {
            height: 100%;
        }
}

/* Markdown Announcements */
.tc-announcement {
    max-height: 100%;
    font-size: var(--mud-typography-body1-size);
    font-family: var(--mud-typography-body1-family);
    font-weight: var(--mud-typography-body1-weight);
}

    .tc-announcement p {
        line-height: var(--mud-typography-body1-lineheight);
        letter-spacing: var(--mud-typography-body1-letterspacing);
        text-transform: var(--mud-typography-body1-text-transform);
    }

    .tc-announcement h1 {
        font-size: var(--mud-typography-h1-size);
        font-family: var(--mud-typography-h1-family);
        font-weight: var(--mud-typography-h1-weight);
        line-height: var(--mud-typography-h1-lineheight);
        letter-spacing: var(--mud-typography-h1-letterspacing);
        text-transform: var(--mud-typography-h1-text-transform);
    }

    .tc-announcement h2 {
        font-size: var(--mud-typography-h2-size);
        font-family: var(--mud-typography-h2-family);
        font-weight: var(--mud-typography-h2-weight);
        line-height: var(--mud-typography-h2-lineheight);
        letter-spacing: var(--mud-typography-h2-letterspacing);
        text-transform: var(--mud-typography-h2-text-transform);
    }

    .tc-announcement h3 {
        font-size: var(--mud-typography-h3-size);
        font-family: var(--mud-typography-h3-family);
        font-weight: var(--mud-typography-h3-weight);
        line-height: var(--mud-typography-h3-lineheight);
        letter-spacing: var(--mud-typography-h3-letterspacing);
        text-transform: var(--mud-typography-h3-text-transform);
    }

    .tc-announcement h4 {
        font-size: var(--mud-typography-h4-size);
        font-family: var(--mud-typography-h4-family);
        font-weight: var(--mud-typography-h4-weight);
        line-height: var(--mud-typography-h4-lineheight);
        letter-spacing: var(--mud-typography-h4-letterspacing);
        text-transform: var(--mud-typography-h4-text-transform);
    }

    .tc-announcement h5 {
        font-size: var(--mud-typography-h5-size);
        font-family: var(--mud-typography-h5-family);
        font-weight: var(--mud-typography-h5-weight);
        line-height: var(--mud-typography-h5-lineheight);
        letter-spacing: var(--mud-typography-h5-letterspacing);
        text-transform: var(--mud-typography-h5-text-transform);
    }

    .tc-announcement h6 {
        font-size: var(--mud-typography-h6-size);
        font-family: var(--mud-typography-h6-family);
        font-weight: var(--mud-typography-h6-weight);
        line-height: var(--mud-typography-h6-lineheight);
        letter-spacing: var(--mud-typography-h6-letterspacing);
        text-transform: var(--mud-typography-h6-text-transform);
    }

    .tc-announcement a {
        text-decoration: underline;
        color: var(--mud-palette-info) !important;
    }

    .tc-announcement ul {
        list-style-type: disc;
        list-style-position: inside;
    }

    .tc-announcement ol {
        list-style-position: inside;
    }

    .tc-announcement ul ul, ol ul {
        list-style-type: circle;
        list-style-position: inside;
        margin-left: 15px;
    }

    .tc-announcement ol ol, ul ol {
        list-style-type: lower-latin;
        list-style-position: inside;
        margin-left: 15px;
    }

/* Responsive */
@media (min-width: 1054px) {
    .grid-col-sm {
        max-width: 20ch;
    }

    .grid-col-md {
        max-width: 50ch;
    }

    .grid-col-lg {
        max-width: 120ch;
    }
}

@media (min-width: 768px) {
    .grid-col-sm {
        max-width: 15ch;
    }

    .grid-col-md {
        max-width: 40ch;
    }

    .grid-col-lg {
        max-width: 70ch;
    }
}

@media (max-width: 768px) {
    .mobile-hide {
        display: none !important;
    }
}

@media (width > 600px) {
    .tc-grid-tooltip-overflow {
        max-width: 150px;
    }
}

@media (width <= 600px) {
    .tc-grid-tooltip-overflow > .mud-tooltip-root {
        max-width: 150px;
        text-align: right;
    }
}

@media print {
    .tc-appbar {
        display: none !important;
    }

    .tc-nav-drawer {
        display: none !important;
    }

    .tc-main-container {
        margin: 0px !important;
        padding: 0px !important;
    }

    .print-hide {
        display: none !important;
    }
}

.header-class {
    top: 0;
    position: sticky;
    z-index: 1;
    background-color: var(--mud-palette-surface);
}

.tc-product-text .mud-typography-body1 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.tc-vert-resize {
    overflow: auto;
    resize: vertical;
}

.tc-truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.tc-status-green {
    background-color: rgb(47, 165, 42) !important;
    color: white !important;
}

.tc-status-yellow {
    background-color: rgb(255, 223, 97) !important;
    color: black !important;
}

.tc-status-orange {
    background-color: rgb(219, 140, 17) !important;
    color: black !important;
}

.tc-status-red {
    background-color: rgb(193, 43, 43) !important;
    color: white !important;
}

.tc-status-blue {
    background-color: rgb(41, 95, 135) !important;
    color: white !important;
}

/* Details Layout CSS */
.model-content {
    overflow-x: auto;
}

.model-content-padded {
    padding: 10px 10px 10px 10px;
}