/* Myna Classes */
.my-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem;
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    padding-left: 2rem;
    padding-right: 2rem;
}

    .my-header > div:first-child {
        margin-right: auto;
    }

.my-content, .my-table {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.my-header ~ .my-content {
    height: calc(100% - 5rem);
}

article.my-content {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.my-table-header {
    position: sticky;
    z-index: 3;
}

    .my-table-header * {
        font-weight: bold;
        font-size: 16px;
    }

.my-table td {
    vertical-align: middle;
}

.my-table .mud-table-pagination {
    flex-grow: 0;
    flex-shrink: 0;
}

.my-section-header {
    align-items: center;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    height: 54px;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.my-section-header > h4 {
    border-left: 2px solid #01C6B2;
    height: fit-content;
    margin: 0;
    padding: 4px;
    padding-left: 8px;
}

.spinner-container {
    width: fit-content;
    margin: auto;
    margin-top: 200px;
    margin-bottom: 200px;
}

.form-label {
    font-weight: 600;
}

section.col-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

section.header.col-content {
    height: 4rem;
    flex-grow: 0;
    flex-shrink: 0;
}

.my-status {
    border: 1px solid lightgrey;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    height: 36.5px
}

    .my-status > p {
        font-weight: 600;
        margin: 0;
        margin-left: 8px;
    }

.my-font-subtitle {
    color: lightgrey;
    font-weight: 700;
}

.my-font-warning {
    color: darkred !important; /* This is important tag is bad practice*/
}

.btn-lg {
    font-size: 16px;
    font-weight: 600;
}

tr.mud-table-row:hover {
    background-color: #01C6B210;
}

/** SCAN CHARTS **/
.scan-chart.fullscreen {
    padding-right: 2rem;
    padding-left: 2rem;
    height: 100%;
}

.scan-chart.fullscreen > :first-child {
    display: flex; 
    flex-direction: column;
    margin-bottom: 32px;
}

/** SCAN MODEL VIEWER **/
.scan-model-viewer.fullscreen {
    padding-right: 2rem;
    padding-left: 2rem;
    height: calc(100% - 64px); /*64px is the header height*/
    width: 100%;
}

/* This css selector isn't working */
.scan-model-viewer.fullscreen .mud-paper {
    height: calc(100% - 8px - 2rem);
}

.scan-model-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-height: 400px;
    align-items: center;
}

/** SCAN MEASUREMENTS **/
.scan-measurement {
    height: calc(100% - 64px); /*64px is the header height*/
}

    .scan-measurement.fullscreen {
        padding-right: 2rem;
        padding-left: 2rem;
        /* This may seem redundant but it is just a coincidence that both headers are the same height*/
        height: calc(100% - 64px); /*64px is the header height*/
    }

    .scan-measurement > section.col-content {
        flex-grow: 0;
    }

        .scan-measurement > section.col-content:last-child {
            flex-shrink: 1;
            overflow: hidden
        }

.mud-table-row.selected {
    background: rgb(253, 231, 207);
}

/*** MARGINS ***/

/* Margin 1*/
.m-1 {
    margin: 4px;
}

.mx-1 {
    margin-left: 4px;
    margin-right: 4px;
}

.my-1 {
    margin-top: 4px;
    margin-bottom: 4px;
}

.ml-1 {
    margin-left: 4px;
}

.mr-1 {
    margin-right: 4px;
}

.mt-1 {
    margin-top: 4px;
}

.mb-1 {
    margin-bottom: 4px;
}

/* Margin 2 */
.m-2 {
    margin: 8px;
}

.mx-2 {
    margin-left: 8px;
    margin-right: 8px;
}

.my-2 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.ml-2 {
    margin-left: 8px;
}

.mr-2 {
    margin-right: 8px;
}

.mt-2 {
    margin-top: 8px;
}

.mb-2 {
    margin-bottom: 8px;
}

/* Margin 4 */
.m-4 {
    margin: 16px;
}

.mx-4 {
    margin-left: 16px;
    margin-right: 16px;
}

.my-4 {
    margin-top: 16px;
    margin-bottom: 16px;
}

.ml-4 {
    margin-left: 16px;
}

.mr-4 {
    margin-right: 16px;
}

.mt-4 {
    margin-top: 16px;
}

.mb-4 {
    margin-bottom: 16px;
}